/* Fable branding on the original Bruno/MOFO interface.
   The page is a warm near-black, #0b0806 (owner, 30 Sep, with the chocolate chrome below). The square logo
   (img/fable-logo-v4.png) bakes in its own tile colour, #1b1815, so coin discs that show it keep that tile; wherever the
   mark sits straight on the page the transparent cut-out (img/fable-logo-v4-clear.png) is used instead.
   Layout, typography, terminal, vote panel and interaction styles stay in styles.css. */
/* THE METAL: CHOCOLATE CHROME, LIFTED (owner's pick, 30 Sep, from a real render of the coin page; it replaces the rose
   bronze of 29 Sep). A dark chocolate chrome with bright gold streaks, on warm near-black surfaces. The text on the metal
   is CREAM now, not dark. Every other file reads these tokens, never a metal hex:
   --brand solid gold-bronze for text, icons, rules and small marks (8.9:1 on --bg)
   --brand-hi the streak's highlight (gradient stops, glows, edges) · --brand-deep the darkest chocolate (shadows, offsets;
     it nearly vanishes on the page, so never a line or a text colour) · --brand-shade the visible mid-shadow (#8a552c),
     the darkest tone a line, a ring or a disc may use
   --brand-ink cream, the text on any label-safe metal fill (below) · --brand-mark dark chocolate, a tick or a knob drawn
     ON bright metal (the verified seal, a gold switch track)
   --brand-dim a metal-tinted surface · --brand-edge the cream rim, for 1px top highlights
   --brand-sheen the chrome itself: chocolate with two broad bright streaks (21% and 84%). Cream text cannot cross those
     streaks, so nothing with a label uses it directly. It is the reference the four below are cut from:
   --brand-sheen-btn the same chrome with the streaks pushed out to the two ends (peaks at 10% and 89%), so a centred label
     sits on the dark band from 20% to 79%: the Buy press and the chosen Chart / Vote / Fables tab, with --brand-ink-shadow
   --brand-sheen-sm the calm metal for everything else that carries a label (pills, chips, badges, tabs, segments, discs,
     ordinary buttons, cards): chocolate with a soft warm band through the middle and a lit glint in the last 5px of each
     end, the stops anchored in px so a short label never meets a bright band. Cream on it is 5.6:1 or better from 9px in.
   --brand-satin the chocolate brushed flat, for full-width bands of running text (the burn ticker, the closing band)
   --brand-outline the metal kept in its mid-to-bright range (never darker than #a0683a, 4.4:1 on --bg), for anything thin
     or label-free that must not drop out against the page: outlines, rules, rings, dots, legend keys and meter fills
   --brand-bevel the inset stack a filled metal control wears: cream top edge + soft inner shadow at the foot
   --brand-ink-shadow the soft dark shadow under a cream label on --brand-sheen-btn
   --up/--down price direction only · --chart-bg/--chart-grid/--chart-text/--chart-border/--chart-label plain colours a
     canvas can parse; the chart surface follows the page, and its grid stays faint (owner: a calm, fomo-like grid). */
/* METAL EVERYWHERE (owner, 30 Sep: every metal on the dapp should match the Buy button "to a tee"). The recipes:
   WIDE PRESS (Buy, the chosen section tab) = background:var(--brand-sheen-btn); color:var(--brand-ink);
     text-shadow:var(--brand-ink-shadow); box-shadow:var(--brand-bevel). Hover = var(--brand-sheen-btn-hover).
   FILLED / SELECTED control with a label = background:var(--brand-sheen-sm); color:var(--brand-ink);
     box-shadow:var(--brand-bevel); border-color:transparent; weight 700-800. Hover = var(--brand-sheen-sm-hover).
     (Hover is always the same metal with --brand-lift, a 9% cream wash, over it; cream stays 4.7:1 or better.)
   TEXT = color:var(--brand) first (the fallback, and what icons inside it draw with via currentColor), then
     background:var(--brand-sheen-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent.
     --brand-sheen-text repeats every 6.4em, so a short word and a long headline both catch one highlight, with no pale stop
     wide enough to wash a small word out. No text-shadow with it (a shadow paints over the clipped metal).
   SMALL MONO TEXT (under ~12px rendered) = color:var(--brand-text-solid), the metal's bright midtone: a gradient that small
     blurs into a smudge.
   OUTLINE = border:1px solid transparent; background:<surface> padding-box, var(--brand-outline) border-box (rounded
     corners), or border-image:var(--brand-outline) 1 (square corners).
   THIN MARK / METER FILL = background:var(--brand-outline).
   Not metal, never recoloured: --up/--down, the fire orange (--fc-fire-*, flames, face rings), chart candles, grey buttons. */
:root { --room:#0b0806; --jet:#0b0806; --fire:#daa264; --fire-2:#43230f; --ember:#f8d49a; --glow:#f8d49a; }
/* the recipes as classes, for markup that has no stylesheet rule of its own (templates' inline accents) */
.metal-text{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.metal-fill{background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel);border-color:transparent}
:root,:root[data-theme="dark"] {
  --bg:#0b0806; --panel:#140f0c; --panel-2:#1c1512; --line:#2c221c; --line-2:#40322a;
  --ink:#f7efe6; --ink-2:#cfc2b5; --muted:#918375; --dim:#5c5046;
  --brand:#daa264; --brand-hi:#f8d49a; --brand-deep:#43230f; --brand-shade:#8a552c; --brand-ink:#fff4e2; --brand-mark:#2a1508; --brand-dim:#2d1d12; --brand-edge:rgba(255,226,180,.5);
  --brand-sheen:linear-gradient(115deg,#56301a 0%,#a86c3c 12%,#f8d49a 21%,#d3a579 27%,#6e4024 38%,#43230f 50%,#56301a 60%,#9a6234 72%,#fff0cc 84%,#c0864f 91%,#5f3519 100%);
  --brand-sheen-btn:linear-gradient(115deg,#56301a 0%,#a86c3c 4%,#f8d49a 10%,#d3a579 14%,#6e4024 20%,#43230f 50%,#56301a 68%,#9a6234 79%,#fff0cc 89%,#c0864f 94%,#5f3519 100%);
  --brand-sheen-sm:linear-gradient(115deg,#c9a06c 0,#f6d6a0 2px,#a86c3c 5px,#84512c 9px,#633820 36%,#8a552c 54%,#633820 74%,#84512c calc(100% - 9px),#a86c3c calc(100% - 5px),#f0cd94 calc(100% - 2px),#b98552 100%);
  --brand-satin:linear-gradient(115deg,#3b1e0e 0%,#5a3319 30%,#6d4122 50%,#4f2c16 75%,#3b1e0e 100%);
  --brand-outline:linear-gradient(115deg,#a86c3c 0%,#d9a466 14%,#f8d49a 24%,#d3a579 34%,#a0683a 52%,#b97d48 66%,#fff0cc 84%,#c0864f 93%,#a86c3c 100%);
  --brand-bevel:inset 0 1px 0 var(--brand-edge),inset 0 -1px 0 color-mix(in srgb,var(--brand-deep) 70%,transparent),inset 0 -8px 14px -10px color-mix(in srgb,var(--brand-deep) 90%,transparent);
  --brand-ink-shadow:0 1px 1px rgba(30,14,5,.75),0 0 6px rgba(30,14,5,.5);
  --brand-lift:linear-gradient(rgba(255,240,214,.09),rgba(255,240,214,.09));
  --brand-sheen-hover:var(--brand-lift),var(--brand-sheen);
  --brand-sheen-btn-hover:var(--brand-lift),var(--brand-sheen-btn);
  --brand-sheen-sm-hover:var(--brand-lift),var(--brand-sheen-sm);
  --brand-sheen-text:repeating-linear-gradient(115deg,#c98b52 0,#e6b373 1.3em,#fbdda8 2.2em,#e3ad6e 3.1em,#c1824a 4.5em,#d99e60 5.5em,#c98b52 6.4em);
  --brand-text-solid:#ebb97a;
  --up:#4ade80; --down:#f87171;
  --chart-bg:#0b0806; --chart-grid:rgba(44,34,28,.34); --chart-text:#918375; --chart-border:#2c221c; --chart-label:#140f0c;
  --mast:rgba(11,8,6,.96); --tip-bg:#140f0c;
}
:root[data-theme="light"] {
  --brand:#8f532b; --brand-deep:#5e3219; --brand-dim:#f5e4d4; --brand-edge:rgba(255,255,255,.9);
  --brand-sheen-text:linear-gradient(var(--brand),var(--brand)); --brand-text-solid:var(--brand);
  --up:#0b7a4d; --down:#c62828;
  --chart-bg:#faf6f1; --chart-grid:rgba(120,104,88,.16); --chart-text:#6f655b; --chart-border:#e2d8cc;
}
.brand [data-eyes] { display:inline-flex; align-items:center; width:48px; height:48px; }
.fable-mark.sm { display:block; width:48px; height:48px; object-fit:contain; border-radius:0; }
.hero-launch-mark img { border-radius:0; }
.hero::after { background:radial-gradient(55% 60% at 80% 22%,color-mix(in srgb,var(--fire) 10%,transparent),transparent 62%),radial-gradient(45% 50% at 15% 95%,color-mix(in srgb,var(--fire) 4%,transparent),transparent 60%); }
.hero::before { background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--fire) 12%,transparent) 1.1px,transparent 1.3px) 0 0/9px 9px; }
.fable-x-mirror .mirror-eyes img { display:block; width:100%; height:auto; mask-image:radial-gradient(ellipse 49% 48% at center,#000 60%,transparent 100%); }
.mirror.one.fable-x-mirror .mirror-eyes { top:-136px; }
.fable-x-mirror .hcard { position:relative; }
/* the hero is the black room in both themes, so its feed reads theme-fixed colours (the light theme's --panel and --brand
   are made for a white page: a white focus card under snow text, dark metal links at 3:1) */
.fable-x-mirror .hcard[data-focus="true"] { background:#140f0c; }
.fable-x-mirror .hburn .fire { filter:grayscale(1) sepia(1) saturate(1.6) hue-rotate(-10deg) drop-shadow(0 0 8px color-mix(in srgb,var(--fire) 30%,transparent)); }
.demo-strip{border-bottom:1px solid var(--line);color:var(--muted);font:10px var(--mono)}.demo-strip>.wrap{display:flex;align-items:center;justify-content:space-between;min-height:34px;gap:10px}.demo-strip span{display:flex;gap:10px;align-items:center}.demo-strip i,.live-label i,.status-dot{width:5px;height:5px;border-radius:50%;background:var(--brand-outline);display:inline-block}.demo-strip em{font-style:normal;letter-spacing:0;color:var(--muted)}.demo-strip button{border:0;background:none;color:var(--ink-2);font:10px var(--mono);padding:7px 10px;cursor:pointer}.demo-strip button:hover{color:var(--brand-text-solid)}
.fable-demo-post{margin:12px 0 18px;padding:15px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.fable-demo-post label{display:block;font-size:12px;margin-bottom:8px}.fable-demo-post textarea{width:100%;min-height:70px;background:var(--bg);border:1px solid var(--line-2);border-radius:5px;padding:10px;font-size:12px}.fable-demo-post small{display:block;color:var(--muted);font-size:10px;margin:6px 0 10px}.fable-balance{color:var(--brand-text-solid);font:10px var(--mono);padding:3px 0}.demo-preset{margin-bottom:20px;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.demo-preset p{margin:0;font-size:12px;color:var(--ink-2)}.demo-preset .btn{font-size:11px}
.fable-x-mirror .x-post-link{position:absolute;right:28px;top:8px;background:none;border:0;padding:0;color:var(--brand-text-solid);font:500 9px/1.2 var(--sans);text-decoration:none;cursor:pointer}
.fable-x-mirror .x-post-link:hover{text-decoration:underline}.x-post-link:focus-visible,#xFeedPause:focus-visible{outline:2px solid var(--fire);outline-offset:4px}
.x-feed-controls{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 0;color:color-mix(in srgb,var(--snow) 50%,var(--room));font:8px var(--mono);letter-spacing:.05em}
#xFeedPause{border:0;background:none;color:color-mix(in srgb,var(--snow) 50%,var(--room));font:9px var(--sans);padding:4px;cursor:pointer}
.x-feed-empty{color:color-mix(in srgb,var(--snow) 50%,var(--room));padding:25px}
.x-post-preview{background:var(--panel);color:var(--ink);border:1px solid var(--line-2);border-radius:14px;width:min(480px,calc(100vw - 36px));padding:25px}.x-post-preview::backdrop{background:rgba(10,13,12,.7)}.x-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.x-preview-head h2{font-size:23px}.x-preview-head button{background:none;border:0;color:var(--ink);padding:10px;cursor:pointer}.x-preview-note{font-size:12px;color:var(--muted);margin:12px 0 20px}#xDemoText{font-size:15px;line-height:1.7;overflow-wrap:anywhere;margin:14px 0 20px}#xDemoBurn{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:15px}

/* X activity names the burner and quantity; the post body stays on X. */
.fable-x-mirror .hcard .burn-announcement{font-size:18px;line-height:1.25;white-space:normal;display:block;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.fable-x-mirror .hcard .hx-x{display:inline-flex;vertical-align:-.06em;margin:0 .1em 0 .3em;--fx-size:.62em}
/* the writer's name by the site's one rule (owner, 30 Sep evening): the seal and the @handle after a chosen name */
.fable-x-mirror .hcard .hx-seal{width:.72em;height:.72em;vertical-align:-.04em;margin-left:.22em}.fable-x-mirror .hcard .hx-at{margin-left:.25em;font-weight:400;opacity:.62}
.fable-x-mirror .burn-amount{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}
.fable-x-mirror .x-post-link{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:26px;min-height:22px;top:5px}
.fable-x-mirror .x-post-link svg{display:block;flex-shrink:0}
@media(max-width:1200px){.fable-x-mirror .hcard .burn-announcement{font-size:16px}}
@media(max-width:640px){.fable-x-mirror .hcard .burn-announcement{font-size:15px;line-height:1.3}.fable-x-mirror .hcard{grid-template-rows:1fr;padding-top:13px}.fable-x-mirror .hcard .hmain{padding-right:12px}.fable-x-mirror .hcard .pfp{grid-row:1;align-self:center;margin:0}.fable-x-mirror .hburn{display:none}.fable-x-mirror .x-post-link{right:10px;top:3px}}

@media(max-width:640px) { .mirror.one.fable-x-mirror .mirror-eyes { top:-66px; } .demo-strip em { display:none; } .demo-strip>.wrap { flex-wrap:wrap; gap:0 8px; } .demo-preset { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .vtrack,.tcard { transition:none; } }

/* Square logo tile: the artwork fills its background, without a second circular crop. #1b1815 is the tile colour baked
   into fable-logo-v4.png (owner's pick, 30 Sep), so a disc or a box behind that logo shows no seam. */
.hero-launch-mark { background:#1b1815; border:0; box-shadow:none; }
.hero-launch-mark img { border-radius:0; }
img[src*="fable-logo"]:not([src*="-clear"]) { background-color:#1b1815; }
.coin-ico:has(img[src*="fable-logo"]) { background:#1b1815; }
.socials.x-only { grid-template-columns:minmax(0,1fr); }
.socials.x-only .social input { min-height:58px; font-size:16px; }
.x-mark { width:24px; height:24px; flex:none; display:block; }
.term .ptab .x-mark { width:24px; height:24px; }
.firebtn .fire-row { grid-template-columns:minmax(0,1fr); }
.firebtn .fire-col { padding:0; }
.firebtn .fire-row .fb { flex-direction:row; min-height:70px; }
.firebtn .fire-row .fire-label b { font-size:18px; }
.vote-liquidity { margin-bottom:18px; }
.vote-liquidity .liquidity-kpis { border-left:0; border-right:0; grid-template-columns:repeat(4,minmax(0,1fr)); }
.vote-liquidity .liquidity-kpis .v { font-size:24px; overflow-wrap:anywhere; }
.liquidity-details { padding:0 18px 18px; }
.liquidity-details summary { padding:10px 0; color:var(--ink-2); cursor:pointer; font-weight:700; }
.liquidity-details .firepot-list { margin:12px 0; }
@media(max-width:640px) { .vote-liquidity .liquidity-kpis .v { font-size:20px; } .term .ptab .x-mark { width:20px; height:20px; } }

.cb-x-profile { margin:20px 0; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cb-x-profile label { font-weight:700; }
.cb-x-profile .cb-sub { margin:6px 0 12px; }
.cb-x-profile input { min-width:0; flex:1; }
@media(max-width:640px) { .cb-x-profile .cb-hand-row { flex-wrap:wrap; } .cb-x-profile input { flex-basis:100%; } }

/* Polished-metal creator-fees button with a white perimeter glow. */
.cf-btn:not(.off) { background:var(--brand-sheen-sm); border-color:var(--brand-deep); color:var(--brand-ink); box-shadow:var(--brand-bevel),0 0 0 1px rgba(255,255,255,.8),0 0 10px rgba(255,255,255,.26); }
.cf-btn:not(.off):hover { transform:translateY(-1px); background:var(--brand-sheen-sm-hover); box-shadow:var(--brand-bevel),0 0 0 1px #fff,0 0 14px rgba(255,255,255,.38); }
.cf-btn:not(.off):active { transform:translateY(1px); box-shadow:var(--brand-bevel),0 0 0 1px rgba(255,255,255,.8),0 0 7px rgba(255,255,255,.24); }
/* Pot details stay visible now that the public LP/pot tab switcher is removed. */
@media(max-width:759.98px) { .term-rail .firebtn .firepot { display:block; } }

@media(max-width:640px) { .vote-liquidity .liquidity-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* verified-on-X seals everywhere: the metal's bright gold (gradient defined once in layout.html), not the flat --brand; the
   tick on it is --brand-mark, dark chocolate */
svg path.ft-seal,svg path.th-holder-seal,svg path.lb-seal-b,svg path.flb-seal-b{fill:url(#fable-bronze) var(--brand)!important}