@import url("tokens.css");
@import url("typography.css");
@import url("icons.css");

/* ── THE font. The only font. Self-hosted so web + PDF + email match
   exactly. If you are about to add a second family anywhere: don't. ── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/PlusJakartaSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/PlusJakartaSans-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/PlusJakartaSans-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('/static/fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');
}

/* ClearSplit — Professional Legal/Financial Stylesheet
   Color palette: Navy #1a365d primary, White background, Gray borders
   Typography: System sans-serif stack for clarity and readability
*/

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --navy:        #1a365d;
    --navy-dark:   #12253f;
    --navy-light:  #2a4a7f;
    --ink:         #0d1b2a;
    --teal:        #0f766e;
    --accent:      #2b6cb0;
    --accent-light:#ebf4ff;
    --success:     #276749;
    --success-bg:  #f0fff4;
    --danger:      #9b2c2c;
    --danger-bg:   #fff5f5;
    --warning:     #7b4200;
    --warning-bg:  #fffaf0;
    --info:        #2c5282;
    --info-bg:     #ebf8ff;
    --gray-50:     #f9fafb;
    --gray-100:    #f3f4f6;
    --gray-200:    #e5e7eb;
    --gray-300:    #d1d5db;
    --gray-500:    #6b7280;
    --gray-700:    #374151;
    --gray-900:    #111827;
    --white:       #ffffff;
    --border:      #d1d5db;
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
    --shadow:      0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.10);
    --radius:      6px;
    --radius-lg:   10px;
    /* ONE font, every surface. Do not reintroduce a second family
       (no heading font, no mono font). See _pdf_fonts.html for the
       WeasyPrint/PDF mirror of this @font-face. */
    --font:        'Plus Jakarta Sans', sans-serif;
    --font-head:   'Plus Jakarta Sans', sans-serif;
    --font-mono:   'Plus Jakarta Sans', sans-serif;
    --transition:  0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

html { font-size: 15px; scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background:
        radial-gradient(circle at 12% 8%, #e8f1ff 0, rgba(232,241,255,0) 32%),
        radial-gradient(circle at 90% 2%, #dff6f4 0, rgba(223,246,244,0) 26%),
        linear-gradient(180deg, #f8fafd 0%, #f2f5fa 100%);
    color: var(--gray-900);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ── Navigation ── */
.navbar {
    background: linear-gradient(135deg, #0f2743 0%, #1b3a60 55%, #1d5e76 100%);
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 1.5rem;
    height: 56px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(6px);
}

.nav-brand a {
    color: var(--white);
    font-family: var(--font-head);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    margin-right: 2rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex: 1;
    overflow-x: auto;
}

.nav-links a {
    color: rgba(255,255,255,0.85);
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    text-decoration: none;
}

.nav-links a:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.nav-links a.active { background: rgba(255,255,255,0.18); color: var(--white); font-weight: 600; }

.nav-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 1rem;
    flex-shrink: 0;
}

.role-badge {
    background: rgba(255,255,255,0.15);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Layout ── */
.container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem;
    flex: 1;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--navy);
}

.page-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.02em;
}

.header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.case-hero {
    margin-bottom: 1.2rem;
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
    background:
        radial-gradient(circle at 75% 25%, rgba(98, 181, 205, 0.22), rgba(98, 181, 205, 0) 35%),
        linear-gradient(135deg, #102740, #1a3e5d 58%, #1e596f);
    color: #f5fbff;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 12px 26px rgba(20, 44, 68, 0.2);
}

.case-hero-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.78;
}

.case-hero h2 {
    font-family: var(--font-head);
    font-size: 1.3rem;
    margin: 0.25rem 0 0.35rem 0;
}

.case-hero p {
    margin: 0;
    color: rgba(245,251,255,0.85);
}

.case-hero-metrics {
    display: grid;
    gap: 0.65rem;
}

.case-hero-metrics > div {
    border-radius: 9px;
    background: rgba(255,255,255,0.1);
    padding: 0.55rem 0.7rem;
}

.case-hero-metrics span {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.82;
}

.case-hero-metrics strong {
    font-size: 1rem;
    font-family: var(--font-head);
}

/* ── Cards ── */
.card {
    background: rgba(255,255,255,0.92);
    border: 1px solid #d6dce8;
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 12px 28px rgba(16, 37, 63, 0.08), 0 2px 4px rgba(16, 37, 63, 0.05);
    margin-bottom: 1.25rem;
}

.card h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 1rem;
}

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

.card-header h2 { margin-bottom: 0; }

/* ── Stat Grid ── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
}

.stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}

.stat-value.positive { color: var(--success); }
.stat-value.negative { color: var(--danger); }
.stat-sub { font-size: 0.78rem; color: var(--gray-500); margin-top: 0.2rem; }

/* ── Dashboard Grid ── */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .case-hero { grid-template-columns: 1fr; }
}

/* ── Tables ── */
.table-responsive { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.table th {
    background: var(--navy);
    color: var(--white);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.6rem 0.85rem;
    text-align: left;
    white-space: nowrap;
}

.table td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
}

.table tbody tr:nth-child(even) { background: var(--gray-50); }
.table tbody tr:hover { background: var(--accent-light); }

.table tfoot td {
    padding: 0.6rem 0.85rem;
    border-top: 2px solid var(--navy);
    background: var(--gray-100);
    font-weight: 600;
}

.amount { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.amount.negative { color: var(--danger); }
.amount.positive { color: var(--success); }

/* ── Forms ── */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group { display: flex; flex-direction: column; }
.form-group.full-width { grid-column: 1 / -1; }

.form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-group input,
.form-group select,
.form-group textarea {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-family: var(--font);
    color: var(--gray-900);
    background: var(--white);
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(43,108,176,0.15);
}

.form-group input::placeholder { color: var(--gray-300); }

.form-group textarea { resize: vertical; min-height: 70px; }

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

.inline-form input,
.inline-form select {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.4rem 0.65rem;
    font-size: 0.875rem;
    font-family: var(--font);
    color: var(--gray-900);
}

.inline-form input:focus,
.inline-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(43,108,176,0.15);
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}

.btn:hover { text-decoration: none; }

.btn-primary {
    background: linear-gradient(135deg, #16395f, #1e5d8b);
    color: var(--white);
    border-color: #16395f;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #1e5d8b, #1f6fa2);
    border-color: #1f6fa2;
    transform: translateY(-1px);
}

.btn-accent {
    background: linear-gradient(135deg, #0f766e, #1c8b83);
    color: var(--white);
    border-color: #0f766e;
}
.btn-accent:hover {
    background: linear-gradient(135deg, #13877e, #1fa197);
    border-color: #13877e;
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--navy);
    border-color: var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }

.btn-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: #fc8181;
}
.btn-danger:hover { background: var(--danger); color: var(--white); border-color: var(--danger); }

.btn-success {
    background: var(--success-bg);
    color: var(--success);
    border-color: #68d391;
}
.btn-success:hover { background: var(--success); color: var(--white); border-color: var(--success); }

.btn-sm { font-size: 0.8rem; padding: 0.3rem 0.65rem; }
.btn-lg { font-size: 1rem; padding: 0.7rem 1.5rem; }

form.inline { display: inline; }

/* ── Badges ── */
.badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge-marital { background: var(--accent-light); color: var(--accent); }
.badge-separate { background: var(--gray-100); color: var(--gray-700); }
.badge-plaintiff { background: #e6fffa; color: #276749; }
.badge-defendant { background: #fff5f0; color: #9c4221; }
.badge-info { background: #e6f6ff; color: var(--info); }

/* ── Provenance badges (law citation confidence) ── */
.badge-verified { background: #dff0d8; color: #2d6e2d; }
.badge-fetched  { background: #e6f6ff; color: #1b6fa8; }
.badge-draft    { background: #fcf8e3; color: #8a6d3b; }

/* ── Provenance banner (rendered above law rules that aren't attorney-verified) ── */
.provenance-banner {
    border: 1px solid #e1d9b9;
    background: #fcf8e3;
    color: #6c5a1e;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin: 0 0 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 0.9rem;
}
.provenance-banner--fetch_verified {
    background: #eaf4fb;
    border-color: #b8d8ed;
    color: #154976;
}
.provenance-banner__body {
    flex: 1 1 280px;
}

/* ── Source / verification disclosure block (progressive reveal) ── */
.source-disclosure {
    margin-top: 1rem;
    border: 1px solid var(--gray-100);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    background: #fafafa;
}
.source-disclosure > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.source-disclosure > summary::-webkit-details-marker { display: none; }
.source-disclosure > summary::before {
    content: "▸";
    display: inline-block;
    font-size: 0.75rem;
    color: var(--gray-700);
    transition: transform 0.15s;
}
.source-disclosure[open] > summary::before { transform: rotate(90deg); }

.source-disclosure__body { padding: 0.75rem 0 0.25rem; }

.source-disclosure__list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}
.source-disclosure__list dt {
    font-weight: 600;
    color: var(--gray-700);
}
.source-disclosure__list dd { margin: 0; }

.source-disclosure__hash code {
    font-family: var(--font);
    font-size: 0.78rem;
    word-break: break-all;
    background: #f1f1f1;
    padding: 2px 4px;
    border-radius: 3px;
}

.source-disclosure__excerpt {
    border-left: 3px solid var(--gray-300, #d1d5db);
    padding: 0.35rem 0.75rem;
    margin: 0;
    color: var(--gray-700);
    font-style: italic;
    font-size: 0.9rem;
    white-space: pre-wrap;
}

.source-disclosure__footnote { margin-top: 0.75rem; }

.action-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--gray-100);
    color: var(--gray-700);
}

/* ── Flash Messages ── */
.flash-messages { margin-bottom: 1rem; }

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    border-left: 4px solid transparent;
}

.alert-success { background: var(--success-bg); color: var(--success); border-color: #68d391; }
.alert-error   { background: var(--danger-bg); color: var(--danger); border-color: #fc8181; }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: #f6ad55; }
.alert-info    { background: var(--info-bg); color: var(--info); border-color: #63b3ed; }

/* ── Empty State ── */
.empty-state {
    color: var(--gray-500);
    font-style: italic;
    padding: 1.5rem 0;
    text-align: center;
}

/* ── Text Utilities ── */
.text-muted { color: var(--gray-500); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-navy { color: var(--navy); }
.font-mono { font-family: var(--font-mono); }

/* ── Login / Auth Pages ── */
.auth-shell {
    min-height: calc(100vh - 56px);
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(340px, 470px);
    gap: 1.5rem;
    align-items: stretch;
}

.auth-promo {
    border-radius: 16px;
    padding: 2.1rem 2rem;
    background:
        radial-gradient(circle at 80% 20%, rgba(95,188,216,0.2), rgba(95,188,216,0) 38%),
        linear-gradient(145deg, #122942, #183855 55%, #1d5c73);
    color: #eaf4ff;
    box-shadow: 0 18px 38px rgba(17, 45, 72, 0.25);
    border: 1px solid rgba(255,255,255,0.12);
}

.auth-promo h1 {
    font-family: var(--font-head);
    font-size: 2rem;
    line-height: 1.15;
    margin-bottom: 0.95rem;
}

.auth-promo p {
    font-size: 0.96rem;
    color: rgba(234,244,255,0.88);
    margin-bottom: 1rem;
}

.auth-promo ul {
    margin: 0;
    padding-left: 1rem;
}

.auth-promo li {
    margin-bottom: 0.45rem;
    color: rgba(234,244,255,0.9);
}

.auth-promo-note {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: rgba(234,244,255,0.75);
}

.auth-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.auth-card {
    background: rgba(255,255,255,0.95);
    border: 1px solid #d6dce8;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 34px rgba(20, 43, 73, 0.16);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 440px;
}

.auth-card .brand {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-card .brand h1 {
    font-family: var(--font-head);
    font-size: 1.95rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.25rem;
}

.auth-card .brand p {
    font-size: 0.9rem;
    color: var(--gray-500);
}

.auth-card h2 {
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 1.25rem;
}

.auth-card .form-group { margin-bottom: 1rem; }

.auth-card .form-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
}

.auth-card .form-group input {
    display: block;
    width: 100%;
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.auth-card .form-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(43,108,176,0.15);
}

.auth-divider {
    text-align: center;
    color: var(--gray-500);
    font-size: 0.85rem;
    margin: 1.25rem 0;
    position: relative;
}

.auth-divider::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: var(--border);
}

.auth-divider span {
    position: relative;
    background: var(--white);
    padding: 0 0.75rem;
}

.subtitle {
    color: var(--gray-500);
    margin-bottom: 1rem;
}

/* ── Balance Bars ── */
.balance-bar-wrap { margin: 0.25rem 0; }

.balance-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--gray-200);
    overflow: hidden;
    margin-bottom: 0.3rem;
}

.balance-bar .fill-plaintiff {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
}

.balance-bar .fill-defendant {
    height: 100%;
    background: #e05252;
    border-radius: 4px;
    float: right;
}

.balance-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--gray-500);
}

/* ── Settlement / Comparison ── */
.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

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

.party-column-p { border-top: 3px solid var(--accent); }
.party-column-d { border-top: 3px solid #e05252; }

.party-header {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
}

.party-header.plaintiff { color: var(--accent); }
.party-header.defendant { color: #c53030; }

.comparison-hero {
    margin-bottom: 1.2rem;
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
    background:
        radial-gradient(circle at 78% 24%, rgba(82, 191, 201, 0.22), rgba(82, 191, 201, 0) 36%),
        linear-gradient(135deg, #112842, #163855 55%, #205265);
    color: #f4fbff;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 14px 30px rgba(20, 44, 68, 0.18);
}

.comparison-hero h2 {
    font-family: var(--font-head);
    font-size: 1.32rem;
    margin: 0.25rem 0 0.4rem 0;
}

.comparison-hero p {
    color: rgba(244,251,255,0.84);
    margin: 0;
}

.comparison-hero-metrics {
    display: grid;
    gap: 0.7rem;
}

.comparison-hero-metrics > div {
    border-radius: 9px;
    background: rgba(255,255,255,0.1);
    padding: 0.6rem 0.75rem;
}

.comparison-hero-metrics span {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.82;
}

.comparison-hero-metrics strong {
    font-size: 1rem;
    font-family: var(--font-head);
}

.debt-hero {
    background:
        radial-gradient(circle at 82% 18%, rgba(92, 201, 184, 0.2), rgba(92, 201, 184, 0) 34%),
        linear-gradient(135deg, #10293e, #19445b 55%, #1c6b69);
}

.net-position {
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0.75rem;
    border-radius: var(--radius);
    text-align: center;
    margin-top: 0.75rem;
}

.net-position.positive { background: var(--success-bg); color: var(--success); }
.net-position.negative { background: var(--danger-bg); color: var(--danger); }
.net-position.neutral  { background: var(--gray-100); color: var(--gray-700); }

/* ── Comparison row colors ── */
.row-plaintiff-advantage { background: rgba(43,108,176,0.07); }
.row-defendant-advantage { background: rgba(224,82,82,0.07); }

.indicator-green { color: var(--success); font-weight: 700; }
.indicator-red   { color: var(--danger); font-weight: 700; }

/* ── Audit Log ── */
.audit-table .action-cell { max-width: 200px; }
.audit-table .value-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

/* ── Calculator / Settlement ── */
.methodology-box {
    background: var(--accent-light);
    border: 1px solid #bee3f8;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.methodology-box p { font-size: 0.875rem; color: var(--info); line-height: 1.7; }

.review-focus-box {
    background:
        linear-gradient(135deg, rgba(235, 244, 255, 0.95), rgba(232, 250, 247, 0.95));
}

.factor-list {
    list-style: none;
    padding: 0;
}

.factor-list li {
    padding: 0.4rem 0;
    padding-left: 1.25rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
    position: relative;
}

.factor-list li::before {
    content: '§';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}

.adjustment-item {
    background: var(--warning-bg);
    border: 1px solid #f6ad55;
    border-radius: var(--radius);
    padding: 0.65rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.adjustment-item .adj-factor { font-weight: 700; color: var(--warning); }
.adjustment-item .adj-detail { color: var(--gray-700); margin: 0.1rem 0; }
.adjustment-item .adj-amount { font-size: 0.8rem; color: var(--gray-500); }

.equalization-box {
    background: var(--navy);
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

.equalization-box .eq-label { font-size: 0.85rem; opacity: 0.8; margin-bottom: 0.25rem; }
.equalization-box .eq-amount { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.equalization-box .eq-direction { font-size: 0.875rem; opacity: 0.85; margin-top: 0.35rem; }

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

.review-stat-card {
    background: rgba(255,255,255,0.92);
    border: 1px solid #d6dce8;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 0.95rem 1.05rem;
}

.review-stat-card span {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.review-stat-card strong {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--font-head);
    font-size: 1.35rem;
    color: var(--navy);
}

.review-stat-card small {
    display: block;
    margin-top: 0.2rem;
    color: var(--gray-500);
}

.signoff-matrix .matrix-citation {
    min-width: 230px;
}

.signoff-matrix .row-verified td {
    background: rgba(39, 103, 73, 0.035);
}

.disclaimer-box {
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-left: 4px solid var(--navy);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    color: var(--gray-700);
    line-height: 1.6;
    margin-top: 1.5rem;
}

/* ── Chart containers ── */
.chart-container {
    position: relative;
    height: 280px;
    margin: 1rem 0;
}

.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

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

@media (max-width: 768px) {
    .comparison-hero { grid-template-columns: 1fr; }
}

/* ── Invite Section ── */
.invite-section { margin-bottom: 1rem; }

/* ── OCR / Receipt ── */
.ocr-section {
    background: var(--gray-50);
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.ocr-section p { color: var(--gray-500); font-size: 0.875rem; margin-top: 0.5rem; }

/* ── Footer ── */
.footer {
    background: var(--navy-dark);
    color: rgba(255,255,255,0.6);
    text-align: center;
    font-size: 0.8rem;
    padding: 1rem;
    margin-top: auto;
}

.footer-links {
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-links a {
    color: rgba(255,255,255,0.85);
}

.footer-links a:hover {
    color: #ffffff;
}

/* ── Error Page ── */
.error-page {
    text-align: center;
    padding: 4rem 2rem;
}

.error-page .error-code {
    font-size: 6rem;
    font-weight: 900;
    color: var(--gray-200);
    line-height: 1;
}

.error-page h1 {
    font-size: 1.5rem;
    color: var(--navy);
    margin: 0.5rem 0 1rem;
}

.error-page p { color: var(--gray-500); margin-bottom: 1.5rem; }

/* ── Progress / Split Bar ── */
.split-bar-container { margin: 0.5rem 0 1rem; }

.split-bar {
    height: 20px;
    border-radius: 10px;
    background: var(--gray-200);
    overflow: hidden;
    display: flex;
}

.split-bar .p-fill {
    background: var(--accent);
    height: 100%;
    transition: width 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: white;
}

.split-bar .d-fill {
    background: #e05252;
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: white;
}

.split-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.split-labels .p-label { color: var(--accent); }
.split-labels .d-label { color: #c53030; }

/* ── Modals (for edit forms) ── */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.modal-backdrop.open { display: flex; }

.modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.75rem;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modal h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 1rem;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--gray-500);
    padding: 0.25rem;
    line-height: 1;
}

.modal-close:hover { color: var(--gray-900); }

.workspace-badge {
    background: rgba(255,255,255,0.18);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--teal);
    margin-bottom: 0.65rem;
}

.auth-shell-wide {
    grid-template-columns: 1.2fr 1fr;
}

.auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.auth-promo-hero {
    min-height: 100%;
}

.feature-chip-row,
.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.feature-chip,
.hero-proof span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    color: rgba(255,255,255,0.92);
    font-size: 0.82rem;
    font-weight: 600;
}

.landing-hero {
    display: grid;
    grid-template-columns: 1.35fr 0.95fr;
    gap: 1.5rem;
    align-items: stretch;
    margin: 1rem 0 1.75rem;
}

.landing-copy,
.landing-panel {
    border-radius: 22px;
    padding: 1.6rem;
    box-shadow: 0 18px 40px rgba(15, 39, 67, 0.12);
}

.landing-copy {
    color: var(--white);
    background:
        radial-gradient(circle at 20% 20%, rgba(143, 209, 228, 0.18), rgba(143, 209, 228, 0) 32%),
        linear-gradient(135deg, #102740 0%, #173a60 52%, #1b6a7b 100%);
}

.landing-copy h1 {
    font-family: var(--font-head);
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}

.landing-copy p {
    max-width: 44rem;
    color: rgba(255,255,255,0.88);
    font-size: 1rem;
}

.landing-panel {
    display: grid;
    gap: 1rem;
    background: rgba(255,255,255,0.84);
    border: 1px solid rgba(208, 217, 232, 0.8);
}

.landing-panel-card {
    border-radius: 18px;
    padding: 1rem 1.05rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(242, 247, 252, 0.92));
    border: 1px solid rgba(208, 217, 232, 0.9);
}

.landing-stat-value {
    font-family: var(--font-head);
    font-size: 1.35rem;
    color: var(--navy);
    margin-bottom: 0.35rem;
}

.landing-stat-label {
    color: var(--gray-700);
    font-size: 0.93rem;
}

.hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.pricing-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.pricing-card {
    background: rgba(255,255,255,0.92);
    border-radius: 18px;
    padding: 1.25rem;
    border: 1px solid rgba(207, 216, 229, 0.95);
    box-shadow: 0 12px 24px rgba(16, 37, 63, 0.07);
}

.pricing-card-top h2 {
    font-family: var(--font-head);
    font-size: 1.7rem;
    margin-bottom: 0.35rem;
}

.plain-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.2rem;
    display: grid;
    gap: 0.55rem;
}

.plain-list li {
    padding-left: 1rem;
    position: relative;
}

.plain-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.63rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
}

.btn-block {
    width: 100%;
    display: inline-flex;
    justify-content: center;
}

.btn-lg {
    min-height: 46px;
    padding: 0.8rem 1.15rem;
}

.table-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    align-items: center;
}

.table-actions form {
    margin: 0;
}

/* ── Party List (Invite Page) ── */
.party-list { display: grid; gap: 0.5rem; }

.party-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.party-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    background: var(--accent-light);
    color: var(--accent);
    flex-shrink: 0;
}

.party-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.party-info strong { font-size: 0.9rem; color: var(--gray-900); }
.party-info span { font-size: 0.78rem; }

/* ── Print ── */
@media print {
    .navbar, .footer, .btn, form, .flash-messages { display: none !important; }
    .container { padding: 0; }
    .card { box-shadow: none; border: 1px solid #ccc; }
    body { background: white; }
}

@media (max-width: 980px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }
    .auth-grid,
    .landing-hero {
        grid-template-columns: 1fr;
    }
    .auth-promo {
        display: none;
    }
}

/* ── Apple-Level Micro-Interactions ── */
.card {
    transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(16, 37, 63, 0.12), 0 4px 8px rgba(16, 37, 63, 0.06);
}

.stat-card {
    transition: transform var(--transition), box-shadow var(--transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 37, 63, 0.12);
}

.btn {
    transition: all var(--transition);
}

.btn:active {
    transform: scale(0.98);
}

.nav-links a {
    transition: background var(--transition), color var(--transition);
}

.table tbody tr {
    transition: background var(--transition);
}

.alert {
    animation: alertSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes alertSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.pricing-card {
    transition: transform var(--transition), box-shadow var(--transition);
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(16, 37, 63, 0.14);
}

.landing-panel-card {
    transition: transform var(--transition), box-shadow var(--transition);
}

.landing-panel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 37, 63, 0.1);
}

/* ── Legal Pages ── */
.legal-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 1rem 0 2rem;
}

.legal-header {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--navy);
}

.legal-header h1 {
    font-family: var(--font-head);
    font-size: 2rem;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.02em;
    margin: 0.25rem 0 0.5rem;
}

.legal-body section {
    margin-bottom: 2rem;
}

.legal-body h2 {
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.75rem;
    padding-top: 0.5rem;
}

.legal-body h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 1rem 0 0.5rem;
}

.legal-body p {
    color: var(--gray-700);
    line-height: 1.75;
    margin-bottom: 0.75rem;
}

.legal-body ul {
    list-style: none;
    padding: 0;
    margin-bottom: 0.75rem;
}

.legal-body ul li {
    padding: 0.35rem 0 0.35rem 1.25rem;
    color: var(--gray-700);
    line-height: 1.65;
    position: relative;
}

.legal-body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
}

/* ── Focus Styles (Accessibility) ── */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Loading Skeleton ── */
.skeleton {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius);
}

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

/* ── Smooth Page Transitions ── */
main.container {
    animation: pageIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Purchase Success Page ── */
.purchase-success {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem 0 3rem;
    text-align: center;
}

.success-icon { margin-bottom: 1.25rem; }

.purchase-success h1 {
    font-family: var(--font-head);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.success-subtitle {
    color: var(--gray-700);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.success-steps {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.success-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    transition: all var(--transition);
}

.success-step.done {
    background: var(--success-bg);
    border-color: #68d391;
}

.success-step.active {
    background: var(--accent-light);
    border-color: var(--accent);
}

.step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.success-step.done .step-number { background: var(--success); color: var(--white); }
.success-step.active .step-number { background: var(--accent); color: var(--white); }

.step-content {
    text-align: left;
}

.step-content strong {
    display: block;
    font-size: 0.85rem;
    color: var(--gray-900);
}

.step-content span {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.success-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.success-features {
    text-align: left;
    margin-bottom: 2rem;
}

.success-features h2 {
    font-family: var(--font-head);
    font-size: 1.1rem;
    color: var(--navy);
    margin-bottom: 1rem;
    text-align: center;
}

.success-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.success-feature {
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: var(--white);
    border: 1px solid var(--gray-200);
    transition: all var(--transition);
}

.success-feature:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(43,108,176,0.08);
}

.sf-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.success-feature strong {
    display: block;
    font-size: 0.9rem;
    color: var(--gray-900);
    margin-bottom: 0.2rem;
}

.success-feature span {
    font-size: 0.8rem;
    color: var(--gray-500);
    line-height: 1.4;
}

.success-install-hint {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    font-size: 0.82rem;
    color: var(--gray-700);
    text-align: left;
}

@media (max-width: 640px) {
    .success-steps { flex-direction: column; }
    .success-feature-grid { grid-template-columns: 1fr; }
}

/* ── Mobile Navigation Improvements ── */
@media (max-width: 768px) {
    .navbar {
        flex-wrap: wrap;
        height: auto;
        padding: 0.5rem 1rem;
        gap: 0.25rem;
    }
    .nav-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0.25rem 0;
    }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-user {
        margin-left: auto;
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .header-actions {
        width: 100%;
    }
    .legal-header h1 {
        font-size: 1.5rem;
    }
}

/* ── Typography Scale & Weights ── */
html { font-size: 15px; }

body {
    font-weight: 400;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
}

h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
h2 { font-size: clamp(1.15rem, 3vw, 1.75rem); }
h3 { font-size: clamp(1rem, 2.5vw, 1.35rem); }

.label-text, label, .form-group label, th {
    font-weight: 500;
}

.subheading, .card h2, .section-title {
    font-weight: 600;
}

small, .text-sm { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }

code, .font-mono, .amount {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

/* ── Spacing Polish (4px base unit) ── */
.card {
    padding: 24px;
}

.section-padding {
    padding: 64px 0;
}

@media (max-width: 768px) {
    .section-padding { padding: 48px 0; }
}

.btn {
    min-height: 40px;
    border-radius: 6px;
}

.btn-sm {
    min-height: 32px;
}

.btn-lg {
    min-height: 48px;
}

.form-group input,
.form-group select,
.form-group textarea {
    border-radius: 6px;
    min-height: 40px;
    padding: 8px 12px;
}

.stat-card {
    padding: 16px 20px;
}

.card { border-radius: 8px; }
.stat-card { border-radius: 8px; }
.modal { border-radius: 8px; }
.pricing-card { border-radius: 8px; }

/* ── Case sub-navigation (under the case title on every /cases/<id>/* page) ── */
.case-subnav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.125rem;
    padding: 0.5rem 0;
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: thin;
}
.case-subnav::-webkit-scrollbar { height: 4px; }
.case-subnav::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }
.case-subnav-link {
    color: var(--gray-700);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
}
.case-subnav-link:hover {
    background: var(--gray-100);
    color: var(--accent);
    text-decoration: none;
}
.case-subnav-link.active {
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 600;
}

/* ── Dark Mode (opt-in via <html data-theme="dark">) ── */
/* Light is the default. Dark applies only when an explicit theme toggle
 * sets data-theme="dark" on the root element. We deliberately do NOT bind
 * to (prefers-color-scheme: dark) — headless preview browsers and
 * mismatched OS settings would otherwise flip the entire app uninten-
 * tionally. The block uses native CSS nesting (Chrome 112+, Safari 16.5+,
 * Firefox 117+ — all supported targets). */
:root[data-theme="dark"] {
    & {
        --navy:        #5b8dd9;
        --navy-dark:   #1a1a2e;
        --navy-light:  #7aa3e0;
        --ink:         #e8f0fe;
        --teal:        #2dd4bf;
        --accent:      #3B82F6;
        --accent-light:#1e3a5f;
        --success:     #34d399;
        --success-bg:  #052e1a;
        --danger:      #f87171;
        --danger-bg:   #2d0a0a;
        --warning:     #fbbf24;
        --warning-bg:  #2d1a00;
        --info:        #60a5fa;
        --info-bg:     #0d1f3c;
        --gray-50:     #111111;
        --gray-100:    #1a1a1a;
        --gray-200:    #2a2a2a;
        --gray-300:    #3a3a3a;
        --gray-500:    #8a8a9a;
        --gray-700:    #c0c0d0;
        --gray-900:    #fafafa;
        --white:       #141414;
        --border:      #2e2e3e;
        --shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
        --shadow:      0 2px 8px rgba(0,0,0,0.4);
        --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
    }

    body {
        background: #0A0A0A;
        color: #FAFAFA;
    }

    /* Navbar */
    .navbar {
        background: linear-gradient(135deg, #0d1a2b 0%, #0f2238 55%, #102a3e 100%);
        box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    }

    /* Main background — kill the light gradient */
    body {
        background:
            radial-gradient(circle at 12% 8%, rgba(59,130,246,0.06) 0, rgba(59,130,246,0) 32%),
            radial-gradient(circle at 90% 2%, rgba(45,212,191,0.05) 0, rgba(45,212,191,0) 26%),
            linear-gradient(180deg, #0A0A0A 0%, #0d0d12 100%);
    }

    /* Cards */
    .card {
        background: #161622;
        border-color: #252535;
        box-shadow: 0 12px 28px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
    }

    .stat-card {
        background: #161622;
        border-color: #252535;
    }

    .review-stat-card {
        background: #161622;
        border-color: #252535;
    }

    .landing-panel {
        background: rgba(22, 22, 34, 0.92);
        border-color: rgba(50, 50, 70, 0.8);
    }

    .landing-panel-card {
        background: linear-gradient(180deg, rgba(28,28,42,0.95), rgba(20,20,32,0.92));
        border-color: rgba(50, 50, 70, 0.9);
    }

    .pricing-card {
        background: rgba(22, 22, 34, 0.92);
        border-color: rgba(50, 50, 70, 0.95);
    }

    /* Auth cards */
    .auth-card {
        background: rgba(22, 22, 34, 0.97);
        border-color: #252535;
        box-shadow: 0 16px 34px rgba(0,0,0,0.5);
    }

    .auth-divider span {
        background: #161622;
    }

    /* Forms */
    .form-group input,
    .form-group select,
    .form-group textarea {
        background: #1a1a2a;
        border-color: #2e2e3e;
        color: #FAFAFA;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        border-color: #3B82F6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
    }

    .form-group input::placeholder {
        color: #4a4a5a;
    }

    .inline-form input,
    .inline-form select {
        background: #1a1a2a;
        border-color: #2e2e3e;
        color: #FAFAFA;
    }

    .auth-card .form-group input {
        background: #1a1a2a;
        border-color: #2e2e3e;
        color: #FAFAFA;
    }

    .auth-card .form-group input:focus {
        border-color: #3B82F6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
    }

    /* Tables */
    .table th {
        background: #1a1a2a;
        color: #FAFAFA;
    }

    .table td {
        border-bottom-color: #252535;
    }

    .table tbody tr:nth-child(even) {
        background: #111118;
    }

    .table tbody tr:hover {
        background: #1e2a40;
    }

    .table tfoot td {
        background: #1a1a2a;
        border-top-color: #3B82F6;
    }

    /* Buttons */
    .btn-outline {
        color: #7aa3e0;
        border-color: #3a3a5a;
    }

    .btn-outline:hover {
        background: #1e3a5f;
        color: #FAFAFA;
        border-color: #3B82F6;
    }

    .btn-danger {
        background: #2d0a0a;
        color: #f87171;
        border-color: #7f1d1d;
    }

    .btn-success {
        background: #052e1a;
        color: #34d399;
        border-color: #065f46;
    }

    /* Flash alerts */
    .alert-success {
        background: #052e1a;
        color: #6ee7b7;
        border-color: #065f46;
    }

    .alert-error {
        background: #2d0a0a;
        color: #fca5a5;
        border-color: #7f1d1d;
    }

    .alert-warning {
        background: #2d1a00;
        color: #fcd34d;
        border-color: #92400e;
    }

    .alert-info {
        background: #0d1f3c;
        color: #93c5fd;
        border-color: #1e3a5f;
    }

    /* Modals */
    .modal {
        background: #161622;
        border: 1px solid #252535;
    }

    .modal h3 {
        color: #93c5fd;
    }

    .modal-backdrop {
        background: rgba(0,0,0,0.7);
    }

    /* Footer */
    .footer {
        background: #060608;
        color: rgba(255,255,255,0.45);
    }

    /* Page header */
    .page-header {
        border-bottom-color: #3B82F6;
    }

    .page-header h1 {
        color: #93c5fd;
    }

    /* Section components */
    .methodology-box {
        background: #0d1f3c;
        border-color: #1e3a5f;
    }

    .methodology-box p {
        color: #93c5fd;
    }

    .disclaimer-box {
        background: #111118;
        border-color: #2e2e3e;
        border-left-color: #3B82F6;
        color: #c0c0d0;
    }

    .adjustment-item {
        background: #2d1a00;
        border-color: #92400e;
    }

    .ocr-section {
        background: #111118;
        border-color: #2e2e3e;
    }

    .party-item {
        background: #161622;
        border-color: #252535;
    }

    .equalization-box {
        background: #1a2a4a;
    }

    .net-position.positive {
        background: #052e1a;
        color: #34d399;
    }

    .net-position.negative {
        background: #2d0a0a;
        color: #f87171;
    }

    .net-position.neutral {
        background: #1a1a2a;
        color: #c0c0d0;
    }

    .success-step {
        background: #161622;
        border-color: #252535;
    }

    .success-step.done {
        background: #052e1a;
        border-color: #065f46;
    }

    .success-step.active {
        background: #0d1f3c;
        border-color: #3B82F6;
    }

    .success-feature {
        background: #161622;
        border-color: #252535;
    }

    .success-install-hint {
        background: #111118;
        border-color: #252535;
        color: #c0c0d0;
    }

    .skeleton {
        background: linear-gradient(90deg, #1a1a2a 25%, #252535 50%, #1a1a2a 75%);
    }

    /* Balance bar */
    .balance-bar {
        background: #252535;
    }

    /* Split bar */
    .split-bar {
        background: #252535;
    }

    /* Badges */
    .badge-separate {
        background: #1a1a2a;
        color: #c0c0d0;
    }

    .action-badge {
        background: #1a1a2a;
        color: #c0c0d0;
    }

    /* Legal pages */
    .legal-header {
        border-bottom-color: #3B82F6;
    }

    .legal-header h1,
    .legal-body h2 {
        color: #93c5fd;
    }

    .legal-body h3 {
        color: #c0c0d0;
    }

    .legal-body p,
    .legal-body ul li {
        color: #c0c0d0;
    }

    /* Error page */
    .error-page .error-code {
        color: #252535;
    }

    .error-page h1 {
        color: #93c5fd;
    }

    /* SF icon in success page */
    .sf-icon {
        background: #0d1f3c;
        color: #3B82F6;
    }
}

/* ── Quick-Start Wizard ─────────────────────────────────────────────────── */

/* Step indicator */
.wizard-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 1.5rem auto 2rem;
    max-width: 400px;
}

.step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: default;
}

.dot-circle {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    background: #fff;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
}

.step-dot.active .dot-circle {
    background: var(--accent);
    border-color: var(--accent);
}

.step-dot.completed .dot-circle {
    background: var(--teal);
    border-color: var(--teal);
}

.step-dot.completed .dot-circle::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.dot-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 500;
}

.step-dot.active .dot-label {
    color: var(--accent);
    font-weight: 600;
}

.step-dot.completed .dot-label {
    color: var(--teal);
}

.step-connector {
    flex: 1;
    height: 2px;
    background: var(--gray-200);
    margin: 0 4px;
    margin-bottom: 20px;
}

/* Wizard card */
.wizard-card {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.wizard-step-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 1.5rem;
}

.wizard-step-hint {
    color: var(--gray-500);
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

/* Asset/debt row layout */
.row-fields {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.row-fields .flex-grow {
    flex: 1 1 200px;
}

.row-fields .amount-field {
    flex: 0 0 130px;
}

.row-fields .toggle-field {
    flex: 0 0 110px;
}

.asset-row,
.debt-row {
    border-bottom: 1px solid var(--gray-100);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Wizard nav buttons */
.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.add-row-btn {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

/* Screen-reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Required / optional markers */
.required {
    color: var(--danger);
}

.optional {
    color: var(--gray-500);
    font-size: 0.8em;
}

/* Field validation error */
.field-error {
    color: var(--danger);
    font-size: 0.8rem;
    margin-top: 2px;
}

/* Quick-start CTA on dashboard */
.quick-start-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--accent-light);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.cta-tagline {
    color: var(--info);
    font-size: 0.9rem;
}

.quick-start-btn {
    white-space: nowrap;
}

/* === Responsive CSS (Relay 22) === */

/* ── Breakpoints:
   Phone:   max-width 767px
   Tablet:  768px–1023px
   Desktop: 1024px+ (existing styles)
── */

/* ── Bottom Navigation Bar (mobile only) ── */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    z-index: 1000;
    align-items: stretch;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 2px;
    color: var(--gray-500);
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 4px 2px;
    min-height: 44px;
    min-width: 44px;
    transition: color var(--transition);
    border-top: 2px solid transparent;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
    color: var(--navy);
    border-top-color: var(--navy);
    text-decoration: none;
}

.bottom-nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── Swipe-to-Reveal Cards ── */
.swipe-card {
    position: relative;
}

/* Desktop / tablet (table layout): show actions inline — no swipe trick. */
.swipe-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* Phone (card layout): treat the row as a relative container and let swipe
   reveal the action cluster from the right edge. Only applies at ≤767px
   where .responsive-table converts rows to cards. */
@media (max-width: 767px) {
    .swipe-card {
        overflow: hidden;
    }
    .swipe-actions {
        position: absolute;
        right: -110px;
        top: 0;
        bottom: 0;
        width: 110px;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 4px;
        transition: transform 0.3s ease;
        background: var(--gray-100);
        padding: 6px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }
    .swipe-card.swiped .swipe-actions {
        transform: translateX(-110px);
    }
    /* On mobile card rows, reserve space at the far-right so the first swipe
       hint is visible even before the user actually swipes. */
    .responsive-table .swipe-card td[data-label="Actions"] {
        padding-right: 0;
    }
}

/* ── Collapsible Sections ── */
.collapsible-section .section-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.collapsible-section .section-header .chevron {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.collapsible-section.expanded .section-header .chevron {
    transform: rotate(180deg);
}

/* ── Responsive Grid for Case Cards (Dashboard) ── */
.case-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* ── Dollar Input Fields ── */
input.dollar-input {
    font-variant-numeric: tabular-nums;
}

/* ── Horizontal Scroll Tables (schedule tables) ── */
.schedule-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.schedule-table-wrapper table th:first-child,
.schedule-table-wrapper table td:first-child {
    position: sticky;
    left: 0;
    background: var(--white);
    z-index: 1;
}

/* ── Responsive Table → Card (shared base) ── */
.responsive-table td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: none;
}

/* ===== PHONE: max-width 767px ===== */
@media (max-width: 767px) {

    /* Show bottom nav, hide desktop nav */
    .bottom-nav {
        display: flex;
    }

    .navbar {
        padding: 0 1rem;
    }

    .nav-links {
        display: none;
    }

    .nav-user .role-badge,
    .nav-user .workspace-badge {
        display: none;
    }

    /* Push body up from bottom nav (plus iOS safe area) */
    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* Reserve room at the end of long scrollable pages so bottom nav
       doesn't occlude the last form field / list row. */
    main.container,
    .container {
        padding-bottom: 1rem;
    }

    /* Raise sticky bottom nav above iOS home indicator */
    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom, 0px);
        height: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* Container padding */
    .container {
        padding: 0.75rem;
    }

    /* Page headers */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .page-header h1 {
        font-size: 1.4rem;
    }

    /* Minimum tap targets */
    button,
    a.btn,
    .btn,
    .nav-link,
    input[type="checkbox"],
    input[type="radio"],
    select,
    .action-btn,
    .bottom-nav-item {
        min-height: 44px;
    }

    /* Form grids collapse to single column */
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group.full-width {
        grid-column: 1;
    }

    /* Tables → Cards transformation */
    .responsive-table {
        display: block;
        width: 100%;
    }

    .responsive-table thead {
        display: none;
    }

    .responsive-table tbody {
        display: block;
        width: 100%;
    }

    .responsive-table tbody tr {
        display: block;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        box-shadow: var(--shadow-sm);
    }

    .responsive-table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 0.3rem 0;
        border: none;
        border-bottom: 1px solid var(--gray-100);
        font-size: 0.875rem;
        gap: 0.5rem;
    }

    .responsive-table tbody td:last-child {
        border-bottom: none;
        padding-top: 0.5rem;
        flex-wrap: wrap;
    }

    .responsive-table tbody td[data-label]::before {
        display: inline-block;
        min-width: 100px;
        flex-shrink: 0;
    }

    .responsive-table tfoot {
        display: block;
        background: var(--gray-50);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .responsive-table tfoot tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .responsive-table tfoot td {
        border: none;
        padding: 0.2rem 0.5rem;
    }

    /* Collapsible sections on mobile */
    .collapsible-section .section-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .collapsible-section.expanded .section-content {
        max-height: 2000px;
    }

    /* Case grid → single column */
    .case-grid {
        grid-template-columns: 1fr;
    }

    /* Cards */
    .card {
        padding: 1rem;
        margin-bottom: 0.75rem;
    }

    /* Hero sections */
    .comparison-hero {
        flex-direction: column;
        padding: 1rem;
    }

    .comparison-hero-metrics {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    /* Modal full-screen on mobile */
    .modal {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        min-height: 100dvh;
        padding: 1rem;
    }

    .modal-backdrop.open .modal {
        max-height: 100dvh;
        overflow-y: auto;
    }

    /* Tables that must stay as tables scroll horizontally */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Wizard */
    .wizard-indicator {
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .wizard-card {
        padding: 1rem;
    }

    /* Footer */
    .footer {
        padding: 1rem;
        text-align: center;
        margin-bottom: 0;
    }

    /* Flash messages */
    .flash-messages {
        margin-bottom: 0.75rem;
    }

    /* Page subtitle */
    .page-subtitle {
        font-size: 0.875rem;
    }

    /* Stat blocks */
    .stat-grid,
    .metrics-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Nav brand only on mobile */
    .nav-brand {
        flex: 1;
    }

    /* Button groups */
    .header-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Inline forms */
    form.inline {
        display: inline;
    }

    /* Table wrapper for non-responsive tables */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.75rem;
        padding: 0 0.75rem;
    }
}

/* ===== TABLET: 768px–1023px ===== */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding: 1rem 1.25rem;
    }

    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .case-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .responsive-table tbody td[data-label]::before {
        display: none;
    }

    /* Tables stay as tables on tablet */
    .responsive-table {
        display: table;
        width: 100%;
    }

    .responsive-table thead {
        display: table-header-group;
    }

    .responsive-table tbody {
        display: table-row-group;
    }

    .responsive-table tbody tr {
        display: table-row;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        margin-bottom: 0;
    }

    .responsive-table tbody td {
        display: table-cell;
        border-bottom: 1px solid var(--gray-200);
    }

    .responsive-table tfoot {
        display: table-footer-group;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        margin-bottom: 0;
    }

    .responsive-table tfoot tr {
        display: table-row;
        flex-wrap: unset;
        gap: 0;
    }

    .responsive-table tfoot td {
        display: table-cell;
        padding: 0.5rem;
        border-top: 2px solid var(--gray-300);
    }

    /* Bottom nav hidden on tablet */
    .bottom-nav {
        display: none;
    }

    .nav-links {
        display: flex;
    }
}

/* ===== DESKTOP: 1024px+ ===== */
@media (min-width: 1024px) {
    .bottom-nav {
        display: none;
    }

    /* Ensure table card styles reset for desktop */
    .responsive-table {
        display: table;
        width: 100%;
    }

    .responsive-table thead {
        display: table-header-group;
    }

    .responsive-table tbody {
        display: table-row-group;
    }

    .responsive-table tbody tr {
        display: table-row;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        margin-bottom: 0;
    }

    .responsive-table tbody td {
        display: table-cell;
        border-bottom: 1px solid var(--gray-200);
    }

    .responsive-table tbody td[data-label]::before {
        display: none;
    }

    .responsive-table tfoot {
        display: table-footer-group;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        margin-bottom: 0;
    }

    .responsive-table tfoot tr {
        display: table-row;
    }

    .responsive-table tfoot td {
        display: table-cell;
        padding: 0.5rem;
        border-top: 2px solid var(--gray-300);
    }

    /* Collapsible sections always expanded on desktop */
    .collapsible-section .section-content {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ── SHA-256 Verification Badge (Relay 05) ─────────────────────────────────── */
.sha-verify {
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
    cursor: help;
    list-style: none;
    display: inline-flex;
    align-items: center;
    user-select: none;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.sha-verify:hover { opacity: 1; }
.sha-details { display: inline; position: relative; }
.sha-details[open] > .sha-verify { opacity: 1; color: var(--green-600, #16a34a); }
.sha-popover {
    position: absolute;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    min-width: 320px;
    max-width: 480px;
}
.sha-table { font-size: 0.7rem; width: 100%; border-collapse: collapse; }
.sha-table th {
    font-weight: 600;
    color: var(--gray-600, #4b5563);
    padding: 0.15rem 0.5rem 0.15rem 0;
    white-space: nowrap;
    text-align: left;
}
.sha-table td { color: var(--gray-800, #1f2937); word-break: break-all; padding: 0.15rem 0; }
.sha-full { font-family: var(--font); font-size: 0.65rem; }

/* ── Attribution Badge (Relay 05) ──────────────────────────────────────────── */
.attribution-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
    white-space: nowrap;
}
.attr-icon { width: 0.8rem; height: 0.8rem; flex-shrink: 0; }
.attr-text { }

/* ── Classification chips (Relay 06) ──────────────────────────────────────── */
.chip { display:inline-block; padding:2px 7px; border-radius:4px; font-size:0.72rem; font-weight:600; white-space:nowrap; }
.chip-agreed { background:#d4ecd4; color:#2d5f2d; }
.chip-disputed { background:#fce0c5; color:#8a3d00; }
.chip-pending { background:#e9e9e9; color:#555; }

/* ── Relay 17: Brokerage table + adapter status pills ──────────────────────── */
.brokerage-table { width:100%; border-collapse:collapse; font-size:0.875rem; }
.brokerage-table th { background:#f1f5f9; text-align:left; padding:8px 12px; font-weight:600; color:#374151; border-bottom:2px solid #e2e8f0; white-space:nowrap; }
.brokerage-table td { padding:7px 12px; border-bottom:1px solid #e2e8f0; vertical-align:middle; }
.brokerage-table tbody tr:hover { background:#f8fafc; }
.brokerage-table .text-right { text-align:right; }
.classification-chip { display:inline-block; padding:2px 8px; border-radius:12px; font-size:0.7rem; font-weight:600; white-space:nowrap; }
.classification-chip.plaintiff { background:#dbeafe; color:#1d4ed8; }
.classification-chip.defendant { background:#fef9c3; color:#a16207; }
.classification-chip.joint { background:#dcfce7; color:#166534; }
.classification-chip.unknown { background:#f3f4f6; color:#6b7280; }

/* Adapter status pills */
.badge-unscanned { display:inline-flex; align-items:center; gap:4px; background:#fef3c7; color:#92400e; border:1px solid #fcd34d; padding:3px 8px; border-radius:6px; font-size:0.75rem; font-weight:600; }
.badge-inline { display:inline-flex; align-items:center; gap:4px; background:#e0f2fe; color:#0369a1; border:1px solid #7dd3fc; padding:3px 8px; border-radius:6px; font-size:0.75rem; font-weight:600; }
.badge-infected { display:inline-flex; align-items:center; gap:4px; background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; padding:3px 8px; border-radius:6px; font-size:0.75rem; font-weight:600; }

/* Plaid unavailable banner */
.alert { padding:12px 16px; border-radius:8px; border:1px solid transparent; }
.alert-warning { background:#fffbeb; border-color:#fcd34d; color:#78350f; }

/* ── Relay 21: E-Signature Canvas ─────────────────────────────────────────── */
.esign-sig-container {
  position: relative;
  border: 2px solid var(--navy);
  border-radius: 6px;
  background: #fafafa;
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}
.esign-sig-container canvas {
  display: block;
  width: 100%;
  height: 180px;
  background: transparent;
}
.esign-sig-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #bbb;
  font-size: 0.95rem;
  pointer-events: none;
  transition: opacity 0.2s;
}
.esign-sig-placeholder.hidden { opacity: 0; }
.esign-consent-box {
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
}
.esign-consent-box label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.4;
}
.esign-consent-box input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.esign-stroke-counter { font-size: 0.78rem; color: #888; }
.esign-stroke-counter.valid { color: var(--success); font-weight: 600; }
.esign-stroke-counter.invalid { color: var(--danger); }
.esign-audit-hash {
  font-family: var(--font);
  font-size: 0.72rem;
  word-break: break-all;
  color: #333;
}
.esign-badge-yes {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.esign-badge-no {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ── Topnav (role-aware) — Relay 04 re-audit polish ─────────────────────────── */
.topnav {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 1.25rem;
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
    position: relative;
    z-index: 10;
}
.topnav--client {
    background: linear-gradient(90deg, var(--navy) 0%, var(--navy-light) 100%);
}
.topnav-brand {
    color: var(--white);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background var(--transition, 0.15s ease);
}
.topnav-brand:hover {
    background: rgba(255,255,255,0.1);
    text-decoration: none;
    color: var(--white);
}
.topnav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}
.topnav-links li { margin: 0; }
.topnav-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background var(--transition, 0.15s ease), color var(--transition, 0.15s ease);
}
.topnav-links a:hover,
.topnav-links a.active {
    background: rgba(255,255,255,0.14);
    color: var(--white);
    text-decoration: none;
}
.role-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.22);
}
.role-chip--client { background: rgba(255,255,255,0.14); }
.topnav-logout { margin: 0; }
.topnav-logout .btn-link {
    background: transparent;
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(255,255,255,0.28);
    padding: 0.35rem 0.7rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition, 0.15s ease);
}
.topnav-logout .btn-link:hover {
    background: rgba(255,255,255,0.14);
    color: var(--white);
    text-decoration: none;
}

@media (max-width: 767px) {
    .topnav {
        flex-wrap: wrap;
        padding: 0.5rem 0.8rem;
        gap: 0.5rem;
    }
    .topnav-brand { font-size: 1rem; }
    .topnav-links {
        width: 100%;
        order: 3;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.15rem;
        flex-wrap: nowrap;
    }
    .topnav-links a {
        white-space: nowrap;
        padding: 0.35rem 0.6rem;
        font-size: 0.85rem;
    }
    .role-chip { font-size: 0.65rem; padding: 0.15rem 0.5rem; }
}

/* Legal disclaimer aside — YMYL SEO signal */
.legal-disclaimer {
    background: #fef3cd;
    border: 1px solid #ffc107;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #664d03;
}
.legal-disclaimer strong {
    color: #503c03;
}

/* ── SEO Guide Pages ── */

.guide-cta-box {
    background: var(--primary-50, #eff6ff);
    border: 2px solid var(--primary-200, #bfdbfe);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    margin: 2rem 0;
}
.guide-cta-box h2 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}
.guide-cta-box p {
    margin-bottom: 1rem;
    color: var(--gray-600, #4b5563);
}
.guide-cta-box .btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
}
.guide-cta-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 2rem;
}
.guide-cta-compact .btn { margin: 0; }
.cta-note {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-500, #6b7280);
    margin-top: 0.5rem;
}
.guide-cta-compact .cta-note {
    display: inline;
    margin-top: 0;
}

.guide-section { margin-bottom: 1.5rem; }
.guide-section h2 { margin-bottom: 0.75rem; }

.guide-source { font-size: 0.85rem; }

/* State card grid */
.state-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}
.state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200, #e5e7eb);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.state-card:hover {
    border-color: var(--primary-400, #60a5fa);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-decoration: none;
    color: inherit;
}
.state-card-code {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-600, #2563eb);
}
.state-card-name {
    font-weight: 600;
    margin-top: 0.25rem;
}
.state-card-split {
    font-size: 0.8rem;
    color: var(--gray-500, #6b7280);
    margin-top: 0.25rem;
}
.state-card-community { border-left: 3px solid #059669; }
.state-card-equitable { border-left: 3px solid #2563eb; }
.stat-desc {
    font-size: 0.85rem;
    color: var(--gray-500, #6b7280);
    margin-top: 0.5rem;
    line-height: 1.4;
}
.statute-ref { font-size: 0.85rem; }

/* Asset type cards */
.asset-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.asset-type-card {
    padding: 1.25rem;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.5rem;
}
.asset-type-card h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--primary-700, #1d4ed8);
}
.asset-type-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    color: var(--gray-600, #4b5563);
}

/* FAQ */
.faq-item {
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    padding: 0.75rem 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
    content: "+";
    font-weight: 700;
    margin-right: 0.5rem;
    color: var(--primary-500, #3b82f6);
}
.faq-item[open] summary::before { content: "\2212"; }
.faq-item summary h3 {
    display: inline;
    font-size: 1rem;
    font-weight: 600;
}
.faq-item p {
    margin: 0.5rem 0 0 1.25rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--gray-600, #4b5563);
}

/* Guide navigation */
.guide-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}
.guide-nav-link {
    text-decoration: none;
    color: var(--primary-600, #2563eb);
    font-weight: 500;
    font-size: 0.9rem;
}
.guide-nav-link:hover { text-decoration: underline; }
.guide-nav-link.index { font-weight: 600; }

@media (max-width: 640px) {
    .state-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .asset-type-grid {
        grid-template-columns: 1fr;
    }
    .guide-cta-compact {
        flex-direction: column;
    }
}