/* ==========================================================================
   p-labs.css — /labs (2026-09-04). The short, lab-facing front door for
   eval, post-training and RL data teams; /correctness-labels stays the full
   due-diligence page. Loaded in the p-labels.css slot (after hdr-event.css,
   before theme-verified/s35-craft/s35-a11y), but it does NOT depend on
   p-labels.css: every class here carries its own lx- prefix so the two pages
   can be edited independently. The one exception is .lb-fold, the name the
   tracking brief fixes for the two disclosure blocks.

   Token-only colour. Green (--pass) appears on this page only for a
   verified state: the record card's "pin green on the packaged tree" chip
   and its SUCCESS field. Amber (--fail on terminal) marks authored high
   severity. Nothing else is coloured.

   2026-09-04, environment package pass: a second .lx-asset line in the hero,
   the card's hairlines rebuilt as a 1px gap (a wide BASE REVISION row joins
   the stack), the .lx-ans answer line under each control, the .lx-card-k
   kicker over each of the two download cards, and a third .lb-fold. No new
   colour.
   ========================================================================== */

/* ---------- hero ---------- */
.lx-hero .hero-copy h1{max-width:22ch;}
html[data-theme="terminal"] .lx-hero .hero-copy h1{max-width:24ch;}

/* the four-column strip under the hero: INPUT / OUTPUT / USE / PILOT */
.lx-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:var(--radius);
  margin:clamp(1.9rem,3.2vw,2.6rem) 0 0;padding:0;max-width:none;overflow:hidden;
}
.lx-strip > div{background:var(--card);padding:.95rem 1.1rem 1.05rem;min-width:0;}
.lx-strip dt{
  margin:0 0 .45rem;font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.lx-strip dd{
  margin:0;font-family:var(--mono);font-size:.86rem;line-height:1.5;
  color:var(--ink);letter-spacing:.01em;overflow-wrap:anywhere;
}
.lx-hero .lx-asset{
  margin:1.1rem 0 0;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;
  color:var(--muted);max-width:none;
}
.lx-asset b{color:var(--ink);font-weight:500;}
.lx-asset a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair-strong);}
.lx-asset a:hover{color:var(--signal);text-decoration-color:var(--signal);}
/* the second asset line (the environment package) sits close under the first */
.lx-hero .lx-asset + .lx-asset{margin-top:.35rem;}
@media (max-width:760px){
  .lx-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- 01 · input → output ---------- */
/* three plates joined by two hairline arrows; the arrows turn downward when
   the plates stack */
.lx-flow{
  display:grid;grid-template-columns:minmax(0,1fr) 2.2rem minmax(0,1fr) 2.2rem minmax(0,1fr);
  gap:0 .6rem;align-items:stretch;margin:2.2rem 0 0;
}
.lx-flow-col{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  padding:1.2rem 1.25rem 1.3rem;min-width:0;
}
.lx-flow-col h3{
  margin:0 0 .9rem;font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.lx-flow-col ul{margin:0;padding:0;list-style:none;}
.lx-flow-col li{
  padding:.55rem 0;border-top:1px solid var(--hair);
  font-family:var(--prose);font-size:.96rem;line-height:1.5;color:var(--ink-60);
}
.lx-flow-col li b{color:var(--ink);font-weight:600;}
.lx-flow-arrow{display:flex;align-items:center;justify-content:center;min-width:0;}
.lx-flow-arrow svg{display:block;width:22px;height:22px;overflow:visible;}
.lx-flow-arrow path{fill:none;stroke:var(--hair-strong);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.lx-flow-cap{
  margin:.85rem 0 0;font-family:var(--mono);font-size:.7rem;line-height:1.7;
  color:var(--muted);max-width:74ch;
}
.lx-flow-cap .t{color:var(--ink);font-weight:600;}
@media (max-width:860px){
  .lx-flow{grid-template-columns:minmax(0,1fr);gap:.3rem 0;}
  .lx-flow-arrow{padding:.35rem 0;}
  .lx-flow-arrow svg{transform:rotate(90deg);}
}

/* ---------- 02 · the record card ----------
   Modelled on the homepage's .cl-rec (s35-changes.css) so the task unit
   reads as the same object a Proof user sees: identity row, kind strip,
   field stack. Two columns on desktop, one on phones. */
.lx-rec{
  display:flex;flex-direction:column;min-width:0;margin:2.2rem 0 0;
  background:var(--card);border:1px solid var(--hair-strong);border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.04),0 18px 44px -28px rgba(var(--ink-rgb),.11);
  overflow:hidden;
}
.lx-h{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  padding:.8rem 1.25rem;background:var(--paper);border-bottom:1px solid var(--hair);
}
.lx-id{
  margin:0;font-family:var(--mono);font-size:.86rem;font-weight:600;letter-spacing:.04em;
  color:var(--ink);overflow-wrap:anywhere;
}
.lx-id a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair-strong);}
.lx-id a:hover{color:var(--signal);border-bottom-color:var(--signal);}
/* the state chip: --pass because the pin is a verified state on the packaged
   tree, and nothing else in the header is coloured */
.lx-state{
  display:inline-flex;align-items:center;gap:.45em;flex:0 1 auto;max-width:100%;
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  line-height:1.4;text-transform:uppercase;padding:.24rem .55rem;border-radius:2px;
  color:var(--pass);border:1px solid var(--pass);
}
@media (max-width:640px){
  /* the chip wraps on a phone instead of running out of the card */
  .lx-state{white-space:normal;letter-spacing:.09em;}
}
.lx-state svg{display:block;width:11px;height:11px;flex:0 0 auto;}
.lx-state svg path{fill:none;stroke:var(--pass);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
.lx-kind{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem 1rem;margin:0;max-width:none;
  padding:.6rem 1.25rem;border-bottom:1px solid var(--hair);
}
.lx-klab{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.lx-kval{font-family:var(--mono);font-size:.82rem;color:var(--ink);overflow-wrap:anywhere;}
/* 2026-09-04 · hairlines as a 1px gap over the --hair ground, so every row
   divides the same way whatever the mix of wide and half-width fields. The
   earlier nth-child(odd) border counted the wide TASK row and lost the
   divider on the rows under it; a wide BASE REVISION row now joins the
   stack, so the count could not be trusted at all. */
.lx-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair);}
.lx-f{padding:.85rem 1.25rem .95rem;min-width:0;background:var(--card);}
.lx-f.is-wide{grid-column:1 / -1;}
.lx-lab{
  display:flex;align-items:center;gap:.55em;margin:0 0 .45rem;max-width:none;
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--unknown,var(--muted));
}
.lx-lab::before{content:"";flex:0 0 auto;width:6px;height:6px;background:var(--hair-strong);}
.lx-f.is-ok .lx-lab{color:var(--pass);}
.lx-f.is-ok .lx-lab::before{background:var(--pass);}
.lx-f.is-bad .lx-lab{color:var(--fail);}
.lx-f.is-bad .lx-lab::before{background:var(--fail);}
.lx-val{
  margin:0;max-width:none;font-family:var(--mono);font-size:.84rem;line-height:1.55;
  color:var(--ink);overflow-wrap:anywhere;
}
.lx-val + .lx-val{margin-top:.3rem;}
.lx-sep{font-style:normal;color:var(--unknown,var(--muted));padding:0 .1em;}
.lx-path{border-bottom:1px solid var(--hair);padding-bottom:.05em;}
.lx-say{
  margin:0;max-width:40ch;
  font-family:var(--prose);font-weight:500;letter-spacing:-.018em;
  font-size:1.08rem;line-height:1.36;color:var(--ink);text-wrap:pretty;
}
.lx-gloss{
  margin:.35rem 0 0;max-width:52ch;
  font-family:var(--mono);font-size:.75rem;line-height:1.5;letter-spacing:.01em;
  color:var(--muted);
}
/* the wide BASE REVISION row's gloss may run the row's width; it carries a
   54-character test name, so it may break inside a word on a phone */
.lx-gloss-w{max-width:88ch;overflow-wrap:anywhere;}
/* the verifier command, as one code line that scrolls rather than wraps */
.lx-cmd{
  display:block;margin:0;padding:.55rem .75rem;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);
  font-family:var(--mono);font-size:.78rem;line-height:1.6;color:var(--ink);
  white-space:pre;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.lx-rec-foot{
  margin:0;padding:.85rem 1.25rem .95rem;border-top:1px solid var(--hair);
  font-family:var(--prose);font-size:.96rem;line-height:1.55;color:var(--ink-60);max-width:none;
}
.lx-rec-foot b{color:var(--ink);font-weight:600;}
.lx-cap{
  margin:.85rem 0 0;font-family:var(--mono);font-size:.7rem;line-height:1.7;
  color:var(--muted);max-width:78ch;
}
.lx-cap .t{color:var(--ink);font-weight:600;}
.lx-cap a{color:var(--ink);}
.lx-cap a:hover{color:var(--signal);}
@media (max-width:760px){
  .lx-fields{grid-template-columns:minmax(0,1fr);}
  .lx-say{max-width:none;}
}

/* ---------- the three disclosures ----------
   .lb-fold is the name the tracking brief fixes: opening the first one fires
   schema_open, the second verify_instructions_open, the third (the
   environment package's "Run one task", 2026-09-04) env_instructions_open
   (script at page end). */
.lb-fold{
  margin:2.2rem 0 0;background:var(--card);
  border:1px solid var(--hair);border-radius:var(--radius);
}
.lb-fold summary{
  display:flex;align-items:center;gap:.8rem;cursor:pointer;list-style:none;
  padding:.95rem 1.25rem;
  font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);
}
.lb-fold summary::-webkit-details-marker{display:none;}
.lb-fold summary::before{
  content:"+";flex:0 0 auto;width:1.2em;text-align:center;
  font-weight:500;color:var(--muted);
}
.lb-fold[open] summary::before{content:"\2212";}
.lb-fold[open] summary{border-bottom:1px solid var(--hair);}
.lb-fold summary:hover{color:var(--signal);}
.lb-fold summary:focus-visible{outline:2px solid var(--signal);outline-offset:-2px;}
.lb-fold-hint{
  margin-left:auto;font-weight:400;letter-spacing:.04em;text-transform:none;
  color:var(--muted);font-size:.75rem;
}
.lb-fold-body{padding:1.1rem 1.25rem 1.3rem;}
.lb-fold-body > :first-child{margin-top:0;}
@media (max-width:640px){
  /* on a phone the hint drops under the summary label instead of beside it */
  .lb-fold summary{flex-wrap:wrap;gap:.25rem .8rem;}
  .lb-fold-hint{margin-left:0;flex-basis:100%;padding-left:2em;}
}

/* ---------- code plates (schema tree, rerun path) ---------- */
.lx-code{margin:1.2rem 0 0;}
.lx-code-hd{
  display:block;padding:.55rem .95rem;
  background:var(--paper);border:1px solid var(--hair);border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;color:var(--muted);
  overflow-x:auto;white-space:nowrap;
}
.lx-code-hd b{color:var(--ink);font-weight:500;}
.lx-code pre{
  margin:0;padding:1.1rem 1.25rem 1.2rem;overflow-x:auto;
  background:var(--paper);border:1px solid var(--hair);
  border-radius:0 0 var(--radius) var(--radius);
  font-family:var(--mono);font-size:.78rem;line-height:1.75;color:var(--ink);
  white-space:pre;-webkit-overflow-scrolling:touch;
}
.lx-code .k{color:var(--muted);}
.lx-code-cap{
  margin:.6rem 0 0;font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;
  line-height:1.6;color:var(--muted);max-width:74ch;
}
.lx-code-cap a{color:var(--ink);}
.lx-code-cap a:hover{color:var(--signal);}
.lx-code-cap b{color:var(--ink);font-weight:500;}
@media (max-width:640px){
  .lx-code pre{font-size:.72rem;padding:.95rem .9rem 1rem;}
}

/* ---------- 04 · quality controls ---------- */
.lx-checks{
  margin:2.1rem 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.4rem;
}
.lx-checks li{
  display:flex;flex-direction:column;gap:.3rem;
  padding:.75rem 0;border-top:1px solid var(--hair);
  font-family:var(--prose);font-size:.98rem;line-height:1.5;color:var(--ink-60);
}
.lx-checks li:nth-last-child(-n+2){border-bottom:1px solid var(--hair);}
.lx-checks b{color:var(--ink);font-weight:600;}
/* the answered/not-yet tag: muted mono, no colour, because the tag states
   coverage, not verification */
.lx-tag{
  align-self:flex-start;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
  border:1px solid var(--hair-strong);border-radius:2px;padding:.16rem .45rem;
}
.lx-tag.is-now{color:var(--ink);}
/* the answer under each control (2026-09-04): what the environment package
   declares, in the package's own words; mono and muted, like a gloss */
.lx-checks .lx-ans{
  font-family:var(--mono);font-size:.75rem;line-height:1.5;letter-spacing:.01em;
  color:var(--muted);max-width:56ch;
}
.lx-report{
  display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin:1.4rem 0 0;padding:0;list-style:none;
}
.lx-report li{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;color:var(--ink);
  border:1px solid var(--hair);border-radius:var(--radius);background:var(--card);
  padding:.42rem .7rem;
}
@media (max-width:760px){
  .lx-checks{grid-template-columns:minmax(0,1fr);}
  .lx-checks li:nth-last-child(2){border-bottom:0;}
}

/* ---------- 05 · the public downloads ---------- */
/* a kicker names each of the two cards (2026-09-04); the card then sits
   close under it instead of a section's distance away */
.lx-card-k{margin:2.2rem 0 0;}
.lx-card-k + .lx-card{margin-top:.8rem;}
.lx-card{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:var(--radius);
  overflow:hidden;margin:2.2rem 0 0;
}
.lx-card > div{background:var(--card);padding:1.5rem 1.4rem 1.6rem;min-width:0;}
.lx-counts{margin:0;padding:0;list-style:none;}
.lx-counts li{
  padding:.55rem 0;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.8rem;line-height:1.55;color:var(--muted);letter-spacing:.02em;
}
.lx-counts li:first-child{border-top:0;padding-top:0;}
.lx-counts b{color:var(--ink);font-weight:500;}
.lx-meta{display:flex;flex-direction:column;gap:.9rem;}
.lx-meta .btn{align-self:flex-start;}
.lx-meta-l{margin:0;font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;color:var(--muted);line-height:1.7;}
.lx-meta-l b{color:var(--ink);font-weight:500;}
.lx-sha{
  margin:0;font-family:var(--mono);font-size:.75rem;line-height:1.6;
  letter-spacing:.02em;color:var(--muted);word-break:break-all;
}
.lx-sha a{color:var(--ink);}
.lx-sha a:hover{color:var(--signal);}
/* the required scope note, set apart as a plate so it cannot be missed */
.lx-scope{
  margin:1.6rem 0 0;padding:1.05rem 1.25rem 1.1rem;
  border:1px solid var(--hair-strong);border-radius:var(--radius);
  font-family:var(--prose);font-size:1rem;line-height:1.6;color:var(--ink);max-width:none;
}
.lx-scope b{font-weight:600;}
@media (max-width:900px){
  .lx-card{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:640px){
  /* "Download the environment package" is wider than a phone column, and
     .btn is white-space:nowrap by design (site.css); inside these cards the
     button owns the column, so it may wrap here only (same ruling as the
     labels page's submit button in p-labels.css) */
  .lx-meta .btn{white-space:normal;text-align:center;line-height:1.3;padding-top:.7rem;padding-bottom:.7rem;}
}

/* ---------- 06 · the pilot ---------- */
.lx-pilot{margin:2.2rem 0 0;}
.lx-pilot > div{
  display:grid;grid-template-columns:10rem minmax(0,1fr);gap:1.1rem;
  padding:.85rem 0;border-top:1px solid var(--hair);
}
.lx-pilot > div:last-child{border-bottom:1px solid var(--hair);}
.lx-pilot dt{
  margin:0;font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding-top:.15rem;
}
.lx-pilot dd{
  margin:0;font-family:var(--prose);font-size:.98rem;line-height:1.55;color:var(--ink-60);
  max-width:62ch;
}
.lx-pilot dd b{color:var(--ink);font-weight:600;}
.lx-pilot dd ul{margin:.2rem 0 0;padding:0;list-style:none;}
.lx-pilot dd li{padding:.2rem 0;}
.lx-pilot dd li::before{content:"\00B7";color:var(--muted);margin-right:.55em;}
.lx-ask{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;
  margin:2.4rem 0 0;align-items:start;
}
.lx-ask .lead-form{max-width:none;}
.lx-ask-copy p{font-family:var(--prose);font-size:1.02rem;line-height:1.6;color:var(--ink-60);max-width:52ch;}
.lx-ask-copy p b{color:var(--ink);}
.lx-ask-copy .fine{margin-top:1.3rem;}
@media (max-width:900px){
  .lx-ask{grid-template-columns:minmax(0,1fr);gap:2rem;}
}
@media (max-width:640px){
  .lx-pilot > div{grid-template-columns:minmax(0,1fr);gap:.3rem;}
}

/* ---------- shared small print ---------- */
.lx-note{
  margin:1.8rem 0 0;font-family:var(--prose);font-size:.96rem;line-height:1.6;
  color:var(--ink-60);max-width:66ch;
}
.lx-note b{color:var(--ink);}
.lx-note a{color:var(--ink);}
.lx-note a:hover{color:var(--signal);}
.lx-links{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;margin:1.6rem 0 0;}
