/* ============================================================
   Lanyard shared design system
   ------------------------------------------------------------
   Loaded by every screen (link BEFORE the screen's own styles).
   Provides: self-hosted fonts + the design tokens all screens
   share. Screens may still declare literal font stacks that
   include the fallbacks — the @font-face rules here are what
   make 'Archivo Black' and 'Nunito' resolve.

   Type system:
   - Display (headings, buttons, big moments): Archivo Black —
     a better-drawn drop-in for Arial Black, same weight/energy.
   - Body (paragraphs, inputs, descriptions): Nunito — rounded,
     friendly, very readable on Chromebook screens.
   ============================================================ */

@font-face {
  font-family: 'Archivo Black';
  src: url('fonts/archivo-black-v23-latin-regular.woff2') format('woff2');
  /* Single-weight face mapped across the bold range so
     font-weight: 700/900 never triggers faux-bold doubling. */
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-v32-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-v32-latin-700.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-v32-latin-800.woff2') format('woff2');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* Serif voice for the paste-up system's "spoken line"
   (one big EB Garamond sentence per screen). */
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-v33-latin-regular.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-v33-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Type */
  --font-display: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  --font-body: 'Nunito', Arial, sans-serif;

  /* Ink + canvas */
  --ink: #000000;
  --text: #222222;
  --text-soft: #555555;
  --canvas: #FFFDE7;      /* page background for teacher chrome */
  --card: #FFFFFF;        /* card / surface */
  --cream: #FFF9C4;       /* warm accent fill (buttons, bands) */

  /* Brand colors */
  --blue: #0057FF;
  --blue-dark: #0041CC;
  --yellow: #FFD600;
  --pink: #FF4081;
  --green: #00C853;
  --red: #FF2D2D;
  --red-soft: #FFCDD2;
  --green-soft: #C8E6C9;
  --blue-soft: #E3F2FD;

  /* Structure */
  --border: 3px solid var(--ink);
  --border-thin: 2px solid var(--ink);
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-pop: 6px 6px 0 var(--ink);
  --shadow-pop-sm: 3px 3px 0 var(--ink);
  --focus-ring: 3px solid var(--blue);
}

/* ------------------------------------------------------------
   Keyboard focus — every interactive element gets the ring.
   design.css loads first on every page, so page-specific
   :focus-visible rules (the editor has deliberate ones) still win.
   Before 2026-08-08 this token had zero consumers: student and
   host buttons rode default browser focus.
   ------------------------------------------------------------ */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Mic (speech input) — a quiet transparent icon in the top-right
   corner of a text box. The wrapper positions it; the input keeps
   its own styling. Shared by player, designer, editor, library.
   ------------------------------------------------------------ */
.mic-wrap {
  position: relative;
  display: block;
}

/* Inputs that lived in a flex row: the wrapper flexes in their place. */
.mic-wrap-flex {
  flex: 1 1 auto;
  min-width: 0;
}

.mic-wrap > textarea,
.mic-wrap > input {
  width: 100%;
  box-sizing: border-box;
}

.mic-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  /* 40px hit area: touchscreen Chromebooks fat-finger anything smaller
     (2026-08-08 field test) — the glyph stays small, the target doesn't. */
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.05rem;
  line-height: 40px;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  opacity: 0.55;
  cursor: pointer;
}

.mic-btn:hover,
.mic-btn:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.07);
}

.mic-btn[hidden] { display: none; }

.mic-btn.mic-off {
  opacity: 0.2;
  cursor: default;
}

.mic-btn.mic-live {
  opacity: 1;
  background: var(--theme-danger, var(--red, #d9534f));
  color: #fff;
  animation: micPulse 1.2s ease-in-out infinite;
}

@keyframes micPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .mic-btn.mic-live { animation: none; }
}