/* Public library (civic directory) + town hub — the anonymous front door.
   Standalone stylesheet: these pages deliberately do NOT load style.css
   (the app shell's chrome does not belong on the civic front door).
   Fonts come from the shared self-hosted fonts.css. Palette mirrors
   static/tokens.css. The library home (`.plib-home`, the `.plh-*` block at
   the end) adds a forest-green accent of its own; the town pages keep
   teal. */

@import url('fonts.css');

/* ---- Base ---- */
:root {
  --plib-navy: #1a2744;
  --plib-navy-light: #243556;
  --plib-navy-deep: #0f1a2e;
  --plib-teal: #1a7a6d;
  --plib-teal-hover: #2f9e8d;
  --plib-teal-deep: #15665b;
  --plib-teal-subtle: #e8f5f3;
  --plib-teal-pale: #f3faf8;
  --plib-sand: #f8f6f2;
  --plib-sand-dark: #ede9e3;
  --plib-sand-deeper: #e2dcd1;
  --plib-warm-gray: #6b6560;
  --plib-warm-line: #d9d3c8;
  --plib-bg: #f4f5f8;
  --plib-border: #e2e8f0;
  --plib-border-strong: #cbd2dc;
  --plib-border-light: #f1f5f9;
  --plib-text: #1e293b;
  --plib-text-2: #475569;
  --plib-muted: #64748b;
  --plib-faint: #94a3b8;
  --plib-amber-ink: #92400e;
  --plib-amber-mid: #b45309;
  --plib-amber-bg: #fff8eb;
  --plib-amber-line: #f3dfb8;
  --plib-amber-chip: #fef3c7;
  --plib-green: #15803d;
  --plib-serif: 'Fraunces', Georgia, serif;
  --plib-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --plib-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.plib-body {
  margin: 0;
  background: var(--plib-bg);
  color: var(--plib-text);
  font-family: var(--plib-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.plib-body * { box-sizing: border-box; }
.plib-body a { color: var(--plib-teal); text-decoration: none; }
.plib-body a:hover { color: var(--plib-teal-deep); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .plib-body * { transition: none !important; animation: none !important; }
}
.plib-body :focus-visible {
  outline: 3px solid var(--plib-teal);
  outline-offset: 2px;
}
.plib-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}

/* ---- Header (light, matching landing.html / security.html nav) ---- */
.plib-header { background: #ffffff; border-bottom: 1px solid var(--plib-border); }
.plib-header-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 2rem; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.plib-brand { display: flex; align-items: center; gap: 0.625rem; min-width: 0; text-decoration: none; color: var(--plib-navy); }
.plib-brand:hover { text-decoration: none; color: var(--plib-navy); }
.plib-brand-mark { flex-shrink: 0; }
.plib-brand-name {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--plib-navy); white-space: nowrap;
}
.plib-brand-lib {
  font-size: 13px; color: var(--plib-muted); white-space: nowrap;
  padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--plib-border);
}
.plib-nav { display: flex; align-items: center; gap: 2rem; flex-shrink: 0; font-size: 0.875rem; }
.plib-nav a { font-weight: 500; color: var(--plib-text-2); }
.plib-nav a:hover { color: var(--plib-navy); text-decoration: none; }
.plib-signin {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--plib-navy); border-radius: 6px;
  padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 500;
  background: transparent; transition: all 200ms ease;
}
.plib-nav a.plib-signin { color: var(--plib-navy); }
.plib-nav a.plib-signin:hover { background: var(--plib-navy); color: #ffffff; text-decoration: none; }

/* Create free account — the primary of the two auth affordances. The header
   used to offer "Sign in" alone, so a visitor without an account had to go
   through the sign-in page to find signup. Filled against the outlined
   Sign in so the new-visitor path reads as the primary one. */
.plib-signup {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--plib-navy); border-radius: 6px;
  padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 600;
  background: var(--plib-navy); transition: all 200ms ease;
}
.plib-nav a.plib-signup { color: #ffffff; }
.plib-nav a.plib-signup:hover { background: #24365c; border-color: #24365c; color: #ffffff; text-decoration: none; }
@media (max-width: 700px) { .plib-signup { display: none; } }

/* "The headline settles": Fraunces is a variable font, so the headline can
   arrive light and wide and settle into its weight — the type itself
   moving rather than a box sliding in. `font-variation-settings` reads
   the file's own axes (wght 100-900, opsz 9-144), which the @font-face
   `font-weight: 400 700` descriptor governs selection for but does not
   clamp. If the font hasn't loaded, the letter-spacing and opacity halves
   of the keyframe still read correctly against the fallback stack. */
.plib-h1 {
  font-family: var(--plib-serif); font-size: 42px; line-height: 1.14; font-weight: 600;
  color: var(--plib-navy); letter-spacing: -0.02em; margin: 0 0 14px; text-wrap: pretty;
  animation: plib-settle 1000ms cubic-bezier(0.22,1,0.36,1) backwards 120ms;
}
@keyframes plib-settle {
  from {
    font-variation-settings: "opsz" 144, "wght" 330;
    letter-spacing: 0.022em; opacity: 0.55;
  }
  to {
    font-variation-settings: "opsz" 144, "wght" 600;
    letter-spacing: -0.02em; opacity: 1;
  }
}
.plib-lede {
  font-size: 16.5px; line-height: 1.6; color: var(--plib-text-2);
  margin: 0 auto 30px; max-width: 660px; text-wrap: pretty;
}
/* ---- Main band: map + list ---- */
.plib-container { max-width: 1440px; margin: 0 auto; }


.plib-badge {
  font-size: 11.5px; font-weight: 500; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.plib-badge-zoning { color: var(--plib-teal-deep); background: var(--plib-teal-subtle); }
.plib-badge-sub { color: #2c5282; background: #ebf2fa; }
.plib-badge-unavail {
  font-size: 11.5px; color: var(--plib-text-2); background: #ffffff;
  border: 1px solid var(--plib-border-strong); border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}

.plib-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--plib-teal); margin-bottom: 8px;
}
.plib-btn-primary {
  display: inline-flex; align-items: center; gap: 8px; background: var(--plib-navy);
  color: #ffffff; font-size: 14px; font-weight: 500; padding: 11px 20px;
  border-radius: 6px; white-space: nowrap; min-height: 44px;
}
.plib-body a.plib-btn-primary { color: #ffffff; }
.plib-btn-primary:hover { background: var(--plib-navy-light); color: #ffffff; text-decoration: none; }
.plib-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px; background: #ffffff;
  color: var(--plib-navy); font-size: 14px; font-weight: 500; padding: 11px 18px;
  border-radius: 6px; border: 1px solid var(--plib-border-strong); white-space: nowrap; min-height: 44px;
}
.plib-body a.plib-btn-secondary { color: var(--plib-navy); }
.plib-btn-secondary:hover { background: var(--plib-sand); color: var(--plib-navy); text-decoration: none; }

/* ---- Section bands (hearings, recent, explainer) ---- */
.plib-section { padding: 34px 48px 0; }
.plib-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.plib-h2 { font-family: var(--plib-serif); font-size: 24px; font-weight: 600; color: var(--plib-navy); margin: 0 0 5px; letter-spacing: -0.015em; }
.plib-section-sub { font-size: 14px; color: var(--plib-text-2); margin: 0; }
.plib-hearing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plib-hearing-card {
  background: #ffffff; border: 1px solid var(--plib-border); border-radius: 12px;
  padding: 20px; box-shadow: 0 1px 2px rgba(15,26,46,0.05);
  display: flex; flex-direction: column; gap: 10px;
}
.plib-hearing-card:hover { box-shadow: 0 4px 12px rgba(15,26,46,0.08); }
.plib-hearing-when { display: flex; align-items: center; gap: 9px; }
.plib-datechip {
  font-family: var(--plib-mono); font-size: 11.5px; font-weight: 500;
  color: var(--plib-text-2); background: var(--plib-border-light);
  border-radius: 4px; padding: 3px 8px;
}
.plib-datechip.is-soon { color: var(--plib-amber-ink); background: var(--plib-amber-chip); }
.plib-hearing-time { font-size: 12.5px; color: var(--plib-muted); }
.plib-hearing-town { font-size: 15px; font-weight: 600; color: var(--plib-navy); letter-spacing: -0.01em; }
.plib-hearing-summary { font-size: 13.5px; line-height: 1.55; color: var(--plib-text-2); margin: 0; flex: 1; text-wrap: pretty; }
.plib-textlink { font-size: 13px; font-weight: 500; }

.plib-recent-card {
  background: #ffffff; border: 1px solid var(--plib-border); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,26,46,0.05); overflow: hidden;
}
.plib-recent-row {
  display: flex; align-items: center; gap: 20px; padding: 15px 22px;
  border-bottom: 1px solid var(--plib-border-light);
}
.plib-recent-row:last-child { border-bottom: 0; }
.plib-recent-town { width: 150px; font-size: 14px; font-weight: 600; color: var(--plib-navy); flex-shrink: 0; }
.plib-recent-title { flex: 1; font-size: 14px; color: var(--plib-text-2); text-wrap: pretty; }
.plib-recent-date { font-family: var(--plib-mono); font-size: 12px; color: var(--plib-warm-gray); white-space: nowrap; }


/* ---- Footer (shared by every public page) ---- */
.plib-footer { background: var(--plib-navy-deep); padding: 48px 48px 30px; color: rgba(255,255,255,0.72); }
.plib-footer-inner { max-width: 1440px; margin: 0 auto; }
.plib-footer-cols { display: flex; gap: 48px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.plib-footer-brand { max-width: 620px; }
.plib-footer-title { font-family: var(--plib-serif); font-size: 22px; font-weight: 600; color: #ffffff; letter-spacing: -0.015em; margin-bottom: 12px; }
.plib-footer-brand p { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.62); margin: 0; max-width: 62ch; text-wrap: pretty; }
.plib-footer-nav { display: flex; gap: 48px; flex-shrink: 0; }
.plib-footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 172px; }
.plib-footer-col-label {
  font-family: var(--plib-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: 4px;
}
.plib-footer a { font-size: 14px; color: rgba(255,255,255,0.82); }
.plib-footer a:hover { color: #ffffff; text-decoration: none; }
.plib-footer-base {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12);
  flex-wrap: wrap;
}
.plib-footer-base span { font-size: 12.5px; color: rgba(255,255,255,0.5); }
/* Sign-off lockup (library home): the mark reversed to white on a 10%
   white square, the wordmark and tagline beside it. */
.plib-footer-signoff { display: flex; align-items: center; gap: 14px; }
.plib-footer-mark {
  width: 36px; height: 36px; padding: 6px; box-sizing: border-box; flex-shrink: 0;
  background: rgba(255,255,255,0.1); border-radius: 7px; filter: brightness(0) invert(1);
}
.plib-footer-signoff strong { display: block; font-family: var(--plib-serif); font-size: 16px; font-weight: 600; color: #ffffff; }
.plib-footer-base .plib-footer-tagline { display: block; font-size: 12.5px; color: rgba(255,255,255,0.55); margin-top: 2px; }


/* ---- Town hub ---- */
.plib-crumbbar { background: #ffffff; border-bottom: 1px solid var(--plib-border); }
.plib-crumbbar-inner {
  max-width: 1440px; margin: 0 auto; padding: 10px 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.plib-crumbs { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--plib-muted); flex-wrap: wrap; }
.plib-crumb-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.plib-crumbs a { color: var(--plib-navy); }
.plib-crumbs a:hover { color: var(--plib-teal-deep); text-decoration: none; }
.plib-crumbs .is-current { color: var(--plib-text-2); }
.plib-crumbbar-links { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.plib-crumbbar-links a { font-size: 13px; font-weight: 500; color: var(--plib-text-2); }
.plib-crumbbar-links a:hover { color: var(--plib-navy); }

.plib-hub-hero {
  background: var(--plib-sand);
  background-image: linear-gradient(rgba(26,39,68,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,39,68,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  border-bottom: 1px solid var(--plib-sand-deeper);
  padding: 44px 48px 40px;
}
.plib-hub-hero-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: flex-start; gap: 30px; }
/* The hub's identity mark: the municipality's own boundary, framed like a
   seal. See the comment in public_town_hub.html for how each shape is
   normalized. */
.plib-seal {
  width: 104px; height: 104px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--plib-warm-line); background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
}
.plib-seal-letter {
  font-family: var(--plib-serif); font-size: 44px; font-weight: 600; color: var(--plib-navy);
}
.plib-seal-shape { width: 100%; height: 100%; display: block; overflow: visible; }
.plib-seal-shape path {
  fill: var(--plib-teal-pale); stroke: var(--plib-teal); stroke-width: 1.5;
  stroke-linejoin: round;
}
.plib-hub-head { flex: 1; min-width: 0; }
.plib-hub-title {
  font-family: var(--plib-serif); font-size: 46px; line-height: 1.08; font-weight: 600;
  color: var(--plib-navy); letter-spacing: -0.022em; margin: 0 0 12px; text-wrap: pretty;
}
.plib-hub-lede { font-size: 16px; line-height: 1.6; color: var(--plib-text-2); margin: 0 0 18px; max-width: 660px; text-wrap: pretty; }
.plib-hub-facts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.plib-pill-through {
  display: inline-flex; align-items: center; gap: 8px; background: #ffffff;
  border: 1px solid var(--plib-warm-line); border-radius: 999px; padding: 7px 15px;
  font-size: 13px; color: var(--plib-navy);
}
.plib-hub-fact { font-size: 13px; color: var(--plib-warm-gray); }

.plib-doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plib-doccard {
  background: #ffffff; border: 1px solid var(--plib-border); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,26,46,0.05); padding: 26px;
}
.plib-doccard:hover { box-shadow: 0 4px 12px rgba(15,26,46,0.08); }
.plib-doccard-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.plib-doccard-head svg { flex-shrink: 0; margin-top: 2px; }
.plib-doccard-title { font-family: var(--plib-serif); font-size: 23px; font-weight: 600; color: var(--plib-navy); margin: 0 0 7px; letter-spacing: -0.015em; }
.plib-doccard-desc { font-size: 14px; line-height: 1.6; color: var(--plib-text-2); margin: 0; text-wrap: pretty; }
.plib-doccard-stats {
  display: flex; gap: 26px; padding: 14px 0; margin-bottom: 18px;
  border-top: 1px solid var(--plib-border-light); border-bottom: 1px solid var(--plib-border-light);
}
.plib-stat-value { font-family: var(--plib-mono); font-size: 20px; font-weight: 500; color: var(--plib-navy); }
.plib-stat-label { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plib-muted); margin-top: 3px; }
.plib-doccard-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.plib-downloads { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.plib-downloads-label { font-size: 13px; color: var(--plib-warm-gray); }

.plib-quicklinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.plib-quicklink {
  display: flex; align-items: center; gap: 12px; background: #ffffff;
  border: 1px solid var(--plib-border); border-radius: 10px; padding: 16px 18px; min-height: 60px;
}
.plib-quicklink:hover { border-color: var(--plib-teal); background: var(--plib-teal-pale); text-decoration: none; }
.plib-quicklink span { font-size: 14.5px; font-weight: 500; color: var(--plib-navy); }
.plib-quicklink svg { flex-shrink: 0; }

.plib-pendingpanel {
  display: flex; gap: 18px; align-items: flex-start; background: var(--plib-amber-bg);
  border: 1px solid var(--plib-amber-line); border-left: 4px solid var(--plib-amber-mid);
  border-radius: 10px; padding: 22px 24px;
}
.plib-pendingpanel svg { flex-shrink: 0; margin-top: 2px; }
.plib-pendingpanel-main { flex: 1; }
.plib-pendingpanel h3 {
  font-family: var(--plib-sans); font-size: 16.5px; font-weight: 600;
  color: var(--plib-amber-ink); margin: 0 0 6px; letter-spacing: -0.01em;
}
.plib-pendingpanel p { font-size: 14px; line-height: 1.6; color: var(--plib-amber-mid); margin: 0; max-width: 820px; text-wrap: pretty; }
.plib-btn-amber {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: #ffffff;
  color: var(--plib-amber-ink); font-size: 14px; font-weight: 500; padding: 10px 18px;
  border-radius: 6px; border: 1px solid #e0c48a; align-self: center; min-height: 44px;
}
.plib-body a.plib-btn-amber { color: var(--plib-amber-ink); }
.plib-btn-amber:hover { background: var(--plib-amber-chip); color: var(--plib-amber-ink); text-decoration: none; }

.plib-hub-bottom-pad { padding-bottom: 40px; }

/* ---- Responsive ---- */
@media (max-width: 1180px) {
  .plib-hearing-grid { grid-template-columns: repeat(2, 1fr); }
  .plib-quicklinks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .plib-header-inner { padding: 10px 18px; height: auto; flex-wrap: wrap; gap: 10px 14px; }
  .plib-brand-lib { display: none; }
  .plib-nav { gap: 16px; }
  .plib-nav .plib-nav-optional { display: none; }
  .plib-h1 { font-size: 27px; }
  .plib-lede { font-size: 14px; margin-bottom: 18px; }
  .plib-section { padding: 26px 18px 0; }
  .plib-hearing-grid { grid-template-columns: 1fr; }
  .plib-recent-row { flex-wrap: wrap; gap: 6px 14px; }
  .plib-recent-town { width: auto; }
  .plib-recent-title { flex-basis: 100%; }
  .plib-footer { padding: 26px 18px 22px; }
  .plib-footer-cols { gap: 20px; }
  .plib-footer-nav { gap: 28px; }
  .plib-crumbbar-inner { padding: 8px 18px; gap: 10px; }
  /* Keep the platform bar to one line on a phone: the brand shortens to
     "MuniAnchor" and the secondary link drops out. */
  .plib-crumb-brand-long { display: none; }
  .plib-crumbbar-links { display: none; }
  .plib-crumbs { font-size: 12.5px; gap: 7px; }
  .plib-hub-hero { padding: 26px 18px 24px; }
  .plib-hub-hero-inner { flex-direction: column; gap: 16px; }
  .plib-seal { width: 72px; height: 72px; padding: 10px; }
  .plib-seal-letter { font-size: 30px; }
  .plib-hub-title { font-size: 30px; }
  .plib-doc-grid { grid-template-columns: 1fr; }
  .plib-quicklinks { grid-template-columns: 1fr; }
  .plib-pendingpanel { flex-direction: column; }
}

/* =========================================================================
   Municipality pages (documents, reading view, definitions, dimensional,
   search, hearings, amendment). These share public_base.html, which loads
   only this stylesheet — no style.css, no Google-Fonts @import.
   ========================================================================= */

/* ---- Municipality bar + page tabs ---- */
.plib-townbar { background: #ffffff; border-bottom: 1px solid var(--plib-border); }
.plib-townbar-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap; min-height: 56px;
}
.plib-townbar-name {
  font-family: var(--plib-serif); font-size: 21px; font-weight: 600;
  color: var(--plib-navy); letter-spacing: -0.015em; white-space: nowrap;
}
.plib-body a.plib-townbar-name:hover { color: var(--plib-navy); text-decoration: none; }
.plib-tabs { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.plib-tab {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-size: 14px; font-weight: 500; color: var(--plib-text-2);
  border-bottom: 2px solid transparent;
}
.plib-tab:hover { color: var(--plib-navy); text-decoration: none; background: var(--plib-sand); }
.plib-tab.is-active { color: var(--plib-teal-deep); border-bottom-color: var(--plib-teal); font-weight: 600; }

/* ---- Generic page container ---- */
.plib-page { max-width: 1080px; margin: 0 auto; padding: 34px 2rem 56px; }
.plib-page-head { margin-bottom: 24px; }
.plib-page-title {
  font-family: var(--plib-serif); font-size: 34px; line-height: 1.14; font-weight: 600;
  color: var(--plib-navy); letter-spacing: -0.02em; margin: 0 0 10px; text-wrap: pretty;
}
.plib-page-sub { font-size: 16px; line-height: 1.6; color: var(--plib-text-2); margin: 0; max-width: 70ch; text-wrap: pretty; }
.plib-empty {
  font-size: 15px; color: var(--plib-text-2); background: #ffffff;
  border: 1px dashed var(--plib-warm-line); border-radius: 10px; padding: 22px; margin: 0;
}

/* Placeholder shown while config.PUBLIC_HEARINGS_ENABLED is False. */
.plib-comingsoon {
  font-size: 15px; line-height: 1.6; color: var(--plib-text-2); background: #ffffff;
  border: 1px dashed var(--plib-warm-line); border-radius: 10px; padding: 26px; margin: 0;
  max-width: 70ch;
}
.plib-comingsoon p { margin: 0 0 10px; text-wrap: pretty; }
.plib-comingsoon p:last-child { margin-bottom: 0; }
.plib-comingsoon-lead {
  font-family: var(--plib-serif); font-size: 19px; font-weight: 600;
  color: var(--plib-navy); letter-spacing: -0.01em;
}
.plib-comingsoon-note { font-size: 14px; opacity: 0.9; }
.plib-btn-sm { min-height: 38px; padding: 8px 14px; font-size: 13.5px; }

/* ---- Reading view: document bar ---- */
.plib-reading-main { display: block; }
.plib-docbar { background: #ffffff; border-bottom: 1px solid var(--plib-border); }
.plib-docbar-inner {
  max-width: 1440px; margin: 0 auto; padding: 10px 2rem;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.plib-docbar-title {
  font-size: 14px; font-weight: 600; color: var(--plib-navy);
  white-space: nowrap; letter-spacing: -0.01em;
}
.plib-docsearch {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; max-width: 420px;
  background: var(--plib-surface-2, #fafbfc); border: 1px solid var(--plib-border);
  border-radius: 6px; height: 38px; padding: 0 12px; margin-left: auto;
}
.plib-docsearch:focus-within { border-color: var(--plib-teal); box-shadow: 0 0 0 3px rgba(26,122,109,0.15); }
.plib-docsearch svg { flex-shrink: 0; }
.plib-docsearch-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--plib-sans); font-size: 13.5px; color: var(--plib-text); height: 100%;
}
.plib-docbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Always-visible prev/next. The rich cards at the end of the article stay
   — they are the natural end-of-reading affordance — but in the reading
   shell the article's end is the bottom of its own scroll, so the pair is
   mirrored here where it is always in reach. */
.plib-docnav { display: flex; align-items: center; gap: 4px; margin-right: 4px; }
.plib-docnav-btn {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 0 10px;
  font-size: 13px; font-weight: 500; color: var(--plib-navy);
  background: #ffffff; border: 1px solid var(--plib-warm-line); border-radius: 7px;
}
.plib-body a.plib-docnav-btn:hover {
  border-color: var(--plib-teal); color: var(--plib-teal-deep);
  background: var(--plib-teal-pale); text-decoration: none;
}
.plib-docnav-num { font-family: var(--plib-mono); font-size: 11.5px; }
.plib-docnav-btn.is-disabled { color: var(--plib-warm-gray); background: transparent; opacity: 0.5; }

/* Grid page (dimensional standards) inside the shell: the page head and the
   footnote are fixed, and the table takes the remaining height so it — not
   the page — is what scrolls. Only inside the shell's min-width query, so a
   phone still scrolls one continuous page with a naturally-tall table. */
@media (min-width: 961px) {
  /* The grid page is the one place a nested scroller is the right answer.
     On the reading views it would be wrong — prose inside a box inside a
     page. Here the content IS a data grid, and every spreadsheet UI works
     this way: the page scrolls (so the heading, the footnote and the footer
     stay reachable), and the grid is a bounded viewport inside it whose
     header row and district column hold while you read. Making the grid fill
     the pane instead would pin the footer permanently on screen, spending a
     third of a viewport that cannot scroll on boilerplate. */
  .plib-shell .plib-gridpage {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  }
  /* Centre the page's own content; the footer is deliberately excluded so
     it spans the full width, as it does everywhere else on the site. */
  .plib-shell .plib-gridpage > *:not(.plib-footer) {
    max-width: 1440px; margin-left: auto; margin-right: auto;
    padding-left: 2rem; padding-right: 2rem;
  }
  .plib-shell .plib-gridpage .plib-tablewrap { max-height: 68vh; }
  .plib-shell .plib-gridpage > .plib-footer { margin-top: 48px; }
}

/* A-Z rail for the glossary sidebar. A flowing row of 24 letters would
   force the sidebar tall; a grid keeps the whole alphabet in one glance,
   which is the point of a jump nav. */
.plib-letter-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 4px; padding: 0 8px;
}
.plib-letter-grid .plib-letter {
  display: flex; align-items: center; justify-content: center;
  min-height: 34px; border-radius: 6px;
  font-family: var(--plib-mono); font-size: 12.5px; font-weight: 500;
  color: var(--plib-navy); background: #ffffff; border: 1px solid var(--plib-warm-line);
}
.plib-body a.plib-letter-grid-hit:hover, .plib-letter-grid .plib-letter:hover {
  border-color: var(--plib-teal); color: var(--plib-teal-deep);
  background: var(--plib-teal-pale); text-decoration: none;
}
/* Anchor jumps land inside the scrolling text column; give the letter
   heading a little air so it isn't flush against the pane's top edge. */
.plib-def-letter { scroll-margin-top: 18px; }

/* ---- Reading view: the two-pane shell ----
   The reading views used to scroll as one long page: the chrome bars, the
   contents sidebar and the text all moved together, so finishing a long
   section left the reader with no navigation until they scrolled all the
   way back up.

   At >=961px the page becomes an app shell instead. The body is exactly
   one viewport tall and does not scroll; the three chrome bars (platform
   breadcrumb, municipality tabs, document bar) are fixed-height flex
   items, and the sidebar and the text each own their own scroll. The
   `min-height: 0` declarations are load-bearing: a flex item's default
   `min-height: auto` refuses to shrink below its content, so without them
   the panes grow past the viewport and the whole thing scrolls again.

   Scoped to .plib-shell, which only the two reading templates set, so
   every other public page keeps ordinary page scroll. Below 961px the
   rules do not apply at all — the sidebar collapses to a short scrollable
   block above the text (see the max-width: 960px block), and a phone
   should scroll one continuous page, not two tiny panes. */
@media (min-width: 961px) {
  .plib-shell {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .plib-shell .plib-crumbbar,
  .plib-shell .plib-townbar { flex: 0 0 auto; }
  .plib-shell .plib-reading-main {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  .plib-shell .plib-docbar { flex: 0 0 auto; }
  .plib-shell .plib-reading-layout { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .plib-shell .plib-doc-sidebar,
  .plib-shell .plib-reading-col {
    overflow-y: auto;
    /* Don't chain a pane's scroll to the body once it bottoms out. */
    overscroll-behavior: contain;
  }
}

/* ---- Reading view: sidebar + column ---- */
.plib-reading-layout {
  max-width: 1440px; margin: 0 auto; display: flex; align-items: flex-start; gap: 0;
}
.plib-doc-sidebar {
  width: 318px; flex-shrink: 0; align-self: stretch;
  background: var(--plib-sand); border-right: 1px solid var(--plib-sand-deeper);
  padding: 24px 18px 40px;
}
.plib-doc-sidebar-head { padding: 0 8px 14px; }
.plib-doc-sidebar-title { font-family: var(--plib-serif); font-size: 18px; font-weight: 600; color: var(--plib-navy); letter-spacing: -0.01em; }
.plib-doc-sidebar-meta { font-size: 12px; color: var(--plib-warm-gray); margin-top: 4px; }
.plib-doc-switcher { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 14px; }
.plib-doc-pill {
  display: block; font-size: 12.5px; font-weight: 500; color: var(--plib-text-2);
  background: #ffffff; border: 1px solid var(--plib-warm-line); border-radius: 999px;
  padding: 6px 12px; text-align: center;
}
.plib-doc-pill:hover { border-color: var(--plib-teal); color: var(--plib-teal-deep); text-decoration: none; }
.plib-doc-pill.is-active { background: var(--plib-navy); border-color: var(--plib-navy); color: #ffffff; }
.plib-body a.plib-doc-pill.is-active:hover { color: #ffffff; }

.plib-doc-tree { display: flex; flex-direction: column; gap: 2px; }
.plib-tree-group { border: 0; }
.plib-tree-summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 600; color: var(--plib-navy); line-height: 1.35;
}
.plib-tree-summary::-webkit-details-marker { display: none; }
.plib-tree-summary::before {
  content: "›"; display: inline-block; flex-shrink: 0; width: 12px;
  font-size: 15px; color: var(--plib-warm-gray); transition: transform 150ms ease;
}
.plib-tree-group[open] > .plib-tree-summary::before { transform: rotate(90deg); }
.plib-tree-summary:hover { background: var(--plib-sand-dark); }
.plib-tree-summary.is-current { background: #ffffff; box-shadow: inset 3px 0 0 var(--plib-teal); }
.plib-tree-children {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 0 8px 22px; margin-left: 17px; border-left: 1px solid var(--plib-sand-deeper);
}
.plib-tree-link {
  display: flex; align-items: center; gap: 10px; min-height: 40px;
  padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--plib-text-2); line-height: 1.35;
}
.plib-tree-link:hover { background: var(--plib-sand-dark); color: var(--plib-navy); text-decoration: none; }
.plib-tree-link.is-current {
  background: #ffffff; border: 1px solid #cfe3df; box-shadow: inset 3px 0 0 var(--plib-teal);
  color: var(--plib-navy); font-weight: 600;
}
.plib-tree-link.is-top { min-height: 44px; font-size: 13.5px; font-weight: 600; color: var(--plib-navy); padding-left: 22px; }
.plib-tree-num { font-family: var(--plib-mono); font-size: 11.5px; color: var(--plib-warm-gray); flex-shrink: 0; }
.plib-tree-link.is-current .plib-tree-num { color: var(--plib-teal-deep); font-weight: 500; }
.plib-tree-name { flex: 1; min-width: 0; }
.plib-doc-sidebar-foot { margin-top: 22px; padding: 14px 12px 0; border-top: 1px solid var(--plib-sand-deeper); }
.plib-doc-sidebar-foot p { font-size: 12px; line-height: 1.6; color: var(--plib-warm-gray); margin: 0; text-wrap: pretty; }

.plib-reading-col {
  /* The reading views put the footer inside this column (the base
     template's copy is suppressed) so it scrolls with the text rather
     than sitting below a page scroll the shell no longer has. That makes
     this a column of two children, not a single centred article — hence
     flex-direction: column, or the footer would land beside the text.
     The pad is a variable so the footer can cancel it and go full-bleed
     at every breakpoint. */
  --plib-col-pad: 3.5rem;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 44px var(--plib-col-pad) 0;
  /* Reading surface is paper-white; the sand sidebar and grey page
     chrome sit around it. */
  background: #ffffff; align-self: stretch;
}
.plib-reading-article {
  width: 100%; max-width: 74ch;
  /* Text keeps the 74ch measure; tables may spill to the column edge.
     Both values are read by .table-scroll above. */
  --plib-table-width: calc(100% + var(--plib-table-bleed, 0px) * 2);
  --plib-table-pull: calc(var(--plib-table-bleed, 0px) * -1);
  --plib-table-bleed: min(var(--plib-col-pad), 4vw);
}
.plib-reading-col > .plib-footer {
  align-self: stretch; width: auto;
  margin: 72px calc(-1 * var(--plib-col-pad)) 0;
}
.plib-reading-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.plib-reading-cite { font-family: var(--plib-mono); font-size: 12px; font-weight: 500; color: var(--plib-teal-deep); }
.plib-reading-title {
  font-family: var(--plib-serif); font-size: 38px; line-height: 1.15; font-weight: 600;
  color: var(--plib-navy); letter-spacing: -0.02em; margin: 0 0 22px; text-wrap: pretty;
}
.plib-reading-lede { font-size: 15.5px; line-height: 1.65; color: var(--plib-text-2); margin: 0 0 34px; text-wrap: pretty; }
.plib-reading-section + .plib-reading-section { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--plib-border); }
.plib-reading-section-heading {
  font-family: var(--plib-serif); font-size: 24px; font-weight: 600; color: var(--plib-navy);
  letter-spacing: -0.015em; margin: 0 0 14px; line-height: 1.25;
}
.plib-reading-section-heading a { color: var(--plib-navy); display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plib-reading-section-heading a:hover { color: var(--plib-teal-deep); text-decoration: none; }
.plib-reading-section-name { }

/* Long-form reading typography for adopted ordinance text. */
.plib-reading-body { font-size: 17px; line-height: 1.75; color: var(--plib-text); }
.plib-reading-body p { margin: 0 0 20px; text-wrap: pretty; }
.plib-reading-body h1, .plib-reading-body h2, .plib-reading-body h3, .plib-reading-body h4 {
  font-family: var(--plib-serif); color: var(--plib-navy); letter-spacing: -0.015em;
  line-height: 1.25; margin: 34px 0 14px;
}
.plib-reading-body h1 { font-size: 28px; }
.plib-reading-body h2 { font-size: 24px; }
.plib-reading-body h3 { font-size: 20px; }
.plib-reading-body h4 { font-size: 17px; }
.plib-reading-body ul, .plib-reading-body ol { margin: 0 0 20px; padding-left: 26px; line-height: 1.8; }
.plib-reading-body li { margin-bottom: 8px; text-wrap: pretty; }
.plib-reading-body blockquote {
  margin: 0 0 20px; padding: 2px 0 2px 18px;
  border-left: 3px solid var(--plib-sand-deeper); color: var(--plib-text-2);
}
.plib-reading-body pre {
  font-family: var(--plib-mono); font-size: 13.5px; line-height: 1.6;
  background: var(--plib-sand); border: 1px solid var(--plib-sand-deeper);
  border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 0 0 20px;
}
.plib-reading-body figure { margin: 0 0 24px; }
.plib-reading-body img { max-width: 100%; height: auto; border-radius: 8px; }
.plib-reading-body figcaption { font-size: 13px; color: var(--plib-muted); margin-top: 8px; }
/* ---- Tables ----
   Ordinance tables run from 2 columns to Smithfield's 16-column table of
   uses, so they need two boxes, not one: `.table-scroll` is constrained
   to the column and scrolls, and the table inside is free to be as wide
   as its content. Styling the table alone cannot do both — `width:
   max-content` (which stops a narrow table leaving a phantom gap after
   its last cell) is the same declaration that lets a wide one grow past
   its parent instead of scrolling, which is what put the use table off
   the side of the page.

   `border-collapse: separate` is deliberate: collapsed borders are drawn
   on the table, not the cells, so they vanish from the sticky column and
   header below. Borders are therefore per-cell, applied on one side each
   so they don't double up. */
.plib-reading-body .table-scroll {
  /* No max-width: the explicit `width` below already bounds the box, and
     a max-width:100% would clamp away the bleed. */
  overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 0 20px; border: 1px solid var(--plib-border); border-radius: 10px;
  /* Wide tables outgrow the 74ch measure; let them use the whole reading
     column rather than squeezing 16 columns into a text width. */
  width: var(--plib-table-width, 100%);
  margin-left: var(--plib-table-pull, 0);
}
.plib-reading-body .table-scroll:focus-visible { outline: 3px solid var(--plib-teal); outline-offset: 2px; }
.plib-reading-body table {
  border-collapse: separate; border-spacing: 0; font-size: 14px; margin: 0;
  width: max-content; min-width: 100%;
}
.plib-reading-body th, .plib-reading-body td {
  padding: 10px 13px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--plib-border-light);
  background: #ffffff;
}
.plib-reading-body tbody tr:nth-child(even) th,
.plib-reading-body tbody tr:nth-child(even) td { background: #fafbfc; }
.plib-reading-body tbody tr:last-child th,
.plib-reading-body tbody tr:last-child td { border-bottom: 0; }
/* No `position: sticky` on thead — it cannot work here, and this is worth
   recording because it looks like it should. `overflow-x: auto` on the
   wrapper computes overflow-y to `auto` as well, which makes the wrapper
   the sticky containing block in BOTH axes; the header then sticks to a
   box that never scrolls vertically and simply scrolls away with the
   page. The only fix is giving the wrapper its own max-height, i.e.
   nesting a vertical scroller inside the reading pane, which trades one
   navigation annoyance for a worse one. Horizontal scroll is the
   requirement, so it wins. */
.plib-reading-body thead th {
  background: var(--plib-sand); color: var(--plib-navy); font-weight: 600;
  border-bottom: 1px solid var(--plib-sand-deeper);
}
/* Row label stays visible while scanning across districts — without it a
   use matrix is unreadable the moment you scroll right. Capped and
   wrapping, because `width: max-content` on the table would otherwise let
   one long use name ("1A. Drug & Pharmaceutical Manufacture & Associated
   Research & Development") take half the box and push every district
   column out of view. */
.plib-reading-body th:first-child,
.plib-reading-body td:first-child {
  position: sticky; left: 0; z-index: 1;
  border-right: 1px solid var(--plib-border-light);
  max-width: 22rem; white-space: normal;
}
.plib-reading-body thead th:first-child { z-index: 2; }

/* Tells the reader there is more table to the right, and stops telling
   them once they reach the end. The two `local` layers are the content
   edges and the two `scroll` layers are the shadows painted over them, so
   a shadow only shows while that side is actually scrolled away. */
.plib-reading-body .table-scroll {
  background:
    linear-gradient(to right, #ffffff 30%, rgba(255,255,255,0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, #ffffff 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
    linear-gradient(to right, rgba(15,26,46,0.16), rgba(15,26,46,0)) left center / 16px 100% no-repeat scroll,
    linear-gradient(to left, rgba(15,26,46,0.16), rgba(15,26,46,0)) right center / 16px 100% no-repeat scroll;
}

/* ---- Prev / next section navigation ---- */
.plib-prevnext { display: flex; align-items: stretch; gap: 16px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--plib-border); }
.plib-prevnext-item {
  flex: 1; display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px; border: 1px solid var(--plib-border); border-radius: 10px;
}
.plib-prevnext-item.is-empty { border: 0; }
.plib-prevnext-item.is-next { text-align: right; }
a.plib-prevnext-item:hover { border-color: var(--plib-border-strong); background: #fafbfc; text-decoration: none; }
.plib-prevnext-label { font-size: 12px; color: var(--plib-muted); }
.plib-prevnext-title { font-size: 15px; font-weight: 600; color: var(--plib-navy); }

/* ---- Pending-amendment banner on a section ---- */
.plib-sectionbanner {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--plib-amber-bg); border: 1px solid var(--plib-amber-line);
  border-radius: 8px; padding: 14px 16px; margin: 0 0 30px;
}
.plib-sectionbanner svg { flex-shrink: 0; margin-top: 2px; }
.plib-sectionbanner-headline { font-size: 13.5px; line-height: 1.6; color: var(--plib-amber-ink); margin: 0; text-wrap: pretty; }
.plib-sectionbanner-detail { font-size: 13px; line-height: 1.55; color: var(--plib-amber-mid); margin: 6px 0 0; }
.plib-sectionbanner-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.plib-body .plib-sectionbanner-link { font-size: 13px; font-weight: 600; color: var(--plib-amber-ink); text-decoration: underline; }
.plib-sectionbanner-extra { font-size: 12.5px; color: var(--plib-amber-mid); }

/* ---- Definitions ---- */
.plib-letters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.plib-letter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px; padding: 0 8px;
  background: #ffffff; border: 1px solid var(--plib-border); border-radius: 6px;
  font-family: var(--plib-mono); font-size: 13px; font-weight: 500; color: var(--plib-navy);
}
.plib-letter:hover { border-color: var(--plib-teal); color: var(--plib-teal-deep); text-decoration: none; }
.plib-deflist { margin: 0; }
.plib-def-letter {
  font-family: var(--plib-serif); font-size: 22px; font-weight: 600; color: var(--plib-teal-deep);
  margin: 30px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--plib-sand-deeper);
  scroll-margin-top: 20px;
}
.plib-def-item {
  margin: 0 0 12px; background: #ffffff; border: 1px solid var(--plib-border);
  border-radius: 10px; padding: 16px 18px;
}
.plib-def-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.plib-def-term { font-size: 15.5px; font-weight: 600; color: var(--plib-navy); }
.plib-def-ref { font-family: var(--plib-mono); font-size: 12px; color: var(--plib-warm-gray); }
.plib-def-text { font-size: 14.5px; line-height: 1.65; color: var(--plib-text-2); text-wrap: pretty; }

/* ---- Data table (dimensional standards) ----
   This page is a spreadsheet, so it gets the opposite treatment to the
   reading views. There, a wrapper that scrolls vertically would mean a
   nested scroller inside prose — worse than the problem it solves. Here the
   grid IS the content, so the wrapper scrolls in BOTH axes, which is also
   the only arrangement in which the header row can stick: `overflow-x` alone
   makes the wrapper the sticky containing block vertically too, and the
   header then sticks to a box that never scrolls that way. Giving it a real
   height makes the stickiness honest. */
.plib-tablewrap {
  overflow: auto; overscroll-behavior: contain; background: #ffffff;
  border: 1px solid var(--plib-border); border-radius: 12px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,26,46,0.05));
}
.plib-tablewrap:focus-visible { outline: 3px solid var(--plib-teal); outline-offset: 2px; }
/* District name stays put while you scan across 11 columns of standards. */
.plib-table .plib-table-rowhead {
  position: sticky; left: 0; z-index: 1;
  background: #ffffff; border-right: 1px solid var(--plib-border-light);
  font-weight: 600; color: var(--plib-navy);
}
.plib-table thead th:first-child { z-index: 3; }
.plib-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.plib-table th, .plib-table td { padding: 11px 14px; border-bottom: 1px solid var(--plib-border-light); text-align: left; white-space: nowrap; }
.plib-table thead th {
  background: var(--plib-sand); color: var(--plib-navy); font-weight: 600;
  border-bottom: 1px solid var(--plib-sand-deeper); position: sticky; top: 0; z-index: 2;
}
.plib-table .is-num { text-align: right; font-family: var(--plib-mono); color: var(--plib-text-2); }
.plib-table thead .is-num { font-family: var(--plib-sans); }
.plib-table-rowhead { font-weight: 600; color: var(--plib-text); }
.plib-table tbody tr:nth-child(even) { background: #fafbfc; }
.plib-table tbody tr:last-child th, .plib-table tbody tr:last-child td { border-bottom: 0; }
.plib-unit { font-family: var(--plib-sans); font-size: 11.5px; color: var(--plib-muted); }
.plib-unset { color: var(--plib-faint); }
.plib-table-note { font-size: 12.5px; line-height: 1.6; color: var(--plib-muted); margin: 12px 0 0; max-width: 70ch; text-wrap: pretty; }

/* ---- Search ---- */
.plib-searchform { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.plib-searchform-field {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 260px;
  background: #ffffff; border: 1px solid var(--plib-border-strong); border-radius: 10px;
  height: 52px; padding: 0 16px;
}
.plib-searchform-field:focus-within { box-shadow: 0 0 0 3px rgba(26,122,109,0.22); border-color: var(--plib-teal); }
.plib-searchform-field svg { flex-shrink: 0; }
.plib-searchform-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--plib-sans); font-size: 16px; color: var(--plib-text); height: 100%;
}
.plib-searchform .plib-btn-primary { border: 0; cursor: pointer; font-family: var(--plib-sans); }
.plib-result-count { font-size: 14px; color: var(--plib-text-2); margin: 0 0 18px; }
.plib-result-group { margin-bottom: 28px; }
.plib-result-group-title {
  font-family: var(--plib-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--plib-warm-gray); margin: 0 0 12px;
}
.plib-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plib-result { background: #ffffff; border: 1px solid var(--plib-border); border-radius: 10px; padding: 16px 18px; }
.plib-result:hover { border-color: var(--plib-border-strong); }
.plib-result-link { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plib-result-cite { font-family: var(--plib-mono); font-size: 12.5px; color: var(--plib-teal-deep); font-weight: 500; }
.plib-result-name { font-size: 15.5px; font-weight: 600; color: var(--plib-navy); }
.plib-result-link:hover .plib-result-name { color: var(--plib-teal-deep); }
.plib-result-snippet { font-size: 14px; line-height: 1.6; color: var(--plib-text-2); margin: 8px 0 0; text-wrap: pretty; }

/* ---- Hearings ---- */
.plib-hearinglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.plib-hearingcard {
  background: #ffffff; border: 1px solid var(--plib-border); border-left: 4px solid var(--plib-amber-mid);
  border-radius: 12px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(15,26,46,0.05);
}
.plib-hearingcard-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.plib-hearing-time { font-size: 12.5px; color: var(--plib-muted); }
.plib-hearing-body { font-size: 12.5px; color: var(--plib-warm-gray); }
.plib-hearingcard-title {
  font-family: var(--plib-serif); font-size: 20px; font-weight: 600; color: var(--plib-navy);
  letter-spacing: -0.015em; margin: 0 0 8px; line-height: 1.3; text-wrap: pretty;
}
.plib-hearing-docs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.plib-hearing-where { font-size: 14px; color: var(--plib-text-2); margin-bottom: 6px; }
.plib-hearing-extra { font-size: 14px; line-height: 1.6; color: var(--plib-text-2); margin: 0 0 8px; text-wrap: pretty; }
.plib-hearing-record { font-size: 12.5px; line-height: 1.6; color: var(--plib-muted); background: var(--plib-sand); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.plib-hearing-record-label { font-weight: 600; color: var(--plib-warm-gray); }
.plib-hearing-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; }

/* ---- Amendment detail ---- */
.plib-amendment-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.plib-badge-stage { color: var(--plib-navy); background: var(--plib-sand-dark); }
.plib-badge-change { color: var(--plib-amber-ink); background: var(--plib-amber-chip); }
.plib-amendment-package { font-size: 13px; color: var(--plib-text-2); }
.plib-amendment-block { margin-top: 34px; }
.plib-amendment-block .plib-h2 { margin-bottom: 14px; }
.plib-amendment-section {
  background: #ffffff; border: 1px solid var(--plib-border); border-radius: 12px;
  padding: 20px 22px; margin-bottom: 14px;
}
.plib-amendment-section-head {
  font-family: var(--plib-sans); font-size: 16px; font-weight: 600; color: var(--plib-navy);
  margin: 0 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; line-height: 1.4;
}
.plib-amendment-directive { font-size: 14.5px; line-height: 1.65; color: var(--plib-text-2); margin: 0 0 12px; text-wrap: pretty; }
.plib-redline {
  font-size: 15px; line-height: 1.7; color: var(--plib-text);
  background: var(--plib-sand); border: 1px solid var(--plib-sand-deeper);
  border-radius: 8px; padding: 16px 18px; overflow-x: auto;
}
.plib-redline del { color: #b91c1c; text-decoration: line-through; }
.plib-redline ins { color: #1d4ed8; text-decoration: underline; }
.plib-redline table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.plib-redline th, .plib-redline td { padding: 8px 10px; border: 1px solid var(--plib-warm-line); text-align: left; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .plib-reading-col { --plib-col-pad: 1.5rem; padding: 30px var(--plib-col-pad) 0; }
  .plib-doc-sidebar { width: 260px; }
}

@media (max-width: 960px) {
  .plib-townbar-inner { padding: 8px 18px; gap: 10px; }
  .plib-townbar-name { font-size: 18px; }
  .plib-tabs { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .plib-tab { white-space: nowrap; padding: 0 12px; }
  .plib-page { padding: 22px 18px 44px; }
  .plib-page-title { font-size: 26px; }
  .plib-page-sub { font-size: 15px; }
  .plib-docbar-inner { padding: 10px 18px; gap: 10px; }
  .plib-docsearch { margin-left: 0; order: 3; max-width: none; width: 100%; }
  /* The contents tree stacks above the text on a phone, but capped and
     scrollable — an uncapped 200-section list would bury the section the
     reader actually opened. */
  .plib-reading-layout { flex-direction: column; }
  .plib-doc-sidebar {
    width: 100%; border-right: 0; border-bottom: 1px solid var(--plib-sand-deeper);
    padding: 14px 18px 16px;
  }
  .plib-doc-tree { max-height: 208px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .plib-doc-sidebar-foot { display: none; }
  .plib-doc-switcher { flex-direction: row; flex-wrap: wrap; }
  .plib-reading-col { --plib-col-pad: 18px; padding: 26px var(--plib-col-pad) 0; }
  .plib-reading-title { font-size: 28px; }
  .plib-reading-body { font-size: 16px; }
  .plib-prevnext { flex-direction: column; }
  .plib-def-item, .plib-result, .plib-hearingcard, .plib-amendment-section { padding: 14px 16px; }
  .plib-searchform-field { min-width: 0; }
}
/* ============ About this library (/about) ============
   Standalone civic page: library header + footer, long-form prose,
   and the document-error report form. */

.plib-aboutpage { max-width: 100%; }

.plib-about-head {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 8px;
}

.plib-about-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 24px 72px;
  font-size: 1.04rem;
  line-height: 1.72;
}
.plib-about-body section { margin-top: 44px; }
.plib-about-body p { margin: 0 0 1.15em; }
.plib-about-body ul { margin: 0 0 1.3em; padding-left: 1.35em; }
.plib-about-body li { margin-bottom: 0.55em; }
.plib-about-body h3 {
  font-size: 1.02rem;
  margin: 1.6em 0 0.5em;
}
.plib-about-body .plib-h2 { margin-bottom: 14px; }

/* --- Error-report form --- */
.plib-report-form {
  margin-top: 18px;
  padding: 26px 26px 22px;
  border: 1px solid var(--plib-border);
  border-radius: 12px;
  background: var(--plib-sand);
}
.plib-report-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.plib-field { margin-bottom: 14px; }
.plib-field label {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  margin-bottom: 5px;
}
.plib-optional { font-weight: 400; opacity: 0.65; }
.plib-field input,
.plib-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--plib-border-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
  background: #fff;
}
.plib-field textarea { resize: vertical; }
.plib-report-submit {
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--plib-navy);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.plib-report-submit:hover { filter: brightness(1.15); }
.plib-report-note {
  margin-top: 12px;
  font-size: 0.88rem;
  opacity: 0.75;
}
.plib-report-confirm,
.plib-report-flash {
  padding: 12px 16px;
  border-radius: 10px;
  margin: 14px 0;
  font-size: 0.95rem;
}
.plib-report-confirm { background: rgba(31,122,90,0.1); border: 1px solid rgba(31,122,90,0.35); }
.plib-report-flash { background: rgba(178,58,44,0.08); border: 1px solid rgba(178,58,44,0.35); }

/* Honeypot: physically removed from view but present in the DOM. */
.plib-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Provenance line on the town hub — which of the two kinds of listing
   this is (the /about page promises each municipal page says). */
.plib-hub-provenance {
  margin: 12px 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--plib-muted);
  max-width: 56ch;
}

/* =========================================================================
   Library home, v2 (design handoff 2026-09-10) — `.plh-*`, scoped to the
   `.plib-home` body. The library's own accent is forest green, chosen to
   read as "the library" rather than the planning workspace's teal; the
   town pages keep teal for now. Every two-column section shares the
   `1fr 560px` rhythm so edges line up down the page. No intermediate
   breakpoint was designed: below 900px the page collapses to the mobile
   stack (no map — the list is the only browse surface there).
   ========================================================================= */
.plib-home {
  --plib-forest: #1b4332;
  --plib-forest-hover: #123026;
  --plib-forest-light: #8fb3a0;
  --plib-forest-tint: #eaf2ed;
  --plib-forest-line: #d5e3da;
  --plib-forest-pill-line: #c3d2c9;
  --plib-forest-pill-hover: #eef4f0;
  --plib-row-selected: #f2f7f4;
  --plib-row-hover: #f7faf8;
  --plib-card-line-sand: #e6e1d8;
  --plib-btn-line: #d7dee7;
  --plib-sub-ink: #2c5282;
  --plib-sub-bg: #ebf2fa;
  --plib-sub-line: #d3e2f4;
  --plib-chevron: #cbd5e1;
  --plib-ruled: repeating-linear-gradient(to bottom, rgba(26,39,68,0.055) 0px, rgba(26,39,68,0.055) 1px, transparent 1px, transparent 8px);
}
.plib-home a { color: var(--plib-forest); }
.plib-home a:hover { color: #0f2a20; }
/* The footer sits on navy; keep its links white regardless of the accent. */
.plib-home .plib-footer a { color: rgba(255,255,255,0.82); }
.plib-home .plib-footer a:hover { color: #ffffff; }
.plib-home :focus-visible { outline: 3px solid var(--plib-forest); outline-offset: 2px; }
.plh-wrap { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
.plh-h2 { font-family: var(--plib-serif); font-size: 30px; font-weight: 600; color: var(--plib-navy); letter-spacing: -0.02em; margin: 0; }
.plh-eyebrow { display: block; font-family: var(--plib-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plib-forest); }

/* ---- Buttons ---- */
.plh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 9px; padding: 13px 16px; font-size: 14.5px; font-weight: 500;
  border: 1px solid transparent; white-space: nowrap; text-align: center;
}
.plh-btn-lg { border-radius: 10px; padding: 16px 26px; font-size: 15.5px; }
.plib-home a.plh-btn-forest { background: var(--plib-forest); color: #ffffff; border-color: var(--plib-forest); }
.plib-home a.plh-btn-forest:hover { background: var(--plib-forest-hover); border-color: var(--plib-forest-hover); color: #ffffff; text-decoration: none; }
.plib-home a.plh-btn-forest-outline { background: #ffffff; color: var(--plib-forest); border-color: var(--plib-forest-pill-line); }
.plib-home a.plh-btn-forest-outline:hover { background: var(--plib-forest-pill-hover); text-decoration: none; }
.plib-home a.plh-btn-white { background: #ffffff; color: var(--plib-navy); border-color: var(--plib-btn-line); }
.plib-home a.plh-btn-white:hover { background: #f6f8fa; color: var(--plib-navy); text-decoration: none; }

/* ---- Nav ---- */
.plh-nav { background: #ffffff; border-bottom: 1px solid var(--plib-border); }
.plh-nav-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 48px; height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.plh-brand { display: flex; align-items: center; gap: 14px; }
.plib-home a.plh-brand, .plib-home a.plh-brand:hover { color: var(--plib-navy); text-decoration: none; }
.plh-brand-mark { display: block; flex-shrink: 0; }
.plh-brand-name { font-family: var(--plib-serif); font-size: 21px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
.plh-nav-toggle { display: none; }
.plh-nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; flex-shrink: 0; }
.plib-home .plh-nav-links a { color: #334155; }
.plib-home .plh-nav-links a:hover { color: var(--plib-navy); text-decoration: none; }
.plib-home .plh-nav-links a.plh-pill {
  color: var(--plib-forest); border: 1px solid var(--plib-forest-pill-line);
  border-radius: 999px; padding: 9px 20px; font-weight: 500;
}
.plib-home .plh-nav-links a.plh-pill:hover { background: var(--plib-forest-pill-hover); color: var(--plib-forest); }
.plib-home .plh-nav-links a.plh-pill-fill { background: var(--plib-forest); border-color: var(--plib-forest); color: #ffffff; }
.plib-home .plh-nav-links a.plh-pill-fill:hover { background: var(--plib-forest-hover); border-color: var(--plib-forest-hover); color: #ffffff; }

/* ---- Hero: masthead + statement ---- */
.plh-hero {
  background: var(--plib-sand); background-image: var(--plib-ruled);
  border-bottom: 1px solid var(--plib-sand-deeper); padding: 40px 0 64px;
}
.plh-masthead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-bottom: 18px; border-bottom: 2px solid var(--plib-navy);
}
.plh-h1 { font-family: var(--plib-serif); font-size: 34px; line-height: 1; font-weight: 600; color: var(--plib-navy); letter-spacing: -0.02em; margin: 0; }
.plh-mast-meta {
  display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
  font-family: var(--plib-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--plib-warm-gray);
}
.plib-home .plh-mast-meta a { color: var(--plib-warm-gray); }
.plib-home .plh-mast-meta a:hover { color: var(--plib-forest); text-decoration: none; }
.plh-hero-stack { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 60px; }
.plh-statement {
  font-family: var(--plib-serif); font-size: 52px; line-height: 1.08; font-weight: 600;
  color: var(--plib-navy); letter-spacing: -0.025em; margin: 0; max-width: 22ch; text-wrap: balance;
}
.plh-lede { font-size: 16.5px; line-height: 1.6; color: var(--plib-text-2); margin: 20px 0 0; max-width: 62ch; text-wrap: pretty; }
.plh-cta-row { display: flex; align-items: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }
.plh-coverage { margin: 22px 0 0; font-size: 13.5px; color: var(--plib-muted); text-wrap: pretty; }
.plh-coverage strong { color: var(--plib-forest); font-weight: 600; }

/* ---- A–Z ---- */
.plh-az { padding: 48px 0 52px; }
.plh-az-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.plh-az-sub { margin: 8px 0 0; font-size: 14.5px; color: var(--plib-muted); }
.plh-az-badge {
  font-family: var(--plib-mono); font-size: 12px; color: var(--plib-forest);
  background: var(--plib-forest-tint); border: 1px solid var(--plib-forest-line);
  border-radius: 6px; padding: 7px 12px; flex-shrink: 0; white-space: nowrap;
}
.plh-grid2 { display: grid; grid-template-columns: 1fr 560px; gap: 32px; align-items: start; }
.plh-grid2.is-single { grid-template-columns: 1fr; }

.plh-list-card { background: #ffffff; border: 1px solid var(--plib-border); border-radius: 12px; overflow: hidden; min-width: 0; }
.plh-filter { background: var(--plib-navy); padding: 16px 18px; }
.plh-filter-field {
  display: flex; align-items: center; background: #ffffff; border-radius: 9px;
  height: 50px; padding: 0 16px; color: var(--plib-forest);
}
.plh-filter-field:focus-within { box-shadow: 0 0 0 3px rgba(143,179,160,0.55); }
.plh-filter-field svg { flex-shrink: 0; }
.plh-filter-input {
  flex: 1; border: 0; outline: 0; background: transparent; min-width: 0; height: 100%;
  font-family: var(--plib-sans); font-size: 15.5px; color: var(--plib-text); padding: 0 12px;
}
.plh-filter-count { font-family: var(--plib-mono); font-size: 11.5px; color: var(--plib-warm-gray); flex-shrink: 0; white-space: nowrap; }
.plh-chips { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.plh-chips-label { font-size: 12.5px; color: rgba(255,255,255,0.6); margin-right: 2px; }
.plh-chip {
  font-family: var(--plib-sans); font-size: 12.5px; color: #ffffff; background: transparent;
  border: 1px solid rgba(255,255,255,0.28); border-radius: 999px; padding: 6px 13px; cursor: pointer;
}
.plh-chip:hover { border-color: #ffffff; background: rgba(255,255,255,0.08); }
.plh-chip:focus-visible { outline: 3px solid #ffffff; outline-offset: 1px; }

.plh-list { max-height: 720px; overflow-y: auto; }
.plh-empty { padding: 22px 20px; font-size: 14px; color: var(--plib-muted); line-height: 1.55; }
.plh-empty[hidden] { display: none; }
.plh-row {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 20px;
  background: transparent; border: 0; border-left: 3px solid transparent;
  border-bottom: 1px solid var(--plib-border-light); cursor: pointer;
  font-family: var(--plib-sans); text-align: left; color: var(--plib-text);
}
.plh-row[hidden] { display: none; }
.plh-row:hover, .plh-row.is-hover { background: var(--plib-row-hover); }
.plh-row.is-selected { background: var(--plib-row-selected); border-left-color: var(--plib-forest); }
.plh-row:focus-visible { outline: 3px solid var(--plib-forest); outline-offset: -3px; }
.plh-dot-cell { width: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.plh-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--plib-forest-light); }
.plh-row.is-both .plh-dot { background: var(--plib-forest); }
.plh-row.is-none .plh-dot { width: 10px; height: 2px; border-radius: 2px; background: var(--plib-chevron); }
.plh-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plh-row-name { font-size: 15.5px; font-weight: 500; color: var(--plib-navy); letter-spacing: -0.01em; }
.plh-row-county { font-size: 12px; color: var(--plib-faint); margin-top: 2px; }
.plh-row-date-m { display: none; }
.plh-pills { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.plh-pill-doc {
  font-size: 11px; font-weight: 500; border-radius: 5px; padding: 3px 9px; white-space: nowrap;
  color: var(--plib-text-2); background: var(--plib-border-light); border: 1px solid var(--plib-border);
}
.plh-pill-doc.is-zoning { color: var(--plib-forest); background: var(--plib-forest-tint); border-color: var(--plib-forest-line); }
.plh-pill-doc.is-subdivision { color: var(--plib-sub-ink); background: var(--plib-sub-bg); border-color: var(--plib-sub-line); }
.plh-row-date {
  width: 130px; text-align: right; flex-shrink: 0; white-space: nowrap;
  font-family: var(--plib-mono); font-size: 11.5px; color: var(--plib-muted);
}
.plh-row.is-none .plh-row-date, .plh-row.is-none .plh-row-date-m { color: var(--plib-amber-ink); }
.plh-row-chev { flex-shrink: 0; color: var(--plib-chevron); }

/* ---- Sidebar: preview + map ---- */
.plh-side { position: sticky; top: 24px; min-width: 0; }
.plh-preview[hidden] { display: none; }
.plh-preview-desktop {
  background: #ffffff; border: 1px solid var(--plib-btn-line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15,26,46,0.10); overflow: hidden; margin-bottom: 16px;
}
.plh-preview-desktop .plh-preview-head {
  background: var(--plib-navy); padding: 18px 22px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.plh-preview-county { display: block; font-family: var(--plib-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.plh-preview-name { display: block; font-family: var(--plib-serif); font-weight: 600; letter-spacing: -0.02em; margin-top: 5px; }
.plh-preview-meta { display: block; font-size: 12.5px; margin-top: 5px; }
.plh-preview-desktop .plh-preview-county { color: rgba(255,255,255,0.6); }
.plh-preview-desktop .plh-preview-name { font-size: 26px; color: #ffffff; }
.plh-preview-desktop .plh-preview-meta { color: rgba(255,255,255,0.72); }
.plh-preview-close {
  flex-shrink: 0; border: 0; cursor: pointer; font-family: var(--plib-sans); line-height: 1;
}
.plh-preview-desktop .plh-preview-close {
  width: 30px; height: 30px; border-radius: 7px; background: rgba(255,255,255,0.1); color: #ffffff; font-size: 16px;
}
.plh-preview-desktop .plh-preview-close:hover { background: rgba(255,255,255,0.22); }
.plh-preview-desktop .plh-preview-close:focus-visible { outline-color: #ffffff; }
.plh-preview-desktop .plh-preview-body { padding: 20px 22px 22px; }
.plh-preview-label { display: block; font-family: var(--plib-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plib-warm-gray); margin-bottom: 12px; }
.plh-doc-tile { border: 1px solid #e6eaef; border-radius: 9px; padding: 14px 16px; margin-bottom: 10px; background: #ffffff; }
.plh-doc-title { display: block; font-size: 15px; font-weight: 600; color: var(--plib-navy); letter-spacing: -0.01em; }
.plh-doc-meta { display: block; font-family: var(--plib-mono); font-size: 11.5px; color: var(--plib-muted); margin-top: 5px; }
.plh-preview-ctas { display: flex; gap: 10px; margin-top: 16px; }
.plh-preview-ctas .plh-btn { flex: 1; }
.plh-preview-note { margin: 16px 0 0; font-size: 12px; line-height: 1.55; color: var(--plib-faint); }
.plh-preview-para { margin: 14px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--plib-text-2); text-wrap: pretty; }
.plh-pill-amber {
  display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500;
  color: var(--plib-amber-ink); background: var(--plib-amber-bg); border: 1px solid #f0dfb8;
  border-radius: 999px; padding: 6px 13px;
}
.plh-preview-mobile { display: none; }

.plh-map-card { background: #ffffff; border: 1px solid var(--plib-border); border-radius: 12px; padding: 20px 30px 16px; }
.plh-map-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plh-map-title { font-family: var(--plib-sans); font-size: 15px; font-weight: 600; color: var(--plib-navy); margin: 0; letter-spacing: -0.01em; }
.plh-map-hint { font-size: 12.5px; color: var(--plib-muted); }
.plh-map-frame { position: relative; display: flex; justify-content: center; margin-top: 14px; }
.plh-map-frame svg { display: block; overflow: visible; width: 100%; max-width: 500px; height: auto; }
.plh-sea { font-family: var(--plib-serif); font-style: italic; letter-spacing: 0.06em; pointer-events: none; }
/* Three-state fills; the server sets is-both / is-zoning / … per path,
   the JS only ever toggles is-selected / is-hover / is-dim / is-filtered. */
.plib-town {
  fill: var(--plib-sand-dark); stroke: var(--plib-warm-line); stroke-width: 0.7;
  cursor: pointer; transition: fill 140ms ease, opacity 140ms ease;
}
.plib-town.is-both { fill: var(--plib-forest); stroke: #ffffff; stroke-width: 0.9; }
.plib-town.is-zoning, .plib-town.is-subdivision, .plib-town.is-other { fill: var(--plib-forest-light); stroke: #ffffff; stroke-width: 0.9; }
.plib-town.is-dim { opacity: 0.42; }
.plib-town.is-filtered { opacity: 0.22; }
.plib-town.is-selected { fill: #ffffff; stroke: var(--plib-navy); stroke-width: 2.2; }
.plib-town:focus-visible { outline: none; stroke: var(--plib-navy); stroke-width: 2; }
.plh-tooltip {
  position: absolute; transform: translateX(-50%); background: var(--plib-navy);
  border-radius: 7px; padding: 7px 11px; pointer-events: none; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(15,26,46,0.24); z-index: 10;
}
.plh-tooltip[hidden] { display: none; }
.plh-tooltip-name { display: block; font-size: 12.5px; font-weight: 600; color: #ffffff; }
.plh-tooltip-status { display: block; font-family: var(--plib-mono); font-size: 10.5px; color: rgba(255,255,255,0.72); margin-top: 2px; }
.plh-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid #eef1f5; font-size: 11.5px; color: var(--plib-muted);
}
.plh-legend > span { display: flex; align-items: center; gap: 7px; }
.plh-swatch { width: 11px; height: 11px; border-radius: 3px; display: block; box-sizing: border-box; }
.plh-swatch.is-both { background: var(--plib-forest); }
.plh-swatch.is-one { background: var(--plib-forest-light); }
.plh-swatch.is-none { background: var(--plib-sand-dark); border: 1px solid var(--plib-warm-line); }
.plh-swatch.is-sel { background: #ffffff; border: 2px solid var(--plib-navy); }

/* ---- Activity ---- */
.plh-activity { padding: 0 0 52px; }
.plh-activity .plh-grid2 { align-items: stretch; }
.plh-act-card {
  background: #ffffff; border: 1px solid var(--plib-border); border-radius: 12px;
  padding: 24px 26px 18px; display: flex; flex-direction: column; min-width: 0;
}
.plh-act-summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: default; pointer-events: none; }
.plh-act-summary::-webkit-details-marker { display: none; }
.plh-act-title { display: block; font-family: var(--plib-serif); font-size: 24px; font-weight: 600; color: var(--plib-navy); letter-spacing: -0.02em; }
.plh-act-sub-m { display: none; }
.plh-act-chev { display: none; }
.plh-act-body { display: flex; flex-direction: column; flex: 1; }
.plh-act-intro { margin: 7px 0 16px; font-size: 14px; line-height: 1.55; color: var(--plib-muted); min-height: 44px; text-wrap: pretty; }
.plh-act-rows { flex: 1; }
.plh-act-row { display: flex; align-items: baseline; gap: 18px; padding: 15px 0; border-top: 1px solid #eef1f5; }
.plib-home a.plh-act-row, .plib-home a.plh-act-row:hover { text-decoration: none; }
.plh-act-date { width: 110px; flex-shrink: 0; font-family: var(--plib-mono); font-size: 11.5px; color: var(--plib-faint); }
.plh-act-when { width: 110px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.plh-act-time { font-family: var(--plib-mono); font-size: 11px; color: var(--plib-faint); }
.plh-act-main { flex: 1; min-width: 0; }
.plh-act-town { display: block; font-size: 14px; font-weight: 600; color: var(--plib-navy); }
.plib-home a.plh-act-town { color: var(--plib-navy); }
.plh-act-text { display: block; font-size: 13.5px; line-height: 1.5; color: var(--plib-text-2); margin-top: 3px; text-wrap: pretty; }
.plh-datechip {
  display: inline-block; align-self: flex-start; font-family: var(--plib-mono); font-size: 11px; font-weight: 500;
  color: #334155; background: var(--plib-border-light); border: 1px solid var(--plib-border); border-radius: 5px; padding: 4px 9px;
}
.plh-datechip.is-soon { color: var(--plib-amber-ink); background: var(--plib-amber-bg); border-color: #f0dfb8; }

/* ---- Basics ---- */
.plh-basics {
  background: var(--plib-sand);
  background-image: repeating-linear-gradient(to bottom, rgba(26,39,68,0.045) 0px, rgba(26,39,68,0.045) 1px, transparent 1px, transparent 8px);
  border-top: 1px solid var(--plib-sand-deeper); border-bottom: 1px solid var(--plib-sand-deeper); padding: 52px 0 56px;
}
.plh-basics-h2 { margin: 10px 0 26px; }
.plh-basics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.plh-basics-card { background: #ffffff; border: 1px solid var(--plib-card-line-sand); border-radius: 12px; padding: 24px 24px 26px; }
.plh-basics-card h3 { font-family: var(--plib-sans); font-size: 16.5px; font-weight: 600; color: var(--plib-navy); margin: 0 0 10px; letter-spacing: -0.01em; }
.plh-basics-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--plib-text-2); text-wrap: pretty; }

/* ---- Brand band ---- */
.plh-brandband { background: #ffffff; border-bottom: 1px solid var(--plib-border); padding: 44px 0; }
.plh-band-inner { display: flex; align-items: center; gap: 40px; justify-content: space-between; }
.plh-band-text { display: flex; align-items: flex-start; gap: 20px; max-width: 820px; }
.plh-band-mark { flex-shrink: 0; display: block; }
.plh-band-title { display: block; font-family: var(--plib-serif); font-size: 22px; font-weight: 600; color: var(--plib-navy); letter-spacing: -0.015em; }
.plh-band-text p { margin: 9px 0 0; font-size: 15px; line-height: 1.62; color: var(--plib-text-2); max-width: 70ch; text-wrap: pretty; }
.plh-band-ctas { display: flex; gap: 12px; flex-shrink: 0; }
.plh-band-ctas .plh-btn { padding: 13px 22px; }

/* ---- Mobile stack (<900): no map, preview inline, accordions ---- */
@media (max-width: 899px) {
  .plh-wrap { padding: 0 20px; }
  .plh-nav-inner { padding: 0 20px; height: 60px; gap: 12px; position: relative; }
  .plh-brand { gap: 10px; }
  .plh-brand-mark { width: 32px; height: 32px; }
  .plh-brand-name { font-size: 18px; }
  .plh-nav-toggle {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    background: transparent; border: 0; color: var(--plib-navy); cursor: pointer; margin-left: auto;
  }
  .plh-nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
    flex-direction: column; align-items: stretch; gap: 0; background: #ffffff;
    border-bottom: 1px solid var(--plib-border); box-shadow: 0 12px 30px rgba(15,26,46,0.12); padding: 8px 20px 16px;
  }
  .plh-nav-links.is-open { display: flex; }
  .plib-home .plh-nav-links a { display: flex; align-items: center; min-height: 48px; font-size: 15px; }
  .plib-home .plh-nav-links a.plh-pill { justify-content: center; margin-top: 8px; }

  .plh-hero { padding: 24px 0 32px; }
  .plh-masthead { display: block; padding-bottom: 12px; }
  .plh-h1 { font-size: 22px; line-height: 1.15; }
  .plh-mast-meta { gap: 6px 14px; margin-top: 8px; font-size: 10.5px; }
  .plh-hero-stack { align-items: flex-start; text-align: left; padding-top: 0; }
  .plh-statement { font-size: 32px; line-height: 1.12; margin-top: 28px; max-width: none; }
  .plh-lede { font-size: 15px; margin-top: 14px; }
  .plh-cta-row { margin-top: 24px; width: 100%; }
  .plh-cta-row .plh-btn-forest { width: 100%; padding: 15px 20px; }
  .plh-cta-row .plh-btn-white { display: none; }
  .plh-coverage { margin-top: 16px; font-size: 13px; line-height: 1.55; }

  .plh-az { padding: 28px 0 0; }
  .plh-az-head { display: block; margin-bottom: 16px; }
  .plh-h2 { font-size: 24px; }
  .plh-az-sub { font-size: 13.5px; margin-top: 6px; }
  .plh-az-badge { display: none; }
  .plh-grid2 { grid-template-columns: 1fr; gap: 16px; }
  .plh-side { display: none; }
  .plh-filter { padding: 14px; }
  .plh-filter-field { height: 48px; padding: 0 14px; }
  .plh-filter-input { font-size: 16px; padding: 0 10px; }
  .plh-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; margin-top: 10px; }
  .plh-chips::-webkit-scrollbar { display: none; }
  .plh-chips-label { display: none; }
  .plh-chip { padding: 8px 13px; min-height: 36px; white-space: nowrap; flex-shrink: 0; }
  .plh-list { max-height: 600px; }
  .plh-row { min-height: 56px; padding: 10px 16px; gap: 12px; }
  .plh-dot-cell { width: 16px; }
  .plh-row-name { font-size: 15px; }
  .plh-row-county, .plh-row-date, .plh-row-chev { display: none; }
  .plh-row-date-m { display: block; font-family: var(--plib-mono); font-size: 11px; color: var(--plib-muted); margin-top: 2px; }
  .plh-pills { gap: 5px; }
  .plh-pill-doc { font-size: 10.5px; padding: 3px 7px; }

  .plh-preview-mobile { display: block; border-bottom: 1px solid var(--plib-border); background: var(--plib-row-hover); }
  .plh-preview-mobile[hidden] { display: none; }
  .plh-preview-mobile .plh-preview-head { padding: 14px 16px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .plh-preview-mobile .plh-preview-county { font-size: 10px; color: var(--plib-warm-gray); }
  .plh-preview-mobile .plh-preview-name { font-size: 22px; color: var(--plib-navy); margin-top: 3px; }
  .plh-preview-mobile .plh-preview-close {
    width: 44px; height: 44px; border-radius: 8px; background: #ffffff; border: 1px solid var(--plib-btn-line);
    color: var(--plib-navy); font-size: 18px; margin-top: -4px;
  }
  .plh-preview-mobile .plh-preview-body { padding: 12px 16px 16px; }
  .plh-preview-mobile .plh-doc-tile { padding: 12px 14px; margin-bottom: 8px; }
  .plh-preview-mobile .plh-doc-title { font-size: 14.5px; }
  .plh-preview-mobile .plh-doc-meta { font-size: 11px; margin-top: 4px; }
  .plh-preview-mobile .plh-preview-ctas { margin-top: 12px; }
  .plh-preview-mobile .plh-preview-ctas .plh-btn { padding: 14px 16px; }
  .plh-preview-mobile .plh-preview-para { font-size: 14px; margin-top: 12px; }

  .plh-activity { padding: 24px 0 32px; }
  .plh-activity .plh-grid2 { gap: 10px; }
  .plh-act-card { padding: 0; overflow: hidden; }
  .plh-act-summary { cursor: pointer; pointer-events: auto; padding: 16px 18px; min-height: 56px; }
  .plh-act-title { font-size: 18px; letter-spacing: -0.015em; }
  .plh-act-sub-m { display: block; font-size: 12.5px; color: var(--plib-muted); margin-top: 2px; }
  .plh-act-chev { display: block; flex-shrink: 0; color: var(--plib-muted); }
  .plh-act-body { padding: 0 18px 6px; border-top: 1px solid #eef1f5; }
  .plh-act-intro { display: none; }
  .plh-act-row { gap: 12px; padding: 12px 0; }
  .plh-act-date, .plh-act-when { width: 84px; }

  .plh-basics { padding: 32px 0 36px; }
  .plh-basics-h2 { margin: 8px 0 18px; }
  .plh-basics-grid { grid-template-columns: 1fr; gap: 12px; }
  .plh-basics-card { padding: 18px 18px 20px; }
  .plh-basics-card h3 { font-size: 15.5px; margin-bottom: 8px; }
  .plh-basics-card p { font-size: 14px; line-height: 1.6; }

  .plh-brandband { padding: 28px 0 32px; }
  .plh-band-inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .plh-band-text { gap: 14px; }
  .plh-band-mark { width: 40px; height: 40px; }
  .plh-band-title { font-size: 18px; line-height: 1.25; }
  .plh-band-text p { font-size: 14px; margin-top: 8px; }
  .plh-band-ctas { flex-direction: column; gap: 10px; }
  .plh-band-ctas .plh-btn { padding: 14px 20px; }
}