/* ============================================================================
   header.css — self-contained stylesheet for the app-header module descendants
   ----------------------------------------------------------------------------
   The <app-header> ROOT keeps its tag (site.css + registry style it); this file
   styles the renamed header-* descendants:

     app-header (root — unchanged)
     ├─ header-welcome > -section > -pane > -frame > -inner > -nav
     │    └─ header-welcome-button > header-link-wrap > a  "Upload data"
     └─ header-user > -section > -pane > -frame > -inner > -nav
          └─ header-user-button > header-account-circle > header-account-label

   Same contract as calendar.css/accordion.css: tag-keyed rules, tokens as
   var(--site-token, fallback), values are the NET of the attribute stack each
   element carried (the whole header chain is [bare] — no borders/bg/padding).
   In-repo load order: AFTER site.css; double-application is a visual no-op.
   ========================================================================== */

/* ── Structure (all [bare]: layout only, no chrome) ──────────────────────── */
header-welcome,
header-user {
  display: grid;
  gap: calc(var(--size-5, 16) * 1px);
  align-content: baseline;
}
header-welcome-section,
header-user-section {
  display: grid;
  gap: calc(var(--size-3, 4) * 1px);
}
header-welcome-pane,
header-user-pane {
  display: grid;
  gap: calc(var(--size-3, 4) * 1px);
}
header-welcome-frame,
header-user-frame {
  display: grid;
  gap: calc(var(--size-5, 16) * 1px);
}
header-welcome-inner,
header-user-inner {
  display: flex;
  flex-direction: column;
  gap: calc(var(--size-5, 16) * 1px);
  height: 100%;
  flex: 0 1 auto;
  min-width: 0;
}
header-welcome-nav,
header-user-nav {
  display: flex;
  gap: calc(var(--size-3, 4) * 1px);
}

/* ── Buttons (net of action-item base minus [bare] unsets) ───────────────── */
header-welcome-button,
header-user-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--size-3, 4) * 1px);
  height: 100%;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  align-content: center;
  cursor: pointer;
}
header-welcome-button *,
header-user-button * {
  cursor: pointer;
}

/* ── Leaves ──────────────────────────────────────────────────────────────── */
header-link-wrap {
  display: block;
  white-space: nowrap;
}
/* The account circle — carries [circle] in markup; net values mirrored here. */
header-account-circle {
  display: block;
  white-space: nowrap;
  border-radius: calc(var(--size-4, 8) * 1px);
  background: var(--color-black, #000000);
  width: calc(var(--size-5, 16) * 1px);
  height: calc(var(--size-5, 16) * 1px);
}
/* Inner label fills the circle so the whole circle is the click target. */
header-account-circle > header-account-label {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
header-account-label {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}

/* ── Staged-reveal parity (host lifecycle opt-in; overlay-guarded) ───────── */
header-account-label {
  transition: opacity calc(var(--size-9, 256) * 1ms) ease-in 0ms;
}
body[data-loading-overlay]:not([loaded]) header-account-label,
body[data-loading-overlay]:not([visible]) header-account-label {
  opacity: calc(var(--size-1, 1) * 0);
}
body[data-loading-overlay][visible] header-account-label {
  opacity: calc(var(--size-10, 512) * 0.1);
}

/* ── Print parity ─────────────────────────────────────────────────────────────
   Pre-rename the chrome PRINTED (the old container{display:none} print rule
   always lost to [grid] on specificity) with the generic-tag print treatment.
   Mirror the rules that were actually effective on these [bare] chains:
   container zeros, section margins, content zeros + break-avoid, group-control
   break-avoid ([bare] already suppresses padding/background in-repo, so only
   the margin/gap/break parts ever applied to header chrome). */
@media print {
  header-welcome,
  header-user {
    margin: 0 !important;
    max-width: none !important;
    gap: 0 !important;
  }
  header-welcome-section,
  header-user-section {
    margin: calc(var(--size-5, 16) * 1px) !important;
    margin-left: calc(var(--size-5, 16) * 1px) !important;
    margin-right: calc(var(--size-5, 16) * 1px) !important;
    max-width: none !important;
    gap: 0 !important;
  }
  header-welcome-pane,
  header-user-pane {
    margin: 0 !important;
    max-width: none !important;
    gap: 0 !important;
    page-break-inside: avoid;
  }
  header-welcome-frame,
  header-user-frame {
    break-inside: avoid;
  }
}