/* ============================================================================
   kala-ui.css — ONE HAND, NO RULES.  OK-U1
   ----------------------------------------------------------------------------
   The sheet every page of the Order and the Bazaar wears over its own
   stylesheet. Loaded LAST, so the tokens it restates win. It changes three
   things and nothing else:

   1. ONE FONT. The page is set in the plotter's own lettering — Hershey
      futural (1967), the hand the pen already writes every instruction in on
      every sheet the Order sells — cast as a font (public/fonts/, built by
      tools/build-hershey-font.py from the same polylines the plotter draws).
      The bought serif, the system sans and the monospace are gone: a price, a
      caption, the running head, a button, a placeholder and the body are the
      same nib. Three nibs, one hand: LIGHT for words set large, REGULAR for
      reading, BOLD for the one word that must weigh more. Nothing is
      synthesised — a weight the pen cannot draw is not drawn.

      NAMES are not set in it. A room's name, the wordmark, a section's
      numeral — the headlines — are woven in the CODA HAND, the Order's own
      letters (alphabet.js / devanagari.js), by coda-type.js. The hand is
      uppercase and made of the weave's eight tiles; it is for names, not
      sentences. Sentences, however large, are Hershey light.

      No ribbon. The coda letters stand apart — nothing is strung through
      their waists; a numeral is not threaded to its neighbour. The letters
      are the weave; they need no thread to belong to it.

   2. NO RULES. No hairline divides the page — not under the running head,
      not between rows of the till, not around the apparatus, not beside a
      pull-quote. The old sheet drew every one of them from `--rule`, so the
      token goes transparent and they go with it; the boxes that were ruled
      by name are unruled here by name. Where a division is ESSENTIAL it is a
      short kolam — `.kdiv`, drawn by kolam-rule.js, mirror-symmetric, quiet —
      and nowhere else. Separation is otherwise air.

      A field has no frame: it sits on a row of PULLI — the dots a kolam is
      drawn on — and on focus the dots join into the line. A control has no
      outline: the primary is the line closed (solid ink, paper text), the
      secondary is a word. A photograph has no frame on the black ground; a
      plotted sheet on the white ground keeps its own paper edge because a
      white sheet on white paper would otherwise not exist.

   3. SYMMETRY, chosen. The kolam dividers are mirror-symmetric; the sections
      keep their left edge. Symmetry is spent where a thing is a figure, not
      where a thing is read.
============================================================================ */

/* ─── The hand ─────────────────────────────────────────────────────────── */
@font-face { font-family: 'KALA Hershey'; src: url('/fonts/kala-hershey-light.woff2?v=2')   format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'KALA Hershey'; src: url('/fonts/kala-hershey-regular.woff2?v=2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'KALA Hershey'; src: url('/fonts/kala-hershey-bold.woff2?v=2')    format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --hand: 'KALA Hershey', 'Helvetica Neue', Arial, sans-serif;
  /* every voice the old sheet had is the same hand now */
  --serif: var(--hand);
  --deva:  var(--hand);
  --mono:  var(--hand);
  --ui:    var(--hand);
  /* the rules go transparent — the dividers were all drawn from these */
  --rule:   transparent;
  --rule-2: transparent;
  /* the corner of a filled control: the line closed */
  --r: 999px;
  /* the pulli under a field, and the line they become */
  --pulli: radial-gradient(circle, currentColor 1px, transparent 1.35px);
}

html { font-size: 22px; }
@media (max-width: 560px) { html { font-size: 19.5px; } }

body {
  font-family: var(--hand);
  /* Hershey's x-height is two thirds of its cap — tall — so it reads a size
     larger than the serif did at the same rem. A hair smaller, more leading. */
  font-size: .95rem; line-height: 1.72;
  font-feature-settings: normal; font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* a nib has no italic and no bold of its own; the slant may be synthesised
     (the plotter slants by shear too — Hershey cut obliques that way) but a
     fake bold smears the line, so the weight never is */
  font-synthesis: style;
}
/* tracked, uppercased, small: the old sheet's small-caps voice. A monoline
   sans has no small caps to fake, so the register is carried by size and
   tracking instead of by variant. Lowercase-into-small-caps becomes caps. */
.page-nav .nav-right a, #chime-toggle, .page-nav .logo,
.sec-label, .hero .label, .hero .where, .colophon h3, .colophon-cell .k,
.dest-label, .sit-sub, .gtile .ph, .colophon-vocab .cap, .foot-links,
.stretch-mat, .cc-t, .bz-card .price small, .bz-facts li span:first-child,
.press-btn, .cta, .dest-btn, .day-nav button, .ghost {
  font-variant: normal !important; text-transform: uppercase !important;
}
.foot-links { letter-spacing: .08em; font-size: .72rem; }
.sec-label { letter-spacing: .22em; font-size: .68rem; }
/* emphasis: the thick pen, never a faux bold */
b, strong, .lead b, .cart-total .cart-what, .cart-total .cart-price,
.anatomy .part .what, .press-readout b, .day-head .day-title b, .colophon-note b,
.hero .sky-line b, .bz-law b, .till .t-row.grand { font-weight: 600; }
/* the oblique is the second voice; kept, but a touch lighter in colour was
   never the law — same ink */
em, i, .lead em, .hero p, .pull, .press-readout, .press-cap, .gcap, .cart-empty,
.dest-note, .pay-note, .colophon-note, .foot, .sit-big, #c-words, .day-head .day-title,
.stretch-inr, .eq small { font-style: italic; }
.eq { font-size: .9rem; letter-spacing: .02em; }

/* ─── Headlines: sentences in the light nib, names in the coda hand ──────── */
h1, h2, h3, .hero h1, .section > h2, .bz-hero h1, .bz-item h1, .bz-card h2 {
  font-family: var(--hand); font-weight: 300; letter-spacing: .005em;
}
.hero h1 { font-size: clamp(2rem, 5.4vw, 3.3rem); line-height: 1.18; }
.section > h2 { font-size: clamp(1.35rem, 2.9vw, 1.9rem); line-height: 1.28; }
.section h2 em, .hero h1 em { font-style: italic; }

/* a NAME woven in the coda hand. The text stays in the DOM for readers and
   machines (.coda-text); the drawing carries it for the eye. --coda-h is the
   height of the letters in px; the SVG is sized from it by coda-type.js. */
[data-coda] { --coda-h: 34px; display: inline-block; line-height: 0; color: var(--ink); }
[data-coda] .coda-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-coda] svg.coda-word { display: block; max-width: 100%; height: auto; }
.hero .label[data-coda], .bz-hero .label[data-coda] { --coda-h: 40px; margin-bottom: .9rem; }
.bz-wordmark[data-coda] { --coda-h: 20px; }
.sec-label .numeral[data-coda] { --coda-h: 18px; display: block; margin-bottom: .45rem; }
.sec-label .sec-name[data-coda] { --coda-h: 20px; display: block; }
@media (max-width: 860px) { .sec-label .numeral[data-coda], .sec-label .sec-name[data-coda] { display: inline-block; margin: 0 .6rem 0 0; vertical-align: middle; } }
@media (max-width: 700px) {
  .hero .label[data-coda], .bz-hero .label[data-coda] { --coda-h: 30px; }
  .bz-wordmark[data-coda] { --coda-h: 17px; }
}
/* देवनागरी, inline, in the Order's own hand — the one script Hershey never cut */
.coda-deva { display: inline-block; vertical-align: -.32em; line-height: 0; color: inherit; }
.coda-deva svg { display: block; height: 1.45em; width: auto; }

/* ─── No rules ─────────────────────────────────────────────────────────── */
hr { display: none; }
/* everything the old sheet ruled by name — boxes, rows, frames, quotes.
   One list, so a thing added later to the old sheet is caught by the token
   and a thing ruled by hand is caught here. */
.page-nav, .section, .foot, .colophon-inner, .colophon, .sec-label,
.press-frame, .word-split, .word-half, .word-half + .word-half, .eq, .pull,
#t-frame, .tally, .tally .cell + .cell, .stretch-grid, .stretch, .anatomy, .anatomy .part,
.roll, .toc, .gtile, .entry, .cart-row, .cart-row:first-child, .dest-row,
#cart-body, #payment, .sit-room, .pay-panel, .pay-qr svg, .press-note, #t-canvas,
.bz-facts, .bz-facts li, .bz-law, .bz-loomfloor, .bz-photo, .bz-take,
.m-q, .m-q:last-of-type, .wk-mine, .lm-ledger, .lm-ledger div, .lm-keep, .lm-bazaar, .lm-sell,
.lm-plate, .lm-sheet, .lm-dials fieldset, .lm-dials .co-in, .leafwrap .leafcv, .o-item, .o-item canvas, .o-status, .o-stretch, .order, .draft,
.pub-row, .study, .piece-row, .correction, .authorship, .remembered-note, .against, .ev, .ev-row,
.record, .charter blockquote, .till, .till .t-row.grand, #cy-room, .m-words, .m-pill,
.cart-thumb, .charter, #c-bar {
  border: 0 !important; box-shadow: none !important;
}
/* the boxes were white-on-white with a rule; without the rule they are
   simply the page — so they lose their inset and their radius too */
.press-frame, .word-split, .eq, .colophon-inner, #t-frame, .tally, .stretch-grid,
.anatomy, .roll, .toc, #cart-body, #payment, .sit-room { border-radius: 0 !important; overflow: visible !important; }
.colophon-inner, .toc { padding-inline: 0 !important; }
#cart-body > * { padding-inline: 0 !important; }
.anatomy .part, .entry { padding-inline: 0 !important; }
.pull { padding-left: 0 !important; }
.eq { padding-left: 0 !important; }
/* the ruled list keeps its rhythm by air, not by lines */
.bz-facts li, .cart-row, .anatomy .part, .ev-row, .piece-row { padding-block: .6rem; }
/* the press note and the sheet in the pouch are PICTURES OF PAPER — a white
   sheet on white paper needs its edge or it is not there. The edge is the
   nib, and it is the only closed rectangle on the leaf. */
.press-note, #t-canvas, .cart-thumb, .gtile { border: 1px solid var(--ink) !important; border-radius: 0 !important; }
/* on the black market the photographs and the weave panels are their own
   edge: the frame goes */
.bz-photo { border: 0 !important; }
/* the progress bar in the sitting: a pulli row that fills into a line */
#c-bar { background: var(--pulli) left center / 7px 3px repeat-x !important; height: 3px !important; }
#c-fill { background: currentColor; height: 100%; }
/* the running head floats on the paper with no line under it */
.page-nav { background: var(--paper); }
.page-nav .nav-right a, #chime-toggle { border-bottom: 0 !important; padding-bottom: 0; }
.page-nav .nav-right a[aria-current="page"], .page-nav .nav-right a:hover, #chime-toggle:hover {
  color: var(--ink); text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px;
}
#chime-toggle.on { color: var(--ink); text-decoration: underline; text-underline-offset: .35em; }

/* ─── The kolam divider ────────────────────────────────────────────────────
   Where a page MUST divide, it divides with a short weave — mirror-symmetric,
   centred, one or two rows of tiles, drawn by kolam-rule.js from the page's
   own seed. It is an ornament that is also the grammar; nothing else is. */
.kdiv { display: block; width: min(100%, 14rem); margin: clamp(1.8rem, 4vh, 3rem) auto; color: var(--ink); pointer-events: none; }
.kdiv.wide { width: min(100%, 24rem); }
.kdiv.quiet { width: min(100%, 8rem); }
.kdiv svg { display: block; width: 100%; height: auto; }
/* the section numeral no longer rules its column: the margin is a column of
   air with a woven figure in it */
.sec-label { padding-right: 0 !important; }

/* ─── Fields: a row of pulli, then the line ──────────────────────────────── */
.co-in, textarea#carry, .bz-form .co-in, .lm input[type=number], .lm input[type=text], .lm textarea,
.choose input, .cy-in input, .pub-row input, .tok input, .o-item.drawn input,
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=url], input[type=date], input[type=time], input[type=datetime-local], textarea, select {
  font-family: var(--hand) !important; font-size: 1rem;
  background-color: transparent !important; color: inherit;
  border: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important;
  padding: .5rem 0 .55rem !important;
  background-image: var(--pulli) !important; background-repeat: repeat-x !important;
  background-position: left bottom !important; background-size: 7px 3px !important;
  transition: background-size .25s;
}
.co-in:focus, textarea#carry:focus, input:focus, textarea:focus, select:focus {
  /* the dots join: a line is drawn through the pulli */
  background-image: linear-gradient(currentColor, currentColor) !important;
  background-size: 100% 1px !important;
}
.co-in::placeholder, textarea::placeholder, input::placeholder { color: var(--ink-3); font-style: italic; opacity: 1; }
select { appearance: none; -webkit-appearance: none; padding-right: 1.2rem !important; }

/* ─── Controls: the line closed, or a word ──────────────────────────────── */
.press-btn, .cta, .dest-btn, .day-nav button, button.cta, .ghost, .press-btn.ghost, .cta.ghost,
#checkout button[type="submit"], #checkout .cta, .cta.pay, .wk-sheets button, .lm-chips button,
.m-hand button, .lm-swatches button, .acts button, button.kbtn {
  font-family: var(--hand) !important; font-size: .7rem !important; letter-spacing: .12em; font-weight: 400;
  text-transform: uppercase; border: 0 !important; border-radius: 999px !important;
  background: var(--ink); color: var(--paper); padding: .55rem 1.15rem; min-height: 0;
  opacity: 1; box-shadow: none !important; cursor: pointer;
  transition: opacity .2s, background .2s, color .2s;
}
.press-btn:hover, .cta:hover, .dest-btn:hover, .day-nav button:hover, button.cta:hover,
#checkout button[type="submit"]:hover, #checkout .cta:hover { background: var(--ink); color: var(--paper); opacity: .78; }
/* the quiet control is a WORD — no box, no rule; its target is the ::after band */
.ghost, .press-btn.ghost, .cta.ghost, .dest-btn, .day-nav button, .wk-sheets button, .lm-chips button, .m-hand button, .lm-swatches button, .acts button {
  background: transparent !important; color: var(--ink) !important; padding-inline: .4rem;
  text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 1px; text-decoration-color: transparent;
}
.ghost:hover, .press-btn.ghost:hover, .cta.ghost:hover, .dest-btn:hover:not(.on), .day-nav button:hover:not(:disabled),
.wk-sheets button:hover, .lm-chips button:hover, .m-hand button:hover, .lm-swatches button:hover, .acts button:hover { text-decoration-color: var(--ink); opacity: 1; }
/* chosen: the line closed */
.press-btn.on, .dest-btn.on, .press-papers .press-btn.on, .wk-sheets button.on, .lm-chips button.on, .m-hand button.on, .lm-swatches button.on, .dest-btn.on:hover {
  background: var(--ink) !important; color: var(--paper) !important; text-decoration: none;
}
.press-btn:disabled, .cta:disabled, .day-nav button:disabled, button:disabled { opacity: .3 !important; cursor: default; }
.press-btn::after, .cta::after, .dest-btn::after, .day-nav button::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }
.cart-x { border-radius: 999px; }
.cart-x:hover { background: transparent; color: var(--ink); }
/* the till's submit stays the loudest thing on the page: same pill, larger */
#checkout button[type="submit"], #checkout .cta, .cta.pay { font-size: .8rem !important; padding: .8rem 1.8rem; letter-spacing: .14em; }

/* ─── The black market, restated in the same terms ──────────────────────── */
.bz-form .co-in, .lm input, .lm textarea { color: #fff; }
/* the Loom: the sheet is the one white thing on the page — it needs neither a
   frame nor a shadow (a shadow is grey, and grey is not in the palette) */
.lm-sheet svg { box-shadow: none !important; }
.lm-sheet { padding: 2% 0 !important; }
.lm-words, .lm-recipe, .lm-dials textarea.lm-words, .lm-words::placeholder, .m-words, .sit-sub b, .cart-what .mono, .colophon-cell .v { font-family: var(--hand) !important; }
.lm-dials fieldset { padding-top: .4rem !important; margin-bottom: 1.2rem !important; }
.lm-dials legend { margin-bottom: .5rem; }
.bz-facts li span:first-child { letter-spacing: .14em; }
.bz-card .line, .bz-hero p, .bz-item .lede { font-style: normal; }

/* the press's cycle cards: equal columns regardless of what a date field
   thinks its minimum width is (1fr alone lets min-content win and squeezes
   the card with the shortest control into a ribbon of single words) */
.cy-grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; }
@media (min-width: 560px)  { .cy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (min-width: 1180px) { .cy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.cy-in input, .choose input { min-width: 0; width: 100%; }

/* ─── Narrow leaves ────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .sec-label { border-bottom: 0 !important; padding-bottom: 0; }
}