/* Ported from docs/design (embed sizing reports after load, 2026-09-19). Tokens come from the healthcare workspace in
   Service-Ai-LLC/serviceai_hippa_scheduling (packages/config/theme/tokens.css).
   Base is inlined rather than @import-ed: one request, and @import inside a
   stylesheet blocks rendering until it resolves. */
:root{
  --bg:#FFFFFF; --bg-subtle:#F3EFEC; --bg-muted:#FAF7F5; --bg-emphasis:#ECE5DF;
  --border:#DAD3CE; --border-subtle:#EAE5E1; --border-emphasis:#A89D94;
  --ink:#140B05; --text:#453F3B; --subtle:#7B716B; --muted:#A9A098;
  --success-subtle:#E4F7F3; --success:#19A974;
  --attention-subtle:#FFEDD6; --attention:#9B3412;
  --error-subtle:#FEE1E1; --info-subtle:#F1F7FE;
  --r-lg:.5rem; --r-md:.375rem;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg-subtle);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;color:var(--ink);letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
.card{overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--border-subtle);background:var(--bg)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border-subtle);background:var(--bg-muted);padding:12px 16px}
.card-head h2{font-size:14px;font-weight:600}
.card-head .desc{margin-top:2px;font-size:12px;color:var(--subtle)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border-subtle);padding:12px 16px;background:var(--bg)}
.topbar h1{font-size:14px;font-weight:600}
.topbar .sub{font-size:12px;color:var(--subtle);margin-top:2px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:var(--r-md);border:1px solid transparent;background:var(--brand);color:#fff;font:600 13px/1 var(--sans);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--brand-hover)}
.btn-sec{background:var(--bg);color:var(--ink);border-color:var(--border)}
.btn-sec:hover{background:var(--bg-muted)}
.btn-link{background:none;border:none;color:var(--brand);font:600 12px/1 var(--sans);cursor:pointer;padding:6px 8px;text-decoration:none;display:inline-block}
.btn:focus-visible,.btn-link:focus-visible,a:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
@media(min-width:640px){.btn{height:36px}}
.rows{list-style:none;margin:0;padding:0}
.rows>li{border-bottom:1px solid var(--border-subtle)}
.rows>li:last-child{border-bottom:0}
.pill{border-radius:999px;background:var(--bg-subtle);padding:4px 10px;font-size:12px;font-weight:500;color:var(--text);white-space:nowrap}
.pill.ok{background:var(--success-subtle);color:var(--success)}
.pill.warn{background:var(--attention-subtle);color:var(--attention)}
.note{border-radius:var(--r-lg);border:1px solid var(--attention-subtle);background:var(--attention-subtle);color:var(--attention);padding:12px 14px;font-size:13px}
.sec-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.sec-title h2{font-size:20px;font-weight:600}
.sec-title .d{margin-top:4px;font-size:12px;color:var(--subtle)}
.sec-title .asof{font-size:12px;color:var(--subtle)}
label{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:6px}
input,select{width:100%;height:48px;padding:0 12px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg);font:400 15px/1 var(--sans);color:var(--ink)}
input:focus{outline:3px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.field{margin-bottom:16px}
.hint{margin-top:6px;font-size:12px;color:var(--subtle)}

:root{--brand:#2AA30F; --brand-hover:#238A0C}
.bar{background:var(--bg);border-bottom:1px solid var(--border-subtle);padding:14px 16px;text-align:center;font-weight:600;color:var(--ink)}
.frame{max-width:640px;margin:0 auto;padding:20px 16px 48px}
.step{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);font-weight:600}
.frame h1{font-size:28px;font-weight:600;margin-top:8px;letter-spacing:-.02em}
.lede{margin-top:8px;color:var(--subtle);font-size:14px}
.svc-list{display:grid;gap:10px;margin-top:20px}
.svc{display:flex;align-items:center;gap:12px;border:1px solid var(--border-subtle);border-radius:var(--r-lg);background:var(--bg);padding:14px 16px;cursor:pointer;text-decoration:none}
.svc:hover{border-color:var(--brand)}
.svc .r{width:18px;height:18px;border-radius:999px;border:2px solid var(--border);flex:none}
.svc.on .r{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 3px #fff}
.svc b{display:block;font-size:15px;color:var(--ink)}
.svc span{font-size:12px;color:var(--subtle)}
.days{display:flex;gap:8px;overflow-x:auto;margin-top:20px;padding-bottom:4px}
.day{flex:none;min-width:64px;border:1px solid var(--border-subtle);border-radius:var(--r-lg);background:var(--bg);padding:10px 12px;text-align:center;text-decoration:none}
.day .dw{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--subtle);font-weight:600}
.day .dd{font-size:20px;font-weight:600;color:var(--ink)}
.day .dm{font-size:11px;color:var(--subtle)}
.day.on{background:var(--brand);border-color:var(--brand)}
.day.on .dw,.day.on .dd,.day.on .dm{color:#fff}
.times{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.time{border:1px solid var(--border-subtle);border-radius:var(--r-lg);background:var(--bg);padding:14px;text-align:center;font-weight:600;color:var(--ink);text-decoration:none}
.time:hover{border-color:var(--brand);color:var(--brand)}
.tick{width:44px;height:44px;border-radius:999px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:22px}
.summary{border:1px solid var(--border-subtle);border-radius:var(--r-lg);background:var(--bg);padding:16px;margin-top:20px}
.summary dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);font-weight:600;margin-top:14px}
.summary dt:first-child{margin-top:0}
.summary dd{margin:4px 0 0;color:var(--ink)}
.warn-box{border:1px solid var(--border-subtle);border-left:4px solid var(--brand);background:var(--bg);border-radius:var(--r-md);padding:12px 14px;font-size:13px;color:var(--subtle);margin-top:16px}

/* The patient templates already have the right structure -- a single-column,
   mobile-first flow with the day picker and the three-field form. Only the
   visual language changes, so the existing class names are mapped into the new
   design rather than rewriting templates that carry the privacy copy and the
   closed-day logic. */
.bar .mark{font-weight:600;color:var(--ink)}
.body{display:block}
.svc-form{display:block}
.svc{position:relative;padding-left:44px}
.svc input[type=radio]{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;accent-color:var(--brand);margin:0}
.svc-name{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.svc-note{display:block;font-size:12px;color:var(--subtle);margin-top:2px}
.daypick{display:flex;gap:8px;overflow-x:auto;margin-top:20px;padding-bottom:4px}
.day{flex:none;min-width:64px;border:1px solid var(--border-subtle);border-radius:var(--r-lg);
  background:var(--bg);padding:10px 12px;text-align:center;text-decoration:none;display:block}
.day-dow{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--subtle);font-weight:600}
.day-num{display:block;font-size:20px;font-weight:600;color:var(--ink)}
.day-mon{display:block;font-size:11px;color:var(--subtle)}
.day-on{background:var(--brand);border-color:var(--brand)}
.day-on .day-dow,.day-on .day-num,.day-on .day-mon{color:#fff}
.time-form{display:block}
.time{width:100%;border:1px solid var(--border-subtle);border-radius:var(--r-lg);background:var(--bg);
  padding:14px;text-align:center;font:600 15px/1 var(--sans);color:var(--ink);cursor:pointer}
.time:hover{border-color:var(--brand);color:var(--brand)}
.closed{margin-top:20px;border-radius:var(--r-lg);border:1px solid var(--border-subtle);
  border-left:3px solid var(--brand);background:var(--bg);padding:14px 16px;font-size:14px;color:var(--text)}
.fine{margin-top:16px;font-size:12px;color:var(--subtle)}
.fine a,.closed a{color:var(--brand);font-weight:600}
.card{border:1px solid var(--border-subtle);border-radius:var(--r-lg);background:var(--bg);padding:16px;margin-top:16px}
.details{margin-top:20px}
.details .btn{width:100%;margin-top:4px}
.recover{margin-top:20px}
.alert{border-radius:var(--r-lg);border:1px solid var(--border-subtle);border-left:3px solid var(--brand);
  background:var(--bg);padding:14px 16px;margin-top:16px;font-size:14px}
.row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-subtle)}
.row:last-child{border-bottom:0}
.term{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);font-weight:600}
.v{color:var(--ink)}
.foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--border-subtle);text-align:center}
.foot a{font-size:12px;color:var(--subtle);text-decoration:none}
.foot a:hover{color:var(--brand)}

/* ── Embedded in the practice's own site ─────────────────────────────────
   embed.js sets html.embedded before first paint when the booker is inside an
   iframe. The host page already carries the practice name, so the header bar
   and staff footer go, and type and colour follow the host site so the patient
   is not visibly handed off to a second product. Standalone is unchanged. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/static/fonts/dmsans-400-600-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/static/fonts/dmsans-400-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
html.embedded{
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --brand:#27803F; --brand-hover:#1E6B33;
  --ink:#1B4A27; --text:#4A4A4A; --subtle:#78735F;
  --border:#D5DACF; --border-subtle:#E4E7DE; --bg-subtle:#F2F1EC; --bg-muted:#F7F6F2;
  --r-lg:10px; --r-md:8px;
}
html.embedded body{background:transparent;font-size:15px}
html.embedded .bar,html.embedded .foot{display:none}
html.embedded .frame{max-width:none;margin:0;padding:0 0 2px}
html.embedded .frame h1{font-size:24px;font-weight:600;margin-top:6px;letter-spacing:-.01em}
html.embedded .step{color:#96501F;letter-spacing:.14em}
html.embedded .daypick{margin-top:18px;gap:10px}
html.embedded .day{min-width:72px;padding:12px}
html.embedded .day-on{box-shadow:0 8px 20px rgba(39,128,63,.25)}
html.embedded .times{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin-top:18px}
html.embedded .time{padding:15px 10px;font:600 15px/1 var(--sans);transition:border-color .15s,color .15s,background .15s}
html.embedded .time:hover{background:#F3F8F1}
html.embedded .btn{height:48px;font:700 15px/1 var(--sans);border-radius:6px}
html.embedded input{height:50px;font-family:var(--sans)}
html.embedded .fine{font-size:12.5px}
html.embedded .daypick{scrollbar-width:none}
html.embedded .daypick::-webkit-scrollbar{display:none}
dl.card dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);font-weight:600;margin-top:14px}
dl.card dt:first-child{margin-top:0}
dl.card dd{margin:3px 0 0;color:var(--ink);line-height:1.5}
/* The host page carries its own call/text line around the frame. */
html.embedded .call-line{display:none}

/* Morning / afternoon groups (both modes). */
.tgroup{margin-top:22px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--subtle)}
.tgroup+.times{margin-top:8px}

/* ── Embedded: match the host page's type and quiet the chrome ─────────────── */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/static/fonts/newsreader-400-600-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Same label and heading as the host column beside it, so the two line up. */
html.embedded .step{display:block;margin:0;font:600 12px/1.4 var(--sans);letter-spacing:.12em;color:#5E7A64}
html.embedded .frame h1{margin:6px 0 0;font:500 30px/1.15 'Newsreader',Georgia,serif;letter-spacing:-.5px;color:#1B4A27}
html.embedded .lede{margin-top:10px}
html.embedded .daypick{margin-top:22px}
html.embedded .day{border-color:#E4E7DE}
html.embedded .day-on{box-shadow:none}
/* Times as light chips rather than a grid of outlined boxes. */
html.embedded .times{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
html.embedded .time{background:#F3F5F1;border:1px solid transparent;border-radius:8px;padding:13px 8px;
  font:600 14.5px/1 var(--sans);color:#1B4A27}
html.embedded .time:hover,html.embedded .time:focus-visible{background:#fff;border-color:#27803F;color:#1E6B33}
html.embedded .fine{margin-top:18px;color:#78735F}

/* ── The practice's own look, standalone as well as embedded ───────────────
   Patients reach this page directly from "open the scheduler in a new tab",
   so it carries the practice's type and colour rather than the generic theme
   it was ported with. The embedded rules above only remove chrome the host
   page already provides. */
:root{
  --brand:#27803F; --brand-hover:#1E6B33;
  --ink:#1B4A27; --text:#4A4A4A; --subtle:#78735F;
  --border:#D5DACF; --border-subtle:#E4E7DE;
  --bg:#FFFFFF; --bg-subtle:#F2F1EC; --bg-muted:#F7F6F2;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-lg:12px; --r-md:8px;
}
body{font-size:15px}
.bar{padding:18px 16px;font-family:'Newsreader',Georgia,serif;font-size:19px;font-weight:500;letter-spacing:-.2px}
.frame{max-width:660px;padding:26px 20px 56px}
.step{font-size:12px;letter-spacing:.12em;color:#5E7A64}
.frame h1{margin-top:8px;font:500 30px/1.15 'Newsreader',Georgia,serif;letter-spacing:-.5px}
.times{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.time{background:#F3F5F1;border:1px solid transparent;border-radius:8px;padding:14px 8px;
  font:600 15px/1 var(--sans);color:#1B4A27}
.time:hover,.time:focus-visible{background:#fff;border-color:var(--brand);color:var(--brand-hover)}
.day{border-color:#E4E7DE}
.btn{border-radius:6px;font-weight:700}
.svc-name{font-size:15.5px}
/* The host page draws the step ribbon, so the inline label would say it twice. */
html.embedded .step{display:none}
html.embedded .frame h1{margin-top:0}
/* The fallback when booking is unavailable: a phone number big enough to tap. */
.phone{display:inline-flex;align-items:center;min-height:48px;margin-top:16px;padding:0 20px;border-radius:8px;background:var(--brand);color:#fff;font-weight:700;font-size:16px;text-decoration:none}
/* Patient sign-in: visits list */
.acct-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.acct-h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);font-weight:600;margin:28px 0 10px}
.visits{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.visit{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border-subtle);border-radius:var(--r-lg);background:var(--bg);padding:14px 16px}
.visit.past{background:var(--bg-muted)}
.visit-when{font-weight:600;color:var(--ink)}
.visit-what{font-size:13px;color:var(--subtle);margin-top:2px}
.acct-book{margin-top:14px}
.mt16{margin-top:16px}
@media (max-width:480px){.acct-head{flex-direction:column;gap:8px}}
@media (max-width:600px){.summary a[href^="tel:"]{display:inline-block;padding:10px 0}}
.acct-head form{margin-top:8px}
.warn-box a{color:var(--brand);font-weight:600}
.acct-form .btn{margin-top:4px}
/* Service rows. .svc was display:flex from the first stylesheet, which laid the
   name and duration side by side, and the generic `.svc span` rule (0,1,1)
   outranked `.svc-name` (0,1,0), shrinking every name to 12px grey. */
.svc{display:block;padding:16px 16px 16px 48px;min-height:64px}
.svc input[type=radio]{left:18px}
.svc .svc-name{display:block;font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.svc .svc-note{display:block;font-size:13px;font-weight:400;color:var(--subtle);margin-top:2px}
.svc:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.svc-form .btn{margin-top:18px}
/* Breathing room between the header bar and the page heading (standalone only;
   embedded, the bar is hidden). */
.bar + .body{display:block;margin-top:22px}
html.embedded .bar + .body{margin-top:0}

/* ------------------------------------------------------------------
   Standalone page (not inside the practice's site): content on a white
   card over a forest-green band, so it no longer blends into a grey page.
   Scoped to html:not(.embedded) -- the embedded booker sits on the
   practice's own design and must not get a second card. */
html:not(.embedded) body{
  background:linear-gradient(180deg,#1B4A27 0,#1B4A27 240px,#EDF0E9 240px) no-repeat,#EDF0E9;
  min-height:100vh}
html:not(.embedded) .frame{
  max-width:660px;margin:40px auto 48px;padding:0;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,40,22,.06),0 18px 48px rgba(16,40,22,.16)}
html:not(.embedded) .bar{
  background:#fff;border-bottom:1px solid #E4E7DE;border-top:4px solid var(--brand);
  padding:20px 24px;font-size:20px}
html:not(.embedded) .bar + .body{margin-top:0}
html:not(.embedded) .body{padding:28px 32px 8px}
html:not(.embedded) .foot{margin:32px 0 0;padding:16px 24px;background:#F6F7F3;border-top:1px solid #E4E7DE}
html:not(.embedded) .svc{border-color:#DDE2D6}
html:not(.embedded) .svc:hover{border-color:var(--brand)}
html:not(.embedded) .visit,html:not(.embedded) .summary{border-color:#DDE2D6}
@media (max-width:600px){
  html:not(.embedded) body{background:linear-gradient(180deg,#1B4A27 0,#1B4A27 160px,#EDF0E9 160px) no-repeat,#EDF0E9}
  html:not(.embedded) .frame{margin:20px 12px 32px;border-radius:14px}
  html:not(.embedded) .body{padding:22px 18px 4px}
  html:not(.embedded) .bar{padding:16px 18px;font-size:18px}
}
.demo-bar{background:#8A3B12;color:#fff;padding:10px 16px;text-align:center;font:600 13px/1.3 var(--sans)}
.visit-acts{display:flex;gap:8px;align-items:center}
@media (max-width:480px){.visit-acts{flex-direction:column;align-items:stretch}}