/* SkyTrade prototype styles — reference implementation of tokens.css. No framework.
   The rules of this brand, in code:
     · no green, no red — direction and outcome are a glyph plus a word
     · no shadows — grouping is rule weight (1px inside a group, 2px between)
     · every figure is mono, tabular, right-aligned in its column
     · brass appears only on something anchored or verified */
@import url("./fonts/fonts.css");
@import url("./family/family-tokens.css");
@import url("./family/family.css");
@import url("./tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-body);
  -webkit-font-smoothing: antialiased;
  --sky-max: var(--page-max); --sky-pad: var(--gutter);
}
:is(html[lang="fa"], html[lang="ar"]) body { font-family: var(--font-fa-body); line-height: var(--lh-body-fa); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: -0.012em; }
:is(html[lang="fa"], html[lang="ar"]) :is(h1, h2, h3) { font-family: var(--font-fa-display); font-weight: 600; line-height: var(--lh-display-fa); letter-spacing: 0; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0; max-width: var(--measure); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, svg { display: block; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.92em; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ch { font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink-3); }
:is(html[lang="fa"]) .ch { letter-spacing: 0; text-transform: none; font-family: var(--font-fa-body); font-size: var(--fs-cap); }
/* Plex Mono carries no Arabic. Persian text inside a mono run falls back glyph by glyph and the monospaced
   advance plus tracking pulls joined letters apart ("هم‌گرایی" prints as "هم‌گرا یی"). So in Persian the body face
   takes over everywhere the mono face would otherwise apply, and tracking goes to zero. The mono face survives
   only on Latin technical tokens, which carry .ltr — symbols, timestamps, ids, hashes, prices. */
:is(html[lang="fa"], html[lang="ar"]) :is(.mono, .num, .fmt, .out, .dir, .ref, .protonote, .reg th, .reg .t, .reg .n, .fig b, .four b, .tile30 b, .ifthen .k, .anchorband .root):not(.ltr) {
  font-family: var(--font-fa-body); letter-spacing: 0; font-variant-numeric: normal;
}
:is(html[lang="fa"], html[lang="ar"]) .reg th { text-transform: none; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.lede { font-size: var(--fs-lede); color: var(--ink-2); }

/* ---------- the seal ---------- */
/* The seal is drawn through <use>, and CSS selectors do not cross that shadow boundary — styling `.seal circle`
   left a solid black dot. Custom properties and currentColor DO inherit into it, so the fill travels as a variable
   and the stroke as the element's colour. */
.seal { width: 18px; height: 18px; flex: none; --seal-fill: var(--brass-fill); color: var(--ink); }
.seal--lg { width: 28px; height: 28px; }
.seal--off { --seal-fill: none; }

/* ---------- header ---------- */
.hdr { border-bottom: 2px solid var(--rule); background: var(--bg); position: sticky; top: 0; z-index: 30; }
.hdr__in { display: flex; align-items: center; gap: var(--s-5); min-height: 64px; }
.brand { display: inline-flex; text-decoration: none; direction: ltr; }
.brand img { height: 30px; width: auto; }
.hdr__nav { display: flex; gap: 0; align-self: stretch; }
.hdr__nav a { display: inline-flex; align-items: center; padding: 0 12px; text-decoration: none; font-size: var(--fs-sm); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.hdr__nav a:hover { border-bottom-color: var(--line-strong); }
.hdr__nav a[aria-current="page"] { border-bottom-color: var(--ink); font-weight: var(--w-strong); }
.hdr__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-2); }
.menu { position: relative; display: none; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--hit-target); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-2); cursor: pointer; font-size: var(--fs-sm); }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 230px; background: var(--surface); border: 1px solid var(--line-strong); display: grid; padding: 4px; }
.menu__panel a { min-height: var(--hit-target); display: flex; align-items: center; padding: 0 12px; text-decoration: none; font-size: var(--fs-sm); }
.menu__panel a:hover { background: var(--surface-2); }
@media (max-width: 900px) { .hdr__nav, .hdr__end .sky-wallet, .hdr__end .sky-price { display: none; } .menu { display: block; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--hit-target); padding: 0 18px;
  border: 1px solid var(--ink); border-radius: var(--r-2); background: var(--ink); color: var(--on-ink);
  font-size: var(--fs-sm); font-weight: var(--w-strong); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease); }
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--quiet:hover { background: var(--surface-2); }
.btn--sm { min-height: 34px; padding: 0 12px; font-size: var(--fs-cap); }

/* ---------- sections ---------- */
.sec { padding-block: clamp(40px, 6vw, 72px); border-bottom: 2px solid var(--rule); }
.sec__head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.sec__head p { color: var(--ink-2); }

/* ---------- the register table ---------- */
.reg { font-size: var(--fs-sm); }
.reg caption { text-align: start; padding-bottom: var(--s-3); color: var(--ink-3); font-size: var(--fs-cap); }
.reg th { text-align: start; font-weight: var(--w-strong); font-size: var(--fs-mono-xs); font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink-3);
  padding: 8px 9px; border-bottom: 2px solid var(--rule); background: var(--bg-2); white-space: nowrap; }
.reg td { padding: 9px 9px; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.reg tr:last-child td { border-bottom: 0; }
.reg .n, .reg th.n { text-align: end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reg .t { font-family: var(--font-mono); font-size: 0.86em; color: var(--ink-2); white-space: nowrap; direction: ltr; }
.reg .sym { font-weight: var(--w-strong); white-space: nowrap; }
.reg tbody tr:hover { background: var(--surface-2); }
/* an anchored row is the only place brass appears in the table */
.reg tr.anchored td:first-child { box-shadow: inset 3px 0 0 var(--brass-fill); }
[dir="rtl"] .reg tr.anchored td:first-child { box-shadow: inset -3px 0 0 var(--brass-fill); }
.reg tr.void td { color: var(--ink-3); font-style: italic; }
.regwrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); }
@media (max-width: 720px) { .reg { font-size: var(--fs-cap); } .reg :is(td, th) { padding: 8px; } }

/* direction and outcome: a glyph plus a word, never a colour */
.dir { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; font-family: var(--font-mono); font-size: 0.86em; }
.dir b { font-style: normal; font-weight: 700; }
.out { display: inline-block; font-family: var(--font-mono); font-size: 0.82em; letter-spacing: 0.02em;
  padding: 2px 7px; border: 1px solid var(--line-strong); border-radius: var(--r-1); white-space: nowrap; }
.out--open { border-style: dashed; color: var(--ink-3); }
.out--objective { border-width: 2px; border-color: var(--ink); font-weight: 600; }
.out--none { border: 0; padding-inline: 0; color: var(--ink-3); }

/* ---------- figures ---------- */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); }
.fig { padding: var(--s-4) var(--s-5); border-inline-end: 1px solid var(--line); }
.fig:last-child { border-inline-end: 0; }
.fig b { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-figure); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
.fig .ch { display: block; margin-bottom: 6px; }
.fig .den { color: var(--ink-3); font-size: var(--fs-cap); margin-top: 4px; display: block; }
@media (max-width: 720px) { .fig { border-inline-end: 0; border-bottom: 1px solid var(--line); } .fig:last-child { border-bottom: 0; } }

/* the four outcome counts — all four, always */
.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); }
.four > div { padding: var(--s-4); border-inline-end: 1px solid var(--line); }
.four > div:last-child { border-inline-end: 0; }
.four b { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.75rem; font-weight: 500; line-height: 1.1; }
@media (max-width: 620px) { .four { grid-template-columns: 1fr 1fr; } .four > div:nth-child(2n) { border-inline-end: 0; } .four > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* best and worst 30 days — one tile, by construction */
.tile30 { border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); }
.tile30 > header { padding: var(--s-3) var(--s-4); border-bottom: 2px solid var(--rule); background: var(--bg-2); }
.tile30 > div { display: grid; grid-template-columns: 1fr 1fr; }
.tile30 section { padding: var(--s-4); border-inline-end: 1px solid var(--line); }
.tile30 section:last-child { border-inline-end: 0; }
.tile30 b { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 500; }
@media (max-width: 560px) { .tile30 > div { grid-template-columns: 1fr; } .tile30 section { border-inline-end: 0; border-bottom: 1px solid var(--line); } .tile30 section:last-child { border-bottom: 0; } }

/* ---------- key/value sheet ---------- */
.kv { border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); }
.kv > div { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: var(--s-4); padding: 11px var(--s-4); border-bottom: 1px solid var(--line); align-items: baseline; }
.kv > div:last-child { border-bottom: 0; }
.kv dt, .kv dd { margin: 0; min-width: 0; }
/* a long mono key (`same_bar_stop_and_objective`) must wrap inside its column, not print over the value */
.kv dt, .kv dd { overflow-wrap: anywhere; }
@media (max-width: 620px) { .kv > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- the conditional scenario frame ---------- */
.ifthen { border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); }
.ifthen > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4); border-bottom: 1px solid var(--line); }
.ifthen > div:last-child { border-bottom: 0; }
.ifthen .k { font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.ifthen .ref { font-family: var(--font-mono); font-size: 0.86em; border-bottom: 1px dotted var(--line-strong); cursor: help; }

/* ---------- the anchor band (the one inverted surface) ---------- */
.anchorband { background: var(--ink-panel); color: var(--on-ink); border-radius: var(--r-2); padding: var(--s-5); display: grid; gap: var(--s-3); }
.anchorband .ch { color: var(--on-ink); opacity: .72; }
.anchorband a { color: inherit; }
.anchorband .root { font-family: var(--font-mono); font-size: var(--fs-cap); overflow-wrap: anywhere; opacity: .9; }
.anchorband .seal { color: var(--on-ink); }

/* ---------- notes ---------- */
.note { border-inline-start: 3px solid var(--rule); padding-inline-start: var(--s-4); color: var(--ink-2); }
.note--brass { border-inline-start-color: var(--brass-fill); }
.protonote { margin-top: var(--s-5); font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.7; color: var(--ink-3); border: 1px dashed var(--line-strong); padding: 10px 12px; max-width: none; }

/* ---------- footer ---------- */
.foot { padding-block: var(--s-6); }
.foot__in { display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: space-between; align-items: flex-start; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.foot__links a { min-height: var(--hit-target); display: inline-flex; align-items: center; text-decoration: none; font-size: var(--fs-sm); }
.foot__links a:hover { text-decoration: underline; }

/* ---------- landing hero: the table IS the hero ---------- */
.hero { padding-block: clamp(32px, 5vw, 64px) clamp(32px, 5vw, 56px); border-bottom: 2px solid var(--rule); }
.hero h1 { max-width: 20ch; }
.hero .lede { margin-top: var(--s-4); max-width: 56ch; }
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); align-items: center; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); gap: var(--s-6); align-items: end; }
/* `1fr` lets a wide grid item's min-content push the column past the page; minmax(0,1fr) does not. */
.hero__grid > * { min-width: 0; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; } }