/* The site header: sahi.com's floating pill and menu, one header for every page (owner, 27 Oct 2026: "we will keep
   this header and merge everything into this") — the /sahi/ pages, /tools/, the guides, FAQ, glossary, analysis and
   Morning Bytes. The app draws the same header itself (src/components/chrome/SiteHeader.tsx).

   Markup comes from scripts/sahi-nav.mjs, behaviour from public/sahi-nav.js. Self-contained: every rule sits under
   .sahi-nav, every colour is an --sn-* token set here from the SAHI Stride palette, and it reads only
   :root[data-theme], never the page's own tokens, so it cannot collide with guide.css (which styles bare `header`),
   tools.css or sahi.css. Open FREE Demat is sahi.com's magenta (#C80E7D, white text) in both themes, and Kyro its
   magenta-tinted pill, as on www.sahi.com (owner, 27 Oct 2026); Capital Purple marks the other interactive moments. */

.sahi-nav {
  --sn-bar: #FFFFFF; --sn-bar-line: #E6E6E6; --sn-menu: #FFFFFF; --sn-panel: #FFFFFF;
  --sn-ink: #0F0F0F; --sn-ink-2: #535353; --sn-ink-3: #6E6E6E;
  --sn-hover: #F9F6F1; --sn-line: #EDE5D8;
  --sn-solid: #C80E7D; --sn-solid-hover: #A50F66; --sn-on-solid: #FFFFFF;
  --sn-kyro-bg: color-mix(in srgb, #C80E7D 6%, transparent); --sn-kyro-hover: color-mix(in srgb, #C80E7D 12%, transparent); --sn-kyro-line: color-mix(in srgb, #C80E7D 20%, transparent); --sn-kyro-ink: #66033C; --sn-kyro-spark: #C80E7D;
  --sn-accent: #66033C; --sn-accent-ink: #66033C; --sn-wash: #F9F6F1;
  --sn-scrim: color-mix(in srgb, #0A0A0A 48%, transparent);
  --sn-shadow: 0 12px 12px color-mix(in srgb, #0A0A0A 8%, transparent), 0 1px 1px color-mix(in srgb, #0A0A0A 4%, transparent);
  --sn-shadow-menu: 0 24px 60px color-mix(in srgb, #0A0A0A 16%, transparent);
  --sn-ease: cubic-bezier(.16, 1, .3, 1);
  font-family: "SAHI Sans", sans-serif; font-size: 16px; line-height: 1.55; letter-spacing: 0; text-align: left;
}
:root[data-theme="dark"] .sahi-nav {
  --sn-bar: #171717; --sn-bar-line: #272727; --sn-menu: #1F1F1F; --sn-panel: #0A0A0A;
  --sn-ink: #FAFAFA; --sn-ink-2: #D3D3D3; --sn-ink-3: #A3A3A3;
  --sn-hover: #272727; --sn-line: #272727;
  --sn-kyro-bg: color-mix(in srgb, #C80E7D 14%, transparent); --sn-kyro-hover: color-mix(in srgb, #C80E7D 24%, transparent); --sn-kyro-line: color-mix(in srgb, #FC6AD0 35%, transparent); --sn-kyro-ink: #FECCF1; --sn-kyro-spark: #FC6AD0;
  --sn-accent: #FEA3E5; --sn-accent-ink: #FECCF1; --sn-wash: #171717;
  --sn-scrim: color-mix(in srgb, #0F0F0F 62%, transparent);
  --sn-shadow: 0 12px 24px color-mix(in srgb, #0F0F0F 45%, transparent);
  --sn-shadow-menu: 0 24px 60px color-mix(in srgb, #0F0F0F 55%, transparent);
}
.sahi-nav *, .sahi-nav *::before, .sahi-nav *::after { box-sizing: border-box; }
.sahi-nav a { color: inherit; text-decoration: none; }
.sahi-nav ul { margin: 0; padding: 0; list-style: none; }
.sahi-nav p { margin: 0; }
.sahi-nav button { font: inherit; color: inherit; }
.sahi-nav img, .sahi-nav svg { display: block; max-width: none; }
.sahi-nav svg { flex: none; }
.sahi-nav :focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 3px; border-radius: 6px; }

/* ---- The bar ------------------------------------------------------------- */
.sahi-nav .sn-bar { position: fixed; inset: calc(env(safe-area-inset-top) + 16px) 0 auto; z-index: 900; display: flex; justify-content: center; padding-inline: 16px; pointer-events: none; transition: transform .35s var(--sn-ease); }
.sahi-nav .sn-inner { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 1600px; height: 64px; padding-inline: 16px; border: 1px solid var(--sn-bar-line); border-radius: 999px; background: var(--sn-bar); color: var(--sn-ink); box-shadow: var(--sn-shadow); transition: background-color .3s, border-color .3s; }
.sahi-nav .sn-brand { display: inline-flex; align-items: center; flex: none; padding: 4px; border-radius: 10px; }
.sahi-nav .sn-logo { width: 80px; height: 35px; }
.sahi-nav .sn-logo--dark { display: none; }
:root[data-theme="dark"] .sahi-nav .sn-logo--light { display: none; }
:root[data-theme="dark"] .sahi-nav .sn-logo--dark { display: block; }
.sahi-nav .sn-rule { display: none; width: 1px; height: 16px; margin-inline: 8px 4px; background: var(--sn-bar-line); }

.sahi-nav .sn-links { display: none; }
.sahi-nav .sn-list { display: flex; align-items: center; gap: 2px; }
.sahi-nav .sn-item { position: relative; }
.sahi-nav .sn-trigger { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font-size: 16px; line-height: 1; font-weight: 400; color: var(--sn-ink-2); white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; }
.sahi-nav .sn-trigger:hover, .sahi-nav .sn-trigger[aria-expanded="true"] { background: var(--sn-hover); color: var(--sn-ink); }
.sahi-nav .sn-trigger[aria-current="page"], .sahi-nav .sn-trigger.is-current { color: var(--sn-ink); font-weight: 500; }
.sahi-nav .sn-chev { width: 16px; height: 16px; transition: transform .25s var(--sn-ease); }
.sahi-nav .sn-trigger[aria-expanded="true"] .sn-chev { transform: rotate(180deg); }

/* The dropdown: a solid surface (sahi.com's was translucent grey with the page showing through). */
.sahi-nav .sn-drop { position: absolute; top: calc(100% + 10px); left: -8px; z-index: 10; min-width: 232px; padding: 8px; border: 1px solid var(--sn-line); border-radius: 16px; background: var(--sn-menu); color: var(--sn-ink); box-shadow: var(--sn-shadow-menu); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .25s var(--sn-ease), visibility 0s .25s; }
.sahi-nav .sn-drop::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; } /* hover bridge */
/* Opening: visibility is not in the transition list, so it flips at once and the items can take focus. */
.sahi-nav .sn-item.is-open .sn-drop { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .25s var(--sn-ease); }
.sahi-nav .sn-drop a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 10px; font-size: 15px; line-height: 1.3; transition: background-color .15s; }
.sahi-nav .sn-drop a:hover, .sahi-nav .sn-drop a:focus-visible { background: var(--sn-hover); }
.sahi-nav .sn-drop a[aria-current="page"] { background: var(--sn-wash); color: var(--sn-accent-ink); font-weight: 500; }
.sahi-nav .sn-ext { width: 14px; height: 14px; color: var(--sn-ink-3); }

/* Tools: twelve tools in two columns, each with the question it answers. */
.sahi-nav .sn-drop--wide { width: min(660px, calc(100vw - 48px)); padding: 10px; }
.sahi-nav .sn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.sahi-nav .sn-grid a { display: grid; gap: 2px; align-content: start; justify-content: stretch; padding: 10px 12px; }
.sahi-nav .sn-grid b { font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--sn-ink); }
.sahi-nav .sn-grid small { font-size: 13px; line-height: 1.4; color: var(--sn-ink-3); }
.sahi-nav .sn-grid a[aria-current="page"] b { color: var(--sn-accent-ink); }
.sahi-nav .sn-drop .sn-more { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 12px 14px; border-top: 1px solid var(--sn-line); border-radius: 0 0 10px 10px; font-size: 15px; font-weight: 500; color: var(--sn-accent-ink); }
.sahi-nav .sn-more:hover, .sahi-nav .sn-more:focus-visible { background: var(--sn-hover); }
.sahi-nav .sn-more svg { width: 18px; height: 18px; transition: transform .2s var(--sn-ease); }
.sahi-nav .sn-more:hover svg { transform: translateX(4px); }

/* Learn: the SAHI app's lessons, then the options-data ones, each under a small label. */
.sahi-nav .sn-drop--groups { min-width: 260px; }
.sahi-nav .sn-group { padding: 10px 12px 4px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sn-ink-3); }
.sahi-nav .sn-group + ul { margin-bottom: 4px; }
.sahi-nav .sn-drop ul + .sn-group { margin-top: 4px; border-top: 1px solid var(--sn-line); padding-top: 14px; }

/* ---- Actions ------------------------------------------------------------- */
.sahi-nav .sn-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sahi-nav .sn-kyro { display: none; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--sn-kyro-line); border-radius: 999px; background: var(--sn-kyro-bg); color: var(--sn-kyro-ink); font-size: 16px; line-height: 1; white-space: nowrap; transition: background-color .2s; }
.sahi-nav .sn-kyro:hover { background: var(--sn-kyro-hover); }
.sahi-nav .sn-kyro svg { width: 16px; height: 16px; color: var(--sn-kyro-spark); }
.sahi-nav .sn-new { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; background: #66033C; color: #FFFFFF; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.sahi-nav .sn-btn { display: none; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border: 1px solid transparent; border-radius: 999px; font-size: 16px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--sn-ease); }
.sahi-nav .sn-btn:hover { transform: translateY(-1px); }
.sahi-nav .sn-btn:active { transform: translateY(0) scale(.98); }
.sahi-nav .sn-btn--solid { background: var(--sn-solid); border-color: var(--sn-solid); color: var(--sn-on-solid); }
.sahi-nav .sn-btn--solid:hover { background: var(--sn-solid-hover); border-color: var(--sn-solid-hover); }
.sahi-nav .sn-btn--line { background: transparent; border-color: var(--sn-ink); color: var(--sn-ink); }
.sahi-nav .sn-btn--line:hover { background: var(--sn-hover); }
.sahi-nav .sn-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--sn-ink); cursor: pointer; }
.sahi-nav .sn-icon:hover { background: var(--sn-hover); }
.sahi-nav .sn-icon svg { grid-area: 1 / 1; width: 22px; height: 22px; }
.sahi-nav .sn-theme svg { width: 20px; height: 20px; transition: opacity .25s, transform .4s var(--sn-ease); }
.sahi-nav .sn-theme .sn-i-sun { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .sahi-nav .sn-theme .sn-i-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .sahi-nav .sn-theme .sn-i-moon { opacity: 0; transform: rotate(60deg) scale(.6); }

@media (min-width: 1200px) {
  .sahi-nav .sn-bar { top: calc(env(safe-area-inset-top) + 24px); padding-inline: 24px; }
  .sahi-nav .sn-inner { height: 68px; }
  .sahi-nav .sn-logo { width: 91px; height: 40px; }
  .sahi-nav .sn-rule { display: block; }
  .sahi-nav .sn-links { display: block; }
  .sahi-nav .sn-kyro, .sahi-nav .sn-btn { display: inline-flex; }
  .sahi-nav .sn-burger, .sahi-nav .sn-theme { display: none; }
}
/* 1200-1439px: the full menu still fits on one line (measured with the fallback font too). */
@media (min-width: 1200px) and (max-width: 1439px) {
  .sahi-nav .sn-trigger { padding-inline: 9px; font-size: 15px; }
  .sahi-nav .sn-kyro { padding-inline: 12px; font-size: 15px; }
  .sahi-nav .sn-actions .sn-btn { padding-inline: 16px; font-size: 15px; }
}
@media (min-width: 1200px) and (max-width: 1299px) {
  .sahi-nav .sn-kyro svg { display: none; }
  .sahi-nav .sn-rule { margin-inline: 4px 0; }
  .sahi-nav .sn-inner { gap: 4px; padding-inline: 12px; }
  .sahi-nav .sn-trigger { padding-inline: 7px; }
  .sahi-nav .sn-actions { gap: 6px; }
  .sahi-nav .sn-actions .sn-btn { padding-inline: 14px; }
}
/* Phones and tablets: the bar slides away on the way down and returns on the way up (sahi-nav.js). */
html.sn-hide .sahi-nav .sn-bar { transform: translateY(calc(-100% - 24px)); }

/* ---- Drawer (phones and tablets): from the right, as on sahi.com, over a scrim ---- */
.sahi-nav .sn-drawer { position: fixed; inset: 0; z-index: 950; display: flex; justify-content: flex-end; visibility: hidden; transition: visibility 0s .35s; }
.sahi-nav .sn-drawer.is-open { visibility: visible; transition: visibility 0s; }
.sahi-nav .sn-drawer__scrim { position: absolute; inset: 0; background: var(--sn-scrim); opacity: 0; transition: opacity .3s; }
.sahi-nav .sn-drawer.is-open .sn-drawer__scrim { opacity: 1; }
.sahi-nav .sn-drawer__panel { position: relative; display: flex; flex-direction: column; width: min(100%, 400px); height: 100%; height: 100dvh; padding: calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 20px); background: var(--sn-panel); color: var(--sn-ink); box-shadow: var(--sn-shadow-menu); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .35s var(--sn-ease); }
.sahi-nav .sn-drawer.is-open .sn-drawer__panel { transform: none; }
.sahi-nav .sn-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sahi-nav .sn-drawer__nav > li { border-bottom: 1px solid var(--sn-line); }
.sahi-nav .sn-drawer__link, .sahi-nav .sn-drawer__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 4px; border: 0; background: transparent; font-size: 17px; line-height: 1.2; color: var(--sn-ink); text-align: left; cursor: pointer; }
.sahi-nav .sn-drawer__link[aria-current="page"] { font-weight: 500; }
.sahi-nav .sn-drawer__toggle .sn-chev { width: 20px; height: 20px; }
.sahi-nav .sn-drawer__toggle[aria-expanded="true"] .sn-chev { transform: rotate(180deg); }
.sahi-nav .sn-drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--sn-ease); }
.sahi-nav .sn-drawer__toggle[aria-expanded="true"] + .sn-drawer__sub { grid-template-rows: 1fr; }
.sahi-nav .sn-drawer__sub > div { min-height: 0; overflow: hidden; padding-left: 12px; }
/* A folded group's links are out of the tab order too, not just out of sight. */
.sahi-nav .sn-drawer__sub > div { visibility: hidden; transition: visibility 0s .3s; }
.sahi-nav .sn-drawer__toggle[aria-expanded="true"] + .sn-drawer__sub > div { visibility: visible; transition: visibility 0s; }
.sahi-nav .sn-drawer__sub a { display: flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: 10px; color: var(--sn-ink-2); }
.sahi-nav .sn-drawer__sub a:hover { background: var(--sn-hover); color: var(--sn-ink); }
.sahi-nav .sn-drawer__sub a[aria-current="page"] { color: var(--sn-accent-ink); font-weight: 500; }
.sahi-nav .sn-drawer__sub .sn-group { padding: 12px 8px 4px; }
.sahi-nav .sn-drawer__sub > div > :last-child { margin-bottom: 8px; }
.sahi-nav .sn-drawer__cta { display: grid; gap: 10px; margin-top: 24px; }
.sahi-nav .sn-drawer__cta .sn-kyro, .sahi-nav .sn-drawer__cta .sn-btn { display: flex; justify-content: center; min-height: 48px; }
html.sn-locked, html.sn-locked body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sahi-nav .sn-bar, .sahi-nav .sn-drop, .sahi-nav .sn-chev, .sahi-nav .sn-btn, .sahi-nav .sn-theme svg, .sahi-nav .sn-more svg, .sahi-nav .sn-drawer, .sahi-nav .sn-drawer__scrim, .sahi-nav .sn-drawer__panel, .sahi-nav .sn-drawer__sub { transition-duration: 1ms; }
}
@media print { .sahi-nav { display: none !important; } }