@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("fonts/readex-pro-arabic-wght-normal.woff2") format("woff2"); font-weight: 160 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("fonts/noto-naskh-arabic-arabic-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --sand: #f1e9da;
  --ink: #2b2118;
  --muted: #7a6a58;
  --line: #d9ccb4;
  --night: #2c3654;
  --awake: #e2cfa9;
  --work: #f5b83d;
  --pick: #c8472b;
  --on-night: #c9cfe0;
  --on-day: #5b4a37;
  --display: "Fraunces", "Noto Naskh Arabic", Georgia, serif;
  --ui: "Manrope", "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --label: 210px;
  --x: 30px;
  --gap: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sand: #1b1712;
    --ink: #f1e9da;
    --muted: #a8977f;
    --line: #3a3127;
    --night: #2a3150;
    --awake: #5b4c37;
    --work: #f5b83d;
    --pick: #ff7a55;
    --on-night: #aab3cc;
    --on-day: #f1e9da;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --sand: #1b1712;
    --ink: #f1e9da;
    --muted: #a8977f;
    --line: #3a3127;
    --night: #2a3150;
    --awake: #5b4c37;
    --work: #f5b83d;
    --pick: #ff7a55;
    --on-night: #aab3cc;
    --on-day: #f1e9da;
    color-scheme: dark;
  }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body { margin: 0; background: var(--sand); color: var(--ink); font: 500 14.5px/1.5 var(--ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--pick); outline-offset: 3px; border-radius: 999px; }

.bar { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; padding: 16px 32px 0; }
.brand { margin: 0; font: 600 24px/1 var(--display); letter-spacing: -0.01em; }
.brand i { font-style: normal; color: var(--pick); }
.bar-meta { color: var(--muted); font-size: 12.5px; }
.purpose { flex: 1; margin: 0; font-size: 15px; font-weight: 600; }

.stack { display: grid; gap: 18px; padding: 8px 32px 20px; min-height: 0; align-content: start; }

/* The answer, in a serif at poster size */
.answer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 20px; }
.sentence { margin: 0; font: 400 clamp(30px, min(5vw, 8vh), 68px)/1.05 var(--display); letter-spacing: -0.02em; font-variation-settings: "opsz" 144; }
.sentence em { font-style: normal; font-weight: 700; }
.sub { margin: 0; color: var(--muted); font-size: 14px; }


/* Controls: all fully round */
.controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
.day, .hours { display: inline-flex; align-items: center; gap: 6px; }
.round { width: 32px; height: 32px; border: 1.5px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; font-size: 17px; line-height: 1; }
.round:hover { border-color: var(--ink); }
.cal-wrap { position: relative; }
.day-label { min-width: 11ch; padding: 6px 12px; border: 0; border-radius: 999px; background: none; text-align: center; font: 600 15px var(--display); cursor: pointer; text-decoration: underline dotted var(--muted); text-underline-offset: 5px; }
.day-label:hover, .day-label[aria-expanded="true"] { background: var(--line); text-decoration: none; }
.cal { position: absolute; z-index: 20; top: calc(100% + 8px); inset-inline-start: 0; width: min(288px, calc(100vw - 32px)); padding: 14px; border-radius: 26px; background: var(--sand); box-shadow: 0 0 0 1.5px var(--ink), 0 18px 40px rgb(43 33 24 / 0.18); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head b { font: 600 16px var(--display); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid .wd { padding-bottom: 4px; text-align: center; color: var(--muted); font-size: 11px; font-weight: 700; }
.cal-grid button { aspect-ratio: 1; border: 0; border-radius: 50%; background: none; font: 600 13px var(--ui); font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-grid button:hover { background: var(--line); }
.cal-grid button:disabled { opacity: 0.3; cursor: default; background: none; }
.cal-grid button.today { box-shadow: inset 0 0 0 1.5px var(--pick); }
.cal-grid button[aria-pressed="true"] { background: var(--ink); color: var(--sand); }
.text-btn { border: 0; background: none; padding: 4px 6px; color: var(--pick); font-weight: 700; font-size: 13px; cursor: pointer; }
.hours-label { color: var(--muted); font-size: 13px; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; }
.stepper button { width: 26px; height: 30px; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 15px; }
.stepper button:hover { color: var(--ink); }
.stepper button:disabled { opacity: 0.3; cursor: default; }
.stepper output { min-width: 5ch; text-align: center; font: 600 13.5px var(--ui); font-variant-numeric: tabular-nums; }
.pill-btn { padding: 8px 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; font-weight: 700; font-size: 13px; cursor: pointer; }
.pill-btn:hover { background: var(--ink); color: var(--sand); }
.pill-btn:disabled { opacity: 0.35; cursor: default; background: transparent; color: var(--ink); }
.pill-btn.solid { margin-inline-start: auto; background: var(--ink); color: var(--sand); }
.pill-btn.solid:hover { opacity: 0.85; }

.add { position: relative; }
.pop { position: absolute; z-index: 20; top: calc(100% + 8px); inset-inline-start: 0; width: min(330px, 88vw); overflow: hidden; border-radius: 22px; background: var(--sand); box-shadow: 0 0 0 1.5px var(--ink), 0 18px 40px rgb(43 33 24 / 0.18); }
.pop input { width: 100%; padding: 14px 18px; border: 0; border-bottom: 1.5px solid var(--line); background: transparent; color: var(--ink); font: 600 14px var(--ui); }
.pop input:focus-visible { outline: none; border-bottom-color: var(--pick); }
.zone-list { list-style: none; margin: 0; padding: 6px; max-height: 270px; overflow: auto; }
.zone-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.zone-list li.active { background: var(--ink); color: var(--sand); }
.zone-list li.active .o-region, .zone-list li.active .o-off { color: inherit; opacity: 0.7; }
.zone-list li[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.o-city { font-weight: 700; font-size: 13.5px; }
.o-region { color: var(--muted); font-size: 12px; }
.o-off { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.zone-note { padding: 10px 12px; color: var(--muted); font-size: 12.5px; cursor: default; }

/* Board: one pill per city, a shared line across them */
.board { position: relative; display: grid; gap: 10px; padding-top: 22px; min-height: 0; align-content: start; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-auto-rows: 52px; }
.row { display: grid; grid-template-columns: var(--label) minmax(0, 1fr) var(--x); gap: var(--gap); align-items: center; }
.who { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 10px; min-width: 0; }
.who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 17px/1.2 var(--display); }
.who time { font: 600 22px/1 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.who small { color: var(--muted); font-size: 12px; }
.who small:last-child { text-align: right; }
.who .shift { color: var(--pick); font-weight: 700; }
.who .weekend { font: inherit; font-weight: 700; color: var(--pick); }
.who .weekend.narrow { display: none; }
.track { position: relative; height: 100%; border-radius: 999px; overflow: hidden; background: var(--night); }
.band { position: absolute; top: 0; bottom: 0; }
.band.night { background: var(--night); }
.band.awake { background: var(--awake); }
.band.work { background: var(--work); }
.tick { position: absolute; top: 50%; transform: translate(-50%, -50%); font: 700 11px var(--ui); font-variant-numeric: tabular-nums; color: var(--on-day); pointer-events: none; }
.tick.on-night { color: var(--on-night); }
.remove { width: var(--x); height: var(--x); border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; font-size: 18px; }
.remove:hover { background: var(--line); color: var(--ink); }
.remove:disabled { visibility: hidden; }

.lanes { position: relative; }
.overlay { position: absolute; top: -8px; bottom: -8px; left: calc(var(--label) + var(--gap)); right: calc(var(--x) + var(--gap)); }
.wins { position: absolute; inset: 0; pointer-events: none; }
.past { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 18px 0 0 18px; background: repeating-linear-gradient(-45deg, rgb(241 233 218 / 0.78) 0 6px, rgb(241 233 218 / 0.55) 6px 12px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .past { background: repeating-linear-gradient(-45deg, rgb(27 23 18 / 0.8) 0 6px, rgb(27 23 18 / 0.6) 6px 12px); } }
:root[data-theme="dark"] .past { background: repeating-linear-gradient(-45deg, rgb(27 23 18 / 0.8) 0 6px, rgb(27 23 18 / 0.6) 6px 12px); }
.round:disabled { opacity: 0.3; cursor: default; border-color: var(--line); }
.win { position: absolute; top: 0; bottom: 0; border: 2px dashed var(--ink); border-radius: 18px; opacity: 0.55; }
.pick { position: absolute; top: -6px; bottom: 0; width: 0; border-left: 2.5px solid var(--pick); transform: translateX(-1.25px); pointer-events: none; }
.pick span { position: absolute; bottom: 100%; left: 0; transform: translate(-50%, -2px); padding: 3px 9px; border-radius: 999px; background: var(--pick); color: #fff; font: 700 12px var(--ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scrub { position: absolute; inset: 0; cursor: ew-resize; touch-action: none; border-radius: 18px; }
.scrub:focus-visible { outline-offset: 2px; border-radius: 18px; }

.axis { position: relative; height: 16px; margin: 0 calc(var(--x) + var(--gap)) 0 calc(var(--label) + var(--gap)); }
.axis span { position: absolute; transform: translateX(-50%); color: var(--muted); font: 600 11px var(--ui); font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 0 calc(var(--label) + var(--gap)); padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.legend li { white-space: nowrap; }
.legend i { display: inline-block; width: 22px; height: 10px; margin-right: 7px; border-radius: 999px; vertical-align: -1px; }
.legend .night { background: var(--night); }
.legend .awake { background: var(--awake); }
.legend .work { background: var(--work); }

.toast { position: fixed; left: 50%; bottom: 24px; margin: 0; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--sand); font: 700 13px var(--ui); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: no-preference) {
  .band { transition: left 0.25s ease, width 0.25s ease; }
}
@media (min-width: 900px) and (min-height: 640px) {
  .app { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .stack { grid-template-rows: auto auto minmax(0, 1fr); }
  .rows { grid-auto-rows: clamp(40px, calc((100dvh - 300px) / var(--n, 3) - 10px), 112px); }
  .who b { font-size: clamp(17px, 2.4vh, 22px); }
  .who time { font-size: clamp(22px, 3.6vh, 34px); }
}
@media (max-width: 760px) {
  .purpose { flex-basis: 100%; order: 3; }
  :root { --label: 92px; --x: 24px; --gap: 8px; }
  .bar, .stack { padding-inline: 16px; }
  .who { grid-template-columns: 1fr; }
  .who b { font-size: 14px; }
  .who time { font-size: 17px; text-align: left; }
  .who small:last-child { display: none; }
  .who .weekend.narrow { display: inline; }
  .who .has-off .utc { display: none; }
  .tick { font-size: 9.5px; }
  .tick.minor { display: none; }
  .pill-btn.solid { margin-inline-start: 0; }
}

/* Questions under the tool: for people who scroll, and for search engines */
.faq { max-width: 920px; margin: 0 auto; padding: 56px 20px 64px; }
.faq h2 { margin: 0 0 20px; font: 700 22px/1.2 var(--display); letter-spacing: -0.02em; }
.faq-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px 32px; }
.faq h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.faq p { margin: 0; color: var(--muted); line-height: 1.6; }

/* Arabic page. The timeline keeps time running left to right in both languages: bands, the line and
   dragging are all measured from the left. Steppers keep earlier on the left too. */
.board, .stepper { direction: ltr; }
.sentence em { unicode-bidi: isolate; }
:lang(ar) :is(.sentence, .faq h2) { letter-spacing: 0; }
:lang(ar) .sentence { line-height: 1.3; }
.lang { margin-inline-start: 10px; font-weight: 600; color: var(--ink); unicode-bidi: isolate; }

/* Light/dark button (theme.js): follows the device until the visitor picks */
.theme { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-inline-start: 8px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; vertical-align: middle; }
.theme:hover { background: var(--line); }
.theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme .sun, .theme[data-dark="true"] .moon { display: none; }
.theme[data-dark="true"] .sun { display: block; }