/* ==========================================================================
   MIX — VERSION B. THE BENCH.
   Loaded on mix-b.html only. Brief: docs/SURFACES-VERSION-B-ART-DIRECTION.md

   The one idea this sheet exists to carry: a seam that closes where one record
   legislates alone and OPENS where two do. Everything else is furniture.
   ========================================================================== */

.vb {
  font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3);
  margin: 0 0 var(--s5); padding-block-end: var(--s3);
  border-bottom: 1px solid var(--rule);
}

/* ------------------------------------------------------------- the bench -- */

/* The bench is the ONLY thing on the page, so it starts as soon as the title
   is clear of it. */
.bench { margin-block: var(--s4) var(--s7); }
.plain .leaf:first-of-type { padding-block: var(--s4) 0; }

/* The ingredients and the way to add one are one control, so they sit
   together. Pushed to opposite ends of a wide row they read as two. */
.bench__bar {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--s4) var(--s5);
  padding-block-end: var(--s4);
  border-bottom: 1px solid var(--ink);
}
.bench__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.bench__add { flex: 0 1 20rem; margin-inline-start: auto; }
/* Copy link sits with the chips it copies: the address IS the mix. */
.bench__share { margin: 0; align-self: center; }
.bench__share button {
  min-height: 2.25rem; padding: 0 var(--s3); cursor: pointer;
  font: var(--t-xs)/1 var(--mono); color: var(--ink-2);
  background: none; border: 1px solid var(--rule-firm);
}
.bench__share button:hover { color: var(--ink); border-color: var(--ink-2); }
.bench__share button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bench__lbl { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.bench__count { margin: var(--s2) 0 0; font: var(--t-xs)/var(--lh-meta) var(--mono); }
.bench__nojs { margin: var(--s4) 0 0; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }

/* A chip is the record, not a tag: it carries the record's own ground and
   type so the ingredient list is already a row of small worlds. */
.mix-chip { display: flex; align-items: stretch; border: 1px solid var(--rule-firm); }
.mix-chip .spec { padding: var(--s2) var(--s3); display: flex; align-items: center; }
.mix-chip .spec__name { font-size: var(--t-sm); }
.mix-chip button {
  border: 0; border-left: 1px solid var(--rule-firm); background: var(--paper);
  color: var(--ink-2); font: var(--t-sm)/1 var(--ui); cursor: pointer;
  min-width: 2rem; min-height: 2rem;
}
.mix-chip button:hover { background: var(--ink); color: var(--paper); }
.mix-chip--empty { padding: var(--s2) var(--s3); font: var(--t-xs)/2rem var(--mono); color: var(--ink-3); border-style: dashed; }

/* THE PICKER DOES NOT OWN THE PAGE. Open by default it filled the first
   screen with forty buttons before the reader had seen a single world. It
   opens on focus or on a query, and closes again. */
.bench__options[hidden] { display: none; }
.bench__options {
  list-style: none; margin: var(--s4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--s2);
  max-height: 22rem; overflow-y: auto;
}
.bench__options .mix-opt__group {
  grid-column: 1 / -1; font: var(--t-xs)/1 var(--mono); color: var(--ink-3);
  padding-block: var(--s3) var(--s1); border-bottom: 1px solid var(--rule);
}
.bench__options button {
  width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--rule); background: var(--paper); padding: 0;
  display: grid; min-height: 2.75rem;
}
.bench__options button:hover { border-color: var(--ink); }
.bench__options .spec { padding: var(--s2) var(--s3); }
.bench__options .spec__name { font-size: var(--t-sm); }
.mix-opt__state { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); padding: 0 var(--s3) var(--s2); }

/* ------------------------------------------------------------- the stage -- */

.stg { margin-block-start: var(--s6); }
.stg__count {
  margin: 0 0 var(--s4);
  font: var(--t-sm)/var(--lh-meta) var(--mono); color: var(--ink-2);
}
.stg__count b { font-family: var(--ui); font-size: var(--t-md); font-weight: 700; color: var(--ink); }

.stg__key {
  display: flex; align-items: center; gap: var(--s3);
  margin: 0 0 var(--s4); font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3);
}
.stg__key i {
  width: var(--s5); height: 1.1rem; flex: none;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 34%, transparent) 0 1px, transparent 1px 5px);
}

.stg__table { border-top: 1px solid var(--ink); }

.stg__row {
  display: grid;
  grid-template-columns: 11rem repeat(var(--n), minmax(0, 1fr));
  /* THE SEAM. This gap is the whole design. It is paper, not a border: where a
     row is contested the reader is looking THROUGH the page between two rules
     that cannot both hold. */
  column-gap: var(--s5);
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.stg__area {
  margin: 0; padding: var(--s4) var(--s4) var(--s4) 0;
  display: flex; flex-direction: column; gap: var(--s2);
  font: var(--t-sm)/var(--lh-tight) var(--ui);
}
.stg__flag { font: var(--t-xs)/var(--lh-meta) var(--mono); font-weight: 400; color: var(--ink-3); }
.stg__flag--carry { color: var(--ink-3); }
.stg__flag--stop { color: var(--ink); }

.stg__cell { padding: var(--s4); min-width: 0; }
.stg__cell--quiet { padding: var(--s4) 0; }
.stg__rule { margin: 0; font-size: var(--t-sm); line-height: 1.45; }
.stg__rule + .stg__basis { margin-block-end: var(--s3); }
.stg__basis { margin: var(--s2) 0 0; font: var(--t-xs)/var(--lh-meta) var(--mono); opacity: 0.82; }
/* F11: which Aesthetic a cell belongs to, shown only once the columns stack. */
.stg__who { display: none; margin: 0 0 var(--s2); font: 600 var(--t-xs)/var(--lh-meta) var(--mono); opacity: 0.82; }

/* --- the head row: each column is the world itself ----------------------- */

.stg__row--head { border-bottom: 1px solid var(--ink); align-items: end; }
.stg__row--head .stg__area span { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.stg__cell--head { padding: var(--s4) 0; }
.stg__world {
  display: grid; gap: var(--s2); align-content: end;
  min-height: 7.5rem; text-decoration: none;
  border: 1px solid var(--rule-firm);
}
.stg__world[data-house] { background: var(--paper-deep); padding: var(--s4); }
.stg__wname { font-size: var(--t-md); font-weight: 700; line-height: 1.1; }
.stg__wmeta { font: var(--t-xs)/1 var(--mono); opacity: 0.66; }

/* --- carried: the rule runs on ------------------------------------------ */

/* A hairline crosses the empty cells of a carried row, from the rule that
   holds to the edge of the bench. Nothing contradicts it, so nothing stops it. */
.stg__cell--quiet[data-carry] { position: relative; }
.stg__cell--quiet[data-carry]::before {
  content: ""; position: absolute; inset-inline: calc(var(--s5) * -1) 0; top: 50%;
  border-top: 1px solid var(--rule-firm);
}

/* --- contested: the seam opens ------------------------------------------ */

.stg__row[data-state="contested"] { background: var(--paper-deep); }
.stg__row[data-state="contested"] .stg__area { font-weight: 600; }
.stg__row[data-state="contested"] .stg__flag { color: var(--ink); }

/* THE SEAM.
   Drawn in the gutter itself, by the cell to its right, so it works for any
   number of ingredients. It is hatched rather than filled: a filled bar is a
   divider, and a divider is a decision. This is the absence of one. */
.stg__cell { position: relative; }
.stg__row[data-state="contested"] .stg__cell + .stg__cell::before {
  content: ""; position: absolute; inset-block: 0;
  left: calc(var(--s5) * -1); width: var(--s5);
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--ink) 34%, transparent) 0 1px, transparent 1px 5px);
}
/* Hard edges on both sides of the joint, so the two rules read as held apart
   rather than as two columns of a table. */
.stg__row[data-state="contested"] .stg__cell.spec {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-ink, var(--ink)) 30%, transparent);
}

/* --- refused ------------------------------------------------------------- */

.stg__row--refuse { border-bottom: 1px solid var(--ink); }
.stg__cell--struck { padding: var(--s4); }
/* Only the AREA is struck. The reason beside it is a statement, not a thing
   ruled out, and running the line through both said the reason was cancelled. */
.stg__strike { margin: 0 0 var(--s2); font-size: var(--t-sm); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }
.stg__strike s { text-decoration: line-through; text-decoration-thickness: 1px; }
.stg__strike span { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }

/* --- the honest empties -------------------------------------------------- */

.stg__void, .stg__silent {
  margin: var(--s5) 0 0; padding: var(--s5);
  border: 1px dashed var(--rule-firm);
  font-size: var(--t-sm); color: var(--ink-2); max-width: var(--measure);
}
.stg__silent b { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------------- responsive -- */

@media (max-width: 60rem) {
  .stg__row { grid-template-columns: 1fr; column-gap: 0; row-gap: 0; padding-block-end: var(--s4); }
  .stg__area { padding: var(--s4) 0 var(--s2); flex-direction: row; justify-content: space-between; align-items: baseline; }
  .stg__cell { padding: var(--s3) 0; }
  /* THE SEAM SURVIVES THE STACK. Side by side the joint is a vertical gutter;
     stacked it has to become a horizontal one, or the hatch ends up as a
     stripe down the left margin marking nothing. Same hatch, rotated 90°. */
  .stg__row[data-state="contested"] .stg__cell.spec + .stg__cell.spec { margin-block-start: var(--s5); }
  .stg__row[data-state="contested"] .stg__cell + .stg__cell::before {
    left: 0; right: 0; width: auto;
    top: calc(var(--s5) * -1); bottom: auto; height: var(--s5);
  }
  .stg__cell--quiet { display: none; }
  .stg__cell--quiet[data-carry] { display: block; padding: 0; min-height: var(--s4); }
  .stg__cell--quiet[data-carry]::before { inset-inline: 0; }
  .stg__row--head { align-items: stretch; }
  .stg__cell--head { padding-block: var(--s2); }
  .stg__world { min-height: 5rem; }
  .stg__who { display: block; }
}

/* ---- SHOW, THEN TELL (founder, 2026-09-26) --------------------------------
   Each ingredient's own page live, then its faces and palette, then the
   rules. Columns line up with the bench below: the area label column, then
   one column per ingredient. */
.show { margin-block: var(--s5) var(--s6); }
.show__row { display: grid; grid-template-columns: 9rem repeat(var(--n), minmax(0, 1fr)); gap: var(--s3); padding-block: var(--s3); border-top: 1px solid var(--rule-firm); align-items: start; }
.show__row--look { border-top: 0; grid-template-columns: 9rem repeat(var(--n), minmax(0, 1fr)); }
.show__row--look::before { content: ""; }
.show__lbl { margin: 0; font: 600 var(--t-xs)/1.3 var(--ui); color: var(--ink-2); }
.show__glass { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); border: 1px solid var(--rule-firm); }
/* Fill the frame, as every other surface that shows a preview does (ia.css):
   pv.css caps a bare .pv at 13rem, which left Mix's previews in a corner. */
.show__glass .pv { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-width: none; border: 0; }
.show__plate { position: absolute; inset: 0; display: grid; place-items: center; font: 600 var(--t-md)/1.2 var(--display); color: var(--ink-3); }
.show__name { margin: var(--s2) 0 var(--s1); font: 600 var(--t-md)/1.2 var(--display); }
.show__name a { color: var(--ink); text-decoration: none; }
.show__name a:hover { color: var(--brand); }
.show__argues { margin: 0; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.show__face { margin: 0 0 var(--s2); }
.show__face span { display: block; font-size: 1.9rem; line-height: 1.1; color: var(--ink); }
.show__face i { font: var(--t-xs)/1.3 var(--mono); font-style: normal; color: var(--ink-3); }
.show__sw { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.show__sw i { width: 2.25rem; height: 2.25rem; border: 1px solid var(--rule-firm); }
.show__none { margin: 0; font: var(--t-xs)/1.3 var(--ui); color: var(--ink-3); }
.show__note { margin: var(--s3) 0 0; font: var(--t-xs)/1.4 var(--ui); color: var(--ink-3); }
.bench__all { margin: 0 0 var(--s2); }
.bench__all button { padding: var(--s2) var(--s3); background: transparent; color: var(--ink); border: 1px solid var(--rule-firm); font: 500 var(--t-sm)/1 var(--ui); cursor: pointer; }
.bench__all button[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); }
/* Rule text where the seam opens; a count everywhere else, until asked. */
.stg__cnt { margin: 0; font: var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
/* Collapsed rows show the first rule in full and "+N more" (founder,
   2026-09-26: a bare count said nothing about the area). */
.stg__cnt { order: 9; margin-top: var(--s1); }
.mix-js:not(.mix-all) .stg__row:not([data-state="contested"]) .stg__rule ~ .stg__rule,
.mix-js:not(.mix-all) .stg__row:not([data-state="contested"]) .stg__basis { display: none; }
.mix-js .stg__row[data-state="contested"] .stg__cnt, .mix-all .stg__cnt, .stg__cnt:only-child { display: none; }
html:not(.mix-js) .stg__cnt { display: none; }
@media (max-width: 48rem) {
  .show__row, .show__row--look { grid-template-columns: repeat(var(--n), minmax(12rem, 1fr)); overflow-x: auto; }
  .show__row--look::before, .show__lbl { display: none; }
}