/**
 * Format reference pages (/comic-script-format, /fountain-format).
 *
 * A teaching page, so the shape is: prose column at reading width, syntax as a
 * definition list, and examples set in the script face so they look like the
 * thing being taught. Orange stays on the two Start buttons and nowhere else.
 */

.reference {
    max-width: 44rem;
    margin: 0 auto;
    padding: var(--spacing-2xl) var(--spacing-md) var(--spacing-3xl);
}

.reference-header {
    margin-bottom: var(--spacing-3xl);
}

.reference h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    line-height: 1.15;
    margin: 0 0 var(--spacing-md);
}

.reference-lede {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--color-text);
    margin: 0 0 var(--spacing-xl);
}

.reference-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: 0;
}

/* Space does the separating, not rules: the sections are one continuous
   lesson rather than a stack of unrelated boxes. */
.reference-section {
    margin-bottom: var(--spacing-3xl);
}

.reference h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    margin: 0 0 var(--spacing-md);
}

.reference p {
    line-height: 1.65;
    margin: 0 0 var(--spacing-md);
}

.reference-list {
    line-height: 1.65;
    margin: 0 0 var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.reference-list li {
    margin-bottom: var(--spacing-sm);
}

/* Syntax as a definition list: the mark on its own line, what it means under
   it. Reads down the page rather than across a table, which survives a phone. */
.reference-syntax {
    margin: 0 0 var(--spacing-lg);
}

.reference-syntax dt {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xs, 0.5rem);
}

.reference-syntax dd {
    margin: 0;
    line-height: 1.65;
    color: var(--color-text-light);
}

.reference code {
    font-family: var(--font-family-mono);
    font-size: 0.95em;
}

.reference kbd {
    font-family: var(--font-family-mono);
    font-size: 0.9em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-tag);
    padding: 0.1em 0.4em;
    background: var(--color-paper);
}

/* Examples sit on Sahtu Paper in the script face, so a block of format reads
   as a page of script and not as source code. Tabs are the cue separator in a
   comic script, so they have to survive: 22 columns matches the editor. */
.reference-example {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--spacing-lg);
    margin: 0 0 var(--spacing-md);
    overflow-x: auto;
    tab-size: 22;
    white-space: pre;
}

.reference-example code {
    font-size: inherit;
}

.reference-footer {
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-xl);
}

/* The second-best answer, so it sits below the Start button and stays quieter
   than it: a block on Sahtu Paper, ghost link, no orange. Orange on this page
   belongs to the one action that opens the editor. */
.newsletter-invite {
    background: var(--color-paper);
    border-radius: var(--radius-card);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-3xl);
    text-align: center;
}

.newsletter-invite-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    margin: 0 0 var(--spacing-sm);
}

.newsletter-invite-body {
    color: var(--color-text-light);
    line-height: 1.6;
    max-width: 32rem;
    margin: 0 auto var(--spacing-lg);
}

.newsletter-invite-action {
    margin: 0;
}

@media (max-width: 640px) {
    .reference {
        padding-top: var(--spacing-xl);
    }

    .reference h1 {
        font-size: var(--font-size-2xl);
    }

    /* A phone cannot hold 22 columns of Courier plus the line. */
    .reference-example {
        tab-size: 8;
        padding: var(--spacing-md);
    }
}