/* The emoji picker (fable-emoji.js; owner's picks, 30 Sep: the quick row on hover, the full picker in Fable's colours on
   a click, a bottom sheet on phones). Sizes are design px times --pz, which undoes the desktop page scale as the coin
   page's other pieces do (1.3333 from 1100px wide); the layer sets its own, as it sits on <body>. Palette tokens only. */

/* the fable box's smiley, beside the image button and drawn like it */
.fe-btn{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;margin-left:-4px;padding:0;border:1px solid var(--line,#2c221c);border-radius:9px;background:none;color:var(--muted,#918375);cursor:pointer}
.fe-btn svg{width:18px;height:18px}
.fe-btn svg,.fe-rbtn svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fe-btn svg .fe-eye,.fe-rbtn svg .fe-eye{fill:currentColor;stroke:none}
.fe-btn:hover,.fe-btn:focus-visible,.fe-btn.is-hover,.fe-btn.is-on{border-color:color-mix(in srgb,var(--brand) 55%,transparent);color:var(--brand)}
.fe-btn.is-on{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.fe-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* the reply box's smiley, inside the field at its right end */
.fe-field{position:relative;display:flex;flex:1;min-width:0}
.fe-field>input{flex:1;width:0;min-width:0;padding-right:calc(34px * var(--pz,1))!important}
.fe-rbtn{position:absolute;top:50%;right:calc(4px * var(--pz,1));transform:translateY(-50%);display:grid;place-items:center;width:calc(26px * var(--pz,1));height:calc(26px * var(--pz,1));padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.fe-rbtn svg{width:calc(17px * var(--pz,1));height:calc(17px * var(--pz,1))}
.fe-rbtn:hover,.fe-rbtn:focus-visible,.fe-rbtn.is-hover,.fe-rbtn.is-on{color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,transparent)}
.fe-rbtn:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* the limit (fable-length.js): the counter reads red past it (an old draft) and flashes when something is held back;
   the reply box, which has no counter, flashes its border */
.ft-count[data-state=over]{color:var(--down)}
.ft-count[data-flash]{display:inline-block;color:var(--down);animation:fe-nudge .32s ease}
.ft-reply-form input[data-full]{border-color:var(--down)}
@keyframes fe-nudge{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}

/* the layer on <body>: nothing in it takes the pointer except the row and the picker */
.fe-layer{--pz:1;position:fixed;inset:0;z-index:1000;pointer-events:none}
@media(min-width:1100px){.fe-layer{--pz:1.3333}}
.fe-layer>*{pointer-events:auto}
.fe-layer [hidden]{display:none!important}
.fe-g{display:block;font-style:normal;line-height:1}

/* ---- the quick row */
.fe-quick{position:absolute;display:flex;align-items:center;gap:calc(2px * var(--pz));padding:calc(5px * var(--pz)) calc(6px * var(--pz)) calc(5px * var(--pz)) calc(8px * var(--pz));border:1px solid var(--line-2);border-radius:999px;background:var(--panel);box-shadow:0 14px 36px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--brand) 12%,transparent);font-family:var(--sans);animation:fe-in .12s ease-out}
.fe-q{display:grid;place-items:center;width:calc(32px * var(--pz));height:calc(34px * var(--pz));padding:0;border:0;border-radius:50%;background:none;font-size:calc(23px * var(--pz));line-height:1;cursor:pointer}
.fe-q .fe-g{transition:transform .12s ease}
.fe-q:hover{background:color-mix(in srgb,var(--brand) 18%,transparent)}
.fe-q:hover .fe-g{transform:scale(1.28) translateY(-2%)}
.fe-rule{flex:none;width:1px;height:calc(22px * var(--pz));margin:0 calc(4px * var(--pz));background:var(--line-2)}
.fe-more{display:grid;place-items:center;width:calc(30px * var(--pz));height:calc(30px * var(--pz));padding:0;border:0;border-radius:50%;background:none;color:var(--brand);cursor:pointer}
.fe-more svg{width:calc(20px * var(--pz));height:calc(20px * var(--pz));fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.fe-more .fe-ring{stroke-dasharray:2.6 2.2}
.fe-more:hover .fe-ring{stroke-dasharray:none}
.fe-caret{position:absolute;top:calc(-6.5px * var(--pz));width:calc(12px * var(--pz));height:calc(12px * var(--pz));border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);background:var(--panel);transform:rotate(45deg);pointer-events:none}
.fe-quick[data-side=above] .fe-caret{top:auto;bottom:calc(-6.5px * var(--pz));transform:rotate(225deg)}
/* the gap between the smiley and the row: crossing it keeps the row */
.fe-bridge{position:absolute;left:0;right:0;bottom:100%;height:12px}
.fe-quick[data-side=above] .fe-bridge{top:100%;bottom:auto}
.fe-tip{position:absolute;top:calc(100% + 6px * var(--pz));transform:translateX(-50%);padding:calc(4px * var(--pz)) calc(8px * var(--pz));border-radius:calc(6px * var(--pz));background:var(--ink);color:var(--bg);box-shadow:0 4px 12px rgba(0,0,0,.4);font:600 calc(11px * var(--pz))/1.2 var(--sans);white-space:nowrap;pointer-events:none}
.fe-quick[data-side=above] .fe-tip{top:auto;bottom:calc(100% + 6px * var(--pz))}

/* ---- the full picker: X's layout in Fable's colours */
.fe-pick{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;width:calc(420px * var(--pz));max-width:calc(100% - 16px);overflow:hidden;border:1px solid var(--line-2);border-radius:calc(12px * var(--pz));background:var(--panel);box-shadow:0 18px 48px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--brand) 12%,transparent);color:var(--ink);font-family:var(--sans);text-align:left;animation:fe-in .12s ease-out}
.fe-pick *{box-sizing:border-box}
.fe-grab,.fe-popular{display:none}
.fe-search{position:relative;display:flex;align-items:center;margin:calc(12px * var(--pz)) calc(12px * var(--pz)) calc(6px * var(--pz))}
.fe-search svg{position:absolute;left:calc(13px * var(--pz));width:calc(16px * var(--pz));height:calc(16px * var(--pz));fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.fe-search input{width:100%;height:calc(38px * var(--pz));margin:0;padding:0 calc(16px * var(--pz)) 0 calc(38px * var(--pz));border:1px solid color-mix(in srgb,var(--brand) 45%,var(--line-2));border-radius:999px;outline:none;background:var(--bg);color:var(--ink);font:400 calc(14px * var(--pz)) var(--sans);-webkit-appearance:none;appearance:none}
.fe-search input::placeholder{color:var(--muted)}
.fe-search input:focus{border-color:color-mix(in srgb,var(--brand) 75%,var(--line-2))}
.fe-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.fe-tabs{display:flex;align-items:stretch;flex:none;height:calc(42px * var(--pz));padding:0 calc(4px * var(--pz));border-bottom:1px solid var(--line)}
.fe-tab{position:relative;flex:1 1 0;display:grid;place-items:center;min-width:0;padding:0;border:0;border-radius:calc(8px * var(--pz));background:none;color:var(--muted);cursor:pointer}
.fe-tab svg{width:calc(18px * var(--pz));height:calc(18px * var(--pz));fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fe-tab svg .fe-fill{fill:currentColor;stroke:none}
.fe-tab:hover{color:var(--ink-2)}
.fe-tab.is-on{color:var(--brand-hi,var(--brand))}
.fe-tab.is-on::after{content:'';position:absolute;left:18%;right:18%;bottom:-1px;height:2px;border-radius:2px;background:var(--brand-outline,var(--brand))}
.fe-scroll{position:relative;flex:none;height:calc(318px * var(--pz));overflow-y:auto;overscroll-behavior:contain;padding:0 calc(11px * var(--pz)) calc(8px * var(--pz));scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.fe-sec-h{position:sticky;top:0;z-index:1;margin:0;padding:calc(10px * var(--pz)) calc(4px * var(--pz)) calc(6px * var(--pz));background:var(--panel);color:var(--muted);font:600 calc(10px * var(--pz))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.fe-grid{display:grid;grid-template-columns:repeat(9,1fr)}
.fe-cell{display:grid;place-items:center;height:calc(44px * var(--pz));padding:0;border:0;border-radius:calc(10px * var(--pz));background:none;font-size:calc(28px * var(--pz));line-height:1;cursor:pointer}
.fe-cell:hover,.fe-cell:focus-visible{background:color-mix(in srgb,var(--brand) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 45%,transparent)}
.fe-note{margin:0;padding:calc(18px * var(--pz)) calc(8px * var(--pz));color:var(--muted);font:400 calc(12px * var(--pz))/1.4 var(--sans);text-align:center}
.fe-foot{display:flex;align-items:center;justify-content:space-between;flex:none;gap:calc(10px * var(--pz));height:calc(48px * var(--pz));padding:0 calc(14px * var(--pz));border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel-2) 60%,var(--panel))}
.fe-prev{display:flex;align-items:center;gap:calc(10px * var(--pz));min-width:0}
.fe-prev .fe-g{font-size:calc(26px * var(--pz))}
.fe-prev b{overflow:hidden;color:var(--ink);font:650 calc(13px * var(--pz)) var(--sans);text-overflow:ellipsis;white-space:nowrap}
.fe-tones{display:flex;align-items:center;flex:none;gap:calc(7px * var(--pz))}
.fe-tonelabel{margin-right:calc(4px * var(--pz));color:var(--muted);font:600 calc(9.5px * var(--pz))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.fe-tone{display:block;width:calc(17px * var(--pz));height:calc(17px * var(--pz));padding:0;border:0;border-radius:50%;cursor:pointer}
.fe-tone.is-on{box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--brand)}
.fe-pick :is(button,input):focus-visible{outline:none}
.fe-tab:focus-visible{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--brand) 60%,transparent)}
.fe-tone:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* something that doesn't fit (an emoji past 500) nudges the row or the picker */
.fe-full{animation:fe-shake .3s ease}
@keyframes fe-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
/* a small slide in (transform only: a paused page never leaves them invisible) */
@keyframes fe-in{from{transform:translateY(4px)}to{transform:none}}

/* ---- phones: a bottom sheet, the ten favourites pinned on top (a phone has no hover) */
.fe-pick.fe-sheet{position:fixed;inset:auto 0 0 0!important;width:auto;max-width:none;padding-bottom:env(safe-area-inset-bottom,0);border-width:1px 0 0;border-radius:16px 16px 0 0;animation:fe-up .18s ease-out}
.fe-sheet .fe-grab{display:block;flex:none;width:38px;height:4px;margin:8px auto 2px;border-radius:2px;background:var(--line-2)}
.fe-sheet .fe-popular{display:flex;flex:none;justify-content:space-between;padding:2px 12px 8px;border-bottom:1px solid var(--line)}
.fe-sheet .fe-popular .fe-cell{width:34px;height:40px;font-size:27px}
.fe-sheet .fe-grid{grid-template-columns:repeat(8,1fr)}
.fe-sheet .fe-scroll{height:min(232px,34vh)}
.fe-sheet .fe-cell{height:44px;font-size:29px}
@keyframes fe-up{from{transform:translateY(24px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.fe-quick,.fe-pick,.fe-pick.fe-sheet,.fe-full,.ft-count[data-flash]{animation:none}.fe-q .fe-g{transition:none}}