/* =====================================================================
   BMan Admin Console
   ---------------------------------------------------------------------
   One stylesheet, organised as: tokens -> layout -> components -> charts.
   Everything is written against role tokens so the dark theme is a value
   swap rather than a second set of rules.

   The surface, ink and brand values are the customer-facing app's own
   tokens, copied from web/app/globals.css so the two halves of the product
   look like one product. Anything changed there should be changed here.

   The chart palette is not decorative: the six categorical hues were
   ordered by running the colour-blindness validator over every candidate
   ordering, and both the light and dark steps clear the adjacent-pair
   separation, lightness-band and contrast gates. The brand green leads the
   order, but at the ramp step that passes those gates — the deep corporate
   #15633a reads as grey once desaturated and cannot carry a chart mark.
   Changing a hue means re-running that check, not picking by eye.
   ===================================================================== */

/* ----------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  /* surfaces */
  --page:            #f7f7f8;
  --surface:         #ffffff;
  --surface-sunken:  #f4f4f5;
  --surface-raised:  #ffffff;
  --sidebar:         #ffffff;

  /* ink */
  --ink:             #0b0b0c;
  --ink-secondary:   #57575d;
  --ink-muted:       #8b8b93;
  --ink-inverse:     #ffffff;

  /* lines */
  --line:            rgba(9, 9, 11, .09);
  --line-strong:     rgba(9, 9, 11, .16);
  --grid:            rgba(9, 9, 11, .06);

  /* brand — the corporate forest green */
  --brand:           #15633a;
  --brand-strong:    #124f30;
  --brand-soft:      #eef6f1;
  --brand-softer:    #f6faf8;

  /* the inverted pill the web app uses for its primary call to action */
  --pill:            #0b0b0c;
  --pill-ink:        #ffffff;
  --pill-hover:      #26262b;

  /* The frosted topbar: see-through enough to show movement underneath,
     opaque enough that the controls on it stay legible over a table. */
  --glass:           rgba(255, 255, 255, .72);

  /* categorical series - fixed order, never cycled */
  --series-1: #1e8049;  /* brand green */
  --series-2: #7c3aed;  /* violet      */
  --series-3: #b45309;  /* amber       */
  --series-4: #2563eb;  /* blue        */
  --series-5: #be185d;  /* pink        */
  --series-6: #0891b2;  /* cyan        */

  /* ordinal green ramp - light end clears 2:1 on white */
  --ordinal-1: #6fbf93;
  --ordinal-2: #3fa46e;
  --ordinal-3: #1e8049;
  --ordinal-4: #15633a;

  /* status - reserved, never reused as a series colour */
  --good:     #1e8049;
  --warning:  #b7791f;
  --serious:  #ea580c;
  --critical: #c0392f;
  --good-soft:     #eef6f1;
  --warning-soft:  #fdf4e3;
  --serious-soft:  #fdeee7;
  --critical-soft: #fbeceb;
  --neutral-soft:  #f4f4f5;

  /* shape */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --shadow:    0 1px 2px rgba(9, 9, 11, .04), 0 8px 24px -12px rgba(9, 9, 11, .10);
  --shadow-lg: 0 2px 4px rgba(9, 9, 11, .04), 0 24px 48px -20px rgba(9, 9, 11, .18);

  /*
    Geist is what the web app ships, loaded there through next/font. The
    console has no such build step, and fetching a webfont would put an
    internet connection between an operator and the page — in a product whose
    pitch is that it keeps working without one. So it is used when the machine
    already has it and the system face is used otherwise.
  */
  --font: "Geist", "Geist Sans", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, sans-serif;
}

:root:not([data-theme="light"]) {
  /* dark values live in the media query and the toggle scope below */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* surfaces */
    --page:            #070708;
    --surface:         #101012;
    --surface-sunken:  #0b0b0d;
    --surface-raised:  #17171a;
    --sidebar:         #101012;

    /* ink */
    --ink:             #f4f4f5;
    --ink-secondary:   #a1a1aa;
    --ink-muted:       #6d6d76;
    --ink-inverse:     #09090b;

    /* lines */
    --line:            rgba(255, 255, 255, .08);
    --line-strong:     rgba(255, 255, 255, .16);
    --grid:            rgba(255, 255, 255, .06);

    /* brand */
    --brand:           #4fb583;
    --brand-strong:    #6fbf93;
    --brand-soft:      rgba(79, 181, 131, .14);
    --brand-softer:    rgba(79, 181, 131, .07);

    --pill:            #ffffff;
    --pill-ink:        #09090b;
    --pill-hover:      #e4e4e7;
    --glass:           rgba(16, 16, 18, .72);

    /* categorical series - own steps, not a flip of the light ones */
    --series-1: #3fa46e;
    --series-2: #8b5cf6;
    --series-3: #d97706;
    --series-4: #3b82f6;
    --series-5: #ec4899;
    --series-6: #0d9bb8;

    --ordinal-1: #0f3f28;
    --ordinal-2: #15633a;
    --ordinal-3: #1e8049;
    --ordinal-4: #3fa46e;

    --good:     #4fb583;
    --warning:  #eab308;
    --serious:  #fb923c;
    --critical: #f0776b;
    --good-soft:     rgba(79, 181, 131, .13);
    --warning-soft:  rgba(234, 179, 8, .13);
    --serious-soft:  rgba(251, 146, 60, .13);
    --critical-soft: rgba(240, 119, 107, .13);
    --neutral-soft:  rgba(255, 255, 255, .06);

    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 48px -20px rgba(0, 0, 0, .7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* surfaces */
  --page:            #070708;
  --surface:         #101012;
  --surface-sunken:  #0b0b0d;
  --surface-raised:  #17171a;
  --sidebar:         #101012;

  /* ink */
  --ink:             #f4f4f5;
  --ink-secondary:   #a1a1aa;
  --ink-muted:       #6d6d76;
  --ink-inverse:     #09090b;

  /* lines */
  --line:            rgba(255, 255, 255, .08);
  --line-strong:     rgba(255, 255, 255, .16);
  --grid:            rgba(255, 255, 255, .06);

  /* brand */
  --brand:           #4fb583;
  --brand-strong:    #6fbf93;
  --brand-soft:      rgba(79, 181, 131, .14);
  --brand-softer:    rgba(79, 181, 131, .07);

  --pill:            #ffffff;
  --pill-ink:        #09090b;
  --pill-hover:      #e4e4e7;
  --glass:           rgba(16, 16, 18, .72);

  /* categorical series - own steps, not a flip of the light ones */
  --series-1: #3fa46e;
  --series-2: #8b5cf6;
  --series-3: #d97706;
  --series-4: #3b82f6;
  --series-5: #ec4899;
  --series-6: #0d9bb8;

  --ordinal-1: #0f3f28;
  --ordinal-2: #15633a;
  --ordinal-3: #1e8049;
  --ordinal-4: #3fa46e;

  --good:     #4fb583;
  --warning:  #eab308;
  --serious:  #fb923c;
  --critical: #f0776b;
  --good-soft:     rgba(79, 181, 131, .13);
  --warning-soft:  rgba(234, 179, 8, .13);
  --serious-soft:  rgba(251, 146, 60, .13);
  --critical-soft: rgba(240, 119, 107, .13);
  --neutral-soft:  rgba(255, 255, 255, .06);

  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 48px -20px rgba(0, 0, 0, .7);
}

/* ------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

/* The speckled ground behind the console. Two very small radial dots on a
   coprime tiling so the pattern never visibly repeats — tinted with the brand
   green and kept faint, so it reads as texture rather than as pattern. */
body.admin-shell {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(21, 99, 58, .10) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(21, 99, 58, .06) 1px, transparent 0);
  background-size: 23px 23px, 31px 31px;
  background-position: 0 0, 11px 17px;
}

:root[data-theme="dark"] body.admin-shell,
:root:not([data-theme="light"]) body.admin-shell {
  background-image: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body.admin-shell {
    background-image:
      radial-gradient(circle at 1px 1px, rgba(21, 99, 58, .10) 1px, transparent 0),
      radial-gradient(circle at 1px 1px, rgba(21, 99, 58, .06) 1px, transparent 0);
  }
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font: inherit; }
[hidden] { display: none !important; }

/*
  Every interface icon is drawn on the same 24x24 grid, and an SVG with no
  intrinsic size fills whatever box it is given — one icon that no rule happens
  to match does not come out slightly wrong, it comes out the width of the
  page. This is the floor: anything more specific still wins, and charts, which
  are deliberately fluid, use their own viewBoxes and are untouched.
*/
svg[viewBox="0 0 24 24"] { width: 16px; height: 16px; flex: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

::selection { background: var(--brand-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ----------------------------------------------------------- layout */
.shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  min-height: 100vh;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: calc(100vh - 32px);
  padding: 20px 16px;
  background: var(--sidebar);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* ---------------------------------------------------------- sidebar */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 4px;
  min-width: 0;
}
.brand .brand-name { margin-right: 2px; }

/* The shield mark itself, on its own transparent ground — the same asset the
   web app uses, so the two surfaces are recognisably one product. */
.brand-mark {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: none;
}

/* The wordmark as the web app sets it: one weight, the second word receding. */
.brand-name { font-size: 15px; font-weight: 500; letter-spacing: -.02em; }
.brand-name em { font-style: normal; color: var(--ink-muted); }

/* Which half of the product you are in, said quietly. */
.brand-tag {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nav-group { display: flex; flex-direction: column; gap: 2px; }

.nav-label {
  padding: 12px 10px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ink-secondary);
  font-size: 13.5px;
  font-weight: 500;
  transition: background .14s ease, color .14s ease;
}

.nav-item:hover { background: var(--surface-sunken); color: var(--ink); }

.nav-item[aria-current="page"] {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

.nav-item svg { flex: none; width: 17px; height: 17px; stroke-width: 1.7; }

.nav-badge {
  margin-left: auto;
  min-width: 19px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--critical);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.nav-divider { height: 1px; margin: 4px 10px; background: var(--line); }

/*
  Who you are signed in as, at the top of the sidebar rather than the bottom.
  It is the thing an operator checks before doing something irreversible, and
  the bottom of a thirteen-item list is not where you look for it.
*/
.sidebar-account {
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 12px;
}

.user-card:hover { background: var(--surface-sunken); }

.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--series-1), var(--series-5));
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  flex: none;
}

.user-meta { min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; }
.user-role {
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: capitalize;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}

.icon-btn:hover { background: var(--line); color: var(--ink); }

/* ---------------------------------------------------------- top bar */
/*
  Stays put while the page scrolls. The search, the range and the export
  button are how you act on what you are reading; having to scroll back up to
  reach them is what makes a long table tiring.

  Frosted rather than solid so the content passing underneath is still legible
  as motion — you can see you are scrolling, not that the page has frozen.
*/
.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: -20px -20px 0;
  padding: 14px 20px;
  background: var(--glass);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}

/* No blur available: fall back to an opaque bar rather than unreadable text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--surface); }
}

/* The page's name. Passed to the layout by every page, so it is stated once
   here instead of being repeated in each body. */
.topbar-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.search {
  position: relative;
  flex: 1 1 260px;
  min-width: 200px;
}

.search input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-sunken);
  color: var(--ink);
  font-size: 13px;
}

.search input::placeholder { color: var(--ink-muted); }
.search input:focus { outline: none; border-color: var(--brand); background: var(--surface); }

/* Matched on structure, not a class: the icon arrives from a Thymeleaf
   fragment, and a fragment replaces the element it is written on — any class
   put there is thrown away with it. */
.search > svg {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--ink-muted);
  pointer-events: none;
}

.search kbd {
  position: absolute;
  right: 9px; top: 50%;
  transform: translateY(-50%);
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-family: var(--font);
  font-size: 10.5px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-secondary);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
  white-space: nowrap;
}

.btn svg { width: 15px; height: 15px; }

/* The inverted pill, as on the web app: black on light, white on dark. The
   green is the accent, not the call to action. */
.btn-primary { background: var(--pill); color: var(--pill-ink); }
.btn-primary:hover { background: var(--pill-hover); }

.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink-secondary); }
.btn-ghost:hover { border-color: var(--line-strong); color: var(--ink); }

.btn-danger { background: var(--critical); color: #fff; }
.btn-danger:hover { filter: brightness(.93); }

.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------- grid */
.grid { display: grid; gap: 14px; }
.kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.row-3 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) minmax(0, 1fr); }
.row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

@media (max-width: 1100px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; }
  .kpi-row, .row-3, .row-4, .row-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ cards */
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-title { font-size: 14px; font-weight: 600; }
.card-sub { font-size: 12px; color: var(--ink-muted); }

.card-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.card-link:hover { color: var(--brand); border-color: var(--brand); }

/* ------------------------------------------------------- stat tiles */
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
}

.stat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-secondary);
}

/* Proportional figures on purpose: tabular digits look loose at this size. */
.stat-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.stat-delta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-muted);
}

.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
}

.delta-up   { color: var(--good); }
.delta-down { color: var(--critical); }
.delta svg  { width: 11px; height: 11px; }

.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--good-soft);
  color: var(--good);
  font-size: 10.5px;
  font-weight: 700;
}

.live-dot::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.stat-plot { margin-top: 4px; height: 56px; }
.stat-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ----------------------------------------------------------- charts */
.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.grid-line { stroke: var(--grid); stroke-width: 1; }
.axis-line { stroke: var(--line-strong); stroke-width: 1; }

.axis-text {
  fill: var(--ink-muted);
  font-size: 10.5px;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}

.mark-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mark-dot  { stroke: var(--surface); stroke-width: 2; }

/* Legends carry identity; text never wears the series colour. */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink-secondary);
}

.legend-swatch {
  width: 9px; height: 9px;
  border-radius: 3px;
  flex: none;
}

.legend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.legend-value {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.legend-share { color: var(--ink-muted); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

/* donut with the total in the middle */
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut { position: relative; width: 172px; height: 172px; flex: none; }
.donut svg { width: 100%; height: 100%; }

.donut-centre {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.donut-total { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.donut-caption { font-size: 11px; color: var(--ink-muted); }

/* funnel */
.funnel-stages { display: flex; gap: 6px; }
.funnel-stage { flex: 1; min-width: 0; }
.funnel-step { font-size: 11px; color: var(--ink-muted); }
.funnel-value { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }

.funnel-rate {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}

.funnel-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-sunken);
  font-size: 12.5px;
  font-weight: 600;
}

.funnel-total b { color: var(--brand); font-variant-numeric: tabular-nums; }

/* horizontal bar list */
.bar-list { display: flex; flex-direction: column; gap: 11px; }

.bar-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}

.bar-row-label { color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-sunken);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--series-1);
  min-width: 3px;
}

.bar-row-value {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* hexagonal health radar */
.health-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.health-chart { position: relative; width: 200px; height: 180px; flex: none; }

.health-centre {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.health-score { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.health-caption { font-size: 10px; color: var(--ink-muted); line-height: 1.25; }

/* insight card */
.insight {
  background: linear-gradient(150deg, var(--brand-softer), var(--brand-soft));
  border-color: transparent;
}

.insight-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
}

.insight-head svg { width: 17px; height: 17px; color: var(--brand); }
.insight-body { font-size: 13px; color: var(--ink-secondary); line-height: 1.55; }

.insight-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
}
.insight-link svg { width: 14px; height: 14px; flex: none; }

/* activity feed */
.feed { display: flex; flex-direction: column; }

.feed-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}

.feed-row:last-child { border-bottom: 0; }
.feed-text { min-width: 0; color: var(--ink-secondary); }
.feed-text b { color: var(--ink); font-weight: 600; }
.feed-time { flex: none; font-size: 11px; color: var(--ink-muted); }

/* ----------------------------------------------------------- tables */
/*
  Edge shadows so a clipped column reads as "there is more this way" rather
  than as the table simply ending. Painted against the card and scrolling with
  the content, so they appear only when something is actually hidden.
*/
.table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent),
    linear-gradient(to left, var(--surface) 30%, transparent) 100% 0,
    linear-gradient(to right, rgba(9, 9, 11, .09), transparent),
    linear-gradient(to left, rgba(9, 9, 11, .09), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

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

table.data th {
  padding: 0 12px 10px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

table.data td {
  padding: 11px 12px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}

table.data tbody tr:hover { background: var(--surface-sunken); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.strong { font-weight: 600; }
.cell-sub { display: block; font-size: 11.5px; color: var(--ink-muted); }

.empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}

/* --------------------------------------------------- status & pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* Every status pill pairs its colour with an icon and a word, so the state
   never depends on hue alone. */
.pill svg { width: 11px; height: 11px; flex: none; }

.pill-good     { background: var(--good-soft);     color: var(--good); }
.pill-warning  { background: var(--warning-soft);  color: #8a6100; }
.pill-serious  { background: var(--serious-soft);  color: #a8451c; }
.pill-critical { background: var(--critical-soft); color: var(--critical); }
.pill-neutral  { background: var(--neutral-soft);  color: var(--ink-secondary); }
.pill-brand    { background: var(--brand-soft);    color: var(--brand); }

:root[data-theme="dark"] .pill-warning { color: var(--warning); }
:root[data-theme="dark"] .pill-serious { color: var(--serious); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill-warning { color: var(--warning); }
  :root:not([data-theme="light"]) .pill-serious { color: var(--serious); }
}

.score {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.usage-cell { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.usage-track { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.usage-fill { height: 100%; border-radius: 999px; }
.usage-value { font-size: 12px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ forms */
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }

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

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-secondary); }
.field-hint { font-size: 11.5px; color: var(--ink-muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
}

.field textarea { min-height: 110px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.switch-row:last-child { border-bottom: 0; }
.switch-label { font-size: 13px; font-weight: 600; }
.switch-hint { font-size: 11.5px; color: var(--ink-muted); }

.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background .16s ease;
  pointer-events: none;
}

.switch span::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .16s ease;
}

.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ----------------------------------------------------------- alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 11px;
  font-size: 13px;
  line-height: 1.5;
}

.alert svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.alert-good     { background: var(--good-soft);     color: var(--good); }
.alert-critical { background: var(--critical-soft); color: var(--critical); }
.alert-warning  { background: var(--warning-soft);  color: #8a6100; }
.alert-info     { background: var(--brand-soft);    color: var(--brand); }

/* ------------------------------------------------------- pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.pagination .pages { display: flex; gap: 6px; }

.page-link {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 600;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}

.page-link:hover { border-color: var(--brand); color: var(--brand); }
.page-link[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.page-link.disabled { opacity: .4; pointer-events: none; }

/* ----------------------------------------------------------- filter */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.filters .field { min-width: 160px; }

/* --------------------------------------------------------- tooltips */
.viz-tooltip {
  position: fixed;
  z-index: 60;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 10px));
  transition: opacity .1s ease;
  box-shadow: var(--shadow-lg);
}

.viz-tooltip[data-show="true"] { opacity: 1; }
.viz-tooltip b { font-weight: 700; }
.viz-tooltip .tt-label { display: block; opacity: .75; font-size: 11px; }

/* Hit targets are always larger than the mark they belong to. */
.hit { fill: transparent; cursor: pointer; }

/* ------------------------------------------------------ table view */
.table-view-toggle {
  align-self: flex-start;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.table-view-toggle:hover { color: var(--brand); border-color: var(--brand); }
.table-view table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table-view th, .table-view td { padding: 6px 8px; text-align: left; border-top: 1px solid var(--line); }
.table-view th { color: var(--ink-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.table-view td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- auth pages */
.auth-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 30px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head .brand-mark { margin: 0 auto 14px; width: 44px; height: 44px; }
.auth-head h1 { font-size: 19px; margin-bottom: 4px; }
.auth-head p { margin: 0; font-size: 13px; color: var(--ink-muted); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-footer { margin-top: 18px; text-align: center; font-size: 12px; color: var(--ink-muted); }

.code-input {
  letter-spacing: .55em;
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding-left: .55em;
}

.qr-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}

.qr-panel img { width: 180px; height: 180px; border-radius: 10px; }

.secret {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12.5px;
  word-break: break-all;
  text-align: center;
}

/* --------------------------------------------------------- sections */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.page-title { font-size: 19px; letter-spacing: -.02em; }
.page-sub { font-size: 13px; color: var(--ink-muted); margin: 0 0 18px; max-width: 78ch; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

details.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}

details.panel > summary {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  background: var(--surface-sunken);
}

details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::after { content: " +"; color: var(--ink-muted); }
details.panel[open] > summary::after { content: " −"; }
details.panel > .panel-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; font-size: 13px; }
.kv dt { color: var(--ink-muted); }
.kv dd { margin: 0; word-break: break-word; }

pre.payload {
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  background: var(--surface-sunken);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  overflow-x: auto;
}

@media print {
  .sidebar, .topbar, .page-actions, .table-view-toggle { display: none; }
  .shell { grid-template-columns: 1fr; padding: 0; }
  .main { box-shadow: none; }
}

/* ------------------------------------------------------------- tabs */
/*
  Sections of one subject, rather than separate destinations in the sidebar.
  Moving related views onto tabs is what took the console from eighteen
  sidebar entries down to twelve without removing a single screen.
*/
.tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 18px;
  padding: 3px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ink-secondary);
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.tab:hover { color: var(--ink); }
.tab.is-current {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.tab-count {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--neutral-soft);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.tab.is-current .tab-count { background: var(--brand-soft); color: var(--brand); }

/* -------------------------------------------------------- providers */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.provider { display: flex; flex-direction: column; gap: 14px; }
.provider-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }

.provider-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--ink-muted);
}

.provider-form { display: flex; flex-direction: column; gap: 12px; }
.provider-actions { display: flex; gap: 8px; }
.provider-check { margin: 0; font-size: 11.5px; color: var(--ink-muted); }

/* Marks a secret that already has a value behind it. */
.field-flag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--good-soft);
  color: var(--good);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.page-note {
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
  max-width: 70ch;
}

/* A compact block of on/off options, for forms that set several at once. */
.switch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 4px 18px;
  padding: 10px 0;
}
.switch-grid .switch-row { border-bottom: 0; padding: 5px 0; cursor: pointer; }

/* ------------------------------------------- tables on a narrow screen */
/*
  Below this width every row becomes its own card and each cell states what it
  is, taken from its `data-label`. Scrolling a nine-column table sideways on a
  phone is not usable, and an operator dealing with an incident is as likely to
  be holding a phone as sitting at a desk.
*/
@media (max-width: 900px) {
  .table-wrap {
    overflow-x: visible;
    background: none;
  }

  table.data,
  table.data thead,
  table.data tbody,
  table.data tr,
  table.data td {
    display: block;
    width: auto;
  }

  /* The header row says nothing once every cell carries its own label. */
  table.data thead { display: none; }

  table.data tbody tr {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin: 0 0 10px;
    padding: 2px 0;
  }
  table.data tbody tr:hover { background: var(--surface-sunken); }

  table.data tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 13px;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }
  table.data tbody tr td:last-child { border-bottom: 0; }

  table.data tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  /* The identifying cell is the card's heading: full width, no label. */
  table.data tbody td.strong {
    display: block;
    padding-top: 12px;
  }
  table.data tbody td.strong::before { content: none; }

  /* A cell with nothing to show would otherwise render as a stray label. */
  table.data tbody td:empty { display: none; }

  table.data td.num { text-align: right; }
}

/* A tab can be a link between pages or a button switching panels in place;
   both look the same, because to the operator they do the same thing. */
button.tab {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* Sticky column headings, so a long table still says what each column is. */
table.data thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}
@media (max-width: 900px) {
  table.data thead th { position: static; }
}

.empty {
  padding: 26px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
}

/* --------------------------------------------------- theme switcher */
/*
  For pages with no sidebar to hold the switch. Fixed to the corner so it is in
  the same place on sign-in, on the code screen and on the error page.

  It shows the theme it will switch *to*, not the one you are in: a moon on a
  light page, a sun on a dark one. A control that pictures the current state
  reads as a status light and gets ignored.
*/
.theme-float {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-secondary);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.theme-float:hover { color: var(--ink); border-color: var(--line-strong); }

/* Light: offer the moon. */
.theme-float svg:first-of-type { display: none; }
.theme-float svg:last-of-type  { display: block; }

/* Dark: offer the sun. Both the stamped choice and the system default. */
:root[data-theme="dark"] .theme-float svg:first-of-type { display: block; }
:root[data-theme="dark"] .theme-float svg:last-of-type  { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-float svg:first-of-type { display: block; }
  :root:not([data-theme="light"]) .theme-float svg:last-of-type  { display: none; }
}

/* ------------------------------------------------- row action menus */
.row-actions { text-align: right; }

.row-menu { position: relative; display: inline-block; }

.dots {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}
.dots:hover { background: var(--surface-sunken); border-color: var(--line); color: var(--ink); }
.dots[aria-expanded="true"] { background: var(--surface-sunken); border-color: var(--line-strong); color: var(--ink); }

.row-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 208px;
  padding: 5px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  text-align: left;
}

/* Links and form buttons are different elements doing the same job, so they
   are given the same shape here rather than in each template. */
.row-menu-panel a,
.row-menu-panel button {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-secondary);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.row-menu-panel a:hover,
.row-menu-panel button:hover { background: var(--surface-sunken); color: var(--ink); }
.row-menu-panel button.danger { color: var(--critical); }
.row-menu-panel button.danger:hover { background: var(--critical-soft); }
.row-menu-panel form { margin: 0; }

/* On a narrow screen the row is a card, so the menu belongs with the rest. */
@media (max-width: 900px) {
  table.data tbody td.row-actions { justify-content: flex-end; }
  table.data tbody td.row-actions::before { content: "Actions"; }
  .row-menu-panel { right: 0; left: auto; }
}

/* ------------------------------------------------------------ modals */
/*
  Edits happen here rather than in a panel unfolded beneath the table: an
  inline editor pushes every row below it down, so the record you are working
  on moves the instant you decide to change it.
*/
.modal {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.modal::backdrop {
  background: rgba(9, 9, 11, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; font-size: 15px; font-weight: 600; }

.modal-body { display: flex; flex-direction: column; gap: 14px; padding: 18px; }

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-sunken);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* A value the dialog states rather than asks for — who the key is for, which
   key is being edited. Shaped like a field so the form reads as one column. */
.modal-fact {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: 13px;
}
.modal-fact .cell-sub { display: block; }

.modal-body textarea {
  padding: 9px 11px;
  border: 1px solid var(--field-line, var(--line-strong));
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  resize: vertical;
}
.modal-body textarea:focus { outline: none; border-color: var(--brand); }

/* --------------------------------------------- approvals in the topbar */
.topbar-approvals { position: relative; }

/* The count sits on the icon rather than beside it: the number is the reason
   to look, and it has to survive being seen out of the corner of an eye. */
.topbar-approvals .count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--critical);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.topbar-approvals[aria-current="page"] { color: var(--brand); border-color: var(--brand); }

/* A machine-made reference: one unbreakable token, so it cannot wrap into a
   three-line column and push the amount out of sight. */
.ref {
  display: inline-block;
  max-width: 26ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
}

/* ------------------------------------------------- customer picker */
.picker { position: relative; }

.picker-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 16px);
  z-index: 40;
  max-height: 288px;
  overflow-y: auto;
  padding: 5px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.picker-row {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.picker-row:hover,
.picker-row:focus { background: var(--surface-sunken); outline: none; }
.picker-row b { display: block; font-size: 13px; font-weight: 600; }

.picker-empty { margin: 0; padding: 10px; font-size: 12.5px; color: var(--ink-muted); }

/* ------------------------------------------- subscription corrections */
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card-actions form { margin: 0; }

/* A card's controls drop under its title when there is no room beside it,
   rather than pushing the card wider than the screen. */
.card-head { flex-wrap: wrap; }

/* Plan and money on one line: the two things checked first. */
.sub-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 14px;
}
.sub-plan-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sub-plan-name { font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.sub-plan .cell-sub { margin-top: 3px; font-size: 12.5px; }
.sub-price { text-align: right; }
.sub-price b { display: block; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* The paid period as a line from purchase to expiry, filled as far as today.
   The dates are the part people correct, so they sit at either end in full;
   the fill only says roughly where in the period the customer is, and the
   words under it say it exactly. */
.sub-period {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 18px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.sub-period-edge b { display: block; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sub-period-end { text-align: right; }
.sub-period-track { display: grid; gap: 6px; justify-items: center; min-width: 0; }

.sub-meter {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.sub-meter span {
  display: block;
  height: 100%;
  min-width: 6px;
  border-radius: 999px;
  background: var(--brand);
}
.sub-period-ending_soon .sub-meter span { background: var(--warning); }
.sub-period-expired .sub-meter span { background: var(--serious); }
.sub-period-cancelled .sub-meter span,
.sub-period-suspended .sub-meter span,
.sub-period-pending .sub-meter span { background: var(--ink-muted); }

.sub-headline { font-size: 12.5px; font-weight: 600; color: var(--ink-secondary); text-align: center; }

@media (max-width: 560px) {
  .sub-period {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "start end" "track track";
  }
  .sub-period-edge:first-child { grid-area: start; }
  .sub-period-end { grid-area: end; }
  .sub-period-track { grid-area: track; }
  .sub-price { text-align: left; }
}

.sub-history {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.sub-history-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sub-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sub-history-list > li {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.sub-history-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.sub-history-reason { margin: 6px 0 0; font-size: 13px; color: var(--ink-secondary); }
.sub-history-summary { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-secondary); }
.sub-history-changes {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--ink-secondary);
}
.sub-history-changes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.sub-change-label { min-width: 110px; color: var(--ink-muted); }
@media (max-width: 560px) {
  /* The field name on its own line, so "old → new" never breaks in the middle. */
  .sub-change-label { flex-basis: 100%; }
}

/* Several lines in one table cell kept together as one block, so the phone
   card layout (one label, one value per row) does not spread them apart. */
.cell-stack { display: block; }
@media (max-width: 900px) {
  table.data tbody td .cell-stack { text-align: right; }
}
.sub-change-from { text-decoration: line-through; text-decoration-color: var(--ink-muted); }
.sub-change-arrow { color: var(--ink-muted); }
.sub-history-changes b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* A payment's correction note: it can run to several lines, so it wraps
   rather than stretching the reference column. */
.payment-note { display: block; max-width: 34ch; white-space: pre-line; }

/* Wider dialogs lay their fields out in two columns. */
.modal-wide { width: min(620px, calc(100vw - 32px)); }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.modal-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .modal-grid { grid-template-columns: 1fr; }
}

.modal-text { margin: 0; font-size: 13px; color: var(--ink-secondary); line-height: 1.55; }

.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; cursor: pointer; }
.check-row input { margin-top: 3px; }
.check-row .cell-sub { display: block; margin-top: 2px; }

/* ================================================================ plans */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
}
.back-link svg { width: 13px; height: 13px; transform: rotate(180deg); }
.back-link:hover { color: var(--ink); }

.field-error { margin: 0; font-size: 12px; font-weight: 500; color: var(--critical); }
.has-error input:not([type="checkbox"]) { border-color: var(--critical); }
.field-aside { margin-left: 6px; font-weight: 400; color: var(--ink-muted); }
.field label .field-aside[data-count-for] { float: right; margin: 0; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- summary strip */
.plans-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.plans-summary-item { display: grid; gap: 4px; padding: 14px 18px; min-width: 0; }
.plans-summary-item + .plans-summary-item { border-left: 1px solid var(--line); }
.plans-summary-label { font-size: 12px; color: var(--ink-muted); }
.plans-summary-value { font-size: 13px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plans-summary-value b { font-size: 20px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
@media (max-width: 900px) {
  .plans-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-summary-item:nth-child(3) { border-left: 0; }
  .plans-summary-item:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------------ plan cards */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
  transition: border-color .15s ease;
}
.plan-card:hover { border-color: var(--line-strong); }
.plan-card.is-off-sale { background: transparent; border-style: dashed; }
.plan-card.is-off-sale .plan-price b,
.plan-card.is-off-sale h2 { color: var(--ink-secondary); }

.plan-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.plan-card-title { min-width: 0; }
.plan-card-title h2 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.plan-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
}
.plan-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ink-muted); opacity: .6; }
.plan-dot.is-on { background: var(--good); opacity: 1; box-shadow: 0 0 0 3px var(--good-soft); }
.plan-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.plan-tag.is-custom { background: var(--neutral-soft); color: var(--ink-secondary); }
.plan-price.is-custom b { font-size: 20px; letter-spacing: -.015em; line-height: 1.25; }
.plan-custom-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-muted); }
.plan-custom-note b { font-weight: 600; color: var(--ink-secondary); }
.plan-tag {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 11px;
  font-weight: 600;
}

.plan-card-desc { margin: 10px 0 0; font-size: 13px; color: var(--ink-secondary); }

.plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.plan-price b { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.plan-price span { font-size: 12px; color: var(--ink-muted); }

.plan-cycles { display: flex; gap: 20px; margin: 10px 0 0; }
.plan-cycles > div { display: grid; gap: 2px; }
.plan-cycles dt { font-size: 11.5px; color: var(--ink-muted); }
.plan-cycles dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.plan-cycles em { margin-left: 4px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--good); }

.plan-limits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.plan-limits > div { padding: 9px 10px; text-align: center; }
.plan-limits > div + div { border-left: 1px solid var(--line); }
.plan-limits dt { font-size: 11px; color: var(--ink-muted); }
.plan-limits dd { margin: 2px 0 0; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.plan-limits dd.is-unlimited { font-size: 13px; line-height: 21px; }

.plan-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
}
.plan-card .plan-limits { margin-bottom: 0; }
.plan-meta { font-size: 12px; color: var(--ink-muted); }
.plan-card-actions { display: flex; align-items: center; gap: 2px; }

/* ------------------------------------------------------- feature matrix */
.plan-matrix { padding: 0; }
.plan-matrix > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.plan-matrix > summary::-webkit-details-marker { display: none; }
.plan-matrix > summary b { display: block; font-size: 14px; font-weight: 600; }
.plan-matrix > summary svg { width: 16px; height: 16px; color: var(--ink-muted); transition: transform .15s ease; }
.plan-matrix[open] > summary svg { transform: rotate(90deg); }
.plan-matrix > summary:hover b { color: var(--brand); }

.plan-matrix-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.plan-matrix-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.plan-matrix-table th,
.plan-matrix-table td { padding: 7px 18px; text-align: center; }
.plan-matrix-table thead th {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.plan-matrix-table th[scope="row"],
.plan-matrix-table thead th:first-child { text-align: left; font-weight: 500; min-width: 200px; }
.plan-matrix-table th[scope="row"] { color: var(--ink-secondary); cursor: help; }
.plan-matrix-table tbody tr:not(.plan-matrix-group):hover { background: var(--surface-sunken); }
.plan-matrix-table td { min-width: 90px; }
.plan-matrix-group th {
  padding-top: 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.matrix-yes svg { width: 15px; height: 15px; color: var(--good); vertical-align: middle; }
.matrix-no { color: var(--ink-muted); opacity: .5; }

/* ----------------------------------------------------------- plan editor */
.pe { display: grid; gap: 16px; padding-bottom: 64px; }

.pe-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pe-head .page-title { display: flex; align-items: center; gap: 10px; margin: 0; }
.pe-head .page-sub { margin: 4px 0 0; }
.pe-code {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pe-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.pe-main { display: grid; gap: 14px; min-width: 0; }
.pe-side { position: sticky; top: 84px; display: grid; gap: 12px; min-width: 0; }
@media (max-width: 1100px) {
  .pe-body { grid-template-columns: minmax(0, 1fr); }
  .pe-side { position: static; }
}

.pe-section { padding: 18px 20px 20px; gap: 14px; }
.pe-title { margin: 0; font-size: 14px; font-weight: 650; }
.pe-title-aside { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.pe-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pe-title-note { font-size: 12px; color: var(--ink-muted); }

.pe-grid { display: grid; gap: 12px 14px; }
.pe-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pe-span-2 { grid-column: span 2; }
.pe-span-3 { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .pe-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .pe-span-2, .pe-span-3 { grid-column: auto; }
}

.pe-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .pe-toggles { grid-template-columns: minmax(0, 1fr); } }
.pe-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  cursor: pointer;
}
.pe-toggle-text { display: grid; gap: 2px; min-width: 0; }
.pe-toggle-text b { font-size: 13px; font-weight: 600; }
.pe-toggle-text span { font-size: 12px; color: var(--ink-muted); }
.pe-toggle .field-error { color: var(--critical); }

/* Fixed prices or contact sales: a two-way switch, and only the matching panel. */
.pe-segment {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-sunken);
}
.pe-segment label { position: relative; cursor: pointer; }
.pe-segment input { position: absolute; opacity: 0; pointer-events: none; }
.pe-segment span {
  display: block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
  white-space: nowrap;
}
.pe-segment input:checked + span { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.pe-segment input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.pe-fixed-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pe-custom { display: none; gap: 12px; }
.pe-pricing:has([data-custom-pricing]:checked) .pe-custom { display: grid; }
.pe-pricing:has([data-custom-pricing]:checked) .pe-fixed { display: none; }
.pe-notice.is-shown { display: block; }

.plan-preview-custom { display: none; margin: 4px 0 0; font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.plan-preview-cta.is-contact { display: none; background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.pe:has([data-custom-pricing]:checked) .plan-preview-price,
.pe:has([data-custom-pricing]:checked) .plan-preview-cta:not(.is-contact) { display: none; }
.pe:has([data-custom-pricing]:checked) .plan-preview-custom { display: block; }
.pe:has([data-custom-pricing]:checked) .plan-preview-cta.is-contact { display: block; }

.pe-price input { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pe-price label { display: flex; align-items: center; gap: 6px; }
.pe-price-note { margin: 0; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pe-saving {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pe-saving:empty { display: none; }
.pe-saving.is-saving { background: var(--good-soft); color: var(--good); }
.pe-saving.is-dearer { background: var(--critical-soft); color: var(--critical); }

.pe-limit {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.pe-limit > label:first-child { font-size: 12.5px; font-weight: 600; color: var(--ink-secondary); }
.pe-limit input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pe-limit input[type="number"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pe-limit input[type="number"]:disabled { opacity: .4; }
.pe-limit.has-error { border-color: var(--critical); }
.pe-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-secondary); cursor: pointer; }
.pe-check input,
.pe-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); flex: none; }

.pe-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px 24px; }
.pe-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.pe-group legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 0 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pe-group-count { font-weight: 600; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.pe-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 -8px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.pe-option:hover { background: var(--surface-sunken); }
.pe-option input { margin-top: 2px; }
.pe-option-text { display: grid; gap: 1px; min-width: 0; }
.pe-option-text b { font-size: 13px; font-weight: 500; }
.pe-option-text span { font-size: 11.5px; color: var(--ink-muted); line-height: 1.4; }
.pe-option:has(input:checked) .pe-option-text b { font-weight: 600; }

.pe-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-chip { position: relative; cursor: pointer; }
.pe-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pe-chip > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-secondary);
  transition: background-color .12s, border-color .12s, color .12s;
}
.pe-chip svg { display: none; width: 13px; height: 13px; }
.pe-chip:hover > span { border-color: var(--ink-muted); color: var(--ink); }
.pe-chip input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.pe-chip input:checked + span svg { display: block; }
.pe-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.pe-notice {
  display: none;
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: 12.5px;
  color: var(--ink-secondary);
}
[data-roles-section].is-off .pe-notice { display: block; }
[data-roles-section].is-off .pe-chips { opacity: .5; }

.highlight-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.highlight-row { display: flex; align-items: center; gap: 8px; }
.highlight-grip {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.highlight-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.highlight-row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.highlight-tools { display: flex; flex: none; opacity: .55; transition: opacity .12s; }
.highlight-row:hover .highlight-tools,
.highlight-row:focus-within .highlight-tools { opacity: 1; }
.highlight-tools .icon-btn { width: 28px; height: 28px; }
.highlight-tools svg { width: 14px; height: 14px; }
.highlight-tools .icon-btn:disabled { opacity: .3; cursor: default; }
.pe-add { justify-self: start; }

/* The side column: the card as the website draws it, and who is on the plan. */
.pe-side-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.plan-preview {
  display: grid;
  gap: 12px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.plan-preview.is-featured { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.plan-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-preview h3 { margin: 0; font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.plan-preview-badge {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.plan-preview-desc { margin: -6px 0 0; font-size: 12.5px; color: var(--ink-secondary); overflow-wrap: anywhere; }
.plan-preview-desc:empty { display: none; }
.plan-preview-price { margin: 4px 0 0; display: flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--ink-muted); }
.plan-preview-price b { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan-preview-cta {
  padding: 8px;
  border-radius: 999px;
  background: var(--pill);
  color: var(--pill-ink);
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
}
.plan-preview-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 12.5px; color: var(--ink-secondary); }
.plan-preview-points:first-of-type { padding-top: 12px; border-top: 1px solid var(--line); }
.plan-preview-points:empty { display: none; }
.plan-preview-points li { position: relative; padding-left: 18px; overflow-wrap: anywhere; }
.plan-preview-points li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .42em;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

.pe-usage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.pe-usage > div { padding: 10px; text-align: center; }
.pe-usage > div + div { border-left: 1px solid var(--line); }
.pe-usage dt { font-size: 11px; color: var(--ink-muted); }
.pe-usage dd { margin: 2px 0 0; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }

.pe-side-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--ink-secondary); }
.pe-side-note svg { width: 14px; height: 14px; flex: none; color: var(--brand); }

/* Solid, so nothing shows through it, and only as wide as the form. */
.pe-savebar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 -2px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .5);
}
.pe-savebar-note { margin-right: auto; font-size: 12.5px; color: var(--ink-muted); }
.pe-savebar-note.is-dirty { color: var(--ink); font-weight: 600; }
.pe-savebar-note.is-dirty::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 999px;
  background: var(--warning);
  vertical-align: 1px;
}