/* Colour, type, radius and elevation tokens live in tokens.css (loaded first). Guide: docs/DESIGN.md. */

html,body{height:100%}
html{touch-action:manipulation} /* no double-tap zoom: quick taps are taps (868mfaapq) */
body{background:var(--bg); color:var(--ink); font:400 var(--t-body)/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)}
.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){
  .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}
}
@media (horizontal-viewport-segments: 2){
  .panes{grid-template-columns:calc(env(viewport-segment-width 0 0) - var(--rail-w)) calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)) env(viewport-segment-width 1 0)}
  .fold{background:none}
}

/* Navigation: icon rail at 600px and up (868mafgm0), floating dock below 600px */
.mark{display:flex; align-items:center; gap:10px; padding:4px 10px 22px; font-weight:800; font-size:var(--t-card); letter-spacing:-.01em}
.mark i{flex:none; width:30px; height:30px; border-radius:50%; background:conic-gradient(from 200deg, var(--brand-a), var(--brand-b), var(--accent), var(--brand-a)); -webkit-mask:radial-gradient(circle, transparent 7px, var(--mask) 7.5px); mask:radial-gradient(circle, transparent 7px, var(--mask) 7.5px)}
.nav{display:flex; align-items:center; gap:12px; min-height:46px; padding:0 14px; border:none; border-radius:var(--r-row); background:none; font-size:var(--t-lead); 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[aria-current="page"]{background:var(--fill-2); font-weight:600}
.nav[aria-current="page"] svg{color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .nav:hover{background:var(--fill)} .nav[aria-current="page"]:hover{background:var(--fill-2)} }

.sidebar,.scrim{display:none}
@media (min-width:600px){
  .sidebar{display:block; position:relative; flex:none; width:var(--rail-w); z-index:30; transition:width .18s ease}
  .rail{position:absolute; top:0; bottom:0; left:0; width:var(--rail-w); display:flex; flex-direction:column; gap:4px; padding:14px 12px; background:var(--side); border-right:1px solid var(--line); overflow:hidden; transition:width .18s ease, box-shadow .18s ease}
  .rail-top{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:48px; margin-bottom:14px}
  .rail .mark{padding:0 0 0 9px; white-space:nowrap}
  .rail .nav{padding:0 13px; white-space:nowrap}
  .rail .nav[aria-current="page"] svg{color:var(--accent)}
  .rail .lbl{opacity:0; transition:opacity .12s ease}
  .app:not(.rail-open):not(.rail-peek) .rail .mark{display:none}
  .app:not(.rail-open):not(.rail-peek) .rail-top{justify-content:center}
  .app.rail-open .rail,.app.rail-peek .rail{width:var(--rail-open); box-shadow:var(--shadow-pop)}
  .app.rail-open .rail .lbl,.app.rail-peek .rail .lbl{opacity:1}
  .app.rail-open .scrim{display:block; position:fixed; inset:0; z-index:25; background:var(--scrim)}
  .pane{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
}
/* 1080px and up the open rail pushes the content instead of covering it, and its state is remembered. */
@media (min-width:1080px){
  .app.rail-open .sidebar{width:var(--rail-open)}
  .app.rail-open .rail{box-shadow:none}
  .app.rail-open .scrim{display:none}
}

/* Floating dock (phone and foldable) */

/* ---------- 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:var(--t-display); line-height:1.05; letter-spacing:-.025em; font-weight:800; margin:0}
.dates{margin:6px 0 0; font-size:var(--t-body); font-weight:500; color:var(--muted)}

/* Sync pill (868mbky43 step 2): reads as a button, ↻ Sync plus the last-synced time; the icon carries the state. */
.sync{white-space:nowrap; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px 0 12px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--fill); box-shadow:var(--shadow); font-size:var(--t-small); cursor:pointer; color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .sync:hover:not(:disabled){background:var(--fill-2)} }
.sync:disabled{cursor:default}
.sync .ic{font-size:17px; line-height:1; font-weight:700; color:var(--ink); display:inline-block}
.sync .lbl{font-weight:700}
.sync .txt{font-size:var(--t-meta); font-weight:500; color:var(--muted)}
.sync[data-state="stale"] .ic{color:var(--amber)}
.sync[data-state="error"] .ic, .sync[data-state="error"] .txt{color:var(--red)}
.sync[data-state="busy"] .ic{color:var(--accent); animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sync[data-state="busy"] .ic{animation:none}}
/* Tap-to-expand explainers */
.info{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin-left:4px; vertical-align:middle; border:0; border-radius:50%; background:transparent; color:var(--muted); font-size:16px; cursor:pointer}
.info[aria-expanded="true"]{color:var(--accent); background:var(--accent-tint)}
.info::before{content:""; position:absolute; inset:-8px}
.info{position:relative}
.explainer{margin:8px 0 14px; padding:12px 14px; border-radius:var(--r-small); background:var(--accent-tint); color:var(--ink-2); font-size:var(--t-small); line-height:1.5}
@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:var(--t-h3); 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:var(--t-caption); color:var(--muted); white-space:nowrap}
.ws{margin-top:40px}

.sub{margin:22px 0 10px; font-size:var(--t-meta); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.quiet{color:var(--muted); font-size:var(--t-small); margin:4px 0}
.explain{color:var(--muted); font-size:var(--t-small); 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:var(--r-input); padding:14px 18px; cursor:text; min-height:52px; color:var(--ink); font-size:var(--t-lead); font-weight:500}
@media (hover:hover) and (pointer:fine){ .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:var(--r-input); background:var(--surface); font-size:var(--t-lead); outline:none}

.addrow{justify-self:start; border:none; background:none; color:var(--accent); font-weight:600; font-size:var(--t-body); 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:var(--t-stat); font-weight:800; letter-spacing:-.02em; line-height:1.1}
.tile .l{font-size:var(--t-small); color:var(--muted); margin-top:2px}
.tile ul{margin:10px 0 0; padding:0; list-style:none; font-size:var(--t-meta); color:var(--ink-2); display:grid; gap:2px}
.tile li{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tile.tap{display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; transition:box-shadow .15s}

.tile.tap[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent), var(--shadow)}
@media (hover:hover) and (pointer:fine){ .tile.tap:hover{box-shadow:var(--shadow-pop)} .tile.tap[aria-pressed="true"]:hover{box-shadow:0 0 0 2px var(--accent), var(--shadow-pop)} }
.pending-line{display:flex; gap:12px; align-items:center; font-size:var(--t-small); 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 ---------- */

.title{flex:1; margin:0; font-size:var(--t-card); font-weight:700; line-height:1.3; letter-spacing:-.012em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

 
.summary{margin:8px 0 0; font-size:var(--t-body); 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:var(--t-small); 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:var(--t-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-tint); padding:3px 9px; border-radius:var(--r-pill)}

.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:var(--r-pill); border:none; background:var(--fill); font-size:var(--t-small); font-weight:600; cursor:pointer; color:var(--ink); text-decoration:none}
@media (hover:hover) and (pointer:fine){ .chip:hover{background:var(--fill-2)} }
.chip.solid{background:var(--solid); color:var(--solid-ink)}
@media (hover:hover) and (pointer:fine){ .chip.solid:hover{opacity:.88} }

/* ---------- Detail ---------- */
.detail{max-width:640px; padding-top:22px}
.eyebrow{font-size:var(--t-meta); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); display:flex; gap:8px; align-items:center}
.detail h2{font-size:var(--t-detail); line-height:1.2; letter-spacing:-.02em; font-weight:800; margin:10px 0 10px; text-wrap:balance}
.detail .ticket{font-size:var(--t-lead); color:var(--ink-2); margin:0 0 6px}
.group-label{margin:28px 4px 8px; font-size:var(--t-meta); 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:var(--t-caption); 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:var(--t-meta); color:var(--muted)}
.row .ok{color:var(--green); font-weight:600} .row .later{color:var(--muted); font-size:var(--t-meta)}
.fine{font-size:var(--t-meta); color:var(--muted); margin:8px 0 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:var(--t-h2); 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:var(--r-pill); background:var(--solid); color:var(--solid-ink); font-weight:700; font-size:var(--t-lead); 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:var(--t-small); padding:12px 16px; border-radius:var(--r-field)}
.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:var(--t-small); 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:var(--t-caption); 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:var(--t-card); margin-bottom:4px}
.banner{margin:14px 0 0; padding:14px 18px; border-radius:var(--r-input); font-size:var(--t-small); 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:var(--r-pill); background:var(--fill)}
.seg.two{grid-template-columns:repeat(2,1fr); max-width:320px; margin-left:auto; margin-right:auto}

.seg button{min-height:44px; border:none; border-radius:var(--r-pill); 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:var(--t-body)}
.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:var(--r-pill); 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:var(--r-pill); font-size:var(--t-small); font-weight:500; max-width:calc(100% - 32px); z-index:20; box-shadow:var(--shadow-pop)}
@media (min-width:600px){ .toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))} }
@media (max-width:1079px){ .detail h2{font-size:var(--t-ws)} }
@media (max-width:420px){ h1{font-size:var(--t-h1-sm)}  .title{font-size:var(--t-h3)} .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:var(--t-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); background:var(--fill); padding:3px 9px; border-radius:var(--r-pill)}

/* 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}
@media (hover:hover) and (pointer:fine){ .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:var(--t-caption); 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:var(--t-lead); line-height:1.35}
.lrow .m{display:block; font-size:var(--t-meta); color:var(--muted); margin-top:2px}
/* 6 Oct clarity pass: the meta line stays neutral; urgency is a small worded tag (colour plus text, never colour alone) */
.lrow .m .ws{font-weight:700; color:var(--ink-2)}
.lrow .m.warn::before,.lrow .m.late::before{display:inline-block; font-size:var(--t-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-pill); margin-right:6px; vertical-align:1px}
.lrow .m.warn::before{content:"Soon"; color:var(--amber); background:var(--amber-tint)}
.lrow .m.late::before{content:"Late"; color:var(--red); background:var(--red-tint)}
.lrow.gone .t{text-decoration:line-through; color:var(--muted)}
.lrow .right{flex:none; font-size:var(--t-meta); 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:var(--t-small); font-weight:600; color:var(--ink-2); padding-top:1px}
.agenda .cal{font-size:var(--t-caption); color:var(--muted)}
.agenda .past .t,.agenda .past .when{color:var(--muted); font-weight:500}
.agenda .meet{cursor:default; align-items:center} .agenda .meet:hover{background:none}
.agenda .meet .when{align-self:flex-start; padding-top:3px}
.agenda .meet a.t{color:var(--ink); text-decoration:none}

@media (hover:hover) and (pointer:fine){ .agenda .meet a.t:hover{text-decoration:underline} }
.agenda .meet .chip.join{flex:none}

 

 
.agenda .notes{display:block}

 
  

/* 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:var(--r-field); 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:var(--t-caption); 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:var(--t-meta); font-weight:600}

/* Forms */
.field{display:grid; gap:6px; margin-top:16px}
.field label{font-size:var(--t-meta); 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:var(--r-field); background:var(--surface); font-size:var(--t-lead); 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:var(--r-pill); 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}

/* Summary */
.sumlist{list-style:none; margin:0; padding:4px 18px}
.sumlist li{padding:10px 0; border-top:1px solid var(--hair); font-size:var(--t-body)}
.sumlist li:first-child{border-top:none}
.sumlist .m{display:block; font-size:var(--t-meta); color:var(--muted)}

/* Comments (868mafgm6) */
.comments{list-style:none; margin:0; padding:4px 18px}
.comments li{padding:12px 0; border-top:1px solid var(--hair); display:grid; gap:4px}
.comments li:first-child{border-top:none}
.comments .who{font-size:var(--t-meta); font-weight:600; color:var(--ink-2); display:flex; gap:8px; align-items:baseline}
.comments .when{font-weight:400; color:var(--muted)}
.comments .txt{font-size:var(--t-body); white-space:pre-wrap; word-break:break-word}
.comment-box{margin-top:12px}

/* 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:var(--t-h3); color:var(--accent-ink); background:var(--accent)}
.today-head .hello{margin:0 0 4px; font-size:var(--t-lead); font-weight:600; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Sources and Settings as full pages (868mav43j item 1): one column at every width, no detail pane. */
.app.page-mode .panes{grid-template-columns:minmax(0,1fr) !important}
.app.page-mode .fold,.app.page-mode .detail-pane{display:none !important}
.app.page-mode .list-pane{display:block !important; padding-left:var(--gutter); padding-right:var(--gutter)}
@media (min-width:1080px){ .app.page-mode .list-pane{padding-left:36px; padding-right:36px} }

/* Week: Headline and Gating folded into one summary line once filled (868mav43j item 2). */

/* Fold inner and iPad portrait: pages get wider margins and a narrower column so rows don't stretch edge to edge. */
@media (min-width:600px) and (max-width:1079px){ .app.page-mode .list-pane{padding-left:32px; padding-right:32px} .app.page-mode .pane-inner{max-width:560px} }

/* Recurring ticket done for this cycle (868mav43j): ticked row under the open items. */
.lrow.done .n.tick{background:var(--green-tint); color:var(--green)}
.lrow.done .t{color:var(--ink-2)}

/* Close-out suggestions and bulk defer (868mav43j group C). */

.bulk{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; font-size:var(--t-small); color:var(--ink-2)}
.bulk input[type=date]{min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:var(--r-small); background:var(--surface); color:var(--ink)}
.linkbtn{border:none; background:none; padding:0; color:var(--accent); font:inherit; font-weight:600; cursor:pointer}
/* Feed list rule editor (868mbky43 step 1) */
.fe-f{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:var(--t-body); color:var(--ink-2)}
.fe-f input{width:88px; text-align:right}

/* Email cards (868m9jvqa, 30 Sept): envelope before the title and a sender line. The blue left edge was removed at his request. */
.mi{flex:none; width:18px; height:18px; color:var(--mail); vertical-align:-3px; margin-right:6px}

.sender{margin:4px 0 0; font-size:var(--t-meta); color:var(--mail); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sender .star{color:var(--amber)}
.lrow .t .mi{width:16px; height:16px; margin-right:6px; vertical-align:-2px}
.seg.kinds{max-width:360px; margin-top:16px; margin-left:auto; margin-right:auto}
.seg.kinds button{min-height:40px; font-size:var(--t-small)}
.fbpair{display:inline-flex; gap:8px; flex:none} /* 👍 and 👎 always wrap together */
.chip.fb{min-width:44px; padding:0 10px; font-size:16px}
.chip.fb[aria-pressed="true"]{background:var(--green-tint); box-shadow:inset 0 0 0 1px var(--green)}

/* Tile lists in the left pane (30 Sept): way back to Today or the week, and the open item's row */

.lrow[aria-current="true"]{background:var(--fill-2)}
.pin-tag{display:inline-block; font-size:var(--t-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); background:var(--fill-2); padding:3px 9px; border-radius:var(--r-pill)}

/* Today views (1 Oct): New tag on rows that arrived after the last ranking, Claude's reason under an
   email row, free slots inside the free-time tile (Tasks view), and the per-day Agenda labels. */
.newtag{display:inline-block; font-size:var(--t-micro); font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:1px 7px; border-radius:var(--r-pill); background:var(--accent-tint); color:var(--accent); vertical-align:1px}
.lrow .m.why{color:var(--ink-2)}
.lrow .m .warn{color:var(--amber)} .lrow .m .late{color:var(--red)}
.lrow .m .star{color:var(--amber)}
.tile .slots{margin-top:8px; font-size:var(--t-meta); color:var(--ink-2)}

/* Draft assistant (868mc2b93): the reply box reads like a message, the instruction row sits inline. */
.field textarea.dr-text{min-height:220px; line-height:1.5}
.dr-row{display:flex; gap:8px; align-items:center}
.dr-row input{flex:1; min-width:0}
.dr-row .chip{flex:none}

/* Notes from the Brief inbox on Week (868mcbvu5): the note's own words, wrapped, not a title. */
.lrow.note{text-decoration:none}
.lrow.note{align-items:center}
.lrow.note .t{font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; line-height:1.35}
.lrow.note[aria-current="true"]{background:var(--fill-2)}
.lrow.note:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

/* 868mda9v4: agenda tags in a meeting, follow-ups on Today */
.agpill{display:inline-block; font-size:var(--t-caption); font-weight:700; color:var(--accent); background:var(--accent-tint); padding:2px 9px; border-radius:var(--r-pill); margin-left:4px; white-space:nowrap; vertical-align:1px}
.lrow.follow .t::before{content:"↻ "; color:var(--muted); font-weight:600}

/* Edit in place (5 Oct 2026) */
.detail .editable[data-act="edit"]{cursor:text; border-radius:8px; margin-left:-6px; margin-right:-6px; padding-left:6px; padding-right:6px}
@media (hover:hover) and (pointer:fine){ .detail .editable[data-act="edit"]:hover{background:var(--edit-wash)} }
.detail .editbox{margin:10px 0 14px}
.detail .editbox input,.detail .editbox textarea{width:100%; font:inherit}
.detail .editbox #ed-name{font-size:var(--t-lead); font-weight:700}

/* "N to raise" line and overlay (5 Oct 2026) */
button.raise{display:flex; align-items:baseline; gap:8px; width:100%; margin-top:10px; padding:8px 12px; border:0; border-radius:12px; background:var(--accent-tint); color:var(--ink); font:inherit; text-align:left; cursor:pointer}

button.raise .rs{flex:1; min-width:0; font-size:var(--t-caption); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
button.raise .chev{color:var(--accent); font-weight:700}
@media (hover:hover) and (pointer:fine){ button.raise:hover{filter:brightness(.97)} }
#sheetHost[hidden]{display:none}
.sheet-back{position:fixed; inset:0; background:var(--sheet-scrim); z-index:60}
.sheet{position:fixed; z-index:61; left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px, calc(100vw - 32px)); max-height:min(80vh, 720px); overflow:auto; background:var(--surface); color:var(--ink); border-radius:20px; padding:20px; box-shadow:var(--shadow-sheet)}
.sheet-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:6px}
.sheet-head h3{margin:2px 0 2px; font-size:var(--t-lead); font-weight:800; line-height:1.25}
@media (max-width:599px){ .sheet{left:0; right:0; top:auto; bottom:0; transform:none; width:auto; max-height:85vh; border-radius:20px 20px 0 0} }

/* Search (5 Oct 2026) */
.searchbar{display:flex; align-items:center; gap:10px; margin:10px 0 6px}
.searchbar input{flex:1; min-width:0; font:inherit; padding:10px 14px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); color:var(--ink)}
#q-results:not(:empty){margin-bottom:14px}

/* Settings rethink (5 Oct): app-style rows that open a sub-page, a why-line under each section, red dot for problems. */
.set-why{margin:-2px 4px 10px; font-size:var(--t-small); color:var(--muted); line-height:1.45; max-width:60ch}
.detail > .set-why{margin:0 0 14px}
button.row.set-nav{width:100%; background:none; border:none; border-top:1px solid var(--hair); font:inherit; color:inherit; text-align:left; cursor:pointer}
.group > button.row.set-nav:first-child{border-top:none}
@media (hover:hover) and (pointer:fine){ button.row.set-nav:hover{background:var(--hover)} }
.set-nav .v{display:flex; align-items:center; gap:10px; flex:none}
.set-nav .chev{color:var(--muted); font-size:1.25em; line-height:1}
.dot-bad{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--red); margin-right:8px; vertical-align:middle}
.detail .chip.back{margin-left:-4px; width:auto; height:auto; min-width:0; padding:0 14px; border-radius:var(--r-pill); white-space:nowrap; position:static}
.detail .banner.err + .group, .detail .banner + .group{margin-top:12px}
.avatar{border-radius:50%; object-fit:cover; flex:none; display:inline-block}
.avatar.ini{display:inline-flex; align-items:center; justify-content:center; background:var(--accent-tint); color:var(--accent); font-weight:700; font-size:1.2em}
.profile-row{margin-top:18px} .prof{display:flex; align-items:center; gap:14px}
.prof-big{display:flex; justify-content:center; margin:6px 0 18px} .prof-big .avatar.ini{font-size:2.2em}
.row.col input{font:inherit; padding:10px 12px; border-radius:var(--r-input); border:1px solid var(--hair); background:var(--bg, transparent); color:inherit}
.set-nav .v, .row .v.ok{white-space:nowrap}
.badge{display:inline-flex; min-width:22px; height:22px; padding:0 7px; align-items:center; justify-content:center; border-radius:11px; background:var(--red); color:var(--badge-ink); font-size:var(--t-caption); font-weight:700}
button.banner.set-banner{display:flex; width:100%; justify-content:space-between; align-items:center; gap:12px; border:none; font:inherit; font-size:var(--t-small); font-weight:600; text-align:left; cursor:pointer; margin:10px 0 4px}
.add-name{color:var(--accent)} .acct-add input{margin-bottom:6px}

/* Search groups (868mafgnh) */
.q-h{margin:10px 4px 6px}

/* Report flags (868me7h93): the marker on a flagged note or ticket, and its menu and editor. */
.rtag{display:inline-flex; align-items:center; gap:4px; font-size:var(--t-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--report); background:var(--report-tint); padding:3px 9px; border-radius:var(--r-pill); vertical-align:2px; white-space:nowrap}
.rtag.sent{color:var(--muted); background:var(--fill)}
.flagpanel textarea{min-height:120px}
.flaghit{color:var(--amber); font-size:var(--t-small); margin-top:6px}
.flagcount{margin-top:4px; font-variant-numeric:tabular-nums}
.flagcount.over{color:var(--red); font-weight:600}
.flagcount.over::before{content:"Too long · "; font-weight:700}

.flagpanel .lrow[aria-pressed="true"] .n{background:var(--report-tint); color:var(--report)}
.lrow .m .rtag{margin-left:2px}
.chip[data-act="flag"][aria-pressed="true"]{color:var(--report); background:var(--report-tint)}

/* Note detail (6 Oct): the full note laid out for reading */
.note-h{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.lrow .m .rtag, .eyebrow .rtag{margin-left:6px}
.note-body{padding:18px 22px; font-size:var(--t-body); line-height:1.6; color:var(--ink)}
.note-body p{margin:0 0 6px; overflow-wrap:anywhere}
.note-body p.nb-gap{margin-top:14px}
.note-body .nb-h{margin:18px 0 6px; font-size:var(--t-meta); font-weight:700; letter-spacing:.06em; color:var(--muted)}
.note-body .nb-h:first-child{margin-top:0}
.note-body .nb-id{font-size:var(--t-caption); font-weight:600; color:var(--ink-2); background:var(--fill); padding:2px 7px; border-radius:var(--r-pill); font-variant-numeric:tabular-nums}
.nb-quote{display:block; margin-top:6px; font-size:var(--t-body); line-height:1.5; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere}
.flagpanel .eyebrow{margin-bottom:6px}
.nb-hint{font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); margin-left:6px}
.note-body .nb-line{display:block; width:100%; text-align:left; font:inherit; color:inherit; background:none; border:none; border-left:3px solid transparent; padding:6px 10px; margin:0 -13px 2px; width:calc(100% + 26px); border-radius:0 var(--r-small) var(--r-small) 0; cursor:pointer; overflow-wrap:anywhere; min-height:36px}
.note-body .nb-line.nb-gap{margin-top:12px}
@media (hover:hover) and (pointer:fine){ .note-body .nb-line:hover{background:var(--fill)} }
.note-body .nb-line[aria-pressed="true"]{background:var(--report-tint); border-left-color:var(--report)}
.rlines{display:flex; flex-direction:column; gap:6px; margin-top:6px}
.rpline{font-size:var(--t-small); color:var(--ink-2)} /* was .rline, which the result lines also use (868mn419d) */
.rtag.off{color:var(--muted); background:var(--fill)}
.note-st{flex:none; align-self:center; font-size:var(--t-meta); font-weight:600; color:var(--ink-2); background:var(--fill); padding:4px 10px; border-radius:var(--r-pill); text-transform:capitalize}
a.lrow{text-decoration:none; color:inherit}

.toast-act{margin-left:10px; font:inherit; font-weight:700; color:var(--solid-ink); background:none; border:none; text-decoration:underline; cursor:pointer; padding:6px 4px; min-height:32px}
.lrow .body.linkish{background:none; border:none; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer}
.lrow.done{align-items:center}
.lrow.done .n svg{width:14px; height:14px}
.lrows.wait .lrow.static{flex-direction:column; align-items:stretch; gap:10px}
.lrows.wait .chips{display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:440px}
.lrows.wait .chips .chip{justify-content:center; width:100%}
button.linkish{background:none; border:none; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer}
.ws-pick{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}

.chip:disabled{opacity:.45; cursor:not-allowed}
a.body.linkish{text-decoration:none}
/* Touch screens: no sticky hover (868mfaapq); a pressed row shows while the finger is down instead. */
@media (hover:none){ .lrow:not(.static):active {background:var(--fill)} }

/* Offline bar (868mfac1u). Text carries the level ("Offline", "Warning:"); the tint only supports it. */
.offline-bar{margin:12px 0 0; padding:12px 16px; border-radius:var(--r-input); font-size:var(--t-small); background:var(--fill); color:var(--ink); display:flex; flex-direction:column; gap:4px; border-left:4px solid var(--muted)}
.offline-bar strong{font-weight:600}
.offline-bar .sub{color:var(--ink-2)}
.offline-bar[data-level="note"]{border-left-color:var(--amber)}
.offline-bar[data-level="warn"]{background:var(--amber-tint); border-left-color:var(--amber)}
.sync[data-state="offline"] .ic{color:var(--muted)}

/* Waiting to send to ClickUp (868mfac1u release 2). */
.outbox{margin:12px 0 0; padding:12px 16px; border-radius:var(--r-input); background:var(--fill); font-size:var(--t-small); color:var(--ink)}
.outbox summary{cursor:pointer; min-height:var(--touch); display:flex; align-items:center}
.outbox ul{list-style:none; margin:8px 0 0; padding:0}
.outbox li{display:grid; gap:4px; padding:10px 0; border-top:1px solid var(--hair)}
.outbox li .m{color:var(--ink-2)}
.outbox li .chips{display:flex; gap:8px; flex-wrap:wrap}
.comments li.pending .when{font-style:italic}
label.chip{cursor:pointer; display:inline-flex; align-items:center; white-space:nowrap}
.v.chips{flex-wrap:nowrap}

/* Floating Add (10 Oct 2026): once the header's + has scrolled away, an Add button stays in reach
   at the bottom right of the list, above the dock on a phone. */
.fab{position:fixed; z-index:16; bottom:calc(16px + env(safe-area-inset-bottom,0px)); right:16px; display:inline-flex; align-items:center; gap:6px; min-height:52px; padding:0 18px 0 14px; border:none; border-radius:var(--r-pill); background:var(--solid); color:var(--solid-ink); font-size:var(--t-small); font-weight:600; box-shadow:var(--shadow-pop); cursor:pointer}
.fab svg{width:20px; height:20px; color:var(--solid-ink)}
.fab[hidden]{display:none}
@media (max-width:599px){ .fab{bottom:calc(84px + env(safe-area-inset-bottom,0px)); padding:0; width:52px; justify-content:center} .fab span{display:none} }
@media (min-width:600px){ .fab{bottom:calc(24px + env(safe-area-inset-bottom,0px))} }

/* Settings controls (0.85.2): quiet inputs, not the purple edit-in-place style. */
.row.ctlrow{height:auto; min-height:64px; padding-top:12px; padding-bottom:12px; gap:16px; align-items:center}
.row.ctlrow .lbl{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.row.ctlrow .name{font-weight:600; color:var(--ink)}
.row.ctlrow > .ctl, .row.ctlrow > .chip{flex:0 0 auto}
.row.ctlrow > .chip{white-space:nowrap}
.ctl{min-height:40px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-input); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--t-body); outline:none}
.ctl:focus-visible{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent)}
.ctl-time{width:9.5em}
.ctl-zone{max-width:12.5em; text-overflow:ellipsis}
@media (max-width:440px){ .row.ctlrow{flex-wrap:wrap} .row.ctlrow > .ctl, .row.ctlrow > .chip{margin-left:auto} }

/* Visually hidden, still read by screen readers (868mg6u4a) */
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.apwarn{color:var(--amber); font-weight:600}
/* Chief of staff on Today (868mg6u4a): Needs you tags say the reason in words; Handled for you is one card */
.esc-tag{display:inline-block; font-size:var(--t-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-pill); color:var(--amber); background:var(--amber-tint); vertical-align:1px; margin-right:2px}
.esc-tag.ask{color:var(--accent); background:var(--accent-tint)}

.kind-tag{display:inline-block; font-size:var(--t-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-pill); color:var(--ink-2); background:var(--fill-2); vertical-align:1px; margin-right:2px}
.aplists{margin-top:10px; display:flex; flex-direction:column; gap:6px}
.aplists .row{padding:6px 0}
.invlist{display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:6px}
.invlist .linkish{background:none; border:none; padding:0; font:inherit; color:var(--accent); cursor:pointer; text-align:left}
/* Today's calendar strip (12 Oct) */

.lrow.need.wait{flex-direction:column; align-items:stretch; gap:10px}
.lrow.need.wait > .body{background:none; border:none; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer}
.waitform{display:flex; flex-direction:column; gap:10px; max-width:440px}
.waitform .field{display:flex; flex-direction:column; gap:4px; font-size:var(--t-meta); color:var(--muted)}
.waitform input,.waitform select{font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--hair); border-radius:12px; padding:10px 12px; min-height:44px}
.waitform .chips{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* ---------- The shell (868mjj58w, PRD 0.7 R1; the only layout from 0.122.0) ----------
   index.html ships with data-shell="new" on <html>. Rail: Now, All work (the full list, once
   Today), Week, Reports, People, Search, then your photo for Settings. The frame itself (drawer,
   fixed rail, 600/840) is 868mjj58v. */
.shell-page{padding-top:8px}
.shell-page .greet{font-family:var(--font-head); font-size:var(--t-head-display); line-height:1.12; font-weight:var(--w-head); letter-spacing:-0.01em; margin:36px 0 8px; color:var(--ink)}
.shell-page .greet .nm{display:block}
.shell-page .today-date{font-size:var(--t-body); color:var(--muted); margin:0 0 24px}
.shell-page .building{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group); padding:18px 18px 16px; color:var(--ink-2)}
.shell-page .building h3{font-size:var(--t-h3); color:var(--ink); margin:0 0 6px}
.shell-page .building p{margin:0 0 12px; font-size:var(--t-body); overflow-wrap:anywhere}
/* Step 6 headings (868mjj58t): Newsreader for page and detail titles in the new shell; body,
   buttons, labels and section headers stay Figtree. */
:root[data-shell="new"] .shell-page h2,
:root[data-shell="new"] .detail > h2{font-family:var(--font-head); font-weight:var(--w-head); letter-spacing:-0.01em; line-height:1.15}
:root[data-shell="new"] .shell-page > h2{font-size:var(--t-head-display); margin:28px 0 16px}
:root[data-shell="new"] .detail > h2{font-size:var(--t-head-detail)}
/* All work and Week (once Today and Week, 0.122.0): the same Newsreader page title as Now. */
:root[data-shell="new"] .week-head h1{font-family:var(--font-head); font-weight:var(--w-head); letter-spacing:-0.01em; line-height:1.15}

/* ---------- New shell layout: drawer, fixed rail, 600/840 (868mjj58v, PRD 0.7 R1, 19 Oct 2026) ----------
   New shell only; v3 keeps the dock, the 72/248 rail and 600/1080. Rule 15: width classes, not
   devices. Under 600 a drawer opened from the menu button and one pane; 600 to 839 the fixed rail
   and one pane (detail replaces the list, Back returns to the same place); 840 and up two panes
   (list --list-w, detail column capped at --col-detail). With nothing open the list is one centred
   column; there is never a filler pane. Rule 16: fold and unfold keep the open item (the
   detail-open state survives the width change). */
:root[data-shell="new"] .rail-add,
:root[data-shell="new"] .rail-me{display:flex; align-items:center; border:none; background:none; cursor:pointer; color:var(--ink-2); font:inherit}
:root[data-shell="new"] .rail-me .avatar{flex:none}
:root[data-shell="new"] .rail-me svg{width:22px; height:22px; flex:none; color:var(--ink-2)}
:root[data-shell="new"] .rail .lbl,
:root[data-shell="new"] .rail-me .nm{overflow-wrap:anywhere; hyphens:auto}

/* Under 600: the drawer */
.menu-btn,.drawer-close{display:none}
@media (max-width:599px){
  :root[data-shell="new"] .menu-btn{display:grid; place-items:center; position:fixed; z-index:18; top:calc(env(safe-area-inset-top,0px) + 8px); left:8px; width:var(--touch); height:var(--touch); border-radius:50%; border:1px solid var(--hair); background:var(--surface); color:var(--ink); box-shadow:var(--shadow); cursor:pointer}
  :root[data-shell="new"] .menu-btn svg{width:22px; height:22px}
  :root[data-shell="new"] .app.detail-open .menu-btn{display:none}
  :root[data-shell="new"] .list-pane{padding-top:60px; padding-bottom:96px}
  :root[data-shell="new"] .sidebar{display:block; position:fixed; z-index:40; top:0; bottom:0; left:0; width:min(var(--drawer-w), calc(100vw - 56px)); transform:translateX(-104%); visibility:hidden; transition:transform .2s ease, visibility 0s linear .2s}
  :root[data-shell="new"] .app.drawer-open .sidebar{transform:none; visibility:visible; transition:transform .2s ease}
  :root[data-shell="new"] .rail{position:absolute; inset:0; display:flex; flex-direction:column; gap:2px; padding:calc(env(safe-area-inset-top,0px) + 8px) 10px calc(env(safe-area-inset-bottom,0px) + 16px); background:var(--side); box-shadow:var(--shadow-pop); overflow-y:auto}
  :root[data-shell="new"] .rail-top{display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:0 0 8px 4px}
  :root[data-shell="new"] .rail .mark{padding:0; font-family:var(--font-head); font-weight:var(--w-head); font-size:var(--t-ws)}
  :root[data-shell="new"] .drawer-close{display:grid; place-items:center; width:var(--touch); height:var(--touch); border:none; border-radius:50%; background:none; color:var(--ink-2); cursor:pointer}
  :root[data-shell="new"] .drawer-close svg{width:22px; height:22px}
  :root[data-shell="new"] .rail .nav{min-height:52px; padding:0 14px; gap:14px}
  :root[data-shell="new"] .rail .nav svg, :root[data-shell="new"] .rail .rail-me svg{width:20px; height:20px}
  :root[data-shell="new"] .rail .nav[aria-current="page"]{color:var(--accent)}
  :root[data-shell="new"] .rail .nav[aria-current="page"] svg{color:var(--accent)}
  :root[data-shell="new"] .rail-add{display:none}
  :root[data-shell="new"] .rail-me{margin-top:auto; gap:12px; min-height:56px; padding:6px 14px; border-radius:var(--r-row); color:var(--ink); font-size:var(--t-body)}
  :root[data-shell="new"] .app.drawer-open .scrim{display:block; position:fixed; inset:0; z-index:35; background:var(--scrim)}
  :root[data-shell="new"] .fab{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  :root[data-shell="new"] .toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:599px) and (prefers-reduced-motion:reduce){ :root[data-shell="new"] .sidebar{transition:none} }

/* 600 and up: the fixed labelled rail (no open, closed or peek) */
@media (min-width:600px){
  :root[data-shell="new"] .sidebar{width:var(--rail-fixed); transition:none}
  :root[data-shell="new"] .rail{width:var(--rail-fixed)!important; padding:12px 0 16px; align-items:center; gap:4px; box-shadow:none!important; overflow-y:auto}
  :root[data-shell="new"] .rail-top{display:none}
  :root[data-shell="new"] .rail .nav{flex-direction:column; justify-content:center; gap:4px; width:calc(var(--rail-fixed) - 10px); min-height:58px; padding:6px 2px; font-size:var(--t-caption); font-weight:600; color:var(--ink-2); white-space:normal}
  :root[data-shell="new"] .rail .nav[aria-current="page"]{color:var(--ink)}
  :root[data-shell="new"] .rail .lbl{opacity:1!important; max-width:100%; text-align:center; line-height:1.15}
  :root[data-shell="new"] .rail-add{flex-direction:column; justify-content:center; gap:2px; width:60px; min-height:60px; margin:0 0 14px; border-radius:18px; background:var(--solid); color:var(--solid-ink); font-size:var(--t-caption); font-weight:600}
  :root[data-shell="new"] .rail-add svg{width:22px; height:22px}
  :root[data-shell="new"] .rail-me{flex-direction:column; justify-content:center; gap:4px; margin-top:auto; width:calc(var(--rail-fixed) - 10px); padding:6px 2px; border-radius:var(--r-row); font-size:var(--t-caption); font-weight:600; text-align:center; line-height:1.15}
  :root[data-shell="new"] .rail-me[aria-current="page"]{background:var(--fill-2); color:var(--ink)}
  :root[data-shell="new"] .app.rail-open .scrim{display:none}
  :root[data-shell="new"] .fab{display:none!important}
}
@media (min-width:600px) and (hover:hover) and (pointer:fine){ :root[data-shell="new"] .rail-me:hover{background:var(--fill)} :root[data-shell="new"] .rail-add:hover{opacity:.88} }

/* 600 to 839: rail plus one pane */
@media (min-width:600px) and (max-width:839px){
  :root[data-shell="new"] .panes{grid-template-columns:minmax(0,1fr)}
  :root[data-shell="new"] .fold,
  :root[data-shell="new"] .detail-pane,
  :root[data-shell="new"] .app.detail-open .list-pane{display:none}
  :root[data-shell="new"] .app.detail-open .detail-pane{display:block}
  :root[data-shell="new"] .list-pane,
  :root[data-shell="new"] .detail-pane{padding-left:24px; padding-right:24px}
  :root[data-shell="new"] .back{display:inline-grid}
  :root[data-shell="new"] .pane-inner{max-width:600px}
}

/* 840 and up: two panes at most */
@media (min-width:840px){
  :root[data-shell="new"] .panes{grid-template-columns:var(--list-w) 1px minmax(0,1fr)}
  :root[data-shell="new"] .fold{display:block; background:var(--line)}
  :root[data-shell="new"] .list-pane{padding:8px 20px 48px}
  :root[data-shell="new"] .detail-pane{padding:8px 28px 48px}
  :root[data-shell="new"] .list-pane .pane-inner{max-width:none}
  :root[data-shell="new"] .back{display:none}
  /* Nothing open: the list is one centred column, never beside an empty pane. */
  :root[data-shell="new"] .app:not(.detail-open) .panes{grid-template-columns:minmax(0,1fr)}
  :root[data-shell="new"] .app:not(.detail-open) .fold,
  :root[data-shell="new"] .app:not(.detail-open) .detail-pane{display:none}
  :root[data-shell="new"] .app:not(.detail-open) .list-pane .pane-inner{max-width:600px}
}
/* Desktop (1.23.1, his 25 Oct check on the Mac): with an item open the two panes are even, as on
   the tablet, instead of a 460 px list beside a wide detail. */
@media (min-width:1100px){
  :root[data-shell="new"] .app.detail-open .panes{grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr)}
}
:root[data-shell="new"] .detail{max-width:var(--col-detail)}

/* ---------- Now: greeting and the day's calendar as one list (868mjj58z, PRD 0.7 R1, 19 Oct 2026) ----------
   One vertical list in one box: all-day events, earlier meetings folded behind one line, the one in
   progress, then the rest of the day. Time column, tinted kind icon, title and one meta line, one
   action at the right (Join, or Transcript on an earlier meeting). Nothing scrolls sideways; titles
   wrap; the action drops under the text when there's no room. */
.now-page .hello{display:flex; align-items:center; gap:16px; margin:36px 0 8px}
.now-page .hello .avatar{width:52px; height:52px}
.now-page .hello .avatar.ini{display:grid; place-items:center; background:var(--photo); color:var(--ink-2); font-weight:600; font-size:var(--t-card)}
.now-page .hello .greet{margin:0}
.now-page .now-cal{margin:4px 0 28px}
.cal-box{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group); box-shadow:var(--shadow); overflow:hidden}
.cal-row{display:grid; grid-template-columns:48px 32px minmax(0,1fr) auto; align-items:start; column-gap:10px; padding:12px 14px; border-top:1px solid var(--hair)}
.cal-box > :first-child{border-top:none}
.cal-tm{font-size:var(--t-meta); font-weight:600; color:var(--muted); padding-top:6px; overflow-wrap:anywhere; line-height:1.25}
.cal-row.allday .cal-tm{font-size:var(--t-caption); padding-top:7px}
.kico{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%}
.kico svg{width:16px; height:16px}
.kico.k-meet,.kico.k-call{background:var(--k-meet); color:var(--k-meet-ink)}
.kico.k-trv{background:var(--k-trv); color:var(--k-trv-ink)}
.kico.k-life{background:var(--k-life); color:var(--k-life-ink)}
.kico.k-home{background:var(--k-home); color:var(--k-home-ink)}
.cal-body{min-width:0; display:flex; flex-direction:column; gap:2px; padding-top:5px}
.cal-t{font-size:var(--t-lead); font-weight:600; line-height:1.3; color:var(--ink); text-decoration:none; overflow-wrap:anywhere}
a.cal-t{cursor:pointer}
.cal-sub{font-size:var(--t-meta); color:var(--muted); line-height:1.35; overflow-wrap:anywhere}
.cal-live{color:var(--ink); font-weight:600}
.cal-act{align-self:center; white-space:nowrap}
/* 868mkbfkj 1.14.2: Join and ••• side by side; the skip ask spans the text and action columns under the row. */
.cal-acts{align-self:center; display:flex; align-items:center; gap:6px}
.cal-acts .cal-act{align-self:auto}
.cal-more{min-width:40px; padding:0 10px; letter-spacing:1px; color:var(--ink-2)}
.cal-ask{grid-column:3 / -1; display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:8px}
.cal-ask .fine{margin:0; text-align:left}
.cal-row.past .cal-t{color:var(--ink-2); font-weight:500}

.cal-row.live .cal-live{color:var(--ink)}
.cal-fold{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:var(--touch); padding:10px 16px; border:none; border-top:1px solid var(--hair); background:none; font:inherit; font-size:var(--t-small); font-weight:600; color:var(--ink-2); text-align:left; cursor:pointer}
.cal-fold .chev{color:var(--muted)}
.cal-none{margin:0; padding:14px 16px; border-top:1px solid var(--hair); font-size:var(--t-small); color:var(--muted)}
.now-free{margin-top:10px}
.now-next-day{margin-top:22px}
@media (hover:hover) and (pointer:fine){ a.cal-t:hover{text-decoration:underline} .cal-fold:hover{background:var(--fill)} }
@media (max-width:419px){
  .cal-row{grid-template-columns:44px 28px minmax(0,1fr); padding:12px}
  .kico{width:28px; height:28px}
  .cal-act{grid-column:3; justify-self:start; margin-top:8px}
  .cal-acts{grid-column:3; justify-self:start; margin-top:8px}
  .cal-ask{grid-column:3}
}

/* Section headers on new shell pages stay Figtree (step 6: only page and detail titles are Newsreader). */
:root[data-shell="new"] .shell-page .sec-h h2{font-family:var(--font); font-size:var(--t-h3); font-weight:600; letter-spacing:-.005em; line-height:1.3; margin:0}

/* ---------- Decision cards on Now (868mjj58x, PRD 0.7 R1, 19 Oct 2026) ----------
   One card per decision, 26px radius: workstream and kind in words, the title (opens the item),
   Why now, If yes and If not, then Brief's pick as one solid verb with Other options and Not this
   as text buttons beside it. No ••• popover, no because line, no age badges: an escalated card
   says so in words in its kind line. Violet is only for the text buttons and focus. A tap turns
   the card into a result line saying where the change landed, with Undo. */
.now-page .now-dec{margin:0 0 28px}
/* A notification's section on Now (868mp7ejb): highlighted for 2 seconds after it scrolls into view. */
.now-sum{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group); padding:14px 16px; margin:0 0 16px; display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.now-sum-t{margin:0; font-size:16px; line-height:1.4; color:var(--ink)}
.now-cal.route-hl,.now-plan.route-hl,.now-tidy.route-hl,.now-dec.route-hl{outline:2px solid var(--accent); outline-offset:6px; border-radius:var(--r-small)}
.dc-list{display:flex; flex-direction:column; gap:12px}
.dcard{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-card); box-shadow:var(--shadow); padding:18px 20px 10px; display:flex; flex-direction:column; gap:6px; min-width:0}
.dc-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.dc-ws{display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:var(--r-pill); font-size:var(--t-micro); font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--fill); color:var(--ink-2)}
.dc-kind{font-size:var(--t-meta); color:var(--muted)}
.dcard.on{box-shadow:0 0 0 2px var(--accent), var(--shadow); border-color:transparent}
.dc-showing{margin-left:auto; font-size:var(--t-caption); font-weight:700; color:var(--accent)}
.dc-kind.esc{color:var(--amber); font-weight:600}
.dc-t{display:block; padding:0; border:none; background:none; font:inherit; font-size:var(--t-card); font-weight:700; line-height:1.3; color:var(--ink); text-align:left; overflow-wrap:anywhere}
button.dc-t{cursor:pointer}
.dc-why,.dc-iy{margin:0; font-size:var(--t-small); line-height:1.45; color:var(--ink-2); overflow-wrap:anywhere}
.dc-why b,.dc-iy b{color:var(--ink); font-weight:700}
.dc-acts{display:flex; align-items:center; flex-wrap:wrap; gap:2px; margin:6px -10px 0 0}
.dc-pick{min-height:var(--touch); max-width:100%; padding:0 18px; margin-right:2px; border:none; border-radius:var(--r-pill); background:var(--solid); color:var(--solid-ink); font:inherit; font-size:var(--t-body); font-weight:700; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dc-tl{min-height:var(--touch); padding:0 8px; border:none; background:none; font:inherit; font-size:var(--t-small); font-weight:600; color:var(--accent); cursor:pointer}
.dc-pick:disabled,.dc-tl:disabled,.dc-alt:disabled{opacity:.45; cursor:not-allowed}
.dc-more{overflow:hidden}
.dc-alts{display:flex; flex-direction:column; gap:6px; padding:4px 0 10px}
.dc-alt{width:100%; min-height:var(--touch); padding:8px 14px; border:1px solid var(--ctl); border-radius:var(--r-field); background:var(--surface); font:inherit; font-size:var(--t-small); font-weight:600; color:var(--ink); text-align:left; cursor:pointer}
.dc-q{margin:4px 0 0; font-size:var(--t-meta); color:var(--muted)}
.dc-reasons{display:flex; flex-wrap:wrap; gap:6px; padding:6px 0 10px}
.dcard .waitform{margin:6px 0 8px}
.dcard.dc-done{flex-direction:row; align-items:flex-start; gap:12px; padding:14px 12px 14px 18px}
@media (hover:hover) and (pointer:fine){ button.dc-t:hover{color:var(--accent)} .dc-alt:hover{border-color:var(--accent)} .dc-tl:hover{text-decoration:underline} }
@media (max-width:419px){ .dcard{padding:16px 16px 8px} .dc-t{font-size:var(--t-h3)} }

/* Item opened from a new shell page (his note on 0.104.1): on two panes a quiet header with the
   kind and a round Close at the right; one pane keeps the round Back. Escape closes it too. */
.dtop{display:none}
@media (min-width:840px){
  :root[data-shell="new"] .dtop{display:flex; align-items:center; gap:8px; min-height:52px; margin:8px 0 4px}
  .dtop-k{font-size:var(--t-meta); font-weight:600; color:var(--muted)}
  .dclose{margin-left:auto; display:inline-grid; place-items:center; width:var(--touch); height:var(--touch); border-radius:50%; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); color:var(--ink); cursor:pointer}
  .dclose svg{width:18px; height:18px}
}

/* ---------- Rows (868mjj58y step 1, PRD 0.7 R1, 19 Oct 2026) ----------
   Plan, chase, people and search rows in the new shell, replacing .lrow there. A kind slot (tinted
   kind icon, neutral work icon, or a photo with initials), the name as the one tap target, one meta
   line, a right slot. Box as the calendar list. The open item's row gets the selection ring (violet is
   selection) and "Showing"; nothing else on a row is coloured for state. */
.brows{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group); box-shadow:var(--shadow); overflow:hidden; container-type:inline-size}
.brow{display:grid; grid-template-columns:32px minmax(0,1fr) auto; column-gap:12px; align-items:start; padding:12px 16px; border-top:1px solid var(--hair); min-height:60px; position:relative}
.brows > .brow:first-child{border-top:none}
.brow .rk{width:32px; height:32px; border-radius:50%; display:inline-grid; place-items:center; flex:none; margin-top:2px}
.brow .rk svg{width:16px; height:16px}
.brow .rk.neutral{background:var(--fill); color:var(--ink-2)}
.brow .rk.ini{background:var(--photo); color:var(--ink-2); font-size:var(--t-caption); font-weight:700; letter-spacing:.02em}
.brow .rk.ph{overflow:hidden; background:var(--photo)}
.brow .rk.ph img{width:32px; height:32px; object-fit:cover; display:block}
.brow .rb{min-width:0; display:flex; flex-direction:column; gap:3px}
.brow .rt{display:block; width:100%; min-height:32px; padding:4px 0 0; margin:0; border:none; background:none; font:inherit; font-size:var(--t-lead); font-weight:600; line-height:1.3; color:var(--ink); text-align:left; text-decoration:none; overflow-wrap:anywhere}
.brow button.rt,.brow a.rt{cursor:pointer}
.brow .rt::after{content:""; position:absolute; inset:0} /* the whole row is the name's tap target */
.brow .rm{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:var(--t-meta); color:var(--muted); line-height:1.35; overflow-wrap:anywhere}
.brow .rws{display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:var(--r-pill); font-size:var(--t-micro); font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--fill); color:var(--ink-2)}
.brow .rs{font-size:var(--t-meta); color:var(--ink-2); line-height:1.4; overflow-wrap:anywhere}
.brow .rr{font-size:var(--t-meta); color:var(--muted); white-space:nowrap; padding-top:7px}
.brow .rr.on{color:var(--accent); font-weight:700; font-size:var(--t-caption)}
.brow.on{box-shadow:inset 3px 0 0 var(--accent)}
.brow.gone .rt{text-decoration:line-through; color:var(--muted)}
.brow .rb > :not(.rt){position:relative} /* links and buttons inside the body stay tappable over the row target */
.brow:focus-within{outline:none}
.brow .rt:focus-visible{outline:none}
.brow .rt:focus-visible::after{outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-group)}
@media (hover:hover) and (pointer:fine){ .brow:hover{background:var(--fill)} }
/* In a narrow box (a phone, or the list column on the open Fold) the right slot goes under the meta line, so the name keeps the width. */
@container (max-width:460px){ .brow .rr{grid-column:2; padding-top:2px} .brow .rr.on{grid-row:1; grid-column:3; padding-top:7px} }
@media (max-width:419px){ .brow{grid-template-columns:28px minmax(0,1fr) auto; column-gap:10px; padding:12px 14px} .brow .rk{width:28px; height:28px} .brow .rk.ph img{width:28px; height:28px} }
.now-page .now-plan{margin:0 0 28px}
/* Closing small lines (1.16.0): on the heading's edge, 10px under the section above (its 28px
   bottom margin collapses with -18px), the same gap as between small lines inside a section. */
.q-sec{margin-top:22px}
.brows.q-more{margin-top:14px}

/* ---------- Result lines (868mjj58y step 2) ----------
   What happened, to what, and where it landed, with Undo. In a row box it is a row; on its own (under
   a page heading, at the top of an item) it is a small box. The tick is the only colour: green tint for
   done, the fill for skipped or waiting, the red tint when nothing changed because something failed. */
.rline{display:flex; align-items:flex-start; gap:12px; padding:14px 12px 14px 16px; min-height:60px}
.brows > .rline{border-top:1px solid var(--hair)}
.brows > .rline:first-child{border-top:none}
.rl-stack,.rl-item{display:flex; flex-direction:column; gap:10px; margin:0 0 20px}
.rl-stack > .rline,.rl-item > .rline,.rline.rl-inline{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group); box-shadow:var(--shadow)}
.rline.rl-inline{margin:10px 0}
.rl-item{margin:6px 0 4px}
.rl-ok{flex:none; display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--green-tint); color:var(--green); margin-top:1px}
.rl-ok svg{width:16px; height:16px}
.rl-ok.skip,.rl-ok.wait{background:var(--fill); color:var(--ink-2)}
.rl-ok.err{background:var(--red-tint); color:var(--red)}
.rl-b{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:var(--t-small); line-height:1.45; color:var(--ink-2); overflow-wrap:anywhere}
.rl-b b{color:var(--ink); font-weight:700}
.rl-t{display:block; padding:0; border:none; background:none; font:inherit; color:var(--ink); text-align:left; overflow-wrap:anywhere}
button.rl-t{cursor:pointer}
.rl-w{color:var(--ink-2)}
.rl-undo{flex:none; align-self:center; min-height:var(--touch); padding:0 8px; border:none; background:none; font:inherit; font-size:var(--t-small); font-weight:600; color:var(--accent); cursor:pointer}
.rl-undo:disabled{opacity:.45; cursor:not-allowed}
@media (hover:hover) and (pointer:fine){ button.rl-t:hover{color:var(--accent)} .rl-undo:hover{text-decoration:underline} }

/* ---------- Draft block (868mjj58y step 3) ----------
   A real Gmail draft, labelled as one. On --bg inside a card or row so it reads as a quoted thing,
   not as Brief's own text. Collapsed: label, one line, Read draft · Edit here · Open in Gmail.
   Opened in the item: the text box, its save status, then Ask Brief to rewrite. */
.dblock{background:var(--bg); border:1px solid var(--hair); border-radius:var(--r-field); padding:10px 14px; margin:6px 0 2px; font-size:var(--t-small); color:var(--ink); min-width:0}
.dblock.open{background:var(--surface); border-radius:var(--r-group); box-shadow:var(--shadow); padding:16px 16px 14px; margin:4px 0 16px}
.db-l{margin:0 0 4px; font-size:var(--t-meta); font-weight:600; color:var(--muted); overflow-wrap:anywhere}
.dblock.open > .db-l{font-size:var(--t-small); color:var(--ink-2); margin-bottom:10px}
.db-t{margin:0; font-size:var(--t-small); line-height:1.45; color:var(--ink); overflow-wrap:anywhere}
.db-t.clamp{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.db-t.full{white-space:pre-wrap}
.db-t.muted{color:var(--muted)}
.db-a{display:flex; flex-wrap:wrap; align-items:center; margin:2px -8px -4px}
.db-dot{color:var(--muted)}
.db-tl{min-height:40px; padding:0 8px; border:none; background:none; font:inherit; font-size:var(--t-small); font-weight:600; color:var(--accent); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center}
.db-tl:disabled{opacity:.45; cursor:not-allowed}
.db-tl.warn{color:var(--red)}
.db-lab{display:block; margin:10px 0 6px; font-size:var(--t-meta); font-weight:600; color:var(--ink-2)}
.dblock.open > .db-lab:first-of-type{margin-top:0}
.db-text{display:block; width:100%; box-sizing:border-box; min-height:96px; padding:10px 12px; border:1px solid var(--ctl); border-radius:var(--r-field); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--t-body); line-height:1.5; resize:vertical}
.db-status{margin:6px 2px 2px}
.db-status.err{color:var(--red)}
.db-rw{margin-top:12px; padding-top:12px; border-top:1px solid var(--hair)}
.db-rwt{margin:0 0 8px; font-size:var(--t-small); font-weight:600; color:var(--ink)}
.db-chips{display:flex; flex-wrap:wrap; gap:6px}
/* Chase panel (868mfaapv, 1.16.0): recipients as chips with a remove button; inputs like the rewrite box. */
.ch-panel .dr-row{margin-top:8px}
.ch-panel .dr-row input{flex:1; min-width:0; min-height:var(--touch); padding:0 14px; border:1px solid var(--ctl); border-radius:var(--r-pill); background:var(--surface); color:var(--ink); font:inherit}
.ch-panel .db-text{margin-top:0}
.ch-to{gap:6px; max-width:100%}
.ch-to .sub2{color:var(--muted); overflow:hidden; text-overflow:ellipsis}
.ch-x{border:0; background:none; color:var(--muted); font:inherit; font-size:18px; line-height:1; padding:0 2px; min-width:24px; min-height:24px; cursor:pointer}
.ch-x:hover{color:var(--ink)}
.ch-line{margin:0 0 8px}
.ch-prop{margin:12px 0 0; padding:12px 14px; border:1px solid var(--hair); border-radius:var(--r-group); background:var(--surface)}
.ch-prop .dc-acts{margin-top:10px}
.db-rw .dr-row{display:flex; gap:8px; align-items:center}
.db-rw .dr-row input{flex:1; min-width:0; min-height:var(--touch); padding:0 14px; border:1px solid var(--ctl); border-radius:var(--r-pill); background:var(--surface); color:var(--ink); font:inherit}
.db-back{margin:6px 0 0 -8px}
.db-fine{margin:12px 2px 0}
.db-seg{margin:12px 0 4px}
.db-acts{display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-top:10px}
.dcard .dblock{margin-top:8px}
.brow .dblock{margin-top:6px}
@media (hover:hover) and (pointer:fine){ .db-tl:hover{text-decoration:underline} }
.db-seg{display:flex} .db-seg button{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---------- Item detail in the new shell (868mjj594, PRD 0.7 R1) ----------
   The Item artboard on the step 6 skin. Only drawn with the switch on (.idv), so v3's detail is
   untouched. Violet only for interaction: text buttons, links, focus, and the status he is about
   to move to. */
.idv{padding-top:6px}
.idv-head{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:4px 0 8px}
.idv-kind{font-size:var(--t-meta); font-weight:600; color:var(--muted)}
.idv-sens{display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:var(--r-pill); background:var(--fill); color:var(--ink-2); font-size:var(--t-micro); font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.idv-sens svg{width:12px; height:12px}
.idv-t{margin:4px 0 6px; font-family:var(--font-head); font-weight:var(--w-head); font-size:var(--t-head-detail); line-height:1.15; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; overflow-wrap:anywhere}
.idv-t[data-act="edit"]{cursor:text; border-radius:8px; margin-left:-6px; margin-right:-6px; padding:0 6px}
.idv-orig{margin:0 0 4px; font-size:var(--t-meta); color:var(--muted); overflow-wrap:anywhere}
.idv-because{margin:8px 0 0; font-size:var(--t-small); line-height:1.45; color:var(--ink-2)}
.idv-note2{margin:8px 0 0; font-size:var(--t-small); color:var(--ink-2)}
.idv-acts:empty{display:none}
.idv-acts > .actions:first-child{margin-top:16px}
.idv-box{margin:16px 0 0; padding:2px 16px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group); box-shadow:var(--shadow)}
.idv-kv{display:flex; gap:12px; padding:11px 0; border-top:1px solid var(--hair); font-size:var(--t-small); line-height:1.4; min-width:0}
.idv-kv:first-child{border-top:none}
.idv-kv .k{flex:none; width:96px; color:var(--ink-2); font-size:var(--t-meta); padding-top:1px}
.idv-kv .v{flex:1; min-width:0; color:var(--ink); overflow-wrap:anywhere}
.idv-kv .sub2{display:block; font-size:var(--t-meta); color:var(--muted)}
.idv-tags{display:flex; flex-wrap:wrap; gap:6px}
.idv-tag{display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:var(--r-pill); background:var(--fill); color:var(--ink-2); font-size:var(--t-micro); font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.idv-l{display:flex; align-items:center; gap:10px; margin:28px 0 12px; font-family:var(--font); font-size:var(--t-h3); font-weight:600; color:var(--ink)}
.idv-l::after{content:""; flex:1; height:1px; background:var(--line); order:2}
.idv-l small{order:3; font-size:var(--t-meta); font-weight:500; color:var(--muted)}
.idv-seg{display:flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:var(--r-pill); background:var(--fill)}
.idv-seg.many{border-radius:var(--r-field)}
.idv-seg.as-is button{text-transform:none} /* lengths ("15 min", "1 h") keep their case; statuses are capitalised (868mnxt8g) */
.idv-seg button{flex:1 1 auto; min-width:min(30%, 120px); min-height:40px; padding:0 12px; border:none; border-radius:var(--r-pill); background:none; font:inherit; font-size:var(--t-small); font-weight:600; color:var(--ink-2); text-transform:capitalize; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.idv-seg button.on{background:var(--raised); color:var(--ink); box-shadow:var(--shadow), inset 0 0 0 1px var(--line); cursor:default}
.idv-seg button.to{box-shadow:inset 0 0 0 2px var(--accent); color:var(--ink)}
.idv-seg button:disabled:not(.on):not(.to){opacity:.55; cursor:not-allowed}
.idv .proposal{margin:12px 0 4px}
.idv .fine{margin:8px 4px 0}
.idv-warn{margin:0 0 10px; padding:10px 14px; border-radius:var(--r-field); background:var(--amber-tint); color:var(--ink); font-size:var(--t-small)}
.idv-tl{display:inline-flex; align-items:center; min-height:var(--touch); padding:0 8px; margin:4px 0 0 -8px; border:none; background:none; font:inherit; font-size:var(--t-small); font-weight:600; color:var(--accent); cursor:pointer; text-decoration:none}
.idv .brows + .idv-tl{margin-top:6px}
.brow.has-aside{grid-template-columns:32px minmax(0,1fr) auto auto}
.brow .ra{position:relative; z-index:1; align-self:center; min-height:var(--touch); padding:0 4px 0 8px; border:none; background:none; font:inherit; font-size:var(--t-small); font-weight:600; color:var(--accent); cursor:pointer}
.idv-note{padding:14px 16px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group); box-shadow:var(--shadow); font-size:var(--t-small); line-height:1.5; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; max-height:16em; overflow:auto}
.idv-note.idv-ed{cursor:text}
.idv .group-label{margin:18px 2px 8px; font-size:var(--t-meta); font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink-2)}
.idv .comment-box{margin-top:12px}
.idv .comment-box textarea{border-color:var(--ctl)}
.idv-hist{list-style:none; margin:0; padding:2px 16px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group); box-shadow:var(--shadow)}
.idv-h{display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--hair); font-size:var(--t-small); color:var(--ink); line-height:1.4}
.idv-h:first-child{border-top:none}
.idv-h .grow{flex:1; min-width:0; overflow-wrap:anywhere}
.idv-h .sub2,.idv-h .when{display:block; font-size:var(--t-meta); color:var(--muted)}
.idv-h .chip{min-height:36px; padding:0 8px; background:none; color:var(--accent)}
.idv-foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:28px 0 12px; padding-top:10px; border-top:1px solid var(--hair); font-size:var(--t-meta); color:var(--muted)}
.idv-foot .grow{flex:1; min-width:0}
.idv-foot .idv-tl{margin:0; padding-right:0}
@media (hover:hover) and (pointer:fine){ .idv-tl:hover,.brow .ra:hover{text-decoration:underline} .idv-seg button:not(.on):not(:disabled):hover{background:var(--fill-2)} .idv-t[data-act="edit"]:hover{background:var(--fill)} }
@media (max-width:419px){ .idv-kv .k{width:76px} }

/* ---------- Actions and Search in the new shell (868mjj594 step 2) ---------- */
.idv-act{display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; margin:16px 0 0}
.idv-act .dc-pick{margin-right:6px}
.idv-act .dc-tl[aria-pressed="true"]{color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px}
.idv-note2 .chip{min-height:36px; padding:0 6px; background:none; color:var(--accent); font-weight:600}
.q-lab{display:block; margin:0 2px 8px; font-size:var(--t-meta); color:var(--muted)}
.q-bar{display:flex; align-items:center; gap:4px}
.q-bar input{flex:1; min-width:0; min-height:48px; padding:0 18px; border:1px solid var(--ctl); border-radius:var(--r-pill); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--t-lead)}
.q-bar input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint)}
.q-chips{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px}
.q-chip{min-height:40px; padding:0 14px; border:none; border-radius:var(--r-pill); background:var(--fill); color:var(--ink); font:inherit; font-size:var(--t-small); font-weight:600; cursor:pointer}
.q-chip[aria-pressed="true"]{background:var(--solid); color:var(--solid-ink)}
.q-id{margin:20px 2px 0}
@media (hover:hover) and (pointer:fine){ .q-chip[aria-pressed="false"]:hover{background:var(--fill-2)} }
.idv-act.idv-more{margin-top:0; padding-left:2px}

/* ---------- Longer text (868mjj595): found with the pseudo-translation pass at 412 wide ----------
   Section headers and their asides wrap instead of clipping; the greeting breaks inside a long word. */
:root[data-shell="new"] .sec-h h2{white-space:normal; min-width:0; overflow-wrap:anywhere}
:root[data-shell="new"] .sec-h .aside{white-space:normal; flex:0 1 auto; min-width:0; text-align:right}
:root[data-shell="new"] .greet{min-width:0; white-space:normal; overflow-wrap:anywhere}

/* ---------- The open item on the old Today, in the new shell (his Fold check, 19 Oct 2026) ----------
   The row he opened shows it: a violet bar on its left edge (selection), as the new rows do. */
:root[data-shell="new"] .lrow[aria-current="true"],
:root[data-shell="new"] .lrow.on{box-shadow:inset 3px 0 0 var(--accent); background:var(--fill-2)}

/* ---------- Launch screen (868mjuuuv, PRD 0.7 R1, 19 Oct 2026) ----------
   New shell only (launch.js sets data-launch before anything draws; nothing here applies without it).
   The Brief mark and a still outline of Now in --fill on --bg, laid out on the same columns as the
   real page, while the page builds out of sight. One fade (app.js launchReveal, DC_MOTION easing)
   swaps them; under reduced motion it is a straight swap. No spinner, no shimmer. */
.launch,.ln-status{display:none}
:root[data-launch] .launch{display:flex; position:fixed; inset:0; z-index:45; max-width:1600px; margin:0 auto; background:var(--bg); overflow:hidden; pointer-events:none}
:root[data-launch] .ln-status{display:block}
:root[data-launch="hold"] #app{visibility:hidden}
.ln-rail{display:none}
.ln-pane{flex:1; min-width:0; padding:68px var(--gutter) 0}
.ln-col{max-width:680px; margin:0 auto; display:flex; flex-direction:column}
.ln-mark{display:grid; place-items:center; width:var(--touch); height:var(--touch)}
.ln-mark .mark{padding:0} /* the rail's own mark (.mark i), reused */
.ln-mark-top{position:fixed; top:calc(env(safe-area-inset-top,0px) + 8px); left:8px}
.ln-hello{display:flex; align-items:center; gap:16px; margin:44px 0 8px}
.ln-photo{flex:none; width:52px; height:52px; border-radius:50%; background:var(--fill)}
.ln-greet{flex:1; display:flex; flex-direction:column; gap:10px}
.ln-greet span,.ln-date,.ln-h{display:block; height:28px; border-radius:var(--r-field); background:var(--fill)}
.ln-greet span:first-child{width:72%}
.ln-greet span:last-child{width:34%}
.ln-date{width:42%; height:16px; margin:6px 0 30px}
.ln-h{width:38%; height:18px; margin:0 0 14px}
.ln-box{display:block; height:196px; margin:0 0 30px; border-radius:var(--r-group); background:var(--fill)}
.ln-card{display:block; height:214px; margin:0 0 12px; border-radius:var(--r-card); background:var(--fill)}
@media (min-width:600px){
  .ln-rail{display:flex; flex:none; flex-direction:column; align-items:center; gap:10px; width:var(--rail-fixed); padding:12px 0; background:var(--side)}
  .ln-rail .ln-mark{width:60px; height:60px; margin:0 0 14px}
  .ln-nav{display:block; flex:none; width:28px; height:28px; margin:15px 0; border-radius:50%; background:var(--fill)}
  .ln-mark-top{display:none}
  .ln-pane{padding:16px 24px 0}
  .ln-col{max-width:600px}
}
@media (min-width:840px){ .ln-pane{padding:16px 20px 0} }

/* ---------- The evening plan (868mjj591, PRD 0.7 R1, 19 Oct 2026) ----------
   Now from his evening time on an evening before a working day. Same page, same parts (calendar list,
   decision cards, rows, result lines, the draft block); only these pieces are new. Tokens only. */
.ev-sens{display:inline-flex; align-items:center; gap:6px; margin:12px 0 0}
.ev-sens svg{width:15px; height:15px}
.ev-sensbox{margin:10px 0 0; padding:14px 16px 6px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group); box-shadow:var(--shadow)}
.ev-sensbox .brows{box-shadow:none; border:none; margin:0 -16px}
.ev-q{margin:0 0 2px; font-weight:600; color:var(--ink)}
.ev-chips{margin:0 0 12px}
.ev-foot{margin:12px 0 0}
.ev-foot .ev-ok{width:100%; min-height:52px; justify-content:center; margin:0 0 8px}
.ev-foot .fine{margin:0}
.now-page .ev-arrived,.now-page .ev-done{margin:0 0 28px}
.ev-fold{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; width:100%; min-height:56px; padding:10px 16px; border:1px solid var(--hair); border-radius:var(--r-group); background:var(--surface); box-shadow:var(--shadow); color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.ev-fold-t{font-weight:600}
.ev-fold-m{grid-column:1; font-size:var(--t-meta); color:var(--muted)}
.ev-chev{grid-column:2; grid-row:1 / span 2; width:18px; height:18px; color:var(--ink-2); transform:rotate(-90deg); transition:transform .2s}
.ev-fold[aria-expanded="true"] .ev-chev{transform:rotate(90deg)}
.ev-done .brows{margin-top:10px}
@media (prefers-reduced-motion:reduce){ .ev-chev{transition:none} }
@media (hover:hover) and (pointer:fine){ .ev-fold:hover{background:var(--fill)} }

/* ---------- The morning check (868mjj592, PRD 0.7 R1, 19 Oct 2026) ----------
   Now from his morning time when something changed overnight (prototype Morning, MorningDark,
   FoldMorning). Same parts as the evening plan; new are the change marks on the calendar list, the
   Now and Next block, the change lines and "Today is set". Tokens only; the mark says its meaning
   in words, amber only helps the eye. */
.cal-row.changed .cal-mark{color:var(--amber); font-weight:700}
.cal-gone{text-decoration:line-through; color:var(--muted)}
.mo-lines{margin:14px 0 0; padding:4px 16px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group); box-shadow:var(--shadow)}
.mo-line{margin:0; padding:10px 0; border-bottom:1px solid var(--hair); font-size:var(--t-small); line-height:1.45; color:var(--ink-2); overflow-wrap:anywhere}
.mo-line:last-child{border-bottom:0}
/* A change row (1.31.0, 868mpkyg5): the title in ink, the sender · business line under it. */
.mo-line .mo-t{display:block; color:var(--ink); font-weight:600}
.mo-line .sub2{display:block; font-size:var(--t-caption); color:var(--muted)}
.mo-lines .fine{margin:8px 0}
/* Since this morning (1.31.0, 868mpkyg5): changes after the morning run, listed under the counted ones. */
.nm-body .mo-since{margin:16px 0 0}

/* ---------- Item: status as one row, notes higher (his Fold check, 19 Oct 2026) ----------
   The status grid opens only on Change, under the facts box; Notes follow it, with the comment box
   first; Linked and history come after, history folded after 5 lines. */
.idv-kv .v .idv-stv{font-weight:600; text-transform:capitalize}
.idv-kv .v .idv-stc{min-height:var(--touch); margin:-12px -8px -12px 4px; padding:0 8px; vertical-align:middle}
.idv-stbox{margin:12px 0 0}
.idv-stbox .fine{margin:8px 2px 0}
.sub2.ev-err{color:var(--red)}

/* Settings sub-pages keep their way back at every width in the new shell (19 Oct 2026). */
:root[data-shell="new"] .detail .chip.set-back{display:inline-flex; align-items:center}

/* ---------- What Brief may do on its own (868mjj593) ----------
   A key for the three settings, one rule per row with its sentence above a pill segment whose labels may
   wrap to two lines (room for longer languages), then the hard limits with a lock each. */
.ap-key{margin:0 0 24px; padding:4px 16px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group)}
.ap-key div{padding:10px 0; border-bottom:1px solid var(--hair)}
.ap-key div:last-child{border-bottom:0}
.ap-key dt{font-weight:600; color:var(--ink)}
.ap-key dd{margin:2px 0 0; font-size:var(--t-small); line-height:1.45; color:var(--ink-2)}
.ap-rule .k{font-weight:600; color:var(--ink)}
.ap-rule .note{margin:2px 0 10px}
.ap-seg button{min-height:44px; padding:6px 8px; line-height:1.2; font-size:var(--t-small); overflow-wrap:anywhere}
.ap-limits{list-style:none; margin:0 0 20px; padding:4px 16px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group)}
.ap-limits li{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--hair); font-size:var(--t-small); line-height:1.45; color:var(--ink-2)}
.ap-limits li:last-child{border-bottom:0}
.ap-lock{flex:none; width:16px; height:16px; margin-top:2px; color:var(--muted)}

/* ---------- Done by Brief (868mjj593) ----------
   FYI lines in the open (at most 3) above one fold row; opened, the rest grouped by rule. */
.dbb .dbb-fyi{margin:0 0 10px}
.dbb .ev-fold + .dbb-body{margin-top:4px}
.dbb .dbb-g{margin:16px 0 6px}
.dbb .dbb-body .brows{margin-top:0}
.dbb .dbb-set{margin:10px 0 0}
.dbb .brow.gone .rr{color:var(--muted)}

/* ---------- Slipped dates card (868mk4hwx) ----------
   The items in plain words with each new date, in a quiet inset list; "Choose per item" puts
   Move / Done / Park under each name. */
.dc-items{list-style:none; margin:10px 0 0; padding:2px 12px; border-radius:var(--r-group); background:var(--fill)}
.dc-it{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:9px 0; border-bottom:1px solid var(--hair); font-size:var(--t-small); line-height:1.4}
.dc-it:last-child{border-bottom:0}
.dc-it-t{flex:1 1 12em; min-width:0; padding:0; border:0; background:none; font:inherit; color:var(--ink); text-align:left; overflow-wrap:anywhere}
button.dc-it-t{cursor:pointer}
.dc-it-r{flex:none; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
/* A long result shares the line and wraps under the title when there's no room, never squeezing the title (868mttf36: "UK residen ce evidenc e pack" on the fold). */
.dc-it-r.ok{flex:0 1 auto; max-width:100%; color:var(--ink); font-weight:600; white-space:normal; text-align:right}
.dc-it-u{flex:none; min-height:32px; margin:-8px -4px; padding:0 4px; border:0; background:none; font:inherit; font-weight:600; color:var(--accent); cursor:pointer}
.dc-it.each{flex-wrap:wrap}
.dc-it.each .dc-it-t{flex-basis:100%}
.dc-it-acts{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.dc-it-acts .chip{flex:none; width:auto; min-width:0; min-height:36px; padding:0 12px; background:var(--surface); border:1px solid var(--hair)}
.dc-it.acted .dc-it-t{color:var(--muted)}
.dc-it-more{margin-top:4px}
/* Per-row date choices on the slipped dates card (0.119.1). Brief's day carries a ring, not colour alone. */
.dc-when{display:flex; flex-basis:100%; flex-wrap:wrap; gap:6px; margin-top:6px; padding:8px; border-radius:12px; background:var(--surface)}
.dc-when .chip{flex:none; width:auto; min-width:0; min-height:36px; padding:0 12px; background:var(--fill); border:1px solid var(--hair)}
.dc-when .chip.pre{border:2px solid var(--accent); font-weight:600}
.dc-when .chip .sub2{font-weight:400; color:var(--ink-2)}
.dc-when-pick{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
.dc-it-acts .chip[aria-expanded="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.dc-when-pick input{min-height:36px}

/* How Brief learns (868mjj597): the rules page and the line on a card whose pick was learned. */
.dc-learned{margin:10px 0 0; font-size:var(--t-small); color:var(--ink-2); line-height:1.4}
.ln-rule{gap:6px}
.ln-rule .ln-text{color:var(--ink); line-height:1.45; overflow-wrap:anywhere}
.ln-rule.is-off .ln-text{color:var(--muted)}
.ln-rule .chips{margin-top:4px}
.ln-form{gap:8px}
.ln-form textarea{width:100%; min-height:72px; font:inherit; padding:10px 12px; border-radius:12px; border:1px solid var(--hair); background:var(--surface); color:var(--ink); resize:vertical}

/* Friday sign-off (868mkbfjc, 868mkbfjh): the Pulse lines with a tick each, and the sign-off button. */
.so-lines{display:flex; flex-direction:column; border:1px solid var(--hair); border-radius:var(--r-group); background:var(--surface); box-shadow:var(--shadow); overflow:hidden}
.so-line{display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:12px; align-items:start; width:100%; min-height:var(--touch); padding:12px 16px; border:none; border-top:1px solid var(--hair); background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.so-line:first-child{border-top:none}
.so-line:hover{background:var(--hover)}
.so-line:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.so-box{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-top:1px; border:1.5px solid var(--line); border-radius:var(--r-small); background:var(--surface)}
.so-line[aria-checked="true"] .so-box{border-color:var(--solid); background:var(--solid); color:var(--solid-ink)}
.so-box svg{width:14px; height:14px}
.so-lb{display:flex; flex-direction:column; gap:3px; min-width:0}
.so-lt{font-size:var(--t-body); line-height:1.4}
.so-line[aria-checked="false"] .so-lt{color:var(--ink-2)}
.so-lm{font-size:var(--t-meta); color:var(--muted)}
.so-hit{font-size:var(--t-meta); color:var(--ink); background:var(--amber-tint); border-radius:var(--r-small); padding:2px 8px; align-self:flex-start}
.so-pulse .actions,.so-sign{margin-top:12px}
.so-sign .fine{margin-top:8px}
.so-sum .dbb-body{margin-top:8px}

/* Prep steps under an event in Coming up (868mkbfk3): day then step, one line each. */
.brow .prep-steps{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:2px}
.brow .prep-steps li{display:flex; gap:8px; font-size:var(--t-meta); line-height:1.35; color:var(--ink-2)}
.brow .prep-steps .prep-d{flex:none; min-width:84px; color:var(--muted)}
.brow .prep-not{margin:4px 0 0}
.brow .prep-not.open .dc-reasons{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
/* Coming up rows (1.22.2): folded by default, a chevron says the title opens the row; everything
   inside is left-aligned (link buttons centre their text when they wrap, so Waiting lines looked centred). */
.brow.rfold > .rb > .rt{text-align:left}
/* No chevron (1.22.5: Brief uses none elsewhere); the whole row opens it, and an open row gets a quiet
   fill. The title's ::after is the row's tap target, so links and buttons inside an open row sit above it. */
.brow.rfold.ropen{background:var(--fill)}
.brow .cu-body a,.brow .cu-body button{position:relative; z-index:1}
.brow .cu-l{display:block}
.brow .cu-body{margin-top:6px; display:grid; gap:4px; text-align:left}
.brow .cu-body .linkbtn{text-align:left}
.brow .cu-h{margin:6px 0 0; color:var(--muted)}
.brow .cu-cal{margin:0}
.brow .cu-mails li{align-items:baseline}
.brow .cu-mt{flex:1; min-width:0; overflow-wrap:anywhere}
.brow .cu-more{flex:none; padding:0 6px; color:var(--muted); font-weight:700}
.brow .cu-unlink{flex:none}
.brow .cu-wait{margin:0; font-size:var(--t-meta); line-height:1.35}
.brow .cu-actline{margin:6px 0 0; font-size:var(--t-meta); display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-start; gap:4px 8px}
.brow .cu-dot{color:var(--muted)}

/* ---------- One consistent Now: moments on top (868mkkvh5, 1.17.0) ----------
   A moment is a block above the spine, never a page: header (title, meta, ×), body, one done button.
   Banners are one line each. Same single column at every width; nothing reflows between phone and Fold. */
.nm-banners{display:flex; flex-direction:column; gap:6px; margin:4px 0 14px}
.nm-banners .banner{margin:0}
.nm-banner{margin:0; padding:10px 16px; border-radius:var(--r-input); background:var(--fill); color:var(--ink-2); font-size:var(--t-small); line-height:1.4}
.nm-block{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-card); box-shadow:var(--shadow); padding:16px 20px 18px; margin:4px 0 28px; min-width:0}
.nm-block.nm-one{padding-bottom:16px}
.nm-head{display:flex; align-items:flex-start; gap:12px}
.nm-ht{flex:1; min-width:0}
.nm-title{margin:0; font-size:var(--t-h3); line-height:1.3}
.nm-meta{margin:2px 0 0; font-size:var(--t-small); color:var(--muted)}
.nm-x{flex:none; display:grid; place-items:center; width:40px; height:40px; margin:-8px -10px 0 0; border:0; border-radius:var(--r-pill); background:transparent; color:var(--ink-2); cursor:pointer}
.nm-x svg{width:20px; height:20px}
.nm-body{margin-top:12px; min-width:0}
.nm-body .sec{margin-bottom:18px}
.nm-body .sec:last-child{margin-bottom:0}
.nm-done.rl-inline{margin:0 0 10px}
@media (hover:hover) and (pointer:fine){ .nm-x:hover{background:var(--fill)} }
@media (max-width:419px){ .nm-block{padding:14px 16px 16px} }

/* Settings rework phase 1 (868mkwe35): one centred column of about 720px, four cards first, a value on every row. */
:root[data-shell="new"] .app.set-mode .list-pane .pane-inner, .app.set-mode .pane-inner{max-width:720px}
:root[data-shell="new"] .detail.setpage, .detail.setpage{max-width:none}
.set-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0 8px}
@media (max-width:599px){ .set-cards{grid-template-columns:minmax(0,1fr)} }
.set-card{display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:16px 18px; min-height:112px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group); box-shadow:var(--shadow); font:inherit; color:inherit; cursor:pointer}
@media (hover:hover) and (pointer:fine){ .set-card:hover{background:var(--hover)} }
.set-card .sc-name{font-weight:700; font-size:var(--t-lead)}
.set-card .sc-sub{font-size:var(--t-small); color:var(--ink-2); line-height:1.4}
.set-card .sc-val{margin-top:auto; padding-top:6px; font-size:var(--t-meta); color:var(--muted)}
.set-nav .set-val{color:var(--ink-2); font-weight:500; max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:420px){ .set-nav .set-val{max-width:12ch} }
.set-signout{margin-top:12px}
.mt-row{align-items:stretch; gap:8px}
.mt-row .mt-chg{display:flex; flex-wrap:wrap; gap:6px}
.mt-form{align-items:stretch; gap:8px}
.mt-form input,.mt-form select{width:100%}
.mt-add{margin-top:16px}
.cal-role{align-items:stretch; gap:8px}
.p-statement .name{font-size:var(--t-lead)}

/* Carry clean-up offer (1.24.1, his 25 Oct check): room between Clean up / Later and the rows below. */
.so-cu-offer .actions{margin-bottom:20px}

/* The test copy (1.30.0, 868mn41hn): a plain strip at the top of every screen, test.brief.produx.tech only
   (public/host.js adds it and sets data-env="test"). The page moves down by the strip's height, so it covers
   nothing; fixed controls at the top move with it. Live has no strip and none of these rules apply. */
:root{ --strip-h:24px }
.test-strip{position:fixed; z-index:60; top:env(safe-area-inset-top,0px); left:0; right:0; height:var(--strip-h); display:flex; align-items:center; justify-content:center;
  background:var(--amber-tint); color:var(--amber); border-bottom:1px solid var(--line); font:600 var(--t-caption)/1 var(--font); letter-spacing:.04em; text-transform:uppercase; pointer-events:none}
:root[data-env="test"]{padding-top:calc(env(safe-area-inset-top,0px) + var(--strip-h))}
:root[data-env="test"] .ln-mark-top{top:calc(env(safe-area-inset-top,0px) + var(--strip-h) + 8px)}
:root[data-shell="new"][data-env="test"] .menu-btn{top:calc(env(safe-area-inset-top,0px) + var(--strip-h) + 8px)}
@media (max-width:599px){ :root[data-shell="new"][data-env="test"] .rail{padding-top:calc(env(safe-area-inset-top,0px) + var(--strip-h) + 8px)} }

/* Never a blank screen (1.31.0, 868mpdcwp, public/stall.js): "Brief can't reach its data." / "Brief didn't
   load", over everything, on the page's own colours. */
.stall{position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:16px; background:var(--bg); color:var(--ink)}
.stall-card{width:100%; max-width:440px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-card); box-shadow:var(--shadow); padding:28px 26px}
.stall-card h1{font-size:var(--t-h2); margin:0 0 10px}
.stall-body{color:var(--ink-2); margin:0 0 20px; font-size:var(--t-small); line-height:1.5}
.stall-acts{display:flex; flex-wrap:wrap; gap:8px}

:root[data-env="test"] .stall{top:var(--strip-h)}

/* Section headers on Now (868mqf6q2, 1.32.0): name and ask, why, progress. Names checked with grep: ask-*, so-seg, now-ritual are new. */
.ask-h{display:flex; flex-direction:column; gap:4px; margin:0 0 12px}
.ask-h1{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ask-h1 h2{margin:0; font-family:inherit; font-size:var(--t-h3); font-weight:600}
.ask-chip{display:inline-flex; align-items:center; border-radius:var(--r-pill); padding:3px 10px; background:var(--fill); color:var(--ink-2); font-size:var(--t-caption); font-weight:600; white-space:nowrap}
.ask-chip.solid{background:var(--solid); color:var(--solid-ink); font-weight:700}
.ask-why{margin:0; font-size:var(--t-meta); line-height:1.4; color:var(--ink-2)}
.ask-prog{margin:0; display:flex; align-items:center; gap:8px; font-size:var(--t-caption); color:var(--muted)}
.ask-bar{flex:0 0 56px; height:4px; border-radius:2px; background:var(--line); overflow:hidden}
.ask-bar span{display:block; height:100%; background:var(--green)}
.ask-fold{height:auto; flex-shrink:0; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; align-items:center; width:100%; min-height:var(--touch); padding:10px 16px; border:1px solid var(--hair); border-radius:var(--r-group); background:var(--surface); color:var(--ink); text-align:left; cursor:pointer; font:inherit}
.ask-fold-t{grid-column:1; display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-weight:600}
.ask-fold-m{grid-column:1; font-size:var(--t-meta); color:var(--muted)}
.ask-fold-go{grid-column:2; grid-row:1 / span 2; font-size:var(--t-meta); font-weight:600; color:var(--accent)}
.ask-fold-none{margin:0; cursor:default}
.ask-more{display:block; min-height:var(--touch); padding:8px 0; border:none; background:none; color:var(--accent); font:inherit; font-size:var(--t-meta); font-weight:600; cursor:pointer}
.now-ritual{display:flex; flex-direction:column; gap:8px}
.now-ritual h2{margin:0; font-family:inherit; font-size:var(--t-h3); font-weight:600}
.so-purpose{margin:0 0 12px}
.so-line-s{display:block; cursor:default; border-top:none}
.so-line-s:hover{background:none}
.so-lrow[data-on="false"] .so-lt{color:var(--ink-2)}
.so-seg{display:flex; gap:3px; margin:0 16px 12px; padding:3px; border-radius:var(--r-pill); background:var(--fill)}
.so-seg button{flex:1; min-height:var(--touch); border:none; border-radius:var(--r-pill); background:none; color:var(--ink-2); font:inherit; font-size:var(--t-meta); cursor:pointer}
.so-seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); font-weight:600}
:root[data-shell="new"] .shell-page .ask-h1 h2, :root[data-shell="new"] .shell-page .now-ritual h2{font-family:var(--font); font-size:var(--t-h3); font-weight:600; letter-spacing:-.005em; line-height:1.3}
.so-lrow .so-lact{margin:-4px 16px 12px}
.so-lrow + .so-lrow{border-top:1px solid var(--hair)}

/* The why box (868mqm1mg, rule 6): one grey box on every card. Names checked with grep: why-*, gs-*, goal-*, gn, rgoal, roff, og-q are new. */
.why-box{margin:2px 0 0; padding:10px 12px; border-radius:var(--r-md,14px); background:var(--fill); display:flex; flex-direction:column; gap:4px}
.why-t{margin:0; font-size:var(--t-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.why-hair{height:1px; background:var(--line); margin:4px 0}
.og-q{font-weight:600; color:var(--ink)}
/* What you're delivering (868mpkxjc) */
.goal-due{color:var(--amber); font-weight:600}
.goal-line{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:12px 0 0; font-size:var(--t-small); color:var(--ink-2)}
.goal-main{margin-top:16px}
.add-kind{align-self:stretch; width:100%; display:flex; margin:0 0 16px; max-width:none}
.goal-for .chip[aria-pressed="true"],.goal-moves .chip[aria-pressed="true"]{background:var(--solid); color:var(--solid-ink)}
.goal-twin{display:flex; justify-content:center; gap:16px; margin-top:4px}
.goal-opt{display:flex; gap:12px; align-items:center; width:100%; min-height:60px; padding:10px 14px; border:1px solid var(--line); border-radius:18px; background:var(--surface); font:inherit; color:var(--ink); text-align:left; cursor:pointer}
.goal-opt[aria-pressed="true"]{border:2px solid var(--solid)}
.goal-rd{flex:0 0 20px; height:20px; border-radius:10px; border:1.5px solid var(--line); box-sizing:border-box}
.goal-opt[aria-pressed="true"] .goal-rd{border:6px solid var(--solid)}
.dc-sec{min-height:var(--touch); padding:0 16px; margin-right:2px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--t-small); font-weight:600; cursor:pointer}
.dc-sec:disabled{opacity:.45; cursor:not-allowed}
.rgoal,.roff{display:inline-flex; align-items:center; border-radius:6px; padding:2px 6px; font-size:var(--t-micro); white-space:nowrap}
.rgoal{background:var(--goal-fill); color:var(--goal-ink); font-weight:700}
.roff{background:var(--fill); color:var(--ink-2); font-weight:600}
.gs-h{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.gs-t{font-size:var(--t-caption); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.gs-b{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.gs-name{font-weight:500; overflow-wrap:anywhere}
.goal-lock{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--r-pill); background:var(--fill); color:var(--ink-2); font-size:var(--t-caption); font-weight:600}
.goal-lock svg{width:12px; height:12px}
.goal-prog{margin:8px 0 0}
.goal-moves{margin:14px 0 0; display:flex; flex-direction:column; gap:6px}
.goal-moves .idv-l{margin:0}
.goal-pick{margin:12px 0 0}
.goal-sheet{display:flex; flex-direction:column; gap:14px}
.goal-f{display:flex; flex-direction:column; gap:6px}
.goal-f .idv-l{margin:0}
.goal-sw{flex-direction:column}
.goal-seg2{margin:0; max-width:none}
.goal-cancel{align-self:center}
.goal-so-box{padding:14px 16px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-card); display:flex; flex-direction:column; gap:6px; margin:0 0 16px}
.goal-so-box p{margin:0}
.ev-skip{text-align:center}
.goal-f input{width:100%; min-height:var(--touch); padding:10px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); font:inherit; box-sizing:border-box}
.add-hint{margin:0}
.add-ch-t{margin:0; font-size:var(--t-body,15px); font-weight:600; color:var(--ink)}
.add-keep{display:block; width:100%; min-height:48px; margin-top:8px; border-radius:999px; border:1px solid var(--line); background:none; color:var(--ink); font:inherit; font-weight:600; cursor:pointer}
.add-kind button{flex:1}

/* I can draft this for you (868mqf6q2 S11) */
.do-lk{display:inline-flex; align-items:center; min-height:32px; padding:0; border:none; background:none; font:inherit; font-size:var(--t-small); font-weight:600; color:var(--accent); cursor:pointer; text-align:left}
.do-wait{display:inline-flex; align-items:center; min-height:32px; margin:0; font-size:var(--t-small); font-weight:600; color:var(--muted)}
.do-err{display:block; padding-top:6px; font-size:var(--t-small); font-weight:500; color:var(--red)}
.do-ok{display:flex; width:fit-content; align-items:center; justify-content:center; min-height:44px; margin-top:8px; padding:0 18px; border:none; border-radius:var(--r-pill); background:var(--solid); color:var(--solid-ink); font:inherit; font-size:var(--t-small); font-weight:700; cursor:pointer}
.do-ok:disabled{opacity:.45; cursor:default}
.confirm[data-act="do-ok"]:disabled{opacity:.45; cursor:default}
.do-panel{margin-top:6px}
.do-lines .rline{margin:6px 0}
.do-gap{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:8px; padding:10px 12px; border-radius:var(--r-field); background:var(--amber-tint); color:var(--ink); font-size:var(--t-small); font-weight:600}
.do-gap[hidden]{display:none}
.do-gap svg{flex:none; width:20px; height:20px; fill:none; stroke:var(--amber); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.do-gap-t{flex:1 1 160px; min-width:0; overflow-wrap:anywhere}
.do-check{position:relative; z-index:2; border:1.5px solid var(--ctl); background:none; padding:0; cursor:pointer; color:var(--muted)}
@media (hover:hover) and (pointer:fine){ .do-check:hover{color:var(--accent); border-color:var(--accent)} }

/* Now's new order (868mttf36, 1.35.0). Names checked with grep: now-hello, now-cols, now-col, now-l, now-r, now-hl, now-day, day-*, now-clear, now-today, ygh, rfirst, why-*, yours-why are new. */
.nav[hidden]{display:none !important}
.now-hello{margin:12px 0 14px; display:flex; align-items:center; gap:14px}
.now-hello .avatar{width:52px; height:52px; flex:none}
.now-hello .avatar.ini{display:grid; place-items:center; background:var(--photo); color:var(--ink-2); font-weight:600; font-size:var(--t-card)}
.now-hello-t{min-width:0}
:root[data-shell="new"] .shell-page.now-page .now-hello .greet{margin:0; font-size:26px; line-height:30px}
.now-page .now-hello .today-date{margin:0; font-size:14px; line-height:18px; font-weight:500}
.now-page .now-sum{display:block; margin:0 0 14px; padding:14px 16px 6px}
.now-sum-one{padding-top:6px}
.now-hl{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:var(--touch); margin-top:10px; border-top:1px solid var(--hair); font-size:14px; font-weight:500; color:var(--ink-2)}
.now-sum-one .now-hl{margin-top:0; border-top:0}
.dbb-open{margin:4px 0 8px}
.now-day{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-group); padding:12px 16px 6px; margin:0 0 20px}
.day-nx{display:grid; grid-template-columns:48px minmax(0,1fr) auto; column-gap:10px; align-items:center; min-height:var(--touch)}
.day-t{font-size:16px; line-height:1.3; font-weight:600; overflow-wrap:anywhere}
.day-then,.day-none{margin:4px 0 0; font-size:14px; line-height:20px; font-weight:500; color:var(--ink-2)}
.day-full{margin:8px 0}
.now-clear{display:flex; flex-direction:column; gap:2px; background:var(--green-tint); border-radius:var(--r-group); padding:14px 16px; margin:0 0 14px}
.now-clear b{font-size:16px; line-height:22px; font-weight:600}
.now-clear span{font-size:14px; line-height:20px; font-weight:500; color:var(--ink-2)}
.now-clear .linkbtn{align-self:flex-start}
.now-clear.route-hl,.now-day.route-hl,.now-hl.route-hl{outline:2px solid var(--accent); outline-offset:6px}
.now-page .now-today{margin:0 0 14px}
.ygh{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:12px 16px 2px; flex-wrap:wrap}
.ygh-t{padding:0; border:0; background:none; font:inherit; font-size:13px; line-height:18px; font-weight:700; color:var(--ink); text-align:left; cursor:pointer}
b.ygh-t{cursor:default}
.ygh-p{font-size:13px; line-height:18px; font-weight:500; color:var(--muted)}
.rfirst{display:block; font-size:12px; line-height:16px; font-weight:700; letter-spacing:.04em; color:var(--accent)}
.yours-why{display:block; margin:-6px 0 12px}
.why-lab{margin:0; font-size:13px; line-height:18px; font-weight:700; color:var(--muted)}
.why-rl{margin:0; font-size:15px; line-height:22px}
.why-picks{display:flex; flex-direction:column; gap:6px}
/* From 840 Now is one column beside the pane that shows what he opened, or the day at rest (his 17:52 call). */
.day-rest-h{margin:0 0 12px}
.now-page .now-l a[aria-current="true"],.now-page .now-l button[aria-current="true"]:not(.rt){box-shadow:inset 3px 0 0 var(--accent)}
.ask-rule{flex:1; min-width:12px; height:1px; background:var(--line)}
.day-mark{font-weight:700; color:var(--amber)}
@media (max-width:599px){ .now-hello{margin:-58px 0 14px; padding-left:56px; min-height:48px; gap:10px} }
.now-plan .brow .rr{grid-column:3; padding-top:7px}
.now-page .now-tidy{margin:0 0 14px}
.tidy-list{display:flex; flex-direction:column; gap:12px; margin:12px 0}

.now-view .view-t{margin:0 0 12px}
.why-list{margin:0 0 12px; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px}
.why-list li{display:flex; flex-direction:column; gap:2px}
.why-list li b{font-size:15px; line-height:20px; font-weight:600}
.why-list li span{font-size:14px; line-height:20px; color:var(--ink-2)}
.now-page .now-day-s{margin:0 0 14px}
.now-day-s .now-day{margin:0}

/* Invites as calendar rows (868mttf36, his 18:00 call). Names checked with grep: iv-card, iv-rows, iv-row, iv-when, iv-b, iv-who, iv-acts are new. */
.iv-rows{list-style:none; margin:10px 0 0; padding:0}
.iv-row{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; padding:10px 0; border-top:1px solid var(--hair)}
.iv-row:first-child{border-top:0}
.iv-when{font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; padding-top:2px}
.iv-b{min-width:0; display:flex; flex-direction:column; gap:2px}
.iv-who{font-size:13px; color:var(--muted)}
.iv-acts{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:6px}