/* Central Psych — staff app. Palette, type and shapes from docs/src/screens.css.
   Brand: teal and sage are exactly the official logo colours
   (public/logo*.svg, converted from the practice's artwork); Montserrat is the
   face centralpsychcharlotte.com uses for text and headings. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/montserrat-latin.woff2) format("woff2");
}

:root {
  --bg:    #FBFCFC;
  --card:  #FFFFFF;
  --ink:   #2A2530;
  --ink2:  #6A6870;
  --ink3:  #66656D;   /* secondary text: 5.6:1 on the page background. The old #9A99A1 was 2.7:1 — too faint for small text */
  --ink4:  #9A99A1;   /* decoration only (dim dots, dividers) — never text */
  --line:  #E4EAEA;
  --teal:  #126C79;
  --teal-d:#0E5761;
  --sage:  #7FA8A6;   /* borders, dots, focus rings — not text */
  --sage-text: #4F7877;   /* the same green, dark enough to read: 4.8:1 */
  --pale:  #E8F1F1;   /* surfaces: a lighter step of the logo's maze fill, #CDE0E4 */
  --plum:  #383139;
  --brown: #763F1A;
  --warn-bg: #FBF3EC;
  --f-ui: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
a { color: var(--teal); text-underline-offset: 2px; }
button, input, select { font: inherit; }

/* --- chrome --- */
.bar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: max(1rem, env(safe-area-inset-top)) 1.25rem .9rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.lock { display: flex; align-items: center; flex: none; text-decoration: none; }
.lock img { height: 2.75rem; width: auto; display: block; }
.bar nav { display: flex; gap: 1rem; }
.bar nav a {
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink3); text-decoration: none; padding: .25rem 0;
}
.bar nav a[aria-current] { color: var(--teal); border-bottom: 1.5px solid var(--teal); }
/* Small phones (320px): the logo and an admin's three links need a little less room to fit on one line. */
@media (max-width: 360px) {
  .bar { padding-left: 1rem; padding-right: 1rem; gap: .75rem; }
  .lock img { height: 2.25rem; }
  .bar nav { gap: .75rem; }
}

main { flex: 1; width: 100%; max-width: 26rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
main.wide { max-width: 64rem; }

/* --- type --- */
.kick {
  font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage-text); margin: 0 0 .6rem;
}
h1.tt, h2.tt {
  font-weight: 300; font-size: 1.85rem; line-height: 1.18; letter-spacing: -.01em;
  margin: 0 0 .5rem; color: var(--plum);
}
h2.tt { font-size: 1.4rem; }
.sub { font-size: .9375rem; color: var(--ink2); margin: 0 0 1.25rem; }
.muted { color: var(--ink3); font-size: .875rem; }
p.note { font-size: .8125rem; color: var(--ink3); line-height: 1.5; }

/* --- status cards --- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.1rem; margin-bottom: .75rem;
}
.card .r1 { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 600; color: var(--plum); }
.card .r2 { font-size: .8125rem; color: var(--ink3); margin-top: .2rem; font-variant-numeric: tabular-nums; }
.pip { width: .55rem; height: .55rem; border-radius: 50%; background: var(--sage); flex: none; }
.pip.dim { background: var(--ink4); }
.pip.warn { background: var(--brown); }

.who { font-size: .875rem; color: var(--ink3); line-height: 1.55; margin: .5rem 0 1.5rem; }
.who b { color: var(--ink2); font-weight: 600; }

/* --- buttons and forms --- */
.btn {
  display: block; width: 100%; border: none; border-radius: 9px; padding: 1rem;
  font-size: 1rem; font-weight: 600; letter-spacing: .02em;
  background: var(--teal); color: #fff; cursor: pointer; text-align: center; text-decoration: none;
  transition: filter .15s ease;
}
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.quiet { background: transparent; border: 1px solid var(--line); color: var(--ink2); }
.btn.quiet:hover { background: var(--pale); filter: none; }
.btn.danger { background: transparent; border: 1px solid var(--brown); color: var(--brown); }
.btn.small { width: auto; display: inline-block; padding: .55rem .9rem; font-size: .8125rem; border-radius: 7px; }
.tiny {
  background: none; border: none; padding: .5rem; color: var(--ink3); font-size: .875rem;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; display: block; margin: .5rem auto 0;
}
form.stack { display: grid; gap: .9rem; }
label.field { display: grid; gap: .3rem; font-size: .8125rem; font-weight: 600; color: var(--ink2); }
label.field input, label.field select, label.field textarea {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); font-size: 1rem; font-weight: 400;
}
label.field textarea { font-family: inherit; font-size: .9375rem; line-height: 1.45; resize: vertical; }
label.field input[readonly], label.field textarea[readonly] { background: var(--pale); }
label.field input:focus, label.field textarea:focus { outline: 2px solid var(--sage); outline-offset: 1px; border-color: var(--sage); }
label.check { display: flex; align-items: flex-start; gap: .6rem; font-size: .9375rem; color: var(--ink); }
label.check input { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--teal); }
label.check small { display: block; color: var(--ink3); font-size: .8125rem; font-weight: 400; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
div.stack { display: grid; gap: .9rem; }
[hidden] { display: none !important; }   /* .btn sets display, which would otherwise beat the attribute */
/* The sign-in link page: big, equal buttons side by side, stacking on a phone. */
.row.send .btn { width: auto; flex: 1 1 9rem; }
pre.stack-trace { font-size: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--pale); padding: .6rem .8rem; border-radius: 6px; margin: .4rem 0 0; }
.row > form { display: contents; }

/* widths (CSP forbids inline styles) */
.mt { margin-top: .6rem; }
.mt-lg { margin-top: 1rem; }
.narrow { max-width: 32rem; }
.w20 { max-width: 20rem; }
input.w8 { max-width: 8rem; }
input.w16 { max-width: 16rem; }

/* --- alerts --- */
.flash { border-radius: 9px; padding: .8rem 1rem; font-size: .9375rem; margin-bottom: 1rem; }
.flash.ok { background: var(--pale); color: var(--teal-d); }
.flash.warn { background: var(--warn-bg); color: var(--brown); border: 1px solid #E8D6C6; }
.banner {
  background: var(--warn-bg); color: var(--brown); border-bottom: 1px solid #E8D6C6;
  font-size: .8125rem; font-weight: 600; text-align: center; padding: .5rem 1rem;
}

/* --- lock-up --- */
.keyring {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--pale);
  display: grid; place-items: center; margin-bottom: .9rem;
}
.keyring svg { width: 45%; height: 45%; stroke: var(--teal); fill: none; stroke-width: 1.6; }
.ticks {
  list-style: none; margin: 1rem 0 1.75rem; padding: 1rem 0 0; border-top: 1px solid var(--line);
  display: grid; gap: .7rem;
}
.ticks li { display: grid; grid-template-columns: 1rem 1fr; gap: .7rem; align-items: start; font-size: .9375rem; }
.ticks li::before { content: ""; width: 1rem; height: 1rem; margin-top: .2em; border: 1.5px solid var(--sage); border-radius: 3px; }

/* --- lists / admin --- */
.tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--line); margin: 0 0 1.5rem; }
.tabs a {
  font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
  color: var(--ink3); text-decoration: none; padding: .4rem 0 .6rem; margin-bottom: -1px;
}
.tabs a[aria-current] { color: var(--teal); border-bottom: 1.5px solid var(--teal); }
h2.sec { font-size: 1rem; font-weight: 600; color: var(--plum); margin: 1.75rem 0 .75rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
h2.sec:first-child { margin-top: 0; }
.tablewrap { overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }
table.roster { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.roster th {
  text-align: left; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink3); padding: 0 .6rem .6rem; border-bottom: 1px solid var(--line); font-size: .625rem; white-space: nowrap;
}
table.roster td { padding: .7rem .6rem; border-bottom: 1px solid var(--line); color: var(--ink2); vertical-align: middle; }
table.roster td:first-child { color: var(--plum); font-weight: 600; }
table.roster td a { color: inherit; }
table.roster tr.inactive td { opacity: .5; }
/* Phone width: the roster becomes a stack of cards, one per person, with the
   column headings inlined as labels. The table markup is unchanged, so screen
   readers keep the real table semantics. Only tables marked .stackable do this. */
@media (max-width: 640px) {
  .tablewrap { margin: 0; padding: 0; overflow: visible; }
  table.roster.stackable, table.roster.stackable tbody, table.roster.stackable tr, table.roster.stackable td { display: block; }
  table.roster.stackable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.roster.stackable tr { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: .5rem .9rem; margin-bottom: .6rem; }
  table.roster.stackable td { border: none; padding: .3rem 0; display: flex; gap: .75rem; align-items: baseline; }
  table.roster.stackable td > * { min-width: 0; }
  .chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
  table.roster.stackable td[data-label]::before { content: attr(data-label); flex: 0 0 5.5rem; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); font-weight: 600; }
  table.roster.stackable td:first-child { font-size: 1rem; padding-bottom: .4rem; }
  table.roster.stackable td:first-child::before { display: none; }
}
.chip {
  display: inline-block; border-radius: 20px; padding: .15rem .55rem; font-size: .625rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; margin: .1rem .25rem .1rem 0; white-space: nowrap;
}
.chip.a { background: rgba(18,108,121,.11); color: #0E5761; }
.chip.s { background: rgba(127,168,166,.20); color: #4A736F; }
.chip.l { background: rgba(114,126,106,.18); color: #4E5847; }
.chip.off { background: #F0F1F2; color: var(--ink3); }
.hb { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.hb::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--sage); }
.hb.warn::before { background: var(--brown); }
.hb.warn { color: var(--brown); font-weight: 600; }
.hb.dim { color: var(--ink3); }
.hb.dim::before { background: var(--line); }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
ul.plain li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-size: .9375rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
ul.plain li small { display: block; color: var(--ink3); font-size: .8125rem; }
code { font-size: .875em; background: var(--pale); padding: .1em .35em; border-radius: 4px; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; font-size: .9375rem; margin: 0; }
dl.kv dt { color: var(--ink3); } dl.kv dd { margin: 0; }
.actions { display: grid; gap: .6rem; margin-top: 1.5rem; }
footer.admins { font-size: .8125rem; color: var(--ink3); margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- client arrival page (signin host / /arrive) --- */
body.client main { max-width: 26rem; }
body.client main.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 70dvh; gap: .75rem; }
.names { display: grid; gap: .6rem; margin: 0 0 1.25rem; }
.nm {
  display: block; text-decoration: none; text-align: left;
  border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 1.05rem 1.1rem;
  color: var(--ink); min-height: 3.75rem;
  transition: border-color .15s ease, background .15s ease;
}
.nm:hover, .nm:focus-visible { border-color: var(--sage); background: var(--pale); outline: none; }
.nm:active { background: var(--pale); }
.nm b { display: block; font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.nm i { display: block; font-style: normal; font-size: .75rem; color: var(--ink3); letter-spacing: .06em; text-transform: uppercase; margin-top: .15rem; font-weight: 500; }
.foot { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--ink3); line-height: 1.5; }
.lead { font-size: .875rem; color: var(--ink3); margin: 0; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
h1.big { font-weight: 300; font-size: 2.4rem; line-height: 1.14; margin: 0; color: var(--plum); letter-spacing: -.012em; text-wrap: balance; }
.cred { font-size: .8125rem; color: var(--ink3); margin: 0; letter-spacing: .07em; text-transform: uppercase; font-weight: 500; }
.acts { width: 100%; display: grid; gap: .6rem; margin-top: 1.25rem; }
.acts .btn { padding: 1.15rem; font-size: 1.125rem; }
.acts .tiny { font-size: 1rem; padding: .75rem; }
.halo { position: relative; width: 5rem; height: 5rem; display: grid; place-items: center; margin-bottom: .5rem; }
.halo img { width: 100%; height: 100%; position: relative; z-index: 1; }
.halo::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; border: 1px solid var(--sage); opacity: .5; animation: pulse 2.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.86); opacity: 0; } 40% { opacity: .55; } 100% { transform: scale(1.22); opacity: 0; } }
main.center h1 { font-weight: 300; font-size: 2.1rem; line-height: 1.12; margin: 0; color: var(--plum); letter-spacing: -.012em; text-wrap: balance; }
.said { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--teal); line-height: 1.35; text-wrap: balance; }
.rest { margin: 0; font-size: 1rem; color: var(--ink2); line-height: 1.5; max-width: 28ch; }
@media (prefers-reduced-motion: reduce) { .halo::after { animation: none; } }

/* --- printable waiting-room card --- */
.card-print {
  background: #fff; color: #23212A; border: 1px solid var(--line); border-radius: 12px;
  padding: 2rem 1.75rem; text-align: center; max-width: 22rem; margin: 1rem auto;
  display: grid; gap: .9rem; justify-items: center;
}
.card-logo { width: 15rem; height: auto; display: block; }
.card-text { margin: 0; font-size: 1.35rem; font-weight: 300; line-height: 1.3; color: #383139; text-wrap: balance; }
.card-qr { width: 11rem; height: 11rem; }
.card-qr svg { width: 100%; height: 100%; display: block; }
.card-url { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 1rem; color: #126C79; word-break: break-all; }
.card-fine { margin: 0; font-size: .75rem; color: #79777F; line-height: 1.45; }
@media print {
  .bar, .no-print, footer, .banner { display: none !important; }
  body { background: #fff; }
  .card-print { border: 1px solid #ccc; margin: 0 auto; page-break-inside: avoid; }
}