/* rushcraft.co — the navigation bar, the side drawer and the footer.
   Every page on the site renders this chrome, and all three implementations read
   these rules: the hand-written pages and /blog/ link this file alongside site.css,
   and /lite-coach/ imports it into a cascade layer of its own.

   That last consumer is why there is not one global selector in here. The app's
   utilities are layered; an unlayered element rule such as `p { margin: 1em 0 0 }`
   outranks every one of them regardless of specificity, and importing a stylesheet
   carrying those would rearrange the whole app rather than just its nav. Only class
   selectors and their descendants belong in this file. The footer shell is
   `.site-foot` for the same reason: the app renders a <footer> of its own whose
   contents are deliberately different. */

/* ── Navigation bar ───────────────────────────── */
.nav {
  /* The stacking numbers are set by the busiest consumer. Nothing on a hand-written
     page competes for a layer; the app has a header at 40 under this row, a chat sheet
     at 54, and dialogs at 70 and above that must cover the drawer. */
  position: sticky; top: 0; z-index: 50;
  /* Stated, not inherited. The hand-written pages set these on body and the chrome used
     to ride along; the app sets none of them, and inheriting there means Tailwind's
     default sans — visibly different glyphs for Chinese. */
  font-family: var(--font-body); line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* gap 16, not 20: the row is nine entries long once the language menu is on the
   end, and at 20 the Chinese one ran 9px past its own 800px cap while the
   English one had 3px to spare — no margin either way. Four pixels per gap buys
   27px and 35px back, and every entry keeps its size.
   SiteNav.jsx restates this as sm:gap-4. */
.nav-inner {
  max-width: 800px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 16px;
  height: 56px;
}
/* Size and decoration come from the `.nav a` rule below — it outranks this
   one on specificity, so setting them here has no effect. */
.nav-logo {
  font-family: var(--font-mono); font-weight: 600;
  letter-spacing: 0.02em;
  margin-right: auto;
}
/* One size for the whole row, keyed on being in the row rather than on being a link:
   the current page wears the same pill as a link to it but is a <span>, and a rule
   written against `a` leaves it two pixels larger than everything beside it.
   nowrap so a row that runs short overflows instead of quietly folding a two-character
   Chinese label onto two lines — an overflow is measurable, a wrap is not, and the wrap
   is what shipped when the account control arrived. */
.nav-inner > * { font-size: 0.875rem; white-space: nowrap; }
.nav a { text-decoration: none; color: var(--text-dim); }
.nav a:hover { color: var(--text); }
.nav a.nav-logo { color: var(--text); }
/* LINE Coach entry — outline pill on desktop, filled primary CTA on mobile.
   Shown at every width (unlike the old download button): desktop visitors get
   download as a text link already, but the desktop app is Windows-only, so on a
   phone LINE is the only usable entry point — it takes the mobile nav's one slot. */
.nav-line {
  color: var(--line-green) !important;
  border: 1px solid color-mix(in srgb, var(--line-green) 60%, transparent);
  border-radius: 6px; padding: 4px 14px;
  white-space: nowrap;
}
.nav-line:hover { background: var(--line-green); color: #fff !important; border-color: var(--line-green); }
/* Lite Coach entry — same pill shape in the site accent. Kept at every width
   for the same reason as the LINE one: the desktop app is Windows-only, so on
   a phone the web app and LINE are the only ways in. */
.nav-app {
  color: var(--accent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 6px; padding: 4px 14px;
  white-space: nowrap;
}
/* Account entry. The signed-out link is what the HTML ships, so signing in works
   with JavaScript off; assets/js/account.js replaces it with .nav-account once
   the server confirms a session. Only the avatar goes in the row — a name spends
   more width than the row has, and the menu shows it anyway. */
.nav-signin {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px;
}
.nav-signin:hover { border-color: var(--text-dim); color: var(--text) !important; }
/* The two implementations put different elements in this box: a link on the pages that
   have to work without scripting, a button in the app, where there is a provider to
   choose first. `.nav a` reaches only the first of those, so the type and colour every
   entry in the row shares are set outright here as well. */
.nav-signin, .nav-account-btn {
  font-family: inherit; font-size: 0.875rem; line-height: 1.75;
  color: var(--text-dim); background: none;
}
.nav-account { position: relative; display: flex; align-items: center; }
/* The account control carries the name where only a screen reader reaches it. The row
   has no width to print it — it is in the menu one click away — but a control whose
   only content is a picture of someone announces nothing without this. */
.nav-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.nav-account-btn {
  display: flex; align-items: center; padding: 2px; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 999px;
}
.nav-account-btn:hover { border-color: var(--text-dim); }
.nav-avatar {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 999px; object-fit: cover;
}
.nav-initial {
  background: var(--line); color: var(--text);
  font-size: 0.6875rem; font-weight: 600;
}
.nav-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 176px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.nav-menu-head {
  padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.nav-menu-head b { display: block; font-size: 0.8125rem; color: var(--text); }
.nav-menu-head span { font-size: 0.6875rem; color: var(--text-dim); }
.nav-menu-item {
  display: block; width: 100%; padding: 6px 10px; cursor: pointer;
  background: none; border: 0; border-radius: 6px;
  font: inherit; font-size: 0.8125rem; color: var(--text-dim); text-align: left;
}
.nav-menu-item:hover { background: var(--line); color: var(--text); }
/* 639.98px, not 640px: a max-width: 640px query and a min-width: 640px one are
   both inclusive at exactly 640, and anything written against the pair disagrees
   with itself in that one pixel column. Ending just below hands 640 to the
   desktop rules everywhere. */
@media (max-width: 639.98px) {
  /* The row keeps the logo, the two pills and the account entry. Download goes,
     and nothing is lost by it: every text entry has a home in the drawer. */
  .nav-link { display: none; }
  .nav-line { background: var(--line-green); color: #fff !important; border-color: var(--line-green); }
  .nav-app { background: var(--accent); color: #1A1400 !important; border-color: var(--accent); }
  .nav-inner { gap: 12px; padding: 0 16px; }
  .nav-app, .nav-line { padding: 4px 10px; }  /* Two pills have to fit next to the logo */
  /* Icon only, same as SiteNav.jsx does at this width — the label is what the
     row can least afford once the two pills have taken their space. */
  .nav-signin-label { display: none; }
  .nav-signin { padding: 4px 8px; }
}
/* Small phones: the row needs more than 320px gives, and flex pays the shortfall
   by squeezing entries until their text disappears — a failure that measuring
   horizontal overflow does not catch. Spacing absorbs it instead; type size stays
   put, since `.nav a` sets one size for every entry. */
@media (max-width: 380px) {
  .nav-inner { gap: 6px; padding: 0 8px; }
  .nav-app, .nav-line { padding: 4px 6px; }
  /* Even after that the row is full to the pixel, and the two pills are the only
     way to reach either coach. The account entry is the one thing that can go,
     because the drawer takes it over at exactly this width. */
  .nav-signin, .nav-account { display: none; }
}

/* ── Side drawer ──────────────────────────────────
   The state is a checkbox rather than a script: the hand-written pages have a hard
   budget for JavaScript and the drawer has to open without any, the same reason the
   language menu is a <details>. The scrim is a <label> for that checkbox, which is
   what closes the drawer on a click outside it. */
.nav-drawer-state { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-left: -4px;
  border-radius: 6px; color: var(--text-dim); cursor: pointer; flex: none;
}
.nav-burger:hover { color: var(--text); background: var(--line); }
.nav-scrim {
  position: fixed; inset: 0; z-index: 64; background: rgba(0, 0, 0, 0.55);
  opacity: 0; pointer-events: none; transition: opacity 180ms ease-out;
}
.nav-drawer {
  /* Outside .nav in the markup, so it needs the type stated too. */
  font-family: var(--font-body); line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 65;
  width: min(280px, 82vw); padding: 20px 20px 32px;
  background: var(--surface); border-right: 1px solid var(--line);
  transform: translateX(-100%); transition: transform 200ms ease-out;
  overflow-y: auto; overscroll-behavior: contain;
}
.nav-drawer-state:checked ~ .nav-scrim { opacity: 1; pointer-events: auto; }
.nav-drawer-state:checked ~ .nav-drawer { transform: none; }
.nav-drawer-open .nav-scrim { opacity: 1; pointer-events: auto; }
.nav-drawer-open .nav-drawer { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-scrim, .nav-drawer { transition: none; }
}
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; height: 28px; }
.nav-drawer-logo {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.02em;
  color: var(--text); text-decoration: none; font-size: 0.9375rem;
}
.nav-drawer-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-right: -4px;
  border-radius: 6px; color: var(--text-dim); cursor: pointer;
}
.nav-drawer-close:hover { color: var(--text); background: var(--line); }
.nav-drawer-group { margin-top: 28px; }
.nav-drawer-label {
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); opacity: 0.7;
}
.nav-drawer .nav-drawer-item {
  display: block; margin-top: 2px; padding: 9px 10px; margin-inline: -10px;
  border-radius: 6px; color: var(--text); text-decoration: none; font-size: 0.9375rem;
  width: calc(100% + 20px); text-align: left; background: none; border: 0;
  font-family: inherit; cursor: pointer;
}
.nav-drawer .nav-drawer-item:hover { background: var(--line); }
.nav-drawer .nav-drawer-item[aria-current] { color: var(--accent); }
.nav-drawer-lang { display: flex; gap: 8px; margin-top: 8px; }
.nav-drawer .nav-drawer-lang a, .nav-drawer .nav-drawer-lang span {
  flex: 1; text-align: center; padding: 7px 0; border-radius: 6px;
  border: 1px solid var(--line); font-size: 0.8125rem;
  color: var(--text-dim); text-decoration: none;
}
.nav-drawer .nav-drawer-lang a:hover { border-color: var(--text-dim); color: var(--text); background: none; }
.nav-drawer .nav-drawer-lang span[aria-current] { color: var(--text); border-color: var(--text-dim); }
/* The signed-in block. In the row the account is a button that opens a menu; here the
   drawer is already the menu, so the same information sits open on the surface. */
.nav-drawer-who { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.nav-drawer-who .nav-avatar { width: 32px; height: 32px; font-size: 0.8125rem; }
.nav-drawer-who-text { min-width: 0; }
.nav-drawer-who-text b { display: block; font-size: 0.875rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-drawer-who-text span { font-size: 0.6875rem; color: var(--text-dim); }
/* The row gives up the account entry below 380px, where it has no width left for it.
   The drawer picks it up there and only there, so it is never offered twice. */
.nav-drawer-account { display: none; }
@media (max-width: 380px) {
  .nav-drawer-account { display: block; }
}
/* The burger costs 28px plus a gap; the row buys it back by trimming the gaps and the
   pills rather than by dropping an entry. Below 380 the rule above already trims
   harder, so this band stops there. */
@media (min-width: 380.02px) and (max-width: 639.98px) {
  .nav-inner { gap: 10px; }
  .nav-app, .nav-line { padding: 4px 8px; }
}

/* ── Footer ───────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--line);
  margin-top: clamp(72px, 10vw, 128px);
  padding: 40px 0 56px;
}
.foot-note { color: var(--text-dim); font-size: 0.8125rem; }
.foot-note a { color: var(--text-dim); }
.foot-links { margin-top: 16px; font-size: 0.875rem; color: var(--text-dim); }
.foot-links a { color: var(--text-dim); text-decoration: none; }
.foot-links a:hover { color: var(--text); }
.foot-sep { margin: 0 8px; color: var(--line); }
/* Language switch. The drawer carries one too; this one is on the page itself at
   every width, for anyone who reaches the end of it rather than opening a menu. */
.foot-lang { margin-top: 12px; font-size: 0.8125rem; }
.foot-lang a { color: var(--text-dim); }