/* Shared by every Peace Hub page: floating light/dark switch and footer credit.
   Uses the page's own tokens: --surface, --line, --ink, --muted, --accent, --gold, --shadow. */
.theme-switch {
  position: fixed; z-index: 60;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  width: 64px; height: 36px; padding: 0;
  border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: scale .2s cubic-bezier(.3, 1.6, .5, 1), border-color .2s;
}
.theme-switch.inline { position: relative; top: auto; right: auto; z-index: auto; flex: none; box-shadow: none; }
.theme-switch:hover { scale: 1.06; border-color: var(--accent); }
.theme-switch:active { scale: .94; }
.theme-switch:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
.ts-track { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: var(--muted); }
.ts-track svg { width: 14px; height: 14px; opacity: .55; }
.ts-knob {
  position: absolute; top: 3px; left: 3px; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold); color: #3a2700;
  box-shadow: 0 2px 6px rgb(0 0 0 / .25);
  transition: translate .5s cubic-bezier(.5, 1.7, .4, 1), background .3s, width .2s;
}
.theme-switch:active .ts-knob { width: 32px; }
.ts-knob svg { position: absolute; width: 15px; height: 15px; transition: opacity .3s, rotate .5s cubic-bezier(.5, 1.6, .4, 1), scale .3s; }
.ts-knob .moon { opacity: 0; rotate: -90deg; scale: .5; }
.theme-switch[data-mode="dark"] .ts-knob { translate: 28px 0; background: var(--accent); color: #0b1422; }
.theme-switch[data-mode="dark"] .ts-knob .sun { opacity: 0; rotate: 90deg; scale: .5; }
.theme-switch[data-mode="dark"] .ts-knob .moon { opacity: 1; rotate: 0deg; scale: 1; }

/* The "blast": the new theme grows out of the switch as a circle with a glowing rim. */
html.theme-blast::view-transition-old(root), html.theme-blast::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-blast::view-transition-old(root) { z-index: 1; }
html.theme-blast::view-transition-new(root) { z-index: 2; }
html.theme-blast * { view-transition-name: none !important; }

/* Going from page to page: the old page lifts away and the new one settles in, while the night-blue banner
   (header.head on every guide, the tapped card on the hub) stays put and stretches into the next page's banner.
   Browsers without cross-page view transitions just load the page as before. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
header.head { view-transition-name: page-head; }
::view-transition-old(root) { animation: 180ms cubic-bezier(.4, 0, 1, 1) both vt-out; }
::view-transition-new(root) { animation: 320ms cubic-bezier(.2, .8, .2, 1) 60ms both vt-in; }
::view-transition-group(page-head) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(page-head), ::view-transition-new(page-head) { height: 100%; object-fit: cover; object-position: 50% 0; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
.ts-ring {
  position: fixed; z-index: 70; pointer-events: none; border-radius: 50%;
  translate: -50% -50%; scale: 0;
  box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 70px 14px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Footer credit with a beating heart */
.made { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 600; }
.made .heart { color: #e5484d; animation: beat 1.4s ease-in-out infinite; transform-origin: center; }
.made:hover .heart { animation-duration: .6s; }
/* transform (not the scale property): on an <svg> only transform keyframes run on the GPU, scale repainted every frame */
@keyframes beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } }

/* The creator's name in the credit is a chip with their avatar's head (added by site.js). It opens their card on
   Peace Live; the head flies up into the card there. A gold pixel twinkles on its corner. */
.made .dev { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-left: 2px; padding: 0 8px 0 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); color: var(--ink);
  font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: border-color .2s, box-shadow .2s, scale .2s cubic-bezier(.3, 1.5, .5, 1); }
.made .dev:has(.dev-hd) { padding-left: 3px; }
.made .dev::after { content: ""; position: absolute; right: -3px; top: -3px; width: 4px; height: 4px; background: var(--gold); pointer-events: none; animation: twinkle 2.8s ease-in-out infinite; }
.made .dev:hover, .made .dev:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent), 0 0 18px color-mix(in srgb, var(--gold) 35%, transparent); outline: none; }
.made .dev:active { scale: .95; }
.dev-hd { position: relative; width: 22px; height: 22px; flex: none; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 120%, rgb(244 189 58 / .75), transparent 70%), #000; }
.dev-hd img { position: absolute; left: calc(50% - 15px); top: -9px; width: 30px; max-width: none; }   /* the whole head, hair to chin (the head picture is 54×62, the head centred 36.5px down) */
.made .dev:hover .dev-hd img { animation: hop .6s var(--ease); }   /* hop and twinkle come from ui.css */
.dev-go { width: 13px; height: 13px; flex: none; color: var(--muted); }
.dev-hd.lift img { visibility: hidden; }
.made .dev[aria-busy="true"] { cursor: progress; }
.made .dev[aria-busy="true"] .dev-go { animation: twinkle .9s ease-in-out infinite; }   /* the card is on its way */
/* The creator's card over the page: Peace Live in a see-through frame (site.js), shown once the card is open. */
.card-frame { position: fixed; inset: 0; z-index: 95; width: 100%; height: 100%; border: 0; background: transparent; visibility: hidden; }
.card-frame.on { visibility: visible; }
html.card-open { overflow: hidden; }
html.card-gutter { scrollbar-gutter: stable; }

@media (prefers-reduced-motion: reduce) {
  .theme-switch, .ts-knob, .ts-knob svg { transition: none; }
  .made .heart, .made .dev::after, .made .dev:hover .dev-hd img { animation: none; }
  .made .dev { transition: none; }
}

/* EN / BM switch, same size and feel as the theme switch */
.lang-switch {
  position: fixed; z-index: 60;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 84px);
  box-sizing: border-box; width: 72px; height: 36px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: 700 11.5px/1 var(--f-mono, ui-monospace, monospace); letter-spacing: .04em; color: var(--muted);
  transition: scale .2s cubic-bezier(.3, 1.6, .5, 1), border-color .2s;
}
.lang-switch.inline { position: relative; top: auto; right: auto; z-index: auto; flex: none; }
.lang-switch:hover { scale: 1.06; border-color: var(--accent); }
.lang-switch:active { scale: .94; }
.lang-switch:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
.ls-opt { position: relative; z-index: 1; text-align: center; transition: color .3s; }
.ls-knob { position: absolute; top: 3px; left: 3px; width: 33px; height: 27px; border-radius: 999px; background: var(--ink); transition: translate .45s cubic-bezier(.5, 1.6, .4, 1); }
.lang-switch[data-lang="en"] .ls-opt[data-v="en"], .lang-switch[data-lang="ms"] .ls-opt[data-v="ms"] { color: var(--bg); }
.lang-switch[data-lang="ms"] .ls-knob { translate: 30px 0; }   /* 69px inside the border: 3px gap on both sides */
@media (prefers-reduced-motion: reduce) { .ls-knob, .ls-opt { transition: none; } }

/* Secret badges, the duck hunt and the bobba filter (site.js). The pop-up is the same night panel on both themes. */
.egg-b { --b: #6b7a90; position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 11px; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--b) 78%, #fff), var(--b) 52%, color-mix(in srgb, var(--b) 78%, #000));
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .28), inset 0 -3px 0 rgb(0 0 0 / .22), 0 1px 2px rgb(0 0 0 / .18); }
.egg-b svg { width: 60%; height: 60%; filter: drop-shadow(0 1.5px 0 rgb(0 0 0 / .35)); }
.egg-b.big { width: 52px; height: 52px; border-radius: 13px; }
button.egg-b { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: scale .2s var(--spring, ease); }
button.egg-b:active { scale: .92; }
button.egg-b[aria-pressed="true"] { outline: 2.5px solid var(--gold); outline-offset: 2px; }
button.egg-b:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.egg-b.lock { background: var(--sunken); box-shadow: none; outline: 1.5px dashed var(--line-strong); outline-offset: -1.5px; color: var(--muted); font: 700 16px var(--f-mono); }
.egg-b.lock[aria-pressed="true"] { outline: 2.5px solid var(--gold); outline-offset: 2px; }
/* The creator's badge: a night tile in a turning holo rim, with a sheen passing over it. The rim is a conic disc turning
   behind the tile (::before, rotate), the night inside sits over it with a see-through 2px edge (::after), and the
   sheen slides across in .egg-in (site.js puts it in): all of it runs on the GPU, nothing repaints. */
.egg-b.holo { padding: 2px; overflow: hidden; isolation: isolate; background: none; }
.egg-b.holo::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(#ff9ad5, #ffd36e, #8affc1, #7fd1ff, #b9a6ff, #ff9ad5); animation: roll 6s linear infinite; pointer-events: none; }
.egg-b.holo::after { content: ""; position: absolute; z-index: -1; inset: 0; border: 2px solid transparent; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, #3d3168, #1b1531) padding-box; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .28), inset 0 -3px 0 rgb(0 0 0 / .22); }
.egg-in { position: absolute; z-index: 1; inset: 0; border: 2px solid transparent; border-radius: inherit; overflow: hidden; pointer-events: none; }
.egg-in::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 250%; translate: -90% 0;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .38) 50%, transparent 65%); animation: egg-sheen 3.4s ease-in-out infinite; }
@keyframes egg-sheen { 0%, 55% { translate: -90% 0; } 100% { translate: 90% 0; } }
.egg-shelf { display: grid; gap: 10px; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); }
.egg-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.egg-note { margin: 0; min-height: 1.5em; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.egg-note b { color: var(--ink); }
.egg-note small { font: 600 11.5px var(--f-mono); color: var(--muted); }
.egg-ducks { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.egg-ducks i { width: 19px; height: 16px; filter: grayscale(1) opacity(.3); }
.egg-ducks i.on { filter: none; }
.egg-ducks i svg, .duck-egg svg { display: block; width: 100%; height: 100%; }
.egg-ducks b { margin-left: 2px; font: 700 12px var(--f-mono); color: var(--ink); }
.egg-pop { position: fixed; z-index: 99; left: 50%; bottom: calc(var(--egg-bottom, 18px) + env(safe-area-inset-bottom, 0px)); translate: -50% 0;
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(360px, calc(100vw - 24px)); padding: 10px 18px 10px 10px;
  border: 1.5px solid #f4bd3a; border-radius: 16px; background: #0d1830; color: #f3f6fb; box-shadow: 0 14px 36px rgb(0 0 0 / .42), inset 0 0 0 1px rgb(255 255 255 / .06); cursor: pointer; }
.egg-pop-t { display: grid; min-width: 0; line-height: 1.25; }
.egg-pop-t small { font: 700 10.5px var(--f-mono); letter-spacing: .08em; color: #f4bd3a; }
.egg-pop-t b { font: 700 17px var(--f-display); }
.egg-pop-t > span { font-size: 13px; color: #a9b8cf; }
.egg-pop .face, .egg-pop .egg-face { width: 52px; height: 52px; flex: none; border-radius: 13px; overflow: hidden; background: radial-gradient(circle at 50% 120%, rgb(244 189 58 / .5), transparent 70%), #000; }
/* The duck: small, a little wobble now and then. Found ones keep quacking when tapped. */
.duck-egg { display: inline-block; width: 26px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; vertical-align: middle; -webkit-tap-highlight-color: transparent; animation: duck-bob 6s ease-in-out infinite; }
.duck-egg:hover { animation: duck-wig .5s ease-in-out; }
.duck-egg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@keyframes duck-bob { 0%, 88%, 100% { rotate: 0deg; translate: 0 0; } 91% { rotate: -9deg; translate: 0 -2px; } 95% { rotate: 7deg; translate: 0 0; } }
@keyframes duck-wig { 30% { rotate: -12deg; } 70% { rotate: 10deg; } }
/* The chat bubble, one look everywhere: the lobby mottos, Peace.say() (quacks, "Added to friends!"…), the Feedback card's
   typing dots and the demo chats. A white bubble with a firm 2px outline and a pixel tail drawn as one piece with it: the
   tail's first row lies on the bottom border and its white part opens it. drop-shadow, not box-shadow, so the shadow
   follows the tail too. --tail-x moves the tail along the bubble (default the middle); --tx nudges it onto the thing it
   points at when the bubble is pushed in from an edge. .below puts the tail on top. */
:root { --bub-tail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h14v2h-2v2h-2v2h-2v2h-2v-2h-2v-2h-2v-2h-2z' fill='%23141b28'/%3E%3Cpath d='M2 0h10v2h-2v2h-2v2h-2v-2h-2v-2h-2z' fill='%23fff'/%3E%3C/svg%3E"); }
.px-bub, .egg-say, .fb-dots { border: 2px solid #141b28; border-radius: 8px; background: #fff; color: #141b28; filter: drop-shadow(0 2px 0 rgb(0 0 0 / .45)); }
.px-bub::after, .egg-say::after, .fb-dots::after { content: ""; position: absolute; left: calc(var(--tail-x, 50%) + var(--tx, 0px)); top: 100%; width: 14px; height: 8px; translate: -50% 0;
  background: var(--bub-tail) 0 0 / 100% 100% no-repeat; pointer-events: none; }
:is(.px-bub, .egg-say).below::after { top: auto; bottom: 100%; scale: 1 -1; }   /* bottom: 100% is the bottom of the top border */
.egg-say { position: fixed; z-index: 99; translate: -50% 0; padding: 4px 9px; font: 700 12.5px/1.3 var(--f-body); white-space: nowrap; pointer-events: none; }
.bobba-shake { animation: bobba .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes bobba { 10%, 90% { translate: -1px 0; } 20%, 80% { translate: 2px 0; } 30%, 50%, 70% { translate: -4px 0; } 40%, 60% { translate: 4px 0; } }
@media (prefers-reduced-motion: reduce) { .duck-egg, .duck-egg:hover, .bobba-shake, .egg-b.holo::before, .egg-in::after { animation: none; } button.egg-b { transition: none; } }
.duck-nest { margin: 4px 0 0; display: flex; justify-content: flex-end; }
.group-head > .duck-egg { margin-left: 2px; }
.egg-sec { margin-bottom: 6px; }
.egg-sec .group-head { position: static; }

/* ── Feedback (site.js) ──────────────────────────────────────────────────────────────────────────────────────────────
   A night card at the top of every footer, the same night blue as the page banners on both themes, with a pixel
   mailbox on a black stage and a Habbo typing bubble. Its chips (and anything with data-feedback) open the message
   sheet: a night strip with the mailbox, the three kinds as chunky tiles, the message, an optional name, what's sent
   with it, and a gold Send. Sent: an envelope flies into the mailbox, its flag goes up, and it says thanks. */
.fb-card { --fb-ink: #f3f6fb; --fb-muted: #a9b8cf; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 12px;
  margin: 0 0 12px; padding: 12px 12px 15px; border-radius: 16px; color: var(--fb-ink); text-align: left;
  background:
    linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(130% 180% at 100% 0%, var(--night-2, #1b2f5a), var(--night-1, #0d1830) 62%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09), 0 10px 26px -14px rgb(13 24 48 / .6); transition: box-shadow .25s; }
.fb-card::before { content: ""; position: absolute; z-index: -1; right: 18%; top: 14px; width: 4px; height: 4px; background: var(--gold); animation: twinkle 2.8s ease-in-out infinite; pointer-events: none; }
.fb-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 17px); opacity: .55; pointer-events: none; }
.fb-hit { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fb-hit:focus-visible { outline: 2.5px solid var(--gold); outline-offset: -4px; }
.fb-card:has(.fb-hit:hover) { box-shadow: inset 0 0 0 1px rgb(244 189 58 / .5), 0 0 0 3px rgb(244 189 58 / .12), 0 12px 28px -14px rgb(13 24 48 / .7); }
.fb-card:has(.fb-hit:hover) .fb-face .fb-mb { animation: hop .6s var(--ease); }
.fb-card:has(.fb-hit:active) .fb-face { scale: .96; }
.fb-face { position: relative; z-index: 1; width: 56px; height: 62px; flex: none; pointer-events: none; transition: scale .2s var(--spring, ease); }
.fb-stage { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: radial-gradient(circle at 50% 118%, rgb(244 189 58 / .62), transparent 66%), #000; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.fb-mb { position: absolute; left: 50%; bottom: 3px; width: 42px; height: 48px; translate: -50% 0; margin-left: 3px; }
.fb-mb svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 1px rgb(141 184 255 / .55)); }
.fb-mb .fl-u { opacity: 0; }
.fb-face.got .fl-d { opacity: 0; }
.fb-face.got .fl-u { opacity: 1; }
/* The Habbo typing bubble: three pixel dots that bob while the card is on screen. */
.fb-dots { --tail-x: 11px; position: absolute; z-index: 2; right: -5px; top: -10px; display: flex; align-items: center; gap: 3px; height: 18px; padding: 0 5px; }   /* the shared chat bubble (above) */
.fb-dots i { width: 3.5px; height: 3.5px; background: #141b28; opacity: .5; }
.fb-card.on .fb-dots i { animation: fb-dot 1.3s ease-in-out infinite; }
.fb-card.on .fb-dots i:nth-child(2) { animation-delay: .15s; }
.fb-card.on .fb-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes fb-dot { 0%, 55%, 100% { translate: 0 0; opacity: .45; } 25% { translate: 0 -2.5px; opacity: 1; } }
.fb-tx { position: relative; z-index: 1; display: grid; gap: 2px; min-width: 0; pointer-events: none; }
.fb-kick { display: flex; align-items: center; gap: 7px; min-width: 0; font: 700 10.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.fb-new { flex: none; font: 700 9.5px/1 var(--f-mono); letter-spacing: .06em; color: #fff; background: #e5484d; border-radius: 4px; padding: 3px 5px 2px; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .2); animation: pulse .5s var(--spring) .3s both; }
.fb-t { display: block; font: 700 18px/1.15 var(--f-display); color: #fff; text-shadow: 0 2px 0 rgb(0 0 0 / .35); }
.fb-s { display: block; font-size: 13px; line-height: 1.35; color: var(--fb-muted); }
.fb-chips { position: relative; z-index: 2; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fb-chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 38px; padding: 0 8px; border: 1.5px solid rgb(255 255 255 / .15); border-radius: 11px;
  background: rgb(255 255 255 / .07); color: #fff; font: 700 13.5px var(--f-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: scale .2s var(--spring, ease), border-color .2s, background .2s, translate .2s var(--ease, ease); }
.fb-chip:hover { border-color: color-mix(in srgb, var(--c) 75%, transparent); background: color-mix(in srgb, var(--c) 18%, rgb(255 255 255 / .04)); translate: 0 -1px; }
.fb-chip:hover .fb-ic { animation: hop .6s var(--ease); }
.fb-chip:active { scale: .94; }
.fb-chip:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 2px; }
.fb-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px; background: var(--c); color: var(--ci, #fff);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), inset 0 -2px 0 rgb(0 0 0 / .2); }
.fb-ic svg { width: 14px; height: 14px; }
@media (min-width: 720px) {
  .fb-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; padding: 14px 18px 17px 14px; }
  .fb-t { font-size: 20px; }
  .fb-chips { grid-column: auto; display: flex; gap: 8px; }
  .fb-chip { height: 40px; padding: 0 14px 0 9px; }
}

/* The tag: a small copy of the card's mailbox on the left edge of long pages. site.js moves it every frame (translate
   on .fb-tag, scale and rotate on its button) until it lands in the card, whose own mailbox hides while it's out. */
/* Its box is the screen's height with the browser's bars showing (100svh), which site.js reads: that one doesn't change
   as a phone browser hides its address bar on scroll, so the docked tag stays put. */
.fb-tag { position: fixed; z-index: 24; left: 0; top: 0; width: 0; height: 100vh; height: 100svh; padding-left: env(safe-area-inset-left, 0px); pointer-events: none; }
.fb-tag.off { visibility: hidden; }
.fb-tag-b { position: absolute; left: -28px; top: -31px; width: 56px; height: 62px; padding: 0; border: 0; border-radius: 14px; background: none; scale: .64; cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent; transition: translate .35s cubic-bezier(.3, 1.5, .5, 1); }
.fb-tag-b::after { content: ""; position: absolute; inset: -14px -14px -14px 0; }
.fb-tag .fb-face { display: block; }
.fb-tag .fb-stage { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 8px 18px -8px rgb(0 0 0 / .6); }
.fb-tag-b:active .fb-face { scale: .92; }
.fb-tag-b:focus-visible { outline: none; }
.fb-tag-b:focus-visible .fb-stage { outline: 3.5px solid var(--gold); outline-offset: 3px; }
.fb-tag.in { visibility: hidden; }
.fb-tag.in .fb-tag-b { pointer-events: none; }
.fb-tag-l { position: absolute; left: 26px; top: 0; width: max-content; translate: -6px -50%; padding: 6px 9px 5px; border-radius: 8px; background: var(--night-1, #0d1830); color: var(--gold);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 6px 16px -8px rgb(0 0 0 / .5); font: 700 10.5px/1 var(--f-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, translate .35s cubic-bezier(.3, 1.5, .5, 1); }
.fb-tag.dock .fb-tag-b:focus-visible { translate: 12px 0; }
.fb-tag.dock:has(.fb-tag-b:focus-visible) .fb-tag-l { opacity: 1; translate: 12px -50%; }
@media (hover: hover) {
  .fb-tag.dock .fb-tag-b:hover { translate: 12px 0; }
  .fb-tag.dock:has(.fb-tag-b:hover) .fb-tag-l { opacity: 1; translate: 12px -50%; }
}
.fb-card .fb-mb { transform-origin: 50% 100%; }
.fb-card.away .fb-face .fb-mb, .fb-card.away .fb-face .fb-dots { opacity: 0; }
@media (pointer: coarse) { :root:has(:is(input, textarea, select):focus) .fb-tag { visibility: hidden; } }   /* the keyboard is up */
@media print { .fb-tag { display: none; } }
@media (prefers-reduced-motion: reduce) { .fb-tag { transition: opacity .2s, visibility .2s; } .fb-tag.in { opacity: 0; } .fb-tag-b, .fb-tag-l { transition: none; } }

/* The sheet */
dialog.fb-sheet { overflow-x: hidden; }
@media (min-width: 720px) { dialog.fb-sheet { width: min(500px, calc(100vw - 32px)); } }
html.fb-open { overflow: hidden; }
.fb-top { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; padding: 14px 12px 15px 16px; color: #f3f6fb;
  background:
    linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(130% 200% at 100% 0%, var(--night-2, #1b2f5a), var(--night-1, #0d1830) 62%); }
.fb-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 17px); opacity: .55; }
.fb-top .sheet-grip { position: absolute; left: 50%; top: 0; translate: -50% 0; margin-top: 7px; background: rgb(255 255 255 / .28); }
.fb-top-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fb-top h2 { margin: 0; font: 700 21px/1.15 var(--f-display); color: #fff; text-shadow: 0 2px 0 rgb(0 0 0 / .35); }
.fb-top p { margin: 0; font-size: 13px; line-height: 1.35; color: #a9b8cf; }
.fb-x { align-self: flex-start; width: 36px; height: 36px; --surface: rgb(255 255 255 / .08); --line: rgb(255 255 255 / .18); --ink-2: #e6edf7; }
.fb-x:hover { color: #fff; border-color: rgb(255 255 255 / .45); }
.fb-body { padding: 14px 16px 16px; display: grid; gap: 12px; }
.fb-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fb-type { display: flex; align-items: center; gap: 9px; min-width: 0; height: 52px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-2); text-align: left;
  -webkit-tap-highlight-color: transparent; transition: border-color .2s, background .2s, box-shadow .2s, scale .2s var(--spring); }
.fb-type .fb-ic { width: 28px; height: 28px; border-radius: 9px; }
.fb-type .fb-ic svg { width: 16px; height: 16px; }
.fb-type-t { display: grid; min-width: 0; line-height: 1.2; }
.fb-type-t b { font-size: 14px; font-weight: 800; color: var(--ink); }
.fb-type-t small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-type:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }
.fb-type:active { scale: .96; }
.fb-type[aria-checked="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 11%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
@media (max-width: 400px) { .fb-type { flex-direction: column; justify-content: center; gap: 3px; height: 62px; padding: 0 4px; text-align: center; } .fb-type-t small { display: none; } .fb-type-t b { font-size: 13.5px; } }
.fb-field { display: grid; gap: 6px; min-width: 0; }
.fb-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 700 12.5px var(--f-body); color: var(--ink-2); }
.fb-lab small { font-size: 12px; font-weight: 500; color: var(--muted); }
.fb-area-box { position: relative; display: block; }
.fb-area, .fb-name input { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: 500 16px/1.45 var(--f-body); outline: none; transition: border-color .2s, box-shadow .2s; }
.fb-area { display: block; min-height: 112px; resize: none; padding: 10px 12px 24px; }
.fb-area:focus, .fb-name input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.fb-area::placeholder, .fb-name input::placeholder { color: var(--muted); opacity: .85; }
.fb-count { position: absolute; right: 10px; bottom: 7px; font: 600 11px var(--f-mono); color: var(--muted); pointer-events: none; }
.fb-count.near { color: var(--warn); }
.fb-name { position: relative; display: block; }
.fb-name > svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.fb-name input { height: 42px; padding: 0 12px 0 36px; }
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* One row: the (i) button, then the chips, which scroll sideways when they don't fit (faded at the edge that has more).
   The row keeps the chips' height while folded too, so opening it doesn't change the sheet's height. */
.fb-ctx { display: flex; align-items: center; gap: 5px; min-width: 0; height: 20px; font-size: 12px; color: var(--muted); }
.fb-ctx-k { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; margin: -4px 1px -4px -4px; padding: 4px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 600 12px var(--f-body); cursor: pointer; transition: background .15s, color .15s; }
.fb-ctx-k:hover { background: var(--hover); color: var(--ink-2); }
.fb-ctx-k:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 0; }
.fb-ctx-k svg { width: 14px; height: 14px; }
.fb-ctx-k svg:last-child { width: 13px; height: 13px; transition: rotate .2s; }
.fb-ctx-k[aria-expanded="true"] svg:last-child { rotate: 180deg; }
.fb-ctx-l { flex: 1; min-width: 0; display: flex; gap: 5px; margin: -3px 0; padding: 3px 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fb-ctx-l::-webkit-scrollbar { display: none; }
.fb-ctx-l[hidden] { display: none; }
.fb-ctx-l.fr { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.fb-ctx-l.fl { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.fb-ctx-l.fl.fr { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.fb-ctx i { flex: none; font-style: normal; font-weight: 600; font-size: 11.5px; line-height: 1; color: var(--ink-2); background: var(--sunken); border-radius: 6px; padding: 4px 7px; white-space: nowrap; }
.fb-ctx i.me { display: inline-flex; align-items: center; gap: 4px; }
.fb-ctx i.me svg { width: 12px; height: 12px; margin: -2px 0; color: var(--muted); }
.fb-ctx i.bad { color: #c42f2f; background: color-mix(in srgb, #e5484d 12%, var(--surface)); }
:root[data-theme="dark"] .fb-ctx i.bad { color: #f58c8c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fb-ctx i.bad { color: #f58c8c; } }
.fb-err { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 11px; border-radius: 11px; font-size: 13px; line-height: 1.4; color: var(--ink);
  background: color-mix(in srgb, #e5484d 11%, var(--surface)); border: 1px solid color-mix(in srgb, #e5484d 38%, var(--line)); }
.fb-err svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: #e5484d; }
.btn.fb-send { width: 100%; height: 46px; font: 800 15px var(--f-body); letter-spacing: .01em; }
.fb-send svg { width: 17px; height: 17px; transition: translate .25s var(--ease); }
.fb-send:hover svg { translate: 2px -2px; }
.fb-send[aria-busy="true"] { pointer-events: none; opacity: .85; }
.fb-send[aria-busy="true"] svg { animation: fb-go .8s ease-in-out infinite; }
@keyframes fb-go { 50% { translate: 3px -3px; } }
/* Sent */
.fb-done { display: grid; justify-items: center; align-content: center; gap: 4px; padding: 22px 18px 18px; text-align: center; }
.fb-env { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 8px; border-radius: 20px; background: radial-gradient(circle at 50% 120%, rgb(244 189 58 / .55), transparent 68%), #0d1830;
  box-shadow: inset 0 0 0 1.5px rgb(244 189 58 / .55), 0 8px 22px -8px rgb(13 24 48 / .6); }
.fb-env svg { width: 44px; height: 30px; filter: drop-shadow(0 2px 0 rgb(0 0 0 / .35)); }
.fb-done h3 { margin: 0; font: 700 26px/1.1 var(--f-display); }
.fb-done p { margin: 0; max-width: 34ch; font-size: 14px; line-height: 1.45; color: var(--muted); }
.fb-copy { width: 100%; margin: 14px 0 0; padding: 10px 12px 11px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--sunken); text-align: left; }
.fb-copy figcaption { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; color: var(--muted); }
.fb-copy figcaption .fb-ic { width: 20px; height: 20px; border-radius: 6px; }
.fb-copy figcaption .fb-ic svg { width: 12px; height: 12px; }
.fb-copy figcaption b { font-size: 12.5px; color: var(--ink); }
.fb-copy figcaption span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-copy blockquote { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fb-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 12px; }
.fb-acts .btn { width: 100%; height: 44px; }
.fb-fly { position: fixed; z-index: 5; width: 40px; height: 27px; pointer-events: none; filter: drop-shadow(0 3px 0 rgb(0 0 0 / .3)); }
.fb-fly svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .fb-card::before, .fb-card.on .fb-dots i, .fb-new, .fb-card:has(.fb-hit:hover) .fb-face .fb-mb, .fb-chip:hover .fb-ic { animation: none; } .fb-chip, .fb-type, .fb-face { transition: none; } }