/* Bridge workspace: keep the world in view while the active shipboard workspace changes. */
html,body{height:100%;overflow:hidden}
.shell{height:100dvh;min-height:0;display:flex;flex-direction:column}
.topbar{flex:0 0 85px;position:relative;z-index:4}
#main{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.hero{flex:0 0 clamp(245px,36vh,390px);height:auto;min-height:0;isolation:isolate}
.hero:before{content:"";position:absolute;z-index:1;inset:9px;border:1px solid #d4e3e022;border-radius:3px;pointer-events:none;box-shadow:inset 0 0 55px #050a1060}
.hero-shade{background:linear-gradient(90deg,#08111dec 0,#08111d9c 31%,transparent 67%),linear-gradient(0deg,#08111d 0,transparent 20%)}
.hero-content{padding:34px 36px;width:min(46%,560px)}
.hero-content h1{font-size:clamp(31px,4vw,52px);line-height:1.02;letter-spacing:-1.8px;margin:16px 0 7px;text-wrap:balance}
.hero-content p{max-width:420px;font-size:11px;line-height:1.55;margin:0 0 12px;color:#c2ced4}
.hero-content .button{min-height:38px;padding:8px 13px;font-size:9px}
.hero-view-controls{z-index:3;backdrop-filter:blur(9px);background:#08121ac9;border-color:#c7d8db35}
.orbital-label,.scene-caption,.hero-bottom{z-index:2}
.content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:14px 30px 18px}
.content>.view{min-height:100%;padding-bottom:12px}
.onboarding{padding:9px 13px;margin-bottom:9px;gap:10px}
.onboarding p{font-size:9px;line-height:1.5}
.first-voyage-guidance{padding:10px 14px;margin-bottom:11px;gap:12px}
.first-voyage-guidance .chapter-number{font-size:8px}
.first-voyage-guidance b{font-size:13px}
.first-voyage-guidance p{font-size:9px;line-height:1.45;margin:2px 0 0}
.section-heading{margin-bottom:13px}
.section-heading h2{font-size:22px}
.market-toolbar{padding-bottom:8px}
.market-layout{gap:14px;grid-template-columns:minmax(0,1fr) minmax(280px,330px)}
.market-table td{height:52px;padding:7px 9px}
.market-table th{height:32px}
.dispatch{margin-top:11px;padding:11px 13px}
.bottom-grid{gap:12px;margin-top:14px}
.contract-card,.insight-card{padding:14px}
.workspace-shortcuts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 15px;padding:7px 9px;border:1px solid #263541;background:#0c151e;border-radius:3px}
.workspace-shortcuts a{min-height:34px;display:inline-flex;align-items:center;padding:5px 10px;border:1px solid #34424c;border-radius:2px;color:#c4d0d2;font-size:9px}
.workspace-shortcuts a:hover{border-color:#a58c60;color:#ead6ad;background:#201f1b}
.project-notes{color:#8294a1;font-size:8px;text-decoration:underline;text-underline-offset:3px}
#ship-view>.workspace-shortcuts{margin-top:-2px}
#journal-view>.workspace-shortcuts{margin:0 0 11px}
#journal-view>.section-heading{margin-bottom:8px}
#journal-view .backup-hint{margin:0 0 9px;font-size:10px}
#journal-view .journal-actions{gap:5px}
#journal-view .journal-actions .button{min-height:36px;padding:7px 10px;font-size:9px}
footer{padding:12px 0 4px}
@media(max-width:1100px) and (min-width:761px){
 :root{--side:176px}
 .hero{flex-basis:clamp(225px,34vh,345px)}
 .hero-content{padding:28px 25px;width:52%}
 .content{padding:12px 20px 16px}
 .market-layout{grid-template-columns:minmax(0,1fr) 270px;gap:10px}
 .topbar{padding:0 20px}
 .top-stats{gap:18px}
}
@media(max-width:760px){
 body{height:100dvh}
 .shell{height:calc(100dvh - 69px)}
 .topbar{flex-basis:71px;padding:0 12px}
 .top-stats{gap:9px}
 .top-stats>div>small{font-size:5px}
 .top-stats strong{font-size:11px}
 #main{min-height:0}
 .hero{flex-basis:clamp(190px,31vh,275px)}
 .hero:before{inset:5px}
 .hero-content{padding:24px 17px;width:66%}
 .hero-content .eyebrow{font-size:7px;letter-spacing:1px}
 .hero-content h1{font-size:clamp(27px,7vw,38px);margin:12px 0 5px}
 .hero-content p{font-size:9px;line-height:1.4;margin-bottom:7px;max-width:270px}
 .hero-content .button{min-height:34px;padding:6px 10px;font-size:8px}
 .hero-view-controls{right:9px;bottom:53px;gap:3px;padding:5px}
 .hero-view-controls>span{display:none}
 .hero-view-controls button{min-height:34px;padding:5px 7px;font-size:8px}
 .scene-caption{bottom:39px;left:13px;font-size:7px}
 .orbital-label{right:13px;bottom:66px}
 .hero-bottom{left:13px;right:13px;padding:9px 0;font-size:6px}
 .content{padding:9px 12px 16px;scrollbar-width:thin}
 .onboarding{padding:8px 9px;margin-bottom:8px}
 .first-voyage-guidance{align-items:flex-start;padding:9px 10px;margin-bottom:9px}
 .first-voyage-guidance .button{min-height:38px;padding:7px 8px;font-size:8px;white-space:nowrap}
 .section-heading{margin-bottom:9px}
 .section-heading h2{font-size:19px}
 .market-layout{grid-template-columns:1fr;gap:8px}
 .market-toolbar{align-items:flex-start;padding-bottom:6px}
 .market-table td{height:48px;padding:5px 6px}
 .trade-ticket{padding:12px}
 .ticket-top{margin-bottom:9px}
 .bottom-grid{grid-template-columns:1fr;gap:8px;margin-top:9px}
 .contract-card,.insight-card{padding:11px}
 .workspace-shortcuts{gap:5px;padding:6px;margin-bottom:10px}
 .workspace-shortcuts a{min-height:40px;padding:5px 8px;font-size:9px}
 #ship-view>.workspace-shortcuts{margin-top:0}
 #journal-view>.section-heading{display:block}
 #journal-view .journal-actions{margin-top:9px;display:flex;flex-wrap:wrap}
 #journal-view .journal-actions .button{min-height:40px}
 footer{padding-bottom:7px;font-size:7px}
}
@media(max-height:720px) and (min-width:761px){
 .hero{flex-basis:clamp(205px,31vh,270px)}
 .content{padding-top:9px}
 .first-voyage-guidance{padding:8px 12px}
 .market-table td{height:45px}
}
@media(prefers-reduced-motion:reduce){.hero *,#universe canvas{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media(max-width:980px) and (min-width:761px){:root{--side:72px}}
@media(max-width:760px){.hero-view-controls{top:auto}}
@media(max-width:760px){.sidebar nav{grid-template-columns:repeat(5,minmax(0,1fr))}.hero-view-controls{top:auto}}
.first-voyage-guidance #first-voyage-title:focus{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
/* Destination art gives each Explore view a distinct local identity. */
.port-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;opacity:0;transform:scale(1.025);transition:opacity .55s ease,transform 7s ease;z-index:0;pointer-events:none}
body[data-art-view] .port-art{opacity:.94;transform:scale(1)}
body[data-art-view="orbit"] .port-art{object-fit:contain;object-position:70% 54%;width:min(77%,900px);left:auto;right:0;filter:saturate(.95);opacity:.82}
body[data-art-view="orbit"] #universe{opacity:1}
body[data-art-view="station"] #universe,body[data-art-view="surface"] #universe{opacity:.09}
body[data-art-view="station"] .hero-shade,body[data-art-view="surface"] .hero-shade{background:linear-gradient(90deg,#08111ddd 0,#08111d91 30%,#08111d12 75%),linear-gradient(0deg,#08111d 0,transparent 34%)}
#universe{transition:opacity .45s ease}
body[data-tutorial-target="buy-water"] .market-table tbody tr:first-child td:nth-child(2),body[data-tutorial-target="buy-water"] .market-table tbody tr:first-child td:nth-child(4),body[data-tutorial-target="buy-return"] .market-table tbody tr:nth-child(2) td:nth-child(2),body[data-tutorial-target="buy-return"] .market-table tbody tr:nth-child(2) td:nth-child(4){background:#d6b47d1e;box-shadow:inset 0 0 0 1px #d6b47d9c}
body[data-tutorial-target^="buy-"] .market-table thead th:nth-child(2),body[data-tutorial-target^="buy-"] .market-table thead th:nth-child(4){color:var(--gold)}
body[data-tutorial-target^="buy-"] .market-explanation{border-color:#d6b47d80;box-shadow:0 0 0 1px #d6b47d27}
body[data-tutorial-target^="buy-"] .trade-ticket{border-color:#d6b47d88;box-shadow:0 0 25px #d6b47d16}
.first-voyage-guidance.tutorial-complete{border-color:#81bdad66}
@media(max-width:760px){body[data-art-view="orbit"] .port-art{width:100%;height:76%;top:24%;right:-6%;object-fit:contain;opacity:.75}body[data-art-view="station"] .port-art,body[data-art-view="surface"] .port-art{object-position:center 45%}}
@media(prefers-reduced-motion:reduce){.port-art{transition:none}}