/* LiveBrain on the phone. Tokens copied from LiveBrain's brand.css (dark is the house default;
   the phone follows its own light or dark setting). Muted text differs per theme so it keeps
   4.5:1 on both grounds. */

@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/geist-400.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/geist-500.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/geist-600.woff2') format('woff2');}

:root{
  --bg:#0a0a0a; --panel:#141414; --panel2:#1c1c1c; --line:#2a2a2a;
  --text:#f5f5f0; --muted:#a6a69e; --brand:#c6f24e; --on-brand:#0a0a0a;
  --accent:#5cb8ff; --amber:#ffb547; --warn:#ff5f57; --knob:#f5f5f0;
  --r-m:8px; --r-l:12px;
  --font-sans:'Geist',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --tabbar-h:58px;
  /* control heights, 3 steps chosen by role; the small step is the phone's 44px tap minimum (17 Sep 2026) */
  --h-s:44px; --h-m:48px; --h-l:52px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#fafaf6; --panel:#ffffff; --panel2:#f3f3ee; --line:#dfdfd7;
    --text:#0c0c0c; --muted:#55554f; --brand:#4b7000; --on-brand:#ffffff;
    --accent:#2570b8; --amber:#8f6210; --warn:#c0322b; --knob:#ffffff;
    color-scheme:light;
  }
}

*,*::before,*::after{box-sizing:border-box}
/* a phone app does not zoom on a double tap (16 Sep 2026, his ask); pinch zoom stays for reading */
*{touch-action:manipulation}
/* and it never slides sideways: vertical scrolling and pinch only, and nothing wider than the screen */
html,body{touch-action:pan-y pinch-zoom;overflow-x:hidden}
html{overscroll-behavior-y:none;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.45 var(--font-sans);-webkit-font-smoothing:antialiased}
body.sheet-open{overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{touch-action:manipulation;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.clamp2,.clamp3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.clamp2{-webkit-line-clamp:2}
.clamp3{-webkit-line-clamp:3}

/* Messages sit in normal flow: they push the page down and scroll away. */
.banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;background:var(--panel2);
  border-bottom:1px solid var(--line);font-size:15px}
.banner.muted{color:var(--muted)}
.banner-btn{margin-left:auto;background:var(--brand);color:var(--on-brand);border:0;border-radius:var(--r-m);
  height:var(--h-s);padding:0 14px;font-weight:600;font-size:15px}

.view{max-width:560px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 16px) 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 28px)}
.banner:not([hidden]) ~ .view{padding-top:16px}

.head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.head.row{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:12px}
.head h1{margin:0;font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.01em}
.sub{margin:0;font-size:14px;color:var(--muted);min-height:1.45em}
.sub.stale{color:var(--amber)}
.head-btn{flex:none;margin-top:2px;min-width:84px;height:var(--h-m);padding:0 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);font-size:15px;font-weight:600}
.head-btn:disabled{opacity:.5}

/* ---------- controls ---------- */
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 10px}
.seg.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.seg.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.seg label{position:relative;display:block;min-width:0}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;height:44px;padding:0 4px;text-align:center;white-space:nowrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);font-size:15px;font-weight:500;touch-action:manipulation}
.seg input:checked + span{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:var(--panel2)}
.seg input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.kinds{border:0;margin:0;padding:0;min-width:0}

textarea,input[type="text"],input[type="date"],input[type="time"],input[inputmode="numeric"],select{display:block;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);font-size:17px;line-height:1.45}
textarea{min-height:7em;resize:none;padding:12px 14px}
input[type="text"],input[type="date"],input[type="time"],input[inputmode="numeric"],select{height:48px;padding:0 12px}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
textarea::placeholder,input::placeholder{color:var(--muted)}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--brand)}
/* a switch has no border to colour, so keyboard focus keeps a ring */
input[role="switch"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.capture-actions{display:flex;align-items:center;gap:12px;margin-top:10px}
.tick{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px}
.capture-actions .tick{flex:1;min-width:0}
.tick-label{font-size:16px;font-weight:500}
.tick.off{cursor:default}
.tick.off .tick-label{color:var(--muted)}
input[role="switch"]{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:51px;height:31px;margin:0;
  border-radius:999px;background:var(--line);transition:background .18s;touch-action:manipulation;cursor:pointer}
input[role="switch"]::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;
  background:var(--knob);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .18s}
input[role="switch"]:checked{background:var(--brand)}
input[role="switch"]:checked::before{transform:translateX(20px)}
input[role="switch"]:disabled{opacity:.45;cursor:default}

.primary{display:block;height:var(--h-l);padding:0 22px;border:0;border-radius:var(--r-l);
  background:var(--brand);color:var(--on-brand);font-size:17px;font-weight:600}
.primary:active{filter:brightness(.92)}
.primary:disabled{opacity:.6}
.capture-actions .primary{flex:none;min-width:40%}
#ask-form .primary{width:100%;margin-top:10px}
.secondary{height:var(--h-m);padding:0 18px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel2);font-size:16px;font-weight:600}
.secondary.small{height:var(--h-s);padding:0 14px;font-size:15px}
.secondary:disabled{opacity:.55}
.link{display:inline-flex;align-items:center;min-height:var(--h-s);background:none;border:0;padding:0;color:var(--accent);font-size:15px;font-weight:500;text-align:left}
.link.center{display:block;margin:8px auto 0}
.more{display:block;width:100%;margin-top:6px;height:var(--h-s);border:0;border-top:1px solid var(--line);background:none;color:var(--accent);font-size:15px;font-weight:500}
.item.need.parked .need-text{color:var(--muted)}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}

.note{margin:8px 0 0;font-size:14px;color:var(--muted);min-height:2.9em}
.list-head{margin:6px 0 10px;font-size:14px;font-weight:600;color:var(--muted)}
.empty{color:var(--muted);font-size:15px}

/* ---------- lists ---------- */
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.item-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:12px 14px}
.item-top{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.item-kind{font-weight:500}
.item-time{white-space:nowrap}
.item-text{margin:6px 0 4px;font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.item-text.strong{font-weight:500}
.answer{margin:8px 0 0;font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere;border-left:2px solid var(--line);padding-left:10px}
.sources{margin:8px 0 0;font-size:13px;color:var(--muted)}
.item-state{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;color:var(--muted)}
.item-state-text{flex:1;min-width:0}
.item-state .link{flex:none;justify-items:end;text-align:right;padding:0 0 0 8px;margin:-10px 0;font-size:14px}
.dot{flex:none;width:8px;height:8px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px var(--muted)}
[data-state="taken"] > .item-state .dot{background:var(--accent);box-shadow:none}
[data-state="filed"] > .item-state .dot,[data-state="done"] > .item-state .dot{background:var(--brand);box-shadow:none}
[data-state="held"] > .item-state .dot{background:var(--amber);box-shadow:none}
[data-state="held"] .item-state-text{color:var(--text);font-weight:500}
[data-state="rejected"] > .item-state .dot,[data-state="failed"] > .item-state .dot{background:var(--warn);box-shadow:none}
[data-state="rejected"] .item-state-text,[data-state="failed"] .item-state-text{color:var(--warn)}

/* ---------- cards (Tasks and Status) ---------- */
.cards{display:grid;gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:14px 14px 12px;min-width:0}
.card-head{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:16px;font-weight:600}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;
  border-radius:999px;background:var(--panel2);border:1px solid var(--line);font-size:13px;font-weight:600}
.rows{list-style:none;margin:0;padding:0}
.row-card{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.row-card.with-check{grid-template-columns:auto minmax(0,1fr)}
.row-card:first-child{border-top:0;padding-top:4px}
.row-title{font-size:16px;font-weight:500;overflow-wrap:anywhere}
.row-meta{font-size:13px;color:var(--muted)}
.due.late{color:var(--amber);font-weight:500}
.row-pending{font-size:13px;color:var(--accent)}
.items{list-style:none;margin:0;padding:0}
.item{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:15px}
.item:first-child{border-top:0}
.item .item-text{flex:1;min-width:0;margin:0;font-size:15px}
.item .dot{align-self:center}
.item[data-state="working"] .dot,.item[data-state="thinking"] .dot,.item[data-ok="yes"] .dot{background:var(--brand);box-shadow:none}
.item[data-state="waiting"] .dot,.item[data-level="warn"] .dot{background:var(--amber);box-shadow:none}
.item[data-ok="no"] .dot{background:var(--warn);box-shadow:none}
.item[data-ok="no"] .item-text{font-weight:500}
.ref{flex:none;font-size:13px;color:var(--muted);white-space:nowrap}
.line{margin:0 0 6px;font-size:15px}
.line.warn{color:var(--amber)}
.quiet{margin:6px 0 0;font-size:14px;color:var(--muted)}
.quiet.first{margin:0 0 4px}
.extra{margin:6px 0 0;font-size:13px;color:var(--muted);font-style:italic}

/* ---------- the sheet ---------- */
.sheet-backdrop{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.45)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;max-height:88dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;
  background:var(--panel);border-top:1px solid var(--line);border-radius:16px 16px 0 0;
  padding:8px 16px calc(env(safe-area-inset-bottom) + 18px);outline:none}
.sheet-grip{width:40px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 10px}
.sheet-title{margin:0 0 4px;font-size:19px;font-weight:600;overflow-wrap:anywhere}
/* minmax(0,1fr): a grid track may shrink below a child's own minimum. Without it, iPhone's date field (which will not
   shrink) widened the track, every row stretched to match, and the sheet could be dragged sideways (16 Sep 2026). */
.sheet-form{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:560px;margin:0 auto}
.field{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
input[type="date"],input[type="time"]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;text-align:left}
input[type="date"]::-webkit-date-and-time-value,input[type="time"]::-webkit-date-and-time-value{text-align:left;min-height:1.45em}
.field-label{font-size:14px;font-weight:600;color:var(--muted)}
.field-hint{font-size:13px;color:var(--muted)}
.sheet-actions{display:flex;gap:10px;flex-wrap:wrap}
.sheet-actions .primary{flex:1}
.sheet-actions.two-up > *{flex:1 1 0;min-width:0}
.secondary[data-armed="1"]{border-color:var(--amber);color:var(--amber)}
.quick-dates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:-4px}
.quick-dates .secondary{min-width:0;padding:0 4px;font-size:14px;white-space:nowrap}
/* 4 across only where the longest label fits: below 380px (measured spill at 360 and 375) they go 2 across */
@media (max-width:379px){.quick-dates{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card-summary{margin:0;font-size:15px;line-height:1.45}

/* ---------- sign-in ---------- */
.signin{max-width:380px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 18vh) 24px 40px;text-align:center}
.signin-mark{display:block;margin:0 auto 14px;border-radius:16px}
.signin h1{margin:0 0 6px;font-size:30px;font-weight:600}
.signin .primary{width:100%;margin-top:22px}
.signin-form{margin-top:18px}
.signin-form input{text-align:center;font-size:24px;letter-spacing:.3em;height:56px}
.signin-form .primary{margin-top:12px}
.signin-form .clearable > input{padding-left:46px}
.signin-form .clear-btn{top:6px}

/* ---------- tab bar (navigation: the one thing that stays put) ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{position:relative;height:var(--tabbar-h);background:none;border:0;padding:0 2px;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;
  box-shadow:inset 0 2px 0 transparent}
.tabbar button[aria-selected="true"]{color:var(--text);box-shadow:inset 0 2px 0 var(--brand)}
/* pinned inside its tab, so on a 320px screen the dot never runs past the edge */
.tab-dot{position:absolute;top:12px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--amber)}

/* Needs you rows open their answer sheet; the money card */
.item.tap{cursor:pointer;touch-action:manipulation}
.item.tap .item-text{display:flex;flex-direction:column;gap:2px}
.need-full{margin:0;font-size:16px;overflow-wrap:anywhere}
.item.zero .item-text,.item.zero .amount{color:var(--muted)}
.amount{font-variant-numeric:tabular-nums}

/* ---------- Status, grouped (16 Sep 2026): figures at a glance, then a section per job ---------- */
.glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:2px 0 4px}
.tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;min-width:0;min-height:88px;
  padding:12px 14px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l)}
.tile:active{background:var(--panel2)}
.tile-num{font-size:28px;line-height:1.1;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tile-label{font-size:14px;line-height:1.3;color:var(--muted)}
.tile[data-tone="warn"] .tile-num{color:var(--amber)}
.tile[data-tone="bad"] .tile-num{color:var(--warn)}
.tile[data-tone="good"] .tile-num{color:var(--brand)}
.group-head{margin:18px 2px 0;font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);scroll-margin-top:calc(env(safe-area-inset-top) + 12px)}
.card.alerts{border-color:color-mix(in srgb,var(--amber) 55%,var(--line))}
.warn-text{color:var(--amber)}
.quiet.warn-text{color:var(--amber)}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:4px 0 2px}
.kv div{min-width:0}
.kv dt{font-size:13px;color:var(--muted)}
.kv dd{margin:2px 0 0;font-size:16px;font-weight:500;overflow-wrap:anywhere}
.meter{margin:10px 0 2px}
.meter:first-of-type{margin-top:2px}
.meter-top{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.meter-val{font-weight:600;font-variant-numeric:tabular-nums}
.meter-bar{height:8px;margin-top:6px;border-radius:999px;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.meter-bar i{display:block;height:100%;border-radius:999px;background:var(--brand)}
.meter-bar i.warn{background:var(--amber)}
.meter .quiet{margin-top:4px}
.money-total{margin:0 0 2px;font-size:30px;line-height:1.15;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.money-unit{font-size:16px;font-weight:500;color:var(--muted);letter-spacing:0}
/* padding on the card, not margins on its children: a child's own margin rule (.quiet.first) would win and touch the edge */
.fold{padding:0 14px}
.fold[open]{padding-bottom:12px}
.fold-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;margin:0 -14px;padding:0 14px;cursor:pointer;list-style:none}
.fold-sum::-webkit-details-marker{display:none}
.fold-sum .card-head{margin:0}
.fold-sum::after{content:"";flex:none;width:8px;height:8px;margin-left:4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.fold[open] > .fold-sum::after{transform:rotate(-135deg) translateY(-2px)}
.fold-sum .ref{margin-left:auto}

/* ---------- a clear button inside every text field ---------- */
.clearable{position:relative}
.clearable > textarea,.clearable > input{padding-right:46px}
.clear-btn{position:absolute;top:2px;right:2px;display:flex;align-items:center;justify-content:center;width:var(--h-s);height:var(--h-s);
  border:0;border-radius:50%;background:var(--panel2);color:var(--muted);font-size:22px;line-height:1;touch-action:manipulation}
.clear-btn:active{color:var(--text)}

/* ---------- Needs you rows answer in 1 tap ---------- */
.item.need{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.need-text{display:flex;align-items:baseline;gap:10px;width:100%;min-height:var(--h-s);margin:0;padding:0;border:0;background:none;text-align:left;font-size:15px;color:var(--text)}
.need-text .clamp2{flex:1;min-width:0}
.need-acts{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.need-acts .secondary.small{height:var(--h-s);padding:0 16px;font-size:15px}
.link.small{padding:0 2px;font-size:14px}

/* ---------- quiet hours, inside This phone ---------- */
.quiet-box{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.quiet-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:4px}

/* ---------- pull down to refresh ---------- */
.ptr{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top) + 8px);z-index:15;display:flex;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity .15s}
.ptr span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--panel);
  border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--muted);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.ptr.busy span::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brand);animation:ptrspin .8s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.ptr.busy span::before{animation:none}}

/* ---------- 17 Sep 2026: Home, Tasks, Content, Ask, System ---------- */

/* the loading screen, with the version that is loading */
.boot{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--bg);padding:24px;transition:opacity .25s ease}
.boot.done{opacity:0}
.boot-mark{border-radius:18px;margin-bottom:8px}
.boot-name{margin:0;font-size:24px;font-weight:600;letter-spacing:-.01em}
.boot-line{margin:0;font-size:15px;color:var(--muted)}
.boot-bar{position:relative;width:120px;height:3px;margin:14px 0 10px;border-radius:999px;background:var(--line);overflow:hidden}
.boot-bar i{position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:999px;background:var(--brand);animation:bootslide 1.1s ease-in-out infinite}
@keyframes bootslide{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.boot-version{margin:0;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center}
@media (prefers-reduced-motion: reduce){.boot{transition:none}.boot-bar i{animation:none;width:100%}}

/* leaving something: the words, optional details folded, 1 Save */
.composer{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:6px}
.composer-label{font-size:16px;font-weight:600}
.composer textarea{min-height:5.2em}
.composer .primary,.sheet-form > .primary{width:100%}
/* the result line keeps its room, so Just left does not jump down and back when it appears and clears */
.composer .note{margin:0;min-height:2.9em}
.details{border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);padding:0 14px}
.details[open]{padding-bottom:14px}
.details-sum{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--h-m);cursor:pointer;list-style:none;
  font-size:15px;font-weight:500;color:var(--muted)}
.details-sum::-webkit-details-marker{display:none}
.details-sum > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.details-sum::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.details[open] > .details-sum::after{transform:rotate(-135deg) translateY(-2px)}
.details-body{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.chip{height:var(--h-s);padding:0 6px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);font-size:15px;font-weight:500;white-space:nowrap}
.chip[aria-pressed="true"]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);color:var(--text)}
.quick-dates{margin-top:0}
.more.flat{border-top:0;margin-top:0}
.toast{position:fixed;left:16px;right:16px;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);z-index:30;max-width:528px;margin:0 auto;
  padding:12px 14px;border-radius:var(--r-l);background:var(--text);color:var(--bg);font-size:15px;font-weight:500;box-shadow:0 6px 24px rgba(0,0,0,.25);pointer-events:none}
.primary.wide{width:100%}
.good-text{color:var(--brand)}

/* a task row: a round Done button, then the task */
.row-main{display:flex;flex-direction:column;gap:2px;width:100%;margin:0;padding:0;border:0;background:none;text-align:left;color:var(--text);cursor:pointer}
.row-body{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
.check{flex:none;position:relative;width:var(--h-s);height:var(--h-s);margin:-9px 0 -9px -9px;padding:0;border:0;background:none}
/* the round mark is 26px; the button around it is the 44px tap area */
.check::before{content:"";position:absolute;left:9px;top:9px;width:26px;height:26px;border-radius:50%;border:2px solid var(--muted);box-sizing:border-box}
.check[data-armed="1"]::before{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 22%,transparent)}
/* armed says what the next tap does, and draws no tick: nothing has been sent yet */
.check[data-armed="1"]::after{content:"Tap again";position:absolute;left:50%;top:38px;transform:translateX(-50%);font-size:11px;font-weight:600;line-height:1;white-space:nowrap;color:var(--brand)}
/* the tick appears once the change is on its way */
.check[data-sent="1"]::after{content:"";position:absolute;left:19px;top:13px;width:7px;height:12px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg)}
.check:disabled::before{opacity:.55}
.row-acts{display:flex;gap:8px}
.row-acts > .secondary.small{flex:1 1 0;min-width:0;height:var(--h-s);padding:0 10px;font-size:15px}

/* Home: what needs you, then a line per area */
.waiting-line{display:block;width:100%;min-height:var(--h-s);margin:0 0 6px;padding:8px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;
  font-size:15px;font-weight:500;color:var(--amber)}
.glance-card{padding:2px 14px}
.glance-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 0;
  border:0;border-top:1px solid var(--line);background:none;text-align:left;color:var(--text)}
.glance-row:first-child{border-top:0}
.glance-label{font-size:16px;font-weight:600}
.glance-val{min-width:0;text-align:right;font-size:15px;color:var(--muted);overflow-wrap:anywhere}
.glance-val.warn-text{color:var(--amber)}
.glance-val.good-text{color:var(--brand)}
.chev{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg)}
.chev.open{transform:rotate(45deg)}
.glance-more{padding:0 0 12px}

/* System: the Mac's measures with a small line of the last hours */
.metrics{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin:2px 0 8px}
.metric{display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:center;gap:12px;padding:6px 0;border-top:1px solid var(--line)}
.metric:first-child{border-top:0}
.metric-text{display:flex;flex-direction:column;min-width:0}
.metric-label{font-size:13px;color:var(--muted)}
.metric-val{font-size:16px;font-weight:500;overflow-wrap:anywhere}
/* the line is a record, not a verdict: muted, amber only when the value is */
.spark{display:block;width:120px;height:34px;color:var(--muted)}
.spark.warn{color:var(--amber)}
.item.session{align-items:center}
.item-text .item-title{display:block}
.item-sub{display:block;font-size:13px;color:var(--muted)}

/* ---------- 17 Sep 2026: fixes from the QA run ---------- */
/* a button whose 2 labels share 1 cell: as wide as the longer from the start, so arming never moves it */
.armable{display:inline-grid;align-items:center;justify-items:center}
.link.armable{justify-items:start}
.item-state .link.armable{justify-items:end}
.armable > .lbl{grid-area:1/1;white-space:nowrap}
.armable > .lbl.alt,.armable[data-armed="1"] > .lbl{visibility:hidden}
.armable[data-armed="1"] > .lbl.alt{visibility:visible}
.primary.armable,.secondary.armable{display:grid}
.secondary.small.armable{display:inline-grid}
.row-acts > .armable{display:grid}
.btn-col{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-top:6px}
#captures{margin-top:12px}
.row-meta > span{white-space:nowrap}
.row-why{font-size:14px;color:var(--muted);line-height:1.4}
.row-pending-line{display:flex;align-items:center;gap:12px;min-height:var(--h-s)}
.row-pending-line .row-pending{flex:1;min-width:0}
.row-failed{display:flex;align-items:center;gap:12px;min-height:var(--h-s);font-size:13px;color:var(--warn)}
.row-failed-text{flex:1;min-width:0}
.item.need .row-failed{margin-top:-4px}
.waiting-line:last-child{border-bottom:0;margin-bottom:0}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sheet-head .sheet-title{flex:1;min-width:0;padding-top:10px}
.sheet-close{flex:none;padding:0 2px 0 8px}
.sheet-confirm{display:grid;gap:10px;margin:6px 0 12px;padding:12px;border:1px solid color-mix(in srgb,var(--amber) 55%,var(--line));border-radius:var(--r-l);background:var(--panel2);font-size:15px}
.sheet-confirm-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.secondary.danger{color:var(--warn)}
.metric-graph{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.metric-span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.money-exact{margin:8px 0 0;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.glance-more .item-sub{margin-top:1px}
/* the name as the brand sets it: capitals, wide tracking, the second half lighter in the brand colour */
.wordmark{text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.wordmark > span{font-weight:400;color:var(--brand)}

/* the bell (17 Sep 2026): at the right of every screen's header; its number is the icon's */
.head-acts{display:flex;align-items:flex-start;gap:8px;flex:none}
.bell{position:relative;flex:none;display:grid;place-items:center;width:var(--h-m);height:var(--h-m);margin-top:2px;padding:0;border-radius:999px;border:1px solid var(--line);background:none;color:var(--text)}
.bell svg{width:22px;height:22px}
.bell-count{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--brand);color:var(--on-brand);font-size:12px;font-weight:600;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.bell-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px}
.bell-line{margin:0;font-size:15px;color:var(--muted)}
.bell-item{align-items:flex-start}
.bell-item > .dot{align-self:flex-start;margin-top:7px}
.bell-item:not(.read):not(.sent) > .dot{background:var(--brand);box-shadow:none}
.bell-item .item-text{display:grid;gap:6px;min-width:0}
.bell-text{overflow-wrap:anywhere}
.bell-item.read .bell-text{color:var(--muted)}
.bell-item .row-acts{gap:6px}
.bell-item .row-acts > .secondary.small{padding:0 4px;white-space:nowrap}
@media (max-width:359px){.bell-item .row-acts > .secondary.small{font-size:14px}}

/* Links. This app renders none today, which is exactly why this is here: on the wiki the
   same gap sat latent on 13 of 14 tabs and surfaced the moment one of them gained a link,
   as browser purple on a dark card (2026-09-20). A link inherits the colour of the text it
   sits in and is marked by an underline, so it cannot be off-brand on any surface here.
   :where() keeps specificity at 0, so any rule below still wins. Craft rule 3.8. */
:where(a){ color:inherit; }
:where(p a, li a, td a, .quiet a, .extra a){
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset:2px; text-decoration-thickness:1px;
}
:where(a):focus-visible{ outline:2px solid currentColor; outline-offset:2px; border-radius:2px; }

/* ---------- 24 Sep 2026, direction A: every control says what it does ----------
   His ask: "make it obvious or somehow indicate what it will do... Consider that I've never seen this app before."
   A button that changes something shows a verb over what the tap does; a card says once how its Undo works; a row
   that opens something carries a chevron; after a tap a strip at the buttons' height says what happened. Placed last
   so each rule wins over the older rule of the same weight above. */

/* a verb over what the tap does: the second line is small and muted, and cut rather than wrapped */
.act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;text-align:center}
.act-verb{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:15px;font-weight:600;line-height:1.15;white-space:nowrap}
.act-what{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:500;line-height:1.15;color:var(--muted)}
.secondary.act{height:var(--h-m);padding:0 8px}
.secondary.small.act{height:var(--h-s);padding:0 6px}
.secondary.small.act .act-verb{font-size:14.5px}
.secondary.small.act .act-what{font-size:12px}
.primary.act{width:100%;height:var(--h-l);padding:0 14px}
.primary.act .act-verb{font-size:17px}
.primary.act .act-what{font-size:13px;color:var(--on-brand);opacity:.78}
.head-btn.act{gap:1px;padding:0 12px}
.head-btn.act .act-verb{font-size:15px}
.head-btn.act .act-what{font-size:12px}
/* a text link with a second line: the verb in the link colour, left aligned */
.link.act{align-items:flex-start;gap:1px;padding:4px 0;text-align:left}
.link.act .act-verb{font-weight:500;color:var(--accent)}
.link.act.center{align-items:center;text-align:center}
.item-state .link.act{margin:-12px 0}
.item-state .link.act .act-verb{font-size:14px}
.item-state .link.act .act-what{font-size:12px}
/* a button asking for a second tap: both states share 1 cell (armedButton), each a verb over its line */
.act.armable{display:inline-grid;align-items:center}
.primary.act.armable,.secondary.act.armable{display:grid}
.act.armable > .lbl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;max-width:100%}
.link.act.armable > .lbl{align-items:flex-start}
.item-state .link.act.armable{justify-items:end}
.item-state .link.act.armable > .lbl{align-items:flex-end;text-align:right}
.secondary.act[data-armed="1"] .act-verb,.secondary.act[data-armed="1"] .act-what,
.link.act[data-armed="1"] .act-verb,.link.act[data-armed="1"] .act-what{color:var(--amber)}
.primary.act[data-armed="1"]{filter:brightness(.88)}
.primary.act:disabled .act-what,.secondary.act:disabled .act-what{opacity:1}

/* what a tap did, in the buttons' place and at their height, with Undo while the Mac has not taken it */
.strip{display:flex;align-items:center;gap:10px;min-width:0;height:var(--h-m);padding:0 4px 0 12px;
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel2)}
.strip.s{height:var(--h-s)}
.strip-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.3}
.strip > .link{flex:none;padding:0 10px;font-weight:600}
/* a strip that takes the place of a card's row of buttons keeps the row's top margin, so nothing below moves */
.card > .strip{margin-top:10px}
/* a short text link (Undo, Hide) is still a 44 px target each way */
.link.small{min-width:var(--h-s);justify-content:center}
/* on a task it sits under the title, where nothing had to hold a height, so it may take 2 lines */
.strip.grow{height:auto;min-height:var(--h-s);padding-top:4px;padding-bottom:4px}
.strip.grow .strip-text{white-space:normal;font-size:13px;color:var(--accent)}

/* the line a card or a screen says once about its buttons and their Undo */
.lead{margin:0 0 6px;font-size:14px;line-height:1.4;color:var(--muted)}
.lead.screen-lead{margin:0 2px 2px}
.lead.under-head{margin:6px 2px 0}
.form-note{margin:2px 0 -4px;font-size:13px;font-weight:600;color:var(--muted)}

/* the line under Save: the result and its Undo, or how to take a Save back; it keeps its room */
.said-line{display:flex;align-items:center;gap:10px}
.said-text{flex:1;min-width:0;color:var(--text)}
.said-text.quiet-text{color:var(--muted)}
.said-line > .link{flex:none;font-weight:600}

/* Needs you: 2 buttons side by side, the question's words with a chevron (sample A) */
.need-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.need-acts.one{grid-template-columns:minmax(0,1fr)}
.need-text{align-items:center}
.need-text .chev{margin:0 4px 0 2px}
.waiting-line{display:flex;align-items:center;gap:10px}
.waiting-text{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.waiting-sub{font-size:13px;font-weight:400;color:var(--muted)}
.answered{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.answered-head{margin:0 0 2px;font-size:13px;font-weight:600;color:var(--muted)}
.answered .item{align-items:flex-start}
.answered .dot{align-self:flex-start;margin-top:7px}
/* the AI worker's line on Pause and Resume sits apart from the run times above it */
.lead.worker-lead{margin-top:10px}
.dot.done{background:var(--brand);box-shadow:none}

/* chevrons: right for a row that opens a screen or a sheet, down for one that opens in place, up once open */
.chev{flex:none}
.chev.down{transform:rotate(45deg) translateY(-2px)}
.chev.up{transform:rotate(-135deg) translateY(-2px)}
.row-main{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.row-text{display:flex;flex-direction:column;gap:2px;min-width:0}

/* a switch: its name, and under it what turning it on does */
.tick{padding:4px 0}
.tick-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.tick-hint{font-size:13px;font-weight:400;line-height:1.35;color:var(--muted)}

/* rows of 2 equal buttons (the AI worker, alerts), and 2-line sign-out links */
.btn-row > .act{flex:1 1 auto;min-width:0}
.btn-row.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.btn-col{gap:4px}
.btn-col .link.act{min-height:var(--h-s)}

/* the bell: each row's buttons share its width equally, however many it has */
.bell-item .row-acts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.bell-item .row-acts > .act{width:100%;min-width:0;padding:0 4px}
.bell-head .act{flex:none}

/* the question before a sheet with something unsaved closes */
.sheet-confirm-text{font-size:15px;line-height:1.4}
.sheet-confirm-acts > .act{width:100%}
.secondary.danger .act-verb{color:var(--warn)}

/* clearing asks for a second tap: the armed button says so over the field's corner, and the field turns amber */
.clear-btn .clear-again{display:none}
.clear-btn[data-armed="1"]{width:auto;padding:0 14px;border-radius:999px;background:var(--panel2);color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.clear-btn[data-armed="1"] .clear-x{display:none}
.clear-btn[data-armed="1"] .clear-again{display:inline;font-size:14px;font-weight:600;white-space:nowrap}
.clearable.clearing > textarea,.clearable.clearing > input{border-color:var(--amber)}

/* narrow phones, down to 320 px (craft rule 2.3): the second lines get smaller, a strip may take 2 smaller lines inside
   the same height (so nothing is cut and nothing below moves), and a pair of buttons no strip replaces stacks */
@media (max-width:379px){
  .act-what{font-size:11.5px}
  .primary.act .act-what{font-size:12px}
  .secondary.small.act .act-what{font-size:11px}
  .strip-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;font-size:13px;line-height:1.25}
}
@media (max-width:339px){
  .act-what,.secondary.small.act .act-what{font-size:11px}
  .secondary.act .act-verb{font-size:14px}
  .secondary.small.act .act-verb{font-size:13.5px}
  .strip-text{font-size:12.5px}
  .bell-item .row-acts{gap:4px}
  .bell-item .row-acts > .act{padding:0 2px}
  .btn-row.two.stack-narrow{grid-template-columns:minmax(0,1fr)}
}

/* The screen headers (24 Sep 2026): the title and the screen's own buttons share the first row, and the line under the
   title has the whole width of the second, so it never wraps beside a 2-line button (on System, "Updated Today 09:38,
   2 min ago" beside Refresh left "ago" alone on a second line at 390 px). The same on every screen. Balanced, so a long
   line (the Mac quiet for a day, on a 320 px phone) breaks into 2 even lines, never a word alone. */
.head.row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title acts" "sub sub";align-items:center;column-gap:12px;row-gap:2px}
.head.row > div:first-child{display:contents}
.head.row > div:first-child > h1{grid-area:title;min-width:0}
.head.row > div:first-child > .sub{grid-area:sub;text-wrap:balance}
.head.row > .head-acts,.head.row > .bell{grid-area:acts;justify-self:end}
.head.row > .head-acts{align-items:center}
.head.row .head-btn,.head.row .bell{margin-top:0}
/* a card's own heading breaks evenly too ("AI suggestions waiting for you" left "you" alone at 320 px) */
.card-head{text-wrap:balance}