/* ============================================================
   Today — redesign (2026-07-02). Ported from the approved mockup.
   Uses the app's existing theme tokens so light/dark both work.
   Semantic colour: --cap (blue) = capture · --focus (violet) = act /
   right-now / start · --done (green) = done. Priority flag keeps the
   board's --action-deep so "important" reads the same everywhere.
   Namespaced .td- to avoid touching the old Today CSS.
   ============================================================ */
.td { --r: 16px; max-width: 1180px; padding-left: 40px; padding-right: 40px; }
@media (max-width: 900px) { .td { padding-left: 22px; padding-right: 22px; } }

/* header row + done pill */
.td-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.td-head h1 { font-family: var(--serif); font-weight: 400; font-size: 34px; margin: 0; letter-spacing: -.015em; }
.td-head .date { font-size: 14px; color: var(--ink-soft); font-weight: 500; }
.td-head .sp { flex: 1; }
.td-donepill { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--done-deep); background: color-mix(in srgb, var(--done) 12%, var(--paper)); border: 1px solid color-mix(in srgb, var(--done) 30%, var(--line)); border-radius: 99px; padding: 6px 13px; }
.td-donepill svg { color: var(--done); }

/* capture — first interactive thing, calm blue */
.td-capture { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1.5px solid color-mix(in srgb, var(--cap) 35%, var(--line)); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); margin-bottom: 18px; transition: border-color .12s, box-shadow .12s; }
.td-capture:focus-within { border-color: var(--cap); box-shadow: 0 0 0 4px var(--cap-wash); }
.td-capture .cp { color: var(--cap); flex: 0 0 auto; display: flex; }
.td-capture input { flex: 1; border: none; outline: none; background: none; font-family: var(--sans); font-size: 16px; color: var(--ink); padding: 2px 0; }
.td-capture input::placeholder { color: var(--ink-soft); }
.td-capture .mic { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 6px; border-radius: 8px; display: flex; }
.td-capture .mic:hover { color: var(--cap); background: var(--cap-wash); }
.td-capture .cbtn { border: 1px solid var(--line-strong); background: var(--muted); color: var(--ink-soft); font-family: var(--sans); font-size: 13px; font-weight: 600; border-radius: 9px; padding: 8px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.td-capture .cbtn:hover { border-color: var(--cap); color: var(--cap-deep); background: var(--cap-wash); }
.td-capture .cbtn:disabled { opacity: .5; cursor: default; }
.td-capdone { display: flex; align-items: center; gap: 9px; color: var(--done-deep); font-weight: 600; font-size: 16px; padding: 2px 0; }
.td-capdone svg { color: var(--done); }

/* capture + inbox share one row; capture grows, inbox chip sits to its right */
.td-caprow { display: flex; align-items: stretch; gap: 12px; margin-bottom: 16px; }
.td-caprow .td-capture { flex: 1; margin-bottom: 0; }
.td-inbox-chip { flex: 0 0 auto; align-self: center; border: 1px solid color-mix(in srgb, var(--cap) 35%, var(--line)); background: var(--cap-wash); color: var(--cap-deep); font-family: var(--sans); font-size: 13px; font-weight: 600; border-radius: 12px; padding: 10px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.td-inbox-chip:hover { border-color: var(--cap); }
@media (max-width: 640px) { .td-caprow { flex-wrap: wrap; } .td-inbox-chip { align-self: stretch; justify-content: center; } }

/* today's shape — one calm plain-language line */
.td-shape { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 6px 8px; font-size: 14.5px; color: var(--ink-soft); width: 100%; text-align: left; appearance: none; background: none; border: 1px solid transparent; border-radius: 10px; font-family: inherit; cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease; }
.td-shape:hover { background: var(--soft-05); border-color: var(--line); }
.td-shape:hover .ic { color: var(--focus-deep); }
.td-shape-go { margin-left: auto; color: var(--ink-faint); flex: 0 0 auto; display: flex; }

/* planned-for-today strip (mirrors the calendar Day Plan) */
.td-plan { border: 1px solid rgba(123,97,255,0.25); background: var(--focus-wash); border-radius: 12px; padding: 10px 13px; margin: 0 0 20px; }
.td-plan-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.td-plan-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--focus-deep); }
.td-plan-label svg { stroke: currentColor; }
.td-plan-note { font-size: 11.5px; color: var(--ink-soft); }
.td-plan-clear { margin-left: auto; font-size: 12px; color: var(--focus-deep); }
.td-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.td-plan-row { display: flex; align-items: baseline; gap: 9px; font-size: 13.5px; }
.td-plan-time { flex: 0 0 auto; min-width: 44px; font-weight: 600; color: var(--focus-deep); font-variant-numeric: tabular-nums; }
.td-plan-text { color: var(--ink); }
.td-plan-reason { color: var(--ink-soft); font-size: 12px; font-style: italic; }
.td-shape .ic { color: var(--ink-soft); flex: 0 0 auto; display: flex; }
.td-shape .txt b { color: var(--ink); font-weight: 600; }
.td-shape .txt .dim { color: var(--ink-soft); }

/* layout */
.td-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .td-grid { grid-template-columns: 1fr; } }
.td-col, .td-rail { display: flex; flex-direction: column; gap: 20px; }

/* one card */
.td-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px; }
.td-clabel { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.td-clabel svg { color: var(--ink-soft); }
.td-clabel .n { margin-left: auto; font-size: 12px; color: var(--ink-soft); font-weight: 500; }

/* focus card (violet = act) */
.td-focus { padding: 24px; border-color: var(--line-strong); position: relative; overflow: hidden; }
.td-focus::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--focus); }
.td-focus .kicker { font-size: 13px; font-weight: 600; color: var(--focus-deep); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.td-ford { width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--focus) 14%, var(--paper)); color: var(--focus-deep); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.td-focus .kicker .hi { color: var(--action-deep); display: inline-flex; align-items: center; gap: 6px; }
.td-focus .say { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 14px; max-width: 52ch; }
.td-focus .title { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -.01em; }
.td-focus .meta { font-size: 13px; color: var(--ink-soft); margin: 0 0 20px; }
.td-focus .acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.td-inprog { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--focus-deep); }
.td-inprog .pd { width: 9px; height: 9px; border-radius: 50%; background: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent); }

/* buttons */
.td-btn { border: none; font-family: var(--sans); font-weight: 600; cursor: pointer; border-radius: 11px; font-size: 16px; padding: 12px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter .12s, background .12s; }
.td-btn.primary { background: var(--focus-deep); color: var(--bg); }
.td-btn.primary:hover { filter: brightness(1.06); }
.td-btn.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); }
.td-btn.ghost:hover { background: var(--muted); color: var(--ink); }
.td-btn.sm { font-size: 13px; padding: 8px 14px; border-radius: 9px; }
.td-link { background: none; border: none; font-family: var(--sans); color: var(--ink-soft); font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 2px; display: inline-flex; align-items: center; gap: 6px; }
.td-link:hover { color: var(--focus-deep); }
.td-x { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 6px; border-radius: 8px; opacity: 0; transition: .12s; flex: 0 0 auto; display: flex; }
.td-x:hover { background: var(--muted); color: var(--ink); }

/* also on today */
.td-sec-h { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 0 2px; }
.td-sec-h .t { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.td-sec-h .note { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.td-sec-h .add { margin-left: auto; }
.td-addbtn { border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-soft); font-family: var(--sans); font-size: 13px; font-weight: 600; border-radius: 9px; padding: 7px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.td-addbtn:hover { border-color: var(--focus); color: var(--focus-deep); }
.td-unc { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.td-unc + .td-unc { margin-top: 12px; }
.td-unc:hover .td-x { opacity: 1; }
.td-unc .ord { width: 26px; height: 26px; border-radius: 8px; background: var(--muted); color: var(--ink-soft); font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.td-unc .ub { flex: 1; min-width: 0; }
.td-unc .ut { font-size: 16px; font-weight: 600; line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.td-unc .um { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.td-flag { color: var(--action-deep); flex: 0 0 auto; display: flex; }

.td-picker { margin-top: 12px; padding: 8px; }
.td-picker .ph { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 6px 10px 8px; }
.td-prow { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; cursor: pointer; }
.td-prow:hover { background: var(--muted); }
.td-prow .pt { flex: 1; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.td-prow .pm { font-size: 13px; color: var(--ink-soft); }
.td-prow .padd { color: var(--focus-deep); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }

/* rows (green = done) */
.td-ring { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--paper); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; transition: .14s; }
.td-ring:hover { border-color: var(--done); }
.td-ring.on { background: var(--done); border-color: var(--done); }
.td-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.td-row:first-of-type { border-top: none; }
.td-row .rt { flex: 1; font-size: 14px; font-weight: 500; }
.td-row .rm { font-size: 13px; color: var(--ink-soft); font-weight: 500; flex: 0 0 auto; }
.td-hint { font-size: 13px; color: var(--ink-soft); margin: -4px 0 6px; }
.td-repop { width: 100%; margin-top: 10px; border: 1px solid var(--line-strong); background: var(--muted); color: var(--ink-soft); font-family: var(--sans); font-size: 13px; font-weight: 600; border-radius: 10px; padding: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.td-repop:hover { border-color: var(--focus); color: var(--focus-deep); }
.td-qd { text-align: center; padding: 4px 0; color: var(--done-deep); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* done today — the reward */
.td-mom { background: linear-gradient(180deg, color-mix(in srgb, var(--done) 12%, var(--paper)), var(--paper) 64%); border-color: color-mix(in srgb, var(--done) 28%, var(--line)); }
.td-mom .td-clabel { color: var(--done-deep); }
.td-mom .td-clabel svg { color: var(--done); }
.td-celebrate { display: flex; align-items: center; gap: 15px; margin: 2px 0; }
.td-celebrate .num { font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: .85; color: var(--done-deep); }
.td-celebrate .ch { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.td-celebrate .cs { font-size: 13px; color: var(--ink-soft); margin-top: 1px; }
.td-dlist { margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--done) 20%, var(--line)); display: flex; flex-direction: column; gap: 2px; }
.td-drow { display: flex; align-items: center; gap: 11px; padding: 6px 0; font-size: 14px; color: var(--ink-soft); }
.td-drow .tk { width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--done) 16%, var(--paper)); color: var(--done-deep); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.td-drow .tx { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.td-mom .empty { font-size: 13px; color: var(--ink-soft); margin-top: 10px; }
.td-drow.more { color: var(--ink-soft); font-style: italic; }
.td-drow.more .tk { background: transparent; }

/* clear-day hero reuse */
.td-clear { text-align: center; padding: 26px 8px 18px; }
.td-clear .mk { width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--done) 16%, var(--paper)); color: var(--done); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.td-clear h4 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 6px; }
.td-clear p { font-size: 14px; color: var(--ink-soft); margin: 0 0 16px; }