/* ======================================================================
   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; }

/* 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. */