/* ============================================================
   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;
    --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;

    /* 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; }

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); }

/* ---- Surfaces ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 1.25rem;
}
.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); }

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); }
/* 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); }
.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); }
.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; }
.mp-hero-photo {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    scroll-snap-align: start;
    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;
}

/* ---- 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; }
.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); }

/* ---- 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;
}