/* The Sycamore Healthworks wordmark, built in HTML and CSS as on the live website (site.css .brand):
   "Sycamore" in Manrope bold, an emerald dot after it, and "Healthworks" in widely tracked capitals
   underneath. Everything is in em of the name size, so one font-size sets the whole mark: header
   1.5rem (as in the website's navigation), sign-in 2.5rem. The row stretches to the width of the wider
   line and spreads its two items, which puts the dot at the far right when "Healthworks" is wider.
   Shared by the SPA (through styles.css) and the holding page (copied into site.css at build), so the
   colours fall back to the brand values when the token custom properties are absent. */

.sy-wordmark {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-sans, 'Manrope Variable', 'Manrope', system-ui, sans-serif);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--brand-name, #111827);
  text-decoration: none;
}
.sy-wordmark--signin {
  font-size: 2.5rem;
}
.sy-wordmark--on-dark {
  --brand-name: var(--bar-text, #f9fafb);
  --brand-sub: var(--bar-brand-sub, #34d399);
}
.sy-wordmark__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3em;
}
.sy-wordmark__name {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-name, #111827);
}
.sy-wordmark__dot {
  flex: none;
  display: inline-block;
  width: 0.375em;
  height: 0.375em;
  border-radius: 50%;
  background: var(--brand-dot, #10b981);
  transform: translateY(-0.083em);
}
/* Green text on white is never the bright emerald: the sub line uses emerald-ink #047857 (5.48 to 1). */
.sy-wordmark__sub {
  margin-top: 0.42em;
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brand-sub, #047857);
}
@media (forced-colors: active) {
  .sy-wordmark__dot {
    background: CanvasText;
  }
}

/* The public page at "/": the Sycamore Healthworks brand (Manrope, ink and emerald, as on the live website),
   set like a well-made printed page rather than a landing-page template. One reading column of about 65
   characters; on wide screens the section headings hang in a margin to its left, so the text itself stays a
   single column. Ink text only (no grey or blue), green only for links and the wordmark, the safety note in
   the portal banner's colours. No scripts: the page is served with a CSP that allows none. The build step
   puts the shared wordmark rules (packages/ui/src/wordmark.css) in front of this file. */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/manrope-latin-wght.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/manrope-latin-ext-wght.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #ffffff;
  --ink: #111827;
  --link: #047857;
  --link-hover: #065f46;
  --brand-name: #111827;
  --brand-sub: #047857;
  --brand-dot: #10b981;
  --glow: rgba(16, 185, 129, 0.07);
  --safety-fill: #fbeceb;
  --safety-rule: #a3161a;
  --number: #047857;
  --font-sans: 'Manrope Variable', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --measure: 37rem;
  --margin: 13rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0e13;
    --ink: #f3f4f6;
    --link: #34d399;
    --link-hover: #a7f3d0;
    --brand-name: #f9fafb;
    --brand-sub: #34d399;
    --glow: rgba(16, 185, 129, 0.09);
    --safety-fill: #3a1715;
    --safety-rule: #ff9c94;
    --number: #34d399;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: radial-gradient(ellipse at 85% 0%, var(--glow) 0%, transparent 55%), var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.1875rem;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
}

/* ---------- Top: the wordmark and a plain sign-in link ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem) 0;
}
.top__mark {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
}
.top__signin {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.25rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
}

/* ---------- The reading column ---------- */
.main {
  flex: 1;
  padding: clamp(1.5rem, 7vh, 4.5rem) 0 clamp(2.5rem, 8vh, 5rem);
}
.intro,
.safety,
.block {
  max-width: var(--measure);
}

.status {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.status__dot {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--brand-dot);
  transform: translateY(-0.05em);
}

h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.125rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lede {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.4375rem);
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: -0.005em;
}
p {
  margin: 0 0 1rem;
}
.intro p:last-child {
  margin-bottom: 0;
}

/* The safety note uses the colours of the portal's red-flag banner, so it reads as the same message. */
.safety {
  margin: 2.25rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--safety-fill);
  border-left: 4px solid var(--safety-rule);
  border-radius: 2px 6px 6px 2px;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.safety p {
  margin: 0;
}
.safety p + p {
  margin-top: 0.5rem;
}
/* The online service's crisis lines (one per line, in the same red block). */
.safety__list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}
.safety__list li + li {
  margin-top: 0.2rem;
}

.block {
  margin-top: clamp(2.25rem, 6vh, 3.25rem);
}
h2 {
  margin: 0 0 0.75rem;
  font-size: 1.3125rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h3 {
  margin: 1.25rem 0 0.4rem;
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 700;
}
.block > p:last-child {
  margin-bottom: 0;
}

/* How it will work: numbers in the brand green, hanging, so each step's first words line up. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
}
.steps li + li {
  margin-top: 0.6rem;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.75rem;
  color: var(--number);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.steps strong {
  font-weight: 700;
}

/* Prices filled in by the Worker: the name, then the amount, on one line where it fits. */
.prices {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.prices li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  padding: 0.3rem 0;
}
.prices__name {
  font-weight: 700;
}
.prices__amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.prices__detail {
  grid-column: 1 / -1;
  margin-top: 0.1rem;
  font-size: 1rem;
  line-height: 1.5;
}
.prices__tbc {
  font-weight: 600;
  font-style: italic;
}

/* Our cardiologists (D-46): a short staff list in the page's own type, one column. The photo, or the initial
   where there is none, hangs in the margin like the step numbers, so each name starts on the same line. */
.people {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.people__item {
  position: relative;
  padding-left: 5.25rem;
  min-height: 4.5rem;
}
.people__item + .people__item {
  margin-top: 1.5rem;
}
.people__photo,
.people__initial {
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
  border: 1px solid var(--ink);
}
.people__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--number);
}
.people__name {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 700;
}
.people__body p {
  margin: 0.2rem 0 0;
}
.people__post {
  font-size: 1rem;
  line-height: 1.5;
}
.people__interests,
.people__statement {
  font-size: 1rem;
  line-height: 1.5;
}

.go {
  font-weight: 700;
}

/* ---------- The waiting list form (feat/waitlist) and its result pages ----------
   A short labelled stack in the reading column: ink text, ink borders, the one button in emerald-ink with
   white text. Errors are words ("Error: ...") above the field, with a thick ink rule beside the field so the
   place is visible without colour. No script: the browser's own required check is switched off (novalidate)
   so the server's words are the ones people read. */
.join {
  margin: 1.25rem 0 1rem;
}
.join__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 1.25rem;
}
@media (min-width: 40rem) {
  .join__row {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
}
.join__field {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  min-width: 0;
}
.join__field label,
.join__field legend {
  display: block;
  margin: 0 0 0.35rem;
  padding: 0;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.join__hint {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}
.join__input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1.4;
}
/* The application form on Work with us (online service): a select and a textarea in the same box. */
select.join__input {
  appearance: auto;
}
textarea.join__input {
  min-height: 8rem;
  resize: vertical;
}
.join__input:focus-visible,
.join__choice input:focus-visible,
.join__submit:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.join__field--error {
  padding-left: 1rem;
  border-left: 5px solid var(--safety-rule);
}
.join__error {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: var(--safety-rule);
}
.join__summary {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 3px solid var(--safety-rule);
  border-radius: 4px;
}
.join__summary h3 {
  margin: 0 0 0.4rem;
}
.join__summary ul {
  margin: 0;
  padding-left: 1.25rem;
}
.join__choices {
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.5rem;
}
.join__choices legend {
  float: left;
  width: 100%;
}
.join__choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}
.join__choice input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--link);
}
.join__choice label {
  margin: 0;
  font-weight: 500;
  font-size: 1.125rem;
}
/* The honeypot: out of sight and out of the tab order; its label says to leave it empty. */
.join__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.join__privacy {
  display: inline-block;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}
.join__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 0;
}
.join__submit {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.4rem;
  border: 2px solid var(--link);
  border-radius: 6px;
  background: var(--link);
  color: #ffffff;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .join__submit {
    color: #0b0e13;
  }
}
@media (hover: hover) {
  .join__submit:hover {
    background: var(--link-hover);
    border-color: var(--link-hover);
  }
}
.join__alt {
  margin-top: 1rem;
}
/* The result pages: one heading, in the column, a size down from the public page's h1. */
.main--result .block {
  margin-top: 0;
}
.main--result h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}

/* On wide screens the headings hang in the margin; the text keeps one column. */
@media (min-width: 62rem) {
  .main {
    padding-left: calc(var(--margin) + 2.5rem);
  }
  .block {
    position: relative;
  }
  .block h2 {
    position: absolute;
    left: calc(-1 * (var(--margin) + 2.5rem));
    width: var(--margin);
    margin: 0;
    padding-top: 0.15rem;
    font-size: 1.125rem;
    line-height: 1.45;
  }
  .intro h1,
  .intro .status {
    margin-left: calc(-1 * (var(--margin) + 2.5rem));
    max-width: calc(var(--measure) + var(--margin) + 2.5rem);
  }
}

/* ---------- Links and focus ---------- */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  a:hover {
    color: var(--link-hover);
    text-decoration-thickness: 2px;
  }
  .top__signin:hover {
    color: var(--ink);
  }
}
a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.top__mark {
  text-decoration: none;
}
.top__signin {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
/* The address may break after the @ on a phone only. */
@media (min-width: 45rem) {
  .block a[href^='mailto:'] {
    white-space: nowrap;
  }
  .block wbr {
    display: none;
  }
}

/* ---------- Footer ---------- */
.foot {
  padding: 1.5rem 0 2.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.foot p {
  margin: 0;
}
@media (min-width: 62rem) {
  .foot {
    padding-left: calc(var(--margin) + 2.5rem);
  }
}

@media print {
  body {
    background: #fff;
    color: #000;
  }
  .top__signin {
    display: none;
  }
}