/* ==========================================================================
   Campaign Rules — flight-manual layout
   Composes .section, .container, .eyebrow. Legal copy stays as authored.
   ========================================================================== */

.rules-page {
    padding-bottom: var(--sp-10);
}

.rules-hero {
    padding-top: var(--sp-9);
    padding-bottom: var(--sp-6);
    background:
        radial-gradient(60% 40% at 50% 0%,
            rgba(64, 209, 253, 0.06),
            transparent 70%);
}
.rules-hero .section__header { margin-bottom: 0; }

.rules-shell {
    display: grid;
    gap: var(--sp-7);
    padding-bottom: var(--sp-8);
}

@media (min-width: 960px) {
    .rules-shell {
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
        gap: var(--sp-8);
    }
}

/* --- Contents rail ----------------------------------------------------- */
.rules-toc {
    border: var(--hairline);
    border-radius: var(--radius-sharp);
    background: rgba(255, 255, 255, 0.02);
    padding: 16px 14px 12px;
}

@media (min-width: 960px) {
    .rules-toc {
        position: sticky;
        top: calc(var(--header-h) + var(--header-offset) + 16px);
        max-height: calc(100vh - var(--header-h) - var(--header-offset) - 32px);
        overflow-y: auto;
    }
}

.rules-toc__label {
    margin: 0 0 12px;
    padding: 0 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--color-fg-3);
}
.rules-toc__label::before {
    content: "// ";
    color: var(--color-cyan);
}

.rules-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rules-toc__link {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 8px;
    align-items: baseline;
    padding: 7px 6px;
    border-radius: var(--radius-sharp);
    color: var(--color-fg-2);
}
.rules-toc__link:hover {
    color: var(--color-fg);
    background: rgba(64, 209, 253, 0.06);
}

.rules-toc__num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--color-cyan);
}

.rules-toc__text {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

@media (max-width: 959px) {
    .rules-toc {
        overflow-x: auto;
        padding: 12px 12px 8px;
    }
    .rules-toc__list {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
    }
    .rules-toc__list li { flex: 0 0 auto; }
    .rules-toc__link {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 7.5rem;
        padding: 8px 10px;
        border: var(--hairline);
        background: rgba(255, 255, 255, 0.02);
    }
    .rules-toc__text {
        white-space: nowrap;
        max-width: 9.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* --- Document ---------------------------------------------------------- */
.rules-doc {
    min-width: 0;
    padding: 8px 0 0;
}

@media (min-width: 960px) {
    .rules-doc {
        padding: 4px 0 0 8px;
        border-left: var(--hairline);
    }
}

.rules-section {
    margin: 0 0 var(--sp-8);
    padding-top: 4px;
    scroll-margin-top: calc(var(--header-h) + var(--header-offset) + 16px);
}
.rules-section:last-child { margin-bottom: 0; }

.rules-section:target .rules-section__title {
    color: var(--color-cyan-glow);
}

.rules-section__title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 var(--sp-5);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(20px, 1.2vw + 16px, 26px);
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: var(--color-fg);
}

.rules-section__num {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-cyan);
    flex: 0 0 auto;
}

.rules-clause {
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    gap: 4px 14px;
    margin: 0 0 1.15em;
}
.rules-clause:last-child { margin-bottom: 0; }

.rules-clause__num {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: 0.02em;
    color: var(--color-fg-3);
    font-variant-numeric: tabular-nums;
}

.rules-clause__body {
    min-width: 0;
}
.rules-clause__body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-fg-2);
}
.rules-clause__body p + p,
.rules-clause__body p + .rules-table-wrap,
.rules-clause__body p + .rules-list {
    margin-top: 0.75em;
}
.rules-clause__body strong {
    color: var(--color-fg);
    font-weight: 500;
}

.rules-doc a {
    color: var(--color-cyan);
    border-bottom: 1px dashed rgba(64, 209, 253, 0.4);
    padding-bottom: 1px;
}
.rules-doc a:hover {
    border-bottom-color: var(--color-cyan);
}

.rules-list {
    margin: 0.75em 0 0;
    padding: 0 0 0 1.15em;
    color: var(--color-fg-2);
    font-size: 15px;
    line-height: 1.6;
}
.rules-list li { margin: 0 0 0.35em; }
.rules-list li:last-child { margin-bottom: 0; }

.rules-table-wrap {
    overflow-x: auto;
    margin-top: 0.75em;
    border: var(--hairline);
    border-radius: var(--radius-sharp);
}

.rules-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
}
.rules-table th,
.rules-table td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.rules-table tr:last-child td { border-bottom: 0; }
.rules-table th {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-fg-3);
    background: rgba(0, 0, 0, 0.2);
}
.rules-table td { color: var(--color-fg-2); }
.rules-table td strong {
    color: var(--color-fg);
    font-weight: 500;
}

@media print {
    .site-header,
    .site-footer,
    .cookie-notice,
    .rules-toc,
    .page-loader {
        display: none !important;
    }
    .rules-page,
    .rules-hero,
    .rules-doc,
    .rules-clause__body p,
    .rules-table td {
        color: #111 !important;
        background: #fff !important;
    }
    .rules-doc {
        border: 0;
        padding: 0;
    }
    a { color: inherit; }
}