/* Number plate decoder: the decoded plate and its leader-line columns.
   One unit, --s, is one millimetre of a 520 x 111mm rear plate. The characters are 79mm
   tall (UK-VRM caps are .72em, so the font is 79/.72), and the font's own sidebearings
   already encode the 11mm character gap. */
.dp-fit { container-type: inline-size; }
.dp-scope { --s: min(1px, calc(100cqw / 520)); position: relative; width: calc(520 * var(--s)); max-width: 100%; }

.dp-plate,
.report-tool-page .tool-plate.dp-input {
  --dp-face: #f9c80e;
  --dp-chars: #161616;
  --dp-band: #0b3a9c;
  position: relative; display: flex; align-items: stretch;
  width: calc(520 * var(--s)); height: calc(111 * var(--s));
  border-radius: calc(8 * var(--s));
  background-color: var(--dp-face);
  background-image:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .26) 44%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .08));
  color: var(--dp-chars);
  font-family: "UK-VRM", monospace; font-size: calc(109.7 * var(--s)); font-weight: 400; line-height: 1;
  box-shadow:
    inset 0 0 0 calc(2 * var(--s)) rgba(0, 0, 0, .16),
    inset 0 calc(2 * var(--s)) calc(3 * var(--s)) rgba(255, 255, 255, .35),
    0 calc(3 * var(--s)) calc(9 * var(--s)) rgba(0, 0, 0, .28);
  text-shadow: 0 calc(1.5 * var(--s)) 0 rgba(255, 255, 255, .35);
}
.dp-band,
.report-tool-page .dp-input .dp-input-band {
  flex: none; width: calc(40 * var(--s)); padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(5 * var(--s));
  background: var(--dp-band); color: #fff;
  border-radius: calc(8 * var(--s)) 0 0 calc(8 * var(--s));
  font-family: Jost, system-ui, sans-serif; font-size: calc(17 * var(--s)); font-weight: 700; line-height: 1; letter-spacing: .02em;
  text-shadow: none; user-select: none;
}
.dp-band svg,
.dp-input-band svg { display: block; width: calc(28 * var(--s)); height: auto; }

/* Not a UK plate: Irish (Republic) registrations are drawn on a white face, with no UK band */
.dp-plate[data-face="white"],
.report-tool-page .tool-plate.dp-input[data-face="white"] { --dp-face: #f5f5f1; }

/* The input is the same plate at 60% scale: the band follows the decoded format (current plates only) */
.dp-input-fit { margin: 0; }
.report-tool-page .tool-plate.dp-input {
  --s: min(.6px, calc(100cqw / 520));
  gap: 0; margin-inline: 0; padding: 0; border: 0; overflow: visible;
}
.dp-input[data-band="off"] .dp-input-band { display: none; }
.report-tool-page .tool-plate.dp-input .plate-input {
  flex: 1 1 auto; width: 100%; height: 100%; padding: 0 calc(10 * var(--s));
  color: var(--dp-chars); font-family: "UK-VRM", monospace; font-size: calc(109.7 * var(--s)); font-weight: 400; line-height: 1;
  letter-spacing: 0; text-align: center; text-shadow: inherit; background: transparent;
}
.report-tool-page .tool-plate.dp-input .plate-input::placeholder { color: var(--dp-chars); opacity: .35; letter-spacing: 0; }
.report-tool-page .tool-plate.dp-input:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }

.dp-chars { flex: 1 1 auto; display: flex; align-items: stretch; justify-content: center; padding: 0 calc(10 * var(--s)); }
.dp-grp { position: relative; display: flex; align-items: center; white-space: pre; transition: opacity .15s; }
.dp-grp.dp-gap { margin-left: calc(22 * var(--s)); } /* 33mm group gap = 11mm in the font + 22mm */
.dp-plate[data-active] .dp-grp:not(.on) { opacity: .3; }

.dp-callout { position: relative; width: calc(520 * var(--s)); max-width: 100%; }
.dp-leaders { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dp-leaders path { fill: none; stroke: var(--color-btn-border-hover, #b9bfc7); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .15s; }
.dp-leaders path.on { stroke: var(--color-ink, #11161c); }

.dp-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 44px 0 0; padding: 0; list-style: none; }
.dp-col { min-width: 0; padding: 0 12px 0 0; transition: opacity .15s; }
.dp-col + .dp-col { padding-left: 12px; border-left: 1px solid var(--color-divider, #e5e7eb); }
.dp-cols[data-active] .dp-col:not(.on) { opacity: .4; }
.dp-col-chars { display: none; font-family: "UK-VRM", monospace; font-size: 22px; line-height: 1; letter-spacing: .02em; }
.dp-col-k { color: var(--color-muted, #5a636e); font-size: var(--text-label, 12px); line-height: 1.2; }
.dp-col-v { margin-top: 2px; color: var(--color-ink, #11161c); font-size: var(--text-body, 14.5px); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.dp-col-s { margin-top: 2px; color: var(--color-muted, #5a636e); font-size: var(--text-body-sm, 13px); line-height: 1.35; overflow-wrap: anywhere; }

/* Narrow: the leaders drop and the columns become a key, group characters first */
@container (max-width: 440px) {
  .dp-leaders { display: none; }
  .dp-cols { grid-auto-flow: row; margin-top: 18px; }
  .dp-col, .dp-col + .dp-col { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 12px 0; border-left: 0; border-top: 1px solid var(--color-divider, #e5e7eb); }
  .dp-col-chars { display: block; grid-row: span 3; }
  .dp-col-k, .dp-col-v, .dp-col-s { grid-column: 2; }
}

/* Visually hidden: the live status line, and the punctuation that makes each column read as a sentence */
.dp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* One muted line under the plate when the format has no columns */
.dp-plain { margin: 18px 0 0; color: var(--color-muted, #5a636e); font-size: var(--text-body-sm, 13px); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .dp-grp, .dp-col, .dp-leaders path { transition: none; }
}