/* Hallmark · shape: app screen · genre: playful · theme: Werkstatt (by request, shared with the other tools) · redesign: none
 * nav: top bar, wordmark left, the one-line subject right · signature: the wire, with parcels crossing a rough line and a row of twenty tiles that fill in on the other side · states: pick, sending, passed, failed, unlucky, all four passed, no-script, reduced motion
 * axes: mid/geometric-sans/cool · posture: full-palette · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, same system as the sibling tools on purpose; the signature is the wire and its twenty tiles */
@import url("./tokens.css");
@import url("./base.css");
.container { max-width: 1100px; }
.bar { border-bottom: var(--rule-bar) solid var(--color-ink); }
.bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-md); }
.bar b { font-family: var(--font-display); font-size: var(--text-lg); }
.bar span { color: var(--color-muted); font-weight: 600; font-size: var(--text-sm); }
main { padding-block: var(--space-xl) var(--space-3xl); display: grid; gap: var(--space-lg); }
h1 { font-size: var(--text-3xl); max-width: none; } h2 { font-size: var(--text-xl); }
.intro { display: grid; gap: var(--space-xs); } .intro p { color: var(--color-muted); max-width: 62ch; }
.sheet { border: var(--rule-box) solid var(--color-ink); background: var(--color-paper-3); display: grid; }
.sheet > * + * { border-top: var(--rule-box) solid var(--color-ink); }
.pad { padding: var(--space-md) var(--space-lg); display: grid; gap: var(--space-sm); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { display: grid; gap: var(--space-3xs); text-align: left; padding: var(--space-sm) var(--space-md); border: 0; border-left: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); color: var(--color-ink); font: 600 var(--text-sm)/1.2 var(--font-body); cursor: pointer; min-height: 64px; transition: background-color var(--dur-micro) var(--ease-out); }
.step:first-child { border-left: 0; }
.step b { font: 700 var(--text-md)/1.1 var(--font-display); }
.step:hover { background: var(--color-paper-2); }
.step[aria-current=true] { background: var(--color-accent-3); }
.step.done b::after { content: "  passed"; font: 600 var(--text-xs) var(--font-body); color: var(--color-accent); }
.step:focus-visible, .btn:focus-visible, .pf:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.need { max-width: 70ch; font-size: var(--text-lg); }
.pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.pick > * + * { border-left: var(--rule-bar) solid var(--color-ink); }
.pf { display: grid; gap: var(--space-3xs); align-content: center; text-align: left; padding: var(--space-md) var(--space-lg); border: 0; background: var(--color-paper-3); color: var(--color-ink); cursor: pointer; font: 400 var(--text-sm)/1.35 var(--font-body); transition: background-color var(--dur-micro) var(--ease-out); }
.pf b { font: 700 var(--text-2xl)/1 var(--font-display); }
.pf:hover { background: var(--color-paper-2); }
.pf[aria-pressed=true] { background: var(--color-accent); color: var(--color-accent-ink); }
.act { display: grid; gap: var(--space-xs); align-content: center; padding: var(--space-md) var(--space-lg); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-ink); border-radius: 0; background: transparent; color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); } .btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-ink); color: var(--color-paper); } .btn--primary:hover { background: var(--color-ink-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.wire { display: grid; grid-template-columns: 90px minmax(0, 1fr) 90px; align-items: center; padding: var(--space-md) var(--space-lg); gap: var(--space-sm); }
.end { font: 700 var(--text-lg)/1.1 var(--font-display); text-align: center; border: var(--rule-bar) solid var(--color-ink); padding: var(--space-sm) var(--space-2xs); background: var(--color-paper); }
.lane { position: relative; height: 96px; background: var(--color-paper-2); border-block: var(--rule-bar) dashed var(--color-muted); overflow: hidden; }
.pk { position: absolute; left: 0; width: 22px; height: 22px; border: var(--rule-bar) solid var(--color-ink); background: var(--color-accent); will-change: transform, opacity; }
.pk.again { background: var(--color-accent-3); } .pk.lost { background: var(--color-accent-2-deep); } .pk.ack { width: 12px; height: 12px; border-width: 2px; background: var(--color-paper); }
.tiles { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: var(--space-2xs); padding: var(--space-sm) var(--space-lg) var(--space-md); }
.tile { aspect-ratio: 1; min-height: 28px; border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper); display: grid; place-items: center; font: 600 var(--text-xs) var(--font-body); font-variant-numeric: tabular-nums; }
.tile.got { background: var(--color-accent); color: var(--color-accent-ink); } .tile.late { background: var(--color-accent-3); color: var(--color-ink); } .tile.gone { background: var(--color-accent-2-deep); color: var(--color-accent-ink); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-md); padding: 0 var(--space-lg) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); font-weight: 600; }
.legend i { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--color-ink); margin-right: var(--space-xs); vertical-align: -2px; background: var(--color-paper); }
.legend .k1 { background: var(--color-accent); } .legend .k2 { background: var(--color-accent-3); } .legend .k3 { background: var(--color-accent-2-deep); }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats > div { padding: var(--space-sm) var(--space-md); display: grid; gap: var(--space-3xs); border-left: var(--rule-bar) solid var(--color-ink); }
.stats > div:first-child { border-left: 0; }
.stats b { font: 700 var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; } .stats small { font-size: var(--text-sm); color: var(--color-muted); font-weight: 600; }
.stats .care { background: var(--color-accent-3); }
.verdict { padding: var(--space-md) var(--space-lg); display: grid; gap: var(--space-xs); background: var(--color-paper-2); }
.verdict.pass { background: var(--color-accent); color: var(--color-accent-ink); } .verdict.fail { background: var(--color-accent-2-deep); color: var(--color-accent-ink); }
.verdict b { font: 700 var(--text-2xl)/1.05 var(--font-display); } .verdict p { max-width: 70ch; }
.learned { padding: var(--space-md) var(--space-lg); display: grid; gap: var(--space-sm); background: var(--color-accent-3); }
.learned ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2xs); max-width: 70ch; }
.fine { font-size: var(--text-sm); color: var(--color-muted); max-width: 80ch; }
@media (max-width: 760px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .step:nth-child(3) { border-left: 0; } .step:nth-child(n+3) { border-top: var(--rule-bar) solid var(--color-ink); }
  .pick { grid-template-columns: 1fr; } .pick > * + * { border-left: 0; border-top: var(--rule-bar) solid var(--color-ink); }
  .wire { grid-template-columns: 60px minmax(0, 1fr) 60px; padding-inline: var(--space-sm); } .tiles { grid-template-columns: repeat(10, minmax(0, 1fr)); padding-inline: var(--space-sm); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats > div { border-top: var(--rule-bar) solid var(--color-ink); } .stats > div:nth-child(odd) { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .step, .pf, .btn { transition: none; } }