/* ============================================================
   BorkR design system — Concept E: Brutalist Type
   Typography IS the design system.
   Zero border-radius. 900 weight. Uppercase structure.
   Pride colour as signal only — never decoration.
   ============================================================ */

:root {
    /* Surfaces */
    --bg:      #0C0C0C;
    --surface: #111111;
    --raised:  #111111;
    /* One step above --surface, for a panel that has to separate from the surface it sits on
       (the Admin tag console's confirmation row). Named because the console already asked for
       it: an undeclared custom property makes background transparent, so the row that was
       meant to stand out had no background at all. */
    --surface-2: #161616;
    --border:  #1A1A1A;

    /* Text */
    --text:   #F2F2F2;
    --text-2: #A8A8A8;
    --text-3: #808080;

    /* Brand / primary CTA */
    --coral: #FF4D4A;
    /* Brand mark magenta — the heart in the BORKR wordmark and the mascot's
       eye-patch. Brand identity only; not a Pride category or status colour. */
    --pink: #EB008C;

    /* Pride ramp */
    --red:    #FF4D4A;
    --orange: #FF8A3D;
    --yellow: #FFD23F;
    --green:  #36C46B;
    --blue:   #4D8BFF;
    --violet: #A06BFF;

    /* Seventh event category (Education) accent. Outside the Pride ramp on purpose: all six
       ramp colours are already spoken for by a category, and reusing one would make the
       accent stop telling the reader anything. Sits between --green and --blue in hue so it
       reads as its own signal rather than a shade of either. */
    --teal: #24D3C4;

    /* Event-card accent for uncategorised events (stripe + kicker).
       Must stay readable as text on --surface — never a border grey. */
    --cat-none: #FF8A3D;

    /* RSVP states */
    --go:     #36C46B;
    --go-bg:  #0D1F14;
    --maybe:  #FFD23F;
    --wait:   #4D8BFF;
    --cant:   #A06BFF;

    /* Brutalist: zero radius everywhere */
    --radius:    0px;
    --radius-lg: 0px;

    --rainbow:   linear-gradient(90deg, #FF4D4A 0 16.667%, #FF8A3D 16.667% 33.333%, #FFD23F 33.333% 50%, #36C46B 50% 66.667%, #4D8BFF 66.667% 83.333%, #A06BFF 83.333% 100%);
    --rainbow-v: linear-gradient(180deg, #FF4D4A 0 16.667%, #FF8A3D 16.667% 33.333%, #FFD23F 33.333% 50%, #36C46B 50% 66.667%, #4D8BFF 66.667% 83.333%, #A06BFF 83.333% 100%);

    color-scheme: dark;
}

* { box-sizing: border-box; }

/* ---- Base ---- */
.hydrant-dark {
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
}

a { color: var(--blue); text-decoration: none; }

/* An action that reads as a link. Use this rather than an <a href=""> for anything that does not
   navigate: an empty href resolves against <base href="/"> and walks the member to the home page. */
.linkish {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--blue);
    cursor: pointer;
}
.linkish:hover { text-decoration: underline; }

h1, h2, h3 {
    color: var(--text);
    font-weight: 900;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    line-height: 1.05;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

/* ---- Rainbow rule — structural divider, 3px ---- */
.rainbow-stripe {
    height: 3px;
    background: var(--rainbow);
}

/* ---- Layout ---- */
.container { max-width: 72rem; margin: 0 auto; padding: 1.5rem; }

/* ---- Header ---- */
.site-header {
    position: sticky;
    top: 0;
    background: #080808;
    border-bottom: 2px solid var(--border);
    z-index: 10;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1.5rem;
}
.brand {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: var(--text);
}
.brand .r { color: var(--coral); }
/* Brand mark: paw icon + live-text BORKR wordmark (heart in the O, coral R) */
.brand-paw {
    height: 2.1rem;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.brand-word {
    font-family: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--text);
}
.brand-o {
    position: relative;
    display: inline-block;
}
.brand-o::after {
    content: "\2665";
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);
    color: var(--pink);
    font-size: .46em;
    line-height: 1;
}
/* Brand mark: hard square, rainbow top stripe (legacy placeholder) */
.brand-mark {
    height: 1.8rem;
    width: 1.8rem;
    border-radius: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-top: 3px solid var(--coral);
    flex-shrink: 0;
}
.beta-pill {
    background: transparent;
    color: var(--text-3);
    border: 1.5px solid var(--border);
    padding: .1rem .5rem;
    border-radius: 0;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ---- Nav ---- */
.nav { display: flex; align-items: center; gap: .1rem; }
.nav a {
    color: var(--text-3);
    padding: .45rem .8rem;
    border-radius: 0;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.nav a:hover { color: var(--text); background: var(--surface); }

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border-radius: 0;
    padding: .6rem 1.1rem;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background-color .1s ease, border-color .1s ease;
}
.btn-primary { color: #fff; background: var(--coral); border-color: var(--coral); }
.btn-primary:hover { background: #e8413e; border-color: #e8413e; }
.btn-outline { border-color: var(--border); background: transparent; color: var(--text); }
.btn-outline:hover { background: var(--surface); border-color: #333; }
.btn-ghost { color: var(--text-2); background: transparent; border-color: transparent; }
.btn-ghost:hover { color: var(--text); background: var(--surface); }

/* A disabled button has to look disabled. Bootstrap ships its own `.btn-primary:disabled`, which
   out-specifies the `.btn-primary` above, so without these a button that was merely busy repainted
   itself Bootstrap blue, a colour that appears nowhere else in the product. It read as a live button
   in an unfamiliar shade rather than one that had stopped responding, which is exactly how a stalled
   picture upload got reported as "the buttons do nothing". */
.btn:disabled, .btn.disabled { opacity: .5; cursor: default; }
.btn-primary:disabled, .btn-primary.disabled { color: #fff; background: var(--coral); border-color: var(--coral); }
.btn-outline:disabled, .btn-outline.disabled { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:disabled, .btn-ghost.disabled { background: transparent; border-color: transparent; color: var(--text-2); }

/* ---- Surfaces ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 1.25rem;

    /* Bootstrap's own .card sets `color: var(--bs-body-color)` (#212529, meant for a light page),
       and bootstrap.min.css loads before this file, so any text inside a card that did not set its
       own colour rendered near-black on a #111 surface: job titles, "Last run …" lines, queue row
       headings, card <strong>s. Only .muted children escaped it, which is why descriptions read
       fine while the headings above them did not. */
    color: var(--text);
}
.section { margin-bottom: 1.75rem; }

/* ---- Inputs ---- */
.input {
    width: 100%;
    border: 1.5px solid var(--border);
    background: var(--surface);
    border-radius: 0;
    padding: .65rem .85rem;
    color: var(--text);
    font-size: .95rem;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; border-color: var(--coral); }

/* ---- Password reveal ----
   The eye that sits inside a password field's right edge, wired by password-reveal.js.
   The input reserves room for it so a revealed password never runs underneath the button. */
.pw-field { position: relative; }
.pw-field .input { padding-right: 2.9rem; }
.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-3);
    cursor: pointer;
}
.pw-toggle:hover { color: var(--coral); }
.pw-toggle:focus-visible { color: var(--coral); outline: 1.5px solid var(--coral); outline-offset: -2px; }
.pw-toggle svg { width: 1.15rem; height: 1.15rem; display: block; }
/* The eye states. Driven by a class rather than the hidden attribute, which is defined on
   HTMLElement and therefore does nothing on an <svg>: both eyes drew on top of each other. */
.pw-toggle [data-pw-icon="closed"] { display: none; }
.pw-toggle.pw-revealed [data-pw-icon="open"] { display: none; }
.pw-toggle.pw-revealed [data-pw-icon="closed"] { display: block; }

input[type="file"] {
    color: var(--text-2);
    color-scheme: dark;
    font-size: .85rem;
}
input[type="file"]::file-selector-button {
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 0;
    padding: .5rem .8rem;
    margin-right: .6rem;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: .85rem;
    cursor: pointer;
}
.label {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: .4rem;
}

/* ---- Chips / filter pills — zero radius, heavy weight ---- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-3);
    border-radius: 0;
    padding: .3rem .75rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}
.chip:hover:not(.chip--active) { border-color: #333; color: var(--text-2); }
/* Chips rendered as links (festival page day/affiliation filters) read like the buttons */
a.chip { text-decoration: none; }
/* Active filter: solid white fill, dark text */
.chip-active,
.chip--active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}
.going { color: var(--go); font-size: .85rem; font-weight: 700; }

/* ---- Event card — hard left border, type-forward, no image ---- */
.event-card {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: .6rem;
    transition: border-color .1s ease;
}
.event-card:hover { border-color: #333; }
/* Left stripe — rainbow, 4px, full height */
.event-card .stripe {
    width: 4px;
    background: var(--rainbow-v);
    flex: none;
}
.event-card .body {
    padding: .85rem 1rem;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.event-card .when {
    text-align: center;
    width: 3.4rem;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .05rem;
}
.event-card .when .sub {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
}
/* Stacked date -> day -> time (coarsest to finest) so the list scans top-down by date first;
   date carries the size/weight emphasis since it's the primary scan target. */
.event-card .when .date {
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.event-card .when .dow {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
}
.event-card .when .time {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-3);
    margin-top: .1rem;
}
.event-card .meta { flex: 1; min-width: 0; }
.event-card .meta .title {
    font-size: .95rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.event-card .meta .where {
    font-size: .75rem;
    color: var(--text-2);
    margin-top: .15rem;
    display: block;
}

/* ---- Event category tag label (e.g. "KINK · LEATHER") ---- */
.event-cat {
    display: block;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: .15rem;
}

/* ---- Time-bucket section headers (Tonight / This Week / Upcoming) ---- */
.list-section-hdr {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-3);
    border-bottom: 1px solid var(--border);
    padding-bottom: .3rem;
    margin-bottom: .5rem;
    margin-top: .25rem;
}

/* ---- Map toggle wrapper ---- */
.event-card + div > div[style*="border"] {
    border-radius: 0 !important;
}

/* ---- Hero / landing ---- */
.hero { text-align: center; padding: 3rem 1rem 2rem; }
.hero .eyebrow {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: .75rem;
}
.hero h1 {
    font-size: clamp(2.8rem, 9vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    margin: 0 0 .6rem;
    line-height: 0.95;
}
.hero p.lead {
    font-size: 1rem;
    color: var(--text-2);
    max-width: 30rem;
    margin: 0 auto 1.75rem;
    line-height: 1.6;
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
}
.loc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 1.4rem;
    max-width: 27rem;
    margin: 0 auto;
    text-align: left;
}
.loc-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0;
    background: #1A0D2E;
    color: var(--violet);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* ---- Grid teaser ---- */
.teaser {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
}
.teaser-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .4rem;
    padding: .4rem;
    opacity: .25;
}
.teaser-grid .tile {
    aspect-ratio: 1;
    border-radius: 0;
    background: var(--raised);
}
.teaser-lock {
    position: absolute;
    inset: 0;
    background: rgba(12,12,12,.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    gap: .5rem;
}

/* ---- Footer ---- */
.footer { border-top: 2px solid var(--border); margin-top: 2.5rem; }
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    color: var(--text-3);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1.25rem 1.5rem;
}
.footer-links { display: flex; gap: 1.1rem; }
.footer-links a { color: var(--text-3); }
.footer-links a:hover { color: var(--text-2); }

.muted { color: var(--text-2); }

/* ---- People grid tiles ---- */
.pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .5rem;
}
.ptile {
    position: relative;
    aspect-ratio: .82;
    border-radius: 0;
    overflow: hidden;
    display: block;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
}
.ptile:hover { border-color: #333; }
.ptile .ov {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12,12,12,.88);
    padding: .5rem .6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
}
.ptile .name {
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.ptile .dist {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}
/* Colour dot — category/activity signal */
.ptile .dot {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--go);
    border: 1.5px solid var(--bg);
}
.ptile .tick { position: absolute; top: 4px; right: 6px; color: var(--go); font-size: .85rem; }

/* ---- Grid visibility banner ---- */
.vis-banner {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--green);
    border-radius: 0;
    padding: .7rem .9rem;
    margin-bottom: 1rem;
}

/* ---- Grid gate rows ---- */
.gate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 0;
    padding: .75rem 1rem;
    margin-bottom: .6rem;
    font-size: .85rem;
    font-weight: 700;
}

/* ---- Band chips ---- */
.seen-ago-chip {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(12,12,12,.8);
    border-radius: 0;
    padding: .1rem .4rem;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}
.band-chip-sm {
    display: inline-block;
    border-radius: 0;
    padding: .1rem .4rem;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: .15rem;
}
.band-near  { background: rgba(54,196,107,.12);  color: var(--green); border: 1px solid rgba(54,196,107,.25); }
.band-close { background: rgba(77,139,255,.1);   color: var(--blue);  border: 1px solid rgba(77,139,255,.22); }
.band-far   { background: transparent;           color: var(--text-3); border: 1px solid var(--border); }

/* ---- Member profile card ---- */
.mp-wrap { max-width: 30rem; margin: 1.5rem auto; }
.mp-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--coral);
    border-radius: 0;
    overflow: hidden;
}
/* Rainbow rule replaces the full-width banner blob */
.mp-banner {
    height: 3px;
    background: var(--rainbow);
    display: none; /* hidden — border-top on mp-card is the stripe */
}
.mp-body { padding: 0 1.1rem 1.25rem; }
.mp-top {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
    margin-bottom: .8rem;
    flex-wrap: wrap;
}
.mp-avatar {
    width: 56px;
    height: 56px;
    border-radius: 0;
    background: #1A1A1A;
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--text);
    flex: none;
    text-transform: uppercase;
}
.mp-pills {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    flex: 1;
}
.profile-pill {
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 0;
    padding: .25rem .6rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
    cursor: default;
}
.profile-pill--clickable { cursor: pointer; }
.profile-pill--clickable:hover { border-color: var(--blue); color: var(--text); }
.profile-pill--bork:hover { border-color: var(--orange); color: var(--orange); }
/* Educator badge. Borrows the same green the education tags and links already use, so the
   badge and the section it points at read as one thing. Deliberately not a highlight colour
   and deliberately not clickable: it is a label, not a rank or a route to a ranked list. */
.profile-pill--educator { border-color: rgba(54,196,107,.3); color: #6FDCA0; }
/* Organiser chips on the event page. One chip per person, name and pronouns, in the order the
   source credited them. Flash chose chips over roster rows: "clean, and once the profiles for
   organisers come, then we can make them clickable", which is why the handle is on the wire and
   not on the screen yet.

   Deliberately NOT text-transform: uppercase, unlike every other pill in this design. These are
   people's names and people's pronouns, printed as they wrote them: one organiser writes their
   name with a mathematical glyph and another writes "He/They", and shouting either back at them
   is exactly the normalising this feature refuses to do. */
.organisers { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: 0 0 .9rem; }
.organisers__label {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
}
.organiser-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    border: 1.5px solid var(--border);
    padding: .22rem .55rem;
    white-space: nowrap;
}
.organiser-chip__name { font-size: .8rem; font-weight: 800; color: var(--text); }
/* Only a chip that goes somewhere gets the affordance. Most organisers are not members here, and a
   chip that looks clickable and is not would be worse than one that does not pretend.

   The affordance has to exist AT REST, not only on hover. Every signal here used to sit behind
   :hover, so a linked chip and a plain one were pixel-identical until a mouse crossed them, and on
   a touch screen they stayed identical for ever. Flash found this on their own event: the chip was
   a working link to their profile and nothing on the page said so. Blue is not a new colour for
   this, it is what `a` is site-wide and what the hover rule below already used. */
.organiser-chip--linked { cursor: pointer; text-decoration: none; }
.organiser-chip--linked .organiser-chip__name { color: var(--blue); }
.organiser-chip--linked:hover { border-color: var(--blue); }
.organiser-chip--linked:hover .organiser-chip__name { text-decoration: underline; }
.organiser-chip__pronouns { font-size: .65rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-3); }

.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--go); flex: none; }

.mp-handle {
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin: 0 0 .15rem;
    color: var(--text);
}
.mp-pronouns { font-size: .75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 .6rem; }
.mp-bio { font-size: .85rem; color: var(--text-2); line-height: 1.5; margin: 0 0 1rem; }
.mp-tag-lbl {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0 0 .45rem;
}
.mp-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.mp-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 0;
    padding: .22rem .6rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.mp-tag--identity { background: rgba(160,107,255,.12); color: #C4A0FF; border: 1.5px solid rgba(160,107,255,.3); }
.mp-tag--into     { background: rgba(255,77,74,.1);    color: #FF8280; border: 1.5px solid rgba(255,77,74,.28); }
.mp-tag--custom   { background: transparent;           color: var(--text-2); border: 1.5px solid var(--border); }
/* Role field (D056): position blue, power brand pink. Deliberately distinct from the
   identity (violet) and into (coral) families so the Role row never reads as more Intos. */
.mp-tag--role-pos { background: rgba(77,139,255,.12);  color: #8FB4FF; border: 1.5px solid rgba(77,139,255,.32); }
.mp-tag--role-pow { background: rgba(235,0,140,.1);    color: #FF6BBE; border: 1.5px solid rgba(235,0,140,.32); }

/* Role editor (D056): five-point segmented scale. One tap sets, tap again clears; the whole
   control is hard-edged cells, no track-and-thumb anywhere. */
.role-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.role-seg--scope { grid-template-columns: repeat(4, 1fr); }
.role-seg-btn {
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 0;
    color: var(--text-2);
    cursor: pointer;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.25;
    padding: .5rem .1rem;
    text-transform: uppercase;
}
/* Selected cells wear the same wash as every other picker on this page (tinted fill, tinted
   text, tinted border) rather than a solid slab of accent. Position and Power deliberately
   reuse the exact values of .mp-tag--role-pos/--role-pow above, so what you pick in the editor
   is what the profile renders back. */
.role-seg-btn--pos-sel   { background: rgba(77,139,255,.12); border-color: rgba(77,139,255,.32); color: #8FB4FF; }
.role-seg-btn--pow-sel   { background: rgba(235,0,140,.1);   border-color: rgba(235,0,140,.32); color: #FF6BBE; }
/* Scope gets its own accent: yellow is the ramp colour nothing else on the edit screen spends
   (violet=Identity, coral=Into, blue=Position, pink=Power, green=Vibe/Educator, teal=Education)
   and it is the furthest in hue from all of them. It used to ask for --text-1, which no
   stylesheet defines. An unresolved var() makes background transparent, so the selected cell
   rendered as #0C0C0C text on the page background: "who sees this" had no readable selection. */
.role-seg-btn--scope-sel { background: rgba(255,210,63,.12); border-color: rgba(255,210,63,.32); color: #FFE082; }
.role-extra-btn {
    background: transparent;
    border: 1.5px dashed var(--border);
    border-radius: 0;
    color: var(--text-2);
    cursor: pointer;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    margin-top: 4px;
    padding: .35rem .6rem;
    text-transform: uppercase;
}
/* "Depends" is a value of the scale it sits under, not a third thing, so selecting it wears
   that scale's wash. Dashed while unselected is what marks it as the opt-out. */
.role-extra-btn--pos-sel { border-style: solid; background: rgba(77,139,255,.12); border-color: rgba(77,139,255,.32); color: #8FB4FF; }
.role-extra-btn--pow-sel { border-style: solid; background: rgba(235,0,140,.1);   border-color: rgba(235,0,140,.32); color: #FF6BBE; }

/* Beta 18+ gate (D057): interstitial + obscured folder cover */
.nsfw-interstitial {
    background: var(--surface);
    border: 1.5px solid #FF4D4A;
    margin: .5rem 0 1rem;
    padding: 1rem;
}
.nsfw-interstitial-title {
    color: #FF4D4A;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .12em;
    margin: 0 0 .35rem;
    text-transform: uppercase;
}
.nsfw-interstitial-body { color: var(--text-2); font-size: .82rem; margin: 0 0 .8rem; }
.mp-folder-cover--nsfw {
    background-image: repeating-linear-gradient(45deg, #1B1420 0 14px, #120E17 14px 28px);
    position: relative;
}
.mp-folder-cover--nsfw .gallery-chip { position: absolute; top: 4px; right: 4px; }
.mp-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.mp-link {
    display: inline-flex;
    align-items: center;
    border-radius: 0;
    padding: .22rem .6rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(77,139,255,.1);
    color: #8FB4FF;
    border: 1.5px solid rgba(77,139,255,.28);
    text-decoration: none;
}
a.mp-link:hover { background: rgba(77,139,255,.2); color: #B4CDFF; }
.mp-link--static { background: transparent; color: var(--text-2); border-color: var(--border); text-transform: none; letter-spacing: 0.02em; }
.mp-link--education { background: rgba(54,196,107,.1); color: #6FDCA0; border-color: rgba(54,196,107,.28); }
a.mp-link--education:hover { background: rgba(54,196,107,.2); color: #A2ECC4; }
.mp-tag--education { background: rgba(54,196,107,.12); color: #6FDCA0; border: 1.5px solid rgba(54,196,107,.3); }
.mp-selfdesc { font-weight: 700; letter-spacing: 0.06em; color: var(--text-3); text-transform: lowercase; margin-left: .3rem; }

/* ---- Profile galleries (D046): main hero strip + public folders ---- */
.mp-hero { position: relative; border-bottom: 1px solid var(--border); }
.mp-hero-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.mp-hero-strip::-webkit-scrollbar { display: none; }
/* The snap unit is the button wrapping each photo, not the photo, so that tapping one opens
   the viewer without the strip losing its scroll-snap behaviour. */
.mp-hero-slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
}
.mp-hero-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}
.mp-hero-count {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 1;
    background: var(--bg);
    border: 1px solid #333;
    padding: .15rem .5rem;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text);
}
.mp-folders { display: flex; gap: .5rem; overflow-x: auto; margin-bottom: .9rem; padding-bottom: .2rem; }
.mp-folder { flex: 0 0 7rem; background: var(--bg); border: 1px solid var(--border); text-decoration: none; color: inherit; }
.mp-folder:hover { border-color: #333; }
.mp-folder-cover {
    display: block;
    height: 4.6rem;
    background-color: #0F0F0F;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--border);
}
.mp-folder-name {
    display: block;
    border-left: 3px solid var(--violet);
    padding: .3rem .45rem;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
}
.mp-folder-count { display: block; color: var(--text-3); font-weight: 400; letter-spacing: .04em; text-transform: none; }
.mp-cta-row { display: flex; gap: .4rem; margin: 0 0 1rem; }
.mp-cta {
    flex: 1;
    text-align: center;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .7rem 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}
.mp-cta--primary { background: var(--coral); color: #FFFFFF; }
.mp-cta--primary:hover { filter: brightness(1.08); }
.mp-cta--primary:disabled { opacity: .65; cursor: default; }
.mp-cta--ghost { background: transparent; border: 1.5px solid #333; color: var(--text); }
.mp-cta--ghost:hover { border-color: var(--text-2); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.gallery-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border: 1px solid var(--border); }
.gallery-tile { position: relative; }
.gallery-tile-actions { position: absolute; top: .25rem; right: .25rem; display: flex; gap: .2rem; }
.gallery-tile-btn {
    background: var(--bg);
    border: 1px solid #333;
    border-radius: 0;
    color: var(--text);
    font-size: .7rem;
    font-weight: 800;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.gallery-tile-btn:hover { border-color: var(--coral); color: var(--coral); }
.gallery-tile-flag {
    position: absolute;
    bottom: .25rem;
    left: .25rem;
    background: var(--bg);
    border: 1px solid;
    border-radius: 0;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 1px 5px;
    cursor: pointer;
}
.gallery-tile-flag--nsfw { color: var(--red); border-color: var(--red); }
.gallery-tile-flag--sfw { color: var(--go); border-color: var(--go); }
.gallery-chip {
    position: absolute;
    bottom: .25rem;
    left: .25rem;
    background: var(--bg);
    border: 1px solid var(--red);
    color: var(--red);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 1px 5px;
}

/* ---- Photo viewer (lightbox) ----
   The tile trigger is a real <button> so the grid is reachable by keyboard and announced as
   something you can activate. It resets to nothing visible: the photo is the control. */
.lb-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    cursor: zoom-in;
}
.lb-trigger:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; }

/* Locked out of the design language's Don'ts: no blur behind this, no rounded corners, no glow.
   The canvas is flat and fully opaque, the same one the page already uses. Deliberately not
   translucent: a partly visible grid behind the photo is decoration, and on a surface that shows
   18+ content the photo should be the only thing on screen. */
.lb {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}
/* [hidden] is display:none, which the flex above would otherwise win against. */
.lb[hidden] { display: none; }
body.lb-open { overflow: hidden; }

.lb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border);
}
.lb-count {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-2);
}
.lb-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    min-height: 0;
}
.lb-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.lb-btn {
    flex: none;
    background: var(--bg);
    border: 1px solid #333;
    border-radius: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    width: 2.25rem;
    height: 2.25rem;
    cursor: pointer;
}
.lb-btn:hover:not(:disabled) { border-color: var(--coral); color: var(--coral); }
.lb-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
/* Kept in the layout rather than hidden at the ends, so the photo does not jump sideways
   between the first and second one. */
.lb-btn:disabled { opacity: .3; cursor: default; }
/* Over the photo rather than beside it. Sitting in the layout, the pair cost about 88px of a
   375px screen, which is the width the photo most needs and the screen most of this audience is
   holding. Touch has the swipe; these stay for pointer and keyboard. */
.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
}
.lb-prev { left: .5rem; }
.lb-next { right: .5rem; }

/* Announced, never shown: the counter above carries this visually. */
.lb-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Community hub: educator directory ---- */
.edu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.edu-card {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--green);
    padding: .85rem .9rem;
    color: inherit;
    text-decoration: none;
}
.edu-card:hover { border-color: var(--text-3); border-left-color: var(--green); }
.edu-avatar {
    width: 44px; height: 44px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--raised, #111); border: 1px solid var(--border);
    font-weight: 900; font-size: 1.1rem; text-transform: uppercase;
    object-fit: cover;
}
.edu-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.edu-name { font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; font-size: .9rem; }
.edu-handle { font-size: .72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-3); }
.edu-tagline { font-size: .78rem; color: var(--text-2); line-height: 1.35; }
.edu-topics { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.mp-divider { height: 1px; background: var(--border); margin: .5rem 0 1rem; }
.mp-safety { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }

/* ---- Profile setup tag pickers ---- */
.tag-picker { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag-pick {
    border-radius: 0;
    padding: .25rem .65rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-3);
    transition: all .1s;
}
.tag-pick--identity-sel { background: rgba(160,107,255,.14); color: #C4A0FF; border-color: rgba(160,107,255,.35); }
.tag-pick--into-sel     { background: rgba(255,77,74,.12);   color: #FF8280; border-color: rgba(255,77,74,.3);   }
.tag-pick--vibe-sel     { background: rgba(54,196,107,.1);   color: var(--green); border-color: rgba(54,196,107,.28); }
.tag-pick--edu-sel      { background: rgba(54,196,107,.14);  color: #6FDCA0; border-color: rgba(54,196,107,.35); }

/* ---- RSVP panel ---- */
.banner { background: var(--raised); border-radius: 0; height: 56px; border-top: 3px solid var(--violet); }
/* One row of four; drop to 2x2 only on the narrowest phones. */
.rsvp-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
@media (max-width: 34rem) { .rsvp-opts { grid-template-columns: 1fr 1fr; } }
.rsvp-opt {
    /* Per-state signal colour, set by the state class below (Brutalist: colour = meaning). */
    --opt: var(--text-3);
    border: 1.5px solid var(--border);
    border-left: 3px solid var(--opt);
    background: transparent;
    color: var(--text);
    border-radius: 0;
    padding: .75rem;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .1s ease, background-color .1s ease, color .1s ease;
}
.rsvp-opt.going { --opt: var(--go); }
.rsvp-opt.maybe { --opt: var(--maybe); }
.rsvp-opt.wait  { --opt: var(--wait); }
.rsvp-opt.cant  { --opt: var(--cant); }
.rsvp-opt:hover { border-color: var(--opt); }
/* Selected: fill in the state's own colour, not a single hard-coded green. */
.rsvp-opt.sel {
    border-color: var(--opt);
    color: var(--opt);
    background: color-mix(in srgb, var(--opt) 14%, transparent);
}

/* ---- Map stub ---- */
.map-stub {
    height: 7rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background: repeating-linear-gradient(0deg, #0E0E0E, #0E0E0E 29px, #141414 30px),
                repeating-linear-gradient(90deg, #0E0E0E, #0E0E0E 29px, #141414 30px);
}

/* ---- People page: Nearby | Pack segmented toggle (D040) ----
   Concept E filter language: sharp corners, white-fill active state. */
.seg-toggle { display: flex; gap: .5rem; max-width: 32rem; margin: 0 auto 1rem; }
.seg-opt {
    flex: 1;
    text-align: center;
    padding: .55rem 0;
    font-size: .8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text-3);
    text-decoration: none;
}
.seg-opt:hover { border-color: #333; color: var(--text-2); }
.seg-opt--on, .seg-opt--on:hover { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Small white-fill sort chips (Date met | A–Z) */
.seg-chip {
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text-3);
    padding: .3rem .55rem;
    text-decoration: none;
}
.seg-chip:hover { border-color: #333; color: var(--text-2); }
.seg-chip--on, .seg-chip--on:hover { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Nearby tile: solid violet border = you share >=1 packmate (D040; inset shadow so the
   tile's size never shifts) */
.ptile--mutual { box-shadow: inset 0 0 0 2px var(--violet); }

/* ---- Pack view: collected cards (D041) ---- */
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }
.pk-tile {
    position: relative;
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid #333;
    border-radius: 0;
    padding: .6rem;
    text-decoration: none;
    color: var(--text);
}
.pk-tile:hover { border-color: #333; border-left-color: #444; }
.pk-tile--mutual, .pk-tile--mutual:hover { border: 2px solid var(--violet); border-left-width: 3px; }
.pk-avatar {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--bg);
    margin-bottom: .5rem;
    background-size: cover;
    background-position: center;
}
.pk-handle {
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.pk-met {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: .15rem 0 0;
}
.pk-xn {
    position: absolute;
    top: .4rem;
    right: .4rem;
    background: var(--violet);
    color: var(--bg);
    font-size: .65rem;
    font-weight: 900;
    padding: .1rem .4rem;
}

/* ---- Pack card detail: Stamps + Trail (D041) ---- */
.pk-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--violet);
    padding: .85rem;
    margin-bottom: .75rem;
}
.pk-kicker {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0 0 .6rem;
}
.pk-stamps { display: flex; flex-wrap: wrap; gap: .55rem; }
/* Passport stamps: slight rotation is the one permitted decoration — no images (Concept E). */
.pk-stamp {
    border: 2px solid var(--violet);
    color: var(--violet);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .35rem .55rem;
    transform: rotate(-2deg);
}
.pk-stamp:nth-child(2n) { transform: rotate(1.5deg); border-color: var(--blue); color: var(--blue); }
.pk-stamp:nth-child(3n) { transform: rotate(-1deg); border-color: var(--go); color: var(--go); }
.pk-stamp small {
    display: block;
    font-size: .55rem;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: .1em;
}
.pk-trail-item { display: flex; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.pk-trail-item:last-child { border-bottom: 0; padding-bottom: 0; }
.pk-trail-dot { width: 8px; height: 8px; background: var(--violet); margin-top: .3rem; flex: 0 0 auto; }
.pk-trail-what { font-size: .78rem; font-weight: 900; text-transform: uppercase; margin: 0; }
.pk-trail-where {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: .1rem 0 0;
}

/* Release confirmation sheet — destructive, so the coral top bar (D042 symmetric release) */
.pk-sheet {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--red);
    padding: .9rem;
}

/* ---- Packmate strip (You-tab pill + member-profile "In your pack") ---- */
.pk-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--violet);
    padding: .6rem .75rem;
    text-decoration: none;
}
.pk-strip-l {
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--violet);
}
.pk-strip-r {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-3);
    text-align: right;
}

/* ---- Account page ---- */
.avatar-circle {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--text);
    flex: none;
}
.account-section { margin-bottom: 1.5rem; }
.account-section-title {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0 0 .4rem;
}
.account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: .85rem 1rem;
    color: var(--text);
    margin-bottom: .3rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.account-row:hover { background: #161616; border-color: #333; }
.account-row--disabled { opacity: .45; pointer-events: none; }
.account-row--danger { color: var(--coral); }
.account-row--danger:hover { background: rgba(255,77,74,.07); }
.chevron { color: var(--text-3); font-size: 1rem; }

/* ---- Nav account pill ---- */
.account-btn { display: flex; align-items: center; gap: .5rem; }
/* Photo variant of the chip: same 1.5rem square as the initial block, so swapping between a
   member with a picture and one without never shifts the nav bar. */
/* Attendee faces: the photo variant matches the initial block's box exactly, so a strip of
   mixed members stays on one baseline. The link wrapper carries no styling of its own. */
.av-link { display: inline-flex; text-decoration: none; }
.av--photo { object-fit: cover; padding: 0; }

.avatar-chip--photo {
    object-fit: cover;
    padding: 0;
}

.avatar-chip {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--text);
    flex: none;
}

/* ---- Ingestion review ---- */
.source-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: .1rem .5rem;
    border-radius: 0;
}
.source-badge--puppycalendar { background: rgba(54,196,107,.1);  color: var(--green); border: 1px solid rgba(54,196,107,.25); }
.source-badge--brighton      { background: rgba(77,139,255,.1);  color: var(--blue);  border: 1px solid rgba(77,139,255,.22); }

/* A defect in the source data that only a person can settle, so it is marked and not acted on. */
.review-warning {
    display: inline-block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: .1rem .5rem;
    border-radius: 0;
    background: rgba(255,210,63,.1);
    color: var(--yellow);
    border: 1px solid rgba(255,210,63,.28);
    cursor: help;
}

/* Carries another source's name, so it is far longer than the other two warnings and is the one
   thing on the meta row that can push the venue onto a second line. Tighter tracking and it never
   breaks mid-name, so it either sits inline or wraps whole. */
.review-warning--duplicate {
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ---- Landing / home ---- */
.landing-hero { padding: 4.5rem 1rem 3rem; text-align: center; }
.landing-brand-mark {
    width: 4rem;
    height: 4rem;
    border-radius: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-top: 3px solid var(--coral);
    margin: 0 auto 2rem;
}
.landing-headline {
    font-size: clamp(3rem, 10vw, 5.5rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    margin: 0 0 .75rem;
    line-height: 0.95;
    color: var(--text);
}
.landing-lead {
    font-size: 1rem;
    color: var(--text-2);
    max-width: 30rem;
    margin: 0 auto 2rem;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.landing-ctas { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.landing-cta { padding: .75rem 1.75rem; font-size: .8rem; }
.landing-features {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 36rem;
    margin: 0 auto;
}
.landing-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 0;
    padding: 1rem 1.25rem;
}
.landing-feature:nth-child(1) { border-left-color: var(--violet); }
.landing-feature:nth-child(2) { border-left-color: var(--orange); }
.landing-feature:nth-child(3) { border-left-color: var(--green); }
.landing-feature-icon { font-size: 1.4rem; flex: none; }
.landing-feature-title {
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-size: .9rem;
    margin-bottom: .25rem;
}
.landing-feature-body { font-size: .85rem; color: var(--text-2); line-height: 1.5; }

/* ---- Chrome-less entry screen (anonymous landing on `/`) ---- */
.landing-screen {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem 1.5rem;
}
.landing-screen-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 22rem;
}
.landing-logo {
    width: min(22rem, 82vw);
    height: auto;
    display: block;
    margin-bottom: 1.1rem;
}
.landing-tagline {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0 0 2.75rem;
}
.landing-actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: 100%;
    max-width: 20rem;
}
.landing-action { width: 100%; padding: .85rem 1.1rem; font-size: .82rem; }
.landing-legal {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    padding-top: 2rem;
}
.landing-rainbow {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--rainbow);
}

/* ---- Confirm email banner ---- */
.confirm-email-banner,
[class*="confirm"] {
    border-left: 3px solid var(--yellow);
    background: var(--surface);
    border-top: none;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: .6rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* ---- Framework error toast ---- */
/* Global (not layout-scoped) so it's hidden by default under EVERY layout — MainLayout AND
   the chrome-less LandingLayout. blazor.web.js flips it to display:block inline on an
   unhandled circuit error. Previously this lived in MainLayout.razor.css (scoped), so it
   showed permanently on any page using a different layout. */
#blazor-error-ui {
    color-scheme: dark;
    background: #1A0808;
    border-top: 2px solid #FF4D4A;
    color: #FF8A9C;
    bottom: 0;
    box-shadow: none;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ---- Error states ---- */
.blazor-error-boundary {
    background: #1A0808;
    border-left: 3px solid var(--coral);
    padding: 1rem 1rem 1rem 1.25rem;
    color: #FF8A9C;
    border-radius: 0;
    font-size: .85rem;
    font-weight: 700;
}
.blazor-error-boundary::after { content: "An unhandled error has occurred." }

/* ---- Form validation ---- */
.valid.modified:not([type=checkbox]) { outline: 2px solid var(--green); outline-offset: -1px; }
.invalid { outline: 2px solid var(--coral); outline-offset: -1px; }
.validation-message { color: var(--coral); font-size: .78rem; font-weight: 700; letter-spacing: 0.04em; margin-top: .3rem; }

/* ---- Error inline box (register page) ---- */
div[style*="#241620"] {
    background: #1A0808 !important;
    border: 1px solid rgba(255,77,74,.35) !important;
    border-left: 3px solid var(--coral) !important;
    border-radius: 0 !important;
    color: #FF8A9C;
    font-size: .8rem;
    font-weight: 700;
    padding: .75rem 1rem;
}

/* ---- Grid page: legend dots ---- */
span[style*="border-radius:50%"] {
    border-radius: 0 !important;
    width: 6px !important;
    height: 6px !important;
}

/* ---- Map container ---- */
div[style*="border-radius:12px"][style*="height:480px"] {
    border-radius: 0 !important;
    border: 1px solid var(--border) !important;
}

/* ==================== Festivals (D049-D055) ==================== */

/* Umbrella row: the one card that carries the full rainbow stripe (6px, vertical, hard stops).
   Ordinary event cards keep a single 4px category stripe; every category at once = the rainbow. */
.fest-row {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border-hi, #333);
    margin-bottom: 0;
}
.fest-row .stripe { width: 6px; flex: none; background: var(--rainbow-v); }
.fest-row .body {
    padding: 1.1rem 1.25rem;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.fest-row .kick {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-3);
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
    align-items: center;
}
.fest-row .name {
    font-weight: 900;
    font-size: 1.7rem;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--text);
}
.fest-row .stats { display: flex; gap: 1.35rem; flex-wrap: wrap; padding-top: .15rem; }
.fest-row .stat .v {
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.fest-row .stat .k {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-top: .25rem;
}
.fest-row .act {
    padding: 1.1rem 1.25rem;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    justify-content: center;
    align-items: stretch;
}
@media (max-width: 640px) {
    .fest-row { flex-wrap: wrap; }
    .fest-row .act { flex-direction: row; width: 100%; padding-top: 0; }
}

/* FESTIVAL tag: rainbow border, written word inside */
.fest-tag {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text);
    border: 1.5px solid;
    border-image: var(--rainbow) 1;
    padding: .15rem .5rem;
}

/* Festivals filter chip: rainbow border variant of .chip */
.chip--fest { border-image: var(--rainbow) 1; border-color: transparent; color: var(--text); }
.chip--fest.chip--active { background: var(--text); color: var(--bg); border-image: none; border-color: var(--text); }

/* Collapsed members row under the umbrella */
.fest-collapse {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 0;
    margin-bottom: .6rem;
    padding: .6rem 1.25rem .6rem 1.4rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    text-align: left;
}
.fest-collapse .t {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-2);
}
.fest-collapse .chev { color: var(--text-3); margin-left: auto; font-size: .8rem; }

/* Affiliation is a written word, never a colour fill (D051) */
.aff {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.aff--official { color: var(--text); }
.aff--fringe { color: var(--text-3); }
.aff--unconfirmed { color: var(--yellow); }

/* "Not on the official programme" divider */
.fest-divider { display: flex; align-items: center; gap: .75rem; padding: .75rem 0 .5rem; }
.fest-divider .lbl {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--yellow);
}
.fest-divider .ln { height: 1px; background: var(--border); flex: 1; }

/* Who's-going strip */
.going-strip {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1rem;
}
.going-strip .avatars { display: flex; flex-wrap: wrap; }
.going-strip .av {
    width: 38px;
    height: 38px;
    background: var(--raised, #161616);
    border: 1px solid var(--border-hi, #333);
    margin-right: -1px;
    margin-bottom: -1px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: .78rem;
    letter-spacing: -0.02em;
    color: var(--text-2);
    flex: none;
}
.going-strip .av--pack { border-color: var(--violet); color: var(--text); position: relative; z-index: 1; }
.going-strip .av--more { color: var(--text-3); font-size: .66rem; letter-spacing: 0; }

/* Programme day tabs */
.fest-days { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; margin-bottom: .75rem; }
.fest-days a {
    padding: .6rem 1rem;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    text-decoration: none;
}
.fest-days a.on { color: var(--text); border-bottom-color: var(--coral); }

/* Consent sheet (D053): coral top border, inline, radios square */
.consent-sheet {
    background: var(--surface);
    border: 1px solid var(--border-hi, #333);
    border-top: 3px solid var(--coral);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: .75rem 0;
}
.consent-sheet h4 {
    margin: 0;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.consent-sheet .ask { font-size: .78rem; color: var(--text-2); line-height: 1.45; margin: 0; }
.consent-opt {
    border: 1.5px solid var(--border-hi, #333);
    padding: .7rem .75rem;
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    cursor: pointer;
    background: transparent;
    width: 100%;
    font-family: inherit;
    text-align: left;
    color: var(--text);
}
.consent-opt.on { border-color: var(--coral); }
.consent-opt .radio {
    width: 13px;
    height: 13px;
    border: 2px solid var(--text-3);
    flex: none;
    margin-top: 2px;
}
.consent-opt.on .radio { border-color: var(--coral); background: var(--coral); }
.consent-opt .ot {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.consent-opt .od { font-size: .74rem; color: var(--text-2); margin-top: .2rem; line-height: 1.4; }
.consent-sheet .fineprint { font-size: .68rem; color: var(--text-2); line-height: 1.4; margin: 0; }

/* ============================================================
   Site chrome facelift (locked 2026-07-22, P1-P4 + P6)
   ============================================================ */

/* ---- Desktop nav links group (hidden on mobile; tab bar takes over) ---- */
.nav-links { display: flex; align-items: center; gap: .1rem; }

/* ---- Header alerts: the Bork bubble ---- */
.alerts-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .45rem .55rem;
    color: var(--text-2);
}
.alerts-link:hover { color: var(--text); background: var(--surface); }
.alerts-badge {
    position: absolute;
    top: .05rem;
    right: -.1rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--coral);
    color: #000;
    font-size: .62rem;
    font-weight: 900;
    line-height: 1;
}

/* ---- Account menu (details/summary, SSR-safe) ---- */
details.account-menu { position: relative; }
details.account-menu > summary { list-style: none; cursor: pointer; }
details.account-menu > summary::-webkit-details-marker { display: none; }
details.account-menu[open] > summary { background: var(--surface); }
.account-caret { font-size: .6rem; color: var(--text-3); }
.account-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    min-width: 11rem;
    background: var(--bg);
    border: 1.5px solid var(--text);
    z-index: 30;
    display: flex;
    flex-direction: column;
}
.account-menu-panel a {
    padding: .6rem .8rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-2);
    border-top: 1px solid var(--border);
}
.account-menu-panel a:first-child { border-top: 0; }
.account-menu-panel a:hover { background: var(--surface); color: var(--text); }
.account-menu-panel a.danger { color: var(--coral); }

/* ---- Create event page action (Events page header) ---- */
.btn-create-event { white-space: nowrap; }

/* ---- Mobile tab bar (app parity, D039) — desktop: off ---- */
.mobile-tabbar { display: none; }

/* ---- Partner strip (desktop-only ad surface; colour-quiet, no Pride, no coral) ---- */
.partner-strip {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: .5rem 1.5rem;
}
.partner-kicker {
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-3);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    border-right: 1px solid var(--border);
    padding-right: .35rem;
}
.partner-brand {
    font-weight: 900;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}
.partner-tag { font-size: .72rem; color: var(--text-3); }
.partner-spacer { flex: 1; }
.partner-cta {
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .3rem .55rem;
    border: 1.5px solid var(--text);
    color: var(--text);
    white-space: nowrap;
}
.partner-cta:hover { background: var(--text); color: var(--bg); }
.partner-cta--sub { border-color: var(--border); color: var(--text-3); font-weight: 800; }
.partner-cta--sub:hover { background: var(--surface); color: var(--text-2); }

/* ---- In-feed sponsored card: event-card anatomy, chrome-grey border, labelled ---- */
.sponsored-card {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-3);
    padding: .65rem .85rem;
    margin: 0 0 .6rem;
}
.sponsored-kicker {
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-3);
}
.sponsored-title {
    font-weight: 900;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--text);
}
.sponsored-tag { font-size: .72rem; color: var(--text-3); }
.sponsored-ctas { display: flex; gap: .4rem; margin-top: .45rem; flex-wrap: wrap; }

/* ---- Mobile breakpoint: the tab bar takes over primary nav ---- */
@media (max-width: 640px) {
    .nav-links,
    .site-header .alerts-link { display: none; }

    /* Fixed bottom bar; content and footer get clearance below. */
    .mobile-tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background: #080808;
        border-top: 2px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 20;
    }
    .mtab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .25rem;
        padding: .5rem 0 .6rem;
        position: relative;
        color: var(--text-3);
        font-size: .55rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
    }
    .mtab:hover { color: var(--text-2); }
    .mtab--on { color: var(--coral); }
    .mtab--on::before {
        content: "";
        position: absolute;
        top: -2px;
        left: 20%;
        right: 20%;
        height: 2px;
        background: var(--coral);
    }
    .mtab-badge {
        position: absolute;
        top: .25rem;
        right: calc(50% - 1.45rem);
        min-width: .95rem;
        height: .95rem;
        padding: 0 .15rem;
        background: var(--coral);
        color: #000;
        font-size: .58rem;
        font-weight: 900;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    main.container { padding-bottom: 4.75rem; }
    .footer { margin-bottom: 4.75rem; }

    /* In-feed card is the only mobile ad surface (tab bar owns the bottom edge). */
    .partner-strip { display: none; }

    .btn-create-event { width: 100%; justify-content: center; }
}

/* The wordmark never breaks mid-word, whatever the header squeeze. */
.brand, .brand-word { white-space: nowrap; }
.brand { flex-shrink: 0; }

@media (max-width: 640px) {
    /* Mobile top bar: brand + auth only; the beta pill is decoration and yields the space. */
    .beta-pill { display: none; }
    .nav { gap: .4rem; }
}

/* Buttons that live inside the nav keep their button colours (.nav a otherwise wins the cascade). */
.nav a.btn-primary { color: var(--bg); }
.nav a.btn-primary:hover { color: var(--bg); background: var(--coral); }
.nav a.btn-ghost { color: var(--text-2); }

@media (max-width: 640px) {
    /* Tighter header so brand + Log in + Register share one row at 375px. */
    .header-inner { padding: .6rem .9rem; }
    .nav .btn { padding: .45rem .7rem; font-size: .7rem; }
}

/* ============================================================
   Page-header template + content pages (footer links session, 2026-07-22)
   ============================================================ */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
    margin: 1.1rem 0 1rem;
}
.page-kicker {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-3);
}
.page-title { margin: .15rem 0 0; font-size: 1.7rem; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---- Static content pages (About / Conduct / Safety / Contact) ---- */
.content-page { max-width: 44rem; }
.content-page section { margin: 1.6rem 0; }
.content-page section > h2 {
    font-size: .92rem;
    letter-spacing: .04em;
    border-bottom: 2px solid var(--border);
    padding-bottom: .35rem;
    margin: 0 0 .6rem;
}
.content-page p { color: var(--text-2); font-size: .92rem; line-height: 1.55; margin: .5rem 0; }
.content-page p strong { color: var(--text); }
.content-page ul { margin: .5rem 0; padding-left: 1.1rem; color: var(--text-2); font-size: .92rem; line-height: 1.55; }
.content-page li { margin: .3rem 0; }
.content-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--coral);
    padding: .85rem 1.05rem;
    margin: .8rem 0;
}
.content-card.blue { border-left-color: var(--blue); }
.content-card.green { border-left-color: var(--green); }
.content-card p { margin: .25rem 0; }
.draft-pill {
    display: inline-block;
    border: 1.5px solid var(--yellow);
    color: var(--yellow);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .15rem .5rem;
    margin-left: .6rem;
    vertical-align: middle;
}

/* ============================================================
   FAQ disclosure (invite-only content, 2026-07-26)
   First accordion on the site. Assembled from parts already here — surface fill,
   hairline border, zero radius, coral as the only accent — rather than a new visual
   idiom. Native <details>/<summary> so it works under static SSR with no JS, which
   matters because the door is the one page anonymous visitors reliably reach.
   ============================================================ */
.faq {
    background: var(--surface);
    border: 1px solid var(--border);
    margin: .55rem 0;
}
.faq > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .7rem .85rem;
    font-weight: 800;
    font-size: .88rem;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}
/* Suppress the UA disclosure triangle in both engines; the ::after mark replaces it. */
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::marker { content: ""; }
.faq > summary::after {
    content: "+";
    color: var(--coral);
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1;
}
.faq[open] > summary::after { content: "\2212"; }
.faq > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.faq-body {
    padding: .7rem .85rem .85rem;
    border-top: 1px solid var(--border);
}
.faq-body p {
    color: var(--text-2);
    font-size: .88rem;
    line-height: 1.55;
    margin: .5rem 0;
}
.faq-body p:first-child { margin-top: 0; }
.faq-body p:last-child { margin-bottom: 0; }

/* Quiet route off the chrome-less landing screen. Deliberately not the blue link
   colour: the entry screen's restraint is doing work, and this must not compete
   with the two CTAs above it. */
.landing-why {
    font-size: .75rem;
    color: var(--text-2);
    text-decoration: underline;
    text-underline-offset: .25em;
    margin-top: 1.25rem;
}

/* ---- D105: the profile link a scene name is about to become ----
   Green rule, not coral: this is a disclosure, not a warning. Monospace on the address itself
   because it is a thing you will type and read back, not body copy. */
.handle-preview {
    background: #0A0A0A;
    border: 1px solid var(--border);
    border-left: 3px solid var(--green);
    padding: .55rem .7rem;
    margin: 0 0 1rem;
    font-size: .74rem;
    color: var(--text-3);
    line-height: 1.4;
}

.handle-preview-url {
    display: block;
    margin-top: .15rem;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-all;
}

/* ============================================================
   D097 / D098: onboarding, three screens
   ============================================================ */

.ob {
    max-width: 30rem;
    margin: 1.5rem auto;
    background: var(--surface);
    border: 1px solid var(--border);
}

/* Progress is the pride rule filling left to right across the three steps. Unfilled segments
   stay near-background so the bar reads as one object rather than three empty boxes. */
.ob-rule { display: grid; grid-template-columns: repeat(3, 1fr); height: 4px; }
.ob-rule i { display: block; background: #181818; }
.ob-rule i.on:nth-child(1) { background: linear-gradient(90deg, var(--red), var(--orange)); }
.ob-rule i.on:nth-child(2) { background: linear-gradient(90deg, var(--yellow), var(--green)); }
.ob-rule i.on:nth-child(3) { background: linear-gradient(90deg, var(--blue), var(--violet)); }

.ob-body { padding: 1.35rem 1.25rem 1.5rem; }

.ob-kicker {
    font-size: .6rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .18em; color: var(--text-3); margin: 0;
}

.ob-h {
    font-size: 1.5rem; font-weight: 900; letter-spacing: -.035em;
    text-transform: uppercase; line-height: 1.02; margin: .45rem 0 .5rem;
}

.ob-lede { font-size: .88rem; color: var(--text-2); margin: 0 0 1.25rem; line-height: 1.5; }

.ob-cap { font-size: .74rem; color: var(--text-3); margin: 0 0 1.25rem; line-height: 1.45; }
.ob-cap b { color: var(--text-2); font-weight: 700; }

.ob-cta { width: 100%; }

/* Deliberately not a button. It used to be full-width with the same weight as the primary
   action, which read as an equally good idea. */
.ob-skip {
    display: block; width: 100%; text-align: center;
    background: none; border: 0; padding: .7rem 0 0;
    font-size: .78rem; color: var(--text-3);
    text-decoration: underline; cursor: pointer;
}
.ob-skip--btn:disabled { opacity: .5; cursor: default; }

.ob-errors {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--coral); padding: .7rem .9rem; margin-bottom: 1rem;
    font-size: .8rem; font-weight: 700; color: #FF8A9C;
}

.ob-error-line { color: #FF8A9C; font-size: .75rem; margin: -.4rem 0 1rem; }

.ob-uploading { color: var(--text-2); font-size: .75rem; margin: -.4rem 0 1rem; }

.ob-drop {
    border: 1px dashed var(--border); padding: 1.4rem 1rem; margin-bottom: 1rem;
    text-align: center; display: flex; flex-direction: column;
    align-items: center; gap: .7rem;
}

.ob-drop-preview { width: 84px; height: 84px; object-fit: cover; }

/* ---- the reward landing ---- */
.ob-me { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }

.ob-me-av { width: 52px; height: 52px; object-fit: cover; flex: 0 0 auto; }

.ob-me-av--empty {
    background: #0A0A0A; border: 1px solid var(--border);
    display: grid; place-items: center;
    font-weight: 900; color: var(--text-3);
}

.ob-me-name {
    font-weight: 900; letter-spacing: -.02em; text-transform: uppercase;
    font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ob-me-sub { font-size: .75rem; color: var(--text-3); }
.ob-me-tag { font-size: .85rem; color: var(--text-2); margin: 0 0 1rem; }

/* A custom tag carries no colour on purpose: it reads as uncategorised next to the violet
   identity tags and coral into tags, until it is adopted into the vocabulary and gains one. */
.tag-pick--custom-sel { background: transparent; color: var(--text-2); border-color: var(--border); }
.tag-pick--add { border-style: dashed; color: var(--text-2); }

/* ============================================================
   D100: the profile nudge bar, one per app rather than one per page
   ============================================================ */

.nudge {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem 1rem;
    background: var(--raised);
    border-bottom: 1px solid var(--border);
    font-size: .82rem; color: var(--text-2); line-height: 1.35;
}

/* The rung is carried by the left rule. Violet reads as information, coral as something wanting
   attention, and the last rung darkens the ground under it so it stops blending into the page. */
.nudge--gentle     { border-left: 3px solid var(--violet); }
.nudge--firm       { border-left: 3px solid var(--coral); }
.nudge--persistent { border-left: 3px solid var(--coral); background: #1A0E0E; }

.nudge-text { flex: 1; min-width: 0; }

.nudge-action {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: var(--coral); white-space: nowrap;
}

.nudge-dismiss {
    background: none; border: 0; padding: 0 0 0 .2rem; cursor: pointer;
    font-size: 1rem; line-height: 1; color: var(--text-3);
}

@media (max-width: 480px) {
    .nudge { padding: .55rem .8rem; font-size: .78rem; gap: .5rem; }
}

/* ============================================================
   D101: intent interception. Sits under the page content it interrupts rather than over it,
   because it is a nudge and not a modal: the action underneath still works.
   ============================================================ */

.intercept-scrim { padding: 1rem; max-width: 32rem; margin: 0 auto; }

.intercept-sheet {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--coral);
    padding: 1.1rem 1rem;
}

.intercept-body { font-size: .88rem; color: var(--text-2); line-height: 1.5; margin: 0 0 1rem; }

.intercept-cta { width: 100%; }

.intercept-dismiss {
    display: block; width: 100%; text-align: center;
    background: none; border: 0; padding: .7rem 0 0;
    font-size: .78rem; color: var(--text-3);
    text-decoration: underline; cursor: pointer;
}

/* ---- D100: the last rung's card on the You tab ---- */
.ladder-card {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--coral);
    padding: .9rem 1rem; margin-bottom: 1.25rem;
}

.ladder-card-title { font-weight: 700; font-size: .9rem; margin: 0 0 .25rem; }
.ladder-card-body { font-size: .8rem; color: var(--text-2); margin: 0 0 .8rem; line-height: 1.45; }

/* Refresh control (option C). Says what it does and how old what you are looking at is.
   Renders as a button where there is a circuit and an anchor where there is not (Pack), so both
   element types are styled the same and neither inherits link or button chrome. */
.refresh-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    background: var(--surface);
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: .65rem .9rem;
    margin: 0 0 1rem;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.refresh-bar:hover { background: var(--raised); }

.refresh-bar:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: -2px;
}

.refresh-bar[disabled] { cursor: default; }

.refresh-bar-action {
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--coral);
}

.refresh-bar[disabled] .refresh-bar-action { color: var(--text-3); }

/* Tabular figures so the clock does not shuffle sideways as the minutes change. */
.refresh-bar-age {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}