/* ============================================================================
   LCB — the hub bezel
   ----------------------------------------------------------------------------
   Load this on EVERY page, after css/tokens.css.

   The bezel is the one element that has to read identically everywhere. A user
   who lands on the map, then follows a link to the dashboard, should recognise
   the same instrument — not four pages that happen to share a palette. The ink
   plate with its Cream Yellow accent rule is that recognition.

   Split out of wada.css, which used to carry it. Those rules were written
   against map.html alone, and loading them on the other three pages would have
   stranded a control: data.html carries a .bio-trigger inside .hub, which on a
   paper header is invisible once it goes transparent. Shared rules now have to
   earn their place against every hub, not just one.

   Only elements common to all five hubs are styled here. Page-specific
   furniture (.hub-stats, .radarctl, the time controls) stays with its page.
   ========================================================================== */

.hub {
  background: var(--ink) !important;
  border-bottom: 0 !important;
  padding: 10px 18px !important;
  color: var(--paper);
  box-shadow: inset 0 -3px 0 var(--plate);
}
.hub .hub-code      { color: var(--wada-hi) !important; font-size: 9.5px !important; letter-spacing: .2em !important; }
.hub .hub-title     { color: var(--paper) !important; }
.hub .hub-subtitle  { color: #b8b3a6 !important; }
.hub .hub-sub       { color: #b8b3a6 !important; }
.hub .hub-meta      { color: #a9a496 !important; }
.hub .hub-meta-line { color: inherit !important; }

/* The LCB identity disc becomes the one solid warm block in the bezel. */
.hub .disc--ink {
  background: var(--wada-hi) !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
}

/* --- controls that sit on the bezel, whichever page owns them -------------- */
.hub .nav-links a,
.hub .hub-nav a {
  color: var(--paper) !important;
  background: transparent !important;
  border: 1px solid #3a3833 !important;
  border-radius: 0 !important;
  min-height: 26px;
  display: inline-flex; align-items: center;
  text-decoration: none;
}
/* The nav GROUP is not a control. It used to carry a border of its own, which
   drew a frame around four already-framed links — and because the bio button
   (taller) sat inside the same nav, the frame was stretched 52px tall around
   27px links, leaving dead space above and below them. The group is now bare;
   the links keep their own frames. */
.hub .hub-nav {
  color: var(--paper) !important;
  display: inline-flex; align-items: center; gap: 6px;
}
.hub .nav-links a:hover,
.hub .hub-nav a:hover { background: #26251f !important; border-color: #6f6b60 !important; }
.hub .nav-links a[aria-current="page"],
.hub .hub-nav .is-here,
.hub .hub-nav a.is-here {
  background: var(--wada-hi) !important;
  border-color: var(--wada-hi) !important;
  color: var(--ink) !important;
}

/* data.html carries this one; it must be legible on ink, not just on paper. */
.hub .bio-trigger {
  background: transparent !important;
  border-color: #4a473f !important;
  border-radius: 0 !important;
  color: var(--paper) !important;
  min-height: 28px;
  display: inline-flex; align-items: center;
}
.hub .bio-trigger:hover { border-color: var(--paper) !important; background: #26251f !important; }
.hub .bio-trigger strong { color: var(--paper) !important; }
.hub .bio-trigger span   { color: #a9a496 !important; }
.hub .bio-trigger img    { border-radius: 0 !important; }

/* ============================================================================
   Mobile bezel

   At 375px the other three hubs wrapped to 150-190px — the eyebrow broke over
   three lines, the Thai title over four, and the user saw almost nothing but
   header. Same treatment as the map: keep identity and status, drop
   provenance. The eyebrow and publication stamp are for provenance, not for
   operating; on a phone the title and the answer are what matter.
   ========================================================================== */

@media (max-width: 880px) {
  .hub {
    flex-wrap: wrap !important;
    align-items: center;
    gap: 6px 10px !important;
    padding: 8px 12px !important;
  }
  .hub .hub-code    { display: none !important; }
  .hub .hub-subtitle{ display: none !important; }
  .hub .hub-sub     { display: none !important; }
  .hub .hub-meta    { display: none !important; }

  .hub-title {
    font-size: 13.5px !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hub .disc--lg, .hub .disc--md { width: 32px; height: 32px; font-size: 12px; }

  .hub .nav-links a,
  .hub .hub-nav a,
  .hub .hub-nav { font-size: 10px !important; min-height: 30px; padding: 4px 8px !important; }
  .hub .bio-trigger { padding: 2px 7px 2px 2px !important; min-height: 30px; }
  .hub .bio-trigger strong { font-size: 10px !important; }
  .hub .bio-trigger span   { display: none !important; }
  .hub .bio-trigger img    { width: 22px; height: 22px; }
}

/* Larger hit areas on touch, never smaller. */
@media (max-width: 880px) {
  .hub .nav-links a,
  .hub .hub-nav a,
  .hub .bio-trigger { min-height: 34px !important; }
}