/* =============================================================================
   Legal pages — Privacy Policy, Terms of Service, Cookie Policy
   =============================================================================
   Loaded only by the legal pages (via `block head`), not by site.css, so the
   rest of the app does not carry it.

   Written as plain CSS with real media queries rather than Tailwind responsive
   variants: the utility layer in site.css out-specifies Tailwind's `md:`/`lg:`
   classes, so breakpoint utilities silently lose. Anything that changes at a
   breakpoint lives here.

   Layout is a navigation rail plus a measured text column. Legal documents get
   navigated and cited rather than read top to bottom, so the contents list is
   sticky on desktop and collapses into a <details> on mobile.
   ========================================================================== */

.legal {
    background: var(--bg-primary);
    min-height: 100vh;
}

/* ---- Masthead ---- */

.legal__masthead {
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

.legal__masthead-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 72px 24px 36px;
}

.legal__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0 0 14px;
}

.legal__standfirst {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 62ch;
    margin: 0 0 28px;
}

/* Revision line. Legal documents live or die on "which version am I reading",
   so the dates get equal billing rather than being tucked into a footer. */
.legal__revision {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid var(--border-primary);
}

.legal__revision > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.legal__revision dt {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin: 0;
}

.legal__revision dd {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ---- Body grid ---- */

.legal__body {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 24px 96px;
}

.legal__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}

/* Grid items default to min-width: auto, so a wide descendant (the register
   table sets min-width: 640px) props the track open and the whole page scrolls
   sideways on a phone. Letting the items shrink keeps the overflow inside the
   table's own scroll container, which is where it belongs. */
.legal__grid > * {
    min-width: 0;
}

@media (min-width: 960px) {
    .legal__grid {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 64px;
        align-items: start;
    }
}

/* ---- Contents rail ----
   <details> on mobile so it folds away; forced open and sticky on desktop. */

.legal__contents {
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    background: var(--bg-card);
    padding: 14px 16px;
}

/* The default disclosure triangle is kept below 960px, where this really is a
   collapsible panel and the marker is the affordance for that. */
.legal__contents-summary {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

@media (min-width: 960px) {
    .legal__contents {
        position: sticky;
        top: 32px;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        border: none;
        background: none;
        padding: 0;
    }

    .legal__contents-summary {
        cursor: default;
        margin-bottom: 10px;
        /* Disclosure arrow is meaningless once the list is permanently open. */
        list-style: none;
    }

    .legal__contents-summary::-webkit-details-marker {
        display: none;
    }
}

.legal__contents ol {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    counter-reset: legal-toc;
}

@media (min-width: 960px) {
    .legal__contents ol {
        margin-top: 0;
    }
}

.legal__contents li {
    counter-increment: legal-toc;
    margin: 0;
}

.legal__contents a {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    align-items: baseline;
    padding: 6px 0 6px 10px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
}

.legal__contents a::before {
    content: counter(legal-toc);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.legal__contents a:hover,
.legal__contents a:focus-visible {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}

/* ---- Prose column ---- */

.legal__prose {
    max-width: 68ch;
    color: var(--text-secondary);
    font-size: 1.0625rem;
    line-height: 1.7;
    counter-reset: legal-section;
}

.legal__prose > section {
    counter-increment: legal-section;
    margin-bottom: 48px;
    scroll-margin-top: 24px;
}

.legal__prose > section:last-child {
    margin-bottom: 0;
}

/* Hanging clause numbers: standard practice in legal setting, so the text
   stays flush left and each section is citable. Only hangs into the margin
   where there is margin to hang into; inline below that. */
.legal__prose h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0 0 16px;
    scroll-margin-top: 24px;
}

.legal__prose h2::before {
    content: counter(legal-section) ".";
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    margin-right: 0.5rem;
}

@media (min-width: 1200px) {
    .legal__prose h2 {
        position: relative;
    }

    .legal__prose h2::before {
        position: absolute;
        left: -3.25rem;
        width: 2.5rem;
        margin-right: 0;
        text-align: right;
    }
}

.legal__prose h3 {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 28px 0 10px;
}

.legal__prose p {
    margin: 0 0 16px;
}

.legal__prose p:last-child {
    margin-bottom: 0;
}

.legal__prose a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal__prose ul {
    margin: 0 0 16px;
    padding-left: 1.25rem;
}

.legal__prose li {
    margin-bottom: 8px;
}

.legal__prose li:last-child {
    margin-bottom: 0;
}

.legal__prose strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* ---- Callout ----
   For the few things a reader must not miss. Sparing: three per document. */

.legal__note {
    border-left: 3px solid var(--color-primary);
    background: var(--bg-tertiary);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin: 0 0 24px;
    font-size: 1rem;
}

.legal__note p:last-child {
    margin-bottom: 0;
}

.legal__note--warning {
    border-left-color: var(--color-warning);
    background: var(--color-warning-bg);
}

/* ---- Data register ----
   The centrepiece. A privacy policy is a stock-take of what is held, why, and
   for how long, which is the same shape as the inventory this product manages.
   A real table so it can be scanned and audited rather than buried in prose.
   Scrolls inside itself on narrow screens; the page never scrolls sideways. */

.legal__register {
    margin: 0 0 28px;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-card);
}

/* The scroll container is focusable (see the markup) so it can be scrolled by
   keyboard, which WCAG 2.1.1 requires of any scrollable region. The fade on the
   right edge is the affordance that there is more to see: without it the table
   just looks cropped. It sits above the scrolling content and ignores pointer
   events so it cannot block a drag. */
.legal__register {
    position: relative;
}

.legal__register::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--bg-card));
}

/* Above the table's min-width there is nothing to scroll, so the fade would be
   lying about hidden content. */
@media (min-width: 760px) {
    .legal__register::after {
        display: none;
    }
}

.legal__register-scroll {
    overflow-x: auto;
}

.legal__register-scroll:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
}

.legal__register table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.legal__register caption {
    text-align: left;
    padding: 14px 18px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
}

.legal__register th {
    text-align: left;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-primary);
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-primary);
    white-space: nowrap;
}

.legal__register td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-secondary);
    vertical-align: top;
    line-height: 1.55;
}

.legal__register tbody tr:last-child td {
    border-bottom: none;
}

.legal__register td:first-child {
    color: var(--text-primary);
    font-weight: 600;
}

.legal__retention {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Contact block ---- */

.legal__contact {
    padding: 20px 24px;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    background: var(--bg-card);
}

.legal__contact p {
    margin-bottom: 8px;
}

.legal__contact p:last-child {
    margin-bottom: 0;
}

/* ---- Placeholder tokens ----
   Company details that still need filling in. Deliberately loud so they
   cannot ship unnoticed. Delete this rule once the tokens are replaced. */

.legal-token {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-bottom: 1px dashed currentColor;
    padding: 0 3px;
    font-weight: 600;
    font-style: normal;
    border-radius: 2px;
}

/* ---- Definition list ----
   Used by the sub-processors and vulnerability-disclosure pages, and by the
   complaints procedure in the privacy policy: a term with a short explanation,
   where a table would be too heavy and a bulleted list would lose the pairing.
   Stacks on narrow screens so the term never gets squeezed to one word a line. */

.legal__deflist {
    margin: 0 0 24px;
    padding: 20px 24px;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    background: var(--bg-card);
}

.legal__deflist > div {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 8px 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-primary);
}

.legal__deflist > div:first-child {
    padding-top: 0;
}

.legal__deflist > div:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.legal__deflist dt {
    font-weight: 600;
    color: var(--text-primary);
}

.legal__deflist dd {
    margin: 0;
    color: var(--text-secondary);
}

.legal__deflist dd:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .legal__deflist > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}