@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&display=swap');
/* ============================================================
   VERITIDE RESPONSIVE SYSTEM  —  /assets/responsive.css
   One link on every page makes content scale gracefully from
   phones to ultra-wide monitors instead of pooling in margins.

   Add before </head> on each page:
   <link rel="stylesheet" href="/assets/responsive.css">
   ============================================================ */

/* ---------- RAIL-SHELL PAGES (patient portal + clinic dashboard) ----------
   Selectors are .shell/.content at double specificity so these rules
   outrank each page's own inline .content cap without needing !important. */

/* Large laptop / desktop: widen the reading column */
@media (min-width: 1500px) {
  .shell .content { max-width: 1220px; }
}

/* Big desktop: use more of the width, deepen page margins */
@media (min-width: 1800px) {
  .shell { grid-template-columns: 284px 1fr; }      /* roomier nav rail */
  .shell .rail .nav-item { font-size: 14.5px; }
  .shell .content { max-width: 1460px; padding-left: 44px; padding-right: 44px; }
  .shell .topbar { padding-left: 44px; padding-right: 44px; }
  .shell .stat-row { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* Ultra-wide: keep growing, but cap line lengths so text stays readable */
@media (min-width: 2200px) {
  .shell .content { max-width: 1720px; padding-left: 56px; padding-right: 56px; }
  .shell .topbar { padding-left: 56px; padding-right: 56px; }
}

/* ---------- HEADER-SHELL PAGES (homepage, auth, clinic tool pages) ----------
   These use the centered .wrap column. */

@media (min-width: 1500px) {
  body .wrap { max-width: 1320px; }
}
@media (min-width: 1800px) {
  body .wrap { max-width: 1560px; }
}
@media (min-width: 2200px) {
  body .wrap { max-width: 1800px; }
}

/* ---------- SHARED NICETIES ---------- */

/* Grids that use auto-fit cells get slightly larger minimums on big screens,
   so cards grow instead of multiplying into thin slivers. */
@media (min-width: 1800px) {
  .shell .panels { gap: 22px; }
  .cond-grid { gap: 20px; }
}

/* Never let images or charts force horizontal scroll at any width */
.shell .content img,
.shell .content svg,
body .wrap img { max-width: 100%; }


/* Old PNG-based brand block removed — superseded by /assets/brand-mark.css */