/* Sanser og signaler: samme marineblå modelramme som Balance.
   Afgrænset til de to paneler, så øvrige laboratorier beholder deres layout. */
.sanser-subnav {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
  padding:0; margin:0 0 24px; border:0;
}
.sanser-subnav button {
  display:flex; align-items:center; gap:12px; min-width:0; min-height:80px;
  padding:14px 16px; text-align:left; white-space:normal;
  border:1px solid #bacddf; border-radius:14px; background:#f3f7fc; color:#203e63;
}
.sanser-subnav button strong,.sanser-subnav button small {display:block}
.sanser-subnav button strong {font-size:1rem; line-height:1.3}
.sanser-subnav button small {margin-top:4px; font-size:.8125rem; font-weight:500; line-height:1.45}
.sanser-subnav button[aria-pressed="true"] {background:#102943; border-color:#294660; color:#edf8ff}
.sanser-subnav button[data-subtab="synapse"][aria-pressed="false"] {background:#f1eefb; border-color:#b8a9df; color:#493375}
.sense-nav-icon {display:grid; place-items:center; flex:0 0 40px; height:40px; border-radius:11px; background:rgba(86,187,201,.15); font-size:1.5rem; color:inherit}
.senses-focus-model {display:none}
.senses-workbench,.signals-workbench {
  padding:16px; border:1px solid #29425a; border-radius:20px; background:#0b1b30;
  box-shadow:0 16px 36px rgba(9,26,48,.12); color:#eaf8ff;
}
.senses-workbench .sense-picker {padding:0 0 14px; flex-wrap:wrap; overflow:visible}
.senses-workbench .sense-picker button {
  min-height:44px; border:1px solid #35536d; border-radius:10px;
  padding:9px 14px; background:#102943; color:#b9cedf; cursor:pointer;
}
.senses-workbench .sense-picker button[aria-pressed="true"] {background:#176d74; border-color:#51c7cd; color:#fff}
.senses-workbench .sense-picker button:hover {border-color:#7ce5e7; color:#fff}
.sense-layout,.signals-workbench {grid-template-columns:minmax(0,1.6fr) minmax(250px,.85fr); gap:16px; align-items:start}
.sense-stage,.synapse-stage {background:#091a30; border-color:#294660; border-radius:14px; scroll-margin-top:150px}
.sense-stage .stage-top,.synapse-stage .stage-top {
  height:auto; min-height:46px; padding:10px 14px; gap:8px 14px; flex-wrap:wrap;
  background:#0c213b; border-color:#294660; color:#a4bed2; font-size:.6875rem; line-height:1.5;
}
.sense-stage .stage-top output,.synapse-stage .stage-top output {color:#7ce5e7; font-size:.75rem}
.sense-stage #senseSvg,.synapse-stage #synapseSvg {
  display:block; width:100%; height:auto; min-height:0; max-height:390px;
  background:radial-gradient(ellipse at 50% 40%,#173c5b,#09182c 76%);
}
.sense-stage #senseSvg {aspect-ratio:720/390}
.synapse-stage #synapseSvg {aspect-ratio:720/440}
/* De eksisterende SVG-modeller beholder deres geometri, med lyse konturer
   og mørke vævsflader, så både labels og dele kan ses mod modelbaggrunden. */
#senseSvg text {fill:#d5e9f7; font-size:20px; font-weight:650}
#senseSvg [stroke="#244b78"],#senseSvg [stroke="#2e75b6"] {stroke:#7db9f0}
#senseSvg [stroke="#7030a0"] {stroke:#bf9af4}
#senseSvg [stroke="#0d6e6e"],#senseSvg [stroke="#27a7b1"] {stroke:#67d7df}
#senseSvg [stroke="#7b8ba0"] {stroke:#8eaac3}
#senseSvg [fill="#fff"],#senseSvg [fill="#dceaf5"],#senseSvg [fill="#d9e7f3"] {fill:#27445f}
#senseSvg [fill="#e9f5f6"] {fill:#153c4c}
#senseSvg [fill="#f4d5cd"] {fill:#4b3343}
#senseSvg [stroke="#c99282"],#senseSvg [stroke="#b97968"] {stroke:#c58c9e}
#senseSvg [fill="#0d8ca0"],#senseSvg [fill="#0d6e6e"] {fill:#67d7df}
.sense-control,.synapse-control-dock {padding:12px 14px; background:#0b1e36; border-top:1px solid #29425a}
.sense-control-label {display:flex; justify-content:space-between; gap:10px; align-items:center; color:#dceaf4; font-size:.875rem; font-weight:750}
.sense-control output {color:#7ce5e7; white-space:nowrap}
.sense-control-track {display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:10px; align-items:center; margin-top:6px}
.sense-control-track input {width:100%; min-width:0; min-height:44px; margin:0; accent-color:#52ced4; cursor:pointer; touch-action:pan-y}
.sense-control-track button {width:44px; height:44px; padding:0; border:1px solid #35536d; border-radius:10px; background:#102943; color:#ddf4f4; font:inherit; font-size:1.4rem; cursor:pointer}
.sense-control p {margin:6px 0 0; color:#a4bfd1; font-size:.8125rem; line-height:1.45}
.sense-notes.experiment-notes {padding:18px; background:#10233b; border-color:#294660; color:#eaf8ff}
.sense-notes.experiment-notes>.sense-kicker {margin:0 0 12px; color:#80ced3; font-size:.6875rem; font-weight:850; letter-spacing:.12em}
.sense-notes .concept-tag {background:#183e4c; color:#9be9e5; font-size:.75rem}
.sense-notes.experiment-notes h3 {color:#edf8ff}
.sense-notes.experiment-notes>p {color:#bacddd}
.sense-notes .observe-list div {border-color:#2b435c}
.sense-notes .observe-list dt {color:#9db7ca; font-size:.6875rem}
.sense-notes .observe-list dd {color:#edf8ff; font-size:.875rem; line-height:1.5}
.sense-notes .model-limit {background:#132f46; border-left-color:#55c7cc; color:#dceff5}
.sense-notes .model-limit.important {background:rgba(209,119,28,.1); border-left-color:#d99a57; color:#ffe5c3}
.sense-notes .model-limit p {color:#b9ccdb; font-size:.8125rem; line-height:1.5}
.sense-notes #synapseContent {color:#bdcede; font-size:.875rem; line-height:1.6}
.sense-notes #synapseContent h3,.sense-notes #synapseContent h4 {color:#edf8ff}
.synapse-stage .post-neuron {fill:#153f4c; stroke:#67d7df}
.synapse-stage .vesicles circle {fill:#19395b; stroke:#86c8ee}
.synapse-stage .receptors path {stroke:#be99f3}
.synapse-stage .transporters #reuptakeTrack {stroke:#67d7df; stroke-width:26}
.synapse-stage .transporters .transporter-channel {fill:none; stroke:#102d43; stroke-width:16; stroke-linecap:round}
.synapse-stage .transporters .transporter-arrow {stroke:#b7f3ee; stroke-width:4}
.synapse-stage .transporter-label {fill:#93e2dc; font-size:18px}
.synapse-stage .transmitter-particles circle {fill:#ffd18d; stroke:#b87f36}
.synapse-stage text {fill:#edf8ff; font-size:19px}
.synapse-control-dock .switch-row {margin:0; gap:12px}
.synapse-control-dock .switch-row small {margin-top:3px; color:#a4bfd1; line-height:1.45; font-size:.75rem}
.synapse-control-dock .switch {margin:0}
.synapse-stage .synapse-buttons {flex-wrap:wrap; padding:10px 14px; background:#07172a; border-color:#29425a}
.synapse-stage .synapse-buttons button {min-height:44px; padding:8px 12px; background:#102943; color:#dceaf4; border-color:#35536d; font-size:.8125rem}
.synapse-stage .synapse-buttons button:first-child {background:#176d74; border-color:#218b91; color:#fff}
.senses-workbench button:focus-visible,.sense-control-track input:focus-visible,.sanser-subnav button:focus-visible,.synapse-buttons button:focus-visible {outline:3px solid #8fd0ff; outline-offset:3px}
@media(max-width:900px) {
  .sense-layout,.signals-workbench {grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px) {
  .sanser-subnav {gap:8px; margin-bottom:18px}
  .sanser-subnav button {padding:12px 10px; gap:7px; align-items:flex-start; flex-direction:column}
  .sanser-subnav button strong {font-size:.875rem}
  .sanser-subnav button small {font-size:.75rem}
  .sense-nav-icon {height:30px; flex-basis:auto; width:30px; font-size:1.25rem; border-radius:8px}
  .senses-focus-model {display:block; min-height:44px; width:100%; margin:0 0 10px; padding:8px 10px; border:1px solid #5fb6be; border-radius:9px; background:#176d74; color:#fff; font:inherit; font-size:.8125rem; font-weight:750; cursor:pointer}
  .senses-focus-model:focus-visible {outline:3px solid #8fd0ff; outline-offset:3px}
  .senses-workbench,.signals-workbench {padding:9px; border-radius:16px}
  .senses-workbench .sense-picker {gap:6px; padding-bottom:10px}
  .senses-workbench .sense-picker button {padding:8px; font-size:.8125rem}
  .sense-stage #senseSvg {height:clamp(156px,29svh,230px); aspect-ratio:auto}
  .synapse-stage #synapseSvg {height:clamp(174px,32svh,260px); aspect-ratio:auto}
  #senseSvg text {font-size:26px}
  .synapse-stage text {font-size:28px}
  .sense-stage .stage-top,.synapse-stage .stage-top {padding:8px 10px; gap:3px 10px; font-size:.625rem}
  .sense-control,.synapse-control-dock {padding:10px}
  .sense-control-label {font-size:.8125rem}
  .sense-control p {font-size:.75rem}
  .synapse-stage .synapse-buttons {padding:8px; gap:5px}
  .synapse-stage .synapse-buttons button {padding:7px; font-size:.75rem}
  .sense-notes.experiment-notes {padding:15px}
}