/* ===========================================================
   legal.css — one template for every /support/* and /privacy/* page.

   Loaded after style.css: tokens, fonts, links, the dark theme and the
   skip link come from there. This file only lays out the document.
   The app's own colour lives in its icon, not in the page, so all
   twelve pages read as part of the same site.
   =========================================================== */

/* ---------- Site bar ---------- */
.legal-bar {
    position: sticky;
    top: 0;
    z-index: 100;
}

.legal-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
    min-height: 64px;
}

.legal-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 1.125rem;
    font-weight: 700;
    font-stretch: var(--w-display);
    letter-spacing: -0.015em;
    text-decoration: none;
}

.legal-nav {
    display: flex;
    gap: 4px;
}

.legal-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    font-size: var(--fs-small);
    font-weight: 500;
    text-decoration: none;
}

/* ---------- Document ---------- */
.legal-main {
    padding: clamp(32px, 5vw, 56px) 0 clamp(64px, 8vw, 104px);
}

.legal-doc {
    max-width: 680px;
}

/* base text: :where() keeps these at the specificity of a class,
   so every component rule below can override them */
.legal-doc :where(p, li) {
    color: var(--text-2);
}

.legal-doc :where(p) {
    margin-bottom: 1em;
}

.legal-crumbs {
    margin-bottom: 24px;
    color: var(--text-3);
}

.legal-crumbs a {
    color: inherit;
}

.legal-app {
    display: flex;
    align-items: center;
    gap: 16px;
}

.legal-app img {
    width: 56px;
    height: 56px;
    border-radius: 22.37%;
    flex-shrink: 0;
}

/* macOS icons draw their own shape and shadow inside a transparent margin
   (the body is 154 of 192 px), so they get no mask and are scaled to match */
.legal-app img.is-mac {
    border-radius: 0;
    transform: scale(1.25);
}

.legal-app-name {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-h3);
    font-weight: 700;
    font-stretch: var(--w-display);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.legal-app-meta {
    margin: 2px 0 0;
    color: var(--text-3);
}

.legal-tabs {
    display: flex;
    gap: 28px;
    margin-top: 28px;
    border-bottom: 1px solid var(--line);
}

.legal-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--text-2);
    font-weight: 600;
    text-decoration: none;
}

.legal-tabs a:hover {
    background: none;
    color: var(--text);
    border-bottom-color: var(--line);
}

.legal-tabs a[aria-current="page"] {
    color: var(--text);
    border-bottom-color: var(--text);
}

.legal-doc h1 {
    margin: 40px 0 12px;
    font-size: var(--fs-h2);
}

.legal-dek {
    margin-bottom: 28px;
    color: var(--text-3);
}

.legal-doc strong {
    color: var(--text);
    font-weight: 600;
}

.legal-lead {
    font-size: var(--fs-lead);
    line-height: 1.5;
}

.legal-facts {
    color: var(--text-3);
}

.legal-doc ul,
.legal-doc ol {
    display: grid;
    gap: 8px;
    margin: 0 0 1em;
    padding-left: 1.25em;
}

.legal-doc ul {
    list-style: disc;
}

.legal-doc ol {
    list-style: decimal;
}

.legal-doc li::marker {
    color: var(--text-3);
}

.legal-doc code,
.legal-doc kbd {
    padding: 0.1em 0.35em;
    background: var(--sunken);
    font-family: var(--mono);
    font-size: 0.88em;
    font-variant-ligatures: none;
}

.legal-doc kbd {
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    color: var(--text);
    white-space: nowrap;
}

/* ---------- Privacy: sections ---------- */
.legal-doc section {
    margin-top: 36px;
}

.legal-doc h2 {
    margin-bottom: 12px;
    font-size: 1.375rem;
    line-height: 1.2;
}

/* ---------- Support: question groups ---------- */
.legal-doc h2.faq-group {
    margin: 40px 0 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    color: var(--text-2);
    font: 500 var(--fs-meta) / 1.5 var(--mono);
    font-stretch: 100%;
    letter-spacing: 0;
    font-variant-ligatures: none;
}

.legal-doc details {
    border-bottom: 1px solid var(--line);
}

.legal-doc summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    color: var(--text);
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

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

.legal-doc summary::after {
    content: "+";
    flex-shrink: 0;
    color: var(--link);
    font: 500 1.25rem / 1 var(--mono);
    transition: transform 0.2s var(--ease);
}

.legal-doc details[open] > summary::after {
    transform: rotate(45deg);
}

.legal-doc summary:focus-visible {
    outline-offset: 2px;
}

.legal-doc details > :last-child {
    margin-bottom: 18px;
}

/* ---------- A boxed note: the short version, reporting a problem ---------- */
.legal-note {
    margin: 36px 0 0;
    padding: clamp(20px, 3vw, 28px);
    background: var(--surface);
    border: 1px solid var(--line);
}

.legal-doc .legal-note > h2:first-child {
    margin-top: 0;
}

.legal-note > :last-child {
    margin-bottom: 0;
}

/* ---------- Footer ---------- */
.legal-foot {
    padding: 28px 0;
    font-size: var(--fs-small);
}

.legal-foot .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 32px;
}

.legal-foot p {
    color: var(--text-2);
}

.legal-foot nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}

.legal-foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

@media (max-width: 480px) {
    .legal-brand {
        font-size: 1rem;
    }

    .legal-nav a {
        padding: 0 8px;
    }
}

@media print {
    .legal-bar,
    .legal-tabs,
    .legal-foot {
        display: none;
    }
}

/* facts and dates break only between items */
.legal-facts span,
.legal-dek span {
    white-space: nowrap;
}