/* Tiny custom overrides on top of Pico. Keep this short. */

/* Pico scales the root font UP at wide breakpoints via the --pico-font-size
   var (106% at 576px ... 131% at 1536px), which reads as "huge" on a desktop
   monitor. Pin the VAR (not font-size -- Pico applies the var to html, so
   setting font-size directly gets overridden). !important beats Pico's own
   media-query declarations of the same var. Everything is rem-based, so this
   shrinks text, spacing, buttons and headings together. */
:root { --pico-font-size: 87.5% !important; }   /* ~14px base, all viewports */

main.container,
main.container-fluid {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

/* Cap line length on text-heavy pages so paragraphs stay readable
   even though the shell is full-width for tables. */
main.container-fluid > article > p,
main.container-fluid > article > header > small {
  max-width: 80ch;
}

nav form[role="search"] input[type="search"] {
  min-width: 16rem;
}

/* Horizontal scroll fallback for wide tables. All our tables already
   live inside <figure>, which is the Pico convention for this. */
figure {
  overflow-x: auto;
}

/* Tighten cell padding on data-dense tables and stop ID/date cells
   from wrapping onto two lines. */
table {
  font-size: 0.92rem;
}
table td,
table th {
  padding: 0.4rem 0.55rem;
}
table td.nowrap,
table th.nowrap,
table td.numeric,
table th.numeric {
  white-space: nowrap;
}
table td.numeric,
table th.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table.compact td,
table.compact th {
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
}

.tag-positive { color: var(--pico-color-red-550); font-weight: 600; }
.tag-zero     { color: var(--pico-muted-color); }
.tag-negative { color: var(--pico-color-green-550); font-weight: 600; }
.tag-missing  { color: var(--pico-muted-color); font-style: italic; }