.native-weather { display: inline-flex; flex: none; align-items: center; gap: 4px; line-height: 1; vertical-align: top; color: #8e8e93; pointer-events: none; }
.native-weather svg { display: block; flex: none; width: 1em; height: 1em; }
.native-weather-temperature { font-size: 14px; font-weight: 400; }
.native-phone-status { position: relative; display: flex; align-items: flex-start; justify-content: space-between; height: 4.4em; padding: 1.35em 1.6em 0; color: #000; background: #fff; font: 600 12px/1 -apple-system, BlinkMacSystemFont, sans-serif; }
.native-status-time { padding: .1em .1em 0; font-size: 1.15em; letter-spacing: -.03em; }
.native-dynamic-island { position: absolute; top: .8em; left: 50%; width: 7.5em; height: 2em; border-radius: 2em; transform: translateX(-50%); background: #080808; }
.native-status-indicators { display: flex; align-items: center; gap: .35em; padding-top: .1em; }
.native-status-indicators svg { display: block; height: 1em; }
.native-cellular { width: 1.3em; }
.native-wifi { width: 1.2em; }
.native-battery { width: 2em; }

/* CalendarToolbarRaster: 24 pt canvas / 20 pt visible art at native scale. */
.native-month-toolbar {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  height: var(--native-toolbar-height, 52px);
  flex: none;
  border-top: .5px solid #3c3c430f;
  color: #000c;
  background: #fff;
  pointer-events: none;
}
.native-month-tool { position: relative; display: grid; place-items: center; min-width: 0; }
.native-month-tool + .native-month-tool::before { content: ''; position: absolute; left: 0; top: 27%; bottom: 27%; width: .5px; background: #0000001f; }
.native-toolbar-glyph { position: relative; z-index: 1; display: block; width: var(--native-toolbar-icon-size, 24px); height: var(--native-toolbar-icon-size, 24px); background: currentColor; -webkit-mask: var(--native-toolbar-mask) center / contain no-repeat; mask: var(--native-toolbar-mask) center / contain no-repeat; }
.native-toolbar-addEvent { --native-toolbar-mask: url('../assets/native-toolbar/addEvent.png'); }
.native-toolbar-settings { --native-toolbar-mask: url('../assets/native-toolbar/settings.png'); }
.native-toolbar-search { --native-toolbar-mask: url('../assets/native-toolbar/search.png'); }
.native-toolbar-memo { --native-toolbar-mask: url('../assets/native-toolbar/memo.png'); }
.native-toolbar-dayView { --native-toolbar-mask: url('../assets/native-toolbar/dayView.png'); }
.native-toolbar-weekView { --native-toolbar-mask: url('../assets/native-toolbar/weekView.png'); }
.native-toolbar-monthView { --native-toolbar-mask: url('../assets/native-toolbar/monthView.png'); }
.native-toolbar-today { --native-toolbar-mask: url('../assets/native-toolbar/today.png'); }
.native-month-tool-selected { color: #007aff; }
.native-month-tool-selected::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--native-toolbar-icon-size, 24px) * 1.5); height: calc(var(--native-toolbar-icon-size, 24px) * 1.166667); box-sizing: border-box; border: 1px solid #007aff47; border-radius: 100px; background: linear-gradient(#007aff38, #007aff14); transform: translate(-50%, -50%); }
.native-month-tool-selected .native-toolbar-glyph::before { content: ''; position: absolute; top: 3px; left: 6px; right: 6px; height: 1px; background: #ffffff29; }

.native-preview-fit { display: contents; }
@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  .native-preview-fit {
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
    height: var(--native-preview-height);
    max-height: max(240px, var(--native-preview-max-height));
  }
  .native-preview-fit > .native-preview-canvas {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--native-preview-width);
    max-width: none;
    margin: 0;
    transform: translateX(-50%) scale(var(--native-preview-scale, 1));
    transform-origin: top center;
  }
}