/* Reset, fonts, type rhythm, page frame. Everything here is tenant neutral:
   it reads tokens.css and names no hex of its own. */

/* Variable fonts, latin subset, served from /fonts (the @fontsource-variable packages). */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal; font-display: swap; font-weight: 200 900;
  src: url('/fonts/source-serif-4/files/source-serif-4-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic; font-display: swap; font-weight: 200 900;
  src: url('/fonts/source-serif-4/files/source-serif-4-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-display: swap; font-weight: 200 900;
  src: url('/fonts/source-sans-3/files/source-sans-3-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic; font-display: swap; font-weight: 200 900;
  src: url('/fonts/source-sans-3/files/source-sans-3-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal; font-display: swap; font-weight: 200 900;
  src: url('/fonts/source-code-pro/files/source-code-pro-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* el.hidden = true is how this product turns a thing off, and a class of our own that
   sets a display beats the browser's own [hidden] rule every time. Without this line
   the soft lock veil stays over the glass after the right PIN, the quiet board keeps
   two empty blocks of paper it said to take away, and a green bar that was hidden is
   still a dark slab. One line, because every one of those was a real bug. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--c-paper);
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Nothing in a clinic app is ever selected by accident or pulled by a thumb. */
button, a, .tap { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* An anchor is furniture, not a web link. Inside a card or a row it is part of that
   surface: the same ink, no browser underline and no blue. A phone number sitting
   underlined and violet in the middle of a person's card is the one thing on that
   card that looks like it came from somewhere else. */
:is(.panel, .card, .tile, .prow, .chair, .stat, .ladder-row, .toast, .sheet-panel, .lead,
  .scard, .ask, .office-row, .exception, .allclear, .qr-card) a:not(.big-act) {
  color: inherit; text-decoration: none;
}
/* An act that happens to be a link (the one tel: link at the head of a call row)
   sits in a stack of buttons and has to be indistinguishable from them. Its own
   class owns the fill and the ink; this is everything else a button gets. */
a.big-act {
  font: inherit; text-decoration: none; cursor: pointer;
  box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
img, svg, video { display: block; max-width: 100%; }
input, select, textarea { font: inherit; color: inherit; }

/* Type. Headings are serif, every control is sans, every number is mono. */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.16; letter-spacing: -.01em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.005em; }
p  { max-width: 66ch; }

.eyebrow {
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--c-amber-text);
}
.lead { font-size: var(--t-lead); color: var(--c-ink70); max-width: 56ch; }
/* ink50 is 3.5:1. It is decoration, never a word, so the quiet line is ink70. */
.fine { font-size: var(--t-fine); color: var(--c-ink70); max-width: 76ch; }
/* The tenant pack picks the digit features, because a treatment board must not jitter. */
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: var(--f-num-features, 'tnum' 1); }

/* Layout. 1120 wrap, 24 gutter, 2 up collapsing at 900, exactly as the shipped site. */
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s3); }
.grid2 { display: grid; gap: var(--gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }

/* Depth is a hairline on white over warm paper, plus a 2px lift. No shadows.
   The one exception is a sheet, which needs to read as above the board. */
.panel {
  background: var(--c-card); border: var(--hair); border-radius: var(--r-card);
  padding: var(--s5);
}

/* Focus is visible and it is the brand mark, not a browser blue. --c-mark, not
   --c-forest, or the ring is invisible in room mode. */
:focus-visible { outline: 3px solid var(--c-mark); outline-offset: 3px; border-radius: 4px; }

/* The green bar is welded to the bottom, so the page keeps room for it. */
body[data-greenbar="on"] { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }

/* Reduced motion is a first class path, not a later fix. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}