/* Main Control: the ship-calls panel, the toast stack and the layout that keeps every HUD box apart
   (right-hand column on desktops and landscape phones, a dock above the panel nav on portrait screens). */
:root{--calls:268px;--calls-h:0px;--rail-h:52px;--dock-h:0px}
@media (min-width:981px) and (max-width:1180px){:root{--calls:236px}}

/* ---- calls panel ---- */
.calls-panel{position:absolute;top:var(--top);right:0;bottom:var(--nav);width:var(--calls);z-index:9;display:flex;flex-direction:column;gap:8px;padding:12px 10px;background:rgba(5,12,16,.94);border-left:1px solid #4c5655;overflow:hidden}
.game[data-view="menu"] .calls-panel{display:none}
.calls-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px solid #3e4a4d}
.calls-head .eyebrow{margin:0;color:var(--amber)}
.calls-head strong{margin-left:auto;font-family:var(--display);font-size:11px;letter-spacing:.12em;color:#9ba9a7}
.calls-panel[data-live]:not([data-live="0"]) .calls-head strong{color:var(--cyan)}
.calls-head em{flex-basis:100%;font-style:normal;font-family:var(--display);font-size:11px;letter-spacing:.1em;color:var(--amber)}
.calls-head em.high{color:#ff9d88}
.call-list{flex:1;min-height:0;overflow:auto;display:grid;align-content:start;gap:8px}
.calls-empty{margin:0;color:#8f9b99;font-size:12px;line-height:1.45}
.call-card{display:grid;gap:6px;padding:9px 9px 8px;border:1px solid #3c4a4f;border-left:3px solid var(--cyan);border-radius:5px;background:rgba(9,18,22,.92);transition:border-color .2s,background .2s}
.call-card[data-status="announced"]{border-left-color:#6f8f9a;background:rgba(8,15,18,.9)}
.call-card[data-status="active"]{border-left-color:var(--amber)}
.call-card.met{border-left-color:var(--green)}
.call-card.urgent{border-color:var(--red);border-left-color:var(--red);animation:call-urgent .7s steps(2,end) infinite}
@keyframes call-urgent{50%{box-shadow:0 0 0 2px rgba(219,93,67,.45)}}
.call-card.late{opacity:.7}
.call-card[data-status="answered"]{border-color:var(--green);border-left-color:var(--green);background:rgba(18,36,20,.92)}
.call-card[data-status="missed"]{border-color:var(--red);border-left-color:var(--red);background:rgba(44,16,12,.92)}
.call-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.call-title{font-family:var(--display);font-size:12px;letter-spacing:.08em;color:var(--ink)}
.call-clock{font-family:var(--display);font-size:12px;letter-spacing:.06em;color:var(--amber);white-space:nowrap;font-variant-numeric:tabular-nums}
.call-card[data-status="answered"] .call-clock{color:var(--green)}
.call-card[data-status="missed"] .call-clock,.call-card.urgent .call-clock{color:#ff9d88}
.call-asks{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.call-ask{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:6px;width:100%;min-height:30px;padding:4px 6px;text-align:left;font-family:var(--body);font-size:12px;letter-spacing:0;font-weight:600;border-radius:3px;box-shadow:none;background:rgba(4,9,11,.7);border-color:#34424a}
.call-ask em{font-style:normal;font-family:var(--display);font-size:11px;letter-spacing:.08em;color:var(--cyan)}
.call-ask em b{font-weight:inherit}.call-ask em .short{display:none}
.call-check{width:14px;height:14px;border:2px solid var(--amber);border-radius:2px}
.call-ask.met .call-check{border-color:var(--green);background:var(--green)}
.call-ask.met .call-ask-text{color:#a4c98b}
.call-meter{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
.call-bar{display:block;height:6px;border:1px solid #3b474b;background:#060a0c}
.call-bar b{display:block;height:100%;width:0;background:var(--green);transition:width .25s linear}
.call-hold{font-family:var(--display);font-size:11px;letter-spacing:.06em;color:#a8b1ad;white-space:nowrap;font-variant-numeric:tabular-nums}
.call-outcome{margin:0;font-size:12px;line-height:1.35;color:#e0a594}
.call-card[data-status="answered"] .call-outcome{color:#a4c98b}
.call-card[data-status="missed"] .call-outcome{color:#ff9d88;font-weight:700}

/* ---- the stage, docks and drawers make room for the column ---- */
.stage{right:var(--calls)}
.game[data-view="menu"] .stage{right:0}
.decision-dock{right:calc(var(--calls) + 20px)}
.drawer{right:var(--calls)}
/* the decision dock never covers the stage: the stage ends above it */
.game.decision-open .stage{bottom:calc(var(--nav) + var(--dock-h) + 20px)}

/* ---- the overview schematic: a grid, so the four system boxes and the hull never overlap ---- */
.ship-schematic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"power drive" "hull hull" "life comms";align-content:space-evenly;justify-items:center;gap:16px 12px;padding:22px 16px}
.ship-schematic .system-node{position:relative;inset:auto;max-width:100%;min-width:0;width:auto}
.ship-schematic .system-node span{white-space:nowrap}
.ship-schematic .power-node{grid-area:power}.ship-schematic .drive-node{grid-area:drive}.ship-schematic .life-node{grid-area:life}.ship-schematic .comms-node{grid-area:comms}
.ship-schematic .hull-readout{position:relative;left:auto;top:auto;transform:none;grid-area:hull}
.overview-grid{grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr)}
.alert-board:empty{display:none}
.alert-clear{margin-top:14px}
.alert-clear[hidden]{display:none}
.toggle .row-name{display:block}

/* ---- toast stack: one line per event or call, newest last ---- */
.toast{position:absolute;left:calc(var(--rail) + (100% - var(--rail) - var(--calls)) / 2);top:calc(var(--top) + 12px);bottom:auto;transform:translateX(-50%);display:grid;gap:6px;justify-items:center;width:min(620px,calc(100% - var(--rail) - var(--calls) - 40px));max-width:none;padding:0;border:0;background:none;opacity:1;pointer-events:none;z-index:50}
.toast-item{max-width:100%;padding:9px 16px;background:#0b1418;border:1px solid var(--amber);font-family:var(--display);font-size:11px;letter-spacing:.1em;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s}
.toast-item.show{opacity:1;transform:none}
.toast-item[data-tone="good"]{border-color:var(--green);color:var(--green)}
.toast-item[data-tone="bad"]{border-color:var(--red);color:#ffd4ca}
.toast-item[data-tone="call"]{border-color:var(--cyan);color:#c4ecf8}
.reduced-motion .toast-item{transition:none}
.game.reduced-motion::after,.game.reduced-motion .call-card{animation:none!important}
.high-contrast .call-card,.high-contrast .calls-panel{border-width:2px}

/* ---- phones and tablets ---- */
@media (max-width:980px){
  .stage{right:auto;padding-top:calc(var(--top) + var(--rail-h) + 12px)}
  .game[data-view="menu"] .stage{padding-top:16px}
  .drawer{right:0}
  .toast{position:fixed;left:50%;top:calc(var(--top) + var(--rail-h) + 8px);width:min(560px,calc(100vw - 24px))}
  .game .toast-item{font-size:12px}
  .game .calls-head strong,.game .calls-head em,.game .call-title,.game .call-clock,.game .call-ask,.game .call-ask em,.game .call-hold,.game .call-outcome,.game .calls-empty{font-size:12px}
  .calls-panel{position:fixed;z-index:14}
  /* portrait: a dock above the nav, as tall as its calls (the page leaves room for it) */
  .game{padding-bottom:calc(var(--nav) + var(--demo-space) + var(--calls-h))}
  .calls-panel{top:auto;left:0;right:0;bottom:calc(var(--nav) + var(--demo-space));width:auto;max-height:36vh;padding:6px 8px 8px;gap:6px;border-left:0;border-top:1px solid #4c5655;box-shadow:0 -10px 30px rgba(0,0,0,.45)}
  .calls-head{padding-bottom:4px}
  .calls-empty{display:none}
  /* compact cards: title and countdown on one line, the asks, then the miss cost beside the hold; the meter is the card's bottom edge */
  .call-card{position:relative;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:3px;padding:5px 8px 8px}
  .call-head,.call-meter{display:contents}
  .call-title{grid-column:1;grid-row:1;letter-spacing:.04em;align-self:center}
  .call-clock{grid-column:2;grid-row:1;text-align:right;align-self:center}
  .call-asks{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .call-outcome{grid-column:1;grid-row:3;align-self:center}
  .call-hold{grid-column:2;grid-row:3;text-align:right;align-self:center}
  .call-bar{position:absolute;left:3px;right:0;bottom:0;height:3px;border:0;background:transparent}
  .call-ask{min-height:40px}
  .call-ask em .long{display:none}.call-ask em .short{display:inline}
  .call-card[data-status="answered"] .call-asks,.call-card[data-status="missed"] .call-asks{display:none}
  .incident-strip strong{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15;letter-spacing:.05em}
  .decision-dock{right:8px;bottom:calc(var(--nav) + var(--demo-space) + var(--calls-h) + 8px)}
  .game.decision-open .stage{bottom:auto}
  .game.decision-open{padding-bottom:calc(var(--nav) + var(--demo-space) + var(--calls-h) + var(--dock-h) + 16px)}
  .ship-schematic{padding:16px 10px;gap:12px 8px}
  .ship-schematic .system-node span{white-space:normal;letter-spacing:.06em}
}
@media (max-width:560px){
  .game .resource-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .game .resource{grid-template-columns:1fr auto}
  .game .resource span{grid-column:1;letter-spacing:.08em}
  .game .resource strong{grid-column:2}
  .game .resource i.bar{grid-column:1/-1}
  .overview-grid{grid-template-columns:minmax(0,1fr)}
  /* the decision head: the kicker on its own line, the title beside an unbroken timer */
  .decision-head{flex-wrap:wrap;gap:2px 10px}
  .decision-head .eyebrow{flex-basis:100%}
}
.decision-head em{white-space:nowrap}
/* landscape phones: the calls take a column on the right, under the rail */
@media (max-width:980px) and (orientation:landscape){
  .game{padding-bottom:calc(var(--nav) + var(--demo-space))}
  /* the rail stops short of the calls column, so the column runs from the top bar to the nav */
  .game .resource-rail{right:240px}
  .calls-panel{top:var(--top);right:0;left:auto;bottom:calc(var(--nav) + var(--demo-space));width:240px;max-height:none;padding:6px 7px 6px;border-top:0;border-left:1px solid #4c5655;box-shadow:none}
  .calls-head em{flex-basis:auto}
  .call-list{gap:6px}
  .call-asks{grid-template-columns:1fr}
  .call-ask{min-height:36px;padding:3px 6px}
  /* the column is narrow: the hold gets its own line and the miss cost the full width */
  .call-hold{grid-column:1/-1;grid-row:3;text-align:left}
  .call-outcome{grid-column:1/-1;grid-row:4}
  .game .resource span{letter-spacing:.02em}
  .game .resource strong{font-size:12px}
  .stage{padding-right:252px}
  .decision-dock{right:248px;bottom:calc(var(--nav) + var(--demo-space) + 8px)}
  .game.decision-open{padding-bottom:calc(var(--nav) + var(--demo-space) + var(--dock-h) + 16px)}
  .toast{left:calc((100vw - 240px) / 2);width:min(520px,calc(100vw - 264px))}
  .overview-grid{grid-template-columns:minmax(0,1fr)}
}
/* phones: while a decision is up the toast moves onto the top bar (newest only), so it never covers the decision dock;
   a short landscape stage has no room for a toast stack at all, so there it always sits on the top bar */
@media (max-width:980px){
  .game.decision-open .toast{top:4px}
  .game.decision-open .toast-item:not(:last-child){display:none}
}
@media (max-width:980px) and (max-height:520px) and (orientation:landscape){
  .toast{top:4px;width:min(420px,calc(100vw - 264px))}
  .toast-item:not(:last-child){display:none}
  .game .toast-item{padding:6px 12px}
}
/* the result card's stars are glyphs now: big enough to read at a glance */
.game .stars span{font-size:22px;line-height:1;padding:6px 12px;letter-spacing:0}
/* mid-size screens: the procedure console gets half the panel, so printed steps read on one or two lines */
@media (min-width:981px) and (max-width:1500px){.control-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* desktop screens 820 px tall or less: a tighter panel header and step list, so a four-step procedure and its keypad fit without scrolling */
@media (min-width:981px) and (max-height:820px){
  .control-header{padding:10px 16px;margin-bottom:12px}.control-header h2{font-size:20px}
  .procedure-card{min-height:200px;padding:10px 12px}.procedure-title{margin-bottom:6px}
  .procedure-steps li{padding:6px 8px}
  .procedure-pad{margin-top:10px}.procedure-pad button{padding:.75rem .5rem;font-size:22px}
}
/* phones: the bars over a scrolling page are solid, so scrolled text never shows through them (round-3 finding 7) */
@media (max-width:980px){
  .topbar{background:#04090c}
  .game .resource-rail{background:#050c10}
  .calls-panel{background:#050c10}
  .panel-nav{background:#04090c}
  /* the calls list scrolls inside its column/dock when the cards outgrow it, so no card is cut off (finding 9) */
  .calls-panel .call-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  /* the public demo's bar gets its own solid strip under the nav (finding 6) */
  body:has(.sbg-demo-bar[data-game="main-control"]) .game{--demo-space:72px}
  body:has(.sbg-demo-bar[data-game="main-control"]) .game::before{content:'';position:fixed;left:0;right:0;bottom:0;height:var(--demo-space);background:#04090c;border-top:1px solid #364246;z-index:11;pointer-events:none}
}
@media (max-width:980px) and (max-height:520px) and (orientation:landscape){
  /* two live calls fit the short landscape column: tighter asks and lines */
  .calls-panel{gap:5px}
  .call-card{padding:4px 7px 6px;row-gap:2px}
  .call-ask{min-height:32px}
}
/* desktop: toasts ride on the panel nav (newest two, pointer-transparent), never over the stage card headers (round-3 finding 8) */
@media (min-width:981px){
  .toast{top:auto;bottom:calc((var(--nav) - 62px) / 2);left:calc(var(--rail) + (100% - var(--rail)) / 2);width:min(760px,calc(100% - var(--rail) - 40px));gap:4px}
  .toast-item{padding:7px 16px;background:#0b1418f7}
  .toast-item:not(:nth-last-child(-n+2)){display:none}
}
/* desktop demo: the public demo's bar sits in the bottom-left corner; the nav starts after it instead of under it */
@media (min-width:981px){
  body:has(.sbg-demo-bar[data-game="main-control"]) .panel-nav{left:max(var(--rail),372px)}
}