/* ════════════════════════════════════════════════════════════
   COMPONENT CRAFT LAYER — THE SECOND AUDIT · added 2026-06-11
   rule: every component demonstrates the thing it describes
   ════════════════════════════════════════════════════════════ */

/* ── A · dossier as a physical identity document ── */
.dossier{padding:30px 32px 22px 52px;overflow:visible}
.punches{position:absolute;left:14px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-evenly}
.punches i{
  width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #04060a 60%, rgba(239,233,218,.12) 62%, rgba(239,233,218,.05) 100%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9);
}
.dossier-head{align-items:center;gap:18px}
.barcode{
  flex:1;height:16px;max-width:150px;opacity:.55;
  background:repeating-linear-gradient(90deg,
    var(--bone) 0 1px, transparent 1px 3px,
    var(--bone) 3px 6px, transparent 6px 7px,
    var(--bone) 7px 8px, transparent 8px 12px,
    var(--bone) 12px 13px, transparent 13px 15px);
}
.typein{min-height:1.6em}
.typein.typing::after{content:"▌";color:var(--amber);animation:blink 1s steps(1) infinite;margin-left:1px}
.dossier-foot{
  display:flex;justify-content:space-between;margin-top:16px;padding-top:12px;
  font-size:8.5px;letter-spacing:.26em;color:var(--bone-faint);
}
.vstamp{
  position:absolute;right:-16px;top:-20px;z-index:3;
  border:2.5px solid var(--amber);outline:1.5px solid var(--amber);outline-offset:3px;
  padding:10px 18px 8px;text-align:center;transform:rotate(7deg) scale(0);
  color:var(--amber);background:rgba(7,9,13,.55);
}
.vstamp b{display:block;font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:.22em}
.vstamp i{display:block;font-style:normal;font-size:7.5px;letter-spacing:.2em;margin-top:4px;opacity:.85}
.vstamp.show{transform:rotate(7deg) scale(1);transition:transform .28s cubic-bezier(.2,2.4,.4,1)}
.vstamp.small{right:-12px;top:-16px;transform:rotate(-6deg) scale(0)}
.vstamp.small.show{transform:rotate(-6deg) scale(1)}
.vstamp.small b{font-size:16px}

/* ── B · the agent operating the CRM ── */
#crmMain{position:relative}
.agentcursor{
  position:absolute;left:60%;top:30%;z-index:5;pointer-events:none;
  display:flex;align-items:center;gap:6px;opacity:0;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.8));
}
.agentcursor span{
  font-size:8px;letter-spacing:.22em;color:var(--ink);background:var(--amber);
  padding:2.5px 7px 1.5px;font-weight:700;
}
.agentcursor.click svg{transform:scale(.78)}
.agentcursor svg{transition:transform .12s}
.crm-row{transition:background .25s,border-color .25s}
.crm-row.hl{background:rgba(255,178,36,.09);border-bottom-color:rgba(255,178,36,.4)}
.crm-stat b{transition:color .2s}
.crm-stat b.tick{color:var(--amber)}

/* ── C · remediation as a case-status composite ── */
.remed{
  max-width:880px;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;
  position:relative;overflow:visible;
}
@media(max-width:860px){.remed{grid-template-columns:1fr;gap:28px}}
.rchecks{list-style:none;margin:20px 0 22px;display:flex;flex-direction:column;gap:14px;padding:0}
.rchecks li{
  display:flex;align-items:flex-start;gap:14px;text-align:left;
  font-size:10.5px;letter-spacing:.14em;color:var(--bone-dim);line-height:1.7;
}
.rchecks li i{
  flex-shrink:0;width:17px;height:17px;border:1.5px solid rgba(239,233,218,.4);position:relative;margin-top:1px;
}
.rchecks li i::after{
  content:"";position:absolute;left:3px;top:-3px;width:14px;height:8px;
  border-left:2.5px solid var(--amber);border-bottom:2.5px solid var(--amber);
  transform:rotate(-48deg) scale(0);transform-origin:center;
}
.remed.go .rchecks li i::after{transform:rotate(-48deg) scale(1);transition:transform .22s cubic-bezier(.2,2.2,.4,1)}
.remed.go .rchecks li:nth-child(1) i::after{transition-delay:.5s}
.remed.go .rchecks li:nth-child(2) i::after{transition-delay:1.05s}
.remed.go .rchecks li:nth-child(3) i::after{transition-delay:1.6s}
.rclose{margin-top:4px}
.remed-right{display:flex;flex-direction:column;justify-content:center;gap:14px}
#aprChart{width:100%;height:auto}
#aprPath{stroke-dasharray:520;stroke-dashoffset:520}
.remed.go #aprPath{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.45,0,.2,1) .4s}
.aprdots circle{fill:var(--ink);stroke:var(--steel);stroke-width:1.5}
.aprlbl text{font-family:var(--mono);font-size:9px;letter-spacing:2px;fill:var(--steel);text-anchor:middle}
.aprlbl .now{fill:var(--amber)}
.rcap{font-size:9px;letter-spacing:.3em;color:var(--steel);text-align:center}

/* ── D · directive core: packets falling through the layers ── */
.flow{position:relative}
.flowrail{position:absolute;left:34px;top:18px;bottom:54px;width:1px;background:rgba(239,233,218,.12)}
.pkt{
  position:absolute;left:-3.5px;width:8px;height:8px;border-radius:50%;
  background:var(--amber);opacity:0;
}
.k1{animation:pktfall 5.2s linear infinite}
.k2{animation:pktfall 5.2s linear 2.6s infinite}
.kfail{background:var(--steel);animation:pktretry 7.8s linear 1.3s infinite}
@keyframes pktfall{
  0%{top:-2%;opacity:0}4%{opacity:1}
  30%{top:33%}60%{top:66%}
  88%{top:101%;opacity:1}92%,100%{top:101%;opacity:0}
}
@keyframes pktretry{
  0%{top:-2%;opacity:0}3%{opacity:1}
  22%{top:33%}44%{top:66%;background:#5a6c78}
  52%{top:58%;background:#5a6c78}
  62%{top:66%;background:var(--amber)}
  86%{top:101%;opacity:1;background:var(--amber)}90%,100%{top:101%;opacity:0}
}
.flow .layer{position:relative;margin-left:58px;overflow:visible}
.flow .inv{margin-left:58px}
.lping{
  position:absolute;left:-24px;top:50%;width:7px;height:7px;margin-top:-3.5px;
  background:rgba(239,233,218,.25);transform:rotate(45deg);
}
.flow .l1 .lping{animation:lglow 5.2s linear infinite}
.flow .l2 .lping{animation:lglow 5.2s linear .9s infinite}
.flow .l3 .lping{animation:lglow 5.2s linear 1.9s infinite}
@keyframes lglow{0%,8%{background:rgba(239,233,218,.25)}12%,20%{background:var(--amber)}26%,100%{background:rgba(239,233,218,.25)}}
.lretry{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:8px;letter-spacing:.2em;color:var(--amber);
  border:1px solid rgba(255,178,36,.45);padding:4px 8px;
  animation:retryblink 7.8s linear 1.3s infinite;opacity:0;
}
@keyframes retryblink{0%,43%{opacity:0}47%,72%{opacity:1}78%,100%{opacity:0}}

/* ── E · the vault graph ── */
.graphwrap{position:relative;min-height:330px}
#brainGraph{display:block;width:100%;height:300px}
.graphfoot{
  display:flex;gap:26px;justify-content:center;padding:10px 0 14px;
  font-size:8.5px;letter-spacing:.24em;color:var(--steel);border-top:1px solid var(--hair);
}
.gdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:rgba(239,233,218,.5);margin-right:8px;vertical-align:0}
.gdot.amber{background:var(--amber)}

/* ── F · the phone ── */
.mock.phone{
  max-width:392px;margin:0 auto;border-radius:34px;
  border:1px solid rgba(239,233,218,.16);
  box-shadow:0 50px 110px rgba(0,0,0,.6),inset 0 0 0 5px #04060a,inset 0 0 0 6px rgba(239,233,218,.08);
  padding:6px;
}
.phonestatus{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 22px 8px;font-size:9.5px;color:var(--bone-dim);letter-spacing:.08em;
}
.phonestatus b{width:84px;height:20px;background:#04060a;border-radius:12px;border:1px solid rgba(239,233,218,.07)}
.phonehead{
  display:flex;align-items:center;gap:11px;padding:8px 18px 12px;border-bottom:1px solid var(--hair);
  font-size:9px;letter-spacing:.12em;color:var(--bone-dim);
}
.phonehead .avatar{
  width:28px;height:28px;border-radius:50%;background:rgba(255,178,36,.16);color:var(--amber);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;
}
.phonehead .who{flex:1;line-height:1.6}
.phonehead .who b{display:block;color:var(--bone);font-weight:400}
.phonehead .enc{color:var(--amber);font-size:8.5px;letter-spacing:.2em}
.mock.phone .chat{min-height:300px;padding:18px 18px 10px}
.phonebar{width:118px;height:4px;border-radius:2px;background:rgba(239,233,218,.25);margin:6px auto 10px}
.bub.typing{
  align-self:flex-start;display:flex;gap:5px;padding:13px 16px;background:rgba(239,233,218,.04);
}
.bub.typing i{
  width:6px;height:6px;border-radius:50%;background:var(--bone-dim);
  animation:typedot 1.1s ease-in-out infinite;
}
.bub.typing i:nth-child(2){animation-delay:.18s}
.bub.typing i:nth-child(3){animation-delay:.36s}
@keyframes typedot{0%,100%{opacity:.25;transform:translateY(0)}45%{opacity:1;transform:translateY(-3px)}}
.ticks{color:var(--amber);font-weight:400;letter-spacing:-2px}
.chat .bub.typing{display:none}
.chat.armed .bub{opacity:0;transform:translateY(12px)}
.chat .bub{transition:opacity .45s ease,transform .45s ease}
.chat.armed .bub.shown{opacity:1;transform:none}
.chat.armed .bub.typing{display:flex}
.chat.armed .bub.typing:not(.shown){display:none}

/* ── G · night-shift terminal queue ── */
#nightTerm > div{opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s}
#nightTerm.play > div{opacity:1;transform:none}
#nightTerm.play > div:nth-child(1){transition-delay:.1s}
#nightTerm.play > div:nth-child(2){transition-delay:.7s}
#nightTerm.play > div:nth-child(3){transition-delay:1.3s}
#nightTerm.play > div:nth-child(4){transition-delay:1.9s}
#nightTerm.play > div:nth-child(5){transition-delay:2.4s}
#nightTerm.play > div:nth-child(6){transition-delay:4.6s}
.sendq{display:flex;align-items:center;gap:14px}
.qbar{flex:1;max-width:240px;height:5px;background:rgba(239,233,218,.1);overflow:hidden}
.qbar i{display:block;height:100%;width:0;background:var(--amber)}
#nightTerm.play .qbar i{width:100%;transition:width 2s cubic-bezier(.3,0,.4,1) 2.5s}
.qnum{font-size:10px;color:var(--steel);font-variant-numeric:tabular-nums}

/* ── H · evidence tags ── */
.ex-facts{counter-reset:fact;gap:10px}
.ex-facts span{
  counter-increment:fact;position:relative;
  padding:7px 13px 7px 26px;background:rgba(239,233,218,.025);
  border:1px solid rgba(239,233,218,.14);
  clip-path:polygon(11px 0,100% 0,100% 100%,11px 100%,0 50%);
}
.ex-facts span::before{
  content:"";position:absolute;left:8px;top:50%;width:5px;height:5px;margin-top:-2.5px;
  border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px rgba(239,233,218,.35);
}
.ex-facts span::after{
  content:"E-" counter(fact,decimal-leading-zero);
  margin-left:9px;color:var(--amber);font-size:8px;letter-spacing:.14em;vertical-align:1px;
}
.ex-facts span:nth-child(odd){transform:rotate(-.5deg)}
.ex-facts span:nth-child(even){transform:rotate(.45deg)}
.ex-facts span:hover{transform:rotate(0);border-color:rgba(255,178,36,.5)}

/* ── I · cross-exam rulings ── */
.ruling{
  display:inline-block;margin-left:12px;vertical-align:1px;
  font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.18em;
  color:var(--amber);border:2px solid var(--amber);padding:3px 9px 2px;
  transform:rotate(-3deg) scale(0);
}
.ruling.show{transform:rotate(-3deg) scale(1);transition:transform .25s cubic-bezier(.2,2.4,.4,1)}

/* ── J · testimony artifact stubs ── */
.stub{
  display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  font-size:9px;letter-spacing:.18em;color:var(--bone-dim);
  border:1px dashed rgba(239,233,218,.3);padding:8px 14px;
  transform:rotate(-.8deg);background:rgba(239,233,218,.015);
}
.stub i{
  font-style:normal;color:var(--amber);font-size:8px;letter-spacing:.26em;
  border-right:1px dashed rgba(239,233,218,.3);padding-right:10px;
}

/* reduced-motion: components settle to their final states */
html.reduced .vstamp,html.reduced .vstamp.small{transform:rotate(7deg) scale(1)}
html.reduced .ruling{transform:rotate(-3deg) scale(1)}
html.reduced #aprPath{stroke-dashoffset:0}
html.reduced .rchecks li i::after{transform:rotate(-48deg) scale(1)}
html.reduced .pkt,html.reduced .lping,html.reduced .lretry{animation:none}
html.reduced .lretry{opacity:1}
html.reduced #nightTerm > div{opacity:1;transform:none}
html.reduced .qbar i{width:100%}
html.reduced .chat.armed .bub{opacity:1;transform:none}
html.reduced .agentcursor{display:none}