/* ============================================================
   FILE NL-VEIL — additions on top of the case-file base sheet.
   Inventory groups, the markdown paper, viewer navigation.
   ============================================================ */

/* ---------------- inventory groups ---------------- */
.inv-group{
  list-style:none;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:11.5px;
  letter-spacing:.18em;color:var(--red-ink);
  padding:26px 6px 6px;border-bottom:2px solid var(--ink);
}
.inv-group:first-child{padding-top:4px}
.inv-group .inv-group-note{
  float:right;font-weight:400;letter-spacing:.06em;color:var(--ink-faded);text-transform:lowercase;
}
.inv-row .inv-title code{
  font-family:'Courier Prime',monospace;font-size:.92em;
  background:rgba(168,36,27,.07);padding:0 .25em;border-radius:2px;
}
.inv-sheet.flash{animation:inv-flash 1.2s ease 1}
@keyframes inv-flash{0%{box-shadow:0 0 0 4px rgba(179,48,31,.55)}100%{box-shadow:0 3px 8px rgba(50,30,5,.28)}}

/* ---------------- timeline source links ---------------- */
.src-link{
  background:transparent;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;
  border-bottom:1.5px dotted rgba(140,27,18,.55);
}
.src-link:hover,.src-link:focus-visible{color:var(--red-bright);border-bottom-style:solid}

/* ---------------- the markdown paper ---------------- */
.docview-body h1{
  font-family:'Courier Prime',monospace;font-weight:700;font-size:19px;letter-spacing:.07em;
  text-align:center;line-height:1.5;text-transform:uppercase;
  border-bottom:2px solid var(--ink);padding-bottom:12px;margin:0 0 18px;
}
.docview-body h2{
  font-family:'Courier Prime',monospace;font-weight:700;font-size:14.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
  margin:1.8em 0 .7em;padding-bottom:4px;
  border-bottom:1.5px dotted rgba(74,66,52,.5);
}
.docview-body h2::before{content:"§ ";color:var(--red-ink)}
.docview-body h3,.docview-body h4,.docview-body h5,.docview-body h6{
  font-family:'Courier Prime',monospace;font-weight:700;font-size:13.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faded);margin:1.5em 0 .5em;
}
.docview-body p{margin:0 0 1em}
.docview-body p:last-child{margin-bottom:0}
.docview-body a{
  color:var(--red-ink);text-decoration:none;
  border-bottom:1.5px dotted rgba(140,27,18,.55);
}
.docview-body a:hover,.docview-body a:focus-visible{color:var(--red-bright);border-bottom-style:solid}
.docview-body code{
  font-family:'Courier Prime',monospace;font-size:.94em;
  background:rgba(38,33,23,.07);padding:.05em .3em;border-radius:2px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.docview-body pre.md-code{
  background:var(--bond-aged);
  border:1.5px solid rgba(74,66,52,.35);
  box-shadow:inset 0 0 8px rgba(140,120,70,.18);
  padding:14px 16px;margin:0 0 1.2em;overflow-x:auto;
  font-size:13px;line-height:1.55;
}
.docview-body pre.md-code code{background:transparent;padding:0;border-radius:0}
.docview-body ul,.docview-body ol{margin:0 0 1.1em;padding-left:1.6em}
.docview-body li{margin:.3em 0}
.docview-body li::marker{color:var(--red-ink)}
.docview-body blockquote{
  margin:0 0 1.2em;padding:.2em 0 .2em 1.1em;
  border-left:3px solid rgba(168,36,27,.5);
  color:var(--ink-faded);
}
.docview-body hr{
  border:0;border-top:2px dotted rgba(74,66,52,.5);
  margin:1.6em auto;width:70%;
}
.docview-body img{max-width:100%;height:auto;box-shadow:0 3px 10px rgba(50,30,5,.3)}
.md-tablewrap{overflow-x:auto;margin:0 0 1.2em}
.md-table{
  width:100%;border-collapse:collapse;
  font-family:'Courier Prime',monospace;font-size:12.5px;
}
.md-table th{
  text-align:left;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:2px solid var(--ink);padding:6px 10px 5px 0;
}
.md-table td{
  padding:7px 10px 6px 0;vertical-align:top;
  border-bottom:1.5px dotted rgba(74,66,52,.4);
}
.md-table tr:last-child td{border-bottom:0}

/* footer link keeps the case-file ink */
.foot-line a{
  color:var(--red-ink);text-decoration:none;
  border-bottom:1.5px dotted rgba(140,27,18,.55);
}
.foot-line a:hover,.foot-line a:focus-visible{color:var(--red-bright);border-bottom-style:solid}

/* the typed footer line the generator leaves on every page
   (nth-last-child(2): the viewer nav is appended after the last paragraph) */
.docview-body>p:last-child em:only-child,
.docview-body>p:nth-last-child(2) em:only-child{
  display:block;text-align:center;font-style:normal;
  font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:.08em;
  color:var(--ink-faded);margin-top:1.6em;
}

/* ---------------- viewer loading + error ---------------- */
.docview-wait{
  font-family:'Courier Prime',monospace;font-weight:700;font-size:13px;letter-spacing:.16em;
  color:var(--ink-faded);text-align:center;padding:60px 0;
}
.docview-wait::after{content:"▌";animation:caret 1s steps(2) infinite;color:var(--red-ink)}
@keyframes caret{50%{opacity:0}}
.docview-err .doc-head{border-color:var(--red)}

/* ---------------- viewer prev/next ---------------- */
.docview-nav{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  margin-top:34px;padding-top:14px;
  border-top:2px solid var(--ink);
  font-family:'Courier Prime',monospace;font-size:12px;letter-spacing:.06em;
}
.docview-nav button{
  background:transparent;border:0;padding:0;cursor:pointer;
  font:inherit;font-weight:700;color:var(--red-ink);letter-spacing:.08em;
  border-bottom:1.5px dotted rgba(140,27,18,.55);
}
.docview-nav button:hover,.docview-nav button:focus-visible{color:var(--red-bright);border-bottom-style:solid}
.docview-nav button[disabled]{visibility:hidden}
.docview-nav .dv-pos{color:var(--ink-faded);font-weight:400}
@media (max-width:640px){
  .docview-nav{flex-wrap:wrap}
  .docview-nav .dv-pos{order:3;width:100%;text-align:center}
}

/* ---------------- board: hive item tweaks ---------------- */
.icard .ic-body small{
  display:block;font-family:'Courier Prime',monospace;font-size:10px;
  letter-spacing:.08em;color:var(--ink-faded);padding-top:4px;
}

/* GitHub corner link on the cover */
.cover-repo{
  text-align:center;margin-top:10px;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:12.5px;letter-spacing:.1em;
}
.cover-repo a{
  color:var(--red-ink);text-decoration:none;
  border-bottom:1.5px dotted rgba(140,27,18,.55);
}
.cover-repo a:hover,.cover-repo a:focus-visible{color:var(--red-bright);border-bottom-style:solid}

/* ============================================================
   THE VEIL — the dark persona. Pull the cord and the reading-room
   lamp goes to one bulb: the surround falls to near-black, the
   papers stay lamp-lit (ink contrast preserved), the evidence red
   burns. Everything downstream reads CSS vars, so it just cascades.
   ============================================================ */
:root[data-veil]{
  --manila:#141017;          /* the desk, not the folder — charcoal with a violet undertone */
  --manila-deep:#0e0b12;
  --manila-shadow:#080609;
  --bond:#e7dcbe;            /* the page under the lamp — still warm, a touch dimmer */
  --bond-aged:#d8cba6;
  --ink:#211b12;            /* ink on lamp-lit paper stays dark: contrast unchanged */
  --ink-faded:#4a4234;
  --red:#C9301F;
  --red-bright:#E8452C;
  --red-ink:#9c2015;
  --cork:#3a2614;          /* the board recedes into the dark */
  --cork-deep:#241608;
  --pen:#8AA0D0;           /* ballpoint brightened so the hand reads on black */
  --polar-frame:#cabf9f;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.18 0 0 0 0 0.10 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}
:root[data-veil] body{
  background-color:var(--manila);
  background-image:
    radial-gradient(900px 620px at 50% -6%, rgba(232,120,60,.16), transparent 62%),
    radial-gradient(1200px 900px at 112% 8%, rgba(180,40,26,.12), transparent 60%),
    radial-gradient(1000px 1200px at -8% 108%, rgba(60,20,80,.10), transparent 62%),
    var(--grain);
}
:root[data-veil] html{scrollbar-color:var(--red-ink) var(--manila-deep)}
:root[data-veil] ::-webkit-scrollbar-track{background:var(--manila-deep)}
:root[data-veil] ::-webkit-scrollbar-thumb{background:#3a2614;border-color:var(--manila-deep)}
:root[data-veil] ::-webkit-scrollbar-thumb:hover{background:var(--red-ink)}

/* the whole page sits under one dying bulb + a red haze that only the veil sees */
.veil-vapor{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .8s ease;
  background:
    radial-gradient(60% 42% at 50% 8%, rgba(255,190,120,.10), transparent 60%),
    radial-gradient(120% 90% at 50% 46%, transparent 52%, rgba(4,2,6,.62) 100%);
  mix-blend-mode:normal;
}
:root[data-veil] .veil-vapor{opacity:1}
:root[data-veil] main,:root[data-veil] .cover,:root[data-veil] .foot{position:relative;z-index:1}

/* the evidence red burns in the dark; stamps throw a low glow */
:root[data-veil] .stamp{filter:drop-shadow(0 0 10px rgba(201,48,31,.35))}
:root[data-veil] .stamp-header{filter:none}
:root[data-veil] .stamp-unresolved{filter:drop-shadow(0 0 16px rgba(232,69,44,.5))}
:root[data-veil] .tl-flag::before{box-shadow:0 0 10px 2px rgba(201,48,31,.6)}
:root[data-veil] .board-stage{box-shadow:0 22px 64px -10px rgba(0,0,0,.85), 0 0 0 1px rgba(201,48,31,.10)}
:root[data-veil] .inv-sheet,:root[data-veil] .note-page,:root[data-veil] .docview-paper{
  box-shadow:0 3px 8px rgba(0,0,0,.6), 0 26px 60px -14px rgba(0,0,0,.75), 0 0 46px -8px rgba(232,120,60,.12);
}
:root[data-veil] .cover-file{text-shadow:0 0 18px rgba(232,120,60,.18)}
:root[data-veil] .foot{background:var(--manila-deep);border-top-color:#3a2614}

/* ---------------- the pull-cord toggle ---------------- */
.veil-cord{
  position:fixed;top:0;right:clamp(18px,5vw,54px);z-index:60;
  display:flex;flex-direction:column;align-items:center;
  border:0;background:transparent;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.veil-cord .cord-line{
  width:2px;height:64px;
  background:linear-gradient(var(--ink-faded),rgba(74,66,52,.35));
  transition:height .25s cubic-bezier(.2,1.3,.35,1);
}
.veil-cord .cord-pull{
  width:16px;height:24px;border-radius:8px 8px 9px 9px;
  background:radial-gradient(circle at 40% 32%, #d9c489, #9c7b3e 70%, #6e5527);
  box-shadow:0 2px 5px rgba(20,10,0,.5), inset 0 1px 0 rgba(255,240,200,.4);
  margin-top:-1px;
}
.veil-cord:hover .cord-line,.veil-cord:focus-visible .cord-line{height:74px}
.veil-cord:active .cord-line{height:82px}
.veil-cord .cord-label{
  margin-top:8px;writing-mode:vertical-rl;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:10px;letter-spacing:.22em;
  color:var(--ink-faded);text-transform:uppercase;
  opacity:0;transition:opacity .25s ease;
}
.veil-cord:hover .cord-label,.veil-cord:focus-visible .cord-label{opacity:1}
:root[data-veil] .veil-cord .cord-pull{
  background:radial-gradient(circle at 40% 32%, #e8452c, #9c2015 70%, #5a0f08);
  box-shadow:0 0 12px rgba(232,69,44,.55), inset 0 1px 0 rgba(255,200,190,.4);
}
:root[data-veil] .veil-cord .cord-line{background:linear-gradient(rgba(201,48,31,.5),rgba(201,48,31,.12))}
:root[data-veil] .veil-cord .cord-label{color:var(--red)}
@media (prefers-reduced-motion:reduce){
  .veil-cord .cord-line{transition:none}
  .veil-vapor{transition:none}
}
@media (max-width:640px){ .veil-cord{right:10px} .veil-cord .cord-line{height:44px} }