/* ui.css - the shared components of the workspace (UX consolidation, Sep 2026).

Loaded by _site_header.html, so every page with the site header has it. Everything is prefixed
`ui-` so it cannot collide with the page-private stylesheets that grew before it; the tokens
(spacing, radius, type, semantic colours) are in _theme.html. Inventory and rules:
docs/design/ux-ui-consolidation-2026-09.md.

Low specificity on purpose (one class each, `:where()` for states), so a page can still adjust
a component without an arms race. */

/* ---- focus: one visible ring for every interactive thing, keyboard only ------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, #3fb950); outline-offset: 2px; border-radius: 4px;
}

/* ---- buttons: four classes and no more --------------------------------------------------- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2, 8px);
  min-height: 38px; padding: 0 var(--s-4, 16px); border-radius: var(--r-md, 10px);
  font: inherit; font-size: var(--fs-body, .95rem); font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--border, #2d3744); background: transparent; color: var(--text, #e6edf3);
}
.ui-btn:hover { border-color: var(--muted, #8b98a5); }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* `hidden` must win over the components' own display (a hidden button stayed visible) */
:where(.ui-btn, .ui-badge, .ui-job, .ui-empty, .ui-menu, .ui-details, .ui-crumbs, .ui-ctx)[hidden] { display: none !important; }
.ui-btn--primary { background: var(--accent, #3fb950); border-color: var(--accent, #3fb950); color: var(--on-accent, #0d1218); }
.ui-btn--primary:hover { border-color: var(--accent, #3fb950); text-decoration: underline; text-underline-offset: 3px; }
.ui-btn--secondary { background: var(--panel-2, #243140); }
.ui-btn--tertiary { border-color: transparent; color: var(--accent, #3fb950); padding: 0 var(--s-2, 8px); }
.ui-btn--tertiary:hover { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.ui-btn--danger { color: var(--danger, #f85149); border-color: color-mix(in srgb, var(--danger, #f85149) 45%, transparent); }
.ui-btn--danger-solid { background: var(--danger, #f85149); border-color: var(--danger, #f85149); color: #fff; }
.ui-btn--sm { min-height: 32px; padding: 0 var(--s-3, 12px); font-size: var(--fs-meta, .84rem); }
.ui-btn--icon { width: 38px; padding: 0; }
@media (max-width: 600px) { .ui-btn { min-height: 44px; } .ui-btn--sm { min-height: 40px; } .ui-btn--icon { width: 44px; } }

/* ---- status badge: colour AND a word, always -------------------------------------------- */
.ui-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-pill, 999px);
  font-size: var(--fs-label, .78rem); font-weight: 600; line-height: 1.6; white-space: nowrap;
  background: var(--neutral-bg); color: var(--muted, #8b98a5); border: 1px solid transparent;
}
.ui-badge--ok { background: var(--success-bg); color: var(--success); }
.ui-badge--warn { background: var(--warn-bg); color: var(--warn, #d29922); }
.ui-badge--danger { background: var(--danger-bg); color: var(--danger, #f85149); }
.ui-badge--info { background: var(--info-bg); color: var(--info); }
.ui-badge--role { background: transparent; border-color: var(--border, #2d3744); color: var(--text, #e6edf3); font-weight: 500; }

/* ---- breadcrumbs: work context, not site hierarchy -------------------------------------- */
.ui-crumbs { font-size: var(--fs-meta, .84rem); color: var(--muted, #8b98a5); margin: 0; }
.ui-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.ui-crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ui-crumbs li + li::before { content: "›"; color: var(--muted, #8b98a5); }
.ui-crumbs a { color: var(--muted, #8b98a5); text-decoration: none; overflow-wrap: anywhere; }
.ui-crumbs a:hover { color: var(--text, #e6edf3); text-decoration: underline; }
.ui-crumbs [aria-current] { color: var(--text, #e6edf3); overflow-wrap: anywhere; }

/* ---- workspace context bar: which matter this work belongs to --------------------------- */
.ui-ctx { border-bottom: 1px solid var(--border, #2d3744); background: var(--inset, #0d1218); }
.ui-ctx-in { max-width: 1240px; margin: 0 auto; padding: var(--s-2, 8px) var(--s-4, 16px);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2, 8px) var(--s-4, 16px); }
.ui-ctx-label { font-size: var(--fs-label, .78rem); text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #8b98a5); }
.ui-ctx-matter { position: relative; }
.ui-ctx-matter > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--text, #e6edf3); padding: 4px 8px; margin-left: -8px; border-radius: var(--r-sm, 6px); min-height: 32px; }
.ui-ctx-matter > summary::-webkit-details-marker { display: none; }
.ui-ctx-matter > summary:hover { background: var(--panel, #1a212b); }
.ui-ctx-matter > summary::after { content: "▾"; font-size: .8em; color: var(--muted, #8b98a5); }
.ui-ctx-matter[open] > summary::after { content: "▴"; }
.ui-ctx-list { position: absolute; z-index: 150; top: calc(100% + 4px); left: -8px; width: min(340px, 90vw);
  background: var(--panel, #1a212b); border: 1px solid var(--border, #2d3744); border-radius: var(--r-md, 10px);
  padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.ui-ctx-list a { color: var(--text, #e6edf3); text-decoration: none; padding: 8px 10px; border-radius: var(--r-sm, 6px); font-size: var(--fs-meta, .84rem); }
.ui-ctx-list a:hover, .ui-ctx-list a[aria-current] { background: var(--panel-2, #243140); }
.ui-ctx-list .ui-ctx-all { color: var(--accent, #3fb950); border-top: 1px solid var(--border, #2d3744); margin-top: 4px; border-radius: 0 0 6px 6px; }
.ui-ctx-counts { display: flex; flex-wrap: wrap; gap: 2px var(--s-2, 8px); margin: 0; padding: 0; list-style: none; font-size: var(--fs-meta, .84rem); }
.ui-ctx-counts a { color: var(--muted, #8b98a5); text-decoration: none; padding: 4px 6px; border-radius: var(--r-sm, 6px); display: inline-block; }
.ui-ctx-counts a:hover { color: var(--text, #e6edf3); background: var(--panel, #1a212b); }
.ui-ctx-counts b { color: var(--text, #e6edf3); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-ctx .ui-crumbs { flex: 1 1 100%; }
@media (min-width: 860px) { .ui-ctx .ui-crumbs { flex: 0 1 auto; } .ui-ctx-counts { margin-left: auto; } }

/* ---- page header: context → title → state → actions -------------------------------------- */
.ui-pagehead { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s-2, 8px) var(--s-4, 16px); margin: 0 0 var(--s-5, 24px); }
.ui-pagehead > .ui-crumbs { grid-column: 1 / -1; }
.ui-pagehead h1 { margin: 0; font-size: var(--fs-page, 1.6rem); line-height: 1.2; font-weight: 700; text-wrap: balance; overflow-wrap: anywhere; }
.ui-pagehead-state { grid-column: 1; margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted, #8b98a5); font-size: var(--fs-meta, .84rem); }
.ui-pagehead-actions { grid-column: 2; grid-row: 2 / span 2; display: flex; flex-wrap: wrap; gap: var(--s-2, 8px); justify-content: flex-end; align-self: center; }
@media (max-width: 700px) {
  .ui-pagehead { grid-template-columns: 1fr; }
  .ui-pagehead-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

/* ---- job status: one vocabulary for everything a model or a worker is doing ------------- */
.ui-job { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3, 12px); padding: var(--s-3, 12px) var(--s-4, 16px);
  border-radius: var(--r-md, 10px); border: 1px solid var(--border, #2d3744); background: var(--panel, #1a212b); }
.ui-job-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; margin-top: 1px; }
.ui-job-body { min-width: 0; flex: 1 1 220px; }
.ui-job-title { font-weight: 600; margin: 0; }
.ui-job-detail { margin: 2px 0 0; color: var(--muted, #8b98a5); font-size: var(--fs-meta, .84rem); }
.ui-job-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--fs-meta, .84rem); color: var(--muted, #8b98a5); }
.ui-job-facts b { color: var(--text, #e6edf3); font-variant-numeric: tabular-nums; }
.ui-job-actions { display: flex; gap: var(--s-2, 8px); flex-wrap: wrap; align-self: center; }
.ui-job--ok { border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.ui-job--ok .ui-job-icon { background: var(--success-bg); color: var(--success); }
.ui-job--warn { border-color: color-mix(in srgb, var(--warn, #d29922) 45%, transparent); }
.ui-job--warn .ui-job-icon { background: var(--warn-bg); color: var(--warn, #d29922); }
.ui-job--danger { border-color: color-mix(in srgb, var(--danger, #f85149) 45%, transparent); }
.ui-job--danger .ui-job-icon { background: var(--danger-bg); color: var(--danger, #f85149); }
.ui-job--busy .ui-job-icon { border: 2px solid var(--border, #2d3744); border-top-color: var(--accent, #3fb950); animation: ui-spin 1s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ---- empty state ------------------------------------------------------------------------ */
.ui-empty { text-align: center; padding: var(--s-6, 32px) var(--s-4, 16px); border: 1px dashed var(--border, #2d3744); border-radius: var(--r-lg, 14px); }
.ui-empty h2, .ui-empty h3 { margin: 0 0 6px; font-size: var(--fs-section, 1.2rem); }
.ui-empty p { margin: 0 auto var(--s-4, 16px); max-width: 52ch; color: var(--muted, #8b98a5); }
.ui-empty-actions { display: flex; flex-wrap: wrap; gap: var(--s-2, 8px); justify-content: center; align-items: center; }

/* ---- overflow menu (⋯) ------------------------------------------------------------------- */
.ui-menu { position: relative; display: inline-block; }
.ui-menu-list { position: absolute; z-index: 160; right: 0; top: calc(100% + 4px); min-width: 210px;
  background: var(--panel, #1a212b); border: 1px solid var(--border, #2d3744); border-radius: var(--r-md, 10px);
  padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.4); display: flex; flex-direction: column; }
.ui-menu-list[hidden] { display: none; }
.ui-menu-list.ui-up { top: auto; bottom: calc(100% + 4px); }
.ui-menu-list > a, .ui-menu-list > button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; font: inherit; font-size: var(--fs-body, .95rem); color: var(--text, #e6edf3);
  padding: 9px 10px; border-radius: var(--r-sm, 6px); cursor: pointer; text-decoration: none; min-height: 38px; }
.ui-menu-list > a:hover, .ui-menu-list > button:hover, .ui-menu-list > :focus-visible { background: var(--panel-2, #243140); }
.ui-menu-list > .ui-danger { color: var(--danger, #f85149); }
.ui-menu-sep { height: 1px; background: var(--border, #2d3744); margin: 4px 2px; }

/* ---- bulk action bar: appears while a selection exists ---------------------------------- */
.ui-bulkbar { position: sticky; bottom: 12px; z-index: 120; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2, 8px);
  padding: var(--s-2, 8px) var(--s-3, 12px); margin: var(--s-3, 12px) 0; border-radius: var(--r-lg, 14px);
  background: var(--panel-2, #243140); border: 1px solid var(--accent, #3fb950); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.ui-bulkbar[hidden] { display: none; }
.ui-bulkbar-count { font-weight: 700; margin-right: auto; font-variant-numeric: tabular-nums; }

/* ---- tabs: a scrollable bar that never widens the page ---------------------------------- */
.ui-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--border, #2d3744);
  margin: 0 0 var(--s-4, 16px); -webkit-overflow-scrolling: touch; mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.ui-tabs a, .ui-tabs button { flex: none; background: none; border: 0; border-bottom: 2px solid transparent; font: inherit;
  font-size: var(--fs-body, .95rem); color: var(--muted, #8b98a5); padding: 10px 12px; cursor: pointer; text-decoration: none; min-height: 42px; white-space: nowrap; }
.ui-tabs a:hover, .ui-tabs button:hover { color: var(--text, #e6edf3); }
.ui-tabs [aria-selected="true"], .ui-tabs [aria-current] { color: var(--text, #e6edf3); border-bottom-color: var(--accent, #3fb950); font-weight: 600; }
.ui-tabs .ui-count { color: var(--muted, #8b98a5); font-weight: 400; font-variant-numeric: tabular-nums; margin-left: 4px; }

/* ---- side panel / bottom sheet (evidence) ----------------------------------------------- */
.ui-sheet { position: fixed; z-index: 400; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); overflow-y: auto;
  background: var(--panel, #1a212b); border-left: 1px solid var(--border, #2d3744); box-shadow: -18px 0 40px rgba(0,0,0,.4);
  padding: var(--s-5, 24px); display: flex; flex-direction: column; gap: var(--s-4, 16px); }
.ui-sheet[hidden] { display: none; }
.ui-sheet-head { display: flex; align-items: flex-start; gap: var(--s-3, 12px); }
.ui-sheet-head h2 { margin: 0; font-size: var(--fs-section, 1.2rem); flex: 1; }
.ui-sheet dl { margin: 0; display: grid; gap: var(--s-3, 12px); }
.ui-sheet dt { font-size: var(--fs-label, .78rem); text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #8b98a5); }
.ui-sheet dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.ui-sheet blockquote { margin: 0; padding: var(--s-2, 8px) var(--s-3, 12px); border-left: 3px solid var(--accent, #3fb950); background: var(--inset, #0d1218); border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0; }
.ui-scrim { position: fixed; inset: 0; z-index: 390; background: rgba(0,0,0,.45); }
.ui-scrim[hidden] { display: none; }
@media (max-width: 700px) {
  .ui-sheet { top: auto; left: 0; width: 100%; max-height: 82vh; max-height: 82dvh; border-left: 0; border-top: 1px solid var(--border, #2d3744);
    border-radius: var(--r-lg, 14px) var(--r-lg, 14px) 0 0; padding-bottom: calc(var(--s-5, 24px) + env(safe-area-inset-bottom, 0px)); }
}

/* ---- disclosure (accordions that keep their content in the HTML) ------------------------ */
.ui-details { border: 1px solid var(--border, #2d3744); border-radius: var(--r-md, 10px); background: var(--panel, #1a212b); }
.ui-details + .ui-details { margin-top: var(--s-2, 8px); }
.ui-details > summary { cursor: pointer; list-style: none; padding: var(--s-3, 12px) var(--s-4, 16px); font-weight: 600; display: flex; align-items: center; gap: var(--s-2, 8px); min-height: 44px; }
.ui-details > summary::-webkit-details-marker { display: none; }
.ui-details > summary::after { content: "+"; margin-left: auto; color: var(--muted, #8b98a5); font-weight: 400; font-size: 1.2em; line-height: 1; }
.ui-details[open] > summary::after { content: "−"; }
.ui-details > summary small { font-weight: 400; color: var(--muted, #8b98a5); }
.ui-details-body { padding: 0 var(--s-4, 16px) var(--s-4, 16px); }

/* ---- hint: a first-action tip that stops once acted on ---------------------------------- */
.ui-hint { display: flex; align-items: center; gap: var(--s-2, 8px); font-size: var(--fs-meta, .84rem); color: var(--muted, #8b98a5); margin: var(--s-2, 8px) 0; }
.ui-hint::before { content: "i"; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--info-bg); color: var(--info); font-weight: 700; font-size: 11px; font-style: italic; }
.ui-hint[hidden] { display: none; }

/* visually hidden, still read aloud */
.ui-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }