/* The Eleven theme (ElevenOS): Inter, gray page, white cards, blue primary, pill badges. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2");
}

:root {
  --bg: #f4f4f5;
  --panel: #ffffff;
  --card: #ffffff;
  --panel-2: #f3f4f6;
  --hover: #f1f5f9;
  --sel: #e5e6e8;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #94a3b8;
  --text: #111827;
  --muted: #6a7282;
  --accent: #155dfc;
  --accent-text: #ffffff;
  --brand: #fe6e00;
  --pass: #008138;
  --pass-bg: #dcfce7;
  --fail: #c10007;
  --fail-bg: #ffe2e2;
  --warn: #a36100;
  --warn-bg: #fef9c2;
  --run: #155dfc;
  --run-bg: #dbeafe;
  --send: #4f39f6;
  --recv: #0092b5;
  --engine: #99a1af;
  --star: #cd8900;
  --press: brightness(.95);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  color-scheme: light;
}

/* Dark: the system's, unless the header's theme button picked one (html[data-theme]). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09090b;
    --panel: #18181b;
    --card: #18181b;
    --panel-2: #27272a;
    --hover: #232327;
    --sel: #2f2f33;
    --border: #ffffff1a;
    --input: #ffffff26;
    --ring: #6a7282;
    --text: #fafafb;
    --muted: #9f9fae;
    --accent: #38bdf8;
    --accent-text: #09090b;
    --brand: #ff8943;
    --pass: #2fbf4f;
    --pass-bg: #0f2a18;
    --fail: #ff4d4d;
    --fail-bg: #3a1416;
    --warn: #f5ba26;
    --warn-bg: #33270c;
    --run: #38bdf8;
    --run-bg: #0c2a3d;
    --send: #a58bff;
    --recv: #50d9ef;
    --engine: #6a7282;
    --star: #f5ba26;
    --press: brightness(1.2);
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .3);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .4), 0 1px 2px -1px rgb(0 0 0 / .4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #09090b;
  --panel: #18181b;
  --card: #18181b;
  --panel-2: #27272a;
  --hover: #232327;
  --sel: #2f2f33;
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: #6a7282;
  --text: #fafafb;
  --muted: #9f9fae;
  --accent: #38bdf8;
  --accent-text: #09090b;
  --brand: #ff8943;
  --pass: #2fbf4f;
  --pass-bg: #0f2a18;
  --fail: #ff4d4d;
  --fail-bg: #3a1416;
  --warn: #f5ba26;
  --warn-bg: #33270c;
  --run: #38bdf8;
  --run-bg: #0c2a3d;
  --send: #a58bff;
  --recv: #50d9ef;
  --engine: #6a7282;
  --star: #f5ba26;
  --press: brightness(1.2);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .3);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .4), 0 1px 2px -1px rgb(0 0 0 / .4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body.mode-quick .suite-only { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13.5px/1.45 var(--font);
  font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
h1, h2, h3, h4 { letter-spacing: -.01em; }

/* Top bar: the Eleven logo, a divider and the product pill, as in ElevenOS. */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  flex: none;
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand .logo { height: 28px; width: auto; display: block; }
.brand .divider { width: 1px; height: 24px; background: var(--border); }
.product { background: var(--accent); color: var(--accent-text); padding: 2px 10px; border-radius: 999px; text-transform: uppercase; font-weight: 600; letter-spacing: .05em; font-size: 10px; white-space: nowrap; }
.topbar svg, .menu svg, .avatar svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Round icon buttons on muted grey (theme, help); ghost ones only show on hover (sidebar). */
.icon-btn { flex: none; width: 36px; height: 36px; padding: 0; border: none; border-radius: 999px; background: var(--panel-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn:hover { filter: var(--press); }
.icon-btn.ghost { background: transparent; border-radius: var(--radius); }
.icon-btn.ghost:hover { background: var(--panel-2); filter: none; }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:focus-visible, .profile:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
#themeBtn .sun { display: none; }
:root[data-theme="dark"] #themeBtn .sun { display: block; }
:root[data-theme="dark"] #themeBtn .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #themeBtn .sun { display: block; }
  :root:not([data-theme="light"]) #themeBtn .moon { display: none; }
}
/* Search: a muted pill that narrows the saved targets. */
.search { flex: 1; max-width: 512px; margin: 0 24px; position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search input { height: 36px; border: none; border-radius: 999px; background: var(--panel-2); box-shadow: none; padding: 0 64px 0 38px; }
.search input:hover { filter: var(--press); }
.search input:focus { filter: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search kbd { position: absolute; right: 10px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 4px; background: var(--panel); color: var(--muted); font: 500 10.5px var(--font); pointer-events: none; }
/* The account: the avatar (initials when signed in), and its menu. */
.account { position: relative; }
.profile { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; border: none; border-radius: 999px; background: none; color: var(--text); font: inherit; font-weight: 500; cursor: pointer; }
.profile:hover, .profile[aria-expanded="true"] { background: var(--panel-2); }
.profile > svg { width: 16px; height: 16px; color: var(--muted); }
.profile-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-name:empty { display: none; }
.avatar { width: 28px; height: 28px; flex: none; border-radius: 999px; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.avatar.anon { background: var(--panel-2); color: var(--muted); }
.avatar svg { width: 16px; height: 16px; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 248px; padding: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.menu-label { padding: 6px 8px; }
.menu-name { font-weight: 600; }
.menu-sub { color: var(--muted); font-size: 12px; }
.menu-sub:empty { display: none; }
.menu-sep { height: 1px; margin: 4px -4px; background: var(--border); }
.menu-item { display: flex; width: 100%; height: 32px; align-items: center; gap: 8px; padding: 0 8px; border: none; border-radius: 4px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.menu-item:hover, .menu-item:focus { background: var(--panel-2); outline: none; }
.menu-item svg { width: 16px; height: 16px; color: var(--muted); }
.menu-foot { padding: 4px 8px 6px; color: var(--muted); font-size: 11.5px; }
/* A newer version is ready (the desktop app): a dot on the avatar, and the menu says which. */
.profile { position: relative; }
.update-dot { position: absolute; top: 2px; left: 25px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel); }
.menu-note { padding: 6px 8px 2px; font-weight: 600; font-size: 12.5px; }
/* Secret fields: masked text fields, not password fields, so password managers leave them be (app.js). */
input.masked { -webkit-text-security: disc; }
/* The web app until sign-in is settled (web.js): nothing but the sign-in screen, if any, and the
   desktop app's downloads it opens. */
html.auth-pending body > :not(.signin, #appDialog, #toast) { visibility: hidden; }
/* The web app's sign-in screen (web.js), over the app until someone signs in: the ElevenOS card. */
.signin { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg); }
.signin .card { width: 100%; max-width: 448px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 32px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); text-align: center; }
.signin .logo { width: 180px; height: auto; margin-bottom: 28px; }
.signin h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.signin p { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.signin .btn { height: 44px; padding: 0 24px; border-radius: 999px; font-size: 14px; }
.signin .get-app { margin-top: 12px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.signin .get-app:hover { color: var(--text); }
/* In a browser (web.js): no CLI, MCP or load tests, which are desktop only. */
.web #cliBtn, .web #qCliBtn, .web #suiteCliBtn, .web #qLoadBtn, .web #pCli { display: none !important; }
/* Nor self-update: erad.app serves the newest UI on every load. */
.web #updateItems, .web #updateDot, .web #checkUpdateBtn { display: none !important; }
/* Sharing with everyone at the company. */
.share-everyone { margin: 8px 0; }
.member.everyone .who { font-weight: 600; }
/* Sharing: colleagues found by name, under the box. */
.suggest-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.suggest-wrap input { flex: 1; min-width: 0; }
.suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 4px; }
.suggest .sg { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: var(--radius); cursor: pointer; }
.suggest .sg.on, .suggest .sg:hover { background: var(--panel-2); }
.suggest .sg small, .member .who small.email { color: var(--muted); }
/* Export a collection: the passphrase, when its secrets go in. */
.cx-pass { display: flex; flex-direction: column; gap: 8px; }
#hList td:last-child { text-align: right; white-space: nowrap; }
/* Get the desktop app: in the web app only. */
html:not(.web) #getAppBtn { display: none !important; }
.app-downloads { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }
.app-downloads .btn.primary { text-decoration: none; }
.app-downloads a:not(.btn) { color: var(--accent); }
.app-downloads .cmd-block { align-self: stretch; }
.modes { display: flex; background: var(--panel-2); border-radius: var(--radius-lg); padding: 3px; }
.mode { font: inherit; border: none; background: none; color: var(--muted); padding: 4px 12px; border-radius: var(--radius); cursor: pointer; }
.mode.active { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.target-summary { color: var(--muted); font-family: var(--mono); font-size: 12px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }

/* Buttons and inputs: the outline button by default, primary in blue. */
.btn {
  font: inherit;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--input);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, filter .15s;
}
.btn:hover:not(:disabled) { background: var(--panel-2); }
.btn:focus-visible, .seg-btn:focus-visible, .tab:focus-visible, .qtab:focus-visible, .qitem:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 90%, transparent); }
.btn.danger { color: var(--fail); border-color: color-mix(in srgb, var(--fail) 40%, var(--input)); }
.btn.danger:hover:not(:disabled) { background: var(--fail-bg); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: var(--panel-2); }
.btn.small { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn.big { height: 40px; padding: 0 24px; font-size: 14px; border-radius: 999px; }
.busy { position: relative; }
.btn.busy { color: transparent !important; }
.btn.busy::after, .connbar.busy .cb-status::before {
  content: ""; width: 12px; height: 12px;
  border: 2px solid var(--muted); border-top-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.primary.busy::after { border-color: var(--accent-text); border-top-color: transparent; }
.btn.busy::after { position: absolute; inset: 0; margin: auto; }
.connbar.busy .cb-status::before { display: inline-block; margin-right: 6px; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* The desktop app waiting for the browser's sign-in. */
.signin-wait { display: flex; gap: 12px; align-items: flex-start; }
.signin-wait p { margin: 0; }
.spinner { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 2px solid var(--muted); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }

input, select {
  font: inherit;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  min-width: 0;
  height: 34px;
  transition: border-color .15s, box-shadow .15s;
}
/* Selects drop the native gradient for the outline field and a chevron. */
select { -webkit-appearance: none; appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; text-overflow: ellipsis; cursor: pointer; }
/* Checkboxes: the ElevenOS box, blue with a check when ticked (a dash when some of a group are). */
input[type=checkbox] {
  -webkit-appearance: none; appearance: none;
  flex: none; width: 16px; min-width: 16px; height: 16px; margin: 0; padding: 0;
  display: inline-grid; place-content: center;
  border: 1px solid var(--ring); border-radius: 4px; background: var(--panel); box-shadow: var(--shadow-xs);
  cursor: pointer; transition: background-color .1s, border-color .1s;
}
input[type=checkbox]::before { content: ""; width: 10px; height: 10px; background: var(--accent-text); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform .1s; }
input[type=checkbox]:checked, input[type=checkbox]:indeterminate { background: var(--accent); border-color: var(--accent); }
input[type=checkbox]:checked::before { transform: scale(1); }
input[type=checkbox]:indeterminate::before { clip-path: inset(40% 10% 40% 10%); transform: scale(1); }
input[type=checkbox]:hover:not(:disabled) { border-color: var(--accent); }
input[type=checkbox]:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
input[type=checkbox]:disabled { opacity: .5; cursor: default; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
.pick .btn { height: 34px; }
input:focus, select:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
select:disabled { color: var(--muted); }
input.overridden { border-color: var(--warn); }
label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 500; min-width: 0; }
label input, label select, label textarea { font-weight: 400; }
/* A checkbox and its text: the box beside the first line, however many lines the text takes. */
label.check { flex-direction: row; align-items: flex-start; gap: 10px; color: var(--text); font-weight: 400; font-size: 13px; line-height: 1.4; cursor: pointer; }
label.check input { margin-top: 1px; }
.hint { margin: 0; color: var(--muted); font-size: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row { display: flex; gap: 8px; align-items: center; }
.pick { display: flex; gap: 6px; }
/* A password or secret: one field, the eye (show/hide) inside it at the right edge. */
.secret { position: relative; display: block; }
.secret input { width: 100%; padding-right: 36px; }
.secret .eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); height: 26px; width: 26px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.secret .eye:hover { background: var(--panel-2); color: var(--text); }
.src { font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 999px; }
.src:empty { display: none; }
.src.api { background: var(--run-bg); color: var(--run); }
.src.edited { background: var(--warn-bg); color: var(--warn); }
.kv { margin: 0; padding: 10px; background: var(--panel-2); border-radius: var(--radius-lg); font: 11.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; max-height: 220px; overflow: auto; }

/* Connection bar */
.connbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr) minmax(160px, 1fr);
  gap: 12px;
  align-items: end;
  padding: 10px 16px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.cb-status { color: var(--muted); font-size: 12px; padding-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-status.err { color: var(--fail); }

/* Suite layout */
.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(340px, 420px) 1fr;
}
.plan { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.plan-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--panel); gap: 8px; }
/* Segmented control: the ElevenOS tabs list. */
.seg { display: flex; background: var(--panel-2); border-radius: var(--radius-lg); padding: 3px; gap: 2px; }
.seg-btn { font: inherit; font-size: 12.5px; font-weight: 500; border: none; background: none; color: var(--muted); padding: 4px 10px; border-radius: var(--radius); cursor: pointer; white-space: nowrap; }
.seg-btn:hover { color: var(--text); }
.seg-btn:disabled { opacity: .45; cursor: default; color: var(--muted); }
.seg-btn.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }
.plan-list { flex: 1; overflow-y: auto; }
.group-head { padding: 12px 12px 4px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; position: sticky; top: 0; background: var(--bg); z-index: 1; }
.group-head.imported { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; padding-right: 12px; }

.group-head.imported .del { text-transform: none; }
.packet-editor { margin-bottom: 12px; }
.packet-editor summary { cursor: pointer; color: var(--muted); margin-bottom: 6px; }
.packet-text { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 12px; line-height: 1.45; resize: vertical; padding: 8px 10px; border: 1px solid var(--input); border-radius: var(--radius); background: var(--panel); color: var(--text); box-shadow: var(--shadow-xs); }
.packet-text:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
/* A target's notes, for whoever runs it (shared collections). */
/* A target's notes: shown rendered, written in Markdown. */
.notes { display: flex; flex-direction: column; gap: 6px; }
.notes-head { display: flex; align-items: center; gap: 10px; }
.notes-label { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.md { line-height: 1.5; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md pre, .md blockquote { margin: 0 0 8px; }
.md ul, .md ol { padding-left: 22px; }
.md h4, .md h5, .md h6 { margin: 12px 0 4px; font-size: 14px; font-weight: 600; }
.md h4 { font-size: 15px; }
.md a { color: var(--link, var(--accent)); text-decoration: underline; text-underline-offset: 2px; }
.md code { font-family: var(--mono); font-size: .92em; padding: 1px 5px; border-radius: 4px; background: var(--panel-2); }
.md pre { padding: 10px 12px; border-radius: var(--radius); background: var(--panel-2); overflow-x: auto; }
.md pre code { padding: 0; background: none; }
.md blockquote { padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted); }
.note-view { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.note-text { display: block; width: 100%; box-sizing: border-box; height: 34px; font: inherit; line-height: 1.45; padding: 6px 10px; border: 1px solid var(--input); border-radius: var(--radius); background: var(--panel); color: var(--text); box-shadow: var(--shadow-xs); resize: none; overflow-y: auto; }
.note-text:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
.packet-status { font-size: 12px; color: var(--muted); margin: 4px 0; }
.packet-status.bad { color: var(--fail); }
.test {
  display: grid;
  grid-template-columns: 16px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  background: var(--panel);
}
.test:hover { background: var(--hover); }
.test.selected { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
.test.off .name { color: var(--muted); }
.test input[type=checkbox], .group-head input[type=checkbox] { margin: 0; }
.test .name { min-width: 0; }
.test .name div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.test .meta { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.test .expect { color: var(--muted); font-size: 11.5px; }
/* A test's run to another of the server's addresses (To both), under its own */
.test.at { padding-top: 3px; padding-bottom: 3px; }
.test.at .at-mark { color: var(--muted); text-align: center; }
.test.at .name div:first-child { font-size: 12px; }
.test .del, .group-head .del { border: none; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; }
.plan-footer { padding: 8px 12px; border-top: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 12px; }
.plan-footer b.pass { color: var(--pass); }
.plan-footer b.fail { color: var(--fail); }

.chip { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; min-width: 52px; text-align: center; }
.chip:empty { visibility: hidden; }
.chip.pass { background: var(--pass-bg); color: var(--pass); }
.chip.fail { background: var(--fail-bg); color: var(--fail); }
.chip.error { background: var(--warn-bg); color: var(--warn); }
.chip.skipped, .chip.queued { background: var(--panel-2); color: var(--muted); }
.chip.running { background: var(--run-bg); color: var(--run); }

/* Detail */
.detail { display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 16px 8px; gap: 12px; }
.detail-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.detail-sub { color: var(--muted); font-size: 12px; margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.detail-sub select { width: auto; height: 26px; padding: 0 24px 0 6px; font-size: 12px; background-position: right 6px center; }
.tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.tab, .qtab { font: inherit; font-weight: 500; border: none; background: none; color: var(--muted); padding: 9px 10px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover, .qtab:hover { color: var(--text); }
.tab.active, .qtab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px; }
.empty { color: var(--muted); padding: 24px 0; text-align: center; }

.facts { width: 100%; border-collapse: collapse; }
.facts td { padding: 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.facts td:first-child { width: 22px; text-align: center; }
.facts td:nth-child(2) { color: var(--muted); width: 38%; }
.facts td:last-child { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.mark-ok { color: var(--pass); }
.mark-bad { color: var(--fail); }
.callout { padding: 10px 12px; border-radius: var(--radius-lg); margin-bottom: 12px; }
.callout.pass { background: var(--pass-bg); color: var(--pass); }
.callout.fail { background: var(--fail-bg); color: var(--fail); }
.callout.error { background: var(--warn-bg); color: var(--warn); }
.callout.running { background: var(--run-bg); color: var(--run); }
.resume-note { margin: 10px 0 0; padding: 7px 10px; font-size: 12.5px; }

.attrs { width: 100%; border-collapse: collapse; font-size: 12px; }
.attrs th { text-align: left; color: var(--muted); font-weight: 500; padding: 5px 6px; border-bottom: 1px solid var(--border); }
.attrs td { padding: 5px 6px; border-bottom: 1px solid var(--border); font-family: var(--mono); word-break: break-all; }
.attrs td:first-child { color: var(--muted); width: 82px; }

.log-tab { display: flex; flex-direction: column; padding: 0; }
.log-toolbar { display: flex; gap: 10px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.log-toolbar input#logFilter { flex: 1; }
.log { flex: 1; overflow: auto; padding: 8px 16px; font: 11.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; }
.log .l { display: grid; grid-template-columns: 58px 1fr; gap: 8px; }
.log .t { color: var(--muted); text-align: right; }
.log .send { color: var(--send); }
.log .recv { color: var(--recv); }
.log .ok { color: var(--pass); }
.log .warn { color: var(--warn); }
.log .error { color: var(--fail); font-weight: 600; }
.log .engine { color: var(--engine); }

/* Settings drawer */
/* Over the top bar (10) and a narrow window's sidebar (40). */
.scrim { position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: 44; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw;
  background: var(--panel); border-left: 1px solid var(--border); z-index: 45;
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.drawer-body { overflow-y: auto; padding: 4px 16px 24px; }
.dsec { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.dsec:last-child { border-bottom: none; }
.dsec > .btn { align-self: flex-start; }
.dsec h3 { margin: 0; font-size: 14px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
details.sub > summary { cursor: pointer; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
details.sub { display: flex; flex-direction: column; gap: 8px; }
/* A text link inside a field label ("use a profile", "use a supplicant"). */
.link-btn { font: inherit; font-size: 12px; font-weight: 500; background: none; border: none; padding: 0; margin-left: 8px; color: var(--accent); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
/* What a configuration profile supplies: shown, not edited. */
input.readonly { background: var(--panel-2); color: var(--muted); box-shadow: none; }
.qcert-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10px 12px; }
.extra-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.extra-row { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(130px, 1.6fr) minmax(100px, 1.4fr) 24px; gap: 6px; }
.combo { position: relative; min-width: 0; }
.combo .combo-input { width: 100%; padding-right: 24px; }
.combo-arrow { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 4px 6px; }
.combo-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; max-height: 280px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 4px; min-width: 220px; }
.combo-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 8px; border-radius: var(--radius); cursor: pointer; }
.combo-item small { color: var(--muted); white-space: nowrap; }
.combo-item:hover, .combo-item.active { background: var(--panel-2); }
.combo-group { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 8px 8px 2px; }
.combo-empty { padding: 6px 8px; color: var(--muted); font-size: 12px; }
.extra-row .x-hint { grid-column: 1 / -1; font-size: 11px; color: var(--muted); min-height: 0; margin: -1px 0 4px 2px; }
.extra-row .x-hint:empty { display: none; }
.extra-row .x-hint.bad { color: var(--fail); }
.extra-row button { border: none; background: none; color: var(--muted); cursor: pointer; }

/* Quick test: the saved targets down the side, like the ElevenOS sidebar. */
.quick { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px 1fr; }
.quick.no-sidebar { grid-template-columns: 1fr; }
.quick.no-sidebar .qprofiles { display: none; }
.qprofiles { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.qlist { overflow-y: auto; flex: 1; padding: 0 8px 8px; }
/* The sidebar: the collection switcher, then its targets. */
.cswitch { position: relative; display: flex; gap: 6px; align-items: center; padding: 12px 10px 8px; }
.cswitch-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-xs); }
.cswitch-btn:hover { background: var(--hover); }
.cswitch-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
.cs-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-sub { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-new { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cs-chevron { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-open, .link-copy, .page-more { flex: none; }
.cs-open svg, .link-copy svg, .page-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cs-open.on { background: var(--sel); }
.cswitch-menu { left: 10px; right: 10px; top: calc(100% - 2px); max-height: 62vh; overflow-y: auto; }
.cswitch-menu .menu-label { padding: 8px 8px 2px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.cs-item .cs-check { flex: none; width: 14px; color: var(--accent); font-weight: 700; }
.cs-item .cs-iname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-item .cs-star { color: var(--star); font-size: 12px; }
.cs-item .count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* Search results, under their collection's name. */
.qsection { padding: 14px 6px 0; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.qsection:first-child { padding-top: 6px; }
.qfoot { padding: 10px 14px; border-top: 1px solid var(--border); background: var(--panel); }
/* A collection: its head (fold, name, count, rename and delete on hover, favorite), then its targets. */
/* A shared collection's badge: who it's shared with (yours), or what you may do (others'). */
.cbadge { flex: none; padding: 0 7px; border-radius: 999px; background: var(--run-bg); color: var(--run); font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 16px; }
.cbadge.in { background: var(--panel-2); color: var(--muted); }
.cbadge.new { background: var(--accent); color: var(--accent-text); }
/* A target its collection lets the user only run. */
.view-only { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 11px; font-weight: 600; }
/* The Collections page: every collection, filtered by whose. */
h1.page-title { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 40px; }
.afilter { align-self: flex-start; }
table.acolls .where { display: inline-flex; align-items: center; gap: 6px; }
table.acolls .where svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
table.acolls .star { font: inherit; background: none; border: none; padding: 0 2px; color: var(--muted); cursor: pointer; }
table.acolls .star.on { color: var(--star); }
table.acolls .muted { color: var(--muted); }
table.acolls .cbadge { margin-left: 8px; }
.crumb { align-self: flex-start; margin: 0 0 -2px; padding: 0; border: none; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.crumb:hover { color: var(--text); }

/* A collection's page: its head, then Targets and People. */
.cpage { height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 28px; padding: 28px 24px 40px; container: cpage / inline-size; }
.cpage .page-sub .where { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-weight: 500; }
.cpage .page-sub .where .cloud { display: inline-flex; }
.cpage .btn.star { font-size: 16px; padding: 0 10px; }
.cpage .btn.star.on { color: var(--star); }
.csec { display: flex; flex-direction: column; gap: 10px; }
.csec-head { display: flex; align-items: center; gap: 8px; }
.csec-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.csec-head .spacer { flex: 1; }
.csec > .hint { margin: 0; }
.csec .members, .csec .share-add { max-width: 640px; }
.table-wrap { overflow-x: auto; }
table.ctargets td { vertical-align: top; }
table.ctargets td .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
table.ctargets td.tname { font-weight: 500; white-space: normal; min-width: 160px; }
table.ctargets .muted { color: var(--muted); }
table.ctargets td.who { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
table.runs .dot.run { background: var(--run); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* Who a collection is shared with, then a row to add someone. */
.members { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.member { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.member:last-child { border-bottom: none; }
.member .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member .who small { color: var(--muted); }
.member .what { display: flex; align-items: center; gap: 6px; flex: none; }
.member select { width: auto; height: 30px; }
.share-add { display: flex; gap: 8px; }
.share-add input { flex: 1; }
.share-add select { width: auto; flex: none; }
.packet-status:empty { display: none; }
/* A target row: Duplicate and Move on hover, over the right-hand corner. */
.qrow { position: relative; }
.qrow .qtools { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; visibility: hidden; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
/* Only with a mouse: on a touch screen a hover would take the first tap. */
@media (hover: hover) {
  .qrow:hover .qtools { visibility: visible; }
}
.qrow .qtools button { font: inherit; background: none; border: none; color: var(--muted); cursor: pointer; padding: 1px 6px; }
.qrow .qtools button:hover { color: var(--text); }
.qitem { display: block; width: 100%; text-align: left; font: inherit; font-weight: 500; color: var(--text); background: none; border: none; border-radius: var(--radius); padding: 8px 10px; margin: 1px 0; cursor: pointer; }
.qitem:hover { background: var(--hover); }
.qitem.selected { background: var(--sel); }
.qitem .meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 400; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A target on one line, its last result as a dot. */
.qitem .qname { display: flex; align-items: center; gap: 8px; }
.qitem .qn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.qdot.pass { background: var(--pass); }
.qdot.fail { background: var(--fail); }
.env-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.env-dot.env-production { background: var(--fail); }
.env-dot.env-staging { background: var(--run); }
/* The target page: the form, and the run pane beside it when the page is wide enough (a
   divider between them sets the split), else under it, the whole page scrolling. */
.qmain { min-width: 0; min-height: 0; overflow: hidden; container: qmain / inline-size; }
.qsplit { height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 28px 24px 40px; }
.qsplit > .qleft, .qsplit > .qrun { width: 100%; max-width: 1100px; }
.qleft { display: flex; flex-direction: column; gap: 16px; container: qleft / inline-size; }
.qdivider { display: none; }
/* The form's own Test, under its fields: only beside the run pane. When the pane is under the
   form, its Test is right there. */
.qform-foot { display: none; }
.qrun { display: flex; flex-direction: column; gap: 12px; container: qrun / inline-size; }
/* What the RadSec card hangs from in a narrow pane (below); sticky beside the form. */
.run-head { position: relative; }
@container qmain (min-width: 1000px) {
  .qsplit { flex-direction: row; gap: 0; padding: 0; overflow: hidden; }
  .qsplit > .qleft { flex: 0 0 var(--form-w, 50%); max-width: calc(100% - 380px); min-width: 420px; overflow-y: auto; padding: 28px 20px 40px 24px; }
  .qsplit > .qrun { flex: 1; min-width: 380px; max-width: none; overflow-y: auto; padding: 0 24px 40px 20px; }
  .qdivider { display: block; flex: none; width: 9px; margin: 0 -4px; cursor: col-resize; position: relative; z-index: 3; touch-action: none; }
  .qdivider::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: var(--border); transition: background-color .15s; }
  .qdivider:hover::after, .qdivider.dragging::after { left: 3px; width: 3px; background: var(--accent); }
  .run-head { position: sticky; top: 0; z-index: 2; padding-top: 28px; background: var(--bg); }
  .qform-foot { display: flex; justify-content: flex-end; }
}
/* The run pane: tabs for one test, the suite and a load test. */
.run-head { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; flex-wrap: wrap; }
.run-head .spacer { flex: 1; }
/* On the grey page a segmented control needs a darker track than in a card. */
.qrun .seg { background: var(--sel); }
.run-pane { display: flex; flex-direction: column; gap: 12px; }
.run-actions { display: inline-flex; gap: 8px; }
/* The "From" picker beside Test and Run: as wide as the place it names. */
.run-head .send-from { width: auto; max-width: 200px; }
/* From everywhere: a row per place, its time as a bar against the slowest. */
.qcompare { margin-bottom: 14px; }
table.runs.compare td.num { text-align: right; }
table.runs.compare .muted { color: var(--muted); }
table.runs.compare td.bar { width: 40%; }
table.runs.compare td.bar span { display: block; height: 6px; border-radius: 999px; background: var(--accent); }
/* The RadSec indicator: a pill with a dot (green open, amber idle, hollow none), its details
   in a card on hover or focus. */
.radsec { position: relative; }
.radsec-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 1px solid var(--input); border-radius: 999px; background: var(--panel); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 500; cursor: default; }
.radsec-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
.radsec .dot { width: 8px; height: 8px; flex: none; border-radius: 999px; border: 1.5px solid var(--muted); }
.radsec-pill.open { color: var(--text); }
.radsec-pill.open .dot, .radsec-card .rc-title .dot { background: var(--pass); border-color: var(--pass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pass) 22%, transparent); }
.radsec-pill.idle .dot { background: var(--warn); border-color: var(--warn); }
.radsec-pill.none ~ .radsec-card .rc-title .dot { background: none; border-color: var(--muted); box-shadow: none; }
.radsec-pill.idle ~ .radsec-card .rc-title .dot { background: var(--warn); border-color: var(--warn); box-shadow: none; }
.radsec-card { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 400px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); visibility: hidden; opacity: 0; transition: opacity .12s, visibility .12s; }
/* Bridges the gap, so moving from the pill to the card keeps it open. */
.radsec-card::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.radsec:hover .radsec-card, .radsec:focus-within .radsec-card { visibility: visible; opacity: 1; }
.rc-title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
.radsec-card .hint { margin: 0; }
.rc-rows { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rc-rows td { padding: 3px 0; vertical-align: top; }
.rc-rows td:first-child { width: 36%; padding-right: 10px; color: var(--muted); white-space: nowrap; }
.rc-rows td:last-child { word-break: break-word; }
.rc-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.radsec-card .rc-next { margin-top: 8px; }
/* In a narrow pane the card goes under the whole head, as wide, rather than off the pill's left. */
@container qrun (max-width: 600px) {
  .run-head .radsec { position: static; }
  .radsec-card { left: 0; right: 0; width: auto; }
}
/* Test, with its shortcut inside. */
.run-btn { padding: 0 10px 0 16px; gap: 8px; }
.run-btn kbd { height: 18px; padding: 0 5px; display: inline-flex; align-items: center; border-radius: 4px; background: color-mix(in srgb, currentColor 18%, transparent); font: 500 11px var(--font); }
.run-head .seg .n { min-width: 16px; height: 16px; margin-left: 4px; padding: 0 4px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 10.5px; font-weight: 600; line-height: 16px; display: inline-block; text-align: center; }
.run-head .seg .n:empty { display: none; }
.run-sub { min-height: 18px; }
.run-empty { border: 1px dashed var(--border); border-radius: var(--radius-xl); padding: 28px 24px; text-align: center; color: var(--muted); }
.run-empty p { margin: 0 auto; max-width: 460px; }
.run-empty p + p { margin-top: 6px; }
/* The result's header: the verdict, and older and newer runs. */
.verdict-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* The verdict keeps a readable width; older and newer runs and Export go under it when they don't fit beside it. */
.verdict-top > :first-child { flex: 1 1 240px; min-width: 0; }
.run-nav { display: flex; align-items: center; gap: 2px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.run-nav svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.run-nav .icon-btn { width: 30px; height: 30px; color: var(--text); }
.run-nav .icon-btn:disabled { opacity: .35; cursor: default; background: none; }
/* The Runs tab: the target's runs as a table; a row opens the run. */
.runs-list { display: flex; flex-direction: column; gap: 8px; }
.runs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
table.runs { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; font-size: 13px; }
table.runs th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.runs td { padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.runs tr:last-child td { border-bottom: none; }
table.runs tbody tr { cursor: pointer; }
table.runs tbody tr:hover td { background: var(--hover); }
table.runs tbody tr.on td { background: var(--sel); }
table.runs tbody tr:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
table.runs .dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 999px; background: var(--muted); vertical-align: 1px; }
table.runs .dot.pass { background: var(--pass); }
table.runs .dot.fail { background: var(--fail); }
.run-when { color: var(--muted); font-size: 12.5px; }
/* The run's header, right: older and newer runs, and Export. */
.verdict-tools { display: flex; align-items: center; gap: 10px; flex: none; }
/* A file dragged over the window: a test export opens when it's dropped. */
.drop-hint { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 70%, transparent); pointer-events: none; }
.drop-hint > div { padding: 22px 30px; border: 2px dashed var(--accent); border-radius: var(--radius-xl); background: var(--panel); color: var(--text); font-size: 16px; font-weight: 600; box-shadow: var(--shadow-lg); }
/* A test export's run: its verdict above the tabs, as in the run pane. */
.export-run-head { margin-bottom: 8px; }
/* A test export's raw request. */
.export-packet { margin: 10px 0 0; white-space: pre-wrap; }
/* Where the test went from and to: this computer, or erad.app's AWS region, to an address. */
.run-route { margin-top: 3px; color: var(--text); font-size: 12.5px; overflow-wrap: anywhere; }
.run-when .earlier { background: var(--warn-bg); color: var(--warn); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.qtab-body { min-width: 0; }
.qtab-body .log { max-height: 520px; padding: 4px 0; }
/* Request and reply side by side; stacked in a narrow pane. */
.packets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@container qrun (max-width: 640px) { .packets { grid-template-columns: minmax(0, 1fr); } }
.packets h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.packets h4 small { color: var(--muted); font-weight: 400; }
.packets .attrs td:first-child { width: 42%; font-family: var(--font); color: var(--muted); }
.packets tr.changed td { background: var(--warn-bg); }
.packets tr.changed td:first-child { color: var(--warn); box-shadow: inset 3px 0 0 var(--warn); }
.changes { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.changes .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--warn); }
/* The page head: the target's name as the title (edited in place), its collection, its actions. */
/* The title keeps 320px (a target's 160px); when the buttons leave less, they go under it, on the right. */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.page-titles { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qleft .page-titles { flex-basis: 160px; }
input.title-input { height: 40px; margin-left: -9px; padding: 0 8px; border-color: transparent; background: transparent; box-shadow: none; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
input.title-input:hover { border-color: var(--input); }
input.title-input:focus { background: var(--panel); border-color: var(--ring); }
/* A page's line under the title: its parts wrap whole, never a word to a line. */
.page-sub { display: flex; align-items: center; gap: 2px 4px; flex-wrap: wrap; color: var(--muted); }
.page-sub > * { white-space: nowrap; }
/* The target's line: short words and badges stay on one line, the collection's name gives way. */
.page-sub.qsub { flex-wrap: nowrap; }
.page-sub.qsub > * { flex: none; white-space: nowrap; }
.page-sub.qsub > select { flex: 0 1 auto; min-width: 0; text-overflow: ellipsis; }
.page-sub select { width: auto; max-width: 260px; height: 28px; padding: 0 26px 0 6px; margin-left: -2px; border-color: transparent; background-color: transparent; box-shadow: none; color: var(--text); font-weight: 500; cursor: pointer; }
.page-sub select:hover { background-color: var(--panel-2); }
.saved-hint { margin-left: 4px; font-size: 12.5px; }
.page-actions { display: flex; gap: 8px; flex: none; padding-top: 3px; margin-left: auto; }
/* A phone's ⋯ on the target's head and its menu (showMore); elsewhere the buttons sit in the row. */
.page-more { display: none; }
.more-actions { display: contents; }
/* The target's form, on a card. */
/* The target form: its parts in cards, one under another: Notes (when there are some),
   Server, and Request (the auth type in its own column, Advanced at its foot). */
.qform { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.fcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 16px 20px; }
.qwho .adv { border-top: 1px solid var(--border); padding-top: 12px; }
.qwho { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 12px; }
.qform .wide { grid-column: 1 / -1; }
.qform .span2 { grid-column: span 2; }
.server-summary { color: var(--muted); font-size: 12px; font-family: var(--mono); margin-top: -4px; }
/* A folded card's line (phones, foldForm): its title, what's in it, and Show. */
.fold-line { display: none; }
.fold-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.fold-open { color: var(--accent); font-weight: 500; }
.fsec-title { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-width: 110px; }
/* The target's server: ERAD group or Address. */
.qwhere { display: flex; flex-direction: column; gap: 10px; }
.qwhere-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qwhere-head .where-env { order: 3; margin-left: auto; }
.qwhere-head .where-env .env-badge { margin-right: 0; }
.qwhere-head .seg { display: inline-flex; }
.qwhere-group { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: end; }
.qwhere-group > label { flex: 0 1 260px; }
.qwhere-group > label.grow { flex: 1 1 260px; }
/* Transport | Host | Port | Shared secret, and the secondary address under the host, as wide. */
.qwhere-addr { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(150px, 1.4fr) 96px minmax(150px, 1.4fr); gap: 8px 12px; align-items: end; }
.qwhere-addr > label { min-width: 0; }
.qwhere-addr > label.second { grid-column: 2; }
/* RadSec: certificate, key, server CA and SNI on one row. */
.qwhere-radsec { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(150px, .9fr); gap: 8px 12px; align-items: end; }
.qwhere-radsec > .hint { grid-column: 1 / -1; }
.qwhere-radsec .pick .btn { padding: 0 10px; }
.qwhere-radsec .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
label.inline-check { flex-direction: row; align-items: center; gap: 5px; font-size: 12px; font-weight: 400; cursor: pointer; }
label.inline-check input { margin: 0; }
.qwhere .server-summary { margin-top: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@container qleft (max-width: 620px) {
  /* Host | Port, the secondary address under the host, then Transport | Shared secret. */
  .qwhere-addr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 96px;
    grid-template-areas: "host host port" "second second ." "transport secret secret";
  }
  .qwhere-addr > label:has(#qTransport) { grid-area: transport; }
  .qwhere-addr > label:has(#qHost) { grid-area: host; }
  .qwhere-addr > label.port { grid-area: port; }
  .qwhere-addr > #qSecretRow { grid-area: secret; }
  .qwhere-addr > label.second { grid-area: second; }
  .qwhere-addr:has(> label.second[hidden]) { grid-template-areas: "host host port" "transport secret secret"; }
  /* RadSec has no shared secret: Transport | Host | Port on one row, as wide, and its
     certificate, key, server CA and SNI two to a row. */
  .qwhere-addr:has(> #qSecretRow[hidden]) {
    grid-template-columns: minmax(130px, 1fr) minmax(0, 1.6fr) 96px;
    grid-template-areas: "transport host port" ". second .";
  }
  .qwhere-addr:has(> #qSecretRow[hidden]):has(> label.second[hidden]) { grid-template-areas: "transport host port"; }
  .qwhere-radsec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container qleft (max-width: 460px) {
  /* Too narrow for Transport beside the host: under it, and RadSec's fields one to a row. */
  .qwhere-addr:has(> #qSecretRow[hidden]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 96px;
    grid-template-areas: "host host port" "second second ." "transport transport .";
  }
  .qwhere-addr:has(> #qSecretRow[hidden]):has(> label.second[hidden]) { grid-template-areas: "host host port" "transport transport ."; }
  .qwhere-radsec { grid-template-columns: minmax(0, 1fr); }
}
@container qleft (max-width: 380px) {
  /* A phone: Transport and the shared secret a row each, under Host | Port. */
  .qwhere-addr { grid-template-areas: "host host port" "second second second" "transport transport transport" "secret secret secret"; }
  .qwhere-addr:has(> label.second[hidden]) { grid-template-areas: "host host port" "transport transport transport" "secret secret secret"; }
  .qwhere-addr:has(> #qSecretRow[hidden]) { grid-template-areas: "host host port" "second second second" "transport transport transport"; }
  .qwhere-addr:has(> #qSecretRow[hidden]):has(> label.second[hidden]) { grid-template-areas: "host host port" "transport transport transport"; }
}
/* "Profile (.mobileconfig)" is "Profile" where the three don't fit on a line. */
@container qleft (max-width: 460px) {
  .qsource .seg-long { display: none; }
}
.key-line { display: inline-flex; align-items: center; gap: 4px; }
.key-line .env-badge { margin-right: 0; }
/* ERAD environment of a key or erad-api server; production in the alarm colour. */
.env-badge { display: inline-block; font-family: var(--font); font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 1px 8px; margin-right: 6px; vertical-align: 1px; white-space: nowrap; }
.env-production { background: var(--fail-bg); color: var(--fail); }
.env-staging { background: var(--run-bg); color: var(--run); }
.env-custom { background: var(--panel-2); color: var(--muted); }
.server-summary .tag { font-family: inherit; background: var(--run-bg); color: var(--run); border-radius: 999px; padding: 1px 8px; margin-right: 6px; }
.dialog-form menu .spacer { flex: 1; }
.qfill { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel-2); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.qfill-title { font-weight: 600; font-size: 12.5px; color: var(--muted); }
.qfill-row { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr 1.2fr auto; gap: 8px; align-items: end; }
.qfill .hint:empty { display: none; }
.subgroup { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.qresult { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-sm); padding: 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qtabs-result { margin: 2px -20px 2px; padding: 0 12px; }
.qbig { font-size: 22px; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 10px; }
.qbig small { font-size: 13px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.qbig.pass { color: var(--pass); }
.qbig.fail { color: var(--fail); }
.qbig.muted { color: var(--muted); }

dialog { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--panel); color: var(--text); padding: 0; width: 460px; box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgb(0 0 0 / .5); }
.dialog-form { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dialog-form h3 { margin: 0; font-size: 16px; font-weight: 600; }
.dialog-form p { margin: 0; color: var(--muted); }
.dialog-form menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 8px 0 0; }
dialog.wide-dialog { width: 560px; }
dialog#cliDialog, dialog#cmdDialog { width: 680px; max-height: calc(100vh - 40px); overflow-y: auto; }
dialog#wsDialog { width: 680px; max-height: calc(100vh - 40px); overflow-y: auto; }
.cmd-block.json pre { max-height: 320px; overflow: auto; word-break: normal; }
.wh-ping label { flex: 1; }
.wh-token { border-color: var(--warn); }
table.runs td.clip { max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.cmd-block pre.muted { color: var(--muted); }
.cmd-block { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.cmd-block .cmd-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; background: var(--panel-2); color: var(--muted); font-size: 12px; }
.cmd-block .cmd-head > span:first-child { flex: 1; }
.cmd-block pre { margin: 0; padding: 8px 10px; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-all; user-select: text; -webkit-user-select: text; }
.cli-note { color: var(--pass); font-size: 12px; }
.keys-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.keys-list .empty { padding: 14px; }
.key-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.key-row:last-child { border-bottom: none; }
.key-row.editing { background: var(--sel); }
.key-row .meta { color: var(--muted); font-size: 11.5px; font-family: var(--mono); }
.keyform { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.keyform h4 { margin: 0; font-size: 13px; font-weight: 600; }

.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 70vw; z-index: 100; }
.toast.err { background: var(--fail); color: #fff; }

/* Credential panel (Quick test and the suite's bar) */
.creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; align-items: end; }
.creds .cred-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Fixed columns, so switching server or record changes what's in a cell, never where the
   cells are: Username | Password | Device MAC, and the outer identity where there is one. */
.cb-creds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qform .creds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container qleft (max-width: 620px) {
  .qwho { grid-template-columns: minmax(0, 1fr); }
  .qform .span2 { grid-column: auto; }
  .qform .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.creds .pick select { flex: 1; min-width: 0; }
label.needs { color: var(--warn); }
label.needs input { border-color: var(--warn); background: color-mix(in srgb, var(--warn-bg) 60%, var(--panel)); }
label.needs input.bad { border-color: var(--fail); }
.need-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-left: 4px; }
.creds input:disabled { background: var(--panel-2); color: var(--muted); }
/* Device MAC: one field, its format chip inside at the right edge. */
.mac-wrap { position: relative; }
.mac-wrap input { width: 100%; padding-right: 54px; font-family: var(--mono); font-size: 12.5px; }
.mac-wrap .combo.on input { background-image: none; }
.mac-fmt { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 10.5px; line-height: 1;
  border: 0; background: var(--panel-2); color: var(--muted); border-radius: 999px; padding: 3px 6px; cursor: pointer; white-space: nowrap; }
.mac-fmt:hover { background: var(--sel); color: var(--text); }
/* Username and Device MAC on an erad-api server: the group's records listed under the field. */
.combo { position: relative; }
.combo.on input { padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%; background-size: 4px 4px; background-repeat: no-repeat; }
.sugg { position: absolute; z-index: 40; left: 0; top: calc(100% + 4px); min-width: 100%; width: max-content; max-width: min(440px, 80vw);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: 340px; overflow: auto; }
.sugg-head, .sugg-foot { padding: 6px 10px; font-size: 11.5px; font-weight: 400; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.sugg-head { border-bottom: 1px solid var(--border); }
.sugg-foot { border-top: 1px solid var(--border); }
.sugg-foot .link-btn { margin-left: auto; }
.sugg-none { padding: 8px 10px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.sugg-opt { font: inherit; font-size: 13px; font-weight: 400; text-align: left; border: 0; background: none; color: var(--text); padding: 7px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugg-opt:hover, .sugg-opt.active { background: var(--hover); }
.sugg-opt.current { font-weight: 600; }
.src-tag { font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 1px 8px; background: var(--run-bg); color: var(--run); }
.creds .cred-note .link-btn { margin-left: 2px; }
/* Browse all: the group's credentials in a table. */
dialog.browse-dialog { width: min(780px, 94vw); }
.browse-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.browse-bar input { flex: 1 1 240px; }
.browse-table { max-height: min(52vh, 520px); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.browse-table table { border-collapse: collapse; width: 100%; font-size: 13px; }
.browse-table th { position: sticky; top: 0; background: var(--panel); text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 7px 10px; border-bottom: 1px solid var(--border); }
.browse-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.browse-table td.mono { font-family: var(--mono); font-size: 12.5px; }
.browse-table tr { cursor: pointer; }
.browse-table tbody tr:hover, .browse-table tbody tr:focus-visible { background: var(--hover); outline: none; }
.browse-table tr.current td { font-weight: 600; }
.test.na { cursor: default; }
.test.na .name, .test.na .expect { color: var(--muted); opacity: .6; }
.test.na input[type=checkbox] { opacity: .35; }
.test .na-reason { color: var(--muted); font-size: 11px; white-space: nowrap; }

/* Server certificates */
.certs { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.certs-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; }
.cert { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.cert-title { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cert-depth { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.cert-subject { font-family: var(--mono); font-size: 12px; flex: 1; word-break: break-all; }
.cert-status { font-size: 11px; font-weight: 600; padding: 1px 9px; border-radius: 999px; }
.cert-status.ok { background: var(--pass-bg); color: var(--pass); }
.cert-status.warn { background: var(--warn-bg); color: var(--warn); }
.cert-status.bad { background: var(--fail-bg); color: var(--fail); }
.cert-rows { border-collapse: collapse; font-size: 12px; }
.cert-rows td { padding: 2px 8px 2px 0; vertical-align: top; }
.cert-rows td:first-child { color: var(--muted); white-space: nowrap; width: 70px; }
.cert-rows td:last-child { font-family: var(--mono); word-break: break-all; }
.packet-box { display: flex; flex-direction: column; gap: 6px; }
.packet-head { display: flex; align-items: center; gap: 4px; }
.packet-head .spacer { flex: 1; }
.packet-hint { padding: 8px 10px; background: var(--panel-2); border-radius: var(--radius); }
.qsource .seg { display: inline-flex; }
.creds .span-2 { grid-column: span 2; }
/* Fields share the row, a picker wider than a number; the buttons as wide as their text. */
.qload-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.qload-form > label { flex: 1 1 110px; }
.qload-form > label:has(select) { flex-basis: 200px; }
.qload-form > .btn { flex: none; }
.lstats { display: flex; flex-direction: column; gap: 10px; }
.lnums { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; }
.lnums b { font-size: 20px; font-weight: 600; }
.lnums .pass { color: var(--pass); }
.lnums .fail { color: var(--fail); }
/* A ping to both of the server's addresses: each one's numbers, under the totals */
.lnums.per { margin-top: 6px; font-size: 13px; color: var(--muted); }
.lnums.per b { font-size: inherit; color: var(--text); }
.lnums.per .fail, .lnums.per .fail b { color: var(--fail); }
.lchart { width: 100%; height: 90px; display: block; background: var(--panel-2); border-radius: var(--radius-lg); }
.lchart .bp { fill: var(--pass); opacity: .75; }
.lchart .bf { fill: var(--fail); opacity: .85; }
.lchart .p99 { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.llegend { font-size: 12px; color: var(--muted); }
/* Ping: a bar per request, its height its round trip against the slowest; a lost one is a red
   tick at the foot. Then the lines, as ping prints them. */
.pchart { display: flex; align-items: flex-end; gap: 2px; height: 90px; padding: 6px; background: var(--panel-2); border-radius: var(--radius-lg); }
.pchart span { flex: 1; min-width: 2px; max-width: 18px; border-radius: 2px 2px 0 0; background: var(--pass); opacity: .8; }
.pchart span.bad { background: var(--warn); }
.pchart span.lost { height: 6px; background: var(--fail); border-radius: 2px; }
.plines { max-height: 260px; overflow-y: auto; margin: 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.plines .lost, .plines .fail { color: var(--fail); }
.topbar .spacer { flex: 1; }

/* Advanced: a tab per section, each tab marked when its values differ from the defaults. */
.adv summary { cursor: pointer; color: var(--muted); font-weight: 500; }
.adv summary:hover { color: var(--text); }
.adv-badge { font-size: 11px; font-weight: 600; color: var(--accent); margin-left: 6px; }
.adv-body { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
.adv-tabs { display: flex; flex-wrap: wrap; align-self: flex-start; max-width: 100%; }
.adv-tabs .seg-btn { display: inline-flex; align-items: center; gap: 6px; }
.adv-tabs .n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--run-bg); color: var(--run); font-size: 10.5px; font-weight: 600; line-height: 16px; text-align: center; }
.adv-tabs .n:empty { display: none; }
.adv-sec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
.adv-sec .about { grid-column: 1 / -1; }
/* A checkbox takes a row of its own, under the setting it goes with; never beside a field. */
.adv-sec label.check { grid-column: 1 / -1; align-self: center; }
.adv-group { grid-column: 1 / -1; margin: 8px 0 -4px; font-size: 12px; font-weight: 600; color: var(--text); }
.adv-sec .about .link-btn { margin-left: 0; }
.adv-sec .w2 { grid-column: span 2; }
.adv-sec .w4 { grid-column: 1 / -1; }
.drawer .adv-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drawer .adv-sec .w2, .drawer .adv-sec .w4 { grid-column: 1 / -1; }
/* After the four columns above, so a narrow form's two win. */
@container qleft (max-width: 620px) {
  .adv-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adv-sec .w2, .adv-sec .w4 { grid-column: 1 / -1; }
}
.qsuite { gap: 8px; }
.qsuite .plan-toolbar { padding: 0; border: none; background: none; justify-content: flex-start; flex-wrap: wrap; }
.qsuite .plan-toolbar .spacer { flex: 1; }
.suite-body { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1fr); height: 600px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; }
.suite-body .plan { border-right: 1px solid var(--border); }
/* A narrow pane stacks the suite's list over the test picked, each as tall as it needs, up to a
   height; no result column kept for a test that hasn't run. */
@container qrun (max-width: 720px) {
  .suite-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; height: auto; }
  .suite-body .plan { max-height: 420px; border-right: none; border-bottom: 1px solid var(--border); }
  .suite-body .detail { max-height: 600px; }
  .test .chip:empty { display: none; }
}
.suite-body .plan .group-head { background: var(--panel); }
/* Help scrolls as a whole, Done always at its foot. */
dialog.help-dialog { width: min(920px, 94vw); max-height: calc(100dvh - 40px); overflow-y: auto; }
.help-dialog menu { position: sticky; bottom: 0; margin: 0 -20px -20px; padding: 12px 20px 20px; background: var(--panel); border-top: 1px solid var(--border); }

/* What's new: a release per section, newest first */
.releases { max-height: min(60vh, 520px); overflow-y: auto; margin: 4px 0 12px; }
.release { padding: 10px 0; border-top: 1px solid var(--border); }
.release:first-child { border-top: 0; padding-top: 0; }
.release h4 { margin: 0 0 4px; font-size: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.release h4 .when { color: var(--muted); font-weight: 400; font-size: 12.5px; margin-left: auto; }
.release h4 .tag { background: var(--run-bg); color: var(--run); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 600; }
.release ul { margin: 0; padding-left: 20px; }
.release li { margin: 3px 0; line-height: 1.45; }
.release .btn { margin-top: 8px; }
/* Help's picture of a login: boxes and arrows that wrap in a narrow window. */
.flow { display: flex; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 12px; margin: 4px 0 0; }
.flow-app { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border: 1.5px dashed var(--accent); border-radius: var(--radius-xl); }
.flow-app-label { color: var(--accent); font-size: 12px; font-weight: 600; }
.flow-row { display: flex; align-items: center; }
.flow-node { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 120px; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); text-align: center; }
.flow-node b { font-weight: 600; }
.flow-node small { color: var(--muted); font-size: 12px; }
.flow-node.erad { background: var(--run-bg); border-color: var(--accent); }
.flow-edge { flex: 1; min-width: 104px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.flow-arrow { position: relative; align-self: stretch; height: 2px; margin-right: 6px; background: var(--muted); }
.flow-arrow::after { content: ""; position: absolute; right: -7px; top: -4px; border: 5px solid transparent; border-left: 8px solid var(--muted); border-right: 0; }
/* A narrow window stacks the picture: device, access point, ERAD, with arrows down. */
@media (max-width: 720px) {
  .flow, .flow-row { flex-direction: column; align-items: stretch; }
  .flow-edge { flex-direction: row; justify-content: center; min-width: 0; padding: 4px 0; gap: 8px; }
  .flow-arrow { align-self: auto; width: 2px; height: 22px; margin: 0 0 6px; }
  .flow-arrow::after { right: -4px; top: auto; bottom: -7px; border: 5px solid transparent; border-top: 8px solid var(--muted); border-bottom: 0; }
}
.flow-tunnel { margin: 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--pass) 45%, transparent); border-radius: var(--radius-lg); background: var(--pass-bg); color: var(--text); line-height: 1.5; }
.flow-tunnel b { color: var(--pass); }
#helpFilter { margin-bottom: 6px; }
.glossary { display: flex; flex-direction: column; gap: 4px; }
.glossary h4 { margin: 10px 0 2px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.glossary .entry { padding: 6px 8px; border-radius: var(--radius); }
.glossary .entry b { margin-right: 6px; }
.glossary .entry.hit { background: var(--sel); }
.dict-list { display: flex; flex-direction: column; gap: 4px; }
.dict-group { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.dict-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dict-row .hint { margin: 0; }
.dict-row .warn { color: var(--fail); cursor: help; }
.dict-row .link-btn { margin-left: auto; }
.qsource { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* A narrow window (a phone, a tablet upright): the sidebar slides over the page (the sidebar
   button; picking something closes it) rather than take a third of it. */
@media (max-width: 900px) {
  .quick { grid-template-columns: 1fr; }
  .quick .qprofiles { position: fixed; z-index: 40; top: 56px; bottom: 0; left: 0; width: min(86vw, 340px); box-shadow: var(--shadow-lg); }
  .quick:not(.no-sidebar)::before { content: ""; position: fixed; inset: 56px 0 0 0; z-index: 39; background: rgb(0 0 0 / .4); }
}

/* A narrow page's tables keep what tells the rows apart: a collection's targets lose who, then
   when, the Collections page its owner, people and last test; the rest wrap. */
@container cpage (max-width: 860px) {
  table.ctargets th:nth-child(4), table.ctargets td:nth-child(4) { display: none; }
}
@container cpage (max-width: 640px) {
  table.ctargets th:nth-child(4), table.ctargets td:nth-child(4), table.ctargets th:nth-child(6), table.ctargets td:nth-child(6),
  table.acolls th:nth-child(3), table.acolls td:nth-child(3), table.acolls th:nth-child(4), table.acolls td:nth-child(4), table.acolls th:nth-child(6), table.acolls td:nth-child(6) { display: none; }
  table.runs td { white-space: normal; }
  /* A collection's targets as cards: name and last result, then server, then auth type. */
  table.ctargets thead { display: none; }
  table.ctargets, table.ctargets tbody { display: block; }
  table.ctargets tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
  table.ctargets tr:last-child { border-bottom: none; }
  table.ctargets td { display: block; padding: 0; border: none; background: none !important; }
  table.ctargets td:nth-child(1) { grid-area: 1 / 1; min-width: 0; }
  table.ctargets td:nth-child(5) { grid-area: 1 / 2; }
  table.ctargets td:nth-child(2) { grid-column: 1 / -1; }
  table.ctargets td:nth-child(3) { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
  table.ctargets tbody tr:hover { background: var(--hover); }
  table.ctargets tbody tr.on { background: var(--sel); }
}

/* ---------------------------------------------------------------------------
   Phones: one column. The header keeps what fits and dialogs fit the screen. Nothing here
   applies above 760px wide.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .topbar { gap: 8px; padding: 0 8px; }
  .brand { gap: 8px; }
  .brand .logo { height: 22px; }
  .brand .divider, .brand .product { display: none; }
  /* No search on a phone: the sidebar's switcher and list find a target. */
  .search { display: none; }
  .topbar-actions { gap: 4px; }
  .profile-name, .profile > svg, #helpBtn { display: none; }

  .qsplit, .cpage { padding: 16px 14px 32px; overflow-x: hidden; }
  /* Tabs scroll sideways in their bar rather than widen the page. */
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > * { flex: none; }
  .qbig { font-size: 19px; flex-wrap: wrap; row-gap: 2px; }
  .page-head { flex-wrap: wrap; gap: 10px; }
  .page-titles { flex: 1 1 100%; }
  .page-actions { flex-wrap: wrap; }
  .qsource .seg { max-width: 100%; overflow-x: auto; }
  .qsource .seg-btn { flex: none; white-space: nowrap; }
  input.title-input { font-size: 20px; }
  .csec-head { flex-wrap: wrap; }
  .share-add { flex-wrap: wrap; }
  .share-add input { flex-basis: 100%; }
  /* A target's runs: the time and how long it took on one line each, cells closer together. */
  .qrun table.runs th, .qrun table.runs td { padding-left: 8px; padding-right: 8px; }
  .qrun table.runs td:nth-child(-n+3) { white-space: nowrap; }
  dialog, dialog.wide-dialog, dialog#cliDialog, dialog#cmdDialog, dialog#wsDialog { width: calc(100vw - 20px); max-width: none; max-height: calc(100dvh - 20px); overflow-y: auto; }
  .drawer { width: 100vw; }
  /* A target's head: its name and collection, with Save (when there's something to save) and ⋯
     beside them; ⋯ opens Duplicate, Copy link and Delete in a menu under it. */
  .qleft .page-head { flex-wrap: nowrap; gap: 8px; }
  .qleft .page-titles { flex: 1 1 0; }
  .qleft .page-actions { position: relative; }
  .qleft #qSaveBtn.clean { display: none; }
  .page-more:not([hidden]) { display: inline-flex; }
  .more-actions { display: none; }
  .page-head.more .more-actions { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 6px; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 170px; padding: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
  .page-head.more .more-actions > .btn { justify-content: flex-start; border-color: transparent; background: none; box-shadow: none; }
  /* Save showing says there's something to save: no "Saved" or "Unsaved changes" to crowd the collection. */
  .qleft #qSavedHint { display: none; }
  .page-head.more #qLinkBtn::after { content: "Copy link"; margin-left: 8px; }
  /* The run pane's head keeps its place: the tabs with Test (or Run, Start) on the right, then
     the RadSec pill and From and To on their own line, however many of them show. */
  .run-head::after { content: ""; order: 2; flex-basis: 100%; }
  .run-head > .spacer, .run-head > .run-btn, .run-head > .run-actions { order: 1; }
  .run-head > .radsec, .run-head > .send-from, .run-head > #qCliBtn { order: 3; }
  /* The tabs a little tighter, so Test stays beside them on the narrowest phone. */
  .run-tabs .seg-btn { padding-left: 8px; padding-right: 8px; }
  .run-head { gap: 6px; }
  /* A saved target's Server and Request as a line each, until tapped. */
  .fcard.folded { padding-top: 0; padding-bottom: 0; }
  .fcard.folded > :not(.fold-line) { display: none; }
  .fcard.folded > .fold-line { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
  .fcard.folded .fsec-title { min-width: 0; }
  /* 16px keeps iOS from zooming into a field when it's tapped. */
  input, select, textarea { font-size: 16px; }
}
/* The narrowest phones: Runs without its count, so Run 12 fits beside the tabs too. */
@media (max-width: 360px) {
  .run-head .seg .n { display: none; }
}
/* A touch screen: a tap opens the target; Duplicate and the collection picker are on its page. */
@media (hover: none) {
  .qrow .qtools { display: none; }
  /* No keyboard, no shortcut. */
  .run-btn { padding: 0 16px; }
  .run-btn kbd { display: none; }
}

/* Search results, under the box: collections and targets in every collection. */
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 480px; max-height: 64vh; overflow-y: auto; z-index: 60; padding: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.sr-label { padding: 8px 10px 4px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.sr-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius); cursor: pointer; }
.sr-row.on { background: var(--hover); }
.sr-text { flex: 1; min-width: 0; }
.sr-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-meta { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-row .btn { flex: none; }
.sr-empty { padding: 12px 10px; color: var(--muted); }
.sr-hint { margin-top: 4px; padding: 7px 10px 4px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11.5px; }