/* Shared family chrome (ADR-0036). Hand-maintained; not emitted by hb_brand.build.
   Tokens match packages/brand/tokens/tokens.json. A page that also loads hb-brand.css
   keeps one palette: these custom properties are the same values, scoped to the bar
   so Hatchling pages can wear the family header without loading the adult stylesheet. */

@font-face {
  font-family: "Geist";
  src: url("/brand/fonts/geist-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212, U+25B2, U+25BC;
}

/* Default column. A layout class on a shared ancestor (the body) overrides it, so the
   header and the footer use the same width. Setting it here, and not again on the
   header or the footer, is what lets that ancestor win. */
:root { --hb-family-max: 76rem; }

.hb-family-header,
.hb-family-footer {
  --hb-bg: #0b1020;
  --hb-surface: #121a33;
  --hb-raised: #1b2546;
  --hb-selected: #1c3145;
  --hb-border: #2a3560;
  --hb-border-strong: #68708e;
  --hb-text: #e7eaf6;
  --hb-text-2: #9aa3c7;
  --hb-text-3: #848db0;
  --hb-focus: #5cc8c0;
  --hb-link-hover: #8fe0d9;
  --hb-tide: #5cc8c0;
  --hb-ember: #f0854c;
  --hb-on-ember: #0b1020;
  --hb-font: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--hb-font);
  color: var(--hb-text);
  background: var(--hb-bg);
  color-scheme: dark;
}

[data-theme="shore"] .hb-family-header,
[data-theme="shore"] .hb-family-footer {
  --hb-bg: #f6f7fb;
  --hb-surface: #ffffff;
  --hb-raised: #edeff6;
  --hb-selected: #e8f2f1;
  --hb-border: #d9ddea;
  --hb-border-strong: #83899f;
  --hb-text: #121833;
  --hb-text-2: #525a7a;
  --hb-text-3: #656c89;
  --hb-focus: #147a72;
  --hb-link-hover: #0f5e58;
  --hb-tide: #147a72;
  --hb-ember: #bc4715;
  --hb-on-ember: #ffffff;
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .hb-family-header,
  :root:not([data-theme]) .hb-family-footer {
    --hb-bg: #f6f7fb;
    --hb-surface: #ffffff;
    --hb-raised: #edeff6;
    --hb-selected: #e8f2f1;
    --hb-border: #d9ddea;
    --hb-border-strong: #83899f;
    --hb-text: #121833;
    --hb-text-2: #525a7a;
    --hb-text-3: #656c89;
    --hb-focus: #147a72;
    --hb-link-hover: #0f5e58;
    --hb-tide: #147a72;
    --hb-ember: #bc4715;
    --hb-on-ember: #ffffff;
    color-scheme: light;
  }
}

.hb-family-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--hb-border);
}

/* A short window (400% zoom, about 500px tall) keeps the header in normal flow so it
   does not cover the page (MONEY-KIT-05). */
@media (max-height: 32rem) {
  .hb-family-header { position: static; }
}

.hb-family-narrow { --hb-family-max: 56rem; }
.hb-family-flightpath { --hb-family-max: 79rem; }

.hb-family-header .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hb-family-bar,
.hb-family-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--hb-family-max);
  margin-inline: auto;
  padding: 0.5rem 1.5rem;
}

.hb-family-brand {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
}

.hb-brand-lock { position: relative; display: inline-flex; flex: none; align-items: center; }

.hb-brand-home,
.hb-brand-by,
.hb-switcher-inline a,
.hb-local-nav a,
.hb-products-btn,
.hb-products-panel a,
.hb-family-footer a {
  text-decoration: none;
}

.hb-brand-home {
  display: inline-flex;
  align-items: center;
  margin: -0.25rem;
  padding: 0.25rem;
  border-radius: 0.75rem;
}

.hb-brand-by {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 66%;
  border-radius: 0.75rem;
}

.hb-mark { display: block; height: auto; max-width: 100%; }

/* Sized by height with width:auto from the width/height attributes (the artwork ratio), so the
   lockup never letterboxes and the box is known before the SVG loads (no layout shift). */
.hb-lockup { display: block; width: auto; height: 32px; max-width: 100%; }

.hb-mark-slot { display: none; }

.hb-family-caption {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--hb-text-3);
}

.hb-family-switch { display: flex; flex: none; align-items: center; }

.hb-switcher-inline {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-switcher-inline a,
.hb-local-nav a,
.hb-products-panel a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.8rem;
  border-radius: 999px;
  color: var(--hb-text-2);
  box-shadow: inset 0 -2px 0 transparent;
}

.hb-switcher-inline a:hover,
.hb-local-nav a:hover,
.hb-products-panel a:hover,
.hb-family-footer a:hover { color: var(--hb-link-hover); }

.hb-switcher-inline a[aria-current="page"],
.hb-switcher-inline a.hb-product-here,
.hb-local-nav a[aria-current="page"],
.hb-products-panel a[aria-current="page"],
.hb-products-panel a.hb-product-here,
.hb-family-footer a[aria-current="page"] {
  color: var(--hb-text);
  background: var(--hb-selected);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--hb-ember);
}

/* In this product, not necessarily on its home page. No pill: the pill is aria-current. */
.hb-switcher-inline a[data-active="true"]:not([aria-current="page"]),
.hb-products-panel a[data-active="true"]:not([aria-current="page"]) {
  color: var(--hb-text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--hb-ember);
}

.hb-product-icon { display: block; width: 20px; height: 20px; }

/* Icons belong in the Products menu (hidden until it is open). The desktop row is
   the words Wingspan and Flightpath, so a closed header shows only the brand image. */
.hb-switcher-inline .hb-product-icon { display: none !important; }

.hb-switcher-menu { display: none; position: relative; }

/* A closed menu keeps its icons out of view. Chrome hides <details> with
   content-visibility, which still leaves the images laid out. */
.hb-switcher-menu:not([open]) .hb-products-panel { display: none; }

.hb-products-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--hb-border-strong);
  border-radius: 999px;
  background: var(--hb-surface);
  color: var(--hb-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.hb-products-btn::-webkit-details-marker { display: none; }

.hb-caret {
  width: 0.45rem;
  height: 0.45rem;
  margin-top: -0.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.hb-switcher-menu[open] .hb-caret { margin-top: 0.15rem; transform: rotate(225deg); }

.hb-products-panel {
  position: absolute;
  right: 0;
  z-index: 50;
  min-width: 16rem;
  margin-top: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--hb-border-strong);
  border-radius: 0.85rem;
  background: var(--hb-surface);
  box-shadow: 0 12px 32px rgb(11 16 32 / 18%);
}

.hb-products-panel ul { margin: 0; padding: 0; list-style: none; }

.hb-products-panel a { width: 100%; border-radius: 0.6rem; }

.hb-family-rule { display: none; }

.hb-family-local { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; }

.hb-local-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-family-theme { margin-left: auto; }

.hb-family-header .theme-switch {
  display: inline-flex;
  gap: 0.125rem;
  margin: 0;
  padding: 0.125rem;
  border: 1px solid var(--hb-border-strong);
  border-radius: 999px;
}

.hb-family-header .theme-option {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.8rem;
  border-radius: 999px;
  color: var(--hb-text-2);
  cursor: pointer;
}

.hb-family-header .theme-option span {
  color: inherit;
  background: transparent;
  padding: 0;
  min-height: 0;
}

.hb-family-header .theme-option:has(:checked),
.hb-family-header .theme-option:has(:checked) span,
.hb-family-header .theme-option input:checked + span {
  background: var(--hb-selected);
  color: var(--hb-text);
  font-weight: 600;
}

.hb-family-header .theme-option:has(:checked) {
  box-shadow: inset 0 0 0 1px var(--hb-tide);
}

.hb-family-footer { border-top: 1px solid var(--hb-border); }

.hb-family-footer-row { padding-block: 1rem 1.5rem; }

.hb-family-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-family-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.35rem;
  color: var(--hb-text-2);
}

.hb-family-copy { margin: 0 0 0 auto; color: var(--hb-text-3); font-size: 0.875rem; }

.hb-family-extra { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.hb-brand-home:focus-visible,
.hb-brand-by:focus-visible,
.hb-switcher-inline a:focus-visible,
.hb-local-nav a:focus-visible,
.hb-products-btn:focus-visible,
.hb-products-panel a:focus-visible,
.hb-family-footer a:focus-visible,
.hb-family-header .theme-option:has(:focus-visible) {
  outline: 2px solid var(--hb-focus);
  outline-offset: 2px;
}

:root:not(.hb-js) [data-hb-theme-switch] { display: none; }

[data-theme="shore"] .hb-show-dusk,
[data-theme="dusk"] .hb-show-shore { display: none !important; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .hb-show-dusk { display: none !important; }
}

@media not (prefers-color-scheme: light) {
  :root:not([data-theme]) .hb-show-shore { display: none !important; }
}

@media (min-width: 48rem) {
  /* The rule lives inside .hb-family-local, so when that group wraps it stays
     at the start of the section row instead of trailing the product row alone. */
  .hb-family-local { flex-wrap: nowrap; }

  .hb-family-rule {
    display: block;
    flex: none;
    width: 1px;
    align-self: stretch;
    min-height: 1.75rem;
    margin-inline: 0.35rem 0.65rem;
    background: var(--hb-border-strong);
  }

  .hb-switcher-inline {
    padding: 0.125rem;
    border-radius: 999px;
    background: var(--hb-raised);
  }
}

@media (max-width: 47.99rem) {
  .hb-family-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  /* No vertical padding: the two rows are already 44px, and a 6px pad only existed
     to absorb a negative margin. 2px between the rows. 44 + 2 + 44 + the 1px rule. */
  .hb-family-bar { padding: 0 0.75rem; row-gap: 0.125rem; }

  /* A sticky bar covers buttons that scroll underneath it (axe target-size). Phone
     headers scroll with the page. Flightpath keeps the bar sticky so the mode chip
     stays up, except on a short window (the max-height rule above). */
  .hb-family-header { position: static; }

  .hb-family-brand { order: 0; }

  .hb-family-switch { order: 1; }

  /* The theme control moves into the Products menu (hb-theme.js), so it adds no row. */
  .hb-family-bar > .hb-family-theme { display: none; }

  .hb-family-bar { max-width: 100%; }

  /* Section links wrap between words. A label is never clipped mid-word, and the row does not scroll. */
  .hb-family-local {
    order: 2;
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }

  .hb-local-nav { min-width: 0; max-width: 100%; }

  .hb-local-nav ul { flex-wrap: wrap; width: 100%; row-gap: 0; }

  .hb-local-nav li { flex: none; }

  .hb-local-nav a { white-space: nowrap; padding-inline: 0.55rem; font-size: 0.9375rem; }

  .hb-products-panel .hb-family-theme {
    display: block;
    margin: 0.35rem 0.2rem 0.15rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--hb-border);
  }

  .hb-products-panel .theme-switch { display: flex; }

  .hb-products-panel .theme-option { flex: 1 1 0; justify-content: center; padding-inline: 0.4rem; }

  .hb-switcher-inline { display: none; }

  .hb-switcher-menu { display: block; }

  .hb-family-header .hb-lockup { display: none !important; }

  .hb-family-header .hb-mark-slot { display: inline-flex; flex: none; }

  .hb-family-header .hb-mark { width: 32px; height: 32px; max-width: none; }

  /* 32px mark, 6px of padding on each side: a 44px hit. The sideways margin reaches
     into the bar's padding so the mark lines up with the content edge. No upward
     margin: that used to stick out of the bar and the row was already 44px tall. */
  .hb-family-header .hb-brand-home {
    box-sizing: border-box;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0 -6px;
    padding: 6px;
  }

  .hb-family-header .hb-brand-by { display: none; }

  .hb-products-btn { padding-inline: 0.7rem; }

  .hb-family-header .theme-option { padding-inline: 0.45rem; font-size: 0.8125rem; }

  /* 44px hits. The painted pill is 38px (3px inset), so it clears the top of the
     screen and the header's bottom rule. The bar stays 44 + 2 + 44 + 1. */
  .hb-family-header .hb-products-btn,
  .hb-family-header .hb-local-nav a,
  .hb-family-header .hb-brand-home {
    position: relative;
    z-index: 0;
  }

  .hb-family-header .hb-products-btn {
    border-color: transparent;
    background: transparent;
  }

  .hb-family-header .hb-products-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 3px 0;
    border-radius: 999px;
    background: var(--hb-surface);
    box-shadow: inset 0 0 0 1px var(--hb-border-strong);
  }

  .hb-family-header .hb-local-nav a[aria-current="page"],
  .hb-family-header .hb-brand-home[aria-current="page"] {
    background: transparent;
    box-shadow: none;
  }

  .hb-family-header .hb-local-nav a[aria-current="page"]::before,
  .hb-family-header .hb-brand-home[aria-current="page"]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 3px 0;
    border-radius: 999px;
    background: var(--hb-selected);
    box-shadow: inset 0 -2px 0 var(--hb-ember);
  }

  @media (min-height: 32rem) {
    /* The layout class is also on <body>. Sticky belongs to the header only. */
    .hb-family-header.hb-family-flightpath { position: sticky; }
  }

  .hb-switcher-menu[open] .hb-products-panel {
    position: fixed;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    min-width: 0;
  }

  /* The account menu hangs off its button. On a phone that button sits in the
     left-hand tools cluster, so a 16rem panel runs 12px past the left edge.
     Pin the open panel to the viewport, inset on the right. */
  .hb-family-header .avatar-menu[open] .avatar-panel {
    position: fixed;
    top: auto;
    right: 0.75rem;
    left: auto;
    width: min(16rem, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    box-sizing: border-box;
  }

}

/* Later app stylesheets (`.ws a`, lesson `a { underline }`) must not restyle the chrome. */
header.hb-family-header a,
footer.hb-family-footer nav a {
  text-decoration: none;
}

header.hb-family-header .hb-switcher-inline a,
header.hb-family-header .hb-local-nav a,
header.hb-family-header .hb-products-panel a,
footer.hb-family-footer nav a {
  color: var(--hb-text-2);
}

header.hb-family-header .hb-switcher-inline a:hover,
header.hb-family-header .hb-local-nav a:hover,
header.hb-family-header .hb-products-panel a:hover,
footer.hb-family-footer nav a:hover {
  color: var(--hb-link-hover);
}

header.hb-family-header a[aria-current="page"],
header.hb-family-header a.hb-product-here,
footer.hb-family-footer nav a[aria-current="page"] {
  color: var(--hb-text);
  background: var(--hb-selected);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--hb-ember);
}

header.hb-family-header .hb-switcher-inline a[data-active="true"]:not([aria-current="page"]),
header.hb-family-header .hb-products-panel a[data-active="true"]:not([aria-current="page"]) {
  color: var(--hb-text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--hb-ember);
}

header.hb-family-header .hb-switcher-inline a[data-active="true"]:not([aria-current="page"]):hover,
header.hb-family-header .hb-products-panel a[data-active="true"]:not([aria-current="page"]):hover {
  color: var(--hb-link-hover);
}

@media (prefers-reduced-motion: reduce) {
  .hb-caret { transform: rotate(45deg); }
}