/* ============================================================
   LOUPE — SHARED COMPONENTS
   ------------------------------------------------------------
   Reusable UI primitives built from brand.config.css tokens.
   Link this AFTER brand.config.css on every page so the whole
   product shares one implementation — change the look here once
   and it updates the marketing site, workspace and intake at once.

   (The generated report is self-contained and inlines its own
   copy of .glass-bar, so keep the two in sync if you change it.)
   ============================================================ */

/* ---- GLASS SURFACES ----------------------------------------
   The signature material: a translucent fill + backdrop blur +
   a hairline border + a top-edge highlight. Two variants:
     .glass-bar   → an edge-to-edge sticky top bar (bottom border)
     .glass-panel → a rounded, free-floating panel (rail, card)
   Add the class and keep your own layout props (position, size,
   padding, flex) on the element's existing selector.
   ------------------------------------------------------------ */
.glass-bar {
  background: var(--surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi);
}

.glass-panel {
  background: var(--surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

/* ---- TOP BAR -----------------------------------------------
   The product-wide top bar: logo hard-left, actions + account
   hard-right, edge-to-edge. Pair the element with .glass-bar for
   the material. Used by the workspace AND the marketing site so
   the logo and avatar sit in identical positions everywhere.
   ------------------------------------------------------------ */
.topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { width: 24px; height: 24px; flex-shrink: 0; }
.brand-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.18rem; letter-spacing: -0.02em; color: var(--text); }
.brand-name span { color: var(--accent); }
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.btn-new { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 0.86rem; color: #201f14; background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  box-shadow: 0 8px 22px -10px rgba(var(--accent-rgb), 0.5); transition: transform 0.2s var(--spring); }
.btn-new svg { width: 15px; height: 15px; stroke: #201f14; }
.btn-new:hover { transform: translateY(-1px); }
/* secondary top-bar action (e.g. Log in) — quiet next to the lime CTA */
.topbar-login { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--glass-border); flex-shrink: 0;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.topbar-login:hover { color: var(--text); border-color: var(--glass-border-strong); }
@media (max-width: 560px) { .btn-new span { display: none; } .btn-new { padding: 0 11px; } }

/* ---- ACCOUNT MENU (avatar dropdown) ------------------------
   Behaviour wired by components.js. Add data-account-autofill to
   the .account element to personalise avatar + name from the
   saved session (localStorage 'loupe.submission').
   ------------------------------------------------------------ */
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: #0B0D12; cursor: pointer;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent)); flex-shrink: 0; border: 1px solid rgba(255,255,255,0.2); }
.avatar svg { width: 19px; height: 19px; stroke: #201f14; }
.account { position: relative; }
.account-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 70; width: 236px; padding: 8px;
  background: rgba(20,20,22,0.86); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-border-strong); border-radius: var(--radius-md); box-shadow: var(--glass-shadow); }
.am-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 6px; }
.am-head b { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--text); }
.am-head small { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--text-faint); }
.am-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 0 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 0.9rem; font-family: var(--font-body); background: none; border: 0; cursor: pointer; text-align: left; text-decoration: none; transition: background 0.18s var(--ease), color 0.18s var(--ease); }
.am-item svg { width: 17px; height: 17px; stroke: currentColor; flex: none; opacity: 0.85; }
.am-item:hover { background: var(--surface); color: var(--text); }
.am-out { color: var(--red); }
.am-out:hover { background: rgba(255,92,122,0.1); color: var(--red); }
.account-sep { height: 1px; background: var(--hairline); margin: 6px 4px; }