/* OP: Next Mission — processing scan + declassify form (W4). BUNK OPS · Season 01.
   Loops on processing: radar sweep + ORD LOH breathing (2). Declassify: the card's seal sheen (W5) + the scramble
   interval. Only transform + opacity animate (one-shot SVG/filter-free). Rotated bits live inside overflow:hidden.
   Sticky: the topbar (base) at the top; on this screen only the form dock at the bottom and, on tall desktops, the
   dossier column. Never two layers at one edge.
   iOS Safari 15 safe: no :has, @property, color-mix, nesting, container queries. */

/* ================================================================ PROCESSING (finish) */
.scan {
  --rd: 220px;   /* radar diameter */
  --R: 84px;     /* blip orbit radius */
  --bs: 30px;    /* blip size */
  --ws: 4;       /* the locked blip's landed scale (30px x 4 = 120px on a phone) */
  position: relative;
  display: grid;
  justify-items: center;
  row-gap: 10px;
  padding: 0 0 8px;
  text-align: center;
  overflow: hidden; /* kopi, glow and ring pulse never leak into a horizontal scroll */
}
.scan-copy { display: grid; justify-items: center; width: 100%; }
.scan .kicker { margin: 0; }

/* ---- stage 1: ORD LOH! slam + kopi celebrate */
.scan-hero { /* title lockup: ORD LOH! with the kopi celebrating beside the '!' (never on top of it) */
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  padding: 10px 0 0;
}
.scan-slam { position: relative; z-index: 2; flex: none; animation: dc-slam 520ms var(--e-impact) both; }
.scan-slam::before { /* static glow behind the type; it scales with the slam, never animates on its own */
  content: '';
  position: absolute;
  inset: -30% -18% -35%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(240, 86, 29, .42), rgba(240, 86, 29, 0));
  pointer-events: none;
}
.scan-ord {
  position: relative;
  margin: 0;
  /* ORD LOH! measures ~3.34em in Anton: the font is capped so title + 72px kopi fit the column at any width */
  font-size: clamp(52px, min(20vw, calc((100vw - 120px) / 3.4)), 120px);
  line-height: .86;
  color: var(--signal);
  white-space: nowrap;
  transform-origin: 50% 60%;
  animation: dc-breathe 1.6s ease-in-out 600ms infinite alternate;
}
.scan-kopi { /* sits beside the '!', raised a little so it reads as a cheer, not a sticker on the type */
  position: relative;
  z-index: 0;
  flex: none;
  align-self: flex-start;
  width: 72px;
  height: 72px;
  margin: -8px 0 0;
  transform: rotate(12deg);
  animation: dc-kopi 520ms var(--e-impact) 200ms both;
  pointer-events: none;
}

/* ---- stage 2: the scope (radar + HUD readouts) */
.scope {
  --bk: var(--intel);
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 400px;
  padding: 10px 0 6px;
}
.scope.bk4::before { opacity: .7; }
.scope-read {
  position: absolute;
  top: 16px;
  display: grid;
  gap: 2px;
  min-width: 48px;
  text-align: left;
}
.scope-read.l { left: 12px; }
.scope-read.r { right: 12px; text-align: right; }
.scope-read span { font: 600 var(--t-micro)/1.2 var(--f-hud); letter-spacing: .2em; color: var(--dust); }
.scope-read b {
  font: 400 var(--t-num-s)/1 var(--f-display);
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  color: var(--intel);
}
.scope-foot {
  display: none; /* desktop only: mobile spends the height on the log */
  margin-top: 8px;
  font: 600 var(--t-micro)/1.2 var(--f-hud);
  letter-spacing: .22em;
  color: var(--dim);
}

.scan .radar {
  position: relative;
  width: var(--rd);
  height: var(--rd);
  border-radius: 50%;
  /* bezel ticks every 10deg; the disc (::before) covers the middle */
  background:
    repeating-conic-gradient(from -.4deg, rgba(94, 230, 208, .55) 0deg .8deg, rgba(94, 230, 208, 0) .8deg 10deg),
    radial-gradient(closest-side, rgba(94, 230, 208, 0) calc(100% - 2px), rgba(94, 230, 208, .35) calc(100% - 2px));
}
.scan .radar::before { /* the disc: crosshair, range rings (one on the blip orbit), dark scope glass */
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background:
    linear-gradient(rgba(94, 230, 208, .16), rgba(94, 230, 208, .16)) center / 100% 1px no-repeat,
    linear-gradient(rgba(94, 230, 208, .16), rgba(94, 230, 208, .16)) center / 1px 100% no-repeat,
    radial-gradient(closest-side,
      rgba(94, 230, 208, 0) calc(var(--R) * .42 - 1px), rgba(94, 230, 208, .18) calc(var(--R) * .42 - 1px) calc(var(--R) * .42),
      rgba(94, 230, 208, 0) calc(var(--R) * .42) calc(var(--R) - 1px), rgba(94, 230, 208, .22) calc(var(--R) - 1px) var(--R),
      rgba(94, 230, 208, 0) var(--R) calc(100% - 1px), rgba(94, 230, 208, .3) calc(100% - 1px)),
    radial-gradient(closest-side, #12201B 0%, var(--night) 72%, #0A0F0D 100%);
  box-shadow: inset 0 0 0 1px rgba(94, 230, 208, .12), inset 0 0 30px rgba(0, 0, 0, .6);
}
.scan .radar > i { position: absolute; display: block; pointer-events: none; }
.scan .radar-sweep {
  inset: 8px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(94, 230, 208, 0) 0deg, rgba(94, 230, 208, .05) 14deg, rgba(94, 230, 208, .24) 39deg, rgba(94, 230, 208, .85) 39.4deg 40deg, rgba(94, 230, 208, 0) 40.4deg);
  animation: fx-spin 1.6s linear infinite;
  transition: opacity 200ms var(--e-in);
}
.scan .radar-tint { /* the scope flushes with the archetype colour on lock */
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--pc), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity 420ms var(--e-out);
}
.scan .radar-core {
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--intel);
  box-shadow: 0 0 0 4px rgba(94, 230, 208, .14);
}
.scan .radar-ring {
  left: 50%;
  top: 50%;
  width: calc(var(--bs) * var(--ws));
  height: calc(var(--bs) * var(--ws));
  margin: calc(var(--bs) * var(--ws) / -2) 0 0 calc(var(--bs) * var(--ws) / -2);
  border-radius: 50%;
  border: 2px solid var(--pc);
  opacity: 0;
}

/* blips: a 30px black patch silhouette in a 1px intel ring, parked on the orbit */
.scan .blip {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: var(--bs);
  height: var(--bs);
  margin: calc(var(--bs) / -2) 0 0 calc(var(--bs) / -2);
  transform: translate(calc(var(--sx) * var(--R)), calc(var(--sy) * var(--R)));
  transition: transform 500ms var(--e-scan);
}
.scan .blip-in {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #050807;
  box-shadow: 0 0 0 1px rgba(94, 230, 208, .8);
  transition: transform 260ms var(--e-in), opacity 260ms var(--e-in);
}
.scan .blip-in::after { /* contact pip on the ring */
  content: '';
  position: absolute;
  right: -2px;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--intel);
  box-shadow: 0 0 0 2px var(--night);
}
.scan .blip img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.scan .blip::before { /* the winner's archetype glow, one-shot on lock (scales with the blip) */
  content: '';
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--pc), rgba(0, 0, 0, 0));
  opacity: 0;
  pointer-events: none;
}
/* dormant contacts: the patch reads as a dark, colourless shape until the lock bursts it into colour.
   Static filter, never animated. */
.scan .blip-sil { filter: grayscale(1) brightness(.34) contrast(1.25); }
.scan .blip-col { opacity: 0; transition: opacity 300ms var(--e-out) 140ms; }
.scan .blip::after { /* the ✕ flash when a contact is knocked out (not scaled with it) */
  content: '';
  position: absolute;
  inset: 5px;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(45deg, rgba(255, 84, 102, 0) calc(50% - 1.25px), var(--alert) calc(50% - 1.25px) calc(50% + 1.25px), rgba(255, 84, 102, 0) calc(50% + 1.25px)),
    linear-gradient(-45deg, rgba(255, 84, 102, 0) calc(50% - 1.25px), var(--alert) calc(50% - 1.25px) calc(50% + 1.25px), rgba(255, 84, 102, 0) calc(50% + 1.25px));
}
.scan .blip.out .blip-in { transform: scale(0); opacity: 0; }
.scan .blip.out::after { animation: dc-x 380ms var(--e-out) both; }

/* lock-on */
.scan .radar.locked .radar-sweep { opacity: 0; animation-play-state: paused; }
.scan .radar.locked .radar-tint { opacity: .5; }
.scan .radar.locked .radar-core { opacity: 0; }
.scan .blip.won { z-index: 3; transform: translate(0, 0) scale(var(--ws)); }
.scan .blip.won::before { animation: dc-glow 700ms var(--e-out) 200ms both; }
.scan .blip.won .blip-in { box-shadow: 0 0 0 1px var(--pc), 0 0 0 2px rgba(7, 9, 10, .9); background: var(--night); }
.scan .blip.won .blip-in::after { opacity: 0; }
.scan .blip.won .blip-col { opacity: 1; }
.scan .radar.landed .radar-ring { animation: fx-ring 900ms var(--e-out) both; }
.scan .radar-lock { /* lock reticle: four bone corners snap in around the winner */
  --bk: var(--bone);
  --bk-size: 12px;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: calc(var(--bs) * var(--ws) + 22px);
  height: calc(var(--bs) * var(--ws) + 22px);
  margin: calc(var(--bs) * var(--ws) / -2 - 11px) 0 0 calc(var(--bs) * var(--ws) / -2 - 11px);
  background:
    linear-gradient(var(--bk), var(--bk)) top left / var(--bk-size) 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top left / 2px var(--bk-size) no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right / var(--bk-size) 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right / 2px var(--bk-size) no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left / var(--bk-size) 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left / 2px var(--bk-size) no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / var(--bk-size) 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 2px var(--bk-size) no-repeat;
  opacity: 0;
}
.scan .radar.landed .radar-lock { animation: dc-reticle 300ms var(--e-impact) both; }
.scan .radar.rm-lock .radar-lock { opacity: 1; }
.scope-read.on b { color: var(--confirm); }
.scan .radar.lost .blip { opacity: 0; transition: opacity 360ms var(--e-in); }
.scan .radar-win { /* reduced motion only: the colour patch, crossfaded in at the centre */
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: calc(var(--bs) * var(--ws));
  height: calc(var(--bs) * var(--ws));
  margin: calc(var(--bs) * var(--ws) / -2) 0 0 calc(var(--bs) * var(--ws) / -2);
  border-radius: 50%;
  animation: fx-rm-fade 150ms linear both;
}
.scan .radar.rm-lock .blip { opacity: 0; transition: opacity 150ms linear; }
.scan .radar.rm-lock .radar-core { opacity: 0; }

/* ---- PATCH IDENTIFIED */
.scan-id { display: grid; justify-items: center; align-content: start; gap: 4px; width: 100%; min-height: 88px; }
.scan-id .kicker { color: var(--dim); }
.scan-id:not(.lock) .scan-name { /* redaction bar until the lock */
  width: min(250px, 78%);
  color: transparent;
  background: var(--hazard-dim), rgba(42, 53, 48, .55);
  font-size: 36px;
  overflow: hidden;
  white-space: nowrap;
}
.scan-name {
  display: block;
  max-width: 100%;
  font: 400 40px/.92 var(--f-display);
  font-synthesis: none;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--dim);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.scan-note { margin: 2px 0 0; font: 400 13px/1.4 var(--f-body); color: var(--dust); opacity: 0; transition: opacity 240ms var(--e-out); }
.scan-id.on .kicker { color: var(--confirm); animation: fx-pop var(--d-pop) var(--e-impact) both; }
.scan-id.on .scan-name { color: var(--bone); }
.scan-id.on .scan-note { opacity: 1; }
.scan-id .kicker::before { /* status square: intel while scanning, confirm on lock */
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  vertical-align: .12em;
  background: currentColor;
}

/* ---- terminal log: timestamps and OK markers are CSS only */
.scan .log {
  counter-reset: t;
  width: 100%;
  max-width: 360px;
  min-height: 140px;
  margin: 0 auto;
  text-align: left;
  font: 500 15px/1.45 var(--f-hud);
  color: var(--intel);
}
.scan .log div { display: flex; align-items: baseline; gap: 8px; animation: dc-line 200ms var(--e-out) both; }
.scan .log div::before {
  counter-increment: t;
  content: "[00:0" counter(t) "] ";
  flex: none;
  min-width: 3.36em; /* Chakra Petch has no tabular figures: the widest stamp ([00:06]) sets one width for all */
  font-weight: 500; /* the bold 'File ready' line keeps the same stamp width */
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.scan .log div::after {
  flex: 1 0 auto;
  min-width: 2.4em;
  text-align: right;
  font-weight: 700;
  letter-spacing: .1em;
}
.scan .log div:not(:last-child)::after { /* finished lines */
  content: "OK";
  color: var(--confirm);
  background: repeating-linear-gradient(90deg, rgba(94, 230, 208, .28) 0 1px, rgba(94, 230, 208, 0) 1px 5px) left 62% / calc(100% - 2.6em) 1px no-repeat;
}
.scan .log div:last-child:not(.ok)::after { content: "..."; color: var(--dim); } /* the line in progress */
.scan .log .ok { color: var(--bone); font-weight: 600; }

/* ---- desktop: HUD split (type + log left, scope right) */
@media (min-width: 600px) {
  .scan { --rd: 252px; --R: 98px; --bs: 34px; row-gap: 14px; }
  .scan-ord { font-size: 120px; }
  .scan-kopi { width: 96px; height: 96px; margin: -14px 0 0 6px; }
  .scan-hero { padding: 16px 0 0; }
  .scope-foot { display: block; }
}
@media (min-width: 900px) {
  .scan {
    --rd: 300px;
    --R: 116px;
    --bs: 40px;
    margin: 0 calc(50% - min(480px, 50vw - 32px));
    padding-top: clamp(28px, calc(50vh - 310px), 140px); /* ~560px of HUD, centred on a laptop screen */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "copy scope" "log scope" "log id";
    grid-template-rows: auto 1fr auto;
    column-gap: 56px;
    row-gap: 18px;
    justify-items: start;
    align-items: start;
    text-align: left;
  }
  .scan-copy { grid-area: copy; justify-items: start; }
  .scan-hero { padding-left: 0; justify-content: flex-start; }
  /* the copy column is ~463px at 1024+: title (~3.34em) + 12px + 100px kopi must fit inside it */
  .scan-ord { font-size: min(104px, calc(15.3vw - 52px)); }
  .scan-kopi { width: 100px; height: 100px; margin: -18px 0 0 12px; }
  .scan .log { grid-area: log; margin: 8px 0 0; padding: 14px 18px; border-left: 2px solid rgba(94, 230, 208, .4); background: linear-gradient(90deg, rgba(94, 230, 208, .05), rgba(94, 230, 208, 0)); max-width: 420px; }
  .scope { grid-area: scope; justify-self: center; max-width: 420px; padding-top: 18px; }
  .scan-id { grid-area: id; justify-self: center; text-align: center; }
  .scan-name { font-size: 44px; }
}
/* big desktop: a 400px scope, the locked patch lands at ~175px (512px art), and the HUD uses the wider canvas */
@media (min-width: 1100px) {
  .scan {
    --rd: 400px;
    --R: 154px;
    --bs: 46px;
    --ws: 3.8;
    margin: 0 calc(50% - min(530px, 50vw - 32px));
    padding-top: clamp(28px, calc(50vh - 340px), 140px);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .scope { max-width: 480px; }
  .scan-ord { font-size: min(120px, calc(15.6vw - 56px)); }
  .scan-kopi { width: 108px; height: 108px; }
  .scan .log { max-width: 460px; font-size: 16px; }
}

/* ---- motion */
@keyframes dc-slam { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }
@keyframes dc-breathe { from { transform: scale(1); } to { transform: scale(1.03); } }
@keyframes dc-kopi {
  0% { opacity: 0; transform: translate(-18px, 26px) rotate(-8deg) scale(.5); }
  60% { opacity: 1; transform: translate(0, -4px) rotate(16deg) scale(1.08); }
  100% { opacity: 1; transform: rotate(12deg); }
}
@keyframes dc-x { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1); } }
@keyframes dc-reticle { from { opacity: 0; transform: scale(1.7) rotate(45deg); } to { opacity: 1; transform: none; } }
@keyframes dc-glow { from { opacity: 0; transform: scale(.4); } to { opacity: .6; transform: none; } }
@keyframes dc-line { from { opacity: 0; transform: translateY(6px); } }

html.lowpower .scan .radar > .radar-sweep { display: none; }
@media (prefers-reduced-motion: reduce) {
  .scan .radar > .radar-sweep { display: none; }
  .scan-slam, .scan-ord, .scan-kopi, .scan .blip.won::before { animation: none !important; }
  .scan .radar.rm-lock .blip { transition: opacity 150ms linear !important; }
  .scan .radar-win { animation: fx-rm-fade 150ms linear both !important; }
  .scan-note { transition: opacity 150ms linear !important; }
}

/* the result loader in main.js (<div class="processing"><div class="radar"></div></div>) wears the same scope */
.processing { display: grid; justify-items: center; padding-top: 48px; }
.processing > .radar:empty {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background:
    linear-gradient(rgba(94, 230, 208, .16), rgba(94, 230, 208, .16)) center / 100% 1px no-repeat,
    linear-gradient(rgba(94, 230, 208, .16), rgba(94, 230, 208, .16)) center / 1px 100% no-repeat,
    radial-gradient(closest-side, rgba(94, 230, 208, 0) 48%, rgba(94, 230, 208, .2) 48% 49%, rgba(94, 230, 208, 0) 49% 98%, rgba(94, 230, 208, .4) 98%),
    var(--night);
}
.processing > .radar:empty::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(94, 230, 208, 0) 0deg, rgba(94, 230, 208, .26) 39deg, rgba(94, 230, 208, .8) 39.4deg 40deg, rgba(94, 230, 208, 0) 40.4deg);
  animation: fx-spin 1.6s linear infinite;
}
html.lowpower .processing > .radar:empty::after { animation-duration: 3.2s; }

/* ================================================================ DECLASSIFY */
.dc { display: grid; gap: 16px; }
.dc .panel + .panel { margin-top: 0; }

/* ---- teaser: sealed Bunk Card + identity */
.dc-teaser { overflow: hidden; }
.dc-teaser::after { /* archetype glow behind the card (static) */
  content: '';
  position: absolute;
  left: 50%;
  top: 40px;
  width: 340px;
  height: 340px;
  margin-left: -170px;
  background: radial-gradient(closest-side, var(--pc), rgba(0, 0, 0, 0));
  opacity: .28;
  pointer-events: none;
  z-index: 0;
}
.dc-teaser > * { position: relative; z-index: 1; }
.dc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dc-head .kicker { margin: 0; }
.dc-sealed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font: 700 var(--t-micro)/1 var(--f-hud);
  letter-spacing: .2em;
  color: var(--dust);
}
.dc-sealed .ic { width: 14px; height: 14px; color: var(--signal-text); }

.dc-id { display: grid; justify-items: center; gap: 20px; text-align: center; }
.dc-cardcol { display: inline-grid; justify-items: stretch; max-width: 100%; }
.dc-card { position: relative; display: flex; justify-content: center; }
.dc-card .op-card { margin: 0 auto; }
.dc-card .patch.dc-fallback { width: 128px; height: 128px; font-size: 60px; margin: 12px auto; }

/* in-card FILE INTEGRITY rail (OpCard footer slot .oc-foot): 4 segments + 'X/4' */
.dc-cr { display: flex; align-items: center; gap: 8px; padding: 0 .2em; }
.dc-cr .rail-segs { flex: 1; gap: 3px; }
.dc-cr .rail-n { font-size: 12px; min-width: 2.4em; text-align: right; }
.dc-cr-solo { width: 200px; max-width: 100%; margin: 4px auto 0; flex-wrap: wrap; }
.dc-ord { font: 700 var(--t-label)/1 var(--f-hud); letter-spacing: .12em; color: var(--dim); width: 100%; }
/* type-to-print: the callsign gets its own line on the sealed card, in bone at a size you can read as it prints
   (scoped to .dc-card: the results hero keeps the stock nameplate) */
.dc-card .oc-plate-row { flex-wrap: wrap; row-gap: 3px; }
.dc-card .oc-ord { margin-left: auto; }
.dc-card .oc-name {
  order: 3;
  flex: 1 0 100%;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .1em;
  color: var(--bone);
  transform-origin: 0 50%;
}
.dc-card .oc-name.dc-blank { color: var(--dim); }
/* the patch flown in from the radar lands with one ring pulse in the archetype colour */
.dc-card .oc-art.dc-land::after {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 2px solid var(--pc);
  opacity: 0;
  animation: fx-ring 700ms var(--e-out) both;
}
.dc-fly { /* the flying patch (fixed, on <body>): transform only, never takes input */
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  object-fit: contain;
  pointer-events: none;
  will-change: transform;
}
.dc-ord b { color: var(--bone); }
/* ORD chip printing on the card (.oc-ord is the card's chip; W4 only adds state classes) */
.dc-card .oc-ord.dc-set { border-color: var(--signal); background: rgba(240, 86, 29, .14); color: var(--dust); }
.dc-card .oc-ord.dc-set b { color: var(--signal-text); }
.dc-card .oc-ord.dc-stamp { animation: dc-stamp 320ms var(--e-impact) both; }

/* the rail: 4 skewed segments, one per required field (name, mobile, age, ORD; consent is the act of submitting) */
.rail-segs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0 3px; }
.rail-segs .seg {
  position: relative;
  display: block;
  font-style: normal;
}
.rail-segs .seg::before {
  content: '';
  display: block;
  height: 6px;
  background: var(--steel);
  transform: skewX(-20deg);
}
.rail-segs .seg.on::before { background: var(--signal); animation: dc-seg 200ms var(--e-impact) both; }
.is-full .rail-segs .seg.on::before { background: var(--confirm); }
.rail-n {
  font: 700 var(--t-label)/1 var(--f-hud);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}
.is-full .rail-n { color: var(--confirm); }

.dc-who { display: grid; justify-items: center; gap: 8px; width: 100%; }
.dc-name {
  max-width: 100%;
  margin: 0;
  font-size: 40px;
  line-height: .9;
  color: var(--bone);
  overflow-wrap: anywhere;
}
.dc-tag { margin: 0; max-width: 26em; font: italic 500 16px/1.4 var(--f-body); color: var(--dust); }
.dc-holland {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(94, 230, 208, .35);
  font: 600 var(--t-hud)/1 var(--f-hud);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--intel);
}

/* ---- LOCKED LOADOUT + CLASSIFIED band */
.dc-locked { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.dc-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font: 700 var(--t-label)/1.2 var(--f-hud);
  letter-spacing: .2em;
  color: var(--bone);
}
.dc-sub .ic { width: 14px; height: 14px; color: var(--signal-text); }
.lo-wrap { position: relative; overflow: hidden; margin: 0 -18px; padding: 4px 18px; }
.dc-locked .lo { margin: 0; padding: 0; list-style: none; }
.dc-locked .lo li {
  display: grid;
  grid-template-columns: 16px auto minmax(12px, 1fr) 4.2em;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  border-bottom: 1px solid var(--line);
}
.dc-locked .lo li:last-child { border-bottom: 0; }
.dc-locked .lo .ic { width: 16px; height: 16px; color: var(--dim); }
.lo-l { font: 600 var(--t-hud)/1.2 var(--f-hud); letter-spacing: .12em; color: var(--dust); white-space: nowrap; }
.lo-dots { display: block; height: 1px; background: repeating-linear-gradient(90deg, var(--line-3) 0 2px, rgba(0, 0, 0, 0) 2px 6px); }
.lo-v {
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
  font: 700 15px/1 var(--f-hud);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--signal-text);
}
.lo-band { /* diagonal tape across the list (decorative, inside overflow:hidden) */
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 30px;
  margin-top: -15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-7deg);
  background:
    repeating-linear-gradient(-45deg, var(--ink) 0 7px, rgba(10, 13, 11, 0) 7px 14px) left center / 22% 100% no-repeat,
    repeating-linear-gradient(-45deg, var(--ink) 0 7px, rgba(10, 13, 11, 0) 7px 14px) right center / 22% 100% no-repeat,
    var(--signal);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.lo-band span {
  padding: 0 14px;
  background: var(--signal);
  color: var(--ink);
  font: 700 var(--t-hud)/1 var(--f-hud);
  letter-spacing: .32em;
  text-indent: .32em;
}
.dc-why { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--dust); }

/* ---- the form */
.dc-form { overflow: visible; }
.dc-form .panel-head { color: var(--dust); }
.dc-title { margin: 6px 0 10px; font-size: var(--t-h2); color: var(--bone); }
.dc-form .intro { margin: 0 0 6px; color: var(--dust); font-size: 16px; line-height: 1.5; }

.grp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 14px;
  font: 700 var(--t-label)/1 var(--f-hud);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--intel);
  white-space: nowrap;
}
.grp::after {
  content: '';
  flex: 1;
  min-width: 16px;
  height: 1px;
  background: linear-gradient(90deg, rgba(94, 230, 208, .4), rgba(94, 230, 208, 0));
}
.grp-n {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 24px;
  padding: 0 7px;
  color: var(--ink);
  letter-spacing: .06em;
}
.grp-n::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--intel); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }

.dc-form .field > label, .dc-form .field > .lbl {
  font: 600 var(--t-hud)/1.3 var(--f-hud);
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  color: var(--bone);
}
.dc-form .opt-tag { font: 400 13px/1 var(--f-body); letter-spacing: 0; text-transform: lowercase; color: var(--dust); }
.dc-form .field .hint { color: var(--dust); }
.dc-form .field .err:empty, .dc-form .ord-big:empty, .dc-form .ord-readout:empty { display: none; }
.dc-form input[type="text"], .dc-form input[type="tel"], .dc-form input[type="email"], .dc-form input[type="date"], .dc-form select {
  transition: border-color var(--d-micro) var(--e-out);
}
@media (hover: hover) {
  .dc-form .field:not(.invalid) input:not(:focus):hover, .dc-form .field:not(.invalid) select:not(:focus):hover { border-color: var(--dust); }
}
.dc-form .field.invalid .prefix > span { box-shadow: inset 3px 0 0 var(--alert); }

.grp-row { display: grid; gap: 0; }
.ord-big {
  display: block;
  margin-top: 4px;
  font: 400 28px/1 var(--f-display);
  font-synthesis: none;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bone);
  animation: dc-stamp 320ms var(--e-impact) both;
}
.ord-big em { font-style: normal; color: var(--signal-text); }
.ord-readout { font: 500 var(--t-small)/1.45 var(--f-body); color: var(--intel); }

/* ---- 04 · KOPI (kopi-amber surfaces only) */
.coffee-box {
  --bk: var(--kopi);
  position: relative;
  padding: 18px 16px 16px;
  background: var(--kopi-wash);
  border: 1px solid var(--kopi-line);
}
.cb-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas: "img k" "img h";
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  margin-bottom: 10px;
}
.cb-img { grid-area: img; width: 72px; height: 72px; transform: rotate(-6deg); }
.cb-k { grid-area: k; align-self: end; font: 700 var(--t-micro)/1.2 var(--f-hud); letter-spacing: .2em; color: var(--kopi); }
.coffee-box .kopi-h { /* scoped: results-sections also emits h2.kopi-h */
  margin: 0;
  font: 400 28px/.95 var(--f-display);
  font-synthesis: none;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--bone);
  text-wrap: balance;
  grid-area: h;
  align-self: start;
}
.coffee-box > p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--dust); }
/* 'Yes, connect me' is the kopi-filled primary; 'Not now' a quiet outline. Once 'Not now' is picked (#coffeeToggle
   [data-picked="0"]) the yes button drops to an outline so the pressed state stays unambiguous. */
.coffee-box .toggle { display: flex; gap: 8px; } /* content-sized halves: 'Yes, connect me' stays on one line at 360 */
.coffee-box .toggle button { flex: 1 1 auto; min-height: 52px; padding: 0 8px; font-size: 14px; letter-spacing: .04em; text-align: center; }
.coffee-box .toggle button[data-coffee="1"] { flex: 1.7 0 auto; background: var(--kopi); border-color: var(--kopi); color: var(--ink); font-size: 15px; }
.coffee-box .toggle button[data-coffee="1"][aria-pressed="true"]::before { content: '\2713\FE0E  '; }
.coffee-box .toggle button[data-coffee="0"] { background: rgba(7, 9, 10, .35); border-color: var(--kopi-line); color: var(--dust); }
.coffee-box .toggle button[data-coffee="0"][aria-pressed="true"] { background: var(--raised); border-color: var(--line-3); color: var(--bone); }
.coffee-box .toggle[data-picked="0"] button[data-coffee="1"] { background: rgba(7, 9, 10, .5); border-color: var(--kopi-line); color: var(--kopi); }
@media (hover: hover) {
  .coffee-box .toggle button[data-coffee="0"]:hover { border-color: var(--kopi); color: var(--bone); }
}
.coffee-more { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--kopi-line); animation: fx-fade-up 240ms var(--e-out) both; }
.coffee-more .field > .lbl { color: var(--kopi); }
.coffee-more .field:last-child { margin-bottom: 0; }

/* ---- 05 · CLEARANCE */
.dc-safe { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 500 var(--t-small)/1.4 var(--f-body); color: var(--dust); }
.dc-safe .ic { width: 16px; height: 16px; color: var(--confirm); }
.consents { display: grid; gap: 4px; }
/* the one optional tick left (#c-mkt, tips and events): a compact row, never pre-ticked */
.consent {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px 8px 10px;
  border: 1px solid var(--line);
  background: rgba(7, 9, 10, .35);
  font: 400 14px/1.45 var(--f-body);
  color: var(--bone);
  cursor: pointer;
  transition: border-color var(--d-micro) var(--e-out);
}
.consent em { font-style: normal; color: var(--dust); }
@media (hover: hover) { .consent:hover { border-color: var(--line-3); } }

/* ---- consent small print under #submit: submitting is the agreement. Small but AA: --dust on --night is
   about 7.4:1 and the link's --signal-text about 6.6:1 */
.dc-notice { margin: 10px 0 0; font: 400 13px/1.45 var(--f-body); color: var(--dust); text-align: center; }
.dc-notice a { padding: 6px 0; color: var(--signal-text); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
@media (hover: hover) { .dc-notice a:hover { color: var(--bone); } }

/* ---- Privacy & Contact Notice sheet (JS: openNotice). Bottom sheet on phones, centred panel from 700px */
.dc-sheet { display: flex; align-items: flex-end; justify-content: center; }
.dc-sheet-scrim { position: absolute; inset: 0; background: rgba(7, 9, 10, .8); }
.dc-sheet-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  padding-bottom: var(--safe-b);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
  animation: dc-sheet-in 240ms var(--e-out) both;
}
@supports (height: 1svh) { .dc-sheet-panel { max-height: 88svh; } }
.dc-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  border-bottom: 1px solid var(--line);
}
.dc-sheet-title { margin: 0; font: 700 16px/1.25 var(--f-hud); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.dc-sheet-x {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
  color: var(--bone);
  font: 400 26px/1 var(--f-body);
  cursor: pointer;
}
.dc-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 18px 12px; }
.dc-sheet-body:focus-visible { outline-offset: -3px; }
.dc-sheet-body h2 { margin: 10px 0 8px; font: 700 15px/1.3 var(--f-hud); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.dc-sheet-body h3 {
  margin: 20px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font: 700 15px/1.3 var(--f-hud);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bone);
}
.dc-sheet-body p, .dc-sheet-body li { margin: 0 0 10px; font: 400 15px/1.55 var(--f-body); color: var(--bone); }
.dc-sheet-body .muted, .dc-sheet-wait { color: var(--dust); }
.dc-sheet-body ul { margin: 0 0 10px; padding: 0; list-style: none; }
.dc-sheet-body li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.dc-sheet-body li::before { content: ''; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; background: var(--intel); }
.dc-sheet-body a { color: var(--signal-text); text-decoration: underline; text-underline-offset: 3px; }
.dc-sheet-body .doc-contact { padding: 10px 12px; background: var(--night); border: 1px solid var(--line); border-left: 3px solid var(--intel); }
.dc-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
}
@media (min-width: 700px) {
  .dc-sheet { align-items: center; padding: 24px; }
  .dc-sheet-panel { max-height: 82vh; border-bottom: 1px solid var(--line-2); border-radius: 8px; padding-bottom: 0; }
  @supports (height: 1svh) { .dc-sheet-panel { max-height: 82svh; } }
}
@keyframes dc-sheet-in { from { opacity: 0; transform: translateY(28px); } }

/* ---- #formErr: alert panel */
.dc-form .form-error {
  position: relative;
  margin: 18px 0 0;
  padding: 12px 14px 12px 17px;
  background: rgba(255, 84, 102, .08);
  border: 1px solid rgba(255, 84, 102, .28);
  color: var(--alert);
  font: 600 15px/1.45 var(--f-body);
}
.dc-form .form-error::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--alert); }

/* ---- the dock: sticky to the bottom of the screen while #form is on screen (sticky inside the form, so it never
   rides over the teaser or the footer), settling at the end of the form. It carries the live PRINTING line + patch
   thumb, the labelled FILE INTEGRITY rail and #submit. Only the topbar is sticky at the top, so with the keyboard
   up there is never more than one layer at each edge. */
.dc-dock {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 18px -18px -8px;
  padding: 24px 18px calc(12px + var(--safe-b));
  background: linear-gradient(180deg, rgba(13, 18, 16, 0) 0, rgba(13, 18, 16, .94) 18px, var(--night) 30px);
  transition: transform 260ms var(--e-out), opacity 200ms var(--e-out);
}
/* tucked (JS) while the form is only just entering from the bottom, so it never covers the form's title */
.dc-dock.dk-tuck { opacity: 0; transform: translateY(16px); pointer-events: none; }
.dc-dock.dk-tuck:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.dc-dock::before { /* hairline where the dock's solid part starts */
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 16px;
  height: 1px;
  background: linear-gradient(90deg, rgba(94, 230, 208, 0), rgba(94, 230, 208, .28) 20%, rgba(94, 230, 208, .28) 80%, rgba(94, 230, 208, 0));
}
.dc-dock .form-error { margin: 0 0 12px; }
.dk-row { display: flex; align-items: center; gap: 12px; }
.dk-thumb {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--pc), rgba(0, 0, 0, 0));
}
.dk-print { display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; min-width: 0; }
.dk-k { flex: none; font: 700 var(--t-micro)/1 var(--f-hud); letter-spacing: .2em; color: var(--intel); }
.dk-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 700 15px/1.1 var(--f-hud);
  letter-spacing: .1em;
  color: var(--bone);
  transform-origin: 0 50%;
}
.dk-name.dc-blank { color: var(--dim); }
.dk-name.dc-print { animation: dc-print 260ms var(--e-out) both; }
.dc-dock #submit { margin-top: 12px; }
/* printing dock (everywhere except the sticky-dossier desktop below): the print line takes the rail's top row, so
   'File integrity' is read by screen readers only and 'X to go' gives way to the segment labels */
@media not all and (min-width: 1024px) and (min-height: 740px) {
  .dc-dock:not(.no-print) .rail-l {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .dc-dock:not(.no-print) .rail-togo { display: none; }
  .dc-dock:not(.no-print) .rail-top { margin-bottom: 7px; }
  .dc-dock:not(.no-print) .dc-rail .rail-segs { gap: 5px; padding: 0 3px; }
  .dc-dock:not(.no-print) .dc-rail .seg span { margin-top: 5px; font-size: 10px; letter-spacing: .1em; }
}
/* focus never lands under the dock (about 196px tall on a phone with the consent small print) or the topbar */
.dc-form input, .dc-form select, .dc-form .chip, .dc-form .toggle button, .dc-form .consent a { scroll-margin: 88px 0 208px; }

/* ---- compact rail (inside the dock) */
.dc-rail { margin: 0; flex: 1 1 auto; min-width: 0; }
.rail-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  font: 700 var(--t-label)/1.2 var(--f-hud);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.rail-l { color: var(--dust); }
.rail-togo { color: var(--dust); letter-spacing: .14em; }
.dc-rail.is-full .rail-togo { color: var(--confirm); }
.dc-rail .rail-segs { gap: 6px; padding: 0 4px; }
.dc-rail .seg span {
  display: block;
  margin-top: 7px;
  font: 600 var(--t-micro)/1 var(--f-hud);
  letter-spacing: .14em;
  color: var(--dim);
  text-align: center;
  white-space: nowrap;
}
.dc-rail .seg.on span { color: var(--bone); }
.dc-rail.is-full .seg span { color: var(--confirm); }

/* ---- #submit: 64px primary, ready pulse, hazard loading */
.dc-form #submit { min-height: 56px; font-size: var(--t-btn-xl); }
@media (min-width: 600px) { .dc-form #submit { min-height: 64px; } }
.dc-form #submit.ready { animation: dc-ready 420ms var(--e-out) 1; }
.dc-form #submit.ready::after { animation: fx-sheen 520ms var(--e-out) 1; }
.dc-form #submit.hazard.moving {
  --hazard: repeating-linear-gradient(-45deg, rgba(240, 86, 29, .38) 0 8px, rgba(240, 86, 29, 0) 8px 16px);
  overflow: hidden;
  color: var(--bone);
  background-image: none;
  clip-path: var(--chamfer-md); /* disabled while loading, so never focusable here */
}
.dc-form #submit.hazard.moving::before {
  right: auto;
  width: calc(100% + 23px);
  clip-path: none;
  background: var(--hazard), var(--raised);
}
.dc-form #submit.hazard.moving .spinner { color: var(--signal-text); }

/* ---- type-to-print + stamps */
.dc-card .oc-name.dc-print { animation: dc-print 220ms var(--e-out) both; }
@keyframes dc-print { from { opacity: .4; transform: scale(1.18); } }
@keyframes dc-stamp { 0% { opacity: 0; transform: scale(1.35); } 100% { opacity: 1; transform: none; } }
@keyframes dc-seg { 0% { transform: skewX(-20deg) scaleY(.4); } 60% { transform: skewX(-20deg) scaleY(1.6); } 100% { transform: skewX(-20deg); } }
@keyframes dc-ready { 0% { transform: scale(1); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ---- breakpoints */
@media (max-width: 400px) { /* 04 · KOPI: the mascot sits beside the kicker, the question gets the full width */
  .cb-head { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "img k" "h h"; row-gap: 10px; }
  .cb-img { width: 56px; height: 56px; }
  .cb-k { align-self: center; }
  .coffee-box .kopi-h { font-size: 26px; }
}
@media (min-width: 400px) {
  .dc-id { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; gap: 18px; }
  .dc-who { justify-items: start; }
  .grp-row { grid-template-columns: minmax(0, 132px) minmax(0, 1fr); column-gap: 12px; align-items: start; }
}
@media (max-width: 599px) {
  .dc-form .field { margin-bottom: 16px; }
}
@media (min-width: 600px) {
  .dc-form .field { margin-bottom: 20px; }
  .lo-wrap { margin: 0 -24px; padding: 4px 24px; }
  .dc-dock { margin: 20px -24px -10px; padding: 24px 24px calc(14px + var(--safe-b)); }
  .dc-dock::before { left: 24px; right: 24px; }
}
/* desktop: dossier left (sealed card beside its name, loadout as chips), particulars right */
@media (min-width: 1024px) {
  .dc {
    margin: 0 calc(50% - min(520px, 50vw - 32px));
    grid-template-columns: 440px minmax(0, 1fr);
    align-items: start;
    column-gap: 24px;
  }
  .dc.solo { margin: 0; grid-template-columns: minmax(0, 1fr); }
  .dc-card .op-card[data-size="mini"] { --cw: 220px; }
  .dc-teaser::after { left: 24px; top: 30px; width: 300px; height: 300px; margin-left: -40px; }
  .dc-id { gap: 18px; }
  .dc-name { font-size: 36px; }
  .dc-tag { font-size: 15px; }
  .dc-locked .lo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .dc-locked .lo li {
    grid-template-columns: 14px minmax(0, 1fr) auto;
    gap: 6px;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--line-2);
    background: rgba(7, 9, 10, .35);
  }
  .dc-locked .lo li:last-child { border-bottom: 1px solid var(--line-2); grid-column: 1 / -1; }
  .dc-locked .lo .ic { width: 14px; height: 14px; }
  .dc-locked .lo-l { font-size: var(--t-micro); letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; }
  .dc-locked .lo-dots { display: none; }
  .dc-locked .lo-v { font-size: 14px; }
  .dc-why { font-size: 13px; }
}
/* tall enough for the whole dossier: it stays in view (sticky) while the form scrolls, so the card prints the
   callsign, ORD chip and integrity rail in front of you; the dock then drops its own print line */
@media (min-width: 1024px) and (min-height: 740px) {
  .dc-teaser { position: sticky; top: calc(var(--topbar-h) + var(--safe-t) + 16px); }
  .dc-dock .dk-thumb, .dc-dock .dk-print { display: none; }
}
/* very short screens (landscape phones, a keyboard that resizes the viewport): the dock stops riding along */
@media (max-height: 500px) {
  .dc-dock { position: relative; }
}

/* reduced motion: final states, no stamps or pulses */
@media (prefers-reduced-motion: reduce) {
  .dc-card .oc-ord.dc-stamp, .ord-big, .rail-segs .seg.on::before, .dc-form #submit.ready, .dc-card .oc-name.dc-print, .coffee-more,
  .dk-name.dc-print, .dc-card .oc-art.dc-land::after, .dc-sheet-panel { animation: none !important; }
  .dc-form #submit.hazard.moving::before { animation: none !important; }
}
@media (max-width: 399px) { .dc-sealed { display: none; } }