/* ============================================================
   Ellm Tree v2 — Cross-kit bespoke widgets
   Lives in v2/ui_kits/kit.css. Loaded on EVERY v2 page after
   theme.css and before any per-kit (app/marketing/docs) sheet.

   Per CLAUDE.md: this is for widgets Bulma doesn't have a
   primitive for. Anything that targets a stock Bulma class
   (.button, .input, .table…) belongs in theme.css, not here.

   Naming: every selector here is `et-` prefixed. Modifiers are
   joined with a single dash (`et-plate-no`, `et-sheet-head`)
   to match the v1 kit's flat convention.
   ============================================================ */

/* ============================================================
   et-sheet — page-level container with masthead + colophon
   Use:
     <main class="et-sheet">
       <header class="et-sheet-head">
         <div class="et-sheet-title">…</div>
         <div class="et-sheet-meta">…</div>
       </header>
       … plates / content …
       <footer class="et-sheet-foot">
         <span>…</span><span class="et-sheet-foot-mid">…</span><span>…</span>
       </footer>
     </main>
   ============================================================ */
.et-sheet {
  max-width: 1180px;
  margin: 48px auto;
  padding: 0 var(--sp-8);
}

/* Masthead — bottom hairline + green underrule. Two columns:
   left = title block, right = metadata block. */
.et-sheet-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: 4rem;
  position: relative;
}
.et-sheet-head::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px; background: var(--green-600);
}

/* Title block — eyebrow caps over a real <h1>/.title.is-1 */
.et-sheet-title h1, .et-sheet-title .title {
  margin: 0 0 6px;
}
.et-sheet-title .et-eyebrow {
  margin-bottom: 8px;
}
.et-sheet-title .et-lead {
  font-family: var(--font-prose);
  color: var(--meta);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  margin: 1.5rem 0 1rem 0;
}

/* Meta block — right-aligned mono caps stack */
.et-sheet-meta {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--meta);
  line-height: 1.7;
}
.et-sheet-meta b {
  color: var(--green-700);
  font-weight: 700;
}

/* Colophon — mirrors masthead (top hairline + green overrule) */
.et-sheet-foot {
  margin-top: 48px;
  padding-top: 14px;
  border-top: 1.5px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--meta);
  position: relative;
}
.et-sheet-foot::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -6px;
  height: 1.5px; background: var(--green-600);
}
.et-sheet-foot-mid {
  color: var(--green-700);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: center;
}
.et-sheet-foot-mid::before {
  content: '';
  width: 9px; height: 9px;
  background: var(--green-600);
  display: inline-block;
}
.et-sheet-foot > :last-child { text-align: right; }

/* ============================================================
   et-wm — stacked pixel wordmark beside the brand mark
   Two short words ("ELLM" / "TREE"), 2-line stacked, mono caps,
   tracked. Default size matches the navbar lockup (12px); pass
   `--wm-size` for larger contexts (e.g. unauth/holding pages).
   Use:
     <span class="et-wm"><span>ELLM</span><span>TREE</span></span>
   ============================================================ */
.et-wm {
  --wm-size: 12px;
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-weight: var(--fw-black);
  font-size: var(--wm-size);
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--ink);
}
.et-wm > span {
  display: block;
  padding: 1px 0;
}
/* Display variant — used on holding/marketing pages and beside
   the 88px tree mark. Lifted off the paper with green-700 ink
   and a 2px ink step shadow so the lockup reads as a stamp.
   The default (small) .et-wm stays plain ink — it lives inside
   tight UI chrome where a colored wordmark would compete. */
.et-wm.is-display {
  --wm-size: 3.3rem;
  letter-spacing: 0.15em;
  color: var(--green-600);
  text-shadow: 2px 2px 0 var(--ink);
}

/* ============================================================
   et-plate — bordered specimen frame with hanging label + number
   Use:
     <section class="et-plate">
       <span class="et-plate-label">Plate · Substrate</span>
       <span class="et-plate-no">No. 01</span>
       <h2 class="title is-3">…</h2>
       <p class="et-plate-sub">…</p>
       … content …
     </section>
   ============================================================ */
.et-plate {
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
  padding: 28px 26px 26px;
  position: relative;
  margin: 5rem 0;
  filter: drop-shadow(0 0 0.75rem rgba(0,0,0, 0.5));
}
.et-plate-label,
.et-plate-no {
  position: absolute;
  top: -9px;
  background: var(--paper);
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: 18px;
}
.et-plate-label { left: 22px;  color: var(--meta); }
.et-plate-no    { right: 22px; color: var(--green-700); font-weight: 700; }

/* Plate subtitle — readable prose, sits under the title */
.et-plate-sub {
  font-family: var(--font-prose);
  color: var(--ink-2);
  font-size: var(--text-md);             /* 17px — readable, not tiny */
  line-height: var(--leading-relaxed);
  margin: 4px 0 22px;
  max-width: 72ch;
}

/* ============================================================
   et-eyebrow — small caps overline above a heading
   Use: <div class="et-eyebrow">Section · Folio 02</div>
   ============================================================ */
.et-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--meta);
  display: inline-block;
}
.et-eyebrow.is-green { color: var(--green-500); font-weight: 700; }
.et-eyebrow.is-ink   { color: var(--ink); font-weight: 700; }

/* ============================================================
   et-swatch — color card primitive
   Use:
     <div class="et-swatch">
       <div class="et-swatch-chip" style="background: var(--paper)"></div>
       <div class="et-swatch-meta">
         <span class="et-swatch-name">Paper</span>
         <span class="et-swatch-hex">#f6f1e3 · --paper</span>
         <span class="et-swatch-role">Page ground</span>
       </div>
     </div>
   ============================================================ */
.et-swatch {
  border: 1px solid var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.et-swatch-chip {
  height: 84px;
  border-bottom: 1px solid var(--ink);
}
.et-swatch-meta {
  padding: 9px 11px 11px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.et-swatch-name {
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ink);
  font-weight: 700;
}
.et-swatch-hex  { color: var(--meta); }
.et-swatch-role { color: var(--green-700); font-weight: 700; margin-top: 3px; }

/* ============================================================
   et-typerow / et-specrow — left-gutter spec row
   A 140px gutter on the left for a label, content on the right.
   Used for type specimens, but generally useful for any
   "label · value" layout with a hairline divider.
   ============================================================ */
.et-specrow {
  border-top: 1px solid var(--ink-glass-12);
  padding: 22px 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: 28px;
  align-items: baseline;
}
.et-specrow:first-child { border-top: 0; padding-top: 0; }
.et-specrow-gut {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--meta);
  line-height: 1.65;
}
.et-specrow-gut b {
  color: var(--ink);
  display: block;
  font-weight: 700;
}

/* ============================================================
   et-demorow — flex row of UI controls with a left label
   Use:
     <div class="et-demorow">
       <span class="et-demorow-label">Buttons</span>
       <button class="button">…</button> …
     </div>
   ============================================================ */
.et-demorow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--ink-glass-12);
}
.et-demorow:first-child { border-top: 0; padding-top: 0; }
.et-demorow-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--meta);
  width: 110px;
  flex-shrink: 0;
}
.et-demorow.is-block {
  display: block;
}
.et-demorow.is-block .et-demorow-label {
  width: auto;
  margin-bottom: 12px;
}

/* ============================================================
   et-grid-N — simple uniform grids inside plates
   Catalog system uses these constantly; cleaner than re-typing
   `style="display: grid; grid-template-columns: repeat(N, 1fr)"`.
   ============================================================ */
.et-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.et-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.et-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.et-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.et-grid-8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0;     }

/* ============================================================
   et-rule — horizontal hairline rule with optional green tick
   ============================================================ */
.et-rule {
  border: 0;
  border-top: 1px solid var(--ink);
  margin: var(--sp-6) 0;
}
.et-rule.is-thick { border-top-width: 1.5px; }
.et-rule.is-green { border-top-color: var(--green-600); }

/* ============================================================
   et-stack-* — vertical rhythm utilities. Use sparingly; prefer
   primitives that bake in their own spacing.
   ============================================================ */
.et-stack-sm { margin-top: 14px; }
.et-stack-md { margin-top: 28px; }
.et-stack-lg { margin-top: 48px; }

/* ============================================================
   et-swatch-chip color modifiers
   So pages don't need style="background: var(--x)" on every chip.
   ============================================================ */
.et-swatch-chip.is-paper   { background: var(--paper);   }
.et-swatch-chip.is-paper-2 { background: var(--paper-2); }
.et-swatch-chip.is-paper-3 { background: var(--paper-3); }
.et-swatch-chip.is-ink     { background: var(--ink);     }
.et-swatch-chip.is-ink-2   { background: var(--ink-2);   }
.et-swatch-chip.is-meta    { background: var(--meta);    }
.et-swatch-chip.is-brand,
.et-swatch-chip.is-green-700 { background: var(--green-700); }
.et-swatch-chip.is-amber   { background: var(--amber-600); }
.et-swatch-chip.is-sky     { background: var(--sky-600);  }

.et-swatch-name.is-brand { color: var(--green-700); }

/* ============================================================
   et-scale — 8-tile color ramp with mono caption legend
   Use:
     <div class="et-scale">
       <div class="et-scale-tiles">
         <div class="et-scale-tile" style="background: var(--green-950);"></div>
         ... 8 tiles ...
       </div>
       <div class="et-scale-legend">
         <span>950</span>... <span class="is-marked">700 ★</span> ...
       </div>
     </div>
   ============================================================ */
.et-scale-tiles {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--ink);
}
.et-scale-tile { height: 70px; }
.et-scale-tile[data-tone="950"] { background: var(--green-950); }
.et-scale-tile[data-tone="900"] { background: var(--green-900); }
.et-scale-tile[data-tone="800"] { background: var(--green-800); }
.et-scale-tile[data-tone="700"] { background: var(--green-700); }
.et-scale-tile[data-tone="600"] { background: var(--green-600); }
.et-scale-tile[data-tone="500"] { background: var(--green-500); }
.et-scale-tile[data-tone="400"] { background: var(--green-400); }
.et-scale-tile[data-tone="200"] { background: var(--green-200); }
.et-scale-legend {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--meta);
}
.et-scale-legend .is-marked {
  color: var(--green-700);
  font-weight: 700;
}

/* ============================================================
   et-fields — 2-col grid for form controls. Inputs sit on
   one row, full-width children (.textarea by default) span
   both columns. Capped width so fields don't sprawl.
   ============================================================ */
.et-fields {
  flex: 1;
  min-width: 0;
  max-width: 640px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
}
.et-fields .textarea,
.et-fields .is-full {
  grid-column: 1 / -1;
}

/* ============================================================
   et-specrow extras — kill stock margins on Bulma titles inside
   spec rows, and provide a UI-body type specimen class.
   ============================================================ */
.et-specrow .title,
.et-specrow > p,
.et-specrow .caps {
  margin: 0;
}
.et-ui-body {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--ink);
  line-height: var(--leading-normal);
}

/* Prose sample — IBM Plex paragraph at the standard reading
   measure. Used inside type specimens and any place a single
   paragraph of prose should sit cleanly without inheriting the
   plate's wider container. */
.et-prose-sample {
  font-family: var(--font-prose);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink);
  margin: 0;
  max-width: 64ch;
}

/* ============================================================
   et-demorow modifiers
   ============================================================ */
.et-demorow.is-top { align-items: flex-start; }
/* Tables and pagination dropped into a demorow shouldn't carry
   stock Bulma margins — the row itself owns the spacing. */
.et-demorow .table { margin: 0; }
.et-demorow .pagination { justify-content: flex-start; }