/* base.css — reset + primitives. Uses logical properties so RTL/LTR mirror
   automatically. agent3 foundation. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: 1.25; font-weight: 700; }
p { margin: 0 0 var(--sp-3); }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.muted { color: var(--text-2); }
.small { font-size: .85rem; }
.center { text-align: center; }
.row { display: flex; gap: var(--sp-3); align-items: center; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--sp-3); }
.grow { flex: 1; }
.spacer { flex: 1 1 auto; }
.hidden { display: none !important; }
.stack > * + * { margin-top: var(--sp-3); }

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Scrollable wrappers (tables, wide content) never break the page */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

:focus-visible { outline: 3px solid var(--brand-300); outline-offset: 2px; border-radius: 6px; }

/* --- large screens: scale the type, don't just stretch the layout -------
   A hospital TV at 2560px is read from across the room, not from 60cm, and
   16px there is smaller in angular terms than 16px on the laptop it was
   designed on. Everything sized in rem follows this; the px spacing tokens
   deliberately do not, so the layout keeps its proportions instead of
   inflating. Nothing below 1800px is affected. */
@media (min-width: 1800px) { html { font-size: 17px; } }
@media (min-width: 2400px) { html { font-size: 19px; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}