/* MT AcuteCare -- site chrome and design tokens (2026-10-15 redesign).
   Loaded FIRST on every page that carries the shared header. Holds: the type faces, the
   colour tokens, the header, the account menu, the phone tab bar and the footer. Content
   components (cards, buttons, forms) live in style.css and read these tokens.
   The header/footer MARKUP is not hand-edited per page: it is stamped from
   build/site_chrome/*.html by build/site_chrome/sync_chrome.py, and CI runs --check. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-700.woff2") format("woff2"); }

:root {
  /* brand: the logo's navy and orange. Orange is for the ONE main action on a screen. */
  --ink: #142028;
  --ink-2: #4A5A66;          /* secondary text, 7.0:1 on paper */
  --paper: #F4F6F7;          /* cool ground -- deliberately not cream */
  --surface: #FFFFFF;
  --line: #D9DFE3;
  --line-2: #E6EAED;
  --wash: #E9EEF1;           /* hover / selected background */
  --signal: #BE5504;         /* primary action, 4.9:1 with white text */
  --signal-hover: #A44803;
  --link: #2B5F86;
  --good: #2E7D4F;
  --good-wash: #EEF7F1;
  --bad: #B3261E;
  --bad-wash: #FBEEED;
  --radius: 14px;
  --radius-sm: 10px;
  --font: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Barlow Semi Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif;
  --tabbar-h: 0px;

  /* aliases kept so older inline styles keep working */
  --ink-soft: var(--ink-2);
  --rule: var(--line);
  --accent: var(--signal);
  --accent-soft: var(--link);
  --paper-warm: var(--wash);
  --success: var(--good);
  --error: var(--bad);
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  padding-bottom: var(--tabbar-h);
}

.skip-link {
  position: absolute; top: -48px; left: 8px; z-index: 1000;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 0 0 8px 8px;
  font-weight: 600; font-size: 14px; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
button, input, select, textarea { font-family: inherit; }

/* ---------- header ---------- */
header.site { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 50; }
header.site .sitebar {
  max-width: 1180px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 24px; min-height: 64px; box-sizing: border-box;
}
header.site .mark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: 0 0 auto; }
header.site .mark .sq {
  width: 36px; height: 36px; border-radius: 7px; background: var(--signal); color: #fff;
  font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; letter-spacing: -.02em;
}
header.site .mark .word { font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
header.site nav.primary { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; }
header.site nav.primary a {
  color: var(--ink-2); text-decoration: none; padding: 10px 12px; border-radius: 8px;
  font-weight: 500; font-size: 15px; white-space: nowrap; margin: 0;
}
header.site nav.primary a:hover { color: var(--ink); background: var(--wash); }
header.site nav.primary a[aria-current="page"] { color: var(--ink); background: var(--wash); font-weight: 600; }
header.site .end { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }
header.site .signin { color: var(--ink); font-weight: 600; text-decoration: none; padding: 10px 8px; margin: 0; font-size: 15px; }
header.site .signin:hover { color: var(--link); }
header.site .join {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm);
  background: var(--signal); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
}
header.site .join:hover { background: var(--signal-hover); color: #fff; }

/* signed-in vs signed-out chrome. site.js sets html.auth-in / html.auth-out; until it
   knows, both stay hidden so a signed-in learner never sees "Sign in" flash. */
html:not(.auth-in) [data-auth="in"],
html:not(.auth-out) [data-auth="out"] { display: none !important; }
html:not(.role-admin) [data-role="admin"] { display: none !important; }

.acct { position: relative; }
.acct > button {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.acct > button:hover { border-color: var(--ink); }
.acct .initials {
  width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px;
}
.acct .menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px -12px rgba(20,32,40,.28);
}
.acct .menu .who { padding: 10px 12px 8px; font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--line-2); margin-bottom: 4px; overflow-wrap: anywhere; }
.acct .menu a, .acct .menu button {
  display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 10px 12px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font: inherit; font-size: 15px; background: none; border: 0; cursor: pointer;
}
.acct .menu a:hover, .acct .menu button:hover { background: var(--wash); }

/* ---------- phone tab bar (signed in only) ---------- */
nav.tabbar { display: none; }
@media (max-width: 760px) {
  header.site .sitebar { padding: 8px 16px; gap: 12px; min-height: 60px; }
  header.site nav.primary { display: none; }
  header.site .mark .sq { width: 32px; height: 32px; font-size: 14px; }
  header.site .mark .word { font-size: 17px; }
  header.site .acct > button .label { display: none; }
  header.site .acct > button { padding: 4px; }
  header.site .join { padding: 0 14px; font-size: 14px; }
  html.auth-in { --tabbar-h: 72px; }
  html.auth-in nav.tabbar {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 4px 4px calc(6px + env(safe-area-inset-bottom));
  }
  nav.tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; color: var(--ink-2); text-decoration: none; font-size: 12px; font-weight: 500; margin: 0;
  }
  nav.tabbar a[aria-current="page"] { color: var(--signal); font-weight: 600; }
  nav.tabbar svg { width: 22px; height: 22px; }
}

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--line); background: var(--surface); margin-top: 56px; }
footer.site .sitebar {
  max-width: 1180px; margin: 0 auto; padding: 20px 24px; display: flex; gap: 8px 24px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink-2);
}
footer.site a { color: var(--ink-2); }
footer.site a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { header.site, footer.site, nav.tabbar { display: none !important; } body { background: #fff; padding: 0; } }