/* o9 UT Agent - enterprise UI. A navy app bar, flat white panels on a cool grey page, one signal blue
   for actions, status colours from the reference status palette (always with an icon and a label).
   The flow strip with row counts per stage is the one bold element. */
:root {
  --bar: #102a43; --bar-ink: #e8eef5; --bar-muted: #9fb3c8;
  --page: #f3f5f8; --panel: #ffffff; --line: #d9dee5; --line-soft: #e8ecf1;
  --ink: #1b2430; --muted: #556270; --faint: #7b8794;
  --accent: #1f5fbf; --accent-ink: #ffffff; --accent-soft: #e6effb;
  --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b; --neutral: #8a96a3; --info: #4a7aa8;
  --good-ink: #0f6a20; --warning-ink: #855c00; --serious-ink: #9a4318; --critical-ink: #a62525;
  --radius: 4px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bar: #0b1d2e; --bar-ink: #e2e9f1; --bar-muted: #8ea2b8;
          --page: #0f1720; --panel: #16212c; --line: #2a3747; --line-soft: #213040;
          --ink: #e3e9ef; --muted: #a2b0be; --faint: #7d8c9b;
          --accent: #6ea0ec; --accent-ink: #0b1622; --accent-soft: #1c2c40;
          --neutral: #7d8c9b; --info: #79a6d2;
          --good-ink: #5ccf6e; --warning-ink: #f5c04a; --serious-ink: #f29a76; --critical-ink: #f07a72; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--ink); font: 14px/1.5 var(--font); font-variant-numeric: tabular-nums; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
main:focus { outline: none; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 22px; font-weight: 600; } h2 { font-size: 15px; font-weight: 600; } h3 { font-size: 14px; font-weight: 600; }

/* app bar */
.appbar { position: sticky; top: 0; z-index: 5; height: 52px; display: flex; align-items: center; gap: 18px;
          padding: 0 18px; background: var(--bar); color: var(--bar-ink); }
.product { color: var(--bar-ink); font-weight: 700; font-size: 16px; letter-spacing: .01em; }
.switcher { display: flex; align-items: center; gap: 8px; color: var(--bar-muted); font-size: 13px; }
.switcher select { font: inherit; color: var(--bar-ink); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
                   border-radius: var(--radius); padding: 5px 8px; }
.switcher select option { color: #1b2430; }
.search { flex: 1; max-width: 420px; }
.search input { width: 100%; font: inherit; padding: 7px 10px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.18);
                background: rgba(255,255,255,.08); color: var(--bar-ink); }
.search input::placeholder { color: var(--bar-muted); }
.waiting { margin-left: auto; color: var(--bar-ink); font-size: 13px; }
.waiting span { display: inline-block; min-width: 22px; padding: 1px 7px; margin-left: 4px; border-radius: 10px; text-align: center;
                background: var(--warning); color: #3a2a00; font-weight: 700; }
.waiting span[data-n="0"] { background: rgba(255,255,255,.18); color: var(--bar-ink); }
.chat-toggle { font: inherit; font-weight: 600; color: var(--bar-ink); background: transparent; border: 1px solid rgba(255,255,255,.3);
               border-radius: var(--radius); padding: 5px 12px; cursor: pointer; }

/* shell */
.shell { display: grid; grid-template-columns: 216px minmax(0, 1fr) var(--chat-w, 360px); min-height: calc(100vh - 52px); }
.shell.no-chat { grid-template-columns: 216px minmax(0, 1fr); } .shell.no-chat .chat { display: none; }
.sidenav { background: var(--panel); border-right: 1px solid var(--line); padding: 14px 10px; }
.sidenav .tenant-name { padding: 4px 10px 10px; font-weight: 700; }
.sidenav .tenant-name small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.sidenav a { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: var(--radius);
             color: var(--ink); margin-bottom: 2px; }
.sidenav a:hover { background: var(--page); text-decoration: none; }
.sidenav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.count { font-size: 12px; color: var(--muted); }
main { padding: 20px 26px 48px; min-width: 0; }
.chat { background: var(--panel); border-left: 1px solid var(--line); padding: 16px; position: sticky; top: 52px;
        height: calc(100vh - 52px); display: flex; flex-direction: column; }
.chat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.soon { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; }
.chat-note { color: var(--muted); font-size: 13px; }
.chat-input { margin-top: auto; display: grid; gap: 8px; }
.chat-input textarea { min-height: 70px; resize: vertical; font: inherit; padding: 8px; border: 1px solid var(--line);
                       border-radius: var(--radius); background: var(--page); color: var(--muted); }

/* chat */
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 10px; }
.msg { padding: 8px 10px; border-radius: var(--radius); max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.msg.user { align-self: flex-end; background: var(--accent-soft); color: var(--ink); }
.msg.assistant { background: var(--page); border: 1px solid var(--line-soft); }
.msg.thinking { color: var(--muted); font-style: italic; }
.msg .ctx { display: block; font-size: 11px; color: var(--faint); margin-top: 3px; }
.card { border: 1px solid var(--line); border-left: 4px solid var(--warning); border-radius: var(--radius); padding: 8px 10px; background: var(--panel); font-size: 13px; }
.card.closed { border-left-color: var(--line); opacity: .7; }
.card .what { font-weight: 600; } .card .why { color: var(--muted); margin: 4px 0; }
.card .actions { margin-top: 6px; } .card button { padding: 4px 10px; font-size: 12px; }
.job { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin: 6px 0; font-size: 12px; background: var(--page); }
.job pre { max-height: 120px; overflow: auto; margin: 6px 0 0; }
.chat-input textarea { color: var(--ink); background: var(--panel); }

/* page header */
.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 4px; } .crumbs a { color: var(--muted); }
.pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 6px; color: var(--muted); font-size: 13px; }
.facts b { color: var(--ink); font-weight: 600; }

/* panels, tiles, tables */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; }
.panel > header { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
.panel > header .count { margin-left: 8px; }
.panel .body { padding: 12px 14px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius);
         background: var(--panel); margin-bottom: 16px; }
.tile { padding: 12px 14px; border-left: 1px solid var(--line-soft); } .tile:first-child { border-left: 0; }
.tile .n { font-size: 26px; font-weight: 600; line-height: 1.1; }
.tile .l { color: var(--muted); font-size: 12px; }
.tile .sub { font-size: 12px; color: var(--faint); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line);
     background: var(--panel); white-space: nowrap; }
th button { all: unset; cursor: pointer; } th button:focus-visible { outline: 2px solid var(--accent); }
td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr.go { cursor: pointer; } tr.go:hover td { background: var(--page); }
td.muted, .muted { color: var(--muted); } .small { font-size: 12px; }
.num { text-align: right; }
code, pre { font-family: var(--mono); font-size: 12px; }
pre { white-space: pre-wrap; background: var(--page); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 8px; margin: 6px 0 0; }
details summary { cursor: pointer; color: var(--accent); font-size: 12px; }

/* status: icon + label, never colour alone */
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--neutral);
                  color: #fff; font-size: 10px; line-height: 14px; text-align: center; }
.status.s-good::before { content: "\2713"; background: var(--good); }
.status.s-warning::before { content: "!"; background: var(--warning); color: #3a2a00; }
.status.s-serious::before { content: "?"; background: var(--serious); }
.status.s-critical::before { content: "\00d7"; background: var(--critical); }
.status.s-neutral::before { content: "\2013"; background: var(--neutral); }
.status.s-good { color: var(--good-ink); } .status.s-warning { color: var(--warning-ink); }
.status.s-serious { color: var(--serious-ink); } .status.s-critical { color: var(--critical-ink); } .status.s-neutral { color: var(--muted); }

/* verdict banner on a mission */
.verdict { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line);
           border-left: 6px solid var(--neutral); border-radius: var(--radius); margin-bottom: 16px; }
.verdict .status { font-size: 22px; } .verdict .status::before { width: 22px; height: 22px; line-height: 22px; font-size: 14px; }
.verdict.s-good { border-left-color: var(--good); } .verdict.s-warning { border-left-color: var(--warning); }
.verdict.s-serious { border-left-color: var(--serious); } .verdict.s-critical { border-left-color: var(--critical); }
.verdict .note { color: var(--muted); font-size: 13px; }

/* the flow strip: Source -> IN -> ODM -> LSU -> file -> Live Server, with rows per stage */
.flow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--panel); border: 1px solid var(--line);
        border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; }
.stage { position: relative; padding: 12px 14px 12px 24px; border-top: 4px solid var(--line); min-height: 104px; }
.stage + .stage::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 1px; background: var(--line-soft); }
.stage + .stage::after { content: ""; position: absolute; left: -6px; top: calc(50% - 6px); width: 10px; height: 10px;
                         border-top: 2px solid var(--faint); border-right: 2px solid var(--faint); transform: rotate(45deg); background: var(--panel); }
.stage .name { font-weight: 700; } .stage .table { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.stage .rows { font-size: 24px; font-weight: 600; margin-top: 4px; line-height: 1.1; }
.stage .rows small { font-size: 12px; font-weight: 400; color: var(--muted); }
.stage .rows.drop { color: var(--critical-ink); }
.stage .marks { display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.stage.s-good { border-top-color: var(--good); } .stage.s-warning { border-top-color: var(--warning); }
.stage.s-serious { border-top-color: var(--serious); } .stage.s-critical { border-top-color: var(--critical); }
.mark { width: 10px; height: 10px; border-radius: 2px; background: var(--neutral); }
.mark.s-good { background: var(--good); } .mark.s-warning { background: var(--warning); }
.mark.s-serious { background: var(--serious); } .mark.s-critical { background: var(--critical); }

/* mix bar: share of check statuses */
.mix { display: flex; gap: 2px; height: 8px; width: 120px; border-radius: 4px; overflow: hidden; background: var(--line-soft); }
.mix span { display: block; height: 100%; } .mix .s-good { background: var(--good); } .mix .s-warning { background: var(--warning); }
.mix .s-serious { background: var(--serious); } .mix .s-critical { background: var(--critical); } .mix .s-neutral { background: var(--neutral); }

/* chart */
.chart { position: relative; }
.chart svg { display: block; width: 100%; max-width: 680px; height: auto; overflow: visible; }
.chart .axis { stroke: var(--line); } .chart text { fill: var(--muted); font-size: 11px; }
.chart .seg-good { fill: var(--good); } .chart .seg-warning { fill: var(--warning); } .chart .seg-serious { fill: var(--serious); }
.chart .seg-critical { fill: var(--critical); } .chart .seg-neutral { fill: var(--neutral); }
.chart rect.hit { fill: transparent; cursor: default; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--panel); font-size: 12px; padding: 6px 8px;
       border-radius: var(--radius); white-space: nowrap; transform: translate(-50%, -110%); }

/* tabs, filters, lists */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs a { padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; text-decoration: none; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.toolbar input, .toolbar select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius);
                                  background: var(--panel); color: var(--ink); }
.toolbar input { min-width: 220px; }
.list .row { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.list .row:last-child { border-bottom: 0; }
.list .row p { margin: 4px 0; max-width: 90ch; }
.reading p { margin: 0 0 .7em; max-width: 78ch; }
.activity li { list-style: none; padding: 7px 0; border-bottom: 1px solid var(--line-soft); display: flex; gap: 10px; }
.activity { margin: 0; padding: 0; } .activity li:last-child { border-bottom: 0; }
.activity .when { color: var(--muted); font-size: 12px; min-width: 120px; }
.kind { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; height: 18px; }
.actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
td.actions { display: table-cell; margin-top: 0; white-space: nowrap; }   /* flex on a cell breaks the row's alignment */
td.actions > * + * { margin-left: 6px; }
button { font: inherit; font-weight: 600; padding: 6px 14px; border-radius: var(--radius); border: 1px solid var(--accent);
         background: var(--accent); color: var(--accent-ink); cursor: pointer; }
button.secondary { background: transparent; color: var(--accent); }
a.button { display: inline-block; font-weight: 600; padding: 6px 14px; border-radius: var(--radius); border: 1px solid var(--accent);
           background: var(--accent); color: #fff; text-decoration: none; }
button:disabled { opacity: .45; cursor: not-allowed; }
.empty { color: var(--muted); padding: 14px; }

dialog { border: 1px solid var(--line); border-radius: 6px; padding: 20px; max-width: 520px; width: 92vw; background: var(--panel); color: var(--ink); }
dialog.wide { max-width: 760px; }
fieldset.checks { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 6px 10px; margin: 0 0 10px; }
fieldset.checks legend { font-weight: 600; padding: 0 4px; }
#run-checks { max-height: 220px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.small-btn { padding: 1px 8px; font-size: 12px; font-weight: 500; }
a.button.small-btn { padding: 1px 8px; font-size: 12px; font-weight: 500; line-height: inherit; }   /* a link sized like the button beside it */
td.actions > * { vertical-align: middle; }
.steps { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.steps li { padding: 6px 12px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.steps li code { color: var(--muted); font-size: 12px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 12px; }
.gallery figure { margin: 0; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; background: var(--page); }
.gallery img { width: 100%; display: block; cursor: zoom-in; }
.gallery figcaption { font-size: 12px; padding: 4px 8px; }
.phase { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; padding: 0; list-style: none; }
.phase li { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }
.phase li.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.phase li.done { color: var(--good-ink); }
.pagehead .head-actions { display: flex; gap: 8px; }
.files { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.diff { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; background: var(--page); border: 1px solid var(--line-soft);
        border-radius: var(--radius); padding: 8px; max-height: 260px; overflow: auto; }
.diff .add { color: var(--good-ink); } .diff .del { color: var(--critical-ink); }
dialog::backdrop { background: rgba(8, 18, 30, .5); }
dialog label { display: block; margin: 10px 0; font-weight: 600; }
dialog input:not([type=checkbox]):not([type=radio]), dialog textarea { display: block; width: 100%; margin-top: 4px; font: inherit; padding: 7px;
         border: 1px solid var(--line); border-radius: var(--radius); background: var(--page); color: var(--ink); }
dialog .confirm { font-weight: 400; }
.buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.error { color: var(--critical-ink); min-height: 1.2em; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--panel); padding: 10px 16px;
         border-radius: var(--radius); z-index: 10; }

@media (max-width: 1280px) { .shell { grid-template-columns: 200px minmax(0, 1fr); } .chat { display: none; } .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .sidenav { border-right: 0; border-bottom: 1px solid var(--line); }
  .grid2 { grid-template-columns: 1fr; } .flow { grid-auto-flow: row; } .search { display: none; } .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.button.secondary-link { background: transparent; color: var(--accent); }
.pagehead .head-actions a.button, .actions a.button { margin-left: 0; }

/* ---- live flow diagrams (phase 10) ---- */
.flowwrap { overflow: auto; padding: 12px; max-width: 100%; scrollbar-color: var(--line) transparent; }
main, main .panel { min-width: 0; }
.flowsvg { display: block; min-width: 100%; }
.flowsvg .node rect { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; rx: 6; }
.flowsvg .node.own rect { stroke: var(--ink); }
.flowsvg .node text { fill: var(--ink); font: 12px var(--font); }
.flowsvg .node .lyr { fill: var(--muted); font-size: 10.5px; text-transform: none; }
.flowsvg .node .st { font-size: 10.5px; fill: var(--muted); }
.flowsvg .node.s-success rect { stroke: var(--good); }
.flowsvg .node.s-failed rect { stroke: var(--critical); stroke-width: 2.5; }
.flowsvg .node.s-failed .st { fill: var(--critical-ink); font-weight: 600; }
.flowsvg .node.s-waiting rect { stroke-dasharray: 5 4; }
.flowsvg .node.s-running rect { stroke: var(--accent); stroke-width: 2.5; animation: o9pulse 1.3s ease-in-out infinite; }
.flowsvg .node.s-running .st { fill: var(--accent); font-weight: 600; }
.flowsvg .node.faded { opacity: .28; }
.flowsvg .edge { color: var(--faint); }
.flowsvg .edge.running { color: var(--accent); }
.flowsvg .edge path { fill: none; stroke: var(--faint); stroke-width: 1.5; }
.flowsvg .edge text { fill: var(--muted); font: 10.5px var(--font); }
.flowsvg .edge.running path { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 7 6; animation: o9dash .9s linear infinite; }
.flowsvg .edge.faded { opacity: .2; }
.flowsvg.testing { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; animation: o9glow 2s ease-in-out infinite; }
@keyframes o9pulse { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 7px var(--accent)); } }
@keyframes o9dash { to { stroke-dashoffset: -26; } }
@keyframes o9glow { 0%, 100% { outline-color: var(--accent); } 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .flowsvg .node.s-running rect, .flowsvg .edge.running path, .flowsvg.testing { animation: none; }
}
.flowlegend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 0 12px 10px; }
.flowlegend i { display: inline-block; width: 12px; height: 12px; border: 2px solid; border-radius: 3px; margin-right: 4px; vertical-align: -2px; }
tr.sel td { background: var(--accent-soft); }
.flowsvg .node.hl rect { stroke-width: 2.5; }
#batch-flow .flowwrap { max-height: 70vh; }

/* settings: the route choice */
.route-opt { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid var(--line, #ddd); cursor: pointer; }
.route-opt input { margin-top: .3rem; }
.route-opt .status { margin-left: .5rem; }
#key-form input[type=password] { width: min(28rem, 100%); }

/* the shared server (phase 11a): who is signed in; what a role may not do is hidden (the server checks anyway) */
.sidenav .me { margin-top: 18px; padding: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.sidenav .me small { display: block; color: var(--muted, #8a94a3); } .sidenav .me a { display: inline; padding: 0; }
body.shared label:has(> input[name=by]) { display: none; }
body[data-level=viewer] :is([data-run], [data-rerun], [data-decide], [data-report], [data-sample-predict], [data-sample-run], [data-tenant-refresh], [data-diagnose], [data-stop], [data-card-confirm], a[href$="/simulate"], #chat-form, #sample-form),
body[data-level=none] :is([data-run], [data-rerun], [data-decide], [data-report], [data-sample-predict], [data-sample-run], [data-tenant-refresh], [data-diagnose], [data-stop], [data-card-confirm], a[href$="/simulate"], #chat-form, #sample-form),
body[data-level=tester] [data-sample-run], body.shared:not(.admin) :is(#key-form, #route-form .actions, #fav-form) { display: none !important; }

/* the access rules dialog (D-122) */
#pol { max-width: 40rem; } #pol fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 10px 0; padding: 6px 12px; }
#pol fieldset[disabled] { opacity: .5; } #pol label { display: block; margin: 6px 0; } #pol .route-opt { display: flex; }
#pol input:is([type=radio], [type=checkbox]) { width: auto; flex: none; margin: 3px 8px 0 0; }
#pol-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 12px; max-height: 13rem; overflow: auto; }
#pol-groups legend { grid-column: 1 / -1; } #pol-groups label { margin: 3px 0; display: flex; align-items: flex-start; }
body.shared:not(.admin) [data-policy-edit] { display: none; }

/* forms inside panels (Settings, People): padded like .body, controls in the page's own style */
.panel > form, .panel > p { padding: 12px 14px; margin: 0; }
.panel > p + form, .panel > form + p { padding-top: 0; }
.panel > form > p { margin: 0 0 10px; }
.panel form label { display: inline-flex; align-items: center; gap: 8px; margin: 0 16px 10px 0; font-weight: 600; }
.panel form label.route-opt { display: flex; font-weight: 400; margin: 0; }
.panel form label.confirm { font-weight: 400; }
.panel form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select) { font: inherit; font-weight: 400; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--page); color: var(--ink); min-width: 12rem; }
.panel form .actions { margin-top: 4px; }
#fav-form { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-bottom: 4px; } #fav-form label { margin: 0; }
#route-form .route-opt { padding: 10px 0; } #route-form .route-opt:first-child { padding-top: 0; }

.panel form label { white-space: nowrap; }
.panel form label.route-opt { align-items: flex-start; white-space: normal; } .panel form label.route-opt input { margin-top: 4px; }
#key-form label { display: flex; } #key-form input[type=password] { width: min(28rem, 60vw); }

/* the chat pane can be dragged wider or narrower; the width is remembered on this PC */
.chat-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; }
.chat-resize:hover, .chat-resize:focus-visible, body.resizing .chat-resize { background: var(--accent); opacity: .35; outline: none; }
body.resizing { cursor: col-resize; user-select: none; }

/* closing a job notice under the chat */
.chat .job { position: relative; padding-right: 28px; }
.job-close { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; line-height: 20px; font-size: 16px;
  background: transparent; color: var(--muted, #8a94a3); border: 1px solid transparent; border-radius: 4px; cursor: pointer; }
.job-close:hover, .job-close:focus-visible { color: var(--ink); border-color: var(--line); }

/* completing pending checks (phase 12b) */
.verdict .manual-line { flex-basis: 100%; margin-top: 6px; font-weight: 600; font-size: 14px; }
.manual-row details { margin-top: 6px; } .manual-row details summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.manual-row pre { white-space: pre-wrap; max-height: 200px; overflow: auto; }
#man { max-width: 40rem; } #man textarea { width: 100%; font: inherit; padding: 7px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--page); color: var(--ink); }
#man fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; }

/* chat attachments (phase 12c) */
.chat-buttons { display: flex; gap: 8px; align-items: center; } .chat-buttons #chat-send { flex: 1; }
.attach { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-size: 13px; }
.attach:hover, .attach:focus-within { border-color: var(--accent); }
.chat-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .chat-files:empty { display: none; }
.file-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 4px 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--page); }
.chip-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; padding: 0 4px; }

/* radio choices in dialogs sit beside their words */
dialog label:has(> input[type=radio]) { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 6px 0; }
dialog input[type=radio] { width: auto; margin: 0; flex: none; }

/* the server's browser for an o9 sign-in (phase 11c) */
#o9 { max-width: min(1340px, 96vw); } #o9 .o9-screen-wrap { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
#o9-screen { display: block; width: 100%; height: auto; min-height: 200px; cursor: pointer; outline: none; }
#o9-screen:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.o9-state { position: absolute; left: 8px; bottom: 8px; margin: 0; padding: 3px 8px; border-radius: 4px; background: rgba(15, 23, 32, .8); color: #fff; font-size: 12px; }
#o9-paste { width: 18rem; font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--page); color: var(--ink); }

/* the public site (D-137, D-138): what changes the site for everyone stays hidden; the rest appears once the visitor has given their details */
body.public :is([data-policy-edit], #key-form, #route-form, #fav-form) { display: none !important; }
body.public .sidenav a[href$="/settings"] { display: none; }
.me.visitor { display: grid; gap: 6px; } .me.visitor small { display: block; }
#vis { max-width: 34rem; } #vis label { display: block; margin: 10px 0; font-weight: 600; } #vis ul { padding-left: 18px; }