/* Fable chart: pump.fun's TradingView chrome. Colours come from palette tokens; the fallbacks are the page's own dark values.
   Desktop renders under html{zoom:.75}, so DOM text is written through --fc-font-scale. The LWC host (.fc-canvas)
   gets an inline zoom of 1/pageZoom from the chart, so LWC runs at zoom 1 and its pointer maths line up; inset:0 keeps it
   filling the stage exactly. */
.fable-chart{--fc-font-scale:1;--fc-fire-tip:#ff3d24;--fc-fire-body:#ff7a1a;--fc-fire-base:#ffab2e;--fc-fire-core:#ffe36e;--fc-fire-white:#fffbe8;--fc-fire-outline:#140f0c;--fc-fire-text:#ffb869;--fc-fire-total:#ffc58a;--fc-fire-wash:rgba(255,122,26,.10);--fc-bg:var(--chart-bg,#0b0806);--fc-text:var(--chart-text,#918375);--fc-line:var(--chart-border,var(--line,#2c221c));--fc-bright:var(--ink,#f7efe6);--fc-strong:var(--ink-2,#cfc2b5);--fc-dim:var(--muted,#918375);--fc-faint:var(--line-2,#40322a);--fc-menu:var(--panel,#140f0c);--fc-hover:color-mix(in srgb,var(--fc-text) 13%,transparent);--fc-on:var(--brand);position:relative;display:flex;flex-direction:column;min-width:0;background:var(--fc-bg);color:var(--fc-text);font-family:var(--sans,-apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,sans-serif);container-type:inline-size}
/* the dark chart surface follows the page (owner, 30 Sep, with the chocolate chrome; it was pump.fun's cool grey until then):
   fable.css sets --chart-bg (the page's --bg), --chart-text (--muted), --chart-border (--line), --chart-label (--panel) and
   --chart-grid, a faint warm line at 34% (fomo's calm grid, owner 29 Sep). Nothing here overrides them; the light theme
   keeps its own chart tokens (the last rule of this file). */
.fable-chart [hidden]{display:none!important}
.fable-chart button{appearance:none;margin:0;border:0;border-radius:4px;background:transparent;color:inherit;box-shadow:none;transform:none;letter-spacing:0;text-transform:none;min-width:0;width:auto;cursor:pointer;font:inherit;line-height:1}
.fc-toolbar svg,.fc-footer svg,.fc-legend svg{display:block;width:calc(18px * var(--fc-font-scale));height:calc(18px * var(--fc-font-scale))}

/* top toolbar */
.fc-toolbar{position:relative;z-index:12;display:flex;align-items:center;gap:2px;min-height:calc(38px * var(--fc-font-scale));padding:0 6px;border-bottom:1px solid var(--fc-line);background:var(--fc-bg)}
.fc-toolbar button,.fc-footer button{display:inline-flex;align-items:center;gap:6px;min-height:calc(30px * var(--fc-font-scale));padding:0 calc(8px * var(--fc-font-scale));color:var(--fc-text);font:500 calc(13px * var(--fc-font-scale))/1 var(--sans,sans-serif);white-space:nowrap}
.fc-toolbar button:hover,.fc-footer button:hover{background:var(--fc-hover);color:var(--fc-bright)}
.fc-toolbar button[aria-pressed=true],.fc-footer button[aria-pressed=true]{color:var(--fc-on);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.fc-toolbar button[aria-expanded=true],.fc-footer button[aria-expanded=true]{background:var(--fc-hover);color:var(--fc-bright)}
.fable-chart button:focus-visible,.fable-chart input:focus-visible,.fc-stage:focus-visible{outline:2px solid var(--fc-on);outline-offset:-2px}
.fc-sep{flex:none;width:1px;height:calc(20px * var(--fc-font-scale));margin:0 4px;background:var(--fc-line)}
.fc-pop{position:relative;display:flex;align-items:center;flex:none}
.fc-favs{display:flex;align-items:center;gap:1px}
.fc-toolbar .fc-icon-button{padding:0 calc(6px * var(--fc-font-scale))}
.fc-toolbar .fc-caret{padding:0 3px}.fc-caret svg{width:calc(14px * var(--fc-font-scale));height:calc(14px * var(--fc-font-scale))}
.fc-caret-after:after{content:"";width:5px;height:5px;margin:-3px 0 0 2px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(45deg);opacity:.75}
.fc-toolbar-right{display:flex;align-items:center;margin-left:auto}
.fc-toolbar .fc-duo{gap:4px;font-weight:600}.fc-duo span{color:var(--fc-dim)}.fc-duo span.on{color:var(--fc-bright)}.fc-duo i{font-style:normal;color:var(--fc-dim);opacity:.6}
.fc-duo:hover span:not(.on){color:var(--fc-text)}
/* the currency toggle's second unit is the main pool's asset (29 Sep): a long ticker is cut, never widens the toolbar */
.fc-duo[data-duo=currency] span:last-of-type{display:inline-block;max-width:8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}

/* menus */
.fc-menu{position:absolute;z-index:40;top:calc(100% + 4px);left:0;min-width:calc(210px * var(--fc-font-scale));padding:6px;display:grid;gap:1px;overflow-y:auto;overscroll-behavior:contain;background:var(--fc-menu);border:1px solid var(--fc-line);border-radius:8px;box-shadow:0 14px 36px rgba(0,0,0,.6)}
.fc-menu-head{padding:calc(9px * var(--fc-font-scale)) 10px calc(4px * var(--fc-font-scale));color:var(--fc-dim);font:600 calc(11px * var(--fc-font-scale))/1 var(--sans,sans-serif);letter-spacing:.07em;text-transform:uppercase}
.fc-menu-row{display:flex;align-items:center}
.fable-chart .fc-menu-item{flex:1;justify-content:flex-start;gap:10px;min-height:calc(32px * var(--fc-font-scale));padding:0 10px;border-radius:5px;color:var(--fc-strong);text-align:left;font-weight:500}
.fable-chart .fc-menu-item:hover{background:var(--fc-hover);color:var(--fc-bright)}
.fable-chart .fc-menu-item[aria-checked=true]:not(.fc-check){background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel);font-weight:700}.fable-chart .fc-menu-item[aria-checked=true]:not(.fc-check):hover{background:var(--brand-sheen-sm-hover);color:var(--brand-ink)}
.fable-chart .fc-star{min-height:calc(30px * var(--fc-font-scale));padding:0 8px;color:var(--fc-faint)}.fc-star svg{width:calc(15px * var(--fc-font-scale));height:calc(15px * var(--fc-font-scale))}
.fable-chart .fc-star:hover{color:var(--fc-text);background:transparent}.fable-chart .fc-star[aria-pressed=true]{color:var(--brand,var(--fc-on))}.fc-star[aria-pressed=true] svg{fill:currentColor}
.fc-ico{display:grid;place-items:center;color:var(--fc-text)}.fc-menu-item[aria-checked=true] .fc-ico{color:inherit}
.fc-check:before{content:"";flex:none;width:calc(14px * var(--fc-font-scale));height:calc(14px * var(--fc-font-scale));border:1px solid var(--fc-faint);border-radius:3px;box-sizing:border-box}
.fc-check[aria-checked=true]:before{border-color:var(--brand-edge,var(--brand));background:var(--brand-outline);box-shadow:inset 0 0 0 3px var(--fc-menu)}
/* Trade Display: "Show on chart" checkboxes, then Effects with the fire animation switch and its note */
.fc-display-menu{width:calc(284px * var(--fc-font-scale));max-width:calc(100vw - 24px)}
.fc-menu-sep{height:1px;margin:5px 4px;background:var(--fc-line)}
.fable-chart .fc-switch-item{align-items:flex-start;gap:10px;min-height:0;padding:calc(9px * var(--fc-font-scale)) 10px;border:1px solid rgba(255,140,60,.18);background:linear-gradient(90deg,var(--fc-fire-wash),rgba(255,110,30,.03))}
.fable-chart .fc-switch-item:hover{background:linear-gradient(90deg,rgba(255,110,30,.15),rgba(255,110,30,.05))}
.fc-toolbar .fc-switch-ico{width:calc(14px * var(--fc-font-scale));height:calc(18px * var(--fc-font-scale));margin-top:-1px}
.fc-switch-text{flex:1;display:grid;gap:3px;min-width:0;white-space:normal}
.fc-switch-text b{color:var(--fc-bright);font:600 calc(13px * var(--fc-font-scale))/1.2 var(--sans,sans-serif)}
.fc-switch-text small{color:var(--fc-text);font:400 calc(11.5px * var(--fc-font-scale))/1.3 var(--sans,sans-serif)}
.fc-switch{position:relative;flex:none;width:calc(32px * var(--fc-font-scale));height:calc(18px * var(--fc-font-scale));margin-top:1px;border-radius:999px;background:var(--fc-faint)}
.fc-switch:after{content:"";position:absolute;top:2px;left:2px;width:calc(18px * var(--fc-font-scale) - 4px);height:calc(18px * var(--fc-font-scale) - 4px);border-radius:50%;background:var(--fc-strong)}
.fc-switch-item[aria-checked=true] .fc-switch{background:var(--brand-outline)}
.fc-switch-item[aria-checked=true] .fc-switch:after{transform:translateX(calc(14px * var(--fc-font-scale)));background:var(--brand-mark,#2a1508)}
.fc-menu-note{margin:0;padding:6px 10px 5px calc(34px * var(--fc-font-scale));color:var(--fc-dim);font:400 calc(11px * var(--fc-font-scale))/1.4 var(--sans,sans-serif);white-space:normal}
.fc-menu-note b{color:var(--fc-text);font-weight:600}
.fc-date-menu{top:auto;bottom:calc(100% + 4px);min-width:0;padding:10px}
.fc-date-menu label{display:flex;align-items:center;gap:8px;color:var(--fc-text);font:500 calc(12px * var(--fc-font-scale))/1 var(--sans,sans-serif);white-space:nowrap}
.fc-date-menu input{padding:6px 8px;border:1px solid var(--fc-line);border-radius:6px;background:var(--fc-bg);color:var(--fc-strong);font:500 calc(12px * var(--fc-font-scale))/1.2 var(--sans,sans-serif)}

/* chart stage; a parent with a definite height (e.g. a draggable divider) makes the stage fill it */
.fc-stage{position:relative;flex:1 1 auto;height:var(--fc-stage-height,clamp(390px,49vh,580px));min-height:200px;min-width:0;outline:none;touch-action:pan-y;overflow:hidden}
.fc-canvas{position:absolute;inset:0;min-width:0;overflow:hidden}.fc-canvas table{border:0!important;margin:0!important;min-width:0!important;width:auto!important}.fc-canvas table td{padding:0!important;border:0!important;background:transparent!important}.fc-canvas table tr{background:transparent!important}
/* the legend as pump's reads (its TradingView legend, measured 30 Sep): TradingView's font at 12 screen px, weight 400
   throughout, the title and the O/H/L/C letters in the axis grey, the values in the bar's colour, each row on the pane
   colour at 50% (showBackground, transparency 50) */
.fc-legend{position:absolute;z-index:5;left:10px;right:80px;top:6px;display:grid;justify-items:start;gap:1px;pointer-events:none;font:400 calc(12px * var(--fc-font-scale))/1.55 -apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,sans-serif;color:var(--fc-text)}
.fc-legend-row{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;min-width:0;max-width:100%;padding:0 4px;margin-left:-4px;border-radius:4px;background:color-mix(in srgb,var(--fc-bg) 50%,transparent)}
.fc-title{color:var(--fc-text);font-weight:400;white-space:nowrap}
.fc-ohlc{display:inline-flex;flex-wrap:wrap;gap:0 8px;font-variant-numeric:tabular-nums;white-space:nowrap}.fc-ohlc i{margin-right:2px;font-style:normal;color:var(--fc-text)}.fc-ohlc b,.fc-volume-row b{font-weight:400}
.fc-volume-row{gap:0 6px;font-variant-numeric:tabular-nums}
.fable-chart .fc-legend-toggle{pointer-events:auto;display:grid;place-items:center;width:calc(20px * var(--fc-font-scale));height:calc(20px * var(--fc-font-scale));padding:0;color:var(--fc-text)}.fable-chart .fc-legend-toggle:hover{background:var(--fc-hover);color:var(--fc-bright)}
.fc-legend-toggle svg{width:calc(14px * var(--fc-font-scale));height:calc(14px * var(--fc-font-scale))}.fc-collapsed .fc-legend-toggle svg{transform:rotate(-90deg)}
.fc-collapsed .fc-ohlc,.fc-collapsed .fc-volume-row{display:none}
.fc-empty{position:absolute;inset:40% 10% auto;text-align:center;pointer-events:none;color:var(--fc-text);font-size:calc(13px * var(--fc-font-scale))}
/* TradingView's "Scroll to the most recent bar" (pump, 30 Sep): a 24 px square, radius 4, pump's grey made warm (--line-2 with --ink-2), a soft
   shadow and no border; placed by the chart 20 px left of the price scale and 32 px over the time axis. Hover: our accent. */
.fable-chart .fc-live{position:absolute;z-index:7;display:grid;place-items:center;width:calc(24px * var(--fc-font-scale));height:calc(24px * var(--fc-font-scale));padding:0;border:0;border-radius:4px;background:var(--line-2,#40322a);color:var(--ink-2,#cfc2b5);box-shadow:0 2px 4px rgba(0,0,0,.4)}
.fable-chart .fc-live svg{width:calc(18px * var(--fc-font-scale));height:calc(18px * var(--fc-font-scale))}
.fable-chart .fc-live:hover{background:var(--line-2,#40322a);color:var(--brand,#cfc2b5)}
:root[data-theme="light"] .fable-chart .fc-live{background:#fff;color:#1a1a1a;box-shadow:0 2px 4px rgba(0,0,0,.2)}
/* TradingView's A / L buttons at the foot of the price scale, shown while the pointer is over the scale (the chart sets
   .fc-axis-hover): 20 × 22 screen px, radius 4, 12 px; on, they take our accent */
.fc-axis-modes{position:absolute;z-index:7;right:0;display:flex;justify-content:center;gap:calc(4px * var(--fc-font-scale));padding:calc(4px * var(--fc-font-scale)) 0;visibility:hidden;opacity:0;pointer-events:none}
.fc-axis-hover .fc-axis-modes{visibility:visible;opacity:1}
.fable-chart .fc-axis-modes button{display:grid;place-items:center;width:calc(20px * var(--fc-font-scale));height:calc(22px * var(--fc-font-scale));padding:0;border:1px solid transparent;border-radius:4px;color:var(--ink-2,#cfc2b5);font:400 calc(12px * var(--fc-font-scale))/1 -apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,sans-serif;pointer-events:auto}
.fable-chart .fc-axis-modes button:hover{background:var(--line-2,#40322a);border-color:var(--dim,#5c5046)}
.fable-chart .fc-axis-modes button[aria-pressed=true]{background:var(--brand-sheen-sm);border-color:transparent;color:var(--brand-ink,#fff4e2)}
:root[data-theme="light"] .fable-chart .fc-axis-modes button{color:#1a1a1a}

/* resting markers above the candles (sizes set inline by the chart, zoom-compensated). A candle a fable fired on shows
   its authors' circular faces, one per fable (the owner reversed "no avatars" on 29 Sep: design "A · Rise from the
   candle"; one face per fable since 30 Sep): a thin fire ring and a small flame badge bottom right. A candle with only buy
   and burns no fable fired keeps one bright orange flame with a dark outline (a count at two or more). Fire colours only,
   never bronze. */
.fc-callouts{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.fc-defs{position:absolute;width:0;height:0;overflow:hidden}
.fc-flame-glyph{display:block;flex:none}.fc-flame-glyph svg{display:block;width:100%;height:100%;overflow:visible}
.fc-fl-o{stroke:var(--fc-fire-outline);stroke-width:1.4;stroke-linejoin:round;paint-order:stroke}
.fc-st-tip{stop-color:var(--fc-fire-tip)}.fc-st-body{stop-color:var(--fc-fire-body)}.fc-st-base{stop-color:var(--fc-fire-base)}.fc-st-core{stop-color:var(--fc-fire-core)}.fc-st-white{stop-color:var(--fc-fire-white)}
.fable-chart .fc-flame{position:absolute;display:flex;align-items:flex-end;gap:1px;padding:0;border-radius:4px;background:transparent;pointer-events:auto;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.5));transition:opacity .25s ease-out}
.fable-chart .fc-flame:hover .fc-flame-glyph,.fable-chart .fc-flame[aria-expanded=true] .fc-flame-glyph{filter:drop-shadow(0 0 3px rgba(255,154,60,.95)) drop-shadow(0 0 8px rgba(255,120,40,.6))}
.fable-chart .fc-flame:focus-visible{outline:2px solid var(--fc-bright);outline-offset:2px}
.fc-flame-count{margin:0 0 calc(2px * var(--fc-font-scale)) 1px;color:var(--fc-fire-text);font:700 calc(10.5px * var(--fc-font-scale))/1 var(--mono,monospace);font-style:normal;font-variant-numeric:tabular-nums;text-shadow:0 0 2px var(--fc-bg),0 0 2px var(--fc-bg),0 0 1px var(--fc-bg)}
.fable-chart .fc-face{display:block;box-sizing:border-box;padding:0;border-radius:50%;background:var(--fc-bg,#0b0806);box-shadow:0 0 0 1.5px var(--fc-bg,#0b0806),0 1px 3px rgba(0,0,0,.6);filter:none;transition:none}
.fable-chart .fc-face:hover,.fable-chart .fc-face[aria-expanded=true]{z-index:1000!important;box-shadow:0 0 0 1.5px var(--fc-bg,#0b0806),0 0 0 3px rgba(255,170,90,.55),0 0 10px rgba(255,140,50,.6)}
.fc-face-pic{display:block;width:100%;height:100%;overflow:hidden;border-radius:50%;background:var(--fc-menu)}
.fc-face-pic img{display:block;width:100%;height:100%;object-fit:cover}
.fc-face-pic .fc-initial{font-size:inherit;line-height:1}
/* the small flame badge bottom right of each face (owner, 1 Oct, option A), sized for the 20 px face */
.fc-face-badge{position:absolute;right:-26%;bottom:-20%;width:52%;height:65%;pointer-events:none;filter:drop-shadow(0 0 .6px var(--fc-fire-outline)) drop-shadow(0 0 .6px var(--fc-fire-outline)) drop-shadow(0 1px 1px rgba(0,0,0,.6))}
/* trade badges (owner, 29 Sep: fomo's own-trade marks, pump.fun's DB/DS): solid circles in the chart's up/down colour with a
   white bold letter and a thin dark ring, stacked touching in one column over the candle; past five, a grey "N+" pill
   nearest the candle. Sizes, positions and fill are set inline by the chart (zoom-compensated). */
.fc-trades{position:absolute;pointer-events:none}
.fable-chart .fc-trade,.fable-chart .fc-trade-more{position:absolute;display:grid;place-items:center;box-sizing:border-box;padding:0;pointer-events:auto;font-family:var(--sans,-apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,sans-serif);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.fable-chart .fc-trade{left:0;border:1px solid rgba(11,8,6,.9);border-radius:50%;color:#fff;letter-spacing:-.02em;text-shadow:0 0 1px rgba(0,0,0,.55),0 1px 1px rgba(0,0,0,.3);box-shadow:0 1px 2px rgba(0,0,0,.45)}
.fable-chart .fc-trade-dev{letter-spacing:-.05em}
.fable-chart .fc-trade-more{left:50%;transform:translateX(-50%);min-width:1.9em;padding:0 .4em;border:1px solid rgba(11,8,6,.9);border-radius:999px;background:#4d423a;color:var(--ink,#f7efe6);white-space:nowrap}
.fable-chart .fc-trade:hover,.fable-chart .fc-trade:focus-visible,.fable-chart .fc-trade-more:hover{z-index:1;outline:none;box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 1px 3px rgba(0,0,0,.5)}
:root[data-theme="light"] .fable-chart .fc-trade{border-color:rgba(255,255,255,.9)}
:root[data-theme="light"] .fable-chart .fc-trade-more{border-color:rgba(255,255,255,.9);background:#71717a;color:#fff}
/* the pop-up face (owner, 1 Oct, "Show Fables" off): the writer's face with its flame badge pops in with the fire's flash
   (a quick scale-in with a warm ring), holds, and fades out, 3 s in all (fable-chart.js POP; not .fc-pop, the toolbar's popovers); held at full while its card
   is open; reduced motion: no scale or fade, it just appears and goes */
.fable-chart .fc-popface{z-index:30;transform-origin:50% 50%;box-shadow:0 0 0 1.5px var(--fc-bg,#0b0806),0 0 0 2.5px rgba(255,160,70,.75),0 0 12px rgba(255,130,40,.55),0 1px 3px rgba(0,0,0,.6);animation:fc-popface 3s linear both}
.fable-chart .fc-popface.fc-popface-held{animation:none;opacity:1}
@keyframes fc-popface{0%{opacity:0;transform:scale(.35)}6%{opacity:1;transform:scale(1.16)}11%{transform:scale(.97)}15%{transform:none}72%{opacity:1}100%{opacity:0;transform:none}}
@media(prefers-reduced-motion:reduce){.fable-chart .fc-popface{animation:none}}
/* a fire's resting face (or flame) stays hidden while its Candle hop plays and shows the frame its rising face lands */
.fable-chart .fc-flame.fc-flame-wait{opacity:0;pointer-events:none}
/* the Candle hop overlay: one canvas over the chart (the hop, the green then orange wash), shown only while a fire plays */
.fc-fx{position:absolute;inset:0;z-index:8;display:block;pointer-events:none}
/* the author faces rising out of their candles, over the overlay; each is removed once the resting face takes over */
.fc-risers{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.fable-chart .fc-riser{position:absolute;transform-origin:50% 50%;will-change:transform,opacity}
/* the fire card, fomo's thesis hover card (owner, 29 Sep): one rounded near-black card, a faint light border and a soft
   shadow; header = avatar, name, bronze seal, @handle, a bronze "Fable" tag, the time on the right; the fable in compact type (owner, 29 Sep: fomo's idea but smaller, ~330px wide); a quiet footer (likes left, what it burned in bronze and a real tx link right). Pinned clusters scroll as a stack
   of these, a hairline between them; a plain buy and burn is one compact row. */
.fc-fire-card{position:absolute;z-index:16;width:calc(330px * var(--fc-font-scale));max-width:calc(100% - 24px);max-height:calc(100% - 16px);overflow-y:auto;overscroll-behavior:contain;padding:0;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:var(--panel,#140f0c);box-shadow:0 12px 32px rgba(0,0,0,.66),0 2px 8px rgba(0,0,0,.4);color:var(--ink,#f7efe6);font:400 calc(13px * var(--fc-font-scale))/1.4 var(--sans,sans-serif);pointer-events:auto;box-sizing:border-box}
.fc-fire-card.fc-fc-pinned{max-height:60%}
.fc-fc-item{padding:calc(11px * var(--fc-font-scale)) calc(13px * var(--fc-font-scale)) calc(10px * var(--fc-font-scale))}
.fc-fc-item+.fc-fc-item{border-top:1px solid rgba(255,255,255,.07)}
.fc-fc-head{display:flex;align-items:center;gap:calc(8px * var(--fc-font-scale));min-width:0}
.fable-chart .fc-fc-av{flex:none;display:grid;place-items:center;width:calc(24px * var(--fc-font-scale));height:calc(24px * var(--fc-font-scale));padding:0;overflow:hidden;border-radius:50%;background:var(--panel-2,#1c1512);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.fc-fc-av img{display:block;width:100%;height:100%;object-fit:cover}
.fc-initial{display:grid;place-items:center;width:100%;height:100%;color:var(--fc-on);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font:700 calc(13px * var(--fc-font-scale))/1 var(--sans,sans-serif)}
.fc-fc-who{flex:1;display:flex;align-items:center;gap:calc(4px * var(--fc-font-scale));min-width:0;overflow:hidden;white-space:nowrap}
.fable-chart .fc-fc-name{flex:none;max-width:48%;overflow:hidden;text-overflow:ellipsis;padding:0;color:var(--ink,#f7efe6);font:600 calc(12.5px * var(--fc-font-scale))/1.2 var(--sans,sans-serif);text-align:left}
.fable-chart button.fc-fc-name:hover{text-decoration:underline}
.fc-fc-sealwrap{flex:none;display:grid}.fc-fc-seal{display:block;width:calc(12px * var(--fc-font-scale));height:calc(12px * var(--fc-font-scale))}
.fc-fc-seal path.ft-seal{fill:url(#fable-bronze) var(--brand,#daa264)}.fc-fc-seal .ft-tick{fill:none;stroke:var(--brand-mark,#2a1508);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.fc-fc-who .fc-fc-x{--fx-size:calc(10px * var(--fc-font-scale));color:var(--fc-dim)}.fc-fc-who .fc-fc-x:hover,.fc-fc-who .fc-fc-x:focus-visible{color:var(--ink,#f7efe6)}
.fc-fc-text .fr-img{margin-bottom:0}
.fc-fc-handle{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--fc-dim);font:400 calc(10.5px * var(--fc-font-scale))/1.2 var(--mono,monospace)}
.fc-fc-tag{flex:none;margin-left:calc(2px * var(--fc-font-scale));padding:calc(2px * var(--fc-font-scale)) calc(6px * var(--fc-font-scale));border-radius:999px;border:0;background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel);font:700 calc(9.5px * var(--fc-font-scale))/1 var(--sans,sans-serif)}
.fc-fc-time{flex:none;margin-left:auto;padding-left:8px;color:var(--fc-dim);font:500 calc(10.5px * var(--fc-font-scale))/1.2 var(--sans,sans-serif);white-space:nowrap}
.fc-fc-text{margin:calc(7px * var(--fc-font-scale)) 0 0;color:var(--ink,#f7efe6);font:400 calc(13px * var(--fc-font-scale))/1.42 var(--sans,sans-serif);overflow-wrap:anywhere;white-space:pre-wrap}
.fc-fc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:calc(8px * var(--fc-font-scale))}
.fc-fc-likes{display:inline-flex;align-items:center;gap:calc(4px * var(--fc-font-scale));color:var(--fc-dim);font:500 calc(11px * var(--fc-font-scale))/1 var(--sans,sans-serif);font-variant-numeric:tabular-nums}
.fc-fc-heart svg{display:block;width:calc(13px * var(--fc-font-scale));height:calc(13px * var(--fc-font-scale))}
.fc-fc-facts{display:inline-flex;align-items:center;gap:calc(10px * var(--fc-font-scale));min-width:0;margin-left:auto}
.fc-fc-burn{color:var(--brand-text-solid,#ebb97a);font:600 calc(11px * var(--fc-font-scale))/1.2 var(--sans,sans-serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.fc-fc-tx{flex:none;color:var(--fc-dim);font:500 calc(10.5px * var(--fc-font-scale))/1.2 var(--sans,sans-serif);text-decoration:none}
a.fc-fc-tx:hover{color:var(--fc-bright);text-decoration:underline}
.fc-fc-burnrow{display:flex;align-items:center;gap:calc(10px * var(--fc-font-scale));padding-top:calc(9px * var(--fc-font-scale));padding-bottom:calc(9px * var(--fc-font-scale))}
.fc-fc-burnicon{width:calc(12px * var(--fc-font-scale));height:calc(15px * var(--fc-font-scale))}
.fc-fc-burnrow .fc-fc-name{font-size:calc(12px * var(--fc-font-scale))}
.fc-fc-burnrow .fc-fc-time{margin-left:0;padding-left:0}
.fc-fc-more{padding:calc(7px * var(--fc-font-scale)) calc(13px * var(--fc-font-scale)) calc(8px * var(--fc-font-scale));border-top:1px solid rgba(255,255,255,.07);color:var(--fc-dim);font:500 calc(10.5px * var(--fc-font-scale))/1.3 var(--sans,sans-serif)}
.fable-chart .fc-fc-av:focus-visible,.fable-chart .fc-fc-name:focus-visible,.fc-fc-tx:focus-visible{outline:2px solid var(--fc-on);outline-offset:2px}
:root[data-theme="light"] .fc-fire-card{border-color:rgba(0,0,0,.1);background:#fff;color:#18181b;box-shadow:0 18px 44px rgba(0,0,0,.18)}
:root[data-theme="light"] .fable-chart .fc-fc-name,:root[data-theme="light"] .fc-fc-text{color:#18181b}
:root[data-theme="light"] .fc-fc-item+.fc-fc-item,:root[data-theme="light"] .fc-fc-more{border-color:rgba(0,0,0,.08)}
:root[data-theme="light"] .fc-fc-tag{color:var(--brand-ink)}
.fc-marker-tip{position:absolute;z-index:15;width:270px;max-width:calc(100% - 12px);padding:10px 12px;border:1px solid var(--fc-line);border-radius:8px;background:var(--fc-menu);box-shadow:0 10px 30px rgba(0,0,0,.6);pointer-events:none;color:var(--fc-strong);font:calc(12px * var(--fc-font-scale))/1.45 var(--sans,sans-serif)}
.fc-marker-tip strong,.fc-marker-tip b,.fc-marker-tip small{display:block}.fc-marker-tip b{margin-top:5px;color:var(--fc-strong);font-size:calc(11px * var(--fc-font-scale))}.fc-marker-tip p{margin:4px 0;color:var(--fc-text);overflow-wrap:anywhere}.fc-marker-tip small{margin-top:6px;color:var(--fc-dim);font-size:calc(10px * var(--fc-font-scale))}

/* bottom bar */
.fc-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:calc(34px * var(--fc-font-scale));padding:0 6px;border-top:1px solid var(--fc-line);background:var(--fc-bg)}
.fc-control-group{display:flex;align-items:center;gap:1px;min-width:0}
.fc-footer button{min-height:calc(26px * var(--fc-font-scale));padding:0 calc(7px * var(--fc-font-scale));font-size:calc(12px * var(--fc-font-scale))}
.fc-footer .fc-icon-button{padding:0 calc(6px * var(--fc-font-scale))}.fc-footer .fc-icon-button svg{width:calc(16px * var(--fc-font-scale));height:calc(16px * var(--fc-font-scale))}
.fc-bottom-actions{margin-left:auto}
.fc-bottom-actions button[aria-pressed=false]{color:var(--fc-dim)}
.fc-clock{padding:0 8px;color:var(--fc-text);font:500 calc(12px * var(--fc-font-scale))/1 var(--sans,sans-serif);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:default}
/* pump's divider under the chart: a thin strip with a centred grip; drag or arrow keys set the stage height */
.fc-divider{position:relative;flex:none;height:calc(10px * var(--fc-font-scale));cursor:row-resize;touch-action:none;background:var(--fc-bg);outline:none}
.fc-divider:before{content:"";position:absolute;left:50%;top:50%;width:calc(36px * var(--fc-font-scale));height:3px;transform:translate(-50%,-50%);border-radius:2px;background:var(--fc-faint)}
.fc-divider:hover:before,.fc-divider.fc-dragging:before,.fc-divider:focus-visible:before{background:var(--fc-on)}
.fc-divider:focus-visible{box-shadow:inset 0 0 0 2px var(--fc-on)}
/* the SPOTLIGHT (owner, 30 Sep late, option D; rules of 1 Oct; fable-chart.js SPOT, RUN): only the rise holding at the
   chart's right edge is lit, green only. The dimming and the glow are drawn in the chart's own canvas; the run's words are
   DOM in .fc-mv-layer, which the chart counter-zooms as it does the LWC host, so their px are chart px (screen px), over
   the fables' resting faces: a small "▲ +46% in 5m" (11.5px, weight 700, a soft glow: owner, 1 Oct) just over the run's
   highest wick, lit in its colour. They rise in over
   .45 s with the light, a new high pops the number (.5 s, .72 → 1.07 → 1), and they fade with the light when the run
   ends (the chart sets their opacity); faces and badges outside a lit run dim with the pane. Reduced motion: none of it
   moves. Dark only. */
.fc-mv-layer{position:absolute;inset:0;z-index:10;overflow:hidden;pointer-events:none}
.fc-spot-label{position:absolute;top:0;left:0;display:flex;align-items:baseline;gap:3px;white-space:nowrap;font-family:var(--sans,system-ui,sans-serif);font-variant-numeric:tabular-nums;font-weight:700;font-size:10px;line-height:12px;letter-spacing:0;--mv:var(--up,#4ade80);color:#bff5d3;text-shadow:0 0 6px rgba(74,222,128,.55),0 0 1px rgba(11,8,6,.9);animation:fc-spot-in .45s cubic-bezier(.2,.8,.2,1) both}
.fc-spot-ar{align-self:center;flex:none;width:8px;height:7px;background:var(--mv);clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 0 3px rgba(74,222,128,.6))}
.fc-spot-num{display:inline-block;transform-origin:50% 60%}
.fc-spot-num.pop{animation:fc-mv-pop .5s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes fc-spot-in{from{opacity:0;transform:translateY(6px)}}
@keyframes fc-mv-pop{0%{transform:scale(.72)}55%{transform:scale(1.07)}100%{transform:none}}
.fable-chart .fc-stage[data-spot=on] .fc-out{opacity:.4}
.fable-chart .fc-trades{transition:opacity .25s ease-out}
@media(prefers-reduced-motion:reduce){.fc-spot-label,.fc-spot-num.pop{animation:none}.fable-chart .fc-trades,.fable-chart .fc-flame{transition:none}}
.fc-mv-note{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* accessible data view: off screen until focused or opened */
.fc-data-table:not([open]):not(:focus-within){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.fc-data-table{padding:5px 10px;border-top:1px solid var(--fc-line);color:var(--fc-text);font-size:calc(11px * var(--fc-font-scale))}.fc-data-table summary{cursor:pointer}.fc-table-scroll{overflow-x:auto;margin-top:8px}
.fc-data-table table{width:100%;font:calc(11px * var(--fc-font-scale)) var(--mono,monospace);font-variant-numeric:tabular-nums}.fc-data-table th,.fc-data-table td{padding:5px 6px;text-align:right;white-space:nowrap}.fc-data-table th:first-child,.fc-data-table td:first-child{text-align:left}
:root[data-theme="light"] .fable-chart{--chart-grid:rgba(120,104,88,.08);--fc-fire-text:#c2410c;--fc-fire-total:#9a3412;--fc-fire-wash:rgba(234,88,12,.10)}
@media(prefers-reduced-motion:no-preference){.fable-chart button{transition:background-color .12s,color .12s}.fc-legend-toggle svg{transition:transform .15s}}
@media(min-width:1100px){.fable-chart{--fc-font-scale:1.33333333}}
@container(max-width:900px){.fc-toolbar{flex-wrap:wrap;row-gap:0;padding:2px 4px}.fc-toolbar-right{margin-left:auto}.fc-legend{right:64px}.fc-ohlc{gap:0 6px}}
@container(max-width:560px){.fc-toolbar>.fc-sep{display:none}.fc-toolbar button,.fc-footer button{padding:0 6px}.fc-toolbar-right{margin-left:0}.fc-legend{left:8px;right:56px;font-size:calc(12px * var(--fc-font-scale))}.fc-volume-row{display:none}.fc-footer{flex-wrap:wrap;padding:2px 4px}.fc-clock{padding:0 4px}}
@media(max-width:640px){.fc-stage{height:var(--fc-stage-height,390px)}.fc-marker-tip{width:235px}.fc-fire-card{width:calc(100% - 16px)}.fc-fc-item{padding-left:12px;padding-right:12px}.fc-fc-text{font-size:13px}}