/* Brightness & Tilt Analysis. Black and white; red, green and blue only where they are light zones.
   Glass on the controls only: the windows and the chart sit on solid ground so their tones read true. */

.wrap.page-hero.bta-hero{padding-top:28px;padding-bottom:26px}
.bta-hero .ver{max-width:62ch;margin-top:10px}

/* ---------- The bench: windows first, settings beside them, what they show right under ---------- */
.bta-bench{padding:8px 0 44px;overflow:visible}
.bta-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
/* one cut: the 2 x 2 windows fit the screen height, so all four are in view at once */
.bta:not(.bta-cmp) .bta-grid{grid-template-columns:minmax(0,max(440px,calc(100vh - 250px))) 330px;justify-content:center}
.bta-stage{display:flex;flex-direction:column;gap:14px;min-width:0}
.bta-row[hidden],.bta-rowhead[hidden]{display:none}
.bta-wins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bta-cmp .bta-wins{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bta-win{margin:0;background:#0A0C0E;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-inner);overflow:hidden;display:flex;flex-direction:column}
.bta-win canvas{display:block;width:100%;height:auto;aspect-ratio:1;background:#0A0C0E}
.bta-win figcaption{padding:9px 12px 11px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:1px;background:#0A0C0E}
.bta-win figcaption b{font-weight:600;font-size:.9375rem}
.bta-win figcaption span{font-size:.8125rem;color:#A3A3A3;min-height:1.1em}
.bta-cmp .bta-win figcaption{padding:7px 9px 9px}
.bta-cmp .bta-win figcaption b{font-size:.8125rem}
.bta-cmp .bta-win figcaption span{font-size:.75rem}
.bta-rowhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 8px;font-size:.9375rem}
.bta-rowhead b{font-weight:620}
.bta-rowhead .num{color:#A3A3A3;font-size:.8125rem}
.bta-key{display:inline-block;width:18px;height:0;border-top:2px solid #fff;align-self:center}
.bta-key-b{border-top-style:dashed}
.bta-msg{margin:0;padding:14px 16px;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-inner);color:rgba(255,255,255,.86);font-size:.9375rem}
.bta-nogl .bta-wins{display:none}

/* the settings panel */
.bta-panel{border-radius:var(--r-panel);padding:18px 18px 16px;display:flex;flex-direction:column;gap:16px}
.bta-panel > *{position:relative}
.bta-field{display:flex;flex-direction:column;gap:7px}
.bta-field[hidden]{display:none}
.bta-field label,.bta-switch-row > span{font-size:.875rem;font-weight:560;color:#fff}
.bta-field select{font:inherit;font-size:.9375rem;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.24);border-radius:var(--r-chip);padding:9px 12px;min-height:42px;width:100%}
.bta-field select option,.bta-field select optgroup{color:#000;background:#fff}
.bta-range-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bta-range-l output{font-size:.9375rem;font-weight:600;color:#fff;min-width:3.5ch;text-align:right}
.bta-field input[type=range]{width:100%;accent-color:#fff;margin:4px 0;min-height:28px;background:none}
.bta-hint{font-size:.75rem;line-height:1.35;color:#A3A3A3;margin:0}
.bta-switch-row{flex-direction:row;align-items:center;justify-content:space-between}
.bta-switch{position:relative;width:48px;height:28px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);cursor:pointer;padding:0;flex:none}
.bta-switch span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.bta-switch[aria-checked="true"]{background:#fff;border-color:#fff}
.bta-switch[aria-checked="true"] span{background:#000;transform:translateX(20px)}
.bta-acts{display:flex;gap:8px;flex-wrap:wrap}
.bta-sm{padding:9px 16px;min-height:40px;font-size:.875rem}
.bta-status{font-size:.8125rem;color:#A3A3A3;margin:-6px 0 0;min-height:1.2em;overflow-wrap:anywhere}
.bta-status:empty{display:none}
.bta-links{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:6px;font-size:.875rem}
.bta-links:empty{display:none}
.bta-links a{color:#fff;text-underline-offset:3px;text-decoration-thickness:1px}
.bta :focus-visible{outline:2px solid currentColor;outline-offset:2px}
.bta-bench :focus-visible{outline-color:#fff}

/* what the four windows show: one card per window, in window order */
.bta-models{grid-column:1/-1;margin-top:4px;min-width:0}
.bta-models-h{font-size:1.1875rem;font-weight:620;letter-spacing:-.01em;margin:0 0 6px}
.bta-models-lede{color:#A3A3A3;font-size:.9375rem;max-width:80ch;margin:0}
.bta-cards{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bta-card{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-inner);padding:14px 16px 15px;background:#0A0C0E}
.bta-card h3{font-size:.9375rem;font-weight:620;margin:0 0 5px}
.bta-card p{margin:0;color:#A3A3A3;font-size:.8438rem;line-height:1.45}
.bta-zones{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px;font-size:.8125rem;color:rgba(255,255,255,.86)}
.bta-zones .dot{margin-right:7px}
.bta-models-note{color:#A3A3A3;font-size:.8125rem;max-width:90ch;margin:14px 0 0}

/* ---------- Below the bench ---------- */
.bta-body{max-width:1000px;padding-top:48px;padding-bottom:88px}
.bta-sec{margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.bta-body > .bta-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.bta-sec h2{font-size:1.5rem;line-height:1.2;font-weight:620;letter-spacing:-.02em;margin:0 0 12px}
.bta-sec > p{max-width:72ch;margin:0 0 12px}
.bta-sec .callout p{max-width:none}
.mut{color:var(--muted)}

/* the table */
.bta-tw{margin-top:18px}
.bta-tw .bta-tab{min-width:520px}
.bta-tab th,.bta-tab td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bta-tab th:first-child,.bta-tab tbody th{text-align:left}
.bta-tab thead th{font-size:.8125rem;vertical-align:bottom}
.bta-tab th span{display:block;font-size:.75rem;font-weight:400;color:var(--muted);white-space:normal}
.bta-tab tbody th{font-weight:600}
.bta-tab tr.bta-leak th,.bta-tab tr.bta-leak td{border-top:2px solid var(--line)}
.bta-cmp .bta-tab thead th.cb{border-bottom:2px dashed var(--fg)}
.bta-cmp .bta-tab thead th.ca{border-bottom:2px solid var(--fg)}
.is-busy .bta-tab tbody{opacity:.55;transition:opacity .2s}
.sk{position:relative}
.sk::after{content:"";position:absolute;right:14px;top:50%;width:52px;height:10px;margin-top:-5px;border-radius:5px;background:var(--line)}
@media (prefers-reduced-motion:no-preference){.sk::after{animation:bta-pulse 1.2s ease-in-out infinite}}
@keyframes bta-pulse{50%{opacity:.4}}
.bta-chips[hidden]{display:none}
.bta-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0}
.bta-chips li{font-size:.8125rem;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line)}
.bta-chips b{font-weight:620;margin-right:4px}
.bta-busy{min-height:1.2em;font-size:.8125rem;color:var(--muted);margin:8px 0 0}

/* the chart: a solid ground, never glass */
.bta-chart{margin:18px 0 0;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--bg);padding:16px 16px 12px}
.bta-chart canvas{display:block;width:100%;height:auto}
.bta-chart-key{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8125rem;color:var(--muted);margin-top:10px}
.bta-chart-key span{display:inline-flex;align-items:center;gap:7px}
.bta-chart-key .mk{display:inline-block;width:10px;height:10px;background:currentColor}
.bta-chart-key .mk-circle{border-radius:50%}
.bta-chart-key .mk-tri{background:none;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid currentColor}
.bta-chart-key .ln{display:inline-block;width:22px;border-top:2px solid var(--fg)}
.bta-chart-key .ln-d{border-top-style:dashed}
.bta-data{margin-top:12px}
.bta-data summary{cursor:pointer;font-size:.875rem;font-weight:560;padding:6px 0}
.bta-data table{min-width:600px;font-size:.8125rem}
.bta-data td{text-align:right;font-variant-numeric:tabular-nums}

/* provenance */
.bta-provs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:14px;margin-top:16px}
.bta-prov[hidden]{display:none}
.bta-prov{border:1px solid var(--line);border-left:3px solid var(--fg);border-radius:var(--r-inner);padding:16px 18px;background:var(--surface);font-size:.9375rem}
.bta-prov h3{font-size:1rem;font-weight:620;margin:0 0 6px}
.bta-prov p{margin:0 0 10px;color:var(--muted)}
.bta-prov dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0 0 10px;font-variant-numeric:tabular-nums}
.bta-prov dt{color:var(--muted)}
.bta-prov dd{margin:0}
.bta-prov .also{font-size:.875rem;font-weight:560}
.bta-prov a,.bta-sec a{text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- Narrow screens: settings under the windows; windows stay 2 x 2 ---------- */
@media (max-width:980px){
  .bta-grid,.bta:not(.bta-cmp) .bta-grid{grid-template-columns:1fr}
  .bta-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
  .bta-panel .bta-acts,.bta-panel .bta-status,.bta-panel .bta-links{grid-column:1/-1}
  .bta-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .bta-cmp .bta-wins{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .bta-panel{grid-template-columns:1fr}
}
@media (max-width:480px){
  .bta-wins,.bta-cmp .bta-wins{gap:8px}
  .bta-win figcaption{padding:7px 9px 9px}
  .bta-win figcaption b{font-size:.8125rem}
  .bta-win figcaption span{font-size:.75rem}
  .bta-cards{grid-template-columns:1fr}
  .bta-body{padding-top:36px}
}
@media (prefers-reduced-motion:reduce){
  .bta-switch span,.is-busy .bta-tab tbody{transition:none}
}