@charset "UTF-8";
/* FileButler portal stylesheet. Extracted verbatim from index.html (main block, then Portal Q&A chat block). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Brand palette */
  --charcoal: #2B2B2B;
  --burgundy: #6E2C2C;
  --burgundy-mid: #5a2323;
  --burgundy-dark: #4a1c1c;
  --tan: #CCAB97;
  --tan-light: #ddc4b4;
  --tan-dark: #a8896f;
  --cream: #F7F3EF;
  --cream-mid: #ede6df;

  /* Mapped tokens (used throughout) */
  --navy: #2B2B2B;
  --navy-mid: #3a3a3a;
  --navy-light: #4a4a4a;
  --navy-faint: #F7F3EF;
  --gold: #CCAB97;
  --gold-light: #F7F3EF;
  --gold-dark: #a8896f;
  --white: #ffffff;
  --off: #F7F3EF;
  --border: #e8e0d8;
  --border-dark: #d4c8bc;
  --text: #2B2B2B;
  --text-mid: #4a3f38;
  --text-muted: #8c7d74;
  --text-light: #b8ada6;
  --green: #2d6a3e;
  --green-bg: #e8f2ec;
  --amber: #7a5200;
  --amber-bg: #fdf3e0;
  --blue: #2b4a7a;
  --blue-bg: #eaf0f8;
  --purple: #5b3fa8;
  --purple-bg: #f0ecff;
  --red: #6E2C2C;
  --red-bg: #f5eaea;
  --gray-bg: #f0ebe6;
  --bg: #F7F3EF;
  --burgundy-bg: #f5eaea;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --shadow: 0 1px 4px rgba(43,43,43,0.08);
  --shadow-md: 0 4px 16px rgba(43,43,43,0.14);
  --sidebar-w: 220px;
  --topbar-h: 60px;
  --font: Arial, sans-serif;   /* Round 22: Arial everywhere, no external font service */
  --mono: Arial, sans-serif;   /* Round 22: codes and numbers also use Arial */
  /* iOS safe-area insets */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}
html, body { height: 100%; font-family: var(--font); color: var(--text); background: var(--off); font-size: 16px; letter-spacing: 0.01em; }
button { cursor: pointer; font-family: var(--font); }
input, textarea, select { font-family: var(--font); }
code, pre, kbd, samp { font-family: var(--mono); }   /* Round 22: Arial everywhere, including code-style text */
a { text-decoration: none; color: inherit; }

/* ─── UTILITY ─────────────────────────────────────────── */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.f11 { font-size: 11px; }
.f12 { font-size: 12px; }
.f13 { font-size: 13px; }
.f14 { font-size: 14px; }
.f15 { font-size: 15px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; }
.f22 { font-size: 22px; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.muted { color: var(--text-muted); }
.mid { color: var(--text-mid); }
.gold { color: var(--gold); }
.upper { text-transform: uppercase; letter-spacing: 0.5px; }
.mono { font-family: var(--mono); }

/* ─── BADGES ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 99px; letter-spacing: 0.2px;
}
.badge-submitted { background: #e8edf5; color: #2b4a7a; }

.badge-review     { background: var(--amber-bg); color: var(--amber); }
.badge-completed  { background: var(--green-bg); color: var(--green); }

.badge-pending    { background: var(--red-bg); color: var(--burgundy); }

/* ─── BUTTONS ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius);
  border: 1px solid var(--border-dark); background: var(--white);
  color: var(--text); font-size: 13px; font-weight: 500;
  transition: all 0.15s;
}
.btn:hover { background: var(--off); border-color: #b0bec5; }
.btn-primary { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.btn-primary:hover { background: #3a3a3a; }
.btn-gold { background: var(--burgundy); color: #fff; border-color: var(--burgundy-dark); }
.btn-gold:hover { background: var(--burgundy-mid); }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--off); }
.btn-danger { background: var(--red-bg); color: var(--red); border-color: #e8a09a; }

/* ─── CARDS ───────────────────────────────────────────── */
.card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.card-head {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.card-head-title { font-size: 14px; font-weight: 600; color: var(--charcoal); }
.card-body { padding: 20px; }

/* ─── FORMS ───────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.4px; }
.form-input {
  width: 100%;
  padding: 9px 12px; border-radius: var(--radius);
  border: 1px solid var(--border-dark); background: var(--white);
  font-size: 13px; color: var(--text); outline: none;
  transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--burgundy); box-shadow: 0 0 0 3px rgba(110,44,44,0.10); }
.form-input::placeholder { color: var(--text-light); }
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-credentials-auto-fill-button { display: none !important; }
.pass-eye { color: var(--text-muted); }
select.form-input { cursor: pointer; }
textarea.form-input { resize: vertical; min-height: 80px; }
.carrier-dropdown { position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border-dark);border-top:none;border-radius:0 0 var(--radius) var(--radius);max-height:200px;overflow-y:auto;z-index:100;box-shadow:var(--shadow-md);display:none; }
.carrier-dropdown.open { display:block; }
.carrier-option { padding:8px 12px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--border); }
.carrier-option:hover,.carrier-option.selected { background:var(--cream);color:var(--burgundy); }
.carrier-option .carrier-sub { font-size:10px;color:var(--text-muted);margin-top:2px; }

/* ─── TABLES ──────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  padding: 10px 16px; text-align: left;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--off); border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.data-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.12s; }
.data-table tbody tr:hover { background: #f0e9e3; cursor: pointer; }

/* ─── STAT CARDS ──────────────────────────────────────── */
.stat-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: 18px 20px;
  box-shadow: var(--shadow);
}
.stat-card.clickable {
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.stat-card.clickable:hover {
  border-color: var(--burgundy); box-shadow: 0 4px 14px rgba(110,44,44,0.12);
  transform: translateY(-1px);
}
.stat-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.stat-num { font-size: 30px; font-weight: 700; color: var(--charcoal); line-height: 1; }
.stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 5px; display: flex; align-items: center; gap: 5px; }
.stat-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* ─── MODAL ───────────────────────────────────────────── */
#modal-overlay {
  position: fixed; inset: 0; background: rgba(10,18,40,0.55);
  z-index: 1000; display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
#modal-overlay.open { display: flex; }

/* ─── IMPERSONATION FRAME ─────────────────────────────── */
/* When an admin is viewing as a client, frame the entire client-visible
   area so the top banner and Return-to-Admin button clearly read as an
   admin overlay around the client portal. Pointer-events:none so it never
   blocks interaction; sits just under the banner. The inset glow and the
   ADMIN VIEW badge make the frame obviously admin chrome, not the client's
   own view. */
body.impersonating::after {
  content: '';
  position: fixed;
  inset: 40px 0 0 0;
  border: 3px solid var(--burgundy);
  box-shadow: inset 0 0 0 1px rgba(123,30,30,0.30), inset 0 0 24px rgba(123,30,30,0.18);
  pointer-events: none;
  z-index: 9998;
}
body.impersonating::before {
  content: 'ADMINISTRATOR VIEW';
  position: fixed;
  bottom: 0;
  right: 0;
  background: var(--burgundy);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 3px 10px;
  border-radius: 6px 0 0 0;
  pointer-events: none;
  z-index: 9999;
}
/* The side menu is fixed to the top of the window, so the page's 40px push
   does not move it; start it under the banner instead. */
body.impersonating .sidebar { top: 40px; height: calc(100vh - 40px); }
body.impersonating #app { height: calc(100vh - 40px); }
.modal {
  background: var(--white); border-radius: var(--radius-xl);
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  width: 480px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
}
.modal:has(#sig-guide-frame) { width: 760px; }   /* guided signing shows the document */
.modal:has(#nsr-signers) { width: 640px; }   /* Send for Signature: one row per signer (October 18, 2026) */
/* October 15, 2026 (Joanna): document previews are wide enough for a two-column
   signature block. */
.modal:has(#wdoc-preview-frame), .modal:has(#cdoc-preview-frame), .modal:has(#tpl-preview-frame) { width: 920px; }
.modal-head {
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 16px; font-weight: 700; color: var(--navy); }
.modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.modal-close { position: relative; background: none; border: none; width: 40px; height: 40px; padding: 0; border-radius: 6px; font-size: 0; line-height: 0; color: var(--text-mid); cursor: pointer; flex-shrink: 0; }
.modal-close::before, .modal-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 21px; height: 2.6px; background: currentColor; border-radius: 2px; }
.modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-close:hover { background: var(--off); color: var(--charcoal); }

/* ─── TOAST ───────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 2000;
  background: var(--navy); color: #fff; padding: 12px 20px;
  border-radius: var(--radius-lg); font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-md); opacity: 0; transform: translateY(8px);
  transition: all 0.25s; pointer-events: none; max-width: 320px;
}
#toast.show { opacity: 1; transform: translateY(0); pointer-events: none; }
/* pointer-events stays none while shown: a plain toast sits over the
   bottom-right corner where modal primary actions live, and has no interactive
   content, so it must never swallow a click meant for the button underneath.
   A clickable toast is the deliberate exception: it carries its own onclick
   handler, so it takes pointer events back below or that handler never fires. */
#toast.clickable { pointer-events: auto; cursor: pointer; border-bottom: 2px solid rgba(255,255,255,0.4); }
#toast.clickable:hover { filter: brightness(1.15); transform: translateY(-1px); }
#toast.clickable::after { content: ' →'; font-weight: 700; }
#toast.success { background: var(--green); }
#toast.error { background: var(--red); }

/* ─── LOGIN PAGE ──────────────────────────────────────── */
#login-page {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; background: var(--charcoal);
  position: relative; overflow-x: hidden; overflow-y: auto;
}
#login-page::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(110,44,44,0.18) 0%, transparent 60%);
}
.login-box {
  background: var(--white); border-radius: var(--radius-xl);
  padding: 44px 48px; width: 420px; max-width: 95vw;
  position: relative; z-index: 1; box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}
.login-logo {
  text-align: center; margin-bottom: 32px;
}
.login-logo-mark {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--navy); display: flex; align-items: center;
  justify-content: center; margin: 0 auto 12px;
}
.login-logo-mark svg { width: 28px; height: 28px; }
.login-brand { font-size: 22px; font-weight: 700; color: var(--charcoal); letter-spacing: -0.3px; }
.login-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-divider { text-align: center; font-size: 12px; color: var(--text-muted); margin: 4px 0; }
.login-footer { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 20px; }

.login-error { background: var(--red-bg); color: var(--red); font-size: 12px; padding: 8px 12px; border-radius: var(--radius); border: 1px solid #f5b5b0; display: none; }
.login-success { background: var(--green-bg); color: var(--green); font-size: 12px; padding: 8px 12px; border-radius: var(--radius); border: 1px solid #9fd4ae; display: none; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; gap: 0; }
.auth-tab {
  flex: 1; text-align: center; padding: 10px; font-size: 14px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: all 0.15s;
}
.auth-tab:hover { color: var(--navy); }
.auth-tab.active { color: var(--charcoal); border-bottom-color: var(--burgundy); }
.auth-panel { display: none; flex-direction: column; gap: 14px; }
.auth-panel.active { display: flex; }
.pass-strength { height: 4px; border-radius: 99px; background: var(--border); margin-top: 5px; overflow: hidden; }
.pass-strength-fill { height: 100%; border-radius: 99px; width: 0; transition: width 0.3s, background 0.3s; }
.pass-strength-label { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* ─── APP SHELL ───────────────────────────────────────── */
#app { display: none; height: 100vh; overflow: hidden; }
#app.visible { display: flex; }
.sidebar {
  width: var(--sidebar-w); background: var(--navy); color: #ede6df;
  display: flex; flex-direction: column; flex-shrink: 0;
  height: 100vh; position: fixed; left: 0; top: 0; z-index: 100;
}
.sidebar-logo {
  padding: 16px 16px 14px; border-bottom: 1px solid #3a3535;
}
.sidebar-logo-row { display: flex; align-items: center; justify-content: center; }
.sidebar-logomark {
  width: 100%; background: transparent;
  display: flex; align-items: center;
  justify-content: center; padding: 8px 10px;
}
.sidebar-logomark img { width: 100% !important; height: 48px !important; object-fit: contain; object-position: center; display: block; }
/* A dark logo is shown white so it stays visible on the dark menu. */
img.logo-white { filter: brightness(0) invert(1); }
.sidebar-logomark svg { width: 18px; height: 18px; fill: var(--navy); }
.sidebar-brand { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: 0.3px; font-family: var(--font); }
.sidebar-tagline { font-size: 10px; color: #9a8880; margin-top: 2px; letter-spacing: 0.3px; text-transform: uppercase; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-section-label {
  font-size: 10px; font-weight: 600; color: #9a8880; text-transform: uppercase;
  letter-spacing: 0.8px; padding: 10px 20px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; font-size: 13px; color: #b8ada6;
  cursor: pointer; border-left: 3px solid transparent;
  transition: all 0.15s; user-select: none; position: relative;
}
.nav-item:hover { background: #3a3535; color: #e8ddd6; }
.nav-item.active { color: #fff; border-left-color: var(--tan); background: rgba(204,171,151,0.12); }
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
.nav-item.active svg { opacity: 1; }
.nav-badge {
  margin-left: auto; background: var(--tan); color: var(--charcoal);
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px;
}
.sidebar-footer {
  padding: 16px 20px; border-top: 1px solid #3a3535;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.sidebar-firm { font-size: 13px; color: #e8ddd6; font-weight: 600; }
.sidebar-user { font-size: 11px; color: #9a8880; margin-top: 2px; }
.sidebar-logout {
  margin-top: 10px; font-size: 12px; color: #9a8880;
  cursor: pointer; display: flex; align-items: center; gap: 5px;
}
.sidebar-logout:hover { color: #b8ada6; }

.main-area {
  margin-left: var(--sidebar-w); flex: 1;
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}
.topbar {
  height: var(--topbar-h); background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.topbar-left { display: flex; flex-direction: column; }
.topbar-title { font-size: 17px; font-weight: 600; color: var(--charcoal); letter-spacing: 0.2px; }
.topbar-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.notif-bell {
  position: relative; width: 36px; height: 36px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--white); display: flex; align-items: center;
  justify-content: center; cursor: pointer; color: var(--text-mid);
}
.notif-bell:hover { background: var(--off); }
.notif-dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
  background: var(--red); border-radius: 50%; border: 2px solid var(--white);
}
.page-content { flex: 1; overflow-y: auto; overflow-x: auto; padding: 24px 28px; box-sizing: border-box; max-width: 100%; }

/* ─── DASHBOARD PAGE ──────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; margin-top: 20px; }
.full-col { margin-top: 20px; }
.filter-tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.filter-tab {
  font-size: 11px; font-weight: 500; padding: 4px 9px;
  border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; color: var(--text-muted); transition: all 0.12s;
  white-space: nowrap;
}
.filter-tab:hover { background: var(--off); color: var(--text-mid); }
.filter-tab.active {
  background: #ede6df; color: var(--charcoal);
  border-color: rgba(43,43,43,0.15);
}

/* ─── ACTIVITY FEED ───────────────────────────────────── */
.activity-item {
  display: flex; gap: 12px; padding: 12px 20px;
  border-bottom: 1px solid var(--border); align-items: flex-start;
  transition: background 0.15s;
}
.activity-item:last-child { border-bottom: none; }
.activity-item.clickable:hover { background: var(--cream); }
.activity-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.activity-icon svg { width: 13px; height: 13px; }
.activity-text { font-size: 13px; color: var(--text); line-height: 1.45; }
.activity-time { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* ─── DOC PIPS ────────────────────────────────────────── */
.doc-pips { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; }
.doc-pip {
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--border); border: 1px solid var(--border-dark);
}
.doc-pip.filled { background: var(--navy); border-color: var(--navy); }
.doc-pip.last { background: var(--gold); border-color: var(--gold-dark); }

/* ─── UPLOAD PAGE ─────────────────────────────────────── */
.upload-grid { display: flex; flex-direction: column; gap: 8px; }
.upload-item {
  border: 1px solid var(--border-dark); border-radius: var(--radius);
  padding: 12px 16px; cursor: pointer; transition: all 0.15s;
  background: var(--white); position: relative;
  display: flex; align-items: center; gap: 14px;
}
.upload-item:hover { border-color: var(--burgundy); background: var(--cream); }
.upload-item.has-file { border-color: var(--green); background: var(--green-bg); }
.upload-item.required-missing { border-color: #e8a09a; }
.upload-icon { font-size: 18px; flex-shrink: 0; }
.upload-item-title { font-size: 13px; font-weight: 600; color: var(--charcoal); }
.upload-item-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.upload-check {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); display: none; flex-shrink: 0;
  align-items: center; justify-content: center;
}
.upload-check svg { width: 12px; height: 12px; stroke: #fff; }
.upload-item.has-file .upload-check { display: flex; }
.upload-filename { font-size: 11px; font-weight: 600; margin-top: 1px; }

/* ─── FOLDER PROGRESS TIMELINE ────────────────────────── */
.timeline-step {
  flex: 1; text-align: center; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px; position: relative; padding-top: 24px;
}
.timeline-step::before {
  content: ''; position: absolute; top: 8px; left: 50%; right: -50%;
  height: 2px; background: var(--border);
}
.timeline-step:last-child::before { display: none; }
.timeline-step.done::before { background: var(--green); }
.timeline-dot {
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--border); border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--border);
  z-index: 1;
}
.timeline-step.done .timeline-dot { background: var(--green); box-shadow: 0 0 0 2px var(--green-bg); }
.timeline-step.current .timeline-dot { background: var(--gold); box-shadow: 0 0 0 2px var(--gold-light); }
.timeline-step.done .timeline-dot::after {
  content: '\2713'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%); font-size: 8px; color: #fff; font-weight: 700;
}
.timeline-label { color: var(--text-muted); }
.timeline-step.done .timeline-label { color: var(--green); }
.timeline-step.current .timeline-label { color: var(--amber); }

/* ─── CLAIM DETAIL PAGE ───────────────────────────────── */
/* Request File Detail: the right column (Documents Uploaded, Reminders) gets
   half of the width instead of a fixed 300 pixels, so document
   names and buttons are no longer squeezed while the center column sat half
   empty (Joanna, October 18, 2026). It never drops below the old 300 pixels. */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); gap: 20px; }
.detail-meta-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.detail-meta-item { display: flex; flex-direction: column; gap: 3px; }
.detail-meta-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.detail-meta-val { font-size: 14px; color: var(--charcoal); font-weight: 500; }
.notes-list { display: flex; flex-direction: column; gap: 10px; }
.note-item {
  background: var(--off); border-radius: var(--radius);
  padding: 12px 14px; border: 1px solid var(--border);
  position: relative;
}
.note-item.note-staff-only { background: #fdf8f0; border-color: #e8d8b8; }
.note-item.note-client-visible { background: #f0f7f4; border-color: #b2d8c4; }
.note-author { font-size: 12px; font-weight: 600; color: var(--navy); }
.note-time { font-size: 11px; color: var(--text-muted); margin-left: 8px; }
.note-text { font-size: 13px; color: var(--text-mid); margin-top: 5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.note-badge { font-size: 10px; font-weight: 600; border-radius: 99px; padding: 1px 7px; float: right; margin-left: 8px; }
.note-badge-staff  { background: #fef3cd; color: #7a5200; }
.note-badge-client { background: #d4edda; color: #1a5e35; }
.note-visibility-toggle { display: flex; gap: 6px; margin-bottom: 8px; }
.note-vis-btn { font-size: 11px; padding: 3px 10px; border-radius: 99px; cursor: pointer; border: 1px solid var(--border); background: var(--off); color: var(--text-muted); transition: background .15s, color .15s; }
.note-vis-btn.active-staff  { background: #fef3cd; color: #7a5200; border-color: #d4a800; }
.note-vis-btn.active-client { background: #d4edda; color: #1a5e35; border-color: #5aab7e; }
/* Round 26: private notes (only the writer sees them) */
.note-vis-btn.active-private { background: #ece6f7; color: #4b3a78; border-color: #9d8ac9; }
.note-item.note-private { background: #f6f3fb; border-color: #d8cfee; }
.note-badge-private { background: #ece6f7; color: #4b3a78; }
.add-note { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.add-note-row { display: flex; gap: 8px; }
.checklist-items { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; }
.check-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; cursor: pointer; padding: 6px 8px;
  border-radius: var(--radius); transition: background 0.12s;
}
.check-row:hover { background: var(--off); }
.check-box {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--border-dark); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.check-box.checked { background: var(--navy); border-color: var(--navy); }
.check-box.checked::after { content: '\2713'; color: #fff; font-size: 10px; font-weight: 700; }
.check-label { flex: 1; }
.check-label.done { color: var(--text-muted); text-decoration: line-through; }

/* ─── MESSAGES PAGE ───────────────────────────────────── */
.messages-shell { display: grid; grid-template-columns: 360px 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); height: calc(100vh - 130px); min-height: 500px; }
.msg-thread-list { border-right: 1px solid var(--border); overflow-y: auto; }
.msg-thread-item {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.12s;
}
.msg-thread-item:hover { background: var(--off); }
.msg-thread-item.active { background: #f0e9e3; border-left: 3px solid var(--burgundy); }
.msg-thread-name { font-size: 13px; font-weight: 600; color: var(--charcoal); }
.msg-thread-preview { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-thread-time { font-size: 11px; color: var(--text-muted); }
.msg-panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.msg-panel-head { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.msg-panel-title { font-size: 14px; font-weight: 700; color: var(--charcoal); }
.msg-panel-sub { font-size: 12px; color: var(--text-muted); }
.msg-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; min-height: 200px; max-height: calc(100vh - 300px); }
.msg-bubble {
  max-width: 72%; padding: 9px 13px; border-radius: 12px;
  font-size: 13px; line-height: 1.55; word-break: break-word;
  white-space: pre-wrap;
}
.msg-bubble.incoming { background: var(--off); border: 1px solid var(--border); border-radius: 2px 12px 12px 12px; color: var(--text); }
.msg-bubble.outgoing { background: var(--burgundy); color: #fff; border-radius: 12px 2px 12px 12px; }
.msg-row { display: flex; flex-direction: column; }
.msg-row.out { align-items: flex-end; }
.msg-row.in  { align-items: flex-start; }
.msg-time { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
.msg-compose { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-shrink: 0; background: var(--white); }
.msg-input { flex: 1; padding: 9px 14px; border-radius: 20px; border: 1px solid var(--border-dark); font-size: 13px; outline: none; }
.msg-input:focus { border-color: var(--navy); }

/* MOBILE: stack the Messages two-column layout so the detail pane is not cut off (max 768px) */
@media (max-width: 768px) {
  .messages-shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .msg-thread-list {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 45vh;
  }
  .msg-panel {
    height: auto;
  }
  .msg-body {
    max-height: none;
    min-height: 160px;
  }
}

/* ─── PROGRESS BAR ────────────────────────────────────── */
.progress-bar { height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.progress-fill { height: 100%; border-radius: 99px; transition: width 0.4s; }

/* ─── EMPTY STATE ─────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.empty-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.4; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--text-mid); margin-bottom: 6px; }
.empty-sub { font-size: 13px; }

/* ─── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #b0bec5; }

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  /* minmax(0, 1fr): a plain 1fr column grows to its widest child, which made
     the folder page wider than a phone screen. */
  .two-col, .detail-grid, .upload-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-meta-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  /* A wide table scrolls sideways on its own instead of pushing the whole
     page off the side of a phone screen. */
  #page-content table { display: block; max-width: 100%; overflow-x: auto; }
}

/* ─── MOBILE SIDEBAR OVERLAY ─────────────────────────── */
#sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 99;
}
#sidebar-overlay.active { display: block; }

/* ─── HAMBURGER BUTTON (mobile only) ─────────────────── */
.hamburger-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  color: var(--charcoal); flex-shrink: 0;
}
.hamburger-btn svg { width: 18px; height: 18px; }

@media (max-width: 768px) {
  /* Show hamburger */
  .hamburger-btn { display: flex; }

  /* Sidebar: off-screen by default, slides in when open */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 100;
  }
  .sidebar.sidebar-open {
    transform: translateX(0);
  }

  /* Main area fills full width on mobile */
  .main-area {
    margin-left: 0 !important;
  }

  /* Topbar adjustments */
  .topbar {
    padding: 0 14px;
  }
  .topbar-right {
    gap: 6px;
  }

  /* Hide less critical topbar buttons on mobile to save space */
  #btn-upload-docs { display: none; }
  .topbar-right > div[style*="width:1px"] { display: none; }
  /* Keep sign out but icon-only */
  .topbar-right .btn[title="Sign out"] { 
    padding: 6px 8px; 
  }
  .topbar-right .btn[title="Sign out"] span { display: none; }

  /* Page content padding */
  .page-content { padding: 16px 14px; }

  /* Stat grid: 2 columns on phone */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Nav items slightly larger tap targets on mobile */
  .nav-item { padding: 13px 20px; font-size: 14px; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar-title { font-size: 15px; }
  #btn-new-claim { display: none; }
}

/* ── PWA: offline banner ──────────────────────────────────────────────────── */
#offline-banner {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #3a3535; color: var(--tan);
  font-size: 13px; text-align: center;
  padding: 10px 16px calc(10px + env(safe-area-inset-top, 0px));
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  font-family: var(--font);
}
#offline-banner.visible { display: block; }

/* ── PWA: install prompt banner ──────────────────────────────────────────── */
#pwa-install-banner {
  display: none;
  /* Must sit BELOW #modal-overlay (z-index 1000). At 9998 this bar rendered on
     top of open dialogs and silently swallowed clicks on their primary action
     button (confirmed: two Generate & Send attempts never fired a POST). */
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  background: var(--charcoal);
  border-top: 2px solid var(--burgundy);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  display: none; align-items: center; gap: 14px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
  font-family: var(--font);
}
#pwa-install-banner.visible { display: flex; }
/* Belt and braces alongside the z-index change: when a dialog is open, the
   bottom banners are removed from the layout entirely so they cannot show
   through the translucent overlay or occupy space over a dialog footer.
   :has() covers modern browsers; the z-index change above covers the rest.
   #add-client-invite-modal is built by showAddClientInviteModal() and removed
   from the document when dismissed, so its presence alone means "open". It is a
   standalone fixed dialog that never sets #modal-overlay.open, which is why it
   needs its own selectors rather than being covered by the first three. */
body:has(#modal-overlay.open) #pwa-install-banner,
body:has(#modal-overlay.open) #pwa-update-banner,
body:has(#modal-overlay.open) .qaw-launcher,
body:has(#modal-overlay.open) .qaw-panel,
body:has(#add-client-invite-modal) #pwa-install-banner,
body:has(#add-client-invite-modal) #pwa-update-banner,
body:has(#add-client-invite-modal) .qaw-launcher,
body:has(#add-client-invite-modal) .qaw-panel { display: none !important; }
#pwa-install-banner .pwa-icon {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
}
#pwa-install-banner .pwa-text { flex: 1; min-width: 0; }
#pwa-install-banner .pwa-text strong { display: block; color: var(--tan); font-size: 14px; }
#pwa-install-banner .pwa-text span { font-size: 12px; color: #9a8880; }
#pwa-install-banner .pwa-btn-install {
  background: var(--burgundy); color: #fff;
  border: none; border-radius: 8px;
  padding: 9px 18px; font-size: 13px;
  font-family: var(--font); cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
#pwa-install-banner .pwa-btn-install:hover { background: var(--burgundy-mid); }
#pwa-install-banner .pwa-btn-dismiss {
  background: none; border: none; color: #9a8880;
  font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0;
}

/* ── PWA: update available toast ─────────────────────────────────────────── */
#pwa-update-banner {
  display: none;
  /* Same reason as #pwa-install-banner above: below the modal overlay. */
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 899;
  background: #1a4a2e; color: #a8ddb8;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  font-size: 13px; font-family: var(--font);
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 2px solid #2d6a3e;
}
#pwa-update-banner.visible { display: flex; }
#pwa-update-banner button {
  background: #2d6a3e; color: #fff; border: none; border-radius: 6px;
  padding: 7px 16px; font-size: 12px; font-family: var(--font); cursor: pointer; white-space: nowrap;
}
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Collapsible <details> rows used in the 2FA setup modal */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary > span:first-child { transform: rotate(90deg); }
/* ── Help Center ────────────────────────────────────────────── */
.hc-wrap { display:flex; gap:0; height:calc(100vh - 200px); min-height:400px; }
.hc-sidebar { width:220px; flex-shrink:0; border-right:1px solid var(--border); background:var(--bg); padding:10px 0; overflow-y:auto; min-height:0; }
.hc-sidebar-label { font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--text-muted); padding:10px 14px 4px; }
.hc-nav-item { display:block; padding:6px 14px; font-size:13px; color:var(--text-mid); cursor:pointer; border-left:3px solid transparent; transition:background .1s,color .1s; }
.hc-nav-item:hover { background:var(--burgundy-bg); color:var(--burgundy); }
.hc-nav-item.hc-active { background:var(--burgundy-bg); color:var(--burgundy); font-weight:600; border-left-color:var(--burgundy); }
.hc-main { flex:1; padding:20px 24px; overflow-y:auto; max-height:calc(100vh - 200px); min-height:0; }
/* October 18, 2026: the search box stays in view while a long guide scrolls. */
.hc-search-row { margin:-20px -24px 16px; padding:20px 24px 10px; display:flex; gap:8px; align-items:center; position:sticky; top:-20px; z-index:2; background:var(--off); }
.hc-search-row input { flex:1; border:1px solid var(--border); border-radius:var(--radius); padding:7px 12px; font-size:13px; font-family:var(--font); color:var(--charcoal); background:#fff; outline:none; }
.hc-search-row input:focus { border-color:var(--burgundy); }
.hc-home-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:20px; }
.hc-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px 12px; text-align:center; cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.hc-card:hover { border-color:var(--burgundy); box-shadow:0 2px 10px rgba(110,44,44,.09); }
.hc-card-icon { font-size:24px; margin-bottom:6px; display:block; }
.hc-card-title { font-size:13px; font-weight:600; color:var(--charcoal); }
.hc-card-desc { font-size:11px; color:var(--text-muted); line-height:1.4; margin-top:3px; }
.hc-contact-cta { background:var(--burgundy-bg); border:1px solid var(--burgundy-mid,#c4768a); border-radius:var(--radius); padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; }
.hc-contact-cta-text { font-size:13px; color:var(--burgundy); }
.hc-contact-cta-text strong { display:block; font-size:14px; }
.hc-contact-cta a { background:var(--burgundy); color:#fff; text-decoration:none; padding:6px 14px; border-radius:6px; font-size:13px; font-weight:600; white-space:nowrap; }
.hc-breadcrumb { font-size:12px; color:var(--text-muted); margin-bottom:10px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.hc-breadcrumb .hc-crumb { cursor:pointer; }
.hc-breadcrumb .hc-crumb:hover { color:var(--burgundy); text-decoration:underline; }
.hc-art-header { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.hc-art-header .hc-art-icon { font-size:28px; flex-shrink:0; }
.hc-art-header h2 { font-size:18px; font-weight:700; color:var(--charcoal); line-height:1.3; }
.hc-art-header .hc-art-section { font-size:12px; color:var(--text-muted); margin-top:2px; }
.hc-body h3 { font-size:14px; font-weight:700; color:var(--burgundy); margin:16px 0 6px; padding-bottom:4px; border-bottom:1px solid var(--burgundy-bg); }
.hc-body h3:first-child { margin-top:0; }
.hc-body p { margin-bottom:8px; font-size:13.5px; line-height:1.6; }
.hc-body ul,.hc-body ol { padding-left:18px; margin-bottom:8px; }
.hc-body li { margin-bottom:4px; font-size:13.5px; }
.hc-body table { width:100%; border-collapse:collapse; margin-bottom:12px; font-size:12.5px; }
.hc-body th { background:var(--burgundy); color:#fff; padding:6px 10px; text-align:left; font-weight:600; }
.hc-body td { padding:6px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
.hc-body tr:nth-child(even) td { background:var(--gray-bg,#f7f5f2); }
.hc-callout { border-radius:6px; padding:9px 12px; margin-bottom:10px; font-size:13px; display:flex; gap:8px; align-items:flex-start; }
.hc-callout-icon { flex-shrink:0; font-size:15px; margin-top:1px; }
.hc-callout.warn { background:#fdedec; color:#7b241c; border-left:3px solid #c0392b; }
.hc-callout.tip  { background:#eaf2fb; color:#1a4f72; border-left:3px solid #1a5276; }
.hc-callout.ok   { background:#eafaf1; color:#1a5631; border-left:3px solid #1e8449; }
.hc-callout.note { background:#fef9e7; color:#7d6608; border-left:3px solid #d4ac0d; }
.hc-steps { margin:8px 0 12px; }
.hc-step { display:flex; gap:10px; margin-bottom:7px; align-items:flex-start; }
.hc-step-num { width:22px; height:22px; border-radius:50%; background:var(--burgundy); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.hc-step-text { font-size:13.5px; line-height:1.5; }
/* The article texts in api/kb_articles.json mark their numbered steps with
   steps / step / step-num / step-text, which had no styles, so each number sat
   on its own line above its step. Same look as the hc-step rules above. */
.hc-body .steps { margin:8px 0 12px; }
.hc-body .step { display:flex; gap:10px; margin-bottom:7px; align-items:flex-start; }
.hc-body .step-num { width:22px; height:22px; border-radius:50%; background:var(--burgundy); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.hc-body .step-text { font-size:13.5px; line-height:1.5; }
/* Prepared questions and answers under each Help Center article */
.hc-faq { margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.hc-faq-title { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin:14px 0 4px; }
.hc-faq-hint { font-size:12px; color:var(--text-muted); margin-bottom:8px; }
.hc-faq-item { border:1px solid var(--border); border-radius:var(--radius); background:#fff; margin-bottom:6px; }
.hc-faq-item > summary { cursor:pointer; padding:9px 12px; font-size:13px; font-weight:600; color:var(--charcoal); list-style:none; }
.hc-faq-item > summary::-webkit-details-marker { display:none; }
.hc-faq-item > summary::before { content:'+'; display:inline-block; width:14px; color:var(--burgundy); font-weight:700; }
.hc-faq-item[open] > summary::before { content:'\2212'; }
.hc-faq-item[open] > summary { color:var(--burgundy); border-bottom:1px solid var(--border); }
.hc-faq-a { padding:9px 12px 11px 26px; font-size:13.5px; line-height:1.6; color:var(--text-mid); }
.hc-faq-hit { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; margin-bottom:6px; cursor:pointer; }
.hc-faq-hit:hover { border-color:var(--burgundy); }
.hc-related { margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.hc-related-title { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.hc-related-link { display:flex; align-items:center; gap:5px; font-size:13px; color:var(--burgundy); cursor:pointer; padding:3px 0; text-decoration:none; }
.hc-related-link:hover { text-decoration:underline; }
.hc-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }
.hc-badge.submitted { background:#fef9e7; color:#9a7d0a; }
.hc-badge.review { background:#ebf5fb; color:#1a5276; }
.hc-badge.pending { background:#fdedec; color:#922b21; }
.hc-badge.completed { background:#eafaf1; color:#1d6a39; }

/* ── Portal Q&A chat (all roles) ── */
.qaw-launcher{position:fixed;right:22px;top:calc(50% - 23px);bottom:auto;z-index:990;width:46px;height:46px;border-radius:50%;background:var(--burgundy);border:none;cursor:grab;display:none;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(43,43,43,.28);transition:box-shadow .15s ease;touch-action:none;user-select:none}
#app.visible ~ .qaw-launcher{display:flex}
.qaw-launcher:hover{box-shadow:0 12px 28px rgba(43,43,43,.34)}
.qaw-launcher:focus-visible{outline:3px solid var(--tan);outline-offset:3px}
.qaw-launcher.qaw-dragging{cursor:grabbing;box-shadow:0 14px 32px rgba(43,43,43,.4)}
.qaw-launcher-emoji{font-size:22px;line-height:1;pointer-events:none}
.qaw-panel{position:fixed;right:22px;bottom:90px;z-index:991;width:min(380px,calc(100vw - 32px));height:min(540px,calc(100vh - 130px));background:var(--cream);border:1px solid var(--border-dark);border-radius:16px;box-shadow:0 24px 60px rgba(43,43,43,.30);display:none;flex-direction:column;overflow:hidden;transform-origin:bottom right}
.qaw-panel.qaw-open{display:flex;animation:qawIn .16s ease-out}
@keyframes qawIn{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media (prefers-reduced-motion: reduce){.qaw-panel.qaw-open{animation:none}.qaw-launcher{transition:none}}
.qaw-head{background:var(--burgundy);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px}
.qaw-head svg{width:22px;height:22px;fill:var(--tan-light);flex:none}
.qaw-head-title{font-size:14px;font-weight:700;line-height:1.15}
.qaw-head-sub{font-size:11px;color:var(--tan-light);font-weight:500}
.qaw-close{position:relative;margin-left:auto;background:none;border:none;width:34px;height:34px;padding:0;border-radius:6px;font-size:0;line-height:0;cursor:pointer;color:#fff}
.qaw-close::before,.qaw-close::after{content:"";position:absolute;left:50%;top:50%;width:17px;height:2.6px;background:currentColor;border-radius:2px}
.qaw-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.qaw-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.qaw-close:hover{background:rgba(255,255,255,.14)}
.qaw-close:focus-visible{outline:2px solid var(--tan)}
.qaw-thread{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.qaw-msg{max-width:88%;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.5;word-wrap:break-word}
.qaw-msg-user{align-self:flex-end;background:var(--burgundy);color:#fff;border-bottom-right-radius:4px}
.qaw-msg-bot{align-self:flex-start;background:#fff;color:var(--text);border:1px solid var(--border);border-bottom-left-radius:4px}
.qaw-msg-bot .qaw-art-title{font-weight:700;color:var(--burgundy);margin-bottom:4px;font-size:13px}
.qaw-open-article{display:inline-block;margin-top:8px;background:none;border:1px solid var(--burgundy);color:var(--burgundy);font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;cursor:pointer}
.qaw-open-article:hover{background:var(--burgundy);color:#fff}
.qaw-sugg{align-self:flex-start;display:flex;flex-direction:column;gap:6px;max-width:88%}
.qaw-sugg button{background:#fff;border:1px solid var(--border);color:var(--text-mid);font-size:12px;text-align:left;padding:7px 10px;border-radius:10px;cursor:pointer}
.qaw-sugg button:hover{border-color:var(--tan-dark);background:var(--cream-mid)}
.qaw-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:#fff}
.qaw-input-row input{flex:1;border:1px solid var(--border-dark);border-radius:10px;padding:10px 12px;font-size:13px;font-family:inherit;color:var(--text);background:var(--cream)}
.qaw-input-row input:focus{outline:2px solid var(--tan-dark);outline-offset:1px}
.qaw-send{background:var(--burgundy);color:#fff;border:none;border-radius:10px;padding:0 16px;font-size:13px;font-weight:600;cursor:pointer}
.qaw-send:hover{background:var(--burgundy-mid)}
.qaw-send:focus-visible{outline:2px solid var(--tan)}

/* ─── DEADLINES (calendar, alarms, cards) ─────────────────── */
.dl-page { max-width: 1100px; display: flex; flex-direction: column; gap: 14px; }
.dl-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dl-heading { font-size: 18px; font-weight: 700; color: var(--charcoal); }
.dl-toolbar-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dl-view-switch { display: inline-flex; gap: 4px; margin: 0 4px; }
.dl-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-items: flex-end; }
.dl-filter { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.dl-filter select { font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); min-width: 150px; max-width: 240px; font-family: inherit; text-transform: none; letter-spacing: 0; }
.dl-filter-check { flex-direction: row; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text-mid); padding-bottom: 6px; }
.dl-body { padding: 0; overflow: hidden; }
.dl-empty { padding: 22px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.dl-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dl-dow { padding: 8px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); background: var(--off); border-bottom: 1px solid var(--border); text-align: center; }
.dl-dow .dl-short { display: none; }
.dl-cell { min-height: 104px; padding: 4px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dl-cell:nth-child(7n) { border-right: none; }
.dl-cell.dl-out { background: #fbf9f7; }
.dl-cell.dl-out .dl-daynum { color: var(--text-light); }
.dl-cell.dl-today { background: var(--gold-light); }
.dl-daynum { align-self: flex-start; background: none; border: none; font-size: 12px; font-weight: 700; color: var(--text-mid); cursor: pointer; padding: 2px 6px; border-radius: 99px; font-family: inherit; }
.dl-today .dl-daynum { background: var(--burgundy); color: #fff; }
.dl-chip { display: block; width: 100%; text-align: left; font-size: 11px; line-height: 1.3; padding: 3px 6px; border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 4px; background: var(--white); color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: inherit; }
.dl-chip:hover { background: var(--off); }
/* Calendar topics: a light topic color with the name in #1f1f1f on top, the
   same in every theme, and a thin border so the palest colors stay visible. */
.dl-topic { display: inline-block; max-width: 100%; vertical-align: middle; background: #e7e5e4; color: #1f1f1f; border: 1px solid rgba(0,0,0,0.15); border-radius: 4px; font-size: 10.5px; font-weight: 600; line-height: 1.35; padding: 0 5px; margin-right: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* In Month and Week the topic sits on its own line above the time and title,
   so neither is cut short in a narrow day. */
.dl-chip .dl-topic { display: block; width: max-content; max-width: 100%; margin: 0 0 2px; }
.dl-row-title .dl-topic { font-size: 11px; }
.dl-swatch { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); visibility: hidden; }
.dl-topic-pick { display: flex; align-items: center; gap: 8px; }
.dl-topic-pick select { flex: 1; min-width: 0; }
.dl-topic-new { margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--off); }
.dl-key-row { position: relative; display: flex; justify-content: flex-end; margin-top: -6px; }
.dl-key-link { background: none; border: none; padding: 2px 0; font-family: inherit; font-size: 12px; color: var(--burgundy); text-decoration: underline; cursor: pointer; }
.dl-key-panel { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 995; width: 280px; max-width: calc(100vw - 32px); max-height: 60vh; overflow-y: auto; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.15); padding: 10px 12px; }
.dl-key-panel.dl-key-down { bottom: auto; top: calc(100% + 6px); }
.dl-key-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.dl-key-list { display: flex; flex-direction: column; gap: 6px; }
.dl-key-list .dl-topic { font-size: 12px; padding: 2px 8px; margin: 0; }
.dl-chip.dl-done, .dl-row.dl-done .dl-row-title { text-decoration: line-through; color: var(--text-muted); }
.dl-flag { display: inline-block; font-weight: 800; color: #b91c1c; margin-right: 3px; }
.dl-more { background: none; border: none; color: var(--burgundy); font-size: 11px; font-weight: 600; cursor: pointer; text-align: left; padding: 0 4px; font-family: inherit; }
.dl-week-wrap { overflow-x: auto; }
.dl-week { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 720px; }
.dl-week th, .dl-week td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 4px; vertical-align: top; font-size: 12px; }
.dl-week thead th { background: var(--off); font-size: 11px; font-weight: 700; color: var(--text-mid); }
.dl-week th.dl-today { background: var(--gold-light); color: var(--burgundy); }
.dl-week .dl-hourcol { width: 64px; font-size: 11px; color: var(--text-muted); font-weight: 600; text-align: right; background: var(--white); }
.dl-week .dl-allday td { background: #fbf9f7; }
.dl-week td .dl-chip { margin-bottom: 3px; }
.dl-group { border-bottom: 1px solid var(--border); }
.dl-group-head { padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); background: var(--off); }
.dl-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-left: 4px solid var(--blue); border-bottom: 1px solid var(--border); }
.dl-row:last-child { border-bottom: none; }
.dl-row-main { flex: 1; min-width: 0; }
.dl-row-title { font-size: 13px; font-weight: 600; color: var(--charcoal); }
.dl-row-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
.dl-row-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.dl-badge { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; border-radius: 99px; padding: 1px 8px; vertical-align: middle; }
.dl-card-list { font-size: 13px; color: var(--text-muted); }
.dl-card-list:not(:has(.dl-row)):not(:has(.dl-empty)) { padding: 14px 16px; }
.dl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dl-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-mid); cursor: pointer; margin: 4px 0; }
.dl-check input { width: 16px; height: 16px; accent-color: var(--burgundy); }
.dl-note { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin: 2px 0 10px; }
.dl-optional { font-weight: 400; color: var(--text-muted); text-transform: none; }
.dl-reminders { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dl-custom-rem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.dl-custom-rem .form-input { width: auto; min-width: 80px; }
.dl-file-search { margin-bottom: 6px; }
.dl-scope { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }
.dl-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dl-changed { background: var(--amber-bg); color: var(--amber); border: 1px solid #f0d9a8; border-radius: var(--radius); padding: 8px 12px; font-size: 12px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dl-view-line { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.dl-view-label { width: 110px; flex-shrink: 0; color: var(--text-muted); font-weight: 600; font-size: 12px; }
.dl-bell { position: relative; font-family: inherit; }
.dl-bell-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #b91c1c; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }
.dl-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 28px; font-size: 13px; color: #fff; }
.dl-banner-red { background: #b91c1c; }
.dl-banner-amber { background: #92400e; }
.dl-banner-text { flex: 1; min-width: 200px; line-height: 1.5; }
.dl-banner-more { opacity: .85; }
.dl-banner-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dl-banner-actions .btn { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.45); }
.dl-banner-actions .btn:hover { background: rgba(255,255,255,.28); }
@media (max-width: 768px) {
  .dl-dow .dl-long { display: none; }
  .dl-dow .dl-short { display: inline; }
  .dl-cell { min-height: 72px; padding: 2px; }
  .dl-chip { font-size: 10px; padding: 2px 4px; }
  .dl-form-grid { grid-template-columns: 1fr; }
  .dl-row { flex-direction: column; align-items: stretch; }
  .dl-row-actions { justify-content: flex-start; }
  .dl-banner { padding: 10px 16px; }
  .dl-filter select { min-width: 0; max-width: 100%; }
}
/* The file page's Deadlines card can sit in a narrow column: stack each row. */
.dl-compact .dl-row { flex-direction: column; align-items: stretch; gap: 6px; }
.dl-compact .dl-row-actions { justify-content: flex-start; }
.dl-custom-rem .dl-note { margin: 0; }

/* ── Document tree (Master Plan, Batch 13) ─────────────────────────────── */
.dt-caret { flex-shrink:0; width:20px; height:20px; border:none; background:none; cursor:pointer; color:var(--text-muted); font-size:12px; line-height:20px; padding:0; border-radius:4px; }
.dt-caret:hover { background:var(--cream); color:var(--charcoal); }
.check-row > .dt-caret { width:30px; height:28px; font-size:17px; line-height:26px; border:1px solid var(--border); background:#fff; color:var(--charcoal); border-radius:6px; }
.check-row > .dt-caret:hover { background:var(--cream); border-color:var(--tan); }
.dt-count { flex-shrink:0; font-size:10px; font-weight:700; color:var(--text-mid); background:var(--cream); border:1px solid var(--border); border-radius:99px; padding:0 6px; line-height:16px; }
.dt-count:empty { display:none; }
.dt-kids { margin:0 0 6px 10px; border-left:2px solid var(--border); padding:2px 0 4px 6px; }
.dt-box { margin:0; }
.dt-line { display:flex; align-items:center; gap:6px; padding-top:3px; padding-bottom:3px; font-size:12px; border-radius:6px; }
.dt-line:hover { background:var(--off); }
.dt-title { cursor:pointer; font-weight:600; color:var(--charcoal); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.dt-tag { font-size:10px; color:var(--text-muted); font-style:italic; white-space:nowrap; }
.dt-private-tag { font-size:11px; color:#8a3b2e; font-weight:600; white-space:nowrap; }
.dt-client-tag { font-size:11px; color:#2f6b3a; font-weight:600; white-space:nowrap; }
.dt-acts { display:flex; flex-wrap:wrap; gap:4px; padding-top:2px; padding-bottom:4px; }
.dt-act { border:1px solid var(--border); background:#fff; color:var(--charcoal); font-size:10px; font-family:var(--font); border-radius:99px; padding:2px 8px; cursor:pointer; white-space:nowrap; }
.dt-act:hover { background:var(--cream); }
.dt-act-danger { color:var(--burgundy); }
.dt-file { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-top:3px; padding-bottom:3px; font-size:12px; }
.dt-file[draggable="true"] { cursor:grab; }
.dt-file-name { color:var(--burgundy); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; max-width:100%; }
.dt-file-name:hover { text-decoration:underline; }
.dt-move { font-size:10px; font-family:var(--font); padding:1px 4px; border:1px solid var(--border); border-radius:6px; background:#fff; max-width:160px; }
.dt-empty { font-size:11px; color:var(--text-muted); font-style:italic; padding-top:2px; padding-bottom:4px; }
.dt-unsorted-box { margin:0 0 10px; padding:8px 10px; border:1px dashed var(--tan); border-radius:var(--radius); background:var(--off); }
.dt-section-head { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-muted); margin:2px 0 4px; }
.dt-hint { font-size:11px; color:var(--text-muted); margin-bottom:4px; }
@media (max-width: 700px) { .dt-move { max-width:120px; } .dt-kids { margin-left:4px; } }
.dt-more { flex-shrink:0; margin-left:auto; border:none; background:none; cursor:pointer; color:var(--text-muted); font-size:14px; line-height:16px; padding:0 4px; border-radius:4px; }
.dt-more:hover { background:var(--cream); color:var(--charcoal); }
.dt-file { flex-wrap:nowrap; }
.dt-file-name { flex:1; }
/* Full document names (Joanna, October 18, 2026): a name in a folder or
   subfolder wraps onto a second line instead of being cut off with an
   ellipsis, so the whole name is always readable. */
.dt-file { align-items:flex-start; }
.dt-file-name { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; line-height:1.35; }
.dt-file-acts { display:flex; gap:4px; align-items:center; flex-basis:100%; padding-left:18px; box-sizing:border-box; min-width:0; flex-wrap:wrap; }
.dt-file, .dt-line, .dt-kids, .dt-unsorted-box { box-sizing:border-box; max-width:100%; min-width:0; }
.dt-move { min-width:0; }
.dt-file:has(.dt-file-acts) { flex-wrap:wrap; }
.dt-where { font-size:11px; color:var(--text-mid); margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dt-where:empty { display:none; }
.dt-where-none { color:var(--text-muted); font-style:italic; }
/* Create Subfolder (October 2026): on each checklist row, on each subfolder
   line, and the Where choice in its window. */
.dt-create-link { display:inline-block; margin-top:3px; border:1px solid var(--border); background:#fff; color:var(--burgundy); font-size:10px; font-weight:600; font-family:var(--font); border-radius:99px; padding:1px 8px; cursor:pointer; white-space:nowrap; }
.dt-create-link:hover { background:var(--cream); }
.check-row .dt-create-link { font-size:11px; padding:2px 10px; }
.dt-plus { flex-shrink:0; border:1px solid var(--border); background:#fff; cursor:pointer; color:var(--burgundy); font-size:12px; font-weight:700; line-height:14px; width:18px; height:18px; padding:0; border-radius:4px; }
.dt-plus:hover { background:var(--cream); }
.dt-line .dt-title { flex:1 1 auto; white-space:normal; overflow-wrap:anywhere; }
.dt-title .dt-tag { display:inline-block; font-weight:400; }
.dt-line .dt-plus { margin-left:auto; }
.dt-line .dt-plus + .dt-more { margin-left:0; }
.dt-tag-every { font-style:normal; color:var(--text-mid); background:var(--off); border:1px solid var(--border); border-radius:99px; padding:0 6px; }
.dt-scope { display:flex; align-items:center; gap:8px; font-size:13px; padding:5px 0; cursor:pointer; }
.dt-scope input { margin:0; }
.sf-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:4px 0; border-bottom:1px solid var(--border); font-size:13px; }
.sf-row:last-child { border-bottom:none; }
.sf-name { font-weight:600; color:var(--charcoal); flex:1; min-width:120px; overflow-wrap:anywhere; }

/* ── Template editor (full screen, in the portal) ─────────────────────────
   Sits below #modal-overlay (1000) so its confirmations show on top, and
   above the page, sidebar and Q&A button. */
body.tpe-open { overflow: hidden; }
.tpe-root { position: fixed; inset: 0; z-index: 995; background: var(--gray-bg); display: flex; flex-direction: column; min-width: 0; }
.tpe-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--white); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tpe-top .tpe-title { flex: 2 1 220px; min-width: 0; font-weight: 600; }
.tpe-top .tpe-desc { flex: 2 1 180px; min-width: 0; }
.tpe-status { flex: 1 1 140px; min-width: 0; font-size: 12px; color: var(--text-muted); text-align: right; }
.tpe-status-ok { color: var(--green); }
.tpe-status-busy { color: var(--text-mid); }
.tpe-status-dirty { color: var(--amber); }
.tpe-status-err { color: var(--red); font-weight: 600; }
.tpe-tools { display: flex; align-items: center; gap: 4px; padding: 6px 14px; background: var(--cream); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tpe-tools button { background: var(--white); border: 1px solid var(--border-dark); border-radius: 6px; padding: 4px 9px; font-size: 12px; color: var(--charcoal); cursor: pointer; line-height: 1.3; }
.tpe-tools button:hover { background: var(--cream-mid); }
.tpe-tools .tpe-block { width: auto; padding: 4px 8px; font-size: 12px; height: auto; }
.tpe-sep { width: 1px; height: 20px; background: var(--border-dark); margin: 0 4px; }
.tpe-main { flex: 1 1 auto; display: flex; min-height: 0; min-width: 0; }
.tpe-scroll { flex: 1 1 auto; overflow: auto; padding: 24px 16px; min-width: 0; }
.tpe-page { box-sizing: border-box; background: var(--white); width: 100%; max-width: 8.5in; min-height: 11in; margin: 0 auto; padding: 1in; box-shadow: var(--shadow-md); font-family: Arial, sans-serif; font-size: 11pt; line-height: 1.45; color: #111; outline: none; overflow-wrap: break-word; }
.tpe-page p { margin: 0 0 8px; }
.tpe-page h1 { font-size: 16pt; margin: 0 0 10px; }
.tpe-page h2 { font-size: 13pt; margin: 0 0 8px; }
.tpe-page h3 { font-size: 11pt; margin: 0 0 6px; }
.tpe-page ul, .tpe-page ol { margin: 0 0 8px; padding-left: 28px; }
.tpe-page table { border-collapse: collapse; margin: 0 0 8px; max-width: 100%; }
.tpe-page td, .tpe-page th { border: 1px solid #999; padding: 4px 6px; vertical-align: top; }
.tpe-chip { display: inline-block; background: var(--blue-bg); color: var(--blue); border: 1px solid #b9c9e3; border-radius: 4px; padding: 0 5px; margin: 0 1px; font-size: 0.92em; line-height: 1.4; cursor: grab; user-select: none; white-space: nowrap; }
.tpe-chip-unknown { background: var(--red-bg); color: var(--red); border-color: #dcb7b7; }
.tpe-chip-sel { outline: 2px solid var(--blue); outline-offset: 1px; }
.tpe-side { flex: 0 0 300px; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--white); border-left: 1px solid var(--border); min-height: 0; box-sizing: border-box; }
.tpe-side-head { font-weight: 700; font-size: 13px; color: var(--charcoal); }
.tpe-side-help { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.tpe-fields { flex: 1 1 auto; overflow: auto; min-height: 0; }
.tpe-grp { margin-bottom: 10px; }
.tpe-grp-name { font-size: 11px; font-weight: 700; color: var(--text-mid); text-transform: uppercase; letter-spacing: .04em; margin: 4px 0; }
.tpe-field { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; margin-bottom: 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--cream); cursor: grab; font-size: 12px; }
.tpe-field:hover { border-color: var(--tan-dark); background: var(--white); }
.tpe-field code { font-size: 10px; color: var(--text-muted); background: none; padding: 0; overflow-wrap: anywhere; }
.tpe-empty { font-size: 12px; color: var(--text-muted); padding: 8px 2px; }
.tpe-side-note { flex: 0 0 auto; font-size: 11px; line-height: 1.5; color: var(--text-mid); background: var(--cream); border: 1px solid var(--border); border-left: 3px solid var(--tan-dark); border-radius: 6px; padding: 8px 10px; }
.tpe-side-note strong { color: var(--charcoal); }
.tpe-scroll { position: relative; }
.tpe-page img.tpe-img { max-width: 100%; height: auto; vertical-align: bottom; cursor: pointer; }
.tpe-page img.tpe-img-sel { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.tpe-imgbar { position: absolute; display: none; gap: 4px; padding: 5px; background: var(--charcoal); border-radius: 8px; box-shadow: var(--shadow-md); z-index: 2; flex-wrap: wrap; }
.tpe-imgbar button { background: var(--white); border: none; border-radius: 5px; padding: 3px 8px; font-size: 12px; cursor: pointer; color: var(--charcoal); }
.tpe-imgbar button:hover { background: var(--cream-mid); }
.tpe-images { max-height: 30vh; overflow: auto; flex-shrink: 0; }
.tpe-imgitem { display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin-bottom: 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--cream); cursor: grab; font-size: 12px; line-height: 1.35; }
.tpe-imgitem:hover { border-color: var(--tan-dark); background: var(--white); }
.tpe-imgitem img { width: 64px; height: 32px; object-fit: contain; background: var(--white); border: 1px solid var(--border); border-radius: 4px; flex-shrink: 0; }
.tpe-imgitem em { color: var(--text-muted); font-style: normal; font-size: 11px; }

/* Logos and Signatures: before and after preview in the Add and Replace window. */
.dim-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dim-cap { font-size: 11px; font-weight: 600; color: var(--text-mid); margin-bottom: 4px; }
.dim-box { height: 150px; border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--white); }
.dim-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dim-box span { font-size: 11px; color: var(--text-muted); padding: 8px; text-align: center; }
.dim-checker { background-color: #fff; background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
@media (max-width: 520px) { .dim-preview { grid-template-columns: 1fr; } }

/* Word mode: an uploaded Word template shown as the Word document itself.
   The server gives every paragraph and run its own inline style from the
   Word file; these rules only frame the page and the kept pieces. */
.tpe-word .tpe-html-only { display: none !important; }
.tpe-word-note { display: none; font-size: 11px; color: var(--text-muted); margin-left: 6px; }
.tpe-word .tpe-word-note { display: inline; }
.tpe-word-only { display: none !important; }
.tpe-word .tpe-word-only { display: inline-block !important; }
.tpe-page.dw-doc { color: #000; line-height: normal; min-height: 11in; }
.dw-doc p { margin: 0; }
.dw-doc .dw-part { outline: none; white-space: pre-wrap; overflow-wrap: break-word; min-height: 1.2em; }
.dw-doc .dw-body { min-height: 6in; }
.dw-doc .dw-hdr { border-bottom: 1px dashed #c9c9c9; padding-bottom: 6px; margin-bottom: var(--dw-body-top, 24px); }
.dw-doc .dw-ftr { border-top: 1px dashed #c9c9c9; padding-top: 6px; }
.dw-doc .dw-label { font: 600 10px Arial, sans-serif; color: #98a2ad; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 2px; user-select: none; }
.dw-doc .dw-body + .dw-label { margin-top: 28px; }
.dw-doc .dw-tbl { border-collapse: collapse; margin: 0; }
.dw-doc td, .dw-doc th { border: none; padding: 0 7px; vertical-align: top; }
.dw-doc .dw-tab { display: inline-block; width: 48px; text-indent: 0; }
.dw-doc .dw-num { display: inline-block; text-indent: 0; padding-right: 4px; box-sizing: border-box; }
.dw-doc .dw-field, .dw-doc .dw-shape { background: #eef2f7; border-radius: 3px; padding: 0 2px; }
.dw-doc .dw-pagebreak { display: block; border-top: 1px dashed #9aa; color: #9aa; font: 10px Arial, sans-serif; text-align: center; margin: 10px 0; text-indent: 0; }
.dw-doc .dw-locked { background: #f5f6f7; outline: 1px dashed #c3c8ce; cursor: not-allowed; margin: 2px 0; padding: 2px 4px; white-space: pre-wrap; }
.dw-doc .dw-note { color: #888; font-size: 9px; }
.dw-doc img.dw-img { max-width: 100%; height: auto; }
.dw-doc .dw-link { cursor: text; }
@media (max-width: 900px) {
  .tpe-main { flex-direction: column; }
  .tpe-side { flex: 0 0 34vh; border-left: none; border-top: 1px solid var(--border); }
  .tpe-page { padding: 0.5in; min-height: 60vh; }
  .tpe-scroll { padding: 12px 8px; }
  .tpe-status { flex-basis: 100%; text-align: left; order: 5; }
}

/* Recycle Bin sections fold (October 12, 2026): click a heading to open or close it. */
.rb-head { cursor: pointer; user-select: none; }
.rb-head:hover { background: var(--cream); }
.rb-head .rb-caret { font-size: 12px; color: var(--text-muted); transition: transform .15s; }
.rb-closed > .rb-head .rb-caret { transform: rotate(-90deg); }
.rb-closed > .rb-head { border-bottom: none; }
.rb-closed > .rb-body { display: none; }

/* Settings sections fold (October 13, 2026): every card starts closed, click its heading to open or close it. Same pattern as the Recycle Bin. */
.sf-head { cursor: pointer; user-select: none; }
.sf-head:hover { background: var(--cream); }
.sf-head .sf-caret { display: inline-block; margin-left: 8px; font-size: 12px; color: var(--text-muted); transition: transform .15s; }
.sf-closed > .sf-head .sf-caret { transform: rotate(-90deg); }
.sf-closed > .sf-head { border-bottom: none; }
/* !important: many Settings card bodies set display:flex in their own style attribute, which would otherwise win. */
.sf-closed > :not(.sf-head) { display: none !important; }

/* October 16, 2026 (Joanna): file row buttons readable at any zoom. */
.fb-file-acts .btn, .fb-file-acts a.btn { font-size: 12px !important; padding: 5px 10px !important; }
.dt-where .dt-act { font-size: 12px; }

/* October 16, 2026 (Joanna): a document's signature status, on the document. */
.fb-sig-status { margin-top: 6px; padding: 7px 10px; border-radius: var(--radius); font-size: 12px; font-weight: 600; line-height: 1.5; }
.fb-sig-status.fb-sig-open { background: #fff4c2; border: 1px solid #e6c65c; color: #5c4a00; }
.fb-sig-status.fb-sig-done { background: var(--green-bg); border: 1px solid #bfdcc4; color: var(--green); }
.fb-sig-status.fb-sig-off  { background: var(--cream); border: 1px solid var(--border); color: var(--text-muted); }
.fb-sig-status .btn { font-size: 12px !important; padding: 4px 10px !important; }

/* October 17, 2026: while an emailed link's page loads, keep the sign-in
   screen hidden so it does not flash first (link-landing.js adds the class,
   app.js removes it once the link's page is showing). */
html.fb-link-landing #login-page { visibility: hidden; }
html.fb-booting #login-page { visibility: hidden; }   /* a signed-in reload: link-landing.js and fbBootDone() in app.js */