/* ==========================================================================
   MAPlates shared design system.
   One file for every public + admin page: tokens, base, layout primitives,
   components. Page-specific tweaks stay small and live in per-view <style>
   blocks; anything used on two pages belongs here.
   ========================================================================== */

/* ---- Tokens -------------------------------------------------------------- */
:root{
  --bg:#FFFFFF; --bg-soft:#F3F6FD; --bg-card:#FFFFFF; --bg-raised:#F8FAFF;
  --line:#E1E7F2; --line-strong:#C9D3E6;
  --text:#12172B; --text-dim:#4B5568; --text-dimmer:#67738A;
  --navy:#101B3E; --navy-2:#1A2A5C; --navy-text:#EDF1FA; --navy-dim:#AAB6D6; --navy-line:#2A3A6C;
  --blue:#2453EB; --blue-deep:#1D43C0; --blue-soft:#EAF0FE;
  --gold:#B87700; --gold-bright:#E08A00; --gold-soft:#FDF1DC;
  --green:#137A4F; --green-soft:#E4F5EC; --red:#D22E45; --red-soft:#FBE7EA;
  --violet:#7A3FE0; --violet-soft:#F1E9FE;
  --shadow-card:0 1px 2px rgba(20,40,90,.05),0 8px 20px rgba(20,40,90,.05);

  /* Plate "material" tokens are fixed, not theme-dependent — a plate is a
     photographed real object, not site chrome. */
  --ma-face:#FDFCFA; --ma-face-2:#E4E1D9; --ma-blue:#1A3E8F; --ma-red:#C02033;
  --plate-brass:#C89331; --plate-oxide:#A33B2C;

  --font-body:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font-body);
  --font-mono:ui-monospace,"Cascadia Code","SFMono-Regular","Roboto Mono",Consolas,monospace;

  /* Spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --radius:8px; --radius-lg:12px;
  --w-page:1080px; --w-narrow:720px; --w-copy:66ch;

  /* Wordmark tokens are distinct from --ma-red/--navy: those are fixed plate
     "material" colors, but the wordmark is type, and plate red on its own
     needs to lift for dark-mode contrast. */
  --logo-ma:#C02033; --logo-text:#101B3E; --logo-tld:#67738A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --logo-ma:#FF6B7D; --logo-text:#EDF1FA; --logo-tld:#7C889F;
    /* Deck / paper / raised. --bg-card used to equal --bg-soft, so a card on
       an alternating band was invisible except for its hairline; paper now
       sits clearly above the deck and is faintly warm, so a record reads as a
       physical thing on a surface rather than a cut-out rectangle. */
    --bg:#0B0F1A; --bg-soft:#10162A; --bg-card:#1A2237; --bg-raised:#222B44;
    --line:#2E3A55; --line-strong:#3E4C6E;
    /* --text-dimmer carries the fine print, so it is set to clear 4.5:1 on
       the lightest surface it sits on (--bg-raised), not just on the deck. */
    --text:#EEF2FB; --text-dim:#A9B4CC; --text-dimmer:#8693AB;
    --navy:#0B1129; --navy-2:#131D42; --navy-text:#EDF1FA; --navy-dim:#AAB6D6; --navy-line:#243158;
    --blue:#6E93FF; --blue-deep:#5379E8; --blue-soft:#1C2745;
    --gold:#FFB84D; --gold-bright:#FFB84D; --gold-soft:#2E2415;
    --green:#4FD8A0; --green-soft:#123227; --red:#FF7086; --red-soft:#3A1620;
    --violet:#B79BFF; --violet-soft:#241C3D;
    /* The inset top highlight is what makes a dark card read as lifted
       rather than cut out; the drop shadow does the rest. */
    --shadow-card:0 1px 0 rgba(255,255,255,.04) inset,0 12px 28px rgba(0,0,0,.45);
  }
}

/* ---- Base ---------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font-body)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;margin:0;line-height:1.12;text-wrap:balance;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-dim)}
.arrow-icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex:none}

/* Visible keyboard focus, everywhere. */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}

/* Skip navigation */
.skip-link{position:absolute;left:-9999px;top:0;z-index:50;background:var(--blue);color:#fff;
  padding:10px 18px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}

/* ---- Layout -------------------------------------------------------------- */
.wrap{max-width:var(--w-page);margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:var(--w-narrow);margin:0 auto;padding:0 20px}

/* Standard page header band */
.page-head{padding:var(--sp-7) 0 var(--sp-6);border-bottom:1px solid var(--line);
  background:radial-gradient(1000px 360px at 12% -20%,var(--blue-soft),transparent 60%)}
.page-head h1{font-size:clamp(28px,4.2vw,42px)}
.page-head .deck{max-width:var(--w-copy);color:var(--text-dim);margin:14px 0 0;font-size:16.5px}
.eyebrow{font-size:13px;font-weight:600;color:var(--text-dim);display:inline-flex;gap:8px;align-items:center;
  border:1px solid var(--line);background:var(--bg-card);border-radius:999px;padding:5px 12px;margin-bottom:18px}
.eyebrow b{color:var(--gold)}

section.band{padding:var(--sp-7) 0;border-bottom:1px solid var(--line)}
.section-head{margin-bottom:var(--sp-5)}
.section-head h2{font-size:clamp(21px,3vw,28px)}
.section-head .lede{color:var(--text-dim);max-width:var(--w-copy);margin:8px 0 0}

/* ---- Buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;
  border:0;border-radius:var(--radius);padding:10px 18px;font-size:14.5px;font-weight:600;cursor:pointer;
  text-decoration:none;font-family:inherit;line-height:1.3}
.btn:hover{background:var(--blue-deep)}
.btn.lg{padding:13px 24px;font-size:16px;border-radius:10px}
.btn.gold{background:var(--gold-bright);color:#241A05}
.btn.ghost{background:transparent;color:var(--text-dim);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--bg-soft);color:var(--text)}
.btn.danger{background:var(--red)}
.btn.sm{padding:6px 12px;font-size:13px}
.btn-link{background:none;border:0;color:var(--blue);cursor:pointer;padding:0;font:inherit;text-decoration:underline}

/* ---- Forms --------------------------------------------------------------- */
.field{margin-bottom:var(--sp-4)}
label{display:block;font-size:13.5px;font-weight:600;color:var(--text-dim);margin-bottom:6px}
.label-hint{font-weight:400;color:var(--text-dimmer)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],textarea,select{
  width:100%;font-size:16px;background:var(--bg-soft);border:1px solid var(--line);border-radius:7px;
  padding:10px 12px;color:var(--text);font-family:inherit}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--text-dim);cursor:pointer}
.check input{accent-color:var(--blue)}
.error{color:var(--red);font-size:13px;margin-top:4px;list-style:none;padding:0}
.status{background:var(--green-soft);color:var(--green);border-radius:var(--radius);padding:10px 14px;font-size:14px;margin-bottom:18px}
.alert{background:var(--red-soft);color:var(--red);border-radius:var(--radius);padding:12px 16px;font-size:14px;margin-bottom:18px}
.notice{background:var(--gold-soft);color:var(--gold);border-radius:var(--radius);padding:12px 16px;font-size:14px;margin-bottom:18px}

/* ---- Cards --------------------------------------------------------------- */
.card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-5);box-shadow:var(--shadow-card)}
.card.tight{padding:var(--sp-4)}
.card h3{font-size:16.5px}

/* ---- Badges & status ----------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  border-radius:6px;padding:2px 8px;white-space:nowrap;line-height:1.6}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.red{background:var(--red-soft);color:var(--red)}
.badge.gold{background:var(--gold-soft);color:var(--gold)}
.badge.blue{background:var(--blue-soft);color:var(--blue)}
.badge.violet{background:var(--violet-soft);color:var(--violet)}
.badge.dim{background:var(--bg-soft);color:var(--text-dimmer)}
.badge.outline{background:transparent;border:1px solid var(--line);color:var(--text-dimmer)}

/* ---- Toolbars / filter rows ---------------------------------------------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.toolbar .grow{flex:1 1 200px}
.chip{font-size:13px;font-weight:600;background:var(--bg-card);color:var(--text-dim);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;text-decoration:none;display:inline-block;cursor:pointer}
.chip:hover{color:var(--text)}
.chip.active{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---- Tables -------------------------------------------------------------- */
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th,table.data td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-dimmer);white-space:nowrap}

/* ---- Pagination (custom accessible paginator) ----------------------------- */
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:var(--sp-4);font-size:14px}
.pager .pg-info{color:var(--text-dimmer);margin-right:auto;font-size:13px}
.pager a.pg,.pager span.pg{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
  padding:0 8px;border:1px solid var(--line);border-radius:7px;text-decoration:none;color:var(--text-dim);background:var(--bg-card)}
.pager a.pg:hover{background:var(--bg-soft);color:var(--text)}
.pager .pg.current{background:var(--blue);border-color:var(--blue);color:#fff}
.pager .pg.disabled{opacity:.4}
.pager .pg-gap{color:var(--text-dimmer);padding:0 2px}

/* ---- Empty / error states ------------------------------------------------ */
.empty-state{padding:var(--sp-7) var(--sp-5);text-align:center;color:var(--text-dim);
  border:1px dashed var(--line);border-radius:var(--radius-lg)}
.empty-state h3{margin-bottom:8px}
.empty-state p{max-width:52ch;margin:0 auto}

/* ---- Site nav ------------------------------------------------------------ */
.nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:14px}
.wordmark{display:inline-flex;align-items:center;line-height:0;border-radius:6px;text-decoration:none}
.wordmark-svg{height:34px;width:auto;display:block}
.wordmark:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.site .wordmark-svg{height:26px}
@media (max-width:640px){.wordmark-svg{height:28px}}
.navlinks{display:flex;gap:4px;align-items:center;font-size:14px;font-weight:600}
.navlinks a{color:var(--text-dim);padding:7px 10px;border-radius:7px;text-decoration:none}
.navlinks a:hover{color:var(--text);background:var(--bg-soft)}
.navlinks a.current{color:var(--blue);background:var(--blue-soft)}
.navlinks .btn{margin-left:6px}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:none;border:0;cursor:pointer;padding:0;flex:none}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;margin:0 auto}

@media (max-width:880px){
  .nav-toggle{display:flex}
  .navlinks{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:6px 20px 18px;box-shadow:var(--shadow-card)}
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 4px;border-bottom:1px solid var(--line);width:100%;border-radius:0}
  .navlinks a.current{background:transparent}
  .navlinks a:last-of-type{border-bottom:0}
  .navlinks .btn{margin:12px 0 0;text-align:center;justify-content:center;border-bottom:0}
}

/* ---- Footer -------------------------------------------------------------- */
footer.site{padding:var(--sp-7) 0 var(--sp-8);border-top:1px solid var(--line);margin-top:var(--sp-5)}
.foot-grid{display:flex;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap}
.foot-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dimmer);margin-bottom:10px}
.foot-col a{display:block;color:var(--text-dim);text-decoration:none;font-size:14px;padding:4px 0}
.foot-col a:hover{color:var(--text)}
.foot-note{font-size:13px;color:var(--text-dimmer);max-width:52ch;line-height:1.6}

/* ---- Plate component ------------------------------------------------------
   Shared everywhere a plate is rendered. Values match the reference board
   pixel-for-pixel; kept fixed (not theme-tokenized) since a plate is a
   photographed object, not site chrome. */
.plate{
  position:relative;display:block;width:100%;aspect-ratio:2/1;container-type:inline-size;
  background:linear-gradient(178deg,var(--ma-face) 0%,#F6F4EF 46%,var(--ma-face-2) 100%);
  border-radius:7px;border:0;padding:0;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 0 0 1px rgba(20,30,50,.16),0 3px 7px rgba(0,0,0,.45);
  transition:transform .16s ease,box-shadow .16s ease;overflow:hidden;text-decoration:none;
}
.plate:before{content:"";position:absolute;inset:3.2cqw;border-radius:3px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(26,62,143,.16),0 1px 0 rgba(255,255,255,.75) inset}
.plate .state{position:absolute;top:2.8cqw;left:0;right:0;text-align:center;
  font-family:var(--font-body);font-weight:600;
  font-size:6.6cqw;line-height:1;letter-spacing:.015em;color:var(--ma-blue)}
.plate .slogan{position:absolute;bottom:3.4cqw;left:0;right:0;text-align:center;
  font-family:var(--font-body);font-weight:600;font-size:5cqw;line-height:1;letter-spacing:.04em;color:var(--ma-blue);opacity:.92}
.plate .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:700;
  font-size:min(26cqw,calc(78cqw / var(--num-len, 3)));line-height:1;
  color:var(--ma-red);letter-spacing:.03em;white-space:nowrap;
  text-shadow:0 -0.5px 0 rgba(255,255,255,.85),0 1px 1.5px rgba(0,0,0,.3);padding:5.5cqw 0 3.5cqw}
.plate .bolt{position:absolute;top:6.4cqw;width:3cqw;height:3cqw;border-radius:50%;
  background:radial-gradient(circle at 40% 34%,rgba(0,0,0,.3),rgba(0,0,0,.13));box-shadow:0 .5px 0 rgba(255,255,255,.7)}
.plate .bolt.l{left:17%} .plate .bolt.r{right:17%}
.plate .sticker{position:absolute;top:3.4cqw;right:3.4cqw;width:10cqw;height:10cqw;border-radius:1.2cqw;
  background:linear-gradient(180deg,#D8A63C,#BE8722);color:#241A05;
  font-family:var(--font-mono);font-weight:700;font-size:4.8cqw;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:0 .5px 1.5px rgba(0,0,0,.35)}
.plate.dead{filter:saturate(.3) brightness(.86)}
.plate.dead .num{color:#6C6C6C}
.plate.dead .sticker{background:var(--plate-oxide);color:#F3E4E1}
.plate.flag:after{content:"";position:absolute;left:0;bottom:0;width:15cqw;height:15cqw;pointer-events:none;
  background:linear-gradient(45deg,var(--plate-brass) 0 48%,transparent 48%);opacity:.92}
@container (max-width:56px){ .plate .slogan{display:none} .plate .num{padding:4.5cqw 0} }
@container (max-width:40px){ .plate .state{display:none} }
.plate:hover,.plate:focus-visible{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 9px 18px rgba(0,0,0,.5)}
.plate:focus-visible{outline:2px solid var(--plate-brass);outline-offset:3px}
.plate[aria-pressed="true"]{transform:translateY(-3px);box-shadow:0 0 0 2px var(--plate-brass),0 9px 18px rgba(0,0,0,.5)}
.plate.mute{opacity:.16}

/* ---- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}