@charset "UTF-8";

/* Semantic tokens: quiet surfaces, one primary action per task. */
:root {
  color-scheme:dark;
  --canvas:#121214; --surface:#1a1a1d; --raised:#242428;
  --line:#37373d; --control-line:#787880;
  --text:#eeeef0; --muted:#aaaab3;
  --accent:#ee9284; --secondary:#d9bd83; --on-accent:#211311;
  --glow:#ee928414; --danger:#ffb4a8; --success:#93dbce;
  --radius:8px; --space-section:32px; --space-group:24px; --space-item:16px;
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[data-game=hades2] { --accent:#93dbce; --secondary:#c8d5df; --on-accent:#10231f; --glow:#93dbce14; }
* { box-sizing:border-box; }
body { margin:0; min-block-size:100dvh; display:flex; flex-direction:column; background:var(--canvas); color:var(--text); overflow-wrap:anywhere; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
h1,h2,h3,h4,p { margin:0; }
h1,h2,h3,h4 { line-height:1.4; }
h1 { font-size:clamp(1.75rem,3vw,2.25rem); font-weight:600; letter-spacing:-.035em; }
h2 { font-size:1.05rem; font-weight:600; }
h3,h4 { font-size:1rem; font-weight:600; }
img { display:block; max-inline-size:100%; object-fit:contain; }
bdi { unicode-bidi:isolate; }
button,input,select,textarea,summary { font:inherit; }
button,.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-block-size:44px; max-inline-size:100%; padding:9px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--raised); color:var(--text); font-size:.875rem; line-height:1.5; text-align:center; word-break:keep-all; cursor:pointer; }
button:hover,.button:hover { border-color:var(--control-line); background:var(--raised); color:var(--text); }
button:disabled { opacity:.5; cursor:default; }
button.primary,.button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:650; }
button.primary:hover,.button.primary:hover { background:color-mix(in srgb,var(--accent) 88%,white); color:var(--on-accent); }
.quiet-action { background:transparent; border-color:transparent; color:var(--muted); }
input,select,textarea { font:inherit; min-inline-size:0; max-inline-size:100%; min-block-size:46px; padding:10px 12px; border:1px solid var(--control-line); border-radius:var(--radius); color:var(--text); background:var(--canvas); }
input::placeholder { color:var(--muted); }
input[type=range] { padding-inline:0; accent-color:var(--accent); }
input[type=file] { inline-size:100%; font-size:.85rem; padding:8px; }
input::file-selector-button { font:inherit; border:0; border-radius:4px; padding:6px 10px; margin-inline-end:12px; background:var(--raised); color:var(--text); cursor:pointer; }
button,a,summary,input { -webkit-tap-highlight-color:transparent; }
:where(a,button,input,select,textarea,summary):focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
main:focus { outline:none; }
[hidden] { display:none!important; }
.muted,.section-note { color:var(--muted); }
.sr-only { position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:fixed; inset-block-start:-10rem; inset-inline-start:1rem; max-inline-size:calc(100vw - 2rem); z-index:30; padding:12px 16px; background:var(--text); color:var(--canvas); border-radius:var(--radius); }
.skip-link:focus { inset-block-start:1rem; }
html[dir=rtl] :is(h1,h2,h3,.eyebrow) { letter-spacing:normal; }

/* App frame and native navigation. */
.site-header { border-block-end:1px solid var(--line); }
.header-inner { max-inline-size:1440px; margin-inline:auto; min-block-size:86px; padding-inline:40px; display:flex; align-items:center; gap:32px; }
.brand { display:flex; align-items:center; gap:12px; min-block-size:48px; flex:none; }
.brand>span { display:grid; font-size:.9rem; font-weight:650; line-height:1.4; }
.brand-build { font-size:.72rem; letter-spacing:.18em; color:var(--secondary); margin-block-start:2px; }
html[lang=ko] .brand-build { letter-spacing:0; }
.primary-nav { display:flex; align-self:stretch; align-items:stretch; gap:24px; min-inline-size:0; }
.primary-nav>a { display:flex; align-items:center; flex:none; min-block-size:44px; padding-block:10px; border-block-end:2px solid transparent; font-size:.875rem; white-space:nowrap; color:var(--muted); }
.primary-nav>a:hover { color:var(--text); }
.primary-nav>a[aria-current=page] { border-color:var(--accent); color:var(--text); }
.header-tools { margin-inline-start:auto; display:flex; align-items:center; gap:20px; font-size:.8rem; }
.game-switch { display:flex; align-items:center; gap:6px; min-block-size:44px; color:var(--muted); white-space:nowrap; }
.language-menu { position:relative; }
.language-menu summary { list-style:none; display:flex; align-items:center; gap:8px; min-block-size:44px; cursor:pointer; white-space:nowrap; }
.language-menu summary::-webkit-details-marker { display:none; }
.language-icon,.chevron { color:var(--muted); }
.language-menu nav { position:absolute; inset-inline-end:0; inset-block-start:calc(100% + 8px); z-index:10; min-inline-size:160px; padding:6px; background:var(--raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 35px #0005; }
.language-menu nav a { display:flex; align-items:center; min-block-size:44px; padding-inline:12px; border-radius:4px; }
.language-menu nav a:hover { background:var(--surface); }
.language-menu nav a[aria-current=page] { color:var(--accent); }
main { inline-size:100%; max-inline-size:1360px; margin-inline:auto; padding:40px 40px 64px; flex:1; }
.page-heading,.catalog-heading { margin-block-end:var(--space-group); }
.intro { margin-block-start:12px; color:var(--muted); font-size:.95rem; max-inline-size:48rem; }
.eyebrow { font-size:.75rem; letter-spacing:.12em; font-weight:600; color:var(--muted); }
.site-footer { inline-size:100%; max-inline-size:1360px; margin-inline:auto; display:flex; justify-content:space-between; align-items:start; gap:24px; padding:24px 40px; border-block-start:1px solid var(--line); font-size:.75rem; color:var(--muted); }
.footer-brand { font-size:.85rem; }
.site-footer p { margin-block-start:6px; }
.preview-label { flex:none; }
.language-landing,.not-found { max-inline-size:650px; margin:48px auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.language-options { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-block-start:20px; }
.language-options .button { min-inline-size:150px; }
.qa-notice { padding:12px; margin-block-end:24px; background:var(--raised); border:1px solid var(--line); }
.rtl-fixture { margin-block-start:32px; display:grid; gap:16px; }

/* Builder: configuration is primary, calculated context is secondary. */
.builder-status { font-size:.85rem; color:var(--muted); overflow-wrap:anywhere; }
.builder-actions { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-block:20px 24px; }
.builder-actions>* { flex:0 0 auto; }
.builder-more { position:relative; }
.builder-more>summary { display:flex; align-items:center; justify-content:center; gap:8px; min-block-size:44px; padding:9px 12px; list-style:none; font-size:.875rem; color:var(--muted); border:1px solid transparent; border-radius:var(--radius); cursor:pointer; }
.builder-more>summary::-webkit-details-marker { display:none; }
.builder-more>summary::after { content:'⌄'; }
.builder-more[open]>summary,.builder-more>summary:hover { background:var(--raised); color:var(--text); }
.builder-more-actions { position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0; z-index:8; display:grid; gap:4px; inline-size:240px; max-inline-size:calc(100vw - 32px); padding:8px; background:var(--raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 35px #0006; }
.builder-more-actions button,.builder-more-actions .button { justify-content:flex-start; text-align:start; inline-size:100%; background:transparent; border-color:transparent; }
.builder-more-actions :is(button,.button):hover { background:var(--surface); }
.builder-more-actions [data-clear] { border-block-start-color:var(--line); border-radius:0 0 4px 4px; color:var(--danger); }
.builder-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr); gap:24px; align-items:start; }
.builder-summary { display:grid; align-content:start; gap:24px; min-inline-size:0; }
.builder-panel { min-inline-size:0; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.builder-panel>h2 { margin-block-end:20px; }
.build-section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-block-end:16px; }
.build-section-heading>button { background:transparent; }
.builder-equipment { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.builder-equipment>.build-value { justify-self:start; }
.build-equipment-slot { min-inline-size:0; }
.build-equipment-slot>h3 { font-size:.8rem; color:var(--muted); font-weight:500; margin-block-end:8px; }
.build-equipment-slot>.build-value { margin-block-start:12px; }
.build-slot,.build-slot-add { inline-size:100%; min-inline-size:0; justify-content:flex-start; text-align:start; }
.build-slot { display:flex; align-items:center; gap:12px; min-block-size:72px; padding:8px; background:transparent; border-color:transparent; }
.build-slot img { inline-size:48px; block-size:48px; flex:none; }
.build-slot-text { display:grid; gap:4px; min-inline-size:0; }
.build-slot-text strong { font-size:.95rem; font-weight:600; }
.build-slot-text small { color:var(--muted); font-size:.8rem; }
.build-slot-add { min-block-size:72px; gap:12px; background:var(--canvas); border-style:dashed; border-color:var(--control-line); color:var(--muted); }
.build-slot-add::before { content:'+'; font-size:1.5rem; font-weight:400; }
.build-selection { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px 16px; min-inline-size:0; padding-block:12px; }
.build-selection+.build-selection { border-block-start:1px solid var(--line); }
.build-selection>.build-slot { padding-inline:0; }
.build-value-row,.build-row-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-inline-size:0; }
.build-value { display:inline-flex; gap:6px; align-items:center; font-size:.8rem; padding:8px 12px; }
.build-remove { font-size:.8rem; justify-self:end; }
.build-remove:hover { color:var(--danger); }
.builder-empty { padding-block:4px; color:var(--muted); font-size:.875rem; }
.builder-analysis .builder-panel { background:transparent; border:0; border-block-start:1px solid var(--line); border-radius:0; padding:24px 0; }
.builder-analysis { gap:8px; }
.builder-analysis h2 { margin-block-end:8px; }
.section-note { font-size:.8rem; line-height:1.7; margin-block:8px 16px; }
[data-validation],[data-effects] { font-size:.875rem; }
.build-issue { padding:10px 12px; border-inline-start:2px solid var(--secondary); margin-block:12px; }
.build-issue[data-status=fail] { border-color:var(--danger); }
.build-issue[data-status=pass] { border-color:var(--success); }
.build-effects { display:grid; gap:8px; margin-block-start:12px; }
.build-effect { overflow-wrap:anywhere; }
.build-effect-control { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; inline-size:100%; text-align:start; padding:12px; background:var(--surface); border-color:transparent; }
.build-effect-name { font-weight:600; }
.build-effect-target { grid-column:1; color:var(--muted); font-size:.8rem; }
.build-effect-value { grid-column:2; grid-row:1/3; align-self:center; font-size:1rem; font-variant-numeric:tabular-nums; }
.builder-reference { margin-block-start:32px; padding-block:16px; border-block-start:1px solid var(--line); font-size:.875rem; }
.builder-reference>summary { display:flex; align-items:center; min-block-size:44px; cursor:pointer; color:var(--muted); gap:8px; }
.builder-reference>summary::before { content:'+'; }
.builder-reference[open]>summary::before { content:'−'; }
.builder-reference p { margin-block:12px; color:var(--muted); }
.builder-reference h2 { margin-block-end:12px; }
.category-links { display:flex; flex-wrap:wrap; gap:8px; margin-block:16px; }
.category-links a { display:inline-flex; align-items:center; min-block-size:44px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius); }
.build-recovery,[data-share-error-actions] { display:flex; flex-wrap:wrap; gap:8px; margin-block:12px; }
.build-recovery:empty,.build-downloads:empty { display:none; }
.build-share-error { margin-block:16px; padding:16px; background:var(--surface); border-inline-start:3px solid var(--accent); border-radius:var(--radius); }
.download-retry { display:inline-flex; align-items:center; min-block-size:44px; padding:8px 12px; margin-block:8px; border:1px solid var(--line); border-radius:var(--radius); color:var(--accent); }
[data-effects-heading]:focus-visible,[data-builder-heading]:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }

/* Search and compact catalog identities. */
.catalog-toolbar { display:grid; gap:16px; padding:0; margin-block:24px; }
.catalog-toolbar label,.picker-controls label { display:grid; gap:6px; font-size:.8rem; color:var(--muted); }
.catalog-toolbar input,.catalog-toolbar select { inline-size:100%; }
.catalog-search-row { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.catalog-search-row>label { flex:1 1 160px; min-inline-size:0; }
.catalog-search-row>button { flex:none; min-block-size:46px; }
.catalog-filters { display:flex; align-items:end; flex-wrap:wrap; gap:12px; padding:16px; background:var(--surface); border-radius:var(--radius); }
.catalog-filters>label { flex:1; min-inline-size:min(180px,100%); }
.filter-chips { display:flex; flex-wrap:wrap; gap:8px; }
.filter-chip { font-size:.8rem; padding:8px 12px; }
[data-result-count] { color:var(--muted); font-size:.85rem; margin-block:20px; }
[data-catalog-empty] { text-align:center; padding:48px 20px; color:var(--muted); }
.catalog-empty-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-block-start:16px; }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.catalog-card { min-inline-size:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.catalog-card:hover { border-color:var(--control-line); }
.catalog-entry-link { display:flex; align-items:center; gap:16px; min-block-size:104px; padding:20px; inline-size:100%; block-size:100%; border-radius:var(--radius); }
.catalog-entry-link:hover { color:var(--text); }
.catalog-card-art { flex:none; inline-size:56px; }
.catalog-card-art img { inline-size:56px; block-size:56px; }
.catalog-card-body { display:grid; gap:6px; min-inline-size:0; }
.catalog-card h2 { font-size:1rem; }
.catalog-kicker { font-size:.75rem; color:var(--muted); }
.search-reason { font-size:.8rem; color:var(--muted); line-height:1.65; white-space:pre-line; }
.search-reason-label { color:var(--secondary); }
mark { color:var(--text); background:color-mix(in srgb,var(--accent) 24%,transparent); border-radius:2px; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }

/* Detail reading column; relationships use spacing rather than nested boxes. */
.breadcrumbs { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-block-end:24px; color:var(--muted); font-size:.85rem; }
.breadcrumbs a { min-block-size:44px; display:inline-flex; align-items:center; }
.detail-layout { max-inline-size:48rem; }
.detail-hero { display:flex; align-items:center; gap:24px; padding-block:8px 24px; margin-block-end:32px; border-block-end:1px solid var(--line); }
.detail-hero>div { min-inline-size:0; }
.detail-hero img { inline-size:96px; block-size:96px; flex:none; }
.detail-hero .catalog-kicker { margin-block-end:8px; }
.detail-hero h1 { font-size:clamp(1.6rem,3vw,2.25rem); }
.alternate-name { font-size:.85rem; color:var(--muted); margin-block-start:8px; }
.detail-section { min-inline-size:0; margin-block:32px; }
.detail-section h2 { margin-block-end:16px; }
.detail-section p+p { margin-block-start:12px; }
.catalog-description { font-size:.95rem; line-height:1.8; white-space:pre-line; }
.detail-section>.muted { font-size:.85rem; }
.condition-list { padding-inline-start:22px; }
.detail-section li { margin-block:8px; }
.detail-section a,.related-grid a,.entry-reference { text-decoration:underline; text-decoration-color:var(--control-line); text-underline-offset:4px; }
.detail-section details { border-block-start:1px solid var(--line); padding-block:12px; }
.detail-section summary { cursor:pointer; min-block-size:44px; display:flex; align-items:center; gap:10px; }
.detail-section summary::before { content:'+'; }
.detail-section details[open]>summary::before { content:'−'; }
.detail-section pre { max-inline-size:100%; overflow:auto; padding:16px; background:var(--surface); border-radius:var(--radius); font-size:.8rem; direction:ltr; text-align:start; }
.detail-section code,.provenance code { overflow-wrap:anywhere; word-break:break-word; }
.related-grid { display:grid; gap:8px 24px; grid-template-columns:repeat(2,minmax(0,1fr)); list-style:none; padding:0; }
.related-grid a { display:flex; align-items:center; gap:12px; min-block-size:44px; }
.related-grid img { inline-size:40px; block-size:40px; }
.related-grid .muted { font-size:.8rem; }
.provenance { font-size:.8rem; color:var(--muted); overflow-wrap:anywhere; }
.detail-layout>.provenance { padding-block:16px; border-block-start:1px solid var(--line); margin-block:32px 16px; }
.provenance summary { cursor:pointer; min-block-size:44px; display:flex; align-items:center; }
.provenance dl { display:grid; gap:8px; }
.provenance dt { color:var(--text); }
.provenance dd { margin:0 0 10px; }
[data-catalog-return] { display:inline-flex; align-items:center; min-block-size:44px; color:var(--muted); font-size:.85rem; }
.entry-reference { display:inline; }
.entry-reference img { display:inline-block; inline-size:20px; block-size:20px; vertical-align:middle; margin-inline-end:4px; }
.official-term { white-space:pre-wrap; }
.condition-count { display:inline-block; margin-inline-start:.5rem; color:var(--muted); }

/* Shared layers: one body scroller, persistent actions and stable focus. */
.ui-dialog { inline-size:min(850px,calc(100% - 32px)); max-inline-size:calc(100% - 24px); max-block-size:calc(100dvh - 32px); margin:auto; padding:0; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 28px 100px #0008; overflow:hidden; }
.ui-dialog[open] { display:flex; flex-direction:column; }
.ui-dialog::backdrop { background:#08080ac9; }
.ui-dialog-top { flex:none; display:flex; align-items:center; gap:16px; padding:20px 24px; padding-inline-start:max(24px,env(safe-area-inset-left)); padding-inline-end:max(24px,env(safe-area-inset-right)); }
.ui-dialog-top h2 { font-size:1.15rem; min-inline-size:0; }
.ui-dialog-top h2:focus { outline:none; }
.ui-dialog-top a { text-decoration:underline; text-underline-offset:4px; }
.ui-dialog-body { min-block-size:0; min-inline-size:0; padding:0 24px 24px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.ui-dialog-footer { flex:none; display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:10px; padding:16px 24px; padding-block-end:max(16px,env(safe-area-inset-bottom)); padding-inline-start:max(24px,env(safe-area-inset-left)); padding-inline-end:max(24px,env(safe-area-inset-right)); border-block-start:1px solid var(--line); }
.ui-dialog-footer .ui-close { flex-basis:100%; inline-size:100%; background:transparent; }
.ui-dialog input,.ui-dialog select,.ui-dialog textarea { inline-size:100%; }
.ui-value-field { display:grid; gap:12px; }
.ui-dialog[data-kind=value] { inline-size:min(24rem,calc(100% - 24px)); position:fixed; margin:0; }
.ui-dialog[data-kind=value]::backdrop { background:#0005; }
.ui-dialog[data-kind=value] .ui-dialog-footer button { flex:1 1 7rem; }
.ui-dialog[data-kind=share] { inline-size:min(40rem,calc(100% - 24px)); }
.ui-share-status { min-block-size:1.65em; margin-block-start:14px; color:var(--muted); }
.ui-dialog-body dl { margin:0; }
.ui-dialog-body dt { color:var(--muted); margin-block-start:14px; font-size:.85rem; }
.ui-dialog-body dd { margin-inline-start:0; margin-block:4px 12px; white-space:pre-wrap; }
.ui-loading-identity { display:flex; align-items:center; gap:12px; margin-block-end:12px; }
.ui-loading-identity img { inline-size:48px; block-size:48px; flex:none; }
.ui-preview { position:fixed; z-index:15; inline-size:min(440px,calc(100vw - 24px)); max-block-size:min(620px,calc(100dvh - 24px)); overflow:auto; overscroll-behavior:contain; padding:20px; background:var(--raised); border:1px solid var(--control-line); border-radius:var(--radius); box-shadow:0 18px 50px #0009; font-size:.875rem; }
.ui-preview .detail-layout,.ui-dialog .detail-layout { max-inline-size:none; }
.ui-preview .breadcrumbs,.ui-dialog-body .breadcrumbs { display:none; }
.ui-preview .detail-hero,.ui-dialog .detail-hero { padding:0; border:0; margin-block-end:20px; gap:16px; }
.ui-preview .detail-hero img,.ui-dialog .detail-hero img { inline-size:44px; block-size:44px; }
.ui-preview .detail-hero h2 { font-size:1.05rem; }
.ui-dialog .detail-hero h2 { font-size:1.2rem; }
.ui-preview .detail-section,.ui-dialog .detail-section { margin-block:20px; }
.ui-preview .detail-section h2,.ui-dialog .detail-section h2 { font-size:.85rem; color:var(--muted); margin-block-end:8px; }
.ui-preview .catalog-description,.ui-dialog .catalog-description { font-size:.875rem; }
.ui-preview .alternate-name,.ui-dialog .alternate-name { font-size:.8rem; }
.ui-preview-text p+p { margin-block-start:12px; }
.ui-preview-group { padding-block:12px; border-block-start:1px solid var(--line); }
.ui-preview-context p { white-space:pre-line; }
.ui-preview .related-grid span { display:flex; align-items:center; gap:10px; min-block-size:40px; }

/* Pickers adapt to their own width, not the width of the page behind them. */
.ui-dialog[data-kind=picker] { inline-size:min(1080px,calc(100% - 32px)); block-size:min(820px,calc(100dvh - 40px)); container-type:inline-size; }
.ui-dialog[data-kind=picker] .ui-dialog-body { display:flex; flex-direction:column; overflow:hidden; padding:0 24px 20px; }
.picker-controls { display:flex; gap:12px; flex-wrap:wrap; margin-block-end:12px; }
.picker-controls label { flex:1; min-inline-size:min(140px,100%); }
.picker-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; min-block-size:0; flex:1; }
.picker-browse { display:grid; grid-template-rows:auto auto auto minmax(0,1fr); min-inline-size:0; min-block-size:0; }
.picker-count { color:var(--muted); font-size:.8rem; margin-block:8px 12px; }
.picker-list,.picker-detail { min-inline-size:0; min-block-size:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:4px; }
.picker-list { display:flex; flex-direction:column; gap:8px; }
.picker-candidate { display:flex; align-items:center; flex-wrap:wrap; gap:12px; flex:none; inline-size:100%; justify-content:flex-start; text-align:start; padding:12px; background:var(--canvas); border-color:var(--control-line); }
.picker-candidate[aria-pressed=true] { border-color:var(--accent); background:var(--glow); }
.picker-candidate img { inline-size:44px; block-size:44px; flex:none; }
.picker-candidate span { min-inline-size:0; }
.picker-candidate small { display:block; color:var(--muted); font-weight:400; }
.picker-candidate>.search-reason { flex-basis:100%; padding-inline-start:56px; }
.picker-detail { border-inline-start:1px solid var(--line); padding-inline-start:24px; }
.picker-detail .detail-hero { flex-wrap:wrap; }
.picker-back { display:none; }
.picker-empty { padding:20px; color:var(--muted); }
.picker-filters { flex:none; align-self:end; min-inline-size:0; }
.picker-filters>summary { min-block-size:46px; display:flex; align-items:center; padding:8px 14px; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; font-size:.875rem; }
.picker-filters[open] { flex-basis:100%; padding:12px; background:var(--canvas); border-radius:var(--radius); }
.picker-filters[open]>summary { margin-block-end:12px; }
.picker-filters label { margin-block-end:12px; }
.candidate-detail-identity { display:flex; align-items:center; gap:12px; }
.candidate-detail-identity img { inline-size:40px; block-size:40px; }
.candidate-detail-identity a { text-decoration:underline; text-underline-offset:4px; }
.current-context { border-block-start:1px solid var(--line); padding-block-start:16px; margin-block:20px; }
.current-context h3,.current-context h4 { font-size:.9rem; }
.current-context p { color:var(--muted); font-size:.85rem; }

/* Local save workflow: choose, inspect, edit, review, download. */
.save-intro { max-inline-size:48rem; margin-block:24px; }
.save-intro p+p { margin-block-start:12px; }
.save-intro .muted { font-size:.875rem; }
.save-import { display:grid; gap:8px; inline-size:min(100%,28rem); font-size:.875rem; }
.save-import input { background:var(--canvas); color:var(--text); }
.save-import input::file-selector-button { background:var(--accent); color:var(--on-accent); font-weight:650; min-block-size:44px; }
.save-file { margin-block:24px; background:transparent; border:0; border-block:1px solid var(--line); border-radius:0; padding:24px 0; }
.save-file dl { display:grid; grid-template-columns:minmax(100px,180px) minmax(0,1fr); gap:8px 20px; margin-block:16px; }
.save-file dd { margin:0; }
.save-file dt { color:var(--muted); }
.save-layout { margin-block:32px; }
.save-layout .builder-panel>p { font-size:.875rem; }
.save-field { display:grid; grid-template-columns:minmax(0,1fr) minmax(100px,150px); gap:10px 18px; padding-block:16px; border-block-end:1px solid var(--line); }
.save-field small { grid-column:1/-1; color:var(--muted); }
.save-field input { align-self:start; inline-size:100%; }
.save-field label { min-inline-size:0; }
.save-field input[readonly] { opacity:.65; }
.save-group>summary { cursor:pointer; min-block-size:48px; margin-block-start:20px; display:flex; align-items:center; gap:10px; }
.save-group>h3 { margin-block:24px 0 8px; }
.save-group>summary::before { content:'+'; }
.save-group[open]>summary::before { content:'−'; }
.save-group details { grid-column:1/-1; }
.save-field details summary { cursor:pointer; color:var(--muted); min-block-size:44px; display:flex; align-items:center; font-size:.8rem; }
.save-field details small { display:block; }
.save-change { padding-block:12px; border-block-end:1px solid var(--line); }
.save-review { background:transparent; border:0; border-block-start:1px solid var(--line); border-radius:0; padding:24px 0; }
.save-editor label:not(.button) { display:grid; gap:8px; }
.save-editor label input { inline-size:100%; }
.save-editor .builder-reference a { display:inline-flex; align-items:center; min-block-size:44px; text-decoration:underline; text-underline-offset:4px; }
.file-import { flex-wrap:wrap; }
.file-import input { flex:1 1 180px; }

/* Responsive layout: preserve words, targets and reading order. */
@media(max-width:1200px) {
  .header-inner { flex-wrap:wrap; gap:8px 24px; padding-block-start:12px; }
  .primary-nav { order:3; inline-size:100%; overflow-x:auto; flex-wrap:nowrap; gap:24px; padding:4px; scroll-padding-inline:8px; scrollbar-width:thin; }
  .primary-nav>a { padding-block:12px; }
  .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:1000px) {
  .builder-layout { grid-template-columns:minmax(0,1fr); }
  .builder-analysis { gap:0; }
}
@media(max-width:860px) {
  main { padding:32px 24px 48px; }
  .header-inner { padding-inline:24px; }
  .site-footer { padding-inline:24px; }
}
@media(max-width:600px) {
  main { padding:24px 16px 40px; }
  .header-inner { padding-inline:16px; gap:8px 12px; }
  .brand { gap:8px; }
  .brand img { inline-size:32px; block-size:32px; }
  .brand>span { font-size:.8rem; }
  .brand-build { font-size:.7rem; }
  .header-tools { gap:12px; font-size:.75rem; flex-wrap:wrap; }
  .language-icon { display:none; }
  .primary-nav { gap:24px; }
  .primary-nav>a { font-size:.85rem; }
  .page-heading,.catalog-heading { margin-block-end:20px; }
  .intro { font-size:.9rem; margin-block-start:8px; }
  .builder-actions { gap:8px; }
  .builder-actions :is(button,.button) { padding-inline:12px; }
  .builder-panel { padding:16px; }
  .builder-summary { gap:16px; }
  .builder-panel>h2 { margin-block-end:16px; }
  .builder-equipment { grid-template-columns:minmax(0,1fr); }
  .build-selection { grid-template-columns:minmax(0,1fr) auto; }
  .build-selection>.build-slot { grid-column:1/-1; }
  .builder-analysis .builder-panel,.save-review { padding:20px 0; }
  .build-section-heading { margin-block-end:12px; }
  .catalog-grid,.related-grid { grid-template-columns:minmax(0,1fr); }
  .catalog-grid { gap:12px; }
  .catalog-entry-link { padding:16px; min-block-size:96px; }
  .catalog-card-art,.catalog-card-art img { inline-size:48px; block-size:48px; }
  .catalog-search-row { gap:8px; }
  .catalog-search-row>label { flex-basis:160px; }
  .detail-hero { gap:16px; align-items:flex-start; }
  .detail-hero img { inline-size:64px; block-size:64px; }
  .site-footer { padding:24px 16px; flex-direction:column; gap:12px; }
  .ui-dialog-top { padding:16px; padding-inline-start:max(16px,env(safe-area-inset-left)); padding-inline-end:max(16px,env(safe-area-inset-right)); }
  .ui-dialog-body { padding:0 16px 16px; }
  .ui-dialog-footer { padding:12px 16px; padding-block-end:max(12px,env(safe-area-inset-bottom)); padding-inline-start:max(16px,env(safe-area-inset-left)); padding-inline-end:max(16px,env(safe-area-inset-right)); }
  .ui-dialog-footer button { flex:1 0 auto; }
  .ui-dialog[data-kind=picker] { inline-size:calc(100% - 16px); max-inline-size:calc(100% - 16px); block-size:calc(100dvh - 16px); max-block-size:calc(100dvh - 16px); }
  .ui-dialog[data-kind=picker] .ui-dialog-body { padding:0 12px 12px; }
  .ui-dialog[data-kind=info] { inline-size:100%; max-inline-size:100%; max-block-size:calc(100dvh - 16px); margin:auto 0 0; border-end-start-radius:0; border-end-end-radius:0; transform:translateY(var(--sheet-drag,0)); }
  .ui-dialog[data-kind=info] .ui-dialog-top { touch-action:none; padding-block-start:24px; position:relative; }
  .ui-dialog[data-kind=info] .ui-dialog-top::before { content:''; position:absolute; inset-block-start:8px; inset-inline-start:calc(50% - 18px); inline-size:36px; block-size:4px; background:var(--control-line); border-radius:4px; }
  .ui-dialog[data-kind=value] { position:fixed; margin:auto; inset:0; }
  .ui-preview { display:none; }
  .save-field { grid-template-columns:minmax(0,1fr); }
  .save-file dl { grid-template-columns:minmax(0,1fr); gap:4px; }
  .save-file dd { margin-block-end:12px; }
}
@media(max-width:420px) {
  .builder-more { position:static; }
  .builder-more-actions { inset-inline:0; inline-size:100%; max-inline-size:100%; }
  .picker-candidate>.search-reason { padding-inline-start:0; }
}
@container(max-width:56rem) {
  .picker-layout { grid-template-columns:minmax(0,1fr); }
  .picker-detail { display:none; border-inline-start:0; padding-inline-start:4px; }
  .picker-layout[data-view=detail] .picker-browse { display:none; }
  .picker-layout[data-view=detail] .picker-detail { display:block; }
  .ui-dialog[data-view=detail] .picker-back { display:inline-flex; }
  .ui-dialog[data-kind=picker]:not([data-view=detail]) .ui-dialog-footer [data-picker-apply] { display:none; }
}
@container(max-width:18rem) {
  .picker-browse { display:block; overflow:auto; overscroll-behavior:contain; }
  .picker-browse .picker-list { overflow:visible; max-block-size:none; }
  .picker-controls>* { flex-basis:100%; min-inline-size:0; }
}
@media(max-height:480px) {
  .picker-browse { display:block; overflow:auto; overscroll-behavior:contain; }
  .picker-browse .picker-list { overflow:visible; max-block-size:none; }
}
@media(prefers-reduced-motion:no-preference) {
  button,a,summary { transition:background-color .15s,border-color .15s,color .15s; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}
@media(forced-colors:active) {
  .ui-dialog,.ui-preview,.catalog-card,.builder-panel,button,.button,.picker-filters>summary { border-color:ButtonText; }
  .primary-nav>a[aria-current],.picker-candidate[aria-pressed=true] { border-color:Highlight; }
  .ui-dialog::backdrop { background:Canvas; opacity:.7; }
  mark { color:HighlightText; background:Highlight; text-decoration:none; }
}