/* ============================================================================
   THE ACADEMY HEADER — one copy, linked by every page that has one.

   It used to live five times over, once inside each page's <style>, and the copies
   drifted: different pill sizes, different gaps, and only some of them truncating the
   email. Adding a fifth nav item then overflowed the ones that had never been sized for
   it, and every label broke mid-button — "Main / site", "Market / Insights", "Sign / out".
   That is what duplication buys, so this is now the only copy.

   IT ALSO USED TO JUMP. Measured at 1440px, the logo started at x = 194, 224, 296, 22, 554
   and 22 across the six pages, and profile's whole header sat centred — so the brand moved
   every time a member changed page. The landing page has always had the answer: constrain
   the header to the same 1100px container the rest of the site uses, push the links right,
   and let the page content below line up under it. That is what .hdr-in does, and every
   Academy header now sits in one.

   THE THREE RULES THAT KEEP IT FROM BREAKING AGAIN:
     · the header content sits in .hdr-in — same width and gutter as the landing page
     · a pill never breaks its own text and never shrinks (white-space + flex:0 0 auto)
     · when the row genuinely runs out of room the ROW wraps, giving one tidy second line
       instead of a row of squashed two-line buttons
   ============================================================================ */

header,
.top {
  border-bottom: 1px solid var(--hair, rgba(255, 255, 255, .14));
  padding: 0;
}

/* The landing page's container, matched exactly: --wrap is 1100px in css/style.css, with a
   24px gutter. Everything in the header lines up with the page content beneath it. */
.hdr-in {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* brand left, everything else right */
  flex-wrap: wrap;
  row-gap: 10px;
  gap: 12px;
  min-height: 64px;                 /* the landing page's header height */
}

.logo,
.brand {
  display: flex;
  line-height: 1.5;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -.5px;
  font-size: 20px;
  flex: 0 0 auto;
}
.logo .o,
.brand .o { color: var(--orange, #ff5a2b); }

/* The brand, at ONE size everywhere. It used to be defined per page at 22, 19, 17 and 20px,
   which moved every pill after it and made the header a different height on each page. */
.logo .o,
.brand .o { color: var(--orange, #ff5a2b); }
.chev,
.brand-mark { width: 26px; height: 26px; flex: 0 0 auto; }
/* helper and profile wrap their mark in a tile; keep it, size it the same as the bare one. */
.brand .chev {
  width: 26px; height: 26px; border-radius: 8px; background: #0a1530;
  display: grid; place-items: center; flex: 0 0 auto;
}
.brand .chev svg { width: 16px; height: 16px; }

/* Everything that is not the brand groups to the right. */
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 8px;
  min-width: 0;
}

.back {
  flex: 0 0 auto;              /* never compete for width  */
  white-space: nowrap;         /* never break the label    */
  line-height: 1.5;            /* never INHERITED: pages set 1.5 and 1.45, which made the
                                  pill 35.5px tall here and 34.8px there, and the header
                                  65px against 64px */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #a4a097);
  padding: 7px 12px;
  border: 1px solid var(--hair, rgba(255, 255, 255, .14));
  border-radius: 99px;
  transition: color .15s, border-color .15s, background .15s;
}
.back:hover {
  color: var(--ink, #eaf0ff);
  border-color: color-mix(in srgb, var(--orange, #ff5a2b) 50%, var(--hair, rgba(255, 255, 255, .14)));
  background: rgba(255, 90, 43, .08);
}
.back svg { width: 14px; height: 14px; }

/* The page you are on, and the one field tool that is not another page of the course. */
.back.on,
.back.helper {
  color: #ffc3ae;
  border-color: rgba(255, 90, 43, .38);
  background: rgba(255, 90, 43, .10);
}

/* THE TAB BAR. The five page links sit in one quiet container, like a segmented control,
   instead of five separate outlined pills that all weighed the same. The page you are on is
   the one filled tab. Profile and the account controls stay outside it, on the right: they
   are about YOU, not about where you are. The tabs keep their 1px (transparent) border, so
   each one is exactly the size it was and the row's width budget below still holds. */
.hdr-tabs {
  display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto;
  padding: 3px; border-radius: 99px;
  background: rgba(6, 12, 30, .55); border: 1px solid var(--hair, rgba(255, 255, 255, .14));
}
.hdr-tabs .back { border-color: transparent; background: transparent; padding-top: 5px; padding-bottom: 5px; }
.hdr-tabs .back:hover { background: rgba(255, 255, 255, .07); border-color: transparent; color: var(--ink, #eaf0ff); }
.hdr-tabs .back.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(120deg, rgba(255, 90, 43, .26), rgba(124, 108, 255, .22));
  box-shadow: inset 0 0 0 1px rgba(255, 140, 100, .35);
}
.hdr-tabs .back.on svg { color: #ff8a5b; }
.back:focus-visible { outline: 2px solid var(--orange, #ff5a2b); outline-offset: 2px; }

/* THE TOOLS MENU. Market Insights, Sales Helper and Cheat Sheet live behind one "Tools" tab.
   Three labelled tabs did not fit beside Profile and a signed-in greeting showing an e-mail
   address, so the row wrapped. One tab with a menu frees ~250px and leaves room for more
   tools. auth.js opens and closes it (click, Esc, click outside, arrow keys). The tab is the
   filled one when you are ON a tool, and the menu marks which. */
.tools-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.tools-btn { font-family: inherit; cursor: pointer; }  /* family only: the shorthand would override .back's size, weight and line-height */
.tools-chev { width: 12px !important; height: 12px !important; margin-left: -2px; opacity: .7;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.tools-btn[aria-expanded="true"] .tools-chev { transform: rotate(180deg); }
.tools-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .07); color: var(--ink, #eaf0ff); }
.tools-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 80;
  min-width: 330px; padding: 6px; border-radius: 16px;
  background: #0f1834; border: 1px solid var(--hair, rgba(255, 255, 255, .14));
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .03);
  display: flex; flex-direction: column; gap: 2px;
  animation: toolsIn .2s cubic-bezier(.22, 1, .36, 1);
}
.tools-menu[hidden] { display: none; }
@keyframes toolsIn { from { opacity: 0; transform: translate(-50%, -6px); } }
@media (prefers-reduced-motion: reduce) { .tools-menu { animation: none; } .tools-chev { transition: none; } }
.tools-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px;
  color: var(--ink, #eaf0ff); line-height: 1.3; text-decoration: none;
}
.tools-item > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted, #a4a097);
  padding: 7px; box-sizing: content-box; border-radius: 9px; background: rgba(255, 255, 255, .05); }
/* each tool has its own colour, so the menu reads at a glance (the current tool keeps its highlight) */
.tools-item[href*="insights"] > svg { color: #38bdf8; background: rgba(56, 189, 248, .14); }
.tools-item[href*="helper"] > svg { color: #ffb547; background: rgba(255, 181, 71, .14); }
.tools-item[href*="cheatsheet"] > svg { color: #b4a5ff; background: rgba(169, 155, 255, .16); }
.tools-item:hover[href*="insights"] > svg { background: rgba(56, 189, 248, .22); }
.tools-item:hover[href*="helper"] > svg { background: rgba(255, 181, 71, .22); }
.tools-item:hover[href*="cheatsheet"] > svg { background: rgba(169, 155, 255, .26); }
.tools-item > img.tools-item-img { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; }   /* a module's own icon */
.tools-item b { display: block; font-size: 14px; font-weight: 700; }
.tools-item small { display: block; font-size: 12px; color: var(--muted, #a4a097); margin-top: 1px; }
.tools-item:hover, .tools-item:focus-visible { background: rgba(255, 255, 255, .06); outline: none; }
.tools-item:focus-visible { box-shadow: inset 0 0 0 2px var(--orange, #ff5a2b); }
.tools-item[aria-current="page"] { background: linear-gradient(120deg, rgba(255, 90, 43, .18), rgba(124, 108, 255, .14)); }
.tools-item[aria-current="page"] > svg { color: #ff8a5b; background: rgba(255, 90, 43, .14); }
/* on a phone the tab sits left of centre; anchor the menu to the screen, not the tab */
@media (max-width: 560px) {
  .tools-menu { position: fixed; top: 64px; left: 12px; right: 12px; transform: none; min-width: 0; }
  @keyframes toolsIn { from { opacity: 0; transform: translateY(-6px); } }
}

/* The account side. "Sign in" is the one call to action in the bar, so it is the one solid
   button; "Sign out" steps back to an outline, since nobody needs it shouted at them. */
#authSlot .ac-btn.p {
  background: linear-gradient(120deg, #ff5a2b, #ff7a45); border: 0; color: #fff; font-weight: 700;
  box-shadow: 0 8px 18px -10px rgba(255, 90, 43, .9);
  transition: filter .15s, box-shadow .15s;
}
#authSlot .ac-btn.p:hover { filter: brightness(1.08); box-shadow: 0 10px 22px -10px rgba(255, 90, 43, 1); }
#authSlot .ac-btn:not(.p) {
  background: transparent; border-color: var(--hair, rgba(255, 255, 255, .16)); color: var(--muted, #a4a097);
  transition: color .15s, border-color .15s;
}
#authSlot .ac-btn:not(.p):hover { color: var(--ink, #eaf0ff); border-color: rgba(255, 255, 255, .32); background: transparent; }

/* JUST LANDED — an icon pill at every width. A sixth LABELLED pill does not fit: measured at
   1440px the row has 1052px and already uses ~966px, and a labelled "Just Landed" needs ~128px
   more, so the header would wrap to two lines. As an icon it costs 46px. The zero-width .lz
   span gives it the same line box as the labelled pills, so it is exactly as tall as they are,
   and the ladder below hides it with the rest when the labels go.
   The NEW tag is drawn OVER the pill (absolute), never beside it, so switching it on cannot
   move anything in the row — auth.js adds .is-new for 14 days after the newest entry. */
.back.landed { position: relative; }
.back.landed .lz { margin-left: -6px; }
.back.landed.is-new::after {
  content: 'NEW';
  position: absolute;
  top: -7px;
  right: -9px;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .6px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 99px;
  color: #fff;
  background: var(--orange, #ff5a2b);
  box-shadow: 0 0 0 2px #0a1530;
  pointer-events: none;
  animation: landedPing 2.4s ease-out 3;
}
@keyframes landedPing {
  0%   { box-shadow: 0 0 0 2px #0a1530, 0 0 0 2px rgba(255, 90, 43, .55); }
  70%  { box-shadow: 0 0 0 2px #0a1530, 0 0 0 9px rgba(255, 90, 43, 0); }
  100% { box-shadow: 0 0 0 2px #0a1530, 0 0 0 9px rgba(255, 90, 43, 0); }
}
@media (prefers-reduced-motion: reduce) { .back.landed.is-new::after { animation: none; } }

/* THE EMAIL IS THE ONLY THING ALLOWED TO SHRINK. auth.js renders "Hi, <name-or-email>" and
   an address can be 50 characters. Measured at 390px with a 42-character address, an
   untruncated greeting pushed the page into horizontal scroll and wrapped "Sign out". */
#authSlot { min-width: 0; overflow: hidden; flex: 0 1 auto; }
#authSlot .ac-acct { max-width: 100%; min-width: 0; }
/* Same reason as the pill: these come from auth.js and inherited the PAGE's line-height, so
   the greeting and "Sign out" were 21px tall on the Academy and 20.3px on the cheat sheet —
   which made the account control the tallest thing in the row and the header 1px shorter
   there than everywhere else. */
#authSlot .ac-acct,
#authSlot .ac-who,
#authSlot .ac-btn { line-height: 1.5; }
#authSlot .ac-btn { white-space: nowrap; }
#authSlot .ac-who {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* ===========================  THE LADDER  ===========================
   ONE set of breakpoints, because the pages used to each pick their own: the cheat sheet
   collapsed its labels at 860px, the helper at 720px, profile at 600px, the Academy and the
   player at 820 and 560. At 820px that meant a tidy single row on one page and three stacked
   rows on another — so the header was a different HEIGHT depending which page you were on, and
   "Profile" sat at a different y. Measured budget inside the 1100px container: 1052px of room,
   and the brand + five labelled pills + the account control come to roughly 1010px. Below that
   the labels are the first thing to go, then the wordmark.

   Every step is driven by the VIEWPORT, so it fires at the same width on all six pages. */

/* Labels off, icons on. Each pill keeps its aria-label and title, so an icon-only nav is
   still readable to a screen reader and still names itself on hover. */
/* 1060, not 1040: with the Just Landed icon the labelled row no longer fit between 1041 and
   ~1050px and wrapped. Found by a 5px sweep; the eight fixed widths in check-header missed it. */
@media (max-width: 1060px) {
  .back span { display: none; }
  .back { padding: 7px 10px; }
  .back svg { width: 15px; height: 15px; }
}

@media (max-width: 640px) {
  /* the wordmark goes; the mark still links home (640: it wrapped at 621-630px) */
  .brand .txt, .logo span { display: none; }
  #authSlot .ac-who { max-width: 96px; }
}

/* The greeting goes at 520, not 430: between 431 and 510px it pushed the row onto two lines. */
@media (max-width: 520px) { #authSlot .ac-who { display: none; } }

@media (max-width: 430px) {
  /* The greeting is the last thing to go, and it has to go: measured at 390px the row needs
     407px against the 342px a phone leaves, so it broke into three ragged lines — the mark on
     one, the icons on the next, "Hi, par..." and "Sign out" on a third, 132px of header above
     every page. Without the greeting it comes to 337px and stays a single 64px row. "Sign
     out" is the control that must remain reachable; the name is not news to the person
     holding the phone.
     JUST LANDED made it six pills, and the row went back to 380px against 342px. Won back
     without hiding anything: tighter gaps, 1px less pill padding, and a compact "Sign out". */
  .hdr-in { padding: 10px 24px; gap: 8px; }
  .nav { gap: 5px; }
  .back { padding: 6px 8px; }
  #authSlot .ac-who { display: none; }
  #authSlot .ac-btn { padding: 6px 10px; font-size: 13px; }
}

@media (max-width: 380px) {
  /* an SE-sized screen: 312px of room, so the gaps close up rather than wrap (380: 375 wrapped) */
  .nav { gap: 4px; }
  .back { padding: 6px 6px; }
}

/* Below 360px (older small Androids, a 320px iPhone SE): the header was never measured here
   and wrapped to two lines. Everything tightens a little more; nothing is hidden. */
@media (max-width: 350px) {
  .hdr-in { padding: 10px 14px; gap: 6px; }
  .nav { gap: 3px; }
  .back { padding: 6px 5px; }
  .hdr-tabs { padding: 2px; }
  #authSlot .ac-btn { padding: 6px 8px; }
}