/* ============================================================
   tool.css — the interactive figure
   ------------------------------------------------------------
   Styling only. Every class name, id and DOM relationship the
   tool's script depends on is preserved; nothing here changes a
   calculation, a control binding or a scene parameter.

   The tool keeps the tool's data colours (low = blue,
   high = amber, forces = green/violet/coral) because those carry
   scientific meaning. Interface state uses the wave teal from the
   MetMary mark instead, so "selected" can never be mistaken for
   "low pressure".
   ============================================================ */

.figure__frame{
  /* ground */
  --bg:#080F16;
  --line:#1D3040;
  --line-2:#2A4356;
  --ink-p:#E9F3F8;      /* 17.1:1 on tool */
  --ink-dim:#9FB3C0;    /*  8.9:1 on tool */

  /* data */
  --low:#38B6E8;
  --high:#FF6B5A;
  --pgf:#7CE0C0;
  --cor:#B79BFF;
  --fri:#FF9A8A;
  --ok:#5FD8A4;
  --bad:#FF7B7B;

  /* interface state */
  --sel:#00A3AD;
  --sel-bg:#08333A;

  --rail:320px;
  --tool-h:min(74vh,700px);
}

/* ------------------------------------------------------------
   Shell
   ------------------------------------------------------------ */
.figure__frame .app{
  display:flex;
  height:var(--tool-h);
  min-height:460px;
  color:var(--ink-p);
  font-family:var(--ui);
  font-size:14px;
  line-height:1.5;
}
.figure__frame [hidden]{ display:none !important }
.figure__frame :focus-visible{ outline:2px solid var(--sel); outline-offset:2px }

.figure__frame .rail{
  width:var(--rail);
  flex:0 0 var(--rail);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  min-height:0;
  transition:flex-basis .26s ease,width .26s ease;
}
.figure__frame .scroll{
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 20px 22px;
  flex:1;
  min-height:0;
  scrollbar-width:thin;
  scrollbar-color:#2b4657 transparent;
}
.figure__frame .scroll::-webkit-scrollbar{ width:8px }
.figure__frame .scroll::-webkit-scrollbar-thumb{ background:#2b4657 }

.figure__frame .app.railcollapsed .rail{
  flex:0 0 0; width:0; min-width:0; overflow:hidden; border-right:none;
}

/* ------------------------------------------------------------
   Control groups — the same labelled-contour rule as the site
   ------------------------------------------------------------ */
.figure__frame .group{ padding:18px 0 6px; border-bottom:1px solid var(--line) }
.figure__frame .group:last-of-type{ border-bottom:none }
.figure__frame .group > h2{
  margin:0 0 13px;
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--data);
  font-size:10px;
  font-weight:400;
  letter-spacing:.185em;
  text-transform:uppercase;
  color:var(--ink-dim);
  cursor:pointer;
  user-select:none;
}
.figure__frame .group > h2::after{ content:""; flex:1; height:1px; background:var(--line-2) }
.figure__frame .group > h2::before{
  content:"";
  width:0;height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transform:rotate(90deg);
  transition:transform .16s;
  flex:0 0 auto;
  opacity:.6;
}
.figure__frame .group > h2:hover{ color:var(--ink-p) }
.figure__frame .group.closed > h2::before{ transform:rotate(0deg) }
.figure__frame .group.closed .gbody{ display:none }
.figure__frame .group.closed{ padding-bottom:16px }

/* ------------------------------------------------------------
   Fields
   ------------------------------------------------------------ */
.figure__frame .field{ margin-bottom:15px }
.figure__frame .field .lab{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; margin-bottom:7px;
}
.figure__frame .field .lab label,
.figure__frame .field .lab > span:first-child{
  font-size:12.5px; color:var(--ink-p); letter-spacing:-.003em;
}
.figure__frame .field .val{
  font-family:var(--data);
  font-variant-numeric:tabular-nums;
  font-size:11.5px;
  color:var(--ink-dim);
}
.figure__frame .hint{
  margin:0;
  font-size:11.5px;
  line-height:1.55;
  color:var(--ink-dim);
}
.figure__frame .hint + .hint,
.figure__frame .field .hint{ margin-top:7px }
.figure__frame .hint b{ color:var(--ink-p); font-weight:500 }

/* range */
.figure__frame input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:26px; background:transparent; margin:0; cursor:grab;
}
.figure__frame input[type=range]:active{ cursor:grabbing }
.figure__frame input[type=range]::-webkit-slider-runnable-track{ height:2px; background:var(--line-2) }
.figure__frame input[type=range]::-moz-range-track{ height:2px; background:var(--line-2) }
.figure__frame input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:var(--bg); margin-top:-9px;
  border:1.5px solid var(--sel);
  box-shadow:inset 0 0 0 3px var(--bg), inset 0 0 0 12px var(--sel);
}
.figure__frame input[type=range]::-moz-range-thumb{
  width:17px; height:17px; border-radius:50%;
  background:var(--sel); border:3px solid var(--bg);
}

/* segmented controls */
.figure__frame .seg{ display:flex; gap:1px; background:var(--line); border:1px solid var(--line) }
.figure__frame .seg button{
  flex:1 1 0; min-width:0;
  padding:9px 6px;
  background:var(--bg);
  border:0;
  color:var(--ink-dim);
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background-color .14s,color .14s;
}
.figure__frame .seg button:hover{ color:var(--ink-p); background:#111E29 }
.figure__frame .seg button[aria-pressed=true]{
  background:var(--sel-bg); color:#fff; box-shadow:inset 0 -2px 0 var(--sel);
}
.figure__frame .seg.mini button{ font-size:10.5px; padding:8px 4px }

/* checkboxes */
.figure__frame .checks{ display:grid; grid-template-columns:1fr 1fr; gap:9px 12px }
.figure__frame .chk{
  display:flex; align-items:center; gap:9px;
  cursor:pointer; font-size:12.5px; color:var(--ink-dim); user-select:none;
}
.figure__frame .chk input{
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px; flex:0 0 15px;
  border:1px solid #3C5B71; background:var(--bg);
  cursor:pointer; position:relative; margin:0; transition:.14s;
}
.figure__frame .chk input:checked{ background:var(--sel); border-color:var(--sel) }
.figure__frame .chk input:checked::after{
  content:""; position:absolute; left:4px; top:1px;
  width:4px; height:8px; border:solid #04161A; border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.figure__frame .chk:hover{ color:var(--ink-p) }

/* buttons */
.figure__frame .btn{
  padding:10px 12px;
  background:var(--bg);
  border:1px solid var(--line-2);
  color:var(--ink-p);
  cursor:pointer;
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:.14s;
}
.figure__frame .btn:hover{ border-color:var(--sel); background:#101E28 }
.figure__frame .btn.accent{ background:var(--sel-bg); border-color:var(--sel) }
.figure__frame .row{ display:flex; gap:8px }
.figure__frame .row .btn{ flex:1 }

/* ------------------------------------------------------------
   Stage
   ------------------------------------------------------------ */
.figure__frame .stage{
  position:relative; flex:1; min-width:0; overflow:hidden; background:var(--bg);
}
.figure__frame canvas{ display:block; touch-action:none }
/* On touch, a vertical drag must still scroll the page — horizontal drags
   look around, and the view buttons cover the rest. Full screen has nothing
   to scroll past, so the scene takes the whole gesture back. */
@media (pointer:coarse){
  .figure__frame canvas{ touch-action:pan-y }
}
.figure__frame:fullscreen canvas{ touch-action:none }
.figure__frame .overlay{ position:absolute; pointer-events:none }
.figure__frame .labels{ position:absolute; inset:0; overflow:hidden; pointer-events:none }

/* floating annotations on the scene */
.figure__frame .lab3{
  position:absolute;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  text-align:center;
  line-height:1.2;
  background:rgba(8,15,22,.88);
  border:1px solid var(--line-2);
  padding:5px 9px;
  transition:opacity .15s;
}
.figure__frame .lab3 .t{
  font-family:var(--data); font-size:9px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-dim);
}
.figure__frame .lab3 .n{
  font-family:var(--data); font-size:19px; font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.figure__frame .lab3 .s{ font-family:var(--data); font-size:9px; color:var(--ink-dim) }
.figure__frame .lab3.pill{ padding:3px 8px }
.figure__frame .lab3.pill .n{ font-size:14px }

/* the verdict — the sentence the whole tool exists to prove */
.figure__frame .verdict{
  top:16px; left:50%; transform:translateX(-50%);
  max-width:min(660px,calc(100% - 32px));
  background:rgba(8,15,22,.92);
  border:1px solid var(--line-2);
  border-top:2px solid var(--low);
  padding:12px 20px;
  display:flex; align-items:center; gap:16px;
}
.figure__frame .verdict .side{
  font-family:var(--data); font-size:22px; font-weight:500;
  letter-spacing:.02em; line-height:1; white-space:nowrap; color:var(--low);
}
.figure__frame .verdict .txt{ font-size:12.5px; line-height:1.4; color:var(--ink-dim) }
.figure__frame .verdict .txt b{ color:var(--ink-p); font-weight:500 }
.figure__frame .verdict .hemi{
  display:block; margin-bottom:3px;
  font-family:var(--data); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-dim);
}

/* quiz */
.figure__frame .quiz{
  top:16px; left:50%; transform:translateX(-50%);
  max-width:min(540px,calc(100% - 32px));
  pointer-events:auto;
  background:rgba(8,15,22,.96);
  border:1px solid var(--line-2);
  border-top:2px solid var(--high);
  padding:16px 20px; text-align:center;
}
.figure__frame .quiz h3{
  margin:0 0 4px; font-family:var(--display); font-weight:400;
  font-size:22px; letter-spacing:-.01em;
}
.figure__frame .quiz p{ margin:0 0 13px; font-size:12.5px; color:var(--ink-dim) }
.figure__frame .quiz .row{ justify-content:center }
.figure__frame .quiz .btn{ min-width:120px }
.figure__frame .quiz .fb{
  font-family:var(--display); font-size:16px; line-height:1.45; margin-bottom:12px;
}

/* readout */
.figure__frame .readout{
  left:16px; bottom:16px;
  background:rgba(8,15,22,.9);
  border:1px solid var(--line-2);
  padding:12px 16px;
  display:grid; grid-template-columns:repeat(3,minmax(74px,auto)); gap:10px 22px;
}
.figure__frame .readout .k{
  font-family:var(--data); font-size:9px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-dim);
}
.figure__frame .readout .v{
  font-family:var(--data); font-size:17px; font-weight:500;
  font-variant-numeric:tabular-nums; line-height:1.2; letter-spacing:-.01em;
}
.figure__frame .readout .u{ font-size:9.5px; color:var(--ink-dim); letter-spacing:.02em }

/* view controls */
.figure__frame .viewctl{
  right:16px; top:16px;
  display:flex; flex-direction:column; gap:6px;
  pointer-events:auto; align-items:flex-end;
}
.figure__frame .vbtn{
  min-width:34px; height:34px; padding:0 10px;
  background:rgba(8,15,22,.9);
  border:1px solid var(--line-2);
  color:var(--ink-p); cursor:pointer;
  font-family:var(--data); font-size:11px; letter-spacing:.06em;
  display:grid; place-items:center; transition:.14s;
}
.figure__frame .vbtn:hover{ border-color:var(--sel); background:#101E28 }

/* legend — only present while the forces it explains are drawn */
.figure__frame .legend{
  right:16px; bottom:16px;
  background:rgba(8,15,22,.9);
  border:1px solid var(--line-2);
  padding:10px 14px;
  font-family:var(--data); font-size:10.5px; line-height:1.9;
  color:var(--ink-dim);
  display:none;
}
.figure__frame .legend.on{ display:block }
.figure__frame .legend .li{ display:flex; align-items:center; gap:9px }
.figure__frame .legend .li:not(.fx){ display:none }
.figure__frame .legend .sw{ width:16px; height:2px; flex:0 0 16px }
.figure__frame .legend .dot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px }

/* rail tab */
.figure__frame .railtab{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:20px; height:64px;
  background:rgba(8,15,22,.92);
  border:1px solid var(--line-2); border-left:none;
  color:var(--ink-dim); cursor:pointer; pointer-events:auto;
  display:grid; place-items:center;
  font-family:var(--data); font-size:13px; z-index:6; transition:.14s; padding:0;
}
.figure__frame .railtab:hover{ color:var(--ink-p); background:#16242F; border-color:var(--sel) }

/* failure state */
.figure__frame #err{
  position:absolute; inset:0; display:none; place-items:center;
  text-align:center; padding:32px;
  font-family:var(--data); font-size:12.5px; line-height:1.9;
  letter-spacing:.04em; color:var(--ink-dim);
}

/* ------------------------------------------------------------
   Full screen
   ------------------------------------------------------------ */
.figure__frame:fullscreen{ border:0 }
.figure__frame:fullscreen .app{ height:100vh; min-height:0 }

/* ------------------------------------------------------------
   Small screens — the visualisation keeps the room, controls
   move beneath it rather than collapsing into a stack of cards.
   ------------------------------------------------------------ */
@media (max-width:62rem){
  .figure__frame{ --rail:100%; --tool-h:auto }
  .figure__frame .app{ flex-direction:column; height:auto; min-height:0 }
  /* in a column flex container flex-basis would override height, so the
     stage is laid out at its own size and keeps the room it needs */
  .figure__frame .stage{ flex:0 0 auto; height:min(64vh,520px); min-height:340px; order:-1 }
  .figure__frame .rail{ flex:0 0 auto }
  .figure__frame .rail{
    width:100%;
    border-right:none;
    border-top:1px solid var(--line);
  }
  .figure__frame .scroll{ overflow:visible; padding:0 18px 20px }
  .figure__frame .app.railcollapsed .rail{ flex:1 1 auto; width:100%; overflow:visible }
  .figure__frame .railtab{ display:none }
  /* the verdict is the sentence the tool exists to prove — it spans the
     stage rather than being cropped */
  .figure__frame .verdict{
    top:10px; left:10px; right:10px;
    transform:none; max-width:none;
    padding:9px 12px; gap:11px;
    align-items:flex-start;
  }
  .figure__frame .verdict .side{ font-size:16px; padding-top:2px }
  .figure__frame .verdict .txt{ font-size:11.5px; line-height:1.35 }
  .figure__frame .verdict .hemi{ margin-bottom:2px }
  /* both hands stay: the comparison between them is the reading */
  .figure__frame .readout{
    left:10px; bottom:10px; padding:8px 11px;
    grid-template-columns:repeat(3,minmax(0,auto)); gap:6px 13px;
  }
  .figure__frame .readout .v{ font-size:15px }
  .figure__frame .readout .k{ font-size:8.5px; letter-spacing:.12em }
  /* the view controls step down to the free corner so the verdict can span
     the full width of the stage */
  .figure__frame .viewctl{
    right:10px; top:50%; bottom:auto;
    transform:translateY(-50%);
    flex-direction:column;
  }
  .figure__frame .vbtn{ min-width:38px; height:38px }
  .figure__frame .legend{ display:none }
  .figure__frame .legend.on{ display:none }
  /* comfortable touch targets */
  .figure__frame .seg button{ padding:12px 6px }
  .figure__frame .btn{ padding:12px }
  .figure__frame .chk{ padding:3px 0 }
}

/* Tablet: the rail runs the full width, so the controls sit in two columns
   rather than stretching a two-button switch across 800px. */
@media (min-width:34rem) and (max-width:62rem){
  .figure__frame .scroll{
    columns:2;
    column-gap:clamp(1.5rem,4vw,2.75rem);
  }
  .figure__frame .group{ break-inside:avoid; min-width:0 }
  .figure__frame .group:last-of-type{ border-bottom:1px solid var(--line) }
}

@media (prefers-reduced-motion:reduce){
  .figure__frame *{ transition:none!important }
}