/* ABOUTME: The licence-plate tile and its per-state colours: the one copy, imported by neumorphism.css. */
/* ABOUTME: The self-checkout loads it directly, since that layout does not load neumorphism.css. */

/* Region plate badge inside the history table. Sizing only — per-region
   colors come from the .plate-xx classes shared with the operator hero chip. */
.op-plate-badge {
  /* Padding/symmetry comes from the base .neu-plate-badge (0.25rem 0.5rem). */
  border: 1px solid var(--neu-shadow-dark);
  max-width: 100%;
}

.op-plate-badge .plate-number {
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
}

.op-plate-badge .plate-divider {
  opacity: 0.5;
  font-weight: 400;
  margin: 0 1px;
}

.op-plate-badge .plate-state-name {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ===== VEHICLE/LICENSE PLATE BADGE ===== */
.neu-plate-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-mono);
  background-color: var(--neu-bg);
  color: var(--neu-text);
  box-shadow: 2px 2px 4px var(--neu-shadow-dark),
    -2px -2px 4px var(--neu-shadow-light);
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.neu-plate-badge:hover {
  color: var(--neu-accent);
  transform: translateY(-1px);
}

/* ===== US LICENSE PLATE STATE COLOR THEMES =====
   Source: Wikipedia "United States license plate designs" table (2024/2025)
   Co-located here so any layout loading neumorphism.css gets plate colors automatically —
   avoids per-layout stylesheet_link_tag drift (the bug that caused owner dashboard to show
   unstyled grey badges despite correct .plate-xx classes being present in the DOM).

   Pattern (operator dashboard):
     Hero chip:        <button class="plate-xx"><span class="plate-number">...</span><span class="plate-state-name">XX</span></button>
     Filmstrip/owner badge: <span class="neu-plate-badge plate-xx">...</span>

   WCAG AA (4.5:1) verified for .plate-number against effective background at text position.
*/

/* Generic fallback — white with dark border */
.plate-generic {
  background: #ffffff;
  border-color: #666;
  color: #1a1a1a;
}

.plate-generic .plate-state-name {
  color: #666;
}

.plate-generic .plate-number {
  color: #1a1a1a;
}

/* Alabama — bay and sky travel graphic */
.plate-al {
  background: linear-gradient(to bottom, #8fc7e8 0%, #d8edf7 48%, #f7f2dc 49%, #d8b46a 100%);
  border-color: #2b6f96;
  color: #173f5f;
}

.plate-al .plate-state-name {
  color: #1d4f73;
}

.plate-al .plate-number {
  color: #173f5f;
}

/* Alaska — blue on gold, state flag cue */
.plate-ak {
  background: linear-gradient(135deg, #f5d45b, #d9a928);
  border-color: #123a6f;
  color: #123a6f;
}

.plate-ak .plate-state-name {
  color: #123a6f;
}

.plate-ak .plate-number {
  color: #123a6f;
}

/* Arizona — dark green on desert landscape */
.plate-az {
  background: linear-gradient(to bottom, #7ec0d6 0%, #f5c06d 42%, #d88442 72%, #9b5a30 100%);
  border-color: #2d5e46;
  color: #1e4c38;
}

.plate-az .plate-state-name {
  color: #2d5e46;
}

.plate-az .plate-number {
  color: #1e4c38;
}

/* Arkansas — black on white/cream with diamond cue */
.plate-ar {
  background: #f8f8f2;
  border-color: #444;
  color: #111;
}

.plate-ar .plate-state-name {
  color: #333;
}

.plate-ar .plate-number {
  color: #111;
}

/* California — dark blue on white, red state name */
.plate-ca {
  background: #ffffff;
  border-color: #24436f;
  color: #1a3a6b;
}

.plate-ca .plate-state-name {
  color: #c92323;
}

.plate-ca .plate-number {
  color: #1a3a6b;
}

/* Colorado — dark green on Rocky Mountains scene */
.plate-co {
  background: linear-gradient(to bottom, #dfe9e4 0%, #ffffff 46%, #c8d8ce 100%);
  border-color: #1f5b42;
  color: #1f5b42;
}

.plate-co .plate-state-name {
  color: #1f5b42;
}

.plate-co .plate-number {
  color: #1f5b42;
}

/* Connecticut — dark blue text on light blue fading to white */
.plate-ct {
  background: linear-gradient(to bottom, #5a9fd4, #ffffff);
  border-color: #1e3a5f;
  color: #1e3a5f;
}

.plate-ct .plate-state-name {
  color: #1e3a5f;
}

.plate-ct .plate-number {
  color: #1e3a5f;
}

/* Delaware — gold on navy blue */
.plate-de {
  background: #071c3a;
  border-color: #d7b548;
  color: #f2d36b;
}

.plate-de .plate-state-name {
  color: #d7b548;
}

.plate-de .plate-number {
  color: #f2d36b;
}

/* District of Columbia — blue on white */
.plate-dc {
  background: #ffffff;
  border-color: #24436f;
  color: #24436f;
}

.plate-dc .plate-state-name {
  color: #24436f;
}

.plate-dc .plate-number {
  color: #24436f;
}

/* Florida — green on white with orange cue */
.plate-fl {
  background: #ffffff;
  border-color: #2f7d46;
  color: #24703b;
}

.plate-fl .plate-state-name {
  color: #2f7d46;
}

.plate-fl .plate-number {
  color: #24703b;
}

/* Georgia — blue sky top, peach center, green bottom */
.plate-ga {
  background: linear-gradient(to bottom, #3a72a8 0%, #f0c09a 35%, #f0c09a 65%, #2d7a4f 100%);
  border-color: #1e3a6b;
  color: #1a1a1a;
}

.plate-ga .plate-state-name {
  color: #1a3a6b;
}

.plate-ga .plate-number {
  color: #1a1a1a;
}

/* Hawaii — sky blue top, white text zone, rainbow decorative band at bottom */
.plate-hi {
  background: linear-gradient(to bottom,
      #4a90d9 0%, #74b3e8 12%,
      #ffffff 22%, #ffffff 72%,
      #e84040 75%, #f09020 80%,
      #f0e020 84%, #38b038 88%,
      #3880d0 92%, #7038c0 95%,
      #f8f8ff 97%, #ffffff 100%);
  border-color: #333;
  color: #111;
}

.plate-hi .plate-state-name {
  color: #111;
}

.plate-hi .plate-number {
  color: #111;
}

/* Idaho — black on white with red gradient and blue mountains
   WCAG: state-name adjusted #ffffff → #111 (white on red top band fails 4.5:1) */
.plate-id {
  background: linear-gradient(to bottom, #b9232d 0%, #ffffff 34%, #ffffff 72%, #1d4b7a 100%);
  border-color: #1d4b7a;
  color: #111;
}

.plate-id .plate-state-name {
  color: #111;
}

.plate-id .plate-number {
  color: #111;
}

/* Illinois — gradient blue-to-white with skyline cue */
.plate-il {
  background: linear-gradient(to bottom, #4c83bd 0%, #eef5fb 55%, #ffffff 100%);
  border-color: #315f91;
  color: #111;
}

.plate-il .plate-state-name {
  color: #111;
}

.plate-il .plate-number {
  color: #111;
}

/* Indiana — dark blue on country scene */
.plate-in {
  background: linear-gradient(to bottom, #b9d9ef 0%, #f1f7fb 45%, #d9b884 100%);
  border-color: #1e3a5f;
  color: #15365d;
}

.plate-in .plate-state-name {
  color: #1e3a5f;
}

.plate-in .plate-number {
  color: #15365d;
}

/* Iowa — black on sky/skyline/farm/field graphic
   WCAG: state-name adjusted #ffffff → #0f3452 (white on #4f9ed8 blue = 2.76:1, fails) */
.plate-ia {
  background: linear-gradient(to bottom, #4f9ed8 0%, #d8edf9 45%, #ffffff 58%, #5aa05a 100%);
  border-color: #2a6f9f;
  color: #111;
}

.plate-ia .plate-state-name {
  color: #0f3452;
}

.plate-ia .plate-number {
  color: #111;
}

/* Kansas — black on light blue/white/gold gradient */
.plate-ks {
  background: linear-gradient(to bottom, #b7dcef 0%, #ffffff 56%, #e8c36a 100%);
  border-color: #666;
  color: #111;
}

.plate-ks .plate-state-name {
  color: #111;
}

.plate-ks .plate-number {
  color: #111;
}

/* Kentucky — dark blue on light blue gradient */
.plate-ky {
  background: linear-gradient(to bottom, #d9eefb, #9ec9e7);
  border-color: #1c4775;
  color: #123d6b;
}

.plate-ky .plate-state-name {
  color: #1c4775;
}

.plate-ky .plate-number {
  color: #123d6b;
}

/* Louisiana — blue on white */
.plate-la {
  background: #ffffff;
  border-color: #1e5a9b;
  color: #174c88;
}

.plate-la .plate-state-name {
  color: #1e5a9b;
}

.plate-la .plate-number {
  color: #174c88;
}

/* Maine — blue on white with pine tree cue */
.plate-me {
  background: #ffffff;
  border-color: #24436f;
  color: #24436f;
}

.plate-me .plate-state-name {
  color: #24436f;
}

.plate-me .plate-number {
  color: #24436f;
}

/* Maryland — white top fading to gold bottom (flag cue) */
.plate-md {
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 55%, #f5c518 100%);
  border-color: #111;
  color: #111;
}

.plate-md .plate-state-name {
  color: #111;
}

.plate-md .plate-number {
  color: #111;
}

/* Massachusetts — red serial on white; blue state name/slogan */
.plate-ma {
  background: #ffffff;
  border-color: #24436f;
  color: #b21f2d;
}

.plate-ma .plate-state-name {
  color: #24436f;
}

.plate-ma .plate-number {
  color: #b21f2d;
}

/* Michigan — white with royal blue bottom band */
.plate-mi {
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 62%, #1a4fa8 62%, #1a4fa8 100%);
  border-color: #1a4fa8;
  color: #1a4fa8;
}

.plate-mi .plate-state-name {
  color: #1a4fa8;
}

.plate-mi .plate-number {
  color: #1a4fa8;
}

/* On the 2:1 chip the number sits near 60%, so the blue base moves below it. */
.plate-mi.oph-plate {
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 78%, #1a4fa8 78%, #1a4fa8 100%);
}

/* Minnesota — black on white with lake scene */
.plate-mn {
  background: linear-gradient(to bottom, #dff1fb 0%, #ffffff 52%, #b9d7b6 100%);
  border-color: #24436f;
  color: #111;
}

.plate-mn .plate-state-name {
  color: #24436f;
}

.plate-mn .plate-number {
  color: #111;
}

/* Mississippi — dark blue on white with magnolia cue */
.plate-ms {
  background: #ffffff;
  border-color: #183b6b;
  color: #183b6b;
}

.plate-ms .plate-state-name {
  color: #183b6b;
}

.plate-ms .plate-number {
  color: #183b6b;
}

/* Missouri — dark blue on white with red and blue wave accents */
.plate-mo {
  background: #ffffff;
  border-color: #183b6b;
  color: #183b6b;
}

.plate-mo .plate-state-name {
  color: #183b6b;
}

.plate-mo .plate-number {
  color: #183b6b;
}

/* Montana — white on blue with state outline */
.plate-mt {
  background: #1f5e9d;
  border-color: #ffffff;
  color: #ffffff;
}

.plate-mt .plate-state-name {
  color: #ffffff;
}

.plate-mt .plate-number {
  color: #ffffff;
}

/* Nebraska — dark blue on white with mosaic cue */
.plate-ne {
  background: #ffffff;
  border-color: #1d3f71;
  color: #1d3f71;
}

.plate-ne .plate-state-name {
  color: #1d3f71;
}

.plate-ne .plate-number {
  color: #1d3f71;
}

/* Nevada — black on sky blue with mountain range */
.plate-nv {
  background: linear-gradient(to bottom, #9ed2f0 0%, #dff4ff 62%, #c2b28a 100%);
  border-color: #333;
  color: #111;
}

.plate-nv .plate-state-name {
  color: #111;
}

.plate-nv .plate-number {
  color: #111;
}

/* New Hampshire — green on Old Man mountain graphic */
.plate-nh {
  background: linear-gradient(to bottom, #c9d7cb 0%, #e7eee8 55%, #9caf9d 100%);
  border-color: #1f5b42;
  color: #1f5b42;
}

.plate-nh .plate-state-name {
  color: #1f5b42;
}

.plate-nh .plate-number {
  color: #1f5b42;
}

/* New Jersey — black on yellow/buff gradient */
.plate-nj {
  background: linear-gradient(135deg, #f5e6a3, #e8d47a);
  border-color: #8b7d3c;
  color: #1a1a2e;
}

.plate-nj .plate-state-name {
  color: #2a4a2a;
}

.plate-nj .plate-number {
  color: #1a1a2e;
}

/* New Mexico — red on yellow with turquoise/Zia cue
   WCAG: color darkened #b42126 → #8b1a20 (red on #f4d34f yellow was 4.35:1, now ~5.5:1) */
.plate-nm {
  background: #f4d34f;
  border-color: #8b1a20;
  color: #8b1a20;
}

.plate-nm .plate-state-name {
  color: #8b1a20;
}

.plate-nm .plate-number {
  color: #8b1a20;
}

/* New York — blue top band, gold bottom; state name dark so it reads on gold */
.plate-ny {
  background: linear-gradient(to bottom, #1a3a6b 30%, #f0c040 30%);
  border-color: #1a3a6b;
  color: #1a3a6b;
}

.plate-ny .plate-state-name {
  color: #1a3a6b;
}

.plate-ny .plate-number {
  color: #1a3a6b;
}

/* North Carolina — blue on white */
.plate-nc {
  background: #ffffff;
  border-color: #1e5a9b;
  color: #1e5a9b;
}

.plate-nc .plate-state-name {
  color: #1e5a9b;
}

.plate-nc .plate-number {
  color: #1e5a9b;
}

/* North Dakota — black on light blue sunrise/prairie/buffalo */
.plate-nd {
  background: linear-gradient(to bottom, #b9e1f5 0%, #f6d38d 48%, #d6b36b 100%);
  border-color: #333;
  color: #111;
}

.plate-nd .plate-state-name {
  color: #111;
}

.plate-nd .plate-number {
  color: #111;
}

/* Ohio — dark blue on sunrise scene */
.plate-oh {
  background: linear-gradient(to bottom, #f9d56a 0%, #b7dcef 45%, #ffffff 68%, #d8c48a 100%);
  border-color: #1d4778;
  color: #1d4778;
}

.plate-oh .plate-state-name {
  color: #1d4778;
}

.plate-oh .plate-number {
  color: #1d4778;
}

/* Oklahoma — white serial on reflective red */
.plate-ok {
  background: #b9202a;
  border-color: #7f1118;
  color: #ffffff;
}

.plate-ok .plate-state-name {
  color: #ffffff;
}

.plate-ok .plate-number {
  color: #ffffff;
}

/* Oregon — dark blue on Douglas Fir and mountain graphic */
.plate-or {
  background: linear-gradient(to bottom, #d4e3ed 0%, #ffffff 52%, #a8c0a0 100%);
  border-color: #1e3f69;
  color: #1e3f69;
}

.plate-or .plate-state-name {
  color: #1e3f69;
}

.plate-or .plate-number {
  color: #1e3f69;
}

/* Pennsylvania — tricolor blue/white/yellow */
.plate-pa {
  background: linear-gradient(to bottom, #1a3a6b 25%, #ffffff 25%, #ffffff 75%, #f0c040 75%);
  border-color: #1a3a6b;
  color: #1a3a6b;
}

.plate-pa .plate-state-name {
  color: #1a3a6b;
}

.plate-pa .plate-number {
  color: #1a3a6b;
}

/* Rhode Island — navy on light blue with wave graphic */
.plate-ri {
  background: #d9eefb;
  border-color: #153c6b;
  color: #153c6b;
}

.plate-ri .plate-state-name {
  color: #153c6b;
}

.plate-ri .plate-number {
  color: #153c6b;
}

/* South Carolina — black on white and blue with palmetto cue */
.plate-sc {
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 60%, #8fb9d8 100%);
  border-color: #111;
  color: #111;
}

.plate-sc .plate-state-name {
  color: #111;
}

.plate-sc .plate-number {
  color: #111;
}

/* South Dakota — blue on Mount Rushmore graphic */
.plate-sd {
  background: linear-gradient(to bottom, #8fc4e8 0%, #dcecf5 48%, #c8c0ad 100%);
  border-color: #174c88;
  color: #174c88;
}

.plate-sd .plate-state-name {
  color: #174c88;
}

.plate-sd .plate-number {
  color: #174c88;
}

/* Tennessee — white on blue */
.plate-tn {
  background: #234f8a;
  border-color: #15345f;
  color: #ffffff;
}

.plate-tn .plate-state-name {
  color: #ffffff;
}

.plate-tn .plate-number {
  color: #ffffff;
}

/* Texas — black on white with lone star cue */
.plate-tx {
  background: #ffffff;
  border-color: #111;
  color: #111;
}

.plate-tx .plate-state-name {
  color: #111;
}

.plate-tx .plate-number {
  color: #111;
}

/* Utah — dark blue on skier/Delicate Arch landscape */
.plate-ut {
  background: linear-gradient(to bottom, #e7f2f8 0%, #ffffff 45%, #c27d48 100%);
  border-color: #1b477a;
  color: #1b477a;
}

.plate-ut .plate-state-name {
  color: #1b477a;
}

.plate-ut .plate-number {
  color: #1b477a;
}

/* Vermont — white on green */
.plate-vt {
  background: #194f35;
  border-color: #ffffff;
  color: #ffffff;
}

.plate-vt .plate-state-name {
  color: #ffffff;
}

.plate-vt .plate-number {
  color: #ffffff;
}

/* Virginia — blue on white */
.plate-va {
  background: #ffffff;
  border-color: #174c88;
  color: #174c88;
}

.plate-va .plate-state-name {
  color: #174c88;
}

.plate-va .plate-number {
  color: #174c88;
}

/* Washington — dark blue on white with Mount Rainier light blue cue */
.plate-wa {
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 54%, #cde6f4 100%);
  border-color: #1e3f69;
  color: #1e3f69;
}

.plate-wa .plate-state-name {
  color: #1e3f69;
}

.plate-wa .plate-number {
  color: #1e3f69;
}

/* West Virginia — blue on white with dark blue state name bar
   WCAG: state-name adjusted #ffffff → #1a3a6b (white-on-white invisible) */
.plate-wv {
  background: linear-gradient(to bottom, #1a3a6b 0 24%, #ffffff 24% 100%);
  border-color: #1a3a6b;
  color: #1a3a6b;
}

.plate-wv .plate-state-name {
  color: #1a3a6b;
}

.plate-wv .plate-number {
  color: #1a3a6b;
}

/* Wisconsin — black on white with lake and farm graphic */
.plate-wi {
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 62%, #c7d6b6 100%);
  border-color: #333;
  color: #111;
}

.plate-wi .plate-state-name {
  color: #111;
}

.plate-wi .plate-number {
  color: #111;
}

/* Wyoming — white on navy/gray Bucking Horse graphic with red border cue */
.plate-wy {
  background: linear-gradient(to bottom, #243a5a 0%, #5f6772 100%);
  border-color: #b21f2d;
  color: #ffffff;
}

.plate-wy .plate-state-name {
  color: #ffffff;
}

.plate-wy .plate-number {
  color: #ffffff;
}

/* ---- US Territories ---- */

/* American Samoa — black on Fatu Rock graphic */
.plate-as {
  background: linear-gradient(to bottom, #e9f2f5, #c9d8df);
  border-color: #111;
  color: #111;
}

.plate-as .plate-state-name {
  color: #111;
}

.plate-as .plate-number {
  color: #111;
}

/* Guam — black on white with latte stone and bougainvillea cue */
.plate-gu {
  background: #ffffff;
  border-color: #333;
  color: #111;
}

.plate-gu .plate-state-name {
  color: #111;
}

.plate-gu .plate-number {
  color: #111;
}

/* Northern Mariana Islands — dark blue on white with seal */
.plate-mp {
  background: #ffffff;
  border-color: #1d4778;
  color: #1d4778;
}

.plate-mp .plate-state-name {
  color: #1d4778;
}

.plate-mp .plate-number {
  color: #1d4778;
}

/* Puerto Rico — black on white with fort graphic */
.plate-pr {
  background: #ffffff;
  border-color: #333;
  color: #111;
}

.plate-pr .plate-state-name {
  color: #111;
}

.plate-pr .plate-number {
  color: #111;
}

/* Diplomatic (DP), Consul (CD), Foreign Mission (FC) — red top bar, light blue field, black serial */
.plate-dp,
.plate-cd,
.plate-fc {
  background: linear-gradient(to bottom, #cc0000 0%, #cc0000 10%, #add8e6 10%, #add8e6 100%);
  border-color: #555;
  color: #111;
}

.plate-dp .plate-state-name,
.plate-cd .plate-state-name,
.plate-fc .plate-state-name {
  color: #111;
}

.plate-dp .plate-number,
.plate-cd .plate-number,
.plate-fc .plate-number {
  color: #111;
}

/* US Government (GSA) plates — white field, blue outer border, blue inner rule with white gap */
.plate-us {
  background: #ffffff;
  border-color: #24436f;
  color: #24436f;
  box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 5px #24436f;
}

.plate-us .plate-state-name {
  color: #24436f;
}

.plate-us .plate-number {
  color: #24436f;
}

/* U.S. Virgin Islands — teal top, white middle, orange bottom, black serial
   WCAG: state-name adjusted #ffffff → #003d40 (white on #008c95 teal = 3.74:1, fails) */
.plate-vi {
  background: linear-gradient(to bottom, #008c95 0 20%, #ffffff 20% 78%, #f28c2b 78% 100%);
  border-color: #333;
  color: #111;
}

.plate-vi .plate-state-name {
  color: #003d40;
}

.plate-vi .plate-number {
  color: #111;
}

/* No plate detected — inverse of plate-generic (dark field, white text) */
.plate-noplate {
  background: #1a1a1a;
  border-color: #555;
  color: #ffffff;
}

.plate-noplate .plate-state-name {
  color: #aaaaaa;
}

.plate-noplate .plate-number {
  color: #ffffff;
}