/* Observatory interface. Physics and planet rendering remain in index.html. */
:root{--ink:#edf4ff;--soft:#bccbe0;--dim:#9aaec9;--acc:#91bdff;--pnl:#101c2e;--pnl-line:#2a3c55;--panel-space:352px;color-scheme:dark;}
#app{font:400 16px/1.5 system-ui,sans-serif;background:#05060a;isolation:isolate;}
#app [hidden]{display:none!important;}
#app button,#app a,#app summary{-webkit-tap-highlight-color:transparent;}
#app button:focus-visible,#app a:focus-visible,#app summary:focus-visible,#app input:focus-visible{outline:2px solid #a5ceff;outline-offset:4px;}
#observatory-header{position:absolute;z-index:12;top:0;left:0;right:0;min-height:72px;padding:8px 20px;box-sizing:border-box;display:flex;align-items:center;gap:24px;background:#0b1422f5;border-bottom:1px solid var(--pnl-line);}
.brand{display:flex;align-items:center;gap:14px;flex:1;min-width:180px;}
.brand>a{font-size:24px;color:var(--soft);text-decoration:none;display:grid;place-items:center;width:40px;height:44px;}
.brand h1{font-size:19px;font-weight:650;letter-spacing:-.4px;line-height:1.2;margin:0;white-space:nowrap;}
.brand h1 span{display:block;font-size:10px;font-weight:550;letter-spacing:1.7px;color:var(--dim);margin-top:6px;}
#rail-tabs{padding:0;border:0;gap:6px;flex:none;}
#rail-tabs button{font-size:14px;min-height:44px;padding:10px 18px;flex:none;border-radius:8px;}
#rail-tabs button.on,.header-tools button.on{background:#213855;border-color:#557da8;color:#fff;}
.header-tools{display:flex;gap:4px;flex:1;justify-content:flex-end;}
.header-tools button,.rail-actions button,#help-close{display:grid;place-items:center;width:44px;height:44px;border:1px solid transparent;background:transparent;color:var(--soft);font:500 22px/1 system-ui;cursor:pointer;border-radius:8px;}
.header-tools button:hover,.rail-actions button:hover,#help-close:hover{color:#fff;background:#23364f;}
#rail{top:88px;left:16px;bottom:auto;width:320px;height:auto;max-height:calc(100% - 108px);border:1px solid var(--pnl-line);border-radius:16px;box-sizing:border-box;background:#101c2ef5;box-shadow:0 16px 48px #0005;font:400 16px/1.5 system-ui,sans-serif;overflow:hidden;}
#app.panel-collapsed #rail{display:none;}
.rail-heading{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 20px;border-bottom:1px solid var(--pnl-line);flex:none;}
.rail-heading h2{font-size:16px;font-weight:650;letter-spacing:-.2px;margin:0;}
.rail-actions{display:flex;}
#sheet-expand,#rail-handle{display:none;}
#rail-body{overflow:auto;scrollbar-width:thin;scrollbar-color:#405773 transparent;}
#rail-body section{padding:18px;gap:14px;}
.section-intro{font-size:14px;line-height:1.6;color:var(--soft);margin:0 0 14px;}
.door{padding:19px 2px;}
.door-t{font-size:17px;line-height:1.35;}
.door-s{font-size:14px;line-height:1.5;color:var(--soft);margin-top:6px;}
.door.gold{margin-top:16px;padding:16px 14px;border:1px solid #655731;border-radius:10px;background:#292719;}
.door.gold .door-t::before{box-shadow:none;width:6px;height:6px;}
.door-list{padding:6px 0;border-bottom:0;}
#mission-list{gap:8px;}
#mission-list .act,.door-list .lcard{font-size:15px;line-height:1.5;padding:13px 12px;border:1px solid var(--pnl-line);border-radius:10px;background:#142237;}
#tool-list{gap:8px;}
#tool-list .act,#tool-list .act:first-child{font-size:15px;padding:14px 12px;border:1px solid var(--pnl-line);border-radius:10px;background:#142237;}
#rail .btn{font-size:14px;line-height:1.4;min-height:44px;white-space:normal;}
#rail .panel{font-size:14px;line-height:1.5;}
#rail .panel label{font-size:14px;line-height:1.5;margin-bottom:18px;}
#rail input[type=range]{min-height:28px;margin-top:10px;}
#rail .rail-note{font-size:14px;line-height:1.6;color:var(--soft);}
#rail .note,#rail #add-note,#rail #ev-note,#rail #msg-note,#rail #orbit-title,#rail #nudge-title,#rail #oe-read{font-size:13px;line-height:1.5;}
#rail #edit-head{display:none;}
#rail #sel-hero{flex-direction:column;gap:8px;padding:8px 0 20px;text-align:center;margin:0;}
#rail #sel-planet{width:160px;height:132px;background:transparent;}
#rail #sel-caption{font-size:14px;line-height:1.65;}
#sel-stats,.advanced-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px;}
#rail #sel-stats .st,.advanced-stats .st{padding:12px 10px;border:1px solid #283b55;background:#0b1626;border-radius:10px;min-width:0;}
#rail #sel-stats .v,.advanced-stats .v{display:block;font-size:17px;font-weight:600;line-height:1.4;overflow-wrap:anywhere;}
#rail #sel-stats .l,.advanced-stats .l{display:block;font-size:12px;line-height:1.4;color:var(--soft);margin-top:3px;}
#orbit-details{margin:12px 0 18px;border-block:1px solid var(--pnl-line);}
#orbit-details summary{cursor:pointer;padding:12px 0;color:var(--soft);font-size:14px;}
#selection-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0;}
#selection-actions .btn{padding:10px 4px;}
#sel-follow[aria-pressed=true],#sel-adjust[aria-expanded=true]{background:#274b76;border-color:#91bdff;}
#sel-edit{margin-top:18px;padding-top:18px;border-top:1px solid var(--pnl-line);}
#sel-visit{width:100%;}
#rail .vo,#view-acts .btn{font-size:14px;padding:16px 4px;}
#rail .vo.off{opacity:1;color:var(--dim);}
#keys div{font-size:13px;line-height:1.7;}
.rail-h{font-size:12px;letter-spacing:.08em;}
#rail #data-drawer{font-size:13px;}
#playback{position:absolute;z-index:8;top:88px;left:calc(var(--panel-space) + 16px);right:16px;min-height:56px;display:flex;align-items:center;gap:14px;box-sizing:border-box;padding:6px 10px;border:1px solid var(--pnl-line);border-radius:12px;background:#0d1827e8;color:var(--ink);}
.playback-buttons{display:flex;align-items:center;gap:2px;}
.playback-buttons button{width:42px;height:42px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:26px;cursor:pointer;display:grid;place-items:center;}
.playback-buttons button:hover{background:#253b59;}
.playback-buttons [data-act=pause]{background:#253b59;}
.playback-buttons svg{width:20px;height:20px;fill:currentColor;}
.playback-readout{display:flex;flex-direction:column;flex:1;min-width:0;}
#rate{font:550 14px/1.4 system-ui,sans-serif;color:var(--ink);white-space:nowrap;margin:0;min-width:0;}
#time{font:400 12px/1.4 ui-monospace,monospace;color:var(--soft);}
#playback[data-state=paused] #rate{color:#ffd887;}
#playback[data-state=reversing] #rate{color:#ceb2ff;}
.whole-system{min-height:40px;border:1px solid var(--pnl-line);border-radius:8px;background:#14243a;color:var(--soft);padding:6px 12px;font:500 14px/1.3 system-ui;cursor:pointer;}
#dock{left:calc(50% + var(--panel-space)/2);bottom:16px;max-width:calc(100% - var(--panel-space) - 32px);box-sizing:border-box;padding:8px;border-radius:14px;background:#0e192aed;box-shadow:0 8px 32px #0005;overflow-x:auto;justify-content:flex-start;scrollbar-width:thin;border-color:var(--pnl-line);}
#dock-bodies{display:flex;flex-wrap:nowrap;gap:2px;}
#dock .chip{min-width:60px;min-height:66px;gap:5px;padding:5px 6px;box-sizing:border-box;flex-shrink:0;border-radius:9px;}
.chip .nm{font-size:12px;line-height:1.2;color:var(--soft);}
.chip.on{background:#223e61!important;border-color:#91bdff!important;box-shadow:inset 0 -2px #91bdff;}
#mode-pill{top:156px;right:20px;max-width:calc(100% - var(--panel-space) - 40px);white-space:normal;line-height:1.4;font-size:13px;}
#mode-exit{min-height:30px;line-height:1.4;}
#events{left:calc(50% + var(--panel-space)/2);bottom:110px;max-width:calc(100% - var(--panel-space) - 32px);}
#events .ev{font-size:14px;white-space:normal;line-height:1.5;}
#microhint{left:calc(50% + var(--panel-space)/2);top:auto;bottom:110px;max-width:calc(100% - var(--panel-space) - 64px);width:max-content;box-sizing:border-box;white-space:normal;text-align:center;font-size:14px;line-height:1.5;}
#probe-status,#msg-status,#place-status{top:auto;bottom:110px;left:calc(50% + var(--panel-space)/2);right:auto;max-width:calc(100% - var(--panel-space) - 48px);box-sizing:border-box;font-size:14px;line-height:1.5;white-space:normal;border-radius:12px;}
#sim-help{position:absolute;z-index:15;right:16px;top:88px;width:340px;max-width:calc(100% - 32px);max-height:calc(100% - 112px);overflow:auto;box-sizing:border-box;background:#132237;border:1px solid #3d5676;border-radius:14px;box-shadow:0 12px 64px #000a;padding:20px;color:var(--soft);font-size:16px;line-height:1.6;}
.help-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.help-heading h2{margin:0;font-size:18px;color:var(--ink);}
#sim-help p{margin:14px 0;}#sim-help a{color:var(--acc);}
#sim-help kbd{font:500 13px ui-monospace,monospace;color:var(--ink);}
body>#fb-pill{left:auto!important;right:12px!important;bottom:100px!important;font-size:12px!important;}
#app.daily-mode #playback{display:none;}
#rail #coach-title{font-size:21px;line-height:1.3;}
#rail #coach-body,#rail #coach-body p{font-size:15px;line-height:1.6;}
#rail #coach-step,#rail #voy-phase,#rail #voy-log,#rail .dd-card,#rail .dd-cap{font-size:13px;line-height:1.5;}
#rail .dd-row label,#rail .dd-val,#rail .dd-rt,#rail #voy-title{font-size:14px;}
#rail .dd-row label small{font-size:12px;}
#rail .dd-fine button{font-size:13px;min-height:40px;}
#rail .dd-lrow{font-size:12px;min-height:40px;}
#rail #voy-stats .v{font-size:16px;}#rail #voy-stats .l{font-size:12px;}
@media(min-width:761px) and (max-width:1080px){
  #observatory-header{gap:10px;padding-inline:12px;}.brand{min-width:154px;gap:4px;}.brand h1{font-size:17px;}.brand h1 span{font-size:9px;letter-spacing:1px;}
  #rail-tabs button{padding-inline:12px;}.header-tools{gap:0;}.header-tools button{width:40px;}
  #playback{gap:6px;padding-inline:6px;}.playback-buttons button{width:36px;}.whole-system{font-size:12px;padding-inline:6px;}
  #rate{font-size:12px;}
}
@media(max-width:760px){
  #observatory-header{height:116px;padding:8px 12px;display:grid;grid-template-columns:1fr auto;gap:4px 0;}
  .brand{min-width:0;gap:2px;}.brand h1{font-size:17px;}.brand h1 span{font-size:9px;letter-spacing:1.1px;}.brand>a{width:30px;}
  .header-tools{gap:0;}.header-tools button{width:36px;height:40px;font-size:20px;}
  #rail-tabs{grid-column:1/-1;justify-content:stretch;gap:6px;}#rail-tabs button{flex:1;padding:10px 6px;min-height:40px;}
  #rail{top:auto;left:0;right:0;bottom:0;width:auto;max-height:calc(100% - 124px);border-radius:18px 18px 0 0;border-bottom:0;transition:none;}
  #rail.half,#rail.peek{height:38dvh;}#rail.full{height:calc(100% - 124px);}
  #rail.peek #rail-body{display:block;}#rail-handle{display:none;}
  .rail-heading{padding:4px 8px 4px 18px;}.rail-heading h2{font-size:16px;}#sheet-expand{display:grid;}
  #rail-body section{padding:14px 18px 24px;}
  #playback{top:124px;left:8px;right:8px;gap:6px;min-height:52px;padding:4px 6px;}
  .playback-buttons button{width:34px;height:40px;}.whole-system{font-size:12px;padding-inline:6px;}
  #rate{font-size:12px;}#time{font-size:10px;}
  #dock{left:50%;bottom:calc(var(--sheet-h,0px) + 8px);max-width:calc(100% - 16px);padding:5px;}
  #dock .chip{min-width:58px;min-height:60px;}.chip .pc{width:32px;height:27px;}
  #rail.full ~ #dock{display:none;}
  #mode-pill{top:184px;right:8px;max-width:calc(100% - 16px);padding:6px 10px;font-size:12px;}
  #events,#probe-status,#msg-status,#place-status,#microhint{left:50%;right:auto;transform:translateX(-50%);top:auto;bottom:calc(var(--dock-h,80px) + 20px);max-width:calc(100% - 24px);font-size:13px;}
  #events .ev{font-size:13px;}
  #sim-help{top:124px;right:8px;max-width:calc(100% - 16px);max-height:calc(100% - 136px);}
  #sel-hero{display:grid!important;grid-template-columns:130px 1fr;text-align:left!important;}
  #rail #sel-planet{width:130px;height:108px;}#rail #sel-caption{font-size:13px;}
  body>#fb-pill{display:none!important;}
}
@media(max-width:360px){.brand h1{font-size:15px;}.brand h1 span{display:none;}.header-tools button{width:32px;}.whole-system{max-width:58px;font-size:11px;}#rate{font-size:11px;}.playback-buttons button{width:30px;}}

#rate{text-align:left;}
#app.panel-collapsed:not(.daily-mode):not(.moon-mode) #dock{display:flex;}
@media(max-width:760px){.header-tools{grid-column:2;grid-row:1;}#rail-tabs{grid-row:2;}}

#dock .dgroup:first-of-type .chip{padding:5px 6px;}
#app.moon-mode #playback{display:none;}
#rail #sel-stats .l,.advanced-stats .l{text-transform:none;letter-spacing:0;}

/* Demonstrations keep their actions visible while longer explanations scroll. */
#learn-list .lcard .s{display:block;font-size:13px;line-height:1.45;margin-top:5px;}
#learn-list .lcard{padding:12px;text-align:left;}
#app.experiment-mode #dock,#app.experiment-mode #mode-pill,
#app.experiment-mode #voy-panel,#app.experiment-mode #probe-status,
#app.experiment-mode #msg-status,#app.experiment-mode #microhint{display:none!important;}
#app[data-experiment="light"] #playback{display:none;}
#app.experiment-mode #rail{height:min(500px,calc(100% - 112px));}
#app.experiment-mode #rail-body{display:flex;overflow:hidden;}
#app.experiment-mode #tab-play{flex:1;min-height:0;min-width:0;padding:16px;}
#app.experiment-mode #coach{display:flex;flex-direction:column;flex:1;min-height:0;padding:0;border:0;background:none;box-shadow:none;}
#app.experiment-mode #coach-eyebrow,#app.experiment-mode #coach-title{flex-shrink:0;}
#app.experiment-mode #coach-close{display:none;}
#app.experiment-mode #coach-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:5px;}
#app.experiment-mode #coach-btns{flex-shrink:0;padding-top:12px;border-top:1px solid var(--pnl-line);gap:8px;}
#app.experiment-mode #coach-btns .btn{min-height:44px;white-space:normal;}
.experiment-detail{margin-top:14px;border-top:1px solid var(--pnl-line);padding-top:10px;}
.experiment-detail summary{cursor:pointer;color:var(--acc);font-weight:600;}
.experiment-detail p{padding-top:8px;}
@media(max-width:760px){
  #app.experiment-mode #rail.half,#app.experiment-mode #rail.peek{height:44dvh;}
  #app.experiment-mode #rail.full{height:calc(100% - 124px);}
  #app.experiment-mode #tab-play{padding:10px 18px 14px;}
  #app.experiment-mode #coach-title{font-size:18px;margin-bottom:8px;}
  #app.experiment-mode #coach-eyebrow{margin-bottom:4px;}
  #app.experiment-mode #coach-body,#app.experiment-mode #coach-body p{font-size:14px;line-height:1.5;}
  #app.experiment-mode #coach-btns{padding-top:8px;margin-top:8px;}
}

#app{overflow-anchor:none;}
#coach-title:focus{outline:none;}