/*
 * nirman-shell.css — styles owned by nirman-shell.js.
 *
 * Contains ONLY the truly universal chrome:
 *   - .lang-bar / .lang-scroll / .lb (used by ND_SHELL.injectLangBar)
 *   - #ndSkipLink defaults (used by ND_SHELL.injectSkipLink)
 *   - prefers-reduced-motion respect
 *
 * Page-specific design tokens (:root vars), hero blocks, card layouts,
 * dashboard grids etc stay in the page <style> block. The whole point
 * of this file is to dedupe what's actually duplicated, not to do a
 * risky one-shot extraction of every shared style.
 *
 * Page CSS in <style> after this link still wins via cascade order, so
 * pages that want to override (e.g. dashboards with a slightly
 * different lang-bar color) can without editing this file.
 */

/* ── LANG BAR ───────────────────────────────────────────────────────── */
/* Was duplicated inline in 18 HTML files. Now: single source.        */
.lang-bar {
  height: var(--lang-h, 30px);
  background: var(--surface-3, #EBE3D8);
  border-bottom: 1px solid var(--line, rgba(28,17,8,.08));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 600;
}
.lang-scroll {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.lang-scroll::-webkit-scrollbar { display: none; }
.lb {
  padding: 2px 10px;
  border-radius: var(--r-full, 100px);
  border: 1px solid var(--line-2, rgba(28,17,8,.14));
  background: transparent;
  color: var(--ink-3, #6B5040);
  font-size: var(--f-xs, 11px);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s ease-out, border-color .15s ease-out, background-color .15s ease-out;
}
.lb:hover { color: var(--saffron, #D4500A); border-color: var(--saffron, #D4500A); }
.lb.active {
  background: var(--saffron, #D4500A);
  border-color: var(--saffron, #D4500A);
  color: #fff;
  font-weight: 600;
}

/* ── SKIP-TO-MAIN-CONTENT LINK ─────────────────────────────────────── */
/* Style hooks for #ndSkipLink. Hidden until focused via inline style */
/* in the shell — these are visual defaults if a page needs to        */
/* restyle without touching JS.                                       */
#ndSkipLink:focus {
  outline: 3px solid var(--saffron, #D4500A);
  outline-offset: 2px;
}

/* ── PREFERS-REDUCED-MOTION ────────────────────────────────────────── */
/* Strip animations / transitions for users who've opted out at OS
 * level. Doesn't need to be perfect — the cascade-friendly !important
 * is acceptable here because user intent is explicit.
 */
/* ── NOSCRIPT FALLBACK ─────────────────────────────────────────────── */
/* When JS is off, the shell never runs — lang-bar buttons don't get   */
/* their onclick, nav-links stays empty, demo banners never appear.   */
/* Render a clean explainer block at the top of <body> so users at    */
/* least know what's happening and can re-enable JS.                  */
.nd-noscript-banner {
  background: #FFE4A3;
  color: #5C3A00;
  border-bottom: 2px solid #E0A800;
  padding: 14px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.nd-noscript-banner .nd-ns-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  text-align: left;
  align-items: flex-start;
}
.nd-noscript-banner .nd-ns-col {
  flex: 1 1 0;
}
.nd-noscript-banner strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
}
@media (max-width: 600px) {
  .nd-noscript-banner .nd-ns-inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── MOBILE NAV DRAWER (shell-injected, 2026-07-06) ─────────────────── */
.nd-burger{display:none;width:38px;height:34px;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;color:rgba(255,255,255,.85);cursor:pointer;flex-shrink:0;padding:0;}
@media(max-width:860px){.nd-burger{display:flex;}}
.nd-drawer-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:940;display:none;}
.nd-drawer-ov.show{display:block;}
.nd-drawer{position:fixed;top:0;right:0;bottom:0;width:min(82vw,320px);background:#1C1108;z-index:950;transform:translateX(102%);transition:transform .25s cubic-bezier(.05,.7,.1,1);padding:56px 22px 22px;overflow-y:auto;box-shadow:-12px 0 40px rgba(0,0,0,.4);}
.nd-drawer.open{transform:none;}
@media(prefers-reduced-motion:reduce){.nd-drawer{transition:none;}}
.nd-drawer a{display:block;padding:13px 2px;color:rgba(255,255,255,.85);font-size:15.5px;font-weight:500;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.07);}
.nd-drawer a.active{color:#E06830;font-weight:700;}
.nd-drawer a sup{font-size:8px;color:#E06830;font-weight:800;}
.nd-drawer-k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:18px 0 4px;font-weight:700;}
.nd-drawer-join{color:#E06830 !important;font-weight:700 !important;}
.nd-drawer-x{position:absolute;top:12px;right:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:rgba(255,255,255,.8);width:34px;height:34px;font-size:15px;cursor:pointer;}
