/* The colours, the base and the sign-in step are copied from
   applications/ops-agent/internal/brain/assets/style.css at d536e98c. The console follows the
   system's light or dark setting; app.js sets .light or .dark on the root when the person
   picks one. */
:root {
  --bg: #0c0d0f;
  --panel: #141518;
  --panel-2: #1a1c20;
  --line: #2a2c31;
  --fg: #e6e2d8;
  --muted: #9b978d;
  --faint: #827e75;
  --live: #e8a33d;
  --bad: #e0614f;
  --good: #86b98f;
  --unsure: #cdb76a;
  --issue: #f2cc3d;
  --land: #393b41;
  --upgrade: #7fb3ea;
  --demo: #e88bbd;
  --demo-fg: #16090f;
  --dim: rgb(0 0 0 / 0.5);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not(.dark) {
    --bg: #f3f1eb;
    --panel: #fbfaf7;
    --panel-2: #efece5;
    --line: #d8d4ca;
    --fg: #1f1d1a;
    --muted: #5c5850;
    --faint: #746f66;
    --live: #9a5604;
    --bad: #b3392b;
    --good: #3a7444;
    --unsure: #7f6510;
    --issue: #8a6a00;
    --land: #cdc8bb;
    --upgrade: #1f5c9a;
    --demo: #a3306c;
    --demo-fg: #fff7fb;
    --dim: rgb(20 16 12 / 0.28);
    color-scheme: light;
  }
}
:root.light {
  --bg: #f3f1eb;
  --panel: #fbfaf7;
  --panel-2: #efece5;
  --line: #d8d4ca;
  --fg: #1f1d1a;
  --muted: #5c5850;
  --faint: #746f66;
  --live: #9a5604;
  --bad: #b3392b;
  --good: #3a7444;
  --unsure: #7f6510;
  --issue: #8a6a00;
  --land: #cdc8bb;
  --upgrade: #1f5c9a;
  --demo: #a3306c;
  --demo-fg: #fff7fb;
  --dim: rgb(20 16 12 / 0.28);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg); overflow: hidden;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* Sign-in. login.js reads the signin class as "the sign-in step came back", so the
   signed-in page must never carry it. */
body.signin { display: grid; place-items: center; overflow: auto; }
.signin-box { width: min(420px, calc(100% - 32px)); }
.signin-box h1 { font-size: 1.1rem; font-weight: 600; margin: 0 0 6px; }
#status { color: var(--muted); margin: 0; min-height: 1.45em; }
#status.error { color: var(--bad); }

/* The console */
body.console { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }

#top {
  position: sticky; top: 0; z-index: 3; background: var(--bg); border-bottom: 1px solid var(--line);
  --gutter: max(16px, calc((100% - 1180px) / 2 + 16px));
}
/* One row: the name, the service, the views and the page's own buttons. Below 1100 px the
   views get a row of their own. */
#bar { display: flex; align-items: center; gap: 4px 14px; padding: 0 var(--gutter); min-height: 52px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--fg); }
.brand-mark { display: block; color: var(--upgrade); }
#bar h1 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: 0.01em; }
.service-pick select {
  appearance: none; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 4px 26px 4px 10px;
  font-size: 13px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 9px) 55%; background-size: 4px 4px; background-repeat: no-repeat;
}
.service-pick select:disabled { cursor: default; opacity: 1; }
.bar-end { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.env { color: var(--muted); font-size: 12px; }
.env[hidden] { display: none; }
.fresh { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.fresh.bad { color: var(--bad); font-weight: 600; }
.icon-btn {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer;
}
.icon-btn:hover { color: var(--fg); border-color: var(--line); background: var(--panel); }

/* What the agent is doing now, as one card: the headline from train state is the page's
   status, with each train's rings as a bar; the step line and the read's freshness sit on
   the right. */
.now { position: relative; padding: 0 var(--gutter) 12px; }
.now-card {
  display: flex; align-items: center; gap: 6px 18px; min-height: 48px; padding: 6px 14px 6px 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.now-card:has(.now-head[data-state="upgrading"]) { box-shadow: inset 3px 0 0 var(--upgrade); }
.now-card:has(.now-head[data-state="paused"]) { box-shadow: inset 3px 0 0 var(--issue); }
/* While a train rolls, a faint light passes over the card now and then. */
.now-card { position: relative; }
.now-card:has(.now-head[data-state="upgrading"])::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--upgrade) 12%, transparent) 50%, transparent 65%) no-repeat;
  background-size: 60% 100%; animation: now-sweep 6s ease-in-out infinite;
}
@keyframes now-sweep { 0% { background-position: -120% 0; } 55%, 100% { background-position: 220% 0; } }
.now-rings i { transition: background-color 0.6s ease; }
.now-open {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; flex: 1 1 auto; max-width: 100%; min-width: 0;
  padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; background: none;
  text-align: left; cursor: pointer;
}
.now-open:hover, .now-open[aria-expanded="true"] { border-color: var(--line); background: var(--panel-2); }
.now-head { display: flex; flex-direction: column; gap: 4px; flex: 0 1 auto; max-width: 100%; min-width: 0; }
.now-line, .now-step { display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.now-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.now-line { font-size: 14.5px; font-weight: 600; line-height: 22px; }
.now-line[data-state="upgrading"] { color: var(--upgrade); }
.now-line[data-state="paused"] { color: var(--issue); }
.now-line[data-state="unknown"] { color: var(--unsure); }
.now-icon { flex: none; display: grid; place-items: center; width: 16px; height: 16px; }
.now-icon svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.now-line[data-state="upgrading"] .now-icon circle { fill: currentColor; fill-opacity: 0.16; }
.now-line[data-state="unknown"] .now-icon circle { stroke-dasharray: 2.2 2; }
.now-line[data-state="idle"]::before { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: var(--good); }
/* A train's rings: passed, the one it is at, and the ones still to go. */
.now-rings { display: inline-flex; flex: none; gap: 3px; margin-left: 4px; }
.now-rings i { width: 18px; height: 6px; border-radius: 3px; background: var(--line); }
.now-rings i.passed { background: var(--good); }
.now-rings i.at { background: currentColor; }
.now-line[data-state="upgrading"] .now-rings i.at { animation: ring-at 1.6s ease-in-out infinite; }
@keyframes ring-at { 50% { opacity: 0.45; } }
/* The step line and the freshness change every second, so each keeps a fixed width that
   fits its usual texts: the dot and the divider stay where they are. */
.now-step { gap: 6px; min-width: min(21rem, 100%); margin-left: auto; font-size: 12.5px; line-height: 18px; color: var(--muted); }
.now-step[data-state="working"] { color: var(--fg); }
.now-step[data-state="failing"], .now-step[data-state="offline"] { color: var(--bad); }
.now-step[data-state="late"] { color: var(--unsure); }
.now-dot { flex: none; width: 7px; height: 7px; display: grid; place-items: center; }
.now-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.now-step[data-state="working"] > .now-dot::before { background: var(--live); }
.now-step[data-state="failing"] > .now-dot::before { background: var(--bad); }
.now-step[data-state="inactive"] > .now-dot::before, .now-step[data-state="connecting"] > .now-dot::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }
.now-step[data-state="late"] > .now-dot::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--unsure); }
.now-step[data-state="offline"] > .now-dot::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bad); }
.now-chev {
  flex: none; width: 5px; height: 5px; margin: 0 2px 2px 0; border: solid var(--faint); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.now-open[aria-expanded="true"] .now-chev { transform: rotate(-135deg); margin-bottom: -2px; }
.now-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; width: 9.5rem; margin: 0; padding-left: 18px;
  border-left: 1px solid var(--line); line-height: 17px; text-align: right;
}
.now-log {
  position: absolute; z-index: 4; top: calc(100% - 4px); left: var(--gutter); width: min(560px, calc(100% - 32px));
  max-height: min(70vh, 520px); overflow-y: auto; padding: 10px 14px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.2);
}
.now-log[hidden] { display: none; }
.now-log-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; font-size: 12.5px; }
.now-log-head h2 { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.now-log-old { margin: 0 0 6px; color: var(--bad); font-size: 12.5px; }
.now-log.old .now-entries { opacity: 0.55; }
.now-entries { list-style: none; margin: 0; padding: 0; }
.now-entry { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.now-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.now-summary { overflow-wrap: anywhere; }

.tabs { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: none; display: inline-flex; align-items: center; white-space: nowrap; border: 0; background: none; padding: 0 9px;
  cursor: pointer; color: var(--muted); font-size: 13px; box-shadow: inset 0 -2px 0 transparent;
}
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--fg); }
.tabs button:focus-visible { outline-offset: -2px; }
.tabs .count {
  min-width: 17px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: color-mix(in srgb, var(--bad) 18%, transparent);
  color: var(--bad); font-size: 11px; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums;
}
.tabs .count:empty { display: none; }
@media (max-width: 1099px) {
  #bar { flex-wrap: wrap; padding-top: 8px; }
  .tabs { order: 9; flex-basis: 100%; height: 40px; margin: 0 -9px; }
}

/* Disconnected: the whole page says so, and the data dims, so a frozen page never looks current. */
.offline {
  margin: 0; padding: 8px var(--gutter); color: var(--fg); background: var(--panel-2);
  border-bottom: 1px solid var(--bad); font-size: 13px;
}
.offline[hidden] { display: none; }
body.offline #views { opacity: 0.45; }
body.offline .age { visibility: hidden; }

#views { max-width: 1180px; margin: 0 auto; padding: 4px 16px 48px; }
.view[hidden] { display: none; }
.view-head { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 6px; }
.view-head h2 { font-size: 13px; font-weight: 600; margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.view h3 { font-size: 14px; font-weight: 600; margin: 0; }
.sub-head { margin: 22px 0 4px !important; }
.empty { color: var(--muted); margin: 6px 0; }
.note { color: var(--faint); font-size: 12.5px; margin: 10px 0 0; }
.read-line { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; }
.read-line .stale, .stale-note { color: var(--unsure); }
.scroll { overflow-x: auto; max-width: 100%; }

.dot { white-space: nowrap; }
.dot::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px;
  background: currentColor;
}
.dot:empty::before { margin-right: 7px; }
.dot.good::before { background: var(--good); }
.dot.bad::before { background: var(--bad); }
.dot.unsure::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--unsure); }
.dot.warn::before { background: var(--issue); }
.dot.muted::before { background: var(--faint); }
.bad { color: var(--bad); }
.warn { color: var(--issue); }
.good { color: var(--good); }
.dot.good, .dot.unsure, .dot.muted { color: inherit; }

/* Not active cells */
.inactive { padding: 12px 0; border-top: 1px solid var(--line); }
.inactive .state { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.inactive .what { margin: 2px 0 0; color: var(--faint); font-size: 12.5px; max-width: 60ch; }
.inactive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 28px; }

/* Agent */
.pipeline {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 0;
  list-style: none; margin: 8px 0 18px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.stage { position: relative; padding: 12px 14px; border-left: 1px solid var(--line); min-width: 0; }
.stage:first-child { border-left: 0; }
.stage + .stage::before {
  content: ""; position: absolute; left: -5px; top: 18px; width: 8px; height: 8px; background: var(--panel);
  border: solid var(--faint); border-width: 1px 1px 0 0; transform: rotate(45deg);
}
.stage-name { margin: 0 0 6px; color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.readers { display: flex; flex-direction: column; gap: 10px; }
.readers .stage-name { margin-bottom: -4px; }
.part-name { font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.part-svc { color: var(--muted); font-weight: 400; font-size: 12px; }
.part.off .part-name { color: var(--muted); font-weight: 500; }
.part-line { margin: 2px 0 0; font-size: 12.5px; }
.part-line.running { color: var(--live); }
.part-meta { margin: 1px 0 0; color: var(--faint); font-size: 12px; }
.overdue { color: var(--unsure); }
.overdue[hidden] { display: none; }
.part-error { margin: 4px 0 0; color: var(--bad); font-size: 12px; overflow-wrap: anywhere; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0 0 6px; font-size: 13px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
caption { text-align: left; font-weight: 600; padding: 10px 0 4px; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th:first-child, td:first-child { padding-left: 0; }
thead th { color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap; }
.sources td { white-space: nowrap; }
.sources td.src-state { white-space: normal; min-width: 160px; }
.sources tr.stale td.mono { color: var(--unsure); }

/* Fleet */
.matrix { min-width: 820px; }
.matrix th.site-col { min-width: 150px; position: sticky; left: 0; z-index: 1; background: var(--bg); }
.site-detail .detail { position: sticky; left: 0; max-width: calc(100vw - 32px); }
.matrix tr.group th {
  padding: 14px 0 6px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.matrix tbody:first-of-type tr.group th { padding-top: 6px; }
.site-open {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; cursor: pointer; font-weight: 600;
  text-align: left;
}
.site-open .chev {
  flex: none; width: 6px; height: 6px; border: solid var(--faint); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg);
}
.site-open[aria-expanded="true"] .chev { transform: rotate(45deg) translate(-1px, -1px); }
.cell .val { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.cell .sub, .clusters .sub, .v-pin .sub { display: block; font-size: 11.5px; color: var(--muted); }
.cell .sub.bad, .clusters .sub.bad { color: var(--bad); }
.cell .sub.warn, .clusters .sub.warn { color: var(--issue); }
.cell.unknown .val { color: var(--muted); }
.cell.drifted .val { color: var(--bad); }
.site-detail > td { padding: 0 0 14px 14px; background: var(--panel); }
.detail { padding: 8px 14px 0 0; }
.detail h3 { font-size: 12px; color: var(--muted); font-weight: 600; margin: 14px 0 4px; }
.clusters { min-width: 760px; }
.clusters th, .clusters td { border-bottom-color: var(--line); }
.cl-name { font-weight: 500; white-space: nowrap; }
.tag {
  display: inline-block; margin-left: 6px; font-size: 11px; line-height: 1.5; padding: 0 6px; border-radius: 3px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-weight: 400;
}
.tag.bad { color: var(--bad); }
.apps { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.apps li { padding: 2px 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--faint); font-size: 12px; margin: 10px 0 0; }

/* Findings */
.findings { list-style: none; margin: 0 0 14px; padding: 0; }
.finding { padding: 9px 0; border-bottom: 1px solid var(--line); }
.finding:first-child { border-top: 1px solid var(--line); }
.f-summary { margin: 0; display: grid; grid-template-columns: 86px 1fr; gap: 0 10px; }
.f-summary .dot { font-size: 12px; color: var(--muted); padding-top: 1px; }
.finding.critical .f-summary .dot { color: var(--bad); }
.finding.warning .f-summary .dot { color: var(--issue); }
.f-detail, .f-meta { margin: 2px 0 0 96px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.f-meta { color: var(--faint); }

/* Versions */
.versions { display: flex; flex-direction: column; }
.v-row { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 0 20px; align-items: center; padding: 6px 0; }
.v-axis { padding: 0 0 2px; }
.axis { position: relative; height: 18px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.axis .year, .axis .now-mark { position: absolute; top: 0; transform: translateX(-50%); }
.axis .year::after { content: ""; position: absolute; left: 50%; top: 15px; height: 4px; border-left: 1px solid var(--line); }
.axis .now-mark { color: var(--live); }
.v-comp { padding: 10px 0 6px; border-top: 1px solid var(--line); }
.v-title { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.v-latest { margin: 0; color: var(--muted); font-size: 12.5px; }
.v-note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 12px; }
.v-none { margin: 4px 0 0; font-size: 12.5px; }
.v-pin { margin: 0; }
.v-pin .sub { display: inline; margin-left: 4px; }
.v-pin .sub.warn { color: var(--issue); }
.v-where { margin: 1px 0 0; color: var(--muted); font-size: 12px; }
.v-support { margin: 1px 0 0; font-size: 12.5px; }
.v-support.good { color: var(--fg); }
.bar { position: relative; height: 10px; border-radius: 2px; background: var(--panel-2); }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px 0 0 2px; background: var(--faint); opacity: 0.55; }
.bar .fill.warn { background: var(--issue); opacity: 0.8; }
.bar .fill.bad { background: var(--faint); opacity: 0.35; }
.bar .past { position: absolute; top: 0; bottom: 0; background: var(--bad); }
.bar .now-line { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1.5px solid var(--live); }

/* Plans and calendar */
.plans { list-style: none; margin: 0 0 6px; padding: 0; }
.plan { padding: 10px 0; border-bottom: 1px solid var(--line); }
.plan:first-child { border-top: 1px solid var(--line); }
.p-title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.p-id { font-weight: 600; font-size: 13px; }
.p-line { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.p-problems { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; }
.p-meta { margin: 6px 0 0; font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
.rings { list-style: none; margin: 8px 0 0; padding: 0; }
.ring { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 0 12px; padding: 3px 0; font-size: 12.5px; }
.r-name { color: var(--muted); font-variant-numeric: tabular-nums; }
.r-sites { overflow-wrap: anywhere; }
.r-meta { color: var(--faint); }
.r-preflight { grid-column: 2 / -1; margin: 2px 0 6px; }
.pf-line, .pf-note { margin: 0; }
.pf-note { color: var(--unsure); }
.pf-blockers { list-style: none; margin: 2px 0 0; padding: 0; }
.pf-blocker { overflow-wrap: anywhere; }
.pf-meta { color: var(--faint); }
.pf-sources summary { cursor: pointer; color: var(--muted); }
.pf-source-list { list-style: none; margin: 2px 0 0; padding: 0 0 0 12px; }
.t-ring.merged .r-name { color: var(--faint); }
.t-reasons { color: var(--muted); }
.t-gate { margin: 4px 0 2px; }
.gate-matrix { border-collapse: collapse; font-size: 12px; margin: 2px 0 4px; }
.gate-matrix th { font-weight: 500; color: var(--muted); text-align: left; padding: 2px 10px 2px 0; white-space: nowrap; }
.gate-matrix td { padding: 2px 10px 2px 0; white-space: nowrap; }
.gate-matrix td.g-cell .dot { color: var(--muted); }
.cal-frozen { margin: 4px 0; }
.freezes td { white-space: nowrap; }
.freezes td:nth-child(4) { white-space: normal; }
.freezes tr.ended td { color: var(--faint); }

/* Activity */
.activity { list-style: none; margin: 0; padding: 0; }
.a-day {
  margin: 14px 0 0; padding: 4px 0; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; border-bottom: 1px solid var(--line);
}
.a-day:first-child { margin-top: 4px; }
.a-entry { display: grid; grid-template-columns: 70px 1fr; gap: 0 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.a-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; padding-top: 1px; }
.a-summary { margin: 0; }
.a-meta { margin: 1px 0 0; color: var(--faint); font-size: 12px; }

/* Map */
/* The map's controls and key sit on the map itself, clear of the site panel. */
.map-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding: 12px 12px 0;
}
.map-controls .seg { flex-wrap: wrap; }
.map-stage.with-panel .map-controls, .map-stage.with-panel .map-foot { padding-right: calc(min(380px, 48%) + 20px); }
.map-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 24px; padding: 0 12px 10px;
}
.map-foot .read-line { margin: 0; }
.map-foot .state-key { margin: 0; text-align: right; }
.map-foot .key-row { justify-content: flex-end; }
.map-ctl { display: inline-flex; align-items: center; gap: 8px; }
.map-ctl-name { color: var(--muted); font-size: 12px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); overflow: hidden; }
.seg button {
  border: 0; border-left: 1px solid var(--line); background: none; padding: 3px 9px; font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.seg button:first-child { border-left: 0; }
.seg button:hover { color: var(--fg); }
.seg button[aria-checked="true"] { background: var(--panel-2); color: var(--fg); box-shadow: inset 0 -2px 0 var(--fg); }
.seg button:focus-visible { outline-offset: -2px; }
.plan-pick {
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel); padding: 3px 8px; font-size: 12.5px; max-width: 220px;
}
.map-stage {
  position: relative; margin: 16px 0 0; border: 1px solid var(--line); border-radius: 12px;
  background: radial-gradient(120% 90% at 50% 40%, var(--panel) 0%, var(--bg) 100%); overflow: hidden;
}
.map-stage[hidden] { display: none; }
.map-canvas { display: block; width: 100%; height: 440px; touch-action: manipulation; }
.map-stage.with-panel .map-canvas { width: calc(100% - min(380px, 48%) - 12px); }
/* The keyboard's way through the map: out of sight, the map shows the focused site. */
.map-sites { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.map-tip {
  position: absolute; z-index: 2; pointer-events: none; min-width: 180px; max-width: 300px; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px; font-size: 12px; box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
}
.map-tip[hidden] { display: none; }
.map-tip p { margin: 0; }
.map-tip .tip-head { margin-bottom: 3px; font-size: 12.5px; }
.tip-line { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.map-panel {
  position: absolute; z-index: 2; top: 8px; right: 8px; bottom: 8px; width: min(380px, 48%); overflow-y: auto; overflow-x: hidden; padding: 12px 14px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
}
.map-panel[hidden] { display: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-head h3 { font-size: 14px; overflow-wrap: anywhere; }
.panel-close { font-size: 18px; line-height: 1; width: 28px; height: 28px; }
.panel-sub { margin: 0 0 6px; color: var(--muted); font-size: 12px; }
.map-panel h4 { margin: 14px 0 2px; font-size: 12.5px; font-weight: 600; }
.map-panel h4 .tag { margin-left: 6px; }
.panel-comps { font-size: 12px; }
.panel-comps th { font-weight: 400; color: var(--muted); white-space: nowrap; width: 1%; }
.panel-comps th, .panel-comps td { padding: 3px 8px 3px 0; }
.panel-comps td.mono { font-size: 11.5px; overflow-wrap: anywhere; }
.panel-comps td:last-child { white-space: nowrap; }
.panel-findings { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; }
.panel-findings li { padding: 3px 0; }

/* Swatches: the segment colours, unknown hatched as on the map. */
.sw { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--faint); }
.sw.target, .seg-part.target { background: var(--good); }
.sw.behind1, .seg-part.behind1 { background: var(--issue); }
.sw.behind2, .seg-part.behind2 { background: var(--bad); }
.sw.other, .seg-part.other { background: var(--muted); }
.sw.unknown, .seg-part.unknown {
  background: repeating-linear-gradient(135deg, var(--muted) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--muted);
}
.sw.none, .seg-part.none { background: none; box-shadow: inset 0 0 0 1px var(--line); }

.map-legend { margin: 0 0 16px; }
.legend-head { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.legend-prog { margin-right: 10px; color: var(--fg); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.legend-head strong { color: var(--fg); font-weight: 600; }
.spread { display: flex; gap: 2px; height: 8px; }
.seg-part { flex: 1 1 0; min-width: 4px; border-radius: 2px; }
.spread-keys { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 12.5px; }
.spread-keys li { display: inline-flex; align-items: center; gap: 6px; }
.k-val { font-family: var(--mono); font-size: 12px; }
.k-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.state-key { margin: 12px 0 0; color: var(--muted); font-size: 11.5px; }
.key-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 4px; }
.sk { display: inline-flex; align-items: center; gap: 6px; }
.ring-key {
  display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 4px; border: 1.2px solid var(--faint); border-radius: 8px;
  background: var(--panel); color: var(--fg); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* The ring strip under the map, and the ring editor in its place: the same columns and chips. */
/* The rollout: a card under the map with the plan, the fleet's progress and the rings. */
.ring-strip, .insights { margin: 16px 0 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.strip-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; }
.strip-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: 13px; }
.strip-title h2, .ins-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.strip-title .map-ctl-name { display: none; }
.strip-title .tag { margin-left: 0; }
.strip-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rings-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(176px, 1fr); gap: 0; list-style: none; margin: 0; padding: 0; overflow-x: auto;
}
.rs-ring { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px 12px; border-top: 2px solid var(--line); }
.rs-ring + .rs-ring { border-left: 1px solid var(--line); }
.ring-strip > .rings-strip { margin: 0 -16px; padding: 0 4px; border-top: 1px solid var(--line); }
.ring-strip > .rings-strip:last-child { margin-bottom: -16px; }
.ring-strip[hidden] { display: none; }
.ring-strip .rs-ring { border-top-width: 3px; }
.rs-ring.passed { border-top-color: var(--good); }
.rs-ring.failed { border-top-color: var(--bad); }
.rs-ring.current { border-top-color: var(--live); }
.rs-ring.waiting { border-top-style: dashed; border-top-color: var(--faint); }
.rs-ring.lit { background: var(--panel); border-top-color: var(--fg); }
.rs-head { display: flex; align-items: baseline; gap: 8px; margin: 0; min-height: 26px; white-space: nowrap; }
.rs-index { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.rs-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.rs-state { margin-left: auto; font-size: 12px; color: var(--muted); }
.rs-state.current { color: var(--live); }
.rs-state.failed { color: var(--bad); }
.rs-state.passed { color: var(--good); }
/* The ring that is rolling: a light runs along its top edge and its stage mark breathes,
   in step across rebuilds (--sync). A ring that has just passed glows green once. */
.rs-ring { position: relative; }
.rs-ring.rolling { background: linear-gradient(180deg, color-mix(in srgb, var(--live) 7%, transparent), transparent 60%); }
.rs-ring.rolling::before {
  content: ""; position: absolute; top: -3px; left: 0; right: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 70%, var(--live)), transparent) no-repeat;
  background-size: 40% 100%; animation: rs-sweep 3.2s ease-in-out infinite; animation-delay: var(--sync, 0s);
}
@keyframes rs-sweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.rs-ring.just-passed { animation: rs-pass 1.2s ease-out; animation-delay: var(--pass, 0s); }
.rs-ring.lit { background: var(--panel); }
@keyframes rs-pass {
  0% { box-shadow: inset 0 0 0 1px var(--good); background-color: color-mix(in srgb, var(--good) 18%, transparent); }
  100% { box-shadow: inset 0 0 0 1px transparent; background-color: transparent; }
}
.rs-ring.just-passed .rs-marks i { animation: rs-mark-pop 0.5s ease-out both; animation-delay: var(--pass, 0s); }
.rs-ring.just-passed .rs-marks i:nth-child(2) { animation-delay: calc(var(--pass, 0s) + 0.06s); }
.rs-ring.just-passed .rs-marks i:nth-child(3) { animation-delay: calc(var(--pass, 0s) + 0.12s); }
.rs-ring.just-passed .rs-marks i:nth-child(4) { animation-delay: calc(var(--pass, 0s) + 0.18s); }
.rs-ring.just-passed .rs-marks i:nth-child(5) { animation-delay: calc(var(--pass, 0s) + 0.24s); }
@keyframes rs-mark-pop { 0% { transform: scaleY(1); } 40% { transform: scaleY(2.2); } 100% { transform: scaleY(1); } }
.rs-ring.rolling .rs-fill {
  background: linear-gradient(90deg, var(--good), color-mix(in srgb, var(--good) 55%, var(--fg)), var(--good)) 0 0 / 200% 100%;
  animation: rs-flow 3.2s linear infinite; animation-delay: var(--sync, 0s);
}
@keyframes rs-flow { to { background-position: -200% 0; } }

/* A ring's stages and how many of its instances run the target. */
.rs-phase { display: flex; flex-direction: column; gap: 4px; }
.rs-marks { display: flex; gap: 3px; }
.rs-marks i { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--line); }
.rs-marks i.done { background: var(--good); }
.rs-marks i.at { background: var(--live); }
.rs-phase.current .rs-marks i.at { animation: ring-at 1.6s ease-in-out infinite; animation-delay: var(--sync, 0s); }
.rs-phase.waits .rs-marks i.at { animation: none; }
.rs-phase.held .rs-marks i.at { background: var(--issue); }
.rs-phase.failed .rs-marks i.at { background: var(--bad); animation: none; }
.rs-phase-name { color: var(--faint); font-size: 11.5px; }
.rs-phase.current .rs-phase-name { color: var(--muted); }
.rs-prog { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rs-bar { flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.rs-fill { display: block; height: 100%; background: var(--good); transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.rs-prog-n { flex: none; }
.rs-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rs-chips.row { flex-direction: row; flex-wrap: wrap; }
.rs-meta { display: flex; flex-direction: column; margin: auto 0 0; font-size: 12px; line-height: 17px; color: var(--faint); }
.rs-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; padding: 10px 12px; border-top: 1px dashed var(--line); }
.rs-tray h4 { margin: 0; font-size: 12px; font-weight: 500; color: var(--muted); }

/* Chips. A Novus cluster is a squared chip with its beacon in a hexagon; a service instance
   is a round pill with one dot in its version colour. */
.chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 1px 9px 1px 2px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--fg);
  font-size: 12.5px; line-height: 18px; text-align: left; cursor: pointer;
}
.chip:hover, .chip.lit { border-color: var(--faint); background: var(--panel-2); }
.chip[aria-pressed="true"] { border-color: var(--fg); }
.chip-name { min-width: 0; overflow-wrap: anywhere; }
.chip-n { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip.inst { min-height: 22px; padding: 1px 9px 1px 7px; border-radius: 11px; background: none; font-size: 12px; }
.chip.moved { border-style: dashed; }
/* A moved instance says where it came from on a second line. */
.chip.inst.moved { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 6px; padding: 3px 10px 3px 7px; border-radius: 8px; }
.chip.inst.moved .chip-n { grid-column: 2; }
.chip.gone { color: var(--faint); border-style: dashed; cursor: default; background: none; }
.chip-ring { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.mini { display: block; flex: none; }
.idot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.idot.target { background: var(--good); }
.idot.behind1 { background: var(--issue); }
.idot.behind2 { background: var(--bad); }
.idot.other { background: var(--muted); }
.idot.unknown { background: repeating-linear-gradient(135deg, var(--muted) 0 1.5px, transparent 1.5px 3.5px); box-shadow: inset 0 0 0 1px var(--muted); }
.idot.none { background: none; box-shadow: inset 0 0 0 1.5px var(--line); }
.idot.gone { background: none; border: 1px dashed var(--faint); }
.map-tray { margin: 8px 0 0; }
.map-tray[hidden] { display: none; }
.tray-sites { display: flex; flex-wrap: wrap; gap: 6px; }

.map-list { display: none; list-style: none; margin: 4px 0 0; padding: 0; }
.list-site {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; width: 100%; padding: 8px 0;
  border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer;
}
.list-site.lit, .list-site[aria-pressed="true"] { background: var(--panel); }
.ls-text { display: flex; flex-direction: column; min-width: 0; }
.ls-name { font-weight: 600; overflow-wrap: anywhere; }
.ls-sub { color: var(--muted); font-size: 12px; }
.ls-ring { font-size: 11.5px; color: var(--muted); padding: 0 7px; border: 1px dashed var(--faint); border-radius: 10px; white-space: nowrap; }
@keyframes beacon-flash {
  from { box-shadow: 0 0 0 0 var(--fg); }
  to { box-shadow: 0 0 0 12px transparent; }
}
.list-site.flash .mini { border-radius: 50%; animation: beacon-flash 1.2s ease-out 1; }
.ls-ring.current { color: var(--live); border: 1px solid var(--live); }
.ls-ring.passed { color: var(--good); border: 1px solid var(--good); }
.ls-ring.failed { color: var(--bad); border: 1px solid var(--bad); }

/* At phone width the map becomes the list of sites with the same beacons, and the site
   panel opens under it. */
/* Insights: what the agent found that needs a look, only while there is something. */
.insights[hidden] { display: none; }
.ins-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; }
.ins-count { color: var(--issue); font-size: 12.5px; }
.ins-count.bad { color: var(--bad); }
.ins-links { display: flex; gap: 12px; margin-left: auto; font-size: 12.5px; }
.ins-list { list-style: none; margin: 0; padding: 0; }
.ins { display: flex; align-items: baseline; gap: 2px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ins-text { display: flex; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
.ins-summary { overflow-wrap: anywhere; }
.ins-where { color: var(--faint); font-size: 12px; }

@media (max-width: 640px) {
  /* The stage's parts take their own places in the column: the controls and the read line
     first, then the list of sites. */
  .map-stage { display: contents; }
  .map-controls, .map-foot { padding: 0; }
  .map-controls { order: 0; margin-top: 8px; }
  .map-foot { order: 1; margin-top: 10px; }
  .map-foot .state-key, .map-foot .key-row { text-align: left; justify-content: flex-start; }
  .ring-strip, .insights { padding: 12px; }
  .ring-strip > .rings-strip { margin: 0 -12px; }
  .ring-strip > .rings-strip:last-child { margin-bottom: -12px; }
  .map-controls { margin-left: 0; width: 100%; }
  .map-controls .regions { display: none; }
  .map-ctl { flex-wrap: wrap; }
  .seg { flex-wrap: wrap; }
  .map-canvas, .map-tip { display: none !important; }
  .map-list { display: block; }
  .map-sites { display: none; }
  .map-list { margin-top: 8px; }
  .map-view { display: flex; flex-direction: column; }
  .map-list { order: 2; }
  .map-panel { order: 3; }
  .map-tray { order: 3; }
  .ring-strip { order: 4; }
  .map-legend { order: 5; }
  .insights { order: 6; }
  .map-panel { position: static; width: auto; margin: 10px 0 0; max-height: none; scroll-margin-top: 120px; }
  .rings-strip { grid-auto-flow: row; grid-auto-columns: auto; }
  .rs-ring + .rs-ring { border-left: 0; }
}

@media (max-width: 900px) {
  .pipeline { grid-template-columns: 1fr; }
  .stage { border-left: 0; border-top: 1px solid var(--line); }
  .stage:first-child { border-top: 0; }
  .stage + .stage::before { left: 18px; top: -5px; transform: rotate(135deg); }
}
@media (max-width: 720px) {
  #bar { gap: 4px 10px; }
  .brand h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* The card stacks: the headline, then the step line, then the freshness. */
  .now-card { flex-direction: column; align-items: stretch; padding: 6px 8px 8px; }
  .now-open { flex-direction: column; align-items: flex-start; gap: 6px; }
  .now-step { min-width: 0; margin-left: 0; }
  .now-meta { width: auto; flex-direction: row; justify-content: space-between; padding: 6px 8px 0; border-left: 0; border-top: 1px solid var(--line); }
  /* The headline wraps rather than lose the ring; the step line keeps to one line. */
  .now-line { align-items: flex-start; }
  .now-line .now-icon { margin-top: 3px; }
  .now-line .now-text { white-space: normal; overflow-wrap: anywhere; }
  .now-line { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; }
  .now-rings { grid-column: 2; margin: 2px 0 2px; }
  .v-row { grid-template-columns: 1fr; gap: 6px; }
  .v-axis .v-what { display: none; }
  .f-summary { grid-template-columns: 1fr; }
  .f-summary .dot { padding: 0; }
  .f-detail, .f-meta { margin-left: 0; }
  .a-entry { grid-template-columns: 62px 1fr; gap: 0 8px; }
  .ring { grid-template-columns: 56px minmax(0, 1fr); }
  .r-meta { grid-column: 2; }
  .r-preflight { grid-column: 1 / -1; }
}
/* Buttons for actions in a view: plain, outlined; primary is the one way out of a view. */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel); color: var(--fg); font-size: 12.5px; line-height: 20px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--faint); background: var(--panel-2); }
.btn:disabled { color: var(--faint); cursor: default; background: none; border-color: var(--line); }
.btn.quiet { border-color: transparent; background: none; color: var(--muted); }
.btn.primary { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn.primary:hover { opacity: 0.88; }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.sub-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sub-row .sub-head { margin-bottom: 4px; }
.p-acts { margin: 8px 0 0; }

/* The ring editor: the ring strip in edit mode, under the map, which previews the draft. */
.ring-editor { display: flex; flex-direction: column; }
.re-head { margin-bottom: 4px; }
.re-head h3 { font-size: 13.5px; font-weight: 400; }
.re-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.re-note, .re-scope { margin: 0 0 2px; color: var(--muted); font-size: 12.5px; }
.re-warn { margin: 6px 0 0; color: var(--issue); font-size: 12.5px; }
.re-status { margin: 6px 0 10px; font-size: 12.5px; }
.re-status p { margin: 2px 0; }
.re-list { margin: 2px 0; padding-left: 18px; }
.re-good { color: var(--good); }
.re-bad { color: var(--bad); }
.re-muted { color: var(--muted); font-size: 12.5px; margin: 2px 0; }
.re-new { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0 10px; }
.re-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.re-field.inline { flex-direction: row; align-items: center; gap: 6px; }
.re-input {
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--fg); padding: 2px 7px; font: inherit; font-size: 12.5px;
  min-width: 0; height: 26px;
}
.re-new .re-input { width: 200px; }
.re-input[readonly] { color: var(--muted); }
.re-hold { width: 60px; font-variant-numeric: tabular-nums; }
.re-board { padding-bottom: 2px; }
.re-col { min-height: 150px; }
.re-col.bad { border-top-style: solid; border-top-color: var(--bad); }
.re-col.re-over { background: var(--panel); border-top-style: solid; border-top-color: var(--fg); }
.re-tray.re-over { background: var(--panel); border-top-style: solid; border-top-color: var(--fg); }
.re-tools { display: inline-flex; margin: -4px -6px -4px auto; }
.re-tools .icon-btn { width: 26px; height: 26px; }
.re-tools .icon-btn:disabled { color: var(--line); cursor: default; background: none; border-color: transparent; }
.re-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.re-settings .re-field span { font-size: 12px; }
.re-settings select.re-input { max-width: 100%; }
.re-site { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 100%; }
.re-site-row { display: flex; align-items: center; gap: 2px; max-width: 100%; }
.re-chip { cursor: grab; }
.re-chip:disabled { cursor: not-allowed; color: var(--faint); }
.re-chip:disabled .idot { opacity: 0.5; }
.re-expand { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 4px; background: none; color: var(--muted); padding: 0; cursor: pointer; }
.re-expand:hover { color: var(--fg); background: var(--panel-2); }
.re-expand .chev { display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.re-expand[aria-expanded="true"] .chev { transform: rotate(45deg) translate(-1px, -1px); }
.re-instances { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-left: 13px; padding: 2px 0 2px 10px; border-left: 1px solid var(--line); }
.re-refused { margin: 2px 0 0; color: var(--issue); font-size: 12px; }
.re-away { display: flex; align-items: center; gap: 6px; margin: 0 0 0 13px; padding-left: 10px; border-left: 1px solid var(--line); color: var(--faint); font-size: 12px; }
.re-empty { margin: 0; color: var(--faint); font-size: 12px; }
.re-col-notes:empty { display: none; }
.re-col-notes p { margin: 0 0 3px; font-size: 12px; overflow-wrap: anywhere; }
.re-hold-note { color: var(--issue); }
.re-export h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.re-move {
  position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
}
.re-move[hidden] { display: none; }
.re-move-what { font-size: 12.5px; margin-right: 4px; overflow-wrap: anywhere; }
.re-export { margin: 20px 0 0; }
.re-export .re-acts { margin: 0 0 6px; }
.re-diff {
  margin: 6px 0 0; padding: 8px 10px; max-height: 420px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre;
}
.re-plus { color: var(--good); }
.re-minus { color: var(--bad); }
.re-gap { color: var(--faint); }
@media (max-width: 640px) {
  .ring-editor { order: 4; }
  .re-col { min-height: 0; }
  .re-new .re-input { width: 100%; }
  .re-new .re-field { flex: 1 1 100%; }
  .re-chip { cursor: pointer; }
}

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

/* The demo and its guided tour (F261). The demo has its own accent, a banner that stays at
   the top, and the tour docked under the page, which keeps the content clear of it. */
.tour-open[hidden] { display: none; }
.tour-open .narrow { display: none; }
@media (max-width: 720px) {
  .tour-open .wide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tour-open .narrow { display: inline; }
}
body.demo #top { z-index: 5; border-bottom: 2px solid var(--demo); }
.demo-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 6px var(--gutter);
  background: var(--demo); color: var(--demo-fg); font-size: 12.5px;
}
.demo-text { flex: 1 1 320px; min-width: 0; }
.demo-text strong { margin-right: 6px; font-weight: 700; }
.demo-banner .btn { border-color: currentColor; background: transparent; color: inherit; }
.demo-banner .btn:hover { background: rgb(0 0 0 / 0.08); }
.fresh.demo { color: var(--demo); font-weight: 600; }
body.demo #views { padding-bottom: calc(var(--tour-h, 200px) + 24px); }
html:has(body.demo) { scroll-padding-top: 150px; scroll-padding-bottom: calc(var(--tour-h, 200px) + 12px); }

.tour {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--panel); border-top: 2px solid var(--demo);
  padding: 10px max(16px, calc((100% - 1180px) / 2 + 16px)) 12px;
}
.tour-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.tour-pick button { padding: 4px 10px; border: 0; background: none; font-size: 12.5px; cursor: pointer; color: var(--muted); }
.tour-pick button + button { border-left: 1px solid var(--line); }
.tour-pick button[aria-checked="true"] { color: var(--fg); background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--demo); }
.tour-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tour-title { margin: 8px 0 2px; font-size: 14px; font-weight: 600; }
.tour-caption { margin: 0; max-width: 84ch; font-size: 13.5px; }
.tour-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.tour-ctl .btn { min-width: 64px; }
.tour-speed { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); padding: 3px 6px; font-size: 13px; }
.tour-scrub { flex: 1 1 160px; min-width: 120px; margin: 0 4px; accent-color: var(--demo); }
.tour-link { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tour-spot {
  position: fixed; z-index: 4; pointer-events: none; border: 2px solid var(--demo); border-radius: 8px;
  box-shadow: 0 0 0 100vmax var(--dim);
}
.tour-lit { outline: 2px solid var(--demo); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 640px) {
  .tour { padding-top: 8px; padding-bottom: 10px; }
  .tour-title { margin-top: 6px; }
  .tour-caption { font-size: 13px; }
  .tour-ctl { gap: 6px; }
  .tour-ctl .btn { min-width: 0; flex: 1 1 0; }
  .tour-speed { flex: none; }
  .tour-scrub { order: 5; flex-basis: 100%; margin: 4px 0 0; }
  .tour-link { order: 6; }
  .demo-text { flex-basis: 100%; }
}