/* AlumDeck CMS components - hand-written (NOT Tailwind-compiled), so new utility
   classes always exist on shared hosting. Colors come from the theme CSS
   variables, so these respect the live color picker too. */

/* ---------- Menus ---------- */
.cms-nav-link{color:var(--color-ink-700,#3d3226);text-decoration:none;display:inline-flex;align-items:center;gap:.25rem;cursor:pointer}
.cms-nav-link:hover{color:var(--color-brick-700,#742622)}
.cms-nav-item{position:relative;display:inline-flex;align-items:center}
.cms-caret{font-size:.7em;line-height:1}
.cms-dropdown{position:absolute;top:100%;inset-inline-start:0;margin-top:.5rem;min-width:12rem;background:var(--color-cream-50,#fdfbf6);
  border:1px solid var(--color-cream-300,#e3d7bd);border-radius:.5rem;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:.35rem;z-index:50}
.cms-dropdown-link{display:block;padding:.5rem .65rem;border-radius:.375rem;color:var(--color-ink-700,#3d3226);text-decoration:none;font-size:.875rem}
.cms-dropdown-link:hover{background:var(--color-cream-200,#efe7d6);color:var(--color-brick-700,#742622)}

/* ---------- Footer widgets ---------- */
.cms-footer-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.cms-footer-title{margin:0 0 .75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-cream-50,#fdfbf6);font-size:.875rem}
.cms-footer-text{font-size:.875rem;line-height:1.6;color:rgba(239,231,214,.8)}
.cms-footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.875rem}
.cms-footer-links a{color:var(--color-cream-200,#efe7d6);text-decoration:none}
.cms-footer-links a:hover{color:var(--color-brass-400,#c9a45c)}
.cms-social{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.875rem}
.cms-social-link{color:var(--color-cream-200,#efe7d6);text-decoration:none}
.cms-social-link:hover{color:var(--color-brass-400,#c9a45c)}

/* ==========================================================================
   Public site components (hand-written, plain CSS - there is no build step).
   Colours come from the theme variables, so a site's own palette applies.
   ========================================================================== */

/* ---------- Pagination (resources/views/vendor/pagination) ---------- */
.pager{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.pager-list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.375rem;list-style:none;margin:0;padding:0}
.pager-link,.pager-current,.pager-disabled{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-width:2.75rem;min-height:2.75rem;padding:0 .875rem;border-radius:.375rem;font-size:.875rem;font-weight:600;line-height:1;text-decoration:none}
.pager-link{border:1px solid var(--color-brick-600,#8c2f2b);background:var(--color-cream-50,#fdfbf6);color:var(--color-brick-700,#742622)}
.pager-link:hover{background:var(--color-brick-50,#faf1f0)}
.pager-link:focus-visible{outline:2px solid var(--color-brick-500,#a03f39);outline-offset:2px}
.pager-current{border:1px solid var(--color-brick-600,#8c2f2b);background:var(--color-brick-600,#8c2f2b);color:var(--color-cream-50,#fdfbf6)}
.pager-disabled{border:1px dashed var(--color-cream-300,#e3d7bd);color:var(--color-ink-500,#5c4f3f);opacity:.55;cursor:not-allowed}
.pager-gap{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .25rem;color:var(--color-ink-500,#5c4f3f)}
.pager-of{font-size:.875rem;color:var(--color-ink-700,#3d3226);padding:0 .5rem}
.pager-num{display:none}
.pager-summary{margin:0;font-size:.8125rem;color:var(--color-ink-500,#5c4f3f)}
@media (min-width:40rem){.pager-num{display:block}.pager-of{display:none}}

/* ---------- Home stats band: as many columns as there are figures ---------- */
.ad-stats{display:grid;gap:1.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.ad-stats.is-1{grid-template-columns:1fr}
@media (min-width:40rem){.ad-stats.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ad-stats.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Event cards and pages ---------- */
.ad-event-card{display:flex;flex-direction:column;overflow:hidden}
.ad-event-cover{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--color-cream-200,#efe7d6)}
.ad-event-body{display:flex;gap:1.25rem;padding:1.25rem}
.ad-cover-hero{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:.5rem;background:var(--color-cream-200,#efe7d6)}
.ad-note{border-radius:.5rem;border:1px solid var(--color-cream-300,#e3d7bd);background:var(--color-cream-200,#efe7d6);padding:1rem 1.25rem;font-size:.875rem;color:var(--color-ink-700,#3d3226)}
.ad-rsvp-choice[aria-pressed="true"]{box-shadow:0 0 0 2px var(--color-cream-50,#fdfbf6),0 0 0 4px var(--color-brick-600,#8c2f2b)}

/* ---------- People: notable alumni, committee, memorials ---------- */
/* Phones get a compact row (small portrait beside the text); from 640px the
   portrait sits full width on top. A column of 356px portraits made the
   notable alumni page nearly 8,000px tall on a phone. */
.ad-person{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:1rem;align-items:start;padding:1rem}
.ad-person.no-photo{grid-template-columns:minmax(0,1fr)}
.ad-person-photo{display:block;width:4.5rem;height:4.5rem;border-radius:.5rem;object-fit:cover}
@media (min-width:40rem){
  .ad-person{display:block;padding:0}
  .ad-person-photo{width:100%;height:auto;aspect-ratio:1/1;border-radius:0}
  .ad-person-body{padding:1.25rem}
}
.ad-memorial{display:flex;flex-direction:column;gap:1rem;padding:1.25rem}
.ad-memorial-photo{display:block;width:5rem;height:5rem;border-radius:.25rem;object-fit:cover;filter:grayscale(100%)}
@media (min-width:40rem){.ad-memorial{flex-direction:row;gap:1.25rem}}
.ad-committee-photo{display:block;width:3.5rem;height:3.5rem;border-radius:9999px;object-fit:cover;flex-shrink:0}

/* ---------- Giving: on phones the total and the call to action come first ---------- */
@media (max-width:63.99rem){.campaign-summary{order:-1}}
@media (min-width:64rem){.campaign-main{grid-column:span 2 / span 2}}

/* ---------- Members-area landing: feature icons ---------- */
.ad-feature-icon{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:.5rem;background:var(--color-brick-50,#faf1f0);color:var(--color-brick-700,#742622)}
.ad-feature-icon svg{width:1.375rem;height:1.375rem}

/* ---------- Small shared bits ---------- */
.ad-sep{margin:0 .4em;color:var(--color-ink-500,#5c4f3f)}
.ad-thanks-icon{display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:9999px;background:var(--color-brick-50,#faf1f0);color:var(--color-brick-700,#742622)}
.ad-thanks-icon svg{width:2rem;height:2rem}

/* ---------- Site header and navigation (layouts/site.blade.php) ----------
   Plain rules instead of inline styles and onmouseover handlers, so the header
   needs no inline script and follows the theme colours. */
.skip-link{position:absolute;inset-inline-start:.75rem;top:-3rem;z-index:100;padding:.625rem 1rem;border-radius:.375rem;background:var(--color-ink-900,#241c14);color:var(--color-cream-50,#fdfbf6);font-size:.875rem;font-weight:600;text-decoration:none}
.skip-link:focus{top:.75rem;outline:2px solid var(--color-brass-400,#c9a45c);outline-offset:2px}
main:focus{outline:none}
.nav-current{color:var(--color-brick-700,#742622);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.4em}
.nav-wide{display:none}
@media (min-width:80rem){.nav-wide{display:inline}}
.hdr-pop-wrap{position:relative}
.hdr-acct-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer;padding:2px;border-radius:9999px;color:var(--color-ink-500,#5c4f3f)}
.hdr-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:transparent;color:var(--color-ink-900,#241c14);cursor:pointer;border-radius:8px}
.hdr-icon-btn:hover{background:rgba(154,51,36,.08)}
.hdr-acct-btn:focus-visible,.hdr-icon-btn:focus-visible{outline:2px solid var(--color-brick-500,#a03f39);outline-offset:2px}
.hdr-pop{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:50;background:#fff;border:1px solid #d9cfc0;border-radius:10px;box-shadow:0 8px 24px rgba(36,28,20,.18);padding:5px}
.hdr-pop-menu{padding:6px;min-width:200px}
.hdr-pop-who{padding:6px 12px 4px;margin:0;font-size:12px;color:var(--color-ink-500,#5c4f3f)}
.hdr-pop-who strong{color:var(--color-ink-900,#241c14)}
.hdr-pop-link{display:block;width:100%;text-align:start;padding:8px 12px;font-size:14px;color:var(--color-ink-900,#241c14);border:0;border-radius:7px;background:transparent;text-decoration:none;cursor:pointer}
.hdr-pop-link:hover,.hdr-pop-link:focus-visible{background:var(--color-cream-200,#efe7d6)}
.hdr-pop-signout{color:var(--color-brick-700,#742622)}
.hdr-pop-rule{height:1px;background:#eadfce;margin:5px 8px}
.hdr-pop-form{margin:0}
.hdr-search{display:flex;align-items:center;gap:4px;width:260px}
.hdr-search-input{flex:1;min-width:0;border:0;outline:none;background:transparent;padding:8px 10px;font-size:14px;color:var(--color-ink-900,#241c14)}
.hdr-search-go{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border:0;background:var(--color-brick-600,#8c2f2b);color:#fff;border-radius:7px;cursor:pointer}

/* ==========================================================================
   Feature styles (AlumDeck 1.1). Folded in from the improve build's
   per-package files, in the same order they were loaded, so the cascade is
   unchanged. Class names carry their feature's prefix (.a-, .b-, .c-, .d-,
   .e1-, .e2-, .f-) and never collide.
   ========================================================================== */

/* ---- newsletters and email (package A) ---- */
/* ---- Member area: newsletter archive (F109) ---- */
.a-newsletter-list { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.a-newsletter-item { position: relative; transition: border-color .15s ease, box-shadow .15s ease; }
.a-newsletter-item:hover { border-color: #b8a88a; }
.a-newsletter-item:focus-within { outline: 3px solid var(--color-brick-700, #8c2f2b); outline-offset: 2px; }
.a-newsletter-link { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.a-newsletter-link:hover { color: var(--color-brick-700, #8c2f2b); text-decoration: underline; }
.a-newsletter-link:focus { outline: none; }
/* The whole card is the link's tap target (at least 44 px tall on phones). */
.a-newsletter-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* The stored newsletter body, as the email showed it. */
.a-newsletter-body { overflow-wrap: anywhere; }
.a-newsletter-body img { max-width: 100%; height: auto; }
/* A block newsletter keeps the 600 px email shape, centred, as it looked in the inbox. */
.a-newsletter-body--blocks {
    max-width: 602px; margin: 0 auto; /* 600 px, as in the inbox, plus the border */
    background: #fffdf8; border: 1px solid var(--color-cream-300, #e3d7bd); border-radius: 10px; padding: 18px 0; overflow: hidden;
}
.a-newsletter-body--blocks > table { width: 100%; max-width: 100%; border-collapse: collapse; }
.a-newsletter-body--blocks table table { border-collapse: separate; }
/* The site resets list markers; the email keeps them. */
.a-newsletter-body--blocks ul { list-style: disc; }
.a-newsletter-body--blocks ol { list-style: decimal; }
.a-newsletter-body--blocks h2 { margin: 0; }
.a-newsletter-body--blocks a { overflow-wrap: anywhere; }
@media (max-width: 40rem) {
    .a-newsletter-body--blocks .a-email-pad { padding-inline-start: 16px !important; padding-inline-end: 16px !important; }
    .a-newsletter-body--blocks .a-email-img { width: 100% !important; height: auto !important; }
    .a-newsletter-body--blocks .a-email-col { display: block !important; width: 100% !important; padding: 0 0 12px 0 !important; }
}

.a-newsletter-pager { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; }
.a-newsletter-pager__link {
    display: flex; flex-direction: column; gap: .15rem; min-width: 0; max-width: 100%;
    min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--color-cream-300, #e3d7bd); border-radius: .5rem;
    text-decoration: none; overflow-wrap: anywhere; flex: 1 1 14rem;
}
.a-newsletter-pager__link:hover { border-color: var(--color-brick-700, #8c2f2b); }
.a-newsletter-pager__link:focus-visible { outline: 3px solid var(--color-brick-700, #8c2f2b); outline-offset: 2px; }
.a-newsletter-pager__link--next { text-align: end; align-items: flex-end; }

.a-empty { max-width: 40rem; }

/* ---- directory, profiles, membership card, member app, mentoring (package B) ---- */
/* ---------------------------------------------------------------- shared */

.b-chips,
.b-card-chips,
.b-active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.b-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-cream-300, #e3d7bd);
    background: var(--color-cream-100, #f8f4eb);
    color: var(--color-ink-700, #3d3226);
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .8125rem;
    line-height: 1.35;
}
.b-chip-sm {
    padding: .05rem .5rem;
    font-size: .75rem;
}
.b-card-chips {
    margin-top: .45rem;
    gap: .3rem;
}
.b-help-list {
    margin: 0;
    padding-inline-start: 1.2rem;
    color: var(--color-ink-700, #3d3226);
    list-style: disc;
}
.b-help-list li + li {
    margin-top: .25rem;
}
.b-panel {
    border-radius: .5rem;
    background: color-mix(in oklab, var(--color-cream-200, #efe7d6) 70%, transparent);
    padding: .75rem;
    font-size: .875rem;
}

/* A tick box with a comfortable target (the whole label is clickable). */
.b-tick {
    display: inline-flex;
    align-items: flex-start;
    gap: .55rem;
    min-height: 2.25rem;
    padding: .45rem .2rem;
    font-size: .875rem;
    color: var(--color-ink-700, #3d3226);
    cursor: pointer;
}
.b-tick input {
    margin-top: .15rem;
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    accent-color: var(--color-brick-600, #8c2f2b);
}
@media (pointer: coarse) {
    .b-tick { min-height: 2.75rem; align-items: center; }
    .b-tick input { margin-top: 0; }
}

/* ------------------------------------------- F004 share ticks / revealed */

.b-share {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.b-share-legend {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-ink-700, #3d3226);
    padding: 0;
}
.b-share-options {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
    margin-top: .15rem;
}
.b-shared {
    margin: .35rem 0 0;
    display: grid;
    gap: .3rem;
}
.b-shared-row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: .5rem;
    align-items: baseline;
}
.b-shared dt {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-ink-500, #5c4f3f);
}
.b-shared dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-ink-900, #241c14);
}
.b-shared a {
    color: var(--color-brick-700, #742622);
    text-decoration: underline;
}

/* --------------------------------------------- F004 profile privacy rows */

.b-privacy-list {
    margin-top: .75rem;
    display: grid;
    gap: .5rem;
}
/* A fieldset's legend never joins a grid or flex layout, so the row is laid
   out with floats: a floated legend is an ordinary box. */
.b-privacy-row {
    display: flow-root;
    border: 1px solid var(--color-cream-300, #e3d7bd);
    border-radius: .5rem;
    background: var(--color-cream-50, #fdfbf6);
    margin: 0;
    padding: .6rem .75rem;
    min-width: 0;
}
.b-privacy-field {
    float: left; float: inline-start;
    width: 100%;
    padding: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-ink-900, #241c14);
}
.b-privacy-field + * {
    clear: both;
}
.b-privacy-row > .field-error {
    clear: both;
}
.b-privacy-help {
    display: block;
    font-weight: 400;
    font-size: .75rem;
    color: var(--color-ink-500, #5c4f3f);
}
.b-seg {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: .45rem;
    border: 1px solid var(--color-cream-300, #e3d7bd);
    border-radius: .45rem;
    overflow: hidden;
    background: #fff;
}
.b-seg-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.b-seg-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .35rem .4rem;
    text-align: center;
    font-size: .8125rem;
    line-height: 1.2;
    color: var(--color-ink-700, #3d3226);
    cursor: pointer;
    user-select: none;
}
.b-seg-label + .b-seg-input + .b-seg-label,
.b-seg-input + .b-seg-label ~ .b-seg-label {
    border-inline-start: 1px solid var(--color-cream-300, #e3d7bd);
}
.b-seg-input:checked + .b-seg-label {
    background: var(--color-brick-600, #8c2f2b);
    color: var(--color-cream-50, #fdfbf6);
    font-weight: 600;
}
.b-seg-input:focus-visible + .b-seg-label {
    outline: 3px solid var(--color-brick-500, #a03f39);
    outline-offset: -3px;
}
@media (hover: hover) {
    .b-seg-input:not(:checked) + .b-seg-label:hover {
        background: var(--color-brick-50, #faf1f0);
    }
}
@media (min-width: 48rem) {
    .b-privacy-field {
        width: calc(100% - 25rem);
        padding-top: .45rem;
    }
    .b-privacy-field + * {
        clear: none;
    }
    .b-seg {
        float: right; float: inline-end;
        width: 24rem;
        margin-top: 0;
    }
    .b-seg-label {
        min-height: 2.35rem;
    }
}
@media (pointer: coarse) {
    .b-seg-label { min-height: 2.75rem; }
}

.b-preview-box {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    border-top: 1px solid var(--color-cream-300, #e3d7bd);
    padding-top: 1rem;
}

/* ---------------------------------------------------- F011 tag pickers */

.b-tag-group {
    border-top: 1px solid var(--color-cream-300, #e3d7bd);
    padding-top: 1rem;
    min-width: 0;
}
.b-tag-group:first-child {
    border-top: 0;
    padding-top: 0;
}
.b-tag-filter {
    margin-top: .6rem;
    max-width: 22rem;
}
.b-tag-options {
    margin-top: .5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    column-gap: 1rem;
    max-height: 22rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.b-suggest {
    margin-top: .9rem;
    max-width: 30rem;
}
.b-suggest-row {
    display: flex;
    gap: .5rem;
}
.b-suggest-row .field-input {
    flex: 1 1 auto;
    min-width: 0;
}
.b-suggest-row .btn-outline {
    flex-shrink: 0;
}

/* ------------------------------------------ F004 profile preview banner */

.b-preview-bar {
    background: var(--color-ink-900, #241c14);
    color: var(--color-cream-50, #fdfbf6);
}
.b-preview-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.25rem;
    padding-block: .7rem;
    font-size: .875rem;
}
.b-preview-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.b-preview-toggle a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: .25rem .8rem;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--color-cream-50, #fdfbf6) 40%, transparent);
    color: var(--color-cream-50, #fdfbf6);
    text-decoration: none;
}
.b-preview-toggle a[aria-current="page"] {
    background: var(--color-cream-50, #fdfbf6);
    color: var(--color-ink-900, #241c14);
    font-weight: 600;
}
.b-preview-toggle a:focus-visible {
    outline: 3px solid var(--color-brass-400, #c9a45c);
    outline-offset: 2px;
}
@media (pointer: coarse) {
    .b-preview-toggle a { min-height: 2.75rem; }
}

/* ------------------------------------------------- F001 directory layout */

.b-dir {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "search" "side" "results";
}
.b-search { grid-area: search; }
.b-dir-side { grid-area: side; min-width: 0; }
.b-dir-results { grid-area: results; min-width: 0; }

@media (min-width: 64rem) {
    .b-dir {
        grid-template-columns: 17rem minmax(0, 1fr);
        grid-template-areas: "side search" "side results";
        /* The search row keeps its own height; the results take the rest. */
        grid-template-rows: auto 1fr;
        column-gap: 2rem;
        align-items: start;
    }
}

.b-search {
    display: flex;
    gap: .5rem;
}
.b-search .field-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.75rem;
}
.b-search .btn-primary {
    flex-shrink: 0;
    min-height: 2.75rem;
}

.b-filters {
    border: 1px solid var(--color-cream-300, #e3d7bd);
    border-radius: .75rem;
    background: var(--color-cream-50, #fdfbf6);
}
.b-filters-summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    font-weight: 600;
    color: var(--color-ink-900, #241c14);
    cursor: pointer;
    list-style: none;
}
.b-filters-summary::-webkit-details-marker {
    display: none;
}
.b-filters-summary::after {
    content: "";
    margin-inline-start: auto;
    width: .55rem;
    height: .55rem;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
}
.b-filters[open] > .b-filters-summary::after {
    transform: rotate(-135deg) translateY(-2px);
}
.b-filters-summary:focus-visible {
    outline: 3px solid var(--color-brick-500, #a03f39);
    outline-offset: 2px;
    border-radius: .75rem;
}
.b-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--color-brick-600, #8c2f2b);
    color: var(--color-cream-50, #fdfbf6);
    font-size: .75rem;
}
.b-filters-body {
    display: grid;
    gap: .9rem;
    padding: .25rem 1rem 1rem;
}
.b-filter {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.b-filter .field-input {
    min-height: 2.5rem;
}
.b-filter-flags {
    display: grid;
    gap: 0;
}
.b-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    color: var(--color-ink-500, #5c4f3f);
}
.b-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.b-filter-actions > * {
    flex: 1 1 auto;
}
@media (min-width: 64rem) {
    .b-filters-summary {
        cursor: default;
        border-bottom: 1px solid var(--color-cream-300, #e3d7bd);
    }
    .b-filters-summary::after {
        display: none;
    }
    .b-filters-body {
        padding-top: 1rem;
    }
}
@media (pointer: coarse) {
    .b-filter .field-input { min-height: 2.75rem; }
    .b-filter-actions .btn-primary,
    .b-filter-actions .btn-outline { min-height: 2.75rem; }
}

.b-results-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: .25rem;
}
.b-results-count {
    color: var(--color-ink-700, #3d3226);
}
.b-results-count strong {
    color: var(--color-ink-900, #241c14);
}
.b-sort {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--color-ink-700, #3d3226);
}
.b-sort .field-input {
    width: auto;
    min-height: 2.5rem;
}
@media (pointer: coarse) {
    .b-sort .field-input { min-height: 2.75rem; }
}

.b-active-chips {
    margin-top: .75rem;
    align-items: center;
}
.b-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.25rem;
    padding-block: .25rem .25rem; padding-inline: .8rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--color-brick-200, #e5bcb8);
    background: var(--color-brick-50, #faf1f0);
    color: var(--color-brick-700, #742622);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}
.b-filter-chip span[aria-hidden] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1;
}
@media (hover: hover) {
    .b-filter-chip:hover span[aria-hidden] {
        background: var(--color-brick-100, #f3dedc);
    }
}
.b-filter-chip:focus-visible,
.b-clear-link:focus-visible {
    outline: 3px solid var(--color-brick-500, #a03f39);
    outline-offset: 2px;
}
.b-clear-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0 .4rem;
    font-size: .8125rem;
    color: var(--color-brick-700, #742622);
    text-decoration: underline;
}
@media (pointer: coarse) {
    .b-filter-chip, .b-clear-link { min-height: 2.75rem; }
}

.b-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) {
    .b-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 80rem) {
    .b-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.b-member-card {
    display: flex;
    min-width: 0;
    gap: 1rem;
    padding: 1rem;
    color: inherit;
    text-decoration: none;
}
.b-member-card:focus-visible {
    outline: 3px solid var(--color-brick-500, #a03f39);
    outline-offset: 2px;
}
.b-member-name-row {
    display: flex;
    flex-wrap: wrap; /* a chip that does not fit moves down, rather than squeezing "Batch of 2023" (S3-FIX-4) */
    align-items: center;
    gap: .25rem .4rem;
    min-width: 0;
}
.b-member-name {
    display: block;
    min-width: 0;
    font-weight: 600;
    color: var(--color-ink-900, #241c14);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.b-member-name-row .chip-spotlight {
    flex-shrink: 0;
}
.b-empty {
    padding: 1.5rem;
}

/* Touch screens: every package B control at least 44 px tall. */
@media (pointer: coarse) {
    .b-tag-filter,
    .b-suggest-row .field-input,
    .b-suggest-row .btn-outline,
    .b-preview-box .btn-outline,
    .b-mentor-ask .field-input,
    .b-mentor-ask .btn-primary,
    .b-feedback .btn-primary,
    .b-home-more {
        min-height: 2.75rem;
    }
}
.b-home-more {
    display: inline-flex;
    align-items: center;
}

/* ------------------------------------------------ F016 membership card */

.b-card-page {
    max-width: 34rem;
    margin-inline: auto;
}
.b-idcard {
    margin-top: 1.5rem;
    width: 100%;
    aspect-ratio: 85.6 / 54;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--color-ink-900, #241c14);
    color: var(--color-cream-50, #fdfbf6);
    box-shadow: 0 18px 40px -18px rgba(36, 28, 20, .55);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.b-idcard-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem 1rem;
    background: var(--color-brick-700, #742622);
}
.b-idcard-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.b-idcard-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.b-idcard-brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.b-idcard-est {
    flex-shrink: 0;
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .8;
}
.b-idcard-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .6rem 1rem;
    min-height: 0;
}
.b-idcard-face {
    box-shadow: 0 0 0 2px var(--color-brass-400, #c9a45c);
}
.b-idcard-who {
    flex: 1 1 auto;
    min-width: 0;
}
.b-idcard-name {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.b-idcard-batch {
    margin-top: .2rem;
    font-size: .8125rem;
    color: color-mix(in oklab, var(--color-cream-200, #efe7d6) 85%, transparent);
}
.b-idcard-no {
    margin-top: .35rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .75rem;
    letter-spacing: .08em;
    color: var(--color-brass-400, #c9a45c);
}
.b-idcard-qr {
    flex-shrink: 0;
    width: 32%;
    max-width: 9.5rem;
    aspect-ratio: 1;
    padding: .35rem;
    border-radius: .5rem;
    background: #fff;
}
.b-idcard-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}
.b-idcard-foot {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem 1rem;
    background: rgba(0, 0, 0, .25);
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--color-cream-200, #efe7d6) 80%, transparent);
}
@media (max-width: 24rem) {
    .b-idcard-body { gap: .6rem; padding-inline: .75rem; }
    .b-idcard-face { width: 48px !important; height: 48px !important; }
    .b-idcard-name { font-size: 1rem; }
}
.b-card-actions {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.b-card-actions > * {
    flex: 1 1 10rem;
    min-height: 2.75rem;
}
.b-card-note {
    margin-top: .75rem;
    font-size: .8125rem;
    color: var(--color-ink-500, #5c4f3f);
}
.b-card-tickets {
    margin-top: 2rem;
}
.b-card-tickets ul {
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
}
.b-card-tickets a {
    display: block;
    padding: .75rem 1rem;
    border: 1px solid var(--color-cream-300, #e3d7bd);
    border-radius: .5rem;
    background: var(--color-cream-50, #fdfbf6);
    text-decoration: none;
    color: inherit;
}
.b-card-tickets a:focus-visible,
.b-reissue > summary:focus-visible {
    outline: 3px solid var(--color-brick-500, #a03f39);
    outline-offset: 2px;
}
@media (hover: hover) {
    .b-card-tickets a:hover { border-color: var(--color-brick-300, #d29490); }
}
.b-reissue {
    margin-top: 2rem;
    border-top: 1px solid var(--color-cream-300, #e3d7bd);
    padding-top: 1rem;
}
.b-reissue > summary {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-brick-700, #742622);
    cursor: pointer;
}
.btn-outline.b-danger {
    border-color: var(--color-brick-700, #742622);
    color: var(--color-brick-700, #742622);
    min-height: 2.75rem;
}

/* The small card on the member home. */
.b-home-card-qr {
    flex-shrink: 0;
    width: 5.5rem;
    height: 5.5rem;
    padding: .3rem;
    border-radius: .4rem;
    background: #fff;
}
.b-home-card-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}
.b-home-card-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--color-cream-50, #fdfbf6);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: .8125rem;
}
.b-home-card-link:focus-visible {
    outline: 3px solid var(--color-brass-400, #c9a45c);
    outline-offset: 2px;
}

/* Print: only the card, at the size of a bank card (ID-1, 85.6 x 54 mm). */
@media print {
    @page { margin: 12mm; }
    body * { visibility: hidden !important; }
    .b-idcard, .b-idcard * { visibility: visible !important; }
    .b-idcard {
        position: absolute;
        inset-inline-start: 0;
        top: 0;
        width: 85.6mm;
        height: 54mm;
        aspect-ratio: auto;
        margin: 0;
        border-radius: 3mm;
        box-shadow: none;
        border: .2mm solid #999;
    }
    .b-idcard-band { padding: 1.4mm 3.5mm; }
    .b-idcard-brand { font-size: 8pt; }
    .b-idcard-brand img { width: 6mm; height: 6mm; }
    .b-idcard-body { padding: 1.5mm 3.5mm; gap: 3mm; }
    .b-idcard-face { width: 15mm !important; height: 15mm !important; }
    .b-idcard-name { font-size: 10.5pt; }
    .b-idcard-batch, .b-idcard-no { font-size: 7pt; }
    .b-idcard-qr { width: 24mm; padding: 1mm; }
    .b-idcard-foot { padding: 1.2mm 3.5mm; font-size: 5.5pt; }
}

/* ------------------------------------------ F016 public membership check */

.b-verify {
    max-width: 30rem;
    margin-inline: auto;
    padding: 1.5rem;
}
@media (min-width: 40rem) {
    .b-verify { padding: 2rem; }
}
.b-verify-title {
    margin-top: .5rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-ink-900, #241c14);
}
.b-verify-status {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1rem;
    border-radius: .6rem;
    font-size: 1.125rem;
    font-weight: 700;
}
.b-verify-ok {
    background: #e7f3ec;
    color: #14532d;
    border: 1px solid #9fceb2;
}
.b-verify-no {
    background: #f4f1ec;
    color: #3f3a33;
    border: 1px solid #d6cfc2;
}
.b-verify-person {
    margin-top: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.b-verify-facts {
    margin: 0;
    display: grid;
    gap: .55rem;
    min-width: 0;
}
.b-verify-facts dt {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-ink-500, #5c4f3f);
}
.b-verify-facts dd {
    margin: 0;
    color: var(--color-ink-900, #241c14);
    overflow-wrap: anywhere;
}
.b-verify-name {
    font-size: 1.2rem;
    font-weight: 600;
}
.b-verify-live {
    margin-top: 1.25rem;
    font-size: .8125rem;
    color: var(--color-ink-500, #5c4f3f);
}
.b-verify-staff {
    margin-top: 1.5rem;
    border-top: 1px solid var(--color-cream-300, #e3d7bd);
    padding-top: 1rem;
}
.b-verify-tickets {
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .6rem;
}
.b-verify-tickets li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.b-verify-tickets .btn-primary {
    min-height: 2.75rem;
}

/* ------------------------------------------ F012 profile completeness */

.b-complete {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 34rem;
    padding: .9rem 1rem;
    border-radius: .75rem;
    background: rgba(253, 251, 246, .07);
    border: 1px solid rgba(253, 251, 246, .14);
}
.b-ring {
    --b-p: 0%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 999px;
    background: conic-gradient(var(--color-brass-400, #c9a45c) var(--b-p), rgba(253, 251, 246, .16) 0);
}
.b-ring span {
    display: grid;
    place-items: center;
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 999px;
    background: var(--color-ink-900, #241c14);
    color: var(--color-cream-50, #fdfbf6);
    font-size: .9rem;
    font-weight: 700;
}
.b-ring--0 { --b-p: 0%; }
.b-ring--5 { --b-p: 5%; }
.b-ring--10 { --b-p: 10%; }
.b-ring--15 { --b-p: 15%; }
.b-ring--20 { --b-p: 20%; }
.b-ring--25 { --b-p: 25%; }
.b-ring--30 { --b-p: 30%; }
.b-ring--35 { --b-p: 35%; }
.b-ring--40 { --b-p: 40%; }
.b-ring--45 { --b-p: 45%; }
.b-ring--50 { --b-p: 50%; }
.b-ring--55 { --b-p: 55%; }
.b-ring--60 { --b-p: 60%; }
.b-ring--65 { --b-p: 65%; }
.b-ring--70 { --b-p: 70%; }
.b-ring--75 { --b-p: 75%; }
.b-ring--80 { --b-p: 80%; }
.b-ring--85 { --b-p: 85%; }
.b-ring--90 { --b-p: 90%; }
.b-ring--95 { --b-p: 95%; }
.b-ring--100 { --b-p: 100%; }
.b-complete-title {
    font-weight: 600;
    color: var(--color-cream-50, #fdfbf6);
}
.b-complete-steps {
    margin: .3rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .9rem;
    font-size: .875rem;
}
.b-complete-steps a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    color: var(--color-brass-400, #c9a45c);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.b-complete-steps a:focus-visible {
    outline: 3px solid var(--color-brass-400, #c9a45c);
    outline-offset: 2px;
}
@media (pointer: coarse) {
    .b-complete-steps a { min-height: 2.75rem; }
}

/* ------------------------------------------------ F012 home cards */

.b-home-cards {
    margin-top: 1.5rem;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
    .b-home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.b-home-card {
    padding: 1.25rem 1.5rem;
    min-width: 0;
}
.b-home-card h3 {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-brass-600, #7a5c22);
}
.b-home-list {
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .2rem;
    font-size: .9rem;
    color: var(--color-ink-700, #3d3226);
}
.b-home-list a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    font-weight: 600;
    color: var(--color-brick-700, #742622);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* The column may shrink below its longest line and the reason wraps: a long
   reason ("Batch 2011 - Same batch - Both in Photography Club") no longer
   widens the page on a phone (sprint 2 fix round, review R2 M1). */
.b-people {
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
}
.b-people li {
    min-width: 0;
}
.b-people a {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.75rem;
    padding: .3rem .4rem;
    margin-inline: -.4rem;
    border-radius: .5rem;
    color: inherit;
    text-decoration: none;
}
@media (hover: hover) {
    .b-people a:hover { background: var(--color-cream-100, #f8f4eb); }
}
.b-people a:focus-visible,
.b-home-list a:focus-visible {
    outline: 3px solid var(--color-brick-500, #a03f39);
    outline-offset: 2px;
}
.b-people-name {
    display: block;
    font-weight: 600;
    color: var(--color-ink-900, #241c14);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.b-people-why {
    display: block;
    font-size: .8125rem;
    color: var(--color-ink-500, #5c4f3f);
    overflow-wrap: anywhere;
}
@media (pointer: coarse) {
    .b-home-list a { min-height: 2.75rem; }
}

/* ------------------------------------------- F158 install bar + sheet */

.b-install {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-bottom: 1.5rem;
    padding: .9rem 1rem;
    border-radius: .75rem;
    border: 1px solid var(--color-brass-400, #c9a45c);
    background: color-mix(in oklab, var(--color-brass-400, #c9a45c) 12%, var(--color-cream-50, #fdfbf6));
}
.b-install[hidden] {
    display: none;
}
.b-install-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .6rem;
    background: var(--color-ink-900, #241c14);
    color: var(--color-cream-50, #fdfbf6);
}
.b-install-text {
    flex: 1 1 16rem;
    min-width: 0;
    font-size: .9rem;
    color: var(--color-ink-700, #3d3226);
}
.b-install-text strong {
    color: var(--color-ink-900, #241c14);
}
.b-install-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.b-install-actions .btn-primary,
.b-install-actions .btn-outline {
    min-height: 2.75rem;
}
.b-install-actions [hidden] {
    display: none;
}
.b-install-close {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-ink-700, #3d3226);
    cursor: pointer;
}
@media (hover: hover) {
    .b-install-close:hover { background: rgba(36, 28, 20, .08); }
}
.b-install-close:focus-visible {
    outline: 3px solid var(--color-brick-500, #a03f39);
    outline-offset: 2px;
}
.b-install-sheet {
    /* The site's reset zeroes every margin, which pins a dialog to the top
       left; put it back as a sheet at the bottom, clear of the home bar. */
    margin: auto auto max(1rem, env(safe-area-inset-bottom));
    width: min(26rem, calc(100vw - 2rem));
    border: 0;
    border-radius: 1rem;
    padding: 1.5rem;
    background: var(--color-cream-50, #fdfbf6);
    color: var(--color-ink-900, #241c14);
    box-shadow: 0 24px 60px -20px rgba(36, 28, 20, .6);
}
.b-install-sheet::backdrop {
    background: rgba(36, 28, 20, .55);
}
.b-install-sheet h2 {
    font-size: 1.15rem;
    font-weight: 600;
}
.b-install-sheet ol {
    margin: 1rem 0 1.25rem;
    padding-inline-start: 1.25rem;
    list-style: decimal;
    display: grid;
    gap: .6rem;
    font-size: .9rem;
    color: var(--color-ink-700, #3d3226);
}
.b-install-sheet .btn-primary {
    width: 100%;
    min-height: 2.75rem;
}
.b-share-glyph {
    display: inline-flex;
    vertical-align: -3px;
    color: #1d6fe0;
}

/* F158: the banner the app puts on a page it opens without signal. */
.b-offline-banner {
    position: sticky;
    top: 0;
    z-index: 60;
    padding: .6rem 1rem;
    background: var(--color-ink-900, #241c14);
    color: var(--color-cream-50, #fdfbf6);
    font-size: .875rem;
    text-align: center;
}

/* ------------------------------------------------- F063 mentoring page */

.b-mentor-ask > summary,
.b-mentor-profile > summary {
    list-style: none;
    cursor: pointer;
}
.b-mentor-ask > summary::-webkit-details-marker,
.b-mentor-profile > summary::-webkit-details-marker {
    display: none;
}
.b-mentor-ask > summary {
    justify-content: center;
    min-height: 2.75rem;
}
.b-mentor-profile {
    max-width: 44rem;
}
.b-mentor-profile > summary {
    font-family: var(--font-display, Georgia, serif);
}
.b-mentor-profile > summary:focus-visible,
.b-mentor-ask > summary:focus-visible {
    outline: 3px solid var(--color-brick-500, #a03f39);
    outline-offset: 2px;
}
.b-feedback {
    margin-top: .9rem;
    border-top: 1px solid var(--color-cream-300, #e3d7bd);
    padding-top: .9rem;
}
.b-feedback-set {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.b-rating {
    margin-top: .5rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .35rem;
    max-width: 28rem;
}
.b-rating-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: .3rem .2rem;
    border: 1px solid var(--color-cream-300, #e3d7bd);
    border-radius: .5rem;
    background: #fff;
    cursor: pointer;
    text-align: center;
}
.b-rating-num {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-ink-900, #241c14);
}
.b-rating-word {
    font-size: .75rem;
    color: var(--color-ink-500, #5c4f3f);
}
.b-seg-input:checked + .b-rating-label {
    background: var(--color-brick-600, #8c2f2b);
    border-color: var(--color-brick-600, #8c2f2b);
}
.b-seg-input:checked + .b-rating-label .b-rating-num,
.b-seg-input:checked + .b-rating-label .b-rating-word {
    color: var(--color-cream-50, #fdfbf6);
}
.b-seg-input:focus-visible + .b-rating-label {
    outline: 3px solid var(--color-brick-500, #a03f39);
    outline-offset: 2px;
}
@media (hover: hover) {
    .b-seg-input:not(:checked) + .b-rating-label:hover {
        background: var(--color-brick-50, #faf1f0);
    }
}

/* ---- events, volunteering and jobs (package C) ---- */
/* A button or link that must be a comfortable touch target (44px). */
.c-tap{min-height:2.75rem}

/* F050 - "How to join online", shown to attendees only. */
.c-join{border-inline-start:4px solid var(--color-ivy-700,#1f4d3a)}
.c-join-url{overflow-wrap:anywhere;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8125rem}
.c-ticket-join{border-inline-start:0;border-top:1px solid var(--color-cream-300,#e3d7bd);padding-top:1.25rem}

/* F055 - "Photos from this event" card on a past event page. */
.c-album{display:flex;flex-direction:column;overflow:hidden}
.c-album:focus-visible{outline:2px solid var(--color-brick-600,#8c2f2b);outline-offset:2px}
.c-album-cover{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--color-cream-200,#efe7d6)}
.c-album-body{display:flex;flex-direction:column;justify-content:center;gap:.25rem;padding:1.25rem;min-width:0}
.c-album-cta{margin-top:.5rem}
@media (min-width:40rem){
    .c-album{flex-direction:row;align-items:stretch}
    .c-album-cover{width:14rem;flex:0 0 14rem}
}

/* F069 - job board filter row. One column on phones, two on tablets, one row on desktops. */
.c-filter{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:end}
.c-filter-field,.c-filter-grow{min-width:0}
.c-filter .field-input{min-height:2.75rem}
.c-filter-actions{display:flex;flex-wrap:wrap;gap:.5rem}
@media (min-width:40rem){.c-filter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.c-filter{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto}}

/* F069 / F153 - a member's own items with their actions. */
.c-mine{min-width:0}
.c-mine-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .75rem}
.c-mine-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem}
/* Status pills on "my postings / my listings": the member area's one pill (review R2 L20). */
.c-mine-status{display:inline-flex;align-items:center;flex-shrink:0;padding:.125rem .625rem;border-radius:999px;font-size:.8125rem;font-weight:600;line-height:1.4;white-space:nowrap;background:var(--color-cream-200,#efe7d6);color:var(--color-ink-700,#3d3226)}
.c-mine-status-ok{background:#e3efe8;color:var(--color-ivy-700,#1f4d3a)}
.c-mine-status-wait{background:#f4ead3;color:var(--color-brass-600,#7a5c22)}
.c-mine-status-bad{background:var(--color-brick-100,#f3dedc);color:var(--color-brick-700,#742622)}

/* F153 - volunteer roles and shifts in the member area. */
.c-roles{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
@media (min-width:48rem){.c-roles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:72rem){.c-roles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.c-role{display:flex;flex-direction:column;min-width:0}
.c-role-kind{text-transform:uppercase;letter-spacing:.12em}
.c-role-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto;padding-top:1rem}
.c-skills{display:flex;flex-wrap:wrap;gap:.375rem;list-style:none;margin-inline-start:0;padding-inline-start:0}
.c-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem}
.c-facts > div{display:flex;flex-wrap:wrap;gap:.25rem .75rem}
.c-facts dt{min-width:4.5rem;font-weight:600;color:var(--color-ink-900,#241c14)}
.c-facts dd{margin:0;min-width:0;color:var(--color-ink-700,#3d3226);overflow-wrap:anywhere}
/* Board 435: the door screen for event volunteers. */
.c-door-count{margin-top:.5rem;font-weight:600;color:var(--color-ink-900,#241c14)}
.c-door-result{margin-bottom:1.25rem;border-radius:.75rem;padding:1rem 1.25rem;border:1px solid}
.c-door-result-title{font-size:1.125rem;font-weight:700;margin:0 0 .25rem}
.c-door-ok{background:#ecfdf3;border-color:#15803d;color:#14532d}
.c-door-warn{background:#fff7e6;border-color:#b45309;color:#78350f}
.c-door-bad{background:#fdecec;border-color:#b91c1c;color:#7f1d1d}
.c-door-forms{display:grid;gap:1rem}
@media (min-width:48rem){.c-door-forms{grid-template-columns:repeat(2,minmax(0,1fr))}}
.c-door-row{display:flex;gap:.5rem;margin-top:.25rem}
.c-door-row .field-input{flex:1;min-width:0}
.c-door-code{font-family:ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
.c-door-list{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.75rem}
.c-door-ticket{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;padding:1rem 1.25rem}

/* A destructive action asks first, without JavaScript: <details> opens the question. */
.c-confirm > summary{list-style:none;cursor:pointer}
.c-confirm > summary::-webkit-details-marker{display:none}
.c-confirm > summary:focus-visible{outline:2px solid var(--color-brick-600,#8c2f2b);outline-offset:2px}
.c-confirm[open] > summary{background:var(--color-cream-200,#efe7d6)}
.c-confirm-panel{margin-top:.5rem;padding:.75rem;border:1px solid var(--color-cream-300,#e3d7bd);border-radius:.5rem;background:var(--color-cream-100,#f8f4eb);max-width:22rem}
.c-confirm-panel p{margin:0 0 .5rem;color:var(--color-ink-700,#3d3226)}
.c-danger{background-color:var(--color-brick-700,#742622);border-color:var(--color-brick-700,#742622)}

/* ---- giving, receipts and email preferences (package D) ---- */
/* ---- Receipt page (F084): /receipts/{gift}/{sig} ------------------------ */
.d-receipt-wrap { padding-top: 2.5rem; padding-bottom: 3rem; }
.d-receipt { max-width: 46rem; margin: 0 auto; padding: 1.5rem; }
@media (min-width: 40rem) { .d-receipt { padding: 2.25rem 2.5rem; } }
.d-receipt-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.d-receipt-org { min-width: 0; flex: 1 1 16rem; }
.d-receipt-title { margin: .35rem 0 0; font-size: 1.6rem; line-height: 1.2; font-weight: 700; color: var(--color-ink-900, #241c14); overflow-wrap: anywhere; }
.d-receipt-no { white-space: nowrap; }
.d-receipt-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.d-receipt-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.d-receipt-muted { margin: .35rem 0 0; font-size: .875rem; color: var(--color-ink-500, #5c4f3f); }
.d-receipt-thanks { margin: 1.5rem 0 .5rem; font-size: 1.05rem; color: var(--color-ink-900, #241c14); }
.d-receipt-message { margin: 0 0 1rem; color: var(--color-ink-700, #3d3226); }
.d-receipt-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0; margin: 1.25rem 0 0; border-top: 1px solid var(--color-cream-300, #e3d7bd);
}
.d-receipt-cell { padding-block: .75rem .75rem; padding-inline: 0 .25rem; border-bottom: 1px solid var(--color-cream-300, #e3d7bd); min-width: 0; }
.d-receipt-cell-wide { grid-column: 1 / -1; }
.d-receipt-cell dt { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-500, #5c4f3f); }
.d-receipt-cell dd { margin: .2rem 0 0; color: var(--color-ink-900, #241c14); overflow-wrap: anywhere; }
.d-receipt-amount { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.d-receipt-pre { white-space: pre-line; }
.d-receipt-legal { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--color-ink-900, #241c14); font-size: .9rem; color: var(--color-ink-700, #3d3226); }
.d-receipt-legal p { margin: 0 0 .6rem; }
.d-receipt-note { margin: 1.5rem 0 0; font-size: .8rem; color: var(--color-ink-500, #5c4f3f); }
/* A voided receipt (board 438) says so in its title and first line, on paper too;
   a corrected one names the receipt it replaces. */
.d-receipt-void-mark { display: inline-block; margin-inline-start: .35rem; padding: 0 .4rem; border: 2px solid var(--color-brick-700, #742622); border-radius: .25rem; color: var(--color-brick-700, #742622); font-size: .9em; letter-spacing: .08em; }
.d-receipt-void { margin: 1.25rem 0 0; padding: .75rem 1rem; border: 2px solid var(--color-brick-700, #742622); border-radius: .5rem; background: var(--color-brick-50, #faf1f0); color: var(--color-ink-900, #241c14); }
.d-receipt-replaces { margin: 1.25rem 0 0; font-size: .95rem; color: var(--color-ink-700, #3d3226); }

/* On paper only the receipt: no site header, footer, cookie notice or buttons. */
@media print {
    body:has(.d-receipt) * { visibility: hidden; }
    body:has(.d-receipt) .d-receipt,
    body:has(.d-receipt) .d-receipt * { visibility: visible; }
    body:has(.d-receipt) .d-receipt { position: absolute; inset-inline-start: 0; top: 0; width: 100%; max-width: none; margin: 0; border: 0; box-shadow: none; }
    .d-no-print { display: none !important; }
}

/* ---- Email preference centre (F119): /email/preferences/{user} ---------- */
.d-prefs-wrap { padding-top: 2.5rem; padding-bottom: 3rem; }
.d-prefs { max-width: 44rem; margin: 1.5rem 0 0; padding: 1.5rem; }
@media (min-width: 40rem) { .d-prefs { padding: 2.25rem 2.5rem; } }
.d-prefs-status {
    margin: 1.25rem 0 0; padding: .75rem 1rem; border-radius: .5rem;
    background: var(--color-cream-100, #f8f4eb); border-inline-start: 4px solid var(--color-ivy-700, #1f4d3a);
    color: var(--color-ink-900, #241c14);
}
.d-prefs-list { margin: 1.5rem 0 0; padding: 0; border: 0; }
.d-prefs-group { margin: 0; padding: 1.1rem 0; border: 0; border-top: 1px solid var(--color-cream-300, #e3d7bd); min-width: 0; }
.d-prefs-group:last-child { border-bottom: 1px solid var(--color-cream-300, #e3d7bd); }
.d-prefs-group legend { float: left; float: inline-start; width: 100%; padding: 0; font-weight: 600; color: var(--color-ink-900, #241c14); }
.d-prefs-hint { clear: both; margin: .25rem 0 .75rem; font-size: .875rem; color: var(--color-ink-500, #5c4f3f); }
.d-prefs-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; clear: both; }
@media (min-width: 36rem) { .d-prefs-options { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.d-prefs-options-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 36rem) { .d-prefs-options-2 { grid-template-columns: repeat(2, minmax(0, 10rem)); } }
.d-prefs-option { position: relative; }
.d-prefs-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.d-prefs-option span {
    display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem .75rem;
    border: 1px solid var(--color-cream-300, #e3d7bd); border-radius: .5rem; background: #fff;
    font-size: .9rem; text-align: center; color: var(--color-ink-700, #3d3226); cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.d-prefs-option span:hover { border-color: var(--color-brick-300, #d29490); }
.d-prefs-option input:checked + span {
    border-color: var(--color-brick-600, #8c2f2b); background: var(--color-brick-50, #faf1f0);
    color: var(--color-brick-700, #742622); font-weight: 600;
}
.d-prefs-option input:focus-visible + span { outline: 3px solid var(--color-brick-600, #8c2f2b); outline-offset: 2px; }
.d-prefs-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.d-prefs-actions .btn-primary, .d-prefs-actions .btn-outline { min-height: 44px; }
.d-prefs-off { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px dashed var(--color-cream-300, #e3d7bd); }
.d-prefs-off p { margin: 0 0 .75rem; font-size: .875rem; color: var(--color-ink-500, #5c4f3f); }
.d-prefs-off .btn-outline { min-height: 44px; }

/* Buttons on the one-click unsubscribe page: a thumb-sized target on phones. */
.d-tap { min-height: 44px; }
.d-prefs-foot { margin: 1.5rem 0 0; font-size: .8rem; color: var(--color-ink-500, #5c4f3f); }

@media (prefers-reduced-motion: reduce) {
    .d-prefs-option span { transition: none; }
}

/* ---- member records (package E1) ---- */


/* ---- engagement, analytics and privacy (package E2) ---- */
/* ---------------------------------------------------------------
   F189 - cookie consent by category (partials/cookie-consent)
   Colours follow the site theme (--color-* from theme_styles()),
   with the packaged palette as the fallback.
   --------------------------------------------------------------- */
.e2-cc {
  position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 60;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.e2-cc[hidden] { display: none; }
.e2-cc-inner {
  pointer-events: auto;
  max-width: 72rem; margin: 0 auto; padding: 18px 20px;
  display: grid; gap: 14px 24px; grid-template-columns: 1fr;
  background: var(--color-ink-900, #241c14); color: var(--color-cream-50, #fbf8f1);
  border-top: 3px solid var(--color-brick-600, #9a3324); border-radius: 12px;
  box-shadow: 0 -2px 24px rgba(0, 0, 0, .28);
  max-height: calc(100vh - 24px); overflow-y: auto;
}
@media (min-width: 64rem) {
  .e2-cc-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .e2-cc-actions { grid-column: 1 / -1; }
}
.e2-cc-title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: inherit; }
.e2-cc-text { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--color-cream-200, #efe6d3); }
.e2-cc-more { color: var(--color-brass-400, #e0b94a); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.e2-cc-choices { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 10px; }
.e2-cc-legend {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.e2-cc-choice {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06);
  min-height: 44px;
}
.e2-cc-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.e2-cc-choice-text b { font-size: .95rem; font-weight: 600; }
.e2-cc-choice-text small { font-size: .82rem; line-height: 1.45; color: var(--color-cream-200, #efe6d3); }
.e2-cc-note { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--color-cream-300, #ddd0b3); }
/* Asked again because a kind of cookie was added (board 445): the reason stands apart from the intro (S3-FIX-4). */
.e2-cc-reask {
  margin: 10px 0 0; padding: 8px 12px; border-inline-start: 3px solid var(--color-brass-400, #e0b94a); border-radius: 6px;
  background: rgba(255, 255, 255, .08); font-size: .875rem; font-weight: 600; line-height: 1.45; color: var(--color-cream-50, #fbf8f1);
}

/* The switch: a real checkbox, drawn as a toggle. */
.e2-cc-switch {
  -webkit-appearance: none; appearance: none; flex: none; margin: 2px 0 0;
  width: 44px; height: 26px; border-radius: 999px; position: relative; cursor: pointer;
  background: rgba(255, 255, 255, .28); border: 1px solid rgba(255, 255, 255, .45);
  transition: background-color .15s ease;
}
.e2-cc-switch::after {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: transform .15s ease;
}
.e2-cc-switch:checked { background: var(--color-brick-600, #9a3324); border-color: var(--color-brick-600, #9a3324); }
.e2-cc-switch:checked::after { transform: translateX(18px); }
.e2-cc-switch:focus-visible { outline: 3px solid var(--color-brass-400, #e0b94a); outline-offset: 2px; }

.e2-cc-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.e2-cc-btn {
  flex: 1 1 auto; min-height: 44px; padding: 10px 18px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: .92rem; font-weight: 600; line-height: 1.2;
  border: 1px solid rgba(245, 241, 232, .55); background: transparent; color: var(--color-cream-50, #fbf8f1);
}
@media (min-width: 40rem) { .e2-cc-btn { flex: 0 0 auto; } }
.e2-cc-btn:hover { background: rgba(255, 255, 255, .08); }
.e2-cc-btn-primary { background: var(--color-brick-600, #9a3324); border-color: var(--color-brick-600, #9a3324); color: #fff; }
.e2-cc-btn-primary:hover { background: var(--color-brick-700, #7c2a1e); }
.e2-cc-btn:focus-visible, .e2-cc-more:focus-visible { outline: 3px solid var(--color-brass-400, #e0b94a); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .e2-cc-switch, .e2-cc-switch::after { transition: none; }
}
/* Phones (S3-FIX-5 m5): the first-visit banner covered 55% of an 844px screen.
   Tighter spacing, the two switches side by side under their names (each
   switch's longer description stays in its accessible name, and "How we use
   cookies" explains them), and the three answers on one row: about a third of
   the screen. Every control is still 44px. */
@media (max-width: 39.99rem) {
  .e2-cc { padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .e2-cc-inner { padding: 12px 14px; gap: 10px; }
  .e2-cc-title { margin: 0 0 2px; font-size: 1rem; }
  .e2-cc-text { font-size: .85rem; line-height: 1.45; }
  .e2-cc-choices { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 8px; }
  .e2-cc-choice { align-items: center; gap: 10px; padding: 8px 10px; }
  .e2-cc-choice-text small {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .e2-cc-note { grid-column: 1 / -1; font-size: .75rem; line-height: 1.4; }
  .e2-cc-actions { flex-wrap: nowrap; gap: 6px; }
  .e2-cc-btn { flex: 1 1 0; min-width: 0; padding: 6px 8px; font-size: .85rem; }
}

/* ---- community and content (package F) ---- */
/* ---------- Shared: focus, checkboxes, notices ---------- */
.f-topic:focus-visible,.f-action:focus-visible,.f-follow:focus-visible,.f-report-toggle:focus-visible,
.f-menu-toggle:focus-visible,.f-menu-item:focus-visible,.f-danger-toggle:focus-visible,.f-danger-button:focus-visible,
.f-lib-chip:focus-visible,.f-doc-card:focus-visible,.f-block a:focus-visible,.f-faq summary:focus-visible,.f-toc a:focus-visible{
  outline:2px solid var(--color-brick-500,#a03f39);outline-offset:2px}
.f-check{display:flex;align-items:center;gap:.55rem;min-height:2.25rem;font-size:.875rem;color:var(--color-ink-700,#3d3226);cursor:pointer}
.f-check input{flex:0 0 auto;width:1.1rem;height:1.1rem;accent-color:var(--color-brick-600,#8c2f2b)}
.f-check-lg{align-items:flex-start;font-size:1rem;line-height:1.5}
.f-check-lg input{margin-top:.2rem}
.f-notice{border:1px solid var(--color-brass-400,#c9a45c);border-inline-start-width:4px;border-radius:.5rem;background:var(--color-cream-50,#fdfbf6);padding:1rem 1.25rem}
.f-md-hint code,.f-post-body code{font-family:var(--font-mono,ui-monospace,monospace);font-size:.85em;background:var(--color-cream-200,#efe7d6);color:var(--color-ink-900,#241c14);padding:.05rem .3rem;border-radius:.25rem}

/* ---------- Forum rooms (F142) ---------- */
.f-room-tools{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}
.f-search{display:flex;gap:.5rem;align-items:stretch}
.f-search .field-input{flex:1 1 auto;min-width:0;min-height:2.75rem}
.f-search .btn-outline{flex:0 0 auto;min-height:2.75rem}
.f-topics{display:flex;flex-wrap:wrap;gap:.5rem}
.f-topic{display:inline-flex;align-items:center;min-height:2.25rem;padding:.25rem .9rem;border:1px solid var(--color-cream-300,#e3d7bd);border-radius:999px;
  background:var(--color-cream-50,#fdfbf6);color:var(--color-ink-700,#3d3226);font-size:.8125rem;font-weight:600;text-decoration:none}
.f-topic:hover{border-color:var(--color-brick-300,#d29490);color:var(--color-brick-700,#742622)}
.f-topic[aria-current="page"]{background:var(--color-brick-700,#742622);border-color:var(--color-brick-700,#742622);color:var(--color-cream-50,#fdfbf6)}
.f-topic-tag{display:inline-flex;align-items:center;padding:.05rem .5rem;border-radius:999px;background:var(--color-cream-200,#efe7d6);color:var(--color-ink-700,#3d3226);font-size:.75rem;font-weight:700;letter-spacing:.02em}
.f-chip-hidden{background:var(--color-brick-100,#f3dedc);color:var(--color-brick-700,#742622)}

/* ---------- A topic and its replies ---------- */
.f-thread-bar{margin-top:.85rem;display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem .75rem}
.f-follow,.f-menu-toggle{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:.35rem .9rem;border:1px solid var(--color-brick-600,#8c2f2b);border-radius:.375rem;
  background:transparent;color:var(--color-brick-700,#742622);font-size:.875rem;font-weight:600;cursor:pointer;list-style:none}
.f-follow svg{width:1rem;height:1rem;flex:0 0 auto}
.f-follow[aria-pressed="true"]{background:var(--color-brick-700,#742622);border-color:var(--color-brick-700,#742622);color:var(--color-cream-50,#fdfbf6)}
.f-follow:hover,.f-menu-toggle:hover{background:var(--color-brick-50,#faf1f0)}
.f-follow[aria-pressed="true"]:hover{background:var(--color-brick-900,#4a1c1a)}
.f-post-body{color:var(--color-ink-700,#3d3226);line-height:1.65;overflow-wrap:anywhere}
.f-post-body>*+*{margin-top:.75rem}
.f-post-body p{margin:0}
.f-post-body ul{list-style:disc;padding-inline-start:1.35rem}
.f-post-body ol{list-style:decimal;padding-inline-start:1.35rem}
.f-post-body li+li{margin-top:.2rem}
.f-post-body blockquote{margin:0;border-inline-start:3px solid var(--color-brass-400,#c9a45c);padding-block: .35rem .35rem; padding-inline: .85rem 0;background:var(--color-cream-100,#f8f4eb);color:var(--color-ink-700,#3d3226)}
.f-post-body a{color:var(--color-brick-700,#742622);text-decoration:underline}
.f-post-body strong,.f-post-body b{font-weight:700;color:var(--color-ink-900,#241c14)}
.f-post-body em,.f-post-body i{font-style:italic}
.f-post-body pre{white-space:pre-wrap;background:var(--color-cream-200,#efe7d6);padding:.75rem;border-radius:.375rem;font-size:.875em}
.f-post-body pre code{background:none;padding:0}
.f-post-body-sm{font-size:.875rem}
.f-post-image{display:inline-block;margin-top:.85rem;max-width:100%}
.f-post-image img{display:block;width:auto;max-width:100%;max-height:24rem;border-radius:.5rem;border:1px solid var(--color-cream-300,#e3d7bd);background:var(--color-cream-200,#efe7d6)}
.f-social{margin-top:.75rem}
.f-post-actions{margin-top:.75rem;display:flex;flex-wrap:wrap;align-items:flex-start;gap:.25rem .5rem;margin-inline-start:-.5rem}
.f-post-actions>form{display:inline-flex;margin:0}
.f-action{display:inline-flex;align-items:center;min-height:2.25rem;padding:.25rem .5rem;border:0;border-radius:.375rem;background:none;
  color:var(--color-ink-500,#5c4f3f);font-size:.8125rem;font-weight:600;text-decoration:none;cursor:pointer}
.f-action:hover{background:var(--color-cream-200,#efe7d6);color:var(--color-brick-700,#742622)}
.f-deleted{font-style:italic;font-size:.875rem;color:var(--color-ink-500,#5c4f3f)}
.f-post-hidden{border-style:dashed;border-color:var(--color-brick-300,#d29490);background:var(--color-cream-100,#f8f4eb)}

/* The report button (F144) and a rep's moderation menu (F029): disclosures, no script. */
.f-report,.f-menu{display:inline-block;max-width:100%}
.f-report[open],.f-menu[open]{flex-basis:100%;display:block}
.f-report-toggle{display:inline-flex;align-items:center;gap:.35rem;min-height:2.25rem;padding:.25rem .5rem;border-radius:.375rem;
  color:var(--color-ink-500,#5c4f3f);font-size:.8125rem;font-weight:600;cursor:pointer;list-style:none}
.f-report-toggle::-webkit-details-marker,.f-menu-toggle::-webkit-details-marker,.f-danger-toggle::-webkit-details-marker,.f-faq summary::-webkit-details-marker{display:none}
.f-report-toggle::marker,.f-menu-toggle::marker,.f-danger-toggle::marker{content:""}
.f-report-toggle svg{width:.9rem;height:.9rem;flex:0 0 auto}
.f-report-toggle:hover,.f-report[open] .f-report-toggle{background:var(--color-cream-200,#efe7d6);color:var(--color-brick-700,#742622)}
.f-report-panel,.f-menu-panel{margin-top:.5rem;max-width:28rem;display:grid;gap:.6rem;padding:1rem;border:1px solid var(--color-cream-300,#e3d7bd);border-radius:.5rem;
  background:var(--color-white,#fff);box-shadow:0 8px 24px rgba(36,28,20,.12);text-align:start}
.f-report-panel fieldset{border:0;margin:0;padding:0;min-width:0}
.f-report-legend{margin-bottom:.35rem;font-size:.875rem;font-weight:700;color:var(--color-ink-900,#241c14)}
.f-report-panel .btn-primary{justify-self:start}
.f-menu-panel{gap:.25rem;padding:.5rem}
.f-menu-note{padding:.25rem .5rem;font-size:.75rem;color:var(--color-ink-500,#5c4f3f)}
.f-menu-panel form{margin:0}
.f-menu-item{display:flex;width:100%;align-items:center;min-height:2.5rem;padding:.4rem .6rem;border:0;border-radius:.375rem;background:none;
  color:var(--color-ink-900,#241c14);font-size:.875rem;text-align:start;cursor:pointer}
.f-menu-item:hover{background:var(--color-cream-200,#efe7d6);color:var(--color-brick-700,#742622)}

/* Editing your own post: the delete step. */
.f-edit-image{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
.f-edit-image img{max-height:8rem;width:auto;max-width:100%;border-radius:.375rem;border:1px solid var(--color-cream-300,#e3d7bd)}
.f-danger{border:1px solid var(--color-brick-200,#e5bcb8);border-radius:.5rem;background:var(--color-cream-50,#fdfbf6)}
.f-danger-toggle{display:flex;align-items:center;min-height:2.75rem;padding:.6rem 1.25rem;font-weight:600;color:var(--color-brick-700,#742622);cursor:pointer;list-style:none}
.f-danger-body{padding:0 1.25rem 1.25rem}
.f-danger-button{display:inline-flex;align-items:center;min-height:2.75rem;padding:.55rem 1.25rem;border:0;border-radius:.375rem;
  background:var(--color-brick-700,#742622);color:var(--color-cream-50,#fdfbf6);font-size:.875rem;font-weight:600;cursor:pointer}
.f-danger-button:hover{background:var(--color-brick-900,#4a1c1a)}

/* The batch roster (F029). */
.f-roster{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}
.f-roster-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.5rem 1.5rem;padding:1rem 1.25rem}
.f-roster-contact{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin:0;font-size:.875rem;min-width:0}
.f-roster-contact dd{margin:0;overflow-wrap:anywhere}

/* ---------- Document library (F130) ---------- */
.f-lib-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem 1rem;padding:1rem 1.25rem}
.f-lib-field{flex:1 1 10rem;min-width:0}
.f-lib-grow{flex:3 1 16rem}
.f-lib-field .field-input{min-height:2.75rem}
.f-lib-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.f-lib-actions .btn-primary,.f-lib-actions .btn-outline{min-height:2.75rem}
.f-lib-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.f-lib-chip{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:.35rem .9rem;border:1px solid var(--color-cream-300,#e3d7bd);border-radius:999px;
  background:var(--color-cream-50,#fdfbf6);color:var(--color-ink-700,#3d3226);font-size:.875rem;font-weight:600;text-decoration:none}
.f-lib-chip:hover{border-color:var(--color-brick-300,#d29490);color:var(--color-brick-700,#742622)}
.f-lib-chip[aria-current="page"]{background:var(--color-ink-900,#241c14);border-color:var(--color-ink-900,#241c14);color:var(--color-cream-50,#fdfbf6)}
.f-lib-count{display:inline-flex;min-width:1.5rem;justify-content:center;padding:0 .35rem;border-radius:999px;background:var(--color-cream-200,#efe7d6);color:var(--color-ink-700,#3d3226);font-size:.75rem}
.f-lib-chip[aria-current="page"] .f-lib-count{background:rgba(253,251,246,.2);color:var(--color-cream-50,#fdfbf6)}
.f-doc-card{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.25rem;text-decoration:none}
.f-doc-card:hover{border-color:var(--color-brick-300,#d29490)}
.f-doc-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.f-tag{display:inline-flex;align-items:center;padding:.1rem .55rem;border-radius:999px;background:var(--color-cream-200,#efe7d6);color:var(--color-ink-700,#3d3226);font-size:.75rem;font-weight:600}
.f-tag-link{min-height:2rem;text-decoration:none}
.f-tag-link:hover{background:var(--color-cream-300,#e3d7bd);color:var(--color-brick-700,#742622)}
.f-badge{display:inline-flex;align-items:center;padding:.1rem .55rem;border-radius:.25rem;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.f-badge-committee{background:#fbecc6;color:#6b4a0b}
.f-badge-public{background:#dcebe2;color:var(--color-ivy-700,#1f4d3a)}
.f-btn-note{font-weight:400;opacity:.9}

/* ---------- Page blocks (F128) ---------- */
.f-block{padding-block:2.5rem}
.f-page-cols .f-block,.f-page-narrow .f-block{padding-block:1.5rem}
.f-block>.section-title+*{margin-top:1.5rem}
.f-block-heading{margin-top:0!important}
.f-block-prose{margin-top:1rem}
.f-block-prose>:first-child{margin-top:0}
.f-page-blocks{padding-bottom:1rem}
.f-page-narrow{max-width:52rem;padding-block:1rem}
.f-page-cols{display:grid;gap:1.5rem 3rem;padding-block:1.5rem}
.f-page-main{min-width:0}
@media (min-width:64rem){
  .f-page-cols{grid-template-columns:minmax(0,1fr) 16rem}
  .f-toc{order:2;position:sticky;top:1.5rem;align-self:start}
}
.f-toc{border:1px solid var(--color-cream-300,#e3d7bd);border-radius:.5rem;background:var(--color-cream-50,#fdfbf6);padding:1rem 1.25rem}
.f-toc-title{font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-brass-600,#7a5c22)}
.f-toc ul{margin:.5rem 0 0;padding:0;list-style:none}
.f-toc li+li{margin-top:.15rem}
.f-toc a{display:flex;align-items:center;min-height:2.25rem;color:var(--color-ink-700,#3d3226);font-size:.9rem;text-decoration:none}
.f-toc a:hover{color:var(--color-brick-700,#742622);text-decoration:underline}
.f-imgtext{display:grid;gap:1.5rem 2.5rem;align-items:center}
@media (min-width:48rem){
  .f-imgtext{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .f-imgtext-right .f-imgtext-media{order:2}
  .f-imgtext-noimg{grid-template-columns:minmax(0,1fr)}
}
.f-imgtext-media{margin:0}
.f-imgtext-img{display:block;width:100%;height:auto;border-radius:.5rem;border:1px solid var(--color-cream-300,#e3d7bd)}
.f-imgtext-body{min-width:0}
.f-gallery{display:grid;gap:.75rem;margin:1.5rem 0 0;padding:0;list-style:none;grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr))}
@media (min-width:48rem){.f-gallery{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}}
.f-gallery-item{margin:0}
.f-gallery-link{display:block;border-radius:.5rem;overflow:hidden;background:var(--color-cream-200,#efe7d6)}
.f-gallery-img{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;transition:transform .2s ease}
.f-gallery-link:hover .f-gallery-img{transform:scale(1.03)}
.f-gallery-caption{margin-top:.5rem;font-size:.875rem;color:var(--color-ink-700,#3d3226)}
.f-people{display:grid;align-items:start;gap:1.5rem;margin:1.5rem 0 0;padding:0;list-style:none;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.f-faq{margin-top:1.5rem;border-top:1px solid var(--color-cream-300,#e3d7bd)}
.f-faq-item{border-bottom:1px solid var(--color-cream-300,#e3d7bd)}
.f-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem;padding:.75rem 0;cursor:pointer;list-style:none;
  font-weight:600;color:var(--color-ink-900,#241c14)}
.f-faq-item summary::after{content:"+";flex:0 0 auto;font-size:1.35rem;line-height:1;color:var(--color-brick-700,#742622)}
.f-faq-item[open] summary::after{content:"\2212"}
.f-faq-item summary:hover{color:var(--color-brick-700,#742622)}
.f-faq-answer{padding:0 0 1rem;color:var(--color-ink-700,#3d3226);line-height:1.65;max-width:48rem}
.f-embed{margin:1.5rem 0 0;max-width:56rem}
.f-embed-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:.5rem;overflow:hidden;background:var(--color-ink-900,#241c14)}
.f-embed-map{aspect-ratio:4/3;background:var(--color-cream-200,#efe7d6)}
@media (min-width:48rem){.f-embed-map{aspect-ratio:16/9}}
.f-embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.f-appeal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem;padding:1.5rem;border:1px solid var(--color-brass-400,#c9a45c);
  border-radius:.75rem;background:var(--color-cream-50,#fdfbf6)}
.f-appeal>.min-w-0{flex:1 1 20rem}
.f-appeal-button{min-height:2.75rem}
.f-cols{display:grid;gap:1.5rem 2.5rem;margin-top:1.5rem}
@media (min-width:48rem){.f-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.f-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Board 450: blocks inside a column - narrower spacing, image and text stacked. */
.f-col-blocks{margin-top:1rem}
.f-col-blocks .f-block{padding-block:1rem}
.f-col-blocks .f-block:first-child{padding-top:0}
.f-col-blocks .f-imgtext{grid-template-columns:minmax(0,1fr)}
.f-col-blocks .f-imgtext-right .f-imgtext-media{order:0}
.f-col-blocks .f-gallery{grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr))}
.f-col{min-width:0}
.f-preview-bar{background:var(--color-brass-400,#c9a45c);color:var(--color-ink-900,#241c14);font-size:.875rem}
.f-preview-inner{display:flex;flex-wrap:wrap;gap:.25rem .75rem;padding-block:.6rem}

@media (prefers-reduced-motion:reduce){.f-gallery-img{transition:none}.f-gallery-link:hover .f-gallery-img{transform:none}}

.f-person-link{display:inline-flex;align-items:center;margin-top:.5rem}

/* Touch layouts (and any narrow window): every package F control is at least 44px tall. */
@media (pointer:coarse),(max-width:47.99rem){
  .f-topic,.f-action,.f-report-toggle,.f-check,.f-follow,.f-menu-toggle,.f-menu-item,.f-lib-chip,.f-tag-link,.f-toc a,
  .f-tap,.f-person-link,.f-roster-row a{min-height:2.75rem}
  .f-person-link,.f-roster-row a,.f-tap-inline{display:inline-flex;align-items:center}
  .f-tap-inline{min-height:2.75rem}
  /* The homepage's own block types inside a page (their markup stays as on the homepage). */
  :is(.f-page-blocks,.f-page-cols,.f-page-narrow) :is(.btn,.btn-primary,.btn-outline,.btn-brass){min-height:2.75rem}
  :is(.f-page-blocks,.f-page-cols,.f-page-narrow) .section-title~a{display:inline-flex;align-items:center;min-height:2.75rem}
}

/* ---- Fix round 1 (26 Sep 2026) -------------------------------------------
   V8: classes instead of style="" attributes, so the pages need no
   'unsafe-inline' for styles. */
.u-wrap-anywhere{overflow-wrap:anywhere}
.u-font-inherit{font-family:inherit}
.u-progress{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;border:0;border-radius:9999px;overflow:hidden;background:var(--color-cream-200,#efe6d2);color:var(--color-brick-600,#8c2f2b)}
.u-progress::-webkit-progress-bar{background:var(--color-cream-200,#efe6d2);border-radius:9999px}
.u-progress::-webkit-progress-value{background:var(--color-brick-600,#8c2f2b);border-radius:9999px}
.u-progress::-moz-progress-bar{background:var(--color-brick-600,#8c2f2b);border-radius:9999px}

/* VP-12, V9, ADE1-10: 44px touch targets. The shared button and field tokens
   are 38-42px tall; on touch-size screens they get the full 44px, and a
   standalone text link can carry .u-tap. */
/* .u-tap itself: see "Fix round 2" below (touch layouts only). Fix round 2
   also gives a coarse pointer at any width (a tablet in landscape) these
   44px buttons and fields. */
@media (pointer:coarse),(max-width:63.99rem){
    .btn,.btn-primary,.btn-outline,.btn-brass{min-height:2.75rem}
    .field-input{min-height:2.75rem}
}
/* VP-10: the formatting hint's code samples no smaller than the hint (12px). */
.f-md-hint code{font-size:1em}
/* VP-08: the copyright keeps its own line below 64rem; the footer links wrap as
   whole items and the dot separators (meant for one line) are not shown, so no
   line starts with a lone dot. */
.site-bottom-bar{flex-direction:column;align-items:flex-start;justify-content:flex-start}
@media (min-width:64rem){.site-bottom-bar{flex-direction:row;align-items:center;justify-content:space-between}}
.site-bottom-links{display:flex;flex-wrap:wrap;align-items:center;column-gap:1.25rem;row-gap:0}
.site-bottom-links>[aria-hidden="true"]{display:none}
.site-bottom-links a{white-space:nowrap;display:inline-flex;align-items:center;min-height:2.75rem}
@media (min-width:64rem){.site-bottom-links a{min-height:0}}

/* ---- Fix round 2 (26 Sep 2026) -------------------------------------------
   VP-12: every standalone tap target is at least 44px tall on touch layouts
   (a coarse pointer, or any window under 64rem): back and "All ..." links,
   the link beside a section heading (not a card), chips, eyebrow links, the footer lists, checkbox
   and radio rows, the mentor-profile toggle. A link inside a sentence stays
   inline (WCAG 2.5.8's inline exception). A wide window with a mouse keeps
   the compact look. Measured on every public and member page at 390, 820
   and 1180 px with touch (research/improve/work-fix-r2/sweep_taps.py). */
@media (pointer:coarse),(max-width:63.99rem){
    .u-tap{display:inline-flex;align-items:center;min-height:2.75rem}
    .section-title+a:not(.card),a.chip,.eyebrow a{display:inline-flex;align-items:center;min-height:2.75rem}
    .site-footer-links>li{margin-block:0}
    .site-footer-links a{display:inline-flex;align-items:center;min-height:2.75rem}
    label:has(input[type=checkbox],input[type=radio]){min-height:2.75rem;min-width:2.75rem}
    .b-mentor-profile>summary{display:flex;flex-wrap:wrap;align-items:center;column-gap:.25rem;min-height:2.75rem}
}
/* The desktop header, footer bar and member bar on a touch screen of 64rem or
   more (a tablet in landscape): the same 44px. Under 64rem these are the
   mobile menu and the rules above. */
@media (pointer:coarse){
    .hdr-nav>a{padding-block:.75rem}
    .hdr-nav .cms-nav-link{display:inline-flex;align-items:center;min-height:2.75rem}
    .cms-dropdown-link{display:flex;align-items:center;min-height:2.75rem}
    .hdr-icon-btn{width:2.75rem;height:2.75rem}
    .hdr-acct-btn{min-width:2.75rem;min-height:2.75rem;justify-content:center}
    .hdr-pop-link{display:flex;align-items:center;min-height:2.75rem}
    .hdr-search-input{min-height:2.75rem;font-size:1rem}
    .hdr-search-go{width:2.75rem;height:2.75rem}
    .member-nav-row .member-nav-links a{min-height:2.75rem}
    .site-bottom-links a{min-height:2.75rem}
    /* A short footer link ("Contact", 41px) answers 44px wide through an invisible layer (S3-FIX-5 m5). */
    .site-bottom-links a{position:relative}
    .site-bottom-links a::before{content:"";position:absolute;top:50%;left:50%;width:max(100%,2.75rem);height:max(100%,2.75rem);transform:translate(-50%,-50%)}
}
/* The mobile menu (under 64rem, so always a touch layout): links, search box
   and Sign out at 44px. These styles were inline in layouts/site.blade.php;
   the search text is 16px so phones do not zoom the page when it is tapped,
   and the box shows a focus ring (the field itself has none). The ring and
   the search button take the primary colour (Settings > Theme & colors). */
#mobile-nav nav>a{display:flex;align-items:center;min-height:2.75rem}
.mnav-search{display:flex;align-items:center;gap:6px;margin-bottom:10px;background:#fff;border:1px solid #d9cfc0;border-radius:10px;padding:5px}
.mnav-search:focus-within{outline:2px solid var(--color-brick-600,#8c2f2b);outline-offset:2px}
.mnav-search-input{flex:1;min-width:0;min-height:2.75rem;border:0;outline:none;background:transparent;padding:9px 10px;font-size:1rem;color:#241c14}
.mnav-search-btn{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;flex-shrink:0;border:0;background:var(--color-brick-600,#8c2f2b);color:#fff;border-radius:7px;cursor:pointer}
.mnav-divider{height:1px;background:#e6dcc9;margin:6px 0}
.mnav-signout{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .5rem;background:transparent;border:0;cursor:pointer}

/* Board 470 - the error summary of a long form (partials/error-summary): after a failed
   submit, what to put right, each item a link to its field. Brick edge, focus ring when
   the page moves focus to it. */
.error-summary{margin:0 0 1.5rem;padding:1rem 1.25rem;border:1px solid var(--color-brick-300,#d29490);border-inline-start:4px solid var(--color-brick-700,#742622);border-radius:.5rem;background:var(--color-brick-50,#faf1f0);color:var(--color-ink-900,#241c14)}
.error-summary:focus{outline:3px solid var(--color-brick-500,#a03f39);outline-offset:2px}
.error-summary-title{margin:0;font-size:1rem;font-weight:700;color:var(--color-brick-700,#742622)}
.error-summary-list{margin:.5rem 0 0;padding-inline-start:1.25rem;list-style:disc;font-size:.9375rem}
.error-summary-list li+li{margin-top:.25rem}
.error-summary-list a{color:var(--color-brick-700,#742622);text-decoration:underline;text-underline-offset:2px}
@media (pointer:coarse),(max-width:63.99rem){.error-summary-list a{display:inline-flex;align-items:center;min-height:2.75rem}}

/* Board 462 - touch targets, one component at a time.
   Footer widgets (partials/footer-widgets): the link lists get the 44 px rows the site's
   own footer lists have; the social links (labels as short as "X") a 44 x 44 px area.
   Cookie banner: its "How we use cookies" link ends the text, so it gets an invisible
   44 px hit area; its buttons and switch rows are 44 px already.
   Short labels: a chip whose label is one short word ("All") is at least 44 px wide.
   Text and labels keep their size; only the area that answers a tap grows. */
@media (pointer:coarse),(max-width:63.99rem){
    .cms-footer-links{gap:0}
    .cms-footer-links a{display:inline-flex;align-items:center;min-height:2.75rem}
    .cms-social{gap:0 .75rem}
    .cms-social-link{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;min-width:2.75rem}
    .e2-cc-more{position:relative}
    .e2-cc-more::before{content:"";position:absolute;top:50%;left:50%;width:max(100%,2.75rem);height:max(100%,2.75rem);transform:translate(-50%,-50%)}
    a.chip{min-width:2.75rem;justify-content:center}
    .f-action{min-width:2.75rem;justify-content:center}
}

/* ---- CSP (sprint 4) -------------------------------------------------------
   The site's Content-Security-Policy refuses style="" attributes (no
   'unsafe-inline' for styles), so the last ones in the site and member views
   became these classes. Each repeats its old attribute exactly; they sit last
   and outside any layer, as the attribute did. */
.u-font-display{font-family:var(--font-display)}
.u-clamp-2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.u-badge-34{height:34px;width:34px;object-fit:contain}
.u-alert-error{border-color:#b91c1c66;color:#b91c1c}
.u-max-20r{max-width:20rem}
.u-max-28r{max-width:28rem}
.u-max-44r{max-width:44rem}
.u-flex-16r{flex:1 1 16rem;max-width:28rem}
.u-push-end{margin-top:auto;padding-top:.75rem}
.u-text-success{color:#15803d}
.u-outline-brick{border-color:var(--color-brick-700);color:var(--color-brick-700)}
.u-min-w-0{min-width:0}
/* mentoring requests: the status word in its colour */
.u-status{color:#6b7280}
.u-status-pending{color:#a16207}
.u-status-accepted{color:#1d4ed8}
.u-status-completed{color:#15803d}
/* survey questions */
.u-legend-full{float:left;width:100%}
.u-choice-list{clear:both;display:flex;flex-direction:column;gap:.45rem}
.u-choice{display:flex;align-items:flex-start;gap:.5rem}
.u-scale-list{clear:both;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.u-scale-choice{display:flex;flex-direction:column;align-items:center;gap:.25rem}
/* event ticket */
.u-ticket-card{max-width:26rem;margin:0 auto;text-align:center}
.u-center-row{display:flex;justify-content:center}
.u-qr-box{background:#fff;padding:14px;border-radius:12px;border:1px solid #e5dfd2;display:inline-block}
.u-ticket-code{letter-spacing:.25em;font-family:ui-monospace,monospace}
/* x-avatar (components/avatar): initials or a photo, sized by the size prop */
.av{border-radius:9999px}
.av-box{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:#efe6d3;color:#8c2f2b;font-family:var(--font-display);font-weight:700;line-height:1}
.av-box.av-dark{background:rgba(243,237,224,.1);color:#d9b25a}
.av-img{object-fit:cover}
.av.av-lg{border-radius:.5rem}
.av-s32{width:32px;height:32px;font-size:13px}
.av-s36{width:36px;height:36px;font-size:15px}
.av-s40{width:40px;height:40px;font-size:17px}
.av-s44{width:44px;height:44px;font-size:18px}
.av-s48{width:48px;height:48px;font-size:20px}
.av-s56{width:56px;height:56px;font-size:24px}
.av-s64{width:64px;height:64px;font-size:27px}
.av-s72{width:72px;height:72px;font-size:30px}
.av-s88{width:88px;height:88px;font-size:37px}
.av-s96{width:96px;height:96px;font-size:40px}