/* zoom_app_panel_prototype/public/styles.css — SPIKE, plain CSS, no build tooling. */

:root {
  --color-bg: #ffffff;
  --color-text: #1a1a2e;
  --color-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-green: #16a34a;
  --color-amber: #d97706;
  --color-red: #dc2626;
  --color-gray: #9ca3af;
  /* notion/39 §1a "free simplification": these were independently-duplicated
     hex literals equal to --color-green/--color-amber, not var() references.
     Aliasing them means the dark-mode block only has to redefine
     --color-green/--color-amber once and both automatically follow. */
  --color-live: var(--color-green);
  --color-reconnecting: var(--color-amber);
  /* notion/43 §4: the raw --color-live/--color-reconnecting values (identical
     to --color-green/--color-amber) are fine as a status-dot background but
     fail WCAG AA normal-text contrast as #connection-label's *text* color --
     3.30:1 and 3.19:1 measured against the 4.5:1 bar, on the plain white
     body background this label actually sits on. These two properties hold
     corrected, AA-passing shades for that specific text use (one step
     darker on the Tailwind scale: green-700 / amber-800). Kept independently
     named rather than aliased to the badge text shades they currently equal
     (see the fallback/badge-quiet precedent a few lines down) so a future
     change to one doesn't silently move the other. */
  --color-live-text: #15803d;
  --color-reconnecting-text: #92400e;
  /* notion/43 §3.2: fixed dark glyph color for the non-color status glyphs
     inside .status-dot/.badge .dot. Deliberately does NOT track --color-text
     (which intentionally flips light<->dark for page-body contrast) -- the
     dot backgrounds themselves stay "medium-saturated" in both color schemes
     (Tailwind 600 in light, 400 in dark, per notion/39 §1a), so a dark glyph
     reads fine against all four status colors in both modes. Using
     --color-text here instead would silently break dark-mode legibility
     (computed ~1.6:1 for the green dot -- checked while implementing dark
     mode in this same pass, not covered by either scoping doc on its own). */
  --color-dot-glyph: #1a1a2e;
  /* --- Everything below promoted from hardcoded literals per notion/39 §1b,
     specifically so the dark-mode block below can override them. --- */
  --color-surface: #fafafa;
  --color-live-glow: rgba(22, 163, 74, 0.15);
  --color-fallback-bg: #fef3c7;
  --color-fallback-text: #92400e;
  --color-fallback-border: #fde68a;
  --color-badge-good-bg: #dcfce7;
  --color-badge-good-text: #15803d;
  --color-badge-bad-bg: #fee2e2;
  --color-badge-bad-text: #b91c1c;
  --color-badge-quiet-bg: #fef3c7;
  --color-badge-quiet-text: #92400e;
  --color-badge-insufficient-bg: #f3f4f6;
  --color-badge-insufficient-text: #4b5563;
  --color-debug-overlay: rgba(0, 0, 0, 0.04);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* notion/39 §2: one @media block redefining :root, not scattered per-selector
   overrides -- this file already centralizes color semantics into :root
   custom properties consumed via var() almost everywhere, so this extends
   that existing convention rather than starting a second, competing one.
   Every value below is the doc's own computed dark pairing (real WCAG
   relative-luminance contrast math against the actual dark surface each
   element sits on), not a naive invert or eyeballed guess. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111827;
    --color-text: #f3f4f6;
    --color-muted: #9ca3af;
    --color-border: #374151;
    --color-green: #4ade80;
    --color-amber: #fbbf24;
    --color-red: #f87171;
    --color-gray: #7c8798;
    --color-live-text: #4ade80;
    --color-reconnecting-text: #fbbf24;
    --color-surface: #1f2937;
    --color-live-glow: rgba(74, 222, 128, 0.25);
    --color-fallback-bg: #451a03;
    --color-fallback-text: #fbbf24;
    --color-fallback-border: #78350f;
    --color-badge-good-bg: #14532d;
    --color-badge-good-text: #86efac;
    --color-badge-bad-bg: #450a0a;
    --color-badge-bad-text: #fca5a5;
    --color-badge-quiet-bg: #78350f;
    --color-badge-quiet-text: #fcd34d;
    --color-badge-insufficient-bg: #374151;
    --color-badge-insufficient-text: #e5e7eb;
    --color-debug-overlay: rgba(255, 255, 255, 0.06);
    /* --color-live/--color-reconnecting need no entry here -- they're var()
       aliases of --color-green/--color-amber above and follow automatically.
       --color-dot-glyph needs no entry either -- deliberately fixed, see its
       declaration above. */
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.4;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 16px 24px;
}

#app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 12px;
}

#app-title {
  font-weight: 700;
  font-size: 16px;
}

.connection-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-muted);
}

.connection-indicator .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gray);
  display: inline-block;
}

.connection-live .dot {
  background: var(--color-live);
  box-shadow: 0 0 0 2px var(--color-live-glow);
}

.connection-live #connection-label,
.connection-live .connection-label {
  /* notion/43 §4 fix: --color-live-text, not --color-live -- see that
     property's declaration above for why the raw green/amber tokens fail
     AA as small text-on-background here. */
  color: var(--color-live-text);
}

.connection-reconnecting .dot {
  background: var(--color-reconnecting);
}

.connection-reconnecting #connection-label {
  color: var(--color-reconnecting-text);
}

.fallback-banner {
  background: var(--color-fallback-bg);
  color: var(--color-fallback-text);
  border: 1px solid var(--color-fallback-border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  margin-bottom: 12px;
}

.placeholder-panel {
  padding: 32px 8px;
  text-align: center;
  color: var(--color-muted);
}

.status-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  background: var(--color-surface);
}

/* notion/43 §3: non-color status signaling -- both .status-dot and
   .badge .dot get a glyph child text node (see panel.js's statusGlyph()),
   so status is legible without relying on hue alone. Sizing/centering here
   is shared by both; each status's background color is still set by the
   existing .status-card.status-* / .badge-* rules below. */
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 3px;
  flex-shrink: 0;
  background: var(--color-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dot-glyph);
  font-size: 8px;
  line-height: 1;
}

.status-card.status-signal-good .status-dot {
  background: var(--color-green);
}

.status-card.status-signal-bad .status-dot {
  background: var(--color-red);
}

.status-card.status-quiet .status-dot {
  background: var(--color-amber);
}

.status-card.status-insufficient_baseline .status-dot {
  background: var(--color-gray);
}

.status-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.status-explanation {
  color: var(--color-muted);
  font-size: 12.5px;
}

.section-heading {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 0 0 8px;
}

.participant-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Found live, 2026-07-22, first real 5-person standup: with no bound
     here, a real meeting's full roster just kept pushing the page taller,
     with nothing to indicate more participants existed below the fold.
     max-height ~= 4 rows (each row is roughly 60-70px including its gap)
     plus overflow-y makes the list scroll on its own regardless of
     whatever the surrounding Zoom panel viewport does. */
  max-height: 280px;
  overflow-y: auto;
}

.participant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.participant-name {
  font-weight: 500;
}

.participant-detail {
  font-size: 11.5px;
  color: var(--color-muted);
  margin-top: 1px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.badge .dot {
  /* Bumped from 7px (notion/43 §3.2): a checkmark/triangle/clock/question-mark
     glyph needs a little more room than a plain color swatch to stay legible
     at this size. */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dot-glyph);
  font-size: 7px;
  line-height: 1;
}

.badge-signal-good {
  background: var(--color-badge-good-bg);
  color: var(--color-badge-good-text);
}
.badge-signal-good .dot {
  background: var(--color-green);
}

.badge-signal-bad {
  background: var(--color-badge-bad-bg);
  color: var(--color-badge-bad-text);
}
.badge-signal-bad .dot {
  background: var(--color-red);
}

.badge-quiet {
  background: var(--color-badge-quiet-bg);
  color: var(--color-badge-quiet-text);
}
.badge-quiet .dot {
  background: var(--color-amber);
}

.badge-insufficient_baseline {
  background: var(--color-badge-insufficient-bg);
  color: var(--color-badge-insufficient-text);
}
.badge-insufficient_baseline .dot {
  background: var(--color-gray);
}

#app-footer {
  margin-top: auto;
  padding-top: 16px;
  font-size: 10.5px;
  color: var(--color-muted);
  text-align: center;
}

.debug-details {
  margin-top: 6px;
}

.debug-details summary {
  cursor: pointer;
  font-size: 9.5px;
  color: var(--color-muted);
  list-style: none;
}

.debug-details summary::-webkit-details-marker {
  display: none;
}

.debug-details summary::before {
  content: "▸ ";
}

.debug-details[open] summary::before {
  content: "▾ ";
}

.debug-line {
  margin-top: 6px;
  padding: 6px 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--color-muted);
  background: var(--color-debug-overlay);
  border-radius: 6px;
  text-align: left;
  word-break: break-word;
  white-space: pre-wrap;
}

/* notion/43 §2.2: standard visually-hidden utility for the two aria-live
   announcer regions in index.html -- present visually to nobody, but still
   in the accessibility tree for screen readers. Doesn't interact with any
   existing rule. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}