/* ----------------------------------------------------------------- frame
 * templates/base.html: masthead, navigation, the content shell, footer.
 * The masthead is paper with a mist rule - no translucency, no blur
 * (WEB-GRU-03: no effects). On a phone the navigation folds behind its
 * toggle and the search becomes a tool that opens the field (owner brief
 * F: the search no longer takes a row of its own under the logo). */
@layer ui {
.masthead { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--mist); }
.masthead__top {
  max-width: var(--shell); margin: 0 auto; padding: var(--s-4) var(--s-6) var(--s-3);
  display: flex; align-items: center; gap: var(--s-5);
}
.masthead__nav { border-top: 1px solid var(--cloud); }
.masthead__nav-inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--s-6);
  display: flex; align-items: stretch; gap: var(--s-4);
}
/* The original lockup (WEB-NAV-01, Alle-CORUM-logo-20232.png). Never redrawn. */
.brand { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
.brand__logo { height: 21px; width: auto; display: block; }
.brand__sub { color: var(--graphite); font-size: var(--t-micro); padding-left: var(--s-3); border-left: 1px solid var(--mist); }

/* One line, always. A tab that wraps ("Monthly Investment / View") reads as
   two entries and pushes the underline off its label, so the row gives up
   width before it gives up the line: the gap shrinks with the viewport and
   the row scrolls sideways rather than breaking. */
.nav {
  display: flex; gap: clamp(var(--s-3), 1.9vw, var(--s-6)); align-items: stretch;
  min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav__link {
  font-size: var(--t-small); color: var(--slate); white-space: nowrap;
  display: inline-flex; align-items: center; padding: var(--s-3) 0 calc(var(--s-3) + 1px);
  border-bottom: 3px solid transparent;
}
.nav__link:hover { color: var(--ink); }
.nav__link.is-active { color: var(--ink); border-bottom-color: var(--corum); }

.utility { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
.utility__item { font-size: var(--t-micro); color: var(--graphite); }
.utility__item a:hover { color: var(--corum); }

.nav-toggle { display: none; box-sizing: border-box; width: var(--ctl-h); height: var(--ctl-h); flex-direction: column;
  align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; }
.nav-toggle span { display: block; flex: none; width: 20px; height: 1px; background: var(--ink); margin: 3px 0; }
.masthead .masthead__search-tool { display: none; }
/* The open toggle shows «×» (K-06, WEB-NAV-07): the outer lines cross,
   the middle one is hidden. No transition (WEB-BEW-02). */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { visibility: hidden; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Account and sign-out in the open menu; on wide screens the utility row
   has them. */
.nav__account { display: none; }

/* The portal-wide search sits at the end of the navigation row; it gives
   way before the navigation does - a clipped tab reads as a broken page. */
.nav-search { margin-left: auto; display: flex; align-items: center; }
.nav-search input { width: clamp(6.5rem, 9vw, 11rem); height: var(--ctl-h-sm); border-color: var(--rule-control); border-bottom-color: var(--graphite); }

.shell { max-width: var(--shell); margin: 0 auto; padding: var(--s-7) var(--s-6) var(--s-8); }

@media (max-width: 900px) {
  .masthead { position: static; }
  .masthead__top { padding: var(--s-4) var(--s-5); gap: var(--s-2); }
  .brand__sub { display: none; }
  .masthead .masthead__search-tool { display: inline-flex; margin-left: auto; }
  .nav-toggle { display: flex; }
  .utility { display: none; }
  .masthead__nav-inner { padding: 0 var(--s-5); flex-direction: column; gap: 0; }
  .nav { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--s-4); width: 100%; }
  /* Closed from the first frame, not once table.js runs: the open menu
     stood 390 px tall and the page jumped up when the script closed it
     (CLS 0.44 on every page at 375 px). Without scripting a
     noscript rule keeps it open (_stylesheets.html). */
  .nav:not(.is-open) { display: none; }
  .nav__link { padding: var(--s-3) 0; border-bottom: 1px solid var(--cloud); }
  .nav__link.is-active { border-bottom-color: var(--corum); }
  .nav__account { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
    padding-top: var(--s-3); }
  .nav__account-name { font-size: var(--t-micro); color: var(--graphite); margin-right: auto; }
  /* The search opens above the navigation, only when asked for. */
  .nav-search { display: none; order: -1; margin: var(--s-3) 0; width: 100%; }
  .nav-search.is-open { display: flex; }
  .nav-search input { width: 100%; height: var(--ctl-h); }
  .shell { padding: var(--s-6) var(--s-5) var(--s-7); }
}

/* The footer: the red rule of the frame (structural red), two quiet lines. */
.footer { border-top: 1px solid var(--corum); margin-top: var(--s-8); padding: var(--s-5) 0 var(--s-7); }
.footer__inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--s-6);
  display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
  font-size: var(--t-micro); color: var(--graphite);
}
.footer p { margin: 0; max-width: 70ch; }
@media (max-width: 900px) { .footer__inner { padding: 0 var(--s-5); } }
}  /* @layer ui */