/* =============================================================================
   FF Bio Style Generator — tools/ff-bio-style/bio-style.css
   -----------------------------------------------------------------------------
   Loaded after css/style.css and scoped to .bio (plus the two fixed drawer
   layers), so the tool can never leak into the app or the category pages.

   Colour comes from the site tokens, so both the Deep Maroon brand theme and
   the Pitch Black stealth theme are correct with no duplicated palette. The
   values this file owns are the ones that are deliberately dark in BOTH themes:
   the in-game plate (#130103 / #220306) and the slate controls (#141826) — the
   game's own panel, not the site's paper.

   Sections
     1. locals + page head            5. plate, counter, actions
     2. builder shell                 6. library cards
     3. font grid, tags, decorators   7. shade drawer
     4. colour: picker, quick, modes  8. animations, prose, responsive
   ========================================================================== */

/* --- 1. locals ----------------------------------------------------------- */
.bio {
  --plate: #220306;
  --plate-deep: #130103;
  --plate-line: rgba(255, 77, 109, 0.28);
  --plate-fg: #ffffff;
  --plate-dim: #b0888e;
  --slate: #141826;
  --slate-hi: #1e2436;
  --slate-line: rgba(255, 255, 255, 0.14);
  --ok: #3ddc84;
  --amber: #ffc043;
  --danger-bar: #ff5757;
  --pill-line: var(--line-strong);
  --red: #e63946;
  --red-line: rgba(230, 57, 70, 0.4);
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 12px 30px;
}
html[data-theme="dark"] .bio,
body[data-theme="dark"] .bio {
  --plate: #10131d;
  --plate-deep: #0b0e16;
  --plate-line: rgba(255, 255, 255, 0.12);
  --plate-dim: #7e8798;
  --pill-line: rgba(255, 255, 255, 0.15);
  --red: #ff5a67;
  --red-line: rgba(255, 90, 103, 0.42);
}

.bio-head { margin-bottom: 16px; text-align: center; }
/* one bold line, sized to stay inside the screen at any width */
.bio-title {
  margin: 8px auto 0;
  max-width: 100%;
  white-space: nowrap;
  font-size: clamp(21px, 6.4vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-bright);
  text-wrap: balance;
}
.bio-title-hi {
  background: linear-gradient(95deg, var(--accent-hi), var(--accent), #ff4d6d);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.bio-sub {
  margin: 0 auto 3px;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.bio-head .crumbs { text-align: center; }
#bio-content:empty { display: none; }
/* Same measure as the home page article: 860px centred on desktop, full bleed
   on phones (the tool's own 12px side padding is cancelled, then 16px is given
   back inside). Any future tool gets this for free by using #bio-content. */
#bio-content {
  display: block;
  width: auto;
  margin: 26px -12px 0;
  padding: 0 16px;
  box-sizing: border-box;
  overflow-x: hidden;
}
#bio-content .bio-seo { max-width: none; margin-top: 0; }
#bio-content p, #bio-content li { line-height: 1.78; }
@media (min-width: 1024px) {
  #bio-content { max-width: 860px; margin: 30px auto 0; padding: 0; }
  #bio-content .bio-seo { max-width: 860px; }
}
.bio-head h1 { font-size: clamp(24px, 6vw, 34px); line-height: 1.18; margin: 6px 0 8px; color: var(--text-bright); }
.bio-head p { margin: 0; max-width: 62ch; color: var(--muted); font-size: 15.5px; line-height: 1.7; text-wrap: pretty; }
.bio-head strong { color: var(--accent-link); font-weight: 700; }

/* --- 2. builder shell ---------------------------------------------------- */
.bio-builder {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px;
  display: grid;
  gap: 15px;
}
.bio-field { display: grid; gap: 7px; }
.bio-label,
.bio-field > label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.bio-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bio-label-note { font-size: 11.5px; color: var(--meta); }
.bio-input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  font-size: 16px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.bio-input:focus { border-color: var(--accent-link); }
.bio-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── the two name fields ──────────────────────────────────────────────────
   These are the first thing a visitor touches, so they get real weight: a
   plate-dark well with a gold hairline, the label sitting on the border, and a
   gold glow the moment it takes focus. */
.bio-field { position: relative; }
/* the placeholder carries the label, so the little chip above the box is gone */
.bio-field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bio-field .bio-input {
  height: 54px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: 13px;
  background: var(--plate-deep);
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45);
  transition: border-color 0.18s ease, box-shadow 0.2s ease;
}
.bio-field .bio-input::placeholder { color: var(--plate-dim); font-weight: 400; letter-spacing: 0.06em; }
.bio-field .bio-input:hover { border-color: var(--accent-hi); }
.bio-field .bio-input:focus {
  border-color: var(--accent);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--accent), 0 0 18px rgba(255, 183, 3, 0.32);
}
.bio-field .bio-input:focus-visible { outline: none; }
.bio-group { display: grid; gap: 8px; }

/* --- 3+4. THE RAIL SYSTEM ----------------------------------------------------
   Every control group is one horizontal, swipeable line. Nothing wraps, so the
   builder keeps a fixed height no matter how many options a group holds, and
   the page never reflows when a selection changes.

   Active state is the one loud thing on the page: gold fill, black text.
   Everything at rest is a 1px hairline on transparent.
   -------------------------------------------------------------------------- */
.bio-rail {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 2px 2px 6px;
  margin: 0 -2px;
}
.bio-rail::-webkit-scrollbar { display: none; }
.bio-rail > * { scroll-snap-align: start; }

/* the shared pill: hairline at rest, gold fill when picked */
.bio-font,
.bio-tag,
.bio-deco,
.bio-mode,
.bio-tab,
.bio-grad {
  flex: 0 0 auto;
  border: 1px solid var(--pill-line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.bio-font:hover,
.bio-tag:hover,
.bio-deco:hover,
.bio-mode:hover,
.bio-tab:hover,
.bio-grad:hover { border-color: var(--accent); color: var(--text); }
.bio-font:active,
.bio-tag:active,
.bio-deco:active,
.bio-mode:active,
.bio-tab:active { transform: scale(0.97); }
.bio-font[aria-pressed="true"],
.bio-tag[aria-pressed="true"],
.bio-deco[aria-pressed="true"],
.bio-mode[aria-pressed="true"],
.bio-tab[aria-pressed="true"],
.bio-grad[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(255, 183, 3, 0.4);
}
.bio-font:focus-visible,
.bio-tag:focus-visible,
.bio-deco:focus-visible,
.bio-mode:focus-visible,
.bio-tab:focus-visible,
.bio-grad:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* font pill: sample over label, compact */
.bio-font {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 62px;
  height: 46px;
  padding: 0 12px;
  border-radius: 12px;
}
.bio-font-sample { font-family: var(--glyph); font-size: 15px; line-height: 1.15; }
.bio-font-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }

/* in-game tag pill */
.bio-tag { height: 34px; padding: 0 13px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.bio-tag code { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--dim); }
.bio-tag[aria-pressed="true"] code { color: var(--accent-fg); opacity: 0.75; }

/* group tab (symbol groups, shade families) */
.bio-tab {
  height: 30px;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* symbol wrapper pill — the glyph pair itself is the label */
.bio-deco {
  min-width: 56px;
  height: 38px;
  padding: 0 12px;
  border-radius: 11px;
  color: var(--text);
  font-family: var(--glyph);
  font-size: 14px;
}

/* colour mode pill */
.bio-mode { height: 30px; padding: 0 13px; font-size: 12.5px; }

/* gradient preset pill: the strip is the swatch */
.bio-grad {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 8px;
}
.bio-gradients[hidden] { display: none; }
.bio-grad-strip { width: 30px; height: 8px; border-radius: 999px; flex: 0 0 auto; }
.bio-grad-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; }

/* ── the colour bar: one full-width control carrying the current colour ───
   The dot, the hex and the shade count all sit on it, so nothing beside it has
   to repeat them. Tapping it opens the drawer, where the wheel and the hex field
   live with the full ramps. */
.bio-color-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 7px 14px 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: linear-gradient(180deg, #1b1f2c, #101320);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.bio-color-bar:hover { border-color: var(--accent); box-shadow: 0 0 16px rgba(255, 183, 3, 0.22); }
.bio-color-bar:active { transform: translateY(1px); }
.bio-color-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bio-current-dot {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--accent);
}
.bio-current-hex { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--accent); }
/* the label wraps rather than truncating — the whole sentence has to be readable */
.bio-color-bar-label {
  flex: 1; min-width: 0;
  white-space: normal;
  line-height: 1.35;
  color: #ffffff;
}
.bio-color-bar-go { flex: 0 0 auto; font-size: 15px; color: var(--accent); transition: transform 0.18s ease; }
.bio-color-bar:hover .bio-color-bar-go { transform: translateX(3px); }

/* the wheel + hex pair, now inside the drawer */
.bio-drawer-pick { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px; }
.bio-drawer-pick-note { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); }

.bio-picker-wrap { position: relative; width: 38px; height: 38px; flex: 0 0 auto; }
.bio-picker {
  position: absolute; inset: 0;
  width: 100%; height: 100%; padding: 0;
  border: 1px solid var(--pill-line);
  border-radius: 11px;
  background: none;
  cursor: pointer;
}
.bio-picker::-webkit-color-swatch-wrapper { padding: 3px; }
.bio-picker::-webkit-color-swatch { border: 0; border-radius: 8px; }
.bio-picker::-moz-color-swatch { border: 0; border-radius: 8px; }
.bio-picker:hover { border-color: var(--accent); }
.bio-picker:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bio-hex-wrap {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 3px;
  height: 38px; padding: 0 11px;
  border-radius: 11px;
  border: 1px solid var(--pill-line);
  background: transparent;
}
.bio-hex-wrap:focus-within { border-color: var(--accent); }
.bio-hex-hash { font-family: var(--mono); font-size: 13px; color: var(--dim); }
.bio-hex {
  width: 7ch;
  border: 0; background: none; outline: none;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em;
  color: var(--text); text-transform: lowercase;
}
.bio-shade-open {
  flex: 0 0 auto;
  height: 38px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-link);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.bio-shade-open:hover { background: var(--accent); color: var(--accent-fg); box-shadow: 0 0 14px rgba(255, 183, 3, 0.4); }
.bio-shade-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* one-line shade slider */
.bio-shade-rail { gap: 5px; }
.bio-swatch {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--pill-line);
  background: var(--swatch, currentColor);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.bio-swatch:hover { transform: scale(1.14); border-color: var(--accent); }
.bio-swatch[aria-pressed="true"] {
  transform: scale(1.14);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent), 0 0 14px rgba(255, 183, 3, 0.45);
}
.bio-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- 5. plate, counter, actions ----------------------------------------- */
.bio-plate {
  border: 1px solid var(--plate-line);
  border-radius: 13px;
  background: var(--plate-deep);
  padding: 13px 14px;
  display: grid;
  gap: 9px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.bio-plate-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--plate-dim);
}
.bio-render {
  font-family: var(--glyph);
  font-size: 19px;
  line-height: 1.5;
  color: var(--plate-fg);
  min-height: 1.5em;
  word-break: break-word;
  white-space: pre-wrap;
}
.bio-render.center { text-align: center; }
.bio-render:empty::before { content: "Your bio preview appears here"; color: var(--plate-dim); }
.bio-raw { display: flex; align-items: center; gap: 8px; border-top: 1px dashed var(--plate-line); padding-top: 9px; }
.bio-code {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em;
  color: var(--plate-dim); word-break: break-all;
  -webkit-user-select: all; user-select: all;
}

/* the smart counter */
.bio-count {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--plate-dim);
}
.bio-count.green { color: var(--ok); }
.bio-count.amber { color: var(--amber); }
.bio-count.red { color: var(--danger-bar); font-weight: 700; }
.bio-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.bio-bar-fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: var(--ok);
  transition: width 0.25s ease, background 0.25s ease;
}
.bio-bar-fill.amber { background: var(--amber); }
.bio-bar-fill.red { background: var(--danger-bar); animation: bio-bar-pulse 1.1s ease-in-out infinite; }

.bio-warn {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--danger-bar);
}
.bio-warn[hidden] { display: none; }
.bio-trim {
  height: 30px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--danger-bar);
  background: transparent;
  color: var(--danger-bar);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}
.bio-trim:hover { background: var(--danger-bar); color: #ffffff; }
.bio-trim[hidden] { display: none; }

.bio-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.bio-actions .btn-accent { flex: 1 1 170px; }
.bio-actions .btn-accent.done { filter: brightness(1.12); }

/* the reset button: slate gaming control, not a paper button */
.bio-reset {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--slate-line);
  background: linear-gradient(180deg, var(--slate-hi), var(--slate));
  color: #cfd6e6;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.bio-reset:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.3); }
.bio-reset:active { transform: translateY(1px); }
.bio-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bio-reset .ico { transition: transform 0.4s cubic-bezier(0.3, 0.8, 0.3, 1); }
.bio-reset:hover .ico { transform: rotate(-120deg); }
.bio-reset.spin .ico { animation: bio-spin-once 0.6s cubic-bezier(0.3, 0.8, 0.3, 1); }

/* --- 6. library --------------------------------------------------------- */
.bio-lib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 10px; }
.bio-lib-head h2 { font-size: 19px; margin: 0; color: var(--text-bright); }
.bio-lib-count {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.bio-search { margin-bottom: 10px; }
.bio-chips {
  display: flex; gap: 6px;
  flex-wrap: nowrap; overflow-x: auto;
  padding-bottom: 4px; margin-bottom: 12px;
  scrollbar-width: none;
}
.bio-chips::-webkit-scrollbar { display: none; }

.bio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 9px; }
.bio-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  padding: 10px 11px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.15s ease, box-shadow 0.3s ease;
}
.bio-card:hover { border-color: var(--line-strong); }
.bio-card.in { animation: bio-fade-in-up 0.34s cubic-bezier(0.22, 0.9, 0.28, 1) both; animation-delay: calc(var(--i, 0) * 42ms); }
.bio-card.glow { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok), 0 0 18px rgba(61, 220, 132, 0.35); animation: bio-glow 0.9s ease-out; }
.bio-card .bio-plate { padding: 10px 11px; gap: 7px; background: var(--plate); }
.bio-card .bio-render { font-size: 17px; }
.bio-card .bio-code { font-size: 12px; }
.bio-count.small { font-size: 10.5px; }
.bio-card-foot { display: flex; align-items: center; gap: 6px; }
.bio-card-name {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--meta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bio-copy {
  flex: 0 0 auto;
  height: 32px; padding: 0 15px;
  border-radius: 9px;
  border: 1px solid var(--accent-link);
  background: transparent;
  color: var(--accent-link);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bio-copy:hover { background: var(--soft-hi); }
.bio-copy.done { background: var(--ok); border-color: var(--ok); color: #06240f; font-weight: 700; }
.bio-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bio-empty { padding: 34px 14px; text-align: center; color: var(--dim); font-size: 14.5px; }
.bio-empty[hidden] { display: none; }

/* load more: pulse at rest, ripple on press, spinner while paging */
#bio-more { position: relative; overflow: hidden; }
#bio-more[hidden] { display: none; }
#bio-more:not(.loading) { animation: bio-pulse 2.6s ease-in-out infinite; }
#bio-more.loading { animation: none; }
.bio-ripple {
  position: absolute;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.45;
  transform: scale(0);
  animation: bio-ripple 0.6s ease-out forwards;
  pointer-events: none;
}

/* ── symbol library ──────────────────────────────────────────────────────── */
.bio-sym-preview {
  flex: 0 0 auto;
  min-width: 36px; height: 32px;
  padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--accent);
  font-family: var(--glyph); font-size: 15px;
  color: #ffffff;
  white-space: nowrap; overflow: hidden;
}
.bio-sym-drawer { max-height: 86vh; }
.bio-sym-drawer > * { flex: 0 0 auto; }
.bio-sym-drawer .bio-shade-head { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.bio-sym-grid { flex: 1 1 auto; min-height: 0; }
.bio-shade-drawer .bio-shade-grid { flex: 1 1 auto; min-height: 0; }
.bio-sym-controls { display: grid; gap: 9px; padding: 12px 14px 6px; }
/* the three slot buttons sit centred as a group */
#bio-sym-slots { justify-content: center; gap: 7px; padding-bottom: 2px; }
.bio-slot {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--red-line);
  background: transparent;
  color: var(--red);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.bio-slot:hover { border-color: var(--red); background: rgba(230, 57, 70, 0.09); }
.bio-slot:active { transform: scale(0.97); }
.bio-slot[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(230, 57, 70, 0.4);
}
.bio-slot:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.bio-sym-current {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--tile); padding: 7px 9px;
}
.bio-sym-current-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--meta);
}
.bio-sym-current-val {
  flex: 1; min-width: 0;
  font-family: var(--glyph); font-size: 16px; color: var(--text-bright);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bio-sym-clear {
  flex: 0 0 auto; height: 26px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--muted);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.bio-sym-clear:hover { border-color: var(--red); color: var(--red); }
#bio-sym-tabs { padding: 4px 14px 10px; gap: 7px; }
#bio-sym-tabs .bio-tab { height: 32px; }
#bio-sym-note { padding: 0 14px 9px; }

.bio-sym-grid {
  overflow-y: auto;
  padding: 0 14px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  align-content: start;
}
.bio-sym {
  aspect-ratio: 1; min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-bright);
  font-family: var(--glyph); font-size: 18px;
  transition: background 0.13s ease, border-color 0.13s ease, transform 0.1s ease;
}
.bio-sym:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); transform: scale(1.06); }
.bio-sym:active { transform: scale(0.94); }
.bio-sym:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bio-sym-more {
  grid-column: 1 / -1;
  height: 38px; margin-top: 6px;
  border-radius: 10px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--muted);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
}
.bio-sym-more:hover { border-color: var(--accent); color: var(--text); }

/* --- 7. shade drawer --------------------------------------------------- */
.bio-shade-backdrop {
  position: fixed; inset: 0; z-index: 88;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0; transition: opacity 0.24s ease;
}
.bio-shade-backdrop.on { opacity: 1; }
.bio-shade-backdrop[hidden] { display: none; }
.bio-shade-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 89;
  max-height: 76vh;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--chrome-line);
  border-radius: 18px 18px 0 0;
  background: var(--surface);
  box-shadow: var(--shadow);
  transform: translateY(101%);
  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
  padding-bottom: env(safe-area-inset-bottom);
}
.bio-shade-drawer.on { transform: none; }
.bio-shade-drawer[hidden] { display: none; }
.bio-shade-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
}
.bio-shade-title { flex: 1; min-width: 0; }
.bio-shade-title h2 { margin: 0; font-size: 16px; color: var(--text-bright); }
.bio-shade-total { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-link); }
.bio-shade-close {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 11px;
  border: 1px solid var(--red);
  background: var(--red); color: #ffffff;
  font-size: 16px; line-height: 1;
  transition: filter 0.15s ease, box-shadow 0.18s ease;
}
.bio-shade-close:hover { filter: brightness(1.12); box-shadow: 0 0 14px rgba(230, 57, 70, 0.42); }
.bio-shade-close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
#bio-families { padding: 8px 14px 6px; margin: 0; }
.bio-shade-note { margin: 0; padding: 0 14px 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--meta); }
.bio-shade-grid { overflow-y: auto; padding: 0 14px 16px; }
.bio-shade-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 4px;
}
.bio-shade {
  aspect-ratio: 1;
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  transition: transform 0.1s ease;
}
.bio-shade:hover { transform: scale(1.16); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 3px 10px rgba(0, 0, 0, 0.3); }
.bio-shade:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- 8. animations ----------------------------------------------------- */
@keyframes bio-fade-in-up { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes bio-glow { 0% { box-shadow: 0 0 0 1px var(--ok), 0 0 0 rgba(61, 220, 132, 0.5); } 40% { box-shadow: 0 0 0 1px var(--ok), 0 0 22px rgba(61, 220, 132, 0.55); } 100% { box-shadow: 0 0 0 1px transparent, 0 0 0 rgba(61, 220, 132, 0); } }
@keyframes bio-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 183, 3, 0); } 50% { box-shadow: 0 0 0 4px rgba(255, 183, 3, 0.14); } }
@keyframes bio-ripple { to { transform: scale(26); opacity: 0; } }
@keyframes bio-bar-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes bio-spin-once { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@keyframes bio-toast-in { from { opacity: 0; transform: translate(-50%, 16px) scale(0.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

.bio-toast { animation: bio-toast-in 0.24s cubic-bezier(0.22, 0.9, 0.28, 1) both; }
.bio-toast.ok { background: var(--ok); color: #06240f; box-shadow: 0 8px 26px rgba(61, 220, 132, 0.35); }

/* skeletons */
.bio-skel { pointer-events: none; }
.bio-skel .bio-skel-line,
.bio-skel .bio-skel-foot { position: relative; overflow: hidden; border-radius: 8px; background: color-mix(in srgb, currentColor 9%, transparent); }
.bio-skel .bio-skel-line { height: 1.4em; margin: 4px 0; opacity: 0.5; }
.bio-skel .bio-skel-line.short { width: 62%; }
.bio-skel .bio-skel-foot { height: 32px; opacity: 0.35; }
.bio-skel .bio-skel-line::after,
.bio-skel .bio-skel-foot::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  animation: bio-shimmer 1.15s linear infinite;
}
@keyframes bio-shimmer { to { transform: translateX(100%); } }

/* --- prose ------------------------------------------------------------- */
.bio-seo { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 68ch; }
.bio-seo h2 { font-size: 18px; margin: 0 0 8px; color: var(--text); }
.bio-seo h3 { font-size: 15.5px; margin: 16px 0 6px; color: var(--text); }
.bio-seo p { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; line-height: 1.72; text-wrap: pretty; }
.bio-seo ol, .bio-seo ul { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.bio-seo li { color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.bio-seo code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; color: var(--text); }
.bio-faq { display: grid; gap: 8px; margin-top: 14px; }
.bio-faq-item { border: 1px solid var(--line); border-radius: 11px; background: var(--tile); padding: 11px 13px; }
.bio-faq-q { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.bio-faq-a { font-size: 14px; color: var(--muted); line-height: 1.68; }

/* --- responsive -------------------------------------------------------- */
@media (min-width: 760px) {
  .bio { padding: 20px 20px 36px; }
  .bio-builder { padding: 18px; gap: 17px; }
  .bio-shade-drawer { left: auto; right: 20px; bottom: 20px; width: 420px; max-height: 70vh; border-radius: 16px; border: 1px solid var(--line-strong); }
  .bio-shade-inner { grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); }
}
@media (max-width: 380px) {
  .bio-grid { grid-template-columns: 1fr; }
  .bio-actions .btn-accent { flex: 1 1 100%; }
  .bio-reset { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bio-card.in, #bio-more:not(.loading), .bio-bar-fill.red, .bio-toast { animation: none; }
  .bio-reset .ico { transition: none; }
}