/* ============================================================================
   Civic Editorial Workspace — shared design tokens and primitives
   ----------------------------------------------------------------------------
   First piece of the shared design layer called for in the 10x plan (P1 #1).
   The archive currently carries several visual generations; rather than add a
   fourth, new public pages build on this file and existing pages can migrate to
   it one at a time. Token values match the green/gold already used by the
   council and calendar pages so nothing looks grafted on.

   Principles this file encodes:
     - calm, exact, readable; the record is the hero, not the chrome
     - meaning is never carried by colour alone
     - public body text stays at 16px and reflows to 320px
     - motion is functional only, and respects reduced-motion
   ========================================================================= */

:root{
  /* Ink and surface. Warm off-white for reading, white for data. */
  --civic-paper:#f7f6f2;
  --civic-card:#ffffff;
  --civic-ink:#16211a;
  --civic-muted:#4a5751;          /* >=7:1 on paper */
  --civic-line:#d4dbd6;
  --civic-line-strong:#adbbb2;

  /* Civic identity. */
  --civic-green:#2c5530;
  --civic-green-d:#1f3e23;
  --civic-green-l:#e8efe9;
  --civic-gold:#8a6508;           /* darkened from #b8860b for AA on white */
  --civic-gold-l:#fbf3de;

  /* Semantic. Each is paired with a text label in the markup, never used alone. */
  --civic-ok:#1f6b3a;
  --civic-warn:#8a5a00;
  --civic-warn-l:#fdf4e3;
  --civic-info:#1b4f7a;

  --civic-radius:4px;
  --civic-radius-lg:6px;
  --civic-sans:system-ui,-apple-system,"Source Sans 3","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --civic-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
}

.civic{
  margin:0;
  background:var(--civic-paper);
  color:var(--civic-ink);
  font-family:var(--civic-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
.civic *,.civic *::before,.civic *::after{box-sizing:border-box;}

/* Keyboard users must always be able to see where they are. */
.civic a:focus-visible,.civic button:focus-visible,.civic [tabindex]:focus-visible{
  outline:3px solid var(--civic-gold);
  outline-offset:2px;
  border-radius:2px;
}

.civic-wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem;}

.civic-skip{
  position:absolute;left:-9999px;top:0;background:var(--civic-card);
  color:var(--civic-ink);padding:.75rem 1rem;z-index:50;
}
.civic-skip:focus{left:.5rem;top:.5rem;}

/* -- masthead ------------------------------------------------------------ */
.civic-masthead{background:var(--civic-green-d);color:#fff;padding:2rem 0 1.75rem;}
.civic-eyebrow{
  font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  color:#cfe0d2;margin:0 0 .4rem;
}
.civic-title{
  font-family:var(--civic-serif);font-weight:600;line-height:1.2;
  font-size:clamp(1.65rem,1.2rem + 2vw,2.5rem);margin:0 0 .6rem;color:#fff;
}
.civic-lede{margin:0;max-width:60ch;color:#e4ece5;font-size:1.0625rem;}
.civic-masthead a{color:#fff;}

/* -- sections ------------------------------------------------------------ */
.civic-section{padding:2.25rem 0;}
.civic-h2{
  font-family:var(--civic-serif);font-size:1.4rem;font-weight:600;
  margin:0 0 .35rem;color:var(--civic-green-d);
}
.civic-sub{margin:0 0 1.25rem;color:var(--civic-muted);max-width:68ch;}

.civic-card{
  background:var(--civic-card);border:1px solid var(--civic-line);
  border-radius:var(--civic-radius-lg);padding:1.25rem;
}

/* -- figures ------------------------------------------------------------- */
.civic-stats{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));
  list-style:none;margin:0;padding:0;
}
.civic-stat{
  background:var(--civic-card);border:1px solid var(--civic-line);
  border-left:3px solid var(--civic-green);
  border-radius:var(--civic-radius);padding:1rem 1.1rem;
}
.civic-stat-n{
  font-size:1.9rem;font-weight:650;line-height:1.1;color:var(--civic-green-d);
  font-variant-numeric:tabular-nums;display:block;
}
.civic-stat-l{display:block;margin-top:.3rem;font-weight:600;font-size:.9375rem;}
.civic-stat-note{display:block;margin-top:.2rem;color:var(--civic-muted);font-size:.8125rem;}
.civic-stat.is-unknown{border-left-color:var(--civic-line-strong);}
.civic-stat.is-unknown .civic-stat-n{color:var(--civic-muted);}

/* -- callout ------------------------------------------------------------- */
.civic-callout{
  border:1px solid var(--civic-line);border-left:4px solid var(--civic-warn);
  background:var(--civic-warn-l);border-radius:var(--civic-radius);
  padding:1.1rem 1.25rem;
}
.civic-callout h3,.civic-callout .civic-callout-h{
  margin:0 0 .4rem;font-size:1.0625rem;font-family:var(--civic-serif);
  color:var(--civic-warn);
}
.civic-callout p{margin:0 0 .5rem;}
.civic-callout p:last-child{margin-bottom:0;}

/* -- table --------------------------------------------------------------- */
.civic-tablewrap{overflow-x:auto;border:1px solid var(--civic-line);border-radius:var(--civic-radius-lg);background:var(--civic-card);}
.civic-table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.9375rem;}
.civic-table caption{text-align:left;padding:.9rem 1rem;color:var(--civic-muted);font-size:.875rem;}
.civic-table th,.civic-table td{padding:.5rem .85rem;text-align:left;border-bottom:1px solid var(--civic-line);}
.civic-table thead th{
  position:sticky;top:0;background:var(--civic-green-l);color:var(--civic-green-d);
  font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;
}
.civic-table td.num,.civic-table th.num{text-align:right;font-variant-numeric:tabular-nums;}
.civic-table tbody tr:hover{background:#f4f7f4;}
.civic-table tbody tr:last-child td{border-bottom:0;}

/* Bar doubles the number it sits beside; the number is always present. */
.civic-bar{display:block;height:.4rem;border-radius:2px;background:var(--civic-green-2,#4a7c4a);min-width:2px;}
.civic-bar.is-res{background:var(--civic-gold);}
.civic-barcell{width:9rem;}

.civic-badge{
  display:inline-block;padding:.1rem .45rem;border-radius:2px;
  font-size:.75rem;font-weight:650;border:1px solid currentColor;
}
.civic-badge.is-none{color:var(--civic-warn);background:var(--civic-warn-l);}

.civic-none{color:var(--civic-muted);font-variant-numeric:tabular-nums;}

/* -- prose --------------------------------------------------------------- */
.civic-prose{max-width:68ch;}
.civic-prose h3{font-family:var(--civic-serif);font-size:1.0625rem;margin:1.35rem 0 .3rem;color:var(--civic-green-d);}
.civic-prose p,.civic-prose li{color:var(--civic-ink);}
.civic-prose dt{font-weight:650;margin-top:.85rem;}
.civic-prose dd{margin:.15rem 0 0;color:var(--civic-muted);}

.civic-foot{
  border-top:1px solid var(--civic-line);margin-top:1rem;padding:1.5rem 0 2.5rem;
  color:var(--civic-muted);font-size:.875rem;
}

@media (prefers-reduced-motion:reduce){
  .civic *{animation:none !important;transition:none !important;}
}
@media print{
  .civic{background:#fff;}
  .civic-masthead{background:#fff;color:#000;}
  .civic-title,.civic-lede,.civic-eyebrow{color:#000;}
  .civic-tablewrap{overflow:visible;}
}

/* Coverage-boundary note on the search page. Deliberately quiet: it must be
   readable without competing with the search field it sits above. */
.search-coverage-note{
  max-width:72rem;margin:0 auto .75rem;padding:.7rem 1rem;
  font-family:var(--civic-sans);font-size:.9375rem;line-height:1.55;
  color:#16211a;background:#f7f6f2;border:1px solid #d4dbd6;
  border-left:3px solid #8a6508;border-radius:4px;
}
.search-coverage-note a{color:#1f3e23;}