/* ============================================================
   documents.css
   Category-grid and section styling for the Documents homepage.
   Lives next to documents-index.html, same pattern as
   finance.css/salary.css. Documents doesn't use the .fcard /
   donut / viz-strip vocabulary those files share — document
   generators show a preview of the actual generated document
   (invoice, receipt, payslip), not a computed number, so a
   bespoke illustrated card is the right fit here rather than
   forcing calculator-style data-viz onto a different kind of
   tool. This file only adds what documents-index.html actually
   needs: shared tokens, section tags, category tiles, and a
   light hover treatment for the document-preview cards.
   ============================================================ */

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/salary) ---------- */
#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-docs-tint));
  color:var(--tag-color, var(--c-docs));
  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); }

/* ---------- document-preview cards (Invoice / Rent Receipt / Salary Slip) ----------
   Keeps the existing bespoke SVG document illustrations exactly as
   they are — just adds the same lift+shadow hover the rest of the
   site's cards use, so it feels like the same system on interaction
   even though the visual content is intentionally different. */
.doccard{ transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.doccard:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(20,20,50,.2); border-color:var(--c-docs); }
html.dark .doccard:hover{ box-shadow:0 14px 30px -14px rgba(0,0,0,.5); }

/* ---------- "try a real example" scenario list (reserved for when
   Rent Receipt / Salary Slip go live and there's more than one
   scenario worth listing) ---------- */
.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); }