/* Fable notifications and @mentions (fable-notify.js; owner's pick 30 Sep: "A · X classic", plus the "holds $COIN" tag
   in the @ list). Dark only; palette tokens only. Sizes are layout px: on desktop the page renders at html zoom .75.
   The @mention link inside a fable is fable-rich.css's (.fr-mention). */

/* ---- the bell beside the balance pill: the pill's own surface, a metal count at its corner ("20+" at most) */
.fn-bell{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line-2);border-radius:50%;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 5%,transparent),transparent 70%),var(--panel);color:var(--ink-2);cursor:pointer;transition:border-color .15s,box-shadow .15s,color .15s}
.fn-bell:hover,.fn-bell[aria-expanded="true"]{border-color:color-mix(in srgb,var(--brand) 60%,var(--line-2));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent);color:var(--ink)}
.fn-bell:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fn-bell svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fn-badge{position:absolute;top:-4px;right:-5px;display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:var(--brand-sheen-sm);color:var(--brand-ink);font:800 11.5px/1 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:var(--brand-bevel),0 0 0 2.5px var(--bg);pointer-events:none}
.fn-badge[hidden]{display:none}
/* white with the number in chocolate (owner, 30 Sep), like the New launches count */
.fn-badge{background:#fff;color:var(--brand-shade);box-shadow:0 0 0 2px var(--bg,#0b0806)}

/* ---- the panel, anchored under the bell and the pill (fable-account.css makes .mast-actions the anchor) */
.fn-pop{position:absolute;top:calc(100% + 12px);right:0;z-index:60;width:452px;max-height:calc(100 * var(--vh) - 110px);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:16px;background:var(--panel);color:var(--ink);font:400 15px/1.4 var(--sans);text-align:left;box-shadow:0 26px 60px -14px #000d,0 2px 0 #0006,inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent);animation:fnIn .14s ease-out}
.fn-pop:focus{outline:none}
.fn-pop [hidden]{display:none!important}
@keyframes fnIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fn-head{display:flex;align-items:center;gap:8px;padding:16px 16px 6px}
.fn-head h3{flex:1;margin:0;font:800 21px/1.1 var(--sans);font-stretch:108%;letter-spacing:-.01em;text-transform:none}
.fn-x{display:none;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-2);font:400 22px/1 var(--sans);cursor:pointer}
.fn-x:hover{background:var(--panel-2);color:var(--ink)}
.fn-tabs{display:flex;border-bottom:1px solid var(--line)}
.fn-tabs button{position:relative;flex:1;padding:15px 0 14px;border:0;background:none;color:var(--muted);font:650 15px/1 var(--sans);cursor:pointer;box-shadow:none;transform:none}
.fn-tabs button:hover{background:color-mix(in srgb,var(--ink) 4%,transparent);color:var(--ink-2)}
.fn-tabs button[aria-selected="true"]{color:var(--ink);font-weight:750}
.fn-tabs button[aria-selected="true"]::after{content:'';position:absolute;left:50%;bottom:0;width:64px;height:4px;margin-left:-32px;border-radius:2px;background:var(--brand-outline)}
.fn-tabs button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.fn-list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}

/* ---- a row: 44px gutter (a face, the heart, the draw's mark) and the words; new rows tinted until the panel closes */
.fn-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 10px;padding:14px 16px 13px;border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent);color:inherit;cursor:pointer;outline:none}
.fn-row:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.fn-row:focus-visible{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--brand) 70%,transparent)}
.fn-row.is-new{background:color-mix(in srgb,var(--brand) 11%,transparent)}
.fn-row.is-new:hover{background:color-mix(in srgb,var(--brand) 14%,transparent)}
.fn-row:last-child{border-bottom:0}
.fn-gut{display:flex;justify-content:flex-end;padding-top:2px}
.fn-gut>svg{width:28px;height:28px}
.fn-heart{fill:url(#fable-bronze) var(--brand)}
.fn-gift{fill:none;stroke:var(--brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fn-av{display:block;flex:none;width:var(--s,40px);height:var(--s,40px);padding:0;border:0;border-radius:50%;overflow:hidden;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer}
.fn-av img{display:block;width:100%;height:100%;object-fit:cover}
.fn-av.is-pixel img{image-rendering:pixelated}
.fn-av.is-wallet{background:radial-gradient(120% 120% at 28% 18%,var(--line-2),var(--panel-2) 74%)}
.fn-avs{display:flex;gap:5px;margin-bottom:9px}
.fn-avs .fn-av{--s:32px}
.fn-line{font:400 15px/1.4 var(--sans);color:var(--ink-2);overflow-wrap:anywhere}
.fn-line b{color:var(--ink);font-weight:750}
.fn-quote{margin-top:6px;font:400 14.5px/1.45 var(--sans);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.fn-on{display:flex;align-items:center;gap:8px;margin-top:8px}
.fn-time{font:400 13px var(--sans);color:var(--muted);white-space:nowrap}
.fn-by{display:flex;align-items:center;gap:5px;min-width:0;font-size:15px}
.fn-name{min-width:0;max-width:100%;padding:0;border:0;background:none;color:var(--ink);font:750 15px/1.25 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;box-shadow:none;transform:none}
.fn-name:hover{text-decoration:underline;text-underline-offset:3px}
.fn-seal{width:15px;height:15px;flex:none}
.fn-seal .s{fill:url(#fable-bronze) var(--brand)}
.fn-seal .t{fill:none;stroke:var(--brand-mark);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.fn-handle{min-width:0;font:400 13px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn-dot{color:var(--muted)}
.fn-to{margin-top:2px;font:400 14px var(--sans);color:var(--muted)}
.fn-to b{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:650}
.fn-text{margin-top:3px;font:400 15px/1.45 var(--sans);color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.fn-acts{display:flex;align-items:center;gap:22px;margin-top:9px;color:var(--muted);font:400 13px var(--sans)}
.fn-acts>span,.fn-acts>button{display:inline-flex;align-items:center;gap:6px}
.fn-acts svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linejoin:round;stroke-linecap:round}
.fn-like,.fn-replies{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;box-shadow:none;transform:none}
.fn-like:hover,.fn-like[aria-pressed="true"]{color:var(--brand)}
.fn-like[aria-pressed="true"] svg{fill:color-mix(in srgb,var(--brand) 28%,transparent)}
/* the bubble opens the fable with its replies open; a new like pops the heart as the Fables tab's does (.ft-pop, its
   ft-like-pop keyframes in fable-theses.css) */
.fn-replies:hover{color:var(--ink-2)}
.fn-like:focus-visible,.fn-replies:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.fn-like.ft-pop svg{animation:ft-like-pop .36s cubic-bezier(.2,.9,.3,1.25)}
@media (prefers-reduced-motion:reduce){.fn-like.ft-pop svg{animation:none}}
.fn-burn{margin-left:auto;color:var(--muted);font-weight:500;white-space:nowrap}
.fn-burn.is-fired{color:#f4efe8;font-weight:650}
.fn-coin{display:inline-flex;align-items:center;gap:5px;font:600 12.5px/1 var(--mono);color:var(--ink-2);white-space:nowrap}
.fn-coin img{width:16px;height:16px;border-radius:4px;flex:none;object-fit:cover}
.fn-won{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.fn-won img{width:1.2em;height:1.2em;margin:0 .2em;vertical-align:-.25em;-webkit-text-fill-color:initial}
.fn-sub{margin-top:5px;font:400 13.5px/1.4 var(--sans);color:var(--muted)}
.fn-more{display:block;width:100%;padding:13px;border:0;border-top:1px solid var(--line);background:none;color:var(--brand-text-solid);font:600 13px var(--sans);cursor:pointer}
.fn-more:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.fn-empty{padding:54px 34px 64px}
.fn-empty h4{margin:0 0 10px;font:800 27px/1.15 var(--sans);font-stretch:106%;letter-spacing:-.015em;color:var(--ink);text-transform:none}
.fn-empty p{margin:0;font:400 15px/1.5 var(--sans);color:var(--muted)}

/* ---- phones: a bottom sheet over a dimmed page, like the account menu */
.fn-scrim{position:fixed;inset:0;z-index:110;background:rgba(6,5,4,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fnFade .16s ease-out}
.fn-pop.is-sheet{position:fixed;top:auto;right:0;bottom:0;left:0;z-index:111;width:auto;max-height:84vh;max-height:84dvh;border-bottom:0;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom);animation:fnUp .2s ease-out}
.fn-pop.is-sheet::before{content:"";display:block;flex:none;width:38px;height:4px;margin:8px auto 0;border-radius:2px;background:var(--line-2)}
.fn-pop.is-sheet .fn-x{display:grid}
/* a toast while the sheet is open (a heart's "Like unavailable", 7 Oct) shows above it, not behind it */
body:has(.fn-pop.is-sheet) #toasts{z-index:112}
@keyframes fnFade{from{opacity:0}to{opacity:1}}
@keyframes fnUp{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media (max-width:640px){.fn-bell{width:40px;height:40px}.fn-bell svg{width:19px;height:19px}}
@media (prefers-reduced-motion:reduce){.fn-pop,.fn-pop.is-sheet,.fn-scrim{animation:none}.fn-bell{transition:none}}

/* ---- the @ list under the caret (X's plain list; the coin's holders first, with a metal "holds $COIN" tag) */
.fn-ac{position:absolute;z-index:80;width:400px;max-width:calc(100vw - 32px);padding:6px 0;border:1px solid var(--line-2);border-radius:14px;background:var(--panel);box-shadow:0 22px 50px -10px #000e,0 0 0 1px #0007;text-align:left}
.fn-ac[hidden]{display:none}
.fn-ac-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 16px;cursor:pointer}
.fn-ac-row.is-on{background:var(--panel-2)}
.fn-ac-row .fn-av{--s:40px;cursor:inherit}
.fn-ac-n{display:flex;align-items:center;gap:5px;min-width:0;font:750 15px/1.25 var(--sans);color:var(--ink)}
.fn-ac-n span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn-ac-h{margin-top:3px;font:400 13px/1.2 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn-ac-tag{padding:4px 8px;border-radius:999px;background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel);font:700 11px/1 var(--sans);white-space:nowrap}
.fn-ac-note{padding:10px 16px;font:400 13px/1.4 var(--sans);color:var(--muted)}
/* a card whose reply box has the list open sits above the cards after it */
.ft-post.fn-ac-host{z-index:30}

/* ---- the composer: the typed text drawn on a layer behind a see-through box, so an @name reads in metal as it is typed.
   Only while the text has an '@' in it; the layer uses the box's own font, size and weight, so it never drifts */
.fn-hl{position:absolute;z-index:0;margin:0;pointer-events:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word;color:var(--ink);background:var(--panel);border-style:solid;border-color:transparent;box-sizing:border-box}
.fn-hl[hidden]{display:none}
textarea.fn-hl-on{position:relative;z-index:1;background:transparent!important;color:transparent!important;-webkit-text-fill-color:transparent;caret-color:var(--ink)}
textarea.fn-hl-on::placeholder{color:var(--muted);-webkit-text-fill-color:var(--muted)}
.fn-hl-m{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* a reply a notification opened (fable-theses.js focus): a short ember wash, like a new fable's */
.ft-reply.fn-reply-hit{border-radius:6px;background:color-mix(in srgb,#ff8a2a 16%,transparent);box-shadow:inset 3px 0 0 #ffd089;transition:background 2.6s ease-out}

/* the rest of a name by the site's one rule (owner, 30 Sep evening): the X logo after the seal (a mark in the @ list) */
.fn-by .fn-x{--fx-size:11px}.fn-ac-n .fn-ac-x{--fx-size:10px;margin-left:1px}
/* your fable fired (owner, 30 Sep): the Fables tab's flame in the gutter, the coins burned in the metal of a burn */
.fn-flame{fill:color-mix(in srgb,var(--brand) 30%,transparent);stroke:var(--brand);stroke-width:1.3;stroke-linejoin:round}
.fn-burned{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;font-variant-numeric:tabular-nums}