/* COPY of frontend/src/styles[...]. Source of truth lives in frontend/src/ — re-copy when the design system changes. */
/* QuartierWatt — app-level styles.
   Tokens + component primitives live in styles/qw.css (imported first).
   This file holds only app-shell glue that isn't a reusable component:
   the borderless page top bar (non-console pages), the standalone brand
   lockup, the auth/login panel, and a couple of small layout helpers. */

/* —— borderless top bar (auth, onboarding & participant pages) ——
   The console shell overrides this with the sticky `.app .topbar`. */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 14px; }
.topbar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tlink { font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; border-bottom: 1.5px solid transparent; cursor: pointer; }
.tlink:hover { border-color: var(--solar); }

/* —— standalone brand lockup (top bars; the console sidebar styles its own) —— */
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-weight: 600; font-size: 23px; letter-spacing: -0.01em; }
.brand .mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(150deg, var(--solar), var(--solar-deep)); display: grid; place-items: center; box-shadow: 0 6px 14px -6px var(--solar-deep); }
.brand .mark svg { width: 17px; height: 17px; display: block; }
.brand b { font-weight: 600; }
.brand span { color: var(--solar-deep); }

/* —— generic helpers —— */
.center { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; z-index: 2; }
.display { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 6vw, 52px); letter-spacing: -0.02em; line-height: 1.02; margin: 10px 0 14px; }
.display em { font-style: italic; color: var(--solar-deep); }
.lede { font-size: 18px; color: var(--ink-2); max-width: 52ch; }
.error { color: var(--danger); font-size: 13.5px; font-weight: 600; }

/* `.card` is the legacy alias for the canonical `.qw-card` surface. */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }

/* —— auth / login panel —— */
.login { width: 360px; max-width: 100%; padding: 28px; display: flex; flex-direction: column; }
.login h1 { font-family: var(--serif); font-weight: 600; font-size: 26px; margin: 18px 0 2px; }

/* —— small stat cards (participant home) —— */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.stat { padding: 18px 20px; }
.stat .k { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.stat .v { font-family: var(--mono); font-size: 22px; font-weight: 500; margin-top: 6px; word-break: break-word; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }