/* ==========================================================================
   FishSplit — base stylesheet
   Palette sampled directly from the logo artwork (red #c12026, near-black
   #020204, hull greys #79797b / #b7b7b5).
   Mobile-first: base rules target phones, media queries scale up.
   ========================================================================== */

:root {
    /* Brand — straight off the logo */
    --red:        #c12026;
    --red-deep:   #9c161c;
    --red-wash:   #fdf2f2;

    /* The logo is red/black/grey; these deep blues are the supporting
       "on the water" tones used for large surfaces, where a full-strength red
       would be exhausting to read against. */
    --navy:       #0e2430;
    --navy-deep:  #071720;

    /* Neutrals */
    --ink:        #101418;
    --body:       #4a5158;
    --muted:      #6f767d;
    --line:       #e3e6e9;
    --surface:    #ffffff;
    --canvas:     #f6f7f8;

    /* Money saved — used only for savings figures and the captain CTA, so the
       number a reader cares about is never the same colour as a warning. */
    --green:      #1c7a4a;

    --radius:     14px;
    --radius-sm:  9px;
    --shadow:     0 1px 2px rgba(16, 20, 24, .06), 0 8px 24px rgba(16, 20, 24, .07);
    --wrap:       1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--body);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 2rem; letter-spacing: -.02em; }
h2 { font-size: 1.5rem; letter-spacing: -.01em; }
h3 { font-size: 1.0625rem; }

p { margin: 0 0 1rem; }
a { color: var(--red); }

img { max-width: 100%; height: auto; display: block; }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 20px;
}

/* --- Header ------------------------------------------------------------ */

.site-header {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 20;
}

.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Wraps on phones: the nav drops to a second line rather than squeezing the
       logo to nothing. Without this, adding the trip links crushed the brand
       and there was no way to reach Open seats or My trips on a phone at all. */
    flex-wrap: wrap;
    gap: 8px 14px;
    min-height: 66px;
    padding-block: 8px;
}

/* Never let the logo be the thing that gives way when the nav grows. */
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }

/* The horizontal lockup is 4.08:1, so 168px wide is 41px tall and clears the
   66px header. Height is capped as well as width, so a future logo swap with a
   different aspect ratio can't silently blow the header open. */
.brand img { width: 152px; max-height: 42px; object-fit: contain; }

/* Mobile row order: [brand][cta] then [nav] full width underneath. */
.header-nav {
    order: 3;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    /* If a future link makes these overflow, scroll them rather than wrap to a
       third row. */
    overflow-x: auto;
    scrollbar-width: none;
}

.header-nav::-webkit-scrollbar { display: none; }

.header-cta {
    order: 2;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-link {
    color: var(--body);
    text-decoration: none;
    font-weight: 600;
    font-size: .875rem;
    padding: 4px 0;
    white-space: nowrap;
}

.nav-link:hover { color: var(--ink); }
.nav-link-quiet { color: var(--muted); font-weight: 500; }

@media (min-width: 720px) {
    .nav-link { font-size: .9375rem; padding: 6px 2px; }
    .brand img { width: 178px; max-height: 44px; }
}

/* Single row only once there is genuinely room for it.
   This was 720px, which worked until the trip and seat-request links arrived —
   six items plus the logo and the Post-seats button need about 900px, and below
   that the header ran past the viewport and gave every page a horizontal
   scrollbar. Wrapping to two rows is much better than overflowing. */
@media (min-width: 900px) {
    .site-header .wrap { flex-wrap: nowrap; padding-block: 0; }
    .header-nav { order: 2; flex: 0 1 auto; overflow: visible; margin-left: auto; }
    .header-cta { order: 3; margin-left: 0; }
    .brand img { width: 190px; max-height: 46px; }
}

.nav-link:hover { color: var(--ink); }

/* --- Buttons ----------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s;
}

.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-deep); }

.btn-accent { background: var(--green); color: #fff; }
.btn-accent:hover { background: #16603a; }

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--muted); }

.btn-lg { padding: 14px 26px; font-size: 1.0625rem; }
.btn-full { width: 100%; }

/* --- Hero -------------------------------------------------------------- */

.hero {
    background: linear-gradient(180deg, var(--canvas) 0%, var(--surface) 100%);
    border-bottom: 1px solid var(--line);
    padding: 34px 0 40px;
    text-align: center;
}

.hero-logo {
    width: 260px;
    max-width: 70%;
    margin: 0 auto 18px;
}

.hero h1 {
    font-size: 2rem;
    max-width: 20ch;
    margin-inline: auto;
}

.hero .price-was {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    white-space: nowrap;
}

.hero .price-now { color: var(--red); white-space: nowrap; }

.lede {
    font-size: 1.0625rem;
    max-width: 56ch;
    margin: 0 auto 22px;
}

@media (min-width: 720px) {
    .hero { padding: 54px 0 60px; }
    .hero h1 { font-size: 2.75rem; }
    .lede { font-size: 1.1875rem; }
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red-wash);
    color: var(--red-deep);
    border: 1px solid #f4d4d5;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: .8125rem;
    font-weight: 700;
    margin: 0 0 16px;
}

.pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
}

/* --- Launch-list signup form ------------------------------------------- */

.signup {
    max-width: 520px;
    margin: 0 auto;
    text-align: left;
}

.signup-row { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 560px) {
    .signup-row { flex-direction: row; }
    .signup-row input[type="email"] { flex: 1; }
}

.signup input[type="email"],
.signup input[type="text"],
.signup select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--surface);
}

.signup input:focus, .signup select:focus {
    outline: 2px solid var(--red);
    outline-offset: 1px;
    border-color: var(--red);
}

.signup-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* Stacked on phones. Side by side these two are ~150px each, which truncates
   both the select's option text and the port placeholder mid-word. */
.signup-meta > * { flex: 1 1 100%; }

@media (min-width: 560px) {
    .signup-meta > * { flex: 1 1 46%; min-width: 150px; }
}

.signup .fineprint {
    font-size: .8125rem;
    color: var(--muted);
    margin: 12px 0 0;
    text-align: center;
}

/* The honeypot. Bots fill every field they find; people never see this one.
   Kept out of the accessibility tree so screen readers don't announce it. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Sections ---------------------------------------------------------- */

.section { padding: 44px 0; }
.section-alt { background: var(--canvas); border-block: 1px solid var(--line); }

@media (min-width: 720px) { .section { padding: 64px 0; } }

.section-head { text-align: center; max-width: 60ch; margin: 0 auto 30px; }
.section-head p { color: var(--muted); margin: 0; }

/* --- Steps ------------------------------------------------------------- */

.steps { display: grid; gap: 18px; }

@media (min-width: 760px) {
    .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.step {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 22px;
}

.step .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-weight: 800;
    font-size: .9375rem;
    margin-bottom: 12px;
}

.step h3 { margin-bottom: 6px; }
.step p { margin: 0; font-size: .9375rem; }

/* --- Trust / safety panel ---------------------------------------------- */

.trust {
    background: var(--navy);
    color: #cfd8de;
    border-radius: var(--radius);
    padding: 28px 24px;
}

.trust h2 { color: #fff; }
.trust strong { color: #fff; }

.trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

@media (min-width: 760px) {
    .trust { padding: 40px 38px; }
    .trust-list { grid-template-columns: repeat(3, 1fr); gap: 26px; }
}

.trust-list h3 { color: #fff; margin-bottom: 4px; }
.trust-list p { margin: 0; font-size: .9375rem; }

.trust-list .tick {
    display: inline-block;
    color: #fff;
    background: var(--green);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    text-align: center;
    line-height: 26px;
    font-size: .875rem;
    font-weight: 800;
    margin-bottom: 10px;
}

/* --- Rules / vibe checklist -------------------------------------------- */

.rules { display: grid; gap: 12px; }

@media (min-width: 620px) { .rules { grid-template-columns: repeat(2, 1fr); } }

.rule {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-size: .9375rem;
}

.rule .emoji { font-size: 1.25rem; line-height: 1.2; }
.rule strong { color: var(--ink); display: block; }

/* --- Captain band ------------------------------------------------------ */

.captain-band {
    display: grid;
    gap: 22px;
    align-items: center;
}

@media (min-width: 860px) {
    .captain-band { grid-template-columns: 1.1fr .9fr; gap: 40px; }
}

.captain-band .fee {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--green);
    line-height: 1;
    letter-spacing: -.02em;
}

/* --- Auth pages -------------------------------------------------------- */

.auth-page {
    padding: 34px 20px 54px;
    background: var(--canvas);
    min-height: 70vh;
}

.auth-card {
    max-width: 430px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 24px;
}

.auth-card h1 { font-size: 1.5rem; margin-bottom: 4px; }
.auth-sub { color: var(--muted); font-size: .9375rem; margin-bottom: 20px; }

.field { margin-bottom: 16px; }

.field label {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}

.field input, .field select, .field textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--surface);
}

.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--red);
    outline-offset: 1px;
    border-color: var(--red);
}

.field .hint { display: block; color: var(--muted); font-size: .8125rem; margin-top: 5px; }

.check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .9375rem;
    margin-bottom: 18px;
}

.check input { width: 18px; height: 18px; accent-color: var(--red); }

.auth-alt {
    text-align: center;
    font-size: .9375rem;
    color: var(--muted);
    margin: 16px 0 0;
}

/* --- Trips: browse, cards, detail --------------------------------------- */

.wrap-narrow { max-width: 720px; }

.filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 24px;
}

@media (min-width: 700px) {
    .filters { grid-template-columns: repeat(3, 1fr); }
    .filter-actions { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
    .filters { grid-template-columns: 1.4fr 1fr 1fr 1fr .8fr auto; align-items: end; }
    .filter-actions { grid-column: auto; }
}

.filter label {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 5px;
}

.filter select, .filter input {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: .9375rem;
    color: var(--ink);
    background: var(--surface);
}

.filter select:focus, .filter input:focus {
    outline: 2px solid var(--red);
    outline-offset: 1px;
    border-color: var(--red);
}

.filter-actions { display: flex; gap: 10px; }
.filter-actions .btn { flex: 1; }

@media (min-width: 1000px) {
    .filter-actions .btn { flex: 0 0 auto; }
}

.results-count { color: var(--muted); font-size: .9375rem; margin-bottom: 14px; }

.trip-list { display: grid; gap: 14px; }

.trip-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.trip-card:hover { border-color: var(--muted); box-shadow: var(--shadow); }

.trip-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.trip-card h3 { margin: 0 0 5px; font-size: 1.0625rem; }

.trip-meta { margin: 0; font-size: .875rem; color: var(--muted); }

.trip-price { text-align: right; flex: 0 0 auto; }
.trip-price strong { display: block; font-size: 1.375rem; color: var(--red); letter-spacing: -.02em; }
.trip-price span { font-size: .75rem; color: var(--muted); }

.trip-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.seats { font-size: .875rem; font-weight: 700; color: var(--ink); }
.seats-low { color: var(--red); }

.chip {
    font-size: .75rem;
    font-weight: 700;
    color: var(--body);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 10px;
}

.chip-soon { background: var(--red-wash); border-color: #f4d4d5; color: var(--red-deep); }

.empty {
    text-align: center;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 40px 24px;
}

.empty h2 { font-size: 1.25rem; }
.empty p { max-width: 52ch; margin-inline: auto; }

/* Trip detail */

.trip-layout { display: grid; gap: 20px; align-items: start; }

/* On a phone the price and seats-left come BEFORE the rules. The rail is last
   in the DOM (it belongs in the right column on a desktop), so without this the
   two numbers a browsing angler is actually deciding on sat below every panel
   on the page. */
.trip-rail { order: -1; }

@media (min-width: 900px) {
    .trip-layout { grid-template-columns: 1.6fr 1fr; gap: 28px; }
    .trip-main { order: 0; }
    .trip-rail { order: 0; position: sticky; top: 84px; }
}

.trip-layout .panel { margin-bottom: 16px; }
.trip-rail .panel { margin-bottom: 16px; }

.trip-head { margin-bottom: 20px; }

.eyebrow {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 6px;
}

.trip-head h1 { font-size: 1.75rem; margin-bottom: 8px; }

@media (min-width: 720px) { .trip-head h1 { font-size: 2.125rem; } }

.trip-when { font-size: 1.0625rem; color: var(--ink); font-weight: 600; margin: 0 0 4px; }

.notice {
    background: #fff8e8;
    border: 1px solid #f0dcb0;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: .9375rem;
}

.notice strong { color: var(--ink); }
.notice-ok { background: #eef8f2; border-color: #cbe8d8; }

.rule-list { list-style: none; margin: 0 0 4px; padding: 0; }

.rule-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: .9375rem;
}

.rule-list li:last-child { border-bottom: 0; }
.rule-list strong { color: var(--ink); display: block; }

.rule-mark {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    text-align: center;
    line-height: 22px;
    font-size: .75rem;
    font-weight: 800;
    background: var(--line);
    color: var(--body);
}

.rule-yes .rule-mark { background: #e4f3ea; color: var(--green); }
.rule-no .rule-mark { background: var(--red-wash); color: var(--red); }
.rule-unsaid .rule-mark { background: var(--line); color: var(--muted); }

.quoted {
    border-left: 3px solid var(--line);
    padding-left: 14px;
    margin: 14px 0 0;
    font-size: .9375rem;
    color: var(--body);
}

.panel-price { border-color: var(--red); border-width: 2px; }

.rail-price {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--red);
    letter-spacing: -.03em;
    margin: 0;
    line-height: 1;
}

.rail-price span { font-size: .9375rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }

.rail-seats { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 10px 0 6px; }

.rail-cta-note {
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font-size: .875rem;
    color: var(--body);
    margin: 14px 0;
}

.btn-link-danger {
    display: block;
    width: 100%;
    margin-top: 10px;
    background: none;
    border: 0;
    padding: 8px;
    font: inherit;
    font-size: .875rem;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
}

.btn-link-danger:hover { color: var(--red); }

/* Post-a-trip form */

.field-row { display: grid; gap: 0 14px; }

@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

form > .panel { margin-bottom: 16px; }

/* My trips */

.mine-row { position: relative; }

.mine-status {
    margin: 6px 0 0;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--muted);
}

.mine-status.status-open { color: var(--green); }
.mine-status.status-cancelled { color: var(--red); }

/* --- Seat requests ------------------------------------------------------ */

.request-group {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin: 26px 0 12px;
}

.request-card { margin-bottom: 16px; }

.request-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.request-amount { text-align: right; flex: 0 0 auto; }
.request-amount strong { display: block; font-size: 1.25rem; color: var(--ink); }
.request-amount span { font-size: .8125rem; color: var(--muted); }
.request-amount .status-paid { color: var(--green); font-weight: 700; }
.request-amount .status-payment_failed { color: var(--red); font-weight: 700; }

.request-message {
    background: var(--canvas);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: .9375rem;
    margin: 14px 0;
}

.request-message strong { color: var(--ink); }

/* The rule comparison. Only genuine clashes are coloured — a page of amber
   warnings would train an organiser to ignore all of them. */
.compare {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
    margin: 14px 0;
}

.compare th, .compare td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
}

.compare thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    border-bottom: 2px solid var(--line);
}

.compare tbody th { color: var(--muted); font-weight: 600; }
.compare td { color: var(--ink); }

.compare tr.clash td, .compare tr.clash th { background: var(--red-wash); }

.clash-flag {
    display: inline-block;
    margin-left: 6px;
    font-size: .6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--red-deep);
}

.request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 6px;
}

.request-actions form { flex: 1 1 auto; }
.request-actions .btn { width: 100%; }

@media (min-width: 560px) {
    .request-actions form { flex: 0 0 auto; }
    .request-actions .btn { width: auto; }
}

/* The captain link an organiser can forward. Long, so it must wrap rather
   than blow the layout out sideways on a phone. */
.share-link {
    display: block;
    margin: 10px 0 6px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8125rem;
    color: var(--ink);
    overflow-wrap: anywhere;
    word-break: break-all;
}

.btn-link-quiet {
    display: block;
    width: 100%;
    margin-top: 10px;
    background: none;
    border: 0;
    padding: 8px;
    font: inherit;
    font-size: .875rem;
    color: var(--body);
    text-decoration: underline;
    cursor: pointer;
}

.btn-link-quiet:hover { color: var(--ink); }

.nav-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: .6875rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* --- Account: profile + dashboard -------------------------------------- */

.profile-grid { display: grid; gap: 20px; align-items: start; }

@media (min-width: 860px) {
    .profile-grid { grid-template-columns: 1fr 1.35fr; gap: 28px; }
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 20px;
}

.panel h2 { font-size: 1.125rem; margin-bottom: 16px; }

.panel .subhead {
    font-size: 1rem;
    margin: 26px 0 10px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.panel > .btn { margin-top: 6px; }

.avatar-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
}

.avatar-row img,
.avatar-row .avatar-fallback {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    flex: 0 0 62px;
}

.avatar-row img { object-fit: cover; }

.avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    color: #fff;
    font-weight: 800;
    letter-spacing: .02em;
}

.meta-list { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }

.meta-list li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.meta-list li:last-child { border-bottom: 0; }
.meta-list .k { color: var(--muted); }
.meta-list .v { color: var(--ink); text-align: right; word-break: break-word; }

/* Profile completeness meter. */
.meter-label {
    display: flex;
    justify-content: space-between;
    font-size: .875rem;
    font-weight: 700;
    color: var(--ink);
    margin: 16px 0 6px;
}

.meter {
    height: 8px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
    margin-bottom: 14px;
}

.meter > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--green);
    transition: width .3s;
}

/* Tri-state trait questions. */
.trait {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 0 0 12px;
}

.trait legend {
    font-size: .875rem;
    font-weight: 700;
    color: var(--ink);
    padding: 0 6px;
}

.trait .radio {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 16px;
    font-size: .9375rem;
}

.trait .radio input { width: 17px; height: 17px; accent-color: var(--red); }

.next-list { margin: 0; padding-left: 22px; font-size: .9375rem; }
.next-list li { margin-bottom: 12px; }
.next-list strong { color: var(--ink); }

/* Header avatar chip. */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 700;
    font-size: .9375rem;
}

.user-chip img,
.user-chip .avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: 0 0 32px;
    font-size: .75rem;
}

.user-chip img { object-fit: cover; }

/* The name stays hidden until 1000px. Between 720 and 1000 the header is a
   single nowrap row, and the extra ~90px of username was enough to push it past
   the viewport and give the whole page a horizontal scrollbar. */
.user-chip-name { display: none; }

@media (min-width: 1000px) {
    .user-chip-name { display: inline; }
}

/* --- Alerts ------------------------------------------------------------ */

.alert {
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: .9375rem;
    border: 1px solid transparent;
}

.alert ul { margin: 0; padding-left: 20px; }

.alert-error { background: var(--red-wash); border-color: #f2cdce; color: #8e1418; }
.alert-success { background: #eef8f2; border-color: #cbe8d8; color: #14603a; }

/* --- Footer ------------------------------------------------------------ */

.site-footer {
    background: var(--navy-deep);
    color: #9fb0bb;
    padding: 34px 0;
    font-size: .875rem;
    margin-top: 0;
}

.site-footer .wrap { text-align: center; }

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.footer-brand img { width: 38px; border-radius: 8px; }
.footer-brand span { color: #fff; font-weight: 800; letter-spacing: -.01em; }

.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 0 0 10px; }
.footer-links a { color: #cfd8de; text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }

.site-footer p { margin: 0 0 6px; }

/* --- Admin -------------------------------------------------------------- */

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--body);
    text-decoration: none;
}

.admin-tab:hover { background: var(--canvas); color: var(--ink); }
.admin-tab-on { background: var(--ink); color: #fff; }
.admin-tab-on:hover { background: var(--ink); color: #fff; }

.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (min-width: 720px) { .admin-grid { grid-template-columns: repeat(4, 1fr); } }

.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}

.stat strong { display: block; font-size: 1.5rem; color: var(--ink); letter-spacing: -.02em; }
.stat a { text-decoration: none; }
.stat a strong { color: var(--red); }
.stat span { font-size: .8125rem; color: var(--muted); }

.admin-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.admin-filters .chip { text-decoration: none; }

/* Admin tables are wide by nature. They scroll inside their own box rather than
   pushing the page sideways — the rule the rest of the site also follows. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.admin-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: .875rem;
}

.admin-table th, .admin-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.admin-table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    border-bottom: 2px solid var(--line);
    white-space: nowrap;
}

.admin-table .status-open, .admin-table .status-paid { color: var(--green); font-weight: 700; }
.admin-table .status-cancelled, .admin-table .status-payment_failed { color: var(--red); font-weight: 700; }
.admin-table form { margin: 0; }

/* Track record. A fact ("8 of 9 would fish with them again"), never a score —
   an average would quietly become the matching algorithm the product is
   deliberately not building. */
.track-record {
    display: block;
    margin-top: 4px;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--green);
}

.track-record-new { color: var(--muted); font-weight: 500; }

/* Policy pages: readable lists rather than walls of text. */
.policy-list { margin: 0; padding-left: 20px; font-size: .9375rem; }
.policy-list li { margin-bottom: 10px; }
.policy-list strong { color: var(--ink); }

/* Seat alerts list. */
.alert-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: .9375rem;
}

.alert-row:last-of-type { border-bottom: 0; }
.alert-row-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.alert-row-actions form { margin: 0; }