/* ============================================================
   salary.css
   Card, category-grid, and micro-interaction styling for the
   Salary & HR category homepage. Lives next to
   salary-homepage.html, same pattern as finance.css /
   finance-homepage.html. Base tokens, .fcard, .catcard,
   .feat-pill, .fstat, .scenario-list, and the sparkline
   .viz-strip system are copied verbatim from finance.css so
   any future salary tool can reuse them without drifting from
   the shared system. The additions specific to this page are
   .calc-viz / donut-* / rate-bars, at the bottom.
   ============================================================ */

/* ---------- 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/finance) ---------- */
#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;

  /* Donut segment colors for the CTC card are intentionally NOT
     one of the muted category accents above, and don't swap in
     dark mode — a data-viz palette needs to stay vivid and
     recognizable on both light and dark card surfaces, rather
     than dimming/brightening to match UI chrome. */
  --donut-basic:#4F63FF; --donut-hra:#22C55E; --donut-pf:#FBBF24; --donut-gratuity:#A855F7;
}
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-salary-tint));
  color:var(--tag-color, var(--c-salary));
  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 ----------
   3 live tools now (widened from the original 2-up grid per this
   comment's own earlier instruction, once a 3rd salary tool shipped). */
.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, #2A3AAF); 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:auto; padding-top:8px; }
.fcard .fcta span{ transition:transform .15s ease; }
.fcard:hover .fcta span{ transform:translateX(3px); }

/* ---------- sparkline strip (reserved for future salary tools that
   use a line-draw chart, e.g. a hike/appraisal planner) ---------- */
.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%; }
.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 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 — reserved for future line-chart tools ---------- */
.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, #2A3AAF); font-variant-numeric:tabular-nums; }
.fstat .out-lbl{ font-size:10.5px; color:#8888aa; }

/* ---------- "try a real example" scenario list ---------- */
.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); }

/* ============================================================
   PAGE-SPECIFIC: shared viz row (icon box left + data column
   right), used by both the CTC donut card and the Freelance
   rate-bars card so they read as one system, not two designs.
   ============================================================ */
.calc-viz{ display:flex; align-items:center; gap:20px; height:130px; margin-bottom:16px; }
.viz-icon{ width:100px; height:108px; flex-shrink:0; position:relative; display:flex; align-items:center; justify-content:center; }
.viz-data{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:7px; }

/* ---------- CTC to Take-Home: CTC composition donut ---------- */
.donut-svg{ width:100px; height:100px; transform:rotate(-90deg); }
.donut-track{ fill:none; stroke:var(--slate-tint, #e9e9ef); stroke-width:9; }
.donut-arc{ fill:none; stroke-width:9; stroke-linecap:round; }
.donut-arc-basic{ stroke:var(--donut-basic); }
.donut-arc-hra{ stroke:var(--donut-hra); }
.donut-arc-pf{ stroke:var(--donut-pf); }
.donut-arc-gratuity{ stroke:var(--donut-gratuity); }
.donut-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:68px; line-height:1.2;
}
.donut-figure{ font-size:15px; font-weight:700; color:#1a1a2e; letter-spacing:-.01em; }
html.dark .donut-figure{ color:#e8e8f5; }
.donut-sub{ font-size:8px; color:#8888aa; margin-top:4px; letter-spacing:.01em; }

.legend-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.legend-label{ display:flex; align-items:center; gap:6px; font-size:11px; color:#4a4a6a; }
html.dark .legend-label{ color:#9898bb; }
.legend-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.legend-dot.basic{ background:var(--donut-basic); }
.legend-dot.hra{ background:var(--donut-hra); }
.legend-dot.pf{ background:var(--donut-pf); }
.legend-dot.gratuity{ background:var(--donut-gratuity); }
.legend-pct{ font-size:12.5px; font-weight:700; color:#1a1a2e; }
html.dark .legend-pct{ color:#e8e8f5; }

/* ---------- Freelance Income Planner: rising rate bars ----------
   Plain rects animated via height/y attributes in JS (see the
   inline script at the bottom of the page) — no clip-path or
   bezier shapes, so there's no geometry that can drift out of
   proportion the way the earlier hourglass concept did. */
.rate-bars{ width:76px; height:92px; }
.rate-bar{ fill:var(--c-salary); }
.rate-baseline{ stroke:rgba(0,0,0,.08); stroke-width:1; }
html.dark .rate-baseline{ stroke:rgba(255,255,255,.08); }

.rate-label{ font-size:12px; color:#4a4a6a; }
html.dark .rate-label{ color:#9898bb; }
.rate-figure{ display:flex; align-items:baseline; gap:4px; }
.rate-figure .out{ font-size:22px; font-weight:700; color:#1a1a2e; letter-spacing:-.01em; }
html.dark .rate-figure .out{ color:#e8e8f5; }
.rate-unit{ font-size:12px; color:#8888aa; }
.rate-sub{ font-size:11px; color:#8888aa; margin:0; }

/* ---------- Job Offer Comparison: two muted bars + one winner ----------
   Applied alongside .rate-bar (not instead of it), so these still hook
   into the existing shared bar-rise animation in the page script,
   only the fill color differs from the plain indigo .rate-bar rects. */
.compare-bar-muted{ fill:var(--c-salary); opacity:.35; }
.compare-bar-winner{ fill:#0F9D6B; opacity:1; }