/* ============================================================================
   graphite.css — THE BORDERLESS CARVE (site-wide layer, load after page CSS).
   Carbon surfaces separate by tone, light-catch and shadow — never by lines.
   Tables breathe with zebra stripes. Inputs are pressed wells. The level-line
   signature closes page titles with the mark's gold full stop.
   ============================================================================ */
:root{
  --bg-0:#0A0A0B; --bg-band:#0A0A0B; --plot:#101012; --bg-rail:#111214;
  --bg-1:#17181B; --bg-2:#1D1F23; --bg-3:#24262B; --bg-4:#2B2E34;
  --border:transparent; --border-hi:transparent; --border-hi2:transparent;
  --line:transparent; --line-2:transparent;
  --page-glow:transparent;
  --accent:#FF7A1A; --accent-bg:rgba(255,122,26,.13); --accent-line:rgba(255,122,26,.5);
  --carve-hi:rgba(255,255,255,.045);
  --carve-sh:0 1px 2px rgba(0,0,0,.55);
}
body{background-image:none!important;}

/* ── Carved slabs instead of outlined boxes ──────────────────────────────── */
.panel,.card,.tile,.tablecard,.chart-box,.board-guide,.exp-block,.mod,.box,
.bsec,.calwrap,.stat-card,.kpi,.sec-card{
  background:var(--bg-1);
  box-shadow:inset 0 1px 0 var(--carve-hi), var(--carve-sh);
  border-radius:12px;
  border-color:transparent;
}

/* ── Tables: no borders anywhere, zebra + tone instead ───────────────────── */
table,thead,tbody,tfoot,tr,td,th{border:0!important;}
/* r90: zebra REMOVED. The reference separates rows with a hairline and
   nothing else; alternating fills read as noise once colour is reserved
   for deltas. Row separation is now --border-ink, the one honest hairline. */
tbody tr td{border-bottom:1px solid var(--border-ink)!important;}
tbody tr:last-child td{border-bottom:0!important;}
tbody tr{transition:background .14s ease;}
tbody tr:hover{background:rgba(255,122,26,.06);}
/* r90: table column headers are LABELS, not headings — Ibrahim's scoped
   exception to the >=800 header rule. h1/h2/h3 heroes still weigh >=800;
   a th is muted, light and sentence case, the way the reference sets it.
   The old 800/uppercase/.09em treatment was the single loudest non-
   LunarCrush tell in every table on the site. */
thead th{
  font-family:'Inter Tight',system-ui,sans-serif;
  font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--text-5,#7C8494);
}

/* ── Inputs and selects: pressed wells ───────────────────────────────────── */
input,select,textarea{
  background:var(--bg-2)!important;
  border:0!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5)!important;
  border-radius:8px!important;
  color:var(--text);
}
input::placeholder{color:var(--text-4);}

/* ── Headers never light, never thin ─────────────────────────────────────── */
h1{font-weight:800;color:var(--text);}
h2,h3{font-weight:700;color:var(--text);}

/* ── Level-line signature: brand line under page titles, gold full stop ──── */
.fa-levelline{position:relative;}
.fa-levelline::after{
  content:"";display:block;height:8px;width:60px;margin-top:12px;
  background:
    linear-gradient(var(--accent),var(--accent)) 0 50%/46px 3px no-repeat,
    linear-gradient(#F2B43C,#F2B43C) 52px 50%/8px 8px no-repeat;
}

/* ── Skeleton loading (replaces every "Connecting…" text site-wide) ──────── */
@keyframes fa-skel{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.fa-skel{
  display:block;height:12px;border-radius:6px;
  background:linear-gradient(90deg,var(--bg-2) 0px,var(--bg-3) 60px,var(--bg-2) 120px);
  background-size:200px 100%;
  animation:fa-skel 1.15s ease-in-out infinite;
}
.fa-skel + .fa-skel{margin-top:10px;}
.fa-skel.w40{width:40%}.fa-skel.w60{width:60%}.fa-skel.w80{width:80%}
.fa-skel-card{
  height:120px;border-radius:12px;
  background:linear-gradient(90deg,var(--bg-1) 0px,var(--bg-2) 120px,var(--bg-1) 240px);
  background-size:400px 100%;animation:fa-skel 1.3s ease-in-out infinite;
  box-shadow:inset 0 1px 0 var(--carve-hi), var(--carve-sh);
}
.fa-skel-card + .fa-skel-card{margin-top:12px;}

/* ── Interaction polish: everything clickable feels alive ────────────────── */
button,.tb-btn,.pill,.chip,.rail-opt,.filter-pill,.seg,.tab{transition:background .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease;}
button:active,.tb-btn:active{transform:translateY(1px);}

/* ── Scrollbars in the same voice ────────────────────────────────────────── */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:6px;border:2px solid var(--bg-0)}
::-webkit-scrollbar-thumb:hover{background:var(--bg-4)}
::-webkit-scrollbar-track{background:transparent}

/* NO-CAPS (2026-08-01): Ibrahim — no capital text anywhere. Kills every
   styled uppercase site-wide; literal-caps strings are handled per page. */
html body *{text-transform:none!important;font-variant-caps:normal!important}

/* ============================================================================
   r90 RESTRAINT RE-ASSERT (2026-08-29) — the LunarCrush/Messari pass.
   ---------------------------------------------------------------------------
   LOAD-ORDER WARNING, measured not assumed. On the market suite the head is
     tokens.css(25) → sitenav.css(26) → graphite.css(27) → typography-v2(28)
     → <style id="mk-css">(118)
   i.e. this file loads BEFORE the page's own inline <style>. A plain rule here
   LOSES to page CSS at equal specificity. Every rule below therefore carries an
   `html body` prefix and/or !important — the same pattern the pages already use
   at `html body table.mk-table thead th{...!important}`. Do not "tidy" the
   prefixes away; the cascade needs them.
   ============================================================================ */

/* ── One content width, centred. ──────────────────────────────────────────
   .mk-main set max-width:1600px but never margin-inline:auto, so all four
   market-suite pages pinned left and left 632px of dead space at 2560px.
   .cm (coin) had no clamp at all. Documented exceptions keep their own width:
   orderbook .main 1480px, screener .tablecard 1740px — both left alone.
   NOTE .cm is inert until coin.html actually links this file (Phase 2). */
html body main.mk-main,
html body .fa-main > .cm{
  max-width:var(--fa-content-max)!important;
  margin-inline:auto!important;
}

/* ── ONE card system: surface step, no outline, uniform radius + padding. ──
   Depth is the --bg-0 → --bg-1 step plus the inset light-catch. Never a border,
   never a drop shadow that reads as a lifted box. */
html body .panel, html body .card, html body .mk-card, html body .mk-wrap,
html body .rb, html body .mk-kpi, html body .bullbox{
  background:var(--bg-1)!important;
  background-image:none!important;      /* kills the old 180deg bg-1→bg-2 ramps */
  border:0!important;
  border-radius:var(--r-card,10px)!important;
  box-shadow:inset 0 1px 0 var(--carve-hi), var(--carve-sh);
}

/* ── The metric-card pattern (the reference's signature). ─────────────────
   Small muted sentence-case label on top · big bright tabular value below ·
   optional small delta · optional ONE-COLOUR thin bar. The reference's own bar
   is a green fill on a dark-RED track — a two-colour bar. Adapted to a neutral
   --bg-3 track so the fill is the only coloured thing in the cell. */
html body .fa-mlabel{
  display:block;font-family:var(--fa-ui);
  font-size:var(--fs-metric-label,12px);font-weight:500;
  color:var(--text-5,#7C8494);letter-spacing:0;text-transform:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html body .fa-mvalue{
  display:block;font-family:var(--fa-data);
  font-size:var(--fs-metric-value,20px);font-weight:600;
  color:var(--text);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;margin-top:5px;white-space:nowrap;
}
html body .fa-mdelta{
  display:block;font-family:var(--fa-data);font-size:12px;font-weight:500;
  color:var(--text-5,#7C8494);font-variant-numeric:tabular-nums;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html body .fa-mbar{
  display:block;height:3px;border-radius:2px;overflow:hidden;
  background:var(--bg-3);margin-top:9px;
}
html body .fa-mbar > i{display:block;height:100%;background:var(--green);}
html body .fa-mbar.is-down > i{background:var(--red);}
html body .fa-mbar.is-neutral > i{background:var(--text-5,#7C8494);}

/* ── Numerals: right-aligned, tabular, mono. Headers follow their column. ── */
html body td.num, html body th.num, html body .num,
html body .mk-num, html body .fa-mvalue, html body .fa-mdelta{
  font-variant-numeric:tabular-nums!important;
}
/* Alignment keys off .num ONLY. .mk-num is a FORMATTING class (mono + tabular)
   that the tape also puts on its leading Time column — right-aligning it pushed
   Time away from its own left-aligned header. Format and alignment are separate
   concerns here; do not merge these two selector lists again. */
html body td.num, html body th.num{
  text-align:right!important;
}
html body td.num, html body th.num, html body .mk-num{
  font-family:var(--fa-data)!important;
}

/* ── Calm charts: recessive gridlines, no heavy two-colour area fills. ──── */
html body .fx-grid{stroke:rgba(255,255,255,.045)!important;stroke-width:1!important;}
html body .fx-ref{stroke:rgba(255,255,255,.10)!important;}

/* ── SVG chart-axis text: the ONE documented sub-12px exception. ──────────
   Axis furniture only. Nothing else in the codebase may use --fs-axis. */
html body .fx-ax, html body .fx-reftx, html body .lz-lab{
  font-size:var(--fs-axis,10px)!important;
  fill:var(--text-5,#7C8494)!important;
}

/* ── Chrome is graphite. Colour is reserved for deltas + the orange accent. ─
   Any surviving blue/teal/cyan chrome token resolves to neutral here so a
   missed page-local literal degrades to graphite instead of shouting. */
html body .lq-vrow .bar i{
  background:var(--text-5,#7C8494)!important;   /* was a --blue gradient */
}

/* ── r90 Phase 2 ──────────────────────────────────────────────────────────
   REVERTED 2026-08-30 (Ibrahim, immediately): r90 centred both boards' .layout
   on --fa-content-max. That was WRONG. The boards' .layout is a 288px filter
   rail + the grid; clamping it to 1560px squeezed the rail and broke the filter
   column on BOTH the TA board and the pattern board.
   THE BOARDS' ALIGNMENT IS NOT PART OF THIS PASS. Centring applies to the
   MARKET pages only (main.mk-main) and coin (.cm). Do not re-add a width or
   margin rule for .layout, .main or the rails on ta-board / pattern-board. */

/* Treemap tile labels — the second and last sanctioned sub-12px surface.
   Size is set inline per tile (it scales with tile area, floored at
   --fs-treemap); this rule only keeps them in the muted voice. */
html body .ht-s, html body .ht-c, html body .hm-t span{
  letter-spacing:0!important;
}

/* The account avatar badge sized itself to 10px from a page-level rule; it is
   text, so the floor applies to it like everything else. */
html body .fa-acct-av{font-size:12px!important;}