/* =============================================================================
   HisaBooks — Document pages
   -----------------------------------------------------------------------------
   Typography for text-heavy public policy, compliance, security, status, and
   support pages. The existing markup uses .legal-* class names; new document
   pages should prefer the matching .hb-doc equivalents below.
   ============================================================================= */
/* ── Page frame ───────────────────────────────────────────────────────────── */
.hb-doc,
.legal-shell {
    /* The nav floats, so the first line needs to clear it. */
    padding-top: calc(var(--hb-nav-h) + clamp(28px, calc(4 * var(--hb-vw, 1vw)), 52px));
    padding-bottom: clamp(64px, calc(7 * var(--hb-vw, 1vw)), 104px);
    background: transparent;
}

body.hb.legal-page {
    background: var(--hb-mist);
}

.hb-doc__card,
.legal-card {
    width: min(760px, calc(100% - 2 * clamp(20px, calc(5 * var(--hb-vw, 1vw)), 64px)));
    margin-inline: auto;
    padding: clamp(28px, calc(4 * var(--hb-vw, 1vw)), 56px);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-md);
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */
.hb-doc__version,
.legal-eyebrow {
    display: block;
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hb-faint);
    margin-bottom: var(--hb-s3);
}

.hb-doc__card h1,
.legal-card h1 {
    font-size: clamp(1.9rem, 1.35rem + calc(2 * var(--hb-vw, 1vw)), 2.7rem);
    line-height: 1.1;
    letter-spacing: -.032em;
    font-weight: 660;
    color: var(--hb-ink);
    margin-bottom: var(--hb-s3);
    text-wrap: balance;
}

.hb-doc__updated,
.legal-updated {
    display: inline-block;
    padding: 5px 12px;
    margin-bottom: var(--hb-s6);
    border-radius: var(--hb-r-pill);
    background: var(--hb-mist);
    border: 1px solid var(--hb-line-soft);
    font-size: var(--hb-t-xs);
    font-weight: 520;
    color: var(--hb-muted);
}

/* ── Prose ────────────────────────────────────────────────────────────────── */
.hb-doc__card p,
.legal-card p {
    font-size: var(--hb-t-sm);
    line-height: 1.75;
    color: var(--hb-ink-soft);
    margin-bottom: var(--hb-s4);
    text-wrap: pretty;
}

.hb-doc__card h2,
.legal-card h2 {
    font-size: clamp(1.15rem, 1rem + calc(.6 * var(--hb-vw, 1vw)), 1.4rem);
    line-height: 1.3;
    letter-spacing: -.022em;
    font-weight: 620;
    color: var(--hb-ink);
    margin-bottom: var(--hb-s4);
}

.hb-doc__card h3,
.legal-card h3 {
    font-size: var(--hb-t-body);
    line-height: 1.4;
    letter-spacing: -.014em;
    font-weight: 600;
    color: var(--hb-ink);
    margin: var(--hb-s5) 0 var(--hb-s3);
}

.hb-doc__card ul,
.hb-doc__card ol,
.legal-card ul,
.legal-card ol {
    display: grid;
    gap: 9px;
    margin-bottom: var(--hb-s4);
    padding-left: 0;
    list-style: none;
}

.hb-doc__card li,
.legal-card li {
    position: relative;
    padding-left: 26px;
    font-size: var(--hb-t-sm);
    line-height: 1.7;
    color: var(--hb-ink-soft);
}

/* Bulleted lists get a dot; this is a list marker, not decoration before a
   heading, so it is outside the no-decorative-dash rule. */
.hb-doc__card ul > li::before,
.legal-card ul > li::before {
    content: "";
    position: absolute;
    left: 8px;
    top: .68em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hb-blue);
}

.hb-doc__card ol,
.legal-card ol { counter-reset: hb-doc-item; }
.hb-doc__card ol > li,
.legal-card ol > li { counter-increment: hb-doc-item; }
.hb-doc__card ol > li::before,
.legal-card ol > li::before {
    content: counter(hb-doc-item) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-size: var(--hb-t-xs);
    font-weight: 620;
    color: var(--hb-blue-deep);
    font-variant-numeric: tabular-nums;
}

.hb-doc__card a,
.legal-card a {
    color: var(--hb-blue-deep);
    font-weight: 520;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--hb-blue-mist);
    transition: text-decoration-color var(--hb-fast) var(--hb-ease), color var(--hb-fast) var(--hb-ease);
}
.hb-doc__card a:hover,
.legal-card a:hover { color: var(--hb-blue-dark); text-decoration-color: currentColor; }

.hb-doc__card strong,
.legal-card strong { font-weight: 600; color: var(--hb-ink); }

.hb-doc__card code,
.legal-card code {
    font-family: var(--hb-mono);
    font-size: .9em;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--hb-mist);
    border: 1px solid var(--hb-line-soft);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.hb-doc__section,
.legal-section {
    padding-top: var(--hb-s7);
    margin-top: var(--hb-s7);
    border-top: 1px solid var(--hb-line-soft);
}
.hb-doc__section:first-of-type,
.legal-section:first-of-type { padding-top: 0; margin-top: var(--hb-s6); border-top: 0; }
.hb-doc__section > *:last-child,
.legal-section > *:last-child { margin-bottom: 0; }

/* ── Callout ──────────────────────────────────────────────────────────────── */
.hb-doc__callout,
.legal-callout {
    padding: var(--hb-s4) var(--hb-s5);
    margin-bottom: var(--hb-s6);
    border-radius: var(--hb-r-sm);
    background: var(--hb-blue-wash);
    border: 1px solid var(--hb-blue-mist);
    font-size: var(--hb-t-sm);
    line-height: 1.7;
    color: var(--hb-ink-soft);
}
.hb-doc__callout strong,
.legal-callout strong { color: var(--hb-blue-ink); }

/* ── Contents ─────────────────────────────────────────────────────────────── */
.hb-doc__toc,
.legal-toc {
    padding: var(--hb-s5);
    margin-bottom: var(--hb-s7);
    border-radius: var(--hb-r-sm);
    background: var(--hb-mist);
    border: 1px solid var(--hb-line-soft);
}
.hb-doc__toc > strong,
.legal-toc > strong {
    display: block;
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hb-faint);
    margin-bottom: var(--hb-s3);
}
.hb-doc__toc ol,
.legal-toc ol { margin-bottom: 0; gap: 4px; }
.hb-doc__toc li,
.legal-toc li { line-height: 1.5; }
.hb-doc__toc a,
.legal-toc a { text-decoration: none; }
.hb-doc__toc a:hover,
.legal-toc a:hover { text-decoration: underline; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.hb-doc__table-wrap,
.legal-table-wrap {
    /* Wide tables scroll inside their own box; the page never scrolls sideways. */
    overflow-x: auto;
    margin-bottom: var(--hb-s5);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-sm);
    -webkit-overflow-scrolling: touch;
}

.hb-doc__table,
.legal-table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: var(--hb-t-xs);
}
.hb-doc__table th,
.hb-doc__table td,
.legal-table th,
.legal-table td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
    border-bottom: 1px solid var(--hb-line-soft);
}
.hb-doc__table th,
.legal-table th {
    background: var(--hb-mist);
    font-weight: 620;
    color: var(--hb-ink);
    white-space: nowrap;
}
.hb-doc__table td,
.legal-table td { color: var(--hb-ink-soft); }
.hb-doc__table tr:last-child td,
.legal-table tr:last-child td { border-bottom: 0; }

/* ── Closing note ─────────────────────────────────────────────────────────── */
.hb-doc__foot {
    width: min(760px, calc(100% - 2 * clamp(20px, calc(5 * var(--hb-vw, 1vw)), 64px)));
    margin: var(--hb-s5) auto 0;
    font-size: var(--hb-t-xs);
    color: var(--hb-faint);
    text-align: center;
}

@media (max-width: 560px) {
    .hb-doc__card,
    .legal-card { border-radius: var(--hb-r-md); }
}

/* =============================================================================
   LEGAL — the document navigator
   -----------------------------------------------------------------------------
   Sixteen documents used to be sixteen dead ends: whichever one you opened, the
   other fifteen were unreachable without going back to the footer. Somebody
   reading the Privacy Policy usually wants the DPA or the subprocessor list
   next, so the whole set now travels with the page.

   Built on <details>, which means the groups open and close with no script at
   all, and the group holding the open document is expanded server-side.
   ============================================================================= */

.legal-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, calc(3 * var(--hb-vw, 1vw)), 48px);
    width: min(1120px, calc(100% - 2 * clamp(20px, calc(5 * var(--hb-vw, 1vw)), 56px)));
    margin-inline: auto;
}

/* The card no longer centres itself; the grid places it. */
.legal-shell > .legal-card,
.legal-shell > .hb-doc__card {
    width: auto;
    margin-inline: 0;
}

/* ── The navigator ────────────────────────────────────────────────────────── */
.legal-nav {
    position: sticky;
    top: calc(var(--hb-nav-h) + 20px);
    padding: clamp(16px, calc(1.8 * var(--hb-vw, 1vw)), 20px);
    max-height: calc(calc(100 * var(--hb-vh, 1vh)) - var(--hb-nav-h) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border-radius: var(--hb-r-md);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
}

.legal-nav__title {
    margin: 0 0 var(--hb-s3);
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hb-muted);
}

.legal-nav__group { border-top: 1px solid var(--hb-line-soft); }
.legal-nav__group:first-of-type { border-top: 0; }

.legal-nav__group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    list-style: none;
    cursor: pointer;
    font-size: var(--hb-t-xs);
    font-weight: 620;
    color: var(--hb-ink);
}
.legal-nav__group > summary::-webkit-details-marker { display: none; }
.legal-nav__group > summary:hover { color: var(--hb-blue-deep); }
.legal-nav__group > summary:focus-visible {
    outline: 2px solid var(--hb-blue);
    outline-offset: 2px;
    border-radius: var(--hb-r-sm);
}
.legal-nav__group > summary svg {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: var(--hb-muted);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--hb-fast) var(--hb-ease);
}
.legal-nav__group[open] > summary svg { transform: rotate(180deg); }

/* One line saying what the group is for, so the choice is not made from the
   titles alone. */
.legal-nav__blurb {
    margin: 0 0 8px;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--hb-muted);
}

.legal-nav ul { display: grid; gap: 1px; margin: 0 0 10px; padding: 0; list-style: none; }
.legal-nav li { margin: 0; padding: 0; }
.legal-nav li::before { content: none; }

.legal-nav a {
    display: block;
    padding: 6px 10px;
    margin-left: -10px;
    border-radius: var(--hb-r-sm);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--hb-ink-soft);
    transition: background-color var(--hb-fast) var(--hb-ease), color var(--hb-fast) var(--hb-ease);
}
.legal-nav a:hover { background: var(--hb-mist); color: var(--hb-blue-deep); }
.legal-nav a.is-current {
    background: var(--hb-blue-wash);
    color: var(--hb-blue-dark);
    font-weight: 620;
}

.legal-nav__foot {
    margin: var(--hb-s3) 0 0;
    padding-top: var(--hb-s3);
    border-top: 1px solid var(--hb-line-soft);
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--hb-muted);
}
.legal-nav__foot a {
    display: inline;
    padding: 0;
    margin: 0;
    color: var(--hb-blue-deep);
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-nav__foot a:hover { background: none; }

/* ── Stacked ──────────────────────────────────────────────────────────────────
   Below the split the navigator becomes one closed disclosure above the
   document, so it never pushes the text somebody came to read off the screen.
   -------------------------------------------------------------------------- */
/* On desktop the wrapper is not a control at all: the groups sit directly in
   the sidebar and the summary is hidden. */
.legal-nav__all { display: contents; }
.legal-nav__all > summary { display: none; }

@media (max-width: 900px) {
    .legal-shell { grid-template-columns: minmax(0, 1fr); }
    .legal-nav {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0;
    }

    /* One closed row rather than 486px of index above the heading somebody
       came to read. Putting it after the document instead would bury it at the
       foot of a twenty thousand pixel policy, which is no better. */
    .legal-nav__all { display: block; }
    .legal-nav__all > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 13px clamp(14px, calc(4 * var(--hb-vw, 1vw)), 18px);
        list-style: none;
        cursor: pointer;
        border-radius: var(--hb-r-md);
        background: var(--hb-paper);
        border: 1px solid var(--hb-line);
        font-size: var(--hb-t-xs);
        font-weight: 620;
        color: var(--hb-ink);
    }
    .legal-nav__all > summary::-webkit-details-marker { display: none; }
    .legal-nav__all > summary svg {
        width: 15px;
        height: 15px;
        flex: none;
        fill: none;
        stroke: var(--hb-muted);
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform var(--hb-fast) var(--hb-ease);
    }
    .legal-nav__all[open] > summary {
        border-radius: var(--hb-r-md) var(--hb-r-md) 0 0;
        border-bottom-color: transparent;
    }
    .legal-nav__all[open] > summary svg { transform: rotate(180deg); }

    /* Everything after the summary is the panel it opens. */
    .legal-nav__all > :not(summary) { margin-inline: clamp(14px, calc(4 * var(--hb-vw, 1vw)), 18px); }
    .legal-nav__all[open] {
        border-radius: var(--hb-r-md);
        background: var(--hb-paper);
        border: 1px solid var(--hb-line);
        padding-bottom: clamp(12px, calc(3 * var(--hb-vw, 1vw)), 16px);
    }
    .legal-nav__all[open] > summary { border: 0; background: none; padding-inline: clamp(14px, calc(4 * var(--hb-vw, 1vw)), 18px); }
    .legal-nav__title { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .legal-nav__all > summary svg { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .legal-nav__group > summary svg { transition: none; }
}