/* ============================================================================
   શ્રી નવાપુરા જૈન સંઘ — Design System v2
   ----------------------------------------------------------------------------
   Single stylesheet replacing style.css + theme.css + ui.css. Those three were
   loaded in sequence and each overrode the previous one's :root tokens, so the
   real cascade was impossible to reason about. This file defines the tokens
   once and keeps every legacy class name (.card .btn .stat .pill .vhead ...)
   so all 46 templates re-skin without markup churn.

   Palette: warm stone neutrals + saffron brand. Warm greys (not blue-greys)
   keep the devotional feel; saffron is the single saturated accent.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  color-scheme: light;

  /* brand — saffron */
  --b50:#fff7ed;  --b100:#ffedd5; --b200:#fed7aa; --b300:#fdba74;
  --b400:#fb923c; --b500:#f97316; --b600:#ea580c; --b700:#c2410c;
  --b800:#9a3412; --b900:#7c2d12;

  /* neutrals — warm stone */
  --n0:#ffffff;   --n50:#fafaf9;  --n100:#f5f5f4; --n200:#e7e5e4;
  --n300:#d6d3d1; --n400:#a8a29e; --n500:#78716c; --n600:#57534e;
  --n700:#44403c; --n800:#292524; --n900:#1c1917; --n950:#0f0d0c;

  /* status — bright, but each one earns its place: green confirms, rose is
     destructive or overdue, amber warns, blue informs. Nothing else is
     coloured, so a colour on screen always means something. */
  --ok:#0d9488;      --ok-bg:#f0fdfa;     --ok-bd:#99f6e4;
  --danger:#e11d48;  --danger-bg:#fff1f2; --danger-bd:#fecdd3;
  --warn:#d97706;    --warn-bg:#fffbeb;   --warn-bd:#fde68a;
  --info:#0284c7;    --info-bg:#f0f9ff;   --info-bd:#bae6fd;

  /* semantic surfaces */
  --bg:#fbfaf9;
  --surface:var(--n0);
  --surface-2:var(--n100);
  --surface-hover:var(--n100);
  --line:var(--n200);
  --line-strong:var(--n300);
  --ink:var(--n900);
  --ink-2:var(--n700);
  --muted:var(--n500);
  --brand:var(--b600);
  --brand-hover:var(--b700);
  --brand-soft:var(--b50);
  --brand-soft-bd:var(--b200);
  --on-brand:#fff;

  /* legacy aliases — old templates still reference these names */
  --maroon:var(--b700); --maroon-dk:var(--b800); --maroon-lt:var(--b600);
  --teal:var(--b600); --teal-dk:var(--b700); --teal-lt:var(--b50);
  --accent:var(--b600); --accent-lt:var(--b300);
  --cream:var(--b50); --paper:var(--bg); --gold:var(--b500); --gold-lt:var(--b300);
  --dkbrown:var(--n800); --green:var(--ok); --green-dk:#047857; --red:var(--danger);

  /* radii */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --radius:var(--r-md);

  /* elevation — layered, low-opacity, warm-tinted */
  --sh-xs:0 1px 2px rgba(28,25,23,.05);
  --sh-sm:0 1px 3px rgba(28,25,23,.07), 0 1px 2px rgba(28,25,23,.04);
  --sh-md:0 4px 12px -2px rgba(28,25,23,.08), 0 2px 4px -1px rgba(28,25,23,.05);
  --sh-lg:0 12px 28px -6px rgba(28,25,23,.12), 0 4px 10px -4px rgba(28,25,23,.07);
  --sh-xl:0 24px 48px -12px rgba(28,25,23,.18);
  --sh-ring:0 0 0 3px var(--b100);
  /* legacy */
  --shadow:var(--sh-sm); --shadow-sm:var(--sh-xs); --shadow-md:var(--sh-sm);
  --shadow-lift:var(--sh-lg);

  /* motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.12s; --t:.18s; --t-slow:.3s;

  /* layout */
  --sidebar-w:250px;
  --topbar-h:58px;
  --content-max:1240px;

  --font:'Nirmala UI','Noto Sans Gujarati','Segoe UI Variable',system-ui,
         -apple-system,'Segoe UI',Roboto,sans-serif;
}

html.dark{
  color-scheme: dark;
  --bg:#141210;
  --surface:#1c1917;
  --surface-2:#262220;
  --surface-hover:#292524;
  --line:#312c29;
  --line-strong:#44403c;
  --ink:#f5f5f4;
  --ink-2:#d6d3d1;
  --muted:#a8a29e;
  --brand:var(--b500);
  --brand-hover:var(--b400);
  --brand-soft:rgba(249,115,22,.13);
  --brand-soft-bd:rgba(249,115,22,.3);

  --ok:#34d399;     --ok-bg:rgba(52,211,153,.12);     --ok-bd:rgba(52,211,153,.3);
  --danger:#fb7185; --danger-bg:rgba(251,113,133,.12); --danger-bd:rgba(251,113,133,.3);
  --warn:#fbbf24;   --warn-bg:rgba(251,191,36,.12);   --warn-bd:rgba(251,191,36,.3);
  --info:#38bdf8;   --info-bg:rgba(56,189,248,.12);   --info-bd:rgba(56,189,248,.3);

  --maroon:var(--b400); --maroon-dk:var(--b500); --maroon-lt:var(--b300);
  --cream:var(--surface-2); --paper:var(--bg);
  --gold:var(--b500); --gold-lt:var(--b400); --red:var(--danger); --green:var(--ok);

  --sh-xs:0 1px 2px rgba(0,0,0,.4);
  --sh-sm:0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --sh-md:0 4px 12px -2px rgba(0,0,0,.5), 0 2px 4px -1px rgba(0,0,0,.35);
  --sh-lg:0 12px 28px -6px rgba(0,0,0,.55), 0 4px 10px -4px rgba(0,0,0,.4);
  --sh-xl:0 24px 48px -12px rgba(0,0,0,.65);
  --sh-ring:0 0 0 3px rgba(249,115,22,.28);
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;line-height:1.25;letter-spacing:-.011em}
p{margin:0 0 .8em}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}
::selection{background:var(--b200);color:var(--n900)}
html.dark ::selection{background:var(--b700);color:#fff}

a{color:var(--brand);text-decoration:none;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--brand-hover)}

/* focus — visible, consistent, keyboard-only */
:focus{outline:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;
  border:3px solid var(--bg);background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--n400);background-clip:content-box;
  border:3px solid var(--bg)}

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

/* ---------------------------------------------------------------- typography */
h1{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:800}
h2{font-size:1.15rem;font-weight:700;color:var(--ink);margin:0 0 14px;letter-spacing:-.015em}
h3{font-size:1rem;font-weight:700;color:var(--ink-2);margin:0 0 8px}
h4{font-size:.9rem;font-weight:700;color:var(--ink-2)}
.mini{color:var(--muted);font-size:.82rem;line-height:1.5}
.eyebrow{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted)}
.sec-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin:26px 0 10px}
.right{text-align:right}
.center{text-align:center}
.tot{font-weight:800;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- layout */
main{max-width:var(--content-max);margin:26px auto;padding:0 18px 56px;width:100%}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.grid-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
@media(max-width:1040px){.grid-main{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.g2,.g3{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- cards */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:20px 22px;
  margin-bottom:18px;
  box-shadow:var(--sh-sm);
  transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease),
             transform var(--t) var(--ease);
}
.card:last-child{margin-bottom:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;flex-wrap:wrap}
.card-head h2,.card-head h3{margin:0}
.lift{transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out),
  border-color var(--t) var(--ease)}
.lift:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:var(--line-strong)}

/* ---------------------------------------------------------------- stat tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
  margin-bottom:4px}
.stat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:14px 16px;
  box-shadow:var(--sh-xs);
  position:relative;
  overflow:hidden;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
/*  The tiles used to carry a saffron bar each. Four of them side by side made
    the accent meaningless; the figure itself is the thing worth looking at. */
.stat::before{content:'';position:absolute;inset:auto auto 0 0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--brand),transparent 65%);opacity:0;
  transition:opacity var(--t) var(--ease)}
.stat:hover::before{opacity:.9}
.stat:hover{border-color:var(--line-strong);box-shadow:var(--sh-sm)}
.stat .l{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;line-height:1.35}
.stat .v{font-size:1.6rem;font-weight:800;color:var(--ink);margin-top:2px;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.025em;line-height:1.15}
/*  Opt-in accents for the one figure on a page that should carry weight. */
.stat.is-due .v{color:var(--danger)}
.stat.is-ok .v{color:var(--ok)}
.stat .sub{font-size:.78rem;color:var(--muted);margin-top:2px}

/* ---------------------------------------------------------------- tables */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem}
th{background:var(--surface-2);color:var(--ink-2);padding:9px 12px;text-align:left;
  font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:2}
td{border-bottom:1px solid var(--line);padding:8px 12px;vertical-align:middle;
  line-height:1.4}
tbody tr{transition:background var(--t-fast) var(--ease)}
tbody tr:hover td{background:var(--surface-hover)}
tbody tr:last-child td{border-bottom:0}

/*  A ledger is read by scanning columns, so numbers line up and share one
    weight. Money was previously set in red wherever it was outstanding —
    a whole column of red trains people to ignore red, so the emphasis is
    carried by weight here and colour is saved for genuine alerts. */
td.right,th.right{text-align:right;font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:0}
td.num,td.right b,.amt{font-variant-numeric:tabular-nums lining-nums;font-weight:700;
  color:var(--ink)}
/*  A date is one token; letting "2026-09-06" break across two lines doubled
    the height of every row it appeared in. */
td.date,.nowrap{white-space:nowrap}
.amt-due{color:var(--ink);font-weight:800}
.amt-nil{color:var(--muted);font-weight:600}

/*  Names in a table are links; styling every one in brand orange turned the
    first column into a wall of colour. They read as text and reveal
    themselves on hover instead. */
tbody td a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
tbody td a:hover{color:var(--brand-hover);border-bottom-color:currentColor}
tbody td a b,tbody td b a{font-weight:700}
/* unread notification rows — carried over from the previous stylesheet */
tbody tr.unread td{background:var(--brand-soft)}
tbody tr.unread td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
tbody tr.unread:hover td{background:var(--b100)}
html.dark tbody tr.unread:hover td{background:rgba(249,115,22,.18)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
/* narrow screens: scroll the table instead of blowing out the page width */
@media(max-width:720px){
  .card>table{display:block;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch}
}

/* ---------------------------------------------------------------- forms */
label{display:block;font-size:.78rem;font-weight:700;color:var(--ink-2);
  margin-bottom:5px;letter-spacing:.01em}
input,select,textarea{
  width:100%;
  padding:8px 11px;
  min-height:38px;
  font-size:.9rem;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
  appearance:none;
}
textarea{min-height:88px;resize:vertical;line-height:1.55}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2378716c' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;
}
input::placeholder,textarea::placeholder{color:var(--n400)}
input:hover,select:hover,textarea:hover{border-color:var(--n400)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:var(--sh-ring)}
/* The rule above sets appearance:none for text inputs and selects. A checkbox
   or radio with appearance:none loses its tick entirely and renders as an empty
   box, so it must be restored here along with the borders/background the
   generic rule applied. accent-color then tints the native control. */
input[type=checkbox],input[type=radio]{
  appearance:auto;
  -webkit-appearance:auto;
  -moz-appearance:auto;
  width:17px;height:17px;min-height:0;padding:0;
  border:0;background:none;border-radius:0;box-shadow:none;
  accent-color:var(--brand);cursor:pointer;
  vertical-align:-3px;flex:0 0 auto;
}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;
}
input[type=checkbox]:disabled,input[type=radio]:disabled{
  cursor:not-allowed;opacity:.45;
}
input[type=file]{padding:8px 12px;cursor:pointer}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);
  color:var(--muted);cursor:not-allowed}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;
  cursor:pointer;color:var(--ink-2)}
.chk input{width:18px;height:18px;min-height:0}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--brand);
  color:var(--on-brand);
  border:1px solid transparent;
  border-radius:var(--r-sm);
  padding:9px 16px;
  min-height:38px;
  font-weight:700;
  font-size:.875rem;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:var(--sh-xs);
  transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.btn:hover{background:var(--brand-hover);color:var(--on-brand);box-shadow:var(--sh-sm);
  transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none;
  box-shadow:none}
/* variants keep the legacy short class names used across templates */
.btn.g{background:var(--ok);color:#fff}
.btn.g:hover{background:#0f766e;color:#fff}
/*  .o is the delete button on 26 of its ~33 uses. Solid amber made every
    🗑 as loud as the primary action beside it and read as a warning rather
    than a deletion. It is now unmistakably destructive but quiet until
    reached for. */
.btn.o{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bd);
  box-shadow:none}
.btn.o:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.o:focus-visible{outline-color:var(--danger)}
.btn.s,.btn.ghost{background:var(--surface);color:var(--ink-2);border-color:var(--line-strong)}
.btn.s:hover,.btn.ghost:hover{background:var(--surface-hover);color:var(--ink);
  border-color:var(--n400)}
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{background:#be123c;color:#fff}
.btn.accent{background:var(--b500);color:#fff}
.btn.accent:hover{background:var(--b600);color:#fff}
.btn.soft{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-soft-bd);
  box-shadow:none}
.btn.soft:hover{background:var(--b100);color:var(--brand-hover)}
.btn.sm{padding:6px 12px;min-height:34px;font-size:.8rem;border-radius:var(--r-xs);gap:5px}
.btn.lg{padding:13px 26px;min-height:50px;font-size:1rem;border-radius:var(--r-md)}
.btn.block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ---------------------------------------------------------------- pills / chips / badges */
.pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--r-full);
  font-size:.74rem;font-weight:800;line-height:1.6;
  background:var(--surface-2);color:var(--muted);border:1px solid transparent;
  white-space:nowrap;
}
.pill.paid{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bd)}
.pill.baki{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bd)}
.pill.date{background:var(--info-bg);color:var(--info);border-color:var(--info-bd)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;
  border-radius:var(--r-full);background:var(--surface);border:1px solid var(--line-strong);
  font-size:.82rem;font-weight:600;color:var(--ink-2);cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);text-decoration:none}
.chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.badge{display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;border-radius:var(--r-full);
  padding:1px 7px;min-width:19px;height:19px;font-size:.68rem;font-weight:800;
  font-variant-numeric:tabular-nums;line-height:1}
.role-chip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--r-full);
  background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand-soft-bd);
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted)}
.dot.ev{background:var(--brand)}

/* ---------------------------------------------------------------- flash / notes */
.flash{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--ok-bg);border:1px solid var(--ok-bd);color:var(--ok);
  padding:12px 16px;border-radius:var(--r-md);margin-bottom:14px;
  font-weight:600;font-size:.9rem;box-shadow:var(--sh-xs);
  animation:flashIn .35s var(--ease-out);
}
@keyframes flashIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.note{background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:var(--r-md);
  padding:12px 15px;font-size:.87rem;margin:12px 0;color:var(--ink-2)}
/*  "Nothing here yet" was taking 150px of vertical space on the portal home,
    pushing real content down for no information at all. */
.empty-state{text-align:center;padding:22px 20px;color:var(--muted)}
.empty-state .ico{font-size:1.7rem;opacity:.45;margin-bottom:6px;line-height:1}
.empty-state h3{color:var(--ink-2);margin-bottom:2px;font-size:.95rem}
.count-note{font-size:.8rem;color:var(--muted);font-weight:600}

/* ---------------------------------------------------------------- misc legacy */
.vhead{background:var(--brand-soft);border-left:3px solid var(--brand);
  padding:11px 16px;margin:24px 0 12px;font-weight:800;color:var(--ink);
  font-size:1rem;border-radius:0 var(--r-sm) var(--r-sm) 0}
.sheetrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px;border-bottom:1px solid var(--line);border-radius:var(--r-sm);
  transition:background var(--t-fast) var(--ease)}
.sheetrow:last-child{border-bottom:0}
.sheetrow:hover{background:var(--surface-hover)}
.sheetrow a{font-weight:700;color:var(--ink)}
.sheetrow a:hover{color:var(--brand)}
.avatar{width:44px;height:44px;object-fit:cover;border-radius:50%;
  border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);
  background:var(--surface-2)}
.progress-track{background:var(--surface-2);border-radius:var(--r-full);height:8px;
  overflow:hidden;border:1px solid var(--line)}
.progress-fill{background:linear-gradient(90deg,var(--b400),var(--b600));height:100%;
  border-radius:var(--r-full);transition:width .5s var(--ease-out)}
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px}
.filter-bar input,.filter-bar select{width:auto;min-width:180px;flex:1 1 180px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs a{padding:10px 16px;font-weight:700;font-size:.88rem;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}
.celeb-row{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.celeb-row:last-child{border-bottom:0}
.code-sub{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;
  font-weight:600;letter-spacing:.02em}
.split-hint{font-size:.8rem;color:var(--muted)}
.rowlabel{font-weight:700;color:var(--ink-2);font-size:.85rem}

/* ---------------------------------------------------------------- portal shell */
.portal-shell{display:flex;align-items:flex-start;min-height:100vh;background:var(--bg)}
.portal-sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--surface);border-right:1px solid var(--line);
  height:100vh;position:sticky;top:0;
  padding:14px 12px 20px;
  overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:2px;
  z-index:60;
  transition:transform var(--t-slow) var(--ease-out);
}
.portal-sidebar .brand{
  display:flex;align-items:center;gap:9px;
  padding:8px 12px 16px;font-weight:800;font-size:1rem;color:var(--ink);
  border-bottom:1px solid var(--line);margin-bottom:12px;letter-spacing:-.015em;
}
.portal-sidebar .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-link{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--r-sm);
  color:var(--ink-2);font-weight:600;font-size:.875rem;
  position:relative;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.sidebar-link:hover{background:var(--surface-hover);color:var(--ink)}
.sidebar-link.on{background:var(--brand-soft);color:var(--brand);font-weight:700}
.sidebar-link.on::before{content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:3px;height:18px;border-radius:0 3px 3px 0;
  background:var(--brand)}
.sidebar-link .badge{margin-left:auto}
.sidebar-group{
  display:flex;align-items:center;gap:6px;
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);padding:16px 12px 6px;cursor:pointer;user-select:none;
}
.sidebar-group .chev{margin-left:auto;transition:transform var(--t) var(--ease);
  font-size:.8rem}
.sidebar-group.collapsed .chev{transform:rotate(-90deg)}
.community-group{display:flex;flex-direction:column;gap:2px;overflow:hidden;
  max-height:1400px;transition:max-height var(--t-slow) var(--ease)}
.community-group.collapsed{max-height:0}

.portal-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:100vh}
.portal-topbar{
  display:flex;align-items:center;gap:8px;
  height:var(--topbar-h);padding:0 16px;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
@supports not (backdrop-filter:blur(1px)){.portal-topbar{background:var(--surface)}}
.portal-topbar .ttl{font-weight:800;font-size:.95rem;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:auto;
  letter-spacing:-.015em}
.portal-body{flex:1 1 auto;max-width:var(--content-max);width:100%;margin:0 auto;
  padding:22px 20px 60px}
.nav-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:0 0 36px;border-radius:var(--r-sm);
  background:transparent;border:1px solid transparent;color:var(--ink-2);
  font-size:1rem;cursor:pointer;text-decoration:none;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.nav-ico:hover{background:var(--surface-hover);color:var(--ink)}
.sidebar-toggle{display:none}
.dark-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:0 0 36px;border-radius:var(--r-full);
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
  cursor:pointer;font-size:.95rem;line-height:1;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.dark-toggle:hover{background:var(--surface-hover);transform:scale(1.06)}
.lang-toggle{
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
  border-radius:var(--r-full);padding:6px 14px;min-height:34px;
  font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.lang-toggle:hover{background:var(--surface-hover);color:var(--ink)}

/* sidebar scrim (mobile drawer) */
.sidebar-scrim{
  position:fixed;inset:0;background:rgba(28,25,23,.45);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  z-index:55;opacity:0;pointer-events:none;
  transition:opacity var(--t) var(--ease);
}
body.nav-open .sidebar-scrim{opacity:1;pointer-events:auto}

/* account dropdown */
.account-menu{position:relative;flex:0 0 auto}
.account-menu>summary{
  display:flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:var(--r-full);
  background:var(--surface-2);border:1px solid var(--line);
  font-size:.83rem;font-weight:700;color:var(--ink-2);
  cursor:pointer;list-style:none;white-space:nowrap;
  transition:background var(--t-fast) var(--ease);
}
.account-menu>summary::-webkit-details-marker{display:none}
.account-menu>summary:hover{background:var(--surface-hover)}
.account-menu .acct-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.account-menu .dropdown{
  position:absolute;right:0;top:calc(100% + 8px);
  min-width:210px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:6px;z-index:70;
  display:flex;flex-direction:column;gap:2px;
  animation:dropIn .16s var(--ease-out);
}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.account-menu .dropdown a{
  display:block;padding:9px 12px;border-radius:var(--r-xs);
  font-size:.87rem;font-weight:600;color:var(--ink-2);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.account-menu .dropdown a:hover{background:var(--surface-hover);color:var(--ink)}

/* password reminder strip */
.pw-strip,.pw-banner{
  display:flex;align-items:center;gap:10px;
  background:var(--warn-bg);border:1px solid var(--warn-bd);
  color:var(--ink-2);padding:11px 15px;border-radius:var(--r-md);
  font-size:.87rem;font-weight:600;margin-bottom:16px;
}
.pw-strip .x{margin-left:auto;cursor:pointer;color:var(--muted);
  font-size:.9rem;padding:2px 6px;border-radius:var(--r-xs)}
.pw-strip .x:hover{background:var(--surface-hover);color:var(--ink)}

/* ---------------------------------------------------------------- public site */
.top{background:var(--surface);border-bottom:1px solid var(--line);
  padding:22px 20px 18px;text-align:center}
.top h1{color:var(--ink);font-size:clamp(1.2rem,1rem + 1.1vw,1.6rem);font-weight:800;
  letter-spacing:-.02em}
.top .sub{color:var(--muted);font-size:.86rem;margin-top:5px;font-weight:600}
nav{
  display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center;
  padding:9px 14px;
  background:color-mix(in srgb, var(--surface) 85%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
@supports not (backdrop-filter:blur(1px)){nav{background:var(--surface)}}
nav a{color:var(--ink-2);padding:8px 14px;border-radius:var(--r-sm);font-weight:600;
  font-size:.86rem;transition:background var(--t-fast) var(--ease),
  color var(--t-fast) var(--ease)}
nav a:hover{background:var(--surface-hover);color:var(--ink)}
nav a.on{background:var(--brand-soft);color:var(--brand);font-weight:700}
nav .lang-toggle{margin-left:auto}

.hero{
  background:linear-gradient(150deg,var(--b800) 0%,var(--b700) 45%,var(--b900) 100%);
  color:#fff;border-radius:var(--r-xl);padding:clamp(40px,7vw,72px) 26px;
  text-align:center;position:relative;overflow:hidden;
  box-shadow:var(--sh-xl);margin-bottom:22px;
}
.hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 15%,rgba(253,186,116,.22),transparent 55%),
             radial-gradient(ellipse at 82% 88%,rgba(251,146,60,.18),transparent 52%);
  pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero h1{font-size:clamp(1.7rem,1.2rem + 2.4vw,2.6rem);margin:0 0 12px;font-weight:800;
  letter-spacing:-.025em;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.hero .sub1{font-size:clamp(1rem,.9rem + .5vw,1.2rem);color:var(--b200);
  margin-bottom:10px;font-weight:600}
.hero .tagline{font-size:1rem;color:rgba(255,255,255,.88);max-width:600px;margin:0 auto;
  line-height:1.65}
.hero .cta,.hero-cta{margin-top:28px;display:flex;gap:12px;justify-content:center;
  flex-wrap:wrap}
.hero .btn{background:#fff;color:var(--b800);border-color:transparent;
  padding:12px 26px;min-height:48px;font-size:.95rem}
.hero .btn:hover{background:var(--b50);color:var(--b900);transform:translateY(-2px);
  box-shadow:var(--sh-lg)}
.hero .btn.ghost{background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.4)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.2);color:#fff}
.hero img{border-radius:var(--r-lg);margin:26px auto 0;box-shadow:var(--sh-xl)}

/*  The portal home used to open with a full-width saturated orange slab. It
    dominated a page whose actual job is showing figures, and pushed the real
    content below the fold. This keeps the saffron as a bright edge and a
    tint, and gives the greeting the weight it deserves — no more. */
.hero-band{
  background:
    linear-gradient(180deg,var(--b50),var(--surface) 70%);
  color:var(--ink);
  border:1px solid var(--brand-soft-bd);
  border-left:4px solid var(--brand);
  border-radius:var(--r-lg);
  padding:20px 24px;margin-bottom:18px;
  position:relative;overflow:hidden;box-shadow:var(--sh-xs);
}
.hero-band::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 92% 0%,var(--b100),transparent 60%);
  opacity:.7;pointer-events:none}
.hero-band>*{position:relative;z-index:1}
.hero-band h1,.hero-band h2{color:var(--ink);margin:0 0 4px;
  font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem);letter-spacing:-.02em}
.hero-band .eyebrow{color:var(--brand-hover)}
.hero-band .mini{color:var(--muted)}
.hero-band.banner{padding:0;min-height:180px;display:flex;align-items:flex-end}
html.dark .hero-band{background:linear-gradient(180deg,var(--brand-soft),var(--surface) 70%)}
html.dark .hero-band::before{opacity:.35}

.site-footer{background:var(--surface);border-top:1px solid var(--line);
  margin-top:40px;padding:40px 20px 0}
.site-footer-grid{max-width:var(--content-max);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px}
.site-footer-grid h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin:0 0 12px;font-weight:800}
.site-footer-grid a{display:block;padding:4px 0;color:var(--ink-2);font-size:.87rem;
  font-weight:600}
.site-footer-grid a:hover{color:var(--brand)}
.ft-brand{font-weight:800;font-size:1rem;color:var(--ink);letter-spacing:-.015em}
.ft-social{display:flex;gap:8px;margin-top:12px}
.ft-social a{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line);
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.ft-social a:hover{transform:translateY(-2px);background:var(--brand-soft)}
.site-footer-bottom{max-width:var(--content-max);margin:32px auto 0;padding:18px 0 24px;
  border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.82rem}
.footer-strip{text-align:center;padding:24px 16px;color:var(--muted);font-size:.83rem}

/* PWA install prompt */
.install-card{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  max-width:460px;margin:0 auto;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:14px 16px;
  box-shadow:var(--sh-xl);font-size:.88rem;font-weight:600;
  animation:slideUp .3s var(--ease-out);
}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* calendar */
.cal-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-sm)}
.cal-head{display:flex;align-items:center;justify-content:space-between;
  font-weight:800;margin-bottom:12px;color:var(--ink)}
/* the month grid is a real <table class="cal"> — these selectors match that
   markup (td.is-today / .dnum / .dots), not a generic grid */
table.cal{width:100%;border-collapse:collapse;font-size:.8rem;table-layout:fixed}
table.cal th{border:0;background:transparent;text-align:center;padding:4px 0;
  font-size:.64rem;font-weight:800;color:var(--muted);letter-spacing:.05em;
  text-transform:uppercase}
table.cal td{border:0;text-align:center;padding:3px 0;height:34px;vertical-align:top}
table.cal tbody tr:hover td{background:transparent}
.cal .dnum{display:inline-block;font-size:.8rem;line-height:24px;width:26px;height:26px;
  border-radius:50%;color:var(--ink-2);transition:background var(--t-fast) var(--ease)}
.cal td:not(.blank):hover .dnum{background:var(--surface-hover)}
.cal td.is-today .dnum{background:var(--brand);color:#fff;font-weight:800}
.cal .dots{display:block;height:6px;line-height:0;margin-top:1px}
.cal .dot{width:5px;height:5px;margin:0 1px}
.dot.trip{background:var(--warn)}
.dot.bday{background:var(--danger)}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:.74rem;
  color:var(--muted);align-items:center}
.cal-legend .dot{width:6px;height:6px;margin-right:2px}

/* preferences */
.pref-box{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  margin-bottom:12px;background:var(--surface)}
.pref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;padding:14px}

/* letterhead (print statements) */
.letterhead{text-align:center;border-bottom:2px solid var(--ink);padding-bottom:12px;
  margin-bottom:18px}

/* ---------------------------------------------------------------- responsive */
@media(max-width:960px){
  :root{--sidebar-w:270px}
  .portal-sidebar{
    position:fixed;top:0;left:0;bottom:0;height:100dvh;
    transform:translateX(-100%);box-shadow:var(--sh-xl);
  }
  .portal-sidebar.open{transform:translateX(0)}
  .sidebar-toggle{display:inline-flex}
  .portal-body{padding:18px 16px 72px}
  .portal-topbar{padding:0 12px}
  .account-menu .acct-name{display:none}
}
@media(max-width:640px){
  body{font-size:14.5px}
  main{margin:16px auto;padding:0 14px 48px}
  .card{padding:16px;border-radius:var(--r-md)}
  .stat{padding:12px 14px}
  .stat .v{font-size:1.3rem}
  .btn{padding:9px 15px;font-size:.86rem}
  .hero{padding:38px 20px;border-radius:var(--r-lg)}
  .hero-band{padding:20px;border-radius:var(--r-md)}
  .portal-topbar .ttl{font-size:.85rem}
  .install-card{left:10px;right:10px;bottom:10px}
  .filter-bar input,.filter-bar select{min-width:0;flex:1 1 100%}
  /* the account menu ran off the right edge of a phone, making every page
     scroll sideways */
  .account-menu .role-chip{display:none}
  .portal-topbar{gap:6px}
  .portal-topbar .ttl{display:none}
}

/* ---------------------------------------------------------------- print */
@media print{
  .no-print,.noprint,nav,.portal-sidebar,.portal-topbar,.site-footer,.install-card,
  .sidebar-scrim,.btn,.dark-toggle,.lang-toggle,.tabs{display:none !important}
  body{background:#fff;color:#000;font-size:12px}
  .portal-shell{display:block}
  .portal-body,main{max-width:none;padding:0;margin:0}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid;
    page-break-inside:avoid;margin-bottom:12px}
  a{color:#000;text-decoration:none}
  th{background:#f2f2f2 !important;color:#000 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-row,.sign,.tick{break-inside:avoid}
}

/* ---- member name suggestions (memac.js) -------------------------------
   Rendered on <body> rather than inside the row, because on small screens
   `.card>table` scrolls horizontally and would clip a menu nested in a cell. */
.memac{position:absolute;z-index:200;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:0 8px 24px rgba(0,0,0,.16);max-height:280px;
  overflow-y:auto;font-size:.86rem;min-width:220px}
.memac-item{padding:7px 10px;cursor:pointer;display:flex;flex-direction:column;gap:1px;
  border-bottom:1px solid var(--line)}
.memac-item:last-child{border-bottom:0}
.memac-item.on,.memac-item:hover{background:var(--brand-bg,var(--surface-2))}
.memac-k{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}

/*  Safety net for the dense action tables: if a row's controls are wider than
    the card, scroll inside the card rather than letting the last control —
    which is usually the save button — sit outside the viewport unreachable. */
.card>table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.card>table>thead,.card>table>tbody{display:table;width:100%;min-width:max-content}

/* ============================================================ jain motifs
   The portal is a sangh's, not a bank's. These give it that without getting
   in the way of the figures: an emblem instead of an emoji, a toran over the
   hero the way a doorway is dressed for a parva, and a lotus watermark. All
   of it is decoration — every one of these is aria-hidden or role=img with a
   label, and none carries information that is not also in text.
   ========================================================================= */
.jain-mark{display:block;width:34px;height:auto;color:var(--brand);flex:0 0 auto}
.portal-sidebar .brand .jain-mark{width:22px}
.nk-hero .jain-mark{margin:0 auto}

/* તોરણ — a strung line of mango leaves. Tiles horizontally to any width. */
.toran{height:22px;background:url(toran.svg) repeat-x left top;
  background-size:auto 22px;pointer-events:none}
.hero .toran,.hero-band .toran,.nk-hero .toran{position:absolute;left:0;right:0;top:0;
  z-index:2}
.hero .toran{filter:brightness(1.7) saturate(.7)}
/* only the banners that actually carry one make room for it */
.with-toran{padding-top:40px}

/* કમળ watermark — behind the text, never over it */
.lotus-wm{position:absolute;right:-16px;bottom:-30px;width:200px;height:auto;
  color:var(--brand);opacity:.085;pointer-events:none;z-index:0}
.hero .lotus-wm{color:#fff;opacity:.12}
html.dark .lotus-wm{opacity:.12}

/* આજનો સુવિચાર */
.suvichar{border-left:4px solid var(--brand);background:var(--brand-soft);
  border-radius:var(--r-sm);padding:14px 16px}
.suvichar .q{font-size:1.08rem;font-weight:700;line-height:1.85;color:var(--b800)}
.suvichar .m{font-size:.9rem;color:var(--ink-2);margin-top:5px;line-height:1.7}
.suvichar .s{font-size:.76rem;color:var(--muted);margin-top:6px;font-weight:700;
  text-transform:none;letter-spacing:.02em}
html.dark .suvichar .q{color:var(--b200)}

/* આગામી પર્વ */
.parva-list{display:grid;gap:8px}
.parva{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.parva.soon{border-color:var(--brand-soft-bd);background:var(--brand-soft)}
.parva.today{border-color:var(--brand);box-shadow:var(--sh-sm)}
.parva .d{flex:0 0 58px;text-align:center;border-right:1px solid var(--line);
  padding-right:10px;line-height:1.1}
.parva .d b{display:block;font-size:1.45rem;font-weight:800;color:var(--brand);
  font-variant-numeric:tabular-nums}
.parva .d span{font-size:.66rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em}
.parva .n{font-weight:700;line-height:1.4}
.parva .t{font-size:.8rem;color:var(--muted)}

/* તિથિ chip in the topbar — small, and gone on a phone */
.tithi-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border-radius:var(--r-full);background:var(--brand-soft);color:var(--b700);
  border:1px solid var(--brand-soft-bd);font-size:.78rem;font-weight:700;
  text-decoration:none;white-space:nowrap}
.tithi-chip:hover{background:var(--b100);color:var(--b800)}
.tithi-chip .jain-mark{width:11px;opacity:.85}
@media (max-width:900px){.tithi-chip{display:none}}

/* -------------------------------------------------- dashboard calendar */
/* tithi label inside a day cell — small enough not to fight the date number */
.cal .tt{display:block;font-size:.58rem;line-height:1;color:var(--muted);
  margin-top:1px}
.cal td.holy .dnum{box-shadow:0 0 0 1.5px var(--brand-soft-bd)}
.cal td.holy .tt{color:var(--brand-hover);font-weight:700}
.dot.kaly{background:var(--brand)}
.dot.prv{background:#a855f7}

.jain-month{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);
  display:grid;gap:8px;max-height:260px;overflow-y:auto}
.jain-month .r{display:flex;gap:10px;align-items:flex-start;font-size:.8rem}
.jain-month .r.pv{font-weight:700}
.jain-month .dd{flex:0 0 24px;height:24px;border-radius:50%;background:var(--brand-soft);
  color:var(--b700);font-weight:800;font-size:.72rem;display:flex;align-items:center;
  justify-content:center}
.jain-month .r.pv .dd{background:#f3e8ff;color:#7e22ce}
.jain-month .nm{color:var(--ink)}
.jain-month .tf{display:block;color:var(--muted);font-size:.72rem}

/* દર્શન · પૂજા · આરતી card */
.darshan-card{border-color:var(--brand-soft-bd);background:var(--brand-soft)}
.darshan-row{display:flex;gap:22px;flex-wrap:wrap}
.darshan-row .dt{display:flex;flex-direction:column;gap:2px}
.darshan-row .dt .l{font-size:.74rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em}
.darshan-row .dt b{font-size:1.05rem;color:var(--b700)}
html.dark .darshan-row .dt b{color:var(--b200)}

/* -------------------------------------------------------- paryushan band */
.pry-band{border-radius:var(--r-md);padding:14px 18px;margin-bottom:16px;
  background:linear-gradient(135deg,var(--b600),var(--b700));color:#fff;
  box-shadow:var(--sh-sm)}
.pry-band.soon{background:var(--brand-soft);color:var(--b800);
  border:1px solid var(--brand-soft-bd);box-shadow:none}
.pry-band.samvatsari{background:linear-gradient(135deg,#7c2d12,#431407)}
.pry-title{font-weight:800;font-size:1.02rem}
.pry-sub{font-size:.85rem;opacity:.92;margin-top:4px}
.pry-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.28);
  overflow:hidden;margin-top:9px}
.pry-bar>i{display:block;height:100%;background:#fff;border-radius:99px;
  transition:width .4s var(--ease)}

/* --------------------------------------------------- paryushan site tint
   A quiet shift, not a costume change: brand tokens warm a few steps deeper
   so the whole site reads "festival" without any component needing its own
   special-case CSS. Contrast against --on-brand (#fff) stays comfortably
   within AA at every step used here.

   Dark mode gets its OWN deeper-orange values rather than inheriting the
   light-mode ones: html.dark already sets --brand once for legibility
   against a near-black page, and re-darkening it further (as the light-mode
   samvatsari maroon would) reads as muddy rather than festive. */
html[data-pry="active"]{
  --brand:var(--b700); --brand-hover:var(--b800);
  --brand-soft:var(--b100); --brand-soft-bd:var(--b300);
}
html[data-pry="samvatsari"]{
  --brand:#7c2d12; --brand-hover:#431407;
  --brand-soft:#fef2f2; --brand-soft-bd:#fecaca;
}
html.dark[data-pry="active"]{
  --brand:var(--b600); --brand-hover:var(--b500);
  --brand-soft:rgba(194,65,12,.22); --brand-soft-bd:rgba(194,65,12,.45);
}
html.dark[data-pry="samvatsari"]{
  --brand:#f97316; --brand-hover:#fb923c;
  --brand-soft:rgba(124,45,18,.35); --brand-soft-bd:rgba(249,115,22,.4);
}

/* -------------------------------------------------------------- aarti pin */
.aarti-pin{border-color:var(--brand-soft-bd);background:var(--brand-soft);margin-bottom:14px}
.aarti-pin.now{border-color:var(--danger-bd);background:var(--danger-bg);box-shadow:var(--sh-sm)}
.pill.live-now{background:var(--danger);color:#fff;font-weight:800;animation:aartipulse 1.6s ease-in-out infinite}
@keyframes aartipulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){.pill.live-now{animation:none}}

/* ---------------------------------------------------- sutra cards (shared)
   Used by the pachchakkhaan list (panchang.html) and the pratikraman page —
   moved here instead of staying duplicated per-page inline <style>. */
.sutlist{display:grid;gap:10px}
.sut{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.sut[open]{border-color:var(--brand-soft-bd);box-shadow:var(--sh-sm)}
.sut > summary{list-style:none;cursor:pointer;padding:11px 14px;display:flex;gap:10px;
  align-items:center;flex-wrap:wrap;user-select:none}
.sut > summary::-webkit-details-marker{display:none}
.sut > summary::after{content:'▾';margin-left:auto;opacity:.5;transition:transform .15s}
.sut[open] > summary::after{transform:rotate(180deg)}
.sut > summary:hover{background:var(--surface-hover)}
.sut > summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.sut .sn{font-weight:800}
.sut .stm{font-variant-numeric:tabular-nums;font-weight:800;color:var(--brand);white-space:nowrap}
.sut.now{border-color:var(--brand);box-shadow:var(--sh-md)}
.sut.done .sn{opacity:.55}
.sbody{padding:2px 14px 14px;border-top:1px dashed var(--line)}
.sguj{font-size:1.1rem;line-height:2.05;margin:12px 0 6px}
.sut.zoom .sguj{font-size:1.55rem;line-height:2.1}
.srom{margin:0 0 9px;color:var(--muted);font-style:italic;line-height:1.7}
.smean{background:var(--surface-2);border-radius:var(--r-xs);padding:9px 11px;font-size:.9rem;
  line-height:1.75}
.srow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:11px}
.sut .btn.playing{background:var(--ok);color:#fff;border-color:var(--ok)}
.sut .about{font-size:.82rem;color:var(--muted);margin:2px 0 0}

/* ------------------------------------------------- "કેટલા મળ્યા?" hint line
   Sits under the amount box in the ✔ મળેલ popover and says, before saving,
   what the typed figure will actually do to the entry. */
.amt-hint{margin-top:3px;line-height:1.45;max-width:230px;white-space:normal}
.amt-hint.ok{color:var(--ok);font-weight:700}
.amt-hint.warn{color:var(--warn)}
.amt-hint.bad{color:var(--danger);font-weight:700}
.paidform .paid-amt:focus{outline:2px solid var(--brand);outline-offset:1px}

/* ------------------------------------------------------- હપ્તા (instalments)
   The receipt log under an entry's status pill — one line per part payment,
   each removable if it was typed wrong. */
.paylog{margin-top:3px}
.paylog > summary{cursor:pointer;list-style:none;color:var(--brand);font-weight:700}
.paylog > summary::-webkit-details-marker{display:none}
.paylog > summary::before{content:'▸ ';font-size:.8em}
.paylog[open] > summary::before{content:'▾ '}
.payrow{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:4px 7px;margin-top:3px;border-radius:var(--r-xs);background:var(--surface-2);
  font-size:.8rem;white-space:nowrap}
.payrow form{display:inline}
.paidform[hidden]{display:none!important}
.payrow .btn{padding:1px 7px;min-height:22px;font-size:.72rem}

/* ------------------------------------------------------------ table search
   The filter bar above a long chopdo sheet. The count doubles as a running
   total of whatever is currently showing, which is what a trustee filtering
   by "બાકી" actually wants to know. */
.tbl-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.tbl-search{flex:1 1 320px;min-width:220px;padding:10px 13px;font-size:.92rem;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface)}
.tbl-search:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.tbl-count{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap;font-weight:700}
.tbl-count.filtered{color:var(--brand)}
.tbl-chip{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
  border-radius:var(--r-full);padding:5px 14px;font-size:.8rem;font-weight:700;cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.tbl-chip:hover{background:var(--surface-hover);color:var(--ink)}
.tbl-chip.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}

/* ============================================================================
   જૈન ઓળખ — icons, parva dressing, and ledger paper
   ----------------------------------------------------------------------------
   Three things the portal was missing visually: a drawn icon vocabulary of its
   own, any acknowledgement that a parva is happening, and a ચોપડો that looks
   like a ચોપડો.
   ========================================================================== */

/* ---------------------------------------------------------------- icons */
/*  One weight, one box, always currentColor — so an icon in the sidebar, on a
    dark button and inside a warning pill all look like the same family. The
    emoji these replaced were drawn by the OS, so the portal changed character
    from machine to machine and lost the Gujarati/devotional register entirely. */
.ic{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.18em;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;
  stroke-linejoin:round}
.ic.lg{width:1.5em;height:1.5em}
.sidebar-link .ic{width:1.2em;height:1.2em;opacity:.82}
.sidebar-link.on .ic,.sidebar-link:hover .ic{opacity:1}

/* ------------------------------------------------------- parva dressing */
/*  The panchang already knows what day it is in the Jain calendar; until now
    nothing on screen did. During a parva the accent shifts and a તોરણ hangs
    across the top — the same welcome a દેરાસર gets. Deliberately restrained:
    tokens move, layout does not, so nothing reflows and no page breaks. */
body[data-parva]{--brand:var(--parva-ink);--brand-hover:var(--parva-ink-dk);
  --brand-soft:var(--parva-soft);--brand-soft-bd:var(--parva-soft-bd)}
body[data-parva="paryushan"]{--parva-ink:#9a3412;--parva-ink-dk:#7c2d12;
  --parva-soft:#fff7ed;--parva-soft-bd:#fed7aa}
body[data-parva="diwali"]{--parva-ink:#a16207;--parva-ink-dk:#854d0e;
  --parva-soft:#fefce8;--parva-soft-bd:#fde68a}
body[data-parva="oli"]{--parva-ink:#0f766e;--parva-ink-dk:#115e59;
  --parva-soft:#f0fdfa;--parva-soft-bd:#99f6e4}
body[data-parva="kalyanak"]{--parva-ink:#7e22ce;--parva-ink-dk:#6b21a8;
  --parva-soft:#faf5ff;--parva-soft-bd:#e9d5ff}

.parva-band{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:7px 16px 9px;background:var(--parva-soft,var(--b50));
  border-bottom:1px solid var(--parva-soft-bd,var(--b200));
  color:var(--parva-ink,var(--b800));font-size:.86rem;font-weight:700;
  text-align:center;position:relative}
.parva-band .toran{position:absolute;left:0;right:0;top:0;height:14px;opacity:.5}
.parva-band .ic{opacity:.9}
.parva-band .sub{font-weight:600;opacity:.8}
@media print{.parva-band{display:none}}

/* -------------------------------------------------------- ledger paper */
/*  A trustee has kept the સંઘ's accounts on ruled paper their whole life. The
    ચોપડો pages were correct but looked like a spreadsheet; this gives them the
    cream ground, the hairline rules, the red margin and the double-ruled total
    of the book they already know. Structure is untouched — it is the same
    table, wearing the right clothes. */
.ledger-paper{background:#fffdf7;border:1px solid #e6dcc6;border-radius:var(--r-sm);
  position:relative;overflow:hidden}
.ledger-paper::before{content:"";position:absolute;top:0;bottom:0;left:38px;width:1px;
  background:#e4b4a4;opacity:.75;pointer-events:none}
.ledger-paper table{width:100%;border-collapse:collapse;background:transparent}
.ledger-paper thead th{background:#f7efdd;color:#6b5636;border-bottom:1.5px solid #d8c7a4;
  font-size:.72rem;letter-spacing:.4px;text-transform:uppercase;font-weight:700;
  padding:7px 10px;text-align:left}
.ledger-paper tbody td{border-bottom:1px solid #eadfc7;padding:6px 10px;
  font-variant-numeric:tabular-nums}
.ledger-paper tbody tr:hover{background:#fdf6e6}
.ledger-paper td.num,.ledger-paper th.num{text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger-paper tfoot td{background:#f7efdd;font-weight:800;padding:8px 10px;
  border-top:1.5px solid #8a7a56;border-bottom:3px double #8a7a56}
.ledger-paper td:first-child{padding-left:14px}
/*  The first column sits inside the red margin, the way a hand-written serial
    number does. */
.ledger-paper .ser{width:28px;color:#a9967a;text-align:right;padding-right:12px;
  font-size:.8rem}
@media print{
  .ledger-paper{background:#fff;border-color:#bbb}
  .ledger-paper::before{background:#c66;opacity:.6}
  .ledger-paper thead th,.ledger-paper tfoot td{background:#f2f2f2 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---- the new pieces, in dark ------------------------------------------- */
/*  Ledger paper is cream-on-warm by design, which is exactly wrong on a dark
    screen. Same structure, inverted ground: the rules and the red margin stay,
    so it still reads as a ચોપડો rather than turning back into a spreadsheet. */
html.dark .ledger-paper{background:#1a1613;border-color:#3a322a}
html.dark .ledger-paper::before{background:#8c4a3c;opacity:.85}
html.dark .ledger-paper thead th{background:#241e19;color:#c9b894;border-bottom-color:#4a3f33}
html.dark .ledger-paper tbody td{border-bottom-color:#2e2721}
html.dark .ledger-paper tbody tr:hover{background:#241e19}
html.dark .ledger-paper tfoot td{background:#241e19;border-top-color:#8a7a56;
  border-bottom-color:#8a7a56}
html.dark .ledger-paper .ser{color:#7d6f5c}

html.dark body[data-parva="paryushan"],html.dark body[data-parva="diwali"],
html.dark body[data-parva="oli"],html.dark body[data-parva="kalyanak"]{
  --parva-soft:rgba(255,255,255,.05)}
html.dark .parva-band{background:rgba(255,255,255,.05);
  border-bottom-color:rgba(255,255,255,.12);color:var(--b300)}
html.dark body[data-parva]{--brand:var(--b400);--brand-hover:var(--b300)}


/*  A date box whose value is no longer the one the server rendered. Deliberate
    back-dating looks the same as an accidental key press, so this does not
    scold -- it just makes the change impossible to miss before saving.  */
input[type=date].date-changed{
  border-color:#d97706 !important;
  background:#fffbeb;
  box-shadow:0 0 0 2px rgba(217,119,6,.18);
}
:root.dark input[type=date].date-changed{background:#2a2111}