/*
 * Heatrail — published legal documents (Terms of Service, DPA).
 * ---------------------------------------------------------------------------
 * A legal document is a DOCUMENT, not an app screen. The rest of the portal is
 * a dark product UI (public/css/portal.css); these pages deliberately are not.
 * They are read once, carefully, by somebody deciding whether to sign — and
 * then printed by that person's lawyer. So: paper-white, a single narrow
 * measure, one accent reserved for links, hairline rules instead of panels,
 * and a print stylesheet that produces a clean A4 contract.
 *
 * COMMITTED TO LIGHT, ON PURPOSE. No `prefers-color-scheme` block here. The
 * portal's own pages carry no dark/light switch at all — portal.css is
 * unconditionally dark — so there is no viewer preference for this page to
 * stay coherent with, and a contract that changes colour with an OS setting is
 * a contract whose printed and on-screen forms differ. `color-scheme: light`
 * is declared so the browser stops re-tinting scrollbars and form controls.
 *
 * NO INLINE STYLE ANYWHERE. The portal ships a strict CSP with no
 * 'unsafe-inline' (App\Http\Middleware\SecurityHeaders): an inline <style>, a
 * style="" attribute or an inline <script> is BLOCKED, silently. Everything
 * visual lives in this file.
 *
 * THE ARCHIVE HAS TO KEEP RENDERING. Superseded versions are served forever,
 * byte for byte, and they were written against portal.css class names
 * (.card / .sub / .small / .badge). Their bytes can never be touched, so this
 * file restyles those legacy names inside .doc rather than letting an accepted
 * document degrade into unstyled text. See "Archive compatibility" below.
 */

:root {
    color-scheme: light;

    /* Ink. Near-black on off-white; greys are neutral, never tinted. */
    --doc-ink: #16191d;          /* body copy            17.9:1 on paper */
    --doc-ink-soft: #3c434c;     /* secondary prose      10.0:1 */
    --doc-muted: #5c6470;        /* meta, labels, rules   6.0:1 */
    --doc-paper: #ffffff;
    --doc-ground: #f4f3f1;       /* the desk the sheet sits on */

    /* Rules. Hairlines do the work that borders and shadows would. */
    --doc-rule: #e2e0dc;
    --doc-rule-strong: #c9c6c0;

    /* The one accent. Links only — never a heading, never a background. */
    --doc-link: #1a4d8f;         /* 8.5:1 on paper */
    --doc-link-hover: #123a6d;

    /* Documentary warning, for the "this version is not in force" notice. */
    --doc-flag-rule: #cbb279;
    --doc-flag-wash: #fbf6ea;

    --doc-measure: 36rem;        /* ~72 characters at 16px */
    --doc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --doc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

body.legal-page {
    margin: 0;
    background: var(--doc-ground);
    color: var(--doc-ink);
    font-family: var(--doc-sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.legal-page a {
    color: var(--doc-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(26, 77, 143, .38);
}

.legal-page a:hover {
    color: var(--doc-link-hover);
    text-decoration-color: currentColor;
}

.legal-page a:focus-visible,
.legal-page :focus-visible {
    outline: 2px solid var(--doc-link);
    outline-offset: 2px;
}

/* ── Site header ────────────────────────────────────────────────────────────
   The portal's own bar, in the document's palette: same wordmark, same
   left-brand / right-nav shape, so the reader can see whose paper this is and
   get back. Not sticky — a contract does not need chrome following it down. */

.doc-topbar {
    background: var(--doc-paper);
    border-bottom: 1px solid var(--doc-rule);
}

.doc-topbar-inner {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.doc-brand {
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--doc-ink);
    text-decoration: none;
}

.doc-brand:hover { color: var(--doc-ink); text-decoration: none; }
.doc-brand-mark { font-weight: 600; }
.doc-brand-sep { color: var(--doc-rule-strong); margin: 0 .5rem; font-weight: 400; }
.doc-brand-sub { color: var(--doc-muted); font-weight: 400; }

.doc-topbar-links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: .875rem;
}

.doc-topbar-links a { text-decoration: none; }
.doc-topbar-links a:hover { text-decoration: underline; }

/* ── The sheet ─────────────────────────────────────────────────────────────
   One column, one measure. No radius, no shadow: a border and white paper. */

.doc-sheet {
    max-width: calc(var(--doc-measure) + 6rem);
    margin: 0 auto;
    padding: 3.5rem 3rem 4.5rem;
    background: var(--doc-paper);
    border-left: 1px solid var(--doc-rule);
    border-right: 1px solid var(--doc-rule);
    min-height: 100vh;
}

.doc-sheet > * { max-width: var(--doc-measure); }

/* ── Masthead ──────────────────────────────────────────────────────────────
   Title, version, effective date and status — a contract's first page. Version
   and date are rendered from the registry (config/legal.php), never retyped
   into the document body, so the page can never state a version the digest
   does not belong to. */

.doc-masthead {
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--doc-ink);
    margin-bottom: 2rem;
}

.doc-eyebrow {
    margin: 0 0 .625rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--doc-muted);
}

.doc-title {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.018em;
    color: var(--doc-ink);
}

.doc-meta {
    margin: .875rem 0 0;
    font-size: .8125rem;
    color: var(--doc-muted);
    line-height: 1.6;
}

.doc-meta-item { white-space: nowrap; }
.doc-meta-sep { margin: 0 .5rem; color: var(--doc-rule-strong); }
.doc-meta .doc-mono { font-family: var(--doc-mono); font-size: .78125rem; letter-spacing: -.01em; }

/* ── Archive notice ────────────────────────────────────────────────────────
   Square, hairline, unmissable, and NOT a rounded callout card: a superseded
   version is served only because somebody accepted it, and a reader must never
   mistake it for the agreement in force. */

.doc-archive-notice {
    margin: 0 0 2rem;
    padding: .875rem 1.125rem;
    background: var(--doc-flag-wash);
    border: 1px solid var(--doc-flag-rule);
    font-size: .875rem;
    line-height: 1.6;
    color: var(--doc-ink);
}

.doc-archive-notice strong { font-weight: 600; }

/* ── Document body ─────────────────────────────────────────────────────────
   `.doc` wraps the streamed source file. Everything below is authored either
   by the current documents (semantic markup) or by the archived ones (legacy
   portal.css class names) — both have to read as a document. */

.doc {
    font-size: 1rem;
    line-height: 1.65;
}

.doc p {
    margin: 0 0 1rem;
    color: var(--doc-ink);
}

.doc-lede {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--doc-ink-soft);
    margin-bottom: 1.75rem;
}

.doc strong { font-weight: 600; }

.doc code,
.doc .doc-mono {
    font-family: var(--doc-mono);
    font-size: .875em;
    letter-spacing: -.01em;
}

/* Definition tables: parties, roles, retention. Hairline rules, no fill. */
.doc-key {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.25rem;
    font-size: .9375rem;
    border-top: 1px solid var(--doc-rule);
}

.doc-key th,
.doc-key td {
    text-align: left;
    vertical-align: top;
    padding: .5625rem .75rem .5625rem 0;
    border-bottom: 1px solid var(--doc-rule);
}

.doc-key th {
    width: 11rem;
    font-weight: 400;
    color: var(--doc-muted);
    white-space: nowrap;
}

.doc-key td { color: var(--doc-ink); padding-right: 0; }

.doc-note {
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--doc-muted);
    margin: 0 0 2.25rem;
}

/* Table of contents: quiet, numbered, no bullets, no decoration. */
.doc-toc {
    margin: 0 0 2.75rem;
    padding: 1.125rem 0 1.25rem;
    border-top: 1px solid var(--doc-rule);
    border-bottom: 1px solid var(--doc-rule);
}

.doc-toc-title {
    margin: 0 0 .625rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--doc-muted);
}

.doc-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
    font-size: .9375rem;
    line-height: 1.5;
}

.doc-toc li {
    counter-increment: toc;
    display: flex;
    gap: .75rem;
    padding: .1875rem 0;
}

.doc-toc li::before {
    content: counter(toc) ".";
    color: var(--doc-muted);
    font-variant-numeric: tabular-nums;
    min-width: 1.5rem;
    text-align: right;
}

.doc-toc a { text-decoration: none; color: var(--doc-link); }
.doc-toc a:hover { text-decoration: underline; }

/* Sections. Distinguished by weight and space; never by hue. Stable anchors:
   #section-4 is the addressable name of clause 4, so it may not be renamed. */
.doc-section {
    margin: 0 0 2rem;
    scroll-margin-top: 1.5rem;
}

.doc-section + .doc-section { margin-top: 2.5rem; }

.doc h2 {
    margin: 0 0 .75rem;
    font-size: 1.0625rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -.006em;
    color: var(--doc-ink);
    /* Hanging number, without a negative margin that can clip on a phone. */
    padding-left: 2rem;
    text-indent: -2rem;
}

.doc h3 {
    margin: 1.75rem 0 .5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--doc-ink);
}

.doc-num {
    display: inline-block;
    min-width: 2rem;
    color: var(--doc-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    text-indent: 0;
}

.doc-num:hover { color: var(--doc-link); text-decoration: none; }

.doc ul,
.doc ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.doc li { margin: 0 0 .5rem; }
.doc li:last-child { margin-bottom: 0; }
.doc ol.doc-clauses { padding-left: 1.75rem; }
.doc ol.doc-clauses > li { margin-bottom: .75rem; }

/* Content tables (the pricing schedule). Hairlines, tabular numerals, no fill.
   The row markup is byte-checked by LegalDocumentsTest against the billed
   tiers, so it stays `<tr><td>…</td><td>…</td></tr>` with no attributes. */
.doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem;
    font-size: .9375rem;
    border-top: 1px solid var(--doc-rule-strong);
}

.doc th,
.doc td {
    text-align: left;
    padding: .5rem .75rem .5rem 0;
    border-bottom: 1px solid var(--doc-rule);
    vertical-align: top;
}

.doc thead th {
    font-weight: 600;
    font-size: .8125rem;
    color: var(--doc-muted);
    padding-bottom: .4375rem;
}

.doc tbody td {
    font-variant-numeric: tabular-nums;
    color: var(--doc-ink);
}

/* Unnumbered closing blocks: document history, contact line. */
.doc-tail {
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--doc-rule);
}

.doc-tail h2 {
    padding-left: 0;
    text-indent: 0;
    font-size: .9375rem;
    margin-bottom: .625rem;
}

.doc-contact {
    margin: 1.75rem 0 0;
    font-size: .875rem;
    color: var(--doc-muted);
}

/* ── Colophon ──────────────────────────────────────────────────────────────
   Not part of the agreement: the registry's own account of which bytes this
   is. Set apart by a rule and by size, so it never reads as a clause. */

.doc-colophon {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--doc-rule-strong);
    font-size: .8125rem;
    line-height: 1.65;
    color: var(--doc-muted);
}

.doc-colophon h2 {
    margin: 0 0 .625rem;
    padding-left: 0;
    text-indent: 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--doc-muted);
}

.doc-colophon p { margin: 0 0 .75rem; }
.doc-colophon p:last-child { margin-bottom: 0; }

.doc-digest {
    display: block;
    font-family: var(--doc-mono);
    font-size: .75rem;
    line-height: 1.5;
    color: var(--doc-ink-soft);
    background: #faf9f7;
    border: 1px solid var(--doc-rule);
    padding: .625rem .75rem;
    margin: 0 0 .75rem;
    word-break: break-all;
}

.doc-permalink { font-family: var(--doc-mono); font-size: .75rem; word-break: break-all; }

/* ── Archive compatibility ─────────────────────────────────────────────────
   Superseded versions were authored against portal.css and their bytes are
   frozen (their SHA-256 is on stored consent rows). Their class names are
   re-mapped here so an accepted document keeps reading as a document instead
   of decaying into a wall of 13px text on a dark-theme panel that no longer
   exists. Never delete these rules: the files they serve can never be edited.

   In those files `p.small` is BODY copy while `p.small.muted` is meta, so the
   two are given different sizes rather than one compromise. */

.doc .card {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 0 2rem;
}

.doc .card > h2 { padding-left: 0; text-indent: 0; }

.doc .sub {
    font-size: .8125rem;
    color: var(--doc-muted);
    margin: 0 0 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--doc-rule);
}

.doc .small { font-size: 1rem; }
.doc .small.muted,
.doc .muted.small { font-size: .8125rem; }
.doc .muted { color: var(--doc-muted); }
.doc .mt-2 { margin-top: .5rem; }
.doc .mt-3 { margin-top: .875rem; }

/* The DRAFT mark on an archived version is part of what was accepted. It is
   preserved, in the document's own palette rather than the dark UI's. */
.doc .badge {
    display: inline-block;
    padding: .0625rem .4375rem;
    margin-right: .375rem;
    border: 1px solid var(--doc-flag-rule);
    border-radius: 2px;
    background: var(--doc-flag-wash);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .07em;
    color: #6b5410;
    vertical-align: 1px;
}

/* ── Narrow viewports ──────────────────────────────────────────────────── */

/* `screen and` is load-bearing: an A4 page at these margins is ~657px wide,
   only just over the 640px breakpoint, so a reader with wider print margins
   would otherwise get the stacked phone layout on paper. */
@media screen and (max-width: 40rem) {
    .doc-sheet {
        padding: 2.25rem 1.25rem 3rem;
        border-left: 0;
        border-right: 0;
    }

    /* The wordmark alone: "Heatrail / Partner Portal" plus two links wraps to
       three ragged lines on a phone, which is the header drawing attention to
       itself on a page that is meant to be read. */
    .doc-topbar-inner { padding: 0 1.25rem; gap: .75rem; }
    .doc-brand-sep,
    .doc-brand-sub { display: none; }
    .doc-topbar-links { gap: .875rem; font-size: .8125rem; }

    .doc-title { font-size: 1.5rem; }

    .doc-key th,
    .doc-key td { display: block; width: auto; white-space: normal; }
    .doc-key th { border-bottom: 0; padding-bottom: 0; }
    .doc-key td { padding-top: .125rem; }

    .doc table { font-size: .875rem; }
}

/* ── Print ─────────────────────────────────────────────────────────────────
   The first thing a customer's lawyer does is print this. A4, black on white,
   no site chrome, no link colour, and clause numbers that survive the page
   break. Absolute URLs are spelled out after their link text — on paper a
   permalink to the exact accepted version is the whole point of the page. */

@page {
    size: A4;
    margin: 20mm 18mm;
}

@media print {
    :root {
        --doc-ink: #000;
        --doc-ink-soft: #000;
        --doc-muted: #333;
        --doc-rule: #bbb;
        --doc-rule-strong: #888;
        --doc-link: #000;
    }

    body.legal-page {
        background: #fff;
        font-size: 10.5pt;
        line-height: 1.5;
    }

    .doc-topbar,
    .doc-topbar-links { display: none; }

    .doc-sheet {
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: #fff;
    }

    .doc-sheet > * { max-width: none; }

    .legal-page a {
        color: #000;
        text-decoration: none;
    }

    /* Spell out destinations that a reader cannot follow off paper. */
    .doc a[href^="http"]::after,
    .doc a[href^="mailto:"]::after,
    .doc-colophon a[href^="http"]::after {
        content: " <" attr(href) ">";
        font-family: var(--doc-mono);
        font-size: 8.5pt;
        word-break: break-all;
    }

    /* ...but not the in-page clause links, which would print as noise. */
    .doc-toc a::after,
    .doc-num::after { content: none; }

    .doc-title { font-size: 18pt; }
    .doc h2 { font-size: 11.5pt; }
    .doc-masthead { border-bottom-width: 1.5pt; }

    .doc-archive-notice {
        background: #fff;
        border: 1.5pt solid #000;
    }

    .doc-digest { background: #fff; }

    .doc-toc { break-after: page; page-break-after: always; }

    .doc-section,
    .doc-key tr,
    .doc table tr,
    .doc li { break-inside: avoid; page-break-inside: avoid; }

    .doc h2,
    .doc h3,
    .doc-toc-title,
    .doc-colophon h2 { break-after: avoid; page-break-after: avoid; }

    .doc p,
    .doc li { orphans: 3; widows: 3; }
}