/* ---------- Tokens ----------
   Each color is light-dark(light, dark). The Theme option only sets color-scheme:
   Auto follows the device, Light and Dark force one side. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#FFFFFF, #000000);
  --ink: light-dark(#000000, #FFFFFF);
  --muted: light-dark(#6B6B6B, #8C8C8C);
  --dim: light-dark(#ABABAB, #5C5C5C);
  --dot: light-dark(#E2E2E2, #333333);
  --fill: light-dark(#F2F2F2, #1A1A1A);
  --fill-hover: light-dark(#E6E6E6, #2B2B2B);
  --red: light-dark(#E00000, #FF3B30);
}
/* --u is the hour strip's pixel: every size in the strip is a multiple of it, so the whole strip scales
   together by changing it, e.g. in the phone block (app.js reads it too). */
:root { --u: 1px; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Background pattern option. Each list is written out per layer so the hour strip's edge fade can
   reuse it (see .timeline::before), with the pattern fixed to the window so both line up exactly. */
:root { --pat: none; --pat-size: auto; --pat-att: fixed; }
:root[data-bg="dots"] { --pat: radial-gradient(circle, var(--dot) 1.3px, transparent 1.8px); --pat-size: 22px 22px; }
:root[data-bg="grid"] {
  --pat: linear-gradient(var(--dot) 1px, transparent 1px), linear-gradient(90deg, var(--dot) 1px, transparent 1px);
  --pat-size: 22px 22px, 22px 22px; --pat-att: fixed, fixed;
}

/* ---------- Page ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 24px 40px;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--pat); background-size: var(--pat-size);
}
input { user-select: text; -webkit-user-select: text; }
button { font: inherit; color: inherit; }
/* No focus outlines anywhere */
*, *:focus, *:focus-visible { outline: none; }
/* No scrollbars anywhere; everything still scrolls */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

/* Exactly one screen tall (minus the page and notch padding), so the page only scrolls when its content is taller */
.wrap {
  --pad-y: 64px;
  max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px;
  min-height: calc(100dvh - var(--pad-y) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/* ---------- Header: title, today's date, Settings ---------- */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px 16px; }
h1 { font-size: 30px; font-weight: 700; margin: 0; white-space: nowrap; }
.today { font-size: 30px; font-weight: 700; white-space: nowrap; }
.link {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-size: 30px; font-weight: 700; color: var(--ink); white-space: nowrap;
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.link:hover { text-decoration-line: underline; }
.top > .link { justify-self: end; }
/* Date option off: still holds its place on wide screens, so Settings stays at the right (gone on phones) */
.today.off { visibility: hidden; }
/* Settings / Done shows as a word; the icons are for phones */
.icon { display: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon circle { fill: var(--bg); }

.ctl {
  height: 42px; padding: 0 18px; border: 0; background: var(--fill);
  border-radius: 8px; cursor: pointer; font-size: 16px;
}
.ctl:hover { background: var(--fill-hover); }
.status { color: var(--muted); font-size: 15px; }
/* Time difference line under the hours on a city-pair page */
.pair-note { margin: 0 0 auto; color: var(--muted); font-size: 17px; }
.board:has(+ .pair-note) { margin-bottom: 0; } /* centered together with the strip */

/* ---------- Hour view: city labels on the left, a scrollable strip of hours on the right ---------- */
.board {
  --row: calc(60 * var(--u)); --cell: calc(46 * var(--u));
  /* With dates on, the date and the numbers form one two-line group, centered in the row */
  --group: calc(40 * var(--u)); --gap-y: calc((var(--row) - var(--group)) / 2);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 24px;
  margin-block: auto; /* centered in the space under the header */
}
.board:not(.no-dates) { --row: calc(78 * var(--u)); }
:root[data-cell="s"] .board { --cell: calc(36 * var(--u)); }
:root[data-cell="l"] .board { --cell: calc(60 * var(--u)); }

.labels, .hours { display: grid; grid-template-rows: repeat(var(--n), var(--row)); row-gap: calc(10 * var(--u)); }
.labels { max-width: 220px; padding-block: calc(34 * var(--u)) calc(8 * var(--u)); }
.board.is-empty .labels { max-width: none; grid-column: 1 / -1; }
.board.is-empty .timeline { display: none; }
.lab { display: flex; flex-direction: column; justify-content: center; padding: 0 8px 0 10px; min-width: 0; }
.city { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-meta { display: flex; gap: 10px; font-size: 15px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.clock { color: var(--ink); font-weight: 600; }

.timeline { --fade: 140px; position: relative; min-width: 0; }
.scroller { overflow-x: auto; overflow-y: hidden; padding-block: calc(34 * var(--u)) calc(8 * var(--u)); cursor: grab; }
.scroller.dragging { cursor: grabbing; }
.scroller.dragging .cell { pointer-events: none; }
/* Hours fade out toward both edges. The fade is an overlay in the page color (plus the background
   pattern), so pinned dates can sit above it and stay sharp while the hours behind them fade. */
.timeline::before, .timeline::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--fade); z-index: 3; pointer-events: none;
  background-size: var(--pat-size), 100% 100%; background-attachment: var(--pat-att), scroll; background-repeat: repeat, no-repeat;
}
.timeline::before { left: 0; background-image: var(--pat), linear-gradient(to right, var(--bg), transparent); }
.timeline::after { right: 0; background-image: var(--pat), linear-gradient(to left, var(--bg), transparent); }

/* --extra is the room added while an hour is opened up for precision (see .zoom-ticks) */
.hours { position: relative; width: calc(var(--total) * var(--cell) + var(--extra, 0px)); }
/* Each row is split into one block per date, with that date's label at its start */
.band { display: flex; }
.day-block { flex: none; display: flex; flex-direction: column; width: calc(var(--k) * var(--cell)); }
.day-cells { display: grid; grid-template-columns: repeat(var(--k), var(--cell)); height: var(--row); }
/* The label sits just right of the midnight line and sticks at the left edge until its day ends */
.day-tag {
  position: sticky; left: calc(4 * var(--u)); align-self: flex-start; height: 0; z-index: 5;
  margin-left: calc(var(--cell) / 2 + 8 * var(--u)); padding-right: calc(8 * var(--u));
  transform: translateY(calc(var(--gap-y) - 2 * var(--u)));
  font-size: calc(12 * var(--u)); line-height: calc(14 * var(--u)); white-space: nowrap; pointer-events: none; transition: opacity .15s;
}
.day-block.other-day .day-tag { color: var(--dim); }
.day-tag.gone { opacity: 0; }
.board.no-dates .day-tag { display: none; }

/* Each number marks the exact hour at its center; midnight is drawn as a line instead of 0 */
.cell {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: calc(17 * var(--u)); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cell.other-day { color: var(--dim); }
.cell.now { font-weight: 700; color: var(--red); }
.cell.day-start::before {
  content: ""; position: absolute; left: 50%; top: 22%; bottom: 22%;
  width: calc(2 * var(--u)); margin-left: calc(-1 * var(--u)); background: var(--ink);
}
.cell.day-start.other-day::before { background: var(--dim); }
/* Half-hour zones reach midnight between two hour marks */
.cell.day-start.half::before { left: 0; margin-left: 0; }
@media (hover: hover) {
  .cell:not(:empty):hover { color: var(--ink); }
  .cell:not(:empty):hover::after {
    --ring: min(38 * var(--u), var(--cell) - 2 * var(--u));
    content: ""; position: absolute; left: 50%; top: 50%; width: var(--ring); height: var(--ring);
    margin: calc(var(--ring) / -2 - var(--u)) 0 0 calc(var(--ring) / -2);
    border: calc(3 * var(--u)) solid var(--ink); border-radius: 50%; pointer-events: none;
  }
}
/* With dates on: numbers sit at the bottom of the group, the midnight line spans it */
.board:not(.no-dates) .cell { align-items: flex-end; line-height: 1; padding-bottom: calc(var(--gap-y) - 3 * var(--u)); }
.board:not(.no-dates) .cell.day-start::before { top: calc(var(--gap-y) - 4 * var(--u)); bottom: calc(var(--gap-y) - 4 * var(--u)); }
.board:not(.no-dates) .cell:not(:empty):hover::after { top: auto; bottom: calc(var(--gap-y) + 5.5 * var(--u) - var(--ring) / 2); margin-top: 0; }

/* Sunrise and sunset steps (drawn by drawSun in app.js): from below the numbers (night) to above them (day)
   and back. Clipped to the strip, so a step near either end doesn't widen it. */
.sun { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.sun path { fill: none; stroke: var(--ink); stroke-width: var(--u); stroke-linecap: round; stroke-linejoin: round; }
.sun .other-day path { stroke: var(--dim); }
/* Each step has a wide invisible copy to hover; on hover the line thickens like the hour ring, and its label shows */
.sun path.hit { stroke: transparent; stroke-width: calc(12 * var(--u)); pointer-events: stroke; }
@media (hover: hover) { .sun .step:hover path:not(.hit) { stroke-width: calc(3 * var(--u)); stroke: var(--ink); } }

/* Two lines run down the strip: the red line for now (its box shows the current minute) and the ruler
   (its box shows the distance from now). Drag either line or box to place the ruler. */
.nowline, .ruler {
  position: absolute; top: calc(-24 * var(--u)); bottom: calc(-8 * var(--u));
  width: calc(2 * var(--u)); margin-left: calc(-1 * var(--u)); pointer-events: none;
}
.nowline { background: var(--red); z-index: 2; }
.ruler { background: var(--ink); z-index: 4; }
.now-tag, .ruler-tag {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  min-width: calc(30 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(6 * var(--u)); border-radius: calc(4 * var(--u));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(13 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums;
  pointer-events: auto; cursor: ew-resize; touch-action: none;
}
.now-tag { background: var(--red); color: #FFFFFF; }
.ruler-tag { background: var(--ink); color: var(--bg); }
/* First-time hints beside the boxes: on the red box until the first ruler is made, on the ruler's box
   until Shift is first used (only with a mouse or trackpad, where there's a Shift key) */
.now-hint, .ruler-hint {
  position: absolute; top: 0; height: calc(22 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(4 * var(--u));
  display: flex; align-items: center; font-size: calc(13 * var(--u)); font-weight: 600;
  white-space: nowrap; pointer-events: none; animation: hint-in .4s ease-out .6s both;
}
.now-hint { left: calc(24 * var(--u)); background: var(--red); color: #FFFFFF; }
.ruler-hint { left: calc(40 * var(--u)); background: var(--ink); color: var(--bg); }
@media (hover: none) { .ruler-hint { display: none; } }
@keyframes hint-in { from { opacity: 0; translate: -6px 0; } }
/* Each line can be grabbed anywhere along its length, through a 16-unit-wide invisible strip */
.nowline::before, .ruler::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(-7 * var(--u)); width: calc(16 * var(--u));
  pointer-events: auto; cursor: ew-resize; touch-action: none;
}
.hours.measuring, .hours.measuring * { cursor: ew-resize; }
/* Each row at the ruler: date and time on the left of the line, the city on the right.
   With no room on one side, all of it goes on the other. */
.ruler-row { position: absolute; left: 0; width: calc(2 * var(--u)); }
.ruler-label, .ruler-city {
  position: absolute; top: 0; line-height: calc(12 * var(--u)); color: var(--ink);
  font-size: calc(12 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ruler-label { right: calc(8 * var(--u)); }
.ruler-city { left: calc(8 * var(--u)); }
.ruler.right .ruler-label { right: auto; left: calc(8 * var(--u)); }
.ruler.right .ruler-label::after { content: "  " attr(data-city); white-space: pre; }
.ruler.left .ruler-label::before { content: attr(data-city) "  "; white-space: pre; }
.ruler.right .ruler-city, .ruler.left .ruler-city { display: none; }
/* The city beside each pinned date shows on phones only (see the 720px block) */
.tag-city { display: none; }

/* Precision (Shift while dragging the ruler): the hour the ruler is in opens up in place, later hours
   slide right, and minute ticks fill the gap in each row (longer at :15, :30 and :45). */
.zoom-ticks {
  --m: calc(16 * var(--u)); /* keep clear of the two hour numbers at the ends */
  position: absolute; height: calc(12 * var(--u)); margin-top: calc(-6 * var(--u)); pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent var(--m), #000 var(--m), #000 calc(100% - var(--m)), transparent calc(100% - var(--m)));
          mask-image: linear-gradient(to right, transparent var(--m), #000 var(--m), #000 calc(100% - var(--m)), transparent calc(100% - var(--m)));
  background:
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 25%) left center / calc(100% + 1px) calc(12 * var(--u)) no-repeat,
    repeating-linear-gradient(to right, var(--dim) 0 1px, transparent 1px calc(100% / 60)) left center / calc(100% + 1px) calc(6 * var(--u)) no-repeat;
}

/* <<< / >>> boxes in a top corner when a line is out of view; click to bring it back */
.now-jump {
  position: absolute; top: calc(10 * var(--u)); z-index: 6; height: calc(22 * var(--u)); padding: 0 calc(8 * var(--u));
  border: 0; border-radius: calc(4 * var(--u)); display: flex; align-items: center; justify-content: center;
  background: var(--red); color: #FFFFFF; font-size: calc(13 * var(--u)); font-weight: 700; letter-spacing: calc(-1 * var(--u)); cursor: pointer;
}
/* --edge keeps them inside the page margin where the strip runs to the screen edge (phones) */
.now-jump.before { left: var(--edge, 0px); }
.now-jump.after { right: var(--edge, 0px); }
/* Hover label opens below the box, lined up with its corner, so it never lands under the other box */
.now-jump::after {
  content: attr(data-label); position: absolute; top: calc(100% + 6 * var(--u)); display: none;
  padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--red); color: #FFFFFF;
  font-size: calc(12 * var(--u)); font-weight: 500; letter-spacing: 0; white-space: nowrap; pointer-events: none;
}
.now-jump.before::after { left: 0; }
.now-jump.after::after { right: 0; }
@media (hover: hover) {
  .now-jump:hover { z-index: 7; }
  .now-jump:hover::after { display: block; }
}
/* The same box for the ruler, in the ruler's colors */
.ruler-jump, .ruler-jump::after { background: var(--ink); color: var(--bg); }

/* Hover label over an hour, e.g. "Seoul, Tomorrow" */
.tip {
  position: fixed; z-index: 20; pointer-events: none; transform: translate(-50%, -100%);
  padding: 3px 8px; border-radius: 4px; background: var(--ink); color: var(--bg);
  font-size: 12px; font-weight: 500; white-space: nowrap;
}

/* ---------- Settings: replaces the hour view; cities | options | about ---------- */
.settings { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.set-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding-right: 24px; }
.set-main, .set-about { border-left: 2px solid var(--ink); padding-inline: 32px; min-width: 0; }
.set-about { padding-right: 0; }

/* Cities */
.set-list { display: flex; flex-direction: column; gap: 2px; touch-action: none; }
.set-list .lab { flex-direction: row; align-items: center; gap: 4px; min-height: 56px; padding: 8px 0 8px 10px; border-radius: 8px; }
.set-list .lab.dragging { background: var(--fill); }
.set-list.reordering, .set-list.reordering * { cursor: grabbing; }
.lab-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.remove {
  height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent;
  color: var(--red); font-size: 14px; cursor: pointer;
}
.remove:hover { text-decoration: underline; text-underline-offset: 3px; }
.grip { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 18px; cursor: grab; }
.empty { color: var(--muted); margin: 0; padding: 0 10px; }
/* Rename: the name is a button; clicking it swaps in a text box */
.name-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rename { border: 0; background: transparent; padding: 0; cursor: text; text-align: left; color: var(--ink); min-width: 0; }
.rename:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.rename-input {
  width: 100%; min-width: 0; height: 30px; padding: 0 8px; border: 0; border-radius: 6px;
  background: var(--fill); color: var(--ink); font: inherit; font-size: 18px; font-weight: 600;
}
.orig { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Share link */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-left: 10px; }
.share .status.selectable { user-select: all; -webkit-user-select: all; word-break: break-all; color: var(--ink); font-size: 13px; }

/* Add city, at the top of the cities column; suggestions open below it */
.add { position: relative; display: flex; gap: 10px; align-items: center; margin-top: 24px; }
.add + .status:empty { display: none; }
.add input {
  flex: 1; min-width: 0; height: 42px; border: 0; background: var(--fill); color: var(--ink);
  border-radius: 8px; padding: 0 14px; font: inherit; font-size: 16px;
}
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10;
  max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 10px;
  background: var(--fill); box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.sug {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.sug.active { background: var(--fill-hover); }
.sug-city { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-region { color: var(--muted); font-size: 14px; white-space: nowrap; }
.sug-none { padding: 8px 10px; color: var(--muted); }

/* Options */
.opts { display: flex; flex-direction: column; padding-top: 24px; }
.opt-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 60px; }
.opt-name { font-size: 17px; font-weight: 600; }
.seg { display: flex; padding: 3px; gap: 2px; border-radius: 8px; background: var(--fill); }
.seg button {
  height: 34px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent;
  cursor: pointer; font-size: 15px; font-variant-numeric: tabular-nums;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.select {
  height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--fill); color: var(--ink);
  font: inherit; font-size: 15px; cursor: pointer;
}
.switch { position: relative; flex: none; width: 46px; height: 28px; }
.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--muted); pointer-events: none; transition: background .15s; }
.switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--bg); transition: transform .15s;
}
.switch input:checked + span { background: var(--ink); }
.switch input:checked + span::after { transform: translateX(18px); }

/* About */
.about { display: flex; flex-direction: column; gap: 20px; padding-top: 32px; max-width: 60ch; }
.about h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.about p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.about code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; color: var(--ink); word-break: break-all; }
.about .red { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .day-tag, .switch span, .switch span::after { transition: none; }
  .now-hint, .ruler-hint { animation: none; }
}

/* ---------- Phones: smaller sizes; settings columns stack ---------- */
@media (max-width: 720px) {
  body { padding-block: 16px 24px; }
  .wrap { --pad-y: 40px; }
  h1, .link { font-size: 20px; }
  h1 .link { font-size: inherit; }
  /* Title and Settings on one line, the date under the title */
  .top { grid-template-columns: 1fr auto; grid-template-areas: "title settings" "date date"; row-gap: 2px; }
  .top h1 { grid-area: title; }
  .top > .link { grid-area: settings; align-self: center; display: flex; }
  .today { grid-area: date; font-size: 20px; }
  .today.off { display: none; }
  /* Settings as an icon: sliders, or a check while open; the word stays for screen readers */
  .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #settings-btn[aria-pressed="false"] .icon-settings, #settings-btn[aria-pressed="true"] .icon-done { display: block; }
  /* No city column: the hours run edge to edge across the screen, past the page margins, with a slight fade */
  .board { --row: calc(52 * var(--u)); --cell: calc(36 * var(--u)); grid-template-columns: minmax(0, 1fr); }
  .board:not(.no-dates) { --row: calc(70 * var(--u)); }
  :root[data-cell="s"] .board { --cell: calc(30 * var(--u)); }
  :root[data-cell="l"] .board { --cell: calc(44 * var(--u)); }
  .board:not(.is-empty) .labels { display: none; } /* still shows "No cities yet" */
  /* Instead, the pinned dates name the city. Rows always have room for them (app.js never sets .no-dates
     here); with the dates option off they show just the city (.city-only). With a ruler out they fade
     away, like a date leaving the edge, leaving only the ruler's labels. */
  .tag-city { display: inline; margin-left: calc(8 * var(--u)); font-weight: 600; }
  .board.city-only .tag-date { display: none; }
  .board.city-only .tag-city { margin-left: 0; }
  .board.has-ruler .day-tag { opacity: 0; }
  .timeline {
    --fade: 24px; --edge: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  }
  .cell { font-size: calc(15 * var(--u)); }
  .settings { grid-template-columns: minmax(0, 1fr); }
  .wide-only { display: none; } /* options for the city column, which phones don't have */
  .set-side { padding-right: 0; }
  .set-main, .set-about { border-left: 0; border-top: 2px solid var(--ink); padding-inline: 0; margin-top: 24px; }
  .opts, .about { padding-top: 12px; }
}