/* ═════════════════════════════════════════════════
   PATHSHALA — the shared look
   File: public/css/pathshala.css   (served at /static/css/pathshala.css)

   13 Oct 2026 — Abhishek: "just making it a dark colour does not mean it is a
   rich UI … make it rich, useful and easy to understand." What makes a screen
   read as premium is not colour but CALM: one type scale, one spacing rhythm,
   one accent used only for the thing you can press, soft 1px lines instead of
   heavy borders, and whitespace that lets the eye rest. These tokens and the
   few `ps-` classes below are that one system; every Tailwind class already on
   a page keeps working, so nothing is re-written to adopt it.
   ═════════════════════════════════════════════════ */

:root {
  --ps-ink: #0f172a;          /* headings, numbers */
  --ps-ink-2: #334155;        /* body */
  --ps-ink-3: #64748b;        /* labels, hints */
  --ps-ink-4: #94a3b8;        /* placeholders, disabled */
  --ps-line: #e2e8f0;         /* every hairline */
  --ps-line-2: #cbd5e1;       /* inputs */
  --ps-bg: #f6f8fb;           /* the page */
  --ps-surface: #ffffff;      /* cards */
  --ps-surface-2: #f8fafc;    /* table heads, wells */
  --ps-accent: #2563eb;       /* the one colour you can press */
  --ps-accent-ink: #1d4ed8;
  --ps-accent-soft: #eff6ff;
  --ps-good: #059669;  --ps-good-soft: #ecfdf5;
  --ps-warn: #d97706;  --ps-warn-soft: #fffbeb;
  --ps-bad: #e11d48;   --ps-bad-soft: #fff1f2;
  --ps-radius: 14px;
  --ps-radius-sm: 10px;
  --ps-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -16px rgba(15, 23, 42, .18);
  --ps-shadow-lg: 0 1px 2px rgba(15, 23, 42, .05), 0 20px 48px -24px rgba(15, 23, 42, .28);
}

/* ─── No flash between pages: the html itself is the page colour, and Chrome cross-fades one document into the
   next (view transitions) instead of painting white in between. ─── */
html { -webkit-text-size-adjust: 100%; background: var(--ps-bg); }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .14s; }

/* ─── Type: Inter for Latin, Noto for Devanagari, one scale ─── */
body {
  font-family: 'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ps-ink-2);
  font-feature-settings: 'cv11', 'ss01', 'tnum';
}
:lang(hi), [lang="hi"] { font-family: 'Noto Sans Devanagari', 'Inter', sans-serif; }
h1, h2, h3 { color: var(--ps-ink); letter-spacing: -0.01em; }
h1 { letter-spacing: -0.02em; }
.tabular-nums, .ps-num { font-variant-numeric: tabular-nums; }

/* ─── Motion: only what moves on purpose (the old `* { transition }` made every page feel sluggish) ─── */
a, button, [role="button"], input, select, textarea { transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ─── Controls: 44px to press, one focus ring ─── */
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18) !important;
}
select, input[type="date"], input[type="month"], input[type="time"], input[type="search"], input[type="text"], input[type="number"], input[type="tel"], input[type="email"] {
  color: var(--ps-ink);
}
::placeholder { color: var(--ps-ink-4); }

/* ─── Surfaces ─── */
.ps-card { background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); box-shadow: var(--ps-shadow); }
.ps-well { background: var(--ps-surface-2); border: 1px solid var(--ps-line); border-radius: var(--ps-radius-sm); }
.ps-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ps-ink-3); }
.ps-hint { font-size: 12px; color: var(--ps-ink-3); }

/* ─── The tab strip, as one segmented control instead of loose chips ─── */
.ps-tabs { display: flex; gap: 2px; padding: 3px; background: var(--ps-surface-2); border: 1px solid var(--ps-line); border-radius: 12px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ps-tabs::-webkit-scrollbar { display: none; }
.ps-tabs > a, .ps-tabs > button, .ps-tabs > span { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ps-ink-3); white-space: nowrap; text-decoration: none; border: 0; background: transparent; }
.ps-tabs > a:hover, .ps-tabs > button:hover { color: var(--ps-ink); }
.ps-tabs > .is-locked svg { width: 14px; height: 14px; margin-left: 4px; }
.ps-tabs > .is-on, .ps-tabs > [aria-current="page"] { background: var(--ps-surface); color: var(--ps-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px var(--ps-line); }
.ps-tabs > .is-locked { color: var(--ps-ink-4); }

/* ─── Status chips: colour only where it means something ─── */
.ps-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--ps-surface-2); color: var(--ps-ink-2); border: 1px solid var(--ps-line); }
.ps-chip.good { background: var(--ps-good-soft); color: var(--ps-good); border-color: #a7f3d0; }
.ps-chip.warn { background: var(--ps-warn-soft); color: var(--ps-warn); border-color: #fde68a; }
.ps-chip.bad  { background: var(--ps-bad-soft);  color: var(--ps-bad);  border-color: #fecdd3; }
.ps-chip.accent { background: var(--ps-accent-soft); color: var(--ps-accent-ink); border-color: #bfdbfe; }

/* ─── Tables and registers ─── */
.ps-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ps-table th { position: sticky; top: 0; z-index: 1; background: var(--ps-surface-2); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ps-ink-3); text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--ps-line); }
.ps-table td { padding: 10px 14px; border-bottom: 1px solid var(--ps-line); font-size: 14px; color: var(--ps-ink-2); vertical-align: middle; }
.ps-table tr:last-child td { border-bottom: 0; }
.ps-table tr:hover td { background: #fafcff; }

/* ─── Form field states (kept from before) ─── */
.field-valid { border-color: #10b981 !important; background-color: #f0fdf4; }
.field-invalid { border-color: #ef4444 !important; background-color: #fef2f2; }

/* ─── HTMX loading indicator (kept) ─── */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ─── Honeypot (kept) ─── */
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

/* ─── Spinner (kept) ─── */
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #e5e7eb; border-top-color: var(--ps-accent); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Marketing bits (kept) ─── */
.gradient-text { background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.feature-card { transition: transform .25s ease, box-shadow .25s ease; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, .08); }

@media (max-width: 640px) { .container-mobile { padding-left: 16px; padding-right: 16px; } }