/* ============================================================
   V3-CALIBRATE.CSS — Codex Calibration layout (design-review/mockups/calibration-*-v1.webp,
   spec HANDOFF.md "Calibration quiet/bark phase design"). Written boxes in reference px scaled by --u
   (desktop ref 1920x1080, phone ref 844x390). Same ids + same js/microphone.js flow; js/v3-calibrate.js
   only adds presentation nodes (panel frame, step tracker, input meter, back button).
   ============================================================ */
#screen-calibrate{
  --u: min(calc(100vw / 844), calc(100vh / 390));
  --st: env(safe-area-inset-top, 0px);
  --blue:#00C2FF; --red:#FF2D2D; --green:#00FF87; --amber:#FFB300; --yellow:#FFE600;
  --ink:#F4F7FF; --ink2:#B7C4D8; --muted:#899AB3; --edge:#344963; --panel:#121C32;
  --acc:var(--blue);
  position:relative; overflow:hidden !important; padding:0 !important; gap:0 !important;
  height:100vh; height:100dvh; min-height:0 !important; max-height:none !important;
  background:linear-gradient(180deg, rgba(8,13,26,.28), rgba(8,13,26,.5)), url('../assets/ui/lobby-bg-v4-mobile.webp') center / cover no-repeat !important;
}
#screen-calibrate::before, #screen-calibrate::after{ display:none !important; }   /* lobby.css scrim + glow */
#screen-calibrate[data-phase="bark"]{ --acc:var(--yellow); }
@media (min-width:768px) and (min-height:521px){
  #screen-calibrate{ --u: min(calc(100vw / 1920), calc(100vh / 1080));
    background:linear-gradient(180deg, rgba(8,13,26,.28), rgba(8,13,26,.5)), url('../assets/ui/lobby-bg-v4.webp') center / cover no-repeat !important; }
}
#screen-calibrate > *{ position:absolute !important; margin:0 !important; z-index:2; box-sizing:border-box; }

/* title ribbon (248,8,348,44) / (520,24,880,112) */
#screen-calibrate .cal-title{
  left:calc(248 * var(--u)); top:calc(8 * var(--u) + var(--st)); width:calc(348 * var(--u)); height:calc(44 * var(--u));
  display:flex; align-items:center; justify-content:center; gap:.3em; padding:0 calc(12 * var(--u));
  border-style:solid; border-width:calc(8 * var(--u)) calc(20 * var(--u)); border-image:url('../assets/ui/header-ribbon-v3.webp') 24 96 fill / calc(8 * var(--u)) calc(20 * var(--u));
  filter:drop-shadow(0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.6));
  font-family:'Bangers','Oswald',sans-serif; font-size:calc(26 * var(--u)); letter-spacing:2px; line-height:1; color:var(--ink); text-shadow:0 2px 0 #000; white-space:nowrap;
}
#screen-calibrate .cal-title em{ font-style:normal; color:var(--blue); }

/* main panel (92,64,660,264) / (360,176,1200,736) */
#screen-calibrate .cal-panel{
  left:calc(92 * var(--u)); top:calc(64 * var(--u) + var(--st)); width:calc(660 * var(--u)); height:calc(264 * var(--u)); z-index:1; pointer-events:none;
  border-style:solid; border-width:calc(14 * var(--u)); border-image:url('../assets/ui/panel-frame-v3.webp') 64 fill / calc(14 * var(--u));
  filter:drop-shadow(0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.6));
}
#screen-calibrate .cal-panel::after{ content:''; position:absolute; inset:calc(4 * var(--u)); background:rgba(8,13,26,.55); border-radius:calc(8 * var(--u)); }

/* step tracker (180,80,484,36) / (504,216,912,72) */
#screen-calibrate .cal-steps{
  left:calc(180 * var(--u)); top:calc(80 * var(--u) + var(--st)); width:calc(484 * var(--u)); height:calc(36 * var(--u));
  display:flex; align-items:center; gap:calc(10 * var(--u)); pointer-events:none;
}
#screen-calibrate .cal-step{
  flex:1 1 0; height:100%; display:flex; align-items:center; gap:calc(10 * var(--u)); padding:0 calc(10 * var(--u)) 0 calc(6 * var(--u));
  background:rgba(8,13,26,.75); border:calc(1.5 * var(--u)) solid var(--edge); border-radius:calc(8 * var(--u));
  font-family:'Oswald',sans-serif; font-weight:700; font-size:calc(14 * var(--u)); letter-spacing:2px; color:var(--muted); text-transform:uppercase;
}
#screen-calibrate .cal-step b{ width:calc(24 * var(--u)); height:calc(24 * var(--u)); border-radius:calc(6 * var(--u)); display:flex; align-items:center; justify-content:center; background:#1C2A45; color:var(--ink2); font-size:calc(13 * var(--u)); letter-spacing:0; flex:0 0 auto; }
#screen-calibrate .cal-step .ico{ width:calc(14 * var(--u)); height:calc(14 * var(--u)); margin-left:auto; display:none; color:var(--green); }
#screen-calibrate .cal-step.active{ color:var(--ink); border-color:var(--acc); box-shadow:0 0 calc(12 * var(--u)) rgba(0,194,255,.25); }
#screen-calibrate .cal-step.active b{ background:var(--acc); color:#08111f; }
#screen-calibrate[data-phase="bark"] .cal-step.active{ box-shadow:0 0 calc(12 * var(--u)) rgba(255,230,0,.25); }
#screen-calibrate .cal-step.done{ color:var(--ink2); border-color:rgba(0,255,135,.5); }
#screen-calibrate .cal-step.done b{ background:var(--green); color:#04140b; }
#screen-calibrate .cal-step.done .ico{ display:block; }
#screen-calibrate .cal-link{ flex:0 0 calc(24 * var(--u)); height:calc(2 * var(--u)); background:var(--edge); }

/* phase heading (284,128,308,56) / (648,328,624,128) = #calib-head; glyph (204,128,64,64) / (872,528,176,144) = #calib-emoji */
#screen-calibrate #calib-head{
  left:calc(284 * var(--u)); top:calc(128 * var(--u) + var(--st)); width:calc(308 * var(--u)); height:calc(56 * var(--u));
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Bangers','Oswald',sans-serif !important; font-size:calc(40 * var(--u)) !important; line-height:1 !important; letter-spacing:2px; color:var(--ink) !important; text-shadow:0 3px 0 #000, 0 0 calc(18 * var(--u)) rgba(0,194,255,.35) !important;
  animation:none !important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
#screen-calibrate[data-phase="bark"] #calib-head{ color:var(--yellow) !important; text-shadow:0 3px 0 #000, 0 0 calc(18 * var(--u)) rgba(255,230,0,.35) !important; }
#screen-calibrate #calib-emoji{
  left:calc(204 * var(--u)); top:calc(128 * var(--u) + var(--st)); width:calc(64 * var(--u)); height:calc(64 * var(--u));
  display:flex; align-items:center; justify-content:center; color:var(--acc); font-size:calc(28 * var(--u)) !important; animation:none !important;
}
#screen-calibrate #calib-emoji .ico, #screen-calibrate #calib-emoji svg{ width:calc(34 * var(--u)) !important; height:calc(34 * var(--u)) !important; }
#screen-calibrate #calib-emoji img{ width:calc(44 * var(--u)) !important; height:calc(44 * var(--u)) !important; }
#screen-calibrate #calib-emoji::before{ content:''; position:absolute; inset:calc(6 * var(--u)); border-radius:50%; border:calc(2 * var(--u)) solid var(--acc); opacity:.7; }
#screen-calibrate:not(.reduced) #calib-emoji::before{ animation:cal-ring 1.6s ease-in-out infinite; }
@keyframes cal-ring{ 0%,100%{ transform:scale(.92); opacity:.45; } 50%{ transform:scale(1.04); opacity:.9; } }

/* instruction (148,192,548,24) / (504,464,912,48) = #calib-sub */
#screen-calibrate #calib-sub{
  left:calc(148 * var(--u)); top:calc(192 * var(--u) + var(--st)); width:calc(548 * var(--u)); height:calc(24 * var(--u)); max-width:none !important;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Oswald',sans-serif !important; font-weight:500 !important; font-size:calc(14 * var(--u)) !important; line-height:1.2 !important; color:var(--ink) !important; text-shadow:0 1px 0 #000;
}

/* progress (124,232,596,20) / (504,696,912,40) = .calib-bar */
#screen-calibrate .calib-bar{
  left:calc(124 * var(--u)); top:calc(232 * var(--u) + var(--st)); width:calc(596 * var(--u)) !important; height:calc(20 * var(--u)) !important;
  background:rgba(8,13,26,.85) !important; border:calc(1.5 * var(--u)) solid var(--edge); border-radius:calc(6 * var(--u)) !important; overflow:hidden; padding:calc(2 * var(--u));
}
#screen-calibrate .calib-fill{ height:100% !important; border-radius:calc(4 * var(--u)); background:linear-gradient(180deg, #7ee2ff, var(--blue) 55%, #0083b8) !important; transition:width .1s linear !important; box-shadow:0 0 calc(10 * var(--u)) rgba(0,194,255,.5); }
#screen-calibrate[data-phase="bark"] .calib-fill{ background:linear-gradient(180deg, #fff3a0, var(--yellow) 55%, #c9a800) !important; box-shadow:0 0 calc(10 * var(--u)) rgba(255,230,0,.5); }

/* status (124,260,596,24) / (504,748,912,36) = #calib-text */
#screen-calibrate #calib-text{
  left:calc(124 * var(--u)); top:calc(260 * var(--u) + var(--st)); width:calc(596 * var(--u)); height:calc(24 * var(--u)); max-width:none !important;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Oswald',sans-serif !important; font-weight:500 !important; font-size:calc(14 * var(--u)) !important; line-height:1.2 !important; color:var(--ink2) !important; opacity:1 !important;
}

/* input meter (256,292,332,24) / (712,808,496,48): real analyser level from micRms(), never the classifier */
#screen-calibrate .cal-meter{
  left:calc(256 * var(--u)); top:calc(292 * var(--u) + var(--st)); width:calc(332 * var(--u)); height:calc(24 * var(--u));
  display:flex; align-items:center; gap:calc(8 * var(--u)); padding:0 calc(10 * var(--u));
  background:rgba(8,13,26,.8); border:calc(1.5 * var(--u)) solid var(--edge); border-radius:calc(8 * var(--u)); pointer-events:none;
}
#screen-calibrate .cal-meter span{ font-family:'Oswald',sans-serif; font-weight:700; font-size:calc(10 * var(--u)); letter-spacing:1.5px; color:var(--muted); white-space:nowrap; }
#screen-calibrate .cal-meter .bars{ flex:1 1 auto; height:calc(12 * var(--u)); display:flex; gap:calc(3 * var(--u)); }
#screen-calibrate .cal-meter .bars i{ flex:1 1 0; background:#1C2A45; border-radius:calc(2 * var(--u)); }
#screen-calibrate .cal-meter .bars i.on{ background:var(--acc); box-shadow:0 0 calc(6 * var(--u)) rgba(0,194,255,.45); }
#screen-calibrate[data-phase="bark"] .cal-meter .bars i.on{ box-shadow:0 0 calc(6 * var(--u)) rgba(255,230,0,.45); }
#screen-calibrate #calib-debug{ left:calc(124 * var(--u)); top:calc(320 * var(--u) + var(--st)); width:calc(596 * var(--u)); height:calc(14 * var(--u)); text-align:center; font-family:'Oswald',sans-serif !important; font-size:calc(10 * var(--u)) !important; color:var(--muted) !important; opacity:.9 !important; display:none; }
@media (min-width:768px) and (min-height:521px){ #screen-calibrate #calib-debug{ display:block; } }

/* back / recovery (312,338,220,44) / (752,944,416,72) */
#screen-calibrate .cal-back{
  left:calc(312 * var(--u)); top:calc(338 * var(--u) + var(--st)); width:calc(220 * var(--u)); height:max(44px, calc(44 * var(--u))); min-height:44px;
  display:inline-flex; align-items:center; justify-content:center; gap:.4em; padding:0 calc(14 * var(--u)); cursor:pointer;
  border-style:solid; border-width:calc(8 * var(--u)) calc(14 * var(--u)); border-image:url('../assets/ui/btn-dark-v3.webp') 32 48 fill / calc(8 * var(--u)) calc(14 * var(--u));
  background:none; color:var(--ink); font-family:'Oswald',sans-serif; font-weight:700; font-size:calc(14 * var(--u)); letter-spacing:2px; text-transform:uppercase; white-space:nowrap;
}
#screen-calibrate .cal-back:active{ border-image-source:url('../assets/ui/btn-dark-pressed-v3.webp'); transform:translateY(2px); }
#screen-calibrate .cal-back .ico{ width:1em; height:1em; }

/* desktop boxes */
@media (min-width:768px) and (min-height:521px){
  #screen-calibrate .cal-title{ left:calc(520 * var(--u)); top:calc(24 * var(--u)); width:calc(880 * var(--u)); height:calc(112 * var(--u)); font-size:calc(48 * var(--u)); letter-spacing:4px; border-width:calc(14 * var(--u)) calc(40 * var(--u)); border-image-width:calc(14 * var(--u)) calc(40 * var(--u)); }
  #screen-calibrate .cal-panel{ left:calc(360 * var(--u)); top:calc(176 * var(--u)); width:calc(1200 * var(--u)); height:calc(736 * var(--u)); }
  #screen-calibrate .cal-steps{ left:calc(504 * var(--u)); top:calc(216 * var(--u)); width:calc(912 * var(--u)); height:calc(72 * var(--u)); gap:calc(24 * var(--u)); }
  #screen-calibrate .cal-step{ font-size:calc(24 * var(--u)); letter-spacing:3px; gap:calc(18 * var(--u)); padding:0 calc(20 * var(--u)) 0 calc(12 * var(--u)); border-radius:calc(12 * var(--u)); }
  #screen-calibrate .cal-step b{ width:calc(44 * var(--u)); height:calc(44 * var(--u)); font-size:calc(22 * var(--u)); border-radius:calc(10 * var(--u)); }
  #screen-calibrate .cal-step .ico{ width:calc(24 * var(--u)); height:calc(24 * var(--u)); }
  #screen-calibrate .cal-link{ flex-basis:calc(48 * var(--u)); height:calc(4 * var(--u)); }
  #screen-calibrate #calib-head{ left:calc(648 * var(--u)); top:calc(328 * var(--u)); width:calc(624 * var(--u)); height:calc(128 * var(--u)); font-size:calc(72 * var(--u)) !important; letter-spacing:4px; }
  #screen-calibrate #calib-emoji{ left:calc(872 * var(--u)); top:calc(528 * var(--u)); width:calc(176 * var(--u)); height:calc(144 * var(--u)); }
  #screen-calibrate #calib-emoji .ico, #screen-calibrate #calib-emoji svg{ width:calc(84 * var(--u)) !important; height:calc(84 * var(--u)) !important; }
  #screen-calibrate #calib-emoji img{ width:calc(104 * var(--u)) !important; height:calc(104 * var(--u)) !important; }
  #screen-calibrate #calib-emoji::before{ inset:calc(10 * var(--u)) calc(26 * var(--u)); border-width:calc(3 * var(--u)); }
  #screen-calibrate #calib-sub{ left:calc(504 * var(--u)); top:calc(464 * var(--u)); width:calc(912 * var(--u)); height:calc(48 * var(--u)); font-size:calc(24 * var(--u)) !important; }
  #screen-calibrate .calib-bar{ left:calc(504 * var(--u)); top:calc(696 * var(--u)); width:calc(912 * var(--u)) !important; height:calc(40 * var(--u)) !important; padding:calc(4 * var(--u)); border-radius:calc(10 * var(--u)) !important; }
  #screen-calibrate #calib-text{ left:calc(504 * var(--u)); top:calc(748 * var(--u)); width:calc(912 * var(--u)); height:calc(36 * var(--u)); font-size:calc(20 * var(--u)) !important; }
  #screen-calibrate .cal-meter{ left:calc(712 * var(--u)); top:calc(808 * var(--u)); width:calc(496 * var(--u)); height:calc(48 * var(--u)); gap:calc(14 * var(--u)); padding:0 calc(18 * var(--u)); border-radius:calc(12 * var(--u)); }
  #screen-calibrate .cal-meter span{ font-size:calc(16 * var(--u)); letter-spacing:2px; }
  #screen-calibrate .cal-meter .bars{ height:calc(24 * var(--u)); gap:calc(5 * var(--u)); }
  #screen-calibrate #calib-debug{ top:calc(866 * var(--u)); left:calc(504 * var(--u)); width:calc(912 * var(--u)); height:calc(24 * var(--u)); font-size:calc(16 * var(--u)) !important; }
  #screen-calibrate .cal-back{ left:calc(752 * var(--u)); top:calc(944 * var(--u)); width:calc(416 * var(--u)); height:calc(72 * var(--u)); font-size:calc(22 * var(--u)); border-width:calc(12 * var(--u)) calc(22 * var(--u)); border-image-width:calc(12 * var(--u)) calc(22 * var(--u)); }
}
@media (prefers-reduced-motion:reduce){ #screen-calibrate *{ animation:none !important; } #screen-calibrate .calib-fill{ transition:none !important; } }