/* ==========================================================================
   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,
  .site-footer a,
  .ask-chip,
  .btn { min-height: 44px; display: inline-flex; align-items: center; }

  .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; }
}