/* Engram account service — app-only rules (WEB.md#6).
 *
 * 🚨 THIS FILE MAY NOT DECLARE A DESIGN TOKEN. Every `--ink`, `--amber`, `--radius`, `--mono` …
 * is declared ONCE, in `site/style.css`, which this app SERVES rather than copies. A token
 * redefined here is a second home for one fact, and the two drift silently — the dashboard slowly
 * stops looking like the product. `tests/test_shared_theme.py` fails if one appears.
 *
 * Everything below only CONSUMES tokens via var().
 */

@layer app {

  /* ── shell ────────────────────────────────────────────────────────────────────────────────── */
  .app-bar {
    display: flex; align-items: center; gap: 20px;
    padding: 14px clamp(14px, 4vw, 28px);
    border-bottom: 1px solid var(--line);
    background: var(--panel);
  }
  .app-brand { display: inline-flex; align-items: center; }
  .app-nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }

  .app-main {
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(18px, 4vw, 36px) clamp(14px, 4vw, 28px);
  }

  .app-foot {
    border-top: 1px solid var(--line);
    padding: 20px clamp(14px, 4vw, 28px);
    color: var(--muted);
    font-size: 14px;
  }

  /* ── panels ───────────────────────────────────────────────────────────────────────────────── */
  /* A container, so panels below respond to THEIR OWN width rather than the viewport — the 2026
   * component primitive (D-89). A card in a narrow sidebar and the same card full-width need no
   * separate rules and no JS. */
  .app-panel {
    container-type: inline-size;
    background: var(--panel2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(16px, 3cqi, 28px);
  }

  .app-panel h1 {
    margin: 0 0 10px;
    font-size: clamp(24px, 4cqi, 32px);
    letter-spacing: -.02em;
  }

  .app-note { color: var(--muted); margin: 0; max-width: 62ch; line-height: 1.55; }
  .app-note strong { color: var(--text); }

  /* Respect the same motion preference the marketing site does. */
  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}