/* Brand-poster layer for the reading pages: the user guide (/guide), the Learn
   articles (/learn), the legal pages (/terms, /privacy, /refund-policy) and the
   demonstration source page (/demo).

   How it is wired: those pages carry data-brand="poster" and list
   brand-poster-portal.css then this file under lateCss (pages.config.js,
   guide-pages.js, learn-pages.js). The portal layer colours their top bar
   (components.js gives non-marketing pages the plain .utility-topbar); this file
   styles what is under it. Colours and fonts are the shared tokens in
   brand-poster.css.

   It only restyles. The guide's markup is the manual's own authored HTML, and
   the legal contents list is built by components.js (initLegalToc), so class
   names here follow those, and nothing is hidden or moved. */

/* ===== Type ========================================================== */

body[data-brand='poster'] :is(.document-hero h1, .legal-hero h1, .guide-article h2, .policy-section h2,
        .section-intro h2, .guide-section-group > h2, .document-content h2, .document-aside h2, .legal-related h2) {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.035em;
}

body[data-brand='poster'] :is(.guide-article h3, .document-content h3, .manifest-row h3) {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Labels: plain words, not mono capitals. */
body[data-brand='poster'] :is(.kicker, .document-index, .section-kicker, .legal-toc-title, .legal-back,
        .legal-pill, .guide-article .label, .guide-article .path b, .guide-article .tag,
        .guide-article .ref thead th, .guide-article .test-no) {
    font-family: var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
}

body[data-brand='poster'] :is(.kicker, .section-kicker, .legal-toc-title) {
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 700;
}

/* ===== Hero band ===================================================== */

/* The violet runs straight on from the top bar, like the marketing heroes. */
body[data-brand='poster'] .document-hero {
    padding-block: clamp(40px, 6vw, 76px) clamp(48px, 7vw, 92px);
    border: 0;
    background: var(--pp-frame);
    color: #ffffff;
}

body[data-brand='poster'] .document-hero h1 {
    max-width: 18ch;
    color: #ffffff;
    font-size: clamp(2.75rem, 6.4vw, 5.25rem);
    letter-spacing: -0.045em;
    line-height: 0.92;
    text-wrap: balance;
}

body[data-brand='poster'] .document-hero .document-index {
    color: var(--bp-on-violet-faint);
    font-size: 0.9375rem;
    font-weight: 700;
}

body[data-brand='poster'] .document-hero-copy,
body[data-brand='poster'] .document-hero-copy > p {
    color: var(--bp-on-violet-soft);
    font-size: 1.1875rem;
}

body[data-brand='poster'] .document-hero .inline-link,
body[data-brand='poster'] .document-hero-copy a {
    color: #ffffff;
    text-decoration-color: currentColor;
}

body[data-brand='poster'] .document-hero .btn-primary {
    border-color: #12101f;
    background: #12101f;
    color: #ffffff;
}

body[data-brand='poster'] .document-hero .btn-secondary {
    border-color: #ffffff;
    background: #ffffff;
    color: #12101f;
}

/* ===== Page body ===================================================== */

body[data-brand='poster'] .document-body {
    padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 104px);
}

body[data-brand='poster'] .section-intro h2 {
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 0.98;
}

/* Lists of chapters and articles. */
body[data-brand='poster'] .manifest {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 0;
}

body[data-brand='poster'] .manifest-row {
    padding-inline: 24px;
    border: 0;
    border-radius: 22px;
    background: var(--bp-card);
    color: var(--text);
    text-decoration: none;
}

body[data-brand='poster'] a.manifest-row:hover {
    box-shadow: inset 0 0 0 2px var(--accent);
}

body[data-brand='poster'] .manifest-index {
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 800;
}

body[data-brand='poster'] .manifest-tier {
    border: 0;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* ===== Guide and Learn ============================================== */

/* Learn pages share the guide's markup but not guide.css, so their contents
   list used to stack full width above the article. Same columns as the guide. */
body[data-brand='poster'][data-page='learn'] .guide-layout {
    display: grid;
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 4vw, 56px);
}

body[data-brand='poster'][data-page='learn'] .guide-toc {
    position: sticky;
    top: 96px;
}

body[data-brand='poster'][data-page='learn'] .guide-toc ol {
    margin: 0;
    padding-left: 1.4em;
}

/* "User guide · Help centre": one wrapping line, the dot stays between. */
body[data-brand='poster'][data-page='learn'] .guide-toc-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

body[data-brand='poster'] .guide-toc {
    padding: 22px;
    border: 0;
    border-radius: 24px;
    background: var(--bp-card);
}

body[data-brand='poster'] .guide-toc ol {
    border-top: 0;
    color: var(--text-soft);
}

/* Long titles wrap in this column, so a soft corner rather than a full pill. */
body[data-brand='poster'] .guide-toc a {
    display: block;
    padding: 7px 12px;
    border-radius: 14px;
    color: var(--text-soft);
    text-decoration: none;
}

body[data-brand='poster'] .guide-toc a::before {
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 800;
}

body[data-brand='poster'] .guide-toc a:hover {
    background: var(--accent-soft);
    color: var(--text);
}

body[data-brand='poster'] .guide-toc a[aria-current='page'] {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
}

body[data-brand='poster'] .guide-toc a[aria-current='page']::before {
    color: inherit;
}

/* The chapter counter belongs to the numbered list; the "Read as one page" and
   PDF links under it were picking up the last chapter's number. */
body[data-brand='poster'] .guide-toc-foot a::before {
    content: none;
}

body[data-brand='poster'] .guide-toc-foot {
    border-top-color: var(--line);
}

/* The article is a white sheet on the paper page. */
body[data-brand='poster'] .guide-article {
    padding: clamp(26px, 4vw, 52px);
    border-radius: 32px;
    background: var(--bp-card);
    font-size: 1.0625rem;
}

body[data-brand='poster'] .guide-article.is-full {
    max-width: 980px;
    margin-inline: auto;
}

body[data-brand='poster'] .guide-article h2 {
    font-size: clamp(1.875rem, 3vw, 2.5rem);
    line-height: 1.02;
}

body[data-brand='poster'] .guide-article h3 {
    font-size: 1.25rem;
}

body[data-brand='poster'] .guide-article .intro {
    font-size: 1.1875rem;
}

body[data-brand='poster'] .guide-article code,
body[data-brand='poster'] .learn-article code {
    border: 0;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-sans);
    font-weight: 700;
}

/* Plan tags. Premium is the only amber thing on the page. */
body[data-brand='poster'] .guide-article .tag {
    padding: 2px 10px;
    border: 0;
    font-size: 0.75rem;
    font-weight: 800;
}

body[data-brand='poster'] .guide-article .tag.free {
    background: var(--bp-lilac);
    color: var(--bp-lilac-ink);
}

body[data-brand='poster'] .guide-article .tag.paid {
    background: #dcdee8;
    color: #1c1e2a;
}

body[data-brand='poster'] .guide-article .tag:is(.premium, .pro) {
    background: var(--bp-amber);
    color: var(--bp-amber-ink);
}

body[data-brand='poster'] .guide-article .tag.optional {
    background: var(--bp-chip);
    color: var(--text-soft);
}

/* Notes, callouts and the manual's test cards. */
body[data-brand='poster'] .guide-article :is(.notice, .callout, .notes-box) {
    padding: 16px 20px;
    border: 0;
    border-radius: 20px;
    background: var(--bp-lilac);
    color: var(--bp-lilac-soft);
}

body[data-brand='poster'] .guide-article :is(.notice, .callout) b {
    color: var(--bp-lilac-ink);
}

body[data-brand='poster'] .guide-article .notice.warning {
    background: var(--warning-soft);
    color: var(--text);
}

body[data-brand='poster'] .guide-article .test {
    padding: 20px;
    border: 0;
    border-radius: 22px;
    background: var(--bp-chip);
}

body[data-brand='poster'] .guide-article .test-no {
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-display);
    font-weight: 800;
}

body[data-brand='poster'] .guide-article .path {
    border: 0;
    border-radius: 14px;
    background: var(--bp-card);
}

body[data-brand='poster'] .guide-article .path b {
    color: var(--accent);
    font-size: 0.8125rem;
}

body[data-brand='poster'] .guide-article .label {
    color: var(--text-soft);
    font-size: 0.8125rem;
}

/* Reference tables. */
body[data-brand='poster'] :is(.guide-article, .learn-article) .ref {
    border: 0;
    border-radius: 18px;
    background: var(--bp-chip);
}

body[data-brand='poster'] :is(.guide-article, .learn-article) .ref :is(th, td) {
    border: 0;
    border-bottom: 1px solid var(--line);
}

body[data-brand='poster'] :is(.guide-article, .learn-article) .ref thead th {
    background: var(--accent-soft);
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 700;
}

body[data-brand='poster'] .guide-article .check::before {
    color: var(--accent);
}

body[data-brand='poster'] .guide-section-group > .kicker {
    color: var(--accent);
}

/* Previous and next chapter. */
body[data-brand='poster'] .guide-pager {
    gap: 12px;
    border-top: 0;
}

body[data-brand='poster'] .guide-pager-link {
    padding: 20px 24px;
    border: 0;
    border-radius: 24px;
    background: var(--bp-card);
    color: var(--text);
    text-decoration: none;
}

body[data-brand='poster'] .guide-pager-link:hover {
    box-shadow: inset 0 0 0 2px var(--accent);
}

body[data-brand='poster'] .guide-pager-link span {
    color: var(--accent);
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

body[data-brand='poster'] .guide-pager-link b {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ===== Legal pages =================================================== */

body[data-brand='poster'] .legal-back {
    color: var(--accent);
    font-size: 0.9375rem;
    font-weight: 700;
}

/* The heading block is a violet card at the top of the page. */
body[data-brand='poster'] .legal-hero {
    margin-top: 18px;
    padding: clamp(30px, 5vw, 60px);
    border: 0;
    border-radius: 32px;
    background: var(--bp-violet);
    color: #ffffff;
}

body[data-brand='poster'] .legal-hero-head .kicker {
    color: var(--bp-on-violet-faint);
}

body[data-brand='poster'] .legal-hero h1 {
    color: #ffffff;
    font-size: clamp(2.75rem, 6vw, 4.75rem);
    letter-spacing: -0.045em;
    line-height: 0.92;
}

body[data-brand='poster'] .legal-intro {
    color: var(--bp-on-violet-soft);
}

body[data-brand='poster'] .legal-pill {
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--bp-violet-deep);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 700;
}

body[data-brand='poster'] .legal-toc {
    padding: 18px;
    border: 0;
    border-radius: 24px;
    background: var(--bp-card);
}

body[data-brand='poster'] .legal-toc-list {
    border-left: 0;
}

body[data-brand='poster'] :is(.legal-toc-list a, .legal-toc a) {
    margin-left: 0;
    padding: 7px 12px;
    border: 0;
    border-radius: 14px;
    color: var(--text-soft);
}

body[data-brand='poster'] :is(.legal-toc-list a, .legal-toc a):hover {
    background: var(--accent-soft);
    color: var(--text);
}

body[data-brand='poster'] :is(.legal-toc-list a, .legal-toc a).is-active {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
}

/* The card fills its column; the text inside keeps its 72-character measure. */
body[data-brand='poster'] .legal-article {
    max-width: none;
    padding: clamp(26px, 4vw, 52px);
    border-radius: 32px;
    background: var(--bp-card);
}

body[data-brand='poster'] .legal-article > * {
    max-width: 72ch;
}

body[data-brand='poster'] .policy-section h2 {
    font-size: clamp(1.75rem, 2.8vw, 2.375rem);
    line-height: 1.02;
}

body[data-brand='poster'] .policy-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

body[data-brand='poster'] :is(.legal-related, .legal-notice) {
    padding: 22px 24px;
    border: 0;
    border-radius: 24px;
    background: var(--bp-card);
}

/* ===== Demonstration source page ===================================== */

body[data-brand='poster'] .document-layout .document-content {
    padding: clamp(24px, 3.4vw, 40px);
    border-radius: 28px;
    background: var(--bp-card);
}

/* ===== Smaller screens ============================================== */

@media (max-width: 1024px) {
    body[data-brand='poster'] .guide-toc {
        border-radius: 22px;
    }

    body[data-brand='poster'][data-page='learn'] .guide-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-brand='poster'][data-page='learn'] .guide-toc {
        position: static;
        order: 2;
    }
}

/* The legal pages' contents list and text stack on narrower screens. legal.css
   meant to, but a later rule there re-declares the two columns at every width,
   which squeezed the text to a word per line on phones. */
@media (max-width: 900px) {
    body[data-brand='poster'] .legal-doc {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    body[data-brand='poster'] .legal-toc {
        position: static;
    }
}

@media (max-width: 620px) {
    body[data-brand='poster'] :is(.guide-article, .legal-article) {
        padding: 22px 18px;
        border-radius: 24px;
    }

    body[data-brand='poster'] .legal-hero {
        border-radius: 26px;
    }

    body[data-brand='poster'] .guide-pager-link {
        padding: 16px 18px;
    }
}