/* ══════════════════════════════════════════════════════════════════════════
   today.css — the phone's home screen (feature_mobile_today).

   Overview on a desktop lays the whole business out at once: a KPI band, a
   widget board, four charts and a BAS export. On a phone the question is
   narrower and more urgent — who owes me, and what needs sending — so below
   640px that board is replaced by three answers: what you are owed, the
   decisions waiting, and how the week went.

   Every figure is recomposed from data the page already loaded, so this cannot
   disagree with the desktop view. Loaded on demand by overview-page.js, and
   every rule sits inside the media query below, so a desktop with the flag on
   pays one small request and renders exactly as before.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* The wrap's desktop gutters and the list-head above are the page's, not
     this view's — Today is edge-to-edge with one gutter of its own. */
  .td { display: block; }
  .td-h {
    margin: var(--sp-1) 0 var(--sp-0_5);
    font: 800 26px var(--font-ui, 'Sora', system-ui, sans-serif);
    letter-spacing: -.03em; color: var(--app-text);
  }
  .td-d { margin: 0 0 var(--sp-3_5); font-size: 12.5px; color: var(--app-muted); }
  .td-lbl {
    margin: var(--sp-4) 0 var(--sp-2);
    font: 700 10.5px var(--font-ui, 'Sora', system-ui, sans-serif);
    letter-spacing: .11em; text-transform: uppercase; color: var(--app-muted);
  }

  /* ── the hero ───────────────────────────────────────────────────────────
     ONE FIGURE, AT A SIZE YOU CAN READ FROM A LADDER. Everything else on this
     screen is subordinate to it, which is the whole argument for replacing a
     four-tile KPI band: four equal numbers is four questions, not an answer. */
  .td-hero {
    background: var(--app-card); border: 1px solid var(--app-border);
    border-radius: 16px; padding: var(--sp-4) var(--sp-4) var(--sp-3_5);
    box-shadow: 0 2px 12px rgb(0 0 0 / 30%);
  }
  :root[data-theme="light"] .td-hero { box-shadow: 0 2px 10px rgb(15 23 42 / 7%); }
  .td-hero-k {
    font: 700 10.5px var(--font-ui, 'Sora', system-ui, sans-serif);
    letter-spacing: .11em; text-transform: uppercase; color: var(--app-muted);
  }
  .td-hero-v {
    margin-top: var(--sp-1_5);
    font-family: var(--num-font, 'Inter', system-ui, sans-serif); font-variant-numeric: tabular-nums;
    font-size: 37px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05;
    color: var(--app-text);
  }
  .td-hero-v small { font-size: 20px; font-weight: 600; opacity: .5; letter-spacing: -.02em; }
  .td-hero-split {
    display: flex; align-items: center; gap: var(--sp-2_5);
    margin-top: var(--sp-3); padding-top: var(--sp-3);
    border-top: 1px solid var(--app-border);
  }
  .td-od, .td-ok {
    display: inline-flex; align-items: center; gap: var(--sp-1_5);
    font-size: 13px; font-weight: 600; min-width: 0;
  }
  .td-od { color: var(--warn-soft, var(--app-warn)); }
  .td-ok { color: var(--ok-soft, var(--app-ok)); }
  .td-od b { font-family: var(--num-font, 'Inter', system-ui, sans-serif); font-variant-numeric: tabular-nums; }
  .td-chase {
    /* 44, not 40 — the audit caught this one of mine too. */
    margin-left: auto; flex: none; min-height: 44px;
    display: inline-flex; align-items: center;
    padding: 0 var(--sp-3_5); border-radius: 9px; text-decoration: none;
    background: var(--app-accent); color: var(--app-accent-fg);
    font: 700 12.5px var(--font-ui, 'Sora', system-ui, sans-serif); white-space: nowrap;
  }

  /* ── a decision ─────────────────────────────────────────────────────────
     The verb is the affordance, not a chevron: "Remind" and "Bill" say what
     happens next and a chevron says only that something does. The whole row is
     the target — the verb is a label on it, so there is no 40px hit area
     sitting inside a 64px one. */
  .td-act {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: 58px; padding: var(--sp-2_5) var(--sp-3);
    margin-bottom: var(--sp-1_5); border-radius: 13px; text-decoration: none;
    background: var(--app-card); border: 1px solid var(--app-border); color: var(--app-text);
  }
  .td-act:active { background: var(--app-card-hover); }
  .td-act-i {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; font-size: 17px;
  }
  .td-act-i.is-warn { background: rgb(245 158 11 / 14%); color: var(--warn-soft, var(--app-warn)); }
  .td-act-i.is-ok   { background: rgb(34 197 94 / 14%);  color: var(--ok-soft, var(--app-ok)); }
  .td-act-i.is-info { background: rgb(51 177 255 / 14%); color: var(--app-accent); }
  .td-act-m { flex: 1; min-width: 0; }
  .td-act-t {
    display: block; font-size: 13.5px; font-weight: 650; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .td-act-s {
    display: block; margin-top: var(--sp-0_5); font-size: 11.5px; color: var(--app-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .td-act-b {
    flex: none; color: var(--app-accent);
    font: 700 12px var(--font-ui, 'Sora', system-ui, sans-serif); white-space: nowrap;
  }
  .td-clear {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-3); border-radius: 13px;
    background: var(--app-card); border: 1px solid var(--app-border);
    color: var(--app-muted); font-size: 13px;
  }
  .td-clear i { color: var(--ok-soft, var(--app-ok)); font-size: 17px; }

  /* ── the week ───────────────────────────────────────────────────────────
     Seven days, not "this month": on a phone the useful horizon is the one you
     can still do something about. */
  .td-week {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-px);
    background: var(--app-border); border: 1px solid var(--app-border);
    border-radius: 13px; overflow: hidden;
  }
  .td-week > * {
    background: var(--app-card); padding: var(--sp-3) var(--sp-2_5);
    text-decoration: none; color: inherit; min-height: 64px;
  }
  .td-week i {
    display: block; margin-bottom: var(--sp-1); font-style: normal;
    font: 700 10.5px var(--font-ui, 'Sora', system-ui, sans-serif);
    letter-spacing: .07em; text-transform: uppercase; color: var(--app-muted);
  }
  .td-week b {
    font-family: var(--num-font, 'Inter', system-ui, sans-serif); font-variant-numeric: tabular-nums;
    font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; color: var(--app-text);
  }
  .td-week b.is-ok { color: var(--ok-soft, var(--app-ok)); }

  /* The page's own desktop chrome above the grid has nothing to say here: the
     title is Today's, and nobody exports a BAS from a phone.
     .wrap is in the selector to carry weight, not to narrow it: the canon sets
     `:root.books-v4 .list-head { display: flex }` at (0,3,0) and
     `html.nd-today .list-head` is only (0,2,1), so the header sat there through
     the whole of Today. Seventh rule this session to lose that way, and the
     first my own collision checker missed — because it read books.css and
     books-canon.css and this file was not on the list. It is now. */
  html.nd-today .wrap .list-head { display: none; }

  /* ── The skeleton ────────────────────────────────────────────────────────
     It borrows Today's own boxes — .td-hero, .td-act, .td-week — so the shape
     on screen while loading IS the shape that arrives.

     The bars take the canon's own .sk — a slow opacity pulse — rather than a
     shimmer of their own. An earlier cut here overrode it with a gradient after
     the collision checker reported .td .sk losing to :root.books-v4 .sk. It was
     losing, and that was correct: the canon's skeletons pulse, so a second
     idiom on one screen was the bug, not the thing it replaced. These two rules
     supply only what the canon cannot know — the size of a bar that has no
     content to give it one. */
  :root .td-act .sk.td-act-i { flex: none; width: 34px; height: 34px; }
  .td-act .td-act-m { flex: 1; min-width: 0; }
}