@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;

  /* Brand colors by area (October 22, 2026). Each area has a background and
     the lettering on it. These defaults are FileButler's own colors; Settings,
     Brand Colors overrides them (fbApplyBrandColors in app.js). */
  --main-bg: #2B2B2B; --main-fg: #fff; --main-bg-hover: #3a3a3a; --main-tan: #CCAB97; --main-muted: #b3a39b;
  --accent-bg: #6E2C2C; --accent-fg: #fff; --accent-bg-hover: #5a2323; --accent-bg-border: #4a1c1c;
  --menu-bg: #2B2B2B; --menu-text: #ede6df; --menu-fg: #fff; --menu-fg-soft: #e8ddd6; --menu-fg2: #b8ada6;
  --menu-muted: #b3a39b; --menu-dot: #5a4f4b; --menu-line: #3a3535; --menu-hover: #3a3535; --menu-tan: #CCAB97;

  /* 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: #6e615a;   /* October 29, 2026 (finding 1-G3-07): 5.4:1 on the cream background, was 3.6:1 */
  --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(--amber-bg); color: var(--amber); }   /* In Progress (October 24, 2026) */
.badge-awaiting   { background: var(--red-bg); color: var(--burgundy); }  /* Awaiting Documents */
.badge-delivered  { background: var(--green); color: #fff; }               /* Delivered, the last stage */

/* ─── 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(--main-bg); color: var(--main-fg); border-color: var(--main-bg); }
.btn-primary:hover { background: var(--main-bg-hover); }
.btn-gold { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg-border); }
.btn-gold:hover { background: var(--accent-bg-hover); }
.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(--accent-bg);
  color: var(--accent-fg);
  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) */
/* Item 37 (October 21, 2026): the Send for Signature window keeps one size
   while the documents and signer rows load, so no button moves under the
   pointer. The middle scrolls; the title and the buttons stay in place. */
.modal:has(#nsr-signers) { height: min(720px, 90vh); display: flex; flex-direction: column; overflow: hidden; }
.modal:has(#nsr-signers) > .modal-head, .modal:has(#nsr-signers) > .modal-foot { flex: 0 0 auto; }
.modal:has(#nsr-signers) > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* October 29, 2026 (Joanna): Review Quote shows the quote itself, as wide as a
   document preview; the title and the send buttons stay in view while the
   middle scrolls. The quote's email window has room for its attachments. */
.modal:has(#qrv-frame) { width: 920px; height: min(900px, 92vh); display: flex; flex-direction: column; overflow: hidden; }
.modal:has(#qrv-frame) > .modal-head, .modal:has(#qrv-frame) > .modal-foot { flex: 0 0 auto; }
.modal:has(#qrv-frame) > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.modal:has(#qre-to) { width: 640px; }
/* 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; }
/* Item 42 (October 21, 2026): the signed document viewer is as wide as the
   document (a two-column signature block fits; anything wider scrolls inside
   the frame), and the Certificate of Completion is wide enough for every
   Chain of Custody column. */
.modal:has(#sig-doc-frame), .modal:has(#sig-doc-filerame) { width: 920px; }
.modal:has(#sig-cert-body) { width: 820px; }
/* October 21, 2026 (Joanna, item 10): the two-step sign-in setup window keeps
   its title and its Send My Verification Code button in view at any window
   height; only the explanation between them scrolls. */
.modal:has(#setup-error), .modal:has(#setup-confirm-err) { display: flex; flex-direction: column; overflow: hidden; }
.modal:has(#setup-error) > .modal-head, .modal:has(#setup-error) > .modal-foot,
.modal:has(#setup-confirm-err) > .modal-head, .modal:has(#setup-confirm-err) > .modal-foot { flex-shrink: 0; }
.modal:has(#setup-error) > .modal-body, .modal:has(#setup-confirm-err) > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.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(--main-bg); color: var(--main-fg); 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(--menu-bg);
  position: relative; overflow-x: hidden; overflow-y: auto;
}
#login-page::before {
  content: ''; position: absolute; inset: 0;
  background: var(--login-glow, 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(--main-bg); 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(--menu-bg); color: var(--menu-text);
  box-shadow: inset -1px 0 0 var(--menu-edge, transparent);
  display: flex; flex-direction: column; flex-shrink: 0;
  height: 100vh; position: fixed; left: 0; top: 0; z-index: 100;
}
.sidebar-logo {
  padding: 14px 12px 12px; border-bottom: 1px solid var(--menu-line);
}
.sidebar-logo-row { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sidebar-logomark {
  width: 100%; background: transparent;
  display: flex; align-items: center;
  justify-content: center; padding: 0;
}
/* The logo fills the width of the top of the menu, up to 120 pixels tall, shown exactly as uploaded. */
.sidebar-logomark img { width: 100% !important; height: auto !important; max-height: 120px !important; object-fit: contain; display: block; margin: 0 auto; }
.sidebar-logomark svg { width: 18px; height: 18px; fill: var(--navy); }
.sidebar-brand { font-size: 18px; font-weight: 600; color: var(--menu-fg); letter-spacing: 0.3px; font-family: var(--font); }
.sidebar-tagline { font-size: 10px; color: var(--menu-muted); 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: var(--menu-muted); 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: var(--menu-fg2);
  cursor: pointer; border-left: 3px solid transparent;
  transition: all 0.15s; user-select: none; position: relative;
}
.nav-item:hover { background: var(--menu-hover); color: var(--menu-fg-soft); }
.nav-item.active { color: var(--menu-fg); border-left-color: var(--menu-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 var(--menu-line);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.sidebar-firm { font-size: 13px; color: var(--menu-fg-soft); font-weight: 600; }
.sidebar-user { font-size: 11px; color: var(--menu-muted); margin-top: 2px; }
.sidebar-logout {
  margin-top: 10px; font-size: 12px; color: var(--menu-muted);
  cursor: pointer; display: flex; align-items: center; gap: 5px;
}
.sidebar-logout:hover { color: var(--menu-fg2); }

.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(--main-bg); border-color: var(--main-bg); }
.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(--main-bg); border-color: var(--main-bg); }
.check-box.checked::after { content: '\2713'; color: var(--main-fg); 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(--accent-bg); color: var(--accent-fg); 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 ───────────────────────────────────────── */
/* October 29, 2026 (Joanna): FileButler's Subscriptions table is wide. Its
   sideways scroll bar is thick enough to grab, and the Subscriber column stays
   in place while the other columns scroll, so every row shows whose it is. */
/* No scrollbar-width or scrollbar-color here: in Chrome and Edge either one
   overrides the ::-webkit-scrollbar size below with the browser's own bar. */
.fb-wide-scroll { overflow-x: auto; }
.fb-wide-scroll::-webkit-scrollbar { height: 10px; }
.fb-wide-scroll::-webkit-scrollbar-track { background: var(--off); border-radius: 99px; }
.fb-wide-scroll::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 99px; border: 2px solid var(--off); }
.fb-wide-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.fb-sticky-first th:first-child, .fb-sticky-first td.fb-sub-name {
  position: sticky; left: 0; z-index: 2; min-width: 160px; max-width: 220px;
  box-shadow: 1px 0 0 var(--border), 6px 0 8px -6px rgba(0,0,0,.18);
}
.fb-sticky-first th:first-child { background: var(--off); z-index: 3; }
.fb-sticky-first td.fb-sub-name { background: var(--white); }
.fb-sticky-first tbody tr:hover td.fb-sub-name { background: #f0e9e3; }
::-webkit-scrollbar { width: 10px; height: 10px; }   /* October 29, 2026 (Joanna): 10 pixels everywhere, easy to grab */
::-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 (the class, not the title: the title is translated) */
  .topbar-right .btn-signout {
    padding: 6px 8px;
  }
  .topbar-right .btn-signout span { display: none; }
  /* Language button: globe and code only, so the bar is not crowded on a phone */
  .fb-lang-topbar .fb-lang-btn { padding: 5px 6px; gap: 3px; }
  .fb-lang-topbar .fb-lang-caret { display: none; }
}
/* Small phones: the language button is the globe alone, so the page title keeps its room
   (the menu still marks the chosen language, and the button's label names it) */
@media (max-width: 480px) {
  .fb-lang-topbar .fb-lang-code { display: none; }
  .fb-lang-topbar .fb-lang-btn { padding: 6px 7px; }

  /* 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(--main-bg);
  border-top: 2px solid var(--accent-bg);
  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(--main-tan); font-size: 14px; }
#pwa-install-banner .pwa-text span { font-size: 12px; color: var(--main-muted); }
#pwa-install-banner .pwa-btn-install {
  background: var(--accent-bg); color: var(--accent-fg);
  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(--accent-bg-hover); }
#pwa-install-banner .pwa-btn-dismiss {
  background: none; border: none; color: #b3a39b;
  font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0;
  /* October 29, 2026 (E5-01): a target a finger can hit (at least 24 by 24
     pixels; 44 here), not 20 by 20. */
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* October 29, 2026 (E5-01): on a phone the Portal Q&A button sits at the
   bottom right, on top of the banner's close button, so the banner could not
   be closed. While the banner shows, the button moves up above it. */
@media (max-width: 768px) {
  body:has(#pwa-install-banner.visible) .qaw-launcher { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; top: auto !important; }
}

/* ── 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(--accent-bg); color:var(--accent-fg); 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; }
/* October 21, 2026: the Merge Field Guide tables */
.mfg-tools { display:flex; align-items:center; gap:12px; margin:6px 0 10px; }
.mfg-count { font-size:12px; color:var(--text-muted); }
.mfg-group { font-size:13px; font-weight:700; color:var(--charcoal); margin:14px 0 4px; }
.mfg-table { width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:6px; }
.mfg-table th, .mfg-table td { border:1px solid var(--border); padding:5px 8px; text-align:left; vertical-align:top; }
.mfg-table th { background:var(--cream); font-weight:600; }
.mfg-table code { font-size:11px; background:var(--cream); padding:1px 5px; border-radius:3px; }
.mfg-hint { color:var(--text-muted); font-size:11px; }
.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(--accent-bg); color:var(--accent-fg); 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(--accent-bg); color:var(--accent-fg); 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(--accent-bg); color:var(--accent-fg); 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:996;width:46px;height:46px;border-radius:50%;background:var(--accent-bg);color:var(--accent-fg);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:997;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}}
/* October 21, 2026 (Joanna, items 54 and 64): the Portal Q&A button covered
   the View link at the end of table rows and buttons such as "I have read
   this document". On wide screens the page keeps a strip on the right, as
   wide as the button and its margin, that content never enters, so the button
   (still draggable) sits beside the page. On narrow screens, where that strip
   would cost too much width, the button starts in the bottom corner and the
   page gets room at its end to scroll the last row above it. */
@media (min-width: 769px) {
  #app.visible .page-content { padding-right: 84px; }
}
@media (max-width: 768px) {
  .qaw-launcher { top: auto; bottom: 16px; right: 14px; }
  #app.visible .page-content { padding-bottom: 80px; }
}
.qaw-head{background:var(--accent-bg);color:var(--accent-fg);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(--accent-bg);color:var(--accent-fg);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(--accent-bg);color:var(--accent-fg)}
.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(--accent-bg);color:var(--accent-fg);border:none;border-radius:10px;padding:0 16px;font-size:13px;font-weight:600;cursor:pointer}
.qaw-send:hover{background:var(--accent-bg-hover)}
.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-month > .dl-week { display: contents; }
.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(--accent-bg); color: var(--accent-fg); }
.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; }
/* October 26, 2026: a document deep in subfolders, on a narrow window, kept
   its labels ("Uploaded by ...", "Client can view") and its buttons on the
   name's line and squeezed the name to one letter per line. The row now
   wraps: the name keeps at least about ten letters of width (never more than
   the row beside its icon), breaks at spaces and splits only a word too long
   for the line, and the labels and the ... button move under it when they do
   not fit beside it. */
.dt-file { flex-wrap:wrap; }
.dt-file-name { flex:1 1 auto; min-width:min(10em, calc(100% - 24px)); max-width:calc(100% - 24px); overflow-wrap:break-word; }
.dt-file > .dt-tag, .dt-file > .dt-client-tag, .dt-file > .dt-private-tag { white-space:normal; max-width:100%; 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; }
/* October 21, 2026: a filed document out for signature shows its status line
   (with Resend Email and Cancel Request) under its row. */
.dt-file:has(.dt-sig-line) { flex-wrap:wrap; }
.dt-sig-line { flex-basis:100%; padding-left:18px; box-sizing:border-box; min-width:0; }
.dt-sig-line .fb-sig-status { margin-top:2px; font-size:11px; }
.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; }
/* October 20, 2026: a tab in the editor stops every half inch, as in Word. */
.tpe-page { tab-size: 0.5in; }
/* A tab piece: the editor gives it the width that reaches its tab stop. */
.tpe-page .tpe-tab { display: inline-block; white-space: pre; overflow: hidden; vertical-align: baseline; height: 1em; }
.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; overflow-y: auto; 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: 180px; max-height: 48vh; }
/* October 21, 2026: the side panel's drop-down sections */
.tpe-fold { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px 8px; background: var(--white); }
.tpe-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.tpe-fold > summary::-webkit-details-marker { display: none; }
.tpe-fold > summary::before { content: '\25B8'; font-size: 11px; color: var(--text-muted); transition: transform .15s; }
.tpe-fold[open] > summary::before { transform: rotate(90deg); }
.tpe-fold .tpe-side-help { margin: 2px 0 8px; }
.tpe-fold select.form-input, .tpe-fold input.form-input { margin-bottom: 6px; font-size: 12px; padding: 6px 8px; }
.tpe-field-hint { font-weight: 400; color: var(--text-muted); font-size: 11px; }
.tpe-field-from { font-size: 10.5px; color: var(--text-muted); line-height: 1.35; }
.tpe-signer-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.tpe-signer-btns .btn { font-size: 11px; padding: 3px 8px; }
/* October 21, 2026: the welcome note written in the editor */
.wp-ed-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.wp-ed-tools button { background: var(--white); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; font-size: 12px; cursor: pointer; color: var(--charcoal); }
.wp-ed-tools button:hover { background: var(--cream); }
.wp-ed-page.tpe-page { min-height: 220px; max-height: 50vh; overflow: auto; padding: 0.5in; box-shadow: none; border: 1px solid var(--border); border-radius: var(--radius); max-width: none; }
.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(--main-bg); 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 */

/* ── Language button (October 2026, lang.js) ─────────────────────────────────
   A small globe with the language code and a short list: English, Español,
   Deutsch, Français. */
.fb-lang { position: relative; display: inline-flex; flex-direction: column; align-items: flex-end; font-family: var(--font); }
/* A page opened from an emailed or public link (lang.js): its own button, gone once the portal itself is showing. */
.fb-lang-link { position: fixed; top: 12px; right: 12px; z-index: 10000; }
body:has(#app.visible) .fb-lang-link { display: none; }
.fb-lang-btn {
  display: inline-flex; align-items: center; gap: 5px; background: var(--white);
  border: 1px solid var(--border); color: var(--text-mid); cursor: pointer;
  padding: 5px 8px; border-radius: var(--radius-md); font-size: 12px; font-weight: 600;
  font-family: inherit; line-height: 1; letter-spacing: 0.03em;
}
.fb-lang-btn:hover, .fb-lang-btn:focus-visible { border-color: var(--accent-bg); color: var(--accent-bg); outline: none; }
.fb-lang-caret { font-size: 9px; opacity: 0.7; }
.fb-lang-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 1200;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.14); padding: 6px; min-width: 170px;
}
.fb-lang.open .fb-lang-menu { display: block; }
.fb-lang-opt {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 8px 10px; border-radius: var(--radius-md); font-size: 13px; color: var(--charcoal); font-family: inherit;
}
.fb-lang-opt:hover, .fb-lang-opt:focus-visible { background: var(--cream); outline: none; }
.fb-lang-opt.active { font-weight: 700; color: var(--accent-bg); }
.fb-lang-opt.active::before { content: '\2713\00a0'; }
/* On the sign-in screen the control sits above the logo, right-aligned */
.fb-lang-login { display: flex; flex-direction: column; align-items: flex-end; width: 100%; margin: -26px 0 10px; }
@media (max-width: 520px) {
  .fb-lang-login { margin: -16px 0 8px; }
}

/* October 29, 2026 (regression G-06): on a phone the page subtitle wrapped and
   pushed the page title above the top bar. The title and subtitle now keep to
   one line each, cut with an ellipsis, so both stay in view. */
@media (max-width: 768px) {
  .topbar-left { flex: 1 1 auto; min-width: 0; }
  .topbar-left > div:not(.hamburger-btn) { min-width: 0; overflow: hidden; }
  .topbar-right { flex-shrink: 0; }
  /* October 30, 2026 (Joanna): on a phone the top bar shows only the page
     title, in full, wrapping onto a second line when it must; the smaller
     second line is hidden. The bar grows with the title instead of cutting
     it. Tablets and computers are unchanged. */
  .topbar { height: auto; min-height: var(--topbar-h); padding-top: 6px; padding-bottom: 6px; }
  .topbar-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; line-height: 1.25; }
  .topbar-sub { display: none; }
}
/* October 29, 2026 (regression G-07): Sign Documents rows put the buttons
   under the text on a narrow screen instead of squeezing the text. */
@media (max-width: 600px) {
  .sig-row { flex-wrap: wrap; }
  .sig-row > div:first-child { flex: 1 1 100%; }
  .sig-row > .sig-row-actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start !important; }
}
/* October 29, 2026 (regression G-08): the Help Center is one column on a
   phone: the topic list on top (scrolls on its own), the guide below it. */
@media (max-width: 768px) {
  .hc-wrap { flex-direction: column; height: auto; min-height: 0; }
  .hc-sidebar { width: auto; max-height: 220px; border-right: 0; border-bottom: 1px solid var(--border); }
  .hc-main { max-height: none; padding: 16px 14px; }
  .hc-search-row { margin: -16px -14px 14px; padding: 16px 14px 10px; top: -16px; }
  .hc-home-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .hc-card-desc { overflow-wrap: anywhere; }
}
/* October 29, 2026: the FileButler Support address sits inside the sentence,
   so it reads as a link, not as a button over the text. */
.hc-contact-cta .hc-contact-cta-text a { background: none; color: inherit; padding: 0; border-radius: 0; text-decoration: underline; white-space: normal; overflow-wrap: anywhere; }

/* Client Invitations rows: columns on a wide screen, wrapped on a phone (5-D2-08) */
.fb-invite-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.fb-invite-who { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .fb-invite-row { display: flex; flex-wrap: wrap; }
  .fb-invite-who { flex: 1 1 180px; }
}

/* October 30, 2026 (1-A-10): on a phone the Back button is its arrow alone, so the page title beside it keeps its whole words. */
@media (max-width: 480px) {
  #btn-back .btn-back-text { display: none; }
  #btn-back { gap: 0 !important; }
}