/* ==========================================================================
   DLCF - application layer
   Loads after site.css and motion.css. Three jobs:
     1. Guarantee content is visible, whatever the motion layer is doing.
     2. Portraits, mobile behaviour and horizontal section rails.
     3. Chrome for the assistant, the analytics strip and the insight cards.
   Nothing here renames or removes anything defined earlier.
   ========================================================================== */

/* ---- 0. visibility guarantee -------------------------------------------
   An animation must never be the reason a reader cannot see the page. These
   four rules win the cascade outright so a stalled observer costs nothing. */
html.js-motion .reveal.in,
html.js-motion .reveal-l.in,
html.js-motion .reveal-r.in,
html.js-motion .reveal-s.in { opacity: 1 !important; transform: none !important; }
html.js-motion .stagger.in > * { opacity: 1 !important; transform: none !important; }
html.no-js .reveal, html.no-js .stagger > * { opacity: 1 !important; transform: none !important; }

/* Never let a rail child inherit the vertical stagger offset. */
html.js-motion .rail-track.in > * { opacity: 1 !important; transform: none !important; }

/* ---- 1. portraits ------------------------------------------------------- */
.avatar {
  position: relative;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--brand), var(--brand-dark));
  color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.avatar > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
}

.face-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 22px;
  margin-top: 8px;
}
.face { margin: 0; text-align: center; }
.face .avatar,
.avatar-xl {
  width: 100%; height: auto; aspect-ratio: 4 / 5;
  border-radius: 16px;
  font-size: 2.6rem; letter-spacing: .06em;
  box-shadow: 0 1px 2px rgba(10,24,44,.10), 0 14px 30px -18px rgba(10,24,44,.45);
  outline: 1px solid rgba(27,54,93,.16);
  outline-offset: 3px;
  transition: transform .38s cubic-bezier(.22,.75,.3,1), box-shadow .38s ease, outline-color .38s ease;
}
.face:hover .avatar-xl,
.face:focus-within .avatar-xl {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(10,24,44,.10), 0 26px 50px -22px rgba(10,24,44,.55);
  outline-color: var(--gold);
}
.face figcaption { margin-top: 12px; line-height: 1.35; }
.face figcaption strong { display: block; font-size: .97rem; color: var(--ink); }
.face figcaption span { display: block; font-size: .8rem; color: var(--ink-faint); margin-top: 2px; }

.person .avatar { width: 54px; height: 54px; border-radius: 14px; font-size: .92rem; }

/* Artwork beside a block of prose. */
.art-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: center; }
.art { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }

/* ---- 2. horizontal section rails ---------------------------------------
   A rail turns any grid into a swipeable row on small screens and an
   arrow-driven carousel on large ones. Content order never changes, so the
   markup stays readable and the keyboard still works. */
.rail { position: relative; }
.rail-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.rail-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.rail-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); font-size: 1rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}
.rail-btn:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-1px); }
.rail-btn:disabled { opacity: .32; cursor: default; }
.rail-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.rail-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding: 4px 2px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.rail-track > * { scroll-snap-align: start; min-width: 0; }
.rail-track::-webkit-scrollbar { height: 8px; }
.rail-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.rail-track::-webkit-scrollbar-thumb:hover { background: var(--brand-light); }

.rail-dots { display: none; gap: 6px; justify-content: center; margin-top: 4px; }
.rail-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line); transition: width .25s ease, background .25s ease;
}
.rail-dots i.on { width: 20px; background: var(--brand); }

.rail::after {
  content: ""; position: absolute; right: 0; bottom: 18px; width: 56px; top: 0;
  pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--paper));
  transition: opacity .25s ease;
}
.rail.more::after { opacity: 1; }
.section-alt .rail::after { background: linear-gradient(90deg, transparent, var(--paper-alt)); }

/* ---- 3. analytics strip ------------------------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.metric {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 20px 16px;
  position: relative; overflow: hidden;
}
.metric::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--brand), var(--gold));
}
.metric .m-label { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.metric .m-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; margin: 6px 0 2px; color: var(--ink); }
.metric .m-note { font-size: .82rem; color: var(--ink-soft); }
.metric .m-delta { font-size: .78rem; font-weight: 600; }
.metric .m-delta.up { color: #0f7a4a; }
.metric .m-delta.flat { color: var(--ink-faint); }

.spark { display: block; width: 100%; height: 40px; margin-top: 10px; }

.bars { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 62px; gap: 12px; align-items: center; font-size: .9rem; }
.bar-track { height: 10px; border-radius: 99px; background: var(--brand-light); overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 99px; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--gold));
  transition: width 1s cubic-bezier(.22,.75,.3,1);
}
.bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }

/* ---- 4. assistant ------------------------------------------------------- */
.ask-inline {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 18px;
}
.ask-chip {
  border: 1px solid var(--line); background: var(--paper);
  border-radius: 99px; padding: 8px 15px;
  font: inherit; font-size: .84rem; color: var(--ink-soft);
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.ask-chip::before { content: "\25C7"; color: var(--gold); font-size: .8em; }
.ask-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); transform: translateY(-1px); }
.ask-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.ai-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  height: 52px; padding: 0 20px 0 16px;
  border: 0; border-radius: 99px;
  background: linear-gradient(140deg, var(--brand), var(--brand-dark));
  color: #fff; font: inherit; font-weight: 600; font-size: .92rem;
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(19,41,74,.7);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(19,41,74,.8); }
.ai-fab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ai-fab .dot { width: 8px; height: 8px; border-radius: 50%; background: #8ec9f0; box-shadow: 0 0 0 0 rgba(142,201,240,.7); animation: aiPulse 2.4s infinite; }
@keyframes aiPulse { 70% { box-shadow: 0 0 0 9px rgba(142,201,240,0); } 100% { box-shadow: 0 0 0 0 rgba(142,201,240,0); } }

/* The assistant owns the bottom-right corner, so back-to-top sits above it. */
.to-top { bottom: 86px !important; }

.ai-panel {
  position: fixed; right: 20px; bottom: 84px; z-index: 71;
  width: min(392px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 120px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 70px -24px rgba(10,24,44,.5);
  display: none; flex-direction: column; overflow: hidden;
}
.ai-panel.open { display: flex; animation: aiIn .28s cubic-bezier(.22,.75,.3,1); }
@keyframes aiIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.ai-top {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px; border-bottom: 1px solid var(--line);
  background: linear-gradient(140deg, var(--brand), var(--brand-dark)); color: #fff;
}
.ai-top strong { font-size: .95rem; }
.ai-top small { display: block; font-size: .74rem; opacity: .78; font-weight: 400; }
.ai-top button {
  margin-left: auto; background: rgba(255,255,255,.16); border: 0; color: #fff;
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1;
}
.ai-log { flex: 1; overflow-y: auto; padding: 14px; display: grid; gap: 12px; align-content: start; }
.ai-msg { max-width: 92%; font-size: .9rem; line-height: 1.55; }
.ai-msg.me {
  justify-self: end; background: var(--brand); color: #fff;
  padding: 9px 13px; border-radius: 14px 14px 4px 14px;
}
.ai-msg.bot {
  justify-self: start; background: var(--paper-alt);
  border: 1px solid var(--line); color: var(--ink);
  padding: 11px 13px; border-radius: 14px 14px 14px 4px;
}
.ai-msg.bot p { margin: 0 0 8px; }
.ai-msg.bot p:last-child { margin: 0; }
.ai-msg.bot ul { margin: 4px 0 8px; padding-left: 18px; }
.ai-msg.bot li { margin-bottom: 3px; }
.ai-cite { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ai-cite a {
  font-size: .74rem; text-decoration: none;
  border: 1px solid var(--line); border-radius: 99px;
  padding: 3px 9px; color: var(--brand); background: var(--paper);
}
.ai-cite a:hover { background: var(--brand-light); }
.ai-act {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 9px; font-size: .8rem; font-weight: 600;
  background: var(--gold-light); border: 1px solid rgba(179,38,43,.3);
  color: #a63f0b; border-radius: 10px; padding: 7px 11px; text-decoration: none;
}
.ai-act:hover { background: #fce3d2; }
.ai-typing span {
  display: inline-block; width: 6px; height: 6px; margin-right: 3px;
  border-radius: 50%; background: var(--ink-faint); animation: aiBlink 1.2s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: .18s; }
.ai-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes aiBlink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

.ai-sugg { display: flex; gap: 6px; overflow-x: auto; padding: 0 14px 10px; }
.ai-sugg button {
  flex: 0 0 auto; font: inherit; font-size: .78rem;
  border: 1px solid var(--line); background: var(--paper);
  border-radius: 99px; padding: 6px 12px; cursor: pointer; color: var(--ink-soft); white-space: nowrap;
}
.ai-sugg button:hover { border-color: var(--brand); color: var(--brand); }

.ai-form { display: flex; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.ai-form input {
  flex: 1; min-width: 0; font: inherit; font-size: .9rem;
  border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; background: var(--paper);
}
.ai-form input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.ai-form button {
  border: 0; border-radius: 11px; padding: 0 15px;
  background: var(--brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.ai-note { padding: 0 14px 12px; font-size: .72rem; color: var(--ink-faint); }

/* ---- 5. insight card ---------------------------------------------------- */
.insight {
  border: 1px solid rgba(27,54,93,.22);
  background: linear-gradient(140deg, var(--brand-light), var(--paper) 70%);
  border-radius: var(--radius-lg);
  padding: 18px 20px; margin-top: 22px;
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
}
.insight .i-mark {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand), var(--brand-dark)); color: #fff; font-size: .95rem;
}
.insight h4 { margin: 0 0 4px; font-size: .95rem; }
.insight p { margin: 0; font-size: .89rem; color: var(--ink-soft); line-height: 1.6; }

/* ---- 6. mobile ---------------------------------------------------------
   Small screens are the primary target: most members reach this on a phone
   over mobile data. Everything below is about thumb reach and legibility. */
@media (max-width: 900px) {
  .art-split { grid-template-columns: 1fr; }
  .art-split .art { order: -1; }
}

@media (max-width: 720px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  .hero { padding: 60px 0 52px; }
  .hero h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); max-width: 22ch; }
  .hero p { font-size: 1.02rem; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }

  .page-head { padding: 38px 0 32px; }
  .section { padding: 46px 0; }
  .section-head { margin-bottom: 24px; }

  h1 { font-size: clamp(1.85rem, 7.6vw, 2.3rem); }
  h2 { font-size: clamp(1.4rem, 5.8vw, 1.75rem); }

  /* Grids become swipe rails so a phone never shows a single lonely card
     stacked twelve deep. */
  .rail-track { grid-auto-columns: 78%; gap: 14px; padding-bottom: 14px; }
  .rail-dots { display: flex; }
  .rail-nav { display: none; }
  .rail::after { display: none; }

  .face-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .face figcaption strong { font-size: .88rem; }

  .metrics { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .metric { padding: 15px 14px 12px; }
  .metric .m-value { font-size: 1.5rem; }

  .bar-row { grid-template-columns: 1fr; gap: 5px; }
  .bar-val { text-align: left; }

  /* Tap targets: nothing interactive smaller than 44px. */
  .site-header .nav a,
  .ask-chip,
  .btn { min-height: 44px; display: inline-flex; align-items: center; }

  /* Footer links are one per line, so they take the block form of the same
     rule. inline-flex here would run the whole column together. */
  .site-footer a { min-height: 44px; display: flex; align-items: center; }
  .site-footer .footer-bottom a { display: inline-flex; min-height: 44px; }

  .nav-toggle,
  .to-top,
  .rail-btn { min-width: 44px !important; min-height: 44px !important; }
  .site-footer li a { padding-block: 10px; }
  .ai-top button { width: 44px; height: 44px; }
  .ai-form input, .ai-form button { min-height: 44px; font-size: 16px; }
  .ai-sugg button { min-height: 40px; }

  .ai-fab { right: 12px; bottom: 12px; height: 48px; padding: 0 16px 0 13px; font-size: .88rem; }
  .ai-panel {
    right: 0; left: 0; bottom: 0;
    width: 100%; max-height: 86vh;
    border-radius: 18px 18px 0 0; border-bottom: 0;
  }
  .ai-panel.open { animation: aiUp .3s cubic-bezier(.22,.75,.3,1); }
  @keyframes aiUp { from { transform: translateY(100%); } }

  .to-top { bottom: 74px !important; right: 12px !important; }

  table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 420px) {
  .face-row { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .metrics { grid-template-columns: 1fr; }
  .rail-track { grid-auto-columns: 86%; }
}

/* Phones in landscape and short windows: stop the panel eating the screen. */
@media (max-height: 520px) {
  .ai-panel { max-height: 92vh; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-track { scroll-behavior: auto; }
  .ai-fab .dot { animation: none; }
  .face .avatar-xl { transition: none; }
  .bar-fill { transition: none; }
}

@media print {
  .ai-fab, .ai-panel, .to-top, .scroll-progress, .rail-nav { display: none !important; }
  .rail-track { display: block; overflow: visible; }
}

/* ---- 9. photo backdrops -------------------------------------------------
   Real photographs from the fellowship's own media folder, darkened at build
   time by tools/build_gallery.py so the headline stays legible on top. */
.hero.has-photo,
.page-head.has-photo {
  position: relative;
  background-color: var(--brand-dark);
  background-position: center 32%;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 0;
}
.hero.has-photo::before,
.page-head.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(19,41,74,.90), rgba(19,41,74,.62) 55%, rgba(17,24,39,.80));
}
.hero.has-photo > *,
.page-head.has-photo > * { position: relative; }
.page-head.has-photo { color: #fff; padding: 76px 0 64px; }
.page-head.has-photo h1 { color: #fff; }
.page-head.has-photo .lede,
.page-head.has-photo p { color: rgba(255,255,255,.88); }
.page-head.has-photo .eyebrow { color: #f0cd82; }

/* ---- 10. gallery -------------------------------------------------------- */
.album + .album { margin-top: 44px; }
.album-head { margin-bottom: 18px; }
.album-head h3 { margin-bottom: .3em; }
.album-head .muted { max-width: 62ch; margin: 0; }

.shot-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 14px;
}
.shot {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-alt);
  cursor: pointer;
  aspect-ratio: 4 / 3;
  min-height: 44px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 10px 24px rgba(19,41,74,.16); }
.shot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.shot-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: #fff;
  background: rgba(19,41,74,.34);
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.event-card { display: flex; flex-direction: column; }
.event-cover {
  position: relative;
  display: block;
  margin: -4px 0 18px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.event-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-cover span {
  position: absolute;
  left: 10px; bottom: 10px;
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(19,41,74,.88);
  color: #fff;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.link-arrow { font-weight: 600; }
.link-arrow::after { content: " \2192"; }
@media (max-width: 900px) {
  /* Standalone action links, not links inside a sentence, so they get a real
     tap target rather than the inline-text exception. */
  .link-arrow { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- 11. lightbox ------------------------------------------------------- */
html.lb-open, html.lb-open body { overflow: hidden; }
/* While the viewer is open the page chrome would otherwise sit on top of it. */
html.lb-open .ai-fab,
html.lb-open .ai-panel,
html.lb-open .to-top,
html.lb-open .scroll-progress,
html.lb-open .site-header { display: none !important; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: rgba(8,12,24,.975);
}
.lightbox[hidden] { display: none; }
.lb-stage { grid-column: 2; display: grid; place-items: center; max-height: 88vh; }
.lb-stage img,
.lb-stage video {
  max-width: 100%;
  max-height: 88vh;
  border-radius: 8px;
  display: block;
  background: #000;
}
.lb-close, .lb-prev, .lb-next {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.24); }
.lb-close:focus-visible, .lb-prev:focus-visible, .lb-next:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.lb-close { position: absolute; top: 16px; right: 16px; z-index: 2; }
.lb-prev { grid-column: 1; justify-self: start; }
.lb-next { grid-column: 3; justify-self: end; }
.lb-count {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  margin: 0;
  text-align: center;
  color: rgba(255,255,255,.72);
  font-size: .82rem;
}

@media (max-width: 640px) {
  .page-head.has-photo { padding: 56px 0 44px; }
  .shot-row { grid-auto-columns: minmax(160px, 68vw); }
  .lightbox { grid-template-columns: 44px 1fr 44px; padding: 12px; }
  .lb-close, .lb-prev, .lb-next { width: 44px; height: 44px; }
  .lb-stage img, .lb-stage video { max-height: 74vh; }
}

@media print {
  .lightbox { display: none !important; }
}

/* A one-character label like "X" leaves a tap target far under 44px wide,
   so footer links get a minimum width of their own. */
.site-footer .footer-grid > div > a { min-width: 44px; }

/* The published executives board, shown at its natural square aspect. */
.poster-shot {
  aspect-ratio: 1 / 1;
  max-width: 620px;
  width: 100%;
  border-radius: 16px;
}

/* ---- 12. form results ---------------------------------------------------
   A form that always says thank you is a form that hides its own failures. */
.form-note-busy { color: var(--ink-faint); }
.form-note-ok {
  color: #14603f;
  background: #eaf6ef;
  border: 1px solid #bfe0cd;
  border-radius: 10px;
  padding: 10px 13px;
}
.form-note-bad {
  color: #8c2b12;
  background: var(--gold-light);
  border: 1px solid rgba(179,38,43,.32);
  border-radius: 10px;
  padding: 10px 13px;
}

/* ---- 13. secretariat inbox ---------------------------------------------
   The portal bar styles .mini for a dark background. Inside a light panel it
   needs the opposite treatment, so the inbox scopes its own. */
#dlcf-inbox .mini,
.inbox-item .mini {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  min-height: 36px;
}
#dlcf-inbox .mini:hover,
.inbox-item .mini:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }
#dlcf-inbox .mini.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.inbox-item .mini.danger:hover { background: #fdeceb; border-color: #c0392b; color: #c0392b; }

.inbox-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 22px;
}
.inbox-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }

.inbox-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: start;
}
.inbox-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-lg, 14px);
  padding: 18px 20px;
}
.inbox-item.is-handled { border-left-color: var(--line); opacity: .72; }
.inbox-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.inbox-when { font-size: .8rem; color: var(--ink-faint); }
.inbox-item h3 { margin: 0 0 4px; font-size: 1.05rem; }
.inbox-contact { margin: 0 0 10px; font-size: .9rem; }
.inbox-msg {
  margin: 0 0 12px;
  font-size: .93rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.inbox-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0 0 14px;
  font-size: .86rem;
}
.inbox-meta dt { color: var(--ink-faint); }
.inbox-meta dd { margin: 0; overflow-wrap: anywhere; }
.inbox-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.inbox-actions .mini { text-decoration: none; display: inline-flex; align-items: center; }

/* Approving a membership form. The role sits beside the button rather than
   behind a dialog, because picking it wrong is the one mistake here that is
   awkward to undo from the member's side. */
.inbox-approve {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.inbox-approve .ed-help { flex: 1 0 100%; margin: 0 0 2px; }
.inbox-approve-role {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .8rem;
  color: var(--ink-faint);
}
.inbox-approve-role select {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
}
.inbox-approve .btn-sm {
  min-height: 38px;
  padding: 0 16px;
  font-size: .9rem;
}

.inbox-invite {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.inbox-invite strong { display: block; font-size: .92rem; }
.inbox-invite-url,
.inbox-issued-row input {
  width: 100%;
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-alt);
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: .78rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.inbox-issued {
  margin: 0 0 22px;
  padding: 16px 20px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-lg, 14px);
  background: var(--brand-light);
}
.inbox-issued h3 { margin: 0 0 4px; font-size: 1rem; }
.inbox-issued-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  margin-top: 12px;
}
.inbox-issued-row strong { grid-column: 1 / -1; font-size: .88rem; overflow-wrap: anywhere; }
.inbox-issued-row input { margin: 0; }

@media (max-width: 640px) {
  .inbox-list { grid-template-columns: 1fr; }
  #dlcf-inbox .mini, .inbox-item .mini { min-height: 44px; }
  .inbox-approve .btn-sm,
  .inbox-approve-role select { min-height: 44px; }
  .inbox-issued-row { grid-template-columns: 1fr; }
  .inbox-issued-row .mini { min-height: 44px; justify-self: start; }
}

/* ---- 13b. membership roster ---------------------------------------------
   Same reason as the inbox: portal.js styles .mini for the dark bar, and
   inside a light panel that is white text on white. */
#dlcf-members .mini {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  min-height: 34px;
}
#dlcf-members .mini:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }
#dlcf-members .mini.danger:hover { background: #fdeceb; border-color: #c0392b; color: #c0392b; }
#dlcf-members .btn-sm { min-height: 38px; padding: 0 16px; font-size: .9rem; }
.mem-actions { white-space: nowrap; }
.mem-actions .mini + .mini { margin-left: 6px; }
.mem-edit td { background: var(--paper-alt); padding: 18px 16px; }

/* Upload progress for a visitation report. The one place on this site where
   somebody may be pushing fifty megabytes up a mobile connection, and a bar
   that moves is the difference between waiting and giving up. */
.v-progress {
  height: 6px; margin-top: 14px;
  background: var(--line); border-radius: 999px; overflow: hidden;
}
.v-progress > div {
  height: 100%; width: 0;
  background: var(--brand);
  transition: width .2s linear;
}
.is-hidden-row { opacity: .55; }

/* ---- 13c. programmes ----------------------------------------------------- */
#dlcf-programmes .mini {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  min-height: 34px;
}
#dlcf-programmes .mini:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }
.prog-block { margin-bottom: 40px; }
.prog-block .pnl-head h3 { margin: 0; font-size: 1.05rem; }
.prog-docs { white-space: nowrap; }
.prog-docs .mini { text-decoration: none; display: inline-block; margin: 2px 4px 2px 0; }
.prog-docs .muted { font-size: .82rem; color: var(--ink-faint); }

/* ---- 13d. visitations (admin) -------------------------------------------- */
#dlcf-visits .mini {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  min-height: 34px;
}
#dlcf-visits .mini:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }
#dlcf-visits .mini.danger:hover { background: #fdeceb; border-color: #c0392b; color: #c0392b; }
#dlcf-visits a.mini { text-decoration: none; display: inline-flex; align-items: center; }
.vis-actions { white-space: nowrap; }
.vis-actions .mini + .mini { margin-left: 6px; }
.vis-notes { max-width: 280px; overflow-wrap: anywhere; }
.vis-edit td { background: var(--paper-alt); padding: 18px 16px; }
.vis-thumbs {
  display: grid; gap: 10px; margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.vis-thumb { margin: 0; }
.vis-thumb img, .vis-thumb video {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: 8px; background: var(--line);
}
.vis-thumb .mini { margin-top: 6px; width: 100%; }

@media (max-width: 640px) {
  #dlcf-visits .mini { min-height: 44px; }
  .vis-actions { white-space: normal; }
  .vis-actions .mini + .mini { margin-left: 0; margin-top: 6px; }
}

@media (max-width: 640px) {
  #dlcf-members .mini { min-height: 44px; }
  #dlcf-members .btn-sm { min-height: 44px; }
  #dlcf-programmes .mini { min-height: 44px; }
  .mem-actions .mini + .mini { margin-left: 0; margin-top: 6px; }
  .mem-actions { white-space: normal; }
}

/* ---- 14. unpublished resources ------------------------------------------   Listed so people know it is coming, but not dressed up as a working link. */
.card-pending { border-style: dashed; background: var(--paper-alt); }
.card-pending .card-icon { opacity: .5; }
.card-pending h3, .card-pending p { color: var(--ink-soft); }
.pending-flag {
  display: inline-block;
  margin: 6px 0 0 !important;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--gold-light);
  border: 1px solid rgba(179,38,43,.28);
  color: #8a3708 !important;
  font-size: .76rem;
  font-weight: 600;
}

/* Inbox counters are small integers, so they pair up on a phone instead of
   pushing the actual submissions two screens down. */
@media (max-width: 640px) {
  #dlcf-inbox .kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
  #dlcf-inbox .kpi { padding: 14px 15px; }
  #dlcf-inbox .kpi-value { font-size: 1.5rem; }
  #dlcf-inbox .kpi-note { font-size: .76rem; }
}

/* ---- social publishing (admin portal) --------------------------------- */
.social-creds p { margin: 0 0 6px; font-size: .92rem; }
.social-creds p:last-child { margin-bottom: 0; }

.social-picks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.social-pick {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 10px;
  font-size: .9rem; cursor: pointer;
}
.social-pick input { width: 17px; height: 17px; }

.social-queue { display: grid; gap: 14px; margin-top: 18px; }
.social-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.social-item .muted { font-size: .84rem; }

.social-results { margin: 10px 0 0; padding-left: 18px; font-size: .89rem; }
.social-results li { margin-bottom: 3px; }

.social-previews { display: grid; gap: 12px; margin-top: 12px; }
.social-preview {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  background: var(--paper-2, rgba(0,0,0,.02));
}
.social-preview h4 { margin: 0 0 8px; font-size: .95rem; display: flex; align-items: baseline; gap: 9px; }
.social-preview pre {
  margin: 0 0 10px; white-space: pre-wrap; word-break: break-word;
  font: inherit; font-size: .9rem; line-height: 1.5;
}
.social-count { font-size: .78rem; font-weight: 500; color: var(--ink-faint); }
.social-count.over { color: #b3261e; font-weight: 700; }

@media (max-width: 560px) {
  .social-head { flex-direction: column; }
  .social-preview p .btn { width: 100%; margin-bottom: 6px; }
}

/* ---- Website editor ------------------------------------------------------
   The Website tab in the admin portal. Laid out as a sidebar of sections and
   one panel of fields, so a long form never becomes one endless scroll. */
.ed-head h3 { margin: 0 0 4px; }
.ed-head p  { margin: 0 0 18px; color: var(--ink-faint); font-size: .92rem; max-width: 62ch; }

.ed-shell { display: grid; grid-template-columns: 210px 1fr; gap: 20px; align-items: start; }
@media (max-width: 820px) { .ed-shell { grid-template-columns: 1fr; } }

.ed-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
@media (max-width: 820px) {
  .ed-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}
.ed-nav-item {
  text-align: left; border: 0; background: none; cursor: pointer;
  padding: 11px 13px; border-radius: var(--radius); font: inherit;
  font-size: .92rem; color: var(--ink-soft); min-height: 44px;
}
.ed-nav-item:hover { background: var(--paper-alt); }
.ed-nav-item.is-on { background: var(--brand); color: #fff; font-weight: 600; }

.ed-panel { background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px; }
.ed-panel h4 { margin: 0 0 4px; font-size: 1.1rem; }
.ed-note { margin: 0 0 20px; color: var(--ink-faint); font-size: .88rem; max-width: 68ch; }

.ed-field { margin-bottom: 26px; }
.ed-label { display: flex; align-items: center; gap: 9px; font-weight: 600;
  font-size: .89rem; margin-bottom: 6px; color: var(--ink-soft); }
.ed-help { margin: 6px 0 0; font-size: .82rem; color: var(--ink-faint); }

.ed-input {
  width: 100%; padding: 11px 13px; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: .94rem; color: var(--ink); background: var(--paper);
}
.ed-input:focus { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light); }
textarea.ed-input { resize: vertical; line-height: 1.5; }

.ed-flag { font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 999px; }
.ed-flag-draft { background: var(--gold-light); color: #6b4e00; }
.ed-flag-live  { background: var(--brand-light); color: var(--brand-dark); }

.ed-table-wrap { overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--radius); }
.ed-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ed-table th { text-align: left; padding: 9px 10px; background: var(--paper-alt);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); white-space: nowrap; }
.ed-table td { padding: 5px 6px; border-top: 1px solid var(--line); }
.ed-table th.ed-wide { min-width: 240px; }
.ed-empty { color: var(--ink-faint); padding: 16px 10px; text-align: center; }

.ed-cell { width: 100%; min-width: 110px; padding: 9px 10px; min-height: 44px;
  border: 1px solid transparent; border-radius: 6px; font: inherit;
  font-size: .88rem; background: transparent; color: var(--ink); }
.ed-cell:focus { outline: none; background: var(--paper);
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }

.ed-row-add, .ed-row-del, .ed-reset, .ed-discard {
  border: 1px solid var(--line); background: var(--paper); cursor: pointer;
  border-radius: var(--radius); font: inherit; font-size: .84rem;
  padding: 10px 14px; min-height: 44px; color: var(--ink-soft);
}
.ed-row-add { margin-top: 10px; }
.ed-row-del { padding: 10px 12px; }
.ed-row-add:hover, .ed-reset:hover, .ed-discard:hover { border-color: var(--brand); color: var(--brand-dark); }
.ed-row-del:hover { border-color: #b3261e; color: #b3261e; }
.ed-reset { display: inline-block; margin-top: 10px; }

.ed-thumb { height: 44px; width: auto; border-radius: 6px; display: block;
  border: 1px solid var(--line); }

.ed-upload { margin-top: 18px; padding: 16px; background: var(--paper-alt);
  border-radius: var(--radius); }
.ed-upload input[type="file"] { margin-top: 10px; font-size: .86rem; min-height: 44px; }

/* Sticky, because it was not and that was the whole problem.

   The save button sat at the bottom of the panel. On a long section you type
   in a field near the top, the field says "Unsaved", and the only thing that
   can change that is somewhere below the fold. the secretariat reported exactly that:
   "it says unsaved". Now it follows you down the page, so the badge and the
   button that answers it are never separated. */
.ed-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 20px; padding: 18px 0 14px; border-top: 1px solid var(--line);
  position: sticky; bottom: 0; z-index: 5;
  background: var(--paper);
  box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, .35); }
.ed-bar .btn:disabled { opacity: .45; cursor: not-allowed; }
.ed-view { margin-left: auto; font-size: .88rem; min-height: 44px;
  display: inline-flex; align-items: center; }
.ed-nav-head { margin: 16px 0 4px; padding: 0 13px; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint);
  font-weight: 600; }
@media (max-width: 820px) { .ed-nav-head { width: 100%; margin: 10px 0 2px; } }

/* ---- Sign in ------------------------------------------------------------- */
.signin-wrap { min-height: 100vh; display: grid; place-items: center;
  padding: 32px 20px; background: var(--paper-alt); }
.signin-card { width: 100%; max-width: 430px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 30px; box-shadow: var(--shadow-lift, 0 10px 30px rgba(0,0,0,.07)); }
.signin-brand { display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink); margin-bottom: 26px; min-height: 44px; }
.signin-brand strong { display: block; font-size: 1.2rem; line-height: 1.05; }
.signin-brand em { display: block; font-style: normal; font-size: .78rem;
  color: var(--ink-faint); letter-spacing: .04em; }
.signin-card h1 { font-size: 1.5rem; margin: 0 0 6px; }
.signin-lede { margin: 0 0 22px; color: var(--ink-faint); font-size: .92rem; }
.signin-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
.signin-foot { margin: 22px 0 0; font-size: .86rem; color: var(--ink-faint);
  text-align: center; }
.signin-foot a { min-height: 44px; display: inline-flex; align-items: center; }

.field[hidden] { display: none; }

/* Website editor additions: row reorder, list cells, uploads, section search */
.ed-navwrap { display: flex; flex-direction: column; gap: 10px; }
.ed-find { min-height: 44px; }
.ed-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ed-view-page { margin-left: 0; font-size: .86rem; }
.ed-actions { white-space: nowrap; }
.ed-row-move { min-width: 40px; min-height: 44px; margin-right: 4px; border: 1px solid var(--line);
  background: var(--paper); border-radius: 8px; cursor: pointer; font: inherit; }
.ed-row-move:disabled { opacity: .35; cursor: not-allowed; }
.ed-row-move:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-dark); }
.ed-cell-lines { min-width: 220px; resize: vertical; line-height: 1.45; }
.ed-filebtn { display: inline-block; margin-top: 6px; padding: 10px 14px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  font-size: .86rem; cursor: pointer; line-height: 24px; }
.ed-filebtn:hover { border-color: var(--brand); color: var(--brand-dark); }
.ed-person-clear { margin-left: 6px; padding: 10px 12px; min-height: 44px; border: 1px solid var(--line);
  background: var(--paper); border-radius: 8px; cursor: pointer; font: inherit; font-size: .84rem; }
.ed-person-clear:hover { border-color: #b3261e; color: #b3261e; }
.ed-thumb-person { height: 64px; width: 52px; object-fit: cover; border-radius: 8px; background: var(--paper-alt); }
.ed-nav { position: static; }

/* Photo album editor */
.ed-album { border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; background: var(--paper); }
.ed-album-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.ed-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 14px 0; }
.ed-tile { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper-alt); position: relative; }
.ed-tile img { width: 100%; height: 90px; object-fit: cover; display: block; }
.ed-tile-tag { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.65); color: #fff; font-size: .7rem; padding: 2px 7px; border-radius: 6px; }
.ed-tile-actions { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.ed-tile-actions button { min-height: 36px; border: 1px solid var(--line); background: var(--paper); border-radius: 6px; cursor: pointer; font: inherit; font-size: .78rem; }
.ed-tile-actions button:hover { border-color: var(--brand); color: var(--brand-dark); }
.ed-tile-actions .ed-item-del:hover { border-color: #b3261e; color: #b3261e; }

/* Pages written in the admin portal */
.prose { max-width: 70ch; }
.prose h2 { margin: 1.6em 0 .5em; }
.prose p { line-height: 1.7; }
.cp-fig { margin: 1.4em 0; }
.cp-fig img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; }
.cp-fig figcaption { color: var(--ink-faint); font-size: .86rem; margin-top: 6px; }

/* Colours editor */
.ed-theme-row { display: grid; grid-template-columns: 56px 110px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.ed-color { width: 56px; height: 44px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); cursor: pointer; }
.ed-hex { font-family: var(--mono); }
.ed-warn { display: block; color: #b3261e; font-size: .82rem; }
.ed-body { min-height: 260px; font-family: inherit; }
@media (max-width: 640px) { .ed-theme-row { grid-template-columns: 56px 1fr; } .ed-theme-row > :nth-child(3), .ed-theme-row > :nth-child(4) { grid-column: 1 / -1; } }