/* ======================================================================
   Drawn lettering - the graphite alphabet, as a design system component.

   Companion to /assets/drawn-lettering.js. Sibling of drawn-controls.css:
   controls draw the box, this draws the words inside and around them.

   Decision (Shaun, 2026-08-22): the uppercase wide-tracked mono label
   style is drawn by hand, not set in IBM Plex Mono. Scope is EDITORIAL
   LABELS ONLY - static, decorative, authored in the markup. Live and
   numeric data (prices, dates, counters, the receipt stream) stays in
   IBM Plex Mono. See docs/DESIGN-SYSTEM-V2.md "Drawn lettering".

   Markup:
     <span class="drawn" data-drawn>For founders, not accountants.</span>
     <span class="drawn" data-drawn data-drawn-rule>THE FOUNDERS ACCOUNTANT</span>
     <div class="hero-drawn" id="heroDrawn"></div>          (hero, fit mode)

   The element's own text is kept as the accessible copy and hidden
   visually; the drawing is inserted alongside it and marked aria-hidden.
   ==================================================================== */

/* The host reserves its own line box so inserting the drawing does not
   reflow the page. inline-block keeps it flowing with surrounding text. */
/* display sits in a CASCADE LAYER, on its own, and that is load bearing.
   An unlayered author rule beats a layered one no matter what the specificity
   or the source order is, so this reads as "inline-block unless the page says
   otherwise" instead of "inline-block, final answer".

   Without the layer this rule SHIPPED A BUG on 2026-08-22: every tools page
   hides its nav tagline below 768px with `.nav-tagline{display:none}`, which is
   also (0,1,0), and drawn-lettering.css is linked after the page stylesheet -
   so later-wins un-hid the tagline on ten live pages and pushed "Book a call"
   entirely off a 390px viewport. Nothing overflowed the document, because the
   nav clips, so an overflow check saw nothing wrong.

   Anything that is NOT a safe default stays unlayered below. */
@layer drawn-defaults {
  .drawn { display: inline-block; }
}

.drawn {
  position: relative;
  line-height: 1;
  vertical-align: baseline;
}

/* No overflow override. For an animated instance the SVG viewport
   clipping the barrel IS the top crop, the way a hand holding a tool
   enters a photograph. The right side is opened up in JS by widening the
   box, not by letting the whole thing spill. */
.drawn > svg { display: block; }

/* A finished drawing is a static picture that happens to be expensive to
   paint, because the two turbulence passes behind it are rasterised on the
   CPU by WebKit and redone whenever a scroll invalidates the layer. Giving
   the finished instance its own compositor layer means a scroll translates
   that layer instead of repainting through the filters, which took the
   median frame while scrolling from 46 to 67 in real WebKit at 428x926 and
   lifted the worst run from 22 to 53. Scoped to .is-drawn on purpose, so a
   page gets one layer per actual drawing rather than one per host that has
   not drawn anything yet, and the undrawn text fallback stays unpromoted.
   Paired with the per-pass filter grouping in drawn-lettering.js; see
   DECISIONS 2026-08-29. */
.drawn.is-drawn {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Visually hidden but still read. Shipped here rather than leaning on
   Tailwind's .sr-only: the CDN build is not guaranteed to emit a class
   that only ever appears inside a script-inserted subtree, and a label
   that loses its text is worse than one that never got drawn. */
.drawn.is-drawn > .drawn-a11y {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Until the script runs, show the real text set in mono. A page with JS
   off, or a script that fails, still reads correctly - it just is not
   drawn. .is-drawn is set by the component once a drawing is in place. */
.drawn:not(.is-drawn) {
  font-family: var(--font-mono, ui-monospace, monospace);
}
/* The clip is scoped to .is-drawn deliberately. Hiding the text the moment
   the component mounts, before it is known that a drawing can actually be
   produced, meant every failure path (zero-width fit host, font-size 0, a
   phrase with no drawable glyphs) ended as a 0x0 element with the words
   nowhere on the page and nowhere in the accessible tree. Until the drawing
   is in place the real text stays visible, set in mono. */

/* Reduced motion: the line is rendered finished and still, with no
   pencil. Handled in JS; nothing to do here beyond documenting it. */