/* ================= Workspace: the simulator on one screen =================
   Laptops and landscape tablets: two screens side by side (ultrasound, 3D) above one tabbed tray.
   The page itself never scrolls in the simulator; only a long panel scrolls inside the tray.
   Phones: the image is pinned at the top, the tray's tabs underneath, the 3D view in its own tab
   (and small in the Probe tab). Loaded after theme.css, so it wins over older component styles. */

/* ---------- shared pieces ---------- */
.sw{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--fg);user-select:none;-webkit-user-select:none}
.sw input{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:38px;height:22px;border-radius:999px;background:var(--panel3);border:1px solid var(--line-hi);position:relative;cursor:pointer;transition:background .15s,border-color .15s}
.sw input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.sw input:checked{background:var(--fluid);border-color:var(--fluid)}
.sw input:checked::after{transform:translateX(16px);background:var(--ink)}
.slide{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.slide input{width:140px}
.iconbtn.sm{width:34px;height:34px;border-radius:10px}
.iconbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn.sm{padding:5px 10px;font-size:13px}
.lbl{font:600 13px var(--f-display);color:var(--muted)}
.phone-only{display:none}

/* joint picker in the app bar */
.jointseg{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.jointseg a{font:600 14px var(--f-display);color:var(--muted);text-decoration:none;padding:6px 14px;border-radius:999px}
.jointseg a[aria-current="true"]{background:var(--panel3);color:var(--fg)}
.jointseg a:hover{color:var(--fg)}

/* ---------- laptop / landscape tablet ---------- */
@media (min-width:701px){
  html[data-view="sim"],html[data-view="sim"] body{height:100%;overflow:hidden}
  html[data-view="sim"] .wrap{height:100dvh;box-sizing:border-box;max-width:none;padding-block:10px;gap:10px}
  html[data-view="sim"] .sitefoot{display:none}
  html[data-view="sim"] .appbar{padding:0}
  .ws{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .ws-screens{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px}
  .pane{min-height:0;display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:8px}
  .uspane .monitor{flex:1;min-height:0;position:relative;display:grid;place-items:center;padding:4px;border-radius:13px;box-shadow:none}
  .uspane .monitor canvas{display:block;max-width:100%;max-height:100%}
  .paneh{display:flex;align-items:center;gap:8px;justify-content:space-between}
  .bodyfit{flex:1;min-height:0;position:relative;display:grid;place-items:center}
  .bodyfit .bodywrap{width:100%;margin:0 auto}
  .bodypane .readout{margin:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bodypane .armbar{margin:0;padding:0;border:0;gap:6px}
  .bodypane .armbar .rowh{gap:8px;flex-wrap:wrap}
  .bodypane .armbar h3{font-size:14px}
  .bodypane .armctl{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 18px}
  .ws-dock{flex:none;height:clamp(176px,27vh,236px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden}
  .dpanels{flex:1;min-height:0;overflow:auto;padding:12px 16px 14px;scrollbar-width:thin}
}
/* ultrasound pane extras: coach line and tap-to-identify card sit on the image */
.monitor{position:relative}
.uspane .coach{box-sizing:border-box;flex:none;margin:0;height:auto;min-height:calc(2 * 1.4em + 12px);padding:0 12px;border-block:6px solid transparent !important;font-size:13px;line-height:1.4;background:var(--panel2);border:0;border-left:3px solid var(--amber);border-radius:10px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:help}
.uspane .coach.open{height:auto;-webkit-line-clamp:unset}
.monitor .info{position:absolute;left:10px;top:10px;width:min(360px,calc(100% - 20px));max-height:calc(100% - 70px);overflow:auto;z-index:4;padding:12px 36px 12px 14px;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.monitor .info .nm{font-size:17px}
.monitor .info p{font-size:13.5px}
.infox{position:absolute;top:8px;right:8px;width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;font-size:13px}
.infox:hover{color:var(--fg);background:var(--panel2)}
.uspane .mstrip{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.uspane .mstrip .mk{border-radius:10px;padding:3px 4px}
.uspane .mstrip .tools{flex:1;display:flex;gap:6px;min-width:0}
.uspane .mstrip .tools .btn{flex:1;padding:6px 8px;font-size:13.5px}

/* challenge / test cards float over the top of the 3D view */
.floatcards{position:absolute;inset:8px 8px auto 8px;z-index:3;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.floatcards>*{pointer-events:auto;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.floatcards .challenge,.floatcards .testcard{padding:10px 12px;gap:4px;background:color-mix(in srgb,var(--panel) 95%,transparent)}
.floatcards .chline{font-size:13.5px;line-height:1.4}
.floatcards .kicker{font-size:12px}
.testcard .tmprompt{margin:0;font:600 16px var(--f-display)}

/* the tray */
.dtabs{display:flex;align-items:center;gap:2px;padding:6px 10px 0;border-bottom:1px solid var(--line)}
.dtabs button{border:0;background:transparent;color:var(--muted);font:600 14.5px var(--f-display);padding:8px 14px 10px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.dtabs button:hover{color:var(--fg)}
.dtabs button[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--fluid)}
.dtabs #needleTab[aria-pressed="true"]{border-bottom-color:var(--amber)}
.dfine{margin-left:auto;font-size:11.5px;color:var(--faint);white-space:nowrap}
.dpanel.dockoff{display:none!important}
.dpanel h2{margin:0 0 8px;font:700 14px var(--f-display);color:var(--muted);letter-spacing:0;text-transform:none}
.dpanel.card,.dpanel .card{background:transparent;border:0;padding:0;border-radius:0}
.ws .presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:6px}
.ws .presets button{padding:8px 11px;border-radius:11px;font-size:14px;background:var(--panel2);border:1px solid transparent}
.ws .presets button:hover{border-color:var(--line-hi)}
.ws .presets button small{font-size:12px}
#probePanel{display:flex;gap:18px;align-items:flex-start}
#probePanel #moveCard{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.mvhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ws .pad{grid-template-columns:70px minmax(0,1fr) minmax(0,1fr) 70px minmax(0,1fr) minmax(0,1fr);gap:6px 8px}
.ws .pad button{padding:6px 8px;font-size:13px}
.ws .keysd{font-size:12.5px;color:var(--muted)}
.ws .keysd summary{cursor:pointer}
.pathhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pathhead h2{margin:0!important}
.pathhead select{min-width:0;max-width:340px}
.ws .pathinfo{display:block;font-size:14px}
.ws .pathinfo>.hint{margin:0 0 6px;max-width:100ch}
.ws .pathinfo ul{margin:4px 0 8px;padding-left:18px;columns:2;column-gap:32px}.ws .pathinfo li{break-inside:avoid}
.ws .pathinfo .btnrow{display:flex;flex-wrap:wrap;gap:6px}
.examgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bigbtn{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);color:var(--fg);cursor:pointer;font:inherit}
.bigbtn b{font:700 16px var(--f-display)}
.bigbtn span{font-size:13.5px;color:var(--muted)}
.bigbtn:hover{border-color:var(--fluid)}
#examPanel:has(#tourCard:not([hidden])) #examStart{display:none}
.ws .tour{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:6px 20px;border:0;padding:0;background:transparent}
.ws .tour .tctl{grid-column:2;grid-row:1}
.ws .tour .tstep{grid-column:1;grid-row:1;align-self:center}
.ws .tour h3{grid-column:1;font-size:17px}
.ws .tour #tourText{grid-column:1;grid-row:3/span 3;font-size:14px}
.ws .tour .tlist,.ws .tour .tbar,.ws .tour .tphase,.ws .tour .btnrow{grid-column:2}
.ws .tour .btnrow .btn{padding:5px 10px;font-size:13px}
#needleCard{display:flex;flex-direction:column;gap:10px}
#needleCard .nbrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
#needleCard .nbsl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px 18px}
#needleCard .nbsl .ctl{grid-template-columns:auto minmax(0,1fr) 62px;gap:8px}
#needleCard .nbbtn{display:flex;gap:6px}
#needleCard .chips{margin-left:auto}
#needleCard #result:empty{display:none}
.swgrid{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-bottom:10px}
#displayPanel .hint{max-width:90ch}
/* touch pointers get the knob and tilt pad in the Probe tab */
.probedock{display:none}
@media (pointer:coarse) and (min-width:701px){#probePanel .probedock{display:flex;flex:none;width:min(46%,420px);padding:0;background:transparent;border:0}
  #probePanel .pd3d{display:none}#probePanel .pdgrid{grid-template-columns:auto minmax(0,1fr);display:grid;gap:12px;align-items:center}
  #probePanel .dial{width:130px;aspect-ratio:1}}

/* tablets in portrait: ask for landscape */
.rotate-note{display:none}
@media (pointer:coarse) and (orientation:portrait) and (min-width:701px){
  .rotate-note{display:flex;position:fixed;inset:0;z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:var(--bg);color:var(--fg)}
  .rotate-note svg{width:72px;height:72px;fill:none;stroke:var(--fluid);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:rot 2.4s ease-in-out infinite}
  .rotate-note b{font:700 24px var(--f-display)}.rotate-note span{color:var(--muted);max-width:34ch}
  @keyframes rot{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}}

/* ---------- phones ---------- */
@media (max-width:700px){
  .phone-only{display:inline-block}
  .ws{display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .ws-screens{display:contents}
  .uspane{order:1;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);padding-bottom:6px;display:flex;flex-direction:column;gap:6px}
  .uspane .monitor{padding:3px}
  .uspane .monitor canvas{width:auto;height:auto;max-width:100%;max-height:40vh;margin:0 auto;display:block}
  .monitor .info{max-height:calc(100% - 20px)}
  .ws-dock{order:2;display:flex;flex-direction:column;gap:8px}
  .dtabs{position:sticky;z-index:15;background:var(--bg);overflow-x:auto;scrollbar-width:none;padding:0}
  .dtabs button{flex:1 1 auto;padding:8px 4px 9px;font-size:13.5px;white-space:nowrap}
  .dial{overflow:hidden}
  #probePanel{overflow:hidden}
  .dfine{display:none}
  .bodypane{order:3;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:8px}
  .bodypane.dockoff{display:none}
  .bodyfit{position:relative}
  .floatcards{position:static;margin-bottom:8px}
  .ws .pad{grid-template-columns:70px minmax(0,1fr) minmax(0,1fr)}
  #probePanel{flex-direction:column}
  #probePanel .probedock{display:flex;width:100%}
  .examgrid,#needleCard .nbsl,.ws .tour{grid-template-columns:minmax(0,1fr)}
  .ws .pathinfo ul{columns:1}
  .ws .tour>*{grid-column:1!important;grid-row:auto!important}
  .ws .presets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jointseg a{padding:5px 10px;font-size:13px}
}

/* ---------- compact chrome around the screens (laptop/tablet simulator) ---------- */
@media (min-width:701px){
  html[data-view="sim"] body{margin:0}
  html[data-view="sim"] .logo{width:30px;height:30px}
  html[data-view="sim"] .bt small{display:none}
  html[data-view="sim"] .bt b{font-size:19px}
  html[data-view="sim"] .tabs{padding:3px}
  html[data-view="sim"] .tabs button{padding:6px 13px;font-size:14px}
  html[data-view="sim"] .iconbtn{width:36px;height:36px}
  html[data-view="sim"] .appctl .seg button{padding:5px 11px}
  .bodypane .armbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
  .bodypane .armbar .rowh{flex-wrap:nowrap}
  .bodypane .armctl{flex:1 1 240px;display:flex;flex-wrap:wrap;gap:4px 16px}
  .bodypane .armctl .ctl{flex:1 1 220px;grid-template-columns:auto minmax(0,1fr) 54px}
  .bodypane .armbar h3{display:none}
}
@media (min-width:701px) and (max-height:780px){
  .ws-dock{height:clamp(150px,25vh,200px)}
  .uspane .coach{font-size:12.5px}
}
@media (min-width:701px){
  .bodypane .armbar .seg button{padding:5px 9px;font-size:13.5px}
  .bodypane .armbar .btn{padding:6px 10px;font-size:13.5px;white-space:nowrap}
  .bodypane .armctl .ctl{flex:1 1 170px;grid-template-columns:auto minmax(0,1fr) 62px;gap:6px}
  .bodypane .armctl .ctl label{font-size:13px}
  .ws .presets{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .ws .presets button{padding:6px 10px;line-height:1.25}
}

/* phones: a two-row top bar (logo + joint/mode/settings, then icon tabs) and full-width probe buttons */
@media (max-width:700px){
  .appbar{grid-template-columns:auto minmax(0,1fr);gap:6px 8px}
  .appbar .bt{display:none}
  .appbar .tabs{grid-column:1/-1;justify-self:stretch;justify-content:space-between}
  .appbar .tabs button{padding:6px 10px;font-size:13.5px}
  .appctl{gap:6px}
  .appctl .seg{flex-wrap:nowrap}
  .appctl .seg button{padding:5px 9px}
  #themeBtn{display:none}
  .uspane .mstrip .mk{flex:1 1 40%}
  .uspane .mstrip .tools{flex:1 1 100%}
  .uspane .mstrip .tools .btn{padding:7px 4px;font-size:13px}
  .uspane .coach{font-size:12.5px}
}
@media (max-width:700px){
  .appbar .tabs button span{display:none}
  .appbar .tabs button svg{width:21px;height:21px}
  .appbar .tabs button[aria-pressed="true"] span{display:inline}
  .uspane .coach{min-height:calc(2 * 1.4em + 10px);padding:0 10px;border-block-width:5px !important}
  html[data-view="sim"] .appbar .tabs button{padding:3px 10px}
  html[data-view="sim"] .appbar .tabs button svg{width:18px;height:18px}
  #pdMachine{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  #pdMachine .mk{flex:1 1 40%}
}

/* ---------- home ---------- */
.hsec{display:flex;flex-direction:column;gap:14px}
.hsec h2{margin:0;font:700 22px var(--f-display);letter-spacing:-.01em}
.jcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.jcard{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto;gap:6px 18px;align-items:center;padding:20px 22px;border-radius:22px;background:var(--panel);border:1px solid var(--line);color:var(--fg);text-decoration:none;transition:border-color .15s,transform .15s}
.jcard:hover{border-color:var(--fluid);transform:translateY(-2px)}
.jcard>div{display:flex;flex-direction:column;gap:4px}
.jcard b{font:800 24px var(--f-display)}
.jcard>div>span{color:var(--muted);font-size:14.5px}
.jcard small{color:var(--amber);font:500 12.5px var(--f-mono)}
.jcard .go{grid-column:2;color:var(--fluid);font:700 15px var(--f-display)}
.jart{width:120px;height:90px;grid-row:1/span 2;fill:none;stroke:var(--line-hi);stroke-width:3;stroke-linecap:round}
.jart .hl{stroke:var(--fluid)}
.hsoon{margin:0;color:var(--faint);font-size:13.5px}
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pcard{display:flex;flex-direction:column;gap:8px;text-align:left;padding:18px 20px;border-radius:20px;background:var(--panel);border:1px solid var(--line);color:var(--fg);text-decoration:none;font:inherit;cursor:pointer;transition:border-color .15s}
.pcard:hover{border-color:var(--fluid)}
.pcard b{font:700 18px var(--f-display)}
.pcard>span{color:var(--muted);font-size:14px}
.pcard .go{margin-top:auto;color:var(--fluid);font:700 14.5px var(--f-display)}
.pcard .dots{display:flex;gap:5px}
.pcard .dots i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 11px var(--f-mono);font-style:normal;background:var(--panel2);color:var(--muted)}
.pcard .dots i.on{background:var(--fluid);color:var(--ink)}
@media (max-width:860px){.jcards,.pcards{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.jcard{grid-template-columns:72px minmax(0,1fr);padding:16px}.jart{width:72px;height:54px}.jcard b{font-size:20px}}

/* standard views: one row per surface, compact chips */
.ws .presets.grouped{display:flex;flex-direction:column;gap:7px}
.ws .presets .pgrp{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:start;gap:10px}
.ws .presets .pglab{font:600 13px var(--f-body);color:var(--muted);padding-top:8px}
.ws .presets .pgrow{display:flex;flex-wrap:wrap;gap:6px}
.ws .presets button{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;line-height:1.2}
.ws .presets button i{font:500 11.5px var(--f-body);font-style:normal;color:var(--muted);background:var(--bg);border-radius:999px;padding:2px 8px}
.ws .presets button[aria-pressed="true"],.ws .presets button.on{border-color:var(--accent)}
@media (max-width:700px){.ws .presets .pgrp{grid-template-columns:1fr;gap:4px}.ws .presets .pglab{padding-top:2px}}
@media (min-width:701px) and (max-height:780px){
  .ws #presetTitle{display:none}
  .ws .presets.grouped{gap:5px}
  .ws .presets button{padding:4px 6px 4px 10px;font-size:13px}
  .ws .presets .pglab{padding-top:5px}
}
/* touch laptops / iPad landscape: dial and tilt pad side by side, sized to the tray */
@media (pointer:coarse) and (min-width:701px){
  #probePanel .probedock{width:auto}
  #probePanel .pdgrid,#probePanel .pdctl{display:flex;flex-direction:row;gap:14px;align-items:center;grid-template-areas:none}
  #probePanel .dial{width:clamp(110px,15vh,138px);max-width:none;flex:none;grid-area:auto}
  #probePanel .tiltwrap{display:flex;flex-direction:column;gap:6px;width:210px;grid-area:auto}
  #probePanel .tiltpad{width:100%;max-width:none;aspect-ratio:2}
  #probePanel .tiltrow{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
  #probePanel .tiltrow .hint{display:none}
  #probePanel .tiltrow output{font-size:12px;white-space:nowrap}
  #probePanel .tiltrow .btn{padding:5px 8px;font-size:12.5px;white-space:nowrap}
  #probePanel #pdPress{display:none}
}
/* the two screens line up exactly: controls row on top, screen, footer — shared rows via subgrid */
@media (min-width:701px){
  .ws-screens{grid-template-rows:auto minmax(0,1fr) auto}
  .ws-screens>.pane{display:grid;grid-row:1/4;grid-template-rows:subgrid;row-gap:8px;min-height:0}
  .ws-screens>.pane>*{min-width:0;min-height:0}
  .uspane .mstrip{flex-wrap:nowrap}
  .bodypane .paneh{min-height:100%}
  .bodyfit{background:#11161a;border:1px solid var(--line);border-radius:13px;overflow:hidden}
  .panef{display:flex;flex-direction:column;gap:6px;align-self:start}
}
@media (max-width:700px){
  .uspane .mstrip{order:3}.uspane .monitor{order:1}.uspane .coach{order:2}
}
@media (min-width:701px){.bodyfit .bodywrap{aspect-ratio:auto;max-width:none;border-radius:12px}}
@media (min-width:701px){.uspane .coach{-webkit-line-clamp:3;align-self:stretch}}