/* ======================================================================
   Mint OS — the component layer of the 2026-10-25 redesign ("Plain label",
   DESIGN.md). Loaded last on every page (lib/ui.js page()), after style.css,
   os.css, mint-ai.css, a page's own files and mint-os.css, so the frame and
   the shared components read the same on every page while the older rules
   underneath are retired page by page (stage 2).

   Rules of the layer:
   - colour only from the tokens in style.css; no glow, gradient or glass;
   - 16 px body, 13 px floor (tags, table heads), sentence case everywhere --
     no tracked capitals;
   - every control at least 40 px tall with a fine pointer, 44 px on touch;
   - one focus ring for everything: 2 px of --focus, 2 px off the edge;
   - state is a word plus a shape; colour only repeats it.
   ====================================================================== */

/* ---------------------------------------------------------------- base --- */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--bg); color: var(--body); font: 400 var(--fs-md)/1.5 var(--ui); font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { font-family: var(--ui); color: var(--ink); letter-spacing: 0; text-wrap: balance; }
h1 { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
h3 { font-size: var(--fs-md); font-weight: 700; }
p { text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
/* Links inside sentences are underlined: colour alone does not mark them (WCAG 1.4.1). */
p a, li a, dd a, .alert a, .empty a, .ds-summary a, .sub a, .hint a, .lead a, .row .rl a, .kv td a { text-decoration: underline; }
.mono, code, kbd, samp, pre { font-family: var(--mono); }
code { font-size: .9em; background: var(--code-bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; color: var(--code-ink); }
::selection { background: var(--accent-soft); color: var(--ink); }
:root { accent-color: var(--accent); caret-color: var(--accent); scrollbar-color: var(--line-strong) transparent; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.sr, .cc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
.bad-t { color: var(--bad); font-weight: 600; }

/* One focus ring, everywhere. */
:focus-visible, html.cc-page :focus-visible, .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: none; border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { box-shadow: none; }
main:focus { outline: none; }

/* Skip to the content: the first stop on every framed page. */
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--radius); background: var(--panel); color: var(--ink); border: 2px solid var(--focus); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 8px; }

/* ------------------------------------------------------------ top bar --- */

.topbar { height: var(--topbar-h); gap: 16px; padding: 0 16px 0 20px; background: var(--panel); border-bottom: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.topbar::after, .cc-page .topbar::after { display: none; }
.topbar > .brand { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin-left: -4px; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.topbar > .brand:hover { text-decoration: none; }

/* The logo: MINT, as text. */
.wordmark { display: inline-flex; flex-direction: column; gap: 4px; line-height: 1; color: var(--ink); }
.wordmark .wm-mint { font: 800 20px/1 var(--ui); letter-spacing: .16em; margin-right: -.16em; color: var(--ink); }
.wordmark .wm-sub { font: 600 var(--fs-sm)/1.2 var(--ui); color: var(--muted); letter-spacing: 0; }
.wordmark.full .wm-mint { font-size: 32px; }
@media (max-width: 900px) { .topbar > .brand .wordmark, .topbar > .brand .brand-text { display: inline-flex; } }

.tb-where { font: 400 var(--fs-sm)/1.2 var(--ui); color: var(--muted); border-left: 1px solid var(--line); padding-left: 16px; height: 28px; gap: 8px; }
.tb-where b { color: var(--ink); font-weight: 600; }
.tb-where .sep { color: var(--muted); }
/* Framed pages name themselves in their own head (crumbs + title); the bar does not repeat it. */
:root.framed .tb-where { display: none; }

.top-right { gap: 8px; }
.sys-chip { min-height: 36px; padding: 0 12px; gap: 8px; border-radius: 999px; font: 500 var(--fs-sm)/1 var(--ui); letter-spacing: 0; text-transform: none; color: var(--body); background: var(--panel); border: 1px solid var(--line); }
.sys-chip, .sys-chip:hover { border-color: var(--line); }
.sys-chip:hover { background: var(--panel-2); text-decoration: none; color: var(--ink); }
.sys-chip.warn { color: var(--warn-ink); background: var(--warn-tint); border-color: var(--warn-line); }
.sys-chip.bad { color: var(--bad-ink); background: var(--bad-tint); border-color: var(--bad-line); }
.dot { width: 8px; height: 8px; box-shadow: none; background: var(--ok); }
.dot.warn { background: var(--warn); box-shadow: none; } .dot.bad { background: var(--bad); box-shadow: none; } .dot.off { background: var(--off); }
.tb-need { min-height: 36px; padding: 0 12px; gap: 8px; font: 600 var(--fs-sm)/1 var(--ui); letter-spacing: 0; text-transform: none; color: var(--warn-ink); background: var(--warn-tint); border: 1px solid var(--warn-line); }
.tb-need .dot { background: var(--warn); }

.avatar-btn { min-height: 44px; padding: 0 10px 0 6px; border-radius: var(--radius); border: 1px solid transparent; }
.avatar-btn:hover, .avatar-btn[aria-expanded="true"] { background: var(--panel-2); border-color: var(--line); }
.avatar { width: 32px; height: 32px; background: var(--accent-soft); border: 0; color: var(--accent); font: 700 var(--fs-sm) var(--ui); }
.avatar-btn .who b { font: 600 var(--fs-sm)/1.2 var(--ui); color: var(--ink); }
.avatar-btn .who small { font-size: var(--fs-xs); color: var(--muted); }
.me-menu { width: 288px; padding: 6px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-pop); }
.me-menu .mh b { font: 700 var(--fs-md) var(--ui); }
.me-menu .mh small { font-size: var(--fs-sm); }
.me-menu a, .me-menu button.mi { min-height: 44px; padding: 0 12px; border-radius: 6px; font: 500 var(--fs-md) var(--ui); color: var(--ink); }
.me-menu .ico { width: 18px; height: 18px; }
.me-menu .lbl { font: 600 var(--fs-sm) var(--ui); letter-spacing: 0; text-transform: none; color: var(--muted); padding: 12px 12px 6px; }
.theme-seg { padding: 3px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel-2); }
.theme-seg button, .theme-seg .seg-opt { min-height: 36px; padding: 0 12px; border-radius: 6px; font: 500 var(--fs-sm) var(--ui); color: var(--muted); }
.theme-seg button[aria-checked="true"], .theme-seg .seg-opt:has(input:checked) { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-strong); }
.nav-toggle { width: 44px; height: 44px; border-radius: var(--radius); color: var(--ink); }
.nav-toggle:hover { background: var(--panel-2); }

/* ------------------------------------------------------------ sidebar --- */

.sidebar { background: var(--panel-2); border-right: 1px solid var(--line); }
.side-scroll { padding: 12px 12px 8px; scrollbar-width: thin; }
.side-id { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 6px 8px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.side-id-mark { width: 36px; height: 36px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.side-id-mark::after { display: none; }
.side-id-mark .ico { width: 18px; height: 18px; }
.side-id b { font: 700 var(--fs-sm)/1.3 var(--ui); color: var(--ink); }
.side-id .facts { font: 400 var(--fs-xs)/1.35 var(--ui); color: var(--muted); }
.side-id .facts span { font-family: var(--ui); }
.side-label { min-height: 36px; padding: 12px 8px 4px; font: 600 var(--fs-xs)/1.2 var(--ui); letter-spacing: 0; text-transform: none; color: var(--muted); border-radius: 6px; }
.side-label::after { display: none; }
.side-label:hover { color: var(--ink); }
.side-item { min-height: 40px; padding: 0 10px; gap: 12px; margin: 1px 0; border: 0; border-radius: var(--radius); font: 500 var(--fs-md)/1.2 var(--ui); color: var(--body); grid-template-columns: 20px minmax(0, 1fr) auto; }
.side-item .ico { width: 20px; height: 20px; color: var(--muted); }
.side-item:hover { background: var(--panel-3); color: var(--ink); text-decoration: none; }
/* The current page: inverted, the boldest thing in the menu (black on white, white on black). */
.side-item.on, .side-item.on:hover { background: var(--accent); color: var(--on-accent); font-weight: 700; box-shadow: none; }
.side-item.on::before { display: none; }
.side-item.on .ico { color: var(--on-accent); }
.badge { min-width: 22px; justify-content: center; padding: 0 7px; line-height: 22px; border-radius: 999px; font: 600 var(--fs-xs)/22px var(--ui); color: var(--muted); background: var(--panel-3); border: 0; }
.badge.ok { color: var(--ok); background: var(--ok-tint); }
.badge.warn { color: var(--warn-ink); background: var(--warn-tint); }
.badge.bad { color: var(--bad-ink); background: var(--bad-tint); }
:root[data-theme="dark"] .badge.warn, :root[data-theme="dark"] .badge.bad { color: var(--ink); }
.side-foot { padding: 8px 12px 12px; border-top: 1px solid var(--line); }
.side-collapse { min-height: 40px; padding: 0 10px; gap: 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); font: 500 var(--fs-sm) var(--ui); color: var(--body); }
.side-collapse:hover { color: var(--ink); border-color: var(--line-strong); }
/* An off-canvas sidebar is not in the tab order: focus never lands on something you cannot see. */
@media (max-width: 900px) {
  .sidebar { visibility: hidden; transition: transform var(--fast) var(--ease), visibility 0s linear var(--fast); background: var(--panel-2); box-shadow: var(--shadow-pop); }
  :root.nav-open .sidebar { visibility: visible; transition: transform var(--fast) var(--ease); }
  .side-item { min-height: 44px; }
}
:root.cc-page .sidebar { visibility: hidden; transition: transform .2s var(--ease), visibility 0s linear .2s; background: var(--panel-2); box-shadow: var(--shadow-pop); }
:root.cc-page.os-drawer .sidebar { visibility: visible; transition: transform .2s var(--ease); }
:root.cc-page .sidebar .side-label { font: 600 var(--fs-xs)/1.2 var(--ui); letter-spacing: 0; color: var(--muted); padding: 12px 8px 4px; }
:root.cc-page .sidebar .side-item { font: 500 var(--fs-md)/1.2 var(--ui); }

/* ---------------------------------------------------- content and head --- */

.content { padding: 24px 32px 48px; }
.content > * { margin-bottom: var(--gap); }
.page-head { align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.crumbs { font: 400 var(--fs-sm)/1.4 var(--ui); letter-spacing: 0; color: var(--muted); margin-bottom: 4px; gap: 8px; }
.crumbs a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); }
.crumbs a:hover { color: var(--accent); }
.page-head h1 { font-size: var(--fs-2xl); }
.page-head .sub { margin-top: 6px; font-size: var(--fs-md); color: var(--muted); max-width: 70ch; }
.page-actions { gap: 8px; }
@media (max-width: 900px) {
  .content { padding: 16px 16px 40px; }
  .page-head { margin-bottom: 16px; }
  h1, .page-head h1 { font-size: 24px; }
}

/* --------------------------------------------------------------- cards --- */

.card, .ds-card, .statbox, .group { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; }
.card, .ds-card { padding: 20px 24px; margin-bottom: var(--gap); }
.ds-card.flush { padding: 0; }
.card > .card-head::before, .hud::before, .hud::after { display: none; }
.card-head { margin-bottom: 12px; min-height: 28px; }
.card-head h2, .ds-card-title { font: 700 var(--fs-lg)/1.3 var(--ui); letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; }
.ds-card-title { margin-bottom: 12px; }
.card-head h2 .ico { color: var(--muted); width: 18px; height: 18px; }
@media (max-width: 900px) { .card, .ds-card { padding: 16px; } .ds-card.flush { padding: 0; } }

.ds-summary { margin: -8px 0 16px; color: var(--muted); font-size: var(--fs-md); }

/* A definition list for facts: term over its explanation. */
.ds-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px 24px; margin: 0; }
.ds-dl dt { font-weight: 700; color: var(--ink); }
.ds-dl dd { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }

/* ------------------------------------------------------------- buttons --- */

.btn { min-height: 40px; padding: 0 16px; gap: 8px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  font: 600 var(--fs-sm)/1.2 var(--ui); letter-spacing: 0; box-shadow: none; filter: none; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.btn .ico { width: 16px; height: 16px; }
.btn:hover { background: var(--panel-2); border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
.btn:active:not([disabled]) { transform: none; background: var(--panel-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: none; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); filter: none; }
.btn.danger { background: var(--panel); color: var(--bad); border-color: var(--bad-line); }
.btn.danger:hover { background: var(--bad-tint); border-color: var(--bad); color: var(--bad-ink); }
.btn.ai { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); box-shadow: none; }
.btn.small { min-height: 36px; padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--radius); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-row { gap: 8px; }
@media (pointer: coarse) { .btn, .btn.small { min-height: 44px; } }
@media (max-width: 900px) { .btn { padding: 0 16px; } .btn.small { padding: 0 14px; } }

/* --------------------------------------------------------------- forms --- */

label { font: 600 var(--fs-md)/1.4 var(--ui); color: var(--ink); margin-bottom: 20px; }
label .hint, .hint { font: 400 var(--fs-sm)/1.45 var(--ui); color: var(--muted); margin-top: 4px; }
input:not([type=checkbox], [type=radio], [type=file], [type=submit], [type=button], [type=reset], [type=image], [type=range], [type=color], [type=hidden]),
select, textarea {
  min-height: 44px; padding: 10px 12px; margin-top: 6px; border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--input-bg); color: var(--ink); font: 400 var(--fs-md)/1.4 var(--ui);
}
select { padding-right: 36px; }
textarea { line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
label.check { gap: 12px; align-items: flex-start; font-weight: 600; min-height: 44px; }
label.check .hint { display: block; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); }

/* the switch (MINT AI Settings): a real checkbox under a 44 x 24 track */
.sw { gap: 10px; font: 600 var(--fs-sm) var(--ui); color: var(--ink); min-height: 44px; }
.sw .tr { width: 44px; height: 24px; background: var(--panel-3); border: 1px solid var(--line-strong); box-sizing: border-box; }
.sw .tr::after { left: 3px; top: 3px; width: 16px; height: 16px; background: var(--line-strong); box-shadow: none; }
.sw input:checked + .tr { background: var(--accent); border-color: var(--accent); }
.sw input:checked + .tr::after { transform: translateX(20px); background: var(--on-accent); }
.sw input:focus-visible + .tr { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw.big .tr { width: 52px; height: 28px; } .sw.big .tr::after { width: 20px; height: 20px; } .sw.big input:checked + .tr::after { transform: translateX(24px); }

/* --------------------------------------------------------------- tables --- */

.ds-table, .rows { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.ds-table thead th, .rows th { position: static; text-align: left; padding: 10px 16px; font: 600 var(--fs-xs)/1.3 var(--ui); letter-spacing: 0; text-transform: none; color: var(--muted); background: var(--panel-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ds-table thead th:first-child { border-top-left-radius: var(--r); }
.ds-table thead th:last-child { border-top-right-radius: var(--r); }
.ds-table tbody th, .ds-table td, .rows td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; font-weight: 400; color: var(--body); }
.ds-table tbody tr:last-child > * { border-bottom: 0; }
.ds-table tbody tr:hover > *, .rows tbody tr:hover td { background: var(--row-hover); }
.ds-table tbody tr:last-child > :first-child { border-bottom-left-radius: var(--r); }
.ds-table tbody tr:last-child > :last-child { border-bottom-right-radius: var(--r); }
.ds-table .num { text-align: right; }
.ds-table td > span, .ds-table th > span, .ds-table th > a { display: block; }
.ds-table .sub { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-sm); font-weight: 400; }
.ds-table .nm { font-weight: 700; color: var(--ink); text-decoration: none; }
.ds-table .nm:hover { color: var(--accent); text-decoration: underline; }
.ds-table .acts { width: 1%; white-space: nowrap; }
.acts-in { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.acts-in .btn-row { margin: 0; flex-wrap: nowrap; }
.ds-table .ch { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--ink); text-decoration: none; }
.ds-table .ch .ico { margin-top: 3px; color: var(--muted); }
.ds-table .ch:hover > span { text-decoration: underline; }
.ds-table .ch.none { color: var(--warn-ink); }
.ds-table .ch.none .ico { color: var(--warn); }

/* Phones: each row becomes a block, every value under its column name. */
@media (max-width: 760px) {
  .ds-table, .ds-table tbody, .ds-table tr, .ds-table td, .ds-table tbody th { display: block; width: 100%; }
  .ds-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ds-table tr { padding: 16px; border-bottom: 1px solid var(--line); }
  .ds-table tbody tr:last-child { border-bottom: 0; }
  .ds-table tbody th, .ds-table td { padding: 0; border: 0; }
  .ds-table tbody tr:hover > * { background: none; }
  .ds-table td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; margin-top: 10px; }
  .ds-table td::before { content: attr(data-h); color: var(--muted); font-size: var(--fs-sm); padding-top: 2px; }
  .ds-table td.num { text-align: left; }
  .ds-table td.acts { width: 100%; display: block; margin-top: 14px; }
  .ds-table td.acts::before { display: none; }
  .acts-in { justify-content: flex-start; flex-wrap: wrap; }
  .ds-table tbody th .nm { font-size: var(--fs-lg); }
}

.kv td { font-size: var(--fs-md); border-bottom: 1px solid var(--line); padding: 10px 0; }
.kv td:first-child { font-size: var(--fs-md); color: var(--muted); }

/* ------------------------------------------- state, pills, badges, tags --- */

.state { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.state svg { width: 12px; height: 12px; flex: none; }
.state.ok { color: var(--ok); } .state.bad { color: var(--bad); } .state.warn { color: var(--warn); } .state.off { color: var(--muted); }
.pill { font: 600 var(--fs-xs)/1.4 var(--ui); letter-spacing: 0; text-transform: none; padding: 2px 10px; border-radius: 999px; gap: 6px; border: 1px solid var(--line); color: var(--ok); background: var(--ok-tint); }
.pill::before { width: 8px; height: 8px; box-shadow: none; }
.pill.ok { color: var(--ok); background: var(--ok-tint); border-color: var(--ok-line); }
.pill.bad { color: var(--bad-ink); background: var(--bad-tint); border-color: var(--bad-line); }
.pill.bad::before { border-radius: 1px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pill.warn { color: var(--warn-ink); background: var(--warn-tint); border-color: var(--warn-line); }
.pill.warn::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); border: 1.5px solid currentColor; }
.pill.neutral { color: var(--muted); background: var(--panel); border-color: var(--line); }
.pill.neutral::before { background: none; border: 1.5px solid currentColor; }
:root[data-theme="dark"] .pill.bad, :root[data-theme="dark"] .pill.warn { color: var(--ink); }
.pill.brand, .pill.solid, .pill.ai { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.pill.ai::before { background: var(--on-accent); }
.tag, .tag-s, .scope { font: 500 var(--fs-xs)/1.4 var(--ui); letter-spacing: 0; padding: 1px 8px; border-radius: 999px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); }
.tag-s { height: auto; }
.tag-s.ok { color: var(--ok); background: var(--ok-tint); } .tag-s.warn { color: var(--warn-ink); background: var(--warn-tint); } .tag-s.bad { color: var(--bad-ink); background: var(--bad-tint); }

/* -------------------------------------------------------------- alerts --- */

.alert { padding: 12px 16px; gap: 12px; border-radius: var(--r); font-size: var(--fs-md); line-height: 1.5; color: var(--ink); border: 1px solid; }
.alert .ico { width: 20px; height: 20px; margin-top: 1px; }
.alert a { color: inherit; font-weight: 600; }
.alert.good { background: var(--ok-tint); border-color: var(--ok-line); } .alert.good .ico { color: var(--ok); }
.alert.bad { background: var(--bad-tint); border-color: var(--bad-line); } .alert.bad .ico { color: var(--bad); }
.alert.warn { background: var(--warn-tint); border-color: var(--warn-line); } .alert.warn .ico { color: var(--warn); }
.alert.info { background: var(--info-tint); border-color: var(--info-line); } .alert.info .ico { color: var(--info); }

/* --------------------------------------------------------- empty state --- */

.empty { text-align: left; padding: 8px 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.empty-ico { grid-row: span 2; width: 48px; height: 48px; margin: 0; border-radius: var(--r); background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.empty-title { font: 700 var(--fs-lg)/1.3 var(--ui); margin: 2px 0 0; }
.empty .muted { margin: 0; max-width: 60ch; }

/* ---------------------------------------------------------------- menu --- */
/* A <details> menu: works without script, by keyboard (Enter / Space) and by touch. */
.ds-menu { position: relative; }
.ds-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font: 600 var(--fs-sm)/1 var(--ui); cursor: pointer; user-select: none; }
.ds-menu > summary::-webkit-details-marker { display: none; }
.ds-menu > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.ds-menu[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.ds-menu > summary:hover { background: var(--panel-2); }
@media (pointer: coarse) { .ds-menu > summary { min-height: 44px; } }
.ds-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 25; min-width: 200px; padding: 6px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-pop); }
.ds-menu-pop a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 6px; color: var(--ink); font-weight: 500; text-decoration: none; }
.ds-menu-pop a:hover { background: var(--panel-2); }
.ds-menu-pop a .ico { color: var(--muted); }
@media (max-width: 760px) { .ds-menu-pop { right: auto; left: 0; } }

/* -------------------------------------------------------------- toasts --- */

:root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
  --md-glass: var(--panel); --md-glass-2: var(--panel); --md-line: var(--line); --md-line-2: var(--line-strong);
  --md-shadow: var(--shadow-pop); --md-ink: var(--ink); --md-body: var(--body); --md-muted: var(--muted);
  --md-mint: var(--accent); --md-mint-soft: var(--accent-soft); --md-amber: var(--warn); --md-amber-ink: var(--warn-ink);
  --md-amber-soft: var(--warn-tint); --md-amber-line: var(--warn-line); --md-violet: var(--violet-ink);
}
.md-toast { padding: 10px 12px 10px 16px; border-radius: var(--r); font: 500 var(--fs-md)/1.4 var(--ui); backdrop-filter: none; -webkit-backdrop-filter: none; }
.md-toast button, .md-toast a { min-height: 36px; padding: 0 12px; font: 600 var(--fs-sm) var(--ui); border-radius: var(--radius); }
.md-toast.ask #md-t-act { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.flash-slot .alert { margin-bottom: var(--gap); }

/* ------------------------------------- MINT AI's dock on the other pages --- */

.dock-band { background: var(--bg); border-top: 1px solid var(--line); }
.md-dock { backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 999px; }
.md-name { font: 700 var(--fs-xs)/1 var(--ui); letter-spacing: 0; }
.md-state { font: 500 var(--fs-sm)/1.2 var(--ui); }
.md-btn { width: 44px; height: 44px; }
.md-mic { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.md-mic.rec { box-shadow: 0 0 0 4px var(--accent-soft); }
.md-exp { width: 44px; height: 44px; }
.md-bubble { border-radius: var(--r); backdrop-filter: none; -webkit-backdrop-filter: none; }
.md-bubble .b-top { font: 700 var(--fs-xs)/1 var(--ui); letter-spacing: 0; }
.md-bubble .b-cap { font: 400 var(--fs-md)/1.45 var(--ui); }
.md-bubble .b-you, .md-bubble .b-hint { font-size: var(--fs-sm); }

/* --------------------------------------------- MINT AI Settings layout --- */

.set-wrap { grid-template-columns: 232px minmax(0, 1fr); gap: 32px; }
.set-nav { gap: 2px; }
.set-nav a { min-height: 44px; height: auto; padding: 0 12px; gap: 12px; border-radius: var(--radius); font: 500 var(--fs-md)/1.2 var(--ui); color: var(--body); }
.set-nav a .ico { width: 18px; height: 18px; color: var(--muted); }
.set-nav a:hover { background: var(--panel-2); color: var(--ink); }
.set-nav a.on { background: var(--panel); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.set-nav a.on .ico { color: var(--accent); }
.set-nav a .st { font: 500 var(--fs-xs) var(--ui); color: var(--muted); }
.set-nav a .st.off { color: var(--bad); } .set-nav a .st.warn { color: var(--warn); }
.set-sec > h2 { font: 700 var(--fs-xl)/1.25 var(--ui); margin: 0 0 6px; }
.set-sec > p.lead { font-size: var(--fs-md); color: var(--muted); max-width: 70ch; margin: 0 0 20px; }
.group { margin-bottom: 20px; overflow: visible; }
.group > .gh { padding: 14px 20px; gap: 10px; font: 700 var(--fs-md)/1.3 var(--ui); letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.group > .gh .ico { color: var(--muted); width: 18px; height: 18px; }
.group > .gh .aside { font: 400 var(--fs-sm) var(--ui); }
.row { padding: 18px 20px; gap: 10px 32px; grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); }
.row .rl b { font: 600 var(--fs-md)/1.35 var(--ui); color: var(--ink); }
.row .rl p { font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); margin-top: 4px; max-width: 64ch; }
.row .rc select, .row .rc input[type=text], .row .rc input[type=password] { margin: 0; }
.row input[type=number] { font-family: var(--mono); min-height: 44px; }
.lr { padding: 14px 20px; }
.lr b { font: 600 var(--fs-md) var(--ui); } .lr .d { font-size: var(--fs-sm); color: var(--muted); }
.muted-num { color: var(--muted); }
/* "More: …" — the rarely used rows of a group, folded (lib/views-settings.js more()).
   A real <details>: keyboard and touch work without script. */
.set-more { border-top: 1px solid var(--line); }
.card > .set-more, .ds-card > .set-more { margin: 12px -16px -16px; }
.set-more > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; cursor: pointer;
  font: 600 var(--fs-md)/1.3 var(--ui); color: var(--ink); }
.set-more > summary::-webkit-details-marker { display: none; }
.set-more > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.set-more[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.set-more > summary:hover { background: var(--panel-2); text-decoration: underline; text-underline-offset: 3px; }
.set-more > summary:focus-visible { outline-offset: -2px; }
.set-more > .set-more-body > .row:first-child, .set-more > .set-more-body > .lr:first-child { border-top: 1px solid var(--line); }
.set-more > .set-more-body > .ds-dl { padding: 4px 20px 20px; }
@media (max-width: 900px) { .set-more > summary { padding: 0 16px; } }
@media (max-width: 900px) {
  .set-wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .set-nav { gap: 6px; padding: 4px 0 8px; background: var(--bg); }
  .set-nav a { min-height: 44px; border: 1px solid var(--line); background: var(--panel); white-space: nowrap; }
  .row { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .group > .gh { padding: 14px 16px; }
}

/* ------------------------------------------------------------- motion --- */

@media (prefers-reduced-motion: reduce) {
  .sidebar, :root.cc-page .sidebar { transition: none !important; }
}

/* ------------------------------------------------------ fixes, round 1 --- */
.ds-table td > span.state { display: inline-flex; }
.side-item > span:not(.badge) { white-space: normal; line-height: 1.2; padding: 4px 0; }
.top-right .sys-chip .long { display: inline; } .top-right .sys-chip .short { display: none; }
@media (max-width: 900px) {
  .top-right .sys-chip .long { display: none; }
  .top-right .sys-chip .short, .top-right .sys-chip { display: inline-flex; }
}
@media (max-width: 760px) {
  .ds-table td > * { grid-column: 2; }
}
@media (max-width: 1560px) { :root:not([data-side="collapsed"]) { --side-w: 240px; } }

/* ===================================================== Command Center ===
   The core (canvas, halo, orbit, its colours) is MINT AI's and stays as the
   person chose it. Only the chrome round it changes: opaque quiet panels,
   16 px text, sentence case, 44 px controls, the rail always visible. The
   desktop app's render mode (html.cc-desk) keeps its own measured layout. */

:root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
  --cc-glass: var(--panel); --cc-glass-2: var(--panel); --cc-glass-line: var(--line); --cc-glass-line-2: var(--line-strong);
  --cc-shadow: var(--shadow-pop); --cc-bg-deep: var(--bg); --cc-mint-tint: var(--accent-soft); --cc-warn-fill: var(--warn);
  --cc-mic-glow: transparent; --me-bubble: var(--accent-soft); --me-ink: var(--ink); --drawer-bg: var(--panel); --cc-dot-idle: var(--off);
  --modal-scrim: var(--scrim); --modal-shadow: var(--shadow-pop); --cc-radius: 12px;
}
html.cc-page body { font: 400 var(--fs-md)/1.5 var(--ui); }
html.cc-page .cc-bg { background: var(--bg); }

/* the top bar floats over the core: words only, no ground */
html.cc-page .tb-where { border-left-color: var(--line); }
.cc-sys-chip { font: 500 var(--fs-sm)/1.2 var(--ui); color: var(--body); gap: 8px; }
.cc-sys-chip.warn { color: var(--warn); } .cc-sys-chip.bad { color: var(--bad); }
.cc-needpill { min-height: 36px; padding: 0 14px; font: 600 var(--fs-sm)/1 var(--ui); background: var(--warn); color: var(--on-brand); }
:root[data-theme="dark"] .cc-needpill { color: #1F1500; }
.cc-clock b { font: 600 var(--fs-md)/1.1 var(--mono); color: var(--ink); }
.cc-clock span { font-size: var(--fs-xs); color: var(--muted); }
.cc-ibtn { min-width: 40px; min-height: 40px; border-radius: var(--radius); }

/* the rail: a quiet panel, always there; its names show on hover and on focus */
html.cc-page:not(.cc-desk) .cc-rail { left: 12px; gap: 2px; padding: 6px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-md); backdrop-filter: none; }
html.cc-page:not(.cc-desk) .cc-rail:hover, html.cc-page:not(.cc-desk) .cc-rail:focus-within { background: var(--panel); border-color: var(--line); backdrop-filter: none; }
.cc-rail button { width: 44px; height: 44px; border-radius: var(--radius); color: var(--muted); opacity: 1; }
.cc-rail button .cc-i { width: 20px; height: 20px; stroke-width: 1.8; }
.cc-rail button:hover { background: var(--panel-2); color: var(--ink); }
.cc-rail button[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.cc-rail .sep { background: var(--line); opacity: 1; margin: 4px 6px; }
/* the Settings link sits in the rail like its buttons */
.cc-rail a.cc-set-btn { position: relative; width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center; color: var(--muted); text-decoration: none; }
.cc-rail a.cc-set-btn .cc-i { width: 20px; height: 20px; stroke-width: 1.8; }
.cc-rail a.cc-set-btn:hover { background: var(--panel-2); color: var(--ink); }
.cc-rail a.cc-set-btn:hover .tip, .cc-rail a.cc-set-btn:focus-visible .tip { opacity: 1; }
.cc-rail .tip { left: 54px; padding: 6px 10px; border-radius: var(--radius); font: 600 var(--fs-sm)/1.2 var(--ui); background: var(--ink); color: var(--bg); border: 0; box-shadow: var(--shadow-md); }
.cc-badge-n { min-width: 18px; height: 18px; font: 700 12px/18px var(--ui); top: 2px; right: 2px; background: var(--accent); color: var(--on-accent); }
.cc-badge-n.warn { background: var(--warn); color: var(--on-brand); }
:root[data-theme="dark"] .cc-badge-n.warn { color: #1F1500; }

/* the caption under the core */
.cc-cap-state { font: 600 var(--fs-sm)/1.2 var(--ui); letter-spacing: 0; text-transform: none; color: var(--muted); }
.cc-cap-state .d { width: 8px; height: 8px; }
.cc-cap-line { font: 400 22px/1.35 var(--ui); letter-spacing: 0; color: var(--ink); max-height: 64px; }
.cc-cap-more { font: 600 var(--fs-sm) var(--ui); color: var(--muted); min-height: 36px; padding: 0 12px; }

/* The composer (2026-10-25, the user: "like ChatGPT's", from its screenshot): one pill-shaped bar, 56 px,
   a fill one step off the page and a hairline edge. In it, on one line: "+" (files, photos, a session),
   the message (it grows upward when it wraps or on Shift+Enter; the bar becomes a rounded rectangle and
   the buttons stay at the bottom), the voice chip, and one round button at the end that is the live
   conversation (a waveform) while the field is empty, send (an arrow) once something is typed or attached,
   and stop (a square) while MINT AI works. Attached files sit above the text, inside the bar. Every control
   is 44 px, named, with a tooltip; state is a word and a shape, never colour alone. */
.cc-dock { gap: 6px; }
html.cc-page { --cc-field: var(--panel-2); }
:root[data-theme="dark"].cc-page { --cc-field: var(--panel-3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).cc-page { --cc-field: var(--panel-3); } }
html.cc-page:not(.cc-desk) .cc-composer { width: min(768px, 100%); min-height: 56px; padding: 5px; gap: 4px; border-radius: 28px; background: var(--cc-field); border: 1px solid var(--line);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.cc-page:not(.cc-desk) .cc-composer:focus-within { border-color: var(--line-strong); box-shadow: 0 0 0 1px var(--line-strong); }
.cc-c-row { display: flex; align-items: flex-end; gap: 2px; min-width: 0; }
/* more than one line: the text across the whole bar, the controls in a row under it */
.cc-composer.multi .cc-c-row { flex-wrap: wrap; }
.cc-composer.multi .cc-c-row > textarea { order: -1; flex: 1 1 100%; padding-left: 10px; padding-right: 10px; }
.cc-composer.multi .cc-c-row > .cc-vm { margin-left: auto; }
.cc-composer.multi .cc-c-row > .cc-target.set { order: -2; }
html.cc-page .cc-composer textarea { padding: 10px 6px; min-height: 44px; height: 44px; max-height: 168px; line-height: 24px; }
html.cc-page .cc-composer textarea::placeholder { color: var(--muted); opacity: 1; }
html.cc-page .cc-composer textarea::selection { background: var(--ink); color: var(--bg); }
html.cc-page .cc-composer textarea { caret-color: var(--ink); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.cc-dock.calm:not(:hover):not(:focus-within) .cc-composer, .cc-dock.calm:not(:hover):not(:focus-within) .cc-hint { opacity: 1; }
@media (hover: none) { .cc-dock.calm:hover:not(:focus-within) .cc-composer, .cc-dock.calm:hover:not(:focus-within) .cc-hint { opacity: 1; } }

/* "+": a plain icon, no ring */
html.cc-page .cc-c-tool, html.cc-page .cc-c-round { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; padding: 0; margin: 0; border: 0; box-shadow: none; cursor: pointer;
  transition: background .16s cubic-bezier(.2,0,0,1), color .16s; }
html.cc-page .cc-c-tool[hidden], html.cc-page .cc-c-round[hidden] { display: none; }
html.cc-page .cc-c-tool { background: transparent; color: var(--ink); }
html.cc-page .cc-c-tool .cc-i { width: 22px; height: 22px; stroke-width: 2; }
html.cc-page .cc-c-tool:hover, html.cc-page .cc-c-tool[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); }
/* the round button: a filled ink disc (black on white, white on black) -- the waveform, the arrow or the square */
html.cc-page .cc-c-round { background: var(--ink); color: var(--bg); }
html.cc-page .cc-c-round .cc-i { width: 20px; height: 20px; stroke-width: 2.4; }
html.cc-page .cc-c-round:hover { background: var(--accent-hover); transform: none; }
html.cc-page .cc-c-stop .cc-i { width: 14px; height: 14px; fill: currentColor; stroke-width: 0; }
html.cc-page .cc-c-send:disabled { opacity: 1; cursor: progress; }
html.cc-page .cc-c-mic::after { content: none; }
/* In a call (the desktop app's hold-to-talk): red, with a white glyph and a pulse. */
html.cc-page .cc-c-mic.live { background: #C8322B; color: #fff; animation: ds-mic-live 1.4s ease-in-out infinite; }
html.cc-page .cc-c-mic.live:hover { background: #C8322B; filter: brightness(1.08); }
@keyframes ds-mic-live { 50% { box-shadow: 0 0 0 6px rgba(200, 50, 43, .28); } }
/* Voice off (switched off, no token, not in the role, or a browser that can't): the struck-through waveform on
   a dashed ring, still legible (>= 4.5:1); hovering names why, a click says it in words with the link. */
html.cc-page .cc-c-round.off { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line-strong); cursor: help; animation: none; }
html.cc-page .cc-c-round.off { border: 1.5px dashed var(--line-strong); box-shadow: none; }
html.cc-page .cc-c-round.off:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
html.cc-page .cc-c-tool:focus-visible, html.cc-page .cc-c-round:focus-visible, html.cc-page .cc-c-pill:focus-visible, html.cc-page .cc-target:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the voice chip: quiet text with a chevron */
html.cc-page .cc-c-pill { display: inline-flex; align-items: center; gap: 4px; height: 44px; min-height: 44px; max-width: 200px; padding: 0 10px 0 12px; border-radius: 999px; border: 0; background: transparent;
  color: var(--muted); font: 500 var(--fs-sm) var(--ui); white-space: nowrap; flex: 0 1 auto; min-width: 44px; justify-content: center; }
html.cc-page .cc-c-pill > span { overflow: hidden; text-overflow: ellipsis; }
html.cc-page .cc-c-pill .cc-i { width: 16px; height: 16px; flex: none; }
html.cc-page .cc-c-pill:hover, html.cc-page .cc-c-pill[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
/* @ a session: in the + menu (or type @); once one is chosen it shows here as a chip, a click changes it */
html.cc-page .cc-composer .cc-target { display: none; height: 36px; min-height: 36px; margin: 4px 2px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; max-width: 200px; font: 600 var(--fs-sm) var(--ui); }
html.cc-page .cc-composer .cc-target.set { display: inline-flex; color: var(--violet-ink); background: var(--violet-tint); }
html.cc-page .cc-composer .cc-target .cc-i { width: 16px; height: 16px; }
html.cc-page .cc-composer .cc-target #cc-target-label { display: inline; }
html.cc-page .cc-composer > .cc-target-menu { bottom: calc(100% + 8px); left: 0; }
/* the + menu (it shares #cc-pop with the voice menu) */
html.cc-page .cc-pop .line.ft { color: var(--muted); font-size: var(--fs-xs); }
html.cc-page .cc-pop .line a { margin-left: auto; }

/* the attached files, inside the bar above the text */
html.cc-page .cc-att { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 4px 0; max-height: 172px; overflow-y: auto; }
html.cc-page .cc-att[hidden] { display: none; }
html.cc-page .cc-chip { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: min(260px, 100%); height: 56px; box-sizing: border-box; padding: 6px 2px 6px 6px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
html.cc-page .cc-chip .th { width: 44px; height: 44px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--panel-2); color: var(--ink); overflow: hidden; }
html.cc-page .cc-chip .th .cc-i { width: 20px; height: 20px; }
html.cc-page .cc-chip .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.cc-page .cc-chip .tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
html.cc-page .cc-chip .nm { font: 600 var(--fs-sm) var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cc-page .cc-chip .st { font: 400 var(--fs-xs) var(--ui); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cc-page .cc-chip .x { width: 44px; height: 44px; flex: none; border: 0; background: transparent; color: var(--muted); border-radius: 50%; display: grid; place-items: center; padding: 0; }
html.cc-page .cc-chip .x .cc-i { width: 16px; height: 16px; stroke-width: 2.2; }
html.cc-page .cc-chip .x:hover { background: var(--panel-2); color: var(--ink); }
html.cc-page .cc-chip .x:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
html.cc-page .cc-chip.up .st, html.cc-page .cc-chip.queued .st { color: var(--ink); }
html.cc-page .cc-chip.err { border-color: var(--bad-line); background: var(--bad-tint); height: auto; min-height: 56px; }
html.cc-page .cc-chip.err .st { color: var(--bad-ink); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html.cc-page .cc-chip.err .th { background: transparent; color: var(--bad-ink); }

/* dragging files over the page: the bar says where they go */
.cc-drop { position: absolute; inset: 0; border-radius: inherit; display: none; align-items: center; justify-content: center; gap: 10px; pointer-events: none;
  background: color-mix(in srgb, var(--panel) 94%, transparent); color: var(--ink); font: 600 var(--fs-md) var(--ui); border: 2px dashed var(--ink); }
.cc-drop .cc-i { width: 22px; height: 22px; }
.cc-composer.dragging .cc-drop { display: flex; }

/* under the bar: nothing at rest; a line only to say something (a refusal, "Not sent", why voice is off, a call's keys) */
.cc-hint { font: 400 var(--fs-xs)/1.3 var(--ui); color: var(--muted); gap: 12px; min-height: 0; }
.cc-hint:empty { display: none; }
.cc-hint.err { color: var(--bad-ink); font-weight: 600; }
html.cc-page kbd { font: 500 var(--fs-xs) var(--mono); color: var(--body); border-color: var(--line-strong); }

/* a sent message's files, in the Conversation */
.cc-msg.me .cc-bubble { white-space: pre-wrap; }
.cc-sent-att { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.cc-sent-att a, .cc-sent-att li > span { display: flex; align-items: center; gap: 8px; max-width: 240px; padding: 4px 10px 4px 4px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--panel); color: var(--ink); text-decoration: none; min-height: 44px; box-sizing: border-box; }
.cc-sent-att a:hover { background: var(--panel-2); }
.cc-sent-att img, .cc-sent-att .th { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; background: var(--panel-2); display: grid; place-items: center; }
.cc-sent-att .th .cc-i { width: 18px; height: 18px; }
.cc-sent-att .tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cc-sent-att b { font: 600 var(--fs-xs) var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-sent-att .tx span { font: 400 12px var(--ui); color: var(--muted); }

/* the phone: the voice chip keeps its words short; everything stays 44 px */
@media (max-width: 720px) {
  .cc-c-pill { max-width: 96px; padding: 0 6px 0 8px; }
  .cc-chip { max-width: 100%; flex: 1 1 100%; }
  .cc-composer .cc-target { max-width: 120px; }
}
@media (prefers-reduced-motion: reduce) { .cc-c-mic.live { animation: none; } .cc-c-tool, .cc-c-round { transition: none; } }
.cc-vb-text b { font: 600 var(--fs-xs) var(--ui); letter-spacing: 0; }
.cc-vb-text span { font-size: var(--fs-md); }

/* the sessions round the core: names readable, the "hired" tag in words */
.cc-kid .nm { font: 600 var(--fs-sm)/1.2 var(--ui); letter-spacing: 0; text-shadow: 0 0 6px var(--bg), 0 0 2px var(--bg); }
.cc-kid .st { font: 400 var(--fs-xs)/1.2 var(--ui); letter-spacing: 0; color: var(--muted); }
.cc-kid .ht { font: 600 12px/1 var(--ui); letter-spacing: 0; text-transform: none; padding: 2px 6px; border-radius: 999px; color: var(--violet-ink); background: var(--violet-tint); border: 0; }
.cc-kid .badge { font: 600 var(--fs-xs)/1 var(--ui); letter-spacing: 0; padding: 6px 10px; background: var(--warn-tint); color: var(--warn-ink); border-color: var(--warn-line); }
.cc-kid .badge.done { background: var(--ok-tint); color: var(--ok); border-color: var(--ok-line); }

/* the card that needs a decision: no coloured edge bar; its state is its first line */
.cc-need { border-radius: var(--r); padding: 18px 20px 16px; background: var(--panel); border: 1px solid var(--warn-line); box-shadow: var(--shadow-pop); backdrop-filter: none; -webkit-backdrop-filter: none; }
.cc-need::before { display: none; }
.cc-need .k { font: 600 var(--fs-sm)/1.2 var(--ui); letter-spacing: 0; text-transform: none; color: var(--warn-ink); }
html.cc-page .cc-need h3 { font: 700 var(--fs-lg)/1.3 var(--ui); }
.cc-need .meta { font: 400 var(--fs-xs)/1.45 var(--mono); color: var(--muted); }
.cc-need .why { font-size: var(--fs-sm); color: var(--body); }
.cc-need .hello { font-size: var(--fs-xs); }
.cc-need .timer { font: 500 var(--fs-xs) var(--ui); color: var(--muted); }
.cc-need .pg button { width: 32px; height: 32px; }
.cc-need .acts .cc-btn { height: 40px; padding: 0 16px; font: 600 var(--fs-sm) var(--ui); border-radius: var(--radius); }

/* the shared buttons and tags of the Command Center (also its dialogs on every page) */
.cc-btn { font-family: var(--ui); border-radius: var(--radius); }
.cc-btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: none; }
.cc-btn.pri:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.cc-tag { font: 600 12px/1.3 var(--ui); letter-spacing: 0; text-transform: none; border-radius: 999px; }
.cc-sdlg, .cc-smenu, .cc-kcard, .cc-pop { border-radius: var(--r); background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
.cc-sdlg h3 { font: 700 var(--fs-lg)/1.3 var(--ui); }
.cc-sdlg p { font: 400 var(--fs-md)/1.5 var(--ui); }
.cc-smenu button { font: 500 var(--fs-md)/1.2 var(--ui); min-height: 40px; }
.cc-pop .grp { font: 600 var(--fs-xs) var(--ui); letter-spacing: 0; text-transform: none; color: var(--muted); }

/* the living canvas's widgets: plain cards */
.cv-w { border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-md); backdrop-filter: none; -webkit-backdrop-filter: none; font: 400 var(--fs-sm)/1.45 var(--ui); padding: 14px 16px; }
.cv-w.quiet { opacity: 1; padding: 12px 14px; }
.cv-t b, .cv-w.quiet .cv-t b { font: 700 var(--fs-sm)/1.3 var(--ui); color: var(--ink); }
.cv-t small, .cv-m-h, .cv-note { font-size: var(--fs-xs); color: var(--muted); }
.cv-m-l, .cv-w.quiet .cv-m-l, .cv-table th, .cv-chip, .cv-ap-k, .cv-more { font: 600 var(--fs-xs)/1.3 var(--ui); letter-spacing: 0; text-transform: none; color: var(--muted); }
.cv-ap-k { color: var(--warn-ink); }
.cv-m-v, .cv-w.quiet .cv-m-v { font: 700 22px/1.2 var(--ui); letter-spacing: 0; }
.cv-acts { opacity: 1; }
.cv-ib { min-width: 32px; height: 32px; border-radius: var(--radius); font: 600 var(--fs-xs) var(--ui); color: var(--muted); border-color: var(--line-strong); }
.cv-b { min-height: 36px; font: 600 var(--fs-sm) var(--ui); border-radius: var(--radius); }
.cv-b.pri { background: var(--accent); color: var(--on-accent); }
.cv-mode, .cc-dt-pill { font: 500 var(--fs-sm)/1 var(--ui); }

/* the story pill ("Replay the day") and the board chip read as plain buttons */
.cc-dt-pill { min-height: 40px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--body); backdrop-filter: none; }

/* sheets (the panes the rail opens) */
.cc-sheet { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--line); }
.cc-pane .sh-hd h2 { font: 700 var(--fs-xl)/1.25 var(--ui); letter-spacing: 0; text-transform: none; }
.cc-pane .sh-hd .sub { font-size: var(--fs-sm); color: var(--muted); }
html.cc-page .cc-card-h h2, html.cc-page .cc-sec-h h2, .cc-sec-t, .cc-inbox-h, .cc-lane-h, html.cc-page .cc-activity h3, .cc-mirror-h b, .cc-pu-g, .cc-vu-k, .cc-pal-g, .cc-kpi span, .cc-tbl th, .cc-mis-kpis span, .cc-tk-sum span, .cc-deep-cost span, .cc-told .h, .cc-st-sec b, .cc-st-figs span, .cc-reply .hd, .cc-ap-h, .cc-dec-h, .cc-fix > b, .cc-badge, .cc-ktag, .cc-orders .nx em, .cc-vu-t span[role="columnheader"], .cc-mach-add em {
  letter-spacing: 0; text-transform: none; font-family: var(--ui); font-size: var(--fs-xs);
}
html.cc-page .cc-card-h h2, html.cc-page .cc-sec-h h2, .cc-sec-t, .cc-inbox-h, .cc-lane-h, html.cc-page .cc-activity h3 { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.cc-reply { border-radius: var(--r); background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
.cc-reply .bd { font-size: var(--fs-md); }
@media (max-width: 480px) { html.cc-page .tb-where { display: none; } }

/* ------------------------------------------ Settings > ChatGPT sign-in --- */
.gpt-login { border: 1px solid var(--info-line); background: var(--info-tint); border-radius: var(--r); padding: 16px 20px; color: var(--ink); }
.gpt-login h3 { margin: 0 0 8px; font-size: var(--fs-md); }
.gpt-steps { margin: 0 0 10px; padding-left: 22px; line-height: 1.6; }
.gpt-steps li { margin: 4px 0; overflow-wrap: anywhere; }
.gpt-code { font: 700 22px/1.3 var(--mono); letter-spacing: .08em; padding: 2px 10px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); }
.gpt-wait { margin: 0; color: var(--body); font-size: var(--fs-sm); }
.gpt-login.ended { border-color: var(--warn-line); background: var(--warn-tint); }
.gpt-login .btn { margin-top: 10px; }
.group .ds-table { border-radius: 0 0 var(--r) var(--r); }
.group .ds-table thead th { border-radius: 0; }
.muted-num { font: 400 var(--fs-sm)/1.4 var(--ui); color: var(--body); }
/* the sticky Settings chip row never hides the focused control (WCAG 2.4.11) */
@media (max-width: 900px) { .content { scroll-padding-top: 72px; } }

/* ------------------------------------------------- fixes, review round --- */
/* A checkbox's label is its target: at least 44 px tall, the box inside it. */
.set-sec label:has(> input[type=checkbox]):not(.sw), .set-sec label:has(> input[type=radio]):not(.seg-opt), label.vp-me { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-weight: 500; }
.set-sec label:has(> input[type=checkbox]):not(.sw) input, label.vp-me input { margin: 0; }
/* Long option names keep more of their width. */
.row { grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); }
.row .rc select { max-width: 100%; }
@media (max-width: 900px) { .row { grid-template-columns: minmax(0, 1fr); } .row .rc select { width: 100%; } }
/* The selected Settings chip on phones: an accent edge as well as the raised ground. */
@media (max-width: 900px) { .set-nav a.on { box-shadow: inset 0 -3px 0 var(--accent), var(--shadow-sm); border-color: var(--line-strong); } }
/* Definition list: five facts fit one row when there is room. */
.ds-dl { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
/* Command Center on phones: the health word stays (never a bare dot), and the
   decision card sits under the top bar instead of over the caption. */
@media (max-width: 720px) {
  .cc-sys-chip #cc-sys-label { display: inline; }
  .cc-sys-chip .long { display: none; } .cc-sys-chip .short { display: inline; }
  .cc-need { top: calc(var(--topbar-h) + 8px); bottom: auto; max-height: calc(100dvh - var(--topbar-h) - 280px); overflow: auto; }
}
/* The "needs you" tag by a session: no halo, the word and the dot say it. */
.cc-kid .badge::before { box-shadow: none; }
/* Settings > ChatGPT: the sign-in that waits */
.gpt-code-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gpt-login .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.gpt-login .acts form { margin: 0; }

/* ------------------------------------------------------------------------------------------
   Agent avatars (2026-10-25, lib/agent-avatar.js): a small still bot head per Telegram agent,
   of MINT AI's family but told apart from it -- a tile with a hairline frame, no glow. The
   head's lines are the ink; its face and lit parts carry the agent's own colour (--av), a
   dark shade on white and a light one on black. Decorative: the name is always beside it. */
.av { --av: var(--av-l); display: inline-grid; place-items: center; flex: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
:root[data-theme="dark"] .av { --av: var(--av-d); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .av { --av: var(--av-d); } }
.av-sm { width: 40px; height: 40px; }
.av-md { width: 56px; height: 56px; }
.av-lg { width: 136px; height: 136px; border-radius: var(--r); }
.av-svg { width: 100%; height: 100%; display: block; }
.av-svg .av-line { stroke: var(--ink); }
.av-svg .av-fill { fill: var(--ink); }
.av-svg .av-c.av-line { stroke: var(--av); }
.av-svg .av-c.av-fill { fill: var(--av); }
.av-svg .av-plate { fill: var(--panel); stroke: var(--ink); }
.av-svg .av-hl { fill: var(--panel); }
.av-h-teal { --av-l: #0F766E; --av-d: #5EEAD4; }
.av-h-blue { --av-l: #1D4ED8; --av-d: #93C5FD; }
.av-h-indigo { --av-l: #4338CA; --av-d: #A5B4FC; }
.av-h-violet { --av-l: #7E22CE; --av-d: #D8B4FE; }
.av-h-rose { --av-l: #BE123C; --av-d: #FDA4AF; }
.av-h-orange { --av-l: #C2410C; --av-d: #FDBA74; }
.av-h-amber { --av-l: #A16207; --av-d: #FCD34D; }
.av-h-green { --av-l: #15803D; --av-d: #86EFAC; }
/* a name with its avatar: tables (Telegram agents, Channels) and the page head */
.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.who > .who-t { min-width: 0; }
.ds-table .who > .who-t > a, .ds-table .who > .who-t > span { display: block; }
.agent-h1 { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.agent-h1 .av { align-self: center; }
/* Settings > Avatar */
.av-pick { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.av-pick .av-desc { margin: 0 0 12px; }
.av-pick .btn-row { margin: 0; }
@media (max-width: 760px) { .who { gap: 10px; } }
.page-head .sub .dl-link { white-space: nowrap; }
.page-head .sub .dl-link .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }