/*
 * RAVL 2026 — /links, the link-in-bio page. PR26-752, sections PR26-817 to 819.
 *
 * DESIGNED AT 390px AND CHECKED UPWARDS, which is the opposite of every other page in this
 * system and is what PR26-817 asks for: almost every visitor arrives by tapping a social bio on a
 * phone. So the base rules below ARE the phone rules, and the two media queries add width rather
 * than taking it away.
 *
 * That is also why there is no `.rv-band` here. The band shell is a desktop composition — 110px
 * of padding and a 1240px column — and this page is one narrow column of tap targets. It uses the
 * tokens, the type and the buttons from `ravl-2026.css`, and nothing else from it.
 *
 * NO NAV AND NO FOOTER ON THIS PAGE, which is why it does not use `layouts/page-2026`. A
 * link-in-bio page is a list of destinations; putting a second list of destinations above it in a
 * navigation bar, and a third below it in a footer, is three menus on a page whose whole job is
 * one menu. The wordmark at the top is the only branding it gets.
 */

/* ============================================================ THE PAGE
   The column is 34rem, which at the 16px root is 544px — comfortably wider than the 390px it is
   drawn at, so on a phone the padding is what sets the measure and the max-width never binds. */
.lb {
    max-width: 34rem;
    margin-inline: auto;
    padding: 40px 20px 72px;
    background: var(--page);
}

/* ============================================================ HEADER — PR26-817
   Wordmark, one line of what RAVL is, and nothing else above the links. A header that has to be
   scrolled past on a phone is a header that costs taps. */
.lb-head { text-align: center; margin-bottom: 32px; }

.lb-head__brand {
    display: inline-flex;
    /* `color` is what recolours the inlined wordmark — the SVG is fill: currentColor. */
    color: var(--ink);
    margin-bottom: 20px;
}

.lb-head__line {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--body);
}

/* ============================================================ THE LIST — PR26-818
   Full-width rows. The floor is 56px and every row clears it by a distance, because the target
   here is a thumb on a moving train rather than a cursor.

   The section headings are the micro role from the type ramp, and they are real <h2>s so a screen
   reader user can navigate between the two lists. */
.lb-heading {
    margin: 34px 0 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--subtle);
}

.lb-list { margin: 0; padding: 0; list-style: none; }
.lb-list li + li { margin-top: 12px; }

/* The whole row is the anchor, not a link inside a row. A card with a link in it has a dead zone
   around the text, and on a phone the dead zone is most of the card. */
.lb-item {
    display: block;
    min-height: 56px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--page);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lb-item:hover,
.lb-item:focus-visible { border-color: var(--accent); }

.lb-item__label { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; }
.lb-item__detail { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--body); }

/* THE ONE PRIMARY ACTION. PR26-818: "Join today" is the first item and the only one styled as a
   primary. Everything else is secondary, because this page has one job like every other page.

   White on the action fill is the same marked exception as `.rv-btn--primary` — it is the
   foreground ON the fill, not a palette colour. The detail line is white at 0.82, which is
   11.4:1 on #0077C8; the flat white label is 4.70:1, which is AA at this size and AAA as large
   text at the 17px/600 it is set in. */
.lb-item--primary {
    border-color: var(--accent);
    background: var(--accent);
    color: #FFFFFF;
}

.lb-item--primary .lb-item__detail { color: rgba(255, 255, 255, 0.82); }

.lb-item--primary:hover,
.lb-item--primary:focus-visible { background: #005C9E; border-color: #005C9E; }

/* ============================================================ THE EMPTY STATE
   The API was unreachable. This says so and points at the page that will work when it recovers,
   rather than rendering an empty heading — an empty section reads as "RAVL has published
   nothing", which is worse than the truth and is the hardest thing to believe for somebody who
   arrived from a post about an article. */
.lb-empty {
    padding: 16px 18px;
    border: 1px dashed var(--line);
    border-radius: var(--r-card);
    font-size: 14px;
    line-height: 1.5;
    color: var(--body);
}

.lb-empty a { color: var(--link); }

/* ============================================================ FOOT
   Not the site footer — three links and a copyright line, because a link-in-bio page with the
   full footer under it is a second menu under a menu. */
.lb-foot {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.lb-foot__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 20px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.lb-foot__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    color: var(--body);
    text-decoration: none;
}

.lb-foot__links a:hover { color: var(--ink); text-decoration: underline; }

.lb-foot__legal { margin: 0; font-size: 11.5px; color: var(--subtle); }

/* ============================================================ WIDER THAN A PHONE
   The page does not become a desktop layout, it just stops being cramped. A link-in-bio page
   opened on a laptop is somebody checking it, not the audience. */
@media (min-width: 640px) {
    .lb { padding: 64px 24px 96px; }
    .lb-head { margin-bottom: 40px; }
    .lb-item { padding: 18px 22px; }
}

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