/* DocVoc UI — the design handoff's component layer (design/DocVoc-Visit-Handoff-2026-09-23/docvoc-ui.css), shipped as is: the .dv-*
   classes every screen composes so the whole app has one style. Tokens live in tokens.css (same values, same names, older names aliased);
   the base rules (fonts, focus, links, placeholders) live in app.css and controls.css. Do not change values here; compose new
   components from these and record them in design/DESIGN_GUIDE.md §14. */
.dv-mono{font-family:var(--font-mono)}
svg.dv-i{flex:none;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- type ---------- */
.dv-display{font-size:52px;line-height:1.02;font-weight:700;letter-spacing:-.04em}
.dv-h1{font-size:25px;font-weight:700;letter-spacing:-.03em}          /* page title */
.dv-h1-auth{font-size:30px;font-weight:700;letter-spacing:-.03em}     /* auth form title */
.dv-h2{font-size:19px;font-weight:600;letter-spacing:-.026em}         /* section / settings title */
.dv-h3{font-size:15px;font-weight:600}                                /* card title */
.dv-body{font-size:13.5px;line-height:1.55;color:var(--ink)}
.dv-sub{font-size:13px;line-height:1.6;color:var(--ink2)}
.dv-hint{font-size:12.5px;line-height:1.55;color:var(--ink3)}
.dv-fine{font-size:12px;line-height:1.65;color:var(--ink3)}
.dv-note{font-size:16px;line-height:1.58;color:var(--body);text-wrap:pretty}
.dv-kicker{font-size:10px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink3)}
.dv-th{font-size:11px;font-weight:550;letter-spacing:.5px;color:var(--ink3)}
.dv-stat{font-family:var(--font-mono);font-size:38px;font-weight:600;letter-spacing:-.04em}
.dv-label{display:block;font-size:13px;font-weight:550;margin-bottom:7px}

/* ---------- buttons ---------- */
.dv-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--h-control);padding:0 15px;
  border-radius:var(--r-control);border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  font-size:13px;font-weight:550;white-space:nowrap;transition:background-color 160ms var(--ease),border-color 160ms var(--ease)}
.dv-btn:hover{border-color:var(--ink3)}
.dv-btn svg{width:17px;height:17px}
.dv-btn--primary{border:none;background:var(--accent);color:var(--accent-ink);font-weight:600;box-shadow:var(--shadow-primary)}
.dv-btn--primary:hover{background:var(--accent-hover)}
.dv-btn--soft{border:none;background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.dv-btn--danger{border:1px solid var(--danger-line);background:var(--danger-bg);color:var(--danger)}
.dv-btn--danger-solid{border:none;background:var(--danger);color:var(--on-fill);font-weight:600}
.dv-btn--ghost{border:none;background:transparent;color:var(--accent-text);padding:0;height:auto;font-weight:550}
.dv-btn--large{height:var(--h-large);font-size:15px;width:100%}             /* auth primary */
.dv-btn--mid{height:var(--h-mid);padding:0 13px;font-size:12.5px}           /* card-header actions */
.dv-btn--compact{height:var(--h-compact);padding:0 11px;font-size:12.5px}
.dv-btn--row{height:var(--h-row);padding:0 11px;font-size:12.5px;border-radius:var(--r-small)} /* pagers, row actions */
.dv-btn--hero{height:var(--h-hero);padding:0 26px 0 20px;border:none;border-radius:var(--r-pill);background:var(--accent);
  color:var(--accent-ink);font-size:16px;font-weight:600;gap:11px;box-shadow:var(--shadow-hero)}
.dv-btn--hero svg{width:22px;height:22px}
.dv-btn--icon{width:32px;height:32px;padding:0;border-radius:var(--r-control)}
.dv-btn:disabled{background:var(--panel2);color:var(--ink3);border-color:var(--line);box-shadow:none;cursor:not-allowed}
.dv-link-action{display:inline-flex;align-items:center;gap:5px;border:none;background:none;padding:0;
  color:var(--accent-text);font-size:13px;font-weight:600;white-space:nowrap}   /* "Review ›" */

/* ---------- fields ---------- */
.dv-input,.dv-select,.dv-textarea{width:100%;height:var(--h-control);border-radius:var(--r-control);border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);padding:0 13px;font-size:14px}
.dv-input--auth{height:46px}
.dv-input:focus,.dv-select:focus,.dv-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.dv-input[aria-invalid="true"]{border-color:var(--danger)}
.dv-textarea{height:auto;min-height:110px;padding:12px 13px;line-height:1.6;resize:vertical}
.dv-code{font-family:var(--font-mono);font-size:19px;letter-spacing:.5em;text-align:center}   /* OTP */
.dv-field-icon{display:flex;align-items:center;gap:10px;height:var(--h-control);border-radius:var(--r-control);
  border:1px solid var(--line);background:var(--panel2);padding:0 13px}
.dv-field-icon input{flex:1;min-width:0;border:none;background:transparent;outline:none}
.dv-field-icon svg{width:18px;height:18px;color:var(--ink3)}
.dv-prefix{display:flex}.dv-prefix>span{display:flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-right:none;
  border-radius:var(--r-control) 0 0 var(--r-control);background:var(--panel);font-family:var(--font-mono);font-size:13px;color:var(--ink2)}
.dv-prefix>input{border-radius:0 var(--r-control) var(--r-control) 0}
.dv-check{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink2)}
.dv-segmented{display:flex;border:1px solid var(--line);border-radius:var(--r-control);overflow:hidden;height:var(--h-control)}
.dv-segmented button{flex:1;border:none;background:var(--panel2);color:var(--ink2);font-size:13px;font-weight:550}
.dv-segmented button+button{border-left:1px solid var(--line)}
.dv-segmented button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.dv-divider-or{display:flex;align-items:center;gap:12px;color:var(--ink3);font-size:12px}
.dv-divider-or::before,.dv-divider-or::after{content:"";height:1px;background:var(--line);flex:1}

/* ---------- surfaces ---------- */
.dv-card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.dv-card__head{display:flex;align-items:center;gap:12px;padding:12px 17px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dv-card__body{padding:16px 19px}
.dv-card__foot{display:flex;align-items:center;gap:8px;padding:9px 19px;background:var(--panel2)}   /* pager strip */
.dv-row{display:flex;align-items:center;gap:18px;padding:14px 17px;border-bottom:1px solid var(--line2)}
.dv-row:last-child{border-bottom:none}
.dv-stat-card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);padding:19px;box-shadow:var(--shadow)}
.dv-callout{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);padding:15px;font-size:13px;line-height:1.65;color:var(--ink2)}
.dv-callout--warn{border-color:var(--warn-line);background:var(--warn-bg);color:var(--ink)}
.dv-callout--danger{border-color:var(--danger-line);background:var(--danger-bg);color:var(--ink)}
.dv-callout svg{width:19px;height:19px;flex:none}

/* ---------- badges / chips / avatars ---------- */
.dv-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:550;padding:5px 8px;border-radius:var(--r-badge);white-space:nowrap}
.dv-badge svg{width:13px;height:13px}
.dv-badge--review{color:var(--warn);background:var(--warn-bg)}
.dv-badge--signed{color:var(--ok);background:var(--ok-bg)}
.dv-badge--paused,.dv-badge--live{color:var(--live);background:var(--live-bg)}
.dv-badge--info{color:var(--accent-text);background:var(--accent-soft)}
.dv-badge--neutral{color:var(--ink2);background:var(--panel2)}
.dv-chip{height:var(--h-compact);padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel2);
  color:var(--ink2);font-size:12.5px;font-weight:500;white-space:nowrap}
.dv-chip[aria-pressed="true"],.dv-chip.is-on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.dv-avatar{width:30px;height:30px;border-radius:var(--r-control);background:var(--accent-soft);color:var(--accent-text);
  display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;flex:none}
.dv-avatar--lg{width:54px;height:54px;border-radius:15px;font-size:19px;font-weight:700}

/* ---------- navigation ---------- */
.dv-nav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px;border-radius:var(--r-control);border:none;
  background:transparent;color:var(--ink2);font-size:13.5px;font-weight:500}
.dv-nav-item svg{width:18px;height:18px}
.dv-nav-item .count{margin-left:auto;font-family:var(--font-mono);font-size:11.5px;color:var(--ink3)}
.dv-nav-item[aria-current="page"]{background:var(--accent-soft);color:var(--accent-text);font-weight:650}
.dv-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}
.dv-tab{display:flex;align-items:center;gap:7px;padding:9px 12px;border:none;background:none;border-bottom:2px solid transparent;
  color:var(--ink2);font-size:13.5px;font-weight:500;white-space:nowrap}
.dv-tab[aria-selected="true"]{border-bottom-color:var(--accent);color:var(--accent-text);font-weight:600}
.dv-tab .count{font-family:var(--font-mono);font-size:11px;color:var(--ink3)}

/* ---------- tables (grid-based, header and body share ONE template) ---------- */
.dv-table{--cols:minmax(120px,1.3fr) minmax(96px,1fr) minmax(86px,.9fr) 108px 80px}   /* override per table; trailing tracks fixed px */
.dv-table>.dv-tr{display:grid;grid-template-columns:var(--cols);gap:14px;align-items:center;padding:13px 19px;border-bottom:1px solid var(--line2);min-height:59px}
.dv-table>.dv-tr--head{min-height:0;padding:11px 19px;background:var(--panel2);border-bottom:1px solid var(--line)}
.dv-table>.dv-tr--head>*{font-size:11px;font-weight:550;letter-spacing:.5px;color:var(--ink3)}
.dv-cell-primary{font-size:14px;font-weight:600}
.dv-cell-sub{font-size:12.5px;color:var(--ink3);margin-top:2px}
.dv-cell-mono{font-size:12.5px;color:var(--ink2);font-family:var(--font-mono)}

/* ---------- overlays ---------- */
.dv-scrim{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:4vh 4vw;z-index:70}
.dv-modal{width:100%;max-width:560px;max-height:86dvh;overflow:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-panel);box-shadow:var(--shadow-card);padding:24px 28px}
.dv-modal__title{font-size:22px;font-weight:600;letter-spacing:-.026em}
.dv-modal__foot{display:flex;justify-content:flex-end;gap:11px;border-top:1px solid var(--line);padding-top:20px;margin-top:23px}
.dv-alert{max-width:470px;padding:24px 26px}                       /* destructive confirm */
.dv-alert__icon{width:36px;height:36px;border-radius:9px;background:var(--danger-bg);color:var(--danger);display:flex;align-items:center;justify-content:center}
.dv-popover{border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:var(--shadow-card);padding:7px}
.dv-popover button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 9px;border-radius:var(--r-small);border:none;background:transparent;font-size:13px}
.dv-popover button:hover{background:var(--panel2)}
.dv-spotlight{max-width:640px;border-radius:var(--r-panel);animation:dv-spot .14s ease-out}

/* ---------- settings modal (vertical nav) ---------- */
.dv-settings{max-width:1000px;height:84dvh;padding:0;display:grid;grid-template-columns:212px minmax(0,1fr);overflow:hidden}
.dv-settings__rail{background:var(--sidebar);border-right:1px solid var(--line);padding:16px 10px;display:flex;flex-direction:column;gap:14px}
.dv-settings__rail .dv-nav-item{padding:9px 10px;font-size:13px}

/* ---------- auth layout ---------- */
.dv-auth{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
.dv-auth__pitch{padding:52px 60px;background:var(--panel2);border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:26px}
.dv-auth__form{padding:52px 60px;background:var(--panel);display:flex;flex-direction:column;justify-content:center}
.dv-auth__stack{max-width:430px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.dv-auth__point{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--line2)}
.dv-auth__foot{font-size:12px;color:var(--ink3);line-height:1.65;border-top:1px solid var(--line2);padding-top:14px}
@media (max-width:860px){.dv-auth{grid-template-columns:1fr}.dv-auth__pitch{display:none}.dv-auth__form{padding:32px 22px}}

/* ---------- voice ---------- */
.dv-meter{display:flex;align-items:flex-end;gap:2.5px;height:13px}
.dv-meter span{width:2.5px;height:100%;border-radius:2px;background:var(--live);transform-origin:bottom;animation:dv-lvl .8s ease-in-out infinite}
.dv-mic{width:30px;height:30px;border-radius:var(--r-small);border:none;background:transparent;color:var(--accent-text);display:flex;align-items:center;justify-content:center}
.dv-mic.is-listening{background:var(--live);color:var(--on-fill);animation:dv-ring 1.4s ease-out infinite}

/* ---------- additional components (see DESIGN_GUIDELINES.md §6) ---------- */
.dv-select{appearance:none;padding-right:36px;background-image:none}
.dv-select-wrap{position:relative}.dv-select-wrap>svg{position:absolute;right:12px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--ink3);pointer-events:none}
.dv-switch{width:46px;height:26px;border-radius:var(--r-pill);border:none;padding:3px;display:flex;justify-content:flex-start;background:var(--line);transition:background-color 160ms linear;flex:none}
.dv-switch::after{content:"";width:20px;height:20px;border-radius:50%;background:var(--on-fill);box-shadow:var(--knob-shadow)}
.dv-switch[aria-checked="true"]{background:var(--accent);justify-content:flex-end}
.dv-check input,.dv-radio input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.dv-popover hr{border:none;border-top:1px solid var(--line2);margin:5px 0}
.dv-popover .is-danger{color:var(--danger)}
.dv-combo__list{max-height:320px;overflow-y:auto}
.dv-combo__opt[aria-selected="true"],.dv-combo__opt.is-active{background:var(--panel2)}
.dv-stepper{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dv-step{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink3)}
.dv-step__n{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;background:var(--panel2);color:var(--ink3)}
.dv-step.is-done .dv-step__n{background:var(--ok-bg);color:var(--ok)}
.dv-step.is-now{color:var(--ink);font-weight:600}.dv-step.is-now .dv-step__n{background:var(--accent);color:var(--accent-ink)}
.dv-notice{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--accent-line);border-radius:10px;background:var(--accent-soft);padding:11px 12px;font-size:12.5px;line-height:1.55;color:var(--ink)}
.dv-notice--ok{border-color:var(--ok);background:var(--ok-bg)}
.dv-toast{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--panel);border-radius:10px;padding:11px 14px;font-size:13px;box-shadow:var(--shadow-card);z-index:80}
.dv-toast button{border:none;background:none;color:var(--accent-strong);font-weight:600;padding:0}
[data-theme="dark"] .dv-toast button{color:var(--accent)}
.dv-tooltip{position:absolute;background:var(--ink);color:var(--panel);font-size:12px;padding:5px 8px;border-radius:6px;pointer-events:none;white-space:nowrap;z-index:90}
.dv-empty{text-align:center;padding:34px 20px;display:flex;flex-direction:column;align-items:center;gap:8px}
.dv-empty__icon{width:48px;height:48px;border-radius:var(--r-card);background:var(--accent-soft);color:var(--accent-text);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.dv-empty__icon svg{width:24px;height:24px}
.dv-skel{background:var(--panel2);border-radius:var(--r-badge);animation:dv-pulse 1.2s ease-in-out infinite}
.dv-progress{height:4px;border-radius:var(--r-pill);background:var(--line2);overflow:hidden}.dv-progress>span{display:block;height:100%;background:var(--accent)}
.dv-drop{border:1.5px dashed var(--line);border-radius:10px;background:var(--panel2);padding:20px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--ink2)}
.dv-drop.is-over{border-color:var(--accent);background:var(--accent-soft)}
.dv-tabbar{position:fixed;left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(4,1fr);background:var(--panel);border-top:1px solid var(--line)}
.dv-tabbar button{border:none;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:600;color:var(--ink3);min-height:44px}
.dv-tabbar button svg{width:22px;height:22px}.dv-tabbar button[aria-current="page"]{color:var(--accent-text)}
@keyframes dv-pulse{0%,100%{opacity:1}50%{opacity:.55}}
/* stylelint-disable-next-line declaration-no-important -- reduced motion must win (rule I-10) */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@keyframes dv-lvl{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes dv-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 40%,transparent)}100%{box-shadow:0 0 0 13px transparent}}
@keyframes dv-spot{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
@keyframes dv-dock{from{transform:translateY(-7px) scale(.96);opacity:.45}to{transform:none;opacity:1}}