/* ---------------------------------------------------------------------------
   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; }
@media (min-width: 50rem) { .page { padding-left: 3.2rem; padding-right: 3.2rem; } }

/* ------------------------------------------------------------------ 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", "LEAKED, LOST". Never colour carrying meaning on its own. */
.rows .warn-ink    { color: var(--warning); }
.rows .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); }

/* ------------------------------------------------------------------ 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); }