/* AWG Control — application layer on top of tokens.css + ui.css.
   Quiet, compact, one accent. No decorative motion. */
:root {
  --w-sidebar: 200px;
  --w-inspector: 340px;
  --w-col: 1200px;
}

html, body { height: 100%; overflow: hidden; }
.window { min-height: 0; overflow: hidden; }
.window.boot { transition: none; }
.content { min-height: 0; height: 100%; overflow: hidden; }
.sidebar, .inspector { min-height: 0; }
.skip-link { position: fixed; z-index: 1000; left: var(--s3); top: var(--s3); transform: translateY(-160%); padding: var(--s2) var(--s3); background: var(--bg); box-shadow: var(--shadow-menu); border-radius: var(--r-md); }
.skip-link:focus { transform: none; }
.fleet-mark { color: var(--accent); }
.nav-badge { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--fill-active); color: var(--fg-2); font-size: var(--fs-0); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.nav-badge[hidden] { display: none; }

.control-state { display: flex; align-items: center; gap: var(--s2); padding: var(--s2); color: var(--fg-2); }
.control-state .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-4); flex: none; }
.control-state .dot[data-tone='ok'] { background: var(--ok); }
.control-state .dot[data-tone='warn'] { background: var(--warn); }
.control-state .dot[data-tone='crit'] { background: var(--crit); }
.control-state span { display: grid; }
.control-state b { color: var(--fg); font-size: var(--fs-1); font-weight: 500; }
.control-state small { color: var(--fg-4); font-size: var(--fs-0); }

.toolbar { min-height: 52px; }
.tb-left > div { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }
.tb-title { margin: 0; }
.tb-sub { color: var(--fg-3); font-size: var(--fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-menu { display: none; }
.live-chip { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--s2); color: var(--fg-3); font-size: var(--fs-1); white-space: nowrap; }
.live-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-4); flex: none; }
.live-chip[data-tone='ok'] .dot { background: var(--ok); }
.live-chip[data-tone='warn'] .dot { background: var(--warn); }
.live-chip[data-tone='crit'] .dot { background: var(--crit); }

.scroll { background: var(--field); padding: var(--s5) var(--s6) var(--s8); }
.view { width: min(100%, var(--w-col)); margin-inline: auto; display: grid; gap: var(--s4); align-content: start; }
.view[hidden] { display: none !important; }

/* Panels ------------------------------------------------------------- */
.panel { overflow: hidden; border-radius: var(--r-xl); background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline); }
.panel-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3); min-height: 46px; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--hairline); }
.panel-head h2 { margin: 0; font-size: var(--fs-2); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.panel-head .panel-sub { color: var(--fg-3); font-size: var(--fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-tools { display: flex; align-items: center; gap: var(--s3); justify-self: end; }
.panel-foot { padding: var(--s2) var(--s4); border-top: 1px solid var(--hairline); font-size: var(--fs-1); color: var(--fg-3); }
.panel-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.panel-bar h2 { margin: 0 0 2px; font-size: var(--fs-3); font-weight: 600; letter-spacing: -.018em; }
.panel-bar .panel-sub { color: var(--fg-3); font-size: var(--fs-1); }
.empty-note { padding: var(--s5) var(--s4); color: var(--fg-3); font-size: var(--fs-1); }
.dim { color: var(--fg-3); }
.tabular { font-variant-numeric: tabular-nums lining-nums; }
.glossary { margin: 0; padding: 0 var(--s2); color: var(--fg-3); font-size: var(--fs-1); line-height: 1.6; }
.glossary b { color: var(--fg-2); font-weight: 600; }

/* KPIs --------------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.kpi { display: grid; gap: 1px; padding: var(--s2) var(--s4); border-radius: var(--r-lg); background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline); }
.kpi-label { color: var(--fg-3); font-size: var(--fs-1); font-weight: 500; }
.kpi-value { font-size: var(--fs-4); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; }
.kpi-value small { color: var(--fg-3); font-size: var(--fs-2); font-weight: 500; }
.kpi-sub { color: var(--fg-3); font-size: var(--fs-1); }
.kpi[data-tone='ok'] .kpi-value { color: var(--fg); }
.kpi[data-tone='warn'] .kpi-value { color: var(--warn); }
.kpi[data-tone='crit'] .kpi-value { color: var(--crit); }

/* Grid tables -------------------------------------------------------- */
.grid-table { display: grid; }
.grid-head, .grid-row { display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: var(--s4); padding: 0 var(--s4); }
.grid-head { min-height: 32px; color: var(--fg-4); font-size: var(--fs-0); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; background: var(--fill-quiet); }
.grid-row { min-height: 48px; padding-block: var(--s2); border-top: 1px solid var(--hairline); font-size: var(--fs-2); }
.grid-row:first-of-type { border-top: 0; }
.grid-row.node-row { cursor: pointer; }
.grid-row.node-row:hover { background: var(--fill-hover); }
.grid-row.node-row[aria-selected='true'] { background: var(--fill-select); }
.grid-row.node-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.grid-row.legacy { background: color-mix(in srgb, var(--fill-quiet) 60%, transparent); }
.grid-table .group-head { height: auto; min-height: 30px; margin: 0; padding: var(--s1) var(--s4); border-top: 1px solid var(--hairline); background: var(--fill-quiet); color: var(--fg-3); font-size: var(--fs-0); font-weight: 500; white-space: normal; }
.cell { min-width: 0; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; row-gap: 2px; }
.cell.lead { flex-wrap: nowrap; }
.cell.act { justify-content: flex-end; flex-wrap: nowrap; gap: var(--s1); }
.cell.profile { display: grid; align-content: center; }
.cell.profile b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell.profile small { color: var(--fg-3); font-size: var(--fs-0); }
.stack { display: grid; min-width: 0; }
.stack b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack small { color: var(--fg-3); font-size: var(--fs-0); }

/* Paths / hops ------------------------------------------------------- */
.path { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; row-gap: 2px; }
.hop { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hop b { font-weight: 600; }
.hop .ip { color: var(--fg-3); font-size: var(--fs-1); }
.hop.exit b { color: var(--fg); }
.hop.unknown { color: var(--fg-3); font-size: var(--fs-1); }
.path.small .hop .ip { font-size: var(--fs-0); }
.arrow { color: var(--fg-4); font-style: normal; font-size: var(--fs-2); }
.flag { display: inline-flex; width: 18px; height: 13px; flex: none; overflow: hidden; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--hairline); }
.flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.flag-fallback { display: block; width: 100%; text-align: center; font-size: 8px; line-height: 13px; color: var(--fg-3); }

.usage { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--fg-2); white-space: nowrap; }
.usage.off { color: var(--fg-3); }
.usage .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-4); }
.usage .dot[data-tone='live'] { background: var(--ok); }
.seen { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-2); font-size: var(--fs-1); white-space: nowrap; }
.seen .dot, .entry-chip .dot, .event-line .dot, .rot-mode .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-4); flex: none; }
.seen .dot[data-tone='ok'], .entry-chip .dot[data-tone='ok'], .event-line .dot[data-tone='ok'], .rot-mode .dot[data-tone='ok'] { background: var(--ok); }
.seen .dot[data-tone='warn'], .entry-chip .dot[data-tone='warn'], .event-line .dot[data-tone='warn'] { background: var(--warn); }
.seen .dot[data-tone='crit'], .entry-chip .dot[data-tone='crit'], .event-line .dot[data-tone='crit'] { background: var(--crit); }
.status-pill[data-tone='warn'] { color: var(--warn); background: var(--warn-fill); }
.status-pill[data-tone='warn'] .dot { background: var(--warn); }
.status-pill[data-tone='crit'] .dot { background: var(--crit); }

.role-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font-size: var(--fs-0); font-weight: 600; letter-spacing: .02em; }
.role-badge[data-role='entry'] { background: var(--accent-fill); color: var(--accent); }
.role-badge[data-role='exit'] { background: var(--ok-fill); color: var(--ok); }
.role-badge[data-role='relay'] { background: var(--fill-active); color: var(--fg-2); }

/* Rotation ----------------------------------------------------------- */
.rot-triple { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rot-step { display: grid; line-height: 1.15; font-size: var(--fs-1); color: var(--fg-3); }
.rot-step small { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-4); }
.rot-step.now { color: var(--fg); font-weight: 600; }
.rot-mode { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--fg-3); white-space: nowrap; }
.rot-mode.on { color: var(--fg-2); }
.slot-rows { display: grid; }
.slot-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: var(--s4); min-height: 56px; padding: var(--s2) var(--s4); border-top: 1px solid var(--hairline); }
.slot-row:first-child { border-top: 0; }
.slot-name { display: grid; }
.slot-name b { font-weight: 600; }
.slot-name small { color: var(--fg-3); font-size: var(--fs-0); }
.slot-pool { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pool-node { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--s3) 0 var(--s2); border: 1px solid var(--hairline); border-radius: var(--r-pill); background: none; color: var(--fg-2); font: inherit; font-size: var(--fs-1); cursor: pointer; }
.pool-node b { font-weight: 600; color: var(--fg); }
.pool-node .ip { color: var(--fg-3); }
.pool-node:hover:not(:disabled) { border-color: var(--hairline-strong); background: var(--fill-hover); }
.pool-node:disabled { cursor: default; }
.pool-node.active { border-color: transparent; background: var(--fill-active); }
.pool-node .pill { background: var(--ok-fill); color: var(--ok); }
.choice.inline { padding: 0; gap: var(--s2); }
.inline-field { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: var(--fs-1); }
.select { height: 26px; padding: 0 var(--s2); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg); color: var(--fg); font: inherit; font-size: var(--fs-1); }

/* Events ------------------------------------------------------------- */
.event-lines { display: grid; border-top: 1px solid var(--hairline); }
.event-line { display: grid; grid-template-columns: 6px auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-height: 32px; padding: 0 var(--s4); font-size: var(--fs-1); color: var(--fg-2); border-top: 1px solid var(--hairline); }
.event-line:first-child { border-top: 0; }
.event-line .time { color: var(--fg-3); white-space: nowrap; min-width: 64px; }
.event-lines.large { border-top: 0; }
.event-lines.large .event-line { min-height: 38px; font-size: var(--fs-2); grid-template-columns: 6px auto minmax(0, 1fr) auto; }

/* Clients ------------------------------------------------------------ */
.profile-create { display: flex; align-items: center; gap: var(--s2); }
.profile-name-input { height: 28px; min-width: 240px; padding: 0 var(--s3); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg); color: var(--fg); font: inherit; font-size: var(--fs-1); }
.profile-name-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.entry-chips { flex-wrap: wrap; gap: var(--s2); }
.entry-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--s2); border: 1px solid var(--hairline); border-radius: var(--r-pill); color: var(--fg-2); font-size: var(--fs-1); }
.entry-chip small { color: var(--fg-4); font-family: var(--mono); }
.quiet-btn.danger:hover { color: var(--crit); }
.quiet-btn:disabled { opacity: var(--disabled); cursor: default; }
.issued-endpoints { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4) 0; }
.issued-endpoints > .dim { font-size: var(--fs-1); margin-right: var(--s1); }
.issued-endpoints > .dim:last-child { margin-left: var(--s1); margin-right: 0; }
.profile .pill.warn { margin-left: var(--s2); background: var(--warn-fill); color: var(--warn); cursor: help; }
.issued .panel-tools .primary-btn { height: 28px; padding: 0 var(--s3); }
.ep-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--s3) 0 var(--s2); border: 1px solid var(--hairline); border-radius: var(--r-pill); background: transparent; color: var(--fg-2); font: inherit; font-size: var(--fs-1); cursor: pointer; }
.ep-chip b { font-weight: 600; color: var(--fg-1); }
.ep-chip small { color: var(--fg-4); font-size: var(--fs-1); }
.ep-chip:hover { background: var(--fill-quiet); }
.ep-chip[aria-pressed='true'] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ep-chip:disabled { opacity: var(--disabled); cursor: default; }
.issued-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s5); padding: var(--s4); }
.issued-qr svg { display: block; width: 220px; height: 220px; border-radius: var(--r-md); background: #fff; }
.issued-config { margin: 0; padding: var(--s3) var(--s4); overflow: auto; max-height: 420px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--fill-quiet); color: var(--fg-2); font-size: var(--fs-0); line-height: 1.5; white-space: pre; user-select: all; }

/* Sheets ------------------------------------------------------------- */
.sheet-path { display: flex; align-items: center; min-height: 40px; padding: var(--s2) var(--s3); margin-bottom: var(--s3); border-radius: var(--r-md); background: var(--fill-quiet); }
.options { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.choice.option { padding: var(--s3); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--hairline); }
.choice.option.current { background: var(--fill-quiet); }
#route-sheet-error:not(:empty) { margin-bottom: var(--s3); }

/* Inspector ---------------------------------------------------------- */
.insp-title { margin: 0; font-size: var(--fs-3); font-weight: 600; letter-spacing: -.018em; }
.insp-sub { margin: 0 0 var(--s2); color: var(--fg-4); font-size: var(--fs-0); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.iface { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: var(--s2) 0; border-top: 1px solid var(--hairline); font-size: var(--fs-1); }
.iface:first-of-type { border-top: 0; }
.eyebrow { display: block; margin-bottom: 2px; color: var(--fg-3); font-size: var(--fs-1); font-weight: 500; }

/* Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot-row { grid-template-columns: 1fr auto; }
  .slot-row .slot-pool { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .mobile-menu { display: inline-flex; }
  .window[data-sidebar='shown'] .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--w-sidebar); box-shadow: var(--shadow-pop); }
  .window { grid-template-columns: 0px minmax(0, 1fr) 0px !important; }
  .window[data-inspector='true'] .inspector { position: fixed; inset: 0 0 0 auto; z-index: 40; width: min(100%, var(--w-inspector)); box-shadow: var(--shadow-pop); }
  .tb-sub { display: none; }
  .scroll { padding: var(--s3); }
  .grid-head { display: none; }
  .grid-row { grid-template-columns: 1fr; row-gap: var(--s1); padding-block: var(--s3); }
  .cell.act { justify-content: flex-start; }
  .panel-head { grid-template-columns: 1fr; row-gap: var(--s2); }
  .panel-tools { justify-self: start; flex-wrap: wrap; }
  .panel-bar { flex-direction: column; align-items: stretch; }
  .profile-create { width: 100%; }
  .profile-name-input { flex: 1; min-width: 0; }
  .issued-body { grid-template-columns: 1fr; }
}

/* Auth gate ---------------------------------------------------------- */
.auth-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.auth-gate[hidden] { display: none; }
.auth-pending #app-window { visibility: hidden; }
.auth-card { width: min(100%, 380px); display: grid; gap: 22px; padding: 34px; border: 1px solid var(--hairline-strong); border-radius: 20px; background: var(--bg-inspector); box-shadow: 0 24px 80px rgb(0 0 0 / 18%); }
.auth-mark { width: 36px; height: 36px; color: var(--accent); }
.auth-copy { display: grid; gap: 8px; }
.auth-copy h1 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -0.035em; }
.auth-copy p { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.auth-field { display: grid; gap: 8px; }
.auth-field > span { color: var(--fg-2); font-size: 12px; font-weight: 500; }
.auth-field input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--hairline-strong); border-radius: 9px; outline: none; color: var(--fg); background: var(--field); font: inherit; }
.auth-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.auth-error { margin: -8px 0 0; color: var(--crit); font-size: 13px; }
.auth-submit { width: 100%; justify-content: center; }
@media (max-width: 520px) { .auth-card { padding: 26px; border-radius: 16px; } }

/* Statusbar text must never wrap */
.statusbar { overflow: hidden; white-space: nowrap; }
.statusbar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.statusbar .right { flex: 1; justify-content: flex-end; }
.sheet-path { gap: var(--s2); flex-wrap: wrap; }
.sheet-path .arrow { margin: 0 2px; }
.sheet-body .choice:not(.option) > span { display: grid; gap: 1px; }
.choice.option > span { display: grid; gap: 2px; }
.cell.profile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-row .path { flex-wrap: nowrap; }
.cell.nowrap { white-space: nowrap; flex-wrap: nowrap; }
.grid-table.nodes .grid-head, .grid-table.nodes .grid-row { column-gap: var(--s3); }
/* With the inspector open the content column is narrow: drop the last column. */
.window[data-inspector='true'] .grid-table.nodes { --cols: minmax(170px, 1.2fr) 64px 132px 92px minmax(150px, 1fr) !important; }
.window[data-inspector='true'] .grid-table.nodes .host-col, .window[data-inspector='true'] .grid-table.nodes .grid-head > :last-child { display: none; }
.statusbar .right { display: block; text-align: right; }
@media (max-width: 900px) { .statusbar .right { text-align: left; } }
.flag-fallback[hidden], .flag img[hidden] { display: none; }
#route-sheet-error:empty { display: none; }
.sheet-path { margin-bottom: 0; }
.grid-table.clients .grid-head, .grid-table.clients .grid-row { column-gap: var(--s3); }
/* Neutralise the legacy .hop circuit rail from ui.css */
.hop { position: static; display: inline-flex; grid-template-columns: none; min-height: 0; gap: 6px; }
.hop::after { content: none !important; display: none; }
.hop b { font-size: inherit; font-weight: 600; color: var(--fg); }

/* Per-route rotation controls (Routes table) */
.rot-ctl { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.rot-ctl .choice.inline { gap: 0; }
.switch.sm { width: 28px; height: 16px; }
.switch.sm::after { width: 12px; height: 12px; }
.switch.sm:checked::after { transform: translateX(12px); }
.select.sm { height: 24px; padding: 0 22px 0 8px; font-size: var(--fs-1); min-width: 0; width: auto; }
.rot-ctl .rot-next { font-size: var(--fs-1); white-space: nowrap; }
.switch:disabled { opacity: .45; cursor: not-allowed; }

/* Add node sheet + bootstrap job card (Nodes view) */
#node-sheet .sheet-body { display: grid; gap: var(--s3); }
#node-sheet-error:empty { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field[hidden] { display: none; }
.field-hint { display: block; margin-top: 4px; color: var(--fg-3); font-size: var(--fs-1); line-height: 1.4; }
.field .segmented { width: fit-content; }
.seg:disabled { color: var(--fg-4); cursor: not-allowed; }
.seg:disabled:hover { color: var(--fg-4); }
.act-btn.danger { display: inline-flex; align-items: center; gap: 6px; background: var(--fill-quiet); color: var(--crit); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crit) 40%, transparent); }
.act-btn.danger:hover:not(:disabled) { background: var(--crit-fill); }
.select-wrap .sel-chev { transform: rotate(90deg); }
.act-btn.danger:disabled { color: var(--fg-4); cursor: not-allowed; }
.act-btn.danger .ic { width: 14px; height: 14px; }
.insp-actions { display: grid; gap: var(--s2); justify-items: start; }
.insp-actions small { font-size: var(--fs-1); line-height: 1.4; }
.job-card { padding: var(--s4); margin-bottom: var(--s4); display: grid; gap: var(--s3); }
.job-card[data-tone='ok'] { box-shadow: inset 0 0 0 1px var(--ok); }
.job-card[data-tone='crit'] { box-shadow: inset 0 0 0 1px var(--crit); }
.job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.job-head > div { display: grid; gap: 2px; }
.job-head b { font-size: var(--fs-3); font-weight: 600; letter-spacing: -.012em; }
.job-head small { font-size: var(--fs-1); }
.job-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s3) var(--s4); }
.job-step { display: grid; grid-template-columns: 6px minmax(0, 1fr); column-gap: var(--s2); align-items: start; font-size: var(--fs-2); min-width: 0; }
.job-step > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-step small { grid-column: 2; display: block; }
.job-step small:empty { display: none; }
.job-step .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-4); margin-top: 6px; }
.job-step .dot[data-tone='ok'] { background: var(--ok); }
.job-step .dot[data-tone='crit'] { background: var(--crit); }
.job-step .dot[data-tone='warn'] { background: var(--warn); animation: job-pulse 1.2s ease-in-out infinite; }
.job-step[data-status='pending'] > span { color: var(--fg-3); }
.job-step small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-1); }
.job-log { margin: 0; padding: var(--s2) var(--s3); max-height: 140px; overflow: auto; border-radius: var(--r-md); background: var(--fill-quiet); font-size: var(--fs-1); line-height: 1.5; color: var(--fg-2); white-space: pre-wrap; word-break: break-all; }
@keyframes job-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
#node-sheet .sheet-foot-note { max-width: 200px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } .job-steps { grid-template-columns: 1fr; } #node-sheet .sheet-foot-note { display: none; } #node-sheet .sheet-foot { justify-content: flex-end; } }
@media (max-width: 900px) { .field .segmented { display: flex; } }
/* Pool membership (v6): unassigned exits and pool actions in the inspector */
.unassigned { color: var(--warn); font-weight: 600; }
.insp-actions .act-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.insp-actions .act-btn:not(.danger) { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--s4); }
.insp-actions .act-btn:not(.danger) .ic { width: 14px; height: 14px; }
.insp-actions .act-btn:not(.danger):disabled { background: var(--fill-quiet); color: var(--fg-4); cursor: not-allowed; }
.insp-actions .act-btn.danger { margin-top: var(--s2); }
.geo-hint { margin: -2px 0 var(--s2); min-height: 18px; display: flex; align-items: center; gap: 6px; }
.geo-hint .flag { width: 16px; height: 12px; flex: none; }

/* Routes: relay in front, pinned exits, route editor */
.hop.relay b { color: var(--fg-2); }
.hop.relay::before { content: 'relay'; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-4); margin-right: 2px; }
.chain { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.cell.lead { flex-wrap: wrap; row-gap: 2px; }
.quiet-btn.icon-only { padding: 4px 6px; flex: 0 0 auto; }
.cell.act .quiet-btn { white-space: nowrap; }
.quiet-btn.icon-only svg { margin: 0; }
.panel-head .quiet-btn { justify-self: end; white-space: nowrap; }
.sheet-path.small { min-height: 32px; margin-bottom: var(--s2); font-size: var(--fs-1); }
.re-options { margin-top: calc(-1 * var(--s3)); }
.re-exit-field { margin-top: calc(-1 * var(--s2)); }
.field .select { display: block; width: 100%; height: 34px; font-size: var(--fs-2); }
.field .select[hidden] { display: none; }
@media (max-width: 560px) { .panel-head { grid-template-columns: auto minmax(0, 1fr) auto; } .panel-head .panel-sub { display: none; } }
.sheet-body > .sheet-path, .sheet-body > .options, .sheet-body > .field { flex-shrink: 0; }

/* GeoDNS reflection (v7): a node can be referenced by DNS with no route in the
   registry, so the role-change group says so before anything is torn down. */
.warn-note { display: block; margin-top: var(--s2); color: var(--warn); font-size: var(--fs-1); line-height: 1.45; }

/* Chain readability: the entry leads, the relay trails as a "via" note. One line,
   truncated instead of wrapping into the neighbouring column. */
.grid-row .cell { min-width: 0; }
.cell .chain { flex-wrap: nowrap; overflow: hidden; }
.path.small { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; }
.via { margin-left: 8px; white-space: nowrap; color: var(--fg-4); }
.via .ip { margin-left: 4px; }
.issued-endpoints.one { align-items: center; gap: 10px; }

/* ── Routes as cards (v11) ────────────────────────────────────────────────
   One card per route, cards separated by air rather than rules. Inside a card
   the route reads left to right as three slots - entry, relay, exit - each
   behind a square tile carrying its name, so the shape of a route is legible
   before any text is. The draft card and the build card reuse the same slots,
   so adding a route keeps the list's shape. */
.route-list { display: grid; gap: 6px; padding: var(--s2); }
.route-slots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--s4); align-items: center; }
.route-row { display: grid; gap: var(--s2); padding: 10px var(--s3); border-radius: var(--r-lg); background: var(--fill-quiet); font-size: var(--fs-2); }
.route-row.draft { background: var(--fill-hover); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.route-row.job[data-tone='ok'] { box-shadow: inset 2px 0 0 var(--ok); }
.route-row.job[data-tone='crit'] { box-shadow: inset 2px 0 0 var(--crit); }
.route-row.job[data-tone='warn'] { box-shadow: inset 2px 0 0 var(--warn); }

/* A slot: square tile with the slot's name, the node beside it. */
.slot { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: var(--s3); min-width: 0; min-height: 40px; }
.slot.no-tile { grid-template-columns: minmax(0, 1fr); }
button.slot-tile { padding: 0; background: none; cursor: pointer; }
button.slot-tile svg { width: 14px; height: 14px; }
button.slot-tile:hover, button.slot-tile[aria-expanded='true'] { border-color: var(--fg-4); color: var(--fg-2); background: var(--fill-hover); }
.slot.add .slot-add { margin-left: 0; padding-left: 0; }
.slot.add .slot-add:hover { background: none; color: var(--fg-2); }
.slot-tile { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); color: var(--fg-4); font-size: 9px; font-weight: 600; letter-spacing: .07em; line-height: 1; text-transform: uppercase; }
.slot.blank .slot-tile { border-style: dashed; }
.slot.open .slot-tile { border-color: var(--accent); color: var(--fg-2); }
.slot.incomplete .slot-tile { border-color: var(--warn); color: var(--warn); }
.slot-body { display: grid; align-content: center; gap: 2px; min-width: 0; }
.slot-main { display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 18px; }
.slot-main b { font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-main .flag { flex: 0 0 auto; }
.slot-sub { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--fg-3); font-size: var(--fs-1); line-height: 16px; white-space: nowrap; overflow: hidden; }
.slot-sub .mono { color: var(--fg-3); }
.slot-note { color: var(--fg-4); overflow: hidden; text-overflow: ellipsis; }
.slot-note::before { content: '·'; margin-right: 6px; }
.slot-sub > .slot-note:first-child::before { content: none; margin: 0; }
.slot-note.bad { color: var(--warn); }
.slot.relay .slot-main b, .slot.exit .slot-main b { color: var(--fg); }
.slot .dim { font-size: var(--fs-2); line-height: 18px; }
.slot.lane { align-items: start; }
.slot.lane .slot-body { align-content: start; }

/* Buttons that live inside a slot: quiet text, no chrome until the pointer arrives. */
.slot-add { display: inline-flex; align-items: center; gap: 5px; height: 22px; margin-left: -6px; padding: 0 6px; border-radius: var(--r-sm); color: var(--fg-3); font: inherit; font-size: var(--fs-2); line-height: 1; background: none; cursor: pointer; }
.slot-add svg { width: 13px; height: 13px; color: var(--fg-4); }
.slot-add small { color: var(--fg-4); font-size: var(--fs-1); }
.slot-add:hover, .slot-add[aria-expanded='true'] { background: var(--fill-hover); color: var(--fg); }
.slot-add:hover svg, .slot-add[aria-expanded='true'] svg { color: var(--fg-2); }
.slot-pick { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 22px; margin-left: -6px; padding: 0 6px; border-radius: var(--r-sm); font: inherit; font-size: var(--fs-2); line-height: 1; background: none; color: var(--fg); cursor: pointer; text-align: left; }
.slot-pick:hover, .slot-pick[aria-expanded='true'] { background: var(--fill-hover); }
.slot-pick b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot.open .slot-main { color: var(--fg); }
.slot-clear { width: 20px; height: 20px; color: var(--fg-4); }
.slot-clear:hover { color: var(--fg); }
.slot-clear svg { width: 12px; height: 12px; }
.slot.incomplete .slot-pick b { color: var(--warn); }

/* A finished route reads left to right: the three slots, then its state, then
   what you can do with it. Draft and job rows keep the stacked footer, since
   the slot editor and the build steps need the full width. */
/* Fixed right-hand columns: the state block and the buttons keep the same
   width on every route, so the slots below each other line up exactly. */
.route-row:not(.draft):not(.job) { grid-template-columns: minmax(0, 1fr) 252px 168px; align-items: center; column-gap: var(--s4); min-height: 84px; }
.route-meta { display: grid; align-content: center; gap: 1px; min-width: 0; min-height: 64px; }
.meta-line { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; min-height: 16px; }
.meta-line.rot { min-height: 24px; }
.meta-line.head { gap: var(--s3); }
.meta-line.next { min-height: 18px; }
.meta-line.rot .foot-cap { flex: 0 0 auto; width: 54px; }
.meta-line.next { color: var(--fg-4); font-size: var(--fs-1); overflow: hidden; }
.meta-line.next .mono { color: var(--fg-3); }
.meta-line .status-pill { padding-left: 0; padding-right: 0; background: transparent; }
.meta-line .dim { font-size: var(--fs-1); }
.act-stack { display: grid; gap: 2px; justify-items: stretch; min-width: 0; }
.act-stack .quiet-btn { justify-content: flex-start; }
.route-foot { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.route-state { display: inline-flex; align-items: center; gap: var(--s3); min-width: 0; flex: 0 1 auto; overflow: hidden; }
.route-state .status-pill { padding-left: 0; padding-right: 0; background: transparent; }
.route-state .dim { font-size: var(--fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-rot { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; flex: 1 1 auto; }
.foot-cap { color: var(--fg-4); font-size: var(--fs-1); }
.route-rot .dim { font-size: var(--fs-1); }
.route-act { display: inline-flex; align-items: center; gap: var(--s1); margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.route-row:not(.draft):not(.job) .route-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-left: 0; }
.primary-btn.sm { height: 26px; font-size: var(--fs-1); }
.primary-btn.sm .ic { width: 13px; height: 13px; }
.quiet-btn.strong { color: var(--fg); font-weight: 550; }

/* Draft footer: the label is a plain underline, the plan is one quiet sentence. */
.draft-meta { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: var(--s3); align-items: center; flex: 1 1 auto; overflow: visible; }
.draft-plan { font-size: var(--fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-plan.bad { color: var(--warn); }
.draft-label { width: 100%; min-width: 0; height: 24px; padding: 0; border: 0; border-bottom: 1px dashed var(--hairline-strong); border-radius: 0; background: none; color: var(--fg); font: inherit; font-size: var(--fs-2); }
.draft-label:hover { border-bottom-color: var(--fg-4); }
.draft-label:focus { outline: none; border-bottom: 1px solid var(--accent); }

/* Slot editor: unfolds inside the draft row, one slot at a time. */
.slot-editor { display: grid; gap: var(--s3); margin: var(--s1) 0; padding: var(--s3) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.slot-editor-close { width: 22px; height: 22px; color: var(--fg-4); }
.slot-editor-close:hover { color: var(--fg); }
.slot-editor-close svg { width: 12px; height: 12px; }
.slot-editor-head > .segmented { margin-left: auto; }
.slot-editor .field.slot-fields { max-width: 520px; }
.slot-editor-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-width: 0; }
.slot-editor-title { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.slot-editor-title b { font-weight: 600; }
.slot-editor-title .dim { font-size: var(--fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-editor .segmented { flex: 0 0 auto; }
.slot-editor .seg { height: 22px; font-size: var(--fs-1); padding: 0 var(--s2); }
.slot-fields.field-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, 1.2fr); }
.slot-editor .field label { display: flex; justify-content: space-between; font-size: var(--fs-1); }
.slot-editor .field input, .slot-editor .select { height: 28px; }
.slot-editor .field textarea { min-height: 28px; font-size: var(--fs-1); }
.slot-editor .field-hint { margin-top: calc(-1 * var(--s2)); color: var(--fg-3); font-size: var(--fs-1); }
.slot-editor .field-hint.bad, .field-hint .bad { color: var(--crit); }
.link-btn { padding: 0; border: 0; background: none; color: var(--fg-4); font: inherit; font-size: var(--fs-1); cursor: pointer; }
.link-btn:hover { color: var(--fg); }
.slot-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.slot-editor-foot .dim { font-size: var(--fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Build row: a lane under each slot, steps as three quiet dots in the footer. */
.slot.lane .slot-main .dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-4); }
.slot.lane .slot-main .dot[data-tone='ok'] { background: var(--ok); }
.slot.lane .slot-main .dot[data-tone='crit'] { background: var(--crit); }
.slot.lane .slot-main .dot[data-tone='warn'] { background: var(--warn); animation: job-pulse 1.2s ease-in-out infinite; }
.slot.lane .slot-sub { display: grid; gap: 4px; }
.lane-bar { display: flex; gap: 3px; width: 100%; max-width: 220px; }
.lane-bar i { flex: 1 1 0; height: 3px; border-radius: 2px; background: var(--hairline-strong); }
.lane-bar i[data-status='ok'] { background: var(--ok); }
.lane-bar i[data-status='failed'] { background: var(--crit); }
.lane-bar i[data-status='running'] { background: var(--warn); animation: job-pulse 1.2s ease-in-out infinite; }
.lane-foot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-1); }
.lane-foot.bad { color: var(--crit); }
.lane-foot .tabular { font-variant-numeric: tabular-nums; }
.route-steps { display: inline-flex; align-items: center; gap: var(--s3); flex: 1 1 auto; }
.route-step { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--fg-2); white-space: nowrap; }
.route-step[data-status='pending'] { color: var(--fg-4); }
.route-step .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-4); }
.route-step .dot[data-tone='ok'] { background: var(--ok); }
.route-step .dot[data-tone='crit'] { background: var(--crit); }
.route-step .dot[data-tone='warn'] { background: var(--warn); animation: job-pulse 1.2s ease-in-out infinite; }
.route-note { font-size: var(--fs-1); color: var(--fg-2); line-height: 1.45; }
.route-note b { font-weight: 600; color: var(--fg); }
.route-note.bad b { color: var(--crit); }

@media (max-width: 900px) {
  .route-row:not(.draft):not(.job) { grid-template-columns: minmax(0, 1fr); row-gap: var(--s2); min-height: 0; }
  .meta-line.rot { min-height: 0; }
  .route-row:not(.draft):not(.job) .route-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px var(--s3); min-width: 0; min-height: 0; }
  .route-row:not(.draft):not(.job) .meta-line { flex: 0 1 auto; max-width: 100%; }
  .route-row:not(.draft):not(.job) .rot-ctl { flex-wrap: wrap; row-gap: 4px; }
  .route-row:not(.draft):not(.job) .meta-line:empty { display: none; }
  .route-row:not(.draft):not(.job) .route-act { justify-content: flex-end; }
  .act-stack { grid-auto-flow: column; justify-items: start; gap: var(--s1); }
  .route-slots { grid-template-columns: 1fr; row-gap: 6px; }
  .slot { grid-template-columns: 34px minmax(0, 1fr); column-gap: var(--s2); min-height: 34px; }
  .slot-tile { width: 34px; height: 34px; font-size: 8px; letter-spacing: .03em; }
  .route-foot { flex-wrap: wrap; row-gap: var(--s2); }
  .route-rot, .route-steps { flex-basis: 100%; }
  .route-act { margin-left: 0; }
  .draft-meta { grid-template-columns: 1fr; gap: var(--s1); flex-basis: 100%; }
  .slot-editor-head { flex-wrap: wrap; gap: var(--s2); }
  .slot-editor-head .slot-editor-title { flex: 1 1 0; min-width: 0; }
  .slot-editor-head .slot-editor-title .dim { display: none; }
  .slot-editor-head > .segmented { order: 3; flex-basis: 100%; margin-left: 0; }
  .slot-editor-head > .segmented .seg { flex: 1 1 0; justify-content: center; }
  .slot-editor-close { order: 2; }
  .slot-fields.field-row { grid-template-columns: 1fr; }
  .slot-editor-foot .dim { display: none; }
  .slot-editor-foot { justify-content: flex-end; }
}

/* Providers (Nodes view) + Egress group in the exit inspector ---------- */
#providers-panel { margin-top: var(--s4); }
.provider-row { min-height: 52px; }
.provider-main { min-width: 0; font-size: var(--fs-1); color: var(--fg-2); }
.provider-main .stack small { margin-top: 1px; }
.provider-form .profile-name-input { min-width: 200px; font-family: var(--mono); letter-spacing: .04em; }
.provider-form .profile-name-input::placeholder { font-family: var(--font); letter-spacing: 0; }
.insp-egress .egress-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.insp-egress .egress-row .quiet-btn { white-space: nowrap; }
.insp-egress .egress-row .inline-field { flex: 0 1 auto; }
.insp-egress .egress-row .select.sm { width: auto; max-width: 100%; }
.insp-egress .kv-health b { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.node-row .cell.lead { flex-wrap: nowrap; }
.node-row .cell.lead .stack { min-width: 0; flex: 1 1 0; }
.node-row .cell.lead .stack small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insp-egress .egress-auto { display: flex; margin-top: var(--s2); }
.insp-egress > small.dim { display: block; margin-top: var(--s2); font-size: var(--fs-1); line-height: 1.45; }
.insp-egress .job-steps.compact { grid-template-columns: 1fr; gap: 4px; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hairline); }
.insp-egress .route-step { display: grid; grid-template-columns: 6px auto minmax(0, 1fr); white-space: normal; }
.insp-egress .route-step small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
@media (max-width: 900px) { .provider-row { grid-template-columns: 1fr auto; } .provider-row .provider-main { grid-column: 1 / -1; } }