/* ==========================================================================
   KRONENTERPRISE — I · TRANSPORT · THE DECK
   --------------------------------------------------------------------------
   Every value descends from the ladder already set in style.css: the φ type
   scale, the φ spacing steps, the three royal steps, Inter for voice and IBM
   Plex Mono for anything the house records. One colour is added — the orange
   of an ADR plate — and it appears nowhere except on dangerous goods, because
   that is the only thing it means.
   ========================================================================== */

.dk{
  --stage-h: min(74svh, 700px);
  --adr:#E07818;
  --adr-dim:rgba(224,120,24,.16);
  --ok:#3E7F5C;
}

body.is-bare .dk{ padding-top:clamp(8rem, 17vh, 11rem); }

/* ── the opening statement ───────────────────────────────────────────── */

.dk__open{ padding:0 var(--pad) var(--s-5); max-width:var(--measure); }
.dk__title{
  font-size:clamp(var(--t-7), 6vw, var(--t-8));
  font-weight:100; letter-spacing:-.02em; line-height:1.08;
  margin-bottom:var(--s-3);
}
.dk__note{ color:var(--ash); font-size:var(--t-4); max-width:46rem; }
.dk__spec{
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4);
  margin-top:var(--s-4); padding-top:var(--s-3);
  border-top:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:var(--t-2);
  letter-spacing:.06em; color:var(--dust);
}
.dk__spec b{ color:var(--bone); font-weight:400; }

/* ── the stage ───────────────────────────────────────────────────────── */

.dk__stage{
  position:relative; height:var(--stage-h);
  margin:0 0 var(--s-5);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:radial-gradient(120% 80% at 50% 30%, rgba(9,43,156,.09), transparent 68%), #000;
  overflow:hidden; touch-action:pan-y;
}
.dk__stage.is-full{ height:100%; margin:0; border:0; }
.dk__stage.is-tall{ height:92svh; }
.dk__canvas{ display:block; width:100%; height:100%; cursor:grab; }
.dk__canvas:active{ cursor:grabbing; }
.dk__stage::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(115% 88% at 50% 42%, transparent 48%, rgba(0,0,0,.55) 100%);
}

.dk__boot{
  position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  background:#000; transition:opacity .6s var(--ease);
}
.dk__boot.is-gone{ opacity:0; pointer-events:none; }
.dk__boot p{
  font-family:var(--f-mono); font-size:var(--t-2); letter-spacing:.24em;
  text-transform:uppercase; color:var(--dust); text-align:center;
}
.dk__boot i{
  display:block; width:9rem; height:1px; margin:var(--s-3) auto 0;
  background:var(--line); position:relative; overflow:hidden;
}
.dk__boot i::after{
  content:''; position:absolute; inset:0; background:var(--royal-glow);
  transform:translateX(-100%); animation:dkSweep 1.1s var(--ease-io) infinite;
}
@keyframes dkSweep{ to{ transform:translateX(100%); } }

.dk__chip{
  position:absolute; z-index:4; transform:translate(-50%,-190%); pointer-events:none;
  padding:.34rem .55rem; border:1px solid var(--line); background:rgba(0,0,0,.88);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap; color:var(--bone);
  opacity:0; transition:opacity .15s var(--ease);
}
.dk__chip.is-on{ opacity:1; }
.dk__chip s{ text-decoration:none; color:var(--dust); margin-left:.55rem; }
.dk__chip u{ text-decoration:none; color:var(--ash); margin-left:.5rem; }

.dk__cue{
  position:absolute; z-index:3; left:var(--s-3); bottom:var(--s-3);
  display:flex; flex-wrap:wrap; gap:.4rem var(--s-3);
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--dust); pointer-events:none;
  max-width:52%;
}
.dk__cue span{ display:flex; align-items:center; gap:.4rem; }
.dk__cue b{ font-weight:400; color:var(--ash); border:1px solid var(--line); padding:.15rem .35rem; }

.dk__rig{
  position:absolute; z-index:3; right:var(--s-3); bottom:var(--s-3);
  display:flex; flex-direction:column; align-items:flex-end; gap:.4rem;
}
.dk__strip{
  display:flex; border:1px solid var(--line); background:rgba(0,0,0,.66);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.dk__strip button{
  padding:.5rem .8rem; font-family:var(--f-mono); font-size:var(--t-1);
  letter-spacing:.16em; text-transform:uppercase; color:var(--dust); cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.dk__strip button + button{ border-left:1px solid var(--line); }
.dk__strip button:hover{ color:var(--bone); background:rgba(9,43,156,.3); }

.dk__stage.is-flat .dk__canvas,
.dk__stage.is-flat .dk__boot,
.dk__stage.is-flat .dk__cue,
.dk__stage.is-flat .dk__rig{ display:none; }
.dk__stage.is-flat{ height:auto; padding:var(--s-5) var(--pad); }
.dk__fallback{ max-width:36rem; margin:0 auto; text-align:center; font-size:var(--t-3); color:var(--ash); }

/* ── layout ──────────────────────────────────────────────────────────── */

.dk__grid{
  display:grid; grid-template-columns:minmax(0,1fr) 25rem;
  gap:var(--s-5); padding:0 var(--pad) var(--s-6); align-items:start;
}
.dk__side{ display:flex; flex-direction:column; gap:var(--s-3); position:sticky; top:6.5rem; }
@media (max-width:1000px){
  .dk__grid{ grid-template-columns:1fr; }
  .dk__side{ position:static; }
}

/* ── shared panel furniture ──────────────────────────────────────────── */

.dk__plan,.dk__insp,.dk__block{ border:1px solid var(--line); background:rgba(0,0,0,.42); }
.dk__insp{ border-color:var(--royal-lit); }

.dk__planhead{
  display:flex; justify-content:space-between; align-items:center;
  padding:.8rem 1rem; border-bottom:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.22em;
  text-transform:uppercase; color:var(--dust);
}
.dk__planhead b{ color:var(--ash); font-weight:400; }
.dk__x{
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.18em;
  text-transform:uppercase; color:var(--dust); cursor:pointer;
}
.dk__x:hover{ color:var(--bone); }

.dk__blockhead{
  padding:.8rem 1rem; border-bottom:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.22em;
  text-transform:uppercase; color:var(--dust);
}
.dk__blocknote{ padding:.8rem 1rem 0; font-size:var(--t-3); color:var(--dust); line-height:1.5; }

/* ── the readout ─────────────────────────────────────────────────────── */

.dk__read{ padding:1.2rem 1rem 1rem; }
.dk__count{ display:flex; align-items:flex-end; gap:.5rem; line-height:.84; }
.dk__count em{
  font-style:normal; font-size:3.4rem; font-weight:100;
  letter-spacing:-.05em; font-variant-numeric:tabular-nums;
}
.dk__count i{ font-style:normal; font-family:var(--f-mono); font-size:var(--t-3); color:var(--dust); padding-bottom:.3rem; }
.dk__count span{
  margin-left:auto; padding-bottom:.45rem; font-family:var(--f-mono);
  font-size:var(--t-1); letter-spacing:.2em; text-transform:uppercase; color:var(--dust);
}

.dk__meter{ position:relative; height:2px; margin-top:1.1rem; background:var(--line); }
.dk__meter i{
  position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg,var(--royal),var(--royal-glow));
  transition:width .4s var(--ease);
}
.dk__meter u{ position:absolute; top:-2px; bottom:-2px; width:1px; background:var(--line); }

.dk__stats{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:1.1rem;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
.dk__stats > div{ background:#000; padding:.65rem .75rem; }
.dk__stats dt{
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--dust); margin-bottom:.3rem;
}
.dk__stats dd{ font-size:var(--t-5); font-weight:200; font-variant-numeric:tabular-nums; }
.dk__stats dd s{ text-decoration:none; font-family:var(--f-mono); font-size:var(--t-1); color:var(--dust); margin-left:.25rem; }
.dk__stats dd .is-bad{ color:var(--adr); }

/* ── axles ───────────────────────────────────────────────────────────── */

.dk__axles{ border-top:1px solid var(--line-soft); }
.dk__axle{
  display:grid; grid-template-columns:1fr auto; gap:.3rem .6rem;
  padding:.85rem 1rem .2rem;
}
.dk__axname{
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--dust);
}
.dk__axval{ text-align:right; font-size:var(--t-3); font-variant-numeric:tabular-nums; color:var(--ash); }
.dk__axval b{ font-weight:300; color:var(--bone); font-size:var(--t-5); }
.dk__axval s{ text-decoration:none; font-family:var(--f-mono); font-size:var(--t-1); color:var(--dust); }
.dk__axtrack{ grid-column:1; height:3px; background:var(--line); position:relative; align-self:center; }
.dk__axbar{
  position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg,var(--royal),var(--royal-glow));
  transition:width .35s var(--ease), background .3s var(--ease);
}
.dk__axbar.is-warn{ background:linear-gradient(90deg,var(--royal-glow),#B8862A); }
.dk__axbar.is-bad{ background:var(--adr); }
.dk__axpct{
  grid-column:2; align-self:center; font-family:var(--f-mono);
  font-size:var(--t-2); color:var(--dust); font-variant-numeric:tabular-nums;
}
.dk__axpct.is-bad{ color:var(--adr); }

.dk__cog{ padding:.9rem 1rem 1.1rem; }
.dk__cogline{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--dust);
}
.dk__cogline b{
  font-family:var(--f-sans); font-weight:300; font-size:var(--t-3);
  letter-spacing:0; text-transform:none; color:var(--bone);
}
.dk__cogline b.is-warn{ color:var(--adr); }
.dk__cogtrack{ position:relative; height:2px; background:var(--line); margin:1.4rem 0 1.5rem; }
.dk__cogtrack u{ position:absolute; top:-4px; width:1px; height:10px; background:var(--dust); }
.dk__cogtrack u s{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  text-decoration:none; font-family:var(--f-mono); font-size:var(--t-1);
  color:var(--dust); letter-spacing:.1em;
}
.dk__cogtrack i{
  position:absolute; top:-6px; width:2px; height:14px; margin-left:-1px;
  background:var(--bone); transition:left .4s var(--ease), opacity .3s var(--ease);
}

/* ── the inspector ───────────────────────────────────────────────────── */

.dk__ifields{ padding:.4rem 1rem .2rem; }
.dk__field{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.62rem 0; border-bottom:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:var(--t-2); letter-spacing:.06em; color:var(--ash);
  cursor:pointer;
}
.dk__field.is-check{ justify-content:flex-start; align-items:flex-start; gap:.7rem; }
.dk__field.is-stack{ align-items:flex-start; }
.dk__field.is-height{ align-items:flex-start; cursor:default; }
.dk__field.is-height label{ display:flex; flex-direction:column; gap:.15rem; cursor:pointer; }
.dk__field.is-slide{ padding:.5rem 0 .7rem; border-bottom:1px solid var(--line-soft); cursor:default; }
.dk__field.is-slide input{ width:100%; }

input[type=range]{
  appearance:none; -webkit-appearance:none;
  height:2px; background:var(--line); cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  width:.85rem; height:.85rem; margin-top:-.4rem;
  background:var(--bone); border:0; cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:.85rem; height:.85rem; background:var(--bone); border:0; cursor:grab;
}
input[type=range]::-moz-range-track{ height:2px; background:var(--line); }
input[type=range]:focus-visible{ outline:1px solid var(--royal-glow); outline-offset:.4rem; }

/* the sum, spelled out — the pallet is part of every tier */
.dk__sum{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .45rem;
  padding:.7rem 0 .1rem;
  font-family:var(--f-mono); font-size:var(--t-1); color:var(--dust);
  letter-spacing:.04em;
}
.dk__sum b{ color:var(--dust); font-weight:400; }
.dk__sum span{ color:var(--ash); }
.dk__sum em{ font-style:normal; font-size:var(--t-3); color:var(--bone); }
.dk__sum em.is-warn{ color:var(--adr); }
.dk__field.is-stack > span:first-child{ display:flex; flex-direction:column; gap:.15rem; }

.dk__tiers{ display:flex; flex:0 0 auto; border:1px solid var(--line); }
.dk__tier{
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  padding:.3rem .55rem; background:#000; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.dk__tier + .dk__tier{ border-left:1px solid var(--line); }
.dk__tier b{ font-family:var(--f-mono); font-size:var(--t-3); font-weight:400; color:var(--ash); }
.dk__tier s{ text-decoration:none; font-family:var(--f-mono); font-size:var(--t-1); color:var(--dust); }
.dk__tier:hover:not(:disabled){ background:rgba(9,43,156,.28); }
.dk__tier:hover:not(:disabled) b{ color:var(--bone); }
.dk__tier[aria-pressed="true"]{ background:rgba(9,43,156,.42); }
.dk__tier[aria-pressed="true"] b{ color:var(--bone); }
.dk__tier:disabled{ opacity:.28; cursor:not-allowed; }
.dk__field.is-check span{ display:flex; flex-direction:column; gap:.15rem; }
.dk__ihint{
  font-style:normal; font-size:var(--t-1); color:var(--dust); letter-spacing:.04em;
}
.dk__ihint.is-warn{ color:var(--adr); }

.dk__inp{ display:flex; align-items:baseline; gap:.3rem; }
.dk__field input[type=number]{
  width:5.2rem; text-align:right; background:#000; color:var(--bone);
  border:1px solid var(--line); padding:.34rem .45rem;
  font-family:var(--f-mono); font-size:var(--t-3); font-variant-numeric:tabular-nums;
}
.dk__field input[type=number]:focus{ outline:1px solid var(--royal-glow); outline-offset:0; }
.dk__inp s{ text-decoration:none; color:var(--dust); font-size:var(--t-1); }
.dk__field select{
  background:#000; color:var(--bone); border:1px solid var(--line);
  padding:.34rem .45rem; font-family:var(--f-mono); font-size:var(--t-3);
}
.dk__field input[type=checkbox]{
  appearance:none; -webkit-appearance:none; flex:0 0 auto;
  width:1rem; height:1rem; margin-top:.15rem;
  border:1px solid var(--line); background:#000; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.dk__field input[type=checkbox]:checked{ background:var(--royal-glow); border-color:var(--royal-glow); }
.dk__field input[type=checkbox]:disabled{ opacity:.3; cursor:not-allowed; }
#dIadr:checked{ background:var(--adr); border-color:var(--adr); }

.dk__ifoot{
  display:flex; flex-wrap:wrap; gap:.3rem; padding:.9rem 1rem 1rem;
}
.dk__ifoot span{
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.08em;
  color:var(--ash); border:1px solid var(--line); padding:.24rem .4rem;
}

/* ── positions taken ─────────────────────────────────────────────────── */

.dk__ledger{ border-top:1px solid var(--line-soft); padding:.8rem 1rem 1rem; }
.dk__ledger ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.3rem; max-height:8.5rem; overflow-y:auto; }
.dk__ledger li{
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.08em;
  padding:.25rem .4rem; border:1px solid var(--line);
  background:rgba(9,43,156,.16); cursor:pointer;
}
.dk__ledger li:hover{ border-color:var(--royal-glow); }
.dk__ledger li.is-adr{ background:var(--adr-dim); border-color:rgba(224,120,24,.4); }
.dk__empty{ font-size:var(--t-3); color:var(--dust); line-height:1.55; }

/* ── checks ──────────────────────────────────────────────────────────── */

.dk__checks{ list-style:none; padding:.7rem 1rem 1rem; display:flex; flex-direction:column; gap:.55rem; }
.dk__checks li{
  font-size:var(--t-3); line-height:1.5; color:var(--ash);
  padding-left:1rem; position:relative;
}
.dk__checks li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:.36rem; height:.36rem; border-radius:50%; background:var(--dust);
}
.dk__checks li.is-bad{ color:var(--bone); }
.dk__checks li.is-bad::before{ background:var(--adr); }
.dk__checks li.is-warn::before{ background:#B8862A; }
.dk__checks li.is-ok::before{ background:var(--ok); }
.dk__checks li.is-note{ color:var(--dust); }
.dk__checks li.is-none{ color:var(--dust); padding-left:0; }
.dk__checks li.is-none::before{ display:none; }

/* ── loading order ───────────────────────────────────────────────────── */

.dk__seq{
  list-style:none; padding:.7rem 1rem 1rem;
  max-height:18rem; overflow-y:auto;
}
.dk__seq li{
  display:flex; align-items:baseline; gap:.6rem;
  padding:.32rem 0; border-bottom:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:var(--t-2); color:var(--ash);
}
.dk__seq li:last-child{ border-bottom:0; }
.dk__seq li b{
  min-width:1.6rem; color:var(--bone); font-weight:400;
  font-variant-numeric:tabular-nums;
}
.dk__seq li s{ text-decoration:none; margin-left:auto; color:var(--dust); font-size:var(--t-1); }
.dk__seq li.is-none{ color:var(--dust); border:0; }

/* ── controls ────────────────────────────────────────────────────────── */

.dk__acts{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border-top:1px solid var(--line);
}
.dk__acts button{
  background:#000; padding:.85rem .5rem;
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.2em;
  text-transform:uppercase; color:var(--dust); cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.dk__acts button:hover:not(:disabled){ color:var(--bone); background:rgba(9,43,156,.3); }
.dk__acts button:disabled{ color:rgba(84,81,76,.5); cursor:default; }
.dk__acts .is-wide{ grid-column:1 / -1; }
.dk__acts .is-lead{ color:var(--bone); background:rgba(9,43,156,.24); }
.dk__acts .is-lead:hover:not(:disabled){ background:rgba(9,43,156,.44); }

/* ── the flat plan ───────────────────────────────────────────────────── */

.dk__flat h2{ font-size:var(--t-6); font-weight:200; letter-spacing:-.01em; margin-bottom:var(--s-3); }
.dk__flat > p{ color:var(--ash); font-size:var(--t-3); max-width:42rem; }

.dflat{ margin-top:var(--s-4); max-width:min(28rem, 100%); }
.dflat__nose,.dflat__tail{
  display:block; margin-bottom:.35rem;
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.22em;
  text-transform:uppercase; color:var(--dust);
}
.dflat__tail{ margin:.45rem 0 0; }
.dflat__grid{ display:flex; flex-direction:column; gap:.28rem; }
.dflat__row{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.28rem; }

.dflat__pillar{
  display:flex; align-items:center; gap:.5rem; margin:.18rem 0;
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.2em;
  text-transform:uppercase; color:var(--dust);
}
.dflat__pillar::before,.dflat__pillar::after{
  content:''; height:1px; background:var(--royal-lit); opacity:.55;
}
.dflat__pillar::before{ width:1.2rem; }
.dflat__pillar::after{ flex:1; }

.dflat__cell{
  aspect-ratio:3 / 2; border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem;
  font-family:var(--f-mono); cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.dflat__cell i{ font-style:normal; font-size:var(--t-1); letter-spacing:.04em; color:var(--dust); }
.dflat__cell b{ font-weight:400; font-size:var(--t-4); color:var(--bone); line-height:1; }
.dflat__cell s{ text-decoration:none; font-size:var(--t-1); color:var(--ash); letter-spacing:.02em; }
.dflat__cell:hover{ border-color:var(--royal-lit); }
.dflat__cell.is-on{ background:rgba(30,79,232,.22); border-color:var(--royal-glow); }
.dflat__cell.is-adr{ background:var(--adr-dim); border-color:rgba(224,120,24,.55); }
.dflat__cell.is-adr s{ color:var(--adr); }
.dflat__cell.is-focus{ outline:1px solid var(--bone); outline-offset:1px; }

.dk__legend{
  margin-top:var(--s-4); font-family:var(--f-mono); font-size:var(--t-1);
  letter-spacing:.12em; text-transform:uppercase; color:var(--dust); line-height:2;
}

/* ── the closing note ────────────────────────────────────────────────── */

.dk__close{
  padding:var(--s-5) var(--pad) var(--s-6);
  border-top:1px solid var(--line-soft); max-width:var(--measure);
}
.dk__close p{ color:var(--ash); font-size:var(--t-4); }
.dk__close p + p{ margin-top:var(--s-3); }
.dk__close a{ color:var(--bone); border-bottom:1px solid var(--royal-lit); }
.dk__close a:hover{ border-bottom-color:var(--bone); }

/* ── the confirmation ────────────────────────────────────────────────── */

.dk__toast{
  position:fixed; left:50%; bottom:2rem; z-index:9000;
  transform:translate(-50%,.6rem);
  padding:.65rem 1.1rem; border:1px solid var(--line); background:rgba(0,0,0,.92);
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.22em;
  text-transform:uppercase; color:var(--bone);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.dk__toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ── narrow ──────────────────────────────────────────────────────────── */

@media (max-width:640px){
  .dk{ --stage-h:min(60svh,500px); }
  .dk__cue{ display:none; }
  .dk__chip{ display:none; }
  .dk__count em{ font-size:2.8rem; }
  .dk__rig{ left:var(--s-3); align-items:stretch; }
  .dk__strip{ justify-content:space-between; }
  .dk__strip button{ padding:.5rem .5rem; flex:1; }
  .dk__stats{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce){
  .dk__boot i::after{ animation:none; }
}

/* ==========================================================================
   NOT A PALLET
   --------------------------------------------------------------------------
   Goods with their own dimensions, placed anywhere on the floor, and the
   scale plan they are dragged about on. One further colour appears here:
   red, and only ever for something already aboard — floor that is spoken for.
   ========================================================================== */

.dk{ --done:#D12B2B; --done-dim:rgba(209,43,43,.16); }

/* ── the deck, drawn to scale ─────────────────────────────────────────── */

.dscale__wrap{ margin-top:var(--s-4); max-width:min(46rem, 100%); }
.dscale__head{
  display:flex; justify-content:space-between;
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.22em;
  text-transform:uppercase; color:var(--dust); margin-bottom:.35rem;
}
.dscale{
  position:relative;
  aspect-ratio:13.6 / 2.4;
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(to right, rgba(30,79,232,.14) 0 1px, transparent 1px 7.353%),
    rgba(9,43,156,.05);
  touch-action:none;
  overflow:hidden;
}
.dscale__box{
  position:absolute;
  border:1px solid var(--royal-glow);
  background:rgba(30,79,232,.24);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.02em;
  color:var(--bone); white-space:nowrap;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.dscale__box.is-item{ cursor:grab; background:rgba(30,79,232,.34); }
.dscale__box.is-item:active{ cursor:grabbing; }
.dscale__box.is-adr{ background:var(--adr-dim); border-color:rgba(224,120,24,.7); }
.dscale__box.is-done{ background:var(--done-dim); border-color:var(--done); color:#FFC9C9; }
.dscale__box.is-focus{ outline:1px solid var(--bone); outline-offset:-2px; z-index:3; }
.dscale__box.is-item:focus-visible{ outline:1px solid var(--bone); outline-offset:1px; }

.dscale__mark{
  position:absolute; top:0; bottom:0; width:1px;
  background:rgba(124,131,151,.5);
  pointer-events:none;      /* a reference line must never eat a drag */
}
.dscale__mark::after{
  content:attr(data-n);
  position:absolute; top:2px; left:3px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.1em;
  color:var(--dust); text-transform:uppercase;
}
.dscale__cog{
  position:absolute; top:-2px; bottom:-2px; width:2px; margin-left:-1px;
  background:var(--bone); z-index:4;
  pointer-events:none;
}
.dscale__note{
  margin-top:.5rem; font-size:var(--t-2); color:var(--dust); line-height:1.5;
}

/* ── the item inspector ───────────────────────────────────────────────── */

.dk__item{ border:1px solid var(--royal-lit); background:rgba(0,0,0,.42); }
.dk__item.is-done,.dk__insp.is-done{ border-color:var(--done); }

.dk__trio{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:.4rem;
  padding:.62rem 0; border-bottom:1px solid var(--line-soft);
}
.dk__trio.is-pos{ grid-template-columns:repeat(2, 1fr); }
.dk__trio label{ display:flex; flex-direction:column; gap:.2rem; cursor:pointer; }
.dk__trio s{
  text-decoration:none; font-family:var(--f-mono); font-size:var(--t-1);
  letter-spacing:.1em; text-transform:uppercase; color:var(--dust);
}
.dk__trio u{
  text-decoration:none; font-family:var(--f-mono); font-size:var(--t-1);
  color:var(--dust); margin-top:-.1rem;
}
.dk__trio input{
  width:100%; background:#000; color:var(--bone); border:1px solid var(--line);
  padding:.32rem .4rem; font-family:var(--f-mono); font-size:var(--t-3);
  font-variant-numeric:tabular-nums;
}
.dk__trio input:focus{ outline:1px solid var(--royal-glow); }

.dk__field input[type=text]{
  width:11rem; background:#000; color:var(--bone); border:1px solid var(--line);
  padding:.34rem .45rem; font-family:var(--f-mono); font-size:var(--t-3);
}
.dk__field input[type=text]:focus{ outline:1px solid var(--royal-glow); }

.dk__field.is-row{ display:flex; gap:.4rem; justify-content:flex-start; }
.dk__mini{
  padding:.4rem .7rem; border:1px solid var(--line); background:#000;
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--dust); cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.dk__mini:hover{ color:var(--bone); background:rgba(9,43,156,.3); }
.dk__mini[aria-pressed="true"]{ color:var(--bone); background:rgba(9,43,156,.45); }

.dk__add{ padding:.4rem 1rem .2rem; }

.dk__items{ list-style:none; padding:.5rem 1rem 1rem; display:flex; flex-direction:column; gap:.3rem; }
.dk__items li{
  display:flex; flex-direction:column; gap:.1rem;
  padding:.4rem .5rem; border:1px solid var(--line);
  background:rgba(9,43,156,.14); cursor:pointer;
}
.dk__items li:hover{ border-color:var(--royal-glow); }
.dk__items li em{ font-style:normal; font-size:var(--t-3); color:var(--bone); }
.dk__items li s{
  text-decoration:none; font-family:var(--f-mono); font-size:var(--t-1); color:var(--dust);
}
.dk__items li.is-done{ background:var(--done-dim); border-color:rgba(209,43,43,.5); }
.dk__items li.is-adr{ background:var(--adr-dim); border-color:rgba(224,120,24,.5); }
.dk__items li.is-focus{ outline:1px solid var(--bone); outline-offset:1px; }
.dk__items li.is-none{
  border:0; background:none; cursor:default; color:var(--dust);
  font-size:var(--t-3); line-height:1.5; padding:0;
}

/* ── already aboard, wherever it shows ────────────────────────────────── */

.is-donebox input[type=checkbox]:checked{ background:var(--done); border-color:var(--done); }
.dk__stats dd .is-done,.dk__ifoot span.is-done{ color:var(--done); }
.dk__ifoot span.is-done{ border-color:rgba(209,43,43,.6); }
.dk__ifoot span.is-warn{ color:var(--adr); border-color:rgba(224,120,24,.6); }
.dflat__cell.is-done{ background:var(--done-dim); border-color:rgba(209,43,43,.6); }
.dflat__cell.is-done s{ color:#FF9C9C; }
.dk__seq li.is-done em{ color:#FF9C9C; }
.dk__seq li em{ font-style:normal; }
.dk__seq li u{ text-decoration:none; color:var(--dust); margin-left:.3rem; }
.dk__seq li.is-focus{ outline:1px solid var(--line); outline-offset:2px; }
.dk__seq li{ cursor:pointer; }

@media (max-width:640px){
  .dk__trio{ grid-template-columns:repeat(3, 1fr); gap:.3rem; }
  .dk__field input[type=text]{ width:8rem; }
  .dscale__box{ font-size:9px; }
}

/* ==========================================================================
   HOLDING SEVERAL AT ONCE
   A deck is loaded in consignments — twelve of wash powder, seven of
   deodorant — so the plural is the normal case, not the exception.
   ========================================================================== */

.dk__group{ border:1px solid var(--bone); background:rgba(0,0,0,.5); }
.dk__group .dk__planhead b{ color:var(--bone); }

.dk__gsum{
  display:flex; flex-wrap:wrap; gap:.3rem;
  padding:.8rem 1rem .2rem;
}
.dk__gsum span{
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.08em;
  color:var(--ash); border:1px solid var(--line); padding:.24rem .4rem;
}

.dk__group input[type=number]::placeholder,
.dk__group input[type=text]::placeholder{ color:var(--dust); opacity:.7; }
.dk__group input[type=checkbox]:indeterminate{
  background:linear-gradient(to bottom, transparent 42%, var(--dust) 42%, var(--dust) 58%, transparent 58%);
  border-color:var(--dust);
}

/* ── the selection bar ─────────────────────────────────────────────── */

.dk__selbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem var(--s-3);
  margin-top:var(--s-4); padding-bottom:.7rem;
  border-bottom:1px solid var(--line-soft);
}
.dk__selhint{
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.06em;
  color:var(--dust); line-height:1.7;
}
.dk__selhint b{
  color:var(--ash); font-weight:400;
  border:1px solid var(--line); padding:.1rem .3rem;
}
.dk__selacts{ display:flex; gap:.3rem; margin-left:auto; }
.dk__mini[aria-pressed="true"]{ color:var(--bone); background:rgba(9,43,156,.5); }

/* several held reads as several, not as one thing repeated */
.dflat__cell.is-focus,
.dscale__box.is-focus{ outline:1px solid var(--bone); outline-offset:1px; }
.dk__seq li.is-focus{ background:rgba(255,255,255,.04); }

/* ── stacked goods ─────────────────────────────────────────────────── */

.dscale__box.is-up{
  border-style:dashed;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
}
.dscale__box.is-up::after{
  content:attr(data-up);
  position:absolute; right:2px; top:1px;
  font-family:var(--f-mono); font-size:9px; color:var(--dust);
}

@media (max-width:640px){
  .dk__selacts{ margin-left:0; }
  .dk__selhint{ display:none; }
}

/* ── what is held, said plainly ───────────────────────────────────────── */

.dk__selstate{
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.08em;
  color:var(--dust); border:1px solid var(--line); padding:.28rem .5rem;
  white-space:nowrap;
}
.dk__selstate.is-on{ color:var(--ash); border-color:var(--royal-glow); }
.dk__selstate b{ color:var(--bone); font-weight:400; }
.dk__selstate s{ text-decoration:none; color:var(--dust); margin-left:.5rem; }
.dk__selstate.is-sealed{ border-color:var(--line); }
.dk__selstate.is-sealed b{ color:var(--ash); }

.dk__group.is-sealed{ border-color:var(--line); }
.dk__group.is-sealed .dk__planhead b{ color:var(--ash); }

@media (max-width:640px){
  .dk__selstate{ white-space:normal; }
}

/* ==========================================================================
   THE TRAILER IS A CLOSED BOX
   2.40 across, 13.60 long, 2.70 to the roof. A load that will not go inside
   it is not a detail to be found later in a list, so it is said at the top
   of the deck, in the one colour nothing else on this page is allowed to use.
   ========================================================================== */

.dk__alarm[hidden]{ display:none; }   /* display:flex below would otherwise
                                          beat the browser's own [hidden] rule,
                                          leaving an empty red bar over the
                                          controls at all times */
.dk__alarm{
  position:absolute; z-index:6;
  pointer-events:none;                /* it informs; it never intercepts */
  top:var(--s-3); left:var(--s-3); right:var(--s-3);
  display:flex; align-items:flex-start; gap:.65rem;
  padding:.7rem .85rem;
  border:1px solid var(--done);
  background:rgba(28,4,4,.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:dkAlarmIn .28s var(--ease);
}
@keyframes dkAlarmIn{ from{ opacity:0; transform:translateY(-.4rem); } }

.dk__alarm > i{
  flex:0 0 auto; width:.62rem; height:.62rem; margin-top:.28rem;
  border-radius:50%; background:var(--done);
  box-shadow:0 0 0 0 rgba(209,43,43,.7);
  animation:dkPulse 1.5s ease-out infinite;
}
@keyframes dkPulse{
  0%   { box-shadow:0 0 0 0 rgba(209,43,43,.75); opacity:1; }
  70%  { box-shadow:0 0 0 .55rem rgba(209,43,43,0); opacity:.85; }
  100% { box-shadow:0 0 0 0 rgba(209,43,43,0); opacity:1; }
}

.dk__alarm > span{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.dk__alarm b{
  font-family:var(--f-mono); font-weight:400;
  font-size:var(--t-2); line-height:1.5; letter-spacing:.04em;
  color:#FFC9C9;
}
.dk__alarm b:first-child{
  color:#FFFFFF; letter-spacing:.14em; text-transform:uppercase;
  font-size:var(--t-1);
}

/* the same alarm below, for the browsers with no 3D to put it on */
.dk__stage.is-flat .dk__alarm{ position:static; margin-bottom:var(--s-3); }

/* an item that is outside the box reads as outside the box */
.dscale__box.is-fault{
  background:rgba(209,43,43,.34);
  border-color:var(--done);
  animation:dkFault 1.5s ease-in-out infinite;
}
@keyframes dkFault{ 50%{ border-color:#FF8A8A; } }

@media (prefers-reduced-motion:reduce){
  .dk__alarm > i{ animation:none; box-shadow:0 0 0 .28rem rgba(209,43,43,.35); }
  .dscale__box.is-fault{ animation:none; }
  .dk__alarm{ animation:none; }
}

@media (max-width:640px){
  .dk__alarm{ top:auto; bottom:var(--s-3); }
  .dk__alarm b{ font-size:var(--t-1); }
}

/* the tare is asked for rather than assumed, so it sits in the stats as a field */
.dk__stats .is-input dd{ display:flex; align-items:baseline; gap:.25rem; }
.dk__stats input[type=number]{
  width:4.6rem; background:#000; color:var(--bone); border:1px solid var(--line);
  padding:.16rem .3rem; font-family:var(--f-mono); font-size:var(--t-3);
  font-variant-numeric:tabular-nums; text-align:right;
}
.dk__stats input[type=number]:focus{ outline:1px solid var(--royal-glow); }
.dk__stats .is-input dt label{ cursor:pointer; }
.dk__axnote{
  padding:0 1rem .6rem; margin-top:-.4rem;
  font-size:var(--t-2); color:var(--dust); line-height:1.5;
}
.dk__axnote[hidden]{ display:none; }

/* ── the trailer choice, the drops table, the import, the ledger ─────── */

.dk__stats .is-sel select{
  background:#000; color:var(--bone); border:1px solid var(--line);
  padding:.18rem .3rem; font-family:var(--f-mono); font-size:var(--t-2);
  max-width:100%;
}
.dk__stats .is-sel select:focus{ outline:1px solid var(--royal-glow); }

.dk__drops{ padding:.2rem 1rem .9rem; border-top:1px solid var(--line-soft); }
.dk__drops .dk__blockhead{ padding:.8rem 0 .4rem; border:0; }
.dk__dropline{
  display:flex; align-items:baseline; gap:.45rem;
  padding:.28rem 0; border-bottom:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:var(--t-1); color:var(--dust);
}
.dk__dropline:last-child{ border-bottom:0; }
.dk__dropline span{ flex:0 0 auto; letter-spacing:.1em; text-transform:uppercase; }
.dk__dropline b{ margin-left:auto; font-weight:400; color:var(--ash); font-variant-numeric:tabular-nums; }
.dk__dropline b:first-of-type{ margin-left:auto; }
.dk__dropline b + s + b{ margin-left:.7rem; }
.dk__dropline s{ text-decoration:none; }
.dk__dropline.is-warn b{ color:#B8862A; }
.dk__dropline.is-bad b{ color:var(--adr); }

.dk__import{ padding:.6rem 1rem .2rem; }
.dk__import textarea{
  width:100%; background:#000; color:var(--bone); border:1px solid var(--line);
  padding:.5rem .6rem; font-family:var(--f-mono); font-size:var(--t-2);
  line-height:1.6; resize:vertical;
}
.dk__import textarea:focus{ outline:1px solid var(--royal-glow); }
.dk__import textarea::placeholder{ color:var(--dust); opacity:.6; }
.dk__importnote{
  margin-top:.5rem; font-family:var(--f-mono); font-size:var(--t-1);
  color:var(--ash); line-height:1.7;
}
.dk__importnote.is-warn{ color:#D9A15A; }
.dk__importnote[hidden]{ display:none; }

/* ── the ledger ─────────────────────────────────────────────────────── */

.dk__ledger{ border-color:var(--royal-lit); }
.dk__lfields{ padding:.5rem 1rem .2rem; display:flex; flex-direction:column; gap:.6rem; }
.dk__lfields label{ display:flex; flex-direction:column; gap:.25rem; cursor:pointer; }
.dk__lfields s{
  text-decoration:none; font-family:var(--f-mono); font-size:var(--t-1);
  letter-spacing:.14em; text-transform:uppercase; color:var(--dust);
}
.dk__lfields input{
  background:#000; color:var(--bone); border:1px solid var(--line);
  padding:.42rem .5rem; font-family:var(--f-mono); font-size:var(--t-3);
}
.dk__lfields input:focus{ outline:1px solid var(--royal-glow); }

.dk__lwho{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.7rem 1rem 0; font-family:var(--f-mono); font-size:var(--t-2); color:var(--bone);
}
.dk__ltier{
  font-size:var(--t-1); letter-spacing:.14em; color:var(--dust);
  border:1px solid var(--line); padding:.16rem .45rem; font-weight:400;
}
.dk__ltier.is-pro{ color:var(--bone); border-color:var(--royal-glow); background:rgba(9,43,156,.35); }

.dk__lplans{ list-style:none; padding:.4rem 1rem .2rem; display:flex; flex-direction:column; gap:.3rem; }
.dk__lplans li{
  display:flex; flex-direction:column; gap:.15rem;
  border:1px solid var(--line); padding:.45rem .55rem;
}
.dk__lplans li em{ font-style:normal; font-size:var(--t-3); color:var(--bone); }
.dk__lplans li s{ text-decoration:none; font-family:var(--f-mono); font-size:var(--t-1); color:var(--dust); }
.dk__lplans li span{ display:flex; gap:.35rem; margin-top:.25rem; }
.dk__lplans li button{
  padding:.28rem .6rem; border:1px solid var(--line); background:#000;
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.12em;
  text-transform:uppercase; color:var(--dust); cursor:pointer;
}
.dk__lplans li button:hover{ color:var(--bone); background:rgba(9,43,156,.3); }
.dk__lplans li.is-none{ border:0; padding:0; color:var(--dust); font-size:var(--t-2); }

.dk__lnote{ padding:.6rem 1rem .9rem; font-family:var(--f-mono); font-size:var(--t-1); color:var(--ash); }
.dk__lnote.is-warn{ color:#D9A15A; }
.dk__lnote[hidden]{ display:none; }

.dk__solve{ padding:.3rem 1rem .9rem; }
.dk__solve button{
  width:100%; padding:.6rem .8rem; border:1px solid var(--royal-lit); background:rgba(9,43,156,.22);
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone); cursor:pointer;
  transition:background .2s var(--ease);
}
.dk__solve button:hover{ background:rgba(9,43,156,.42); }
.dk__solve button[hidden]{ display:none; }
.dk__solve button:disabled{ opacity:.5; cursor:wait; }

/* the whole load against what the body carries, tare kept apart */
.dk__tareline{
  padding:0 1rem .8rem; margin-top:-.3rem;
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.05em;
  color:var(--dust);
}
.dk__tareline b{ color:var(--ash); font-weight:400; font-variant-numeric:tabular-nums; }

/* ── load finished: the confirm, the note, the straps ──────────────── */

.dk__acts .is-finish{ border-color:#8A7422; color:#E8D48A; background:rgba(138,116,34,.14); }
.dk__acts .is-finish:hover{ background:rgba(138,116,34,.3); color:#F4E6AE; }

.dk__finishconfirm{
  margin:0 1rem .8rem; padding:.7rem .8rem;
  border:1px solid #8A7422; background:rgba(20,16,4,.7);
}
.dk__finishconfirm[hidden]{ display:none; }
.dk__finishconfirm p{
  font-size:var(--t-2); color:var(--ash); line-height:1.6; margin-bottom:.55rem;
}
.dk__finishconfirm span{ display:flex; gap:.4rem; flex-wrap:wrap; }
.dk__finishconfirm button{
  padding:.42rem .7rem; border:1px solid var(--line); background:#000;
  font-family:var(--f-mono); font-size:var(--t-1); letter-spacing:.12em;
  text-transform:uppercase; color:var(--dust); cursor:pointer;
}
.dk__finishconfirm button:first-child{ border-color:#8A7422; color:#E8D48A; }
.dk__finishconfirm button:first-child:hover{ background:rgba(138,116,34,.3); }
.dk__finishconfirm button:hover{ color:var(--bone); }

.dk__securenote{
  margin:0 1rem .9rem; padding:.6rem .75rem;
  border-left:2px solid #C9A93E;
  font-family:var(--f-mono); font-size:var(--t-1); line-height:1.8; color:var(--ash);
}
.dk__securenote b{ color:#E8D48A; font-weight:400; }
.dk__securenote.is-warn{ border-left-color:#D9A15A; color:#D9C08A; }
.dk__securenote[hidden]{ display:none; }

/* the deliberate wipe: quiet until armed, unmistakable when armed */
.dk__acts.is-reset{ border-top:1px solid var(--line-soft); margin-top:.3rem; }
.dk__acts.is-reset button{ color:var(--dust); }
.dk__acts.is-reset button:hover{ color:#E89D9D; border-color:#7A2E2E; background:rgba(120,30,30,.14); }
.dk__acts.is-reset button.is-armed{
  color:#FFB3B3; border-color:var(--done); background:rgba(120,20,20,.28);
}

/* ── the axle rows, made regular ─────────────────────────────────────
   Name, then the figure, then the bar with its percentage — every bar
   the same width regardless of how long the figure above it runs. */
.dk__axle{
  grid-template-columns:1fr auto;
  grid-template-areas:"name name" "val val" "bar pct";
  row-gap:.4rem;
}
.dk__axname{ grid-area:name; }
.dk__axval{ grid-area:val; }
.dk__axtrack{ grid-area:bar; align-self:center; }
.dk__axpct{ grid-area:pct; }