/* ════════════════════════════════════════════════════════════════════
   TRUST NAV — continue-reading footer for the trust documents
   ════════════════════════════════════════════════════════════════════

   Loaded by both shells, so every value reads through a fallback chain:

       var(--marketing-token, var(--docs-token, literal))

   The trust pages live in two systems. The docs shell is slate on
   #0b0f19 with a sky accent and a fixed --ds-* scale; the marketing
   shell is blue on #0a0a1f with indigo and a fluid --fs-* scale. This
   component takes on whichever it is dropped into, so adding navigation
   does not quietly force a design convergence. That convergence is
   worth doing and is its own piece of work.

   The literals at the end of each chain are the marketing values, used
   only if a page loads this file with neither system present.
   ════════════════════════════════════════════════════════════════════ */

.tn {
    --tn-surface: var(--color-bg-raised, var(--surface-module, #111226));
    --tn-inset: var(--color-bg-inset, var(--surface-base, #1a1c33));
    --tn-border: var(--color-border, var(--border-subtle, rgba(255, 255, 255, .08)));
    --tn-border-strong: var(--color-border-strong, var(--border-strong, rgba(255, 255, 255, .16)));
    --tn-text: var(--color-text, var(--text-high, #f4f4f5));
    --tn-muted: var(--color-muted, var(--text-mid, #a1a1aa));
    --tn-subtle: var(--color-subtle, var(--text-dim, #71717a));
    --tn-accent: var(--color-accent, var(--border-active, #6366f1));

    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--tn-border);
}

.tn-eyebrow {
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tn-subtle);
}

/* ── The four moves, named ───────────────────────────────────────── */
.tn-moves {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    background: var(--tn-border);
    border: 1px solid var(--tn-border);
    border-radius: 2px;
    overflow: hidden;
    counter-reset: tn-move;
}

.tn-move {
    padding: 10px 12px;
    background: var(--tn-inset);
}

.tn-move.is-current {
    background: var(--tn-surface);
    box-shadow: inset 0 2px 0 0 var(--tn-accent);
}

.tn-move-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--tn-muted);
    text-decoration: none;
    margin-bottom: 2px;
}

a.tn-move-name:hover {
    color: var(--tn-text);
}

.tn-move.is-current .tn-move-name {
    color: var(--tn-accent);
}

.tn-move-blurb {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: var(--tn-subtle);
}

/* ── Onward links ────────────────────────────────────────────────── */
.tn-onward {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.tn-card-label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tn-subtle);
    margin-bottom: 6px;
}

.tn-next {
    display: block;
    padding: 16px;
    background: var(--tn-surface);
    border: 1px solid var(--tn-border-strong);
    border-radius: 2px;
    text-decoration: none;
}

.tn-next:hover {
    border-color: var(--tn-accent);
}

.tn-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 600;
    color: var(--tn-text);
    margin-bottom: 4px;
}

.tn-arrow {
    width: 16px;
    height: 16px;
    color: var(--tn-accent);
    flex: none;
    transition: transform 80ms cubic-bezier(.22, 1, .36, 1);
}

.tn-next:hover .tn-arrow {
    transform: translateX(3px);
}

.tn-card-blurb {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tn-muted);
}

/* The closing card is not a link, so it does not take the hover affordance
   of .tn-next -- only the address inside it is clickable. */
.tn-close:hover {
    border-color: var(--tn-border-strong);
}

.tn-close-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--tn-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.tn-close-link:hover {
    border-bottom-color: currentColor;
}

/* ── Lateral siblings ────────────────────────────────────────────── */
.tn-lateral {
    padding: 16px;
    background: var(--tn-inset);
    border: 1px solid var(--tn-border);
    border-radius: 2px;
}

.tn-side {
    display: block;
    padding: 8px 0;
    border-top: 1px solid var(--tn-border);
    text-decoration: none;
}

.tn-side:first-of-type {
    border-top: 0;
    padding-top: 2px;
}

.tn-side-title {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--tn-text);
}

.tn-side:hover .tn-side-title {
    color: var(--tn-accent);
}

.tn-side-blurb {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: var(--tn-subtle);
}

/* ── Underlines ──────────────────────────────────────────────────── */

/* The docs shell underlines prose links with `.doc-prose a:not(.btn)`, which
   is 0,2,1. Each of this component's own `text-decoration: none` rules is a
   single class, 0,1,0, so it lost: in the marketing shell the component was
   clean, and in the docs shell every move name, card title and blurb rendered
   underlined. The blurbs are spans inside the anchor, and a descendant cannot
   remove a line its ancestor draws -- so this has to win on the anchor itself.
   Naming the parent takes each selector to 0,3,0, which beats the docs rule
   outright rather than depending on which stylesheet loads last. */
.tn .tn-moves .tn-move-name,
.tn .tn-moves .tn-move-name:hover,
.tn .tn-onward .tn-next,
.tn .tn-onward .tn-next:hover,
.tn .tn-onward .tn-side,
.tn .tn-onward .tn-side:hover {
    text-decoration: none;
}

/* The closing address is the one thing here that should read as a link, so it
   keeps its underline on hover and only there. */
.tn .tn-onward .tn-close-link {
    text-decoration: none;
}

.tn a:focus-visible {
    outline: 2px solid var(--tn-accent);
    outline-offset: 2px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .tn-onward {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 620px) {
    /* Two by two rather than four across. Four columns at 390px gives each
       move about 80px, which is not enough for a name and a line of
       explanation -- and shrinking them to unreadable ticks would turn the
       component back into the progress bar it is deliberately not. */
    .tn-moves {
        grid-template-columns: repeat(2, 1fr);
    }

    .tn-move-blurb {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tn-arrow {
        transition: none;
    }
}