/* ============================================================
   Page-specific styles
   ============================================================ */

/* ---------- Hero ---------- */
.hero{ background:var(--bg); }
.hero h1{ color:var(--navy-700); margin-bottom:var(--s-5); }
.hero .lead{ max-width:52ch; }
.hero__meta{ margin-top:var(--s-5); color:var(--ink-300); font-weight:600; font-size:.9rem; }

/* Hero art animation — drifting embers, pulsing sun glow, breathing defensible-space ring */
.ha-ember{ transform-box:fill-box; }
@media (prefers-reduced-motion: no-preference){
  .ha-glow{ animation:haGlow 4.5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
  .ha-ring{ animation:haRing 5s ease-in-out infinite; }
  .ha-ring2{ animation-delay:.6s; }
  .ha-shield{ animation:haBob 3.4s ease-in-out infinite; transform-box:fill-box; }
  .ha-ember{ animation:haEmber 4.5s ease-in-out infinite; opacity:0; }
  .ha-ember.e2{ animation-delay:1.1s; } .ha-ember.e3{ animation-delay:.6s; }
  .ha-ember.e4{ animation-delay:2s; } .ha-ember.e5{ animation-delay:2.8s; }
}
@keyframes haGlow{ 0%,100%{ opacity:.14; transform:scale(1); } 50%{ opacity:.3; transform:scale(1.06); } }
@keyframes haRing{ 0%,100%{ opacity:.55; } 50%{ opacity:.95; } }
@keyframes haBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@keyframes haEmber{ 0%{ opacity:0; transform:translateY(0) translateX(0); } 12%{ opacity:.9; } 70%{ opacity:.7; } 100%{ opacity:0; transform:translateY(-70px) translateX(8px); } }

/* ---------- Dashboard ---------- */
.welcome{ padding-block:var(--s-8) var(--s-5); }
.welcome h1{ font-family:var(--font-body); font-weight:800; text-transform:none; letter-spacing:-.01em;
  font-size:clamp(1.6rem,3vw,2.1rem); color:var(--navy-700); margin-bottom:var(--s-2); }
.welcome p{ font-size:1.0625rem; color:var(--ink-600); margin:0; }
.welcome strong{ color:var(--green-700); }

/* minmax(0,…) + min-width:0 so column width never inflates past the viewport
   from a wide child's min-content (tiny phones showed a 33px sideways scroll). */
.dash-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-8); align-items:start; padding-bottom:var(--s-12); }
.dash-grid > *{ min-width:0; }
@media (min-width:1000px){ .dash-grid{ grid-template-columns:minmax(0,1fr) 360px; } }

/* Ensure app pages always breathe before the footer */
main > .container:last-child, main > section:last-child{ padding-bottom:var(--s-12); }
main > section:last-child.section--green, main > section:last-child.section--dark, main > section:last-child.section--sand, main > section:last-child.section--soft{ padding-bottom:var(--s-12); }

/* aside cards */
.aside-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s-5); box-shadow:var(--shadow-1); }
.aside-card+.aside-card{ margin-top:var(--s-5); }
.aside-card h3{ font-size:1.1rem; margin-bottom:var(--s-4); display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); }
.aside-card h3 a{ font-size:.85rem; font-weight:700; }

/* mini list rows (events, discussions, policy) */
.minirow{ display:flex; gap:var(--s-3); padding:var(--s-3) 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.minirow:first-child{ padding-top:0; }
.minirow:last-child{ border-bottom:0; padding-bottom:0; }
.minirow__title{ font-weight:700; color:var(--ink-900); font-size:.98rem; line-height:1.35; margin:0 0 .2rem; }
.minirow__title a{ color:inherit; }
.minirow__meta{ font-size:.84rem; color:var(--ink-300); font-weight:600; }

/* date pill */
.datepill{ width:54px; height:54px; flex:none; border-radius:13px; background:var(--green-100); color:var(--green-700);
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.datepill--amber{ background:var(--amber-100); color:var(--amber-700); }
.datepill__m{ font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.datepill__d{ font-family:var(--font-display); font-size:1.5rem; font-weight:800; line-height:1; }

/* quick tiles (dashboard) */
.tilegrid{ display:grid; gap:var(--s-4); grid-template-columns:repeat(4,1fr); }
@media (max-width:880px){ .tilegrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .tilegrid{ grid-template-columns:1fr; } }

/* ---------- Library / filter pages ---------- */
.lib-grid{ display:grid; gap:var(--s-8); align-items:start; }
@media (min-width:980px){ .lib-grid{ grid-template-columns:280px 1fr; } }
.filter-rail{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s-5); box-shadow:var(--shadow-1); position:sticky; top:calc(var(--nav-h) + 14px); }
.filter-rail h3{ font-size:.95rem; }
.filter-group+.filter-group{ margin-top:var(--s-5); padding-top:var(--s-5); border-top:1px solid var(--line); }
.filter-group__title{ font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--navy-700); margin:0 0 var(--s-3); }
.toolbar{ display:flex; gap:var(--s-3); align-items:center; flex-wrap:wrap; margin-bottom:var(--s-5); padding-bottom:var(--s-5); border-bottom:1px solid var(--line); }
.toolbar .input-icon{ flex:1; min-width:220px; }
.toolbar__count{ font-weight:700; color:var(--ink-600); font-size:.92rem; }

.cardgrid{ display:grid; gap:var(--s-5); grid-template-columns:repeat(3,1fr); }
@media (max-width:1120px){ .cardgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .cardgrid{ grid-template-columns:1fr; } }
.cardgrid--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:760px){ .cardgrid--2{ grid-template-columns:1fr; } }

/* resource card */
.rcard{ display:flex; flex-direction:column; gap:var(--s-3); }
.rcard__thumb{ height:96px; border-radius:13px; border:1px solid var(--line); position:relative; overflow:hidden; background:var(--green-50); }
.rcard__thumb svg{ position:absolute; inset:0; margin:auto; width:38px; height:38px; color:var(--green-700); opacity:.7; }
.thumb-guide{ background:linear-gradient(135deg,var(--green-100),var(--green-50)); }
.thumb-template{ background:linear-gradient(135deg,var(--navy-100),#EEF2F7); }
.thumb-toolkit{ background:linear-gradient(135deg,var(--teal-100),var(--green-50)); }
.thumb-checklist{ background:linear-gradient(135deg,var(--amber-100),#FFF6E6); }
.thumb-case{ background:linear-gradient(135deg,var(--navy-700),var(--green-700)); }
.thumb-case svg{ color:#fff; opacity:.85; }
.thumb-outreach{ background:linear-gradient(135deg,var(--amber-100),var(--green-100)); }
.thumb-media{ background:linear-gradient(135deg,var(--teal-100),var(--amber-100)); }
.rcard h3{ font-size:1.08rem; margin:0; line-height:1.35; }
.rcard__desc{ color:var(--ink-600); font-size:.95rem; margin:0;
  /* Two-line clamp keeps card heights consistent across the grid. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Usage-rights callout on the resource detail page */
.rights-note{ display:flex; gap:.6rem; align-items:flex-start; background:var(--amber-100);
  border-left:4px solid var(--amber-500); border-radius:10px; padding:.65rem .8rem;
  margin:var(--s-4) 0 0; color:var(--warn); font-size:.93rem; font-weight:600; }
.rights-note svg{ width:18px; height:18px; flex:none; margin-top:.1em; }
.rcard__foot{ display:flex; align-items:center; gap:var(--s-2); margin-top:auto; padding-top:var(--s-3); border-top:1px solid var(--line); font-size:.84rem; color:var(--ink-300); font-weight:600; }

/* video card */
.vthumb{ position:relative; height:158px; border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg,var(--navy-700),var(--green-700) 70%,var(--green-500)); margin-bottom:var(--s-2); }
.vthumb::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(114,192,180,.45) 1px,transparent 1px); background-size:18px 18px; opacity:.4; }
.vthumb__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#0b1c33; }
.vthumb.has-img::after{ display:none; } /* dot texture only on the branded fallback tile */
.vthumb__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.94); display:grid; place-items:center; color:var(--green-700); z-index:1; }
.vthumb__play svg{ width:24px; height:24px; }
.vcard:hover .vthumb__play{ transform:translate(-50%,-50%) scale(1.08); }
.vthumb__dur{ position:absolute; right:10px; bottom:10px; background:rgba(17,37,65,.85); color:#fff; font-size:.72rem; font-weight:700; padding:.2rem .45rem; border-radius:7px; z-index:1; }
.vthumb__badge{ position:absolute; left:10px; top:10px; background:var(--amber-500); color:var(--navy-700); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:.2rem .5rem; border-radius:7px; z-index:1; }

/* episode list */
.episode{ display:grid; grid-template-columns:64px 1fr auto; gap:var(--s-4); align-items:start; padding:var(--s-5); }
.episode__num{ font-family:var(--font-display); font-weight:800; color:var(--green-700); font-size:1.05rem; }
.episode h4{ margin:0 0 .25rem; font-size:1.05rem; }
.episode p{ margin:0; color:var(--ink-600); font-size:.95rem; }
.episode__rt{ color:var(--ink-300); font-weight:700; font-size:.82rem; white-space:nowrap; }

/* coordinator card */
.ccard__head{ display:flex; gap:var(--s-3); align-items:center; margin-bottom:var(--s-4); }
.ccard h3{ margin:0; font-size:1.1rem; }
.ccard__county{ color:var(--ink-300); font-weight:600; font-size:.9rem; }
/* Quiet top-right note: the member opted in to mentoring (Profile >
   Settings). Kept small and dim on purpose - visible, never dominant. */
.ccard__open{ margin-left:auto; align-self:flex-start; flex:none; font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-300); white-space:nowrap; padding-top:.15rem; }
.ccard__sub{ font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--green-700); margin:var(--s-3) 0 var(--s-2); }
.ccard__foot{ display:flex; gap:var(--s-2); margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--line); }

/* discussion list */
.threadlist{ display:flex; flex-direction:column; }
.thread{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-4); padding:var(--s-5); border:1px solid var(--line);
  border-radius:var(--r-card); background:#fff; box-shadow:var(--shadow-1); align-items:start; }
.thread+.thread{ margin-top:var(--s-4); }
.thread:hover{ border-color:rgba(0,108,75,.4); box-shadow:var(--shadow-2); }
.thread__title{ font-size:1.12rem; font-weight:700; color:var(--ink-900); margin:0 0 .35rem; line-height:1.35; }
.thread__title a{ color:inherit; }
.thread__preview{ color:var(--ink-600); margin:0 0 var(--s-3); }
.thread__stats{ text-align:right; color:var(--ink-300); font-weight:700; font-size:.85rem; white-space:nowrap; display:flex; flex-direction:column; gap:.3rem; }
.thread__kind{ display:inline-flex; align-items:center; gap:.3rem; align-self:flex-end; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; padding:.2rem .55rem; border-radius:var(--r-chip); margin-bottom:.15rem; }
.thread__kind svg{ width:1em; height:1em; }
.thread__solved{ color:var(--green-700); } .thread__open{ color:var(--amber-700); }
@media (max-width:640px){ .thread{ grid-template-columns:auto 1fr; } .thread__stats{ grid-column:2; text-align:left; flex-direction:row; gap:var(--s-3); } }

/* ---------- Calendar ---------- */
.cal-toolbar{ display:flex; gap:var(--s-4); align-items:center; flex-wrap:wrap; margin-bottom:var(--s-5); }
.cal-title{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:1.5rem; color:var(--navy-700); margin:0; }
.cal-legend{ display:flex; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-4); font-weight:600; color:var(--ink-600); font-size:.9rem; }
.cal-legend span{ display:inline-flex; align-items:center; gap:.45rem; }
.cal-legend i{ width:14px; height:14px; border-radius:5px; display:inline-block; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.cal-dow{ padding:var(--s-3); text-align:center; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--green-700); background:var(--bg-soft); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.cal-cell{ min-width:0; min-height:108px; padding:var(--s-2); border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.cal-ev{ max-width:100%; }
.cal-cell--out{ background:var(--bg-soft); }
.cal-date{ font-weight:700; color:var(--ink-900); width:26px; height:26px; display:grid; place-items:center; font-size:.85rem; }
.cal-cell--today .cal-date{ background:var(--green-700); color:#fff; border-radius:50%; }
.cal-ev{ display:block; text-align:left; border:0; width:100%; font-size:.7rem; font-weight:700; padding:.25rem .4rem; border-radius:7px;
  border-left:3px solid var(--green-700); background:var(--green-100); color:var(--green-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.cal-ev--coord{ border-left-color:var(--amber-500); background:var(--amber-100); color:var(--amber-700); }
.cal-ev--partner{ border-left-color:var(--teal-500); background:var(--teal-100, #e2f3f0); color:var(--teal-700, #2b7a6d); }
@media (max-width:720px){ .cal-cell{ min-height:64px; } .cal-ev{ font-size:0; padding:0; height:7px; border-radius:3px; } }

/* ---------- Policy ---------- */
.ptable{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-1); }
.ptable th,.ptable td{ padding:var(--s-4); text-align:left; border-bottom:1px solid var(--line); font-size:.95rem; vertical-align:top; }
.ptable th{ background:var(--bg-soft); font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--navy-700); font-weight:800; }
.ptable tr:last-child td{ border-bottom:0; }
.ptable tr:hover td{ background:var(--green-50); }
.ptable__sum{ color:var(--ink-600); max-width:420px; }

.timeline{ position:relative; padding-left:2.4rem; }
.timeline::before{ content:""; position:absolute; left:10px; top:6px; bottom:6px; width:2px; background:var(--green-100); }
.tl-item{ position:relative; padding-bottom:var(--s-6); }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:""; position:absolute; left:-2.4rem; top:3px; width:22px; height:22px; border-radius:50%; background:var(--green-700); border:4px solid #fff; box-shadow:0 0 0 2px var(--green-100); }
.tl-item.is-future::before{ background:var(--amber-500); box-shadow:0 0 0 2px var(--amber-100); }
.tl-date{ font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--green-700); margin-bottom:.3rem; }
.tl-item.is-future .tl-date{ color:var(--amber-700); }
.tl-item h3{ font-size:1.1rem; margin:0 0 var(--s-2); }
.tl-item p{ margin:0; color:var(--ink-600); }

/* ---------- Submit experience ---------- */
.formstep{ padding-block:var(--s-6); border-top:1px solid var(--line); }
.formstep:first-of-type{ border-top:0; padding-top:0; }
.formstep__head{ display:flex; gap:var(--s-3); align-items:center; margin-bottom:var(--s-4); }
.formstep__n{ width:40px; height:40px; flex:none; border-radius:50%; background:var(--green-700); color:#fff; font-family:var(--font-display); font-weight:800; display:grid; place-items:center; }
.formstep__head h2{ margin:0; font-size:1.3rem; }

/* ---------- Profile ---------- */
.profile-hero{ background:linear-gradient(135deg,var(--green-100),var(--bg-soft)); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s-8); display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-5); align-items:center; }
@media (max-width:720px){ .profile-hero{ grid-template-columns:1fr; text-align:center; } .profile-hero .avatar{ margin-inline:auto; } }
.profile-hero h1{ color:var(--navy-700); margin:0 0 var(--s-2); font-size:clamp(2rem,4vw,2.8rem); }

/* ---------- 404 ---------- */
.notfound{ min-height:64vh; display:grid; place-items:center; text-align:center; padding-block:var(--s-12); }
.notfound__code{ font-family:var(--font-display); font-weight:800; font-size:clamp(5rem,16vw,9rem); line-height:1; color:var(--green-100); }

/* ---------- Rich event cards (calendar) ---------- */
.evgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5); }
@media (max-width:780px){ .evgrid{ grid-template-columns:1fr; } }
.evcard{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-4); border-left:5px solid var(--green-700); }
.evcard--coord{ border-left-color:var(--amber-500); }
.evcard__date{ width:66px; height:72px; flex:none; border-radius:14px; background:var(--green-100); color:var(--green-700);
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.evcard--coord .evcard__date{ background:var(--amber-100); color:var(--amber-700); }
.evcard__date .m{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.evcard__date .d{ font-family:var(--font-display); font-size:1.9rem; font-weight:800; line-height:1; }
.evcard__date .dow{ font-size:.62rem; font-weight:700; color:inherit; opacity:.8; margin-top:2px; }
.evcard__body{ min-width:0; }
.evcard__badges{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:var(--s-2); }
.evcard h3{ margin:0 0 var(--s-2); font-size:1.1rem; }
.evcard__meta{ display:flex; flex-direction:column; gap:.3rem; color:var(--ink-600); font-size:.92rem; font-weight:600; margin-bottom:var(--s-3); }
.evcard__meta span{ display:inline-flex; align-items:center; gap:.45rem; }
.evcard__meta svg{ width:1.05em; height:1.05em; color:var(--ink-300); flex:none; }
.evcard__actions{ display:flex; gap:var(--s-2); flex-wrap:wrap; }
.cal-grouptitle{ display:flex; align-items:center; gap:var(--s-3); margin:var(--s-10) 0 var(--s-5); }
.cal-grouptitle h2{ margin:0; }
.cal-grouptitle .pill{ font-weight:700; font-size:.8rem; color:var(--green-700); background:var(--green-100); padding:.25rem .7rem; border-radius:var(--r-chip); }

/* ---------- Card internal spacing ---------- */
.rcard{ gap:var(--s-4); }
.rcard .badge{ margin-top:var(--s-1); }
.rcard h3{ margin:0; }
.rcard .tag-row{ margin:var(--s-1) 0 var(--s-2); }
.rcard__foot{ padding-top:var(--s-4); }
.ccard .tag-row+.ccard__sub{ margin-top:var(--s-4); }

/* ---------- Grant Administration Alerts ---------- */
.alert-strip{ display:flex; gap:var(--s-4); align-items:center; flex-wrap:wrap; background:var(--red-100);
  border:1px solid #EAC9CB; border-left:5px solid var(--red-700); border-radius:14px; padding:var(--s-4) var(--s-5); margin-bottom:var(--s-6); }
.alert-strip__icon{ width:42px; height:42px; flex:none; border-radius:11px; background:var(--red-700); color:#fff; display:grid; place-items:center; }
.alert-strip__icon svg{ width:22px; height:22px; }
.alert-strip__txt{ min-width:0; flex:1; }
.alert-strip__txt strong{ color:var(--red-700); }
.alert-strip__txt p{ margin:.1rem 0 0; color:var(--ink-600); font-size:.95rem; }
.alert-strip a.btn{ flex:none; }
/* Deadline variant: amber, calm — a reminder, not an emergency */
.alert-strip--deadline{ background:var(--amber-100); border-color:#EED9B2; border-left-color:var(--amber-500); }
.alert-strip--deadline .alert-strip__icon{ background:var(--amber-500); color:var(--navy-900); }
.alert-strip--deadline .alert-strip__txt strong{ color:var(--amber-700); }

.ga-card{ border-left:5px solid var(--amber-500); }
.ga-card.is-resolved{ opacity:.68; border-left-color:var(--ink-300); }
.ga-card .caption{ font-weight:700; color:var(--ink-600); }

/* ---------- Position description listings (Mentoring Corner) ----------
   Two-column grid (CFSC feedback, Aug 2026); single column on narrow
   screens. Non-card children (empty-state notes) span the full width. */
.jd-list{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-4); align-items:stretch; }
.jd-list > p{ grid-column:1 / -1; }
.jdcard{ display:flex; gap:var(--s-4); align-items:flex-start; border-left:5px solid var(--green-700); }
.jdcard__icon{ flex:none; width:46px; height:46px; border-radius:13px; background:var(--green-100);
  color:var(--green-700); display:grid; place-items:center; }
.jdcard__icon svg{ width:24px; height:24px; }
.jdcard__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.jdcard__body > .cluster:last-child{ margin-top:auto !important; padding-top:var(--s-4); }
.jdcard__meta{ margin:.15rem 0 0; color:var(--ink-600); font-weight:600; font-size:.9rem; }
.jdcard .chip svg{ width:13px; height:13px; vertical-align:-2px; }
@media (max-width:860px){ .jd-list{ grid-template-columns:1fr; } }
@media (max-width:640px){ .jdcard{ flex-direction:column; gap:var(--s-3); } }

/* ---------- Region facet: main regions with a county drop-down ---------- */
.filter-region{ border-bottom:1px dashed var(--ink-100,#E7E4DE); }
.filter-region:last-child{ border-bottom:0; }
.filter-region__row{ display:flex; align-items:center; gap:.3rem; }
.filter-region__tog{ flex:none; width:28px; height:28px; border:0; background:none; color:var(--ink-600);
  border-radius:8px; display:grid; place-items:center; cursor:pointer; }
.filter-region__tog:hover{ background:var(--green-100); color:var(--green-700); }
.filter-region__tog svg{ width:16px; height:16px; transition:transform .18s ease; }
.filter-region__tog.is-open svg{ transform:rotate(180deg); }
.filter-sub{ padding:0 0 var(--s-2) var(--s-5); max-height:230px; overflow:auto; }
.checkrow--sub{ font-size:.88rem; padding:.18rem 0; }

/* ---------- Browse cards (discussion topics) ---------- */
.browse-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); margin-bottom:var(--s-8); }
@media (max-width:980px){ .browse-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .browse-grid{ grid-template-columns:1fr; } }
.browse-card{ display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-5); text-align:left; }
.browse-card .card__icon{ margin-bottom:var(--s-2); }
.browse-card h3{ margin:0; font-size:1.05rem; }
.browse-card p{ margin:0; color:var(--ink-600); font-size:.9rem; }
.browse-card__count{ margin-top:auto; font-weight:700; color:var(--green-700); font-size:.85rem; }
.browse-card.is-active{ border-color:var(--green-700); box-shadow:0 0 0 2px var(--green-700) inset, var(--shadow-1); }

/* ---------- Discussion detail ---------- */
.disc-head{ padding-block:var(--s-6) var(--s-5); }
.disc-post{ display:flex; gap:var(--s-4); }
.disc-post__body{ min-width:0; }
.disc-post__meta{ color:var(--ink-300); font-weight:600; font-size:.9rem; margin-bottom:var(--s-3); }
.disc-section-title{ display:flex; align-items:center; gap:.6rem; margin:var(--s-8) 0 var(--s-4); }
.disc-section-title .card__icon{ width:40px; height:40px; margin:0; }
.disc-section-title h2{ margin:0; }
.disc-section-title--action{ flex-wrap:wrap; }
.disc-section-title--action .btn svg{ width:1em; height:1em; }
/* min-width:0: a grid item never grows past its column to fit a nowrap line —
   the one-line approach clamps with an ellipsis instead of stretching the page. */
.solution-card{ border-top:4px solid var(--green-700); display:flex; flex-direction:column; min-width:0; max-width:100%; }
.solution-card.is-accepted{ box-shadow:0 0 0 2px var(--green-700) inset, var(--shadow-1); }
.solution-card__head{ display:flex; gap:var(--s-3); align-items:center; margin-bottom:var(--s-3); }
/* The full approach line, wrapping over 2-3 lines; the description and
   links still live in the Details popup. */
.solution-card__line{ font-weight:700; color:var(--ink-900); margin:var(--s-2) 0; overflow-wrap:anywhere; }
.solution-card__foot{ display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-top:auto; padding-top:var(--s-3); }
/* Colorful washes — solutions are the payoff of a thread and should pop. */
.solution-card.sc-green{ background:var(--green-50); border-top-color:var(--green-700); }
.solution-card.sc-amber{ background:var(--amber-100); border-top-color:var(--amber-500); }
.solution-card.sc-teal{ background:var(--teal-100); border-top-color:var(--teal-700); }
.solution-card.sc-navy{ background:var(--navy-100); border-top-color:var(--navy-700); }
/* Prominent "Helpful" vote pill; fills when the viewer has voted. */
.solvote{ display:inline-flex; align-items:center; gap:.35rem; padding:.42rem .8rem; border-radius:999px;
  border:1.5px solid var(--green-700); background:#fff; color:var(--green-700); font:inherit; font-size:.88rem;
  font-weight:700; cursor:pointer; transition:background .15s ease, color .15s ease, transform .15s ease; }
.solvote svg{ width:15px; height:15px; }
.solvote:hover{ transform:scale(1.04); }
.solvote.is-on{ background:var(--green-700); color:#fff; }
/* The count sits in its own circle so it stays readable in both states:
   green circle + white number on the outline pill, inverted when voted. */
.solvote__n{ display:inline-grid; place-items:center; min-width:1.55em; height:1.55em; padding:0 .3em;
  border-radius:999px; background:var(--green-700); color:#fff; font-size:.82em; line-height:1; }
.solvote.is-on .solvote__n{ background:#fff; color:var(--green-700); }
.solvote:disabled{ opacity:.6; cursor:default; }
/* Link rows inside the share/edit-solution form */
.sol-linklist{ margin-top:.5rem; }
.sol-linklist__row{ display:flex; gap:var(--s-3); align-items:center; padding:.4rem .5rem; border:1px solid var(--line); border-radius:12px; }
.sol-linklist__row .reslist__ic{ width:32px; height:32px; }
.sol-linklist__row .reslist__ic svg{ width:16px; height:16px; }
.sol-linklist__body{ min-width:0; flex:1; display:block; }
.sol-linklist__body .reslist__t{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92rem; }
/* Type-to-search picker for attaching a Content Library resource to a solution */
.sol-ressearch{ position:relative; margin-top:.45rem; }
.sol-ressearch__list{ position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0; background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-2); max-height:260px; overflow:auto; padding:.3rem; }
.sol-ressearch__it{ display:flex; gap:.5rem; align-items:center; width:100%; text-align:left; padding:.45rem .55rem;
  border:0; background:none; border-radius:8px; cursor:pointer; font:inherit; color:var(--ink-900); }
.sol-ressearch__it:hover{ background:var(--green-50); }
.sol-ressearch__it svg{ width:16px; height:16px; flex:none; color:var(--green-700); }
.sol-ressearch__it span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.solution-tag{ display:inline-flex; align-items:center; gap:.35rem; font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--green-700); }
.reslist{ list-style:none; padding:0; margin:0; }
.reslist li{ margin:0; }
.reslist a{ display:flex; gap:var(--s-3); align-items:center; padding:var(--s-4); border:1px solid var(--line); border-radius:12px; text-decoration:none; color:inherit; }
.reslist li+li{ margin-top:var(--s-3); }
.reslist a:hover{ border-color:var(--green-700); background:var(--green-50); }
.reslist__ic{ width:40px; height:40px; flex:none; border-radius:10px; background:var(--green-100); color:var(--green-700); display:grid; place-items:center; }
.reslist__ic svg{ width:20px; height:20px; }
.reslist__t{ font-weight:700; color:var(--ink-900); }
.reslist__s{ font-size:.85rem; color:var(--ink-300); font-weight:600; }
/* Unlinked row (e.g. a shared material whose resource left the Library) */
/* Compact variant for the discussion sidebar card */
.reslist--compact a{ padding:.5rem .6rem; gap:.55rem; }
.reslist--compact .reslist__ic{ width:30px; height:30px; border-radius:8px; }
.reslist--compact .reslist__ic svg{ width:15px; height:15px; }
.reslist--compact .reslist__t{ font-size:.9rem; overflow-wrap:anywhere; }
.reslist--compact li+li{ margin-top:var(--s-2); }
.reslist .reslist__dead{ display:flex; gap:var(--s-3); align-items:center; padding:var(--s-4);
  border:1px dashed var(--line); border-radius:12px; color:inherit; opacity:.72; }
.reply{ display:flex; gap:var(--s-3); padding-block:var(--s-4); border-top:1px solid var(--line); }
.reply__body{ min-width:0; }
.reply__who{ font-weight:700; color:var(--ink-900); }
.reply__meta{ color:var(--ink-300); font-weight:600; font-size:.85rem; }

/* ---------- Policy ---------- */
.ptable td a{ font-weight:700; }
.policy-filters{ display:flex; gap:var(--s-3); flex-wrap:wrap; align-items:center; margin-bottom:var(--s-5); }

/* ---------- Profile tabs / activity ---------- */
.profile-tabs{ margin:var(--s-6) 0; }
/* /coordinator-profile?id=… = another member's public profile. The flag is
   set pre-paint by an inline script, so the viewer's private tabs (activity,
   notifications, preferences, security, settings) never flash into view. */
html[data-profile-view="other"] [data-profile-private]{ display:none !important; }
html[data-profile-view="other"] .profile-hero .cluster:not([data-ready]){ visibility:hidden; }
html[data-profile-view="other"] .breadcrumb span{ visibility:hidden; }
.act-item{ display:flex; gap:var(--s-3); align-items:flex-start; padding:var(--s-4); border:1px solid var(--line); border-radius:14px; background:#fff; }
.act-item+.act-item{ margin-top:var(--s-3); }
.act-item__ic{ width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; }
.act-item__t{ font-weight:700; color:var(--ink-900); margin:0; }
.act-item__t a{ color:inherit; }
.act-item__m{ color:var(--ink-300); font-weight:600; font-size:.86rem; margin:.15rem 0 0; }
.act-item__time{ margin-left:auto; color:var(--ink-300); font-weight:600; font-size:.82rem; white-space:nowrap; }
.setting-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-4) 0; border-bottom:1px solid var(--line); }
.setting-row:last-child{ border-bottom:0; }
.setting-row__t{ font-weight:700; color:var(--ink-900); }
.setting-row__d{ color:var(--ink-600); font-size:.92rem; margin:.15rem 0 0; }
.switch{ position:relative; width:46px; height:26px; flex:none; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch__track{ position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background var(--t-base) var(--ease); }
.switch__track::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform var(--t-base) var(--ease); box-shadow:0 1px 2px rgba(0,0,0,.2); }
.switch input:checked+.switch__track{ background:var(--green-700); }
.switch input:checked+.switch__track::after{ transform:translateX(20px); }
.switch input:focus-visible+.switch__track{ outline:3px solid var(--focus); outline-offset:2px; }

/* ---------- Search results ---------- */
.search-head{ padding-block:var(--s-8) var(--s-5); }
.search-bigform{ position:relative; max-width:640px; }
.search-bigform input{ width:100%; border:1.5px solid var(--line); border-radius:var(--r-chip); background:var(--bg-soft); padding:1rem 1.2rem 1rem 3rem; min-height:58px; font-size:1.1rem; }
.search-bigform input:focus{ outline:0; background:#fff; border-color:var(--green-700); box-shadow:0 0 0 3px rgba(0,108,75,.16); }
.search-bigform svg{ position:absolute; left:1.1rem; top:50%; transform:translateY(-50%); width:22px; height:22px; color:var(--ink-300); }
.search-sec{ margin-top:var(--s-8); }
.search-sec__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:var(--s-4); }
.search-sec__head .card__icon{ width:38px; height:38px; margin:0; }
.search-sec__head h2{ margin:0; font-size:1.3rem; }
.search-sec__head .count{ margin-left:auto; color:var(--ink-300); font-weight:700; font-size:.9rem; }
.search-empty{ text-align:center; padding:var(--s-12) var(--s-4); }
.search-empty svg{ width:48px; height:48px; color:var(--sage-300); margin:0 auto var(--s-4); }
mark.hl{ background:var(--amber-100); color:var(--amber-700); padding:0 .1em; border-radius:3px; }

/* ---------- Mentorship Space ---------- */
.ms-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5); }
@media (max-width:760px){ .ms-grid{ grid-template-columns:1fr; } }
.ms-card{ display:flex; flex-direction:column; gap:var(--s-3); }
.ms-card__head{ display:flex; gap:var(--s-3); align-items:center; }
/* Role tints (CFSC feedback, Aug 2026): green = they mentor you,
   brand amber = you mentor them. */
.ms-card--mentor{ background:linear-gradient(165deg,var(--green-50),#fff 60%); border-color:var(--green-100); }
.ms-card--mentee{ background:linear-gradient(165deg,var(--amber-100),#fff 60%); border-color:var(--amber-100); }
/* Both members of the connection, joined by a link icon */
.ms-card__pair{ display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }
.ms-pair__n{ min-width:0; line-height:1.15; }
.ms-pair__n strong{ display:block; font-size:.95rem; }
.ms-pair__n .caption{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:11ch; }
.ms-pair__link{ width:26px; height:26px; flex:none; border-radius:50%; background:#fff;
  border:1px solid var(--line); display:grid; place-items:center; color:var(--green-700); }
.ms-pair__link svg{ width:15px; height:15px; }
.ms-card--mentee .ms-pair__link{ color:var(--amber-700); }
/* "Mentor: <name>" line under the role chip */
.ms-card__who{ display:flex; align-items:center; gap:.45rem; color:var(--ink-600); font-size:.92rem; }
.ms-card__who svg{ width:16px; height:16px; flex:none; }
.ms-card--mentor .ms-card__who svg, .conn-hero .ms-card__who svg{ color:var(--green-700); }
.ms-card--mentee .ms-card__who svg{ color:var(--amber-700); }
.ms-card__role{ font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.2rem .6rem; border-radius:var(--r-chip); }
.ms-role-mentor{ background:var(--green-100); color:var(--green-700); }
.ms-role-mentee{ background:var(--amber-100); color:var(--amber-700); }
.ms-card__focus{ color:var(--ink-600); }
.ms-card__stats{ display:flex; gap:var(--s-4); color:var(--ink-300); font-weight:600; font-size:.85rem; }
.ms-card__foot{ margin-top:auto; padding-top:var(--s-3); border-top:1px solid var(--line); display:flex; gap:var(--s-2); }

/* connection detail — hero tinted by role, matching the space cards */
.conn-hero{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-5); align-items:center; background:linear-gradient(135deg,var(--green-100),var(--bg-soft)); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s-6); }
.conn-hero--mentee{ background:linear-gradient(135deg,var(--amber-100),var(--bg-soft)); }
.conn-hero--mentee .ms-card__who svg{ color:var(--amber-700); }
@media (max-width:720px){ .conn-hero{ grid-template-columns:1fr; text-align:center; } .conn-hero .avatar{ margin-inline:auto; } }
.conn-hero h1, .conn-hero .conn-name{ font-family:var(--font-body); text-transform:none; font-weight:800; font-size:clamp(1.6rem,3vw,2.1rem); color:var(--navy-700); margin:0 0 var(--s-2); line-height:1.15; }

/* goals card (above tabs) */
.conn-goals{ margin-top:var(--s-6); background:#fff; border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-1); padding:var(--s-6); }
.conn-goals__head{ display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-5); }
.conn-goals__head .card__icon{ margin:0; flex:none; width:46px; height:46px; }
.conn-goals__head h2{ margin:0; }
.goal-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--s-3); }
.goal-item{ display:flex; gap:var(--s-3); align-items:flex-start; background:var(--green-50); border:1px solid var(--green-100); border-radius:14px; padding:var(--s-4); }
.goal-item__ic{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--green-700); color:#fff; display:grid; place-items:center; }
.goal-item__ic svg{ width:17px; height:17px; }
.goal-item p{ margin:0; font-weight:600; color:var(--ink-900); font-size:.95rem; line-height:1.45; }

/* connection tabs + panels */
.conn-tabs{ margin-top:var(--s-8); margin-bottom:var(--s-6); }
.conn-panel__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-4); }
.conn-panel__head h2{ margin:0; font-size:1.2rem; }
.conn-empty{ color:var(--ink-600); background:var(--bg-soft); border:1px dashed var(--line); border-radius:var(--r-card); padding:var(--s-6); text-align:center; margin:0; }

/* purpose-based chat */
.chat{ position:relative; border:1px solid var(--line); border-radius:var(--r-card); background:#fff; box-shadow:var(--shadow-1); display:flex; flex-direction:column; height:520px; overflow:hidden; }
/* @-reference picker — floats above the message input */
.chatref-menu{ position:absolute; left:var(--s-4); right:var(--s-4); bottom:96px; z-index:30;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-2);
  max-height:250px; overflow-y:auto; padding:.3rem; }
.chatref-menu__it{ display:flex; gap:.6rem; align-items:center; width:100%; text-align:left;
  padding:.4rem .55rem; border:0; background:none; border-radius:9px; cursor:pointer; }
.chatref-menu__it.is-active, .chatref-menu__it:hover{ background:var(--green-50); }
.chatref-menu__it .reslist__ic{ width:30px; height:30px; }
/* Inside the floating dock: anchor just above its input row. */
.chatref-menu--dock{ left:.6rem; right:.6rem; bottom:58px; }
/* @-references in thread replies (UAT-7 follow-up): the menu opens under the
   reply input instead of above a chat log. */
.chatref-menu--reply{ left:52px; right:86px; top:calc(100% + 6px); bottom:auto; }

/* Solutions notice on thread pages (UAT-7 follow-up): the dashboard alert
   strip, dimmed to a light green — informative, not alarming. */
.alert-strip--solutions{ width:100%; text-align:left; cursor:pointer; font:inherit;
  background:var(--green-50, #EFF5EC); border-color:#D9E7D3; border-left-color:var(--green-500);
  margin-bottom:var(--s-5); }
.alert-strip--solutions .alert-strip__icon{ background:var(--green-700); }
.alert-strip--solutions .alert-strip__txt strong{ color:var(--green-700); }
.alert-strip--solutions:hover{ border-left-color:var(--green-700); box-shadow:var(--shadow-1); }
/* "+N more" skill chips on coordinator cards */
.ccard__morechips{ cursor:pointer; border:1px dashed var(--ink-300); background:none; font:inherit; }
.ccard__morechips:hover{ border-color:var(--green-700); color:var(--green-700); }
.chatref-menu__it .reslist__ic svg{ width:16px; height:16px; }
.chatref-menu__tx{ min-width:0; display:flex; flex-direction:column; }
.chatref-menu__t{ font-weight:700; color:var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Reference chip inside a chat bubble */
.chatref{ display:inline-flex; align-items:center; gap:.3rem; max-width:100%;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:.08rem .6rem .08rem .45rem;
  font-weight:700; font-size:.86rem; text-decoration:none; color:var(--green-700); vertical-align:middle; }
.chatref svg{ width:14px; height:14px; flex:none; }
.chatref span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chatref:hover{ background:var(--green-50); }
.chat__head{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line); }
.chat__head .dot{ width:9px; height:9px; border-radius:50%; background:var(--green-600); }
.chat__log{ flex:1; overflow-y:auto; padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3); background:var(--bg-soft); }
.bubble{ max-width:78%; padding:.7rem 1rem; border-radius:16px; line-height:1.5; font-size:.95rem; }
.bubble--them{ align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:5px; }
.bubble--me{ align-self:flex-end; background:var(--green-700); color:#fff; border-bottom-right-radius:5px; }
.bubble__time{ display:block; font-size:.72rem; opacity:.7; margin-top:.25rem; }
.chat__form{ display:flex; gap:var(--s-2); padding:var(--s-3) var(--s-4); border-top:1px solid var(--line); }
.chat__form input{ flex:1; }
.chat__purpose{ display:flex; gap:.5rem; flex-wrap:wrap; padding:var(--s-3) var(--s-4) 0; }
.chat__purpose button{ font-size:.82rem; font-weight:600; color:var(--green-700); background:var(--green-50); border:1px solid var(--green-100); border-radius:var(--r-chip); padding:.35rem .8rem; }
.chat__purpose button:hover{ background:var(--green-100); }

/* ---------- Support & Help: how-to video center (Sep 2026 rebuild) ---------- */
.helphero{ background:linear-gradient(180deg, var(--green-50), var(--bg)); border-bottom:1px solid var(--line);
  padding:var(--s-8) 0 var(--s-6); }
.helphero__search{ position:relative; max-width:640px; margin:0 auto; }
.helphero__search .input{ padding:.95rem 1rem .95rem 3rem; font-size:1.05rem; border-radius:999px;
  box-shadow:var(--shadow-1); }
.helphero__search svg{ position:absolute; left:1.05rem; top:50%; transform:translateY(-50%);
  width:22px; height:22px; color:var(--ink-300); pointer-events:none; }
.helpcats{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:var(--s-4); }
.helpcats .fchip[aria-pressed="true"]{ background:var(--green-700); color:#fff; border-color:var(--green-700); }
.howto{ display:flex; flex-direction:column; text-align:left; padding:0; overflow:hidden; cursor:pointer; }
.howto__thumb{ position:relative; aspect-ratio:16/9; background:linear-gradient(150deg, var(--navy-700), var(--navy-900, #0C1B30));
  display:flex; align-items:center; justify-content:center; color:#fff; }
.howto__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.howto__play{ position:relative; z-index:1; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92);
  color:var(--green-700); display:grid; place-items:center; box-shadow:var(--shadow-1); }
.howto__play svg{ width:20px; height:20px; margin-left:2px; }
.howto__soon{ position:relative; z-index:1; text-align:center; padding:0 var(--s-4); }
.howto__soon .chip{ background:rgba(255,255,255,.16); color:#fff; }
.howto__src{ position:absolute; right:8px; bottom:8px; z-index:1; font-size:.68rem; font-weight:800;
  letter-spacing:.04em; background:rgba(0,0,0,.55); color:#fff; border-radius:999px; padding:.15rem .55rem; }
.howto__body{ padding:var(--s-4) var(--s-5) var(--s-5); display:flex; flex-direction:column; gap:.45rem; flex:1; }
.howto__body h3{ margin:0; font-size:1.06rem; line-height:1.3; }
.howto__body p{ margin:0; color:var(--ink-600); font-size:.92rem; line-height:1.5; }
.howto__meta{ margin-top:auto; padding-top:.35rem; }
.howto:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* AI transparency hover: a small info glyph whose title explains exactly
   what CoCo Assist reads and how a summary is made. */
.ai-tip{ display:inline-flex; width:16px; height:16px; color:var(--ink-300); cursor:help; flex:none; }
.ai-tip svg{ width:16px; height:16px; }
.ai-tip:hover, .ai-tip:focus-visible{ color:var(--green-700); outline:none; }

/* ---------- Floating mentorship chat dock ---------- */
/* White ring so the buttons stay visible over the navy footer and the
   green hero bands (UAT follow-up, Sep 2026). */
.chatdock-fab{ position:fixed; right:18px; bottom:18px; z-index:230; width:54px; height:54px; border-radius:50%;
  background:var(--green-700); color:#fff; border:2.5px solid #fff; cursor:pointer; box-shadow:var(--shadow-2);
  display:grid; place-items:center; }
.chatdock-fab svg{ width:24px; height:24px; }
.chatdock-fab:hover{ background:var(--green-500); }
.chatdock-fab--ai{ background:var(--navy-700); }
.chatdock-fab--ai:hover{ background:var(--navy-900, #0C1B30); }
.chatdock-fab__dot{ position:absolute; top:3px; right:3px; width:13px; height:13px; border-radius:50%;
  background:var(--amber-500); border:2px solid #fff; }
.chatdock{ position:fixed; right:18px; bottom:82px; z-index:230; width:min(370px, calc(100vw - 24px));
  height:min(520px, 72vh); background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-2); display:flex; flex-direction:column; overflow:hidden; }
.chatdock__head{ display:flex; align-items:center; gap:.55rem; padding:.65rem .9rem; background:var(--green-700); color:#fff; flex:none; }
/* base.css paints <strong> ink-900 globally — keep the header title white on green */
.chatdock__head strong{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; }
.chatdock__x{ background:none; border:0; color:#fff; font-size:1.3rem; line-height:1; cursor:pointer; padding:.1rem .3rem; flex:none; }
.chatdock__full{ color:#fff; font-size:.8rem; font-weight:700; text-decoration:underline; flex:none; }
.chatdock__list{ flex:1; overflow-y:auto; }
.chatdock__it{ display:flex; gap:.6rem; align-items:center; width:100%; text-align:left; padding:.6rem .9rem;
  border:0; border-bottom:1px solid var(--line); background:none; cursor:pointer; }
.chatdock__it:hover{ background:var(--green-50); }
.chatdock__tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
.chatdock__prev{ font-size:.82rem; color:var(--ink-300); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chatdock__dot{ width:10px; height:10px; border-radius:50%; background:var(--amber-500); flex:none; }
.chatdock__log{ flex:1; overflow-y:auto; padding:.8rem; display:flex; flex-direction:column; gap:.5rem; background:var(--bg-soft); }
.chatdock__log .bubble{ max-width:88%; font-size:.9rem; }
.chatdock__form{ display:flex; gap:.4rem; padding:.55rem; border-top:1px solid var(--line); flex:none; }
.chatdock__form input{ flex:1; min-width:0; }
/* Expanded CoCo Assist window (UAT-5): roughly double, remembered per browser. */
.chatdock--max{ width:min(720px, calc(100vw - 24px)); height:min(85vh, 880px); }
/* keep clear of the mobile quickbar */
@media (max-width:700px){ .chatdock-fab{ bottom:78px; } .chatdock{ bottom:142px; height:min(460px, 62vh); }
  .chatdock--max{ height:min(70vh, 560px); } }

/* ---------- Settings forms ---------- */
.settings-card{ max-width:680px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }

/* ---------- Admin dashboard ---------- */
.admin-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); margin-bottom:var(--s-8); }
@media (max-width:880px){ .admin-stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .admin-stats{ grid-template-columns:1fr; } }
.admin-stat{ padding:var(--s-5); }
.admin-stat__n{ font-family:var(--font-display); font-weight:800; font-size:2.4rem; line-height:1; color:var(--green-700); }
.admin-stat__l{ color:var(--ink-600); font-weight:600; margin-top:var(--s-2); }
.admin-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-1); }
.admin-table th,.admin-table td{ padding:var(--s-3) var(--s-4); text-align:left; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:middle; }
.admin-table th{ background:var(--bg-soft); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--navy-700); font-weight:800; }
.admin-table tr:last-child td{ border-bottom:0; }
.admin-table tr:hover td{ background:var(--green-50); }
.admin-row-actions{ display:flex; gap:.4rem; flex-wrap:wrap; }
.pill-status{ font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; padding:.2rem .55rem; border-radius:var(--r-chip); }
.pill-active{ background:var(--green-100); color:var(--green-700); }
.pill-invited{ background:var(--amber-100); color:var(--amber-700); }
.pill-open{ background:var(--red-100); color:var(--red-700); }
.admin-mod{ display:flex; gap:var(--s-3); align-items:flex-start; padding:var(--s-4); border:1px solid var(--line); border-radius:14px; background:#fff; }
.admin-mod+.admin-mod{ margin-top:var(--s-3); }
.admin-toolbar{ display:flex; gap:var(--s-3); align-items:center; flex-wrap:wrap; margin-bottom:var(--s-4); }
.admin-toolbar .input-icon{ flex:1; min-width:220px; max-width:420px; }
.member-head{ display:flex; gap:var(--s-3); align-items:center; margin-bottom:var(--s-5); }
.member-head h2{ margin:0; }
.review-preview{ background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:var(--s-5); margin:var(--s-4) 0; color:var(--ink-600); }
.hubctl-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5); }
@media (max-width:760px){ .hubctl-grid{ grid-template-columns:1fr; } }

/* ---------- Resource detail ---------- */
.res-top{ display:grid; gap:var(--s-8); align-items:start; }
@media (min-width:920px){ .res-top{ grid-template-columns:1.02fr .98fr; } }
.res-title{ font-family:var(--font-body); text-transform:none; font-weight:800; font-size:clamp(1.6rem,3.2vw,2.3rem); color:var(--navy-700); margin:var(--s-3) 0; line-height:1.2; }
.res-meta{ display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap; color:var(--ink-300); font-weight:600; font-size:.9rem; margin-bottom:var(--s-4); }
.res-actions{ display:flex; gap:var(--s-2); flex-wrap:wrap; margin-top:var(--s-4); }
.res-inside{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
@media (max-width:680px){ .res-inside{ grid-template-columns:1fr; } }
.res-inside .card{ padding:var(--s-5); }
.res-inside .card__icon{ width:42px; height:42px; margin-bottom:var(--s-3); }
.res-steps{ list-style:none; counter-reset:rs; padding:0; margin:0; }
.res-steps li{ display:flex; gap:var(--s-3); align-items:flex-start; padding:var(--s-3) 0; counter-increment:rs; }
.res-steps li::before{ content:counter(rs); flex:none; width:34px; height:34px; border-radius:50%; background:var(--green-700); color:#fff; font-family:var(--font-display); font-weight:800; display:grid; place-items:center; }

/* preview media */
.res-media{ position:relative; border:1px solid var(--line); border-radius:var(--r-card); min-height:340px; padding:var(--s-6);
  box-shadow:var(--shadow-1); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-4); overflow:hidden; }
.res-media__tag{ position:absolute; top:var(--s-4); left:var(--s-4); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  background:rgba(255,255,255,.85); color:var(--navy-700); padding:.25rem .65rem; border-radius:var(--r-chip); }
.rm-guide{ background:linear-gradient(135deg,var(--green-100),var(--green-50)); }
.rm-template{ background:linear-gradient(135deg,var(--navy-100),#EEF2F7); }
.rm-toolkit{ background:linear-gradient(135deg,var(--teal-100),var(--green-50)); }
.rm-checklist{ background:linear-gradient(135deg,var(--amber-100),#FFF6E6); }
.rm-case{ background:linear-gradient(160deg,var(--navy-700),var(--green-700)); color:#fff; }
.rm-case .res-media__tag{ background:rgba(255,255,255,.18); color:#fff; }
.rm-outreach{ background:linear-gradient(135deg,var(--amber-100),var(--green-100)); }
.rm-media{ background:linear-gradient(135deg,var(--teal-100),var(--amber-100)); }

/* guide — stacked document pages */
.docpages{ position:relative; width:200px; height:230px; }
.docpages .pg{ position:absolute; width:150px; height:195px; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow-1); padding:16px; }
.docpages .pg b{ display:block; height:8px; width:55%; border-radius:4px; background:var(--green-500); margin-bottom:11px; }
.docpages .pg i{ display:block; height:6px; border-radius:3px; background:var(--green-100); margin-bottom:8px; }
.docpages .p1{ left:0; top:18px; transform:rotate(-7deg); } .docpages .p2{ left:26px; top:6px; transform:rotate(3deg); } .docpages .p3{ left:50px; top:22px; transform:rotate(9deg); }
/* template — form mock */
.tmpl{ width:220px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-1); overflow:hidden; }
.tmpl__bar{ height:34px; background:var(--navy-700); }
.tmpl__row{ height:14px; margin:14px; border-radius:4px; background:var(--navy-100); }
.tmpl__row.s{ width:55%; }
/* toolkit — kit tiles */
.kit{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:240px; }
.kit span{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 10px; text-align:center; font-weight:700; font-size:.8rem; color:var(--teal-700); display:flex; flex-direction:column; align-items:center; gap:6px; box-shadow:var(--shadow-1); }
.kit svg{ width:22px; height:22px; }
/* checklist mock */
.chk{ width:240px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-1); padding:16px; display:flex; flex-direction:column; gap:12px; }
.chk div{ display:flex; align-items:center; gap:10px; }
.chk i{ width:20px; height:20px; border-radius:6px; background:var(--green-700); color:#fff; display:grid; place-items:center; flex:none; }
.chk i svg{ width:13px; height:13px; }
.chk span{ display:block; flex:1; height:9px; border-radius:5px; background:var(--amber-100); }
/* case — abstract outcome bars (no data) */
.case-bars{ display:flex; align-items:flex-end; gap:14px; height:170px; }
.case-bars span{ width:28px; border-radius:7px 7px 0 0; background:rgba(255,255,255,.85); }
/* outreach — abstract poster (no text) */
.flyer{ width:190px; height:240px; background:linear-gradient(160deg,var(--green-700),var(--green-900)); border-radius:12px; box-shadow:var(--shadow-2); padding:20px; color:#fff; display:flex; flex-direction:column; justify-content:space-between; }
.flyer__pill{ align-self:flex-start; width:54px; height:16px; border-radius:6px; background:var(--amber-500); }
.flyer__title{ display:block; width:85%; height:28px; border-radius:7px; background:rgba(255,255,255,.9); }
.flyer__lines i{ display:block; height:8px; border-radius:4px; background:rgba(255,255,255,.5); margin-top:9px; }
/* media — clippings */
.clips{ display:flex; flex-direction:column; gap:10px; width:250px; }
.clips div{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; box-shadow:var(--shadow-1); }
.clips b{ display:block; height:8px; width:70%; border-radius:4px; background:var(--navy-700); margin-bottom:8px; }
.clips i{ display:block; height:6px; border-radius:3px; background:var(--navy-100); }

.deflist{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:var(--s-2) var(--s-4); font-size:.92rem; }
.deflist dt{ font-weight:700; color:var(--ink-300); }
.deflist dd{ margin:0; color:var(--ink-900); }

/* ---------- Admin-only action bar ---------- */
.admin-only-bar{ display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-6);
  padding:var(--s-4) var(--s-5); border:1px solid var(--line); border-left:4px solid var(--navy-700);
  border-radius:var(--r-card); background:linear-gradient(135deg,var(--navy-100),var(--bg-soft)); }
.admin-only-bar__ic{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--navy-100); color:var(--navy-700); display:grid; place-items:center; }
.admin-only-bar__ic svg{ width:24px; height:24px; }
.admin-only-bar__text{ flex:1; min-width:200px; }
.admin-only-bar .btn{ flex:none; }

/* ---------- Saved items ---------- */
.saved-list{ list-style:none; padding:0; margin:0; display:grid; gap:var(--s-3); }
.saved-item{ display:flex; gap:var(--s-4); align-items:center; padding:var(--s-4) var(--s-5); border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow-1); }
.saved-item__ic{ width:46px; height:46px; flex:none; border-radius:12px; background:var(--green-100); color:var(--green-700); display:grid; place-items:center; }
.saved-item__ic svg{ width:22px; height:22px; }
.saved-item__ic--navy{ background:var(--navy-100); color:var(--navy-700); }
.saved-item__ic--teal{ background:var(--teal-100); color:var(--teal-700); }
.saved-item__body{ min-width:0; flex:1; }
.saved-item__t{ font-weight:700; color:var(--ink-900); text-decoration:none; font-size:1.02rem; }
.saved-item__t:hover{ color:var(--green-700); }
.saved-item__meta{ display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-top:.4rem; }
.saved-item__s{ font-size:.85rem; color:var(--ink-300); font-weight:600; margin-top:.35rem; }
.saved-unsave{ flex:none; color:var(--green-700); }
.saved-unsave svg{ width:1em; height:1em; }
@media (max-width:620px){ .saved-item{ flex-wrap:wrap; } .saved-unsave{ margin-left:auto; } }

/* utility */
.muted{ color:var(--ink-600); }

/* Policy Corner — engagement cards + auto-updated reference cards */
.pol-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:var(--s-5); }
.polcard{ border-left:5px solid var(--navy-700); display:flex; flex-direction:column; }
.polcard .between{ margin-top:auto !important; }
.refgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:var(--s-5); }
.refcard{ border-left:5px solid var(--teal-500, #72C0B4); display:flex; flex-direction:column; }
.refcard__latest{ background:var(--amber-100); border-radius:10px; padding:.6rem .75rem; margin-top:.5rem; margin-bottom:var(--s-3); }
.refcard > .between:last-child{ margin-top:auto !important; }
.chip__x{ border:0; background:none; cursor:pointer; font-size:1rem; line-height:1; padding:0 .1rem; color:inherit; }
.chip__x:hover{ color:var(--red-700); }

/* ---------- Training detail (standalone recording page) ---------- */
.td-cols{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--s-8); align-items:start; }
@media (max-width:900px){ .td-cols{ grid-template-columns:1fr; } }

/* Centered loading state (training detail, reusable) */
.loadwrap{ display:flex; flex-direction:column; align-items:center; gap:var(--s-4); padding:var(--s-12) 0; color:var(--ink-600); }
.loadspin{ width:44px; height:44px; border-radius:50%; border:4px solid var(--green-100); border-top-color:var(--green-700); animation:cfsc-spin .9s linear infinite; }
@keyframes cfsc-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .loadspin{ animation-duration:2.4s; } }

/* ---------- Statewide Campaigns (channel feed) ---------- */
.campcard{ --camp:var(--green-700); --camp-100:var(--green-100); border-top:5px solid var(--camp); }
.campcard--teal{ --camp:var(--teal-700); --camp-100:var(--teal-100); }
.campcard--amber{ --camp:var(--amber-700); --camp-100:var(--amber-100); }
.campcard--navy{ --camp:var(--navy-700); --camp-100:var(--navy-100); }
.campcard--red{ --camp:var(--red-700); --camp-100:var(--red-100); }
.campcard--plum{ --camp:#5B3A6E; --camp-100:#ECE3F1; }
.campcard__head{ display:flex; gap:var(--s-4); align-items:flex-start; }
.campcard__mono{ width:54px; height:54px; flex:none; border-radius:15px; display:grid; place-items:center;
  background:var(--camp-100); color:var(--camp); font-family:var(--font-display); font-weight:900;
  font-size:1.05rem; letter-spacing:.03em; }
.campcard__org{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--camp); }
.campcard h2{ font-family:var(--font-body); text-transform:none; font-weight:800; font-size:1.25rem;
  color:var(--navy-700); margin:.1rem 0 0; }
.campcard__focus{ font-weight:700; color:var(--navy-700); margin:.55rem 0 .2rem; }
.campcard__meta{ margin:.6rem 0 0; font-size:.9rem; color:var(--ink-600); display:grid; gap:.15rem; }
.campcard__meta strong{ color:var(--navy-700); font-weight:700; }
.campcard__latest{ background:var(--camp-100); border-radius:10px; padding:.6rem .75rem; margin-top:var(--s-4); margin-bottom:var(--s-3); }
.campseason{ display:flex; flex-wrap:wrap; gap:.45rem .6rem; align-items:center; background:#fff;
  border:1px solid var(--line); border-left:5px solid var(--amber-500); border-radius:var(--r-card);
  padding:.7rem var(--s-5); margin-bottom:var(--s-6); box-shadow:var(--shadow-1); }
.campseason__dot{ width:.62em; height:.62em; border-radius:50%; display:inline-block; flex:none; }
.campup{ display:flex; flex-direction:column; gap:.15rem; padding:.55rem 0; border-bottom:1px solid var(--line); }
.campup:last-child{ border-bottom:none; padding-bottom:0; }

/* ---------- Content Library top filter bar (types as cards) ----------
   Flat panel (CFSC feedback, Aug 2026): no border or shadow — the type
   cards and buttons inside carry their own outlines. */
.libtop{ background:#fff; border-radius:var(--r-card); padding:var(--s-5); }
.typegrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:var(--s-3); }
@media (max-width:1120px){ .typegrid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:640px){ .typegrid{ grid-template-columns:repeat(2,1fr); } }
.typecard{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:.45rem; text-align:center; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:.75rem .4rem .65rem; cursor:pointer; font-weight:600;
  font-size:.85rem; line-height:1.25; color:var(--navy-700);
  transition:border-color var(--t-base) var(--ease), background var(--t-base) var(--ease),
    transform var(--t-base) var(--ease); }
.typecard:hover{ border-color:rgba(0,108,75,.45); transform:translateY(-1px); }
@media (prefers-reduced-motion: reduce){ .typecard:hover{ transform:none; } }
.typecard__ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--green-100); color:var(--green-700); }
.typecard__ic svg{ width:21px; height:21px; }
.typecard.is-on{ border-color:var(--green-700); background:var(--green-100);
  box-shadow:inset 0 0 0 1px var(--green-700); }
.typecard.is-on .typecard__ic{ background:#fff; }
.typecard:has(input:focus-visible){ outline:3px solid var(--focus); outline-offset:3px; }
.libtop__row{ display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; margin-top:var(--s-4); }
.regbtns{ display:flex; flex-wrap:wrap; gap:.45rem; }
.regbtn{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px;
  padding:.45rem .95rem; font-weight:600; font-size:.9rem; cursor:pointer; background:#fff;
  color:var(--navy-700); transition:background var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.regbtn:hover{ border-color:rgba(0,108,75,.45); }
.regbtn.is-on{ background:var(--green-700); border-color:var(--green-700); color:#fff; }
.regbtn:has(input:focus-visible){ outline:3px solid var(--focus); outline-offset:3px; }

/* ---------- Icon tab cards (Mentoring Corner section switcher) ---------- */
.tabcards{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3); }
@media (max-width:960px){ .tabcards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .tabcards{ grid-template-columns:1fr; } }
.tabcards button{ display:flex; flex-direction:column; align-items:flex-start; gap:.35rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s-4) var(--s-5); cursor:pointer; text-align:left; font:inherit;
  color:var(--navy-700); box-shadow:var(--shadow-1);
  transition:border-color var(--t-base) var(--ease), background var(--t-base) var(--ease); }
.tabcards button:hover{ border-color:rgba(0,108,75,.45); }
.tabcards button strong{ font-weight:800; font-size:.98rem; }
.tabcards__sub{ font-size:.82rem; color:var(--ink-300); font-weight:600; }
.tabcards__ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--green-100); color:var(--green-700); }
.tabcards__ic svg{ width:20px; height:20px; }
.tabcards button[aria-checked="true"]{ border-color:var(--green-700); background:var(--green-100);
  box-shadow:inset 0 0 0 1px var(--green-700); }
.tabcards button[aria-checked="true"] .tabcards__ic{ background:#fff; }

/* ---------- Training Library category cards ---------- */
.catgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--s-3); }
.catcard{ display:flex; align-items:center; gap:.6rem; text-align:left; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:.6rem .7rem; cursor:pointer;
  font:inherit; color:var(--navy-700); min-height:58px;
  transition:border-color var(--t-base) var(--ease), background var(--t-base) var(--ease); }
.catcard:hover{ border-color:rgba(0,108,75,.45); }
.catcard__ic{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; }
.catcard__ic svg{ width:18px; height:18px; }
.catcard__t{ font-weight:700; font-size:.86rem; line-height:1.25; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.catcard__n{ display:block; font-weight:600; font-size:.76rem; color:var(--ink-300); margin-top:.1rem; }
.catcard[aria-pressed="true"]{ border-color:var(--green-700); background:var(--green-100);
  box-shadow:inset 0 0 0 1px var(--green-700); }
.catcard--all[aria-pressed="true"]{ background:var(--green-700); color:#fff; }
.catcard--all[aria-pressed="true"] .catcard__n{ color:#D9EAE3; }
.catcard--all[aria-pressed="true"] .catcard__ic{ background:rgba(255,255,255,.16); color:#fff; }
/* icon tile accents (deterministic per category) */
.catic-green{ background:var(--green-100); color:var(--green-700); }
.catic-teal{ background:var(--teal-100); color:var(--teal-700); }
.catic-amber{ background:var(--amber-100); color:var(--amber-700); }
.catic-navy{ background:var(--navy-100); color:var(--navy-700); }
.catic-plum{ background:#ECE3F1; color:#5B3A6E; }
.catic-red{ background:var(--red-100); color:var(--red-700); }

/* per-type count line on the Content Library type cards */
.typecard__n{ display:block; font-weight:600; font-size:.74rem; color:var(--ink-300); margin-top:.15rem; }
.typecard.is-on .typecard__n{ color:var(--green-700); }

/* ---------- Upload progress bar (training + resource modals) ---------- */
.upbar{ height:8px; border-radius:6px; background:var(--bg-soft); border:1px solid var(--line); overflow:hidden; }
.upbar i{ display:block; height:100%; width:0; background:var(--green-700); border-radius:6px;
  transition:width .25s ease; }
/* per-file rows in the Share-a-resource modal (upload starts on pick) */
.upfile{ margin:.45rem 0 0; }
.upfile__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.3rem; min-width:0; }
.upfile__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.85rem; font-weight:600; color:var(--ink-600); }
.upfile__pct{ font-size:.78rem; font-weight:700; color:var(--green-700); white-space:nowrap; }
.upfile--err .upfile__pct{ color:var(--red-700); }
.upfile--err .upbar i{ background:var(--red-700); }

/* ---------- External-sharing callout (inline under the action row) ----------
   Compact two-line strip (CFSC feedback, Aug 2026): header + one caption on
   the left, the single action button on the right. */
.extshare{ margin-top:var(--s-4); padding:var(--s-4) var(--s-5); background:var(--navy-100);
  border:1px solid var(--line); border-left:4px solid var(--navy-700); border-radius:12px; color:var(--navy-700);
  display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; }
.extshare__body{ flex:1 1 320px; min-width:0; }
.extshare > .btn{ flex:none; margin-left:auto; }
.extshare .minirow__meta, .extshare .caption{ color:var(--ink-600); }

/* ---------- Attached-files grid (media albums Phase 1) ---------- */
.albgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--s-4); }
.albitem{ margin:0; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; }
.albitem img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--bg-soft); }
.albitem__file{ width:100%; aspect-ratio:4/3; display:grid; place-items:center; align-content:center; gap:.35rem;
  background:var(--navy-100); color:var(--navy-700); }
.albitem__file svg{ width:34px; height:34px; }
.albitem__ext{ font-size:.72rem; font-weight:800; letter-spacing:.06em; }
.albitem__cap{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; padding:.45rem .6rem; }
.albitem__name{ font-size:.82rem; font-weight:600; color:var(--ink-600); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* whole thumbnail is one Preview button */
.albitem__pv{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; font:inherit; }
.albitem__pv:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; }
/* PDF tiles show the real first page (decorative — the click target is the
   button). The wrapper clips an oversized iframe so the embedded viewer's
   scrollbars land outside the visible tile: a clean crop, no scrollers. */
.albitem__pdfwrap{ display:block; width:100%; aspect-ratio:4/3; overflow:hidden; position:relative; background:#fff; }
.albitem__pdf{ position:absolute; top:0; left:0; width:calc(100% + 22px); height:calc(100% + 22px);
  border:0; display:block; pointer-events:none; background:#fff; }
/* preview overlay: wide panel, media sized to the viewport */
.modal__panel--preview{ max-width:min(980px,94vw); }
/* Clear file captions + tiles/list toggle (CFSC feedback — visitors
   shouldn't have to open a file to know what it is). Shared with the
   public /share page, which carries its own inline copy. */
.shf-toggle{ display:inline-flex; gap:.3rem; }
.shf-toggle button{ display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--line); background:#fff;
  color:var(--ink-600); border-radius:999px; padding:.3rem .75rem; font-size:.8rem; font-weight:700; cursor:pointer; }
.shf-toggle button svg{ width:14px; height:14px; }
.shf-toggle button.is-active{ background:var(--green-700); border-color:var(--green-700); color:#fff; }
.shf-name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:.86rem; font-weight:700; color:var(--ink-900); line-height:1.3; word-break:break-word; }
.shf-meta{ display:block; font-size:.74rem; font-weight:600; color:var(--ink-300); letter-spacing:.02em; margin-top:.15rem; }
.shf-acts{ display:flex; gap:.7rem; margin-top:.4rem; font-size:.8rem; font-weight:700; }
.shf-acts a{ color:var(--green-700); }
.shf-acts .linklike{ border:0; background:none; padding:0; color:var(--green-700); font:inherit; font-weight:700; cursor:pointer; }
.albitem__cap2{ padding:.5rem .65rem .6rem; }
.shflist{ display:flex; flex-direction:column; gap:.6rem; }
.shfrow{ display:flex; align-items:center; gap:.8rem; border:1px solid var(--line); border-radius:12px; background:#fff; padding:.5rem .7rem .5rem .5rem; }
.shfrow__th{ flex:none; width:84px; border:0; background:none; padding:0; cursor:zoom-in; border-radius:8px; overflow:hidden; }
.shfrow__th img{ width:84px; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--bg-soft); }
.shfrow__th .albitem__pdfwrap, .shfrow__th .albitem__file{ border-radius:8px; }
.shfrow__th .albitem__file svg{ width:22px; height:22px; }
.shfrow__th .albitem__ext{ font-size:.62rem; }
.shfrow__body{ flex:1; min-width:0; }
.shfrow .shf-acts{ margin-top:0; flex:none; }

/* Calendar filter bar: three who-leads cards share the row */
/* One uniform grid for who-leads AND series cards: equal widths and heights
   however many series exist, wrapping in even rows (UAT follow-up, Sep 2026). */
.typegrid--events{ grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); max-width:780px; }
@media (max-width:640px){ .typegrid--events{ grid-template-columns:repeat(2,1fr); } }
/* Series cards are buttons (toggles), not checkbox labels — same skin. */
.typecard--btn{ font:inherit; font-weight:600; font-size:.85rem; line-height:1.25; }
.typecard--btn:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }

/* Dashboard quick access as compact chips (UAT session 4, Sep 2026): every
   destination stays one click away without nine full cards above the fold.
   Follow-up: brand-colored icon discs and tinted washes so the chips read
   sharply instead of blending in. */
.quicklinks{ display:flex; flex-wrap:wrap; gap:.55rem; }
.quicklink{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .95rem .45rem .5rem; border:1px solid var(--line);
  border-radius:999px; background:#fff; color:var(--ink-900); font-weight:700; font-size:.92rem; text-decoration:none;
  box-shadow:0 1px 2px rgba(17,37,65,.06); }
.quicklink__ic{ width:28px; height:28px; border-radius:999px; display:grid; place-items:center; color:#fff; flex:none; }
.quicklink__ic svg{ width:15px; height:15px; }
.quicklink:hover{ text-decoration:none; color:var(--ink-900); box-shadow:0 3px 10px rgba(17,37,65,.14); transform:translateY(-1px); }
.quicklink--green{ background:var(--green-100); border-color:var(--green-700); }
.quicklink--green .quicklink__ic{ background:var(--green-700); }
.quicklink--teal{ background:var(--teal-100); border-color:var(--teal-700); }
.quicklink--teal .quicklink__ic{ background:var(--teal-700); }
.quicklink--amber{ background:var(--amber-100); border-color:var(--amber-700); }
.quicklink--amber .quicklink__ic{ background:var(--amber-700); }
.quicklink--navy{ background:var(--navy-100); border-color:var(--navy-700); }
.quicklink--navy .quicklink__ic{ background:var(--navy-700); }

/* Calendar display switcher + compact list rows (UAT session 4 follow-up,
   Sep 2026). The three views share the who-leads color system. */
.cal-views [role="radio"]{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .85rem; min-height:38px; font-size:.85rem; }
.cal-views [role="radio"] svg{ width:15px; height:15px; }
.evlist{ display:grid; gap:.5rem; }
.evrow{ display:flex; align-items:center; gap:var(--s-4); width:100%; text-align:left; font:inherit; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--green-700); border-radius:12px;
  padding:.55rem .9rem .55rem .7rem; box-shadow:0 1px 2px rgba(17,37,65,.05); }
.evrow:hover{ box-shadow:0 3px 10px rgba(17,37,65,.12); }
.evrow--coord{ border-left-color:var(--amber-500); }
.evrow--partner{ border-left-color:var(--teal-500); }
.evrow__date{ display:grid; place-items:center; width:52px; flex:none; background:var(--bg-soft); border-radius:10px; padding:.3rem 0; }
.evrow__date .m{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-600); }
.evrow__date .d{ font-size:1.15rem; font-weight:800; color:var(--ink-900); line-height:1.05; }
.evrow__body{ min-width:0; flex:1; }
.evrow__t{ display:block; font-weight:700; color:var(--ink-900); }
.evrow__meta{ display:block; font-size:.82rem; color:var(--ink-600); margin-top:.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evrow__lead{ flex:none; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-600); }
.evrow--coord .evrow__lead{ color:var(--amber-700); }
.evrow--partner .evrow__lead{ color:var(--teal-700); }
@media (max-width:640px){ .evrow__lead{ display:none; } }

/* ---------- Grant detail: Key facts sidebar ----------
   Stat-style card: funding leads as a highlighted figure, the dates
   follow as stacked label-over-value rows, and the deadline carries
   an amber pill so the one date that can cost an applicant stands out. */
.keyfacts__hero{
  background:var(--green-100); border-radius:12px;
  padding:.8rem .95rem; margin-bottom:var(--s-3);
}
.keyfacts__amount{
  display:block; margin-top:.15rem; font-size:1.18rem; line-height:1.3;
  color:var(--green-700); font-weight:800; letter-spacing:-.01em;
}
.keyfacts__label{
  display:block; font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color:var(--ink-600);
}
.keyfacts__row{ padding:.6rem 0; border-top:1px solid var(--line); }
/* No hairline on the row that opens the list (straight after the title
   when there is no funding figure, or straight after the hero panel). */
h3 + .keyfacts__row, .keyfacts__hero + .keyfacts__row{ border-top:0; padding-top:0; }
.keyfacts__value{
  display:block; margin-top:.15rem;
  color:var(--ink-900); font-weight:600; line-height:1.4;
}
.keyfacts__value--deadline{
  display:inline-block; margin-top:.3rem; background:var(--amber-100);
  color:var(--amber-700); font-weight:700; padding:.22em .65em;
  border-radius:var(--r-chip);
}