/* kg-base.css -- the Kurdography "Bazaar Ledger" base sheet (UI rebuild, Phase 0).
 *
 * Role: reset, ledger primitives, form controls, chart/icon helpers, the RTL
 * mirror block and the type scale. Linked AFTER theme.css, components.css and
 * kg-tokens.css, so where it repeats a legacy selector at equal specificity it wins
 * by source order (every such place is marked "beats theme.css").
 *
 * Rules of the sheet: logical properties only (inline-size, block-size,
 * inset-inline-*, margin-inline-* ...), no box-shadow, radii limited to
 * 0 / 3px / 4px / 999px / 50%, every colour and font read from kg-tokens.css.
 */

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-latin);
  font-size: var(--fs-body);
  line-height: 1.55;
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; box-shadow: none; } /* beats theme.css l.299 ring */

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-num: 0ms; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.icon-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

/* ---------- numbers, Latin runs, display and caption text ---------- */

.num {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-weight: 600;
}
td.num, th.num { display: table-cell; } /* table cells keep their layout; .num only isolates the digits */

.lat {
  font-family: var(--f-num);
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.money {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-weight: 700;
  letter-spacing: -.01em;
}
.money.xl { font-size: var(--fs-figure); line-height: 1; letter-spacing: -.025em; font-weight: 800; }
.money.l { font-size: 22px; line-height: 1.1; }
.money.m { font-size: 15px; }
.money.xl small {
  font-family: var(--f-num);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-inline-start: 6px;
  vertical-align: baseline;
}

/* font-family comes from the typography group at the end of the sheet */
.disp { font-weight: 700; line-height: 1.3; }
.cap { font-size: 12px; line-height: 1.5; color: var(--ink-3); font-weight: 500; }

.up { color: var(--profit); }
.dn { color: var(--loss); }
.sf { color: var(--saffron-text); }

/* ---------- chips and stamps ---------- */

.chip {
  display: inline-block;
  font-family: var(--f-num);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding-block: 1px;
  padding-inline: 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  direction: ltr;
  unicode-bidi: isolate;
  line-height: 1.5;
  vertical-align: middle;
}
.chip.buy { color: var(--profit); }
.chip.sell { color: var(--loss); }
.chip.cur { color: var(--ink-2); background: var(--paper-2); }
.chip.warn { color: var(--loss); }

/* stamps: at least 26px tall, never rotated past 4 degrees; .flat is the unrotated list variant */
.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 26px;
  padding-inline: 10px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  transform: rotate(-4deg);
  color: var(--loss);
  position: relative;
  white-space: nowrap;
  letter-spacing: 0;
}
.stamp::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: .5;
}
.stamp.ok { color: var(--profit); }
.stamp.wait { color: var(--saffron-text); }
.stamp.ink { color: var(--ink); }
.stamp.flat { transform: none; min-block-size: 24px; font-size: 11px; padding-inline: 8px; }
.stamp.flat::after { display: none; }

/* ---------- seal and avatar ---------- */

.seal {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  position: relative;
  flex: none;
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 700;
}
.seal::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  opacity: .5;
}

.ava {
  inline-size: 40px;
  block-size: 40px;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background: var(--paper-3);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-2);
  flex: none;
}

/* ---------- section rule, ledger row, slip ---------- */

.rule { display: flex; align-items: center; gap: 10px; margin-block: 12px 4px; }
.rule b { font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.rule i { inline-size: 36px; block-size: 9px; background: var(--kilim); background-size: 18px 9px; flex: none; }
.rule s { flex: 1; block-size: 1px; background: var(--hair); text-decoration: none; }
.rule small { font-family: var(--f-num); font-size: 12px; font-weight: 600; color: var(--ink-3); direction: ltr; unicode-bidi: isolate; }
.rule a { font-size: 12px; font-weight: 700; color: var(--saffron-text); }

.lr {
  display: grid;
  align-items: center;
  gap: 8px;
  padding-block: 8px;
  min-block-size: 44px;
  border-block-end: 1px solid var(--hair);
}
.lr:last-child { border-block-end: 0; }

.slip {
  border: 1px solid var(--hair-2);
  background: var(--paper-2);
  position: relative;
  padding-block: 12px 8px;
  padding-inline: 12px;
  margin-block: 6px;
}
.slip::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 6px;
  background: var(--kilim);
  background-size: 12px 6px;
}

/* ---------- buttons, pill, toggle ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-block-size: 48px;
  padding-block: 0;
  padding-inline: 16px;
  background: var(--saffron);
  color: var(--on-saffron);
  font-size: var(--fs-body);
  font-weight: 700;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  overflow: visible;
  isolation: auto;
  block-size: auto; /* beats theme.css l.446 .btn: height, overflow: hidden, isolation: isolate */
}
.btn::before { content: none; } /* beats theme.css l.473 hover sheen */
.btn:hover { filter: brightness(.95); }
.btn:active { filter: brightness(.9); }
.btn.ghost {
  min-block-size: 44px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hair-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 32px;
  padding-inline: 12px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--saffron);
  color: var(--on-saffron);
  font-weight: 700;
  font-size: 13px;
}

.tog {
  inline-size: 40px;
  block-size: 24px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  position: relative;
  flex: none;
  background: var(--paper-2);
}
.tog::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 15px;
  block-size: 15px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform var(--t-fast) var(--ease);
}
.tog.on { background: var(--saffron); }
.tog.on::after { transform: translateX(16px); }

/* ---------- delta chip ---------- */

.delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-block-size: 26px;
  padding-inline: 9px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.delta.up { color: var(--profit); background: var(--profit-soft); }
.delta.dn { color: var(--loss); background: var(--loss-soft); }

/* ---------- gauge and range ruler ---------- */

/* the gauge follows html[dir]: the fill and the limit ticks are placed with inset-inline-start */
.gauge {
  position: relative;
  block-size: 12px;
  margin-block: 8px 0;
  background: var(--paper-3);
  border: 1px solid var(--hair-2);
}
.gauge > i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--ink);
  opacity: .75;
  transition: inline-size var(--t-num) var(--ease);
}
.gauge > i.kil { background: var(--kilim); background-size: 20px 10px; opacity: 1; }
.gauge > s { position: absolute; inset-block: -3px; inline-size: 1.5px; background: var(--ink); text-decoration: none; }
.gl {
  position: relative;
  block-size: 16px;
  font-family: var(--f-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}
.gl span { position: absolute; inset-block-start: 0; transform: translateX(-50%); direction: ltr; }

/* the ruler is always LTR; low is the inline start, high the inline end */
.ruler { position: relative; block-size: 42px; margin-block: 8px 0; direction: ltr; }
.ruler .ln { position: absolute; inset-inline: 0; inset-block-start: 22px; block-size: 1px; background: var(--hair-2); }
.ruler .tk { position: absolute; inset-block-start: 18px; inline-size: 1px; block-size: 9px; background: var(--hair-2); }
.ruler .now { position: absolute; inset-block-start: 15px; inline-size: 3px; block-size: 15px; background: var(--saffron); border: 1px solid var(--ink); }
.ruler .lb {
  position: absolute;
  inset-block-start: 27px;
  font-family: var(--f-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
}
.ruler .lb.c { inset-block-start: 0; color: var(--ink); font-weight: 800; font-size: 12.5px; }

/* ---------- form controls ---------- */

/* Text-like controls only: checkbox, radio, range, file, colour and buttons keep their native box.
   No :where() here on purpose: input:not(...) is (0,1,1), equal to the theme.css l.553 list
   (input[type="text"], ..., input:not([type])), and this sheet comes later, so it wins. */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"], [type="image"], [type="button"], [type="submit"], [type="reset"]), /* beats theme.css l.553 */
select,
textarea {
  min-block-size: 44px;
  padding-inline: 12px;
  background-color: var(--paper); /* not the shorthand: select keeps its theme.css l.606 caret image */
  color: var(--ink);
  border: 1px solid var(--hair-2);
  border-radius: 4px;
  box-shadow: none; /* beats theme.css l.595 input[aria-invalid] ring */
  font: inherit;
}
textarea { min-block-size: 96px; } /* the 44px floor is for single-line fields */
select { padding-inline-end: 32px; } /* room for the caret; the padding-inline above would reset theme.css l.613 */
input[type="number"] { font-family: var(--f-num); font-variant-numeric: tabular-nums; } /* font: inherit above beats theme.css l.604 */
input:focus, select:focus, textarea:focus { border: 1.5px solid var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; box-shadow: none; } /* beats theme.css l.582 */

.field { display: flex; flex-direction: column; gap: 6px; }
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: var(--loss); }
.field-error { font-size: 12px; line-height: 1.5; color: var(--loss); }

/* ---------- charts and icons ---------- */

svg.chart { direction: ltr; overflow: visible; font-family: var(--f-num); }

.ico {
  inline-size: 22px;
  block-size: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- forced colours ---------- */

/* Placed after the primitives on purpose: these system-colour values must win by source
   order. Hairlines and fills drawn with a background would otherwise vanish. */
@media (forced-colors: active) {
  .btn, .pill, .chip, .stamp, .delta, .seal, .slip, .tog, .gauge, input, select, textarea { border-color: CanvasText; }
  .rule s, .ruler .ln, .ruler .tk, .gauge > s, .tog::after { background: CanvasText; }
  .tog.on, .gauge > i, .ruler .now { background: Highlight; }
}

/* ---------- RTL: html[dir] decides, never a class ---------- */

html[dir="rtl"] .icon-dir, html[dir="rtl"] .capp-flip { transform: scaleX(-1); }
html[dir="rtl"] .tog.on::after { transform: translateX(-16px); }
html[dir="rtl"] .gl span { transform: translateX(50%); }

/* ---------- typography and type scale ---------- */

:root:lang(ckb), :root:lang(ar) { --f-ui: var(--f-body); }
:root:lang(ku), :root:lang(en) { --f-ui: var(--f-latin); }
body { font-family: var(--f-ui, var(--f-latin)); }
:root:lang(ckb) body, :root:lang(ar) body { line-height: 1.7; }
h1, h2, .disp { font-family: var(--f-display); }

.t-hero, .t-display, .t-title { font-family: var(--f-display); font-weight: 700; line-height: 1.3; }
.t-hero { font-size: var(--fs-hero); }
.t-display { font-size: var(--fs-display); }
.t-title { font-size: var(--fs-title); }
.t-section { font-size: var(--fs-section); font-weight: 700; line-height: 1.5; }
.t-small { font-size: var(--fs-small); line-height: 1.4; }
.t-caption { font-size: var(--fs-caption); font-weight: 500; line-height: 1.5; }
.t-micro { font-size: var(--fs-micro); line-height: 1.5; }