/* Suspect's composition (DESIGN.md), loaded after site.css, which stays identical to Evil Twin's. The home page's top
   is two columns, the words on the left and the check box with the counters on the right; under it the lineup wall
   runs full bleed. Display type is Antonio in caps. Colours and fonts come from tokens.css. */

/* ---------- type ---------- */
.h-xl, .h-l, .h-m, .h-s, .brand, .step h3, .tool h3, .result-block > h2, .verdict h2, .dialog h2, .empty h3, .nf h1 { text-transform: uppercase; }
.h-xl { font-size: clamp(56px, 8.2vw, 106px); line-height: .9; }
.h-l { font-size: clamp(40px, 5vw, 62px); line-height: .94; }
.h-m { font-size: clamp(30px, 3.2vw, 38px); line-height: 1; }
.h-s { font-size: 24px; line-height: 1.05; }
.brand { font-size: 27px; letter-spacing: .01em; gap: 9px; }
.brand svg { width: 30px; height: 30px; }
.step h3 { font-size: 28px; line-height: 1; }
.step .n { font-size: 46px; }
.tool h3 { font-size: 26px; line-height: 1; }
.result-block > h2, .verdict h2 { font-size: 34px; line-height: 1; }
.dialog h2 { font-size: 32px; line-height: 1; }
.empty h3 { font-size: 28px; line-height: 1; }
.stats b { font: 700 38px/1 var(--disp); letter-spacing: 0; }
.kicker { border: 0; padding: 0; border-radius: 0; gap: 10px; }
.kicker .dot { width: 18px; height: 6px; border-radius: 1px; }

/* a suspect's different middle is taped, as on its placard */
.pair .m { color: var(--on-acc); background: var(--acc); }
.pair .row.real .m { color: var(--ink); background: none; }

/* ---------- home: the top ---------- */
.hero { display: block; padding-top: 40px; }
.hero > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 64px; align-items: start; }
.hero > div:first-child > * { grid-column: 1; }
.hero > div:first-child > .kicker { grid-row: 1; }
.hero > div:first-child > h1 { grid-row: 2; margin: 20px 0 0; }
.hero h1 .acc { display: block; color: inherit; }
.hero > div:first-child > .lead { grid-row: 3; margin-top: 20px; max-width: 680px; }
/* the right column shares the headline's row: the check box at its top, the line and the counters under it
   (selectors as specific as the column-1 default above, and later, so they win) */
.hero > div:first-child > .askbox, .hero > div:first-child > .alt, .hero > div:first-child > .stats { grid-column: 2; grid-row: 2; align-self: start; max-width: none; }
.hero > div:first-child > .askbox { margin-top: 28px; }
.hero > div:first-child > .alt { margin-top: 104px; }
.hero > div:first-child > .stats { margin-top: 146px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero .stats div { font-size: 13px; line-height: 1.3; }

/* ---------- home: the lineup wall ---------- */
.lineup { --H: clamp(240px, 23vw, 330px); margin-top: 44px; margin-inline: calc(50% - 50vw); }
.wall { position: relative; height: calc(var(--H) + 96px); background: var(--wall); border-block: 1px solid var(--line); overflow: hidden; }
.rules .rule { position: absolute; left: 0; right: 0; height: 1px; background: var(--rule); top: calc(22px + var(--k) * (var(--H) + 50px) / 6); }
.rules .rule b { position: absolute; left: 22px; top: -8px; padding-right: 8px; font: 400 12px/1 var(--mono); color: var(--rule-ink); background: var(--wall); }
.slots { position: absolute; left: max(76px, calc(50% - 680px)); right: max(28px, calc(50% - 720px)); top: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.slot { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.slot .fig { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: calc(var(--H) * var(--w)); }
.slot .fig svg { height: 100%; width: auto; max-width: none; }
.slot .fig path { fill: var(--fig); }
.slot.real .fig path { fill: var(--fig-real); }
.slot .num { position: absolute; top: 30px; right: 4px; font: 700 26px/1 var(--disp); color: var(--num); }
.placard { position: relative; width: 100%; max-width: 230px; margin-bottom: calc(var(--H) * .24); padding: 10px 11px 9px; border-radius: 4px; background: var(--plate); color: var(--plate-ink); }
.placard .addr { display: block; font-size: min(13.5px, calc((100vw - 184px) / 54 - 3.1px)); line-height: 1.55; letter-spacing: -.01em; }
.placard .ln { display: block; white-space: nowrap; }
.slot.sus .placard .m { background: var(--acc); }
/* the placard's label lines (not .tag, which site.css draws as a pill) */
.ptag { display: grid; gap: 2px; margin-top: 7px; font: 600 10.5px/1.25 var(--text); text-transform: uppercase; letter-spacing: .05em; color: var(--plate-tag); }
.ptag i { font-style: normal; color: var(--plate-ink); }
.stamp { position: absolute; z-index: 1; top: calc(76px + var(--H) * .06); left: 50%; transform: translateX(-50%) rotate(-3deg); padding: 7px 10px 5px; border: 2px solid var(--acc); background: var(--wall); color: var(--acc); font: 700 19px/1 var(--disp); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.lineup-foot { display: flex; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; padding-top: 14px; font-size: 13px; color: var(--mute); }
.lineup-foot .links a { color: var(--ink); }

/* the report form's one column may shrink below the file input's natural width (313 px), so 278 px phones fit */
.form { grid-template-columns: minmax(0, 1fr); }
.drop input[type='file'] { max-width: 100%; min-width: 0; }

/* a scan's summary chips carry whole sentences: they wrap instead of pushing the page sideways on small phones */
.scan-sum .chip { white-space: normal; height: auto; min-height: 34px; padding-block: 6px; line-height: 1.35; }

/* a full header between the phone menu and 1180 px: the contract chip goes, the nav tightens */
.nav a { white-space: nowrap; }
@media (max-width: 1180px) { .nav { gap: 18px; } .top .right .ca-chip { display: none; } }

/* the one motion moment: each suspect's middle is taped on, left to right, once */
@media (prefers-reduced-motion: no-preference) {
  .slot.sus .placard .m { background: linear-gradient(var(--acc), var(--acc)) no-repeat left / 0 100%; animation: tape .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.35s + var(--i) * .12s); }
}
@keyframes tape { to { background-size: 100% 100%; } }

/* ---------- tablets and phones: the lineup becomes rows, one suspect per row ---------- */
@media (max-width: 1020px) {
  .hero > div:first-child { grid-template-columns: minmax(0, 1fr); }
  .hero > div:first-child > *, .hero > div:first-child > .askbox, .hero > div:first-child > .alt, .hero > div:first-child > .stats { grid-column: 1; grid-row: auto; }
  .hero > div:first-child > .askbox { margin-top: 28px; }
  .hero > div:first-child > .alt { margin-top: 14px; }
  .hero > div:first-child > .stats { margin-top: 30px; }
  .lineup { margin-top: 44px; }
  .wall { height: auto; padding: 6px 24px 16px; }
  .rules { display: none; }
  .slots { position: static; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .set { column-gap: 20px; border-bottom: 1px solid var(--rule); }
  .slot { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: end; gap: 12px; padding-top: 38px; }
  .slot .fig { position: relative; left: auto; bottom: auto; transform: none; height: auto; width: 54px; }
  .slot .fig svg { width: 100%; height: auto; }
  .slot .num { top: 10px; left: 2px; right: auto; font-size: 20px; }
  .placard { margin: 0 0 12px; }
  .placard .addr { font-size: 13px; }
  .stamp { top: 8px; left: auto; right: 0; transform: rotate(-3deg); padding: 4px 7px 3px; font-size: 15px; }
}
@media (max-width: 720px) {
  .wall { padding: 4px 16px 14px; }
  .set { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .set .slot { border-bottom: 1px solid var(--rule); }
  .placard .addr { font-size: clamp(11.5px, 3.6vw, 14px); }
  /* a whole address on one line where it fits: Fragment Mono advances 0.618 em, so 44 characters take 27.2 em
     (site.css's 26.6 is Spline Sans Mono's) */
  .pair .addr { font-size: max(10px, min(15px, calc((100vw - 84px) / 27.6))); }
  .hero > div:first-child > .stats { grid-template-columns: 1fr 1fr; }
}