/* Fable rich text (fable-rich.js): metal-text links (the fable.css TEXT recipe) and the one image under a fable's text, dark only */
.fr-link{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-style:normal;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--brand) 45%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere;word-break:break-word;cursor:pointer}
.fr-link:hover{text-decoration-color:currentColor;filter:brightness(1.15)}
.fr-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}

/* the preview: rounded 12px, the picture's own shape up to a height, cover-cropped past it */
.fr-img{--fr-max:320px;display:block;position:relative;width:fit-content;max-width:100%;margin:10px 0 2px;padding:0;overflow:hidden;border:1px solid var(--line-2,#40322a);border-radius:12px;background:var(--panel-2,#1c1512);cursor:zoom-in;font:inherit;line-height:0;text-align:left;box-shadow:none}
.fr-img img{display:block;width:auto;max-width:100%;height:auto;max-height:var(--fr-max);aspect-ratio:var(--fr-ar,auto);object-fit:cover}
.fr-img[data-sized] img{width:min(100%,calc(var(--fr-max) * var(--fr-r)),var(--fr-nw));height:auto}
.fr-img[data-sized]{width:min(100%,calc(var(--fr-max) * var(--fr-r) + 2px),calc(var(--fr-nw) + 2px))}
.fr-img:hover{border-color:color-mix(in srgb,var(--brand) 55%,var(--line-2,#40322a))}
.fr-img:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fr-img-compact{--fr-max:160px;margin-top:8px;border-radius:10px}
.fr-img-position{--fr-max:200px}
.fr-img-hover{--fr-max:120px;margin-top:6px;border-radius:9px}
.fr-img.is-missing{display:grid;place-items:center;width:min(100%,260px);height:72px;cursor:default;border-style:dashed;line-height:1.2}
.fr-img-compact.is-missing,.fr-img-hover.is-missing{width:min(100%,200px);height:52px}
.fr-img-missing{color:var(--muted,#918375);font:500 11px/1.2 var(--mono,monospace)}

/* the lightbox reuses the coin picture's (terminal-shell.css), at the picture's own shape */
.fr-lightbox .coin-lightbox-fig img{width:auto;height:auto;max-width:min(92vw,1200px);max-height:84vh;object-fit:contain;border-radius:14px;background:var(--panel)}

/* the composer's image: its button, the thumbnail with its ×, the drop highlight */
.fr-attach{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;padding:0;border:1px solid var(--line,#2c221c);border-radius:9px;background:none;color:var(--muted,#918375);cursor:pointer}
.fr-attach svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fr-attach:hover,.fr-attach:focus-visible{border-color:color-mix(in srgb,var(--brand) 55%,transparent);color:var(--brand)}
.fr-attach[aria-disabled=true]{opacity:.45;cursor:default}
.fr-thumb{position:relative;display:inline-block;width:fit-content;max-width:100%;margin:8px 0 0;line-height:0}
.fr-thumb img{display:block;max-width:100%;max-height:120px;border:1px solid var(--line-2,#40322a);border-radius:10px;object-fit:cover}
.fr-thumb-x{position:absolute;top:5px;right:5px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid var(--line-2,#40322a);border-radius:50%;background:color-mix(in srgb,#0b0806 78%,transparent);color:var(--ink,#f7efe6);font:600 15px/1 var(--sans,sans-serif);cursor:pointer}
.fr-thumb-x:hover,.fr-thumb-x:focus-visible{border-color:var(--brand);color:var(--brand-hi,var(--brand))}
.fr-thumb small{position:absolute;left:6px;bottom:6px;padding:3px 6px;border-radius:6px;background:color-mix(in srgb,#0b0806 75%,transparent);color:var(--ink-2,#cfc2b5);font:600 9.5px/1 var(--mono,monospace)}
.fr-thumb.is-busy img{opacity:.55}
.fr-drop{outline:2px dashed color-mix(in srgb,var(--brand) 70%,transparent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fr-img{transition:none}}
.ft-feed .fr-img-feed{--fr-max:calc(320px * var(--pz,1))}
.fnw-q+.fr-img{margin-top:8px}

/* the X logo beside a signed-up person's name (FableRich.xLink): about the name's cap height, muted, brighter on hover;
   it sits above any whole-row or whole-card click target around it */
.fx-link{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;flex:none;align-self:center;padding:2px;margin:-2px 0;border-radius:4px;color:var(--muted,#918375);line-height:0;text-decoration:none;cursor:pointer;transition:color .12s}
.fx-glyph{display:block;width:var(--fx-size,.72em);height:var(--fx-size,.72em);fill:currentColor}
.fx-link:hover{color:var(--ink,#f7efe6)}
.fx-link:focus-visible{color:var(--ink,#f7efe6);outline:2px solid var(--brand);outline-offset:1px}
@media (prefers-reduced-motion:reduce){.fx-link{transition:none}}
/* the X logo as a plain mark where a link can't go (inside a link or a button: the burn tape, a rail row, a list option) */
.fx-mark{cursor:inherit;pointer-events:none;z-index:auto}

/* a person's name (FableRich.who / whoNodes; owner, 30 Sep evening): "@handle ✓ 𝕏", "moonboy ✓ 𝕏 @handle", "RapidTallTatir".
   The seal is the site's bronze seal, about the name's cap height; the @handle after a chosen name is muted and quieter */
.fw-seal{display:inline-block;flex:none;width:.95em;height:.95em;vertical-align:-.12em}
svg path.fw-seal-b{fill:url(#fable-bronze) var(--brand,#daa264)}
.fw-seal-t{fill:none;stroke:var(--brand-mark,#2a1508);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.fw-at{color:var(--muted,#918375);font-weight:400;white-space:nowrap}

/* "🔥 710 [logo] FABLE burned" (owner, 30 Sep): a fire emoji, plain white text and the burned coin's logo by its ticker */
.fr-burn{display:inline-flex;align-items:center;gap:.32em;min-width:0;white-space:nowrap;color:#f4efe8;-webkit-text-fill-color:currentColor;background:none;font-weight:650;font-variant-numeric:tabular-nums}
.fr-burn b{font-weight:750}.fr-burn-fire{font-size:1.05em;line-height:1}.fr-burn-logo{width:1.2em;height:1.2em;flex:none;border-radius:50%;object-fit:cover}

/* an @mention inside a fable or a reply (fable-rich.js, owner 30 Sep): the link colour, the person's current @name, their
   profile on a click; no underline until hovered, as on X */
.fr-mention{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:650;text-decoration:none;white-space:nowrap;cursor:pointer}
.fr-mention:hover{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--brand) 60%,transparent);text-underline-offset:3px;filter:brightness(1.12)}
.fr-mention:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}