/* ═══════════════════════════════════════════════════════════════════════
   ▎ MY-Type · Patterns · v1.2
   ▎
   ▎ Optional patterns that build on typography.css. Include this file
   ▎ only if you want the patterns; they are demonstrations of how to
   ▎ extend the backbone, not part of it.
   ▎
   ▎ Each pattern is self-contained — copy a single block into your
   ▎ project, replace what you don't like, leave what you do.
   ▎
   ▎   §A   Reading patterns   — drop cap, indent mode, pull quote, footnotes
   ▎   §B   Code presentation  — paper + dark code blocks, ASCII rules,
   ▎                             tonal syntax highlighting, programming ligatures
   ▎   §C   UI patterns        — KPI value, status badge, face-attribution tag
   ▎   §D   UI mode overrides  — body.ui-mono, body.ui-hybrid (per-page remap)
   ═══════════════════════════════════════════════════════════════════════ */


/* §A ─── READING PATTERNS ─────────────────────────────────────────── */

/* Drop cap — for the first paragraph of a long-form serif piece. Spans
   three baseline rows; uses Newsreader's display opsz.                */
.drop-cap > p:first-of-type::first-letter,
p.drop-cap::first-letter {
  font-family: var(--font-serif);
  font-variation-settings: "wght" 600, "opsz" 144;
  font-size: calc(var(--t-prose-line) * 3);
  line-height: 1;
  float: left;
  padding-right: 10px;
  padding-top: 4px;
  color: var(--ink);
  margin-right: 4px;
}

/* Indent mode — the first paragraph after a heading is flush, every
   subsequent paragraph indents by 1.2 em with no extra leading. The
   classical book setting. Use on long-form serif articles. */
.indent-mode > p             { margin-top: 0; }
.indent-mode > p + p         { margin-top: 4px; text-indent: 1.2em; }
.indent-mode > h1 + p,
.indent-mode > h2 + p,
.indent-mode > h3 + p        { text-indent: 0; }

/* Pull quote — large italic serif with rules above and below. The
   page's inhalation between two sections of argument.                */
.pull-quote {
  margin: 40px 0;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-variation-settings: "wght" 400, "opsz" 60;
  font-style: italic;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pull-quote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-line);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted);
  font-variation-settings: "wght" 500;
}

/* Footnotes — ordered list with mono numerals in the margin. */
.footnotes {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.footnotes ol {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: fn;
}
.footnotes li {
  counter-increment: fn;
  padding-left: 28px;
  position: relative;
  margin-top: 12px;
  font-family: var(--t-caption-family);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-line);
  color: var(--ink);
}
.footnotes li::before {
  content: counter(fn);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variation-settings: "wght" 500;
  color: var(--muted);
}


/* §B ─── CODE PRESENTATION ────────────────────────────────────────── */

/* Code block on paper — soft tint background, paper-coloured ink. */
.code-block {
  background: var(--tint);
  color: var(--ink);
  border-radius: 6px;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: var(--t-code-size);
  line-height: var(--t-code-line);
  overflow-x: auto;
  margin: 12px 0;
  border-left: 1px solid var(--rule);
}

/* Code block, dark — for code-on-stage moments: terminals, REPLs,
   "code is the page" pages. */
.code-block.dark {
  background: var(--ink);
  color: var(--paper);
  border: 0;
}
.code-block .file-label {
  display: flex;
  justify-content: space-between;
  margin: -16px -20px 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-line);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted);
  font-variation-settings: "wght" 500;
}
.code-block.dark .file-label {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Tonal syntax highlighting — weight + italic only. Comments italic
   and muted; keywords slightly heavier; rest plain. A consuming
   project may overlay decorative colour at the same selectors. */
.code-block .com { color: var(--muted); font-style: italic; }
.code-block .kw  { font-variation-settings: "wght" 600; }
.code-block .str { color: var(--muted); }
.code-block .num,
.code-block .var,
.code-block .key { /* plain — overlay colour in your project */ }

/* Programming ligatures (-> => != etc.) — opt-in. */
.t-code-ligatures {
  font-feature-settings: "ss03","ss04","ss05","calt";
  font-variant-ligatures: contextual;
}

/* ASCII rule classes — for code-page documents where the layout is
   itself made of monospace characters. */
.rule-h, .rule-d, .rule-l {
  color: var(--muted);
  margin: 24px 0 16px;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  line-height: var(--t-code-line);
}
.rule-h::before { content: "═══════════════════════════════════════════════════════════════════════════"; }
.rule-d::before { content: "───────────────────────────────────────────────────────────────────────────"; }
.rule-l::before { content: "·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·"; }


/* §C ─── UI PATTERNS ──────────────────────────────────────────────── */

/* KPI value — large mono number with optional unit and delta.
   Anchor of a dashboard card.                                         */
.kpi {
  font-family: var(--font-mono);
  font-variation-settings: "wght" 500;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--t-heading-size);
  line-height: var(--t-heading-line);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.kpi .unit {
  color: var(--muted);
  font-size: var(--t-caption-size);
  margin-left: 4px;
  font-variation-settings: "wght" 400;
}
.kpi-delta {
  font-family: var(--font-mono);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-line);
  font-variation-settings: "wght" 500;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--muted);
}

/* Status badge — uppercase mono pill. Neutral by default; colour the
   .paid / .pending / .failed / .refunded variants in your project. */
.status {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--tint);
  color: var(--ink);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variation-settings: "wght" 500;
}

/* Face-attribution tag — for design-system documentation. Neutral. */
.face-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--tint);
  color: var(--muted);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variation-settings: "wght" 500;
}


/* §D ─── UI MODE OVERRIDES ────────────────────────────────────────── */

/* Toggleable UI registers. Apply to <body> to remap every UI token
   without touching the canonical token assignments. The pattern
   from dashboard.html — the same content can host different
   typographic registers via a single class on <body>.               */

/* MONO — full Commit Mono UI. Mono weights are lighter than the
   sans equivalents because mono has more visual mass per glyph. */
body.ui-mono {
  --font-sans:           var(--font-mono);
  --t-display-family:    var(--font-mono);
  --t-display-weight:    450;
  --t-display-tracking:  -0.030em;
  --t-title-family:      var(--font-mono);
  --t-title-weight:      500;
  --t-title-tracking:    -0.025em;
  --t-heading-family:    var(--font-mono);
  --t-heading-weight:    500;
  --t-heading-tracking:  -0.020em;
  --t-subheading-family: var(--font-mono);
  --t-subheading-weight: 500;
  --t-subheading-tracking: -0.015em;
  --t-body-family:       var(--font-mono);
  --t-body-weight:       400;
  --t-caption-family:    var(--font-mono);
  --t-caption-weight:    450;
  font-variant-ligatures: none;
  font-feature-settings: "ss03","ss04";
}

/* HYBRID — Sans for prose, mono for value-bearing surfaces. */
body.ui-hybrid [data-ui-mono],
body.ui-hybrid .customer-name,
body.ui-hybrid .nav-item,
body.ui-hybrid .ui-action,
body.ui-hybrid .ui-search {
  font-family: var(--font-mono);
}