/*
Theme Name: SoShareIT
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 8.1
Text Domain: soshareit
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ---------- tokens ---------- */
:root {
  --ink: #12121c;
  --ink-2: #22222c;
  --body: #3d3d47;
  --muted: #6b6b7c;
  --muted-2: #8a8a9c;
  --faint: #a0a0b0;

  /* One green for everything that means "copy / saved / positive". The old sheet
     drifted between #14a97b and #16a34a for the same idea. */
  --brand: #14a97b;
  --brand-ink: #0e8b64;
  --brand-soft: #e7f8ee;
  --brand-line: #bfe3cb;
  --brand-lit: #48c79b;

  --pink: #f0338f;
  --pink-soft: #fde9f3;
  --violet-soft-bg: #ece8fe;
  --danger: #d4483b;
  --violet: #5b3df5;
  --violet-soft: #7c5cf5;
  --orange: #f2a33c;
  --tomato: #f0503c;
  --tomato-ink: #e0432f;

  /* Blue has exactly one job on this site: the male half of the gender vote. */
  --blue: #2f6df6;
  --blue-soft: #f2f7ff;
  --blue-line: #d8e4fb;

  --surface: #ffffff;
  --surface-2: #f5f5fa;
  --surface-3: #fdf9f4;
  --line: #ececf4;
  --line-2: #f0f0f5;
  --line-3: #e4e2ec;
  --line-hover: #d9d2f7;

  /* Text shades that were repeated as literals a dozen times over. */
  --ink-3: #4a4a58;
  --body-2: #5b5b6b;
  --foot: #7a7a8c;

  --shell: 1160px;
  --pad: 15px;
  --radius-lg: 22px;
  --radius: 14px;
  --radius-sm: 10px;

  --fs-body: 17px;
  --shadow-card: 0 4px 14px rgba(90, 70, 180, .08);
  --shadow-soft: 0 10px 30px rgba(90, 70, 180, .07);
}

@media (min-width: 640px) {
  :root { --pad: 20px; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--surface);
  color: #1a1a24;
  font: 400 var(--fs-body)/1.6 Poppins, "Noto Color Emoji", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; }
ul { margin: 0; }

a { color: var(--violet-soft); text-decoration: none; }
a:hover { color: var(--pink); }

h1, h2, h3, h4 { margin: 0; color: var(--ink); text-wrap: pretty; letter-spacing: -.3px; }
h1 { font-size: clamp(30px, 6vw, 61px); line-height: 1.14; font-weight: 800; letter-spacing: -.6px; }
h2 { font-size: clamp(22px, 3.4vw, 30px); line-height: 1.25; font-weight: 800; }
h3 { font-size: clamp(18px, 2.4vw, 22px); line-height: 1.35; font-weight: 700; }
h4 { font-size: 18px; line-height: 1.4; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }

/* ---------- layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.stack { display: flex; flex-direction: column; gap: clamp(18px, 3vw, 26px); }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.panel {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.5vw, 26px) clamp(15px, 2.5vw, 24px) clamp(20px, 2.5vw, 28px);
}
.panel--plain { background: var(--surface); border: 1px solid #eeedf5; }
.panel--warm { background: var(--surface-3); }

.grid { display: grid; gap: 12px; }
.grid--letters { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; }
.grid--sym     { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.grid--cards   { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.grid--wide    { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--half    { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.section-note { margin-top: 6px; font-size: var(--fs-body); color: var(--muted); }
.section-meta { font-size: 15px; color: var(--faint); font-family: ui-monospace, Menlo, monospace; }
.eyebrow { font-size: 15px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-2); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line-2);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 34px);
  padding-block: 11px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand__mark { width: 28px; height: 28px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-size: 20.8px; font-weight: 700; color: #16161f; }
.brand__sub { font-size: 14px; font-weight: 500; color: var(--brand); }

/* Desktop: the panel is a transparent row that holds the links and the tools.
   Below the breakpoint it becomes the drawer the toggle opens. */
.nav-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2.5vw, 34px);
  flex: 1 1 auto;
  min-width: 0;
}

.nav-toggle {
  display: none;
  width: 42px; height: 42px; flex: none;
  align-items: center; justify-content: center;
  margin-left: auto;
  border: 1px solid #eceaf5; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-3); cursor: pointer;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav ul { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); list-style: none; padding: 0; margin: 0; }
.site-nav a { font-size: var(--fs-body); font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.site-nav a:hover { color: var(--violet-soft); }
.site-nav a[aria-current="page"],
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a { color: #16161f; }
/* one flat level — sub-menus sit inline rather than opening a second layer */
.site-nav .sub-menu { display: none; }

.header-tools { display: flex; align-items: center; gap: 14px; flex: none; }
.header-tools a, .pill-select {
  display: flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 500; color: var(--ink-3); white-space: nowrap;
}
.pill-select { border: 1px solid #eceaf5; border-radius: 999px; padding: 5px 10px; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .nav-panel {
    display: none;
    order: 3;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: min(70vh, 420px);
    overflow-y: auto;
    padding-bottom: 8px;
    border-top: 1px solid var(--line-2);
    margin-top: 8px;
  }
  .nav-panel[data-open="true"] { display: flex; }

  .site-nav { overflow-x: visible; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .site-nav li { border-bottom: 1px solid var(--line-2); }
  .site-nav a { display: block; padding: 13px 2px; font-size: 17px; }

  .header-tools { padding-top: 14px; gap: 16px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f3eefe 0%, #f8f4ff 35%, #fdfbff 75%, #fff 100%);
  padding: clamp(30px, 5vw, 58px) var(--pad) clamp(34px, 4vw, 54px);
  text-align: center;
}
.hero__inner { position: relative; max-width: 900px; margin-inline: auto; }
.hero h1 { text-transform: uppercase; }
.hero h1 em { font-style: normal; color: var(--pink); }
.hero__lede { margin-top: 16px; margin-inline: auto; max-width: 470px; font-size: var(--fs-body); line-height: 1.65; color: var(--body-2); }

.float { position: absolute; pointer-events: none; user-select: none; line-height: 1; }
.float--emoji { filter: drop-shadow(0 12px 18px rgba(124, 92, 245, .3)); }
@media (prefers-reduced-motion: no-preference) {
  .float--anim { animation: floaty 6.5s ease-in-out infinite; }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (max-width: 1080px) { .float { display: none; } }

/* ---------- generator box ---------- */
.gen {
  max-width: 780px;
  margin: 26px auto 0;
  background: var(--surface);
  border: 1px solid #f2e9e2;
  border-radius: 18px;
  padding: clamp(15px, 2.5vw, 20px);
  box-shadow: var(--shadow-soft);
  text-align: left;
}
/* The one thing a first-time visitor has to notice. A pale field on a white card
   reads as decoration, so this one states what it is: a labelled step, a drawn
   border, an icon, and a ring that breathes until the visitor touches it. */
.gen__label {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 10px;
  font-size: 16px; font-weight: 600; color: var(--ink-2);
}
.gen__step {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tomato); color: #fff; font-size: 14px; font-weight: 700;
}

.gen__box { position: relative; display: flex; align-items: center; }
.gen__box-icon {
  position: absolute; left: 17px; display: flex; pointer-events: none;
  color: var(--tomato);
}

.gen__input {
  width: 100%;
  height: 70px;
  border: 2px solid #f3d2c6;
  border-radius: 14px;
  background: var(--surface);
  padding-left: 54px;
  padding-right: clamp(14px, 3vw, 22px);
  font: 600 clamp(19px, 3vw, 24px)/1 inherit;
  font-family: inherit;
  color: var(--ink);
  outline: none;
}
.gen__input::placeholder { color: #b3aebd; font-weight: 500; }
.gen__input:hover { border-color: #eeb69f; }
.gen__input:focus {
  border-color: var(--tomato);
  box-shadow: 0 0 0 4px rgba(240, 80, 60, .15);
}

/* Three slow pulses, then it stops on its own; any interaction ends it at once. */
@media (prefers-reduced-motion: no-preference) {
  .gen[data-idle="true"] .gen__input { animation: gen-nudge 2.2s ease-in-out 3; }
}
@keyframes gen-nudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 80, 60, 0); }
  50%      { box-shadow: 0 0 0 7px rgba(240, 80, 60, .16); }
}
.gen__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 14px; }
.gen__field {
  display: flex; align-items: center; gap: 9px;
  height: 48px; border: 1px solid #ecebf1; border-radius: var(--radius-sm); padding-inline: 12px;
}
.gen__field select {
  flex: 1; min-width: 0; border: 0; background: none; padding: 0;
  font-family: inherit; font-size: 16px; color: #3d3d47; outline: none; cursor: pointer;
  appearance: none;
}
.gen__badge {
  width: 22px; height: 22px; flex: none; border-radius: 5px; background: var(--violet);
  display: flex; align-items: center; justify-content: center;
}
.gen__glyph { font-size: 16px; flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; font-weight: 700; color: #fff;
  text-decoration: none;
}
.btn:hover { color: #fff; }
.btn--primary { background: var(--tomato); font-size: var(--fs-body); padding: 14px 22px; }
.btn--primary:hover { background: var(--tomato-ink); }
.btn--block { width: 100%; height: 56px; margin-top: 14px; font-size: 18px; }
.btn[disabled] { opacity: .6; cursor: default; }

.gen__hint { margin-top: 14px; text-align: center; font-size: 16px; color: var(--muted-2); }
kbd {
  border: 1px solid #f0c893; background: #fdf3e2; border-radius: 5px;
  padding: 2px 7px; font-family: ui-monospace, Menlo, monospace; font-size: 14px; color: #3d3d47;
}
.gen__result {
  display: none;
  margin-top: 14px; padding: 14px 16px;
  background: #f4fbf7; border: 1px solid var(--brand-line); border-radius: 12px;
  align-items: center; gap: 12px; flex-wrap: wrap;
}
.gen__result[data-open="true"] { display: flex; }
.gen__result output { flex: 1; min-width: 0; font-size: clamp(18px, 3vw, 22px); font-weight: 600; color: var(--ink-2); word-break: break-word; }

/* ---------- cards ----------
   Centred and column-flexed so every card in a row is the same height, with the
   rank pinned to the top and the caption to the bottom whatever the nickname's
   length. Without that the grid staggers as soon as one name wraps. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px 15px;
  cursor: pointer;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: inherit;
}
.card:hover { border-color: var(--line-hover); box-shadow: var(--shadow-card); }
.card__top { display: flex; align-items: center; justify-content: center; gap: 10px; }
.card__rank { font-size: 14px; color: var(--faint); }
.card__flag { font-size: 14px; font-weight: 600; color: var(--brand); }

/* The nickname is the reason the card exists, so it gets the size and the room.
   Its weight is left alone on purpose: these strings carry their own Unicode
   styling, and a synthesised bold over glyphs with no bold face just smears them. */
.card__nick {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  margin: 11px 0 9px;
  font-size: 22px; line-height: 1.35; color: var(--ink);
  overflow-wrap: anywhere;
}

/* Supporting numbers, quiet, so they read as a caption under the name. */
.card__meta { display: block; font-size: 13px; line-height: 1.4; color: var(--faint); }

.tile {
  border: 0; border-radius: 12px; padding: 14px 8px; text-align: center; cursor: pointer;
  font-family: inherit; color: inherit;
}
.tile:hover { transform: translateY(-2px); }
.tile__letter { font-size: 22px; font-weight: 700; color: var(--muted-2); }
.tile__name { margin-top: 5px; font-size: 17px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }

.font-card, .sym-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 10px; text-align: center; cursor: pointer; font-family: inherit; color: inherit; width: 100%;
}
.font-card:hover, .sym-card:hover { border-color: var(--line-hover); }
.font-card__sample { font-size: 23px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.font-card__label, .sym-card__count { margin-top: 9px; font-size: 13px; color: var(--faint); }
.sym-card__name { font-size: 16px; font-weight: 600; color: var(--ink-2); }
.sym-card__glyphs { margin-top: 8px; font-size: 18px; letter-spacing: 3px; color: var(--body-2); }

.rank-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 12px 11px 14px; min-width: 0; text-align: left;
  font-family: inherit; color: inherit; cursor: pointer; width: 100%;
}
.rank-row:hover { border-color: var(--brand-line); }
.rank-row__n { flex: none; min-width: 22px; font-size: 16px; font-weight: 700; color: var(--faint); }
.rank-row__n--hot { color: var(--orange); }
.rank-row__body { flex: 1; min-width: 0; }
.rank-row__nick { display: block; font-size: 20px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.rank-row__meta { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--faint); }
.vote {
  flex: none; display: flex; align-items: center; gap: 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 9px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--muted-2);
}
.vote[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.copy-btn {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 7px;
  background: var(--brand); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.copy-btn:hover { background: var(--brand-ink); }
.searched-badge {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: var(--brand-soft); color: var(--brand);
}
.searched-badge--hot { background: #fdece0; color: var(--tomato); }

.field {
  height: 42px; width: 100%; max-width: 260px;
  border: 1px solid var(--line-3); border-radius: 9px; padding-inline: 14px;
  font-family: inherit; font-size: 16px; color: var(--ink-2); background: var(--surface); outline: none;
}
.field:focus-visible { border-color: var(--violet-soft); }

/* ---------- generated results ---------- */
.results { display: none; margin-top: clamp(18px, 3vw, 26px); }
.results[data-open="true"] { display: flex; flex-direction: column; gap: clamp(18px, 3vw, 26px); }
.results .panel { scroll-margin-top: 80px; }

.result-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.result-head h2 { overflow-wrap: anywhere; }

.nick-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* A nickname and its controls. One shape for every list: the styled text takes the
   room it needs, copy and save stay pinned to the right so they never move. */
.variant {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 8px 8px 13px; min-width: 0;
}
.variant:hover { border-color: var(--line-hover); box-shadow: var(--shadow-card); }
.variant__text {
  flex: 1; min-width: 0; border: 0; background: none; padding: 4px 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-family: inherit; text-align: left; cursor: pointer;
}
.variant__nick { font-size: 20px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.variant__label { font-size: 12px; line-height: 1.3; color: var(--faint); }
.variant__actions { display: flex; align-items: center; gap: 4px; flex: none; }
.variant__btn {
  width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 7px; background: var(--surface-2); color: var(--muted-2); cursor: pointer;
}
.variant__btn:hover { background: var(--brand-soft); color: var(--brand); }
.variant__btn--fav:hover { background: var(--pink-soft); color: var(--pink); }
.variant__btn--fav[aria-pressed="true"] { background: var(--pink-soft); color: var(--pink); }
.variant__btn--fav[aria-pressed="true"] svg { fill: currentColor; }

/* Community contributions read as cards: the nickname centred, its tallies beneath. */
.variant--card { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 12px 10px; }
.variant--card .variant__text { align-items: center; }
.variant--card .variant__nick { font-size: 21px; }
.variant__foot { display: flex; align-items: center; justify-content: center; gap: 8px; }

.tally {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface);
  padding: 4px 9px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.tally--up { color: var(--brand); }
.tally--down { color: var(--danger); }
.tally--up[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-line); }
.tally--down[aria-pressed="true"] { background: #fdecea; border-color: #f1c9c3; }
.tally__n { font-variant-numeric: tabular-nums; }

/* ---------- per-name blocks ----------
   Each one appears only once the name behind it is known, so they are laid out to
   sit comfortably inside whatever paragraph of the page body introduced them. */
.name-block { margin-top: 16px; }
.tally-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tally__label { font-weight: 500; color: var(--muted); }
.tally-row .tally { padding: 9px 16px; font-size: 15px; }

.gender-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--blue-line); border-radius: 999px; background: var(--blue-soft);
  padding: 9px 16px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--blue);
}
.gender-btn--f { border-color: #fbd8e8; background: var(--pink-soft); color: var(--pink); }
.gender-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 1px currentColor; }
.gender-btn__icon { font-size: 17px; line-height: 1; }
.gender-btn__n { font-variant-numeric: tabular-nums; font-weight: 700; }

.gender-bar { margin-top: 12px; height: 8px; border-radius: 999px; background: #fbd8e8; overflow: hidden; }
.gender-bar span { display: block; height: 100%; background: var(--blue); }

.searches { font-size: 16px; line-height: 1.75; color: var(--muted); overflow-wrap: anywhere; }

.query-list { display: flex; flex-wrap: wrap; gap: 8px; }
.query-chip {
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  padding: 7px 14px; font-size: 15px; color: var(--ink-3);
}
.query-chip:hover { border-color: var(--line-hover); color: var(--violet); }

.share-row { display: flex; gap: 10px; flex-wrap: wrap; }
.share-row .field { flex: 1 1 240px; max-width: none; height: 48px; }

.related-list { gap: 8px; }
.related-list .chip { font-weight: 500; font-size: 15px; padding: 7px 14px; }

/* Favourites live in the browser, so the header count is per visitor. */
.fav { position: relative; }
.fav__toggle {
  display: flex; align-items: center; gap: 6px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 500; color: var(--ink-3); white-space: nowrap;
}
.fav__count {
  min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 999px;
  background: var(--pink); color: #fff; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.fav__panel {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 60;
  width: min(320px, calc(100vw - 30px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); padding: 14px;
}
.fav__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 15px; font-weight: 700; color: var(--ink-2);
}
.fav__clear {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--violet-soft);
}
.fav__list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 300px; overflow-y: auto; }
.fav__list:empty { margin-top: 0; }
.fav__empty { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--muted-2); }

@media (max-width: 860px) {
  .fav__panel { position: static; width: auto; margin-top: 10px; box-shadow: none; }
}


/* ---------- staged progress ---------- */
.pstep__head { display: flex; align-items: center; gap: 10px; }
.pstep__title { flex: 1; min-width: 0; font-size: clamp(17px, 2.4vw, 20px); font-weight: 700; }
.pstep__pct { flex: none; font-size: 15px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }

.pstep__bar { margin-top: 14px; height: 8px; border-radius: 999px; background: #e6e4f0; overflow: hidden; }
.pstep__bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-lit));
  border-radius: 999px;
}
@media (prefers-reduced-motion: no-preference) {
  .pstep__bar span { transition: width .45s cubic-bezier(.4, 0, .2, 1); }
}

.pstep__list {
  display: grid; gap: 9px; margin-top: 16px; padding: 0; list-style: none;
  counter-reset: none;
}
.pstep__item {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--faint);
}
.pstep__dot {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #ded9f4; background: var(--surface); color: transparent;
}
.pstep__item[data-state="active"] { color: var(--ink-2); font-weight: 600; }
.pstep__item[data-state="active"] .pstep__dot { border-color: var(--brand); }
.pstep__item[data-state="done"] { color: var(--muted); }
.pstep__item[data-state="done"] .pstep__dot { border-color: var(--brand); background: var(--brand); color: #fff; }

.loading { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--muted); }
.spinner {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid #ded9f4; border-top-color: var(--violet);
}
@media (prefers-reduced-motion: no-preference) {
  .spinner { animation: spin .7s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* community contributions */
.contrib-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.contrib-form .field { max-width: none; flex: 1 1 240px; height: 48px; }
.contrib-note { margin-top: 10px; font-size: 15px; color: var(--muted-2); }
.more-row { display: flex; justify-content: center; margin-top: 18px; }
.btn-more {
  background: var(--surface); border: 1px solid var(--line-3); border-radius: 9px; padding: 11px 20px;
  font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink-3); cursor: pointer;
}
.btn-more:hover { border-color: var(--line-hover); }

.toggle-group { display: inline-flex; border: 1px solid var(--line-3); border-radius: 999px; overflow: hidden; }
.toggle-group button {
  border: 0; background: var(--surface); padding: 7px 15px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink-3);
}
.toggle-group button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ---------- why / stats / faq ---------- */
.why-card { background: #fafaff; border: 1px solid #f0eff7; border-radius: var(--radius); padding: 18px 16px 20px; }
.why-card__icon {
  display: flex; width: 40px; height: 40px; border-radius: var(--radius-sm);
  align-items: center; justify-content: center;
  background: var(--violet-soft-bg); color: var(--violet);
}
.why-card h3 { margin-top: 13px; font-size: 18px; }
.why-card p { margin-top: 7px; font-size: 16px; line-height: 1.65; color: var(--muted); }

/* Closing counter band. It used to be two near-black cards with a cyan number —
   a palette that appears nowhere else on the site, which is why it read as bolted
   on. Now it sits on the same soft ground as the panels above it, and each figure
   borrows the colour that already means that action elsewhere: violet for names
   generated, brand green for nicknames copied. */
.stats {
  text-align: center;
  padding: clamp(28px, 4vw, 40px) var(--pad) clamp(30px, 4vw, 42px);
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.stats__lede { margin-top: 12px; font-size: 18px; color: var(--body); }
.stats__note { margin-top: 10px; font-size: 16px; color: var(--muted-2); }
.stats__note strong { color: var(--brand); font-weight: 700; }
.stats__stamp { margin-top: 26px; font-size: 15px; color: var(--faint); }

.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); gap: 18px; justify-content: center; margin-top: 26px; }
.stat {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px 20px; box-shadow: var(--shadow-card);
}
.stat__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm); font-size: 22px; line-height: 1;
}
.stat__n { margin-top: 12px; font-size: clamp(32px, 5.5vw, 44px); font-weight: 800; letter-spacing: -.5px; line-height: 1.05; }
.stat__label { margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--ink-2); }
.stat__sub { margin-top: 5px; font-size: 14px; color: var(--faint); }

.stat--made .stat__icon { background: var(--violet-soft-bg); }
.stat--made .stat__n { color: var(--violet); }
.stat--copied .stat__icon { background: var(--brand-soft); }
.stat--copied .stat__n { color: var(--brand); }

.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.faq-item + .faq-item { margin-top: 10px; }
.faq-item__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: none; border: 0; cursor: pointer; padding: 14px 16px;
  font-size: 16px; font-weight: 500; color: var(--ink-2); text-align: left;
}
.faq-item__q svg { flex: none; transition: transform .18s ease; }
.faq-item[data-open="true"] .faq-item__q svg { transform: rotate(180deg); }
.faq-item__a { display: none; padding: 0 16px 15px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.faq-item[data-open="true"] .faq-item__a { display: block; }

.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; margin-top: 20px; }
.guide-grid h3 { margin-bottom: 7px; font-size: 19.5px; }
.guide-grid p { font-size: var(--fs-body); line-height: 1.75; color: var(--body-2); }

/* ---------- blog list ---------- */
.page-head {
  background: linear-gradient(180deg, #f3eefe 0%, #f9f6ff 55%, #fff 100%);
  padding: clamp(30px, 5vw, 54px) var(--pad);
}
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--muted-2); }
.crumbs a { color: var(--muted-2); }
.crumbs [aria-current] { color: var(--ink-2); font-weight: 500; }
.page-head h1 { margin-top: 14px; font-size: clamp(30px, 5.5vw, 46px); line-height: 1.15; }
.page-head__lede { margin-top: 14px; max-width: 620px; font-size: var(--fs-body); line-height: 1.7; color: var(--body-2); }
.page-head__meta { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 22px; font-size: 15px; color: var(--muted-2); }

.chip {
  border: 1px solid var(--line-3); background: var(--surface); color: var(--ink-3);
  border-radius: 999px; padding: 9px 16px; font-family: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.post {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(14px, 2.5vw, 24px);
  align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(14px, 2vw, 18px);
}
.post:hover { border-color: var(--line-hover); box-shadow: var(--shadow-soft); }
.post__thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: clamp(38px, 7vw, 54px);
  background: linear-gradient(135deg, #efe8ff 0%, #fde9f3 100%);
}
.post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post__body { min-width: 0; }
.post__body h3 { margin-top: 10px; color: var(--ink); }
.post__excerpt { margin-top: 9px; font-size: var(--fs-body); line-height: 1.65; color: var(--body-2); }
.post__meta strong { color: var(--ink-2); font-weight: 600; }
.tag { border-radius: 6px; padding: 4px 9px; font-size: 14px; font-weight: 700; background: var(--violet-soft-bg); color: var(--violet); }

.post--featured {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 3vw, 32px);
  background: #faf8ff; border-color: #eee9fb; border-radius: 20px;
  padding: clamp(18px, 3vw, 28px);
}
.post--featured .post__thumb { aspect-ratio: 16 / 10; font-size: clamp(52px, 9vw, 86px); }
.post--featured h2 { margin-top: 12px; font-size: clamp(21px, 3vw, 29px); }
.post__meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 13px; font-size: 15px; color: var(--muted-2); }
.badge-featured { background: var(--brand); color: #fff; border-radius: 6px; padding: 4px 9px; font-size: 14px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }

@media (max-width: 620px) {
  .post { grid-template-columns: minmax(0, 1fr); }
  .post__thumb { max-width: none; }
}

.pager { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pager a, .pager span {
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 15px;
  font-size: 16px; font-weight: 600; color: var(--ink-3);
}
.pager [aria-current="page"], .pager .current { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700; }
.pager__off, .pager .dots { color: #c4c4d0; }

.empty { border: 1px dashed var(--line-3); border-radius: 16px; padding: 40px 20px; text-align: center; font-size: var(--fs-body); color: var(--muted); }
[hidden] { display: none !important; }

/* ---------- article ---------- */
.progress { position: sticky; top: 0; z-index: 40; height: 4px; background: #f0eff7; }
.progress__bar { height: 4px; width: 0; background: var(--brand); }

.article { padding-top: clamp(24px, 4vw, 42px); }
.article__head { max-width: 760px; }
.article__head h1 { margin-top: 14px; font-size: clamp(28px, 5.2vw, 44px); line-height: 1.16; }
.article__lede { margin-top: 16px; font-size: clamp(18px, 2.4vw, 21px); line-height: 1.6; color: var(--body-2); }
.byline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line-2);
}
.byline__avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--violet-soft-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-body); font-weight: 700; color: var(--violet);
}
.byline__who { display: flex; flex-direction: column; gap: 3px; }
.byline__name { font-size: 16px; font-weight: 600; color: var(--ink-2); }
.byline__when { font-size: 15px; color: var(--muted-2); }
.byline__spacer { flex: 1 1 auto; }
.btn-ghost {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line-3); border-radius: 9px; padding: 9px 14px;
  font-size: 15px; font-weight: 600; color: var(--ink-3); cursor: pointer;
}
.btn-ghost:hover { border-color: var(--line-hover); }

.article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(24px, 3vw, 34px);
  align-items: start;
}
@media (max-width: 900px) {
  .article__layout { grid-template-columns: minmax(0, 1fr); }
  .article__aside { max-width: none; }
}

.article__hero {
  aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; position: relative;
  background: linear-gradient(135deg, #efe8ff 0%, #fde9f3 100%);
  display: flex; align-items: center; justify-content: center; font-size: clamp(60px, 10vw, 104px);
}
/* Featured images here are anything from a wide banner to a small square portrait.
   Containing rather than cropping keeps a face intact and never upscales a small
   file into a blurry band; the tinted box fills whatever is left over. */
.article__hero img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }

.prose > * + * { margin-top: 22px; }
.prose p, .prose li { font-size: 18px; line-height: 1.8; color: var(--body); }
.prose h2 { margin-top: 30px; font-size: clamp(22px, 3vw, 28px); }
.prose h3 { margin-top: 26px; font-size: clamp(19px, 2.4vw, 23px); }
.prose h2 + p, .prose h3 + p { margin-top: 12px; }
.prose ul, .prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose img, .prose figure { border-radius: 12px; }
.prose figure { margin: 0; }
.prose figcaption { margin-top: 8px; font-size: 15px; color: var(--muted-2); text-align: center; }
.prose blockquote {
  margin: 22px 0 0; padding: 18px 22px;
  background: #faf8ff; border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0;
}
.prose blockquote p { font-style: italic; color: var(--body); }
.prose code {
  background: var(--surface-2); border-radius: 5px; padding: 2px 6px;
  font-family: ui-monospace, Menlo, monospace; font-size: .92em;
}
.prose pre { background: var(--surface-2); border-radius: 12px; padding: 16px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose th { background: var(--surface-2); font-weight: 700; }
.prose .table-scroll { overflow-x: auto; }
.prose hr { border: 0; border-top: 1px solid var(--line); }
.prose iframe, .prose video { max-width: 100%; border-radius: 12px; }

.limits { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.limits__row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f4f4f9; }
.limits__row:last-child { border-bottom: 0; }
.limits__row:nth-child(even) { background: #fafafd; }
.limits__game { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink-2); }
.limits__n { flex: none; font-size: var(--fs-body); font-weight: 700; color: var(--orange); }
.limits__note { flex: none; min-width: 96px; text-align: right; font-size: 15px; color: var(--muted-2); }

.tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.tags a { background: var(--surface-2); border-radius: 999px; padding: 7px 14px; font-size: 15px; font-weight: 600; color: var(--ink-3); }

.article__aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.aside-box { background: var(--surface-2); border-radius: 16px; padding: 20px; }
.aside-box--warm { background: var(--surface-3); border: 1px solid #f3e7db; }
.aside-box--plain { background: var(--surface); border: 1px solid var(--line); }
.toc { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.toc a { font-size: 16px; color: var(--ink-3); }
.next-list { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.next-item { display: flex; gap: 12px; align-items: flex-start; }
.next-item__thumb {
  width: 46px; height: 46px; flex: none; border-radius: var(--radius-sm); overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 21px; background: var(--violet-soft-bg);
}
.next-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.next-item__title { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.next-item__meta { display: block; margin-top: 4px; font-size: 15px; color: var(--faint); }

.more-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: block; }
.more-card:hover { border-color: var(--line-hover); box-shadow: var(--shadow-soft); }
.more-card__thumb {
  display: flex; width: 46px; height: 46px; border-radius: var(--radius-sm); overflow: hidden;
  align-items: center; justify-content: center; font-size: 22px; background: var(--violet-soft-bg);
}
.more-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.more-card__title { display: block; margin-top: 13px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.more-card__meta { display: block; margin-top: 9px; font-size: 15px; color: var(--muted-2); }

.cta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: center; }
.link-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: var(--fs-body); font-weight: 600; color: var(--violet); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line-2); background: var(--surface); padding-top: 34px; margin-top: clamp(30px, 5vw, 50px); }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; }
.site-footer h2 { font-size: 15px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--ink-2); }
.site-footer__about { margin-top: 14px; max-width: 230px; font-size: 15px; line-height: 1.75; color: var(--foot); }
.link-col { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; list-style: none; padding: 0; }
.link-col a { font-size: 15px; color: var(--foot); }
.social { display: flex; gap: 9px; margin-top: 16px; }
.social a { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.contact { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.contact div { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--foot); }
.contact strong { font-weight: 600; color: var(--ink-2); }
.contact svg { flex: none; }
.site-footer__base {
  margin-top: 26px; border-top: 1px solid var(--line-2); padding: 14px 0 18px;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.site-footer__base span { font-size: 15px; color: var(--muted-2); text-align: center; }
.site-footer__base strong { color: var(--ink-2); font-weight: 600; }

/* ---------- bottom quick nav (phones) ----------
   Off entirely on wider screens: the header already carries this navigation there,
   and a fixed bar would only eat vertical space. */
.btmnav { display: none; }

@media (max-width: 860px) {
  .btmnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(90, 70, 180, .07);
    /* Clear the home indicator on phones that have one. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .btmnav__item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 2px 7px;
    border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.2;
    color: var(--muted-2); text-align: center;
  }
  .btmnav__item.is-current { color: var(--violet); }
  .btmnav__item svg { width: 22px; height: 22px; }

  /* The one action the site exists for, lifted out of the row. */
  .btmnav__item--cta { color: var(--tomato); }
  .btmnav__fab {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-top: -22px; border-radius: 50%;
    background: var(--tomato); color: #fff;
    box-shadow: 0 6px 16px rgba(240, 80, 60, .38);
    border: 3px solid var(--surface);
  }
  .btmnav__fab svg { width: 24px; height: 24px; }

  /* Nothing at the end of the page should hide behind the bar. */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0)); }
}

/* ---------- back to top ----------
   Sits opposite the toast so the two never overlap, and stays out of the way until
   there is actually something to scroll back over. */
.to-top {
  position: fixed; right: var(--pad); bottom: 20px; z-index: 80;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink-3); cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.to-top:hover { border-color: var(--line-hover); color: var(--violet); }

@media (prefers-reduced-motion: no-preference) {
  .to-top { transition: opacity .18s ease, transform .18s ease; }
  .to-top[hidden] { display: flex !important; opacity: 0; transform: translateY(8px); pointer-events: none; }
}

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 14px);
  background: var(--ink); color: #fff; border-radius: var(--radius-sm);
  padding: 12px 18px; font-size: 16px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  z-index: 90; max-width: calc(100vw - 30px); text-align: center;
}
.toast[data-open="true"] { opacity: 1; transform: translate(-50%, 0); }

/* Both floaters sit above the bottom bar. This has to come after their own rules,
   because a media query carries no extra specificity — only source order decides. */
@media (max-width: 860px) {
  .to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0)); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0)); }
}

/* ---------- WordPress content bits ---------- */
.alignleft { float: left; margin: 6px 22px 16px 0; }
.alignright { float: right; margin: 6px 0 16px 22px; }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption { margin-top: 8px; font-size: 15px; color: var(--muted-2); text-align: center; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.prose .wp-block-table { overflow-x: auto; }
.prose ul.wp-block-list, .prose ol.wp-block-list { display: block; }
.prose ul.wp-block-list li, .prose ol.wp-block-list li { margin-top: 10px; }
.prose .wp-block-embed__wrapper { position: relative; }

/* legacy nickname markup that may live inside published content */
.prose .fb-comments { display: block; margin-top: 10px; }

/* ---------- narrow screens: one gutter, not three ----------
   A card inside .shell pays the page gutter and then its own padding, so content
   ends up ~30px from the edge on a phone. Below this width the cards bleed out by
   exactly the page gutter, which makes their own padding the page margin — the
   global .shell padding is untouched, so anything that is not a card keeps it. */
@media (max-width: 640px) {
  .panel,
  .post,
  .gen {
    margin-inline: calc(var(--pad) * -1);
    border-radius: 0;
  }

  /* A card nested inside a card has already been paid for: drop its chrome rather
     than bleeding it a second time. */
  .prose .panel {
    margin-inline: 0;
    padding-inline: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }

  .gen { max-width: none; }
  .empty { border-radius: 0; }
}

/* ---------- a11y ---------- */
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media print {
  .site-header, .site-footer, .progress, .toast, .gen, .btmnav, .to-top { display: none; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   Copy items sized by their content
   --------------------------------------------------------------------------
   Nicknames, kaomoji, emoji and glyph combos are wildly different lengths: a
   two-character kaomoji and a thirty-character decorated name are both single
   items. Laying them out on a fixed column track gave every item the same
   width, so short items sat in a mostly empty box and long ones were squeezed
   and wrapped — the grid looked machine-stamped rather than like a set of
   things you can pick up.

   These lists therefore flow instead of aligning to a track: each item takes
   the width its own text needs, and the leftover space on a line is shared out
   so the row still ends flush. `flex-basis: auto` is what sizes to content;
   `flex-grow: 1` is what fills the line.

   Weight is deliberately not used on any of this text. These glyphs already
   carry their own styling — bolding a decorated nickname fights the decoration
   and, for scripts like Devanagari and Arabic, degrades the letterforms.
   ========================================================================== */

.grid.nick-grid,
.grid.grid--sym,
.grid.grid--letters {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Content-sized, but never narrower than a thumb target nor wider than the row. */
.grid.nick-grid > *,
.grid.grid--sym > *,
.grid.grid--letters > * {
  flex: 1 0 auto;
  min-width: 0;
  max-width: 100%;
}

.grid.nick-grid > .variant { flex-basis: auto; }

/* The name itself decides the item's width; the controls keep their own size. */
.variant__text { flex: 0 1 auto; }
.variant__nick { overflow-wrap: anywhere; }

/* The font sample grid holds one decorated rendering of the name per item, so it
   flows on the same rule rather than on 205px columns. `grid--flow` marks any
   list whose items are sized by their own text. */
.grid.grid--flow {
  display: flex;
  flex-wrap: wrap;
}
.grid.grid--flow > * {
  flex: 1 0 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
}
.grid.grid--flow > .font-card { padding-inline: 18px; }

/* Weight belongs to headings and UI chrome, never to a glyph the reader copies. */
.variant__nick,
.variant__label,
.font-card__sample,
.sym-card__name,
.sym-card__glyphs,
.tile__name,
.tile__letter,
.rank-row__nick,
.chip[data-copy],
[data-copy] {
  font-weight: 400;
}

/* Tallies and counters sit beside items and stay legible without weight. */
.tally,
.vote,
.rank-row__n { font-weight: 500; }

/* Narrow screens: let a long decorated name own a whole line instead of being
   wrapped into a two-character column. */
@media (max-width: 480px) {
  .grid.nick-grid > .variant { flex-basis: 100%; }
}

/* ---------- a name page: a tool, with writing underneath ---------- */

/* The heading and the input share the first screen. Everything an article layout
   would put between them — breadcrumb, category chip, author card, reading time,
   share button — is not rendered on these pages at all, so there is nothing here
   to hide; this only tightens what remains. */
.hero--name { padding-block: clamp(20px, 3vw, 34px) clamp(20px, 3vw, 30px); }
.hero--name h1 {
  max-width: 20ch;
  margin-inline: auto;
  font-size: clamp(26px, 4.6vw, 44px);
  line-height: 1.16;
}

/* The writing is a reference column: narrower than the tool above it, because
   long measure is what makes reference text hard to scan. */
.namepage__body {
  max-width: 860px;
  padding-block: clamp(18px, 3vw, 30px) clamp(34px, 5vw, 56px);
}
.namepage__lede {
  margin: 0 0 clamp(18px, 3vw, 26px);
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.6;
  color: var(--body);
}

/* Inline contents: a name page has one column, so the sidebar table of contents
   becomes a row of jump links above the writing. */
.namepage__toc {
  margin-bottom: clamp(18px, 3vw, 26px);
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.toc--inline { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.toc--inline a { font-size: 15px; color: var(--ink-3); }

.namepage__meta {
  margin-top: clamp(26px, 4vw, 38px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
}

/* Sideways links, as names rather than as article cards. */
.namepage__more { margin-top: clamp(24px, 4vw, 34px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ---------- data tables inside an article ---------- */

/* A four-column reference table squeezed into a phone turns every cell into a
   column of single words and the row grows to twenty lines. Giving the table a
   floor width lets the columns keep sensible proportions and hands the overflow
   to the scroller that already wraps it, which is what it is there for. */
.prose .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: 18px;
  border-radius: 10px;
}
.prose .table-scroll > table { min-width: 620px; margin: 0; }
.prose .table-scroll th,
.prose .table-scroll td { white-space: normal; vertical-align: top; }

/* The scroller must never be mistaken for the end of the table. */
.prose .table-scroll { scrollbar-width: thin; }

@media (max-width: 600px) {
  .prose table { font-size: 15px; }
  .prose th, .prose td { padding: 9px 10px; }
}