/* ClutchClicks Admin (Docs/Systems/ControlPanel.md, rule 6): the owner's frame, "ClutchClicks HQ". A rail of sections
   at the left edge, the open section's pages in the sidebar beside it, the work with its head. Charcoal neutrals and
   ClutchClicks red as the one accent (the selection, the primary action), in light and dark. A failure is told apart
   from brand red by its own tone, an icon and words. */
@font-face { font-family: "Figtree"; src: url(vendor/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(vendor/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #f4f4f2; --side: #e9e9e6; --panel: #fbfbfa; --raise: #ffffff; --line: #e3e3df; --line2: #d2d2cd;
  --text: #17191c; --text2: #3e444c; --text3: #636a73; --faint: #9aa0a8; --head: #17191c;
  --blue: #2a76c9; --red: #e21c2c; --red2: #c41322;
  --sel: rgba(226,28,44,.1); --hover: #efefec; --chip: #f5f5f3;
  --ok: #12975d; --ok-bg: rgba(18,151,93,.11); --wait: #2a76c9; --wait-bg: rgba(42,118,201,.1);
  --warn: #b47d00; --warn-bg: rgba(180,125,0,.12); --bad: #d33a48; --bad-bg: rgba(211,58,72,.1); --amber: #c98c00;
  --note-bg: rgba(180,125,0,.07); --note-line: rgba(180,125,0,.3); --info-bg: rgba(42,118,201,.06); --info-line: rgba(42,118,201,.28);
  --term: #15181c; --shadow: 0 20px 60px rgba(0,0,0,.15); --lift: 0 1px 2px rgba(0,0,0,.08);
  --mark: .09; --mark-filter: none;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--sans);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* how things move (motion.css): the one curve everything arrives on, and a time by how far a change travels:
     a press under the pointer, a colour or a small state, something that crosses the page */
  --ease: cubic-bezier(.16, 1, .3, 1); --t-press: 90ms; --t-fast: 150ms; --t-move: 240ms;
  color-scheme: light;
}
/* Dark: set by theme.js before the first paint (the browser's kept choice, else the system's) */
:root[data-theme="dark"] {
  --bg: #101215; --side: #0b0d0f; --panel: #14171b; --raise: #191d22; --line: #262c33; --line2: #323943;
  --text: #e9ebee; --text2: #b9bec5; --text3: #8d949e; --faint: #5e6570; --head: #f3f4f6;
  --blue: #5aa9f0; --red: #e21c2c; --red2: #f2404e;
  --sel: rgba(226,28,44,.16); --hover: #191d22; --chip: #1f242a;
  --ok: #3ecf8e; --ok-bg: rgba(62,207,142,.13); --wait: #5aa9f0; --wait-bg: rgba(90,169,240,.14);
  --warn: #f2c14e; --warn-bg: rgba(242,193,78,.14); --bad: #f0616d; --bad-bg: rgba(240,97,109,.14); --amber: #f2c14e;
  --note-bg: rgba(242,193,78,.07); --note-line: rgba(242,193,78,.28); --info-bg: rgba(90,169,240,.07); --info-line: rgba(90,169,240,.28);
  --term: #0b0d0f; --shadow: 0 20px 60px rgba(0,0,0,.5); --lift: 0 1px 2px rgba(0,0,0,.5);
  --mark: .08; --mark-filter: url(#mark-tone);  /* index.html: white, the cursor brightest */
  color-scheme: dark;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
html, body { margin: 0; height: 100%; }
html:has(.app:not([hidden])) { overflow: hidden; }  /* the frame fills the window and each part scrolls in itself: the window never shows a scrollbar */
body { font: 14px/1.5 var(--sans); color: var(--text); background: var(--bg); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
::selection { background: color-mix(in srgb, var(--blue) 30%, transparent); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
a { color: var(--blue); text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; opacity: .55; }
input, textarea { font: inherit; color: inherit; caret-color: var(--blue); }
[hidden] { display: none !important; }
svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2 { font-family: var(--display); }
.mono, code, pre, kbd { font-family: var(--mono); }
.muted { color: var(--text3); }
.grow { flex: 1; }
/* on dark the mark's navy would sink into the page: the small logo sits on a light disc, as the favicon does */
:root[data-theme="dark"] img[src*="mark.svg"] { background: #f4f7fd; border-radius: 50%; padding: 2px; }

/* Buttons: one vocabulary everywhere; what each eases, and its press, is motion.css's */
.primary { height: 34px; padding: 0 14px; border-radius: 8px; background: var(--red); color: #fff; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
.primary:hover:not(:disabled) { background: var(--red2); }
.btn { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line2); background: var(--raise); color: var(--text); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; }
.btn:hover:not(:disabled) { border-color: var(--faint); }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; } .btn.primary:hover:not(:disabled) { background: var(--red2); border-color: var(--red2); }
.icon { width: 28px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center; color: var(--text3); flex: none; }
.icon:hover { background: var(--hover); color: var(--text); }
/* a named tool on a bar: its icon and its name, quiet until the pointer or its open state (a session's Details in the
   top bar; a website's History, Draft link and Live site on its page's bar) */
.tool { height: 28px; padding: 0 9px 0 7px; border-radius: 7px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text2); white-space: nowrap; flex: none; }
.tool:hover { background: var(--hover); color: var(--text); }
.tool[aria-pressed="true"] { background: var(--sel); color: var(--head); }

/* Status: colour, a dot and words, never colour alone. A pill or a tag is never wider than the box it stands in:
   text longer than that is cut at its edge, with an ellipsis where the words sit in an element of their own. */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 0 10px; line-height: 22px; white-space: nowrap; max-width: 100%; min-width: 0; overflow: clip; }  /* clip, never hidden: hidden moves the baseline of a pill that stands in a line of text */
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill > :is(i, b, span) { min-width: 0; overflow: clip; text-overflow: ellipsis; }
.tr > .pill { min-width: auto; }  /* a status in a row's own column is never cut */
.pill.ok { color: var(--ok); background: var(--ok-bg); } .pill.wait { color: var(--wait); background: var(--wait-bg); }
.pill.warn { color: var(--warn); background: var(--warn-bg); } .pill.bad { color: var(--bad); background: var(--bad-bg); }
.pill.off { color: var(--text3); background: var(--chip); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.dot.wait { background: var(--wait); } .dot.warn { background: var(--amber); } .dot.bad { background: var(--bad); } .dot.off { background: var(--line2); }
.lost { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 40; max-width: calc(100vw - 24px); background: var(--warn-bg); color: var(--warn); border: 1px solid var(--note-line); border-radius: 12px; padding: 8px 14px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow); }

/* Sign-in */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--side); }
.login-card { width: min(380px, 100%); display: grid; gap: 14px; background: var(--raise); border: 1px solid var(--line); border-radius: 18px; padding: 32px 28px 28px; box-shadow: var(--shadow); }
.login-card img { width: 56px; height: 56px; }
.login-card h1 { margin: 4px 0 0; font-size: 22px; font-weight: 700; color: var(--head); letter-spacing: -0.01em; }
.login-card > p { margin: -8px 0 6px; color: var(--text2); }
.login-card > .login-note { margin: 0; padding: 10px 12px; border: 1px solid var(--note-line); border-radius: 10px; background: var(--note-bg); color: var(--text); font-size: 13px; line-height: 1.45; }
.login-card .google { height: 44px; border: 1px solid var(--line2); border-radius: 999px; background: var(--raise); color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.login-card .google:hover { background: var(--hover); }
.login-card .google:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.login-card > .login-foot { margin: 0; color: var(--text3); font-size: 12.5px; text-align: center; }

/* The frame: the rail of sections, the sidebar of the open section's pages, the work. A top bar stands over the work
   only in a view that needs one (.topbar: a session, a website, the Browser) and on a phone. */
.app { display: grid; height: 100vh; height: 100dvh; --rail: 68px; --side-w: 240px; --nav: var(--side-w); grid-template: auto minmax(0, 1fr) / var(--rail) var(--nav) minmax(0, 1fr); background: var(--bg); }
.top { grid-area: 1 / 3; display: none; align-items: center; gap: 4px; height: 48px; padding: 0 10px; border-bottom: 1px solid var(--line); min-width: 0; }
.app.topbar .top { display: flex; }
.top .back, .top .back span, .top [data-drawer="insp"] { display: none; }  /* Details: in a session's chat on a computer (below, and browser.css) */
.slot h1 .crumb { color: var(--text3); font-weight: 500; margin-right: 2px; text-decoration: none; }  /* the tree a branch's page belongs to */
.slot h1 a.crumb:hover { color: var(--text); }  /* in a website it is a link back to the list (websites.js) */
.slot h1 .crumb svg.i { width: 12px; height: 12px; margin: 0 3px 0 5px; vertical-align: -1px; }
.slot { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding-right: 6px; }
.slot h1 { font: 600 14px var(--sans); margin: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg { display: inline-flex; background: var(--chip); border: 1px solid var(--line); border-radius: 8px; padding: 2px; flex: none; }
.seg button { height: 24px; padding: 0 10px; border-radius: 6px; color: var(--text2); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.seg button[aria-pressed="true"] { background: var(--raise); color: var(--head); font-weight: 600; box-shadow: var(--lift); }
/* The rail: the logo, then each section's icon and name; Admin, the team's tools, at its foot */
.rail { grid-area: 1 / 1 / 3 / 2; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 6px; overflow: auto; }
.logo { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: -.02em; margin-bottom: 12px; }
.rail a { width: 56px; padding: 8px 0 6px; border-radius: 10px; display: grid; justify-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text3); text-decoration: none; position: relative; flex: none; }
.rail a:hover { background: var(--raise); color: var(--text); }
.rail a[aria-current] { background: var(--sel); color: var(--red); }
.rail a svg.i { width: 19px; height: 19px; }
.rail a.foot { margin-top: auto; }
.n { min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--red); color: #fff; font: 700 11px/16px var(--mono); text-align: center; }
.n:empty { display: none; } .n.warn { background: var(--amber); color: #17191c; } .n.bad { background: var(--bad); }
.rail .n { position: absolute; top: 2px; right: 6px; }
/* The sidebar: the open section's name, a search, its pages by group with the open one's rows under it, and who is
   signed in at its foot */
.side { grid-area: 1 / 2 / 3 / 3; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.side-head { padding: 18px 16px 10px; }
.side-head h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--head); }
.search { margin: 0 12px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; height: 36px; color: var(--text3); background: var(--raise); flex: none; }
.search:focus-within { border-color: var(--red); }
.search input { border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--text); flex: 1; min-width: 0; }
.search input::placeholder { color: var(--text3); }
/* The keys that open the search (frame.js): shown beside a mouse, while the field is empty. The sidebar's field is
   drawn tighter, its label a size under what is typed, so "Search <section>" reads whole beside the keys */
.search .kbd { font: 11px var(--mono); color: var(--text3); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; flex: none; white-space: nowrap; }
.side .search { margin-inline: 10px; gap: 6px; padding: 0 9px; } .side .search input::placeholder { font-size: 13px; }
.search input:not(:placeholder-shown) + .kbd { display: none; }
@media (pointer: coarse) { .search .kbd { display: none; } }
.nav { flex: 1; min-height: 0; overflow: auto; padding: 4px 10px 12px; }
.nav-label { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); padding: 14px 8px 6px; }
.branch { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text3); text-decoration: none; font-weight: 500; }
.branch b { flex: 1; min-width: 0; font-weight: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.branch:hover { background: var(--raise); color: var(--text); }
.branch[aria-current] { background: var(--sel); color: var(--text); box-shadow: inset 2px 0 0 var(--red); }
.branch[aria-current] svg.i { color: var(--red); }
.me { flex: none; border-top: 1px solid var(--line); padding: 12px 14px; display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.me:hover { background: var(--raise); }
/* The avatar, every page's: a person's initials on their colour, the background set inline or by the page.
   `.av` is the 26px disc and `.av.lg` the 52px rounded square of a person's card. A page adds `av` beside its own
   class and its sheet keeps only what differs (size, font, background); a page sheet loads later and wins a tie. */
.av { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; color: #fff; font-size: 10.5px; font-weight: 800; }
.av.lg { width: 52px; height: 52px; border-radius: 14px; font-size: 18px; }
.me .av { width: 30px; height: 30px; background: var(--red); font-size: 11px; }
.me b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me small { display: block; color: var(--text3); font-size: 12px; }
/* the open page's rows, under its name */
.side .list { margin: 2px 0 8px 17px; padding: 2px 0 2px 6px; border-left: 1px solid var(--line); }
.label { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 12px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--faint); }
.label::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 1.5px; }
.label span { color: var(--text3); font-weight: 500; letter-spacing: 0; }
.label.ok { color: var(--ok); } .label.wait { color: var(--wait); } .label.off { color: var(--text3); } .label.bad { color: var(--bad); } .label.warn { color: var(--warn); }  /* a group's heading in its state's colour, on every tab's list */
.item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1px 9px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.item:hover { background: var(--hover); } .item[aria-current] { background: var(--sel); }
.item b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item.past b { font-weight: 400; color: var(--text2); }
.item time { font-size: 12px; color: var(--text3); }
.item small { grid-column: 2 / -1; font-size: 12.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item small.warn { color: var(--warn); font-weight: 600; }
/* Agents by project (sessionItems in frame.js): the "N sessions" line folds them all, and starts folded; a
   project's row folds its sessions, its "N archived" line its ended
   ones; a row's ⋯ takes the place of its time under the pointer (always shown on a touch screen) and opens its menu. */
.list > .proj:first-child { margin-top: 6px; }
.proj-head { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; width: 100%; padding: 8px 10px 8px 6px; border-radius: 10px; text-align: left; color: var(--text); }
.proj-head:hover { background: var(--hover); }
.proj-head > svg.i { width: 14px; height: 14px; color: var(--text3); transition: transform var(--t-fast); }
.proj-head[aria-expanded="true"] > svg.i { transform: rotate(90deg); }
.proj-head b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-head .n { font-size: 12px; color: var(--text3); background: var(--chip); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; font-variant-numeric: tabular-nums; }
.proj-head time { font-size: 12px; color: var(--text3); min-width: 24px; text-align: right; }
.proj .inner { margin: 0 0 4px 13px; padding-left: 6px; border-left: 1px solid var(--line); }
.row { position: relative; }
.row .item { padding-right: 38px; }
.row .item time { margin-right: -28px; }
.row-more { position: absolute; right: 6px; top: 7px; width: 26px; height: 26px; border-radius: 7px; display: none; place-items: center; color: var(--text2); }
.row-more:hover { background: var(--line); color: var(--text); }
.row:hover .row-more, .row.menu .row-more, .row-more:focus-visible { display: grid; }
.row:hover .item time, .row.menu .item time { visibility: hidden; }
@media (hover: none) { .row-more { display: grid; } .row .item time { margin-right: 0; } }
.arch { display: flex; align-items: center; }
.sub { flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; color: var(--text3); text-align: left; }
.sub:hover { background: var(--hover); color: var(--text2); }
.sub svg.i { width: 12px; height: 12px; transition: transform var(--t-fast); } .sub[aria-expanded="true"] svg.i { transform: rotate(90deg); }
.sub-del { font-size: 12px; font-weight: 600; color: var(--bad); padding: 3px 7px; border-radius: 6px; visibility: hidden; }
.arch:hover .sub-del, .sub-del:focus-visible { visibility: visible; } .sub-del:hover { background: var(--bad-bg); }
@media (hover: none) { .sub-del { visibility: visible; } }
.row .pop { position: absolute; right: 6px; top: 36px; z-index: 5; width: 216px; background: var(--raise); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; }
.pop button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border-radius: 7px; font-size: 13px; color: var(--text); text-align: left; }
.pop button:hover { background: var(--hover); }
.pop button > svg.i { width: 15px; height: 15px; color: var(--text2); }
.pop [data-moving] > svg.i:last-child { margin-left: auto; width: 12px; height: 12px; transition: transform var(--t-fast); } .pop [data-moving][aria-expanded="true"] > svg.i:last-child { transform: rotate(90deg); }
.pop .moves { max-height: 220px; overflow: auto; margin: 0 0 2px 16px; padding-left: 4px; border-left: 1px solid var(--line); }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
.pop .del, .pop .del > svg.i { color: var(--bad); }
.empty-list { padding: 8px 10px; color: var(--text3); font-size: 13px; }
/* the work: no mark behind it */
.main { grid-area: 2 / 3; min-width: 0; min-height: 0; display: grid; background: var(--bg); position: relative; isolation: isolate; overflow: hidden; }

/* Starting a session: one box under the mark */
.home { overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; padding: 40px 24px 64px; }  /* the column never outgrows the room, so the group stays on its centre */
.home .col { width: min(680px, 100%); display: grid; gap: 18px; }
.home h1 { margin: 0; font-size: 30px; font-weight: 700; color: var(--head); letter-spacing: -0.02em; text-align: center; text-wrap: balance; }
.home .lede { margin: -10px 0 6px; color: var(--text2); font-size: 15px; text-align: center; }
.box { border: 1px solid var(--line2); border-radius: 18px; background: var(--raise); box-shadow: var(--shadow); padding: 12px 12px 8px 16px; }
.box:focus-within { border-color: var(--blue); }
.box textarea { width: 100%; border: 0; outline: none; resize: none; font: 15px/1.5 var(--sans); min-height: 46px; max-height: 40vh; background: transparent; display: block; }
.box textarea::placeholder { color: var(--text3); }
.box .bar2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text3); }
.home .box { padding: 14px 12px 10px 18px; } .home .box textarea { font-size: 16px; min-height: 76px; } .home .primary { margin-left: auto; }
.starts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.starts button { border: 1px solid var(--line2); border-radius: 999px; padding: 6px 13px; font-size: 13px; color: var(--text2); background: var(--raise); }
.starts button:hover { background: var(--hover); color: var(--text); }
/* what runs now: one line under the box, its arrow down while folded; a click unfolds the sessions */
.now:not(:empty) { width: min(680px, 100%); margin-top: 32px; border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 2px; align-content: start; }
.now h2 { font: inherit; margin: 0; }
.now h2 button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 10px; font: 600 12px var(--sans); color: var(--text3); text-align: left; }
.now h2 button:hover { background: var(--hover); color: var(--text); }
.now h2 button > span { font-weight: 500; }
.now h2 small { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--warn); }
.now h2 svg.i { margin-left: auto; width: 14px; height: 14px; transform: rotate(90deg); transition: transform var(--t-fast); } .now h2 small + svg.i { margin-left: 4px; }
.now h2 [aria-expanded="true"] svg.i { transform: rotate(-90deg); }
.now a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.now a:hover { background: var(--hover); }
.now a b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now a span:last-child { margin-left: auto; font-size: 12.5px; color: var(--text3); white-space: nowrap; }

/* One session */
.sessions { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
/* one column held to the pane's width */
.pane { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; }
.callouts { display: grid; gap: 8px; padding: 0 28px; }
.callouts:not(:empty) { padding-top: 14px; }
.callout { max-width: var(--chat-width); width: 100%; margin: 0 auto; border: 1px solid var(--note-line); background: var(--note-bg); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; }
.callout > svg { color: var(--warn); }
.callout.info { border-color: var(--info-line); background: var(--info-bg); } .callout.info > svg { color: var(--wait); }
.callout p { margin: 0; } .callout p small { display: block; color: var(--text2); font-size: 13px; }
.callout ol { margin: 6px 0 0; padding-left: 18px; color: var(--text2); font-size: 13.5px; display: grid; gap: 4px; }
.callout .ask { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--raise); border: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow: auto; }
.callout .keys { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.callout .codeform { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.callout .codeform input { flex: 1 1 180px; height: 32px; border: 1px solid var(--line2); border-radius: 999px; padding: 0 12px; font-family: var(--mono); font-size: 13px; background: var(--raise); }
/* The conversation's text size and width are the admin's (Settings, kept per browser, applied by theme.js); every
   size inside the conversation is relative to --chat-text. */
:root { --chat-text: 15px; --chat-share: 54%; --chat-width: max(840px, var(--chat-share)); }  /* a share of the room, so it grows with the screen */
.chat { overflow: auto; padding: 28px 28px 30px; overscroll-behavior: contain; font-size: var(--chat-text); }
.chat .col { max-width: var(--chat-width); margin: 0 auto; display: grid; gap: 16px; }
.u { font-size: .933em; border: 1px solid var(--line2); background: var(--raise); border-radius: 8px; padding: 9px 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--lift); }
.u .time { display: block; font-size: .82em; color: var(--text3); margin-top: 2px; white-space: normal; }
.u .time b { font-weight: 600; color: var(--text2); }  /* who sent it */
.u.queued { border-style: dashed; background: none; box-shadow: none; color: var(--text2); }  /* sent, not read by the agent yet */
.cmd { justify-self: start; font: .833em var(--mono); color: var(--head); background: var(--sel); border-radius: 6px; padding: 3px 10px; margin-left: 14px; }
.note { justify-self: center; font-size: .833em; color: var(--text3); max-width: 90%; text-align: center; white-space: pre-wrap; }
.a { font-size: 1em; line-height: 1.65; overflow-wrap: anywhere; padding: 0 14px; }
.a p { margin: 0 0 10px; } .a > :last-child { margin-bottom: 0; }
.a h4 { font: 600 1em/1.4 var(--sans); margin: 14px 0 6px; }
.a ul, .a ol { margin: 0 0 10px; padding-left: 22px; } .a li { margin: 2px 0; }
.a code, .release code, .road code { font-size: 12.5px; background: var(--chip); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.a code { font-size: .833em; } .a pre code { font-size: 1em; }
.a pre { background: var(--chip); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; overflow: auto; font-size: .833em; line-height: 1.5; margin: 0 0 10px; }
.a pre code { background: none; border: 0; padding: 0; }
.tablewrap { overflow: auto; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 10px; }
.a table { border-collapse: collapse; font-size: .9em; line-height: 1.45; min-width: 100%; }
.a th, .a td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.a th { font-weight: 600; background: var(--panel); } .a tr:last-child td { border-bottom: 0; }
/* A background command's end: a line of the agent's work, set like a folded run of tool calls, never a message.
   A click opens Claude Code's own words on it; the arrow at the line's end says so. */
.task { padding: 0 14px; font-size: .867em; line-height: 1.5; color: var(--text3); overflow-wrap: anywhere; }
.task > summary { list-style: none; cursor: pointer; display: flex; gap: 6px; border-radius: 6px; }
.task > summary::-webkit-details-marker { display: none; }
.task > summary:hover { color: var(--text); }
.task > summary > svg.i { color: var(--ok); margin-top: .2em; } .task b { font-weight: 500; color: var(--text2); }
.task.bad > summary > svg.i, .task.bad b { color: var(--bad); }
.task span svg.i { width: 13px; height: 13px; margin-left: 5px; vertical-align: -2px; transition: transform var(--t-fast); }
.task[open] span svg.i { transform: rotate(90deg); }
.task p { margin: 4px 0 0 22px; color: var(--text2); }
/* A run of tool calls: one row per call (icon, what it is for, the command, how it ended), open while it is the
   newest thing in the conversation and folded to its count once the agent says something after it. */
.tools { color: var(--text3); font-size: .867em; padding: 0 14px; }
.tools > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 2px 6px 2px 0; }
.tools > summary:hover { color: var(--text); }
.tools summary::-webkit-details-marker { display: none; }
.tools > summary svg { transition: transform var(--t-fast); }
.tools[open] > summary svg { transform: rotate(90deg); }
.tools ol { margin: 8px 0 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.tools li + li { border-top: 1px solid var(--line); }
.tool > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px 12px; color: var(--text3); }
.tool > summary:hover { background: var(--hover); }
.tool > summary b { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }
.tool > summary code { font-size: .923em; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool .st { font-style: normal; font-size: .923em; color: var(--text3); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tool .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.tool .st.run { color: var(--wait); font-weight: 600; } .tool .st.run::before { background: var(--wait); } .tool .st.err { color: var(--bad); font-weight: 600; } .tool .st.err::before { background: var(--bad); }
.tool pre { margin: 0; max-height: 320px; overflow: auto; background: var(--chip); border-top: 1px solid var(--line); padding: 9px 12px 9px 37px; font-size: .923em; line-height: 1.5; color: var(--text2); white-space: pre-wrap; overflow-wrap: anywhere; }
.tool pre.call { color: var(--text); } .tool pre:empty { display: none; }
/* The live line: the agent's own word for what it is doing, then its time and tokens. */
.working { display: flex; align-items: baseline; gap: 8px; color: var(--text3); font-size: .867em; padding: 0 14px; min-width: 0; }
.working svg.i { width: 13px; height: 13px; color: var(--red); align-self: center; } .working b { font-weight: 600; color: var(--head); font-size: 1.04em; }
.working span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pane { position: relative; }
.latest { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100px + clamp(12px, 5.5vh, 64px)); z-index: 5; box-shadow: var(--shadow); } .latest svg.i { transform: rotate(180deg); }
.earlier { justify-self: center; }
.empty.hello { border: 0; display: grid; justify-items: center; gap: 4px; padding: 12vh 24px 0; max-width: 420px; margin: 0 auto; text-wrap: balance; }
.empty.hello img { margin-bottom: 10px; } .empty.hello b { font: 600 19px var(--display); color: var(--head); letter-spacing: -0.01em; }
/* The composer stands off the bottom edge, more on a tall screen, so the end of a long conversation is read above
   the screen's last lines. */
.composer { padding: 6px 28px clamp(12px, 5.5vh, 64px); }
.composer .box { max-width: var(--chat-width); margin: 0 auto; padding: 12px 10px 10px 16px; } .composer .box textarea { min-height: 26px; margin-bottom: 8px; font-size: var(--chat-text); }
.sets .tr { grid-template-columns: minmax(0, 1fr) auto; } .sets .seg button { height: 28px; padding: 0 13px; font-size: 13px; }
@media (max-width: 760px) { .sets .tr { grid-template-columns: minmax(0, 1fr); gap: 10px; } .sets .tr > :last-child { justify-self: start; max-width: 100%; } }  /* a phone: the choice goes under its name, which keeps the row's width */
/* Automations' Settings (pages.js, tuneHtml): a folded line per automation, then one row per value, as API keys' rows */
.tune .tr { grid-template-columns: minmax(0, 1fr) auto minmax(0, 250px) 64px; }
.tune .tr > span:first-child { display: grid; gap: 2px; } .tune small { font-size: 12.5px; color: var(--text3); }
.tune .field { display: flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 0; }
.tune input { width: 100%; min-width: 0; height: 34px; padding: 0 11px; border: 1px solid var(--line2); border-radius: 9px; background: var(--bg); font-size: 13px; }
.tune input.num { width: 76px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.tune input:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: transparent; }
.tune .unit { color: var(--text3); font-size: 13px; flex: none; }
.tune .where a { color: var(--blue); font-weight: 500; display: inline-flex; align-items: center; gap: 3px; } .tune .where a svg { width: 13px; height: 13px; }
.tune .where.warn { color: var(--warn); font-weight: 500; }
.tune .hold { visibility: hidden; }
.tune .grp { grid-template-columns: minmax(0, 1fr) auto auto; width: 100%; background: var(--chip); padding: 10px 16px; text-align: left; color: inherit; }
.tune .grp b { font: 600 13.5px var(--display); color: var(--head); }
.tune .grp > svg { width: 15px; height: 15px; color: var(--text3); transform: rotate(90deg); transition: transform var(--t-fast) var(--ease); }
.tune .grp[aria-expanded="true"] > svg { transform: rotate(-90deg); }
@media (max-width: 700px) { .tune .tr:not(.grp) { grid-template-columns: minmax(0, 1fr); gap: 8px; } .tune .grp { gap: 10px; }
  .tune .field { justify-content: flex-start; } .tune .hold { display: none; } .tune .tr > .pill, .tune .tr > .btn { justify-self: start; } }
.sample { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 12px; font-size: var(--chat-text); max-width: var(--chat-width); }
.pick { position: relative; display: inline-flex; align-items: center; height: 30px; border-radius: 999px; border: 1px solid var(--line); background: var(--chip); color: var(--text); font-size: 12.5px; font-weight: 500; }
.pick:hover:not(:has(:disabled)) { border-color: var(--line2); background: var(--hover); } .pick:has(:disabled) { opacity: .55; }
.pick select { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; height: 100%; padding: 0 27px 0 12px; border-radius: 999px; cursor: pointer; }
.pick select:disabled { cursor: default; opacity: 1; } .pick option { background: var(--raise); color: var(--text); }
.pick svg.i { position: absolute; right: 9px; width: 12px; height: 12px; transform: rotate(90deg); pointer-events: none; }
.stop { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line2); background: var(--raise); color: var(--head); display: grid; place-items: center; flex: none; }
.stop:hover { background: var(--hover); } .stop svg.i { fill: currentColor; width: 14px; height: 14px; }
.send { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; flex: none; }
.send:hover:not(:disabled) { background: var(--red2); } .send svg.i { stroke-width: 2.2; }
.ended { max-width: var(--chat-width); margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px dashed var(--line2); border-radius: 12px; color: var(--text2); background: var(--bg); }
.ended .btn { margin-left: auto; }

/* A session's details */
.insp { border-left: 1px solid var(--line); overflow: auto; padding: 16px 16px 40px; display: grid; gap: 22px; align-content: start; background: var(--panel); }
.insp h3 { margin: 0 0 9px; font-size: 12px; font-weight: 600; color: var(--text3); }
.insp .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }  /* what acts on the session: SSH attach, Archive */
dl.kv { margin: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 7px 10px; font-size: 13px; }
dl.kv dt { color: var(--text3); } dl.kv dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dl.kv .mono { font-size: 12px; }
.minis { display: grid; gap: 10px; }
.meter { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 12px; color: var(--text2); }
.meter b { font-weight: 600; color: var(--text); }
.bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--head); }
.bar i.warn { background: var(--amber); } .bar i.bad { background: var(--bad); }
.svc { display: grid; gap: 7px; font-size: 13px; }
.svc div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.svc div span:last-child { margin-left: auto; color: var(--text3); font-size: 12px; white-space: nowrap; }
.link { color: var(--blue); font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* Pages: Automations, Issues, Server, Roadmap, Changelog */
.scroll { overflow: auto; min-height: 0; }
.page { max-width: 1440px; padding: 26px 34px 60px; width: 100%; }
/* A page's head (head() in core.js): the small crumb the frame gives (--crumb: the page's group or section), the title,
   one line, and at its right the page's primary action */
.ph { display: flex; align-items: flex-end; gap: 14px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ph > :is(div:first-child:not(.mark), .mark + div) { flex: 1 1 320px; min-width: 0; }
.ph > :is(div:first-child:not(.mark), .mark + div)::before { content: var(--crumb, none); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ph h1 { margin: 0 0 4px; font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--head); text-wrap: balance; }
.ph p { margin: 0; color: var(--text3); font-size: 14px; }
.ph-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.ph .mark { width: 42px; height: 42px; border-radius: 13px; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; flex: none; }
.ph .mark.warn { background: var(--warn-bg); color: var(--warn); } .ph .mark.bad { background: var(--bad-bg); color: var(--bad); }
.ph .mark svg { width: 22px; height: 22px; stroke-width: 2.2; }
.page h2 { font-size: 15px; font-weight: 600; color: var(--head); margin: 36px 0 12px; display: flex; align-items: baseline; gap: 10px; }
.page h2 small { font: 400 13px var(--sans); color: var(--text3); }
.attn { border: 1px solid var(--note-line); background: var(--note-bg); border-radius: 12px; }
.attn .r { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; padding: 12px 16px; align-items: center; }
.attn .r + .r { border-top: 1px solid var(--note-line); }
.attn .r > svg { color: var(--warn); } .attn .r.bad > svg { color: var(--bad); }
.attn .r p { margin: 0; } .attn .r p small { display: block; color: var(--text2); font-size: 13px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; }
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat .k { font-size: 12.5px; color: var(--text3); }
.stat .v { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.stat .v small { font-size: 13px; font-weight: 400; color: var(--text3); letter-spacing: 0; }
.stat .bar { margin-top: 6px; }
/* The stat tile, every page's: a label, a big figure and a small line in a box of its own (`.stats` above is the
   joined strip). `.tiles` lays them four across, two under 1100px; a `.tile` holds `.tile-l`, `.tile-v` and `.tile-d`.
   A page adds these beside its own classes and its sheet keeps only what differs; a page sheet loads later and wins
   a tie. */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); }
.tile-l, .tile-d { font-size: 12px; font-weight: 600; color: var(--text3); }
.tile-v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--head); }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .tiles { gap: 10px; } }
/* The data table, every page's: `.tw` is the box around a <table> and scrolls it sideways. Small capital heads, a line
   under each row, and `.num` on the cells of a numeric column. `.tw-open` is a table whose row opens something: the
   pointer and the hover tone. A page adds `tw` beside its own class, as with the tile. */
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); }
.tw table { width: 100%; border-collapse: collapse; }
.tw th { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tw td { padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tw tr:last-child td { border-bottom: 0; }
.tw :is(td, th).num { text-align: right; font-family: var(--mono); font-size: 12.5px; }
.tw-open tbody tr { cursor: pointer; transition: background var(--t-fast); } .tw-open tbody tr:hover { background: var(--hover); }
.table, .issues { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tr { display: grid; grid-template-columns: 220px minmax(0, 1fr) 170px; gap: 16px; padding: 13px 16px; align-items: center; }
.tr + .tr, .logs + .tr { border-top: 1px solid var(--line); }
[data-row] { scroll-margin-top: 16px; } .tr.cur { background: var(--sel); } h2.cur, .day.cur { color: var(--blue); }
.tr .name { display: grid; min-width: 0; } .tr .name b { font-weight: 600; } .tr .name small { color: var(--text3); font-size: 12px; overflow-wrap: anywhere; } .tr .name small .warn { color: var(--warn); font-weight: 600; }
.tr .r { text-align: right; font-size: 12.5px; color: var(--text2); display: grid; gap: 6px; justify-items: end; }
.tr .r .acts { display: flex; gap: 6px; }
.ticks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(2px, 1fr); gap: 2px; height: 26px; }
.ticks i { border-radius: 2px; background: #3fae72; }
.ticks i.bad { background: var(--bad); } .ticks i.none { background: var(--line); }
.tickfoot { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text3); margin-top: 5px; }
.logs { margin: 0; background: var(--term); color: #d7deef; font: 12px/1.6 var(--mono); padding: 12px 16px; max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.logs .lt { color: #7f8db3; } .logs .le { color: #ff9b8f; } .logs .lw { color: #f2c46d; }
.acc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px; display: grid; gap: 9px; align-content: start; }
.card .k { font-size: 12.5px; color: var(--text3); display: flex; justify-content: space-between; gap: 8px; }
.card .v { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.card .v small { font-size: 13px; font-weight: 400; color: var(--text3); letter-spacing: 0; }
.card .err { color: var(--text2); font-size: 13px; margin: 0; }
.cal .tr { grid-template-columns: minmax(0, 1fr) 170px 110px; }
.days { font-weight: 600; } .days.warn { color: var(--warn); } .days.bad { color: var(--bad); }
.issue { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 12px 16px; align-items: start; }
.issue + .issue { border-top: 1px solid var(--line); }
.issue > svg { margin-top: 2px; color: var(--warn); } .issue.bad > svg { color: var(--bad); } .issue.info > svg { color: var(--text3); }
.issue p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.issue small { color: var(--text3); font-size: 12px; white-space: nowrap; }
.issue.new { background: var(--note-bg); } .issue small b { color: var(--warn); font-weight: 600; }
.issue small { text-align: right; } .issue .marks { display: flex; justify-content: flex-end; gap: 4px; margin-top: 6px; }
.issue .mk { font: inherit; font-size: 12px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--text3); cursor: pointer; }
.issue .mk[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--bg); }  /* the page's own ground as ink: white on light's blue, navy on dark's */
.issue .mk.blocked[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); }
.issue .by { display: block; margin: 4px 0 0 auto; max-width: 280px; white-space: normal; } .issue.blocked .by { color: var(--bad); }
.issue.fixed p, .issue.reviewed p, .issue.fixed > svg, .issue.reviewed > svg { color: var(--text3); }
/* Dismiss (pages.js): beside an Issue's marks and set apart from them, for it sets no mark; at a piece of work's head.
   What is dismissed stands under its list's last line, "N dismissed", which folds like Agents' "N archived" */
.issue .marks { flex-wrap: wrap; }
.issue .mk.out { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; } .issue .mk.out:first-child { margin-left: 0; }
.issue .mk.out svg { width: 12px; height: 12px; } .issue .mk.out:hover { background: var(--hover); color: var(--text); }
.gone { display: flex; padding: 4px 6px; background: var(--panel); border-top: 1px solid var(--line); } .gone:first-child { border-top: 0; }
.gone + .issue { border-top: 1px solid var(--line); }
.w-top { display: flex; align-items: center; gap: 8px; } .w-top .btn { margin-left: auto; }
/* Clutchy's work (pages.js): the work as a short list beside the open one's whole record; one column under 900 px */
.w-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; margin-top: 22px; align-items: start; }
.w-pick { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.w-pick .day { display: flex; justify-content: space-between; }
.w-pick a { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; padding: 10px 14px; text-decoration: none; color: var(--text); border-top: 1px solid var(--line); }
.w-pick a > svg { margin-top: 3px; color: var(--text3); } .w-pick a.ok > svg { color: var(--ok); } .w-pick a.bad > svg { color: var(--bad); }
.w-pick a.warn > svg { color: var(--warn); } .w-pick a.wait > svg { color: var(--wait); }
.w-pick a b { font-weight: 600; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.w-pick a small { grid-column: 2; color: var(--text3); font-size: 12px; } .w-pick a small em { font-style: normal; font-weight: 600; color: var(--warn); }
.w-pick a[aria-current] { background: var(--sel); } .w-pick a:hover { background: var(--hover); } .w-pick a:focus-visible { outline-offset: -2px; border-radius: 0; }
.w-rec { border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; min-width: 0; }
.w-rec h3 { font: 600 18px/1.3 var(--display); color: var(--head); margin: 10px 0 2px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.w-rec .meta { color: var(--text3); font-size: 12.5px; margin: 0; }
.w-rec .tag.new { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.w-rec dl { margin: 18px 0 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px 16px; }
.w-rec dt { color: var(--text3); font-size: 12.5px; } .w-rec dd { margin: 0; max-width: 72ch; min-width: 0; overflow-wrap: anywhere; }
.btn.go { background: var(--head); border-color: var(--head); color: var(--bg); } .btn.go:hover:not(:disabled) { background: var(--text); }
.w-commit { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .w-commit + .w-commit, .w-diff + .w-commit { margin-top: 8px; }
.w-commit code { font-size: 12px; color: var(--text3); }
.w-diff { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); font: 12px/1.55 var(--mono); overflow: auto; max-height: 460px; white-space: pre; }
.w-diff ins { color: var(--ok); text-decoration: none; } .w-diff del { color: var(--bad); text-decoration: none; } .w-diff i { color: var(--text3); font-style: normal; }
.empty.w-none { margin-top: 22px; }
@media (max-width: 900px) { .w-split { grid-template-columns: minmax(0, 1fr); } .w-rec dl { grid-template-columns: 1fr; gap: 2px; } .w-rec dd { margin-bottom: 10px; } }
@media (max-width: 760px) {  /* a phone: the time and the marks go under the text, which keeps the row's width */
  .issue { grid-template-columns: 22px minmax(0, 1fr); } .issue small { grid-column: 2; text-align: left; white-space: normal; }
  .issue .marks { justify-content: flex-start; } .issue .by { margin-left: 0; max-width: none; }
}
.day { font-size: 12px; font-weight: 600; color: var(--text3); padding: 10px 16px 6px; background: var(--panel); border-top: 1px solid var(--line); }
.day:first-child { border-top: 0; }
.releases { margin-top: 28px; }
.release { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 24px; padding: 22px 0 24px; border-top: 1px solid var(--line); }
.release .when { position: sticky; top: 0; align-self: start; display: grid; gap: 2px; }
.release .when b { font: 600 17px var(--display); letter-spacing: -0.01em; color: var(--head); }
.release .when small { color: var(--text3); font-size: 12.5px; }
.release.cur .when b { color: var(--blue); }
.release ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.release li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.release li .pill { justify-self: start; } .release li .pill::before { content: none; } .release li .pill i { font-style: normal; }
.release li .tag { white-space: nowrap; }
.release li p { margin: 0; max-width: 68ch; color: var(--text); overflow-wrap: anywhere; }
.road .tr { grid-template-columns: 220px minmax(0, 1fr) 110px; align-items: start; }
.road p { margin: 0; overflow-wrap: anywhere; }
.road .tr > div > small { display: block; color: var(--text3); font-size: 12.5px; margin-top: 3px; overflow-wrap: anywhere; }
/* A request reads in one glance: a shut row holds one line of what was asked (two on a phone) and one of where it stands; its name
   opens it whole (pages.js, roadFit: a row that already fits shows no chevron) */
.road .tr.shut p, .road .tr.shut > div > small { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.road .tr.shut p, .road .tr.shut > div > small { -webkit-line-clamp: 1; }
.road-open { display: flex; gap: 6px; align-items: flex-start; text-align: left; }
.road-open svg.i { width: 12px; height: 12px; margin-top: 4px; color: var(--text3); transition: transform var(--t-fast); }
.road-open[aria-expanded="true"] svg.i { transform: rotate(90deg); }
.road-open.fits { cursor: default; } .road-open.fits svg.i { visibility: hidden; }
.empty { border: 1px dashed var(--line2); border-radius: 12px; padding: 28px; text-align: center; color: var(--text2); }
.empty b { display: block; color: var(--text); margin-bottom: 4px; }

/* Users and Access, the owners' pages: an account's row unfolds into its form; an entry of the record opens on a click */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12px; font-weight: 500; line-height: 22px; padding: 0 9px; border-radius: 6px; background: var(--chip); color: var(--text2); border: 1px solid var(--line); max-width: 100%; min-width: 0; overflow: clip; text-overflow: ellipsis; }
.tag.all { background: var(--wait-bg); color: var(--wait); border-color: transparent; }
.tag.p-now { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.tag.p-next { background: var(--wait-bg); color: var(--wait); border-color: transparent; }
.tr.dim .name, .tr.dim .tags { opacity: .6; }
.edit { display: grid; gap: 18px; padding: 18px 16px 16px; background: var(--panel); border-top: 1px solid var(--line); }
.edit + .tr { border-top: 1px solid var(--line); } .edit:first-child { border-top: 0; }
.edit .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.edit label:not(.tick) { display: grid; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--text2); }
.edit input:not([type=checkbox]) { height: 36px; border: 1px solid var(--line2); border-radius: 9px; padding: 0 11px; background: var(--bg); font-size: 14px; color: var(--text); min-width: 0; }
.edit input::placeholder { color: var(--text3); }
.edit input:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: transparent; }
.edit fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.edit legend { padding: 0; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--head); }
.edit legend small { font-weight: 400; color: var(--text3); }
.tick { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; }
.tick input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--blue); }
.tick b { font-weight: 500; } .tick small { display: block; color: var(--text3); font-size: 12.5px; }
.edit fieldset:has([name=owner]:checked) .tick:has([name=area]) { opacity: .5; }  /* an owner opens everything */
.si { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.si b { font-weight: 500; } .si small { display: block; color: var(--text3); font-size: 12.5px; overflow-wrap: anywhere; }
.hint { margin: 0; color: var(--text3); font-size: 12.5px; }
.edit .foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .edit .foot .grow { flex: 1; }
.edit .primary { height: 32px; font-size: 13px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; } .page .filters + h2 { margin-top: 20px; }
.choose { position: relative; display: inline-flex; align-items: center; height: 30px; border: 1px solid var(--line2); border-radius: 999px; background: var(--raise); font-size: 13px; }
.choose > svg.i { position: absolute; color: var(--text3); pointer-events: none; }
.choose > svg.i:first-child { left: 10px; width: 15px; height: 15px; }
.choose > svg.i:last-child { right: 9px; width: 13px; height: 13px; transform: rotate(90deg); }
.choose select { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; height: 100%; padding: 0 28px 0 32px; border-radius: 999px; cursor: pointer; max-width: 260px; }
.choose select:focus-visible { outline: 2px solid var(--blue); } .choose option { background: var(--raise); color: var(--text); }
.entry + .entry { border-top: 1px solid var(--line); }
.entry summary { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 10px 16px; align-items: center; cursor: pointer; list-style: none; }
.entry summary::-webkit-details-marker { display: none; }
.entry summary:hover { background: var(--hover); } .entry summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.entry summary > svg { color: var(--text3); } .entry.bad summary > svg { color: var(--bad); }
.entry p { margin: 0; overflow-wrap: anywhere; } .entry p b { font-weight: 600; }
.entry small { color: var(--text3); font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.entry small b { color: var(--bad); font-weight: 600; }
.entry small svg.i { width: 13px; height: 13px; transform: rotate(90deg); transition: transform var(--t-fast); } .entry[open] small svg.i { transform: rotate(-90deg); }
.entry dl { margin: 0; padding: 4px 16px 14px 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 20px; }
.entry dt { font-size: 12px; color: var(--text3); } .entry dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.btn.more { margin-top: 12px; }
.credit { margin-top: 14px; } .credit a { color: var(--blue); }
.skeleton { height: 14px; border-radius: 7px; background: var(--chip); }
/* a notice sits in the top bar, over nothing a person reads or types */
.toast { position: fixed; left: 50%; top: 5px; min-height: 34px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateX(-50%); background: #0d1733; color: #fff; border: 1px solid #2b3a66; padding: 9px 16px; border-radius: 999px; font-size: 13px; box-shadow: var(--shadow); z-index: 30; max-width: calc(100vw - 32px); }
.toast.bad { background: #b42318; border-color: transparent; }

.phone-tabs { display: none; }

.insp-closed .insp { display: none; }
@media (min-width: 1181px) {
  .insp-closed .sessions { grid-template-columns: minmax(0, 1fr); }
  .app:not(.insp-closed)[data-view="session"] { --insp: 300px; }  /* the top bar's title stays over the chat */
  .app:not(.insp-closed)[data-view="session"] .main::before { right: calc(300px + (100% - 300px) / 2 - 260px); }  /* centred in the chat, clear of the open details */
}
@media (min-width: 761px) {
  /* an open website takes the whole width beside the rail; the top bar's corner button closes the rail too */
  .app.side-closed { --nav: 0px; } .side-closed .side { display: none; }
  .app.left-closed { --rail: 0px; --nav: 0px; } .left-closed :is(.rail, .side) { display: none; }
  .top .phone { display: none; }  /* Settings holds them */
  /* a website's way back to the list of websites, with its name */
  [data-view="website"] .top .back { display: inline-flex; align-items: center; gap: 3px; width: auto; padding: 0 10px 0 5px; font-size: 13px; font-weight: 500; color: var(--text2); text-decoration: none; white-space: nowrap; }
  [data-view="website"] .top .back span { display: inline; }
  [data-view="session"] .top [data-drawer="insp"] { display: inline-flex; }
  /* the view's name stands over the centre of its work, clear of a session's open details, so it lines up with what is
     centred below it (the conversation) */
  .top { position: relative; } .slot h1 { position: absolute; left: calc((100% - var(--insp, 0px)) / 2); transform: translateX(-50%); max-width: 44vw; }
}
@media (min-width: 761px) and (min-height: 700px) {
  /* The start page: the mark, the question and its box stand as one group on the room's centre. What runs now sits
     under the group and unfolds into the room left below it, scrolling there, so the box never moves. */
  .home { grid-template-rows: minmax(0, 1fr) auto minmax(150px, 1.6fr); align-content: stretch; padding: 24px; }
  .home .col { grid-row: 2; }
  .home .col::before { content: ""; justify-self: center; width: clamp(180px, 30vh, 300px); aspect-ratio: 1; margin-bottom: 10px; background: url(mark.svg) center / contain no-repeat; opacity: calc(var(--mark) * 3); filter: var(--mark-filter); }
  .home .now { grid-row: 3; align-self: stretch; min-height: 0; margin-top: 18px; overflow: auto; }
}
@media (max-width: 1180px) {  /* no room beside the conversation: the open details lie over its right side */
  .sessions { grid-template-columns: minmax(0, 1fr); }
  .insp { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; z-index: 6; box-shadow: var(--shadow); }
}
@media (max-width: 760px) {
  /* a phone: the top bar over every page, the sections as tabs at the foot, and the sidebar over the page from the
     top bar's corner button, closed again as a page opens (frame.js, render) */
  .app { grid-template: 48px minmax(0, 1fr) auto / minmax(0, 1fr); }
  .top, .app.topbar .top { grid-area: 1 / 1; display: flex; }
  .rail { display: none; }
  .side { grid-area: 2 / 1; z-index: 9; width: min(300px, 86vw); box-shadow: var(--shadow); } .left-closed .side { display: none; }
  .main { grid-area: 2 / 1; }
  [data-view="session"] .top .back { display: inline-grid; }
  .slot { padding-left: 6px; } .seg button span { display: none; } .slot .pill { display: none; }
  .chat { padding: 18px 14px; } .callouts { padding: 0 12px; } .composer { padding: 8px 10px 12px; }
  .box .bar2 > span { display: none; }
  .home { padding: 28px 16px; align-content: start; } .home h1 { font-size: 24px; }
  .page { padding: 20px 16px 40px; } .ph h1 { font-size: 24px; }
  /* a head's tour button (tour.js, tourButton) is an icon, so it never takes a row of its own: beside other controls
     a 32 px square, a button's height, and alone in its .ph-act 36 px; alone in a .ph-act that follows the title, it shares
     the title's row. Its words stay in the page as its name, drawn at no size; its title says what it does */
  .ph:has(> :is(div:first-child:not(.mark), .mark + div) + .ph-act > [data-tour-start]:only-child) { flex-wrap: nowrap; align-items: flex-start; }
  .page .ph .btn[data-tour-start] { width: 32px; padding: 0; justify-content: center; font-size: 0; gap: 0; flex: none; }
  .page .ph-act > .btn[data-tour-start]:only-child { width: 36px; height: 36px; }
  .stats { grid-template-columns: 1fr 1fr; } .stats:not(.three) .stat:nth-child(3) { border-left: 0; }
  .stats:not(.three) .stat:nth-child(n+3) { border-top: 1px solid var(--line); } .stats.three .stat { padding: 12px; }
  .tr, .cal .tr, .road .tr { grid-template-columns: 1fr; gap: 8px; } .tr .r { text-align: left; justify-items: start; }
  .road .tr .r, .users .tr .r { display: flex; flex-wrap: wrap; align-items: center; }  /* a request's priority and status on one line, and an account's state, last sign-in and Edit */
  .users .tr .r .acts { margin-left: auto; }  /* Edit at the row's right end */
  .road .tr.shut p { -webkit-line-clamp: 2; }  /* a phone's line holds few words: two keep the ask readable */
  .release { grid-template-columns: 1fr; gap: 12px; padding: 18px 0 20px; } .release .when { position: static; }
  .release li { grid-template-columns: 84px minmax(0, 1fr); gap: 6px 10px; } .release li .tag { grid-column: 2; justify-self: start; }
  .acc { grid-template-columns: 1fr; }
  .phone-tabs { grid-row: 3; display: flex; justify-content: space-around; background: var(--side); border-top: 1px solid var(--line); padding: 6px 0 calc(8px + env(safe-area-inset-bottom)); }
  .phone-tabs a { display: grid; justify-items: center; gap: 2px; font-size: 11px; letter-spacing: -0.01em; white-space: nowrap; color: var(--text3); text-decoration: none; flex: 1 1 0; min-width: 0; }
  .phone-tabs a[aria-current] { color: var(--red); font-weight: 600; }
  .phone-tabs svg.i { width: 21px; height: 21px; }
}
/* A touch screen: a control drawn under 40 px takes a finger on 40 px. Its ::after is an unseen area centred on it and
   behind what it holds, so nothing looks different and a tap inside still lands where it did. :where() keeps both
   rules under every other one: a control with a place of its own (.latest) keeps it. A control that draws its own
   ::after (a switch's knob, a picker's arrow) is left out by name, and `.tool` is the bar's button only: a session's
   tool row is a <details> of that class. A segment of a switch (.seg, a page's own -seg) keeps its box: it stands
   against its neighbours, and its strip scrolls sideways on a phone. */
@media (pointer: coarse) {
  :where(:is(.icon, .btn, .primary, button.tool, .mk, .main button, .phone-tabs a):not(.notifications-switch, .rv-sw, .tg, :is(.seg, [class*="-seg"]) > button)) { position: relative; z-index: 0; }
  :where(:is(.icon, .btn, .primary, button.tool, .mk, .main button, .phone-tabs a):not(.notifications-switch, .rv-sw, .tg, :is(.seg, [class*="-seg"]) > button))::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: max(100%, 40px); height: max(100%, 40px); transform: translate(-50%, -50%); }
  /* the top bar's buttons stand 4 px apart: an area ends halfway to its neighbour, and the three a phone always
     shows grow toward the bar's edge instead */
  .top > :is(.icon, .tool)::after { width: calc(100% + 4px); }
  .top > :is([data-bar], [data-flip])::after { width: calc(100% + 12px); left: calc(50% - 4px); }
  .top > [data-signout]::after { width: calc(100% + 12px); left: calc(50% + 4px); }
}