/* Classroom Noise Meter. Sizes in container units: the stage is a size container. */

.nm {
  --nm-green: #2fb36d; --nm-amber: #f0a30a; --nm-red: #e03131;
  --nm-zone: var(--nm-green);
  --lim: 65; --amb: 50;
  overflow: hidden;
}
.nm[data-zone="amber"] { --nm-zone: var(--nm-amber); }
.nm[data-zone="red"] { --nm-zone: var(--nm-red); }
.nm [hidden] { display: none !important; }

/* ---- intro, permission and errors ---- */
.nm-intro {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 2.6cqmin, 30px); padding: 5cqmin 6cqmin; text-align: center;
}
.nm-intro-mic {
  position: relative; display: grid; place-items: center;
  width: clamp(56px, 17cqmin, 170px); aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--cat) 14%, var(--stage-bg)); color: var(--cat);
  border: 1px solid color-mix(in srgb, var(--cat) 30%, transparent);
}
.nm-intro-mic .icon { width: 50%; height: 50%; }
.nm-intro-mic::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--cat) 50%, transparent);
  animation: nm-ring 2.4s ease-out infinite;
}
@keyframes nm-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.55); opacity: 0; } }
.nm-intro-title { margin: 0; font: 650 clamp(18px, 6.4cqmin, 72px)/1.1 var(--font-display); letter-spacing: -.01em; }
.nm-intro-text { margin: 0; max-width: 34em; font-size: clamp(13px, 3.1cqmin, 30px); line-height: 1.45; color: color-mix(in srgb, var(--stage-ink) 70%, transparent); }
.nm-start { min-height: clamp(46px, 10.5cqmin, 104px); padding: 0 clamp(18px, 4.6cqmin, 48px); font-size: clamp(15px, 3.8cqmin, 38px); border-radius: 999px; }
.nm-start .icon { width: 1.25em; height: 1.25em; }
.nm-start:disabled { opacity: .7; cursor: progress; }
.nm-privacy {
  margin: 0; max-width: 46em; text-wrap: balance;
  font-size: clamp(11px, 2.4cqmin, 22px); line-height: 1.4; color: color-mix(in srgb, var(--stage-ink) 58%, transparent);
}
.nm-privacy .icon { width: 1.3em; height: 1.3em; margin-right: .35em; vertical-align: -.3em; color: var(--cat); }
.nm-error {
  display: flex; align-items: flex-start; gap: .7em; text-align: left; max-width: 36em;
  padding: .8em 1em; border-radius: 14px; font-size: clamp(12px, 2.8cqmin, 26px); line-height: 1.4;
  background: color-mix(in srgb, var(--danger) 10%, var(--stage-bg)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}
.nm-error .icon { flex: none; color: var(--danger); margin-top: .1em; }
.nm-error b { display: block; font-family: var(--font-display); font-weight: 650; }
.nm[data-mode="error"] .nm-intro-text { display: none; }

/* ---- live screen ---- */
.nm-live {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  gap: clamp(6px, 2cqmin, 22px);
  padding: clamp(10px, 3cqmin, 34px) 4cqmin calc(clamp(36px, 8.4cqmin, 84px) + 2 * clamp(8px, 2.6cqmin, 28px));
}
.nm-zone {
  display: inline-flex; align-items: center; gap: .55em; flex: none;
  padding: .3em 1em; border-radius: 999px; font: 650 clamp(14px, 4.4cqmin, 52px)/1.2 var(--font-display);
  background: color-mix(in srgb, var(--nm-zone) 15%, var(--stage-bg)); border: 1px solid color-mix(in srgb, var(--nm-zone) 45%, transparent);
  transition: background .3s, border-color .3s;
}
.nm-zone::before { content: ""; width: .62em; height: .62em; border-radius: 50%; background: var(--nm-zone); box-shadow: 0 0 0 .18em color-mix(in srgb, var(--nm-zone) 25%, transparent); transition: background .3s; }
.nm.is-loud .nm-zone { visibility: hidden; }

.nm-view { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; }
.nm-view > * { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.nm[data-display="gauge"] .nm-gauge,
.nm[data-display="face"] .nm-face { display: block; }
.nm[data-display="bar"] .nm-bar { display: flex; }
.nm[data-display="bubbles"] .nm-bubbles { display: block; }

/* Gauge */
.nm-gauge { overflow: visible; }
.nm-dial { fill: color-mix(in srgb, var(--stage-ink) 4%, var(--stage-bg)); stroke: color-mix(in srgb, var(--stage-ink) 12%, transparent); stroke-width: 1.2; }
.nm-z { fill: none; stroke-width: 14; opacity: .38; transition: opacity .3s; }
.nm-z-green { stroke: var(--nm-green); }
.nm-z-amber { stroke: var(--nm-amber); }
.nm-z-red { stroke: var(--nm-red); }
.nm[data-zone="green"] .nm-z-green, .nm[data-zone="amber"] .nm-z-amber, .nm[data-zone="red"] .nm-z-red { opacity: 1; }
.nm-ticks line { stroke: color-mix(in srgb, var(--stage-ink) 32%, transparent); stroke-width: 1; }
.nm-ticks line.major { stroke: color-mix(in srgb, var(--stage-ink) 60%, transparent); stroke-width: 2; }
.nm-nums text { fill: color-mix(in srgb, var(--stage-ink) 55%, transparent); font: 600 9px var(--font-display); }
.nm-limit-mark path { fill: var(--stage-ink); }
.nm-limit-mark line { stroke: var(--stage-ink); stroke-width: 2.4; stroke-linecap: round; }
.nm-needle path { fill: var(--stage-ink); filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .3)); }
.nm-hub { fill: var(--stage-ink); }

/* Bar */
.nm-bar { align-items: stretch; justify-content: center; gap: clamp(6px, 1.8cqmin, 20px); padding: 1cqmin 0; }
.nm-bar-scale {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  margin: -.6em 0; font: 600 clamp(10px, 2.4cqmin, 24px)/1.2 var(--font-display); color: color-mix(in srgb, var(--stage-ink) 50%, transparent);
  font-variant-numeric: tabular-nums;
}
.nm-bar-tube {
  --zones: linear-gradient(to top,
    var(--nm-green) 0, var(--nm-green) calc(var(--amb) * 1%),
    var(--nm-amber) calc(var(--amb) * 1%), var(--nm-amber) calc(var(--lim) * 1%),
    var(--nm-red) calc(var(--lim) * 1%), var(--nm-red) 100%);
  position: relative; width: clamp(54px, 22cqmin, 260px); border-radius: clamp(10px, 3cqmin, 30px);
  background: color-mix(in srgb, var(--stage-ink) 6%, var(--stage-bg));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .14), 0 0 0 1px color-mix(in srgb, var(--stage-ink) 10%, transparent);
}
.nm-bar-track, .nm-bar-fill { position: absolute; inset: 6%  9%; border-radius: clamp(6px, 1.6cqmin, 18px); background: var(--zones); }
.nm-bar-track { opacity: .17; }
.nm-bar-fill { clip-path: inset(100% 0 0 0); box-shadow: 0 0 2cqmin color-mix(in srgb, var(--nm-zone) 45%, transparent); }
/* LED segments: thin gaps in the stage color. */
.nm-bar-tube::after {
  content: ""; position: absolute; inset: 6% 9%; border-radius: clamp(6px, 1.6cqmin, 18px); pointer-events: none;
  background: repeating-linear-gradient(to top, transparent 0 calc(5% - 2px), color-mix(in srgb, var(--stage-ink) 6%, var(--stage-bg)) calc(5% - 2px) 5%);
}
.nm-bar-peak { position: absolute; left: 9%; right: 9%; height: 3px; margin-bottom: -1.5px; background: var(--stage-ink); border-radius: 2px; z-index: 2; }
.nm-bar-limit {
  position: absolute; left: -10%; right: -10%; z-index: 3; height: 0;
  bottom: calc(6% + var(--lim) * .88%);
  border-top: 3px dashed var(--stage-ink);
}
.nm-bar-limit span {
  position: absolute; left: 100%; top: 0; transform: translate(.5em, -50%);
  padding: .15em .6em; border-radius: 999px; white-space: nowrap;
  font: 650 clamp(10px, 2.6cqmin, 26px)/1.2 var(--font-display); background: var(--stage-ink); color: var(--stage-bg);
}
.nm-bar-peak { bottom: calc(6% + var(--peak, 0) * .88%); }

/* Bubbles */
.nm-bubbles {
  border-radius: clamp(10px, 3cqmin, 30px); overflow: hidden;
  background: linear-gradient(to top, color-mix(in srgb, var(--nm-zone) 16%, var(--stage-bg)), color-mix(in srgb, var(--nm-zone) 3%, var(--stage-bg)));
  transition: background .6s;
}
.nm-canvas { display: block; width: 100%; height: 100%; }

/* Face */
.nm-face { overflow: visible; }
.nm { --nm-skin: #ffd43b; }
.nm-head { stroke: color-mix(in srgb, var(--nm-skin) 65%, #4a2a10); stroke-width: 3; }
.nm-skin-hi { stop-color: color-mix(in srgb, var(--nm-skin) 55%, #fff); }
.nm-skin-mid { stop-color: var(--nm-skin); }
.nm-skin-lo { stop-color: color-mix(in srgb, var(--nm-skin) 78%, #a33a00); }
.nm-head-shadow { fill: rgba(0, 0, 0, .12); }
.nm-head-shine { fill: #fff; opacity: .45; }
.nm-cheek { fill: #ff6f91; opacity: var(--nm-blush, .5); }
.nm-eye-w { fill: #fff; stroke: #3b2416; stroke-width: 2; opacity: var(--nm-white, 0); }
.nm-eye { fill: #3b2416; }
.nm-brow { fill: none; stroke: #3b2416; stroke-width: 6; stroke-linecap: round; }
.nm-mouth { fill: #8a2a1c; stroke: #3b2416; stroke-width: 4.5; stroke-linejoin: round; }
.nm-drop { fill: #74c0fc; stroke: #1c7ed6; stroke-width: 1.5; opacity: var(--nm-drop, 0); }

/* Mini meter under bubbles and face */
.nm-mini {
  display: none; position: relative; flex: none; width: min(70cqw, 640px); height: clamp(8px, 2.4cqmin, 22px);
  border-radius: 999px; background: color-mix(in srgb, var(--stage-ink) 9%, transparent);
}
.nm[data-display="bubbles"] .nm-mini, .nm[data-display="face"] .nm-mini { display: block; }
.nm-mini-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--nm-zone); transform-origin: left center; transform: scaleX(0); transition: background .3s; }
.nm-mini-limit { position: absolute; top: -35%; bottom: -35%; width: 3px; left: calc(var(--lim) * 1%); margin-left: -1.5px; border-radius: 2px; background: var(--stage-ink); }

/* Stats */
.nm-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1.4cqmin, 14px); flex: none; }
.nm-stats .t-chip { font-variant-numeric: tabular-nums; }
.nm-stats .icon { width: 1.1em; height: 1.1em; color: var(--cat); }
.nm-best { color: color-mix(in srgb, var(--stage-ink) 55%, transparent); font-weight: 600; }
.nm-best::before { content: "·"; margin-right: .4em; }

/* Too loud */
.nm-loud {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: clamp(8px, 2.4cqmin, 28px); text-align: center;
  transition: opacity .25s, visibility .25s;
}
.nm-loud::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(224, 49, 49, .32) 100%);
  animation: nm-pulse 1.1s ease-in-out infinite;
}
@keyframes nm-pulse { 50% { opacity: .25; } }
.nm-loud b {
  padding: .18em .8em; border-radius: 999px; background: var(--nm-red); color: #fff;
  font: 700 clamp(18px, 7cqmin, 90px)/1.15 var(--font-display); box-shadow: 0 6px 22px rgba(224, 49, 49, .4);
}
.nm-loud span { margin-top: .4em; font: 600 clamp(11px, 2.8cqmin, 30px)/1.2 var(--font-display); color: var(--nm-red); }
.nm.is-loud .nm-loud { opacity: 1; visibility: visible; }
.nm.is-loud .nm-loud b { animation: t-pop .45s cubic-bezier(.2, 1.6, .4, 1); }

/* Controls */
.nm-limit-ctl { display: inline-flex; align-items: center; gap: clamp(4px, 1cqmin, 10px); }
.nm-limit-chip { min-width: 5.6em; justify-content: center; font-variant-numeric: tabular-nums; }

.nm-set-stat { font-size: .9rem; color: var(--ink-soft); padding: 2px 0; font-variant-numeric: tabular-nums; }

@container (max-height: 420px) {
  .nm-intro-text { display: none; }
  .nm-loud span { display: none; }
}
@container (max-height: 320px) {
  .nm-stats { display: none; }
  .nm-privacy { font-size: 11px; }
  .nm-intro-mic { display: none; }
}
@container (max-width: 440px) {
  .nm-limit-chip { display: none; }
  .nm-best { display: none; }
}
@container (max-width: 340px) {
  .nm-limit-ctl { display: none; }
}