/* ============================================================
   RuneScribed Design System — tokens
   Pasted from design-system/runescribed-tokens.css. Style with these
   variables; don't hard-code a hex/radius/shadow that a token covers.
   ============================================================ */

/* ---- colors ---- */
:root {
  /* Brand violet (primary action) */
  --violet-50:  #f3effe;
  --violet-100: #e9e1fd;
  --violet-500: #8b5cf6;  /* primary */
  --violet-600: #7c4ff0;  /* primary hover */
  --violet-700: #6d3aea;
  --violet-800: #5b28d6;  /* link active / deep */

  /* Blue-tinted neutrals (text, top bar, dark surfaces) */
  --slate-900: #0d1b2e;
  --slate-850: #16273d;  /* primary ink + top bar */
  --slate-800: #1a2d46;
  --slate-700: #38507a;
  --slate-600: #45597f;
  --slate-500: #6c7fa1;  /* muted text */
  --slate-400: #8c9dbd;
  --slate-300: #b8c3da;  /* input border */
  --slate-200: #d3dcec;  /* card border */
  --slate-150: #e3e9f4;  /* table divider */
  --slate-100: #e9eef8;  /* hover fill */
  --slate-75:  #eff3fb;  /* subtle surface */
  --slate-50:  #ebf1fb;  /* cool neutral surface */

  /* PDF / document viewer backdrop */
  --viewer-bg: #525659;

  /* Semantic status colors */
  --info-fg:   #1d4ed8;
  --info-bg:   #e6effd;
  --warn-fg:   #b25e00;
  --warn-bg:   #fff4e0;
  --warn-line: #f0c98a;
  --success-fg:   #0a6b2e;
  --success-bg:   #e6f6ec;
  --success-line: #a8dcbb;
  --success-fg-alt: #047857;
  --danger-fg:   #a8071a;
  --danger-bg:   #fdecec;
  --danger-line: #f5b5b5;
  --danger-500:  #dc2626;
  --danger-600:  #b91c1c;
  --danger-700:  #991b1b;
  --purple-fg:   #6b21a8;
  --purple-bg:   #f3e8ff;
  --notice-bg:   #fffbe6;
  --notice-line: #d97706;

  /* Field-type accents (PDF editor & signer) */
  --field-text:      #2563eb;  /* blue */
  --field-signature: #7c3aed;  /* violet */
  --field-checkbox:  #0a6b2e;  /* green */
  --field-date:      #b25e00;  /* amber */
  --field-phone:     #0d9488;  /* teal */
  --field-prompt:    #475569;  /* slate */

  /* Semantic aliases */
  --color-primary:        var(--violet-500);
  --color-primary-hover:  var(--violet-600);
  --color-primary-active: var(--violet-800);
  --color-on-primary:     #ffffff;

  --bg-app:      var(--slate-50);
  --bg-public:   var(--slate-50);
  --surface:     #ffffff;
  --surface-card:   #ffffff;
  --surface-subtle: var(--slate-75);
  --surface-pink:   #fdeef3;  /* emphasis box (auth form) */
  --surface-hover:  var(--slate-100);
  --surface-inverse: var(--slate-850);

  --text-strong: var(--slate-850);
  --text-body:   var(--slate-800);
  --text-muted:  var(--slate-500);
  --text-soft:   var(--slate-600);
  --text-on-inverse: #ffffff;
  --text-on-inverse-muted: var(--slate-400);

  --link:        var(--violet-500);
  --link-hover:  var(--violet-800);

  --border:        var(--slate-200);
  --border-input:  var(--slate-300);
  --border-divider: var(--slate-150);
}

/* ---- typography ---- */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  --tracking-wide:  0.04em;
  --tracking-wider: 0.06em;
}

/* ---- spacing & radii ---- */
:root {
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;
  --space-8:  18px;
  --space-9:  20px;
  --space-10: 24px;
  --space-12: 32px;
  --space-14: 40px;

  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   10px;
  --radius-2xl:  12px;
  --radius-pill: 999px;

  --topbar-height:  52px;
  --sidebar-width:  280px;
  --container-max:  880px;
  --auth-max:       360px;
  --public-max:     580px;

  --control-pad-y: 8px;
  --control-pad-x: 14px;
  --tap-min:       44px;
}

/* ---- elevation ---- */
:root {
  --shadow-card:    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-menu:    0 4px 14px rgba(0, 0, 0, 0.12);
  --shadow-popover: 0 6px 22px rgba(15, 23, 42, 0.12);
  --shadow-modal:   0 10px 40px rgba(15, 23, 42, 0.22);
  --shadow-page:    0 2px 8px rgba(0, 0, 0, 0.4);

  --ring-focus:  0 0 0 2px rgba(139, 92, 246, 0.5);
  --ring-select: 0 0 0 2px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.5);

  --scrim: rgba(0, 0, 0, 0.5);
}

/* ---- motion ---- */
:root {
  --ease-standard: ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --duration-fast:  120ms;
  --duration-base:  200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}

/* ============================================================
   App styles — values reference the tokens above.
   ============================================================ */

/* ---- base ---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--bg-app);
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.muted { color: var(--text-muted); font-size: 0.9em; }

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-inverse); color: var(--text-on-inverse);
  padding: 0 20px; height: var(--topbar-height);
}
.topbar .brand-wrap { display: flex; align-items: baseline; gap: 8px; }
.topbar .brand { color: var(--text-on-inverse); font-weight: var(--weight-bold); text-decoration: none; font-size: 1.1em; }
.topbar .version { color: var(--text-on-inverse-muted); font-size: 0.75em; }
.topbar nav a { color: var(--slate-300); margin-left: 16px; text-decoration: none; }
.topbar nav a:hover { color: var(--text-on-inverse); }
.topbar nav .muted { color: var(--text-on-inverse-muted); margin-left: 16px; }

/* ---- layout ---- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 24px 20px; }
.fullscreen { padding: 0; }

/* ---- flash messages ---- */
.flash { padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: 12px; }
.flash-error { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--danger-line); }
.flash-success { background: var(--success-bg); color: var(--success-fg); border: 1px solid var(--success-line); }

/* ---- forms & buttons ---- */
label { display: block; margin-bottom: 12px; font-size: 0.92em; font-weight: var(--weight-semibold); }
input[type=text], input[type=email], input[type=password], input[type=date] {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--border-input); border-radius: var(--radius-md); font-size: 1em; font-weight: var(--weight-regular);
}
/* Focus ring (violet) per the design system. */
input[type=text]:focus, input[type=email]:focus,
input[type=password]:focus, input[type=date]:focus, select:focus {
  outline: none; border-color: var(--color-primary); box-shadow: var(--ring-focus);
}
/* Highlight required fields red once the user tries to submit (or leaves)
   them empty/invalid. :user-invalid fires only after interaction, so boxes
   don't look like errors before the form has been used. */
input:user-invalid {
  border-color: var(--danger-500);
  box-shadow: 0 0 0 1px var(--danger-500);
}
input:user-invalid:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--danger-line);
}
.btn {
  display: inline-block; padding: var(--control-pad-y) var(--control-pad-x); border: 1px solid var(--border-input);
  border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-strong); cursor: pointer;
  font-size: 0.92em; text-decoration: none;
}
.btn:hover { background: var(--surface-hover); }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-danger { background: var(--danger-600); border-color: var(--danger-600); color: #fff; }
.btn-danger:hover { background: var(--danger-700); border-color: var(--danger-700); }
.btn:disabled { opacity: 0.5; cursor: default; }

/* ---- auth ---- */
.auth-card {
  max-width: var(--auth-max); margin: 40px auto; background: var(--surface-card); padding: 28px;
  border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.auth-card h1 { margin-top: 0; color: var(--text-strong); }
/* The sign-in form sits on a soft pink emphasis panel (per the design). */
.auth-card form {
  background: var(--surface-pink); padding: 18px 16px;
  border-radius: var(--radius-lg); margin-bottom: 8px;
}

/* ---- two-step verification ---- */
/* Center the enrollment QR and give the manual key / recovery codes mono. */
.auth-card img { display: block; margin: 14px auto; border-radius: var(--radius-md); }
.auth-card code { font-family: var(--font-mono); }
.recovery-codes {
  list-style: none; padding: 14px 16px; margin: 8px 0 16px;
  background: var(--surface-pink); border-radius: var(--radius-lg);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
}
.recovery-codes code { font-size: var(--text-md); letter-spacing: 0.04em; }

/* ---- dashboard ---- */
.upload-form {
  display: flex; gap: 10px; align-items: center; background: var(--surface-card);
  padding: 16px; border-radius: var(--radius-xl); border: 1px solid var(--border);
  margin-bottom: 20px; box-shadow: var(--shadow-card);
}
.test-template-form {
  display: flex; gap: 12px; align-items: center; margin: -8px 0 20px;
}
.card {
  background: var(--surface-card); padding: 18px; border-radius: var(--radius-xl);
  border: 1px solid var(--border); margin-bottom: 16px; box-shadow: var(--shadow-card);
}
.card-head { display: flex; align-items: center; justify-content: space-between; }
.card-head h2 { margin: 0; font-size: 1.1em; }

/* ---- inline document rename ---- */
.doc-title { display: flex; align-items: center; gap: 6px; }
.rename-btn, .rename-link {
  border: none; background: none; color: var(--link); cursor: pointer;
  font-size: 0.9em; line-height: 1; padding: 0 2px; text-decoration: none;
}
.rename-btn:hover, .rename-link:hover { color: var(--link-hover); }
.rename-input {
  font: inherit; padding: 3px 6px; border: 1px solid var(--border-input);
  border-radius: var(--radius-md); max-width: 100%;
}

.subs, .members { width: 100%; border-collapse: collapse; margin-top: 8px; }
.subs th, .subs td, .members th, .members td {
  text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border-divider);
  font-size: 0.9em; vertical-align: top;
}
.member-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.member-actions .btn { padding: 4px 8px; font-size: 0.85em; }
.status {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 0.8em; text-transform: capitalize;
}
.status-sent { background: var(--info-bg); color: var(--info-fg); }
.status-viewed { background: var(--warn-bg); color: var(--warn-fg); }
.status-completed { background: var(--success-bg); color: var(--success-fg); }
.status-decayed { background: var(--purple-bg); color: var(--purple-fg); }
.status-scheduled { background: var(--info-bg); color: var(--info-fg); }
.status-missed { background: var(--danger-bg); color: var(--danger-fg); }
.status-missed_viewed { background: var(--warn-bg); color: var(--warn-fg); }

/* ---- utility ---- */
/* !important so this beats element-level rules like the global
   `input[type=text]` (specificity 0,1,1 > .hidden's 0,1,0), which otherwise
   forces toggled-hidden text inputs (e.g. the inline rename box) visible. */
.hidden { display: none !important; }

/* ---- document search / sort toolbar ---- */
.doc-toolbar {
  display: flex; gap: 10px; align-items: center; background: var(--surface-card);
  padding: 12px 16px; border-radius: var(--radius-xl); border: 1px solid var(--border);
  margin-bottom: 16px; box-shadow: var(--shadow-card);
}
#doc-search { flex: 1; width: auto; margin-top: 0; }
#doc-sort {
  padding: 8px 10px; border: 1px solid var(--border-input); border-radius: var(--radius-md);
  font-size: 0.95em; background: var(--surface);
}

/* ---- scrollable document list ---- */
.doc-list { max-height: 65vh; overflow-y: auto; padding-right: 4px; }
.tag-group-header {
  font-size: 0.85em; font-weight: var(--weight-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-muted); margin: 14px 2px 6px;
}
.tag-group-header:first-child { margin-top: 0; }

/* ---- tag chips ---- */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--info-bg); color: var(--info-fg); padding: 2px 10px;
  border-radius: var(--radius-2xl); font-size: 0.8em;
}
.tag-chip-edit { padding-right: 4px; }
.tag-remove {
  border: none; background: none; color: var(--info-fg); cursor: pointer;
  font-size: 1.15em; line-height: 1; padding: 0 2px;
}
.tag-remove:hover { color: var(--danger-fg); }

/* ---- editor tag section ---- */
.sidebar-h3 { font-size: 1em; margin: 0 0 4px; }
#tag-input { margin-top: 6px; }
#tag-status { display: inline-block; margin-top: 6px; }

/* ---- retired templates & edit lock ---- */
.retired-badge {
  display: inline-block; margin: 6px 0; padding: 2px 10px;
  background: var(--slate-200); color: var(--text-soft); border-radius: var(--radius-pill);
  font-size: 0.8em; text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.intake-badge {
  display: inline-block; margin: 6px 6px 6px 0; padding: 2px 10px;
  background: var(--violet-100); color: var(--violet-800); border-radius: var(--radius-pill);
  font-size: 0.8em; text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.doc-card[data-retired="1"] { opacity: 0.75; }

/* ---- language-variant chips on the Templates card ---- */
.variant-of {
  font-size: 0.85em; margin: 4px 0 6px;
}
.variant-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0;
}
.variant-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-2xl);
  font-size: 0.8em; line-height: 1.4;
  border: 1px solid transparent;
}
.variant-chip.has {
  background: #d1fae5; color: var(--success-fg-alt); text-decoration: none;
  border-color: #6ee7b7;
}
.variant-chip.has:hover { background: #a7f3d0; }
.variant-chip.missing {
  background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-line);
}
.variant-chip.opted-out {
  background: var(--slate-100); color: var(--text-soft); border-color: var(--slate-200);
}
.variant-chip-label { margin-left: 2px; font-size: 0.95em; }
.variant-chip .variant-chip-opt {
  display: inline; margin: 0;
}
.variant-chip .variant-chip-opt button {
  border: none; background: transparent; color: inherit;
  font-size: 1.05em; line-height: 1; cursor: pointer; padding: 0 2px;
}
.variant-chip .variant-chip-opt button.link-button {
  text-decoration: underline; font-size: 0.9em;
}
.variant-add summary {
  cursor: pointer; user-select: none; outline: none;
}
.variant-add summary::-webkit-details-marker { display: none; }
.variant-add[open] {
  /* Float the open panel out of the row so other chips don't reflow. */
  position: relative;
}
.variant-add-body {
  position: absolute; z-index: 5; top: 110%; left: 0;
  min-width: 260px; padding: 12px 14px;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  display: flex; flex-direction: column; gap: 8px;
  color: var(--text-body); font-size: 0.95em;
}
.variant-add-body input[type="file"] { font-size: 0.9em; }
.variant-add-divider {
  text-align: center; font-size: 0.85em;
  margin: -2px 0;
}

/* ---- sign-language picker page (recipient-facing) ---- */
.lang-picker .lang-picker-pills {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px;
}
.lang-picker-pill {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 14px 22px;
  border: 1px solid var(--border-input); border-radius: var(--radius-2xl);
  background: var(--surface-subtle); color: var(--text-strong); cursor: pointer;
  font-size: 1em; min-width: 110px;
}
.lang-picker-pill:hover {
  background: var(--violet-50); border-color: var(--color-primary);
}
.lang-picker-code {
  font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); font-size: 1.05em;
}
.lang-picker-label { color: var(--text-soft); font-size: 0.9em; }
.lang-picker-fallback { background: var(--slate-75); }
.lang-picker-fallback-note {
  color: var(--warn-fg); font-size: 0.78em; font-style: italic;
}

.locked-banner {
  background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-line);
  border-radius: var(--radius-md); padding: 10px 12px; font-size: 0.9em; margin: 8px 0;
}
.field-box-ro { cursor: default; }

/* ---- per-card overflow (triple-dot) menu ---- */
.card-menu { position: relative; }
.card-menu-btn {
  border: 1px solid var(--border-input); background: var(--surface-card); color: var(--text-soft);
  border-radius: var(--radius-md); cursor: pointer; font-size: 1.1em; line-height: 1;
  padding: 5px 11px;
}
.card-menu-btn:hover { background: var(--surface-hover); }
.card-menu-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.card-menu-btn:disabled:hover { background: var(--surface-card); }
.card-menu-list {
  position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 20;
  min-width: 150px; padding: 4px; background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
}
.card-menu-list a {
  display: block; padding: 8px 10px; border-radius: var(--radius-md);
  color: var(--text-strong); text-decoration: none; font-size: 0.9em;
}
.card-menu-list a:hover { background: var(--surface-hover); }
.card-menu-list form { margin: 0; }
.card-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: none; border-radius: var(--radius-md);
  background: none; color: var(--text-strong); font-size: 0.9em; cursor: pointer;
}
.card-menu-item:hover { background: var(--surface-hover); }

/* ---- profile ---- */
.profile-value {
  font-family: var(--font-mono);
  font-size: 1.05em; margin: 2px 0 0;
}
.profile-hidden { color: var(--text-muted); font-style: italic; }

/* ---- settings sub-navigation ---- */
.subnav {
  display: flex; gap: 4px; margin: 0 0 20px;
  border-bottom: 1px solid var(--border);
}
.subnav a {
  padding: 8px 14px; text-decoration: none; color: var(--text-soft);
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--text-strong); }
.subnav a.active {
  color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--weight-semibold);
}

/* ---- tag management ---- */
.tag-manage-list { list-style: none; padding: 0; margin: 0; }
.tag-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border-divider);
}
.tag-row:last-child { border-bottom: none; }
.tag-row .tag-count { margin-left: auto; }
.tag-row form { margin: 0; }

/* ---- editor / signer shared ---- */
#editor, #signer { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-height)); }
#editor { flex-direction: row; }

.sidebar {
  width: var(--sidebar-width); flex-shrink: 0; background: var(--surface-card); border-right: 1px solid var(--border);
  padding: 18px; overflow-y: auto;
}
.sidebar h2 { font-size: 1.05em; margin-top: 0; word-break: break-word; }
.tool-group { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.tool-btn {
  padding: 9px 12px; border: 1px solid var(--border-input); border-radius: var(--radius-md);
  background: var(--surface-card); cursor: pointer; text-align: left; font-size: 0.92em;
}
.tool-btn:hover { background: var(--surface-hover); }
.tool-btn.active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.tool-toggle {
  display: block; margin: 6px 0 14px;
  font-size: 0.9em; line-height: 1.3;
}
.tool-toggle input { margin-right: 6px; vertical-align: middle; }

.pages-area { flex: 1; overflow: auto; background: var(--viewer-bg); padding: 24px; }
.page {
  position: relative; margin: 0 auto 24px; background: var(--surface);
  box-shadow: var(--shadow-page);
}
.page canvas { display: block; }
.overlay { position: absolute; inset: 0; }

/* ---- editor field boxes ---- */
.field-box {
  position: absolute; border: 2px solid var(--field-text);
  background: rgba(37,99,235,0.12); cursor: move; min-width: 20px; min-height: 16px;
}
.field-box.ftype-signature { border-color: var(--field-signature); background: rgba(124,58,237,0.12); }
.field-box.ftype-checkbox  { border-color: var(--field-checkbox); background: rgba(10,107,46,0.12); }
.field-box.ftype-date      { border-color: var(--field-date); background: rgba(178,94,0,0.12); }
.field-box.ftype-phone     { border-color: var(--field-phone); background: rgba(13,148,136,0.12); }
.field-box.ftype-description { border-color: var(--field-prompt); background: rgba(71,85,105,0.10); }
.fb-label {
  position: absolute; top: -18px; left: 0; font-size: 11px;
  background: var(--surface-inverse); color: var(--text-on-inverse); padding: 1px 5px; border-radius: 3px;
  white-space: nowrap; pointer-events: none;
}
/* Prompt text rendered inside the box, mirroring how the caption is stamped
   on the form (left-aligned). The floating pill is redundant here, so hide
   it for prompts. */
.field-box.ftype-description .fb-label { display: none; }
.fb-prompt-text {
  position: absolute; inset: 0;
  padding: 2px; overflow: hidden; line-height: 1.2; color: var(--text-body);
  text-align: left; white-space: normal; overflow-wrap: break-word;
  pointer-events: none;
}
/* font-size is set by prompt-fit.js to match the stamped PDF; this only
   styles the empty-state hint. */
.fb-prompt-text.is-empty::before { content: "Prompt text\2026"; color: var(--slate-400); }
/* Highlights the Prompt a Shift-dragged field is snapping onto. */
.field-box.snap-target { outline: 2px dashed #f59e0b; outline-offset: 1px; }
.fb-del {
  position: absolute; top: -10px; right: -10px; width: 20px; height: 20px;
  background: var(--danger-fg); color: #fff; border-radius: 50%; text-align: center;
  line-height: 18px; cursor: pointer; font-size: 14px;
}
.fb-resize {
  position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px;
  background: var(--surface); border: 2px solid var(--field-text); border-radius: 2px;
  cursor: nwse-resize;
}

/* ---- signer ---- */
.sign-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-card); border-bottom: 1px solid var(--border); padding: 10px 18px;
  /* Sticky so the bar stays in view while the signer scrolls the PDF, and
     auto-hides on scroll-down (toggled by `body.sign-bar-hidden` from JS). */
  position: sticky; top: 0; z-index: 5;
  transition: transform var(--duration-base) var(--ease-standard);
}
body.sign-bar-hidden .sign-bar { transform: translateY(-100%); }
.sign-bar-actions { display: flex; align-items: center; gap: 12px; }
.btn-back { background: var(--surface-subtle); color: var(--text-body); }
.btn-back:hover { background: var(--surface-hover); }

/* ---- consent modal ---- */
.consent-modal-box {
  max-width: 540px; padding: 24px; display: flex; flex-direction: column;
  gap: 14px;
}
.consent-modal-text {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--notice-bg); border-left: 3px solid var(--notice-line);
  padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 16px; line-height: 1.45;
}
.consent-modal-text input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px;
}
.consent-modal-hint { font-size: 13px; margin: 0; }

/* ---- public-flow "all up to date" empty state ---- */
.public-uptodate {
  font-size: 16px; color: var(--success-fg-alt); padding: 18px 4px; text-align: center;
}

.sign-field { position: absolute; }
.sign-field .sf-input {
  width: 100%; height: 100%; margin: 0; padding: 2px 4px;
  border: 1px solid var(--field-text); background: rgba(255,255,255,0.95); font-size: 13px;
}
.sign-field .sf-checkbox { width: 100%; height: 100%; margin: 0; }
/* A Prompt is static guidance text, not an input: render it as plain text
   sitting on the document with no border or fill, so it never overshadows
   the fields around it. (The editor still outlines its box for placement.) */
.sign-field.sf-description {
  display: block; overflow: hidden;
  padding: 2px; line-height: 1.2;
  color: var(--text-body); background: transparent; border: none;
  pointer-events: none; text-align: left;
  white-space: normal; overflow-wrap: break-word;
}
/* font-size set by prompt-fit.js to match the stamped PDF. */
.sig-slot {
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--field-signature); background: transparent;
  color: var(--field-signature); font-size: 12px; cursor: pointer; overflow: hidden;
}
.sig-slot.signed { border-style: solid; background: var(--surface); }
.sig-slot img { width: 100%; height: 100%; object-fit: contain; }
.sig-slot.locked { cursor: default; }

/* ---- signature modal ---- */
.modal {
  position: fixed; inset: 0; background: var(--scrim);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal.hidden { display: none; }
.modal-box { background: var(--surface-card); padding: 20px; border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); }
.modal-box h3 { margin-top: 0; }
#sig-canvas {
  display: block; width: 100%; max-width: 500px; height: 200px;
  border: 1px solid var(--border-input); border-radius: var(--radius-md); touch-action: none;
}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* ---- electronic-signature consent banner on the signing page ---- */
.sf-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 24px 0; padding: 12px 16px;
  background: var(--notice-bg); border-left: 3px solid var(--notice-line); border-radius: var(--radius-sm);
  color: var(--text-body); font-size: 16px;
}
.sf-consent input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px;
  accent-color: var(--color-primary);
}
.sf-consent-text { line-height: 1.4; flex: 1; }
/* The hint only shows while the signer has not yet ticked consent. */
.sf-consent-hint { display: none; }
body.consent-locked .sf-consent {
  border-left-width: 5px; background: #fff4cc;
}
body.consent-locked .sf-consent-hint {
  display: block; width: 100%; margin-top: 6px;
  font-weight: var(--weight-semibold); color: var(--warn-fg);
}
/* Page overlays go inert + visually muted until the consent box is ticked. */
body.consent-locked .overlay {
  opacity: 0.55; cursor: not-allowed;
}

/* ---- mobile signer: page-by-page pager + lock / pinch-zoom -------------
   All rules gate on body.signer-mobile (added by sign.js via matchMedia) so
   the desktop signer is untouched. Mirrors design-system/ui_kits/public_signing
   MobileSignScreen: a top-right lock toggle (locked = scroll, unlocked =
   pinch-zoom & pan) and a bottom Back / Next page bar. */
.signer-toolbar { display: none; }
body.signer-mobile .signer-toolbar {
  display: flex; justify-content: flex-end;
  position: sticky; top: 0; z-index: 3;
  padding: 8px 10px 0; pointer-events: none;  /* let taps fall through except the button */
}
.lock-btn {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: none; border-radius: var(--radius-pill);
  background: rgba(31, 41, 51, 0.82); color: #fff;
  font-size: 13px; font-weight: var(--weight-semibold); cursor: pointer;
}
.lock-btn .lock-ico { font-size: 15px; line-height: 1; }

/* One page at a time on phones; siblings stay rendered but hidden. The current
   page is the pinch-zoom / pan surface (transform set inline by sign.js). */
body.signer-mobile #pages .page { display: none; margin: 0 auto; }
body.signer-mobile #pages .page.is-current { display: block; transform-origin: 0 0; }
/* Compact top chrome on phones (smaller fonts, shorter bars) so the document
   has room to sit centred in the viewer. Overriding --topbar-height keeps the
   app bar and the #signer height calc in sync. */
body.signer-mobile { --topbar-height: 40px; }
body.signer-mobile .topbar { padding: 0 12px; }
body.signer-mobile .topbar .brand { font-size: 1em; }
body.signer-mobile .sign-bar { padding: 7px 12px; font-size: 13px; }
body.signer-mobile .sign-bar strong { font-size: 14px; }
/* The top "Back" link moves into the bottom bar on phones (shown as "Back" on
   the first page), so hide the duplicate in the sign bar. */
body.signer-mobile .sign-bar #leave-btn { display: none; }
/* Dynamic viewport height keeps the layout tight under mobile browser chrome;
   the bottom padding lets content scroll clear of the fixed nav bar. 8px side
   padding matches sign.js's fit-to-width render so the page sits centred with
   even margins. */
body.signer-mobile #signer { height: calc(100dvh - var(--topbar-height)); }
body.signer-mobile .pages-area { padding: 10px 8px 92px; touch-action: pan-y; }
body.signer-mobile.zoom-unlocked .pages-area { touch-action: none; overflow: hidden; }
/* Consent rides full-width and compact at the very top of the phone signer. */
body.signer-mobile .sf-consent {
  margin: 0; border-left: none; border-radius: 0;
  border-bottom: 1px solid var(--notice-line);
  font-size: 13px; padding: 9px 12px;
}

/* Bottom page navigation bar. */
.mobile-nav { display: none; }
body.signer-mobile .mobile-nav {
  /* Pinned to the bottom of the screen so it never scrolls away with the form. */
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  background: var(--surface-card); border-top: 1px solid var(--border);
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}
.mobile-nav-counter {
  text-align: center; font-size: 12px; color: var(--text-muted); margin-bottom: 7px;
}
.mobile-nav-btns { display: flex; gap: 8px; }
.mobile-nav-btn {
  flex: 1; text-align: center; min-height: var(--tap-min); font-size: 16px;
}
/* On phones the primary submit lives in the bottom bar (Next -> Finish on the
   last page), so the sign-bar copy is redundant. */
body.signer-mobile .sign-bar #finish-btn { display: none; }

.back-confirm-box { max-width: 360px; }
.back-confirm-text { margin: 4px 0 0; }

/* ---- audit-log viewer ---- */
.audit-log-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.audit-log-tabs a {
  padding: 8px 14px; color: var(--text-soft); text-decoration: none;
  border-bottom: 2px solid transparent; font-size: 0.95em;
}
.audit-log-tabs a.active {
  color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--weight-semibold);
}
.audit-log-tabs a:hover { background: var(--surface-subtle); }
.audit-log-filters { display: flex; gap: 16px; align-items: center; margin: 8px 0 14px; }
.audit-log-table code {
  background: var(--surface-subtle); padding: 1px 6px; border-radius: 3px;
  font-size: 0.85em;
}
.audit-log-extra { max-width: 320px; word-break: break-all; }
.audit-log-pager {
  display: flex; gap: 12px; align-items: center;
  margin-top: 14px; justify-content: center;
}

/* ---- SHA-256 hash chip + verify-integrity page ---- */
.hash-chip {
  display: inline-block; margin-top: 4px; padding: 1px 7px;
  background: var(--surface-subtle); color: var(--text-soft); border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.72em; letter-spacing: 0.03em;
  text-decoration: none;
}
a.hash-chip:hover { background: var(--surface-hover); }
.verify-banner {
  padding: 14px 18px; border-radius: var(--radius-lg); margin-bottom: 14px;
  font-weight: var(--weight-semibold);
}
.verify-banner.ok      { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
.verify-banner.tamper  { background: var(--danger-bg); color: var(--danger-700); border: 1px solid var(--danger-line); }
.verify-banner.missing { background: #f5f5f4; color: #57534e; border: 1px solid #d6d3d1; }
.hash-row {
  display: flex; gap: 12px; align-items: baseline; margin: 6px 0;
  flex-wrap: wrap;
}
.hash-row .hash-label { width: 110px; color: var(--text-muted); flex-shrink: 0; }
.hash-row code {
  font-family: var(--font-mono);
  background: var(--surface-subtle); padding: 2px 8px; border-radius: var(--radius-sm);
  word-break: break-all; font-size: 0.9em;
}

/* ---- per-template description shown to signers ---- */
.sign-description {
  margin: 12px 24px 0; padding: 12px 16px;
  /* Pink emphasis strip with a hairline border and a brand-violet accent rule,
     matching design-system/ui_kits/public_signing SignScreen. (The kit's raw
     #4338ca indigo maps to the app's brand token --color-primary.) */
  background: var(--surface-pink);
  border: 1px solid var(--border); border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--text-body); font-size: 16px; white-space: pre-wrap;
}

/* ---- intake-role field markers in the editor ---- */
.field-box.role-name { outline: 2px solid #0ea5e9; }
.field-box.role-dob { outline: 2px solid #16a34a; }

/* ---- selected field highlight ---- */
.field-box.selected { box-shadow: var(--ring-select); }

/* ---- per-field properties panel in the editor sidebar ---- */
.field-props .field-prop-row {
  display: flex; flex-direction: column; gap: 4px; margin: 8px 0;
  font-size: 0.9em;
}
.field-props .field-prop-row input[type="checkbox"] {
  margin-right: 6px;
}
.field-props .field-prop-row > input[type="text"],
.field-props .field-prop-row > input[type="number"] {
  padding: 5px 7px; border: 1px solid var(--border-input); border-radius: 5px;
  font-size: 0.95em;
}
.field-prop-subblock {
  margin-top: 6px; padding: 8px 10px;
  background: var(--surface-subtle); border-radius: var(--radius-md);
}
.field-prop-pair { display: flex; gap: 8px; }
.field-prop-pair > label { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.test-fill-actions { display: flex; gap: 8px; margin: 6px 0 10px; flex-wrap: wrap; }
.test-chip {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  background: var(--warn-bg); color: var(--warn-fg); border-radius: 9px;
  font-size: 0.72em; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  vertical-align: middle;
}
.field-props-summary { margin: 4px 0 8px; }

/* ---- captions next to signer checkboxes / signatures ---- */
.sf-caption {
  position: absolute; font-size: 12px; color: var(--text-body);
  background: rgba(255,255,255,0.85); padding: 1px 4px; border-radius: 3px;
  pointer-events: none; white-space: nowrap;
}
.sf-caption.sf-caption-checkbox { left: 100%; top: 50%; transform: translate(6px, -50%); }
.sf-caption.sf-caption-signature { left: 0; top: 100%; transform: translateY(4px); }

/* ---- intake-form controls on the public-link settings page ---- */
.intake-actions { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.intake-sep { margin: 16px 0 12px; }
.intake-divider {
  text-align: center; margin: 14px 0; font-size: 13px; position: relative;
}
.intake-use-template { margin: 8px 0; }
.intake-use-template label { display: block; font-weight: var(--weight-medium); }
.intake-use-template select {
  display: block; margin: 6px 0 10px; padding: 8px 10px;
  width: 100%; max-width: 360px; font-size: 1em; background: var(--surface);
  border: 1px solid var(--border-input); border-radius: var(--radius-md);
}

/* ---- intake identifier checklist (editor sidebar) ---- */
.intake-setup-note {
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
  padding: 10px 12px; border-radius: var(--radius-md); margin: 10px 0; font-size: 13px;
}
.intake-checklist { list-style: none; padding: 0; margin: 8px 0 4px; }
.intake-checklist li {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--text-muted); margin: 4px 0;
}
.intake-checklist li.is-present { color: #065f46; font-weight: var(--weight-medium); }
.intake-check-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: 12px;
  border: 1px solid var(--border-input); background: var(--surface); color: transparent;
  flex-shrink: 0;
}
.intake-check-mark::before { content: "\2713"; }
.intake-checklist li.is-present .intake-check-mark {
  border-color: #10b981; background: #10b981; color: #fff;
}
.intake-toggle {
  display: block; margin: 12px 0 6px;
  padding: 10px 12px;
  background: var(--surface-subtle); border-radius: var(--radius-md);
  font-size: 0.92em; line-height: 1.4;
}
.intake-toggle input { margin-right: 8px; vertical-align: middle; }

/* ---- optional-field pill shown above skippable fields while signing ---- */
.sf-optional-tag {
  position: absolute; top: -16px; left: 0;
  font-size: 10px; font-weight: var(--weight-medium);
  background: #facc15; color: var(--text-body);
  padding: 1px 6px; border-radius: 3px;
  white-space: nowrap; pointer-events: none;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}

/* ---- public homepage (per-team QR target, unauthenticated) ---- */
.public-body {
  background: var(--bg-public); min-height: 100vh; margin: 0;
  /* Center the sign-in content, biased a little above true center: the larger
     bottom padding (vh, so it scales with the screen) lifts it upward. Uses
     min-height (not height) so taller content simply grows the page and stays
     scrollable instead of being clipped on short screens. */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 0 14vh; box-sizing: border-box;
}
.public-container {
  width: 100%; max-width: var(--public-max); margin: 0 auto; padding: 32px 20px;
  display: flex; flex-direction: column; gap: 18px; box-sizing: border-box;
}
.public-header {
  font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--text-strong); text-align: center;
  padding: 0 8px;
}
.public-footer {
  text-align: center; color: var(--text-muted); font-size: 13px; padding: 8px;
  white-space: pre-wrap;
}
.public-card {
  background: var(--surface-card); border-radius: var(--radius-xl); padding: 22px;
  box-shadow: var(--shadow-card);
}
.public-card h2 { margin-top: 0; }
.public-message { margin-top: 0; }
.public-card label { display: block; margin: 12px 0; font-weight: var(--weight-medium); }
.public-card input[type="date"],
.public-card input[type="text"] {
  display: block; width: 100%; margin-top: 6px; padding: 10px;
  font-size: 16px; border: 1px solid var(--border-input); border-radius: var(--radius-md);
}
.public-actions {
  display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.public-firsttime { margin-top: 22px; padding-top: 14px;
  border-top: 1px solid var(--border); }
.public-form-list { list-style: none; padding: 0; margin: 16px 0; }
.public-form-list li { margin-bottom: 10px; }
.public-form-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; background: var(--surface-subtle); border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
}
.public-form-row:hover { background: var(--violet-50); }
.public-form-name { font-weight: var(--weight-semibold); }

/* ---- Public-link settings tab ---- */
.public-link-row { display: flex; gap: 8px; align-items: center;
  margin: 10px 0; }
.public-link-row input { flex: 1; padding: 8px; font-family: var(--font-mono);
  font-size: 13px; border: 1px solid var(--border-input); border-radius: var(--radius-md); }
.public-link-qr { max-width: 220px; height: auto; background: var(--surface);
  padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.lang-list { width: 100%; border-collapse: collapse; margin: 10px 0; }
.lang-list th, .lang-list td { text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--border); }
.lang-list-actions { display: flex; gap: 8px; }
.card-heading-row { display: flex; align-items: center;
  justify-content: space-between; gap: 12px; margin-bottom: 6px;
  flex-wrap: wrap; }
.card-heading-row h2 { margin: 0; }
.lang-select { padding: 6px 10px; font-size: 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border-input); background: var(--surface); }

/* ---- Public welcome-flow language switcher + first-scan picker ---- */
.public-lang-switch { display: flex; gap: 6px; justify-content: center;
  flex-wrap: wrap; margin-bottom: 4px; }
.public-lang-pill {
  display: inline-block; padding: 4px 10px; font-size: 12px;
  font-weight: var(--weight-semibold); letter-spacing: 0.5px; border-radius: var(--radius-pill);
  background: var(--slate-100); color: var(--text-body); text-decoration: none;
}
.public-lang-pill:hover { background: var(--slate-200); }
.public-lang-pill.is-active { background: var(--surface-inverse); color: #fff; }

.public-lang-picker { text-align: center; }
.public-lang-prompt { margin: 6px 0; font-size: 20px; font-weight: var(--weight-semibold);
  color: var(--text-strong); }
.public-lang-prompt-alt { font-size: 16px; font-weight: var(--weight-medium);
  color: var(--text-soft); }
.public-lang-grid { display: grid; gap: 12px; margin-top: 22px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.public-lang-picker-tile {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; min-height: 84px; padding: 14px 10px;
  background: var(--surface-inverse); color: #fff; border-radius: var(--radius-xl);
  text-decoration: none;
}
.public-lang-picker-tile:hover { background: var(--slate-900); }
.public-lang-picker-code { font-size: 22px; font-weight: var(--weight-bold);
  letter-spacing: 1px; }
.public-lang-picker-name { font-size: 14px; opacity: 0.9; }

/* ----------------------------------------------------------------
   Mobile / narrow-screen tweaks for the public intake flow.
   Scoped to <=640px so desktop is unaffected.
   ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .btn, .btn-primary {
    padding: 12px 16px; min-height: var(--tap-min); font-size: 16px;
  }
  .public-lang-pill, .public-lang-pill.is-active {
    padding: 10px 14px; font-size: 14px;
  }
  .modal-box {
    width: calc(100vw - 16px); max-width: 540px; padding: 16px;
    box-sizing: border-box;
  }
  #sig-canvas {
    height: 50vh; max-height: 280px;
  }
  .public-container { padding: 20px 12px; }
  .public-card { padding: 18px; }
  /* Tiny placed fields stay tappable even when the PDF scales down. */
  .sign-field { min-width: 32px; min-height: 32px; }
  /* The signing-page header stacks so "Finish & Submit" gets its own row. */
  .sign-bar {
    flex-direction: column; gap: 8px; align-items: stretch;
  }
  .sign-bar-actions { justify-content: space-between; }
  /* Sign-flow language picker pills stack full-width on phones. */
  .lang-picker-pills { flex-direction: column; }
  .lang-picker-pill { width: 100%; box-sizing: border-box; }
}