/* ══════════════════════════════════════════════════════════════════
   CS42 · the apps' privacy policies, terms and support pages
   (/apps/<app>/privacy/, /apps/<app>/terms/, /apps/pixelthat/support/)

   Read like Apple's legal pages: a quiet sticky bar with the app's icon
   and name, a clear title and date, one readable column, and the
   sections listed beside it (in a menu that drops from the bar on
   phones and tablets). Motion stays out of the way: the head fades in,
   a hairline in the bar follows your place in the document, and the
   list marks the section you are reading. Nothing else moves.
   ══════════════════════════════════════════════════════════════════ */

/* Headings land 32px below the sticky bar when a section link is followed. This is
   scroll-margin on the targets, not scroll-padding on the page: with scroll-padding,
   focusing anything in the sticky bar made the page jump. */
html:has(.lg-ln) { scroll-padding-top: 0; }
.lg-prose h2[id], #top { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: no-preference) {
    html:has(.lg-ln) { scroll-behavior: smooth; }
}

/* ── The bar: the app's icon and name, the document, the way back ─ */
.lg-ln { --ln-h: 52px; }
/* on the same edge as the global nav above it and the section list below */
.lg-ln .ln-in { width: min(100% - 2 * var(--gutter), var(--w-chrome, 1240px)); }
.lg-ln-start { display: flex; align-items: center; gap: 2px; min-width: 0; }
.lg-ln .ln-title { min-width: 0; }
.lg-ln .ln-title img { flex: none; box-shadow: 0 0 0 1px var(--line); }
.lg-ln-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-ln-doc {
    flex: none; margin-inline-start: 4px; padding-inline-start: 14px;
    border-inline-start: 1px solid var(--line-2);
    font-weight: 400; color: var(--fg-3);
}
.lg-ln .ln-links a[aria-current="page"] { color: var(--fg); }
.lg-toc-btn {
    display: none; place-items: center; flex: none;
    width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--fg-2);
}
@media (hover: hover) {
    .lg-toc-btn:hover { color: var(--fg); background: var(--bg-3); }
}
.lg-toc-btn:focus-visible { outline-offset: -2px; }
.lg-toc-btn svg { width: 12px; height: 12px; transition: transform .3s var(--ease-out); }
.lg-toc-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lg-progress {
    position: absolute; inset: auto 0 -1px; height: 2px;
    background: var(--accent);
    transform: scaleX(var(--lg-p, 0)); transform-origin: 0 50%;
    pointer-events: none;
}
[dir="rtl"] .lg-progress { transform-origin: 100% 50%; }
.lg-icon--pixel { image-rendering: pixelated; }

/* Sider's own links (Overview, Features...) need the width of a desktop */
@media (max-width: 1079px) {
    .lg-ln .ln-links li:not(:last-child) { display: none; }
    /* the whole title opens the list of sections: the button's tap area covers it */
    .lg-ln-start { position: relative; }
    .lg-toc-btn::after { content: ""; position: absolute; inset: -4px -6px; }
}
@media (max-width: 733px) {
    .lg-ln .ln-in { gap: 8px; }
    /* the big icon heads the page; the bar keeps the name, with the document under it */
    .lg-ln .ln-title {
        flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
        font-size: 15px; line-height: 1.15; letter-spacing: -0.01em;
    }
    .lg-ln .ln-title img { display: none; }
    .lg-ln-name { max-width: 100%; }
    .lg-ln-doc {
        max-width: 100%; margin: 0; padding: 0; border: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-size: 12.5px; line-height: 1.2; letter-spacing: 0;
    }
    .lg-ln .ln-links .btn { padding-inline: 11px; }
    .lg-toc-btn { width: 30px; }
}

/* ── Layout: the text column, with the sections beside it ───────── */
.lg {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(100% - 2 * var(--gutter), var(--w-text));
    margin-inline: auto;
    padding: clamp(44px, 7vw, 96px) 0 clamp(80px, 10vw, 136px);
}
/* wide screens: the frame is the nav's own edge; the list of sections starts on it, and the
   reading column (still 692px) sits a little right of centre, with the space shared out
   between the gap after the list and the margin after the text */
@media (min-width: 1080px) {
    .lg:not(.lg--single) {
        grid-template-columns: minmax(196px, 240px) minmax(48px, 1fr) minmax(0, var(--w-text)) minmax(0, 1.4fr);
        width: min(100% - 2 * var(--gutter), var(--w-chrome, 1240px));
    }
    .lg:not(.lg--single) > .lg-head,
    .lg:not(.lg--single) > .lg-doc,
    .lg:not(.lg--single) > .lg-end { grid-column: 3; }
    .lg:not(.lg--single) > .lg-toc { grid-column: 1; grid-row: 1 / span 3; }
}

/* ── The head: icon, title, date, and the plain summary ─────────── */
.lg-icon { width: clamp(60px, 6vw, 76px); height: auto; margin-bottom: clamp(24px, 2.8vw, 32px); }
.lg-title {
    font-size: clamp(36px, 4.8vw, 56px); line-height: 1.07; letter-spacing: -0.028em;
}
:lang(ar) .lg-title { letter-spacing: 0; line-height: 1.25; }
.lg-date { margin-top: 16px; font-size: 15px; line-height: 1.45; color: var(--fg-3); }
.lg-lead { margin-top: 14px; font-size: clamp(19px, 2vw, 24px); line-height: 1.38; color: var(--fg-2); }
@media (max-width: 599px) {
    .lg-date-i { display: block; }
    .lg-sep { display: none; }
}
.lg-brief {
    margin-top: clamp(32px, 4.4vw, 52px);
    padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.8vw, 30px);
    border-radius: var(--radius);
    background: var(--bg-2);
    font-size: clamp(16.5px, 1.4vw, 18px); line-height: 1.5; letter-spacing: -0.01em;
    color: var(--fg-2);
}
/* a summary of a line or two: a slimmer panel, so it does not look empty */
.lg-brief--short { padding: 16px 22px; }
.lg-brief strong { color: var(--fg); }
.lg-brief a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:root[data-palette="snowy-owl"] .lg-brief { background: #F5F5F7; }
/* support: the address is the page's one action */
.legal--support .lg-brief a {
    padding-block: 8px;
    font-weight: 600; color: var(--accent);
    text-decoration-thickness: 2px;
}

/* ── The sections ────────────────────────────────────────────────── */
.lg-toc-h { font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: 0; color: var(--fg-3); }
.lg-toc ol { list-style: none; }
.lg-toc a {
    display: grid; grid-template-columns: 2.1em minmax(0, 1fr);
    color: var(--fg-3); text-decoration: none;
    transition: color .2s var(--ease), border-color .2s var(--ease);
}
.lg-toc a:hover { color: var(--fg); text-decoration: none; }
.lg-toc a[aria-current="true"] { color: var(--fg); }
.lg-toc .lg-n { font-variant-numeric: tabular-nums; }

/* wide screens: beside the text, and it stays while you read */
@media (min-width: 1080px) {
    .lg-toc {
        position: sticky; top: calc(52px + 36px); align-self: start;
        max-height: calc(100vh - 52px - 64px); overflow-y: auto; overscroll-behavior: contain;
        scrollbar-width: none;
    }
    .lg-toc::-webkit-scrollbar { display: none; }
    .lg-toc-h { padding-inline-start: 18px; margin-bottom: 10px; }
    .lg-toc ol { border-inline-start: 1px solid var(--line); }
    .lg-toc a {
        margin-inline-start: -1px; padding: 5px 0; padding-inline-start: 16px;
        border-inline-start: 2px solid transparent;
        font-size: 13px; line-height: 1.32; letter-spacing: -0.002em;
    }
    .lg-toc a[aria-current="true"] { border-color: var(--accent); }
    .js .lg-toc { animation: lg-fade 1s var(--ease) .35s both; }
}
@keyframes lg-fade { from { opacity: 0; } }

/* phones and tablets: the same list drops from the bar */
@media (max-width: 1079px) {
    .lg-toc-btn { display: grid; }
    .lg-toc {
        position: fixed; z-index: 89; left: 0; right: 0; top: var(--lg-top, 100px);
        max-height: calc(100vh - var(--lg-top, 100px));
        max-height: calc(100dvh - var(--lg-top, 100px));
        overflow-y: auto; overscroll-behavior: contain;
        padding: 16px var(--gutter) 22px;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 0 0 100vmax var(--scrim);
        clip-path: inset(0 0 -100vmax 0);
    }
    .js .lg-toc:not(.is-open) { display: none; }
    .lg-toc.is-open { animation: lg-drop .34s var(--ease-out) both; }
    .lg-toc-h, .lg-toc ol { width: min(100%, var(--w-text)); margin-inline: auto; }
    .lg-toc-h { margin-bottom: 4px; }
    .lg-toc li + li { border-top: 1px solid var(--line); }
    .lg-toc a { padding: 12px 0; font-size: 17px; line-height: 1.3; color: var(--fg-2); }
    .lg-toc a[aria-current="true"] { color: var(--accent); }
    .lg-toc a[aria-current="true"] .lg-n { color: var(--accent); }
    .lg-toc .lg-n { color: var(--fg-3); }
    /* without the script the list simply sits above the text */
    html:not(.js) .lg-toc { position: static; box-shadow: none; clip-path: none; padding: 0; margin-top: 40px; background: none; border: 0; }
}
@keyframes lg-drop { from { opacity: 0; transform: translateY(-8px); } }

/* ── The text ────────────────────────────────────────────────────── */
.lg-doc { margin-top: clamp(40px, 5vw, 64px); }
.lg-prose { font-size: 17px; line-height: 1.65; }
.lg-prose > * + * { margin-top: 1.05em; }
.lg-prose h2 {
    margin-top: 2.5em;
    font-size: clamp(21px, 2vw, 24px); line-height: 1.24; letter-spacing: -0.016em;
}
.lg-prose > h2:first-child { margin-top: 0; }
.lg-prose h2 + * { margin-top: 0.7em; }
.lg-prose h2 .lg-n { color: var(--fg-3); font-variant-numeric: tabular-nums; }
/* a paragraph that opens with a bold lead-in starts a new part of its section */
.lg-prose > .lg-part { margin-top: 1.9em; }
.lg-prose ul, .lg-prose ol { padding-left: 0; padding-inline-start: 1.25em; }
.lg-prose li { padding-inline-start: 0.2em; }
.lg-prose li + li { margin-top: 0.55em; }
.lg-prose li::marker { color: var(--fg-3); }
.lg-prose ol li::marker { font-variant-numeric: tabular-nums; }
.lg-prose code {
    padding: 0.08em 0.36em; border-radius: 6px;
    background: var(--bg-3); color: var(--fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em;
}
.lg-prose em { font-style: italic; }
.lg-updated { margin-top: 2.6em !important; font-size: 14px; color: var(--fg-3); }
/* a notice that opens the text sits a little further from the summary panel above it */
.lg-prose > .lg-note:first-child { margin-top: 8px; }
/* a notice or a clause the page asks you to read: outlined, so it is not taken for the summary panel */
.lg-note {
    padding: 18px 22px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    color: var(--fg-2);
}
.lg-prose > .lg-note + * { margin-top: 1.6em; }

/* Permission tables: a table on wider screens, stacked rows on phones */
.lg-table { margin-block: 1.4em; }
.lg-prose table { font-size: 15px; line-height: 1.5; }
.lg-prose th { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--fg-3); padding-bottom: 8px; }
.lg-prose td:first-child { color: var(--fg); font-weight: 500; }
@media (min-width: 600px) { .lg-prose td:first-child { min-width: 9em; } }
.lg-prose td:nth-child(2) { white-space: nowrap; }
.lg-prose td.lg-yes { color: var(--fg); font-weight: 600; }
@media (max-width: 599px) {
    .lg-prose table, .lg-prose tbody { display: block; }
    /* each row names itself (permission, answer, purpose), so the header is read, not shown */
    .lg-prose thead {
        position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .lg-prose tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px;
        padding: 14px 0; border-bottom: 1px solid var(--line);
    }
    .lg-prose tbody tr:first-child { border-top: 1px solid var(--line); }
    .lg-prose td { padding: 0; border: 0; }
    .lg-prose td:last-child { grid-column: 1 / -1; margin-top: 4px; }
    .lg-prose td:nth-child(2) { text-align: end; white-space: normal; max-width: 12em; color: var(--fg-2); }
    .lg-prose td.lg-yes { color: var(--fg); }
    /* the header is read, not shown, so each answer carries its column's own word */
    .lg-prose td[data-label]::before {
        content: attr(data-label) "\00a0\00a0";
        font-size: 13px; font-weight: 400; color: var(--fg-3);
    }
}

/* Questions and answers (support) sit in the text column */
.lg-prose .faq { margin-top: 1.4em; }
.lg-prose .faq summary { padding: 18px 0; font-size: 17px; line-height: 1.35; color: var(--fg); }
.lg-prose .faq .faq-a { padding-bottom: 20px; }

/* ── The way back ────────────────────────────────────────────────── */
.lg-end {
    margin-top: clamp(56px, 7vw, 88px);
    padding-top: clamp(32px, 4vw, 44px);
    border-top: 1px solid var(--line);
}
.lg-end-q { font-size: clamp(19px, 1.7vw, 21px); line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; color: var(--fg); }
.lg-end-links {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px;
    list-style: none; margin-top: 18px;
}
.lg-end-links:first-child { margin-top: 0; }
.lg-end-links .btn { margin-inline-end: 4px; }
.lg-end-links .more { min-height: 44px; }
/* phones: the way back on its own row, the other pages together on the next */
@media (max-width: 599px) { .lg-end-links li:first-child { flex-basis: 100%; } }

/* ── Arabic pages (right to left) ───────────────────────────────── */
[dir="rtl"] .lg-prose { font-size: 18px; line-height: 1.85; }
[dir="rtl"] .lg-brief { line-height: 1.8; letter-spacing: 0; }
[dir="rtl"] .lg-prose h2 { line-height: 1.45; letter-spacing: 0; }
[dir="rtl"] .lg-toc a { line-height: 1.6; letter-spacing: 0; }
@media (min-width: 1080px) { [dir="rtl"] .lg-toc a { font-size: 15px; } }
[dir="rtl"] .lg-toc-h { font-size: 14px; }
[dir="rtl"] .lg-date { font-size: 16px; }
[dir="rtl"] .lg-updated { font-size: 15px; }
@media (max-width: 733px) { [dir="rtl"] .lg-ln-doc { font-size: 13.5px; } }
[dir="rtl"] .lg-ln .ln-title { letter-spacing: 0; }

/* ── Reduced motion and print ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lg-toc.is-open { animation: none; }
}
@media print {
    .lg-ln, .lg-toc, .lg-end { display: none !important; }
    .lg { display: block; width: auto; padding: 0; }
    .lg-brief { background: none; padding: 0; }
}