/* ============================================
   EasyFPL — documentation pages
   Shared by the Methodology, Privacy and Contact pages. Long-form reading
   rather than dashboard density: one column, generous measure, and enough
   structure that a 6,000-word page stays navigable.
   ============================================ */

.doc-hero {
    /* Matches .doc-layout below so the display heading and the prose share an
       edge. The heading itself is the site-wide .v2-page-heading treatment. */
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--space-12) 24px var(--space-6);
    text-align: center;
}
.doc-hero-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: var(--radius-xl);
    background: var(--color-primary-muted); color: var(--color-primary);
    margin-bottom: var(--space-4);
}
.doc-hero-icon .icon { width: 28px; height: 28px; }
.doc-hero h1 {
    font-family: var(--font-display); font-size: 34px; font-weight: 700;
    color: var(--text-primary); line-height: 1.15;
    /* These pages carry the site-wide .v2-page-heading treatment, which forces
       a ~104px display size and line-height 0.95 with !important. At that size
       the line box is shorter than the glyphs, so the following paragraph sits
       flush against the descenders. Explicit clearance, and !important to match
       the idiom of the rule it sits alongside. */
    margin-bottom: 40px !important;
}
.doc-hero p {
    font-size: 15px; color: var(--text-secondary);
    max-width: 620px; margin: 0 auto; line-height: 1.65;
}
.doc-updated {
    display: inline-block; margin-top: var(--space-4); padding: 4px 12px;
    border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-subtle);
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* ---- layout: sticky contents rail beside the prose ---- */
.doc-layout {
    max-width: 1180px; margin: 0 auto; padding: 0 24px var(--space-12);
    display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--space-10);
    align-items: start;
}
.doc-toc { position: sticky; top: 24px; }
.doc-toc-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin-bottom: var(--space-3);
}
.doc-toc a {
    display: block; padding: 6px 10px; border-radius: var(--radius-md);
    font-size: 13px; color: var(--text-secondary); text-decoration: none;
    border-left: 2px solid transparent; transition: all 160ms ease;
}
.doc-toc a:hover { color: var(--text-primary); background: var(--surface-2); }
.doc-toc a.sub { padding-left: 22px; font-size: 12px; color: var(--text-muted); }
.doc-body { min-width: 0; }

/* ---- prose ---- */
.doc-section { margin-bottom: var(--space-12); scroll-margin-top: 24px; }
.doc-section > h2 {
    font-family: var(--font-display); font-size: 24px; font-weight: 700;
    color: var(--text-primary); margin-bottom: var(--space-3);
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle);
}
.doc-section h3 {
    font-size: 17px; font-weight: 650; color: var(--text-primary);
    margin: var(--space-8) 0 var(--space-3); scroll-margin-top: 24px;
}
.doc-section h4 {
    font-size: 14px; font-weight: 650; color: var(--text-primary);
    margin: var(--space-5) 0 var(--space-2);
}
.doc-section p {
    font-size: 14.5px; line-height: 1.75; color: var(--text-secondary);
    margin-bottom: var(--space-4);
}
.doc-section ul, .doc-section ol { margin: 0 0 var(--space-4) 20px; }
.doc-section li {
    font-size: 14.5px; line-height: 1.7; color: var(--text-secondary);
    margin-bottom: var(--space-2);
}
.doc-section strong { color: var(--text-primary); font-weight: 650; }
.doc-section a { color: var(--color-primary); text-decoration: none; }
.doc-section a:hover { text-decoration: underline; }
.doc-section code {
    font-family: var(--font-mono); font-size: 12.5px;
    background: var(--surface-2); border: 1px solid var(--border-subtle);
    border-radius: 4px; padding: 1px 5px; color: var(--text-primary);
}

/* ---- tool cards, one per page of the site ---- */
.doc-tool {
    border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
    background: var(--surface-1); padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
}
.doc-tool-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-2); }
.doc-tool-head .icon { width: 18px; height: 18px; color: var(--color-primary); flex: none; }
.doc-tool-head h3 { margin: 0; font-size: 17px; }
.doc-tool-path {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
    margin-bottom: var(--space-3);
}
.doc-tool ul { margin-bottom: 0; }

/* ---- callouts ---- */
.doc-note {
    border-left: 3px solid var(--color-primary);
    background: var(--color-primary-muted);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--space-4) var(--space-5); margin: var(--space-5) 0;
}
.doc-note p:last-child { margin-bottom: 0; }
.doc-note-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--color-primary); margin-bottom: var(--space-2);
}
.doc-warn { border-left-color: var(--color-warning, #f59e0b); background: rgba(245, 158, 11, 0.08); }
.doc-warn .doc-note-title { color: var(--color-warning, #f59e0b); }

/* ---- formula block ---- */
.doc-formula {
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75;
    background: var(--surface-2); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
    margin: var(--space-4) 0; color: var(--text-primary);
    overflow-x: auto; overflow-y: hidden; white-space: pre;
}

/* ---- data table ---- */
.doc-table-wrap { overflow-x: auto; overflow-y: hidden; margin: var(--space-4) 0; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 460px; }
.doc-table th {
    text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
    border-bottom: 1px solid var(--border-default);
}
.doc-table td {
    padding: 10px 12px; color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle); vertical-align: top;
}
.doc-table tr:last-child td { border-bottom: none; }
.doc-table td:first-child { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.doc-table .num { font-family: var(--font-mono); font-size: 12.5px; }

/* ---- contact cards ---- */
.doc-contact-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4); margin: var(--space-6) 0;
}
.doc-contact-card {
    border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
    background: var(--surface-1); padding: var(--space-5); text-decoration: none;
    display: block; transition: border-color 180ms ease, transform 180ms ease;
}
a.doc-contact-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.doc-contact-card .icon { width: 20px; height: 20px; color: var(--color-primary); margin-bottom: var(--space-3); }
.doc-contact-card h3 { margin: 0 0 6px; font-size: 15px; }
.doc-contact-card p { font-size: 13px; margin: 0; line-height: 1.6; }

@media (max-width: 980px) {
    .doc-layout { grid-template-columns: 1fr; gap: var(--space-6); }
    .doc-toc { position: static; border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-4); }
    .doc-toc-inner { display: flex; flex-wrap: wrap; gap: 4px; }
    .doc-toc a { border-left: none; }
    .doc-toc a.sub { display: none; }
}
@media (max-width: 640px) {
    .doc-hero { padding: var(--space-8) 20px var(--space-4); }
    .doc-hero h1 { font-size: 26px; }
    .doc-layout { padding: 0 20px var(--space-8); }
    .doc-section > h2 { font-size: 20px; }
}