/* Shell: masthead nav (desktop) + bottom tab bar (phone) + main + footer. */

/* app-switcher (byte-identical shared script — style only from outside).
   Lives in the FOOTER now (app.js moves the node there), so it is in normal
   flow instead of pinned top-right — and it no longer hides on phone, where
   a footer link is reachable in a way a fixed top-right overlay was not. */
[data-app-switcher] {
  font-family: var(--font-mono);
  letter-spacing: .06em;
}
[data-app-switcher] a {
  color: var(--ink-3);
  text-decoration: none;
  margin-right: 14px;
}
[data-app-switcher] a:first-child { margin-left: 0; }
[data-app-switcher] a:hover { color: var(--ink); }

.masthead {
  padding: 14px 32px 0;
  border-bottom: 1px solid var(--hairline-strong);
}

.masthead-row {
  display: flex;
  align-items: flex-end;
  gap: 26px;
  /* The meter strip is four quota readouts and grows with the type scale;
     past a bump it no longer shares a line with brand + nav. Wrap to a second
     row rather than pushing the page into horizontal scroll. */
  flex-wrap: wrap;
}

/* Brand + crumb are one fixed-width column so the nav sits in the same place
   on every view. Without the reserved width, "FLEET › SERVICES" and
   "WEB › SITES" push the nav to different x positions and the header appears
   to jump as you navigate. */
.masthead-brandblock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  min-width: calc(132px * var(--fs-scale));
}

.masthead-brand {
  font-size: var(--fs-3xl);
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}

.masthead-crumb {
  color: var(--ink-3);
  margin-top: 4px;
  white-space: nowrap;
  /* Reserve the line even when empty (Home) so the row height is constant. */
  min-height: calc(var(--fs-tiny) * 1.3);
}

.nav-groups { display: flex; gap: 26px; }

.nav-group {
  background: none;
  border: none;
  padding: 0 0 10px;
  cursor: pointer;
  text-align: left;
  border-bottom: 2px solid transparent;
  /* A <button> centers its content box vertically by default. Groups WITHOUT
     a live sublabel (Home, Life) therefore centred their lone word against
     the full row height, while Web/AI/Fleet centred the word+sublabel PAIR —
     so the words landed on different lines. Pin the column to the top so
     every group word shares one baseline regardless of whether it currently
     has a sublabel to show. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.nav-group-word {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-2);
}

.nav-group-sub { display: block; font-size: var(--fs-micro); margin-top: 1px; }

.nav-group--active { border-bottom-color: var(--accent); }
.nav-group--active .nav-group-word { color: var(--accent); font-weight: 700; }

.masthead-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 10px;
}

.meter-wrap { display: flex; align-items: flex-start; gap: 12px; }
.meter-strip { display: flex; gap: calc(11px * var(--fs-scale)); flex-wrap: wrap; }

/* Desktop: dials are always out, no toggle. */
.meter-toggle { display: none; }

/* Narrower desktops: the wall clock yields to the dials. Keeping both wraps
   the meters onto a second row and doubles the header height — and the date
   is decoration while the dials are the data (they carry their own reset
   times anyway). The OS has a clock; this dashboard does not need to. */
@media (max-width: 1530px) {
  .masthead-clock { display: none; }
}

.copy-buttons { display: flex; gap: 6px; }
.copy-buttons .btn { padding: 3px 9px; font-size: var(--fs-xs); }

.subnav {
  display: flex;
  gap: 18px;
  font-size: var(--fs-tiny);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 0;
}

.subnav-link { color: var(--ink-4); text-decoration: none; cursor: pointer; }
.subnav-link:hover { color: var(--ink-2); }
.subnav-link--active { color: var(--accent); }

.main {
  padding: 18px 32px 32px;
  max-width: 1560px;
  margin: 0 auto;
  /* Dense mono tables can exceed a phone at a large type scale. Scroll them
     inside the content area rather than letting the whole PAGE scroll
     sideways (which drags the masthead off and feels broken) — and never
     `hidden`, which would silently amputate columns. Honest overflow. */
  overflow-x: auto;
}

.shell-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 32px 18px;
  border-top: 1px solid var(--hairline);
  /* Bumped a step and a half from --fs-tiny: the footer is now the only home
     of the cross-app links, so it has to be reachable, not decorative. */
  font-size: var(--fs-lg);
  color: var(--ink-4);
}
.shell-footer a { color: var(--ink-3); text-decoration: none; }
.shell-footer a:hover { color: var(--ink); }
.footer-apps { display: inline-flex; flex-wrap: wrap; align-items: baseline; }

.tabbar { display: none; }

@media (max-width: 900px) {
  .masthead { padding: 12px 16px 0; }
  /* The empty crumb line is reserved on desktop so the nav does not shift
     between views. On a phone .nav-groups is hidden and the tabbar is the
     nav, so on Home the reservation is 19px of nothing above the verdict. */
  .masthead-crumb:empty { min-height: 0; display: none; }
  .masthead-row { gap: 20px; flex-wrap: wrap; }
  .nav-groups { display: none; }
  /* Tighter top rhythm: the masthead already carries a bottom pad and the
     subnav its own, so 14px here read as a gap under the tabs. */
  .main { padding: 6px 16px 24px; }
  .subnav { padding: 5px 0; gap: 14px; }

  /* Phone: the dials fold behind a USAGE button. Three clock faces are worth
     a tap but not a permanent third of the header — and the button still
     carries the hot flag, so the one urgent bit survives the collapse. */
  /* One right-aligned control row: USAGE, copy, verbose. These three used to
     stack across two centred lines and spend ~40px of vertical on every
     view before any content. */
  .masthead-right {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
  }
  .meter-wrap { flex-direction: row; align-items: center; gap: 8px; width: auto; }
  /* Full width only while the dials are actually OUT — otherwise the strip is
     squeezed beside the buttons and the dials wrap into a vertical stack.
     Claiming it unconditionally was what broke the row in the first place. */
  .meter-wrap--open {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    order: 1;          /* opened dials drop BELOW the button row */
  }

  .meter-toggle {
    display: inline-block;
    background: none;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: var(--fs-tiny);
    letter-spacing: .1em;
    color: var(--ink-3);
    cursor: pointer;
  }
  .meter-toggle--hot { color: var(--warn); border-color: rgba(250, 178, 25, .45); }

  .meter-strip { display: none; }
  .meter-strip--open {
    display: flex;
    gap: 22px;
    padding: 4px 2px 2px;
  }

  .tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(19, 16, 23, .92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--hairline-strong);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    z-index: 50;
  }
  .tabbar-item {
    flex: 1;
    background: none;
    border: none;
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--ink-3);
    padding: 8px 0;
    cursor: pointer;
  }
  .tabbar-item--active { color: var(--accent); }
  .shell-footer { margin-bottom: 52px; }
}