/* Encyclopedia tokens: black, white and purple. */
.translation-status { display: block; margin-block-end: .35rem; }
.site-copy-notice { margin: 2rem auto; padding-inline: 1rem; max-width: 48rem; color: var(--muted); font-size: .875rem; }
.wiki-startup-pending { margin-block-end: 1.25rem; color: var(--muted); }
.wiki-startup-state { display: flex; align-items: center; gap: .75rem; }
.wiki-startup-state p { margin: 0; }
.wiki-startup-progress { inline-size: 6rem; block-size: .5rem; accent-color: var(--accent); }
.wiki-startup-page { max-inline-size: 48rem; padding-block: clamp(1rem, 5vh, 3rem); }
.wiki-startup-intro { color: var(--muted); }
.wiki-startup-builder { margin-block-start: 1.5rem; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.wiki-startup-builder .wiki-startup-state { color: var(--ink); }
.wiki-startup-explore { margin-block-start: 2rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); }
.wiki-startup-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.wiki-startup-links a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--accent); }
.wiki-startup-error { position: fixed; inset-inline: 1rem; inset-block-end: 1rem; z-index: 100; max-inline-size: 40rem; margin-inline: auto; padding: 1rem; border: 1px solid var(--error); border-radius: var(--radius); background: var(--surface); box-shadow: 0 .25rem 1.5rem #0008; }
.wiki-startup-noscript { max-inline-size: 48rem; margin: 1rem auto; padding-inline: 1rem; color: var(--error); }
body:has(> noscript .wiki-startup-noscript) .wiki-startup-state { display: none; }
.navigation-arrow { display: inline-block; }
[dir="rtl"] .navigation-arrow { transform: scaleX(-1); }
:lang(ar), :lang(hi) { letter-spacing: normal; }
:lang(ar) h1, :lang(ar) .entry-name, :lang(hi) h1, :lang(hi) .entry-name { letter-spacing: normal; line-height: 1.65; }
.identity-text, .search-toolbar > *, .languages { min-inline-size: 0; }

button, summary { overflow-wrap: anywhere; }
:root {
  color-scheme: dark;
  --canvas: #0b0b10;
  --surface: #15151e;
  --surface-hover: #242035;
  --line: #393342;
  --control-line: #575165;
  --error: #f5b4b4;
  --dialog-backdrop: rgb(0 0 0 / 65%);
  --ink: #f5f5f7;
  --muted: #b4b4c2;
  --accent: #bb9aff;
  --selected: #bb9aff;
  --scroll-thumb: #82788f;
  --scroll-track: #15151e;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  --warning: #eed99b;
  --warning-bg: #29291f;
  --focus: #d6c2ff;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --title: clamp(1.75rem, 3vw, 2.5rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --content-width: 112rem;
  --reading-width: 48rem;
  --radius: .25rem;
  --focus-ring: 3px solid var(--focus);
  --damage-physical: #fb923c;
  --damage-magic: #60a5fa;
  --image-list: 64px;
  --image-hero: 128px;
  --image-small: 40px;
  --image-preview: 32px;
  --image-tiny: 22px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: var(--space-4); }
body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--text-base)/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif; }
a { color: inherit; text-decoration-color: var(--line); text-underline-offset: .22em; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
a, button, summary, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0 0 var(--space-3); }
h1 { font-size: var(--title); line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; }
:lang(ko) h1, :lang(ko) .entry-name { word-break: keep-all; }
h2 { font-size: 1.35rem; line-height: 1.4; }
h3 { font-size: var(--text-lg); line-height: 1.45; }
button, input, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--control-line); border-radius: var(--radius); min-height: 44px; }
button, select { padding: var(--space-2) var(--space-3); }
button, summary { cursor: pointer; }
input::placeholder { color: var(--muted); opacity: 1; }
button:hover { background: var(--surface-hover); }
button:disabled { opacity: .5; cursor: not-allowed; }
summary { min-height: 44px; padding: var(--space-2) 0; }
section { border-top: 1px solid var(--line); padding-top: var(--space-6); margin-top: var(--space-8); }
section > h2 { border-inline-start: 3px solid var(--accent); padding-inline-start: var(--space-3); }
.eyebrow, .muted, .english { color: var(--muted); }
.eyebrow { font-size: var(--text-sm); letter-spacing: .04em; }
.english { display: block; font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; top: -5rem; inset-inline-start: var(--space-4); z-index: 10; padding: var(--space-3); background: var(--surface); }
.skip:focus { top: var(--space-4); }

/* Site frame and compact page introduction. */
:is(body, #app) > header { position: relative; z-index: 2; max-width: var(--content-width); margin: auto; padding: var(--space-4) var(--space-6); display: flex; align-items: center; gap: var(--space-8); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.5rem; font-weight: 850; letter-spacing: .03em; text-decoration: none; white-space: nowrap; }
.brand-icon { width:32px; height:32px; object-fit:contain; flex-shrink:0; margin-inline-end:var(--space-2); }
.brand span { color: var(--accent); margin-inline-start: var(--space-2); font-weight: 450; }
header nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
header nav a { padding: var(--space-2); min-height: 44px; min-width: 44px; text-align: center; text-decoration: none; }
header nav a[aria-current=page] { box-shadow: inset 0 -2px var(--accent); color: var(--accent); }
.languages { margin-inline-start: auto; position: relative; flex-shrink: 0; }
.languages > div { position: absolute; top: 100%; inset-inline-end: 0; width: min(14rem, calc(100vw - 2rem)); max-height: 70vh; overflow: auto; z-index: 5; background: var(--surface); border: 1px solid var(--line); padding: var(--space-2); }
.languages a { display: block; padding: var(--space-2) var(--space-3); min-height: 44px; }
.languages a[aria-current=true] { color: var(--accent); }
main { max-width: var(--content-width); margin: auto; padding: var(--space-6) var(--space-8) var(--space-12); }
.preview-notice { display: block; font-size: var(--text-sm); color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: var(--space-3); margin-bottom: var(--space-6); }
.preview-notice strong { color: var(--warning); font-weight: 600; }
.preview-notice strong { margin-inline-end: var(--space-2); }
.page-heading { margin-bottom: var(--space-6); }
footer { max-width: var(--content-width); margin: auto; padding: var(--space-6); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-sm); }

/* Search: persistent result summary, removable selections, side filters. */
.search-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.search-toolbar input { flex: 1; width: 0; min-width: 8rem; padding: var(--space-2) var(--space-3); }
.search-toolbar :is(input, select, button) { line-height: 1.5; }
.search-toolbar select { max-width: 14rem; }
.selected-filters { display: flex; flex-wrap: wrap; gap:6px; }
.selected-filters:not(:empty) { margin-bottom: var(--space-4); }
.selected-filters button { color:var(--selected); border-color:var(--selected); min-height:32px; min-width:32px; padding:4px 8px; font-size:.875rem; line-height:1.4; }
.filter-search input { width:100%; }
.catalog-filter-groups[hidden] { display:none; }
.browse-layout.with-filters { display: grid; grid-template-columns: 13rem minmax(0,1fr); gap: var(--space-6); align-items: start; }
.filters { background: var(--surface); border: 1px solid var(--line); padding: var(--space-3); }
.filters summary { font-weight: 650; }

.filters fieldset { border: 0; margin: 0; padding: var(--space-2) 0 0; display: grid; gap: var(--space-1); }
.filters label { display: flex; gap: var(--space-2); align-items: center; min-height: 44px; padding: var(--space-1); border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; font-size: var(--text-sm); }
.filters label:has(:checked) { border-color: var(--selected); color: var(--selected); background: var(--surface-hover); }
.filters input { appearance: auto; min-height: 0; width: 18px; height: 18px; accent-color: var(--selected); flex-shrink: 0; }
.catalog-results { min-width: 0; container-type: inline-size; }
.empty-results { padding: var(--space-8); border: 1px dashed var(--line); }
.catalog { --columns: 1; display: grid; grid-template-columns: repeat(var(--columns),minmax(0,1fr)); gap: 16px; align-items: start; }
.card { min-width: 0; padding: var(--space-2); background: transparent; border: 0; border-radius: var(--radius); }
.card:hover, .card:focus-within { background: var(--surface-hover); }
.card-main { display: block; text-decoration: none; }
:is(.card, .preview-heading, .builder-candidate) .status-list { margin-top: var(--space-1); }
:is(.card, .preview-heading, .builder-candidate) .badge:not(.tag-badge) { font-size: .75rem; padding: 0; border: 0; }
.card .inscription-links { margin-top: var(--space-1); }

/* Shared identity and alpha-bound image viewports. SVG never changes the PNG. */
.identity { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.identity-text { min-width: 0; }
.entry-name { display: block; font-size: var(--text-lg); line-height: 1.4; overflow-wrap: anywhere; }
.entry-image { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: var(--image-list); height: var(--image-list); vertical-align: middle; }
.entry-image svg, .entry-image img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.image-hero { width: var(--image-hero); height: var(--image-hero); }
.image-small { width: var(--image-small); height: var(--image-small); }
.image-preview { width: var(--image-preview); height: var(--image-preview); }
.image-tiny { width: var(--image-tiny); height: var(--image-tiny); }
.identity-small { gap: var(--space-3); }
.identity-small .entry-name { font-size: var(--text-base); }
.status-list { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.badge { display: inline-block; font-size: var(--text-sm); color: var(--muted); line-height: 1.5; border: 1px solid var(--line); padding: var(--space-1) var(--space-2); border-radius: var(--radius); }
.rarity-common { color: var(--tier-common); }
.rarity-rare { color: var(--tier-rare); }
.rarity-unique { color: var(--tier-unique); }
.rarity-legendary { color: var(--tier-legendary); }
.status-review { color: var(--warning); background: var(--warning-bg); }
.inscription-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.inscription-links a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--text-sm); }

/* Detail reading, eligibility, effects and connected forms. */
.back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--space-3); color: var(--muted); }
.entry-heading { display: flex; gap: var(--space-6); align-items: center; padding-bottom: var(--space-4); }
.entry-heading > div { min-width: 0; }
.identity-hero { gap: var(--space-6); }
.entry-heading .status-list { margin-top: var(--space-3); }
.entry-heading .english { font-size: var(--text-base); }
.entry-heading .inscription-links { margin-top: var(--space-2); }
.acquisition-jump, .browse-related { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); }
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 19rem; gap: var(--space-12); }
.entry-body { min-width: 0; max-width: var(--reading-width); }
.game-text { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.8; }
.flavor-text > .game-text { color: var(--muted); }
.comparison { color: var(--muted); font-size: var(--text-sm); margin: var(--space-3) 0; }
.comparison > p { border-inline-start: 2px solid var(--line); padding-inline-start: var(--space-4); }
.route { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.route h3 { font-size: var(--text-base); }
.route-result { color: var(--accent); }
.route-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.route-link { display: inline-flex; gap: var(--space-2); align-items: center; min-height: 44px; padding: var(--space-2); border: 1px solid var(--line); margin-bottom: var(--space-2); }
.facts { min-width: 0; font-size: var(--text-sm); }
.facts > .muted { margin-top: var(--space-6); }
.awakening { margin-top: var(--space-4); }
.evolution { display: flex; gap: var(--space-3); align-items: stretch; flex-wrap: wrap; }
.evolution-form { flex: 1 1 13rem; max-width: 24rem; padding: var(--space-3); border: 1px solid var(--line); }
.evolution-form a { display: block; text-decoration: none; padding: var(--space-2) 0; }
.evolution-form.current { border-color: var(--selected); background: var(--surface); }
.evolution-form .eyebrow { display: block; color: var(--selected); margin-bottom: var(--space-2); }
.evolution-cost { display: block; color: var(--accent); font-size: var(--text-sm); }
.skill { padding: var(--space-6) 0; border-bottom: 1px solid var(--line); }
.skill-summary { color: var(--muted); }
.skill-legacy-anchor { display: block; }
.skill h3 { margin-bottom: var(--space-1); }
.skill > .game-text { margin-top: var(--space-3); }
.step { display: grid; grid-template-columns: 2.5rem minmax(0,1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.step > strong { color: var(--accent); font-size: 1.5rem; }
.related { padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.related > li { min-width: 0; padding: 12px; border-bottom: 1px solid var(--line); }
.preview-controls { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* Reflow: filters collapse on mobile; selections and count remain outside. */
@media (max-width: 1000px) {
  :is(body, #app) > header { gap: var(--space-4); flex-wrap: wrap; }
  header nav { order: 3; width: 100%; }
  .detail-layout { gap: var(--space-6); grid-template-columns: minmax(0,1fr) 16rem; }
  .browse-layout.with-filters { grid-template-columns: 12rem minmax(0,1fr); gap: var(--space-4); }

}
@media (max-width: 700px) {
  main { padding: var(--space-4) var(--space-4) var(--space-8); }
  :is(body, #app) > header { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  header nav { gap: var(--space-1); justify-content: space-between; font-size: var(--text-sm); }
  header nav a { padding: var(--space-2) var(--space-1); }
  .preview-notice { margin-bottom: var(--space-4); }
  .preview-notice span { font-size: .75rem; }
  .page-heading { margin-bottom: var(--space-4); }
  .search-toolbar { flex-wrap: wrap; gap: var(--space-2); }
  .search-toolbar input { flex-basis: 0; }
  .search-toolbar select { flex: 1; max-width: none; min-width: 0; }
  .search-toolbar button { flex-shrink: 0; }
  .browse-layout.with-filters { display: block; }
  .filters { margin-bottom: var(--space-4); }
  .filters fieldset { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .filters label { overflow-wrap: anywhere; }
  .entry-heading { gap: var(--space-4); align-items: flex-start; }
  .identity-hero { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; align-items: flex-start; gap: var(--space-4); }
  .image-hero { width: 128px; height: 128px; }
  .entry-heading h1 { font-size: 1.65rem; }
  .detail-layout { display: block; }

  .evolution-form { max-width: none; }
  section { margin-top: var(--space-6); }
}
@media (prefers-reduced-motion: no-preference) { a, button { transition: color .12s, background-color .12s; } }

/* Rarity belongs to the reference frame, never the complete protruding silhouette. */
:root { --tier-common: #d3dbd5; --tier-rare: #a9d7f6; --tier-unique: #d8bafa; --tier-legendary: #f0d18b; }
.tier-common { --tier: var(--tier-common); }
.tier-rare { --tier: var(--tier-rare); }
.tier-unique { --tier: var(--tier-unique); }
.tier-legendary { --tier: var(--tier-legendary); }
.identity .entry-name, .identity h1 { color: var(--tier, var(--ink)); }
.identity-hero h1 { border-bottom: 2px solid var(--tier, var(--line)); padding-bottom: var(--space-2); }
.identity > .entry-image:not(.framed) { border-radius: 50%; outline: 2px solid var(--tier, var(--line)); outline-offset: 2px; }
.entry-image.framed::before { content: ""; position: absolute; inset: 0; border-radius: 50%; outline: 2px solid currentColor; outline-offset: -1px; pointer-events: none; }
.identity { flex-wrap: wrap; }
.identity-text { flex: 1 1 8rem; }
:is(.card, .preview-heading, .builder-candidate) .condition-badge:not(.tag-badge) { border: 1px solid var(--line); padding: 0 var(--space-1); background: var(--canvas); }
.inscription-links { border-top: 1px solid var(--line); padding-top: var(--space-2); }
.entry-link { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; max-width: 100%; }
.entry-link > a { min-width: 0; flex: 1; }
.entry-link.card-main { display: flex; align-items: flex-start; }
.entry-link.card-main > a { text-decoration: none; }
.inscription-links .entry-link > a { display: inline-flex; align-items: center; gap: var(--space-2); }
.inscription-links .entry-link, .skill-links .entry-link { border-bottom: 2px solid var(--line); }
.inscription-links .entry-link:focus-within, .inscription-links .entry-link:hover, .skill-links .entry-link:hover, .skill-links .entry-link:focus-within { border-bottom-color: var(--accent); }
.evolution-form .entry-link { display: flex; }

@media (max-width: 700px), (hover: none) {

  .identity-hero { flex-wrap: wrap; }

}
.identity-hero h1 { width: fit-content; max-width: 100%; }

/* Development gallery reuses the actual skull links and image settings. */
.frame-review { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: var(--space-3); }
.frame-review > .entry-link { border: 1px solid var(--line); padding: var(--space-2); }
.frame-review > .entry-link > a > .identity { flex-direction: column; align-items: center; text-align: center; }
.frame-review > .entry-link > a > .identity-text { flex: auto; }
@media (max-width: 700px) { .frame-review { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* The layout anchor is always the circle. Shared clearance never depends on a form. */
.entry-image.framed { position: relative; color: var(--tier, var(--line)); --frame: var(--image-list); width: var(--frame); height: var(--frame); margin: 0; overflow: visible; }
.entry-image.framed.image-hero { --frame: var(--image-hero); }
.entry-image.framed.image-small { --frame: var(--image-small); }
.entry-image.framed.image-preview { --frame: var(--image-preview); }
.entry-image.framed.image-tiny { --frame: var(--image-tiny); }
.entry-image.framed .image-art { position: absolute; overflow: hidden; pointer-events: none; }
.entry-image.framed img { position: absolute; max-width: none; pointer-events: none; }
.entry-image.framed.image-hero img { pointer-events: auto; }
.identity:has(> .framed) { display: grid; grid-template-columns: max-content minmax(0,1fr); align-items: center; }
.identity:has(> .framed) .identity-text { min-width: 0; }
.currency { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.currency img { object-fit: contain; image-rendering: pixelated; }
.discard-value { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: var(--space-2); color: var(--muted); font-size: var(--text-sm); }
.discard-value small { font-size: .75rem; }
.filters .zero-count { color: var(--muted); }
.filters .zero-count .entry-image { opacity: .45; }
.inscription-highlight > a { padding: 2px 4px; border: 1px solid transparent; border-radius: var(--radius); }
.inscription-match.is-selected .inscription-highlight > a,
.inscription-highlight > a[aria-current="page"] { color: var(--selected); background: var(--surface-hover); border-color: var(--selected); }

@media (max-width: 700px) { .identity-hero:has(> .framed) { grid-template-columns: minmax(0,1fr); }  }
.frame-review > .entry-link > a > .identity:has(> .framed) { display: flex; align-items: flex-start; text-align: start; }
@media (max-width: 700px) { .frame-review { grid-template-columns: minmax(0,1fr); } }
.frame-review { grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); }

.damage-physical { color: var(--damage-physical); }
.damage-magic { color: var(--damage-magic); }
.identity-inscription > .entry-image:not(.framed),
.identity-dark-ability > .entry-image:not(.framed),
.identity-achievement > .entry-image:not(.framed) { outline: none; border: 0; border-radius: 0; }

@container (min-width: 32rem) { .catalog { --columns: 2; } }
@container (min-width: 48rem) { .catalog { --columns: 3; } }
@container (min-width: 64rem) { .catalog { --columns: 4; } }
@container (min-width: 80rem) { .catalog { --columns: 5; } }
.card-main > a { min-height: 88px; padding: 4px 0; }
@media (max-width: 1100px) {
  .browse-layout.with-filters { display: block; }
  .filters { margin-bottom: 16px; }
  .filters fieldset { grid-template-columns: repeat(auto-fit,minmax(12rem,1fr)); }
}

.match-summary { font-size: var(--text-sm); color: var(--muted); margin: 8px 0; }
.cooldown { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--muted); white-space: nowrap; }
.inscription-steps { display: flex; gap: 8px; margin-top: 6px; }
.inscription-steps a, .step > .entry-link a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; color: var(--accent); font-weight: 700; }
.related-count a, .discard-value a { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; font-size: .875rem; }
.next-awakening { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .75rem; }
.next-awakening a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.next-awakening .entry-image.framed { margin: 0; }
.discard-table { border-collapse: collapse; font-size: .875rem; width: 100%; }
.discard-table caption { text-align: start; color: var(--muted); }
.discard-table th, .discard-table td { text-align: start; padding: 3px 8px; border-bottom: 1px solid var(--line); }
.discard-value > .discard-table { flex-basis: 100%; }

/* Read-only tooltip: compact content, no controls or scroll containers. */
.preview-panel { position: fixed; z-index: 30; width: 320px; padding: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--control-line); border-radius: var(--radius); box-shadow: 0 6px 20px #0006; overflow: visible; font-size: .875rem; line-height: 1.5; }
.preview-content { display: grid; gap: 6px; min-width: 0; font-size: .875rem; line-height: 1.65; }
.preview-content section { margin: 0; padding: 0; border: 0; }
.preview-content p { margin: 0; }

.preview-heading { display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 8px; }
.preview-heading > .entry-image { width: 32px; height: 32px; }
.preview-heading .english { display: block; font-size: .75rem; }
.preview-title, .popup-title { display: block; overflow-wrap: anywhere; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; margin: 0; }
.preview-content > :is(.preview-heading, .reference-heading, .preview-title), .popup-header { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.popup-header { margin-bottom: 8px; }
a.popup-title-link { color: inherit; text-decoration: underline; text-decoration-color: var(--control-line); text-underline-offset: .2em; }
a.popup-title-link:is(:hover, :focus-visible) { color: inherit; text-decoration-color: currentColor; }
a.popup-title-link:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.popup-link-marker { white-space: nowrap; }
.popup-icon-note { display: flex; align-items: center; gap: 8px; }
.popup-icon-note > img { flex: none; object-fit: contain; image-rendering: pixelated; }
.preview-heading .preview-title { color: var(--tier,var(--ink)); }
.preview-skull { grid-template-columns: 36px minmax(0,1fr); }
.preview-skull > .entry-image.framed { --frame: 32px; margin: 0; justify-self: center; align-self: center; }
.preview-copy { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.65; }
.preview-copy .game-text { margin: 0 0 6px; font-size: .875rem; line-height: 1.65; }
.preview-copy .game-text:last-child { margin-bottom: 0; }
.preview-copy.is-truncated { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--preview-lines); overflow: hidden; }
.preview-items { display: grid; grid-template-columns: repeat(auto-fit,160px); gap: 8px; align-items: start; }
.preview-item { min-width: 0; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.preview-item-name { display: flex; align-items: center; gap: 6px; font-size: .8125rem; overflow-wrap: anywhere; }
.preview-item-name .entry-image { width: 28px; height: 28px; }
.preview-item-inscriptions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; margin-top: 3px; color: var(--muted); font-size: .75rem; }
.preview-item-inscriptions > span { display: flex; min-width: 0; align-items: center; gap: 3px; padding: 1px 2px; border: 1px solid transparent; border-radius: var(--radius); }
.preview-item-inscriptions > .current-inscription { color: var(--selected); background: var(--surface-hover); border-color: var(--selected); }
.preview-item-inscriptions .entry-image { width: 16px; height: 16px; }
.preview-remaining { margin: 0; color: var(--muted); font-size: .75rem; }
.preview-fixtures { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; } .preview-fixtures a { display: inline-flex; align-items: center; min-height: 44px; } #preview-check-results { white-space: pre-wrap; font-size: .875rem; }

/* Shared card rhythm; the skull silhouette does not reserve layout space. */
.card-main > a > .identity { gap: 16px; }
.card-main .entry-image { width: 64px; height: 64px; aspect-ratio: 1; }
.card-main .entry-image.framed { --frame: 64px; margin: 0; }
.card-main .identity:has(> .framed) { grid-template-columns: 64px minmax(0,1fr); }
.card-secondary { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.card-secondary:empty { display: none; }
.card-secondary .inscription-links { border-top: 0; padding-top: 0; margin-top: 0; }
.card .entry-link > a, .inscription-links a, .builder-candidate-inscriptions button .entry-name { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.card .entry-link > a:hover, .card .entry-link > a:focus-visible, .inscription-links a:is(:hover,:focus-visible), .builder-candidate-inscriptions button:is(:hover,:focus-visible) .entry-name { text-decoration-color: var(--accent); }
.card-main .entry-link > a { text-decoration: none; }
.card-main .entry-link > a .entry-name { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.card-main .entry-link > a:hover .entry-name, .card-main .entry-link > a:focus-visible .entry-name { text-decoration-color: var(--accent); }
.related .image-small { width: 40px; height: 40px; aspect-ratio: 1; }
.step-count { display: inline-flex; min-width: 44px; align-items: center; justify-content: center; color: var(--accent); }
.skull-chain { display: contents; }
@container (min-width: 64rem) { .skull-chain { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; align-items: start; } }
.preview-panel, .preview-panel * { pointer-events: none; user-select: none; }
.skill h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.skill-fixed { font-size: .75rem; font-weight: 400; color: var(--muted); border: 1px solid var(--line); padding: 0 4px; background: var(--canvas); }
.skill-scope { font-size: .875rem; }
.skill-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.skill-links .entry-link > a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: .875rem; }
.skill-links + .next-awakening { margin-top: 8px; }
.preview-heading:not(:has(.entry-image)) { grid-template-columns: minmax(0,1fr); }

.buff-link{display:flex;align-items:center;gap:8px;min-height:44px;max-width:100%;text-decoration:underline;text-underline-offset:3px}.buff-link>span:first-child{flex:none}.buff-icons{display:flex;flex-wrap:wrap;gap:6px;min-width:0;margin:0;padding:0;list-style:none}.buff-icons img{display:block;object-fit:contain;image-rendering:pixelated;flex:none}.buffs .buff-icons{gap:10px}.buffs .buff-icons li{display:block}

.skull-animation { max-width: 48rem; margin-block: 1rem; border-block: 1px solid var(--line); padding-block: .75rem; }
.animation-stage { display: grid; place-items: center; }
.animation-stage canvas, .animation-fallback { max-width: 100%; height: auto; object-fit: contain; image-rendering: pixelated; }
.animation-fallback { width: 128px; height: 128px; }
.animation-controls { display: grid; justify-items: center; gap: .5rem; margin-top: .75rem; }
.animation-controls[hidden], .animation-stage [hidden] { display: none; }
.animation-controls button { min-height: 44px; padding: .4rem .8rem; color: inherit; background: transparent; border: 1px solid var(--control-line); border-radius: var(--radius); cursor: pointer; }
.animation-controls button[aria-pressed="true"] { border-color: var(--selected); background: var(--surface-hover); }
.animation-controls button:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.animation-status { text-align: center; margin: .25rem 0 0; }
.animation-status:empty { display: none; }

/* Detail priority and surface-aware protection for intentionally protruding art. */
.detail-page { max-width: 80rem; }
.detail-page .detail-layout { grid-template-columns: minmax(0,1fr) 20rem; gap: 2rem; }
.detail-page .entry-body { width: 100%; }
.detail-meta { margin-top: 2rem; font-size: .75rem; }
.active-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.primary-effects > .active-heading { font-size: var(--text-lg); line-height: 1.45; border-inline-start: 0; padding-inline-start: 0; }
.skill-preview-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.skill-preview-title .preview-title { min-width: 0; overflow-wrap: anywhere; }
.skill-resource-cost { font-size: .75rem; font-weight: normal; color: var(--muted); }
.preview-copy .active-heading { margin-bottom: 4px; }
.facts > :first-child { margin-top: 0; }
@media (max-width: 1100px) {
  .detail-page .detail-layout { display: block; }
  .detail-page .entry-body, .detail-page .facts { max-width: 48rem; }
}
.entry-image { aspect-ratio: 1; }
body { --text-surface: var(--canvas); }
.card:hover, .card:focus-within { --text-surface: var(--surface-hover); }
.preview-panel, .dialog-surface, .evolution-form.current, .languages > div { --text-surface: var(--surface); }
:is(body, #app) > header .brand, :is(body, #app) > header nav a, .languages > summary, .languages a,
.detail-page > .back, .detail-page > .preview-notice,
.identity:has(> .framed) .identity-text,
.next-awakening a > span:not(.entry-image), .next-awakening .currency,
.evolution-cost, .evolution-form > .eyebrow,
.preview-content:has(.preview-skull) > :not(.preview-heading), .preview-skull > div,
.builder-slot > :not(.entry-image), .builder-info-trigger > bdi, .builder-info-trigger > strong, .entry-label > .entry-name {
  position: relative; z-index: 1;
  text-shadow: -1px -1px 1px var(--text-surface), 1px -1px 1px var(--text-surface),
    -1px 1px 1px var(--text-surface), 1px 1px 1px var(--text-surface), 0 0 3px var(--text-surface);
}
.preview-item-name > span:not(.entry-image), .preview-inscription-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preview-stage { display: grid; grid-template-columns: 1.5rem minmax(0,1fr); gap: 6px; border-inline-start: 2px solid transparent; padding-inline-start: 6px; }
.preview-stage-copy { margin: 0 0 6px; font-size: .875rem; }
.selected-stage { color: var(--accent); font-weight: 700; }
.preview-stage.selected-stage { border-inline-start-color: var(--accent); }
.preview-stage-copy.is-truncated { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--preview-lines); overflow: hidden; }
.animation-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.animation-playback { border-top: 1px solid var(--line); padding-top: .5rem; }
.skill-summary, .skill-scope { font-size: var(--text-sm); }
.skill h3 > span:not(.badge) { min-width: 0; overflow-wrap: anywhere; }

#related-items, .related-entries { container-type: inline-size; }
@container (min-width: 492px) { .related { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@container (min-width: 744px) { .related { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.related .entry-link { display: flex; width: fit-content; max-width: 100%; }
.related .entry-link > a { flex: 0 1 auto; min-height: 44px; text-decoration: none; }
.related-identity .identity { flex-wrap: nowrap; }
.related-identity .identity-text { flex: 0 1 auto; }
.related-inscriptions { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; }
.related-inscriptions .entry-link > a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.related-inscriptions a > span:not(.entry-image) { min-width: 0; overflow-wrap: anywhere; }

.ability-level + .ability-level { border-top: 1px solid var(--line); padding-top: var(--space-4); margin-top: var(--space-4); }
.level-cost { color: var(--muted); }
.ability-level { scroll-margin-top: var(--space-4); }

/* Translation references preserve the original game text. */
.translation-reference { vertical-align: super; font-size: .75em; line-height: 0; margin-inline: .12em; }
.translation-reference a { color: var(--accent); padding: .3em .15em; text-decoration: none; }
.translation-reference a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.translation-footnotes { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1rem; }
.translation-footnotes ol { padding-inline-start: 2rem; }
.translation-footnotes > strong { display:block; margin:0 0 var(--space-3); font-size:1.35rem; line-height:1.4; border-inline-start:3px solid var(--accent); padding-inline-start:var(--space-3); }
.translation-footnotes li { padding: .5rem; scroll-margin-top: 1rem; }
.translation-footnotes li:target { background: var(--surface-hover); outline: 1px solid var(--accent); }
.translation-note-body { overflow-wrap: anywhere; }
.translation-note-body p, .translation-note-summary { margin: 0 0 .5rem; }
.translation-back { font-size: var(--text-sm); }
.translation-preview-warning { color: var(--warning); border-top: 1px solid var(--line); padding-top: .375rem; margin: .375rem 0 0; overflow-wrap: anywhere; }
.translation-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; overflow: auto; }

.translation-dialog-copy { display: flex; align-items: flex-start; gap: .5rem; padding: 1.25rem; overflow-wrap: anywhere; }
.translation-dialog-number { flex: none; min-height: 44px; min-width: 32px; color: var(--accent); }
.translation-dialog-copy [data-note-content] { min-width: 0; }
.translation-dialog-copy p { margin: 0 0 .75rem; }
.has-translation-dialog { overflow: hidden; }

.entry-label { display:inline-flex; align-items:center; gap:.4rem; min-width:0; }
.entry-label>.entry-image { flex:none; }
.entry-label>.entry-name { overflow-wrap:anywhere; font:inherit; }
.inscription-facet { display:flex; align-items:center; gap:.35rem; min-width:0; }
.inscription-facet>label { display:flex; flex:1; align-items:center; gap:.4rem; min-width:0; }
.inscription-facet .entry-label { display:flex; align-items:center; gap:.4rem; min-width:0; }

/* Source-linked HUD explanations share their content with builder effect rows. */
.buff-icons.buff-effect-list { display:grid; gap:1rem; }
.buff-icons.buff-effect-list>li { display:flex; align-items:flex-start; gap:.625rem; min-width:0; }
.buff-effect-list>li>img { flex:0 0 40px; object-fit:contain; }
.buff-effect-list>li>div { min-width:0; }
.effect-summary { font-size:.875rem; overflow-wrap:anywhere; }
.effect-summary p { margin-block:.25rem; }
.effect-summary ul { margin-block:.25rem; padding-inline-start:1.2rem; }

/* Shared labeled search controls; filtering and URL state remain page-specific. */
.search-toolbar-labeled { align-items: end; }
.search-toolbar-labeled label { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.search-toolbar-labeled label:first-of-type { flex: 1 1 20rem; }
.search-toolbar-labeled label:not(:first-of-type) { flex: 1 1 12rem; max-width: 15rem; }
.search-toolbar-labeled input, .search-toolbar-labeled select { width: 100%; min-width: 0; max-width: 100%; }
.search-toolbar-labeled input { flex: auto; }

/* Dialog behavior belongs to its controller; all modal surfaces share tokens. */
.dialog-surface { color: var(--ink); background: var(--surface); border: 1px solid var(--control-line); border-radius: var(--radius); }
.dialog-surface::backdrop { background: var(--dialog-backdrop); }
.dialog-content { padding: 16px; min-width: 0; }
:is(.dialog-surface,.dialog-actions) > .dialog-close { display: block; position: sticky; bottom: 0; z-index: 2; flex: none; width: 100%; min-height: 48px; margin: 0; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; font: inherit; text-align: center; color: var(--ink); background: var(--surface-hover); --text-surface: var(--surface-hover); cursor: pointer; }
:is(.dialog-surface,.dialog-actions) > .dialog-close:hover { background: var(--control-line); --text-surface: var(--control-line); }
:is(.dialog-surface,.dialog-actions) > .dialog-close:focus-visible { outline: var(--focus-ring); outline-offset: -4px; }
/* Status terms retain their words and a non-colour affordance. */
:root { --status-stun: #f3d36b; --status-freeze: #73dedc; --status-burn: #ffb074; --status-wound: #ff9aad; --status-poison: #9bdb87; --status-unmoving: #b5c4d8; }
.status-stun { --status-color: var(--status-stun); }
.status-freeze { --status-color: var(--status-freeze); }
.status-burn { --status-color: var(--status-burn); }
.status-wound { --status-color: var(--status-wound); }
.status-poison { --status-color: var(--status-poison); }
.status-unmoving { --status-color: var(--status-unmoving); }
.status-term { color: var(--status-color); text-decoration: underline dotted; text-underline-offset: .18em; }
a.status-term:hover { color: var(--status-color); text-decoration-style: solid; }
.status-description .preview-title { text-decoration: none; }
.status-dialog { width: min(42rem, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 32px); overflow: auto; padding: 0; }
.status-dialog .preview-copy { display: block; max-height: none; overflow: visible; }
.status-dialog p, .status-guide-entry p { white-space: normal; overflow-wrap: anywhere; }
.status-dialog p + p, .status-guide-entry p + p { margin-top: .75rem; }
.status-guide-entry { max-width: 48rem; margin-block: 2rem; scroll-margin-top: 5rem; }
.status-guide-entry .preview-title { display: none; }

.random-inscription-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.random-inscription-slots .random-inscription-label { padding: 2px 4px; border: 1px solid transparent; border-radius: var(--radius); }
.inscription-match.is-selected > .random-inscription-label { color: var(--selected); background: var(--surface-hover); border-color: var(--selected); }
.random-inscription-slots { flex-wrap: wrap; }
.random-inscription-note { flex-basis: 100%; grid-column: 1/-1; }

/* Search controls share checked and keyboard states across catalogs and pickers. */
.search-filter-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:.75rem; margin-block:.75rem; }
.search-filter, .builder-page .search-filter { border:0; padding:0; margin:0; min-inline-size:0; max-inline-size:100%; }
.search-filter legend { padding:0; margin-block-end:.35rem; color:var(--muted); font-size:.875rem; }
.filter-options { display:flex; flex-wrap:wrap; gap:.4rem; }
.filter-chip, .builder-page .filter-chip { display:inline-flex; position:relative; flex-direction:row; align-items:center; min-block-size:44px; min-inline-size:44px; max-inline-size:100%; padding:.45rem .7rem; border:1px solid var(--control-line); border-radius:var(--radius); background:var(--surface); cursor:pointer; overflow-wrap:anywhere; }
.filter-chip:has(input:checked) { border-color:var(--accent); background:var(--surface-hover); color:var(--accent); }
.filter-chip:has(input:focus-visible) { outline:var(--focus-ring); outline-offset:3px; }
.filter-chip input[type=checkbox], .builder-page .filter-chip input[type=checkbox] { position:absolute; inline-size:1px; block-size:1px; min-width:0; min-height:0; padding:0; margin:0; border:0; clip-path:inset(50%); overflow:hidden; }
.search-filter-toolbar > button { min-block-size:44px; }
.achievement-search > label { display:flex; flex-direction:column; gap:.35rem; }
.achievement-search input[type=search] { inline-size:100%; }

:root { --search-mark:#ffe08a; --search-mark-ink:#241c08; }
mark.search-highlight { background:var(--search-mark); color:var(--search-mark-ink); border-radius:2px; padding:0; box-decoration-break:clone; }

:root { --status-invulnerable: #ffe6a3; --status-unstoppable: #c8b6ff; }
.status-invulnerable { --status-color: var(--status-invulnerable); }
.status-unstoppable { --status-color: var(--status-unstoppable); }

/* Referenced equipment and inscriptions remain a single inline link. */
.entry-reference{display:inline-flex;align-items:center;gap:.2em;vertical-align:middle;max-width:100%;text-decoration:none}
.entry-reference .entry-image{flex:none}
.entry-reference:hover,.entry-reference:focus-visible{text-decoration:underline}
.site-inscription-description p{line-height:1.8}

/* Shared explanation tags retain the existing badge/status colors. */
.entry-tags { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.35rem; max-width:100%; }
.explanation-tag { text-decoration:underline dotted; text-underline-offset:.22em; cursor:help; white-space:normal; }
a.explanation-tag:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.status-filters { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin:.65rem 0; border:1px solid var(--line); border-radius:.5rem; padding:.6rem; }
.status-filters p { flex-basis:100%; margin:0; }
.status-filters label { display:inline-flex; align-items:center; gap:.3rem; }
.status-source-condition { margin:.7rem 0; }
.entry-tag-guide > section { scroll-margin-top:2rem; }
.entry-tag-guide .preview-title { display:none; }
.builder-candidate > .entry-tags { margin-block:.3rem; }

.affinity-physical { color: var(--damage-physical); }
.affinity-magic { color: var(--damage-magic); }

/* Inline references and growth explanations share their layout across guides and dialogs. */
.reference-modal-open{overflow:hidden}
.entry-reference{white-space:normal;line-height:inherit}
.entry-reference>span[lang]{min-width:0;overflow-wrap:anywhere}
.entry-reference[data-reference-dialog]{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:.2em}
.entry-reference:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.reference-heading{display:flex;align-items:center;gap:.5rem}
.reference-heading .entry-image{flex:none}
.growth-level{padding:.5rem 0;border-bottom:1px solid var(--line)}
.growth-level:last-child{border-bottom:0}
.growth-description,.builder-root .growth-description{color:var(--ink)}
.growth-description p{margin:.25rem 0 0}
.status-dialog > .preview-content > .preview-copy{overflow:visible;display:block;-webkit-line-clamp:unset}
.wiki-popup-dialog > .preview-content { padding:16px; }
.wiki-popup-tooltip { max-width:calc(100vw - 24px); margin:0; right:auto; bottom:auto; visibility:hidden; pointer-events:none; }
.wiki-popup-dialog .wiki-popup-tooltip { z-index:3; }

/* Shared equipment tags: metadata and explanations share visual sizing. */
.tag-list { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; min-width:0; }
.tag-badge, .skill-links .tag-badge { display:inline-flex; align-items:center; box-sizing:border-box; max-inline-size:100%; min-height:0; padding:2px 5px; font-size:.8125rem; font-weight:400; line-height:1.35; vertical-align:middle; overflow-wrap:anywhere; border:1px solid var(--line); background:var(--canvas); border-radius:2px; }
.tag-badge.is-current-tag { color:var(--selected); border-color:var(--selected); background:var(--surface-hover); }
.tag-toggle { cursor:pointer; border-color:var(--control-line); background:var(--surface); color:var(--accent); }
.tag-list > [hidden] { display:none; }
.card-identity, .related-card-identity { display:grid; grid-template-columns:64px minmax(0,1fr); grid-template-rows:min-content 1fr; column-gap:12px; align-content:start; align-items:start; }
.card-identity > .card-main, .card-identity .identity,
.related-card-identity > .related-identity, .related-card-identity .identity { display:contents; }
.card-identity > .card-main > a, .related-card-identity > .related-identity > a { display:grid; grid-template-columns:subgrid; grid-template-rows:subgrid; grid-column:1/-1; grid-row:1/3; min-width:0; }
.card-identity .identity > .entry-image, .related-card-identity .identity > .entry-image { grid-column:1; grid-row:1 / 3; align-self:start; }
.card-identity .identity-text, .related-card-identity .identity-text { grid-column:2; grid-row:1; }
/* Tags overlap the main link's grid area; only their actual controls intercept it. */
.card-identity > .tag-list, .related-card-identity > .tag-list { grid-column:2; grid-row:2; margin-top:4px; pointer-events:none; }
/* Keep specificity below .preview-panel * so hover previews remain inert. */
:where(.card-identity > .tag-list, .related-card-identity > .tag-list) > :where(a, button) { pointer-events:auto; }
.related-card-identity { grid-template-columns:40px minmax(0,1fr); column-gap:12px; }
.skill-link-group { display:inline-flex; align-items:center; gap:6px; max-width:100%; }
.skill-link-group > .entry-link { min-width:0; }
.skill-link-group > .tag-badge { flex-shrink:0; }
.preview-item > .tag-list { margin-inline-start:0; }
.tag-related { container-type:inline-size; }
.tag-related .related > li > .affinity-description { margin-block-start:8px; font-size:.875rem; }
/* Collapsible filter groups share markup, counts and input affordances. */
.catalog-filter-groups { display:grid; align-content:start; gap:8px; min-width:0; }
.filter-group { min-width:0; margin:0; padding:0 10px; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); }
.filter-group > summary { cursor:pointer; min-height:44px; font-weight:600; }

.filter-group > fieldset { border:0; min-width:0; margin:0; padding:0 0 8px; }
.filter-group .filter-options { display:grid; gap:2px; }
.filter-group .filter-chip, .filter-group .inscription-facet label { display:flex; align-items:center; gap:6px; min-height:44px; padding:4px; border:1px solid transparent; border-radius:var(--radius); background:transparent; cursor:pointer; font-size:.875rem; }
.filter-group .filter-chip:has(:checked), .filter-group .inscription-facet label:has(:checked) { background:var(--surface-hover); border-color:var(--selected); color:var(--selected); }
.filter-group input[type=checkbox], .builder-page .filter-group input[type=checkbox] { position:static; appearance:auto; inline-size:16px; block-size:16px; min-height:0; min-width:16px; clip-path:none; margin:0; flex-shrink:0; accent-color:var(--selected); }
.filter-group [data-option-count], .filter-group [data-facet-count] { color:var(--muted); margin-inline-start:auto; white-space:nowrap; }
.filter-group .zero-count { color:var(--muted); }
@media (max-width:1100px) {
  .catalog-filter-groups { margin-bottom:16px; }
  .filter-group .filter-options { grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); }
}

/* A closed narrow-screen filter panel occupies no content space. */
.filter-panel { width:min(26rem,calc(100vw - 2rem)); max-width:none; height:min(48rem,calc(100dvh - 2rem)); max-height:none; padding:0; }
.filter-panel[open] { display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.filter-panel > :not(.dialog-close, .preview-panel) { margin-inline:16px; }
.filter-panel-header { display:flex; align-items:center; gap:12px; flex:none; padding-top:16px; margin-bottom:0; }
.filter-panel-content { min-height:0; overflow:auto; overflow-anchor:none; flex:1; }
.filter-panel .catalog-filter-groups, .filter-panel .builder-filter-groups { margin:0; padding:0; max-height:none; overflow:visible; }
.filter-panel .filter-options { grid-template-columns:1fr; }
.filter-panel > button { flex:none; }
.dialog-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex:none; }
.dialog-actions:has(> [hidden]) { grid-template-columns:minmax(0,1fr); }
.dialog-actions > button { min-width:0; }
.dialog-actions > .dialog-close { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
.dialog-surface .dialog-actions > .dialog-confirm { min-height:48px; margin:0; padding:12px 16px; padding-bottom:max(12px,env(safe-area-inset-bottom)); border:0; border-top:1px solid var(--line); border-radius:0; background:var(--accent); color:var(--canvas); font:inherit; cursor:pointer; }
.dialog-surface .dialog-actions > .dialog-confirm:hover { background:var(--focus); }
.dialog-surface .dialog-actions > button:focus-visible { outline:var(--focus-ring); outline-offset:-4px; }
@media(forced-colors:active) { :root { scrollbar-color:auto; } }
.filter-panel-toggle { flex:none; align-self:end; }
.selected-filters .filter-reset { color:var(--muted); border-color:var(--control-line); }
.browse-layout.with-filters:has(> .catalog-filter-groups[hidden]) { display:block; }
.browse-layout.with-filters.catalog-panel-collapsed { display:block; }
.catalog-filter-panel[data-wide="true"] { position:sticky; inset:auto; top:1rem; width:100%; height:auto; max-height:calc(100dvh - 2rem); margin:0; border:0; border-radius:0; background:transparent; color:inherit; box-shadow:none; }
.catalog-filter-panel[data-wide="true"][open] { display:flex; }
.catalog-filter-panel[data-wide="true"] > .filter-panel-content { margin:0; }
.catalog-filter-panel[data-wide="true"] > :is(.filter-panel-header, .dialog-close) { display:none; }
@media(max-width:1100px) {
  .browse-layout.with-filters { display:block; }
}