/* ============================================================
   Shared brand header for the standalone HTML pages.
   ------------------------------------------------------------
   Mirrors the React <AppHeader> exactly (white band, Wipro logo at
   the extreme left, product + lane, page title, Wipro accent rule)
   so a viewer moving between the app and a static page sees one
   continuous header. Kept in one file so there is a single place to
   change it for every static page.

   Usage in a page's <head>:
     <link rel="stylesheet" href="../brand-header.css">
   and as the first element in <body>:
     <header class="wa-header">
       <div class="wa-header-inner">
         <a class="wa-brand" href="../../">
           <img class="wa-logo" src="../wipro-logo.png" alt="Wipro">
           <span class="wa-brand-rule"></span>
           <span class="wa-brand-text">
             <span class="wa-brand-product">CTO Lane</span>
           </span>
         </a>
         <span class="wa-title-divider"></span>
         <div class="wa-title-block"><h1 class="wa-title">…</h1></div>
         <a class="wa-btn" href="../../">&larr; Architecture</a>
       </div>
       <div class="wa-accent"></div>
     </header>
   ============================================================ */

:root {
  --wa-hdr-h: 62px;
  --wa-logo-h: 26px;
  --wa-hdr-line: #e4e8f4;
  --wa-purple-ink: #341A55;   /* --wipro-purple */
  --wa-hdr-ink: #0b1230;
  --wa-hdr-mute: #6b7590;
  --wa-hdr-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wa-hdr-display: 'Sora', 'Inter', system-ui, sans-serif;
}

.wa-header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--wa-hdr-h);
  background: #fff;
  border-bottom: 1px solid var(--wa-hdr-line);
  box-shadow: 0 1px 0 rgba(16, 26, 74, 0.03), 0 6px 20px rgba(16, 26, 74, 0.05);
}

.wa-header-inner {
  height: 100%;
  max-width: none;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  padding: 0 clamp(14px, 2.2vw, 34px);
  min-width: 0;
}

.wa-header .wa-brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1vw, 13px);
  flex: 0 0 auto;
  text-decoration: none;
  transition: opacity 0.18s ease;
}
.wa-header .wa-brand:hover { opacity: 0.82; }

.wa-header .wa-logo {
  height: var(--wa-logo-h);
  width: auto;
  display: block;
  object-fit: contain;
}

.wa-header .wa-brand-rule {
  width: 1px;
  height: calc(var(--wa-logo-h) + 6px);
  background: var(--wa-hdr-line);
  flex: 0 0 auto;
}

.wa-header .wa-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}
.wa-header .wa-brand-product {
  font-family: var(--wa-hdr-display);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.15vw, 1.1rem);
  color: var(--wa-hdr-ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wa-header .wa-brand-lane {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wa-purple-ink);
  white-space: nowrap;
  margin-top: 2px;
}

.wa-header .wa-title-divider {
  width: 1px;
  height: 60%;
  background: var(--wa-hdr-line);
  flex: 0 0 auto;
}

.wa-header .wa-title-block { min-width: 0; flex: 1 1 auto; }

.wa-header .wa-title {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--wa-hdr-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(0.95rem, 1.5vw, 1.32rem);
  color: var(--wa-hdr-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-header .wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid #dfe4f4;
  background: #fff;
  color: var(--wa-hdr-ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--wa-hdr-font);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(16, 26, 74, 0.06);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.wa-header .wa-btn:hover {
  transform: translateY(-1px);
  background: #f3f5fc;
  box-shadow: 0 10px 30px rgba(16, 26, 74, 0.1);
}

/* Signed-in user widget (initials + Sign out), injected by auth-header.js
   into the far right of .wa-header-inner when the site runs behind
   App Service Authentication (Easy Auth). */
.wa-header .wa-account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.wa-header .wa-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wa-purple-ink), #16246b);
  color: #fff;
  font-family: var(--wa-hdr-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
  user-select: none;
}

/* The Wipro accent rule — official Wipro accent palette, in the order
   of the logo's dot arc. Must match .wa-accent in src/styles/index.css. */
.wa-header .wa-accent {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: linear-gradient(
    90deg,
    #95B44E 0%,    /* lime      */
    #01A98B 17%,   /* teal      */
    #3498B3 34%,   /* turquoise */
    #746FA7 50%,   /* lavender  */
    #8E38B0 67%,   /* violet    */
    #BE1D69 84%,   /* pink      */
    #F57F2A 100%   /* orange    */
  );
}

/* ---------- Variant for the pre-bundled pages ----------
   Those pages replace <html> wholesale at runtime, so brand-header.js
   re-injects the header afterwards. Their inner layout is unknown
   (some centre the body with flex), so pin the header rather than
   relying on it sitting in normal flow. */
.wa-header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
body.wa-has-fixed-header {
  padding-top: var(--wa-hdr-h) !important;
}

/* These pages carry their own sticky section nav — park it directly
   beneath the brand band instead of letting the two collide at top:0. */
nav.topnav { top: var(--wa-hdr-h); z-index: 400; }

@media (max-width: 900px) {
  :root { --wa-hdr-h: 56px; --wa-logo-h: 23px; }
  .wa-header .wa-brand-text,
  .wa-header .wa-brand-rule { display: none; }
}
@media (max-width: 620px) {
  :root { --wa-hdr-h: 52px; --wa-logo-h: 21px; }
  .wa-header .wa-title-divider { display: none; }
}

@media print {
  .wa-header { position: static; box-shadow: none; }
}

/* ---------- Embedded in the React shell ----------
   When a page is opened inside the app (kind:'embed' → ?embed=1), the
   app already provides the brand band, back button and page title — so
   the page's own copy must not render a second one. The class is set by
   brand-header.js when it sees the flag; EmbeddedPage.jsx also injects
   an equivalent rule, so the header never flashes before this applies. */
html.wa-embedded #wa-brand-header,
html.wa-embedded .wa-header { display: none !important; }
html.wa-embedded body.wa-has-fixed-header { padding-top: 0 !important; }
html.wa-embedded nav.topnav { top: 0 !important; }

/* ============================================================
   RESPONSIVE HARDENING for the standalone document pages
   ------------------------------------------------------------
   These pages (operating model, value cockpits, tokenomics) were
   authored for desktop and carry only a single 980px breakpoint.
   The rules below are additive and defensive: they stop wide tables,
   formula boxes and section navs from overflowing on tablets and
   phones, without touching the desktop layout.

   Loaded by every one of those pages, so this is the single place
   to change their small-screen behaviour.
   ============================================================ */

/* Never let a long word or formula force a horizontal scrollbar. */
@media (max-width: 1024px) {
  .wrap, .page { max-width: 100%; }
}

@media (max-width: 900px) {
  /* Wide data tables scroll inside their own box rather than
     stretching the page. Wrapped in a scroll container so the
     header row stays aligned with the body. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* The sticky section nav wraps instead of clipping its tabs. */
  nav.topnav { position: static !important; }
  nav.topnav .topnav-inner,
  nav.topnav > div {
    flex-wrap: wrap !important;
    height: auto !important;
    row-gap: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Formula boxes: allow the expression to wrap rather than overflow. */
  .formula {
    font-size: 16px !important;
    padding: 13px 14px !important;
    overflow-wrap: anywhere;
  }
  .formula .fbit { white-space: normal !important; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.22rem !important; }
  h3 { font-size: 1.05rem !important; }
  .formula { font-size: 14px !important; }
  .card, .kv { padding: 14px !important; }
  /* Two-up and larger grids collapse to a single column. */
  .grid, .g2, .g2w, .g3, .g4 { grid-template-columns: 1fr !important; }
}

/* Touch: no hover lifts left stuck after a tap. */
@media (hover: none) {
  .card:hover, .kv:hover { transform: none !important; }
}

/* Very large monitors: let the measure grow a little rather than
   leaving the content marooned in the middle of a 4K panel. */
@media (min-width: 1800px) {
  .wrap, .page { max-width: 1440px; }
}