@import url('https://fonts.googleapis.com/css2?family=Electrolize&family=Inter:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --td: #193C3C;
  --tm: #00505A;
  --tl: #E6F0F1;
  --gold: #A59664;
  --red: #A32D2D;
  --red-light: #FCEBEB;
  --blue: #185FA5;
  --blue-light: #E6F1FB;
  --green: #3B6D11;
  --green-light: #EAF3DE;
  --text: #1a1a1a;
  --text-muted: #555;
  --border: #dde3e3;
  --bg: #f5f7f7;
  --white: #fff;
  /* Side padding that lines full-width bands (topbar, hero, next-bar, footer) up
     with the 1100px content column. % resolves against the page width. */
  --edge: max(40px, calc((100% - 1100px) / 2 + 40px));
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

a { text-decoration: none; color: inherit; }

.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--edge);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.seal {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Electrolize', monospace;
  font-size: 11px;
  color: var(--td);
  font-weight: 600;
  flex-shrink: 0;
}
.seal-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.brand-name {
  font-family: 'Electrolize', monospace;
  font-size: 14px;
  color: var(--td);
  letter-spacing: 0.04em;
}
.back-link {
  font-size: 13px;
  color: rgba(25,60,60,0.55);
  text-decoration: none;
  transition: color 0.15s;
}
.back-link:hover { color: var(--td); }

.hero {
  background: var(--td);
  padding: 36px var(--edge) 30px;
  border-bottom: 3px solid var(--gold);
}
.hero-label {
  font-family: 'Electrolize', monospace;
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.hero h1 {
  font-family: 'Electrolize', monospace;
  font-size: 28px;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.hero p {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  max-width: 560px;
  line-height: 1.6;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.breadcrumb a {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.breadcrumb a:hover { color: #fff; }
.breadcrumb span {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
}

.next-bar {
  background: var(--tl);
  border-bottom: 1px solid var(--border);
  padding: 12px var(--edge);
  display: flex;
  align-items: center;
  gap: 10px;
}
.next-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tm);
  flex-shrink: 0;
  opacity: 0.4;
}
.next-dot.active {
  opacity: 1;
  animation: nextDotPulse 2s ease-in-out infinite;
}
@keyframes nextDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(0,80,90,0.5); }
  50% { transform: scale(1.4); opacity: 0.8; box-shadow: 0 0 6px 3px rgba(0,80,90,0.3); }
}
.next-text {
  font-size: 13px;
  color: var(--tm);
}
.next-text strong { font-weight: 500; }
.next-link {
  margin-left: 12px;
  font-weight: 500;
  color: var(--tm);
  white-space: nowrap;
}
.next-link:hover { text-decoration: underline; }

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 24px 40px 0;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.stat-tile {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
}
/* .stat-tile-accent no longer draws a bar; the class stays so pages that
   style it further (e.g. elections.html) keep working. */
/* A stat tile that opens a page (e.g. Next meeting -> its folder page) */
a.stat-tile-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms ease, transform 120ms ease-out;
}
a.stat-tile-link:active { transform: scale(0.99); }
a.stat-tile-link:focus-visible { outline: 2px solid var(--tm); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  a.stat-tile-link:hover { border-color: var(--gold); }
}

.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.stat-value {
  font-family: 'Electrolize', monospace;
  font-size: 20px;
  color: var(--td);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.stat-sub {
  font-size: 12px;
  color: var(--tm);
}

.page-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 40px 60px;
  width: 100%;
}

.section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 14px;
}

.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}
.folder-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s, transform 0.15s;
}
.folder-card:hover {
  border-color: var(--tm);
  transform: translateY(-2px);
}
.folder-top {
  background: var(--td);
  padding: 18px 18px 14px;
}
.folder-icon-wrap {
  margin-bottom: 10px;
}
.folder-name {
  font-family: 'Electrolize', monospace;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.folder-bottom {
  padding: 14px 18px;
}
.folder-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.folder-count {
  font-size: 12px;
  color: var(--tm);
  font-weight: 500;
}
.folder-arrow {
  font-size: 12px;
  color: var(--tm);
  margin-top: 10px;
}

.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filter-btn {
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.filter-btn:hover { border-color: var(--tm); color: var(--tm); }
.filter-btn.active { background: var(--td); color: #fff; border-color: var(--td); }

.quick-section { margin-top: 36px; }

/* "See all meetings" button under a list cut to the 5 most recent
   (seeAllHtml in shared.js) */
.see-all-wrap { display: flex; justify-content: center; margin-top: 12px; }
.see-all {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  height: 32px;
  padding: 0 18px;
  border-radius: 20px;
  border: 1px solid var(--tm);
  background: var(--white);
  color: var(--tm);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms ease-out;
}
.see-all:active { transform: scale(0.97); }
.see-all:focus-visible { outline: 2px solid var(--tm); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .see-all:hover { background: var(--tm); color: #fff; }
}
.quick-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}
.quick-head {
  background: var(--td);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.quick-head-title {
  font-family: 'Electrolize', monospace;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.02em;
}
/* Status badge and the Town Board page's Watch chip (.quick-watch) are
   the same size so the meeting headers line up. */
.meeting-badge,
.quick-watch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  min-width: 84px;
  height: 22px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
/* darker gold than var(--gold) so the white text stays readable */
.badge-upcoming { background: #7A6A3A; color: #fff; }
.badge-complete { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); }
.badge-special { background: var(--tm); color: #fff; }

.file-list {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
  gap: 12px;
}
.file-row:last-child { border-bottom: none; }
.file-row:hover { background: #fafcfc; }
.file-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.file-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Electrolize', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.icon-pdf { background: var(--red-light); color: var(--red); }
.icon-doc { background: var(--blue-light); color: var(--blue); }
.icon-xlsx { background: var(--green-light); color: var(--green); }
.icon-file { background: #f0f0f0; color: #666; }
.icon-video { background: #F5F2EC; color: #7A6A3A; }
.file-info { min-width: 0; }
.file-name {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.file-date { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.file-tag {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 16px;
  padding: 0 6px;
  font-size: 9px;
  line-height: 1;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 400;
  white-space: nowrap;
  vertical-align: middle;
}
/* Tags at the end of a line of text (search results, All Agendas &
   Minutes): centered on the text, 6px apart and 6px after the date */
.tag-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.tag-agenda { background: var(--tl); color: var(--tm); }
.tag-minutes { background: #FAEEDA; color: #854F0B; }
.tag-draft { background: var(--red-light); color: var(--red); }
.tag-recording { background: #F5F2EC; color: #7A6A3A; }
/* View / Watch buttons: one size everywhere (.file-view in file lists,
   .quick-view on the Town Board page), with the arrow drawn as an icon
   (BTN_ARROW in shared.js) and centered on the text. */
.file-view,
.quick-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-width: 84px;
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--tm);
  border: 1px solid var(--tm);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms ease-out;
}
.file-view:active,
.quick-view:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .file-view:hover,
  .quick-view:hover { background: var(--tm); color: #fff; }
}
.btn-arrow { flex-shrink: 0; display: block; }

.no-docs {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.quick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  transition: background 0.1s;
}
.quick-row:last-child { border-bottom: none; }
.quick-row:hover { background: #fafcfc; }
.quick-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.quick-name { font-size: 13px; color: var(--text); font-weight: 500; }
.quick-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.error-msg {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

footer {
  background: var(--td);
  padding: 18px var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}
footer span { font-size: 12px; color: rgba(255,255,255,0.45); }
footer a { font-size: 12px; color: var(--gold); text-decoration: none; }

@media (max-width: 700px) {
  .topbar { padding: 0 16px; height: 50px; }
  .brand-name { font-size: 11px; }
  .hero { padding: 24px 16px 20px; }
  .hero h1 { font-size: 22px; }
  .next-bar { padding: 10px 16px; }
  .stat-tiles { grid-template-columns: 1fr 1fr; padding: 16px 16px 0; gap: 10px; }
  .stat-tiles .stat-tile:first-child { grid-column: 1 / -1; }
  .stat-value { font-size: 17px; }
  .page-body { padding: 20px 16px 40px; }
  .folder-grid { grid-template-columns: 1fr; gap: 12px; }
  .file-row { padding: 10px 12px; }
  .file-name { font-size: 12px; }
  footer { padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------- Records Portal topbar (inner pages) ---------- */
.topbar-portal { height: 64px; }
.portal-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border-radius: 8px;
}
.portal-brand:focus-visible,
.town-link:focus-visible,
.topbar-portal .back-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.portal-brand-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: block;
}
.portal-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.portal-brand-name {
  font-family: 'Electrolize', monospace;
  font-size: 19px;
  color: var(--td);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.portal-brand-sub {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 3px;
  white-space: nowrap;
}
.topbar-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.town-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 20px;
  border-left: 1px solid var(--border);
  font-size: 13px;
  color: rgba(25,60,60,0.55);
  transition: color 0.15s;
}
.town-link:hover { color: var(--td); }
.town-link .seal-logo { width: 28px; height: 28px; }

@media (max-width: 700px) {
  .topbar-portal { height: 56px; }
  .portal-brand-icon { width: 32px; height: 32px; }
  .portal-brand-name { font-size: 16px; }
  .portal-brand-sub { font-size: 8.5px; letter-spacing: 0.08em; }
  .topbar-portal .back-link,
  .town-link-text { display: none; }
  .town-link { padding-left: 0; border-left: 0; }
}
.town-link-solo { padding-left: 0; border-left: 0; }

/* ---------- Site-wide search (top bar) ---------- */
/* The top bar is a 3-column grid: brand | search | links. The two outer
   columns share the leftover space equally, so the search box sits at the
   exact center of the page whenever there is room. Each column is at least
   as wide as its content, so nothing can overlap: on tighter screens the
   right-side links shrink first (see breakpoints below), then the search
   box narrows, and under 700px it becomes an icon. */
.topbar-portal {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  column-gap: 24px;
}
.topbar-portal .portal-brand { grid-column: 1; justify-self: start; }
.topbar-portal .portal-search { grid-column: 2; }
.topbar-portal .topbar-links { grid-column: 3; justify-self: end; }
.portal-search {
  display: flex;
  justify-content: center;
  /* Narrows as the window narrows so it can stay centered between the
     logo and the links for as long as possible. Capped at 310px so the
     links fit inside the 1100px content column on wide screens. */
  width: clamp(200px, calc(100vw - 740px), 310px);
  min-width: 0;
}
.ps-open { display: none; }
.ps-field {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.ps-icon {
  position: absolute;
  left: 12px;
  color: rgba(25,60,60,0.45);
  pointer-events: none;
}
.ps-input {
  width: 100%;
  height: 38px;
  padding: 0 34px 0 36px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--bg);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.ps-input::-webkit-search-cancel-button { display: none; }
.ps-input::placeholder { color: rgba(25,60,60,0.45); }
.ps-input:hover { border-color: #c5d0d0; }
.ps-input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--tm);
  box-shadow: 0 0 0 3px rgba(0,80,90,0.12);
}
.ps-clear {
  position: absolute;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ps-clear:hover { background: var(--tl); color: var(--td); }
.ps-close { display: none; }

.ps-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 64px;               /* set to the bottom of the top bar by shared.js */
  background: rgba(25,60,60,0.18);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.ps-backdrop.is-open { opacity: 1; pointer-events: auto; }
.ps-panel {
  position: fixed;
  left: 16px;
  right: 16px;
  margin: 0 auto;
  max-width: 760px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(25,60,60,0.18);
  z-index: 1000;
}
/* Opening: the panel is revealed top-down like a pull-down shade.
   Closed state keeps it clipped away and hidden from screen readers. */
.ps-panel {
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  pointer-events: none;
  transition:
    clip-path 200ms cubic-bezier(0.32, 0.72, 0, 1),
    height 240ms cubic-bezier(0.23, 1, 0.32, 1),
    visibility 0s linear 200ms;
}
.ps-panel.is-open {
  clip-path: inset(0 0 -48px 0);   /* negative bottom keeps the drop shadow visible */
  visibility: visible;
  pointer-events: auto;
  transition:
    clip-path 280ms cubic-bezier(0.32, 0.72, 0, 1),
    height 240ms cubic-bezier(0.23, 1, 0.32, 1),
    visibility 0s;
}
.ps-result.ps-enter { animation: psRowIn 220ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes psRowIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-panel, .ps-panel.is-open { clip-path: none; transition: opacity 150ms ease, visibility 0s linear 150ms; opacity: 0; }
  .ps-panel.is-open { opacity: 1; transition: opacity 150ms ease, visibility 0s; }
  .ps-result.ps-enter { animation: none; }
}
.ps-body { padding: 16px 20px 20px; }
.ps-summary { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.ps-status { font-size: 13px; color: var(--text-muted); padding: 12px 0; }
.ps-status-inline { font-size: 11px; padding: 0 0 4px; }
.ps-empty { font-size: 13px; color: var(--text-muted); padding: 20px 0 8px; line-height: 1.6; }
.ps-empty-sm { padding: 6px 0 4px; }
.ps-group { margin-top: 14px; }
.ps-group-title {
  font-family: 'Electrolize', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tm);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.ps-group-title span {
  font-family: 'Inter', sans-serif;
  color: var(--text-muted);
  letter-spacing: 0;
  margin-left: 4px;
}
.ps-result {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.ps-result:last-of-type { border-bottom: none; }
.ps-result-body { min-width: 0; flex: 1; }
.ps-result-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--td);
  text-decoration: none;
}
.ps-result-title:hover { text-decoration: underline; text-underline-offset: 2px; }
.ps-result-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
.ps-result-meta a {
  color: var(--tm);
  text-decoration: underline;
  text-decoration-color: rgba(0,80,90,0.3);
  text-underline-offset: 2px;
}
/* Same box and text size as .file-tag (16px tall, 9px caps) */
.ps-chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 16px;
  padding: 0 6px;
  font-size: 9px;
  line-height: 1;
  font-weight: 400;
  color: var(--td);
  background: var(--tl);
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ps-snippet {
  font-size: 12px;
  line-height: 1.55;
  color: #3d4a4a;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
.ps-panel mark {
  background: #F6EDC9;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.ps-more {
  margin-top: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--tm);
  background: var(--white);
  border: 1px solid var(--tm);
  border-radius: 4px;
  padding: 5px 14px;
  cursor: pointer;
}
.ps-more:hover { background: var(--tl); }

@media (max-width: 1100px) {
  .topbar-portal .back-link { display: none; }
  /* With the back link hidden, drop the divider in front of the seal link */
  .topbar-portal .town-link { padding-left: 0; border-left: 0; }
}
@media (max-width: 880px) {
  .topbar-portal { column-gap: 16px; }
  .topbar-portal .town-link-text { display: none; }
  .topbar-portal .town-link { padding-left: 0; border-left: 0; }
}
@media (max-width: 700px) {
  .topbar-portal {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 10px;
  }
  .topbar-portal .portal-brand { min-width: 0; max-width: 100%; }
  .portal-brand-name,
  .portal-brand-sub { overflow: hidden; text-overflow: ellipsis; }
  .portal-search { width: auto; }
  .ps-field { display: none; }
  .ps-open {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--white);
    color: var(--td);
    cursor: pointer;
  }
  .topbar-portal.ps-mobile-open .portal-search {
    /* grid-column:auto makes the overlay cover the whole bar rather than
       just the search column */
    grid-column: auto;
    width: auto;
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0 12px;
    background: var(--white);
    z-index: 5;
    align-items: center;
  }
  .topbar-portal.ps-mobile-open .ps-open { display: none; }
  .topbar-portal.ps-mobile-open .ps-field { display: flex; max-width: none; gap: 8px; }
  .topbar-portal.ps-mobile-open .ps-clear { right: 80px; }
  .ps-close {
    display: block;
    flex-shrink: 0;
    border: 0;
    background: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--tm);
    padding: 8px 4px;
    cursor: pointer;
  }
  .ps-input { font-size: 16px; }
  .ps-panel { left: 8px; right: 8px; }
  .ps-body { padding: 12px 14px 16px; }
}
@media (max-width: 374px) {
  .portal-brand-sub { display: none; }
}

/* =====================================================================
   Document type tags (shared.js getDocType / typeTagHtml)
   One color per family, used on every page that lists files.
   ===================================================================== */
.file-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.file-meta .file-date { margin-top: 0; }
.type-agenda  { background: var(--tl); color: var(--tm); }
.type-minutes { background: #FAEEDA; color: #854F0B; }
.type-legal   { background: #EEEAF8; color: #4B3A8C; }
.type-finance { background: var(--green-light); color: var(--green); }
.type-corresp { background: #F5F2EC; color: #6B5A2E; }
.type-notice  { background: var(--blue-light); color: var(--blue); }
.type-ref     { background: #FBEAF2; color: #8A2C5C; }

/* =====================================================================
   Meeting folders (shared.js renderMeetingFolders)
   ===================================================================== */
[hidden] { display: none !important; }

/* Plain folder sections: meetings without numbered folders */
.subfolder-section { margin-top: 2rem; }
.subfolder-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 2px solid var(--gold);
}
.subfolder-icon { display: flex; color: var(--gold); }
.subfolder-name {
  font-family: 'Electrolize', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--td);
  letter-spacing: 0.02em;
}
.subfolder-count { font-size: 0.8rem; color: #666; margin-left: auto; }

/* Inner folder groups (e.g. Financial > October Regular Meeting - Financial Documents) */
.doc-group-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  background: #F5F2EC;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--td);
}
.doc-group-head svg { color: var(--gold); flex-shrink: 0; }
.doc-group-count { font-weight: 400; color: var(--text-muted); }
.doc-group-count::before { content: "\00b7\00a0"; }
/* .file-row:last-child drops the bottom line inside each group, so the next
   group's header draws the divider instead */
.doc-group + .doc-group .doc-group-head { border-top: 1px solid var(--border); }

.filter-empty { margin-bottom: 14px; }

/* Agenda item sections: numbered folders, collapsible */
.agenda-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.agenda-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.agenda-item-heading { margin: 0; font-size: inherit; font-weight: inherit; }
.agenda-item-toggle {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--white);
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.agenda-item-toggle:active { background: #eef3f3; }
.agenda-item-toggle:focus-visible { outline: 2px solid var(--tm); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .agenda-item-toggle:hover { background: #fafcfc; }
}
/* 32px, the same width as the file icons, so badge and icons line up in one column */
.agenda-num {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--td);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Electrolize', sans-serif;
  font-size: 16px;
  flex-shrink: 0;
}
.agenda-num-folder {
  background: #F5F2EC;
  color: #7A6A3A;
  border: 1px solid var(--gold);
}
.agenda-title {
  font-family: 'Electrolize', sans-serif;
  font-size: 17px;
  color: var(--td);
  min-width: 0;
}
/* Same box and text size as .file-tag (16px tall, 9px caps) */
.agenda-count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 16px;
  font-size: 9px;
  line-height: 1;
  color: var(--text-muted);
  background: var(--tl);
  border-radius: 3px;
  padding: 0 6px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.agenda-chevron {
  color: var(--tm);
  flex-shrink: 0;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.agenda-item.open .agenda-chevron { transform: rotate(180deg); }
.agenda-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.agenda-item.open .agenda-panel { grid-template-rows: 1fr; }
.agenda-panel-inner { min-height: 0; overflow: hidden; }
.agenda-item.open .agenda-panel-inner { border-top: 1px solid var(--border); }
.agenda-panel-inner .no-docs { padding: 20px; }
.agenda-toggle-all {
  margin-left: auto;
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  color: var(--tm);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 8px 4px;
  min-height: 36px;
  cursor: pointer;
}
@media (max-width: 600px) {
  .doc-group-name { flex-basis: calc(100% - 24px); }
  .doc-group-count { margin-left: 24px; }
  .doc-group-count::before { content: none; }
  .agenda-item-toggle { gap: 10px; }
  .agenda-title { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .agenda-panel, .agenda-chevron { transition: none; }
}