/* ==========================================================================
   board-layout.css — reorganized HUUSD board section (prototype)
   --------------------------------------------------------------------------
   Designed to sit INSIDE the existing HUUSD site chrome (header/nav/footer) and
   feel native: light page header, a compact board sub-nav, and restyled versions
   of the site's existing modules (news, members). EVERY selector is scoped under
   #schoolboard-layout, so it cannot affect any other page. Loads AFTER main.min.css.
   Verified by scripts/verify-scope.py.
   ========================================================================== */

#schoolboard-layout{
  --sb-blue:#00639e;
  --sb-navy:#024c79;
  --sb-gold:#F8A807;
  --sb-gold-deep:#b8860b;
  --sb-ink:#222428;
  --sb-muted:#6b7884;
  --sb-line:#e6edf1;
  --sb-bg-soft:#f4f7f9;
  --sb-blue-soft:#eaf4fb;
  --sb-gold-soft:#fdf0d3;
  --sb-radius:10px;
  --sb-shadow:0 1px 3px rgba(16,42,67,.07),0 6px 18px rgba(16,42,67,.05);
  --sb-shadow-hover:0 8px 22px rgba(16,42,67,.14);
  --sb-maxw:1080px;

  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--sb-ink);
}
#schoolboard-layout.container{max-width:var(--sb-maxw);margin:0 auto;padding:0 0 48px}
#schoolboard-layout control{display:block}
#schoolboard-layout cmscontrol{display:block}

/* keyboard focus — one visible ring for every interactive element */
#schoolboard-layout a:focus-visible,
#schoolboard-layout button:focus-visible,
#schoolboard-layout input:focus-visible,
#schoolboard-layout select:focus-visible,
#schoolboard-layout textarea:focus-visible,
#schoolboard-layout summary:focus-visible,
#schoolboard-layout [tabindex]:focus-visible{
  outline:3px solid var(--sb-blue);outline-offset:2px;
}

/* ---- Light page header (replaces the heavy hero) --------------------------
   Letterhead grammar: the eyebrow tracks like the correspondence letterhead's
   org line, the lede speaks in the letters' serif voice. */
#schoolboard-layout .sb-pagehead{padding:24px 24px 0}
#schoolboard-layout .sb-pagehead .sb-eyebrow{
  margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--sb-blue);
}
#schoolboard-layout .sb-pagehead h1{
  margin:5px 0 0;font-size:clamp(24px,3.2vw,32px);font-weight:700;color:var(--sb-ink);line-height:1.15;
}
/* full width on purpose (see 6dc9845) — the lede balances the wide subnav/cards
   below it; the 780px reading measure applies to body columns, not the hero */
#schoolboard-layout .sb-pagehead .sb-lede{
  margin:10px 0 0;font-family:"Merriweather",Georgia,serif;font-style:italic;
  font-size:15px;line-height:1.7;color:#4a5560;
}
#schoolboard-layout .sb-pagehead .sb-lede a{color:var(--sb-blue);font-weight:600;font-style:normal}

/* The ridgeline mark — the logo's gold ridge distilled to a hairline, once per
   page, under top-level h1s only (detail pageheads carry a .sb-corr-back link). */
#schoolboard-layout .sb-pagehead:not(:has(.sb-corr-back)) h1::after{
  content:"";display:block;width:72px;height:14px;margin-top:10px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16' fill='none' stroke='%23F8A807' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 13 L20 3.5 L33 9.5 L47 6 L78 12.5'/></svg>") left center/72px 14px no-repeat;
  animation:sb-ridge-draw .55s ease-out .1s backwards;
}
@keyframes sb-ridge-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  #schoolboard-layout .sb-pagehead:not(:has(.sb-corr-back)) h1::after{animation:none}
}

/* ---- Compact board sub-nav (the revised "tiles": now a slim tab bar) ------- */
#schoolboard-layout .sb-subnav{
  display:flex;flex-wrap:wrap;gap:2px;
  margin:16px 0 36px;padding:0 16px;
  background:#fff;
  border-bottom:2px solid var(--sb-line);
}
#schoolboard-layout .sb-subnav a{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 13px;border-bottom:3px solid transparent;border-radius:6px 6px 0 0;
  font-size:13.5px;font-weight:600;color:#52606d;text-decoration:none;white-space:nowrap;
  transition:color .12s,background .12s,border-color .12s;
}
#schoolboard-layout .sb-subnav a:hover{color:var(--sb-blue);background:var(--sb-bg-soft)}
#schoolboard-layout .sb-subnav a.active{color:var(--sb-blue);border-bottom-color:var(--sb-gold);background:var(--sb-bg-soft)}
#schoolboard-layout .sb-subnav a::before{
  content:"";width:16px;height:16px;flex:0 0 auto;background:center/contain no-repeat;opacity:.85;
}
#schoolboard-layout .sb-subnav a.sec-overview::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300639e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='14' y='14' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/></svg>")}
#schoolboard-layout .sb-subnav a.sec-about-the-board::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300639e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>")}
#schoolboard-layout .sb-subnav a.sec-meetings::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300639e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>")}
#schoolboard-layout .sb-subnav a.sec-get-involved::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300639e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>")}
#schoolboard-layout .sb-subnav a.sec-key-issues::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300639e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/></svg>")}
#schoolboard-layout .sb-subnav a.sec-communications::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300639e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>")}

/* CMS plug-in: the live control3 quicklinks module (ul.quicklink-group of a.btn links),
   restyled to match .sb-subnav. In the CMS the board sub-nav IS this existing module — the
   editor re-points the links and this makes them render as the nav strip (no custom markup). */
#schoolboard-layout .quicklink-group{display:flex;flex-wrap:wrap;gap:.25rem;list-style:none;margin:0 0 1.5rem;padding:.25rem 0;border-bottom:1px solid var(--sb-line)}
#schoolboard-layout .quicklink-group li{margin:0}
#schoolboard-layout .quicklink-group a.btn,
#schoolboard-layout .quicklink-group .btn-secondary{display:inline-block;padding:.5rem .8rem;border-radius:8px 8px 0 0;font-weight:600;font-size:.92rem;color:var(--sb-ink);text-decoration:none;border-bottom:2px solid transparent;background:none}
#schoolboard-layout .quicklink-group a.btn:hover{color:var(--sb-blue);background:var(--sb-bg-soft)}
#schoolboard-layout .quicklink-group .btn-secondary{color:var(--sb-blue);border-bottom-color:var(--sb-gold);cursor:default}

/* ---- Generic content area (used by Overview + section pages) --------------- */
#schoolboard-layout .sb-main{max-width:var(--sb-maxw);margin:0 auto;padding:0 24px}
/* One reading measure: section content, notes, and callouts share a centered
   780px column — the same width as the correspondence document sheet. Only
   deliberate full-width bands (wayfinding cards, news, the member grid, the
   issue-card grid, the archive timeline) span the whole container. */
#schoolboard-layout .sb-main>.sb-section,
#schoolboard-layout .sb-main>.sb-protonote,
#schoolboard-layout .sb-main>.sb-callout,
#schoolboard-layout .sb-main>.sb-prose{
  max-width:780px;margin-left:auto;margin-right:auto;
}
#schoolboard-layout .sb-section{margin-top:46px;scroll-margin-top:90px}
#schoolboard-layout .sb-section:first-child{margin-top:0}
/* section heading — sits on a hairline rule with a short gold tick, echoing the
   correspondence sheet's accent top rule; serif like the letters, ink not blue
   (blue is reserved for links and actions) */
#schoolboard-layout .sb-h{
  position:relative;margin:0 0 16px;padding-top:14px;
  border-top:1px solid var(--sb-line);
  font-family:"Merriweather",Georgia,serif;
  font-size:20px;font-weight:700;line-height:1.3;color:var(--sb-ink);
}
#schoolboard-layout .sb-h::before{
  content:"";position:absolute;top:-1px;left:0;width:32px;height:3px;
  background:var(--sb-gold);border-radius:2px;
}
#schoolboard-layout .sb-prose+.sb-linklist{margin-top:16px}
#schoolboard-layout .sb-linklist+p{margin-top:16px}
#schoolboard-layout .sb-prose p{margin:0 0 14px;font-size:15px;line-height:1.75;color:#33414c}
#schoolboard-layout .sb-prose a{color:var(--sb-blue);font-weight:600}
#schoolboard-layout .sb-prose ul{margin:0 0 16px;padding-left:22px}
#schoolboard-layout .sb-prose li{margin-bottom:6px;font-size:15px;line-height:1.7;color:#33414c}
#schoolboard-layout .sb-prose{max-width:none} /* the column above owns the measure */

/* info callout — warm, gold-anchored, with a serif lead-in line */
#schoolboard-layout .sb-callout{
  position:relative;margin:20px 0;padding:16px 22px 16px 58px;
  background:linear-gradient(180deg,#fffdf7,#fdf5e0);
  border:1px solid #f0e0b4;border-left:4px solid var(--sb-gold);
  border-radius:0 10px 10px 0;
  font-size:14px;line-height:1.7;color:#3d4852;
}
#schoolboard-layout .sb-callout::before{
  content:"";position:absolute;left:20px;top:19px;width:24px;height:24px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>") center/contain no-repeat;
}
#schoolboard-layout .sb-callout strong{
  display:block;margin:0 0 3px;
  font-family:"Merriweather",Georgia,serif;font-size:15.5px;color:var(--sb-ink);
}
#schoolboard-layout .sb-callout a{color:var(--sb-blue);font-weight:600}

/* buttons — tier 1: primary action (one per section, max) */
#schoolboard-layout .sb-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:8px;
  font-size:14px;font-weight:600;line-height:1.3;text-decoration:none;
  background:var(--sb-blue);color:#fff;border:1px solid var(--sb-blue);
  box-shadow:0 1px 2px rgba(16,42,67,.15);
  transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;
}
#schoolboard-layout .sb-btn:hover{
  background:var(--sb-navy);border-color:var(--sb-navy);
  box-shadow:0 3px 9px rgba(16,42,67,.2);transform:translateY(-1px);
}
#schoolboard-layout .sb-btn:active{transform:none;box-shadow:0 1px 2px rgba(16,42,67,.15)}
/* tier 2: secondary — a clear outline, not a pale chip */
#schoolboard-layout .sb-btn.ghost{
  background:#fff;color:var(--sb-blue);border:1px solid #9cc3dd;box-shadow:none;
}
#schoolboard-layout .sb-btn.ghost:hover{
  background:var(--sb-blue-soft);border-color:var(--sb-blue);
  box-shadow:none;transform:translateY(-1px);
}

/* link list (docs / pages) — title with its description stacked beneath, arrow
   right. Grid, not flex: flex's space-between centered the .sb-sub mid-row. */
#schoolboard-layout .sb-linklist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#schoolboard-layout .sb-linklist>li{margin:0}
#schoolboard-layout .sb-linklist>li>a{
  display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;
  padding:14px 18px;background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-radius);
  box-shadow:var(--sb-shadow);text-decoration:none;color:var(--sb-ink);
  font-weight:600;font-size:14.5px;line-height:1.4;text-align:left;
  transition:border-color .15s,box-shadow .15s,color .15s;
}
#schoolboard-layout .sb-linklist>li>a:hover{
  border-color:#b9d4e6;box-shadow:var(--sb-shadow-hover);color:var(--sb-blue);
}
#schoolboard-layout .sb-linklist>li>a::after{
  content:"\2192";grid-column:2;grid-row:1/span 2;align-self:center;
  color:var(--sb-gold);font-weight:700;font-size:16px;transition:transform .15s;
}
#schoolboard-layout .sb-linklist>li>a:hover::after{transform:translateX(4px)}
#schoolboard-layout .sb-linklist .sb-sub{
  grid-column:1;display:block;margin-top:2px;
  font-weight:400;font-size:12.5px;color:var(--sb-muted);line-height:1.5;
}

/* cards grid (meetings, generic) */
#schoolboard-layout .sb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#schoolboard-layout .sb-card{
  background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-radius);
  box-shadow:var(--sb-shadow);padding:16px 18px;
}
#schoolboard-layout .sb-card h3{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--sb-blue)}
#schoolboard-layout .sb-card .sb-meta{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sb-muted)}
#schoolboard-layout .sb-card p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:#4a5560}
/* card CTAs: editorial arrow links (same voice as the news module's Read More) */
#schoolboard-layout .sb-card .sb-cardlinks{margin-top:14px;display:flex;flex-wrap:wrap;gap:14px}
#schoolboard-layout .sb-card .sb-cardlinks a{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:var(--sb-blue);text-decoration:none;
  background:none;padding:0;border-radius:0;
}
#schoolboard-layout .sb-card .sb-cardlinks a::after{
  content:"\2192";color:var(--sb-gold);font-weight:700;transition:transform .15s;
}
#schoolboard-layout .sb-card .sb-cardlinks a:hover{color:var(--sb-navy);text-decoration:underline;text-underline-offset:3px}
#schoolboard-layout .sb-card .sb-cardlinks a:hover::after{transform:translateX(3px)}

/* overview wayfinding: 5 cards balance as a full 3 + 2 row pattern */
#schoolboard-layout .sb-wayfind{grid-template-columns:repeat(6,1fr)}
#schoolboard-layout .sb-wayfind>.sb-card{grid-column:span 2}
#schoolboard-layout .sb-wayfind>.sb-card:nth-child(n+4){grid-column:span 3}

/* prototype banner (marks unfinished/sample content) — scaffolding, kept quiet */
#schoolboard-layout .sb-protonote{
  margin:0 0 20px;padding:7px 12px;border:1px dashed #e0c684;background:#fffcf3;border-radius:6px;
  font-size:12px;line-height:1.5;color:#8a6d1e;
}

/* ---- Latest from the Board (news; existing CMS module restyled) -----------
   NOTE: the module is currently NOT placed in the prototype (cut June 2026) —
   these rules are kept so the district can re-add control7 without new CSS. */
#schoolboard-layout #latest-news-wrap{margin:34px auto 0;padding:0 24px;max-width:var(--sb-maxw)}
#schoolboard-layout .header-section{
  position:relative;
  display:flex !important;flex-direction:row;flex-wrap:nowrap;align-items:flex-end;justify-content:space-between;
  gap:16px;padding:14px 0 0;margin-bottom:18px;border-bottom:none;border-top:1px solid var(--sb-line);text-align:left;
}
#schoolboard-layout .header-section::before{
  content:"";position:absolute;top:-1px;left:0;width:32px;height:3px;
  background:var(--sb-gold);border-radius:2px;
}
#schoolboard-layout .header-section-top{display:flex;align-items:baseline;gap:8px;margin:0}
#schoolboard-layout .header-section-top h1{margin:0;font-size:0;line-height:1}
#schoolboard-layout .header-section-top h1::before{content:"Latest from the Board";font-family:"Merriweather",Georgia,serif;font-size:19px;font-weight:700;color:var(--sb-ink)}
#schoolboard-layout .header-section-top h2{display:none}
#schoolboard-layout .view-more-button{flex:0 0 auto;margin:0;align-self:center;background:var(--sb-blue);color:#fff;font-weight:600;font-size:13px;padding:8px 14px;border-radius:6px;text-decoration:none;white-space:nowrap}
#schoolboard-layout .view-more-button:hover{background:var(--sb-navy)}
#schoolboard-layout .blog-card-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
#schoolboard-layout .news-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-radius);overflow:hidden;box-shadow:var(--sb-shadow);transition:transform .15s,box-shadow .15s}
#schoolboard-layout .news-card:hover{transform:translateY(-3px);box-shadow:var(--sb-shadow-hover)}
#schoolboard-layout .news-card-image{height:130px;background-color:var(--sb-bg-soft);background-size:cover;background-position:center}
#schoolboard-layout .news-card-text{flex:1;padding:13px 15px 6px;display:flex;flex-direction:column}
#schoolboard-layout .news-card-title{font-size:14.5px;font-weight:700;line-height:1.35;color:var(--sb-blue);text-decoration:none}
#schoolboard-layout .news-card-title:hover{text-decoration:underline}
#schoolboard-layout .news-card-text p{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:#4a5560}
#schoolboard-layout .news-card-date{display:block;margin-bottom:2px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sb-muted)}
#schoolboard-layout .arrowlink{display:block;padding:8px 15px 14px}
#schoolboard-layout .arrowlink a{color:var(--sb-blue);font-weight:600;font-size:12.5px;text-decoration:none}
#schoolboard-layout .arrowlink a:hover{text-decoration:underline}
#schoolboard-layout .arrowlink .fa{margin-left:6px;color:var(--sb-gold)}
#schoolboard-layout .arrowlink .fa::before{content:"\2192"}

/* ---- About the Board (existing WYSIWYG restyled) -------------------------- */
#schoolboard-layout #control4 .cmscontent,#schoolboard-layout .sb-about{max-width:780px;margin:34px auto 0;padding:0}
/* the intro sentence reads as a serif lede, not a shouted heading */
#schoolboard-layout #control4 h2,#schoolboard-layout .sb-about h2{margin:0 0 16px;font-family:"Merriweather",Georgia,serif;font-size:19px;font-weight:400;line-height:1.55;color:var(--sb-ink)}
#schoolboard-layout #control4 h3,#schoolboard-layout .sb-about h3{margin:26px 0 10px;font-size:17px;font-weight:700;color:var(--sb-ink)}
#schoolboard-layout #control4 p,#schoolboard-layout .sb-about p{margin:0 0 14px;font-size:15px;line-height:1.75;color:#33414c}
#schoolboard-layout #control4 ul,#schoolboard-layout .sb-about ul{margin:0 0 16px;padding-left:22px}
#schoolboard-layout #control4 li,#schoolboard-layout .sb-about li{margin-bottom:6px;font-size:15px;line-height:1.7;color:#33414c}
#schoolboard-layout #control4 a,#schoolboard-layout .sb-about a{color:var(--sb-blue);font-weight:600}
#schoolboard-layout #control4 p:has(>em:only-child),#schoolboard-layout .sb-about p:has(>em:only-child){margin:20px 0;padding:16px 22px;background:var(--sb-bg-soft);border-left:4px solid var(--sb-gold);border-radius:0 8px 8px 0}
#schoolboard-layout #control4 p:has(>em:only-child) em,#schoolboard-layout .sb-about p:has(>em:only-child) em{font-family:"Merriweather",Georgia,serif;font-style:italic;font-size:16px;line-height:1.65;color:#2a3b46}
#schoolboard-layout .sb-engage-links{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0}
#schoolboard-layout .sb-engage-links a{
  display:inline-flex;align-items:center;padding:9px 16px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--sb-blue);text-decoration:none;
  background:#fff;border:1px solid #9cc3dd;transition:background .15s,border-color .15s;
}
#schoolboard-layout .sb-engage-links a:hover{background:var(--sb-blue-soft);border-color:var(--sb-blue)}

/* ---- Members (existing CMS module restyled) ------------------------------- */
#schoolboard-layout #board-members{margin:46px auto 0;padding:0;max-width:var(--sb-maxw)} /* nested in .sb-main, which carries the gutter */
#schoolboard-layout #board-members>h2{
  position:relative;margin:0 0 6px;padding-top:14px;border-top:1px solid var(--sb-line);
  font-family:"Merriweather",Georgia,serif;font-size:20px;font-weight:700;color:var(--sb-ink);
  text-align:left;
}
#schoolboard-layout .sb-board-email{text-align:left}
#schoolboard-layout #board-members>h2::before{
  content:"";position:absolute;top:-1px;left:0;width:32px;height:3px;
  background:var(--sb-gold);border-radius:2px;
}
#schoolboard-layout .sb-board-email{margin:0 0 20px;font-size:13px;line-height:1.6;color:var(--sb-muted)}
#schoolboard-layout .sb-board-email a{color:var(--sb-blue);font-weight:600}
#schoolboard-layout #board-members>.board-wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px;
  align-items:stretch;  /* all cards in a row are the same height */
}
#schoolboard-layout #board-members>.board-wrap>.member-wrap{
  display:flex;flex-direction:column;
  padding:16px;background:#fff;border:1px solid var(--sb-line);
  border-radius:var(--sb-radius);box-shadow:var(--sb-shadow);text-align:left;
}
/* Role badge — always present (empty for non-leadership); reserves space so names align */
#schoolboard-layout .member-wrap>.member-role{
  display:block;align-self:flex-start;
  min-height:22px;margin-bottom:8px;
  padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:700;letter-spacing:.03em;
  color:var(--sb-gold-deep);background:var(--sb-gold-soft);
}
#schoolboard-layout .member-wrap>.member-role.member-role--empty{
  background:transparent;pointer-events:none;  /* invisible but preserves the row height */
}
/* Name */
#schoolboard-layout .member-wrap>h3{
  margin:0 0 8px;font-size:15px;font-weight:700;color:var(--sb-ink);line-height:1.3;
}
/* Town pill */
#schoolboard-layout .member-wrap>.member-town{
  align-self:flex-start;padding:3px 10px;margin-bottom:6px;
  font-size:11px;font-weight:600;color:var(--sb-blue);
  background:var(--sb-blue-soft);border-radius:20px;
}
/* Term text */
#schoolboard-layout .member-wrap>.member-term{
  font-size:12px;color:var(--sb-muted);line-height:1.5;
}
/* Committee badges — flow after the term; the hairline only exists where badges do */
#schoolboard-layout .member-wrap>.member-committees{
  display:flex;flex-wrap:wrap;gap:5px;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--sb-line);
}
/* leadership cards carry a quiet gold top edge */
#schoolboard-layout .member-wrap:has(>.member-role:not(.member-role--empty)){border-top:3px solid var(--sb-gold)}
#schoolboard-layout .member-wrap>.member-committees>.member-committee{
  display:inline-block;padding:3px 9px;
  font-size:10.5px;font-weight:600;letter-spacing:.02em;
  color:#2d5f3f;background:#e6f4ec;border:1px solid #b5dfc3;border-radius:20px;
}
/* Fallback: support old flat-span CMS markup with order stacking */
#schoolboard-layout #board-members>.board-wrap>.member-wrap>span:not([class]){
  font-size:12px;color:var(--sb-muted);
}

/* ==========================================================================
   Correspondence — browsable archive of board-authored messages
   ========================================================================== */
/* per-audience accent (set on .aud-*; badges/rows read var(--corr-accent)) */
#schoolboard-layout .aud-community  {--corr-accent:#00639e;--corr-accent-soft:#eaf4fb}
#schoolboard-layout .aud-legislature{--corr-accent:#0f7d8c;--corr-accent-soft:#e3f3f4}
#schoolboard-layout .aud-governor   {--corr-accent:#b8860b;--corr-accent-soft:#fdf0d3}

/* filter chips — driven by hidden radios (no JS) */
#schoolboard-layout .sb-corr-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip:rect(0 0 0 0)}
#schoolboard-layout .sb-corr-filters{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 22px}
#schoolboard-layout .sb-corr-chip{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
  padding:7px 14px;border:1px solid var(--sb-line);border-radius:20px;background:#fff;
  font-size:13px;font-weight:600;color:#52606d;transition:color .12s,background .12s,border-color .12s;
}
#schoolboard-layout .sb-corr-chip:hover{border-color:#cfe0ec;color:var(--sb-blue)}
#schoolboard-layout .sb-corr-count{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 5px;
  font-size:11px;border-radius:10px;background:var(--sb-bg-soft);color:var(--sb-muted);
}
#schoolboard-layout #cf-all:checked         ~ .sb-corr-filters label[for=cf-all],
#schoolboard-layout #cf-community:checked   ~ .sb-corr-filters label[for=cf-community],
#schoolboard-layout #cf-legislature:checked ~ .sb-corr-filters label[for=cf-legislature],
#schoolboard-layout #cf-governor:checked    ~ .sb-corr-filters label[for=cf-governor]{
  background:var(--sb-blue);border-color:var(--sb-blue);color:#fff;
}
#schoolboard-layout #cf-all:checked         ~ .sb-corr-filters label[for=cf-all] .sb-corr-count,
#schoolboard-layout #cf-community:checked   ~ .sb-corr-filters label[for=cf-community] .sb-corr-count,
#schoolboard-layout #cf-legislature:checked ~ .sb-corr-filters label[for=cf-legislature] .sb-corr-count,
#schoolboard-layout #cf-governor:checked    ~ .sb-corr-filters label[for=cf-governor] .sb-corr-count{
  background:rgba(255,255,255,.25);color:#fff;
}
#schoolboard-layout .sb-corr-radio:focus-visible ~ .sb-corr-filters label[for=cf-all],
#schoolboard-layout #cf-community:focus-visible   ~ .sb-corr-filters label[for=cf-community],
#schoolboard-layout #cf-legislature:focus-visible ~ .sb-corr-filters label[for=cf-legislature],
#schoolboard-layout #cf-governor:focus-visible    ~ .sb-corr-filters label[for=cf-governor]{
  outline:3px solid var(--sb-blue);outline-offset:2px;
}

/* featured latest piece */
#schoolboard-layout .sb-corr-latest{
  background:#fff;border:1px solid var(--sb-line);border-left:4px solid var(--corr-accent,var(--sb-blue));
  border-radius:var(--sb-radius);box-shadow:var(--sb-shadow);padding:18px 22px 16px;margin:0 0 26px;
}
#schoolboard-layout .sb-corr-latest-tag{
  margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sb-gold-deep);
}
#schoolboard-layout .sb-corr-latest h2{margin:10px 0 6px;font-size:clamp(17px,2.2vw,21px);line-height:1.3}
#schoolboard-layout .sb-corr-latest h2 a{color:var(--sb-ink);text-decoration:none}
#schoolboard-layout .sb-corr-latest h2 a:hover{color:var(--corr-accent,var(--sb-blue))}
#schoolboard-layout .sb-corr-latest .sb-corr-meta time{font-weight:600;color:#33414c}
#schoolboard-layout .sb-corr-latest-read{margin:10px 0 0}
#schoolboard-layout .sb-corr-latest-read a{font-size:13.5px;font-weight:700;color:var(--sb-blue);text-decoration:none}
#schoolboard-layout .sb-corr-latest-read a:hover{text-decoration:underline}

/* timeline list */
#schoolboard-layout .sb-corr-list{list-style:none;margin:0 0 10px;padding:0}
#schoolboard-layout .sb-corr-item{border-bottom:1px solid var(--sb-line)}
#schoolboard-layout .sb-corr-item:first-child{border-top:1px solid var(--sb-line)}
#schoolboard-layout .sb-corr-item>a{
  display:flex;flex-direction:column;gap:4px;padding:15px 10px;text-decoration:none;
  border-left:3px solid transparent;transition:background .12s,border-color .12s,padding-left .12s;
}
#schoolboard-layout .sb-corr-item>a:hover{background:var(--corr-accent-soft);border-left-color:var(--corr-accent);padding-left:15px}
#schoolboard-layout .sb-corr-row1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#schoolboard-layout .sb-corr-date{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--sb-muted)}
#schoolboard-layout .sb-corr-type{
  display:inline-block;padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--corr-accent);background:var(--corr-accent-soft);
  border:1px solid color-mix(in srgb,var(--corr-accent) 28%,transparent);
}
#schoolboard-layout .sb-corr-title{font-size:16px;font-weight:700;color:var(--sb-ink);line-height:1.3}
#schoolboard-layout .sb-corr-item>a:hover .sb-corr-title{color:var(--corr-accent)}
#schoolboard-layout .sb-corr-meta{font-size:12.5px;color:var(--sb-muted);line-height:1.5}
#schoolboard-layout .sb-corr-arrow{color:var(--corr-accent);font-weight:700;padding:0 1px}

/* the filter itself: hide non-matching items for the checked audience */
#schoolboard-layout #cf-community:checked   ~ .sb-corr-list .sb-corr-item:not(.aud-community){display:none}
#schoolboard-layout #cf-legislature:checked ~ .sb-corr-list .sb-corr-item:not(.aud-legislature){display:none}
#schoolboard-layout #cf-governor:checked    ~ .sb-corr-list .sb-corr-item:not(.aud-governor){display:none}

/* ---- single correspondence page ------------------------------------------
   Each piece is presented as a document: a paper sheet with the audience
   accent along the top, a letterhead (From / To / Date / Source), the full
   text set in Merriweather, and a footer with provenance + share links. */
#schoolboard-layout .sb-corr-detailhead{padding-top:20px}
#schoolboard-layout .sb-corr-back{color:var(--sb-blue);font-weight:700;text-decoration:none}
#schoolboard-layout .sb-corr-back:hover{text-decoration:underline}
#schoolboard-layout .sb-corr-detailhead .sb-corr-type{margin:12px 0 8px}
#schoolboard-layout .sb-corr-detailhead h1{font-size:clamp(22px,3vw,30px);max-width:760px;line-height:1.2}
#schoolboard-layout .sb-corr-sep{padding:0 8px;color:#c3cfd8}

#schoolboard-layout .sb-corr-doc{
  max-width:780px;margin:14px auto 0;background:#fff;
  border:1px solid #dde6ec;border-top:4px solid var(--corr-accent,var(--sb-blue));
  border-radius:8px;box-shadow:0 1px 3px rgba(16,42,67,.08),0 14px 36px rgba(16,42,67,.09);
  padding:clamp(24px,4.5vw,44px) clamp(20px,6vw,60px) clamp(20px,3.5vw,32px);
}

/* letterhead */
#schoolboard-layout .sb-corr-letterhead{border-bottom:1px solid var(--sb-line);padding-bottom:18px;margin-bottom:28px}
#schoolboard-layout .sb-corr-lh-org{
  margin:0 0 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--sb-muted);
}
#schoolboard-layout .sb-corr-lh-grid{margin:0;display:grid;gap:7px}
#schoolboard-layout .sb-corr-lh-row{display:grid;grid-template-columns:64px 1fr;gap:12px}
#schoolboard-layout .sb-corr-lh-row dt{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--corr-accent,var(--sb-blue));padding-top:2px;
}
#schoolboard-layout .sb-corr-lh-row dd{margin:0;font-size:13.5px;line-height:1.55;color:#33414c}
#schoolboard-layout .sb-corr-lh-row dd a{color:var(--sb-blue);font-weight:600;word-break:break-word}
#schoolboard-layout .sb-corr-lh-row dd time{font-weight:600}

/* document body — serif, like the letter it is */
#schoolboard-layout .sb-corr-body{max-width:none}
#schoolboard-layout .sb-corr-body p{margin:0 0 17px;font-family:"Merriweather",Georgia,serif;font-size:15.5px;line-height:1.85;color:#2c3a45}
#schoolboard-layout .sb-corr-body ul,#schoolboard-layout .sb-corr-body ol{margin:0 0 17px;padding-left:26px}
#schoolboard-layout .sb-corr-body li{margin-bottom:7px;font-family:"Merriweather",Georgia,serif;font-size:15.5px;line-height:1.8;color:#2c3a45}
#schoolboard-layout .sb-corr-body ol li::marker{font-weight:700;color:var(--corr-accent,var(--sb-blue))}
#schoolboard-layout .sb-corr-body ul ul{margin:7px 0 4px}
#schoolboard-layout .sb-corr-body a{color:var(--sb-blue);font-weight:600;word-break:break-word}
#schoolboard-layout .sb-corr-body h2,#schoolboard-layout .sb-corr-body h3,#schoolboard-layout .sb-corr-body h4{color:var(--sb-blue);margin:24px 0 10px;font-weight:700}

/* document footer: provenance note + share links */
#schoolboard-layout .sb-corr-foot{margin-top:30px;padding-top:16px;border-top:1px solid var(--sb-line)}
#schoolboard-layout .sb-corr-note{margin:0 0 14px;font-size:12.5px;line-height:1.65;color:var(--sb-muted)}
#schoolboard-layout .sb-corr-share{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
#schoolboard-layout .sb-corr-share-label{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sb-muted);margin-right:4px;
}
#schoolboard-layout .sb-corr-share a{
  display:inline-flex;align-items:center;padding:5px 14px;border:1px solid var(--sb-line);
  border-radius:18px;background:#fff;font-size:12.5px;font-weight:600;color:var(--sb-blue);
  text-decoration:none;transition:border-color .12s,background .12s;
}
#schoolboard-layout .sb-corr-share a:hover{border-color:var(--sb-blue);background:var(--sb-blue-soft)}

/* background:none — main.min.css paints bare <nav> elements solid blue */
#schoolboard-layout .sb-corr-nav{max-width:780px;margin:24px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px;background:none}
#schoolboard-layout .sb-corr-prevnext{
  display:flex;flex-direction:column;gap:4px;padding:12px 16px;background:#fff;
  border:1px solid var(--sb-line);border-radius:var(--sb-radius);box-shadow:var(--sb-shadow);
  text-decoration:none;color:var(--sb-ink);font-size:13.5px;font-weight:600;line-height:1.35;
  transition:transform .12s,box-shadow .12s,border-color .12s;
}
#schoolboard-layout .sb-corr-prevnext:hover{transform:translateY(-2px);box-shadow:var(--sb-shadow-hover);border-color:#cfe0ec}
#schoolboard-layout .sb-corr-prevnext>span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sb-blue)}
#schoolboard-layout .sb-corr-prevnext.older{text-align:right;align-items:flex-end}
#schoolboard-layout .sb-corr-prevnext.disabled{visibility:hidden}
#schoolboard-layout .sb-corr-allbtn{max-width:780px;margin:18px auto 0;text-align:center}
/* its .sb-h brings the rule + tick; no second border here */
#schoolboard-layout .sb-corr-writeto{max-width:780px;margin-top:46px}
#schoolboard-layout .sb-corr-writeto .sb-h em{font-style:italic}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:900px){
  #schoolboard-layout .blog-card-columns{grid-template-columns:repeat(2,1fr)}
  #schoolboard-layout #board-members>.board-wrap{grid-template-columns:repeat(3,1fr)}
  #schoolboard-layout .sb-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  #schoolboard-layout .sb-subnav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:0}
  #schoolboard-layout .blog-card-columns{grid-template-columns:1fr}
  #schoolboard-layout .sb-cards{grid-template-columns:1fr}
  #schoolboard-layout #board-members>.board-wrap{grid-template-columns:1fr 1fr}
  #schoolboard-layout .header-section{flex-direction:column;align-items:flex-start}
  #schoolboard-layout .view-more-button{align-self:flex-start}
  #schoolboard-layout .sb-corr-nav{grid-template-columns:1fr}
  #schoolboard-layout .sb-corr-prevnext.older{text-align:left;align-items:flex-start}
  #schoolboard-layout .sb-corr-prevnext.disabled{display:none}
  #schoolboard-layout .sb-corr-lh-row{grid-template-columns:1fr;gap:1px}
}
@media (max-width:420px){
  #schoolboard-layout #board-members>.board-wrap{grid-template-columns:1fr}
}

/* Key Issues --------------------------------------------------------------- */
/* status: a quiet kicker — gold dot + small caps, no filled pill */
#schoolboard-layout .sb-issue-status{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;
  padding:0;background:none;border-radius:0;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sb-muted);
}
#schoolboard-layout .sb-issue-status::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--sb-gold);flex:0 0 auto;
}
#schoolboard-layout .sb-issue-updated{color:var(--sb-muted);font-size:.85rem}
#schoolboard-layout .sb-issue-weighin{margin-top:1.5rem}

/* 5 briefs: 2-col grid; with an odd count the first brief leads full-width —
   1+2+2 fills perfectly, and an even count falls into clean pairs */
#schoolboard-layout .sb-issuegrid{grid-template-columns:repeat(2,1fr);gap:16px}
#schoolboard-layout .sb-issuegrid>.sb-issue-card:first-child:nth-last-child(odd){grid-column:1/-1}

/* the whole card is the link */
#schoolboard-layout a.sb-issue-card{
  display:flex;flex-direction:column;align-items:flex-start;
  color:var(--sb-ink);font-weight:400;text-decoration:none;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
#schoolboard-layout a.sb-issue-card:hover{
  transform:translateY(-2px);box-shadow:var(--sb-shadow-hover);border-color:#b9d4e6;
}
#schoolboard-layout .sb-issue-card h3{margin:0 0 6px;font-size:17px;color:var(--sb-ink)}
#schoolboard-layout a.sb-issue-card:hover h3{color:var(--sb-blue)}
#schoolboard-layout .sb-issue-card p{flex:1;margin:0;font-size:13.5px;line-height:1.6;color:#4a5560}
#schoolboard-layout .sb-card-go{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:13px;font-weight:700;color:var(--sb-blue);
}
#schoolboard-layout .sb-card-go::after{content:"\2192";color:var(--sb-gold);font-weight:700;transition:transform .15s}
#schoolboard-layout a.sb-issue-card:hover .sb-card-go::after{transform:translateX(3px)}

/* brief body: section labels under the serif h1 (the converter renders ## as h3) */
#schoolboard-layout .sb-issue-body h3{
  position:relative;margin:38px 0 12px;padding-top:14px;
  border-top:1px solid var(--sb-line);
  font-family:"Poppins",system-ui,sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sb-blue);
}
#schoolboard-layout .sb-issue-body h3::before{
  content:"";position:absolute;top:-1px;left:0;width:32px;height:3px;
  background:var(--sb-gold);border-radius:2px;
}
#schoolboard-layout .sb-issue-body>h3:first-child{margin-top:8px;padding-top:0;border-top:none}
#schoolboard-layout .sb-issue-body>h3:first-child::before{display:none}
#schoolboard-layout .sb-issue-body h4{margin:24px 0 8px;font-size:15px;font-weight:700;color:var(--sb-ink)}

/* reference lists ("What the Board has said", "Helpful resources"): rows, not bullets */
#schoolboard-layout .sb-prose ul.sb-reflist{list-style:none;margin:4px 0 22px;padding:0;display:grid;gap:8px}
#schoolboard-layout .sb-prose .sb-reflist>li{
  margin:0;padding:11px 16px;background:#fff;border:1px solid var(--sb-line);
  border-radius:8px;box-shadow:var(--sb-shadow);
  font-size:14px;line-height:1.6;color:var(--sb-muted);
  transition:border-color .15s;
}
#schoolboard-layout .sb-prose .sb-reflist>li:hover{border-color:#b9d4e6}
#schoolboard-layout .sb-prose .sb-reflist>li>a{color:var(--sb-blue);font-weight:600;text-decoration:none}
#schoolboard-layout .sb-prose .sb-reflist>li>a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Town-report step numerals --------------------------------------------
   Only for true sequences (budget process, policy adoption) — outlined serif
   numerals like a printed report, never for resource lists. */
#schoolboard-layout .sb-steps{list-style:none;counter-reset:sb-step;margin:18px 0 22px;padding:0}
#schoolboard-layout .sb-steps>li{
  counter-increment:sb-step;position:relative;
  margin:0;padding:1px 0 24px 58px;font-size:15px;line-height:1.7;color:#33414c;
}
#schoolboard-layout .sb-steps>li::before{
  content:counter(sb-step);position:absolute;left:0;top:0;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  font-family:"Merriweather",Georgia,serif;font-size:17px;font-weight:700;
  color:var(--sb-gold-deep);background:#fff;
  border:1px solid var(--sb-line);border-radius:50%;
}
#schoolboard-layout .sb-steps>li::after{
  content:"";position:absolute;left:18px;top:42px;bottom:4px;width:1px;background:var(--sb-line);
}
#schoolboard-layout .sb-steps>li:last-child{padding-bottom:2px}
#schoolboard-layout .sb-steps>li:last-child::after{display:none}
#schoolboard-layout .sb-steps>li>strong{display:block;margin-bottom:2px;color:var(--sb-ink)}
/* milestones variant: short text markers ("Fall", "March") instead of numerals */
#schoolboard-layout .sb-steps--milestones>li{padding-left:78px}
#schoolboard-layout .sb-steps--milestones>li::before{
  content:attr(data-step);width:56px;height:26px;top:3px;border-radius:14px;
  font-size:12px;letter-spacing:.02em;
}
#schoolboard-layout .sb-steps--milestones>li::after{left:28px;top:35px}

/* ---- Ridgeline divider (used at most once per page) ------------------------ */
#schoolboard-layout .sb-ridge-rule{
  height:14px;max-width:780px;margin:38px auto;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16' fill='none' stroke='%23F8A807' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 13 L20 3.5 L33 9.5 L47 6 L78 12.5'/></svg>") center/72px 14px no-repeat,
    linear-gradient(var(--sb-line),var(--sb-line)) left center/calc(50% - 56px) 1px no-repeat,
    linear-gradient(var(--sb-line),var(--sb-line)) right center/calc(50% - 56px) 1px no-repeat;
}

/* ---- Next-meeting CTA (Overview + Meetings; built from content/meetings/) -- */
#schoolboard-layout .sb-nextmeeting{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  max-width:780px;margin:0 auto 26px;
  padding:18px 22px;background:#fff;
  border:1px solid var(--sb-line);border-left:4px solid var(--sb-blue);
  border-radius:0 10px 10px 0;box-shadow:var(--sb-shadow);
}
#schoolboard-layout .sb-nextmeeting-kicker{
  margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sb-blue);
}
#schoolboard-layout .sb-nextmeeting-date{
  margin:0;font-family:"Merriweather",Georgia,serif;
  font-size:20px;font-weight:700;color:var(--sb-ink);line-height:1.3;
}
#schoolboard-layout .sb-nextmeeting-detail{margin:3px 0 0;font-size:13px;font-weight:600;color:var(--sb-muted)}
#schoolboard-layout .sb-nextmeeting-note{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:#4a5560}
#schoolboard-layout .sb-nextmeeting-go{margin:0;display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:center}

/* ---- The meeting log: one row per past meeting; records accumulate --------- */
#schoolboard-layout .sb-mtg-log{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
#schoolboard-layout .sb-mtg-row{
  display:grid;grid-template-columns:118px 1fr;gap:16px;
  padding:14px 18px;background:#fff;border:1px solid var(--sb-line);
  border-radius:var(--sb-radius);box-shadow:var(--sb-shadow);
}
#schoolboard-layout .sb-mtg-when time{display:block;font-size:13.5px;font-weight:700;color:var(--sb-ink);line-height:1.35}
#schoolboard-layout .sb-mtg-wd{display:block;margin-top:2px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--sb-muted)}
#schoolboard-layout .sb-mtg-title{margin:0;font-size:14.5px;font-weight:700;color:var(--sb-ink)}
#schoolboard-layout .sb-mtg-notes{margin:3px 0 0;font-size:13px;line-height:1.6;color:#4a5560}
#schoolboard-layout .sb-mtg-records{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px}
#schoolboard-layout .sb-mtg-records a{
  display:inline-flex;align-items:center;padding:4px 13px;border:1px solid var(--sb-line);
  border-radius:16px;background:#fff;font-size:12px;font-weight:600;color:var(--sb-blue);
  text-decoration:none;transition:border-color .12s,background .12s;
}
#schoolboard-layout .sb-mtg-records a:hover{border-color:var(--sb-blue);background:var(--sb-blue-soft)}
#schoolboard-layout .sb-mtg-records a.sb-mtg-pending{border-style:dashed;color:var(--sb-muted)}
#schoolboard-layout .sb-mtg-title a{color:var(--sb-ink);text-decoration:none}
#schoolboard-layout .sb-mtg-title a:hover{color:var(--sb-blue);text-decoration:underline;text-underline-offset:3px}

/* upcoming meetings: compact schedule strip (replaces two-up card grid) */
#schoolboard-layout .sb-mtg-schedule{list-style:none;margin:0;padding:0;border-top:1px solid var(--sb-line)}
#schoolboard-layout .sb-mtg-schedule li{border-bottom:1px solid var(--sb-line)}
#schoolboard-layout .sb-mtg-schedule li.sb-mtg-sch-year{
  padding:14px 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sb-muted);border-bottom:none;
}
#schoolboard-layout .sb-mtg-schedule li a{
  display:flex;align-items:baseline;gap:0;padding:9px 0;
  color:inherit;text-decoration:none;
}
#schoolboard-layout .sb-mtg-schedule li a:hover .sb-mtg-sch-title{
  color:var(--sb-blue);text-decoration:underline;text-underline-offset:3px;
}
#schoolboard-layout .sb-mtg-schedule time{
  flex:0 0 72px;font-size:.8125rem;font-weight:600;color:var(--sb-muted);
  font-variant-numeric:tabular-nums;padding-top:1px;
}
#schoolboard-layout .sb-mtg-sch-title{flex:1;font-size:.9375rem;color:var(--sb-ink)}
#schoolboard-layout .sb-mtg-sch-note{
  font-size:.8125rem;color:var(--sb-muted);margin-left:10px;flex:0 1 auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;
}
#schoolboard-layout .sb-mtg-sch-footer{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* ---- tabs (Upcoming / Recent on the Meetings page) ---------------------- */
#schoolboard-layout .sb-tabs{display:flex;gap:0;border-bottom:2px solid var(--sb-line);margin-bottom:24px}
#schoolboard-layout .sb-tab-btn{
  background:none;border:none;padding:9px 20px 10px;cursor:pointer;
  font:600 .9375rem/1 'Poppins',sans-serif;color:var(--sb-muted);
  border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s;
}
#schoolboard-layout .sb-tab-btn:hover{color:var(--sb-blue)}
#schoolboard-layout .sb-tab-btn[aria-selected="true"]{color:var(--sb-blue);border-bottom-color:var(--sb-blue)}
#schoolboard-layout .sb-tab-panel[hidden]{display:none}

/* the embedded posted doc (Google Doc /preview — an iframe needs no JS) */
#schoolboard-layout .sb-mtg-doc{
  border:1px solid #dde6ec;border-top:4px solid var(--sb-blue);border-radius:8px;
  overflow:hidden;box-shadow:0 1px 3px rgba(16,42,67,.08),0 14px 36px rgba(16,42,67,.09);
  background:#fff;
}
#schoolboard-layout .sb-mtg-doc iframe{display:block;width:100%;height:min(75vh,860px);border:0}
#schoolboard-layout .sb-mtg-doc-open{margin:10px 0 0;font-size:13px}
#schoolboard-layout .sb-mtg-doc-open a{color:var(--sb-blue);font-weight:600;text-decoration:none}
#schoolboard-layout .sb-mtg-doc-open a:hover{text-decoration:underline;text-underline-offset:3px}

/* the embedded meeting recording (Mad River Valley TV on YouTube — 16:9, no JS) */
#schoolboard-layout .sb-mtg-video{
  position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  border:1px solid #dde6ec;border-top:4px solid var(--sb-gold);background:#000;
  box-shadow:0 1px 3px rgba(16,42,67,.08),0 14px 36px rgba(16,42,67,.09);
}
#schoolboard-layout .sb-mtg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- Responsive (rules defined below the earlier media blocks) ------------- */
@media (max-width:900px){
  #schoolboard-layout .sb-wayfind{grid-template-columns:repeat(2,1fr)}
  #schoolboard-layout .sb-wayfind>.sb-card{grid-column:auto}
  #schoolboard-layout .sb-wayfind>.sb-card:nth-child(n+4){grid-column:auto}
}
@media (max-width:640px){
  #schoolboard-layout .sb-wayfind{grid-template-columns:1fr}
  #schoolboard-layout .sb-issuegrid{grid-template-columns:1fr}
  #schoolboard-layout .sb-issuegrid>.sb-issue-card:first-child:nth-last-child(odd){grid-column:auto}
  #schoolboard-layout .sb-steps>li{padding-left:50px}
  #schoolboard-layout .sb-steps--milestones>li{padding-left:70px}
  #schoolboard-layout .sb-nextmeeting{grid-template-columns:1fr}
  #schoolboard-layout .sb-nextmeeting-go{flex-direction:row;flex-wrap:wrap}
  #schoolboard-layout .sb-mtg-row{grid-template-columns:1fr;gap:6px}
  #schoolboard-layout .sb-mtg-upcoming{grid-template-columns:1fr}
}