* { box-sizing: border-box; }

:root {
  --ink-950: #182127;
  --ink-840: #26343a;
  --ink-700: #425159;
  --mist-050: #f3f6f2;
  --mist-120: #e8eeeb;
  --mist-180: #d7e0dd;
  --white: #fff;
  --route-teal: #13818a;
  --work-gold: #d6a72e;
  --safe-jade: #27845e;
  --danger-coral: #c94e52;
  --uncertain-cobalt: #3969a8;
  --neutral-silver: #88969b;
  --focus-white: #fff;
  --line: rgba(24, 33, 39, 0.17);
  --line-strong: rgba(24, 33, 39, 0.36);
  --shadow: 0 14px 34px rgba(24, 33, 39, 0.14);
  --sidebar: 264px;
  --topbar: 58px;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

html { min-width: 320px; background: var(--mist-050); }
body { margin: 0; color: var(--ink-950); background: var(--mist-050); letter-spacing: 0; }
body[data-text-scale="115"] { font-size: 115%; }
body[data-text-scale="130"] { font-size: 130%; }
button, input { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--uncertain-cobalt); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.skip-link { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 14px; color: var(--white); background: var(--ink-950); }
.skip-link:focus { top: 12px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; z-index: 40; height: 100vh; display: flex; flex-direction: column; color: var(--mist-050); background: var(--ink-950); border-right: 1px solid #33444a; }
.brand-block { min-height: 84px; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.13); }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; color: var(--ink-950); font-size: 14px; font-weight: 900; background: var(--work-gold); border: 2px solid #f0d980; border-radius: 4px; }
.brand-block strong, .brand-block span { display: block; }
.brand-block strong { font-size: 14px; }
.brand-block div > span { margin-top: 4px; color: #aebdc1; font-size: 11px; }
.primary-nav { display: grid; gap: 2px; padding: 16px 10px; }
.nav-item { min-height: 52px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; color: #b9c6c9; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 4px; }
.nav-item:hover { color: var(--white); background: rgba(255,255,255,.06); }
.nav-item.is-active { color: var(--white); background: #304047; border-color: #52676e; box-shadow: inset 4px 0 var(--work-gold); }
.nav-item > span { color: var(--work-gold); font-size: 11px; font-weight: 900; }
.nav-item b { font-size: 13px; }
.nav-item em { min-width: 28px; padding: 3px 5px; color: #c8d3d5; font-size: 10px; font-style: normal; text-align: center; border: 1px solid #52646a; border-radius: 3px; }
.sidebar-footer { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-top: 1px solid rgba(255,255,255,.13); }
.sidebar-footer strong, .sidebar-footer span { display: block; }
.sidebar-footer strong { font-size: 10px; }
.sidebar-footer div span { margin-top: 3px; color: #9dafb4; font-size: 10px; }
.status-dot { width: 9px; height: 9px; background: var(--work-gold); border-radius: 50%; box-shadow: 0 0 0 4px rgba(214,167,46,.15); }

.page-shell { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 30; min-height: var(--topbar); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 22px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.breadcrumbs { min-width: 0; display: flex; align-items: center; gap: 9px; font-size: 12px; }
.breadcrumbs span { color: var(--ink-700); white-space: nowrap; }
.breadcrumbs b { color: var(--neutral-silver); }
.breadcrumbs strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-button { width: 40px; height: 40px; display: inline-grid; place-items: center; color: var(--ink-950); font-size: 19px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 4px; }
.icon-button:hover { background: var(--mist-120); }
.locale-control { display: flex; padding: 2px; background: var(--mist-120); border: 1px solid var(--line); border-radius: 4px; }
.locale-control button { min-height: 32px; padding: 4px 9px; color: var(--ink-700); background: transparent; border: 0; border-radius: 2px; }
.locale-control button.is-active { color: var(--white); background: var(--ink-840); }
.evidence-badge { padding: 6px 9px; color: #7d5410; font-size: 10px; font-weight: 800; background: #fff4ce; border: 1px solid #e4c969; border-radius: 3px; }
.mobile-only { display: none; }

main { min-width: 0; padding: 24px; }
.view { width: min(100%, 1500px); margin: 0 auto; }
.view-heading { min-height: 78px; display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.view-heading h1 { margin: 4px 0 5px; font-size: 28px; line-height: 1.18; }
.view-heading p { max-width: 760px; margin: 0; color: var(--ink-700); font-size: 13px; line-height: 1.5; }
.eyebrow, .stage-kicker { display: block; color: var(--route-teal); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.heading-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.heading-badges span { padding: 6px 8px; color: var(--ink-700); font-size: 10px; font-weight: 800; background: var(--white); border: 1px solid var(--line); border-radius: 3px; }
.loading-state, .empty-state { padding: 48px; text-align: center; background: var(--white); border: 1px solid var(--line); }

.stage-wrap { width: min(100%, 1240px); margin: 0 auto; background: #0c1519; box-shadow: var(--shadow); }
.game-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; color: var(--mist-050); background: #23353b; container-name: stage; container-type: inline-size; isolation: isolate; }
.stage-art { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.stage-wash { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(9,20,24,.84) 0%, rgba(18,34,38,.42) 46%, rgba(8,16,20,.76) 100%); }
.stage-body { position: absolute; inset: 48px 0 0; }
.game-hud { position: absolute; z-index: 7; inset: 0 0 auto; height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; background: rgba(18,33,38,.92); border-bottom: 1px solid rgba(255,255,255,.22); }
.hud-left, .hud-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hud-left strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.stage-icon { width: 30px; height: 30px; display: inline-grid; flex: 0 0 auto; place-items: center; color: inherit; font-size: 13px; font-weight: 900; background: rgba(243,246,242,.11); border: 1px solid rgba(255,255,255,.34); border-radius: 3px; }
.stage-icon:hover { background: rgba(243,246,242,.2); }
.screen-stamp { padding: 4px 6px; color: #1c2c32; font-size: 9px; font-weight: 900; background: var(--work-gold); border-radius: 2px; }
.resource, .save-state { font-size: 9px; white-space: nowrap; }
.resource { padding: 4px 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 2px; }
.save-state { color: #a9e0c3; }
.concept-label { position: absolute; z-index: 8; left: 8px; bottom: 7px; padding: 3px 5px; color: #2c363a; font-size: 8px; font-weight: 800; background: rgba(255,255,255,.88); border-left: 3px solid var(--work-gold); }
.action-dock { position: absolute; z-index: 6; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 7px; }
.stage-primary, .stage-secondary { min-height: 34px; padding: 7px 12px; font-size: 10px; font-weight: 900; border-radius: 3px; }
.stage-primary { color: var(--ink-950); background: var(--work-gold); border: 1px solid #f1d067; box-shadow: inset 0 -3px rgba(117,76,0,.28); }
.stage-secondary { color: var(--mist-050); background: rgba(24,33,39,.88); border: 1px solid rgba(255,255,255,.36); }
.sheet-row { min-height: 30px; display: flex; align-items: center; padding: 6px 8px; color: var(--ink-950); font-size: 10px; background: var(--mist-050); border-bottom: 1px solid var(--line); }

/* Opening company */
.opening-composition, .creation-review, .contract-composition { height: 100%; padding: 2.2% 3.5% 5%; }
.opening-title { max-width: 54%; }
.opening-title h2, .contract-sheet h3, .creation-review h2 { margin: 3px 0; font-size: 20px; line-height: 1.15; }
.opening-title p { margin: 0; color: #d3e0e1; font-size: 10px; }
.offer-grid { height: 58%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.recruit-offer { min-width: 0; display: grid; grid-template-rows: minmax(0, .9fr) auto auto; color: var(--ink-950); background: rgba(243,246,242,.94); border: 2px solid transparent; border-radius: 5px; overflow: hidden; }
.recruit-offer.is-selected { border-color: var(--work-gold); box-shadow: inset 0 0 0 2px var(--ink-950); }
.offer-figure { min-height: 0; display: grid; place-items: center; position: relative; background: linear-gradient(150deg, #cfe5df, #7eb5b2); }
.offer-figure > span { width: 48px; height: 60px; display: grid; place-items: center; color: var(--white); font-size: 14px; font-weight: 900; background: var(--ink-840); border: 4px solid #60757a; border-radius: 45% 45% 18% 18%; }
.offer-figure small { position: absolute; left: 6px; bottom: 4px; font-size: 8px; font-weight: 900; }
.offer-copy { min-width: 0; padding: 5px 7px; }
.offer-copy strong { display: block; overflow-wrap: anywhere; font-size: 11px; }
.profession-seal { display: inline-block; margin-top: 2px; padding: 2px 4px; color: var(--white); font-size: 8px; font-weight: 800; background: var(--route-teal); border-radius: 2px; }
.offer-copy p { margin: 3px 0 0; color: var(--ink-700); font-size: 8px; line-height: 1.25; }
.offer-actions { min-height: 29px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 3px; padding: 4px 5px; border-top: 1px solid var(--line); }
.offer-actions > span { font-size: 7px; font-weight: 800; }
.offer-actions > button:not(.stage-icon) { min-height: 23px; padding: 3px 5px; color: var(--ink-950); font-size: 8px; font-weight: 900; background: var(--white); border: 1px solid var(--line-strong); border-radius: 2px; }
.offer-actions .stage-icon { width: 23px; height: 23px; color: var(--ink-950); background: var(--mist-120); border-color: var(--line); }
.opening-footer { min-height: 41px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 8px; }
.selection-count { margin-right: auto; display: flex; align-items: center; gap: 8px; }
.selection-count span { font-size: 9px; font-weight: 800; }
.selection-count strong { min-width: 46px; padding: 6px 8px; color: var(--ink-950); font-size: 14px; text-align: center; background: var(--work-gold); border-radius: 3px; }
.contract-composition { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 5%; }
.region-signal { align-self: end; padding-bottom: 10%; }
.region-signal span { display: inline-block; padding: 4px 6px; color: var(--ink-950); font-size: 9px; font-weight: 900; background: var(--work-gold); }
.region-signal h2 { margin: 5px 0; font-size: 27px; }
.region-signal p { max-width: 390px; margin: 0; font-size: 11px; }
.contract-sheet, .creation-review, .battle-sheet, .outcome-sheet { color: var(--ink-950); background: rgba(243,246,242,.96); border-left: 5px solid var(--route-teal); box-shadow: var(--shadow); }
.contract-sheet { padding: 16px; }
.contract-sheet dl { margin: 9px 0; }
.contract-sheet dl > div { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; padding: 5px 0; font-size: 9px; border-bottom: 1px solid var(--line); }
.contract-sheet dt { color: var(--ink-700); }
.contract-sheet dd { margin: 0; font-weight: 800; }
.creation-review { width: 76%; min-height: 76%; margin: 0 auto; padding: 14px 18px; }
.chosen-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0; }
.recruit-marker { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 6px; color: var(--ink-950); background: var(--mist-120); border: 1px solid var(--line); border-radius: 4px; }
.recruit-marker.is-selected { border-color: var(--work-gold); }
.recruit-silhouette, .large-figure { width: 38px; height: 45px; display: grid; flex: 0 0 auto; place-items: center; color: var(--white); font-size: 10px; font-weight: 900; background: var(--ink-840); border: 3px solid var(--route-teal); border-radius: 45% 45% 18% 18%; }
.recruit-marker small, .recruit-marker strong, .recruit-marker em { display: block; }
.recruit-marker small { font-size: 7px; }
.recruit-marker strong { font-size: 10px; }
.recruit-marker em { color: var(--ink-700); font-size: 8px; font-style: normal; }
.unchosen-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.unchosen-strip span { display: grid; grid-template-columns: auto 1fr auto; gap: 4px; padding: 4px 6px; color: var(--ink-700); font-size: 8px; border: 1px dashed var(--neutral-silver); }
.unchosen-strip em { font-style: normal; font-weight: 900; }
.creation-ledger, .operation-state, .receipt-state { margin-top: 8px; padding: 7px 9px; background: var(--white); border: 1px solid var(--line); }
.creation-ledger { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 8px; }
.operation-state, .receipt-state { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; }
.operation-state strong, .receipt-state strong { font-size: 11px; }
.operation-state small, .receipt-state small { grid-column: 2; font-size: 8px; }
.operation-spinner { width: 18px; height: 18px; grid-row: 1 / 3; border: 3px solid var(--mist-180); border-top-color: var(--route-teal); border-radius: 50%; animation: spin .9s linear infinite; }
.receipt-state b { grid-row: 1 / 3; padding: 8px; color: var(--white); font-size: 9px; background: var(--safe-jade); }
.receipt-state strong i { color: var(--neutral-silver); font-style: normal; }
.review-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 8px; }

/* Market and roster */
.market-composition, .market-review, .item-review, .roster-composition, .dismissal-review { height: 100%; position: relative; padding: 2.4% 3.2% 5.2%; }
.market-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.market-heading h2 { margin: 3px 0 0; font-size: 19px; }
.company-meter { display: flex; align-items: baseline; gap: 5px; padding: 6px 9px; background: rgba(24,33,39,.88); border: 1px solid rgba(255,255,255,.3); }
.company-meter span { font-size: 8px; }
.company-meter strong { color: var(--work-gold); font-size: 16px; }
.company-meter i { color: var(--neutral-silver); }
.market-tabs { height: 29px; display: flex; gap: 1px; margin-top: 8px; }
.market-tabs button { padding: 5px 11px; color: #dce6e5; font-size: 8px; font-weight: 800; background: rgba(24,33,39,.84); border: 0; border-bottom: 3px solid transparent; }
.market-tabs button.is-active { color: var(--white); border-bottom-color: var(--work-gold); }
.market-surface { height: 61%; display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; }
.market-list { min-height: 0; display: grid; gap: 3px; padding: 7px; background: rgba(232,238,235,.94); }
.market-row { min-height: 0; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 7px; padding: 5px 7px; color: var(--ink-950); text-align: left; background: var(--white); border: 1px solid var(--line); border-left: 4px solid transparent; }
.market-row.is-focused { border-left-color: var(--work-gold); box-shadow: inset 0 0 0 1px var(--ink-950); }
.row-avatar { width: 31px; height: 35px; display: grid; place-items: center; color: var(--white); font-size: 9px; font-weight: 900; background: var(--ink-840); border-radius: 40% 40% 15% 15%; }
.market-row small, .market-row strong, .market-row em { display: block; }
.market-row small { color: var(--route-teal); font-size: 7px; }
.market-row strong { font-size: 9px; }
.market-row em { color: var(--ink-700); font-size: 7px; font-style: normal; }
.market-row > b { font-size: 13px; }
.market-inspect { padding: 10px; color: var(--ink-950); background: rgba(255,255,255,.95); border-top: 4px solid var(--work-gold); }
.market-inspect h3 { margin: 3px 0; font-size: 15px; }
.market-inspect p { margin: 4px 0; font-size: 8px; line-height: 1.35; }
.fit-read { display: flex; justify-content: space-between; padding: 4px 0; font-size: 8px; border-bottom: 1px solid var(--line); }
.market-inspect .stage-primary { width: 100%; margin-top: 8px; }
.market-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 5px; font-size: 8px; }
.market-footer span { margin-right: auto; }
.reference-informed-market { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 5px; }
.reference-informed-market .market-heading { align-items: center; }
.market-board { min-height: 0; display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr) 62px; gap: 4px; }
.market-company-bench, .market-inventory { min-width: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 5px; padding: 5px; color: var(--ink-950); background: rgba(243,246,242,.96); border: 1px solid var(--line); }
.market-company-bench { grid-column: 2; grid-row: 1; }
.market-company-bench header, .market-inventory header { display: grid; align-content: center; gap: 2px; }
.market-company-bench header strong, .market-inventory header strong { font-size: 8px; }
.market-company-bench header span, .market-inventory header span { color: var(--ink-700); font-size: 6px; }
.market-company-bench > div { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.bench-recruit { min-width: 0; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: 1fr 1fr; gap: 0 5px; align-items: center; padding: 3px 5px; color: var(--ink-950); text-align: left; background: var(--white); border: 1px solid var(--line); border-bottom: 3px solid var(--route-teal); }
.bench-recruit > span { grid-row: 1 / 3; width: 25px; height: 29px; display: grid; place-items: center; color: var(--white); font-size: 7px; background: var(--ink-840); }
.bench-recruit strong, .bench-recruit small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bench-recruit strong { font-size: 7px; }
.bench-recruit small { color: var(--ink-700); font-size: 5px; }
.bench-recruit.is-empty { border-style: dashed; border-bottom-color: var(--neutral-silver); }
.bench-recruit.is-empty > span { color: var(--ink-700); background: var(--mist-180); }
.market-tool-rail { grid-column: 1; grid-row: 1 / 4; display: grid; grid-template-rows: repeat(4, 1fr); gap: 3px; }
.market-tool-rail button { min-height: 0; padding: 3px; color: var(--mist-050); font-size: 6px; font-weight: 900; background: rgba(24,33,39,.9); border: 1px solid rgba(255,255,255,.24); border-left: 3px solid transparent; }
.market-tool-rail button.is-active { color: var(--ink-950); background: var(--work-gold); border-left-color: var(--white); }
.market-offer-cards { min-height: 0; grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.market-offer-card { min-width: 0; display: grid; grid-template-columns: minmax(82px, .58fr) 1fr auto; gap: 8px; align-items: stretch; padding: 7px; color: var(--ink-950); text-align: left; background: rgba(255,255,255,.96); border: 2px solid var(--line); border-bottom: 5px solid var(--neutral-silver); }
.market-offer-card.is-focused { border-color: var(--work-gold); border-bottom-color: var(--work-gold); }
.market-offer-card .row-avatar { width: 100%; height: 100%; min-height: 86px; color: transparent; font-size: 17px; background-color: var(--ink-840); background-repeat: no-repeat; background-size: 300% auto; border: 3px solid var(--mist-180); border-radius: 4px; }
.market-offer-card > div, .market-offer-card > b { align-self: center; }
.market-offer-card small, .market-offer-card strong, .market-offer-card em { display: block; }
.market-offer-card div > small { color: var(--route-teal); font-size: 6px; }
.market-offer-card strong { font-size: 9px; }
.market-offer-card em { color: var(--ink-700); font-size: 6px; font-style: normal; }
.market-offer-card p { margin: 3px 0 0; font-size: 6px; line-height: 1.25; }
.market-offer-card > b { color: var(--route-teal); font-size: 12px; text-align: right; }
.market-offer-card > b small { color: var(--ink-700); font-size: 5px; }
.market-inventory { grid-column: 2; grid-row: 3; }
.market-inventory > div { min-width: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.inventory-slot { min-width: 0; display: grid; place-items: center; align-content: center; padding: 1px; color: var(--ink-700); background: var(--mist-120); border: 1px solid var(--line); }
.inventory-slot.is-filled { color: var(--ink-950); background: var(--white); border-bottom: 3px solid var(--route-teal); }
.inventory-slot span { font-size: 12px; }
.inventory-slot small { overflow: hidden; width: 100%; font-size: 4px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.reference-informed-market .market-footer { min-width: 0; margin: 0; }
.reference-informed-market .market-footer .stage-primary, .reference-informed-market .market-footer .stage-secondary { min-height: 25px; padding: 3px 6px; font-size: 6px; }
.market-review { display: grid; grid-template-columns: .72fr 1.3fr .8fr; gap: 10px; align-items: stretch; }
.review-figure, .review-facts, .party-impact { min-width: 0; padding: 11px; color: var(--ink-950); background: rgba(243,246,242,.95); }
.review-figure { display: grid; place-items: center; position: relative; }
.review-figure .recruit-marker { width: 100%; }
.trait-glyph { position: absolute; right: 12px; top: 12px; color: var(--route-teal); font-size: 22px; }
.review-facts h2 { margin: 3px 0; font-size: 21px; }
.review-facts h3 { margin: 0 0 7px; color: var(--route-teal); font-size: 11px; }
.review-facts p { font-size: 9px; line-height: 1.4; }
.stat-radar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.stat-radar span { padding: 5px; font-size: 7px; background: var(--mist-120); }
.stat-radar b { display: block; margin-top: 2px; font-size: 12px; }
.party-impact { border-left: 4px solid var(--work-gold); }
.party-impact > span, .party-impact > strong, .party-impact > small { display: block; }
.party-impact > span { font-size: 8px; font-weight: 900; }
.party-impact > strong { margin: 7px 0; color: var(--safe-jade); font-size: 16px; }
.party-impact p, .party-impact small { font-size: 8px; line-height: 1.35; }
.item-review { display: grid; grid-template-columns: .55fr 1.2fr .8fr; gap: 10px; color: var(--ink-950); }
.item-review > div, .item-review > aside { padding: 14px; background: rgba(243,246,242,.96); }
.item-object { display: grid; place-items: center; color: var(--route-teal); font-size: 64px; }
.item-object small { display: block; color: var(--ink-700); font-size: 9px; }
.item-review h2 { margin: 4px 0; font-size: 19px; }
.item-review p, .item-review aside { font-size: 9px; line-height: 1.4; }
.item-review aside b, .item-review aside span { display: block; margin-bottom: 5px; }
.delta-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px; font-size: 8px; background: #e4f2ec; border-left: 3px solid var(--safe-jade); }
.delta-row + .delta-row { margin-top: 4px; }
.delta-row.danger { background: #f7e7e5; border-left-color: var(--danger-coral); }
.roster-composition { display: grid; grid-template-columns: 1.15fr .85fr; gap: 9px; }
.roster-list, .recruit-detail { color: var(--ink-950); background: rgba(243,246,242,.95); }
.roster-list { padding: 8px; }
.roster-row { width: 100%; min-height: 44px; display: grid; grid-template-columns: 1fr auto; align-items: center; color: var(--ink-950); background: var(--white); border: 1px solid var(--line); }
.roster-row + .roster-row { margin-top: 3px; }
.roster-row.is-focused { box-shadow: inset 4px 0 var(--work-gold); }
.roster-row .recruit-marker { border: 0; background: transparent; }
.roster-row > span { padding-right: 8px; font-size: 8px; }
.recruit-detail { padding: 13px; border-left: 5px solid var(--route-teal); }
.recruit-detail .large-figure { width: 58px; height: 72px; }
.recruit-detail h2 { margin: 5px 0; font-size: 18px; }
.recruit-detail p { margin: 0 0 7px; font-size: 9px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.detail-grid span { padding: 5px; font-size: 7px; background: var(--mist-120); }
.detail-grid b { display: block; margin-top: 2px; font-size: 9px; }
.recruit-detail > button { margin: 8px 4px 0 0; }
.dismissal-review { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; }
.dismissal-review > div { padding: 15px; color: var(--ink-950); background: rgba(243,246,242,.96); }
.dismissal-review h2 { margin: 4px 0 9px; font-size: 20px; }
.dismissal-review p { font-size: 9px; }

/* Equipment, party and artifacts */
.equipment-composition { height: 100%; display: grid; grid-template-columns: .9fr .62fr 1fr; gap: 8px; padding: 2.5% 3.2% 5%; color: var(--ink-950); }
.equipment-list, .equipment-wearer, .equipment-delta { min-width: 0; padding: 9px; background: rgba(243,246,242,.95); }
.equipment-list { display: grid; align-content: start; gap: 3px; }
.equipment-row { min-height: 43px; display: flex; align-items: center; gap: 8px; color: var(--ink-950); text-align: left; background: var(--white); border: 1px solid var(--line); }
.equipment-row.is-focused { border-left: 4px solid var(--work-gold); }
.equipment-row > span { width: 36px; font-size: 20px; text-align: center; }
.equipment-row strong, .equipment-row small { display: block; }
.equipment-row strong { font-size: 8px; }
.equipment-row small { font-size: 7px; }
.equipment-wearer { display: grid; place-items: center; align-content: center; text-align: center; }
.equipment-wearer .large-figure { width: 68px; height: 86px; font-size: 16px; }
.equipment-wearer strong { margin-top: 5px; font-size: 12px; }
.equipment-wearer small { font-size: 8px; }
.equipped-slot { margin-top: 8px; padding: 5px; font-size: 7px; background: var(--mist-120); }
.equipment-delta { border-top: 4px solid var(--safe-jade); }
.equipment-delta h2 { margin: 4px 0 8px; font-size: 14px; }
.equipment-delta p { font-size: 8px; line-height: 1.35; }
.equipment-delta .stage-primary { width: 100%; }
.party-composition { height: 100%; position: relative; padding: 2.5% 3.2% 5%; }
.party-title h2 { margin: 3px 0; font-size: 19px; }
.party-title h2 i { color: var(--work-gold); font-style: normal; }
.party-title p { margin: 0; font-size: 9px; }
.relation-layer { position: absolute; left: 16%; right: 23%; top: 27%; height: 32px; }
.relation { position: absolute; padding: 3px 6px; font-size: 7px; font-weight: 900; background: var(--mist-050); border-radius: 2px; }
.relation.protection { left: 40%; color: var(--route-teal); border-bottom: 3px solid var(--route-teal); }
.relation.reach { left: 5%; top: 20px; color: var(--uncertain-cobalt); border-bottom: 3px dashed var(--uncertain-cobalt); }
.party-cord { position: absolute; left: 6%; right: 6%; top: 40%; height: 105px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.party-cord::before { content: ""; position: absolute; left: 7%; right: 7%; top: 61px; height: 3px; background: #d7e0dd; border: 1px solid var(--ink-950); }
.party-actor { position: relative; z-index: 2; min-width: 74px; height: 93px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto auto; align-items: end; padding: 4px; color: var(--ink-950); background: rgba(243,246,242,.94); border: 2px solid var(--route-teal); border-radius: 4px; }
.party-actor.is-front { border-color: var(--danger-coral); }
.actor-figure { grid-column: 1 / 3; justify-self: center; align-self: center; width: 38px; height: 46px; display: grid; place-items: center; color: var(--white); font-size: 9px; font-weight: 900; background: var(--ink-840); border: 3px solid #739196; border-radius: 46% 46% 16% 16%; }
.party-actor > b { width: 20px; height: 20px; display: grid; place-items: center; color: var(--white); font-size: 9px; background: var(--ink-950); border-radius: 2px; }
.party-actor > strong { justify-self: end; font-size: 8px; }
.party-actor > em { grid-column: 1 / 3; color: var(--ink-700); font-size: 7px; font-style: normal; }
.cord-label { z-index: 2; width: 62px; font-size: 8px; font-weight: 900; text-align: center; }
.cord-label.rear { color: #b7e6e0; }
.cord-label.front { color: #ffc1bc; }
.party-read { position: absolute; right: 3.2%; top: 20%; width: 24%; display: grid; gap: 3px; padding: 8px; color: var(--ink-950); background: rgba(243,246,242,.96); border-left: 4px solid var(--work-gold); }
.party-read strong { font-size: 9px; }
.party-read span { font-size: 7px; }
.party-tools { position: absolute; right: 3.2%; bottom: 8%; display: flex; gap: 6px; }
.artifact-composition { height: 100%; display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: auto 1fr; gap: 8px; padding: 2.5% 3.2% 5%; color: var(--ink-950); }
.artifact-heading { grid-column: 1 / 3; color: var(--mist-050); }
.artifact-heading h2 { margin: 3px 0; font-size: 19px; }
.artifact-ledger, .artifact-inspect { padding: 9px; background: rgba(243,246,242,.96); }
.artifact-row { width: 100%; min-height: 52px; display: grid; grid-template-columns: 42px 1fr auto; gap: 7px; align-items: center; color: var(--ink-950); text-align: left; background: var(--white); border: 1px solid var(--line); }
.artifact-row + .artifact-row { margin-top: 4px; }
.artifact-row.is-focused { border-left: 4px solid var(--work-gold); }
.artifact-emblem { font-size: 24px; text-align: center; }
.artifact-row small, .artifact-row strong, .artifact-row p { display: block; margin: 0; }
.artifact-row small { color: var(--route-teal); font-size: 7px; }
.artifact-row strong { font-size: 9px; }
.artifact-row p { font-size: 7px; }
.artifact-row em { font-size: 8px; font-style: normal; }
.artifact-inspect { border-top: 4px solid var(--route-teal); }
.artifact-inspect h3 { margin: 3px 0; font-size: 15px; }
.artifact-inspect p, .artifact-inspect span, .artifact-inspect small, .artifact-inspect b { display: block; margin: 5px 0; font-size: 8px; line-height: 1.4; }

/* Risk and battle */
.risk-board, .risk-review { height: 100%; padding: 2.5% 3.2% 5%; }
.risk-heading h2 { margin: 3px 0; font-size: 19px; }
.risk-options { height: 58%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.risk-option { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 10px; color: var(--ink-950); text-align: left; background: rgba(243,246,242,.94); border: 2px solid transparent; border-radius: 4px; }
.risk-option.is-selected { border-color: var(--work-gold); }
.risk-option > span { width: 25px; height: 25px; display: grid; place-items: center; color: var(--white); font-size: 9px; background: var(--ink-840); }
.risk-option strong { font-size: 11px; }
.risk-option small, .risk-option em, .risk-option b { font-size: 8px; }
.risk-option div { margin-top: auto; display: flex; justify-content: space-between; gap: 5px; padding-top: 5px; border-top: 1px solid var(--line); }
.risk-option em { color: var(--safe-jade); font-style: normal; }
.risk-compare { min-height: 39px; display: flex; align-items: center; gap: 10px; margin-top: 7px; padding: 5px 7px; color: var(--ink-950); font-size: 8px; background: rgba(243,246,242,.94); }
.risk-compare span { font-weight: 900; }
.risk-compare .stage-primary { margin-left: auto; }
.risk-review { width: 82%; margin: 0 auto; color: var(--ink-950); background: rgba(243,246,242,.96); border-left: 5px solid var(--danger-coral); }
.risk-review h2 { margin: 4px 0; font-size: 21px; }
.threat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.threat-band span { padding: 6px; font-size: 7px; background: var(--mist-120); }
.threat-band b { display: block; margin-top: 3px; font-size: 9px; }
.mini-party-line { display: flex; justify-content: center; gap: 5px; margin: 7px 0; padding: 6px; background: var(--ink-840); }
.mini-party-line .party-actor { min-width: 48px; height: 61px; }
.mini-party-line .actor-figure { width: 24px; height: 29px; }
.mini-party-line .party-actor > em { display: none; }
.risk-review p { max-width: 70%; font-size: 8px; }
.battle-composition, .battle-static { height: 100%; position: relative; padding: 2% 2.8% 4.8%; }
.battle-objective { max-width: 50%; }
.battle-objective h2 { margin: 3px 0; font-size: 17px; }
.battle-objective p { margin: 0; font-size: 8px; }
.battle-life-rule { display: inline-block; margin-top: 5px; padding: 3px 5px; color: var(--white); font-size: 7px; background: rgba(178,59,55,.92); border-left: 3px solid #ffb8b3; }
.playback-tools { position: absolute; right: 2.8%; top: 2%; display: flex; gap: 5px; }
.speed-control { display: flex; background: rgba(24,33,39,.9); border: 1px solid rgba(255,255,255,.3); }
.speed-control button { min-width: 30px; color: #dce7e6; font-size: 8px; background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,.2); }
.speed-control button.is-active { color: var(--ink-950); background: var(--work-gold); }
.battle-line { position: absolute; left: 2.8%; right: 2.8%; top: 25%; bottom: 17%; display: grid; grid-template-columns: 1.12fr .32fr .72fr; align-items: end; gap: 5px; }
.battle-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 4px; background: rgba(243,246,242,.84); border: 1px solid var(--ink-950); }
.allied-line { z-index: 2; display: flex; align-items: end; justify-content: flex-end; gap: 4px; }
.allied-line .party-actor { min-width: 52px; height: 76px; }
.allied-line .actor-figure { width: 30px; height: 38px; }
.allied-line .edge-label { width: 42px; color: #d4e9e7; font-size: 7px; font-weight: 900; text-align: center; }
.action-gap { z-index: 3; align-self: center; }
.forecast-arrow { display: block; padding: 5px; color: var(--white); font-size: 7px; font-weight: 900; text-align: center; background: var(--danger-coral); border: 2px solid #ffb8b3; clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); }
.enemy-line { z-index: 2; display: flex; align-items: end; gap: 5px; }
.enemy-actor { min-width: 48px; height: 64px; display: grid; place-items: center; align-content: center; color: var(--white); font-size: 11px; font-weight: 900; background: #713c3e; border: 3px solid #d27978; border-radius: 48% 48% 20% 20%; }
.enemy-actor.elite { min-width: 67px; height: 88px; background: #4c5263; border-color: #a7b4d2; }
.enemy-actor small { display: block; margin-top: 3px; font-size: 6px; font-weight: 700; text-align: center; }
.battle-event-log { position: absolute; left: 2.8%; bottom: 5%; display: flex; gap: 4px; max-width: 65%; }
.battle-event-log span, .battle-event-log b { padding: 4px 5px; font-size: 6px; background: rgba(24,33,39,.9); border: 1px solid rgba(255,255,255,.25); }
.battle-event-log b { border-color: var(--work-gold); }
.caption-line { position: absolute; right: 2.8%; bottom: 5%; max-width: 31%; padding: 5px; color: var(--ink-950); font-size: 7px; background: rgba(243,246,242,.94); }
.inspect-sheet { position: absolute; z-index: 5; right: 2.8%; top: 18%; bottom: 12%; width: 32%; padding: 10px; color: var(--ink-950); background: rgba(243,246,242,.97); border-left: 4px solid var(--uncertain-cobalt); }
.inspect-sheet h3 { margin: 4px 0; font-size: 13px; }
.inspect-sheet dl { margin: 5px 0; }
.inspect-sheet dl > div { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5px; padding: 3px 0; font-size: 7px; border-bottom: 1px solid var(--line); }
.inspect-sheet dd { margin: 0; font-weight: 800; }
.inspect-sheet .stage-primary { width: 100%; }
.battle-static .battle-line { opacity: .52; }
.battle-sheet { position: absolute; z-index: 5; right: 3%; top: 7%; width: 36%; padding: 12px; }
.battle-sheet h2 { margin: 4px 0 8px; font-size: 16px; }
.battle-sheet .speed-control { min-height: 30px; margin-top: 7px; }
.battle-composition.is-paused .battle-line { opacity: .7; }

/* Outcomes */
.result-composition, .loss-composition, .reward-composition, .recovery-composition, .outcome-sheet { height: 100%; position: relative; padding: 2.5% 3.2% 5%; color: var(--ink-950); background: rgba(232,238,235,.95); }
.result-title { display: grid; grid-template-columns: 90px 1fr; gap: 11px; }
.outcome-seal { display: grid; place-items: center; color: var(--white); font-size: 13px; font-weight: 900; background: var(--safe-jade); border: 4px double #b7e4cd; }
.result-title h2 { margin: 3px 0; font-size: 18px; }
.result-title p { margin: 0; font-size: 8px; }
.causal-timeline { position: relative; margin-top: 9px; padding: 8px; background: var(--white); }
.expected-track, .actual-track { display: grid; grid-template-columns: 70px repeat(3, 1fr); gap: 4px; align-items: center; }
.actual-track { margin-top: 5px; }
.expected-track b, .actual-track b { font-size: 7px; }
.expected-track span, .actual-track span { min-height: 28px; display: grid; place-items: center; padding: 4px; font-size: 7px; text-align: center; background: var(--mist-120); border: 1px solid var(--line); }
.actual-track span.is-divergence { color: var(--white); background: var(--danger-coral); border-color: #8d2c30; }
.causal-timeline svg { position: absolute; inset: 8px 0; width: 100%; height: calc(100% - 16px); pointer-events: none; }
.causal-timeline path { fill: none; stroke: var(--danger-coral); stroke-width: 1.2; }
.result-effects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 7px; }
.result-effects span { padding: 6px; font-size: 7px; background: var(--white); }
.result-effects b { display: block; margin-bottom: 2px; color: var(--route-teal); }
.loss-composition { display: grid; grid-template-columns: .65fr 1.35fr; gap: 12px; }
.fallen-figure { display: grid; place-items: center; align-content: center; background: #dce1de; border: 1px solid var(--line); }
.fallen-figure span { width: 90px; height: 115px; display: grid; place-items: center; color: #bbc4c2; font-size: 24px; font-weight: 900; background: #4c595d; border: 5px solid #7d8a8d; border-radius: 45% 45% 16% 16%; filter: grayscale(1); }
.fallen-figure i { margin-top: 7px; color: var(--danger-coral); font-size: 10px; font-style: normal; font-weight: 900; }
.loss-record { padding: 12px; background: var(--white); border-left: 5px solid var(--danger-coral); }
.loss-record h2 { margin: 4px 0; font-size: 21px; }
.loss-record > p, .loss-record > small { font-size: 8px; }
.loss-row { display: flex; justify-content: space-between; padding: 6px; font-size: 8px; border-bottom: 1px solid var(--line); }
.reward-heading h2, .recovery-heading h2 { margin: 3px 0; font-size: 19px; }
.reward-options, .recovery-paths { height: 61%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.reward-option, .recovery-path { min-width: 0; display: grid; align-content: start; gap: 3px; padding: 9px; color: var(--ink-950); text-align: left; background: var(--white); border: 2px solid transparent; border-radius: 4px; }
.reward-option.is-selected, .recovery-path.is-selected { border-color: var(--work-gold); }
.reward-object { display: grid; place-items: center; height: 45px; color: var(--route-teal); font-size: 32px; }
.reward-option small, .reward-option strong, .reward-option p, .reward-option em, .recovery-path span, .recovery-path strong, .recovery-path small, .recovery-path p { margin: 0; }
.reward-option small, .recovery-path small { color: var(--route-teal); font-size: 7px; }
.reward-option strong, .recovery-path strong { font-size: 10px; }
.reward-option p, .recovery-path p { font-size: 7px; line-height: 1.35; }
.reward-option em { margin-top: auto; padding-top: 4px; font-size: 7px; font-style: normal; font-weight: 900; border-top: 1px solid var(--line); }
.recovery-heading p { max-width: 70%; margin: 0; font-size: 8px; }
.recovery-path > span { width: 23px; height: 23px; display: grid; place-items: center; color: var(--white); font-size: 8px; background: var(--ink-840); }
.outcome-sheet { width: 74%; height: auto; min-height: 70%; margin: 0 auto; border-left-color: var(--danger-coral); }
.outcome-sheet h2 { margin: 5px 0 8px; font-size: 20px; }
.outcome-sheet p { font-size: 9px; line-height: 1.4; }

/* Guild, system, progress, settings */
.guild-composition, .forecast-composition, .system-workspace, .progress-composition, .records-composition, .settings-composition, .generic-composition { height: 100%; position: relative; padding: 2.5% 3.2% 5%; }
.guild-pressure { max-width: 48%; }
.guild-pressure h2 { margin: 3px 0; font-size: 19px; }
.guild-pressure p { margin: 0; font-size: 9px; }
.guild-destinations { position: absolute; left: 3.2%; right: 3.2%; top: 27%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.guild-destinations button { min-height: 52px; display: grid; padding: 8px; color: var(--ink-950); font-size: 9px; font-weight: 900; text-align: left; background: rgba(243,246,242,.94); border: 1px solid var(--line); border-bottom: 4px solid var(--route-teal); }
.guild-destinations button.is-primary { border-bottom-color: var(--work-gold); }
.guild-destinations b { margin-top: auto; font-size: 7px; }
.muster-strip { position: absolute; left: 12%; right: 12%; bottom: 11%; display: flex; justify-content: center; gap: 5px; }
.muster-strip .party-actor { min-width: 56px; height: 67px; }
.muster-strip .actor-figure { width: 27px; height: 31px; }
.receipt-strip { position: absolute; right: 3.2%; bottom: 4%; display: flex; gap: 7px; padding: 5px 7px; color: var(--ink-950); font-size: 7px; background: var(--mist-050); border-left: 4px solid var(--safe-jade); }
.forecast-horizon { display: flex; align-items: center; gap: 6px; color: var(--white); font-size: 8px; font-weight: 900; }
.forecast-horizon i { flex: 1; height: 2px; background: var(--work-gold); }
.forecast-sheets { height: 67%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.forecast-sheets article { padding: 11px; color: var(--ink-950); background: rgba(243,246,242,.95); border-top: 4px solid var(--route-teal); }
.forecast-sheets article.uncertain { border-top-style: dashed; border-top-color: var(--uncertain-cobalt); }
.forecast-sheets span, .forecast-sheets b { font-size: 7px; }
.forecast-sheets h3 { margin: 4px 0; font-size: 13px; }
.forecast-sheets p { font-size: 8px; line-height: 1.4; }
.title-composition { height: 100%; display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 6%; padding: 4% 5% 8%; }
.title-brand span, .title-brand strong { display: block; }
.title-brand span { font-size: 17px; }
.title-brand strong { color: var(--work-gold); font-size: 46px; line-height: .95; }
.title-brand small { display: block; margin-top: 8px; font-size: 10px; }
.run-summary { display: grid; gap: 5px; padding: 13px; color: var(--ink-950); background: rgba(243,246,242,.95); border-left: 5px solid var(--work-gold); }
.run-summary b, .run-summary span { font-size: 8px; }
.run-summary strong { font-size: 12px; }
.title-tools { position: absolute; right: 3%; top: 3%; display: flex; gap: 5px; }
.boot-composition { height: 100%; display: grid; place-items: center; align-content: center; color: var(--mist-050); text-align: center; background: radial-gradient(circle at center, #395c62, #182127 65%); }
.boot-mark { position: relative; width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 6px; }
.boot-mark i { position: absolute; inset: 0; border: 3px solid var(--work-gold); transform: rotate(45deg); }
.boot-mark span { font-size: 22px; font-weight: 900; }
.boot-composition h2 { margin: 5px 0; font-size: 22px; }
.verification-track { width: 260px; height: 6px; margin: 8px 0; overflow: hidden; background: #617177; }
.verification-track i { display: block; height: 100%; background: var(--work-gold); }
.boot-composition strong, .boot-composition small { font-size: 8px; }
.system-workspace { display: grid; grid-template-columns: 1fr .55fr; grid-template-rows: auto 1fr; gap: 8px; color: var(--ink-950); background: rgba(232,238,235,.95); }
.system-workspace > .stage-kicker, .system-workspace > h2 { grid-column: 1 / 3; }
.system-workspace > h2 { margin: -3px 0 0; font-size: 19px; }
.system-list { display: grid; gap: 4px; }
.system-row { min-height: 46px; display: grid; grid-template-columns: 32px 1fr auto; gap: 7px; align-items: center; color: var(--ink-950); text-align: left; background: var(--white); border: 1px solid var(--line); }
.system-row.is-focused { box-shadow: inset 4px 0 var(--work-gold); }
.system-row span { font-size: 8px; text-align: center; }
.system-row strong { font-size: 9px; }
.system-row em { padding-right: 8px; font-size: 7px; font-style: normal; }
.system-workspace aside { padding: 10px; background: var(--white); border-left: 4px solid var(--route-teal); }
.system-workspace aside b, .system-workspace aside p { font-size: 8px; }
.progress-composition { color: var(--ink-950); background: rgba(232,238,235,.96); }
.progress-heading { max-width: 70%; }
.progress-heading h2 { margin: 3px 0; font-size: 19px; }
.progress-heading p { margin: 0; font-size: 8px; }
.progress-path { display: flex; align-items: center; margin: 12px 0; }
.progress-path i { flex: 1; height: 3px; background: var(--neutral-silver); }
.path-node { min-width: 76px; padding: 8px; font-size: 8px; font-weight: 900; text-align: center; background: var(--white); border: 2px solid var(--neutral-silver); }
.path-node.is-complete { color: var(--white); background: var(--safe-jade); border-color: var(--safe-jade); }
.path-node.is-current { border-color: var(--work-gold); box-shadow: inset 0 -4px var(--work-gold); }
.progress-details { width: 62%; display: grid; gap: 3px; }

/* Guild Charter and final-campaign decisions */
.charter-composition, .chronicle-composition, .oath-composition, .oath-result-composition { height: 100%; padding: 2.2% 3.2% 4.6%; color: var(--ink-950); background: rgba(232,238,235,.97); }
.charter-composition { display: grid; grid-template-rows: auto 58px minmax(0, 1fr); gap: 8px; }
.charter-heading, .oath-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.charter-heading h2, .chronicle-heading h2, .oath-heading h2, .oath-result-composition h2 { margin: 2px 0; font-size: 18px; }
.charter-heading p, .chronicle-heading p, .oath-heading p, .oath-result-composition header p { max-width: 650px; margin: 0; font-size: 8px; line-height: 1.35; }
.renown-balance { min-width: 112px; display: grid; grid-template-columns: 1fr auto; gap: 1px 9px; padding: 7px 9px; color: var(--mist-050); background: var(--ink-840); border-left: 4px solid var(--work-gold); }
.renown-balance span, .renown-balance small { font-size: 7px; }
.renown-balance strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--work-gold); font-size: 24px; }
.charter-track { min-width: 0; display: flex; align-items: center; overflow-x: auto; padding: 3px; background: var(--ink-840); scrollbar-width: thin; }
.charter-track > i { width: 16px; height: 3px; flex: 0 0 16px; background: var(--neutral-silver); }
.charter-seal { min-width: 83px; height: 48px; display: grid; align-content: center; gap: 1px; padding: 4px 5px; color: var(--mist-050); text-align: left; background: #34484f; border: 2px solid #66777d; border-radius: 3px; }
.charter-seal span, .charter-seal em { font-size: 5px; font-style: normal; }
.charter-seal strong { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.charter-seal.is-complete { background: var(--safe-jade); border-color: #a8dec0; }
.charter-seal.is-current { color: var(--ink-950); background: var(--work-gold); border-color: var(--ink-950); }
.charter-workspace { min-height: 0; display: grid; grid-template-columns: 1.15fr .85fr; gap: 8px; }
.charter-packets { min-height: 0; display: grid; grid-template-rows: auto repeat(3, minmax(0, 1fr)); gap: 4px; }
.charter-section-title { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 7px; }
.charter-section-title span, .charter-section-title small { font-size: 6px; }
.charter-section-title strong { font-size: 10px; }
.charter-packet { min-height: 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; gap: 1px 8px; padding: 6px 8px; color: var(--ink-950); text-align: left; background: var(--white); border: 1px solid var(--line); border-left: 4px solid transparent; }
.charter-packet.is-selected { border-left-color: var(--work-gold); box-shadow: inset 0 0 0 1px var(--ink-950); }
.charter-packet span, .charter-packet small { font-size: 6px; }
.charter-packet strong { font-size: 9px; }
.charter-packet b { grid-row: 1 / 4; grid-column: 2; align-self: center; color: var(--route-teal); font-size: 8px; }
.charter-review { min-height: 0; display: grid; align-content: start; gap: 4px; padding: 9px; background: var(--white); border-top: 4px solid var(--work-gold); }
.charter-review h3 { margin: 0; font-size: 14px; }
.charter-review p { margin: 0; font-size: 8px; line-height: 1.35; }
.charter-review dl { display: grid; gap: 2px; margin: 2px 0; }
.charter-review dl > div { display: grid; grid-template-columns: 74px 1fr; gap: 5px; padding: 3px; font-size: 7px; background: var(--mist-120); }
.charter-review dt { font-weight: 900; }
.charter-review dd { margin: 0; }
.no-power-boundary, .no-carryover { padding: 5px 6px; color: var(--white); font-size: 7px; background: var(--safe-jade); border-left: 4px solid var(--ink-950); }
.charter-review > div:last-child { display: flex; justify-content: flex-end; gap: 4px; }
.charter-review .stage-primary, .charter-review .stage-secondary { min-height: 27px; padding: 4px 6px; font-size: 7px; }

.chronicle-composition { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 7px; }
.chronicle-heading { color: var(--ink-950); }
.archive-contract { display: flex; align-items: center; gap: 9px; padding: 6px 8px; color: var(--white); background: var(--ink-840); border-left: 5px solid var(--safe-jade); }
.archive-contract > span { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink-950); background: var(--work-gold); border-radius: 50%; }
.archive-contract strong, .archive-contract p { margin: 0; font-size: 7px; }
.chronicle-choices { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chronicle-choice { min-width: 0; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto 1fr; align-content: start; gap: 2px 8px; padding: 10px; color: var(--ink-950); text-align: left; background: var(--white); border: 2px solid var(--line-strong); }
.chronicle-choice > span { grid-row: 1 / 4; width: 28px; height: 28px; display: grid; place-items: center; color: var(--white); font-size: 8px; background: var(--ink-840); }
.chronicle-choice small { font-size: 6px; }
.chronicle-choice strong { font-size: 12px; }
.chronicle-choice p { margin: 3px 0 0; font-size: 8px; line-height: 1.3; }
.chronicle-choice.is-selected { border-color: var(--work-gold); box-shadow: inset 0 -5px var(--work-gold); }
.chronicle-review { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 6px; padding: 6px 8px; background: var(--mist-120); }
.chronicle-review > div { display: grid; gap: 1px; }
.chronicle-review span, .chronicle-review strong { font-size: 7px; }
.chronicle-review .stage-primary, .chronicle-review .stage-secondary { min-height: 29px; padding: 4px 7px; font-size: 7px; }

.oath-composition { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
.oath-heading .stage-secondary { min-height: 30px; padding: 5px 7px; font-size: 7px; }
.oath-workspace { min-height: 0; display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; }
.oath-laws { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.oath-law { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 9px; color: var(--ink-950); text-align: left; background: var(--white); border: 2px solid var(--line); }
.oath-law > span, .oath-law em { font-size: 6px; font-style: normal; }
.oath-law strong { font-size: 10px; }
.oath-law p { margin: 0; font-size: 7px; line-height: 1.35; }
.oath-law em { align-self: end; padding: 4px; background: var(--mist-120); }
.oath-law.is-selected { border-color: var(--work-gold); box-shadow: inset 0 -5px var(--work-gold); }
.oath-review { min-height: 0; display: grid; align-content: start; gap: 4px; padding: 9px; background: var(--white); border-top: 4px solid var(--route-teal); }
.oath-review h3 { margin: 0; font-size: 14px; }
.oath-review .sheet-row { min-height: 24px; justify-content: space-between; padding: 4px 5px; font-size: 7px; }
.oath-review .stage-primary { min-height: 29px; margin-top: 2px; padding: 4px 6px; font-size: 7px; }

.oath-result-composition { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }
.oath-result-grid { min-height: 0; display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 7px; }
.oath-result-grid article { min-width: 0; display: grid; align-content: start; gap: 3px; padding: 9px; background: var(--white); border-top: 4px solid var(--route-teal); }
.oath-result-grid article > span { width: 25px; height: 25px; display: grid; place-items: center; color: var(--white); font-size: 7px; background: var(--ink-840); }
.oath-result-grid article strong { font-size: 10px; }
.oath-result-grid article p { margin: 0; font-size: 7px; line-height: 1.35; }
.oath-result-grid .oath-receipts { border-top-color: var(--work-gold); }
.oath-result-composition footer { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.oath-result-composition footer > strong { margin-right: auto; font-size: 7px; }
.oath-result-composition footer .stage-primary, .oath-result-composition footer .stage-secondary { min-height: 29px; padding: 4px 7px; font-size: 7px; }
.records-composition { display: grid; grid-template-columns: .55fr 1.1fr .75fr; gap: 8px; color: var(--ink-950); background: rgba(232,238,235,.96); }
.records-categories, .record-grid, .record-inspect { padding: 8px; background: var(--white); }
.records-categories { display: grid; align-content: start; gap: 3px; }
.records-categories > strong { margin-bottom: 5px; font-size: 9px; }
.records-categories button { min-height: 29px; display: flex; justify-content: space-between; align-items: center; color: var(--ink-950); font-size: 8px; background: var(--mist-120); border: 1px solid transparent; }
.records-categories button.is-active { border-left: 4px solid var(--work-gold); }
.record-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.record-tile { min-width: 0; display: grid; place-items: center; align-content: center; padding: 4px; color: var(--ink-950); background: var(--mist-120); border: 1px solid var(--line); }
.record-tile.is-focused { border-color: var(--work-gold); }
.record-tile > span { width: 31px; height: 34px; display: grid; place-items: center; color: var(--white); font-size: 8px; background: var(--ink-840); }
.record-tile small, .record-tile strong, .record-tile em { font-size: 7px; font-style: normal; text-align: center; }
.record-inspect .large-figure { width: 65px; height: 78px; }
.record-inspect h2 { margin: 5px 0; font-size: 15px; }
.record-inspect p, .record-inspect b, .record-inspect span { display: block; margin: 4px 0; font-size: 8px; }
.settings-composition { display: grid; grid-template-columns: .6fr 1.35fr .7fr; gap: 1px; padding: 0; color: var(--ink-950); background: var(--line-strong); }
.settings-rail, .settings-workspace, .settings-preview { padding: 11px; background: var(--mist-050); }
.settings-rail { display: grid; align-content: start; gap: 3px; }
.settings-rail strong { margin-bottom: 5px; font-size: 10px; }
.settings-rail button { min-height: 28px; color: var(--ink-700); font-size: 8px; text-align: left; background: transparent; border: 0; border-left: 3px solid transparent; }
.settings-rail button.is-active { color: var(--ink-950); background: var(--mist-180); border-left-color: var(--work-gold); }
.settings-workspace h2 { margin: 3px 0 7px; font-size: 17px; }
.setting-control { min-height: 44px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.setting-control strong, .setting-control small { display: block; }
.setting-control strong { font-size: 8px; }
.setting-control small { color: var(--ink-700); font-size: 7px; }
.segmented-control { display: flex; }
.segmented-control button, .menu-control { min-height: 26px; padding: 4px 6px; color: var(--ink-950); font-size: 7px; background: var(--white); border: 1px solid var(--line); }
.segmented-control button.is-active { color: var(--white); background: var(--ink-840); }
.switch { width: 34px; height: 20px; padding: 2px; background: var(--neutral-silver); border: 0; border-radius: 10px; }
.switch i { display: block; width: 16px; height: 16px; background: var(--white); border-radius: 50%; transform: translateX(0); }
.switch.is-on { background: var(--safe-jade); }
.switch.is-on i { transform: translateX(14px); }
.settings-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 7px; }
.settings-preview { align-self: stretch; background: #dbe9e5; }
.settings-preview > span { font-size: 8px; font-weight: 900; }
.preview-target { margin-top: 12px; padding: 7px; color: var(--white); font-size: 7px; background: var(--danger-coral); border-left: 5px solid var(--ink-950); }
.preview-target b { display: block; font-size: 9px; }
.settings-preview p, .settings-preview strong { font-size: 8px; }
.generic-composition { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; }
.generic-subject { display: grid; place-items: center; align-content: center; background: rgba(19,129,138,.82); border: 2px solid #9cdbda; }
.generic-subject span { font-size: 48px; font-weight: 900; }
.generic-subject strong { font-size: 10px; }
.generic-decision { padding: 13px; color: var(--ink-950); background: rgba(243,246,242,.96); }
.generic-decision h2 { margin: 4px 0; font-size: 18px; }
.generic-decision p { font-size: 8px; line-height: 1.4; }

/* State variants */
.state-variant-overlay { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; padding: 5%; background: rgba(12,22,26,.68); }
.state-variant-overlay.loading { background: rgba(12,22,26,.52); }
.variant-sheet { width: min(72%, 620px); padding: 16px; color: var(--ink-950); background: var(--mist-050); border-left: 6px solid var(--uncertain-cobalt); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.state-variant-overlay.error .variant-sheet { border-left-color: var(--danger-coral); }
.state-variant-overlay.return .variant-sheet { border-left-color: var(--safe-jade); }
.variant-sheet h2 { margin: 4px 0; font-size: 18px; }
.variant-sheet p { font-size: 9px; line-height: 1.45; }
.variant-sheet > div { display: flex; justify-content: flex-end; gap: 6px; }

/* Gallery controls */
.firstplay-controls { min-height: 52px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 12px; }
.page-command { min-height: 42px; padding: 8px 12px; color: var(--ink-950); font-size: 11px; font-weight: 800; background: var(--white); border: 1px solid var(--line-strong); border-radius: 4px; }
.page-command.is-primary { background: var(--work-gold); border-color: #b98717; }
.flow-progress { display: flex; justify-content: center; gap: 3px; overflow-x: auto; scrollbar-width: thin; }
.flow-progress button { width: 22px; height: 28px; flex: 0 0 auto; padding: 0; color: var(--ink-700); font-size: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 2px; }
.flow-progress button.is-complete { color: var(--white); background: var(--safe-jade); }
.flow-progress button.is-active { color: var(--ink-950); background: var(--work-gold); border-color: var(--ink-950); }
.screen-tools { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-bottom: 12px; }
.filter-scroll, .variant-control, .catalog-tabs, .region-tabs { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: thin; }
.filter-scroll button, .variant-control button { min-height: 34px; flex: 0 0 auto; padding: 6px 9px; color: var(--ink-700); font-size: 9px; background: var(--white); border: 1px solid var(--line); border-radius: 3px; }
.filter-scroll button.is-active, .variant-control button.is-active { color: var(--white); background: var(--ink-840); }
.screen-browser { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; }
.screen-index { position: sticky; top: calc(var(--topbar) + 16px); max-height: calc(100vh - var(--topbar) - 48px); overflow: auto; background: var(--white); border: 1px solid var(--line); }
.screen-index button { width: 100%; min-height: 49px; display: grid; grid-template-columns: 58px 1fr; gap: 2px 7px; align-items: center; padding: 6px 8px; color: var(--ink-950); text-align: left; background: var(--white); border: 0; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; }
.screen-index button.is-active { background: var(--mist-120); border-left-color: var(--work-gold); }
.screen-index span { color: var(--route-teal); font-size: 9px; font-weight: 900; }
.screen-index strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.screen-index em { grid-column: 2; color: var(--safe-jade); font-size: 7px; font-style: normal; font-weight: 900; }
.screen-inspection { min-width: 0; }
.screen-pager { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.screen-pager button { min-height: 38px; padding: 7px 10px; color: var(--ink-950); font-size: 9px; background: var(--white); border: 1px solid var(--line); border-radius: 3px; }
.authority-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 10px; background: var(--line); border: 1px solid var(--line); }
.authority-summary > div { min-height: 105px; padding: 11px; background: var(--white); }
.authority-summary span { color: var(--route-teal); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.authority-summary p { margin: 5px 0 0; font-size: 10px; line-height: 1.45; }

.region-tabs { margin-bottom: 12px; }
.region-tabs button { min-width: 126px; min-height: 45px; display: grid; padding: 6px 8px; color: var(--ink-700); text-align: left; background: var(--white); border: 1px solid var(--line); border-bottom: 3px solid transparent; }
.region-tabs button.is-active { color: var(--ink-950); border-bottom-color: var(--work-gold); }
.region-tabs span { font-size: 8px; font-weight: 900; }
.region-tabs strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.region-stage { position: relative; width: 100%; aspect-ratio: 16/7.2; overflow: hidden; color: var(--white); background: var(--ink-840); box-shadow: var(--shadow); }
.region-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.region-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,29,33,.86), rgba(16,29,33,.2) 58%, rgba(16,29,33,.55)); }
.region-stage .concept-label { z-index: 3; }
.region-title { position: absolute; z-index: 2; left: 4%; top: 12%; width: 38%; }
.region-title span { color: var(--work-gold); font-size: 11px; font-weight: 900; }
.region-title h2 { margin: 4px 0; font-size: 32px; }
.region-title p { font-size: 11px; line-height: 1.45; }
.region-route { position: absolute; z-index: 2; left: 35%; right: 4%; bottom: 16%; display: flex; align-items: center; }
.region-route i { flex: 1; height: 3px; background: var(--route-teal); border: 1px solid var(--white); }
.region-route button { min-width: 88px; min-height: 42px; color: var(--ink-950); font-size: 9px; font-weight: 900; background: var(--mist-050); border: 2px solid var(--route-teal); border-radius: 3px; }
.region-intel { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 1px; margin-top: 12px; background: var(--line); border: 1px solid var(--line); }
.region-intel article { min-height: 155px; padding: 14px; background: var(--white); }
.region-intel article > span { color: var(--route-teal); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.region-intel p { font-size: 10px; line-height: 1.5; }
.identity-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.identity-strip b { min-width: 0; padding: 6px; font-size: 8px; background: var(--mist-120); border-left: 3px solid var(--route-teal); }
.identity-strip b.boss { border-left-color: var(--danger-coral); }
.identity-strip small { display: block; overflow: hidden; margin-top: 2px; font-size: 7px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.catalog-tabs { margin-bottom: 10px; }
.catalog-tabs button { min-width: 126px; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 7px 9px; color: var(--ink-700); text-transform: capitalize; background: var(--white); border: 1px solid var(--line); border-bottom: 3px solid transparent; }
.catalog-tabs button.is-active { color: var(--ink-950); border-bottom-color: var(--work-gold); }
.catalog-tabs b { font-size: 10px; }
.catalog-toolbar { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.search-control { min-width: min(360px, 42vw); min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 10px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 4px; }
.search-control input { width: 100%; min-width: 0; border: 0; outline: 0; }
.catalog-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.catalog-art { position: sticky; top: calc(var(--topbar) + 16px); background: var(--white); border: 1px solid var(--line); }
.catalog-art > img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.catalog-art { position: sticky; }
.catalog-art .concept-label { bottom: auto; top: 8px; }
.catalog-art > div { padding: 12px; border-top: 1px solid var(--line); }
.catalog-art strong { font-size: 13px; }
.catalog-art p { margin: 5px 0 0; color: var(--ink-700); font-size: 10px; line-height: 1.45; }
.catalog-list { display: grid; gap: 5px; }
.catalog-entry { min-height: 74px; display: grid; grid-template-columns: minmax(165px, .38fr) 1fr 32px; gap: 12px; align-items: center; padding: 11px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--mist-180); border-radius: 3px; }
.catalog-entry:hover { border-left-color: var(--work-gold); }
.catalog-entry small, .catalog-entry strong, .catalog-entry em { display: block; }
.catalog-entry small { color: var(--route-teal); font-size: 8px; font-weight: 900; }
.catalog-entry strong { margin-top: 2px; font-size: 11px; }
.catalog-entry em { margin-top: 3px; color: var(--ink-700); font-size: 8px; font-style: normal; }
.catalog-entry p { margin: 0; font-size: 9px; line-height: 1.45; }
.catalog-entry .stage-icon { color: var(--ink-950); background: var(--mist-120); border-color: var(--line); }
.catalog-more { padding: 12px; color: var(--ink-700); font-size: 10px; text-align: center; background: var(--mist-120); }

/* Reference-to-original comparison */
.reference-selector { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px; scrollbar-width: thin; }
.reference-selector button { min-width: 154px; min-height: 58px; display: grid; grid-template-columns: auto 1fr; gap: 2px 7px; align-items: center; padding: 7px 9px; color: var(--ink-700); text-align: left; background: var(--white); border: 1px solid var(--line); border-bottom: 4px solid transparent; }
.reference-selector button.is-active { color: var(--ink-950); background: var(--mist-120); border-bottom-color: var(--work-gold); }
.reference-selector span { color: var(--route-teal); font-size: 8px; font-weight: 900; }
.reference-selector strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.reference-selector em { grid-column: 2; color: var(--ink-700); font-size: 7px; font-style: normal; }
.fidelity-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.reference-panel, .adaptation-panel { min-width: 0; }
.reference-panel > header, .adaptation-panel > header { min-height: 72px; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-bottom: 0; }
.reference-panel > header span, .adaptation-panel > header span { color: var(--route-teal); font-size: 8px; font-weight: 900; }
.reference-panel > header h2, .adaptation-panel > header h2 { margin: 3px 0; font-size: 16px; }
.reference-panel > header p, .adaptation-panel > header p { margin: 0; color: var(--ink-700); font-size: 9px; }
.reference-wireframe { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; color: var(--mist-050); background: #24343a; box-shadow: var(--shadow); }
.reference-wireframe > header { height: 12%; display: flex; align-items: center; gap: 8px; padding: 1.5% 2%; background: #17242a; border-bottom: 1px solid #53666d; }
.reference-wireframe > header span { padding: 3px 5px; color: var(--ink-950); font-size: 6px; font-weight: 900; background: var(--work-gold); }
.reference-wireframe > header strong { font-size: 7px; }
.reference-wireframe > header em { margin-left: auto; color: #a8dec0; font-size: 6px; font-style: normal; }
.wireframe-canvas { position: absolute; inset: 12% 0 9%; display: grid; grid-template-columns: 13% 1fr 18%; grid-template-rows: 18% 1fr 22% 14%; gap: 1.2%; padding: 1.7%; }
.wire-zone { min-width: 0; display: grid; place-items: center; align-content: center; gap: 3px; padding: 4px; color: #dce8e6; text-align: center; background: #34474e; border: 1px solid #64767c; }
.wire-zone > span { width: 18px; height: 18px; display: grid; place-items: center; color: var(--ink-950); font-size: 6px; background: var(--work-gold); border-radius: 50%; }
.wire-zone > strong { font-size: 7px; line-height: 1.2; }
.wire-zone.zone-top { grid-column: 2; grid-row: 1; }
.wire-zone.zone-main { grid-column: 2; grid-row: 2; border-color: var(--work-gold); box-shadow: inset 0 -4px var(--work-gold); }
.wire-zone.zone-lower { grid-column: 2; grid-row: 3; }
.wire-zone.zone-side { grid-column: 1; grid-row: 1 / 4; }
.wire-zone.zone-actions { grid-column: 2 / 4; grid-row: 4; }
.wire-zone.zone-main:nth-last-child(2) { grid-column: 3; }
.template-choice .zone-main { background: repeating-linear-gradient(90deg, #34474e 0 31%, #24343a 31% 34%); }
.template-battle .zone-main { background: linear-gradient(90deg, #3c665e 0 42%, #24343a 42% 58%, #6b4b50 58%); }
.template-graph .zone-main { background: repeating-linear-gradient(90deg, #34474e 0 10%, #24343a 10% 12%); }
.template-report .zone-main, .template-terminal .zone-main { background: repeating-linear-gradient(180deg, #34474e 0 19%, #24343a 19% 22%); }
.reference-wireframe > footer { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; display: flex; align-items: center; padding: 0 2%; color: #bfd0ce; font-size: 6px; background: #17242a; }
.adaptation-panel .stage-wrap { width: 100%; }
.fidelity-decisions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; background: var(--line); border: 1px solid var(--line); }
.fidelity-decisions article { min-height: 100px; padding: 13px; background: var(--white); }
.fidelity-decisions span { color: var(--route-teal); font-size: 8px; font-weight: 900; }
.fidelity-decisions article:nth-child(2) span { color: #765b11; }
.fidelity-decisions article:nth-child(3) span { color: var(--danger-coral); }
.fidelity-decisions p { margin: 6px 0 0; font-size: 10px; line-height: 1.5; }

.review-groups { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.review-groups article { min-height: 106px; display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: center; padding: 14px 18px; background: var(--white); }
.review-groups article > span { display: grid; place-items: center; width: 48px; height: 48px; color: var(--white); font-size: 14px; font-weight: 900; background: var(--route-teal); border-radius: 4px; }
.review-groups small { color: var(--route-teal); font-size: 8px; font-weight: 900; }
.review-groups h2 { margin: 3px 0; font-size: 16px; }
.review-groups p { margin: 0; color: var(--ink-700); font-size: 10px; line-height: 1.45; }
.review-boundary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 12px; background: var(--line); border: 1px solid var(--line); }
.review-boundary div { padding: 14px; background: var(--white); }
.review-boundary span, .review-boundary strong { display: block; }
.review-boundary span { color: var(--route-teal); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.review-boundary strong { margin-top: 5px; font-size: 10px; line-height: 1.5; }

/* Viewer */
.stage-dialog { width: min(98vw, 1780px); height: min(96vh, 1080px); max-width: none; max-height: none; padding: 0; color: var(--white); background: #0b1114; border: 1px solid #53646b; }
.stage-dialog::backdrop { background: rgba(5,9,11,.88); }
.viewer-toolbar { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 5px 9px 5px 15px; background: #142127; border-bottom: 1px solid #53646b; }
.viewer-toolbar > span { font-size: 11px; font-weight: 900; }
.viewer-toolbar > div { display: flex; gap: 5px; }
.viewer-toolbar .icon-button { color: var(--white); background: #25343a; border-color: #52656c; }
.viewer-zoom { min-width: 58px; color: var(--white); background: #25343a; border: 1px solid #52656c; border-radius: 3px; }
.viewer-viewport { height: calc(100% - 50px); overflow: auto; display: grid; place-items: center; padding: 12px; }
#dialog-stage { min-width: 560px; margin: auto; transition: width .15s ease; }
#dialog-stage .game-stage, #dialog-stage .region-stage { width: 100%; }
.nav-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(8,14,17,.66); }

@keyframes spin { to { transform: rotate(360deg); } }

@container stage (max-width: 760px) {
  .game-hud { height: 38px; padding: 4px 7px; }
  .stage-body { inset: 38px 0 0; }
  .stage-icon { width: 24px; height: 24px; font-size: 10px; }
  .resource { display: none; }
  .stage-primary, .stage-secondary { min-height: 26px; padding: 4px 7px; font-size: 8px; }
  .opening-title h2, .market-heading h2, .party-title h2, .risk-heading h2, .result-title h2, .reward-heading h2, .recovery-heading h2 { font-size: 14px; }
  .opening-title p, .party-title p, .battle-objective p, .region-signal p { display: none; }
  .offer-grid { height: 62%; gap: 4px; margin-top: 5px; }
  .offer-copy p { display: none; }
  .offer-figure > span { width: 32px; height: 37px; font-size: 9px; border-width: 2px; }
  .offer-actions > span { display: none; }
  .offer-actions { grid-template-columns: 1fr auto; }
  .offer-copy strong { font-size: 8px; }
  .profession-seal { font-size: 6px; }
  .opening-footer { min-height: 29px; margin-top: 3px; }
  .selection-count strong { min-width: 34px; padding: 3px 5px; font-size: 10px; }
  .market-surface { height: 66%; }
  .market-heading .stage-kicker, .market-footer, .party-read { display: none; }
  .market-row { grid-template-columns: 27px 1fr auto; padding: 3px; }
  .row-avatar { width: 24px; height: 27px; }
  .market-inspect { padding: 6px; }
  .market-inspect p { display: none; }
  .party-cord { left: 2%; right: 2%; top: 32%; gap: 4px; }
  .party-actor { min-width: 45px; height: 67px; }
  .actor-figure { width: 26px; height: 31px; border-width: 2px; }
  .party-tools { bottom: 6%; }
  .relation-layer { display: none; }
  .risk-options { height: 65%; }
  .risk-option { padding: 5px; }
  .risk-option small { display: none; }
  .battle-objective { max-width: 62%; }
  .battle-objective h2 { font-size: 12px; }
  .battle-line { top: 23%; bottom: 18%; grid-template-columns: 1.1fr .35fr .7fr; }
  .allied-line .party-actor { min-width: 37px; height: 58px; }
  .allied-line .actor-figure { width: 21px; height: 26px; }
  .allied-line .party-actor > strong, .allied-line .party-actor > em { display: none; }
  .enemy-actor { min-width: 36px; height: 47px; font-size: 8px; }
  .enemy-actor.elite { min-width: 45px; height: 63px; }
  .enemy-actor small, .edge-label { display: none; }
  .battle-event-log span { display: none; }
  .battle-event-log b { display: block; }
  .inspect-sheet { width: 40%; }
  .inspect-sheet dl > div:nth-child(n+3) { display: none; }
  .result-title { grid-template-columns: 65px 1fr; }
  .result-effects span:nth-child(2) { display: none; }
  .result-effects { grid-template-columns: repeat(2, 1fr); }
  .reward-options, .recovery-paths { height: 66%; }
  .reward-object { height: 28px; font-size: 19px; }
  .reward-option p, .recovery-path p { display: none; }
  .settings-preview { display: none; }
  .settings-composition { grid-template-columns: .55fr 1.45fr; }
  .setting-control { min-height: 34px; }
  .generic-subject span { font-size: 30px; }
  .reference-informed-market { gap: 3px; }
  .market-board { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr) 45px; gap: 2px; }
  .market-company-bench, .market-inventory { grid-template-columns: 82px minmax(0, 1fr); gap: 3px; padding: 3px; }
  .bench-recruit { grid-template-columns: 21px 1fr; padding: 2px 3px; }
  .bench-recruit > span { width: 20px; height: 24px; }
  .market-offer-card { grid-template-columns: 28px 1fr auto; gap: 3px; padding: 3px; }
  .market-offer-card .row-avatar { width: 27px; height: 33px; min-height: 0; }
  .market-offer-card p { display: none; }
  .inventory-slot span { font-size: 9px; }
  .reference-informed-market .market-footer { gap: 3px; }
  .charter-composition, .chronicle-composition, .oath-composition, .oath-result-composition { padding: 1.7% 2.3% 3%; }
  .charter-composition { grid-template-rows: auto 43px minmax(0, 1fr); gap: 4px; }
  .charter-heading h2, .chronicle-heading h2, .oath-heading h2, .oath-result-composition h2 { font-size: 12px; }
  .charter-heading p, .chronicle-heading p, .oath-heading p, .oath-result-composition header p { display: none; }
  .renown-balance { min-width: 82px; padding: 4px 5px; }
  .renown-balance strong { font-size: 17px; }
  .charter-seal { min-width: 65px; height: 35px; padding: 2px 3px; }
  .charter-track > i { width: 8px; flex-basis: 8px; }
  .charter-workspace { gap: 4px; }
  .charter-packet { padding: 3px 4px; }
  .charter-packet small { display: none; }
  .charter-review { gap: 2px; padding: 5px; }
  .charter-review h3 { font-size: 9px; }
  .charter-review p { font-size: 6px; }
  .charter-review dl > div { grid-template-columns: 55px 1fr; padding: 2px; font-size: 5px; }
  .charter-review .stage-primary, .charter-review .stage-secondary { min-height: 20px; padding: 2px 4px; font-size: 5px; }
  .archive-contract { padding: 3px 5px; }
  .archive-contract > span { width: 18px; height: 18px; }
  .chronicle-choice { padding: 6px; }
  .chronicle-choice strong { font-size: 9px; }
  .chronicle-choice p { font-size: 6px; }
  .chronicle-review { padding: 3px 5px; }
  .chronicle-review .stage-primary, .chronicle-review .stage-secondary { min-height: 21px; }
  .oath-workspace { gap: 4px; }
  .oath-laws { gap: 3px; }
  .oath-law { padding: 5px; }
  .oath-law strong { font-size: 8px; }
  .oath-law p { font-size: 6px; }
  .oath-review { gap: 2px; padding: 5px; }
  .oath-review h3 { font-size: 9px; }
  .oath-result-grid { gap: 3px; }
  .oath-result-grid article { padding: 5px; }
  .oath-result-composition footer .stage-primary, .oath-result-composition footer .stage-secondary { min-height: 21px; padding: 2px 4px; font-size: 5px; }
}

@container stage (max-width: 480px) {
  .game-hud { height: 32px; }
  .stage-body { inset: 32px 0 0; }
  .hud-left strong, .save-state, .concept-label { display: none; }
  .opening-composition, .creation-review, .contract-composition, .market-composition, .market-review, .item-review, .party-composition, .risk-board, .risk-review, .battle-composition, .battle-static, .result-composition, .loss-composition, .reward-composition, .recovery-composition, .guild-composition, .forecast-composition, .system-workspace, .progress-composition, .records-composition, .generic-composition, .charter-composition, .chronicle-composition, .oath-composition, .oath-result-composition { padding: 2% 2.5% 3%; }
  .opening-title { max-width: 80%; }
  .opening-title .stage-kicker { display: none; }
  .opening-title h2 { font-size: 10px; }
  .offer-grid { grid-template-columns: repeat(4, 1fr); height: 68%; gap: 2px; }
  .offer-copy { padding: 2px; }
  .offer-copy strong { font-size: 6px; }
  .profession-seal { font-size: 5px; }
  .offer-actions { min-height: 19px; padding: 1px; }
  .offer-actions > button:not(.stage-icon) { min-height: 17px; padding: 1px 2px; font-size: 5px; }
  .offer-actions .stage-icon { display: none; }
  .offer-actions { grid-template-columns: 1fr; }
  .opening-footer .stage-secondary { display: none; }
  .selection-count span { display: none; }
  .contract-sheet dl > div:nth-child(n+3) { display: none; }
  .creation-review { width: 90%; min-height: 90%; padding: 6px 8px; }
  .unchosen-strip { display: none; }
  .recruit-marker { padding: 2px; }
  .recruit-silhouette { width: 25px; height: 29px; }
  .market-composition { padding-bottom: 3%; }
  .market-heading h2 { font-size: 9px; }
  .company-meter { padding: 3px; }
  .company-meter span { display: none; }
  .company-meter strong { font-size: 10px; }
  .market-tabs { height: 20px; margin-top: 2px; }
  .market-tabs button { padding: 2px 4px; font-size: 5px; }
  .market-surface { height: 72%; grid-template-columns: 1.25fr .75fr; gap: 2px; }
  .market-list { padding: 2px; }
  .market-row { min-height: 0; }
  .market-row em, .fit-read { display: none; }
  .market-inspect h3 { font-size: 8px; }
  .market-inspect .stage-primary { min-height: 18px; font-size: 5px; }
  .market-review { grid-template-columns: .6fr 1fr .7fr; gap: 2px; }
  .review-figure, .review-facts, .party-impact { padding: 4px; }
  .review-facts h2 { font-size: 10px; }
  .review-facts h3, .party-impact p, .party-impact small, .review-facts p { display: none; }
  .stat-radar { grid-template-columns: repeat(2, 1fr); }
  .party-impact > strong { font-size: 9px; }
  .item-review { gap: 2px; }
  .item-review > div, .item-review > aside { padding: 5px; }
  .item-object { font-size: 30px; }
  .item-review h2 { font-size: 9px; }
  .item-review p, .item-review aside span { display: none; }
  .equipment-composition { grid-template-columns: .9fr .55fr 1fr; gap: 2px; padding: 2%; }
  .equipment-list, .equipment-wearer, .equipment-delta { padding: 4px; }
  .equipment-row { min-height: 28px; }
  .equipment-row:nth-of-type(n+4) { display: none; }
  .equipment-wearer .large-figure { width: 36px; height: 44px; }
  .equipment-wearer strong { font-size: 7px; }
  .equipped-slot, .equipment-delta p { display: none; }
  .equipment-delta h2 { font-size: 8px; }
  .party-title .stage-kicker, .party-title p, .cord-label { display: none; }
  .party-title h2 { font-size: 9px; }
  .party-cord { top: 24%; height: 74px; }
  .party-cord::before { top: 48px; }
  .party-actor { min-width: 34px; height: 55px; padding: 2px; }
  .actor-figure { width: 20px; height: 24px; }
  .party-actor > strong, .party-actor > em { display: none; }
  .party-tools .stage-icon { display: none; }
  .party-tools { right: 2%; bottom: 3%; }
  .risk-heading h2 { font-size: 9px; }
  .risk-options { height: 70%; gap: 2px; margin-top: 3px; }
  .risk-option { padding: 3px; }
  .risk-option > span { width: 17px; height: 17px; font-size: 6px; }
  .risk-option strong { font-size: 7px; }
  .risk-option div b { display: none; }
  .risk-compare { min-height: 24px; margin-top: 2px; padding: 2px; }
  .risk-compare b:nth-of-type(n+2) { display: none; }
  .risk-review { width: 92%; }
  .risk-review h2 { font-size: 10px; }
  .risk-review p { display: none; }
  .threat-band span:nth-child(n+3) { display: none; }
  .threat-band { grid-template-columns: repeat(2, 1fr); }
  .mini-party-line { margin: 3px 0; padding: 2px; }
  .battle-objective .stage-kicker, .playback-tools .stage-icon { display: none; }
  .battle-objective h2 { font-size: 8px; }
  .battle-life-rule { margin-top: 2px; padding: 2px 3px; font-size: 5px; }
  .battle-line { top: 20%; bottom: 15%; gap: 1px; }
  .allied-line { gap: 1px; }
  .allied-line .party-actor { min-width: 26px; height: 42px; padding: 1px; }
  .allied-line .actor-figure { width: 16px; height: 19px; }
  .enemy-line { gap: 1px; }
  .enemy-actor { min-width: 25px; height: 35px; }
  .enemy-actor.elite { min-width: 31px; height: 45px; }
  .forecast-arrow { padding: 2px; font-size: 5px; }
  .caption-line { display: none; }
  .inspect-sheet { top: 7%; bottom: 4%; width: 43%; padding: 4px; }
  .inspect-sheet h3 { font-size: 8px; }
  .inspect-sheet .stage-kicker, .inspect-sheet dl > div:nth-child(n+2) { display: none; }
  .battle-sheet { top: 3%; width: 43%; padding: 5px; }
  .battle-sheet h2 { font-size: 8px; }
  .result-title { grid-template-columns: 45px 1fr; }
  .result-title h2 { font-size: 9px; }
  .result-title p { display: none; }
  .outcome-seal { font-size: 7px; border-width: 2px; }
  .causal-timeline { margin-top: 3px; padding: 3px; }
  .expected-track, .actual-track { grid-template-columns: 42px repeat(3, 1fr); gap: 1px; }
  .expected-track span, .actual-track span { min-height: 20px; padding: 1px; font-size: 5px; }
  .result-effects { margin-top: 2px; }
  .loss-composition { gap: 3px; }
  .fallen-figure span { width: 44px; height: 57px; font-size: 12px; }
  .loss-record { padding: 5px; }
  .loss-record h2 { font-size: 10px; }
  .loss-record > p, .loss-record > small { display: none; }
  .reward-heading h2, .recovery-heading h2 { font-size: 9px; }
  .recovery-heading p { display: none; }
  .reward-options, .recovery-paths { height: 72%; gap: 2px; margin-top: 3px; }
  .reward-option, .recovery-path { padding: 3px; }
  .guild-pressure h2 { font-size: 9px; }
  .guild-pressure p { display: none; }
  .guild-destinations { top: 20%; gap: 2px; }
  .guild-destinations button { min-height: 34px; padding: 3px; font-size: 6px; }
  .muster-strip { bottom: 5%; }
  .muster-strip .party-actor { min-width: 32px; height: 40px; }
  .receipt-strip { display: none; }
  .forecast-sheets { height: 74%; margin-top: 4px; gap: 2px; }
  .forecast-sheets article { padding: 4px; }
  .forecast-sheets h3 { font-size: 8px; }
  .forecast-sheets p { display: none; }
  .system-workspace { gap: 2px; }
  .system-workspace > h2 { font-size: 10px; }
  .system-row { min-height: 28px; }
  .system-workspace aside { padding: 4px; }
  .system-workspace aside p { display: none; }
  .records-composition { gap: 2px; }
  .records-categories, .record-grid, .record-inspect { padding: 3px; }
  .records-categories button:nth-child(n+6) { display: none; }
  .record-inspect p, .record-inspect b, .record-inspect span:not(.large-figure) { display: none; }
  .settings-rail, .settings-workspace { padding: 4px; }
  .settings-rail button { min-height: 20px; font-size: 5px; }
  .settings-workspace h2 { font-size: 9px; }
  .setting-control { min-height: 26px; }
  .setting-control small { display: none; }
  .generic-decision { padding: 5px; }
  .generic-decision h2 { font-size: 9px; }
  .generic-decision p { display: none; }
  .reference-informed-market { grid-template-rows: 26px minmax(0, 1fr) 21px; }
  .reference-informed-market .market-heading .stage-kicker { display: none; }
  .reference-informed-market .market-heading h2 { font-size: 7px; }
  .reference-informed-market .company-meter { padding: 1px 3px; }
  .reference-informed-market .company-meter span { display: none; }
  .reference-informed-market .company-meter strong { font-size: 8px; }
  .market-board { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: 31px minmax(0, 1fr) 28px; gap: 1px; }
  .market-company-bench, .market-inventory { grid-template-columns: 1fr; padding: 1px; }
  .market-company-bench > header, .market-inventory > header { display: none; }
  .market-company-bench > div { gap: 1px; }
  .bench-recruit { grid-template-columns: 15px 1fr; gap: 1px; padding: 1px; }
  .bench-recruit > span { width: 14px; height: 18px; font-size: 4px; }
  .bench-recruit strong { font-size: 4px; }
  .bench-recruit small { display: none; }
  .market-tool-rail { gap: 1px; }
  .market-tool-rail button { padding: 1px; font-size: 3px; border-left-width: 1px; }
  .market-offer-cards { gap: 1px; }
  .market-offer-card { grid-template-columns: 17px 1fr auto; gap: 1px; padding: 1px 2px; border-width: 1px; border-bottom-width: 2px; }
  .market-offer-card .row-avatar { width: 16px; height: 21px; min-height: 0; font-size: 4px; }
  .market-offer-card div > small, .market-offer-card em, .market-offer-card p { display: none; }
  .market-offer-card strong { font-size: 4px; }
  .market-offer-card > b { font-size: 5px; }
  .market-offer-card > b small { font-size: 3px; }
  .market-inventory > div { gap: 1px; }
  .inventory-slot { padding: 0; }
  .inventory-slot span { font-size: 6px; }
  .inventory-slot small { display: none; }
  .reference-informed-market .market-footer { gap: 1px; font-size: 3px; }
  .reference-informed-market .market-footer span { font-size: 3px; }
  .reference-informed-market .market-footer .stage-primary, .reference-informed-market .market-footer .stage-secondary { min-height: 17px; padding: 1px 2px; font-size: 3px; }
  .charter-composition { grid-template-rows: 24px 29px minmax(0, 1fr); gap: 2px; }
  .charter-heading .stage-kicker, .charter-heading p, .renown-balance small { display: none; }
  .charter-heading h2 { font-size: 8px; }
  .renown-balance { min-width: 58px; grid-template-columns: 1fr auto; padding: 2px 3px; }
  .renown-balance span { font-size: 5px; }
  .renown-balance strong { font-size: 12px; }
  .charter-track { padding: 1px; }
  .charter-seal { min-width: 43px; height: 25px; padding: 1px 2px; }
  .charter-seal strong, .charter-seal em { display: none; }
  .charter-seal span { font-size: 5px; }
  .charter-track > i { width: 3px; flex-basis: 3px; height: 1px; }
  .charter-workspace { grid-template-columns: 1fr .85fr; gap: 2px; }
  .charter-section-title { grid-template-columns: auto 1fr; gap: 2px; }
  .charter-section-title small { display: none; }
  .charter-section-title strong { font-size: 7px; }
  .charter-packets { gap: 2px; }
  .charter-packet { grid-template-columns: 1fr auto; padding: 2px; }
  .charter-packet span { font-size: 4px; }
  .charter-packet strong { font-size: 5px; }
  .charter-packet b { font-size: 5px; }
  .charter-review { padding: 3px; }
  .charter-review .stage-kicker, .charter-review p, .charter-review dl > div:nth-child(1) { display: none; }
  .charter-review h3 { font-size: 6px; }
  .charter-review dl { margin: 0; }
  .charter-review dl > div { grid-template-columns: 33px 1fr; font-size: 4px; }
  .no-power-boundary, .no-carryover { padding: 2px; font-size: 4px; }
  .charter-review > div:last-child .stage-secondary { display: none; }
  .chronicle-composition { grid-template-rows: 22px 28px minmax(0, 1fr) 29px; gap: 2px; }
  .chronicle-heading .stage-kicker { display: none; }
  .chronicle-heading h2 { font-size: 8px; }
  .archive-contract { padding: 2px 3px; }
  .archive-contract p { overflow: hidden; font-size: 4px; white-space: nowrap; text-overflow: ellipsis; }
  .archive-contract strong { font-size: 5px; }
  .archive-contract > span { width: 14px; height: 14px; }
  .chronicle-choices { gap: 2px; }
  .chronicle-choice { grid-template-columns: 18px 1fr; gap: 1px 3px; padding: 3px; }
  .chronicle-choice > span { width: 17px; height: 17px; font-size: 5px; }
  .chronicle-choice small { font-size: 4px; }
  .chronicle-choice strong { font-size: 6px; }
  .chronicle-choice p { font-size: 4px; }
  .chronicle-review { grid-template-columns: 1fr auto; gap: 2px; padding: 2px; }
  .chronicle-review > div strong { display: none; }
  .chronicle-review .stage-secondary { display: none; }
  .chronicle-review .stage-primary { min-height: 20px; padding: 2px 4px; font-size: 5px; }
  .oath-composition { gap: 2px; }
  .oath-heading .stage-kicker, .oath-heading p { display: none; }
  .oath-heading h2 { font-size: 8px; }
  .oath-heading .stage-secondary { min-height: 20px; padding: 2px 4px; font-size: 5px; }
  .oath-workspace { grid-template-columns: 1.3fr .7fr; gap: 2px; }
  .oath-laws { gap: 2px; }
  .oath-law { gap: 1px; padding: 2px; }
  .oath-law > span, .oath-law em { font-size: 4px; }
  .oath-law strong { font-size: 5px; }
  .oath-law p { display: none; }
  .oath-review { padding: 3px; }
  .oath-review .stage-kicker { display: none; }
  .oath-review h3 { font-size: 7px; }
  .oath-review .sheet-row { min-height: 17px; padding: 1px 2px; font-size: 4px; }
  .oath-review .stage-primary { min-height: 19px; font-size: 4px; }
  .oath-result-composition { gap: 2px; }
  .oath-result-composition header .stage-kicker, .oath-result-composition header p { display: none; }
  .oath-result-composition h2 { font-size: 8px; }
  .oath-result-grid { gap: 2px; }
  .oath-result-grid article { gap: 1px; padding: 3px; }
  .oath-result-grid article > span { width: 15px; height: 15px; font-size: 4px; }
  .oath-result-grid article strong { font-size: 5px; }
  .oath-result-grid article p { font-size: 4px; }
  .oath-result-composition footer > strong { display: none; }
  .variant-sheet { width: 90%; padding: 6px; }
  .variant-sheet h2 { font-size: 9px; }
  .variant-sheet p { font-size: 6px; }
}

@media (max-width: 1160px) {
  :root { --sidebar: 226px; }
  main { padding: 18px; }
  .screen-browser { grid-template-columns: 180px minmax(0, 1fr); gap: 12px; }
  .catalog-layout { grid-template-columns: 260px minmax(0, 1fr); }
  .region-title h2 { font-size: 26px; }
  .fidelity-comparison { gap: 14px; }
}

@media (max-width: 880px) {
  :root { --sidebar: 272px; --topbar: 54px; }
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar); transform: translateX(-102%); transition: transform .18s ease; box-shadow: 12px 0 32px rgba(0,0,0,.28); }
  .sidebar.is-open { transform: translateX(0); }
  .mobile-only { display: inline-grid; }
  .brand-block { grid-template-columns: 34px 42px 1fr; }
  .brand-block > .icon-button { width: 34px; height: 34px; color: var(--white); background: transparent; border-color: #60727a; }
  .topbar { padding: 6px 12px; }
  main { padding: 16px; }
  .view-heading h1 { font-size: 23px; }
  .screen-browser { grid-template-columns: 1fr; }
  .screen-index { position: static; display: flex; max-height: none; overflow-x: auto; }
  .screen-index button { min-width: 155px; border-left: 0; border-bottom: 4px solid transparent; }
  .screen-index button.is-active { border-bottom-color: var(--work-gold); }
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-art { position: static; display: grid; grid-template-columns: minmax(180px, .7fr) 1fr; }
  .catalog-art > img { aspect-ratio: 16/9; }
  .catalog-art > div { border-top: 0; border-left: 1px solid var(--line); }
  .region-intel { grid-template-columns: 1fr 1fr; }
  .region-intel article:last-child { grid-column: 1 / 3; }
  .fidelity-comparison { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .evidence-badge, .breadcrumbs > span, .breadcrumbs > b { display: none; }
  .top-actions { gap: 4px; }
  .locale-control button { min-height: 30px; padding: 3px 7px; font-size: 10px; }
  main { padding: 12px; }
  .view-heading { min-height: 58px; margin-bottom: 10px; }
  .view-heading h1 { font-size: 19px; }
  .view-heading p { display: none; }
  .heading-badges span:nth-child(n+2) { display: none; }
  .firstplay-controls { grid-template-columns: 1fr 1fr; gap: 8px; }
  .flow-progress { grid-column: 1 / 3; grid-row: 1; justify-content: start; }
  .page-command { min-height: 40px; }
  .screen-tools { grid-template-columns: 1fr; }
  .screen-index button { min-width: 132px; }
  .authority-summary { grid-template-columns: 1fr; }
  .authority-summary > div { min-height: auto; }
  .region-stage { aspect-ratio: 16/9; }
  .region-title { width: 62%; }
  .region-title h2 { font-size: 19px; }
  .region-title p { display: none; }
  .region-route { left: 20%; }
  .region-route button { min-width: 58px; min-height: 32px; font-size: 7px; }
  .region-intel { grid-template-columns: 1fr; }
  .region-intel article, .region-intel article:last-child { grid-column: auto; min-height: auto; }
  .catalog-toolbar { display: grid; }
  .search-control { min-width: 0; }
  .catalog-art { display: block; }
  .catalog-entry { grid-template-columns: 1fr 30px; gap: 7px; }
  .catalog-entry > p { grid-column: 1 / 3; }
  .review-groups article { grid-template-columns: 42px 1fr; gap: 10px; }
  .review-groups article > span { width: 38px; height: 38px; }
  .review-groups .page-command { grid-column: 2; justify-self: start; }
  .review-boundary { grid-template-columns: 1fr; }
  .reference-selector button { min-width: 136px; }
  .fidelity-decisions { grid-template-columns: 1fr; }
  .fidelity-decisions article { min-height: auto; }
  #dialog-stage { min-width: 520px; }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 920px) {
  :root { --topbar: 44px; }
  .topbar { min-height: 44px; }
  .topbar .icon-button { width: 34px; height: 34px; }
  main { padding: 7px 10px; }
  .view-heading { min-height: 31px; align-items: center; margin-bottom: 5px; }
  .view-heading .eyebrow, .view-heading p, .heading-badges { display: none; }
  .view-heading h1 { margin: 0; font-size: 14px; }
  .firstplay-view .stage-wrap, .screens-view .stage-wrap { width: min(100%, calc((100svh - 132px) * 16 / 9)); }
  .firstplay-controls { min-height: 38px; grid-template-columns: auto 1fr auto; margin-top: 4px; }
  .flow-progress { grid-column: auto; grid-row: auto; }
  .flow-progress button { height: 22px; }
  .page-command { min-height: 32px; padding: 4px 8px; font-size: 8px; }
  .screen-tools { grid-template-columns: 1fr auto; margin-bottom: 4px; }
  .filter-scroll button, .variant-control button { min-height: 27px; padding: 3px 6px; }
  .screen-browser { display: block; }
  .screen-index { display: none; }
  .screen-pager, .authority-summary { display: none; }
  .regions-view .view-heading, .catalog-view .view-heading, .reference-view .view-heading, .review-view .view-heading { display: none; }
  .region-tabs, .catalog-tabs { margin-bottom: 4px; }
  .region-tabs button, .catalog-tabs button { min-height: 34px; }
  .reference-selector { margin-bottom: 4px; }
  .reference-selector button { min-height: 40px; }
  .fidelity-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .reference-panel > header, .adaptation-panel > header { min-height: 42px; padding: 4px 6px; }
  .reference-panel > header h2, .adaptation-panel > header h2 { font-size: 10px; }
  .reference-panel > header p, .adaptation-panel > header p { display: none; }
  .fidelity-decisions { display: none; }
}

.high-contrast { --ink-950: #090d0f; --ink-840: #111b1f; --mist-050: #fff; --mist-120: #eef5f3; --line: rgba(0,0,0,.34); --line-strong: rgba(0,0,0,.62); }
.low-power .stage-art { filter: saturate(.7) contrast(.92); }
.reduced-motion * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}