/* ============================================================
 * user_ui — Content pages (legal + FAQ) — Phase 7 Package L.
 * ============================================================
 *
 * Section-local stylesheet for the public legal + FAQ pages.
 * Loaded only by content/legal.html + content/faq.html via the
 * base shell's {% block extra_css %} — kept OUT of the global
 * cascade so other pages don't pay for it.
 *
 * Class names (.legal-hero, .legal-card, .tabs, .legal-toc,
 * .legal-content, .legal-section, …) are lifted verbatim from
 * the Terms_of_Service / FAQ mockups per development-plan §4.
 * Everything is scoped under `.content-page` so nothing leaks
 * into the shared surface. Tokens come from shared/tokens.css;
 * (`.lines` is retired — Global background pass).
 *
 * Two deliberate deviations from the mockup, both owner-locked:
 *   1. Tabs are <a> links (own URL per legal doc), not JS panes.
 *   2. All sections render at once and the TOC scroll-jumps
 *      (`.legal-section` stays display:block; `content.js` owns
 *      the scrollspy) — the mockup hid all but the active pane.
 *
 * Global-background integration pass: the hero's own background
 * (the About page's about-hero-{dark,light}.webp assets) was
 * removed — the page sits on the site-wide background chrome.
 *
 * Located at user_ui/static/user_ui/css/content/content.css
 * ============================================================ */

.content-page { position: relative; }

/* ---------- HERO ---------- */
/* Global-background integration pass: the hero previously painted
   its own background (gradient + about-hero-{dark,light}.webp stripe
   image + solid fill). All removed — the page sits transparently on
   the site-wide background chrome (css/background/background.css). */
.content-page .legal-hero {
    position: relative;
    isolation: isolate;
    /* Shared-hero alignment fix: padding matches the other hero pages
       (56px 0 90px) — the previous 64px top offset made the mascot sit
       lower here than everywhere else. */
    padding: 56px 0 90px;
    z-index: 1;
}
.content-page .legal-hero .wrap {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 32px;
    align-items: end;
}
.content-page .legal-hero .copy { padding-bottom: 18px; }
.content-page .legal-hero h1 {
    font-family: var(--font-head);
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1;
    font-weight: 700;
    margin: 0 0 18px;
    letter-spacing: -.005em;
    text-wrap: balance;
}
.content-page .legal-hero .lead {
    color: var(--text-dim);
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.55;
    max-width: 560px;
    margin: 0;
}
/* Hero mascot — shared spec, single definition in shared/decorations.css (shared-hero pass). */

/* ---------- CARD ---------- */
.content-page .legal {
    position: relative;
    padding: 0 0 100px;
    z-index: 2;
}
.content-page .legal .wrap { max-width: 1400px; }
.content-page .legal-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: -40px;
}

/* ---------- TABS ---------- */
.content-page .tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
}
.content-page .tab {
    flex: 1 1 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    padding: 26px 22px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(20px, 1.8vw, 26px);
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    position: relative;
}
.content-page .tab svg { width: 30px; height: 30px; }
.content-page .tab:hover,
.content-page .tab.active { color: var(--text); }
.content-page .tab.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--purple), var(--blue));
}
.content-page .tab + .tab { border-left: 1px solid var(--line); }
.content-page .tab .tab-icon-orange { color: var(--orange); }

/* ---------- BODY (sidebar + content) ---------- */
.content-page .legal-body {
    display: grid;
    grid-template-columns: 300px 1fr;
    /* Shared ceiling for BOTH panes. The two columns scroll
       independently but must cap at the same height, so the value
       lives in one custom property instead of being written twice
       where the two copies can drift apart. */
    --legal-pane-max-h: 760px;
}
/* The TOC scrolls at the same ceiling as the content column.
   Without the cap it grew to its natural height — Terms of Service
   has 25+ chapters — and since both panes are cells of the same grid
   row, that TALL SIDEBAR set the row height. The content column stayed
   capped and scrolling, so the card ended in a large empty gap beside
   the lower half of the chapter list. Cap both and the row is the
   ceiling, with each side scrolling its own overflow. */
.content-page .legal-toc {
    border-right: 1px solid var(--line);
    padding: 18px 14px;
    max-height: var(--legal-pane-max-h);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--purple) transparent;
}
.content-page .legal-toc::-webkit-scrollbar { width: 6px; }
.content-page .legal-toc::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--purple), var(--blue));
    border-radius: 6px;
}
.content-page .legal-toc a {
    display: block;
    padding: 16px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.35;
    border-bottom: 1px solid var(--line-2);
    transition: background .15s, color .15s;
}
.content-page .legal-toc a:last-child { border-bottom: 0; }
.content-page .legal-toc a:hover { background: var(--chip); color: var(--orange-3); }
.content-page .legal-toc a.active {
    color: var(--orange);
    background: color-mix(in srgb, var(--orange) 12%, transparent);
}
.content-page .legal-toc a .num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    margin-left: 4px;
}
.content-page .legal-toc a.active .num { color: var(--orange-3); }

/* FAQ category divider inside the content column (section-local). */
.content-page .faq-group-label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--orange-3);
    margin: 4px 0 18px;
}
.content-page .faq-group-label:not(:first-child) {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--line-2);
}

.content-page .legal-content {
    padding: 36px 40px 40px;
    max-height: var(--legal-pane-max-h);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--purple) transparent;
}
.content-page .legal-content::-webkit-scrollbar { width: 6px; }
.content-page .legal-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--purple), var(--blue));
    border-radius: 6px;
}
.content-page .legal-content h2 {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.15;
}
.content-page .legal-content h3 {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 600;
    margin: 32px 0 12px;
}
.content-page .legal-content .updated {
    font-size: 14px;
    color: var(--text-dim);
    margin: 0 0 24px;
}
.content-page .legal-content p {
    margin: 0 0 18px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--text-dim);
    text-align: justify;
}
.content-page .legal-content p strong { color: var(--text); font-weight: 600; }
.content-page .legal-content code {
    font-family: var(--font-mono);
    font-size: 13px;
    background: var(--chip);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--text);
}
.content-page .legal-content ul {
    margin: 0 0 18px;
    padding-left: 22px;
    color: var(--text-dim);
    font-size: 15.5px;
    line-height: 1.75;
}
.content-page .legal-content ul li { margin-bottom: 6px; }
.content-page .legal-content ul li::marker { color: var(--orange); }

/* Owner decision: render all sections, scroll-jump (not pane swap). */
/* scroll-margin-top clears the sticky site header so a `#anchor` jump
   (deep link, TOC click that sets the hash, or the mobile page-scroll
   path) lands the section BELOW the header instead of hidden under it.
   The desktop in-pane scroll in content.js uses its own offset and is
   unaffected by this. ~header height (≈64px) + breathing room. */
.content-page .legal-section { display: block; scroll-margin-top: 96px; }
.content-page .legal-section + .legal-section { margin-top: 40px; }

/* Empty-state notice (unpublished legal page / no FAQ articles). */
.content-page .legal-empty {
    grid-column: 1 / -1;
    padding: 56px 40px;
    text-align: center;
}
.content-page .legal-empty p {
    color: var(--text-dim);
    font-size: 16px;
    margin: 0;
}

/* ---------- RESPONSIVE (ported from mockup) ---------- */
@media (max-width: 1100px) {
    .content-page .legal .wrap { max-width: 1100px; }
    .content-page .legal-body { grid-template-columns: 240px 1fr; }
    .content-page .legal-content { padding: 28px 28px 32px; }
}
@media (max-width: 860px) {
    .content-page .legal-hero { padding: 48px 0 60px; }
    .content-page .legal-hero .wrap { grid-template-columns: 1fr; gap: 18px; }
    .content-page .legal-card { margin-top: 0; }
    .content-page .legal-body { grid-template-columns: 1fr; }
    .content-page .legal-toc {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 10px;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        /* Single-column stack from here down: the TOC is a horizontal
           strip above the content, not a sidebar beside it, so the
           desktop height cap has nothing left to equalise against and
           would only clip the strip. */
        max-height: none;
    }
    .content-page .legal-toc a { white-space: nowrap; padding: 10px 14px; border-bottom: 0; font-size: 13px; }
    .content-page .tab { padding: 18px 12px; font-size: 18px; }
    .content-page .tab svg { width: 24px; height: 24px; }
}
@media (max-width: 760px) {
    .content-page .legal-hero { padding: 40px 0 40px; }
    .content-page .legal-hero h1 { font-size: 38px; margin-bottom: 14px; }
    .content-page .legal-hero .lead { font-size: 15px; }
    .content-page .legal-content { padding: 22px 20px 26px; max-height: none; }
    .content-page .legal-content h2 { font-size: 22px; }
    .content-page .legal-content h3 { font-size: 17px; }
    .content-page .legal-content p,
    .content-page .legal-content ul { font-size: 14.5px; }
}