/* ============================================
   2026 Money pages (/money-2026/, /es/money-2026/)
   Loaded after style.min.css. Uses the site tokens.
   ============================================ */

/* --- Page head: the as-of paragraph is itself the freshness chip (ts-asof-chip, style.css); added limit notes --- */
p.m26-asof { max-width: 100%; }

.m26-note,
.m26-prose .m26-note {
  max-width: 72ch;
  margin: 12px 0 28px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--forest);
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink);
}

/* --- Prose converted from the audit pages --- */
.m26-prose { line-height: var(--lh); color: var(--ink); }

.m26-prose p,
.m26-prose ul,
.m26-prose ol { max-width: 72ch; margin: 0 0 16px; }

.m26-prose h2 { margin: 48px 0 14px; }
.m26-prose h3 { margin: 32px 0 10px; }
.m26-prose > :first-child { margin-top: 0; }

.m26-prose ul { list-style: disc; padding-left: 1.4em; }
.m26-prose ol { list-style: decimal; padding-left: 1.6em; }
.m26-prose li + li { margin-top: 6px; }
.m26-prose li > ul,
.m26-prose li > ol { margin: 6px 0 0; }
.m26-prose strong { font-weight: 700; }

/* Long names, IDs and URLs wrap instead of pushing the page wider than a 320px screen. */
.m26-prose p,
.m26-prose li { overflow-wrap: break-word; }

.m26-prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 1px 5px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow-wrap: anywhere;
}

/* Forest and ink are close in lightness, so prose links need an underline. */
.m26-prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* --- Tables: the facelift table pattern (div.ts-table > div.ts-scroll > table.ts-tbl, styled in style.css). Only what is
       specific to these pages is here. --- */

/* An ISO date never splits mid-date; a range breaks only at " to " / " a ". */
.m26-nb { white-space: nowrap; }

/* A caption that repeats the heading right above it stays for screen readers only. */
.m26-prose caption.m26-cap-dup {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Long text columns (sources, notes) wrap; the figures never do (ts-n). */
.m26-prose table.ts-tbl td { overflow-wrap: break-word; vertical-align: top; }

/* Column dictionary on the methodology page: the column names are code-like. */
.m26-prose table.m26-dict tbody :is(th, td):first-child {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}

/* Links inside cells get a 44px-tall tap area without moving the text. */
.m26-prose table.ts-tbl td a,
.m26-prose table.ts-tbl tbody th a { display: inline-block; padding-block: 12px; }

/* Sections of the prose use the facelift section head (the prose rule above is for plain h2/h3). */
.m26-prose h2.ts-sec-h { margin: 0; }
.m26-prose h3.ts-h3 { margin: var(--ts-sp-5, 24px) 0 var(--ts-sp-2, 8px); }
.m26-prose .ts-sec > :is(p, ul, ol, .ts-table) { margin-top: var(--ts-sp-3, 12px); }
.m26-prose .ts-fold-body > :is(p, ul, ol, .ts-table):first-child { margin-top: var(--ts-sp-3, 12px); }
.m26-prose .ts-fold-body .ts-table { margin-bottom: var(--ts-sp-3, 12px); }


/* --- Empty sections stay listed but read quietly, so a page without a statement is short --- */
.m26-prose .m26-empty { color: var(--muted); font-size: var(--fs-small); margin: 0 0 8px; }

/* --- Jump chips at the top of a long page (no scroll-margin: the page already offsets anchors) --- */
.m26-toc ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }

.m26-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 22rem;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: 500 0.75rem/1.3 var(--font-mono);
  text-decoration: none;
}

.m26-toc a:hover { border-color: var(--forest); color: var(--forest); }
.m26-toc a:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

@media (max-width: 767px) {
  .m26-toc ul { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 8px; scroll-snap-type: x proximity; }
  .m26-toc li { flex: none; scroll-snap-align: start; }
  .m26-toc a { white-space: nowrap; max-width: none; }
}

/* --- Top of candidate and committee pages --- */
/* The leading facts (IDs, coverage, office, links) sit in one quiet panel under the tiles. */
.m26-facts {
  max-width: 72ch;
  margin: var(--ts-sp-4, 16px) 0 0;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.m26-facts p { margin: 0 0 6px; }
.m26-facts p:last-child { margin-bottom: 0; }

/* "No matched committee" and "no current-year statement": a plain status panel, not a limit note. */
.m26-status,
.m26-prose .m26-status {
  max-width: 72ch;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--muted);
  border-radius: 2px;
  font-family: var(--font-ui);
  line-height: 1.55;
}

/* One quiet line under a table. */
.m26-prose .m26-aside { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--muted); }

/* --- Landing link grid (children are the facelift's li.ts-card) --- */
.m26-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ts-sp-5, 24px);
  margin: var(--ts-sp-5, 24px) 0 0;
  padding: 0;
  list-style: none;
}

/* --- Data downloads list (methodology page) --- */
.m26-downloads,
.m26-prose .m26-downloads { max-width: 72ch; margin: 16px 0 24px; padding: 0; list-style: none; }

.m26-downloads li,
.m26-prose .m26-downloads li + li { margin: 0; padding: 12px 0; border-bottom: 1px dashed var(--rule); }

.m26-downloads a { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; }

/* ============================================
   Explorer host classes (#salinas-money-explorer)
   The explorer's own <style> block comes after this file in <head>, so
   rules that must beat it carry one more type or class selector.
   ============================================ */
#salinas-money-explorer { margin: 0 0 16px; }
#salinas-money-explorer h2 { margin: 0 0 8px; }
#salinas-money-explorer h3 { margin: 24px 0 8px; }
#salinas-money-explorer p { max-width: 72ch; margin: 16px 0 8px; }
#salinas-money-explorer hr { border: 0; border-top: 1px solid var(--rule); margin: 32px 0 8px; }

/* The site's section + section gap would misalign the two-column grid. */
#salinas-money-explorer .flow-grid > section { margin-top: 0; min-width: 0; }

/* Figures fill a grid: two per row on phones, more on wide screens. */
#salinas-money-explorer div.metric-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
#salinas-money-explorer div.metric-row > div { flex: none; }

/* The as-of line in the explorer script replaces the static one; the static line stays as the no-script fallback. */
#salinas-money-explorer #salinas-asof-static:has(+ #salinas-asof:not(:empty)) { display: none; }

/* Which committee and view the figures below belong to (also names the committee on a printout). */
#salinas-money-explorer .m26-context { max-width: none; margin: 0 0 12px; }

/* A missing value is a plain status word, not a figure. */
#salinas-money-explorer .m26-na { font-family: var(--font-body); font-style: italic; font-weight: 400; color: var(--muted); }

#salinas-money-explorer .text-small { font-family: var(--font-ui); font-size: var(--fs-small); line-height: 1.5; }
#salinas-money-explorer .text-muted { color: var(--muted); }
#salinas-money-explorer .text-end { text-align: right; }
#salinas-money-explorer .tabular-nums { font-variant-numeric: tabular-nums; }

#salinas-money-explorer .metric-row .tabular-nums {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--forest);
}

/* Controls */
#salinas-money-explorer .viz-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  margin: 20px 0 24px;
}

#salinas-money-explorer .form-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--muted);
}

#salinas-money-explorer .form-label:first-child { flex-grow: 2; }

/* Same look as the site's .filter-bar select (arrow copied from it). */
#salinas-money-explorer .form-select {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 36px 8px 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237A7468' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--rule);
  border-radius: 2px;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s;
}

#salinas-money-explorer .form-select { border-color: var(--muted); }

#salinas-money-explorer .form-select:hover,
#salinas-money-explorer .form-select:focus { border-color: var(--forest); }

/* The committee picker is not used by the candidate comparison. */
#salinas-money-explorer .form-select:disabled { opacity: 0.55; cursor: not-allowed; }

/* Party names: text-like buttons in the link color. 44px tap target at every
   width (same as the site's phone rule), left-aligned, wrapping. */
#salinas-money-explorer .btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}

#salinas-money-explorer .btn-ghost {
  color: var(--forest);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

#salinas-money-explorer .btn-ghost:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
#salinas-money-explorer .btn-ghost:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

/* The close button opens the details panel, so the rule below it sits close. */
#salinas-money-explorer #salinas-detail hr { margin-top: 8px; }

/* Tables scroll sideways instead of squeezing: break-word (not anywhere)
   keeps amounts and words whole, and cells keep a readable minimum width.
   The edge shadows are the scroll cue (same technique as the prose tables, on the cream page). */
#salinas-money-explorer .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 8px 0 12px;
  background:
    linear-gradient(to right, var(--cream) 30%, rgba(244, 239, 228, 0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--cream) 30%, rgba(244, 239, 228, 0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(30, 58, 47, 0.22), rgba(30, 58, 47, 0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(30, 58, 47, 0.22), rgba(30, 58, 47, 0)) right center / 12px 100% no-repeat scroll,
    var(--cream);
}

#salinas-money-explorer .table-responsive:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
#salinas-money-explorer .table { width: 100%; border-collapse: collapse; }

/* Not sticky, not sortable-looking. */
#salinas-money-explorer .table th { position: static; cursor: default; user-select: auto; white-space: normal; vertical-align: bottom; }
#salinas-money-explorer .table th:hover { color: var(--muted); }
#salinas-money-explorer .table th.text-end { text-align: right; }
#salinas-money-explorer .table td { min-width: 6.5rem; overflow-wrap: break-word; vertical-align: middle; }
#salinas-money-explorer .table td.text-end { font-variant-numeric: tabular-nums; white-space: nowrap; }
#salinas-money-explorer .table-sm th,
#salinas-money-explorer .table-sm td { padding: 8px 10px; }

/* The name column is the row header: body text, not a small-caps column header. */
#salinas-money-explorer .table tbody th {
  font-family: var(--font-ui);
  font-size: inherit;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  vertical-align: middle;
  background: none;
  color: var(--ink);
  white-space: normal;
}

/* The 8-column candidate comparison keeps the candidate name in view while the figures scroll. */
#salinas-money-explorer .table:has(thead th:nth-child(5)) tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 8.5rem;
  background: var(--cream);
  box-shadow: 1px 0 0 var(--rule);
}

/* Rows with a name button need room for the button's focus ring (the last row is not clipped). */
#salinas-money-explorer .table-sm :is(td, th):has(> .btn) { padding-top: 5px; padding-bottom: 5px; }

/* Filing references panel */
#salinas-money-explorer .sources { margin: 12px 0 0; }
#salinas-money-explorer .sources summary { padding: 10px 0; font-family: var(--font-ui); font-size: var(--fs-small); color: var(--forest); cursor: pointer; }

@media (max-width: 767px) {
  #salinas-money-explorer .table th { font-size: 0.75rem; letter-spacing: 0.06em; }
}

@media (max-width: 480px) {
  #salinas-money-explorer .viz-controls { gap: 12px; }
  #salinas-money-explorer .form-label { flex-basis: 100%; }
}

/* --- Print: nothing clipped (the facelift print rules in style.css open the folds and show every row) --- */
@media print {
  #salinas-money-explorer .table-responsive { overflow: visible; max-height: none; border: 0; }
  #salinas-money-explorer .table { font-size: 8pt; }
  #salinas-money-explorer .table th,
  #salinas-money-explorer .table td { min-width: 0; padding: 4px 6px; white-space: normal; }
  #salinas-money-explorer .table tr { break-inside: avoid; }
  .m26-prose table.ts-tbl tr { break-inside: avoid; }

  #salinas-money-explorer .table-responsive { background: none; }
  #salinas-money-explorer .table:has(thead th:nth-child(5)) tr > :first-child { position: static; box-shadow: none; }
  #salinas-money-explorer .table td.text-end { white-space: normal; }

  .m26-note { background: none; }
  .m26-facts,
  .m26-status { background: none; }
  #salinas-money-explorer .btn-ghost { color: var(--ink); }
  #salinas-money-explorer .form-select { background-image: none; }
}