/* ============================================================================
   Jagrik AI — Design System
   Single source of truth for the whole product's look & feel.
   Identity: "Teal / Jagrik" — the primary ramp is anchored on the Jagrik
   brand kit's exact tokens (jagrik-teal, jagrik-node, jagrik-node-light,
   jagrik-ink), which were themselves sampled from the official e-Jagriti
   portal mark, so the product still reads as visually continuous with the
   government portal it hands off to, the same intent the old navy palette
   had. Slate neutrals nudged toward the brand kit's own teal-tinted
   surface/border/text tokens rather than pure gray. Amber reserved
   narrowly for warning/pending states, green for success, per the brand
   kit's explicit semantic colors. Public Sans for body copy; the wordmark
   itself needs Poppins (see templates/base.html) — see brand/README.md.
   Use the CSS variables and .ns-* component classes everywhere so every
   screen (dashboard, complaint tracking, MVP chat, auth) reads as one product.
   ========================================================================== */

:root {
  /* ---- Brand: primary (teal — action, identity; matches e-Jagriti) ----
     300/500/700/800 are the brand kit's exact jagrik-node-light/node/teal/ink;
     the rest are interpolated to give every existing var(--ns-primary-*)
     consumer a full ramp. See brand/tokens/colors.css for the source values. */
  --ns-primary-50:  #eaf2f5;
  --ns-primary-100: #d2e4ea;
  --ns-primary-200: #a8c9d6;
  --ns-primary-300: #7aaec9;   /* jagrik-node-light */
  --ns-primary-400: #5f96b3;
  --ns-primary-500: #407d9d;   /* jagrik-node — base */
  --ns-primary-600: #2a6483;   /* hover / emphasis */
  --ns-primary-700: #054a65;   /* jagrik-teal — the "old government blue" equivalent */
  --ns-primary-800: #083b51;   /* jagrik-ink */

  /* ---- Accent: navy (trust, structure, links) ---- */
  --ns-navy-50:  #eaf2f5;
  --ns-navy-500: #407d9d;
  --ns-navy-600: #2a6483;
  --ns-navy-700: #054a65;      /* jagrik-teal — kept as accent */
  --ns-navy-900: #083b51;      /* jagrik-ink */

  /* ---- The "AI" in the wordmark: reserved, not reused elsewhere as a
     generic accent (see brand/README.md — the glow blue fails contrast
     on light grounds and is meant only for this one piece of text). ---- */
  --ns-jagrik-ai: #407d9d;

  /* ---- Neutrals (slate) ---- */
  --ns-slate-50:  #f8fafc;
  --ns-slate-100: #f1f5f9;
  --ns-slate-200: #e2e8f0;
  --ns-slate-300: #cbd5e1;
  --ns-slate-400: #94a3b8;
  --ns-slate-500: #64748b;
  --ns-slate-600: #475569;
  --ns-slate-700: #334155;
  --ns-slate-800: #1e293b;
  --ns-slate-900: #0f172a;

  /* ---- Semantic surfaces & text (jagrik-surface/border/text tokens: a
     teal-tinted neutral, chosen rather than plain gray) ---- */
  --ns-bg:          #f4f7f9;
  --ns-surface:     #ffffff;
  --ns-surface-2:   #eaf1f4;
  --ns-border:      #d8e2e8;
  --ns-border-soft: #e6edf0;
  --ns-text:        #0e2a36;
  --ns-text-muted:  #5d6166;
  --ns-text-faint:  #8b979b;

  /* ---- Status palette (complaint lifecycle) ----
     Collapsed from an 8-hue rainbow (violet/cyan/pink) down to a
     restrained set: slate (neutral), tonal steps of the primary ramp (the
     "in progress" states, distinguished by shade rather than hue), amber
     (the one state that's actually pending on the user/commission),
     and green (resolved). Matches e-Jagriti's own convention of using
     amber only for "pending" and green only for "done". */
  --ns-status-draft:      #5d6166;   /* text-muted */
  --ns-status-intake:     #407d9d;   /* primary-500 */
  --ns-status-docs:       #b3822b;   /* jagrik-warning — pending on the user */
  --ns-status-filed:      #054a65;   /* primary-700 */
  --ns-status-review:     #2a6483;   /* primary-600 */
  --ns-status-hearing:    #083b51;   /* primary-800 / ink */
  --ns-status-resolved:   #198754;   /* jagrik-success */
  --ns-status-closed:     #475569;   /* slate */

  /* ---- Feedback ---- */
  --ns-success: #198754;
  --ns-warning: #b3822b;
  --ns-danger:  #dc3545;
  --ns-info:    #2563eb;

  /* ---- Typography ---- */
  --ns-font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ns-text-xs:   0.75rem;
  --ns-text-sm:   0.875rem;
  --ns-text-base: 1rem;
  --ns-text-lg:   1.125rem;
  --ns-text-xl:   1.25rem;
  --ns-text-2xl:  1.5rem;
  --ns-text-3xl:  1.875rem;
  --ns-text-4xl:  2.25rem;

  /* ---- Radii ---- */
  --ns-radius-sm:  8px;
  --ns-radius-md:  12px;
  --ns-radius-lg:  16px;
  --ns-radius-xl:  20px;
  --ns-radius-full: 9999px;

  /* ---- Shadows ---- */
  --ns-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ns-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ns-shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
  --ns-shadow-lg: 0 12px 28px -8px rgba(15, 23, 42, 0.14);
  --ns-shadow-primary: 0 8px 20px -6px rgba(35, 74, 125, 0.35);

  /* ---- Layout ---- */
  --ns-sidebar-w: 248px;
  --ns-topbar-h:  60px;
  --ns-container: 1200px;
}

/* ===========================================================================
   Dark theme
   ---------------------------------------------------------------------------
   Toggled from the profile card (see app_base.html); `data-theme="dark"` is
   set on <html> before first paint (no-flash script in base.html) and the
   choice is persisted in localStorage under `ns.theme`.

   The whole design system is driven by the `--ns-*` variables and `.ns-*`
   component classes, so dark mode is mostly a matter of remapping those tokens
   here: we invert the slate ramp (so every existing `var(--ns-slate-900)`
   heading / `var(--ns-slate-600)` body-text usage flips to a light tone) and
   swap the semantic surfaces. The blocks after the variables mop up the few
   places that hardcode Tailwind color utilities (bg-white, text-slate-*, …)
   instead of the tokens, plus the handful of component classes that use a
   token as a solid fill (buttons) where a plain remap would hurt contrast.
   =========================================================================== */
:root[data-theme="dark"] {
  /* ---- Brand primary (teal, nudged lighter so it reads as accent text on
          a dark surface; solid fills are pinned separately below). 200/600/800
          are the brand kit's exact jagrik-border(dark)/node-light/ai-glow —
          the kit's own dark-mode rule is "swap node for node-light", which is
          exactly what 600 does here. ---- */
  --ns-primary-50:  #0c2836;   /* subtle tint: active-nav / info chip bg */
  --ns-primary-100: #0f3040;
  --ns-primary-200: #17475c;   /* borders — jagrik-border (dark) */
  --ns-primary-300: #2c5f79;
  --ns-primary-400: #4a7f99;
  --ns-primary-500: #6699b3;
  --ns-primary-600: #7aaec9;   /* accent text / icons — jagrik-node-light */
  --ns-primary-700: #a8cfe0;   /* active-nav text */
  --ns-primary-800: #7fd4f0;   /* jagrik-ai-glow — AAA on ink, the lightest step */

  /* ---- Navy accent (links) ---- */
  --ns-navy-50:  #0c2836;
  --ns-navy-500: #6699b3;
  --ns-navy-600: #7aaec9;
  --ns-navy-700: #a8cfe0;
  --ns-navy-900: #7fd4f0;

  /* ---- The "AI" in the wordmark on a dark ground: the brand kit's glow
     blue, meant only for this (see the light-mode note above). ---- */
  --ns-jagrik-ai: #7fd4f0;

  /* ---- Neutrals: slate ramp inverted (50 <-> 900) ---- */
  --ns-slate-50:  #131c2e;
  --ns-slate-100: #1b263c;
  --ns-slate-200: #2a3852;
  --ns-slate-300: #3a4a68;
  --ns-slate-400: #6b7d96;
  --ns-slate-500: #8a9bb4;
  --ns-slate-600: #a9b8cf;
  --ns-slate-700: #c4d0e0;
  --ns-slate-800: #dbe3ee;
  --ns-slate-900: #eef2f8;

  /* ---- Semantic surfaces & text (jagrik-surface/border/text, dark) ---- */
  --ns-bg:          #06212c;
  --ns-surface:     #0b2e3c;
  --ns-surface-2:   #0e3646;
  --ns-border:      #17475c;
  --ns-border-soft: #123c4e;
  --ns-text:        #e8f1f5;
  --ns-text-muted:  #9db4bf;
  --ns-text-faint:  #6e8792;

  /* ---- Feedback (nudged brighter for a dark canvas) ---- */
  --ns-success: #34d399;
  --ns-warning: #f0a63a;
  --ns-danger:  #f87171;
  --ns-info:    #60a5fa;

  /* ---- Shadows (deepened; light theme shadows vanish on a dark canvas) ---- */
  --ns-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --ns-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40);
  --ns-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.45);
  --ns-shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, 0.65);
  --ns-shadow-primary: 0 8px 20px -6px rgba(0, 0, 0, 0.55);
}

/* App canvas: recolour the subtle dot texture for a dark background. */
:root[data-theme="dark"] .ns-app {
  background-image: radial-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px);
}

/* --- Solid fills that use a token which we lightened above: pin them back to a
       saturated navy so white text stays legible. --- */
:root[data-theme="dark"] .ns-btn-primary {
  background: linear-gradient(180deg, #407d9d, #2a6483);
}
:root[data-theme="dark"] .ns-btn-primary:hover {
  background: linear-gradient(180deg, #2a6483, #054a65);
}
:root[data-theme="dark"] .ns-btn-navy { background: #2a6483; }
:root[data-theme="dark"] .ns-btn-navy:hover { background: #407d9d; }

/* Status badges: dark-tint the (otherwise hardcoded-light) chip backgrounds
   and lighten the navy-family text so it clears the dark chip. */
:root[data-theme="dark"] .ns-badge { background: #1a2540; border-color: #2a3852; }
:root[data-theme="dark"] .ns-badge[data-status="draft"],
:root[data-theme="dark"] .ns-badge[data-status="closed"]       { color: #94a3b8; }
:root[data-theme="dark"] .ns-badge[data-status="intake"],
:root[data-theme="dark"] .ns-badge[data-status="filed"],
:root[data-theme="dark"] .ns-badge[data-status="under_review"],
:root[data-theme="dark"] .ns-badge[data-status="hearing"]      { color: #86aad4; }
:root[data-theme="dark"] .ns-badge[data-status="docs_ready"]   { color: #f0a63a; }
:root[data-theme="dark"] .ns-badge[data-status="resolved"]     { color: #34d399; }

/* --- Hardcoded Tailwind color utilities: remap to tokens under dark so the
       screens that reach for `bg-white` / `text-slate-*` / `border-slate-*`
       instead of the design tokens still flip. (`text-white` on coloured fills
       and the deliberately-dark `bg-slate-800/900` overlays are left alone.) --- */
:root[data-theme="dark"] .bg-white { background-color: var(--ns-surface); }
:root[data-theme="dark"] .bg-white\/90 { background-color: color-mix(in srgb, var(--ns-surface) 90%, transparent); }
:root[data-theme="dark"] .bg-white\/80 { background-color: color-mix(in srgb, var(--ns-surface) 80%, transparent); }
:root[data-theme="dark"] .bg-slate-50  { background-color: var(--ns-slate-50); }
:root[data-theme="dark"] .bg-slate-100 { background-color: var(--ns-slate-100); }
:root[data-theme="dark"] .bg-slate-200 { background-color: var(--ns-slate-200); }
:root[data-theme="dark"] .bg-slate-400 { background-color: var(--ns-slate-400); }

:root[data-theme="dark"] .text-slate-200 { color: var(--ns-slate-200); }
:root[data-theme="dark"] .text-slate-400 { color: var(--ns-slate-400); }
:root[data-theme="dark"] .text-slate-500 { color: var(--ns-slate-500); }
:root[data-theme="dark"] .text-slate-600 { color: var(--ns-slate-600); }
:root[data-theme="dark"] .text-slate-700 { color: var(--ns-slate-700); }
:root[data-theme="dark"] .text-slate-800 { color: var(--ns-slate-800); }
:root[data-theme="dark"] .text-slate-900 { color: var(--ns-slate-900); }

:root[data-theme="dark"] .border-slate-100 { border-color: var(--ns-border-soft); }
:root[data-theme="dark"] .border-slate-200 { border-color: var(--ns-border); }
:root[data-theme="dark"] .border-slate-200\/80 { border-color: color-mix(in srgb, var(--ns-border) 80%, transparent); }
:root[data-theme="dark"] .border-slate-200\/70 { border-color: color-mix(in srgb, var(--ns-border) 70%, transparent); }

:root[data-theme="dark"] .hover\:bg-slate-50:hover  { background-color: var(--ns-slate-50); }
:root[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: var(--ns-slate-100); }
:root[data-theme="dark"] .hover\:text-slate-600:hover { color: var(--ns-slate-600); }
:root[data-theme="dark"] .hover\:text-slate-700:hover { color: var(--ns-slate-700); }
:root[data-theme="dark"] .hover\:text-slate-800:hover { color: var(--ns-slate-800); }
:root[data-theme="dark"] .hover\:text-slate-900:hover { color: var(--ns-slate-900); }

/* ---------------------------------------------------------------------------
   Base / reset niceties (scoped so we don't fight the MVP's own inline styles)
   --------------------------------------------------------------------------- */
.ns-app {
  font-family: var(--ns-font);
  color: var(--ns-text);
  background-color: var(--ns-bg);
  background-image: radial-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
}
.ns-font { font-family: var(--ns-font); }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.ns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--ns-font);
  font-size: var(--ns-text-sm);
  font-weight: 600;
  line-height: 1;
  padding: 0.625rem 1.1rem;
  border-radius: var(--ns-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
  white-space: nowrap;
}
.ns-btn:hover { text-decoration: none; }
.ns-btn:active { transform: translateY(1px); }
.ns-btn:disabled, .ns-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.ns-btn-primary {
  background: linear-gradient(180deg, var(--ns-primary-500), var(--ns-primary-600));
  color: #fff;
  box-shadow: var(--ns-shadow-xs);
}
.ns-btn-primary:hover {
  background: linear-gradient(180deg, var(--ns-primary-600), var(--ns-primary-700));
  color: #fff;
  box-shadow: var(--ns-shadow-primary);
}
.ns-btn-secondary {
  background: var(--ns-surface);
  color: var(--ns-slate-700);
  border-color: var(--ns-border);
  box-shadow: var(--ns-shadow-xs);
}
.ns-btn-secondary:hover { background: var(--ns-slate-50); border-color: var(--ns-slate-300); color: var(--ns-slate-900); }

.ns-btn-navy {
  background: var(--ns-navy-700);
  color: #fff;
}
.ns-btn-navy:hover { background: var(--ns-navy-600); color: #fff; }

.ns-btn-ghost { background: transparent; color: var(--ns-slate-500); }
.ns-btn-ghost:hover { background: var(--ns-slate-100); color: var(--ns-slate-800); }

.ns-btn-danger { background: var(--ns-surface); color: var(--ns-danger); border-color: #fecaca; }
.ns-btn-danger:hover { background: #fef2f2; border-color: #fca5a5; }

.ns-btn-danger-solid { background: var(--ns-danger); color: #fff; }
.ns-btn-danger-solid:hover { background: #b91c1c; color: #fff; }
.ns-btn-danger-solid:disabled:hover { background: var(--ns-danger); }

.ns-btn-sm { padding: 0.4rem 0.75rem; font-size: var(--ns-text-xs); border-radius: var(--ns-radius-sm); }
.ns-btn-lg { padding: 0.8rem 1.5rem; font-size: var(--ns-text-base); border-radius: var(--ns-radius-md); }
.ns-btn-block { width: 100%; }

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */
.ns-card {
  background: var(--ns-surface);
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius-lg);
  box-shadow: var(--ns-shadow-sm);
}
.ns-card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ns-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--ns-shadow-lg);
  border-color: var(--ns-primary-200);
}
.ns-card-pad { padding: 1.25rem; }

/* ---------------------------------------------------------------------------
   Status badges (complaint lifecycle) — driven by data-status
   --------------------------------------------------------------------------- */
.ns-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--ns-text-xs);
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: var(--ns-radius-full);
  border: 1px solid transparent;
  line-height: 1.2;
  white-space: nowrap;
}
.ns-badge .ns-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: currentColor; flex: none;
}
.ns-badge[data-status="draft"]        { color: var(--ns-status-draft);   background: #f1f5f9; border-color: #e2e8f0; }
.ns-badge[data-status="intake"]       { color: var(--ns-status-intake);  background: #eff6ff; border-color: #bfdbfe; }
.ns-badge[data-status="docs_ready"]   { color: var(--ns-status-docs);    background: #fffbeb; border-color: #fde68a; }
.ns-badge[data-status="filed"]        { color: var(--ns-status-filed);   background: #eaf2f5; border-color: #c2d6de; }
.ns-badge[data-status="under_review"] { color: var(--ns-status-review);  background: #f0f5fa; border-color: #cddce9; }
.ns-badge[data-status="hearing"]      { color: var(--ns-status-hearing); background: #eaeff5; border-color: #c1cddb; }
.ns-badge[data-status="resolved"]     { color: var(--ns-status-resolved);background: #f0fdf4; border-color: #bbf7d0; }
.ns-badge[data-status="closed"]       { color: var(--ns-status-closed);  background: #f1f5f9; border-color: #e2e8f0; }

/* ---------------------------------------------------------------------------
   Form controls
   --------------------------------------------------------------------------- */
.ns-input, .ns-select, .ns-textarea {
  width: 100%;
  font-family: var(--ns-font);
  font-size: var(--ns-text-sm);
  color: var(--ns-text);
  background: var(--ns-surface);
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius-md);
  padding: 0.6rem 0.8rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ns-input:focus, .ns-select:focus, .ns-textarea:focus {
  outline: none;
  border-color: var(--ns-primary-400);
  box-shadow: 0 0 0 3px rgba(45, 90, 148, 0.15);
}
.ns-label { display:block; font-size: var(--ns-text-xs); font-weight:600; color: var(--ns-slate-600); margin-bottom:0.35rem; }

/* Custom select: drop the native OS arrow for a themed chevron */
.ns-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.25rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
}
.ns-select:hover { border-color: var(--ns-slate-300); }

/* Date input: theme the native calendar picker trigger */
.ns-input[type="date"] { cursor: pointer; }
.ns-input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  padding: 0.15rem;
  border-radius: var(--ns-radius-sm);
  transition: opacity .12s ease, background-color .12s ease;
  filter: invert(38%) sepia(9%) saturate(1046%) hue-rotate(176deg) brightness(93%) contrast(86%);
}
.ns-input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: var(--ns-slate-100);
}

/* ---------------------------------------------------------------------------
   Utility text
   --------------------------------------------------------------------------- */
.ns-muted  { color: var(--ns-text-muted); }
.ns-faint  { color: var(--ns-text-faint); }

/* Icon size helper not in Tailwind's default scale */
.w-4\.5 { width: 1.125rem; }
.h-4\.5 { height: 1.125rem; }
.ns-eyebrow { font-size: var(--ns-text-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--ns-primary-600); }

/* ---------------------------------------------------------------------------
   Timeline (complaint tracking)
   --------------------------------------------------------------------------- */
.ns-timeline { position: relative; padding-left: 1.75rem; }
.ns-timeline::before {
  content: ""; position: absolute; left: 0.5rem; top: 0.4rem; bottom: 0.4rem;
  width: 2px; background: var(--ns-border);
}
.ns-timeline-item { position: relative; padding-bottom: 1.25rem; }
.ns-timeline-item:last-child { padding-bottom: 0; }
.ns-timeline-item::before {
  content: ""; position: absolute; left: -1.32rem; top: 0.15rem;
  width: 0.85rem; height: 0.85rem; border-radius: 50%;
  background: var(--ns-surface); border: 2px solid var(--ns-slate-300);
}
.ns-timeline-item.is-done::before   { background: var(--ns-primary-500); border-color: var(--ns-primary-500); }
.ns-timeline-item.is-current::before{ background: #fff; border-color: var(--ns-primary-500); box-shadow: 0 0 0 4px rgba(45,90,148,.18); }

/* ---------------------------------------------------------------------------
   Progress meter
   --------------------------------------------------------------------------- */
.ns-progress { height: 6px; border-radius: var(--ns-radius-full); background: var(--ns-slate-200); overflow: hidden; }
.ns-progress > span { display:block; height:100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--ns-primary-400), var(--ns-primary-600)); transition: width .4s ease; }

/* ---------------------------------------------------------------------------
   Inline glossary terms — a dotted-underline term (.ns-term, data-explain=
   "...") that shows a plain-language explanation on click/focus. Click-based
   (not hover-only) so it works the same on touch and desktop. The popover
   uses the same tokens as .ns-card, so it's correctly readable in both themes
   without a separate dark-mode override.
   --------------------------------------------------------------------------- */
.ns-term { border-bottom: 1px dotted var(--ns-text-faint); cursor: help; }
.ns-term:hover, .ns-term:focus-visible { border-bottom-color: var(--ns-primary-600); outline: none; }
#ns-term-popover {
  position: absolute; z-index: 80; max-width: 300px;
  padding: 0.65rem 0.85rem; border-radius: var(--ns-radius-md);
  background: var(--ns-surface); color: var(--ns-text); border: 1px solid var(--ns-border);
  box-shadow: var(--ns-shadow-lg); font-size: var(--ns-text-xs); line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Animations
   --------------------------------------------------------------------------- */
@keyframes ns-fade-up { from { opacity:0; transform: translateY(12px);} to {opacity:1; transform:none;} }
.ns-fade-up { animation: ns-fade-up .5s cubic-bezier(.16,1,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  .ns-fade-up { animation: none !important; }
  .ns-card-hover:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Jagrik AI mark & wordmark
   See templates/partials/_jagrik_mark.html for the icon markup this styles,
   and brand/README.md for the full usage rules (no tagline, no recolouring,
   the "AI" glow is reserved and never used as a general accent).
   --------------------------------------------------------------------------- */
.jagrik-mark { display: inline-block; line-height: 0; }
.jagrik-mark svg { display: block; }
/* Specificity note: ".jagrik-mark svg" above is (0,1,1) — a bare ".jagrik-mark-still"
   rule at (0,1,0) loses to it and the "still" SVG stayed visible alongside the
   animated one (rendered as two stacked mark icons). Qualifying with "svg" here
   matches that specificity so these actually win. */
.jagrik-mark svg.jagrik-mark-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .jagrik-mark svg.jagrik-mark-motion { display: none; }
  .jagrik-mark svg.jagrik-mark-still { display: block; }
}

.jagrik-wordmark {
  font-family: 'Poppins', 'Nunito Sans', system-ui, -apple-system, sans-serif;
  font-weight: 600; letter-spacing: -0.01em;
}
.jagrik-wordmark .jagrik-ai {
  font-weight: 500; letter-spacing: 0.02em; color: var(--ns-jagrik-ai);
}
/* The glow is a text-shadow, not an SVG filter — costs nothing to render,
   scales with font size, and degrades to plain text wherever CSS on text
   isn't supported. Only lit in dark mode: the glow blue fails contrast on
   light grounds (1.67:1 on white), so light mode stays plain colour. */
:root[data-theme="dark"] .jagrik-wordmark .jagrik-ai {
  text-shadow: 0 0 10px rgba(127, 212, 240, 0.55), 0 0 22px rgba(127, 212, 240, 0.30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .jagrik-wordmark .jagrik-ai {
    text-shadow: 0 0 10px rgba(127, 212, 240, 0.55), 0 0 22px rgba(127, 212, 240, 0.30);
  }
}