/* Final presentation rules: readability, state clarity and device edges. */
:root{--ui-border:#8db9c54d;--ui-muted:#adc5d0;--ui-safe-bottom:env(safe-area-inset-bottom,0px)}
button,summary,a,input,select{-webkit-tap-highlight-color:transparent}
summary{touch-action:manipulation}
summary:focus-visible{outline:2px solid #a6e9dc;outline-offset:3px;border-radius:8px}
button:disabled:not(.component-button){filter:saturate(.5);opacity:.65}
:is(.project-card,.relic-card,.ops-card,.campaign-card,.inventory-item,.fleet-card){min-width:0}
:is(.project-card,.relic-card,.ops-card,.campaign-card) :is(h2,h3,strong){overflow-wrap:anywhere}
:is(.view-heading,.station-section-heading) p{color:var(--ui-muted);line-height:1.55}
.station-dashboard>.station-metric::before{display:none}
.station-metric .metric-glyph{position:absolute;left:16px;top:26px;width:26px;height:26px;color:#9ddfd3}
.station-metric strong{font-variant-numeric:tabular-nums}
.station-metric strong small{white-space:nowrap}
#yard-dashboard .station-metric:last-child .metric-glyph{color:#f1c68b}
.ui-explanation>summary::after{content:"+";margin-left:auto;font-size:18px;line-height:1}
.ui-explanation[open]>summary::after{content:"−"}
.ui-explanation>summary::-webkit-details-marker{display:none}
.ui-explanation[open]{padding-bottom:8px;border-bottom:1px solid #91b7c52b}
.ui-explanation p+p{margin-top:8px}
.project-card .upgrade-pips{margin-top:12px}
.project-card>button:disabled{box-shadow:none}
.ship-logs details{border-radius:14px;overflow:hidden}
.ship-logs summary{min-height:48px;padding:16px;line-height:1.4}
.ship-logs details[open]{border-color:#82b6b977;background:#153340}
.relic-card.found{border-color:#97dccc!important;box-shadow:inset 0 2px #8ed7c3,0 8px 20px #0004!important}
.archive-hint{border-radius:14px;line-height:1.6;background:#102b36d9;color:#b8ced7}
#game-dialog{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#5c8494 #0b1c26;scroll-padding-top:80px}
#game-dialog::backdrop{background:#02090ec7;backdrop-filter:blur(7px)}
#game-dialog #dialog-title{line-height:1.15;overflow-wrap:anywhere}
#game-dialog .dialog-head{z-index:5}
#game-dialog .station-banner{min-height:116px;margin-bottom:18px}
#game-dialog .dialog-stats{gap:8px}
#game-dialog .dialog-stats>div{min-width:0}
#game-dialog :is(.dialog-stats strong,.order-reward,.setting-range output){font-variant-numeric:tabular-nums}
#game-dialog :is(.primary-button,.secondary-button,.small-action){line-height:1.4;white-space:normal}
#game-dialog .settings-danger{border:1px solid #cf87705e;border-radius:14px;padding:18px;background:#46291e24}
#game-dialog .settings-danger button{border-color:#c18a7377}
#game-dialog input[type="range"]{width:100%;margin:6px 0}
body[data-view="salvage"] .action-dock .button-icon svg{width:23px;height:23px}
body[data-view="salvage"] .action-dock .hold-button:disabled{background:#172a34;color:#b8cbd3;border-color:#69818b;box-shadow:none;transform:none;opacity:.8}
body[data-view="salvage"] .action-dock .hold-button.working{background:linear-gradient(145deg,#ffe1a5,#dbaa57);color:#10242c;opacity:1;filter:none;box-shadow:0 0 18px #e8b66050}
body[data-view="salvage"] .yard-stations button{position:relative}
body[data-view="salvage"] .yard-stations :is(#hud-storage,#hud-orders){display:block;position:absolute;top:-4px;right:-7px;min-width:24px;padding:3px 5px;border:1px solid #7d9eac7a;border-radius:8px;background:#0c222eea;color:#d4e6eb;font:8px var(--mono);box-shadow:0 2px 5px #0007}
body[data-view="salvage"] .yard-stations #hud-orders{font-size:8px}
body.high-contrast :is(.project-card,.relic-card,.ops-card,.campaign-card,.bay-summary){background:#081923!important;border-color:#a6c8d4!important}
body.high-contrast :is(.station-dashboard>.station-metric,.yard-stations button>span){background:#0b202c!important;border-color:#a6c8d4!important}
body.high-contrast :is(.ui-explanation,.view-intro,.archive-hint,.settings-note,.hold-note){color:#d9edf4!important}
body.high-contrast #game-dialog{background:#071721;border-color:#b1d0d9}
body.high-contrast[data-view="salvage"] .action-dock{background:#071923;border-color:#a6c8d4}
@media(hover:hover) and (pointer:fine){
 .project-card:not(:has(button:disabled)):hover,.relic-card.found:hover{border-color:#a3d7cd!important}
 .ui-explanation>summary:hover,.ship-logs summary:hover{color:#ddfff5;background:#a2d4d40a}
 body[data-view="salvage"] .yard-stations button:hover>span{border-color:#b4e9df;background:linear-gradient(145deg,#365d69,#1c3b47)}
}
@media(max-width:760px){
 .station-metric .metric-glyph{left:11px;top:26px;width:21px;height:21px}
 body[data-view="salvage"] .action-dock{bottom:calc(8px + var(--ui-safe-bottom))}
 body[data-view="salvage"] .view-tabs{bottom:calc(var(--dock-height) + 20px + var(--ui-safe-bottom))}
 body[data-view="salvage"] .yard-stations{bottom:calc(var(--dock-height) + 84px + var(--ui-safe-bottom));gap:14px}
 body[data-view="salvage"] .yard-stations :is(#hud-storage,#hud-orders){right:0;top:-3px;font-size:8px}
 body[data-view="salvage"] .canvas-wrap{bottom:calc(var(--dock-height) + 168px + var(--ui-safe-bottom))}
 body[data-view="salvage"] .topbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
 #game-dialog{max-height:calc(100svh - 16px - var(--ui-safe-bottom));scroll-padding-top:66px}
 #game-dialog #dialog-title{font-size:26px;padding:18px 18px 16px}
 #game-dialog #dialog-body{padding:0 16px 22px}
 #game-dialog .station-banner{min-height:98px}
 #game-dialog .station-banner .station-art{width:64px;height:64px;flex-basis:64px}
 #game-dialog .station-banner strong{font-size:16px}
 #game-dialog .fleet-card h3{font-size:18px}
 #game-dialog .fleet-card>div{padding:12px}
 #game-dialog .settings-section{padding:14px}
 .collection-view .relic-card>small{display:block;line-height:1.5}
 .campaign-card small{font-size:12px;line-height:1.55}
 .campaign-card p{font-size:13px;line-height:1.6}
 .view-heading p{font-size:13px}
}
@media(prefers-reduced-motion:reduce){#game-dialog::backdrop{backdrop-filter:none}}
body[data-view="salvage"] .yard-stations{top:auto}
@media(min-width:761px) and (max-width:980px) and (max-height:600px){
 body[data-view="salvage"] .game-shell{min-height:780px}
 body[data-view="salvage"] .inspector[open]{max-height:340px}
 body[data-view="salvage"] .mission-panel:has(details[open]){max-height:350px}
 body[data-view="salvage"] .action-dock{left:120px;right:18px;width:auto}
}
@media(max-width:360px){
 body[data-view="salvage"] .view-tabs button{font-size:8px}
 body[data-view="salvage"] .view-tabs .nav-glyph{width:19px;height:19px}
 body[data-view="salvage"] .view-tabs{height:60px}
}
body[data-view="salvage"] .inspector:not([open]){max-height:none}
body[data-view="salvage"] .mission-details:not([open]){display:block}
@media(min-width:761px) and (max-width:980px) and (max-height:600px){
 body[data-view="salvage"] .mission-panel{max-height:220px}
 body[data-view="salvage"] .control-panel{top:202px;right:18px}
}
/* Guided learning and late-game activity use the same equipment language. */
body[data-view="salvage"] .tutorial-panel{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:5px 14px;padding:12px 16px;align-items:center}
body[data-view="salvage"] .tutorial-art{grid-column:1;grid-row:1 / span 2;width:60px;height:70px;filter:drop-shadow(0 4px 6px #0008)}
body[data-view="salvage"] .tutorial-panel>div{grid-column:2;grid-row:1 / span 2;min-width:0}
body[data-view="salvage"] #tutorial-action{grid-column:3;grid-row:1;min-height:44px;margin:0}
body[data-view="salvage"] #tutorial-dismiss{grid-column:3;grid-row:2;min-height:32px;margin:0}
.tutorial-counter{display:block;font:8px var(--mono);letter-spacing:1.6px;color:#90c7bc;margin-bottom:5px}
.tutorial-steps{display:flex;gap:4px;margin:5px 0 9px}
.tutorial-steps i{width:18px;height:3px;background:#54727b;border-radius:3px}
.tutorial-steps i.done{background:#90d8c4}
.tutorial-steps i.current{background:#f4c785;box-shadow:0 0 6px #f4c78577}
body[data-view="salvage"] .tutorial-panel p{font-size:11px;line-height:1.5}
body[data-view="salvage"] .tutorial-focus{outline:2px solid #a3eadb!important;outline-offset:4px}
body[data-view="salvage"] .hud-state{position:relative;grid-column:1 / -1;grid-row:1;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px 12px;background:#112d39;border:1px solid #72a5b350;border-radius:14px;overflow:hidden}
.hud-state[hidden]{display:none!important}
.hud-state>span svg{width:26px;height:26px;color:#9bded1}
.hud-state strong{display:block;font-size:12px;font-weight:600;color:#ddf4ed}
.hud-state small{display:block;font-size:10px;line-height:1.45;color:#aec7cf;margin-top:3px}
body[data-view="salvage"] .hud-state .small-action{min-height:44px;padding:8px 12px;border:1px solid #8dbcb760;border-radius:10px;background:#2c514e;font-size:11px;white-space:normal}
.hud-state::after{content:"";position:absolute;bottom:0;left:0;width:var(--state-progress,0%);height:3px;background:#92dbce}
body[data-view="salvage"] .hud-state[data-kind="warning"]{border-color:#d8ac6977;background:#372b1d}
.hud-state[data-kind="warning"] strong,.hud-state[data-kind="warning"]>span svg{color:#ffdb9e}
body[data-view="salvage"] .hud-state[data-kind="reward"]{border-color:#9dd9ac77;background:#1b3931}
body[data-view="salvage"] .action-dock:has(.hud-state:not([hidden])) .tool-picker{grid-row:2 / span 4}
body[data-view="salvage"] .action-dock:has(.hud-state:not([hidden])) .dock-selection{grid-row:2}
body[data-view="salvage"] .action-dock:has(.hud-state:not([hidden])) .hold-button{grid-row:3}
body[data-view="salvage"] .action-dock:has(.hud-state:not([hidden])) .hold-note{grid-row:4}
body[data-view="salvage"] .action-dock:has(.hud-state:not([hidden])) #assembly-work{grid-row:5}
body[data-view="salvage"] .action-dock:has(.hud-state:not([hidden])) .risk-button{grid-row:6}
@media(min-width:761px){body.has-hud-state[data-view="salvage"] .canvas-wrap{bottom:calc(var(--dock-height) + 64px)}body.has-hud-state[data-view="salvage"] .recycle-button{bottom:calc(var(--dock-height) + 42px)}}
@media(max-width:1150px) and (min-width:761px){body[data-view="salvage"] .tutorial-panel{grid-template-columns:48px minmax(0,1fr);gap:8px}body[data-view="salvage"] .tutorial-art{width:48px;height:60px;grid-row:1}body[data-view="salvage"] .tutorial-panel>div{grid-row:1}body[data-view="salvage"] #tutorial-action{grid-column:2;grid-row:2}body[data-view="salvage"] #tutorial-dismiss{grid-column:1;grid-row:2}}
@media(max-width:760px){
 body[data-view="salvage"] .tutorial-panel{grid-template-columns:48px minmax(0,1fr);gap:6px 10px;padding:12px}
 body[data-view="salvage"] .tutorial-art{width:48px;height:64px;grid-row:1}
 body[data-view="salvage"] .tutorial-panel>div{grid-row:1;grid-column:2}
 body[data-view="salvage"] #tutorial-action{grid-column:2;grid-row:2;min-height:44px}
 body[data-view="salvage"] #tutorial-dismiss{grid-column:1;grid-row:2;min-height:44px;padding:6px 0;font-size:10px}
 body[data-view="salvage"] .tutorial-panel strong{font-size:12px;line-height:1.3;display:block}
 body[data-view="salvage"] .tutorial-panel p{font-size:11px;margin-top:5px}
 .tutorial-steps{margin-bottom:7px}
 body[data-view="salvage"] .hud-state{padding:9px 8px 12px;gap:8px;grid-template-columns:22px minmax(0,1fr) 78px}
 .hud-state>span svg{width:22px;height:22px}
 .hud-state strong{font-size:11px}
 .hud-state small{font-size:10px}
 body[data-view="salvage"] .hud-state .small-action{padding:6px;font-size:10px}
 body[data-view="salvage"] .action-dock:has(.hud-state:not([hidden])) .tool-picker{grid-row:3}
 body[data-view="salvage"] .action-dock:has(.hud-state:not([hidden])) .dock-selection{grid-row:2}
 body[data-view="salvage"] .action-dock:has(.hud-state:not([hidden])) .hold-button{grid-row:4}
 body[data-view="salvage"] .action-dock:has(.hud-state:not([hidden])) .hold-note{grid-row:5}
 body[data-view="salvage"] .action-dock:has(.hud-state:not([hidden])) #assembly-work{grid-row:6}
 body[data-view="salvage"] .action-dock:has(.hud-state:not([hidden])) .risk-button{grid-row:7}
 body.has-hud-state[data-view="salvage"] .game-shell{min-height:970px}
 body.has-hud-state.has-tutorial[data-view="salvage"] .game-shell{min-height:1180px}
 body.android-host .icon-button{min-width:44px;min-height:44px}
 body.android-host button{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
 body.android-host .view-tabs{touch-action:manipulation}
}
body.high-contrast .hud-state{background:#071b25!important;border-color:#b4d5da!important}
body.high-contrast .hud-state small{color:#e0eff3}
/* Activity details now live in the console; keep the ship and station buttons clear. */
body.has-hud-state[data-view="salvage"] .drone-overlay{display:none}