/* ==========================================================================
   exp32 . sections.css
   Owned by the sections builder. Styles exactly three partials:

     partials/engineer.html    page section 5  "What your engineer sees."
     partials/tests.html       page section 6  "We already have tests."
     partials/enterprise.html  page section 8  "What enters your environment."

   Contract with the shell:
     - colour comes ONLY from site.css tokens, so all 7 themes follow
       (--paper --card --ink --ink-rgb --ink-60 --muted --hair --hair-strong
        --signal --signal-rgb --fail --pass --wash --radius --sans --mono
        --prose --maxw).
     - typography obeys the exp32 two-layer rule (site.css section 20):
       var(--prose) for every sentence a visitor reads,
       var(--mono) for IDs, labels, code, status and metadata.
     - motion reuses the shell's arrival system: site.js adds .in to .fig and
       to [data-reveal]; strokes are pathLength="1" + .dr, text is .fx.
       No script of its own.
   Every class here is prefixed .sx- so it can never collide with site.css.
   ========================================================================== */

/* ---------- shared: one lead line above an artifact ---------- */
.sx-say{
  font-family:var(--prose);font-size:clamp(1.06rem,1.4vw,1.2rem);line-height:1.6;
  color:var(--ink);max-width:64ch;margin:0 0 2rem;
}
.sx-note{
  font-family:var(--prose);font-size:1.05rem;line-height:1.6;color:var(--ink-60);
  max-width:60ch;margin:0 0 1.1rem;
}
/* a small mono label that titles a single artifact */
.sx-tag{
  display:flex;align-items:center;gap:.55em;margin:0 0 .9rem;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.sx-tag::before{content:"";flex:0 0 auto;width:7px;height:7px;background:var(--hair-strong);}
.sx-tag.is-bad::before{background:var(--fail);}

/* desktop / phone figure variants (same pattern index.html uses) */
.sx svg.sx-mob{display:none;}

/* ==========================================================================
   SECTION 5 . "What your engineer sees."
   ========================================================================== */

/* two product surfaces side by side: the approval, and the gate refusing */
.sx-surfaces{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:1.6rem 2rem;align-items:start;margin-bottom:3.2rem;
}

/* ---------- window chrome, shared by the panel and the transcript ---------- */
.sx-win{
  background:var(--card);border:1px solid var(--hair-strong);border-radius:var(--radius);
  overflow:hidden;min-width:0;margin:0;
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.04),0 14px 34px -22px rgba(var(--ink-rgb),.34);
}
.sx-chrome{
  display:flex;align-items:center;gap:.7rem;min-height:34px;
  padding:0 .7rem;border-bottom:1px solid var(--hair);background:var(--paper);
}
.sx-dots{display:inline-flex;gap:5px;flex:0 0 auto;}
.sx-dots i{width:8px;height:8px;border-radius:50%;background:rgba(var(--ink-rgb),.2);}
.sx-dots i:first-child{background:rgba(var(--ink-rgb),.32);}
.sx-win-t{
  font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.04em;
  color:var(--ink);flex:0 0 auto;
}
.sx-win-p{
  font-family:var(--mono);font-size:.7rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.sx-win-p::before{content:"/ ";opacity:.5;}

/* ---------- the mocked approval panel ---------- */
.sx-body{padding:1.05rem 1.1rem 1.15rem;}
.sx-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:.85rem;
}
.sx-count{
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--signal);
}
.sx-of{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted);}
.sx-found{
  font-family:var(--prose);font-size:1.02rem;line-height:1.5;color:var(--ink);
  margin:0 0 1rem;max-width:none;
}
.sx-found b{font-weight:600;}

.sx-card{
  border:1px solid var(--hair);border-radius:var(--radius);background:var(--paper);
  padding:.9rem .95rem 1rem;min-width:0;
}
.sx-card-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem;}
.sx-id{
  font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.03em;color:var(--ink);
}
.sx-chip{
  font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--signal);
  border:1px solid rgba(var(--signal-rgb),.45);padding:.15rem .4rem;
  background:rgba(var(--signal-rgb),.07);
}
.sx-promise{
  font-family:var(--prose);font-size:1.06rem;line-height:1.45;font-weight:500;
  letter-spacing:-.008em;color:var(--ink);margin:0 0 .85rem;max-width:38ch;
}
.sx-meta{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:0 0 .6rem;
  max-width:none;
}
.sx-lab{
  font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);flex:0 0 auto;
}
.sx-path{font-family:var(--mono);font-size:.76rem;color:var(--ink);}
.sx-path u{text-decoration:none;border-bottom:1px solid var(--hair-strong);}

/* the diff excerpt */
.sx-code{
  border:1px solid var(--hair);background:var(--card);
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 .95rem;
}
.sx-code pre{
  margin:0;padding:.55rem 0;font-family:var(--mono);font-size:.72rem;line-height:1.75;
  color:var(--ink-60);
}
.sx-code i{
  display:block;padding:0 .8rem;white-space:pre;font-style:normal;
}
.sx-code i b{color:var(--muted);font-weight:400;display:inline-block;
  width:2.6em;text-align:right;margin-right:1.1em;}
.sx-code .sx-add{background:rgba(var(--ink-rgb),.035);color:var(--ink);}
.sx-code .sx-add s{text-decoration:none;color:var(--pass);font-weight:600;}
.sx-code .sx-gap{color:var(--muted);opacity:.7;}

/* the three actions. Not real buttons: this is a picture of a UI. */
.sx-acts{display:flex;flex-wrap:wrap;gap:.5rem;}
.sx-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:0 .8rem;border:1px solid var(--hair-strong);
  border-radius:calc(var(--radius) - 2px);background:var(--card);
  font-family:var(--prose);font-size:.86rem;font-weight:500;line-height:1;
  letter-spacing:-.005em;color:var(--ink);white-space:nowrap;
}
.sx-btn-go{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600;}

/* the state strip under the panel */
.sx-state{
  display:flex;flex-wrap:wrap;gap:.35rem 1.3rem;
  padding:.7rem 1.1rem .75rem;border-top:1px solid var(--hair);background:var(--paper);
}
.sx-ok{
  display:inline-flex;align-items:center;gap:.42em;
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.03em;color:var(--ink);
}
.sx-ok svg{flex:0 0 auto;width:11px;height:11px;display:block;}
.sx-ok svg path{fill:none;stroke:var(--pass);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
.sx-ok em{font-style:normal;color:var(--muted);}

/* ---------- the CI transcript ---------- */
.sx-tx{
  margin:0;padding:1rem 1.1rem 1.15rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
  font-family:var(--mono);font-size:.75rem;line-height:1.85;color:var(--ink-60);
}
.sx-tx code{font-family:inherit;font-size:inherit;}
.sx-tx i{display:block;white-space:pre;font-style:normal;}
.sx-tx .sx-cmd{color:var(--ink);font-weight:500;}
.sx-tx .sx-cmd em{font-style:normal;color:var(--signal);font-weight:600;padding-right:.5em;}
.sx-tx .sx-pass{color:var(--muted);}
.sx-tx .sx-fail{color:var(--fail);font-weight:600;}
.sx-tx .sx-failsub{color:var(--ink);}
.sx-tx .sx-failsub s{text-decoration:none;color:var(--muted);}
.sx-tx .sx-quote{color:var(--ink-60);}
.sx-tx .sx-exit{color:var(--fail);}
.sx-tx .sx-blocked{color:var(--fail);font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.sx-tx .sx-sp{display:block;height:.7em;}

/* caption shared by both surfaces */
.sx-cap{
  margin:0;padding:.6rem .9rem .68rem;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.7rem;line-height:1.6;color:var(--muted);
}
.sx-cap b{color:var(--ink);font-weight:600;}

/* the real screenshot: crop so the findings table is what you land on */
.sx-shot{margin:0;}
.sx-shot img{aspect-ratio:1440/950;object-fit:cover;object-position:50% 0;}

@media (max-width:1020px){
  .sx-surfaces{grid-template-columns:1fr;gap:1.8rem;}
  .sx-promise{max-width:44ch;}
}
@media (max-width:600px){
  .sx-body{padding:.9rem .85rem 1rem;}
  .sx-card{padding:.8rem .8rem .9rem;}
  .sx-state{padding:.65rem .85rem .7rem;gap:.3rem 1rem;}
  .sx-btn{font-size:.82rem;padding:0 .65rem;}
  .sx-win-p{font-size:.64rem;}
  .sx-shot img{aspect-ratio:1440/1100;}
}

/* ==========================================================================
   SECTION 6 . "We already have tests."
   ========================================================================== */
.sx-obj .sx-quote{quotes:none;}
.sx-ofcourse{
  font-family:var(--prose);font-size:clamp(1.06rem,1.4vw,1.2rem);line-height:1.6;
  color:var(--ink);margin:0;
}

/* the one large line on the page. Two clauses: the setup reads quieter,
   the payoff sits at full ink. */
.sx-tension{
  font-family:var(--prose);font-weight:500;letter-spacing:-.022em;
  font-size:clamp(1.55rem,3.3vw,2.5rem);line-height:1.24;
  margin:2.4rem 0 0;max-width:30ch;color:var(--ink-60);
  text-wrap:pretty;
}
.sx-tension .sx-turn{display:block;color:var(--ink);margin-top:.32em;}

/* the inversion figure */
.sx-inv{margin-top:2.9rem;}
.sx-inv .big{font-size:13px;}
.sx-inv .lbl{font-size:9.4px;letter-spacing:.085em;}
.sx-inv .sx-mob .big{font-size:11.6px;}
.sx-inv .sx-mob .lbl{font-size:8.6px;letter-spacing:.06em;}
.sx-inv .fig-scroll svg{min-width:840px;}

/* what a test suite does not give you */
.sx-rows{margin-top:2.6rem;}
.sx-rows .row{grid-template-columns:11rem minmax(0,1fr);}
.sx-rows .row .kicker{align-items:flex-start;white-space:nowrap;}
.sx-rows .row .kicker::before{margin-top:.42em;}
.sx-rows .row p{max-width:56ch;font-family:var(--prose);font-size:1.04rem;line-height:1.6;}

@media (max-width:760px){
  .sx-inv .fig-scroll svg{min-width:0;}
  .sx-inv svg.sx-desk{display:none;}
  .sx-inv svg.sx-mob{display:block;}
  .sx-rows .row{grid-template-columns:1fr;}
}

/* ==========================================================================
   SECTION 8 . "What enters your environment."
   ========================================================================== */
.sx-arch{margin-top:0;max-width:900px;}
.sx-arch .fig-scroll svg{min-width:770px;}
.sx-arch .big{font-size:14px;}
.sx-arch text{font-size:11.5px;}
.sx-arch .lbl{font-size:9.6px;}
/* the one box the whole figure is about */
.sx-arch .pr{
  font-family:var(--mono);font-size:14px;font-weight:600;
  letter-spacing:.2em;fill:var(--signal);
}

@media (max-width:720px){
  .sx-arch .fig-scroll svg{min-width:0;}
  .sx-arch svg.sx-desk{display:none;}
  .sx-arch svg.sx-mob{display:block;}
}

/* the question list: hairline rows, question in prose, answer in one line */
.sx-qa{
  margin:3rem 0 0;padding:0;background:var(--card);
  border:1px solid var(--hair);border-radius:10px;
}
.sx-qa > div{
  display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);
  gap:.4rem 2.4rem;align-items:baseline;
  padding:1.15rem 1.5rem;border-top:1px solid var(--hair);
}
.sx-qa > div:first-child{border-top:0;}
.sx-qa dt{
  margin:0;font-family:var(--prose);font-size:1.02rem;line-height:1.5;
  font-weight:600;letter-spacing:-.01em;color:var(--ink);
}
.sx-qa dd{
  margin:0;font-family:var(--prose);font-size:1.02rem;line-height:1.6;color:var(--ink-60);
  max-width:52ch;
}
.sx-qa dd b{color:var(--ink);font-weight:600;}
.sx-qa dd .sx-mono{font-family:var(--mono);font-size:.9em;color:var(--ink);}
.sx-ask{
  margin:1.2rem 0 0;font-family:var(--prose);font-size:1.02rem;line-height:1.6;
  color:var(--ink-60);max-width:64ch;
}
.sx-ask a{color:var(--ink);}

@media (max-width:860px){
  .sx-qa > div{grid-template-columns:1fr;gap:.5rem;padding:1.1rem 1.2rem;}
  .sx-qa dd{max-width:60ch;}
}

/* ==========================================================================
   THEME POLISH
   Only the two themes that stress these panels hardest. Colour still comes
   from tokens; these rules change geometry and weight, never hue.
   ========================================================================== */

/* ---- brutal: 3px black plates with hard offsets ---- */
html[data-theme="brutal"] .sx-win,
html[data-theme="brutal"] .sx-qa,
html[data-theme="brutal"] .sx-shot.frame{
  border:3px solid #000;border-radius:0;box-shadow:8px 8px 0 #000;
}
html[data-theme="brutal"] .sx-chrome{border-bottom:3px solid #000;background:#E8FF2A;}
html[data-theme="brutal"] .sx-dots i{border:2px solid #000;background:#fff;}
html[data-theme="brutal"] .sx-win-p{color:#000;}
html[data-theme="brutal"] .sx-card,
html[data-theme="brutal"] .sx-code{border:3px solid #000;border-radius:0;}
html[data-theme="brutal"] .sx-chip{border:2px solid #000;color:#000;background:#E8FF2A;}
html[data-theme="brutal"] .sx-btn{
  border:2px solid #000;border-radius:0;box-shadow:3px 3px 0 #000;
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:.78rem;
}
html[data-theme="brutal"] .sx-btn-go{background:#E8FF2A;color:#000;}
html[data-theme="brutal"] .sx-state,
html[data-theme="brutal"] .sx-cap{border-top:3px solid #000;}
html[data-theme="brutal"] .sx-qa > div{border-top:3px solid #000;}
html[data-theme="brutal"] .sx-qa > div:first-child{border-top:0;}
html[data-theme="brutal"] .sx-tension{font-family:"Bricolage Grotesque",var(--sans);font-weight:800;
  text-transform:uppercase;line-height:1.02;letter-spacing:-.02em;}
html[data-theme="brutal"] .sx-tension .sx-turn{color:var(--signal);}
html[data-theme="brutal"] .sx-tag::before{border:2px solid #000;}
html[data-theme="brutal"] .sx-rows .row{border-top:2px solid #000;}
html[data-theme="brutal"] .sx-rows .row:first-child{border-top:0;}
/* the marker swipe reaches p b globally; keep the mock UI clean */
html[data-theme="brutal"] .sx-found b,
html[data-theme="brutal"] .sx-qa dd b,
html[data-theme="brutal"] .sx-cap b{background:none;box-shadow:none;}

/* ---- terminal: square, flat, phosphor line-work; prose stays a real sans ---- */
html[data-theme="terminal"] .sx-win,
html[data-theme="terminal"] .sx-card,
html[data-theme="terminal"] .sx-code,
html[data-theme="terminal"] .sx-btn,
html[data-theme="terminal"] .sx-qa,
html[data-theme="terminal"] .sx-chip{border-radius:0;}
html[data-theme="terminal"] .sx-win{
  border-color:var(--hair-strong);box-shadow:0 0 26px rgba(43,255,111,.1);
}
html[data-theme="terminal"] .sx-chrome{background:#050807;}
html[data-theme="terminal"] .sx-dots i{background:rgba(43,255,111,.35);}
html[data-theme="terminal"] .sx-dots i:first-child{background:var(--signal);}
html[data-theme="terminal"] .sx-win-t{color:var(--signal);text-transform:uppercase;}
html[data-theme="terminal"] .sx-card{background:#050807;box-shadow:inset 0 0 30px rgba(43,255,111,.04);}
html[data-theme="terminal"] .sx-btn{
  background:transparent;border-color:rgba(43,255,111,.4);color:var(--signal);
}
html[data-theme="terminal"] .sx-btn-go{background:rgba(43,255,111,.16);border-color:var(--signal);color:var(--signal);}
html[data-theme="terminal"] .sx-state{background:#050807;}
html[data-theme="terminal"] .sx-qa{box-shadow:inset 0 0 34px rgba(43,255,111,.04);}
html[data-theme="terminal"] .sx-tension{color:var(--ink-60);}
html[data-theme="terminal"] .sx-tension .sx-turn{color:var(--signal);}
html[data-theme="terminal"] .sx-code .sx-add{background:rgba(43,255,111,.09);}
html[data-theme="terminal"] .sx-shot.frame img{filter:grayscale(1) invert(1) sepia(1)
  hue-rotate(70deg) saturate(3.4) brightness(.92) contrast(1.08);}

/* ---- night: the panels need a touch more separation from the ground ---- */
html[data-theme="night"] .sx-win{box-shadow:0 18px 40px -24px rgba(0,0,0,.8);}
html[data-theme="night"] .sx-card{background:#0E0F13;}
html[data-theme="night"] .sx-code{background:#0B0C10;}

/* ---- riso: the display face reaches the one big line ---- */
html[data-theme="riso"] .sx-tension{font-family:"Bricolage Grotesque",var(--sans);font-weight:700;}
html[data-theme="riso"] .sx-tension .sx-turn{color:var(--signal);}
html[data-theme="acid"] .sx-tension .sx-turn{color:var(--signal);}
html[data-theme="olo"] .sx-tension .sx-turn{color:var(--signal-ink,var(--ink));}