/* ---------------------------------------------------------------------------
   DAYBOOK — the web half of D.ai.ly's design system.

   Tokens are lifted verbatim from DesignSystem.swift so the site and the app
   cannot drift. Both themes are DESIGNED, never inverted: the dark values are
   separately chosen steps, not a flip of the light ones.

   The one rule this file enforces, same as the app:
       hue is reserved for domain identity. All chrome is achromatic.
   If you reach for a domain colour to mean "selected" or "primary", stop and
   use weight, fill, or ink contrast instead.
--------------------------------------------------------------------------- */

:root {
  --ink-1: #0C1017;  --ink-2: #4E5866;  --ink-3: #7C8795;
  --surface: #FFFFFF;  --ground: #ECEEF1;  --raised: #F6F7F9;
  --hairline:      rgba(12,16,23,.14);
  --hairline-soft: rgba(12,16,23,.07);

  /* The validated six. Changing one requires re-validating all six for
     colourblind separation and contrast, light and dark. */
  --work: #2A78D6;  --training: #EB6834;  --meals: #1BAF7A;
  --habits: #EDA100; --hobbies: #E87BA4;  --school: #008300;

  /* Status is separate from domain identity and is never reused as a seventh
     domain. Always ships with a text label, never colour alone. */
  --good: #0CA30C;  --warning: #FAB219;  --serious: #EC835A;  --critical: #D03B3B;

  /* Serif for anything WRITTEN. Mono for anything MEASURED. If you are unsure
     which a string is, ask whether a person wrote it or a clock did.
     System stacks on purpose: no third-party request from a product whose
     whole claim is that it does not phone anyone. */
  --serif: ui-serif, "New York", Newsreader, Georgia, "Times New Roman", serif;
  --mono:  ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
  /* The logo is a grotesque, matching icon-1024.png. It is the ONLY place a
     sans-serif appears. */
  --logo:  ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --logo-blue: #3987E5;   /* sampled from the app icon, not guessed */
  --logo-ink:  #0C1017;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink-1: #F2F4F7;  --ink-2: #A7B0BC;  --ink-3: #79838F;
    --surface: #171B22;  --ground: #0F1218;  --raised: #1F242D;
    --hairline:      rgba(255,255,255,.14);
    --hairline-soft: rgba(255,255,255,.07);
    --work: #3987E5;  --training: #D95926;  --meals: #199E70;
    --habits: #C98500; --hobbies: #D55181;  --school: #008300;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-1);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 47rem;
  margin: 0 auto;
  padding: 0 1.4rem 5rem;
  background: var(--surface);
  min-height: 100vh;
}
.page.wide  { max-width: 64rem; }
.page.roomy { max-width: 76rem; }
@media (min-width: 50rem) { .page { padding-left: 3.2rem; padding-right: 3.2rem; } }

/* A wide canvas does NOT mean wide prose. Past roughly 90 characters a line
   gets measurably harder to read, so the page gets the width and the sentences
   keep their measure. Tables, ledgers and figures are free to use all of it.

   `:not(.eyebrow)` matters: the eyebrow is a <p> that CARRIES the 2px section
   rule as its bottom border. Measuring it clamped every rule on the page to
   47rem while the masthead rule ran the full width, so the page read as
   though it were broken. A rule is structure, not prose. */
.page.roomy section > p:not(.eyebrow),
.page.roomy .points li p { max-width: 47rem; }

/* ------------------------------------------------------------------ the mark
   Matches the iOS app icon exactly: bold lowercase grotesque, `d` and `ly` in
   white-on-ink, `.ai.` in the icon blue. Drawn in type rather than shipped as
   an image so it stays sharp and recolours with the theme. */
.mark {
  font-family: var(--logo);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--ink-1);
  display: inline-block;
}
.mark i { font-style: normal; color: var(--work); }

/* The tile is the SHIPPED app icon, not a re-typeset copy of it. Re-typesetting
   it produced a second, cramped wordmark sitting next to the real one. */
.mark-tile {
  display: block; flex: none;
  width: 1.85rem; height: 1.85rem;
  border-radius: 22.4%;         /* iOS superellipse, approximated */
}

/* ------------------------------------------------------------------ headings
   No cards anywhere. Hierarchy is hairlines plus exactly one 2px rule per
   section, which sits above the heaviest thing on the page. */
.eyebrow {
  font-family: var(--mono);
  font-size: .59rem; letter-spacing: .16em; font-weight: 600;
  color: var(--ink-3); text-transform: uppercase; margin: 0;
}
section { padding-top: 2.9rem; }
section > .eyebrow { padding-bottom: .55rem; border-bottom: 2px solid var(--ink-1); }

h1, h2, h3 { font-weight: 400; letter-spacing: -.012em; margin: 0; }
h1 { font-size: clamp(2.1rem, 6.4vw, 3.05rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 4vw, 1.95rem); line-height: 1.2; padding-top: .85rem; }
h3 { font-size: 1.16rem; }
/* `text-wrap: pretty` stops a one-word last line, which the DAYBOOK ledger
   notices badly because there is no card edge to hide it against. */
p  { color: var(--ink-2); margin: .8rem 0 0; text-wrap: pretty; }
p.lede { color: var(--ink-1); font-size: 1.2rem; line-height: 1.5; }
/* Measure. A mono note running the full width of a wide console is unreadable
   however correct it is. */
header p, .note, .warn { max-width: 44rem; }
strong { font-weight: 600; color: var(--ink-1); }
a { color: var(--ink-1); text-decoration-color: var(--ink-3); text-underline-offset: .18em; }

/* ----------------------------------------------------------------- masthead */
header { padding-top: 2.6rem; }
.wordmark {
  display: flex; align-items: center; gap: .62rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--ink-1);
}
.wordmark .mark { font-size: 1.28rem; }
.wordmark .tag {
  font-family: var(--mono); font-size: .59rem; letter-spacing: .16em;
  color: var(--ink-3); text-transform: uppercase; margin-left: auto;
}
.wordmark .tag a { color: var(--ink-3); text-decoration: none; }
.wordmark .tag a:hover { color: var(--ink-1); }

/* ------------------------------------------------------------------- rows
   Measured things only, so everything inside is mono and tabular.

   GRID, not <table>. A table's auto-layout is what let a right-aligned number
   collide with the left-aligned cell after it — the headers rendered as
   "STATUSERROR" and "TOKENSNOTE". Declaring the columns explicitly per block
   (`--cols`) makes that impossible rather than patched, and lets a long free-
   text column take `minmax()` while the numbers stay fixed.

   Each block sets its own columns:
       <div class="rows" style="--cols: minmax(5rem,1fr) 4rem 4.5rem">
*/
.rows { margin-top: 1rem; overflow-x: auto; }
.rows .head,
.rows .row {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 0 1.1rem;
  align-items: baseline;
  min-width: max-content;
}
.rows .head {
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ink-1);
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
  font-weight: 600; text-transform: uppercase; color: var(--ink-3);
}
.rows .row {
  padding: .62rem 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--mono); font-size: .76rem;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.rows .row:hover { color: var(--ink-1); }
.rows .k { color: var(--ink-1); }
.rows .n { text-align: right; }

/* Status ink, used ONLY alongside a word that says the same thing —
   "not set", "no rates configured", "LEAKED, LOST". Never colour carrying
   meaning on its own.
   NOT scoped to .rows: it was, and the footer's "no rates configured" then
   rendered as ordinary grey — the one place the warning most needed to be
   seen. Status ink is a document-wide role, like the ink scale itself. */
.warn-ink    { color: var(--warning); }
.serious-ink { color: var(--serious); }

/* --------------------------------------------------------------- stat lines
   A number and what it means. Not a card — a ledger row. */
.stats { display: grid; gap: 0; margin-top: 1rem; }
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(4, 1fr); gap: 0 1.6rem; } }
.stat { padding: .9rem 0; border-top: 1px solid var(--hairline-soft); }
.stat .v {
  font-family: var(--mono); font-size: 1.5rem; font-variant-numeric: tabular-nums;
  color: var(--ink-1); line-height: 1.1;
}
.stat .l {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-top: .3rem;
}
.stat .n { font-family: var(--mono); font-size: .66rem; color: var(--ink-3); margin-top: .3rem; }

/* ------------------------------------------------------------------- bars
   Pure CSS. No charting library, so no external request and nothing to break
   when a CDN changes. */
.bars { margin-top: 1.1rem; }
.bar-row {
  display: grid; grid-template-columns: 5.4rem 1fr 5rem;
  gap: .7rem; align-items: center;
  padding: .32rem 0;
}
.bar-row .lab, .bar-row .val {
  font-family: var(--mono); font-size: .68rem; font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.bar-row .val { text-align: right; color: var(--ink-2); }
.bar-track { height: 9px; background: var(--hairline-soft); }
.bar-fill  { height: 9px; background: var(--ink-1); }
.bar-fill.hue-work { background: var(--work); }

/* -------------------------------------------------------------------- tabs
   Same rule as the app's tab bar: mono, uppercase, ACHROMATIC. The active tab
   is carried by ink and a 2px rule, never by a colour — hue stays reserved for
   domain identity, and a console has no domains. */
.tabs {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: .4rem 1.6rem;
  margin-top: 1.6rem;
  border-bottom: 1px solid var(--hairline);
}
.tabs-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 1.35rem; }
.tabs-row.ranges { margin-left: auto; gap: 0 .85rem; }

.tab, .range {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .15em;
  text-transform: uppercase; text-decoration: none;
  color: var(--ink-3);
  padding: .1rem 0 .6rem;
  margin-bottom: -1px;                 /* sit the rule on the container's line */
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab:hover, .range:hover { color: var(--ink-1); }
.tab.on   { color: var(--ink-1); border-bottom-color: var(--ink-1); }
.range    { font-size: .59rem; letter-spacing: .16em; }
.range.on { color: var(--ink-1); }

/* A count in the label, so a tab never has to be opened to discover it is
   empty. Tabular so the labels do not jitter when a number changes width. */
.tab .count {
  font-size: .58rem; margin-left: .42rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tab.on .count { color: var(--ink-2); }

.console-h1 { font-size: 2.1rem; padding-top: 1.5rem; }

/* Public-site tab bar. Same grammar as the console's, one size up because it
   is the primary navigation of the page rather than a filter on a table. */
.tabs.site { margin-top: 2rem; }
.tabs.site .tab { font-size: .68rem; letter-spacing: .16em; padding-bottom: .7rem; }

/* Panels are HIDDEN BY SCRIPT, never by default.
   With JavaScript off the page stays exactly what it was — one editorial
   scroll that argues in order — and the tab bar degrades to anchor links that
   jump to each section. Nothing is ever unreachable because a script failed. */
[data-panel][hidden] { display: none; }

/* ------------------------------------------------------------------ notices */
.note {
  font-family: var(--mono); font-size: .69rem; line-height: 1.65;
  color: var(--ink-3); margin-top: 1rem;
}
.warn {
  font-family: var(--mono); font-size: .69rem; line-height: 1.65;
  color: var(--ink-1); margin-top: 1rem;
  padding: .8rem 0 .8rem .9rem;
  border-left: 2px solid var(--critical);
}
.ok-dot, .bad-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: .4rem; vertical-align: baseline;
}
.ok-dot  { background: var(--good); }
.bad-dot { background: var(--critical); }

/* ------------------------------------------------------------------- forms */
.field { display: block; margin-top: 1.2rem; }
.field span {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); display: block;
}
.field input {
  font-family: var(--mono); font-size: .95rem;
  width: 100%; margin-top: .45rem; padding: .55rem 0;
  background: transparent; color: var(--ink-1);
  border: 0; border-bottom: 1px solid var(--hairline);
}
.field input:focus { outline: none; border-bottom-color: var(--ink-1); }

button.go, .btn {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .03em;
  text-decoration: none; display: inline-block;
  margin-top: 1.4rem; padding: .68rem 1.15rem;
  background: var(--ink-1); color: var(--surface);
  border: 1px solid var(--ink-1); cursor: pointer;
}
.btn.hollow { background: transparent; color: var(--ink-1); }
button.go:hover, .btn:hover { opacity: .86; }

footer {
  margin-top: 3.4rem; padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono); font-size: .655rem; line-height: 1.9;
  color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 0 1.4rem; justify-content: space-between;
}
footer a { color: var(--ink-3); }
footer a:hover { color: var(--ink-1); }

/* ------------------------------------------------------------ status footer
   A status line, not decoration. Every cell answers "is it configured the way
   I think it is" without opening a terminal. Same ledger grammar as the rest
   of the page: hairlines, mono for measured, no cards. */
footer.status { display: block; border-top: 2px solid var(--ink-1); padding-top: 0; }

.status-grid { display: grid; gap: 0; }
@media (min-width: 44rem) {
  .status-grid { grid-template-columns: repeat(4, 1fr); gap: 0 1.6rem; }
}
.status-grid > div {
  padding: .95rem 0 1.05rem;
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--mono); line-height: 1.5;
}
.status-grid .k {
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .35rem;
}
.status-grid > div > div:nth-child(2) {
  font-size: .84rem; color: var(--ink-1); font-variant-numeric: tabular-nums;
}
.status-grid .sub { font-size: .64rem; color: var(--ink-3); margin-top: .18rem; }

.status-foot {
  display: flex; flex-wrap: wrap; gap: .3rem 1.4rem;
  justify-content: space-between;
  padding-top: .9rem; font-size: .655rem; color: var(--ink-3);
}