/* _seal-slider.css: hero seal-cycle instrument, every class prefixed seal- */
.jre-seal{
  --s-deep:#06140f; --s-deep2:#040d0a; --s-phos:var(--signal,#1fd894); --s-hi:#b9ffe0; --s-dim:#5f9a84;
  --s-amber:#d4a660; --s-red:#d6706a; --s-mono:var(--mono,'IBM Plex Mono',ui-monospace,Menlo,monospace);
}
/* ---------- instrument ---------- */
.seal-inst{ background:var(--s-deep); border:1px solid #173a2d; border-radius:6px; color:var(--s-dim);
  font-family:var(--s-mono); font-size:12px; box-shadow:0 30px 60px -30px rgba(0,20,10,.55), inset 0 0 0 1px rgba(31,216,148,.05); }
.seal-inst__head,.seal-inst__foot{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.7rem 1rem; }
.seal-inst__head b{ color:#e4fff2; font-weight:600; }
.seal-ro{ display:flex; gap:1rem; flex-wrap:wrap; }
.seal-ro .seal-v{ color:var(--s-phos); font-variant-numeric:tabular-nums; }
.seal-inst__body{ display:grid; grid-template-columns:minmax(0,1fr) 72px 300px; grid-template-areas:"screen slider side" "note note side"; gap:.8rem; padding:0 1rem 1rem; }
.seal-screen{ grid-area:screen; } .seal-side{ grid-area:side; }

.seal-screen{ position:relative; contain:paint; isolation:isolate; transform:translateZ(0); border:1px solid #143428; border-radius:3px; background:
  radial-gradient(120% 90% at 50% 40%, #0a2219 0%, var(--s-deep2) 75%); overflow:hidden;
}
.seal-screen canvas{ display:block; width:100%; }
#sealSpec{ aspect-ratio:1800/620; }
#sealWf{ aspect-ratio:1800/230; border-top:1px solid #143428; }
.seal-screen::after{ /* scanlines + vignette - plain alpha overlay: mix-blend-mode forced a full re-composite of the animating canvas every frame on phones (perf, 2026-09-27) */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px),
             radial-gradient(130% 110% at 50% 45%, transparent 55%, rgba(0,0,0,.5) 100%); }
.seal-tag{ position:absolute; font-size:11px; color:var(--s-phos); pointer-events:none; }
.seal-tag--tl{ top:.5rem; left:52px; } .seal-tag--wf{ left:.7rem; color:var(--s-dim); }

/* side panel */
.seal-side{ display:flex; flex-direction:column; gap:.8rem; }
.seal-panel{ border:1px solid #143428; border-radius:3px; background:rgba(4,13,10,.6); padding:.6rem .7rem; }
.seal-panel h2{ font:500 11px/1 var(--s-mono); color:var(--s-dim); margin:0 0 .55rem; letter-spacing:.06em; }
#sealDoor{ display:block; width:100%; aspect-ratio:300/230; }
.seal-rows{ display:grid; gap:0; }
.seal-row{ display:flex; justify-content:space-between; gap:.5rem; padding:.36rem 0; border-bottom:1px dashed rgba(31,216,148,.14); }
.seal-row:last-child{ border-bottom:0; }
.seal-row .seal-v{ color:var(--s-phos); text-align:right; font-variant-numeric:tabular-nums; }
.seal-row .seal-v.seal-amber{ color:var(--s-amber); } .seal-row .seal-v.seal-red{ color:var(--s-red); }
.seal-row--iso .seal-v{ font-size:18px; font-weight:600; text-shadow:0 0 10px rgba(31,216,148,.45); }
.seal-row--iso .seal-v.seal-red,.seal-row--iso .seal-v.seal-amber{ text-shadow:none; }

/* vertical lid control between the analyzer and the enclosure */
.seal-vs{ grid-area:slider; display:flex; flex-direction:column; align-items:center; gap:1.25rem; padding:.2rem 0; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none; cursor:ns-resize; outline:none; }
.seal-vs__lab{ font-size:11px; letter-spacing:.06em; }
.seal-vs__lab--top{ color:var(--s-red); } .seal-vs__lab--bot{ color:var(--s-phos); }
.seal-vs__track{ position:relative; flex:1; min-height:200px; width:10px; border-radius:5px; cursor:ns-resize; touch-action:none;
  background:linear-gradient(180deg, var(--s-red) 0%, var(--s-amber) 55%, var(--s-phos) 82%, var(--s-phos) 100%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.4); }
.seal-vs__track::before{ content:""; position:absolute; inset:-14px -26px; }   /* fat hit area */
.seal-vs__tick{ position:absolute; left:-9px; right:-9px; height:2px; background:rgba(185,255,224,.7); transform:translateY(-50%); }
.seal-vs__thumb{ position:absolute; left:50%; top:0; width:54px; height:24px; transform:translate(-50%,-50%); will-change:transform; border-radius:4px; /* moved by translateY from seal-slider.js: compositor, not layout */
  background:linear-gradient(180deg,#e9eef0,#b9c1c4); border:1px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 10px rgba(31,216,148,.35);
  display:grid; place-items:center; }
.seal-vs__thumb i{ display:block; width:26px; height:11px; background:repeating-linear-gradient(0deg, rgba(40,48,52,.75) 0 1px, transparent 1px 4px); }
.seal-vs:focus, .seal-vs:focus-visible{ outline:none !important; box-shadow:none !important; }
.seal-vs:focus-visible .seal-vs__thumb{ outline:2px solid var(--s-hi); outline-offset:3px; }
.seal-vs.seal-dragging .seal-vs__thumb{ box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 14px rgba(31,216,148,.55); }

.seal-note{ grid-area:note; margin:.2rem 0 0; padding:.7rem .9rem; border-left:3px solid var(--s-phos); background:rgba(31,216,148,.06);
  font-size:clamp(15px,1.35vw,18px); line-height:1.45; color:#d8f5e8; transition:background .3s, border-color .3s, box-shadow .3s; }
.seal-note strong{ color:var(--s-hi); font-weight:600; }
.seal-note.seal-live{ border-left-color:var(--s-amber); background:rgba(212,166,96,.1); box-shadow:0 0 16px -6px rgba(212,166,96,.3); }
.seal-note.seal-live strong{ color:#efe0c4; }
.seal-row--dut .seal-v{ font-weight:600; }
.jre-seal p.seal-try{ font-family:var(--s-mono); max-width:none;
   display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.4rem; margin:0 1rem .8rem; padding:.65rem .9rem;
  border:1px solid rgba(31,216,148,.28); border-radius:3px; background:rgba(31,216,148,.05);
  font-size:clamp(14px,1.2vw,16px); line-height:1.4; color:#e4fff2; }
.seal-try b{ display:inline-grid; place-items:center; width:1.35em; height:1.35em; margin-right:.35em; border-radius:50%;
  background:var(--s-phos); color:#04110b; font-size:.8em; font-weight:700; }
.seal-try__tag{ font-size:11px; letter-spacing:.08em; color:var(--s-phos); font-weight:600; }
.seal-try em{ font-style:normal; font-weight:600; }
.seal-try__bad{ color:#e3a8a3; } .seal-try__good{ color:var(--s-phos); }
.seal-io{ display:flex; align-items:center; gap:.4rem; margin-top:.55rem; }
.seal-io__lab{ font-size:11px; color:var(--s-dim); margin-right:.2rem; }
.jre-seal button.seal-io__btn{ -webkit-appearance:none; appearance:none; box-shadow:none; text-transform:none; letter-spacing:0; min-height:0; margin:0; flex:1; font:500 11px/1 var(--s-mono); padding:.5rem .4rem; border-radius:3px; cursor:pointer;
  background:transparent; color:var(--s-dim); border:1px solid rgba(31,216,148,.3); }
.jre-seal button.seal-io__btn:hover{ color:#e4fff2; }
.jre-seal button.seal-io__btn.seal-is-on[data-io="filtered"]{ background:rgba(31,216,148,.16); color:#e4fff2; border-color:var(--s-phos); }
.jre-seal button.seal-io__btn.seal-is-on[data-io="plain"]{ background:rgba(214,112,106,.16); color:#f1dbd8; border-color:var(--s-red); }
.jre-seal button.seal-io__btn:focus-visible{ outline:2px solid var(--s-hi); outline-offset:2px; }
.seal-note.seal-cable{ border-left-color:var(--s-red); background:rgba(214,112,106,.1); box-shadow:0 0 16px -6px rgba(214,112,106,.3); }
.seal-note.seal-cable strong{ color:#f1dbd8; }
.seal-v.seal-yellow{ color:#ffd23f; text-shadow:0 0 10px rgba(255,210,63,.45); }
.seal-inst__foot #sealBanner{ color:#e4fff2; }

@media (max-width:900px){
  .intro{ grid-template-columns:1fr; gap:1rem; }
  .seal-inst__body{ grid-template-columns:64px minmax(0,1fr); grid-template-areas:"screen screen" "note note" "slider side"; }
  .seal-side{ display:grid; grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){ #sealSpec{ aspect-ratio:1800/1150; } #sealWf{ aspect-ratio:1800/420; } .seal-side{ grid-template-columns:1fr; } .seal-inst__head .seal-ro span:nth-child(n+3){ display:none; } }

/* ---- phone: breathing room; hide the chrome that carries no information at this width (2026-09-27) ---- */
@media (max-width:560px){
  .seal-inst{ font-size:12.5px; }
  .seal-inst__head{ padding:.9rem 1rem .5rem; gap:.5rem; }
  .seal-inst__head .seal-ro{ display:none; }                 /* span/ref/scale readouts: desktop instrument dressing */
  .jre-seal p.seal-try{ margin:.5rem 1rem 1rem; padding:.85rem 1rem; gap:.6rem 0; }
  .seal-inst__body{ gap:1.1rem; padding:0 1rem 1.25rem; }
  /* waterfall: parked off-canvas rather than display:none — the script blits it every frame and a 0x0 canvas throws */
  #sealWf{ position:absolute; left:0; bottom:0; width:100%; height:2px; opacity:0; pointer-events:none; border:0; }
  .seal-tag--wf, .seal-tag--tl{ display:none; }
  #sealSpec{ aspect-ratio:1800/1000; }
  .seal-note{ padding:.9rem 1rem; font-size:15px; }
  .seal-panel{ padding:.85rem .9rem; }
  .seal-panel h2{ margin-bottom:.75rem; }
  .seal-row{ padding:.5rem 0; }
  .seal-side{ gap:1rem; }
  .seal-vs{ gap:1rem; }
  .seal-vs__track{ width:14px; }
  .seal-vs__thumb{ width:60px; height:30px; }
  .seal-inst__foot{ padding:.9rem 1rem 1.1rem; }
  .seal-inst__foot > span:first-child, .seal-inst__foot > span:last-child{ display:none; }  /* keep only the state banner */
}