/* Shared design system for the My Ear Trainer suite.
   Page-specific rules live in each page's <style>, which loads after this
   file and therefore wins. */

:root{
    --case:#23261F; --case-deep:#1A1C16; --case-hi:#2C3028;
    --panel:#D9DCD2; --panel-deep:#C4C8BC; --panel-hi:#DFE2D8;
    --edge:#9BA093; --inset-hi:rgba(255,255,255,.55);
    --ink:#14170F; --ink-hi:#000; --graphite:#4A4F44; --muted:#7C8175;
    --signal:#D4441E; --correct:#1F6B4A;
    --on-signal:#FFF1EC; --on-correct:#EFF3EC;
    --rule:rgba(20,23,15,.22);
    --tint-a:rgba(20,23,15,.05);
    --tint-b:rgba(20,23,15,.08);
    --tint-c:rgba(20,23,15,.16);
    --tint-strong:rgba(20,23,15,.55);
    --field:rgba(255,255,255,.35);
    --wash-ok-a:rgba(31,107,74,.55); --wash-ok-b:rgba(31,107,74,.12);
    --wash-no-a:rgba(212,68,30,.55); --wash-no-b:rgba(212,68,30,.12);
    --ring-ok:rgba(31,107,74,.5); --ring-no:rgba(212,68,30,.5);
  }

  /* follow the OS unless the user has picked a side */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
    --case:#08090A; --case-deep:#040405; --case-hi:#121316;
    --panel:#1E2023; --panel-deep:#17181B; --panel-hi:#26282C;
    --edge:#3B3E44; --inset-hi:rgba(255,255,255,.05);
    --ink:#EDEDEB; --ink-hi:#FFFFFF; --graphite:#B0B2AE; --muted:#8E9089;
    --signal:#FF7A4D; --correct:#4ECB8F;
    --on-signal:#231009; --on-correct:#062014;
    --rule:rgba(237,237,235,.16);
    --tint-a:rgba(255,255,255,.035);
    --tint-b:rgba(255,255,255,.065);
    --tint-c:rgba(255,255,255,.13);
    --tint-strong:rgba(237,237,235,.45);
    --field:rgba(0,0,0,.3);
    --wash-ok-a:rgba(78,203,143,.34); --wash-ok-b:rgba(78,203,143,.07);
    --wash-no-a:rgba(255,122,77,.34); --wash-no-b:rgba(255,122,77,.07);
    --ring-ok:rgba(78,203,143,.5); --ring-no:rgba(255,122,77,.5);
  }
  }
  :root[data-theme="dark"]{
    --case:#08090A; --case-deep:#040405; --case-hi:#121316;
    --panel:#1E2023; --panel-deep:#17181B; --panel-hi:#26282C;
    --edge:#3B3E44; --inset-hi:rgba(255,255,255,.05);
    --ink:#EDEDEB; --ink-hi:#FFFFFF; --graphite:#B0B2AE; --muted:#8E9089;
    --signal:#FF7A4D; --correct:#4ECB8F;
    --on-signal:#231009; --on-correct:#062014;
    --rule:rgba(237,237,235,.16);
    --tint-a:rgba(255,255,255,.035);
    --tint-b:rgba(255,255,255,.065);
    --tint-c:rgba(255,255,255,.13);
    --tint-strong:rgba(237,237,235,.45);
    --field:rgba(0,0,0,.3);
    --wash-ok-a:rgba(78,203,143,.34); --wash-ok-b:rgba(78,203,143,.07);
    --wash-no-a:rgba(255,122,77,.34); --wash-no-b:rgba(255,122,77,.07);
    --ring-ok:rgba(78,203,143,.5); --ring-no:rgba(255,122,77,.5);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--case);
    background-image:radial-gradient(120% 90% at 50% 0%, var(--case-hi) 0%, var(--case) 45%, var(--case-deep) 100%);
    min-height:100dvh;
    font-family:'Barlow',system-ui,sans-serif;
    color:var(--ink);
    display:flex;flex-direction:column;align-items:center;
    padding:20px 14px 40px;
    -webkit-font-smoothing:antialiased;
  }
  .panel{
    position:relative;
    width:100%;max-width:540px;
    background:var(--panel);
    background-image:linear-gradient(180deg,var(--panel-hi) 0%, var(--panel) 30%, var(--panel-deep) 100%);
    border:1px solid var(--edge);border-radius:3px;
    box-shadow:0 1px 0 var(--inset-hi) inset, 0 18px 40px rgba(0,0,0,.45);
    padding:22px 20px 20px;
    overflow:hidden;
  }
  .flash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:5;}
  .flash.fire{animation:wash .55s ease-out;}
  @keyframes wash{0%{opacity:0;}12%{opacity:.9;}100%{opacity:0;}}
  .flash.ok{background:radial-gradient(120% 80% at 50% 50%, var(--wash-ok-a), var(--wash-ok-b) 70%, transparent);}
  .flash.no{background:radial-gradient(120% 80% at 50% 50%, var(--wash-no-a), var(--wash-no-b) 70%, transparent);}
  .panel.edge-ok{border-color:var(--correct);box-shadow:0 0 0 2px var(--ring-ok), 0 18px 40px rgba(0,0,0,.45);}
  .panel.edge-no{border-color:var(--signal);box-shadow:0 0 0 2px var(--ring-no), 0 18px 40px rgba(0,0,0,.45);}

  .tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--rule);}
  .tab{
    font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
    letter-spacing:.18em;font-size:12px;font-weight:600;
    background:none;border:none;border-bottom:2px solid transparent;
    color:var(--muted);padding:8px 12px;cursor:pointer;margin-bottom:-1px;
  }
  .tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--signal);}
  .tab-gear{margin-left:auto;font-size:15px;letter-spacing:0;padding:6px 8px;}
  .sheet-back{
    position:fixed;inset:0;z-index:40;
    background:rgba(0,0,0,.55);
    animation:fadein .16s ease-out;
  }
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  .sheet{
    position:fixed;z-index:41;
    left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(400px,calc(100vw - 32px));
    max-height:calc(100dvh - 48px);overflow-y:auto;
    background:var(--panel);
    background-image:linear-gradient(180deg,var(--panel-hi) 0%, var(--panel) 40%, var(--panel-deep) 100%);
    border:1px solid var(--edge);border-radius:3px;
    box-shadow:0 1px 0 var(--inset-hi) inset, 0 24px 60px rgba(0,0,0,.5);
    padding:18px 20px 20px;
    animation:rise .18s cubic-bezier(.2,.7,.2,1);
  }
  @keyframes rise{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
  .sheet-head{display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid var(--rule);padding-bottom:10px;}
  .sheet-title{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
    letter-spacing:.2em;font-size:12px;font-weight:700;color:var(--graphite);}
  .sheet-x{background:none;border:none;color:var(--muted);font-size:22px;
    line-height:1;cursor:pointer;padding:0 4px;}
  .sheet-x:hover{color:var(--ink);}
  .sheet-x:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
  .tab-gear[aria-expanded="true"]{color:var(--ink);}
  .tab:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
  .spotlight{animation:spotlight 1.9s ease-out;padding:10px 12px;margin:0 -12px;}
  .prog{margin:14px 0 4px;}
  .prog-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;}
  #progLabel{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
    letter-spacing:.16em;font-size:10px;color:var(--muted);}
  #progCount{font-family:'Space Mono',monospace;font-size:11px;color:var(--graphite);}
  .prog-track{height:4px;border-radius:2px;background:var(--tint-c);overflow:hidden;}
  .prog-fill{height:100%;width:0;background:var(--signal);border-radius:2px;
    transition:width .3s cubic-bezier(.2,.7,.2,1);}
  .score{display:flex;align-items:baseline;gap:10px;margin:16px 0 4px;}
  .score-num{font-family:'Space Mono',monospace;font-weight:700;font-size:44px;line-height:1;letter-spacing:-.03em;}
  .score-bars{margin-top:12px;}
  .score-row{display:flex;align-items:center;gap:8px;margin-top:6px;
    font-family:'Space Mono',monospace;font-size:11px;color:var(--graphite);}
  .score-bar{flex:1;height:6px;border-radius:3px;background:var(--tint-c);overflow:hidden;}
  .score-bar i{display:block;height:100%;background:var(--signal);border-radius:3px;}
  .score-row span{flex:0 0 58px;text-align:right;}
  .score-say{font-size:13.5px;line-height:1.5;color:var(--graphite);margin:16px 0 0;}
  .score-say b{color:var(--ink);font-weight:600;}
  #roundActions{display:grid;gap:8px;}
  .eyebrow{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.22em;font-weight:600;font-size:12px;color:var(--graphite);margin:0;}
  .sec-sub{font-size:12.5px;color:var(--muted);line-height:1.45;margin:0 0 12px;}
  .readout .unit{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:14px;font-weight:600;color:var(--graphite);}

  .btn{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.16em;font-weight:600;font-size:15px;border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:2px;padding:15px 12px;cursor:pointer;width:100%;transition:background .12s,color .12s,border-color .12s,opacity .14s;}
  .btn:hover:not(:disabled){background:var(--tint-b);}
  .btn:disabled{opacity:.32;cursor:default;}
  .btn:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
  .btn-primary{background:var(--ink);color:var(--panel);}
  .btn-sm{font-size:13px;padding:11px 8px;}
  .btn-key{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0;opacity:.55;margin-top:3px;text-transform:none;}
  .verdict small{display:block;font-family:'Barlow',sans-serif;text-transform:none;letter-spacing:0;font-weight:400;font-size:13px;color:var(--graphite);margin-top:3px;}
  .verdict.ok{color:var(--correct);}
  .verdict.no{color:var(--signal);}
  .stat-k{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:9.5px;color:var(--muted);}
  .stat-v{font-family:'Space Mono',monospace;font-size:17px;margin-top:2px;}
  .chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
  .chart-title{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--muted);}
  .chart-note{font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);}
  .block-head{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:700;color:var(--graphite);margin:0;}
  .set-row{margin-top:14px;}
  .set-lab{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--muted);margin-bottom:6px;}
  .seg{display:flex;gap:6px;flex-wrap:wrap;}
  .seg button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink);}
  .seg button:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
  .seg-val{display:block;font-family:'Space Mono',monospace;font-size:11px;opacity:.62;margin-top:3px;}
  input[type=range]{width:100%;accent-color:var(--signal);}
  .dual{position:relative;height:28px;margin-top:4px;touch-action:none;user-select:none;}
  .dual-track{position:absolute;left:0;right:0;top:12px;height:4px;border-radius:2px;background:var(--tint-c);}
  .dual-fill{position:absolute;top:0;bottom:0;background:var(--signal);border-radius:2px;}
  .dual-thumb{
    position:absolute;top:7px;width:15px;height:15px;margin-left:-7.5px;
    border-radius:50%;background:var(--panel);border:2px solid var(--signal);
    cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.35);
  }
  .dual-thumb:active{cursor:grabbing;}
  .dual-thumb:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
  .slider-val{font-family:'Space Mono',monospace;font-size:12px;color:var(--graphite);}
  .note{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:14px;}
  /* Which trainer you are in. Deliberately a row of real links rather than a
     menu: with only two, hiding one behind a control costs discovery and gives
     crawlers nothing to follow. */
  .wordmark{margin:0 0 14px;display:flex;align-items:center;gap:18px;}
  .wordmark::after{content:'';flex:1;height:1px;background:var(--rule);}
  .wm-item{
    font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
    letter-spacing:.22em;font-size:13px;font-weight:700;margin:0;
    text-decoration:none;padding-bottom:4px;
    border-bottom:2px solid transparent;transition:color .12s;
  }
  h1.wm-item{color:var(--ink);border-bottom-color:var(--signal);}
  a.wm-item{color:var(--muted);}
  a.wm-item:hover{color:var(--ink);}
  a.wm-item:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
  .prose{margin-top:14px;}
  .prose h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
    letter-spacing:.2em;font-size:12px;font-weight:700;color:var(--graphite);margin:0 0 7px;}
  .prose p{font-size:14px;line-height:1.62;color:var(--graphite);margin:0 0 13px;}
  .prose p:last-child{margin-bottom:0;}
  .prose b{color:var(--ink);font-weight:600;}
  .prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal);
    text-underline-offset:2px;}
  .prose a:hover{color:var(--signal);}
  .prose a:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
  .prose details{border-top:1px solid var(--rule);margin-top:14px;padding-top:14px;}
  .prose details:first-of-type{border-top:0;margin-top:0;padding-top:0;}
  .prose summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;}
  .prose summary::-webkit-details-marker{display:none;}
  .prose summary h2{margin:0;flex:1;transition:color .12s;}
  .prose summary:hover h2{color:var(--ink);}
  .prose summary:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
  /* chevron drawn from two borders, so there is no icon font or SVG to load */
  .prose summary::after{
    content:'';flex:none;width:7px;height:7px;margin-bottom:3px;
    border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
    transform:rotate(45deg);transition:transform .18s cubic-bezier(.2,.7,.2,1);
  }
  .prose details[open] summary::after{transform:rotate(-135deg);margin-bottom:-2px;}
  .prose details > p:first-of-type{margin-top:12px;}
  /* sits on the case background, not the panel, so it needs its own colours */
  .credit{
    width:100%;max-width:540px;
    margin-top:14px;text-align:center;
    font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.42);
  }
  .credit a{color:rgba(255,255,255,.62);text-decoration:underline;text-underline-offset:2px;}
  .credit a:hover{color:rgba(255,255,255,.9);}
  .credit a:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}