/* Palette follows the design doc: cool nordic paper, deep fjord blue accent.
   Three theme states must all resolve — light (bare :root), system-dark
   (prefers-color-scheme), and any future explicit toggle ([data-theme]). */

:root {
  --paper: #EDF1F3;
  --surface: #FFFFFF;
  --surface-2: #F5F8F9;
  --ink: #0F181E;
  --ink-2: #3B4A55;
  --ink-3: #6C7C87;
  --rule: #CFD9DE;
  --accent: #0D6480;
  --accent-soft: #DAEAF1;
  --ok: #2C6A51;
  --ok-soft: #DAEAE1;
  --warn: #8B4A2E;
  --warn-soft: #F2E4DB;
  --crit: #962E2E;
  --crit-soft: #F4E0E0;

  /* Read back from JS to display the inset. env() is only valid inside a
     property value, so it has to be parked on a custom property like this. */
  --sab: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B1216;
    --surface: #101A20;
    --surface-2: #152128;
    --ink: #DFE8EC;
    --ink-2: #A6B5BD;
    --ink-3: #74848D;
    --rule: #25343C;
    --accent: #63B7D3;
    --accent-soft: #123240;
    --ok: #79C09F;
    --ok-soft: #15271E;
    --warn: #D5906F;
    --warn-soft: #33231A;
    --crit: #DC8383;
    --crit-soft: #2E1919;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 -apple-system, "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: max(20px, env(safe-area-inset-top)) 18px calc(28px + var(--sab));
  max-width: 640px;
  margin-inline: auto;
}

.mono, pre, .big, .val { font-family: "SF Mono", ui-monospace, Menlo, monospace; }

header { padding: 8px 0 22px; }

.eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

h1 {
  margin: 10px 0 0;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.sub {
  margin: 12px 0 0;
  color: var(--ink-2);
  font-size: 14.5px;
}

/* ------------------------------------------------------------ hero */

.hero {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 24px 20px;
  text-align: center;
}

.big {
  font-size: 56px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.cap { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.hint { margin-top: 10px; font-size: 13px; color: var(--ink-3); }

/* ------------------------------------------------------------ actions */

.acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 24px;
}

.acts button:first-child { grid-column: 1 / -1; }

button {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 14px;
  border-radius: 4px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--surface);
  cursor: pointer;
  /* Kills the 300ms tap delay and the grey flash on iOS. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button.ghost {
  background: var(--surface);
  color: var(--ink-2);
  border-color: var(--rule);
}

button.danger { color: var(--crit); }

button:active { opacity: .7; }

/* ------------------------------------------------------------ checks */

.checks {
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface);
}

.row {
  display: flex;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--rule);
}

.row:last-child { border-bottom: 0; }

.tag {
  flex: none;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 7px;
  border-radius: 2px;
  margin-top: 2px;
}

.row.pass .tag { background: var(--ok-soft);   color: var(--ok); }
.row.warn .tag { background: var(--warn-soft); color: var(--warn); }
.row.fail .tag { background: var(--crit-soft); color: var(--crit); }
.row.info .tag { background: var(--surface-2); color: var(--ink-3); }

.body { min-width: 0; }
.name { font-size: 13px; color: var(--ink-3); }

.val {
  font-size: 14px;
  color: var(--ink);
  word-break: break-word;
  margin-top: 1px;
}

.note { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }

pre {
  margin: 18px 0 0;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-2);
  overflow-x: auto;
  max-height: 50vh;
}

.loading { color: var(--ink-3); }

footer {
  margin-top: 26px;
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================ today page */
/* NOTE: this stylesheet is shared with selfcheck.html, so every class below
   is named so it cannot collide with the ones above. `.note`, `.tag` and
   `.big` are already taken up there — hence .daynote / .itag / .wide. */

body.app {
  padding: 0;
  max-width: 560px;
  /* Room for the floating add button plus the home indicator. */
  padding-bottom: calc(96px + var(--sab));
}

.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  font-size: 13px; border-bottom: 1px solid var(--rule);
  background: var(--surface); color: var(--ink-2);
}
.bar.ok   { background: var(--surface);   color: var(--ink-3); }
.bar.warn { background: var(--warn-soft); color: var(--warn); }
.bar.crit { background: var(--crit-soft); color: var(--crit); font-weight: 600; }
.bar button {
  font-size: 12.5px; padding: 6px 12px; border-radius: 3px;
  background: transparent; border: 1px solid currentColor; color: inherit;
}

.triph {
  padding: 14px 16px 0; font-size: 12.5px; letter-spacing: .04em;
  color: var(--ink-3);
}

.daynav { display: flex; align-items: center; gap: 8px; padding: 8px 8px 14px; }
.daynav button {
  flex: none; width: 44px; height: 44px; font-size: 22px; line-height: 1;
  background: transparent; border: 0; color: var(--ink-3);
}
.dayttl { flex: 1; text-align: center; min-width: 0; }
.dayn { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.loc { font-size: 13.5px; color: var(--ink-2); margin-top: 2px;
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sec { margin: 0 12px 12px; background: var(--surface);
       border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; }
.sec h2 {
  margin: 0; padding: 10px 14px 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .13em; color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
.sec .row { display: flex; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--rule); }
.sec .row:last-child { border-bottom: 0; }
.sec .ic { flex: none; width: 20px; text-align: center; color: var(--ink-3); font-size: 15px; }
.sec .body { min-width: 0; flex: 1; }
.sec .ttl { font-size: 15px; line-height: 1.4; }
.sec .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px;
            font-variant-numeric: tabular-nums; }
.sec .empty { padding: 12px 14px; font-size: 13.5px; color: var(--ink-3); }

/* A cancelled item is struck through, not hidden: it is the evidence that you
   planned something and did not do it (design doc §5.2 ⑥). */
.row.off .ttl { text-decoration: line-through; color: var(--ink-3); }
.row.added .ttl::after { content: ''; }
/* A ghost is a reference to a record owned by another day — it must never look
   like a row of its own (§3.9). */
.row.ghost { background: var(--surface-2); }
.row.ghost .ttl, .row.ghost .ic { color: var(--ink-3); }
.itag { font-size: 11px; padding: 1px 6px; border-radius: 2px;
       background: var(--surface-3); color: var(--ink-2); vertical-align: 1px; }
.row.added .itag { background: var(--ok-soft); color: var(--ok); }
.row.off .itag { background: var(--crit-soft); color: var(--crit); }

.sec.sum .ttl { font-variant-numeric: tabular-nums; }
.daynote { font-size: 14px; line-height: 1.6; margin-bottom: 6px; }
.daynote:last-child { margin-bottom: 0; }

.fab {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + var(--sab));
  width: 200px; height: 56px; border-radius: 28px; font-size: 26px; font-weight: 300;
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .35); z-index: 6;
}

/* ---- bottom sheet. Never a modal dialog: dismissing must keep the draft. */
.sheet { position: fixed; inset: 0; z-index: 10;
         background: rgba(0, 0, 0, .35); display: flex; align-items: flex-end; }
.sheetbox {
  width: 100%; background: var(--surface); border-radius: 14px 14px 0 0;
  padding: 16px 16px calc(20px + var(--sab));
  display: flex; flex-direction: column; gap: 12px;
  max-height: 88vh; overflow-y: auto;
}
.sheeth { display: flex; justify-content: space-between; align-items: center;
          font-size: 15px; font-weight: 600; }
.sheeth .x { background: transparent; border: 0; color: var(--ink-3); font-size: 18px; padding: 4px 8px; }

.amtrow { display: flex; gap: 10px; align-items: stretch; }
.amtrow input {
  flex: 1; min-width: 0; font-size: 34px; font-weight: 500; padding: 8px 12px;
  font-variant-numeric: tabular-nums;
}
.cur { flex: none; width: 84px; font-size: 16px; font-weight: 600;
       background: var(--surface-2); color: var(--accent); border: 1px solid var(--rule); }
.cnyhint { font-size: 14px; color: var(--ink-3); min-height: 20px;
           font-variant-numeric: tabular-nums; }

input, textarea {
  font: inherit; font-size: 16px;  /* < 16px makes iOS zoom the whole page on focus */
  padding: 12px; border-radius: 5px; border: 1px solid var(--rule);
  background: var(--surface-2); color: var(--ink); width: 100%;
}
textarea { resize: none; line-height: 1.6; }

/* Horizontal chips, not <select> — iOS renders a select as a full-screen wheel. */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.chips button {
  flex: none; padding: 9px 15px; font-size: 14px; border-radius: 18px;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule);
}
.chips button.on { background: var(--accent); color: var(--surface); border-color: var(--accent); }

button.primary { font-size: 16px; padding: 15px; }
button.wide { font-size: 17px; padding: 18px; text-align: left;
             background: var(--surface-2); color: var(--ink); border-color: var(--rule); }
.hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }

.fatal { padding: 40px 20px; }
.fatal h2 { font-size: 20px; margin: 0 0 12px; }
.fatal pre { font-size: 12px; white-space: pre-wrap; }
.spacer { height: 8px; }

/* Day strip — 14 days is too many to reach one ‹ › tap at a time. */
.strip {
  display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px 4px;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.dchip {
  flex: none; width: 34px; height: 34px; padding: 0; border-radius: 17px;
  font-size: 13px; font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--ink-3); border: 1px solid var(--rule);
}
.dchip.on { background: var(--accent); color: var(--surface); border-color: var(--accent); font-weight: 600; }

/* A layover is a gap between two rows, so it is drawn as one — not as a row. */
.layover {
  padding: 5px 14px 5px 45px; font-size: 12px; color: var(--ink-3);
  background: var(--surface-2); border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.layover.tight { color: var(--warn); }

/* A newer worker is installed but cannot take over yet. Never auto-activate it
   (§7.5) — but never hide it either, or "deployed" and "running" silently drift. */
.bar.upd { background: var(--accent-soft); color: var(--accent-ink); border-bottom: 1px solid var(--accent); }

.foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 16px 0; font-size: 12px; color: var(--ink-3);
}
.foot a { color: var(--ink-3); }
.foot .v { font-family: "SF Mono", ui-monospace, monospace; }