:root { --navy:#0b2255; --gold:#b38b4d; --ink:#1a1f2b; --mute:#5b6577; --line:#d7dce6; --bg:#f4f6fa; --card:#fff; --warn:#8a5a00; --err:#b3261e; --ok:#1f6f43 }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --ink:#e8ecf4; --mute:#9aa6bd; --line:#2b3550; --bg:#0c1220; --card:#131b2e; --navy:#9db8ff } }
* { box-sizing: border-box }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background:var(--bg); color:var(--ink); line-height:1.4 }
.top { display:flex; align-items:center; gap:14px; padding:10px 16px; background:#fff; border-bottom:3px solid var(--gold) }
@media (prefers-color-scheme: dark) { .top { background:#101828 } }
.logo { height:64px; width:auto; background:#fff; border-radius:6px; padding:2px }
.top h1 { margin:0; font-size:1.5rem; color:var(--navy) } .top p { margin:0; color:var(--mute); font-size:.9rem }
#setup, #run { max-width:1280px; margin:0 auto; padding:12px 16px 40px }
.notice { background:#fff4d6; border:1px solid var(--gold); color:#4a3a14; padding:8px 12px; border-radius:8px; font-size:.9rem; margin-bottom:12px }
.layout { display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:16px; align-items:start }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr } .summary { order:-1 } }
fieldset { background:var(--card); border:1px solid var(--line); border-radius:10px; margin:0 0 12px; padding:10px 14px 12px }
legend { font-weight:700; color:var(--navy); padding:0 6px }
.choices label { display:flex; gap:10px; align-items:flex-start; padding:6px 4px; border-radius:6px; cursor:pointer }
.choices label.off { color:var(--mute); cursor:not-allowed }
.choices small { display:block; color:var(--mute) }
.ships { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap:10px }
.ship { border:2px solid var(--line); border-radius:10px; padding:8px; cursor:pointer; background:var(--card); text-align:left; font:inherit; color:inherit }
.ship[aria-checked=true] { border-color:var(--navy); box-shadow:0 0 0 2px var(--gold) }
.ship img { width:100%; height:100px; object-fit:contain; background:#fff; border-radius:6px } .ship .ph { height:100px; display:grid; place-items:center; background:#eef1f7; color:var(--mute); border-radius:6px; font-size:.85rem }
.ship b { display:block; margin-top:4px } .ship span { font-size:.8rem; color:var(--mute) }
.row { display:grid; gap:2px; margin:8px 0 } .row label { font-weight:600; font-size:.92rem } .row output { color:var(--navy); font-weight:700; margin-left:6px }
input[type=range] { width:100% } select { padding:6px; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; width:100% }
.tag { display:inline-block; font-size:.7rem; font-weight:700; padding:1px 7px; border-radius:99px; vertical-align:middle; margin-left:4px }
.tag.soon { background:#e7eaf2; color:#46506a } .tag.inactive { background:#fff1cf; color:#7a5400 } .tag.synthetic { background:#fff1cf; color:#7a5400 } .tag.benchmark { background:#d9f2e4; color:#14583a }
.summary { position:sticky; top:8px } .card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px }
.card img { width:100%; height:160px; object-fit:contain; background:#fff; border-radius:6px } .card h2 { margin:6px 0 0; color:var(--navy); font-size:1.2rem }
.small { font-size:.82rem; color:var(--mute); margin:2px 0 }
table { border-collapse:collapse; width:100%; font-size:.88rem } td { border-top:1px solid var(--line); padding:3px 4px } td:last-child { text-align:right; font-variant-numeric:tabular-nums }
.links a { color:var(--navy); font-weight:600 } .warn { color:var(--warn); font-size:.85rem; padding-left:18px } .err { color:var(--err); font-size:.85rem; padding-left:18px }
button { font:inherit; padding:7px 12px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer }
button.primary { width:100%; margin-top:10px; background:var(--navy); color:#fff; border-color:var(--navy); font-weight:700; padding:10px } button.primary:disabled { opacity:.45; cursor:not-allowed }
button[aria-pressed=true] { background:var(--navy); color:#fff; border-color:var(--navy) }
button:focus-visible, input:focus-visible, select:focus-visible, .ship:focus-visible { outline:3px solid var(--gold); outline-offset:2px }
.runbar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:8px } .grow { flex:1 }
.runbody { display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:12px } @media (max-width: 900px) { .runbody { grid-template-columns:1fr } }
canvas#scene3d { width:100%; aspect-ratio:900/640; height:auto; background:#0f2a4a; border-radius:10px; border:1px solid var(--line); touch-action:none; cursor:grab }
canvas#chart { width:100%; height:auto; background:#0f2a4a; border-radius:10px; border:1px solid var(--line); touch-action:none }
.panel { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px } .panel h3 { margin:0; color:var(--navy) } .panel h4 { margin:10px 0 4px }
.status { font-size:.8rem; color:var(--mute); margin:4px 0 6px } .ctl > div { margin-top:8px; font-weight:600; font-size:.9rem } .btns { display:flex; gap:6px; margin-top:4px; flex-wrap:wrap } .btns button { flex:1; padding:8px 4px }

.runbar select { width:auto }

#instructor { border-top: 2px solid #b38b4d; margin-top: 12px; padding-top: 8px; }
#instructor h5 { margin: 10px 0 4px; }
.irow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.irow input[type=number] { width: 4.5em; }
.irow input[type=text] { flex: 1; min-width: 8em; }
.comms { max-height: 8em; overflow: auto; border: 1px solid #ccd; padding: 4px; font-size: 12px; background: #fafbff; }
table.score { width: 100%; font-size: 12px; border-collapse: collapse; }
table.score td, table.score th { border-bottom: 1px solid #dde; padding: 2px 4px; text-align: left; }

#ecdisPanel .al, #radarPanel .al { font-size: 12px; padding: 2px 6px; margin: 2px 0; border-left: 4px solid #c90; background: #fff8e6; }
#ecdisPanel .al.alarm { border-color: #c00; background: #ffe9e9; font-weight: 700; }
#ecdisPanel .al.acked { opacity: .55; }

#berthPanel table button { cursor: pointer; }

:root { --dim: 1; }
#instr { filter: brightness(var(--dim)); }

.kiosk body { user-select: none; -webkit-user-select: none; }
.kiosk input, .kiosk textarea { user-select: text; }

/* the side panel scrolls on its own and the picture stays in view (the panel has many sections) */
@media (min-width: 901px) {
  .runbody { align-items: start; }
  .runbody .panel { max-height: calc(100vh - 80px); overflow-y: auto; position: sticky; top: 8px; }
  .runbody > canvas, .runbody > #consoleWrap { position: sticky; top: 8px; }
}