/* Signal Dark — plate INPUT + plate BLUEPRINT screen styles (P4, epic #1525)
 *
 * Ported VERBATIM from tests/parity/mockups/pwa-redesign.html sections 03–04:
 *   .phero / .platebox / .euro / .lookrow   → plate INPUT screen
 *   .bp / .bph / .bpcar / .dim-l / .dims2  → plate BLUEPRINT result
 *   .idrow / .valrow / .valbox             → identity + value panels
 *
 * Shared atoms (.frame, .sb, .cut, .mono, .btn, .sect, .shd, .trow, .fnav,
 * .hdr, .hb, .ht, .hx, design tokens) live in signal-dark.css — NOT here.
 */

/* ── Page-level header (plate screens) ─────────────────────────────────────
 * .hdr / .hb / .ht shared in signal-dark.css; define the ones specific to
 * the plate pages (none — the shared set covers it).
 * Here we just add the gap override the plate-input page uses. */

/* .hb is rendered as <button> — reset browser defaults so it inherits the
 * shared block style without UA button chrome. */
.hdr .hb {
  border: none; padding: 0; background: var(--card2);
  outline: 1px solid var(--line2);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text); flex-shrink: 0; cursor: pointer;
}

/* ── PLATE INPUT screen ─────────────────────────────────────────────────── */

/* Hero text block */
.phero {
  text-align: center;
  padding: 26px 24px 0;
}
.phero h1 {
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -.035em;
  line-height: 1;
}
.phero h1 em {
  font-style: normal;
  color: var(--accT);
}
.phero .sub {
  font-size: 11px;
  color: var(--mut);
  margin-top: 8px;
  line-height: 1.5;
}

/* Plate input card */
.platebox {
  margin: 22px 26px 0;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 18px 16px;
}
.platebox .pl {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  color: var(--mut2);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 11px;
}

/* EU-style plate widget */
.euro {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
  height: 62px;
  position: relative;          /* contain the absolute input overlay (was escaping ~500px) */
  box-shadow: 0 0 0 1px var(--line2), 0 10px 28px rgba(0, 0, 0, .4);
}
.proto.light .euro {
  box-shadow: 0 0 0 1px var(--line2), 0 8px 20px rgba(0, 0, 0, .14);
}
.euro .band {
  width: 40px;
  height: auto;                  /* override detail.css's generic `.band{height:12px}` */
  margin: 0;                     /* override detail.css's `.band{margin-top:24px}` */
  align-self: stretch;           /* fill the 62px input height */
  background: #003399;           /* EU-flag blue, matching the monolith plate */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}
.euro .band span {
  color: #fff;
  font-family: Arial, "Helvetica Neue", sans-serif;  /* real plate uses sans, not mono */
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
}
.euro .band .stars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
}
.euro .band .stars i {
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, .85);
  border-radius: 50%;
}
.euro .num {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 29px;
  letter-spacing: .14em;
  color: #15171b;
}
/* Invisible real input sitting atop the display number */
.euro input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: text;
  font-size: 16px; /* prevent iOS zoom */
}
.euro .num .car {
  display: inline-block;
  width: 2px;
  height: 30px;
  background: #15171b;
  margin-left: 4px;
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
/* Focused state */
.euro.focused { box-shadow: 0 0 0 2px var(--accT), 0 10px 28px rgba(0, 0, 0, .4); }

.platebox .btn { width: 100%; margin-top: 15px; }

/* GDPR note */
.gdpr {
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  color: var(--mut2);
  margin-top: 12px;
  letter-spacing: .06em;
}
.gdpr iconify-icon { vertical-align: -2px; }

/* Recent lookups list */
.lookrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s;
}
.lookrow:last-child { border-bottom: none; }
.lookrow:hover { background: var(--card2); }
.lookrow .lp {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 10px;
  background: #fff;
  color: #15171b;
  padding: 3px 8px;
  border-radius: 3px;
  flex-shrink: 0;
}
.lookrow .lt { flex: 1; font-size: 11.5px; font-weight: 700; min-width: 0; }
.lookrow .lt small {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  color: var(--mut2);
  font-weight: 400;
  margin-top: 1px;
}
.lookrow iconify-icon { color: var(--mut2); flex-shrink: 0; }

/* ── PLATE BLUEPRINT result screen ──────────────────────────────────────── */

/* Blueprint card (green grid + car silhouette + dimensions) */
.bp {
  margin: 14px 18px 0;
  background: var(--card);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
/* Green dot-grid background */
.bp .gridbg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(214, 255, 61, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 255, 61, .05) 1px, transparent 1px);
  background-size: 17px 17px;
  pointer-events: none;
}
.proto.light .bp .gridbg {
  background-image:
    linear-gradient(rgba(216, 58, 18, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 58, 18, .07) 1px, transparent 1px);
}

/* Blueprint header row */
.bp .bph {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
}
.bp .bph .t {
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  color: var(--accT);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.bp .bph .n {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  color: var(--mut2);
}

/* Silhouette / drawing area. Side-profile only now (front view dropped),
 * so the vertical padding is tightened to shrink the readout window. */
.bp .bpcar {
  position: relative;
  padding: 12px 26px 2px;
  display: flex;
  justify-content: center;
}
.bp .bpcar img {
  max-width: 100%;
  display: block;
  filter: drop-shadow(0 0 18px rgba(214, 255, 61, .12));
}
/* Inline SVG silhouette from the live blueprint stage (js/app.js pattern).
 * The fetched potrace SVG carries an intrinsic `height="408pt"` (~545px); its
 * JS wrapper is a fixed `width:Wpx;height:Hpx;overflow:hidden` box. Without an
 * explicit `height`, the SVG keeps that intrinsic pt height and the car body is
 * clipped below the box — leaving the grid + dimension lines but a blank car.
 * Force the silhouette to FILL its sized box (mirrors app.css `.bp-svgbox svg`).
 * `:not(.bp-dl)` excludes the dimension-line SVGs, which carry their own
 * width/height attributes and must keep their intrinsic 18px height. */
.bp .bpcar svg:not(.bp-dl) {
  width: 100%;
  height: 100%;
  display: block;
}
.bp .bpcar svg.bp-dl {
  display: block;
}
/* Spinner while silhouettes load */
.bp .bpcar .spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  width: 100%;
}

/* Length is drawn as the ruler under the car silhouette (dimLine() in
 * plate.js). The legacy full-width `.dim-l` element was removed to dedupe the
 * length readout, so its styles are gone too. */

/* W / H / WB secondary dimension row (single compact line) */
.bp .dims2 {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 12px 0 11px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  color: var(--mut2);
  letter-spacing: .08em;
}
.bp .dims2 b { color: var(--mut); font-weight: 500; }

/* Identity spec rows */
.idrow {
  display: flex;
  justify-content: space-between;
  padding: 8px 13px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.idrow:last-child { border-bottom: none; }
.idrow .k {
  color: var(--mut);
  text-transform: uppercase;
  font-size: 8.5px;
  letter-spacing: .1em;
  font-weight: 700;
  padding-top: 2px;
  font-family: "JetBrains Mono", monospace;
}
.idrow .v { font-weight: 800; }

/* Market value boxes */
.valrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 18px 0;
}
.valbox {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 10px 14px;
  flex: 1;
}
.valbox .k {
  font-family: "JetBrains Mono", monospace;
  font-size: 7.5px;
  color: var(--mut2);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.valbox .v {
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -.02em;
  margin-top: 2px;
  color: var(--accT);
}
.valbox .v.neutral { color: var(--text); }
.valbox .s {
  font-family: "JetBrains Mono", monospace;
  font-size: 7.5px;
  color: var(--mut2);
  margin-top: 2px;
}

/* CTA row at the bottom of the blueprint screen */
.bp-ctas {
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  margin-top: auto;
}
.bp-ctas .btn.p { flex: 1; }
.bp-ctas .btn.s { flex: 0 0 116px; }

/* Error / empty state */
.plate-err {
  padding: 26px 18px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--mut2);
  letter-spacing: .08em;
  line-height: 1.7;
}

/* Loading spinner (shared mini) */
.sd-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--line2);
  border-top-color: var(--accT);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 3D scanning-plate loader (ported from the monolith plate lookup) ─────── */
.plate-loader { display: flex; flex-direction: column; align-items: center; padding: 46px 18px 30px; }
.plate-3d-scene { perspective: 1000px; position: relative; display: inline-block; }
.plate-3d-frame { width: 290px; height: 145px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card); box-shadow: 0 8px 40px rgba(0,0,0,.5); overflow: hidden; display: flex; align-items: center; justify-content: center; animation: plate3d-spin 4s linear infinite; transform-style: preserve-3d; }
@keyframes plate3d-spin { 0%,50% { transform: rotateX(12deg) rotateY(12deg); } 75%,100% { transform: rotateX(12deg) rotateY(372deg); } }
.plate-3d-inner { width: 94%; height: 88%; background: #e2e2e5; border-radius: 8px; box-shadow: inset 0 2px 8px rgba(0,0,0,.12); display: flex; align-items: center; position: relative; overflow: hidden; }
.plate-3d-blue { position: absolute; left: 0; top: 0; bottom: 0; width: 12%; background: #003399; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 0; z-index: 10; }
.plate-3d-stars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; width: 16px; opacity: .9; }
.plate-3d-stars i { width: 3px; height: 3px; background: #fc0; border-radius: 50%; margin: auto; }
.plate-3d-cy { font-size: 9px; font-weight: 700; color: #fff; font-family: Arial, sans-serif; margin-bottom: 2px; }
.plate-3d-num { flex: 1; margin-left: 12%; z-index: 10; display: flex; align-items: center; justify-content: center; }
.plate-3d-num span { font-family: "JetBrains Mono", monospace; font-size: 2.5rem; font-weight: 800; letter-spacing: .12em; color: #121416; user-select: none; }
.plate-3d-beam { position: absolute; top: 0; bottom: 0; width: 12px; z-index: 20; background: linear-gradient(90deg, transparent, #ff0000, transparent); filter: drop-shadow(0 0 15px #ff0000) drop-shadow(0 0 5px #ff0000); animation: plate3d-scan 2s linear infinite; }
@keyframes plate3d-scan { 0% { left: -10%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 110%; opacity: 0; } }
.plate-3d-corner { position: absolute; width: 28px; height: 28px; z-index: 5; }
.plate-3d-corner.tl { top: -8px; left: -8px; border-top: 2px solid var(--accT); border-left: 2px solid var(--accT); }
.plate-3d-corner.br { bottom: -8px; right: -8px; border-bottom: 2px solid var(--accT); border-right: 2px solid var(--accT); }
.plate-analyze { margin-top: 30px; width: 100%; max-width: 300px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.plate-analyze-label { font-family: "JetBrains Mono", monospace; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--accT); text-align: center; }
.plate-progress-track { width: 100%; height: 4px; background: var(--card2); border-radius: 99px; overflow: hidden; }
.plate-progress-fill { height: 100%; background: var(--accT); border-radius: 99px; animation: plate3d-progress 2.5s ease-out forwards; }
@keyframes plate3d-progress { 0% { width: 0; } 60% { width: 55%; } 100% { width: 75%; } }

@media (prefers-reduced-motion: reduce) {
  .plate-3d-frame, .plate-3d-beam, .plate-progress-fill { animation: none; }
  .euro .num .car { animation: none; opacity: 1; }
  .sd-spinner { animation: none; }
}

/* Keyboard focus visibility for .lookrow (role=button) elements */
.lookrow:focus-visible {
  outline: 2px solid var(--accT);
  outline-offset: -2px;
}
.hdr .hb:focus-visible {
  outline: 2px solid var(--accT);
  outline-offset: 1px;
}