:root { --bg:#f7f8fa; --card:#fff; --ink:#1b2434; --mut:#697386;
        --line:#e7eaf0; --acc:#2563eb; --acc-deep:#1d4ed8; --acc-soft:#eef3fe;
        --ok:#067647; --ok-soft:#e6f4ea; --warn:#b54708; --warn-soft:#fef0e6;
        --bad:#b42318; --bad-soft:#fdecea; --attn:#f0b429;
        --shadow:0 1px 2px rgba(16,24,40,.05); --radius:12px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
       font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--acc); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---- header ---- */
header { background:var(--card); border-bottom:1px solid var(--line);
         padding:10px 24px; display:flex; gap:18px; align-items:center;
         flex-wrap:wrap; position:sticky; top:0; z-index:20;
         box-shadow:var(--shadow); }
header .brand { display:inline-flex; align-items:center; gap:9px;
  font-size:17px; font-weight:650; letter-spacing:-.015em;
  background:linear-gradient(100deg, #2563eb, #4f46e5 70%, #7c3aed);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
header .brand:hover { text-decoration:none; }
header .brandmark { display:inline-flex; width:28px; height:28px;
  line-height:0; filter:drop-shadow(0 1px 1.5px rgba(37,99,235,.28)); }
header .brandmark svg, header img.brandmark { width:28px; height:28px; }
header nav { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
header .right { margin-left:auto; display:flex; gap:12px; align-items:center;
                color:var(--mut); font-size:13px; }
nav a { color:var(--mut); padding:6px 10px; border-radius:8px; }
nav a:hover { text-decoration:none; color:var(--ink); background:var(--bg); }
nav a.active { color:var(--acc); font-weight:600; background:var(--acc-soft); }
nav a .badge { margin-left:4px; }

/* ---- menus (nav More, workspace switcher) ---- */
details.menu { position:relative; }
details.menu > summary { list-style:none; cursor:pointer; color:var(--mut);
    padding:6px 10px; border-radius:8px; }
details.menu > summary:hover { background:var(--bg); color:var(--ink); }
details.menu > summary::-webkit-details-marker { display:none; }
details.menu > summary::after { content:" \25be"; font-size:11px; }
details.menu[open] > .menu-panel { position:absolute; left:0;
    top:calc(100% + 6px); background:var(--card);
    border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 10px 30px rgba(16,24,40,.14); padding:6px; min-width:200px;
    display:flex; flex-direction:column; z-index:30; }
details.menu.right[open] > .menu-panel,
details.menu.flip[open] > .menu-panel { left:auto; right:0; }
details.menu[open] > .menu-panel { max-width:calc(100vw - 24px); }
.menu-panel a, .menu-panel button { display:flex; width:100%;
    align-items:center; justify-content:space-between; gap:12px;
    text-align:left; padding:8px 10px; border:0; border-radius:8px;
    background:none; color:var(--ink); font:inherit; font-size:14px;
    cursor:pointer; white-space:nowrap; line-height:1.4; }
.menu-panel a:hover, .menu-panel button:hover { background:var(--bg);
    text-decoration:none; }
.menu-panel button.current { font-weight:600; }

/* ---- approval strip ---- */
.approve-strip { display:block; background:var(--warn-soft);
    color:var(--warn); border-bottom:1px solid #f2ddb8; padding:9px 24px;
    font-weight:600; }
.approve-strip:hover { text-decoration:none; background:#ffefd2; }

/* ---- icons ---- */
.icon { width:16px; height:16px; vertical-align:-3px; flex:none; }
.icon-lg { width:22px; height:22px; flex:none; }
.iconbtn { display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; background:#fff;
  border:1px solid var(--line); border-radius:8px; color:var(--mut); }
.iconbtn:hover { background:var(--bg); color:var(--ink);
  border-color:#d5dae3; }
a.iconbtn:hover { text-decoration:none; }
.iconbtn.danger-soft { color:var(--bad); }
.iconbtn.danger-soft:hover { background:var(--bad-soft);
  border-color:#f3c8c3; }

/* ---- page header ---- */
.pagehead { display:flex; align-items:center; gap:12px; margin:2px 0 18px; }
.pagehead .picon { display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; background:var(--acc-soft);
  color:var(--acc); flex:none; }
.pagehead h1 { margin:0; font-size:23px; font-weight:700;
  letter-spacing:-.02em; }
.pagehead .sub { margin:1px 0 0; }
.pagehead .actions { margin-left:auto; display:flex; gap:10px; }

/* ---- file browser ---- */
a.fname { color:var(--ink); }
a.fname:hover { color:var(--acc); text-decoration:none; }
.crumb { display:flex; gap:6px; align-items:center; color:var(--mut);
  font-size:13px; margin-bottom:12px; }
.crumb a { color:var(--mut); }
.crumb a:hover { color:var(--acc); text-decoration:none; }

/* ---- layout & type ---- */
main { max-width:1080px; margin:28px auto; padding:0 24px; }
h1 { font-size:20px; font-weight:650; letter-spacing:-.01em;
     margin:0 0 14px; }
h2 { font-size:15px; font-weight:600; margin:22px 0 8px; }
.card { background:var(--card); border:1px solid var(--line);
        border-radius:var(--radius); padding:18px 20px; margin-bottom:16px;
        box-shadow:var(--shadow); }
.card > h2:first-child, .card h2[style*="margin-top:0"] { margin-top:0; }
/* a card a link lands on (…#spend-checkpoint): stop below the sticky header,
   and show for a moment which card was meant */
.card[id] { scroll-margin-top:76px; }
.card[id]:target { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
.mut { color:var(--mut); font-size:13px; }
.lead { margin:0 0 10px; }
.idmut { color:var(--mut); font-size:12px;
         font-family:ui-monospace,monospace; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,
        minmax(280px,1fr)); gap:16px; }

/* ---- tables ---- */
.tablewrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:8px 10px;
         border-bottom:1px solid var(--line); font-size:14px;
         vertical-align:top; }
tr:last-child td { border-bottom:0; }
th { color:var(--mut); font-weight:600; font-size:12px;
     text-transform:uppercase; letter-spacing:.03em; }

/* ---- badges & chips (one family) ---- */
.badge { display:inline-block; padding:2px 9px; border-radius:999px;
         font-size:12px; font-weight:500; background:var(--bg);
         color:var(--mut); border:1px solid var(--line); }
.badge.ok { background:var(--ok-soft); color:var(--ok); border-color:transparent; }
.badge.warn { background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.badge.bad { background:var(--bad-soft); color:var(--bad); border-color:transparent; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:2px 10px;
  border-radius:999px; font-size:12px; font-weight:500; background:var(--bg);
  border:1px solid var(--line); white-space:nowrap; }
.chip.run { background:var(--ok-soft); color:var(--ok); border-color:transparent; }
.chip.warn { background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--ok);
  animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.25; } }
.navdot { display:inline-block; margin-left:6px; vertical-align:middle; }
@media (prefers-reduced-motion: reduce) { .dot { animation:none; } }

/* ---- forms & buttons ---- */
form.inline { display:inline; }
input, select, textarea { font:inherit; padding:8px 12px;
        border:1px solid var(--line); border-radius:8px; background:#fff;
        max-width:100%; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline:none;
        border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
textarea { width:100%; }
label { display:block; margin:10px 0 4px; font-size:13px;
        color:var(--mut); font-weight:500; }
button, a.quiet, details.dbtn > summary, details.confirm > summary {
    font:inherit; font-size:15px; font-weight:500; padding:8px 14px;
    border:1px solid transparent; border-radius:8px; background:var(--acc);
    color:#fff; cursor:pointer;
    transition:background .15s, border-color .15s;
    display:inline-block; line-height:1.55; }
a.quiet { background:#fff; border-color:var(--line); color:var(--ink); }
a.quiet:hover { background:var(--bg); border-color:#d5dae3;
    text-decoration:none; }
button:hover { background:var(--acc-deep); }
button:focus-visible, details.dbtn > summary:focus-visible,
details.confirm > summary:focus-visible { outline:none;
    box-shadow:0 0 0 3px var(--acc-soft); }
button.quiet, details.dbtn > summary { background:#fff;
    border:1px solid var(--line); color:var(--ink); }
button.quiet:hover, details.dbtn > summary:hover { background:var(--bg);
    border-color:#d5dae3; }
button.danger { background:var(--bad); }
button.danger:hover { background:#9a1c12; }
/* confirm pattern: a quiet-danger button that reveals the real one */
details.confirm { display:inline-block; }
details.confirm > summary { list-style:none; background:#fff;
    border:1px solid var(--line); color:var(--bad); }
details.confirm > summary::-webkit-details-marker { display:none; }
details.confirm > summary:hover { background:var(--bad-soft);
    border-color:#f3c8c3; }
details.confirm[open] > summary { border-color:#f3c8c3;
    background:var(--bad-soft); }
details.confirm > form, details.confirm > div { margin-top:8px; }
details.confirm > summary.iconbtn { display:inline-flex; align-items:center;
    justify-content:center; width:36px; height:36px; padding:0; }
.card.widget details.confirm,
.pagehead details.confirm, td details.confirm { position:relative; }
.card.widget details.confirm > form,
.pagehead details.confirm > form, td details.confirm > form { position:absolute; right:0; margin:0;
    top:calc(100% + 6px); background:var(--card);
    border:1px solid var(--line); border-radius:10px; padding:8px;
    box-shadow:0 10px 30px rgba(16,24,40,.14); z-index:25;
    white-space:nowrap; }
input[type=file] { font-size:13px; color:var(--mut); border:0; padding:0;
    background:none; }
input[type=file]:focus { box-shadow:none; }
input[type=file]::file-selector-button { font:inherit; font-size:14px;
    font-weight:500; padding:7px 12px; margin-right:10px;
    border:1px solid var(--line); border-radius:8px; background:#fff;
    color:var(--ink); cursor:pointer; }
input[type=file]::file-selector-button:hover { background:var(--bg); }
/* dbtn: a details-summary that is visually a quiet button */
details.dbtn { display:inline-block; }
details.dbtn > summary { list-style:none; }
details.dbtn > summary::-webkit-details-marker { display:none; }
details.dbtn > form, details.dbtn > div { margin-top:12px; }

/* ---- flash & evidence ---- */
.flash { padding:10px 14px; border-radius:10px; margin-bottom:16px;
         font-size:14px; }
.flash.ok { background:var(--ok-soft); color:var(--ok); }
.flash.err { background:var(--bad-soft); color:var(--bad); }
.flash.warn { background:var(--warn-soft); color:var(--warn); }
.card.attn { border-color:var(--attn); }
pre { background:#0f172a; color:#e2e8f0; padding:14px; border-radius:10px;
      overflow-x:auto; font-size:12.5px; }
.evidence { background:var(--bg); border-radius:10px; padding:10px 12px;
            margin:6px 0; white-space:pre-wrap; font-size:13.5px;
            overflow-wrap:anywhere; }
/* A batch approval lists every file it will take: readable in place,
   without pushing the Approve button off the screen. */
.evidence.list { max-height:320px; overflow-y:auto; }

/* ---- work surface ---- */
.worklayout { display:grid; grid-template-columns:minmax(0,1fr) 300px;
              gap:16px; align-items:start; }
/* A conversation opens at its newest message, so a side panel that lives
   only at the top of the page cannot be reached without scrolling all the
   way back up — the files, the approval waiting for you, the running
   subtasks. On a wide screen the panel rides along instead (asked for
   2026-09-10). 68px clears the sticky header; the panel gets its own
   scrollbar when it is taller than the screen, so its bottom is always
   reachable. */
@media (min-width:861px) {
  .worklayout > aside { position:sticky; top:68px; align-self:start;
    max-height:calc(100vh - 84px); overflow-y:auto; scrollbar-width:thin; }
}
/* narrower: one column, which may be narrower than its content as on the
   desktop — a table, a line of code scroll inside their bubble (ADR-0077) */
@media (max-width:860px) { .worklayout { grid-template-columns:minmax(0,1fr); } }
.msg { margin:10px 0; }
.msg .who { font-size:12px; color:var(--mut); margin-bottom:2px; }
.msg .bubble { background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:10px 14px; white-space:pre-wrap;
  box-shadow:var(--shadow); }
.msg.user .bubble { background:var(--acc-soft); border-color:#dbe6fd; }
/* a person's attachments under their words (ADR-0073): chips that open the
   file and drag out of the browser as the file */
.msg.user .msgfiles { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.msgfile { display:inline-flex; align-items:center; gap:8px; max-width:100%;
  padding:5px 12px 5px 6px; border:1px solid #dbe6fd; border-radius:10px;
  background:var(--card); color:var(--ink); font-size:13.5px; line-height:1.25; }
.msgfile:hover { border-color:var(--acc); color:var(--acc); text-decoration:none; }
.msgfile .ficon { width:24px; height:24px; border-radius:6px; }
.msgfile .ficon svg { width:16px; height:16px; }
.msgfile .msgfname { min-width:0; max-width:280px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
/* recording a voice message in the composer (ADR-0052). These carry
   html.js because `html.js .js-only { display:initial }` is more specific
   than a plain class rule and was showing the discard button when nothing
   was being recorded (seen in a screenshot, 2026-09-24). */
.ctools .recbtn .stopicon { display:none; }
html.js .ctools .reccancel { display:none; }
html.js .composer.recording .recbtn .micon { display:none; }
html.js .composer.recording .recbtn .stopicon { display:inline-flex; }
html.js .composer.recording .recbtn { color:var(--bad); border-color:var(--bad); }
html.js .composer.recording .reccancel { display:inline-flex; }
.ctools .rectime { font-size:12.5px; font-variant-numeric:tabular-nums; }
.composer.recording .rectime { color:var(--bad); }
/* the recording under a voice message, to check the transcript against */
.msg .said { display:block; width:100%; max-width:360px; margin-top:8px; height:36px; }
/* under a message written while the assistant worked: has it been read */
.delivery { display:flex; align-items:center; justify-content:flex-end; gap:5px;
  margin:3px 4px 0 0; font-size:12px; color:var(--mut); }
.delivery svg { width:13px; height:13px; flex:none; }
.delivery.read svg { color:var(--ok); }
/* how a turn that did real work ended — one quiet line, so a long job
   visibly has an end (ADR-0047) */
.turnfoot { display:flex; align-items:center; gap:6px; margin:-4px 0 14px 4px;
  font-size:12.5px; color:var(--mut); }
.turnfoot svg { width:14px; height:14px; flex:none; }
.turnfoot.ok svg { color:var(--ok); }
.turnfoot.warn, .turnfoot.warn svg { color:var(--warn); }
.turnfoot.bad, .turnfoot.bad svg { color:var(--bad); }
.steps { margin:4px 0 4px 20px; }
.steps > summary { cursor:pointer; color:var(--mut); font-size:13px; }
.steps .step { margin:4px 0 4px 14px; font-size:13.5px; }
.steps .step > summary { cursor:pointer; }
.steps .step.bad > summary { color:var(--bad); }
.convrow { display:flex; gap:10px; align-items:center; padding:11px 10px;
  border-radius:10px; color:inherit; }
.convrow + .convrow { border-top:1px solid var(--line); }
.convrow:hover { background:var(--bg); text-decoration:none; }
.convrow .convtitle { font-weight:600; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* a chat on the Work list: its row and, at the end, its pin (ADR-0054). The
   pin shows on hover where there is one, always where there is none, and
   always — filled — on a pinned chat; the pinned ones stand apart. */
.convitem { display:flex; align-items:center; gap:2px; border-radius:10px; }
.convitem + .convitem { border-top:1px solid var(--line); }
.convitem:hover { background:var(--bg); }
.convitem > .convrow { flex:1; min-width:0; }
.convitem > .convrow:hover { background:transparent; }
.pinbtn { flex:none; width:32px; height:32px; margin-right:6px;
  background:transparent; border-color:transparent; color:var(--mut); }
.pinbtn svg { width:16px; height:16px; }
.pinbtn:hover, .pinbtn:focus-visible { color:var(--acc); background:var(--acc-soft);
  border-color:transparent; }
.convitem.pinned .pinbtn { color:var(--acc); }
.convitem.pinned .pinbtn svg path, .pinmark svg path { fill:currentColor; }
.convitem.pinned + .convitem:not(.pinned) { border-top:2px solid var(--line);
  margin-top:6px; }
@media (hover:hover) {
  .convitem:not(.pinned) .pinbtn { opacity:0; }
  .convitem:hover .pinbtn, .convitem:focus-within .pinbtn { opacity:1; }
}
/* choosing chats, and deleting them from the list (ADR-0059): a box first,
   the bin last. Both show on hover where there is one and always where
   there is none; once anything is chosen every box shows. The bin asks in
   a panel under itself, and the chosen ones bring up the bar. */
.convsel { flex:none; width:16px; height:16px; margin:0 0 0 10px;
  accent-color:var(--acc); cursor:pointer; }
.convitem.is-selected, .convitem.is-selected:hover { background:var(--acc-soft); }
.convitem .pinbtn { margin-right:0; }
.convdel { flex:none; position:relative; margin-right:6px; }
.convdel > summary.iconbtn { background:transparent; border-color:transparent;
  color:var(--mut); }
.convdel > summary.iconbtn svg { width:16px; height:16px; }
.convdel > summary.iconbtn:hover, .convdel > summary.iconbtn:focus-visible,
.convdel[open] > summary.iconbtn { color:var(--bad); background:var(--bad-soft);
  border-color:transparent; }
.convdel > form { position:absolute; right:0; top:calc(100% + 6px); margin:0;
  z-index:25; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; box-shadow:0 10px 30px rgba(16,24,40,.14);
  width:max-content; max-width:min(320px, 80vw); }
.convdel > form p { margin:0 0 8px; }
.convdel > form .tool-row { display:flex; gap:8px; align-items:flex-start; margin:0 0 10px; }
.convdel > form .tool-row input { margin-top:3px; flex:none; }
/* a chat's name, changed in place (ADR-0072): on the list, a pencil before
   the pin whose field opens under it, as the bin's question does; on the
   chat's page, a pencil after the title whose field takes the title's place */
details.rename > summary { list-style:none; cursor:pointer; }
details.rename > summary::-webkit-details-marker { display:none; }
details.rename > summary.iconbtn { padding:0; background:transparent;
  border-color:transparent; color:var(--mut); }
details.rename > summary.iconbtn svg { width:16px; height:16px; }
details.rename > summary.iconbtn:hover, details.rename > summary.iconbtn:focus-visible,
details.rename[open] > summary.iconbtn { color:var(--acc); background:var(--acc-soft);
  border-color:transparent; }
details.rename > form { display:flex; gap:8px; align-items:center; margin:0; min-width:0; }
/* the field fills what is there and never asks for more: an input's own
   width (twenty letters of a title's size) widened a phone's page */
details.rename input[name=title] { flex:1 1 0; width:0; min-width:0; }
.convren { flex:none; position:relative; }
.convren > form { position:absolute; right:0; top:calc(100% + 6px); z-index:25;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; box-shadow:0 10px 30px rgba(16,24,40,.14);
  width:min(380px, 80vw); }
.pagehead .headtitle { min-width:0; }
.pagehead .titleline { display:flex; align-items:center; gap:6px; min-width:0; }
.pagehead .titleline h1 { min-width:0; overflow-wrap:anywhere; }
.titleedit { flex:none; min-width:0; }
.pagehead:has(.titleedit[open]) .headtitle { flex:1; }
.titleline:has(.titleedit[open]) > h1 { display:none; }
.titleedit[open] { flex:1; }
.titleedit[open] > summary { display:none; }
.titleedit input[name=title] { font-size:19px; font-weight:650; padding:5px 10px;
  letter-spacing:-.01em; }
.titleedit .renamecancel { flex:none; background:transparent; border-color:transparent; }
.convcard:has(.convsel:checked) .convbulk, .convcard.has-selection .convbulk { display:flex; }
.convbulk .selall { margin:0; font-size:14px; color:var(--ink); align-items:center;
  gap:6px; cursor:pointer; }
html.js .convbulk .selall { display:inline-flex; }
.convbulk input[type=checkbox] { width:16px; height:16px; min-width:0; margin:0;
  accent-color:var(--acc); }
/* the bar's question opens above the bar, over the list — never inside it;
   held by the bar itself, so on a phone it never runs off the screen */
.convbulk details.confirm > div { position:absolute; right:10px; bottom:calc(100% + 8px);
  margin:0; z-index:30; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; box-shadow:0 10px 30px rgba(16,24,40,.14);
  width:max-content; max-width:min(360px, calc(100% - 20px)); }
.convbulk details.confirm > div .tool-row { display:flex; gap:8px; align-items:flex-start;
  margin:0 0 10px; }
.convbulk details.confirm > div .tool-row input { margin-top:3px; flex:none; }
/* a phone: a chat's title has a line of its own, who and when under it; the
   bar keeps its words for the screen reader and shows its icons */
@media (max-width:560px) {
  .convrow { flex-wrap:wrap; row-gap:2px; column-gap:8px; }
  .convrow .convtitle { flex:1 0 100%; }
  .convrow > .mut { font-size:12.5px; }
  /* the name's field hangs from the row, not from the pencil: the pin and
     the bin after it would push it off the screen's left edge */
  .convitem { position:relative; }
  .convren { position:static; }
  .convren > form { right:6px; top:calc(100% - 4px); width:auto; left:6px; }
  .convbulk .lbl { position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (hover:hover) {
  .convsel { opacity:0; }
  .convitem:hover .convsel, .convitem:focus-within .convsel,
  .convcard:has(.convsel:checked) .convsel, .convcard.has-selection .convsel { opacity:1; }
  .convdel:not([open]) > summary { opacity:0; }
  .convitem:hover .convdel > summary, .convitem:focus-within .convdel > summary { opacity:1; }
  .convren:not([open]) > summary { opacity:0; }
  .convitem:hover .convren > summary, .convitem:focus-within .convren > summary { opacity:1; }
}

/* ---- files ---- */

/* ---- activity / system ---- */
.chips { display:flex; gap:8px; margin:0 0 14px; flex-wrap:wrap; }
.chips a { padding:5px 14px; border-radius:999px; background:var(--card);
           border:1px solid var(--line); color:var(--ink); font-size:13px; }
.chips a:hover { text-decoration:none; border-color:var(--acc); }
.chips a.on { background:var(--acc); border-color:var(--acc); color:#fff; }
details.tech > summary { cursor:pointer; color:var(--mut); font-size:13px;
                         padding:8px 0; }
.statgrid { display:grid;
            grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
            gap:12px; }
.stat { font-size:26px; font-weight:700; letter-spacing:-.02em; }
.stat .mut { display:block; font-size:13px; font-weight:400; }
.stat-xl { font-size:64px; }
.wtitle { color:inherit; text-decoration:none; }
.wtitle:hover b { text-decoration:underline; }
/* the whole tile opens the full view; controls float above the overlay */
.card.widget { position:relative; cursor:pointer; }
.wtitle.stretch::after { content:""; position:absolute; inset:0; }
.card.widget .wctl { position:relative; z-index:2; }
/* while the remove-confirm is open, clicking away should dismiss it,
   not navigate through the stretched link (graceful without :has) */
.card.widget:has(details.confirm[open]) .wtitle.stretch::after {
    content:none; }


/* Work-page KPI strip: a one-line glance at the dashboard */
.kpirow { padding:10px 20px; }
.kpi { display:flex; align-items:baseline; gap:8px; color:inherit;
    min-width:0; }
.kpi:hover { text-decoration:none; }
.kpi:hover .klabel { color:var(--acc); }
.kpi .kval { font-size:22px; font-weight:700; letter-spacing:-.02em;
    white-space:nowrap; }
.kpi .klabel { font-size:12.5px; color:var(--mut); overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; max-width:180px; }

/* image galleries under agent messages */
.gallery { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
    margin:6px 0 12px 0; }
.gallery .gpic { display:flex; flex-direction:column; gap:4px;
    max-width:min(420px, 100%); color:var(--mut); font-size:12px; }
.gallery .gpic img { display:block; max-width:100%; max-height:320px;
    border:1px solid var(--line); border-radius:10px;
    background:var(--card); box-shadow:var(--shadow); cursor:zoom-in; }
.gallery .gpic:hover img { border-color:#c9d5f5; }
.gallery .gpic:hover { text-decoration:none; }
.gallery .gname { overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; }

/* markdown in agent bubbles */
.bubble.md { white-space:normal; }
/* ---- the System page's health (2026-09-14): a verdict, a chart, a bar ---- */
.card.verdict { display:flex; gap:14px; align-items:flex-start; }
.card.verdict h2 { margin:0 0 4px; font-size:17px; }
.card.verdict p, .card.verdict ul { margin:0; }
.card.verdict .vmark { display:inline-flex; width:38px; height:38px; flex:none;
  align-items:center; justify-content:center; border-radius:10px; }
.card.verdict.ok .vmark { background:var(--ok-soft); color:var(--ok); }
.card.verdict.warn .vmark { background:var(--warn-soft); color:var(--warn); }
.card.verdict.bad .vmark { background:var(--bad-soft); color:var(--bad); }
.card.verdict.ok { border-color:#bfe3cd; }
.card.verdict.warn { border-color:#f2ddb8; }
.card.verdict.bad { border-color:#f3c8c3; }
ul.concerns { list-style:none; padding:0; }
ul.concerns li { padding:3px 0 3px 16px; position:relative; font-size:14.5px; }
ul.concerns li::before { content:""; position:absolute; left:0; top:11px;
  width:7px; height:7px; border-radius:50%; background:var(--warn); }
ul.concerns li.bad::before { background:var(--bad); }
.statlink { color:inherit; }
.statlink:hover { text-decoration:none; }
.statlink:hover .stat { color:var(--acc); }
.chart { margin:6px 0 2px; }
.chart svg { width:100%; height:120px; display:block; }
.chart .bardone { fill:var(--acc); }
.chart .barbad { fill:var(--bad); }
.chart .barnone { fill:var(--line); }
.chart .barhit { fill:transparent; }
.chart .barhit:hover { fill:rgba(37,99,235,.07); }
.chartaxis { display:flex; justify-content:space-between; font-size:12px;
  color:var(--mut); margin-bottom:6px; }
/* legendkey, not swatch: the branding colour picker already owns .swatch */
.legendkey { display:inline-block; width:9px; height:9px; border-radius:2px;
  margin:0 4px 0 12px; }
.legendkey.done { background:var(--acc); }
.legendkey.bad { background:var(--bad); }
.usebar { height:8px; border-radius:999px; background:var(--line);
  overflow:hidden; margin:0 0 14px; }
.usebar > span { display:block; height:100%; border-radius:999px;
  background:var(--ok); }
.usebar.warn > span { background:var(--warn); }
.usebar.bad > span { background:var(--bad); }
/* ---- compact row actions (2026-09-14): a row carries icons and a switch,
   never a shelf of bordered buttons; the words live in titles ---- */
.rowacts { display:inline-flex; align-items:center; gap:6px; }
td .rowacts, .memhead .rowacts { justify-content:flex-end; }
.iconbtn.sm, td .iconbtn, .memcard .iconbtn,
details.confirm > summary.iconbtn.sm, td details.confirm > summary.iconbtn,
.memcard details.confirm > summary.iconbtn { width:32px; height:32px; }
details.dbtn > summary.iconbtn { display:inline-flex; align-items:center;
  justify-content:center; width:36px; height:36px; padding:0; }
label.switch.sm .track { width:30px; height:18px; }
label.switch.sm .track::after { width:14px; height:14px; }
label.switch.sm input:checked + .track::after { left:14px; }
label.switch.sm .swlabel { font-size:12.5px; color:var(--mut); }
.memcard details.confirm { position:relative; }
.memcard details.confirm > form { position:absolute; right:0; margin:0;
  top:calc(100% + 6px); background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:8px; box-shadow:0 10px 30px rgba(16,24,40,.14);
  z-index:25; white-space:nowrap; }
.actions-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:14px; }
.actions-row .spacer { flex:1; }
.credrow { display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:4px 0; }
/* ---- messaging channels (ADR-0042, ADR-0061) ---- */
.chip.tg, .chip.sg { background:var(--acc-soft); color:var(--acc-deep); }
.chip.tg svg, .chip.sg svg { width:12px; height:12px; vertical-align:-1px; }
/* a chat that stands for something (ADR-0062): a watched mailbox's, a
   schedule's */
.chip.ml, .chip.sc { color:var(--mut); }
.chip.ml svg, .chip.sc svg { width:12px; height:12px; vertical-align:-1px; }
/* what is new to the person (ADR-0062), as messengers mark it: a dot, the
   title in full weight, its time in the accent colour — the rest quieter */
.convlist .convrow .convtitle { font-weight:500; }
.convlist .convitem.new .convtitle { font-weight:650; }
.convitem.new .convtitle::before { content:""; display:inline-block; width:8px;
  height:8px; border-radius:50%; background:var(--acc); margin-right:8px;
  vertical-align:2px; }
.convitem.new .convrow > .mut { color:var(--acc-deep); }
.badge.new { background:var(--acc); color:#fff; border-color:transparent;
  padding:1px 7px; font-weight:600; }
/* a new answer while Pilot is open: a quiet card in the corner */
.toasts { position:fixed; right:16px; bottom:16px; z-index:60; display:flex;
  flex-direction:column; gap:8px; width:min(380px, calc(100vw - 32px)); }
.toast { display:flex; gap:10px; align-items:flex-start; background:var(--card);
  color:var(--ink); border:1px solid var(--line); border-left:4px solid var(--acc);
  border-radius:10px; padding:10px 8px 10px 12px;
  box-shadow:0 10px 30px rgba(16,24,40,.16); animation:toastin .18s ease-out; }
.toast:hover { text-decoration:none; background:var(--acc-soft); }
.toast > div { flex:1; min-width:0; }
.toast b { display:block; font-size:14px; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.toast span { color:var(--mut); font-size:13px; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.toast .x { flex:none; width:24px; height:24px; padding:0; line-height:1;
  border:0; background:transparent; color:var(--mut); font-size:18px; cursor:pointer; }
.toast .x:hover { color:var(--ink); }
@keyframes toastin { from { transform:translateY(8px); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .toast { animation:none; } }
/* a schedule's run in its chat: one quiet line, the instruction folded */
details.runline { margin:10px 0; color:var(--mut); font-size:13px; }
details.runline > summary { list-style:none; cursor:pointer; display:flex;
  align-items:center; gap:6px; justify-content:center; }
details.runline > summary::-webkit-details-marker { display:none; }
details.runline > summary svg { width:13px; height:13px; }
details.runline .bubble { margin-top:6px; white-space:pre-wrap; }
/* words passed here from the person's phone chat */
.msg .who .via { color:var(--acc-deep); font-size:11.5px; margin-left:4px; }
.channelnote { margin:-4px 0 10px; font-size:13px; }
.channelnote svg { width:14px; height:14px; vertical-align:-2px; }
.sgsteps { margin:6px 0 8px 20px; padding:0; }
.sgsteps li { margin:3px 0; }
.sgqr { width:220px; max-width:100%; background:#fff; border-radius:10px; padding:6px;
  margin:8px 0; box-sizing:border-box; }
.sgqr svg { width:100%; height:auto; display:block; }
.sgcode { font:600 26px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:3px; margin:6px 0 10px; user-select:all; }
a.sgopen { display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:500;
  padding:8px 14px; border-radius:8px; background:var(--acc); color:#fff; line-height:1.55; }
a.sgopen:hover { background:var(--acc-deep); text-decoration:none; }
a.sgopen svg { width:16px; height:16px; }
@media (max-width:640px) { .sgdesk { display:none; } }
/* ---- the text editor (Files → Edit) ---- */
.editor textarea { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13.5px; line-height:1.45; tab-size:4; min-height:60vh; resize:vertical;
  border-radius:10px; padding:12px 14px; }
.editor textarea.code { white-space:pre; overflow:auto; }
.editor .row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
.editor .hint { color:var(--mut); font-size:13px; margin-left:auto; }
/* a text file opened to read (ADR-0055): the editor's type, numbered lines
   that copy without their numbers, JSON in colour */
.textcard { padding:10px 0; overflow-x:auto; }
.textview { margin:0; padding:0 14px 0 calc(3.2em + 14px); counter-reset:none;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px; line-height:1.55; color:var(--ink); }
.textview li { white-space:pre; padding-left:12px; min-height:1.55em;
  border-left:1px solid var(--line); }
.textview li::marker { color:var(--mut); font-size:11.5px; }
.textview.wrap li { white-space:pre-wrap; overflow-wrap:anywhere; }
.textview .jk { color:#1d4ed8; }
.textview .js { color:#067647; }
.textview .jn { color:#b54708; }
.textview .jb, .textview .jz { color:#7c3aed; font-weight:600; }
.viewnote { margin:0 0 10px; }
/* a new text file: its name above the text (ADR-0055) */
.editor .newname { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.editor .newname label { margin:0; white-space:nowrap; }
.editor .newname input { flex:1; max-width:420px; }
.card.warn { background:var(--warn-soft); border-color:#f2ddb8; color:var(--warn); }
.mdview { max-width:820px; }
.bubble.md > :first-child , .mdview > :first-child { margin-top:0; }
.bubble.md > :last-child , .mdview > :last-child { margin-bottom:0; }
.bubble.md p , .mdview p { margin:.55em 0; }
.bubble.md h3, .bubble.md h4, .bubble.md h5, .bubble.md h6 {
    margin:.9em 0 .35em; font-size:15px; }
.bubble.md h3 , .mdview h3 { font-size:16px; }
.bubble.md ul, .bubble.md ol { margin:.45em 0; padding-left:22px; }
.bubble.md li , .mdview li { margin:.2em 0; }
.bubble.md code , .mdview code { background:var(--bg); border:1px solid var(--line);
    border-radius:6px; padding:.08em .35em; font-size:12.5px; }
.bubble.md pre , .mdview pre { background:var(--bg); border:1px solid var(--line);
    border-radius:10px; padding:10px 12px; overflow-x:auto; margin:.6em 0; }
.bubble.md pre code , .mdview pre code { background:none; border:0; padding:0; font-size:12.5px; }
.bubble.md .mdtable , .mdview .mdtable { overflow-x:auto; margin:.6em 0; }
.bubble.md table , .mdview table { font-size:13px; }
.bubble.md th, .bubble.md td { padding:5px 10px; }
.bubble.md blockquote , .mdview blockquote { border-left:3px solid var(--line); margin:.6em 0;
    padding:2px 0 2px 12px; color:var(--mut); }
.bubble.md hr , .mdview hr { border:0; border-top:1px solid var(--line); margin:.8em 0; }
.bubble.md a , .mdview a { color:var(--acc); }

/* ---- the Files page: one list, one toolbar, one row menu (2026-09-11) ---- */
.filters { display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  margin:0 0 12px; }
.filters .chips { margin:0; }
.filters .sep { width:1px; height:22px; background:var(--line); }
.flistcard { padding:6px 8px 10px; }
.flist { width:100%; border-collapse:collapse; }
.flist th { font-size:11.5px; text-transform:uppercase; letter-spacing:.03em;
  color:var(--mut); padding:8px 10px; white-space:nowrap; border-bottom:1px
  solid var(--line); }
.flist th .thsort { color:inherit; }
.flist th .thsort:hover { color:var(--acc); text-decoration:none; }
.flist th.on .thsort::after { content:" ▴"; }
.flist th.on.desc .thsort::after { content:" ▾"; }
/* a column header is a button (the account keeps the choice, ADR-0055) that
   looks like the header it always was */
.flist th .thsort { background:none; border:0; padding:0; margin:0; font:inherit;
  letter-spacing:inherit; text-transform:inherit; cursor:pointer; }
.flist th .thsort:focus-visible { outline:2px solid var(--acc); outline-offset:2px;
  border-radius:4px; }
.flist td { padding:6px 10px; border-top:1px solid var(--line);
  vertical-align:middle; font-size:14px; }
.flist tbody tr:first-child td { border-top:0; }
.flist tbody tr:hover td { background:var(--bg); }
.flist tr.is-selected td { background:var(--acc-soft); }
/* dragging on the Files page (ADR-0073): what is dragged fades, the folder
   it would go into lights up — a row, or a step of the way back */
.flist tr.dragging td { opacity:.45; }
.flist tr.droptarget td, .flist tbody tr.droptarget:hover td { background:var(--acc-soft);
  box-shadow:inset 0 2px 0 var(--acc), inset 0 -2px 0 var(--acc); }
.flist tr.droptarget td:first-child { box-shadow:inset 2px 2px 0 var(--acc), inset 0 -2px 0 var(--acc); }
.flist tr.droptarget td:last-child { box-shadow:inset -2px 2px 0 var(--acc), inset 0 -2px 0 var(--acc); }
.crumbbar a.droptarget { color:var(--acc); background:var(--acc-soft);
  outline:2px solid var(--acc); outline-offset:2px; border-radius:6px; }
#upqueue .upsum { font-weight:600; font-size:13.5px; padding:4px 0 6px; }
#upqueue .upsum[hidden] { display:none; }
.uprow.renamed .ustatus { color:var(--ink); }
.flist .fsel { width:34px; text-align:center; padding-left:6px;
  padding-right:6px; }
.flist .fsel input { width:16px; height:16px; margin:0; accent-color:var(--acc);
  cursor:pointer; }
.flist .fkind { width:42px; padding-right:4px; }
.thumb { width:30px; height:30px; object-fit:cover; border-radius:8px;
  display:block; background:var(--bg); border:1px solid var(--line); }
.flist .fname { max-width:0; min-width:220px; }
.flist .fname a { display:block; color:var(--ink); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flist .fname a:hover { color:var(--acc); text-decoration:none; }
.flist .fpath { color:var(--mut); font-size:12px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.flist tr.folderrow .fname a { font-weight:600; }
/* a pinned folder (ADR-0054): a small filled pin by its name, and a line
   under the last of them */
.pinmark { display:inline-flex; flex:none; color:var(--acc); }
.pinmark svg { width:13px; height:13px; }
.flist tr.pinned + tr:not(.pinned):not(.actrow) td { border-top:2px solid var(--line); }
/* shared with the company (ADR-0053): the name keeps its ellipsis, the mark
   never shrinks away */
.fnameline { display:flex; align-items:center; gap:8px; min-width:0; }
.fnameline > a { min-width:0; flex:0 1 auto; }
.sharedchip { display:inline-flex; align-items:center; gap:4px; flex:none;
  font-size:11.5px; font-weight:600; line-height:1; padding:3px 8px 3px 6px;
  border-radius:999px; color:var(--acc-deep); background:var(--acc-soft);
  border:1px solid #d6e2fb; white-space:nowrap; }
.sharedchip svg { width:12px; height:12px; flex:none; }
.frow .sharedchip { margin-left:auto; }
.flist .fsize, .flist .fdate { color:var(--mut); white-space:nowrap;
  text-align:right; font-variant-numeric:tabular-nums; font-size:13px; }
.flist th.fsize, .flist th.fdate, .flist th:has(+ .fmenu) { text-align:right; }
.flist .fmenu { width:46px; text-align:right; padding-right:6px; }
.rowmenu > summary { padding:0; }
.rowmenu > summary::after { content:none; }
.rowmenu[open] > .menu-panel { min-width:200px; }
.ficon.folder { color:var(--acc); background:var(--acc-soft);
  border-color:#d6e2fd; }
.actpanel { border-color:#c9d5f5; }
.actpanel h2 { margin:0 0 8px; }
.actpanel .row input { flex:1; min-width:200px; }
/* the confirmation opens under the row that asked for it (2026-09-29): the
   row stays lit, the panel sits in the list, nothing to look for at the top */
.flist tr.is-acting td { background:var(--acc-soft); }
.flist tr.actrow td { padding:2px 4px 14px; border-top:0; background:transparent; }
.flist tbody tr.actrow:hover td { background:transparent; }
.actrow .actpanel { margin:0; box-shadow:0 8px 28px rgba(16,24,40,.12);
  border-color:#b9cbf3; animation:actin .16s ease-out; }
#actpanel { scroll-margin:96px 0 120px; }
@keyframes actin { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .actrow .actpanel { animation:none; } }
.bulkbar { display:none; position:sticky; bottom:12px; z-index:15; gap:10px;
  align-items:center; flex-wrap:wrap; padding:10px 14px; margin:12px 2px 0;
  background:var(--card); border:1px solid #c9d5f5; border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(16,24,40,.14); }
.bulkbar .count { font-weight:600; }
.bulkbar .spacer { flex:1; }
/* a field, never the Move picker's radio buttons: those were drawn 200 px
   wide, pushing each folder's name out of its row (ADR-0078) */
.bulkbar input:not([type=radio]):not([type=checkbox]) { min-width:200px; }
form:has(input[name=name]:checked) .bulkbar,
form:has(input[name=dir]:checked) .bulkbar,
form.has-selection .bulkbar { display:flex; }
@supports not selector(:has(a)) { html:not(.js) .bulkbar { display:flex; } }
/* folders in a selection (ADR-0078): the delete says what goes with them;
   the Move picker does not offer a chosen folder, nor anything inside one */
.bulkbar .delnote { flex:1 0 100%; order:10; margin:-2px 0 0; font-size:13px;
  line-height:1.45; text-align:right; }
.bulkbar .delnote[hidden], .bulkbar details.confirm:not([open]) + .delnote { display:none; }
.picker label.radio.unavail { opacity:.45; cursor:not-allowed; }
.delwhat { list-style:none; margin:0 0 6px; padding:0; }
.delwhat li { display:flex; align-items:center; gap:10px; padding:7px 0; min-width:0;
  border-top:1px solid var(--line); }
.delwhat li:first-child { border-top:0; }
.delwhat .dname { font-weight:600; min-width:0; overflow-wrap:anywhere; }
.flistwrap { min-width:0; }
@media (forced-colors: active) {
  .flist tr.is-selected td { outline:1px solid transparent; } }
.pager { display:flex; gap:10px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin:10px 4px 0; color:var(--mut); font-size:13px; }
.pager .pages { display:flex; gap:4px; align-items:center; }
.pager .pages a, .pager .pages span { padding:4px 9px; border-radius:6px; }
.pager .pages a.on { background:var(--acc); color:#fff; }
.pager .pages a:hover { background:var(--bg); text-decoration:none; }
main.dropping { outline:3px dashed var(--acc); outline-offset:-10px;
  border-radius:16px; }
/* where a drop from the computer will go, said at the bottom of the screen
   — never over the folder lit up beneath (ADR-0073) */
main.dropping::after { content:attr(data-drop); position:fixed; left:50%; bottom:28px;
  transform:translateX(-50%); max-width:calc(100vw - 32px); padding:11px 20px;
  border-radius:999px; background:var(--acc); color:#fff; font-weight:600;
  font-size:15px; box-shadow:0 10px 30px rgba(16,24,40,.22); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; pointer-events:none; z-index:40; }
#upqueue { padding:10px 16px; }
.uprow { display:grid; grid-template-columns:minmax(0,1fr) 160px auto; gap:10px;
  align-items:center; padding:6px 0; font-size:13.5px; }
.uprow + .uprow { border-top:1px solid var(--line); }
.uprow .uname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uprow progress { width:100%; height:8px; accent-color:var(--acc); }
.uprow .ustatus { color:var(--mut); }
.uprow.bad .ustatus { color:var(--bad); }
.uprow.ok .ustatus { color:var(--ok); }
.ctxmenu { position:fixed; z-index:50; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(16,24,40,.14); padding:6px; min-width:200px; }
.ctxmenu .menu-panel { display:flex; flex-direction:column; }
.js-only { display:none; }
html.js .js-only { display:initial; }
html.js .js-hidden { display:none; }
@media (max-width:720px) {
  .flist .fsize, .flist th.fsize, .flist th.col-size,
  .flist .fdate, .flist th.fdate, .flist th.col-date { display:none; }
  .flist .fname { min-width:140px; }
  .bulkbar { bottom:0; border-radius:12px 12px 0 0; }
  .bulkbar .delnote { text-align:left; }
  .pagehead { flex-wrap:wrap; }
  .pagehead .actions { margin-left:0; width:100%; flex-wrap:wrap; }
}

/* ---- search box: one field, the button inside it ---- */
.searchbox { position:relative; display:flex; flex:1; min-width:220px;
  max-width:520px; }
.searchbox input[type=search] { width:100%; padding-right:42px;
  border-radius:999px; padding-left:14px; }
.searchbox .sbtn { position:absolute; right:4px; top:50%;
  transform:translateY(-50%); width:32px; height:32px; padding:0;
  border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; background:var(--acc); color:#fff; border:0; }
.searchbox .sbtn:hover { background:var(--acc-deep); }
.searchbox.small { max-width:none; margin:4px 6px 6px; }

/* ---- Files: chats row and filter panels ---- */
.fpanel.chatspanel { margin:0 0 12px; gap:8px; }
.fhead { display:inline-flex; align-items:center; gap:6px; font-size:12px;
  font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--mut); margin-right:4px; }
.chatchip { display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px 5px 10px; border-radius:999px; background:var(--card);
  border:1px solid var(--line); color:var(--ink); font-size:13px;
  max-width:260px; }
.chatchip:hover { text-decoration:none; border-color:var(--acc);
  color:var(--acc); }
.chatchip .ctitle { overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.chatchip .ccount { color:var(--mut); font-size:12px; }
details.chooser > summary { display:inline-flex; align-items:center; gap:4px;
  padding:5px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-size:13px; }
details.chooser > summary::after { content:none; }
details.chooser[open] > .menu-panel { min-width:320px; max-width:420px; }
details.chooser .menu-panel a { justify-content:space-between; }
.filterpanels { display:flex; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.fpanel { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 12px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); }
.fpanel .chips { margin:0; gap:6px; }
.fpanel .chips a { display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; }
.fpanel .chips a .icon { width:14px; height:14px; }
.upform { display:inline-flex; align-items:center; gap:8px; }
.upform .upinput { max-width:210px; }
.pagehead .actions { align-items:center; }
.pagehead .actions button.quiet, .pagehead .actions details.dbtn > summary,
.pagehead .actions a.quiet {
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
  font-size:14px; }
details.popover { position:relative; }
details.popover > form, details.popover > div { position:absolute; right:0;
  top:calc(100% + 6px); margin:0; background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:10px;
  box-shadow:0 10px 30px rgba(16,24,40,.14); z-index:25; white-space:nowrap; }

/* ---- Work: the composer ---- */
.composercard { padding:14px 16px 12px; }
form.composer { display:flex; flex-direction:column; gap:8px; }
form.composer textarea { resize:vertical; min-height:64px; border-radius:12px;
  padding:12px 14px; }
form.composer.dropping textarea { border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft); }
.ctools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* what is attached, as chips that can be taken off (2026-10-05) */
/* the assistant's working files, one quiet line under the chat's own files */
.workline { margin:8px 0 0; font-size:13px; }
.workline a { color:var(--mut); display:inline-flex; align-items:center; gap:6px; }
.workline a:hover { color:var(--acc); }
.workline svg { width:14px; height:14px; }
.attachlist { display:flex; flex-wrap:wrap; gap:6px; }
.attachlist[hidden], .attachnote[hidden] { display:none; }
.attachchip { display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:4px 4px 4px 10px; border:1px solid var(--line); border-radius:999px;
  background:var(--bg); font-size:13px; line-height:1.2; }
.attachchip .aicon { display:inline-flex; color:var(--fc, var(--acc)); flex:none; }
.attachchip .aicon svg { width:16px; height:16px; }
.attachchip.voice .aicon { color:var(--bad); }
.attachchip.ref { border-style:dashed; border-color:var(--acc); background:var(--acc-soft); }
.attachchip .aname { min-width:0; max-width:240px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.attachchip .asize { color:var(--mut); font-size:12px; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.attachchip .aremove { display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--mut); flex:none; cursor:pointer; }
.attachchip .aremove:hover, .attachchip .aremove:focus-visible { background:var(--line);
  color:var(--ink); }
.attachchip .aremove svg { width:13px; height:13px; }
.attachnote { margin:0; padding:6px 10px; border-radius:8px; font-size:13px;
  background:var(--warn-soft); color:var(--warn); }
/* one press, one message: while the files go up, the button says so */
.sendbtn .spin { display:none; width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  animation:spin .8s linear infinite; }
form.composer.sending .sendbtn { opacity:.75; cursor:progress; }
form.composer.sending .sendbtn .icon { display:none; }
form.composer.sending .sendbtn .spin { display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sendbtn .spin { animation-duration:2.4s; } }
.ctools .spacer { flex:1; }
.ctools .attach { display:inline-flex; align-items:center; gap:8px;
  margin:0; color:var(--mut); cursor:pointer; font-size:13px; }
.ctools .attach:hover { color:var(--ink); }
.ctools .attach input[type=file] { font-size:13px; max-width:220px; }
html.js .ctools .attach input[type=file] { position:absolute; width:1px;
  height:1px; opacity:0; overflow:hidden; }
.ctools details.picker { margin:0; }
.ctools details.picker > summary { padding:0; }
.enterpref { display:inline; }
.sendbtn { display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:0 18px 0 14px; height:40px; border-radius:999px;
  font-weight:600; }
.sendbtn .icon { width:18px; height:18px; }
@media (max-width:640px) { .sendbtn .sendlabel { display:none; }
  .sendbtn { width:44px; height:44px; padding:0; border-radius:50%; } }
.undobar { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.radiolist { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
label.radio { display:flex; align-items:center; gap:8px; margin:0;
  padding:8px 10px; border:1px solid var(--line); border-radius:10px;
  color:var(--ink); font-size:14px; cursor:pointer; }
label.radio:hover { background:var(--bg); }
label.radio input[type=radio] { margin:0; accent-color:var(--acc); }
label.radio.model { align-items:flex-start; padding:10px 12px; }
label.radio.model input[type=radio] { margin-top:4px; }
label.radio.model span { display:flex; flex-direction:column; gap:2px; }
label.radio.model small { color:var(--mut); font-size:12.5px; line-height:1.35; }
/* a mailbox's watch (ADR-0062): its words, its rhythm, the model folded away */
.watchform > label { font-weight:600; margin-top:4px; }
details.watchmodel { margin-top:12px; }
details.watchmodel > summary { cursor:pointer; color:var(--mut); font-size:13px; }
label.radio input[name=new_folder] { flex:1; min-width:160px; padding:6px 10px; }
.convmenu { margin-left:auto; }

/* ---- design language, round three ---- */
h2.section { font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--mut); margin:0; }
.convrow .convtitle { font-weight:500; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; }
html.js .nojs-only { display:none; }
button.tiny { padding:3px 9px; font-size:12.5px; }
/* the live results under a search box */
.livebox { position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 12px 32px rgba(16,24,40,.16);
  padding:6px; z-index:40; max-height:360px; overflow-y:auto; }
.liveitem { display:flex; align-items:center; gap:10px; padding:7px 10px;
  border-radius:8px; color:var(--ink); }
.liveitem:hover, .liveitem.active { background:var(--acc-soft);
  text-decoration:none; }
.liveitem .lbody { display:flex; flex-direction:column; min-width:0; }
.liveitem .ltitle { font-weight:500; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.liveitem .ltitle b { color:var(--acc); }
.liveitem .lmeta { font-size:12px; color:var(--mut); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.livenone { padding:8px 10px; }
.liveall { display:block; width:100%; margin-top:4px; background:var(--bg);
  color:var(--acc); border:0; border-radius:8px; padding:7px 10px;
  font-weight:500; }
.liveall:hover { background:var(--acc-soft); }
/* the search box beside the filter panels */
.filterpanels { align-items:center; }
.filterpanels .searchbox { flex:1; min-width:240px; max-width:none;
  margin-left:auto; }
/* chips for chats: outlined in the accent, filled on hover */
.chatchip { border-color:var(--acc); color:var(--acc); }
.chatchip .ccount { color:var(--acc); opacity:.7; }
.chatchip:hover { background:var(--acc-soft); border-color:var(--acc-deep);
  color:var(--acc-deep); }
/* where you are: a bar with a real way back */
.crumbbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 12px; font-size:14px; }
.crumbbar .crumb-root { display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px; background:var(--card);
  border:1px solid var(--line); color:var(--ink); font-weight:500; }
.crumbbar .crumb-root:hover { border-color:var(--acc); color:var(--acc);
  text-decoration:none; }
.crumbbar .sep { color:var(--mut); }
.crumbbar a { color:var(--mut); }
.crumbbar a:hover { color:var(--acc); text-decoration:none; }
.crumbbar b { font-weight:600; }
/* the folder picker */
.picker { min-width:280px; }
.picker .pickfilter { width:100%; margin-bottom:6px; padding:7px 10px; }
.radiolist.scroll { max-height:260px; overflow-y:auto; margin-top:0; }
label.radio[hidden] { display:none; }
label.radio.newfolder input[name=new_folder] { flex:1; min-width:140px; }
details.popover.up > div { top:auto; bottom:calc(100% + 6px); }
details.popover > summary.quiet { display:inline-flex; align-items:center;
  gap:6px; }
.pickerwrap { white-space:normal; width:340px; max-width:80vw; }
.bulkbar button, .bulkbar a.quiet, .bulkbar details.confirm > summary {
  display:inline-flex; align-items:center; gap:6px; }
/* the Enter switch */
.enterswitch { display:inline-flex; align-items:center; gap:8px; }
label.switch { display:inline-flex; align-items:center; gap:8px; margin:0;
  cursor:pointer; color:var(--ink); font-size:13px; }
label.switch input { position:absolute; opacity:0; width:1px; height:1px; }
label.switch .track { width:34px; height:20px; border-radius:999px;
  background:#cfd5df; position:relative; transition:background .15s;
  flex:none; }
label.switch .track::after { content:""; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.3); transition:left .15s; }
label.switch input:checked + .track { background:var(--acc); }
label.switch input:checked + .track::after { left:16px; }
label.switch input:focus-visible + .track { box-shadow:0 0 0 3px var(--acc-soft); }
label.switch .swlabel { display:inline-flex; align-items:center; gap:4px; }
.swhint { font-size:12.5px; }
@media (prefers-reduced-motion: reduce) {
  label.switch .track, label.switch .track::after { transition:none; } }

/* ---- collapsed sections & adders ---- */
details.section > summary { cursor:pointer; padding:2px 0;
  list-style-position:inside; }
details.section > summary:hover { color:var(--acc); }
details.section > summary .mut { font-weight:400; }
details.section[open] > summary { margin-bottom:8px; }
details.adder { margin:6px 0 18px; }
details.adder > summary { cursor:pointer; color:var(--acc);
  font-size:13.5px; font-weight:500; padding:6px 0; display:inline-block;
  list-style:none; }
details.adder > summary::-webkit-details-marker { display:none; }
details.adder > summary::before { content:"+ "; font-weight:700; }
details.adder[open] > summary::before { content:"− "; }
details.adder > summary:hover { text-decoration:underline; }
details.card > summary { cursor:pointer; }

/* ---- branding editor ---- */
.swatch { width:28px; height:28px; border-radius:50%; padding:0;
  border:2px solid var(--line); cursor:pointer; background:#fff; }
.swatch:hover { border-color:var(--mut); background:#fff; }
.swatch.on { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
.swatch-dark { background:#171d2b; }
.swatch-dark:hover { background:#171d2b; }
.swatch-none { background:linear-gradient(to top left, transparent 45%,
  var(--bad) 45%, var(--bad) 55%, transparent 55%), #fff; }
/* File type at a glance: a tinted tile with the type's glyph — the tint
   is the family (documents blue, spreadsheets green…), the shape the kind
   within it (Word, Markdown, text; a workbook, CSV). Colour is a second
   signal only — the shape, the name (with its extension) and the tooltip
   still say what the file is, so nothing depends on seeing colour. A
   composer's chip (.aicon) takes its family's colour too. */
.ficon { flex:none; display:inline-flex; align-items:center;
  justify-content:center; width:30px; height:30px; border-radius:8px;
  background:var(--fb, var(--bg)); border:1px solid var(--fl, var(--line));
  color:var(--fc, var(--mut)); }
.ficon svg { width:18px; height:18px; }
.ficon.sheet, .aicon.sheet, .gk.sheet { --fc:#067647; --fb:#e6f4ea; --fl:#cfe7d8; }
.ficon.pdf, .aicon.pdf, .gk.pdf { --fc:#b42318; --fb:#fdecea; --fl:#f5cfcb; }
.ficon.doc, .aicon.doc, .gk.doc { --fc:#2563eb; --fb:#eef3fe; --fl:#d6e2fd; }
.ficon.image, .aicon.image, .gk.image { --fc:#7c3aed; --fb:#f2ecfe; --fl:#e2d7fb; }
.ficon.code, .aicon.code, .gk.code { --fc:#334155; --fb:#eef1f5; --fl:#dfe4ec; }
.ficon.data, .aicon.data, .gk.data { --fc:#b54708; --fb:#fef0e6; --fl:#f7dcc4; }
.ficon.db, .aicon.db, .gk.db { --fc:#0e7490; --fb:#e6f4f7; --fl:#c9e5ec; }
.ficon.signed, .aicon.signed, .gk.signed { --fc:#0e7490; --fb:#e4f6f1; --fl:#c4e6dd; }
.ficon.archive, .aicon.archive, .gk.archive { --fc:#7a5c1e; --fb:#f7f0dd; --fl:#eadfc2; }
/* Long names must never push a card open — they ellipsize and keep the
   full name in the tooltip (principal: names were spilling out of Work) */
.frow { display:flex; align-items:center; gap:10px; margin:6px 0;
  min-width:0; }
.frow .fname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:var(--ink); }
.frow .fname:hover { color:var(--acc); text-decoration:none; }
.frow .fmeta { flex:none; color:var(--mut); font-size:12.5px; }
.frow .fplace { max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:inline-flex; align-items:center; gap:3px; }
.frow .fplace .icon { width:13px; height:13px; flex:none; }
.frow .fplace:hover { color:var(--acc); text-decoration:none; }
.logo-preview { width:48px; height:48px; border-radius:50%;
  object-fit:cover; border:1px solid var(--line); box-shadow:var(--shadow); }

/* ---- agents / admin forms ---- */
details.picker > summary { cursor:pointer; list-style:none;
  color:var(--mut); font-size:13px; padding:6px 0; }
details.picker > summary::-webkit-details-marker { display:none; }
details.picker > summary:hover { color:var(--ink); }
details.picker[open] > * { margin-top:6px; }
fieldset { border:1px solid var(--line); border-radius:10px; margin:10px 0;
           padding:10px 14px; }
legend { font-size:12px; color:var(--mut); text-transform:uppercase;
         letter-spacing:.03em; font-weight:600; padding:0 6px; }
.tool-row { display:block; margin:4px 0; font-size:14px; color:var(--ink); }

/* mailboxes (ADR-0056) */
.mailform { display:flex; flex-direction:column; gap:10px; }
.mailrules { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:0;
  display:flex; flex-direction:column; gap:8px; }
.mailrules legend { font-weight:600; padding:0 4px; }
.mailrule { display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.mailrule input { margin-top:3px; }
.mailrule > span { display:flex; flex-direction:column; gap:1px; }
.mailrule .mut { font-size:13px; }
.mailfield { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--mut); }
.mailfield textarea, .mailfield input { font:inherit; color:var(--ink); }
.mailfield.small input { width:7em; }
.mailservers > summary { cursor:pointer; }
.mailservers[open] > summary { margin-bottom:8px; }
.mailservers .row { margin-bottom:6px; align-items:center; }
.mailtag { width:3.4em; font-size:12px; font-weight:600; }
.mailform > button { align-self:flex-start; }
/* a Google or Microsoft address signs in on its provider's page: no password */
.mailform .signinnote:empty { display:none; }
.mailform.signin .pwfield, .mailform.signin .pwhint { display:none; }
.mailform .signinnote { margin:0; }
/* the list and the limit belong to the rules that use them */
.mailrules:not(:has(input[value=trusted]:checked)) .trustedfield { display:none; }
.mailrules:not(:has(input[value=trusted]:checked)):not(:has(input[value=anyone]:checked)) .limitfield { display:none; }
/* ---- the Work list's glance at a chat's files (2026-10-24): the kinds it
   holds and how many, quiet until the row is pointed at; drawn after the
   list, in an empty place that takes no room until it is filled ---- */
.cglance:empty { display:none; }
.cglance { display:inline-flex; align-items:center; gap:9px; flex:none; margin-right:4px; opacity:.6;
  filter:saturate(.55); transition:opacity .15s, filter .15s; }
.convrow:hover .cglance, .convrow:focus-visible .cglance { opacity:1; filter:none; }
.cglance.shown { animation:glancein .3s ease-out; }
@keyframes glancein { from { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .cglance.shown { animation:none; } }
.cglance .gk { display:inline-flex; align-items:center; gap:3px; color:var(--fc, var(--mut)); }
.cglance .gk svg { width:15px; height:15px; flex:none; }
.cglance .gn, .cglance .gmore { font-size:12px; line-height:1; color:var(--mut);
  font-variant-numeric:tabular-nums; }
/* ---- a chat's side panel (2026-10-24): what the work costs at a glance,
   its files found as you type ---- */
/* the cost: one figure; a job's subtasks as a bar; the spend checkpoint
   (ADR-0046) as a gauge that names its amount — never three sums in a row */
.costcard { padding:16px 18px; }
.costtop { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.costlabel { font-size:11.5px; font-weight:650; letter-spacing:.07em;
  text-transform:uppercase; color:var(--mut); }
.costtok { font-size:12px; color:var(--mut); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.costval { font-size:28px; font-weight:700; letter-spacing:-.025em; line-height:1.15;
  margin-top:3px; font-variant-numeric:tabular-nums; }
.costval .approx { color:var(--mut); font-weight:500; margin-right:1px; }
.costsub, .gauge { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.costrow { display:flex; align-items:center; gap:8px; min-height:26px; font-size:13px; }
.costkey { display:inline-flex; align-items:center; gap:7px; min-width:0;
  font-weight:550; color:var(--ink); }
.costkey svg { width:15px; height:15px; flex:none; color:var(--mut); }
.costaside { margin-left:auto; color:var(--mut); font-size:12.5px; white-space:nowrap; }
.costrow .badge { display:inline-flex; align-items:center; gap:5px; font-size:12.5px;
  font-weight:600; }
.costrow .badge svg { width:13px; height:13px; }
.costrow .badge + .costaside { margin-left:0; }
.costrow .iconbtn.gear { margin-left:auto; flex:none; width:28px; height:28px;
  background:transparent; border-color:transparent; }
.costrow .iconbtn.gear:hover { background:var(--bg); border-color:var(--line); }
.costrow .iconbtn.gear svg { width:15px; height:15px; }
.gauge .bar { height:6px; margin:8px 0 7px; border-radius:999px; background:var(--line);
  overflow:hidden; }
.gauge .bar > span { display:block; height:100%; min-width:4px; border-radius:inherit;
  background:var(--acc); }
.gauge.near .bar > span, .gauge.full .bar > span { background:var(--warn); }
.costnote { font-size:12px; line-height:1.4; color:var(--mut); }
.gauge.full .costnote { color:var(--ink); font-weight:550; }
.costcard.paused { border-color:#f2ddb8; box-shadow:inset 3px 0 0 var(--warn), var(--shadow); }
.segbar { display:flex; gap:2px; height:6px; margin:8px 0; border-radius:999px;
  overflow:hidden; background:var(--line); }
.segbar .seg { display:block; min-width:4px; }
.seg.ok, .ldot.ok { background:var(--ok); }
.seg.run, .ldot.run { background:var(--acc); }
.seg.bad, .ldot.bad { background:var(--bad); }
.legend { display:flex; flex-wrap:wrap; gap:3px 14px; font-size:12px; color:var(--mut); }
.legend .ldot { display:inline-block; width:7px; height:7px; border-radius:50%;
  margin-right:6px; vertical-align:1px; }
/* the folder: its name and a count, a filter once there are enough files */
.folderline { display:flex; align-items:center; gap:8px; min-width:0; margin:0 0 10px; }
.foldername { display:inline-flex; align-items:center; gap:6px; min-width:0; font-weight:500; }
.foldername svg { width:16px; height:16px; flex:none; }
.foldername span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.countpill { margin-left:auto; flex:none; min-width:26px; padding:0 8px; text-align:center;
  font-size:12px; font-weight:600; line-height:20px; color:var(--mut); background:var(--bg);
  border:1px solid var(--line); border-radius:999px; font-variant-numeric:tabular-nums; }
html.js .ffilter.js-only { display:flex; }
.ffilter { position:relative; align-items:center; margin:0 0 6px; }
.ffilter .ffglyph { position:absolute; left:10px; width:15px; height:15px; color:var(--mut);
  pointer-events:none; }
.ffilter .ffinput { width:100%; height:34px; padding:0 74px 0 32px; border-radius:9px;
  background:var(--bg); font-size:14px; }
.ffilter .ffinput:focus { background:var(--card); }
.ffilter .ffinput::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
.ffcount { position:absolute; right:36px; font-size:12px; color:var(--mut); white-space:nowrap;
  font-variant-numeric:tabular-nums; pointer-events:none; }
.ffclear { position:absolute; right:4px; display:inline-flex; align-items:center;
  justify-content:center; width:26px; height:26px; padding:0; border:0; border-radius:6px;
  background:transparent; color:var(--mut); cursor:pointer; }
.ffclear:hover, .ffclear:focus-visible { background:var(--line); color:var(--ink); }
.ffclear svg { width:14px; height:14px; }
.ffclear[hidden], .fresults[hidden], .fcalm[hidden], .fmore[hidden] { display:none; }
/* a phone zooms into a field typed in at less than 16px */
@media (max-width:860px) { .ffilter .ffinput { height:38px; font-size:16px; } }
.frow .fname b { color:var(--acc); font-weight:650; }
.fmore { display:block; margin:6px 0 2px; padding:7px 10px; border-radius:8px;
  text-align:center; font-size:13px; font-weight:500; color:var(--acc); background:var(--bg); }
.fmore:hover { text-decoration:none; background:var(--acc-soft); }
.flabel { margin:10px 0 4px; font-size:13px; }
.ffnone { margin:8px 0 4px; font-size:13.5px; color:var(--mut); }
.ffmore { margin:6px 0 0; font-size:12.5px; }
.cardfoot { margin:10px 0 0; font-size:13.5px; }
@media (max-width:640px) {
  header { padding:8px 14px; gap:10px; }
  main { margin:16px auto; padding:0 14px; }
  .approve-strip { padding:8px 14px; } }

/* ---- the Calendar (ADR-0079): the Always on line, the month, the day's
   list, the List, an item, the Plan form ---- */
a.calplan { display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
  border-radius:8px; background:var(--acc); color:#fff; font-weight:500;
  border:1px solid transparent; line-height:1.55; white-space:nowrap; }
a.calplan:hover { background:var(--acc-deep); text-decoration:none; }
a.calplan.quiet { background:#fff; color:var(--ink); border-color:var(--line); }
a.calplan.quiet:hover { background:var(--bg); border-color:#d5dae3; }
.calseg { display:inline-flex; border:1px solid var(--line); border-radius:9px;
  overflow:hidden; background:#fff; }
.calseg button { background:#fff; color:var(--mut); border:0; border-radius:0;
  padding:6px 12px; font-size:14px; display:inline-flex; gap:6px; align-items:center; }
.calseg button + button { border-left:1px solid var(--line); }
.calseg button:hover { background:var(--bg); color:var(--ink); }
.calseg button.on { background:var(--acc-soft); color:var(--acc); font-weight:600; }
.calalways { padding:10px 16px; }
.calalways > summary { display:flex; gap:12px; align-items:center; cursor:pointer;
  list-style:none; min-width:0; }
.calalways > summary::-webkit-details-marker { display:none; }
.calalways > summary::after { content:"\25be"; margin-left:auto; color:var(--mut);
  font-size:12px; flex:none; }
.calalways[open] > summary::after { content:"\25b4"; }
.caltag { display:inline-flex; gap:6px; align-items:center; font-weight:600;
  font-size:14px; white-space:nowrap; color:var(--ink); }
.caltag svg { color:var(--mut); }
.calnames { color:var(--ink); font-size:13.5px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; min-width:0; }
.calalways[open] .calnames { display:none; }
.calwhy { margin:8px 0 2px; }
.calwrap { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px;
  align-items:start; }
.calwrap > .card { margin-bottom:0; }
.calmonth { padding:14px 16px 10px; }
.calnav { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.calnav h2 { margin:0 6px; font-size:16px; min-width:150px; text-align:center; }
.calnav .caltoday { margin-left:auto; font-size:13px; padding:5px 11px; border:1px solid var(--line);
  border-radius:8px; color:var(--ink); background:#fff; }
.calnav .caltoday:hover { background:var(--bg); text-decoration:none; }
table.calgrid { table-layout:fixed; width:100%; border-collapse:separate; border-spacing:0; }
.calgrid th { text-align:center; padding:4px 0 6px; font-size:11px; border:0; }
.calgrid td { padding:0; border:0; border-top:1px solid var(--line); vertical-align:top;
  height:96px; }
.calgrid td + td { border-left:1px solid var(--line); }
.calgrid tr:last-child td { border-bottom:0; }
.cfill { display:flex; flex-direction:column; gap:2px; height:100%; min-height:96px;
  padding:4px 4px 6px; color:var(--ink); position:relative; }
.cfill:hover { background:var(--bg); text-decoration:none; }
.cday.out .cfill { color:#a3aab8; background:#fbfcfd; }
.dnum { font-size:12.5px; font-weight:600; width:24px; height:24px; display:inline-flex;
  align-items:center; justify-content:center; border-radius:999px; flex:none; }
.cday.today .dnum { background:var(--acc); color:#fff; }
.cday.sel .cfill { background:var(--acc-soft); box-shadow:inset 0 0 0 2px var(--acc); }
.cmarks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;
  min-width:0; }
.cmarks li { display:flex; gap:4px; font-size:11.5px; line-height:1.35; padding:1px 5px;
  border-radius:5px; background:var(--acc-soft); color:var(--acc-deep); overflow:hidden;
  white-space:nowrap; min-width:0; }
.cmarks .ct { flex:none; font-variant-numeric:tabular-nums; opacity:.8; }
.cmarks .ct:empty { display:none; }
.cmarks .cn { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cmarks li.k-reminder { background:var(--warn-soft); color:var(--warn); }
.cmarks li.k-note { background:#f2f4f7; color:#475467; }
.cmarks li.more { background:none; color:var(--mut); padding-left:3px; }
.cday.past .cmarks li { opacity:.75; }
.cflag { position:absolute; top:7px; right:6px; color:var(--bad); line-height:0; }
.cflag svg { width:13px; height:13px; }
.calday h2 { margin:0 0 8px; font-size:15px; }
.dlist { list-style:none; margin:0 0 12px; padding:0; }
.dent { display:grid; grid-template-columns:48px 22px minmax(0,1fr) auto; gap:6px;
  align-items:start; padding:8px 0; border-top:1px solid var(--line); font-size:14px; }
.dent:first-child { border-top:0; }
.dtime { color:var(--mut); font-variant-numeric:tabular-nums; font-size:13px; padding-top:1px; }
.dicon { color:var(--mut); display:inline-flex; padding-top:2px; }
.k-reminder > .dicon { color:var(--warn); }
.k-work > .dicon { color:var(--acc); }
.dbody { min-width:0; display:flex; flex-direction:column; gap:1px; }
.dline { display:flex; align-items:baseline; gap:6px; min-width:0; flex-wrap:wrap; }
.swstate { font-size:13px; color:var(--mut); }
.dtitle, .rtitle { color:var(--ink); font-weight:500; overflow-wrap:anywhere; }
.dtitle:hover, .rtitle:hover { color:var(--acc); }
.dtitle.gone { color:var(--mut); text-decoration:line-through; }
.drep { display:inline-flex; gap:4px; align-items:center; color:var(--mut); font-size:12px; }
.drep svg { width:12px; height:12px; flex:none; }
.dend { display:inline-flex; gap:4px; align-items:center; }
.dout { font-size:12px; padding:1px 8px; border-radius:999px; background:var(--bg);
  color:var(--mut); white-space:nowrap; }
.dout.ok { background:var(--ok-soft); color:var(--ok); }
.dout.bad { background:var(--bad-soft); color:var(--bad); }
.dout.warn { background:var(--warn-soft); color:var(--warn); }
.dout.run { background:var(--acc-soft); color:var(--acc); }
.dgo { color:var(--mut); display:inline-flex; }
.dgo:hover { color:var(--acc); }
.calco { display:inline-flex; color:var(--mut); align-self:center; }
.calco svg { width:13px; height:13px; }
.callist { list-style:none; margin:0; padding:0; }
.calrow { display:flex; align-items:center; gap:10px; padding:9px 0;
  border-top:1px solid var(--line); }
.calrow:first-child { border-top:0; }
.calrow.hid { opacity:.6; }
.calrow > .dicon { padding-top:0; }
.rbody { min-width:0; flex:1; display:flex; flex-direction:column; }
.rmeta { color:var(--mut); font-size:13px; }
.calrow .rowacts { margin-left:auto; flex:none; }
.callistcard h2 { display:flex; align-items:center; gap:8px; margin:0 0 4px; }
.callistcard h2 svg { color:var(--mut); }
.cfacts { margin:0; display:grid; gap:10px; }
.cfact { display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; }
.cfact dt { color:var(--mut); font-size:13px; padding-top:2px; }
.cfact dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.calwords { white-space:pre-wrap; background:var(--bg); border-radius:8px; padding:10px 12px;
  font-size:14px; }
.calctrl { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--line); }
.calruns { list-style:none; margin:0; padding:0; }
.calruns li { display:flex; gap:10px; align-items:center; padding:7px 0;
  border-top:1px solid var(--line); flex-wrap:wrap; }
.calruns li:first-child { border-top:0; }
.rwhen { min-width:240px; font-size:14px; }
.calform { display:flex; flex-direction:column; gap:16px; max-width:760px; }
.calform [hidden] { display:none !important; }
.calfield { border:0; margin:0; padding:0; min-width:0; }
.calfield > legend { font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; padding:0; }
.calthens { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
label.calthen { margin:0; cursor:pointer; position:relative; color:inherit; font-size:inherit; }
.calthen input { position:absolute; opacity:0; pointer-events:none; }
.calthen .tbox { display:flex; gap:10px; align-items:flex-start; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; background:#fff; height:100%; }
.calthen .tbox > svg { color:var(--mut); margin-top:2px; flex:none; }
.calthen .tbox strong { display:block; color:var(--ink); font-size:14px; font-weight:600; }
.calthen .tbox .mut { display:block; font-size:12.5px; line-height:1.35; }
.calthen:hover .tbox { background:var(--bg); }
.calthen input:checked + .tbox { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft);
  background:#fff; }
.calthen input:checked + .tbox > svg { color:var(--acc); }
.calthen input:focus-visible + .tbox { outline:2px solid var(--acc); outline-offset:2px; }
label.calin { display:flex; flex-direction:column; gap:4px; margin:0; }
.calin > span { font-size:13px; color:var(--mut); }
label.calin.calallday { flex-direction:row; align-items:center; gap:8px; align-self:flex-end;
  padding-bottom:9px; }
.calallday > span { color:var(--ink); font-size:14px; }
.calwhen > .row { align-items:flex-start; }
label.calrepeat { margin-top:12px; max-width:360px; }
.calwds { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
label.calwd { margin:0; position:relative; }
.calwd input { position:absolute; opacity:0; pointer-events:none; }
.calwd span { display:inline-flex; width:42px; height:36px; align-items:center;
  justify-content:center; border:1px solid var(--line); border-radius:8px; color:var(--ink);
  background:#fff; font-size:13px; font-weight:500; cursor:pointer; }
.calwd input:checked + span { background:var(--acc); border-color:var(--acc); color:#fff; }
.calwd input:focus-visible + span { box-shadow:0 0 0 3px var(--acc-soft); }
.calevery { margin-top:10px; }
.calevery input { width:96px; }
.calzone { margin:10px 0 0; }
.calwhose .row { gap:8px; }
.calnote-remind { margin:6px 0 0; }
.calsubmit { gap:10px; }
/* ---- on a phone, on a touch screen (ADR-0077) — nothing here reaches a
   desktop: every rule sits behind a phone's or a tablet's width, or a touch
   screen, and the desktop is compared pixel for pixel with the code before
   (tools/mobile_browser_check.py) ---- */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.phonemenu { display:none; }
@media (max-width:860px) {
  main { overflow-wrap:break-word; }
  main code, label.radio > span, .folderline .foldername { overflow-wrap:anywhere; }
}
/* the header in one row on a phone, and on a phone held sideways (a touch
   screen under 500 px tall) */
@media (max-width:640px), (max-height:500px) and (pointer:coarse) {
  /* the brand (cut short when long), the workspace, log out, and the
     menu button with the navigation under it */
  header { flex-wrap:nowrap; gap:4px; padding:8px 8px 8px 12px; }
  header .brand { display:block; flex:0 1 auto; min-width:0; overflow:hidden;
    white-space:nowrap; text-overflow:ellipsis; line-height:40px; font-size:16px; }
  header .brandmark { vertical-align:middle; margin:-3px 8px 0 0; }
  header nav { display:none; }
  header .right { gap:2px; flex:none; }
  /* the workspace by its icon alone; its name stays in the button for a screen reader */
  header .right details.menu > summary { display:inline-flex; align-items:center;
    height:40px; padding:0 8px; font-size:0; }
  header .right .iconbtn { width:40px; height:40px; }
  details.menu.phonemenu { display:block; position:static; flex:none; }
  details.menu.phonemenu > summary { display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:40px; padding:0; border-radius:10px; color:var(--ink); position:relative; }
  details.menu.phonemenu > summary::after { content:none; }
  details.menu.phonemenu > summary .icon { width:22px; height:22px; }
  details.menu.phonemenu[open] > summary { background:var(--bg); }
  details.menu.phonemenu[open] > .menu-panel { left:8px; right:8px; top:calc(100% + 2px);
    min-width:0; max-width:none; max-height:calc(100vh - 72px); max-height:calc(100dvh - 72px);
    overflow-y:auto; }
  .phonenav a { padding:11px 12px; font-size:15.5px; color:var(--ink); border-radius:8px;
    justify-content:flex-start; gap:8px; }
  .phonenav a .badge { margin-left:auto; }
  .phonenav a.active { color:var(--acc); background:var(--acc-soft); font-weight:600; }
  .phonenav .sep { display:block; height:1px; background:var(--line); margin:4px 6px; }
  /* something waits — an approval, a chat with something new: a dot on the
     menu button (the badges themselves are in the menu) */
  header:has(nav .badge) .phonemenu > summary::before { content:""; position:absolute;
    top:7px; right:8px; width:9px; height:9px; border-radius:50%; background:var(--acc);
    box-shadow:0 0 0 2px var(--card); }
  header:has(nav .badge.warn) .phonemenu > summary::before { background:var(--warn); }
}
@media (max-width:640px) {
  /* a page's head: the title has the room; a chat's ⋯ stays beside it */
  .pagehead .picon { display:none; }
  .pagehead h1 { font-size:19px; }
  /* the message box's tools in one row — attach, voice, send; who answers
     under them */
  .ctools details.picker { order:9; flex:1 0 100%; }
  .pagehead:has(> .actions > details.convmenu:only-child) { flex-wrap:nowrap; }
  .pagehead:has(> .actions > details.convmenu:only-child) > .actions { width:auto; margin-left:auto; }
  /* Files: each filter panel is one row of chips that scrolls sideways */
  .fpanel { flex-wrap:nowrap; overflow-x:auto; max-width:100%; scrollbar-width:none; }
  .fpanel::-webkit-scrollbar { display:none; }
  .fpanel .chips { flex-wrap:nowrap; }
  .fpanel .chips a, .fpanel .fhead { flex:none; white-space:nowrap; }
  .fpanel details.chooser[open] > .menu-panel { position:fixed; left:8px; right:8px; top:64px;
    max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); overflow-y:auto; }
  /* popovers keep to the screen (the page script moves one back inside it) */
  details.confirm[open] > form, details.confirm[open] > div,
  details.popover[open] > form, details.popover[open] > div {
    max-width:calc(100vw - 16px); white-space:normal; }
  .editor .newname input { min-width:0; }
}
@media (pointer:coarse) {
  /* a phone zooms into a field under 16 px when it is tapped */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  select, textarea { font-size:16px !important; }
  /* targets for a finger */
  input[type=checkbox], input[type=radio], .convsel, .flist .fsel input { width:24px; height:24px; }
  .crumb a { display:inline-block; padding:6px 2px; }
  .row > a.mut, .row > a.wtitle, .fnameline > a, .frow .fname,
  .folderline .foldername { padding-top:5px; padding-bottom:5px; }
  .flist th .thsort { display:inline-block; padding-top:8px; padding-bottom:8px; }
  details.picker > summary, .ctools details.picker > summary,
  details > summary.mut { padding-top:6px; padding-bottom:6px; }
  /* the Calendar's links and its Always on line (ADR-0079) */
  .calalways > summary { min-height:36px; }
  .dline > a.dtitle, .dline > a.rtitle { padding-top:3px; padding-bottom:3px; }
  .cfact dd > a { display:inline-block; padding-top:4px; padding-bottom:4px; }
}
@media (hover:none) and (pointer:coarse) {
  /* the return key makes a new line here, and the send button sends */
  .composer .enterswitch { display:none; }
}
@media (max-width:860px) {
  /* the Calendar: the day's list under the month */
  .calwrap { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  /* the Calendar on a phone: squares with dots, the views by their icons */
  .calmonth { padding:10px 8px 6px; }
  .calnav h2 { min-width:0; font-size:15px; margin:0 2px; }
  .calgrid td { height:50px; }
  .cfill { min-height:50px; padding:3px 1px; align-items:center; gap:3px; }
  .dnum { width:26px; height:26px; }
  .cmarks { flex-direction:row; justify-content:center; gap:3px; }
  .cmarks li { width:6px; height:6px; padding:0; border-radius:999px; font-size:0;
    background:var(--acc); }
  .cmarks li.k-reminder { background:var(--warn); }
  .cmarks li.k-note { background:#98a2b3; }
  .cmarks li.more { display:none; }
  .cflag { top:1px; right:1px; }
  .cflag svg { width:10px; height:10px; }
  .calseg button { padding:6px 10px; }
  .calseg button span { display:none; }
  .calalways .calnames { display:none; }
  .dent { grid-template-columns:44px 20px minmax(0,1fr); }
  .dent .dend { grid-column:3; }
  .calthens { grid-template-columns:minmax(0,1fr); }
  .cfact { grid-template-columns:minmax(0,1fr); gap:2px; }
  .rwhen { min-width:0; }
}