/* ============================================================
   AdmissionPrep · Shared header cluster · v2
   ============================================================
   Extracted 2026-06-02 from caseload.v2.css so the centre count +
   view-as picker styles can load on the pages that have them WITHOUT
   pulling in the heavier .caseload page-layout rules.

   Loaded by every page whose folio carries a centre count and/or the
   manager view-as picker: today, caseload, triage, team, org, active,
   us-applicants. Tokens + the .folio base come from prep.v2.css (loaded
   first on every page).

   Perf note: this lets the Today page drop caseload.v2.css entirely
   (~11.5KB of inert .caseload layout) while keeping its header + the
   view-as picker styled. See the CSS-split note in the PR body. A fuller
   extraction of the shared foundation OUT of prep.v2.css is a separate,
   Jake-gated refactor (flagged as a follow-up).
   ============================================================ */

/* Folio centre: count slot (today/caseload). */
.folio-centre {
  display: flex;
  align-items: center;
  gap: 14px;
  letter-spacing: 0.06em;
  opacity: 0.78;
  font-weight: 600;
}

.folio-count {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: oldstyle-nums;
  opacity: 1;
}

/* View-as picker: editorial select. Sits in folio-right. */
.view-as {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Contrast fix 2026-06-02: the picker was styled for the OLD dark forest
   folio and missed in the PR-#19 light migration, leaving white-on-cream
   (invisible). Re-point to the light-header tokens so it matches the sibling
   "Sign out" pill (a.folio-credit) + the nav forest treatment. Behavior
   unchanged: same <select>, id, aria-label, and ?as= reload JS. */
.view-as-label {
  color: var(--muted);   /* 6.29:1 on cream-soft, matches .folio-section/.folio-date */
}

.view-as select {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ap-ink);                 /* ink value, 18.05:1 */
  background-color: var(--ap-cream-deep);/* cream-deep pill = active nav fill */
  border: 1px solid var(--border-strong);/* matches a.folio-credit */
  padding: 5px 26px 5px 12px;
  border-radius: var(--r-pill);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ap-forest) 50%),
    linear-gradient(135deg, var(--ap-forest) 50%, transparent 50%);
  background-position:
    calc(100% - 13px) 50%,
    calc(100% - 9px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.view-as select:hover {
  color: var(--ap-forest);
  border-color: var(--ap-forest);       /* mirrors a.folio-credit:hover + nav hover */
}

.view-as select:focus-visible {
  outline: 2px solid var(--ap-forest);  /* matches a.folio-credit:focus-visible */
  outline-offset: 2px;
}

.view-as select option {
  color: var(--text);
  background: var(--white);
}

/* ---- Responsive: hide the centre count + label on narrow screens, shrink
   the picker. Lifted from caseload.v2.css with the cluster. ---- */
@media (max-width: 900px) {
  .folio-centre { display: none; }
  .view-as-label { display: none; }
  .view-as select { font-size: 12px; padding: 5px 24px 5px 10px; }
}

/* ---- Print: the picker is interactive chrome, hide it. ---- */
@media print {
  .view-as { display: none; }
}

/* ---- Shared page footer. Despite the .caseload- prefix this is shared
   chrome used by today, caseload, triage, active, us-applicants. Moved here
   2026-06-02 with the header cluster so Today can drop caseload.v2.css. ---- */
.caseload-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.caseload-footer-mark {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--green);
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}