/* Admin portal design system.

   After the Origin Financial reference: a near-black gallery room, a light
   serif for headlines (Newsreader standing in for Lyon Display at weight 300),
   Inter for the interface, and Roboto Mono in uppercase for labels and data.
   Saturated colour only appears as whole panels (one tone per rate-card
   family) and as the cyan data signal. The one primary action is white on
   black (black on white in the light theme).

   On top of the reference, surfaces have depth: panels are lit from above
   with a hairline highlight and a long soft shadow, fields are sunk, and the
   colour panels lean toward the pointer (admin.js adds .tilt).

   Dark is the reference palette. Light is the same room by day. data-theme on
   <html> pins one; without it the OS decides. Every admin page links this
   file; nothing else should set colours or type. */

:root {
  --bg: #ECECEE;
  --bg-deep: #E2E2E5;
  --ink: 15, 16, 17;            /* rgb triplet, so every shade is ink at an opacity */
  --paper: 245, 245, 247;
  --ink-100: rgb(var(--ink));
  --ink-70: rgba(var(--ink), 0.68);
  --ink-50: rgba(var(--ink), 0.5);
  --ink-30: rgba(var(--ink), 0.3);
  --ink-10: rgba(var(--ink), 0.09);
  --ink-5: rgba(var(--ink), 0.045);

  --panel: linear-gradient(165deg, #FFFFFF 0%, #F4F4F6 100%);
  --panel-solid: #FAFAFB;
  --panel-border: rgba(15, 16, 17, 0.07);
  --panel-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --panel-shadow: 0 1px 2px rgba(15, 16, 17, 0.06), 0 28px 56px -28px rgba(15, 16, 17, 0.28);
  --field-bg: #F7F7F8;
  --field-shadow: inset 0 1px 2px rgba(15, 16, 17, 0.08), inset 0 0 0 1px rgba(15, 16, 17, 0.06);

  --primary-bg: linear-gradient(180deg, #2B2C2E 0%, #0F1011 100%);
  --primary-hover: linear-gradient(180deg, #3A3B3E 0%, #18191B 100%);
  --on-primary: #FFFFFF;
  --primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 22px -10px rgba(15, 16, 17, 0.6);

  --signal: #00B3DD;            /* data: live status, good margins, chart lines */
  --signal-text: #00708F;
  --signal-wash: rgba(0, 179, 221, 0.12);
  --focus: #3D6FE0;
  --amber: #E9A23B;
  --amber-text: #8A5300;
  --amber-wash: rgba(233, 162, 59, 0.14);
  --red-text: #B3261E;
  --red-wash: rgba(220, 60, 50, 0.10);

  --atmos: rgba(64, 138, 193, 0.20);   /* the sky band at the top of every page */
  --glass: rgba(236, 236, 238, 0.72);
  --nav-bg: rgba(15, 16, 17, 0.84);
  --nav-ink: rgba(245, 245, 247, 0.66);

  --logo-filter: brightness(0) opacity(0.9);   /* the logo files are white */

  --serif: 'Newsreader', 'Lyon Display', Georgia, serif;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.455, .03, .515, .955);
  --spring: cubic-bezier(.2, .8, .2, 1);
  --gutter: 40px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1011;
    --bg-deep: #090A0B;
    --ink: 245, 245, 247;
    --paper: 15, 16, 17;
    --ink-70: rgba(var(--ink), 0.62);
    --panel: linear-gradient(165deg, #202123 0%, #141516 100%);
    --panel-solid: #18191B;
    --panel-border: rgba(255, 255, 255, 0.07);
    --panel-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 32px 64px -28px rgba(0, 0, 0, 0.85);
    --field-bg: #000000;
    --field-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    --primary-bg: linear-gradient(180deg, #FFFFFF 0%, #E2E2E6 100%);
    --primary-hover: linear-gradient(180deg, #FFFFFF 0%, #F0F0F3 100%);
    --on-primary: #000000;
    --primary-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 26px -10px rgba(255, 255, 255, 0.28);
    --signal-text: #4CCBEA;
    --signal-wash: rgba(0, 179, 221, 0.12);
    --focus: #6B9BFF;
    --amber-text: #FFC46B;
    --amber-wash: rgba(255, 196, 107, 0.10);
    --red-text: #FF8A80;
    --red-wash: rgba(255, 122, 110, 0.10);
    --atmos: rgba(26, 71, 136, 0.30);
    --glass: rgba(15, 16, 17, 0.62);
    --nav-bg: rgba(40, 41, 44, 0.62);
    --logo-filter: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1011;
  --bg-deep: #090A0B;
  --ink: 245, 245, 247;
  --paper: 15, 16, 17;
  --ink-70: rgba(var(--ink), 0.62);
  --panel: linear-gradient(165deg, #202123 0%, #141516 100%);
  --panel-solid: #18191B;
  --panel-border: rgba(255, 255, 255, 0.07);
  --panel-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 32px 64px -28px rgba(0, 0, 0, 0.85);
  --field-bg: #000000;
  --field-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --primary-bg: linear-gradient(180deg, #FFFFFF 0%, #E2E2E6 100%);
  --primary-hover: linear-gradient(180deg, #FFFFFF 0%, #F0F0F3 100%);
  --on-primary: #000000;
  --primary-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 26px -10px rgba(255, 255, 255, 0.28);
  --signal-text: #4CCBEA;
  --signal-wash: rgba(0, 179, 221, 0.12);
  --focus: #6B9BFF;
  --amber-text: #FFC46B;
  --amber-wash: rgba(255, 196, 107, 0.10);
  --red-text: #FF8A80;
  --red-wash: rgba(255, 122, 110, 0.10);
  --atmos: rgba(26, 71, 136, 0.30);
  --glass: rgba(15, 16, 17, 0.62);
  --nav-bg: rgba(40, 41, 44, 0.62);
  --logo-filter: none;
  color-scheme: dark;
}

/* Colour panels: one tone per rate-card family, the same in both themes,
   drawn from the AMZ Prep palette the builder uses (mint #8EE0C8, blue
   #6B9BFF, navy #0B1224). Each is lit from the top-left and casts a glow of
   its own colour. Text on them is dark navy (white only on Navy) so 13 px
   captions stay readable. */
.tone-1 { --tone: #8EE0C8; --tone-hi: #B2EDDC; --tone-lo: #62C9AB; --tone-ink: 4, 18, 28; }   /* Mint */
.tone-2 { --tone: #6B9BFF; --tone-hi: #92B6FF; --tone-lo: #4A7CEB; --tone-ink: 4, 14, 38; }   /* Blue */
.tone-3 { --tone: #1C2F5E; --tone-hi: #2B4482; --tone-lo: #0F1B3A; --tone-ink: 242, 245, 250; } /* Navy */
.tone-4 { --tone: #4FBF97; --tone-hi: #74D3B1; --tone-lo: #33A07B; --tone-ink: 3, 22, 18; }   /* Deep mint */
.tone-5 { --tone: #BCD2FF; --tone-hi: #D8E5FF; --tone-lo: #98B7F5; --tone-ink: 6, 18, 44; }   /* Ice blue */

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-100);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; flex-direction: column;   /* main grows, so the footer sits at the bottom */
}
/* The sky band: a cool horizon behind the top of every page. */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: 620px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--atmos) 0%, transparent 100%);
}
::selection { background: rgba(107, 155, 255, 0.35); }
a { color: inherit; }
img { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Three voices: serif for statements, sans for the interface, mono for data. */
h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--serif); font-weight: 300; margin: 0; letter-spacing: -0.01em;
  font-optical-sizing: auto;
}
h1, .h1 { font-size: 64px; line-height: 0.95; }
h2, .h2 { font-size: 34px; line-height: 1; }
h3, .h3 { font-size: 24px; line-height: 1.1; }
h1 em, .display em, h2 em { font-style: italic; }
.display { font-family: var(--serif); font-weight: 300; font-size: 80px; line-height: 0.95; letter-spacing: -0.015em; margin: 0; }
h4, .h4, h5, .h5 { font-family: var(--font); font-weight: 500; margin: 0; }
h4, .h4 { font-size: 16px; line-height: 1.3; }
h5, .h5 { font-size: 14px; line-height: 1.3; }
p { margin: 0; }
.lede { font-size: 18px; font-weight: 300; line-height: 1.5; max-width: 600px; color: var(--ink-70); }
.muted { color: var(--ink-50); }
.soft { color: var(--ink-70); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.label, .eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-50);
}
code { font-family: var(--mono); font-size: 12px; background: var(--ink-5); padding: 1px 6px; border-radius: 4px; }

.logo { filter: var(--logo-filter); }

/* A raised surface: lit edge on top, long shadow below. */
.panel, .tw, .block, .stat, .notice, .solo-card, dialog.sheet, .save-bar {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-hi), var(--panel-shadow);
}

/* ---------- Shell ---------- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 14px var(--gutter);
  background: var(--glass);
  border-bottom: 1px solid var(--panel-border);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 20px; min-width: 0; }
.topbar-right { justify-content: flex-end; gap: 18px; }
.topbar-left { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-70); }
.topbar-left .clock { font-variant-numeric: tabular-nums; color: var(--ink-50); }
.topbar .brand { display: flex; justify-content: center; }
.topbar .brand img { height: 20px; width: auto; }
.topbar-link {
  font-size: 14px; text-decoration: none; color: var(--ink-100);
  background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap;
  transition: color .2s ease;
}
.topbar-link:hover, .topbar-link.active { color: var(--ink-70); }
.topbar-link.dim { color: var(--ink-50); }
.topbar-link.dim:hover { color: var(--ink-100); }
.theme-btn {
  width: 30px; height: 30px; display: inline-grid; place-items: center;
  border: 1px solid var(--panel-border); background: var(--panel); cursor: pointer; border-radius: 8px;
  color: var(--ink-70); box-shadow: var(--panel-hi), 0 1px 2px rgba(0,0,0,.2);
  transition: color .2s ease;
}
.theme-btn:hover { color: var(--ink-100); }
.theme-btn svg { width: 14px; height: 14px; }

.page { flex: 1 0 auto; width: 100%; padding: 72px var(--gutter) 120px; max-width: 1360px; margin: 0 auto; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.page-head .lede { margin-top: 24px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Pages settle in: the headline first, then each block a beat later. */
.page > * { animation: rise .9s var(--ease) both; }
.page > *:nth-child(2) { animation-delay: .08s; }
.page > *:nth-child(3) { animation-delay: .16s; }
.page > *:nth-child(n+4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.site-foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  /* 40px below puts the text on the same line as the floating nav. */
  width: 100%; padding: 0 var(--gutter) 40px; max-width: 1360px; margin: 0 auto;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50);
}
.site-foot a { text-decoration: none; color: var(--ink-70); }
.site-foot a:hover { color: var(--ink-100); }
.site-foot .group { display: flex; gap: 20px; flex-wrap: wrap; }

/* The floating glass bar: the only navigation. */
.pill-nav {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40;
  display: flex; gap: 2px; padding: 5px; max-width: calc(100vw - 32px);
  overflow-x: auto; scrollbar-width: none;
  background: var(--nav-bg); border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0,0,0,.25), 0 24px 48px -12px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
}
.pill-nav::-webkit-scrollbar { display: none; }
.pill-nav a {
  flex: none; padding: 9px 15px; border-radius: 9px; font-size: 14px;
  color: var(--nav-ink); text-decoration: none; white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.pill-nav a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.07); }
.pill-nav a.active {
  background: linear-gradient(180deg, #FFFFFF 0%, #E4E4E8 100%); color: #000000;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12), 0 4px 12px -4px rgba(255,255,255,.35);
}
.pill-nav .sep { flex: none; width: 1px; margin: 9px 3px; background: rgba(255, 255, 255, 0.16); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 8px; border: 1px solid transparent;
  font-size: 14px; font-weight: 400; line-height: 1.2; text-decoration: none;
  cursor: pointer; white-space: nowrap; background: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn svg { width: 14px; height: 14px; }
.btn-primary { background: var(--primary-bg); color: var(--on-primary); box-shadow: var(--primary-shadow); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary::after { content: "→"; font-family: var(--font); transition: transform .2s ease; }
.btn-primary:hover::after { transform: translateX(2px); }
.btn-secondary {
  border-color: var(--panel-border); color: var(--ink-100);
  background: var(--panel); box-shadow: var(--panel-hi), 0 1px 2px rgba(0,0,0,.18);
}
.btn-secondary:hover { border-color: var(--ink-30); }
.btn-ghost { color: var(--ink-70); padding-left: 12px; padding-right: 12px; }
.btn-ghost:hover { color: var(--ink-100); background: var(--ink-5); }
.btn-danger { border-color: var(--panel-border); color: var(--red-text); background: var(--panel); box-shadow: var(--panel-hi); }
.btn-danger:hover { background: var(--red-wash); border-color: transparent; }
.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn:focus-visible, .pill-nav a:focus-visible, .topbar-link:focus-visible, .tile:focus-visible,
.row-link:focus-visible, a:focus-visible > .card-plate {
  outline: 2px solid var(--focus); outline-offset: 3px;
}

.link {
  color: var(--ink-70); text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0;
  font-size: 13px; white-space: nowrap; transition: color .2s ease;
}
.link:hover { color: var(--ink-100); text-decoration: underline; text-underline-offset: 3px; }
.link.good { color: var(--signal-text); }
.link.bad { color: var(--red-text); }

/* ---------- Status chips ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 9px; border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-70); white-space: nowrap;
  background: var(--ink-5); border: 1px solid var(--ink-10);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-30); flex: none; }
.badge-active::before, .badge-good::before { background: var(--signal); box-shadow: 0 0 0 3px var(--signal-wash), 0 0 8px var(--signal); }
.badge-active, .badge-good { color: var(--ink-100); }
.badge-expired::before, .badge-warn::before { background: var(--amber); }
.badge-archived, .badge-off { color: var(--ink-50); }
.badge-archived::before, .badge-off::before { background: transparent; border: 1px solid var(--ink-30); }

/* ---------- Notices ---------- */

.notice { position: relative; padding: 18px 20px 18px 24px; border-radius: 12px; margin-bottom: 24px; overflow: hidden; }
.notice::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink-30); }
.notice h5 { margin-bottom: 4px; }
.notice p { font-size: 13px; color: var(--ink-70); line-height: 1.6; }
.notice.warn { background: linear-gradient(var(--amber-wash), var(--amber-wash)), var(--panel); }
.notice.warn::before { background: var(--amber); }
.notice.info { background: linear-gradient(var(--signal-wash), var(--signal-wash)), var(--panel); }
.notice.info::before { background: var(--signal); }
.notice.bad { background: linear-gradient(var(--red-wash), var(--red-wash)), var(--panel); color: var(--red-text); }
.notice.bad::before { background: var(--red-text); }

/* ---------- Stats ---------- */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 64px; }
.stat { padding: 22px 24px 20px; border-radius: 16px; min-width: 0; }
.stat .label { margin-bottom: 14px; }
.stat .value {
  font-family: var(--serif); font-weight: 300; font-size: 48px; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums;
}
.stat .detail { margin-top: 10px; font-size: 13px; color: var(--ink-50); min-height: 1.5em; }
.stat .value.good { color: var(--signal-text); }

/* ---------- Sections ---------- */

.section { margin-top: 80px; }
.section:first-child { margin-top: 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.section-head p { font-size: 13px; color: var(--ink-50); }

/* ---------- Tables ---------- */

.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; padding: 6px 24px 8px; }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.data th {
  text-align: left; font-family: var(--mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50);
  padding: 16px 16px 12px 0; border-bottom: 1px solid var(--ink-10); white-space: nowrap;
}
table.data td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--ink-10); vertical-align: top; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data th:last-child, table.data td:last-child { padding-right: 0; }
table.data .r { text-align: right; }
table.data tr.row-link { cursor: pointer; }
table.data tr.row-link td { transition: background-color .2s ease; }
table.data tr.row-link:hover td { background: var(--ink-5); }
table.data tr.row-link td:first-child { box-shadow: -14px 0 0 transparent; }
table.data tr.row-link:hover td:first-child { box-shadow: -14px 0 0 var(--ink-5); }
table.data tr.row-link:hover td:last-child { box-shadow: 14px 0 0 var(--ink-5); }
table.data .primary { font-weight: 500; }
table.data .sub { font-size: 13px; color: var(--ink-50); }
.cell-actions { display: flex; gap: 14px; justify-content: flex-end; }

.empty { padding: 72px 0; text-align: center; }
.empty h4 { font-family: var(--serif); font-weight: 300; font-size: 28px; margin-bottom: 8px; }
.empty p { color: var(--ink-50); font-size: 13px; }

/* ---------- Forms: fields are sunk into the surface ---------- */

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field > label, .field-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50);
}
.input, .select, .textarea {
  width: 100%; padding: 11px 14px; font-size: 14px;
  background: var(--field-bg); border: 1px solid transparent; border-radius: 8px;
  box-shadow: var(--field-shadow);
  color: var(--ink-100); outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-30); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--focus);
  box-shadow: var(--field-shadow), 0 0 0 4px rgba(107, 155, 255, 0.22);
}
.input[readonly] { color: var(--ink-70); }
.select {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23888' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.select option { background: var(--panel-solid); color: var(--ink-100); }
.textarea { resize: vertical; min-height: 84px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-70); cursor: pointer; user-select: none; white-space: nowrap; }
.check input { accent-color: #6B9BFF; width: 15px; height: 15px; margin: 0; }

.toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.toggle span {
  position: absolute; inset: 0; background: var(--field-bg); border-radius: 999px;
  box-shadow: var(--field-shadow); transition: background .25s ease;
}
.toggle span::before {
  content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
  background: linear-gradient(180deg, #FFFFFF, #DCDCE0); border-radius: 50%;
  transition: transform .25s var(--spring);
  box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.25);
}
.toggle input:checked + span { background: linear-gradient(180deg, #A6EBD6, #62C9AB); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
.toggle input:checked + span::before { transform: translateX(18px); }
.toggle input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ink-10); }
.toggle-row:first-child { border-top: 1px solid var(--ink-10); }
.toggle-row .sub { font-size: 13px; color: var(--ink-50); }

/* Segmented control: a sunk track with a raised thumb. */
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--field-bg); box-shadow: var(--field-shadow); border-radius: 10px; }
.segmented button {
  border: 0; background: none; padding: 7px 14px; border-radius: 7px; cursor: pointer;
  font-size: 13px; color: var(--ink-70); transition: color .2s ease;
}
.segmented button:hover { color: var(--ink-100); }
.segmented button[aria-pressed="true"] {
  background: var(--panel); color: var(--ink-100);
  box-shadow: var(--panel-hi), 0 1px 2px rgba(0,0,0,.25), 0 4px 10px -4px rgba(0,0,0,.35);
}

/* ---------- Toolbar ---------- */

.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.toolbar .search { flex: 1 1 280px; min-width: 200px; position: relative; }
.toolbar .search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ink-50); pointer-events: none; z-index: 1; }
.toolbar .search .input { padding-left: 38px; }
.toolbar .select { width: auto; min-width: 150px; }

/* ---------- Split detail layout ---------- */

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.split-aside { position: sticky; top: 100px; }
.split-aside .lede { margin-top: 24px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 22px 36px; margin-top: 40px; }
.facts.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fact .label { margin-bottom: 4px; }
.fact .v { font-size: 14px; }
.fact .v div + div { margin-top: 2px; }
.aside-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.next-link {
  display: block; margin-top: 56px; padding: 20px 22px; text-decoration: none; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-hi), var(--panel-shadow);
  transition: transform .3s var(--spring);
}
.next-link .label { margin-bottom: 6px; }
.next-link:hover { transform: translateY(-3px); }
.next-link .h3::after { content: " →"; font-family: var(--font); font-size: 18px; color: var(--ink-50); }
details.more summary { cursor: pointer; color: var(--ink-50); list-style: none; margin-top: 2px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: " ↓"; }
details.more[open] summary { display: none; }
details.more div { margin-top: 2px; }
.back-link {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 28px; text-decoration: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50);
}
.back-link:hover { color: var(--ink-100); }

.block { padding: 24px; border-radius: 16px; }
.block + .block { margin-top: 16px; }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.block-head .sub { font-size: 13px; color: var(--ink-50); }

/* ---------- Colour panels: warehouse tiles and rate-card cards ---------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; perspective: 1200px; }
/* Graphite unless a .tone-N says otherwise (:where keeps this from outranking it). */
:where(.tile, .card-plate) { --tone: #2E2E2E; --tone-hi: #3A3A3C; --tone-lo: #1E1E20; --tone-ink: 245, 245, 247; }
.tile, .card-plate {
  --ink: var(--tone-ink);
  --ink-100: rgb(var(--tone-ink)); --ink-70: rgba(var(--tone-ink), 0.74);
  --ink-50: rgba(var(--tone-ink), 0.6); --ink-30: rgba(var(--tone-ink), 0.38);
  --ink-10: rgba(var(--tone-ink), 0.16); --ink-5: rgba(var(--tone-ink), 0.1);
  position: relative; color: var(--ink-100); text-decoration: none; isolation: isolate;
  background: linear-gradient(150deg, var(--tone-hi) 0%, var(--tone) 48%, var(--tone-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 30px 60px -28px var(--tone);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transform-style: preserve-3d;
  transition: transform .6s var(--spring), box-shadow .4s ease, filter .3s ease;
}
/* Glare that follows the pointer (set by admin.js). */
.tile::after, .card-plate::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, 0.38), transparent 55%);
  mix-blend-mode: soft-light; opacity: .55; transition: opacity .3s ease;
}
.tile:hover, a:hover > .card-plate { --lift: -6px; box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.2), 0 44px 80px -30px var(--tone); }
.tile:hover::after, a:hover > .card-plate::after { opacity: 1; }
.tilt.is-tilting { transition: transform .1s linear, box-shadow .4s ease; }

.tile {
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 4 / 3; padding: 24px; border-radius: 30px;
}
.tile > * { transform: translateZ(28px); }   /* text floats above the panel */
.tile .tile-top {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-70);
}
.tile .tile-name { font-family: var(--serif); font-weight: 300; font-size: 38px; letter-spacing: -0.015em; line-height: 0.95; }
.tile .tile-meta { margin-top: 10px; font-size: 13px; color: var(--ink-70); }
.tile .tile-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.tile .badge { background: rgba(var(--tone-ink), 0.08); border-color: rgba(var(--tone-ink), 0.16); }
.tile .badge-good::before, .tile .badge-active::before { background: rgb(var(--tone-ink)); box-shadow: none; }
.tile .muted { color: var(--ink-70); }
.tile.inactive { filter: saturate(0.15) brightness(0.8); }
.tile.inactive:hover { filter: saturate(0.5) brightness(0.9); }
/* The add tile isn't a colour panel: it keeps the page's own ink. */
.tile.add {
  --ink: inherit; --ink-100: inherit; --ink-70: inherit; --ink-50: inherit;
  --ink-30: inherit; --ink-10: inherit; --ink-5: inherit;
  align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  background: none; border: 1px dashed var(--ink-30); color: var(--ink-50); box-shadow: none; font-size: 14px;
}
.tile.add::after { display: none; }
.tile.add:hover { color: var(--ink-100); border-color: var(--ink-50); box-shadow: none; }
.tile.add .plus { font-family: var(--serif); font-size: 44px; font-weight: 300; line-height: 1; }

/* Cards: a colour panel with its caption underneath. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px 16px; perspective: 1200px; }
.cards > a { text-decoration: none; display: block; }
.card-plate {
  aspect-ratio: 5 / 3; padding: 22px; border-radius: 24px; display: flex; align-items: flex-end;
  font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.05; letter-spacing: -0.01em;
}
.card-caption { margin-top: 14px; font-size: 13px; color: var(--ink-70); line-height: 1.55; }

/* ---------- Rate card ---------- */

.rate-group + .rate-group { margin-top: 44px; }
.rate-group h4 { margin-bottom: 14px; font-family: var(--serif); font-weight: 300; font-size: 26px; letter-spacing: -0.01em; }
table.rates td { padding-top: 12px; padding-bottom: 12px; }
table.rates .unit { color: var(--ink-50); font-size: 13px; }
table.rates .input { width: 116px; text-align: right; padding: 8px 11px; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
table.rates .input.changed { border-color: #6B9BFF; box-shadow: var(--field-shadow), 0 0 0 3px rgba(107, 155, 255, 0.24); }
table.rates .neg { color: var(--red-text); }
table.rates .pos { color: var(--signal-text); }

.save-bar {
  position: sticky; bottom: 92px; z-index: 20; margin-top: 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 12px 12px 22px; border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.save-bar[hidden] { display: none; }
.save-bar .msg { font-size: 13px; color: var(--ink-70); }

/* ---------- Dialog ---------- */

dialog.sheet {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0;
  border-radius: 24px; color: var(--ink-100);
  background: var(--panel-solid);
  box-shadow: var(--panel-hi), 0 2px 6px rgba(0,0,0,.3), 0 60px 120px -30px rgba(0, 0, 0, 0.8);
}
dialog.sheet[open] { animation: sheet-in .35s var(--spring); }
dialog.sheet::backdrop { background: rgba(5, 6, 8, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@keyframes sheet-in {
  from { opacity: 0; transform: perspective(1000px) translateY(16px) rotateX(6deg) scale(.98); }
  to { opacity: 1; transform: none; }
}
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 30px 30px 0; }
.sheet-head h2, .sheet-head h3 { font-size: 32px; }
.sheet-head p { margin-top: 10px; font-size: 13px; color: var(--ink-50); }
.sheet-body { padding: 26px 30px; }
.sheet-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 30px 26px; border-top: 1px solid var(--ink-10); }
.close-x { border: 0; background: none; cursor: pointer; color: var(--ink-50); padding: 4px; line-height: 0; border-radius: 6px; }
.close-x:hover { color: var(--ink-100); background: var(--ink-5); }
.close-x svg { width: 18px; height: 18px; }
.steps { display: flex; gap: 6px; margin-bottom: 26px; }
.steps span { height: 3px; flex: 1; background: var(--ink-10); border-radius: 2px; transition: background .3s ease; }
.steps span.on { background: linear-gradient(90deg, #8EE0C8, #6B9BFF); }

/* ---------- Toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 8px); z-index: 60;
  padding: 11px 18px; font-size: 13px; background: var(--ink-100); color: rgb(var(--paper));
  border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .3s var(--spring);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.6);
  max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Single-column pages (sign in, invite, no access) ---------- */

.solo { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.solo-main { display: flex; align-items: center; justify-content: center; padding: 48px var(--gutter); perspective: 1400px; }
.solo-card {
  width: 100%; max-width: 440px; padding: 40px; border-radius: 24px;
  animation: card-in 1.2s var(--ease) both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(24px) rotateX(8deg); }
  to { opacity: 1; transform: none; }
}
.solo-card h1 { font-size: 52px; margin-bottom: 14px; }
.solo-card .lede { font-size: 16px; margin-bottom: 32px; }
.solo-card .btn { width: 100%; padding: 13px 16px; }
.solo-card .hint { font-size: 13px; color: var(--ink-50); margin-top: 18px; line-height: 1.55; }
.solo-foot {
  padding: 24px var(--gutter); display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50);
}
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-30); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin: 22px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--ink-10); }

/* ---------- Styleguide page ---------- */

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 28px 16px; }
.swatch .chip { aspect-ratio: 1; border-radius: 16px; border: 1px solid var(--panel-border); box-shadow: var(--panel-hi), var(--panel-shadow); }
.swatch .name { margin-top: 12px; font-size: 14px; }
.swatch .val { font-size: 13px; color: var(--ink-50); }
.type-row + .type-row { margin-top: 32px; }
.type-row .meta { margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .display { font-size: 64px; }
}
@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .split-aside { position: static; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .topbar { grid-template-columns: auto 1fr; padding-top: 12px; padding-bottom: 12px; }
  .topbar-left { display: none; }
  .topbar .brand { justify-content: flex-start; }
  .topbar-right { gap: 14px; }
  .topbar-right .hide-sm { display: none; }
  .page { padding-top: 40px; }
  .page-head { margin-bottom: 36px; }
  h1, .h1 { font-size: 44px; }
  h2, .h2 { font-size: 28px; }
  .display { font-size: 44px; }
  .lede { font-size: 16px; }
  .stats { gap: 8px; }
  .stat { padding: 16px 16px 14px; }
  .stat .value { font-size: 36px; }
  .tw { padding: 2px 16px 6px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .facts, .facts.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { aspect-ratio: auto; min-height: 190px; border-radius: 24px; }
  .tile .tile-name { font-size: 32px; }
  .solo-card { padding: 28px 22px; }
  .solo-card h1 { font-size: 40px; }
  .sheet-head, .sheet-body { padding-left: 20px; padding-right: 20px; }
  .sheet-foot { padding-left: 20px; padding-right: 20px; }
  .pill-nav { bottom: 16px; }
  .pill-nav a { padding: 8px 12px; }
  .save-bar { bottom: 80px; }
  .site-foot { padding-bottom: 96px; }   /* the nav spans the width here, so clear it */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .tile, .card-plate { transform: none !important; }
}