/* Panel.css — scoped styling for the <Panel> primitive (PRIM-04).
 *
 * What this file styles:
 *   - .panel        — the wrapper: a vertical chunk with top margin separating
 *                     it from the previous panel. Uses `--m-pad-md` for the
 *                     gap so cross-modal spacing is consistent (D-10 Phase 15
 *                     spacing-tokens contract).
 *   - .panel-title  — the label on top. JetBrains Mono via `--m-font-mono`,
 *                     foreground color via `--mt-fg`, plus a small letter-spacing
 *                     bump that matches the original branding-modal Field inline
 *                     style verbatim. Size/weight are NOT declared here — the
 *                     JSX composes `mt-text-xs mt-weight-bold` utility classes
 *                     so the literal `11px` / `700` never appears in this file.
 *   - .panel-hint   — the dim line below the body, when the caller passes a
 *                     hint. Mono font, dim color, 0.6 opacity, slightly looser
 *                     line-height — all preserved from the original inline
 *                     style. Size is composed via `mt-text-xs` in the JSX.
 *
 * PRIM-STYLE gate (17-SPEC R5) — three rules this file MUST satisfy:
 *   1. At least one `var(--mt-*)` or `var(--m-radius-*)` / `var(--m-*)` reference.
 *      (Satisfied: --mt-fg, --mt-dim, --m-font-mono, --m-pad-md.)
 *   2. Zero hex literals — `#xxxxxx` here would silently bypass themes.
 *      (Satisfied: only token references for color/font-family.)
 *   3. Zero `--mt-*` / `--m-*` declarations — primitive CSS consumes tokens,
 *      it doesn't declare them. (Satisfied: no declarations, only var() reads.)
 *
 * Numeric literals that ARE allowed:
 *   - opacity: 0.6, line-height: 1.4, letter-spacing: 0.02em.
 *   These are dimensionless/typography values the audit doesn't flag.
 *   The gate bans HEX colors and CSS variable DECLARATIONS, not raw numbers.
 *   Source for these specific values: branding-modal.jsx::Field pre-collapse,
 *   verbatim — preserving them keeps the visual diff zero across the 4
 *   migrated call-sites.
 */

.panel {
  margin-top: var(--m-pad-md);
}

.panel-title {
  font-family: var(--m-font-mono);
  color: var(--mt-fg);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.panel-hint {
  font-family: var(--m-font-mono);
  color: var(--mt-dim);
  opacity: 0.6;
  line-height: 1.4;
  margin-top: 4px;
}