/* NURA Sprint 1: Today, Plan, Progress. Mobile-first (designed at ~360px), rem units so system text scaling works,
   44px minimum touch targets, state is never colour-only (icons + words). */
:root { --s1-ivory:#F7F4EC; --s1-forest:#174C3C; --s1-forest2:#22674F; --s1-gold:#C99A3D; --s1-gold-soft:#F3E4BD; --s1-ink:#1F2A24; --s1-mut:#5F5A40; --s1-line:#E3DCC4; --s1-card:#FFFFFF; --s1-danger:#A93222; }

.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
#today-root, #plan-root, #progress-root { position:relative; z-index:1; padding-bottom:1.5rem; }
#view-plan, #view-progress { position:relative; }

/* ---------- Today: header ---------- */
.td-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin:.25rem 0 1rem; }
.td-date { margin:0; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--s1-mut); }
.td-greet { margin:.15rem 0 .25rem; font-size:1.5rem; line-height:1.2; color:var(--s1-forest); }
.td-sub { margin:0; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.td-day, .td-ctx { font-size:.7rem; font-weight:800; letter-spacing:.06em; padding:.15rem .5rem; border-radius:999px; background:var(--s1-gold-soft); color:#6B4C10; }
.td-ctx { background:var(--s1-forest); color:#F6E8BE; }
.td-head-actions { display:flex; gap:.5rem; }
.td-icon, .td-avatar { width:2.75rem; height:2.75rem; border-radius:50%; border:1px solid var(--s1-line); background:var(--s1-card); color:var(--s1-forest); font:inherit; font-weight:800; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.td-icon svg { fill:none; stroke:currentColor; stroke-width:1.8; }
.td-avatar { background:var(--s1-forest); color:#F6E8BE; border-color:var(--s1-forest); }

/* ---------- Buttons ---------- */
.td-btn { min-height:2.75rem; padding:.6rem 1.1rem; border-radius:.9rem; border:1px solid transparent; font:inherit; font-size:1rem; font-weight:700; cursor:pointer; line-height:1.2; }
.td-btn-block { display:block; width:100%; margin-top:.6rem; }
.td-btn-sm { min-height:2.75rem; padding:.45rem .9rem; font-size:.9rem; }
.td-btn-primary { background:var(--s1-forest); color:#fff; }
.td-btn-soft { background:var(--s1-gold-soft); color:#4C3508; border-color:#E3CB86; }
.td-btn-outline { background:transparent; color:var(--s1-forest); border-color:var(--s1-forest); }
.td-btn-ghost { background:transparent; color:var(--s1-mut); border-color:transparent; text-decoration:underline; text-underline-offset:3px; }
.td-btn-danger { color:var(--s1-danger); border-color:var(--s1-danger); }
.td-btn:focus-visible, .td-link:focus-visible, .s1-chip:focus-visible, .pl-mini:focus-visible, .td-check:focus-visible, .td-step:focus-visible, .td-icon:focus-visible, .td-avatar:focus-visible { outline:3px solid var(--s1-gold); outline-offset:2px; }
.td-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.td-link { background:none; border:0; padding:.6rem .1rem; min-height:2.75rem; font:inherit; font-size:.9rem; font-weight:700; color:var(--s1-forest); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.td-link-inline { display:inline; padding:0; min-height:0; }

/* ---------- NURA Now: the one thing that wins ---------- */
.td-now { position:relative; border-radius:1.4rem; padding:1.25rem 1.25rem 1rem; color:#F7F0DC; background:linear-gradient(155deg,var(--s1-forest) 0%,var(--s1-forest2) 100%); box-shadow:0 .6rem 1.4rem rgba(23,76,60,.28); margin-bottom:.9rem; }
.td-now-label { margin:0 0 .35rem; font-size:.72rem; font-weight:800; letter-spacing:.14em; color:#E8CF8A; }
.td-now-title { margin:0; font-size:1.7rem; line-height:1.2; color:#fff; }
.td-now-sub { margin:.2rem 0 0; font-size:1.05rem; color:#EADFB9; }
.td-now-meta { display:flex; flex-wrap:wrap; gap:.4rem; margin:.7rem 0 .2rem; }
.td-chip { display:inline-block; padding:.25rem .65rem; border-radius:999px; background:rgba(255,255,255,.14); color:#F7F0DC; font-size:.85rem; font-weight:700; }
.td-chip-strong { background:#F0D78F; color:#3F2C05; }
.td-now-line { margin:.5rem 0 0; font-size:.98rem; line-height:1.45; color:#F2EAD0; }
.td-now .td-btn-primary { background:#F0C766; color:#2E2105; }
.td-now .td-btn-outline { color:#F7F0DC; border-color:rgba(247,240,220,.7); }
.td-now .td-btn-ghost { color:#E8DDB8; }
.td-now .td-btn-soft { background:#F0C766; color:#2E2105; border-color:#F0C766; }
.td-now .td-link { color:#F0D78F; }
.td-quiet { background:var(--s1-card); color:var(--s1-ink); box-shadow:none; border:1px solid var(--s1-line); }
.td-quiet .td-now-label { color:var(--s1-mut); }
.td-quiet .td-now-quiet { margin:.1rem 0 .5rem; font-size:1.1rem; color:var(--s1-ink); }
.td-quiet .td-btn-primary { background:var(--s1-forest); color:#fff; }
.td-quiet .td-btn-soft { background:var(--s1-gold-soft); color:#4C3508; }
.td-quiet .td-link { color:var(--s1-forest); }
.td-quiet .td-chip { background:var(--s1-gold-soft); color:#4C3508; }
.td-hint { margin-top:.9rem; padding:.7rem .8rem; border-radius:.9rem; background:rgba(255,255,255,.1); }
.td-quiet .td-hint { background:var(--s1-gold-soft); }
.td-hint-text { margin:0; font-size:.95rem; }
.td-noplan { margin:.7rem 0 0; font-size:.9rem; color:#E8DDB8; }
.td-why { margin-top:.5rem; padding:.8rem .9rem; border-radius:.9rem; background:rgba(255,255,255,.1); }
.td-why-title { margin:0 0 .4rem; font-size:.7rem; font-weight:800; letter-spacing:.12em; color:#E8CF8A; }
.td-why-list { margin:0; padding-left:1.1rem; font-size:.95rem; line-height:1.5; }
.td-why-list li { margin-bottom:.25rem; }
.td-timer { margin:.6rem 0 0; font-size:3rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.02em; color:#fff; }
.td-stepper { display:flex; align-items:center; gap:.75rem; margin:.8rem 0 0; }
.td-step { width:3rem; height:3rem; border-radius:50%; border:1px solid rgba(247,240,220,.7); background:transparent; color:#F7F0DC; font:inherit; font-size:1.4rem; font-weight:800; cursor:pointer; }
.td-step-count { font-size:1.05rem; font-weight:700; min-width:6rem; text-align:center; }
.td-pulse { animation:td-pulse 1.4s ease-out 2; }
@keyframes td-pulse { 0% { box-shadow:0 0 0 0 rgba(240,199,102,.7); } 100% { box-shadow:0 0 0 .9rem rgba(240,199,102,0); } }

/* ---------- Salah strip ---------- */
.td-salah { padding:.7rem .9rem; border-radius:1rem; background:var(--s1-card); border:1px solid var(--s1-line); margin-bottom:1rem; }
.td-salah-main { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.td-salah-text, .td-salah-line { font-size:.98rem; font-weight:700; color:var(--s1-forest); margin:0; }
.td-salah-foot { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.td-salah-note { font-size:.75rem; color:var(--s1-mut); }
.td-times { list-style:none; margin:0 0 .8rem; padding:0; }
.td-times li { display:flex; justify-content:space-between; padding:.45rem 0; border-bottom:1px solid var(--s1-line); font-weight:700; }
.td-explain-line { margin:.45rem 0; font-size:.92rem; line-height:1.5; }

/* ---------- Today Flow ---------- */
.td-flow { margin-bottom:1rem; }
.td-flow-head { display:flex; align-items:center; justify-content:space-between; }
.td-h { margin:0; font-size:1.05rem; color:var(--s1-forest); }
.td-flow-list { list-style:none; margin:.4rem 0 0; padding:0; }
.td-fr { display:grid; grid-template-columns:1.4rem 4.2rem 1fr auto; align-items:center; column-gap:.4rem; padding:.55rem .6rem; border-radius:.8rem; color:var(--s1-ink); min-height:2.75rem; }
.td-fr-icon { font-size:1rem; text-align:center; color:var(--s1-mut); }
.td-fr-time { font-size:.78rem; font-weight:700; color:var(--s1-mut); font-variant-numeric:tabular-nums; }
.td-fr-body { display:flex; flex-direction:column; min-width:0; }
.td-fr-name { font-size:.98rem; font-weight:600; overflow-wrap:anywhere; }
.td-fr-note { font-size:.78rem; color:var(--s1-mut); }
.td-fr-tag { margin-left:.4rem; font-size:.62rem; font-weight:800; letter-spacing:.08em; padding:.1rem .4rem; border-radius:999px; background:var(--s1-gold); color:#2E2105; vertical-align:middle; }
.td-fr-completed { color:var(--s1-mut); } .td-fr-completed .td-fr-icon { color:var(--s1-forest); font-weight:800; }
.td-fr-completed .td-fr-name { font-weight:500; }
.td-fr-current, .td-fr.is-now { background:var(--s1-gold-soft); border-left:4px solid var(--s1-gold); }
.td-fr-current .td-fr-icon { color:#8A5E0E; }
.td-fr-current .td-fr-name, .td-fr.is-now .td-fr-name { font-weight:800; }
.td-fr.is-next .td-fr-name { font-weight:700; }
.td-fr-moved { background:rgba(23,76,60,.06); } .td-fr-moved .td-fr-icon { color:var(--s1-forest); }
.td-fr-removed .td-fr-name { text-decoration:line-through; color:var(--s1-mut); }
.td-fr-collapsed { grid-template-columns:1fr; }
.td-check { width:2.75rem; height:2.75rem; border-radius:50%; border:2px solid var(--s1-forest); background:transparent; color:#fff; font-size:1.1rem; font-weight:800; cursor:pointer; }
.td-check.is-on { background:var(--s1-forest); }
.td-empty { margin:.6rem 0; font-size:.95rem; color:var(--s1-mut); }

/* ---------- Compact progress ---------- */
.td-progress { padding:.75rem .9rem; border-radius:1rem; background:var(--s1-card); border:1px solid var(--s1-line); }
.td-eyebrow { margin:0 0 .2rem; font-size:.7rem; font-weight:800; letter-spacing:.12em; color:var(--s1-mut); }
.td-prog-main { margin:0 0 .4rem; font-size:.98rem; font-weight:600; }
.td-pill { display:inline-block; padding:.2rem .65rem; border-radius:999px; font-size:.8rem; font-weight:800; }
.td-pill.is-ok { background:#DDEFE5; color:#14543B; } .td-pill.is-adjust { background:#FBE9C6; color:#6B4300; }

/* ---------- Sheets, chips, forms ---------- */
.s1-sheet-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.s1-sheet-head h2 { margin:0; font-size:1.2rem; }
.s1-sheet { max-height:88vh; overflow-y:auto; }
.s1-label { margin:.8rem 0 .3rem; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--s1-mut); display:block; }
.s1-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin:.3rem 0 .6rem; }
.s1-chip { min-height:2.75rem; padding:.5rem .95rem; border-radius:999px; border:1px solid var(--s1-line); background:#fff; color:var(--s1-ink); font:inherit; font-size:.92rem; font-weight:600; cursor:pointer; }
.s1-chip.is-on, .s1-chip[aria-checked="true"], .s1-chip[aria-pressed="true"] { background:var(--s1-forest); border-color:var(--s1-forest); color:#F6E8BE; }
.s1-check { display:flex; align-items:center; gap:.5rem; margin:.8rem 0; font-size:.95rem; min-height:2.75rem; }
.s1-check input { width:1.4rem; height:1.4rem; }
.s1-sheet .text-input { margin-bottom:.5rem; font-size:1rem; min-height:2.75rem; }

/* ---------- Plan + Progress ---------- */
.pl-head { margin:.25rem 0 1rem; }
.pl-title { margin:.1rem 0 .15rem; font-size:1.5rem; color:var(--s1-forest); }
.pl-hint { margin:.15rem 0 .5rem; font-size:.85rem; color:var(--s1-mut); line-height:1.45; }
.pl-sec { background:var(--s1-card); border:1px solid var(--s1-line); border-radius:1.1rem; padding:.9rem 1rem; margin-bottom:.9rem; }
.pl-h { margin:0 0 .4rem; font-size:1.02rem; color:var(--s1-forest); }
.pl-empty { margin:.3rem 0 .6rem; font-size:.92rem; color:var(--s1-mut); }
.pl-done { margin:0 0 .8rem; padding:.5rem .8rem; border-radius:.8rem; background:#DDEFE5; color:#14543B; font-weight:700; }
.pl-list { list-style:none; margin:0; padding:0; }
.pl-item { display:flex; align-items:center; gap:.6rem; padding:.55rem 0; border-bottom:1px solid var(--s1-line); }
.pl-item:last-child { border-bottom:0; }
.pl-item.is-off .pl-item-title { text-decoration:line-through; color:var(--s1-mut); }
.pl-item-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.pl-item-title { font-weight:700; font-size:.98rem; overflow-wrap:anywhere; } .pl-item-sub { font-size:.8rem; color:var(--s1-mut); }
.pl-check { width:1.5rem; height:1.5rem; flex:none; }
.pl-step { display:flex; align-items:center; gap:.3rem; } .pl-step .td-step { width:2.75rem; height:2.75rem; border-color:var(--s1-forest); color:var(--s1-forest); } .pl-step-n { font-size:.8rem; font-weight:700; min-width:4.5rem; text-align:center; }
.pl-mini { min-height:2.75rem; min-width:2.75rem; padding:.3rem .75rem; border-radius:.7rem; border:1px solid var(--s1-line); background:#fff; color:var(--s1-forest); font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; }
.pl-mini.is-on { background:var(--s1-forest); color:#F6E8BE; border-color:var(--s1-forest); }
.pl-add { min-height:2.75rem; margin-top:.5rem; padding:.5rem .9rem; border-radius:.8rem; border:1px dashed var(--s1-forest); background:transparent; color:var(--s1-forest); font:inherit; font-weight:700; cursor:pointer; }
.pl-inline { margin-top:.6rem; } .pl-inline-label { display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-weight:700; font-size:.92rem; }
.pl-time { width:auto; margin:0; }
.pl-row { display:flex; gap:.5rem; align-items:center; } .pl-row .text-input { flex:1; margin:0; }
.pl-notice { margin:.6rem 0 0; padding:.55rem .8rem; border-radius:.8rem; background:var(--s1-gold-soft); font-size:.92rem; }
.pl-proposal { margin-top:.7rem; padding:.8rem; border-radius:.9rem; border:2px solid var(--s1-gold); background:#FFF9EA; }
.pl-proposal-text { margin:0 0 .4rem; font-weight:700; } .pl-proposal-list { margin:0 0 .3rem; padding-left:1.1rem; font-size:.9rem; }
.pl-confirm { position:sticky; bottom:4.6rem; z-index:3; padding:.6rem 0 .2rem; background:linear-gradient(to top,var(--s1-ivory) 70%,rgba(247,244,236,0)); text-align:center; }
.pl-offsets { display:grid; grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr)); gap:.5rem; } .pl-off { display:flex; flex-direction:column; font-size:.8rem; font-weight:700; } .pl-off .text-input { margin:.2rem 0 0; }
.pl-learn-item { padding:.7rem 0; border-bottom:1px solid var(--s1-line); } .pl-learn-item:last-child { border-bottom:0; }
.pl-learn-text { margin:0; font-weight:700; } .pl-learn-actions { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.pl-learning { margin:.2rem 0; font-size:.92rem; color:var(--s1-mut); }
.pl-log summary { cursor:pointer; min-height:2.75rem; display:flex; align-items:center; } .pl-log-item { font-size:.78rem; padding:.2rem 0; color:var(--s1-mut); overflow-wrap:anywhere; }

@media (prefers-reduced-motion: reduce) { .td-pulse { animation:none; } }
@media (max-width: 380px) { .td-now-title { font-size:1.5rem; } .td-timer { font-size:2.6rem; } .td-fr { grid-template-columns:1.2rem 3.6rem 1fr auto; } }

/* visible tick circle is smaller than its 44px tap target */
.td-check { border:0; background:transparent; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.td-check .td-dot { width:1.55rem; height:1.55rem; border-radius:50%; border:2px solid var(--s1-forest); display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:800; color:#fff; line-height:1; }
.td-check.is-on { background:transparent; }
.td-check.is-on .td-dot { background:var(--s1-forest); }

/* Plan rows wrap on narrow screens: title + menu first, stepper underneath */
.pl-item { flex-wrap:wrap; }
.pl-item-main { flex:1 1 8rem; }
.pl-step { flex:1 0 100%; padding-left:2.1rem; }
#plan-root { padding-bottom:6.5rem; }