/* Layout for the Prestige preview; colors and typography come from the GB Planner. */
:root {
  font-size:16px;
  --army-red:#b13b34;
  --army-blue:#245eae;
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}
:root[data-theme="dark"] { --army-red:#df8794; --army-blue:#8ebfe8; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-size:1rem; line-height:1.45; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button,summary { cursor:pointer; }
a { color:inherit; text-underline-offset:4px; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,.table-scroll:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
[hidden] { display:none!important; }
::selection { color:var(--ink); background:color-mix(in srgb,#99d0da 62%,transparent); }
h1,h2,h3,h4,p { margin-top:0; }
h2 { font-size:1.75rem; line-height:1.2; letter-spacing:-.035em; }
h3 { font-size:1.125rem; line-height:1.4; margin-bottom:10px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.skip-link { position:fixed; top:-80px; left:20px; background:var(--green-strong); color:var(--on-strong); padding:12px; z-index:30; }
.skip-link:focus { top:10px; }
.topbar,main,footer { width:min(1296px,calc(100% - 48px)); margin-inline:auto; }
.topbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding:12px 0; position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--paper) 96%,transparent); backdrop-filter:blur(12px); }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); font-size:1rem; font-weight:760; letter-spacing:-.02em; line-height:1.35; text-decoration:none; min-width:0; }
.brand-mark { width:40px; height:40px; display:block; flex-shrink:0; object-fit:contain; border-radius:14px; }
.brand>span { min-width:0; }
.brand small { display:block; font-size:.875rem; font-weight:400; letter-spacing:0; margin-top:5px; color:var(--muted); }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; min-width:0; }
.edition { font-size:.875rem; color:var(--muted); white-space:nowrap; }
.edition i { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 14%,transparent); margin-right:9px; }
.theme-toggle { min-width:76px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 12px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:999px; font-size:.875rem; font-weight:720; transition:color .15s,border-color .15s,background .15s; }
.theme-toggle:hover { color:var(--green); background:var(--green-soft); border-color:var(--green); }
.theme-toggle-icon { width:15px; color:var(--green); font-size:1rem; line-height:1; text-align:center; }
.explorer { padding:26px 0 24px; }
.page-intro { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; }
.page-intro h1 { font:400 34px/1.2 Georgia,"Times New Roman",serif; letter-spacing:-.04em; margin:0 0 8px; }
.page-intro p { font-size:1rem; line-height:1.5; color:var(--muted); margin:0; }
.eyebrow { color:var(--green); font-size:.875rem; font-weight:800; letter-spacing:.08em; margin:0 0 8px; text-transform:uppercase; }
.quick-guide { margin-bottom:20px; border:1px solid var(--line); background:color-mix(in srgb,var(--green-soft) 40%,var(--surface)); border-radius:14px; box-shadow:var(--shadow-soft); overflow:hidden; }
.quick-guide>summary { display:flex; align-items:center; gap:16px; padding:15px 20px; list-style:none; color:var(--green); font-weight:720; }
.quick-guide>summary::-webkit-details-marker { display:none; }
.quick-guide>summary::after { content:'+'; font-size:22px; font-weight:400; margin-left:auto; line-height:1; }
.quick-guide[open]>summary::after { content:'−'; }
.guide-heading { display:inline-flex; align-items:center; gap:10px; }
.guide-mark { width:20px; height:17px; display:inline-block; background:linear-gradient(var(--coral),var(--coral)) left 2px top 2px/12px 5px no-repeat,linear-gradient(var(--gold),var(--gold)) right bottom 2px/15px 5px no-repeat; }
.guide-summary-note { font-size:.875rem; font-weight:400; color:var(--muted); }
.guide-body { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:30px; padding:8px 22px 22px; }
.guide-body h3 { font-size:1rem; line-height:1.5; margin:0 0 18px; }
.boost-guide { border-left:1px solid var(--line); padding-left:28px; }
.level-timeline { margin:0 0 15px; --label-width:75px; }
.timeline-axis,.timeline-row { display:grid; grid-template-columns:var(--label-width) minmax(0,1fr); column-gap:12px; align-items:center; }
.timeline-axis { font-size:.875rem; color:var(--muted); margin-bottom:12px; }
.timeline-axis>div { position:relative; height:18px; }
.timeline-axis>div>span { position:absolute; left:var(--at); transform:translateX(-50%); }
.timeline-axis>div>span:first-child { transform:none; }
.timeline-axis>div>span:last-child { transform:translateX(-100%); }
.timeline-row { margin-bottom:9px; }
.timeline-name { font-size:.875rem; font-weight:700; }
.copper-name { color:var(--army-red); }
.gold-name { color:var(--gold); }
.timeline-track { position:relative; height:42px; border-radius:7px; background:linear-gradient(to right,transparent 20%,var(--green-soft) 20%,var(--green-soft) 40%,transparent 40%),repeating-linear-gradient(to right,var(--line) 0,var(--line) 1px,transparent 1px,transparent 20%); overflow:hidden; }
.growth { position:absolute; top:0; bottom:0; display:flex; align-items:center; justify-content:center; font-size:.875rem; font-weight:700; border-radius:7px; }
.copper-growth { left:0; width:40%; background:color-mix(in srgb,var(--coral) 22%,var(--surface)); color:var(--army-red); border:1px solid var(--coral); }
.gold-growth { left:20%; width:80%; background:var(--gold-soft); color:var(--gold); border:1px solid var(--gold); }
.retained-bonus { position:absolute; left:40%; right:0; top:0; bottom:0; border-block:1px dashed var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.875rem; }
.overlap-key { display:flex; align-items:center; gap:6px; font-size:.875rem; line-height:1.5; margin:0 0 10px; color:var(--green); }
.overlap-key>span:first-child { display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--green-soft); border:1px solid var(--green); flex-shrink:0; }
.guide-fine { font-size:.875rem; color:var(--muted); line-height:1.6; margin:0; }
.bonus-example>strong,.chance-example>strong { font-size:.875rem; }
.bonus-example p { font-size:.875rem; color:var(--muted); margin:5px 0 10px; }
.example-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.example-pair>span { font-size:.875rem; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:9px 12px; }
.example-pair b { display:block; font-size:1.125rem; font-weight:700; color:var(--ink); margin-top:4px; }
.chance-example { display:flex; gap:12px; align-items:baseline; font-size:.875rem; line-height:1.6; margin-bottom:12px; }
.chance-example strong { white-space:nowrap; }.chance-example>span { color:var(--muted); }
.filter-panel { position:relative; border:1px solid var(--line); background:color-mix(in srgb,var(--blue-soft) 55%,var(--surface)); border-radius:14px; box-shadow:var(--shadow-soft); padding:18px 20px; display:grid; grid-template-columns:1fr 1.2fr; gap:16px; }
.filter-panel::before { content:''; position:absolute; top:-1px; left:14px; right:14px; height:3px; background:var(--control-background); border-radius:3px; }
.search-field { display:flex; align-items:center; gap:10px; border:1px solid var(--input-border); border-radius:9px; padding:0 12px; background:var(--input-surface); box-shadow:var(--input-shadow); align-self:end; }
.search-field input { width:100%; min-width:0; border:0; background:transparent; padding:11px 0; font-size:1rem; color:var(--ink); }
.search-field input::placeholder { color:var(--muted); }
.search-field>span[aria-hidden] { font-size:24px; color:var(--green); }
.filter-selects { display:flex; gap:15px; }
.filter-selects label { display:flex; flex:1; flex-direction:column; gap:7px; font-size:.875rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--muted); min-width:0; }
select { color:var(--ink); font-size:1rem; font-weight:620; border:1px solid var(--input-border); background:var(--input-surface); border-radius:9px; padding:10px 24px 10px 10px; max-width:100%; box-shadow:var(--input-shadow); }
select option { color:var(--ink); background:var(--surface); }
.focus-filters { grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap; }
.focus-button { border:1px solid var(--line); border-radius:999px; padding:8px 13px; background:var(--surface); color:var(--muted); font-size:.875rem; font-weight:650; transition:background .15s,border-color .15s; }
.focus-button:hover { background:var(--green-soft); border-color:var(--green); color:var(--green); }
.focus-button[aria-pressed=true] { background:var(--green-strong); border-color:var(--green-strong); color:var(--on-strong); }
.results-line { display:flex; justify-content:space-between; align-items:center; padding:12px 0 0; gap:15px; font-size:.875rem; color:var(--muted); }
.results-line p { margin:0; }.results-line .text-button { white-space:nowrap; }
.text-button { border:0; background:none; color:var(--green); font-size:.875rem; text-decoration:underline; text-underline-offset:3px; padding:8px; }
.group-title { display:flex; align-items:baseline; gap:16px; border-bottom:1px solid var(--line); padding:18px 0 12px; margin-bottom:16px; }
.group-title h3 { font-size:1.5rem; font-weight:650; letter-spacing:-.035em; margin:0; }
.group-title>span { font-size:.875rem; color:var(--muted); }
.card-grid { display:grid; grid-template-columns:1fr; gap:20px; align-items:start; }
.building-card { display:grid; grid-template-columns:minmax(270px,.85fr) minmax(0,2fr); grid-template-rows:auto 1fr auto; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-soft); overflow:hidden; }
.building-card.is-selected { border-color:var(--green); box-shadow:0 0 0 1px var(--green); }
.card-top { grid-column:1; grid-row:1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:22px 22px 0; }
.tier-label { font-size:.875rem; font-weight:800; letter-spacing:.055em; display:inline-block; color:var(--gold); margin-bottom:8px; }
.tier-label.copper-label { color:var(--green); }
.card-top h3 { font-size:1.75rem; font-weight:650; line-height:1.18; letter-spacing:-.035em; margin:0 0 8px; }
.compare-label { display:flex; gap:6px; align-items:center; align-self:start; font-size:.875rem; color:var(--muted); white-space:nowrap; cursor:pointer; margin:0 0 12px; }
.compare-label input { accent-color:var(--green); width:16px; height:16px; margin:0; }
.card-meta { font-size:.875rem; color:var(--muted); margin:0 0 15px; }
.card-summary { grid-column:1; grid-row:2; padding:0 22px 18px; }
.badge { font-size:.875rem; border:1px solid var(--line); padding:5px 9px; border-radius:999px; font-weight:720; white-space:nowrap; }
.badge.strong { background:var(--green-soft); color:var(--green); border-color:color-mix(in srgb,var(--green) 25%,var(--line)); }
.badge.situational { color:var(--gold); background:var(--gold-soft); border-color:var(--warning-line); }
.badge.lower { color:var(--muted); background:var(--subtle); }
.recommend-line { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; }
.checkpoint { font-size:.875rem; color:var(--muted); white-space:nowrap; }
.checkpoint b { font-size:1.1875rem; color:var(--ink); margin-left:4px; font-weight:700; }
.audience { font-size:1rem; line-height:1.6; margin:0 0 12px; color:var(--muted); }
.key-boosts { display:flex; gap:12px; border-top:1px solid var(--line); padding:12px 0 0; flex-wrap:wrap; }
.boost-chip { display:inline-flex; align-items:center; gap:7px; font-size:.875rem; max-width:100%; line-height:1.5; }
.boost-chip img { width:29px; height:29px; object-fit:contain; flex-shrink:0; }
.boost-chip>span { max-width:290px; }
.warning-chip { font-size:.875rem; color:var(--warning-ink); margin:12px 0 0; }
.card-values { grid-column:2; grid-row:1 / 3; border-left:1px solid var(--line); padding:22px; min-width:0; background:color-mix(in srgb,var(--subtle) 55%,var(--surface)); }
.table-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.875rem; font-weight:700; margin-bottom:12px; }
.table-unit-key { font-weight:400; color:var(--muted); }
.table-scroll { overflow:auto; max-width:100%; border:1px solid var(--line); border-radius:9px; background:var(--surface); overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--input-border) var(--subtle); }
table { width:100%; table-layout:fixed; min-width:790px; border-collapse:collapse; font-size:1rem; font-variant-numeric:tabular-nums; }
table.copper-levels { min-width:500px; }
th,td { text-align:right; padding:13px 10px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); white-space:nowrap; }
thead th { font-size:.875rem; background:var(--table-header); color:var(--muted); font-weight:800; height:59px; }
thead th:first-child,tbody th { text-align:left; position:sticky; left:0; z-index:1; background:var(--surface); white-space:normal; width:210px; }
thead th:first-child { z-index:2; background:var(--table-header); }
tbody th { font-weight:400; }
tbody tr:last-child>* { border-bottom:0; }th:last-child,td:last-child { border-right:0; }
.row-label { display:flex; align-items:center; gap:8px; }
.row-label img { width:31px; height:31px; object-fit:contain; flex-shrink:0; }
.row-label>span { min-width:0; }
.row-label strong { display:block; font-size:.875rem; line-height:1.5; }
.row-label small { display:block; font-size:.875rem; line-height:1.5; color:var(--muted); margin-top:4px; }
.row-label .gold-text { color:var(--gold); }
.charge { display:block; font-size:.875rem; color:var(--muted); margin-top:4px; }
.review-column { background:var(--green-soft); font-weight:700; }
thead .review-column { background:color-mix(in srgb,var(--green) 22%,var(--surface)); color:var(--green); }
.review-marker { display:block; font-size:.875rem; font-weight:400; margin-top:4px; }
.review-column .charge { color:var(--green); }
.table-scroll-hint { font-size:.875rem; line-height:1.5; color:var(--muted); margin:9px 0 0; }
.table-note { font-size:.875rem; color:var(--muted); line-height:1.6; margin:18px 0 10px; }
.card-details { grid-column:1 / -1; }
.card-details>summary { display:flex; align-items:center; justify-content:space-between; padding:12px 22px; background:var(--subtle); font-size:.875rem; font-weight:720; list-style:none; border-top:1px solid var(--line); }
.card-details>summary:hover { background:var(--green-soft); }
.card-details>summary::-webkit-details-marker { display:none; }
.card-details>summary::after { content:'+'; font-size:20px; font-weight:400; }
.card-details[open]>summary::after { content:'−'; }
.details-body { padding:22px; max-width:980px; }
.advice { border-left:3px solid var(--green); padding:0 0 0 13px; font-size:1rem; line-height:1.75; color:var(--muted); }
.advice strong { display:block; font-size:.875rem; letter-spacing:.04em; color:var(--green); margin-bottom:5px; text-transform:uppercase; }
.note-warning { padding:12px; background:var(--gold-soft); border-left:3px solid var(--gold); font-size:1rem; line-height:1.7; color:var(--warning-ink); margin:15px 0; border-radius:0 8px 8px 0; }
.step-compare { margin-top:22px; border-top:1px solid var(--line); padding-top:18px; }
.step-compare h4 { font-size:1rem; margin:0 0 12px; }
.step-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; font-size:.875rem; }
.step-controls select { padding:7px; font-size:.875rem; }
.delta-list { display:grid; gap:9px; }
.delta-row { font-size:.875rem; display:flex; justify-content:space-between; gap:14px; line-height:1.5; }
.delta-row>span:first-child { color:var(--muted); }.delta-row strong { text-align:right; font-weight:650; }
.delta-list>p { font-size:.875rem; color:var(--muted); }
.source-details { margin-top:18px; font-size:1rem; line-height:1.65; }
.source-details summary { color:var(--green); padding:7px 0; }
.source-details a { font-size:.875rem; }
.boost-explanation { border-top:1px solid var(--line); padding:12px 0; }
.boost-explanation p { margin:5px 0; color:var(--muted); }
.boost-explanation code { display:block; overflow-wrap:anywhere; font-size:.875rem; color:var(--muted); }
.empty { text-align:center; padding:45px; border:1px dashed var(--line); border-radius:14px; }
.primary,.secondary { border-radius:9px; padding:11px 16px; font-size:1rem; font-weight:700; border:1px solid var(--green-strong); background:var(--green-strong); color:var(--on-strong); }
.secondary { background:var(--surface); color:var(--green); }
footer { display:flex; justify-content:flex-end; gap:20px; margin-top:24px; padding:18px 0 24px; color:var(--muted); border-top:1px solid var(--line); font-size:.875rem; text-align:right; }
.compare-tray { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:12; background:var(--surface); padding:10px 14px 10px 20px; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:14px; display:flex; align-items:center; gap:20px; white-space:nowrap; font-size:1rem; }
.compare-tray button:disabled { opacity:.5; cursor:default; }
dialog { width:min(1280px,96vw); max-height:90vh; padding:30px; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(11,25,34,.65); backdrop-filter:blur(3px); }
.dialog-head { display:flex; justify-content:space-between; gap:20px; }
.dialog-head h2 { font-size:1.75rem; margin-bottom:14px; }
.icon-button { border:1px solid var(--line); background:var(--surface); font-size:28px; width:38px; height:38px; color:var(--ink); border-radius:9px; line-height:1; }
.dialog-note { font-size:1rem; color:var(--muted); line-height:1.65; }
.comparison-grid { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:18px; }
.comparison-card { padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.comparison-card h3 { font-size:1.5rem; font-weight:650; letter-spacing:-.025em; }
.comparison-card .pick-level { display:flex; align-items:center; gap:10px; font-size:1rem; margin:15px 0; }
.compare-boost { padding:12px 0; border-top:1px solid var(--line); }.compare-boost .row-label { align-items:start; }
.compare-value { font-size:1.5rem; font-weight:700; margin:10px 0 0; font-variant-numeric:tabular-nums; }
.compare-value small { font-size:1rem; color:var(--muted); }
.compare-boost p { font-size:.875rem; line-height:1.6; color:var(--muted); margin:8px 0 0; }
.compare-target,.footnote { font-size:.875rem; color:var(--muted); line-height:1.7; }
.army-attacking { color:var(--army-red); font-weight:650; }.army-defending { color:var(--army-blue); font-weight:650; }
@media(min-width:1350px) { .table-scroll-hint { display:none; } }
@media(max-width:1100px) {
  .edition { display:none; }
  .filter-panel { grid-template-columns:1fr; }
  .building-card { display:block; }
  .card-top { flex-wrap:nowrap; }.card-top .compare-label { margin-top:3px; }
  .card-values { border-left:0; border-top:1px solid var(--line); padding:20px; }
  .key-boosts { gap:16px; }
  .guide-body { gap:22px; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
  .boost-guide { padding-left:22px; }.guide-summary-note { display:none; }
  .chance-example { display:block; }.chance-example>span { display:block; margin-top:4px; }
}
@media(max-width:750px) {
  :root { scroll-padding-top:105px; }
  .topbar,main,footer { width:calc(100% - 32px); }
  .topbar { gap:10px; }.brand { font-size:.875rem; }
  .brand-mark { width:34px; height:34px; border-radius:12px; }
  .theme-toggle { width:40px; min-width:40px; padding:8px; }#theme-toggle-label { display:none; }
  .header-actions { gap:8px; }
  .explorer { padding-top:20px; }
  .page-intro { align-items:start; flex-direction:column; gap:8px; margin-bottom:16px; }
  .page-intro h1 { font-size:30px; }
  .quick-guide>summary { padding:14px 16px; }
  .guide-body { display:block; padding:3px 16px 18px; }.guide-body h3 { margin-bottom:16px; }
  .boost-guide { border-left:0; border-top:1px solid var(--line); padding:18px 0 0; margin-top:18px; }
  .level-timeline { --label-width:54px; }.timeline-axis,.timeline-row { column-gap:8px; }
  .timeline-axis>div>span:nth-child(4),.timeline-axis>div>span:nth-child(5) { display:none; }
  .chance-example { display:flex; }.chance-example>span { margin-top:0; }
  .filter-panel { padding:16px 14px; }
  .filter-selects { flex-wrap:wrap; gap:12px; }.filter-selects label { flex:1 1 42%; }.filter-selects label:last-child { flex-basis:100%; }
  .focus-filters { gap:6px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .focus-button { flex-shrink:0; padding:7px 11px; }
  .group-title { align-items:start; flex-direction:column; gap:5px; padding-top:16px; }.group-title h3 { font-size:1.375rem; }
  .card-top,.card-summary { padding-left:18px; padding-right:18px; }
  .card-top { flex-wrap:wrap; }.card-top h3 { font-size:1.6875rem; }
  .card-values { padding:17px 12px; }
  .table-heading { align-items:start; flex-direction:column; gap:5px; padding:0 5px; }
  table { min-width:745px; }table.copper-levels { min-width:480px; }
  thead th:first-child,tbody th { width:185px; }th,td { padding:11px 8px; }
  .row-label { gap:7px; align-items:start; }.row-label img { width:27px; height:27px; }
  .card-details>summary { padding:12px 18px; }
  .results-line { align-items:start; }.results-line .text-button { padding-top:0; }
  .delta-row { flex-wrap:wrap; gap:3px; }.delta-row strong { text-align:left; }
  .compare-tray { bottom:12px; gap:12px; padding:8px 10px 8px 14px; font-size:.875rem; width:calc(100% - 24px); justify-content:space-between; flex-wrap:wrap; white-space:normal; }
  .compare-tray #compare-count { flex-basis:100%; }.compare-tray .primary { font-size:.875rem; padding:10px; }
  dialog { padding:20px; width:96vw; }.comparison-grid { grid-template-columns:1fr; }.comparison-card { padding:16px; }
  footer { padding-bottom:30px; }
}
@media(prefers-reduced-motion:reduce) { :root { scroll-behavior:auto; }* { transition:none!important; } }
@media print {
  .topbar,.filter-panel,.compare-tray,footer,.compare-label { display:none; }
  main { width:100%; }.card-grid { display:block; }.building-card { display:block; break-inside:avoid; margin:16px 0; }
  .card-values { border-left:0; }.table-scroll { overflow:visible; }table { min-width:0; }
}