/* /self-host/docker/ only: the layer stack, the flag assembler, the socket wiring board,
   the rotation reel and the tag pins. */

/* ---------- hero: layer stack (docker/Dockerfile, built from the bottom) ---------- */
.dk-ls{border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep);overflow:hidden;font:400 .76rem/1.45 var(--sk-mono)}
.dk-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .9rem;border-bottom:1px solid var(--sk-line);color:var(--sk-text-3);font-size:.68rem}
.dk-btn{flex:none;padding:.25rem .55rem;border:1px solid var(--sk-line-2);border-radius:3px;background:none;color:var(--sk-text-2);font:500 .68rem var(--sk-mono);cursor:pointer}
.dk-btn:focus-visible{outline:2px solid var(--sk-ai);outline-offset:2px}
.dk-stack{margin:0;padding:.9rem .9rem 1rem;list-style:none;display:flex;flex-direction:column;gap:.3rem}
.dk-stack li{display:grid;grid-template-columns:8.6rem minmax(0,1fr);gap:.7rem;align-items:baseline;padding:.4rem .65rem;border:1px solid var(--sk-line-2);border-left:3px solid #3e6d93;border-radius:4px;background:var(--sk-ink-2);animation:dkLay 8s calc(var(--i) * .3s) infinite both}
.dk-stack code{color:var(--sk-text);font-weight:700}
.dk-stack span{color:var(--sk-text-3);font-size:.7rem;min-width:0;overflow-wrap:anywhere}
.dk-stack .dk-vol{border-left-color:var(--sk-ai);background:#2a1a10}
.dk-stack .dk-vol span{color:#ffc9a8}
.dk-stack .dk-base{border-left-color:#6b747c;background:#141c24}
@keyframes dkLay{0%{opacity:0;transform:translateY(-.9rem)}5%{opacity:1;transform:none}86%{opacity:1;transform:none}96%,100%{opacity:.15;transform:none}}
.dk-ls.paused .dk-stack li{animation-play-state:paused}

/* ---------- 01: flag assembler ---------- */
.dk-faw{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.6rem;margin-top:1rem;align-items:start}
.dk-in{display:grid;gap:.75rem}
.dk-in label{display:grid;gap:.25rem}
.dk-in label span{font:600 .68rem var(--sk-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--sk-text-4)}
.dk-in input[type="text"],.dk-in select{width:100%;min-width:0;padding:.55rem .65rem;border:1px solid var(--sk-line-2);border-radius:4px;background:var(--sk-ink-2);color:var(--sk-text);font:500 .82rem var(--sk-mono)}
.dk-in input[type="text"]:focus,.dk-in select:focus{outline:2px solid var(--sk-ai);outline-offset:1px}
.dk-in input.bad{border-color:#e5484d;background:#24151a}
.dk-in .dk-chk{display:flex;gap:.55rem;align-items:flex-start}
.dk-in .dk-chk span{text-transform:none;letter-spacing:0;font:400 .8rem/1.4 var(--sk-sans);color:var(--sk-text-2)}
.dk-in .dk-chk input{margin-top:.15rem;accent-color:var(--sk-ai)}
.dk-outw{min-width:0}
.dk-outw pre{overflow-x:auto}
.dk-outw .add{color:#8fe3b4}
.dk-err{margin:.7rem 0 0;padding:.55rem .75rem;border-left:3px solid #e5484d;background:#24151a;color:#ffb38f;font:500 .76rem/1.45 var(--sk-mono);overflow-wrap:anywhere}
.dk-notes[hidden]{display:none}
.dk-notes{margin:.9rem 0 0;padding:0;list-style:none;display:grid;gap:.45rem}
.dk-notes li{padding-left:.9rem;border-left:2px solid var(--sk-line-2);color:var(--sk-text-2);font-size:.88rem;line-height:1.5}
.dk-notes code{color:var(--sk-text);font-size:.78rem}

/* ---------- 02: socket wiring board (paper fold) ---------- */
.dk-swc{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;align-items:center;margin-top:1rem}
.dk-tg{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .2rem;border:0;background:none;color:var(--sk-paper-ink);font:600 .86rem var(--sk-sans);cursor:pointer;text-align:left}
.dk-knob{position:relative;flex:none;width:2.5rem;height:1.35rem;border:1px solid #6b747c;border-radius:999px;background:#9aa3ab}
.dk-knob::after{content:'';position:absolute;left:.12rem;top:.12rem;width:1rem;height:1rem;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .2s}
.dk-tg[aria-checked="true"] .dk-knob{background:#1baf7a;border-color:#138a5f}
.dk-tg[aria-checked="true"] .dk-knob::after{transform:translateX(1.12rem)}
.dk-ctl[data-group="bind"] .dk-tg[aria-checked="true"] .dk-knob{background:#c8452a;border-color:#8a2a17}
.dk-tg:focus-visible{outline:2px solid var(--sk-cta);outline-offset:3px;border-radius:4px}
.dk-swb{margin-top:1rem;padding:1.2rem;border:1px solid #c9bfae;border-radius:8px;background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(70,83,95,.07) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(70,83,95,.07) 23px 24px),#f3eee4}
.dk-sw{display:grid;grid-template-columns:minmax(0,1fr) 3.6rem minmax(0,1fr) 4.6rem minmax(0,1fr) 2rem minmax(0,1.2fr);grid-template-rows:auto auto;gap:1rem 0;align-items:center}
.dk-node{display:flex;flex-direction:column;gap:.15rem;padding:.6rem .7rem;border:2px solid #46535f;border-radius:6px;background:#fff;color:#1d2833;min-width:0}
.dk-node b{font:700 .78rem var(--sk-sans)}
.dk-node code{font:600 .72rem var(--sk-mono);color:#33414e;overflow-wrap:anywhere}
.dk-node small{font:400 .66rem/1.35 var(--sk-mono);color:#5b6670}
.dk-vis{grid-column:1;grid-row:1}.dk-web{grid-column:3;grid-row:1;border-color:#138a5f}
.dk-port{grid-column:5;grid-row:1}.dk-box{grid-column:7;grid-row:1;border-color:#3e6d93;background:#eef4f9}
.dk-str{grid-column:5/8;grid-row:2;border-style:dashed;border-color:#b8432a;background:#fff3ef;opacity:.25;transition:opacity .3s}
.dk-wire{position:relative;grid-row:1;height:3px;background:#46535f}
.dk-wire em{position:absolute;left:50%;bottom:.35rem;transform:translateX(-50%);font:600 .6rem var(--sk-mono);font-style:normal;color:#46535f;white-space:nowrap}
.dk-wire.w1{grid-column:2;background:#138a5f}.dk-wire.w2{grid-column:4;background:#138a5f}.dk-wire.w3{grid-column:6}
.dk-wire.w4{display:none}
.dk-wire::after{content:'';position:absolute;right:-2px;top:50%;width:0;height:0;border:5px solid transparent;border-left:7px solid currentColor;transform:translateY(-50%);color:inherit}
.dk-wire.w1,.dk-wire.w2{color:#138a5f}.dk-wire.w3{color:#46535f}
.dk-swb[data-state="open"] .dk-port{border-color:#b8432a;background:#fff3ef}
.dk-swb[data-state="open"] .dk-str{opacity:1;animation:dkBlink 1.4s ease-out}
.dk-swb[data-state="open"] .dk-str b::before{content:'reaches it: '}
.dk-swb:not([data-state="open"]) .dk-str b::before{content:'cannot reach it: '}
.dk-sw[data-state="none"] .dk-web small{text-decoration:line-through;color:#b8432a}
.dk-sw[data-state="none"] .dk-vis code{text-decoration:line-through;opacity:.5}
@keyframes dkBlink{0%{box-shadow:0 0 0 0 rgba(184,67,42,.5)}100%{box-shadow:0 0 0 12px rgba(184,67,42,0)}}
.dk-read{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.1rem 0 0}
.dk-read div{padding:.6rem .8rem;border-left:3px solid #138a5f;background:rgba(255,255,255,.7)}
.dk-read div.bad{border-left-color:#b8432a;background:#fff3ef}
.dk-read dt{font:600 .64rem var(--sk-mono);letter-spacing:.06em;text-transform:uppercase;color:#5b6670}
.dk-read dd{margin:.2rem 0 0;color:#1d2833;font-weight:600;line-height:1.45}
.dk-snips{margin-top:1.6rem}
.dk-p{margin:0 0 1rem;line-height:1.6}
.dk-p2{color:var(--sk-text-2)}

/* ---------- 03: rotation reel ---------- */
.dk-rng{gap:1rem}
.dk-rng label{font:600 .86rem var(--sk-sans);color:var(--sk-text)}
.dk-rng label b{display:inline-block;min-width:1.6em;color:var(--sk-ai);font:700 1rem var(--sk-mono)}
.dk-rng input{flex:1 1 14rem;max-width:24rem;accent-color:var(--sk-ai)}
.dk-rrw{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.8rem;margin-top:1rem;align-items:start}
.dk-rr{min-width:0;padding:1rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep)}
.dk-k{margin:0 0 .45rem;font:600 .64rem var(--sk-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sk-text-4)}
.dk-reel{display:flex;gap:.3rem;margin:0 0 1rem;padding:0 0 .3rem;list-style:none;overflow-x:auto}
.dk-reel li{flex:none;padding:.3rem .5rem;border:1px solid var(--sk-line-2);border-radius:999px;background:var(--sk-ink-2);color:var(--sk-text-2);font:500 .66rem var(--sk-mono);white-space:nowrap}
.dk-reel li:first-child{border-color:var(--sk-ai);color:var(--sk-text)}
.dk-days{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:3px;margin:0 0 .9rem;padding:0;list-style:none}
.dk-days li{aspect-ratio:1/1;border-radius:2px;background:transparent;border:1px dashed #3a4856}
.dk-days li.ok{border:0;background:#1baf7a;animation:dkFill .4s ease-out both}
.dk-days li.part{border:0;background:repeating-linear-gradient(135deg,#1baf7a 0 3px,#0f5e43 3px 6px)}
@keyframes dkFill{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.dk-key{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:-.4rem 0 .8rem;padding:0;list-style:none;font:400 .66rem var(--sk-mono);color:var(--sk-text-3)}
.dk-key i{display:inline-block;width:.7rem;height:.7rem;margin-right:.35rem;border-radius:2px;vertical-align:-1px}
.dk-key .k-ok{background:#1baf7a}.dk-key .k-part{background:repeating-linear-gradient(135deg,#1baf7a 0 3px,#0f5e43 3px 6px)}.dk-key .k-no{border:1px dashed #5b6a78}
.dk-bf{margin:0;padding:.55rem .7rem;border-radius:4px;background:#0b1118;color:#8fe3b4;font:500 .74rem/1.5 var(--sk-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.dk-steps{margin:0;padding:0;list-style:none;counter-reset:dk;display:grid;gap:1.1rem}
.dk-steps li{position:relative;padding-left:2.4rem;counter-increment:dk;min-width:0}
.dk-steps li::before{content:counter(dk);position:absolute;left:0;top:0;width:1.7rem;height:1.7rem;border:1px solid var(--sk-ai);border-radius:50%;color:var(--sk-ai);font:700 .8rem/1.7rem var(--sk-mono);text-align:center}
.dk-steps h3{margin:0 0 .25rem;font:700 1rem var(--sk-sans);color:var(--sk-text)}
.dk-steps p{margin:0 0 .5rem;color:var(--sk-text-2);font-size:.9rem;line-height:1.5}
.dk-steps pre{white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- 04: tag pins on a release rail ---------- */
.dk-tp{margin-top:1rem;padding:1.1rem 1.1rem .9rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep)}
.dk-row{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.8rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--sk-line)}
.dk-pl{display:flex;flex-direction:column;min-width:0}
.dk-pl code{color:var(--sk-text);font:700 .86rem var(--sk-mono)}
.dk-pl small{color:var(--sk-text-4);font:400 .64rem var(--sk-mono)}
.dk-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none}
.dk-rail li{text-align:center;color:var(--sk-text-3);font:600 .66rem var(--sk-mono);transition:opacity .3s,color .3s}
.dk-tr{position:relative;display:block;height:1.4rem}
.dk-tr::before{content:'';position:absolute;left:10%;right:10%;top:50%;border-top:1px dashed var(--sk-line-2)}
.dk-tr i{--r:1;position:absolute;top:50%;left:calc(var(--r) * 20% + 10%);width:1.05rem;height:1.05rem;border-radius:50%;transform:translate(-50%,-50%);background:var(--sk-ai);box-shadow:0 0 0 4px rgba(235,104,52,.2);transition:left .6s cubic-bezier(.3,1.4,.5,1)}
.p-exact .dk-tr i{background:#9aa3ab;box-shadow:0 0 0 4px rgba(154,163,171,.2)}
.dk-tp[data-state="now"] .dk-rail li[data-r="2"],.dk-tp[data-state="now"] .dk-rail li[data-r="3"],.dk-tp[data-state="now"] .dk-rail li[data-r="4"],
.dk-tp[data-state="patch"] .dk-rail li[data-r="3"],.dk-tp[data-state="patch"] .dk-rail li[data-r="4"],
.dk-tp[data-state="minor"] .dk-rail li[data-r="4"]{opacity:.3}
.dk-tp[data-state="patch"] .p-minor i,.dk-tp[data-state="patch"] .p-major i,.dk-tp[data-state="patch"] .p-latest i,
.dk-tp[data-state="minor"] .p-minor i,.dk-tp[data-state="major"] .p-minor i{--r:2}
.dk-tp[data-state="minor"] .p-major i,.dk-tp[data-state="minor"] .p-latest i,.dk-tp[data-state="major"] .p-major i{--r:3}
.dk-tp[data-state="major"] .p-latest i{--r:4;background:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.25)}
.dk-tp[data-state="major"] .p-major .dk-pl code{color:#8fe3b4}
.dk-tpv{margin:.8rem 0 0;color:var(--sk-text);font-weight:600;line-height:1.5}
.dk-up{margin-top:1.6rem}

@media (max-width:900px){
  .dk-faw,.dk-rrw{grid-template-columns:minmax(0,1fr)}
  .dk-sw{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:0}
  .dk-sw .dk-node,.dk-sw .dk-wire{grid-column:1;grid-row:auto}
  .dk-wire{justify-self:center;width:3px;height:2rem}
  .dk-wire em{left:.6rem;bottom:auto;top:50%;transform:translateY(-50%)}
  .dk-wire::after{right:auto;left:50%;top:auto;bottom:-6px;border:5px solid transparent;border-top:7px solid currentColor;transform:translateX(-50%)}
  .dk-wire.w3{display:block}
  .dk-str{margin-top:1rem}
  .dk-read{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .dk-stack li{grid-template-columns:minmax(0,1fr);gap:.1rem}
  .dk-row{grid-template-columns:5.6rem minmax(0,1fr);gap:.5rem}
  .dk-pl small{display:none}
  .dk-rail li{font-size:.56rem}
  .dk-days{grid-template-columns:repeat(10,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .dk-stack li,.dk-days li.ok,.dk-swb[data-state="open"] .dk-str{animation:none}
  .dk-tr i,.dk-str,.dk-knob::after{transition:none}
}