.companion { overflow:auto; min-height:100vh; background:radial-gradient(ellipse at 80% 0,#263d463d,transparent 55%),#101820; }
html:has(.mobile-detail-dialog[open]),body:has(.mobile-detail-dialog[open]) { overflow:hidden; }
.mobile-detail-dialog { width:min(720px,calc(100% - 24px)); max-width:calc(100% - 24px); max-height:calc(100dvh - 32px); padding:0; color:var(--text); background:#101a23; border:1px solid #586776; border-radius:14px; box-shadow:0 24px 80px #0009; overflow:hidden; }
.mobile-detail-dialog[open] { display:flex; flex-direction:column; }
.mobile-detail-dialog::backdrop { background:#03090dcc; }
.detail-dialog-bar { display:flex; justify-content:flex-end; padding:8px 12px; border-bottom:1px solid var(--line); flex-shrink:0; }
.detail-dialog-bar .button { min-width:88px; min-height:44px; }
.detail-dialog-status { margin-right:auto; align-self:center; padding-right:10px; font-size:12px; color:var(--gold); }
.detail-dialog-content { overflow:auto; overscroll-behavior:contain; padding:14px; min-height:0; }
.detail-dialog-content>.panel { position:static; margin:0; max-height:none; overflow:visible; }
@media(max-width:1200px) { #content #recipe-detail,#content #catalog-detail { display:none; } }
.companion-header { min-height:82px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding:16px 30px; border-bottom:1px solid var(--line); background:#101a22ed; }
.companion .brand { min-width:0; white-space:normal; }
.companion .brand>img { flex-shrink:0; }
.companion .brand-caption { display:block; font-size:11px; letter-spacing:.12em; color:var(--muted); margin:3px 0 0; padding:0; border:0; }
.header-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.companion select,.companion input,.companion textarea { color:var(--text); background:#0c151d; border:1px solid #566673; border-radius:5px; min-height:40px; padding:9px 12px; width:100%; font:inherit; }
.companion textarea { min-height:90px; resize:vertical; }
.companion input[type=checkbox] { width:18px; height:18px; min-height:18px; min-width:18px; padding:0; margin:0; flex:0 0 18px; }
.header-actions select { width:180px; }
.companion-layout { display:grid; grid-template-columns:236px minmax(0,1fr); min-height:calc(100vh - 83px); }
.companion-nav { padding:30px 18px; border-right:1px solid var(--line); background:#111b24c9; }
.companion-nav>.eyebrow { padding:0 12px; font-size:10px; margin-bottom:20px; color:#8397a6; letter-spacing:.16em; }
.companion-nav>a { display:flex; justify-content:space-between; align-items:center; padding:13px 12px; border:1px solid transparent; margin-bottom:6px; border-radius:5px; color:#b5c2cf; }
.companion-nav>a span { font-size:10px; opacity:.5; }
.companion-nav>a[aria-current=page] { background:#c4a56513; border-color:#d4b67340; color:#f0d895; }
.companion-nav>a:hover { background:#ffffff08; }
.nav-foot { margin:45px 12px 0; font-size:11px; line-height:1.8; color:#8ea1af; }
.online-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#88bb9b; margin-right:5px; }
.companion-main { padding:38px clamp(22px,4vw,64px) 70px; max-width:1600px; width:100%; }
.companion-main h1 { margin:10px 0; font-size:clamp(27px,3vw,40px); font-weight:500; letter-spacing:-.02em; }
.companion-main h2 { font-weight:500; font-size:19px; margin:0 0 14px; }
.companion-main h3 { font-weight:500; margin:0 0 10px; }
.companion-main p { color:var(--muted); line-height:1.65; }
.companion-main .intro { max-width:760px; margin-bottom:28px; }
.companion-main .eyebrow { color:var(--gold); font-size:10px; letter-spacing:.17em; }
.companion .button { display:inline-flex; justify-content:center; align-items:center; gap:7px; min-height:38px; padding:9px 14px; border:1px solid #7c929a65; border-radius:5px; background:#24333f; font-size:12px; text-align:center; }
.companion .button:hover { border-color:var(--gold); color:var(--gold); }
.companion .button.primary { background:#dac18b; border-color:#dac18b; color:#19222a; }
.companion .button.danger { color:#edaaa0; }
.companion .button:disabled { cursor:not-allowed; opacity:.4; }
.companion .button.small { min-height:30px; padding:6px 10px; font-size:11px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin:24px 0; }
.card,.panel { border:1px solid var(--line); background:linear-gradient(140deg,#20303d99,#17232ed9); border-radius:8px; padding:22px; }
.card .metric { display:block; color:#f0d89e; font-size:32px; margin:8px 0; }
.card small,.muted { color:var(--muted); }
.panel { margin:18px 0; }
.split { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:22px; }
.split>.panel { margin-top:0; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:16px 0; align-items:end; }
.companion label { display:block; color:#bac6cf; font-size:12px; line-height:1.5; }
.companion label>input,.companion label>select,.companion label>textarea { margin-top:6px; }
.companion form:not(.toolbar)>label+label { margin-top:14px; }
.companion .simple-check { display:flex; align-items:center; gap:9px; min-height:44px; }
.companion .simple-check input { margin:0; flex:none; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; align-items:center; }
.toolbar .search { flex:1; min-width:190px; }
.table-wrap { overflow-x:auto; }
.companion table { border-collapse:collapse; width:100%; text-align:left; font-size:12px; }
.companion th { padding:12px 10px; color:#96aab9; border-bottom:1px solid var(--line); font-size:10px; text-transform:uppercase; letter-spacing:.09em; }
.companion td { padding:13px 10px; border-bottom:1px solid #ffffff0b; vertical-align:middle; }
.companion td input { width:90px; min-height:34px; padding:6px; }
.companion td a:not(.button) { color:#dfc98f; }
.companion td small { display:block; color:var(--muted); margin-top:4px; }
.empty { padding:30px 20px; border:1px dashed var(--line); border-radius:6px; color:var(--muted); text-align:center; line-height:1.7; }
.badge { display:inline-block; border:1px solid #9dbab23d; background:#9dbab20b; border-radius:20px; color:#a9d3c7; padding:4px 9px; font-size:10px; }
.badge.warn { color:#e9c58a; border-color:#e9c58a40; }
.progress { height:5px; border-radius:4px; background:#ffffff12; overflow:hidden; margin:12px 0; }
.progress span { display:block; height:100%; background:#d8c08b; }
.list-row { display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid #ffffff0c; }
.list-row>div { flex:1; min-width:0; }
.list-row small { display:block; margin-top:5px; color:var(--muted); }
.list-row .check { flex:0 0 auto; }
.companion details { border:1px solid var(--line); border-radius:6px; padding:15px; margin:12px 0; }
.companion summary { cursor:pointer; color:#dfc98f; }
.planner-status { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); max-width:90vw; background:#e5cf9d; color:#18222c; border-radius:5px; padding:13px 22px; z-index:100; box-shadow:0 8px 30px #0008; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.route-point { display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid #ffffff12; }
.route-number { border:1px solid #d9bd7255; border-radius:50%; width:26px; height:26px; display:grid; place-items:center; color:#e4cd97; }
.route-point .toolbar { margin:0; }
.notice { padding:13px 16px; border-left:2px solid #d6ba7a; background:#d6ba7a09; color:#bfc8cc; line-height:1.65; font-size:12px; }
.cover-card { background:linear-gradient(90deg,#152b36f5,#152b36ad),url('./assets/maps/World_L_A.png') center/cover; min-height:190px; display:flex; flex-direction:column; justify-content:center; }
.cover-card p { max-width:620px; }
.entry-links { display:flex; flex-wrap:wrap; gap:8px; }
.import-label { cursor:pointer; }
@media(max-width:1000px) { .companion-layout { grid-template-columns:195px minmax(0,1fr); } .split { grid-template-columns:1fr; } .companion-header { padding:15px 20px; } .companion-main { padding:28px 22px; } }
@media(max-width:720px) { .companion-header { align-items:flex-start; flex-direction:column; gap:14px; } .header-actions { width:100%; } .header-actions select { flex:1; width:140px; } .companion-layout { display:block; } .companion-nav { padding:10px 12px; display:flex; gap:6px; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); } .companion-nav>a { white-space:nowrap; padding:10px; margin:0; font-size:12px; } .companion-nav>a span,.companion-nav>.eyebrow,.nav-foot { display:none; } .companion-main { padding:25px 16px 55px; } .panel,.card { padding:17px; } .cards { grid-template-columns:1fr 1fr; gap:10px; } .companion td { padding:10px 6px; } .companion .brand { font-size:17px; } }

.companion .site-language { display:flex; align-items:center; }
.companion .site-language select { margin:0; width:135px; min-height:34px; padding:5px 9px; }
.companion-layout { min-height:calc(100vh - 132px); }
.companion-main,.panel,.card,.list-row,.form-grid>*,.header-actions { min-width:0; }
.companion-main :is(h1,h2,h3,p,td,a,small,.list-row>div) { overflow-wrap:anywhere; }
.companion input,.companion select,.companion textarea { max-width:100%; }
.recipe-browser .simple-check { display:flex; align-items:center; min-height:40px; gap:9px; margin:0; }
.recipe-browser .simple-check input { margin:0; }
@media(max-width:720px) {
  .companion .site-language select { width:108px; }
  .companion-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; overflow:visible; }
  .companion-nav>a { min-width:0; white-space:normal; overflow-wrap:anywhere; text-align:center; justify-content:center; padding:9px 5px; font-size:11px; }
  .companion-nav .nav-foot,.companion-nav>.eyebrow { display:none; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card .metric { font-size:26px; }
  .companion .toolbar { align-items:stretch; }
  .companion .toolbar>.search { min-width:0; flex-basis:100%; }
  .form-grid { grid-template-columns:minmax(0,1fr); }
  .table-wrap { overflow:visible; }
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td { display:block; width:100%; }
  .table-wrap thead { display:none; }
  .table-wrap tr { border-bottom:1px solid var(--line); padding:12px 0; }
  .table-wrap td { border:0; padding:6px 0; }
  .table-wrap td[data-label]::before { content:attr(data-label); display:inline-block; min-width:80px; margin-right:8px; color:var(--muted); font-size:11px; }
  .table-wrap td input { width:100px; }
  .table-wrap td .toolbar { margin:8px 0; }
  .list-row { flex-wrap:wrap; gap:9px; }
  .list-row>div { flex:1 1 150px; }
  .route-point { grid-template-columns:26px minmax(0,1fr); }
  .route-point>.toolbar { grid-column:2; }
  .companion .button { white-space:normal; overflow-wrap:anywhere; }
}

.recipe-ingredients table { table-layout:fixed; }
.recipe-ingredients th:first-child { width:52%; }
.recipe-ingredients th { overflow-wrap:anywhere; }
.schedule-table table { table-layout:fixed; }
.schedule-table caption { text-align:left; color:var(--muted); font-size:12px; padding:16px 0 8px; }
.schedule-table th { overflow-wrap:anywhere; }
.schedule-table th:nth-child(1) { width:23%; }
.schedule-table th:nth-child(2) { width:13%; }
.schedule-table th:nth-child(3) { width:17%; }
.schedule-table th:nth-child(4) { width:33%; }
.schedule-table th:nth-child(5) { width:14%; }
.schedule-table td { vertical-align:top; }
.schedule-times { display:flex; flex-wrap:wrap; gap:6px; }
.schedule-times time { padding:3px 6px; border:1px solid #89a8b42e; border-radius:4px; background:#101c26; font-variant-numeric:tabular-nums; white-space:nowrap; }
@media(max-width:720px) { .schedule-table td[data-label]::before { display:block; margin-bottom:6px; } }
@media(min-width:721px) and (max-width:1200px) { .split { grid-template-columns:minmax(0,1fr); } }

/* Item artwork is packed into two small atlases; no thousands of image requests. */
[data-grade] { --rarity: #d2d8db; }
[data-grade=Rare] { --rarity:#87c4f0; }
[data-grade=Legend] { --rarity:#c299ed; }
[data-grade=Unique] { --rarity:#f0cf80; }
[data-grade=Epic], [data-grade=Mythic] { --rarity:#f2a28a; }
[data-grade=Common], [data-grade=Normal] { --rarity:#c2d0d9; }
.item-rarity { color:var(--rarity); font-size:12px; }
.item-icon { width:64px; height:64px; flex:0 0 64px; position:relative; display:inline-block; overflow:hidden; border:1px solid var(--rarity,#8496a2); border-radius:8px; background:#0c151e; box-shadow:inset 0 0 14px #0008; }
.item-art { display:block; width:64px; height:64px; background-repeat:no-repeat; }
.icon-missing, .entity-icon { display:inline-grid; place-items:center; color:#a8b9c6; font-size:30px; }
.icon-fallback { color:var(--rarity,#a8b9c6); background:linear-gradient(145deg,#344956,#13212d); }
.icon-fallback svg { width:76%; height:76%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.item-heading { display:flex; align-items:center; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.item-heading>div { min-width:0; }
.item-heading h2 { color:var(--rarity); overflow-wrap:anywhere; margin:5px 0 10px; font-size:25px; line-height:1.25; }
.item-heading .eyebrow { margin:0; }
.item-description { margin:22px 0; padding:16px 20px; border:1px solid #d8bd7633; border-left:3px solid var(--gold); border-radius:0 8px 8px 0; background:#d8bd7608; overflow-wrap:anywhere; }
.item-description p { max-width:76ch; margin:0 0 10px; color:#c9d4dd; line-height:1.8; }
.item-description p:last-child { margin-bottom:0; }
.item-description-emphasis { color:#f1d594; font-weight:500; }
.description-value-unavailable { color:#90a6b6; border-bottom:1px dotted currentColor; padding-inline:3px; }
.item-description .description-note { color:var(--muted); font-size:11px; margin-top:14px; padding-top:10px; border-top:1px solid var(--line); }
.item-section { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
.item-section>h3 { color:#dfc88f; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.item-section .item-facts { margin-bottom:0; }
.item-classes { border-top:1px solid var(--line); padding-top:14px; }
.item-classes strong { color:#d9e8f1; }
.item-facts>div { padding:10px 12px; border:1px solid #a0b9cd15; border-radius:5px; background:#0b162044; }
.item-overview .item-heading :is(h1,h2) { font-size:clamp(23px,3vw,34px); margin:5px 0 10px; color:var(--rarity); }
.item-page .companion-main { max-width:1120px; margin:auto; }
.item-actions { display:flex; flex-wrap:wrap; gap:10px; padding-top:22px; margin-top:22px; border-top:1px solid var(--line); }
.item-related { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:20px; }
.item-related>.panel { min-width:0; }
.item-related a:not(.button) { color:var(--selected); }
.item-related a:not(.button):hover { text-decoration:underline; text-underline-offset:3px; }
.item-link-list { list-style:none; padding:0; margin:0; }
.item-link-list>li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); line-height:1.6; }
.item-link-list>li:last-child { border:0; padding-bottom:0; }
.item-link-list ul { flex-basis:100%; margin:0; padding:0 0 0 16px; color:var(--muted); }
.item-link-list ul li { padding:3px 0; }
.item-link-list ul li>span { margin-left:12px; color:var(--text); }
.item-translations summary { color:var(--gold); cursor:pointer; }
.directory-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:20px 0; padding:16px 8px; border-block:1px solid var(--line); background:#0b162044; border-radius:6px; }
.page-button { min-width:40px; min-height:42px; padding:10px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid #71879566; border-radius:6px; color:#d7e5ee; background:#24333f; font-size:13px; font-variant-numeric:tabular-nums; }
a.page-button:hover { color:var(--gold); border-color:var(--gold); background:#35434b; }
.page-button.is-current { background:#dac18b; color:#17232a; border-color:#dac18b; font-weight:700; }
.page-button[aria-disabled=true] { opacity:.35; }
.pagination-gap { color:var(--muted); padding:4px; }
.directory-pagination>small { flex-basis:100%; text-align:center; color:var(--muted); padding-top:6px; }
.companion .catalog-pagination .button { min-height:42px; min-width:82px; border-radius:6px; padding:10px 14px; background:linear-gradient(#2d404d,#1e2d39); border-color:#71879580; font-size:12px; }
.companion .catalog-pagination .button:disabled { cursor:not-allowed; opacity:.35; }
.companion .catalog-pagination .button:disabled:hover { color:inherit; border-color:#71879580; }
.catalog-pagination input { min-height:42px; font-variant-numeric:tabular-nums; }
@media(max-width:720px) {
  .item-related { grid-template-columns:minmax(0,1fr); }
  .item-description { padding:14px; }
  .item-facts { gap:8px; }
  .item-facts>div { padding:9px; }
  .page-button { min-width:38px; min-height:44px; }
  .page-step>span { display:none; }
  .companion .catalog-pagination .button { min-width:70px; min-height:44px; padding-inline:10px; }
}
.item-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:20px 0; }
.item-facts div { min-width:0; }
.item-facts dt { color:var(--muted); font-size:11px; margin-bottom:4px; }
.item-facts dd { margin:0; overflow-wrap:anywhere; font-size:13px; }
.item-stats { margin:12px 0; padding:4px 14px; background:#0d182280; border:1px solid #95c4d025; border-radius:6px; }
.item-stats>div { display:flex; justify-content:space-between; gap:15px; padding:10px 0; border-bottom:1px solid #a5b9c415; font-size:13px; }
.item-stats>div:last-child { border:0; }
.item-stats dt { color:#bacbd5; overflow-wrap:anywhere; }
.item-stats dd { margin:0; color:#9bdcc7; text-align:right; flex-shrink:0; }
.item-stats small { color:var(--muted); font-size:10px; }
.stat-note { font-size:11px; line-height:1.6; }
.catalog-search { display:flex; align-items:end; gap:14px; }
.catalog-search>label { flex:1; }
.catalog-filter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:12px; margin-top:16px; }
.catalog-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:22px; align-items:start; }
.catalog-layout>.panel { margin-top:0; min-width:0; }
.catalog-results { padding:12px 18px; }
.catalog-detail { position:sticky; top:16px; max-height:calc(100dvh - 32px); overflow:auto; }
.catalog-list { display:flex; flex-direction:column; }
.catalog-row { width:100%; display:flex; align-items:center; gap:13px; text-align:left; padding:13px 6px; border-bottom:1px solid #afc2d018; border-radius:4px; }
.catalog-row:hover, .catalog-row.selected { background:#8dbfce12; box-shadow:inset 2px 0 #e1c68c; }
.catalog-row .item-icon, .item-directory .item-icon { width:48px; height:48px; flex-basis:48px; }
.catalog-row .item-art, .item-directory .item-art { transform:scale(.75); transform-origin:top left; }
.catalog-row-text { flex:1; min-width:0; }
.catalog-row strong { display:block; font-weight:500; color:var(--rarity); line-height:1.4; overflow-wrap:anywhere; }
.catalog-row small { display:block; color:var(--muted); font-size:11px; margin:4px 0; }
.catalog-row-meta { display:flex; gap:12px; color:#9eb1c1; font-size:11px; }
.catalog-row-arrow { color:#8babb9; font-size:25px; }
.catalog-pagination { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; font-size:12px; color:var(--muted); }
.catalog-pagination>span { text-align:center; }
.catalog-pagination input { display:inline-block; width:58px; min-height:36px; padding:5px; text-align:center; }
.catalog-pagination small { display:block; margin-top:5px; }
.catalog-placeholder { padding:36px 0; text-align:center; }
.catalog-placeholder>span { font-size:54px; color:var(--gold); }
.catalog-placeholder p { max-width:300px; margin:auto; }
.item-directory { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:6px 20px; }
.item-directory>li>a { display:flex; align-items:center; gap:12px; padding:12px 0; color:var(--rarity); }
.item-directory>li>a>span:last-child { flex:1; min-width:0; }
.item-directory>li>a:hover { background:#91dbe90a; border-radius:6px; }
.item-directory small { display:block; color:var(--muted); margin-top:4px; font-size:11px; }
@media(max-width:1200px) {
  .catalog-layout { grid-template-columns:minmax(0,1fr); }
  .catalog-detail { position:static; max-height:none; scroll-margin-top:12px; }
}
@media(max-width:720px) {
  .catalog-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-search { align-items:stretch; flex-direction:column; }
  .catalog-filters { padding:16px; }
  .catalog-filters input, .catalog-filters select { font-size:16px; }
  .catalog-pagination .button { min-height:44px; }
  .catalog-results { padding:8px 12px; }
  .item-heading { gap:12px; }
  .item-heading h2 { font-size:21px; }
  .item-directory { grid-template-columns:minmax(0,1fr); }
}

.item-bonuses { margin:22px 0; border:1px solid var(--line); border-radius:7px; padding:14px; background:#10202b66; }
.item-bonuses>summary { cursor:pointer; color:var(--gold); line-height:1.6; }
.item-bonuses>summary .badge { margin-left:8px; }
.item-bonuses[open]>summary { margin-bottom:12px; }

.page-numbers { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; }
.item-heading+.item-section { border-top:0; margin-top:20px; padding-top:0; }
@media(max-width:720px) {
  .directory-pagination { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-numbers { grid-column:1/-1; grid-row:1; }
  .directory-pagination>.page-step { grid-row:2; }
  .directory-pagination>.page-step>span { display:inline; }
  .directory-pagination>small { grid-column:1/-1; grid-row:3; }
}

/* Shared recipe cards in the calculator and permanent recipe pages. */
.recipe-item-link { display:flex; align-items:center; gap:12px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:7px; background:#10202a80; }
.recipe-item-link:hover { border-color:var(--gold); background:#233640; }
.recipe-item-link .item-icon { width:48px; height:48px; flex-basis:48px; }
.recipe-item-link .item-art { transform:scale(.75); transform-origin:top left; }
.recipe-item-copy { flex:1; min-width:0; }
.recipe-item-copy :is(strong,h2) { display:block; margin:0; color:var(--rarity); font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.recipe-item-copy small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.recipe-quantity { flex-shrink:0; padding:5px 7px; border:1px solid #d8bd7644; border-radius:5px; color:var(--gold); background:#d8bd760d; font-variant-numeric:tabular-nums; font-size:13px; }
.recipe-heading { padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.recipe-heading>.recipe-item-link { padding:16px; background:#172c3699; }
.recipe-heading .recipe-item-copy h2 { font-size:22px; }
.mobile-detail-dialog h2 { background:none; padding-bottom:0; }
.recipe-heading>.recipe-item-link .item-icon { width:64px; height:64px; flex-basis:64px; }
.recipe-heading>.recipe-item-link .item-art { transform:none; }
.recipe-heading .toolbar { margin-top:14px; }
.recipe-result-row { display:grid; grid-template-columns:minmax(0,1fr) 110px; align-items:center; gap:7px 12px; padding:14px 0; border-bottom:1px solid var(--line); }
.recipe-result-row>div { display:contents; }
.recipe-result-row>.button { grid-area:1/2; }
.recipe-result-row.selected { box-shadow:inset 3px 0 var(--gold); padding-left:10px; }
.recipe-result-meta { grid-area:2/1; display:block; color:var(--muted); font-size:11px; line-height:1.6; margin:0 12px; }
.companion .recipe-result-row>.button,.companion .recipe-action-row>.button,.companion .recipe-directory-row>.button { min-height:44px; width:100%; }
.recipe-action-row { display:grid; grid-template-columns:minmax(0,1fr) min(110px,40%); }
.recipe-browser { max-height:80dvh; overflow:auto; }
.recipe-detail { min-width:0; scroll-margin-top:16px; }
.recipe-calculation { padding:16px; margin:20px 0; background:#0b162066; border:1px solid var(--line); border-radius:7px; }
.recipe-calculation input { max-width:220px; margin-top:8px; }
.recipe-calculation p { margin-bottom:0; }
.recipe-ingredient-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:12px; margin:16px 0 24px; }
.recipe-ingredient { min-width:0; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#0c172055; }
.recipe-ingredient .recipe-item-link { border:0; border-radius:0; }
.recipe-ingredient.is-owned { border-color:#83c9a766; }
.recipe-stock { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; padding:12px; border-top:1px solid var(--line); }
.recipe-stock dt { font-size:11px; color:var(--muted); }
.recipe-stock dd { margin:4px 0 0; font-size:15px; font-variant-numeric:tabular-nums; }
.recipe-stock>div:last-child dd { color:#f0bd9c; }
.is-owned .recipe-stock>div:last-child dd { color:#92d9b5; }
.recipe-requirement { padding:0 12px; font-size:11px; }
.recipe-directory { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px; padding:0; list-style:none; }
.recipe-directory-row { display:flex; flex-direction:column; min-width:0; padding:12px; border:1px solid var(--line); border-radius:7px; background:#101c2655; }
.recipe-directory-row>small { display:block; margin:10px 0; color:var(--muted); }
.recipe-directory-row>.button { margin-top:auto; }
.directory-filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:14px; align-items:end; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.directory-query { grid-column:1/-1; }
.directory-filters label { display:flex; flex-direction:column; gap:8px; min-width:0; font-size:12px; color:var(--muted); }
.directory-filters .simple-check { flex-direction:row; align-items:center; min-height:44px; }
.companion .directory-filters :is(input:not([type=checkbox]),select,button) { min-height:44px; }
@media(max-width:720px) {
  .recipe-result-row { grid-template-columns:minmax(0,1fr); }
  .recipe-result-row>.button { grid-area:3/1; justify-self:stretch; }
  .recipe-browser { max-height:none; overflow:visible; }
  .recipe-heading>.recipe-item-link { padding:12px; gap:10px; }
  .recipe-heading .recipe-item-copy h2 { font-size:19px; }
  .recipe-heading>.recipe-item-link .item-icon { width:48px; height:48px; flex-basis:48px; }
  .recipe-heading>.recipe-item-link .item-art { transform:scale(.75); }
}

.recipe-page .companion-main { max-width:1120px; margin:auto; }
.recipe-calculation label { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.recipe-calculation input { margin-top:0; }
.recipe-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px; }
.recipe-totals span { display:block; color:var(--muted); font-size:11px; line-height:1.5; }
.recipe-totals strong { display:block; margin-top:6px; color:var(--gold); font-size:20px; font-weight:500; font-variant-numeric:tabular-nums; }
.database-page .companion-main { max-width:1440px; margin:auto; }
.database-page:is(.item-page,.recipe-page) .companion-main { max-width:1120px; }
.database-page .companion-header>.toolbar { margin:0; }
.error-page .companion-main { display:grid; align-items:center; max-width:800px; min-height:100dvh; margin:auto; }
.error-page .eyebrow { color:var(--gold); font-size:28px; }
.entry-directory { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px; list-style:none; margin:22px 0; padding:0; }
.directory-card { min-width:0; border:1px solid var(--line); border-radius:8px; background:#0e1b2655; }
.directory-card>a { display:flex; align-items:center; gap:12px; height:100%; min-height:88px; padding:14px; border-radius:8px; }
.directory-card>a:hover { background:#91dbe90c; box-shadow:inset 0 0 0 1px #91dbe960; }
.directory-card img { width:100px; height:72px; object-fit:contain; flex:none; border-radius:5px; background:#08141b; }
.directory-symbol { display:grid; place-items:center; width:42px; height:42px; flex:none; color:var(--gold); font-size:28px; background:#d8bd7610; border-radius:8px; }
.directory-card-copy { min-width:0; flex:1; }
.directory-card-copy strong { display:block; color:#deebf2; font-weight:500; line-height:1.5; }
.directory-card-copy small { display:block; margin-top:6px; color:var(--muted); line-height:1.6; }
.directory-arrow { color:var(--gold); font-size:24px; }
.entry-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; margin:20px 0; }
.entry-sections>.panel { margin:0; min-width:0; }
.entry-sections h2 { padding-bottom:14px; border-bottom:1px solid var(--line); }
.location-list { list-style:none; padding:0; margin:0; }
.location-list>li+li { border-top:1px solid #ffffff12; }
.location-list a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:12px 0; color:var(--selected); line-height:1.5; }
.location-list a:hover { color:var(--gold); }
.location-list a>span:first-child { min-width:0; }
.location-list small { display:block; margin-top:4px; color:var(--muted); }
.location-list .badge { flex:none; }
.drop-item-link { display:flex; align-items:center; gap:12px; min-width:0; width:100%; line-height:1.5; color:var(--selected); }
.drop-item-link>span:last-child { flex:1; min-width:0; }
.drop-item-link small { display:block; margin-top:5px; color:var(--muted); }
.drop-item-link .item-icon { width:48px; height:48px; flex-basis:48px; }
.drop-item-link .item-art { transform:scale(.75); transform-origin:top left; }
.drop-item-link:hover { color:var(--gold); }
.region-overview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:24px; }
.region-preview { display:block; border:1px solid var(--line); border-radius:8px; background:#08141b; overflow:hidden; }
.region-preview:hover { border-color:var(--gold); }
.region-preview img { display:block; width:100%; height:auto; max-height:360px; object-fit:contain; }
.region-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:22px 0; }
.region-metrics>div { padding:12px; border:1px solid var(--line); border-radius:6px; }
.region-metrics dt { color:var(--muted); font-size:12px; line-height:1.5; }
.region-metrics dd { margin:6px 0 0; color:var(--gold); font-size:24px; font-variant-numeric:tabular-nums; }
@media(max-width:900px) { .entry-sections,.region-overview { grid-template-columns:minmax(0,1fr); } }
@media(max-width:720px) {
  .companion .button,.companion .button.small { min-height:44px; }
  .companion details>summary { min-height:44px; align-content:center; }
  .companion input:not([type=checkbox]),.companion select,.companion textarea { font-size:16px; }
}