/* The operator screen's stylesheet — Thesis's admin look (thesis/adminui/page.html), its
   palette taken from Thesis's design tokens, light and dark. BACKEND-OWNED with the rest of
   adminui/: it does not read the frontend's static/style.css, so the product's styling can
   change without touching this tool and this tool cannot break the product's. Served at
   /admin/admin.css; it holds no data. */

:root {
  color-scheme: light;
  --paper:#F4F8FB; --card:#FFFFFF; --sunk:#E8EEF5; --ink:#0B1A2B; --slate:#3A4F66;
  --faint:#4A5F76; --line:#D5DFEA; --line-soft:#E4EBF3;
  --up:#0A7350; --up-soft:#DCF2E8; --down:#B42338; --down-soft:#FBE4E8;
  --you:#9A4A0E; --you-soft:#FBEADB; --navy:#2F55D4; --navy-soft:#DDE9FA;
  --on-accent:#E9F1F7; --accent-strong:#2F55D4;
  --mono:ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --lift:0 10px 32px rgba(11,26,43,.14);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#111726; --card:#1C2436; --sunk:#161D2C; --ink:#F2F5FA; --slate:#B6C1D6;
  --faint:#94A0B8; --line:#374257; --line-soft:#2A3446;
  --up:#3FD68F; --up-soft:#123B26; --down:#FB8375; --down-soft:#45201B;
  --you:#F0BC50; --you-soft:#3D3016; --navy:#90AAE8; --navy-soft:#22314F;
  --on-accent:#F2F5FA; --accent-strong:#3C4C7E; --lift:0 6px 24px rgba(0,0,0,.55);
}
[hidden] { display:none !important; }

body { margin:0; padding:20px; background:var(--paper); color:var(--ink);
       font:14px/1.45 var(--sans); }
* { box-sizing:border-box; }
.wrap { max-width:1400px; margin:0 auto; }
a { color:var(--navy); }

/* ---- form controls (Thesis's base rules) */
textarea, select,
input[type=text], input[type=number], input[type=password], input[type=email],
input[type=search] {
  width:100%; min-height:38px; padding:8px 11px; border:1px solid var(--line); border-radius:6px;
  font:inherit; color:var(--ink); background:var(--card); outline:none; }
textarea:focus, input:focus, select:focus { border-color:var(--navy); }
textarea { resize:vertical; min-height:220px; font:13px/1.45 var(--mono); }
button { cursor:pointer; font:inherit; color:var(--ink); background:var(--card);
         border:1px solid var(--line); border-radius:6px; min-height:38px; padding:7px 13px; }
button:hover { background:var(--sunk); }
button.primary { background:var(--accent-strong); color:var(--on-accent);
                 border-color:transparent; font-weight:600; }
button.primary:hover { filter:brightness(1.08); background:var(--accent-strong); }
button.danger { border-color:var(--down-soft); color:var(--down); }
button.danger:hover { background:var(--down-soft); }
button:disabled { opacity:.6; cursor:default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline:2px solid var(--navy); outline-offset:3px; }
input[type=file] { min-width:0; width:100%; min-height:38px; font:inherit;
                   color:var(--slate); }
input[type=file]::file-selector-button { font:inherit; color:var(--ink); background:var(--sunk);
  border:1px solid var(--line); border-radius:6px; padding:8px 11px; margin-right:10px; cursor:pointer; }

/* ---- header and tabs */
header { display:flex; justify-content:space-between; align-items:center; gap:16px;
         border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:4px; }
h1 { margin:0; font-size:20px; font-weight:700; letter-spacing:-0.01em; }
h1 .app { color:var(--faint); font-weight:500; }
.head-right { display:flex; align-items:center; justify-content:flex-end; gap:14px;
              flex-wrap:wrap; min-width:0; }
header a { color:var(--navy); text-decoration:none; font-size:13px; }
.who { color:var(--slate); font-size:13px; overflow-wrap:anywhere; }
.head-right button { padding:4px 10px; font-size:13px; }
.theme-btn { background:none; width:34px; height:34px; min-height:34px; flex-shrink:0; padding:0; font-size:14px;
             color:var(--slate); }

nav.tabs { position:relative; display:flex; gap:2px; margin:14px 0 18px; border-bottom:1px solid var(--line);
           overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
nav.tabs::-webkit-scrollbar { display:none; }
nav.tabs button { background:none; border:none; border-bottom:2px solid transparent;
                  border-radius:0; padding:9px 16px; font-size:14px; flex-shrink:0;
                  white-space:nowrap; color:var(--slate); }
nav.tabs button:hover { color:var(--ink); background:var(--sunk); }
nav.tabs button[aria-selected=true] { color:var(--ink); font-weight:600;
                                      border-bottom-color:var(--navy); }

h2 { font-size:15px; font-weight:600; margin:22px 0 6px; }
h2:first-child { margin-top:0; }
h3 { font-size:14px; margin:0 0 6px; }
.section-note { color:var(--slate); font-size:12.5px; margin:0 0 14px; max-width:74ch; }
.muted { color:var(--faint); }
.help { color:var(--faint); font-size:12px; }
.error { color:var(--down); font-size:13px; }

/* ---- toolbars and tables */
.toolbar { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.toolbar input[type=search] { flex:1; min-width:220px; width:auto; }
.count { color:var(--faint); font-size:13px; white-space:nowrap; }
.pager { display:flex; gap:5px; }
.pager button { padding:4px 9px; }
.toggle { color:var(--slate); font-size:13px; white-space:nowrap; cursor:pointer;
          display:flex; align-items:center; gap:6px; }

.scroll { width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:8px;
          background:var(--card); }
table { width:100%; border-collapse:collapse; }
table.wide { min-width:1100px; }
th, td { padding:9px 11px; text-align:left; font-size:13px; white-space:nowrap;
         border-bottom:1px solid var(--line-soft); }
th { background:var(--sunk); font-weight:600; color:var(--slate); position:sticky; top:0;
     z-index:1; }
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { color:var(--ink); }
th .ind { color:var(--faint); font-size:10px; margin-left:3px; }
tbody tr:hover { background:var(--sunk); }
tr.guest td { color:var(--faint); }

.badge { display:inline-block; padding:2px 7px; border-radius:4px; font-size:11px;
         font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.b-admin { background:var(--accent-strong); color:var(--on-accent); }
.b-locked, .b-bad { background:var(--down-soft); color:var(--down); }
.b-guest, .b-idle { background:var(--line-soft); color:var(--faint); }
.b-ok { background:var(--up-soft); color:var(--up); }
.b-warn { background:var(--you-soft); color:var(--you); }
.ok-text { color:var(--up); }

.actions { display:flex; gap:4px; flex-wrap:nowrap; }
.actions button { min-height:32px; padding:4px 9px; font-size:12px; border-radius:5px; }
.empty, .loading { padding:26px; text-align:center; color:var(--faint); }

/* ---- cards: a prompt category, a setting, a health panel */
.card { border:1px solid var(--line); border-radius:10px; background:var(--card);
        padding:14px 16px; margin:0 0 14px; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:10px;
             flex-wrap:wrap; }
.prompt { border-top:1px solid var(--line-soft); padding:10px 0 4px; margin-top:10px; }
.prompt .actions { margin-top:6px; }
pre { white-space:pre-wrap; background:var(--sunk); padding:10px; border-radius:6px;
      max-height:280px; overflow:auto; font:12px/1.5 var(--mono); margin:6px 0; }
details summary { cursor:pointer; color:var(--slate); font-size:12.5px; margin-top:6px; }

form.stack { display:grid; gap:10px; max-width:820px; }
fieldset { border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin:0; }
legend { color:var(--slate); font-size:12.5px; font-weight:600; padding:0 4px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); gap:10px; }
label { display:grid; align-content:start; grid-template-rows:auto auto; gap:4px;
        min-width:0; font-size:13px; color:var(--slate); }
label > input, label > select { min-height:38px; }
.grid { align-items:start; }
.grid > label { grid-row:span 3; grid-template-rows:subgrid; row-gap:4px; }
label.inline { display:flex; align-items:center; gap:8px; }
label.inline input { width:auto; }
.setting-row { display:flex; gap:8px; align-items:end; flex-wrap:wrap; margin-top:8px; }
.setting-row label { flex:1; min-width:220px; }

@media (max-width:640px) {
  body { padding:16px; }
  header { align-items:flex-start; flex-direction:column; gap:10px; }
  .head-right { width:100%; justify-content:flex-start; gap:10px; }
  .who { flex-basis:100%; }
  nav.tabs { margin-top:10px; }
  nav.tabs button { padding:10px 12px; }
  .toolbar input[type=search], .setting-row label { min-width:0; }
  .toolbar .count { white-space:normal; }
  #savebar { gap:8px; flex-wrap:wrap; }
}

/* ---- Trends: compact editing rows and forms; wide lists scroll inside their own box. */
.section-title { font-size:20px; margin:0 0 4px; }
.trend-intro { margin-bottom:18px; }
.trend-intro .section-note { margin-bottom:6px; max-width:none; }
.trend-intro details { max-width:90ch; }
.trend-intro details p { margin:8px 0 0; }
.trend-management { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
                    gap:16px; align-items:start; }
.trend-management .card { min-width:0; padding:18px; }
.trend-management h2 { margin:0 0 12px; font-size:15px; }
#trend-categories { display:grid; gap:10px; }
.trend-category-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.trend-category-row input { flex:1 1 160px; width:160px; min-width:0; }
.trend-category-row .count { margin-right:auto; }
.trend-category-row .actions { gap:6px; }
.trend-category-row .actions button { min-height:38px; }
.trend-category-add { display:flex; gap:10px; align-items:end; flex-wrap:wrap;
                      border-top:1px solid var(--line-soft); margin-top:16px; padding-top:14px; }
.trend-category-add label { flex:1 1 180px; }
.trend-category-add .error { flex-basis:100%; }
.trend-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.trend-upload-footer { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.trend-upload-footer label { flex:1 1 220px; }
#new-trend { max-width:none; gap:14px; }
#tab-trends .error { margin:0; }
/* Add a trend (#643): the clip and its length, the watermark option, one button */
.trend-clip { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.trend-clip label { flex:0 1 auto; }
#trend-trim-label, #trend-trim { margin-bottom:10px; line-height:18px; }
#trend-trim { min-height:0; padding:0 4px; }
.trend-clean-option { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.trend-clean-option .toggle { color:var(--ink); font-size:14px; }
.trend-clean-option input[type=checkbox] { width:17px; height:17px; margin:0; accent-color:var(--navy); }
.trend-submit { display:flex; }
#trend-clean-settings { border:1px solid var(--line); border-radius:8px; padding:12px 14px; background:var(--sunk);
                        display:flex; flex-direction:column; gap:10px; }
.trend-clean-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px 16px; }
.trend-clean-grid label { margin:0; }
#trend-clean-settings details > .trend-clean-grid { margin-top:10px; }
#trend-clean-settings > p.help { margin:0; }
.trend-clean-from { display:flex; align-items:center; gap:10px; margin:0; font-weight:600; }
.trend-clean-from select { width:auto; min-height:34px; padding:5px 9px; font-weight:400; }
.trend-clean-from select:disabled { opacity:.55; }
#trend-clean-adjust > summary { cursor:pointer; font-weight:600; }
#trend-clean-fields { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
#trend-clean-settings button.link { align-self:flex-start; padding:0; min-height:0; }
/* A removal's result: the clip beside what to do with it */
.trend-clean { margin-top:16px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--sunk);
               display:grid; gap:16px; }
.trend-clean.done { grid-template-columns:minmax(0,260px) minmax(0,1fr); align-items:start; }
.trend-clean-side { display:flex; flex-direction:column; gap:8px; min-width:0; }
.trend-clean-side p { margin:0; }
.trend-clean-progress { font-weight:600; }
.trend-clean-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.trend-clean-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trend-clean .actions { gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.trend-clean .actions button, .trend-clean .actions a.button { min-height:34px; padding:5px 12px; font-size:13px; }
.trend-clean .actions a.button { display:inline-flex; align-items:center; border:1px solid var(--line);
  border-radius:6px; color:var(--ink); background:var(--card); text-decoration:none; }
.trend-clean .actions a.button:hover { background:var(--sunk); }
.trend-clean-video { display:block; width:100%; max-height:46vh; background:#000; border-radius:8px; }
@media (max-width:640px) { .trend-clean.done { grid-template-columns:minmax(0,1fr); } }
/* The frontend's trimmer (static/style.css .trim-*, in this page's colours) */
dialog.trim { width:calc(100% - 32px); max-width:520px; }
.trim-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.trim-top h3 { margin:0; }
.trim-stage { position:relative; background:#000; border-radius:12px; overflow:hidden; display:grid; place-items:center; margin:10px 0 12px; }
.trim-stage video { display:block; width:100%; max-height:min(46dvh,420px); object-fit:contain; background:#000; }
.trim-bar { display:flex; align-items:center; gap:10px; }
.trim-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; min-height:0;
  border-radius:50%; border:0; padding:0; display:grid; place-items:center; background:rgba(0,0,0,.45); color:#fff; }
.trim-play:hover { background:rgba(0,0,0,.6); }
.trim-play.is-playing { opacity:.35; }
.trim-play:hover, .trim-play:focus-visible { opacity:1; }
.trim-play svg { margin-left:2px; }
.trim-track { position:relative; flex:1; height:56px; border-radius:10px; background:var(--sunk); touch-action:none; user-select:none; -webkit-user-select:none; }
.trim-frames { position:absolute; inset:0; display:flex; border-radius:10px; overflow:hidden; }
.trim-frames img { flex:1; min-width:0; height:100%; object-fit:cover; }
.trim-shade { position:absolute; top:0; bottom:0; background:rgba(0,0,0,.55); pointer-events:none; }
.trim-shade:first-of-type { border-radius:10px 0 0 10px; }
.trim-sel { position:absolute; top:0; bottom:0; border:3px solid var(--navy); border-radius:8px; box-sizing:border-box; cursor:grab; }
.trim-handle { position:absolute; top:-4px; bottom:-4px; width:22px; margin-left:-11px; border-radius:7px; background:var(--navy); cursor:ew-resize; display:grid; place-items:center; }
.trim-handle::after { content:""; width:3px; height:22px; border-radius:2px; background:var(--on-accent); opacity:.7; }
.trim-handle:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.trim-head { position:absolute; top:-6px; bottom:-6px; width:2px; margin-left:-1px; background:var(--ink); pointer-events:none; }
.trim-label { text-align:center; margin:10px 0 0; }
#tab-trends .error:empty { display:none; }
.trend-table { min-width:1192px; table-layout:fixed; }
.trend-table th, .trend-table td { padding:12px; vertical-align:top; }
.trend-table th:first-child { width:64px; }
.trend-table th:nth-child(3) { width:176px; }
.trend-table th:nth-child(4) { width:176px; }
.trend-table th:nth-child(5) { width:64px; }
.trend-table th:nth-child(6) { width:144px; }
.trend-table th:nth-child(7) { width:96px; }
.trend-table th:last-child { width:240px; }
.trend-table input, .trend-table select { height:36px; min-height:36px; padding:6px 9px; }
.trend-table select { width:100%; }
.trend-title-edit { display:flex; gap:6px; align-items:center; }
.trend-title-edit input { width:0; min-width:0; flex:1; }
.trend-title-edit button { flex:none; min-height:36px; padding:6px 10px; font-size:12px; }
.trend-cell-value { display:flex; align-items:center; min-height:36px; }
.trend-filename { font-size:12px; margin-top:5px; max-width:290px; overflow:hidden;
                  text-overflow:ellipsis; }
.trend-poster { width:48px; height:72px; object-fit:cover; border-radius:5px; display:block; }
.trend-table .actions { gap:6px; align-items:center; min-height:36px; }
.trend-table .actions button:nth-child(3) { min-width:78px; }
.trend-table .badge { text-transform:none; letter-spacing:0; font-size:12px; font-weight:600; }
.trend-stats { font-variant-numeric:tabular-nums; }
#trends h2 { margin:20px 0 10px; }
@media (max-width:1100px) { .trend-management { grid-template-columns:minmax(0,1fr); gap:0; } }
@media (max-width:480px) {
  .trend-fields { grid-template-columns:minmax(0,1fr); }
  .trend-management .card { padding:14px; }
  .trend-category-row input { flex-basis:calc(100% - 110px); }
  .trend-category-row .actions { margin-left:auto; }
  .trend-category-row + .trend-category-row { border-top:1px solid var(--line-soft); padding-top:10px; }
}

/* ---- HEALTH (Thesis's). THE SHAPE CARRIES THE STATE AND THE WORD REPEATS IT — colour alone
   fails for a red/green-blind reader and in a pasted screenshot. A green tick, a yellow circle,
   a red X (the biggest, because it must interrupt), and a small grey square for "n/a". Drawn
   with clip-path: the page is under a nonce CSP and holds no external assets. */
.hdot { display:inline-block; width:18px; height:18px; margin-right:8px; vertical-align:-4px;
        flex:none; }
.d-ok   { background:var(--up); transform:scale(.83);
          clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%); }
.d-warn { background:var(--you); border-radius:50%; transform:scale(.83); }
.d-bad  { background:var(--down);
          clip-path:polygon(20% 0,50% 30%,80% 0,100% 20%,70% 50%,100% 80%,80% 100%,
                            50% 70%,20% 100%,0 80%,30% 50%,0 20%); }
.d-idle { background:var(--faint); border-radius:2px; transform:scale(.44); }
/* THE TAB SAYS SO WITHOUT BEING OPENED: the roll-up is polled in the background and lands on
   the Health tab, whichever tab is open. Only the failing one moves. */
#health-dot { display:none; }
#health-dot.s-warn, #health-dot.s-bad {
  display:inline-flex; align-items:center; margin-left:7px; padding:1px 7px 1px 6px;
  border-radius:9px; font-family:var(--mono); font-size:11px; letter-spacing:.02em;
  vertical-align:1px; }
#health-dot .hdot { width:14px; height:14px; margin-right:5px; vertical-align:0; }
#health-dot.s-warn { background:var(--you-soft); color:var(--you); border:1px solid var(--you); }
#health-dot.s-bad  { background:var(--down-soft); color:var(--down); border:1px solid var(--down); }
@keyframes health-pulse { 50% { opacity:.45; } }
#health-dot.s-bad .hdot { animation:health-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #health-dot.s-bad .hdot { animation:none; } }
.health-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
/* The group heading is furniture, not a verdict: it carries no state. */
.health-group { margin:22px 0 10px; font-size:11px; font-weight:700; letter-spacing:.10em;
                text-transform:uppercase; color:var(--slate); }
.health-group:first-child { margin-top:0; }
.health-group::after { content:""; display:block; height:1px; margin-top:8px;
                       background:var(--line); }
.health-card { border:1px solid var(--line); border-radius:10px; padding:14px 16px;
               background:var(--card); }
.health-card h3 { margin:0 0 10px; font-size:13px; letter-spacing:.04em;
                  text-transform:uppercase; color:var(--slate); }
.health-card dl { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0;
                  font-size:13px; }
.health-card dt { color:var(--slate); }
.health-card dd { margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums;
                  overflow-wrap:anywhere; }
.health-card.s-warn { border-color:var(--you); background:var(--you-soft); }
.health-card.s-bad  { border-color:var(--down); background:var(--down-soft); }
.health-why { margin:8px 0 0; font-size:12px; color:var(--down); overflow-wrap:anywhere; }
.health-card.s-warn .health-why { color:var(--you); }
.health-card.s-ok .health-why, .health-card.s-none .health-why { color:var(--slate); }
.stuck td { vertical-align:top; white-space:normal; }
.stuck td.err { overflow-wrap:anywhere; max-width:360px; }

/* ---- TIER ENTITLEMENTS (Thesis's matrix) */
table.ent td, table.ent th { vertical-align:top; white-space:normal; }
table.ent { min-width:760px; }
.feat-label { font-weight:600; color:var(--ink); }
.feat-help { color:var(--faint); font-size:12px; margin-top:3px; max-width:52ch; }
.cell { text-align:center; }
.cell input[type=checkbox] { width:17px; height:17px; cursor:pointer; accent-color:var(--navy); }
.cell input[type=number] { width:96px; text-align:right; }
.cell.changed input[type=number] { border-color:var(--navy); }
/* Packs (#561): sized to their content, one compact row per pack, the last row adds one. */
table.packs-table td, table.packs-table th { vertical-align:middle; padding:6px 8px; }
table.packs-table .cell input[type=number] { width:80px; padding:5px 7px; }
table.packs-table input.pack-name { width:170px; padding:5px 7px; }
table.packs-table select { width:auto; padding:5px 6px; }
table.packs-table tr.pack-new td { border-top:2px solid var(--line,#E4E2D9); }
.packs-card .toolbar select { width:auto; }
.cell.changed .dflt { color:var(--navy); }
.dflt { display:block; color:var(--faint); font-size:11px; margin-top:3px; min-height:13px; }

/* ---- the tier on an account row: a staged select, coloured by tier */
select.tier { width:auto; padding:3px 8px; font-size:12px; font-weight:700;
              text-transform:uppercase; }
select.tier.t-none { color:var(--faint); }
select.tier.t-starter { color:var(--slate); }
select.tier.t-creator { color:var(--navy); }
select.tier.t-studio { color:var(--you); }

/* ---- THE SAVE BAR. Sticky, because a Save you have to scroll to find is a Save that gets
   forgotten. One bar for every tab: a staged tier, entitlement or setting is the same kind of
   pending edit, and two Save buttons would let you forget one of them. */
#savebar { position:sticky; bottom:0; z-index:5; display:flex; align-items:center; gap:14px;
           justify-content:flex-end; margin-top:18px; padding:12px 16px;
           background:var(--card); border:1px solid var(--navy); border-radius:8px;
           box-shadow:var(--lift); }
#savebar[hidden] { display:none; }
#savecount { margin-right:auto; font-size:13px; color:var(--ink); font-weight:600; }
#savebar button { padding:8px 16px; font-size:13px; }
#savebar button#savebtn { background:var(--accent-strong); color:var(--on-accent);
                          border-color:transparent; font-weight:600; }
/* An edit that has not been sent must not look like one that has. */
.staged, td.staged input, select.tier.staged, input.staged, select.staged {
  outline:2px solid var(--you); outline-offset:1px; border-radius:4px; }

/* ---- the placeholder for a tab not built yet: said plainly, not left blank */
.todo { border:1px dashed var(--line); border-radius:10px; padding:22px; color:var(--slate);
        background:var(--card); max-width:74ch; }

/* ---- toast and dialogs (Thesis's) */
#toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
         background:var(--card); border:1px solid var(--line); border-radius:6px;
         padding:10px 16px; font-size:13px; display:none; max-width:80vw;
         box-shadow:var(--lift); color:var(--ink); z-index:20; }
#toast.err { border-color:var(--down); color:var(--down); }
dialog { border:1px solid var(--line); border-radius:8px; background:var(--card);
         color:var(--ink); padding:20px; box-shadow:var(--lift); width:min(420px,90vw); }
dialog::backdrop { background:rgba(15,19,28,.5); }
dialog label { margin:12px 0; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }

/* ---- the sign-in page */
.signin { max-width:380px; margin:12vh auto 0; }
.signin .card { padding:24px 26px; }
.signin h1 { margin-bottom:4px; }
.signin form { display:grid; gap:12px; margin-top:16px; }
.signin button.primary { padding:10px; }

/* ---- Generation (#195): setups and prompts */
.seg { display:inline-flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:8px;
       overflow:hidden; }
.seg button { border:none; border-radius:0; border-right:1px solid var(--line); }
.seg button:last-child { border-right:none; }
.seg button.on { background:var(--accent-strong); color:var(--on-accent); font-weight:600; }
.chip { display:inline-block; font-size:12px; padding:2px 8px; border-radius:6px;
        background:var(--sunk); color:var(--slate); margin:4px 6px 0 0; }
/* ---- Generation (#195, #234): a setups list, and the chosen setup's pipeline — a tinted area of
   white stage cards, as Analytics groups its panels. Steps are rows split by hairlines. */
.gen-layout { display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; }
.gen-side { flex:1 1 220px; max-width:300px; min-width:0; display:flex; flex-direction:column; gap:4px;
            border-right:1px solid var(--line-soft); padding-right:16px; }
.gen-side h2 { margin:0 0 4px; }
.gen-item { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%;
            text-align:left; border:1px solid transparent; background:none; padding:7px 10px; }
.gen-item:hover { background:var(--sunk); }
.gen-item.on { background:var(--navy-soft); border-color:var(--navy);
               box-shadow:inset 0 0 0 1px var(--navy); font-weight:600; }
.gen-item.sub { padding-left:24px; font-size:13px; }
.gen-item-text { display:flex; flex-direction:column; min-width:0; }
.gen-item-text .help { font-weight:400; }
.gen-side-add { border-top:1px solid var(--line-soft); margin-top:8px; padding-top:10px;
                display:grid; gap:8px; }
.gen-inline { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.gen-inline select, .gen-inline input { width:auto; flex:1 1 140px; min-width:0; }
.gen-pipe { flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:10px; }
.gen-pipe h2 { margin:0; }
.gen-area { background:var(--navy-soft); border:1px solid var(--line);
            border-top:4px solid var(--navy); border-radius:10px; padding:14px; display:flex;
            flex-direction:column; gap:8px; }
.gen-arealabel { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
                 color:var(--slate); padding:2px 2px 0; }
.gen-arealabel + .gen-stage { margin-top:0; }
.gen-stage { background:var(--card); border:1px solid var(--line); border-radius:8px; }
.gen-stagehead { display:flex; align-items:center; gap:12px; width:100%; text-align:left;
                 border:none; border-radius:8px; background:none; padding:10px 14px; min-height:46px; }
.gen-stagehead:hover { background:var(--paper); }
.gen-stagelabel { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
                  color:var(--slate); min-width:84px; }
.gen-stagesum { flex:1; min-width:0; }
.gen-stagebody { border-top:1px solid var(--line-soft); padding:4px 14px 14px; display:flex;
                 flex-direction:column; gap:10px; }
.gen-note { display:flex; justify-content:space-between; align-items:center; gap:10px;
            flex-wrap:wrap; padding-top:8px; font-size:13px; color:var(--faint); }
.gen-steps { border-top:1px solid var(--line-soft); }
.gen-step { border-bottom:1px solid var(--line-soft); }
.gen-steprow { display:flex; align-items:center; gap:8px; padding:9px 0; flex-wrap:wrap; }
.gen-stepnum { width:18px; color:var(--faint); font-size:12px; text-align:right; flex-shrink:0; }
.gen-stepmain { flex:1 1 220px; min-width:0; }
.gen-stepname { font-weight:600; }
.gen-stepname.off { text-decoration:line-through; color:var(--faint); }
.gen-stepdetail { padding:0 0 12px 26px; display:grid; gap:8px; }
.gen-stepdetail p { margin:0; }
/* Separate expanded settings without changing the pipeline's order or controls. */
.gen-stagebody { padding:14px; gap:16px; }
.gen-stagehead[aria-expanded="true"] { background:var(--navy-soft); }
.gen-stagebody .help { color:var(--slate); line-height:1.55; }
.gen-panel { min-width:0; margin:0; padding:14px; border:1px solid var(--line);
             border-radius:8px; background:var(--paper); }
.gen-panel-title { margin:0; font-size:14px; font-weight:700; color:var(--ink); }
.gen-stagebody .grid { gap:14px; }
.gen-stagebody .grid > label { grid-row:auto; grid-template-rows:auto auto auto;
                             align-content:start; gap:6px; }
.gen-stagebody select, .gen-stagebody input { align-self:start; }
.gen-stagebody textarea { min-height:100px; height:100px; }
.gen-options > summary { font-weight:600; color:var(--slate); }
.gen-options[open] > summary { margin-bottom:14px; }
.gen-stagebody fieldset { min-width:0; margin:0; padding:14px; border:1px solid var(--line);
                         border-radius:8px; background:var(--paper); }
.gen-stagebody legend { padding:0 6px; font-weight:700; }
.gen-step { margin-top:12px; border:1px solid var(--line); border-radius:8px; }
.gen-steprow { padding:12px; background:var(--paper); border-radius:8px; }
.gen-stepnum { width:24px; height:24px; display:grid; place-items:center;
               border-radius:50%; background:var(--navy-soft); color:var(--slate); font-weight:700; }
.gen-stepdetail { padding:14px; gap:14px; border-top:1px solid var(--line); }
@media (max-width:640px) {
  .gen-stagebody, .gen-panel, .gen-stepdetail { padding:10px; }
  .gen-stagehead { flex-wrap:wrap; gap:8px; }
  .gen-stagesum { flex-basis:calc(100% - 110px); overflow-wrap:anywhere; }
}

.gen-add-step { padding-top:10px; }
.gen-steps .actions { padding-top:10px; align-items:center; }
.gen-icon { border:none; background:none; min-width:30px; padding:2px 6px; color:var(--slate); }
.gen-icon.x { color:var(--down); }
.gen-switch { border-radius:999px; font-size:12px; font-weight:600; padding:2px 12px; }
.gen-switch.on { background:var(--up-soft); color:var(--up); border-color:var(--up-soft); }
.gen-switch.off { background:var(--sunk); color:var(--slate); }
.stack { display:grid; gap:10px; }
.gen-pipe pre, .sent { white-space:pre-wrap; word-break:break-word; font:12px/1.55 var(--mono);
                       background:var(--sunk); border-radius:6px; padding:10px; max-height:360px;
                       overflow:auto; }
.added { background:var(--you-soft); color:var(--you); }
.warn, .warn-text { color:var(--down); font-weight:600; }
.warn-text { font-size:13px; }
.gen-advice { color:var(--you); font-size:13px; }
p.warn-text { margin:8px 0 0; }
button.link { border:none; background:none; color:var(--navy); padding:4px 6px; }
button.link:hover { text-decoration:underline; background:none; }
@media (max-width: 640px) { .gen-side { max-width:none; border-right:none; padding-right:0; } }

/* ---- Analytics (#199) */
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px;
         margin:12px 0; }
.tile { text-align:left; padding:12px 14px; border-radius:8px; border:1px solid var(--line);
        background:var(--card); cursor:pointer; }
.tile:hover { border-color:var(--navy); background:var(--card); }
.tile.on { border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy); background:var(--navy-soft); }
.tile-value { font-size:22px; font-weight:700; margin:2px 0; }
.drawer { background:var(--navy-soft); border:1px solid var(--line); border-top:4px solid var(--navy);
          border-radius:10px; padding:12px 14px 14px; margin:0 0 16px; }
.an-boxes { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.an-box { flex:1 1 260px; min-width:0; background:var(--card); border:1px solid var(--line);
          border-radius:8px; padding:10px 12px; }
.an-wide { flex-basis:100%; margin-top:12px; }
.an-table td.an-run-error { white-space:normal; min-width:28ch; max-width:65ch; overflow-wrap:anywhere; }
.run-diagnostics { overflow-wrap:anywhere; }
.run-diagnostics .card-head { flex-wrap:wrap; }
.run-diagnostics pre { overflow-wrap:anywhere; max-height:32rem; overflow:auto; }
.run-diagnostics pre.run-log { height:65vh; min-height:20rem; max-height:none; margin-top:8px; }
.run-diagnostics .run-input-files { display:flex; flex-wrap:wrap; gap:6px 16px; }
.run-diagnostics details { margin-top:16px; }
.run-diagnostics > a { display:inline-block; margin-right:24px; }
.run-provider-error { white-space:pre-wrap; font-weight:600; }
.an-box-title { font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--faint);
                margin-bottom:4px; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:5px 0;
      border-top:1px solid var(--line-soft); font-variant-numeric:tabular-nums; }
.kvbtn { width:100%; border:none; border-top:1px solid var(--line-soft); border-radius:0;
         background:none; padding:5px 0; text-align:left; color:var(--navy); cursor:pointer; }
.kvbtn:hover { background:var(--navy-soft); }
.kvbtn.on { font-weight:600; }
.kv.muted, .kv.muted strong { color:var(--faint); }
.kv.bad, .kv.bad strong { color:var(--down); }
.kv.warnrow, .kv.warnrow strong { color:var(--you); }
.an-alerts { border:1px solid var(--down-soft); background:var(--down-soft); color:var(--down);
             border-radius:8px; padding:10px 14px; margin:10px 0; font-weight:600;
             display:grid; gap:4px; }
.an-table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.an-table th, .an-table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-soft);
                             vertical-align:top; }
.an-table th.num, .an-table td.num { text-align:right; }
.sorthead { border:none; background:none; padding:0; font:inherit; font-size:12px; font-weight:600;
            color:var(--faint); cursor:pointer; }
.sorthead:hover { color:var(--navy); background:none; }
.sorthead.on { color:var(--ink); }
.clickrow { cursor:pointer; }
.clickrow:hover td { background:var(--sunk); }
.mono { font-family:var(--mono); }

/* Ordered prompt components use the same controls for video and previews. */
.prompt-stack-field { grid-column:1 / -1; min-width:0; }
.prompt-stack-row { display:grid; grid-template-columns:20px minmax(0,1fr) repeat(3,30px);
                    gap:6px; align-items:center; }
.prompt-stack-row select { min-width:0; width:100%; }

/* Ported support styles from Thesis adminui/page.html. Host palette stays shared. */
  /* ---- support ------------------------------------------------------------------------
     A TABLE THAT KEEPS ITS OWN SCROLL at about a third of the viewport, with the open
     ticket below it. Both on screen at once is the actual shape of triage: you read one
     while the queue stays visible. */
  #tab-support nav.tabs.sub { margin:0 0 12px; border-bottom:1px solid var(--line,#E4E2D9); }
  #tab-support nav.tabs.sub button { font-size:13px; padding:7px 12px; }
  #tab-support nav.tabs.sub .n { font-family:var(--mono,monospace); font-size:11px;
                    color:var(--faint,#8B94A8); }

  .sup-scroll { max-height:34vh; overflow:auto; border:1px solid var(--line,#E4E2D9);
                border-radius:8px; }
  table.sup-tbl { width:100%; border-collapse:collapse; min-width:900px; font-size:13px; }
  /* STICKY HEADER, because a scrolling table whose columns you cannot see is a table you
     cannot sort by. */
  table.sup-tbl thead th { position:sticky; top:0; z-index:1;
                           background:var(--sunk,#F4F2EC); text-align:left; padding:8px 12px;
                           border-bottom:1px solid var(--line,#E4E2D9); font-size:11px;
                           letter-spacing:.05em; text-transform:uppercase;
                           color:var(--faint,#8B94A8); white-space:nowrap; cursor:pointer;
                           user-select:none; }
  table.sup-tbl thead th:hover { color:var(--ink,#16213A); }
  table.sup-tbl td { padding:8px 12px; border-bottom:1px solid var(--line,#E4E2D9);
                     vertical-align:middle; }
  table.sup-tbl tbody tr { cursor:pointer; }
  table.sup-tbl tbody tr:hover { background:var(--sunk,#F4F2EC); }
  table.sup-tbl tbody tr.on { background:var(--navy-soft,#E9EEF7); }
  table.sup-tbl .mono { font-family:var(--mono,monospace); font-size:12px;
                        color:var(--faint,#8B94A8); white-space:nowrap; }
  .sup-you { color:var(--down,#B3382C); font-weight:600; }
  /* ★ NEW, ● CAME BACK. Both sit in the Id cell so the eye finds them in one column rather
     than hunting across the row, and `.sup-nomark` reserves the space so the numbers below
     them stay aligned. */
  .sup-star { color:var(--accent-strong,#16213A); margin-right:5px; }
  .sup-back { color:var(--down,#B3382C); margin-right:5px; font-size:11px; }
  .sup-nomark { display:inline-block; width:1em; margin-right:5px; }
  table.sup-tbl tbody tr.fresh td:first-child { font-weight:600; color:var(--ink,#16213A); }

  .sup-pill, .sup-tag { display:inline-block; font-family:var(--mono,monospace); font-size:10.5px;
                        letter-spacing:.04em; text-transform:uppercase; padding:1px 7px;
                        border-radius:10px; border:1px solid var(--line,#E4E2D9);
                        color:var(--slate,#5B6880); white-space:nowrap; }
  .sup-pill.solved { color:var(--faint,#8B94A8); }
  .sup-pill.in_progress { color:var(--navy,#1F3A6E); border-color:var(--navy,#1F3A6E); }
  /* CANCELLED READS AS FINISHED, NOT AS FAILED. It is a legitimate ending — a duplicate, a
     withdrawal — so it is quiet rather than red, and quieter than solved because there is
     nothing to celebrate and nothing to check. */
  .sup-pill.cancelled { color:var(--faint,#8B94A8); border-color:var(--line,#E4E2D9); }
  .sup-tag.warn { color:var(--down,#B3382C); border-color:var(--down-soft,#F8EAE8); }
  .sup-tag.good { color:var(--up,#2F6F52); }
  .sup-dot { font-family:var(--mono,monospace); font-size:10.5px; padding:1px 6px;
             border-radius:9px; background:var(--navy,#1F3A6E);
             color:var(--on-accent,#FAFAF6); }

  /* ---- the open ticket, below the table ---- */
  .sup-card { margin-top:16px; border:1px solid var(--line,#E4E2D9); border-radius:9px;
              background:var(--card,#fff); }
  .sup-card-head { display:flex; align-items:center; gap:12px; padding:11px 14px;
                   border-bottom:1px solid var(--line,#E4E2D9); }
  .sup-card-head h3 { margin:0; font-size:15px; }
  .sup-who { flex:1; font-family:var(--mono,monospace); font-size:12px;
             color:var(--slate,#5B6880); }
  .sup-close { background:none; border:none; font-size:20px; line-height:1; cursor:pointer;
               color:var(--faint,#8B94A8); }
  .sup-card-body { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:18px;
                   padding:14px; align-items:start; }
  .sup-conv { min-width:0; }
  .sup-msg { padding:9px 11px; border-radius:8px; margin:0 0 9px; max-width:82%;
             border:1px solid var(--line,#E4E2D9); white-space:pre-wrap;
             overflow-wrap:anywhere; font-size:13px; line-height:1.5; }
  .sup-msg.them { background:var(--sunk,#F4F2EC); }
  .sup-msg.us { background:var(--navy-soft,#E9EEF7); margin-left:auto; }
  .sup-msg .who { display:flex; gap:8px; font-size:11px; font-weight:600; margin-bottom:3px;
                  color:var(--slate,#5B6880); font-family:var(--mono,monospace); }
  .sup-msg .who i { font-style:normal; color:var(--faint,#8B94A8); font-weight:400; }
  .sup-ctx { margin:0 0 10px; }
  .sup-ctx summary { cursor:pointer; font-size:12px; color:var(--slate,#5B6880); }
  .sup-ctx pre { margin:6px 0 0; padding:9px 11px; background:var(--sunk,#F4F2EC);
                 border:1px solid var(--line,#E4E2D9); border-radius:6px;
                 font-family:var(--mono,monospace); font-size:11.5px; white-space:pre-wrap; }
  .sup-job { margin:0 0 12px; padding:9px 11px; background:var(--sunk,#F4F2EC);
             border:1px solid var(--line,#E4E2D9); border-radius:6px; font-size:13px; }
  .sup-job-facts { display:grid; grid-template-columns:max-content 1fr; gap:3px 12px; margin:0 0 6px; }
  .sup-job-facts dt { color:var(--slate,#5B6880); font-size:12px; }
  .sup-job-facts dd { margin:0; overflow-wrap:anywhere; }
  .sup-job p { margin:4px 0 0; }
  .sup-reply { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
  .sup-reply textarea { width:100%; min-height:74px; resize:vertical; padding:9px 11px;
                        border:1px solid var(--line,#E4E2D9); border-radius:7px;
                        background:var(--card,#fff); color:inherit; font:inherit;
                        font-size:13px; }
  .sup-reply .hint { margin:0; font-size:12px; color:var(--faint,#8B94A8); }
  .sup-acts { display:flex; justify-content:flex-end; }

  .sup-aside { display:flex; flex-direction:column; gap:8px; font-size:12.5px; }
  .sup-aside h4 { margin:0; font-size:11px; font-family:var(--mono,monospace);
                  letter-spacing:.06em; text-transform:uppercase;
                  color:var(--faint,#8B94A8); }
  .sup-aside label { display:flex; flex-direction:column; gap:3px;
                     color:var(--slate,#5B6880); }
  .sup-aside input, .sup-aside select { padding:6px 9px; border:1px solid var(--line,#E4E2D9);
                                        border-radius:6px; background:var(--card,#fff);
                                        color:inherit; font:inherit; font-size:12.5px; }
  /* Files under one message: inside the bubble, so it is unambiguous which reply carried
     them. Bordered off the text above rather than spaced away from it -- a gap alone reads
     as a separate message at this bubble width. */
  .sup-msg-files { display:flex; flex-direction:column; gap:4px; margin-top:7px;
                   padding-top:7px; border-top:1px solid rgba(127,127,127,.25); }
  .sup-msg-files a { font-size:12px; overflow-wrap:anywhere; }
  .sup-msg-files a span { color:var(--faint,#8B94A8); font-family:var(--mono,monospace);
                          font-size:10.5px; }
  .sup-facts { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; margin:0 0 4px;
               align-items:baseline; }
  .sup-facts dt { color:var(--faint,#8B94A8); font-size:11px; font-family:var(--mono,monospace);
                  letter-spacing:.04em; text-transform:uppercase; }
  .sup-facts dd { margin:0; font-family:var(--mono,monospace); font-size:12px; }
  .sup-files { display:flex; flex-direction:column; gap:5px; margin-bottom:6px; }
  .sup-files a { font-size:12.5px; overflow-wrap:anywhere; }
  .sup-files a span { color:var(--faint,#8B94A8); font-family:var(--mono,monospace);
                      font-size:11px; }

  #sup-tab-count { font-family:var(--mono,monospace); font-size:11px; margin-left:6px;
                   background:var(--down,#B3382C); color:var(--on-accent,#FAFAF6);
                   border-radius:9px; padding:1px 6px; }
  #sup-tab-count:empty { display:none; }

  @media (max-width: 900px) { .sup-card-body { grid-template-columns:1fr; } }
  /* ---- the reader: the User column, the card on a ticket, their own page ----
     Issues 157 and 158 — the numbers are bare because a `#` in this block reads as a
     hex colour to the palette test, which checks every line of the stylesheet.
     One vocabulary across all three, so a tier reads the same on a card
     as it does on a page, and a name is a link everywhere it appears. */
  .sup-user-link { color:var(--navy,#1F3A6E); text-decoration:none;
                   border-bottom:1px solid transparent; }
  .sup-user-link:hover { border-bottom-color:currentColor; }
  .sup-user-none { color:var(--faint,#8B94A8); }

  /* THE TIER, AS A PILL, because it is read at a glance and never typed. Free is quiet and
     paid is not: the whole point of having it on screen is that "it does not work" from an
     account with no entitlement is usually the product working as designed. */
  .sup-tier { display:inline-block; font-family:var(--mono,monospace); font-size:10.5px;
              text-transform:uppercase; letter-spacing:.06em; padding:1px 7px;
              border-radius:9px; border:1px solid var(--line,#E4E2D9);
              color:var(--faint,#8B94A8); vertical-align:middle; }
  .sup-tier.t-pro, .sup-tier.t-plus, .sup-tier.t-paid {
    color:var(--on-accent,#FAFAF6); background:var(--navy,#1F3A6E);
    border-color:var(--navy,#1F3A6E); }

  .sup-user-card { border:1px solid var(--line,#E4E2D9); border-radius:8px; padding:9px 11px;
                   display:flex; flex-direction:column; gap:3px; }
  .sup-user-name { font-weight:600; font-size:13.5px; display:flex; align-items:center;
                   gap:6px; flex-wrap:wrap; }
  .sup-user-sub { color:var(--slate,#5B6880); font-size:12px; overflow-wrap:anywhere; }
  .sup-user-card .sup-user-link { margin-top:4px; font-size:12.5px; }
  .sup-user-more { margin-top:5px; }
  .sup-user-more summary { cursor:pointer; font-size:12px; color:var(--slate,#5B6880); }
  .sup-user-more > div { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
  .sup-user-tkt { display:block; font-size:12px; color:var(--ink,#16213A);
                  text-decoration:none; overflow-wrap:anywhere; }
  .sup-user-tkt:hover { text-decoration:underline; }

  /* THE PAGE. It replaces the queue rather than sitting beside it, so it gets the width and
     the facts can be two columns without crowding. */
  .sup-user-page { max-width:760px; }
  .sup-back-btn { background:none; border:none; padding:4px 0; margin:0 0 10px;
                  font-size:13px; color:var(--navy,#1F3A6E); cursor:pointer; }
  .sup-back-btn:hover { text-decoration:underline; }
  .sup-user-head { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
                   margin-bottom:10px; }
  .sup-user-head h3 { margin:0; font-size:19px; }
  .sup-user-note { color:var(--slate,#5B6880); font-size:13px; max-width:60ch;
                   margin:0 0 12px; }
  .sup-user-facts { grid-template-columns:auto 1fr auto 1fr; gap:6px 12px; margin:0 0 20px; }
  .sup-user-page h4 { margin:0 0 8px; font-size:11px; font-family:var(--mono,monospace);
                      text-transform:uppercase; letter-spacing:.08em;
                      color:var(--faint,#8B94A8); }
  @media (max-width: 720px) { .sup-user-facts { grid-template-columns:auto 1fr; } }
  /* THE QUEUE'S 900px FLOOR IS FOR THE QUEUE'S TEN COLUMNS. This list has five and sits in a
     narrower page, where that floor clipped the last column and asked the operator to scroll
     sideways to read a date that had room to spare. */
  .sup-user-page table.sup-tbl { min-width:0; }

  /* ---- one account's activity, issues 601 and 602 ---- */
  .sup-act { margin:0 0 16px; border:1px solid var(--line,#E4E2D9); border-radius:9px;
             padding:10px 14px; }
  .sup-act > summary { cursor:pointer; font-weight:600; }
  .sup-act-hint { font-weight:400; color:var(--faint,#8B94A8); font-size:12.5px;
                  margin-left:6px; }
  .sup-act-form { margin:12px 0; }
  .sup-act-form label { display:flex; align-items:center; gap:6px; font-size:12px;
                        color:var(--slate,#5B6880); white-space:nowrap; }
  .sup-act-sec { margin:14px 0 0; }
  .sup-act-sec > summary { cursor:pointer; margin:0 0 8px; font-size:11px;
                           font-family:var(--mono,monospace); text-transform:uppercase;
                           letter-spacing:.08em; color:var(--faint,#8B94A8); }
  /* NO INNER SCROLL HERE: a row opens its whole story beneath itself (issue 607), and a
     third of the viewport is not room to read one in. The page scrolls instead. */
  .sup-act .sup-scroll { max-height:none; overflow:visible; }
  /* THE HEADER FOLLOWS THE PAGE. With no inner scroll, a header sticky to its own box
     scrolled away with the rows and left columns nobody could name. `overflow:visible` makes
     the page the sticky container, so the names stay at the top while a long timeline scrolls.
     A panel's own tables stay put, or two headers would stack. */
  .sup-act table.sup-tbl thead th { top:0; z-index:2; }
  .sup-act-panel table.sup-tbl thead th { position:static; }
  .sup-act-where { display:block; font-family:var(--mono,monospace); font-size:11px;
                   color:var(--faint,#8B94A8); }
  .sup-act table.sup-tbl { min-width:0; }
  .sup-act table.sup-tbl tbody tr { cursor:default; }
  .sup-act table.sup-tbl tbody tr[data-sup-act-row] { cursor:pointer; }
  .sup-act td.sup-act-wrap { white-space:normal; min-width:200px; max-width:420px; }
  .sup-act-run { font-family:var(--mono,monospace); font-size:11.5px; background:none;
                 border:1px solid var(--line,#E4E2D9); border-radius:4px; padding:1px 5px;
                 color:var(--navy,#1F3A6E); cursor:pointer; }
  /* WHAT YOU CLICKED, AND WHAT IT OPENED, must be obvious (Alex, 27 Sep: "very hard to
     read and see when I click"). The row turns solid with a bar at its edge; the panel is a
     card of its own — raised, bordered, inset, on the same bar — so it cannot be read as
     more rows of the table. */
  .sup-act table.sup-tbl tbody tr.on { background:var(--navy-soft,#D8E8F5); }
  .sup-act table.sup-tbl tbody tr.on > td:first-child { box-shadow:inset 4px 0 0 var(--navy,#1C4D80); }
  .sup-act table.sup-tbl tbody tr.on > td { font-weight:600; }
  .sup-act tr.sup-act-detail-row > td { background:var(--navy-soft,#D8E8F5); white-space:normal;
                                        padding:0 14px 16px 14px; cursor:default;
                                        box-shadow:inset 4px 0 0 var(--navy,#1C4D80); }
  .sup-act tr.sup-act-detail-row:hover { background:none; }
  .sup-act-panel { background:var(--card,#FFFFFF); border:1px solid var(--line,#C8D8E6);
                   border-radius:10px; padding:16px 20px 18px; max-width:1100px;
                   box-shadow:0 6px 18px rgba(16,33,49,.12); font-size:14px;
                   color:var(--ink,#102131); }
  .sup-act-panel h5 { margin:18px 0 8px; padding-bottom:5px; font-size:13px; font-weight:700;
                      color:var(--ink,#102131); border-bottom:1px solid var(--line,#C8D8E6); }
  .sup-act-panel h5:first-child { margin-top:0; }
  .sup-act-panel .sup-facts { grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr);
                              gap:7px 18px; margin:0 0 4px; }
  .sup-act-panel .sup-facts dt { font-family:inherit; font-size:12.5px; text-transform:none;
                                 letter-spacing:0; color:var(--slate,#5B6880); }
  .sup-act-panel .sup-facts dd { font-family:inherit; font-size:14px; color:var(--ink,#102131); }
  .sup-act-panel .sup-user-note { color:var(--slate,#5B6880); font-size:13.5px; }
  .sup-act-panel .sup-act-steps { font-size:14px; line-height:1.55; }
  @media (max-width: 720px) {
    .sup-act-panel .sup-facts { grid-template-columns:max-content minmax(0,1fr); } }
  .sup-act-panel table.sup-tbl tbody tr { cursor:default; }
  .sup-act-steps { margin:0; padding-left:20px; font-size:13px; }
  .sup-act-steps li { margin:2px 0; }
  .sup-act-cmd { font-family:var(--mono,monospace); font-size:12px; user-select:all;
                 background:var(--sunk,#F4F2EC); padding:3px 7px; border-radius:4px; }
  .sup-act-tip { color:var(--slate,#5B6880); font-size:12.5px; margin:6px 0 0; }
  .sup-act-qwrap { position:relative; flex:1 1 320px; min-width:0; display:flex; }
  .sup-act-qwrap input { flex:1; min-width:0; }
  .sup-act-menu { position:absolute; top:100%; left:0; right:0; z-index:5; margin-top:4px;
                  max-height:320px; overflow:auto; background:var(--paper,#FAFAF6);
                  border:1px solid var(--line,#E4E2D9); border-radius:8px;
                  box-shadow:0 8px 24px rgba(0,0,0,.12); }
  .sup-act-menu button { display:flex; gap:10px; align-items:baseline; width:100%;
                         text-align:left; background:none; border:none;
                         border-bottom:1px solid var(--line,#E4E2D9); padding:7px 10px;
                         font-size:13px; color:var(--ink,#16213A); cursor:pointer; }
  .sup-act-menu button:hover, .sup-act-menu button:focus { background:var(--sunk,#F4F2EC); }
  .sup-act-menu .mono { font-family:var(--mono,monospace); font-size:11.5px;
                        color:var(--faint,#8B94A8); }
  .sup-act-menu .sup-act-menu-note { padding:7px 10px; font-size:12px;
                                     color:var(--faint,#8B94A8); }
  .sup-act-up { color:var(--up,#2F6F52); }
  .sup-act-down { color:var(--down,#B3382C); }
  .sup-act-pick { font-weight:600; }
  #sup-act-filter { display:block; width:100%; margin:6px 0 0; }

/* Host adaptation and bounded account history. */
#tab-support { min-width:0; }
#tab-support .toolbar { flex-wrap:wrap; }
#tab-support .toolbar > * { min-width:0; }
#tab-support .toolbar .count { white-space:normal; overflow-wrap:anywhere; }
#tab-support .toolbar > input[type=search] { flex:1 1 240px; }
#tab-support .toolbar select { width:auto; }
#tab-support nav.tabs.sub { display:flex; flex-wrap:wrap; gap:3px; }
#tab-support nav.tabs.sub button[aria-pressed=true] { background:var(--navy-soft); color:var(--navy); border-color:var(--navy); }
#tab-support .sup-ticket-link, #tab-support .sup-user-link { background:none; border:0; padding:0; text-align:left; color:var(--navy); white-space:normal; }
#tab-support .sup-ticket-link { font-weight:600; }
#tab-support .sup-card-head { flex-wrap:wrap; }
#tab-support .sup-card-head h3 { overflow-wrap:anywhere; flex:1 1 250px; }
#tab-support .sup-card-head .sup-who { flex:1 1 150px; }
#tab-support .sup-close { margin-left:auto; }
#tab-support .sup-card-body { grid-template-columns:minmax(0,1fr) 270px; }
#tab-support .sup-aside input, #tab-support .sup-aside select { width:100%; min-width:0; }
#tab-support .sup-aside input[type=number] { width:100%; }
#tab-support .sup-aside label { display:flex; flex-direction:column; }
#tab-support .sup-facts dd { min-width:0; overflow-wrap:anywhere; }
#tab-support .sup-msg { white-space:normal; }
#tab-support .sup-msg > div { white-space:pre-wrap; }
#tab-support .sup-msg .who { flex-wrap:wrap; }
#tab-support .sup-msg-files, #tab-support .sup-files { overflow-wrap:anywhere; }
#tab-support pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:28rem; overflow:auto; }
#tab-support .support-table { overflow:auto; max-width:100%; }
#tab-support .support-events { overflow:visible; }
#tab-support .support-events table { min-width:620px; }
#tab-support .support-events td { max-width:34rem; overflow-wrap:anywhere; white-space:normal; }
#tab-support .sup-history-section > input { margin:8px 0; }
#tab-support .sup-act .sup-act-detail-row td { white-space:normal; }
#tab-support .sup-act .sup-act-panel { max-width:none; }
#tab-support .sup-pager { justify-content:flex-end; margin:8px 0; font-size:12px; }
#tab-support .sup-act-qwrap { flex:1 1 300px; }
#tab-support .sup-act-qwrap > label { width:100%; }
#tab-support .sup-act-form label { display:flex; flex-direction:column; align-items:stretch; white-space:normal; }
#tab-support .sup-act-form input[type=datetime-local] { max-width:100%; background:var(--card); color:var(--ink); padding:8px; border:1px solid var(--line); border-radius:6px; }
#tab-support .sup-audit-toggle { display:flex; align-items:center; gap:6px; margin:10px 0; font-size:12px; color:var(--slate); }
#tab-support #sup-user table { min-width:620px; }
#tab-support .sup-user-note { max-width:90ch; }
@media (max-width:900px) { #tab-support .sup-card-body { grid-template-columns:1fr; } }
@media (max-width:720px) {
  #tab-support .sup-facts, #tab-support .sup-act-panel .sup-facts { grid-template-columns:auto minmax(0,1fr); }
  #tab-support .sup-msg { max-width:95%; }
  #tab-support .sup-act { padding:10px; }
}

#tab-support .support-events .support-table{max-height:60vh;overflow:auto}
#tab-support .sup-act tr:has([data-expand]){cursor:pointer}
/* Prompt library and picker share compact names; full text opens only on request. */
#prompt-view, #prompt-status, #style-view { width:auto; }
.library-table { width:100%; min-width:560px; table-layout:fixed; }
.library-table td { vertical-align:top; white-space:normal; overflow-wrap:anywhere; }
.library-table th:first-child { width:44%; }
.library-table th:last-child { width:140px; }
#prompt-library .library-table { min-width:680px; }
#prompt-library .library-table th:last-child { width:260px; }
.library-table .actions { white-space:nowrap; }
.library-table .actions button { flex-shrink:0; }
#style-library .library-table { min-width:820px; }
#style-library .library-table th:first-child { width:22%; }
#style-library .library-table th:nth-child(2) { width:18%; }
#style-library .library-table th:nth-child(3) { width:106px; }
#style-library .library-table th:last-child { width:220px; }
.library-note { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.library-editor { width:min(760px, calc(100vw - 32px)); max-width:none; max-height:90vh; overflow:auto; }
.library-editor form { max-width:none; }
.library-detail { position:fixed; inset:0 0 0 auto; margin:0; width:min(700px,100vw);
                  max-width:100vw; height:100dvh; max-height:100dvh; overflow:auto; border-radius:0; }
.library-detail pre { overflow-wrap:anywhere; }
.prompt-selection { min-width:0; width:100%; text-align:left; overflow-wrap:anywhere; }
.prompt-picker-results { margin-top:12px; max-height:55vh; overflow:auto; display:grid; gap:6px; }
.prompt-picker-option { width:100%; text-align:left; display:grid; gap:4px; padding:10px; overflow-wrap:anywhere; }

/* Optional display examples in the style library and editor. */
.style-example-thumb { display:block; width:84px; height:64px; object-fit:cover; border-radius:6px; }
.style-example-preview { display:block; width:auto; max-width:100%; max-height:240px;
                         object-fit:contain; border:1px solid var(--line); border-radius:6px; }
#style-form label { margin:0; }
#style-form .help { margin:0; }
#style-form textarea { min-height:150px; }
#style-form .style-example-preview { max-height:180px; }

.user-override-note { display:block; margin-top:4px; color:var(--navy); font-weight:600; }