/* RealRise Issuer Onboarding Portal — base styles.
   Utilitarian internal compliance tool: clean, professional, accessible.
   All colors are CSS custom properties — no hardcoded hex anywhere else
   in templates/CSS.

   2026-08-31 rebrand: tokens below match the "RealRise Portal Redesign"
   design canvas (IBM Plex Sans/Mono, blue-on-navy palette) — superseding
   this file's earlier "deliberately distinct from the marketing site"
   navy-only palette. Structural page-layout changes from that same
   design (sidebar nav, task cards, activity panel) are a separate,
   larger follow-up — this pass is tokens (color/type) + the sign-in
   logo only, applied globally without restructuring any page. */

:root {
  --bg: #f7f9fb;
  --bg-elevated: #ffffff;
  --text: #0a1e38;
  --text-muted: #6b7787;
  --text-subtle: #8893a3;
  --border: #e4e8ee;
  --border-strong: #cdd6e0;

  --accent: #1e5bd6;
  --accent-hover: #1749ab;
  --accent-contrast: #ffffff;

  --success: #2f8757;
  --success-bg: #e6f2ea;
  --warning: #b5843a;
  --warning-bg: #fdf1e3;
  --danger: #a3261f;
  --danger-bg: #fbeceb;
  --locked: #565d6b;
  --locked-bg: #eceef1;
  --info-bg: #eaf0fd;

  --header-bg: #0a1e38; /* darkest navy, distinct from --accent — matches the redesign's header bar vs. interactive-blue split */

  --radius: 8px;
  --shadow: 0 1px 3px rgba(10, 30, 56, 0.08);
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  /* Direct feedback (2026-09-02, "colors match the website... it looks
     dull"): the marketing site (realrisecapital.net) pairs Spectral serif
     headings with IBM Plex Sans body copy — that typographic contrast is
     the site's main "branded, not generic-SaaS" signal, and it was never
     actually added here even though the token comment above claims a
     rebrand pass. Matches the marketing site's own usage: h1/h2 and stat/
     step numbers get Spectral; smaller in-card h3 labels stay sans (same
     split the marketing site itself uses for its FAQ h3s). */
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 16px;
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-hover);
}

.site-header {
  background: var(--header-bg);
  color: var(--accent-contrast);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.impersonation-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--warning);
  color: var(--bg);
  padding: 0.6rem 1.5rem;
  font-size: 0.92rem;
  line-height: 1.4;
}

.impersonation-bar-icon {
  font-size: 1.1rem;
}

.impersonation-bar strong {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.88rem;
}

.impersonation-bar form {
  margin-left: auto;
  flex-shrink: 0;
}

.impersonation-bar-exit {
  background: var(--bg);
  color: var(--warning);
  border: none;
  border-radius: var(--radius);
  padding: 0.4rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-contrast);
  text-decoration: none;
}

.brand-mark {
  /* Direct feedback (2026-09-02): the full lockup logo (icon + dark-navy-
     text wordmark, static/img/realrise-logo.png) was being squeezed into a
     24px square here — the wordmark's dark text is meant for a light
     background, illegible on this header's dark navy, and at 24px neither
     the icon nor the text read as anything recognizable. static/img/
     realrise-mark.png is a cropped, icon-only, transparent-background
     version of the exact same brand mark (no text to go dark-on-dark),
     sized generously enough to actually read as the real logo. */
  width: 34px;
  height: auto;
  flex-shrink: 0;
}

.brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.brand-suffix {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fa6c4;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.92rem;
}

.site-header nav a,
.site-header nav form button.linklike {
  color: var(--accent-contrast);
  opacity: 0.9;
  text-decoration: none;
}

.site-header nav a:hover,
.site-header nav form button.linklike:hover {
  opacity: 1;
  text-decoration: underline;
}

.nav-tab {
  padding: 0.35rem 0.7rem;
  border-radius: 7px;
}

.nav-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none !important;
}

.nav-tab.is-active {
  background: rgba(255, 255, 255, 0.12);
  opacity: 1 !important;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.4rem;
  min-width: 180px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 6px 20px rgba(10, 30, 56, 0.18);
  padding: 0.4rem;
  z-index: 20;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  color: var(--text) !important;
  opacity: 1 !important;
  font-size: 0.96rem;
}

.nav-dropdown-menu a:hover {
  background: var(--bg);
  text-decoration: none !important;
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 0.35rem 0.2rem;
}

.site-header .role-badge {
  color: #8fa6c4;
  font-size: 0.9rem;
  font-weight: 500;
}

.header-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

main.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 4rem;
}

main.container.wide {
  max-width: 1680px;
}

/* Compact offering switcher for a multi-offering issuer (templates/
   checklists/issuer_dashboard.html) — 2026-09-02. Superseded an earlier
   same-session attempt at a divider between stacked offering cards;
   direct feedback asked for a real switcher instead, so only one
   offering's full dashboard ever renders at a time. */
.offering-switcher {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.offering-switcher label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
}

.offering-switcher select {
  font-family: var(--font-sans);
  font-size: 0.94rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  max-width: 320px;
}

main.container.narrow {
  max-width: 480px;
}

h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.7rem;
  margin: 0 0 1.25rem;
}

h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 1.75rem 0 0.75rem;
}

h3 {
  font-size: 1rem;
  margin: 0 0 0.4rem;
}

p.lead {
  color: var(--text-muted);
  margin-top: -0.5rem;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.card + .card {
  margin-top: 1rem;
}

.messages {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.messages li {
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  border: 1px solid transparent;
  font-size: 0.92rem;
}

.messages li.success { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.messages li.error   { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.messages li.warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.messages li.info,
.messages li.debug    { background: var(--info-bg); color: var(--text); border-color: var(--border); }

/* --- Progress bar --------------------------------------------------- */

.progress-bar {
  background: var(--border);
  border-radius: 999px;
  height: 10px;
  width: 100%;
  overflow: hidden;
}

.progress-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px 0 0 999px;
}

.progress-label {
  font-size: 0.96rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* --- Status badges ---------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge-not_started  { background: var(--locked-bg); color: var(--locked); }
.badge-in_progress   { background: var(--info-bg); color: var(--accent); }
.badge-submitted     { background: var(--warning-bg); color: var(--warning); }
.badge-locked        { background: var(--locked-bg); color: var(--locked); }
.badge-approved      { background: var(--success-bg); color: var(--success); }
.badge-overdue       { background: var(--danger-bg); color: var(--danger); }
.badge-pending_review { background: var(--info-bg); color: var(--accent); }
.badge-draft         { background: var(--locked-bg); color: var(--locked); }
.badge-published     { background: var(--success-bg); color: var(--success); }

/* --- Category / task lists --------------------------------------------- */

.category {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  background: var(--bg-elevated);
}

.category.is-locked {
  opacity: 0.6;
}

.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0;
}

.category-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.task-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--bg);
}

.task-list li:hover {
  background: var(--bg);
}

.task-list li:last-child {
  border-bottom: none;
}

.task-list a.task-link {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
}

.task-list a.task-link:hover {
  text-decoration: underline;
}

.task-list .task-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.96rem;
  color: var(--text-muted);
}

.task-row-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

/* Per-task status circle — the "checked off" indicator direct feedback
   asked for (2026-09-02): a hollow ring for not-yet-done states, filled
   green with a checkmark once approved/locked, so completion reads at a
   glance instead of only via the text badge on the right. */
.task-status-icon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  line-height: 1;
  color: transparent;
}

.task-status-icon.is-done {
  border-color: var(--success);
  background: var(--success);
  color: #ffffff;
}

.task-status-icon.is-review {
  border-color: var(--warning);
  background: var(--warning-bg);
}

.task-status-icon.is-overdue {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.locked-note {
  padding: 0.7rem 1.1rem;
  color: var(--text-muted);
  font-size: 1rem;
}

/* --- Staff "view as issuer" preview banner ------------------------------ */

.preview-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
  line-height: 1.4;
}

.preview-banner .preview-banner-icon {
  font-size: 1.1rem;
  line-height: 1.4;
}

.preview-banner strong {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.94rem;
  display: block;
  margin-bottom: 0.15rem;
}

.preview-banner-exit {
  margin-left: auto;
  flex-shrink: 0;
  background: var(--warning);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  padding: 0.4rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.category-disclaimer {
  background: var(--info-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.94rem;
  padding: 0.55rem 0.9rem;
  margin: 0.6rem 1.1rem;
}

/* --- Forms --------------------------------------------------------- */

form.stacked-form .field {
  margin-bottom: 1rem;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
  font-size: 0.92rem;
}

.required-marker {
  color: var(--danger);
  margin-left: 0.15rem;
}

label.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--bg-elevated);
  color: var(--text);
}

textarea {
  min-height: 5rem;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.help-text {
  color: var(--text-muted);
  font-size: 0.94rem;
  margin-top: 0.25rem;
}

.field-errors {
  color: var(--danger);
  font-size: 0.96rem;
  margin-top: 0.25rem;
}

/* --- Buttons --------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--accent-contrast);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  background: var(--bg);
}

.btn-danger {
  background: var(--bg-elevated);
  color: var(--danger);
  border-color: var(--danger);
}

.btn-danger:hover {
  background: var(--danger-bg);
}

.btn-sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.94rem;
}

button.linklike {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.actions-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* --- KPI stat cards + filter pills (staff dashboard, 2026-08-31 redesign) */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.kpi-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}

.kpi-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.kpi-value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.kpi-value.is-danger {
  color: var(--danger);
}

.filter-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.filter-pill {
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  text-decoration: none;
  background: var(--bg-elevated);
}

.filter-pill:hover {
  border-color: var(--text);
  text-decoration: none;
}

.filter-pill.is-active {
  background: var(--header-bg);
  border-color: var(--header-bg);
  color: #fff;
}

.filter-pill.is-danger {
  border-color: var(--danger);
  color: var(--danger);
}

/* --- Tables ------------------------------------------------------------ */

table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

table.data-table th,
table.data-table td {
  padding: 0.6rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}

table.data-table th {
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

table.data-table tr:last-child td {
  border-bottom: none;
}

table.data-table .row-actions {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

table.data-table tr.is-overdue td {
  background: var(--danger-bg);
}

.filters {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.filters .field {
  margin-bottom: 0;
  min-width: 160px;
}

/* --- Discussion thread (task detail, 2026-08-31 redesign) --------------- */

.task-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.task-step-badge {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
  padding: 0.18rem 0.55rem;
  border-radius: 6px;
  background: var(--info-bg);
}

.discussion-title {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.discussion-thread {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.discussion-item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.discussion-avatar {
  width: 28px;
  height: 28px;
  font-size: 0.94rem;
  background: var(--accent);
}

.discussion-avatar.is-staff {
  background: var(--header-bg);
}

.discussion-body {
  flex: 1;
  min-width: 0;
}

.discussion-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.discussion-role-tag {
  font-size: 0.94rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  background: var(--info-bg);
  color: var(--accent);
}

.discussion-bubble {
  background: var(--bg);
  border-radius: 9px;
  padding: 0.65rem 0.8rem;
  font-size: 0.96rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.discussion-bubble.is-staff {
  background: var(--info-bg);
}

/* --- Task explainer video --------------------------------------------- */

.task-video-wrap {
  margin-bottom: 1.25rem;
}

/* --- Sign-in branding ---------------------------------------------------- */

.signin-brand {
  text-align: center;
  margin-bottom: 1.5rem;
}

.signin-mark {
  /* Real logo mark (2026-09-02, same asset/reasoning as .brand-mark in the
     header) — sized larger here since this is the page's own hero, not a
     small header icon. */
  width: 56px;
  height: auto;
  display: block;
  margin: 0 auto 0.5rem;
}

.signin-wordmark {
  display: block;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.signin-tagline {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.trust-strip {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.94rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

.trust-strip li {
  display: flex;
  align-items: center;
}

.trust-strip li::before {
  content: "\2713";
  color: var(--success);
  margin-right: 0.4rem;
  font-weight: 700;
}

.video-unavailable {
  margin-bottom: 1.25rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--locked-bg);
  color: var(--text-muted);
  font-size: 1rem;
}

.task-video-wrap video {
  display: block;
  width: 100%;
  max-width: 640px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #000;
}

.readonly-notice {
  background: var(--info-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.9rem;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.readonly-notice.locked {
  background: var(--locked-bg);
}

.audit-note {
  font-size: 0.94rem;
  color: var(--text-muted);
}

.qr-wrap {
  text-align: center;
  margin: 1rem 0;
}

.qr-wrap img {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  background: #fff;
}

.invite-link-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  word-break: break-all;
  font-family: monospace;
  font-size: 0.96rem;
}

/* --- Manage task videos (staff) ----------------------------------------- */

.video-task-list li.video-task-row {
  display: block;
  padding: 0.9rem 1.1rem;
}

.video-task-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.video-task-name {
  font-weight: 500;
}

.video-task-preview {
  margin: 0.65rem 0 0;
}

.video-task-preview video {
  max-width: 360px;
}

.video-task-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.video-upload-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.video-upload-form input[type="file"] {
  font-size: 0.96rem;
  max-width: 240px;
}

/* --- Repeating group fields (rosters: officers/directors, beneficial
   owners, Appendix B consent list) --------------------------------------- */

.repeating-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  background: var(--bg);
}

.repeating-group > label {
  margin-bottom: 0.6rem;
}

.rg-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.rg-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem;
  align-items: end;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
}

.rg-row-field label {
  font-size: 0.92rem;
  margin-bottom: 0.2rem;
}

.rg-row .rg-remove-row {
  align-self: start;
  justify-self: start;
}

.rg-row-template {
  display: none;
}

.rg-readonly-table {
  margin-top: 0.5rem;
}

/* --- Wire instructions (encrypted_entity_field, JSON-shaped) ----------- */

.wire-instructions-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
}

.wire-instructions-fields .field-inline label {
  font-size: 0.92rem;
  margin-bottom: 0.2rem;
}

/* --- Category table-of-contents (6 -> 15 category UX fix) -------------- */

.category-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 1.25rem;
}

.category-toc-link {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 0.92rem;
  text-decoration: none;
}

.category-toc-link:hover {
  background: var(--bg);
  color: var(--accent);
}

.category-toc-link.is-locked {
  color: var(--locked);
  border-color: var(--border);
}

details.category-details > summary.category-header {
  cursor: pointer;
}

.category-body {
  padding-top: 0.25rem;
}

/* --- AI onboarding assistant chat widget (issuer-facing) --------------- */

.assistant-widget {
  margin: 1.25rem 0;
}

.assistant-widget-summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
}

.assistant-widget-body {
  margin-top: 0.85rem;
}

.assistant-disclaimer {
  font-size: 0.92rem;
  color: var(--text-muted);
  background: var(--info-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  margin: 0 0 0.85rem;
}

.assistant-disclaimer-inline {
  margin: 0.5rem 0 0;
}

.assistant-thread {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.assistant-message {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.6rem;
  background: var(--bg);
}

.assistant-message.role-user {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}

.assistant-message.role-assistant {
  background: var(--info-bg);
}

.assistant-message.role-refused {
  background: var(--warning-bg);
  border-color: var(--warning);
}

.assistant-message-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.assistant-message-body {
  white-space: pre-wrap;
}

.assistant-thread-staff .assistant-message-suppressed {
  color: var(--danger);
}

.suppressed-draft {
  margin-top: 0.5rem;
  font-size: 0.96rem;
}

.suppressed-draft > summary {
  cursor: pointer;
  color: var(--danger);
}

/* --- Issuer dashboard redesign (2026-08-31, RealRise Portal Redesign
   design canvas) — sidebar rail (offering summary + jump-to-category nav),
   "Do this next" callout, right-hand activity panel (staff comments +
   at-a-glance stats). Default "Sidebar" mode keeps the original
   all-categories-on-one-page, anchor-jump interaction. A second "Guided"
   mode (below) offers single-category-at-a-time focus instead — its
   "state" is server-side (?view=guided&category=N query params + a full
   page load per Prev/Next/rail click), not client-side JS, matching this
   server-rendered app's existing convention. --------------------------- */

.view-mode-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: var(--bg);
  margin-bottom: 1rem;
}

.view-mode-toggle a {
  padding: 0.35rem 0.75rem;
  border-radius: 7px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
}

.view-mode-toggle a:hover {
  text-decoration: none;
}

.view-mode-toggle a.is-active {
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(10, 30, 56, 0.08);
}

/* Redesigned 2026-09-02 (direct feedback: "I don't like the way the
   welcome and other statuses look across the top"). Previous version was
   a bare CSS grid of `1fr` columns with no contained overflow — with 15
   categories that squeezed every label into an ellipsis and forced the
   WHOLE PAGE into horizontal scroll, not just this strip. Now: a compact
   pill per category (checkmark/number + name + task count) that wraps in
   its own scoped horizontal-scroll container, same checkmark language as
   the sidebar's .cat-rail-item so Sidebar/Guided modes read consistently. */
.stage-rail-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 0 1.25rem;
  padding-bottom: 0.35rem;
  -webkit-overflow-scrolling: touch;
}

.stage-rail {
  display: flex;
  gap: 0.5rem;
}

.stage-rail-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.stage-rail-item:hover {
  text-decoration: none;
  border-color: var(--border-strong);
}

.stage-rail-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-rail-item.is-complete .stage-rail-icon {
  background: var(--success);
  color: #ffffff;
}

.stage-rail-item.is-active {
  border-color: var(--accent);
  background: var(--info-bg);
}

.stage-rail-item.is-active .stage-rail-icon {
  background: var(--accent);
  color: #ffffff;
}

.stage-rail-item.is-locked {
  background: var(--locked-bg);
  border-color: var(--locked-bg);
}

.stage-rail-item.is-locked .stage-rail-icon {
  background: var(--locked-bg);
  color: var(--locked);
}

.stage-rail-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stage-rail-label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.stage-rail-item.is-locked .stage-rail-label {
  color: var(--text-subtle);
}

.stage-rail-item.is-active .stage-rail-label {
  color: var(--accent);
  font-weight: 600;
}

.stage-rail-count {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-subtle);
}

.guided-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  font-size: 0.94rem;
}

.guided-nav a {
  color: var(--text-muted);
  font-weight: 500;
}

.guided-nav .sep {
  color: var(--border-strong);
}

.guided-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(10, 30, 56, 0.04);
  margin-bottom: 1.25rem;
}

.guided-card-head {
  padding: 1.4rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--bg);
}

.guided-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
}

.guided-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.blocked-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 0.65rem;
  font-size: 0.94rem;
}

.blocked-item:last-child {
  margin-bottom: 0;
}

.blocked-tag {
  flex: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--locked-bg);
  color: var(--locked);
}

@media (max-width: 900px) {
  /* .stage-rail's own responsive handling (2026-09-02 redesign) is its
     .stage-rail-scroll container's overflow-x, not a grid reflow here —
     it already scrolls at any width, no separate rule needed. */
  .guided-two-col {
    grid-template-columns: 1fr;
  }
}

.dash-shell {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.dash-sidebar {
  flex: 0 0 240px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: 1rem;
}

.dash-sidebar-header {
  padding: 1.1rem 1.25rem 1rem;
  border-bottom: 1px solid var(--bg);
}

.dash-sidebar-eyebrow {
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.dash-sidebar-offering {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.15rem;
}

.dash-sidebar-entity {
  font-size: 1rem;
  color: var(--text-muted);
}

.dash-sidebar-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.dash-sidebar-progress .progress-bar {
  height: 6px;
}

.progress-pct-mono {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.dash-sidebar-count {
  font-size: 0.84rem;
  color: var(--text-subtle);
  margin-top: 0.4rem;
}

.cat-rail {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

.cat-rail-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
}

.cat-rail-item:hover {
  background: var(--bg);
  text-decoration: none;
}

.cat-rail-order {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-rail-item.is-complete {
  /* Direct feedback (2026-09-02): a completed category should read as
     complete from the row itself, not just from a tiny tinted number
     badge — the badge below still gets a checkmark glyph (see
     _offering_sidebar.html), but the whole row also gets a soft green
     wash so scanning the sidebar top-to-bottom shows progress at a
     glance. */
  background: var(--success-bg);
}

.cat-rail-item.is-complete .cat-rail-order {
  background: var(--success);
  color: #ffffff;
  font-size: 0.94rem;
}

.cat-rail-item.is-complete .cat-rail-name {
  color: var(--success);
}

.cat-rail-item.is-locked .cat-rail-order {
  background: var(--locked-bg);
  color: var(--locked);
}

.cat-rail-item.is-active {
  background: var(--info-bg);
}

.cat-rail-item.is-active .cat-rail-name {
  color: var(--accent);
  font-weight: 600;
}

.app-sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 0.5rem 0.6rem;
}

.app-shell {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.app-main {
  flex: 1;
  min-width: 0;
}

@media (max-width: 900px) {
  .app-shell {
    flex-direction: column;
  }

  .app-sidebar {
    position: static;
    width: 100%;
  }
}

.cat-rail-label {
  flex: 1;
  min-width: 0;
}

.cat-rail-name {
  display: block;
  font-size: 0.96rem;
  font-weight: 500;
}

.cat-rail-count {
  display: block;
  font-size: 0.84rem;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  margin-top: 1px;
}

.dash-main {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.dash-work {
  flex: 1;
  min-width: 0;
}

.dash-side {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 1rem;
}

.next-task-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.next-task-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--info-bg);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.next-task-eyebrow {
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}

.next-task-name {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.next-task-why {
  font-size: 0.94rem;
  color: var(--text-muted);
  margin: 0;
}

.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.panel-header {
  padding: 0.85rem 1rem 0.7rem;
  border-bottom: 1px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-title {
  font-size: 0.92rem;
  font-weight: 600;
}

.panel-pill {
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--warning-bg);
  color: var(--warning);
}

.panel-body {
  padding: 0.35rem 1rem 0.85rem;
}

.comment-row {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--bg);
}

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

.comment-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.comment-avatar {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--header-bg);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.comment-who {
  font-size: 1rem;
  font-weight: 600;
}

.comment-when {
  font-size: 0.84rem;
  color: var(--text-subtle);
}

.comment-body {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 0.2rem;
}

.comment-task-link {
  font-size: 0.86rem;
  font-weight: 500;
}

.reply-inline-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  margin-top: 0.5rem;
}

.reply-inline-form textarea {
  flex: 1;
  min-height: 2.2rem;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  resize: vertical;
}

.reply-inline-form .btn {
  flex: none;
}

.glance-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.35rem 0;
  font-size: 0.92rem;
}

.glance-label {
  color: var(--text-muted);
}

.glance-value {
  font-family: var(--font-mono);
  font-weight: 600;
}

.glance-links {
  padding: 0.7rem 1rem 0.9rem;
  border-top: 1px solid var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.glance-links a {
  font-size: 0.92rem;
  font-weight: 500;
}

.cat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.cat-card {
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: var(--text);
}

.cat-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.cat-card.is-locked {
  opacity: 0.6;
}

.cat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.cat-card-order {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-subtle);
}

.cat-card-name {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.cat-card-count {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .dash-shell,
  .dash-main {
    flex-direction: column;
  }

  .dash-sidebar,
  .dash-side {
    position: static;
    flex-basis: auto;
    width: 100%;
  }

  .cat-rail {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cat-rail-item {
    width: auto;
  }
}

/* --- Responsive breakpoint (2026-08-30 UX review: no @media rules existed
   anywhere in this file). Most layout here is already fluid (flexbox +
   wrap, width:100% form controls), so this mainly tightens spacing/type
   scale for phone widths rather than restructuring — issuer-facing pages
   (checklist, task detail, sign-in) are the priority per the review;
   staff-only dense tables (Manage Task Attachments) are left desktop-first
   for now. ------------------------------------------------------------- */

@media (max-width: 640px) {
  main.container {
    padding: 1.25rem 1rem 3rem;
  }

  h1 {
    font-size: 1.3rem;
  }

  .site-header {
    padding: 0.65rem 1rem;
  }

  .site-header .brand {
    font-size: 0.95rem;
  }

  .site-header nav {
    gap: 0.6rem 0.85rem;
    font-size: 0.96rem;
  }

  .card {
    padding: 1rem;
  }

  .actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .actions-row .btn {
    text-align: center;
  }

  .category-toc {
    gap: 0.3rem;
  }

  .category-toc-link {
    font-size: 0.94rem;
    padding: 0.25rem 0.55rem;
  }

  .trust-strip {
    flex-direction: column;
    gap: 0.35rem;
  }
}