/* Copyright © 2026 EuKreate, Inc. All rights reserved. */
/* EuKollab: the console and staff portal wear the public pages' look (public-pages.css): a cool graphite or
   paper ground, hairlines, 4px corners, one amber signal colour, Inter for prose and JetBrains Mono for data and labels.
   The public pages retune these tokens for themselves in site.css and public-pages.css. */

:root {
  --bg: #0A0C0D; --bg-raise: #101315; --bg2: #101315; --bg3: #171B1E; --bg4: #1F2427;
  --line: #272D30; --line-strong: #414B4E;
  --text: #F1F2EF; --text-2: #B5B9B9; --muted: #959D9F; --faint: #798487;
  --accent: #FFB849; --accent-2: #FFCD7B; --accent-text: #FFBC55; --on-accent: #17130B;
  --accent-soft: #241E13; --accent-line: #8D6327; --network-grid: #1C2326;
  --ok: #4ADE80; --warn: #F5A70F; --bad: #FF6B5E; --info: #5CC8E0;
  --ok-soft: rgba(74, 222, 128, 0.1); --bad-soft: rgba(255, 107, 94, 0.1); --info-soft: rgba(92, 200, 224, 0.1);
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-sm: 4px; --r: 4px; --r-lg: 4px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --header-h: 68px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 40px rgba(0, 0, 0, 0.35);
  --glow: 0 0 0 1px var(--accent-line), 0 0 28px rgba(245, 167, 15, 0.12);
  /* Channels and theme-dependent colours, so overlays, shadows and illustrations flip with the theme. */
  --ink-rgb: 237, 234, 226; --fg-rgb: 255, 255, 255; --bg-rgb: 10, 12, 13; --raise-rgb: 16, 19, 21; --shadow-rgb: 0, 0, 0; --shadow-k: 1;
  --headline-from: #FFFFFF; --headline-to: #BDBAB2; --bg-deep: #050506;
  --code-bg: #0C0C0F; --code-text: #DCD9D0; --code-inline: #F3E3C3;
  --map-node-a: #EDEAE2; --map-node-c: #B8B5AB; --map-node-d: #3A3A35; --map-stroke: #0B0B09; --map-idle: #6B6A62;
  color-scheme: dark;
}

/* Light theme: cool paper ground, graphite text, the same amber with a darker amber for text. */
:root[data-theme="light"] {
  --bg: #F7F7F2; --bg-raise: #FFFEFA; --bg2: #FFFEFA; --bg3: #F0F1EB; --bg4: #E8ECE5;
  --line: #D3DBD9; --line-strong: #A5B3B4;
  --text: #182124; --text-2: #4C595D; --muted: #5B6A70; --faint: #63747B;
  --accent: #FFB849; --accent-2: #FFC972; --accent-text: #935A00; --on-accent: #17130B;
  --accent-soft: #FFF0D6; --accent-line: #B17C31; --network-grid: #E1E6E1;
  --ok: #15803D; --warn: #9A6100; --bad: #C0392B; --info: #0E7490;
  --ok-soft: rgba(21, 128, 61, 0.08); --bad-soft: rgba(192, 57, 43, 0.08); --info-soft: rgba(14, 116, 144, 0.08);
  --shadow: 0 1px 2px rgba(60, 45, 15, 0.05), 0 10px 30px rgba(60, 45, 15, 0.07);
  --glow: 0 0 0 1px var(--accent-line), 0 6px 24px rgba(245, 167, 15, 0.12);
  --ink-rgb: 40, 38, 34; --fg-rgb: 20, 20, 24; --bg-rgb: 247, 247, 242; --raise-rgb: 255, 254, 250; --shadow-rgb: 60, 45, 15; --shadow-k: 0.3;
  --headline-from: #17171A; --headline-to: #5A574F; --bg-deep: #EDEBE5;
  --code-bg: #F3F1EC; --code-text: #23221F; --code-inline: #8A4B00;
  --map-node-a: #2A2A2E; --map-node-c: #8C897F; --map-node-d: #D9D5CB; --map-stroke: #FFFFFF; --map-idle: #A8A59B;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Moving between console pages cross-fades the content while the header and rail stay put (console-nav.js keeps
   the scroll position for refinements of the same page). Browsers without view transitions load pages as before. */
@view-transition { navigation: auto; }
header.top { view-transition-name: console-header; }
nav.side { view-transition-name: console-rail; }
.shell > main { view-transition-name: console-main; }
::view-transition-old(console-main) { animation: 120ms ease-out both ekl-fade-out; }
::view-transition-new(console-main) { animation: 220ms cubic-bezier(.2, .7, .2, 1) both ekl-fade-in; }
@keyframes ekl-fade-out { to { opacity: 0; } }
@keyframes ekl-fade-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.dtabs-nav { margin: 0 0 var(--s5); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--text); }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(255, 184, 73, 0.32); }
code, pre, kbd { font-family: var(--mono); }
[hidden] { display: none !important; }

.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); } .info { color: var(--info); } .muted { color: var(--muted); }

/* --- buttons and fields ----------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg2); color: var(--text);
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s; }
.btn:hover { border-color: var(--accent-line); background: var(--bg3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
/* A disabled button looks it: Next before tools are chosen, Register before the checks pass. */
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn.primary { border-color: transparent; background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--on-accent);
  font-weight: 600; box-shadow: 0 0 0 1px rgba(245, 167, 15, 0.5), 0 6px 24px rgba(245, 167, 15, 0.22); }
.btn.primary:hover { box-shadow: 0 0 0 1px var(--accent), 0 8px 30px rgba(245, 167, 15, 0.35); color: var(--on-accent); }
.btn.danger { border-color: rgba(255, 107, 94, 0.5); color: var(--bad); background: var(--bad-soft); }

input[type=text], input[type=url], input[type=email], input[type=number], input[type=tel], input:not([type]), textarea,
select {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg-raise); color: var(--text); transition: border-color 0.2s, box-shadow 0.2s; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
label.field { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
label.field input, label.field select, label.field textarea { font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; }

.tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--line-strong);
  border-radius: 999px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.tag.warn { color: var(--warn); border-color: var(--accent-line); background: var(--accent-soft); }
.tag.ok { color: var(--ok); border-color: rgba(74, 222, 128, 0.35); background: var(--ok-soft); }
.tag.internal { color: var(--info); border-color: rgba(92, 200, 224, 0.4); background: var(--info-soft); }
.spacer { flex: 1 1 24px; }

/* --- console and staff shell ------------------------------------------------------------------ */
header.top { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  min-height: 60px; padding: 10px 24px; border-bottom: 1px solid var(--line);
  background: rgba(var(--bg-rgb), 0.82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
header.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line) 30%, transparent 70%); background-size: 200% 100%;
  animation: scanline 8s linear infinite; }
@keyframes scanline { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* One logo on every page (templates/_logo.html). */
.ekl-logo { flex: none; display: flex; align-items: center; }
.ekl-logo img { display: block; height: 28px; width: auto; }
/* The signed-in shells have no site footer: the credit closes the page content instead. */
.shell-foot { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 32px; }
.shell-foot p { margin: 0; font: 400 10px var(--mono); color: var(--muted); }
/* At the logo's bottom right, in the flow, so whatever follows the logo in a header makes room for it. */
.ekl-beta { align-self: flex-end; margin: 0 0 -1px 5px; padding: 1px 4px; border: 1px solid var(--accent-line);
  border-radius: 2px; background: var(--accent-soft); color: var(--accent-text); font: 600 8.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
header.top > .muted { font-family: var(--mono); font-size: 12px; }
header.top form { margin: 0; }
header.top .btn { min-height: 34px; padding: 0 12px; font-size: 13px; }

.shell { display: flex; align-items: stretch; min-height: calc(100vh - 60px); }
nav.side { flex: 0 0 236px; padding: var(--s5) var(--s3) calc(var(--s5) + var(--dock-h, var(--dock-bar, 0px))); border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-raise), var(--bg)); position: sticky; top: 60px; align-self: flex-start;
  height: calc(100vh - 60px); overflow-y: auto; }
nav.side .label { padding: 0 var(--s3) var(--s3); font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: 0.12em; }
nav.side a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 var(--s3);
  border-radius: var(--r-sm); color: var(--text-2); transition: background 0.2s, color 0.2s; }
nav.side a:hover { background: var(--bg3); color: var(--text); }
nav.side a.current { background: var(--accent-soft); color: var(--text); }
nav.side a.current::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--accent); box-shadow: 0 0 12px var(--accent); }
nav.side a .marker { display: none; }
nav.side a .name { flex: 1; font-size: 14px; font-weight: 500; }
nav.side a.open { color: var(--text); }
nav.side a.open .name { font-weight: 600; }
/* A place's own pages, under it: always listed, so nothing is reachable only from a link inside a page. */
nav.side .subnav { margin: 0 0 var(--s2) calc(var(--s3) + 2px); padding-left: var(--s2); border-left: 1px solid var(--line); }
nav.side .subnav a { min-height: 32px; }
nav.side .subnav a .name { font-size: 13px; font-weight: 400; color: var(--muted); }
nav.side .subnav a:hover .name, nav.side .subnav a.current .name { color: var(--text); }
nav.side .subnav a.current::before { left: calc(-1 * var(--s2) - 1px); top: 7px; bottom: 7px; }
.shell > main { flex: 1 1 auto; min-width: 0; padding: var(--s6) var(--s6) calc(var(--s7) + var(--dock-h, 0px)); display: flex; flex-direction: column; gap: var(--s5);
  max-width: 1320px; }
@media (max-width: 860px) {
  header.top { padding: 10px 16px; }
  .shell { flex-direction: column; min-height: 0; }
  nav.side { position: static; height: auto; flex: none; display: flex; gap: 4px; overflow-x: auto; padding: var(--s2) var(--s3);
    border-right: 0; border-bottom: 1px solid var(--line); }
  nav.side .label { display: none; }
  nav.side .subnav { display: contents; }
  nav.side .subnav a .name { font-size: 13px; }
  nav.side a { flex: none; min-height: 36px; }
  nav.side a.current::before { left: 10px; right: 10px; top: auto; bottom: 2px; width: auto; height: 2px; border-radius: 2px; }
  .shell > main { padding: var(--s5) var(--s4) var(--s6); }
}

.crumb { font-family: var(--mono); font-size: 11.5px; color: var(--faint); letter-spacing: 0.02em; }
.crumb a { color: var(--muted); } .crumb a:hover { color: var(--accent-text); }
h1 { margin: 6px 0 0; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
h2 { margin: 0; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
p.note { margin: 0; font-size: 14px; color: var(--muted); max-width: 72ch; }

.panel { border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, var(--bg-raise), var(--bg) 140px);
  box-shadow: var(--shadow); overflow: hidden; }
.panel > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(var(--fg-rgb), 0.012); }
.panel > header h2::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; vertical-align: 1px;
  background: var(--accent); border-radius: 1px; box-shadow: 0 0 8px var(--accent); }
.panel > header .meta { font-family: var(--mono); font-size: 11px; color: var(--faint); }
form.panel { margin: 0; }
fieldset legend { font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s3); }
.stats > div { position: relative; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(160deg, var(--bg2), var(--bg)); overflow: hidden; }
.stats > div::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 167, 15, 0.12), transparent 70%); }
.stats .k { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.1em; }
.stats .k span + span { color: var(--faint); }
.stats .v { margin-top: 8px; font-family: var(--mono); font-size: 28px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; padding: 10px 18px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em;
  color: var(--faint); border-bottom: 1px solid var(--line); white-space: nowrap; background: rgba(var(--fg-rgb), 0.012); }
td { padding: 12px 18px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); font-size: 13.5px; }
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: rgba(var(--fg-rgb), 0.02); }
tbody tr:last-child > td { border-bottom: 0; }
td strong { color: var(--text); font-weight: 600; }
td .sub { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.5; }
td.ok, td.warn, td.bad { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
td.ok { color: var(--ok); } td.warn { color: var(--warn); } td.bad { color: var(--bad); }
td code, .panel code { padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg3); font-size: 0.9em; }

.row { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: flex-start; }
.row > * { flex: 1 1 380px; min-width: 0; }
.tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg-raise); align-self: flex-start; }
.tabs a { padding: 7px 14px; border-radius: 7px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted);
  transition: background 0.2s, color 0.2s; }
.tabs a:hover { color: var(--text); background: var(--bg3); }
.tabs a.current { background: var(--bg4); color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-line) inset; }
pre { margin: 0; padding: 14px 16px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--r-sm);
  white-space: pre-wrap; word-break: break-all; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
details summary { cursor: pointer; }
.log { padding: 12px 18px; background: var(--bg-raise); font-family: var(--mono); font-size: 12px; }
details.log summary { list-style: none; padding: 2px 0; }
details.log summary::-webkit-details-marker { display: none; }
details.log summary::before { content: "▸ "; color: var(--accent-text); }
details.log[open] summary::before { content: "▾ "; }
.log .line { display: grid; grid-template-columns: 38px 1fr 74px; gap: 8px; padding: 3px 0; }
.log .why { padding: 0 0 4px 46px; }
.secret { border: 1px solid var(--accent-line); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(160deg, rgba(245, 167, 15, 0.08), transparent 60%); box-shadow: var(--glow); }
.msg { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.msg:last-child { border-bottom: 0; }
.msg .head { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--mono); font-size: 11.5px; }
.msg .body { font-size: 14px; color: var(--text); }
.msg table { margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.notice { border: 1px solid rgba(92, 200, 224, 0.4); border-radius: var(--r); padding: 12px 16px; color: var(--info);
  background: var(--info-soft); word-break: break-word; }
.notice.bad { border-color: rgba(255, 107, 94, 0.45); color: var(--bad); background: var(--bad-soft); }
.empty { padding: 22px 18px; color: var(--muted); font-size: 13.5px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.inline > label.field { flex: 1 1 220px; }

/* --- standalone pages (mailbox, staff sign-in) -------------------------------------------------- */
main.standalone { max-width: 900px; margin: 0 auto; padding: var(--s6) 24px var(--s7); display: flex; flex-direction: column; gap: var(--s5); }
.center-card { display: flex; justify-content: center; padding: var(--s7) 16px; }
.center-card .panel { width: 100%; max-width: 460px; }
.center-card .panel .inner { padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- theme toggle and light-theme details ------------------------------------------------------------ */
/* Logos come as a pair: light lettering for dark, ink lettering for light; the amber is the same in both.
   The pre-paint theme script sets data-theme, so the right one shows from the first frame. */
.on-light { display: none !important; }
:root[data-theme="light"] .on-dark { display: none !important; }
:root[data-theme="light"] .on-light { display: block !important; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg2); color: var(--muted); cursor: pointer; }
.theme-toggle:hover { color: var(--text); border-color: var(--accent-line); }
.theme-toggle svg { width: 16px; height: 16px; }

/* Console on phones: a one-line top bar, and table rows as labelled cards instead of squeezed columns. */
@media (max-width: 720px) {
  header.top { flex-wrap: nowrap; min-height: 56px; padding: 8px 14px; gap: 10px; }
  header.top .wide-only { display: none; }
  main table, main thead, main tbody, main tr, main td { display: block; width: 100%; }
  main thead { display: none; }
  main tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  main tbody tr:last-child { border-bottom: 0; }
  main td { padding: 4px 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; }
  main td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 10px var(--mono);
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
  main td[data-label]:first-child::before { display: none; }
  main td[data-label]:first-child { font-weight: 600; font-size: 15px; }
  main .scroll { overflow: visible; }
}

/* Walk-through on phones: the diagram, the latest log lines and the caption sit in one card on one screen. */

/* --- Publisher overview: the console's home ------------------------------------------------------------- */
.stars { color: var(--faint); letter-spacing: 1px; font-size: 13px; }
.stars .on { color: var(--accent); } .stars .half { color: var(--accent); opacity: 0.55; }

.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg2); }
.seg button { min-height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 500 12px var(--sans); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }

.svc { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); transition: border-color 0.2s, box-shadow 0.2s; }
.svc:hover { border-color: var(--accent-line); box-shadow: var(--glow); }

.chip { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid var(--line-strong); border-radius: 999px; font: 500 11px var(--mono); color: var(--text-2); background: var(--bg-raise); }
.pill { flex: none; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-strong); font: 600 10px/16px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pill.ok { color: var(--ok); border-color: var(--ok); } .pill.bad { color: var(--bad); border-color: var(--bad); }
.pill.amber { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

ol.feed { list-style: none; margin: 0; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
ol.feed li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
ol.feed li:last-child { border-bottom: 0; }
ol.feed .when { font: 11px var(--mono); color: var(--faint); padding-top: 2px; }
ol.feed li.ok span:last-child::before, ol.feed li.bad span:last-child::before, ol.feed li.warn span:last-child::before { content: "● "; font-size: 9px; vertical-align: 1px; }
ol.feed li.ok span:last-child::before { color: var(--ok); } ol.feed li.bad span:last-child::before { color: var(--bad); } ol.feed li.warn span:last-child::before { color: var(--warn); }
@media (max-width: 520px) { ol.feed li { grid-template-columns: 1fr; gap: 0; } }

/* The person who starts the request is an avatar, not an agent card: it leaves the agents room. */

/* Transactions: the decision flow reads top to bottom, one recorded step per row. */
ol.flow { list-style: none; margin: 0; padding: 14px 18px 18px 34px; display: flex; flex-direction: column; gap: 0; position: relative; }
ol.flow::before { content: ""; position: absolute; left: 22px; top: 22px; bottom: 26px; width: 1px; background: var(--line-strong); }
ol.flow > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 0 14px 18px; font-size: 13.5px; }
ol.flow > li::before { content: ""; position: absolute; left: -16px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--info); }
ol.flow > li.ok::before { border-color: var(--ok); background: var(--ok); } ol.flow > li.warn::before { border-color: var(--warn); }
ol.flow > li.bad::before { border-color: var(--bad); background: var(--bad); } ol.flow > li.muted::before { border-color: var(--line-strong); }
ol.flow > li > b { font: 600 11px var(--mono); letter-spacing: 0.08em; color: var(--text-2); }
ol.flow > li > .when { font: 11px var(--mono); color: var(--faint); text-align: right; }
ol.flow > li > div { grid-column: 1 / -1; color: var(--text-2); }
ol.flow .sub { display: block; margin-top: 3px; font: 11px var(--mono); color: var(--muted); line-height: 1.5; }
ol.flow table { margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); }
ol.flow tr.chosen td { background: var(--accent-soft); }
ol.flow blockquote { margin: 8px 0 0; padding: 8px 12px; border-left: 2px solid var(--accent-line); color: var(--text); background: var(--bg2); }
table.kv th { width: 160px; text-align: left; font: 11px var(--mono); color: var(--muted); }

ol.esc li { grid-template-columns: minmax(0, 1fr) auto; }
ol.esc li.done { opacity: 0.55; }
ol.esc p { margin: 6px 0 0; } ol.esc .sub { margin-top: 6px; font: 11px var(--mono); color: var(--faint); }
.esc-banner { display: block; margin-bottom: var(--s3, 14px); padding: 10px 14px; border: 1px solid var(--accent-line); border-left: 3px solid var(--warn);
  border-radius: var(--r-sm); background: var(--accent-soft); color: var(--text); font: 12.5px var(--mono); }
.esc-banner.critical { border-color: var(--bad); border-left-color: var(--bad); background: var(--bad-soft); }
.esc-banner[hidden] { display: none; }
@media (max-width: 640px) { ol.esc li { grid-template-columns: 1fr; } ol.flow > li { grid-template-columns: 1fr; } ol.flow > li > .when { text-align: left; } }

ol.checklist { list-style: none; margin: 0; padding: 8px 18px 16px; display: flex; flex-direction: column; gap: 0; }
ol.checklist li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
ol.checklist li:last-child { border-bottom: 0; }
ol.checklist .mark { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
ol.checklist li.done .mark { border-color: var(--ok); background: var(--ok); color: var(--bg); }
ol.checklist b { font-size: 14px; } ol.checklist p { grid-column: 2; margin: 2px 0 0; color: var(--muted); font-size: 13px; }
ol.checklist a { grid-column: 3; grid-row: 1 / span 2; align-self: center; font: 12px var(--mono); color: var(--accent-text); }

/* Your data: export and deletion, on Account and in Manage. */
.your-data { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.your-data h2 { margin: 0; font-size: 16px; font-weight: 600; }
.your-data-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding-top: 14px; border-top: 1px solid var(--line); }
.your-data-row > div { flex: 1 1 320px; }
.your-data-row p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); max-width: 60em; }
.your-data-row.danger b { color: var(--bad); }
.your-data-row form { margin: 0; }
.your-data-confirm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.your-data-confirm .field { flex: 0 1 220px; }
.your-data label.check { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; }

/* Notes about how a paid service is paid for. */
.pay-note { margin: 0; font-size: 12px; color: var(--muted); }

/* Organization branding: the preview in Manage and Account, and logos wherever an organization is named. */
.brand-mark { display: flex; align-items: center; gap: 14px; }
.brand-mark img { max-height: 48px; max-width: 160px; object-fit: contain; border-radius: 8px; }
.brand-mark p { margin: 2px 0 0; }
.brand-initial { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-strong, #ccc);
  border-radius: 10px; font-weight: 600; }
.brand-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; align-items: end; }
.brand-form .btn { justify-self: start; }
.org-logo { display: inline-block; height: 18px; max-width: 72px; object-fit: contain; vertical-align: -4px; margin-right: 6px; border-radius: 3px; }

/* --- publisher console shell: header controls, grouped rail, settings tabs, docked terminal ---- */
body.console { --dock-bar: 38px; }
header.top .org-id { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 14px; margin-left: 4px; border-left: 1px solid var(--line-strong); }
header.top .org-id .org-logo { height: 22px; width: auto; max-width: 88px; border-radius: 4px; }
header.top .org-id .org-name { font: 500 14px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.tier-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px;
  font: 500 11.5px var(--sans); color: var(--muted); white-space: nowrap; }
.tier-chip.sandbox { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }
.tier-chip.sandbox:hover { color: var(--text); }
.tier-chip.ok { border-color: rgba(74, 222, 128, 0.4); color: var(--ok); }
.hdr-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 36px; height: 36px; padding: 0 9px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: transparent; color: var(--text-2); font: 500 13px var(--sans); cursor: pointer; }
.hdr-btn:hover, .hdr-btn[aria-expanded="true"] { color: var(--text); border-color: var(--accent-line); }
.hdr-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hdr-btn.copilot-btn { padding: 0 12px; }
.hdr-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent);
  color: var(--on-accent); font: 600 10.5px/18px var(--mono); text-align: center; }
.hdr-count.critical, .nav-count.critical { background: var(--bad); color: #fff; }
.acct-menu { position: relative; }
.acct-menu > summary { list-style: none; cursor: pointer; }
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-avatar { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--accent-line); border-radius: 50%;
  background: var(--bg3); color: var(--text); font: 600 12.5px var(--sans); letter-spacing: 0.02em; }
.acct-menu[open] .acct-avatar { border-color: var(--accent); }
.acct-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; display: flex; flex-direction: column; min-width: 240px; padding: 6px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg-raise); box-shadow: var(--shadow); }
.acct-pop .acct-who { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.acct-pop .acct-who b { font: 500 13.5px var(--sans); color: var(--text); }
.acct-pop .acct-who span { font: 12px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.acct-pop a, .acct-pop .linkish { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--r-sm); background: none;
  color: var(--text-2); font: 500 13.5px var(--sans); text-align: left; cursor: pointer; }
.acct-pop a:hover, .acct-pop .linkish:hover { background: var(--bg3); color: var(--text); }
.acct-pop form { margin: 0; }
.acct-pop .acct-sep { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.acct-pop [hidden] { display: none; }
/* The bell: a list of what waits for a person, most urgent first, under the header like the account menu. */
.bell-menu { position: relative; }
.bell-menu > summary { list-style: none; }
.bell-menu > summary::-webkit-details-marker { display: none; }
.bell-menu[open] > summary { color: var(--text); border-color: var(--accent-line); }
.bell-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; display: flex; flex-direction: column; width: min(360px, calc(100vw - 32px));
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg-raise); box-shadow: var(--shadow); }
.bell-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); font: 500 10px var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.bell-list { margin: 0; padding: 4px; list-style: none; max-height: min(60vh, 420px); overflow: auto; }
.bell-list a { display: grid; grid-template-columns: 64px 1fr; gap: 2px 10px; padding: 9px 10px; border-radius: var(--r-sm); color: var(--text-2); text-decoration: none; }
.bell-list a:hover { background: var(--bg3); color: var(--text); }
.bell-list a > span { grid-row: span 2; padding-top: 2px; font: 500 9.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.bell-list a.critical > span { color: var(--bad); } .bell-list a.warning > span { color: var(--accent-text); }
.bell-list b { font: 500 13px/1.4 var(--sans); color: var(--text); }
.bell-list small { font: 11.5px var(--mono); color: var(--muted); }
.bell-empty { padding: 12px 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.bell-all { padding: 10px 14px; border-top: 1px solid var(--line); color: var(--accent-text); font-size: 13px; text-decoration: none; }
.bell-all:hover { color: var(--text); }
@media (max-width: 720px) { .bell-pop { position: fixed; top: 64px; right: 16px; } }
nav.side .group + .group { margin-top: var(--s5); }
nav.side .group .label { padding-bottom: var(--s2); }
nav.side .nav-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text);
  font: 600 11px/20px var(--mono); text-align: center; }
nav.side .nav-count[hidden] { display: none; }
/* The docked terminal: a bar along the bottom, opening into a resizable panel. */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column; height: var(--dock-h, var(--dock-bar));
  border-top: 1px solid #262A2E; background: #0C0E10; box-shadow: 0 -12px 40px rgba(var(--shadow-rgb), calc(0.3 * var(--shadow-k))); }
.dock-grip { flex: none; height: 6px; margin-top: -3px; cursor: ns-resize; }
.dock:not(.open) .dock-grip { display: none; }
.dock-grip:hover, .dock-grip:focus-visible { background: var(--accent-line); outline: 0; }
.dock-bar { flex: none; display: flex; align-items: center; gap: 14px; height: calc(var(--dock-bar) - 1px); padding: 0 18px; border: 0; background: #181B1E;
  color: #E6E8E6; font: 400 12.5px var(--sans); text-align: left; cursor: pointer; }
.dock-bar b { font-weight: 500; }
.dock-hint { flex: 1; color: #8B9396; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-chev { width: 8px; height: 8px; border-left: 1.5px solid #8B9396; border-top: 1.5px solid #8B9396; transform: rotate(45deg); margin-top: 4px; transition: transform 0.2s; }
.dock.open .dock-chev { transform: rotate(225deg); margin-top: -4px; }
.dock-body { flex: 1; min-height: 0; display: flex; }
.dock:not(.open) .dock-body { display: none; }
.cp-open .dock { right: 0; }
@media (max-width: 860px) {
  /* A flex item will not shrink below its content unless told, and the row of links would widen the page. */
  nav.side { min-width: 0; max-width: 100vw; }
  nav.side .group { display: contents; }
  nav.side .group .label { display: none; }
}
@media (max-width: 720px) {
  header.top .org-id { display: none; }
  .hdr-btn.copilot-btn { padding: 0 9px; }
  .dock-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dock-chev { transition: none; } }

/* --- console and staff polish: the public pages' look on the signed-in shells -------------------------
   Flat surfaces and hairlines, mono labels with the amber square, 4px corners, the amber kept for signals.
   console.css loads on every page, so these rules are scoped to the two signed-in shells. */
:is(body.console, body.staff) { font-size: 13.5px; }
/* The header: a solid bar like the public site's, no blur or moving line. */
:is(body.console, body.staff) header.top { min-height: 64px; padding: 10px 24px; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
:is(body.console, body.staff) header.top::after { content: none; }
:is(body.console, body.staff) .ekl-logo img { height: 30px; }
:is(body.console, body.staff) .tier-chip { min-height: 22px; padding: 0 8px; border-radius: 2px; font: 400 9.5px var(--mono); letter-spacing: 0.09em; text-transform: uppercase; }
:is(body.console, body.staff) .hdr-btn { height: 34px; min-width: 34px; font-size: 12.5px; }
:is(body.console, body.staff) .theme-toggle { flex: none; width: 34px; height: 34px; border-radius: 4px; }
:is(body.console, body.staff) .acct-avatar { border-color: var(--line-strong); font: 500 11.5px var(--mono); }
/* The rail: mono group labels, plain links, the current one marked by an amber edge as the public header underlines it. */
:is(body.console, body.staff) nav.side { background: var(--bg); padding-inline: 14px; }
:is(body.console, body.staff) nav.side .label { display: flex; align-items: center; gap: 9px; font: 400 9.5px var(--mono); letter-spacing: 0.09em; color: var(--muted); }
:is(body.console, body.staff) nav.side .label::before { content: ""; width: 5px; height: 5px; background: var(--accent-text); }
:is(body.console, body.staff) nav.side a { min-height: 36px; border-radius: 0; color: var(--muted); }
:is(body.console, body.staff) nav.side a .name { font-size: 13.5px; font-weight: 400; }
:is(body.console, body.staff) nav.side a:hover { background: transparent; color: var(--text); }
:is(body.console, body.staff) nav.side a.current { background: transparent; color: var(--text); }
:is(body.console, body.staff) nav.side a.current .name { font-weight: 500; }
:is(body.console, body.staff) nav.side a.current::before { left: -14px; top: 8px; bottom: 8px; width: 2px; border-radius: 0; box-shadow: none; }
:is(body.console, body.staff) nav.side .nav-count { border-radius: 2px; }
@media (max-width: 860px) {
  /* On phones the rail is a row of links: no group labels, the current one underlined. */
  :is(body.console, body.staff) nav.side .label { display: none; }
  :is(body.console, body.staff) nav.side a.current::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 2px; }
}
/* Page heads: the breadcrumb as the public pages' kicker, a lighter, tighter headline, the lede in the second ink. */
:is(body.console, body.staff) .shell > main { gap: var(--s5); }
:is(body.console, body.staff) h1 { font-size: 32px; font-weight: 500; line-height: 1.15; letter-spacing: -0.04em; }
:is(body.console, body.staff) .crumb { display: flex; align-items: center; gap: 9px; font: 400 9.5px/1.8 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
:is(body.console, body.staff) .crumb::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--accent-text); }
:is(body.console, body.staff) .crumb + h1 { margin-top: 10px; }
:is(body.console, body.staff) p.note, :is(body.console, body.staff) .page-head .lede { color: var(--text-2); line-height: 1.8; }
:is(body.console, body.staff) h2 { font-size: 10px; font-weight: 500; letter-spacing: 0.09em; }
/* Notices: a hairline box with the amber edge, as on Explore; problems keep their red. */
:is(body.console, body.staff) .notice { border: 1px solid var(--line-strong); border-left: 2px solid var(--accent); border-radius: 0; background: var(--bg-raise); color: var(--text-2); }
:is(body.console, body.staff) .notice a { color: var(--accent-text); }
:is(body.console, body.staff) .notice.bad { border-color: var(--bad); border-left-width: 2px; background: var(--bad-soft); color: var(--bad); }
:is(body.console, body.staff) .tag { border-radius: 2px; }

/* Panels: one flat surface with a hairline, a quiet header and the amber square as the only mark. */
:is(body.console, body.staff) .panel { background: var(--bg-raise); box-shadow: none; }
:is(body.console, body.staff) .panel > header { min-height: 48px; padding: 12px 18px; background: transparent; }
:is(body.console, body.staff) .panel > header h2::before { width: 5px; height: 5px; border-radius: 0; background: var(--accent-text); box-shadow: none; }
:is(body.console, body.staff) .panel > header .meta { letter-spacing: 0.02em; }
:is(body.console, body.staff) .secret { box-shadow: none; background: var(--accent-soft); }
:is(body.console, body.staff) .svc { background: var(--bg); }
:is(body.console, body.staff) .svc:hover { box-shadow: none; }

/* Buttons: flat amber for the one primary action, hairline for the rest. */
:is(body.console, body.staff) .btn { font-size: 13px; }
:is(body.console, body.staff) .btn.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 500; box-shadow: none; }
:is(body.console, body.staff) .btn.primary:hover { border-color: var(--accent-2); background: var(--accent-2); box-shadow: none; }
:is(body.console, body.staff) .btn { background: transparent; }
:is(body.console, body.staff) .btn:hover { background: var(--bg3); }
:is(body.console, body.staff) .btn.danger { background: var(--bad-soft); }

/* Figures: Agents and Activity use the same tiles as the Overview. */
:is(body.console, body.staff) .stats > div { background: var(--bg-raise); border-radius: var(--r); }
:is(body.console, body.staff) .stats > div::after { content: none; }
:is(body.console, body.staff) .stats .k { font-size: 10.5px; letter-spacing: 0.12em; }
:is(body.console, body.staff) .stats .v { margin-top: 6px; font: 600 30px/1.1 var(--sans); letter-spacing: -0.03em; }

/* Tables: numbers line up on the right in tabular figures; handles and row links never break mid-word. */
:is(body.console, body.staff) th.num, :is(body.console, body.staff) td.num { text-align: right; }
:is(body.console, body.staff) td.num .sub { text-align: right; }
:is(body.console, body.staff) td.h { white-space: nowrap; }
:is(body.console, body.staff) td.go { white-space: nowrap; text-align: right; }
:is(body.console, body.staff) td.go a, :is(body.console, body.staff) td a[href^="/transactions/"] { font: 12px var(--mono); color: var(--accent-text); }
:is(body.console, body.staff) td.empty, :is(body.console, body.staff) .empty { padding: 26px 18px; color: var(--muted); font-size: 13.5px; text-align: left; }
:is(body.console, body.staff) tbody tr:hover { background: rgba(var(--fg-rgb), 0.025); }

/* Fields: every input looks the same, including the bare ones that only declare an input mode. */
:is(body.console, body.staff) input:not([type]), :is(body.console, body.staff) input[type=search], :is(body.console, body.staff) input[type=password] {
  min-height: 36px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--text); }
:is(body.console, body.staff) input:not([type]):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
:is(body.console, body.staff) input[type=text], :is(body.console, body.staff) input[type=url], :is(body.console, body.staff) input[type=email],
:is(body.console, body.staff) input[type=number], :is(body.console, body.staff) input[type=tel],
:is(body.console, body.staff) input:not([type]), :is(body.console, body.staff) textarea, :is(body.console, body.staff) select { background: var(--bg); }
:is(body.console, body.staff) fieldset { margin: 0; padding: 12px 16px 14px; border: 1px solid var(--line); border-radius: var(--r); }
:is(body.console, body.staff) fieldset legend { padding: 0 6px; font-size: 10.5px; color: var(--muted); }
:is(body.console, body.staff) label:has(> input[type=checkbox]), :is(body.console, body.staff) label:has(> input[type=radio]) { cursor: pointer; }

/* Tabs and chips: one segmented style; provisional agents read as such. */
:is(body.console, body.staff) .tabs a.provisional { color: var(--faint); font-style: italic; }
/* Tabs: a row of labels on a hairline, the current one underlined in amber, as the public header marks its page. */
:is(body.console, body.staff) .tabs { gap: 22px; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; align-self: stretch; }
:is(body.console, body.staff) .tabs a { position: relative; padding: 10px 0 12px; border-radius: 0; background: none; font: 400 10.5px var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
:is(body.console, body.staff) .tabs a:hover { background: none; color: var(--text); }
:is(body.console, body.staff) .tabs a.current { background: none; box-shadow: none; color: var(--text); }
:is(body.console, body.staff) .tabs a.current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
/* Settings: configuration keys read as keys, each group sits on its own hairline. */
:is(body.console, body.staff) .key { font: 500 12.5px var(--mono); color: var(--text); }
:is(body.console, body.staff) .panel form fieldset[style*="border:0"] { padding-top: 14px !important; border-top: 1px solid var(--line) !important; }
:is(body.console, body.staff) .panel form fieldset[style*="border:0"] > legend { float: left; width: 100%; padding: 0 0 6px !important; }
:is(body.console, body.staff) .panel form label:has(> input[type=checkbox]), :is(body.console, body.staff) .panel form label:has(> input[type=radio]) {
  display: inline-flex; align-items: baseline; gap: 6px; font-size: 13.5px; color: var(--text-2); }
:is(body.console, body.staff) .key + .muted { margin-left: 2px; }
.dock .when-open { display: none; } .dock.open .when-open { display: inline; } .dock.open .when-closed { display: none; }

/* --- Agents: one card per agent, status first, everything technical one click away ------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.page-head .lede { margin: 6px 0 0; max-width: 60ch; color: var(--muted); font-size: 14px; }

.agent-av { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--accent-line); object-fit: cover;
  display: grid; place-items: center; font: 500 14px var(--sans); color: var(--text); background: var(--bg3); }

.st { padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font: 500 12px var(--sans); white-space: nowrap; }
.st.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.st.warn { color: var(--warn); border-color: var(--accent-line); }
.st.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.st.muted { color: var(--muted); }
.agent-actions { display: flex; gap: var(--s2); align-items: center; }
.agent-actions .btn { min-height: 34px; padding: 0 14px; font-size: 13.5px; }
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu .menu-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 340px; padding: var(--s2);
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg-raise); box-shadow: 0 12px 32px rgba(var(--shadow-rgb), calc(0.35 * var(--shadow-k))); }
.menu-body form, .menu-body > a { display: flex; flex-direction: column; gap: 6px; padding: var(--s3); border-radius: var(--r-sm); }
.menu-body form + form, .menu-body form + a { border-top: 1px solid var(--line); }
.menu-body button { align-self: flex-start; padding: 0; border: 0; background: none; font: 500 14px var(--sans); color: var(--text); cursor: pointer; }
.menu-body label { display: flex; flex-direction: column; gap: 6px; font: 500 14px var(--sans); color: var(--text); }
.menu-body small { font-size: 12px; color: var(--muted); }
.menu-body > a { color: var(--bad); font-size: 14px; }
.menu-body button:hover { color: var(--accent-text); }
.attention { margin: 0 var(--s5) var(--s3); padding: 10px 12px; border-left: 2px solid currentColor; background: var(--bg3); font-size: 13.5px; line-height: 1.5; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.attention.warn { color: var(--warn); } .attention.bad { color: var(--bad); }
.attention .muted { color: var(--muted); }
.agent-details { border-top: 1px solid var(--line); }
.agent-details > summary { padding: 10px var(--s5); cursor: pointer; font-size: 13px; color: var(--muted); }
.agent-details > summary:hover { color: var(--text); }
.agent-details dl.kv { margin: 0; padding: 0 var(--s5) var(--s3); display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 16px; font-size: 13.5px; }
.agent-details dl.kv dt { color: var(--muted); }
.agent-details dl.kv dd { margin: 0; color: var(--text-2); }
.checks { list-style: none; margin: 0; padding: 0 var(--s5) var(--s4); font: 400 12.5px var(--mono); }
.checks li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 10px; padding: 5px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.checks li .n { color: var(--faint); } .checks li .res { text-align: right; }
.checks li.ok .res { color: var(--ok); } .checks li.bad .res, .checks li.bad .why { color: var(--bad); }
.checks li.warn .res, .checks li.warn .why { color: var(--warn); } .checks li.muted .res { color: var(--muted); }
.checks li .why { grid-column: 2 / 4; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.first-agent { margin-top: var(--s5); max-width: 720px; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-raise); display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.first-agent h2 { margin: 0; font: 600 18px var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); }
.first-agent h2::before { display: none; }
.first-agent p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.55; }
.retired { margin-top: var(--s5); font-size: 13.5px; color: var(--muted); }
.retired summary { cursor: pointer; }
.retired ul { margin: var(--s2) 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 760px) {

  .agent-actions { grid-column: 1 / -1; }
  details.menu .menu-body { left: 0; right: auto; width: min(340px, calc(100vw - 48px)); }
  .attention { margin: 0 var(--s4) var(--s3); }
}
.mono { font-family: var(--mono); }

/* --- Settings · Agent rules: a Concierge bar, then plain-language groups that open on demand ---------------- */

.concierge { margin-top: var(--s4); padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-raise); }
.concierge label { display: block; margin-bottom: var(--s2); font-size: 13px; color: var(--muted); }
.concierge-row { display: flex; gap: var(--s2); }
.concierge-row input { flex: 1 1 auto; }
.proposal { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 14px; }
.proposal-acts { display: flex; align-items: center; gap: var(--s3); }
.proposal pre { max-width: 520px; max-height: 260px; overflow: auto; }
.rules { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }

fieldset.choice { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--s2); }
fieldset.choice.inline { flex-direction: row; flex-wrap: wrap; gap: var(--s2) var(--s5); }
fieldset.choice legend { margin-bottom: var(--s2); padding: 0; font-size: 13px; color: var(--muted); }
fieldset.choice label, label.toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
fieldset.choice label input, label.toggle input { margin-top: 3px; }
fieldset.choice label span, label.toggle span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
fieldset.choice b, label.toggle b { font-weight: 500; color: var(--text); }
fieldset.choice small, label.toggle small { font-size: 12.5px; color: var(--muted); }
.hint { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--muted); }
.field-row { display: flex; flex-wrap: wrap; gap: var(--s4); }
.field-row .field { flex: 1 1 180px; }
.checks-group { display: flex; flex-direction: column; gap: var(--s2); }
.checks-group .legend { font-size: 13px; color: var(--muted); }

.danger-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.small { font-size: 12.5px; }
@media (max-width: 760px) { .concierge-row { flex-direction: column; } }
.field small.hint { font: 400 12.5px var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.rules-summary { margin: var(--s4) 0 0; padding: var(--s4) var(--s5); border: 1px solid var(--line); border-left: 3px solid var(--accent-line); border-radius: var(--r); background: var(--bg-raise); font-size: 14.5px; line-height: 1.55; color: var(--text); }
.impact { margin: var(--s2) 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--warn); }
.notice.confirm-step { display: flex; flex-direction: column; gap: var(--s2); border-color: var(--accent-line); color: var(--text); }
.notice.confirm-step .small, .notice.confirm-step a { color: var(--muted); }

.history .version { display: flex; flex-direction: column; gap: var(--s2); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.history .version:last-of-type { border-bottom: 0; }
.version-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); font-size: 14px; }
.history .cands { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.history form { align-self: flex-start; }

.role-form { display: flex; gap: var(--s2); align-items: center; }

/* --- Monitor pages (Overview, Activity, Escalations, Conversations): calm lists, plain status, detail on demand */
.seg-links { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-raise); }
.seg-links a { padding: 6px 12px; border-radius: 7px; font-size: 13px; color: var(--muted); text-decoration: none; }
.seg-links a:hover { color: var(--text); }
.seg-links a.current { background: var(--bg3); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.empty-state { margin-top: var(--s5); padding: var(--s6) var(--s5); border: 1px dashed var(--line-strong); border-radius: var(--r); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.empty-state b { font: 600 15px var(--sans); color: var(--text); }
.empty-state span { font-size: 14px; color: var(--muted); }
.empty-state.ok b { color: var(--ok); }

/* Overview */
.needs { margin-top: var(--s5); }
.needs h2 { margin: 0 0 var(--s3); font: 600 15px var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); }

/* Activity */
.held { margin-top: var(--s5); border: 1px solid var(--accent-line); border-radius: var(--r); background: var(--bg-raise); }
.held > header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.held > header h2 { margin: 0; font: 600 15px var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); }
.held > header a { font-size: 13px; color: var(--accent-text); }
.held ul { list-style: none; margin: 0; padding: 0; }
.held li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; padding: var(--s3) var(--s4); font-size: 13.5px; color: var(--text-2); }
.held li + li { border-top: 1px solid var(--line); }
.held-count { font: 600 14px var(--sans); color: var(--warn); font-variant-numeric: tabular-nums; }
.held-rule { font-size: 12px; color: var(--muted); }
.act { margin-top: var(--s5); }
.act-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-raise); }
.act-more { margin-top: var(--s3); }

/* Escalations */

/* Conversations */
.conv { margin-top: var(--s5); display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: var(--s4); align-items: start; }
.conv-threads { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-raise); overflow: hidden; }
.conv-threads li + li { border-top: 1px solid var(--line); }
.conv-threads a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); padding: var(--s3) var(--s4); color: inherit; text-decoration: none; }
.conv-threads a:hover { background: var(--bg3); }
.conv-threads a.current { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.conv-parties { font: 500 14px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-meta { grid-column: 1; font-size: 12.5px; color: var(--muted); }
.conv-threads .st { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.conv-thread { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-raise); min-height: 200px; }
.conv-thread > header { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); }
.conv-thread > header h2 { margin: 0; font: 600 15px var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); }
.conv-msgs { list-style: none; margin: 0; padding: 0; }
.conv-msgs li { padding: var(--s4) var(--s5); }
.conv-msgs li + li { border-top: 1px solid var(--line); }
.conv-from { font-size: 13px; }
.conv-from b { font-weight: 600; color: var(--text); }
.conv-body { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; }
.conv-raw { margin-top: var(--s2); }
.conv-raw summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.conv-pick { padding: var(--s6) var(--s5); }

@media (max-width: 900px) { .conv { grid-template-columns: 1fr; } }
@media (max-width: 760px) {

  .held li { grid-template-columns: 36px minmax(0, 1fr); } .held-rule { grid-column: 2; }

}

/* --- Services, Transactions, Billing and Settings (organisation, team, notifications): cards, plain rows, collapsed detail --- */
.people { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }

.empty-state { margin-top: var(--s4); padding: var(--s6) var(--s5); border: 1px dashed var(--line-strong); border-radius: var(--r); display: flex; flex-direction: column; gap: 6px; text-align: center; color: var(--muted); font-size: 14px; }
.empty-state b { color: var(--text); font-weight: 500; }
details.how { margin-top: var(--s4); font-size: 13.5px; color: var(--text-2); }
details.how > summary { cursor: pointer; color: var(--muted); }
details.how > summary:hover { color: var(--text); }
details.how .cands, details.how p, details.how pre { margin-top: var(--s2); }

.page-head > .st { align-self: flex-end; }


.inline-form { display: flex; gap: var(--s2); }
.inline-form input { min-width: 220px; }
.people { margin: 0; padding: var(--s2) var(--s5); gap: 0; }
.people > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.people > li:first-child { border-top: 0; }
.people b { font-weight: 500; color: var(--text); }
.people small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.invite-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
.invite-row .field:first-child { flex: 1 1 260px; }
.menu-body .danger-text { color: var(--bad); }

.settings-partial .your-data { padding: var(--s5); }
@media (max-width: 760px) {

  .inline-form { flex-direction: column; } .inline-form input { min-width: 0; }
  .people > li { grid-template-columns: minmax(0, 1fr) auto; }
}

.hint a, .empty-state a { color: var(--accent-text); }
.side .ext { margin-left: 4px; font-size: 11px; color: var(--muted); }

/* Shared by the review of an agent's announcement and other pages: code blocks and lists of problems. */
.btn.small { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
button.link { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 13px; cursor: pointer; align-self: flex-start; }
button.link:hover { text-decoration: underline; }
.wz-code { margin: 0; max-height: 260px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); font: 12px/1.5 var(--mono); font-variant-ligatures: none; white-space: pre; }
.wz-issues { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.wz-issues li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--bg); border-left: 3px solid var(--warn); }
.wz-issues li.error { border-left-color: var(--bad); }
.wz-where { font: 500 11.5px var(--mono); color: var(--muted); flex-basis: 100%; }

.cred-issued input { font-family: var(--mono); }
.cred-issued .env-block { margin: var(--s2) 0; padding: var(--s2) var(--s3); font: 12.5px var(--mono); white-space: pre-wrap; word-break: break-all; user-select: all; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); }
.runtime-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) 120px minmax(160px, 1fr); gap: var(--s3); align-items: end; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
@media (max-width: 760px) {
  .runtime-row { grid-template-columns: 1fr; }
}
.cred-new { padding: 0; border: 0; }
label.field textarea.mono { font-family: var(--mono); font-size: 12.5px; }

.tag.bad { border-color: rgba(255, 107, 94, 0.45); background: var(--bad-soft); }

/* Network: the agents interacting, live. The map takes two thirds, the stream the rest; below 900px
   they stack. Lines are drawn in the accent, a failing pair in the warning colour, with words in its title. */
.net-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s6); margin: 0 0 var(--s5); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-raise); }
.net-strip > div { display: flex; flex-direction: column; gap: 2px; }
.net-strip .k { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.net-strip .v { font: 600 20px var(--sans); font-variant-numeric: tabular-nums; }
.net-strip .ref { margin-left: auto; font-size: 12px; color: var(--muted); }
.net-live { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--s4); margin: 0 0 var(--s5); }
@media (max-width: 900px) { .net-live { grid-template-columns: 1fr; } }
.net-map-panel, .net-stream-panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-raise); }
.net-panel-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
.net-panel-h .lbl { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.net-panel-h .lbl::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--accent); vertical-align: 1px; }
.net-periods { margin: 0; }
.net-map { padding: var(--s2); overflow-x: auto; }
.net-empty { margin: 0; padding: 0 var(--s4) var(--s4); color: var(--muted); font-size: 13px; }
.net-svg { display: block; min-height: 120px; }
.net-node rect { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.25; stroke-dasharray: 4 3; }
.net-node.mine rect { fill: var(--accent-soft); stroke: var(--accent-line); stroke-dasharray: none; }
.net-node.centre rect { stroke: var(--accent); stroke-width: 2; }
.net-node text { fill: var(--text); font: 500 12.5px var(--sans); }
.net-node.explore text, .net-node.other text { fill: var(--text-2); }
a.net-node:hover rect, a.net-node:focus rect { stroke: var(--accent); }
.net-line { cursor: pointer; outline: none; }
.net-hit { fill: none; stroke: transparent; stroke-width: 14; }
.net-edge { fill: none; stroke: var(--accent); opacity: .8; }
.net-line.bad .net-edge { stroke: var(--warn); }
.net-line:hover .net-edge, .net-line:focus .net-edge, .net-line.picked .net-edge { opacity: 1; }
.net-arrowhead.ok { fill: var(--accent); }
.net-arrowhead.bad { fill: var(--warn); }
.net-edge-label { fill: var(--text-2); font: 500 11.5px var(--sans); paint-order: stroke; stroke: var(--bg-raise); stroke-width: 4px; stroke-linejoin: round; }
.net-edge-count { fill: var(--muted); font-size: 11px; }
.net-line.pulse .net-edge { animation: net-pulse 1.6s ease-out 1; }
@keyframes net-pulse { 0% { opacity: 1; stroke-width: 8; } 100% { opacity: .8; } }
.net-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.net-live.live .net-live-dot { background: var(--ok); }
.net-stream { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow-y: auto; }
.net-row { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
.net-row-main { font-size: 13.5px; }
.net-row-sub { font-size: 12px; color: var(--muted); }
.net-row-sub b { font-weight: 600; color: var(--text-2); }
.net-pair { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s4); background: var(--accent-soft); font-size: 13px; }
.net-stream-empty { padding: var(--s3) var(--s4); margin: 0; font-size: 13px; }
.net-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); }
@media (max-width: 1100px) { .net-tables { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .net-line.pulse .net-edge { animation: none; } }

/* Network's parts: posts as a reading list, relationship facts as key-value rows. */
.net-filter { align-self: end; }
.net-filter select { min-width: 200px; }
.net-posts { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: 1px solid var(--line); }
.net-posts > li { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.net-post-head { font-size: 13.5px; }
.net-body { margin: 6px 0; max-width: 72ch; line-height: 1.55; white-space: pre-line; }
.net-post-foot { font-size: 12.5px; }
.sec dl.kv { margin: 0; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 16px; font-size: 13.5px; }
.sec dl.kv dt { color: var(--muted); }
.sec dl.kv dd { margin: 0; }
@media (max-width: 640px) { .sec dl.kv { grid-template-columns: 1fr; gap: 2px; } .sec dl.kv dd { margin-bottom: 8px; } }

/* Activity: one row per event, the technical record folded under each. */
.act-table td { vertical-align: top; }
.act-tech { margin-top: 4px; font-size: 12px; }
.act-tech summary { color: var(--muted); cursor: pointer; }
.act-tech pre { max-width: 64ch; max-height: 260px; overflow: auto; white-space: pre-wrap; font-size: 11.5px; }

/* Overview: the participation figures sit inside their section; the map is folded away. */
.sec .figures { margin: 0 0 var(--s4); }
.figures.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .figures.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figures.five > div:nth-child(4) { border-left: 0; } .figures.five > div:nth-child(n+4) { border-top: 1px solid var(--line); } }
@media (max-width: 720px) { .figures.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures.five > div:nth-child(4) { border-left: 1px solid var(--line); } .figures.five > div:nth-child(odd) { border-left: 0; }
  .figures.five > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* Money: work between agents and people's runs on Explore are reported under their own headings. */
.sub-h { margin: var(--s4) 0 var(--s2); font-size: 13.5px; font-weight: 600; }

/* Add an agent and the review of what an agent announced: read-only, then one confirmation. */
.add-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--s4); font-size: 14px; line-height: 1.55; }
.add-steps .wz-code { margin: var(--s2) 0; }
.pre-flight li.ok { border-left-color: var(--ok); }
.diff-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.review-services { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.review-services li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); padding: 12px 0; border-bottom: 1px solid var(--line); }
.review-services li p { margin: 4px 0 0; max-width: 72ch; font-size: 13px; color: var(--muted); }
.review-services li.off b { color: var(--muted); }
.confirm-box { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s5); }