/* =========================================================
   Classroom Noise Meter — tool-specific styles.
   Layered on /tools/_shared/tool.css.
   Zone colors are local (green / amber / red) because they
   are tool-specific; everything else uses shared tokens so
   the dark/light theme switch keeps working.
   ========================================================= */

/* ---------- Zone color tokens (local) ---------- */
.meter-card {
  /* Light-mode zone palette */
  --zone-calm-bg:        #DCFCE7;   /* soft green */
  --zone-calm-fg:        #166534;
  --zone-calm-fill:      #4ADE80;
  --zone-calm-border:    #BBF7D0;

  --zone-working-bg:     #FEF3C7;   /* soft amber */
  --zone-working-fg:     #854D0E;
  --zone-working-fill:   #F59E0B;
  --zone-working-border: #FDE68A;

  --zone-loud-bg:        #FEE2E2;   /* soft red */
  --zone-loud-fg:        #991B1B;
  --zone-loud-fill:      #EF4444;
  --zone-loud-border:    #FECACA;
}

/* Dark-mode zone palette: deeper, more saturated tints. */
:root[data-theme="dark"] .meter-card,
:root[data-theme="dark"] .meter-card[data-state] {
  --zone-calm-bg:        rgba(74, 222, 128, 0.16);
  --zone-calm-fg:        #86EFAC;
  --zone-calm-fill:      #4ADE80;
  --zone-calm-border:    rgba(74, 222, 128, 0.32);

  --zone-working-bg:     rgba(245, 158, 11, 0.18);
  --zone-working-fg:     #FCD34D;
  --zone-working-fill:   #F59E0B;
  --zone-working-border: rgba(245, 158, 11, 0.36);

  --zone-loud-bg:        rgba(239, 68, 68, 0.18);
  --zone-loud-fg:        #FCA5A5;
  --zone-loud-fill:      #EF4444;
  --zone-loud-border:    rgba(239, 68, 68, 0.36);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .meter-card {
    --zone-calm-bg:        rgba(74, 222, 128, 0.16);
    --zone-calm-fg:        #86EFAC;
    --zone-calm-fill:      #4ADE80;
    --zone-calm-border:    rgba(74, 222, 128, 0.32);

    --zone-working-bg:     rgba(245, 158, 11, 0.18);
    --zone-working-fg:     #FCD34D;
    --zone-working-fill:   #F59E0B;
    --zone-working-border: rgba(245, 158, 11, 0.36);

    --zone-loud-bg:        rgba(239, 68, 68, 0.18);
    --zone-loud-fg:        #FCA5A5;
    --zone-loud-fill:      #EF4444;
    --zone-loud-border:    rgba(239, 68, 68, 0.36);
  }
}

/* ---------- Zone-driven surfaces ---------- */
/* When the meter has a live reading, the surrounding card tints to the
   active zone for an unmissable visual signal. The transition is calm
   so the room does not see a flicker. */
.meter-card {
  position: relative;
  overflow: hidden;
  transition: background-color 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.meter-card[data-state="live"][data-zone="calm"] {
  background: var(--zone-calm-bg);
  border-color: var(--zone-calm-border);
}
.meter-card[data-state="live"][data-zone="working"] {
  background: var(--zone-working-bg);
  border-color: var(--zone-working-border);
}
.meter-card[data-state="live"][data-zone="loud"] {
  background: var(--zone-loud-bg);
  border-color: var(--zone-loud-border);
}

/* ---------- Zone label ---------- */
.meter-display {
  text-align: center;
  margin-bottom: var(--space-5);
  position: relative;
}
.meter-zone-label {
  font-size: clamp(40px, 9vw, 80px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--space-5);
  transition: color 0.3s ease, font-size 0.2s ease;
}

/* ---------- Idle state: mic graphic + small prompt ---------- */
/* Before the mic starts there is no zone to show, so the giant zone
   label would just render a long sentence at display size. Instead show
   a microphone graphic and shrink the prompt to a quiet sub-line. */
.meter-idle-graphic { display: none; }
.meter-card[data-state="idle"] .meter-idle-graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: var(--space-2) auto var(--space-4);
  border-radius: 50%;
  background: var(--accent-ring);
  color: var(--accent);
}
.meter-idle-graphic svg {
  width: 38px;
  height: 38px;
}
.meter-card[data-state="idle"] .meter-zone-label {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}
.meter-card[data-state="live"][data-zone="calm"] .meter-zone-label {
  color: var(--zone-calm-fg);
}
.meter-card[data-state="live"][data-zone="working"] .meter-zone-label {
  color: var(--zone-working-fg);
}
.meter-card[data-state="live"][data-zone="loud"] .meter-zone-label {
  color: var(--zone-loud-fg);
}

/* ---------- Bar ---------- */
.meter-bar-wrap {
  width: 100%;
  margin-bottom: var(--space-4);
}
.meter-bar {
  position: relative;
  height: 36px;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.meter-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--zone-calm-fill);
  border-radius: var(--radius-pill);
  transition: width 0.12s linear, background-color 0.25s ease;
}
.meter-card[data-zone="working"] .meter-bar-fill {
  background: var(--zone-working-fill);
}
.meter-card[data-zone="loud"] .meter-bar-fill {
  background: var(--zone-loud-fill);
}
/* Threshold markers — thin vertical lines on top of the bar. */
.meter-bar-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--text-muted);
  opacity: 0.55;
  pointer-events: none;
  transition: left 0.15s ease;
}
.meter-bar-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* ---------- Sustained-loud alert (visual pulse + flash) ---------- */
.meter-card.is-alerting .meter-zone-label {
  animation: noisePulse 0.9s ease-in-out infinite;
}
@keyframes noisePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.meter-flash {
  position: absolute;
  inset: 0;
  background: var(--zone-loud-fill);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  border-radius: inherit;
}
.meter-card.is-alerting .meter-flash {
  opacity: 0.18;
  animation: noiseFlash 1.4s ease-in-out infinite;
}
@keyframes noiseFlash {
  0%, 100% { opacity: 0.10; }
  50%      { opacity: 0.28; }
}

/* ---------- Privacy note ---------- */
.meter-privacy-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
  text-align: center;
}
.meter-privacy-icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ---------- Primary controls ---------- */
.meter-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.meter-controls .btn {
  font-size: 16px;
  min-height: 52px;
}
/* The shared .btn rule sets display:inline-flex, which overrides the
   browser's UA [hidden] { display:none }. Without this, toggling the
   hidden attribute on the Start/Stop buttons (and the error message)
   does not actually hide them — the Start button would sit visible
   showing "Requesting microphone…" after the stream goes live. Force
   hidden to win inside the widget. */
.meter-card [hidden] { display: none !important; }
/* Start and Stop are mutually exclusive (Start is [hidden] once the mic is
   live, Stop is [hidden] while idle), so the controls row only ever holds
   one button at a time. Keep it a single full-width column — otherwise the
   lone Stop button would sit in a narrow column and not span the card. */

/* ---------- Meta row (fullscreen, calibrate) ---------- */
.meter-meta {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.meter-meta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-colors);
}
.meter-meta-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent);
}
.meter-meta-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.meter-meta-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---------- Settings panel ---------- */
.meter-settings {
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
}

.meter-zones {
  display: grid;
  /* Wrap to fit the card's own width (not the viewport), so the third
     chip never overflows the card on a narrow column: 3-up when wide,
     2-up or 1-up when the card is narrow. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.meter-zone-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  transition: var(--transition-colors);
}
.meter-zone-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.meter-zone-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}
.meter-zone-swatch.zone-calm    { background: var(--zone-calm-fill); }
.meter-zone-swatch.zone-working { background: var(--zone-working-fill); }
.meter-zone-swatch.zone-loud    { background: var(--zone-loud-fill); }
.meter-zone-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 6px 0;
}
.meter-zone-input:focus { outline: none; }

.meter-slider-row {
  margin-bottom: var(--space-5);
}
.meter-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  font-size: 14px;
  color: var(--text);
}
.meter-slider-head label {
  font-weight: 600;
}
.meter-slider-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: var(--space-2);
  line-height: 1.5;
}

.meter-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (min-width: 540px) {
  .meter-options { grid-template-columns: 1fr 1fr; }
}

/* ---------- Full-screen mode ---------- */
.meter-card:fullscreen {
  background: var(--surface);
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  border: none;
  border-radius: 0;
  overflow: hidden;
}
.meter-card:fullscreen[data-state="live"][data-zone="calm"] {
  background: var(--zone-calm-bg);
}
.meter-card:fullscreen[data-state="live"][data-zone="working"] {
  background: var(--zone-working-bg);
}
.meter-card:fullscreen[data-state="live"][data-zone="loud"] {
  background: var(--zone-loud-bg);
}
.meter-card:fullscreen .meter-text-header,
.meter-card:fullscreen .meter-privacy-note,
.meter-card:fullscreen .meter-settings,
.meter-card:fullscreen .meter-controls,
.meter-card:fullscreen #meter-error {
  display: none;
}
.meter-card:fullscreen .meter-display {
  width: min(94vw, 1600px);
  margin: 0;
}
.meter-card:fullscreen .meter-zone-label {
  font-size: clamp(120px, 22vw, 320px);
}
.meter-card:fullscreen .meter-bar {
  height: 72px;
}
.meter-card:fullscreen .meter-bar-axis {
  font-size: 16px;
  letter-spacing: 0.2em;
  margin-top: var(--space-4);
}
.meter-card:fullscreen .meter-meta {
  margin-bottom: 0;
}
.meter-card:fullscreen .meter-meta-btn {
  font-size: 16px;
  padding: 12px 22px;
}
.meter-card:fullscreen #btn-calibrate { display: none; }