/* Spark skin: the touches tokens alone cannot carry (Gist-Skins.pdf, skin 4 of 5). Loaded last.
   Styles only: no markup or behaviour depends on this file. Colours come from tokens.css. */

/* the Spark wordmark: cobalt mark, grotesk name (same box as the old wordmark) */
img.logo{content:url(/assets/logo-spark.svg)}

/* chunky grotesk headings */
.front h1,.catch h1,.solo.join h1,.ws-head h1,.need p{font-family:var(--serif);font-weight:700;letter-spacing:-.025em}
.sect h2,.sec-lbl,.bk-lbl,.sechd .h,.jh,.dhead .ttl{font-family:var(--serif);font-weight:700;letter-spacing:-.02em}
.g-hero h1{font-weight:700;letter-spacing:-.02em}
.prow .pic{font-family:var(--serif);font-weight:700;background:var(--red-tint);color:var(--brand)}
.catch .pt{color:var(--ink-2)}

/* the catch-up card: info role, a light accent tint with a thin accent bar (Daniel, Oct 8 4:20 PM:
   the solid cobalt was too aggressive). Dark ink on the tint keeps AA (16:1 title, 8:1 points). */
.g-card.g-hero{background:var(--info-wash);color:var(--info-ink);box-shadow:inset 3px 0 0 var(--info);border:1px solid var(--info-rule)}
.g-hero h1{color:var(--info-ink)}
.g-hero .pt{color:var(--ink-2)}
.g-hero .pt b{color:var(--info-ink)}
.g-hero .receipt,.g-hero .muted{color:var(--muted)}
.g-hero .receipt.warn{color:var(--important);font-weight:600}

/* "Waiting on you": attention role, calm: a pale yellow wash, a soft yellow bar, the yellow dot */
.g-callout{background:var(--attention-wash);border:1px solid var(--callout-rule);box-shadow:inset 3px 0 0 var(--attention-bar)}
.g-callout .tag{color:var(--attention-ink);text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:700}
.g-callout .tag i{background:var(--attention-dot);box-shadow:0 0 0 1.5px rgba(14,15,18,.18)}
.g-callout .g-chip{background:var(--card);color:var(--ink)}
.g-callout .g-link{color:var(--action)}
.g-callout .g-link.quiet{color:var(--muted)}
.need{background:var(--attention-wash);border-left:0;box-shadow:inset 3px 0 0 var(--attention-bar);border-radius:var(--r-tile)}
.need h2{color:var(--attention-ink)}
.code-big{background:var(--attention-wash);border-left:0;box-shadow:inset 3px 0 0 var(--attention-bar);border-radius:var(--r-tile)}
.todo-lbl i{background:var(--attention-dot);box-shadow:0 0 0 1.5px rgba(14,15,18,.25)}
.todo-card.on-you{background:var(--attention-wash);box-shadow:inset 3px 0 0 var(--attention-bar),0 0 0 1px var(--callout-rule)}
.todo-card.on-you .todo-main{background:var(--attention-wash)}

/* action role: every primary button is the same blue with the same hover and pressed state */
.btn,.g-btn,.need .btn,.g-callout .g-btn{background:var(--action);color:var(--action-ink)}
.btn:hover,.g-btn:hover,.need .btn:hover,.g-callout .g-btn:hover{background:var(--action-hover)}
.btn:active,.g-btn:active,.need .btn:active,.g-callout .g-btn:active{background:var(--action-press)}
.btn.ghost{background:transparent;color:var(--action)}
.btn.ghost:hover{background:var(--action-tint)}
.btn.ghost:active{background:var(--action-tint-hover)}
.todo-see{background:var(--action-tint);color:var(--action)}
.todo-see:hover{background:var(--action-tint-hover)}
.link-btn.strong,.g-link,.g-go,.more,.stack-more{color:var(--action)}

/* done role: a finished thing is a green check */
.todo-check.on,.todo.completing .todo-check{background:var(--done);border-color:var(--done)}
.todo-act.done{background:var(--done)}
.todo-act.dismiss{background:var(--muted)}
/* question and answer bands: rounded tint cards, no rule on the left */
.qcard,.answer{border-left:0;border-radius:var(--r-tile);background:var(--red-tint)}
.pending-card{border-radius:var(--r-tile)}
.sumcard{border-radius:var(--r-tile)}
.sumcard:before{display:none}
.sumcard .serif-line{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}

/* pill buttons */
.btn{border-radius:999px}
.link-btn.danger{color:var(--danger)}
.crow-link:hover,.prow a:hover{background:rgba(44,63,224,.04)}
.bub-row.me .bub{background:var(--brand);color:#fff}

/* phone: the black floating tab bar with a lime pill on the current tab */
@media (max-width:700px){
  .topbar{background:var(--paper)}
  .tabbar{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));border:0;border-radius:999px;background:var(--bar);padding:6px;gap:2px;box-shadow:0 10px 30px -12px rgba(14,15,18,.55)}
  .tabbar a{color:#A9ACB5;border-radius:999px;padding:7px 0 6px;font-weight:600}
  .tabbar a.on{color:var(--ink);background:var(--lime)}
  .navbar{background:var(--paper)}
}

/* desktop rail: the current page in black with a lime mark */
.nav a.on{background:var(--ink);color:#fff}
.nav a.on svg{color:var(--lime)}

/* Chat and project rows as cards (Daniel, 5:47 PM): the chat's avatar with a tiny transport mark, a
   white card with a hairline, a firmer edge and a chevron on hover, a focus ring for keys. */
.clist,.plist{max-width:var(--content-max);margin-left:auto;margin-right:auto;padding-top:var(--s3)}
.list-wrap > .pending-card{margin:var(--s4) var(--s5) 0}
@media (min-width:701px){ .list-wrap > .pending-card{max-width:calc(var(--content-max) - 2 * var(--s6));margin:var(--s4) auto 0} }
.crow,.prow{list-style:none;padding:0 var(--s5);margin:0 0 8px}
@media (min-width:701px){ .crow,.prow{padding:0 var(--s6)} }
.crow-link,.prow a{display:grid;grid-template-columns:8px 44px minmax(0,1fr) 14px;column-gap:12px;align-items:center;min-height:72px;padding:12px 14px 12px 8px;background:var(--card,#fff);border:1px solid rgba(14,15,18,.1);border-radius:12px;cursor:pointer;transition:border-color .14s ease,box-shadow .14s ease;text-decoration:none}
.prow a{grid-template-columns:44px minmax(0,1fr) 14px;padding-left:14px}
.crow + .crow .crow-link::before,.prow + .prow a::before{display:none}
.crow-link:hover,.prow a:hover{background:var(--card,#fff);border-color:rgba(14,15,18,.22);box-shadow:0 2px 10px rgba(14,15,18,.07)}
.crow-link:focus-visible,.prow a:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.crow .udot{width:8px;height:8px}
.crow .chev,.prow .chev{color:var(--muted);opacity:0;transition:opacity .14s ease;display:flex;justify-content:flex-end}
.crow-link:hover .chev,.prow a:hover .chev,.crow-link:focus-visible .chev,.prow a:focus-visible .chev{opacity:1}
@media (hover:none){ .crow .chev,.prow .chev{opacity:.55} }
.cav{position:relative;display:inline-flex;flex:none}
.tmark{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 2px var(--card,#fff);background:#25D366 center/9px 9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 3C6.5 3 2 6.9 2 11.7c0 2.6 1.3 4.9 3.4 6.5L4.6 22l4.2-2.2c1 .3 2.1.4 3.2.4 5.5 0 10-3.9 10-8.7S17.5 3 12 3z'/%3E%3C/svg%3E")}
.tmark.sms{background-color:#8E8E93}
.mini .cav .tmark{width:12px;height:12px;background-size:7px 7px;right:-2px;bottom:-2px}
@media (prefers-reduced-motion:reduce){ .crow-link,.prow a,.crow .chev,.prow .chev{transition:none} }

/* Key facts folded under Contents (Daniel, 6:12 PM): one row with a count and a chevron. */
.g-facts{margin-top:var(--s5)}
.g-facts .g-n{color:var(--ink-3);font-weight:400}
.g-chev{flex:none;display:flex;color:var(--ink-3);transition:transform .16s ease}
.g-facts.open .g-chev{transform:rotate(90deg)}
.g-facts .list{list-style:none;margin:0;padding:0;border-top:1px solid var(--card-rule)}
@media (prefers-reduced-motion:reduce){ .g-chev{transition:none} }

/* The dock is always on top (Daniel, 6:14 PM: the Waiting on you card painted over it). Cards with
   their own layers (swipe rows, hover blur) stay under it; only the viewer and toasts sit above. Page
   bottoms clear the dock and the phone's home bar. */
@media (max-width:700px){
  .tabbar{z-index:1000;isolation:isolate}
  .wrap:not(:has(> .export-kind)),.colw,.colw.g-page{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
}
.lb{z-index:1100}
.toast{z-index:1200}

/* Summary card, easier to take in (Daniel, 6:13 PM): a smaller semibold headline, body-size points
   with a quiet dot, more room. */
.g-card.g-hero{padding:22px 22px 20px}
.g-hero h1{font-family:var(--sans);font-size:20px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
.g-pts{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.g-hero .g-pts .pt{position:relative;margin:0;padding-left:16px;font-size:16px;line-height:1.5}
.g-hero .g-pts .pt::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45}
@media (min-width:701px){ .g-hero h1{font-size:22px} }

/* Contents folded the same way (Daniel, 7:00 PM): open, the By topic / By date switch sits above the list. */
.g-fold-tools{display:flex;justify-content:flex-end;padding:var(--s2) var(--s4);border-top:1px solid var(--card-rule)}

/* A WhatsApp group's real photo as the chat icon (it wins over the letters). */
img.gav.gpic{object-fit:cover;background:var(--avatar-bg)}

/* Agent chats (Daniel, Oct 8 6:55 PM): where it stands, on you, agent doing + queue, decided, ideas, shipped. */
.ag-chip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--chip-bg);color:var(--ink-2);font:600 11px var(--sans);letter-spacing:.02em;text-transform:none;vertical-align:1px}
.ag-stands .ag-where{margin:0;font:600 18px/1.45 var(--sans);color:var(--ink);letter-spacing:-.005em}
@media (min-width:900px){ .ag-stands .ag-where{font-size:19px} }
.ag-card{padding:0;overflow:hidden}
.ag-card .g-empty{padding:14px 20px}
.ag-row .ag-mark{flex:none;width:8px;height:8px;margin:8px 2px 0 4px;border-radius:50%;background:var(--ink-4)}
.ag-onyou .ag-mark{background:var(--attention-dot,var(--attention));box-shadow:0 0 0 1.5px rgba(14,15,18,.22)}
.ag-doing .ag-mark{background:var(--ink-4)}
.ag-idea .ag-mark{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.ag-text{text-decoration:none;color:var(--ink)}
.ag-text:hover{text-decoration:underline;text-decoration-color:var(--ink-4)}
.ag-doing .todo-title,.ag-idea .todo-title{font:600 16px/1.4 var(--sans)}
.ag-ok{flex:none;width:28px;height:28px;margin:-2px 0 0;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);opacity:0;border:0;background:none;cursor:pointer;transition:opacity .15s,background .15s}
.todo-main:hover .ag-ok,.todo:focus-within .ag-ok{opacity:1}
.ag-ok:hover{background:var(--tint);color:var(--done,var(--settled))}
@media (hover:none){ .ag-ok{display:none} }
.ag-row .todo-act.done{background:var(--done,var(--settled))}
.ag-sub{padding:12px 20px 4px;font:600 12px var(--sans);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;border-top:1px solid var(--card-rule)}
.ag-card .todo-list + .ag-sub{margin-top:0}
.ag-queue{list-style:none;margin:0;padding:4px 0 10px}
.ag-queue li{display:flex;gap:12px;align-items:baseline;padding:7px 20px}
.ag-queue .no{flex:none;width:18px;font:600 13px var(--sans);color:var(--ink-3);text-align:right}
.ag-queue a,.ag-decided a,.ag-shipped a{color:var(--ink);text-decoration:none;font-size:15px;line-height:1.4}
.ag-queue a:hover,.ag-decided a:hover,.ag-shipped a:hover{text-decoration:underline;text-decoration-color:var(--ink-4)}
.ag-decided{list-style:none;margin:0;padding:8px 0}
.ag-decided li{display:flex;gap:10px;align-items:flex-start;padding:8px 20px}
.ag-tick{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;display:grid;place-items:center;background:var(--done,var(--settled));color:#fff}
.ag-shipped li{padding:8px 20px;border-top:1px solid var(--card-rule)}
.ag-shipped li:first-child{border-top:0}
.ag-hint{font-weight:500;color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){ .ag-hint{display:none} }
.g-kind{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:var(--s6);font-size:13px;color:var(--ink-3)}
.toast.has-act{display:flex;align-items:center;gap:14px;padding-right:8px}
.toast-act{border:0;background:rgba(255,255,255,.14);color:#fff;font:600 13px var(--sans);padding:6px 12px;border-radius:999px;cursor:pointer}
.toast-act:hover{background:rgba(255,255,255,.24)}
.ag-row .todo-title{-webkit-line-clamp:3}

/* Subject chat icons (Daniel, Oct 9 3:01 PM): a glyph on a round tile whose colour means the kind of subject. */
.gav.sicon{background:none;overflow:hidden}
.gav.sicon svg{width:100%;height:100%;display:block}
.g-icon{gap:8px;flex-wrap:wrap}
.g-icon .sub{color:var(--ink-3)}
.g-icon .lbl{color:var(--ink-2)}
.g-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;max-width:560px;margin:12px auto 0;padding:12px;background:var(--card);border:1px solid var(--line, rgba(14,15,18,.1));border-radius:16px}
.g-icons button{border:0;background:none;padding:3px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.g-icons button svg{width:36px;height:36px;display:block}
.g-icons button.on{box-shadow:0 0 0 2px var(--ink)}
.g-icons button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.g-icons .g-auto{grid-column:1/-1;border-radius:var(--r-chip, 999px);background:var(--chip-bg);font:500 13px var(--font-ui);color:var(--ink);padding:8px 12px}

/* ---------------------------------------------------------------------------------------------
   Human vs agent (Daniel, Oct 10 2026, 9:27 PM). One rule everywhere: people chats are ROUND tiles;
   an agent is a ROUNDED-SQUARE tile with the bot glyph and a grey "Agent" word by its name; a people
   chat with an agent in it stays round with a tiny square bot badge. Shape and a word, no new colour.
   Agent chips are task state: Needs you (lime), Late (coral), On it (grey + spinner), Delivered
   (green check). */
.gav.atile{border-radius:28%;background:var(--tint);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(14,15,18,.12)}
.gav.atile svg{display:block}
.abadge{position:absolute;right:-4px;top:-4px;width:18px;height:18px;border-radius:6px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--card,#fff)}
.mini .cav .abadge{width:14px;height:14px;border-radius:4px;right:-3px;top:-3px}
.mini .cav .abadge svg{width:8px;height:8px}
.alabel{display:inline-block;margin-left:6px;font:600 11.5px/1 var(--sans);letter-spacing:.02em;color:var(--ink-3);vertical-align:2px;white-space:nowrap}
.crow .name{display:flex;align-items:baseline;min-width:0}
.crow .name .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.crow .name .alabel{flex:none;vertical-align:baseline}
.nav .nm + .alabel,.dhead .ttl + .alabel{margin-left:8px}
.schip.waiting{display:inline-flex;margin:0;font-size:12.5px;gap:5px}
.schip.late{background:var(--important-tint);color:var(--important)}
.schip .spin{width:9px;height:9px;border-radius:50%;border:1.6px solid currentColor;border-right-color:transparent;animation:gspin .9s linear infinite;flex:none}
.schip .tk{display:inline-flex}
@keyframes gspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .schip .spin{animation:none;border-right-color:currentColor;opacity:.6} }

/* Agents tab: the Chats skeleton. The hero is lime when something needs you, coral-edged when late. */
.agents-list .front .need{margin-top:var(--s4)}
.need.late{background:var(--card);box-shadow:inset 3px 0 0 var(--important)}
.need.late h2{color:var(--important)}
.need p.s{font:500 14px/1.4 var(--sans);color:var(--ink-3);margin:6px 0 0}
.need p + .btn{margin-top:var(--s4)}
.viewby .ct{font-weight:500;color:var(--ink-3);font-size:14px;margin-left:2px}
.viewby .on .ct{color:inherit}
.agents-foot{padding:var(--s2) var(--s5) var(--s6)}
@media (min-width:701px){ .agents-foot{padding:var(--s2) var(--s6) var(--s6)} }
.agents-foot .sec-lbl{margin:var(--s4) 0 var(--s2)}
.achips{display:flex;flex-wrap:wrap;gap:8px}
.achip{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:var(--card);border:1px solid rgba(14,15,18,.1);font:500 14px/1 var(--sans);color:var(--ink);text-decoration:none}
.achip .gav.atile{--s:26px}
.mark-row{display:flex;align-items:center;gap:8px;margin-top:var(--s4);padding:12px 14px;width:100%;border-radius:12px;border:1px dashed rgba(14,15,18,.22);background:transparent;font:500 15px/1 var(--sans);color:var(--action);cursor:pointer}
.mark-sheet{margin-top:var(--s4);padding:var(--s4);border-radius:16px;background:var(--card);box-shadow:0 8px 30px rgba(14,15,18,.12)}
.mark-sheet .ms-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.front .date .gav.atile{--s:22px;vertical-align:-6px;margin-right:4px}

/* One agent task: compact summary, then the folded thread. */
.at-sum{padding:18px 20px}
.at-asked{font:500 13px/1.3 var(--sans);color:var(--ink-3);margin:0 0 6px}
.at-q{font:700 20px/1.3 var(--serif);letter-spacing:-.015em;color:var(--ink);margin:0}
.at-state{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:12px}
.at-when{font:500 13.5px/1.3 var(--sans);color:var(--ink-2)}
.at-prog{flex:1 1 90px;min-width:80px;height:6px;border:0;border-radius:99px;background:var(--rule-2);overflow:hidden;-webkit-appearance:none;appearance:none;color:var(--ink-2)}
.at-prog::-webkit-progress-bar{background:var(--rule-2);border-radius:99px}
.at-prog::-webkit-progress-value{background:var(--ink-2);border-radius:99px}
.at-prog::-moz-progress-bar{background:var(--ink-2);border-radius:99px}
.at-pct{font:600 13px/1 var(--sans);color:var(--ink-2)}
.at-line{margin:12px 0 0;font:400 15px/1.45 var(--sans);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.at-line b{color:var(--ink);font-weight:600}
.at-files{display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.th{flex:none;width:76px;text-decoration:none;color:var(--ink-2)}
.th img,.th .xt{display:flex;width:76px;height:76px;border-radius:12px;object-fit:cover;background:var(--tint);align-items:center;justify-content:center;font:700 12px/1 var(--mono);color:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(14,15,18,.08)}
.th .nm{display:block;margin-top:4px;font:500 11.5px/1.25 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th.pending{opacity:.55}
.at-sum .at-acts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-2)}
.at-page .g-lbl{margin-top:var(--s5)}
.tl-card{padding:6px 16px}
.tl-toggle{font-size:14px}

/* The folded thread: people's asks whole, an agent's run as one-line steps. */
.tl{display:flex;flex-direction:column}
.tl>*{padding:10px 0;border-top:1px solid var(--rule-2)}
.tl>*:first-child{border-top:0}
.tl-ask .tl-h{display:flex;gap:8px;align-items:baseline;font:600 14px/1.3 var(--sans);color:var(--ink)}
.tl-ask .tl-h time,.tl-step time{font:500 12.5px/1.3 var(--sans);color:var(--ink-3);font-variant-numeric:tabular-nums}
.tl-ask details>summary{list-style:none;cursor:pointer}
.tl-ask details>summary::-webkit-details-marker{display:none}
.tl-ask details:not([open]) p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.tl-ask details[open] .tl-more{display:none}
.tl-ask .tl-more{display:inline-block;margin-top:2px}
.tl-ask p{margin:4px 0 0;font:400 15.5px/1.45 var(--sans);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.tl-who{display:flex;align-items:center;gap:6px;font:600 14px/1.3 var(--sans);color:var(--ink);margin-bottom:4px}
.tl-who .gav.atile{--s:22px}
.tl-who .alabel{margin-left:0}
.tl-who .n{margin-left:auto;font:500 12.5px/1 var(--sans);color:var(--ink-3)}
.tl-steps{list-style:none;margin:0;padding:0 0 0 10px;border-left:2px solid var(--rule-2);margin-left:10px}
.tl-step .sum,.tl-step summary{display:grid;grid-template-columns:58px minmax(0,1fr) auto;column-gap:6px;padding:4px 0 4px 8px;list-style:none;cursor:default}
.tl-step summary{cursor:pointer}
.tl-step summary::-webkit-details-marker{display:none}
.tl-step .t{grid-column:2;font:400 14.5px/1.4 var(--sans);color:var(--ink-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.tl-step time{grid-column:1;grid-row:1;padding-top:1px}
.tl-step.newest .t{-webkit-line-clamp:2;color:var(--ink)}
.tl-step details[open] .t{-webkit-line-clamp:unset;display:block;white-space:pre-wrap}
.tl-more{grid-column:3;grid-row:1;align-self:start;padding-top:1px;font:600 12.5px/1.3 var(--sans);color:var(--action)}
.tl-step details[open] .tl-more{display:none}
.tl-files{grid-column:2;display:inline-flex;align-items:center;gap:4px;font:500 12.5px/1.3 var(--sans);color:var(--ink-3)}
.tl-ask .tl-files{margin-top:4px}
.tl-gap>details>summary{padding:4px 0 4px 8px;font:600 13px/1.3 var(--sans);color:var(--action);cursor:pointer;list-style:none}
.tl-gap>details>summary::-webkit-details-marker{display:none}
.tl-gap .tl-steps{border-left:0;margin-left:0;padding-left:0}
.tl-full{padding:6px 0}
.ag-thread .tl-bar{margin-top:var(--s3)}

/* The agent chat page, folded to one screen. */
.ag-state{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ag-state .schip{font-size:12.5px;line-height:1}
.ag-page .ag-stands .ag-where{font-size:17px;line-height:1.45}
.ag-more{display:block;margin:4px 20px 10px}
.ag-folds .ag-fold .todo-list,.ag-folds .ag-fold .ag-decided,.ag-folds .ag-fold .ag-shipped{padding:0 4px 12px}
.ag-folds .ag-hint{margin:0 20px 12px;font-size:13px;color:var(--ink-3)}
.ag-qhd{margin-top:4px}
.src .h .gav.atile{--s:18px;vertical-align:-4px;margin-right:6px}
.src .h .gav.atile svg{width:12px;height:12px}
.src .h .alabel{margin:0 6px 0 4px}

/* Consistency test (Oct 10 2026, 10:07 to 10:12 PM): states, fading, Quiet, and short agent pages.
   Eye-draw is for what needs the person: only On you (lime) and Late (coral) are loud; faded loops go quiet. */
.trow.fade-dim{opacity:.62}
.trow.fade-quiet{opacity:.55}
.trow .racts{display:flex;gap:8px;padding:0 16px 12px 76px;margin-top:-4px}
.ract{display:inline-flex;align-items:center;gap:4px;font:500 13px/1 var(--font-ui,inherit);color:var(--ink-2);background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:6px 12px;cursor:pointer}
.ract:hover{border-color:var(--ink-4)}
.schip.faded{opacity:.9}
.agents-sections .ag-sec{margin-left:16px}
.agents-sections>.ag-more,.agent-page>.ag-more{margin:4px 16px 0}
.ag-foldwrap{margin:10px 12px 0;background:var(--card);border-radius:var(--r-card,16px);overflow:hidden}
.ag-foldwrap .g-hd{min-height:48px;padding:10px 16px}
.ag-foldwrap .g-hd .ss{font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-foldwrap.open .g-chev{transform:rotate(90deg)}
.ag-stands-line{display:flex;align-items:flex-start;gap:10px;padding:12px 16px}
.ag-stands-line .ag-where1{flex:1;min-width:0;margin:0;font:400 15px/1.35 var(--sans,inherit);color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.ag-stands-line .g-go{flex:none;margin:0}
.ag-short .todo-title{font-weight:400;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
.ag-tight .g-lbl{margin-top:var(--s4,16px)}
.ag-rest{margin-top:var(--s4,16px)}
.slots .slot-decided,.slots .slot-files{padding:14px 18px}
.slot-decided .ag-decided{margin:0}
.quiet-need{background:var(--card);border:1px solid var(--rule)}