/* ==========================================================================
   BRESA - 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(12,32,28,.10), 0 14px 30px -18px rgba(12,32,28,.45);
  outline: 1px solid rgba(13,95,87,.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(12,32,28,.10), 0 26px 50px -22px rgba(12,32,28,.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(9,68,64,.7);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(9,68,64,.8); }
.ai-fab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ai-fab .dot { width: 8px; height: 8px; border-radius: 50%; background: #7fe3c5; box-shadow: 0 0 0 0 rgba(127,227,197,.7); animation: aiPulse 2.4s infinite; }
@keyframes aiPulse { 70% { box-shadow: 0 0 0 9px rgba(127,227,197,0); } 100% { box-shadow: 0 0 0 0 rgba(127,227,197,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,32,28,.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(224,89,15,.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(13,95,87,.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 association'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(9,68,64,.90), rgba(9,68,64,.62) 55%, rgba(20,32,29,.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(9,68,64,.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(9,68,64,.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(9,68,64,.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,18,16,.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(224,89,15,.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. */
#bresa-inbox .mini,
.inbox-item .mini {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  min-height: 36px;
}
#bresa-inbox .mini:hover,
.inbox-item .mini:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }
#bresa-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; }

@media (max-width: 640px) {
  .inbox-list { grid-template-columns: 1fr; }
  #bresa-inbox .mini, .inbox-item .mini { min-height: 44px; }
}

/* ---- 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(224,89,15,.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) {
  #bresa-inbox .kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
  #bresa-inbox .kpi { padding: 14px 15px; }
  #bresa-inbox .kpi-value { font-size: 1.5rem; }
  #bresa-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; }
}