/* ═══════════════════════════════════════════════════════════════════════════
   Chrome — the utility bar, masthead, navigation, mobile drawer and footer.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer layout {
  .tr-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  @media (max-width: 575px) {
    .tr-container { padding-inline: var(--gutter-tight); }
  }

  .tr-main { display: block; min-height: 50vh; }
  .tr-main:focus { outline: none; }
}

@layer chrome {
  /* ── Sticky wrapper ──────────────────────────────────────────────────────
     The WHOLE chrome sticks, offset upward by exactly the topbar height, so
     the utility bar scrolls out of view and the masthead lands flush at the
     top. Making only the masthead sticky would not work: a sticky element is
     confined to its containing block, so it would scroll away with a wrapper.
     ────────────────────────────────────────────────────────────────────── */
  .tr-chrome {
    position: sticky;
    inset-block-start: calc(-1 * var(--topbar-h));
    z-index: var(--z-header);
    background: var(--surface-card);
  }
  .tr-chrome--no-topbar { inset-block-start: 0; }

  /* ── Utility bar ─────────────────────────────────────────────────────── */
  .tr-topbar {
    height: var(--topbar-h);
    background: var(--cobalt-800);
    color: var(--text-inverse-muted);
  }
  .tr-topbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-6); height: 100%;
  }
  .tr-topbar__links { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
  .tr-topbar__link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-2xs); font-weight: var(--fw-medium);
    color: inherit; white-space: nowrap;
  }
  .tr-topbar__link:hover { color: var(--sun-300); }
  .tr-topbar__note {
    font-size: var(--text-2xs); color: rgba(255,255,255,.55);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tr-topbar__right { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }

  .tr-langs { display: flex; align-items: center; gap: var(--space-2); }
  .tr-langs__item {
    font-size: var(--text-2xs); font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-label); color: var(--text-inverse-muted);
  }
  .tr-langs__item[aria-current] { color: var(--wash-0); }
  .tr-langs__item--off { opacity: .4; }

  /* Collapsed search capsule. Width is animated, not display, so the field
     never leaves the DOM and the form stays submittable with JS off. */
  .tr-topsearch { display: flex; align-items: center; gap: var(--space-2); }
  .tr-topsearch__slot { display: flex; }
  .tr-js .tr-topsearch__slot {
    inline-size: 0; overflow: hidden; visibility: hidden;
    transition: inline-size var(--dur-base) var(--ease-standard), visibility var(--dur-base);
  }
  .tr-js .tr-topsearch__slot[data-open] { inline-size: 220px; visibility: visible; }

  /* ── Masthead ────────────────────────────────────────────────────────── */
  .tr-masthead {
    height: var(--header-h);
    background: var(--surface-card);
    box-shadow: var(--shadow-header);
    transition: height var(--dur-base) var(--ease-standard);
  }
  .tr-masthead__inner {
    display: flex; align-items: center; gap: var(--space-9);
    height: 100%;
  }
  /* Compacted state, set by trMasthead once the chrome pins. */
  [data-compact] .tr-masthead {
    height: var(--header-h-compact);
    background: var(--surface-glass);
    -webkit-backdrop-filter: var(--blur-chrome);
    backdrop-filter: var(--blur-chrome);
  }
  [data-compact] .tr-brand__mark { width: 30px; height: 30px; }
  [data-compact] .tr-brand__word { font-size: var(--text-md); }

  /* ── Brand ───────────────────────────────────────────────────────────── */
  .tr-brand {
    display: flex; align-items: center; gap: var(--space-3);
    flex-shrink: 0; color: inherit;
  }
  .tr-brand__mark {
    width: 38px; height: 38px; flex-shrink: 0;
    transition: width var(--dur-base) var(--ease-standard), height var(--dur-base) var(--ease-standard);
  }
  .tr-brand__word {
    font-family: var(--type-wordmark-family);
    font-size: var(--text-lg);
    font-weight: var(--type-wordmark-weight);
    letter-spacing: var(--type-wordmark-tracking);
    line-height: 1; white-space: nowrap;
    color: var(--wash-800);
    transition: font-size var(--dur-base) var(--ease-standard);
  }
  .tr-brand__word--sm { font-size: var(--text-md); }
  .tr-brand__accent { color: var(--cobalt-600); }
  .tr-brand__accent--sea { color: var(--sea-300); }
  .tr-brand--footer .tr-brand__word { color: var(--wash-0); }

  /* ── Desktop navigation ──────────────────────────────────────────────────
     The reveal is CSS-owned (:hover / :focus-within) so the menu is fully
     usable without JS; Alpine only damps hover intent and adds arrow keys.
     ────────────────────────────────────────────────────────────────────── */
  .tr-nav { display: flex; align-items: center; height: 100%; flex: 1; min-width: 0; }
  .tr-nav__list {
    display: flex; align-items: center; gap: var(--space-6);
    height: 100%; margin: 0; padding: 0; list-style: none;
  }
  .tr-nav__item { position: relative; height: 100%; margin: 0; }
  .tr-nav__link {
    position: relative;
    display: inline-flex; align-items: center; gap: 5px;
    height: 100%; min-height: var(--tap-min);
    font-size: var(--text-sm); font-weight: var(--fw-semibold);
    color: var(--text-body); white-space: nowrap;
  }
  .tr-nav__link:hover { color: var(--cobalt-700); }
  .tr-nav__chevron { font-size: 10px; opacity: .55; }

  /* Sun-yellow underline on hover, cobalt on the active item. */
  .tr-nav__link::after {
    content: ""; position: absolute; inset: auto 0 0 0;
    height: var(--border-w-rule); background: transparent;
    transition: var(--transition-color);
  }
  .tr-nav__link:hover::after { background: var(--sun-500); }
  .tr-nav__link[aria-current]::after { background: var(--cobalt-600); }

  .tr-subnav {
    position: absolute; inset-block-start: 100%; inset-inline-start: 0;
    z-index: var(--z-dropdown, 210);
    min-inline-size: 240px; margin: 0; padding: var(--space-2) 0;
    list-style: none;
    background: var(--surface-card);
    border: var(--border-w-hair) solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease-standard), visibility var(--dur-fast);
  }
  .tr-nav__item:hover > .tr-subnav,
  .tr-nav__item:focus-within > .tr-subnav,
  .tr-nav__item[data-open] > .tr-subnav { opacity: 1; visibility: visible; }

  .tr-subnav .tr-nav__item { height: auto; }
  .tr-subnav .tr-nav__link {
    display: flex; justify-content: space-between;
    width: 100%; height: auto; padding: var(--space-3) var(--space-5);
    font-weight: var(--fw-medium); white-space: normal;
  }
  .tr-subnav .tr-nav__link::after { display: none; }
  .tr-subnav .tr-nav__link:hover { background: var(--surface-brand-soft); }
  /* Third level opens to the side. */
  .tr-subnav .tr-subnav { inset-block-start: calc(-1 * var(--space-2)); inset-inline-start: 100%; }
  .tr-subnav .tr-nav__chevron { transform: rotate(-90deg); }

  /* ── Icon button / burger ────────────────────────────────────────────── */
  .tr-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--tap-min); min-height: var(--tap-min);
    padding: 0; background: none; border: 0; cursor: pointer;
    color: inherit;
  }
  .tr-icon-btn:hover { color: var(--sun-300); }
  .tr-masthead__actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
  .tr-masthead__search { color: var(--text-muted); }
  .tr-masthead__search:hover { color: var(--cobalt-600); }

  .tr-burger {
    display: none;
    align-items: center; justify-content: center;
    min-width: var(--tap-min); min-height: var(--tap-min);
    background: none; border: 0; cursor: pointer;
  }
  .tr-burger__bars { display: grid; gap: 4px; }
  .tr-burger__bars span {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--text-strong);
  }

  /* ── Mobile drawer ───────────────────────────────────────────────────── */
  /* Drawer and scrim stay in the DOM and are shown by [data-open], which
     Alpine sets from the nav store. CSS owns the motion so the duration comes
     from the tokens (and is zeroed by prefers-reduced-motion automatically).
     Closed state is unreachable by pointer and removed from the tab order via
     visibility:hidden, so no JS is needed to keep it out of the way. */
  .tr-scrim {
    position: fixed; inset: 0; z-index: var(--z-overlay);
    background: var(--surface-overlay);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base);
  }
  .tr-scrim[data-open] { opacity: 1; visibility: visible; pointer-events: auto; }

  .tr-drawer {
    position: fixed; inset-block: 0; inset-inline-end: 0;
    z-index: calc(var(--z-overlay) + 1);
    inline-size: min(88vw, 360px);
    display: flex; flex-direction: column;
    background: var(--surface-card);
    box-shadow: var(--shadow-modal);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  .tr-drawer[data-open] { transform: none; visibility: visible; }
  .tr-drawer:focus { outline: none; }
  .tr-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-w-hair) solid var(--border-hairline);
  }
  .tr-drawer__head .tr-icon-btn { color: var(--text-muted); }
  .tr-drawer__nav { padding: var(--space-2) 0; }
  .tr-drawer__list, .tr-drawer__sub { margin: 0; padding: 0; list-style: none; }
  .tr-drawer__item { margin: 0; }
  .tr-drawer__row {
    display: flex; align-items: stretch;
    border-bottom: var(--border-w-hair) solid var(--border-hairline);
  }
  .tr-drawer__link {
    flex: 1; display: flex; align-items: center;
    min-height: var(--tap-min); padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm); font-weight: var(--fw-semibold);
    color: var(--text-strong);
  }
  .tr-drawer__link[aria-current] { color: var(--cobalt-700); box-shadow: inset 3px 0 0 var(--cat); }
  .tr-drawer__toggle {
    display: flex; align-items: center; justify-content: center;
    min-width: var(--tap-min); background: none; border: 0; cursor: pointer;
    color: var(--text-muted);
    border-inline-start: var(--border-w-hair) solid var(--border-hairline);
  }
  .tr-drawer__toggle[aria-expanded="true"] .fa { transform: rotate(180deg); }
  .tr-drawer__toggle .fa { transition: transform var(--dur-fast) var(--ease-standard); }
  .tr-drawer__sub { display: none; background: var(--surface-sunken); }
  .tr-drawer__sub[data-open] { display: block; }
  .tr-drawer__sub .tr-drawer__link { padding-inline-start: var(--space-8); font-weight: var(--fw-medium); }
  .tr-drawer__sub .tr-drawer__sub .tr-drawer__link { padding-inline-start: var(--space-10); }
  .tr-drawer__search { padding: var(--space-5); }

  /* ── Footer ──────────────────────────────────────────────────────────── */
  .tr-footer {
    position: relative;
    margin-block-start: var(--section-gap);
    background: var(--cobalt-900);
    color: var(--text-inverse-muted);
    overflow: hidden;
  }
  /* Photography, held well back, with a cobalt wash over it — never a
     desaturation or a duotone. */
  .tr-footer__photo { position: absolute; inset: 0; }
  .tr-footer__photo img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
  .tr-footer__photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(5,32,60,.75), var(--cobalt-950));
  }
  .tr-footer__inner {
    position: relative;
    display: grid; gap: var(--space-9);
    /* auto-fit rather than a fixed 4-track grid: the section, widget and
       community columns each render nothing at all when their menu or widget
       area is empty, and fixed tracks would leave dead space behind them. */
    grid-template-columns: minmax(260px, 1.6fr) repeat(auto-fit, minmax(180px, 1fr));
    padding-block: var(--space-11) var(--space-9);
  }
  .tr-footer__brand { display: grid; gap: var(--space-4); align-content: start; }
  .tr-footer__blurb { max-width: 38ch; font-size: var(--text-sm); line-height: var(--lh-relaxed); }
  .tr-footer__col { display: grid; gap: var(--space-3); align-content: start; }
  .tr-footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
  .tr-footer__list li { margin: 0; }
  .tr-footer__list a { font-size: var(--text-sm); }

  .tr-social { display: flex; gap: var(--space-3); }
  .tr-social__link {
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: var(--radius-round);
    border: var(--border-w-hair) solid var(--border-on-dark);
    color: var(--wash-0); font-size: 13px;
  }
  .tr-social__link:hover { background: rgba(255,255,255,.10); color: var(--wash-0); }

  .tr-footer__base { position: relative; border-top: var(--border-w-hair) solid var(--border-on-dark); }
  .tr-footer__base-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-6); min-height: 56px; font-size: var(--text-xs);
  }
  .tr-footer__base-links { display: flex; gap: var(--space-5); }

  /* ── Responsive ──────────────────────────────────────────────────────── */
  @media (max-width: 991px) {
    .tr-nav { display: none; }
    .tr-burger { display: inline-flex; }
    .tr-masthead__inner { gap: var(--space-4); }
    .tr-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    .tr-footer__brand { grid-column: 1 / -1; }
  }
  @media (max-width: 767px) {
    .tr-topbar__links { gap: var(--space-4); }
    .tr-topbar__note { display: none; }
  }
  @media (max-width: 575px) {
    .tr-brand__word { font-size: var(--text-md); }
    .tr-topsearch, .tr-langs { display: none; }
    .tr-footer__inner { grid-template-columns: 1fr; }
    .tr-footer__base-inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-block: var(--space-4); }
  }
}