/* ============================================================
   THE COATING, page layer  ·  V2
   Doc No. ICON-WEB-CSS-006 · loads after tokens.css and main.css

   Scope rule (COMPONENTS §9): a page stylesheet holds only what is
   genuinely local to one page. Everything structural on this page
   comes from the archetype library. What lives here is the AR-8
   section drawing, which is drawn once, for this page, and the two
   small density tunings the crown-jewel page needs on top of the
   shared components.

   CONTENTS
     1 · AR-8 section drawing
     2 · AR-2 twin-ledger group, the ASTM test record
     3 · AR-5 five column comparison
     4 · FAQ deck
     5 · AR-2b tile seam

   TILES vs LEDGERS ON THIS PAGE, Aug 20 2026 (DESIGN-SYSTEM §3b)
   Section 2, the specification, is now figure tiles: six headline
   facts a reader scans. Section 5, the twelve ASTM tests, stays a
   ledger pair: it has a value column, the reader reads down it, and
   the client named that case as the one a list is right for.
   ============================================================ */


/* ============================================================
   1 · AR-8 SECTION DRAWING
   The 63 micron cross-section. Two drawings ship: --wide for 768
   and up with the labels in the right margin, --stack for phones.
   Both are drawn at 2 SVG units per micron, so the ICON layer and
   the ceramic layer beside it are at true relative scale and the
   left hand ruler reads as a real measurement axis.

   The material swatches below are the shades already established
   for this drawing in _ART/kitchen-sink.html. They are values of
   --ink, no new hue is introduced.
   ============================================================ */

/* Substrate: factory paint system and panel. */
.diagram-svg .dg-clear  { fill: #262019; stroke: var(--grey); stroke-width: 1; }
.diagram-svg .dg-base   { fill: #1C1916; stroke: var(--grey); stroke-width: 1; }
.diagram-svg .dg-primer { fill: #3A342C; stroke: var(--grey); stroke-width: 1; }
.diagram-svg .dg-panel  { stroke: var(--grey); stroke-width: 1; }

/* The two coatings. Same scale, no exaggeration. */
.diagram-svg .dg-icon    { fill: var(--gold);      fill-opacity: 0.34; stroke: var(--gold);      stroke-width: 1; }
.diagram-svg .dg-ceramic { fill: var(--gold-rich); fill-opacity: 0.85; stroke: var(--gold-rich); stroke-width: 1; }

/* Drawing furniture: measurement axis, datum, hatch, divider. */
.diagram-svg .dg-rule  { fill: none; stroke: var(--grey); stroke-width: 1; }
.diagram-svg .dg-hatch { stroke: var(--grey); stroke-width: 1; }
.diagram-svg .dg-div   { fill: none; stroke: var(--gold); stroke-opacity: 0.45; stroke-width: 1; }
.diagram-svg .dg-datum {
  fill: none;
  stroke: var(--gold);
  stroke-opacity: 0.45;
  stroke-width: 1;
  stroke-dasharray: 5 5;
}
.diagram-svg .dg-tick {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--on-black-muted);
}

/* The shared sizes are set for a 680 unit box. This drawing is 560
   units wide so it fills the 1.35fr column, which means every unit
   renders a little smaller. Hold the labels at a legible size at
   1024, where the column is narrowest. */
.diagram-svg .layer-label { font-size: 13px; }
.diagram-svg .layer-note  { font-size: 12px; }

/* The section drawing carries a lot of horizontal information, so
   it takes a wider share of the band than the library default. */
@media (min-width: 1024px) {
  .diagram { grid-template-columns: 1.5fr 1fr; }
}


/* ============================================================
   2 · AR-2 TWIN-LEDGER GROUP
   Twelve tests is over the eight row ceiling, so it splits into
   two ledgers under one I-beam per AR-2. The second ledger carries
   findings rather than figures, so its value column is dropped and
   the note takes the width back.
   ============================================================ */

.ledger-group + .ledger-group { margin-top: var(--s-6); }
.ledger-head {
  margin-bottom: var(--s-3);
  color: var(--fg-muted);
}
.ledger--nofig .ledger-row {
  grid-template-columns: 76px minmax(180px, 1.1fr) minmax(0, 2.4fr);
}
.ledger--nofig .ledger-note { max-width: 62ch; }

@media (max-width: 767px) {
  .ledger--nofig .ledger-row { grid-template-columns: 60px 1fr; }
}


/* ============================================================
   3 · AR-5 FIVE COLUMN COMPARISON
   Four comparands plus the attribute column is the widest the
   archetype allows. Fixed layout so one long cell cannot starve
   the ICON column, and a tighter cell at tablet where five columns
   share about 700px.
   ============================================================ */

.compare-table { table-layout: fixed; }

@media (min-width: 768px) and (max-width: 1023px) {
  .compare-table thead th,
  .compare-table tbody th,
  .compare-table tbody td {
    padding: 11px 9px;
    font-size: 0.8125rem;
  }
}


/* ============================================================
   4 · FAQ DECK
   Two accordion columns rather than one. §D7: nothing may occupy
   less than 60% of the wrap without something occupying the rest,
   and a single 900px question list in a 1280px wrap is the case
   that rule exists for. Two columns also halve the band height.
   ============================================================ */

.faq-deck { display: grid; gap: var(--s-6) var(--s-7); }

@media (min-width: 900px) {
  .faq-deck { grid-template-columns: 1fr 1fr; gap: 0 var(--s-7); }
}


/* ============================================================
   5 · AR-2b TILE SEAM
   The specification set closes on the same mono foot line the
   ledger used to. .tilegrid already reserves the riser, so this
   is the seam above the 2px foot rule and nothing else. Same
   value the home page uses, held locally because home.css does
   not load here.
   ============================================================ */

.tilegrid + .ledger-foot { margin-top: var(--s-4); }