/* the experiments' panel, at the bottom of the screen; the station stays visible above it */
body.atstation #touch, body.atstation #prompt, body.atstation #mixbtn, body.atstation #hud, body.atstation #mini, body.atstation #say { display: none !important; }
#station { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: min(1040px, 98vw); max-height: 64vh; overflow: auto; padding: 8px 10px 10px;
  border-radius: 12px; background: rgba(8, 12, 14, .9); border: 1px solid #1f6b5c; z-index: 20; display: flex; flex-direction: column; gap: 8px; }
#station.hide { display: none; }
#station .head { display: flex; gap: 10px; align-items: center; font-size: 13px; }
#station .head b { color: #b6ff3b; letter-spacing: .08em; text-transform: uppercase; }
#station .head span { color: #9fb3bb; flex: 1; }
#station .head i.ok { font-style: normal; color: #7dff9a; }
#station button { font: inherit; font-size: 13px; color: #dfe7ea; background: #16222a; border: 1px solid #2a3a40; border-radius: 7px; padding: 7px 11px; cursor: pointer; touch-action: none; }
#station button:hover { border-color: #6fb7a6; background: #1c2e36; }
#station button.go { background: #1a8f3c; border-color: #3fdc6b; color: #fff; font-weight: bold; }
#station button.on { background: #3a5a1a; border-color: #b6ff3b; color: #fff; }
#station button.held { background: #8f6a10; border-color: #ffd36b; }
#station button.off { opacity: .35; pointer-events: none; }
#station button.bad { border-color: #ff5a3a; }
#station kbd { font: inherit; font-size: 10px; padding: 0 4px; border-radius: 3px; background: #0a1013; color: #9fb3bb; border: 1px solid #2a3a40; margin-left: 4px; }
#station .body { display: flex; gap: 8px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
#station canvas { display: block; border-radius: 8px; background: #000; touch-action: none; max-width: 100%; }
#station .col { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
#station .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; }
#station .read { font-size: 13px; color: #8fd8c4; text-align: center; }
#station .read b { color: #fff; font-size: 15px; }
#station label.sl { display: grid; grid-template-columns: 110px 1fr 70px; gap: 6px; align-items: center; font-size: 12px; color: #9fb3bb; }
#station label.sl b { color: #fff; text-align: right; }
#station input[type=range] { width: 100%; accent-color: #ffd36b; }
#station .note { font-size: 12px; color: #8a9aa1; max-width: 300px; }
#station .seq { font: 13px/1.5 ui-monospace, monospace; letter-spacing: .12em; white-space: pre; overflow-x: auto; max-width: 100%; padding: 6px 8px; border-radius: 6px; background: #0a1013; border: 1px solid #1d2a30; }
#station .choice { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
#station .choice button { font-family: ui-monospace, monospace; letter-spacing: .08em; }
#stmsg { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 7px 14px; border-radius: 8px; background: rgba(7, 9, 11, .88); color: #f4e9ff;
  font-style: italic; font-size: 14px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 26; max-width: min(760px, 94vw); text-align: center; }
#stmsg.on { opacity: 1; }
@media (max-width: 700px) {
  #station { max-height: 70vh; padding: 6px; gap: 6px; }
  #station button { padding: 6px 8px; font-size: 12px; }
  #station kbd { display: none; }
  #station label.sl { grid-template-columns: 84px 1fr 56px; }
}
/* the journal and notes */
#screen .jlist { max-width: 680px; max-height: 56vh; overflow: auto; text-align: left; display: flex; flex-direction: column; gap: 10px; }
#screen .jnote { padding: 8px 12px; border-radius: 8px; background: #f2ead6; color: #2a2018; }
#screen .jnote small { color: #8a7a60; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; display: block; }
#screen .jnote b { color: #4a2a1a; } #screen .jnote p { font-size: 14px; margin-top: 3px; }
#screen b.goal { color: #ffd36b; }
/* the patch-clamp rig, as a station */
#station .pcwrap { flex-direction: column; align-items: center; flex-wrap: nowrap; }
#station .pcwrap .scopes { display: flex; gap: 8px; justify-content: center; }
#station .pcwrap .eye, #station .pcwrap .osc { position: relative; }
#station .pcwrap .eye canvas { height: min(30vh, 270px); width: auto; aspect-ratio: 1; border-radius: 50%; cursor: crosshair; }
#station .pcwrap .osc canvas { height: min(30vh, 270px); width: auto; aspect-ratio: 16 / 9; max-width: calc(98vw - min(30vh, 270px) - 40px); border: 1px solid #2a3a40; background: #031208; }
#station #eyeinfo { position: absolute; right: 0; top: 0; font-size: 11px; color: #ffd36b; pointer-events: none; text-shadow: 0 0 3px #000; }
#station #pcsteps { display: flex; gap: 4px; font-size: 11px; flex-wrap: wrap; justify-content: center; }
#station #pcsteps span { padding: 2px 8px; border-radius: 10px; color: #5f7178; border: 1px solid #1d2a30; }
#station #pcsteps span.now { color: #ffd36b; border-color: #ffd36b; } #station #pcsteps span.done { color: #7dff9a; border-color: #1f6b3c; }
#station #pclock { font-size: 12px; color: #ff9a7a; } #station #pclock i { font-style: normal; display: inline-block; min-width: 18px; text-align: center; margin: 0 2px; padding: 0 5px; border-radius: 4px; border: 1px solid #5a2a20; }
#station #pclock i.ok { color: #08130c; background: #3fdc6b; border-color: #3fdc6b; } #station #pclock i.now { border-color: #ffd36b; color: #ffd36b; }
#station .ctl { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 34px; }
#station .ctl input[type=range] { width: min(240px, 46vw); }
@media (max-width: 700px) {
  #station .pcwrap .eye canvas, #station .pcwrap .osc canvas { height: min(26vh, 44vw); }
  #station .pcwrap .osc canvas { aspect-ratio: 400 / 360; max-width: 48vw; }
}