/* The mesh beside each ticker (fable-mesh-rail.js; owner's pick, 30 Sep: option A "Next to the name"): the launch pools as
   small overlapping pair logos after the ticker, the pools added by votes as a grey "+N" coin, and the card with the coin's
   mesh on hover, focus or tap. Desktop sizes are page px under html{zoom:.6075}, like the rest of the rail; the logos'
   own sizes live in the script (SIZES), which places and masks them. */

/* the ticker's box hugs its text so the logos can start where the name ends (a long name still ends in "…") */
.tsb-left>.tsb-symbol{align-self:flex-start;max-width:100%}

/* ---- the stack: in the row's cell beside the link (never inside it), over the free end of line 1 */
.fmr-stack{position:absolute;z-index:2;display:flex;align-items:center;margin:0;padding:0;border:0;border-radius:999px;background:none;color:inherit;font:inherit;line-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fmr-stack.fmr-static{cursor:default;pointer-events:none}
.fmr-stack:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* each logo under another has a hole masked where that one sits (inline, from the script): the gap is a 2px ring in
   whatever colour is under the row */
.fmr-c{position:relative;flex:none;display:block;border-radius:50%;overflow:hidden;background:#1b1815}
.fmr-c img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.fmr-c::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,238,214,.16);pointer-events:none}
/* the pools added by votes: one grey coin, "+N" (its left padding keeps the "+" clear of the logo over it) */
.fmr-plus{flex:none;display:grid;place-items:center;box-sizing:border-box;border-radius:50%;background:#3a3430;color:#f1e8de;box-shadow:inset 0 0 0 1px rgba(255,238,214,.12);font:800 10.5px/1 var(--mono);letter-spacing:-.03em;white-space:nowrap}
.fmr-plus.fmr-2{font-size:9px;letter-spacing:-.06em}
.fmr-plus.fmr-3{font-size:7px;letter-spacing:-.08em}
.fmr-stack:hover .fmr-plus,.fmr-stack[aria-expanded=true] .fmr-plus{background:#5a514a;color:#fff}
/* a fast move lifts the name 4.5px (fable-news.css); its logos go with it */
.tsb-row[data-surge] .fmr-stack{transform:translateY(-4.5px)}
/* the row whose mesh is open stays lit while the pointer is in the card (a pulse or a surge keeps its own colours) */
.tsb-row[data-mesh-open=true]:not([data-lit]):not([data-surge]) .tsb-cell{background:var(--panel)}
@media(max-width:1099px){.fmr-plus{font-size:8px}.fmr-plus.fmr-2{font-size:7px;letter-spacing:-.08em}.fmr-plus.fmr-3{font-size:5px}.fmr-stack:focus-visible{outline-offset:2px}}

/* ---- the card: attached to <body>, beside the rail (a phone's: under or over its row) */
.fmr-card{position:absolute;z-index:50;box-sizing:border-box;background:linear-gradient(180deg,#1a1411 0,#130e0c 100%);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.72),0 0 0 1px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,236,210,.08);color:var(--ink);font:400 15px/1.4 var(--sans);animation:fmr-in .14s ease-out both}
@keyframes fmr-in{from{opacity:0;transform:translateX(-6px)}}
.fmr-card[data-side=left]::before{content:'';position:absolute;left:-8px;top:calc(var(--fmr-caret,64px) - 7px);width:14px;height:14px;background:#191411;border-left:1px solid var(--line-2);border-bottom:1px solid var(--line-2);transform:rotate(45deg)}
.fmr-hd{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-areas:"av name" "av sub";column-gap:14px;row-gap:5px;align-items:center;padding:18px 20px 14px}
.fmr-av{grid-area:av;width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--line-2);background:#1b1815}
.fmr-name{grid-area:name;min-width:0;font:800 22px/1.1 var(--sans);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmr-name span{font-weight:600;color:var(--ink-2)}
.fmr-sub{grid-area:sub;min-width:0;font:500 13px/1.3 var(--mono);color:var(--muted)}
/* the Vote tab's own drawing (charts.js mesh, banner) */
.fmr-mesh{margin:0 16px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
/* a live coin from the feed has no pool depths yet: the drawing without $ figures */
.fmr-card[data-depth=none] .mf-depth,.fmr-card[data-depth=none] .mf-total,.fmr-card[data-depth=none] .mf-cap,.fmr-card[data-depth=none] .mf-vol,.fmr-card[data-depth=none] svg rect[rx="4"]{display:none}
.fmr-ft{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px 16px}
.fmr-legend{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;min-width:0;font:500 13px/1.3 var(--mono);color:var(--muted)}
.fmr-lg{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.fmr-mini{display:inline-flex;align-items:center}
.fmr-mini img{width:20px;height:20px;border-radius:50%;object-fit:cover;background:#1b1815;box-shadow:0 0 0 2px #140f0c}
.fmr-mini img+img{margin-left:-6px}
/* added by votes: dashed rings, side by side */
.fmr-lg-added .fmr-mini img{outline:1.5px dashed #7d7168;outline-offset:1px;box-shadow:none}
.fmr-lg-added .fmr-mini img+img{margin-left:3px}
.fmr-vote{flex:none;font:750 16px/1 var(--sans);color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap;text-decoration:none;border-radius:4px}
.fmr-vote:hover{text-decoration:underline;text-underline-offset:3px}
.fmr-vote:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media(max-width:1099px){.fmr-hd{padding:14px 14px 10px}.fmr-name{font-size:18px}.fmr-sub{font-size:12px}.fmr-mesh{margin:0 10px}.fmr-ft{padding:12px 14px 14px;flex-wrap:wrap}.fmr-legend{font-size:12px}}

/* reduced motion: no sparks (the drawing's ember runs), no beat, nothing slides */
@media(prefers-reduced-motion:reduce){.fmr-stack{transition:none}.fmr-card{animation:none}.fmr-card .mf-run{display:none}.fmr-card .mf-beat{animation:none}}