/* ═══════════════════════════════════════════════════════════
   AFFLUENCE CAPITAL — CLIENT PORTAL
   portal.css  ·  loaded before theme.css
═══════════════════════════════════════════════════════════ */

:root {
  --navy:   #0D1B2E;
  --mist:   #C4D3E2;
  --paper:  #EEF3F9;
  --panel:  rgba(255,255,255,0.98);
  --ink:    #0D1B2E;
  --muted:  #526073;
  /* Small secondary text. Was #97A0B0 = 2.6:1 on white, under the 4.5:1 floor. */
  --muted-soft: #626E80;
  --brand:  #4E7A97;
  --accent: #698DAA;
  --line:   rgba(13,27,46,0.10);
  --shadow: none;
  --success:#136639;
  --danger: #8C2412;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  min-height: 100dvh;
  background-color: #F8F9F9;
}

:root[data-theme="dark"] html {
  /* Dark mode: match auth page darkest colour so safe areas don't go black */
  background-color: #070F1D;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100dvh;
  color: var(--ink);
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  background: #F8F9F9;
  min-height: 100dvh;
  overflow: hidden;
}

/* ── Portal shell ─────────────────────────────────────────── */
.portal-shell {
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body.portal-initializing .portal-shell {
  opacity: 0;
  pointer-events: none;
}

/* Align the global theme toggle with the signed-in portal title container. */
body:not(.portal-auth-mode) .theme-toggle {
  top: auto;
  bottom: 10px;
  right: 10px;
}

/* ── Shared surface style ────────────────────────────────── */
/* No backdrop-filter — every client-portal section is one of these, and a blur
   makes each a backdrop root the browser re-samples on every scroll frame and
   re-rasterises wholesale at the scroll extremes (the 1–3s full-screen flicker
   on scroll-to-top/bottom). --panel is rgba(255,255,255,0.98) in light mode and
   opaque #0F1D30 in dark, so there was nothing behind it to blur anyway. */
.portal-hero,
.auth-panel,
.content-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
}

/* Sidebar blends with the page — no card border */
.sidebar {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Portal hero ─────────────────────────────────────────── */
.portal-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 24px;
  overflow: hidden;
}

.hero-copy {
  padding: 16px 24px;
  border-right: 1px solid var(--line);
}

.hero-note {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  background: rgba(105,141,170,0.05);
}

.hero-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 12px;
}

/* ── Eyebrow / heading ───────────────────────────────────── */
.eyebrow {
  margin: 0 0 3px;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand);
}

.title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 52px;
  height: auto;
  flex: 0 0 auto;
}

h1, h2, h3 {
  margin: 0;
  font-family: Marcellus, Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--ink);
}

h1 { font-size: 29px; line-height: 1.1; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }

.lede,
.hero-note p,
.panel-head p,
.sidebar-meta,
.status,
.meta {
  color: var(--muted);
  line-height: 1.65;
}

.lede { margin: 10px 0 0; font-size: 13px; }
.meta { margin: 6px 0 0; font-size: 12px; }

/* ── Hero lockup: brand | content | greeting ─────────────── */
.hero-lockup {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 5px;
  width: 109px;
  text-align: center;
  order: 2;
}

.hero-brand-name {
  font-family: Marcellus, Georgia, serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3;
}

.hero-content {
  flex: 1;
  min-width: 0;
  order: 1;
}

.hero-content h1 { margin: 0 0 4px; }

.hero-content .lede { margin: 0; max-width: none; }

/* ── Panel section greeting (right of section title) ─────── */
.panel-greeting {
  margin: 0;
  color: var(--ink);
  font-size: 53px;
  font-family: Marcellus, serif;
  letter-spacing: 0.02em;
  text-align: right;
  align-self: center;
}

/* ── Auth panels ─────────────────────────────────────────── */
.auth-panel {
  margin-bottom: 16px;
  padding: 28px;
}

.auth-stack { max-width: 540px; }

.dev-panel {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.create-profile-panel {
  display: grid;
  gap: 16px;
}

.create-profile-form { margin-top: 2px; }

/* ── Anchor/button links ─────────────────────────────────── */
a { color: inherit; text-decoration: none; }

button,
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: #8BAFC8;
  background: #1C3149;
  box-shadow: none;
  transition: opacity 160ms ease, transform 140ms ease, box-shadow 160ms ease;
}

button:hover:not(:disabled),
.button-link:hover:not(:disabled) {
  opacity: 0.94;
  box-shadow: none;
}

button:active:not(:disabled),
.button-link:active:not(:disabled) { transform: translateY(0); }

/* Nav links are sidebar items — completely separate from generic buttons */
.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  padding: 11px 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  transition: background 150ms ease, color 150ms ease;
}

.nav-link:active:not(:disabled) { transform: translateY(0); }

/* ghost variant */
button.ghost,
.button-link.ghost {
  color: var(--ink);
  background: rgba(105,141,170,0.10);
  border: 1px solid rgba(13,27,46,0.11);
  box-shadow: none;
}

button.ghost:hover,
.button-link.ghost:hover {
  background: rgba(105,141,170,0.18);
  box-shadow: none;
}

button:disabled {
  color: rgba(255,255,255,0.70);
  background: linear-gradient(135deg, #a0b3c4, #b8c8d6);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ── Form fields ─────────────────────────────────────────── */
.auth-form,
.field-grid {
  display: grid;
  gap: 16px;
}

.field-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.profile-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }

.profile-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 20px;
}

.profile-summary-card,
.profile-detail-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}

.profile-summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 20px;
}

.profile-avatar {
  width: 92px;
  height: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(105,141,170,0.92), rgba(139,175,200,0.72));
  box-shadow: inset 0 0 0 6px rgba(13,27,46,0.08);
  color: #fff;
  font-family: Marcellus, serif;
  font-size: 29px;
  line-height: 1;
}

.profile-summary-copy {
  display: grid;
  gap: 6px;
  text-align: center;
}

.profile-summary-copy h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
}

.profile-summary-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.profile-summary-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.profile-summary-stats div {
  display: grid;
  gap: 4px;
  text-align: center;
}

.profile-summary-stats strong {
  color: var(--ink);
  font-family: Marcellus, serif;
  font-size: 17px;
  font-weight: 400;
}

.profile-summary-stats span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.profile-link-badge {
  width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(61,170,114,0.12);
  color: #16824a;
  font-size: 13px;
  font-weight: 700;
}

.profile-detail-card {
  overflow: hidden;
}

.profile-detail-section {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.profile-detail-section:last-child {
  border-bottom: 0;
}

.profile-section-title {
  margin-bottom: 14px;
  padding-left: 14px;
  border-left: 3px solid var(--brand);
  color: var(--ink);
  font-family: Marcellus, serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.profile-detail-item {
  display: grid;
  gap: 6px;
}

.profile-detail-item--wide {
  grid-column: 1 / -1;
}

.profile-detail-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.profile-detail-item strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

input,
textarea,
select {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(13,27,46,0.13);
  border-radius: 12px;
  padding: 11px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: none;
}

.actions,
.panel-head { display: flex; gap: 12px; align-items: center; }

.actions { margin-top: 16px; flex-wrap: wrap; }

.panel-head {
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.panel-head h2 {
  padding-left: 12px;
  border-left: 3px solid var(--brand);
  line-height: 1.15;
}

.panel-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 13px;
}

.profile-panel-head {
  align-items: center;
}

.profile-panel-head .actions {
  margin-top: 0;
  align-items: center;
}

.profile-panel-head #editProfileButton {
  align-self: center;
}

#portalStatus:empty {
  display: none;
}

/* ── App shell ───────────────────────────────────────────── */
.app-shell {
  display: flex;
  gap: 0;
  align-items: stretch;
  height: 100%;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: calc(100% - 24px); /* detach from top + bottom */
  margin: 12px 12px 12px 12px; /* equal spacing on all sides */
  border-radius: 20px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid #DCDFE1;
  background: #FFF;
  /* Collapsed (default): narrow icon rail */
  width: 72px;
  flex: 0 0 72px;
  transition: width 260ms cubic-bezier(.4,0,.2,1), flex-basis 260ms cubic-bezier(.4,0,.2,1);
}

/* Expanded state */
.sidebar.sidebar--expanded {
  width: 264px;
  flex-basis: 264px;
}

/* Content stretches to fill the rest, scrolls independently */
.content {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  /* top/right 12px matches sidebar card margins; left 0 so sidebar margin-right(12) = 12px total gap */
  padding: 12px 12px 60px 0;
}

/* ── Sidebar brand mark ──────────────────────────────────── */
.sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 10px 12px;
  overflow: hidden;
}

/* Expanded: row — identity on the left, toggle on the right */
.sidebar.sidebar--expanded .sidebar-brand {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 14px;
}

/* Groups the logo + wordmark together */
.sidebar-brand-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

/* Press feedback, as the staff sidebar has. The brand is a link home, and
   without this it was the one thing in the sidebar that gave nothing back when
   pressed — on a phone, where there is no hover, that left it feeling dead. */
.sidebar-brand-identity:active {
  opacity: 0.8;
}

/* Collapsed: kill the gap so the hidden text doesn't push the logo off-centre */
.sidebar:not(.sidebar--expanded) .sidebar-brand-identity {
  gap: 0;
}

.sidebar-brand-mark {
  width: 44px;
  height: 48px;
  flex: 0 0 44px;
  object-fit: contain;
}

/* Light/dark tree logo switching */
.sidebar-brand-mark--dark  { display: none; }
:root[data-theme="dark"] .sidebar-brand-mark--light { display: none; }
:root[data-theme="dark"] .sidebar-brand-mark--dark  { display: block; }

/* Wordmark text block */
.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sidebar-brand-name {
  font-family: 'Marcellus', serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #161C33;
  line-height: 1.15;
  white-space: nowrap;
}

.sidebar-brand-sub {
  font-family: 'Marcellus', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #161C33;
  line-height: 1.15;
  white-space: nowrap;
}

/* Legacy label — hidden now */
.sidebar-brand-label {
  display: none;
}

/* ── Nav list & links ────────────────────────────────────── */
.nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 10px;
  flex: 1 1 0;
  min-height: 0;           /* allows flex child to shrink below content size */
  overflow-y: auto;        /* scroll if nav items overflow before footer */
  overflow-x: hidden;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: left;
  width: 100%;
  padding: 11px 0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: justify-content 0s, gap 220ms ease, padding 260ms cubic-bezier(.4,0,.2,1);
}

.sidebar.sidebar--expanded .nav-link {
  justify-content: flex-start;
  gap: 12px;
  padding: 11px 10px;
}

.nav-link.active {
  background: #1C3149;
  border-color: transparent;
  color: #8BAFC8;
  box-shadow: none;
}

/* Left accent bar — removed */
.nav-link.active::before {
  display: none;
}

.nav-link:not(.active):hover {
  background: rgba(105,141,170,0.12);
  color: var(--ink);
}

/* Pin icon colour in ALL states — prevents currentColor flashing on hover/animation */
.nav-link .nav-icon,
.nav-link .nav-icon-lottie {
  color: var(--muted);
}

.nav-link.active .nav-icon,
.nav-link.active .nav-icon-lottie {
  color: #8BAFC8;
}

/* ── Sidebar nav icons: one colour, always ─────────────────────
   Lifted from the staff portal so the two sidebars behave identically.
   The glyphs previously inherited the row's ink, so they shifted between rest,
   hover and active. The label keeps its own colour — only the glyph is pinned.
   !important because the active/hover row rules set colour on the whole link
   and would otherwise cascade into the icon. */
.sidebar .nav-icon:not(.sidebar-profile-avatar),
.sidebar .nav-icon:not(.sidebar-profile-avatar) svg,
.sidebar .nav-link .nav-icon:not(.sidebar-profile-avatar),
.sidebar .nav-link.active .nav-icon:not(.sidebar-profile-avatar),
.sidebar .nav-link:hover .nav-icon:not(.sidebar-profile-avatar) {
  color: #8BAFC8 !important;
}
.sidebar .nav-icon:not(.sidebar-profile-avatar) svg [stroke]:not([stroke="none"]) { stroke: #8BAFC8; }
.sidebar .nav-icon:not(.sidebar-profile-avatar) svg [fill]:not([fill="none"])     { fill: #8BAFC8; }

/* .sidebar-profile-avatar is excluded throughout: it is a .nav-icon too, but a
   lettered circle rather than a glyph — colouring it painted the letter navy on
   a navy disc and it vanished.

   Light mode: the steel blue is too pale against a white sidebar, so unselected
   icons take the deep navy #1C3149. The SELECTED one keeps #8BAFC8 from the
   rules above — that is what marks the current section.
   Written for both the explicit [data-theme="light"] and the case where no
   attribute is set at all, since light is also the default. */
[data-theme="light"] .sidebar .nav-link:not(.active) .nav-icon:not(.sidebar-profile-avatar),
[data-theme="light"] .sidebar .nav-link:not(.active) .nav-icon:not(.sidebar-profile-avatar) svg,
:root:not([data-theme="dark"]) .sidebar .nav-link:not(.active) .nav-icon:not(.sidebar-profile-avatar),
:root:not([data-theme="dark"]) .sidebar .nav-link:not(.active) .nav-icon:not(.sidebar-profile-avatar) svg {
  color: #1C3149 !important;
}
[data-theme="light"] .sidebar .nav-link:not(.active) .nav-icon:not(.sidebar-profile-avatar) svg [stroke]:not([stroke="none"]),
:root:not([data-theme="dark"]) .sidebar .nav-link:not(.active) .nav-icon:not(.sidebar-profile-avatar) svg [stroke]:not([stroke="none"]) { stroke: #1C3149; }
[data-theme="light"] .sidebar .nav-link:not(.active) .nav-icon:not(.sidebar-profile-avatar) svg [fill]:not([fill="none"]),
:root:not([data-theme="dark"]) .sidebar .nav-link:not(.active) .nav-icon:not(.sidebar-profile-avatar) svg [fill]:not([fill="none"])     { fill: #1C3149; }

/* Nav label — hidden when collapsed, revealed when expanded */
.nav-label {
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 220ms ease, opacity 180ms ease;
}

.sidebar.sidebar--expanded .nav-label {
  max-width: 200px;
  opacity: 1;
}

/* ── Icons ───────────────────────────────────────────────── */
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  position: relative;   /* positioning context for the .nav-icon-lottie overlay */
}

.nav-icon svg { width: 22px; height: 22px; }

.nav-icon-fallback { transition: opacity 160ms ease; }

/* The Lottie rests on its last frame (the full glyph), so once it has mounted
   (.has-lottie) the animated icon IS the resting icon — hide the outline
   fallback entirely; it's only a pre-mount flash. Keep the .playing rule for
   the brief redraw during hover. */
.nav-icon.has-lottie .nav-icon-fallback { opacity: 0; }
.nav-icon.playing .nav-icon-fallback { opacity: 0; }

.nav-icon-lottie {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Overlay the fallback rather than sitting beside it in flex flow, so the
     fallback keeps its slot and stays the visible resting icon. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.nav-icon.has-lottie .nav-icon-lottie { opacity: 1; }
.nav-icon.playing .nav-icon-lottie { opacity: 1; }

.nav-icon-lottie > svg,
.nav-icon-lottie svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  display: block;
}

.nav-icon-lottie svg,
.nav-icon-lottie svg * {
  stroke: none !important;
  stroke-width: 0 !important;
}

/* ── Sidebar section label ───────────────────────────────── */
.sidebar-section-label {
  margin: 0;
  padding: 0 16px 6px;
  font-family: 'Quicksand', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
  /* hidden until expanded */
}

.sidebar:not(.sidebar--expanded) .sidebar-section-label {
  display: none;
}

/* ── Sidebar toggle button — lives inside .sidebar-brand ──
   Brought in line with the staff portal (2026-09-07). It was a 26px circle
   holding a 14px glyph, which is the size the staff sidebar already moved away
   from: next to a 44px brand mark a 14px mark reads as a smudge rather than a
   control. A rounded rectangle at 32px, with the glyph at 20px, reads as a
   button and gives it room to breathe. Same navy as the staff toggle. */
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--ac-line2);
  background: var(--ac-surface2);
  color: #1C3149;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  box-shadow: none;
}

.sidebar-toggle:hover {
  background: rgba(22,28,51,0.10);
  color: #161C33;
  transform: none;
  box-shadow: none;
  opacity: 1;
}

.sidebar-toggle-icon {
  width: 20px;
  height: 20px;
  transition: transform 260ms cubic-bezier(.4,0,.2,1);
  flex: 0 0 20px;
}

/* Collapsed: chevron points right (→ expand) */
.sidebar:not(.sidebar--expanded) .sidebar-toggle-icon {
  transform: rotate(180deg);
}

/* Expanded: chevron points left (← collapse) */
.sidebar.sidebar--expanded .sidebar-toggle-icon {
  transform: rotate(0deg);
}


/* ── Sidebar footer (settings + user profile) — pinned to bottom ── */
.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px 20px;
  flex-shrink: 0;
}

.sidebar-footer-divider {
  height: 0;
  background: transparent;
  margin: 0;
}

.sidebar-settings-btn {
  /* inherits .nav-link ghost styling — centred when collapsed via .nav-link justify-content: center */
}

/* Profile row — matches nav-link layout exactly so all footer items are pixel-aligned */
.sidebar-profile-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 11px 0;
  overflow: hidden;
  width: 100%;
  border-radius: 12px;
}

.sidebar.sidebar--expanded .sidebar-profile-row {
  flex-direction: row;
  padding: 11px 10px;
  align-items: center;
  gap: 12px;
}

.sidebar-profile-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #161C33;
  color: #C5D1DC;
  font-family: 'Marcellus', serif;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  letter-spacing: 0.02em;
}

.sidebar-profile-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 0;
}

.sidebar-profile-name {
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #161C33;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-sub {
  display: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--muted);
  white-space: nowrap;
}

.sidebar.sidebar--expanded .sidebar-profile-sub {
  display: block;
}

button.sidebar-profile-row {
  cursor: pointer;
  border: none;
  background: transparent;
  text-align: left;
  transition: background 0.15s;
}

button.sidebar-profile-row:hover {
  background: rgba(22, 28, 51, 0.07);
}

button.sidebar-profile-row.active {
  background: rgba(22, 28, 51, 0.10);
}

/* Sign-out — full nav-link row below the profile block */
.sidebar-signout-btn {
  color: var(--muted);
  opacity: 0.8;
}

.sidebar-signout-btn:hover {
  background: rgba(140,36,18,0.08) !important;
  color: #b24d37 !important;
  opacity: 1;
}

/* Icon wrapper within the sign-out button */
.sidebar-signout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Legacy fallback classes */
.sidebar-signout { display: none; }
.sidebar > .ghost.full-width { display: none; }
.full-width { width: 100%; }

/* ── Content area ────────────────────────────────────────── */
.content { display: flex; flex-direction: column; gap: 0; }

.content-panel {
  padding: 20px;
}

/* ── Stat grid ───────────────────────────────────────────── */
.stat-grid,
.card-grid,
.split-grid {
  display: grid;
  gap: 16px;
}

.stat-grid {
  grid-template-columns: repeat(4, minmax(0,1fr));
  margin-bottom: 18px;
}

.stat-grid:empty {
  margin-bottom: 0;
}

.card-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.split-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

#onboardingCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* ── Cards ───────────────────────────────────────────────── */
.stat-card,
.card,
.stack-item,
.profile-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(105,141,170,0.06);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.stat-card-link {
  appearance: none;
  display: block;
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  color: inherit;
  box-shadow: none;
  transform: none;
}

.stat-card-link:hover,
.stat-card-link:active {
  opacity: 1;
  box-shadow: none;
  transform: none;
}

.stat-card:hover,
.card:hover { border-color: rgba(105,141,170,0.30); }

.stat-card,
.card,
.profile-item { padding: 20px; }

.card {
  background: var(--panel);
}

.card > h3 {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}

.dashboard-list-card {
  padding: 0;
  overflow: hidden;
}

/* Two-column pending + completed side-by-side */
.dashboard-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 8px;
}

/* Each card inside the split fills its column height */
.dashboard-split > * {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dashboard-split .dashboard-list-card {
  height: 100%;
}

.dashboard-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: #1C3149;
}

.dashboard-list-head h3 {
  margin: 0;
  font-size: 17px;
  color: #fff;
}

/* Pending count badge in the Outstanding Tasks header */
.hero-task-count {
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 3px 10px;
}

[data-theme="dark"] .hero-task-count {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(238,232,223,0.60);
}

.dashboard-view-all {
  appearance: none;
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  min-height: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,0.65);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.dashboard-view-all:hover {
  color: rgba(255,255,255,0.9);
  background: transparent !important;
  transform: none;
  box-shadow: none !important;
}

.dashboard-list {
  display: flex;
  flex-direction: column;
}

.dashboard-list-item {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  text-decoration: none;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  width: 100%;
  font: inherit;
}

/* Remove border-bottom on the last item so it doesn't stack with the
   card's own outer border, which would produce a double-line effect. */
.dashboard-list > .dashboard-list-item:last-child {
  border-bottom: 0;
}

.dashboard-list-item:hover {
  background: rgba(105,141,170,0.08);
  transform: none;
  box-shadow: none;
}

.dashboard-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(105,141,170,0.45);
  box-shadow: none;
}

.dashboard-item-dot.is-complete {
  background: #33b36c;
  box-shadow: none;
}

.dashboard-item-dot.is-progress {
  background: #d4a33d;
  box-shadow: none;
}

.dashboard-item-dot.is-required {
  background: #b24d37;
  box-shadow: none;
}

.dashboard-item-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dashboard-item-copy strong {
  font-family: 'Quicksand', sans-serif;
  font-size: 15px !important;
  font-weight: 600;
  color: #1D1E1E;
}
[data-theme="dark"] .dashboard-item-copy strong { color: #EEE8DF; }

.dashboard-item-copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
}

/* ── Master pill token — all pill variants share this base ── */
.dashboard-item-pill,
.hero-checklist-pill,
.onboarding-progress-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: capitalize;
  border: none;
  line-height: 1.6;
}

/* dashboard-item-pill colours */
.dashboard-item-pill.is-complete {
  background: rgba(51,179,108,0.14);
  color: rgb(22,130,74);
}

.dashboard-item-pill.is-progress {
  background: rgba(255,172,0,0.20);
  color: #d9ac31;
}

.dashboard-item-pill.is-inprogress {
  background: rgba(235,120,20,0.15);
  color: #a85209;   /* was #c45e0a — 4.24:1 on white, under the 4.5 an 11px label needs; this is 5.42 */
}

.dashboard-item-pill.is-pending-task {
  background: rgba(22,28,51,0.07);
  color: var(--muted);
}
:root[data-theme="dark"] .dashboard-item-pill.is-pending-task {
  background: rgba(139,175,200,0.18);
  color: #8BAFC8;
}

.dashboard-item-pill.is-required {
  background: rgba(140,36,18,0.10);
  color: #b24d37;
}

.document-status-pill {
  align-self: flex-start;
  margin-top: 2px;
}

.dashboard-empty {
  padding: 16px 20px;
}

.onboarding-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
  min-height: 0;
  border: 1px solid rgba(105,141,170,0.24);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(105,141,170,0.10) 0%, rgba(255,255,255,0.96) 100%);
  transition: border-color 180ms ease, transform 180ms ease;
}

.onboarding-card:hover {
  border-color: rgba(105,141,170,0.40);
}

.onboarding-card-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(105,141,170,0.12);
  border: 1px solid rgba(105,141,170,0.18);
  color: var(--brand);
}

.onboarding-card-icon svg {
  width: 20px;
  height: 20px;
}

.onboarding-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
}

.onboarding-card-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onboarding-card h3 {
  margin: 0;
  font-size: 17px;
}

.onboarding-card .meta {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
}

.onboarding-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.onboarding-progress-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(13,27,46,0.10);
  overflow: hidden;
}

.onboarding-progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.onboarding-progress-bar.is-complete {
  background: #33b36c;
}

.onboarding-progress-bar.is-progress {
  background: #d4a33d;
}

.onboarding-progress-bar.is-required {
  background: rgba(13,27,46,0.14);
}

.onboarding-progress-bar.is-optional {
  background: #698DAA;
}

.onboarding-progress-percent {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
}

/* onboarding-progress-pill colours (base from master pill token) */
.onboarding-progress-pill.is-complete {
  background: rgba(51,179,108,0.14);
  color: rgb(22,130,74);
}

.onboarding-progress-pill.is-progress {
  background: rgba(212,163,61,0.14);
  color: #9b6e10;
}

.onboarding-progress-pill.is-required {
  background: rgba(140,36,18,0.10);
  color: #b24d37;
}

.onboarding-progress-pill.is-optional {
  background: rgba(105,141,170,0.14);
  color: #4f6f8c;
}
:root[data-theme="dark"] .onboarding-progress-pill.is-optional {
  background: rgba(139,175,200,0.16);
  color: #B6CBDD;
}

/* Stat card value */
.stat-card strong {
  display: block;
  margin-top: 10px;
  font-size: 32px;
  font-family: Marcellus, serif;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
}

.stat-card p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

/* ── Stack list ──────────────────────────────────────────── */
.stack-list { display: flex; flex-direction: column; gap: 10px; }
.timeline-list { display: flex; flex-direction: column; gap: 14px; }

.authorisation-group {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
  overflow: hidden;
}

.authorisation-group + .authorisation-group {
  margin-top: 16px;
}


/* ── Auth table — matches Staff Admin Portal layout ──────── */
.auth-table-header,
.auth-table-row {
  display: grid;
  grid-template-columns: 40% 160px 1fr 110px;
  align-items: center;
  padding: 0 22px;
  gap: 0;
}

.auth-table-header {
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: var(--muted);
  font-family: 'Quicksand', sans-serif;
}

.auth-table-header span { text-align: left; }
.auth-table-header span:nth-child(3) { padding-left: 12px; }
.auth-table-header span:nth-child(4) { text-align: right; padding-right: 4px; }

.auth-table-row {
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.authorisation-list > .auth-table-row:last-child { border-bottom: 1px solid var(--line); }

.auth-col-request {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-right: 16px;
}

.auth-row-title {
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-col-date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.auth-date-primary {
  font-family: 'Quicksand', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.auth-col-right {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  padding-left: 12px;
  min-width: 0;
}

/* Status pill */
.auth-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  font-family: 'Quicksand', sans-serif;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.auth-status-pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.auth-status-pill.is-neutral  { background: rgba(13,27,46,0.06); color: var(--ink); }
.auth-status-pill.is-neutral::before  { background: var(--ac-steel); }
.auth-status-pill.is-muted    { background: rgba(13,27,46,0.05); color: var(--muted); }
.auth-status-pill.is-muted::before    { background: var(--muted); }
.auth-status-pill.is-complete { background: rgba(19,102,57,0.10); color: #136639; }
.auth-status-pill.is-complete::before { background: #136639; }
.auth-status-pill.is-required { background: rgba(140,36,18,0.10); color: #8C2412; }
.auth-status-pill.is-required::before { background: #8C2412; }
.auth-status-pill.is-progress { background: rgba(105,141,170,0.12); color: var(--ac-steel); }
.auth-status-pill.is-progress::before { background: var(--ac-steel); }

/* Dark mode pill overrides — light-mode alphas are invisible on dark backgrounds */
:root[data-theme="dark"] .auth-status-pill.is-neutral  { background: rgba(139,175,200,0.14); color: #b8d0e0; }
:root[data-theme="dark"] .auth-status-pill.is-neutral::before  { background: #8BAFC8; }
:root[data-theme="dark"] .auth-status-pill.is-muted    { background: rgba(139,175,200,0.08); color: #7a99b0; }
:root[data-theme="dark"] .auth-status-pill.is-muted::before    { background: #5d8099; }
:root[data-theme="dark"] .auth-status-pill.is-complete { background: rgba(51,179,108,0.18); color: #4fd98a; }
:root[data-theme="dark"] .auth-status-pill.is-complete::before { background: #33b36c; }
:root[data-theme="dark"] .auth-status-pill.is-required { background: rgba(178,77,55,0.18); color: #e07e6a; }
:root[data-theme="dark"] .auth-status-pill.is-required::before { background: #b24d37; }
:root[data-theme="dark"] .auth-status-pill.is-progress { background: rgba(105,141,170,0.18); color: #8BAFC8; }
:root[data-theme="dark"] .auth-status-pill.is-progress::before { background: #698DAA; }

/* Actions column — 4th grid column */
.auth-col-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  gap: 6px;
}

/* Legacy action group wrapper kept for compatibility */
.auth-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.auth-row-actions .open-embedded-sign,
.auth-col-actions .open-embedded-sign {
  min-width: unset;
}

.authorisation-group-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 20px;
  min-height: 58.34px;
  background: #F7F8FA;
  border-bottom: 1px solid var(--line);
}

.authorisation-group-head h3 {
  font-family: 'Marcellus', serif;
  font-size: 17px;   /* match .doc-acc-title for consistent section headings */
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #161C33;
  margin: 0;
}

/* Circular count badge next to section heading */
.auth-group-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: 'Quicksand', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.auth-group-count--required {
  background: rgba(214,158,46,0.16);
  color: #B7791F;
}

.auth-group-count--complete {
  background: rgba(56,142,96,0.14);
  color: #2F855A;
}

[data-theme="dark"] .auth-group-count--required {
  background: rgba(214,158,46,0.22);
  color: #d9b25a;
}

[data-theme="dark"] .auth-group-count--complete {
  background: rgba(56,142,96,0.22);
  color: #5dba82;
}

/* Completed group — div-based toggle, no chevron */
.authorisation-group-head--toggle {
  cursor: pointer;
  user-select: none;
  transition: background 140ms ease;
}

.authorisation-group-head--toggle:hover {
  background: rgba(105,141,170,0.07);
}

.authorisation-group-head--toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

[data-theme="dark"] .authorisation-group-head--toggle:hover {
  background: rgba(255,255,255,0.05);
}

/* Collapsed state — hide the list body and remove double border */
.authorisation-group--completed.is-collapsed .completed-auth-body {
  display: none;
}

/* When collapsed, the head's border-bottom sits against the card's own border
   creating a thick/double line. Remove it so only the card border shows. */
.authorisation-group--completed.is-collapsed .authorisation-group-head {
  border-bottom: none;
}

.authorisation-list {
  gap: 0;
}

/* Empty-state stack-item sits flush against the section header —
   remove top radius so it doesn't look like a floating card-within-a-card.
   Also strip the bottom border/radius on the last item so it doesn't
   double up with the parent container's own border. */
.authorisation-list > .stack-item {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none; /* heading's border-bottom already draws the divider */
}

.authorisation-list > .stack-item:last-child {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.authorisation-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.authorisation-list > :last-child:not(.auth-table-row) {
  border-bottom: 0;
}

.authorisation-copy h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.authorisation-copy .meta {
  margin: 0;
}

.authorisation-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Open / View / Upload File action pills — shared token */
.open-embedded-sign,
.auth-upload-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(13,27,46,0.12);
  background: #1C3149;
  color: #8BAFC8;
}

.auth-upload-btn {
  background: transparent !important;
  border: 1.5px dashed rgba(105,141,170,0.55) !important;
  color: var(--ac-steel, #698DAA);
  font-family: 'Quicksand', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  text-decoration: none;
}
.open-embedded-sign svg,
.auth-upload-btn svg { width: 16px; height: 16px; }

.open-embedded-sign:hover:not(:disabled) {
  background: #223b57;
  color: #c6d8e6;
  box-shadow: none;
}

.auth-upload-btn:hover {
  background: rgba(105,141,170,0.08) !important;
  border-color: rgba(105,141,170,0.80) !important;
  color: var(--ac-steel, #698DAA);
  box-shadow: none;
}

.auth-view-pdf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(13,27,46,0.12);
  background: #1C3149;
  color: #8BAFC8;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.auth-view-pdf-btn:hover {
  background: #223b57;
  color: #c6d8e6;
}

.authorisation-actions .open-embedded-sign {
  min-width: 112px;
}

.authorisation-pending-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  min-width: 112px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(13,27,46,0.10);
  background: rgba(13,27,46,0.04);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
}

.authorisation-pending-label--incomplete {
  border-color: rgba(212,163,61,0.30);
  background: rgba(212,163,61,0.12);
  color: #9b6e10;
}

.authorisation-pending-label--required {
  border-color: rgba(178,77,55,0.25);
  background: rgba(140,36,18,0.08);
  color: #b24d37;
}

/* ── Authorisation filter tabs ───────────────────────────── */
.auth-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.auth-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid rgba(22, 28, 51, 0.14);
  background: transparent;
  font-family: 'Quicksand', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted, #555);
  cursor: pointer;
  transition: border-color 0.13s, background 0.13s, color 0.13s;
  white-space: nowrap;
}

.auth-filter-tab:hover {
  border-color: #161C33;
  color: #161C33;
}

.auth-filter-tab.active {
  background: #161C33;
  border-color: #161C33;
  color: #fff;
}

.auth-filter-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(22, 28, 51, 0.09);
  color: inherit;
  transition: background 0.13s;
}

.auth-filter-tab.active .auth-filter-tab-count {
  background: rgba(255, 255, 255, 0.22);
}

/* ── Authorisation pack cards ────────────────────────────── */
.auth-pack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

@media (max-width: 580px) {
  .auth-pack-grid { grid-template-columns: 1fr; }
}

.auth-pack-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(var(--cr), var(--cg), var(--cb), 0.16);
  background:
    radial-gradient(ellipse 130% 90% at 10% 10%,
      rgba(var(--cr), var(--cg), var(--cb), 0.13) 0%,
      transparent 65%),
    #fff;
  box-shadow: none;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.14s, box-shadow 0.14s;
}

.auth-pack-card:hover {
  box-shadow: none;
}

.auth-pack-glow {
  position: absolute;
  top: -24px;
  left: -24px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--cr), var(--cg), var(--cb), 0.18) 0%,
    transparent 70%);
  pointer-events: none;
}

.auth-pack-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-pack-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 2px;
  background: rgba(var(--cr), var(--cg), var(--cb), 0.12);
  font-family: 'Marcellus', serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgb(var(--cr), var(--cg), var(--cb));
}

.auth-pack-company {
  font-family: 'Quicksand', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(var(--cr), var(--cg), var(--cb));
  opacity: 0.8;
}

.auth-pack-body { flex: 1; }

.auth-pack-title {
  font-family: 'Marcellus', serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 5px;
  line-height: 1.35;
}

.auth-pack-meta {
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  color: var(--ink-muted, #888);
  margin: 0;
}

.auth-pack-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.auth-pack-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(var(--cr), var(--cg), var(--cb), 0.28);
  background: transparent;
  font-family: 'Quicksand', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgb(var(--cr), var(--cg), var(--cb));
  cursor: pointer;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}

.auth-pack-btn:hover {
  background: rgba(var(--cr), var(--cg), var(--cb), 0.08);
}

.auth-pack-btn--primary {
  background: rgb(var(--cr), var(--cg), var(--cb));
  border-color: rgb(var(--cr), var(--cg), var(--cb));
  color: #fff;
}

.auth-pack-btn--primary:hover {
  opacity: 0.88;
  background: rgb(var(--cr), var(--cg), var(--cb));
}

.auth-pack-pending {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(178, 77, 55, 0.25);
  background: rgba(140, 36, 18, 0.07);
  color: #b24d37;
}

.auth-pack-pending--draft {
  border-color: rgba(212, 163, 61, 0.25);
  background: rgba(212, 163, 61, 0.1);
  color: #9b6e10;
}

.auth-pack-section { margin-bottom: 4px; }

.auth-pack-empty {
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  color: var(--ink-muted, #888);
  padding: 12px 0 20px;
  margin: 0;
}

.auth-pack-completed-group {
  margin-top: 4px;
}

.auth-pack-completed-group > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 12px;
  cursor: pointer;
  list-style: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted, #888);
  border-top: 1px solid var(--line);
}

/* Every clickable answers the cursor. Colour only, no movement. */
.auth-pack-completed-group > summary:hover { color: var(--ink); }

.auth-pack-completed-group > summary::-webkit-details-marker { display: none; }
.auth-pack-completed-group > summary::marker { display: none; }

.auth-pack-completed-group[open] > summary .pack-summary-toggle::before {
  transform: rotate(180deg);
}

/* dark mode */
[data-theme="dark"] .auth-pack-card {
  background:
    radial-gradient(ellipse 130% 90% at 10% 10%,
      rgba(var(--cr), var(--cg), var(--cb), 0.18) 0%,
      transparent 65%),
    #1a1e2e;
  border-color: rgba(var(--cr), var(--cg), var(--cb), 0.22);
}

[data-theme="dark"] .auth-filter-tab {
  border-color: rgba(197, 209, 220, 0.18);
  color: #a0aab8;
}

[data-theme="dark"] .auth-filter-tab:hover,
[data-theme="dark"] .auth-filter-tab.active {
  border-color: #C5D1DC;
}

[data-theme="dark"] .auth-filter-tab.active {
  background: #C5D1DC;
  color: #161C33;
}

/* ── Timeline ────────────────────────────────────────────── */
.timeline-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: stretch;
}

.timeline-marker { position: relative; }

.timeline-marker::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: rgba(105,141,170,0.28);
}

.timeline-marker::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid rgba(105,141,170,0.45);
}

/* ── Stack item ──────────────────────────────────────────── */
.stack-item {
  padding: 20px;
}

.stack-item-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.auth-item-actions {
  margin-top: 14px;
}

.auth-item-actions .open-embedded-sign {
  min-width: 112px;
}

.stack-item-head .badge {
  align-self: center;
  margin-left: auto;
}

/* ── Document upload panel ───────────────────────────────── */
.document-upload-panel { display: grid; gap: 16px; }

.document-type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-type-pill {
  position: relative;
  cursor: pointer;
}

.document-type-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.document-type-pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(13,27,46,0.13);
  background: rgba(255,255,255,0.92);
  font-weight: 600;
  font-size: 13px;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.document-type-pill:hover span { border-color: rgba(105,141,170,0.35); }

.document-type-pill input:checked + span {
  color: #8BAFC8;
  background: #1C3149;
  border-color: transparent;
  box-shadow: none;
}

/* ── Upload grid & card ──────────────────────────────────── */
.upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.document-section-card {
  display: grid;
  gap: 16px;
  margin-bottom: 0;
}

/* ── Documents tab — full redesign (from design system Documents.html) ─── */

[data-section="documents"] .portal-topbar { margin-bottom: 0; }

/* Page header + completion ring */
.doc-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(16,24,48,0.08);
  margin-bottom: 40px;
}
.doc-page-title {
  font-family: 'Marcellus', serif;
  font-size: 34px;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}
.doc-page-sub {
  margin-top: 6px;
  color: var(--muted);
  font-size: 15px;
  font-family: 'Quicksand', sans-serif;
}
.doc-completion {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.doc-completion-ring {
  position: relative;
  width: 46px;
  height: 46px;
}
.doc-completion-ring svg { transform: rotate(-90deg); display: block; }
.doc-completion-ring #docProgressArc { transition: stroke-dashoffset 600ms ease; }
.doc-completion-pct {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
  font-family: 'Quicksand', sans-serif;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.doc-completion-label {
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted);
  font-family: 'Quicksand', sans-serif;
}
.doc-completion-label strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

/* Section wrapper */
.doc-section { margin-bottom: 52px; }
.doc-section:last-child { margin-bottom: 0; }

/* Eyebrow + section heading */
.doc-section-header { margin-bottom: 22px; }
.doc-eyebrow {
  display: block;
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6888A8;
  margin-bottom: 6px;
}
.doc-section-title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
  margin: 0;
}
.doc-section-sub {
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  color: var(--muted);
  margin: 3px 0 0;
}

/* Doc grid — 4 equal columns, all same height */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 16px;
  align-items: stretch;
  width: 100%;
}
@media (max-width: 880px) { .doc-grid { grid-template-columns: minmax(0, 1fr); } }

/* Force all upload grids inside doc-cards to single column —
   dual layout handled by .dual internally */
.doc-card .upload-grid,
.doc-card .upload-grid--single {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* Doc card — equal height via stretch, uniform padding all sides */
.doc-card {
  background: #fff;
  border: 1px solid rgba(16,24,48,0.08);
  border-radius: var(--radius-outer, 16px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 160ms ease;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
}
.doc-card:hover { background: rgba(105,141,170,0.04); }

/* ── Other Documents — table layout ─────────────────────────────── */
.docs-table-wrap {
  grid-column: 1 / -1;   /* span the full width — #otherDocsContainer is a 4-col grid */
  width: 100%;
  background: transparent;
  border: 1px solid rgba(16,24,48,0.08);
  border-radius: var(--radius-outer, 16px);
  overflow-x: auto;
}
/* Auth group cards own the border/radius — remove them from the inner table wrap */
.authorisation-group .docs-table-wrap {
  border: none;
  border-radius: 0;
  overflow: visible;
}
.docs-table { width: 100%; border-collapse: collapse; }
.docs-table thead th {
  text-align: left;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 17.36px;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: var(--muted);
  padding: 14px 16px;
  border-bottom: 1px solid rgba(16,24,48,0.08);
  white-space: nowrap;
}
.docs-table tbody td {
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20.15px;
  color: #434343;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(16,24,48,0.06);
  vertical-align: middle;
}
.docs-table tbody tr:last-child td { border-bottom: none; }
.docs-row:hover { background: rgba(105,141,170,0.06); }
/* Institution icon cell */
.docs-c-icon {
  width: 52px;
  padding: 10px 8px 10px 0;
  vertical-align: middle;
}

.doc-inst-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(13,27,46,0.10);
  background: rgba(255,255,255,0.90);
  color: #698DAA;
  flex-shrink: 0;
}

.doc-inst-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.doc-inst-icon svg {
  width: 18px;
  height: 18px;
}

:root[data-theme="dark"] .doc-inst-icon {
  background: rgba(15,29,48,0.80);
  border-color: rgba(139,175,200,0.16);
  color: #8BAFC8;
}

/* Dark-mode logo variants: show inst-logo-dark, hide inst-logo-light */
.inst-logo-dark { display: none; }
:root[data-theme="dark"] .inst-logo-light { display: none; }
:root[data-theme="dark"] .inst-logo-dark { display: block; }

.docs-c-title { font-weight: 600; color: var(--text, #0D1B2E); }
.docs-c-title strong, .docs-c-title .doc-name { font-weight: 600; }
.docs-c-title .docs-hint { display: block; margin-top: 2px; font-weight: 400; color: #526073; }
/* Muted, not full ink — the hint must sit below the title in hierarchy */
:root[data-theme="dark"] .docs-c-title .docs-hint { color: rgba(238,232,223,0.60); }
.docs-c-note  { color: var(--muted); max-width: 280px; }
.docs-c-date  { color: var(--muted); white-space: nowrap; }
.docs-muted   { color: var(--muted); opacity: 0.6; }
.docs-file {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; max-width: 300px;
}
.docs-table .ftype { width: 28px; height: 34px; }
.docs-table .ftype span { font-size: 9px; font-weight: 700; color: var(--ac-steel, #698DAA); }
.docs-fname {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text, #0D1B2E);
}
a.docs-file:hover .docs-fname { color: var(--ac-steel, #698DAA); text-decoration: underline; }
.docs-status-cell { display: inline-flex; align-items: center; gap: 10px; }
.docs-row-delete {
  opacity: 0; pointer-events: none;
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 4px; border-radius: 8px;
  display: inline-flex; transition: opacity 140ms ease, color 140ms ease, background 140ms ease;
}
.docs-row:hover .docs-row-delete { opacity: 1; pointer-events: auto; }
.docs-row-delete:hover { color: #c0392b; background: rgba(192,57,43,0.10); }
.docs-row-delete svg { width: 15px; height: 15px; }

/* ── Merged Documents tab: flush tables, aligned columns, permanent actions ── */
/* Tables sit flush inside the accordion card (no nested "table-in-table" border) */
.doc-acc-body .docs-table-wrap { border: none; border-radius: 0; overflow: visible; }
/* Required body: make the authorisations table full-width (flush) so its columns
   align with the Completed table; keep padding only on the upload sub-section. */
#requiredWrap > .doc-acc-body { padding: 0; }
#requiredWrap #pendingDocRequestsWrap { padding: 4px 20px 20px; }
/* DOCUMENT NAME header: align with accordion section title via colspan=2 */
.docs-table th.docs-c-title { padding-left: 0; }
/* Required and Completed sections both use body padding:0 (flush), compensate to match 20px summary indent */
#requiredWrap .docs-table th.docs-c-title,
#completedWrap .docs-table th.docs-c-title { padding-left: 20px; }
/* The header spans two columns (colspan=2), so it starts at the LOGO column,
   not the name — and the logo has to sit on the same gutter or the heading
   floats 4px right of everything under it. `.docs-table tbody td` sets 16px on
   every cell and out-specifies the bare `.docs-c-icon` rule, which is why the
   logos were inboard. Same fault, and the same fix, as the staff portal's
   #advisorTasksBody. */
#requiredWrap .docs-table td.docs-c-icon,
#completedWrap .docs-table td.docs-c-icon { padding-left: 20px; }
/* Full document names — allow wrapping instead of truncating (plenty of column space) */
.doc-acc .docs-c-title { white-space: normal; overflow-wrap: anywhere; }
/* Actions column flush-right (header + cells); File column left-aligned */
.docs-table th.col-actions, .docs-table td.col-actions { text-align: right; }
.docs-table th.docs-col-file { text-align: left; }
/* File chip + delete grouped at the right of the Actions/File column */
.docs-row-actions--file { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.docs-row-actions--file .docs-file { flex: 0 1 auto; min-width: 0; }
/* Delete flex sizing — visibility controlled by row-hover rule above */
.doc-acc .docs-row-delete { flex: 0 0 auto; }
/* Completed/uploaded action groups: always visible (not hover-reveal), header label shown */
.doc-acc .docs-table--completed .docs-row-actions { opacity: 1; pointer-events: auto; }
.doc-acc .docs-table--completed th.col-actions { color: var(--muted); }

/* Merged Documents tab: spacing between the authorisations table and the uploads below */
.merged-auth-mount:not(:empty) { margin-bottom: 18px; }
.doc-acc-body--flush .merged-auth-mount:not(:empty) { margin: 0 0 14px; }
/* No trailing margin when there are no upload cards below the auth table */
#requiredWrap .merged-auth-mount:not(:empty) { margin-bottom: 0; }
#requiredWrap #pendingDocRequestsWrap { padding-top: 18px; }

/* Animated trash (Lottie) icon for delete buttons — static SVG fallback until hover */
.del-lottie {
  display: inline-flex; width: 15px; height: 15px; line-height: 0;
  align-items: center; justify-content: center;
}
.del-lottie-fallback { width: 15px; height: 15px; display: block; }
.del-lottie-anim { width: 15px; height: 15px; display: none; }
.del-lottie.has-lottie .del-lottie-anim { display: block; }
.del-lottie.has-lottie .del-lottie-fallback { display: none; }
.upload-delete-button:hover,
.sign-req-delete-button:hover { color: #c0392b; background: rgba(192,57,43,0.10); }
[data-theme="dark"] .upload-delete-button:hover,
[data-theme="dark"] .sign-req-delete-button:hover { color: #e87461; background: rgba(192,57,43,0.15); }

/* Armed, waiting for the second press. Colour only — the design law rules out
   anything that moves, and a bin that jumped under the finger would be worse
   here than anywhere. Light values in the base rule, dark inside the guard. */
.upload-delete-button.is-confirming,
.sign-req-delete-button.is-confirming,
.passkey-delete-btn.is-confirming {
  color: #fff;
  background: #B24D37;
  border-color: #B24D37;
}
[data-theme="dark"] .upload-delete-button.is-confirming,
[data-theme="dark"] .sign-req-delete-button.is-confirming,
[data-theme="dark"] .passkey-delete-btn.is-confirming {
  color: #fff;
  background: #B24D37;
  border-color: #B24D37;
}

/* File cell: always-visible file link + icon-button delete */
.docs-file-action { display: flex; align-items: center; gap: 10px; min-width: 0; }
.docs-file-action .docs-file { flex: 1 1 0; min-width: 0; overflow: hidden; }
.docs-file-action .icon-button { flex: 0 0 auto; position: static; transform: none; margin-left: auto; }
/* icon-button base style (matches Staff Admin Portal) */
.docs-table .icon-button {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(13,27,46,0.06); color: var(--muted);
  border: 1px solid rgba(13,27,46,0.10);
  cursor: pointer; transition: background 140ms ease, color 140ms ease;
}
.docs-table .icon-button svg { width: 15px; height: 15px; }
.docs-table .icon-button:hover { background: rgba(140,36,18,0.10); color: var(--danger, #c0392b); border-color: rgba(140,36,18,0.15); }
[data-theme="dark"] .docs-table .icon-button { background: rgba(139,175,200,0.08); border-color: rgba(139,175,200,0.16); color: #8BAFC8; }
[data-theme="dark"] .docs-table .icon-button:hover { background: rgba(192,57,43,0.15); color: #e87461; border-color: rgba(192,57,43,0.25); }
/* Legacy file-cell alias */
.docs-file-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.docs-file-cell .docs-file { flex: 1 1 0; min-width: 0; overflow: hidden; }
/* Mobile meta + actions: hidden on desktop, shown via @media below */
.docs-mobile-meta { display: none; }
.docs-mobile-actions { display: none; }

/* ── Mobile: card layout — icon top-left w/ name beside it, date + status
   stacked underneath the icon, action button full-width & centred below ── */
@media (max-width: 640px) {
  .docs-table { table-layout: auto !important; }

  /* The rows below become display:block cards — the table and tbody must
     stop being table boxes too, or the block rows shrink-wrap to their
     content width (~160px) instead of filling the card. The header row is
     redundant once rows are cards, so it goes entirely. */
  .docs-table,
  .docs-table tbody { display: block; width: 100%; }
  .docs-table thead { display: none; }

  /* Hide date, status, and actions columns — replaced by the card layout below */
  .docs-table th.docs-c-date,
  .docs-table td.docs-c-date,
  .docs-table th.docs-c-status,
  .docs-table td.docs-c-status,
  .docs-table th.col-actions,
  .docs-table td.col-actions { display: none; }

  /* Row becomes a card. The icon is pulled out of flow (absolute, pinned
     top-left) so its fixed height never stretches the row next to it —
     that was the cause of the oversized gap under single-line document
     names. Name + hint are indented to clear the icon; date/status and the
     action button sit back at the row's full width, underneath the icon. */
  .docs-table tbody tr.docs-row {
    display: block;
    position: relative;
    padding: 16px 12px;
    border-bottom: 1px solid rgba(16,24,48,0.06);
  }
  .docs-table tbody tr.docs-row:last-child { border-bottom: none; }
  .docs-table tbody td { display: block; padding: 0; border-bottom: none; }

  .docs-table tbody td.docs-c-icon {
    position: absolute;
    top: 16px;
    left: 12px;
  }

  /* Name + hint — indented to clear the icon. Only reserve the icon's height
     as a min-height on the name when there's no hint below it — otherwise
     (name + hint together) always clear the icon naturally, and forcing the
     min-height here too just adds a dead gap between name and hint. */
  .docs-table tbody td.docs-c-title { padding-left: 54px; }
  .docs-c-title > strong { display: block; }
  .docs-c-title:not(:has(> .docs-hint)) > strong { min-height: 38px; }
  .docs-c-title > .docs-hint { display: block; margin-top: 4px; }

  /* Date + status — un-indented, directly underneath the icon */
  .docs-mobile-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 12px 0 0 -54px;
  }
  .docs-mobile-date { font-size: 11px; color: var(--muted); line-height: 1.3; }

  /* Action row — stretched back to the full card width so it centres under
     both the icon and the name, not just the indented text column */
  .docs-mobile-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 14px 0 0 -54px;
    width: calc(100% + 54px);
  }

  /* Open / Upload button: full row width */
  .docs-mobile-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 28px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    width: 100%;
  }

  /* Round icon buttons for View + Delete */
  .docs-mobile-round-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(16,24,48,0.12);
    background: #fff;
    color: var(--ac-steel, #698DAA);
    cursor: pointer;
    flex-shrink: 0;
  }
  .docs-mobile-round-btn svg { width: 17px; height: 17px; }
  .docs-mobile-round-btn:hover { border-color: var(--ac-blue, #4E7A97); color: var(--ac-blue, #4E7A97); }
  .docs-mobile-del-btn:hover { border-color: #c0392b; color: #c0392b; }

  .docs-table thead th { padding: 7px 12px; }
}

/* Dark mode round buttons */
:root[data-theme="dark"] .docs-mobile-round-btn {
  background: rgba(139,175,200,0.08);
  border-color: rgba(139,175,200,0.2);
  color: #8BAFC8;
}
:root[data-theme="dark"] .docs-table-wrap { border-color: rgba(78,122,151,0.2); }
:root[data-theme="dark"] .docs-table thead th { border-bottom-color: rgba(139,175,200,0.15); color: rgba(170,195,215,0.7); }
:root[data-theme="dark"] .docs-table tbody td { border-bottom-color: rgba(139,175,200,0.10); color: #B8C8D8; }
@media (max-width: 640px) {
  :root[data-theme="dark"] .docs-table tbody tr.docs-row { border-bottom-color: rgba(139,175,200,0.14); }
}
:root[data-theme="dark"] .docs-row:hover { background: rgba(139,175,200,0.07); }
:root[data-theme="dark"] .docs-c-title,
:root[data-theme="dark"] .docs-fname { color: #EAF0F6; }

/* ── Documents page — collapsible accordion sections ────────────── */
.doc-acc {
  background: #fff;
  border: 1px solid rgba(16,24,48,0.08);
  border-radius: var(--radius-outer, 16px);
  box-shadow: none;
  margin-bottom: 16px;
  overflow: hidden;
}
.doc-acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: #F7F8FA;   /* match authorisations section headers */
  user-select: none;
}
:root[data-theme="dark"] .doc-acc > summary { background: #1B2942; }
.doc-acc > summary::-webkit-details-marker { display: none; }
.doc-acc > summary:hover { background: rgba(105,141,170,0.05); }
.doc-acc-title {
  font-family: 'Marcellus', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--text, #0D1B2E);
  letter-spacing: 0.01em;
}
.doc-acc-count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: rgba(140, 36, 18, 0.10); color: #b24d37;
}
.doc-acc-count--complete { background: rgba(56, 142, 96, 0.14); color: #2F855A; }
:root[data-theme="dark"] .doc-acc-count { background: rgba(178,77,55,0.18); color: #e07e6a; }
:root[data-theme="dark"] .doc-acc-count--complete { background: rgba(56,142,96,0.22); color: #5dba82; }
.doc-acc-chev { margin-left: auto; color: var(--muted); flex-shrink: 0; transition: transform 200ms ease; }
.doc-acc[open] > summary .doc-acc-chev { transform: rotate(180deg); }
.doc-acc-body { padding: 4px 20px 20px; }
.doc-acc-body .doc-section-sub { margin: 12px 0 24px; }
.doc-acc-empty { color: var(--muted); padding: 6px 0; font-size: 14px; }
/* Inner containers whose card children should flow into the parent .doc-grid
   (so FICA cards + advisor-requested cards share one grid: side by side, wrapping). */
.doc-grid-flow { display: contents; }
.doc-acc-body--flush { padding: 0; }
.doc-acc-body--flush .docs-table-wrap { border: none; box-shadow: none; border-radius: 0; }

:root[data-theme="dark"] .doc-acc { background: rgba(15,29,48,0.7); border-color: rgba(78,122,151,0.2); }
:root[data-theme="dark"] .doc-acc > summary:hover { background: rgba(139,175,200,0.06); }
:root[data-theme="dark"] .doc-acc-title { color: #EAF0F6; }

.dc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.dc-head h3 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0;
}
.dc-desc {
  color: var(--muted);
  font-size: 13px;
  font-family: 'Quicksand', sans-serif;
  line-height: 1.5;
  margin: 6px 0 14px;
  min-height: 38px; /* ensures all cards have same baseline before upload area */
}

/* Status pills — match portal's auth-status-pill style exactly */
.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-family: 'Quicksand', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
}
.status svg { width: 12px; height: 12px; flex-shrink: 0; }
/* Match existing portal pill colors exactly */
.status--done     { background: rgba(19,102,57,0.10);   color: #136639; }
.status--required { background: rgba(140,36,18,0.10);   color: #8C2412; }
.status--pending  { background: rgba(105,141,170,0.12); color: var(--ac-steel,#698DAA); }
:root[data-theme="dark"] .status--done     { background: rgba(51,179,108,0.18); color: #4fd98a; }
:root[data-theme="dark"] .status--required { background: rgba(178,77,55,0.18);  color: #e07e6a; }
:root[data-theme="dark"] .status--pending  { background: rgba(105,141,170,0.18); color: #8BAFC8; }

/* Segmented control inside doc-card — no pill background */
.segmented {
  display: inline-flex;
  background: transparent;
  border-radius: 0;
  padding: 0;
  gap: 6px;
  margin: 12px 0 14px;
}
.doc-card .document-type-pill {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.doc-card .document-type-pill input { display: none; }
.doc-card .document-type-pill span {
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-soft);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
}
.doc-card .document-type-pill input:checked + span {
  background: #101830;
  color: #FAF7F2;
  border-color: #101830;
}
.doc-card .document-type-pill:not(:has(input:checked)) span:hover {
  color: var(--ink);
  border-color: rgba(16,24,48,0.18);
}
:root[data-theme="dark"] .doc-card .document-type-pill input:checked + span { background: #1C3149; color: #EAF0F6; border-color: #1C3149; }

/* Dual front/back slots — grid is inside single-column upload-grid,
   so .dual fills full card width and splits it 50/50 */
.dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.dual > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.slot-label {
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-soft);
  margin-bottom: 6px;
  text-align: center;
}
/* Dual dropzones: icon only, centred, matches single-slot height */
.dual .dropzone {
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  gap: 0;
  min-height: 44px;
  width: 100%;
}
.dual .dropzone .dz-title { display: none; }
.dual .dropzone .dz-hint  { display: none; }

/* Dropzone — compact, matches uploaded chip height */
.dropzone {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border: 1.5px dashed rgba(16,24,48,0.18);
  border-radius: 8px;
  background: #F5F8FB;
  color: #6B7488;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}
.dropzone:hover { border-color: #6888A8; background: #EAF0F6; }
/* Dual slots — icon-only, matches single-slot height */
.dual .dropzone {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  padding: 10px 8px;
  min-height: 0;
}
.dual .dropzone .dz-title { display: none; }
.dual .dropzone .dz-hint  { display: none; }
/* Requested doc dropzone — keep row layout */
.dropzone--row { flex-direction: row; justify-content: flex-start; text-align: left; padding: 10px 14px; gap: 12px; }
.dz-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid rgba(16,24,48,0.08);
  color: #6888A8;
  flex-shrink: 0;
}
.dz-icon svg { width: 17px; height: 17px; }
.dz-title { font-family: 'Quicksand', sans-serif; font-size: 13px; font-weight: 600; color: var(--ink); }
.dz-hint  { font-family: 'Quicksand', sans-serif; font-size: 11px; color: var(--muted-soft); }

:root[data-theme="dark"] .dropzone { background: rgba(0,0,0,0.15); border-color: rgba(139,175,200,0.22); }
:root[data-theme="dark"] .dropzone:hover { border-color: #6888A8; background: rgba(104,136,168,0.12); }
:root[data-theme="dark"] .dz-icon { background: rgba(0,0,0,0.2); border-color: rgba(139,175,200,0.18); }

/* Hover wrapper — block so it sizes to exactly the .file chip */
.file-hover-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.file-hover-wrap .file {
  display: flex;
  width: 100%;
}
.file-actions--hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 8px;                 /* match the .file chip beneath (was inherit → 0/square) */
  border: 1px solid rgba(160, 176, 197, 0.32);
  /* Blur dropped: at 92% opaque the 2px was barely visible, but the element
     exists (at opacity 0) on every file row, so each one was a live backdrop
     root the browser had to re-blur while the documents list scrolled. */
  background: rgba(244, 247, 251, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.file-hover-wrap:hover .file-actions--hover {
  opacity: 1;
  pointer-events: auto;
}

/* File chip */
.file {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(16,24,48,0.08);
  border-radius: 8px;
  background: #fff;
  min-width: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.ftype {
  flex-shrink: 0; width: 40px; height: 46px;
  border-radius: 4px; background: #EAF0F6;
  border: 1px solid rgba(16,24,48,0.08);
  display: grid; place-items: center; position: relative;
}
.ftype::before {
  content: ""; position: absolute; top: 0; right: 0;
  border-width: 0 9px 9px 0; border-style: solid;
  border-color: #D6E0EB #fff; border-top-right-radius: 4px;
}
.ftype span { font-family: 'Quicksand', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: #3F5E85; }
.finfo { min-width: 0; flex: 1; overflow: hidden; }
.fname { font-family: 'Quicksand', sans-serif; font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
.fmeta { font-family: 'Quicksand', sans-serif; font-size: 12px; color: var(--muted-soft); margin-top: 1px; }
.file-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }

:root[data-theme="dark"] .file { background: rgba(0,0,0,0.15); border-color: rgba(139,175,200,0.15); }
:root[data-theme="dark"] .ftype { background: rgba(63,94,133,0.22); border-color: rgba(139,175,200,0.15); }
:root[data-theme="dark"] .ftype::before { border-color: rgba(104,136,168,0.3) rgba(15,29,48,0.7); }
:root[data-theme="dark"] .file-actions--hover { background: rgba(10, 18, 36, 0.82); border-color: rgba(139,175,200,0.2); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: 'Quicksand', sans-serif; font-size: 13px; font-weight: 600;
  border-radius: 999px; border: 1px solid transparent;
  padding: 9px 18px; cursor: pointer;
  transition: all 160ms ease; white-space: nowrap; box-shadow: none;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn:active { transform: scale(0.98); }
.btn--primary { background: #101830; color: #FAF7F2; }
.btn--primary:hover { background: #1A2447; opacity:1; transform:none; box-shadow:none; }
.btn--ghost { background: #fff; color: #6B7488; border-color: rgba(16,24,48,0.18); }
.btn--ghost:hover { background: #EAF0F6; color: var(--ink); transform:none; opacity:1; box-shadow:none; }
.btn--icon { width: 34px; height: 34px; padding: 0; flex-shrink: 0; }
.btn--icon svg { width: 16px; height: 16px; }
:root[data-theme="dark"] .btn--primary { background: #1C3149; color: #EAF0F6; }
:root[data-theme="dark"] .btn--primary:hover { background: #223b57; }
:root[data-theme="dark"] .btn--ghost { background: rgba(0,0,0,0.15); color: #8BAFC8; border-color: rgba(139,175,200,0.22); }
:root[data-theme="dark"] .btn--ghost:hover { background: rgba(104,136,168,0.12); color: #c6d8e6; }

/* Requested docs container — wide enough for a ~30-char doc name on one line */
#otherDocsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 16px;
  align-items: start;
  width: 100%;
}
@media (max-width: 880px)  { #otherDocsContainer { grid-template-columns: minmax(0, 1fr); } }

/* Requested doc card */
.requested {
  background: #fff;
  border: 1px solid rgba(16,24,48,0.08);
  border-radius: var(--radius-outer, 16px);
  box-shadow: none;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.req-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.req-top > div:first-child { min-width: 0; flex: 1 1 auto; }
.req-top h3 { font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); margin: 0; }
.req-top .dashboard-item-pill { flex-shrink: 0; white-space: nowrap; }
.req-top .req-for { font-family: 'Quicksand', sans-serif; font-size: 13px; color: var(--muted-soft); margin-top: 3px; font-style: italic; }
.req-top .req-for--placeholder { visibility: hidden; }

:root[data-theme="dark"] .doc-card,
:root[data-theme="dark"] .requested { background: rgba(15,29,48,0.7); border-color: rgba(78,122,151,0.2); }
:root[data-theme="dark"] .doc-page-head { border-color: rgba(78,122,151,0.15); }

@media (max-width: 560px) {
  .doc-page-head { flex-direction: column; align-items: flex-start; }
  .dual { grid-template-columns: 1fr; }
  .requested { padding: 18px; }
}

/* legacy — keep for old references */
.documents-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 700px) {
  .documents-grid { grid-template-columns: 1fr; }
}

[data-section="documents"] .portal-topbar {
  margin-bottom: 20px;
}

/* old duplicate removed — see new doc-section-title above */

/* ── FICA compact 4-column row ────────────────────────────── */
.fica-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;   /* all cards same height */
}
.fica-cards-row--other {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .fica-cards-row { grid-template-columns: repeat(2, 1fr); }
  .fica-cards-row--other { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .fica-cards-row,
  .fica-cards-row--other { grid-template-columns: 1fr; }
}

/* ── FICA card (compact) ───────────────────────────────────── */
.fica-card {
  background: #fff;
  border: 1px solid rgba(13,27,46,0.10);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}
:root[data-theme="dark"] .fica-card {
  background: rgba(15,29,48,0.7);
  border-color: rgba(78,122,151,0.2);
}

.fica-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.fica-card-title {
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.fica-card-sub {
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

/* Note from advisor */
.fica-card-note {
  font-style: italic;
  color: var(--brand);
}

/* ── Upload card overrides inside FICA cards ─────────────── */
.fica-card .upload-grid {
  flex: 1;
  min-height: 0;
}
.fica-card .upload-card {
  min-height: 0;
  padding: 12px;
  gap: 8px;
  border-radius: 12px;
  border-width: 1.5px;
}
/* Compact sub-card titles (ID Front / Back) */
.fica-card .upload-card h3 {
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
/* Compact upload trigger button */
.fica-card .upload-trigger {
  font-size: 11px;
  padding: 6px 14px;
  min-height: 30px;
}
/* Preview inside FICA card — tighten up */
.fica-card .upload-preview-badge {
  width: 32px;
  height: 32px;
  font-size: 9px;
  border-radius: 8px;
}
.fica-card .upload-preview-copy strong {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  display: block;
}
.fica-card .upload-preview-copy .meta {
  font-size: 10px;
}
.fica-card .upload-preview-actions { gap: 6px; }
.fica-card .stack-item-link { font-size: 11px; padding: 5px 12px; min-height: 28px; }
.fica-card .upload-delete-button { width: 22px; height: 22px; font-size: 12px; }

/* document-type-row inside FICA card */
.fica-card .document-type-row { gap: 6px; }
.fica-card .document-type-pill span {
  padding: 4px 10px;
  font-size: 11px;
}

/* Status pill — smaller inside FICA cards */
.fica-card .document-status-pill {
  font-size: 11px;
  padding: 3px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Requested doc card — slightly tinted background */
.fica-card--request {
  background: rgba(105,141,170,0.05);
  border-color: rgba(105,141,170,0.22);
}
:root[data-theme="dark"] .fica-card--request {
  background: rgba(28,49,73,0.3);
  border-color: rgba(78,122,151,0.28);
}

.documents-panel-stack {
  display: grid;
  gap: 22px;
}


.document-section-card--soft {
  background: rgba(139, 175, 200, 0.12);
  border-color: rgba(105, 141, 170, 0.28);
}

.upload-grid--single {
  grid-template-columns: 1fr;
}

.upload-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 16px;
  min-height: 196px;
  border: 2px dashed rgba(105,141,170,0.30);
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
  transition: border-color 150ms ease, background 150ms ease;
  align-items: stretch;
}

.upload-card:hover {
  border-color: rgba(105,141,170,0.55);
  background: rgba(105,141,170,0.05);
}

.upload-card h4 {
  margin: 0;
  font-family: Marcellus, serif;
  font-size: 16px;
  font-weight: 400;
}

.upload-card h3 {
  margin: 0;
  font-family: Marcellus, serif;
  font-size: 16px;
  font-weight: 400;
}

.upload-card h3:empty {
  display: none;
}

.upload-card--centered {
  grid-template-rows: 1fr auto;
}

.upload-card--centered .upload-actions {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.upload-card--centered .upload-file-name {
  min-height: 0;
}

.upload-card--preview {
  grid-template-rows: auto 1fr;
}

/* When there's no title (--centered), the single child must fill the card */
.upload-card--centered.upload-card--preview {
  grid-template-rows: 1fr;
}

.upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 1;
  margin: 0;
  min-height: 0;
}

.upload-actions--centered {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.upload-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(13,27,46,0.13);
  background: rgba(255,255,255,0.92);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.upload-trigger:hover { background: rgba(105,141,170,0.12); border-color: rgba(105,141,170,0.40); }

.upload-or { font-size: 13px; font-weight: 600; color: var(--muted); }

.upload-card input[type="file"] { display: none; }
.upload-file-name { min-height: 18px; margin-top: auto; font-size: 12px; color: var(--muted); text-align: center; }
.upload-file-name:empty { display: none; }

.upload-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.upload-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(105,141,170,0.18);
  overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  width: 0%;
  background: #698DAA;
  border-radius: 999px;
  transition: width 150ms ease;
}
.upload-progress-label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
:root[data-theme="dark"] .upload-progress-track { background: rgba(139,175,200,0.16); }
:root[data-theme="dark"] .upload-progress-fill { background: #8BAFC8; }

.upload-preview {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  align-items: center;
  text-align: center;
}

.upload-preview-file {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}

.upload-preview-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(105,141,170,0.12);
  border: 1px solid rgba(105,141,170,0.22);
  color: var(--theme-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.upload-preview-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  text-align: left;
}

.upload-preview-copy strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--theme-ink);
  word-break: break-word;
}

.upload-preview-copy .meta {
  margin: 0;
}

.upload-preview-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.upload-preview-link {
  min-height: 34px;
}

.upload-delete-button {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(13,27,46,0.10);
  background: rgba(13,27,46,0.06);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.upload-delete-button:hover {
  background: rgba(140,36,18,0.10);
  color: var(--danger);
  border-color: rgba(140,36,18,0.15);
}

.stack-item-head--split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.stack-item-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: #1C3149;
  color: #8BAFC8;
  font-weight: 700;
  text-decoration: none;
}

/* ── Badge ───────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  min-width: 92px;
  min-height: 30px;
  padding: 0 12px;
  background: rgba(13,27,46,0.08);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
  flex: 0 0 auto;
}

.badge.is-submitted,
.badge.is-completed {
  background: rgba(19,102,57,0.12);
  color: var(--success);
}

.badge.is-not_started,
.badge.is-draft {
  background: rgba(13,27,46,0.07);
  color: var(--muted);
}

.badge.is-sent,
.badge.is-viewed,
.badge.is-in_progress {
  background: rgba(105,141,170,0.14);
  color: #2E6385;
}

/* ── Status ──────────────────────────────────────────────── */
.status       { margin: 12px 0 0; min-height: 1.4em; color: var(--muted); font-size: 13px; }
.status.is-error   { color: var(--danger); }
.status.is-success { color: var(--success); }

/* ── Utility ─────────────────────────────────────────────── */
.hidden,
.section-view.hidden { display: none !important; }

/* ── Fade-in transitions (Change 16) ────────────────────── */
@keyframes portalSectionFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section-view:not(.hidden) {
  /* `backwards`, not `both`. `both` holds the last keyframe's
     `transform: translateY(0)` forever, and an identity transform still makes
     this a containing block for every `position: fixed` descendant — they get
     positioned against the section instead of the viewport, which puts a
     dialog or menu wherever the section happens to be once you have scrolled.
     This rule covers EVERY client-portal section, so the trap was set for all
     of them. The fade is unchanged: nothing sets opacity on .section-view, so
     1 is its natural value. */
  animation: portalSectionFadeIn 200ms ease backwards;
}

/* ── Portal topbar ───────────────────────────────────────── */
.portal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(22,28,51,0.08);
}

.portal-topbar-breadcrumb {
  font-family: 'Marcellus', serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #161C33;
  white-space: nowrap;
}

.portal-topbar-date {
  font-family: 'Quicksand', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.portal-topbar-sep {
  opacity: 0.45;
  margin: 0 4px;
}

/* Description line below section topbar (onboarding, docs, authorisations) */
.portal-section-desc {
  margin: -14px 0 24px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* ── Dashboard hero ──────────────────────────────────────── */
#dashboardHero {
  margin-bottom: 32px;
}

.hero-greeting-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}

.hero-greeting-text {
  flex: 1 1 0;
  min-width: 0;
}

.hero-greeting-line {
  font-family: 'Marcellus', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  color: #161C33;
  line-height: 1.15;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}

.hero-greeting-part {
  font-style: normal;
}

.hero-greeting-name {
  font-style: normal;
  color: #698DAA;
}

.hero-greeting-emoji {
  font-style: normal;
  font-size: 29px;
  vertical-align: middle;
  margin-left: 2px;
}

.hero-attention-line {
  font-family: 'Marcellus', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  color: #161C33;
  margin: 0 0 10px;
  line-height: 1.25;
}

.hero-sub-line {
  margin: 0;
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* Advisor floating card */
.hero-advisor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 16px 20px;
  border: 1px solid rgba(22,28,51,0.09);
  border-radius: 16px;
  background: rgba(255,255,255,0.70);
  text-align: center;
  min-width: 120px;
}

.hero-advisor-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #161C33;
  color: #C5D1DC;
  font-family: 'Marcellus', serif;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

.hero-advisor-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-advisor-name {
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #161C33;
  white-space: nowrap;
}

.hero-advisor-label {
  font-family: 'Quicksand', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Separator */
.hero-divider {
  border: none;
  border-top: 1px solid rgba(22,28,51,0.08);
  margin: 0 0 24px;
}

/* Body row: donut left, checklist right */
.hero-body-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: start;
}

/* Donut chart column */
.hero-donut-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}

.hero-donut {
  width: 120px;
  height: 120px;
}

.hero-donut-track {
  stroke: rgba(22,28,51,0.08);
}

.hero-donut-fill {
  stroke: #161C33;
  stroke-linecap: round;
  transition: stroke-dasharray 600ms cubic-bezier(.4,0,.2,1);
}

/* Percentage overlaid in the centre */
.hero-donut-centre {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-donut-pct {
  font-family: 'Marcellus', serif;
  font-size: 24px;
  color: #161C33;
  line-height: 1;
}

.hero-donut-labels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.hero-donut-title {
  font-family: 'Quicksand', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #161C33;
}

.hero-donut-sub {
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  color: var(--muted);
}

/* Checklist column */
.hero-checklist-col {
  display: flex;
  flex-direction: column;
}

.hero-checklist-col--full {
  width: 100%;
}

.hero-checklist-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  transition: background 140ms ease;
}

.hero-checklist-row:first-child {
  border-top: none;
}

.hero-checklist-row:last-child {
  border-bottom: none;
}

.hero-checklist-row:hover {
  background: rgba(105,141,170,0.06);
  transform: none;
  box-shadow: none;
  opacity: 1;
}

.hero-checklist-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}

.hero-checklist-dot.is-complete {
  background: #33b36c;
  box-shadow: none;
}

.hero-checklist-dot.is-progress {
  background: #d4a33d;
  box-shadow: none;
}

.hero-checklist-dot.is-pending {
  background: rgba(22,28,51,0.30);
  box-shadow: none;
}

.hero-checklist-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}

.hero-checklist-title {
  font-family: 'Quicksand', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1D1E1E;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hero-checklist-sub {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-checklist-status {
  font-family: 'Quicksand', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* hero-checklist-pill colours (base from master pill token) */
.hero-checklist-pill.is-inprogress,
.hero-checklist-pill.is-progress {
  background: rgba(235,120,20,0.13);
  color: #a85209;   /* was #c45e0a — 4.24:1 on white, under the 4.5 an 11px label needs; this is 5.42 */
}

.hero-checklist-pill.is-required {
  background: rgba(140,36,18,0.08);
  color: #b24d37;
}

.hero-checklist-pill.is-complete {
  background: rgba(51,179,108,0.14);
  color: rgb(22,130,74);
}

[data-theme="dark"] .hero-checklist-pill.is-inprogress,
[data-theme="dark"] .hero-checklist-pill.is-progress {
  background: rgba(235,120,20,0.18);
  color: #f5a05a;
}

[data-theme="dark"] .hero-checklist-pill.is-required {
  background: rgba(176,79,65,0.18);
  color: #f08f80;
}

[data-theme="dark"] .hero-checklist-pill.is-complete {
  background: rgba(51,179,108,0.16);
  color: #55d58b;
}

.hero-checklist-arrow {
  color: var(--muted);
  font-size: 16px;
  opacity: 0.5;
}

.hero-checklist-empty {
  padding: 16px 20px;
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

/* ── Dashboard list cards — borderless/minimal ───────────── */
.dashboard-list-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.65);
  overflow: hidden;
  box-shadow: none;
}

/* ── Profile loading skeleton (Change 6) ────────────────── */
.profile-loading-state {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--panel);
  border-radius: 16px;
  border: 1px solid var(--line);
}

.profile-loading-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--line) 25%, rgba(196,211,226,0.4) 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  flex-shrink: 0;
}

.profile-loading-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.profile-loading-lines span {
  display: block;
  height: 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--line) 25%, rgba(196,211,226,0.4) 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
}

.profile-loading-lines span:nth-child(1) { width: 55%; }
.profile-loading-lines span:nth-child(2) { width: 38%; animation-delay: 0.1s; }
.profile-loading-lines span:nth-child(3) { width: 65%; animation-delay: 0.2s; }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1080px) {
  .portal-hero,
  .split-grid,
  .card-grid,
  #onboardingCards,
  .stat-grid,
  .profile-grid,
  .field-grid { grid-template-columns: 1fr; }

  /* Prevent iOS Safari from zooming on input focus — requires font-size >= 16px */
  input, textarea, select,
  .auth-field input,
  .ob-field input {
    font-size: 16px !important;
  }

  .portal-hero { grid-template-columns: 1fr; }
  .hero-copy { border-right: none; border-bottom: 1px solid var(--line); }
  /* Stack sidebar above content on narrow viewports */
  .app-shell { flex-direction: column; }
  .sidebar { position: static; width: 100%; flex: none; flex-direction: row; flex-wrap: wrap; }
  .sidebar.sidebar--expanded { width: 100%; }
  .upload-grid { grid-template-columns: 1fr; }

  /* Hero body: stack donut above checklist */
  .hero-body-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hero-donut-col {
    flex-direction: row;
    gap: 20px;
    justify-content: flex-start;
    align-items: center;
  }
  .hero-donut-centre {
    position: static;
    width: auto;
    height: auto;
  }
  .hero-greeting-line { font-size: 18px; }
  .hero-attention-line { font-size: 18px; }
}

@media (max-width: 720px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .auth-panel { padding: 16px; }
  .content-panel { padding: 16px; }
  .hero-greeting-row { flex-direction: column; }
  .portal-topbar { flex-direction: column; align-items: flex-start; gap: 4px; }
  .portal-topbar-date { display: none; }
}

/* ════════════════════════════════════════════════════════
   DARK MODE — portal-specific overrides
   Mirrors affluence-portal-app.html aesthetic exactly
════════════════════════════════════════════════════════ */

/* Sidebar — transparent/borderless in dark mode */
[data-theme="dark"] .sidebar {
  border-right-color: transparent;
}


/* Nav links */
[data-theme="dark"] .nav-link:not(.active) {
  color: rgba(238,232,223,0.60);
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-theme="dark"] .nav-link:not(.active) .nav-icon,
[data-theme="dark"] .nav-link:not(.active) .nav-icon-lottie {
  color: #949599;
}

[data-theme="dark"] .nav-link:not(.active):hover {
  background: rgba(78,122,151,0.10);
  color: #EEE8DF;
}

[data-theme="dark"] .nav-link.active {
  background: rgba(78,122,151,0.18);
  color: #8BAFC8;
  box-shadow: none;
  border-color: transparent;
}

[data-theme="dark"] .nav-link.active::before {
  display: none;
}

[data-theme="dark"] .nav-link.active .nav-icon,
[data-theme="dark"] .nav-link.active .nav-icon-lottie {
  color: #8BAFC8;
}

/* Stat cards */
[data-theme="dark"] .stat-card {
  background: #0F1D30;
  border-color: rgba(78,122,151,0.26);
}

[data-theme="dark"] .stat-card strong {
  color: #EEE8DF;
}

[data-theme="dark"] .stat-card p {
  color: rgba(238,232,223,0.60);
}

[data-theme="dark"] .stat-card:hover {
  border-color: #6A8DA9;
  box-shadow: none;
}

/* Content panels */
[data-theme="dark"] .content-panel {
  background: #0F1D30;
  border-color: rgba(78,122,151,0.26);
}

[data-theme="dark"] .onboarding-card {
  background: #1B2942;
  border-color: rgba(78,122,151,0.26);
  box-shadow: none;
}

[data-theme="dark"] .onboarding-card:hover {
  border-color: rgba(105,141,170,0.42);
  box-shadow: none;
}

[data-theme="dark"] .document-section-card--soft {
  background: rgba(78,122,151,0.12);
  border-color: rgba(106,141,169,0.26);
}

[data-theme="dark"] .upload-card {
  background: #0F1D30;
  border-color: rgba(106,141,169,0.28);
}

[data-theme="dark"] .upload-card:hover {
  background: #0F1D30;
  border-color: rgba(106,141,169,0.42);
}

[data-theme="dark"] .upload-trigger {
  background: #0F1D30;
  border-color: rgba(106,141,169,0.26);
  color: var(--theme-ink);
}

[data-theme="dark"] .upload-preview-badge,
[data-theme="dark"] .upload-delete-button {
  background: #0F1D30;
  border-color: rgba(106,141,169,0.24);
}

[data-theme="dark"] .onboarding-card-icon {
  background: rgba(78,122,151,0.08);
  border-color: rgba(78,122,151,0.16);
  color: #8BAFC8;
}

[data-theme="dark"] .onboarding-progress {
  border-top-color: rgba(238,232,223,0.10);
}

[data-theme="dark"] .onboarding-progress-track {
  background: rgba(238,232,223,0.08);
}

[data-theme="dark"] .onboarding-progress-percent {
  color: rgba(238,232,223,0.54);
}

[data-theme="dark"] .onboarding-progress-pill.is-complete {
  background: rgba(51,179,108,0.16);
  color: #55d58b;
}

[data-theme="dark"] .onboarding-progress-pill.is-progress {
  background: rgba(212,163,61,0.16);
  color: #e0b45d;
}

[data-theme="dark"] .onboarding-progress-pill.is-required {
  background: rgba(176,79,65,0.18);
  color: #f08f80;
}

/* Dark mode pills use same solid-dark style — no overrides needed */

[data-theme="dark"] .dashboard-list-head {
  background: rgba(255,255,255,0.05);
  border-bottom-color: rgba(238,232,223,0.10);
}

[data-theme="dark"] .dashboard-list-head h3 {
  color: rgba(238,232,223,0.90);
}

[data-theme="dark"] .dashboard-view-all {
  color: rgba(238,232,223,0.60);
}

[data-theme="dark"] .dashboard-view-all:hover {
  color: rgba(238,232,223,0.90);
}

[data-theme="dark"] .dashboard-view-all:hover {
  color: #dbe9f4;
}

[data-theme="dark"] .dashboard-list-item {
  border-bottom-color: rgba(238,232,223,0.08);
}

[data-theme="dark"] .dashboard-list-item:hover {
  background: rgba(78,122,151,0.10);
}

[data-theme="dark"] .dashboard-item-copy span {
  color: rgba(238,232,223,0.58);
}

/* Timeline marker */
[data-theme="dark"] .timeline-marker::after {
  background: rgba(7,16,30,0.95);
  border-color: rgba(78,122,151,0.40);
}

[data-theme="dark"] .timeline-marker::before {
  background: rgba(78,122,151,0.30);
}

/* Stack items */
[data-theme="dark"] .stack-item {
  background: #0F1D30;
  border-color: rgba(78,122,151,0.22);
}

[data-theme="dark"] .stack-item:hover {
  border-color: rgba(105,141,170,0.45);
}

/* Panel head */
[data-theme="dark"] .panel-head {
  border-bottom-color: rgba(238,232,223,0.09);
}

[data-theme="dark"] .panel-head h2 {
  border-left-color: #6A8DA9;
  color: #EEE8DF;
}

/* Portal hero */
[data-theme="dark"] .portal-hero {
  background: rgba(12,26,46,0.90);
  border-color: rgba(78,122,151,0.22);
}

[data-theme="dark"] .hero-copy {
  border-right-color: rgba(238,232,223,0.09);
}

[data-theme="dark"] .hero-note {
  background: rgba(78,122,151,0.05);
}

/* Profile items */
[data-theme="dark"] .profile-item {
  background: #0F1D30;
  border-color: rgba(78,122,151,0.22);
}

[data-theme="dark"] .profile-summary-card,
[data-theme="dark"] .profile-detail-card {
  background: rgba(12,26,46,0.90);
  border-color: rgba(78,122,151,0.22);
}

[data-theme="dark"] .profile-avatar {
  box-shadow: inset 0 0 0 6px rgba(7,16,30,0.40);
}

[data-theme="dark"] .profile-link-badge {
  background: rgba(61,170,114,0.18);
  color: #62d18e;
}

[data-theme="dark"] .profile-detail-section {
  border-bottom-color: rgba(238,232,223,0.09);
}

[data-theme="dark"] .profile-section-title {
  border-left-color: #6A8DA9;
  color: #EEE8DF;
}

[data-theme="dark"] .profile-detail-item span,
[data-theme="dark"] .profile-summary-stats span,
[data-theme="dark"] .profile-summary-copy p {
  color: rgba(238,232,223,0.62);
}

[data-theme="dark"] .profile-detail-item strong,
[data-theme="dark"] .profile-summary-stats strong,
[data-theme="dark"] .profile-summary-copy h3 {
  color: #EEE8DF;
}

/* Document type pills */
[data-theme="dark"] .document-type-pill span {
  background: rgba(78,122,151,0.10);
  border-color: rgba(78,122,151,0.26);
  color: rgba(238,232,223,0.70);
}

[data-theme="dark"] .document-type-pill:hover span {
  border-color: rgba(105,141,170,0.45);
}

/* Auth/create-profile panel */
[data-theme="dark"] .auth-panel {
  background: #0F1D30;
  border-color: rgba(78,122,151,0.26);
}

[data-theme="dark"] .auth-entry {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="dark"] .actions button:not(.ghost),
[data-theme="dark"] .actions .button-link:not(.ghost),
[data-theme="dark"] .dashboard-open-authorisation {
  background: rgba(78,122,151,0.18);
  color: #8BAFC8;
  border: 1px solid rgba(106,141,169,0.30);
  box-shadow: none;
}

[data-theme="dark"] .actions button:not(.ghost):hover,
[data-theme="dark"] .actions .button-link:not(.ghost):hover,
[data-theme="dark"] .dashboard-open-authorisation:hover {
  background: rgba(78,122,151,0.24);
  color: #B7D0E1;
  border-color: rgba(106,141,169,0.44);
  box-shadow: none;
}


[data-theme="dark"] .authorisation-group {
  background: rgba(255,255,255,0.04);
  border-color: rgba(78,122,151,0.18);
}

[data-theme="dark"] .authorisation-group-head {
  background: #1B2942;
}

[data-theme="dark"] .authorisation-item {
  background: #162539;
}

[data-theme="dark"] .authorisation-pending-label--incomplete {
  border-color: rgba(212,163,61,0.30);
  background: rgba(212,163,61,0.14);
  color: #c9921a;
}

[data-theme="dark"] .authorisation-pending-label--required {
  border-color: rgba(178,77,55,0.35);
  background: rgba(140,36,18,0.18);
  color: #e07060;
}

/* Dashboard hero — dark mode */
[data-theme="dark"] .portal-topbar {
  border-bottom-color: rgba(238,232,223,0.09);
}

[data-theme="dark"] .portal-topbar-breadcrumb {
  color: rgba(238,232,223,0.80);
}

[data-theme="dark"] .portal-topbar-date {
  color: rgba(238,232,223,0.45);
}

[data-theme="dark"] .hero-greeting-line,
[data-theme="dark"] .hero-attention-line {
  color: #EEE8DF;
}

[data-theme="dark"] .hero-greeting-name {
  color: #8BAFC8;
}

[data-theme="dark"] .hero-advisor-card {
  background: #0F1D30;
  border-color: rgba(78,122,151,0.26);
}

[data-theme="dark"] .hero-advisor-name {
  color: #EEE8DF;
}

[data-theme="dark"] .hero-divider {
  border-top-color: rgba(238,232,223,0.09);
}

[data-theme="dark"] .hero-donut-track {
  stroke: rgba(238,232,223,0.10);
}

[data-theme="dark"] .hero-donut-fill {
  stroke: #8BAFC8;
}

[data-theme="dark"] .hero-donut-pct,
[data-theme="dark"] .hero-donut-title {
  color: #EEE8DF;
}

[data-theme="dark"] .hero-checklist-row {
  border-bottom-color: rgba(238,232,223,0.08);
}

[data-theme="dark"] .hero-checklist-row:first-child {
  border-top-color: rgba(238,232,223,0.08);
}

[data-theme="dark"] .hero-checklist-row:hover {
  background: rgba(78,122,151,0.10);
}

[data-theme="dark"] .hero-checklist-title {
  color: #EEE8DF;
}

[data-theme="dark"] .dashboard-list-card {
  background: #1B2942;
  border-color: rgba(139,175,200,0.14);
}

/* Sidebar brand — dark mode */
[data-theme="dark"] .sidebar-brand-name {
  color: #EEE8DF;
}

[data-theme="dark"] .sidebar-brand-sub {
  color: #EEE8DF;
}

[data-theme="dark"] .sidebar-signout-btn {
  color: rgba(238,232,223,0.55);
}

[data-theme="dark"] .sidebar-signout-btn:hover {
  background: rgba(176,79,65,0.18) !important;
  color: #f08f80 !important;
}

[data-theme="dark"] .sidebar-footer-divider {
  background: transparent;
}

[data-theme="dark"] .sidebar-profile-avatar {
  background: rgba(78,122,151,0.30);
  color: #C5D1DC;
}

[data-theme="dark"] .sidebar-profile-name {
  color: #EEE8DF;
}

[data-theme="dark"] .sidebar-toggle {
  border-color: rgba(238,232,223,0.14);
  background: rgba(238,232,223,0.06);
  color: rgba(238,232,223,0.55);
}

[data-theme="dark"] .sidebar-toggle:hover {
  background: rgba(238,232,223,0.12);
  color: #EEE8DF;
}

/* Section heading */
[data-theme="dark"] .eyebrow {
  color: #8BAFC8;
}

/* General label text */
[data-theme="dark"] label {
  color: rgba(238,232,223,0.50);
  letter-spacing: 0.04em;
}
[data-theme="dark"] label.auth-upload-btn {
  color: #8BAFC8;
  letter-spacing: normal;
  font-size: 12px;
}

@media (max-width: 980px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .profile-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Welcome screen replacement */
.welcome-screen {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}

.welcome-wrap {
  width: min(420px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.welcome-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 4px 0 28px;
}

.welcome-brand-mark {
  width: 56px;
  height: 56px;
}

.welcome-logo .brand-name {
  font-family: Marcellus, Georgia, serif;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.welcome-logo .brand-sub {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: 0.75;
}

.welcome-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(13, 27, 46, 0.12);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: none;
}

.welcome-card-shimmer {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(78, 122, 151, 0.55) 40%, rgba(139, 175, 200, 0.8) 55%, transparent 100%);
  opacity: 0.6;
}

.welcome-card-body {
  padding: 30px 32px 28px;
}

.welcome-title {
  margin: 0 0 6px;
  font-family: Marcellus, Georgia, serif;
  font-size: 32px;
  line-height: 1.05;
  color: var(--ink);
}

.welcome-subtitle {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

.welcome-actions .button-link {
  width: 100%;
}

.welcome-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px 32px;
  border-top: 1px solid var(--line);
}

.welcome-footer-badge {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.welcome-screen .status {
  margin-top: 16px;
  text-align: center;
}

[data-theme="dark"] .welcome-card {
  background: #0F1D30;
  border-color: rgba(78, 122, 151, 0.26);
  box-shadow: inset 0 1px 0 rgba(139, 175, 200, 0.12);
}

[data-theme="dark"] .welcome-logo .brand-name,
[data-theme="dark"] .welcome-title {
  color: var(--theme-ink);
}

[data-theme="dark"] .welcome-logo .brand-sub,
[data-theme="dark"] .welcome-subtitle,
[data-theme="dark"] .welcome-footer-badge {
  color: rgba(238, 232, 223, 0.72);
}

@media (max-width: 640px) {
  .welcome-wrap {
    width: 100%;
  }

  .welcome-card-body {
    padding: 24px 22px;
  }

  .welcome-footer {
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 14px 20px 18px;
  }
}


/* Verbatim-style welcome screen */
body.portal-auth-mode {
  min-height: 100dvh;
  --auth-grad-x: var(--grad-x, 50%);
  --auth-grad-y: var(--grad-y, 50%);
  --auth-grad-angle: var(--grad-angle, 160deg);
  background:
    radial-gradient(780px circle at var(--auth-grad-x) var(--auth-grad-y), rgba(78, 122, 151, 0.20) 0%, rgba(105, 141, 170, 0.08) 32%, transparent 68%),
    radial-gradient(680px circle at calc(100% - var(--auth-grad-x)) calc(100% - var(--auth-grad-y)), rgba(196, 211, 226, 0.22) 0%, rgba(196, 211, 226, 0.07) 40%, transparent 72%),
    linear-gradient(var(--auth-grad-angle), #F4F8FC 0%, #EEF3F8 48%, #E3ECF4 100%);
  background-attachment: fixed;
  background-color: #E3ECF4; /* fallback for safe areas */
  transition: background 950ms ease-out;
}

body.portal-auth-mode .return-pill {
  display: none !important;
}

body.portal-auth-mode .portal-shell {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 100dvh;
  overflow: visible;
  margin: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 40px) 16px calc(env(safe-area-inset-bottom, 0px) + 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

body.portal-auth-mode {
  overflow-y: auto;
}

/* Non-scrollable on mobile — content fits viewport */
@media (max-width: 640px) {
  body.portal-auth-mode {
    overflow: hidden;
    height: 100dvh;
  }
  body.portal-auth-mode .portal-shell {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 100dvh;
  }
}

body.portal-auth-mode .portal-hero {
  display: none !important;
}

.auth-entry {
  width: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

.auth-wrap {
  width: min(640px, 100%);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 32px;
}

.auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.auth-logo-mark {
  display: block;
  width: 72px;
  height: auto;
  color: var(--ac-navy);
  filter: none;
}

.auth-logo .brand-name {
  font-family: 'Marcellus', serif;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-navy);
  line-height: 1;
}

.auth-logo .brand-sub {
  font-family: 'Quicksand', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #698DAA;
  opacity: 0.9;
}

.auth-card {
  width: 100%;
  max-width: 640px;
  background: #ffffff;
  border: 1px solid rgba(105, 141, 170, 0.22);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.auth-card-shimmer {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #6A8DA9 40%, #8BAFC8 55%, transparent 100%);
  opacity: 0.6;
}

.auth-card-body {
  padding: 36px 32px 32px;
}

.auth-tab-strip,
.auth-tab {
  display: none !important;
}

.auth-section-title {
  margin: 0 0 4px;
  font-family: 'Marcellus', serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ac-navy);
}

.auth-section-sub {
  margin: 0 0 24px;
  font-family: 'Quicksand', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(22, 28, 51, 0.68);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.auth-field label {
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(22, 28, 51, 0.42);
}

.auth-field input {
  width: 100%;
  padding: 10px 14px;
  background: #f8fbff;
  border: 1px solid rgba(105, 141, 170, 0.24);
  border-radius: 8px;
  color: var(--ac-navy);
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color .22s ease, box-shadow .22s ease;
}

.auth-field input:focus {
  border-color: #6A8DA9;
  box-shadow: none;
}

.auth-field input::placeholder {
  color: rgba(22, 28, 51, 0.34);
}

.pw-wrap {
  position: relative;
}

.pw-wrap input {
  padding-right: 44px;
}

.pw-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 4px;
  color: rgba(22, 28, 51, 0.34);
  cursor: pointer;
  line-height: 0;
  box-shadow: none;
}

.pw-toggle:hover {
  color: #8BAFC8;
}

.auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin: -8px 0 12px;
}

.auth-forgot-row span {
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-size: 11px;
  color: #698DAA;
  opacity: 0.92;
}

.auth-signin-link {
  display: block;
  width: 100%;
  padding: 12px 24px;
  background: #6A93B5;
  border: none;
  border-radius: 12px;
  color: #fff;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: none;
  text-decoration: none;
}

.auth-signin-link:hover {
  background: #5a7d9a;
  opacity: 1;
}

.auth-signin-link.passkey-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
}

.passkey-btn-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 7px;
  flex-shrink: 0;
}

.passkey-btn-icons svg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  color: currentColor;
}

.auth-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  color: var(--muted-soft);
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-or-divider::before,
.auth-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(105, 141, 170, 0.22);
}

.auth-or-divider + .auth-secondary-btn {
  margin-top: 10px;
}

:root[data-theme="dark"] .auth-or-divider {
  color: rgba(238, 232, 223, 0.38);
}

:root[data-theme="dark"] .auth-or-divider::before,
:root[data-theme="dark"] .auth-or-divider::after {
  background: rgba(238, 232, 223, 0.10);
}

.auth-secondary-btn {
  display: block;
  width: 100%;
  padding: 11px 24px;
  background: transparent;
  border: 1px solid rgba(105, 141, 170, 0.26);
  border-radius: 12px;
  color: #698DAA;
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-top: 10px;
}

.auth-secondary-btn:hover {
  background: rgba(78,122,151,0.10);
  border-color: #6A8DA9;
}

.auth-field-optional {
  font-size: 10px;
  font-weight: 500;
  color: #698DAA;
  letter-spacing: 0.02em;
  margin-left: 4px;
}

#authPanelRegister .auth-section-title,
#authPanelRegister .auth-section-sub,
#authPanelRegister .actions { text-align: center; }

/* Individual / Entity segmented toggle on the register form */
.register-type-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  align-self: center;
  justify-self: center;
}
.register-type-pill { display: inline-flex; cursor: pointer; }
.register-type-pill input { position: absolute; opacity: 0; pointer-events: none; }
.register-type-pill span {
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-soft);
  padding: 7px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
}
.register-type-pill input:checked + span {
  background: #101830;
  color: #FAF7F2;
}
.register-type-pill:not(:has(input:checked)) span:hover { color: var(--ink); }
:root[data-theme="dark"] .register-type-pill input:checked + span { background: #1C3149; color: #EAF0F6; }

.register-subsection-title {
  grid-column: 1 / -1;
  margin: 4px 0 -4px;
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-soft);
}

.auth-text-btn {
  display: block;
  width: 100%;
  padding: 8px 0;
  background: transparent;
  border: none;
  color: var(--muted-soft);
  font-family: 'Quicksand', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 6px;
  cursor: pointer;
  text-align: center;
  transition: color 0.15s;
}
.auth-text-btn:hover { color: #698DAA; }

.auth-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px 32px;
  border-top: 1px solid rgba(105, 141, 170, 0.14);
}

.auth-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Quicksand', sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(22, 28, 51, 0.44);
}

.auth-page-footer {
  margin: auto 0 0;
  width: 100%;
  padding-top: 32px;
  text-align: center;
  font-family: 'Marcellus', serif;
  font-size: 14px;
  letter-spacing: 0.24em;
  color: rgba(22, 28, 51, 0.68);
  text-transform: uppercase;
}

body.portal-auth-mode #authStatus {
  display: none !important;
}

@media (max-width: 640px) {
  body.portal-auth-mode .portal-shell {
    padding: 32px 12px;
  }

  .auth-wrap {
    width: min(100%, calc(100vw - 24px));
    gap: 24px;
  }

  .auth-card-body {
    padding: 28px 20px 24px;
  }

  .auth-section-title {
    font-size: 21px;
  }

  .auth-footer {
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 14px 18px 18px;
  }

  .auth-page-footer {
    margin-top: 18px;
    font-size: 12px;
    letter-spacing: 0.18em;
  }
}


:root[data-theme="dark"] body.portal-auth-mode {
  background:
    radial-gradient(780px circle at var(--auth-grad-x) var(--auth-grad-y), rgba(105, 141, 170, 0.24) 0%, rgba(78, 122, 151, 0.09) 34%, transparent 70%),
    radial-gradient(680px circle at calc(100% - var(--auth-grad-x)) calc(100% - var(--auth-grad-y)), rgba(41, 74, 110, 0.22) 0%, rgba(41, 74, 110, 0.07) 42%, transparent 74%),
    linear-gradient(var(--auth-grad-angle), #070F1D 0%, #0B1829 50%, #102641 100%);
  background-color: #070F1D; /* covers safe areas */
  background-attachment: fixed;
}

:root[data-theme="dark"] .auth-logo-mark {
  color: #EEE8DF;
  filter: none;
}

:root[data-theme="dark"] .auth-logo .brand-name { color: #EEE8DF; }
:root[data-theme="dark"] .auth-logo-mark { color: #EEE8DF; filter: none; }
:root[data-theme="dark"] .auth-logo .brand-name { color: #EEE8DF; }
:root[data-theme="dark"] .auth-logo .brand-sub { color: #8BAFC8; opacity: 0.7; }
:root[data-theme="dark"] .auth-card {
  background: #0F1D30;
  border: 1px solid rgba(78,122,151,0.26);
  box-shadow: inset 0 1px 0 rgba(139,175,200,0.12);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
}
:root[data-theme="dark"] .auth-section-title { color: #EEE8DF; }
:root[data-theme="dark"] .auth-section-sub { color: rgba(238,232,223,0.60); }
:root[data-theme="dark"] .auth-field label { color: rgba(238,232,223,0.33); }
:root[data-theme="dark"] .auth-field input {
  background: rgba(7,16,30,0.55);
  border: 1px solid rgba(78,122,151,0.26);
  color: #EEE8DF;
}
:root[data-theme="dark"] .auth-field input::placeholder,
:root[data-theme="dark"] .pw-toggle { color: rgba(238,232,223,0.33); }
:root[data-theme="dark"] .auth-forgot-row span { color: #8BAFC8; opacity: 0.8; }
:root[data-theme="dark"] .auth-secondary-btn {
  border-color: rgba(78,122,151,0.26);
  color: #8BAFC8;
}
:root[data-theme="dark"] .auth-footer { border-top: 1px solid rgba(238,232,223,0.07); }
:root[data-theme="dark"] .auth-footer-badge { color: rgba(238,232,223,0.33); }
:root[data-theme="dark"] .auth-page-footer { color: rgba(238,232,223,0.72); }

:root[data-theme="dark"] body.portal-auth-mode .auth-panel.auth-entry,
:root[data-theme="dark"] body.portal-auth-mode .auth-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Guided portal walkthrough ───────────────────────────── */
.portal-tour-help {
  position: fixed;
  top: auto;
  right: 66px;
  bottom: 10px;
  z-index: 1000;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--ac-steel-border);
  background: var(--theme-toggle-bg);
  color: var(--theme-toggle-ink);
  /* No backdrop-filter — see .theme-toggle in theme.css. Fixed and always on
     screen, so a blur here re-blurs the page on every scroll frame. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.portal-tour-help:hover { border-color: var(--ac-steel-lt); }

body.portal-auth-mode .portal-tour-help,
body.portal-tour-active .theme-toggle,
body.portal-tour-active .portal-tour-help {
  display: inline-flex;
}

body.portal-auth-mode .portal-tour-help {
  display: none;
}

.portal-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(7, 16, 30, 0.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.portal-tour-overlay.is-active {
  opacity: 1;
  /* Block interaction with the dimmed page behind the tour — clicking through
     it switched sections underneath the popover and desynced the tour. The
     highlighted target (z-index 1003) and popover (1004) stay interactive. */
  pointer-events: auto;
}

[data-theme="dark"] .portal-tour-overlay {
  background: rgba(3, 8, 16, 0.36);
}

.portal-tour-popover {
  position: fixed;
  z-index: 1004;
  width: min(340px, calc(100vw - 32px));
  padding: 18px 18px 16px;
  border: 1px solid rgba(105, 141, 170, 0.26);
  border-radius: 20px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: none;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.portal-tour-popover.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.portal-tour-step-count {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}

.portal-tour-title {
  margin: 0 0 8px;
  font-family: Marcellus, Georgia, serif;
  font-size: 21px;
  line-height: 1.15;
}

.portal-tour-text {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 13px;
}

.portal-tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.portal-tour-secondary,
.portal-tour-primary {
  min-height: 38px;
  padding: 9px 15px;
  font-size: 12px;
}

.portal-tour-secondary {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}

.portal-tour-primary {
  background: #1C3149;
  color: #8BAFC8;
}

.portal-tour-highlight {
  position: relative !important;
  z-index: 1003 !important;
  box-shadow: 0 0 0 3px rgba(105,141,170,0.9) !important;
  outline: none;
}

.nav-link.portal-tour-highlight {
  background: rgba(255, 255, 255, 1) !important;
  color: #0D1B2E !important;
  border: 1px solid rgba(105,141,170,1) !important;
  box-shadow: 0 0 0 3px rgba(105,141,170,0.7) !important;
}

[data-theme="dark"] .portal-tour-popover {
  background: #0F1D30;
  border-color: rgba(105, 141, 170, 0.36);
  box-shadow: none;
}

[data-theme="dark"] .portal-tour-highlight {
  background: rgba(78, 122, 151, 0.22) !important;
  border-color: rgba(139, 175, 200, 0.72) !important;
  color: #EEE8DF !important;
  box-shadow: 0 0 0 3px rgba(139, 175, 200, 0.65) !important;
  outline-color: rgba(238, 232, 223, 0.96);
}

[data-theme="dark"] .content-panel.portal-tour-highlight {
  background: rgba(18, 37, 68, 0.98) !important;
  border-color: rgba(139, 175, 200, 0.9) !important;
}

[data-theme="dark"] .nav-link.portal-tour-highlight {
  background: rgba(78, 122, 151, 0.34) !important;
  color: #EEE8DF !important;
  border-color: rgba(139, 175, 200, 0.92) !important;
  box-shadow: 0 0 0 3px rgba(139, 175, 200, 0.65) !important;
}

@media (max-width: 720px) {
  .portal-tour-help {
    top: auto;
    right: 62px;
    bottom: 10px;
    width: 42px;
    height: 42px;
  }
}

.portal-tour-action-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle.portal-tour-highlight,
.portal-tour-help.portal-tour-highlight {
  position: fixed !important;
}

/* ── Mobile bottom tab bar ───────────────────────────────── */
.mobile-nav {
  display: none; /* hidden on desktop */
}

@media (max-width: 1080px) {
  /* Show bottom tab bar, hide sidebar on mobile */
  .sidebar { display: none; }

  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--panel);
    border-top: 1px solid var(--line);
    box-shadow: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    padding: 4px 4px;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: none;
    transform: none;
    transition: color 140ms ease, background 140ms ease;
  }

  .mobile-nav-btn:hover:not(:disabled),
  .mobile-nav-btn:active:not(:disabled) {
    opacity: 1;
    transform: none;
    box-shadow: none;
  }

  .mobile-nav-btn.active {
    color: var(--brand);
    background: transparent;
  }

  .mobile-nav-btn:not(.active) {
    color: var(--muted);
    background: transparent;
    border: 0;
  }

  .mobile-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .mobile-nav-icon svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  .mobile-nav-label {
    display: block;
    line-height: 1;
    white-space: nowrap;
  }

  /* Push page content up so it doesn't hide behind the tab bar */
  .app-shell {
    padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  }

  /* Dark mode */
  [data-theme="dark"] .mobile-nav {
    background: rgba(12,26,46,0.97);
    border-top-color: rgba(238,232,223,0.09);
    box-shadow: none;
  }

  [data-theme="dark"] .mobile-nav-btn:not(.active) {
    color: rgba(238,232,223,0.50);
  }

  [data-theme="dark"] .mobile-nav-btn.active {
    color: #8BAFC8;
  }

  /* ── Floating buttons → top-right on mobile, above topbar ── */
  .theme-toggle,
  body:not(.portal-auth-mode) .theme-toggle {
    top: 5px;
    bottom: auto;
    right: 12px;
    width: 42px;
    height: 42px;
    z-index: 1060;
  }

  .portal-tour-help {
    top: 5px;
    bottom: auto;
    right: 60px;
    width: 42px;
    height: 42px;
    z-index: 1060;
  }

  /* On the sign-in page there is no topbar to sit above, so the toggle drops
     back to the bottom-right corner it uses on a desktop — out of the way of
     the card and reachable by thumb. */
  body.portal-auth-mode .theme-toggle {
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    right: 12px;
  }

}


/* ── Autosave indicator (injected by autosave.js next to Return link) ── */
.autosave-indicator {
  display: inline-flex;
  align-items: center;
  font-family: "Quicksand", sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin-left: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  transition: opacity 0.3s;
}
.autosave-indicator.is-saving {
  color: var(--muted, #6b7a96);
  opacity: 0.7;
}
.autosave-indicator.is-saved {
  color: #136639;
  background: rgba(30,140,80,0.08);
  border: 1px solid rgba(30,140,80,0.25);
}
.autosave-indicator.is-restored {
  color: #7a5200;
  background: rgba(200,145,0,0.09);
  border: 1px solid rgba(200,145,0,0.35);
}
/* Draft could not be written — a full or blocked localStorage. Deliberately
   the loudest of the three states: the alternative is someone filling in a
   long form believing it is being kept. */
.autosave-indicator.is-error {
  color: #8C2412;
  background: rgba(158,75,66,0.10);
  border: 1px solid rgba(158,75,66,0.35);
}
:root[data-theme="dark"] .autosave-indicator.is-saved {
  color: #3daa72;
  background: rgba(61,170,114,0.10);
  border-color: rgba(61,170,114,0.30);
}
:root[data-theme="dark"] .autosave-indicator.is-error {
  color: #C98A80;
  background: rgba(201,138,128,0.12);
  border-color: rgba(201,138,128,0.32);
}
:root[data-theme="dark"] .autosave-indicator.is-restored {
  color: #f5c842;
  background: rgba(245,200,66,0.08);
  border-color: rgba(245,200,66,0.30);
}

/* ══════════════════════════════════════════════════════
   MOBILE DRAWER NAV  (≤ 1080px)
══════════════════════════════════════════════════════ */
@media (min-width: 1081px) {
  .portal-mobile-topbar,
  .mobile-nav-backdrop,
  #portalMobileMenuBtn {
    display: none;
  }
}

@media (max-width: 1080px) {
  /* Hide old bottom tab bar */
  .mobile-nav { display: none !important; }

  /* Layout: push content below fixed topbar */
  .app-shell {
    flex-direction: column;
    padding-top: 52px;
    padding-bottom: 0;
  }

  /* Ensure content has proper padding on all sides on mobile */
  .content {
    padding: 12px 12px 32px 12px !important;
  }

  /* Sidebar: full-height drawer — override BOTH desktop card styles AND the
     other 1080px block that sets flex-direction:row; flex-wrap:wrap on the sidebar */
  .sidebar {
    display: flex !important;
    flex-direction: column !important;   /* override flex-direction:row from earlier block */
    flex-wrap: nowrap !important;        /* override flex-wrap:wrap */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    width: min(76vw, 310px) !important;
    max-width: none;
    z-index: 1100;
    margin: 0 !important;             /* override margin: 12px */
    transform: translateX(-100%);
    transition: transform 300ms cubic-bezier(0.32, 0, 0.15, 1);
    border-radius: 0 20px 20px 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 0 !important;
  }

  .sidebar.mobile-drawer-open {
    transform: translateX(0);
    overflow-x: visible;
    overflow-y: auto;
  }

  /* Restore vertical nav layout inside drawer — scoped to open state for specificity */
  .sidebar.mobile-drawer-open .nav-list {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 4px 12px 8px;
    gap: 2px;
  }

  /* Nav links: row layout with icon + label (scoped → specificity 0,2,0 beats default 0,1,0) */
  .sidebar.mobile-drawer-open .nav-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 13px 14px !important;
    width: 100% !important;
    flex: none !important;
    overflow: visible !important;
    font-size: 13px;
    border-radius: 12px;
    min-height: 48px;
    transition: background 150ms ease, color 150ms ease !important;
  }

  /* The Settings nav item is an unfinished placeholder (no data-section, no
     panel to show) — the rule above's !important would otherwise un-hide it
     inside the drawer, and tapping it clears the active section with
     nothing to render, leaving a blank page. Keep it hidden until it ships. */
  .sidebar.mobile-drawer-open .sidebar-settings-btn.hidden {
    display: none !important;
  }

  /* Nav labels: always fully visible in drawer (scoped → beats max-width:0 default) */
  .sidebar.mobile-drawer-open .nav-label {
    display: block !important;
    max-width: none !important;
    width: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    flex: 1 1 auto !important;
    white-space: nowrap !important;
    transition: none !important;
    font-size: 13px;

    min-width: 0;
  }

  /* Icons: fixed 20px, centred */
  .sidebar.mobile-drawer-open .nav-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }

  .sidebar.mobile-drawer-open .nav-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }

  .sidebar.mobile-drawer-open .nav-icon-lottie,
  .sidebar.mobile-drawer-open .nav-icon-lottie > svg {
    width: 20px !important;
    height: 20px !important;
    flex: none !important;
  }

  /* Dashboard: single column on mobile */
  .dashboard-split {
    grid-template-columns: 1fr !important;
  }

  /* Backdrop */
  .mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1099;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .mobile-nav-backdrop.visible { display: block; }

  /* Mobile topbar */
  /* Hide topbar entirely on the login / register pages */
  body.portal-auth-mode .portal-mobile-topbar {
    display: none !important;
  }

  /* Hide the floating buttons on mobile — the topbar carries them instead.
     EXCEPT the theme toggle on the sign-in page: the topbar is hidden there
     (it holds the signed-in nav, which has nothing to point at yet), so
     hiding the floating button too left a client opening the app on a phone
     with no way to switch to dark mode until after they had signed in. The
     tour button stays hidden — there is no tour to take before signing in. */
  body:not(.portal-auth-mode) .theme-toggle,
  .portal-tour-help {
    display: none !important;
  }

  .portal-mobile-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    padding: 0 14px;
    z-index: 1050;
    /* Opaque bar, fixed to the top for the whole session — a backdrop blur had
       nothing to show through and made every scroll frame repaint. */
    background: var(--panel, #f5f6f7);
    border-bottom: 1px solid var(--line, rgba(0,0,0,0.08));
  }

  :root[data-theme="dark"] .portal-mobile-topbar {
    background: rgba(12,26,46,0.95);
    border-bottom-color: rgba(238,232,223,0.07);
  }

  /* Section name — pill chip like ChatGPT header label */
  .portal-mobile-topbar-section {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(13, 27, 46, 0.08);
    font-family: Marcellus, Georgia, serif;
    font-size: 15px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
    max-width: 55vw;
    cursor: default;
  }

  :root[data-theme="dark"] .portal-mobile-topbar-section {
    background: rgba(197, 209, 220, 0.12);
    color: #EEE8DF;
  }

  .portal-mobile-topbar-brand {
    display: none;
  }

  .portal-mobile-topbar-name {
    font-family: Marcellus, Georgia, serif;
    font-size: 15px;
    color: var(--brand, #161C33);
    white-space: nowrap;
  }

  :root[data-theme="dark"] .portal-mobile-topbar-name { color: #EEE8DF; }

  /* Topbar action buttons (dark mode toggle, help) — same style as staff portal */
  .mobile-topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
  }

  .mobile-topbar-btn {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border: 1.5px solid rgba(13, 27, 46, 0.16) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease, border-color 140ms ease;
    line-height: 1;
  }

  /* The transition was already declared for a hover that was never written. */
  .mobile-topbar-btn:hover {
    background: rgba(105,141,170,0.12) !important;
    border-color: rgba(13, 27, 46, 0.30) !important;
  }
  [data-theme="dark"] .mobile-topbar-btn:hover {
    background: rgba(139,175,200,0.16) !important;
    border-color: rgba(139,175,200,0.42) !important;
  }

  .mobile-topbar-btn span,
  .mobile-topbar-btn svg {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
  }

  .mobile-topbar-btn:active {
    background: rgba(13, 27, 46, 0.08) !important;
  }

  :root[data-theme="dark"] .mobile-topbar-btn {
    color: #EEE8DF;
    border-color: rgba(197, 209, 220, 0.22) !important;
  }
  :root[data-theme="dark"] .mobile-topbar-btn:active {
    background: rgba(197, 209, 220, 0.12) !important;
  }

  /* Hamburger */
  /* Hamburger — filled circle like ChatGPT sidebar toggle */
  .mobile-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    flex-shrink: 0;
    background: rgba(13, 27, 46, 0.10) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    cursor: pointer;
    color: var(--ink);
    transition: background 140ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-menu-btn:active {
    background: rgba(13, 27, 46, 0.20) !important;
  }

  .mobile-menu-btn:hover, .mobile-menu-btn:focus-visible {
    outline: none;
    box-shadow: none !important;
  }

  :root[data-theme="dark"] .mobile-menu-btn {
    background: rgba(197, 209, 220, 0.12) !important;
    color: #EEE8DF;
  }
  :root[data-theme="dark"] .mobile-menu-btn:active {
    background: rgba(197, 209, 220, 0.22) !important;
  }

  /* 2-bar hamburger wrapper — matches staff portal */
  .mobile-menu-bars {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .mobile-menu-bar {
    display: block;
    height: 2px;
    width: 16px;
    border-radius: 2px;
    background: currentColor;
    flex-shrink: 0;
  }

  /* Second bar: half width, left-aligned */
  .mobile-menu-bar--short {
    width: 8px;
  }

  /* Hide desktop sidebar toggle on mobile */
  .sidebar-toggle { display: none; }

  /* ── Client portal sidebar: match staff portal spacing exactly ── */

  /* Remove any padding the sidebar itself might add */
  #portalSidebar {
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Brand: compact row, same as staff portal */
  #portalSidebar .sidebar-brand,
  .sidebar-brand,
  .sidebar.sidebar--expanded .sidebar-brand {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 14px 16px 10px !important;
    margin: 0 !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Logo margin — explicit so viewBox whitespace doesn't eat the gap */
  .sidebar-brand-identity {
    gap: 0 !important;
    align-items: center !important;
    flex-direction: row !important;
  }
  .sidebar-brand-mark {
    margin-right: 14px !important;
    flex-shrink: 0 !important;
  }

  /* Section label — must NOT grow.
     The nav-label rule (.sidebar.mobile-drawer-open .nav-label) has specificity 0,3,0
     and sets flex:1 1 auto !important — this beats our old 0,1,0 rule.
     Fix: use selectors with specificity >= 0,3,0 so they win. */
  .sidebar.mobile-drawer-open .sidebar-section-label,
  #portalSidebar .sidebar-section-label {
    display: block !important;
    padding: 0 16px 4px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    max-height: 30px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    opacity: 0.7;
  }

  /* Nav list: start right after section label */
  .sidebar.mobile-drawer-open .nav-list,
  #portalSidebar .nav-list {
    padding: 2px 12px 8px !important;
  }

  /* Footer */
  .sidebar-footer {
    flex-direction: column;
    padding: 8px 12px 20px;
    gap: 4px;
    align-items: stretch;
  }

  .sidebar-footer-divider { display: block; }

  /* Profile row + signout: identical layout to nav items */
  .sidebar-footer .sidebar-profile-row,
  .sidebar-footer .sidebar-signout-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 13px 14px !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    flex: none !important;
  }

  /* Avatar: match nav icon size (20px) for perfect alignment */
  .sidebar-footer .sidebar-profile-avatar {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex: 0 0 20px !important;
    font-size: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Signout icon: same 20px as nav icons */
  .sidebar-footer .sidebar-signout-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex: 0 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .sidebar-footer .sidebar-signout-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Lottie colour fix — all themes: override baked-in Lottie JSON fill colours.
   Applies in both light and dark mode so no baked-in colour ever flashes through. */
.nav-icon-lottie svg path,
.nav-icon-lottie svg rect,
.nav-icon-lottie svg circle,
.nav-icon-lottie svg ellipse,
.nav-icon-lottie svg polygon,
.nav-icon-lottie svg polyline {
  fill: currentColor !important;
  stroke: none !important;
}

/* ── 2FA panel ───────────────────────────────────────────── */
#twoFactorPanel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    radial-gradient(780px circle at 50% 50%, rgba(78, 122, 151, 0.20) 0%, rgba(105, 141, 170, 0.08) 32%, transparent 68%),
    radial-gradient(680px circle at 50% 50%, rgba(196, 211, 226, 0.22) 0%, rgba(196, 211, 226, 0.07) 40%, transparent 72%),
    linear-gradient(160deg, #F4F8FC 0%, #EEF3F8 48%, #E3ECF4 100%);
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
}

#twoFactorPanel .status {
  min-height: 0;
  margin: 4px 0 0;
}

#twoFactorPanel .auth-card-body {
  padding-bottom: 20px;
}

#twoFactorPanel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#twoFactorPanel.hidden {
  display: none;
}

/* Passkey setup prompt — floats above everything as a modal overlay */
.passkey-prompt {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,27,46,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.passkey-prompt.hidden {
  display: none;
}

.passkey-prompt-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid rgba(105, 141, 170, 0.22);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: none;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.passkey-prompt-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(105,141,170,0.12);
  border: 1px solid rgba(105,141,170,0.20);
  color: var(--brand);
  margin-bottom: 6px;
}

.passkey-prompt-icon svg {
  width: 24px;
  height: 24px;
}

.passkey-prompt-card h3 {
  margin: 0;
  font-size: 24px;
}

.passkey-prompt-card p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* Passkey list in profile settings */
.passkey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.passkey-row:last-child {
  border-bottom: 0;
}

.passkey-row-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.passkey-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.passkey-row-meta {
  font-size: 11px;
  color: var(--muted);
}

.passkey-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: auto;
  padding: 0;
  border-radius: 8px;
  background: rgba(13,27,46,0.05);
  color: var(--muted);
  border: 1px solid rgba(13,27,46,0.10);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.passkey-delete-btn svg { width: 15px; height: 15px; }

.passkey-delete-btn:hover {
  background: rgba(192,57,43,0.10);
  color: #c0392b;
  border-color: rgba(192,57,43,0.20);
  opacity: 1;
  transform: none;
}

/* Red hover for the file/upload trash buttons (consistent bin delete affordance) */
.upload-delete-button:hover { color: #c0392b; border-color: rgba(192,57,43,0.25); }

/* ── Onboarding overlay ───────────────────────────────────────────────────── */

.ob-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(13,27,46,0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ob-overlay.hidden { display: none; }

.ob-wrap {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.ob-progress {
  display: flex;
  gap: 8px;
}

.ob-step {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.25);
  transition: background 0.2s;
}

.ob-step.active { background: #ffffff; }
.ob-step.done   { background: rgba(255,255,255,0.55); }

.ob-card {
  width: 100%;
  background: #ffffff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:root[data-theme="dark"] .ob-card {
  background: #1a2540;
  box-shadow: none;
}

.ob-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.ob-logo-mark { color: #161C33; }
:root[data-theme="dark"] .ob-logo-mark { color: #C5D1DC; }

.ob-brand {
  font-family: 'Marcellus', serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #161C33;
  text-transform: uppercase;
}
:root[data-theme="dark"] .ob-brand { color: #C5D1DC; }

.ob-title {
  font-family: 'Marcellus', serif;
  font-size: 21px;
  font-weight: 400;
  color: #161C33;
  margin: 0;
  line-height: 1.3;
}
:root[data-theme="dark"] .ob-title { color: #e8eaf0; }

.ob-sub {
  font-size: 14px;
  color: #5a6472;
  margin: 0;
  line-height: 1.55;
}
:root[data-theme="dark"] .ob-sub { color: #8fa0b8; }

.ob-fields { display: flex; flex-direction: column; gap: 14px; }

.ob-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ob-field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5a6472;
}
:root[data-theme="dark"] .ob-field label { color: #8fa0b8; }

.ob-field-optional {
  font-size: 10px;
  font-weight: 500;
  color: #698DAA;
  letter-spacing: 0.02em;
  margin-left: 4px;
}

.ob-field input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(13,27,46,0.18);
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  color: #161C33;
  background: #f8f9fb;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
:root[data-theme="dark"] .ob-field input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #e8eaf0;
}

.ob-field input:focus {
  border-color: #161C33;
  box-shadow: 0 0 0 3px rgba(22,28,51,0.08);
}
:root[data-theme="dark"] .ob-field input:focus {
  border-color: #C5D1DC;
  box-shadow: 0 0 0 3px rgba(197,209,220,0.12);
}

.ob-otp-entry { margin-top: 4px; }

.ob-method-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ob-method {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid rgba(13,27,46,0.14);
  border-radius: 12px;
  background: #f8f9fb;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
:root[data-theme="dark"] .ob-method {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}

.ob-method:hover {
  border-color: #161C33;
  background: #ffffff;
}
:root[data-theme="dark"] .ob-method:hover {
  border-color: #C5D1DC;
  background: rgba(255,255,255,0.09);
}

.ob-method.selected {
  border-color: #161C33;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(22,28,51,0.08);
}
:root[data-theme="dark"] .ob-method.selected {
  border-color: #C5D1DC;
  background: rgba(197,209,220,0.10);
  box-shadow: 0 0 0 3px rgba(197,209,220,0.12);
}

.ob-method-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(22,28,51,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #161C33;
}
:root[data-theme="dark"] .ob-method-icon {
  background: rgba(197,209,220,0.12);
  color: #C5D1DC;
}

.ob-method.selected .ob-method-icon {
  background: #161C33;
  color: #ffffff;
}
:root[data-theme="dark"] .ob-method.selected .ob-method-icon {
  background: #C5D1DC;
  color: #161C33;
}

.ob-method-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ob-method-text strong {
  font-size: 14px;
  font-weight: 600;
  color: #161C33;
}
:root[data-theme="dark"] .ob-method-text strong { color: #e8eaf0; }

.ob-method-text span {
  font-size: 12px;
  color: #6b7280;
}
:root[data-theme="dark"] .ob-method-text span { color: #8fa0b8; }

.ob-btn {
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, background 0.15s;
}

.ob-btn--primary {
  background: #161C33;
  color: #ffffff;
}
:root[data-theme="dark"] .ob-btn--primary {
  background: #C5D1DC;
  color: #161C33;
}

.ob-btn--primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ob-btn--primary:not(:disabled):hover { opacity: 0.88; }

.ob-btn--ghost {
  background: transparent;
  color: #5a6472;
  border: 1px solid rgba(13,27,46,0.14);
  margin-top: -6px;
}
:root[data-theme="dark"] .ob-btn--ghost {
  color: #8fa0b8;
  border-color: rgba(255,255,255,0.12);
}

:root[data-theme="dark"] #twoFactorPanel {
  background:
    radial-gradient(780px circle at 50% 50%, rgba(105, 141, 170, 0.24) 0%, rgba(78, 122, 151, 0.09) 34%, transparent 70%),
    radial-gradient(680px circle at 50% 50%, rgba(41, 74, 110, 0.22) 0%, rgba(41, 74, 110, 0.07) 42%, transparent 74%),
    linear-gradient(160deg, #070F1D 0%, #0B1829 50%, #102641 100%);
}

.ob-btn--ghost:hover { background: rgba(13,27,46,0.04); }

.ob-error {
  font-size: 13px;
  color: #b24d37;
  margin: 0;
}
.ob-error.hidden { display: none; }

/* ── Reduced motion ────────────────────────────────────────────────────────
   The client portal animated everything regardless of the setting: 50-odd
   transitions, the loading spinners, and the Lottie nav and bin icons. People
   turn Reduce Motion on for vestibular disorders, migraine and motion
   sickness — for them this app was moving constantly and there was no way to
   stop it. The staff portal has honoured it for months.

   Durations only, deliberately. TRANSFORMS are left alone because the portal
   uses them to POSITION things — translateY(-50%) centring is not movement,
   and zeroing transforms would knock those elements out of place. The
   JS-driven Lotties are gated separately in portal.js, since CSS cannot reach
   inside a canvas-less SVG player. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — SECTION CHROME
   ───────────────────────────────────────────────────────────────────────────
   The same treatment the staff portal got. A section was a bordered, rounded,
   filled panel holding bordered, rounded, filled cards — the same surface
   drawn twice — and between the content column's 12px and the panel's own
   16px the cards started 29px from the screen edge on a 375px phone.

   Scoped to the width where the mobile shell (top bar + drawer) is active, so
   the pill naming the section and the treatment that assumes it appear
   together. Desktop is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  /* Cards land 16px off each edge, matching the staff portal. !important
     because the rule it overrides carries one; the id raises specificity so
     this wins on merit rather than on source order. */
  #portalApp .content {
    padding: 12px 16px 32px !important;
  }

  /* ── Sections that HOLD their own cards: pure structure ───────────────────
     Checked per section rather than assumed — dashboard, portfolio,
     onboarding, documents and profile all carry their own card surfaces
     inside, so the panel around them was pure duplication.

     The #portalApp prefix is load-bearing, not decoration. theme.css loads
     AFTER this file and fills .content-panel with #0F1D30 in dark mode at
     :root[data-theme="dark"] .content-panel — three classes' worth of
     specificity. Without the id this rule ties and loses on source order, so
     the panel stayed a lighter navy box behind the content in dark mode while
     looking correctly stripped in light. */
  #portalApp .content-panel[data-section="dashboard"],
  #portalApp .content-panel[data-section="portfolio"],
  #portalApp .content-panel[data-section="onboarding"],
  #portalApp .content-panel[data-section="documents"],
  #portalApp .content-panel[data-section="profile"] {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  /* ── The section that IS the card keeps its surface ───────────────────────
     Tax Returns renders its steps, summary band and field grids straight onto
     the panel with no card of their own. Stripping it would leave the form
     floating on the page ground, so it keeps its surface and takes only the
     tighter inset. */
  .content-panel[data-section="tax-returns"] {
    padding: 14px;
    border-radius: 16px;
  }

  /* ── The page scrollbar, on touch only ────────────────────────────────────
     Ported from the staff portal, where the same rule hides the document's
     bar. Here it has to name .content instead: this portal pins body to
     overflow:hidden and scrolls .content, so that IS the page scroller, not
     an inner pane. Gated on pointer:coarse exactly as the staff rule is — a
     narrow desktop window keeps its bar, because there it is the only thing
     saying how far the page runs and a mouse has no other way to know. On a
     phone it is an overlay that fades on its own and the swipe says the same
     thing. Panes with their own scrollbars keep them. */
  @media (pointer: coarse) {
    #portalApp .content {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    #portalApp .content::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }
  }

  /* ── The greeting sits between the top bar and the first card ─────────────
     It had 0px above it and 32px below: flush under the bar and then a hole.
     Now it is spaced on both sides, weighted very slightly toward the content
     it introduces. */
  #dashboardHero {
    margin: 8px 0 22px;
  }

  /* ── The page title repeats the pill above it ─────────────────────────────
     The top bar already names the section, three centimetres higher up. The
     heading underneath said the same word twice and cost a line plus its
     divider. (The dashboard's date sits in this bar too, but it was already
     hidden below 720px.) */
  .content-panel > .portal-topbar {
    display: none;
  }

  /* ── The section pill is a control, so it looks and behaves like one ──────
     It opens the drawer, same as the burger. It was a <span> with
     cursor:default that did nothing when tapped. */
  .portal-mobile-topbar-section {
    border: 0;
    font-weight: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 140ms ease;
  }

  .portal-mobile-topbar-section:hover,
  .portal-mobile-topbar-section[aria-expanded="true"] {
    background: rgba(13, 27, 46, 0.14);
  }

  :root[data-theme="dark"] .portal-mobile-topbar-section:hover,
  :root[data-theme="dark"] .portal-mobile-topbar-section[aria-expanded="true"] {
    background: rgba(197, 209, 220, 0.2);
  }

  @media (prefers-reduced-motion: reduce) {
    .portal-mobile-topbar-section { transition: none; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — DOCUMENTS, MATCHED TO THE STAFF PORTAL
   ───────────────────────────────────────────────────────────────────────────
   Both portals render documents through the SAME markup — .docs-table,
   .docs-row, .docs-c-title, .docs-c-status, .col-actions — and had drifted
   into two different mobile layouts. The staff portal lays a row out as three
   flex bands (icon + title, then the meta strip, then the actions). This one
   pinned the icon absolutely and indented the title 54px to clear it, then
   dragged the meta and buttons back out with negative margins, which is what
   made the title crowd the icon and the rows run so tall.

   This ports the staff layout onto the identical classes. It also stops using
   the client-only .docs-mobile-* duplicates: the real cells become the bands,
   exactly as they do on the staff side, so there is one layout to maintain
   rather than two that drift.

   The mobile-only markup is hidden rather than removed — the JS that emits it
   is untouched, so this is a CSS change with a CSS-sized blast radius.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* ── The section heading: a label, not a banner ───────────────────────────
     "Required" was a 17px serif line on a filled bar. The staff portal makes
     these a quiet uppercase label with the count inline, so the eye skims to
     the documents rather than to the word above them. */
  /* The staff portal's equivalent band measures 71px — 13 top, 47 of content,
     11 bottom — and the 47 is the height of the search control that sits in
     its header. The client portal has no such control, so this band collapsed
     to 45 and the section read as cramped next to the staff one when the two
     were put side by side. Match the BAND, not the control: inventing a search
     button here just to fill the space would be worse than the gap it closes.
     (If the client's Documents ever gets a search of its own — 56 completed
     documents is a lot to scroll — it drops straight into this height.) */
  .doc-acc > summary.doc-acc-head {
    box-sizing: border-box;
    min-height: 71px;
    align-items: center;
    padding: 13px 16px 11px;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid rgba(16,24,48,0.07);
  }

  /* 10px of air between the heading's rule and the first row. Staff gets it
     from the gap between its header and .docs-table-wrap; the client's body is
     flush to the header, so the first row started hard against the rule. */
  .doc-acc-body .docs-table-wrap { padding-top: 10px; }
  :root[data-theme="dark"] .doc-acc > summary.doc-acc-head {
    background: transparent;
    border-bottom-color: rgba(139,175,200,0.10);
  }
  .doc-acc > summary.doc-acc-head:hover { background: transparent; }

  .doc-acc-title {
    font-family: Quicksand, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
  }

  .doc-acc-count {
    min-width: 20px; height: 20px; padding: 0 6px;
    font-size: 11px; font-weight: 700;
  }

  /* The body goes flush so the row dividers reach both edges of the card, the
     way they do on the staff portal. The 16px inset that keeps content off the
     card's border lives on the ROW and on the heading above, not here — put it
     here instead and the rules stop short of the corners. */
  .doc-acc-body { padding-left: 0; padding-right: 0; }

  /* ── The row becomes three bands, as on the staff portal ──────────────────
     Replaces the absolute-icon-plus-54px-indent approach. Band 1 is the icon
     and the title, band 2 the status and date, band 3 the actions. */
  .docs-table tbody tr.docs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    position: static;
    /* 16px each side, matching the staff row exactly. Zeroed, every band ran
       into the card's border: the icon, the status pill and the date all began
       1px from it, and the Sign button spanned the full bleed corner to
       corner. */
    padding: 13px 16px 14px;
    border-bottom: 1px solid rgba(16,24,48,0.06);
    width: 100%;
    box-sizing: border-box;
  }

  [data-theme="dark"] .docs-table tbody tr.docs-row,
  #portalApp [data-theme="dark"] .docs-table tbody tr.docs-row {
    border-bottom-color: rgba(139,175,200,0.08);
  }

  .docs-table tbody tr.docs-row td {
    display: block;
    padding: 0;
    border: none;
  }

  /* Band 1 — the icon sits against the title's FIRST line rather than
     floating halfway down a wrapped one.
     The #requiredWrap / #completedWrap prefixes are load-bearing: those ids
     set padding-left:20px on this cell, and the base rule sets width:52px.
     Together they made the cell 52px wide against a 38px flex-basis, so
     38 + 10 + calc(100% - 48px) overflowed the row by 14px and the title
     wrapped onto its own line under the icon. */
  #requiredWrap .docs-table tbody tr.docs-row td.docs-c-icon,
  #completedWrap .docs-table tbody tr.docs-row td.docs-c-icon,
  .docs-table tbody tr.docs-row td.docs-c-icon {
    position: static;
    top: auto;
    left: auto;
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    padding: 0;
    order: 1;
    display: flex;
    align-self: flex-start;
  }
  .docs-table tbody tr.docs-row td.docs-c-icon .doc-inst-icon {
    width: 38px;
    height: 38px;
  }

  /* A basis just under the remaining width, so the title holds the first line
     on its own and the meta cells are forced to wrap beneath it. The 54px
     indent and its min-height go — the icon is a flex sibling now, not an
     absolutely positioned overlay the text had to dodge. */
  .docs-table tbody tr.docs-row td.docs-c-title {
    flex: 1 1 calc(100% - 48px);
    min-width: 0;
    order: 2;
    padding-left: 0;
    font-size: 13.5px;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .docs-table tbody tr.docs-row td.docs-c-title > strong { display: block; font-weight: 600; min-height: 0; }
  .docs-table tbody tr.docs-row td.docs-c-title > .docs-hint {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
  }

  /* Band 2 — status and date on one line, in a fixed reading order:
     what state it is in, then when. */
  .docs-table tbody tr.docs-row td.docs-c-status,
  .docs-table tbody tr.docs-row td.docs-c-date {
    display: block;
    flex: 0 0 auto;
    margin-top: 9px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted);
  }
  .docs-table tbody tr.docs-row td.docs-c-status { order: 3; }
  .docs-table tbody tr.docs-row td.docs-c-date   { order: 4; }
  .docs-table tbody tr.docs-row .auth-status-pill { font-size: 10px; padding: 3px 8px; }

  /* Band 3 — the actions, full width. This cell was display:none here and the
     buttons were duplicated inside the title cell instead; the real cell does
     the job on the staff side and now does it here. */
  .docs-table tbody tr.docs-row td.col-actions {
    display: flex;
    order: 5;
    flex: 1 0 100%;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
  }
  /* Room around the row's PRIMARY action — Sign, or Upload File on a document
     request. It sat 10px under the status line and 14px off the divider, which
     is tight for a 40px slab that is the one thing a client opens this page to
     press. 16px each side now (the 2px below plus the row's own 14px).

     Deliberately not applied to the completed rows' file chip: that cell holds
     a link to a PDF rather than an action, and this client has 56 of them — an
     extra 12px each would add most of a screen of scrolling to say nothing. */
  .docs-table tbody tr.docs-row td.col-actions:has(> button),
  .docs-table tbody tr.docs-row td.col-actions:has(> label) {
    margin-top: 16px;
    margin-bottom: 2px;
  }

  .docs-table tbody tr.docs-row td.col-actions > button,
  .docs-table tbody tr.docs-row td.col-actions > .docs-file-action {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
  .docs-table tbody tr.docs-row td.col-actions .icon-button { flex: 0 0 44px; height: 40px; }
  .docs-table tbody tr.docs-row td.col-actions .open-embedded-sign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
  }

  /* The client-only mobile duplicates. The real cells above carry this now;
     leaving both would print the date, the status and the buttons twice. */
  .docs-mobile-meta,
  .docs-mobile-actions { display: none; }
}

/* ── Overlays on a phone ────────────────────────────────────────────────────
   Two opposite faults, both wasting the screen. The passkey prompt had NO
   backdrop padding, so its card ran edge to edge with a 32px inner inset —
   the gutter was inside the card instead of around it. The onboarding card
   had 16px of backdrop padding AND 32px of its own, spending 96px of a 375px
   screen on nothing. Both now keep a real 12–16px gutter and inset their
   contents by 18px, which is the same rhythm the mobile page cards use. */
@media (max-width: 640px) {
  .passkey-prompt { padding: 16px; }
  .passkey-prompt-card {
    max-width: none;
    padding: 24px 18px 20px;
  }
  .passkey-prompt-card h3 { font-size: 20px; }

  .ob-overlay { padding: 16px 12px; }
  .ob-card { padding: 22px 18px; }
}

/* ── Linked entities ────────────────────────────────────────────────────────
   The companies and trusts this client is part of, in their profile. The
   section is omitted entirely when there are none, so there is no empty state
   to style. Light values here; dark ones inside the guard. */
.profile-linked-list { display: flex; flex-direction: column; gap: 6px; }
.profile-linked-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px;
}
.profile-linked-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.profile-linked-kind { font-size: 11px; font-weight: 600; color: var(--muted); flex: 0 0 auto; }

[data-theme="dark"] .profile-linked-row { border-color: rgba(139,175,200,0.18); }
[data-theme="dark"] .profile-linked-name { color: #EEE8DF; }

/* ── Record switcher ────────────────────────────────────────────────────────
   Whose record the portal is showing. Rendered only when this client is linked
   to something; a dropdown with one entry is a control that does nothing.
   Hidden with the rest of the labels when the sidebar collapses. */
.sidebar-switcher { position: relative; padding: 0 14px 10px; }
/* Gone when the sidebar is collapsed, the same way the section label goes —
   .nav-label only fades to opacity 0, which leaves an invisible control still
   taking space and still clickable. There is no room for a name in a 68px rail
   anyway, and the switcher is reachable again the moment it is expanded. */
.sidebar:not(.sidebar--expanded) .sidebar-switcher { display: none; }

.sidebar-switch-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; box-sizing: border-box; min-height: 0;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--ac-line2, rgba(13,27,46,0.12));
  background: transparent; color: var(--ink); box-shadow: none;
  font-family: 'Quicksand', sans-serif; font-size: 12px; font-weight: 700;
  /* The global button rule centres its content and paints a gradient. */
  justify-content: flex-start; text-align: left; cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.sidebar-switch-btn:hover { border-color: #698DAA; background: rgba(105,141,170,0.10); }
.sidebar-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-switch-menu {
  position: absolute; z-index: 40; left: 14px; right: 14px; top: calc(100% - 4px);
  padding: 5px; border-radius: 12px;
  border: 1px solid var(--ac-line2, rgba(13,27,46,0.12));
  background: var(--card, #fff);
  /* Its own stack, so the surrounding nav's text layout cannot lay the entries
     out on one line — the trap that put a menu item outside its own menu once. */
  display: flex; flex-direction: column; white-space: normal; text-align: left;
}
.sidebar-switch-menu[hidden] { display: none !important; }

.sidebar-switch-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; box-sizing: border-box; min-height: 0;
  padding: 8px 10px; border: none; border-radius: 8px;
  background: transparent; color: var(--ink); box-shadow: none; cursor: pointer;
  justify-content: flex-start; text-align: left;
  font-family: 'Quicksand', sans-serif;
  transition: background 140ms ease;
}
.sidebar-switch-item:hover { background: rgba(105,141,170,0.12); }
.sidebar-switch-item.is-current { background: rgba(105,141,170,0.16); }
.sidebar-switch-item-name { font-size: 12px; font-weight: 700; }
.sidebar-switch-item-kind { font-size: 10px; font-weight: 600; color: var(--muted); }

[data-theme="dark"] .sidebar-switch-btn { color: #EEE8DF; border-color: var(--ac-line2, rgba(139,175,200,0.22)); }
[data-theme="dark"] .sidebar-switch-btn:hover { border-color: rgba(139,175,200,0.50); background: rgba(139,175,200,0.12); }
[data-theme="dark"] .sidebar-switch-menu { background: #16293F; border-color: rgba(78,122,151,0.45); }
[data-theme="dark"] .sidebar-switch-item { color: #EEE8DF; }
[data-theme="dark"] .sidebar-switch-item:hover { background: rgba(139,175,200,0.16); }
[data-theme="dark"] .sidebar-switch-item.is-current { background: rgba(139,175,200,0.22); }

/* ── "We could not reach the portal" ──
   Sits at the foot of the screen so it never covers what the client was
   reading, and above the mobile bottom nav so it does not hide navigation
   either. Gap, not margins, so the button can never touch the text. */
.portal-connection-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card, #FFFFFF);
  color: var(--ink);
  font-family: 'Quicksand', sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
}
.pcb-text { flex: 1 1 auto; min-width: 0; }
.pcb-retry {
  flex: 0 0 auto;
  padding: 7px 14px;
  min-height: 0;
  border-radius: 999px;
  border: 1px solid #1C3149;
  background: #1C3149;
  color: #FFFFFF;
  font-family: 'Quicksand', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.pcb-retry:hover { background: #16253B; border-color: #16253B; color: #FFFFFF; }
.pcb-retry:focus-visible { outline: 2px solid #698DAA; outline-offset: 2px; }

[data-theme="dark"] .portal-connection-banner {
  background: #16253B;
  border-color: rgba(139,175,200,0.22);
  color: #EAF0F6;
}
[data-theme="dark"] .pcb-retry { background: #C5D1DC; border-color: #C5D1DC; color: #161C33; }
[data-theme="dark"] .pcb-retry:hover { background: #EAF0F6; border-color: #EAF0F6; color: #161C33; }

/* Clear of the bottom navigation on a phone. */
@media (max-width: 1080px) {
  .portal-connection-banner { bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .pcb-retry { transition: none; }
}

/* ── WCAG 2.1 AA fixes (audit 2026-09-17) ───────────────────────────────────
   1.4.3 Contrast. "Completed" was the one status pill never given a dark-mode
   value: #16824a is declared once and inherited by both grounds, where the
   neighbouring Required and Incomplete pills each got a dark variant. Measured
   on the live page it came to 3.00:1 against #1B2942, against the 4.5:1 an
   11px label needs — on the word a client most wants to read. #4FBF82 measures
   5.07:1 on the darkest ground either portal composites it over. */
[data-theme="dark"] .dashboard-item-pill.is-complete,
[data-theme="dark"] .hero-checklist-pill.is-complete,
[data-theme="dark"] .auth-status-pill.is-complete {
  color: #4FBF82;
}

/* One focus ring, everywhere.
   Three controls carried a designed ring and every other one fell back to the
   browser's amber default — visible, so 2.4.7 passed, but amber on a navy UI
   and inconsistent with the 27 focus rules already here.
   `:where()` contributes ZERO specificity, so this is a floor: every existing
   rule still wins, and nothing that was already styled changes.
   --ac-steel (#4E7A97) is the one value that clears 1.4.11's 3:1 against every
   ground either portal paints — 4.61 on white, 3.34 on the darkest card. */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--ac-steel, #4E7A97);
  outline-offset: 2px;
}

/* 2.5.8 Target Size. "View all" is a text link in a dark card header, and its
   padding is zeroed deliberately so it sits on the heading's baseline — which
   left it 17px tall. The padding buys the height back and an equal negative
   margin cancels it, so the hit area grows and not one pixel moves. */
.dashboard-view-all { position: relative; }
.dashboard-view-all::after {
  content: "";
  position: absolute;
  /* Grows the tap target to ~29x48 without moving anything: padding on this
     flex item shrank it and wrapped "View all" onto three lines. */
  inset: -7px -8px;
}

/* A heading that names the page for a screen reader without changing what
   anyone sees. Clipped, NOT display:none — display:none would take it out of
   the accessibility tree and it would do nothing at all. */
.a11y-heading {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* 1.4.3. "Good evening, Jane." — the name is the brand accent at 18px and
   normal weight, which needs 4.5:1 and measured 3.32 against the hero's
   #F8F9F9. This is the same hue two steps deeper, at 4.86. Light theme only:
   on the dark ground the original already passes comfortably. */
.hero-greeting-name { color: #4A7290; }
[data-theme="dark"] .hero-greeting-name { color: #8BAFC8; }

/* ═══ THE CARD ON A PHONE — the client portal's half of the canon ══════════
   Audited at 430px on 2026-09-28 against the staff portal, light and dark.
   The grid was already right — every card at x=16 across 398px — and
   everything else disagreed. Four dark fills (rgb(27,41,66) on the dashboard
   lists and the onboarding card, #0F1D30 on the section panel, rgb(15,28,45)
   on a document accordion, rgb(12,26,45) on the profile cards), four outline
   colours, two radii (16 and 20) and four insets (0, 14, 16, 20), because
   each card was written with its own literals rather than a shared token.

   --ac-card / --ac-card-line (theme.css) are that token, and the staff portal
   is on them too, so a card is now the same object in both portals.

   The onboarding card loses a vertical gradient by joining this. It was the
   only gradient card anywhere in either portal; if it is wanted back it
   should come back as a deliberate exception with a reason, the way the Add
   task button's rim light did — not as the one card that happens to differ. */
@media (max-width: 640px) {
  #portalApp .content-panel.section-view,
  .dashboard-list-card,
  .doc-acc,
  .onboarding-card,
  .profile-summary-card,
  .profile-detail-card {
    background: var(--ac-card);
    border: 1px solid var(--ac-card-line);
    border-radius: 20px;
  }
  /* `:root[data-theme="dark"]`, not a bare `[data-theme="dark"]`: several of
     the dark card rules this replaces are written with the :root prefix,
     which outranks the bare attribute by one class. Written short, the
     document accordion kept its own rgba(15,29,48,0.7) and was the one card
     on the Documents page in a different navy. */
  :root[data-theme="dark"] #portalApp .content-panel.section-view,
  :root[data-theme="dark"] .dashboard-list-card,
  :root[data-theme="dark"] .doc-acc,
  :root[data-theme="dark"] .onboarding-card,
  :root[data-theme="dark"] .profile-summary-card,
  :root[data-theme="dark"] .profile-detail-card {
    background: var(--ac-card);
    border-color: var(--ac-card-line);
  }

  /* A panel that HOLDS cards is not itself one. Left as a card it drew the
     same surface twice — a bordered rounded box of bordered rounded boxes —
     and cost its contents 16px a side: measured at 430px the section sat at
     x=16 across 398 and every card inside it at x=33 across 364, so the
     client portal's cards were 34px narrower than the staff portal's on the
     same screen. The staff portal already works this way, and #portfolioPanel
     already did it for this exact reason.

     :has(), so the rule follows the content rather than a list of section
     names that the next section has to be remembered into. A section with no
     cards of its own keeps its surface and stays the card, which is right. */
  #portalApp .content-panel.section-view:has(.dashboard-list-card),
  #portalApp .content-panel.section-view:has(.doc-acc),
  #portalApp .content-panel.section-view:has(.onboarding-card),
  #portalApp .content-panel.section-view:has(.profile-summary-card),
  #portalApp .content-panel.section-view:has(.pf-card),
  :root[data-theme="dark"] #portalApp .content-panel.section-view:has(.dashboard-list-card),
  :root[data-theme="dark"] #portalApp .content-panel.section-view:has(.doc-acc),
  :root[data-theme="dark"] #portalApp .content-panel.section-view:has(.onboarding-card),
  :root[data-theme="dark"] #portalApp .content-panel.section-view:has(.profile-summary-card),
  :root[data-theme="dark"] #portalApp .content-panel.section-view:has(.pf-card) {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* A card that holds CONTENT is inset 16 — the page gutter's own figure. */
  #portalApp .content-panel.section-view,
  .onboarding-card,
  .profile-summary-card { padding: 16px; }
  /* A card that holds a LIST is inset nothing: its rows pad themselves, and
     the card's inset on top of that indents every row twice. */
  .dashboard-list-card,
  .doc-acc,
  .profile-detail-card { padding: 0; }
}

/* ═══ ONE GUTTER ON A PHONE — the client portal's half ═════════════════════
   Measured at 430px alongside the staff portal: every section heading in
   both portals starts 16px inside its card except the dashboard's two list
   cards, whose head and rows run their own 20px. Internally consistent, 4px
   adrift of everything around them. The head moves with its rows, so the
   heading and the list it names keep their shared edge and simply join the
   one the rest of the phone uses. */
@media (max-width: 640px) {
  .dashboard-list-head,
  .dashboard-list-item {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* The document accordion's title sat 13px off its card's top wall while
   every other card title in both portals sits 16 off its own. One figure. */
@media (max-width: 640px) {
  .doc-acc > summary.doc-acc-head { padding-top: 16px; }
}