/*
 * Hybridoc Design System — R101
 * ------------------------------------------------------------------
 * ONE final layer that loads LAST on every page (public + dashboards).
 * It does three things:
 *   1. Defines the Hybridoc tokens (--hd-*), light + dark.
 *   2. Re-points every legacy token family (app.css --teal*, r91 --h91-*,
 *      r92 --hc-*, r100 --hy-*, --nw-*, --r81-*) at the Hybridoc tokens, so
 *      the inherited DrKTMed teal palette disappears everywhere at once.
 *   3. Normalises the shared components (buttons, cards, notices, forms,
 *      tables, tabs, badges, sidebar, page heads, auth screens).
 *
 * Rules: visual only. No layout rewrites, no display:none on functional
 * elements, no content changes. Selectors are prefixed with `html body` so
 * they win on specificity regardless of the (long) legacy load order.
 *
 * Theme: driven by appearance-r91.js, which sets
 *   html[data-theme="auto|light|dark"] and html[data-theme-effective="light|dark"].
 * If JS is unavailable, the prefers-color-scheme block below applies.
 * ------------------------------------------------------------------ */

/* ---------- 0. Font (self-hosted; already shipped in /assets/fonts) ---------- */
@font-face{font-family:"League Spartan";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/league-spartan/league-spartan-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"League Spartan";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/league-spartan/league-spartan-latin-ext.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}

/* ---------- 1. Tokens: light (default) ---------- */
html body{
  /* Brand */
  --hd-crimson:#DC143C;           /* actions, focus, brand mark — accent only */
  --hd-crimson-hover:#B8102F;
  --hd-crimson-text:#B5102F;      /* crimson used as TEXT on white: 6.8:1 */
  --hd-crimson-tint:#FDEEF1;      /* selected rows / active nav background */
  --hd-on-crimson:#FFFFFF;

  /* Neutrals */
  --hd-bg:#F7F7F8;                /* app canvas */
  --hd-surface:#FFFFFF;           /* cards, panels, inputs */
  --hd-surface-2:#F2F2F4;         /* subtle fills, table headers */
  --hd-ink:#0E0E11;               /* primary text 19:1 */
  --hd-ink-2:#33343A;             /* secondary text 12:1 */
  --hd-muted:#5C5D66;             /* tertiary text 6.1:1 on canvas */
  --hd-line:#E4E4E8;              /* hairlines */
  --hd-line-strong:#C9C9D0;       /* input borders */
  --hd-control:#77787F;           /* control outlines 4.4:1 (non-text needs 3:1) */

  /* Status — always paired with a text label or icon, never colour alone */
  --hd-success:#157347;  --hd-success-bg:#EAF6EF;
  --hd-warning:#8A5A00;  --hd-warning-bg:#FFF6E0;
  --hd-danger:#B42318;   --hd-danger-bg:#FDEDEC;
  --hd-info:#1F4E8C;     --hd-info-bg:#EDF3FB;

  /* Shape & depth — flat, quiet, clinical */
  --hd-radius-sm:6px; --hd-radius:10px; --hd-radius-lg:14px; --hd-radius-pill:999px;
  --hd-shadow-1:0 1px 2px rgba(14,14,17,.06);
  --hd-shadow-2:0 8px 24px rgba(14,14,17,.08);
  --hd-focus-ring:0 0 0 3px rgba(220,20,60,.35);

  /* Type */
  --hd-font-display:"League Spartan",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hd-font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --hd-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Spacing scale (4px base) */
  --hd-s1:4px; --hd-s2:8px; --hd-s3:12px; --hd-s4:16px; --hd-s5:24px; --hd-s6:32px; --hd-s7:48px; --hd-s8:64px;
  --hd-touch:44px;                /* WCAG 2.2 target size, comfortable */

  /* ---- Legacy token bridge: app.css (DrKTMed teal) ---- */
  --bg:var(--hd-bg); --bg-elevated:var(--hd-surface); --surface:var(--hd-surface);
  --surface-soft:var(--hd-surface-2); --surface-strong:var(--hd-line);
  --ink:var(--hd-ink); --ink-2:var(--hd-ink-2); --muted:var(--hd-muted);
  --teal:var(--hd-crimson); --teal-2:var(--hd-crimson-hover); --teal-dark:var(--hd-crimson-text);
  --teal-deep:var(--hd-ink); --on-accent:var(--hd-on-crimson);
  --line:var(--hd-line); --line-strong:var(--hd-line-strong);
  --success:var(--hd-success); --success-bg:var(--hd-success-bg);
  --danger:var(--hd-danger); --danger-bg:var(--hd-danger-bg);
  --warning:var(--hd-warning); --warning-bg:var(--hd-warning-bg);
  --focus:var(--hd-crimson);
  --shadow-sm:var(--hd-shadow-1); --shadow-md:var(--hd-shadow-2); --shadow-lg:var(--hd-shadow-2);
  --radius-sm:var(--hd-radius-sm); --radius-md:var(--hd-radius); --radius-lg:var(--hd-radius-lg); --radius-xl:var(--hd-radius-lg);
  /* r92 public */
  --hc-bg:var(--hd-surface); --hc-soft:var(--hd-bg); --hc-surface:var(--hd-surface); --hc-ink:var(--hd-ink);
  --hc-muted:var(--hd-muted); --hc-line:var(--hd-line); --hc-accent:var(--hd-crimson); --hc-link:var(--hd-crimson-text); --hc-tint:var(--hd-crimson-tint);
  /* r91 */
  --h91-bg:var(--hd-bg); --h91-surface:var(--hd-surface); --h91-soft:var(--hd-surface-2); --h91-selected:var(--hd-crimson-tint);
  --h91-ink:var(--hd-ink); --h91-ink-2:var(--hd-ink-2); --h91-muted:var(--hd-muted); --h91-brand:var(--hd-crimson);
  --h91-brand-strong:var(--hd-crimson-hover); --h91-on-brand:var(--hd-on-crimson); --h91-line:var(--hd-line);
  --h91-control-line:var(--hd-control); --h91-focus:var(--hd-crimson-text);
  /* r100 */
  --hy-crimson:var(--hd-crimson); --hy-crimson-strong:var(--hd-crimson-hover); --hy-ink:var(--hd-ink); --hy-muted:var(--hd-muted);
  --hy-line:var(--hd-line); --hy-soft:var(--hd-bg); --hy-panel:var(--hd-surface); --hy-panel-2:var(--hd-surface-2);
  --hy-radius:var(--hd-radius); --hy-radius-sm:var(--hd-radius-sm); --hy-shadow:var(--hd-shadow-1);
  --hy-font:var(--hd-font-display); --hy-font-body:var(--hd-font-body);
  /* misc legacy */
  --nw-accent:var(--hd-crimson); --nw-ink:var(--hd-ink); --r81-accent:var(--hd-crimson);
  --brand:var(--hd-crimson); --accent:var(--hd-crimson); --text:var(--hd-ink);
}
html[data-theme-effective="light"]{color-scheme:only light}

/* ---------- 2. Base ---------- */
html body{
  background:var(--hd-bg)!important;
  color:var(--hd-ink)!important;
  font-family:var(--hd-font-body)!important;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;               /* brief: no horizontal overflow */
}
html body.public-site{background:var(--hd-surface)!important}
html body :where(h1,h2,h3,h4,.eyebrow,.kicker,.hc-eyebrow,.workspace-label,.pagehead h1){
  font-family:var(--hd-font-display)!important;
  color:var(--hd-ink);
  letter-spacing:-.01em;
}
html body h1{font-weight:700;line-height:1.1}
html body h2{font-weight:650;line-height:1.15}
html body h3{font-weight:600;line-height:1.25}
html body :where(.eyebrow,.kicker,.hc-eyebrow){
  font-size:.75rem!important;font-weight:600!important;letter-spacing:.08em!important;text-transform:uppercase;
  color:var(--hd-crimson-text)!important;
}
html body :where(p,li,dd,td,label,.small){color:inherit}
html body :where(.small,small,.hc-small,.muted){color:var(--hd-muted)!important}
html body a{color:var(--hd-crimson-text);text-underline-offset:2px}
html body a:hover{color:var(--hd-crimson-hover)}
html body ::selection{background:var(--hd-crimson-tint);color:var(--hd-ink)}
html body :focus-visible{outline:2px solid var(--hd-crimson)!important;outline-offset:2px!important;box-shadow:var(--hd-focus-ring)!important}
html body :where(code,kbd,samp,.mono){font-family:var(--hd-font-mono)}
html body :where(img,svg,video,canvas){max-width:100%}

/* ---------- 3. Buttons ---------- */
/* Whole selector inside :where() so specificity stays (0,0,2) and the
   secondary/danger variants below can override it by source order. */
html body :where(:is(button,.button,.hc-button,.network-button,input[type="submit"],input[type="button"]):not(.menu-toggle,.link,[class*="tab"],.r91-account-link,#workspace-nav *)){
  min-height:var(--hd-touch);
  padding:0 var(--hd-s4);
  border-radius:var(--hd-radius)!important;
  font:600 .95rem/1 var(--hd-font-body)!important;
  letter-spacing:0!important;
  border:1px solid var(--hd-crimson)!important;
  background:var(--hd-crimson)!important;
  color:var(--hd-on-crimson)!important;
  box-shadow:none!important;
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
html body :where(:is(button,.button,.hc-button,.network-button):not(.menu-toggle,.link,[class*="tab"],.r91-account-link,#workspace-nav *)):hover{
  background:var(--hd-crimson-hover)!important;border-color:var(--hd-crimson-hover)!important;
}
/* Secondary / quiet: most buttons on a screen should be this */
html body :where(button.secondary,.button.secondary,.hc-secondary,.secondary > button,button.ghost,.toolbar button:not(.primary)){
  background:var(--hd-surface)!important;
  color:var(--hd-ink)!important;
  border-color:var(--hd-line-strong)!important;
}
html body :where(button.secondary,.button.secondary,.hc-secondary,button.ghost,.toolbar button:not(.primary)):hover{
  background:var(--hd-surface-2)!important;border-color:var(--hd-ink-2)!important;color:var(--hd-ink)!important;
}
html body :where(button.danger,.button.danger){background:var(--hd-danger)!important;border-color:var(--hd-danger)!important;color:#fff!important}
html body :where(button,.button):disabled,
html body :where(button,.button)[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* ---------- 4. Surfaces: cards, panels, page heads ---------- */
html body :where(.card,.form-box,.hc-card,.hc-plan,.network-panel,.waiting-card,.config-summary,.r83-dashboard-section){
  background:var(--hd-surface)!important;
  color:var(--hd-ink)!important;
  border:1px solid var(--hd-line)!important;
  border-radius:var(--hd-radius-lg)!important;
  box-shadow:var(--hd-shadow-1)!important;
}
/* Brief: avoid nested-card clutter — a card inside a card loses its frame */
html body :where(.card,.form-box) :where(.card,.form-box){
  border:0!important;box-shadow:none!important;background:transparent!important;padding-inline:0!important;
}
html body .pagehead{border-bottom:1px solid var(--hd-line);padding-bottom:var(--hd-s4);margin-bottom:var(--hd-s5)}
html body .pagehead h1{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)!important;margin:0 0 var(--hd-s1)}
html body .pagehead p{color:var(--hd-muted);margin:0}
html body :where(.stat,.stats > *){
  background:var(--hd-surface);border:1px solid var(--hd-line);border-radius:var(--hd-radius);
}
html body .empty{border:1px dashed var(--hd-line-strong)!important;border-radius:var(--hd-radius-lg)!important;background:transparent!important;color:var(--hd-muted)}
html body .empty h3{color:var(--hd-ink)}

/* ---------- 5. Notices & status ---------- */
html body :where(.notice,.hc-practice-note,.passkey-legacy){
  background:var(--hd-info-bg)!important;color:var(--hd-ink)!important;
  border:1px solid color-mix(in srgb,var(--hd-info) 30%,transparent)!important;
  border-left:4px solid var(--hd-info)!important;
  border-radius:var(--hd-radius)!important;
}
html body :where(.notice.success,.success){background:var(--hd-success-bg)!important;border-left-color:var(--hd-success)!important}
html body :where(.notice.warning,.warning){background:var(--hd-warning-bg)!important;border-left-color:var(--hd-warning)!important}
html body :where(.notice.error,.error,.form-error){background:var(--hd-danger-bg)!important;border-left-color:var(--hd-danger)!important;color:var(--hd-ink)!important}
html body :where(.badge,.pill,.status-chip,.hc-tag){
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 10px!important;border-radius:var(--hd-radius-pill)!important;
  font:600 .75rem/1.6 var(--hd-font-body)!important;letter-spacing:.02em!important;white-space:nowrap!important;
  background:var(--hd-surface-2)!important;color:var(--hd-ink-2)!important;border:1px solid var(--hd-line)!important;
}
/* status dot gives a second, non-colour cue alongside the text */
html body :where(.badge,.pill,.status-chip)::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}

/* ---------- 6. Forms ---------- */
html body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea){
  min-height:var(--hd-touch);
  background:var(--hd-surface)!important;
  color:var(--hd-ink)!important;
  border:1px solid var(--hd-line-strong)!important;
  border-radius:var(--hd-radius)!important;
  font:400 1rem/1.4 var(--hd-font-body)!important;   /* 16px stops iOS zoom-on-focus */
  box-shadow:none!important;
}
html body textarea{min-height:120px;line-height:1.5!important}
html body :where(input,select,textarea):hover{border-color:var(--hd-control)!important}
html body :where(input,select,textarea):focus{border-color:var(--hd-crimson)!important;box-shadow:var(--hd-focus-ring)!important;outline:none!important}
html body :where(input,select,textarea)[aria-invalid="true"]{border-color:var(--hd-danger)!important}
html body ::placeholder{color:var(--hd-muted);opacity:1}
html body :where(input[type="checkbox"],input[type="radio"]){accent-color:var(--hd-crimson);width:20px;height:20px}
html body label{font-weight:500;color:var(--hd-ink)}
html body fieldset{border:1px solid var(--hd-line);border-radius:var(--hd-radius);background:transparent}
html body legend{font-family:var(--hd-font-display);font-weight:600;color:var(--hd-ink)}

/* ---------- 7. Tables ---------- */
html body .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--hd-line);border-radius:var(--hd-radius-lg);background:var(--hd-surface)}
html body table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
html body th{background:var(--hd-surface-2)!important;color:var(--hd-ink-2)!important;font:600 .8rem/1.3 var(--hd-font-body)!important;text-align:left;letter-spacing:.02em}
html body :where(th,td){border-bottom:1px solid var(--hd-line)!important;padding:10px 12px;overflow-wrap:normal!important;word-break:normal!important;hyphens:manual}
html body tbody tr:hover{background:color-mix(in srgb,var(--hd-surface-2) 70%,transparent)}

/* ---------- 8. Tabs & secondary nav ---------- */
html body :where(.tabs,.work-tabs,.network-tabs,.workspace-tabs,.practitioner-tabs,.r45-subnav){
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--hd-line);
}
html body :where(.tabs,.work-tabs,.network-tabs,.workspace-tabs,.practitioner-tabs,.r45-subnav) :where(a,button){
  min-height:var(--hd-touch);background:transparent!important;color:var(--hd-muted)!important;
  border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;
  font-weight:600!important;padding:0 var(--hd-s3)!important;white-space:nowrap;
}
html body :where(.tabs,.work-tabs,.network-tabs,.workspace-tabs,.practitioner-tabs,.r45-subnav) :where(a,button):is([aria-current],[aria-selected="true"],.active){
  color:var(--hd-ink)!important;border-bottom-color:var(--hd-crimson)!important;
}

/* ---------- 9. Dashboard shell: sidebar + workspace ---------- */
html body .sidebar{
  background:var(--hd-surface)!important;color:var(--hd-ink)!important;
  border-right:1px solid var(--hd-line)!important;box-shadow:none!important;
}
html body #workspace-nav :where(a,button){
  min-height:40px;border-radius:var(--hd-radius-sm)!important;color:var(--hd-ink-2)!important;
  background:transparent!important;border:0!important;font-weight:500!important;text-align:left;
}
html body #workspace-nav :where(a,button):hover{background:var(--hd-surface-2)!important;color:var(--hd-ink)!important}
html body #workspace-nav :where(a,button):is([aria-current],.active){
  background:var(--hd-crimson-tint)!important;color:var(--hd-crimson-text)!important;font-weight:600!important;
  box-shadow:inset 3px 0 0 var(--hd-crimson)!important;
}
html body .workspace{background:var(--hd-bg)!important}

/* ---------- 9b. Logo: optimised 6 KB files (was 267 KB) with a dark-mode variant ---------- */
html body :where(.platform-brand,.sidebar .brand,.family-admin-brand)::before{
  background-image:url("brand/hybridoc-r101/logo-640.png")!important;
}
html body :where(.site-header,.public-footer) .platform-brand::before{width:150px!important;height:46px!important;background-size:contain!important;background-position:left center!important}
@media (max-width:760px){html body .site-header .platform-brand::before{width:118px!important;height:36px!important}}

/* ---------- 10. Public header & footer ---------- */
html body .site-header{
  background:color-mix(in srgb,var(--hd-surface) 92%,transparent)!important;
  border-bottom:1px solid var(--hd-line)!important;backdrop-filter:saturate(1.4) blur(14px);
}
html body .public-nav a{color:var(--hd-ink-2)!important;font-weight:500}
html body .public-nav a:hover,html body .public-nav a[aria-current]{color:var(--hd-ink)!important;background:var(--hd-surface-2)!important}
html body .public-footer{background:var(--hd-surface-2)!important;color:var(--hd-ink-2)!important;border-top:1px solid var(--hd-line)!important}
html body .public-footer :where(strong){color:var(--hd-ink)!important}
html body .public-footer a{color:var(--hd-ink-2)!important}
html body .public-footer a:hover{color:var(--hd-crimson-text)!important}

/* ---------- 11. Authentication (identity-first sign-in) ---------- */
html body .auth-wrap{background:var(--hd-bg)!important}
html body .auth-wrap :where(.card,.form-box,form){max-width:440px;margin-inline:auto}
html body .auth-wrap h1{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem)!important}
html body .auth-links a{font-weight:500}

/* ---------- 12. Clinical consultation workspace ---------- */
/* Notes remain the primary working area; call controls are visible but quiet. */
html body :where(.waiting-connection,[data-call-state="reconnecting"]){
  background:var(--hd-warning-bg)!important;border:1px solid var(--hd-warning)!important;color:var(--hd-ink)!important;border-radius:var(--hd-radius)!important;
}
html body [data-call-state="disconnected"]{background:var(--hd-danger-bg)!important;border:1px solid var(--hd-danger)!important;border-radius:var(--hd-radius)!important}
html body [data-call-state="connected"]{border-color:var(--hd-success)!important}

/* ---------- 12b. Legacy Tailwind teal utilities (PayFast, family, document modules) ---------- */
html body :where(.text-teal-700,.text-teal-800){color:var(--hd-crimson-text)!important}
html body :where(.text-teal-200,.text-teal-300){color:#FF9FB0!important}
html body :where(.bg-teal-700){background-color:var(--hd-crimson)!important;color:var(--hd-on-crimson)!important}
html body :where(.bg-teal-50){background-color:var(--hd-crimson-tint)!important}
html body :where(.bg-teal-950){background-color:var(--hd-ink)!important}
html body :where(.border-teal-500,.border-teal-700){border-color:var(--hd-crimson)!important}
html body :where(.ring-teal-600){--tw-ring-color:var(--hd-crimson)!important}

/* ---------- 13. Responsive ---------- */
@media (max-width:760px){
  html body :where(.card,.form-box,.hc-card,.hc-plan){border-radius:var(--hd-radius)!important}
  html body :where(.toolbar,.actions,.r22-step-actions){gap:var(--hd-s2)}
  /* Sticky primary action where a form ends with actions */
  html body :where(.r22-step-actions,.r22-finish-row){
    position:sticky;bottom:0;z-index:5;padding:var(--hd-s3) 0 calc(var(--hd-s3) + env(safe-area-inset-bottom));
    background:linear-gradient(to top,var(--hd-bg) 70%,transparent);
  }
  html body .pagehead{margin-bottom:var(--hd-s4)}
  /* Tables scroll inside their own frame; the page never scrolls sideways */
  html body .table-wrap table{min-width:640px}
}

/* ---------- 14. Motion & forced colours ---------- */
@media (prefers-reduced-motion:reduce){
  html body *,html body *::before,html body *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  html body :where(button,.button,.badge){border:1px solid ButtonText!important}
  html body :focus-visible{outline:2px solid Highlight!important}
}

/* =====================================================================
   R101b: "less black" refinements + motion (owner feedback, 9 Nov 2026)
   Black stays for text and small accents. Large surfaces are white, soft
   grey or a gentle crimson tint. Motion is subtle and disabled under
   prefers-reduced-motion.
   ===================================================================== */
html body{
  --hd-tint-grad:radial-gradient(120% 90% at 100% 0%,rgba(220,20,60,.10) 0%,rgba(220,20,60,.03) 45%,transparent 70%),linear-gradient(180deg,#FFFFFF 0%,#FBF7F8 100%);
  --hd-ease:cubic-bezier(.2,.7,.2,1);
}

/* Hero "connected platform" card: was solid near-black (#121216). */
html body .hc-care-map{
  background:var(--hd-tint-grad)!important;color:var(--hd-ink)!important;
  border:1px solid var(--hd-line)!important;box-shadow:0 24px 60px -28px rgba(220,20,60,.35)!important;
}
html body .hc-care-map :where(h2,p,span,div){color:inherit}
html body .hc-care-map h2 span{color:var(--hd-crimson-text)!important}
html body .hc-care-map .hc-map-tag{color:var(--hd-muted)!important}
html body .hc-care-map svg{color:var(--hd-crimson)!important}
html body .hc-care-map .hc-map-path > div{background:var(--hd-surface)!important;border:1px solid var(--hd-line)!important;border-radius:var(--hd-radius)!important}
html body .contact-panel{background:var(--hd-tint-grad)!important;color:var(--hd-ink)!important;border:1px solid var(--hd-line)}

/* Sign-in: the brand link was stretched into a full-height black strip.
   Now a balanced split layout: tinted brand panel + form card, same height. */
html body main.auth-wrap{
  display:grid!important;grid-template-columns:minmax(280px,400px) minmax(320px,440px)!important;justify-content:center!important;
  width:100%!important;max-width:none!important;margin:0 auto!important;box-sizing:border-box;
  align-content:center!important;align-items:stretch!important;gap:24px!important;min-height:100dvh;padding:32px 16px!important;
  background:var(--hd-bg)!important;
}
html body main.auth-wrap > .platform-brand{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;
  width:auto!important;height:auto!important;min-height:0!important;align-self:stretch!important;
  background:var(--hd-tint-grad)!important;border:1px solid var(--hd-line)!important;border-radius:var(--hd-radius-lg)!important;
  padding:40px!important;overflow:hidden!important;box-shadow:none!important;
}
html body main.auth-wrap > .platform-brand::before{width:210px!important;height:56px!important;background-color:transparent!important;background-position:left center!important;background-size:contain!important;border:0!important;box-shadow:none!important;padding:0!important;flex:0 0 auto}
html body main.auth-wrap > .platform-brand::after{
  content:"Telehealth, records and practice tools in one secure place.";
  display:block;position:static!important;margin-top:auto;padding-top:48px;max-width:20ch;
  font:600 clamp(1.25rem,1rem + 1vw,1.6rem)/1.25 var(--hd-font-display);letter-spacing:-.01em;color:var(--hd-ink);
}
html body main.auth-wrap > .card{margin:0!important;align-self:stretch;width:auto!important;max-width:none!important}
@media (max-width:860px){
  html body main.auth-wrap{grid-template-columns:minmax(0,440px)!important;align-content:start!important;gap:16px!important;padding-top:16px!important}
  html body main.auth-wrap > .platform-brand{padding:18px 20px!important;border-radius:var(--hd-radius)!important}
  html body main.auth-wrap > .platform-brand::before{width:150px!important;height:40px!important}
  html body main.auth-wrap > .platform-brand::after{display:none!important}
}

/* Logo tiles: transparent everywhere (r92/r100 painted white boxes). */
html body :where(.hybridoc-logo,.platform-brand)::before{background-color:transparent!important}
html body .hybridoc-logo{background:transparent!important}
/* Dashboard brand tile: no white box on black. */
html body.secure-site .sidebar .brand .hybridoc-wordmark{background:transparent!important}

/* Mobile menu button: the "Menu" label was being drawn as a 2px hamburger bar. */
html body .menu-toggle{width:auto!important;flex:0 0 auto!important;flex-direction:row!important;gap:8px!important;padding:0 14px!important;
  background:var(--hd-surface)!important;color:var(--hd-ink)!important;border:1px solid var(--hd-line-strong)!important}
html body .menu-toggle > span[aria-hidden="true"]{display:inline!important;width:auto!important;height:auto!important;background:none!important;
  font:600 .9rem/1 var(--hd-font-body);color:inherit}
html body .menu-toggle svg{flex:0 0 20px;width:20px!important;height:20px!important}

/* Help assistant: old teal (#087F83) to Hybridoc neutral + crimson. */
html body :where(.ha-header){background:var(--hd-surface)!important;color:var(--hd-ink)!important;border-bottom:1px solid var(--hd-line)!important}
html body .ha-header :where(h2,p){color:inherit!important}
html body .ha-avatar{background:var(--hd-crimson)!important;color:#fff!important;border-radius:50%!important}
html body :where(.ha-user,.ha-message.ha-user){background:var(--hd-crimson-tint)!important;color:var(--hd-ink)!important;border:1px solid color-mix(in srgb,var(--hd-crimson) 25%,transparent)!important}
html body .ha-suggestions{display:flex!important;flex-wrap:wrap!important;gap:6px!important;overflow:visible!important}
html body .ha-suggestions button{background:var(--hd-surface)!important;color:var(--hd-ink)!important;border:1px solid var(--hd-line-strong)!important;
  min-height:36px!important;font-size:.85rem!important;white-space:normal!important;max-width:100%}
html body .ha-suggestions button:hover{border-color:var(--hd-crimson)!important;color:var(--hd-crimson-text)!important}
html body :where(.ha-close){background:transparent!important;color:var(--hd-ink-2)!important;border:1px solid var(--hd-line)!important}
html body :where(.ha-launch,.ha-float){box-shadow:0 10px 30px -10px rgba(220,20,60,.55)!important}

/* Directory practice card (founding practice and virtual practices). */
html body .network-card--practice{display:grid;gap:12px}
html body .network-practice-head{display:flex;align-items:center;gap:16px}
html body .network-practice-logo{width:auto;max-width:200px;height:56px;object-fit:contain}
html body .network-status{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:4px 12px;border-radius:var(--hd-radius-pill);font-weight:600;font-size:.85rem}
html body .network-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
html body .network-status.is-available{background:var(--hd-success-bg);color:var(--hd-success)}
html body .network-status.is-opening_soon{background:var(--hd-info-bg);color:var(--hd-info)}
html body .network-status.is-by_arrangement{background:var(--hd-warning-bg);color:var(--hd-warning)}
html body .network-doctors{list-style:none;margin:0;padding:0;display:grid;gap:8px}
html body .network-doctors li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html body .network-doctors span{color:var(--hd-muted);font-size:.85rem}
html body .network-social{display:flex;flex-wrap:wrap;gap:8px}
html body .network-social a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--hd-line);border-radius:var(--hd-radius-pill);
  color:var(--hd-ink-2)!important;text-decoration:none;font-size:.85rem;font-weight:600;transition:border-color .15s,color .15s,transform .15s var(--hd-ease)}
html body .network-social a:hover{border-color:var(--hd-crimson);color:var(--hd-crimson-text)!important}
html body .network-button.is-primary{background:var(--hd-crimson)!important;color:#fff!important;border-color:var(--hd-crimson)!important}
html body .network-card--practice .network-button{text-decoration:none!important}
html body .network-card--practice .network-button:not(.is-primary){background:var(--hd-surface)!important;color:var(--hd-ink)!important;border-color:var(--hd-line-strong)!important}

/* Practice / doctor SEO pages. */
html body .hd-practice-hero{padding:56px 16px 24px;max-width:1080px;margin:0 auto}
html body .hd-practice-hero-copy{background:var(--hd-tint-grad);border:1px solid var(--hd-line);border-radius:22px;padding:clamp(24px,4vw,48px)}
html body .hd-practice-logo img{height:64px;width:auto}
html body .hd-doctor-profile{display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:start}
html body .hd-doctor-photo{width:160px;height:160px;border-radius:20px;object-fit:cover}
html body .hd-doctor-thumb{width:72px;height:72px;border-radius:50%;object-fit:cover}
html body .hd-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px}
html body .hd-facts dt{font-weight:600;color:var(--hd-muted)}
@media (max-width:640px){html body .hd-doctor-profile{grid-template-columns:1fr}}

/* ---------------- Motion ---------------- */
@keyframes hd-rise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes hd-fade{from{opacity:0}to{opacity:1}}
@keyframes hd-sheen{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes hd-pulse{0%{box-shadow:0 0 0 0 rgba(220,20,60,.45)}70%{box-shadow:0 0 0 14px rgba(220,20,60,0)}100%{box-shadow:0 0 0 0 rgba(220,20,60,0)}}
@keyframes hd-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}

/* Hero entrance: staggered. */
html body .hc-hero-copy > *{animation:hd-rise .7s var(--hd-ease) both}
html body .hc-hero-copy > *:nth-child(2){animation-delay:.06s}
html body .hc-hero-copy > *:nth-child(3){animation-delay:.12s}
html body .hc-hero-copy > *:nth-child(4){animation-delay:.18s}
html body .hc-hero-copy > *:nth-child(5){animation-delay:.24s}
html body .hc-care-map{animation:hd-rise .8s .15s var(--hd-ease) both}
html body .hc-care-map svg{animation:hd-float 5s ease-in-out 1s infinite}
html body .hc-hero h1 span{background:linear-gradient(90deg,var(--hd-crimson-text) 0%,var(--hd-crimson) 50%,var(--hd-crimson-text) 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;animation:hd-sheen 6s linear infinite}

/* Scroll reveal: hybridoc-motion-r101.js adds .hd-reveal, then .is-in when visible.
   Without JS nothing is hidden. */
html.hd-motion body .hd-reveal{opacity:0;transform:translate3d(0,18px,0);transition:opacity .6s var(--hd-ease),transform .6s var(--hd-ease)}
html.hd-motion body .hd-reveal.is-in{opacity:1;transform:none}

/* Micro-interactions (pointer devices only). */
@media (hover:hover) and (pointer:fine){
  html body :where(.hc-card,.hc-plan,.network-card,.card):not(.form-box){transition:transform .25s var(--hd-ease),box-shadow .25s var(--hd-ease),border-color .25s}
  html body :where(.hc-card,.hc-plan,.network-card):hover{transform:translate3d(0,-3px,0);box-shadow:0 18px 40px -22px rgba(14,14,17,.28)!important;border-color:var(--hd-line-strong)!important}
  html body :where(button,.button,.hc-button,.network-button):not(.menu-toggle):hover{transform:translate3d(0,-1px,0)}
}
html body :where(button,.button,.hc-button,.network-button):active{transform:scale(.98)}
html body :where(.hc-card a,.hc-text-link) span[aria-hidden="true"]{display:inline-block;transition:transform .2s var(--hd-ease)}
html body :where(.hc-card a,.hc-text-link):hover span[aria-hidden="true"]{transform:translateX(4px)}

/* Header lifts once the page scrolls (class set by JS). */
html body .site-header{transition:box-shadow .25s var(--hd-ease),background-color .25s}
html body .site-header.is-scrolled{box-shadow:0 8px 24px -16px rgba(14,14,17,.25)!important}

/* Loading screens ("Opening your dashboard…") get a skeleton shimmer. */
html body .hd-loading-bar{display:block;height:6px;border-radius:999px;margin-top:16px;
  background:linear-gradient(90deg,var(--hd-surface-2) 0%,var(--hd-crimson-tint) 50%,var(--hd-surface-2) 100%);background-size:200% 100%;animation:hd-sheen 1.4s linear infinite}

/* Help launcher: one gentle pulse to be noticed, then still. */
html body .ha-launch{animation:hd-pulse 1.6s ease-out 2s 2}

/* Page fade between navigations (supported browsers). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}

@media (prefers-reduced-motion:reduce){
  html body .hc-hero-copy > *,html body .hc-care-map,html body .hc-care-map svg,html body .hc-hero h1 span,html body .ha-launch,html body .hd-loading-bar{animation:none!important}
  html body .hc-hero h1 span{color:var(--hd-crimson-text)!important;background:none!important}
  html.hd-motion body .hd-reveal{opacity:1!important;transform:none!important;transition:none!important}
  @view-transition{navigation:none}
}