/* ============================================================================================
   BD EDITORIAL — the "editorial look with a measure of hickory" as a drop-in kit for any tool
   ============================================================================================
   Harley, 10–11 Oct 2026, on Flight Deck: "I know the BD brand is blocky but this almost looks
   cartoon like. I want that boutique vibe" → "I like editorial look for sure but it does need that
   hickory back in it" → of mock A2, "Loving version 2" → of the four tabs built in it, "Looks
   fantastic" → "create me a file that I can drop into the other tools that uses the exact design
   language and flow".

   This sheet is APP-OWNED (like bd-bridge.css: no harness source, so the design-sync gate leaves it
   alone). It adds NO new look: it is the harness laws (bd-design-harness/CLAUDE.md §1) set out as a
   handful of reusable blocks, measured from the shipped Flight Deck. The how-to, with markup for
   every block and the page flow, is docs/Editorial-Look.md. Read that first.

   THE GRAMMAR IN ONE BREATH
     · cream-200 ground; a section's field cream-100; its rows cream-50; panes told apart by ONE step
       of fill at a 2px seam (law 3). No line anywhere but a text box's own 1px border.
     · a section head is an 11px micro-label with its count as quiet 12px text (law 9): never a band,
       never a rule under it.
     · figures are 22px/800 numerals over a micro-label and a quiet sub-line (law 7: 800 is a figure).
     · hickory is a FILL in a few deliberate places only — a LINTEL over a group of figures, the ONE
       figure the page is about, the ONE row the page is about, and the CLOSING row — so the page has
       a hickory spine without any pane going dark. Mint is ink on hickory (a numeral, a Now mark, the
       accent button) and the done steps of a bar; never a field behind body copy.
     · status washes keep the deck's meanings, softened onto the cream-50 row: late red, sent blue,
       approved amber, live mint-200.
   Every dark block must ALSO carry .bd-on-dark (index.html's ground idiom) so the controls inside it
   re-resolve their inks. A light field inside a dark block carries .bd-on-light.
   Class names avoid the legacy ratchet's segments (btn, chip, pill, tag, card, input, field).
   ============================================================================================ */

/* ---- the page rhythm: sections 40px apart; a head sits 10px over what it heads ---- */
.ed-stack { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.ed-sec { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ACCESSIBILITY FLOOR — deviates from the design (Harley, 11 Oct 2026). The design draws the faint tier
   (.ed-faint, .ed-head__count, .ed-fig__sub, .ed-legend) in hickory-400. Measured in the dev harness, hickory-400
   is 3.87:1 on the cream-200 ground, 4.23 on the cream-100 field, 4.52 on cream-50 rows: under 4.5:1 for 11-12px
   text on two of the three. They take hickory-500 (7.15 / 7.82 / 8.35), the .notif-section / .notif-time
   precedent in index.html. On a .bd-on-dark block the bridge remaps it to ink-dark-2 (5.66:1 on hickory-700). */
/* ---- the micro-label (the one type device for every head and label) ---- */
.ed-micro { font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; color: var(--hickory-500); }
.ed-quiet { font-size: 12px; color: var(--hickory-500); line-height: 1.4; }
.ed-faint { font-size: 12px; color: var(--hickory-500); line-height: 1.4; }

/* ---- A SECTION HEAD: the label, its count, and (optionally) the section's own tool at the right ---- */
.ed-head { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 0 0 8px; }
.ed-head__label { font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--hickory-500); line-height: 1.3; margin: 0; }
.ed-head__count { font-size: 12px; font-weight: var(--fw-medium); color: var(--hickory-500); }
.ed-head__end { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* ---- THE FIGURE STRIP: figure tiles at a 2px seam, grouped under hickory LINTELS ----
   Set --ed-n on .ed-strip to the number of tiles; each .ed-lintel spans its group with
   style="grid-column: span N". Leave the lintels out for a plain strip. */
.ed-strip { display: grid; grid-template-columns: repeat(var(--ed-n, 4), minmax(0, 1fr)); gap: 2px; }
.ed-lintel { height: 28px; display: flex; align-items: center; padding: 0 0 0 12px; background: var(--accent); color: var(--ink-dark-2);
  font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.ed-fig { appearance: none; border: 0; border-radius: 0; margin: 0; font: inherit; text-align: left; color: var(--accent); position: relative;
  display: flex; flex-direction: column; min-width: 0; min-height: 92px; padding: 16px 14px 14px 16px; background: var(--surface-quiet); }
button.ed-fig { cursor: pointer; } button.ed-fig:hover { filter: brightness(1.03); }
.ed-fig__n { font-size: 22px; font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tighter); line-height: 1; }
.ed-fig__label { margin-top: 8px; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; color: var(--hickory-500); }
.ed-fig__sub { margin-top: 4px; font-size: 12px; color: var(--hickory-500); line-height: 1.3; }
.ed-fig--lift { background: var(--cream-50); }   /* one step lighter: the group the page is nearest (Flight Deck: the going-live three) */
.ed-fig--now { background: var(--accent); color: var(--ink-dark-1); }   /* THE ONE FIGURE THE PAGE IS ABOUT — one per page; add .bd-on-dark */
.ed-fig--now .ed-fig__n { color: var(--mint-400); } .ed-fig--now .ed-fig__label { color: var(--ink-dark-1); } .ed-fig--now .ed-fig__sub { color: var(--ink-dark-2); }
.ed-fig--late .ed-fig__n { color: var(--danger-deep); }   /* something is late: the figure says it, never a red field */
.ed-fig--hero { min-height: 124px; padding: 22px 26px 20px; } .ed-fig--hero .ed-fig__n { font-size: 28px; } .ed-fig--hero .ed-fig__label { margin-top: 10px; }
.ed-fig__bar { display: block; height: 4px; margin-top: 18px; background: color-mix(in srgb, var(--cream-100) 20%, transparent); }   /* a progress bar inside the hickory figure */
.ed-fig__bar i { display: block; height: 100%; background: var(--mint-400); }

/* ---- A BAND: a 52px row that names a group and folds it — a LEDGER figure in a 40px column, a
   micro-label name, quiet words, the end (a count, an action, a chevron) ---- */
.ed-band { appearance: none; border: 0; border-radius: 0; margin: 0; font: inherit; text-align: left; color: var(--accent); width: 100%;
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px; background: var(--cream-50); }
button.ed-band { cursor: pointer; }
.ed-band__n { width: 40px; flex: none; font-size: 16px; font-weight: var(--fw-semibold); color: var(--hickory-500); line-height: 1; }
.ed-band__label { font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--hickory-500); line-height: 1.3; margin: 0; }
.ed-band__words { font-size: 12px; color: var(--hickory-500); }
.ed-band__end { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--hickory-500); }
.ed-band--far { background: var(--surface-quiet); }   /* one step further back (later, folded, less urgent) */
/* THE ONE ROW THE PAGE IS ABOUT, and THE CLOSING ROW at the foot: hickory, a mint 22px ledger figure.
   Add .bd-on-dark. Its action is the ACCENT button (.bd-btn.bd-btn--accent: mint fill, hickory ink). */
.ed-band--now, .ed-band--close { background: var(--accent); color: var(--ink-dark-1); }
.ed-band--now .ed-band__n, .ed-band--close .ed-band__n { font-size: 22px; font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tighter); color: var(--mint-400); }
.ed-band--now .ed-band__label, .ed-band--close .ed-band__label { color: var(--ink-dark-1); }
.ed-band--now .ed-band__words, .ed-band--now .ed-band__end, .ed-band--close .ed-band__words, .ed-band--close .ed-band__end { color: var(--ink-dark-2); }
.ed-band--now .bd-btn.bd-btn--accent, .ed-band--close .bd-btn.bd-btn--accent { background: var(--mint-400); color: var(--accent); font-weight: var(--fw-semibold); }   /* the bridge greys a .bd-btn on dark */
.ed-now { display: inline-block; padding: 4px 9px; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; background: var(--mint-400); color: var(--accent); }   /* the Now mark */

/* ---- ROWS: cream-50 at a 2px seam; the title over its sub-line, the middle, the end ---- */
.ed-rows { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ed-row { appearance: none; border: 0; border-radius: 0; margin: 0; font: inherit; text-align: left; color: var(--accent); width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 24px; align-items: center; min-height: 60px; padding: 12px 20px; background: var(--cream-50); }
button.ed-row { cursor: pointer; } button.ed-row:hover { filter: brightness(1.02); }
.ed-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ed-row__title { font-size: 14px; font-weight: var(--fw-semibold); line-height: 1.3; overflow-wrap: anywhere; }
.ed-row__sub { font-size: 12px; color: var(--hickory-500); }
.ed-row__end { display: flex; align-items: center; justify-content: flex-end; gap: 16px; font-size: 12px; white-space: nowrap; }
.ed-row--late { background: color-mix(in srgb, var(--danger) 12%, var(--cream-50)); } .ed-row--late .ed-row__end { color: var(--danger-deep); font-weight: var(--fw-semibold); }
.ed-row--sent { background: color-mix(in srgb, #2F80ED 24%, var(--cream-50)); }   /* the app's declared "sent" blue (Flight Deck's --fd-sent) */
.ed-row--approved { background: color-mix(in srgb, var(--warning) 26%, var(--cream-50)); }
.ed-row--live { background: var(--mint-200); }

/* ---- A STEP BAR: one <i> per step; .is-done mint, .is-now hickory, the rest cream-300 ---- */
.ed-steps { display: flex; gap: 2px; min-width: 0; } .ed-steps i { flex: 1; height: 6px; background: var(--cream-300); }
.ed-steps i.is-done { background: var(--mint-400); } .ed-steps i.is-now { background: var(--accent); }

/* ---- SMALL ITEMS (a row's list of things: print items, products) ---- */
.ed-items { display: flex; flex-wrap: wrap; gap: 4px; } .ed-item { background: var(--cream-300); padding: 4px 10px; font-size: 12px; font-weight: var(--fw-medium); }

/* ---- LANES: side-by-side cream-100 fields at a 2px seam, each its micro-label head and cream-50 entries ---- */
.ed-lanes { display: grid; grid-template-columns: repeat(var(--ed-n, 3), minmax(0, 1fr)); gap: 2px; }
.ed-lane { background: var(--surface-quiet); padding: 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ed-lane__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 14px; }
.ed-lane__head .ed-faint { flex-basis: 100%; }
.ed-entry { background: var(--cream-50); padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ed-entry--late { background: color-mix(in srgb, var(--danger) 12%, var(--cream-50)); }
.ed-initial { width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; background: var(--accent); color: var(--mint-400); font-size: 11px; font-weight: var(--fw-semibold); }   /* a person's initial: hickory, mint ink */

/* ---- A LEGEND: a quiet foot row on the field, 8px swatches in the washes ---- */
.ed-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 12px; background: var(--surface-quiet); font-size: 11px; color: var(--hickory-500); }
.ed-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--cream-50); }

/* ---- a narrow work pane (a phone, or the drawer open on a small window) ---- */
@container work (max-width: 739px) {
  .ed-strip, .ed-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ed-lintel { display: none; }
  .ed-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } .ed-row__end { justify-content: flex-start; }
  .ed-band { flex-wrap: wrap; padding: 10px 16px; } .ed-band__end { margin-left: 0; flex-basis: 100%; }
}