/* Lokta utilities. Layout primitives and a display type scale bound to the
   tokens, so page-level structure and headings do not need inline styles.
   Load after the components. Everything here uses tokens only. */

/* ── CONTAINERS ──────────────────────────────────────────────────────────── */
.lk-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--space-5); box-sizing: border-box; }
.lk-wrap-wide { max-width: 1320px; }
.lk-wrap-narrow { max-width: 72ch; }

/* ── STACK / CLUSTER (token-spaced flow) ────────────────────────────────── */
.lk-stack { display: flex; flex-direction: column; gap: var(--lk-gap, var(--space-4)); }
.lk-stack-1 { --lk-gap: var(--space-1); }
.lk-stack-2 { --lk-gap: var(--space-2); }
.lk-stack-3 { --lk-gap: var(--space-3); }
.lk-stack-4 { --lk-gap: var(--space-4); }
.lk-stack-5 { --lk-gap: var(--space-5); }
.lk-stack-6 { --lk-gap: var(--space-6); }
.lk-stack-7 { --lk-gap: var(--space-7); }
.lk-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lk-gap, var(--space-3)); }
.lk-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

/* ── GRID (responsive; collapses to 1 column on narrow screens) ──────────── */
.lk-grid { display: grid; gap: var(--lk-gap, var(--space-5)); grid-template-columns: repeat(var(--lk-cols, 1), minmax(0, 1fr)); }
.lk-cols-2 { --lk-cols: 2; }
.lk-cols-3 { --lk-cols: 3; }
.lk-cols-4 { --lk-cols: 4; }
.lk-grid-auto { grid-template-columns: repeat(auto-fit, minmax(var(--lk-min, 240px), 1fr)); }

/* ── SECTION SPACING ─────────────────────────────────────────────────────── */
.lk-section { padding-block: var(--space-8); }
.lk-section-sm { padding-block: var(--space-6); }

/* ── DISPLAY TYPE SCALE (bound to the type tokens) ───────────────────────── */
.lk-display { font-family: "Archivo", sans-serif; font-size: var(--type-3xl); font-weight: var(--wt-black); letter-spacing: var(--track-tight); line-height: var(--lh-tight); color: var(--text-primary); text-wrap: balance; }
.lk-h1 { font-family: "Archivo", sans-serif; font-size: var(--type-2xl); font-weight: var(--wt-black); letter-spacing: var(--track-tight); line-height: var(--lh-tight); color: var(--text-primary); text-wrap: balance; }
.lk-h2 { font-family: "Archivo", sans-serif; font-size: var(--type-xl); font-weight: var(--wt-bold); letter-spacing: var(--track-snug); line-height: var(--lh-snug); color: var(--text-primary); text-wrap: balance; }
.lk-h3 { font-family: "Archivo", sans-serif; font-size: var(--type-lg); font-weight: var(--wt-semibold); letter-spacing: var(--track-snug); line-height: var(--lh-snug); color: var(--text-primary); }
.lk-eyebrow { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: var(--type-xs); text-transform: uppercase; letter-spacing: var(--track-label); font-weight: var(--wt-medium); color: var(--text-secondary); }
.lk-lede { font-family: "Source Serif 4", serif; font-size: var(--type-md); line-height: var(--lh-relaxed); color: var(--text-body); text-wrap: pretty; }

@media (max-width: 640px) {
  .lk-cols-2, .lk-cols-3, .lk-cols-4 { --lk-cols: 1; }
  .lk-display { font-size: var(--type-2xl); }
  .lk-h1 { font-size: var(--type-xl); }
}

/* ── DATA VIZ ──────────────────────────────────────────────────────────────
 * Categorical series tuned to WCAG 1.4.11 (3:1 vs surface and adjacent) and
 * CVD-distinguishable (Machado 2009 + CIEDE2000). Two perceptual sets of one
 * palette: deeper for light stocks, lifted for dark. Gated by validate/viz.mjs.
 * Colour is safe for three series; beyond that the pattern + label is mandatory. */
:root {
  --viz-1: #1F5C92; --viz-2: #8A5A12; --viz-3: #4F6B50; --viz-4: #8E2C49;
  --viz-5: #2F6F6D; --viz-6: #5F4080; --viz-7: #B23320; --viz-8: #4A535E;
}
[data-theme="ink"], [data-theme="indigo"], [data-theme="highland"],
[data-theme="pine"], [data-theme="mulberry"], [data-theme="slate"],
[data-theme="steel"], [data-theme="onyx"] {
  --viz-1: #6FA8D8; --viz-2: #D9A642; --viz-3: #8FB088; --viz-4: #D67A95;
  --viz-5: #5FB0AD; --viz-6: #A98FC9; --viz-7: #E2654F; --viz-8: #9AA3AE;
}
/* Sequential (perceptually uniform, L* monotonic) and diverging scales. */
:root {
  --viz-seq-0: #F5EED3; --viz-seq-1: #E4D6B7; --viz-seq-2: #D2BF9B; --viz-seq-3: #C1A880;
  --viz-seq-4: #AF9166; --viz-seq-5: #9D7C4D; --viz-seq-6: #8A6634; --viz-seq-7: #78521B; --viz-seq-8: #653E00;
  --viz-div-0: #AB3429; --viz-div-1: #BF5C4D; --viz-div-2: #D08272; --viz-div-3: #DEA699;
  --viz-div-4: #E9CBC2; --viz-div-5: #F0F1ED; --viz-div-6: #C9D3DB; --viz-div-7: #A1B6CA;
  --viz-div-8: #789AB8; --viz-div-9: #4C7EA7; --viz-div-10: #006495;
  --lk-pat-ink: rgba(31, 20, 14, 0.55);
}
/* On dark stocks the pattern line auto-lifts; no need for .lk-pat-light. */
[data-theme="ink"], [data-theme="indigo"], [data-theme="highland"],
[data-theme="pine"], [data-theme="mulberry"], [data-theme="slate"],
[data-theme="steel"], [data-theme="onyx"] { --lk-pat-ink: rgba(250, 248, 234, 0.6); }
.lk-viz-1 { --viz: var(--viz-1); }
.lk-viz-2 { --viz: var(--viz-2); }
.lk-viz-3 { --viz: var(--viz-3); }
.lk-viz-4 { --viz: var(--viz-4); }
.lk-viz-5 { --viz: var(--viz-5); }
.lk-viz-6 { --viz: var(--viz-6); }
.lk-viz-7 { --viz: var(--viz-7); }
.lk-viz-8 { --viz: var(--viz-8); }

/* Legend: a swatch and a label per series. */
.lk-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.lk-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--type-sm); color: var(--text-body); }
.lk-swatch { width: 12px; height: 12px; flex: none; background: var(--viz, var(--viz-1)); border: var(--rule-hairline) solid var(--border-strong); }

/* Horizontal bar chart: a track per row, filled to --pct in a series colour. */
.lk-barlist { display: grid; gap: var(--space-3); }
.lk-barlist-row { display: grid; grid-template-columns: minmax(80px, 1fr) 3fr auto; align-items: center; gap: var(--space-3); }
.lk-barlist-label { font-size: var(--type-sm); color: var(--text-body); }
.lk-barlist-val { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: var(--type-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: right; }
.lk-bar-track { height: 12px; background: var(--surface-sunken); border: var(--rule-hairline) solid var(--border-hairline); }
.lk-bar-fill { display: block; height: 100%; width: var(--pct, 0%); background: var(--viz, var(--viz-1)); }

/* Sparkline / inline chart: style a bare inline SVG with the series stroke. */
.lk-spark { display: inline-block; vertical-align: middle; }
.lk-spark path, .lk-spark polyline { fill: none; stroke: var(--viz, var(--viz-1)); stroke-width: 1.5; stroke-linejoin: miter; stroke-linecap: square; }

/* ── DATATYPE · charts in the sentence ─────────────────────────────────────
 * The Datatype font (fonts.css) renders {b:…} bars, {l:…} sparklines, and
 * {p:…} pie as inline charts via ligature substitution, no SVG, no JS. Values
 * 0-100, up to 20 per series; the mark inherits currentColor, flat by nature.
 * A chart made of text is still text: every .dt must be role="img" with an
 * aria-label that states the trend in words (gated by validate/motion.mjs and
 * the axe suite). lokta-chart.js emits the source and the label together so
 * they cannot drift. The SVG --viz path stays for large or labelled figures. */
.dt { font-family: "Datatype"; font-feature-settings: "liga" 1, "calt" 1; font-variation-settings: "wdth" 100, "wght" 400; color: var(--text-primary); }
.dt-bars { font-size: 30px; font-variation-settings: "wdth" 100, "wght" 500; }
.dt-spark { font-size: 26px; font-variation-settings: "wdth" 90, "wght" 500; }
.dt-pie { font-size: 30px; font-variation-settings: "wdth" 100, "wght" 600; }
/* Inside running prose, scale to the line and nudge onto the baseline. */
.lk-prose .dt, .dt-inline { font-size: 1.3em; vertical-align: -0.18em; margin: 0 0.12em; }

/* Pattern fills: the colour-independent fallback (WCAG 1.4.1). Apply .lk-pat-N
   beside .lk-viz-N on a bar or swatch; colour is safe for three series, the
   pattern carries the rest. Add .lk-pat-light to lift the line on dark series. */
.lk-bar-fill, .lk-swatch { background-repeat: repeat; }
.lk-pat-light { --lk-pat-ink: rgba(250, 248, 234, 0.6); }
.lk-pat-2 { background-image: repeating-linear-gradient(45deg, var(--lk-pat-ink) 0, var(--lk-pat-ink) 2px, transparent 2px, transparent 5px); }
.lk-pat-3 { background-image: radial-gradient(var(--lk-pat-ink) 1.4px, transparent 1.5px); background-size: 6px 6px; }
.lk-pat-4 { background-image: repeating-linear-gradient(45deg, var(--lk-pat-ink) 0, var(--lk-pat-ink) 1.5px, transparent 1.5px, transparent 5px), repeating-linear-gradient(-45deg, var(--lk-pat-ink) 0, var(--lk-pat-ink) 1.5px, transparent 1.5px, transparent 5px); }
.lk-pat-5 { background-image: repeating-linear-gradient(90deg, var(--lk-pat-ink) 0, var(--lk-pat-ink) 2px, transparent 2px, transparent 5px); }
.lk-pat-6 { background-image: repeating-linear-gradient(0deg, var(--lk-pat-ink) 0, var(--lk-pat-ink) 2px, transparent 2px, transparent 5px); }
.lk-pat-7 { background-image: repeating-linear-gradient(0deg, var(--lk-pat-ink) 0, var(--lk-pat-ink) 1.5px, transparent 1.5px, transparent 6px), repeating-linear-gradient(90deg, var(--lk-pat-ink) 0, var(--lk-pat-ink) 1.5px, transparent 1.5px, transparent 6px); }
.lk-pat-8 { background-image: radial-gradient(circle, transparent 2px, var(--lk-pat-ink) 2.5px, var(--lk-pat-ink) 3.5px, transparent 4px); background-size: 7px 7px; }

/* Heat cells: bind a sequential or diverging step to a cell, with the
   max-contrast text colour baked in. Shading is decorative, so keep the value
   itself readable (a scope="row" header or the number). */
.lk-cell-seq-0 { background: var(--viz-seq-0); color: #1F1C13; }
.lk-cell-seq-1 { background: var(--viz-seq-1); color: #1F1C13; }
.lk-cell-seq-2 { background: var(--viz-seq-2); color: #1F1C13; }
.lk-cell-seq-3 { background: var(--viz-seq-3); color: #1F1C13; }
.lk-cell-seq-4 { background: var(--viz-seq-4); color: #1F1C13; }
.lk-cell-seq-5 { background: var(--viz-seq-5); color: #1F1C13; }
.lk-cell-seq-6 { background: var(--viz-seq-6); color: #FAF8EA; }
.lk-cell-seq-7 { background: var(--viz-seq-7); color: #FAF8EA; }
.lk-cell-seq-8 { background: var(--viz-seq-8); color: #FAF8EA; }
.lk-cell-div-0 { background: var(--viz-div-0); color: #FAF8EA; }
.lk-cell-div-1 { background: var(--viz-div-1); color: #FAF8EA; }
.lk-cell-div-2 { background: var(--viz-div-2); color: #1F1C13; }
.lk-cell-div-3 { background: var(--viz-div-3); color: #1F1C13; }
.lk-cell-div-4 { background: var(--viz-div-4); color: #1F1C13; }
.lk-cell-div-5 { background: var(--viz-div-5); color: #1F1C13; }
.lk-cell-div-6 { background: var(--viz-div-6); color: #1F1C13; }
.lk-cell-div-7 { background: var(--viz-div-7); color: #1F1C13; }
.lk-cell-div-8 { background: var(--viz-div-8); color: #1F1C13; }
.lk-cell-div-9 { background: var(--viz-div-9); color: #FAF8EA; }
.lk-cell-div-10 { background: var(--viz-div-10); color: #FAF8EA; }

/* ── MANUSCRIPT MATERIAL (opt-in motifs from the namesake) ─────────────────── */
/* Deckle edge: clips a block's right or bottom edge into a torn lokta deckle. */
.lk-deckle-r {
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 4%, calc(100% - 5px) 9%, 100% 15%, calc(100% - 8px) 21%, calc(100% - 2px) 28%, 100% 35%, calc(100% - 7px) 42%, calc(100% - 3px) 49%, 100% 56%, calc(100% - 8px) 63%, calc(100% - 2px) 70%, calc(100% - 6px) 77%, 100% 84%, calc(100% - 7px) 91%, calc(100% - 3px) 97%, 100% 100%, 0 100%);
}
.lk-deckle-b {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 96% calc(100% - 6px), 91% 100%, 84% calc(100% - 7px), 77% 100%, 70% calc(100% - 5px), 63% 100%, 56% calc(100% - 8px), 49% 100%, 42% calc(100% - 4px), 35% 100%, 28% calc(100% - 7px), 21% 100%, 15% calc(100% - 3px), 9% 100%, 4% calc(100% - 6px), 0 100%);
}

/* Palm-leaf pothi: a landscape leaf with double rules and a central string-hole. */
.lk-pothi {
  position: relative;
  border: var(--rule-1) solid var(--border-strong);
  background: var(--surface-page);
  padding: var(--space-5) var(--space-7);
}
.lk-pothi-rule { height: var(--rule-1); background: var(--border-default); }
.lk-pothi-hole {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%;
  border: var(--rule-1) solid var(--border-default); background: var(--surface-inset);
}

/* Kolam: woven line ornaments from lokta-kolam.js (the alpana/kolam tradition).
 * The SVG themes through currentColor; the stroke weight binds to the rule
 * scale, so it is a per-instance parameter, not a new dial. Default is the 2px
 * icon/rule-2 weight; fine for dense fields, bold for a hero motif. */
.lk-kolam { display: inline-block; color: var(--text-primary); --lk-kolam-weight: var(--rule-2); }
.lk-kolam svg { display: block; width: 100%; height: auto; }
.lk-kolam svg path { stroke-width: var(--lk-kolam-weight); }
.lk-kolam-fine { --lk-kolam-weight: var(--rule-1); }
.lk-kolam-hairline { --lk-kolam-weight: var(--rule-hairline); }
.lk-kolam-bold { --lk-kolam-weight: var(--rule-3); }
/* On a pigment ground or dark stock, set the ink with the text colour. */
.lk-kolam-accent { color: var(--accent-feature); }

/* Line-art tracing: a photo traced to vector contours by scripts/build-trace.mjs
 * (the cookbook's outline idiom, not tone). The SVG strokes in currentColor, so
 * the line art themes with the stock; the figure frames it editorially. */
.lk-trace { display: block; margin: 0; color: var(--text-primary); border: var(--rule-1) solid var(--border-strong); background: var(--surface-page); }
.lk-trace svg, .lk-trace-svg { display: block; width: 100%; height: auto; }
.lk-trace path { stroke-width: var(--lk-trace-weight, 0.6px); }
.lk-trace-accent { color: var(--accent-feature); }
.lk-trace figcaption { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: var(--type-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-secondary); padding: var(--space-2) var(--space-3); border-top: var(--rule-1) solid var(--border-default); }

/* Recipe notation. Quantities set the way a cookbook does: real fractions and
 * tabular figures. The OpenType `frac` feature must be scoped to the fraction
 * substring only (lokta-recipe.js wraps bare N/M in .lk-frac); applied to a
 * whole line it superscripts whole numbers and mangles parentheticals. */
.lk-frac { font-feature-settings: "frac" 1; }
.lk-figures { font-variant-numeric: tabular-nums lining-nums; }
.lk-recipe { font-variant-numeric: lining-nums; }
.lk-recipe .lk-qty { font-variant-numeric: tabular-nums lining-nums; }