:root {
  --navy: #070b22;
  --navy-2: #242943;
  --bg: #f7f7f8;
  --panel: #ffffff;
  --line: #e4e7ec;
  --muted: #667085;
  --text: #111827;
  --blue: #1464f4;
  --blue-2: #0f55d8;
  --green: #24b853;
  --purple: #635bff;
  --red: #e9252a;
  --radius: 8px;
  --rail: #070b22;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); min-width: 320px; }
button, input { font: inherit; }
body.auth-locked { background: #030817; color: #f6f8ff; }
.auth-gate {
  display: none;
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 36%, rgba(36, 66, 124, 0.42), rgba(3, 8, 23, 0) 28%),
    #030817;
  color: #f6f8ff;
  padding: 34px 24px 72px;
}
body.auth-locked .auth-gate {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
}
body.auth-locked .shell { display: none; }
.auth-brand {
  position: absolute;
  top: 24px;
  left: max(24px, calc((100vw - 1420px) / 2 + 24px));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 19px;
  color: #ffffff;
}
.storeadops-mark {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  color: transparent;
  font-weight: 950;
  font-size: 0;
  line-height: 1;
  background: #071126 url("/ui-static/storeadops-icon.png") center / cover no-repeat;
  box-shadow: 0 16px 34px rgba(38, 102, 255, 0.22);
}
.storeadops-mark.small {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.storeadops-mark.hero {
  width: 86px;
  height: 86px;
  border-radius: 20px;
  margin: 0 auto 22px;
}
.auth-card {
  position: relative;
  z-index: 1;
  width: min(490px, calc(100vw - 32px));
  padding: 36px 36px 32px;
  border: 1px solid rgba(133, 151, 188, 0.15);
  border-radius: 8px;
  background: #1c2741;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
}
.auth-card h1 {
  margin: 0 0 24px;
  text-align: center;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.12;
  font-weight: 950;
}
.resume-box {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(248, 219, 54, 0.18);
  border-radius: 8px;
  background: #030303;
}
.resume-box strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f7df22;
  font-size: 14px;
  line-height: 1.4;
}
.resume-box svg {
  width: 16px;
  height: 16px;
}
.resume-box ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: #a4a89f;
  line-height: 1.75;
  font-size: 13px;
}
.google-sign-in {
  display: grid;
  place-items: center;
  min-height: 44px;
  margin: 0 0 16px;
}
.auth-divider {
  position: relative;
  display: grid;
  place-items: center;
  margin: 2px 0 14px;
  color: #9fa9bc;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.auth-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(159, 169, 188, 0.3);
}
.auth-divider span {
  position: relative;
  padding: 0 12px;
  background: #1c2741;
}
.auth-instruction {
  margin: 0 0 2px;
  color: #c8d1e5;
  font-size: 13px;
  font-weight: 700;
}
.auth-card label {
  color: #f8fbff;
  font-size: 13px;
  margin-top: 14px;
}
.auth-card input {
  width: 100%;
  min-height: 54px;
  border: 1px solid #747b8e;
  border-radius: 8px;
  background: #020305;
  color: #ffffff;
  padding: 0 16px;
  outline: none;
}
.auth-card input:focus {
  border-color: #2b68ff;
  box-shadow: 0 0 0 3px rgba(43, 104, 255, 0.25);
}
.auth-card input::placeholder { color: #858a96; }
.auth-code-group {
  display: block;
}
.auth-submit {
  width: 100%;
  min-height: 56px;
  margin-top: 18px;
  border-radius: 999px;
  font-size: 15px;
}
.auth-note {
  margin: 16px 0 0;
  text-align: center;
  color: #9fa9bc;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
.auth-note a {
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  font-weight: 900;
}
.auth-note a:hover { text-decoration: underline; }
.auth-reviewer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(159, 169, 188, 0.24);
}
.auth-link-button {
  width: 100%;
  border: 0;
  background: transparent;
  color: #dbe5ff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  min-height: 30px;
}
.auth-link-button:hover { text-decoration: underline; }
.auth-reviewer-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.auth-reviewer-panel label { margin-top: 0; }
.reviewer-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(216, 221, 229, 0.34);
}
.reviewer-submit:hover { background: rgba(255, 255, 255, 0.14); }
.auth-assurance {
  z-index: 1;
  width: min(490px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  color: #b8c0d3;
  font-size: 14px;
  font-weight: 700;
}
.auth-assurance span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-assurance svg {
  width: 18px;
  height: 18px;
  color: #27c169;
}
.auth-assurance span + span svg { color: #9099ad; }
.auth-float {
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  color: white;
}
.auth-float svg { width: 34px; height: 34px; }
.auth-float-left {
  left: 27%;
  top: 31%;
  color: #52d7ec;
  transform: rotate(-13deg);
}
.auth-float-right {
  right: 23%;
  top: 34%;
  background: #ffffff;
  color: #111827;
}
.auth-float-low {
  right: 18%;
  top: 58%;
  background: #dd7650;
  transform: rotate(28deg);
}
.shell { min-height: 100vh; display: grid; grid-template-columns: 64px minmax(0, 1fr); min-width: 0; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--rail); color: #f4f7fb; padding: 18px 12px; display: flex; flex-direction: column; align-items: stretch; gap: 26px; overflow-x: hidden; overflow-y: auto; }
.brand { display: flex; align-items: center; justify-content: flex-start; gap: 10px; color: inherit; text-decoration: none; font-weight: 800; min-height: 38px; padding: 0 4px; min-width: 0; overflow: hidden; }
.brand span:last-child { opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; }
.brand-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; overflow: hidden; color: transparent; font-size: 0; font-weight: 900; background: #071126 url("/ui-static/storeadops-icon.png") center / cover no-repeat; flex: 0 0 auto; box-shadow: 0 8px 22px rgba(20, 100, 244, 0.18); }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav.bottom { margin-top: auto; }
.nav a { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 0 9px; color: #9aa3b8; text-decoration: none; border-radius: var(--radius); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.nav a span { opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; }
.nav a.active, .nav a:hover { background: var(--navy-2); color: #ffffff; }
.nav a:focus-visible, .nav-toggle:focus-visible { outline: 2px solid #6f7cff; outline-offset: 2px; }
/* Collapsed rail is only 64px and clips horizontally (overflow-x: hidden, added so labels
   don't spill during the expand animation), so an outward-offset focus ring gets cut at the
   edges. Inset the ring while collapsed — drawn inside the element's box, it can't be clipped.
   The expanded sidebar keeps the roomier outset ring above. */
body:not(.nav-expanded) .nav a:focus-visible,
body:not(.nav-expanded) .nav-toggle:focus-visible { outline-offset: -2px; }
.nav svg, button svg, .notice svg, .doc-link svg { width: 18px; height: 18px; flex: 0 0 auto; }
.nav-toggle { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 40px; padding: 0 9px; margin-top: 6px; border: none; background: transparent; color: #7f889d; border-radius: var(--radius); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; cursor: pointer; }
.nav-toggle:hover { background: var(--navy-2); color: #ffffff; }
.nav-toggle span { opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; }
.nav-toggle svg { width: 18px; height: 18px; flex: 0 0 auto; }
.nav-backdrop { display: none; }
.mobile-menu { display: none; }

/* Expanded state (user-toggled, persisted). */
body.nav-expanded .shell { grid-template-columns: 232px minmax(0, 1fr); }
body.nav-expanded .brand span:last-child,
body.nav-expanded .nav a span,
body.nav-expanded .nav-toggle span { opacity: 1; max-width: 180px; }
body.nav-expanded .nav a.active { background: #252943; }
body.nav-expanded .nav-toggle svg { transform: rotate(180deg); }

/* Collapsed rail centers the icons; expanded left-aligns them (above).
   gap:0 is essential here: the label spans collapse to max-width:0 but the flex
   `gap` to them is still reserved, which pushed the 36px brand-mark past the 40px
   rail content box and clipped its left edge under overflow:hidden. */
body:not(.nav-expanded) .nav a,
body:not(.nav-expanded) .nav-toggle,
body:not(.nav-expanded) .brand { justify-content: center; padding: 0; gap: 0; }

/* Enable transitions only after first paint so the persisted state doesn't animate on load. */
body.nav-ready .shell { transition: grid-template-columns 260ms cubic-bezier(0.4, 0, 0.2, 1); }
body.nav-ready .nav a,
body.nav-ready .nav-toggle,
body.nav-ready .brand { transition: background 160ms ease, color 160ms ease, padding 260ms cubic-bezier(0.4, 0, 0.2, 1), justify-content 0ms; }
body.nav-ready .brand span:last-child,
body.nav-ready .nav a span,
body.nav-ready .nav-toggle span { transition: opacity 200ms ease, max-width 260ms cubic-bezier(0.4, 0, 0.2, 1); }
body.nav-ready .nav-toggle svg { transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
  body.nav-ready .shell,
  body.nav-ready .nav a,
  body.nav-ready .nav-toggle,
  body.nav-ready .brand,
  body.nav-ready .nav a span,
  body.nav-ready .nav-toggle span,
  body.nav-ready .brand span:last-child,
  body.nav-ready .nav-toggle svg { transition: none; }
}
.main { min-width: 0; padding: 36px 24px 60px; }
.mobile-bar { display: none; }
.page { display: none; max-width: 1184px; min-width: 0; margin: 0 auto; }
.page.active { display: block; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.page-head.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 28px; line-height: 1.18; margin-bottom: 8px; letter-spacing: 0; }
h2 { font-size: 22px; letter-spacing: 0; }
h3 { font-size: 18px; letter-spacing: 0; }
p { color: var(--muted); line-height: 1.48; }
.top-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: 22px; }
.panel, .health-card, .platform-row, .third-party article, .profile-card, .empty-state, .doc-link, .step, .billing-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel { padding: 24px; }
.panel-title { font-size: 18px; font-weight: 800; margin-bottom: 24px; }
.metric-row, .usage-line, .health-card, .band-head, .platform-row, .doc-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.metric-row.small { align-items: flex-start; }
.muted, .fine { color: var(--muted); }
.muted { display: block; font-size: 13px; }
.fine { font-size: 12px; margin-bottom: 0; }
.pill, .badge, .tag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 800; }
.pill.success { background: #c9f7cf; color: #15843b; }
.badge, .tag { background: #eef2f7; color: #667085; text-transform: uppercase; }
.split-line { height: 1px; background: var(--line); margin: 22px 0; }
.progress, .usage-meter { height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin: 12px 0; }
.progress span { display: block; width: 70%; height: 100%; background: var(--blue); border-radius: inherit; }
.usage-meter span { display: block; width: 0; height: 100%; background: #3478f6; border-radius: inherit; }
.health-card { margin: 28px 0 30px; padding: 16px 22px; }
.health-card > div { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.plan-band, .plans-band { background: linear-gradient(115deg, #a8b6e4 0%, #aee5ee 48%, #f19ade 100%); border-radius: var(--radius); padding: 26px; }
.band-head { margin-bottom: 22px; }
.segment { background: white; padding: 5px; border-radius: var(--radius); display: inline-flex; gap: 4px; }
.segment button { border: 0; border-radius: 6px; background: transparent; padding: 10px 16px; color: #344054; font-weight: 800; }
.segment button.active { background: var(--blue); color: white; }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.capability { position: relative; background: white; border: 1px solid #edf0f3; border-radius: var(--radius); padding: 24px; min-height: 320px; }
.capability.selected { border: 3px solid #111111; }
.capability .tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--blue); color: white; }
.price { font-size: 30px; font-weight: 900; color: #111111; margin-bottom: 14px; }
ul { padding-left: 18px; color: #26303f; line-height: 1.55; }
li::marker { color: var(--green); }
.primary, .secondary, .ghost, .danger, .icon-button { border-radius: var(--radius); min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; cursor: pointer; }
.primary { color: #ffffff; background: var(--blue); border: 0; padding: 0 18px; }
.primary:hover { background: var(--blue-2); }
.secondary { color: #344054; background: #ffffff; border: 1px solid #d8dde5; padding: 0 16px; }
.compact { min-height: 34px; padding: 0 12px; font-size: 12px; }
.wide { width: 100%; }
.ghost { color: var(--blue); background: transparent; border: 0; padding: 0 12px; }
.danger { width: 100%; color: #ffffff; background: var(--red); border: 0; margin-top: 16px; }
.icon-button { width: 42px; background: #eef2ff; color: var(--blue); border: 0; }
.notice { display: flex; align-items: flex-start; gap: 10px; color: var(--blue); background: #eaf2ff; border: 1px solid #b7d3ff; border-radius: var(--radius); padding: 14px; font-size: 13px; font-weight: 700; margin-bottom: 22px; }
.section-label { font-size: 16px; font-weight: 900; margin: 16px 0 14px; }
.section-label.lower { margin-top: 34px; }
.platform-list { display: grid; gap: 8px; }
.platform-row { min-height: 74px; padding: 14px 16px; }
.platform-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.platform-logo, .app-dot, .avatar { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; font-weight: 900; }
.platform-logo { border: 1px solid #e2e7ef; background: #ffffff; }
.app-dot, .avatar { background: #eef2ff; color: var(--blue); }
.provider-logo-image { display: block; width: 25px; height: 25px; object-fit: contain; }
.platform-logo.google .provider-logo-image,
.snapshot-mark.google .provider-logo-image,
.account-avatar.google .provider-logo-image { width: 19px; height: 27px; }
.platform-logo.meta .provider-logo-image,
.snapshot-mark.meta .provider-logo-image,
.account-avatar.meta .provider-logo-image { width: 28px; height: 21px; }
.platform-logo.shopify .provider-logo-image,
.snapshot-mark.shopify .provider-logo-image,
.account-avatar.shopify .provider-logo-image { width: 25px; height: 25px; }
.platform-info p, .third-party p { margin: 3px 0 0; font-size: 13px; }
.platform-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.eyebrow { color: #087443; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.third-party { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.third-party article { padding: 16px; display: flex; align-items: center; gap: 14px; }
.third-party .badge { margin-left: auto; }
.tabs { max-width: 760px; margin: 0 auto 30px; display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; background: transparent; padding: 14px 18px; font-weight: 900; color: var(--muted); border-bottom: 3px solid transparent; }
.tabs button.active { color: #111827; border-color: var(--blue); }
.setup-grid { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr); gap: 34px; }
.preview-panel { display: grid; justify-items: center; align-content: start; gap: 16px; }
.setup-card { width: 100%; background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: 0 18px 60px rgba(15, 23, 42, 0.06); }
.setup-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.setup-card h2 { font-size: 20px; margin-bottom: 0; }
.setup-card input { width: 100%; min-height: 42px; border: 1px solid #d0d5dd; border-radius: var(--radius); padding: 0 12px; background: #fbfcfd; }
.setup-card .wide { width: 100%; margin-top: 14px; }
.setup-label { width: 100%; margin: 0 0 -8px; }
.command-card { width: 100%; margin: 0; }
.terminal-card { width: 100%; min-height: 230px; background: #ffffff; border: 2px solid #a5a8af; border-radius: var(--radius); padding: 22px; display: flex; gap: 10px; align-items: flex-start; box-shadow: inset 0 0 0 1px #eceff3; }
.terminal-card.compact { min-height: 112px; }
.terminal-card code { white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.steps { display: grid; gap: 10px; }
.step { padding: 18px; display: grid; grid-template-columns: 32px 1fr; gap: 10px 14px; }
.step span { grid-row: span 2; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: #edf0f4; color: #667085; font-weight: 900; }
.step.active { border-color: var(--blue); background: #f8fbff; }
.step.active span { background: var(--blue); color: white; }
.step.ready { border-color: #abefc6; background: #f6fef9; }
.step.ready span { background: var(--green); color: white; }
.step p { margin-bottom: 0; }
.empty-state { min-height: 280px; border-style: dashed; display: grid; place-items: center; text-align: center; padding: 36px; }
.empty-state svg { width: 42px; height: 42px; color: var(--purple); }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.alert-list { display: grid; gap: 10px; margin-top: 18px; }
.alert-item { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.code-panel, .keys { max-width: 640px; margin: 22px auto 0; }
pre { background: #f0f1f4; border-radius: 6px; padding: 14px; white-space: pre-wrap; word-break: break-word; color: #4b5563; font-size: 13px; overflow: auto; }
label { display: block; color: #4b5563; font-size: 13px; font-weight: 800; margin: 14px 0 6px; }
.doc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.doc-link { min-height: 96px; justify-content: flex-start; padding: 20px; color: #111827; font-weight: 900; text-align: left; }
.profile-card { max-width: 640px; margin: 0 auto; padding: 24px; }
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.profile-card .avatar { width: 76px; height: 76px; border-radius: 999px; color: white; background: linear-gradient(135deg, #7657ff, #0b6cf7); }
.profile-card input, .modal input { width: 100%; min-height: 42px; border: 1px solid #d0d5dd; border-radius: var(--radius); padding: 0 12px; background: #fbfcfd; }
.toast { position: fixed; right: 22px; bottom: 22px; max-width: 340px; padding: 12px 14px; color: white; background: #111827; border-radius: var(--radius); box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
dialog { border: 0; border-radius: var(--radius); padding: 0; width: min(480px, calc(100vw - 32px)); box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28); }
dialog::backdrop { background: rgba(7, 11, 34, 0.42); }
.modal { padding: 26px; position: relative; }
.shopify-install-step {
  display: grid;
  gap: 10px;
  margin: 12px 0 14px;
  padding: 12px;
  border: 1px solid #dbe6ff;
  border-radius: var(--radius);
  background: #f6f9ff;
}
.shopify-install-step[hidden] { display: none; }
.shopify-install-step .secondary { width: 100%; }
.shopify-owned-step {
  margin: 12px 0 14px;
  padding: 12px;
  border: 1px solid #dbe6ff;
  border-radius: var(--radius);
  background: #f6f9ff;
}
.shopify-owned-step[hidden] { display: none; }
.account-modal { background: #f8fbff; }
.account-modal h2 { margin-bottom: 6px; padding-right: 36px; }
.account-modal .wide { width: 100%; margin-top: 14px; }
.close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 999px; background: #f2f4f7; display: grid; place-items: center; }
.secret { min-height: 48px; }
.search-box { display: flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid #d8dde5; border-radius: var(--radius); padding: 0 12px; }
.search-box svg { width: 16px; height: 16px; color: var(--muted); }
.search-box input { border: 0; background: transparent; min-height: 42px; outline: none; width: 100%; }
.account-list { display: grid; gap: 8px; max-height: 320px; overflow: auto; margin-top: 14px; }
.account-option { width: 100%; display: grid; grid-template-columns: 40px 1fr auto 30px; align-items: center; gap: 12px; min-height: 70px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #ffffff; text-align: left; cursor: pointer; }
.account-option.selected { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.account-avatar, .account-check { display: inline-grid; place-items: center; border-radius: 8px; }
.account-avatar { width: 34px; height: 34px; border: 1px solid #e2e7ef; background: #ffffff; color: var(--blue); }
.account-avatar svg, .account-check svg { width: 18px; height: 18px; }
.account-copy { min-width: 0; display: grid; gap: 3px; }
.account-copy span { color: var(--muted); font-size: 12px; }
.account-state { color: var(--green); font-size: 12px; font-weight: 900; }
.account-check { width: 26px; height: 26px; background: #edf0f4; color: transparent; }
.account-option.selected .account-check { background: var(--blue); color: #ffffff; }
.account-empty { padding: 18px; border: 1px dashed #cfd6e1; border-radius: var(--radius); color: var(--muted); text-align: center; background: #ffffff; }
.center { text-align: center; }
.center-column { max-width: 608px; margin: 0 auto; }
.keys-head { align-items: flex-start; margin-bottom: 22px; }
.keys-head h1 { margin: 0 0 8px; font-size: 24px; font-weight: 950; }
.keys-head p { max-width: 480px; margin-bottom: 0; color: #667085; font-size: 14px; font-weight: 700; }
.generate-top { width: 128px; min-height: 50px; padding: 0 16px; text-align: center; }
.key-usage { margin: 0 0 18px; font-weight: 900; }
.key-empty { min-height: 238px; border-style: solid; margin-bottom: 22px; }
.key-empty svg { color: #98a2b3; width: 44px; height: 44px; }
.key-empty h2 { margin: 4px 0 8px; color: #667085; font-size: 16px; }
.key-empty p { margin-bottom: 18px; color: #98a2b3; font-size: 13px; font-weight: 700; }
.key-code-panel { max-width: none; margin: 0; padding: 18px 16px 16px; }
.key-code-panel .panel-title { margin-bottom: 4px; font-size: 14px; }
.key-code-panel .fine { margin-bottom: 16px; font-size: 11px; font-weight: 700; }
.key-code-panel label { margin-top: 12px; font-size: 12px; color: #475467; }
.key-code-panel pre { margin: 7px 0 0; background: #f2f3f6; color: #424958; font-weight: 800; }
.profile-column { max-width: 696px; margin: 0 auto; }
.profile-title { margin-bottom: 26px; }
.profile-title h1 { margin: 0; font-size: 28px; font-weight: 950; }
.account-card { max-width: none; padding: 26px; margin-bottom: 24px; }
.profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.profile-head strong { display: block; color: #101828; font-size: 20px; font-weight: 950; }
.profile-head p { margin: 3px 0 0; color: #667085; font-weight: 700; }
.profile-avatar { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 999px; color: #ffffff; background: linear-gradient(145deg, #6a4cff, #6b7aff); }
.profile-avatar svg { width: 48px; height: 48px; }
.profile-card input, .profile-card select, .modal input { width: 100%; min-height: 46px; border: 1px solid #d0d5dd; border-radius: var(--radius); padding: 0 12px; background: #fbfcfd; color: #344054; font-weight: 800; }
.profile-card select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #98a2b3 50%), linear-gradient(135deg, #98a2b3 50%, transparent 50%); background-position: calc(100% - 16px) 20px, calc(100% - 11px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.signout { min-height: 44px; margin-top: 24px; font-size: 15px; }
.language-card { max-width: none; padding: 26px; }
.language-card p { margin: 2px 0 14px; font-size: 13px; }
.visually-hidden { position: absolute; width: 1px !important; max-width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
.billing-title { margin: 0 0 32px; }
.billing-title h1 { margin: 0; font-size: 26px; font-weight: 950; }
.billing-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); gap: 24px; align-items: stretch; margin-bottom: 30px; }
.billing-card { padding: 24px; }
.billing-card h2 { font-size: 20px; margin: 0 0 28px; font-weight: 950; }
.current-plan-card { min-height: 260px; }
.plan-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.plan-summary strong { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; }
.plan-summary .pill { margin-left: 10px; vertical-align: middle; }
.plan-summary.bottom { align-items: center; }
.right-metric { text-align: right; }
.right-metric strong { font-size: 18px; }
.inline-metric { display: flex; align-items: center; gap: 12px; }
.inline-metric svg { color: #98a2b3; }
.billing-side { display: grid; gap: 16px; }
.api-card { min-height: 166px; }
.api-card h2 { margin-bottom: 18px; }
.usage-totals { display: flex; justify-content: space-between; gap: 12px; color: #667085; font-size: 14px; font-weight: 800; }
.remaining { margin: 10px 0 6px; color: var(--green); font-weight: 900; }
.api-card .fine { display: flex; align-items: center; gap: 7px; color: #7b8496; font-size: 12px; }
.api-card .fine svg { width: 16px; height: 16px; }
.community-card { min-height: 76px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px; padding: 18px 20px; }
.community-card > svg { color: #6675ff; width: 28px; height: 28px; }
.community-card p { margin: 2px 0 0; font-size: 13px; }
.billing-health { margin: 0 0 32px; min-height: 58px; }
.plans-band { margin-top: 0; }
.plans-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.plans-head h2 { margin: 0 0 6px; font-size: 24px; font-weight: 950; }
.plans-head p { margin: 0; color: #101828; }
.billing-toggle { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--radius); background: #ffffff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }
.billing-toggle button { min-height: 38px; border: 0; border-radius: 6px; background: transparent; padding: 0 16px; color: #667085; font-weight: 900; cursor: pointer; }
.billing-toggle button.active { background: var(--blue); color: #ffffff; }
.billing-toggle span { margin-left: 6px; border-radius: 999px; padding: 2px 7px; background: #c9f7cf; color: #168039; font-size: 11px; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.plan-card { position: relative; min-height: 524px; border: 1px solid #e5e7ec; border-radius: var(--radius); background: #ffffff; padding: 28px 24px 24px; }
.plan-card.active { border: 3px solid #111111; padding: 26px 22px 22px; }
.plan-ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); border-radius: 5px; background: var(--blue); color: white; padding: 6px 14px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.plan-card h3 { margin: 0 0 22px; font-size: 22px; font-weight: 950; }
.plan-price { margin: 0 0 14px; color: #0f172a; font-size: 34px; line-height: 1; font-weight: 950; }
.plan-price span { color: #667085; font-size: 16px; font-weight: 700; }
.callout { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 30px; margin-bottom: 22px; border-radius: 7px; background: #eef3ff; color: var(--blue); padding: 8px 10px; font-size: 14px; font-weight: 900; }
.callout svg { width: 15px; height: 15px; }
.callout small { flex-basis: 100%; color: #6b8dff; font-size: 10px; line-height: 1.2; padding-left: 22px; }
.plan-card .primary { min-height: 40px; border-radius: 999px; margin-bottom: 22px; }
.savings { margin: -12px 0 16px; color: #475467; font-size: 12px; }
.savings strong { border-radius: 999px; background: #18a84a; color: white; padding: 3px 9px; font-size: 12px; }
.included { margin: 0 0 10px; color: #8a8f9b; font-size: 13px; font-weight: 900; }
.plan-card ul { margin: 0; padding-left: 22px; color: #111827; line-height: 1.45; }
.plan-card li { margin-bottom: 11px; }
.plan-card li::marker { color: var(--green); }
/* Disabled actions (Coming soon / current plan) for plan + connection buttons. */
button:disabled, .primary:disabled, .secondary:disabled { cursor: not-allowed; opacity: 0.55; }
.primary:disabled:hover { background: var(--blue); }
.billing-toggle button:disabled { opacity: 0.6; }
/* Coming-soon platform connections (Shopify, Meta) */
.badge.badge-soon { background: #fff4e5; color: #b25f00; }
.platform-row.coming-soon { opacity: 0.75; }
.platform-row.coming-soon .platform-logo { filter: grayscale(1); }
/* Paid plans preview: grayed out until billing is live */
.plans-soon-note { display: flex; align-items: center; gap: 8px; margin: -14px 0 24px; color: #344054; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(16, 24, 40, 0.1); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; font-weight: 700; }
.plans-soon-note svg { width: 15px; height: 15px; flex: 0 0 auto; }
.plan-ribbon.soon { background: #667085; }
.plan-card.disabled { opacity: 0.6; }
.snapshot-section { margin-top: 6px; padding: 26px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff; }
.snapshot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.snapshot-head h2 { margin: 4px 0 6px; font-size: 24px; font-weight: 950; }
.snapshot-head p { margin: 0; }
.snapshot-controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.snapshot-filters { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #f7f8fa; }
.snapshot-filters button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #667085; cursor: pointer; font-size: 12px; font-weight: 900; }
.snapshot-filters button.active { color: #ffffff; background: var(--navy); }
.snapshot-period { display: grid; gap: 4px; color: #667085; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.snapshot-period select { min-height: 42px; padding: 0 34px 0 12px; border: 1px solid #d0d5dd; border-radius: 8px; background: #ffffff; color: #344054; font-weight: 800; }
.snapshot-status { min-height: 20px; margin: 22px 0 10px; color: #667085; font-size: 12px; font-weight: 700; }
.snapshot-empty { display: flex; align-items: center; gap: 16px; padding: 22px; border: 1px dashed #cfd5df; border-radius: 10px; background: #fafbfc; }
.snapshot-empty p { margin: 3px 0 0; font-size: 13px; }
.snapshot-empty .action { margin-left: auto; text-decoration: none; }
.snapshot-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #eaf1ff; color: var(--blue); }
.snapshot-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 18px; align-items: start; }
.snapshot-ledger { display: grid; gap: 8px; }
.snapshot-row { display: grid; grid-template-columns: minmax(190px, 1.3fr) repeat(3, minmax(86px, 0.7fr)) 24px; align-items: center; gap: 12px; width: 100%; min-height: 82px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff; color: inherit; text-align: left; cursor: pointer; }
.snapshot-row:hover { border-color: #aeb9ca; box-shadow: 0 4px 14px rgba(16, 24, 40, 0.06); }
.snapshot-row.selected { border-color: #315efb; box-shadow: 0 0 0 2px rgba(49, 94, 251, 0.12); }
.snapshot-account { display: flex; align-items: center; gap: 11px; min-width: 0; }
.snapshot-mark { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid #e2e7ef; border-radius: 9px; background: #ffffff; }
.snapshot-account-copy { min-width: 0; }
.snapshot-account-copy strong, .snapshot-account-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-account-copy span { margin-top: 3px; color: #667085; font-size: 11px; }
.snapshot-primary { margin-left: 5px; color: #1f6d3a; font-size: 10px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.snapshot-metric span, .snapshot-detail-metric span { display: block; color: #667085; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.snapshot-metric strong { display: block; margin-top: 4px; font-size: 15px; }
.snapshot-row > svg { width: 18px; height: 18px; color: #98a2b3; }
.snapshot-detail { min-height: 264px; padding: 20px; border: 1px solid #dce1e9; border-radius: 10px; background: #f8fafc; }
.snapshot-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.snapshot-detail-head h3 { margin: 2px 0 4px; font-size: 19px; }
.snapshot-detail-head p { margin: 0; font-size: 12px; }
.snapshot-detail-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.snapshot-state { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 9px; color: #18713c; background: #d9f7e1; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.snapshot-state.partial { color: #8b5b00; background: #fff0c7; }
.snapshot-state.unavailable { color: #9d2828; background: #ffe0e0; }
.snapshot-manage-link { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 9px; border: 1px solid #d8dde5; border-radius: 8px; color: var(--blue); background: #ffffff; font-size: 10px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.snapshot-manage-link:hover { border-color: #aeb9ca; background: #f8faff; }
.snapshot-manage-link svg { width: 13px; height: 13px; }
.snapshot-detail-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.snapshot-detail-metric { padding: 12px; border: 1px solid #e2e7ef; border-radius: 8px; background: #ffffff; }
.snapshot-detail-metric strong { display: block; margin-top: 5px; font-size: 19px; }
.snapshot-breakdown { display: grid; gap: 9px; }
.snapshot-breakdown-title { display: flex; align-items: center; justify-content: space-between; color: #344054; font-size: 12px; font-weight: 900; }
.snapshot-bar-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(80px, 1.2fr) auto; align-items: center; gap: 8px; color: #475467; font-size: 11px; }
.snapshot-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-bar { height: 7px; overflow: hidden; border-radius: 999px; background: #e5eaf1; }
.snapshot-bar span { display: block; height: 100%; border-radius: inherit; background: #4b72f2; }
.snapshot-unavailable-note { margin: 18px 0 0; padding: 12px; border-radius: 8px; color: #7a4c00; background: #fff6dc; font-size: 12px; }
.snapshot-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; color: #667085; font-size: 11px; }
.snapshot-foot span, .snapshot-foot a { display: inline-flex; align-items: center; gap: 6px; }
.snapshot-foot svg { width: 14px; height: 14px; }
.snapshot-foot a { color: var(--blue); font-weight: 900; text-decoration: none; }
.connections-data-note { display: flex; align-items: center; gap: 9px; margin: 18px 0 0; color: #667085; font-size: 12px; }
.connections-data-note svg { width: 16px; height: 16px; color: #6675ff; }
.connections-data-note a { color: var(--blue); font-weight: 900; text-decoration: none; }
.connections-data-note a:hover { text-decoration: underline; }
@media (max-width: 980px) {
  .auth-gate { padding: 82px 16px 60px; align-items: start; }
  .auth-brand { top: 24px; left: 20px; }
  .auth-card { padding: 28px 20px 24px; }
  .auth-card h1 { font-size: 28px; }
  .auth-assurance { width: min(490px, calc(100vw - 32px)); }
  .auth-float { display: none; }
  .shell, body.nav-expanded .shell { grid-template-columns: 1fr; }
  /* On mobile the sidebar becomes an off-canvas drawer opened by the hamburger. */
  .sidebar {
    display: flex !important;
    position: fixed;
    inset: 0 auto 0 0;
    height: 100vh;
    width: min(280px, 82vw);
    transform: translateX(-100%);
    z-index: 70;
    padding: 20px 14px;
    overflow-y: auto;
    box-shadow: 6px 0 40px rgba(15, 23, 42, 0.35);
  }
  body.nav-ready .sidebar { transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1); }
  body.mobile-nav-open .sidebar { transform: translateX(0); }
  /* Always show the full labelled nav inside the drawer, regardless of the desktop collapse state.
     Labels are visible here, so restore the icon→label gap that the collapsed-rail rule zeroes out. */
  .sidebar .brand { justify-content: flex-start !important; padding: 0 9px !important; gap: 10px !important; }
  .sidebar .nav a { justify-content: flex-start !important; padding: 0 9px !important; gap: 12px !important; }
  .sidebar .brand span:last-child, .sidebar .nav a span { opacity: 1 !important; max-width: 200px !important; overflow: visible !important; }
  .nav-toggle { display: none !important; }
  .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 60; opacity: 0; pointer-events: none; }
  body.nav-ready .nav-backdrop { transition: opacity 200ms ease; }
  body.mobile-nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.mobile-nav-open { overflow: hidden; }
  .mobile-menu { display: inline-grid !important; }
  .mobile-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
  .mobile-bar .brand { color: var(--text); padding: 0; margin-right: auto; gap: 10px !important; }
  .mobile-bar .brand span:last-child { opacity: 1; max-width: none; overflow: visible; white-space: normal; }
  .top-grid, .capability-grid, .third-party, .setup-grid, .doc-grid, .billing-grid, .pricing-grid { grid-template-columns: 1fr; }
  .page-head, .band-head, .plans-head, .health-card, .platform-row { align-items: stretch; flex-direction: column; }
  .community-card { grid-template-columns: 34px 1fr; }
  .community-card button { grid-column: 1 / -1; }
  .right-metric { text-align: left; }
  .plan-summary { flex-direction: column; }
  .platform-actions { justify-content: stretch; }
  .platform-actions .action { flex: 1 1 180px; }
  .main { padding: 18px 14px 48px; }
  .center-column, .profile-column { max-width: none; }
  .keys-head { gap: 16px; }
  .generate-top { width: 100%; }
  .profile-head { align-items: flex-start; }
  .snapshot-head, .snapshot-foot { align-items: stretch; flex-direction: column; }
  .snapshot-controls { justify-content: flex-start; }
  .snapshot-layout { grid-template-columns: 1fr; }
  .snapshot-row { grid-template-columns: minmax(170px, 1.2fr) repeat(3, minmax(76px, 0.7fr)) 20px; overflow-x: auto; }
}

@media (max-width: 640px) {
  .snapshot-section { padding: 18px; }
  .snapshot-filters { width: 100%; }
  .snapshot-filters button { flex: 1; padding: 0 8px; }
  .snapshot-period { width: 100%; }
  .snapshot-period select { width: 100%; }
  .snapshot-empty { align-items: flex-start; flex-wrap: wrap; }
  .snapshot-empty .action { width: 100%; margin-left: 0; }
  .snapshot-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .snapshot-row .snapshot-metric { display: none; }
  .snapshot-row > svg { justify-self: end; }
}

/* --- Automation pages: Objectives and Guardrails (issue #239) ------------------------- */
.callout.warn { background: #fdf3e3; color: #8a5a00; align-items: flex-start; }
.callout.warn strong { display: block; }
.callout.warn p { margin: 4px 0 0; font-weight: 500; font-size: 13px; line-height: 1.5; }
.callout.warn code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.callout > div { flex: 1; min-width: 0; }

.growth-form { display: grid; gap: 18px; }
.growth-form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 18px; margin: 0; }
.growth-form legend { font-size: 13px; font-weight: 800; padding: 0 6px; color: var(--text); }
.growth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.growth-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text); }
.growth-form label .fine { font-weight: 500; color: var(--muted); }
.growth-form input[type="text"], .growth-form input[type="number"], .growth-form select {
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px;
  font: inherit; font-size: 13px; font-weight: 500; background: var(--panel); color: var(--text);
}
.growth-form input:focus-visible, .growth-form select:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 1px;
}
.field-legend { font-size: 12px; font-weight: 800; color: var(--muted); margin: 16px 0 7px; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.check-row .check { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.form-error { color: var(--red); font-size: 13px; font-weight: 700; margin: 0; }

.kv-list { display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 14px; }
.kv-list dt { color: var(--muted); font-weight: 600; }
.kv-list dd { margin: 0; overflow-wrap: anywhere; }

.version-list { display: grid; gap: 0; }
.version-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.version-row:first-child { border-top: 0; }
.version-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; }
.badge.ok { background: #e7f8ec; color: #12833c; }
.growth-record-row { align-items: flex-start; }
.growth-record-title { font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.growth-record-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }

/* --- Reviews, Scheduled, Activity (issue #239) ---------------------------------------- */
.nav-count {
  margin-left: auto; background: var(--blue); color: #fff; font-size: 10.5px;
  font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px;
  display: grid; place-items: center; padding: 0 5px; flex: none;
}
/* The rail is COLLAPSED by default, and the generic rule that hides labels there
   (`.nav a span { opacity: 0; max-width: 0 }`) also hid this badge — so the one signal on the
   nav that asks for attention was invisible in the default state. Collapsed, it becomes a dot
   on the icon; expanded, it returns to a counted pill. */
body:not(.nav-expanded) .nav a .nav-count {
  position: absolute; top: 6px; right: 10px; margin: 0; padding: 0;
  min-width: 8px; width: 8px; height: 8px; border-radius: 50%;
  opacity: 1; max-width: 8px; overflow: hidden; color: transparent;
  box-shadow: 0 0 0 2px var(--rail);
}
body:not(.nav-expanded) .nav a { position: relative; }
body.nav-expanded .nav a .nav-count { opacity: 1; max-width: 40px; }
.section-label {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 10px;
}
.section-label:first-of-type { margin-top: 8px; }

.review-card, .run-card, .run-row { margin-bottom: 12px; }
.review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.review-title { font-size: 15px; font-weight: 750; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.button-row.start { justify-content: flex-start; align-items: center; }
.growth-empty { text-align: center; }
.growth-empty p { margin: 0; }

.run-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.disclosure { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.disclosure-body { display: grid; gap: 14px; }
.disclosure-node { border-left: 3px solid var(--blue); padding-left: 14px; }

.reason-list { margin: 0; padding-left: 20px; display: grid; gap: 5px; font-size: 13px; color: var(--text); }
/* A blocked proposal now leads with WHAT it would change, so that preview needs to read as
   information rather than as something already agreed to: same left rule as an approvable node,
   no approve affordance anywhere near it. */
.proposed-changes { display: grid; gap: 12px; }
.proposed-changes > p.fine { margin: 0; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--muted); }
.proposed-change { border-left: 3px solid var(--line); padding-left: 14px; display: grid; gap: 6px; }
.callout.warn .reason-list { color: inherit; font-weight: 500; margin-top: 6px; }
.callout.warn .next-step { margin-top: 10px; font-weight: 500; font-size: 13px; line-height: 1.5; }
.callout.warn .next-step strong { display: inline; }
/* Overriding StoreAdOps' own advice is a deliberate, recorded act, so the control that does it
   is styled as consequential rather than as an ordinary next step. */
.action.danger { border-color: #d9534f; color: #b4221f; }
button.primary.action.danger { background: #b4221f; border-color: #b4221f; color: #fff; }
.override-confirm { margin-top: 14px; }
.override-confirm .button-row { margin-top: 12px; }
/* Consent vocabulary and the opaque revision ref are support material, not decision material. */
details.tech { border-top: 1px solid var(--line); padding-top: 10px; }
details.tech summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--muted); }
details.tech .kv-list { margin-top: 10px; font-size: 13px; }
.reason-list.warn { color: #8a5a00; }
.warn-text { color: #8a5a00; font-weight: 700; }

/* Outcome tone. outcome_unknown gets its own colour on purpose: it is a third state, and
   showing it as either success or failure would be a lie about a provider write. */
.badge.info { background: #eaf1fe; color: var(--blue-2); }
.badge.warn { background: #fdf3e3; color: #8a5a00; }
.badge.bad { background: #fdeaea; color: #b4221f; }
.badge.unknown { background: #f2effe; color: #4b3fd6; }
.badge.mute { background: #f1f3f7; color: var(--muted); }
.run-card.stripe-ok { border-left: 3px solid var(--green); }
.run-card.stripe-bad { border-left: 3px solid var(--red); }
.run-card.stripe-warn { border-left: 3px solid #d99a1f; }
.run-card.stripe-unknown { border-left: 3px solid var(--purple); }
.run-card.stripe-info { border-left: 3px solid var(--blue); }
.run-card.stripe-mute { border-left: 3px solid var(--line); }

button.danger {
  background: var(--panel); border: 1px solid #f3c9c8; color: var(--red);
  border-radius: 7px; padding: 8px 13px; font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
button.danger:hover { background: #fdf2f2; }

/* Group headings in the rail. Ten primary items in one flat list gave no clue that accounts,
   automation, and developer tooling are different kinds of thing. Collapsed, the label cannot
   be read, so it degrades to a plain divider rather than disappearing entirely. */
.nav-group {
  margin: 14px 0 4px; padding: 0 10px; color: #6d7794;
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.nav-group span { display: block; overflow: hidden; white-space: nowrap; }
body.nav-ready .nav-group span { transition: opacity 200ms, max-width 260ms cubic-bezier(.4, 0, .2, 1); }
body:not(.nav-expanded) .nav-group {
  margin: 10px 12px 8px; padding: 0; border-top: 1px solid rgba(255, 255, 255, .1);
}
body:not(.nav-expanded) .nav-group span { opacity: 0; max-width: 0; height: 0; }
body.nav-expanded .nav-group span { opacity: 1; max-width: 180px; }