/* ===================================================================
   legal-page-shell.css
   Structure and visual tokens for LegalPageShell, LegalPageArticle,
   and ReturnToTop components.
   All governed visuals resolve through CSS custom properties emitted by
   LegalPageShell from the active theme contract.
   Shared fallback safety comes from the required --meb-* defaults in
   theme-default.css.
   =================================================================== */

/* ── Root wrapper ─────────────────────────────────────────────────── */

.legal-page {
    background: var(--legal-page-bg, transparent);
    color: var(--legal-text, var(--meb-text-default));
    min-height: 100vh;
    padding-block: var(--meb-space-stack-xl, 32px);
}

/* ── Hero ─────────────────────────────────────────────────────────── */

/* Hero background driven by surface.hero.background token (5861). */
.legal-hero {
    /* Hero overlay tints — derived from --legal-btn-fg (button.primary.foreground token,
       already resolved by the shell token bridge) so they adapt when the active theme
       changes the foreground on brand surfaces. No raw color literals. */
    --legal-hero-text: var(--legal-btn-fg, white);
    --legal-hero-subtitle: color-mix(in srgb, var(--legal-hero-text) 85%, transparent);
    --legal-badge-bg: color-mix(in srgb, var(--legal-hero-text) 18%, transparent);
    --legal-badge-border: color-mix(in srgb, var(--legal-hero-text) 45%, transparent);
    position: relative;
    overflow: hidden;
    text-align: center;
    background: var(--legal-hero-bg);
    padding-block: var(--meb-space-stack-xl, 32px);
    /* Inline inset was missing entirely. On desktop the .legal-subtitle max-width kept the copy
       clear of the edges, so nothing showed; on mobile that cap never binds and both the H1 and
       the subtitle ran flush into the hero's rounded corners (the H1 filled the hero's full
       content box to the pixel). The inset is what holds the copy inside the rounded surface. */
    padding-inline: var(--meb-space-stack-lg, 24px);
    border-radius: var(--meb-radius-lg, 12px);
}

/* Hero text is white — hero background is always a dark brand color. */
.legal-title {
    color: var(--legal-hero-text);
    font-family: var(--font-family-display);
    font-size: var(--font-size-display-desktop);
    font-weight: var(--font-weight-display);
    line-height: var(--font-lineheight-display);
    margin-block-end: 0;
}

.legal-subtitle {
    color: var(--legal-hero-subtitle);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-body);
    line-height: var(--font-lineheight-body);
    max-width: 720px;
    margin-inline: auto;
    margin-block-end: 0;
}

/* ── Date badge pill (image-1 layout) ─────────────────────────────── */
/* Renders above the H1 as a frosted-glass rounded pill. */

.legal-date-badge {
    display: inline-block;
    background: var(--legal-badge-bg);
    color: var(--legal-hero-text, white);
    border: 1px solid var(--legal-badge-border);
    border-radius: var(--meb-radius-pill, 9999px);
    padding: 4px 18px;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-sm-desktop);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-body);
    letter-spacing: 0.01em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Content Card ─────────────────────────────────────────────────── */
/* Vertical stacking is owned by <Stack> in LegalPageShell.razor.
   No flex wrapper needed here. */

/* ── Body row: TOC + article side by side ─────────────────────────── */
/* Layout is owned by <Inline Align="start" Gap="xl" Class="legal-body-row"> in
   LegalPageShell.razor. On mobile, _showToc=false so this Inline is never
   rendered — ChildContent renders directly without the TOC column. */

/* TOC: fixed narrow column so the article gets maximum reading width. */
.legal-toc {
    flex: 0 0 220px;
}

/* Article: fills the remaining space; min-width prevents overflow on long words.
   §4.1 primitive gap: <Inline> does not expose per-child flex-grow, so the grow
   cannot be set via a Gap or Align parameter. Figma-paired with the Figma-locked
   .legal-toc exception above (same two-column composition). */
.legal-article {
    flex: 1 1 0;
    min-width: 0;
}

/* ── TOC ──────────────────────────────────────────────────────────── */

.legal-toc {
    position: sticky;
    top: 1.5rem;
    /* Prevent overflow into the CTA section below */
    overflow-y: auto;
}
/* Below the breakpoint the TOC is not shown at all. _showToc already keeps it out of the DOM
   whenever Screen.IsMobile is right; this makes the two paths agree when it is not. On a
   static-SSR route that value is frozen at the UA hint, so a desktop UA in a narrow window used
   to render the TOC as a rigid 220px column, crushing the article to 84px and pushing
   scrollWidth to 678px inside a 402px viewport. Below 768px the viewport is the authority.
   display:none (not an off-screen or opacity trick) also drops it from the accessibility tree,
   so the a11y intent behind the C# gate is preserved on this path rather than contradicted. */
@media (max-width: 767px) {
    .legal-toc {
        display: none;
    }
}
/* "Contents" heading rendered above the TOC list */
.legal-toc-heading {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-heading);
    line-height: var(--font-lineheight-heading);
    color: var(--legal-text, var(--meb-text-default));
    margin-block-end: var(--meb-space-stack-12, 12px);
    margin-block-start: 0;
    padding-block-end: var(--meb-space-stack-sm, 8px);
    border-block-end: 2px solid var(--legal-text, var(--meb-text-default));
}

.legal-toc-list {
    list-style: none;
    padding: var(--meb-space-stack-none);
    margin: var(--meb-space-stack-none);
}

.legal-toc-list li {
    padding-block: var(--meb-space-stack-2xs, 2px);
}

.legal-toc a {
    display: block;
    color: var(--legal-text-muted, var(--meb-text-muted));
    text-decoration: none;
    padding-block: 0.25rem;
    /* Transparent accent bar reserved on every link so the active state
       (below) can colour it in without shifting the text horizontally. */
    border-inline-start: 3px solid transparent;
    padding-inline-start: 0.6rem;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-sm-desktop);
    font-weight: var(--font-weight-body);
    line-height: var(--font-lineheight-body);
    transition: color var(--meb-motion-fast), border-color var(--meb-motion-fast);
}

.legal-toc a:hover {
    color: var(--legal-text, var(--meb-text-default));
}

/* Active section (scroll-spy, set by legalPage.initScrollSpy). The reader's
   current section is accented in the brand colour with a matching bar. State is
   carried on a data-* attribute (not a class) so a Blazor re-render can't reset it. */
.legal-toc a[data-legal-current] {
    color: var(--meb-accent-primary, var(--legal-text, var(--meb-text-default)));
    border-inline-start-color: var(--meb-accent-primary, var(--legal-text));
    font-weight: var(--font-weight-medium);
}

/* Search filter (legalPage.initSearch) hides non-matching TOC rows. */
.legal-toc-list li[data-legal-filtered] {
    display: none;
}

/* WCAG AA visible focus ring for TOC links */
.legal-toc a:focus-visible {
    color: var(--legal-text, var(--meb-text-default));
    outline: 2px solid var(--legal-text, var(--meb-text-default));
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Article ──────────────────────────────────────────────────────── */

.legal-article h2 {
    color: var(--legal-text, var(--meb-text-default));
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2-desktop);
    font-weight: var(--font-weight-heading);
    line-height: var(--font-lineheight-heading);
    padding-block-end: 0.5rem;
    border-block-end: 2px solid var(--meb-border-subtle);
    margin-block-start: var(--meb-space-stack-xl, 32px);
    margin-block-end: var(--meb-space-stack-sm, 8px);
}

/* First section heading sits directly inside the article card — no top distance needed. */
.legal-article > section:first-of-type h2:first-child {
    margin-block-start: 0;
}

/* Leading section number accented in the brand colour (Figma highlights the
   numeral). The number is wrapped in <span class="legal-h-num"> at the page. */
.legal-h-num {
    color: var(--meb-accent-primary, var(--legal-text, var(--meb-text-default)));
}

.legal-article h3 {
    color: var(--legal-text, var(--meb-text-default));
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h3-desktop);
    font-weight: var(--font-weight-heading);
    line-height: var(--font-lineheight-heading);
    margin-block-start: var(--meb-space-stack-lg, 20px);
    margin-block-end: var(--meb-space-stack-sm, 8px);
}

.legal-article p,
.legal-article li {
    color: var(--legal-text-muted, var(--meb-text-muted));
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-body);
    /* Paragraph spacing: space.stack.sm token, resolved via --legal-space-sm */
    margin-block-end: var(--legal-space-sm, var(--meb-space-stack-sm));
    line-height: var(--font-lineheight-body);
}

.legal-article ul,
.legal-article ol {
    padding-inline-start: 2rem;
    margin-block-end: var(--legal-space-sm, var(--meb-space-stack-sm));
}

.legal-article a {
    color: var(--legal-text, var(--meb-text-default));
    font-weight: var(--font-weight-medium);
}

.legal-article a:hover {
    text-decoration: underline;
}

/* WCAG AA visible focus ring for article links */
.legal-article a:focus-visible {
    outline: 2px solid var(--legal-text, var(--meb-text-default));
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Legal section wrapper (LegalContentSection.razor) ───────────── */
/* Groups a thematic article segment identified by anchor id.           Section spacing comes from the h2 margin-block-start inside each section. */
.legal-section {
    display: block;
}

/* Hidden by the search filter (legalPage.initSearch) when its headings don't
   match the query. State is a data-* attribute (not a class) so a Blazor re-render
   never resets it. display:none removes the section from both layout and the
   accessibility tree, which is the intended effect for a filtered-out section. */
.legal-section[data-legal-filtered] {
    display: none;
}

/* ── Section search bar (5848 / Figma Terms frame) ────────────────── */
/* Rendered by the shell above the content card when ShowSearch is set.
   Vertical spacing is owned by the shell's <Stack Gap>; this rule owns only
   the input's own appearance, not page layout. */
.legal-search-input {
    inline-size: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-desktop);
    line-height: var(--font-lineheight-body);
    color: var(--legal-text, var(--meb-text-default));
    background: var(--meb-surface-card);
    border: 1px solid var(--meb-border-subtle);
    border-radius: var(--meb-radius-pill, 9999px);
    transition: border-color var(--meb-motion-fast);
}

.legal-search-input::placeholder {
    color: var(--legal-text-muted, var(--meb-text-muted));
}

.legal-search-input:focus-visible {
    outline: 2px solid var(--meb-accent-primary, var(--legal-text));
    outline-offset: 2px;
    border-color: var(--meb-accent-primary, var(--legal-text));
}

/* "No matches" status — hidden until the filter reports zero results. Spacing
   above it is owned by the surrounding <Stack Gap="sm">, not a margin here. */
.legal-search-empty {
    display: none;
    color: var(--legal-text-muted, var(--meb-text-muted));
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-sm-desktop);
}

.legal-search-empty[data-legal-empty] {
    display: block;
}

/* ── Semantic callout boxes ───────────────────────────────────────── */
/* Figma pairs each callout type with a distinct colour (info=blue,
   warning=red, highlight=amber, contact=green) so the reader can tell an
   "important notice" from a "transparency note" at a glance. We reproduce that
   by mapping each class onto the existing theme status palette. Backgrounds
   that lack a ready surface token are derived from the matching accent token
   via color-mix — the same derivation the hero overlay uses above — so no new
   tokens and no raw colour literals are introduced. Each variant sets three
   local custom properties (--callout-surface / --callout-accent /
   --callout-heading) that the shared base rule below consumes. */

.info-box,
.warning-box,
.highlight-section,
.contact-box {
    background: var(--callout-surface, var(--meb-surface-card));
    border-inline-start: 4px solid var(--callout-accent, var(--meb-border-accent, var(--meb-border-default)));
    border-radius: var(--meb-radius-md, 8px);
    padding: var(--meb-space-stack-lg, 20px);
    margin-block: var(--meb-space-stack-lg, 20px);
}

/* Heading adopts the variant colour so the callout reads as coloured even
   where it carries no leading icon. Falls back to body text colour. */
.info-box h3,
.warning-box h3,
.highlight-section h3,
.contact-box h3 {
    margin-block-start: 0;
    color: var(--callout-heading, var(--legal-text, var(--meb-text-default)));
}

/* Info (blue) — neutral informational asides. Heading uses the darker active-link
   token (a governed token, not a raw mix) so it clears WCAG AA on the pale-blue
   surface at any text size. Surface stays solid here; the faint tint is added in
   the @supports block below so engines without color-mix (WKWebView < 15.4) keep a
   valid background instead of falling through to transparent. */
.info-box {
    --callout-accent: var(--meb-accent-info);
    --callout-surface: var(--meb-surface-card);
    --callout-heading: var(--meb-button-link-active-foreground, var(--meb-text-link, var(--meb-accent-info)));
}

/* Warning (red) — cautionary / "important" notices. */
.warning-box {
    --callout-accent: var(--meb-border-danger);
    --callout-surface: var(--meb-surface-danger);
    --callout-heading: var(--meb-text-danger);
}

/* Highlight (amber) — emphasised positive callouts. Solid fallback here; faint
   tint added in the @supports block below (same reason as .info-box). */
.highlight-section {
    --callout-accent: var(--meb-accent-warning);
    --callout-surface: var(--meb-surface-card);
    --callout-heading: var(--meb-text-notification-warning);
}

/* Success (green) — friendly contact / next-step blocks. */
.contact-box {
    --callout-accent: var(--meb-border-success);
    --callout-surface: var(--meb-surface-success);
    --callout-heading: var(--meb-text-success);
}

/* Faint surface tints for the two variants that lack a ready pale token. Applied
   only where color-mix() is supported; older WKWebView keeps the solid fallback
   above (the coloured left bar + heading still convey the callout's meaning). */
@supports (background: color-mix(in srgb, red 50%, white)) {
    .info-box          { --callout-surface: color-mix(in srgb, var(--meb-accent-info) 8%, var(--meb-surface-card)); }
    .highlight-section { --callout-surface: color-mix(in srgb, var(--meb-accent-warning) 14%, var(--meb-surface-card)); }
}

/* ── CTA section ──────────────────────────────────────────────────── */

/* CTA background driven by surface.cta.background token (5861). */
.legal-cta {
    background: var(--legal-cta-bg);
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    border: 1px solid var(--legal-btn-border, var(--meb-button-primary-border, transparent));
    box-shadow: var(--legal-btn-shadow, var(--meb-button-primary-shadow, none));
    border-radius: var(--meb-radius-lg, 12px);
    padding: var(--meb-space-stack-lg, 24px);
    text-align: center;
}

/* No margin here: the shell's <Stack Gap="xl"> owns every gap around a CTA. .legal-cta used to
   add margin-top on top of that, which double-spaced it from the article (~72px of dead space
   at the foot of the card on mobile) -- the margin-inside-a-component anti-pattern (§23.3).
   A CtaContent fragment holding two sibling sections (Disclaimer ships two) flattens into the
   Stack, so the Stack spaces those from each other too; measured 32px between them either way. */

/* Success (green) CTA variant — the "Ready to Play" call to action on the
   Disclaimer (Figma 293:8910). Bright success surface with dark on-brand text;
   heading/body colour overridden below since the base rule paints them with the
   button-foreground token meant for the dark band. */
.legal-cta--success {
    background: var(--meb-accent-success, var(--meb-surface-success));
    color: var(--meb-text-default);
    border-color: var(--meb-border-success, var(--meb-border-default));
}

.legal-cta--success .legal-cta-heading,
.legal-cta--success .legal-cta-body,
.legal-cta--success h2,
.legal-cta--success p {
    color: var(--meb-text-default);
}

.legal-cta h2 {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    border-block-end: none;
    margin-block-start: 0;
}

.legal-cta p {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-body);
    line-height: var(--font-lineheight-body);
    margin-block-end: 0;
}

.legal-cta a {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    font-weight: var(--font-weight-heading);
    text-decoration: underline;
}

.legal-cta a:hover {
    opacity: 0.85;
}

/* Visible focus for CTA interactive elements */
.legal-cta a:focus-visible,
.legal-cta button:focus-visible {
    outline: 2px solid var(--legal-btn-fg, var(--meb-button-primary-foreground));
    outline-offset: 3px;
    border-radius: var(--meb-radius-sm, 4px);
}

/* ── CTA responsive layout (5846) ────────────────────────────────── */
/* flex-direction is C#-driven: LegalPageShell.razor.cs emits --legal-cta-flow
   (row on desktop, column on mobile) via BuildPageStyle() using Screen.IsMobile —
   the same mechanism that gates the TOC. Button-widening on mobile remains a CSS
   override because it targets component-internal selectors the primitive cannot reach. */

/* CTA Inline direction: defaults to row; column value is injected by code-behind. */
.legal-cta-layout {
    flex-direction: var(--legal-cta-flow, row);
}

/* CTA text column: grows to fill remaining space beside the button column.
   §4.1 primitive gap: <Inline> does not expose per-child flex-grow; this mirrors
   the .legal-article exception for the same Figma-locked two-column pattern. */
.legal-cta-text {
    flex: 1 1 0;
}

.legal-cta-heading {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2-desktop);
    font-weight: var(--font-weight-heading);
    line-height: var(--font-lineheight-heading);
    margin-block-start: 0;
    margin-block-end: var(--meb-space-stack-sm, 8px);
    border-block-end: none;
}

.legal-cta-body {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-body);
    line-height: var(--font-lineheight-body);
    margin-block-end: 0;
}

/* CTA button column: shrinks to fit content so the text column gets remaining space. */
.legal-cta-action {
    flex-shrink: 0;
}

/* ── Return-to-top overlay ────────────────────────────────────────── */

.return-to-top {
    position: fixed;
    inset-block-end: 2rem;
    inset-inline-end: 2rem;
    z-index: 100;
    width: 3rem;
    height: 3rem;
    border-radius: var(--meb-radius-full, 50%);
    background: var(--legal-btn-bg, var(--meb-button-primary-background));
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    border: 1px solid var(--legal-btn-border, var(--meb-button-primary-border, transparent));
    box-shadow: var(--legal-btn-shadow, var(--meb-button-primary-shadow));
    cursor: pointer;
    font-size: var(--font-size-h3-mobile);
    line-height: var(--font-lineheight-display);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hidden at page top; pointer-events disabled so it never blocks content */
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--meb-motion-fast);
}

.return-to-top.return-to-top--visible {
    opacity: 1;
    pointer-events: auto;
}

/* ── Mobile / Tablet overrides (max 767 px) ───────────────────────── */

@media (max-width: 767px) {
    .legal-page {
        padding-block: var(--meb-space-stack-lg, 20px);
    }

    .legal-title {
        font-size: var(--font-size-display-mobile);
    }

    .legal-subtitle,
    .legal-date-badge {
        font-size: var(--font-size-body-sm-mobile);
    }

    .legal-article h2 {
        font-size: var(--font-size-h2-mobile);
    }

    .legal-article h3 {
        font-size: var(--font-size-h3-mobile);
    }

    /* Paragraph rhythm: 8px between paragraphs against a 24px line-height is smaller than the
       leading inside a paragraph, so consecutive paragraphs read as one unbroken block on a
       narrow measure. Step up to the md stack token so the break is visible. */
    .legal-article p,
    .legal-article li {
        margin-block-end: var(--legal-space-md, var(--meb-space-stack-md, 16px));
    }

    /* A 32px list indent is a tenth of the viewport. The lg inset still reads as a list. */
    .legal-article ul,
    .legal-article ol {
        padding-inline-start: var(--meb-space-stack-lg, 24px);
    }

    /* Callouts sit inside the already-inset article, so their desktop 24px padding compounded
       into it: the .highlight-section in section 1 gave its copy only 240px of a 390px
       viewport. md padding keeps the callout legible as a callout without the squeeze. */
    .info-box,
    .warning-box,
    .highlight-section,
    .contact-box {
        padding: var(--meb-space-stack-md, 16px);
        margin-block: var(--meb-space-stack-md, 16px);
    }

    .return-to-top {
        inset-block-end: 1rem;
        inset-inline-end: 1rem;
    }

    /* CTA: flex-direction is C#-driven via --legal-cta-flow (LegalPageShell.razor.cs).
       align-items:center is already provided by Inline's Align="center" parameter.
       text-align is always inherited from .legal-cta on all viewports.
       What remains here is type scale, the tighter surface padding, and the column-axis
       reset the full-width button needs -- all targeting shell-owned classes or
       component-internal selectors the primitive cannot reach. */
    .legal-cta-heading {
        font-size: var(--font-size-h2-mobile);
    }

    .legal-cta-body {
        font-size: var(--font-size-body-mobile);
    }

    .legal-cta {
        padding: var(--meb-space-stack-md, 16px);
    }

    /* Safety net over --legal-cta-flow. That variable is emitted from Screen.IsMobile, which is
       frozen at the UA hint on a circuit-free static-SSR route -- a desktop UA in a narrow window
       left the CTA in its desktop row, text and button side by side in a 336px band. Below the
       breakpoint the viewport is the authority, so pin the column here; when the C# value is
       already "column" this simply agrees with it. */
    .legal-cta-layout {
        flex-direction: column;
    }

    /* Both children must span the column before the full-width button rule below can bite.
       The Inline carries Align="center" (align-items:center), so a flex child shrinks to fit
       and the old rule was sizing the button to 100% of a 171px box -- it never took effect.
       .legal-cta-text also carries flex:1 1 0 for the desktop ROW, where the basis is width;
       once --legal-cta-flow turns the Inline into a column that basis lands on height, which
       is not what it means. Reset both for the column. */
    .legal-cta-text,
    .legal-cta-action {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Mobile button full width */
    .legal-cta-action .ui-button-wrapper,
    .legal-cta-action .meb-btn {
        width: 100%;
        display: block;
    }
}

/* ── Decoration: dot pattern (5869) ──────────────────────────────── */
/* Pattern uses CSS radial-gradient — no SVG for repeating shapes. */

/* Dot color uses decoration.primary token (5861); falls back to white at low opacity
   so it is always visible against the hero's purple background (#8E50E5). */
.legal-deco-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        color-mix(in srgb, var(--legal-deco-primary) 25%, transparent) 1.5px,
        transparent 1.5px
    );
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

/* ── Decoration: wave SVG (5869) ──────────────────────────────────── */
/* Decorative SVG rendering stays in the shared component stylesheet.
   This page owns only composition and placement for the legal wave. */

.legal-deco-wave {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    pointer-events: none;
    z-index: 0;
}

.legal-deco-wave.decorative-svg {
    inline-size: 100%;
}

/* Ensure hero text content renders above decorations */
.legal-hero .ui-stack {
    position: relative;
    z-index: 1;
}