/* ============================================================================
   Blinta — shared site chrome (top nav)
   ----------------------------------------------------------------------------
   The ONE definition of the header, nav, buttons and mobile panel. Loaded by
   the landing page (with home.css) and by every app page (with ui.css), so the
   two cannot drift apart.

   Relies on the design tokens declared in home.css / ui.css (--red, --paper,
   --notch-sm, --display, --mono, --ease, --shell). Custom properties resolve
   at use time, so load order does not matter — but one of those sheets must
   be present.
   ========================================================================= */
/* ============================================================================
   Buttons
   ========================================================================= */

.bx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.5rem;
  clip-path: var(--notch-sm);
  background: var(--red);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  /* Own stacking context so the sweep can sit at z-index -1: above the button
     background, below the label. home.js swaps some button labels via
     textContent, so the label must stay on top without a wrapper element. */
  isolation: isolate;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.bx-btn > span { position: relative; }
.bx-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.34) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.75s var(--ease);
}
.bx-btn:hover { background: var(--red-hot); transform: translateY(-2px); }
.bx-btn:hover::after { transform: translateX(130%); }
.bx-btn:active { transform: translateY(0); }

.bx-btn-lg { padding: 1rem 2rem; font-size: 0.8rem; }
.bx-btn-sm { padding: 0.55rem 1rem; font-size: 0.68rem; }

.bx-btn-ghost {
  background: transparent;
  color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-mid);
}
.bx-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--line-hot);
}

.bx-btn-gold {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold) 55%, #a8873f);
  color: #17130a;
}
.bx-btn-gold:hover {
  background: linear-gradient(135deg, #fff0cf, var(--gold-lt) 55%, var(--gold));
}

.bx-link {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
  background: none;
  border: 0;
  padding: 0.4rem 0.2rem;
  cursor: pointer;
  transition: color 0.2s;
  font-weight: 500;
}
.bx-link:hover { color: var(--paper); }

/* ============================================================================
   Header
   ========================================================================= */

.bx-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above the page, below the dialog layer (300+ in styles.css). A fixed header
     that outranks a modal covers its toolbar and swallows the taps aimed at the
     Close button. */
  z-index: 200;
  height: 68px;
  transition: background 0.35s, border-color 0.35s, height 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.bx-header.is-stuck {
  height: 58px;
  background: rgba(6, 6, 8, 0.82);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--line);
}
/* Solid strip while the mobile panel is open, so long menus scrolling beneath
   the header don't run into the brand and close button. */
.bx-header:has(#home-nav-toggle[aria-expanded="true"]) {
  background: rgba(5, 5, 7, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.bx-header-in {
  max-width: var(--shell);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

/* Brand mark. styles.css isn't loaded on this page, so the .blinta-brand rules
   it normally provides are restated here — including the blinta.png glyph that
   the site renders through ::before. */
.blinta-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
}
.blinta-brand::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  background: url("/images/blinta.png") center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(230, 28, 36, 0.2));
  transition: transform 0.4s var(--ease), filter 0.4s ease;
}
.blinta-brand:hover::before {
  transform: scale(1.08);
  filter: drop-shadow(0 0 14px rgba(230, 28, 36, 0.45));
}

.bx-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
}
.bx-nav a {
  position: relative;
  padding: 0.45rem 0.1rem;
  margin-right: 1.15rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--paper-mute);
  transition: color 0.2s;
}
.bx-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.bx-nav a:hover { color: var(--paper); }
.bx-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.bx-header-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-left: auto;
  flex-shrink: 0;
}

.bx-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
  margin-left: auto;
}
.bx-burger span {
  display: block;
  height: 1.5px;
  background: var(--paper);
  transition: transform 0.35s var(--ease), opacity 0.2s;
}
.bx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.bx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bx-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.bx-mobile-nav {
  position: fixed;
  inset: 0;
  /* Below .bx-header (200) so the brand and close button stay on top. */
  z-index: 190;
  background: rgba(5, 5, 7, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 6.5rem 6vw 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
}
.bx-mobile-nav a {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--paper);
}
/* Diamond marker in place of the old 01–07 numerals — same mark the ticker
   uses as a separator, so the menu reads as part of the same system. */
.bx-mobile-nav a::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--red);
  transform: rotate(45deg);
  transition: transform 0.35s var(--ease), background 0.25s ease;
}
.bx-mobile-nav a:hover::before { transform: rotate(45deg) scale(1.4); }
.bx-mobile-nav a.is-gold { color: var(--gold); }
.bx-mobile-nav a.is-gold::before { background: var(--gold); }

/* This component must not depend on the landing page's .bx body scope —
   app pages have no <body class="bx">, so they never got .bx a{text-decoration:none}
   and every chrome link rendered underlined. */
.bx-header a,
.bx-mobile-nav a { text-decoration: none; }

/* Account actions are not navigation, so they sit apart from the link list
   rather than reading as two more destinations. */
.bx-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-mid);
}
.bx-mobile-nav .bx-mobile-actions a,
.bx-mobile-nav .bx-mobile-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.8rem 1rem;
  border: 0;
  border-bottom: 0;
  clip-path: var(--notch-sm);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--line-mid);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
}
.bx-mobile-nav .bx-mobile-actions a::before,
.bx-mobile-nav .bx-mobile-actions button::before { content: none; }
.bx-mobile-nav .bx-mobile-actions a:hover,
.bx-mobile-nav .bx-mobile-actions button:hover {
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px var(--line-hot);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .bx-nav { display: none; }
  .bx-header-actions { display: none; }
  .bx-burger { display: flex; }
}