/* PalToolkit calculator + breed widget. Builds on the global tokens in site.css; every var() has a fallback so the
   tools still look right if site.css is missing. Phone first (390 px), no horizontal page scroll. */

.pa-calc {
  --pa-paper: var(--paper-2, #121a30);
  --pa-card: var(--card, #111a2e);
  --pa-ink: var(--ink, #1c1917);
  --pa-ink-2: var(--ink-2, #57534e);
  --pa-line: var(--line, #e2dccd);
  --pa-line-2: var(--line-2, #cfc7b4);
  --pa-accent: var(--accent, #0f766e);
  --pa-accent-soft: var(--accent-soft, #d8efe9);
  --pa-accent-ink: var(--accent-ink, #0b5d56);
  --pa-on-accent: var(--accent-contrast, #fff);
  --pa-warn: var(--warn, #9a3412);
  --pa-focus: var(--focus, #0f766e);
  --pa-radius: var(--radius, 14px);
  --pa-radius-sm: var(--radius-sm, 8px);
  color: var(--pa-ink);
  background: var(--pa-card);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  padding: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.pa-calc *, .pa-calc *::before, .pa-calc *::after { box-sizing: border-box; }
.pa-calc :focus-visible { outline: 2px solid var(--pa-focus); outline-offset: 2px; }

/* screen-reader only */
.pa-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- tabs: 3x2 grid on phones, one row from 640 px */
.pa-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--paper-2, #efeadd); border-radius: calc(var(--pa-radius) - 4px); margin-bottom: 12px; }
.pa-tab { appearance: none; border: 0; background: transparent; color: var(--pa-ink-2); font: inherit; font-size: .875rem; font-weight: 600; padding: 8px 6px; border-radius: var(--pa-radius-sm); cursor: pointer; min-height: 40px; line-height: 1.15; }
.pa-tab:hover { color: var(--pa-ink); }
.pa-tab[aria-selected="true"] { background: var(--pa-card); color: var(--pa-accent-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
@media (min-width: 640px) { .pa-tabs { display: flex; } .pa-tab { flex: 1 1 auto; padding: 8px 12px; } }
.pa-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.pa-panel[hidden] { display: none; }

/* ---- form controls */
.pa-label { display: block; font-size: .8125rem; font-weight: 600; color: var(--pa-ink-2); margin-bottom: 4px; }
.pa-picker, .pa-ctl { min-width: 0; }
.pa-field { position: relative; }
.pa-input, .pa-select {
  width: 100%; font: inherit; font-size: 1rem; /* 16px: no iOS zoom */ color: var(--pa-ink); background: var(--pa-paper);
  border: 1px solid var(--pa-line-2); border-radius: var(--pa-radius-sm); padding: 10px 12px; min-height: 44px;
}
.pa-input::placeholder { color: var(--ink-3, #6b645c); }
.pa-input:focus, .pa-select:focus { border-color: var(--pa-accent); outline: 2px solid var(--pa-accent-soft); outline-offset: 0; }
.pa-input--sm { padding: 8px 10px; min-height: 40px; }
.pa-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: min(50vh, 320px); overflow-y: auto;
  margin: 0; padding: 4px; list-style: none; background: var(--pa-card); border: 1px solid var(--pa-line-2);
  border-radius: var(--pa-radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.pa-list { contain: layout paint style; }
.pa-opt { padding: 6px 8px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.pa-opt[aria-selected="true"], .pa-opt:hover { background: var(--pa-accent-soft); }
.pa-opt .pa-chip { pointer-events: none; }

.pa-grid2 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.pa-grid2--even { grid-template-columns: 1fr; }
.pa-grid3 { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 520px) { .pa-grid2--even { grid-template-columns: 1fr 1fr; } .pa-grid3 { grid-template-columns: repeat(3, 1fr); } }
.pa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.pa-row > .pa-picker { grid-column: 1 / -1; }
@media (min-width: 520px) { .pa-row > .pa-picker { grid-column: auto; } }
.pa-row--tight { grid-template-columns: 1fr; }

.pa-btn { font: inherit; font-weight: 600; font-size: .9375rem; border-radius: var(--pa-radius-sm); padding: 8px 14px; min-height: 44px; cursor: pointer; border: 1px solid var(--pa-accent); background: var(--pa-accent); color: var(--pa-on-accent); }
.pa-btn--ghost { background: transparent; color: var(--pa-accent-ink); border-color: var(--pa-line-2); }
.pa-btn--ghost:hover { border-color: var(--pa-accent); }
.pa-btn--icon { width: 44px; padding: 0; font-size: 1.125rem; background: var(--pa-paper); color: var(--pa-ink); border-color: var(--pa-line-2); }
.pa-btn[hidden] { display: none; }
.pa-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Pal chip: element dots + name + paldeck no. (no game art) */
.pa-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: inherit; text-decoration: none; padding: 2px 0; }
a.pa-chip:hover .pa-name { text-decoration: underline; text-underline-offset: 2px; }
.pa-chip::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(90deg, var(--pa-e1) 50%, var(--pa-e2, var(--pa-e1)) 50%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset; }
.pa-chip--none::before { display: none; }
.pa-e-neutral { --pa-e1: var(--el-neutral, #57534e); } .pa-e2-neutral { --pa-e2: var(--el-neutral, #57534e); }
.pa-e-fire { --pa-e1: var(--el-fire, #b3380b); } .pa-e2-fire { --pa-e2: var(--el-fire, #b3380b); }
.pa-e-water { --pa-e1: var(--el-water, #0b5f99); } .pa-e2-water { --pa-e2: var(--el-water, #0b5f99); }
.pa-e-grass { --pa-e1: var(--el-grass, #3f6b0c); } .pa-e2-grass { --pa-e2: var(--el-grass, #3f6b0c); }
.pa-e-electric { --pa-e1: var(--el-electric, #c48a00); } .pa-e2-electric { --pa-e2: var(--el-electric, #c48a00); }
.pa-e-ice { --pa-e1: var(--el-ice, #0b6479); } .pa-e2-ice { --pa-e2: var(--el-ice, #0b6479); }
.pa-e-ground { --pa-e1: var(--el-ground, #7c4a14); } .pa-e2-ground { --pa-e2: var(--el-ground, #7c4a14); }
.pa-e-dark { --pa-e1: var(--el-dark, #5b2a86); } .pa-e2-dark { --pa-e2: var(--el-dark, #5b2a86); }
.pa-e-dragon { --pa-e1: var(--el-dragon, #9f1239); } .pa-e2-dragon { --pa-e2: var(--el-dragon, #9f1239); }
.pa-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-no { font-size: .75rem; color: var(--pa-ink-2); font-family: var(--font-mono, ui-monospace, monospace); }
.pa-rank { font-size: .75rem; color: var(--pa-accent-ink); background: var(--pa-accent-soft); border-radius: 999px; padding: 1px 7px; margin-left: auto; }
.pa-chip--none { color: var(--pa-ink-2); }

/* ---- results */
.pa-result { min-height: 64px; }
.pa-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 12px; background: var(--pa-paper); border: 1px solid var(--pa-line); border-radius: var(--pa-radius-sm); font-size: 1.0625rem; }
.pa-eq + .pa-eq { margin-top: 8px; }
.pa-op { color: var(--pa-ink-2); font-weight: 700; }
.pa-child .pa-chip { background: var(--pa-accent-soft); border-radius: 999px; padding: 4px 10px; }
.pa-child .pa-name { color: var(--pa-accent-ink); }
.pa-gender { font-size: .8125rem; color: var(--pa-ink-2); flex-basis: 100%; }
.pa-why, .pa-hint, .pa-status, .pa-fine { color: var(--pa-ink-2); font-size: .875rem; margin: 6px 0 0; line-height: 1.45; }
.pa-status { margin: 0; }
.pa-fine { font-size: .75rem; }
.pa-warn { color: var(--pa-warn); font-size: .875rem; margin: 6px 0 0; }

.pa-pairs { contain: content; }
.pa-pairs, .pa-steps { list-style: none; margin: 0; padding: 0; border: 1px solid var(--pa-line); border-radius: var(--pa-radius-sm); max-height: 55vh; overflow-y: auto; }
.pa-steps { list-style: decimal inside; max-height: none; }
.pa-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 8px 10px; border-top: 1px solid var(--pa-line); }
.pa-pair:first-child { border-top: 0; }
.pa-pairs:empty { display: none; }

.pa-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 6px 0 0; padding: 0; }
.pa-chips:empty { display: none; }
.pa-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--pa-paper); border: 1px solid var(--pa-line-2); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: .875rem; max-width: 100%; }
.pa-x { appearance: none; border: 0; background: transparent; color: var(--pa-ink-2); font-size: 1.125rem; line-height: 1; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; flex: none; }
.pa-x:hover { background: var(--pa-accent-soft); color: var(--pa-ink); }
.pa-pset { min-width: 0; }

.pa-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.pa-stats > div { background: var(--pa-paper); border: 1px solid var(--pa-line); border-radius: var(--pa-radius-sm); padding: 10px; }
.pa-stats > div:last-child { grid-column: 1 / -1; }
.pa-stats dt { font-size: .75rem; color: var(--pa-ink-2); }
.pa-stats dd { margin: 2px 0 0; font-size: 1.375rem; font-weight: 700; color: var(--pa-accent-ink); }

/* ---- sortable table: scrolls inside its own box only */
.pa-scroll { overflow: auto; max-height: 60vh; border: 1px solid var(--pa-line); border-radius: var(--pa-radius-sm); -webkit-overflow-scrolling: touch; }
.pa-scroll { contain: content; }
.pa-table { width: 100%; border-collapse: collapse; font-size: .875rem; table-layout: fixed; }
.pa-c-pal { width: 37%; }
.pa-c-num { width: 13%; }
.pa-table td.pa-num { overflow: visible; text-overflow: clip; font-size: .8125rem; color: var(--pa-ink-2); }
@media (max-width: 519px) {
  .pa-table .pa-no { display: none; }            /* phones: the name matters more than the deck number */
  .pa-table td { padding: 6px 4px 6px 8px; }
  .pa-table .pa-sort { padding: 8px 4px 8px 8px; font-size: .8125rem; }
  .pa-c-pal { width: 38%; } .pa-c-num { width: 12%; }
}
.pa-table .pa-chip { max-width: 100%; }
.pa-table th { position: sticky; top: 0; z-index: 1; background: var(--pa-card); text-align: left; border-bottom: 1px solid var(--pa-line-2); padding: 0; }
.pa-table td { padding: 6px 8px; border-top: 1px solid var(--pa-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-table tr:first-child td { border-top: 0; }
.pa-num { text-align: right; }
th.pa-num .pa-sort { text-align: right; }
.pa-sort { appearance: none; border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--pa-ink-2); width: 100%; text-align: inherit; padding: 8px 10px; cursor: pointer; }
[aria-sort="ascending"] .pa-sort::after { content: " ▲"; color: var(--pa-accent); }
[aria-sort="descending"] .pa-sort::after { content: " ▼"; color: var(--pa-accent); }
.pa-dim td { color: var(--pa-ink-2); }
.pa-widget { margin-bottom: 16px; display: grid; gap: 8px; }

@media (prefers-reduced-motion: reduce) { .pa-calc * { scroll-behavior: auto !important; } }

/* ---- v2: stacked tool cards (home) + game icons */
.tool { margin: 0 0 16px; }
.tool > .h2row { margin-bottom: 4px; }
.tool > p.tool-desc { color: var(--ink-2); font-size: .92rem; margin: 0 0 12px; }
.tool-body.pa-calc { background: transparent; border: 0; padding: 0; border-radius: 0; }
.tool-body { min-height: 96px; }
.tool[data-tool="mine"] .tool-body { min-height: 460px; }
.pa-ico { width: 24px; height: 24px; border-radius: 50%; background: var(--card-hi, #1e2b4d); flex: none; object-fit: contain; }
.pa-chip--img::before { display: none; }
.pa-child .pa-ico { width: 40px; height: 40px; }
.pa-child .pa-chip { padding: 4px 12px 4px 4px; }
.pa-kico { width: 18px; height: 18px; vertical-align: -4px; }
.pa-eq { background: var(--card-2, #182340); }
.pa-count { font-size: .875rem; color: var(--pa-ink-2); }
.pa-own-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pa-own-bar .pa-input { flex: 1 1 200px; width: auto; }
.pa-own-box { max-height: 380px; overflow-y: auto; border: 1px solid var(--pa-line); border-radius: var(--pa-radius-sm); padding: 8px; background: var(--paper-2, #121a30); contain: content; }
.pa-own { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.pa-own li { margin: 0; }
.pa-own li[hidden] { display: none; }
.pa-own-t { appearance: none; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: var(--pa-radius-sm); border: 1px solid var(--pa-line); background: var(--card, #111a2e); color: var(--pa-ink); font: inherit; cursor: pointer; min-height: 96px; }
.pa-own-t:hover { border-color: var(--pa-accent); }
.pa-own-t[aria-pressed="true"] { border-color: var(--pa-accent); background: var(--pa-accent-soft); box-shadow: 0 0 0 1px var(--pa-accent) inset; }
.pa-own-i { width: 48px; height: 48px; display: block; border-radius: 50%; }
.pa-own-n { font-size: .75rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-own .pa-no { font-size: .66rem; }
.pa-list { background: var(--card-2, #182340); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.pa-input, .pa-select { background: var(--paper-2, #121a30); }
.pa-rank { background: var(--card-hi, #1e2b4d); color: var(--pa-ink-2); }
.pa-check { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--pa-ink-2); min-height: 32px; cursor: pointer; }
.pa-check input { width: 18px; height: 18px; accent-color: var(--pa-accent); }
.pa-own li { content-visibility: auto; contain-intrinsic-size: auto 96px; }

/* ---- v3: mode tabs (links; boot.js puts the active mode on <html data-calc>, so no layout shift) */
.calc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 6px; background: var(--paper-2, #121a30); border: 1px solid var(--line, #243157); border-radius: var(--radius, 12px); }
.calc-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border-radius: var(--radius-sm, 8px); color: var(--ink-2, #b0bad6); font-weight: 700; font-size: .92rem; text-decoration: none; border: 1px solid transparent; flex: 1 1 auto; justify-content: center; }
.calc-tab img { width: 24px; height: 24px; flex: none; }
.calc-tab:hover { color: var(--ink, #e9eefb); background: var(--card-2, #182340); }
.calc-tab[aria-current="page"] { color: var(--ink, #e9eefb); background: var(--card-hi, #1e2b4d); border-color: var(--accent, #3fe0c0); box-shadow: 0 0 0 1px var(--accent, #3fe0c0) inset; }
html[data-calc] .calc-tab[aria-current="page"] { background: none; border-color: transparent; box-shadow: none; color: var(--ink-2, #b0bad6); }
html[data-calc="pair"] .calc-tab[data-mode="pair"], html[data-calc="parents"] .calc-tab[data-mode="parents"], html[data-calc="with"] .calc-tab[data-mode="with"],
html[data-calc="path"] .calc-tab[data-mode="path"], html[data-calc="mine"] .calc-tab[data-mode="mine"], html[data-calc="passive"] .calc-tab[data-mode="passive"] {
  color: var(--ink, #e9eefb); background: var(--card-hi, #1e2b4d); border-color: var(--accent, #3fe0c0); box-shadow: 0 0 0 1px var(--accent, #3fe0c0) inset; }
.calc-share { appearance: none; margin-left: auto; min-height: 44px; padding: 6px 12px; border-radius: var(--radius-sm, 8px); border: 1px solid var(--line-2, #33436f); background: transparent; color: var(--accent-ink, #6ff0d5); font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
@media (max-width: 719px) { .calc-tab { flex: 1 1 calc(50% - 6px); justify-content: flex-start; font-size: .86rem; padding: 6px 8px; } .calc-share { flex: 1 1 100%; } }
html[data-calc] #calc .tool { display: none; }
html[data-calc="pair"] #calc .tool[data-tool="pair"], html[data-calc="parents"] #calc .tool[data-tool="parents"], html[data-calc="with"] #calc .tool[data-tool="with"],
html[data-calc="path"] #calc .tool[data-tool="path"], html[data-calc="mine"] #calc .tool[data-tool="mine"], html[data-calc="passive"] #calc .tool[data-tool="passive"] { display: block; }
html[data-calc] #calc .tool > .h2row .anchor { display: none; }

/* ---- portrait-grid picker: slot button + shared <dialog> */
.pp-slot { appearance: none; width: 100%; display: flex; align-items: center; min-height: 64px; padding: 8px 12px; border-radius: var(--pa-radius-sm); border: 1px dashed var(--pa-line-2); background: var(--pa-paper); color: var(--pa-ink); font: inherit; text-align: left; cursor: pointer; }
.pp-slot:hover { border-color: var(--pa-accent); border-style: solid; }
.pp-face { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pp-face .pal-img { width: 48px; height: 48px; }
.pp-plus { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; font-weight: 700; color: var(--pa-accent-ink); background: var(--pa-accent-soft); }
.pp-sv { display: flex; flex-direction: column; min-width: 0; }
.pp-sv strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-sv small { font-size: .8rem; color: var(--pa-ink-2); }
.pp-dlg { width: min(860px, calc(100vw - 24px)); max-height: min(88vh, 900px); padding: 0; display: none; flex-direction: column; overflow: hidden; }
.pp-dlg[open] { display: flex; }
.pp-dlg::backdrop { background: rgba(4, 8, 18, .72); }
.pp-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 0 16px; }
.pp-title { margin: 0; font-size: 1.1rem; flex: 1; }
.pp-x { font-size: 1.4rem; }
.pp-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 16px 0; }
.pp-rar { width: auto; }
.pp-els { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 0; }
.pp-el { appearance: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--pa-line); background: var(--pa-paper); cursor: pointer; padding: 0; color: var(--pa-ink); }
.pp-el img { width: 22px; height: 22px; }
.pp-el[aria-pressed="true"] { border-color: var(--pa-accent); background: var(--pa-accent-soft); box-shadow: 0 0 0 1px var(--pa-accent) inset; }
.pp-count { margin: 6px 16px 0; font-size: .8rem; color: var(--pa-ink-2); }
.pp-scroll { overflow-y: auto; padding: 8px 16px 16px; min-height: 0; flex: 1; overscroll-behavior: contain; }
.pp-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.pp-grid li { margin: 0; }
.pp-grid li[hidden] { display: none; }
.pp-t { appearance: none; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: var(--pa-radius-sm); border: 1px solid var(--pa-line); background: var(--pa-paper); color: var(--pa-ink); font: inherit; cursor: pointer; }
.pp-t:hover, .pp-t:focus-visible { border-color: var(--pa-accent); }
.pp-t[aria-current="true"] { border-color: var(--pa-accent); background: var(--pa-accent-soft); }
.pp-t .pal-img { width: 56px; height: 56px; margin-bottom: 2px; }
.pp-n { font-size: .78rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-t .pa-no { font-size: .66rem; }
@media (max-width: 639px) { .pp-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; } .pp-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } }
.pa-cake img { width: 24px; height: 24px; }
.pa-grid2 .pp { min-width: 0; }
.pc-top:empty { display: none; }
.pc-label { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pa-accent-ink); }
.pa-pairs.pc-list, .pa-steps.pc-steps { max-height: none; border: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); overflow: visible; }
.pa-steps.pc-steps { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 559px) {
  .pa-grid2:not(.pa-grid2--even) { grid-template-columns: 1fr; gap: 6px; }
  .pa-grid2:not(.pa-grid2--even) > .pa-btn--icon { justify-self: center; transform: rotate(90deg); }
}

/* ---- home v3 (home is the only page that loads tools.css up front): trust chips, popular strip, hub cards */
.trust { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.trust span { font-size: .75rem; font-weight: 700; color: var(--ink-2); background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 2px 10px; }
.trust span:first-child { color: var(--accent-ink); border-color: var(--accent); }
.h2row .more { margin-left: auto; font-size: .88rem; font-weight: 700; }
.pop-strip { list-style: none; margin: 0; padding: 4px 2px 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.pop-strip li { margin: 0; scroll-snap-align: start; }
.pop { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; padding: 12px 6px 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; text-align: center; }
.pop:hover { border-color: var(--accent); box-shadow: var(--glow); }
.pop .pal-img { width: 64px; height: 64px; margin-bottom: 4px; }
.pop strong { font-size: .86rem; line-height: 1.2; }
.pop small { font-size: .72rem; color: var(--ink-3); }
.hubs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.hubs li { margin: 0; }
.hub { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.hub:hover { border-color: var(--accent); box-shadow: var(--glow); }
.hub img { width: 40px; height: 40px; flex: none; }
.hub-t { display: flex; flex-direction: column; min-width: 0; }
.hub-t strong { font-size: 1rem; }
.hub-c { font-size: .8rem; font-weight: 700; color: var(--accent-ink); }
.hub-t small { font-size: .8rem; color: var(--ink-3); }
@media (max-width: 559px) { .answer p { font-size: .95rem; } }

/* ---- home pair tool empty state: popular pairs, one tap fills both parents */
.pa-result, .pa-try { min-width: 0; max-width: 100%; }
.pa-try { margin-top: 12px; }
.pa-try-h { margin: 0 0 8px; font-size: .875rem; color: var(--pa-ink-2); }
.pa-try-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); min-height: 152px; align-items: stretch; }
.pa-try-b { appearance: none; font: inherit; color: var(--pa-ink); cursor: pointer; text-align: center; padding: 10px 6px; width: 100%; }
.pa-try-b:hover, .pa-try-b:focus-visible { border-color: var(--pa-accent); }
.pa-try-b .pc-n { font-size: .78rem; }
@media (max-width: 639px) { .pa-try-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 82%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; } .pa-try-b { scroll-snap-align: start; } }