/* Wise Homeopathy — shared Phase 2A patient-portal design tokens & components.
   Extracted from login.html/verify.html's identical duplicated <style> blocks
   (docs/29 §5/§13 Batch 5C) so the dashboard shell becomes the fourth
   consumer, not a third hand-copied duplicate. Scope is deliberately limited
   to what login.html/verify.html already shared — the public marketing pages
   (index.html, etc.) and internal/consultation-summary.html (Phase 1.5,
   frozen) keep their own independent stylesheets and are untouched. */

:root{
  --color-brand:#27498C;--color-brand-strong:#1B3463;--color-brand-deep:#13264A;
  --color-accent:#D62E4D;--color-accent-strong:#B8273F;
  --color-ink:#0B0B0B;--color-text-secondary:#5B6472;--color-text-faint:#9AA3B2;
  --color-line:#E7EBF1;--color-surface:#F4F7FB;--color-surface-base:#FFFFFF;
  --color-warn-bg:#FFF4E5;--color-warn-line:#F0C36D;--color-warn-text:#7A5200;
  --color-err-bg:#FCEBEC;--color-err-line:#E8A3AC;--color-err-text:#8A1F2C;
  --color-ok-bg:#EAF3EC;--color-ok-line:#9CC9A6;--color-ok-text:#245C34;
  --font-display:'Fraunces',Georgia,serif;--font-body:'Poppins',Arial,sans-serif;
  --radius-md:13px;--radius-lg:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);font-size:15.5px;color:var(--color-ink);background:var(--color-surface);line-height:1.6;-webkit-font-smoothing:antialiased}
.serif{font-family:var(--font-display)}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px;border-radius:4px}
[hidden]{display:none !important}

/* skip link — ported from index.html's identical component (docs/14) */
.skip{position:absolute;left:-9999px;background:var(--color-brand);color:#fff;padding:10px 18px;border-radius:10px;z-index:999}
.skip:focus{left:16px;top:12px}

.wrap{width:100%;margin:0 auto;padding:clamp(24px,5vw,48px) clamp(18px,4vw,32px)}

.brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:28px}
.brand img{height:34px;width:auto}
.brand .mark{display:none;height:34px;width:34px;border-radius:50%;background:var(--color-brand);color:#fff;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600}
.brand .txt{display:none;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--color-brand-deep)}

h1{font-family:var(--font-display);font-size:clamp(24px,4vw,30px);color:var(--color-brand-strong);text-align:center;margin-bottom:6px}
.sub{color:var(--color-text-secondary);font-size:14.5px;text-align:center;margin-bottom:28px}

.card{background:var(--color-surface-base);border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:clamp(20px,4vw,32px)}

.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;font-weight:500;margin-bottom:6px;color:var(--color-brand-strong)}
.field input{width:100%;padding:13px 15px;border:1px solid var(--color-line);border-radius:var(--radius-md);font:inherit;font-size:15px;background:var(--color-surface-base);transition:border-color .15s ease}
.field input:focus{border-color:var(--color-brand)}
.field input:focus:not(:focus-visible){outline:none}

/* textarea/select — added Batch PA-4, the first Phase 2A form with either
   (docs/29 §9's optional notes/condition_slug fields). Same look as
   .field input, so a mixed form reads as one component, not three. */
.field textarea{width:100%;padding:13px 15px;border:1px solid var(--color-line);border-radius:var(--radius-md);font:inherit;font-size:15px;background:var(--color-surface-base);transition:border-color .15s ease;resize:vertical}
.field textarea:focus{border-color:var(--color-brand)}
.field textarea:focus:not(:focus-visible){outline:none}
.field select{width:100%;padding:13px 15px;border:1px solid var(--color-line);border-radius:var(--radius-md);font:inherit;font-size:15px;background:var(--color-surface-base);transition:border-color .15s ease}
.field select:focus{border-color:var(--color-brand)}
.field select:focus:not(:focus-visible){outline:none}

.submit{width:100%;background:var(--color-accent);color:#fff;border:none;padding:15px;border-radius:var(--radius-md);font:600 15.5px var(--font-body);cursor:pointer;transition:transform .15s ease,box-shadow .2s ease}
.submit:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(214,46,77,.34)}
.submit:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

.secondary{display:inline-block;margin-top:14px;background:var(--color-brand);color:#fff;text-decoration:none;font-weight:600;font-size:14.5px;padding:12px 22px;border-radius:var(--radius-md)}

.status{margin-top:16px;padding:13px 16px;border-radius:var(--radius-md);font-size:14px;display:none}
.status.ok{display:block;background:var(--color-ok-bg);border:1px solid var(--color-ok-line);color:var(--color-ok-text)}
.status.err{display:block;background:var(--color-err-bg);border:1px solid var(--color-err-line);color:var(--color-err-text)}
.status.warn{display:block;background:var(--color-warn-bg);border:1px solid var(--color-warn-line);color:var(--color-warn-text)}
.status.loading{display:block;background:var(--color-surface);border:1px solid var(--color-line);color:var(--color-text-secondary)}

.skeleton{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--color-line) 25%,#f4f6fa 37%,var(--color-line) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;margin:6px 0}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

.foot{margin-top:24px;text-align:center;font-size:13.5px;color:var(--color-text-faint)}
.foot a{color:var(--color-brand);text-decoration:none;font-weight:500}
.foot a:hover{text-decoration:underline}