/* ============================================================================
   ALLOCATION POINT — ribbon.css
   ============================================================================
   Canonical geometry for the 32px global masthead ribbon (DESIGN-SYSTEM.md §5).
   Vendor this file alongside tokens.css in every consuming repo — same
   lockfile discipline: update by copying, never by hand-editing values.

   Why this file exists: tokens.css and nav-manifest.json were already
   vendored everywhere, but the ribbon's CONTAINER GEOMETRY was never made
   canonical, so five native stacks (Tailwind, Astro, Jinja) each built
   `.ribbon .in` against their own property's content width. The ribbon is
   the family's constant — it must render identically across properties at
   a given browser width, never inherit the page it's sitting on top of.

   Requires tokens.css loaded first, for: --ribbon-bg/-text/-muted/-h,
   --wrap-max, --space-4, --space-6, --font-sans, --accent-d, --hairline*.
   Plain CSS, no framework assumptions — safe to @import or <link> in
   Tailwind, Astro, or a no-build Jinja/static page alike.

   Contract (see IMPLEMENTATION.md "The masthead ribbon" for the full list):
     - Markup shape and class names are fixed (.ribbon > .in > .fam, .brand,
       nav); the five nav links + their order come from nav-manifest.json.
     - Do NOT override max-width, padding, height, font-size, or the gap
       values below in a consuming repo, even to match that property's own
       layout — that reintroduces exactly the drift this file fixes.
   ========================================================================== */

.ribbon {
  height: var(--ribbon-h);
  background: var(--ribbon-bg);
  color: var(--ribbon-text);
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 12px;
}

/* The content container is ALWAYS --wrap-max + 32px padding — independent
   of the property's own page width (the chart's dense table, the map
   viewer's full-bleed canvas, the hub's marketing wrap all differ; the
   ribbon above them must not). This rule is the fix. */
.ribbon .in {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* family device: five joined cells, current property fills with --accent-d —
   the light accent variants don't clear 3:1 on the ribbon's dark bar
   (DESIGN-SYSTEM.md §3), so the dark pair is used here unconditionally,
   in both themes. */
.ribbon .fam {
  display: inline-flex;
  border-radius: 2px;
  overflow: hidden;
  outline: 1px solid var(--ribbon-muted);
}
.ribbon .fam i {
  width: 10px;
  height: 9px;
  border-right: 1px solid var(--ribbon-muted);
}
.ribbon .fam i:last-child { border-right: none; }
.ribbon .fam i.on { background: var(--accent-d); }

/* family wordmark — always "ALLOCATION POINT" (see IMPLEMENTATION.md); the
   per-property name belongs to the site masthead below the ribbon, not here. */
.ribbon .brand {
  font-weight: 600;
  letter-spacing: .06em;
  font-size: 11px;
  color: var(--ribbon-text);
  text-decoration: none;
}

/* Scoped to `.in nav`, not a bare `.ribbon nav`: a property that adds its own
   secondary nav elsewhere under `.ribbon` (e.g. a mobile menu panel sitting
   alongside `.in`, not inside it — see spectrum-consulting-site's Ribbon.tsx)
   must not have this file's link styling or the ≤760px hide-rule leak into
   it. Only the one nav inside `.in` is "the" platform nav. */
.ribbon .in nav {
  margin-left: auto;
  display: flex;
  gap: 14px;
}
.ribbon .in nav a {
  color: var(--ribbon-muted);
  text-decoration: none;
  padding: 7px 2px;
  font-weight: 500;
}
.ribbon .in nav a:hover { color: var(--ribbon-text); }

/* current-property treatment: underline ONLY (2px --accent-d inset). This is
   the one treatment for the whole family — never pair it with bold, and
   never substitute bold alone on a property that skips the underline. */
.ribbon .in nav a.on,
.ribbon .in nav a[aria-current="page"] {
  color: var(--ribbon-text);
  box-shadow: inset 0 -2px 0 var(--accent-d);
}

/* ≤760px: collapse to family device + brand + current property only
   (DESIGN-SYSTEM.md §4). */
@media (max-width: 760px) {
  .ribbon .in nav a:not(.on):not([aria-current="page"]) { display: none; }
}