/* Market Watch — the platform's look, directionally Community Catalyst.
 *
 * Decided 22 September 2026 from the design exploration canvas. One file,
 * linked after each page's own <style>, so it wins the cascade on the
 * variables every page already defines and on the handful of shared
 * chrome rules (masthead, nav, banner, buttons). Pages keep their own
 * layout; only the palette, the type and the chrome move.
 *
 * What is borrowed: the palette read from communitycatalyst.org (deep
 * green, aubergine, one loud orange, mint, cream) and the posture (serif
 * display over a plain sans). What is not: the logo, the name in the
 * masthead, and the site's licensed faces (Teodor, PP Mori) — Fraunces
 * and Inter stood in until 5 October 2026; Source Serif 4 and Public Sans stand in now.
 *
 * The dot is the one motif: a record family on file, a check passed, a
 * facility on the map. Never decoration.
 *
 * Contrast: cream and mint on green pass at every size; orange on green
 * only at display size, so alerts on dark ground use mint and orange
 * lives on light. Caption grey is #746d7e (4.6:1 on white), not lighter.
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --cc-green: #133d35; --cc-green-deep: #042b26;
  --cc-aubergine: #270e40; --cc-aubergine-soft: #4f49ad;
  --cc-orange: #f44b08; --cc-orange-deep: #d93300;
  --cc-mint: #acfdc5; --cc-mint-soft: #e3ffec; --cc-cream: #fff3ee;
  /* Type, revised 5 October 2026: a text serif for titles and running copy, a
     plain civic sans for the interface, a mono for identifiers and figures.
     Numbers are set in the sans with tabular figures, never in the display face. */
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --text: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --paper: #fff3ee; --surface: #ffffff;
  --ink: #191022; --ink-70: #4a4455; --ink-60: #5c5568; --ink-45: #746d7e; --ink-35: #746d7e;
  --rule: #eadfd8; --rule-soft: #f5ece7; --tint: #fff3ee; --hl: #fff3ee; --chip-bg: #f6ebe5;
  --fin: #4f49ad; --txn: #f44b08; --reg: #1f7a6d; --clo: #b02a00; --ops: #270e40;
  --good: #1f7a6d; --warn: #b8600b; --warn-s: #b8600b; --accent: #4f49ad;
  --caution: #b02a00; --caution-bg: #fde3d9;
  --banner-bg: #270e40; --banner-ink: #fff3ee;
  --watch: #b02a00; --elevated: #d93300; --monitor: #746d7e; --pending: #746d7e;
  --map-empty: #f5ece7;
}

:root[data-theme="dark"] {
  --paper: #0f2823; --surface: #133d35;
  --ink: #fff3ee; --ink-70: #d7e6df; --ink-60: #c9d9d2; --ink-45: #9fb8ad; --ink-35: #9fb8ad;
  --rule: #245248; --rule-soft: #1b4a40; --tint: #0f2823; --hl: #1b4a40; --chip-bg: #0f2823;
  --fin: #b3aff5; --txn: #ff8a5b; --reg: #7fcf9c; --clo: #ff8a5b; --ops: #d9d2e3;
  --good: #acfdc5; --warn: #ffc36b; --warn-s: #ffc36b; --accent: #acfdc5;
  --caution: #ff8a5b; --caution-bg: #3a1a10;
  --banner-bg: #042b26; --banner-ink: #fff3ee;
  --watch: #ff8a5b; --elevated: #ffc36b; --monitor: #9fb8ad; --pending: #9fb8ad;
  --map-empty: #1b4a40;
}

/* ---------- type ---------- */
body { font-family: var(--sans); font-feature-settings: "kern"; }
h1, h2, .brand, .sb-title, .mast h1, .masthead h1 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.012em; }
.mast h1, .masthead h1 { font-size: 32px; line-height: 1.12; }
.sb-title { font-size: 32px; font-weight: 500; }
.brand { font-size: 22px; font-weight: 500; }
.brand small { font-family: var(--sans); }
.mono, .tag, .facet .fn, .row .ccn, code, kbd { font-family: var(--mono); }
/* Card and section titles: serif, sentence case. Several pages set these
   as small uppercase labels; the look reads them as titles. */
.card h3, .cap h3, .ph h3, .brief h3, .asks h3, .fig h3 {
  font-family: var(--serif); font-weight: 500; text-transform: none; letter-spacing: -.01em;
  font-size: 19px; line-height: 1.25; }
/* Figures: the sans, tabular, medium weight. A number in the display face
   reads as a brochure; a number in the text face reads as a count. */
.sb-stats .v, .kpi b, .stat .v, .sb-classes .cls b, .kpi .v {
  font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.sb-stats .k, .kpi span, .stat .k { text-transform: none; letter-spacing: 0; font-size: 12.5px; }

/* ---------- chrome: masthead, nav, banner ---------- */
.top, .mast, .masthead {
  background: var(--cc-green); color: var(--cc-cream); border-bottom: 0; }
/* On the map, progress, console and insights pages the masthead sits inside
   the page column with no side padding of its own, so as a green band it
   needs its own inset and corners. */
.wrap > header.mast, .wrap > .mast { padding: 30px 30px 22px; border-radius: 16px; margin-top: 20px; }
.top .brand, .mast h1, .masthead h1, .mast .eyebrow, .masthead .eyebrow { color: var(--cc-cream); }
.brand small, .top-right, .mast-meta, .mast .eyebrow, .masthead .eyebrow,
.mast-meta span, .mast-left p { color: #9fb8ad; }
.mast-meta a, .top-right a { color: var(--cc-mint); }
.theme-btn, .mast .theme-btn, .top .theme-btn {
  background: var(--cc-mint); color: var(--cc-green-deep); border: 1px solid var(--cc-mint);
  font-weight: 600; }
.theme-btn:hover { background: #c4ffd6; }
.mwnav { background: var(--cc-green-deep); border-bottom: 0; }
.mwnav a { color: #d7e6df; }
.mwnav a:hover { color: var(--cc-cream); background: rgba(255, 243, 238, .07); }
.mwnav a.on { color: var(--cc-mint); border-bottom-color: var(--cc-mint); font-weight: 600; }
/* The "no scores" banner is a dark strip; a page's inline `.note`
   paragraph (the map's) is not, hence the child selector. */
.note:has(> .note-in) { background: var(--cc-green-deep); border-bottom: 0; }
.note > .note-in { color: #d7e6df; padding-top: 11px; padding-bottom: 11px; }
.note > .note-in b { color: var(--cc-cream); }

/* ---------- explorer ---------- */
/* Tiles are a table, not a brochure: white, a hairline, square-ish corners,
   the count first and the label under it in sentence case. */
.sb-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.sb-classes .cls { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 10px 14px 9px; min-width: 0; }
.sb-classes .cls b { font-size: 20px; line-height: 1.1; }
.sb-classes .cls span, .sb-classes .cls small { font-size: 12px; color: var(--ink-60); }
.sb-classes .cls:hover { border-color: var(--ink-45); }
.sb-classes .cls.on { background: var(--cc-green); color: var(--cc-cream); border-color: var(--cc-green); box-shadow: none; }
.sb-classes .cls.on span, .sb-classes .cls.on small { color: #d7e6df; }
.sb-stats { gap: 28px; }
.sb-stats .v { font-size: 24px; }
.sb-stats .v.alert { color: var(--cc-orange-deep); }
.sb-sub { font-size: 13px; color: var(--ink-60); }
.searchbar input[type="search"], .searchbar select { border-radius: 4px; }
.facet { border-radius: 4px; }
.facet .fn { font-size: 11.5px; }
.facet.on, .pill.on { background: var(--cc-green); color: var(--cc-cream); border-color: var(--cc-green); }
.pill { border-radius: 3px; letter-spacing: 0; font-weight: 600; }
.tag { font-family: var(--mono); text-transform: none; letter-spacing: 0; border-radius: 3px; font-size: 11px; }
.tag.sole { background: #fde3d9; color: #b02a00; }
.tag.cah { background: var(--cc-mint-soft); color: var(--cc-green); }
.tag.rural { background: var(--chip-bg); color: var(--ink-60); }
.tag.closed { background: #fde3d9; color: #b02a00; }
.results { border-radius: 4px; }
.row .nm { font-weight: 600; }
/* "Start here" is a list, not a stack of cards. */
.asks h3 { font-size: 17px; margin-bottom: 4px; }
.ask { background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 11px 2px; }
.ask:hover { background: transparent; border-color: var(--rule); }
.ask:hover .aq { color: var(--cc-aubergine-soft); text-decoration: underline; }
.ask .aq { font-size: 14.5px; }
.card { border-radius: 6px; }

/* ---------- dark theme adjustments ---------- */
:root[data-theme="dark"] .top, :root[data-theme="dark"] .mast, :root[data-theme="dark"] .masthead,
:root[data-theme="dark"] .mwnav, :root[data-theme="dark"] .note:has(> .note-in) { background: var(--cc-green-deep); }
:root[data-theme="dark"] .sb-classes .cls { background: var(--surface); border-color: var(--rule); }
:root[data-theme="dark"] .sb-classes .cls.on { background: var(--cc-mint); color: var(--cc-green-deep); border-color: var(--cc-mint); }
:root[data-theme="dark"] .sb-classes .cls.on span, :root[data-theme="dark"] .sb-classes .cls.on small { color: #245248; }
:root[data-theme="dark"] .facet.on, :root[data-theme="dark"] .pill.on { background: var(--cc-mint); color: var(--cc-green-deep); border-color: var(--cc-mint); }
:root[data-theme="dark"] .ask:hover .aq { color: var(--cc-mint); }
:root[data-theme="dark"] .sb-stats .v.alert { color: #ff8a5b; }
:root[data-theme="dark"] .tag.sole, :root[data-theme="dark"] .tag.closed { background: #3a1a10; color: #ff8a5b; }
:root[data-theme="dark"] .tag.cah { background: #1b4a40; color: var(--cc-mint); }
:root[data-theme="dark"] .ask { background: transparent; }