/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNT AREA — shared form furniture
   styles-x-account.css

   Linked by the account-*.php pages. Everything here was previously repeated
   inside a <style> block on each of those pages: .form-alert existed four
   times over with small differences between the copies. One definition now.

   Page-specific layout still lives with its page; this file holds only what
   more than one account page uses, or what a page's own JS depends on.
   ═══════════════════════════════════════════════════════════════════════════ */
 body { overflow-x: clip; }

/* ── COVER ── */
.acct-cover {
    position: relative; min-height: 36vh;
    display: flex; flex-direction: column; justify-content: flex-end;
    overflow: hidden;
}
.acct-cover__bg {
    position: absolute; inset: -15%;
    background-size: cover; background-position: center 40%; background-repeat: no-repeat;
    transform: scale(1.06); transition: transform 10s ease-out; will-change: transform;
}
.acct-cover__bg.ready { transform: scale(1); }
.acct-cover__veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(14,16,15,.45) 0%, rgba(14,16,15,0) 30%, rgba(14,16,15,0) 45%, rgba(14,16,15,.88) 75%, rgba(14,16,15,1) 100%),
        linear-gradient(to right,  rgba(14,16,15,.4)  0%, transparent 65%);
}
.acct-cover__content { position: relative; z-index: 2; padding: 0 0 2rem; }
.acct-cover__eyebrow {
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--emerald-lt); margin-bottom: .85rem;
    display: flex; align-items: center; gap: .75rem;
}
.acct-cover__eyebrow::before { content: ''; display: inline-block; width: 20px; height: 1px; background: var(--emerald-lt); }
.acct-cover__title {
    font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 900; line-height: .95; letter-spacing: -.03em; color: var(--ink); margin: 0;
}
.acct-cover__title em { font-style: italic; color: var(--emerald-lt); }

/* ── PROFILE HEADER ── */
.acct-header { padding: 2rem 0 0; }
.acct-header__inner {
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0 0 1.5rem; border-bottom: 1px solid var(--rule);
}
@media(max-width:767px) { .acct-header__inner { flex-direction: column; align-items: flex-start; gap: 1rem; } }

.acct-avatar {
    width: 100px; height: 100px; border-radius: var(--radius-lg);
    background: var(--bg-3); border: 3px solid var(--bg-2); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-avatar__initials {
    font-family: var(--font-display); font-size: 2rem; font-weight: 800;
    background: var(--emerald-dim); width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; color: var(--emerald-lt);
}
.acct-member-info { flex: 1; min-width: 0; }
.acct-name {
    font-family: var(--font-display); font-size: 1.6rem; font-weight: 800;
    color: var(--ink); line-height: 1.1; margin-bottom: .3rem; letter-spacing: -.02em;
}
.acct-meta-row {
    display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; color: var(--ink-3);
}
.acct-meta-row span { display: flex; align-items: center; gap: .3rem; }
.acct-level {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .2rem .65rem; border-radius: 100px;
    border: 1px solid var(--emerald-rule); color: var(--emerald-lt); background: var(--emerald-dim);
}
.acct-header-actions { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }
@media(max-width:767px) { .acct-header-actions { margin-top: .25rem; } }

/* ── STATS BAR ── */
.acct-stats {
    display: flex; background: var(--bg-card);
    border-radius: var(--radius-lg); overflow: hidden; margin: 1.5rem 0;
}
.acct-stat { flex: 1; padding: 1rem 1.25rem; border-right: 1px solid var(--rule); text-align: center; transition: background .2s; }
.acct-stat:hover { background: var(--bg-2); }
.acct-stat:last-child { border-right: none; }
.acct-stat__val { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--emerald-lt); line-height: 1; margin-bottom: .25rem; }
.acct-stat__label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
/* Trailing link in the strip — the public profile puts "View on iNaturalist"
   at the far end of the same row. */
.acct-stats__aside { display: flex; align-items: center; margin-left: auto; padding: 1rem 1.25rem; }
.acct-stats__aside a {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--emerald-lt); text-decoration: none;
}
.acct-stats__aside a:hover { color: var(--emerald); }

@media(max-width:575px) { .acct-stats { flex-wrap: wrap; } .acct-stat { flex: 1 1 50%; border-bottom: 1px solid var(--rule); } }

/* ── BODY ── */
.acct-body { padding: 0 0 5rem; }

/* Sidebar */
.sidebar-widget { background: var(--bg-card); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.25rem; }
.sidebar-widget__title { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--emerald-lt); margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.sidebar-widget__title::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.acct-nav-link { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: .82rem; color: var(--ink-2); transition: color .15s; }
.acct-nav-link:last-child { border-bottom: none; padding-bottom: 0; }
.acct-nav-link:hover { color: var(--emerald-lt); }
.acct-nav-link i { width: 14px; text-align: center; color: var(--ink-4); flex-shrink: 0; }
.acct-info-label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); display: block; margin-bottom: .1rem; }
.acct-info-item { font-size: .78rem; color: var(--ink-3); line-height: 1.6; margin-bottom: .65rem; }
.acct-info-item:last-child { margin-bottom: 0; }

/* Quick actions */
.acct-actions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; margin-bottom: 1.5rem; }
@media(max-width:575px) { .acct-actions-grid { grid-template-columns: 1fr; } }
.acct-action {
    display: flex; align-items: center; gap: 1rem; padding: 1.1rem;
    background: var(--bg-card);
    border-radius: var(--radius-lg); text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.acct-action:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.acct-action__icon { width: 40px; height: 40px; border-radius: var(--radius); background: var(--emerald-dim); display: flex; align-items: center; justify-content: center; color: var(--emerald-lt); font-size: .95rem; flex-shrink: 0; }
.acct-action__title { font-family: var(--font-display); font-size: .85rem; font-weight: 700; color: var(--ink); margin-bottom: .1rem; transition: color .2s; }
.acct-action:hover .acct-action__title { color: var(--emerald-lt); }
.acct-action__sub { font-size: .72rem; color: var(--ink-4); }

/* Suggestions */
.suggestion-row { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.suggestion-row:last-child { border-bottom: none; }
.suggestion-type { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 100px; background: var(--bg); color: var(--ink-4); flex-shrink: 0; white-space: nowrap; }
.suggestion-title { font-size: .83rem; color: var(--ink-2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggestion-status { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; flex-shrink: 0; }
.suggestion-status--pending  { color: #c8a032; }
.suggestion-status--approved { color: var(--emerald-lt); }
.suggestion-status--rejected { color: #c87a7a; }

/* Ruled divider */
.ruled { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-4); display: flex; align-items: center; gap: 1rem; white-space: nowrap; margin-bottom: 1.5rem; }
.ruled::before,.ruled::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg,transparent,var(--emerald),transparent); opacity: .35; }

/* Empty state */
.acct-empty { text-align: center; padding: 3.5rem 2rem; background: var(--bg-card); border-radius: var(--radius-lg); }
.acct-empty__icon { font-size: 2.25rem; color: var(--ink-4); margin-bottom: .85rem; display: block; }
.acct-empty__title { font-size: 1rem; font-weight: 700; color: var(--ink-2); margin-bottom: .4rem; }
.acct-empty__text { font-size: .8rem; color: var(--ink-3); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Form alerts ────────────────────────────────────────────────────────────
   The success / failure panel at the top of an account form. The --danger
   tokens are declared in styles-base.css for both themes. */
.form-alert {
    display: flex; align-items: flex-start; gap: .9rem;
    border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.16);
    scroll-margin-top: 6rem;      /* clears the fixed nav when scrolled to */
}
.form-alert:focus { outline: none; }

.form-alert__icon {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: .82rem;
}
.form-alert__text { font-size: .82rem; color: var(--ink-2); line-height: 1.6; }
.form-alert__text strong { display: block; margin-bottom: .15rem; font-size: .88rem; }

.form-alert--error { background: var(--danger-dim); border-left: 4px solid var(--danger); }
.form-alert--error .form-alert__icon { background: var(--danger-dim); color: var(--danger); }
.form-alert--error .form-alert__text strong { color: var(--danger-ink); }

.form-alert--success { background: var(--emerald-dim); border-left: 4px solid var(--emerald); }
.form-alert--success .form-alert__icon { background: var(--emerald-dim); color: var(--emerald-lt); }
.form-alert--success .form-alert__text strong { color: var(--emerald-lt); }

/* Jumps to the field the message is about. */
.form-alert__jump {
    display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem;
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--danger-ink); background: none; border: 0; padding: 0; cursor: pointer;
    border-bottom: 1px solid var(--danger-rule);
}
.form-alert__jump:hover { color: var(--danger); border-bottom-color: var(--danger); }


/* ══════════════════════════════════════════════════════════════
   SHARED FORM FURNITURE
   Lifted verbatim out of the account pages' own <style> blocks, where
   each of these existed identically in three or four files. One copy.
   ══════════════════════════════════════════════════════════════ */
.ot-alert { padding:.85rem 1rem; border-radius:var(--radius); font-size:.82rem; margin-bottom:1.5rem; }
.ot-alert.is-success { background:var(--emerald-dim); border:1px solid var(--emerald-rule); color:var(--emerald-lt); }
.ot-alert.is-error { background:var(--red-dim); border:1px solid var(--red-rule); color:var(--red); }
.form-card__title { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--emerald-lt); display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.form-card__title::before { content: ''; flex: none; width: 16px; height: 1px; background: var(--emerald-lt); }
.field-group { margin-bottom: 1.1rem; }
.field-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); display: flex; align-items: center; gap: .4rem; margin-bottom: .45rem; flex-wrap: wrap; }
.field-required { color: var(--emerald-lt); font-size: .55rem; }
.field-note { color: var(--ink-4); font-size: .6rem; font-style: italic; letter-spacing: .04em; text-transform: none; }
.field-input, .field-textarea {
    width: 100%; background: var(--bg);
    border: 0; border-radius: var(--radius); padding: .75rem 1rem; color: var(--ink);
    font-size: .88rem; font-family: var(--font-body); outline: none;
    transition: background .2s, box-shadow .2s; }
/* No border, so var(--bg) against the card is what makes the field read as a
   well, and focus is a solid ring rather than a border colour. */
.field-input:focus, .field-textarea:focus { background: var(--bg-2); box-shadow: 0 0 0 2px var(--emerald); }
.field-input::placeholder, .field-textarea::placeholder { color: var(--ink-4); }
.field-input.field-select, select.field-input {
    width: 100%; min-height: 48px;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-color: var(--bg) !important; color: var(--ink) !important;
    border: 0 !important; border-radius: var(--radius);
    padding: .75rem 2.5rem .75rem 1rem; outline: none; box-shadow: none !important; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a9e3a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .85rem center; background-size: 12px 8px; }
.field-input.field-select:focus, select.field-input:focus { background-color: var(--bg-3) !important; box-shadow: 0 0 0 2px var(--emerald) !important; }
select::-ms-expand { display: none; }
.btn-submit { background: var(--emerald); border: none; border-radius: var(--radius); color: #0e100f; font-family: var(--font-display); font-size: .92rem; font-weight: 700; padding: .875rem 2rem; cursor: pointer; display: inline-flex; align-items: center; gap: .65rem; transition: background .2s, transform .15s; }
.btn-submit:hover { background: var(--emerald-lt); transform: translateY(-1px); }
.field-hint { font-size: .72rem; color: var(--ink-4); margin-top: .35rem; line-height: 1.5; }
.field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.acct-cover__sub { font-size: .88rem; color: var(--ink-3); line-height: 1.7; max-width: 560px; margin-top: .6rem; }
.suggest-body { padding: 2rem 0 5rem; }
.field-input.field-select:hover, select.field-input:hover {
    background-color: var(--bg-3) !important; }
.field-input.field-select option, select.field-input option {
    background-color: var(--bg-card);
    color: var(--ink); }
.field-input.field-select optgroup, select.field-input optgroup {
    background-color: var(--bg-card);
    color: var(--ink); }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.form-notice {
    display: flex; align-items: flex-start; gap: .85rem;
    background: rgba(90,158,58,.06); border: 1px solid var(--emerald-rule);
    border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 2rem;
    font-size: .8rem; color: var(--ink-3); line-height: 1.65; }
.form-notice strong { color: var(--emerald-lt); display: block; margin-bottom: .15rem; }


/* ── Field-level validation ─────────────────────────────────────────────────
   The handler names the field that failed, so the message can sit where the
   fix has to be made rather than only at the top of a long form. */
.field-group, .origin-grid { scroll-margin-top: 6rem; }

.field-group.has-error .field-input,
.field-group.has-error .field-textarea {
    background: var(--danger-dim); box-shadow: 0 0 0 2px var(--danger);
}
.field-group.has-error .field-input:focus,
.field-group.has-error .field-textarea:focus {
    background: var(--danger-dim); box-shadow: 0 0 0 2px var(--danger), 0 0 0 5px var(--danger-dim);
}
.field-group.has-error .field-label { color: var(--danger-ink); }

/* Radios have no .field-group wrapper of their own, so the grid is the target. */
.origin-grid.has-error {
    border-left: 3px solid var(--danger);
    background: var(--danger-dim); border-radius: var(--radius); padding: .75rem;
}

.field-error {
    display: flex; align-items: flex-start; gap: .4rem; margin-top: .45rem;
    font-size: .73rem; line-height: 1.5; color: var(--danger-ink);
}

@keyframes fieldAttention {
    0%   { box-shadow: 0 0 0 0 var(--danger-rule); }
    70%  { box-shadow: 0 0 0 7px rgba(0,0,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.field-group.has-error.is-flashing .field-input,
.field-group.has-error.is-flashing .field-textarea,
.origin-grid.has-error.is-flashing { animation: fieldAttention 1s ease-out 2; }

@media (prefers-reduced-motion: reduce) {
    .field-group.has-error.is-flashing .field-input,
    .field-group.has-error.is-flashing .field-textarea,
    .origin-grid.has-error.is-flashing { animation: none; }
}


/* ── Social accounts card ───────────────────────────────────────────────────
   The member's own social links on account/profile/. */

/* This is a second, independent form sitting under the profile form's own
   Save button. At the page's normal 1.5rem block rhythm that button would
   read as belonging to this card, so the boundary gets the wider 2.5rem
   break already used between major blocks elsewhere. */
.soc-form { margin-top: 2.5rem; }
.soc-intro { font-size: .78rem; color: var(--ink-4); line-height: 1.65; margin-bottom: 1.25rem; }
.soc-empty { font-size: .8rem;  color: var(--ink-4); font-style: italic; margin-bottom: 1.25rem; }
.soc-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.soc-full-hint { margin-top: 1rem; }

.soc-rows { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 1.5rem; }

.soc-row {
    border-radius: var(--radius);
    background: var(--bg-3); padding: .9rem 1rem;
}
.soc-row.is-blocked {
    border-left: 3px solid var(--danger);
    background: var(--danger-dim);
}

.soc-row__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; flex-wrap: wrap; }
.soc-row__icon {
    width: 28px; height: 28px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--emerald-dim); color: var(--emerald-lt); font-size: .78rem;
}
.soc-row.is-blocked .soc-row__icon {
    background: var(--danger-dim); color: var(--danger);
}
.soc-row__platform {
    font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-2);
}

.badge-blocked, .badge-hidden {
    font-family: var(--font-mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .2rem .55rem; border-radius: 100px;
}
.badge-blocked { color: var(--danger-ink); background: var(--danger-dim); }
.badge-hidden  { color: var(--ink-3);      background: var(--bg-2); }

.soc-row__fields { display: grid; grid-template-columns: 1.6fr 1fr; gap: .75rem; }
.soc-row__fields .field-group { margin-bottom: 0; }
.soc-row__foot { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .7rem; }

.soc-row__url {
    font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3);
    word-break: break-all; margin-bottom: .5rem;
}
.soc-row__reason { display: flex; gap: .45rem; font-size: .74rem; color: var(--ink-2); line-height: 1.6; margin: 0; }
.soc-row__reason i { margin-top: .2rem; flex: none; color: var(--danger); }
.soc-row__reason a { color: var(--emerald-lt); }

.soc-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--ink-3); cursor: pointer; }
.soc-check input { accent-color: var(--emerald); }
.soc-check--danger { color: var(--danger-ink); }
.soc-check--danger input { accent-color: var(--danger); }

.soc-add { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.soc-add__label { margin-bottom: .65rem; }
.soc-add__grid { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: .75rem; }
.soc-add__grid .field-group { margin-bottom: 0; }

@media (max-width: 860px) { .soc-add__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .soc-row__fields { grid-template-columns: 1fr; } }

/* Lifted from the pages' own <style> blocks — every copy was identical
   once formatting was ignored. */
.thread-row__body { flex:1; min-width:0; }
.status-badge--pending { color:#c8a032; border-color:rgba(200,160,50,.35); background:rgba(200,160,50,.1); }
.status-badge--approved { color:var(--emerald-lt); border-color:var(--emerald-rule); background:var(--emerald-dim); }

/* Converged from per-page copies whose differences were incidental. */
.badge-admin { font-family:var(--font-mono); font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; padding:.18rem .5rem; border-radius:100px; border:1px solid var(--emerald-rule); color:var(--emerald); background:var(--emerald-dim); }
.status-badge { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .65rem; border-radius: 100px; border: 1px solid; white-space: nowrap; flex-shrink: 0; }
.status-badge--rejected { color: #c87a7a; border-color: rgba(200,120,122,.35); background: rgba(200,120,122,.1); }


/* ══════════════════════════════════════════════════════════════
   PIECES THAT WERE WRITTEN INLINE
   Each of these appeared as a style="" attribute on two or more account
   pages. Two were existing classes rebuilt by hand — the sidebar card and
   its heading — so those markup copies now just use .sidebar-widget and
   .sidebar-widget__title instead.
   ══════════════════════════════════════════════════════════════ */

/* A sidebar card that is the last in its column and needs no trailing gap. */
.sidebar-widget--flush { margin-bottom: 0; }

/* Bullet icon in the tips lists. */
.tip-icon { color: var(--emerald-lt); margin-right: .4rem; }

/* Leading icon in a notice row, nudged to sit on the first line of text. */
.note-icon { color: var(--emerald-lt); margin-top: .1rem; flex-shrink: 0; }
.note-icon--danger { color: var(--danger); }

/* Submit + back row under a form. */
.form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Spam trap: off-screen rather than display:none, so a bot still fills it. */
.honeypot { position: absolute; left: -9999px; opacity: 0; }

/* A field label that also has to clear the block above it. */
.field-label--spaced { margin-top: .5rem; margin-bottom: .65rem; }

/* The "— leave blank to keep current" aside inside a card heading. */
.form-card__title-note {
    font-family: var(--font-body); font-size: .78rem; font-style: italic;
    text-transform: none; letter-spacing: 0; color: var(--ink-4);
}

/* A logo sitting inside a fixed box. */
.logo-fit { width: 100%; height: 100%; object-fit: contain; }

/* The stretchy middle column of a flex row. Deliberately not .flex-fill —
   Bootstrap owns that name and forces flex:1 1 auto !important, which would
   change the basis from 0 and break the ellipsis truncation beside it. */
.col-fill { flex: 1; min-width: 0; }


/* ══════════════════════════════════════════════════════════════
   PUBLIC PROFILE COMPONENTS
   Four lists on user-profile.php that were written out as style="" on every
   element. The :hover rules here replace onmouseover/onmouseout handlers that
   were setting this.style.color and this.style.transform by hand.
   ══════════════════════════════════════════════════════════════ */

/* — Recent articles — */
.mini-post {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .5rem 0; border-bottom: 1px solid var(--rule); text-decoration: none;
}
.mini-post:last-of-type { border-bottom: none; }
.mini-post__thumb {
    width: 40px; height: 40px; flex-shrink: 0;
    object-fit: cover; border-radius: var(--radius);
}
.mini-post__title {
    font-family: var(--font-display); font-size: .75rem; font-weight: 600;
    color: var(--ink-2); line-height: 1.3; transition: color .2s;
}
.mini-post:hover .mini-post__title { color: var(--emerald-lt); }

/* — Contribution counters — */
.contrib-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem 0; border-bottom: 1px solid var(--rule);
}
.contrib-row--last { border-bottom: none; }
.contrib-row__label {
    display: flex; align-items: center; gap: .5rem;
    font-size: .82rem; color: var(--ink-2);
}
.contrib-row__count {
    font-family: var(--font-display); font-size: 1rem; font-weight: 800;
    color: var(--emerald-lt);
}
.contrib-row__count--teal { color: var(--teal); }

/* — Clubs the member belongs to — */
.club-row {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem 0; border-bottom: 1px solid var(--rule); text-decoration: none;
}
.club-row:last-of-type { border-bottom: none; }
.club-row__logo {
    width: 32px; height: 32px; flex-shrink: 0; overflow: hidden;
    border-radius: var(--radius); background: var(--bg-3);
    display: flex; align-items: center; justify-content: center;
    color: var(--emerald-lt); font-size: .75rem;
}
.club-row__name {
    display: block; font-size: .8rem; font-weight: 600; color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .15s;
}
.club-row:hover .club-row__name { color: var(--emerald-lt); }
.club-row__role {
    font-family: var(--font-mono); font-size: .52rem; letter-spacing: .08em;
    color: var(--ink-4);
}

/* — iNaturalist observation grid — */
.obs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.obs-card {
    /* A column so every card fills its grid row whatever its text runs to. */
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg-card); border-radius: var(--radius-lg);
    transition: transform .2s, box-shadow .2s;
}
.obs-card__link { display: block; text-decoration: none; }
.obs-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.obs-card__img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.obs-card__placeholder {
    width: 100%; aspect-ratio: 1/1;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-3); color: var(--ink-4); font-size: 1.75rem;
}
.obs-card__badge {
    position: absolute; top: .4rem; right: .4rem;
    background: var(--emerald); color: #0a1012;
    font-family: var(--font-mono); font-size: .5rem; font-weight: 700;
    padding: .15rem .4rem; border-radius: 100px;
}
.obs-card__body { padding: .5rem .65rem .65rem; flex: 1; }
/* Were inline styles on the card's four text rows. */
.obs-card__name {
    display: block; font-family: var(--font-display); font-size: .78rem; font-weight: 700;
    color: var(--ink); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.obs-card__name:hover { color: var(--emerald-lt); }
.obs-card__sci {
    font-family: var(--font-mono); font-style: italic; font-size: .58rem; color: var(--emerald);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.obs-card__date { font-family: var(--font-mono); font-size: .55rem; color: var(--ink-3); margin-top: .2rem; }
.obs-card__ot {
    display: inline-flex; align-items: center; gap: .25rem;
    font-family: var(--font-mono); font-size: .52rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--emerald); text-decoration: none; margin-top: .3rem;
}
.obs-card__ot:hover { color: var(--emerald-lt); }
html[data-theme="light"] .obs-card__sci,
html[data-theme="light"] .obs-card__ot { color: var(--emerald-drk); }
html[data-theme="light"] .obs-card__date { color: var(--ink-2); }

/* — Odds and ends — */
.kv-row { display: flex; justify-content: space-between; font-size: .8rem; }
.kv-row__val { font-weight: 600; color: var(--ink); }
.stack-sm { display: flex; flex-direction: column; gap: .5rem; }
.inline-warning {
    font-family: var(--font-mono); font-size: .65rem; color: #c8a032;
    padding: .5rem 0; margin-bottom: 1rem;
}
.widget-more {
    display: block; margin-top: .75rem; text-align: right;
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--emerald-lt); text-decoration: none;
}
.widget-more:hover { color: var(--emerald); }


/* ══════════════════════════════════════════════════════════════
   DASHBOARD WIDGET PIECES
   Small components the dashboard had written out as style="" on each
   element. .club-row__logo above is reused as-is — the dashboard's club
   list was building the identical box by hand.
   ══════════════════════════════════════════════════════════════ */

/* Count pill pushed to the end of a row. */
.pill-badge {
    margin-left: auto; background: var(--emerald); color: #0e100f;
    font-size: .52rem; font-weight: 700; padding: .1rem .45rem; border-radius: 100px;
}
.pill-badge--amber { background: rgba(200,160,58,.2); color: #c8a03a; }

/* 3-up thumbnail grid. */
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.mini-tile {
    position: relative; display: block; aspect-ratio: 1/1; overflow: hidden;
    border-radius: var(--radius); background: var(--bg-3);
    text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.mini-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.mini-tile__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-tile__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-4); font-size: 1.25rem;
}
.mini-tile__badge {
    position: absolute; bottom: .3rem; right: .3rem;
    background: var(--emerald); color: #0a1012;
    font-family: var(--font-mono); font-size: .45rem; font-weight: 700;
    padding: .1rem .35rem; border-radius: 100px;
}

/* Empty state inside a widget. */
.empty-block { text-align: center; padding: 1rem 0; }
.empty-block--lg { padding: 1.5rem 0; }
.empty-block__icon { display: block; font-size: 1.5rem; color: var(--ink-4); margin-bottom: .75rem; }
.empty-block__icon--lg { font-size: 1.75rem; }

/* Layout rows and small text. */
.row-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.row-between--spaced { margin-top: 1rem; }
.row-inline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.row-title {
    display: block; font-size: .82rem; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-sub { font-size: .8rem; color: var(--ink-3); margin-bottom: 1rem; }
.meta-link {
    font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em;
    color: var(--ink-4); text-decoration: none;
}
.meta-link:hover { color: var(--emerald-lt); }
.meta-text { font-family: var(--font-mono); font-size: .55rem; color: var(--ink-4); }
.meta-text--emerald { font-size: .52rem; color: var(--emerald-lt); }




/* ══════════════════════════════════════════════════════════════
   CLUB MANAGEMENT
   ══════════════════════════════════════════════════════════════ */

/* A form wrapping a single button, kept on the same line as its siblings. */
.form-inline { display: inline; }

/* Panels the page's own JS shows and hides. The inline display it sets at
   runtime beats these, so toggling still works. */
.toggle-panel { display: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.toggle-block { display: none; margin-bottom: 1.5rem; }

/* Section heading inside a card. */
.section-heading {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--emerald); margin-bottom: 1rem;
}

.textarea-sm { min-height: 100px; }
.chip-muted  { background: var(--bg-3); color: var(--ink-3); }
.text-faint  { color: var(--ink-4); font-weight: 400; }
.push-right  { margin-left: auto; }
.ml-xs       { margin-left: .4rem; }


/* ══════════════════════════════════════════════════════════════
   SINGLE-PROPERTY HELPERS
   For the one-declaration tweaks the pages carried as style="" — a colour on
   an icon, a dimmed row, a leading glyph that must not shrink. Named after
   the tokens so it stays obvious what they do, and prefixed so nothing
   collides with Bootstrap's own utilities.
   ══════════════════════════════════════════════════════════════ */
.c-emerald    { color: var(--emerald); }
.c-emerald-lt { color: var(--emerald-lt); }
.c-teal       { color: var(--teal); }
.c-ink        { color: var(--ink); }
.c-ink-3      { color: var(--ink-3); }
.c-ink-4      { color: var(--ink-4); }

/* These two are literal hexes the pages used rather than tokens. Kept as they
   were — they are softer than --danger / --amber, so swapping them would be a
   visual change, not a tidy-up. Worth promoting to tokens at some point. */
.c-soft-red   { color: #c87a7a; }
.c-soft-amber { color: #c8a03a; }

.is-dim         { opacity: .6; }
.icon-lead      { flex-shrink: 0; margin-top: .1rem; }
.accent-emerald { accent-color: var(--emerald); }
.no-underline   { text-decoration: none; }
.tt-capitalize  { text-transform: capitalize; }

/* Light theme — shared account fields.
   styles-base.css paints every light-theme input with --bg-card, which is the
   card these sit in; without a border that left no field to see. Same well and
   the same ring as the dark theme. !important because that block reads
   input:not([type="checkbox"]):not([type="radio"]), and :not() carries its
   argument's weight — (0,3,2), above any plain class selector. */
html[data-theme="light"] .field-input,
html[data-theme="light"] .field-textarea,
html[data-theme="light"] .field-input.field-select,
html[data-theme="light"] select.field-input {
    background-color: var(--bg) !important;
}
html[data-theme="light"] .field-input:focus,
html[data-theme="light"] .field-textarea:focus,
html[data-theme="light"] .field-input.field-select:focus,
html[data-theme="light"] select.field-input:focus {
    background-color: var(--bg-2) !important; box-shadow: 0 0 0 2px var(--emerald) !important;
}