/* Generated by build-features.py. Tokens live in tokens.css. */

/* Tokens lifted from the app's own theme file, so the page and the
     product are the same object. */
  
  @media (prefers-color-scheme: dark) {
    :root {
      --ground: #0C120D;
      --surface: rgba(255, 255, 255, 0.055);
      --sunken: rgba(255, 255, 255, 0.03);
      --rule: rgba(255, 255, 255, 0.10);
      --rule-strong: rgba(255, 255, 255, 0.22);
      --ink: #F2F6EE;
      --ink-muted: #B9C2AF;
      --ink-subtle: #8B9380;
      --mint: #6FE8AC;
      --mint-solid: #54E39C;
      --amber: #E5A54C;
      --glow: rgba(52, 199, 123, 0.20);
      --glow-2: rgba(52, 199, 123, 0.06);
      --spec-ground: rgba(255, 255, 255, 0.04);
      --dock: rgba(12, 18, 13, 0.82);
      --dock-edge: rgba(255, 255, 255, 0.13);
    }
  }
  :root[data-theme='dark'] {
    --ground: #0C120D;
    --surface: rgba(255, 255, 255, 0.055);
    --sunken: rgba(255, 255, 255, 0.03);
    --rule: rgba(255, 255, 255, 0.10);
    --rule-strong: rgba(255, 255, 255, 0.22);
    --ink: #F2F6EE;
    --ink-muted: #B9C2AF;
    --ink-subtle: #8B9380;
    --mint: #6FE8AC;
    --mint-solid: #54E39C;
    --amber: #E5A54C;
    --glow: rgba(52, 199, 123, 0.20);
    --glow-2: rgba(52, 199, 123, 0.06);
    --spec-ground: rgba(255, 255, 255, 0.04);
    --dock: rgba(12, 18, 13, 0.82);
    --dock-edge: rgba(255, 255, 255, 0.13);
  }
  :root[data-theme='light'] {
    --ground: #FAF9F5;
    --surface: #FFFFFF;
    --sunken: #F1EFE6;
    --rule: #E7E3D5;
    --rule-strong: #D2CCB6;
    --ink: #2E3325;
    --ink-muted: #6B6F56;
    --ink-subtle: #6A6E58;
    --mint: #277861;
    --mint-solid: #54B996;
    --amber: #A15A05;
    --glow: rgba(84, 185, 150, 0.16);
    --glow-2: rgba(169, 180, 140, 0.10);
    --spec-ground: #F1EFE6;
    --dock: rgba(250, 249, 245, 0.86);
    --dock-edge: rgba(46, 51, 37, 0.10);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16.5px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
  }

  /* The app's ambient canvas glow, fixed behind everything. */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(60rem 40rem at 78% -8%, var(--glow), transparent 68%),
      radial-gradient(48rem 34rem at 8% 32%, var(--glow-2), transparent 70%);
  }

  .page {
    position: relative;
    z-index: 1;
    max-width: 43rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 2rem) 6rem;
  }

  h1, h2, h3, .eyebrow, .lockup, .spec-time, .stat-num {
    font-family: 'Instrument Sans', -apple-system, sans-serif;
  }

  .lockup {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mint);
    margin: 0 0 2.5rem;
  }

  h1 {
    font-weight: 700;
    font-size: clamp(2.2rem, 6.4vw, 3.35rem);
    line-height: 1.06;
    letter-spacing: -0.022em;
    text-wrap: balance;
    margin: 0 0 1.25rem;
  }

  .standfirst {
    font-size: clamp(1.08rem, 2.6vw, 1.28rem);
    line-height: 1.5;
    color: var(--ink-muted);
    margin: 0 0 2rem;
    text-wrap: pretty;
  }

  h2 {
    font-weight: 700;
    font-size: clamp(1.45rem, 3.6vw, 1.85rem);
    line-height: 1.2;
    letter-spacing: -0.014em;
    text-wrap: balance;
    margin: 0 0 0.5rem;
  }

  h3 {
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.35;
    letter-spacing: -0.004em;
    margin: 0 0 0.3rem;
  }

  /* A subsection heading within a section: above an .item h3, below the h2. */
  h3.sub {
    font-size: 1.1rem;
    margin: 2.5rem 0 0.55rem;
  }

  /* Literal strings the app actually renders — money, role names. Set in
     mono so a figure reads as a specimen rather than as prose. */
  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
  }

  p { margin: 0 0 1rem; text-wrap: pretty; }
  p:last-child { margin-bottom: 0; }

  a { color: var(--mint); }

  .eyebrow {
    font-weight: 500;
    font-size: 0.735rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    margin: 0 0 0.7rem;
  }

  section {
    margin-top: clamp(3rem, 8vw, 4.75rem);
    padding-top: clamp(2rem, 5vw, 2.75rem);
    border-top: 1px solid var(--rule);
  }
  section > .lede {
    color: var(--ink-muted);
    margin-bottom: 2rem;
  }

  /* Feature groups: a hairline mint rail rather than a boxed card —
     the same top-edge light the app's cards use. */
  .items {
    display: grid;
    gap: 1.6rem;
    margin-top: 1.75rem;
  }
  .item {
    padding-left: 1.1rem;
    border-left: 2px solid var(--rule-strong);
  }
  .item.key { border-left-color: var(--mint-solid); }
  .item p {
    color: var(--ink-muted);
    font-size: 0.965rem;
    margin: 0;
  }
  .item p + p { margin-top: 0.65rem; }

  .cols {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin-top: 1.75rem;
  }

  /* The day-sheet specimen: the app's Home schedule as typography. */
  .spec {
    background: var(--spec-ground);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 1.5rem clamp(1rem, 4vw, 1.75rem) 1.6rem;
    margin: 2rem 0 0;
  }
  .spec-stay { text-align: center; margin-bottom: 1.4rem; }
  .spec-stay-head {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 700;
    font-size: 1.22rem;
    line-height: 1.3;
  }
  .spec-stay-sub { font-size: 0.88rem; color: var(--ink-muted); }
  .spec-stay-eat { font-size: 0.78rem; color: var(--mint); font-weight: 600; }
  .spec-row {
    display: flex;
    gap: 1.15rem;
    align-items: baseline;
    margin-bottom: 0.95rem;
  }
  .spec-time {
    font-weight: 700;
    font-size: 1.2rem;
    width: 3.9rem;
    flex: none;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  .spec-label { font-weight: 600; font-size: 0.98rem; line-height: 1.3; }
  .spec-sub { font-size: 0.85rem; color: var(--ink-muted); }
  .spec-link {
    text-align: center;
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--mint);
    margin: 0 0 1rem;
  }
  /* The circular directions button, as it sits on the real day view:
     right-aligned on the row, icon only, and only on the lines that are
     somewhere to set off for. */
  .spec-nav {
    margin-left: auto;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    border: 1px solid var(--rule);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mint);
    align-self: center;
  }
  .spec-nav svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .spec-stay-line { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
  .spec-stay-line .spec-nav { margin-left: 0; }
  .spec-pending { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem; flex-wrap: wrap; }
  .spec-pill {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--amber) 16%, transparent);
    color: var(--amber);
  }
  .spec-why { font-size: 0.79rem; font-weight: 600; color: var(--amber); }
  .spec-caption {
    font-size: 0.85rem;
    color: var(--ink-subtle);
    margin-top: 1rem;
    text-wrap: pretty;
  }

  /* Section nav, built to read as the app's own bottom dock: a floating
     translucent pill, an outline glyph over a small label, accent for the
     section you're in. Sticky rather than parked at the top — a dock that
     scrolls away stops being a dock. */
  .dock-rail {
    position: sticky;
    top: 0.75rem;
    z-index: 20;
    margin: 0 0 3rem;
  }
  .dock {
    gap: 0.1rem;
    padding: 0.5rem 0.3rem;
    border-radius: 1.5rem;
    background: var(--dock);
    border: 1px solid var(--dock-edge);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.13);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    /* A grid with a stated column count rather than a wrap. Wrapping fits
       as many as it can and strands the remainder, and thirteen is prime
       — every width that fit twelve on the first row left the thirteenth
       sitting alone underneath. Seven columns gives 7 + 6; the narrow
       case below uses five, for 5 + 5 + 3. Six or four would put one item
       on a row of its own again. */
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: 0.15rem;
  }
  .dock a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    padding: 0.3rem 0.2rem;
    border-radius: 0.9rem;
    text-decoration: none;
    color: var(--ink-subtle);
    transition: color 0.16s ease, background-color 0.16s ease;
  }
  .dock a:hover { color: var(--ink); background: var(--sunken); }
  .dock a:focus-visible { outline: 2px solid var(--mint-solid); outline-offset: 2px; }
  /* The section you're in, filled rather than merely tinted. Colour alone
     is a weak signal in a rail of thirteen small items, and it is the only
     signal for anyone who doesn't separate these two greens. */
  .dock a[aria-current='true'] {
    color: var(--mint);
    background: color-mix(in srgb, var(--mint-solid) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint-solid) 38%, transparent);
  }
  .dock a[aria-current='true'] span { font-weight: 700; }
  .dock svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .dock span {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    font-size: 0.63rem;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-align: center;
  }
  /* Clears the sticky dock when a link jumps to a section. */
  section[id] { scroll-margin-top: 9rem; }

  /* One row per event type: the name, then what it actually holds. */
  .typedefs { margin-top: 1.6rem; }
  .typedef {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: 0.25rem 1.25rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--rule);
  }
  .typedef:last-child { border-bottom: 1px solid var(--rule); }
  .typedef dt {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
  }
  .typedef dd {
    margin: 0;
    font-size: 0.94rem;
    color: var(--ink-muted);
    text-wrap: pretty;
  }
  @media (max-width: 34rem) {
    .typedef { grid-template-columns: 1fr; }
    /* Thirteen labelled items wrap to three rows on a phone, and three
       sticky rows sit on a third of the screen for the whole page. So on
       a narrow screen the rail stops following: it becomes a contents
       list at the top, which is what a phone reader expects anyway, and
       the day gets its screen back. */
    .dock-rail { position: static; }
    .dock { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    /* "Availability" is the longest label and this rail is only five
       columns wide, so the labels step down together rather than one word
       spilling out of its column on a narrow phone. */
    .dock span { font-size: 0.58rem; letter-spacing: 0.01em; }
    section[id] { scroll-margin-top: 1.5rem; }
  }

  /* Theme swatches: the Account picker's own card, on the page. Each theme
     is drawn in its own palette — its ground, its card, its accent — because
     a row of coloured dots does not show how the three sit together, which
     is the only thing worth judging a theme on.

     Both versions show at once, side by side, whichever mode you are reading
     this page in: the choice of palette and the choice of light-or-dark are
     separate in the app, so a card that only ever showed you one of them
     would be hiding half the decision.

     Values come straight from lib/themes.ts; the dark surfaces are rgba over
     their background in the app, so they are composited here to the colour
     that actually renders. */
  .swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
  }
  .swatch { margin: 0; }
  .swatch-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid var(--rule);
  }
  .swatch-pane {
    padding: 0.75rem 0.7rem;
    background: var(--sw-bg);
  }
  .swatch-chip {
    width: 1.9rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--sw-accent);
    margin-bottom: 0.35rem;
  }
  .swatch-bar {
    height: 0.4rem;
    width: 88%;
    border-radius: 3px;
    background: var(--sw-sunken);
    border: 1px solid var(--sw-border);
    margin-bottom: 0.25rem;
  }
  .swatch-bar.short { width: 58%; }
  .swatch figcaption { margin-top: 0.6rem; }
  .swatch figcaption b {
    display: block;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
  }
  .swatch figcaption span {
    display: block;
    font-size: 0.75rem;
    line-height: 1.35;
    margin-top: 0.15rem;
    color: var(--ink-muted);
  }

  /* Sleep Protector is not one of the cards above, and does not sit in the
     grid with them, because it is not a taste — it is a time. One pane, no
     light version, because there is no light version of emitting as little
     light as possible. */
  .sleepblock {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 1.4rem;
    align-items: center;
    margin-top: 1.6rem;
    padding: 1.3rem;
    border-radius: 0.9rem;
    background: var(--sw-bg);
    border: 1px solid var(--sw-border);
  }
  @media (max-width: 40rem) {
    .sleepblock { grid-template-columns: 1fr; gap: 1rem; }
  }
  /* The swatch sits in its own bordered panel, as the paired cards do —
     without one, near-black on black reads as an empty column rather than
     as a screen. */
  .sleepblock-swatch {
    padding: 1.1rem 1rem;
    border-radius: 0.7rem;
    border: 1px solid var(--sw-border);
  }
  .sleepblock-swatch .swatch-chip { width: 2.6rem; height: 0.6rem; }
  .sleepblock-swatch .swatch-bar { height: 0.5rem; }
  .sleepblock-copy { display: flex; flex-direction: column; gap: 0.7rem; }
  .sleepblock b {
    display: block;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sw-text);
  }
  .sleepblock p {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--sw-muted);
    margin: 0;
    text-wrap: pretty;
  }
  .sleepblock-window {
    align-self: flex-start;
    margin-top: 0.15rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--sw-border);
    font-size: 0.78rem !important;
    letter-spacing: 0.04em;
    color: var(--sw-accent) !important;
    font-variant-numeric: tabular-nums;
  }

  .sw-forest-l { --sw-bg:#F5FAF6;--sw-sunken:#E8F3EA;--sw-border:#D5E7D9;--sw-accent:#1D864A;--sw-text:#142A1B;--sw-muted:#456A4F }
  .sw-forest-d { --sw-bg:#08140C;--sw-sunken:#111c15;--sw-border:#1e2922;--sw-accent:#34C46F;--sw-text:#E9F6EC;--sw-muted:#A2C2AC }
  .sw-pastel-l { --sw-bg:#FBF7FD;--sw-sunken:#F4EDF7;--sw-border:#EADDF0;--sw-accent:#8B5FB8;--sw-text:#3A2E42;--sw-muted:#7A6B84 }
  .sw-pastel-d { --sw-bg:#17131C;--sw-sunken:#1f1b24;--sw-border:#2c2830;--sw-accent:#C9A9E8;--sw-text:#F2ECF6;--sw-muted:#B9AAC4 }
  .sw-marine-l { --sw-bg:#F4FAFA;--sw-sunken:#E6F2F2;--sw-border:#D2E6E6;--sw-accent:#0E8282;--sw-text:#10292B;--sw-muted:#47686A }
  .sw-marine-d { --sw-bg:#081415;--sw-sunken:#111c1d;--sw-border:#1e292a;--sw-accent:#2BC0C0;--sw-text:#E6F5F5;--sw-muted:#97B8BA }
  .sw-nordic-l { --sw-bg:#F6F9FC;--sw-sunken:#EAF1F8;--sw-border:#D8E4F0;--sw-accent:#2F6FB5;--sw-text:#16232E;--sw-muted:#4F6377 }
  .sw-nordic-d { --sw-bg:#0B1219;--sw-sunken:#141a21;--sw-border:#21272e;--sw-accent:#4E9BE6;--sw-text:#E8F1F9;--sw-muted:#9DB2C4 }
  .sw-rose-l { --sw-bg:#FDF7F8;--sw-sunken:#F8EAEE;--sw-border:#EED8DE;--sw-accent:#B94B68;--sw-text:#3A222B;--sw-muted:#7C5C67 }
  .sw-rose-d { --sw-bg:#1A1215;--sw-sunken:#221a1d;--sw-border:#2f272a;--sw-accent:#DE7D96;--sw-text:#F8EBEF;--sw-muted:#C7A8B2 }
  .sw-sand-l { --sw-bg:#FBF6EF;--sw-sunken:#F3EADD;--sw-border:#E8DBC9;--sw-accent:#A85E33;--sw-text:#33291E;--sw-muted:#6E5F4C }
  .sw-sand-d { --sw-bg:#16120E;--sw-sunken:#1e1a16;--sw-border:#2b2724;--sw-accent:#E08B58;--sw-text:#F5EDE2;--sw-muted:#C0AF99 }
  .sw-neon-l { --sw-bg:#F4F4F2;--sw-sunken:#E9E9E5;--sw-border:#DCDCD6;--sw-accent:#5C7800;--sw-text:#121212;--sw-muted:#575752 }
  .sw-neon-d { --sw-bg:#050505;--sw-sunken:#0e0e0e;--sw-border:#1c1c1c;--sw-accent:#CCFF00;--sw-text:#F5F5F0;--sw-muted:#9A9A93 }
  .sw-electric-l { --sw-bg:#FAFAFF;--sw-sunken:#F0F0FB;--sw-border:#E0E0F5;--sw-accent:#4F46E5;--sw-text:#14142B;--sw-muted:#5A5A7A }
  .sw-electric-d { --sw-bg:#0B0B16;--sw-sunken:#14141e;--sw-border:#21212b;--sw-accent:#8B82FF;--sw-text:#EEEEFF;--sw-muted:#A0A0C0 }
  .sw-sunset-l { --sw-bg:#FEF8F3;--sw-sunken:#FBEDE2;--sw-border:#F2DCC9;--sw-accent:#BC4F1C;--sw-text:#38221A;--sw-muted:#7A5443 }
  .sw-sunset-d { --sw-bg:#180F0B;--sw-sunken:#201714;--sw-border:#2d2521;--sw-accent:#F2854D;--sw-text:#FBEDE4;--sw-muted:#C9A695 }
  .sw-greyscale-l { --sw-bg:#F7F7F7;--sw-sunken:#EDEDED;--sw-border:#E0E0E0;--sw-accent:#2B2B2B;--sw-text:#1A1A1A;--sw-muted:#5E5E5E }
  .sw-greyscale-d { --sw-bg:#0E0E0E;--sw-sunken:#161616;--sw-border:#242424;--sw-accent:#E8E8E8;--sw-text:#F2F2F2;--sw-muted:#A6A6A6 }
  .sw-sleep { --sw-bg:#000000;--sw-sunken:#0d0302;--sw-border:#2e0d0b;--sw-accent:#FF3B30;--sw-text:#FF6A5C;--sw-muted:#D9695C }

  /* Event-type roll call. */
  .types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.6rem;
  }
  .type {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    color: var(--ink-muted);
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-size: 0.93rem;
  }
  .table-wrap { overflow-x: auto; }
  th, td {
    text-align: left;
    padding: 0.62rem 0.9rem 0.62rem 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
  }
  th {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-subtle);
  }
  td.who { font-weight: 600; white-space: nowrap; }
  td.what { color: var(--ink-muted); }

  .status {
    display: grid;
    gap: 0.9rem;
    margin-top: 1.6rem;
  }
  .status-row {
    display: flex;
    gap: 0.85rem;
    align-items: baseline;
  }
  .pill {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
    flex: none;
    min-width: 6.2rem;
    text-align: center;
  }
  .pill.live { color: var(--mint); border: 1px solid var(--mint-solid); }
  .pill.soon { color: var(--amber); border: 1px solid var(--amber); }
  .status-row p { color: var(--ink-muted); font-size: 0.95rem; margin: 0; }

  footer {
    margin-top: clamp(3rem, 8vw, 4.5rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    font-size: 0.85rem;
    color: var(--ink-subtle);
  }

  @media (prefers-reduced-motion: no-preference) {
    .page > * { animation: rise 0.5s ease-out both; }
    .page > *:nth-child(2) { animation-delay: 0.04s; }
    .page > *:nth-child(3) { animation-delay: 0.08s; }
    @keyframes rise {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: none; }
    }
  }