/* ══════════════════════════════════════════════════════════════════
   ONBOARDING, the pages between Log In and the dashboard.

   Approved as framing A: the short forms keep the login page's photograph on
   the left, so leaving login feels like staying in the same room. The pages
   that need horizontal space become full width on paper, built the way the
   home page builds a section. Every heading carries ONE supporting line; there
   are no eyebrow stacks anywhere, because those were cut from the login page.

   Loaded by: verify-email, profile, intake, choose-plan, therapist-verify,
   practice-onboarding, practice-invite-accept, supervisor-invite.
   The login page keeps its own copy of the frame inline and does not use this.
   ══════════════════════════════════════════════════════════════════ */

/* ── the frame, as shipped on the login page ── */

/* ══════════════════════════════════════════════════════════════════
   LOGIN, THE SHORE  (Login mockup E: the leaf)
   The home page's grammar: a photograph on the left, darkened under the enso and the wordmark;
   the form on paper at the right with an eyebrow, a serif heading, hairline
   fields and one black door. Everything a person reads is the serif; the sans is for labels and
   controls. Same forms, fields, ids and handlers as before. Follows the app's theme.
   ══════════════════════════════════════════════════════════════════ */
:root { --lg-gold-text: #8a6d3f; --lg-champagne: #CDBB98; }
html[data-theme="dark"] { --lg-gold-text: #D8A72E; }
html, body { margin: 0; padding: 0; min-height: 100%; }
.onboarding-body { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.onboarding-body::before, .onboarding-body::after { display: none !important; }

.auth-back { position: absolute; left: 34px; top: 26px; z-index: 5; display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.72); text-decoration: none; }
.auth-back:hover { color: #fff; }

.auth-stage { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.auth-photo { position: relative; min-height: 100vh; background: url('Website%20Photos/login/leaf-veins.jpg') center / cover no-repeat; display: flex; align-items: center; justify-content: center; }
.auth-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,14,.42), rgba(20,18,14,.62)); }
.auth-photo > * { position: relative; }
.auth-brand { display: block; text-align: center; color: #fff; text-decoration: none; }
.auth-brand img { width: clamp(90px, 10vw, 140px); height: auto; filter: invert(1); display: block; margin: 0 auto 18px; }
.auth-wordmark { display: block; font-family: var(--serif); font-weight: 300; text-transform: uppercase; letter-spacing: .3em; font-size: clamp(28px, 3.6vw, 50px); line-height: 1; padding-left: .3em; color: #fff; }

.auth-side { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 6vw; }
.auth-card { width: min(460px, 100%); background: transparent; border: 0; padding: 0; box-shadow: none; }
.card-header { margin-bottom: 22px !important; padding: 0 !important; border: 0 !important; text-align: left; background: transparent !important; }
/* The account kind, said at full size in the title; this carries the way in for
   the other kind of person, directly above the fields it applies to. */
.auth-kind { border-left: 2px solid var(--gold); padding: 2px 0 2px 14px; margin: 0 0 22px; font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.auth-kind[hidden] { display: none; }
.auth-kind a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; cursor: pointer; }
.auth-kind .ak-more { color: var(--muted); }
/* styles.css forces every h1 to clamp(42px, 5.4vw, 76px) !important, which is what
   made this title shout. A form's heading is not a page hero. */
#cardTitle { display: block; font-family: var(--serif) !important; font-weight: 300 !important; font-size: clamp(26px, 2.3vw, 33px) !important; letter-spacing: -0.015em !important; line-height: 1.12 !important; margin: 0; color: var(--ink); }
#cardTitle em { font-style: italic; }
#cardSubtitle, .card-header .muted { display: block; font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 12px 0 0; }

.auth-tabs { display: flex; gap: 22px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; margin-bottom: 22px; overflow: visible; }
.auth-tab { flex: 0 0 auto; font-family: var(--serif); font-size: 17px; color: var(--muted); background: none; border: 0; padding: 0 0 10px; margin-bottom: -1px; cursor: pointer; position: relative; }
.auth-tab.active { color: var(--ink); background: none; }
.auth-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); }

.auth-message { display: none; font-family: var(--serif); font-size: 15px; line-height: 1.45; padding: 10px 14px; border: 0; border-left: 3px solid var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); color: var(--ink); margin-bottom: 16px; border-radius: 0; }
.auth-message.success { border-left-color: var(--green); background: var(--green-light); color: var(--ink); }
.auth-message.show { display: block; }

.form-stack { display: flex; flex-direction: column; gap: 18px; }
.form-stack > div { display: flex; flex-direction: column; gap: 7px; }
.form-stack label { font-family: var(--serif); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 500; }
.form-stack input[type="text"], .form-stack input[type="email"], .form-stack input[type="password"] { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border); background: transparent; padding: 9px 0 10px; font-family: var(--serif); font-size: 18px; color: var(--ink); outline: 0; border-radius: 0; transition: border-color .25s ease; }
.form-stack input:focus { border-bottom-color: var(--ink); box-shadow: none; }
.form-stack input::placeholder { color: var(--whisper); font-style: italic; }
.form-stack input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--bg) inset; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 36px !important; }
.pw-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: transparent; border: 0; cursor: pointer; color: var(--muted); padding: 4px; display: flex; align-items: center; border-radius: 0; }
.pw-toggle:hover { color: var(--ink); background: transparent; }
.pw-toggle svg { width: 18px; height: 18px; display: block; }
.pw-toggle .icon-hide { display: none; }
.pw-toggle.shown .icon-show { display: none; }
.pw-toggle.shown .icon-hide { display: block; }

/* the doors */
.auth-card .btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px !important; border: 1px solid var(--ink) !important; background: var(--ink) !important; font-family: var(--sans) !important; font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase !important; font-weight: 600 !important; color: var(--bg) !important; cursor: pointer; white-space: nowrap; border-radius: 0 !important; transition: gap .25s ease; width: 100%; box-sizing: border-box; box-shadow: none !important; }
html:not([data-theme="dark"]) .auth-card .btn.primary, html:not([data-theme="dark"]) .auth-card button.primary { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg) !important; }
.auth-card .btn:hover { gap: 14px; }
.auth-card .btn.primary:disabled { opacity: .5; cursor: default; }
.auth-card .btn.ghost { background: transparent !important; color: var(--ink) !important; border-color: var(--border) !important; }
.auth-card .btn.ghost:hover { border-color: var(--ink) !important; }
html[data-theme="dark"] .auth-card .btn.primary { background: var(--champagne) !important; border-color: var(--champagne) !important; color: #16141C !important; }
html[data-theme="dark"] .auth-card .btn.ghost { background: transparent !important; color: var(--ink) !important; border-color: var(--border) !important; }
.form-stack > .form-row, .form-row { display: flex !important; flex-direction: row !important; gap: 8px; justify-content: stretch !important; }
.form-row .btn { width: auto !important; flex: 1 1 0 !important; }
.form-stack .link { font-family: var(--serif) !important; font-style: normal !important; font-size: 15.5px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important; color: var(--ink) !important; text-decoration: underline !important; text-decoration-color: var(--gold) !important; text-underline-offset: 4px; border-bottom: 0; }
.auth-switch { font-family: var(--serif); font-size: 15.5px; color: var(--muted); text-align: center; margin: 2px 0 0; }
.auth-switch a { color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.checkbox { display: flex; gap: 12px; align-items: flex-start; font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink-soft); cursor: pointer; text-transform: none; letter-spacing: 0; }
.checkbox input { margin-top: 5px; accent-color: var(--ink); }
.checkbox span { font-family: var(--serif) !important; font-size: 15px !important; color: var(--ink-soft) !important; }
.checkbox a { color: var(--ink) !important; text-decoration: underline; text-decoration-color: var(--gold) !important; text-underline-offset: 4px; }
.divider { display: flex; align-items: center; gap: 14px; margin: 24px 0 16px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--muted); letter-spacing: 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.social-btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; }
.social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 14px 22px; border: 1px solid var(--border); background: transparent; font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: .02em; color: var(--ink); cursor: pointer; border-radius: 0; transition: border-color .25s ease; }
.social-btn:hover { border-color: var(--ink); }
.social-btn svg { width: 16px; height: 16px; }

/* the practice invite, a quiet panel inside the signup form */
.auth-join-line { text-align: center; margin: 14px 0 0; font-family: var(--serif); font-size: 14px; color: var(--muted); }
.auth-join-line a { color: var(--ink) !important; font-weight: 400 !important; text-decoration: underline !important; text-decoration-color: var(--gold) !important; text-underline-offset: 4px; }
#practiceJoinPanel { background: transparent !important; border: 1px solid var(--border) !important; border-radius: 0 !important; padding: 16px !important; margin-top: 10px !important; }
#practiceJoinPanel label { font-family: var(--serif) !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--muted) !important; font-weight: 500 !important; margin-bottom: 7px !important; }
#practiceInviteInput { border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; background: transparent !important; font-family: var(--serif) !important; font-size: 16px !important; padding: 8px 0 !important; color: var(--ink) !important; }
#practiceJoinPanel .btn { padding: 9px 14px !important; font-size: 10px !important; }
#practiceJoinPanel p { font-family: var(--serif) !important; font-size: 13.5px !important; font-style: italic; line-height: 1.5 !important; color: var(--muted) !important; }
#practiceJoinError { font-style: normal !important; color: var(--red) !important; }
#setPasswordPanel .muted { font-family: var(--serif); font-size: 16px !important; line-height: 1.55 !important; color: var(--ink-soft); margin: 0 0 20px !important; }

/* a client arriving by invitation */
.invite-greet { border-left: 3px solid var(--purple); background: color-mix(in srgb, var(--purple) 7%, transparent); padding: 16px 18px 16px; margin-bottom: 26px; }
.invite-greet .ig-eyebrow { font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--purple); margin-bottom: 8px; }
.invite-greet .ig-line { font-family: var(--serif); font-size: 19px; line-height: 1.35; color: var(--ink); }
.invite-greet .ig-sub { font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin-top: 8px; }

/* signing you in */
#loadingOverlay { position: fixed; inset: 0; z-index: 150; background: var(--bg); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
#loadingOverlay.show { display: flex; }
#loadingOverlay .lo-enso { width: 64px; height: 64px; object-fit: contain; animation: lgSpin 6s linear infinite; }
html[data-theme="dark"] #loadingOverlay .lo-enso { filter: invert(1); }
@keyframes lgSpin { to { transform: rotate(360deg); } }
#loadingOverlay p { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-soft); margin: 0; }

/* arrival */
.auth-photo, .auth-card { animation: lgIn 700ms cubic-bezier(.2,.6,.2,1) both; }
.auth-card { animation-delay: 120ms; }
@keyframes lgIn { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .auth-photo, .auth-card, #loadingOverlay .lo-enso { animation: none !important; } }

@media (max-width: 900px) {
  .auth-stage { grid-template-columns: 1fr; }
  .auth-photo { min-height: 42vh; }
  .auth-side { padding: 44px 22px 60px; }
  .auth-back { left: 22px; top: 20px; }
}


/* ── the pages themselves ── */
/* ══════════════════════════════════════════════════════════════════
   ONBOARDING FLOW, the nine pages after Log In.
   Serif for everything a person reads, sans for labels and controls, no em
   dashes anywhere. Narrow pages borrow login's frame; wide pages are built the
   way the home page builds a section.
   ══════════════════════════════════════════════════════════════════ */
:root { --ob-photo: url('Website%20Photos/login/leaf-veins.jpg'); --ob-gold-text: #8a6d3f; --ob-champagne: #CDBB98; }
html[data-theme="dark"] { --ob-gold-text: #D8A72E; }
html, body { min-height: 100%; }

.auth-side { padding: 58px 5vw; }
.ob-in { animation: obIn 560ms cubic-bezier(.2,.6,.2,1) both; }
@keyframes obIn { from { opacity: 0; transform: translateY(10px); } }

/* ── shared words ── */
.ob-eyebrow { font-family: var(--sans); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--ob-gold-text); font-weight: 600; }
.ob-k { font-family: var(--sans); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.ob-h { font-family: var(--serif) !important; font-weight: 300 !important; font-size: clamp(26px, 2.3vw, 33px) !important; letter-spacing: -0.015em !important; line-height: 1.12 !important; margin: 0 !important; color: var(--ink); }
.ob-h em { font-style: italic; }
.ob-sub { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 12px 0 0; }
.ob-note { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--muted); margin: 16px 0 0; }
.ob-note a, .ob-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; cursor: pointer; }
.ob-head { margin-bottom: 26px; }
.ob-back { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; margin-bottom: 18px; font-family: var(--sans); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--muted); cursor: pointer; }
.ob-back:hover { color: var(--ink); }

/* the step this is, out of how many */
.ob-of { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ob-of .n { font-family: var(--sans); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ob-of .bar { flex: 1; height: 1px; background: var(--border); position: relative; }
.ob-of .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); }

/* ── wide pages: the home page's way of building a section ── */
.ob-page { min-height: calc(100vh - 46px); background: var(--bg); padding: 56px clamp(24px, 5vw, 78px) 90px; }
.ob-inner { max-width: 1120px; margin: 0 auto; }
.ob-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 38px; text-decoration: none; }
.ob-brand img { width: 30px; height: 30px; object-fit: contain; }
html[data-theme="dark"] .ob-brand img { filter: invert(1); }
.ob-brand span { font-family: var(--serif); font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.ob-page .ob-h { font-size: clamp(32px, 3.4vw, 46px) !important; }
.ob-page .ob-sub { font-size: clamp(16px, 1.5vw, 19px); max-width: 66ch; }
.ob-rule { height: 1px; background: var(--ink); margin: 34px 0 0; }
.ob-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--border); }

/* ── buttons, the login page's doors ── */
.ob-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border: 1px solid var(--ink); background: var(--ink); font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--bg); cursor: pointer; white-space: nowrap; border-radius: 0; transition: gap .25s ease; }
.ob-btn:hover { gap: 14px; }
.ob-btn .bi { font-size: 11px; color: var(--ob-champagne); }
.ob-btn.ob-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.ob-btn.ob-ghost .bi { color: var(--ob-gold-text); }
.ob-btn.ob-ghost:hover { border-color: var(--ink); }
.ob-btn.wide { width: 100%; }
.ob-btn.sm { padding: 9px 15px; font-size: 10px; }
html[data-theme="dark"] .ob-btn { background: var(--champagne); border-color: var(--champagne); color: #16141C; }
html[data-theme="dark"] .ob-btn .bi { color: #16141C; }
html[data-theme="dark"] .ob-btn.ob-ghost { background: transparent; color: var(--ink); border-color: var(--border); }

/* ── fields ── */
.ob-f { display: flex; flex-direction: column; gap: 7px; }
.ob-f > label, .ob-lbl { font-family: var(--serif); font-size: 15px; color: var(--muted); font-weight: 500; }
.ob-f input, .ob-f textarea, .ob-f select { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border); background: transparent; padding: 9px 0 10px; font-family: var(--serif); font-size: 18px; color: var(--ink); outline: 0; border-radius: 0; transition: border-color .25s ease; }
.ob-f select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236F6A62' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 22px; cursor: pointer; }
.ob-f textarea { resize: vertical; min-height: 84px; line-height: 1.55; font-size: 17px; }
.ob-f input:focus, .ob-f textarea:focus, .ob-f select:focus { border-bottom-color: var(--ink); }
.ob-f input::placeholder, .ob-f textarea::placeholder { color: var(--whisper); font-style: italic; }
.ob-f .hint { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--muted); }
.ob-f .ok { color: #5A6B57; font-style: normal; }
.ob-stack { display: flex; flex-direction: column; gap: 18px; }
.ob-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ob-check { display: flex; gap: 12px; align-items: flex-start; font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink-soft); cursor: pointer; }
.ob-check input { margin-top: 5px; accent-color: var(--ink); }

/* the six figures of a code */
.ob-code { display: flex; gap: 10px; margin: 4px 0 2px; }
.ob-code input { width: 52px; height: 62px; text-align: center; border: 0; border-bottom: 1px solid var(--border); background: transparent; font-family: var(--serif); font-size: 30px; color: var(--ink); outline: 0; padding: 0; }
.ob-code input:focus { border-bottom-color: var(--ink); }
.ob-code input.on { border-bottom-color: var(--gold); }

/* a portrait, for the profile page */
.ob-photo-row { display: flex; align-items: center; gap: 18px; }
.ob-photo-row .disc { width: 70px; height: 70px; border-radius: 50%; border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 20px; flex-shrink: 0; }
.ob-photo-row .disc.has { border-style: solid; background: var(--ocean); color: #fff; font-family: var(--serif); font-size: 24px; }

/* the one role card that applies */
.ob-role { border-left: 3px solid var(--ocean); background: color-mix(in srgb, var(--ocean) 7%, transparent); padding: 16px 18px; }
.ob-role.clin { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.ob-role b { display: block; font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--ink); }
.ob-role p { font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); margin: 6px 0 0; }
.ob-role .why { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--muted); margin-top: 8px; }

/* a quiet notice with a spine */
.ob-flag { border-left: 3px solid var(--gold); padding: 10px 0 10px 14px; font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.ob-flag.priv { border-left-color: var(--purple); }
.ob-flag b { font-weight: 500; color: var(--ink); }

/* ── plans and tiers ── */
.ob-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
/* Each tier carries its own colour from the palette, so the row reads as three
   distinct things rather than three identical boxes. The chosen one fills. */
.ob-tier { --tier-ink: color-mix(in srgb, var(--tier, var(--ocean)) 68%, var(--ink));
  border: 1px solid var(--border); border-left: 3px solid var(--tier, var(--border));
  background: var(--card); padding: 26px 26px 28px; cursor: pointer; display: flex; flex-direction: column;
  text-align: left; transition: border-color .25s ease, background-color .3s ease, transform .35s cubic-bezier(.2,.6,.2,1); position: relative; }
.ob-tier .nm { color: var(--tier-ink) !important; }
.ob-tier li i { color: var(--tier, var(--ob-gold-text)) !important; }
.ob-tier .tag { color: var(--tier-ink) !important; }
.ob-tier:hover { transform: translateY(-3px); }
.ob-tier.on { border-color: var(--tier, var(--ink)); background: color-mix(in srgb, var(--tier, var(--ink)) 7%, var(--card)); box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--tier, var(--ink)) 55%, transparent); }
.ob-tier .tag { position: absolute; right: 20px; top: 20px; font-family: var(--sans); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--ob-gold-text); }
.ob-tier .nm { font-family: var(--serif); font-size: 25px; font-weight: 400; color: var(--ink); }
.ob-tier .pr { font-family: var(--serif); font-size: 34px; font-weight: 300; color: var(--ink); margin-top: 10px; line-height: 1; }
.ob-tier .pr small { font-family: var(--serif); font-size: 15px; color: var(--muted); font-weight: 400; }
.ob-tier .for { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--muted); margin-top: 8px; }
.ob-tier ul { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); }
.ob-tier li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ink); padding: 7px 0; }
.ob-tier li i { color: var(--ob-gold-text); font-size: 11px; margin-top: 5px; }
.ob-tier li.off { color: var(--whisper); }
.ob-tier li.off i { color: var(--whisper); }
.ob-tier .pick { margin-top: auto; padding-top: 20px; font-family: var(--sans); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.ob-tier.on .pick { color: var(--tier-ink); }
.ob-tier.on .pick::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tier, var(--gold)); }

/* ── the six steps ── */
.ob-steps { display: flex; gap: 0; flex-wrap: wrap; margin-top: 30px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ob-step { flex: 1 1 0; min-width: 128px; padding: 16px 14px 18px; border-left: 1px solid var(--border); text-align: left; background: none; cursor: pointer; }
.ob-step:first-child { border-left: 0; }
.ob-step .n { font-family: var(--sans); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--whisper); }
.ob-step b { display: block; font-family: var(--serif); font-size: 17px; font-weight: 400; color: var(--muted); margin-top: 5px; }
.ob-step.on b { color: var(--ink); }
.ob-step.on { box-shadow: inset 0 -2px 0 var(--ink); }
.ob-step.done .n { color: var(--ob-gold-text); }
.ob-step.done b { color: var(--ink-soft); }

/* ── spaces, for modes ── */
.ob-spaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.ob-space { border: 1px solid var(--border); background: var(--card); padding: 0; overflow: hidden; text-align: left; cursor: pointer; transition: border-color .25s ease, transform .35s cubic-bezier(.2,.6,.2,1); }
.ob-space:hover { transform: translateY(-3px); border-color: var(--ink); }
.ob-space .ph { height: 150px; background: var(--ob-photo) center / cover no-repeat; position: relative; }
.ob-space .ph::after { content: ''; position: absolute; inset: 0; background: rgba(20,18,14,.34); }
.ob-space .bd { padding: 22px 24px 24px; }
.ob-space b { display: block; font-family: var(--serif); font-size: 25px; font-weight: 400; color: var(--ink); }
.ob-space p { font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); margin: 8px 0 0; }
.ob-space.locked { cursor: default; }
.ob-space.locked:hover { transform: none; border-color: var(--border); }
.ob-space.locked .ph { filter: grayscale(1); opacity: .5; }
.ob-space.locked b, .ob-space.locked p { color: var(--whisper); }
.ob-space .soon { font-family: var(--sans); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-top: 14px; display: block; }

/* ── the invitation's facts ── */
.ob-facts { margin-top: 4px; }
.ob-fact { display: grid; grid-template-columns: 116px 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid var(--border); align-items: baseline; }
.ob-fact:first-child { border-top: 0; }
.ob-fact .v { font-family: var(--serif); font-size: 16.5px; color: var(--ink); }

/* ── frame B: wide content inside the form column ── */
.ob-narrowed .ob-tiers, .ob-narrowed .ob-spaces { grid-template-columns: 1fr; gap: 14px; }
.ob-narrowed .ob-steps { flex-direction: column; }
.ob-narrowed .ob-step { border-left: 0; border-top: 1px solid var(--border); }
.ob-narrowed .ob-step:first-child { border-top: 0; }
.ob-narrowed .ob-step.on { box-shadow: inset 2px 0 0 var(--ink); }
.ob-narrowed .ob-tier .pr { font-size: 28px; }
.ob-narrowed .auth-card, .ob-narrowed .ob-card { width: min(560px, 100%); }
.ob-narrowed .ob-space .ph { height: 108px; }
.auth-side .ob-h { font-size: clamp(26px, 2.3vw, 33px) !important; }

@media (max-width: 1050px) {
  .auth-stage { grid-template-columns: 1fr; }
  .auth-photo { min-height: 30vh; }
  .ob-tiers, .ob-spaces { grid-template-columns: 1fr; }
  .ob-steps { flex-direction: column; }
  .ob-step { border-left: 0; border-top: 1px solid var(--border); }
  .ob-row2 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   CLINICIAN CREDENTIALS, rebuilt.
   The flat version wasted half the page and had no colour in it at all. This
   puts a vertical rail down the left that actually shows where you are and what
   is already done, and lays the form on a raised sheet, the way the home page
   lays its vignette cards. Colour carries meaning: sage for checked, gold for
   where you are, quiet for what is still ahead.
   ══════════════════════════════════════════════════════════════════ */
.cr { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 46px; align-items: start; margin-top: 34px; }
.cr-rail { position: sticky; top: 70px; }

/* the six steps, down the side, with a line drawn through them */
.cr-steps { position: relative; padding-left: 4px; }
.cr-steps::before { content: ''; position: absolute; left: 9px; top: 12px; bottom: 14px; width: 1px; background: var(--border); }
.cr-s { position: relative; display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0 0 0 34px; margin-bottom: 26px; cursor: pointer; }
.cr-s:last-child { margin-bottom: 0; }
.cr-s .dot { position: absolute; left: 3px; top: 3px; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); display: flex; align-items: center; justify-content: center; }
.cr-s .dot i { font-size: 7px; color: #fff; opacity: 0; }
.cr-s .n { font-family: var(--sans); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--whisper); display: block; }
.cr-s b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 400; color: var(--muted); margin-top: 3px; line-height: 1.15; }
.cr-s .cr-sub { display: block; font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--whisper); margin-top: 2px; }
/* done */
.cr-s.done .dot { background: #5A6B57; border-color: #5A6B57; }
.cr-s.done .dot i { opacity: 1; }
.cr-s.done .n { color: #5A6B57; }
.cr-s.done b { color: var(--ink-soft); }
/* where you are */
.cr-s.on .dot { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 16%, transparent); }
.cr-s.on .n { color: var(--ob-gold-text); }
.cr-s.on b { color: var(--ink); font-weight: 500; }
html[data-theme="dark"] .cr-s .dot { background: var(--bg); }
html[data-theme="dark"] .cr-s.done .dot, html[data-theme="dark"] .cr-s.on .dot { background: var(--gold); border-color: var(--gold); }
html[data-theme="dark"] .cr-s.done .dot { background: #9BB097; border-color: #9BB097; }

/* what the rail says underneath the steps */
.cr-aside { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--border); }
.cr-aside .ttl { font-family: var(--serif); font-size: 18px; color: var(--ink); margin-bottom: 8px; }
.cr-aside p { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0 0 12px; }
.cr-aside .who { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.cr-aside .who span.av { width: 38px; height: 38px; border-radius: 50%; background: var(--ocean); color: #fff; font-family: var(--serif); font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cr-aside .who b { display: block; font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--ink); }
.cr-aside .who small { display: block; font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--muted); }

/* the form, on a sheet the way the home page raises a card */
.cr-sheet { background: var(--card); border: 1px solid var(--border); padding: 34px 38px 36px; box-shadow: 0 30px 80px -34px rgba(27,27,27,.20), 0 6px 20px -12px rgba(27,27,27,.07); }
html[data-theme="dark"] .cr-sheet { box-shadow: 0 30px 80px -34px rgba(0,0,0,.6); }
.cr-sheet .ob-h { font-size: clamp(25px, 2.1vw, 30px) !important; }
.cr-sheet-head { padding-bottom: 22px; border-bottom: 1px solid var(--border); margin-bottom: 26px; }

/* colour with a job: a spined wash, the way the overview marks its kinds */
.cr-note { border-left: 3px solid var(--purple); background: color-mix(in srgb, var(--purple) 6%, transparent); padding: 13px 16px; font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 26px; }
.cr-note b { color: var(--ink); font-weight: 500; }
.cr-note.ocean { border-left-color: var(--ocean); background: color-mix(in srgb, var(--ocean) 7%, transparent); }
.cr-note.gold { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }

/* a check that came back clean, and is allowed to look pleased about it */
.cr-ok { display: flex; align-items: flex-start; gap: 11px; border-left: 3px solid #5A6B57; background: color-mix(in srgb, #5A6B57 8%, transparent); padding: 11px 14px; margin-top: 10px; }
.cr-ok i { color: #5A6B57; font-size: 13px; margin-top: 3px; }
.cr-ok span { font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink); }
.cr-ok b { font-weight: 500; }
html[data-theme="dark"] .cr-ok { border-left-color: #9BB097; } html[data-theme="dark"] .cr-ok i { color: #9BB097; }

/* documents waiting to be attached */
.cr-docs { display: flex; flex-direction: column; gap: 10px; }
.cr-doc { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--border); padding: 14px 16px; background: transparent; text-align: left; cursor: pointer; transition: border-color .2s ease; }
.cr-doc:hover { border-color: var(--ink); }
.cr-doc > i { font-size: 17px; color: var(--muted); }
.cr-doc b { display: block; font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--ink); }
.cr-doc small { display: block; font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.cr-doc .st { font-family: var(--sans); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); white-space: nowrap; }
.cr-doc.has { border-color: color-mix(in srgb, #5A6B57 40%, var(--border)); background: color-mix(in srgb, #5A6B57 4%, transparent); }
.cr-doc.has > i { color: #5A6B57; }
.cr-doc.has .st { color: #5A6B57; }

/* the five things to agree to */
.cr-agree { display: flex; flex-direction: column; gap: 2px; }
.cr-agree label { display: grid; grid-template-columns: 20px 1fr; gap: 13px; align-items: start; padding: 15px 0; border-top: 1px solid var(--border); font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.cr-agree label:first-child { border-top: 0; }
.cr-agree input { margin-top: 5px; accent-color: var(--ink); }
.cr-agree .cr-sub { display: block; font-family: var(--serif) !important; font-style: italic; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important; color: var(--muted); margin-top: 3px; }

@media (max-width: 1000px) {
  .cr { grid-template-columns: 1fr; gap: 30px; }
  .cr-rail { position: static; }
  .cr-sheet { padding: 26px 22px 28px; }
}

/* chips, for picking several of a thing */
.cr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-chip { border: 1px solid var(--border); background: transparent; padding: 8px 14px; font-family: var(--serif); font-size: 15px; color: var(--muted); cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.cr-chip:hover { border-color: var(--ink); color: var(--ink); }
.cr-chip.on { border-color: var(--ink); color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.cr-chip.on::before { content: '\2713'; margin-right: 8px; color: var(--ob-gold-text); }

/* a field with a button sitting on its right */
.cr-withbtn { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; }

/* the agreement, in a box you can scroll */
.cr-legal { border: 1px solid var(--border); background: var(--surface); padding: 18px 20px; max-height: 210px; overflow-y: auto; font-family: var(--serif); font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.cr-legal h4 { font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--ink); margin: 14px 0 4px; }
.cr-legal h4:first-child { margin-top: 0; }
.cr-legal p { margin: 0 0 4px; }

/* what to expect, numbered quietly */
.cr-expect { border-left: 3px solid var(--ocean); background: color-mix(in srgb, var(--ocean) 6%, transparent); padding: 16px 18px; }
.cr-expect .ttl { font-family: var(--sans); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ocean); margin-bottom: 10px; }
.cr-expect ol { list-style: none; margin: 0; padding: 0; counter-reset: cx; }
.cr-expect li { counter-increment: cx; display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--ink); padding: 5px 0; }
.cr-expect li::before { content: counter(cx); font-family: var(--serif); font-size: 14px; color: var(--ocean); }

/* the verdict, once it has been read */
.cr-verdict { text-align: center; padding: 20px 0 6px; }
.cr-verdict .mark { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; border: 1px solid var(--gold); }
.cr-verdict .mark i { font-size: 21px; color: var(--ob-gold-text); }
.cr-verdict .mark.good { border-color: #5A6B57; } .cr-verdict .mark.good i { color: #5A6B57; }
.cr-verdict .mark.bad { border-color: #A5472F; } .cr-verdict .mark.bad i { color: #A5472F; }
.cr-line { display: grid; grid-template-columns: 20px 1fr; gap: 13px; padding: 11px 0; border-top: 1px solid var(--border); text-align: left; }
.cr-line:first-of-type { border-top: 0; }
.cr-line > i { font-size: 13px; margin-top: 4px; color: #5A6B57; }
.cr-line.wait > i { color: var(--ob-gold-text); }
.cr-line.bad > i { color: #A5472F; }
.cr-line b { display: block; font-family: var(--serif); font-size: 16.5px; font-weight: 400; color: var(--ink); line-height: 1.35; }
.cr-line small { display: block; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--muted); margin-top: 2px; }
.cr-lines { margin-top: 24px; padding-top: 4px; border-top: 1px solid var(--ink); }


/* the split frame fills the window here; on login it allowed for a preview bar */
.auth-stage { min-height: 100vh; }
.auth-photo { min-height: 100vh; }
@media (max-width: 1000px) {
  .auth-stage { grid-template-columns: 1fr; }
  .auth-photo { min-height: 34vh; }
}

/* ── the six figures of a code (verify-email keeps .ve-digit and .ve-msg,
   which its script queries by class; only the look changes) ── */
.ve-otp { display: flex; gap: 10px; margin: 6px 0 2px; }
.ve-otp .ve-digit { width: 52px; height: 64px; text-align: center; font-family: var(--serif); font-size: 30px; color: var(--ink); outline: 0; transition: border-color .2s ease, background-color .2s ease;
  /* styles.css forces background, border and padding on input[type="text"]
     with !important, which outranks a lone class. Hence .ve-otp in front. */
  background: color-mix(in srgb, var(--ink) 3%, transparent) !important;
  border: 0 !important; border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; }
.ve-otp .ve-digit:focus { border-bottom-color: var(--ink) !important; }
.ve-otp .ve-digit.filled { border-bottom-color: var(--gold) !important; background: color-mix(in srgb, var(--gold) 7%, transparent) !important; }
.ve-otp .ve-digit.error { border-bottom-color: var(--red) !important; }
.ve-msg { display: none; font-family: var(--serif); font-size: 15px; line-height: 1.45; padding: 10px 14px; border-left: 3px solid var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); color: var(--ink); margin: 0 0 18px; }
.ve-msg.error, .ve-msg.success, .ve-msg.info { display: block; }
.ve-msg.success { border-left-color: var(--green); background: var(--green-light); }
.ve-msg.info { border-left-color: var(--ocean); background: color-mix(in srgb, var(--ocean) 8%, transparent); }
@media (max-width: 520px) { .ve-otp .ve-digit { width: 40px; height: 54px; font-size: 24px; } .ve-otp { gap: 7px; } }

/* styles.css claims a bare .ghost on every button with !important, so this
   stylesheet never uses that name. Anything here is ob- prefixed. */

/* ── the account kind, and the licensure kind under it (profile.html) ──
   styles.css claims a bare .role-card with !important, so every rule here
   is scoped through .role-cards to outrank it. The colour is the contract:
   ocean is a client, gold is a clinician. */
.role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.role-cards .role-card { --rc: var(--ocean);
  background: color-mix(in srgb, var(--rc) 4%, transparent) !important;
  border: 0 !important; border-left: 3px solid color-mix(in srgb, var(--rc) 34%, transparent) !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: 16px 18px !important; cursor: pointer; text-align: left;
  transition: background-color .25s ease, border-color .25s ease; }
.role-cards .role-card:hover { border-left-color: var(--rc) !important; }
.role-cards .role-card.selected { background: color-mix(in srgb, var(--rc) 9%, transparent) !important; border-left-color: var(--rc) !important; }
.role-cards .role-card .rc-icon { font-size: 17px; color: var(--rc); line-height: 1; margin-bottom: 9px; }
.role-cards .role-card .rc-title { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--ink); margin-bottom: 4px; }
.role-cards .role-card .rc-desc { font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
#roleTherapist, #clinicianTypeCards .role-card { --rc: var(--gold); }
.ob-why { font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 560px) { .role-cards { grid-template-columns: 1fr; } }

/* the username availability line under the handle field */
#usernameStatus { font-family: var(--serif); font-size: 14.5px; font-style: italic; margin-top: 5px; min-height: 16px; }
#usernameStatus i { font-style: normal; }
.ob-at { position: relative; }
.ob-at > span { position: absolute; left: 0; top: 9px; font-family: var(--serif); font-size: 18px; color: var(--muted); pointer-events: none; }
.ob-at input { padding-left: 15px !important; }

/* a note the inviter wrote by hand, carried through to the person invited */
.ob-quote { border-left: 3px solid var(--purple); padding: 14px 0 14px 16px; margin: 22px 0 0; }
.ob-quote .q { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.55; color: var(--ink); }
.ob-quote .from { display: block; font-family: var(--serif); font-size: 14.5px; color: var(--muted); margin-top: 9px; }
.ob-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; }

/* supervisor-invite keeps .si-msg and toggles .show on it */
.si-msg { display: none; font-family: var(--serif); font-size: 15px; line-height: 1.5; padding: 10px 14px; border-left: 3px solid var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); color: var(--ink); margin: 18px 0; }
.si-msg.show { display: block; }
.si-msg.success { border-left-color: var(--green); background: var(--green-light); }
.sup-name { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.sup-sub { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--muted); margin-top: 4px; }
.sup-meta { font-family: var(--serif); font-size: 15px; color: var(--ink-soft); margin-top: 10px; }
.sup-card { border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 6%, transparent); padding: 18px 20px; }

/* ══ therapist-verify: the six step credential wizard ══
   The page keeps its own class names so its 800 lines of template strings
   stay untouched. This block re-dresses them in the onboarding idiom, and
   carries !important only where the editorial layer in styles.css claims
   the same name (.card, .btn, .divider). */
.cr .cr-sheet { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 0 !important; padding: 34px 38px 36px !important; box-shadow: 0 30px 80px -34px rgba(27,27,27,.20), 0 6px 20px -12px rgba(27,27,27,.07) !important; }
.cr-sheet .section-label { font-family: var(--sans); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin: 30px 0 14px; display: block; }
.cr-sheet .section-desc { font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 20px; }

.cr-sheet .field-grid, .cr-sheet .upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cr-sheet .field { display: flex; flex-direction: column; gap: 7px; }
.cr-sheet .field label { font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--muted); }
.cr-sheet .req { color: var(--red); font-family: var(--sans); font-size: 10px; }
.cr-sheet .opt { color: var(--whisper); font-family: var(--serif); font-style: italic; font-size: 14px; font-weight: 400; }
.cr-sheet .hint { font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.5; color: var(--muted); }
.cr-sheet .hint a, .cr-sheet .ct a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* a line of standing information, the same spine the rest of the flow uses */
.cr-sheet .notice { display: block; border: 0 !important; border-left: 3px solid var(--ocean) !important; border-radius: 0 !important; background: color-mix(in srgb, var(--ocean) 6%, transparent) !important; padding: 13px 16px !important; font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 26px; }
.cr-sheet .notice.warn { border-left-color: var(--gold) !important; background: color-mix(in srgb, var(--gold) 7%, transparent) !important; }
.cr-sheet .notice i { display: none; }
.cr-sheet .baa-box { background: color-mix(in srgb, var(--ink) 3%, transparent); border: 0; border-left: 3px solid var(--border); padding: 18px 20px; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.cr-sheet .baa-box strong { color: var(--ink); font-weight: 500; }
.cr-sheet .divider { border: 0 !important; border-top: 1px solid var(--border) !important; margin: 32px 0 !important; }

.cr-sheet .chip-group { display: flex; flex-wrap: wrap; gap: 9px; }
.cr-sheet .lic-chip { border: 1px solid var(--border) !important; border-radius: 0 !important; background: transparent !important; padding: 8px 15px !important; font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted) !important; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.cr-sheet .lic-chip:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.cr-sheet .lic-chip.active { border-color: var(--ink) !important; background: var(--ink) !important; color: var(--bg) !important; }

.cr-sheet .upload-lbl { font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cr-sheet .upload-area { border: 1px dashed var(--border); border-radius: 0; padding: 24px 14px; text-align: center; cursor: pointer; position: relative; transition: border-color .2s ease, background-color .2s ease; }
.cr-sheet .upload-area:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.cr-sheet .upload-area.uploaded { border-style: solid; border-color: #5A6B57; background: color-mix(in srgb, #5A6B57 7%, transparent); }
.cr-sheet .upload-area .ua-icon { font-size: 18px; color: var(--whisper); margin-bottom: 8px; }
.cr-sheet .upload-area.uploaded .ua-icon { color: #5A6B57; }
.cr-sheet .upload-area .ua-text { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.cr-sheet .upload-area .ua-filename { font-family: var(--serif); font-size: 14.5px; font-style: normal; color: #5A6B57; margin-top: 6px; word-break: break-all; }

.cr-sheet .check-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 0; border-left: 3px solid var(--border); border-radius: 0; background: transparent; transition: border-color .2s ease, background-color .2s ease; }
.cr-sheet .check-row:has(input:checked) { border-left-color: #5A6B57; background: color-mix(in srgb, #5A6B57 5%, transparent); }
.cr-sheet .check-row input[type="checkbox"] { accent-color: var(--ink); margin-top: 4px; }
.cr-sheet .check-row .ct { font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }

.cr-sheet .verify-status { display: flex; gap: 11px; border: 0 !important; border-left: 3px solid #5A6B57 !important; border-radius: 0 !important; background: color-mix(in srgb, #5A6B57 7%, transparent) !important; padding: 13px 16px !important; font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.cr-sheet .verify-status.error { border-left-color: var(--red) !important; background: color-mix(in srgb, var(--red) 7%, transparent) !important; }
.cr-sheet .verify-status.warn { border-left-color: var(--gold) !important; background: color-mix(in srgb, var(--gold) 8%, transparent) !important; }

.cr-sheet .step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); gap: 14px; }
.cr-sheet .step-counter { font-family: var(--sans); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--whisper); white-space: nowrap; }
.cr .cr-sheet .btn { display: inline-flex !important; align-items: center; gap: 10px; border-radius: 0 !important; border: 1px solid var(--ink) !important; background: var(--ink) !important; color: var(--bg) !important; font-family: var(--sans) !important; font-size: 10.5px !important; letter-spacing: .14em !important; text-transform: uppercase !important; font-weight: 600 !important; padding: 13px 24px !important; box-shadow: none !important; cursor: pointer; }
.cr .cr-sheet .btn.ghost { background: transparent !important; border-color: var(--border) !important; color: var(--ink) !important; }
.cr .cr-sheet .btn.ghost:hover { border-color: var(--ink) !important; }
.cr .cr-sheet .btn.green { background: #5A6B57 !important; border-color: #5A6B57 !important; color: #fff !important; }
.cr .cr-sheet .btn.primary, .cr .cr-sheet button.primary { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg) !important; }
.cr .cr-sheet .btn:disabled { opacity: .45; cursor: not-allowed; }

/* the three closing screens: approved, rejected, still reading */
.cr-sheet .result-wrap { text-align: center; padding: 14px 0 6px; }
.cr-sheet .result-icon { font-size: 34px; margin-bottom: 16px; }
.cr-sheet .result-title { font-family: var(--serif); font-size: clamp(27px, 2.2vw, 34px); font-weight: 400; line-height: 1.1; color: var(--ink); margin-bottom: 10px; }
.cr-sheet .result-sub { font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; margin: 0 auto; }
.cr-sheet .result-timeline { text-align: left; max-width: 420px; margin: 30px auto 0; }
.cr-sheet .tl-row { display: flex; gap: 13px; align-items: flex-start; padding: 11px 0; }
.cr-sheet .tl-text { font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.cr-sheet .result-actions { margin-top: 30px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .cr { grid-template-columns: 1fr; gap: 30px; }
  .cr-rail { position: static; }
  .cr .cr-sheet { padding: 26px 22px 28px !important; }
  .cr-sheet .field-grid, .cr-sheet .upload-grid { grid-template-columns: 1fr; }
}