/* Portico design tokens.
   Generated from the Portico design system. Change values there, not here.

   Sizes are in rem so that the portal follows the reader's own browser text
   size. Radius and hairlines stay in pixels: a corner does not grow with a
   sentence.

   The portal ships light. The dark values are defined but inert: nothing
   activates them unless [data-theme="dark"] is set on the root element. */

:root {
  color-scheme: light;

  /* ---- Colour ------------------------------------------------------ */
  --canvas:          #F3F7FA;  /* page ground; never white */
  --surface:         #FFFFFF;  /* cards, panels, table bodies */
  --surface-sunken:  #E8EEF3;  /* table headers, inset areas */
  --border:          #D9E2E9;  /* hairlines; 1px, never 2 */
  --border-strong:   #BDC9D2;  /* inputs, secondary buttons */
  --border-error:    #8F1D1D;  /* a field holding something wrong */

  --ink:             #131E26;  /* body and headings; ~17:1 on surface */
  --ink-muted:       #54626D;  /* metadata, labels; ~6.3:1 on surface */
  --ink-faint:       #78848E;  /* placeholders only */

  --accent:          #14506E;  /* the one brand colour */
  --accent-hover:    #0F4159;
  --accent-ink:      #FFFFFF;  /* on an accent fill; ~8.7:1 */
  --accent-soft:     #E2EDF4;  /* selection, never a status */
  --focus:           #1F6E96;

  --link:            #14506E;  /* a link in running text, always underlined */
  --link-hover:      #0F4159;

  --disabled-bg:     #E8EEF3;  /* a control that cannot be used yet */
  --disabled-ink:    #78848E;

  --attention-bg:    #FDF0DE;  /* a person must do something */
  --attention-ink:   #7C4408;
  --problem-bg:      #FBE7E7;  /* something failed */
  --problem-ink:     #8F1D1D;
  --done-bg:         #E3F1E7;  /* finished; needs nothing */
  --done-ink:        #1D6334;
  --waiting-bg:      #E8EDF1;  /* nobody can act yet */
  --waiting-ink:     #4A5862;

  /* ---- Type (rem: follows the reader's browser text size) ----------- */
  --font-ui:   "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --display-size: 1.75rem;    --display-line: 2.125rem;  --display-weight: 600;
  --heading-size: 1.25rem;    --heading-line: 1.625rem;  --heading-weight: 600;
  --subhead-size: 1rem;       --subhead-line: 1.375rem;  --subhead-weight: 600;
  --body-size:    0.9375rem;  --body-line:    1.4375rem;
  --small-size:   0.8125rem;  --small-line:   1.1875rem;
  --label-size:   0.6875rem;  --label-line:   1rem;      --label-track: 0.07em;
  --code-size:    0.8125rem;  --code-line:    1.1875rem;

  /* ---- Spacing (scales with the text) ------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;    /* card padding; see --gutter for the page edge */
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* The page edge never falls below 16px however small the text is set. */
  --gutter: max(16px, var(--space-4));

  /* ---- Control sizes: minimums, never fixed heights ----------------- */
  --control-min-height: 2.5rem;
  --pill-min-height:    1.375rem;

  /* ---- Radius and shadow (pixels, deliberately) --------------------- */
  --radius-sm:    4px;
  --radius-md:    8px;   /* the default: buttons, cards, callouts */
  --radius-lg:   12px;
  --radius-pill: 999px;  /* status pills only */

  --shadow-card:   0 1px 2px rgba(19, 30, 38, 0.07);
  --shadow-raised: 0 4px 12px rgba(19, 30, 38, 0.12);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas:          #0F161B;
  --surface:         #17212A;
  --surface-sunken:  #111A20;
  --border:          #28343D;
  --border-strong:   #3A4952;
  --border-error:    #F0A1A1;

  --ink:             #E7EDF2;
  --ink-muted:       #9AA8B3;
  --ink-faint:       #6F7D88;

  --accent:          #4FA3C7;
  --accent-hover:    #68B5D6;
  --accent-ink:      #06202B;
  --accent-soft:     #14303D;
  --focus:           #6CBEDE;

  --link:            #4FA3C7;
  --link-hover:      #68B5D6;

  --disabled-bg:     #212C34;
  --disabled-ink:    #6F7D88;

  --attention-bg:    #3A2C12;
  --attention-ink:   #F3C57A;
  --problem-bg:      #3A1D1D;
  --problem-ink:     #F0A1A1;
  --done-bg:         #17301F;
  --done-ink:        #86CFA0;
  --waiting-bg:      #212C34;
  --waiting-ink:     #A5B2BC;
}

/* ---- Faces, served by this application --------------------------------
   Not from Google. A Google Fonts link would tell Google a staff member's
   address and that the portal is in use, on every page load, and Google is
   not a provider the practice's privacy policy names. IBM Plex is under the
   SIL Open Font Licence, which permits serving the files ourselves.
   Adjust the url() paths to wherever the files are actually served.        */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- Base -------------------------------------------------------------- */

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 var(--body-size) / var(--body-line) var(--font-ui);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { text-wrap: balance; margin: 0; }

a { color: var(--link); text-decoration: underline; }
a:hover { color: var(--link-hover); }

/* Every digit a person might check lines up in a column: dates of birth,
   mobiles, Medicare and membership numbers, times, counts. */
.nums,
time,
[data-nums] { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* No ::selection rule, deliberately (the surgeon, 03/11/2026). There was one:
     ::selection { background: var(--accent-soft); color: var(--ink); }
   Harmless, but not free: in Chrome, any ::selection rule stops a file
   picker being drawn larger at the reader's Large and Very large text
   settings (its computed size still grows; its drawing does not), and
   "Choose files" is the control a patient's referral goes through. Found
   in stage 1's render set; tests/test_portal_text_size.py fails if a file
   picker stops growing. A selection colour is a nicety; this is not.   */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}