/* ==========================================================================
   Government Transparency Project — shared stylesheet for meeting pages
   Scope: all files in Output/HTML/. Design goals: dense layout, Section 508 /
   WCAG 2.1 AA conformance (contrast >= 4.5:1 for text, visible keyboard focus,
   hover-revealed content also reachable by keyboard focus, honors reduced
   motion), and a single place to maintain the site-wide disclaimer.
   ========================================================================== */

:root {
  --paper: #fdfdfb;      /* page background */
  --panel: #f3f6f8;      /* zebra rows, header panel */
  --ink: #1a2733;        /* body text on paper: ~14.9:1 */
  --muted: #44535f;      /* secondary text on paper: ~8.1:1 */
  --accent: #14558f;     /* links, headings accent on paper: ~7.3:1 */
  --accent-ink: #0f3f6b;
  --rule: #b9c6cf;       /* hairlines */
  --focus: #b3540d;      /* focus ring, >=3:1 against paper */

  /* severity chips: dark text on tinted fields, all >= 7:1 */
  --flag-high-bg: #f9e3de;    --flag-high-ink: #7c1d10;   --flag-high-rule: #c4826f;
  --flag-med-bg:  #fdf3d4;    --flag-med-ink:  #5f4700;   --flag-med-rule: #c2a24a;
  --flag-obs-bg:  #e3edf6;    --flag-obs-ink:  #123f66;   --flag-obs-rule: #7fa3c4;
  --flag-pos-bg:  #e2f2e5;    --flag-pos-ink:  #175226;   --flag-pos-rule: #74a983;
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
  max-width: 72rem;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "Liberation Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.45;
}

/* ---- skip link for keyboard users ---------------------------------------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent-ink);
  color: #ffffff;
  padding: 0.5rem 0.9rem;
  z-index: 10;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---- headings & text ------------------------------------------------------ */
h1 {
  font-size: 1.55rem;
  line-height: 1.2;
  margin: 1.1rem 0 0.2rem;
  color: var(--accent-ink);
}
h2 {
  font-size: 1.18rem;
  margin: 1.6rem 0 0.5rem;
  padding-bottom: 0.15rem;
  border-bottom: 2px solid var(--rule);
  color: var(--accent-ink);
}
h3 { font-size: 1.02rem; margin: 1rem 0 0.3rem; }

p { margin: 0.4rem 0; }

a { color: var(--accent); text-decoration: underline; }
a:hover { color: var(--accent-ink); }
a:focus-visible,
[tabindex="0"]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

code, .path {
  font-family: ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--panel);
  padding: 0 0.25em;
  border-radius: 3px;
}

.subtitle { color: var(--muted); margin: 0 0 0.8rem; font-size: 0.98rem; }

/* ---- meeting fact panel --------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.4rem 1.2rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  margin: 0.8rem 0 1rem;
}
.facts div { font-size: 0.95rem; }
.facts dt {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0;
}
.facts dd { margin: 0; }

/* ---- dense tables --------------------------------------------------------- */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.6rem 0 1rem;
  font-size: 0.92rem;
}
caption {
  text-align: left;
  font-weight: 700;
  color: var(--muted);
  font-size: 0.85rem;
  padding-bottom: 0.25rem;
}
th, td {
  border: 1px solid var(--rule);
  padding: 0.3rem 0.5rem;
  vertical-align: top;
  text-align: left;
}
thead th { background: var(--accent-ink); color: #ffffff; }
tbody tr:nth-child(even) { background: var(--panel); }
th.num, td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- snippet / hover-expand pattern --------------------------------------
   Dense views show only the leading text of an item; the full text is revealed
   on mouse hover OR keyboard focus (give the element tabindex="0").
   The clipped text remains in the DOM, so screen readers always receive the
   full content; clamping is purely visual. ------------------------------- */
.snip {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.9em;               /* fallback when line-clamp unsupported */
  position: relative;
  cursor: help;
  transition: max-height 0.15s ease-in-out;
}
.snip:hover, .snip:focus, .snip:focus-within {
  -webkit-line-clamp: unset;
  max-height: 200em;
  overflow: visible;
}
/* silent visual affordance: a small caret at the start of clipped entries.
   Built from borders (content:"") so screen readers announce nothing extra. */
.snip[tabindex="0"]::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 0.42em solid var(--accent);
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  margin-right: 0.35em;
}
.snip[tabindex="0"]:hover::before,
.snip[tabindex="0"]:focus::before,
.snip[tabindex="0"]:focus-within::before {
  border-top: 0.42em solid var(--accent);
  border-bottom: 0;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
}
.snip[tabindex="0"] { border-bottom: 1px dotted var(--rule); }

@media (prefers-reduced-motion: reduce) {
  .snip { transition: none; }
}

/* ---- flag chips ----------------------------------------------------------- */
.chip {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
  vertical-align: baseline;
}
.chip-high { background: var(--flag-high-bg); color: var(--flag-high-ink); border-color: var(--flag-high-rule); }
.chip-med  { background: var(--flag-med-bg);  color: var(--flag-med-ink);  border-color: var(--flag-med-rule); }
.chip-obs  { background: var(--flag-obs-bg);  color: var(--flag-obs-ink);  border-color: var(--flag-obs-rule); }
.chip-pos  { background: var(--flag-pos-bg);  color: var(--flag-pos-ink);  border-color: var(--flag-pos-rule); }

/* flag cards */
.flag {
  border: 1px solid var(--rule);
  border-left-width: 6px;
  border-radius: 4px;
  padding: 0.5rem 0.8rem;
  margin: 0.6rem 0;
}
.flag-high { border-left-color: var(--flag-high-ink); }
.flag-med  { border-left-color: var(--flag-med-rule); }
.flag-obs  { border-left-color: var(--flag-obs-rule); }
.flag-pos  { border-left-color: var(--flag-pos-rule); }
.flag h3 { margin: 0 0 0.2rem; }
.flag .cite { font-size: 0.88rem; color: var(--muted); margin-top: 0.25rem; }

/* ---- misc ----------------------------------------------------------------- */
.tag { color: var(--muted); font-size: 0.85em; }
ul.compact { margin: 0.3rem 0 0.6rem 1.2rem; padding: 0; }
ul.compact li { margin: 0.15rem 0; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 1.5rem 0; }

footer.pagefoot {
  margin-top: 2rem;
  padding-top: 0.8rem;
  border-top: 2px solid var(--rule);
  color: var(--muted);
  font-size: 0.85rem;
}

/* ==========================================================================
   Site-wide disclaimer — injected from this stylesheet onto the bottom of
   every generated page. Edit the text here to change it everywhere.
   Modern browsers expose CSS generated content to assistive technology as
   part of the body's accessibility tree.
   ========================================================================== */
body::after {
  content: "AI-Generated Content from official sources. Not warranted for any use.";
  display: block;
  margin-top: 1.2rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

/* ---- print ---------------------------------------------------------------- */
@media print {
  body { max-width: none; }
  .snip { max-height: none; -webkit-line-clamp: unset; overflow: visible; }
  .snip[tabindex="0"]::after { content: ""; }
  a { color: var(--ink); }
}