:root {
  color-scheme: light;
  --abyss: #f7f8fa;
  --deep: #fbfcfd;
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --surface-3: #eef1f5;
  --line: rgba(17, 27, 45, 0.10);
  --line-soft: rgba(17, 27, 45, 0.06);
  --line-strong: rgba(17, 27, 45, 0.16);
  --ink: #17202e;
  --ink-dim: #4e5b70;
  --ink-faint: #647087;
  --ink-ghost: #667085;
  --accent: #2e5fd7;
  --accent-deep: #2349a8;
  --accent-glow: rgba(46, 95, 215, 0.20);
  --accent-dim: rgba(46, 95, 215, 0.09);
  --accent-hover: var(--accent-deep);
  --sonar: #16935a;
  --sonar-deep: #0f7247;
  --sonar-glow: rgba(22, 147, 90, 0.20);
  --sonar-dim: rgba(22, 147, 90, 0.10);
  --amber: #b07a10;
  --amber-glow: rgba(176, 122, 16, 0.18);
  --amber-dim: rgba(176, 122, 16, 0.07);
  --coral: #d23b4c;
  --coral-glow: rgba(210, 59, 76, 0.16);
  --coral-dim: rgba(210, 59, 76, 0.06);
  --tide: var(--accent);
  --tide-glow: var(--accent-glow);
  --bad: var(--coral);
  --warn: var(--amber);
  --mint: var(--sonar);
  --mint-glow: var(--sonar-dim);
  --muted: var(--ink-faint);
  --hud-bg: rgba(255, 255, 255, 0.82);
  --scroll-thumb: #d7dbe2;
  --scroll-thumb-hover: #bdc4cf;
  --tip-ink: #ffffff;
  --tip-warn: #ffca6b;
  --seat-stroke: #ffffff;
  --seat-stroke-muted: rgba(255, 255, 255, 0.72);
  --on-fill: #ffffff;
  --halo: rgba(255, 255, 255, 0.82);
  --veil: rgba(247, 248, 250, 0.72);
  --scrim: rgba(20, 30, 45, 0.38);
  --backdrop: rgba(26, 42, 56, 0.42);
  --legacy-feature-bg: #17202e;
  --legacy-feature-ink: #edf7fa;
  --legacy-feature-dim: #b8cbd4;
  --legacy-feature-border: #385265;
  --legacy-feature-accent: #8aabf4;
  --legacy-feature-warn: #ffca6b;
  --legacy-action-bg: #2349a8;
  --legacy-action-hover: #193b90;
  --legacy-action-ink: #ffffff;
  --legacy-action-outline: #2349a8;
  --legacy-field-bg: #f4f6f9;
  --legacy-terminal-bg: #17202e;
  --legacy-terminal-ink: #d8e9ee;
  --primary-action-bg: #2e5fd7;
  --primary-action-hover: #2349a8;
  --primary-action-ink: #ffffff;
  --f-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* JetBrains Mono is the reference's third choice; the Windows faces stay after it
     so the stack still resolves on this host without changing what it picks first. */
    --f-mono: "IBM Plex Mono", ui-monospace, "JetBrains Mono", "Cascadia Mono", "Consolas", monospace;
  --rail-w: 232px;
  --radius: 10px;
  --radius-sm: 6px;
  --gap: 18px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px -10px rgba(16, 24, 40, 0.10);
  --shadow-glow: 0 0 0 1px var(--accent-dim), 0 6px 20px -10px rgba(16, 24, 40, 0.10);

  --venue-ink: var(--ink);
  --rail-blue: var(--deep);
  --cool-fog: var(--abyss);
  --signal-cyan: var(--accent);
  --attention-amber: var(--amber);
  --fault-coral: var(--coral);
  --paper: var(--surface);
  --muted-ink: var(--ink-dim);
  --display: var(--f-display);
  --body: var(--f-body);
  --utility: var(--f-mono);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --abyss: #0d1119;
  --deep: #10151e;
  --surface: #151c28;
  --surface-2: #1b2433;
  --surface-3: #222d3f;
  --line: rgba(164, 183, 215, 0.13);
  --line-soft: rgba(164, 183, 215, 0.08);
  --line-strong: rgba(164, 183, 215, 0.22);
  --ink: #e7ecf5;
  --ink-dim: #a8b3c7;
  --ink-faint: #7b87a0;
  --ink-ghost: #525e77;
  --accent: #5178e8;
  --accent-deep: #8aabf4;
  --accent-glow: rgba(81, 120, 232, 0.32);
  --accent-dim: rgba(81, 120, 232, 0.15);
  --accent-hover: #4062c8;
  --sonar: #2fc389;
  --sonar-deep: #62dcab;
  --sonar-glow: rgba(47, 195, 137, 0.30);
  --sonar-dim: rgba(47, 195, 137, 0.13);
  --amber: #dfa63d;
  --amber-glow: rgba(223, 166, 61, 0.28);
  --amber-dim: rgba(223, 166, 61, 0.12);
  --coral: #ee6b7c;
  --coral-glow: rgba(238, 107, 124, 0.28);
  --coral-dim: rgba(238, 107, 124, 0.12);
  --hud-bg: rgba(16, 21, 30, 0.82);
  --scroll-thumb: #2e3a50;
  --scroll-thumb-hover: #3d4c68;
  --tip-ink: #10151d;
  --tip-warn: #7d5b0e;
  --seat-stroke: #0d1119;
  --seat-stroke-muted: rgba(13, 17, 25, 0.72);
  --on-fill: #10151d;
  --halo: rgba(13, 17, 25, 0.85);
  --veil: rgba(13, 17, 25, 0.72);
  --scrim: rgba(2, 5, 10, 0.55);
  --backdrop: rgba(2, 5, 10, 0.60);
  --legacy-feature-bg: #10151e;
  --legacy-feature-ink: #e7ecf5;
  --legacy-feature-dim: #a8b3c7;
  --legacy-feature-border: #3d4c68;
  --legacy-feature-accent: #8aabf4;
  --legacy-feature-warn: #dfa63d;
  --legacy-action-bg: #3452ad;
  --legacy-action-hover: #2b438d;
  --legacy-action-ink: #ffffff;
  --legacy-action-outline: #8aabf4;
  --legacy-field-bg: #222d3f;
  --legacy-terminal-bg: #10151e;
  --legacy-terminal-ink: #d8e9ee;
  --primary-action-bg: #4062c8;
  --primary-action-hover: #3452ad;
  --primary-action-ink: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 6px 20px -10px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px var(--accent-dim), 0 6px 20px -10px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--abyss);
  color: var(--ink);
  font-family: var(--f-body);
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--abyss);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea { font: inherit; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

svg.ico {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--amber);
}

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 3px solid transparent; border-radius: 99px; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }

.auth-page {
  background: var(--cool-fog);
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(20rem, 0.82fr) minmax(0, 1.18fr);
  min-height: 100vh;
}

.auth-venue {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 3.75rem);
  overflow: hidden;
  border-right: 1px solid var(--legacy-feature-border);
  background: var(--legacy-feature-bg);
  color: var(--legacy-feature-ink);
}

.auth-brand,
.auth-signal,
.auth-venue__copy {
  position: relative;
  z-index: 1;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.auth-brand__mark {
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  place-items: center;
  border: 1px solid var(--legacy-feature-accent);
  color: var(--legacy-feature-accent);
  font-family: var(--utility);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.auth-brand strong {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.auth-brand div span {
  display: block;
  margin-top: 0.08rem;
  color: var(--legacy-feature-dim);
  font-size: 0.78rem;
}

.auth-venue__copy {
  max-width: 31rem;
  margin: clamp(3rem, 12vh, 8rem) 0;
}

.auth-eyebrow {
  color: var(--ink-dim);
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-venue .auth-eyebrow {
  color: var(--legacy-feature-accent);
}

.auth-venue__copy h1 {
  max-width: 8ch;
  margin: 0.45rem 0 0;
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 0.86;
}

.auth-venue__copy p {
  max-width: 28rem;
  margin: 1.25rem 0 0;
  color: var(--legacy-feature-dim);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.6;
}

.auth-signal {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  max-width: 23rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--legacy-feature-border);
}

.auth-signal__node {
  width: 0.9rem;
  height: 0.9rem;
  border: 3px solid var(--legacy-feature-bg);
  border-radius: 50%;
  background: var(--attention-amber);
  box-shadow: 0 0 0 1px var(--attention-amber);
}

.auth-signal span:last-child {
  display: grid;
  gap: 0.15rem;
}

.auth-signal strong {
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.auth-signal small {
  color: var(--legacy-feature-dim);
  font-family: var(--utility);
  font-size: 0.68rem;
}

.auth-venue__watermark {
  position: absolute;
  right: -0.1em;
  bottom: -0.12em;
  color: rgb(237 247 250 / 4%);
  font-family: var(--display);
  font-size: clamp(10rem, 24vw, 23rem);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.72;
  pointer-events: none;
  user-select: none;
}

.auth-entry {
  display: grid;
  min-width: 0;
  padding: clamp(1.25rem, 6vw, 6rem);
  place-items: center;
  background: var(--cool-fog);
}

.auth-card {
  position: relative;
  width: min(100%, 32rem);
  padding: clamp(1.5rem, 4vw, 3.25rem);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.auth-card::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.8rem;
  height: 2.8rem;
  background: var(--signal-cyan);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  content: "";
}

.auth-card h2 {
  max-width: 10ch;
  margin: 0.45rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.auth-card__intro {
  max-width: 27rem;
  margin: 1rem 0 0;
  color: var(--muted-ink);
  line-height: 1.55;
}

.auth-error {
  margin: 1.15rem 0 0;
  padding: 0.75rem 0.85rem;
  border-left: 4px solid var(--fault-coral);
  background: var(--coral-dim);
  color: var(--ink);
  font-weight: 650;
}

.auth-form {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.65rem;
}

.auth-form label {
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0.025em;
}

.auth-form input[type="password"] {
  width: 100%;
  min-height: 3.15rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--ink-dim);
  border-radius: 0;
  background: var(--legacy-field-bg);
  color: var(--ink);
}

.auth-form input[type="password"]:focus {
  border-color: var(--signal-cyan);
}

.auth-form button {
  min-height: 3.15rem;
  margin-top: 0.3rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--legacy-action-bg);
  border-radius: 0;
  background: var(--legacy-action-bg);
  color: var(--legacy-action-ink);
  cursor: pointer;
  font-weight: 700;
}

.auth-form button:hover {
  border-color: var(--legacy-action-hover);
  background: var(--legacy-action-hover);
}

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-self: start;
  height: 100vh;
  min-width: 0;
  border-right: 1px solid var(--line);
  background: var(--deep);
}

.rail__brand {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 16px 16px 15px;
  border-bottom: 1px solid var(--line-soft);
}

.rail__mark {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 5px;
  border-radius: 9px;
  background: var(--accent-dim);
  color: var(--accent);
  stroke-width: 1.7;
}

.rail__title {
  min-width: 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.1px;
  line-height: 1.1;
}

.rail__title small {
  display: block;
  margin-top: 3px;
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.rail__close { display: none; }

.rail__instance {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.rail__scope-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.rail__scope {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-dim);
  font-family: var(--f-mono);
  font-size: 11px;
}

.rail__scope-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sonar);
  box-shadow: 0 0 0 3px var(--sonar-dim);
}

.rail__nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  padding: 8px 9px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.navgroup { display: grid; gap: 1px; }

.navgroup__label {
  padding: 0 11px;
  margin: 13px 0 5px;
  color: var(--ink-ghost);
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.navgroup:first-child .navgroup__label { margin-top: 2px; }

.navlink {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 11px;
  border-radius: 7px;
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.14s, color 0.14s;
}

.navlink svg { flex: none; width: 16px; height: 16px; opacity: 0.7; transition: opacity 0.14s, color 0.14s; }
.navlink__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navlink:hover { background: var(--surface-2); color: var(--ink); }
.navlink:hover svg { opacity: 1; }
.navlink.is-active { background: var(--accent-dim); color: var(--accent-deep); font-weight: 600; }
.navlink.is-active svg { color: var(--accent); opacity: 1; }
.navlink.is-active::before {
  position: absolute;
  top: 50%;
  left: -9px;
  width: 3px;
  height: 18px;
  border-radius: 0 99px 99px 0;
  background: var(--accent);
  content: "";
  transform: translateY(-50%);
}

.rail__foot {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
}

.rail__foot .ver { color: var(--ink-ghost); font-family: var(--f-mono); font-size: 10px; }
.rail__logout { margin: 0; }
.rail__out {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 5px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 12px;
}
.rail__out .ico { width: 14px; height: 14px; }
.rail__out:hover { background: var(--coral-glow); color: var(--coral); }

.main { display: flex; flex-direction: column; min-width: 0; }

.fleet {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  min-height: 53px;
  padding: 9px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--hud-bg);
  backdrop-filter: blur(12px);
}

.fleet__title { margin-right: 8px; color: var(--ink); font-family: var(--f-display); font-size: 13px; font-weight: 600; letter-spacing: 0.4px; }
.fleet__services { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fleet__spacer { flex: 1; }
.fleet__clock { color: var(--ink-faint); font-family: var(--f-mono); font-size: 11.5px; }
.rail-toggle { display: none; }

.chip {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink-dim);
  font-family: var(--f-mono);
  font-size: 11.5px;
  white-space: nowrap;
}

.chip .dot { flex: none; width: 7px; height: 7px; border: 0; border-radius: 99px; background: var(--ink-faint); box-shadow: none; }
.service-node { display: inline-flex; grid-template-columns: none; }
.service-node.is-ok .dot { background: var(--sonar); }
.service-node.is-attention .dot { background: var(--amber); }
.service-node.is-fault .dot { background: var(--coral); }
.service-node__copy { display: inline; min-width: 0; }
.service-node__copy strong { color: var(--ink); font-size: inherit; font-weight: 600; }
.service-node__copy span { color: var(--ink-dim); font-family: inherit; font-size: inherit; }

.content {
  width: 100%;
  max-width: 1480px;
  margin-right: auto;
  margin-left: auto;
  padding: 26px 22px 60px;
}

.page-head {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 78rem;
  margin: 0 auto 22px;
}

.eyebrow,
.section-label {
  display: block;
  margin-bottom: 7px;
  color: var(--accent-deep);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.page-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.page-head p {
  max-width: 70ch;
  margin: 7px 0 0;
  color: var(--ink-dim);
  font-size: 13.5px;
  text-align: right;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel__head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.panel__head h2 { line-height: 1.25; }
.panel__head .sub { color: var(--ink-faint); font-family: var(--f-mono); font-size: 11px; }
.panel__body { padding: 18px; }
.panel__body.flush { padding: 0; }

.grid { display: grid; gap: var(--gap); }
.grid > * { min-width: 0; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.stat {
  position: relative;
  padding: 16px 17px 15px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.stat::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 70%); content: ""; opacity: 0.45; }
.stat.is-warn::before { background: linear-gradient(90deg, var(--amber), transparent 70%); }
.stat.is-bad::before { background: linear-gradient(90deg, var(--coral), transparent 70%); }
.stat__label { display: flex; gap: 7px; align-items: center; color: var(--ink-faint); font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; }
.stat__value { margin-top: 8px; color: var(--ink); font-family: var(--f-mono); font-size: 30px; font-weight: 600; letter-spacing: -0.5px; line-height: 1; }
.stat__value .unit { margin-left: 3px; color: var(--ink-faint); font-size: 14px; font-weight: 400; }
.stat__sub { margin-top: 7px; color: var(--ink-dim); font-size: 11.5px; }
.stat.is-good .stat__value { color: var(--sonar); }
.stat.is-warn .stat__value { color: var(--amber); }
.stat.is-bad .stat__value { color: var(--coral); }

.pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 2.5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink-dim);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.pill .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.pill.good { border-color: var(--sonar-dim); background: var(--sonar-dim); color: var(--sonar-deep); }
.pill.warn { border-color: var(--amber-glow); background: var(--amber-dim); color: var(--amber); }
.pill.bad { border-color: var(--coral-glow); background: var(--coral-dim); color: var(--coral); }
.pill.info { border-color: var(--accent-dim); background: var(--accent-dim); color: var(--accent-deep); }
.pill.idle { color: var(--ink-faint); }

.pulse { position: relative; }
.pulse::after { position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; border-radius: 99px; background: currentColor; content: ""; transform: translateY(-50%); animation: sonar-ping 1.8s ease-out infinite; }
@keyframes sonar-ping { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.7; } 70%, 100% { box-shadow: 0 0 0 9px transparent; opacity: 0; } }

.btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s, transform 0.05s, box-shadow 0.14s;
  white-space: nowrap;
}

.btn:hover { border-color: var(--line-strong); background: var(--surface-3); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }
.btn.primary {
  border-color: transparent;
  background: var(--primary-action-bg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10);
  color: var(--primary-action-ink);
}
.btn.primary:hover { background: var(--primary-action-hover); }
.btn.ghost { border-color: var(--line); background: transparent; }
.btn.ghost:hover { background: var(--surface); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.table-shell,
.table-wrap { width: 100%; overflow-x: auto; }

.table-shell > table,
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table-shell > table th,
table.data th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.table-shell > table td,
table.data td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-dim);
  vertical-align: middle;
}

.table-shell > table tbody tr,
table.data tbody tr { transition: background 0.12s; }
.table-shell > table tbody tr:hover,
table.data tbody tr:hover { background: var(--surface-2); }
.table-shell > table tr:last-child td,
table.data tr:last-child td { border-bottom: 0; }

label.field { display: block; margin-bottom: 14px; }
.field > span { display: block; margin-bottom: 6px; color: var(--ink-faint); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; }
input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--surface-3);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 13.5px;
  transition: border-color 0.14s, box-shadow 0.14s;
}
input.mono,
textarea.mono,
select.mono { font-family: var(--f-mono); }
input:focus,
select:focus,
textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
input::placeholder,
textarea::placeholder { color: var(--ink-ghost); }
textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.checkbox { display: inline-flex; gap: 8px; align-items: center; color: var(--ink-dim); cursor: pointer; font-size: 13px; }
.checkbox input { width: auto; accent-color: var(--accent); }
.help { margin-top: 5px; color: var(--ink-faint); font-size: 11.5px; }
.inline-form { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; }

/* Nine templates already carry `.reveal-in`; nothing was ever defined for it, so
   every page simply appeared. Deliberately opacity-only: the reference animates
   `translateY(12px)` as well, and its own console.css documents what that costs --
   the animation leaves a transform on the element, an identity matrix is still a
   transform, and a transform creates a stacking context that traps every
   descendant's z-index inside it. That is what made the Queue popovers paint
   underneath the page. Fading alone cannot do that. */
.reveal-in { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.reveal-in:nth-child(1) { animation-delay: 0.02s; }
.reveal-in:nth-child(2) { animation-delay: 0.07s; }
.reveal-in:nth-child(3) { animation-delay: 0.12s; }
.reveal-in:nth-child(4) { animation-delay: 0.17s; }
.reveal-in:nth-child(5) { animation-delay: 0.22s; }
@keyframes rise { from { opacity: 0; } }

.empty { padding: 34px 20px; color: var(--ink-faint); text-align: center; }
.empty svg { width: 32px; height: 32px; margin-bottom: 9px; color: var(--accent); opacity: 0.45; }
.empty h3 { margin-bottom: 5px; color: var(--ink-dim); }
.empty p { margin: 0; font-size: 12.5px; }
.muted { color: var(--ink-faint); }
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mono { font-family: var(--f-mono); }
.tnum { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
hr.rule { margin: 18px 0; border: 0; border-top: 1px solid var(--line-soft); }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; gap: var(--gap); align-items: center; }
.banner { display: flex; gap: 11px; align-items: center; padding: 11px 15px; margin-bottom: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: 13px; }
.banner.warn { border-color: var(--amber-glow); background: var(--amber-dim); color: var(--amber); }
.banner.bad { border-color: var(--coral-glow); background: var(--coral-dim); color: var(--coral); }
.banner svg { flex: none; width: 17px; height: 17px; }

.modal-backdrop { position: fixed; z-index: 70; inset: 0; display: none; align-items: flex-start; justify-content: center; padding: 7vh 18px 18px; background: var(--backdrop); backdrop-filter: blur(3px); }
.modal-backdrop.open { display: flex; }
.modal { display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: 84vh; }
.modal.wide { max-width: 920px; }
.modal__head { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.modal__close { padding: 4px; border: 0; border-radius: 5px; background: none; color: var(--ink-faint); cursor: pointer; }
.modal__close:hover { background: var(--surface-2); color: var(--ink); }
.modal__body { padding: 20px; overflow-y: auto; }
.modal__foot { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line-soft); }
.toggle { display: inline-flex; gap: 6px; align-items: center; padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface); color: var(--ink-faint); cursor: pointer; font-family: var(--f-mono); font-size: 11px; }
.toggle.on { border-color: var(--accent-glow); background: var(--accent-dim); color: var(--accent-deep); }
.icon-btn { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 5px; background: none; color: var(--ink-faint); cursor: pointer; }
.icon-btn:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink); }
.icon-btn.danger:hover { border-color: var(--coral-glow); color: var(--coral); }

.btn:focus-visible,
.icon-btn:focus-visible,
.toggle:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.console-panel {
  position: relative;
  max-width: 78rem;
  margin: 0 auto 1.25rem;
  padding: clamp(1.15rem, 2.4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.console-panel--ticket {
  overflow: hidden;
}

.console-panel--ticket::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--signal-cyan);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  content: "";
}

.panel-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.3rem;
}

.panel-heading h2,
.next-action h2 {
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: 1.55rem;
  letter-spacing: -0.01em;
}

.panel-heading > p {
  max-width: 34rem;
  margin: 0;
  color: var(--muted-ink);
  font-size: 0.88rem;
  text-align: right;
}

.readiness-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.readiness-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-left-width: 4px;
  color: var(--ink);
  text-decoration: none;
}

.readiness-card.is-ok {
  border-left-color: var(--signal-cyan);
}

.readiness-card.is-attention {
  border-left-color: var(--attention-amber);
}

.readiness-card.is-fault {
  border-left-color: var(--fault-coral);
}

.readiness-card__index {
  color: var(--ink-faint);
  font-family: var(--utility);
  font-size: 0.72rem;
}

.readiness-card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
}

.empty-state h3 {
  margin: 0 0 5px;
  color: var(--ink-dim);
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
}

.readiness-card p {
  margin: 0.2rem 0 0;
  color: var(--muted-ink);
  font-size: 0.8rem;
}

.readiness-card > strong {
  font-family: var(--utility);
  font-size: 0.72rem;
  text-align: right;
}

.next-action p {
  max-width: 48rem;
  color: var(--muted-ink);
}

.action-link {
  display: inline-block;
  padding: 0.7rem 1rem;
  border: 1px solid var(--legacy-action-bg);
  background: var(--legacy-action-bg);
  color: var(--legacy-action-ink);
  font-weight: 650;
  text-decoration: none;
}

.action-link:hover {
  border-color: var(--legacy-action-hover);
  background: var(--legacy-action-hover);
}

.setting-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.setting-row {
  display: grid;
  grid-template-columns: minmax(13rem, 1.3fr) minmax(10rem, 1fr) auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.setting-row__identity {
  display: grid;
  gap: 0.15rem;
}

.setting-row__identity label {
  font-family: var(--display);
  font-weight: 650;
}

.setting-row__identity code,
.setting-row__revision {
  color: var(--muted-ink);
  font-family: var(--utility);
  font-size: 0.7rem;
}

.setting-row__control input,
.setting-row__control select,
.log-picker select {
  width: 100%;
  min-height: 2.55rem;
  padding: 0.52rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--legacy-field-bg);
  color: var(--ink);
}

.setting-row button,
.log-picker button {
  min-height: 2.55rem;
  padding: 0.52rem 0.85rem;
  border: 1px solid var(--legacy-action-outline);
  background: transparent;
  color: var(--legacy-action-outline);
  cursor: pointer;
  font-weight: 650;
}

.setting-row button:hover,
.log-picker button:hover {
  background: var(--legacy-action-hover);
  color: var(--legacy-action-ink);
}

.log-picker {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr) auto minmax(6rem, 8rem) auto;
  gap: 0.65rem;
  align-items: center;
}

.log-picker label {
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 650;
}

.log-output {
  max-height: 34rem;
  margin: 1.25rem 0 0;
  padding: 0.8rem 0.8rem 0.8rem 3.2rem;
  overflow: auto;
  border: 1px solid var(--legacy-feature-border);
  background: var(--legacy-terminal-bg);
  color: var(--legacy-terminal-ink);
  font-family: var(--utility);
  font-size: 0.73rem;
  line-height: 1.65;
}

.log-output li {
  padding-left: 0.45rem;
  border-bottom: 1px solid var(--legacy-feature-border);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.empty-state {
  padding: 34px 20px;
  border: 0;
  color: var(--ink-faint);
  text-align: center;
}

.empty-state svg {
  width: 32px;
  height: 32px;
  margin-bottom: 9px;
  color: var(--accent);
  opacity: 0.45;
}

.empty-state p {
  margin: 0;
  font-size: 12.5px;
}

.empty-state.is-fault {
  border: 1px solid var(--coral-glow);
  border-radius: var(--radius-sm);
  background: var(--coral-dim);
  color: var(--coral);
}

.empty-state.is-fault h3,
.empty-state.is-fault p { color: var(--coral); }

.console-toast {
  position: fixed;
  z-index: 15;
  right: 1rem;
  bottom: 1rem;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--signal-cyan);
  background: var(--legacy-terminal-bg);
  color: var(--legacy-terminal-ink);
  box-shadow: var(--shadow);
}

.console-toast.is-fault {
  border-left-color: var(--fault-coral);
}

.console-toast.is-attention {
  border-left-color: var(--attention-amber);
}

/* Durable cart evidence and explicitly gated checkout controls. */
.carts-page,
.cart-list {
  display: grid;
  gap: 1rem;
}

.cart-boundary {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--signal-cyan);
  background: var(--paper);
}

.cart-boundary h2,
.cart-card h3,
.cart-gates h3 {
  margin: 0.2rem 0;
}

.cart-boundary p,
.cart-boundary ul,
.cart-card p,
.cart-gates p {
  margin: 0;
  color: var(--muted-ink);
}

.cart-boundary ul {
  min-width: 16rem;
  padding-left: 1.2rem;
}

.cart-gates {
  display: grid;
  gap: 0.75rem;
}

.cart-gates > article,
.cart-card {
  border: 1px solid var(--line);
  background: var(--paper);
}

.cart-gates > article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
}

.cart-gate__actions,
.cart-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.cart-card__footer {
  flex-wrap: wrap;
}

/* The checkout control is one button now: the card is chosen by the brand chips beside
   it, and its security code comes out of storage. So it sits inline in the action row
   rather than being the panel-wide form it was when it collected three fields. */
.cart-checkout-form {
  display: inline-flex;
  align-items: center;
}

.cart-account-form {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(7rem, 0.35fr) auto;
  gap: 0.65rem;
  align-items: end;
  flex: 1 1 100%;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--signal-cyan) 50%, var(--line));
  background: color-mix(in srgb, var(--signal-cyan) 6%, var(--paper));
}

/* ---- the brand chips ----------------------------------------------------------------
   One row of them per hold, single-select. The lit chip is the brand the checkout will
   actually spend -- either an explicit pick or the head of the saved order -- so the row
   states which card is about to be charged instead of leaving it to be inferred. */
.brand-lead {
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-chips {
  display: inline-flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

.brand-chip {
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-dim);
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  user-select: none;
}

.brand-chip:hover:not(:disabled) { border-color: var(--accent); }
.brand-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brand-chip:disabled { cursor: not-allowed; opacity: 0.5; }

.brand-chip.on {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent-deep);
}

/* ---- the Checkout settings order editor --------------------------------------------- */
.brand-order { list-style: none; margin: 4px 0; padding: 0; }

.brand-order li {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
}

.brand-order li label { flex: 1; }

.cart-account-form {
  grid-template-columns: minmax(16rem, 1fr) auto;
  border-color: color-mix(in srgb, var(--mint) 45%, var(--line));
  background: color-mix(in srgb, var(--mint) 5%, var(--paper));
}

.cart-account-form label {
  display: grid;
  gap: 0.3rem;
  color: var(--muted-ink);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cart-account-form select {
  min-height: 2.5rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.cart-account-form small {
  grid-column: 1 / -1;
  color: var(--muted-ink);
}

.cart-gate__actions button,
.cart-card__footer button {
  min-height: 2.5rem;
}

.cart-card[data-state="manual_review"],
.cart-card[data-state="ambiguous"] {
  border-color: var(--attention-amber);
}

.cart-card__header,
.cart-card__footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
}

.cart-card__header {
  border-bottom: 1px solid var(--line);
}

.cart-card__footer {
  border-top: 1px solid var(--line);
}

.cart-warning {
  padding: 0.9rem 1.1rem;
  background: color-mix(in srgb, var(--attention-amber) 14%, transparent);
  border-bottom: 1px solid var(--line);
}

.cart-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.8fr);
  gap: 1rem;
  padding: 1rem 1.1rem;
}

.cart-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.cart-metrics div {
  padding: 0.75rem;
  border: 1px solid var(--line);
}

.cart-metrics dt {
  color: var(--muted-ink);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cart-metrics dd {
  margin: 0.25rem 0 0;
  font-weight: 700;
}

.cart-seats ul,
.cart-history ol {
  list-style: none;
  padding: 0;
  margin: 0.65rem 0 0;
}

.cart-seats li,
.cart-history li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.cart-history {
  padding: 0 1.1rem 1rem;
}

.cart-history summary {
  cursor: pointer;
  font-weight: 700;
}

@media (max-width: 760px) {
  .cart-boundary,
  .cart-gates > article,
  .cart-card__header,
  .cart-card__footer,
  .cart-gate__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cart-boundary ul {
    min-width: 0;
  }

  .cart-card__grid,
  .cart-metrics,
  .cart-checkout-form,
  .cart-account-form {
    grid-template-columns: 1fr;
  }

  .cart-checkout-form small,
  .cart-account-form small {
    grid-column: auto;
  }
}

.identity-workspace {
  --identity-grid: var(--line);
}

.identity-guard {
  display: grid;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(18rem, 1.2fr);
  gap: 1.5rem;
  align-items: end;
  max-width: 78rem;
  margin: 0 auto 1rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--legacy-feature-border);
  border-left: 5px solid var(--attention-amber);
  background: var(--legacy-feature-bg);
  color: var(--legacy-feature-ink);
}

.identity-guard .section-label {
  color: var(--legacy-feature-warn);
}

.identity-guard h2 {
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  letter-spacing: -0.015em;
}

.identity-guard p {
  max-width: 43rem;
  margin: 0;
  color: var(--legacy-feature-dim);
  line-height: 1.55;
}

.ownership-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(2rem, 0.18fr) minmax(0, 1fr) minmax(2rem, 0.18fr) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  max-width: 78rem;
  margin: 0 auto 1.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.ownership-rail > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.65rem;
  align-items: baseline;
  min-width: 0;
}

.ownership-rail span {
  grid-row: 1 / 3;
  color: var(--ink-faint);
  font-family: var(--utility);
  font-size: 0.68rem;
}

.ownership-rail strong {
  font-family: var(--display);
  font-size: 0.92rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.ownership-rail small {
  overflow: hidden;
  color: var(--muted-ink);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ownership-rail i {
  height: 1px;
  background: var(--line-strong);
}

.identity-intake {
  border-top: 4px solid var(--ink);
}

.identity-intake__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.75fr);
  gap: 1rem;
  align-items: start;
}

.identity-intake__grid--three {
  grid-template-columns: minmax(14rem, 0.68fr) minmax(23rem, 1.45fr) minmax(15rem, 0.72fr);
}

.identity-form {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.identity-form[aria-busy="true"] {
  border-color: var(--attention-amber);
  background: var(--amber-dim);
}

.identity-form h3,
.pool-card h3,
.identity-card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.08rem;
  letter-spacing: 0.005em;
}

.identity-form > p {
  margin: 0;
  color: var(--muted-ink);
  font-size: 0.8rem;
  line-height: 1.5;
}

.identity-form code {
  font-family: var(--utility);
  font-size: 0.7rem;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.field-grid--payment {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field-control {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.field-control--wide {
  grid-column: span 2;
}

.field-control small {
  color: var(--muted-ink);
  font-family: var(--body);
  font-weight: 400;
}

.field-control input,
.field-control select,
.lifecycle-form select,
.inventory-tools select,
.assignment-row input {
  width: 100%;
  min-height: 2.65rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--legacy-field-bg);
  color: var(--ink);
}

.field-control input[type="file"] {
  padding: 0.45rem;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 400;
}

.identity-form button,
.lifecycle-form button,
.assignment-row button {
  min-height: 2.55rem;
  padding: 0.52rem 0.85rem;
  border: 1px solid var(--legacy-action-bg);
  border-radius: 0;
  background: var(--legacy-action-bg);
  color: var(--legacy-action-ink);
  cursor: pointer;
  font-weight: 650;
}

.identity-form button {
  justify-self: start;
}

.identity-form button:hover,
.lifecycle-form button:hover,
.assignment-row button:hover,
.quiet-button:hover {
  border-color: var(--legacy-action-hover);
  background: var(--legacy-action-hover);
  color: var(--legacy-action-ink);
}

.identity-form button:disabled,
.lifecycle-form button:disabled,
.assignment-row button:disabled,
.quiet-button:disabled,
.field-control input:disabled,
.field-control select:disabled,
.lifecycle-form select:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.quiet-button {
  min-height: 2.55rem;
  padding: 0.52rem 0.85rem;
  border: 1px solid var(--legacy-action-outline);
  border-radius: 0;
  background: transparent;
  color: var(--legacy-action-outline);
  cursor: pointer;
  font-weight: 650;
}

.identity-heading {
  align-items: center;
}

.inventory-tools {
  display: grid;
  grid-template-columns: minmax(11rem, 0.75fr) minmax(11rem, 0.75fr) minmax(8rem, 1.5fr);
  gap: 0.8rem;
  align-items: end;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
}

.inventory-tools label {
  display: grid;
  gap: 0.25rem;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.03em;
}

.inventory-tools p {
  justify-self: end;
  margin: 0 0 0.6rem;
  color: var(--muted-ink);
  font-family: var(--utility);
  font-size: 0.72rem;
}

.identity-list {
  display: grid;
  gap: 0.85rem;
}

.identity-card {
  position: relative;
  min-width: 0;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-faint);
  background:
    linear-gradient(90deg, transparent 0 2.25rem, var(--line) 2.25rem 2.32rem, transparent 2.32rem),
    var(--paper);
}

.identity-card[data-state="authenticated"],
.identity-card[data-state="healthy"],
.identity-card[data-state="available"] {
  border-left-color: var(--signal-cyan);
}

.identity-card[data-state="failed"],
.identity-card[data-state="locked"],
.identity-card[data-state="unhealthy"] {
  border-left-color: var(--fault-coral);
}

.identity-card[data-state="additional_action"],
.identity-card[data-state="cooldown"],
.identity-card[data-state="claimed"] {
  border-left-color: var(--attention-amber);
}

.identity-card__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding-left: 2.15rem;
}

.identity-card__header h3 {
  margin-top: 0.12rem;
  overflow-wrap: anywhere;
}

.identity-card__header p,
.pool-card p {
  margin: 0.2rem 0 0;
  color: var(--muted-ink);
  font-family: var(--utility);
  font-size: 0.72rem;
}

.record-index {
  color: var(--ink-faint);
  font-family: var(--utility);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}

.state-chip,
.lifecycle-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 2.5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink-dim);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.lifecycle-chip {
  border-color: var(--line-strong);
  background: transparent;
}

/* The dot inherits the chip's colour, so the state map below only has to set
   two properties and the dot follows for free. A lifecycle chip is a passive
   label rather than a state, so it does not get one. */
.state-chip::before {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: currentColor;
  content: "";
}

/* One map for three service vocabularies -- queue sessions, account sessions and
   checkout attempts. They overlap only on failed/expired/cancelled, and there
   they agree, so a single map cannot say two things about one word. Anything
   unlisted keeps the neutral pill above, which is the honest default for a
   state this sheet has not been taught. */
.state-chip[data-state="passed"],
.state-chip[data-state="authenticated"],
.state-chip[data-state="confirmed"],
.state-chip[data-state="reconciled"],
.state-chip[data-state="monitoring"] {
  border-color: var(--sonar-glow);
  background: var(--sonar-dim);
  color: var(--sonar-deep);
}

.state-chip[data-state="detected"],
.state-chip[data-state="joining"],
.state-chip[data-state="activating"],
.state-chip[data-state="starting"],
.state-chip[data-state="prepared"] {
  border-color: var(--accent-glow);
  background: var(--accent-dim);
  color: var(--accent-deep);
}

.state-chip[data-state="waiting"],
.state-chip[data-state="additional_action"],
.state-chip[data-state="ambiguous"],
.state-chip[data-state="manual_review"],
.state-chip[data-state="backing_off"],
.state-chip[data-state="refreshing"] {
  border-color: var(--amber-glow);
  background: var(--amber-dim);
  color: var(--amber);
}

.state-chip[data-state="failed"],
.state-chip[data-state="expired"],
.state-chip[data-state="cancelled"],
.state-chip[data-state="revoked"] {
  border-color: var(--coral-glow);
  background: var(--coral-dim);
  color: var(--coral);
}

.identity-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(7rem, 1fr));
  margin: 1rem 0 0;
  padding: 0.8rem 0 0 2.15rem;
  border-top: 1px solid var(--identity-grid);
}

.identity-facts > div {
  min-width: 0;
  padding: 0 0.75rem;
  border-left: 1px solid var(--identity-grid);
}

.identity-facts > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.identity-facts dt {
  color: var(--muted-ink);
  font-family: var(--display);
  font-size: 0.67rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.identity-facts dd {
  margin: 0.22rem 0 0;
  overflow-wrap: anywhere;
  font-family: var(--utility);
  font-size: 0.72rem;
}

.identity-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: start;
  margin-top: 1rem;
  padding: 0.85rem 0 0 2.15rem;
  border-top: 1px solid var(--identity-grid);
}

.identity-card__actions details {
  min-width: min(100%, 16rem);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
}

.identity-card__actions summary {
  padding: 0.65rem 0.75rem;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 650;
}

.identity-form--nested {
  border-width: 1px 0 0;
}

.lifecycle-form {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  min-width: min(100%, 20rem);
}

.lifecycle-form label,
.assignment-row label {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 650;
}

.lifecycle-form select {
  min-height: 2.55rem;
}

.pool-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.pool-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--signal-cyan);
  background: var(--surface-2);
}

.assignment-list {
  display: grid;
  gap: 0.45rem;
  margin: 0.85rem 0 0 2.15rem;
}

.assignment-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 0.6fr) auto auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid var(--identity-grid);
  background: var(--surface-2);
}

.assignment-row > span {
  font-family: var(--utility);
  font-size: 0.72rem;
}

.assignment-row label:not(.check-control) {
  display: grid;
  grid-template-columns: auto minmax(4rem, 1fr);
  gap: 0.35rem;
  align-items: center;
}

.assignment-row input[type="number"] {
  min-height: 2.35rem;
}

.check-control {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  font-family: var(--display);
  font-size: 0.76rem;
  font-weight: 650;
}

.check-control input {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.assignment-empty {
  margin: 0;
  padding: 0.6rem;
  border: 1px dashed var(--line-strong);
  color: var(--muted-ink);
  font-size: 0.78rem;
}

@keyframes live-node-pulse {
  0%, 72%, 100% {
    box-shadow: 0 0 0 1px var(--signal-cyan);
  }

  84% {
    box-shadow: 0 0 0 6px var(--accent-glow);
  }
}

.events-workspace {
  --event-grid: var(--line);
  max-width: 88rem;
  margin: 0 auto;
}

.event-gate-banner {
  display: grid;
  grid-template-columns: minmax(17rem, 0.85fr) minmax(18rem, 1.15fr) auto;
  gap: 1.35rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--legacy-feature-border);
  border-left: 5px solid var(--signal-cyan);
  background: var(--legacy-feature-bg);
  color: var(--legacy-feature-ink);
}

.event-gate-banner .section-label {
  color: var(--legacy-feature-accent);
}

.event-gate-banner h2 {
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  letter-spacing: -0.015em;
}

.event-gate-banner > p {
  margin: 0;
  color: var(--legacy-feature-dim);
  line-height: 1.55;
}

.gate-locks {
  display: grid;
  gap: 0.4rem;
}

.gate-locks span {
  padding: 0.38rem 0.55rem;
  border: 1px solid var(--legacy-feature-border);
  color: var(--legacy-feature-dim);
  font-family: var(--utility);
  font-size: 0.66rem;
  text-align: center;
  text-transform: uppercase;
}

.gate-locks span::before {
  content: "× ";
  color: var(--legacy-feature-warn);
}

/* The add-event form below used to be comma-listed with `.event-card__actions form`, whose
   class went with the card layout -- so its rules are stated on their own now rather than
   riding on a selector that no longer has a second half. The explanation lives here, above
   `.event-intake`, because tests/test_shell_contract.py reads declarations with a naive
   `([^{}]+)\{([^{}]*)\}` scan: a comment directly before a selector becomes part of it. */
.event-intake {
  border-top: 4px solid var(--ink);
}

.event-create-form {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.event-create-form[aria-busy="true"] {
  border-color: var(--attention-amber);
  background: var(--amber-dim);
}

.event-create-form > button {
  justify-self: start;
  min-height: 36px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--legacy-action-bg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10);
  color: var(--legacy-action-ink);
  cursor: pointer;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.event-create-form button:hover {
  border-color: var(--legacy-action-hover);
  background: var(--legacy-action-hover);
}

.event-create-form button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.event-create-form > button {
  min-height: 36px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--legacy-action-bg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10);
  color: var(--legacy-action-ink);
  cursor: pointer;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.event-create-form > button {
  justify-self: start;
}

.event-create-form button:hover {
  border-color: var(--legacy-action-hover);
  background: var(--legacy-action-hover);
}

.event-signal-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 1rem 0 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  list-style: none;
}

.event-signal-strip li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.5rem;
  min-width: 0;
  padding: 0.65rem 0.7rem;
  border-left: 1px solid var(--line);
  background: var(--surface-2);
}

.event-signal-strip li:first-child {
  border-left: 0;
}

.event-signal-strip li::after {
  position: absolute;
  right: -0.23rem;
  top: calc(50% - 0.23rem);
  z-index: 1;
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid var(--line-strong);
  border-left: 0;
  border-bottom: 0;
  background: inherit;
  content: "";
  transform: rotate(45deg);
}

.event-signal-strip li:last-child::after {
  content: none;
}

.event-signal-strip span {
  grid-row: 1 / 3;
  color: var(--ink-faint);
  font-family: var(--utility);
  font-size: 0.62rem;
}

.event-signal-strip strong {
  overflow: hidden;
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.event-signal-strip small {
  overflow: hidden;
  color: var(--muted-ink);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-signal-strip li[data-state="ready"],
.event-signal-strip li[data-state="monitoring"],
.event-signal-strip li[data-state="resolved"],
.event-signal-strip li[data-state="active"] {
  box-shadow: inset 0 3px var(--signal-cyan);
}

.event-signal-strip li[data-state="locked"],
.event-signal-strip li[data-state="disabled"],
.event-signal-strip li[data-state="not_configured"] {
  color: var(--ink-faint);
  background: var(--surface-3);
}

.event-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 0.7fr);
  gap: 0.8rem;
  margin-top: 0.8rem;
  padding-left: 2.2rem;
}

.event-card__grid--map {
  grid-template-columns: minmax(20rem, 1.2fr) minmax(15rem, 0.8fr);
}

.event-readout,
.queue-readout,
.venue-map-panel,
.catalog-panel,
.restock-readout {
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--event-grid);
  background: var(--surface-2);
}

.queue-readout[data-state="active"] {
  border-left: 3px solid var(--attention-amber);
}

.queue-readout[data-state="unavailable"] {
  border-left: 3px solid var(--fault-coral);
}

.queue-readout h4,
.venue-map-panel h4,
.catalog-panel h4,
.restock-readout h4 {
  margin: 0.18rem 0 0;
  font-family: var(--display);
}

.queue-readout > p,
.catalog-panel > p {
  margin: 0.35rem 0 0;
  color: var(--muted-ink);
  font-size: 0.78rem;
  line-height: 1.45;
}

.event-facts,
.queue-progress-list,
.catalog-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0.6rem 0 0;
}

.event-facts > div,
.queue-progress-list > div,
.catalog-counts > div {
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid var(--event-grid);
  border-right: 0;
}

.event-facts > div:nth-child(even),
.queue-progress-list > div:nth-child(even),
.catalog-counts > div:nth-child(even) {
  border-right: 1px solid var(--event-grid);
}

.event-facts dt,
.queue-progress-list dt,
.catalog-counts dt {
  color: var(--muted-ink);
  font-family: var(--display);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.event-facts dd,
.queue-progress-list dd,
.catalog-counts dd {
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
  font-family: var(--utility);
  font-size: 0.7rem;
}

.operator-note {
  margin: 0.6rem 0 0;
  padding: 0.45rem 0.55rem;
  border-left: 3px solid var(--fault-coral);
  background: var(--coral-dim);
  font-size: 0.75rem;
}

.availability-breakdown {
  display: grid;
  gap: 0.3rem;
  max-height: 9rem;
  margin: 0.6rem 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.availability-note {
  margin: 0.5rem 0 0;
  color: var(--muted-ink);
  font-size: 0.68rem;
  line-height: 1.4;
}

.availability-breakdown li {
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
  border-left: 2px solid var(--signal-cyan);
  background: var(--cool-fog);
  font-size: 0.72rem;
}

.availability-breakdown li span {
  color: var(--muted-ink);
  font-family: var(--utility);
}

.subpanel-heading {
  display: flex;
  gap: 0.8rem;
  align-items: start;
  justify-content: space-between;
}

.subpanel-heading > small,
.filter-version {
  color: var(--muted-ink);
  font-family: var(--utility);
  font-size: 0.64rem;
}

.venue-map {
  position: relative;
  min-height: 13rem;
  margin-top: 0.7rem;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(var(--accent-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-dim) 1px, transparent 1px),
    var(--surface-3);
  background-size: 1.5rem 1.5rem;
}

.venue-map__section {
  position: absolute;
  left: var(--map-x);
  top: var(--map-y);
  display: grid;
  width: max(var(--map-width), 2.4rem);
  height: max(var(--map-height), 1.6rem);
  min-width: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--ink);
  font-family: var(--utility);
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.venue-map--empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  background: var(--surface-2);
}

.venue-map--empty p {
  margin: 0;
  color: var(--muted-ink);
}

.restock-readout {
  margin: 0.8rem 0 0 2.2rem;
}

.restock-readout ol {
  display: grid;
  gap: 0.35rem;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}

.restock-readout li {
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  padding: 0.38rem 0.5rem;
  border-left: 2px solid var(--signal-cyan);
  background: var(--cool-fog);
  font-size: 0.72rem;
}

.restock-readout li span {
  color: var(--muted-ink);
  font-family: var(--utility);
}

.restock-readout .muted-row {
  border-left-color: var(--ink-faint);
  color: var(--muted-ink);
}

.event-control-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted-ink);
  font-size: 0.7rem;
}

@media (max-width: 780px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-venue {
    min-height: 18rem;
    padding: 1.35rem;
    border-right: 0;
    border-bottom: 1px solid var(--legacy-feature-border);
  }

  .auth-venue__copy {
    margin: 2.5rem 0 1.75rem;
  }

  .auth-venue__copy h1 {
    font-size: clamp(2.6rem, 11vw, 4.5rem);
  }

  .auth-signal {
    max-width: 20rem;
  }

  .auth-venue__watermark {
    font-size: clamp(9rem, 42vw, 16rem);
  }

  .auth-entry {
    padding: 1.25rem;
  }
}

@media (max-width: 480px) {
  .auth-brand__mark {
    width: 2.7rem;
    height: 2.7rem;
  }

  .auth-venue {
    min-height: 16rem;
  }

  .auth-venue__copy p {
    margin-top: 0.8rem;
  }

  .auth-card {
    padding: 1.35rem;
  }

  .auth-card h2 {
    font-size: clamp(2.15rem, 13vw, 3.2rem);
  }
}

@media (max-width: 899px) {
  .console-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-rail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem 1.2rem;
    align-items: center;
    padding: 0.9rem 1rem;
  }

  .rail-brand {
    padding: 0;
    border: 0;
  }

  .rail-brand__mark {
    width: 2.35rem;
    height: 2.35rem;
  }

  .rail-brand div span,
  .venue-signal h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .console-nav {
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    padding: 0;
  }

  .console-nav a {
    padding: 0.55rem 0.65rem;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }

  .console-nav a[aria-current="page"] {
    border-bottom-color: var(--signal-cyan);
  }

  .venue-signal {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 0.55rem;
    border-top: 1px solid var(--legacy-feature-border);
  }

  .venue-signal__line {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0;
  }

  .venue-signal__line::before {
    top: 0.46rem;
    right: calc(25% - 0.1rem);
    bottom: auto;
    left: calc(25% - 0.1rem);
    width: auto;
    height: 1px;
  }

  .service-node {
    justify-self: center;
  }

  .rail-logout {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    padding: 0;
  }

  .rail-logout button {
    width: auto;
  }

  .workspace {
    padding: 1.3rem 1rem 2rem;
  }

  .console-nav {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .identity-intake__grid,
  .identity-intake__grid--three {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-grid--payment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .identity-facts {
    grid-template-columns: repeat(3, minmax(7rem, 1fr));
    row-gap: 0.8rem;
  }

  .assignment-row {
    grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr) auto;
  }

  .assignment-row button {
    grid-row: 2;
  }
}

@media (max-width: 680px) {
  .control-rail {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .console-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .venue-signal {
    grid-row: 3;
  }

  .workspace-header,
  .panel-heading {
    display: grid;
    align-items: start;
  }

  .workspace-header__status,
  .panel-heading > p {
    text-align: left;
  }

  .readiness-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .readiness-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .readiness-card > strong {
    grid-column: 2;
    text-align: left;
  }

  .setting-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .setting-row__control {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .setting-row__identity,
  .setting-row__status {
    grid-column: 1 / -1;
  }

  .setting-row > .setting-row__savebar {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .log-picker {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .identity-guard {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .ownership-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .ownership-rail i {
    width: 1px;
    height: 1rem;
    margin-left: 0.45rem;
  }

  .inventory-tools,
  .pool-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .inventory-tools p {
    justify-self: start;
  }

  .identity-card__header,
  .pool-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .state-stack {
    justify-content: flex-start;
  }

  .identity-facts {
    grid-template-columns: repeat(2, minmax(7rem, 1fr));
  }

  .identity-card__actions,
  .assignment-list,
  .identity-facts,
  .identity-card__header {
    padding-left: 0;
  }

  .identity-card {
    background: var(--paper);
  }

  .assignment-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .assignment-row button {
    grid-row: auto;
  }

  .lifecycle-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .field-grid,
  .field-grid--payment,
  .identity-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-control--wide {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .event-gate-banner,
  .event-card__grid,
  .event-card__grid--map {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-gate-banner .gate-locks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-card__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-card__actions details[open] {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .event-gate-banner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .event-card__header,
  .event-card__grid,
  .restock-readout,
  .event-card__actions {
    padding-left: 0;
  }

  .event-card__header {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-signal-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-signal-strip li {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .event-signal-strip li:first-child {
    border-top: 0;
  }

  .event-signal-strip li::after {
    content: none;
  }

  .event-facts,
  .queue-progress-list,
  .catalog-counts,
  .event-control-group {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-facts > div,
  .queue-progress-list > div,
  .catalog-counts > div {
    border-right: 1px solid var(--event-grid);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================================================
   WHALERESTOCKS CONSOLE PARITY
   Shared density and hierarchy for every operator-facing tab.  Page-specific legacy
   selectors remain above for compatibility; these final rules are the visual contract.

   These rules used to be a DENSER variant of the reference rather than a copy of it --
   panels flat instead of lifted, 14px panel bodies against WhaleRestocks' 18px, a 24px
   page title against its 27px -- layered on top of a base that already matched the
   reference exactly.  Each value below is now the one WhaleRestocks actually renders, so
   the base and this block agree instead of fighting.
   ========================================================================================= */
.content {
  max-width: 1480px;
  padding: 26px 22px 60px;
}

.page-head {
  align-items: flex-end;
  max-width: none;
  margin: 0 0 22px;
}

.page-head p { margin-top: 7px; font-size: 13.5px; }
.page-head__r {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.page-head > .fleet__services { justify-content: flex-end; }

.panel { margin-bottom: var(--gap); }
.stack > .panel { margin-bottom: 0; }
/* WhaleRestocks has no base h2 rule to inherit from here, so its global
   `h2 { font-size: 16px; font-weight: 700; letter-spacing: -.1px }` is stated. */
.panel__head h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.1px; }
.panel__body.flush { padding: 0; }
details.panel > summary.panel__head { cursor: pointer; list-style: none; }
details.panel > summary.panel__head::-webkit-details-marker { display: none; }

.table-shell > table th,
table.data th { padding: 11px 14px; font-size: 10px; }
.table-shell > table td,
table.data td { padding: 11px 14px; }
.table-shell > table td .row,
table.data td .row { justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.right { text-align: right; }

.field-control { gap: 4px; font-size: 11px; }
.field-control input,
.field-control select,
.lifecycle-form select,
.inventory-tools select,
.assignment-row input {
  min-height: 36px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  font-size: 12.5px;
}
.field-control textarea { min-height: 92px; }
.field-grid { gap: 9px; }

.btn[data-management-open],
.btn[data-management-edit],
.btn[data-management-confirm] {
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
}
.btn.primary[data-management-open],
.btn.primary[data-management-confirm] {
  border-color: transparent;
  background: var(--primary-action-bg);
  color: var(--primary-action-ink);
}
.btn.ghost[data-management-edit] { background: transparent; }
.btn.danger[data-management-remove],
.danger-button { border-color: var(--coral-glow); background: transparent; color: var(--coral); }

.identity-workspace .banner { margin-bottom: 14px; }
.identity-workspace .identity-form { max-width: none; }
.identity-workspace .panel__head .row { gap: 7px; flex-wrap: wrap; }
.identity-workspace .inline-form { gap: 5px; flex-wrap: nowrap; }
.identity-workspace .inline-form select { width: auto; min-width: 104px; }
.proxy-intake-grid { display: block; }
.proxy-intake-grid .identity-form { width: 100%; }
.field-grid--payment { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.assignment-list { gap: 6px; margin: 8px 0 0; }
.assignment-row {
  grid-template-columns: minmax(7rem, 1fr) minmax(8rem, .7fr) auto auto auto;
  gap: 6px;
  padding: 7px;
  border-radius: var(--radius-sm);
}

/* Events: the same three fixed bands used by WhaleRestocks event cards. */
.events-workspace { display: flex; flex-direction: column; gap: 12px; }
.events-workspace > * { margin: 0; }
.event-boundary-banner { display: block; padding: 8px 12px; font-size: 12px; line-height: 1.5; }
.management-toolbar { border-top: 1px solid var(--line); }
.event-inventory { overflow: hidden; }
.inventory-tools {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.inventory-tools label { display: flex; gap: 6px; align-items: center; font-size: 10px; }
.inventory-tools select { width: auto; min-width: 126px; }
.inventory-tools p { margin: 0 0 0 auto; font-size: 11px; }
.ev-main { flex: 1 1 auto; min-width: 0; }

.event-stock {
  display: grid;
  flex: 0 0 72px;
  place-items: center;
  min-height: 48px;
  padding: 4px 8px;
  border: 1px solid var(--sonar-glow);
  border-radius: var(--radius-sm);
  background: var(--sonar-dim);
  color: var(--sonar-deep);
  text-align: center;
}
.event-stock[data-state="checking"] { border-color: var(--line); background: var(--surface-2); color: var(--ink-faint); }
.event-stock[data-state="stale"] { border-color: var(--amber-glow); background: var(--amber-dim); color: var(--amber); }
.event-stock__count { font-family: var(--f-mono); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.event-stock__label { margin-top: 2px; font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .65px; line-height: 1; text-transform: uppercase; }
.evc__drawer {
  width: 100%;
  max-height: 520px;
  margin-top: 7px;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.evc__drawer .event-signal-strip { margin: 0 0 8px; }
.evc__drawer .event-signal-strip li { padding: 5px 6px; }
.evc__drawer .event-card__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
}
.evc__drawer .event-readout,
.evc__drawer .queue-readout,
.evc__drawer .venue-map-panel,
.evc__drawer .catalog-panel,
.evc__drawer .restock-readout { padding: 8px; }
.evc__drawer .event-facts,
.evc__drawer .queue-progress-list,
.evc__drawer .catalog-counts { margin-top: 6px; }
.evc__drawer .restock-readout { margin: 8px 0 0; }
.evc__drawer .venue-map { min-height: 10rem; }

/* Secondary pages: compact details, settings save bars, and dashboard ledgers. */
.record-details,
.cart-details { min-width: 0; }
.record-details > summary,
.cart-details > summary { color: var(--accent-deep); cursor: pointer; font-size: 11px; white-space: nowrap; }
.record-details .detail-list,
.cart-details .detail-list { gap: 4px; margin-top: 7px; }
.record-details .detail-list > div,
.cart-details .detail-list > div { grid-template-columns: minmax(6rem, .38fr) minmax(0, 1fr); padding: 5px 7px; font-size: 11px; }
.savebar,
.setting-row__savebar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}
.dashboard-service-strip { gap: 7px; flex-wrap: wrap; }
.dashboard-ledgers { gap: 10px; }
.dashboard-ledgers > section { min-width: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.dashboard-ledgers > section > .panel__head { padding: 9px 10px; }
.dashboard-ledgers .activity-list { gap: 0; }
.dashboard-ledgers .activity-list > li { border-width: 1px 0 0; border-radius: 0; background: transparent; }
.explorer-section { margin-bottom: 14px; }
.cart-safety-strip { gap: 8px; flex-wrap: wrap; }
.stat.slim { padding: 10px 13px 9px; }
.stat.slim .stat__value { margin-top: 5px; font-size: 18px; letter-spacing: -.3px; }
.stat.slim .stat__sub {
  margin-top: 3px;
  overflow: hidden;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 880px) {
  .content { padding: 16px max(12px, env(safe-area-inset-left)) calc(54px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right)); }
  .page-head > .fleet__services,
  .page-head__r { justify-content: flex-start; }
  .field-grid--payment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-tools { align-items: stretch; flex-wrap: wrap; }
  .inventory-tools p { margin-left: 0; }
  .ev-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); padding: 8px; }
  .identity-workspace .inline-form { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .page-head > .fleet__services { width: 100%; }
  .page-head > .fleet__services .btn { flex: 1 1 auto; }
  .field-grid,
  .field-grid--payment { grid-template-columns: minmax(0, 1fr); }
  .field-control--wide { grid-column: auto; }
  .ev-grid { grid-template-columns: minmax(0, 1fr); }
  .event-card__header.evc__top { align-items: flex-start; }
  .event-stock { flex-basis: 64px; }
  .evc__ctl { align-items: flex-start; flex-direction: column; }
  .evc__ctl .state-stack { width: 100%; }
  .evc__ctl .event-control-group { width: 100%; }
  .evc__ctl .event-control-group form { flex: 1 1 0; }
  .evc__ctl .toggle { width: 100%; }
  .evc__drawer .event-card__grid { grid-template-columns: minmax(0, 1fr); }
  .event-signal-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-signal-strip li { border: 1px solid var(--line-soft); }
  .assignment-row { grid-template-columns: minmax(0, 1fr); }
}

/* Sign-in gate — the WhaleRestocks "harbor ledger" login, reproduced faithfully:
   a single card centered on the plain page floor, no venue split, no radial wash. */
.auth-entry.auth-gate {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--abyss);
}

/* Centered brand + card, capped narrow like the reference gate. */
.gate__card { width: 100%; max-width: 380px; }
.gate__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  text-align: center;
}
.gate__mark { width: 58px; height: 58px; color: var(--accent); stroke-width: 1.4; }
.gate__brand h1 { margin: 0; font-size: 22px; }
.gate__brand small {
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.gate .panel__body { padding: 24px; }
.gate .err {
  margin-bottom: 14px;
  color: var(--coral);
  font-size: 13px;
  text-align: center;
}
.gate__submit { width: 100%; }
.gate__ver { margin-top: 16px; text-align: center; }

.auth-gate .auth-card {
  width: min(100%, 30rem);
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 4px);
  background: var(--surface);
}

.auth-gate .auth-card::after { display: none; }

.auth-gate .auth-brand {
  gap: 0.75rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.auth-gate .auth-brand__mark {
  width: 2.7rem;
  height: 2.7rem;
  padding: 0.4rem;
  border: 0;
  border-radius: 10px;
  background: var(--accent-dim);
  color: var(--accent);
}

.auth-gate .auth-brand__mark svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-gate .auth-brand strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.auth-gate .auth-brand div span {
  color: var(--ink-dim);
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.auth-card__heading { margin-top: 1.75rem; }

.auth-card__heading h1 {
  margin: 0.45rem 0 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 680;
  letter-spacing: -0.04em;
  line-height: 1;
}

.auth-card__footer {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-card__footer span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--sonar);
  box-shadow: 0 0 0 3px var(--sonar-dim);
}

.auth-card__footer p { margin: 0; }

.content-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.content-toolbar label {
  display: grid;
  gap: 4px;
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.record-count,
[data-record-filter-count] {
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 11px;
}

.activity-grid,
.explorer-grid,
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.activity-list,
.detail-list,
.catalog-grid {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-list > li,
.detail-list > div,
.catalog-grid > * {
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.detail-list > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.42fr) minmax(0, 1fr);
  gap: 0.7rem;
}

.detail-list dt { color: var(--ink-dim); font-size: 0.72rem; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }

.explorer-map {
  display: block;
  width: 100%;
  max-height: 34rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.explorer-map polygon {
  fill: var(--accent-dim);
  stroke: var(--accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.explorer-map polygon:hover { fill: var(--accent-glow); }

.settings-intro { margin-bottom: var(--gap); }
.settings-group { min-width: 0; }
.settings-group[data-setting-group="solver-credentials"] { grid-column: 1 / -1; }
.settings-grid .setting-row { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.settings-grid .setting-row button { justify-self: start; }
.setting-row__identity p { margin: 0.3rem 0 0; color: var(--ink-dim); font-size: 0.75rem; }

.log-console {
  min-height: 17rem;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.muted-value { color: var(--ink-dim); }
.current-label-caveat { color: var(--ink-dim); }

[data-record-filter-empty] { margin-top: 1rem; }

.cart-gates form {
  display: grid;
  gap: 0.4rem;
}

.control-reason {
  max-width: 18rem;
  color: var(--ink-faint);
  font-size: 0.68rem;
  line-height: 1.35;
}

@media (max-width: 880px) {
  .activity-grid,
  .explorer-grid,
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-group[data-setting-group="solver-credentials"] { grid-column: auto; }
  .content-toolbar > .field { width: 100%; }
  .content-toolbar { align-items: stretch; }
  .log-picker { grid-template-columns: minmax(0, 1fr); }
  .log-picker button { width: 100%; }
}

/* Harbor-ledger shell polish and responsive behavior. Kept last so the shared shell wins over
   older page-local responsive rules while those pages are migrated independently. */
.rail-scrim {
  position: fixed;
  z-index: 55;
  inset: 0;
  border: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.rail-scrim.show { opacity: 1; }

.toasts {
  position: fixed;
  z-index: 80;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* The reference caps at 360px; the viewport clamp additionally keeps a toast
     on screen on a narrow phone, which is strictly the same at every width the
     cap alone would have handled. */
  width: min(360px, calc(100vw - 36px));
}

.console-toast {
  position: static;
  max-width: none;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--sonar);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.console-toast.is-fault { border-left-color: var(--coral); }
.console-toast.is-attention { border-left-color: var(--amber); }

dialog,
.modal {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }

/* Management-first resource controls. These selectors stay scoped to the Task 6 surfaces. */
.management-toolbar {
  border-top: 4px solid var(--ink);
}

.management-toolbar .panel-heading {
  align-items: center;
}

.management-toolbar__actions,
.management-toolbar__secondary,
.pool-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.management-toolbar__secondary {
  justify-content: space-between;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.management-toolbar__secondary > p {
  flex: 1 1 20rem;
  margin: 0;
  color: var(--muted-ink);
  line-height: 1.5;
}

.management-toolbar__secondary .identity-form--compact {
  flex: 1 1 22rem;
}

.management-toolbar__secondary.proxy-intake-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.75fr);
  gap: 1rem;
  align-items: start;
}

.proxy-intake-grid > p {
  grid-column: 1 / -1;
}

.proxy-intake-grid .identity-form--compact {
  width: 100%;
}

@media (max-width: 1100px) {
  .management-toolbar__secondary.proxy-intake-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .proxy-intake-grid > p {
    grid-column: 1;
  }
}

[data-management-open],
[data-management-edit],
[data-management-confirm],
[data-management-remove],
.danger-button {
  min-height: 2.55rem;
  padding: 0.52rem 0.85rem;
  border: 1px solid var(--legacy-action-bg);
  border-radius: 0;
  background: var(--legacy-action-bg);
  color: var(--legacy-action-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
}

[data-management-open]:hover,
[data-management-edit]:hover,
[data-management-confirm]:hover {
  border-color: var(--legacy-action-hover);
  background: var(--legacy-action-hover);
}

[data-management-open]:disabled,
[data-management-edit]:disabled,
[data-management-remove]:disabled,
[data-management-confirm]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

[data-management-remove],
.danger-button,
.management-dialog--danger [data-management-confirm] {
  border-color: var(--fault-coral);
  background: transparent;
  color: var(--fault-coral);
}

[data-management-remove]:hover,
.danger-button:hover,
.management-dialog--danger [data-management-confirm]:hover {
  border-color: var(--fault-coral);
  background: var(--coral-dim);
  color: var(--fault-coral);
}

.pool-card__actions {
  justify-content: flex-end;
}

.pool-card__actions .lifecycle-form {
  min-width: min(100%, 19rem);
}

.management-dialog {
  position: relative;
  width: min(44rem, calc(100vw - 2rem));
  max-width: none;
  max-height: min(88dvh, 54rem);
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.management-dialog--wide {
  width: min(72rem, calc(100vw - 2rem));
}

.management-dialog__dismiss {
  position: sticky;
  z-index: 3;
  top: 0.65rem;
  display: flex;
  height: 0;
  justify-content: flex-end;
  margin: 0 0.65rem 0 auto;
}

.management-dialog__dismiss button {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font-size: 0;
}

.management-dialog__dismiss button::before {
  content: "\00d7";
  font-size: 1.35rem;
  line-height: 1;
}

.management-dialog__header {
  padding: 1.25rem 4rem 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.management-dialog__header h2 {
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
}

.management-dialog__header p {
  max-width: 62rem;
  margin: 0.5rem 0 0;
  color: var(--muted-ink);
  line-height: 1.5;
}

.management-dialog__form,
.management-dialog__sections {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

.management-dialog__form.identity-form {
  border: 0;
  background: var(--surface);
}

.management-dialog__sections > section {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.management-dialog__sections h3 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
}

.management-dialog__sections form {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.management-dialog__sections form[aria-busy="true"] {
  outline: 2px solid var(--attention-amber);
  outline-offset: 0.35rem;
}

.management-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
  padding-top: 0.25rem;
}

.management-dialog__error {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-left: 3px solid var(--fault-coral);
  background: var(--coral-dim);
  color: var(--ink);
  line-height: 1.45;
}

.management-dialog__error[hidden] {
  display: none;
}

@media (max-width: 880px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  .rail {
    position: fixed;
    z-index: 60;
    top: 0;
    left: 0;
    width: min(86vw, var(--rail-w));
    height: 100dvh;
    padding-top: env(safe-area-inset-top);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }

  .rail.open { visibility: visible; transform: translateX(0); transition-delay: 0s; }
  body.is-rail-open { overflow: hidden; }
  .rail__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: auto;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-dim);
    cursor: pointer;
  }
  .rail__close:hover { background: var(--surface-2); color: var(--ink); }
  .rail-toggle { display: inline-flex; }
  .fleet { padding: 9px 14px; }
  .content { max-width: none; padding: 20px 14px calc(50px + env(safe-area-inset-bottom)); }

  .management-toolbar__secondary,
  .pool-card,
  .pool-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .pool-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .pool-card__actions > *,
  .management-toolbar [data-management-open] {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .fleet { gap: 5px; }
  .fleet__title,
  .fleet__clock { display: none; }
  .fleet__services { flex: 1; min-width: 0; }
  .fleet__services .chip { min-width: 0; padding-inline: 8px; }
  .service-node__copy { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-head { display: grid; gap: 5px; align-items: start; }
  .page-head p { text-align: left; }
  .console-panel { padding: 16px; }

  .table-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data:not(.no-cards),
  .table-shell > table:not(.no-cards),
  table.data:not(.no-cards) tbody,
  .table-shell > table:not(.no-cards) tbody {
    display: block;
    width: 100%;
  }

  table.data:not(.no-cards) thead,
  .table-shell > table:not(.no-cards) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  table.data:not(.no-cards) tbody tr,
  .table-shell > table:not(.no-cards) tbody tr {
    display: grid;
    gap: 0;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }

  table.data:not(.no-cards) tbody tr:last-child,
  .table-shell > table:not(.no-cards) tbody tr:last-child { margin-bottom: 0; }

  table.data:not(.no-cards) td,
  .table-shell > table:not(.no-cards) td {
    display: grid;
    grid-template-columns: minmax(88px, 0.38fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 9px 11px;
    border-bottom: 1px solid var(--line-soft);
    overflow-wrap: anywhere;
  }

  table.data:not(.no-cards) td::before {
    content: attr(data-label);
  }

  .table-shell > table:not(.no-cards) td::before {
    content: attr(data-label);
  }

  table.data:not(.no-cards) td::before,
  .table-shell > table:not(.no-cards) td::before {
    color: var(--ink-faint);
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  table.data:not(.no-cards) td:last-child,
  .table-shell > table:not(.no-cards) td:last-child { border-bottom: 0; }

  dialog[open],
  .modal {
    width: 100%;
    max-width: none;
    max-height: 88dvh;
    margin: auto 0 0;
    border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .management-dialog,
  .management-dialog--wide {
    width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .management-dialog__header {
    padding-inline: 1rem 3.75rem;
  }

  .management-dialog__form,
  .management-dialog__sections {
    padding: 1rem;
  }

  .management-dialog__actions {
    position: sticky;
    z-index: 2;
    bottom: 0;
    flex-direction: column-reverse;
    padding: 0.8rem 0 calc(0.8rem + env(safe-area-inset-bottom));
    background: var(--surface);
  }

  .management-dialog__actions > button {
    width: 100%;
  }

  .toasts {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
  }
}

.fleet {
  padding-top: max(9px, env(safe-area-inset-top));
  padding-right: max(22px, env(safe-area-inset-right));
  padding-left: max(22px, env(safe-area-inset-left));
}
.rail { padding-top: env(safe-area-inset-top); }
.rail-scrim { pointer-events: none; backdrop-filter: blur(2px); }
.rail-scrim.show { pointer-events: auto; }

@media (max-width: 1100px) {
  .grid.cols-4,
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  html,
  body { max-width: 100%; overflow-x: clip; }
  .main { max-width: 100%; overflow-x: clip; }
  .content { padding: 18px max(14px, env(safe-area-inset-left)) calc(60px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right)); }

  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="email"],
  select,
  textarea { padding: 11px 13px; font-size: 16px; }

  .btn { min-height: 44px; padding: 10px 16px; }
  .btn.sm { min-height: 40px; }
  .icon-btn { align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
  .toggle { min-height: 34px; padding: 6px 12px; }
  input[type="checkbox"],
  input[type="radio"] { width: 20px; height: 20px; }

  .fleet { gap: 8px; flex-wrap: wrap; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; }
  .fleet__title { margin-right: auto; }
  .fleet__clock { display: none; }
  .fleet__services { order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .fleet__services::-webkit-scrollbar { display: none; }
  .fleet__services .chip { flex: none; }

  .page-head { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 18px; }
  .page-head p { text-align: left; }
  .panel__head { flex-direction: column; align-items: stretch; gap: 10px; }

  .rail { padding-bottom: env(safe-area-inset-bottom); background: var(--surface); box-shadow: 0 0 40px -8px rgba(16, 24, 40, 0.40); }
  .rail__brand { padding: 14px 14px 13px; }
  .rail__close { width: 40px; height: 40px; padding: 0; border-radius: 999px; }
  .rail__nav { gap: 2px; padding: 6px 10px 18px; }
  .navgroup__label { margin: 15px 0 6px; font-size: 9.5px; }
  .navlink { min-height: 44px; padding: 11px 12px; border-radius: 9px; font-size: 15px; }
  .navlink svg { width: 19px; height: 19px; }
  .navlink.is-active::before { left: -10px; height: 22px; }
  .rail__foot { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .rail__out { min-height: 40px; font-size: 13.5px; }
}

@media (max-width: 720px) {
  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4,
  .grid.cols-5 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  table.data:not(.no-cards),
  .table-shell > table:not(.no-cards) { font-size: 14px; }
  table.data:not(.no-cards) tbody tr,
  .table-shell > table:not(.no-cards) tbody tr { display: block; padding: 2px 0; border-radius: var(--radius); box-shadow: var(--shadow); }
  table.data:not(.no-cards) td,
  .table-shell > table:not(.no-cards) td {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 9px 14px;
    text-align: right;
    white-space: normal;
  }
  table.data:not(.no-cards) td::before,
  .table-shell > table:not(.no-cards) td::before { flex: none; font-size: 9.5px; font-weight: 500; text-align: left; }
  table.data:not(.no-cards) td[data-label=""]::before,
  table.data:not(.no-cards) td:not([data-label])::before,
  .table-shell > table:not(.no-cards) td[data-label=""]::before,
  .table-shell > table:not(.no-cards) td:not([data-label])::before { content: none; }

  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal,
  .modal.wide { width: 100%; max-width: 100%; max-height: 92dvh; border-bottom: 0; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .modal__head { position: sticky; z-index: 2; top: 0; padding: 16px 18px; border-radius: 18px 18px 0 0; background: var(--surface); }
  .modal__body { padding: 16px 18px; }
  .modal__foot { position: sticky; bottom: 0; flex-direction: column-reverse; align-items: stretch; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: var(--surface); }
  .modal__foot .btn { width: 100%; }

  .statline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .panel__body { padding: 14px; }
  .toast { font-size: 14px; }
}

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

/* Final compact-console cascade: keep legacy management contracts without letting
   their older presentation inflate the WhaleRestocks-style operator surfaces. */
.management-toolbar {
  border-top: 1px solid var(--line);
}

[data-management-open],
[data-management-edit],
[data-management-confirm],
[data-management-remove],
.danger-button {
  min-height: 32px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}

.btn[data-management-open],
.btn[data-management-edit],
.btn[data-management-confirm] {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
}

.btn.primary[data-management-open],
.btn.primary[data-management-confirm] {
  border-color: transparent;
  background: var(--primary-action-bg);
  color: var(--primary-action-ink);
}

.btn.ghost[data-management-edit] {
  background: transparent;
}

.btn.danger[data-management-remove],
.danger-button,
.management-dialog--danger .btn[data-management-confirm] {
  border-color: var(--coral-glow);
  background: transparent;
  color: var(--coral);
}

/* Accounts: compact WhaleRestocks-style roster with row-local HTTP login state. */
.account-fleet { display: flex; flex-direction: column; gap: var(--gap); }
.account-login-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 10px; }
.account-login-banner > div:first-child { min-width: 0; }
.account-login-banner strong { margin-right: 5px; }
.account-login-capabilities { flex: none; gap: 5px; }
.account-roster__tools { gap: 7px; }
.account-table { table-layout: fixed; min-width: 980px; }
.account-table th:nth-child(1) { width: 22%; }
.account-table th:nth-child(2) { width: 12%; }
.account-table th:nth-child(3) { width: 19%; }
.account-table th:nth-child(4) { width: 7%; }
.account-table th:nth-child(5) { width: 15%; }
.account-table th:nth-child(6) { width: 25%; }
.account-table td { padding-top: 8px; padding-bottom: 8px; vertical-align: middle; }
.account-identity strong,
.account-identity > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity strong { font-size: 12.5px; }
.account-identity > span { margin-top: 2px; font-size: 10.5px; }
.account-session-meta { display: block; margin-top: 3px; color: var(--ink-faint); font-size: 10px; }
.account-last-activity time { display: block; color: var(--ink-dim); font-size: 11px; }
.login-status { display: inline-block; margin-top: 3px; cursor: pointer; }
.login-status:empty { display: none; }
.login-status .pill { font-size: 9px; letter-spacing: .035em; }
.account-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.account-lifecycle-form { display: inline-flex; flex-wrap: nowrap; gap: 4px; }
.account-lifecycle-form select { width: 88px; min-width: 88px; }
.account-import-panel { margin-top: 0; }
.account-login-modal .modal { max-width: 620px; }
.account-login-progress { display: flex; align-items: center; gap: 12px; min-height: 50px; }
.account-login-progress .spinner[hidden] { display: none; }
.account-login-progress p { margin: 3px 0 0; }
.account-login-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 16px 0; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--line-soft); }
.account-login-facts > span { padding: 9px 10px; background: var(--surface-2); color: var(--ink-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.account-login-facts b { display: block; margin-top: 3px; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.account-login-history { max-height: 210px; margin: 0; padding: 10px 10px 10px 34px; overflow: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-dim); font-size: 11px; }
.account-login-history:empty::before { content: "Waiting for the first durable stage…"; display: block; margin-left: -20px; color: var(--ink-faint); }
.account-create-rail { display: flex; min-height: 34px; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--line-soft); border-left: 3px solid var(--amber); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-dim); font-size: 11px; }
.account-create-rail.is-ready { border-left-color: var(--sonar); }
.account-create-rail__label { flex: none; color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: .055em; }
.account-create-rail > [data-creation-disabled-reason] { min-width: 0; flex: 1; }
.account-create-rail .pill { flex: none; }
.account-creation-table { table-layout: fixed; min-width: 760px; }
.account-creation-table th:nth-child(1) { width: 19%; }
.account-creation-table th:nth-child(2) { width: 22%; }
.account-creation-table th:nth-child(3),
.account-creation-table th:nth-child(4) { width: 11%; }
.account-creation-table th:nth-child(5) { width: 20%; }
.account-creation-table th:nth-child(6) { width: 17%; }
.account-creation-table td { padding-block: 7px; vertical-align: middle; }
.account-creation-id { position: relative; padding-left: 15px !important; }
.account-creation-id::before { position: absolute; top: 8px; bottom: 8px; left: 6px; width: 2px; border-radius: 4px; background: var(--amber); content: ""; }
[data-job-stage="created"] .account-creation-id::before { background: var(--sonar); }
[data-job-stage="failed"] .account-creation-id::before { background: var(--coral); }
[data-job-stage="cancelled"] .account-creation-id::before { background: var(--ink-faint); }
.account-creation-id strong,
.account-creation-id span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-creation-id span { margin-top: 2px; color: var(--ink-faint); font-size: 10px; }
.account-creation-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.account-creation-empty { border-top: 1px solid var(--line-soft); }
.account-create-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.account-create-fields .field-control--wide { grid-column: span 2; }
.account-create-generate { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-dim); font-size: 11px; cursor: pointer; }
.account-create-generate input { flex: none; margin-top: 2px; }
.account-create-generate strong,
.account-create-generate small { display: block; }
.account-create-generate strong { color: var(--ink); }
.account-create-generate small { margin-top: 2px; color: var(--ink-faint); line-height: 1.4; }
[data-account-create-password-field].is-disabled { opacity: .55; }
.account-creation-status-body { padding: 0 20px 18px; }
.generated-password-output { margin: 0 20px 18px; padding: 14px; border: 1px solid var(--sonar-glow); border-radius: var(--radius-sm); background: var(--sonar-dim); color: var(--sonar-deep); font-size: 14px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; user-select: all; }
.generated-password-output:empty::before { color: var(--ink-faint); content: "Waiting for the one-time password…"; font-weight: 400; }
.creation-reconcile-dialog .account-create-generate { margin: 0 20px 18px; border-color: var(--coral-glow); background: var(--coral-dim); }
.creation-reconcile-dialog [data-creation-reconcile-error] { margin-inline: 20px; }

@media (max-width: 760px) {
  .account-login-banner { align-items: flex-start; flex-direction: column; }
  .account-login-capabilities { width: 100%; overflow-x: auto; }
  .account-login-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-roster__tools { width: 100%; flex-wrap: wrap; }
  .account-roster__tools select { flex: 1 1 130px; }
  .account-create-rail { align-items: flex-start; flex-wrap: wrap; }
  .account-create-rail > [data-creation-disabled-reason] { flex-basis: calc(100% - 92px); }
  .account-create-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .account-create-fields { grid-template-columns: minmax(0, 1fr); }
  .account-create-fields .field-control--wide { grid-column: auto; }
}

/* Keep the mobile rail trigger out of the desktop fleet strip. This selector is deliberately
   more specific than the shared .btn display rule. */
.fleet > .rail-toggle { display: none; }

@media (max-width: 880px) {
  .fleet > .rail-toggle { display: inline-flex; }
}

/* Events ledger: the WhaleRestocks event table translated onto WhaleAXS's richer row
   contract. Desktop stays a fixed, scannable ledger; the same row becomes a compact card
   on phones without dropping the AXS stock, monitor, cart, or revision-fenced actions. */
.events-board { overflow: hidden; }

.panel__head.ev-head {
  display: block;
  padding: 13px 16px 11px;
}

.ev-head__r1,
.ev-head__r2 {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

/* Pushes everything after the title to the right without a space-between,
   which would also spread the controls apart from each other. */
.ev-head__r1 h2 { margin-right: auto; min-width: 0; }
.ev-head__r1 h2 .muted { font-size: 11px; font-weight: 400; }
.ev-head__r2 { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.event-source-note { color: var(--ink-faint); font-family: var(--f-mono); font-size: 10px; text-align: right; }

.ev-head .inventory-tools {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ev-head .inventory-tools label { display: flex; gap: 6px; align-items: center; margin: 0; }
.ev-head .inventory-tools select { width: auto; min-width: 132px; }

.evc__drawer { max-height: 520px; margin-top: 7px; }

@media (max-width: 880px) {
  .panel__head.ev-head { padding: 10px 12px; }
  .ev-head__r1 { flex-wrap: nowrap; }
  .ev-head__r2 { align-items: flex-start; flex-direction: column; }
  .ev-head .inventory-tools { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ev-head .inventory-tools::-webkit-scrollbar { display: none; }
  .ev-head .inventory-tools label { flex: none; }
  .event-source-note { text-align: left; }
}

@media (max-width: 640px) {
  .ev-head__r1 h2 { flex: 1 1 auto; font-size: 13px; white-space: nowrap; }
  .ev-head__ttl { display: none; }
  .ev-head__r1 .btn { flex: none; min-height: 36px; padding: 7px 11px; }
  .ev-head__r2 { margin-top: 7px; padding-top: 7px; }
  .ev-head .inventory-tools select { min-width: 126px; }
  .event-source-note { display: none; }

  /* Phone: the fixed lanes collapse to a stacked card. Driven by data-label on each cell,
     so it needs no second markup and cannot drift from the desktop row. */
  .ev-table, .ev-table tbody, .ev-table tr, .ev-table td { display: block; width: auto; }
  .ev-table colgroup { display: none; }
  .ev-table tr.event-card {
    margin-bottom: 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .ev-table td {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 11px;
    border-top: 1px solid var(--line-soft);
    text-align: left;
  }
  .ev-table td:first-child { border-top: 0; }
  .ev-table td::before {
    content: attr(data-label);
    flex: 0 0 74px;
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .ev-table td.ev-main::before { display: none; }
  .ev-act { display: flex; flex-wrap: wrap; }
  .evc__drawer-row > td { padding: 0; }
  .evc__drawer-row > td::before { display: none; }
  .evc__drawer { max-height: 62dvh; }
}

/* WhaleRestocks-parity cart holds and stored-card ledger. The commerce controls
   remain AXS-fenced; this layer only makes their dense operator state scannable. */
.cart-list {
  gap: 7px;
}

.cart-row--compact {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(230px, 0.72fr) minmax(108px, auto) minmax(118px, auto);
  align-items: center;
  min-width: 0;
  padding: 0;
  overflow: visible;
  border-radius: var(--radius-sm);
  line-height: 1.2;
}

.cart-row--compact > .cr-top {
  display: contents;
}

.cart-row--compact .cr-id {
  min-width: 0;
  padding: 10px 12px;
}

.cart-row--compact .cr-id h3 {
  margin: 2px 0;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-row--compact .cr-id p {
  overflow: hidden;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-row--compact .cr-facts {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 8px 12px;
  border-left: 1px solid var(--line-soft);
}

.cart-row--compact .ct-cell {
  display: grid;
  flex: none;
  gap: 2px;
  min-width: 42px;
}

.cart-row--compact .ct-cell small {
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.cart-row--compact .ct-cell strong {
  font-family: var(--f-mono);
  font-size: 11.5px;
  white-space: nowrap;
}

.ct-timer {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 27px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--deep);
  color: var(--ink-dim);
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ct-timer[data-tone="warning"] {
  border-color: var(--amber-glow);
  background: var(--amber-dim);
  color: var(--amber);
}

.ct-timer[data-tone="critical"] {
  border-color: var(--coral-glow);
  background: var(--coral-dim);
  color: var(--coral);
}

.ct-timer[data-tone="expired"],
.ct-timer[data-tone="unavailable"] {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--ink-faint);
}

.cart-row--compact > .cart-warning {
  grid-column: 1 / -1;
  padding: 7px 12px;
  border-top: 1px solid var(--amber-glow);
  border-bottom: 0;
  border-left: 3px solid var(--amber);
  font-size: 11px;
}

.cart-row--compact > .cart-details {
  min-width: 0;
  padding: 7px 10px;
  border-left: 1px solid var(--line-soft);
}

.cart-row--compact > .cart-details[open] {
  grid-column: 1 / -1;
  padding: 0;
  border-top: 1px solid var(--line);
  border-left: 0;
}

.cart-details__summary {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-dim);
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 9.5px;
  list-style: none;
  white-space: nowrap;
}

.cart-details__summary::-webkit-details-marker { display: none; }
.cart-details__summary::after { content: "+"; color: var(--accent); font-size: 13px; }
.cart-details[open] > .cart-details__summary { margin: 8px 10px 0 auto; width: fit-content; }
.cart-details[open] > .cart-details__summary::after { content: "\2212"; }

.cart-row--compact .cart-details__drawer {
  padding: 0;
}

.cart-row--compact .cart-card__grid {
  gap: 10px;
  padding: 10px 12px;
}

.cart-row--compact .cart-metrics {
  gap: 6px;
}

.cart-row--compact .cart-metrics div {
  padding: 7px 9px;
}

.cart-row--compact .cart-history {
  padding: 0 12px 10px;
  font-size: 11px;
}

.cart-row--compact .cart-action-note {
  margin: 0;
  padding: 0 12px 10px;
  color: var(--ink-faint);
  font-size: 10.5px;
}

.cart-row--compact > .cart-card__footer {
  grid-column: 1 / -1;
  gap: 7px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.cart-row--compact .cart-checkout-form,
.cart-row--compact .cart-account-form {
  gap: 7px;
  padding: 8px;
}

.cart-row--compact .cart-checkout-form {
  grid-template-columns: minmax(120px, 0.45fr) minmax(230px, 1.1fr) minmax(100px, 0.35fr) auto;
}

.cart-row--compact .cart-checkout-form select,
.cart-row--compact .cart-checkout-form input,
.cart-row--compact .cart-checkout-form button,
.cart-row--compact .cart-account-form button {
  min-height: 34px;
}

.card-brands-panel,
.cards-board {
  overflow: hidden;
}

.card-brands-panel__head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
}

.card-brands-panel__head h2 { margin-top: 2px; }

.card-brands-panel .card-network-key {
  grid-column: auto;
  padding-top: 0;
  border-top: 0;
}

.card-brands-grid {
  display: grid;
  grid-auto-columns: minmax(220px, 280px);
  grid-auto-flow: column;
  gap: 7px;
  padding: 8px;
  overflow-x: auto;
  border-top: 1px solid var(--line-soft);
  scrollbar-width: thin;
}

.card-brand-stat {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.card-brand-stat > header {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.card-brand-stat > header div { min-width: 0; }

.card-brand-stat > header strong,
.card-brand-stat > header small { display: block; }

.card-brand-stat > header strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-brand-stat > header small {
  margin-top: 2px;
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 8.5px;
  text-transform: uppercase;
}

.card-brand-stat > header > b {
  color: var(--accent-deep);
  font-family: var(--f-mono);
  font-size: 18px;
  line-height: 1;
}

.card-brand-stat dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin: 8px 0;
}

.card-brand-stat dl div {
  min-width: 0;
  padding: 5px;
  border-radius: 3px;
  background: var(--surface);
  text-align: center;
}

.card-brand-stat dt {
  overflow: hidden;
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 7.5px;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.card-brand-stat dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
}

.card-brand-stat > footer {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 8.5px;
  text-transform: uppercase;
}

.card-brands-empty {
  grid-column: 1;
  margin: 0;
  color: var(--ink-faint);
  font-size: 11px;
}

.cards-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 7px 14px;
  align-items: center;
  padding: 10px 12px;
}

.identity-workspace .cards-toolbar > .row {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.identity-workspace .cards-toolbar > .row select {
  width: auto;
  min-width: 138px;
}

.card-network-key {
  display: flex;
  grid-column: 1 / -1;
  gap: 5px;
  align-items: center;
  padding-top: 7px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.card-group-strip {
  display: flex;
  grid-column: 1 / -1;
  gap: 5px;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  scrollbar-width: thin;
  text-transform: uppercase;
  white-space: nowrap;
}

.card-group-chip {
  display: inline-flex;
  flex: none;
  gap: 6px;
  align-items: center;
  min-height: 25px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-dim);
  letter-spacing: normal;
  text-transform: none;
}

.card-group-chip strong { color: var(--ink); font-size: 10px; }
.card-group-chip small { color: var(--ink-faint); font-size: 9px; }

.card-network-mark {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink-dim);
  font-size: 9px;
  letter-spacing: 0.03em;
}

.card-network-mark[data-network="visa"] { color: var(--accent-deep); }
.card-network-mark[data-network="mastercard"] { color: var(--coral); }
.card-network-mark[data-network="amex"] { color: var(--sonar-deep); }
.card-network-mark[data-network="discover"] { color: var(--amber); }

.cards-ledger {
  table-layout: fixed;
  min-width: 1040px;
}

/* Widths sum to 100. A fixed-layout table that does not is wider or narrower than its
   wrapper and grows a horizontal scrollbar of its own. Sized against the real pool: the
   PAN and the security code must never ellipsize -- those are the values you copy. */
.cards-ledger__pick { width: 3%; }
.cards-ledger__number { width: 17%; }
.cards-ledger__brand { width: 10%; }
.cards-ledger__status { width: 11%; }
.cards-ledger__label { width: 11%; }
.cards-ledger__expiry { width: 8%; }
.cards-ledger__cvv { width: 5%; }
.cards-ledger__zip { width: 6%; }
.cards-ledger__linked { width: 12%; }
.cards-ledger__actions { width: 17%; }

.cards-ledger th,
.cards-ledger td {
  padding: 7px 10px;
}

.cards-ledger .pill { white-space: nowrap; }

/* The accent edge marks the card NUMBER, which is now the second cell -- the first holds
   the row's selection box. */
.cards-ledger td:nth-child(2) {
  border-left: 3px solid var(--accent-glow);
  white-space: nowrap;
}

.cards-ledger td[data-card-number-slot] strong {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cards-ledger td[data-label="Linked account"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-copy {
  margin-left: 6px;
  vertical-align: middle;
}

.card-copy .ico { width: 11px; height: 11px; }

/* ---- the Brands table --------------------------------------------------------------
   One row per selectable brand. The lead cell is a tick, because the only action the
   table offers is "collapse these into one name". */
.card-brands-table { table-layout: auto; }
.card-brands-table__pick { width: 34px; }
.card-brands-table th,
.card-brands-table td { padding: 7px 10px; }

/* ---- the filter bar ----------------------------------------------------------------
   The questions asked here are set-shaped ("which cards are still free", "which ones has
   AXS refused"), so chips are the primary control and the search box is the fallback. */
.cards-flt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}

.cards-flt__row {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}

.cards-flt__lbl {
  min-width: 52px;
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.flt-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }

.flt-chip {
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-dim);
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  user-select: none;
}

.flt-chip:hover { border-color: var(--accent); }
.flt-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.flt-chip.on {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent-deep);
}

.flt-chip .n { margin-left: 3px; color: var(--ink-faint); font-weight: 500; }
.flt-chip.is-empty { opacity: 0.55; }

.btn-mini {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-dim);
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11px;
}

.btn-mini:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- the selection bar -------------------------------------------------------------
   It acts on the rows you can SEE: every filter unticks what it hides, so a bulk action
   can never reach a card that scrolled out of view. */
.cards-bulk {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}

.cards-bulk[hidden] { display: none; }

.cards-bulk__actions { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.cards-toolbar__controls { gap: 8px; align-items: center; }

.cards-backup__row { gap: 8px; align-items: center; margin-bottom: 14px; }

.cards-backup__file { cursor: pointer; }

.cards-backup__paste {
  width: 100%;
  min-height: 110px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 12px;
  resize: vertical;
  white-space: pre;
}

.card-group-line {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 4px;
}

.card-group-name {
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent-deep);
  font-family: var(--f-mono);
  font-size: 8.5px;
  font-weight: 650;
}

.card-network-name {
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 8.5px;
  text-transform: uppercase;
}

.cards-ledger td:last-child .row {
  flex-wrap: nowrap;
}

.card-management-dialog {
  border-radius: var(--radius);
}

.card-management-dialog .management-dialog__header {
  padding-block: 14px 11px;
}

.card-management-dialog .management-dialog__form {
  gap: 10px;
  padding: 12px;
}

.card-management-dialog .card-dialog__cancel {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink-dim);
}

.card-management-dialog .card-dialog__cancel:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent-deep);
}

.card-form__section {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.card-form__section legend {
  padding: 0 6px;
  color: var(--ink-dim);
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-form__section .field-grid {
  gap: 8px;
}

.card-form__network-note,
.card-company-note {
  margin: 8px 0 0;
  color: var(--ink-faint);
  font-size: 10.5px;
}

.card-form__payment-grid .field-control--card-number-wide {
  grid-column: span 2;
}

@media (max-width: 880px) {
  .cart-row--compact {
    grid-template-columns: minmax(230px, 1fr) minmax(210px, auto) minmax(104px, auto);
  }

  .cart-row--compact > .cr-top > .state-stack {
    display: none;
  }

  .cart-row--compact > .cart-details { grid-column: 3; }
  .cart-row--compact > .cart-details[open] { grid-column: 1 / -1; }
  .cards-toolbar { grid-template-columns: minmax(0, 1fr); }
  .identity-workspace .cards-toolbar > .row { justify-content: flex-start; }
  .card-brands-panel__head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 640px) {
  .cart-row--compact {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    margin-bottom: 9px;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .cart-row--compact .cr-id,
  .cart-row--compact .cr-facts,
  .cart-row--compact > .cr-top > .state-stack,
  .cart-row--compact > .cart-details {
    grid-column: 1;
  }

  .cart-row--compact .cr-id { padding: 10px 11px 7px; }
  .cart-row--compact .cr-id h3 { font-size: 14px; }
  .cart-row--compact .cr-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 7px 10px;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .cart-row--compact .ct-timer { justify-content: center; min-width: 0; padding-inline: 5px; }
  .cart-row--compact > .cr-top > .state-stack {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 7px 10px;
    overflow-x: auto;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .cart-row--compact > .cart-details {
    padding: 7px 10px;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .cart-row--compact > .cart-details[open] { grid-column: 1; }
  .cart-details__summary { width: 100%; min-height: 38px; }
  .cart-details[open] > .cart-details__summary { width: auto; margin: 7px 10px 0; }
  .cart-row--compact .cart-card__grid { grid-template-columns: minmax(0, 1fr); }
  .cart-row--compact .cart-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-row--compact .cart-seats { min-width: 0; }
  .cart-row--compact .cart-checkout-form,
  .cart-row--compact .cart-account-form { grid-template-columns: minmax(0, 1fr); }
  .cart-row--compact > .cart-card__footer { align-items: stretch; }

  .cards-toolbar { padding: 10px; }
  .identity-workspace .cards-toolbar > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
  }
  .identity-workspace .cards-toolbar > .row select { width: 100%; min-width: 0; }
  .identity-workspace .cards-toolbar > .row .btn { grid-column: 1 / -1; justify-self: end; }
  .card-network-key { max-width: 100%; overflow-x: auto; white-space: nowrap; }
  .card-brands-grid { grid-auto-columns: minmax(218px, 82vw); }
  .cards-ledger { min-width: 0; }
  .cards-ledger tbody tr { display: grid; }
  table.data.cards-ledger tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }

  table.data.cards-ledger td {
    display: grid;
    grid-template-columns: minmax(74px, auto) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 38px;
    padding: 8px 10px;
    text-align: right;
  }

  table.data.cards-ledger td:first-child,
  table.data.cards-ledger td:nth-child(4),
  table.data.cards-ledger td:last-child {
    grid-column: 1 / -1;
  }

  table.data.cards-ledger td:first-child {
    display: block;
    border-left: 3px solid var(--accent);
    text-align: left;
  }

  table.data.cards-ledger td:first-child::before { display: block; margin-bottom: 3px; }
  table.data.cards-ledger td:nth-child(4) details { text-align: left; }
  table.data.cards-ledger td:last-child .row { justify-content: flex-end; flex-wrap: wrap; }
  table.data.cards-ledger td:last-child .inline-form { flex-wrap: wrap; }

  .card-management-dialog .management-dialog__form { padding: 10px; }
  .card-form__section { padding: 9px; }
  .card-form__section .field-grid,
  .card-form__payment-grid,
  .card-form__billing-grid { grid-template-columns: minmax(0, 1fr); }
  .card-form__payment-grid .field-control--card-number-wide,
  .card-form__section .field-control--wide { grid-column: auto; }
}

/* WhaleRestocks-parity identity and settings surfaces. The visual layer stays
   scoped; every mutation still uses the existing AXS revision-fenced forms. */

.account-table.account-ledger { min-width: 1120px; }
.account-table.account-ledger th:nth-child(1) { width: 17%; }
.account-table.account-ledger th:nth-child(2) { width: 21%; }
.account-table.account-ledger th:nth-child(3) { width: 10%; }
.account-table.account-ledger th:nth-child(4) { width: 20%; }
.account-table.account-ledger th:nth-child(5) { width: 6%; }
.account-table.account-ledger th:nth-child(6) { width: 12%; }
.account-table.account-ledger th:nth-child(7) { width: 14%; }
.account-table.account-ledger .credential-value,
.account-proxy-value {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  user-select: all;
}
.account-table.account-ledger .credential-value + br { display: none; }
.account-table.account-ledger .credential-value + .credential-value { margin-top: 3px; }
.account-proxy-value { margin-top: 3px; color: var(--ink-dim); font-size: 10px; }
.account-creation-activity > summary { cursor: pointer; list-style: none; }
.account-creation-activity > summary::-webkit-details-marker { display: none; }
.account-creation-activity > summary::after { color: var(--ink-faint); content: "+"; font-family: var(--f-mono); font-size: 18px; }
.account-creation-activity[open] > summary::after { content: "−"; }
.account-creation-toolbar { display: flex; justify-content: flex-end; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.account-batch-dialog { width: min(560px, 94vw); }
.account-batch-list { max-height: 320px; margin: 0; padding: 0; overflow: auto; list-style: none; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-2); }
.account-batch-list:empty::before { content: "Nothing has been queued in this session."; display: block; padding: 14px; color: var(--ink-faint); font-size: 12px; }
.account-batch-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); }
.account-batch-row:last-child { border-bottom: 0; }
.account-batch-address { min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
.account-batch-note { grid-column: 1 / -1; color: var(--ink-dim); font-size: 11px; }

.proxy-capacity-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(390px, .75fr);
  align-items: stretch;
}
.proxy-capacity-grid > .panel { min-width: 0; }
.proxy-paste-panel .panel__body { display: block; }
.proxy-paste-panel textarea[data-proxy-paste-input] { min-height: 300px; resize: vertical; }
.proxy-paste-panel .identity-form { display: grid; gap: 12px; }
.proxy-paste-panel .field-grid { grid-template-columns: minmax(220px, .55fr) minmax(0, 1fr); align-items: end; }
.proxy-pools-panel .table-wrap { max-height: 430px; overflow: auto; }
.proxy-pools-ledger,
.proxies-ledger { table-layout: auto; }
.proxies-ledger .credential-value { max-width: 340px; overflow-wrap: anywhere; user-select: all; }

.settings-workspace { padding-bottom: 18px; }
.settings-workspace > .stack { gap: 12px; }
.settings-intro { align-items: baseline; }
.settings-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.settings-field-grid > .setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.settings-field-grid > .setting-row[data-dirty="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.settings-field-grid .setting-row__identity { min-width: 0; }
.settings-field-grid .setting-row__identity label { font-size: 13px; }
.settings-field-grid .setting-row__identity code { overflow-wrap: anywhere; }
.settings-field-grid .setting-row__identity p { min-height: 2.8em; font-size: 11px; line-height: 1.4; }
.settings-field-grid .setting-row__control { grid-column: auto; grid-row: auto; }
.settings-field-grid .setting-row__control input,
.settings-field-grid .setting-row__control select { min-height: 38px; border-radius: var(--radius-sm); background: var(--surface); font-family: var(--f-mono); font-size: 12px; }
.setting-row__status { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; color: var(--ink-faint); font-family: var(--f-mono); font-size: 10px; }
.settings-field-grid .setting-row > .setting-row__savebar { grid-column: auto; width: 100%; min-width: 0; margin-top: auto; padding-top: 8px; flex-wrap: wrap; justify-content: space-between; }
.settings-field-grid .setting-row__savebar .btn-row { margin-left: auto; }
.settings-section-note { margin: 12px 0 0; }
.settings-section-note--top { margin: 0 0 12px; }
.settings-global-savebar {
  position: sticky;
  z-index: 12;
  bottom: 0;
  justify-content: space-between;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--hud-bg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.settings-global-savebar > .btn-row { margin-left: auto; }
.settings-global-savebar [data-settings-dirty-count] { color: var(--ink); }

@media (max-width: 1100px) {
  .proxy-capacity-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 880px) {
  .page-head__r { width: 100%; justify-content: flex-start; }
  .settings-field-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-global-savebar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  table.data.account-ledger,
  table.data.account-creation-table,
  table.data.proxy-pools-ledger,
  table.data.proxies-ledger { min-width: 0; }
  .account-row-actions,
  .account-creation-actions { width: 100%; flex-wrap: wrap; justify-content: flex-end; }
  .account-lifecycle-form { flex-wrap: wrap; justify-content: flex-end; }
  .account-table.account-ledger .credential-value,
  .account-proxy-value { text-align: right; }
  .proxy-paste-panel textarea[data-proxy-paste-input] { min-height: 250px; }
  .proxy-paste-panel .field-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-global-savebar { align-items: stretch; flex-direction: column; }
  .settings-global-savebar > .btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-left: 0; }
  .settings-global-savebar .btn { width: 100%; }
  .settings-field-grid .setting-row__identity p { min-height: 0; }
}

.content-toolbar.log-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, .3fr) auto;
  align-items: end;
}

.logs-panel__body { padding: 0; }
.log-console-shell {
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.logs-panel__body .log-picker {
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
}
.logs-panel__body .log-output {
  max-height: 34rem;
  margin: 0;
  padding: 12px 14px 12px 42px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Remaining read-only ledgers keep the same dense WhaleRestocks scan pattern
   without introducing actions that the AXS console cannot truthfully offer. */
.content-toolbar.log-picker > .field { min-width: 0; }

.order-rows {
  display: grid;
  gap: 7px;
}

.order-row.cart-row--compact {
  grid-template-columns: minmax(245px, .78fr) minmax(430px, 1.45fr) minmax(112px, auto) minmax(126px, auto);
}

.order-row .cr-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.order-row .order-fact { min-width: 0; }
.order-row .order-fact strong,
.order-row .order-fact > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-row .order-fact > span { color: var(--ink-faint); font-size: 9px; }
.order-row > .cr-bot { min-width: 0; }
.order-row > .cr-bot[open] { grid-column: 1 / -1; }
.order-row .order-details__drawer { padding: 12px; }
.order-row .order-detail-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.order-row .order-detail-list dd { overflow-wrap: anywhere; }

.restock-rows {
  display: grid;
  gap: 7px;
}

.restock-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(330px, .92fr) minmax(160px, .45fr) minmax(120px, auto);
  align-items: center;
  min-width: 0;
  margin-bottom: 0;
  padding: 0;
  overflow: visible;
  border-radius: var(--radius-sm);
  line-height: 1.2;
}

.restock-row > .rr-top { display: contents; }
.restock-row .rr-id { min-width: 0; padding: 10px 12px; }
.restock-row .rr-id h3 {
  margin: 2px 0;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.restock-row .rr-id p {
  overflow: hidden;
  color: var(--ink-dim);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.restock-row .rr-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  padding: 8px 12px;
  border-left: 1px solid var(--line-soft);
}
.restock-row .rr-cell,
.restock-row .rr-state { display: grid; gap: 3px; min-width: 0; }
.restock-row .rr-cell small,
.restock-row .rr-state small {
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.restock-row .rr-cell strong,
.restock-row .rr-state strong,
.restock-row .rr-cell code {
  overflow: hidden;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.restock-row .rr-state {
  padding: 8px 10px;
  border-left: 1px solid var(--line-soft);
}
.restock-row > .rr-bot {
  min-width: 0;
  padding: 8px 10px;
  border-left: 1px solid var(--line-soft);
}
.restock-row > .rr-bot > summary {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: space-between;
}
.restock-row > .rr-bot[open] { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); border-left: 0; }
.restock-details__drawer { padding: 10px 12px; }
.restock-detail-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.restock-detail-list dd { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .order-row.cart-row--compact {
    grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr) minmax(106px, auto) minmax(118px, auto);
  }
  .order-row .cr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .restock-row {
    grid-template-columns: minmax(220px, .9fr) minmax(290px, 1fr) minmax(140px, .45fr) minmax(112px, auto);
  }
  .restock-row .rr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .content-toolbar.log-picker { grid-template-columns: minmax(0, 1fr); }
  .order-row .order-detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .restock-row { grid-template-columns: minmax(220px, .8fr) minmax(260px, 1fr) minmax(112px, auto); }
  .restock-row .rr-state { display: none; }
  .restock-row > .rr-bot { grid-column: 3; }
  .restock-row > .rr-bot[open] { grid-column: 1 / -1; }
  .restock-detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .dashboard-stats .stat.slim { min-height: 0; padding: 10px; }
  .dashboard-stats .stat__value { margin-block: 3px; }
  .order-row .cr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-row .order-detail-list { grid-template-columns: minmax(0, 1fr); }
  .order-row > .cr-bot { grid-column: 1; }
  .logs-panel__body .log-picker { padding: 10px; }
  .logs-panel__body .log-output { min-height: 15rem; padding: 10px 10px 10px 36px; }
  .restock-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
  }
  .restock-row .rr-id,
  .restock-row .rr-facts,
  .restock-row .rr-state,
  .restock-row > .rr-bot { grid-column: 1; }
  .restock-row .rr-id { padding: 10px 11px 7px; }
  .restock-row .rr-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 7px 10px;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }
  .restock-row .rr-state {
    display: grid;
    padding: 7px 10px;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }
  .restock-row > .rr-bot {
    padding: 8px 10px;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }
  .restock-row > .rr-bot[open] { grid-column: 1; }
  .restock-detail-list { grid-template-columns: minmax(0, 1fr); }
}

[hidden] {
  display: none !important;
}

/* =========================================================================================
   WHALERESTOCKS PARITY — events rows + cart rows
   Ported verbatim from WhaleRestocks console.css and its carts.html <style> block. Every
   design token these rules reference (--sonar*, --coral*, --amber*, --ink*, --line*,
   --surface*, --accent*, --tide*, --f-mono, --f-display, --radius*) already existed here with
   the same name, so this is a straight copy rather than a translation.

   WhaleRestocks keeps the cart-row rules in an inline <style> block. They live here instead
   because this console CSP is `default-src 'self'` with no unsafe-inline, and the frontend
   tests assert that no template carries a style attribute or a <style> element.
   ========================================================================================= */

/* tiny inline controls used in data tables */
.inp-mini { width: 64px; padding: 4px 7px; font-size: 12px; }
.icon-btn { cursor: pointer; color: var(--ink-faint); background: none; border: 1px solid var(--line); border-radius: 5px; padding: 4px; display: inline-flex; }
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
.icon-btn:disabled { opacity: .42; cursor: not-allowed; }
.icon-btn:disabled:hover { color: var(--ink-faint); border-color: var(--line); background: none; }
.icon-btn.danger:hover { color: var(--coral); border-color: var(--coral-glow); }
.icon-btn.on { color: var(--sonar-deep); border-color: var(--sonar-dim); background: var(--sonar-dim); }
.icon-btn.spin { color: var(--accent); pointer-events: none; }
.icon-btn.spin svg { animation: spin .7s linear infinite; }

/* Gate glyphs. `.vs-tag` is the off state, `.on` the armed one; the login/queue variants hold a
   12px line-icon and the monitor variant holds the literal "M". */
.vs-tag { display: inline-flex; align-items: center; font-family: var(--f-mono); font-size: 9.5px;
  font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 5px;
  border: 1px solid var(--line-strong); color: var(--ink-faint); background: var(--surface);
  vertical-align: middle; cursor: default; }
.vs-tag.on { color: var(--sonar-deep); border-color: var(--sonar-dim); background: var(--sonar-dim);
             cursor: pointer; }
.vs-tag.on:hover { filter: brightness(.93); }
.vs-tag.login-tag { cursor: pointer; padding: 2px 5px; }
.vs-tag.login-tag .ico { width: 12px; height: 12px; }
.vs-tag.monitor-tag { cursor: pointer; padding: 2px 5px; min-width: 18px; justify-content: center; }
.vs-tag:disabled { opacity: .45; cursor: not-allowed; }

/* =========================================================================================
   EVENTS TABLE — fixed geometry
   table-layout:fixed + <colgroup> widths, so column x-positions are decided by the CSS and
   never by the content: no row can move another row controls. The title clamps to one line, so
   every name block is exactly two lines tall whatever the title length. The pill strip is
   nowrap and scrolls inside its own column instead of wrapping the row taller.
   ========================================================================================= */
.ev-table { table-layout: fixed; width: 100%; }
.ev-c-main  { width: auto; }
.ev-c-stock { width: 78px; }
.ev-c-qty   { width: 86px; }
.ev-c-flt   { width: 188px; }
.ev-c-gates { width: 136px; }
.ev-c-act   { width: 232px; }
.ev-table td { vertical-align: middle; }

/* name block — clamped lines, so row height never depends on the title */
.ev-main { min-width: 0; }
.ev-main .t-primary {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 550; line-height: 1.35; margin: 0; font-size: 13.5px;
}
.ev-title-link { display: block; text-decoration: none; color: inherit; }
.ev-title-link:hover { color: var(--accent); }
.ev-meta {
  font-size: 11px; line-height: 1.45; margin: 0; color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-meta__hi { color: var(--ink-dim); }

/* controls sized to their columns so they cannot spill */
.ev-qty .inp-mini, .ev-race .inp-mini { width: 100%; }

/* pill strip — one line, scrolls in place, never wraps the row taller */
.ev-flt { min-width: 0; }
.filt-cell {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: nowrap; overflow-x: auto; min-width: 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.filt-cell::-webkit-scrollbar { display: none; }
.filt-cell > * { flex: none; }
.ev-allsec { font-size: 11px; }

/* gates + actions — fixed lanes, so the glyphs are at the same x on every single row */
.ev-table td.ev-gates, .ev-table td.ev-act { padding-left: 8px; padding-right: 8px; }
.ev-gates { white-space: nowrap; }
.ev-gates > * { margin-right: 4px; vertical-align: middle; }
.ev-gates > *:last-child { margin-right: 0; }
.ev-act { white-space: nowrap; text-align: right; }
.ev-act > .icon-btn, .ev-act > form > .icon-btn {
  width: 28px; height: 28px; margin-left: 5px; padding: 4px;
  align-items: center; justify-content: center; vertical-align: middle;
}
.ev-act > form { display: inline-flex; margin-left: 5px; }
.ev-act > form > .icon-btn { margin-left: 0; }
.ev-act > .icon-btn:first-child { margin-left: 0; }

/* AXS-reported stock. WhaleRestocks has no equivalent cell; the operator asked for it kept.
   Sized to the fixed column so it cannot shift the row. */
.ev-stock { text-align: right; font-variant-numeric: tabular-nums; }
.ev-stock__count { display: block; font-family: var(--f-mono); font-size: 14px; font-weight: 700;
  line-height: 1.1; color: var(--sonar-deep); }
.ev-stock__label { display: block; font-family: var(--f-mono); font-size: 8.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.2; }
.ev-stock[data-state="stale"] .ev-stock__count { color: var(--amber); }
.ev-stock[data-state="checking"] .ev-stock__count { color: var(--ink-faint); }

/* live event countdown (events meta line) */
.countdown { font-family: var(--f-mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.countdown.soon   { color: var(--amber); }
.countdown.urgent { color: var(--coral); font-weight: 600; }

/* =========================================================================================
   CART ROWS — one cart per full-width row, tuned for density
   ========================================================================================= */
.cart-row { padding: 8px 13px; display: flex; flex-direction: column; gap: 5px; line-height: 1.2; }
.cart-row[hidden] { display: none; }
.cr-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cr-id { min-width: 0; flex: 1 1 220px; }
.cr-id h3 { margin: 0; font-size: 13.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-id .sub { margin-top: 1px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 10px; color: var(--ink-dim); }
.cr-facts { display: flex; gap: 14px; flex: none; align-items: center; }
.cr-status { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }

/* fact cells (Section/Row/Seats/Qty/$Tkt/Total) */
.ct-cell { min-width: 0; }
.ct-cell .k { font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); font-family: var(--f-mono); line-height: 1; }
.ct-cell .v { font-size: 12px; color: var(--ink); font-weight: 600; margin-top: 1px; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; line-height: 1.15; }
.ct-cell .v.mono { font-family: var(--f-mono); font-weight: 500; }

/* bottom control row: meta on the left, actions on the right */
.cr-bot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.cr-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; font-size: 11.5px; }
.cr-ttype { font-weight: 600; color: var(--ink); }
.cr-ttype .desc { font-weight: 400; color: var(--ink-dim); }
.cr-note { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-dim); min-width: 0; max-width: 340px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-note:empty { display: none; }

/* The live status line -- one updating sentence per hold, the way WhaleRestocks shows a
   checkout in flight. It sits in the meta lane and must never widen the row, so it
   ellipsises rather than wrapping. */
.cr-step { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 320px;
  font-size: 10.5px; font-weight: 600; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-step::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-faint); }
.cr-step[data-outcome="started"] { color: var(--accent); }
.cr-step[data-outcome="started"]::before { background: var(--accent); }
.cr-step[data-outcome="ok"]::before { background: var(--sonar); }
.cr-step[data-outcome="failed"] { color: var(--bad); }
.cr-step[data-outcome="failed"]::before { background: var(--bad); }

/* The checkout job's line: a spinner while the durable job runs, then a colour-coded
   verdict. WhaleRestocks paints the same two states on a row it is checking out
   (.co-live / .co-result), and this is that pair collapsed onto one element. It wraps
   rather than ellipsising -- a verdict that says do not re-submit must be readable whole. */
.co-checkout { display: inline-flex; align-items: baseline; gap: 6px; max-width: 420px;
  font-family: var(--f-body); font-size: 11.5px; font-weight: 600; line-height: 1.35;
  white-space: normal; overflow: visible; text-overflow: clip; }
.co-checkout[hidden] { display: none; }
.co-checkout[data-tone="live"] { color: var(--accent); }
.co-checkout[data-tone="good"] { color: var(--sonar-deep); }
.co-checkout[data-tone="bad"] { color: var(--coral); }
.co-checkout[data-tone="warn"] { color: var(--amber); }
.co-checkout[data-tone="info"] { color: var(--tide); }
.co-spin { flex: none; align-self: center; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: cospin .7s linear infinite; }
.co-checkout:not([data-tone="live"]) .co-spin { display: none; }
@keyframes cospin { to { transform: rotate(360deg); } }

/* The verdict on the row itself, not only in its meta lane: a hold that just ordered, and
   a hold nobody may touch again, both have to be findable in a page of a hundred rows. */
.cart-row[data-checkout-verdict="good"] { box-shadow: inset 3px 0 0 var(--sonar); }
.cart-row[data-checkout-verdict="bad"] { box-shadow: inset 3px 0 0 var(--coral); }
.cart-row[data-checkout-verdict="warn"] { box-shadow: inset 3px 0 0 var(--amber); }
.cart-row[data-checkout-verdict="info"] { box-shadow: inset 3px 0 0 var(--tide); }

/* The full ordered log in the drawer. Bounded height with its own scroll so a long flow
   cannot push the rest of the drawer off screen. */
.cart-flow { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.flow-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 2px; max-height: 260px; overflow-y: auto; }
.flow-steps:empty { display: none; }
.flow-step { display: flex; align-items: baseline; gap: 8px; padding: 3px 7px;
  border-left: 2px solid var(--line); font-size: 11px; }
.flow-step.is-started { border-left-color: var(--accent); }
.flow-step.is-ok { border-left-color: var(--sonar); }
.flow-step.is-failed { border-left-color: var(--bad); }
.flow-step.is-skipped { border-left-color: var(--ink-faint); }
.flow-phase { flex: none; width: 62px; font-family: var(--f-mono); font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.flow-step strong { font-weight: 500; color: var(--ink); min-width: 0; }
.flow-step.is-failed strong { color: var(--bad); }
.flow-empty { font-size: 11px; color: var(--ink-faint); margin: 0; }
.flow-empty[hidden] { display: none; }
.cr-actions { display: flex; align-items: center; gap: 7px; flex: none; margin-left: auto; flex-wrap: wrap; }
.cr-actset { display: contents; border: 0; padding: 0; margin: 0; min-width: 0; }
.cart-blocked { opacity: .72; }
.cart-blocked .cr-actset { opacity: .55; pointer-events: none; }

/* compact inline credential chips (email / password) */
.cr-cred { display: inline-flex; align-items: center; gap: 5px; background: var(--deep); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 2px 7px; min-width: 0; max-width: 220px; }
.cr-cred > .ico { color: var(--ink-faint); flex: none; width: 12px; height: 12px; }
.cr-cred .cv { font-family: var(--f-mono); font-size: 11px; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ct-timer { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 11.5px;
  font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--deep); color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-timer .ico { width: 12px; height: 12px; }
.ct-timer.good { color: var(--sonar-deep); border-color: var(--sonar-glow); background: var(--sonar-dim); }
.ct-timer.warn { color: var(--amber); border-color: var(--amber-glow); background: var(--amber-glow); }
.ct-timer.bad { color: var(--coral); border-color: var(--coral-glow); background: var(--coral-glow); animation: ctpulse 1s ease-in-out infinite; }
.ct-timer.expired { color: var(--ink-faint); }
@keyframes ctpulse { 50% { opacity: .55; } }

.ct-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-family: var(--f-mono);
  color: var(--tide); text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 2px 8px; background: var(--surface); transition: border-color .15s, background .15s; }
.ct-link:hover { border-color: var(--tide); background: var(--tide-glow); }
.ct-link .ico { width: 12px; height: 12px; }
.ct-link.muted { color: var(--ink-ghost); border-style: dashed; cursor: default; }
.ct-copy { flex: none; cursor: pointer; border: none; background: transparent; color: var(--ink-faint);
  padding: 1px; border-radius: 4px; display: inline-flex; }
.ct-copy:hover { color: var(--accent); background: var(--accent-dim); }
.ct-copy .ico { width: 12px; height: 12px; }
.cart-row .btn.sm { padding: 5px 11px; }
@media (max-width: 760px) { .cr-status { margin-left: 0; } .cr-actions { margin-left: 0; width: 100%; } }

/* --- event grouping: one collapsible block per event --- */
.event-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  overflow: hidden; margin-bottom: 10px; }
.event-group-header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer;
  user-select: none; background: var(--sonar-dim); border-bottom: 1px solid var(--line-soft); }
.event-group-header:hover { background: var(--sonar-glow); }
.egh-artist { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--sonar-deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.egh-meta { font-size: 12px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.egh-countdown { flex: none; }
.egh-countdown::before { content: "\00b7 "; }
.egh-countdown:empty { display: none; }
.egh-count { margin-left: auto; font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  color: var(--sonar-deep); background: var(--surface); border: 1px solid var(--sonar-glow);
  border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.egh-actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.egh-run { white-space: nowrap; }
.egh-run:disabled { cursor: not-allowed; }
@media (max-width: 760px) {
  .event-group-header { flex-wrap: wrap; }
  .egh-artist { max-width: 100%; }
  .egh-meta { min-width: 0; flex-shrink: 1; }
  .egh-count { margin-left: 0; }
  .egh-actions { margin-left: auto; }
}
.grp-chevron { color: var(--sonar-deep); transition: transform .2s; font-size: 11px; flex: none; }
.event-group.collapsed .grp-chevron { transform: rotate(-90deg); }
.event-group.collapsed .event-group-content,
.event-group.collapsed .event-filter-bar { display: none; }
.event-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.event-search { font-family: var(--f-body); font-size: 12px; padding: 5px 9px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); min-width: 170px; }
.event-search:focus { outline: none; border-color: var(--sonar); }
.price-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.price-chip { font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; background: var(--surface);
  cursor: pointer; user-select: none; transition: border-color .12s, background .12s, color .12s; }
.price-chip:hover { border-color: var(--sonar); }
.price-chip.on { background: var(--sonar-dim); border-color: var(--sonar); color: var(--sonar-deep); }
.price-chip .pc-count { color: var(--ink-faint); margin-left: 3px; font-weight: 500; }
.event-group-content { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; }
.filter-empty { font-size: 12px; color: var(--ink-faint); padding: 6px 2px; }

/* referenced by .icon-btn.spin above; WhaleRestocks defines it once globally */
@keyframes spin { to { transform: rotate(360deg); } }

/* Details drawer. The Events roster is a table, and a <details> element cannot live in a row
   group -- so the drawer is a second <tr> the Details icon-button unhides. */
.evc__drawer-row > td { padding: 0; background: var(--surface-2); border-top: 0; }
.evc__drawer { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.evc__drawer-row[hidden] { display: none; }

/* A base-email POOL is a list, so its control is a textarea. Monospace and nowrap so a long
   address is scanned rather than re-flowed mid-domain. */
.secret-pool { width: 100%; min-height: 84px; resize: vertical; white-space: pre;
  overflow-x: auto; font-size: 12px; line-height: 1.5; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink); }
.secret-pool:focus { outline: none; border-color: var(--sonar); background: var(--surface); }

/* --- Curate & filter: the section picker ------------------------------------------------
   Sections are picked, never typed. A typo in a free-text section filter narrows an event
   to nothing, and a narrowed event looks exactly like a sold-out one. */
.filter-editor .sec-picker { border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 10px 12px; margin-bottom: 12px; }
.sec-picker__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sec-picker__head .section-label { margin-right: auto; }
.sec-picker__views { display: inline-flex; gap: 4px; }
.sec-picker__views .btn.is-active { color: var(--sonar-deep); border-color: var(--sonar);
  background: var(--sonar-dim); }
.sec-picker__count { font-size: 11px; }
.sec-picker__body { display: flex; flex-direction: column; gap: 8px; }
.sec-picker__body[hidden] { display: none; }
.chips-edit { display: flex; flex-wrap: wrap; gap: 6px; max-height: 208px; overflow-y: auto;
  padding: 2px; }
.sec-chip { font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; background: var(--surface);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: border-color .12s, background .12s, color .12s; }
.sec-chip:hover { border-color: var(--sonar); color: var(--sonar-deep); }
.sec-chip.on { background: var(--sonar-dim); border-color: var(--sonar); color: var(--sonar-deep); }
.sec-chip.on::before { content: "\2713"; font-weight: 700; margin-right: 4px; }
.sec-chip[hidden] { display: none; }
[data-section-map] { position: relative; min-height: 220px; }
[data-section-map] .venue-map__section { cursor: pointer; }
[data-section-map] .venue-map__section.on { color: var(--sonar-deep);
  border-color: var(--sonar); background: var(--sonar-dim); }

/* The countdown carries its own leading separator and disappears when it has nothing to
   say, so a past event leaves no orphan " · " on the meta line. WhaleRestocks does the same
   with .egh-countdown. */
.ev-meta .countdown::before { content: " \00b7 "; color: var(--ink-faint); }
.ev-meta .countdown:empty { display: none; }

/* --- the row is a ROW ---------------------------------------------------------------------
   Each gate glyph and each runner control is its own revision-fenced <form>, and a form is
   block-level by default -- which stacked the three gates into a vertical column and pushed
   the action lane onto a second line under the row. Both lanes stay inline. */
.ev-gates > form { display: inline-flex; margin: 0 4px 0 0; padding: 0; border: 0; background: none; }
.ev-act > form { display: inline-flex; margin: 0; padding: 0; border: 0; background: none; }
.ev-gates > form:last-child { margin-right: 0; }
.ev-qty > form, .ev-race > form { display: block; margin: 0; padding: 0; border: 0; background: none; }

/* Density. WhaleRestocks fits a row in ~44px; ours was ~120px because the cells inherited
   card padding. */
.ev-table td { padding: 6px 10px; vertical-align: middle; }
.ev-table td.ev-main { padding-left: 12px; }
.ev-table tr.event-card { border-bottom: 1px solid var(--line-soft); }
.ev-table tr.event-card:hover { background: var(--surface-2); }
.ev-table .inp-mini { min-height: 26px; }
.ev-act > .icon-btn,
.ev-act > form > .icon-btn { width: 26px; height: 26px; margin-left: 4px; }
.ev-act > form { margin-left: 4px; }
.ev-act > form > .icon-btn { margin-left: 0; }
.ev-act > *:first-child { margin-left: 0; }

/* Stock reads as one compact figure in its lane, not a filled panel. */
.ev-stock { text-align: right; padding-right: 12px; }
.ev-stock__count { font-size: 13px; line-height: 1.15; }
.ev-stock__label { font-size: 8px; }


/* Warm pool -- six figures and a sentence. Counts only; nothing here is a secret. */
.account-pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.account-pool-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-2);
}
.account-pool-stat strong { font-size: 1.35rem; line-height: 1.1; }
.account-pool-stat small { color: var(--muted); font-size: 0.75rem; }
.account-pool-stat[data-state="short"] strong { color: var(--warn); }
.account-pool-stat[data-state="ready"] strong { color: var(--mint); }
.account-pool-note { margin: 0; color: var(--muted); font-size: 0.85rem; }
.account-pool-accounts { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.8rem; }
.account-sweep-form { display: inline; margin: 0; padding: 0; border: 0; background: none; }

.account-creation-reason {
  display: block;
  margin-top: 0.2rem;
  max-width: 34rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}