/* === Stereo vision test (mount version) ===
   Reuses the global .etest*, .pill, .fchip, .cal-*, .result-msg and .result-eye rules from pages.css
   and style.css. This file frames the tool inside the dark tool panel, keeps reading sizes at 16px or
   more, lays out each step, and turns the card black for the glasses check and the test itself
   (the stimulus needs a black ground whatever the site theme). */

.tl-stereo { width: 100%; min-width: 0; }
.tl-stereo [hidden] { display: none !important; }
.tl-stereo .etest { width: 100%; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
.panel.dark .tl-stereo .etest { background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.16); }
.panel.dark .tl-stereo .etest.is-dark, .tl-stereo .etest.is-dark { background: #000; border-color: rgb(255 255 255 / 0.18); forced-color-adjust: none; }

/* Step bar: markers are display only */
.tl-stereo .etest-bar { flex-wrap: wrap; row-gap: 10px; font-size: clamp(16px, 0.95vw, 18px); color: rgb(255 255 255 / 0.82); }
.tl-stereo .etest-step { cursor: default; }

/* Screens size to their content */
.tl-stereo .etest-screen { min-height: 0; gap: clamp(18px, 1.5vw, 30px); }
.tl-stereo .etest-screen h2 { max-width: 32em; text-wrap: balance; }
.tl-stereo .etest-screen h2:focus { outline: none; }
.tl-stereo .etest-screen h2:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
.tl-stereo .etest-screen h3 { font-weight: 500; }
.tl-stereo .etest-screen p, .tl-stereo .etest-screen li { font-size: clamp(16px, 1.08vw, 21px); line-height: 1.5; }
.tl-stereo .etest-screen ul { gap: 0.6em; }
.tl-stereo .etest-note { font-size: clamp(16px, 1vw, 19px); line-height: 1.5; color: rgb(255 255 255 / 0.88); }
.tl-stereo .etest-note .fchip { margin-left: 6px; vertical-align: middle; }
.tl-stereo .etest-disclaimer { max-width: 64em; font-size: clamp(16px, 0.95vw, 18px); line-height: 1.55; color: rgb(255 255 255 / 0.74); }
.tl-stereo .etest-actions { align-items: center; margin-top: 0; padding-top: 0; gap: 12px 14px; }
.tl-stereo .etest .pill { font-size: clamp(16px, 1.1vw, 22px); }
.tl-stereo .etest .pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tl-stereo .pill:disabled { cursor: not-allowed; opacity: 0.45; }
.tl-stereo label.check { align-items: start; font-size: clamp(16px, 1.05vw, 20px); color: rgb(255 255 255 / 0.92); cursor: pointer; }
.tl-stereo .check input { accent-color: var(--soft); }
.tl-stereo .fchip { height: auto; min-height: 46px; padding: 8px 20px; font-size: clamp(16px, 1vw, 19px); }
.tl-stereo .fchip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.panel.dark .tl-stereo .fchip:hover { border-color: #fff; color: #fff; }
.panel.dark .tl-stereo .fchip[aria-pressed="true"]:hover { color: var(--navy); }
.tl-stereo-lead { max-width: 40em; color: rgb(255 255 255 / 0.9) !important; font-size: clamp(17px, 1.2vw, 23px) !important; }
.tl-stereo-soft { color: rgb(255 255 255 / 0.74) !important; }
.tl-stereo-link { color: #fff; font-size: clamp(16px, 1.05vw, 20px); text-decoration: underline; text-underline-offset: 3px; }
.tl-stereo-link:hover { color: var(--pale); }
.tl-stereo-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* --- Start --- */
.tl-stereo-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); gap: clamp(24px, 3vw, 64px); align-items: center; width: 100%; }
.tl-stereo-main { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 1.3vw, 26px); min-width: 0; }
.tl-stereo-facts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 0.8vw, 16px) !important; width: 100%; }
.tl-stereo-facts li { display: flex; flex-direction: column; gap: 6px; padding: clamp(14px, 1.2vw, 22px) !important; border: 1px solid rgb(255 255 255 / 0.16); border-radius: calc(var(--r) * 0.6); background: rgb(255 255 255 / 0.06); }
.tl-stereo-facts li::before { display: none; }
.tl-stereo-facts b { color: #fff; font-size: clamp(26px, 2.2vw, 42px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
.tl-stereo-facts span { color: rgb(255 255 255 / 0.8); font-size: clamp(16px, 0.98vw, 19px); line-height: 1.35; }
.tl-stereo-aside { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
.tl-stereo-aside figcaption { color: rgb(255 255 255 / 0.8); font-size: clamp(16px, 1vw, 19px); text-align: center; }
.tl-stereo-blackcard { width: 100%; padding: clamp(18px, 2vw, 40px); border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--r); background: #000; color: #fff; forced-color-adjust: none; }
.tl-stereo-glasses { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; }
.tl-stereo-lens { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 380px; margin: 16px auto 0; text-align: center; }
.tl-stereo-lens span { color: rgb(255 255 255 / 0.85); font-size: clamp(16px, 1vw, 19px); }
.tl-stereo-lens b { display: block; color: #fff; font-weight: 500; }

/* --- Safety --- */
.tl-stereo-safety { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 0.9vw, 18px) !important; width: 100%; }
.tl-stereo-safety li { display: flex; align-items: center; min-height: 100%; padding: clamp(16px, 1.3vw, 24px) clamp(16px, 1.3vw, 24px) clamp(16px, 1.3vw, 24px) clamp(52px, 3.6vw, 66px) !important; border: 1px solid rgb(255 255 255 / 0.16); border-radius: calc(var(--r) * 0.6); background: rgb(255 255 255 / 0.06); color: #fff !important; }
.tl-stereo-safety li::before { left: clamp(20px, 1.5vw, 28px) !important; top: 50% !important; width: 10px !important; height: 10px !important; margin-top: -5px; border-radius: 50%; background: #fca5a5 !important; }

/* --- Calibration: the outline on the left (card held at its top-left corner), steps on the right --- */
.tl-stereo-cal { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: clamp(20px, 3vw, 60px); align-items: start; width: 100%; }
.tl-stereo-calbox { display: flex; align-items: flex-start; min-width: 0; min-height: clamp(240px, 22vw, 420px); padding: 14px; border: 1px dashed rgb(255 255 255 / 0.24); border-radius: calc(var(--r) * 0.6); background: rgb(255 255 255 / 0.03); }
.tl-stereo .tl-stereo-calcard { flex: none; max-width: none; padding: 12px; }
.tl-stereo .tl-stereo-calcard span { position: relative; color: rgb(255 255 255 / 0.75); font-size: 16px; }
.tl-stereo-calside { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.2vw, 22px); min-width: 0; }
.tl-stereo-calctrl { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: clamp(14px, 1.2vw, 22px); border: 1px solid rgb(255 255 255 / 0.16); border-radius: calc(var(--r) * 0.6); background: rgb(255 255 255 / 0.06); }
.tl-stereo-calbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tl-stereo-calctrl input[type="range"] { width: 100%; accent-color: var(--soft); }
.tl-stereo-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tl-stereo-saved .fchip { margin-left: 0; }
.tl-stereo-calbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid rgb(255 255 255 / 0.5); border-radius: 999px; background: transparent; color: #fff; font-size: clamp(16px, 1vw, 19px); font-weight: 500; transition: background-color 0.2s, color 0.2s; }
.tl-stereo-calbtn span { font-size: 1.3em; line-height: 1; }
.tl-stereo-calbtn:hover { background: #fff; color: var(--navy); }
.tl-stereo-calbtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- Glasses check --- */
.tl-stereo-gl { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 60px); align-items: center; width: 100%; }
.tl-stereo-glcopy .etest-actions { margin-top: 6px; }
.tl-stereo-check { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 32px); }
.tl-stereo-check figure { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.tl-stereo-check svg { display: block; width: 100%; max-width: 180px; height: auto; }
.tl-stereo-check figcaption { color: #fff; font-size: clamp(16px, 1.05vw, 20px); font-weight: 500; }
.tl-stereo-glcopy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tl-stereo-swap { gap: 8px; }
.tl-stereo-swap svg { flex: none; }

/* --- Distance --- */
.tl-stereo-distrow { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 60px); align-items: center; width: 100%; }
.tl-stereo-distart { padding: clamp(16px, 1.8vw, 34px); border: 1px solid rgb(255 255 255 / 0.16); border-radius: var(--r); background: rgb(255 255 255 / 0.06); color: var(--pale); }
.tl-stereo-dist { display: block; width: 100%; height: auto; }

/* --- Practice and test --- */
.tl-stereo-test { display: grid; grid-template-columns: minmax(0, 434px) minmax(300px, 540px); justify-content: center; gap: clamp(24px, 4vw, 84px); align-items: center; width: 100%; }
.tl-stereo-stagewrap { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; min-width: 0; }
.tl-stereo-stage { display: grid; place-items: center; width: 100%; max-width: 434px; padding: 16px; border: 1px solid rgb(255 255 255 / 0.18); border-radius: calc(var(--r) * 0.6); background: #000; forced-color-adjust: none; }
.tl-stereo-field { display: block; max-width: 100%; background: #000; image-rendering: pixelated; }
.tl-stereo-remind { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 432px; color: rgb(255 255 255 / 0.8) !important; font-size: 16px !important; text-align: center; }
.tl-stereo-remind svg { flex: none; color: var(--soft); }
.tl-stereo-answer { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.2vw, 22px); min-width: 0; max-width: 520px; }
.tl-stereo-tag { padding: 6px 14px; border-radius: 999px; background: rgb(255 255 255 / 0.12); color: #fff !important; font-size: 16px !important; font-weight: 500; }
.tl-stereo-shapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.tl-stereo-shape, .tl-stereo-nothing { position: relative; display: flex; align-items: center; gap: 14px; min-height: clamp(64px, 4.8vw, 84px); padding: 10px 18px; border: 1px solid rgb(255 255 255 / 0.32); border-radius: 18px; background: rgb(255 255 255 / 0.07); color: #fff; font-size: clamp(17px, 1.15vw, 22px); font-weight: 500; text-align: left; transition: background-color 0.2s, border-color 0.2s, transform 0.15s; }
.tl-stereo-shape svg { flex: none; width: clamp(34px, 2.4vw, 44px); height: auto; color: var(--pale); }
.tl-stereo-shape:hover, .tl-stereo-nothing:hover { border-color: #fff; background: rgb(255 255 255 / 0.16); }
.tl-stereo-shape:active, .tl-stereo-nothing:active { transform: scale(0.97); }
.tl-stereo-shape:focus-visible, .tl-stereo-nothing:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tl-stereo-shape[aria-disabled="true"], .tl-stereo-nothing[aria-disabled="true"] { cursor: wait; opacity: 0.55; }
.tl-stereo-nothing { justify-content: center; width: 100%; min-height: 58px; border-radius: 999px; }
.tl-stereo kbd { position: absolute; top: 8px; right: 10px; padding: 1px 7px; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 6px; color: rgb(255 255 255 / 0.7); font-family: inherit; font-size: 13px; line-height: 1.4; }
.tl-stereo-nothing kbd { top: 50%; right: 16px; transform: translateY(-50%); }
.tl-stereo-keys { color: rgb(255 255 255 / 0.68) !important; font-size: 16px !important; }

/* --- Result --- */
.tl-stereo-result { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(12px, 1.2vw, 24px); align-items: stretch; width: 100%; }
.tl-stereo .result-msg { display: flex; flex-direction: column; justify-content: center; gap: 0.8em; width: 100%; }
.tl-stereo .result-msg p { max-width: 60em; color: #fff; }
.tl-stereo-addon { padding-top: 0.8em; border-top: 1px solid rgb(255 255 255 / 0.2); }
.tl-stereo-band { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.tl-stereo .tl-stereo-band h3 { color: var(--gray-700); font-size: clamp(16px, 0.95vw, 18px); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.tl-stereo .tl-stereo-band .tl-stereo-bandlabel { color: var(--navy); font-size: clamp(19px, 1.4vw, 27px); font-weight: 500; line-height: 1.25; }
.tl-stereo .tl-stereo-band .big { margin: 0.25em 0 0; color: var(--blue); font-size: clamp(38px, 3.6vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.tl-stereo .tl-stereo-band .tl-stereo-levellabel { color: var(--gray-700); font-size: 16px; }
.tl-stereo-meta { color: rgb(255 255 255 / 0.72) !important; font-size: 16px !important; }

/* --- Tablet and phone --- */
@media (max-width: 991.98px) {
  .tl-stereo .etest-bar { padding: 16px 5vw; }
  .tl-stereo .etest-screen { gap: 20px; padding: 28px 5vw 32px; }
  .tl-stereo-split { grid-template-columns: 1fr; gap: 26px; }
  .tl-stereo-aside { order: -1; }
  .tl-stereo-blackcard { max-width: 460px; margin-inline: auto; }
  .tl-stereo-safety { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-stereo-cal { grid-template-columns: 1fr; }
  .tl-stereo-cal { gap: 18px; }
  .tl-stereo-calside { display: contents; }
  .tl-stereo-calside > p { order: 1; }
  .tl-stereo-calbox { order: 2; }
  .tl-stereo-calctrl { order: 3; border-radius: 18px; }
  .tl-stereo-calside > .tl-stereo-saved { order: 4; }
  .tl-stereo-calside > .etest-actions { order: 5; }
  .tl-stereo-gl, .tl-stereo-distrow { grid-template-columns: 1fr; }
  .tl-stereo-test { grid-template-columns: 1fr; justify-items: center; }
  .tl-stereo-stagewrap { max-width: 434px; }
  .tl-stereo-answer { width: 100%; max-width: 560px; }
  .tl-stereo-result { grid-template-columns: 1fr; }
  .tl-stereo .result-msg { padding: 20px; }
  .tl-stereo .result-eye { padding: 20px; border-radius: 20px; }
  .tl-stereo .etest-note { padding: 16px; }
}
@media (max-width: 767.98px) {
  .panel.dark .tl-stereo { width: auto; margin-inline: calc(var(--pad) * -1 + 4px); }
  .tl-stereo .etest { border-radius: 24px; }
  .tl-stereo .etest-bar { padding: 14px 16px; }
  .tl-stereo .etest-screen { padding: 24px 16px 28px; }
  .tl-stereo-facts { grid-template-columns: 1fr; }
  .tl-stereo-facts li { flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px !important; }
  .tl-stereo-facts b { flex: none; min-width: 3.3em; font-size: 26px; }
  .tl-stereo-safety { grid-template-columns: 1fr; }
  .tl-stereo-safety li { padding: 14px 16px 14px 50px !important; border-radius: 16px; }
  .tl-stereo-safety li::before { left: 20px !important; }
  .tl-stereo-calbox { min-height: 0; padding: 0; border: 0; background: none; }
  .tl-stereo-blackcard { padding: 18px; border-radius: 22px; }
  .tl-stereo-stage { padding: 10px; border-radius: 18px; }
  .tl-stereo-shape { min-height: 62px; padding: 10px 14px; gap: 10px; font-size: 17px; }
  .tl-stereo kbd { display: none; }
  .tl-stereo .result-msg { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-stereo .etest, .tl-stereo-shape, .tl-stereo-nothing, .tl-stereo-calbtn { transition: none; }
}
@media print {
  .tool-panel:has(.tl-stereo) { margin: 0; padding: 0; background: none !important; color: #000; }
  .tl-stereo .etest, .tl-stereo .etest.is-dark { border: 0; background: #fff !important; color: #000; }
  .tl-stereo .etest-bar, .tl-stereo .etest-actions, .tl-stereo-link { display: none !important; }
  .tl-stereo .etest-screen h2, .tl-stereo .etest-screen p, .tl-stereo .result-msg p { color: #000 !important; }
  .tl-stereo .result-msg { border: 1px solid #999; background: #fff !important; }
  .tl-stereo .result-eye { border: 1px solid #999; }
}