/* ==========================================================================
   CHE Alumni Connect — styles
   Tokens: Makiling green (primary), UP maroon (links/accent), narra gold (HEALS)
   ========================================================================== */
:root {
  --makiling: #0F3B2E;
  --makiling-2: #164837;
  --maroon: #7A1F2B;
  --gold: #B8892F;
  --gold-soft: #F1E6CC;

  --bg: #FFFFFF;
  --surface: #F3F6F4;
  --sage: #E4ECE6;
  --ink: #1B2420;
  --muted: #56655F;
  --line: #D3DDD7;
  --link: #7A1F2B;
  --btn-bg: #0F3B2E;
  --btn-fg: #FFFFFF;
  --field-bg: #FFFFFF;
  --focus: #D4A63A;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --wrap: 1200px;
  --r: 3px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1512; --surface: #131E1A; --sage: #1A2823; --ink: #E4EBE7; --muted: #9DAEA6;
    --line: #2A3A34; --link: #E8A3AD; --btn-bg: #9FD3BB; --btn-fg: #0D1512; --field-bg: #101A16;
    --gold-soft: #2E2716;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D1512; --surface: #131E1A; --sage: #1A2823; --ink: #E4EBE7; --muted: #9DAEA6;
  --line: #2A3A34; --link: #E8A3AD; --btn-bg: #9FD3BB; --btn-fg: #0D1512; --field-bg: #101A16;
  --gold-soft: #2E2716;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 1rem; line-height: 1.6;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
main:focus, [tabindex="-1"]:focus { outline: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3 { font-size: 1.35rem; font-weight: 500; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.prose { max-width: 66ch; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: 1rem; top: -3rem; z-index: 100; padding: .5rem 1rem;
  background: var(--gold); color: #1B2420; border: 0; font: inherit; font-weight: 600;
}
.skip:focus { top: .5rem; }

.site-header { background: var(--makiling); color: #fff; position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(255,255,255,.08); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.brand { display: flex; align-items: center; gap: .8rem; color: #fff; text-decoration: none; margin-right: auto; }
.brand-mark { width: 42px; height: 50px; flex: none; }
.brand-name { font-family: var(--serif); font-size: 1.45rem; line-height: 1; letter-spacing: -.01em; }

/* Logo lockup: CHE logo, CHE Alumni Association logo, divider, then the wordmark.
   Real files go at assets/img/che-logo.png and assets/img/che-alumni-logo.png —
   until they're there (or if one fails to load) a lettered badge fills in. */
.brand-logos { display: flex; align-items: center; gap: .6rem; flex: none; }
.logo-wrap { --logo-h: 40px; display: flex; align-items: center; justify-content: center; flex: none; }
.logo-wrap img { display: block; height: var(--logo-h); width: auto; max-width: 140px; object-fit: contain; }
.logo-fallback {
  display: grid; place-items: center; height: var(--logo-h); min-width: var(--logo-h); padding: 0 .5rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); border-radius: 4px;
  color: #fff; font: 700 .72rem/1 var(--sans); letter-spacing: .02em; white-space: nowrap;
}
.logo-fallback[hidden] { display: none; }
.brand-div { width: 1px; align-self: stretch; min-height: 30px; background: rgba(255,255,255,.3); flex: none; }
.footer-brand { display: flex; gap: .6rem; align-items: center; margin-bottom: 1rem; color: #fff; }
@media (max-width: 420px) {
  .brand-logos { gap: .4rem; }
  .logo-wrap { --logo-h: 32px !important; }
  .brand-div { min-height: 24px; }
}

.nav { display: flex; align-items: center; gap: .25rem; }
.nav a.nav-link {
  color: #fff; text-decoration: none; padding: .55rem .8rem; font-weight: 500; font-size: .95rem;
  border-bottom: 2px solid transparent;
}
.nav a.nav-link:hover { border-bottom-color: rgba(255,255,255,.5); }
.nav a.nav-link[aria-current="page"] { border-bottom-color: var(--gold); }
.nav-cta { margin-left: .75rem; }
.menu-toggle { display: none; background: none; color: #fff; border: 1px solid rgba(255,255,255,.35); padding: .45rem .8rem; font: inherit; border-radius: var(--r); cursor: pointer; }

.account { position: relative; margin-left: .75rem; }
.account-btn {
  display: flex; align-items: center; gap: .5rem; background: none; border: 1px solid rgba(255,255,255,.35);
  color: #fff; padding: .3rem .7rem .3rem .3rem; border-radius: 99px; font: inherit; cursor: pointer;
}
.account-btn .mono { width: 30px; height: 30px; font-size: .8rem; border-radius: 99px; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + .5rem); background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); min-width: 220px; padding: .4rem; box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.account-menu p { margin: .4rem .6rem .5rem; font-size: .8rem; color: var(--muted); word-break: break-all; }
.account-menu a, .account-menu button {
  display: block; width: 100%; text-align: left; padding: .5rem .6rem; color: var(--ink);
  text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: var(--surface); }
.account-menu a[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }
.account-btn[data-current] { border-color: var(--gold); }

@media (max-width: 1100px) {
  .menu-toggle { display: inline-block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--makiling);
    flex-direction: column; align-items: stretch; padding: .5rem 1rem 1rem; border-top: 1px solid rgba(255,255,255,.1);
  }
  .nav.open { display: flex; }
  .nav a.nav-link { border-bottom: 1px solid rgba(255,255,255,.08); padding: .8rem .2rem; }
  .nav a.nav-link[aria-current="page"] { border-bottom-color: var(--gold); }
  .nav-cta, .account { margin: .75rem 0 0; }
  .account-menu { position: static; margin-top: .5rem; box-shadow: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.25rem; border-radius: var(--r); border: 1px solid transparent;
  font: 600 .95rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { filter: brightness(1.12); }
.btn-light { background: #fff; color: var(--makiling); }
.btn-light:hover { background: #E9F1EC; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline-light:hover { border-color: #fff; }
.btn-gold { background: var(--gold); color: #1B2420; }
.btn-gold:hover { filter: brightness(1.08); }
.btn-small { padding: .45rem .85rem; font-size: .85rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.is-on { background: var(--sage); color: var(--ink); border-color: var(--line); }
.link-more { font-weight: 600; }

/* ---------- Contour art ---------- */
.contour { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Home hero ---------- */
.hero { position: relative; background: var(--makiling); color: #fff; overflow: hidden; }
.hero .contour { color: #BFE3D2; }
.hero-inner { position: relative; padding: clamp(3rem, 8vw, 6.5rem) 0 2.5rem; }
.hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.7rem); font-weight: 300; line-height: 1.04;
  max-width: 17ch; margin-bottom: 3rem; letter-spacing: -.02em;
}
.hero h1 b, .statement b { font-weight: 600; }

.hero-panel { border-top: 1px solid rgba(255,255,255,.25); padding-top: 1.25rem; }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.tablist { display: flex; flex-wrap: wrap; }
.tab {
  background: none; border: 0; color: #CFE0D8; font: 500 .95rem var(--sans); padding: .4rem .8rem .5rem 0;
  margin-right: 1rem; cursor: pointer; border-bottom: 2px solid transparent;
}
.tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--gold); }
.statement-wrap { display: grid; padding: 1.5rem 0 1rem; }
.statement-panel {
  grid-area: 1 / 1; align-self: start;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}
.statement-panel.active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .4s ease, transform .4s ease; }
.statement { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.2; max-width: 30ch; margin-bottom: 1.25rem; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; background: var(--makiling); color: #fff; overflow: hidden; }
.page-hero .contour { color: #BFE3D2; }
.page-hero-inner { position: relative; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); }
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 300; margin-bottom: .5rem; }
.page-hero p { color: #D6E4DD; max-width: 58ch; font-size: 1.1rem; margin: 0; }
.page-hero.gold { background: #2B2413; }
.page-hero.gold .contour { color: var(--gold); }

/* ---------- Sections ---------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section.tint { background: var(--surface); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { margin: .4rem 0 0; color: var(--muted); max-width: 60ch; }


/* Stories strip */
.stories { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 1.5rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; }
.story { scroll-snap-align: start; }
.story-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; color: #fff; display: flex; align-items: flex-end; padding: 1rem; margin-bottom: 1rem; }
.story-art .contour { color: #fff; }
.story-art .initials { position: relative; font-family: var(--serif); font-size: 4rem; line-height: .9; font-weight: 300; }
.story h3 { font-size: 1.3rem; margin-bottom: .2rem; }
.story .byline { font-size: .9rem; color: var(--muted); margin-bottom: .5rem; }
.story p { font-size: .95rem; }
.sample-tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .5rem; border: 1px solid var(--line); color: var(--muted); border-radius: 99px; vertical-align: middle; }

/* Glance */
.glance { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.glance-title { font-size: 1.15rem; margin-bottom: 1rem; }
.glance .bars li { grid-template-columns: minmax(8rem, 13rem) 1fr 2rem; }
@media (max-width: 800px) { .glance { grid-template-columns: 1fr; } }
.bars { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.bars li { display: grid; grid-template-columns: 11rem 1fr 2.5rem; gap: .8rem; align-items: center; font-size: .92rem; }
.bar { height: 10px; background: var(--sage); position: relative; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--makiling); }
:root[data-theme="dark"] .bar i { background: #9FD3BB; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bar i { background: #9FD3BB; } }
:root[data-theme="dark"] .role-badge.role-cheaa { color: #F1E6CC; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .role-badge.role-cheaa { color: #F1E6CC; } }
.bars .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

/* ---------- Home graduate total — before Alumni in the world ---------- */
.graduate-total-band {
  background: var(--makiling);
  color: #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.graduate-total-band::before,
.graduate-total-band::after {
  content: "";
  position: absolute;
  width: 28rem;
  height: 28rem;
  border: 1px solid rgba(191,227,210,.12);
  border-radius: 50%;
  pointer-events: none;
}
.graduate-total-band::before { top: -21rem; left: -8rem; }
.graduate-total-band::after { bottom: -22rem; right: -8rem; }
.graduate-total {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(3.5rem, 7vw, 6rem) 1rem;
}
.graduate-count {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(5.5rem, 14vw, 11rem);
  line-height: .84;
  font-weight: 700;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.12);
}
.graduate-count-label {
  margin: 1rem 0 .2rem;
  color: #fff;
  font: 700 clamp(1rem, 1.8vw, 1.3rem)/1.15 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.graduate-count-detail {
  margin: 0;
  color: rgba(255,255,255,.88);
  font: 500 clamp(.9rem, 1.4vw, 1.05rem)/1.3 var(--sans);
  letter-spacing: .04em;
}
@media (max-width: 600px) {
  .graduate-total { padding: 3rem 1rem 3.5rem; }
  .graduate-count { font-size: clamp(4.6rem, 21vw, 7rem); }
  .graduate-count-label { font-size: .95rem; }
  .graduate-count-detail { font-size: .9rem; }
}

/* ---------- Timeline
/* Timeline (a real sequence) */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; }
.timeline li { position: relative; padding: 2.2rem 1.5rem 0 0; border-top: 2px solid var(--line); }
.timeline li::before {
  counter-increment: step; content: counter(step); position: absolute; top: -1rem; left: 0;
  width: 2rem; height: 2rem; border-radius: 99px; background: var(--bg); border: 2px solid var(--makiling);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: var(--ink);
}
.timeline li.now::before { background: var(--makiling); color: #fff; }
.timeline .when { font-weight: 600; font-size: .9rem; color: var(--link); }
.timeline h3 { font-size: 1.2rem; margin: .2rem 0 .4rem; }
.timeline p { font-size: .92rem; color: var(--muted); }
@media (max-width: 800px) { .timeline { grid-template-columns: 1fr; } .timeline li { border-top: 0; border-left: 2px solid var(--line); padding: 0 0 1.75rem 2rem; } .timeline li::before { left: -1.05rem; top: 0; } }

.timeline.vertical { grid-template-columns: 1fr; margin-top: 1.5rem; }
.timeline.vertical li { border-top: 0; border-left: 2px solid var(--line); padding: 0 0 1.75rem 2rem; }
.timeline.vertical li::before { left: -1.05rem; top: 0; border-color: var(--gold); }

/* ---------- Testimonials ---------- */
.testi-stage { display: flex; align-items: stretch; justify-content: center; }
.testi-avatar {
  position: relative; width: 340px; height: 340px; flex: none; overflow: hidden;
  color: #fff; display: flex; align-items: flex-end; padding: 1.5rem;
}
.testi-avatar .contour { color: #fff; }
.testi-initials { position: relative; font-family: var(--serif); font-size: 5rem; font-weight: 300; line-height: 1; opacity: .9; }
.testi-avatar.in, .testi-card.in { animation: testiFade .4s ease both; }
@keyframes testiFade { from { opacity: 0; } to { opacity: 1; } }
.testi-card {
  position: relative; background: var(--bg); border: 1px solid var(--line);
  padding: 2rem 2.25rem; margin-left: -56px; margin-top: 2.5rem; margin-bottom: 2.5rem;
  max-width: 34rem; box-shadow: 0 14px 34px rgba(0,0,0,.12); z-index: 2;
}
.testi-card h3 { font-size: 1.6rem; margin-bottom: .25rem; }
.testi-title { color: var(--muted); font-size: .9rem; margin-bottom: 1.1rem; }
.testi-quote { font-family: var(--serif); font-size: 1.2rem; font-weight: 300; line-height: 1.5; color: var(--ink); margin-bottom: 1.5rem; }
.testi-social { display: flex; gap: .6rem; }
.testi-social a { width: 40px; height: 40px; border-radius: 99px; background: var(--makiling); color: #fff; display: grid; place-items: center; transition: background .15s; }
.testi-social a:hover { background: var(--maroon); }
.testi-nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2rem; }
.testi-arrow { width: 44px; height: 44px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.testi-arrow:hover { border-color: var(--ink); }
.testi-dots { display: flex; gap: .5rem; }
.testi-dots button { width: 10px; height: 10px; border-radius: 99px; border: 0; background: var(--line); padding: 0; cursor: pointer; }
.testi-dots button[aria-selected="true"] { background: var(--makiling); }
@media (max-width: 800px) {
  .testi-stage { flex-direction: column; align-items: center; }
  .testi-avatar { width: 100%; height: auto; aspect-ratio: 1; max-width: 420px; }
  .testi-card { margin-left: 0; margin-top: -2.5rem; width: calc(100% - 2rem); max-width: 420px; margin-bottom: 0; }
}

/* HEALS band */
.band { position: relative; background: #2B2413; color: #fff; overflow: hidden; }
.band .contour { color: var(--gold); }
.band-inner { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; padding: clamp(2.5rem, 6vw, 4rem) 0; }
.band h2 { font-weight: 300; margin-bottom: .5rem; }
.band p { color: #E6DCC4; max-width: 52ch; }
.band .explore { color: var(--gold); font-weight: 600; font-size: 1.1rem; text-decoration: none; justify-self: end; border-bottom: 1px solid var(--gold); padding-bottom: .2rem; }
.band .explore:hover { color: #fff; border-color: #fff; }
@media (max-width: 800px) { .band-inner { grid-template-columns: 1fr; } .band .explore { justify-self: start; } }

/* ---------- Footer ---------- */
.site-footer { background: #0A2C22; color: #C9D8D0; padding: 3.5rem 0 1.5rem; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 2.5rem; }
.site-footer h2 { font-size: 1.1rem; color: #fff; font-weight: 500; margin-bottom: .75rem; }
.site-footer a { color: #fff; }
/* Links sit under their heading: smaller, no underline, underline on hover. */
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.site-footer ul a, .footer-mail { color: #B9CCC3; text-decoration: none; font-size: .86rem; }
.site-footer ul a:hover, .footer-mail:hover { color: #fff; text-decoration: underline; }
.footer-sub { margin-top: 1.75rem; }
.footer-mail { display: inline-flex; align-items: center; gap: .5rem; }
.footer-mail svg { flex: none; color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.25rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Monogram ---------- */
.mono {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; color: #fff;
  font-family: var(--serif); font-size: 1.35rem; font-weight: 500; background: var(--makiling);
}

/* ---------- Forms ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; }
.grid2 .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } }
.field label, .fs-legend { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.req { color: var(--link); }
.field input, .field select, .field textarea, .rep-row input, .search input {
  width: 100%; font: inherit; color: var(--ink); background: var(--field-bg);
  border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .75rem;
}
.field textarea { resize: vertical; min-height: 5rem; }
.field input:focus, .field select:focus, .field textarea:focus, .rep-row input:focus, .search input:focus { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 0; }
.field input[readonly] { background: var(--surface); color: var(--muted); }
.hint { font-size: .82rem; color: var(--muted); margin: .3rem 0 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem 1.25rem; }
.check { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; line-height: 1.35; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; margin: .1rem 0 0; accent-color: var(--makiling); flex: none; }
.switch-row { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.switch-row strong { display: block; }
.switch-row span { font-size: .88rem; color: var(--muted); }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; background: var(--line); border-radius: 99px; transition: background .15s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 99px; background: #fff; transition: transform .15s; }
.switch input:checked + i { background: var(--makiling); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid var(--focus); outline-offset: 2px; }

.rep-row { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr) auto; gap: .5rem; margin-bottom: .5rem; }
.rep-row .remove { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: var(--r); padding: 0 .7rem; cursor: pointer; font: inherit; }
.rep-row .remove:hover { color: var(--link); border-color: var(--link); }
.rep-add { background: none; border: 1px dashed var(--line); color: var(--ink); padding: .5rem .9rem; border-radius: var(--r); cursor: pointer; font: 500 .9rem var(--sans); }
.rep-add:hover { border-color: var(--ink); }
@media (max-width: 700px) { .rep-row { grid-template-columns: 1fr auto; } .rep-row input { grid-column: 1; } .rep-row .remove { grid-column: 2; grid-row: 1 / span 3; } }


.notice { border-left: 3px solid var(--gold); background: var(--gold-soft); padding: .9rem 1.1rem; font-size: .93rem; margin: 0 0 1.5rem; }
.notice p:last-child { margin: 0; }

/* ---------- Profile editor ---------- */
.editor { display: grid; grid-template-columns: 240px 1fr; gap: clamp(2rem, 4vw, 3.5rem); padding-top: 2.5rem; padding-bottom: 4rem; }
.editor-nav { position: sticky; top: 92px; align-self: start; }
.editor-nav ul { list-style: none; margin: 1.25rem 0 0; padding: 0; border-left: 1px solid var(--line); }
.editor-nav button { background: none; border: 0; font: inherit; color: var(--ink); padding: .4rem .9rem; cursor: pointer; text-align: left; width: 100%; margin-left: -1px; border-left: 2px solid transparent; }
.editor-nav button:hover, .editor-nav button.active { border-left-color: var(--makiling); }
.meter { margin-top: .4rem; }
.meter-track { height: 8px; background: var(--sage); }
.meter-fill { height: 100%; background: var(--gold); transition: width .3s; }
.meter-label { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); }
.form-sec { padding: 0 0 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); scroll-margin-top: 92px; }
.form-sec h2 { font-size: 1.7rem; }
.form-sec > p.lede { color: var(--muted); margin-top: -.25rem; max-width: 62ch; }
.form-sec h3 { font-size: 1.1rem; margin: 1.75rem 0 .6rem; }
.savebar {
  position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 0; z-index: 5;
}
.savebar p { margin: 0; font-size: .88rem; color: var(--muted); }
@media (max-width: 900px) { .editor { grid-template-columns: 1fr; } .editor-nav { position: static; } .editor-nav ul { display: none; } }

/* Wizard */
.wizard { max-width: 760px; margin: 0 auto; padding: 2.5rem 0 4rem; }
.steps { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0 0 2rem; }
.steps li { flex: 1; font-size: .85rem; color: var(--muted); border-top: 4px solid var(--sage); padding-top: .5rem; }
.steps li.done { border-top-color: var(--makiling); color: var(--ink); }
.steps li.current { border-top-color: var(--gold); color: var(--ink); font-weight: 600; }
.wizard-actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }

/* ---------- Connect ---------- */
.connect { display: grid; grid-template-columns: 270px 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-top: 2.5rem; padding-bottom: 4rem; }
.filters { align-self: start; position: sticky; top: 92px; }
.filters .field { margin-bottom: 1rem; }
.filters fieldset { margin-bottom: 1rem; }
.filters .check { font-size: .9rem; margin-bottom: .35rem; }
.search { position: relative; margin-bottom: 1rem; }
.search input { padding: .85rem 1rem; font-size: 1.05rem; }
.results-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; flex-wrap: wrap; font-size: .92rem; color: var(--muted); }
.results-meta select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line); background: var(--field-bg); color: var(--ink); border-radius: var(--r); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.chip { font: 500 .85rem var(--sans); padding: .3rem .75rem; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--makiling); color: #fff; border-color: var(--makiling); }
.directory { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
.entry { border-top: 1px solid var(--line); }
.entry button { display: flex; gap: 1rem; width: 100%; text-align: left; background: none; border: 0; padding: 1.1rem 0; font: inherit; color: inherit; cursor: pointer; }
.entry button:hover .entry-name { text-decoration: underline; }
.entry-name { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; margin: 0 0 .15rem; }
.entry-meta { font-size: .88rem; color: var(--muted); margin: 0; }
.entry-work { font-size: .92rem; margin: .25rem 0 0; }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.tag { font-size: .75rem; padding: .08rem .5rem; background: var(--sage); border-radius: 99px; }
.empty { padding: 3rem 1rem; text-align: center; border: 1px dashed var(--line); color: var(--muted); }
.filter-toggle { display: none; }
@media (max-width: 900px) {
  .connect { grid-template-columns: 1fr; }
  .filters { position: static; display: none; border: 1px solid var(--line); padding: 1rem; }
  .filters.open { display: block; }
  .filter-toggle { display: inline-flex; margin-bottom: 1rem; }
  .directory { grid-template-columns: 1fr; }
}

/* ---------- Dialog ---------- */
.dialog { border: 0; padding: 0; max-width: 720px; width: calc(100% - 2rem); background: var(--bg); color: var(--ink); max-height: 90vh; }
.dialog::backdrop { background: rgba(8, 25, 19, .6); }
.dialog-head { position: relative; background: var(--makiling); color: #fff; padding: 1.75rem 1.75rem 1.5rem; overflow: hidden; display: flex; gap: 1.1rem; align-items: center; }
.dialog-head .contour { color: #BFE3D2; }
.dialog-head > :not(.contour) { position: relative; }
.dialog-head h2 { margin: 0; font-size: 1.9rem; font-weight: 400; }
.dialog-head p { margin: .2rem 0 0; color: #CFE0D8; font-size: .92rem; }
.dialog-head .mono { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); width: 72px; height: 72px; font-size: 1.8rem; }
.dialog-head.gold { background: #2B2413; }
.dialog-head.gold .contour { color: var(--gold); }
.dialog-head.gold p { color: #E6DCC4; }
.dialog-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.dialog-close { position: absolute; top: .75rem; right: .75rem; z-index: 2; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 36px; height: 36px; border-radius: 99px; font-size: 1.3rem; cursor: pointer; }
.dialog-body { padding: 1.5rem 1.75rem 1.75rem; }
.dl { display: grid; grid-template-columns: 11rem 1fr; gap: .55rem 1rem; margin: 0 0 1.25rem; }
.dl dt { font-weight: 600; font-size: .9rem; }
.dl dd { margin: 0; }
.dialog-body h3 { font-size: 1.1rem; margin-top: 1.25rem; }
.dialog-body ul { padding-left: 1.2rem; margin: 0 0 1rem; }
@media (max-width: 600px) { .dl { grid-template-columns: 1fr; gap: .1rem; } .dl dd { margin-bottom: .6rem; } }

/* ---------- Engage ---------- */
.events { list-style: none; margin: 0; padding: 0; }
.event-months { display: grid; gap: 0; }
/* Month on the left, that month's activities on the right. */
.event-month { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.event-month[hidden] { display: none; }
.event-month-label { font-size: 1.6rem; font-weight: 400; margin: 0; position: sticky; top: 92px; align-self: start; }
.event { display: grid; grid-template-columns: 1fr auto; gap: 1.25rem; padding: 0 0 1.25rem; align-items: start; }
.event + .event { border-top: 1px dashed var(--line); padding-top: 1.25rem; }
.event-when { font-weight: 600; font-size: .95rem; margin-bottom: .2rem !important; }
.event-when span { font-weight: 400; color: var(--muted); }
.event-tags { margin-bottom: .2rem !important; }
.event h4 { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; margin: 0 0 .25rem; }
@media (max-width: 700px) { .event-month { grid-template-columns: 1fr; gap: .75rem; } .event-month-label { position: static; } }
.event .where { font-size: .9rem; color: var(--muted); margin-bottom: .5rem; }
.event p { margin: 0; max-width: 62ch; }
.event-type { font-size: .8rem; font-weight: 600; color: var(--link); }
@media (max-width: 700px) { .event { grid-template-columns: 1fr; gap: .5rem; } }
.ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem; list-style: none; margin: 0; padding: 0; }
.way { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--line); }
.way h3 { font-size: 1.15rem; margin: 0 0 .15rem; }
.way p { margin: 0; font-size: .9rem; color: var(--muted); }
@media (max-width: 800px) { .ways { grid-template-columns: 1fr; } }

/* ---------- HEALS ---------- */
.cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2rem; }
.cats li { border-top: 1px solid var(--line); padding: 1.1rem 0; }
.cats h3 { font-size: 1.2rem; margin: 0 0 .25rem; }
.cats h3::before { content: ""; display: inline-block; width: .55rem; height: .55rem; background: var(--gold); margin-right: .55rem; transform: rotate(45deg) translateY(-2px); }
.cats p { margin: 0; font-size: .92rem; color: var(--muted); }
@media (max-width: 900px) { .cats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cats { grid-template-columns: 1fr; } }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.panel { border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 2rem); background: var(--bg); }

/* ---------- HEALS past-awardees accordion ---------- */
/* Ported from a hover/focus-expanding "image accordion" pattern: no real
   photos to show, so each panel uses the same contour + tone treatment as
   the testimonial and story cards elsewhere on the site. */
.awardee-accordion { display: flex; gap: .5rem; height: 420px; overflow: hidden; }
.awardee-panel {
  position: relative; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; border: 0;
  background: var(--tone); color: #fff; overflow: hidden; text-align: left; font: inherit;
  transition: flex-grow .5s cubic-bezier(.22, .61, .36, 1);
}
.awardee-panel.active { flex-grow: 7; }
.awardee-panel .contour { position: absolute; inset: 0; color: rgba(255, 255, 255, .3); }
/* With a photo: it fills the panel, with a dark fade at the bottom so the
   name and description stay readable. */
.awardee-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.awardee-panel.has-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,20,16,.88) 0%, rgba(10,20,16,.35) 45%, rgba(10,20,16,.05) 75%); pointer-events: none; }
.awardee-collapsed-label {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl; font-family: var(--serif); font-size: 1.05rem; white-space: nowrap;
  letter-spacing: .02em; transition: opacity .25s ease;
}
.awardee-panel.active .awardee-collapsed-label { opacity: 0; pointer-events: none; }
.awardee-info {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem; display: block;
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease .12s, transform .35s ease .12s;
}
.awardee-panel.active .awardee-info { opacity: 1; transform: none; }
.awardee-category { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); margin-bottom: .4rem; }
.awardee-name { display: block; font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; margin-bottom: .4rem; white-space: normal; }
.awardee-blurb { display: block; font-size: .9rem; color: rgba(255, 255, 255, .85); white-space: normal; }
/* An organization: its abbreviation as the name, the full name under it. */
.awardee-fullname { display: block; font-size: .95rem; font-weight: 600; color: rgba(255, 255, 255, .92); margin: -.15rem 0 .5rem; white-space: normal; }
/* The whole card is one button (opens it); the text sits above it and lets
   clicks through, except the Watch link. */
.awardee-hit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.awardee-hit:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.awardee-panel .awardee-info, .awardee-panel .awardee-collapsed-label { z-index: 2; pointer-events: none; }
.awardee-watch {
  pointer-events: auto; display: inline-flex; align-items: center; gap: .3rem; margin-top: .75rem; padding: .35rem .8rem;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; color: #fff; font-size: .82rem; font-weight: 600; text-decoration: none;
  background: rgba(10, 20, 16, .35); backdrop-filter: blur(4px);
}
.awardee-watch:hover, .awardee-watch:focus-visible { background: var(--gold); border-color: var(--gold); color: #1d1d1b; }
/* Video: fades in over the photo once it's actually playing. */
.awardee-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: 0; transition: opacity .6s ease; container-type: size; overflow: hidden; pointer-events: none; }
.awardee-panel.playing .awardee-video { opacity: 1; }
.awardee-video iframe { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78cqh); height: max(100%, 56.25cqw); transform: translate(-50%, -50%); border: 0; }
@media (max-width: 700px) {
  .awardee-accordion { flex-direction: column; height: auto; }
  .awardee-panel { flex: none; height: 64px; transition: height .5s cubic-bezier(.22, .61, .36, 1); }
  .awardee-panel.active { height: 280px; flex-grow: 0; }
  .awardee-collapsed-label { writing-mode: horizontal-tb; transform: none; left: 1.25rem; bottom: 50%; translate: 0 50%; }
}

/* ---------- My Profile dashboard ---------- */
.profile-dash-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
.profile-dash-top .meter { flex: 1 1 260px; max-width: 420px; }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.profile-stat { border: 1px solid var(--line); padding: 1.1rem 1.25rem; }
.profile-stat strong { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 400; margin-bottom: .2rem; }
.profile-stat span { font-size: .85rem; color: var(--muted); }
.vis-tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .02em; padding: .1rem .55rem; border-radius: 99px; margin-left: .6rem; vertical-align: middle; text-transform: none; }
.vis-tag.vis-public { background: var(--sage); color: var(--ink); }
.vis-tag.vis-alumni { background: #DCE7F2; color: #234A72; }
.vis-tag.vis-private { background: var(--gold-soft); color: #6b4a10; }
.profile-empty { color: var(--muted); font-style: italic; }
:root[data-theme="dark"] .vis-tag.vis-private { color: #F1E6CC; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vis-tag.vis-private { color: #F1E6CC; } }

/* ---------- Admin ---------- */
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.admin-toolbar input[type="search"] { flex: 1 1 260px; min-width: 200px; font: inherit; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--field-bg); color: var(--ink); }
.admin-toolbar select { font: inherit; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--field-bg); color: var(--ink); }
.admin-toolbar-spacer { flex: 1; }
.admin-collapsible { margin-bottom: 1.5rem; }
.admin-collapsible h3 { margin-top: 0; }
.admin-collapsible textarea { width: 100%; font: inherit; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--field-bg); color: var(--ink); resize: vertical; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .92rem; white-space: nowrap; }
.admin-table th, .admin-table td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--line); }
.admin-table th { background: var(--surface); font-weight: 600; position: sticky; top: 0; }
.admin-table tbody tr:hover { background: var(--surface); }
.admin-table td.empty { text-align: center; padding: 2.5rem 1rem; white-space: normal; color: var(--muted); }
.admin-row-actions { display: flex; gap: .5rem; }
.role-select { font: inherit; font-size: .85rem; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--field-bg); color: var(--ink); }
.role-badge { display: inline-block; font-size: .78rem; font-weight: 600; padding: .15rem .6rem; border-radius: 99px; }
.role-badge.role-alumni { background: var(--sage); color: var(--ink); }
.role-badge.role-cheaa { background: var(--gold-soft); color: #6b4a10; }
.role-badge.role-che { background: #DCE7F2; color: #234A72; }
.role-badge.role-admin { background: var(--maroon); color: #fff; }
.role-badge.role-cair { background: #E6DEF0; color: #4B2E73; }
.btn-danger { background: var(--maroon); color: #fff; border-color: var(--maroon); }
.csv-preview { font-size: .85rem; }
.csv-preview th, .csv-preview td { padding: .45rem .7rem; }

/* ---------- Sign in ---------- */
/* Fixed layout: the page is tall enough for either tab, so switching tabs
   never changes its height (the footer stays put), and the art panel is
   pinned at screen height so its pattern never rescales. The split
   background keeps the left side green below the pinned panel. */
.auth {
  display: grid; grid-template-columns: 1fr 1fr; align-items: start;
  min-height: max(calc(100vh - 76px), 960px);
  background: linear-gradient(to right, var(--makiling) 50%, var(--bg) 50%);
}
.auth-art {
  position: sticky; top: 76px; height: calc(100vh - 76px); min-height: 520px;
  background: var(--makiling); color: #fff; overflow: hidden; padding: clamp(2rem, 6vw, 5rem);
  display: flex; flex-direction: column; justify-content: flex-start;
}
.auth-art .contour { color: #BFE3D2; }
.auth-art > :not(.contour) { position: relative; }
.auth-art h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 300; max-width: 14ch; }
.auth-art p { color: #D6E4DD; max-width: 42ch; }
/* Top-aligned so the tabs stay put when the panel's content changes height. */
.auth-form { padding: clamp(2rem, 6vw, 5rem); display: flex; flex-direction: column; justify-content: flex-start; width: 100%; max-width: 560px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 1.75rem; }
.seg button { background: none; border: 0; padding: .55rem 1.1rem; font: 600 .92rem var(--sans); color: var(--muted); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--makiling); color: #fff; }
.stack { display: grid; gap: 1rem; }
.divider { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; margin: 1.25rem 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-google { background: var(--maroon); color: #fff; border: 1px solid var(--maroon); width: 100%; box-shadow: 0 4px 14px rgba(122,31,43,.25); }
.btn-google:hover { filter: brightness(1.12); }
.btn-google .sunflower { flex: none; transition: transform .4s ease; }
.btn-google:hover .sunflower { transform: rotate(30deg); }
.btn-signin { background: var(--maroon); color: #fff; border-color: rgba(255,255,255,.25); gap: .4rem; }
.btn-signin:hover { filter: brightness(1.15); }
.form-error { color: var(--link); font-size: .9rem; min-height: 1.2em; margin: 0; }
.textlink { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; min-height: 0; background: var(--bg); } .auth-art { position: relative; top: 0; height: auto; min-height: 260px; } }

/* ---------- Misc ---------- */
.cac-loader-wrap { min-height: 55vh; display: flex; align-items: center; justify-content: center; }
.cac-loader { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.cac-loader-ring {
  width: 72px; height: 72px; box-sizing: border-box; padding: 4px; border-radius: 99px;
  border: 1px dashed currentColor; display: flex; align-items: center; justify-content: center;
  color: var(--makiling); animation: cac-spin 1s linear infinite; transition: color .3s ease;
}
.cac-loader-ring-inner {
  width: 100%; height: 100%; box-sizing: border-box; border-radius: 99px; border: 4px dashed currentColor;
  display: flex; align-items: center; justify-content: center; animation: cac-spin 1s linear infinite;
}
.cac-loader-text { font: 700 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.cac-loader-dots { display: inline-block; width: 1.6em; text-align: left; color: var(--makiling); transition: color .3s ease; }
.cac-loader[data-phase="fetching"] .cac-loader-ring, .cac-loader[data-phase="fetching"] .cac-loader-dots { color: var(--makiling); }
.cac-loader[data-phase="loading"] .cac-loader-ring, .cac-loader[data-phase="loading"] .cac-loader-dots { color: var(--gold); }
.cac-loader[data-phase="updating"] .cac-loader-ring, .cac-loader[data-phase="updating"] .cac-loader-dots { color: var(--maroon); }
.cac-loader[data-phase="fixing"] .cac-loader-ring, .cac-loader[data-phase="fixing"] .cac-loader-dots { color: #465A34; }
@keyframes cac-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cac-loader-ring, .cac-loader-ring-inner { animation: none; } }
.gate { padding: 3.5rem 0 5rem; max-width: 620px; }
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 150%); z-index: 90;
  background: var(--ink); color: var(--bg); padding: .75rem 1.25rem; border-radius: var(--r);
  font-weight: 500; transition: transform .25s ease, opacity .25s ease; max-width: calc(100% - 2rem);
  opacity: 0; visibility: hidden;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast.error { background: var(--maroon); color: #fff; }

/* ---------- Theme switch ---------- */
/* Sun on the left, moon on the right; the thumb slides under the active
   icon, which is drawn on top of it. */
.theme-slot { display: flex; align-items: center; gap: .6rem; margin-left: .9rem; }
.theme-slot-label { display: none; color: #fff; font-weight: 500; font-size: .95rem; }
@media (max-width: 1100px) {
  .theme-slot { margin: .75rem 0 0; justify-content: space-between; padding: .5rem .2rem; }
  .theme-slot-label { display: inline; }
}
.theme-switch {
  position: relative; flex: none; width: 60px; height: 30px; padding: 0;
  border: 1px solid rgba(255,255,255,.35); border-radius: 99px; background: rgba(255,255,255,.12);
  cursor: pointer; transition: background .2s;
}
.theme-switch:hover { border-color: #fff; }
.theme-switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 99px;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s ease-out; z-index: 1;
}
.theme-switch[aria-checked="true"] .theme-switch-thumb { transform: translateX(30px); background: #D7E4DD; }
.theme-switch-icon { position: absolute; top: 0; bottom: 0; width: 28px; display: grid; place-items: center; z-index: 2; color: rgba(255,255,255,.7); transition: color .2s, transform .2s; }
.theme-switch-icon.sun { left: 0; }
.theme-switch-icon.moon { right: 0; }
.theme-switch[aria-checked="false"] .sun, .theme-switch[aria-checked="true"] .moon { color: var(--makiling); transform: scale(1.1); }

/* ---------- Profile form additions ---------- */
.other-input { margin-top: .5rem; }
.other-input[hidden] { display: none; }
.degree { border: 1px solid var(--line); padding: 1rem 1.1rem; margin-top: .9rem; }
.degree-legend { font-family: var(--serif); font-size: 1.15rem; padding: 0 .35rem; margin-left: -.35rem; }
.degree-toggle { margin-bottom: .25rem; }
.degree-fields { margin-top: .9rem; }
.degree-fields[hidden] { display: none; }
.degree-head { font-family: var(--sans); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1rem 0 .4rem; }
.chip-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-list:empty { display: none; }
.chip-item { display: inline-flex; align-items: center; gap: .25rem; background: var(--sage); border-radius: 99px; padding: .2rem .3rem .2rem .75rem; font-size: .88rem; max-width: 100%; }
.chip-item span { overflow-wrap: anywhere; }
.chip-item button { background: none; border: 0; color: var(--ink); font-size: 1.1rem; line-height: 1; width: 1.6rem; height: 1.6rem; border-radius: 99px; cursor: pointer; }
.chip-item button:hover { background: var(--line); }
.chip-entry { display: flex; gap: .5rem; }
.chip-entry input { flex: 1; min-width: 0; }
.check-link { font-weight: 600; }
.check-link[hidden] { display: none; }
.form-error { margin-top: .75rem; }

/* ---------- Privacy and consent ---------- */
.dpa {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.1rem;
  background: var(--sage); border-left: 4px solid var(--makiling); padding: 1.25rem 1.4rem; margin-bottom: 1.5rem;
}
.dpa-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 99px; background: var(--makiling); color: #fff; }
.dpa-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--makiling); margin: 0 0 .3rem; }
.dpa h3 { font-size: 1.3rem; margin: 0 0 .5rem; }
.dpa p { margin: 0 0 .6rem; font-size: .95rem; }
.dpa-gather { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .75rem 1rem; margin: .5rem 0 .75rem; font-size: .9rem; }
.dpa-gather p { margin: 0 0 .35rem; }
.dpa-gather ul { margin: 0; padding-left: 1.1rem; }
.dpa-rights summary { cursor: pointer; font-weight: 600; color: var(--link); }
.dpa-rights ul { margin: .6rem 0; padding-left: 1.2rem; font-size: .92rem; }
.dpa-rights li { margin-bottom: .25rem; }
:root[data-theme="dark"] .dpa-kicker { color: #9FD3BB; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dpa-kicker { color: #9FD3BB; } }
@media (max-width: 560px) { .dpa { grid-template-columns: 1fr; } }

.vis-title { margin-bottom: .5rem; }
.vis-wrap { overflow-x: auto; margin-top: .75rem; border: 1px solid var(--line); }
.vis-grid { width: 100%; border-collapse: collapse; }
.vis-grid th, .vis-grid td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: .93rem; }
.vis-grid tbody tr:last-child > * { border-bottom: 0; }
.vis-grid thead th { background: var(--surface); font-weight: 600; }
.vis-grid thead th:not(:first-child) { text-align: center; width: 8.5rem; }
.vis-grid th span { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); }
.vis-grid tbody th { font-weight: 600; }
.vis-cell { text-align: center !important; }
.vis-cell input { width: 1.25rem; height: 1.25rem; accent-color: var(--makiling); cursor: pointer; }
.vis-cell input:disabled { cursor: default; }
.vis-cell.vis-off { opacity: .35; }
.vis-fixed td { text-align: center; color: var(--muted); font-size: .85rem; }
.vis-summary { margin-top: 1rem; padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--line); font-size: .92rem; }
.vis-summary p { margin: 0 0 .35rem; font-weight: 600; }
.vis-summary ul { margin: 0; padding-left: 1.1rem; }
.consent-check { margin-top: 1.25rem; padding: 1rem 1.1rem; border: 2px solid var(--makiling); }
:root[data-theme="dark"] .consent-check, :root[data-theme="dark"] .dpa { border-color: #9FD3BB; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .consent-check, :root:not([data-theme="light"]) .dpa { border-color: #9FD3BB; } }

.editor-nav .privacy-pill {
  display: block; width: 100%; margin: 1.5rem 0 0; padding: .75rem .9rem; text-align: left; cursor: pointer;
  background: var(--sage); border: 0; border-left: 4px solid var(--makiling); color: var(--ink); font: inherit;
}
.editor-nav .privacy-pill strong { display: block; font-size: .9rem; }
.editor-nav .privacy-pill span { font-size: .8rem; color: var(--muted); }
.editor-nav .privacy-pill:hover { border-left-color: var(--gold); }

/* ---------- Publications ---------- */
.orcid-import { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.orcid-import .field { flex: 1 1 260px; }
.orcid-import .btn { margin-top: 1.75rem; }
[data-repeater="publicationsList"] .rep-row { grid-template-columns: 3fr 2fr .7fr 2fr auto; }
.pub-list { padding-left: 1.3rem; margin: 0 0 1rem; }
.pub-list li { margin-bottom: .4rem; }
.pre { white-space: pre-line; }
@media (max-width: 700px) { [data-repeater="publicationsList"] .rep-row { grid-template-columns: 1fr auto; } [data-repeater="publicationsList"] .rep-row .remove { grid-row: 1 / span 4; } }

/* ---------- Privacy grid groups ---------- */
.vis-grid .vis-group th, .vis-grid .vis-group td { background: var(--surface); }
.vis-grid .vis-sub th { font-weight: 500; padding-left: 2rem; }

/* ---------- Admin filters ---------- */
.admin-filters { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; margin: -.5rem 0 .75rem; }
.admin-filters label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.admin-filters select { font: inherit; font-size: .88rem; font-weight: 400; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--field-bg); color: var(--ink); max-width: 14rem; }
.admin-filters .textlink { font-size: .88rem; padding-bottom: .45rem; }

/* ---------- Home: alumni map ---------- */
.alumni-map { --map-sea: #F4F8F5; --map-land: #FFFFFF; --map-line: #2E6B55; --map-tint: #DDEBE3; position: relative; }
:root[data-theme="dark"] .alumni-map { --map-sea: #0B1311; --map-land: #111C18; --map-line: #6FB597; --map-tint: #1B3129; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .alumni-map { --map-sea: #0B1311; --map-land: #111C18; --map-line: #6FB597; --map-tint: #1B3129; } }
.alumni-map-canvas {
  height: 480px; background: var(--map-sea); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; z-index: 0;
  /* faint dot grid behind the outlines */
  background-image: radial-gradient(color-mix(in srgb, var(--map-line) 18%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
}
.alumni-map .leaflet-container { background-color: var(--map-sea); font-family: var(--sans); }
.alumni-map .map-country { fill: var(--map-land); fill-opacity: .92; stroke: var(--map-line); stroke-width: .7; stroke-opacity: .75; }
.alumni-map .map-country.has-alumni { fill: var(--map-tint); fill-opacity: 1; stroke-width: 1; stroke-opacity: 1; }
.alumni-map .map-pin-wrap { background: none; border: 0; }
.alumni-map .map-pin {
  position: relative; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--gold); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(15,59,46,.35); color: #1B2420; cursor: pointer;
}
.alumni-map .map-pin b { font: 700 .72rem/1 var(--sans); }
.alumni-map .map-pin::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gold);
  animation: map-pulse 2.6s ease-out infinite; pointer-events: none;
}
@keyframes map-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.1); opacity: 0; } }
.alumni-map .map-tip { font: .85rem/1.35 var(--sans); border-radius: 8px; border: 0; box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: .45rem .65rem; }
.alumni-map .leaflet-control-zoom { border: 0 !important; box-shadow: 0 2px 10px rgba(0,0,0,.12) !important; border-radius: 10px; overflow: hidden; }
.alumni-map .leaflet-control-zoom a { background: var(--bg); color: var(--ink); border-color: var(--line); }
.alumni-map .leaflet-control-attribution { background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--muted); font-size: .7rem; border-radius: 6px 0 0 0; }
.alumni-map .leaflet-control-attribution a { color: var(--muted); }
.alumni-map-views { position: absolute; top: 12px; left: 12px; z-index: 500; display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.alumni-map-views[hidden] { display: none; }
.alumni-map-views button { border: 0; background: none; color: var(--muted); font: 600 .8rem var(--sans); padding: .35rem .8rem; border-radius: 99px; cursor: pointer; }
.alumni-map-views button[aria-pressed="true"] { background: var(--makiling); color: #fff; }
.alumni-map-note { margin-top: .75rem; }
@media (max-width: 600px) { .alumni-map-canvas { height: 360px; } }

/* ---------- Nav dropdowns ---------- */
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; border-bottom: 2px solid transparent; color: #fff; font: 500 .95rem var(--sans); padding: .55rem .8rem; cursor: pointer; }
.nav-drop-btn:hover { border-bottom-color: rgba(255,255,255,.5); }
.nav-drop-btn[data-current] { border-bottom-color: var(--gold); }
.nav-drop-btn svg { transition: transform .15s; }
.nav-drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; left: 50%; top: calc(100% + .55rem); z-index: 50; width: 290px; padding: .45rem;
  background: var(--bg); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(15,59,46,.16);
  transform: translateX(-50%); animation: dd-in .14s ease-out;
}
@keyframes dd-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.nav-drop-menu[hidden] { display: none; }
.nav-drop-menu:not(:has(.dd-desc)) { width: 190px; }
.nav-drop-menu a { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background .12s; }
.nav-drop-menu a:hover, .nav-drop-menu a:focus-visible { background: var(--surface); }
.nav-drop-menu .dd-title { font-weight: 600; font-size: .92rem; }
.nav-drop-menu .dd-desc { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.nav-drop-menu a[aria-current="page"] { background: var(--sage); }
.nav-drop-menu a[aria-current="page"] .dd-title::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: .45rem; border-radius: 50%; background: var(--gold); vertical-align: middle; }
@media (max-width: 1100px) {
  .nav-drop-btn { width: 100%; justify-content: space-between; padding: .8rem .2rem; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-drop-btn[data-current] { border-bottom-color: var(--gold); }
  .nav-drop-menu { position: static; width: auto; transform: none; animation: none; box-shadow: none; border: 0; border-radius: 0; background: transparent; padding: 0 0 .25rem .75rem; }
  .nav-drop-menu a { color: #fff; }
  .nav-drop-menu .dd-desc { color: rgba(255,255,255,.65); }
  .nav-drop-menu a:hover, .nav-drop-menu a[aria-current="page"] { background: rgba(255,255,255,.08); }
}

/* ---------- Section tabs (Awards levels, Organizations) ---------- */
.subnav { background: var(--surface); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: .25rem; overflow-x: auto; }
.subnav a { padding: .8rem 1rem .7rem; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- Awards ---------- */
.award-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.award-level { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; border: 1px solid var(--line); border-top: 4px solid var(--gold); color: var(--ink); text-decoration: none; background: var(--bg); transition: box-shadow .15s, transform .15s; }
.award-level:hover { box-shadow: 0 10px 28px rgba(0,0,0,.1); transform: translateY(-2px); }
.award-level h2 { font-size: 1.5rem; margin: 0; }
.award-level p { color: var(--muted); margin: 0; flex: 1; }
.award-level-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.award-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; }
.award-card { border: 1px solid var(--line); padding: 1.4rem; background: var(--bg); }
.award-card h3 { margin-bottom: .35rem; }
.award-org { font-weight: 600; color: var(--muted); font-size: .9rem; }
@media (max-width: 800px) { .award-levels { grid-template-columns: 1fr; } }

/* ---------- Organizations ---------- */
.org-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.org-functions { padding-left: 1.2rem; }
.org-functions li { margin-bottom: .4rem; }
.officers { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.officers li { display: flex; gap: .8rem; align-items: center; }
.officers li > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.officers .mono { width: 44px; height: 44px; border-radius: 99px; font-size: .9rem; }
.org-editor { margin-top: 2rem; }
.org-editor .field { margin-bottom: 1rem; }
.officers-edit td { padding: .4rem; white-space: normal; }
.officers-edit input, .officers-edit select { width: 100%; min-width: 7rem; font: inherit; font-size: .88rem; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--field-bg); color: var(--ink); }
.officers-edit input.yr { min-width: 4.5rem; width: 4.5rem; }
.officers-edit .remove { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: var(--r); padding: .35rem .6rem; cursor: pointer; font: inherit; font-size: .85rem; }
@media (max-width: 800px) { .org-grid { grid-template-columns: 1fr; } }
.event[hidden] { display: none; }

/* Invisible bridge so the pointer can cross the gap into a hover menu. */
.nav-drop-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }

/* ---------- Officers: terms and hierarchy chart ---------- */
.term-title { margin-top: 2.5rem; }
.term-title span { font-family: var(--sans); font-size: 1rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.org-chart { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 1.5rem 0 .5rem; }
.org-level { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.25rem; width: 100%; }
/* connector from the level above: a short stem plus a bar across the level */
.org-level + .org-level::before { content: ''; position: absolute; top: -2rem; left: 50%; width: 2px; height: 1rem; background: var(--line); }
.org-level + .org-level .org-node::before { content: ''; position: absolute; top: -1rem; left: 50%; width: 2px; height: 1rem; background: var(--line); }
/* horizontal bar joining siblings: each card draws its share, reaching half the gap on each side */
.org-level + .org-level .org-node::after { content: ''; position: absolute; top: -1rem; left: -.625rem; right: -.625rem; height: 2px; background: var(--line); }
.org-level + .org-level .org-node:first-child::after { left: 50%; }
.org-level + .org-level .org-node:last-child::after { right: 50%; }
.org-level + .org-level .org-node:only-child::after { display: none; }
.org-node {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem;
  flex: 0 1 170px; min-width: 140px; max-width: 180px; padding: 1rem .75rem .9rem; background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 2px 10px rgba(15,59,46,.06);
}
.org-node .mono { width: 48px; height: 48px; border-radius: 99px; font-size: .95rem; margin-bottom: .35rem; }
.org-node strong { font-size: .95rem; line-height: 1.25; }
.org-node > span:not(.mono) { font-size: .82rem; color: var(--muted); }
.org-level:first-child .org-node { border-top: 3px solid var(--gold); }
.past-term { border: 1px solid var(--line); border-radius: 10px; padding: .75rem 1rem; margin-bottom: .75rem; }
.past-term summary { cursor: pointer; font-weight: 600; }
.term-block { border: 1px solid var(--line); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.term-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .75rem; }
.term-head label { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; }
.term-head input { font: inherit; font-size: .9rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--field-bg); color: var(--ink); }
.term-head .textlink { margin-left: auto; }
@media (max-width: 600px) { .org-node { flex-basis: 140px; } }

/* ---------- Sign in: find your record ---------- */
.record-search { display: flex; gap: .5rem; margin-top: 1rem; }
.record-search input { flex: 1; min-width: 0; font: inherit; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--field-bg); color: var(--ink); }
.record-list { list-style: none; margin: .5rem 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; max-height: 230px; overflow-y: auto; }
.record-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.record-list li:last-child { border-bottom: 0; }
.record-list li > span:first-child, .record-pick { display: flex; flex-direction: column; }
.record-claimed { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.record-pick { padding: .75rem 1rem; background: var(--surface); border-radius: 10px; margin: .75rem 0 1rem; }
.record-none { margin-top: 1rem; padding: 1rem; border: 1px dashed var(--line); border-radius: 10px; }
.record-none .btn { margin-top: .25rem; }

/* ---------- Admin: record reports ---------- */
.reports { margin-bottom: 1.5rem; }
.reports summary { cursor: pointer; }
.report-list { list-style: none; margin: .75rem 0 0; padding: 0; }
.report-list li { border-top: 1px solid var(--line); padding: .75rem 0; }
.report-list p { margin: 0 0 .3rem; }

/* ---------- Officers editor: ordering and advisers ---------- */
.drag-cell { white-space: nowrap; width: 1%; }
.drag-handle { cursor: grab; color: var(--muted); padding: 0 .35rem; letter-spacing: -2px; user-select: none; }
.move-btns button { background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); width: 1.6rem; height: 1.6rem; cursor: pointer; font-size: .8rem; }
.move-btns button:hover { color: var(--ink); border-color: var(--ink); }
.officer-row.dragging { opacity: .45; }
.org-advisers { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed var(--line); text-align: center; }
.org-advisers-label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; }
.org-advisers .org-node { border-style: dashed; }

/* ---------- Endowment ---------- */
.give-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.give-card { border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 12px; padding: 1.35rem; background: var(--bg); }
.gift-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.gift-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.gift-list li:last-child { border-bottom: 0; }
.gift-list li > div:first-child { display: flex; flex-direction: column; }
.gift-list li > div:first-child span { color: var(--muted); font-size: .92rem; }
.gift-meta { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
.gift-meta span { color: var(--muted); font-size: .85rem; }
/* Forms and documents: each row opens to show its details. */
.doc-list { border-top: 1px solid var(--line); }
.doc { border-bottom: 1px solid var(--line); }
.doc summary {
  display: grid; grid-template-columns: 1fr 4.5rem 9rem; gap: 1rem 1.5rem; align-items: center;
  padding: 1.1rem .25rem; cursor: pointer; list-style: none;
}
.doc summary::-webkit-details-marker { display: none; }
.doc-title { position: relative; padding-left: 1.6rem; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--link); line-height: 1.3; }
.doc-title::before {
  content: ''; position: absolute; left: .2rem; top: .45em; width: .55rem; height: .55rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s;
}
.doc[open] .doc-title::before { transform: rotate(45deg); top: .3em; }
.doc summary:hover .doc-title { text-decoration: underline; text-underline-offset: 3px; }
.doc-year { color: var(--muted); font-variant-numeric: tabular-nums; }
.doc-link.btn { background: var(--maroon); color: #fff; justify-self: end; }
.doc-link.btn:hover { filter: brightness(1.12); }
.doc-link.muted { justify-self: end; }
.doc-body { padding: 0 .25rem 1.25rem 1.85rem; max-width: 70ch; }
@media (max-width: 640px) {
  .doc summary { grid-template-columns: 1fr auto; row-gap: .2rem; }
  .doc-year { grid-column: 1; grid-row: 2; padding-left: 1.6rem; font-size: .9rem; }
  .doc-link.muted { font-size: .8rem; max-width: 6rem; text-align: right; }
  .doc-link { grid-column: 2; grid-row: 1 / span 2; }
}
.band-cta { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.75rem; border-radius: 14px; background: var(--sage); }
.band-cta h2 { margin-bottom: .35rem; }
.band-cta p { margin: 0; max-width: 60ch; }

/* ---------- On-page list editor ---------- */
.editor-strip { padding: 1.25rem 0 0; }
.list-editor { margin: 1rem 0 2rem; }
.le-row { border: 1px solid var(--line); border-radius: 10px; margin-bottom: .6rem; background: var(--bg); }
.le-row summary { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; cursor: pointer; font-weight: 600; }
.le-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-actions { display: flex; gap: .3rem; }
.le-actions button { background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font: 500 .8rem var(--sans); padding: .2rem .5rem; cursor: pointer; }
.le-actions button:hover { color: var(--ink); border-color: var(--ink); }
.le-fields { padding: 0 .9rem 1rem; }
.field .le-monthonly { display: flex; align-items: center; gap: .45rem; margin-top: .4rem; font-weight: 400; font-size: .85rem; }
.le-bar { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; }

/* ---------- Admin: inbox, statuses, activity log ---------- */
.count-badge { display: inline-block; vertical-align: middle; min-width: 1.4em; text-align: center; font-family: var(--sans); font-size: .78rem; font-weight: 700; line-height: 1.4; padding: .05rem .5rem; border-radius: 99px; background: var(--maroon); color: #fff; letter-spacing: 0; }
.inbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2rem; }
.inbox-col-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.inbox-col-head h2 { margin: 0; font-size: 1.5rem; }
.inbox-col-head select, .log-tools input, .log-tools select { font: inherit; font-size: .9rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--field-bg); color: var(--ink); }
.inbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.inbox-item { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; background: var(--bg); }
.inbox-item[hidden] { display: none; }
.inbox-item p { margin: 0 0 .4rem; }
.inbox-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .2rem; }
.inbox-note { background: var(--surface); border-radius: 8px; padding: .45rem .6rem; }
.status-badge { flex: none; font-size: .75rem; font-weight: 700; padding: .15rem .6rem; border-radius: 99px; white-space: nowrap; }
.status-badge.s-pending { background: var(--gold-soft); color: #6b4a10; }
.status-badge.s-for-consultation { background: #DCE7F2; color: #234A72; }
.status-badge.s-resolved { background: var(--sage); color: var(--makiling); }
.status-badge.s-declined { background: #F3DCDF; color: var(--maroon); }
.nom-notice { border: 2px solid var(--gold); border-radius: 14px; background: var(--gold-soft); padding: 1.25rem 1.4rem; margin-bottom: 2rem; }
.nom-notice h2 { font-size: 1.4rem; margin-bottom: .75rem; }
.nom-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.nom-list li + li { border-top: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); padding-top: 1rem; }
.nom-list p { margin: 0 0 .4rem; }
.nom-list input { width: 100%; font: inherit; font-size: .92rem; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--field-bg); color: var(--ink); margin: .25rem 0 .6rem; }
.nom-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.account-btn .count-badge { margin-left: -.1rem; }
:root[data-theme="dark"] .status-badge.s-pending { color: #F1E6CC; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .status-badge.s-pending { color: #F1E6CC; } }
.status-actions { display: grid; gap: .5rem; margin-top: .6rem; }
.status-actions input { font: inherit; font-size: .9rem; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--field-bg); color: var(--ink); }
.status-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.subnav .count-badge { margin-left: .3rem; font-size: .72rem; padding: .05rem .45rem; }
.online-box { border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.25rem; }
.online-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem 1.25rem; }
.online-list li { display: flex; align-items: center; gap: .6rem; }
.online-list li > span:last-child { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.online-dot { width: 10px; height: 10px; border-radius: 50%; background: #2FA36B; box-shadow: 0 0 0 3px rgba(47,163,107,.2); flex: none; }
.log-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.log-table td { white-space: normal; font-size: .86rem; vertical-align: top; }
.log-table tr[hidden] { display: none; }

/* ---------- Connect: view tabs ---------- */
.view-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; flex-wrap: wrap; }
.view-tabs button {
  background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  padding: .6rem .9rem .55rem; font: 600 .95rem var(--sans); color: var(--muted); cursor: pointer;
}
.view-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.view-tabs .n { font-size: .75rem; background: var(--sage); color: var(--ink); border-radius: 99px; padding: .05rem .45rem; margin-left: .2rem; }
.view-note { margin: -.25rem 0 1rem; }
.view-note[hidden] { display: none; }

/* ---------- Engage: discussion ---------- */
.discussion { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem 3rem; align-items: center; border-top: 3px solid var(--gold); padding-top: 2rem; }
.discussion h2 { margin-bottom: .6rem; }
.discussion-action { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
@media (max-width: 800px) { .discussion { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Phones and tablets (iOS, Android) ---------- */
/* Room for notches and the home indicator when installed to the home screen. */
.site-header { padding-top: env(safe-area-inset-top); }
.site-footer { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
.wrap { padding-left: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-left)); padding-right: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-right)); }
html { -webkit-tap-highlight-color: transparent; }
@media (max-width: 700px) {
  /* 16px text in fields stops iOS Safari from zooming in on focus. */
  input, select, textarea { font-size: 16px !important; }
  .section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .dialog { width: calc(100% - 1rem); max-height: 92vh; }
  .dialog-body { padding: 1.25rem; }
  .admin-toolbar input[type="search"] { flex-basis: 100%; }
  .admin-filters label { flex: 1 1 45%; }
  .admin-filters select { max-width: none; width: 100%; }
  .inbox-grid { grid-template-columns: 1fr; }
  .gift-list li { flex-direction: column; }
  .gift-meta { align-items: flex-start; text-align: left; }
  .band-cta { padding: 1.25rem; }
  .record-search { flex-direction: column; }
}
/* Comfortable tap targets on touch screens. */
@media (pointer: coarse) {
  .btn-small, .chip, .rep-add, .le-actions button, .move-btns button { min-height: 40px; }
  .nav a.nav-link, .nav-drop-btn, .nav-drop-menu a, .account-menu a, .account-menu button { min-height: 44px; }
  .check input, .vis-cell input { width: 1.35rem; height: 1.35rem; }
}

/* ---------- Soft-launch feedback button (remove with config.feedbackUrl) ---------- */
.feedback-fab {
  position: fixed; z-index: 60;
  right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .75rem 1.1rem;
  background: var(--gold); color: #1B2420; border-radius: 99px; text-decoration: none;
  font: 700 .92rem var(--sans); box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: opacity .25s ease, transform .25s ease;
}
.feedback-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.26); }
.feedback-fab.is-scrolling { opacity: .25; }
.feedback-fab.is-scrolling:hover, .feedback-fab:focus-visible { opacity: 1; }
@media (max-width: 520px) { .feedback-fab { padding: .7rem .95rem; font-size: .88rem; } }

/* ---------- Background save status (Admin page) ---------- */
.save-pill {
  position: fixed; z-index: 61; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .5rem; max-width: min(460px, calc(100vw - 9rem)); padding: .6rem 1rem;
  background: var(--ink); color: var(--bg); border-radius: 99px; font: 600 .88rem var(--sans); box-shadow: 0 6px 20px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.save-pill.show { opacity: 1; transform: none; pointer-events: auto; }
.save-pill.ok { background: var(--makiling); color: #fff; }
.save-pill.error { background: var(--maroon); color: #fff; border-radius: 14px; }
.save-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: save-spin .7s linear infinite; flex: none; }
@keyframes save-spin { to { transform: rotate(360deg); } }
.admin-table tr.just-saved td { animation: row-flash 1.6s ease-out; }
@keyframes row-flash { from { background: var(--gold-soft); } to { background: transparent; } }

/* ---------- Formatted text and on-page editing ---------- */
.rich > :first-child { margin-top: 0; }
.rich > :last-child { margin-bottom: 0; }
.rich p { margin: 0 0 .75em; }
.rich ul, .rich ol { margin: 0 0 .75em; padding-left: 1.3rem; }
.rich li { margin-bottom: .25em; }
.rich h3 { font-size: 1.2rem; margin: .5em 0 .35em; }
.rich a { color: inherit; text-decoration: underline; }
.page-lede { color: #D6E4DD; font-size: 1.1rem; max-width: 60ch; }
.page-lede .rich p, .page-lede > .cms-block > p { margin: 0 0 .5em; }
.section-head .cms-block { color: var(--muted); }
/* The selection steps: a numbered list styled as a timeline. */
.process-steps ol { list-style: none; counter-reset: step; padding: 0; margin: 1rem 0; }
.process-steps li { counter-increment: step; position: relative; padding: 0 0 1.1rem 3rem; }
.process-steps li::before { content: counter(step); position: absolute; left: 0; top: -.1rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--gold); color: #1B2420; font-weight: 700; display: grid; place-items: center; }
.process-steps li:not(:last-child)::after { content: ''; position: absolute; left: calc(1rem - 1px); top: 2.1rem; bottom: .2rem; width: 2px; background: var(--line); }
/* Editable text for Administrators and CAIR */
.cms-block { position: relative; }
.cms-edit {
  display: inline-flex; align-items: center; margin: .35rem 0 0; padding: .2rem .6rem; border-radius: 99px;
  border: 1px dashed currentColor; background: none; color: inherit; opacity: .65; font: 600 .75rem var(--sans); cursor: pointer;
}
.cms-edit:hover, .cms-edit:focus-visible { opacity: 1; }
.cms-block.editing { background: var(--bg); color: var(--ink); border-radius: 12px; padding: .75rem; box-shadow: 0 8px 28px rgba(0,0,0,.18); z-index: 5; }
.cms-bar { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }
.rte { border: 1px solid var(--line); border-radius: 10px; background: var(--field-bg); overflow: hidden; }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: .2rem; padding: .35rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.rte-toolbar button { min-width: 2rem; height: 2rem; padding: 0 .5rem; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ink); font: 600 .82rem var(--sans); cursor: pointer; }
.rte-toolbar button:hover, .rte-toolbar button:focus-visible { background: var(--bg); border-color: var(--line); }
.rte-area { min-height: 8rem; padding: .7rem .8rem; color: var(--ink); text-align: left; outline: none; overflow-wrap: anywhere; }
.rte-area.small { min-height: 5rem; }
.rte-area:focus { box-shadow: inset 0 0 0 2px var(--focus); }
.rte-area ul, .rte-area ol { padding-left: 1.3rem; }
.rte-area p { margin: 0 0 .6em; }
.rte-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }