/* Northeast Texas Psychiatry — patient agreement signing wizard.
   Mobile-first; mirrors the intake wizard's view affordances (comfortable
   reading by default, a "full width" expand, large legible type). Brand
   ink + pine. Loaded alongside forms.css (which styles the injected clause
   content so the on-screen reading view matches the printable PDF). */

:root {
  --ink: #14283a;
  --ink-soft: #3a4a5a;
  --paper: #f0f6eb;
  --pine: #2f6b4f;
  --pine-strong: #265741;
  --pine-tint: #eef4ee;
  --hairline: rgba(20, 40, 58, 0.16);
  --hairline-strong: rgba(20, 40, 58, 0.30);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ok: #2f6b4f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Neutralize forms.css's screen "page" body rule, which is loaded first and
   would otherwise force the wizard body to 8.5in wide (mobile overflow). */
html { background: var(--paper); }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

/* ── Top bar ─────────────────────────────────────────────────── */
.wz-top {
  position: sticky; top: 0; z-index: 20;
  background: #fff;
  border-bottom: 2px solid var(--pine);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 8px 14px;
}
/* Brand (logo + name) takes the first line and keeps room; the controls drop to
   a second line when the viewport is too narrow (high zoom) instead of squeezing
   the name into a sliver. The name wraps on spaces only — never mid-word. */
.wz-top__brand { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 0; }
.wz-top__logo { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.wz-top__name { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink); min-width: 0; line-height: 1.15; }
/* Controls sit at the right; on very narrow widths (high page-zoom) they wrap
   among themselves instead of forcing the whole page wider than the viewport. */
.wz-top__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; flex: 1 1 auto; min-width: 0; margin-left: auto; }
.wz-progress { font-size: 12px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 460px) { .wz-top__name { font-size: 13px; } }
.wz-progress__bar { height: 3px; background: var(--hairline); }
.wz-progress__fill { height: 100%; background: var(--pine); width: 0; transition: width .3s ease; }

/* ── Layout shell ────────────────────────────────────────────── */
.wz-shell { max-width: 760px; margin: 0 auto; padding: 18px 16px 40px; }

.wz-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 22px 22px 26px;
  box-shadow: 0 1px 10px rgba(20, 40, 58, 0.06);
}
@media (max-width: 560px) { .wz-card { padding: 16px 15px 20px; border-radius: 8px; } }

.wz-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pine); margin-bottom: 5px; }
.wz-h1 { font-family: var(--serif); font-size: clamp(20px, 5vw, 27px); line-height: 1.12; color: var(--ink); margin-bottom: 12px; }
.wz-h2 { font-family: var(--serif); font-size: 18px; color: var(--ink); margin: 0 0 8px; }
.wz-p { margin-bottom: 12px; font-size: 15px; }
.wz-muted { color: var(--ink-soft); }
.wz-note { font-size: 13px; color: var(--ink-soft); }

/* ── Form fields ─────────────────────────────────────────────── */
.wz-field { margin-bottom: 14px; }
.wz-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.wz-input {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 11px 12px; border: 1px solid var(--hairline-strong); border-radius: 8px; background: #fff;
}
.wz-input:focus { outline: 2px solid var(--pine); outline-offset: 1px; border-color: var(--pine); }
.wz-input--static { background: #f4f6f4; color: var(--ink-soft); display: flex; align-items: center; }
.wz-input.is-invalid { border-color: #c0392b; outline-color: #c0392b; }
.wz-fielderr { margin-top: 5px; font-size: 12.5px; color: #c0392b; font-weight: 600; }
html[data-theme="dark"] .wz-fielderr { color: #f3a39a; }
html[data-theme="dark"] .wz-input.is-invalid { border-color: #f3a39a; }
.wz-row { display: flex; gap: 12px; flex-wrap: wrap; }
.wz-row > .wz-field { flex: 1; min-width: 140px; }

/* Structured-form fillable fields ([data-fill]) — ROI in/out forms. Inputs are
   injected inline into the reading pane, which is ALWAYS a white document
   (never themed), so these fields must stay document-styled (dark ink on
   white) in both light and dark app themes — no dark fill. */
.wz-input.wz-fillinit { width: 90px; display: inline-block; text-align: center; }
.wz-input.wz-filltext { min-height: 46px; resize: vertical; }
.wz-fillset { display: flex; flex-direction: column; gap: 9px; margin: 6px 0 12px; padding-left: 2px; }
.wz-fillset.is-invalid { outline: 2px solid #c0392b; outline-offset: 5px; border-radius: 4px; }
/* em-based so the label + box grow with the reading-view text-size control. */
.wz-fillopt { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95em; color: var(--ink); cursor: pointer; }
.wz-fillopt input { width: 1.2em; height: 1.2em; margin-top: 1px; accent-color: var(--pine); color-scheme: light; flex-shrink: 0; }
/* A conditional field (e.g. "Purpose: other") stays hidden until its trigger. */
/* Progressive disclosure hides whole conditional groups (.fillblock) too, not
   just single rows — e.g. the HIPAA "additional authorized person" blocks. */
.wz-reading .wz-cond-hidden { display: none; }
/* Live warning callout (e.g. selecting "No" on the sensitive-info consent).
   Reading-pane only — it is a plain <div>, so extractElements never puts it in
   the signed PDF. */
.wz-reading .wz-note-danger {
  margin: 6px 0 10px; padding: 10px 12px;
  border: 1px solid rgba(192, 57, 43, .45); border-left: 4px solid #c0392b;
  background: #fbecea; border-radius: 6px;
  font-size: 0.92em; line-height: 1.45; color: #7a241b;
}
.wz-reading .wz-note-danger strong { color: #a5281c; }
/* Inline validation error under a structured field (mirrors .wz-fielderr). */
.wz-fillerr { margin: 4px 0 8px; font-size: 13px; color: #c0392b; font-weight: 600; }

/* ── Reading pane (injected form content uses forms.css) ─────── */
/* Flows inline — the page scrolls, no nested scrollbar. Responsive: the shell
   keeps a comfortable reading column on desktop; full-bleed on mobile. */
.wz-reading {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: #fff;
  padding: 18px 20px;
  font-size: clamp(15px, 2.6vw, 16px);
  /* The reading pane is always light; pin the control color-scheme so native
     checkboxes/inputs don't render as dark filled boxes under a dark OS/theme. */
  color-scheme: light;
}
.wz-reading .lh, .wz-reading .party, .wz-reading .defn, .wz-reading .ack,
.wz-reading .sig, .wz-reading .ft, .wz-reading .title, .wz-reading .eyebrow { display: none; }
/* A per-medication consent carries its subject IN the title row (.title--med >
   .medline). The rule above hides .title as redundant with the wz-h1 heading the
   step renders itself — but for a consent the medication line is NOT redundant:
   the body reads "the medication named above", so the patient has to SEE the
   drug while reading and agreeing, not only on the downloaded PDF. Reveal that
   one row back (hiding only its now-duplicate h1). forms.css already gives
   .medline its pine, bold callout; here we just re-base its fixed print pt to
   the pane's scalable size and let a long name wrap instead of running off. */
.wz-reading .title--med { display: block; margin: 0 0 12px; }
.wz-reading .title--med h1 { display: none; }
.wz-reading .title--med .medline { font-size: 1.05em; white-space: normal; }
.wz-reading .title--med .medline__k { font-size: 0.88em; }
/* Structured-form field rows (ROI in/out) in the reading pane. */
.wz-reading .fillrow { margin: 8px 0; }
.wz-reading .fld-l { display: block; font-weight: 700; font-size: 0.92em; color: var(--ink-soft); margin-bottom: 4px; }
/* Break long unbreakable tokens (em-dash compounds like "barbiturates—may",
   emails/URLs in clauses) so nothing runs off the edge at high zoom. */
.wz-reading { color: var(--ink); overflow-wrap: break-word; word-break: break-word; }
.wz-reading h2.sec { font-size: 1.06em; }
/* forms.css sizes the clause/lead/etc. text in fixed pt for print; inside the
   reading view, re-base everything to the (scalable) .wz-reading font-size so the
   text-size control reaches all of it. em keeps a light hierarchy. */
.wz-reading ol.clauses, .wz-reading ol.clauses > li, .wz-reading .affirm,
.wz-reading .affirm p, .wz-reading p, .wz-reading li { font-size: inherit; }
.wz-reading ol.clauses > li { margin-bottom: 9px; }
.wz-reading .lead { font-size: 0.97em; }
.wz-reading .audience-note { font-size: 0.92em; }
.wz-reading .clause-note { font-size: 0.85em; }
.wz-reading .sig__label { font-size: 0.7em; }

/* Larger-text accessibility levels (toggle in the top bar). Scales the wizard's
   readable prose across every step (reading view, identity, ID, landing, etc.),
   grouped so the visual hierarchy is preserved. */
body.wz-text-lg .wz-reading { font-size: 18px; }
body.wz-text-xl .wz-reading { font-size: 20.5px; }
/* Body prose + controls */
body.wz-text-lg .wz-p, body.wz-text-lg .wz-agree label, body.wz-text-lg .wz-callout,
body.wz-text-lg .wz-disclose, body.wz-text-lg .wz-list, body.wz-text-lg .wz-idwarn,
body.wz-text-lg .wz-dl-warn, body.wz-text-lg .wz-dl-steps, body.wz-text-lg .wz-dl-name,
body.wz-text-lg .wz-input, body.wz-text-lg .wz-btn { font-size: 16.5px; }
body.wz-text-xl .wz-p, body.wz-text-xl .wz-agree label, body.wz-text-xl .wz-callout,
body.wz-text-xl .wz-disclose, body.wz-text-xl .wz-list, body.wz-text-xl .wz-idwarn,
body.wz-text-xl .wz-dl-warn, body.wz-text-xl .wz-dl-steps, body.wz-text-xl .wz-dl-name,
body.wz-text-xl .wz-input, body.wz-text-xl .wz-btn { font-size: 18.5px; }
/* Fine print */
body.wz-text-lg .wz-label, body.wz-text-lg .wz-dl-cleanup, body.wz-text-lg .wz-dl-gate,
body.wz-text-lg .wz-dl-countdown,
body.wz-text-lg .wz-fielderr, body.wz-text-lg .wz-scrollhint { font-size: 14px; }
body.wz-text-xl .wz-label, body.wz-text-xl .wz-dl-cleanup, body.wz-text-xl .wz-dl-gate,
body.wz-text-xl .wz-dl-countdown,
body.wz-text-xl .wz-fielderr, body.wz-text-xl .wz-scrollhint { font-size: 15.5px; }
/* Headings (gentler bump to keep hierarchy) */
body.wz-text-lg .wz-h1 { font-size: clamp(23px, 5.6vw, 30px); }
body.wz-text-xl .wz-h1 { font-size: clamp(26px, 6.2vw, 33px); }
body.wz-text-lg .wz-h2 { font-size: 20px; }
body.wz-text-xl .wz-h2 { font-size: 22px; }

.wz-scrollhint {
  text-align: center; font-size: 12.5px; color: var(--pine-strong); font-weight: 600;
  padding: 7px; background: var(--pine-tint); border-radius: 6px; margin-top: 10px;
}

/* ── Agree gate ──────────────────────────────────────────────── */
.wz-agree {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--hairline-strong); border-radius: 8px; background: #fafbfa;
}
.wz-agree input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--pine); color-scheme: light; flex-shrink: 0; }
.wz-agree.is-disabled { opacity: .55; }
.wz-agree label { font-size: 14.5px; font-weight: 600; }

/* Revealed when "signing on behalf of the patient" is checked. */
.wz-repfields { margin: 10px 0 0; padding: 0 2px; }
.wz-repfields.wz-hidden { display: none; }

/* ── Signature ───────────────────────────────────────────────── */
.wz-sigtabs { display: flex; gap: 8px; margin-bottom: 10px; }
.wz-sigtab {
  flex: 1; text-align: center; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 9px; border: 1px solid var(--hairline-strong); border-radius: 8px; background: #fff; color: var(--ink-soft);
}
.wz-sigtab[aria-selected="true"] { background: var(--pine); color: #fff; border-color: var(--pine); }
.wz-sigpad-wrap { position: relative; }
.wz-sigpad {
  width: 100%; height: 180px; border: 2px dashed var(--hairline-strong);
  border-radius: 8px; background: #fff; touch-action: none; display: block;
}
.wz-sigpad-baseline { position: absolute; left: 16px; right: 16px; bottom: 44px; border-bottom: 1px solid var(--hairline-strong); pointer-events: none; }
.wz-sig-typed {
  width: 100%; font-family: "Brush Script MT", "Snell Roundhand", cursive; font-size: 34px;
  color: var(--ink); padding: 14px 12px; border: 2px dashed var(--hairline-strong); border-radius: 8px; background: #fff;
}
.wz-sigclear { margin-top: 8px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.wz-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.wz-btn {
  font-family: var(--sans); font-size: 16px; font-weight: 700; cursor: pointer;
  padding: 13px 20px; border-radius: 9px; border: 1px solid transparent; flex: 1; min-width: 130px;
}
.wz-btn--primary { background: var(--pine); color: #fff; }
.wz-btn--primary:hover { background: var(--pine-strong); }
.wz-btn--primary:disabled { background: #9bb3a5; cursor: not-allowed; }
.wz-btn--primary:disabled:hover { background: #9bb3a5; }
.wz-btn--ghost { background: #fff; color: var(--ink); border-color: var(--hairline-strong); }
.wz-btn--sm { flex: 0 0 auto; min-width: 0; font-size: 13px; padding: 8px 14px; }

/* Photo-ID capture step */
.wz-idslot { margin-bottom: 20px; }
.wz-idslot .wz-label { margin-bottom: 6px; }
.wz-idprev:not(:empty) { margin: 8px 0; }
.wz-idprev img { max-width: 100%; max-height: 240px; border: 1px solid var(--hairline-strong); border-radius: 8px; display: block; }
.wz-idcontrols { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wz-idbtn { flex: 0 0 auto; min-width: 0; display: inline-flex; align-items: center; line-height: 1.2; }
.wz-idwarn { margin-top: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  color: #8a5300; background: #fff6e6; border: 1px solid #e7c889; }
html[data-theme="dark"] .wz-idprev img { border-color: rgba(255,255,255,.25); }
html[data-theme="dark"] .wz-idwarn { color: #ffd9a0; background: #2b2110; border-color: #5a4420; }

/* Inactivity auto-flush warning */
.wz-idle { position: fixed; inset: 0; z-index: 1100; background: rgba(13,20,32,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.wz-idle__card { background: #fff; border-radius: 12px; padding: 22px; max-width: 380px; width: 100%;
  box-shadow: 0 8px 40px rgba(0,0,0,.3); }
.wz-idle__card h3 { font-family: var(--serif); font-size: 20px; margin: 0 0 8px; color: var(--ink); }
.wz-idle__card p { font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0 0 16px; }
.wz-idle__time { font-weight: 700; }
html[data-theme="dark"] .wz-idle__card { background: #13252e; }
html[data-theme="dark"] .wz-idle__card h3, html[data-theme="dark"] .wz-idle__card p { color: #e6eeec; }

/* Pre-form privacy disclosure */
.wz-disclose { margin: 0 0 18px; padding: 12px 14px; font-size: 14px; line-height: 1.45;
  color: var(--ink); background: var(--pine-tint); border: 1px solid rgba(47,107,79,.3);
  border-left: 4px solid var(--pine); border-radius: 8px; }
html[data-theme="dark"] .wz-disclose { color: #e6eeec; background: #12241c; border-color: #2f6b4f; }

/* Post-download upload landing */
.wz-dl-file { margin: 4px 0 14px; }
.wz-dl-file .wz-label { margin-bottom: 6px; }
.wz-dl-filerow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wz-dl-name { flex: 1 1 auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px;
  background: #f4f6f4; border: 1px solid var(--hairline-strong); border-radius: 6px; padding: 8px 10px; word-break: break-all; }
.wz-dl-warn { margin: 14px 0; padding: 11px 13px; border-radius: 8px; font-size: 14px;
  color: #8a5300; background: #fff6e6; border: 1px solid #e7c889; }
.wz-dl-steps { margin: 0 0 14px 20px; font-size: 14.5px; }
.wz-dl-steps li { margin-bottom: 5px; }
.wz-dl-again { display: block; width: 100%; }
.wz-dl-again:disabled { opacity: .55; cursor: not-allowed; }
.wz-dl-countdown { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); text-align: center; }
.wz-dl-countdown--ended { color: #c0392b; font-weight: 600; text-align: left; }
.wz-dl-gate { color: #c0392b; font-weight: 600; font-size: 13.5px; margin: 8px 0 0; }
.wz-dl-spruce { display: block; width: 100%; text-align: center; text-decoration: none; margin-top: 10px; }
.wz-dl-spruce[aria-disabled="true"] { background: #9bb3a5; cursor: not-allowed; }
.wz-dl-spruce[aria-disabled="true"]:hover { background: #9bb3a5; }
.wz-dl-cleanup { margin-top: 16px; font-size: 13px; color: var(--ink-soft); }
html[data-theme="dark"] .wz-dl-name { background: #0f1e26; color: #e6eeec; border-color: rgba(255,255,255,.2); }
html[data-theme="dark"] .wz-dl-warn { color: #ffd9a0; background: #2b2110; border-color: #5a4420; }
html[data-theme="dark"] .wz-dl-gate { color: #f3a39a; }
html[data-theme="dark"] .wz-dl-countdown { color: #9fb4b0; }
html[data-theme="dark"] .wz-dl-countdown--ended { color: #f3a39a; }
html[data-theme="dark"] .wz-dl-cleanup { color: #9fb4b0; }
html[data-theme="dark"] .wz-dl-spruce[aria-disabled="true"] { background: #3a5246; }

/* Guided camera scanner overlay (lightweight; frame + auto-capture on stillness) */
.wz-scan { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; flex-direction: column; }
.wz-scan__stage { position: relative; flex: 1 1 auto; overflow: hidden; }
.wz-scan__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.wz-scan__frame {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 86%; max-width: 560px; aspect-ratio: 1.585 / 1;
  border: 3px solid #fff; border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5); /* dim everything outside the frame */
}
.wz-scan__hint {
  position: absolute; left: 0; right: 0; bottom: 16px; text-align: center;
  color: #fff; font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 0 18px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.wz-scan__actions { display: flex; gap: 12px; padding: 14px; background: #000; }

/* ── Packet checklist (review step) ──────────────────────────── */
.wz-list { list-style: none; margin: 12px 0; }
.wz-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.wz-list li:last-child { border-bottom: 0; }
.wz-tick { width: 22px; height: 22px; border-radius: 50%; background: var(--pine); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.wz-tick--todo { background: var(--hairline); color: var(--ink-soft); }

.wz-callout { background: var(--pine-tint); border: 1px solid rgba(47,107,79,.3); border-radius: 8px; padding: 14px 16px; font-size: 14.5px; margin: 14px 0; }
.wz-error { background: #fdecec; border: 1px solid #e7a3a3; color: #8a2020; border-radius: 8px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }

.wz-hidden { display: none !important; }

/* ── Theme toggle button ─────────────────────────────────────── */
.wz-themebtn {
  width: 32px; height: 32px; flex-shrink: 0;
  border: 1px solid var(--hairline-strong); border-radius: 8px;
  background: #fff; color: var(--ink); font-size: 15px; cursor: pointer;
  line-height: 1; display: flex; align-items: center; justify-content: center;
}
/* Text-size control: the universal small-A/large-A icon PLUS a visible label so
   it reads as a control and shows the current size, not just a bare glyph. */
.wz-textbtn { width: auto; padding: 0 11px; gap: 6px; align-items: center; }
.wz-textbtn .wz-az { display: inline-flex; align-items: baseline; gap: 1px; font-family: var(--serif); }
.wz-textbtn .wz-az-s { font-size: 11px; font-weight: 700; }
.wz-textbtn .wz-az-l { font-size: 17px; font-weight: 700; }
.wz-textbtn__label { font-family: var(--sans, system-ui), sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; }

/* ── Dark mode (honors the site's netx_theme_preference_v1 / OS setting) ── */
html[data-theme="dark"] { background: #0d262c; }
html[data-theme="dark"] body { background: #0d262c; color: #e6eeec; }
html[data-theme="dark"] .wz-top { background: #10222b; border-bottom-color: var(--pine); }
html[data-theme="dark"] .wz-top__name { color: #e6eeec; }
html[data-theme="dark"] .wz-progress { color: #9fb4b0; }
html[data-theme="dark"] .wz-progress__bar { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .wz-themebtn { background: #13252e; color: #e6eeec; border-color: rgba(255,255,255,.2); }
html[data-theme="dark"] .wz-card { background: #13252e; border-color: rgba(255,255,255,.08); box-shadow: none; }
html[data-theme="dark"] .wz-h1, html[data-theme="dark"] .wz-h2 { color: #eaf1ef; }
html[data-theme="dark"] .wz-muted, html[data-theme="dark"] .wz-note, html[data-theme="dark"] .wz-label { color: #9fb4b0; }
/* Editable fields stay a white "fill here" surface even in dark mode (the
   surrounding card is dark, so white inputs read clearly as where to type);
   the read-only field is a light gray, mirroring light mode. */
html[data-theme="dark"] .wz-input { background: #fff; color: var(--ink); border-color: rgba(20,40,58,.25); }
html[data-theme="dark"] .wz-input--static { background: #eef1ee; color: var(--ink-soft); }
html[data-theme="dark"] .wz-input::placeholder { color: #6b7a86; }
html[data-theme="dark"] .wz-agree { background: #0f1e26; border-color: rgba(255,255,255,.16); }
html[data-theme="dark"] .wz-agree label { color: #e6eeec; }
html[data-theme="dark"] .wz-btn--ghost { background: #13252e; color: #e6eeec; border-color: rgba(255,255,255,.22); }
html[data-theme="dark"] .wz-btn--primary:disabled,
html[data-theme="dark"] .wz-btn--primary:disabled:hover { background: #3a5246; color: #b8c7c0; }
html[data-theme="dark"] .wz-sigtab { background: #13252e; color: #9fb4b0; border-color: rgba(255,255,255,.22); }
html[data-theme="dark"] .wz-sigtab[aria-selected="true"] { background: var(--pine); color: #fff; border-color: var(--pine); }
html[data-theme="dark"] .wz-list li { border-bottom-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .wz-callout { background: rgba(47,107,79,.2); border-color: rgba(47,107,79,.45); color: #dceee5; }
html[data-theme="dark"] .wz-scrollhint { background: rgba(47,107,79,.2); color: #cfe7da; }
/* The reading pane shows the actual document — keep it on white "paper" in both
   modes (a contract is read on white), and the signature pad stays white too. */
html[data-theme="dark"] .wz-reading,
html[data-theme="dark"] .wz-sig-typed,
html[data-theme="dark"] .wz-sigpad { background: #fff; color: var(--ink); }