/* Keep Quiet – free online classroom noise meter · tool styles (noise-meter.js)
   Layout follows the iOS app: scene edge to edge, character centred, dial over the character's lower body, translucent bottom bar
   with a white play/pause icon, dark settings panel on the right while stopped.
   Three states on the root: .is-fresh (before the first successful start: tinted scene, text column on
   the left — H1 kicker + title, white "▶ START" pill — privacy link at the bottom; pause bar, fullscreen
   button and panel hidden), .is-running (overlay hidden), paused (neither: panel on the right, small
   "▶ Resume" pill at 87 %, H1 kept in the DOM as .sr-only). Cat and dial stay centred in ALL states;
   .is-fresh only caps their width (--nm-cap) so they never touch the text column (≥ 24 px gap).
   Critical for first paint: .nm-stage, .nm-scene, .nm-char, .nm-indicator/.nm-dial, .nm-bottom, .nm-play.
   Controls use system-ui (app look); the page around the tool keeps Fredoka/Nunito. */
.nm{--nm-g1:#3ABF5A;--nm-g2:#F2D22B;--nm-g3:#F58A2A;--nm-g4:#F0423B;--nm-accent:#4DA3FF;--nm-accent-hover:#3690F0;--nm-ink:#1E2A44;
  --nm-grad:linear-gradient(90deg,var(--nm-g1) 0%,var(--nm-g2) 45%,var(--nm-g3) 72%,var(--nm-g4) 100%);
  --nm-font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --nm-bar-h:clamp(88px,12vh,124px);          /* bottom bar height; play/pause icon ≈ 0.77 of it */
  --nm-icon:clamp(68px,9.2vh,96px);
  --nm-start-h:64px;--nm-start-f:1.25rem;    /* pre-start pill button */
  --nm-cap:90%;                              /* max width of cat box and dial; .is-fresh (≥ 700 px) caps it next to the text column */
  position:relative;width:100%;font-family:var(--nm-font)}
/* stage = viewport minus everything above it (--nm-above is measured by the script; 0 on tool-test.html) */
.nm-stage{position:relative;width:100%;height:calc(100vh - var(--nm-above,0px));height:max(480px,calc(100svh - var(--nm-above,0px)));min-height:480px;overflow:hidden;background:#9bd0ee;isolation:isolate}
.nm-scenes,.nm-chars{position:absolute;inset:0;pointer-events:none}
.nm-chars,.nm-indicator{transition:opacity .4s ease,visibility .4s}   /* phones hide the dial before the first start */
.nm-scene,.nm-scene img{position:absolute;inset:0;width:100%;height:100%}
.nm-scene img{object-fit:cover;object-position:50% 60%;display:block}
.nm-scene{opacity:0;transition:opacity .4s ease}
.nm-scene.is-active{opacity:1}
/* character box: 58% of the stage height AND at most 90% of its width, centred; the img never
   distorts (object-fit: contain, anchored bottom centre so the feet stay put) */
.nm-char{position:absolute;left:50%;bottom:17%;height:64%;width:var(--nm-cap);max-width:90%;transform:translateX(-50%);display:none;
  transition:width .4s ease,bottom .4s ease,height .4s ease}
.nm-char.is-active{display:block}
.nm-char img{width:100%;height:100%;max-width:none;object-fit:contain;object-position:bottom center;display:block}


/* indicator: dial (default) or bar — never both */
.nm-indicator{position:absolute;left:50%;bottom:14.5%;z-index:3;transform:translateX(-50%);width:min(clamp(220px,34vh,420px),var(--nm-cap));pointer-events:none;
  transition:width .4s ease,opacity .4s ease,visibility .4s}
.nm-dial{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.28))}
.nm[data-indicator="bar"] .nm-dial{display:none}
.nm[data-indicator="dial"] .nm-bar{display:none}
.nm-bar{position:relative;height:clamp(40px,6vh,56px);border-radius:16px;background:var(--nm-grad);box-shadow:0 3px 10px rgba(0,0,0,.25)}
.nm-bar-marker{position:absolute;top:50%;left:0;height:50%;aspect-ratio:1;background:#fff;border-radius:4px;
  transform:translate(-50%,-50%) rotate(45deg);transition:left .12s linear;box-shadow:0 1px 4px rgba(0,0,0,.25)}

/* bottom bar + play/pause (app: wide translucent rounded bar, white icon only) */
.nm-bottom{position:absolute;left:5%;right:5%;bottom:2.5%;z-index:4;height:var(--nm-bar-h);border-radius:24px;
  background:rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;transition:opacity .3s ease,visibility .3s}
.nm-play{width:100%;height:100%;min-width:64px;min-height:64px;border:0;background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:24px;padding:0}   /* the whole translucent bar is the hit area; pause only */
.nm-play svg{width:var(--nm-icon);height:auto;fill:#fff;filter:drop-shadow(0 2px 5px rgba(0,0,0,.3))}
.nm:not(.is-running) .nm-bottom{opacity:0;visibility:hidden;pointer-events:none}
/* fullscreen button, top-left, all states: white pill with text while fresh/paused, round icon while running.
   Where the Fullscreen API is missing it toggles .is-expanded (stage fixed over the page). */
.nm-fs{position:absolute;top:18px;left:18px;z-index:5;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border:0;border-radius:999px;
  background:rgba(0,0,0,.28);color:#fff;font:700 .95rem var(--nm-font);cursor:pointer;text-shadow:none}   /* z 5: below the panel (6), so the open panel / phone sheet covers it */
.nm-fs svg{width:22px;height:22px;flex:none}
.nm-fs:hover{background:rgba(0,0,0,.4)}
.nm.is-running .nm-fs{width:46px;height:46px;padding:0;justify-content:center}
.nm.is-running .nm-fs-text{display:none}
/* expanded mode (no Fullscreen API): the stage covers the viewport above the header, page scroll locked */
.nm.is-expanded .nm-stage{position:fixed;inset:0;z-index:100;height:100vh;height:100dvh;min-height:0;background:#000}
html.nm-lock,html.nm-lock body{overflow:hidden}
.nm-hint{position:absolute;top:72px;left:50%;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:6px;max-width:calc(100% - 32px);
  padding:6px 6px 6px 12px;border-radius:12px;background:rgba(0,0,0,.75);color:#fff;font:600 .85rem/1.35 var(--nm-font)}
.nm-hint-x{width:32px;height:32px;flex:none;border:0;border-radius:50%;background:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.nm-hint-x:hover{background:rgba(255,255,255,.18)}
.nm-hint-x svg{width:16px;height:16px}
.nm-play:disabled{opacity:.6;cursor:wait}

/* overlay (bouncyballs-style). Fresh: tint .3, text column left (6 % padding, 30 % wide, vertically
   centred): H1 = kicker + big title (2–3 lines), white "▶ START" pill 28 px below; cat + dial stay centred
   (width capped by --nm-cap); privacy link bottom centre. Paused: light tint, the stack is just the small "▶ Resume" pill
   at 87 %, link hidden, H1 .sr-only (set by the script). Running: faded out. */
.nm-overlay{position:absolute;inset:0;z-index:4;background:rgba(0,0,0,.2);transition:opacity .3s ease,visibility .3s,background .3s}
.nm.is-fresh .nm-overlay{background:rgba(0,0,0,.3)}
.nm-stack{position:absolute;left:0;right:0;top:87%;transform:translateY(-50%);text-align:center;padding:0 16px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.nm.is-fresh .nm-stack{right:auto;width:30%;top:50%;text-align:left;padding:0 0 0 6%}   /* border-box: text from 6 % to 30 % of the stage */
.nm-stack h1{color:#fff;margin:0;line-height:1.05}
.nm-stack .kicker{display:block;font:700 1.1rem/1.4 "Nunito",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
.nm-stack .big{display:block;font-size:clamp(2.6rem,5vw,4.6rem)}   /* Fredoka from styles.css */
.nm-start{display:inline-flex;align-items:center;justify-content:center;min-height:var(--nm-start-h);margin-top:28px;padding:0 2em;border:0;border-radius:999px;background:#fff;color:var(--nm-ink);font:700 var(--nm-start-f) var(--nm-font);text-transform:uppercase;letter-spacing:.04em;text-shadow:none;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:background .15s,transform .15s}
.nm-start:hover{background:#f3f3f3;transform:translateY(-1px)}
.nm-start:disabled{opacity:.6;cursor:wait;transform:none}
.nm-privacy{position:absolute;left:0;right:0;bottom:16px;margin:0;padding:0 16px;text-align:center;font:600 .9rem/1.4 var(--nm-font);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.nm-privacy a{display:inline-block;color:#fff;text-decoration:underline;text-underline-offset:3px}   /* inline-block: a wrapped link stays clickable between its lines */
.nm-privacy a:hover{text-decoration-thickness:2px}
.nm:not(.is-fresh) .nm-privacy{display:none}
.nm:not(.is-fresh) .nm-start{min-height:48px;margin-top:0;padding:0 1.6em;font-size:1.1rem;text-transform:none;letter-spacing:0}
@media (min-width:700px){
  .nm.is-fresh{--nm-cap:calc(40% - 48px)}   /* centred cat/dial half-width ≤ 20 % − 24 px → left edge ≥ 24 px right of the 30 % column */
}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nm.is-running .nm-overlay{opacity:0;visibility:hidden;pointer-events:none}

/* messages (status / errors only) sit above the dial so they never cover dial or character; never catch clicks */
.nm-msg{position:absolute;left:50%;bottom:45%;z-index:5;transform:translateX(-50%);pointer-events:none;
  width:max-content;max-width:min(90%,34rem);margin:0;padding:.55rem 1rem;border-radius:14px;background:rgba(0,0,0,.55);color:#fff;font-size:1rem;
  font-weight:600;text-align:center}
.nm-msg:empty{display:none}
.nm.is-fresh .nm-msg{bottom:12%}   /* pre-start errors (mic blocked) sit between the stack and the privacy link */
.nm-msg.is-error{background:rgba(240,66,59,.95)}

/* settings panel (bouncyballs-style): translucent dark panel over the right of the scene, visible while
   stopped/paused, slides out while running (no toggle). Under 700 px it is a bottom sheet (max 45 %) and
   the start pill + character move up so the pill stays fully above it. */
.nm-panel{position:absolute;top:0;right:0;bottom:0;z-index:6;width:340px;max-width:85%;background:rgba(0,0,0,.45);color:#fff;
  display:flex;flex-direction:column;overflow:hidden;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility .3s}
.nm-panel-body{flex:1;min-height:0;overflow:auto;padding:24px 14px 20px}
.nm-sheet-close,.nm-sheet-resume{display:none}   /* phone sheet only */
.nm.is-panel-open .nm-panel{transform:none;visibility:visible}
.nm-h{display:block;color:#fff;font:700 .95rem var(--nm-font);margin:18px 0 8px}
.nm-h:first-child{margin-top:0}
.nm-h-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* white pill buttons inside the panel (Fullscreen, I'm interested) */
.nm-pill{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:0;border-radius:999px;padding:0 1.2em;
  background:#fff;color:var(--nm-ink);font:700 1rem var(--nm-font);cursor:pointer;text-shadow:none}
.nm-pill:hover{background:#f3f3f3}
.nm-pill[hidden]{display:none}
/* thumbs: 52 px rounded squares, 5 per row (292 px: fits the 312 px panel content even with a classic scrollbar),
   image on a soft translucent square (same look for characters and scenes) */
.nm-grid{display:grid;grid-template-columns:repeat(5,52px);gap:8px;justify-content:start}
.nm-thumb{position:relative;width:52px;height:52px;padding:0;background:rgba(255,255,255,.18);border:3px solid transparent;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff}
.nm-thumb[aria-pressed="true"]{border-color:var(--nm-accent)}
.nm-thumb[aria-pressed="true"]:hover{border-color:var(--nm-accent-hover)}
.nm-thumb:hover{background:rgba(255,255,255,.3)}
.nm-thumb img{width:100%;height:100%;max-width:none;object-fit:contain;border-radius:8px;display:block}
.nm-thumb.is-locked img{opacity:.75}
.nm-thumb.is-flash,.nm-thumb:focus-visible{outline:3px solid #fff;outline-offset:2px}   /* focus = white ring; selection = blue border */
/* one lock badge for every locked thumb: 18 px white circle, navy glyph, bottom-right */
.nm-lock{position:absolute;right:2px;bottom:2px;width:18px;height:18px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.nm-lock svg{width:11px;height:11px;stroke:var(--nm-ink)}
.nm-legend{margin:8px 0 0;font:600 .8rem/1.4 var(--nm-font);opacity:.85}
.nm-ind{grid-template-columns:repeat(2,142px)}
.nm-ind .nm-thumb{width:142px;height:72px;padding:4px 8px}   /* dial / bar preview, no caption (aria-label only) */
.nm-ind .nm-thumb svg{width:100px;height:auto;flex:none}
/* inline interest card (after a locked tap) */
.nm-card{margin:10px 0 0;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.12)}
.nm-card p{margin:0 0 10px;font:600 .92rem/1.45 var(--nm-font)}
.nm-card .nm-pill{min-height:44px}
.nm-card-thanks{margin:0 !important}
/* feedback line (top of the panel, after a pause that ends a ≥ 2 min session) */
.nm-feedback{display:flex;align-items:center;gap:2px;margin:0 0 10px;padding:2px 2px 2px 12px;border-radius:14px;background:rgba(255,255,255,.12);font:700 .95rem var(--nm-font)}
.nm-fb-q{flex:1}
.nm-fb-btn{width:44px;height:44px;border:0;border-radius:12px;background:none;color:#fff;font:400 1.35rem/1 var(--nm-font);cursor:pointer;display:flex;align-items:center;justify-content:center}
.nm-fb-btn:hover{background:rgba(255,255,255,.18)}
.nm-fb-x{font-size:1.5rem;opacity:.8}
/* sensitivity */
.nm-reset{border:0;background:none;color:#fff;padding:0;font:600 .85rem var(--nm-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}   /* "Default" link, hidden at 1.0 */
.nm-reset:hover{text-decoration-thickness:2px}
.nm-reset[hidden]{display:none}
.nm-select{display:block;width:100%;max-width:26rem;font:600 1rem var(--nm-font);color:var(--nm-ink);background:#F2F2F2;border:0;border-radius:12px;padding:.6rem .8rem}
.nm-panel .nm-select{background:rgba(255,255,255,.18);color:#fff}
.nm-panel .nm-select option{color:#111;background:#fff}
.nm-range{display:block;width:100%;max-width:26rem;accent-color:var(--nm-accent);margin:4px 0 8px}
@media (max-width:699px){
  /* paused: the sheet covers the whole stage (the site header above stays visible); × closes it, sticky Resume bar */
  .nm-panel{left:0;right:0;width:auto;max-width:none;border-radius:0;transform:translateY(100%)}
  .nm.is-panel-open .nm-panel{transform:none}
  .nm-panel-body{padding:24px 16px 20px}
  .nm-sheet-close{display:flex;position:absolute;top:14px;right:14px;z-index:1;width:42px;height:42px;border:0;border-radius:50%;padding:0;
    background:rgba(255,255,255,.18);color:#fff;align-items:center;justify-content:center;cursor:pointer}
  .nm-sheet-close svg{width:22px;height:22px}
  .nm-sheet-resume{display:block;flex:none;background:#fff;padding:0 0 env(safe-area-inset-bottom,0)}
  .nm-sheet-resume-btn{display:block;width:100%;min-height:60px;border:0;background:#fff;color:var(--nm-ink);font:700 1.15rem var(--nm-font);cursor:pointer}
  .nm-sheet-resume-btn:hover{background:#f3f3f3}
  .nm-grid{grid-template-columns:repeat(5,minmax(0,52px))}
  .nm-ind{grid-template-columns:repeat(2,minmax(0,142px))}
  .nm.is-fresh .nm-stack{right:0;width:auto;top:72px;transform:none;text-align:center;padding:0 16px}   /* below the 44 px fullscreen pill; kicker + title + pill on top … */
  .nm.is-fresh .nm-char{bottom:12%;height:42%}                                       /* … the cat smaller below … */
  .nm.is-fresh .nm-indicator{opacity:0;visibility:hidden}                            /* … no dial before the first start */
  .nm-privacy{font-size:.82rem}
}

/* page hook: the privacy link lands on the FAQ <details id="faq-record"> (opened by noise-meter.js);
   keep its summary clear of the sticky site header */
.faq details[id]{scroll-margin-top:84px}

/* plain microphone row under the stage (smart boards: must be easy to find) */
.nm-microw{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-top:1px solid #DDE7F0}
.nm-microw-label{display:flex;align-items:center;gap:12px;width:100%;max-width:34rem}
.nm-microw-text{font:700 .95rem var(--nm-font);color:var(--nm-ink);white-space:nowrap}
.nm-microw .nm-select{margin:0}

/* fullscreen: same layout, bigger play/pause */
.nm-stage:fullscreen,.nm-stage:-webkit-full-screen{height:100vh;min-height:0;background:#000;--nm-bar-h:clamp(100px,14vh,150px);--nm-icon:clamp(80px,10.8vh,116px);--nm-start-h:96px;--nm-start-f:2rem}

/* small screens (phone portrait) */
@media (max-width:560px){
  .nm-char{height:52%;bottom:19%}
  .nm-indicator{width:min(62vw,260px);bottom:15%}
  .nm-fs{top:14px;left:14px}
  .nm.is-running .nm-fs{width:42px;height:42px}
}
/* reduced motion: no cross-fade, no marker glide; the needle steps per level (set by JS) */
@media (prefers-reduced-motion:reduce){
  .nm-scene,.nm-bar-marker,.nm-overlay,.nm-start,.nm-panel,.nm-char,.nm-chars,.nm-indicator,.nm-bottom{transition:none}
}
.nm-reduced .nm-scene,.nm-reduced .nm-bar-marker,.nm-reduced .nm-overlay,.nm-reduced .nm-start,.nm-reduced .nm-panel,.nm-reduced .nm-char,.nm-reduced .nm-chars,.nm-reduced .nm-indicator,.nm-reduced .nm-bottom{transition:none}
.nm :focus-visible{outline:3px solid var(--nm-accent);outline-offset:2px}
.nm-start:focus-visible,.nm-pill:focus-visible,.nm-fs:focus-visible,.nm-sheet-resume-btn:focus-visible{outline:3px solid var(--nm-accent);outline-offset:3px}