/* =============================================================
   Shared component primitives — the third single-source-of-truth
   sheet, alongside theme.css (colour) and layout.css (width + grid).

   Linked in every page's <head> AFTER theme.css and BEFORE that
   page's own inline <style>. It defines the canonical card chassis,
   the page header, the eyebrow label and the 38x38 icon button, so
   every page reads as one app instead of seven hand-built ones.

   A page should just USE these class names. To retune the whole
   app's card look / header / buttons, edit THIS file — nothing else.
   Pages must not redefine .card / .icon-btn chassis in their inline
   <style> (inline would win and re-fragment the look); add any
   page-specific extras in a MORE specific rule (e.g. .recovery-card)
   that layers on top of the shared chassis.

   Pure CSS, no build step.
   ============================================================= */

/* ---- Card chassis: the canonical tile. One hairline themed border,
   the themed soft shadow, an 18px radius and a flat themed surface —
   no glass blur, no heavy baked-in black shadow. Both skins themed
   automatically because every value is a theme var. ---- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 20px 22px;
}

/* ---- Page header: a flex row with the title on the left and any
   action icon-buttons on the right. The home page (index) keeps its
   own time-aware greeting header; every other page uses this so the
   title size, weight and action placement match. ---- */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.page-head .page-title,
.page-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.15;
}
.page-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ---- Icon button: a 38x38 themed action (settings, refresh, back).
   Replaces every page's bespoke ~32-38px action button so they all
   look identical. ---- */
.icon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  color: var(--text-secondary);
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover {
  color: var(--text-primary);
  background: var(--card-2);
  border-color: var(--border-soft);
}
.icon-btn svg { width: 18px; height: 18px; display: block; }

/* ---- Eyebrow: the small mono uppercase label used above card
   content app-wide. ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
