/* ═══════════════════════════════════════════════════════
   SlideCast - Shared CSS
   ═══════════════════════════════════════════════════════
   We deliberately re-use TestLab's design tokens verbatim so
   SlideCast reads as a sibling app: same palette, spacing,
   typography, radii, transitions, plus the .tl-btn, .tl-input,
   .tl-modal, .tl-connection-dot, .tl-progress, .tl-disclaimer
   utility classes. The @import path resolves through the same
   /apps static mount that serves SlideCast itself, so caching
   stays in lockstep.

   Any SlideCast-specific token additions live below. Components
   that need a SlideCast-only flavour use the .sc- prefix to
   stay clear of TestLab's .tl- namespace. */

@import url('/apps/test-lab/css/shared.css');

:root {
  /* SlideCast-only tweaks. Keep this list small - reach for a
     --tl-* token first; only add a --sc-* token when SlideCast
     needs a value TestLab doesn't have. */
  --sc-deck-card-min-width: 220px;
  --sc-deck-thumb-aspect: 16 / 9;
  --sc-toast-max-width: 360px;

  /* SlideCast brand accent: rose. Distinguishes SlideCast from
     TestLab (indigo) in the school grid and across in-app UI.
     We override TestLab's --tl-primary* tokens here so every
     existing `var(--tl-primary)` reference in admin/present/view
     CSS picks up rose without per-file edits.

     Two-tier rose:
       - Light theme uses a DEEPER rose (#c41d4f) because the
         brand hex #ff6b8a only manages 2.7:1 on white -- fails
         WCAG AA for text. The deeper shade hits 5.78:1.
       - Dark theme uses a LIFTED rose (#ff8da3) -- 6.7:1 on the
         #1e293b card surface. The brand hex #ff6b8a still appears
         as --tl-primary-dark for hover states.

     The portfolio-site --accent-rose token (#ff6b8a) is kept as-is;
     it only ever renders on dark backgrounds where it passes AA. */
  --tl-primary: #c41d4f;
  --tl-primary-light: #d6325c;
  --tl-primary-dark: #a91548;
  --sc-accent: var(--tl-primary);
  --sc-accent-glow: rgba(196, 29, 79, 0.10);
  --sc-accent-glow-strong: rgba(196, 29, 79, 0.24);
}

[data-theme="dark"],
body.sc-admin-theme {
  --tl-primary: #ff8da3;
  --tl-primary-light: #ffb3c5;
  --tl-primary-dark: #ff6b8a;
  --sc-accent: var(--tl-primary);
  --sc-accent-glow: rgba(255, 107, 138, 0.14);
  --sc-accent-glow-strong: rgba(255, 107, 138, 0.30);
}

/* Defensive HTML `hidden` attribute reset.
   We toggle visibility through `element.hidden = true|false` in admin.js,
   present.js, and view.js. The user-agent stylesheet applies
   `display: none` to `[hidden]`, but any later class rule that sets an
   explicit `display: <flex|grid|block|...>` (which several of our layout
   classes do, e.g. .tl-modal-overlay, .sc-upload-progress) wins over the
   UA rule because class specificity > tag/attribute specificity for the
   built-in. !important here is correct: the `hidden` attribute is meant
   to be the authoritative "no, really, hide this" signal regardless of
   what display value the element would otherwise compute to. */
[hidden] {
  display: none !important;
}