/* BAF-PROD-009E: content typography for every page under Components/Pages/Public/ (About, SMS
   Consent, SMS Policy, Privacy, Terms, Contact). A plain, global (non-scoped) stylesheet - each
   public page is its own Razor component rendered via PublicLayout's @Body, and Blazor's CSS
   isolation (.razor.css) never crosses that component boundary, so a single shared file here is
   the only way to avoid repeating identical heading/paragraph/list rules six times. Mirrors
   baf-foundations.css's own established "global, token-based, loaded once in App.razor" pattern -
   never a second competing foundation layer. Every value is a design token; no raw color/size.

   BAF-PROD-009E1: OWNER's first HUMAN review of /legal/sms-consent found the page too dense, with
   weak section hierarchy and typography too small/uniform for a public trust page. Revised below:
   a real three-step heading scale (H1/H2/H3 now visually distinct instead of nearly the same
   size), each <section> is its own flex column with its own internal spacing (previously,
   consecutive paragraphs inside one <section> had zero gap between them - every span of prose
   ran directly into the next line with no visual separation, a real contributor to the "visually
   dense" finding), generous inter-section spacing, a stronger quote/disclosure treatment (the
   literal consent wording is the single most important sentence on the page and now reads as
   such), and dedicated styles for the shared DraftStatusBanner/owner-note/subtitle/jumplinks
   elements introduced this same task.

   BAF-PROD-009E1A: instrumented rendered-DOM inspection (Playwright) confirmed every rule below
   was already computing exactly as authored - no cascade override, no isolation leak, no
   duplicate/competing selector found anywhere in the codebase. Two further, genuine presentation
   gaps remained regardless: the between-section gap is bumped from --baf-space-13 to
   --baf-space-14 (a still-token-based, incrementally larger breathing room), and the
   DraftStatusBanner is rebuilt below from a small rounded pill into a full-width bordered notice
   bar - OWNER's own explicit finding was that the pill read as "visually tiny," and a screenshot
   comparison confirmed it.

   BAF-PROD-009E1B: OWNER's second HUMAN review confirmed the 960px width/typography/section
   spacing above and asked for two further, narrower fixes, both instrumented-inspection-confirmed
   before and after (see this task's own final report): (1) .baf-public-intro (new) groups the
   masthead/DraftStatusBanner/jumplinks into one cluster with its own smaller internal rhythm -
   previously these three shared .baf-public-content's own large between-SECTION gap
   (--baf-space-14, 56px), which read as excessive separation within what is really one "page
   intro" region; the large gap now applies only between that whole intro cluster and the first
   real numbered section. (2) .baf-public-jumplinks' own font-size is raised from
   --baf-type-body-size-sm (13.6px, OWNER's own "too small/metadata-like" finding) to
   --baf-font-size-6 (15.2px) with more inter-item spacing - still visibly smaller/secondary to
   H1/H2, never oversized buttons. .baf-public-draft-banner's border-radius was already
   var(--baf-radius-md) as of BAF-PROD-009E1A (confirmed unchanged here, per OWNER's explicit
   requirement it never become var(--baf-radius-full) again). */

.baf-public-content {
    display: flex;
    flex-direction: column;
    gap: var(--baf-space-14);
}

/* The whole "top of page" region - masthead, DraftStatusBanner, and (where present) the
   jump-link nav - as ONE cluster with its own moderate internal rhythm, distinct from both the
   masthead's own tight rhythm (below) and .baf-public-content's own large between-SECTION gap.
   Without this wrapper, the banner/jumplinks were direct children of .baf-public-content and
   inherited its large 56px section gap on both sides - correct between actual content sections,
   but excessive within a single intro region (BAF-PROD-009E1B §5). */
.baf-public-intro {
    display: flex;
    flex-direction: column;
    gap: var(--baf-space-lg);
}

/* The page identity cluster (eyebrow/H1/subtitle/meta/lede) - its own tight internal rhythm,
   deliberately smaller than .baf-public-content's own between-section gap, so a page's title and
   its immediate identifying details read as one cohesive masthead rather than being pushed apart
   by the same large spacing used between unrelated sections further down the page. */
.baf-public-masthead {
    display: flex;
    flex-direction: column;
    gap: var(--baf-space-sm);
}

.baf-public-eyebrow {
    margin: 0;
    font-size: var(--baf-type-caption-size-lg);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--baf-accent);
    font-weight: 600;
}

.baf-public-content h1 {
    margin: 0;
    font-size: var(--baf-type-display-size);
    line-height: var(--baf-line-height-tight);
}

.baf-public-subtitle {
    margin: 0;
    font-size: var(--baf-type-body-size);
    color: var(--baf-text-muted);
}

.baf-public-content h2 {
    margin: 0;
    font-size: var(--baf-type-page-title-size);
    line-height: var(--baf-line-height-tight);
}

.baf-public-content h3 {
    margin: 0;
    font-size: var(--baf-font-size-8);
    line-height: var(--baf-line-height-tight);
}

.baf-public-content p,
.baf-public-content li {
    margin: 0;
    font-size: var(--baf-type-body-size);
    line-height: var(--baf-line-height-relaxed);
    color: var(--baf-text);
}

.baf-public-content ul,
.baf-public-content ol {
    margin: 0;
    padding-left: var(--baf-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--baf-space-md);
}

.baf-public-content section {
    display: flex;
    flex-direction: column;
    gap: var(--baf-space-md);
    padding-top: var(--baf-space-xl);
    border-top: var(--baf-border-width) solid var(--baf-border);
}

.baf-public-content section:first-of-type {
    padding-top: 0;
    border-top: none;
}

.baf-public-content a {
    color: var(--baf-color-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.baf-public-content a:hover,
.baf-public-content a:focus-visible {
    color: var(--baf-accent);
}

.baf-public-lede {
    font-size: var(--baf-type-body-size);
    line-height: var(--baf-line-height-relaxed);
    color: var(--baf-text-muted);
}

.baf-public-meta {
    font-size: var(--baf-type-caption-size-lg);
    color: var(--baf-text-subtle);
}

/* The single most important sentence on the SMS Consent page - the literal, unparaphrased
   disclosure wording - reads with the strongest visual treatment on the page: an accent rule, a
   generous quote mark, and a background that separates it from ordinary prose. */
.baf-public-quote {
    position: relative;
    margin: 0;
    padding: var(--baf-space-md) var(--baf-space-lg) var(--baf-space-md) var(--baf-space-13);
    background: var(--baf-surface);
    border-left: 3px solid var(--baf-accent);
    border-radius: var(--baf-radius-md);
    font-size: var(--baf-type-body-size);
    font-style: italic;
    line-height: var(--baf-line-height-relaxed);
    color: var(--baf-text);
}

.baf-public-callout {
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--baf-space-md) var(--baf-space-lg);
    border: var(--baf-border-width) dashed var(--baf-color-border-strong);
    border-radius: var(--baf-radius-md);
    background: var(--baf-surface);
}

.baf-public-callout p {
    color: var(--baf-text-muted);
}

/* The shared DraftStatusBanner - an environment/review-state fact, deliberately styled to read as
   a readable but secondary notice bar (never as a heading, never as part of the surrounding legal
   prose's own typographic rhythm, and - per OWNER's own explicit BAF-PROD-009E1A finding - never
   as a tiny badge easy to miss) so it stays visually and structurally separate from the consent
   contract while still being genuinely legible at a glance. */
.baf-public-draft-banner {
    box-sizing: border-box;
    width: 100%;
    padding: var(--baf-space-6) var(--baf-space-lg);
    border-radius: var(--baf-radius-md);
    background: var(--baf-color-warning-bg);
    border-left: 3px solid var(--baf-color-warning-border);
    color: var(--baf-color-warning);
    font-size: var(--baf-type-body-size-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* An inline flag beside one specific unresolved fact (e.g. governing law) - visually distinct
   from the page-level draft banner above, since it marks a missing DETAIL, not the page's overall
   publication state. */
.baf-public-owner-note {
    display: inline-block;
    padding: 0 var(--baf-space-4);
    border-radius: var(--baf-radius-xs);
    background: var(--baf-color-warning-bg);
    border: var(--baf-border-width) solid var(--baf-color-warning-border);
    color: var(--baf-color-warning);
    font-size: var(--baf-type-caption-size);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* A compact "jump to a section" aid (BAF-PROD-009E1 §7, resized BAF-PROD-009E1B §7 after OWNER
   found the links "too small/metadata-like") - plain links with visible separators, deliberately
   not styled as a card/box or as buttons, per this task's own "avoid turning every section into a
   card"/"simple compact navigation row" instruction. */
.baf-public-jumplinks-label {
    margin: 0;
    font-size: var(--baf-type-caption-size-lg);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--baf-text-subtle);
    font-weight: 600;
}

.baf-public-jumplinks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--baf-space-6) var(--baf-space-lg);
    font-size: var(--baf-font-size-6);
}

.baf-public-jumplinks a {
    text-decoration: none;
    color: var(--baf-color-link);
}

.baf-public-jumplinks a:hover,
.baf-public-jumplinks a:focus-visible {
    text-decoration: underline;
    color: var(--baf-accent);
}

/* BAF-PUBLIC-007: the SMS Opt-In evidence page's own demonstration interaction - a phone field, a
   consent checkbox, and a submit-style action, styled as a real, plainly bordered card so a Twilio
   reviewer sees a genuine-looking control, never a "callout"/missing-info box (.baf-public-callout
   is deliberately not reused here for that reason). Every value below is still a design token - no
   raw color/size - matching this file's own opening invariant. */
.baf-public-opt-in-demo {
    display: flex;
    flex-direction: column;
    gap: var(--baf-space-lg);
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--baf-space-lg);
    border: var(--baf-border-width) solid var(--baf-border);
    border-radius: var(--baf-radius-md);
    background: var(--baf-surface);
}

.baf-public-opt-in-field {
    display: flex;
    flex-direction: column;
    gap: var(--baf-space-sm);
}

.baf-public-opt-in-field label {
    font-size: var(--baf-type-body-size-sm);
    font-weight: 600;
    color: var(--baf-text);
}

.baf-public-opt-in-input {
    box-sizing: border-box;
    width: 100%;
    max-width: 20rem;
    padding: var(--baf-space-sm) var(--baf-space-md);
    border: var(--baf-border-width) solid var(--baf-border);
    border-radius: var(--baf-radius-sm);
    background: var(--baf-bg);
    color: var(--baf-text);
    font-size: var(--baf-type-body-size);
    font-family: inherit;
}

.baf-public-opt-in-input:focus-visible {
    outline: 2px solid var(--baf-accent);
    outline-offset: var(--baf-focus-ring-offset);
}

.baf-public-opt-in-checkbox-row label {
    display: flex;
    align-items: flex-start;
    gap: var(--baf-space-sm);
    cursor: pointer;
}

.baf-public-opt-in-checkbox-row input[type="checkbox"] {
    margin-top: 0.2em;
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    accent-color: var(--baf-accent);
}

.baf-public-opt-in-checkbox-row input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--baf-accent);
    outline-offset: var(--baf-focus-ring-offset);
}

.baf-public-opt-in-checkbox-row span {
    font-size: var(--baf-type-body-size-sm);
    line-height: var(--baf-line-height-relaxed);
    color: var(--baf-text);
}

.baf-public-opt-in-submit {
    align-self: flex-start;
    padding: var(--baf-space-sm) var(--baf-space-lg);
    border: var(--baf-border-width-thick) solid var(--baf-accent);
    border-radius: var(--baf-radius-sm);
    background: var(--baf-surface);
    color: var(--baf-accent);
    font-size: var(--baf-type-body-size);
    font-weight: 600;
    cursor: pointer;
}

.baf-public-opt-in-submit:hover,
.baf-public-opt-in-submit:focus-visible {
    background: var(--baf-accent);
    color: var(--baf-bg);
    outline: none;
}