/*
 * page.css  —  the content pages, rebuilt to match the launch page.
 *
 * One narrow editorial column in the launch page's own chrome. Replaces
 * main.css (51KB of the old instrument design: update bar, sticky header,
 * scroll progress, decorative components) with the few things an article
 * actually needs. Loaded after launch.css, which supplies the shared
 * header/footer, the page measure and the reduced-motion guards.
 *
 * Same rule as everywhere else on this site: no raw hex, no gradients —
 * every colour is a token from tokens.css.
 */

/* --- Article shell ---------------------------------------------------- */

.section .container {
    width: var(--container-wide);
    margin-inline: auto;
}

.legal,
.apply,
.notfound {
    max-width: 76ch;
    padding-block: var(--space-3xl) var(--space-5xl);
}

.legal__header {
    margin-block-end: var(--space-3xl);
    padding-block-end: var(--space-xl);
    border-block-end: 1px solid var(--border);
}

.legal__title {
    margin-block-start: var(--space-md);
}

.legal__meta {
    margin-block-start: var(--space-md);
    color: var(--text-tertiary);
    font-family: var(--font-display);
    font-size: var(--fs-mono);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.legal__meta--bottom {
    margin-block-start: var(--space-3xl);
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--font-body);
}

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

.legal__body p,
.apply p,
.legal__body ul,
.apply ul {
    margin-block-start: var(--space-lg);
    color: var(--text-secondary);
}

.legal__body h2 {
    margin-block-start: var(--space-4xl);
    padding-block-start: var(--space-xl);
    border-block-start: 1px solid var(--border);
    font-size: var(--fs-h2);
}

.legal__body h3 {
    margin-block-start: var(--space-xxl);
    font-size: var(--fs-h3);
}

.legal__body ul,
.apply ul {
    padding-inline-start: 1.2em;
    display: grid;
    gap: var(--space-sm);
}

.legal__body li::marker,
.apply li::marker {
    color: var(--text-tertiary);
}

.legal__body strong,
.apply strong {
    color: var(--text);
}

.legal__body a,
.apply a,
.interest__fallback a,
.notfound__home {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--hairline);
    text-underline-offset: 3px;
}

.legal__rule {
    margin-block-start: var(--space-4xl);
    border: 0;
    border-block-start: 1px solid var(--border);
}

.legal__signoff {
    margin-block-start: var(--space-3xl);
    color: var(--text-tertiary);
}

/* --- Small components the articles still use -------------------------- */

/* Jump nav on long pages. */
.toc {
    margin-block-start: var(--space-xl);
    padding: var(--space-lg) var(--space-xl);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.toc__label {
    color: var(--text-tertiary);
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}

/* Scoped under .legal__body so these beat the generic prose-list rule —
   a bare .toc__list loses the specificity contest against `.legal__body ul`
   and renders as a stacked bullet list. */
.legal__body .toc__list,
.toc__list {
    margin-block-start: var(--space-md);
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
}

.toc__list a {
    color: var(--text-secondary);
    text-decoration: none;
}

.toc__list a:hover {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--hairline);
}

/* The 25-signal grid on the science page. */
.legal__body .spec__grid,
.spec__grid {
    margin-block-start: var(--space-lg);
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-sm);
}

.spec__item {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}

/* Score formulas, set like readouts. */
.formula {
    margin-block-start: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    border: 1px solid var(--border);
    border-inline-start: 2px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    line-height: 1.7;
}

.formula__label {
    display: block;
    margin-block-end: var(--space-xs);
    color: var(--text-tertiary);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}

/* Reference library — denser than body prose. */
.ref-list {
    font-size: var(--fs-small);
}

.ref-list__note {
    color: var(--text-tertiary);
}

/* --- Compare page ------------------------------------------------------ */

.compare-table-wrap {
    margin-block-start: var(--space-xl);
    overflow-x: auto;
}

.compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: var(--fs-small);
}

.compare-table th,
.compare-table td {
    padding: var(--space-md);
    border-block-end: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    color: var(--text-secondary);
}

.compare-table thead th {
    color: var(--text);
    font-family: var(--font-display);
    font-size: var(--fs-mono);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}

.compare-table tbody th {
    color: var(--text);
    font-weight: 600;
}

.compare-table .col-vital {
    color: var(--text);
}

.cell-yes { color: var(--good); }
.cell-no { color: var(--text-tertiary); }
.cell-partial { color: var(--warn); }

.cell-note {
    display: block;
    color: var(--text-tertiary);
    font-size: var(--fs-micro);
}

.compare-table__caption {
    margin-block-start: var(--space-md);
    color: var(--text-tertiary);
    font-size: var(--fs-small);
}

/* Per-app breakdowns: plain sections, single column. */
.versus__app {
    margin-block-start: var(--space-4xl);
    padding-block-start: var(--space-xl);
    border-block-start: 1px solid var(--border);
}

.versus__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-md);
}

.versus__name {
    font-size: var(--fs-h2);
}

.versus__tag {
    color: var(--text-tertiary);
    font-family: var(--font-display);
    font-size: var(--fs-mono);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}

.versus__summary {
    margin-block-start: var(--space-lg);
    color: var(--text-secondary);
}

.versus__cols {
    display: grid;
    gap: var(--space-xl);
}

.versus__col-label {
    margin-block-start: var(--space-xl);
    color: var(--text);
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 600;
}

.versus__list {
    margin-block-start: var(--space-md);
    padding-inline-start: 1.2em;
    display: grid;
    gap: var(--space-sm);
    color: var(--text-secondary);
}

/* --- Interest form (compare page, Supabase INSERT-only) --------------- */

.interest {
    margin-block-start: var(--space-4xl);
    padding: var(--space-xl);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.interest__headline {
    font-size: var(--fs-h3);
}

.interest__sub {
    margin-block-start: var(--space-sm);
    color: var(--text-secondary);
}

/* Bots that fill every field disqualify themselves; nobody else should
   ever see it. */
.interest__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.interest__row {
    margin-block-start: var(--space-lg);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
}

.interest__input {
    min-width: 0;
    min-height: var(--space-3xl);
    padding-inline: var(--space-lg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--text);
    font-size: var(--fs-body);
}

.interest__input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

.interest__input[aria-invalid="true"] {
    border-color: var(--bad);
}

.interest__button {
    min-height: var(--space-3xl);
    padding-inline: var(--space-xl);
    border: 1px solid var(--text);
    border-radius: var(--radius-md);
    background: var(--text);
    color: var(--bg);
    font-family: var(--font-display);
    font-size: var(--fs-body);
    white-space: nowrap;
}

.interest__button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.interest__message {
    min-height: 1lh;
    margin-block-start: var(--space-sm);
    color: var(--text-tertiary);
    font-size: var(--fs-small);
}

.interest__message[data-kind="error"] { color: var(--bad); }
.interest__message[data-kind="success"] { color: var(--good); }

.interest__fallback {
    margin-block-start: var(--space-md);
}

/* --- Download CTA (every article ends on it) --------------------------- */

.page-cta {
    margin-block-start: var(--space-5xl);
    padding-block-start: var(--space-xl);
    border-block-start: 1px solid var(--border);
}

.page-cta__headline {
    font-size: var(--fs-h2);
}

.page-cta__sub {
    margin-block-start: var(--space-sm);
    color: var(--text-secondary);
}

.store-cta {
    margin-block-start: var(--space-lg);
    min-height: var(--space-3xl);
    padding: var(--space-md) var(--space-xl);
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    border: 1px solid var(--text);
    border-radius: var(--radius-md);
    background: var(--text);
    color: var(--bg);
    font-family: var(--font-display);
    font-weight: 600;
    text-decoration: none;
}

.store-cta:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

/* --- About: press kit -------------------------------------------------- */

.press-assets {
    margin-block-start: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
}

.press-asset img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.press-asset figcaption {
    margin-block-start: var(--space-sm);
}

/* --- Creator programme -------------------------------------------------- */

.apply__deal {
    margin-block-start: var(--space-xl);
    padding: var(--space-xl);
    border: 1px solid var(--border);
    border-inline-start: 2px solid var(--accent);
    border-radius: var(--radius-lg);
}

.apply__deal-title {
    color: var(--text-tertiary);
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}

.apply__actions {
    margin-block-start: var(--space-xl);
}

.apply__button {
    min-height: var(--space-3xl);
    padding: var(--space-md) var(--space-xl);
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--text);
    border-radius: var(--radius-md);
    background: var(--text);
    color: var(--bg);
    font-family: var(--font-display);
    font-weight: 600;
    text-decoration: none;
}

.apply__button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.apply__message {
    margin-block-start: var(--space-md);
    color: var(--text-secondary);
}

.apply__group {
    margin-block-start: var(--space-3xl);
    padding-block-start: var(--space-xl);
    border-block-start: 1px solid var(--border);
}

.apply__group-title {
    font-size: var(--fs-h3);
}

.apply__note {
    margin-block-start: var(--space-3xl);
}

/* --- Changelog ---------------------------------------------------------- */

.release {
    margin-block-start: var(--space-4xl);
    padding-block-start: var(--space-xl);
    border-block-start: 1px solid var(--border);
}

.release__version {
    font-size: var(--fs-h2);
}

.release__build {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}

.release__meta {
    margin-block-start: var(--space-xs);
    color: var(--text-tertiary);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
}

.release__status--live {
    color: var(--good);
}

.release__changes,
.release__notes {
    margin-block-start: var(--space-lg);
    padding-inline-start: 1.2em;
    display: grid;
    gap: var(--space-sm);
    color: var(--text-secondary);
}

.release__notes {
    color: var(--text-tertiary);
}

/* --- 404 ----------------------------------------------------------------- */

.notfound {
    min-height: 60dvh;
    display: grid;
    align-content: center;
}

.notfound__code {
    color: var(--text-tertiary);
    font-family: var(--font-display);
    font-size: var(--fs-mono);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}

.notfound__headline {
    margin-block-start: var(--space-md);
    font-size: var(--fs-h1);
}

.notfound__sub {
    margin-block-start: var(--space-lg);
    color: var(--text-secondary);
    max-width: 55ch;
}

.notfound__actions {
    margin-block-start: var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xl);
}

/* --- Utilities the old sheet provided ----------------------------------- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Wider screens -------------------------------------------------------- */

@media (min-width: 60rem) {
    .versus__cols {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: var(--space-3xl);
    }

    .interest__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}