/* ---------- Tokens (Extra-inspired: soft wash, white rounded cards, black and grey pill chips, one violet accent) ---------- */
:root{
  --bg:#F7F7F8; --side:#F1F1F3; --surface:#FFFFFF; --ink:#141416; --ink-2:#55555C; --muted:#8C8C94;
  --line:#E4E4E8; --hair:#EDEDF0; --fill:#F0F0F2; --fill-2:#E6E6E9;
  --solid:#1D1D20; --solid-ink:#FFFFFF; --accent:#5A2DF4; --accent-ink:#FFFFFF; --accent-tint:#F0EBFE;
  --wash-a:#FBE2D2; --wash-b:#D9E9F4;
  --shadow:0 1px 2px rgba(22,22,40,.04), 0 10px 30px rgba(22,22,40,.06);
  --shadow-pop:0 18px 48px rgba(22,22,40,.16), 0 2px 6px rgba(22,22,40,.06);
  --amber:#A15C00; --red:#C0342A; --red-tint:#FCEDEB; --green:#1B7F52; --green-tint:#E7F5EE;
  --font:"Figtree", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --r-card:26px; --r-group:22px; --gutter:16px; --fold-gap:24px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E0E10; --side:#141416; --surface:#1B1B1E; --ink:#F2F2F4; --ink-2:#B9B9C0; --muted:#86868E;
    --line:#2B2B30; --hair:#252529; --fill:#26262A; --fill-2:#313136;
    --solid:#F2F2F4; --solid-ink:#111113; --accent:#A08BFF; --accent-ink:#120B2A; --accent-tint:#231D3D;
    --wash-a:#2B1D16; --wash-b:#14212B;
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-pop:0 18px 48px rgba(0,0,0,.55);
    --amber:#E6A552; --red:#F07F70; --red-tint:#33201D; --green:#58C996; --green-tint:#15291F;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E0E10; --side:#141416; --surface:#1B1B1E; --ink:#F2F2F4; --ink-2:#B9B9C0; --muted:#86868E;
  --line:#2B2B30; --hair:#252529; --fill:#26262A; --fill-2:#313136;
  --solid:#F2F2F4; --solid-ink:#111113; --accent:#A08BFF; --accent-ink:#120B2A; --accent-tint:#231D3D;
  --wash-a:#2B1D16; --wash-b:#14212B;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-pop:0 18px 48px rgba(0,0,0,.55);
  --amber:#E6A552; --red:#F07F70; --red-tint:#33201D; --green:#58C996; --green-tint:#15291F;
}
/* In-app theme choice (Settings). Declared last so it wins over the host's theme in both directions. */
:root[data-app-theme="light"]{
  color-scheme:light;
  --bg:#F7F7F8; --side:#F1F1F3; --surface:#FFFFFF; --ink:#141416; --ink-2:#55555C; --muted:#8C8C94;
  --line:#E4E4E8; --hair:#EDEDF0; --fill:#F0F0F2; --fill-2:#E6E6E9;
  --solid:#1D1D20; --solid-ink:#FFFFFF; --accent:#5A2DF4; --accent-ink:#FFFFFF; --accent-tint:#F0EBFE;
  --wash-a:#FBE2D2; --wash-b:#D9E9F4;
  --shadow:0 1px 2px rgba(22,22,40,.04), 0 10px 30px rgba(22,22,40,.06);
  --shadow-pop:0 18px 48px rgba(22,22,40,.16), 0 2px 6px rgba(22,22,40,.06);
  --amber:#A15C00; --red:#C0342A; --red-tint:#FCEDEB; --green:#1B7F52; --green-tint:#E7F5EE;
}
:root[data-app-theme="dark"]{
  color-scheme:dark;
  --bg:#0E0E10; --side:#141416; --surface:#1B1B1E; --ink:#F2F2F4; --ink-2:#B9B9C0; --muted:#86868E;
  --line:#2B2B30; --hair:#252529; --fill:#26262A; --fill-2:#313136;
  --solid:#F2F2F4; --solid-ink:#111113; --accent:#A08BFF; --accent-ink:#120B2A; --accent-tint:#231D3D;
  --wash-a:#2B1D16; --wash-b:#14212B;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-pop:0 18px 48px rgba(0,0,0,.55);
  --amber:#E6A552; --red:#F07F70; --red-tint:#33201D; --green:#58C996; --green-tint:#15291F;
}

html,body{height:100%}
body{background:var(--bg); color:var(--ink); font:400 15px/1.5 var(--font); -webkit-font-smoothing:antialiased; overflow:hidden}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit; color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:10px}
.num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }

/* ---------- Shell ---------- */
.app{height:100%; display:flex; max-width:1600px; margin:0 auto; position:relative;
  background:radial-gradient(520px 300px at 8% -40px, var(--wash-a), transparent 70%), radial-gradient(620px 320px at 92% -60px, var(--wash-b), transparent 70%), var(--bg)}
.sidebar{display:none}
.panes{flex:1; min-width:0; min-height:0; display:grid; grid-template-columns:1fr; position:relative}
.pane{min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:8px var(--gutter) calc(120px + env(safe-area-inset-bottom,0px))}
.pane-inner{max-width:680px; margin:0 auto; container-type:inline-size}
.fold{display:none}
.detail-pane{display:none}
.app.detail-open .list-pane{display:none}
.app.detail-open .detail-pane{display:block}
.back{display:inline-grid; place-items:center; width:44px; height:44px; margin:12px 0 4px; border-radius:50%; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); color:var(--ink); cursor:pointer}
.back svg{width:20px; height:20px}

@media (min-width:600px){
  .panes{grid-template-columns:minmax(0,1fr) var(--fold-gap) minmax(0,1fr)}
  .fold{display:block; background:linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat}
  .list-pane,.detail-pane,.app.detail-open .list-pane,.app.detail-open .detail-pane{display:block}
  .list-pane{padding-right:12px} .detail-pane{padding-left:12px}
  .back{display:none}
}
@media (min-width:1080px){
  .sidebar{display:flex; flex-direction:column; gap:4px; width:248px; flex:none; background:var(--side); border-right:1px solid var(--line); padding:20px 14px}
  .panes{grid-template-columns:minmax(380px,520px) 1px minmax(0,1fr)}
  .fold{background:var(--line)}
  .list-pane{padding-left:28px; padding-right:24px; padding-bottom:48px} .detail-pane{padding-left:36px; padding-right:36px; padding-bottom:48px}
  .dock{display:none!important}
}
@media (horizontal-viewport-segments: 2){
  .panes{grid-template-columns:env(viewport-segment-width 0 0) calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)) env(viewport-segment-width 1 0)}
  .fold{background:none}
}

/* Sidebar */
.mark{display:flex; align-items:center; gap:10px; padding:4px 10px 22px; font-weight:800; font-size:18px; letter-spacing:-.01em}
.mark i{width:30px; height:30px; border-radius:50%; background:conic-gradient(from 200deg, #F5A36B, #EE6F8E, var(--accent), #F5A36B); -webkit-mask:radial-gradient(circle, transparent 7px, #000 7.5px); mask:radial-gradient(circle, transparent 7px, #000 7.5px)}
.nav{display:flex; align-items:center; gap:12px; min-height:46px; padding:0 14px; border:none; border-radius:14px; background:none; font-size:16px; font-weight:500; color:var(--ink); cursor:pointer; text-align:left; width:100%}
.nav svg{width:22px; height:22px; color:var(--ink-2); flex:none}
.nav:hover{background:var(--fill)}
.nav[aria-current="page"]{background:var(--fill-2); font-weight:600}
.nav[aria-current="page"] svg{color:var(--ink)}

/* Floating dock (phone and foldable) */
.dock{position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:15; display:flex; gap:4px; padding:5px; border-radius:999px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-pop)}
.dock .nav{min-height:44px; padding:0 16px; border-radius:999px; font-size:14px; gap:8px; width:auto}
.dock .nav svg{width:19px; height:19px}
.dock .nav[aria-current="page"]{background:var(--solid); color:var(--solid-ink)}
.dock .nav[aria-current="page"] svg{color:var(--solid-ink)}
@media (max-width:440px){ .dock .nav span{display:none} .dock .nav{padding:0 18px} }

/* ---------- Week header ---------- */
.week-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:26px 0 6px}
h1{white-space:nowrap; font-size:36px; line-height:1.05; letter-spacing:-.025em; font-weight:800; margin:0}
.dates{margin:6px 0 0; font-size:15px; font-weight:500; color:var(--muted)}
.sync{white-space:nowrap; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); font-size:13px; font-weight:600; cursor:pointer; color:var(--ink-2)}
.sync:disabled{cursor:default}
.sync .dot{width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none}
.sync[data-state="ok"] .dot{background:var(--green)}
.sync[data-state="stale"] .dot{background:var(--amber)}
.sync[data-state="error"] .dot{background:var(--red)}
.sync[data-state="busy"] .dot{background:var(--accent); animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}

/* Section headers: "Title (n) ────" */
.sec{margin-top:30px}
.sec-h{display:flex; align-items:center; gap:10px; margin:0 0 12px}
.sec-h h2{margin:0; font-size:17px; font-weight:600; letter-spacing:-.005em; white-space:nowrap}
.sec-h .count{color:var(--muted); font-weight:500}
.sec-h .rule{flex:1; height:1px; background:var(--line); min-width:24px}
.sec-h .aside{font-size:12px; color:var(--muted); white-space:nowrap}
.ws{margin-top:40px}
.ws-h{display:flex; align-items:center; gap:10px; margin:0 0 4px}
.ws-h h2{margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em}
.ws-h .count{font-size:15px; color:var(--muted); font-weight:500}
.ws-h .rule{flex:1; height:1px; background:var(--line)}
.ws-note{font-size:13px; color:var(--muted); margin:0 0 6px}
.sub{margin:22px 0 10px; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.quiet{color:var(--muted); font-size:14px; margin:4px 0}
.explain{color:var(--muted); font-size:14px; margin:-4px 0 8px; max-width:60ch}

.editable{display:block; width:100%; text-align:left; background:var(--surface); border:1px solid var(--hair); box-shadow:var(--shadow); border-radius:18px; padding:14px 18px; cursor:text; min-height:52px; color:var(--ink); font-size:16px; font-weight:500}
.editable:hover{border-color:var(--line)}
.editable.empty{color:var(--muted); font-weight:400}
.edit-input{width:100%; min-height:52px; padding:14px 18px; border:1.5px solid var(--accent); border-radius:18px; background:var(--surface); font-size:16px; outline:none}
.stack{display:grid; gap:8px}
.addrow{justify-self:start; border:none; background:none; color:var(--accent); font-weight:600; font-size:15px; min-height:44px; padding:0 4px; cursor:pointer}

.ledger{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px}
@container (max-width:360px){ .ledger{grid-template-columns:1fr} }
.tile{background:var(--surface); border:1px solid var(--hair); box-shadow:var(--shadow); border-radius:var(--r-group); padding:16px 18px}
.tile .n{font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.1}
.tile .l{font-size:14px; color:var(--muted); margin-top:2px}
.tile ul{margin:10px 0 0; padding:0; list-style:none; font-size:13px; color:var(--ink-2); display:grid; gap:2px}
.tile li{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pending-line{display:flex; gap:12px; align-items:center; font-size:14px; color:var(--muted); padding:16px 18px; border-radius:var(--r-group); border:1px dashed var(--line)}
.pending-line .dot{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none}

/* ---------- Cards ---------- */
.cards{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
.card{position:relative; padding:22px 24px 16px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-card); box-shadow:var(--shadow); cursor:pointer; transition:box-shadow .15s, transform .15s}
.card:hover{box-shadow:var(--shadow-pop)}
.card[aria-selected="true"]{box-shadow:0 0 0 2px var(--accent), var(--shadow)}
.card-top{display:flex; gap:12px; align-items:flex-start}
.title{flex:1; margin:0; font-size:18px; font-weight:700; line-height:1.3; letter-spacing:-.012em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.age{font-size:13px; font-weight:500; color:var(--muted); white-space:nowrap; background:none; border:none; padding:3px 0 0; cursor:pointer}
.age.warn{color:var(--amber)} .age.late{color:var(--red)}
.summary{margin:8px 0 0; font-size:15px; line-height:1.5; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.because{margin:10px 0 0; font-size:14px; color:var(--muted); display:flex; gap:6px 8px; align-items:center; flex-wrap:wrap}
.because.warn .why{color:var(--amber)} .because.late .why{color:var(--red)}
.st{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); font-weight:600; text-transform:capitalize}
.st::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--muted)}
.st[data-type="custom"]::before{background:var(--accent)}
.st[data-type="done"]::before,.st[data-type="closed"]::before{background:var(--green)}
.sep{color:var(--line)}
.sens-tag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-tint); padding:3px 9px; border-radius:999px}
.card-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:16px}
.chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.chip{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 18px; border-radius:999px; border:none; background:var(--fill); font-size:14px; font-weight:600; cursor:pointer; color:var(--ink); text-decoration:none}
.chip:hover{background:var(--fill-2)}
.chip.solid{background:var(--solid); color:var(--solid-ink)}
.chip.solid:hover{opacity:.88}
.more{min-width:44px; min-height:40px; border:none; background:none; border-radius:12px; color:var(--muted); font-size:15px; letter-spacing:.12em; cursor:pointer; font-weight:700}
.more:hover{background:var(--fill)}
.popover{position:absolute; right:14px; bottom:58px; z-index:6; background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-pop); padding:8px; min-width:240px}
.popover button{display:flex; align-items:center; width:100%; text-align:left; min-height:46px; padding:0 14px; border:none; background:none; border-radius:14px; cursor:pointer; font-size:15px; font-weight:500}
.popover button:hover{background:var(--fill)}
.popover hr{border:none; border-top:1px solid var(--line); margin:6px 8px}

/* ---------- Detail ---------- */
.detail{max-width:640px; padding-top:22px}
.eyebrow{font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); display:flex; gap:8px; align-items:center}
.detail h2{font-size:28px; line-height:1.2; letter-spacing:-.02em; font-weight:800; margin:10px 0 10px; text-wrap:balance}
.detail .ticket{font-size:16px; color:var(--ink-2); margin:0 0 6px}
.group-label{margin:28px 4px 8px; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.group{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group); box-shadow:var(--shadow); overflow:hidden}
.row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; min-height:54px; border-top:1px solid var(--hair)}
.row:first-child{border-top:none}
.row .k{color:var(--ink-2)} .row .v{text-align:right; font-weight:500}
.row .sub2{display:block; font-size:12px; color:var(--muted); font-weight:400}
.row.col{flex-direction:column; align-items:stretch; gap:4px}
.row .name{font-weight:600} .row .note{font-size:13px; color:var(--muted)}
.row .ok{color:var(--green); font-weight:600} .row .later{color:var(--muted); font-size:13px}
.fine{font-size:13px; color:var(--muted); margin:8px 4px 0}
.actions{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 4px}
.proposal{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-card); box-shadow:var(--shadow); padding:22px; margin:22px 0 4px}
.proposal p{margin:0}
.proposal .change{font-size:20px; font-weight:700; margin:8px 0 4px; letter-spacing:-.01em}
.confirm{display:block; width:100%; min-height:54px; margin-top:18px; border:none; border-radius:999px; background:var(--solid); color:var(--solid-ink); font-weight:700; font-size:16px; cursor:pointer}
.confirm:disabled{opacity:.5; cursor:default}
.decline{display:block; margin:10px auto 0; min-height:44px; padding:0 16px; border:none; background:none; color:var(--ink-2); font-weight:600; cursor:pointer}
.result{margin-top:14px; font-size:14px; padding:12px 16px; border-radius:16px}
.result.ok{background:var(--green-tint); color:var(--green)}
.result.err{background:var(--red-tint); color:var(--red)}
.statuspick{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px}
.history{list-style:none; margin:0; padding:6px 18px}
.history li{position:relative; padding:12px 0 12px 20px; font-size:14px; border-top:1px solid var(--hair)}
.history li:first-child{border-top:none}
.history li::before{content:""; position:absolute; left:0; top:19px; width:8px; height:8px; border-radius:50%; background:var(--accent)}
.history .when{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.empty-detail{height:100%; display:grid; place-items:center; text-align:center; color:var(--muted); padding:40px 16px}
.empty-detail strong{display:block; color:var(--ink); font-size:18px; margin-bottom:4px}
.banner{margin:14px 0 0; padding:14px 18px; border-radius:18px; font-size:14px; background:var(--fill); color:var(--ink-2)}
.banner.err{background:var(--red-tint); color:var(--red)}

/* Settings and Sources */
.seg{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; border-radius:999px; background:var(--fill)}
.seg button{min-height:44px; border:none; border-radius:999px; background:none; font-weight:600; color:var(--muted); cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.checks{list-style:none; margin:0; padding:4px 18px}
.checks li{display:flex; gap:12px; align-items:flex-start; padding:10px 0; font-size:15px}
.checks svg{width:20px; height:20px; color:var(--accent); flex:none; margin-top:2px}
.suggest{background:var(--accent-tint); border-radius:var(--r-group); padding:6px 18px}
.suggest .item{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid color-mix(in srgb, var(--accent) 14%, transparent)}
.suggest .item:first-child{border-top:none}
.suggest .item span{flex:1; color:var(--accent); font-weight:500}
.add{min-height:38px; padding:0 18px; border:none; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:700; cursor:pointer}
.discard{min-height:38px; padding:0 10px; border:none; background:none; color:var(--accent); font-weight:600; cursor:pointer; opacity:.8}

.toast{position:fixed; left:50%; bottom:calc(88px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--solid); color:var(--solid-ink); padding:12px 18px; border-radius:999px; font-size:14px; font-weight:500; max-width:calc(100% - 32px); z-index:20; box-shadow:var(--shadow-pop)}
@media (min-width:1080px){ .toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))} }
@media (max-width:1079px){ .detail h2{font-size:24px} }
@media (max-width:420px){ h1{font-size:32px} .card{padding:20px 20px 14px} .title{font-size:17px} .ledger{gap:8px} }

/* ---------- Phase 1a additions ---------- */
.head-actions{display:flex; gap:8px; align-items:center; flex:none}
.iconbtn{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; border:none; background:var(--solid); color:var(--solid-ink); box-shadow:var(--shadow); cursor:pointer; flex:none}
.iconbtn svg{width:20px; height:20px}
.src{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); background:var(--fill); padding:3px 9px; border-radius:999px}
.forced{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); background:color-mix(in srgb, var(--amber) 12%, transparent); padding:3px 9px; border-radius:999px}

/* Compact list rows (Today, proposals, pickers) */
.lrows{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group); box-shadow:var(--shadow); overflow:hidden}
.lrow{display:flex; gap:14px; align-items:flex-start; width:100%; text-align:left; padding:14px 18px; min-height:56px; border:none; border-top:1px solid var(--hair); background:none; cursor:pointer; color:var(--ink)}
.lrow:first-child{border-top:none}
.lrow:hover{background:var(--fill)}
.lrow .n{flex:none; width:24px; height:24px; border-radius:50%; background:var(--fill); display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--ink-2); margin-top:1px}
.lrow .body{flex:1; min-width:0}
.lrow .t{display:block; font-weight:600; font-size:16px; line-height:1.35}
.lrow .m{display:block; font-size:13px; color:var(--muted); margin-top:2px}
.lrow .m.warn{color:var(--amber)} .lrow .m.late{color:var(--red)}
.lrow.gone .t{text-decoration:line-through; color:var(--muted)}
.lrow .right{flex:none; font-size:13px; color:var(--muted); white-space:nowrap; padding-top:2px}
.lrow .chips{flex:none}
.lrow.static{cursor:default} .lrow.static:hover{background:none}

/* Agenda */
.agenda .when{flex:none; width:92px; font-size:14px; font-weight:600; color:var(--ink-2); padding-top:1px}
.agenda .cal{font-size:12px; color:var(--muted)}
.agenda .past .t,.agenda .past .when{color:var(--muted); font-weight:500}
.linkchip{display:inline-block; margin:6px 6px 0 0; font-size:12px; font-weight:600; color:var(--accent); background:var(--accent-tint); padding:3px 10px; border-radius:999px}

/* Capacity */
.strip{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:12px}
.strip .d{background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:10px 10px 12px; box-shadow:var(--shadow)}
.strip .d.today{box-shadow:0 0 0 2px var(--accent), var(--shadow)}
.strip .d.off{opacity:.55}
.strip .dn{font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.strip .bar{height:6px; border-radius:6px; background:var(--fill); margin:8px 0 6px; overflow:hidden}
.strip .bar i{display:block; height:100%; background:var(--solid); border-radius:6px}
.strip .h{font-size:13px; font-weight:600}

/* Forms */
.field{display:grid; gap:6px; margin-top:16px}
.field label{font-size:13px; font-weight:600; color:var(--ink-2)}
.field input,.field textarea{width:100%; min-height:50px; padding:13px 16px; border:1px solid var(--line); border-radius:16px; background:var(--surface); font-size:16px; outline:none}
.field textarea{min-height:96px; resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint)}
.pick{display:flex; flex-wrap:wrap; gap:8px}
.pick button{min-height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-weight:600; cursor:pointer; color:var(--ink-2)}
.pick button[aria-pressed="true"]{background:var(--solid); color:var(--solid-ink); border-color:var(--solid)}
.pick button:disabled{opacity:.4; cursor:not-allowed}

/* Week close */
.progress{height:8px; border-radius:8px; background:var(--fill); overflow:hidden; margin:14px 0 6px}
.progress i{display:block; height:100%; background:var(--accent); border-radius:8px; transition:width .2s}
.oc{padding:16px 18px; border-top:1px solid var(--hair)}
.oc:first-child{border-top:none}
.oc .t{font-weight:600; font-size:16px; line-height:1.35}
.oc .m{font-size:13px; color:var(--muted); margin:2px 0 10px}
.oc .m.warn{color:var(--amber)}
.oc .pick{gap:6px}
.oc .pick button{padding:0 13px; font-size:14px}
.oc input[type=date]{margin-top:10px; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.oc.undecided{background:color-mix(in srgb, var(--accent-tint) 45%, transparent)}

/* Summary */
.sumlist{list-style:none; margin:0; padding:4px 18px}
.sumlist li{padding:10px 0; border-top:1px solid var(--hair); font-size:15px}
.sumlist li:first-child{border-top:none}
.sumlist .m{display:block; font-size:13px; color:var(--muted)}
.banner.cta{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--accent-tint); color:var(--ink)}
.banner.cta strong{display:block}

/* Personal Today header (868m9rm8r) */
.today-head{display:block}
.today-head .top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; min-height:44px}
.today-head .who{display:flex; align-items:center; gap:12px; min-width:0}
.today-head .face{width:40px; height:40px; flex:none; border-radius:50%; object-fit:cover; background:var(--fill); box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--hair)}
.today-head .face.initial{display:grid; place-items:center; font-weight:700; font-size:17px; color:var(--accent-ink); background:var(--accent)}
.today-head .hello{margin:0 0 4px; font-size:16px; font-weight:600; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}