/* Number plates, by country (templates/_partials/_reg_plate.html.twig, src/Module/Reference/Plate/NumberPlateCatalog.php).

   Every plate is laid out in real millimetres. The partial sets, on the plate itself: --ph the plate's height and --ch / --cw / --cn the
   character height / width / narrow width (the 1 and the I), --gap between characters, --gg between groups, --hy a hyphen, all in mm, and
   --plate-h the height the plate is drawn at in the page. --mm is therefore "one real millimetre, at this size", and every width,
   margin and the lettering's size are multiples of it — so the spacing a plate's standard calls for holds at any size.
   GB is BS AU 145e (79 mm characters, 11 mm apart, 33 mm between the age identifier and the three letters on a 111 mm plate);
   the rest are the front plate at that country's standard size and proportions. Colours are pinned, not theme tokens, so a plate
   reads the same in light and dark. */
.plate {
    --mm: calc(var(--plate-h) / var(--ph));
    --face: #ffffff; --face-solid: var(--face); --ink: #14171a; --edge: #14171a; --band: calc(40 * var(--mm)); --pad: calc(15 * var(--mm));
    box-sizing: border-box;
    height: var(--plate-h);
    padding: 0 var(--pad);
    gap: 0;
    font-family: 'Barlow Condensed', var(--bs-font-display);
    font-weight: 700;
    /* Barlow Condensed's capitals are 0.7em tall: size the em so the capitals are exactly the plate's character height. */
    font-size: calc((var(--ch) + var(--thin)) / 0.7 * var(--mm));
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink);
    border: calc(1.5 * var(--mm)) solid var(--edge);
    border-radius: calc(7 * var(--mm));
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.18);
}
.plate:not(.reg-plate--uk) { background: var(--face); }
.plate__chars { display: inline-flex; align-items: center; gap: calc(var(--gap) * var(--mm)); height: 100%; flex: none; }
/* A plate keeps its own size: a row it sits in (a header, a card) must not squeeze it, and nothing on it shrinks to fit. */
.plate { flex: none; }
.plate__chars > *, .plate__seals > * { flex-shrink: 0; }
/* Each character sits in a cell of the plate's character width and is stretched or squeezed (--sx, from the font's measured ink width)
   until its ink fills the cell, so the space between characters is the standard's, edge to edge. */
.plate__c { display: inline-block; width: calc(var(--cw) * var(--mm)); text-align: center; transform: scaleX(var(--sx, 1)); -webkit-text-stroke: calc(var(--thin) * var(--mm)) var(--face-solid); }
.plate__c--narrow { width: calc(var(--cn) * var(--mm)); }
/* The numeral 1 is as narrow as it is: about two thirds of a digit cell, its own width (--w, mm). */
.plate__c--one { width: calc(var(--w) * var(--mm)); }
/* A character the plate font does not carry (a region character) keeps its natural width. */
.plate__c--free { width: auto; transform: none; }
/* A gap between groups is `--gg` from character to character: the flex gap already supplies --gap on each side of it. */
.plate__sp { display: inline-block; width: calc((var(--gg) - 2 * var(--gap)) * var(--mm)); }
.plate__hy { display: inline-block; width: calc(var(--hy) * var(--mm)); text-align: center; transform: scaleX(var(--sx, 1)); -webkit-text-stroke: calc(var(--thin) * var(--mm)) var(--face-solid); }
.plate__dot { display: inline-block; width: calc(10 * var(--mm)); text-align: center; }

/* ---- GB: the yellow rear plate with the blue GB band (drawn in the base styles) ---- */
.reg-plate--uk.plate {
    --face-solid: #ffdc26;
    --strip: calc(1.625rem + 2px);
    padding: 0 calc(15 * var(--mm)) 0 calc(var(--strip) + 15 * var(--mm));
    border: 2px solid #15171a;
    border-radius: 7px;
    color: #15171a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* ---- European front plates: white, the blue band with the ring of stars and the distinguishing sign ---- */
.reg-plate--eu { padding-left: calc(var(--band) + 15 * var(--mm)); border-radius: calc(6 * var(--mm)); }
.plate__band {
    position: absolute; inset: 0 auto 0 0; width: var(--band); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(11 * var(--mm)) 0 calc(9 * var(--mm)); box-sizing: border-box;
    background: #003399; color: #fff; border-radius: calc(4.5 * var(--mm)) 0 0 calc(4.5 * var(--mm)); font-family: var(--bs-font-ui);
}
.plate__stars { width: 62%; height: auto; display: block; }
.plate__sign { font-size: calc(18 * var(--mm)); line-height: 1; font-weight: 700; letter-spacing: 0.02em; margin-top: calc(1 * var(--mm)); }
.reg-plate--plain .plate__sign { font-size: calc(24 * var(--mm)); margin: 0; }
/* Netherlands: the amber-yellow plate, a wider band with a large NL, and long hyphens. */
.reg-plate--nl.plate { --band: calc(52 * var(--mm)); --face: #f5ae0e; --face-solid: #f5ae0e; background: linear-gradient(180deg, #f9b920, #f2a700); }
.reg-plate--nl .plate__sign { font-size: calc(22 * var(--mm)); }
/* Belgium: red characters. */
.reg-plate--be { --ink: #c8102e; }
/* India: the band reads IND, with the chakra drawn in the hologram's place. */
.reg-plate--in .plate__sign { font-size: calc(18 * var(--mm)); }
.reg-plate--in .plate__band::before { content: ''; width: calc(18 * var(--mm)); height: calc(18 * var(--mm)); border-radius: 50%; border: calc(1.6 * var(--mm)) solid #fff; margin-bottom: calc(4 * var(--mm)); }
/* France: a second blue band down the right, with the region's logo square (blank: the region is not in the registration). */
.reg-plate--fr.plate { --band: calc(50 * var(--mm)); --rband: calc(50 * var(--mm)); padding-right: calc(var(--rband) + 12 * var(--mm)); border-width: calc(3 * var(--mm)); border-radius: calc(8 * var(--mm)); }
/* United Arab Emirates (the Dubai plate): no band; the emirate's name, in Arabic over English, between the category letter and the number. */
.reg-plate--ae.plate { --pad: calc(14 * var(--mm)); border-width: calc(2 * var(--mm)); border-radius: calc(8 * var(--mm)); /* the standard 520 mm plate even for a short number, the number following the emirate with the spare length on the right; a longer number lengthens it */ min-width: calc(520 * var(--mm)); }
.plate__seals.plate__seals--ae { flex-direction: column; justify-content: space-between; align-items: center; gap: 0; width: calc(117 * var(--mm)); height: calc(var(--ch) * var(--mm)); margin-inline: calc(28 * var(--mm)) calc(32 * var(--mm)); }
/* As measured on the plate: the block is exactly as tall as the characters, the Arabic in the top ~45 mm and DUBAI (capitals 27 mm) at the foot. */
.plate__emirate-ar { display: flex; align-items: flex-start; justify-content: center; width: 100%; height: calc(46 * var(--mm)); font-family: 'Noto Naskh Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, 'Arial Unicode MS', serif; font-size: calc(40 * var(--mm)); line-height: 1; font-weight: 700; text-transform: none; }
.plate__emirate-ar::before { content: none; }
.plate__emirate-en { display: block; font-size: calc(38.5 * var(--mm)); letter-spacing: 0.22em; margin-right: -0.22em; line-height: 0.7; padding-top: calc(1 * var(--mm)); }
/* Spain: a heavy black frame and a large E in the band. */
.reg-plate--es.plate { border-width: calc(4.5 * var(--mm)); border-radius: calc(10 * var(--mm)); }
.reg-plate--es .plate__sign { font-size: calc(24 * var(--mm)); }
/* Italy: the EU band with a small I, and a right band carrying a gold ring where the year and province badge goes. */
.reg-plate--it.plate { --rband: calc(46 * var(--mm)); padding-right: calc(var(--rband) + 12 * var(--mm)); border-width: calc(3 * var(--mm)); border-radius: calc(10 * var(--mm)); }
.reg-plate--it .plate__sign { font-size: calc(15 * var(--mm)); }
.reg-plate--it .plate__logo { width: calc(30 * var(--mm)); height: calc(30 * var(--mm)); margin-top: calc(10 * var(--mm)); background: transparent; border: calc(2.4 * var(--mm)) solid #ffcc00; border-radius: 50%; box-sizing: border-box; }
.plate__rband { position: absolute; inset: 0 0 0 auto; width: var(--rband, var(--band)); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: #003399; border-radius: 0 calc(4.5 * var(--mm)) calc(4.5 * var(--mm)) 0; }
.plate__logo { display: block; width: calc(36 * var(--mm)); height: calc(36 * var(--mm)); margin-top: calc(9 * var(--mm)); background: #fff; border-radius: calc(2 * var(--mm)); }
/* Germany: the state seal over the inspection badge, between the district code and the letters. */
.plate__seals { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--mm)); width: calc((var(--gg) - 2 * var(--gap)) * var(--mm)); }
.plate__seal { display: block; width: calc(37 * var(--mm)); height: calc(37 * var(--mm)); }
.plate__seals--de { gap: calc(3 * var(--mm)); }
/* The German band is a little wider and its sign larger, as on the plate. */
.reg-plate--de { --band: calc(44 * var(--mm)); }
.reg-plate--de .plate__sign { font-size: calc(22 * var(--mm)); }

/* ---- Switzerland: black frame, the canton shield between the canton letters and the number ---- */
.reg-plate--ch { --pad: calc(8 * var(--mm)); border-width: calc(3 * var(--mm)); border-radius: calc(6 * var(--mm)); }
.plate__shield { display: block; width: calc(30 * var(--mm)); height: calc(34 * var(--mm)); margin-inline: calc(var(--gap) * var(--mm)); background: linear-gradient(135deg, #d52b1e 0 50%, #fff 50% 100%); border: calc(2 * var(--mm)) solid #14171a; border-radius: 0 0 calc(15 * var(--mm)) calc(15 * var(--mm)); box-sizing: border-box; }
.plate__seals--ch { width: auto; flex-direction: row; }

/* ---- USA, Canada, Australia, New Zealand: the plate's header above the number, navy lettering ---- */
.reg-plate--us { --ink: #0b2a6b; --edge: #0b2a6b; --pad: calc(18 * var(--mm)); flex-direction: column; justify-content: center; padding-top: calc(4 * var(--mm)); border-radius: calc(10 * var(--mm)); }
.reg-plate--us .plate__header { position: absolute; top: calc(8 * var(--mm)); left: 0; right: 0; text-align: center; font-size: calc(24 * var(--mm)); letter-spacing: 0.12em; color: #b31b2c; font-family: var(--bs-font-ui); font-weight: 700; }
.reg-plate--us .plate__chars { height: auto; margin-top: calc(18 * var(--mm)); }

/* ---- Japan: white face, green lettering and frame ---- */
.reg-plate--jp { --ink: #0b6b3a; --edge: #0b6b3a; --pad: calc(18 * var(--mm)); border-width: calc(3 * var(--mm)); border-radius: calc(10 * var(--mm)); }
.reg-plate--jp::after { content: ''; position: absolute; inset: calc(6 * var(--mm)); border: calc(1.4 * var(--mm)) solid #0b6b3a; border-radius: calc(5 * var(--mm)); pointer-events: none; }

/* ---- China: blue face, white characters and inner line ---- */
.reg-plate--cn { --face: #0a3d9b; --ink: #fff; --edge: #fff; --pad: calc(14 * var(--mm)); border-width: calc(2 * var(--mm)); box-shadow: 0 0 0 calc(2 * var(--mm)) #0a3d9b; border-radius: calc(6 * var(--mm)); }
.reg-plate--cn::after { content: ''; position: absolute; inset: calc(5 * var(--mm)); border: calc(1.4 * var(--mm)) solid #fff; border-radius: calc(4 * var(--mm)); pointer-events: none; opacity: 0.9; }

/* ---- Brazil (Mercosul): the blue top band with BRASIL ---- */
.reg-plate--br { --pad: calc(14 * var(--mm)); flex-direction: column; justify-content: flex-end; padding-bottom: calc(10 * var(--mm)); border-radius: calc(8 * var(--mm)); overflow: hidden; }
.reg-plate--br .plate__header { position: absolute; top: 0; left: 0; right: 0; height: calc(26 * var(--mm)); display: flex; align-items: center; justify-content: center; background: #003399; color: #fff; font-size: calc(18 * var(--mm)); letter-spacing: 0.3em; font-family: var(--bs-font-ui); font-weight: 700; }
.reg-plate--br .plate__chars { height: auto; }

/* ---- Russia: the region in its own box with RUS and the flag ---- */
.reg-plate--ru { --pad: calc(10 * var(--mm)); padding-right: 0; }
.plate__rule { display: inline-block; align-self: stretch; width: calc(2 * var(--mm)); background: var(--ink); margin-block: calc(-1 * var(--mm)); }
.plate__rus { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--mm)); width: calc(48 * var(--mm)); font-size: calc(18 * var(--mm)); font-family: var(--bs-font-ui); }
.plate__flag { display: block; width: calc(26 * var(--mm)); height: calc(17 * var(--mm)); background: linear-gradient(#fff 0 33%, #0039a6 33% 66%, #d52b1e 66% 100%); border: calc(1 * var(--mm)) solid #14171a; box-sizing: border-box; }

/* ---- Any other country: the plain white plate with its ISO code ---- */
.reg-plate--generic .plate__iso { position: absolute; top: calc(5 * var(--mm)); left: calc(9 * var(--mm)); font-size: calc(14 * var(--mm)); letter-spacing: 0.1em; font-family: var(--bs-font-ui); }
.reg-plate--generic { --pad: calc(16 * var(--mm)); border-width: calc(2.5 * var(--mm)); border-radius: calc(7 * var(--mm)); }

/* A plate that is a link keeps the plate face exactly (see the base .reg-plate rules). */
a.plate { text-decoration: none; }