@font-face{font-family:Vazirmatn;src:url("/static/fund/fonts/Vazirmatn-Regular.cdc140628f11.woff2") format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url("/static/fund/fonts/Vazirmatn-Medium.dd2193b32cbe.woff2") format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url("/static/fund/fonts/Vazirmatn-Bold.7958481fe611.woff2") format('woff2');font-weight:700;font-display:swap}

:root{
  /* raw palette — never used directly by components */
  --ink-900:#12171F; --ink-800:#161C26; --ink-700:#20293A; --ink-600:#2A3446; --ink-500:#3A465C;
  --paper-50:#FBF8F2; --paper-100:#F6F2E9; --paper-200:#F2EDE3; --paper-300:#E2D9C7;
  --gold:#C9A14A; --seal:#8C3A2B; --gain:#3F7A5E; --loss:#A4483A;

  /* geometry */
  --r-ctl:4px; --r-card:8px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --rule-w:1px;
  --tap:48px;                       /* every touch target, no exceptions */
  --wrap:1120px;
}

/* ---- DARK (default) ---- */
:root,[data-theme="dark"]{
  --bg:var(--ink-800); --bg-raised:var(--ink-700); --bg-sunken:var(--ink-900);
  --paper:var(--paper-200); --on-paper:#2C3340; --on-paper-dim:#6B7280; --paper-rule:rgba(44,51,64,.14);
  --fg:#E9E5DB; --fg-dim:#98A0B2; --fg-faint:#5D657A;
  --gold-ink:var(--gold);           /* gold that TEXT may use */
  --rule:rgba(201,161,74,.22);      /* the gold hairline */
  --rule-soft:rgba(233,229,219,.10);
  --seal-ink:#CE6E5A;               /* seal, lightened to clear AA on ink (4.89:1) */
  --gain-ink:#6FB392; --loss-ink:#E08375;
  --focus:#C9A14A;
}
/* ---- LIGHT ---- */
[data-theme="light"]{
  --bg:var(--paper-50); --bg-raised:#FFFFFF; --bg-sunken:var(--paper-100);
  --paper:var(--paper-200); --on-paper:#2C3340; --on-paper-dim:#6B7280; --paper-rule:rgba(44,51,64,.14);
  --fg:#1E2531; --fg-dim:#5A6273; --fg-faint:#8A92A2;
  --gold-ink:#8A6A22;               /* darkened: raw gold fails contrast on white */
  --rule:rgba(32,41,58,.16);
  --rule-soft:rgba(32,41,58,.08);
  --seal-ink:var(--seal);
  --gain-ink:#2F6349; --loss-ink:#8E3A2D;
  --focus:#8A6A22;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:Vazirmatn,system-ui,sans-serif; font-size:15px; line-height:1.85; font-weight:400;
  direction:rtl; text-align:right;
}
h1,h2,h3{font-weight:500; line-height:1.45; margin:0}
.t-display{font-size:clamp(24px,4.6vw,42px); font-weight:500; line-height:1.5}
.t-eyebrow{font-size:11px; letter-spacing:.18em; color:var(--gold-ink)}
.t-dim{color:var(--fg-dim)} .t-faint{color:var(--fg-faint)}
.t-cap{font-size:12.5px}

/* NUMBERS — every money figure in this product uses .num.
   Tabular figures are what make a column of money read as a ledger. */
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:.01em}
.num-xl{font-size:clamp(30px,7vw,48px); font-weight:500}
.gain{color:var(--gain-ink)} .loss{color:var(--loss-ink)}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--s5)}
.rule{border:0; border-top:var(--rule-w) solid var(--rule); margin:0}

/* PAPER — anything that is a RECORD sits on paper. Square corners, gold rule on top.
   This is the single strongest idea in the system: your money lives on a document. */
.paper{background:var(--paper); color:var(--on-paper); border-top:2px solid var(--gold); border-radius:0; padding:var(--s4) var(--s5)}
.paper .t-dim{color:var(--on-paper-dim)}
.paper-row{display:flex; justify-content:space-between; gap:var(--s3); padding:var(--s2) 0; border-bottom:1px solid var(--paper-rule)}
.paper-row:last-child{border-bottom:0}

.card{background:var(--bg-raised); border:1px solid var(--rule-soft); border-radius:var(--r-card); padding:var(--s4) var(--s5)}

/* CONTROLS — 48px tall, always */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:var(--tap); padding:0 var(--s5); border-radius:var(--r-ctl); border:1px solid var(--gold);
  background:transparent; color:var(--gold-ink); font:inherit; font-size:14px; cursor:pointer;
  text-decoration:none; transition:background .16s ease}
.btn:hover{background:rgba(201,161,74,.10)}
.btn-primary{background:var(--gold); color:var(--ink-700); border-color:var(--gold); font-weight:500}
.btn-primary:hover{background:#D8B25E}
.btn-block{width:100%}
.btn:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

.field{display:block; margin-bottom:var(--s4)}
.field > label{display:block; font-size:13px; color:var(--fg-dim); margin-bottom:var(--s2)}
.input{width:100%; min-height:var(--tap); padding:0 var(--s3); border-radius:var(--r-ctl);
  border:1px solid var(--rule); background:var(--bg-sunken); color:var(--fg); font:inherit; font-size:15px}
.input.num{text-align:left; direction:ltr}
.hint{font-size:12.5px; color:var(--fg-faint); margin-top:var(--s1)}
.hint-words{color:var(--gold-ink)}   /* the live «به حروف» line under every money input */

.badge{display:inline-block; font-size:12px; padding:2px 10px; border-radius:999px; border:1px solid currentColor}
.b-wait{color:var(--gold-ink)} .b-ok{color:var(--gain-ink)} .b-no{color:var(--loss-ink)} .b-done{color:var(--fg-dim)}

/* SEAL — appears exactly once per page, in the footer. Nowhere else. */
.seal{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--seal-ink); border-radius:50%; color:var(--seal-ink);
  font-size:9px; line-height:1.2; text-align:center}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ================================================================
   build-02 components — BELOW the verbatim tokens+base. Same palette,
   no new colours, layout only.
   ================================================================ */

/* alerts (house voice: what happened + what to do) */
.alert{padding:var(--s3) var(--s4); border-radius:var(--r-ctl); font-size:14px; margin-bottom:var(--s4)}
.alert-err{border:1px solid var(--loss-ink); color:var(--loss-ink)}
.alert-ok{border:1px solid var(--gain-ink); color:var(--gain-ink)}
.alert-warn{border:1px solid var(--seal-ink); color:var(--seal-ink)}

/* ---- panel shell ---- */
.panel-body{padding-bottom:calc(var(--tap) + var(--s6))}   /* room for the bottom nav */
.panel-main{max-width:720px; margin:0 auto; padding:var(--s5) var(--s4)}
.panel-nav{position:fixed; inset-inline:0; bottom:0; z-index:50;
  display:flex; background:var(--bg-raised); border-top:1px solid var(--rule)}
.panel-nav a{flex:1; min-height:var(--tap); display:inline-flex; flex-direction:column; gap:2px;
  align-items:center; justify-content:center; color:var(--fg-dim); text-decoration:none; font-size:12px}
.panel-nav a.active{color:var(--gold-ink); border-top:2px solid var(--gold); margin-top:-1px}
@media (min-width:768px){
  .panel-body{padding-bottom:0; display:grid; grid-template-columns:200px 1fr; gap:var(--s6);
    max-width:var(--wrap); margin:0 auto; padding-inline:var(--s5)}
  .panel-nav{position:sticky; top:var(--s5); inset-inline:auto; bottom:auto; align-self:start;
    flex-direction:column; border-top:0; background:transparent; margin-top:var(--s5)}
  .panel-nav a{flex:0 0 auto; flex-direction:row; gap:var(--s2); justify-content:flex-start;
    padding:var(--s2) var(--s3); font-size:14px; border-inline-end:2px solid transparent}
  .panel-nav a.active{border-top:0; margin-top:0; border-inline-end:2px solid var(--gold)}
  .panel-main{margin:0; padding-inline:0}
}

/* metric cards */
.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s3); margin-block:var(--s4)}

/* ---- statement rows: 8 columns on desktop (build-07 §P3.1 adds «مانده مشمول
   سود»), stacked records on mobile ---- */
.profit-row summary{display:flex; justify-content:space-between; gap:var(--s2); cursor:pointer;
  min-height:var(--tap); align-items:center; list-style:none}
.profit-row summary::-webkit-details-marker{display:none}
.profit-row{border-bottom:1px solid var(--paper-rule); padding-inline:var(--s4)}
.profit-row .how{padding:var(--s2) 0 var(--s3); color:var(--on-paper-dim); font-size:13.5px}
.profit-how-btn{font-size:12px; color:var(--gold-ink); border:1px solid var(--rule);
  border-radius:999px; padding:2px 10px; background:transparent}

/* login card */
.login-wrap{min-height:calc(100vh - 130px); display:grid; place-items:center; padding:var(--s5) var(--s4)}
.login-card{width:100%; max-width:380px}

/* growth chart */
.chart{width:100%; height:auto; display:block; margin-top:var(--s3)}

/* Phase 6.2 correction (re-measured, reported): --on-paper-dim #6B7280 scores
   4.14:1 on paper-200 and fails AA for normal text. Darkened one step to
   #636A79 = 4.65:1 (PASS AA). Same hue family; the verbatim block above is
   untouched — this override wins by cascade order. */
:root,[data-theme="dark"],[data-theme="light"]{--on-paper-dim:#636A79}

/* Phase 6.1 (380px review): the gateway strip and profit summaries must wrap,
   not overflow, on narrow phones. */
#ax-strip .paper-row{flex-wrap:wrap}
.profit-row summary{flex-wrap:wrap}

/* ---- build-03: Jalali popover picker (z: dropdown layer = 1000) ---- */
.ax-jal-pop{position:absolute; z-index:1000; background:var(--bg-raised); color:var(--fg);
  border:1px solid var(--rule); border-radius:var(--r-card); padding:var(--s3);
  min-width:264px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.ax-jal-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s1); margin-bottom:var(--s2)}
.ax-jal-head b{flex:1; text-align:center; font-weight:500}
.ax-jal-head button,.ax-jal-foot button{min-width:32px; min-height:32px; border:1px solid var(--rule-soft);
  background:transparent; color:var(--gold-ink); border-radius:var(--r-ctl); cursor:pointer; font:inherit}
.ax-jal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.ax-jal-wd{text-align:center; color:var(--fg-faint); font-size:11px; padding:2px 0}
.ax-jal-day{min-height:32px; border:0; background:transparent; color:var(--fg); border-radius:var(--r-ctl);
  cursor:pointer; font:inherit; font-variant-numeric:tabular-nums}
.ax-jal-day:hover{background:rgba(201,161,74,.12)}
.ax-jal-day.is-today{border:1px solid var(--gold)}
.ax-jal-day.is-sel{background:var(--gold); color:var(--ink-700)}
.ax-jal-foot{margin-top:var(--s2); text-align:center}
.ax-jal-foot button{width:100%}

/* build-06 §P5 — picker dropdowns */
.ax-jal-sel{background:var(--bg-sunken); color:var(--fg); border:1px solid var(--rule-soft);
  border-radius:var(--r-ctl); min-height:32px; font:inherit; font-size:12.5px; padding:0 6px}
.ax-jal-foot{display:flex; gap:6px}

/* ===== BUILD-09 §P5 — the ONE table component. Data first, actions quiet. ===== */

.ax-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ax-table th,
.ax-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ax-hairline, #E9E2D4);
  vertical-align: middle;
  height: 44px;                 /* one row height, badge or no badge */
  box-sizing: border-box;
}
.ax-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--ax-paper, #FBF8F2);
  font-weight: 500; color: var(--ax-quiet, #636A79);
  white-space: nowrap;
  border-bottom: 1.5px solid var(--ax-hairline, #E9E2D4);
}
.ax-table tbody tr:hover { background: color-mix(in srgb, var(--ax-gold, #C9A14A) 6%, transparent); }

/* Money and dates: tabular figures so columns align digit-under-digit. */
.ax-table .num,
.ax-table .date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ax-table .num  { text-align: end; }        /* logical: correct in both RTL and LTR */

/* Badges: fixed line-height so they never change the row height. */
.ax-table .badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; line-height: 18px; white-space: nowrap;
  border: 1px solid currentColor; background: transparent;
}
.ax-table .badge.quiet   { color: var(--ax-quiet, #636A79); }
.ax-table .badge.accent  { color: var(--ax-gold-ink, #8A6A22); }   /* AA-safe on paper */
.ax-table .badge.warn    { color: var(--ax-seal, #8C3A2B); }

/* Row actions: ONE quiet trigger, never a wall of filled buttons.
   The destructive action lives inside the menu, never on the row surface. */
.ax-table .actions { width: 1%; white-space: nowrap; text-align: end; }
.ax-table .actions .trigger {
  border: 1px solid var(--ax-hairline, #E9E2D4);
  background: transparent; color: var(--ax-quiet, #636A79);
  border-radius: 6px; padding: 2px 8px; cursor: pointer; line-height: 20px;
}
.ax-table .actions .trigger:hover { color: var(--ax-ink, #20293A); border-color: var(--ax-ink, #20293A); }
/* (build-10 §P2 — the .menu rules that lived here moved to .ax-menu-pop below) */

/* Mobile: rows become cards. NEVER a horizontal scrollbar on a money table. */
@media (max-width: 640px) {
  .ax-table thead { display: none; }
  .ax-table, .ax-table tbody, .ax-table tr, .ax-table td { display: block; width: 100%; }
  .ax-table tr { border: 1px solid var(--ax-hairline, #E9E2D4); border-radius: 10px;
                 margin-bottom: 10px; padding: 4px 2px; }
  .ax-table td { height: auto; border: 0; padding: 6px 12px;
                 display: flex; justify-content: space-between; gap: 12px; }
  .ax-table td::before { content: attr(data-label); color: var(--ax-quiet, #636A79); flex: 0 0 auto; }
  .ax-table .num { text-align: end; }
  .ax-table .actions { text-align: start; }
}

/* build-09 §P5 addendum (NOT part of the verbatim block, appended after it):
   1) the --ax-* names the component consumes, aliased onto this project's live
      tokens so the table follows the theme instead of its light-only fallbacks;
   2) the menu's hardcoded #fff fails in dark — overridden here, the verbatim
      block itself is untouched. */
:root, [data-theme="dark"], [data-theme="light"] {
  --ax-hairline: var(--rule-soft);
  --ax-paper: var(--bg);
  --ax-quiet: var(--fg-dim);
  --ax-ink: var(--fg);
  --ax-gold: var(--gold);
  --ax-gold-ink: var(--gold-ink);
  --ax-seal: var(--loss-ink);
}

/* ===== BUILD-10 §P2 (#58) — the row menu lives in the TOP LAYER =====
   A popover is not clipped by any ancestor's overflow, so it can no longer be
   hidden by Unfold's horizontal scroll container. Position comes from JS. */
.ax-menu-pop {
  position: fixed;                 /* the popover's own coordinate space */
  margin: 0; inset: auto;          /* clear the UA centring defaults */
  min-width: 168px; padding: 4px;
  background: #fff;
  border: 1px solid var(--ax-hairline, #E9E2D4);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(32, 41, 58, .12);
  z-index: 1200;                   /* above the Jalali picker (1000) */
}
.ax-menu-pop::backdrop { background: transparent; }
.ax-menu-pop a {
  display: block; padding: 7px 10px; border-radius: 6px;
  color: var(--ax-ink, #20293A); text-decoration: none; white-space: nowrap;
}
.ax-menu-pop a:hover { background: var(--ax-paper, #FBF8F2); }
.ax-menu-pop a.destructive { color: var(--ax-seal, #8C3A2B); }
.ax-menu-pop hr { border: 0; border-top: 1px solid var(--ax-hairline, #E9E2D4); margin: 4px 0; }

/* build-10 §P2 addendum (NOT part of the verbatim block, appended after it):
   the popover's hardcoded #fff fails in the dark admin — same fix pattern as
   the build-09 menu; the verbatim block itself is untouched. Also: a popover
   element must not be display:none'd by the old [hidden] styling. */
.ax-menu-pop { background: var(--bg-raised, #fff); }
/* fallback-only (browsers without the popover API): the UA has no popover
   display rules there, so closed menus must be hidden by hand. The @supports
   guard keeps this away from popover-capable browsers entirely. */
@supports not selector(:popover-open) {
  .ax-menu-pop { display: none; }
  .ax-menu-pop.ax-open { display: block; }
}