/* ---------------------------------------------------------------------------
   KPCA HQ - typography scale-up
   ---------------------------------------------------------------------------
   The app pins the root to 15px (src/index.css), so Tailwind's rem-based scale
   rendered smaller than intended everywhere:
       text-sm  0.875rem -> 13.1px   (the bulk of the UI)
       text-xs  0.75rem  -> 11.3px   (hints, badges, table meta)

   Back to the 16px browser standard, with the smallest step lifted so secondary
   text stays legible on dense screens:
       text-sm  -> 14px
       text-xs  -> 13px

   These rules are deliberately UNLAYERED: the bundle defines html{font-size}
   and the type scale inside @layer base/theme, and unlayered rules win over
   layered ones regardless of source order.

   NOTE: this is a stopgap applied directly to the server because the current
   app source lives on another machine. Fold it into src/index.css when the
   source is reunified, then delete this file and its <link> from index.html.
--------------------------------------------------------------------------- */

html {
  font-size: 16px;
}

:root {
  --text-xs: 0.8125rem;              /* 13px, was 12px at the new root */
  --text-xs--line-height: calc(1.125 / 0.8125);
}

/* Recharts sets tick/legend text with a fontSize presentation attribute (12),
   which the rem scale above cannot reach. CSS beats presentation attributes. */
.recharts-cartesian-axis-tick-value,
.recharts-cartesian-axis-tick-value tspan,
.recharts-legend-item-text,
.recharts-label,
.recharts-tooltip-wrapper {
  font-size: 13px;
}

/* <small> defaults to font-size:80%, which is relative and compounds when
   nested - that produced 11.2px text and 12.8px buttons on Manage > About.
   A rem value is root-relative, so it cannot compound. */
small {
  font-size: 0.8125rem;
}