/* Morning Screen, the strip bay (picked 2026-10-19): an air-traffic controller's strip board,
 * in daylight (a tower's light grey board, picked the same day: easier on the eyes when the page
 * stays open all day). Racks on a light steel bay; dated things are white strips whose holder
 * edge says what kind of thing it is (task, event, fact, Arsenal). The one next thing is the
 * strip in hand: pulled out, bigger, green edge. Green only marks what needs Paul (Start with,
 * Your turn, Prepare, a letter that needs him). Barlow for words and labels (plain case, no tracking), Barlow Condensed for figures;
 * the PC view is the one that matters. Phone one column, tablet two, PC three with the week
 * under Desk and Read for you. Time words (Tonight, Now, in 12 min) are ink or amber, never green. */

:root,
:root[data-theme] {
  --ground: #CBD1D8;   /* the bay */
  --card: #E7EAEE;     /* a rack */
  --inner: #DADFE5;    /* a recess in the rack (week days, Your turn) */
  --ink: #15181C;
  --muted: #545E6B;    /* 5.5:1 on a rack */
  --rule: #CCD2D9;
  --rack-hi: #F6F7F9;
  --rack-lo: #B3BCC6;
  /* the strips */
  --paper: #FFFFFF;
  --paper-done: #EEF0F2;
  --paper-ink: #16181B;
  --paper-2: #5E5A50;  /* 5.7:1 on paper */
  --paper-rule: #CFC8B5;
  --paper-green: #217A4B;
  --paper-amber: #9A5B00;
  --h-task: #CFC7B3;
  --h-event: #7FA6CF;
  --h-fact: #E2A93B;
  --h-ars: #D2363C;
  --h-blank: #BDB6A4;
  --accent: #2E9A63;
  --accent-text: #217A4B;
  --accent-fill: #247F51; /* behind white text: 5:1 */
  --accent-fill-press: #1C6A42;
  --on-accent: #FFFFFF;
  --arsenal: #F2878A;
  --sun: #D8AE5E;
  --start-press: #25814F;
  --amber-bg: #F6E7C8;
  --amber-ink: #8A5300;
  --red-bg: #F7DADB;
  --red-ink: #9E2A2E;
  --red-row: #FAE9EA;
  --btn-rule: #B9C1CA;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
}

body {
  font-family: 'Barlow', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

::selection { background: color-mix(in srgb, var(--accent-text) 32%, transparent); color: var(--ink); }
input, textarea { caret-color: var(--accent-text); }

a { color: inherit; }
a:hover { opacity: .8; }

/* ---------- Without a code ---------- */
.nocode { max-width: 420px; margin: 0 auto; padding: 96px 24px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.nocode-title { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--ink); margin: 0 0 14px; }

/* ---------- Page (phone first) ---------- */
.page {
  max-width: 560px;
  min-height: 100vh;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 12px 10px 4px; isolation: isolate; }
.head-date { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.eyebrow { font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.date { position: relative; margin: 0; font-size: 48px; font-weight: 700; line-height: .9; letter-spacing: -.04em; white-space: nowrap; }
.clocks { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.clock { display: flex; flex-direction: row; gap: 5px; text-align: right; }
.clock-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.clock-time { font-size: 12px; font-weight: 500; color: var(--muted); }
.clock-home { order: -1; }
.clock-home .clock-label { display: none; }
.clock-here { margin-bottom: 5px; font-size: 28px; font-weight: 500; line-height: .9; letter-spacing: -.02em; }
/* Offline, or the copy is old: one amber line by the clock (the footer says the same, small). */
.stale { order: 3; margin-top: 6px; padding: 3px 9px; border-radius: 99px; background: var(--amber-bg); color: var(--amber-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* The day in one sentence */
.say { margin: 0; padding: 0 10px 6px; font-size: 17px; line-height: 1.35; text-wrap: pretty; }
.say:empty { display: none; }

.cols { display: flex; flex-direction: column; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Phone: one column in reading order; the columns only group the cards on wider screens. */
@media (max-width: 719.98px) {
  .col { display: contents; }
  #start { order: 1; } .card-today, #lift { order: 2; } #desk { order: 3; } #projects { order: 4; }
  #coming { order: 5; } #parked { order: 6; } #intake { order: 7; } #feed { order: 8; } #arsenal { order: 9; } #hiscores { order: 10; }
}

/* ---------- Cards ---------- */
.card { display: flex; flex-direction: column; padding: 20px 22px 8px; background: var(--card); border-radius: 20px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.num { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; }
.head-ico { width: 16px; height: 16px; margin-right: 8px; border-radius: 4px; object-fit: cover; vertical-align: -3px; }
.card-link { font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 8px 0; margin: -8px 0; }
.card-note { font-size: 12px; color: var(--muted); }
.card-note:empty { display: none; }
.card-foot { padding: 4px 0 12px; }

.card-start { gap: 10px; padding: 22px; background: var(--card); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .24s cubic-bezier(.2, .7, .2, 1), background-color .24s ease; }
a.card-start:hover { opacity: 1; background: var(--inner); }
a.card-start:active { transform: scale(.985); background: var(--inner); transition-duration: .09s; }
a.card-start:focus-visible, .card-link:focus-visible, .more-link:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.card-start .num { display: flex; justify-content: space-between; color: var(--accent-text); padding: 0; }
.start-go { font-weight: 500; letter-spacing: .04em; }
.start-text { display: block; margin: 0; font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }

.card-row { padding: 18px 22px; }

/* Rows inside a card: a hairline between each, none above the first */
.rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.rows > * + * { border-top: 1px solid var(--rule); }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; font-size: 15px; line-height: 1.35; }
.row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.row .side { color: var(--muted); text-align: right; max-width: 62%; }
.row.empty { color: var(--muted); }
.row.task { justify-content: flex-start; gap: 10px; }
.row-due { margin-left: 4px; font-size: 13px; color: var(--muted); white-space: nowrap; }
/* Today's progress: the number left, big, and a thin bar of what is done. */
.tprog { padding: 14px 0 2px; }
.tprog-top { display: flex; align-items: baseline; gap: 8px; }
.tprog-big { font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tprog-label { font-size: 14px; color: var(--muted); }
.tprog-done { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink); }
.tprog-bar { height: 6px; margin-top: 10px; border-radius: 99px; background: var(--inner); overflow: hidden; }
.tprog-bar i { display: block; height: 100%; min-width: 6px; border-radius: 99px; background: var(--ink); }
.row.task { align-items: center; }
.task-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tmeta { flex: none; padding: 3px 8px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--inner); border-radius: 99px; white-space: nowrap; }
.tmeta-near { color: var(--amber-ink); background: var(--amber-bg); }
.tmeta-letter { font-weight: 500; }
.rows-done { margin-top: -2px; border-top: 1px solid var(--rule); }
/* "+5 more": the rest of today's list lives in the to-do app. */
.more-link { display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--rule); font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.more-link:hover { color: var(--ink); opacity: 1; }
/* No hub yet and no copy on this device: say so where the card would be, with a way to try again. */
.retry { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0 14px; font-size: 15px; color: var(--muted); }
.retry .pbtn { flex: none; }
.task-done { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.tick { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: var(--muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
/* Read for you: one line per letter. */
.read-rows { padding: 4px 0 10px; }
.read-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; font-size: 14px; }
.read-kind { flex: none; width: 58px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.read-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.read-when { flex: none; font-size: 13px; color: var(--muted); }
.read-needs { margin: 2px 0; border-radius: 12px; background: var(--inner); }
.rows > .read-needs, .rows > .read-needs + * { border-top: 0; }
.read-needs .read-kind { color: var(--accent-text); }
.read-needs .read-text { font-weight: 600; }
.read-needs .read-when { font-weight: 600; color: var(--accent-text); }
.circle { width: 14px; height: 14px; border: 1.5px solid var(--muted); border-radius: 50%; flex-shrink: 0; transform: translateY(2px); }
.accent-text { font-weight: 600; color: var(--accent-text); }
.soon-text { font-weight: 600; color: var(--ink); }
.near-text { font-weight: 600; color: var(--amber-ink); }

.tag { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }

/* Folded rows: yesterday's wins, parked */
details.fold > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; font-size: 15px; cursor: pointer; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .tag::after { content: ' \203A'; }
details.fold[open] > summary .tag::after { content: ''; }
.fold-list { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.fold-list li { display: flex; flex-direction: column; gap: 1px; overflow-wrap: anywhere; }
.fold-from { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fold-muted { color: var(--muted); }

/* ---------- Overview parts: fact tiles, group headings, chips ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: 6px 0 4px; }
.tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; background: var(--inner); border-radius: 12px; }
.tile-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tile-value { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 15px; font-weight: 600; line-height: 1.3; }
.tile-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; line-height: 1.3; color: var(--muted); }
.tile[title] { cursor: default; }

.sub-head { display: flex; align-items: baseline; gap: 8px; padding: 16px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sub-count { font-weight: 500; color: var(--ink); opacity: .55; }

/* Live projects: an even grid, every tile the same width with the icon in the same slot. */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 8px 0 6px; }
/* Not links, so not tiles: an icon and a name on the card, nothing that looks pressable. */
.chip { display: flex; align-items: center; gap: 9px; min-width: 0; height: 30px; font-size: 13px; font-weight: 500; color: var(--muted); cursor: default; }
.chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.chip-ico { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; flex: none; }
.chip-ico-none { display: grid; place-items: center; box-shadow: none; }
.app-ico { width: 20px; height: 20px; margin-right: 8px; border-radius: 5px; object-fit: cover; vertical-align: -4px; }

/* ---------- Apps: a row of one-tap links under the day's sentence ---------- */
/* The apps row: the same even tiles as Projects' Live grid. */
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 2px 10px 12px; }
.app-link { display: flex; align-items: center; gap: 9px; min-width: 0; height: 40px; padding: 0 10px; font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; background: var(--card); border-radius: 10px; -webkit-tap-highlight-color: transparent; transition: background-color .18s ease, transform .18s ease; }
.app-link:hover { background: var(--inner); }
.app-link:active { transform: scale(.97); }
.app-link:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (max-width: 719.98px) { .app-link { height: 44px; } }

/* ---------- Parked: its own card under Projects, louder with age (calm, amber from 7 days, red from 14) ---------- */
.park-oldest { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.park-oldest.lv-amber { color: var(--amber-ink); }
.park-oldest.lv-red { color: var(--red-ink); }
.parks { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 14px; }
.park { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "from age" "what what" "btns btns"; column-gap: 10px; row-gap: 3px; padding: 12px 0; border-top: 1px solid var(--rule); }
.park:first-child { border-top: 0; }
.park-from { grid-area: from; align-self: center; display: inline-flex; align-items: center; gap: 7px; }
.park-ico { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; flex: none; }
.park-age { grid-area: age; justify-self: end; align-self: center; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 99px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.park-what { grid-area: what; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.park-btns { grid-area: btns; display: flex; gap: 6px; margin-top: 10px; }
.lv-calm .park-age { padding-right: 0; }
.lv-amber .park-age { background: var(--amber-bg); color: var(--amber-ink); }
.lv-red .park-age { background: var(--red-bg); color: var(--red-ink); }
.park.lv-red { padding: 14px; border-top: 0; border-radius: 12px; background: var(--red-row); }
.park.lv-red + .park { border-top: 0; }
.park.lv-red .park-what { font-weight: 600; }
.pbtn { min-height: 44px; padding: 0 16px; border-radius: 99px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, background-color .2s ease; }
.pbtn:active { transform: scale(.97); }
.pbtn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.pbtn-today { border: 0; background: var(--accent-fill); color: var(--on-accent); }
.pbtn-today:hover { background: var(--accent-fill-press); }
.pbtn-done { border: 1px solid var(--btn-rule); background: transparent; color: var(--ink); }
.pbtn-drop { border: 0; background: transparent; color: var(--muted); }
.park-toast { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 14px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--inner); font-size: 14px; animation: fade .2s ease-out both; }
.park-toast[hidden] { display: none; }
.park-toast button { min-height: 36px; padding: 0 10px; border: 0; background: transparent; color: var(--accent-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.park-toast button[hidden] { display: none; }

/* ---------- Desk: one line in, prepared rows out (PC and tablet only) ---------- */
.card-desk { display: none; }
@media (min-width: 720px) { .card-desk { display: flex; } }
.desk-form { display: flex; gap: 8px; padding: 6px 0 10px; }
.desk-input { flex: 1; min-width: 0; min-height: 44px; padding: 0 16px; border: 1px solid var(--btn-rule); border-radius: 99px; background: var(--inner); color: var(--ink); font: inherit; font-size: 15px; }
.desk-input:focus { outline: 2px solid var(--accent-text); outline-offset: 1px; background: var(--card); }
.desk-input::placeholder { color: var(--muted); }
.desk-busy { margin: 0 0 10px; font-size: 13px; color: var(--muted); animation: fade .2s ease-out both; }
.desk-busy[hidden] { display: none; }
.desk-entry { padding: 10px 0 12px; border-top: 1px solid var(--rule); }
.desk-said { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.desk-answer { margin: 6px 0 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.desk-act { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "from" "what" "state" "btns"; row-gap: 3px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--inner); }
.desk-act .fold-from { grid-area: from; display: flex; gap: 6px; }
.desk-act .desk-what, .desk-act .desk-edit { grid-area: what; }
.desk-act .desk-state { grid-area: state; }
.desk-what { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.desk-edit { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--btn-rule); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.4; resize: vertical; }
.desk-act.is-done { background: transparent; padding: 6px 0 0; }
.desk-act.is-done .desk-what { color: var(--muted); }
.desk-state { font-size: 12px; font-weight: 600; color: var(--ink); }
.desk-act.is-skipped .desk-state { color: var(--muted); }
.desk-act .park-btns { flex-wrap: wrap; }

/* ---------- Projects ---------- */
.proj { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; }
.proj-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.proj-name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.proj-next { font-size: 13px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
/* The hub's one line about everything, above the feed. */
.repo-line { margin: 0; padding: 6px 0 14px; font-size: 13px; line-height: 1.5; color: var(--amber-ink); overflow-wrap: anywhere; }
.proj-read .proj-name, .proj-turn.proj-read .proj-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 1.4; }
/* Lately: one line per thing, the time on the right. */
.feed-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; }
.feed-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-when { flex-shrink: 0; font-size: 13px; color: var(--muted); }
.proj-live { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--muted); font-size: 15px; }
.proj-turn { gap: 4px; margin: 2px 0 6px; padding: 14px; background: var(--inner); border-radius: 12px; }
.rows > .proj-turn, .rows > .proj-turn + * { border-top: 0; }
.proj-turn .proj-name { font-size: 16px; }
.proj-turn .proj-next { font-size: 14px; }
.pill { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-accent); background: var(--accent-fill); padding: 4px 9px; border-radius: 99px; flex-shrink: 0; }

/* ---------- Week ---------- */
.ev { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 8px; padding: 12px 0; font-size: 15px; line-height: 1.35; }
.ev-day { font-weight: 600; }
.ev-title { overflow-wrap: anywhere; }
.ev-time { color: var(--muted); text-align: right; white-space: nowrap; }
.place { color: var(--muted); }
.rows > .ev.same { border-top: 0; padding-top: 0; }

/* ---------- Arsenal ---------- */
/* The crest is ESPN's, hotlinked (not kept in this public repo); it drops out if it can't load. */
.card-arsenal { flex-direction: row; align-items: center; gap: 14px; }
.fx-crest { flex: none; width: 40px; height: 40px; object-fit: contain; }
.card-arsenal .fx { flex: 1; min-width: 0; }
.fx { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fx-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-next { font-size: 15px; font-weight: 600; }
.fx-sub { font-size: 13px; color: var(--muted); }
.fx-when { font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.fx-when.live { color: var(--arsenal); font-weight: 600; }
.fx-error { font-size: 15px; color: var(--muted); }

/* ---------- Today's events (in 02 Today) ---------- */
.row.evt { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; }
.evt-main { min-width: 0; overflow-wrap: anywhere; }
.evt-time { font-weight: 600; margin-right: 4px; }
.row.evt .side { white-space: nowrap; }
.dotc { width: 14px; height: 14px; display: grid; place-items: center; transform: translateY(2px); }
.nd { position: relative; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); }
.nd.next, .nd.on { background: var(--ink); border-color: var(--ink); }

/* Yesterday's wins: filled circles, the same shape as today's open ones */
.wins { display: inline-flex; align-items: center; gap: 4px; padding-top: 3px; }
.wins i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.wins b { margin-left: 3px; font-size: 12px; font-weight: 500; color: var(--muted); }

/* ---------- Since you last looked: a green tick in the card's left margin ---------- */
.proj, .proj-turn { position: relative; }
.is-new::before {
  content: ''; position: absolute; left: -13px; top: 50%;
  width: 3px; height: 16px; margin-top: -8px; border-radius: 2px;
  background: var(--accent-text);
  animation: tick-in .42s cubic-bezier(.2, .7, .2, 1) both;
}
.chip.is-new::before { content: none; }
.chip.is-new { color: var(--ink); }
.pill.pop { animation: pop .5s cubic-bezier(.16, 1, .3, 1) both; }

/* ---------- The clock: only the changed digits roll ---------- */
.roll { display: inline-grid; }
.roll > span { grid-area: 1 / 1; }
.r-old { animation: roll-out .44s cubic-bezier(.3, .7, .2, 1) forwards; }
.r-new { animation: roll-in .44s cubic-bezier(.3, .7, .2, 1) both; }

/* ---------- The sun: the date's full stop ----------
   On the baseline while the sun is down; by day it lifts with the sun's height, up to
   .3em at solar noon (--sy, set by app.js on the stop and on the date). */
.sun-stop {
  position: relative; display: inline-block;
  width: .17em; height: .17em; margin: 0 .05em 0 .06em;
  border-radius: 50%; background: var(--sun); vertical-align: baseline;
  translate: 0 var(--sy, 0em);
  transition: translate 1.2s cubic-bezier(.3, .7, .2, 1), opacity .8s ease;
}
.sun-stop.twi { opacity: .8; }
.sun-stop.down { opacity: .55; }
.nt, .nt *, .nt::before, .nt::after, .nt *::before, .nt *::after { transition: none !important; }

/* ===== The Light motion (mv-light, picked 27 Sept 2026) =====
   The sun breathes in a phrase of three (full, shallow, middle), 5.3 s each, 15.9 s in all:
   a .9 s swell, a 2.7 s settle, a 1.7 s rest. Three layers swell together:
     pool    .date::before      warm light on the paper behind the date: it brightens, never tints
     warmth  .sun-stop::before  a gold film on the ink nearest the stop, only during a swell
     core    .sun-stop::after   a soft corona on the disc itself
   Twilight (sun 0 to -6 degrees, the page already dark): the pool becomes a still ember
   under the date. Below -6 degrees nothing glows. The next event today sends one thin ring
   off its dot every 8.1 s. Transform and opacity only; every gradient is painted once. */

/* The pool: 4.8em x 2.8em, centred on the stop's resting centre (--sx, --st from app.js). */
.date::before {
  content: '';
  position: absolute; z-index: -1; pointer-events: none;
  left: calc(var(--sx, 1.328em) - 2.4em); top: calc(var(--st, .71em) - 1.4em);
  width: 4.8em; height: 2.8em;
  background: radial-gradient(closest-side,
    rgba(255, 248, 232, 1) 0%,
    rgba(255, 248, 232, .95) 12%,
    rgba(255, 248, 232, .84) 25%,
    rgba(255, 248, 232, .67) 38%,
    rgba(255, 248, 232, .48) 50%,
    rgba(255, 248, 232, .3) 62%,
    rgba(255, 248, 232, .16) 73%,
    rgba(255, 248, 232, .07) 83%,
    rgba(255, 248, 232, .02) 92%,
    rgba(255, 248, 232, 0) 100%);
  opacity: 0;
  transform: scale(.86);
  translate: 0 var(--sy, 0em);
  transition: opacity 3s ease, translate 1.2s cubic-bezier(.3, .7, .2, 1);
}
/* Promoted only while the pool breathes: at night it is invisible and holds no layer. */
.date:has(.sun-stop.up)::before {
  opacity: .6;
  animation: mvl-pool 15.9s linear infinite;
  will-change: transform, opacity;
}
/* Twilight: the ember. Flat, just under the baseline, gold on the dark ground, still. */
.date:has(.sun-stop.twi)::before {
  opacity: 1;
  transform: none;
  translate: 0 0;
  background: radial-gradient(2.3em .5em at 50% 57%,
    rgba(216, 174, 94, .2) 0%,
    rgba(216, 174, 94, .14) 30%,
    rgba(216, 174, 94, .065) 62%,
    rgba(216, 174, 94, .02) 84%,
    rgba(216, 174, 94, 0) 100%);
}
/* With the sun up the pool is gold at low strength, never a white blob. */
:root .date:has(.sun-stop.up)::before {
  background: radial-gradient(closest-side,
    rgba(216, 174, 94, .2) 0%, rgba(216, 174, 94, .12) 40%,
    rgba(216, 174, 94, .04) 75%, rgba(216, 174, 94, 0) 100%);
}

/* Warmth on the ink: 1.3em across, centred on the stop, painted over the digits. */
.sun-stop::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 1.3em; height: 1.3em; margin: -.65em 0 0 -.65em;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(216, 174, 94, .3) 0%,
    rgba(216, 174, 94, .22) 34%,
    rgba(216, 174, 94, .09) 68%,
    rgba(216, 174, 94, 0) 100%);
  opacity: 0;
}
.sun-stop.up::before { animation: mvl-warm 15.9s linear infinite; will-change: opacity; }

/* The core: a soft corona that swells with the breath and settles back under the disc. */
.sun-stop::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(216, 174, 94, .9) 0%, rgba(216, 174, 94, .5) 50%, rgba(216, 174, 94, 0) 100%);
  opacity: 0;
}
.sun-stop.up::after { animation: mvl-core 15.9s linear infinite; }

/* The next event today: one thin ring leaves the dot every 8.1 s, then rests. Drawn at its
   widest (26 px) and scaled down, so the 1.5 px stroke never thickens. */
.nd.next::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--ink);
  opacity: 0;
  transform: scale(.35);
  animation: mvl-ping 8.1s linear 2.6s infinite;
}

@keyframes mvl-pool {
  0%      { opacity: .25; transform: scale(.86); animation-timing-function: cubic-bezier(.22, .65, .3, 1); }
  5.66%   { opacity: 1;   transform: scale(1);   animation-timing-function: cubic-bezier(.45, 0, .5, 1); }
  22.64%  { opacity: .25; transform: scale(.86); }
  33.333% { opacity: .25; transform: scale(.86); animation-timing-function: cubic-bezier(.22, .65, .3, 1); }
  38.99%  { opacity: .6;  transform: scale(.93); animation-timing-function: cubic-bezier(.45, 0, .5, 1); }
  55.97%  { opacity: .25; transform: scale(.86); }
  66.667% { opacity: .25; transform: scale(.86); animation-timing-function: cubic-bezier(.22, .65, .3, 1); }
  72.33%  { opacity: .82; transform: scale(.97); animation-timing-function: cubic-bezier(.45, 0, .5, 1); }
  89.31%  { opacity: .25; transform: scale(.86); }
  100%    { opacity: .25; transform: scale(.86); }
}
@keyframes mvl-warm {
  0%      { opacity: 0;   animation-timing-function: cubic-bezier(.22, .65, .3, 1); }
  5.66%   { opacity: 1;   animation-timing-function: cubic-bezier(.45, 0, .5, 1); }
  20.5%   { opacity: 0; }
  33.333% { opacity: 0;   animation-timing-function: cubic-bezier(.22, .65, .3, 1); }
  38.99%  { opacity: .45; animation-timing-function: cubic-bezier(.45, 0, .5, 1); }
  53.8%   { opacity: 0; }
  66.667% { opacity: 0;   animation-timing-function: cubic-bezier(.22, .65, .3, 1); }
  72.33%  { opacity: .75; animation-timing-function: cubic-bezier(.45, 0, .5, 1); }
  87.2%   { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes mvl-core {
  0%      { opacity: 0;   transform: scale(1);   animation-timing-function: cubic-bezier(.22, .65, .3, 1); }
  5.66%   { opacity: .55; transform: scale(2.4); animation-timing-function: cubic-bezier(.45, 0, .5, 1); }
  22.64%  { opacity: 0;   transform: scale(1.5); }
  22.65%  { opacity: 0;   transform: scale(1); }
  33.333% { opacity: 0;   transform: scale(1);   animation-timing-function: cubic-bezier(.22, .65, .3, 1); }
  38.99%  { opacity: .3;  transform: scale(2);   animation-timing-function: cubic-bezier(.45, 0, .5, 1); }
  55.97%  { opacity: 0;   transform: scale(1.4); }
  55.98%  { opacity: 0;   transform: scale(1); }
  66.667% { opacity: 0;   transform: scale(1);   animation-timing-function: cubic-bezier(.22, .65, .3, 1); }
  72.33%  { opacity: .45; transform: scale(2.2); animation-timing-function: cubic-bezier(.45, 0, .5, 1); }
  89.31%  { opacity: 0;   transform: scale(1.5); }
  89.32%, 100% { opacity: 0; transform: scale(1); }
}
/* 8.1 s: the ring leaves over 1.7 s, fading as it spreads, then 6.4 s of rest. */
@keyframes mvl-ping {
  0%    { transform: scale(.35); opacity: .85; animation-timing-function: cubic-bezier(.25, .7, .35, 1); }
  7.5%  { transform: scale(.76); opacity: .55; animation-timing-function: cubic-bezier(.3, .45, .45, 1); }
  21%   { transform: scale(1);   opacity: 0; }
  100%  { transform: scale(1);   opacity: 0; }
}

/* ---------- First light: the day's first open, once, then it holds ---------- */
.first .date { animation: settle .6s cubic-bezier(.2, .7, .2, 1) both; }
.first .eyebrow, .first .clocks { animation: fade .45s ease-out .1s both; }
.first .say { animation: fade .45s ease-out .38s both; }
.first .card, .first .foot { animation: fade .42s ease-out both; animation-delay: calc(.45s + var(--i, 5) * 60ms); }

@keyframes roll-out { to { transform: translateY(-.5em); opacity: 0; } }
@keyframes roll-in { from { transform: translateY(.5em); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes settle { from { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes tick-in { from { transform: scaleY(0); opacity: 0; } }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  /* Light without breath: while the sun is up the paper round the date holds a still warm
     light; no warmth on the ink, no corona, no ring, no rolls. The ember is still anyway. */
  .date::before, .sun-stop, .sun-stop::before, .sun-stop::after, .nd.next::after,
  .r-new, .is-new::before, .pill.pop, .card-start, .park-toast, .pbtn, .desk-busy { animation: none !important; transition: none !important; }
  .r-old { display: none; }
  .date:has(.sun-stop.up)::before { opacity: .6; transform: scale(.93); will-change: auto; }
  .sun-stop.up::before, .sun-stop.up::after, .nd.next::after { opacity: 0; }
}

/* ---------- Sundays: the Week view (Sunday reset) ----------
 * The switch sits under the sentence. The four cards are one column on a phone and two
 * newspaper columns from 720 px (01 and 02 left, 03 and 04 right), so nothing stretches. */
.view-switch { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 10px 2px; }
.wk-label { min-width: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.seg { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 3px; border-radius: 99px; background: var(--card); }
.seg button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, color .2s ease; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.seg button:focus-visible, .wk-more:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.week-view { display: flex; flex-direction: column; gap: 12px; }
.week-view .sub-head { padding-top: 10px; }
.week-view .sub-head:first-child { padding-top: 4px; }
.wk-list { display: flex; flex-direction: column; padding-bottom: 6px; }
.wk-list .row { padding: 9px 0; }
.wk-list .row + .row { border-top: 1px solid var(--rule); }
.done-row > :first-child::before { content: "\2713"; margin-right: 8px; font-weight: 700; color: var(--muted); }
.wk-more { align-self: flex-start; min-height: 40px; margin: -4px 0 8px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.week-view .park { grid-template-areas: "from age" "what what" "btns btns"; }
.week-view .park-btns { flex-wrap: wrap; margin-top: 10px; }
.card-para { padding-bottom: 20px; }
.card-para[hidden] { display: none; }
.wk-para { margin: 2px 0 0; font-size: 19px; line-height: 1.45; text-wrap: pretty; }
.mirror-nums { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.mirror-nums[hidden], .mirror-row[hidden] { display: none; }
.mirror-row { display: flex; gap: 12px; align-items: baseline; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--inner); font-size: 15px; line-height: 1.4; }
.mirror-row + .mirror-row { margin-top: 8px; }
.lesson-why { grid-area: why; font-size: 13px; line-height: 1.4; color: var(--muted); }
.week-view .card-lessons .park { grid-template-areas: "from age" "what what" "why why" "btns btns"; }
.card-lessons .parks { padding-bottom: 6px; }
.mirror-k { flex: 0 0 auto; min-width: 72px; font-size: 12px; font-weight: 600; color: var(--muted); }
.week-view .pbtn { padding: 0 13px; } /* three buttons on one line in a red row at 375 px */
.wk-ask { grid-area: btns; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--inner); font-size: 14px; }
.wk-ask > span { flex: 1 1 100%; }
.pbtn-red { border: 0; background: var(--red-ink); color: var(--card); }
.wk-vac a { text-decoration: underline; text-decoration-color: var(--btn-rule); text-underline-offset: 3px; }
.wk-state { flex-shrink: 0; padding: 2px 8px; border-radius: 99px; background: var(--inner); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.wk-state.done { color: var(--ink); }
#wkToast { margin-top: 2px; }

@media (min-width: 720px) {
  .view-switch { padding: 0 6px; }
  .wk-label { font-size: 16px; }
  .week-view { display: block; columns: 2; column-gap: 16px; }
  .week-view > .card { break-inside: avoid; margin-bottom: 16px; }
  .week-view > .card-para { column-span: all; }
  .week-view .park { grid-template-areas: "from age" "what what" "btns btns"; }
  .week-view .park-btns { margin-top: 10px; align-self: start; }
}
@media (min-width: 1100px) {
  .week-view { column-gap: 20px; }
  .week-view > .card { margin-bottom: 20px; }
}

/* ---------- Hiscores: a small OSRS skills tab (the full page is hiscores/) ---------- */
@font-face { font-family: "RS Small"; src: url("hiscores/assets/runescape-small.ttf") format("truetype"); font-display: swap; }
.card-lift { color: inherit; text-decoration: none; padding-bottom: 18px; }
.card-lift[hidden] { display: none; }
.card-lift:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.card-lift .fx-next { font-size: 17px; }
.lift-up { color: var(--ink); font-weight: 600; }
.card-hiscores { display: block; color: inherit; text-decoration: none; }
.card-hiscores[hidden] { display: none; }
.card-hiscores:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.hs-up { color: var(--ink); font-weight: 600; }
.hs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 8px; padding: 4px; border-radius: 6px; background: #3e3529; box-shadow: inset 1px 1px 0 #5d5242, inset -1px -1px 0 #221d16; }
.hs-slot { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 10px 0 8px; background: linear-gradient(180deg, #554a3b 0%, #4a4033 45%, #3a3128 100%); box-shadow: inset 1px 1px 0 #6b5f4c, inset -1px -1px 0 #29231a; }
.hs-slot img { image-rendering: pixelated; }
.hs-slot b, .hs-slot small { font-family: "RS Small", monospace; font-weight: normal; color: #ff0; text-shadow: 1px 1px 0 #000; -webkit-font-smoothing: none; }
.hs-slot b { font-size: 16px; }
.hs-slot small { font-size: 12px; }
/* A level up glows twice when it arrives, then holds a still yellow edge until hiscores/ is opened. */
.hs-slot.up { animation: hs-glow 1.6s steps(2) 2; outline: 1px solid rgba(255, 255, 0, .4); outline-offset: -1px; }
@keyframes hs-glow { 50% { filter: brightness(1.45); } }
.hs-total { justify-content: center; gap: 6px; }
.card-hiscores:hover .hs-grid { box-shadow: inset 1px 1px 0 #5d5242, inset -1px -1px 0 #221d16, 0 0 0 2px var(--muted); }
@media (prefers-reduced-motion: reduce) { .hs-slot.up { animation: none; } }

/* ---------- Footer ---------- */
.foot { display: flex; justify-content: flex-end; gap: 12px; padding: 8px 10px 0; font-size: 12px; color: var(--muted); }
.as-of { text-align: right; }

/* ---------- Tablet: two columns ---------- */
@media (min-width: 720px) {
  .page { max-width: none; padding: 40px 40px 32px; gap: 24px; }
  .head { padding: 0 6px; }
  .head-date { gap: 12px; }
  .eyebrow { font-size: 16px; }
  .date { font-size: 56px; line-height: .85; letter-spacing: -.045em; }
  .clocks { flex-direction: row; gap: 32px; }
  .clock { flex-direction: column; gap: 2px; }
  .clock-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  .clock-time { font-size: 20px; }
  .clock-home { order: 0; }
  .clock-home .clock-label { display: block; text-align: right; }
  .clock-here { margin: 0; font-size: 40px; letter-spacing: 0; }
  .clocks { flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; row-gap: 8px; }
  .stale { flex-basis: 100%; margin: 0; padding: 0; background: none; text-align: right; }
  .say { padding: 0 6px; font-size: 19px; }
  .apps { padding: 4px 6px 4px; }
  .foot { justify-content: flex-start; padding: 0 6px; }
  .as-of { text-align: left; }

  /* Tablet: the cards flow down two newspaper columns, in reading order. */
  .cols { display: block; columns: 2; column-gap: 16px; }
  .col { display: contents; }
  .cols > .col > .card, .cols > .card { break-inside: avoid; margin-bottom: 16px; }
  .card { padding: 22px 24px 8px; border-radius: 22px; }
  .card-start { padding: 26px; }
  .start-text { font-size: 36px; line-height: 1.05; letter-spacing: -.025em; }
  .card-row { padding: 20px 24px; }
  .proj-turn { padding: 16px; border-radius: 14px; }
  .proj-turn .proj-name { font-size: 17px; }
  /* Wide: the age sits over the buttons on the right, the words on the left. */
  .park { grid-template-areas: "from age" "what btns"; column-gap: 16px; }
  .park-btns { margin-top: 0; align-self: center; }
}
@media (min-width: 720px) and (pointer: fine) {
  .pbtn { min-height: 34px; padding: 0 12px; }
}

/* ---------- Laptop and PC: now, projects, and the week across the bottom ----------
 * Left is now (01 Start, 02 Today), right is Projects over Arsenal; both columns end on one
 * line. Under them the week band: seven day columns, today first. The Coming up card is the
 * narrow screens' version of the band, so it goes here. */
.week-band { display: none; }

@media (min-width: 1100px) {
  .page { max-width: 1320px; padding: 44px 48px 32px; gap: 28px; }
  .date { font-size: 60px; }
  .say { font-size: 20px; margin-top: -10px; }
  .clock-here { font-size: 58px; }
  /* Start with is the loudest thing on the page: the one next thing. */
  .card-start { padding: 28px 30px 30px; gap: 14px; }
  .start-text { font-size: 48px; line-height: 1; letter-spacing: 0; }
  /* Left: now (Start, Today, Gym, Parked), the full height. Right: Desk and Read for you, the
   * week under them, then Projects and Arsenal, Lately and Hiscores. The last row takes the
   * slack, so the week sits right under the top cards however long the left column runs. */
  .page { max-width: 1400px; }
  .cols { display: grid; columns: auto; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "a b c" "a w w" "a d e"; grid-template-rows: auto auto 1fr; gap: 20px; align-items: start; }
  .col { display: flex; gap: 20px; }
  .cols > .col > .card, .cols > .card { margin-bottom: 0; }
  .col-a { grid-area: a; }
  .col-b { grid-area: b; }
  .col-c { grid-area: c; }
  .col-d { grid-area: d; }
  .col-e { grid-area: e; }
  .week-band { grid-area: w; }
  /* Desk and Read for you end on one line, so the week starts level under both. */
  .col-b, .col-c { align-self: stretch; }
  .col-b > .card:last-child, .col-c > .card:last-of-type { flex: 1; }
  #coming { display: none; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .park { grid-template-areas: "from age" "what what" "btns btns"; }
  .park-btns { margin-top: 10px; align-self: start; }

  .week-band { display: flex; padding: 22px 24px 24px; }
  .band-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 10px; min-height: 150px; }
  .bd { min-width: 0; padding: 0 11px; }
  .bd:first-child { padding-left: 0; }
  .bd:last-child { padding-right: 0; }
  .bd + .bd { border-left: 1px solid var(--rule); }
  .bd-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
  .bd-wd { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .bd-num { font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
  .bd.today .bd-num { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: var(--muted); }
  .bd-items { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
  .bi { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.35; }
  .bi-time { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
  .bi-time .nd { width: 8px; height: 8px; }
  .bi-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .bi-place { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bi-fact .bi-title { color: var(--muted); }
  .bi-bday .bi-title { font-weight: 600; }
  .bi-crest { width: 16px; height: 16px; object-fit: contain; }
  .bi-live { font-weight: 600; color: var(--arsenal); }
  .bi-more { font-size: 12px; color: var(--muted); }
  .bi.is-new::before { left: -9px; top: 1px; margin-top: 0; }
  .bd:first-child .bi.is-new::before { left: -12px; }
}

/* ===================== The strip bay =====================
 * Everything above lays the page out; this layer dresses it. Racks hold strips; a strip is
 * paper with a coloured holder edge and, where it has one, a time field ruled off on the left.
 * Labels speak in Barlow Condensed caps, words in Barlow. */
/* Labels read as words: plain case, no tracking. Condensed is kept for figures and buttons. */
.tprog-done, .pill, .pbtn, .bi-time, .tmeta, .card-link, .seg button, .wk-more {
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
}
.num, .sub-head, .clock-label, .bd-wd, .tile-label, .read-kind, .fold-from, .start-go, .more-link, .eyebrow {
  font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.tile-label, .sub-head, .fold-from, .read-kind { font-size: 14px; }
.card-note, .feed-when, .read-when, .park-oldest { font-size: 14px; letter-spacing: 0; }
.card-link { font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
.card-link:hover { color: var(--ink); opacity: 1; }

/* The tower: the date in big condensed figures, the clocks by city. */
.date { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 700; letter-spacing: 0; line-height: .86; }
.eyebrow { color: var(--muted); }
.clock-here, .clock-time { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 600; }
.clock-time { font-size: 15px; }
@media (min-width: 720px) { .clock-time { font-size: 26px; } }
.say { font-weight: 500; }

/* The apps row: rack-coloured tabs. */
.app-link { height: 38px; background: var(--card); border-radius: 3px; font-size: 15px; font-weight: 600; box-shadow: inset 0 1px 0 var(--rack-hi), 0 1px 0 var(--rack-lo); }
.app-link:hover { background: #F2F4F6; }

/* Racks. */
.card { border-radius: 6px; box-shadow: inset 0 1px 0 var(--rack-hi), inset 0 -2px 0 var(--rack-lo); }

/* The strip in hand: Start with, pulled out of the rack. */
.card-start { background: var(--paper); color: var(--paper-ink); border-radius: 2px; border-left: 14px solid var(--accent); box-shadow: 0 8px 20px rgba(30, 40, 55, .18); transform: rotate(-.4deg); }
a.card-start:hover { background: #F7F8F9; }
a.card-start:active { background: #F7F8F9; transform: rotate(-.4deg) scale(.985); }
.card-start .num { color: var(--paper-green); }
.start-text { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 700; letter-spacing: 0; }
@media (min-width: 1100px) { .card-start { margin-left: -14px; } }

/* Lists in a rack (to-dos, today's events, letters) are calm rows on the rack, each with a short
 * holder tick in its kind's colour. Paper is kept for what is dated or needs Paul: Start with,
 * the fact strips, the week and Desk's prepared rows (picked 2026-10-19 over full strips). */
.desk-act { background: var(--paper); color: var(--paper-ink); border-left: 10px solid var(--h-blank); border-radius: 2px; box-shadow: 0 1px 0 rgba(30, 40, 55, .14); }
.row.task, .read-row { position: relative; }
.row.task { padding: 11px 0 11px 16px; font-size: 17px; }
.row.task::before, .read-row::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 18px; margin-top: -9px; border-radius: 1px; background: var(--h-task); }
.read-needs::before { background: var(--accent); }
.task-name { font-weight: 500; }
.tmeta { padding: 0; background: none; color: var(--muted); font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.tmeta-near { background: none; color: var(--amber-ink); }
.rows-done { margin-top: 0; }
.row.task.task-done { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted); }
.row.task.task-done::before { background: #B3BBC4; }
.task-done .tick { display: none; }
.row.evt { font-size: 17px; }
.tile .soon-text, .bi .soon-text { color: var(--paper-ink); }
.tile .near-text, .bi .near-text { color: var(--paper-amber); }
.bi .nd { border-color: var(--paper-2); }
.bi .nd.next, .bi .nd.on { background: var(--paper-ink); border-color: var(--paper-ink); }
.bi .nd.next::after { border-color: var(--paper-ink); }
.more-link { min-height: 40px; border-top: 0; color: var(--muted); }
.sub-head { padding-bottom: 6px; }
.sub-count { opacity: 1; color: var(--muted); }

/* Today's count: the number left, and one tick per thing on today's list (done ones filled). */
.tprog { padding: 16px 2px 12px; }
.tprog-big { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 44px; font-weight: 700; letter-spacing: 0; }
.tprog-done { font-size: 16px; letter-spacing: .02em; }
.tticks { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.tticks i { height: 5px; border-radius: 1px; background: #C4CBD3; }
.tticks i.on { background: var(--ink); }

/* Fact strips (dinner, eating out, bins, cleaning, yesterday): short strips, amber holder. */
.tiles { gap: 5px; }
.tile { background: var(--paper); color: var(--paper-ink); border-radius: 2px; border-left: 6px solid var(--h-fact); padding: 9px 12px 10px; box-shadow: 0 1px 0 rgba(30, 40, 55, .14); }
.tile-label, .tile-sub { color: var(--paper-2); }
.tile .accent-text { color: var(--paper-green); }
.wins i { background: var(--paper-2); }
.wins b { color: var(--paper-2); }

/* Read for you: one row per letter, the kind in condensed caps; a letter that needs Paul gets
 * the green tick and green words. */
.read-rows { padding: 4px 0 10px; }
.read-row { padding: 11px 0 11px 16px; font-size: 16px; }
.read-kind { width: 52px; color: var(--muted); }
.read-needs { margin: 0; background: none; border-radius: 0; }
.rows > * + .read-needs, .rows > .read-needs + * { border-top: 1px solid var(--rule); }
.read-needs .read-kind, .read-needs .read-when { color: var(--accent-text); }

/* Desk: a blank strip to write on. */
.desk-input { min-height: 50px; padding: 0 14px; border: 0; border-left: 10px solid var(--h-blank); border-radius: 2px; background: #FFFFFF; color: var(--paper-ink); font-size: 16px; box-shadow: 0 1px 0 rgba(30, 40, 55, .14); }
.desk-input::placeholder { color: #6E6957; }
.desk-input:focus { background: #FFFFFF; outline: 2px solid var(--accent-text); outline-offset: 2px; }
.desk-form { align-items: center; }
.pbtn { border-radius: 3px; font-size: 15px; letter-spacing: .02em; }
.desk-act { padding: 12px 14px; border-left-color: var(--h-blank); background: var(--paper); }
.desk-act .fold-from, .desk-said { color: var(--paper-2); }
.desk-act .pbtn-done { color: var(--paper-ink); border-color: var(--h-blank); }
.desk-act .pbtn-drop { color: var(--paper-2); }
.desk-act .desk-state { color: var(--paper-ink); }
.desk-act.is-done { background: none; border-left-color: transparent; box-shadow: none; color: var(--ink); }
.desk-act.is-done .fold-from { color: var(--muted); }
.desk-edit { background: #FFFFFF; color: var(--paper-ink); border-color: var(--h-blank); }
.desk-said { color: var(--muted); }

/* Projects and Lately stay on the rack: icon, name, time. */
.pill { font-size: 13px; letter-spacing: .06em; border-radius: 3px; background: var(--accent-fill); }
.proj-turn { background: var(--inner); border-radius: 3px; }
.fx-next { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: .01em; }
.feed-row, .chip { font-size: 15px; }

/* The week: seven bays, the day's strips standing in each. Today's bay is lit. */
@media (min-width: 1100px) {
  .band-days { gap: 6px; }
  .bd { padding: 8px 7px 10px; border-radius: 3px; background: var(--inner); }
  .bd:first-child { padding-left: 7px; }
  .bd:last-child { padding-right: 7px; }
  .bd + .bd { border-left: 0; }
  .bd.today { background: #F6F7F9; box-shadow: inset 0 0 0 1px #A9B2BC; }
  .bd-head { flex-direction: row; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  .bd-num { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: 0; color: var(--ink); }
  .bd.today .bd-num { text-decoration: none; }
  .bd-items { gap: 5px; }
  .bi { padding: 6px 6px 7px; background: var(--paper); color: var(--paper-ink); border-left: 6px solid var(--h-event); border-radius: 2px; font-size: 13px; box-shadow: 0 1px 0 rgba(30, 40, 55, .14); }
  .bi-time { color: var(--paper-2); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
  .bi-place { color: var(--paper-2); }
  /* Condensed in the narrow bays, so a word fits its strip instead of breaking in two. */
  .bi-title { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
  .bi-fact, .bi-bday { border-left-color: var(--h-fact); }
  .bi-fact .bi-title { color: var(--paper-ink); }
  .bi-arsenal { border-left-color: var(--h-ars); }
  .bi-live { color: #B3202A; }
  .bi:has(.nd.next) { box-shadow: 0 0 0 2px var(--ink); }
  .bi.bi-more { padding: 2px 2px 0; background: none; border: 0; box-shadow: none; color: var(--muted); }
}

/* ---------- The read-outs (PC): next thing, left today, tonight, between the date and the clocks ----------
 * Tower read-outs: a small label, one big condensed figure, one line under it. Next turns amber in
 * its last ten minutes. On the PC they replace the sentence under the date, which says the same. */
.readouts { display: none; }
@media (min-width: 1100px) {
  .readouts { flex: 1; min-width: 0; max-width: 700px; margin: 0 40px 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-self: center; }
  .readouts[hidden] { display: none; }
  .page:has(#readouts:not([hidden])) .say { display: none; }
  .head { align-items: center; }
}
.ro { min-width: 0; padding: 12px 16px 14px; background: var(--card); border-radius: 3px; box-shadow: inset 0 1px 0 var(--rack-hi), 0 1px 0 var(--rack-lo); }
.ro-k { display: block; font-size: 14px; font-weight: 600; color: var(--muted); }
.ro-v { display: block; margin-top: 2px; font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.ro-s { display: block; margin-top: 5px; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-near .ro-v { color: var(--amber-ink); }