/* =======================================================================
   Redline Portal — visual system (v2, 2026-05-01)
   -----------------------------------------------------------------------
   Editorial-magazine register, dual-surface (brand + product). All tokens
   tinted toward warm paper. No pure black, no pure white. No gradient
   text, no glass, no neon, no bounce.
   See DESIGN.md at repo root for the full token contract.
   ======================================================================= */

/* Brand fonts now self-hosted in static/fonts/ via static/css/fonts.css.
   Each HTML head loads fonts.css before app.css so @font-face declarations
   are visible by the time the body renders. The old @import from
   fonts.googleapis.com is removed: no external CDN call, no third-party
   request leaking the visitor's IP to Google. */

:root {
  /* Ink ramp (warm-navy tinted) */
  --ink:        #0f1729;
  --ink-90:     #1a2238;
  --ink-70:     #334155;
  --ink-50:     #64748b;
  --ink-30:     #94a3b8;
  --ink-10:     #cbd5e1;
  --hairline:   #e2e5eb;

  /* Canvas ramp (warm-paper tinted) */
  --ivory:        #faf8f3;
  --ivory-raised: #ffffff;
  --shell:        #f4f1e9;
  --parchment:    #f0e8d6;
  --inkwell:      #08101f;

  /* Editorial accents */
  --oxford:        #1e3a5f;
  --oxford-hover:  #142744;
  --vermilion:      #c14a3a;
  --vermilion-soft: #f6e7e2;
  --vermilion-deep: #971f12;
  --ochre:        #c08a3a;
  --ochre-soft:   #f5e9d1;
  --moss:         #4e6b47;
  --moss-soft:    #e3ebda;

  /* Type stack */
  --ff-display: 'Fraunces', 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
  --ff-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (display fluid, UI fixed) */
  --fs-display-xl: clamp(48px, 6.2vw, 96px);
  --fs-display-l:  clamp(32px, 4vw, 56px);
  --fs-display-m:  clamp(22px, 2.4vw, 32px);
  --fs-display-s:  20px;
  --fs-ui-xs:   11px;
  --fs-ui-sm:   13px;
  --fs-ui-base: 14px;
  --fs-ui-lg:   16px;
  --fs-prose:   15.5px;

  /* Radii */
  --rad-sm: 4px;
  --rad-md: 6px;

  /* Motion */
  --dur-quick:  120ms;
  --dur-normal: 280ms;
  --dur-slow:   600ms;
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--ff-ui);
  font-size: var(--fs-ui-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss02", "cv11";
  text-rendering: optimizeLegibility;
}

a { color: var(--oxford); text-decoration: none; transition: color var(--dur-quick) var(--ease); }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* a11y: visible focus ring on every focusable thing */
:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip-to-content for screen reader and keyboard users */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--ivory);
  padding: 12px 18px;
  font-size: var(--fs-ui-sm);
  letter-spacing: 0.04em;
  z-index: 999;
}
.skip:focus { left: 12px; top: 12px; }

table, .tabular, .mono { font-feature-settings: "tnum", "lnum"; }
.mono { font-family: var(--ff-mono); font-size: 12px; }

h1, h2, h3, .display {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.display--xl { font-size: var(--fs-display-xl); line-height: 1.04; letter-spacing: -0.025em; }
.display--l  { font-size: var(--fs-display-l);  line-height: 1.1;  letter-spacing: -0.02em; }
.display--m  { font-size: var(--fs-display-m);  line-height: 1.2;  letter-spacing: -0.01em; }
.display--s  { font-size: var(--fs-display-s);  line-height: 1.25; }

.eyebrow {
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
  font-weight: 500;
}

.lede {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 18px;
  color: var(--ink-70);
  line-height: 1.5;
}

hr.hairline { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* ---------- Layout shell (admin chrome) ---------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }

.chrome {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  padding: 22px 48px 20px;
  border-bottom: 1px solid var(--hairline);
  background: var(--ivory-raised);
}

.chrome__brand { display: flex; align-items: baseline; gap: 14px; }
.chrome__brand .mark {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.chrome__brand .subbrand {
  color: var(--ink-50);
  font-size: var(--fs-ui-sm);
  letter-spacing: 0.02em;
}

.chrome__nav { display: flex; align-items: center; gap: 6px; }
.chrome__nav a {
  color: var(--ink-70);
  font-size: var(--fs-ui-sm);
  letter-spacing: 0.01em;
  padding: 7px 14px;
  border-radius: 999px;
  transition: color var(--dur-quick) var(--ease),
              background var(--dur-quick) var(--ease);
}
.chrome__nav a:hover { color: var(--ink); background: rgba(15, 23, 41, 0.05); text-decoration: none; }
/* Selection via inversion: one inverted element per view, the active nav. */
.chrome__nav a.active {
  background: var(--ink);
  color: var(--ivory);
}
.chrome__nav a.active:hover { background: var(--ink); color: var(--ivory); }

.chrome__identity { display: flex; align-items: baseline; gap: 14px; font-size: 12px; color: var(--ink-50); }
.chrome__identity form { display: inline; }
.chrome__identity button {
  background: none; border: 0; padding: 0; color: var(--oxford);
  font: inherit; cursor: pointer;
  transition: color var(--dur-quick) var(--ease);
}
.chrome__identity button:hover { color: var(--vermilion); text-decoration: underline; text-underline-offset: 3px; }

main {
  flex: 1 0 auto;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 48px 96px;
}

footer.foot {
  border-top: 1px solid var(--hairline);
  padding: 22px 48px;
  color: var(--ink-50);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  background: var(--ivory-raised);
}

/* ---------- Stats row (dashboard) ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--ivory-raised);
}

.stat { padding: 32px 32px 28px; border-right: 1px solid var(--hairline); position: relative; }
.stat:last-child { border-right: 0; }

.stat__label {
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
  font-weight: 500;
}
.stat__value {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 48px;
  line-height: 1;
  margin-top: 12px;
  color: var(--ink);
  font-feature-settings: "tnum", "onum";
  letter-spacing: -0.02em;
}
.stat__value--warn { color: var(--vermilion); }

/* ---------- Tables ---------- */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-ui-base);
}
table.data thead th {
  text-align: left;
  padding: 14px 0;
  border-bottom: 2px solid var(--ink);
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
table.data tbody td {
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
table.data tbody tr {
  transition: background var(--dur-quick) var(--ease);
}
table.data tbody tr:hover td { background: rgba(15, 23, 41, 0.025); }
table.data td + td, table.data th + th { padding-left: 24px; }
table.data .customer {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
}
table.data a.customer:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Status dots ---------- */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 8px;
}
.dot--active  { background: var(--moss); }
.dot--expired { background: var(--ochre); }
.dot--revoked { background: var(--vermilion); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-70);
}

/* ---------- Page header ---------- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}
.page-head h1 {
  font-size: clamp(36px, 4.5vw, 52px);
  line-height: 1.04;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.page-head .sub {
  margin-top: 10px;
  font-size: 15px;
  color: var(--ink-50);
  max-width: 56ch;
  line-height: 1.5;
}

/* ---------- Sections ---------- */
section.section { margin-top: 56px; }
section.section .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
section.section h2 {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
section.section .head .aside {
  font-size: 12px;
  color: var(--ink-50);
}

/* ---------- Forms ---------- */
.form { max-width: 640px; }
.form .row { margin-bottom: 24px; }
.form label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 8px;
  font-weight: 500;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="number"],
.form input[type="date"],
.form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--ink-10);
  border-radius: var(--rad-sm);
  font: inherit;
  color: var(--ink);
  background: var(--ivory-raised);
  transition: border-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--oxford);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

.form .help {
  font-size: 12px;
  color: var(--ink-50);
  margin-top: 6px;
  line-height: 1.5;
}

.form .errorlist {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  color: var(--vermilion);
  font-size: 12px;
}

.form .inline { display: flex; align-items: center; gap: 10px; }
.form .inline input[type="checkbox"] { accent-color: var(--oxford); width: 16px; height: 16px; }

ul.checklist {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
}
ul.checklist li { display: flex; align-items: center; gap: 10px; }
ul.checklist input[type="checkbox"] { accent-color: var(--oxford); width: 16px; height: 16px; }

/* ---------- Buttons ---------- */
.btn {
  appearance: none;
  border: 1px solid var(--ink-10);
  background: var(--ivory-raised);
  color: var(--ink);
  padding: 10px 20px;
  font: inherit;
  font-size: var(--fs-ui-sm);
  letter-spacing: 0.02em;
  border-radius: var(--rad-sm);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease),
              border-color var(--dur-quick) var(--ease),
              color var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease);
  text-decoration: none;
  display: inline-block;
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--oxford);
  color: #fff;
  border-color: var(--oxford);
}
.btn--primary:hover {
  background: var(--oxford-hover);
  border-color: var(--oxford-hover);
  color: #fff;
  text-decoration: none;
}

.btn--danger {
  background: transparent;
  color: var(--vermilion);
  border-color: var(--vermilion);
}
.btn--danger:hover {
  background: var(--vermilion);
  color: #fff;
  border-color: var(--vermilion);
  text-decoration: none;
}

.btn--ghost {
  border-color: transparent;
  color: var(--ink-70);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--ink-10); color: var(--ink); }

/* ---------- PDF loading overlay (3D document under a scan beam) ----------
   Shown while the server renders a licence PDF (WeasyPrint, ~1-2s). Reuses
   the landing hero's vocabulary: perspective, stacked sheets, a vermilion
   scan line sweeping the page. Pure CSS; honours reduced-motion. */
.pdf-loader {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--inkwell) 64%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 220ms var(--ease);
}
.pdf-loader.is-on { opacity: 1; }
.pdf-loader[hidden] { display: none; }
.pdf-loader__scene { text-align: center; perspective: 1200px; }
.pdf-loader__doc {
  position: relative; width: 168px; height: 224px; margin: 0 auto 30px;
  transform-style: preserve-3d;
  animation: pdfDocIdle 5.5s ease-in-out infinite alternate;
}
@keyframes pdfDocIdle {
  from { transform: rotateY(-19deg) rotateX(6deg) translateY(-4px); }
  to   { transform: rotateY(-11deg) rotateX(3deg) translateY(4px); }
}
.pdf-loader__sheet {
  position: absolute; inset: 0; border-radius: 8px; background: var(--ivory-raised);
  box-shadow: 0 1px 2px rgba(15,23,41,.06),
              0 16px 36px -12px rgba(15,23,41,.30),
              0 60px 110px -32px rgba(15,23,41,.42);
}
.pdf-loader__sheet--2 { transform: translate(9px, 8px) translateZ(-24px) rotateZ(1.2deg); background: #fbf9f4; }
.pdf-loader__sheet--3 { transform: translate(-7px, 15px) translateZ(-48px) rotateZ(-1.5deg); background: #f4f1e9; }
.pdf-loader__page { position: absolute; inset: 0; padding: 26px 22px; overflow: hidden; border-radius: 8px; }
.pdf-loader__line { display: block; height: 7px; border-radius: 3px; margin-bottom: 12px;
  background: linear-gradient(90deg, var(--ink-10), var(--ink-30)); }
.pdf-loader__line--short { width: 58%; }
.pdf-loader__beam {
  position: absolute; left: 0; right: 0; top: 0; height: 30px; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(193,74,58,0) 0%, rgba(193,74,58,.08) 38%, rgba(193,74,58,.14) 50%,
    rgba(193,74,58,.08) 62%, rgba(193,74,58,0) 100%);
  animation: pdfBeam 1.9s cubic-bezier(.4,0,.4,1) infinite;
}
.pdf-loader__beam::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 1.5px;
  background: var(--vermilion); opacity: .6; box-shadow: 0 0 10px rgba(193,74,58,.4);
}
@keyframes pdfBeam {
  0%   { transform: translateY(0);     opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(196px); opacity: 0; }
}
.pdf-loader__caption { font-family: var(--ff-display); font-weight: 400; font-size: 22px;
  letter-spacing: -.01em; color: var(--ivory); }
.pdf-loader__sub { font-family: var(--ff-ui); font-size: 13px; color: rgba(250,248,243,.66); margin-top: 7px; }
@media (prefers-reduced-motion: reduce) {
  .pdf-loader__doc { animation: none; transform: rotateY(-14deg) rotateX(4deg); }
  .pdf-loader__beam { animation: none; top: 50%; opacity: .55; }
}

/* ---------- Generic 3D loading overlay (client portal: sign-in, seat move) ---------- */
.rl-loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: color-mix(in srgb, var(--inkwell) 64%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 220ms var(--ease); }
.rl-loader.on { opacity: 1; }
.rl-loader[hidden] { display: none; }
.rl-loader__scene { text-align: center; perspective: 900px; }
.rl-loader__card { width: 140px; height: 92px; margin: 0 auto 28px; position: relative;
  transform-style: preserve-3d; animation: rlCard 2.6s ease-in-out infinite; }
@keyframes rlCard {
  0%   { transform: rotateY(-24deg) rotateX(9deg) translateY(0); }
  50%  { transform: rotateY(24deg)  rotateX(9deg) translateY(-10px); }
  100% { transform: rotateY(-24deg) rotateX(9deg) translateY(0); }
}
.rl-loader__face { position: absolute; inset: 0; border-radius: 11px; background: var(--ivory-raised);
  display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(15,23,41,.10), 0 22px 48px -14px rgba(15,23,41,.55); }
.rl-loader__mark { font-family: var(--ff-display); font-size: 34px; font-weight: 500; color: var(--oxford); }
.rl-loader__bar { position: absolute; left: 14px; right: 14px; bottom: 13px; height: 2px;
  background: var(--vermilion); opacity: .75; border-radius: 2px; transform-origin: left;
  animation: rlBar 1.5s ease-in-out infinite; }
@keyframes rlBar {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  51%  { transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
.rl-loader__cap { font-family: var(--ff-display); font-weight: 400; font-size: 22px; color: var(--ivory); letter-spacing: -.01em; }
.rl-loader__sub { font-family: var(--ff-ui); font-size: 13px; color: rgba(250,248,243,.66); margin-top: 7px; }
@media (prefers-reduced-motion: reduce) {
  .rl-loader__card { animation: none; transform: rotateY(-16deg) rotateX(6deg); }
  .rl-loader__bar { animation: none; }
}

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.04em;
  color: var(--ink-70);
  background: var(--ivory-raised);
}
.chip--warn   { color: var(--vermilion); border-color: var(--vermilion-soft); background: var(--vermilion-soft); }
.chip--soon   { color: var(--ochre);     border-color: var(--ochre-soft);     background: var(--ochre-soft); }
.chip--active { color: var(--moss);      border-color: var(--moss-soft);      background: var(--moss-soft); }

/* ---------- Messages ---------- */
.flash {
  border: 1px solid var(--hairline);
  padding: 12px 16px;
  border-radius: var(--rad-sm);
  margin-bottom: 20px;
  font-size: var(--fs-ui-sm);
}
.flash--success { border-color: var(--moss);      background: var(--moss-soft);      color: var(--ink); }
.flash--error   { border-color: var(--vermilion); background: var(--vermilion-soft); color: var(--ink); }
.flash--info    { border-color: var(--ink-10);    background: var(--ivory-raised);   color: var(--ink-70); }

/* ---------- Login (split spread) ---------- */
body.login {
  background: var(--ivory);
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}
body.login .split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  flex: 1;
}
body.login .split__art {
  background: var(--inkwell);
  color: #e8eaf0;
  padding: 48px 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
/* Atmospheric bloom on the dark side: muted warm glow, low opacity. */
body.login .split__art::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -20%;
  width: 70%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(193, 74, 58, 0.18), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
body.login .split__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: opacity var(--dur-quick) var(--ease);
}
body.login .split__brand:hover { opacity: 0.85; text-decoration: none; }
body.login .split__logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: block;
}
body.login .split__name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: #f4f5f7;
}
body.login .split__art blockquote {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #f4f5f7;
  max-width: 24ch;
  position: relative;
  z-index: 1;
}
body.login .split__art blockquote cite {
  display: block;
  margin-top: 24px;
  font-family: var(--ff-ui);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8d96b1;
}

/* Typewriter-ribbon ornament: a single flat band with two dots, replacing
   the dual-circle deco. Stamped, not animated. */
body.login .split__art .ribbon {
  position: absolute;
  right: -40px;
  bottom: 64px;
  width: 320px;
  height: 14px;
  background: var(--vermilion-deep);
  opacity: 0.42;
  transform: rotate(-2deg);
  z-index: 0;
}
body.login .split__art .ribbon::before,
body.login .split__art .ribbon::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--vermilion);
  border-radius: 50%;
  top: 4px;
  opacity: 0.8;
}
body.login .split__art .ribbon::before { left: -10px; }
body.login .split__art .ribbon::after  { right: -10px; }

body.login .split__form {
  /* Larger top padding so the vertically-centered content has clear air
     above it for the absolute-positioned back link. Without this, on
     short viewports the centered "Sign in." heading would overlap the
     "Back to home" link (UX feedback 2026-05-27). */
  padding: 84px 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 520px;
  position: relative;
}
body.login .split__back {
  position: absolute;
  top: 24px;
  left: 64px;
  font-size: 13px;
  color: var(--ink-50);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--dur-quick) var(--ease);
  /* Sit clearly above the centered content with no overlap risk. */
  z-index: 1;
}
body.login .split__back:hover { color: var(--ink); text-decoration: none; }
body.login .split__form .heading { font-size: 44px; line-height: 1.04; font-weight: 300; letter-spacing: -0.02em; }
body.login .split__form .sub { margin-top: 10px; font-size: 14px; color: var(--ink-50); line-height: 1.55; }
body.login .split__form form { margin-top: 36px; }

/* ---------- Detail panels ---------- */
.detail {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 56px;
}
.detail__armor {
  padding: 18px 20px;
  background: var(--inkwell);
  color: #e8eaf0;
  border-radius: var(--rad-sm);
  font-family: var(--ff-mono);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}

.kv { margin: 0; }
.kv dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-top: 20px;
  font-weight: 500;
}
.kv dd {
  margin: 4px 0 0;
  font-size: var(--fs-ui-base);
  color: var(--ink);
}

.danger-zone {
  margin-top: 56px;
  padding: 28px;
  border: 1px solid var(--vermilion);
  border-radius: var(--rad-sm);
  background: var(--vermilion-soft);
  position: relative;
}
.danger-zone::before {
  content: "";
  position: absolute;
  left: 28px; top: -1px;
  width: 60px; height: 2px;
  background: var(--vermilion);
}
.danger-zone h3 {
  color: var(--vermilion);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 19px;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.danger-zone p { color: var(--ink-70); font-size: 13px; margin: 0 0 16px; line-height: 1.55; max-width: 56ch; }

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-bar a {
  padding: 7px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-70);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background var(--dur-quick) var(--ease),
              color var(--dur-quick) var(--ease),
              border-color var(--dur-quick) var(--ease);
}
.filter-bar a:hover { border-color: var(--ink-30); color: var(--ink); text-decoration: none; }
.filter-bar a.active { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.filter-bar form { margin-left: auto; }
.filter-bar input[type="search"] {
  padding: 9px 14px;
  border: 1px solid var(--ink-10);
  border-radius: var(--rad-sm);
  font: inherit;
  width: 280px;
  color: var(--ink);
  background: var(--ivory-raised);
  transition: border-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.filter-bar input[type="search"]:focus {
  outline: none;
  border-color: var(--oxford);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

/* ---------- Empty states ---------- */
.empty {
  padding: 72px 32px;
  text-align: center;
  color: var(--ink-50);
  border: 1px dashed var(--hairline);
  border-radius: var(--rad-sm);
  background: var(--ivory-raised);
}
.empty .display--m { color: var(--ink-70); margin-bottom: 12px; }

/* ---------- Utility ---------- */
.row-inline { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.text-right { text-align: right; }
.text-muted { color: var(--ink-50); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .stat:nth-last-child(2) { border-right: 1px solid var(--hairline); }
  main, .chrome, footer.foot { padding-left: 24px; padding-right: 24px; }
  .chrome { flex-wrap: wrap; gap: 18px; }
  .chrome__nav { gap: 20px; flex-wrap: wrap; }
  body.login .split { grid-template-columns: 1fr; }
  body.login .split__art { padding: 32px; min-height: 240px; }
  body.login .split__form { padding: 32px; }
  .detail { grid-template-columns: 1fr; gap: 32px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 18px; }
}