/* The "soft" look (Kellan, 10/6): the board restyled after the round-4 H1 mockups, which
   take Things 3 as the reference. Loaded last. One set of rules for both themes, drawn
   from the --sf-* palette below, so dark is the same design as light, not a recolour:
   - a pale page (a deep one in dark) with cards lifted on a soft shadow, no borders;
   - one blue accent; regular-weight titles with tiny grey meta under them;
   - each control in the form people already read: pick-one choices (the owner filter,
     the time scope, every Settings choice) as a segmented control with a raised thumb;
     the column filters as show/hide chips, a check when on and a + when off; actions as
     small pills, Send to Claude the one tinted blue. */
:root[data-theme="light"]{
  --sf-page:#f1f4f7;--sf-rail:#fafbfc;--sf-card:#fff;--sf-raise:#fff;--sf-track:#e4e8ed;
  --sf-fill:#eceff3;--sf-fill-hover:#e3e7ec;--sf-row-hover:#eef1f5;
  --sf-ink:#1d2129;--sf-title:#22262e;--sf-ink-3:#5b6270;--sf-muted:#8a909c;--sf-meta:#9aa1ad;--sf-faint:#a0a6b1;
  --sf-line:#dde2e8;--sf-rail-line:#e3e7ec;--sf-border:#d3d9e0;--sf-border-hover:#b9c1cc;
  --sf-btn-border:#dde2e8;--sf-btn-border-hover:#c9d0d9;--sf-btn-hover:#f7f9fb;
  --sf-accent:#2f6fed;--sf-accent-ink:#1f4fb8;--sf-accent-soft:#6f8fd6;
  --sf-tint:#e6eefd;--sf-tint-hover:#dbe6fc;--sf-tint-line:#c4d4f7;--sf-tint-line-hover:#a9c0f2;
  --sf-live:#e5383b;--sf-live-tint:#fdecec;--sf-live-ink:#b42318;
  --sf-scroll:#c6ccd4;--sf-scroll-hover:#a7afba;--sf-backdrop:#1d212959;
  --sf-type-do:#2f6fed;--sf-type-do-bg:#e6eefd;--sf-type-ask:#6a48e0;--sf-type-ask-bg:#eee9fd;
  --sf-type-risk:#c4500c;--sf-type-risk-bg:#fdebe1;--sf-type-decided:#17794b;--sf-type-decided-bg:#e2f3ea;
  --sf-shadow-card:0 1px 1px #1d21290a,0 2px 10px #1d21290d;
  --sf-shadow-card-hover:0 1px 2px #1d212914,0 8px 22px #1d212914;
  --sf-shadow-thumb:0 1px 2px #1d21291f,0 1px 4px #1d212912;
  --sf-shadow-field:0 1px 2px #1d21290d;
  --sf-shadow-dialog:0 24px 70px #1d212930;
  --sf-shadow-panel:0 1px 3px #1d212912,0 14px 44px #1d212924;
  --paper:#f1f4f7;--surface:#fff;--ink:#1d2129;--muted:#8a909c;--line:#e6e9ee;--accent:#2f6fed;--pale:#eef1f5;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif}
/* Dark: the same layers, deep blue-grey instead of warm black. Shadows barely read on a
   dark page, so a card also carries a faint light ring to lift it; the accent and the
   live red are brighter so they keep their contrast. */
:root[data-theme="dark"]{
  --sf-page:#14161b;--sf-rail:#181b21;--sf-card:#1f232a;--sf-raise:#30353f;--sf-track:#262a31;
  --sf-fill:#2a2e36;--sf-fill-hover:#333842;--sf-row-hover:#22262d;
  --sf-ink:#e8eaed;--sf-title:#e3e6ea;--sf-ink-3:#a3aab5;--sf-muted:#8a919c;--sf-meta:#737a86;--sf-faint:#6b727d;
  --sf-line:#2a2f37;--sf-rail-line:#252931;--sf-border:#363c46;--sf-border-hover:#4a515d;
  --sf-btn-border:#343a44;--sf-btn-border-hover:#454c57;--sf-btn-hover:#262a31;
  --sf-accent:#6b9bff;--sf-accent-ink:#a9c4ff;--sf-accent-soft:#7f9fe0;
  --sf-tint:#1e2a45;--sf-tint-hover:#253457;--sf-tint-line:#2f4370;--sf-tint-line-hover:#3d5590;
  --sf-live:#f2555a;--sf-live-tint:#3a1e21;--sf-live-ink:#ff9d97;
  --sf-scroll:#3a404b;--sf-scroll-hover:#525a67;--sf-backdrop:#000000a6;
  --sf-type-do:#8fb2ff;--sf-type-do-bg:#1e2a45;--sf-type-ask:#b6a3ff;--sf-type-ask-bg:#2a2348;
  --sf-type-risk:#ffa877;--sf-type-risk-bg:#3a261b;--sf-type-decided:#6fd3a0;--sf-type-decided-bg:#1a3328;
  --sf-shadow-card:0 0 0 1px #ffffff0a,0 2px 12px #00000059;
  --sf-shadow-card-hover:0 0 0 1px #ffffff14,0 8px 24px #0000008c;
  --sf-shadow-thumb:0 1px 2px #00000080,inset 0 0 0 1px #ffffff0f;
  --sf-shadow-field:0 0 0 1px #ffffff0a;
  --sf-shadow-dialog:0 24px 70px #000000a6;
  --sf-shadow-panel:0 0 0 1px #ffffff0d,0 16px 48px #0000008c;
  --paper:#14161b;--surface:#1f232a;--ink:#e8eaed;--muted:#8a919c;--line:#2a2f37;--accent:#6b9bff;--pale:#22262d;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif}
:root[data-theme] body,:root[data-theme] main#main{background:var(--sf-page);color:var(--sf-ink)}

/* header */
:root[data-theme] .app-header{background:var(--sf-page);border-bottom:0}
:root[data-theme] .brand span{font-size:22px;letter-spacing:-.6px;font-weight:700}
:root[data-theme] .open-full{border:0;background:transparent;color:var(--sf-ink-3);font-weight:600;padding:6px 4px}
:root[data-theme] .open-full:hover{color:var(--sf-accent);background:transparent}
:root[data-theme] .settings-open{border:0;background:transparent;color:var(--sf-ink-3)}
:root[data-theme] .nav-toggle{border:0;background:transparent;color:var(--sf-ink-3)}
:root[data-theme] .live-pill{--live:var(--sf-live)}
:root[data-theme] #page-title{letter-spacing:-.8px;color:var(--sf-ink)}

/* pick one: a segmented control, one grey track with a raised thumb */
:root[data-theme] .segmented,:root[data-theme] .settings-seg{display:inline-flex;gap:0;padding:2px;border:0;border-radius:9px;background:var(--sf-track);box-shadow:none}
:root[data-theme] body.surface-zoom .segmented{display:flex}
:root[data-theme] .segmented button,:root[data-theme] .settings-btn{flex:1 1 auto;min-height:28px;padding:3px 14px;border:0;border-radius:7px;background:transparent;color:var(--sf-ink-3);font-size:13px;font-weight:600;box-shadow:none}
:root[data-theme] .segmented button:hover:not(:disabled):not([aria-pressed=true]){background:transparent;color:var(--sf-ink)}
:root[data-theme] .segmented button[aria-pressed=true],:root[data-theme] .settings-opt input:checked+.settings-btn{background:var(--sf-raise);border-color:transparent;color:var(--sf-ink);box-shadow:var(--sf-shadow-thumb)}

/* show/hide: the column filters as chips after a "Show" label; the + and the check are
   masks, so they take each theme's colour */
:root[data-theme] body[data-view] .type-nav{gap:6px;align-items:center;margin-left:14px}
:root[data-theme] body[data-view] .type-nav::before{content:"Show";margin-right:2px;color:var(--sf-muted);font-size:12.5px;font-weight:600}
:root[data-theme] body[data-view] .type-nav button{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:3px 11px 3px 9px;border:1px solid var(--sf-border);border-radius:8px;background:transparent;color:var(--sf-ink-3);font-size:13px;font-weight:600}
:root[data-theme] body[data-view] .type-nav button::before{width:12px;height:12px;border:0;border-radius:0;box-shadow:none;background:var(--sf-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.5v7M2.5 6h7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.5v7M2.5 6h7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat}
:root[data-theme] body[data-view] .type-nav button:hover:not(:disabled){border-color:var(--sf-border-hover);background:transparent}
:root[data-theme] body[data-view] .type-nav button[aria-pressed=true]{border-color:var(--sf-tint-line);background:var(--sf-tint);color:var(--sf-accent-ink)}
:root[data-theme] body[data-view] .type-nav button[aria-pressed=true]:hover:not(:disabled){border-color:var(--sf-tint-line-hover);background:var(--sf-tint)}
:root[data-theme] body[data-view] .type-nav button[aria-pressed=true]::before{border:0;box-shadow:none;background:var(--sf-accent-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* search */
:root[data-theme] .search input{border:0;border-radius:10px;background:var(--sf-card);color:var(--sf-ink);box-shadow:var(--sf-shadow-field)}
:root[data-theme] .search svg{color:var(--sf-muted)}

/* Zoom's To-dos / Questions tabs: an underline in the accent */
:root[data-theme] .zoom-tabs{border-bottom:1px solid var(--sf-line)}
:root[data-theme] .zoom-tabs button{color:var(--sf-muted);font-size:14px;font-weight:600;background:transparent}
:root[data-theme] .zoom-tabs button:hover:not(:disabled){background:transparent;color:var(--sf-ink)}
:root[data-theme] .zoom-tabs button[aria-selected=true]{color:var(--sf-accent);border-bottom-color:var(--sf-accent)}

/* columns: no box; the title a blue section header over a hairline */
:root[data-theme] .desk-column{background:transparent;border:0;padding:0;border-radius:0}
:root[data-theme] .desk-column>header{border-bottom:1px solid var(--sf-line);padding-bottom:8px;margin-bottom:12px}
:root[data-theme] .desk-column h2{font-size:15px;font-weight:700;color:var(--sf-accent);letter-spacing:0}
:root[data-theme] .column-empty{border:0;background:transparent;color:var(--sf-faint);padding:14px 4px}

/* cards: borderless, lifted */
:root[data-theme] .card{background:var(--sf-card);border:0;border-radius:12px;box-shadow:var(--sf-shadow-card);margin-bottom:10px}
:root[data-theme] .card:hover,:root[data-theme] .card:has(.card-open:hover){border-color:transparent;box-shadow:var(--sf-shadow-card-hover)}
:root[data-theme] .card-open,:root[data-theme] .card-open:hover:not(:disabled){background:transparent}
:root[data-theme] .card .card-open{padding:16px 18px 6px}
:root[data-theme] .card:has(>.more-button) .card-open{padding-right:46px}
:root[data-theme] .card>.more-button{top:10px;right:8px;min-height:30px;min-width:30px;border-radius:8px;border-color:transparent;background:transparent;color:var(--sf-accent);opacity:.75}
:root[data-theme] .card>.more-button:hover,:root[data-theme] .card>.more-button[aria-expanded=true]{opacity:1;border-color:transparent;background:var(--sf-tint);color:var(--sf-accent)}
:root[data-theme] .card-head:empty{display:none}
:root[data-theme] .card h3{font-size:15px;font-weight:500;line-height:1.4;color:var(--sf-title)}
:root[data-theme] .card-source{display:flex;align-items:center;gap:6px;margin-top:3px;color:var(--sf-meta)}
:root[data-theme] .card-code{font-size:11.5px;color:var(--sf-meta)}
:root[data-theme] .cap-dot{display:none}
:root[data-theme] .card-foot{background:transparent;border-top:0;padding:4px 14px 14px 18px}
:root[data-theme] .owner{font-size:13px;color:var(--sf-ink-3)}
:root[data-theme] .card .avatar{width:22px;height:22px;font-size:10px}
:root[data-theme] .card-foot button{min-height:28px;padding:3px 12px;border:1px solid var(--sf-btn-border);border-radius:999px;background:var(--sf-card);color:var(--sf-ink-3);font-size:12.5px;font-weight:600;box-shadow:none}
:root[data-theme] .card-foot button:hover:not(:disabled):not([aria-disabled=true]){border-color:var(--sf-btn-border-hover);background:var(--sf-btn-hover)}
:root[data-theme] .card-foot button:last-child:not([aria-disabled=true]){border-color:var(--sf-tint);background:var(--sf-tint);color:var(--sf-accent)}
:root[data-theme] .card-foot button:last-child:not([aria-disabled=true]):hover{border-color:var(--sf-tint-hover);background:var(--sf-tint-hover)}
:root[data-theme] .card-foot button[aria-disabled=true]{opacity:.45}
:root[data-theme] .assign-inline select{appearance:none;-webkit-appearance:none;min-height:28px;padding:3px 14px;border:0;border-radius:999px;background:var(--sf-fill);color:var(--sf-ink-3);font-size:12.5px;font-weight:600}
:root[data-theme] .assign-inline select:hover{background:var(--sf-fill-hover)}

/* Settings: a sheet of grouped cards */
:root[data-theme] .settings-dialog{border:0;border-radius:16px;background:var(--sf-page);color:var(--sf-ink);box-shadow:var(--sf-shadow-dialog)}
:root[data-theme] .settings-head{border-bottom:0}
:root[data-theme] .settings-head h2{font-size:24px;font-weight:700;letter-spacing:-.5px}
:root[data-theme] .settings-row{margin:0 0 10px;padding:14px 16px;border:0;border-radius:12px;background:var(--sf-card);box-shadow:var(--sf-shadow-card)}
:root[data-theme] .settings-row legend{color:var(--sf-title);font-size:14.5px;font-weight:600}
:root[data-theme] .settings-help{color:var(--sf-muted);font-size:13px}
:root[data-theme] .settings-link{border:0;border-radius:999px;background:var(--sf-card);color:var(--sf-accent)}
/* its scrollbar: a thin rounded thumb on no track and no arrows, held 18px clear of the
   top and bottom so it never runs into the sheet's rounded corners (Firefox has no
   scrollbar pseudo-elements, so it gets the thin standard one) */
:root[data-theme] .settings-dialog::-webkit-scrollbar{width:12px}
:root[data-theme] .settings-dialog::-webkit-scrollbar-track{background:transparent;margin:18px 0}
:root[data-theme] .settings-dialog::-webkit-scrollbar-thumb{border:4px solid transparent;border-radius:999px;background:var(--sf-scroll) padding-box}
:root[data-theme] .settings-dialog::-webkit-scrollbar-thumb:hover{border-width:3px;background-color:var(--sf-scroll-hover)}
:root[data-theme] .settings-dialog::-webkit-scrollbar-button{display:none}
@supports not selector(::-webkit-scrollbar){:root[data-theme] .settings-dialog{scrollbar-width:thin;scrollbar-color:var(--sf-scroll) transparent}}

/* the rest of the page: no rules between sections, and one accent for links and states */
:root[data-theme] .meeting-strip,:root[data-theme] .list-end,:root[data-theme] .desk-footer,:root[data-theme] #foot-tail{border-top:0;border-bottom:0}
:root[data-theme] .meeting-strip{color:var(--sf-muted)}
:root[data-theme] .meeting-strip a{color:var(--sf-accent);text-decoration:none;font-weight:600}
:root[data-theme] .card a{color:var(--sf-accent)}
:root[data-theme] .viewer-name::before{background:var(--sf-tint);color:var(--sf-accent)}
:root[data-theme] .state-chip{border-color:var(--sf-border);color:var(--sf-ink-3);font-family:inherit;font-weight:600}
:root[data-theme] .state-chip.answered{border-color:var(--sf-tint-line);background:var(--sf-tint);color:var(--sf-accent-ink)}
:root[data-theme] .badge,:root[data-theme] .badge.do,:root[data-theme] .badge.ask,:root[data-theme] .badge.decided,:root[data-theme] .badge.queued{background:var(--sf-fill);color:var(--sf-ink-3)}

/* the meetings sidebar: a rail beside the page, Things-style list rows, the open meeting
   a blue-tinted row; it runs to the foot of the window */
:root[data-theme] .app-shell{min-height:calc(100vh - 76px)}
/* a 1px screen-reader-only node after the shell would otherwise add a scrollbar */
:root[data-theme] .sr-only{top:0;left:0}
:root[data-theme] .meeting-nav{background:var(--sf-rail);border-right:1px solid var(--sf-rail-line)}
:root[data-theme] .meeting-nav .eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:var(--sf-muted)}
:root[data-theme] .meeting-nav h2{font-size:17px;font-weight:700;letter-spacing:-.2px;color:var(--sf-ink)}
:root[data-theme] .meeting-nav .muted{color:var(--sf-muted)}
:root[data-theme] #meeting-links{gap:2px}
:root[data-theme] #meeting-links a{min-height:0;padding:8px 10px;border:0;border-radius:8px;color:var(--sf-title);box-shadow:none}
:root[data-theme] #meeting-links a:hover{background:var(--sf-row-hover)}
:root[data-theme] #meeting-links a[aria-current=true]{background:var(--sf-tint);color:var(--sf-accent-ink);font-weight:600;box-shadow:none}
:root[data-theme] #meeting-links a small{color:var(--sf-muted);font-weight:400}
:root[data-theme] #meeting-links a b{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--sf-faint)}
:root[data-theme] #meeting-links a[aria-current=true] b{color:var(--sf-accent-soft)}
:root[data-theme] #meeting-links .meeting-day{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--sf-muted)}
:root[data-theme] .sidebar-foot{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:start;border-top:0;color:var(--sf-ink-3)}
/* the capture status: a pill in the Live pill's language, red while a meeting is
   being captured and grey when none is; the dot sits inside the pill's left edge */
:root[data-theme] .sidebar-foot #capture-dot{position:relative;z-index:1;width:7px;height:7px;margin:0 -17px 0 10px;background:var(--sf-faint);box-shadow:none}
:root[data-theme] .sidebar-foot #capture-status{max-width:100%;padding:5px 10px 5px 22px;border-radius:14px;background:var(--sf-fill);color:var(--sf-ink-3);font-size:12px;font-weight:600;line-height:1.3}
:root[data-theme] .sidebar-foot #capture-dot.live-dot{background:var(--sf-live);animation:live-pulse 1.6s ease-in-out infinite}
:root[data-theme] .sidebar-foot:has(.live-dot) #capture-status{background:var(--sf-live-tint);color:var(--sf-live-ink)}
@media(prefers-reduced-motion:reduce){:root[data-theme] .sidebar-foot #capture-dot.live-dot{animation:none}}
:root[data-theme] .sidebar-foot a{grid-column:1/-1;margin-top:10px;color:var(--sf-accent);text-decoration:none;font-weight:600}

/* card details (the reader): the Settings sheet's language. Beside the board on the web it
   is a sheet on the page colour, lifted on a soft shadow, 16px corners; where it replaces
   the list (Zoom, a narrow window) it has no frame at all and sits on the page like the
   list it replaced. Inside, the title and its grey meta sit on the sheet and each part
   (the meeting quote, Related, the answer form, a receipt, Details) is a white card;
   no rules between them and no coloured edges. The actions are small pills, Send to
   Claude and the form's save the tinted blue ones, quiet ones in the accent otherwise. */
:root[data-theme] body[data-view] .reader{border:0;border-radius:0;background:transparent;color:var(--sf-ink);box-shadow:none;overflow:visible}
:root[data-theme] body[data-view].detail-open:not(.reader-replaces) .reader{border:0;border-radius:16px;background:var(--sf-page);box-shadow:var(--sf-shadow-panel);overflow:auto}
:root[data-theme] body[data-view].detail-open:not(.reader-replaces) .reader::-webkit-scrollbar{width:12px}
:root[data-theme] body[data-view].detail-open:not(.reader-replaces) .reader::-webkit-scrollbar-track{background:transparent;margin:18px 0}
:root[data-theme] body[data-view].detail-open:not(.reader-replaces) .reader::-webkit-scrollbar-thumb{border:4px solid transparent;border-radius:999px;background:var(--sf-scroll) padding-box}
:root[data-theme] body[data-view].detail-open:not(.reader-replaces) .reader::-webkit-scrollbar-thumb:hover{border-width:3px;background-color:var(--sf-scroll-hover)}
:root[data-theme] body[data-view].detail-open:not(.reader-replaces) .reader::-webkit-scrollbar-button{display:none}
@supports not selector(::-webkit-scrollbar){:root[data-theme] body[data-view].detail-open:not(.reader-replaces) .reader{scrollbar-width:thin;scrollbar-color:var(--sf-scroll) transparent}}
/* where it replaces the list it keeps the page's right margin, the same as its left (an
   older rule zeroed it, so the reader ran to the window's edge) */
:root[data-theme] body.reader-replaces main#main{padding-right:24px}
@media(max-width:700px){:root[data-theme] body.reader-replaces main#main{padding-right:16px}}
:root[data-theme] body.surface-zoom.reader-replaces main#main{padding-right:12px}
:root[data-theme] .reader :focus-visible{outline:2px solid var(--sf-accent);outline-offset:2px}

/* the top bar: Close (or Back to cards) a quiet text button in the accent, the column a
   grey pill */
:root[data-theme] .reader-top{padding:14px 16px 4px 12px;border-bottom:0;background:var(--sf-page)}
:root[data-theme] body.reader-replaces .reader-top{padding:4px 0}
:root[data-theme] .reader-top #close-reader{padding:5px 10px;border:0;border-radius:8px;background:transparent;color:var(--sf-accent);font-size:13.5px;font-weight:600;box-shadow:none}
:root[data-theme] body.reader-replaces .reader-top #close-reader{padding-left:4px}
:root[data-theme] .reader-top #close-reader:hover{background:var(--sf-fill);color:var(--sf-accent)}
:root[data-theme] .reader-top .reader-meeting{color:var(--sf-muted);font-size:12.5px}
:root[data-theme] .reader-top .badge{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:0}
:root[data-theme] .reader-top .more-button{min-width:32px;border:0;border-radius:8px;background:transparent;color:var(--sf-accent);opacity:.75}
:root[data-theme] .reader-top .more-button:hover,:root[data-theme] .reader-top .more-button[aria-expanded=true]{opacity:1;background:var(--sf-tint);color:var(--sf-accent)}

/* the title and its meta: a calm title, tiny grey lines under it */
:root[data-theme] .reader-body{padding:10px 22px 26px}
:root[data-theme] body.reader-replaces .reader-body{padding:10px 0 28px}
:root[data-theme] body.reader-replaces .reader-body>h2,:root[data-theme] body.reader-replaces .reader-body>p,:root[data-theme] body.reader-replaces .reader-body>.detail-meta{padding-left:4px;padding-right:4px}
:root[data-theme] .reader-body h2{font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.3px;color:var(--sf-title)}
:root[data-theme] .reader .detail-source{margin-top:6px;color:var(--sf-muted);font-size:13px}
:root[data-theme] .reader .detail-meta{gap:8px;margin:2px 0 20px;color:var(--sf-muted);font-size:13px}
:root[data-theme] .reader .detail-meta span:nth-child(2){color:var(--sf-faint)}
:root[data-theme] .reader .editing-note{color:var(--sf-accent-ink);font-size:13px}
:root[data-theme] .reader .eyebrow{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--sf-muted)}

/* the parts: white cards on the sheet */
:root[data-theme] .reader .quote-preview,:root[data-theme] .reader-body>.evidence,:root[data-theme] .reader .detail-disclosure,:root[data-theme] .reader .route-form,:root[data-theme] .reader .status-box{margin:0 0 12px;padding:14px 16px;border:0;border-radius:12px;background:var(--sf-card);color:var(--sf-ink);box-shadow:var(--sf-shadow-card)}
:root[data-theme] .reader .quote-preview{padding-bottom:4px;font-size:14px}
:root[data-theme] .reader .quote-preview>p{margin-top:6px;color:var(--sf-ink-3);line-height:1.6}
/* the full quote: a quiet grey block inside the card */
:root[data-theme] .reader .quote-preview .evidence{margin:2px 0 12px;padding:12px 14px;border:0;border-radius:8px;background:var(--sf-fill);color:var(--sf-ink-3);font-size:13.5px}
:root[data-theme] .reader .evidence .eyebrow{margin-bottom:8px}
:root[data-theme] .reader .evidence b{color:var(--sf-ink);font-weight:600}
:root[data-theme] .reader .receipt-ref{margin-top:10px;padding-top:8px;border-top:1px solid var(--sf-line);color:var(--sf-meta);font-size:10.5px}

/* disclosures: a chevron that turns when open, in place of the black triangle */
:root[data-theme] .reader details>summary{display:flex;align-items:center;gap:6px;list-style:none}
:root[data-theme] .reader details>summary::-webkit-details-marker{display:none}
:root[data-theme] .reader details>summary::after{content:"";flex:none;width:10px;height:10px;background:currentColor;transition:transform .15s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 1.8 6.7 5 3.5 8.2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 1.8 6.7 5 3.5 8.2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
:root[data-theme] .reader details[open]>summary::after{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){:root[data-theme] .reader details>summary::after{transition:none}}
:root[data-theme] .reader .quote-preview summary{width:fit-content;padding:8px 0;color:var(--sf-accent);font-size:13px;font-weight:600}
:root[data-theme] .reader .detail-disclosure{padding:0 16px;font-size:13.5px}
:root[data-theme] .reader .detail-disclosure>summary{justify-content:space-between;min-height:44px;padding:10px 0;color:var(--sf-title);font-size:14px;font-weight:600}
:root[data-theme] .reader .detail-disclosure>summary::after{color:var(--sf-faint)}
:root[data-theme] .reader .detail-disclosure[open]{padding-bottom:12px}
:root[data-theme] .reader .detail-disclosure p{margin-top:2px}
:root[data-theme] .reader .rel-line{color:var(--sf-ink-3)}
:root[data-theme] .reader .rel-line b{color:var(--sf-muted);font-weight:500}
:root[data-theme] .reader .rel-line a,:root[data-theme] .reader .reader-replaced a{color:var(--sf-accent);text-decoration:none;font-weight:600}
:root[data-theme] .reader .detail-facts dl{margin:0;gap:6px 14px}
:root[data-theme] .reader .detail-facts dt{color:var(--sf-muted)}
:root[data-theme] .reader .detail-facts .detail-id{color:var(--sf-ink-3)}
:root[data-theme] .reader .detail-history small{color:var(--sf-muted)}

/* actions: small pills on the sheet, Send to Claude the tinted one; Zoom keeps 44px */
:root[data-theme] .reader .action-row{gap:8px;margin:20px 0 0}
:root[data-theme] .reader .action-row button{min-height:34px;padding:5px 15px;border:1px solid var(--sf-btn-border);border-radius:999px;background:var(--sf-card);color:var(--sf-ink-3);font-size:13px;font-weight:600;box-shadow:none}
:root[data-theme] .reader .action-row button:hover:not(:disabled):not([aria-disabled=true]){border-color:var(--sf-btn-border-hover);background:var(--sf-btn-hover);color:var(--sf-ink)}
:root[data-theme] .reader .action-row button[aria-disabled=true]{opacity:.45}
:root[data-theme] .reader .action-row #send-open:not([aria-disabled=true]),:root[data-theme] #reader .primary{border:1px solid var(--sf-tint);background:var(--sf-tint);color:var(--sf-accent)}
:root[data-theme] .reader .action-row #send-open:not([aria-disabled=true]):hover,:root[data-theme] #reader .primary:hover:not(:disabled){border-color:var(--sf-tint-hover);background:var(--sf-tint-hover);color:var(--sf-accent)}
:root[data-theme] #reader .primary{min-height:34px;padding:5px 18px;border-radius:999px;font-size:13.5px;font-weight:600;box-shadow:none}
:root[data-theme] #reader .primary:disabled{opacity:.5}
:root[data-theme] body.surface-zoom .reader .action-row button,:root[data-theme] body.surface-zoom #reader .primary{min-height:44px}
:root[data-theme] .reader .action-note{margin:10px 2px 0;color:var(--sf-muted);font-size:12.5px;line-height:1.5}
:root[data-theme] .reader #action-status:empty{display:none}
:root[data-theme] .reader #edit-area:not(:empty){margin-top:18px}
:root[data-theme] .reader #route-area{margin-top:20px}
:root[data-theme] .reader #route-area:empty,:root[data-theme] .reader #route-form:empty{display:none}
:root[data-theme] .reader .text-button{padding:6px 2px;border:0;background:transparent;color:var(--sf-accent);font-size:13px;font-weight:600;text-decoration:none}
:root[data-theme] .reader .text-button:hover:not(:disabled){background:transparent;color:var(--sf-accent-ink)}

/* the answer and edit forms: a card with calm fields; the answer form's ANSWER eyebrow
   only repeated its heading */
:root[data-theme] .reader .route-form{padding:16px 16px 18px}
:root[data-theme] .reader #clarify-form>.eyebrow{display:none}
:root[data-theme] .reader .route-form h3{margin:0 0 2px;color:var(--sf-title);font-size:15.5px;font-weight:600}
:root[data-theme] .reader .field-label{margin:14px 0 6px;color:var(--sf-ink-3);font-size:12.5px;font-weight:600}
:root[data-theme] .reader .route-form>.eyebrow+.field-label{margin-top:8px}
:root[data-theme] .reader .field-label .muted{color:var(--sf-muted);font-weight:400}
:root[data-theme] .reader input,:root[data-theme] .reader select,:root[data-theme] .reader textarea{border:1px solid var(--sf-btn-border);border-radius:10px;background:var(--sf-card);color:var(--sf-ink);font-size:14.5px;box-shadow:none}
:root[data-theme] .reader textarea{min-height:96px;line-height:1.5}
:root[data-theme] .reader input:hover,:root[data-theme] .reader select:hover,:root[data-theme] .reader textarea:hover{border-color:var(--sf-btn-border-hover)}
:root[data-theme] .reader input:focus,:root[data-theme] .reader select:focus,:root[data-theme] .reader textarea:focus{border-color:var(--sf-accent);outline:2px solid var(--sf-tint-line);outline-offset:0}
:root[data-theme] body.surface-zoom .reader input,:root[data-theme] body.surface-zoom .reader select,:root[data-theme] body.surface-zoom .reader textarea{font-size:16px}
:root[data-theme] .reader .draft-status,:root[data-theme] .reader #edit-status{margin:8px 0 12px;color:var(--sf-muted);font-size:12.5px}
:root[data-theme] .reader #clarify-form button{margin:0}
:root[data-theme] .reader .route-form .action-row{margin-top:4px}

/* a receipt, a failure, a note */
:root[data-theme] .reader .status-box .eyebrow{color:var(--sf-accent)}
:root[data-theme] .reader .status-box h3{margin:4px 0 2px;color:var(--sf-title);font-size:15.5px;font-weight:600}
:root[data-theme] .reader .status-box p{color:var(--sf-ink-3)}
:root[data-theme] .reader .status-box code{color:var(--sf-meta)}
:root[data-theme] .reader .status-box button{margin-top:10px}
:root[data-theme] .reader .error-box{margin:0 0 12px;padding:12px 14px;border:0;border-radius:10px;background:var(--sf-live-tint);color:var(--sf-ink)}
:root[data-theme] .reader .error-box h3{margin-bottom:4px;color:var(--sf-live-ink);font-size:14px;font-weight:600}
:root[data-theme] .reader .session-help{color:var(--sf-muted);font-size:12.5px}
:root[data-theme] .reader .session-help.warn{color:var(--sf-live-ink)}
:root[data-theme] .reader .context-note{padding:2px 2px 0;border-top:0;color:var(--sf-ink-3);font-size:13px}
:root[data-theme] .reader .context-note h3{color:var(--sf-title);font-size:14px;font-weight:600}
:root[data-theme] .reader .context-note p{margin-top:4px;color:var(--sf-muted)}
:root[data-theme] .reader .reader-replaced{margin:10px 22px 0;padding:10px 14px;border:0;border-radius:12px;background:var(--sf-tint);color:var(--sf-accent-ink)}
:root[data-theme] body.reader-replaces .reader .reader-replaced{margin:8px 0 0}

/* the ... menu: a small lifted card of rows */
:root[data-theme] .more-menu{padding:4px;border:0;border-radius:10px;background:var(--sf-card);color:var(--sf-ink);box-shadow:var(--sf-shadow-card-hover)}
:root[data-theme] .more-menu button{border-radius:7px;color:var(--sf-ink);font-size:13.5px;font-weight:500}
:root[data-theme] .more-menu button:hover:not([aria-disabled=true]){background:var(--sf-row-hover)}
:root[data-theme] .more-menu button[aria-disabled=true]{color:var(--sf-faint)}
:root[data-theme] .more-menu p{color:var(--sf-muted)}
:root[data-theme] .more-menu :focus-visible{outline:2px solid var(--sf-accent);outline-offset:-2px}

/* Send to Claude is the card's one main action (Kellan, 10/6): in the details view a
   form's own submit (Save answer, Save) is an outlined pill, so only Send to Claude
   is tinted blue */
:root[data-theme] #reader form .primary{border:1px solid var(--sf-btn-border);background:var(--sf-card);color:var(--sf-title)}
:root[data-theme] #reader form .primary:hover:not(:disabled){border-color:var(--sf-btn-border-hover);background:var(--sf-btn-hover);color:var(--sf-title)}

/* the pick dialogs (Send to Claude, Change owner): a sheet like Settings, each choice a
   lifted row; the session or person you pick is the action, so a row lights up blue */
:root[data-theme] .pick-dialog{padding:20px;border:0;border-radius:16px;background:var(--sf-page);color:var(--sf-ink);box-shadow:var(--sf-shadow-dialog)}
:root[data-theme] .pick-dialog::backdrop,:root[data-theme] .settings-dialog::backdrop{background:var(--sf-backdrop)}
:root[data-theme] .pick-dialog .send-dialog-head{align-items:center;border-bottom:0}
:root[data-theme] .pick-dialog .send-dialog-head h2{font-size:20px;font-weight:700;letter-spacing:-.4px;color:var(--sf-ink)}
:root[data-theme] .pick-dialog .text-button,:root[data-theme] .settings-dialog .settings-close{border:0;background:transparent;color:var(--sf-accent);text-decoration:none;font-weight:600}
:root[data-theme] .pick-dialog .send-dialog-who{color:var(--sf-muted);font-size:13px}
:root[data-theme] .pick-dialog .field-label{color:var(--sf-ink-3);font-size:13px;font-weight:600}
:root[data-theme] .pick-dialog textarea,:root[data-theme] .pick-dialog input{border:1px solid var(--sf-btn-border);border-radius:10px;background:var(--sf-card);color:var(--sf-ink);font-size:14.5px;box-shadow:none}
:root[data-theme] .pick-dialog textarea{min-height:84px;line-height:1.5}
:root[data-theme] .pick-dialog textarea:focus,:root[data-theme] .pick-dialog input:focus{border-color:var(--sf-accent);outline:2px solid var(--sf-tint-line);outline-offset:0}
:root[data-theme] .pick-dialog .send-group{display:grid;gap:8px}
:root[data-theme] .pick-dialog .send-session{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:10px 14px;border:0;border-radius:12px;background:var(--sf-card);color:var(--sf-title);text-align:left;box-shadow:var(--sf-shadow-card)}
:root[data-theme] .pick-dialog .send-session:hover:not(:disabled){background:var(--sf-tint);color:var(--sf-accent-ink);box-shadow:var(--sf-shadow-card-hover)}
:root[data-theme] .pick-dialog .send-session:focus-visible{outline:2px solid var(--sf-accent);outline-offset:2px}
:root[data-theme] .pick-dialog .send-session-name{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
:root[data-theme] .pick-dialog .send-session-meta{color:var(--sf-muted);font-size:12.5px;font-weight:500}
:root[data-theme] .pick-dialog .send-session:disabled{opacity:1;cursor:default;background:var(--sf-fill);box-shadow:none;color:var(--sf-ink-3)}
:root[data-theme] .pick-dialog .session-help{color:var(--sf-muted);font-size:12.5px}

/* Settings: People and the admin link as grouped cards like the rows above them */
:root[data-theme] .settings-dialog .settings-admin{margin:0 0 10px;padding:14px 16px;border:0;border-radius:12px;background:var(--sf-card);box-shadow:var(--sf-shadow-card)}
:root[data-theme] .settings-dialog .settings-admin h3{color:var(--sf-title);font-size:14.5px;font-weight:600}
:root[data-theme] .settings-dialog .settings-members{margin:10px 0 12px;padding:0;list-style:none}
:root[data-theme] .settings-dialog .settings-members li{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border:0;border-bottom:1px solid var(--sf-line);color:var(--sf-title);font-size:14px}
:root[data-theme] .settings-dialog .settings-members li:last-child{border-bottom:0}
:root[data-theme] .settings-dialog .settings-role{padding:2px 9px;border-radius:999px;background:var(--sf-fill);color:var(--sf-ink-3);font-size:12px;font-weight:600}
:root[data-theme] .settings-dialog .settings-invite{display:flex;gap:8px;align-items:center}
:root[data-theme] .settings-dialog .settings-invite input{flex:1;min-width:0;min-height:36px;padding:6px 12px;border:1px solid var(--sf-btn-border);border-radius:10px;background:var(--sf-card);color:var(--sf-ink);font-size:14px}
:root[data-theme] .settings-dialog .settings-invite input:focus{border-color:var(--sf-accent);outline:2px solid var(--sf-tint-line);outline-offset:0}
:root[data-theme] .settings-dialog .settings-invite button{min-height:36px;padding:5px 18px;border:0;border-radius:999px;background:var(--sf-tint);color:var(--sf-accent);font-weight:600}
:root[data-theme] .settings-dialog .settings-invite button:hover{background:var(--sf-tint-hover)}
:root[data-theme] .settings-dialog .settings-foot{border-top:0;color:var(--sf-muted)}

/* each card's type mark, just left of its number (desk.js): the tonal set from the icon
   study, a coloured glyph on a rounded tint of the same colour, 25% corners; 14px so it
   sits with the small meta text rather than shouting over it */
:root[data-theme] .card-source .type-icon{flex:none;width:14px;height:14px;fill:none;stroke:none}
:root[data-theme] .type-icon .ti-bg{fill:var(--ti-bg);stroke:none}
:root[data-theme] .type-icon .ti-g{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme] .type-icon .ti-f{fill:currentColor;stroke:none}
:root[data-theme] .type-icon .ti-cut{fill:none;stroke:var(--ti-bg);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme] .type-icon[data-type=do]{--ti-bg:var(--sf-type-do-bg);color:var(--sf-type-do)}
:root[data-theme] .type-icon[data-type=ask]{--ti-bg:var(--sf-type-ask-bg);color:var(--sf-type-ask)}
:root[data-theme] .type-icon[data-type=risk]{--ti-bg:var(--sf-type-risk-bg);color:var(--sf-type-risk)}
:root[data-theme] .type-icon[data-type=decided]{--ti-bg:var(--sf-type-decided-bg);color:var(--sf-type-decided)}
@media(forced-colors:active){:root[data-theme] .type-icon .ti-bg{fill:Canvas;stroke:CanvasText;stroke-width:1}:root[data-theme] .type-icon{color:CanvasText}}