/* Plus Jakarta Sans for headings (SIL Open Font License), served from this site: the Latin file, and the
   extended-Latin one that carries the rupee sign. Body text and other scripts use the device's own fonts, as
   they always did here (the body's font-sans class names the system font). */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* JanHelp interface styles. Extracted from index.html so the browser
   caches them separately from the markup. */

:root {
      --background: #f8fafc;
      --card: #ffffff;
      --card-surface: #f8fafc;
      --card-hover: #faf5ff;
      --border: #e2e8f0;
      --border-light: #cbd5e1;
      --border-focus: #7c3aed;
      --foreground: #0f172a;
      --muted-foreground: #64748b;
      --primary: #7c3aed;
      --primary-hover: #6d28d9;
      --accent-emerald: #10b981;
      --accent-purple: #8b5cf6;
      --accent-teal: #059669;
      --accent-amber: #d97706;
      --accent-cyan: #0284c7;
    }
    * {
      box-sizing: border-box;
    }
    html, body {
      background-color: var(--background);
      color: var(--foreground);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      overflow-x: hidden;
      max-width: 100vw;
      margin: 0;
      padding: 0;
    }
    h1, h2, h3, h4, .font-heading {
      font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #f1f5f9; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    .sidebar-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.625rem 0.875rem;
      border-radius: 0.75rem;
      font-size: 0.8125rem;
      font-weight: 600;
      color: #475569;
      transition: all 0.15s ease-in-out;
      cursor: pointer;
      border-left: 3px solid transparent;
      user-select: none;
    }
    .sidebar-link:hover {
      background-color: #f5f3ff;
      color: #7c3aed;
    }
    .sidebar-link.active {
      background-color: #faf5ff;
      color: #6d28d9;
      border-left-color: #7c3aed;
      font-weight: 700;
    }
    .sidebar-category {
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #64748b;
      padding: 0.875rem 0.875rem 0.375rem 0.875rem;
    }
  
    /* Mobile-First Hardware & Viewport Discipline */
    #app-sidebar {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      width: 18rem;
      max-width: 85vw;
      z-index: 50;
      transform: translateX(-100%);
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }
    #app-sidebar.sidebar-open {
      transform: translateX(0) !important;
    }
    @media (min-width: 1024px) {
      #app-sidebar {
        transform: translateX(0) !important;
      }
      #main-viewport-wrapper {
        padding-left: 18rem !important;
      }
    }
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    /* Safe Touch Targets & Prevent iOS Safari Auto-Zoom */
    @media (max-width: 640px) {
      input, select, textarea {
        font-size: 16px !important;
      }
      .mobile-p-3 {
        padding: 0.75rem !important;
      }
      .mobile-text-xs {
        font-size: 0.75rem !important;
      }
    }
  
    /* Mobile-First Hardware & Touch Ergonomics */
    @media (max-width: 640px) {
      input, select, textarea {
        font-size: 16px !important; /* Prevents iOS Safari unwanted auto-zoom on input focus */
      }
      .mobile-safe-pb {
        padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)) !important;
      }
      .mobile-tap-target {
        min-height: 44px;
      }
    }
    .safe-area-bottom {
      padding-bottom: env(safe-area-inset-bottom, 0.75rem);
    }

/* Tool panels (invest, insure, cards, loans): a row of pills picks one tool,
   each tool is a card of short labelled fields and a result below. */
.tool-pill {
  flex: 0 0 auto;
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}
.tool-pill:hover { border-color: #c4b5fd; color: var(--primary); }
.tool-pill[aria-selected="true"], .tool-pill[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.tool-card {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
}
@media (min-width: 640px) { .tool-card { padding: 1.25rem; } }
.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.field > span { font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: #fff;
  font-size: 0.875rem;
  color: var(--foreground);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid #ddd6fe; border-color: var(--border-focus); }
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.1rem;
  border-radius: 0.75rem;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:disabled { opacity: 0.6; }
.stat-big { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--foreground); line-height: 1.1; }
.stat-label { font-size: 0.75rem; color: var(--muted-foreground); }
.result-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--border); }
.result-row:first-child { border-top: 0; }
.chip-note { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 700; }
.chip-fixed { background: #ecfdf5; color: #047857; }
.chip-market { background: #fffbeb; color: #b45309; }
.chip-warn { background: #fef2f2; color: #b91c1c; }
.bar-track { height: 0.5rem; background: #f1f5f9; border-radius: 9999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--primary); border-radius: 9999px; }

/* A field filled from the person's earlier answers (answers.js) or profile (profile.js): shaded, to check. */
input.ns-autofilled, select.ns-autofilled, textarea.ns-autofilled { background-color: #f5f3ff; border-color: #c4b5fd; }
/* A required field left empty when the person asked for a result. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #dc2626 !important; box-shadow: 0 0 0 2px #fecaca; }

/* Inside the installed app, no link to install it. */
.ns-installed #nav-item-android { display: none; }

/* Contrast: white text on these fills, and these small text colours, measured under 4.5:1 (WCAG AA). One shade
   darker passes. Set here once, for every screen, where the utility classes are used. */
.bg-emerald-600.text-white { background-color: #047857 !important; }
.bg-emerald-600.text-white:hover, .hover\:bg-emerald-700.text-white:hover { background-color: #065f46 !important; }
.bg-amber-600.text-white { background-color: #b45309 !important; }
.bg-amber-600.text-white:hover, .hover\:bg-amber-700.text-white:hover { background-color: #92400e !important; }
.text-rose-600 { color: #be123c !important; }
.text-red-500, .text-red-300 { color: #b91c1c !important; }
.bg-emerald-600.text-white .opacity-80, button .opacity-80 { opacity: 1 !important; }