/* Dark sections — operating principles terminal + process stepper.
   Everything is scoped under .dark-sec because systems-atlas.css owns generic
   names like .card, .readout, .tags and .label at the top level. Typography
   inherits the atlas's --serif / --sans / --mono so the page reads as one
   document, and no webfont is added (the atlas package deliberately ships none). */

.dark-sec{
  --dk:#171a10;
  --dk-line:#2f3326;
  --dk-ink:#e9e7dd;
  --dk-mute:#9a9c8c;
  --lime:#d8f24b;

  background:var(--dk);
  color:var(--dk-ink);
  padding:clamp(56px,7vw,104px) clamp(18px,3vw,54px);
  font-family:var(--sans);
}
.dark-sec .dark-inner{width:min(100%,1500px);margin:0 auto}
.dark-sec button{font:inherit;color:inherit}

/* ---- terminal ---- */
.dark-sec .term-wrap{position:relative;max-width:880px;margin:0 auto}
.dark-sec .term-shadow{position:absolute;inset:44px -38px -26px 38px;background:var(--lime);z-index:0}
.dark-sec .term{
  position:relative;z-index:1;background:#101208;
  border:1px solid var(--dk-line);font-family:var(--mono);
}
.dark-sec .term-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 22px;border-bottom:1px solid var(--dk-line);
}
.dark-sec .tdots{display:flex;gap:9px}
.dark-sec .tdots i{width:10px;height:10px;border-radius:50%;border:1px solid #4a4f3a;display:block;transition:background .25s}
.dark-sec .term:hover .tdots i:nth-child(1){background:#4a4f3a}
.dark-sec .term-file{font-size:13px;color:var(--dk-mute);letter-spacing:.02em}

.dark-sec .prow{
  display:flex;align-items:flex-start;gap:22px;width:100%;text-align:left;
  padding:20px 22px;border:0;border-bottom:1px solid var(--dk-line);
  border-left:2px solid transparent;background:transparent;cursor:pointer;
  transition:background .18s ease,border-left-color .18s ease;
}
.dark-sec .prow:hover,
.dark-sec .prow[aria-expanded="true"]{background:#161a0d;border-left-color:var(--lime)}
.dark-sec .prow:focus-visible{outline:1px solid var(--lime);outline-offset:-3px}
.dark-sec .pnum{color:var(--lime);font-size:14px;font-weight:700;flex:none;width:22px}
.dark-sec .pbody{flex:1}
.dark-sec .ptitle{display:block;font-size:15px;color:var(--dk-ink);letter-spacing:.01em}
.dark-sec .pdetail{
  display:block;max-height:0;overflow:hidden;opacity:0;
  font-family:var(--sans);font-size:13.5px;line-height:1.7;color:var(--dk-mute);
  transition:max-height .32s ease,opacity .26s ease,margin .32s ease;
}
.dark-sec .prow[aria-expanded="true"] .pdetail{max-height:120px;opacity:1;margin:11px 0 0}
.dark-sec .pcaret{color:#4a4f3a;font-size:13px;flex:none;transition:color .2s,transform .25s}
.dark-sec .prow:hover .pcaret{color:var(--lime)}
.dark-sec .prow[aria-expanded="true"] .pcaret{transform:rotate(90deg);color:var(--lime)}

.dark-sec .term-foot{display:flex;align-items:center;gap:12px;padding:26px 22px;min-height:92px}
.dark-sec .led{
  width:11px;height:11px;background:var(--lime);flex:none;
  box-shadow:0 0 10px 2px rgba(216,242,75,.45);animation:dk-blip 2.6s ease-in-out infinite;
}
@keyframes dk-blip{0%,100%{opacity:1}50%{opacity:.45}}
.dark-sec .term-status{font-size:13.5px;color:var(--dk-mute)}
.dark-sec .caret{
  display:inline-block;width:8px;height:15px;background:var(--lime);
  vertical-align:-2px;margin-left:3px;animation:dk-blink 1.1s steps(1) infinite;
}
@keyframes dk-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---- process stepper ---- */
.dark-sec .proc-split{display:grid;grid-template-columns:minmax(240px,.85fr) 2.4fr;gap:clamp(32px,4vw,64px);align-items:start}
.dark-sec .proc-lede{
  margin:0;color:var(--dk-ink);
  font:500 clamp(34px,3.4vw,56px)/1.02 var(--serif);letter-spacing:-.04em;
}
.dark-sec .proc{border-top:1px solid var(--dk-line)}
.dark-sec .step{
  display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:start;width:100%;
  padding:30px 0 30px 16px;border:0;border-bottom:1px solid var(--dk-line);
  border-left:2px solid transparent;background:transparent;text-align:left;cursor:pointer;
  transition:border-left-color .2s ease,padding-left .2s ease,opacity .25s ease;
}
.dark-sec .step:hover,.dark-sec .step.on{border-left-color:var(--lime);padding-left:24px}
.dark-sec .step:focus-visible{outline:1px solid var(--lime);outline-offset:-3px}
.dark-sec .proc.touched .step:not(:hover):not(.on){opacity:.42}
.dark-sec .skey{
  display:flex;align-items:center;gap:10px;padding-top:5px;color:var(--lime);
  font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;
}
.dark-sec .sbar{flex:1;height:1px;background:var(--dk-line);position:relative;max-width:56px}
.dark-sec .sbar i{position:absolute;inset:0 100% 0 0;background:var(--lime);transition:right .45s ease}
.dark-sec .step:hover .sbar i,.dark-sec .step.on .sbar i{right:0}
.dark-sec .stext{display:block;font-size:17px;line-height:1.55;color:#c9cbbc;max-width:62ch}
.dark-sec .sartifacts{
  display:block;max-height:0;overflow:hidden;opacity:0;
  font:13px/1.9 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dk-mute);
  transition:max-height .34s ease,opacity .28s ease,margin .34s ease;
}
.dark-sec .step:hover .sartifacts,.dark-sec .step.on .sartifacts{max-height:80px;opacity:1;margin:14px 0 0}
.dark-sec .sartifacts em{color:var(--lime);font-style:normal;padding-right:9px}

/* ---- footer note ---- */
.dark-sec .endnote{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:clamp(48px,6vw,84px);padding-top:26px;border-top:1px solid var(--dk-line);
  color:var(--dk-mute);font:13px/1.8 var(--mono);letter-spacing:.1em;text-transform:uppercase;
}
.dark-sec .endnote a{color:var(--lime);text-decoration:none;border-bottom:1px solid transparent}
.dark-sec .endnote a:hover{border-bottom-color:var(--lime)}

@media (max-width:1000px){
  .dark-sec .proc-split{grid-template-columns:1fr;gap:32px}
  .dark-sec .step{grid-template-columns:1fr;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .dark-sec *{animation:none!important;transition:none!important}
}