/* ============================================================
   finance.css
   Card, category-grid, and micro-interaction styling for the
   Finance category homepage. Lives next to finance-homepage.html
   so the HTML file's <head> stays free of a large inline <style>
   block. Same pattern to use for every other category folder
   (salary.css, documents.css, etc.) alongside their own index page.
   ============================================================ */

/* ---------- base ---------- */
body{ font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; }
.font-num{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }

/* ---------- sticky nav shadow-on-scroll (matches homepage) ---------- */
#mainNav{transition:box-shadow .25s ease;}
#mainNav.scrolled{box-shadow:0 1px 2px rgba(20,20,50,.06);}

/* ---------- design tokens (category accent colors) ---------- */
:root{
  --c-salary:#2A3AAF;  --c-salary-tint:#eef0fb;
  --c-finance:#0F9D6B; --c-finance-tint:#e6f7f0;
  --c-docs:#C2760C;    --c-docs-tint:#fdf1e0;
  --c-tax:#7C3AED;     --c-tax-tint:#f2ecfd;
  --c-estate:#0D9488;  --c-estate-tint:#e3f5f3;
  --c-units:#E11D63;   --c-units-tint:#fde9f0;
  --tag-text:#4a4a6a;
  --surface:#fff;
}
html.dark{
  --c-salary:#6B7FE8;  --c-salary-tint:#1e2060;
  --c-finance:#34D399; --c-finance-tint:#0f2a23;
  --c-docs:#F2B94A;    --c-docs-tint:#332409;
  --c-tax:#B794F6;     --c-tax-tint:#2a2049;
  --c-estate:#2DD4C6;  --c-estate-tint:#0d2b2a;
  --c-units:#F472B6;   --c-units-tint:#341022;
  --tag-text:#9898bb;
  --surface:#1a1a2e;
}

/* ---------- section tag chip ---------- */
.section-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tag-text); margin-bottom:16px;
}
.section-tag .eq{
  width:18px; height:18px; border-radius:5px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--tag-tint, var(--c-finance-tint));
  color:var(--tag-color, var(--c-finance));
  font-size:12px; font-weight:700;
}

/* ---------- category grid tiles ---------- */
.catcard{ position:relative; overflow:hidden; }
.catcard::before{
  content:''; position:absolute; top:0; left:0; right:0; height:0; background:var(--accent); transition:height .22s ease;
}
.catcard:hover::before{height:3px;}
.catcard .cat-icon{ transition:transform .22s cubic-bezier(.34,1.56,.64,1); }
.catcard:hover .cat-icon{transform:scale(1.12) rotate(-6deg);}

/* ---------- tool card grid ----------
   Desktop: 3 up. Tablet (≤900px): 2 up — plenty of room per card,
   no changes needed there. Phones (≤640px): previously also forced
   2 up, which squeezed every card's title/description/feature pill
   into a sliver and needed a separate "compact" override just to
   stay legible (see below — now removed). Single column at this
   width gives each card the same room a tablet card gets, so the
   compact squeeze workaround is no longer necessary at all. */
.fgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:900px){ .fgrid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .fgrid{grid-template-columns:1fr;} }

.fcard{
  position:relative; background:var(--surface, #fff); border:1px solid var(--border, rgba(0,0,0,.1)); border-radius:16px;
  padding:18px; transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column; overflow:hidden;
}
html.dark .fcard{background:#1a1a2e; border-color:rgba(255,255,255,.1);}
.fcard:hover{transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(20,20,50,.2);}
html.dark .fcard:hover{box-shadow:0 14px 30px -14px rgba(0,0,0,.5);}
.fcard.is-soon{opacity:.65;}

.fcard .ficon{width:38px; height:38px; border-radius:10px; background:var(--accent-tint, #eef0fb); color:var(--accent, #0F9D6B); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; font-family:'IBM Plex Mono',monospace; margin-bottom:14px; flex-shrink:0; align-self:flex-start;}
.fcard .fbadge{font-size:10px; font-weight:600; padding:2px 7px; border-radius:5px; margin-left:6px; vertical-align:middle;}
.fcard h3{font-size:15px; font-weight:600; margin:0 0 6px; letter-spacing:-.01em; color:#1a1a2e;}
html.dark .fcard h3{color:#e8e8f5;}
.fcard p.desc{
  font-size:12.5px; color:#4a4a6a; line-height:1.55; margin:0 0 12px;
  height:39px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
html.dark .fcard p.desc{color:#9898bb;}

.fcard .fcta{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--c-salary); text-decoration:none; margin-top:8px;}
.fcard .fcta span{transition:transform .15s ease;}
.fcard:hover .fcta span{transform:translateX(3px);}

/* ---------- sparkline strip (Concept 1: line-draw + fill reveal) ---------- */
.viz-strip{position:relative; width:100%; height:52px; border-radius:10px; overflow:hidden; background:var(--c-salary-tint); margin-bottom:14px;}
.viz-strip svg{display:block; width:100%; height:100%;}

/* Circular markers (the goal slider's handle, the curve "arrival" dot) are
   real HTML elements positioned on top of the SVG, not SVG shapes inside it.
   The SVG stretches non-uniformly to fill the card edge-to-edge (needed for
   the line/area charts), which is fine for lines and rects, but it squashes
   any SVG circle into an oval whenever the card's width-to-height ratio
   drifts from the chart's own 300:56 ratio, most visible at in-between
   responsive widths. Positioning these as HTML divs with left:% keeps them
   perfect circles at every width. */
.tip-dot, .goal-marker-dot{
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:var(--c-salary); transform:translate(-50%, -50%);
  opacity:0; pointer-events:none;
}
.goal-marker-dot{
  width:14px; height:14px; background:var(--surface); border:2.5px solid var(--c-salary);
}

/* ---------- rolling feature pill, sits above the results (fstat) box ---------- */
.feat-pill{
  display:inline-flex; align-items:center; gap:7px; max-width:100%;
  background:var(--c-salary-tint); border-radius:999px; padding:6px 12px 6px 10px; margin-bottom:10px;
}
.feat-dot{width:6px; height:6px; border-radius:50%; background:var(--c-salary); flex-shrink:0;}
.feat-viewport{position:relative; height:14px; overflow:hidden; flex:1; min-width:0;}
.feat-text{
  position:absolute; left:0; top:0; right:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:11px; font-weight:600; color:var(--c-salary); line-height:14px;
  transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .6s ease;
}
.feat-a{transform:translateY(0); opacity:1;}
.feat-b{transform:translateY(100%); opacity:0;}

/* ---------- results (fstat) box ---------- */
/* Background is neutral indigo like the rest of the card; only the
   number itself (.out) carries the category color, this and .ficon
   are the only two places category color survives on this page. */
.fstat{background:var(--c-salary-tint); border-radius:10px; padding:10px 12px;}
.fstat .in{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#4a4a6a; display:block; margin-bottom:2px;}
html.dark .fstat .in{color:#9898bb;}
.fstat .out{font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:700; color:var(--accent, #0F9D6B); font-variant-numeric:tabular-nums;}
.fstat .out-lbl{font-size:10.5px; color:#8888aa;}

/* ---------- "try a real example" scenario list ---------- */
/* Deliberately a plain bordered list of rows, not another card grid,
   so it reads as a distinct kind of section rather than a repeat of
   the tool cards above it. */
.scenario-list{
  display:flex; flex-direction:column; background:var(--surface, #fff);
  border:1px solid rgba(0,0,0,.1); border-radius:14px; overflow:hidden;
}
html.dark .scenario-list{border-color:rgba(255,255,255,.1);}
.scenario-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.06);
  transition:background .15s ease, padding-left .15s ease;
}
html.dark .scenario-row{border-color:rgba(255,255,255,.06);}
.scenario-list a:last-child{border-bottom:none;}
.scenario-row:hover{background:var(--c-salary-tint); padding-left:24px;}
.scenario-q{font-size:13.5px; font-weight:500; color:#1a1a2e;}
html.dark .scenario-q{color:#e8e8f5;}
.scenario-arrow{font-size:16px; color:var(--c-salary); flex-shrink:0; transition:transform .15s ease;}
.scenario-row:hover .scenario-arrow{transform:translateX(3px);}
