/* ─────────────────────────────────────────────────────────────────────────
   Mediation Hub design system
   Ported from the EightyTwenty.MediationHubDemo "Pathway" prototype.

   Self-hosted fonts (latin subset) — no Google Fonts CDN, so no third-party
   request and no visitor-IP leakage (matters for a UK PII product) and it
   works offline. DM Sans and Playfair Display are variable fonts: one woff2
   file covers the whole weight range.
   ───────────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('../fonts/dm-sans.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 300 600;
    font-display: swap;
    src: url('../fonts/dm-sans-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/playfair-display.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Self-hosted Noto subsets for the non-Latin self-referral languages — still no CDN, so the
   privacy/offline stance holds. unicode-range keeps the Latin default path untouched: these only
   download when the page actually renders Cyrillic / Arabic / CJK glyphs. */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/noto-sans-cyrillic-400.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/noto-sans-cyrillic-600.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Noto Naskh Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/noto-naskh-arabic-400.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: 'Noto Naskh Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/noto-naskh-arabic-700.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/noto-sans-sc-400.woff2') format('woff2');
    /* CJK is large (~1.1MB); it loads only for the zh-Hans page via the lang-scoped stack below. */
    unicode-range: U+2E80-2FDF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

:root {
    /* ── Primitive palette ─────────────────────────────────────────────────
       Literal, honest colour values. These are the raw swatches; they are
       NEVER overridden per tenant and components should not consume them
       directly — use the semantic tokens below. (A primitive named --teal is
       always teal.) */
    --navy: #0f1f3d;
    --navy-mid: #162847;
    --navy-light: #1e3560;
    --slate: #2e4a72;
    --teal: #0ea5a0;
    --teal-light: #14b8b2;
    --amber: #f59e0b;
    --amber-light: #fcd34d;
    --rose: #f43f5e;
    --green: #10b981;
    --green-light: #34d399;
    --purple: #8b5cf6;
    --white: #ffffff;
    --offwhite: #f8f9fc;
    --grey-100: #f1f4f9;
    --grey-200: #e2e8f4;
    --grey-300: #c8d4e8;
    --grey-400: #8fa3c0;
    --grey-500: #5e7799;
    --grey-600: #3d5270;

    /* ── Semantic brand tokens (the three per-tenant knobs) ─────────────────
       Components consume THESE, not the primitives. ResolvedBranding overrides
       --color-primary / --color-accent / --color-highlight per tenant (see
       appsettings Tenancy:Tenants[n]:Branding Primary/Accent/Highlight), and
       everything below derives from them via color-mix, so a rebrand cascades
       through the whole UI rather than stopping at direct references. */
    --color-primary: var(--navy);
    --color-accent: var(--teal);
    --color-highlight: var(--amber);

    /* Logo mark colour. Defaults to the accent, but a tenant whose signature colour
       is its highlight (e.g. a gold mark) can override --color-mark on its own. */
    --color-mark: var(--color-accent);
    --color-mark-strong: color-mix(in srgb, var(--color-mark), black 18%);

    /* Solid shades derived from the brand tokens (gradient partners, hovers). */
    --color-accent-light: color-mix(in srgb, var(--color-accent), white 16%);
    --color-accent-strong: color-mix(in srgb, var(--color-accent), black 18%);
    --color-highlight-light: color-mix(in srgb, var(--color-highlight), white 32%);
    --color-highlight-strong: color-mix(in srgb, var(--color-highlight), black 12%);

    /* Translucent tints of the brand tokens (active / hover / focus surfaces),
       so accent- and highlight-tinted backgrounds track the brand too. */
    --color-accent-tint-06: color-mix(in srgb, var(--color-accent) 6%, transparent);
    --color-accent-tint-08: color-mix(in srgb, var(--color-accent) 8%, transparent);
    --color-accent-tint-10: color-mix(in srgb, var(--color-accent) 10%, transparent);
    --color-accent-tint-12: color-mix(in srgb, var(--color-accent) 12%, transparent);
    --color-accent-tint-15: color-mix(in srgb, var(--color-accent) 15%, transparent);
    --color-accent-tint-18: color-mix(in srgb, var(--color-accent) 18%, transparent);
    --color-accent-tint-20: color-mix(in srgb, var(--color-accent) 20%, transparent);
    --color-highlight-tint-10: color-mix(in srgb, var(--color-highlight) 10%, transparent);

    /* ── Semantic text — derived from the brand primary so copy is on-brand
       and consistent (headings and body text resolve the same way). */
    --text-primary: var(--color-primary);
    --text-secondary: color-mix(in srgb, var(--color-primary), white 30%);
    --text-muted: color-mix(in srgb, var(--color-primary), white 52%);

    --sidebar-w: 240px;
    --sidebar-w-collapsed: 68px;
    --topbar-h: 64px;
}

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

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--offwhite);
    color: var(--text-primary);
    display: flex;
    min-height: 100vh;
    font-size: 14px;
}

/* ── SIDEBAR ─────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    background: var(--color-primary);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    overflow: hidden;
    transition: width 0.2s ease;
}

.sidebar-logo {
    padding: 24px 20px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.logo-mark {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo-icon {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, var(--color-mark), var(--color-mark-strong));
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}
.logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    font-weight: 600;
    color: white;
    letter-spacing: 0.01em;
}
.logo-sub {
    font-size: 10px;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* The brand block doubles as a link home; keep its look, add a subtle hover affordance. */
a.logo-mark { text-decoration: none; color: inherit; }
a.logo-mark .logo-icon { transition: filter 0.15s ease; }
a.logo-mark:hover .logo-icon { filter: brightness(1.15); }

/* Friendly disclosure 404 — rendered under either shell, so it lives in the shared stylesheet. */
.disclosure-not-found .hint { color: var(--text-muted); max-width: 60ch; }
.disclosure-not-found__actions { display: flex; gap: 12px; margin: 18px 0 10px; flex-wrap: wrap; }

.sidebar-section {
    padding: 18px 14px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    margin: 1px 8px;
    border-radius: 7px;
    cursor: pointer;
    text-decoration: none;
    color: rgba(255,255,255,0.55);
    font-size: 13.5px;
    font-weight: 400;
    transition: all 0.15s;
    position: relative;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
.nav-item.active {
    background: var(--color-accent-tint-18);
    color: var(--color-accent-light);
    font-weight: 500;
}
.nav-item.active::before {
    content: '';
    position: absolute;
    left: -8px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 18px;
    background: var(--color-accent);
    border-radius: 2px;
}
.nav-icon { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
.nav-badge {
    margin-left: auto;
    background: var(--rose);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 20px;
    min-width: 18px;
    text-align: center;
}
.nav-badge.amber { background: var(--color-highlight); color: var(--color-primary); }

.sidebar-user {
    margin-top: auto;
    padding: 14px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-avatar {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}
.user-name { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.85); }
.user-role { font-size: 11px; color: rgba(255,255,255,0.35); }
.user-signout {
    margin-left: auto;
    color: rgba(255,255,255,0.35);
    font-size: 15px;
    text-decoration: none;
    flex-shrink: 0;
}
.user-signout:hover { color: rgba(255,255,255,0.85); }

/* ── COLLAPSED SIDEBAR (icon-only rail) ──────────────
   State lives on <html> so it can be applied before first paint. */
.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
.sidebar-collapsed .main { margin-left: var(--sidebar-w-collapsed); }

.sidebar-collapsed .logo-text,
.sidebar-collapsed .logo-sub,
.sidebar-collapsed .sidebar-section,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .user-name,
.sidebar-collapsed .user-role,
.sidebar-collapsed .user-signout,
.sidebar-collapsed .nav-badge { display: none; }

.sidebar-collapsed .sidebar-logo { padding-left: 0; padding-right: 0; }
.sidebar-collapsed .logo-mark,
.sidebar-collapsed .nav-item,
.sidebar-collapsed .sidebar-user { justify-content: center; gap: 0; }
.sidebar-collapsed .nav-item { margin-left: 6px; margin-right: 6px; }

/* ── MAIN AREA ───────────────────────────────────── */
.main {
    margin-left: var(--sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.2s ease;
}

.topbar {
    height: var(--topbar-h);
    background: white;
    border-bottom: 1px solid var(--grey-200);
    display: flex;
    align-items: center;
    padding: 0 28px;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar-title {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
    flex: 1;
}
.topbar-subtitle { font-size: 12px; color: var(--text-muted); font-family: 'DM Sans', sans-serif; font-weight: 300; }

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--grey-200);
    border-radius: 7px;
    background: white;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-toggle:hover { background: var(--offwhite); color: var(--text-primary); border-color: var(--grey-300); }
.sidebar-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    font-family: 'DM Sans', sans-serif;
    text-decoration: none;
}
.btn-primary { background: var(--color-accent); color: white; }
.btn-primary:hover { background: var(--color-accent-strong); }
.btn-outline {
    background: transparent;
    border: 1px solid var(--grey-200);
    color: var(--text-secondary);
}
.btn-outline:hover { border-color: var(--grey-300); background: var(--grey-100); }
.btn-ghost { background: transparent; color: var(--text-secondary); padding: 8px 10px; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-amber { background: var(--color-highlight); color: var(--color-primary); }
.btn-amber:hover { background: var(--color-highlight-strong); }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.notif-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--grey-200);
    background: white;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    position: relative;
    color: var(--text-secondary);
}
.notif-dot {
    position: absolute;
    top: 6px; right: 6px;
    width: 7px; height: 7px;
    background: var(--rose);
    border-radius: 50%;
    border: 1.5px solid white;
}

.page-content { padding: 28px; flex: 1; }

/* ── VIEWS ────────────────────────────────────────── */
.view { display: none; }
.view.active { display: block; }

/* ── STAT CARDS ───────────────────────────────────── */
.stats-row {
    display: grid;
    /* Cards wrap under one another when the page is too narrow for four abreast. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.stat-card {
    background: white;
    border-radius: 12px;
    padding: 10px 16px;
    border: 1px solid var(--grey-200);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s;
    display: flex;
    /* Value and label sit on a shared text baseline; the icon centres itself. */
    align-items: baseline;
    gap: 12px;
}
.stat-card:hover { box-shadow: 0 4px 20px rgba(15,31,61,0.08); }
/* Clickable cards are anchors filtering the case list; undo the link styling. */
a.stat-card {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
/* Bottom-right arrow on clickable cards: the cue that the card leads somewhere.
   (::after is the top accent bar.) */
a.stat-card::before {
    content: '→';
    position: absolute;
    right: 10px;
    bottom: 5px;
    font-size: 18px;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0.55;
    transition: opacity 0.15s, transform 0.15s;
}
a.stat-card:hover::before {
    opacity: 1;
    transform: translateX(2px);
}
.stat-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 12px 12px 0 0;
}
.stat-card.teal::after { background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light)); }
.stat-card.amber::after { background: linear-gradient(90deg, var(--color-highlight), var(--color-highlight-strong)); }
.stat-card.rose::after { background: linear-gradient(90deg, var(--rose), #fb7185); }
.stat-card.purple::after { background: linear-gradient(90deg, var(--purple), #a78bfa); }

.stat-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    align-self: center;
}
.stat-icon.teal { background: var(--color-accent-tint-10); }
.stat-icon.amber { background: var(--color-highlight-tint-10); }
.stat-icon.rose { background: rgba(244,63,94,0.1); }
.stat-icon.purple { background: rgba(139,92,246,0.1); }

.stat-value {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}
.stat-label { font-size: 12.5px; color: var(--text-muted); font-weight: 400; }
.stat-trend {
    margin-top: 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.trend-up { color: var(--green); }
.trend-down { color: var(--rose); }
.trend-neutral { color: var(--text-muted); }

/* ── MAIN GRID ─────────────────────────────────────── */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
}

.card {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--grey-200);
    overflow: hidden;
}
.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--grey-100);
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    flex: 1;
}
.card-meta { font-size: 12px; color: var(--text-muted); }
.card-body { padding: 0; }

/* ── CASE TABLE ────────────────────────────────────── */
.case-table { width: 100%; border-collapse: collapse; }
.case-table th {
    padding: 10px 20px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--grey-100);
    border-bottom: 1px solid var(--grey-200);
}
.case-table td {
    padding: 13px 20px;
    border-bottom: 1px solid var(--grey-100);
    font-size: 13.5px;
    vertical-align: middle;
}
.case-table tr:last-child td { border-bottom: none; }
.case-table tr:hover td { background: var(--grey-100); }
.case-table tr { cursor: pointer; transition: background 0.1s; }

.case-ref { font-weight: 600; color: var(--color-primary); font-size: 13px; }
.case-parties { font-size: 12.5px; color: var(--text-secondary); margin-top: 1px; }

.badge {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}
.badge-teal { background: var(--color-accent-tint-10); color: var(--color-accent-strong); }
.badge-amber { background: var(--color-highlight-tint-10); color: var(--color-highlight-strong); }
.badge-rose { background: rgba(244,63,94,0.1); color: #be123c; }
.badge-green { background: rgba(16,185,129,0.1); color: #065f46; }
.badge-purple { background: rgba(139,92,246,0.1); color: #5b21b6; }
.badge-slate { background: var(--grey-100); color: var(--grey-600); }

.progress-bar-wrap {
    width: 80px;
    height: 5px;
    background: var(--grey-200);
    border-radius: 3px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--color-accent);
}
.progress-bar-fill.amber { background: var(--color-highlight); }
.progress-bar-fill.rose { background: var(--rose); }

/* ── SIDEBAR CARDS ────────────────────────────────── */
.upcoming-item {
    padding: 14px 18px;
    border-bottom: 1px solid var(--grey-100);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.upcoming-item:last-child { border-bottom: none; }
.date-chip {
    width: 42px;
    flex-shrink: 0;
    text-align: center;
    background: var(--grey-100);
    border-radius: 8px;
    padding: 5px 4px;
}
.date-day {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}
.date-mon { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.date-chip.today { background: var(--color-accent); }
.date-chip.today .date-day { color: white; }
.date-chip.today .date-mon { color: rgba(255,255,255,0.7); }

.upcoming-detail { flex: 1; }
.upcoming-name { font-size: 13px; font-weight: 500; color: var(--color-primary); }
.upcoming-type { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.upcoming-time {
    font-size: 11px; color: var(--color-accent);
    font-weight: 600;
    background: var(--color-accent-tint-08);
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}

.alert-item {
    padding: 12px 18px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-bottom: 1px solid var(--grey-100);
}
.alert-item:last-child { border-bottom: none; }
.alert-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.alert-dot.rose { background: var(--rose); }
.alert-dot.amber { background: var(--color-highlight); }
.alert-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.alert-case { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ─────────────────────────────────────────────────────
   FINANCIAL DISCLOSURE VIEW
─────────────────────────────────────────────────────── */
.disclosure-header {
    background: white;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.disc-back {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid var(--grey-200);
    background: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.disc-back:hover { background: var(--grey-100); }
.disc-case-info { flex: 1; }
.disc-case-ref { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.disc-case-title {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
}
.disc-case-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; display: flex; gap: 16px; }
.disc-case-meta span { display: flex; align-items: center; gap: 4px; }

.disc-actions { display: flex; gap: 8px; align-items: center; }

/* COMPLETION TRACKER */
.completion-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.completion-card {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--grey-200);
    padding: 20px;
}
.party-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.party-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: white;
    flex-shrink: 0;
}
.party-avatar.a { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong)); }
.party-avatar.b { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.party-name { font-size: 14px; font-weight: 600; color: var(--color-primary); }
.party-role { font-size: 11.5px; color: var(--text-muted); }

.completion-pct {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 6px;
}
.completion-pct.high { color: var(--green); }
.completion-pct.mid { color: var(--color-highlight); }
.completion-pct.low { color: var(--rose); }
.big-progress {
    height: 7px;
    background: var(--grey-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 14px;
}
.big-progress-fill { height: 100%; border-radius: 4px; }
.big-progress-fill.green { background: linear-gradient(90deg, var(--green), var(--green-light)); }
.big-progress-fill.amber { background: linear-gradient(90deg, var(--color-highlight), var(--color-highlight-light)); }

.section-checks { display: flex; flex-direction: column; gap: 6px; }
.section-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.check-icon { font-size: 13px; flex-shrink: 0; }
.check-icon.done { color: var(--green); }
.check-icon.missing { color: var(--rose); }
.check-icon.partial { color: var(--color-highlight); }

/* DISCLOSURE GRID */
.disclosure-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    margin-bottom: 20px;
}

/* SECTION TABS */
.section-tabs {
    display: flex;
    gap: 2px;
    background: var(--grey-100);
    padding: 3px;
    border-radius: 9px;
    margin-bottom: 16px;
    overflow-x: auto;
}
.tab-btn {
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-muted);
    white-space: nowrap;
    border: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.15s;
    display: flex; align-items: center; gap: 5px;
}
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active {
    background: white;
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(15,31,61,0.1);
}
.tab-indicator {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* COMPARISON TABLE */
.compare-table { width: 100%; }
.compare-table th {
    padding: 11px 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--grey-100);
    text-align: left;
}
.compare-table th.party-a { color: var(--color-accent-strong); background: var(--color-accent-tint-06); }
.compare-table th.party-b { color: #5b21b6; background: rgba(139,92,246,0.06); }
.compare-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--grey-100);
    font-size: 13px;
    vertical-align: top;
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:hover td { background: rgba(248,249,252,0.8); }
.compare-table .row-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.compare-table .value-cell {
    font-weight: 500;
    color: var(--color-primary);
}
.compare-table .value-cell .sub { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.compare-table .flag-cell {
    display: flex; align-items: center; gap: 5px;
    color: var(--rose);
    font-size: 12px;
    font-weight: 500;
}
.compare-table .section-header td {
    background: var(--grey-100);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey-500);
    padding: 8px 16px;
}

/* AI PANEL */
.ai-panel { display: flex; flex-direction: column; gap: 16px; }
.ai-card {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--grey-200);
    overflow: hidden;
}
.ai-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--grey-100);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg, var(--color-accent-tint-12), rgba(139,92,246,0.12));
    border: 1px solid var(--color-accent-tint-20);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ai-title { font-size: 13px; font-weight: 600; color: var(--color-primary); }

.insight-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--grey-100);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.insight-item:last-child { border-bottom: none; }
.insight-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.insight-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; flex: 1; }
.insight-text strong { color: var(--color-primary); font-weight: 600; }

.action-item {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--grey-100);
    cursor: pointer;
    transition: background 0.1s;
}
.action-item:hover { background: var(--grey-100); }
.action-item:last-child { border-bottom: none; }
.action-icon {
    width: 30px; height: 30px;
    border-radius: 7px;
    background: var(--grey-100);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.action-text { font-size: 13px; font-weight: 500; color: var(--text-primary); flex: 1; }
.action-arrow { color: var(--text-muted); font-size: 14px; }

.timeline-item {
    padding: 10px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-bottom: 1px solid var(--grey-100);
    position: relative;
}
.timeline-item:last-child { border-bottom: none; }
.tl-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}
.tl-dot.green { background: var(--green); }
.tl-dot.amber { background: var(--color-highlight); }
.tl-dot.slate { background: var(--grey-300); }
.tl-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.tl-date { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* BOTTOM ACTION BAR */
.action-bar {
    background: white;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.action-bar-text {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
}
.action-bar-text strong { color: var(--color-primary); }

/* ── TRANSITIONS ─────────────────────────────────── */
.view { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── SCROLLBARS ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--grey-300); border-radius: 3px; }

.tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px;
    background: var(--grey-100);
    color: var(--grey-600);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.divider { height: 1px; background: var(--grey-100); margin: 0; }

.empty-tab-note {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}

/* ── FORM SCAFFOLDING ────────────────────────────── */
.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field[hidden] { display: none; }
.field.full { grid-column: 1 / -1; }
.field label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}
.field label .req { color: var(--rose); margin-left: 2px; }
.field input,
.field select,
.field textarea {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: white;
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    padding: 9px 12px;
    transition: border 0.15s, box-shadow 0.15s;
    width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-tint-15);
}
.field .hint { font-size: 11.5px; color: var(--text-muted); }
.field .error { font-size: 12px; color: var(--rose); margin-top: 2px; }

.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}
.form-actions .spacer { flex: 1; }

.form-banner {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
}
.form-banner.error {
    background: rgba(244,63,94,0.08);
    border: 1px solid rgba(244,63,94,0.18);
    color: #be123c;
}
.form-banner.info {
    background: var(--color-accent-tint-08);
    border: 1px solid var(--color-accent-tint-18);
    color: var(--color-accent-strong);
}
.form-banner.success {
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.18);
    color: #065f46;
}

/* ── DANGER ZONE + MODAL ────────────────────────── */
.btn-danger {
    background: var(--rose);
    color: white;
    border: none;
}
.btn-danger:hover { background: #e11d48; }
.btn-danger[disabled],
.btn-danger:disabled {
    background: rgba(244,63,94,0.4);
    cursor: not-allowed;
}

.danger-card {
    background: white;
    border: 1px solid rgba(244,63,94,0.25);
    border-radius: 12px;
    padding: 20px 22px;
}
.danger-card .danger-title {
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--rose);
    margin-bottom: 6px;
}
.danger-card .danger-lede {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 14px;
}

dialog.mh-modal {
    border: none;
    border-radius: 12px;
    padding: 0;
    max-width: 520px;
    width: 92vw;
    max-height: calc(100vh - 48px);
    box-shadow: 0 18px 60px rgba(15,31,61,0.25);
    /* Force viewport-centered position. Some host CSS (body display:flex
       on the staff layout, scoped overrides on the client shell) interferes
       with the browser default centering for <dialog>. inset+margin:auto
       gives reliable centering across both contexts. */
    position: fixed;
    inset: 0;
    margin: auto;
}
dialog.mh-modal::backdrop {
    background: rgba(15,31,61,0.45);
    backdrop-filter: blur(2px);
}
dialog.mh-modal .mh-modal-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--grey-100);
    display: flex; align-items: center; gap: 10px;
}
dialog.mh-modal .mh-modal-title {
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-primary);
    flex: 1;
}
dialog.mh-modal .mh-modal-body {
    padding: 18px 22px;
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.55;
}
dialog.mh-modal .mh-modal-body strong { color: var(--color-primary); }
dialog.mh-modal .mh-modal-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--grey-100);
    display: flex; gap: 10px; align-items: center;
    background: var(--grey-100);
}
dialog.mh-modal .mh-modal-foot .spacer { flex: 1; }
dialog.mh-modal .breakdown {
    background: var(--grey-100);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 12px 0;
    font-size: 12.5px;
    color: var(--text-secondary);
}
dialog.mh-modal .breakdown ul { margin: 6px 0 0 18px; padding: 0; }
dialog.mh-modal .breakdown li { margin: 2px 0; }
/* ─────────────────────────────────────────────────────────────────────────
   TAG-HELPER BRIDGE
   Styling for the design-system-agnostic markup emitted by
   EightyTwenty.Web.TagHelpers (<domain-field>, <person-name-field>,
   <uk-address-field>). Those tag helpers ship ZERO css and emit only stable
   BEM class names — this block is the Mediation Hub design system's
   interpretation of that contract. A different app styles the same classes
   with its own design system; the tag-helper library is never modified.

   Visual treatment mirrors the hand-written .field / .field input / .error
   rules above so tag-helper forms and hand-written forms look identical.
   ───────────────────────────────────────────────────────────────────────── */

/* Leaf field: <domain-field> renders div.domain-field > label + input + span */
.domain-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.domain-field__label,
.person-name-field__label,
.uk-address-field__label,
.date-field__label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}
.domain-field__help,
.date-field__help {
    font-size: 11.5px;
    color: var(--text-muted);
}
.domain-field__input,
.person-name-field__input,
.uk-address-field__input,
.date-field__input {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: white;
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    padding: 9px 12px;
    transition: border 0.15s, box-shadow 0.15s;
    width: 100%;
}
.domain-field__input:focus,
.person-name-field__input:focus,
.uk-address-field__input:focus,
.date-field__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-tint-15);
}
/* Native HTML5 constraint feedback — no JS, no jQuery-validation. Scoped to
   :focus so a field only turns rose once the user has interacted with it. */
.domain-field__input:focus:invalid,
.person-name-field__input:focus:invalid,
.uk-address-field__input:focus:invalid,
.date-field__input:focus:invalid {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(244,63,94,0.15);
}
.domain-field__error,
.person-name-field__error,
.uk-address-field__error,
.date-field__error {
    font-size: 12px;
    color: var(--rose);
    margin-top: 2px;
}

/* Composite fieldsets: <person-name-field> / <uk-address-field> */
.person-name-field,
.uk-address-field {
    border: none;
    padding: 0;
    margin: 0 0 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}

/* Name parts (given / middle / family) sit side-by-side on one line by default,
   each a third of the width. The surrounding party-block is a query container,
   so when there isn't room for three readable inputs the row collapses to a
   single stacked column — never an awkward 2-up-1-below wrap. */
.person-name-field {
    grid-template-columns: repeat(3, 1fr);
}
@container (max-width: 460px) {
    .person-name-field { grid-template-columns: 1fr; }
}
.person-name-field__legend,
.uk-address-field__legend,
.date-field__legend {
    grid-column: 1 / -1;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 2px;
    padding: 0;
}
.person-name-field__row,
.uk-address-field__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Composite rows that should span the full width of the fieldset grid. */
.uk-address-field__row:has(input[name$='.StreetName']),
.uk-address-field__row:has(input[name$='.Postcode']) {
    grid-column: 1 / -1;
}

/* Postcode-lookup mode (<uk-address-field enable-postcode-lookup>). The postcode row comes first and
   spans the full fieldset width; the postcode input and "Find my address" button share one line, with
   our own results <select> and an aria-live status line stacked beneath. mediation-hub.js drives the
   Ideal Postcodes REST API and fills these — there is no third-party widget. */
.uk-address-field__lookup-controls {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.uk-address-field__lookup-controls .uk-address-field__input {
    flex: 1 1 auto;
}
.uk-address-field__lookup-btn {
    flex: 0 0 auto;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: white;
    background: var(--color-accent);
    border: none;
    border-radius: 8px;
    padding: 0 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s;
}
.uk-address-field__lookup-btn:hover { filter: brightness(0.95); }
.uk-address-field__lookup-btn:disabled { opacity: 0.6; cursor: default; }
.uk-address-field__lookup-results {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: white;
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    padding: 9px 12px;
    width: 100%;
}
.uk-address-field__lookup-results:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-tint-15);
}
.uk-address-field__lookup-status {
    font-size: 12px;
    color: var(--text-muted);
    min-height: 1em;
}

/* Three-box date: <date-field> renders fieldset.date-field > legend + help + parts + error.
   Stacked block (not the 2-col grid); day/month boxes are 2 digits wide, year 4. */
.date-field {
    border: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.date-field__parts {
    display: flex;
    gap: 14px;
}
.date-field__part {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.date-field__part--day .date-field__input,
.date-field__part--month .date-field__input {
    width: 3.5em;
}
.date-field__part--year .date-field__input {
    width: 5.5em;
}
/* DD / MM / YYYY format hints — very light so they read as a guide, not a value. */
.date-field__input::placeholder {
    color: var(--grey-300);
    opacity: 1; /* Firefox dims placeholders by default */
}

/* ─────────────────────────────────────────────────────────────────────────
   Financial disclosure — Bank & building-society accounts (Disclosure/Bank.cshtml).
   Each account is a fieldset.account-card; the default UA fieldset border is
   dropped in favour of the same soft card treatment as the referral form.
   ───────────────────────────────────────────────────────────────────────── */
/* Disclosure section pages (Bank, and future section forms): a roomy header above the form. */
.disclosure-section { max-width: 720px; }
.disclosure-section > h1 { margin: 8px 0 14px; }
.disclosure-section > .hint {
    margin: 0 0 32px;
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Actions row shown at the top and bottom of a section form: Back (left), then Add and Save (right). */
.disclosure-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
}
.disclosure-actions:last-child { margin: 24px 0 0; }
.disclosure-actions .spacer { flex: 1; }

/* The standalone document-upload page (reached from the overview's "Upload file"): a roomy, evenly
   spaced vertical rhythm between the heading, hint, any banner, the form and its actions. Reuses
   .disclosure-section (max-width + heading/hint typography), .form-banner and .form-actions; the flex
   `gap` owns the spacing, so the reused elements' own margins are zeroed. */
.disclosure-upload { display: flex; flex-direction: column; gap: 32px; }
.disclosure-upload > h1,
.disclosure-upload > .hint,
.disclosure-upload > .form-banner { margin: 0; }
.disclosure-upload form { display: flex; flex-direction: column; gap: 24px; }
.disclosure-upload .form-actions { margin-top: 0; }

/* Per-file upload status: one .form-banner row per file (progress → success/error). */
.upload-status { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.upload-status:empty { display: none; }
.upload-status__link { margin-left: 8px; font-weight: 600; }

/* Drag-and-drop upload zone. The native <input type=file> is visually hidden inside the label (but
   stays focusable, so the `required` constraint validation still works); the label is both the drop
   target and the click-to-browse control. mediation-hub.js toggles .is-dragover and assigns a dropped
   file; the [data-upload-input] change handler echoes the chosen file's name into .dropzone__name. */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 24px;
    border: 2px dashed var(--grey-200);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover { border-color: var(--color-accent); }
.dropzone.is-dragover { border-color: var(--color-accent); background: var(--color-accent-tint-08); }
.dropzone__input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}
.dropzone__cue--pointer { display: flex; flex-direction: column; gap: 4px; }
.dropzone__cue--touch { display: none; }
.dropzone__title { font-size: 14px; color: var(--text-secondary); }
.dropzone__link { color: var(--color-accent-strong); font-weight: 500; text-decoration: underline; }
.dropzone__hint { font-size: 12px; color: var(--text-muted); }
.dropzone__name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.dropzone__name:empty { display: none; }

/* Touch / coarse-pointer devices (phones, tablets): drag-and-drop is meaningless, so collapse the
   dashed zone to a left-aligned tap-to-browse button matching the rest of the form's controls. */
@media (hover: none), (pointer: coarse) {
    .dropzone {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 9px 14px;
        border: 1px solid var(--grey-200);
        border-radius: 8px;
        text-align: left;
    }
    .dropzone:hover { border-color: var(--grey-200); }
    .dropzone__cue--pointer { display: none; }
    .dropzone__cue--touch { display: inline; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
}

.disclosure-bank { max-width: 720px; }

/* The card, field and evidence treatments are shared by every section detail screen
   (Bank, Property, …) — each page carries .disclosure-section alongside its own class. */
.disclosure-section .account-card {
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    background: white;
    padding: 24px;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* generous breathing room between fields */
}
.disclosure-section .account-card .field { gap: 7px; }
/* The shared .field input treatment (full-width, padded, bordered) is meant for text boxes;
   a checkbox in a field (e.g. the pension "in payment" toggle) keeps its natural size so it
   sits beside its label text instead of stretching across the card. */
.disclosure-section .field input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex: none;
    accent-color: var(--color-accent);
}
.disclosure-bank .account-card [data-remove-account] { align-self: flex-start; }
.disclosure-section .field-error { font-size: 12px; color: var(--rose); }
.disclosure-section .field-error:empty { display: none; }
/* Plain-English explanations under a field (e.g. the ownership-type options). */
.disclosure-section .field-help {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--text-muted);
}
.disclosure-section .field-help strong { font-weight: 600; color: var(--text-secondary); }

.disclosure-section .evidence {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--grey-100);
}
.disclosure-section .evidence__coverage { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.disclosure-section .evidence__pending { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.disclosure-section .evidence__pending li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.disclosure-section .evidence__pending li form { margin: 0; }
/* The "Attach statement" control is a flex item in the column; keep it to its content width. */
.disclosure-section .evidence > label.btn { align-self: flex-start; }
.disclosure-section .evidence__heading,
.disclosure-bank .transactions__heading { font-size: 15px; font-weight: 600; color: var(--color-primary); margin: 0 0 4px; }

/* Market valuation (Disclosure/Vehicle.cshtml): the provider's candidate figures, one selectable
   row each. Structurally it plays the evidence block's role — a bordered group at the foot of the
   form — so it borrows that separation, with the column gap owning all the vertical rhythm (the
   heading's own bottom margin is dropped so the spacing stays even). */
.disclosure-section .valuation {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--grey-100);
}
.disclosure-section .valuation > .evidence__heading { margin: 0; }
.disclosure-section .valuation > .hint {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
}
.disclosure-section .valuation__candidates {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* The whole row is the label, so the amount is part of the hit target, not just the wording. */
.disclosure-section .valuation__candidate label {
    display: flex;
    align-items: center;
    /* Wraps rather than overflows: the longest translations of the channel names (pl, ar) next to a
       six-figure amount do not fit one line on a narrow viewport. */
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 11px 14px;
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    background: white;
    cursor: pointer;
}
.disclosure-section .valuation__candidate label:hover {
    border-color: var(--grey-300);
    background: var(--grey-100);
}
/* Selection reads as an accent-tinted row, using the brand tint tokens so it tracks a tenant
   rebrand rather than pinning a colour here. */
.disclosure-section .valuation__candidate label:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-tint-08);
}
.disclosure-section .valuation__candidate input {
    margin: 0;
    flex: none;
    accent-color: var(--color-accent);
}
.disclosure-section .valuation__candidate-label { font-size: 13.5px; color: var(--text-secondary); min-width: 0; }
/* Amounts hard right and tabular so the three figures line up digit-for-digit. */
.disclosure-section .valuation__candidate-amount {
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
/* Provenance, staleness and the not-valued-yet message sit in the same column: the gap spaces
   them, so their own margins and the empty state's card padding are removed. */
.disclosure-section .valuation .disclosure-card__meta,
.disclosure-section .valuation .field-help { margin: 0; }
.disclosure-section .valuation .disclosure-card__empty { margin: 0; padding: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   Financial disclosure overview — header panel + vertical stack of section
   cards (Disclosure/Overview.cshtml). Each section is a card; the Bank card
   lists its accounts as clickable entries into the per-account detail screen.
   ───────────────────────────────────────────────────────────────────────── */
.disclosure-overview { max-width: 720px; }
.disclosure-overview > h1 { margin: 8px 0 20px; }

/* Overall header panel: headline %, derived status, a progress bar and the upload action. */
.disclosure-summary {
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    background: white;
    padding: 20px 24px;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.disclosure-summary__row { display: flex; align-items: center; gap: 12px; }
.disclosure-summary__row .spacer { flex: 1; }
.disclosure-summary__headline { display: flex; align-items: baseline; gap: 6px; }
.disclosure-summary__percent { font-size: 28px; font-weight: 600; color: var(--color-primary); line-height: 1; }
.disclosure-summary__label { font-size: 13px; color: var(--text-muted); }

/* Card stack. */
.disclosure-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }

.disclosure-card {
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    background: white;
    overflow: hidden;
    /* Anchor targets must land below the sticky client topbar, not underneath it. */
    scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.disclosure-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
}
.disclosure-card__body:not(:empty),
.disclosure-card__footer { border-top: 1px solid var(--grey-100); }
.disclosure-card__title { font-size: 16px; font-weight: 600; color: var(--color-primary); margin: 0; }
.disclosure-card__meta { font-size: 12.5px; color: var(--text-muted); margin: 4px 0 0; }
.disclosure-card__body { padding: 8px; }
.disclosure-card__empty { font-size: 13px; color: var(--text-muted); margin: 0; padding: 12px; }
.disclosure-card__footer { padding: 14px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.disclosure-card__na { margin-inline-start: auto; }
.disclosure-card__na-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}

.disclosure-card__entries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.disclosure-card__entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.disclosure-card__entry:hover { background: var(--grey-100); }
.disclosure-card__entry-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.disclosure-card__entry-title { font-size: 14px; font-weight: 500; color: var(--color-primary); }
.disclosure-card__entry-sub { font-size: 12.5px; color: var(--text-muted); }
.disclosure-card__entry-chevron { font-size: 20px; color: var(--grey-400); line-height: 1; }

/* Muted, status-only cards for sections whose detail screens don't exist yet. */
.disclosure-card--inactive { background: var(--grey-100); border-style: dashed; }
.disclosure-card--inactive .disclosure-card__title { color: var(--text-secondary); }
.disclosure-card--inactive .disclosure-card__empty { padding: 0 20px 16px; }

/* Status pills, shared by the header panel, card headers and account entries. */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.status-badge--sm { padding: 2px 8px; font-size: 11px; }
.status-badge--complete { background: color-mix(in srgb, var(--green) 14%, transparent); color: color-mix(in srgb, var(--green), black 18%); }
.status-badge--in-progress { background: color-mix(in srgb, var(--amber) 16%, transparent); color: color-mix(in srgb, var(--amber), black 28%); }
.status-badge--not-started { background: var(--grey-100); color: var(--grey-600); }
.status-badge--not-applicable { background: var(--grey-100); color: var(--grey-500); }

/* Statements heading row (heading + coverage text side by side). */
.statements__header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.statements__header h1, .statements__header h2 { margin: 0; }

/* One clickable card per imported statement on the account detail screen. */
.statement-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.statement-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--grey-200);
    border-radius: 10px;
    background: var(--white, #fff);
    text-decoration: none;
}
.statement-card:hover { background: var(--grey-100); }
.statement-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.statement-card__head { display: flex; align-items: center; gap: 10px; }
.statement-card__title { font-size: 15px; font-weight: 600; color: var(--color-primary); }
.statement-card__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--text-muted); }
.statement-card__in { color: color-mix(in srgb, var(--green), black 18%); font-variant-numeric: tabular-nums; }
.statement-card__out { color: var(--rose); font-variant-numeric: tabular-nums; }
.statement-card__flag { color: color-mix(in srgb, var(--amber), black 28%); font-weight: 600; }
.statement-card__chevron { font-size: 20px; color: var(--grey-400); line-height: 1; }
.statement-flags { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }

/* Imported statement transactions on the account detail screen. */
.transactions { max-width: 720px; margin: 24px 0 0; display: flex; flex-direction: column; gap: 10px; }
.transactions__empty { font-size: 13px; color: var(--text-muted); margin: 0; }
.transactions__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.transactions__table th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 8px 10px;
    border-bottom: 1px solid var(--grey-200);
}
.transactions__table td { padding: 9px 10px; border-bottom: 1px solid var(--grey-100); color: var(--color-primary); }
.transactions__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.transactions__table .is-debit { color: var(--rose); }
.transactions__table .is-credit { color: color-mix(in srgb, var(--green), black 18%); }

/* Destructive action button (e.g. Remove account). */
.btn-danger { background: transparent; border: 1px solid color-mix(in srgb, var(--rose) 40%, transparent); color: var(--rose); }
.btn-danger:hover { background: color-mix(in srgb, var(--rose) 8%, transparent); border-color: var(--rose); }

/* Three two-digit boxes for a UK sort code (<sort-code-field>), mirroring the date-of-birth field:
   a stacked block (label + parts + error) with narrow, centred boxes separated by dashes. */
.sort-code-field {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sort-code-field__label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 0;
}
.sort-code-field__help { font-size: 11.5px; color: var(--text-muted); }
.sort-code-field__parts {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sort-code-field__input {
    width: 3.2em;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: white;
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    padding: 9px 8px;
    transition: border 0.15s, box-shadow 0.15s;
}
.sort-code-field__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-tint-15);
}
.sort-code-field__input::placeholder { color: var(--grey-300); opacity: 1; }
.sort-code-field__sep { color: var(--text-muted); font-weight: 600; }

/* Day / month / year boxes for a date (<date-boxes-field>), mirroring the sort-code field;
   the year box is a little wider to fit four digits. */
.date-boxes-field {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.date-boxes-field__label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 0;
}
.date-boxes-field__help { font-size: 11.5px; color: var(--text-muted); }
.date-boxes-field__parts {
    display: flex;
    align-items: center;
    gap: 8px;
}
.date-boxes-field__input {
    width: 3.2em;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: white;
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    padding: 9px 8px;
    transition: border 0.15s, box-shadow 0.15s;
}
.date-boxes-field__input--year { width: 4.6em; }
.date-boxes-field__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-tint-15);
}
.date-boxes-field__input::placeholder { color: var(--grey-300); opacity: 1; }
.date-boxes-field__sep { color: var(--text-muted); font-weight: 600; }

/* Custom confirmation dialog (mhConfirm) — our own styled box, not the browser's prompt. */
.mh-dialog {
    border: none;
    border-radius: 14px;
    padding: 0;
    max-width: 420px;
    width: calc(100% - 32px);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    color: var(--text-primary);
    /* The global `* { margin: 0 }` reset defeats the UA centering for a modal <dialog>; restore it. */
    margin: auto;
}
.mh-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.mh-dialog__body { padding: 24px; }
.mh-dialog__title {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 10px;
}
.mh-dialog__message { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 20px; }
.mh-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ─────────────────────────────────────────────────────────────────────────
   Referral forms — telephone list, availability, children, confirmation.
   Mediation-Hub-specific composites built from the tag-helper primitives.
   ───────────────────────────────────────────────────────────────────────── */

.referral-form { padding: 22px; }

.referral-section {
    border: none;
    padding: 0;
    margin: 0 0 26px;
}
.referral-section__title {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--grey-200);
}
.referral-section__optional {
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
}
/* Inline "(optional)" suffix on a field label — lighter than the label text. */
.field-optional {
    color: var(--text-muted);
    font-weight: 400;
}
/* Query container for the name field's three-up / stacked switch. */
.party-block { margin: 0; container-type: inline-size; }

.referral-toggle,
.availability__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.referral-toggle {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.party2-section {
    border: none;
    padding: 0;
    margin: 0;
}
.party2-section[hidden] { display: none; }

/* Wrapper that reveals the children list once a child-involving mediation type is chosen. Reset the
   fieldset so it adds no visual box of its own around the inner .children-list. */
.children-section {
    border: none;
    padding: 0;
    margin: 0;
}
.children-section[hidden] { display: none; }

/* Telephone list — repeatable rows of <select> + tel input + remove */
.telephone-list,
.children-list,
.availability {
    border: none;
    padding: 0;
    margin: 0 0 14px;
}
.telephone-list__legend,
.children-list__legend,
.availability__legend {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
    padding: 0;
    margin-bottom: 4px;
}
.children-list__hint,
.availability__hint {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 0 0 10px;
}
.telephone-list__rows { display: flex; flex-direction: column; gap: 8px; }
.telephone-list__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}
.telephone-list__input {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: white;
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    padding: 9px 12px;
    transition: border 0.15s, box-shadow 0.15s;
    width: 100%;
}
.telephone-list__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-tint-15);
}
.telephone-list__input:focus:invalid {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(244,63,94,0.15);
}
.telephone-list__error,
.children-list__error {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--rose);
}

.telephone-list__add,
.telephone-list__remove,
.children-list__add,
.children-list__remove {
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid var(--grey-200);
    background: var(--grey-100);
    color: var(--text-secondary);
}
.telephone-list__remove,
.children-list__remove {
    padding: 8px 12px;
    font-size: 12.5px;
}
.telephone-list__add,
.children-list__add {
    margin-top: 10px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-accent);
    background: var(--color-accent-tint-08);
    border-color: var(--color-accent-tint-20);
}
.telephone-list__add:hover,
.children-list__add:hover { background: var(--color-accent-tint-12); }

/* Children — repeatable name + age rows */
.children-list__rows { display: flex; flex-direction: column; gap: 12px; }
.children-list__row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 90px auto;
    gap: 10px;
    align-items: end;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--grey-200);
}
.children-list__cell { display: flex; flex-direction: column; gap: 6px; }
.children-list__cell--age { max-width: 90px; }

/* Availability — 10 toggle buttons (Mon–Fri × AM/PM) */
.availability__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, auto);
    /* DOM order is day-major (Mon AM, Mon PM, …); flowing by column keeps the AM row above the PM
       row visually while the tab order steps through each day's AM then PM. */
    grid-auto-flow: column;
    gap: 8px;
}
.availability__checkbox {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.availability__face {
    display: block;
    text-align: center;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    padding: 9px 6px;
    background: white;
    transition: border 0.15s, background 0.15s, color 0.15s;
}
.availability__toggle { display: block; }
.availability__checkbox:checked + .availability__face {
    border-color: var(--color-accent);
    background: var(--color-accent-tint-10);
    color: var(--color-accent-strong);
}
/* :focus (not only :focus-visible) so the slot the wizard focuses on entering step 2 shows a ring,
   even though that focus follows a mouse click on "Next". */
.availability__checkbox:focus + .availability__face {
    box-shadow: 0 0 0 3px var(--color-accent-tint-15);
}

/* Legal Aid Assessment — Party 1's single opt-in: a clickable card pairing a visible checkbox with
   the question, tinting to the accent when checked (same treatment as the availability faces). */
.legal-aid {
    border: none;
    padding: 0;
    margin: 0 0 14px;
}
.legal-aid__legend {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
    padding: 0;
    margin-bottom: 4px;
}
.legal-aid__hint {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 0 0 10px;
}
.legal-aid__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    padding: 12px 14px;
    background: white;
    transition: border 0.15s, background 0.15s;
}
.legal-aid__checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--color-accent);
}
.legal-aid__question {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.15s;
}
.legal-aid__toggle:has(.legal-aid__checkbox:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-tint-10);
}
.legal-aid__toggle:has(.legal-aid__checkbox:checked) .legal-aid__question {
    color: var(--color-accent-strong);
}
.legal-aid__checkbox:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Confirmation echo */
.confirmation__body { padding: 18px 20px; }
.confirmation__lede {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 16px;
}
.confirmation__subhead {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 18px 0 6px;
}
.confirmation__party { margin-bottom: 8px; }
.confirmation__list {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 4px 16px;
    margin: 0;
    font-size: 13.5px;
}
.confirmation__list dt { color: var(--text-muted); }
.confirmation__list dd { margin: 0; color: var(--text-primary); }
.confirmation__list--meta { margin-bottom: 8px; }
.confirmation__children { margin: 4px 0 0; padding-inline-start: 18px; color: var(--text-primary); }

/* Referral acknowledgement (what every referrer sees; the confirmation echo above is dev-only) */
.acknowledgement { margin-bottom: 18px; }
.acknowledgement__body { padding: 18px 20px; }
.acknowledgement__lede {
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0 0 16px;
}
.acknowledgement__subhead {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 18px 0 6px;
}
.acknowledgement__list {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 4px 16px;
    margin: 0;
    font-size: 13.5px;
}
.acknowledgement__list dt { color: var(--text-muted); }
.acknowledgement__list dd { margin: 0; color: var(--text-primary); }
.acknowledgement__list dd strong { font-size: 16px; letter-spacing: 0.02em; }
.acknowledgement__hint { color: var(--text-secondary); font-size: 13px; line-height: 1.5; margin: 6px 0 0; }
.acknowledgement__availability {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 14px 0 0;
}
.acknowledgement__address { white-space: pre-line; }

@media (max-width: 640px) {
    .telephone-list__row { grid-template-columns: 1fr; }
    .children-list__row { grid-template-columns: 1fr 1fr; }
    /* Two columns, back to row flow: each day's AM/PM sit side by side, days stacked down. */
    .availability__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; grid-auto-flow: row; }
    .confirmation__list { grid-template-columns: 1fr; gap: 2px 0; }
    .confirmation__list dt { margin-top: 6px; }
}

/* ---------------------------------------------------------------------------
   Intake form (practice-admin): relationship section + confidentiality padlocks.
   --------------------------------------------------------------------------- */
.relationship {
    border: 1px solid var(--grey-200);
    border-radius: 10px;
    padding: 14px 16px 2px;
    margin: 4px 0 14px;
}
.relationship__legend {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0 6px;
}

/* A padlockable field wraps its leaf field plus a padlock toggle (top-right). */
.padlockable {
    position: relative;
    border-radius: 10px;
    transition: background 0.15s, box-shadow 0.15s;
}
.padlock {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    opacity: 0.4;
    transition: opacity 0.15s;
}
.padlock:hover { opacity: 0.9; }
.padlock[aria-pressed="true"] { opacity: 1; }

/* Confidential: a red wash + left rule so withheld fields read at a glance. */
.padlockable.is-confidential {
    background: color-mix(in srgb, var(--rose), white 88%);
    box-shadow: inset 3px 0 0 0 var(--rose);
    padding: 6px 8px;
    margin: 0 -8px 14px;
}
.padlockable.is-confidential .padlock { opacity: 1; }

/* Confirmation screen: confidential value + padlock badge. */
.confirmation__list dd.confidential { color: var(--rose); }
.confidential-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--rose);
    white-space: nowrap;
}
.confirmation__subhead--minor {
    font-size: 13px;
    margin-top: 8px;
}

/* ── CASE DOCUMENTS — GENERATION PIPELINE (2a) ──────────────────────────────
   One row per generation request: meta column, then three file nodes (source
   audio → transcription → generated document) joined by arrows that turn teal
   as the preceding stage completes. Reuses .card, .badge and the progress-bar
   pattern; adds only the row/node layout, the mhpulse keyframe for in-flight
   stages, and the teal-tinted Ready node. */
@keyframes mhpulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.docgen-back { margin-bottom: 16px; }

.docgen-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 22px;
}
.docgen-heading { flex: 1; }
.docgen-heading h1 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.docgen-intro {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin: 6px 0 0;
    max-width: 640px;
    line-height: 1.55;
}
.docgen-header .btn { white-space: nowrap; }
.docgen-empty { padding: 18px 20px; font-size: 13.5px; color: var(--text-secondary); }

.pipeline-row {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--grey-100);
}
.pipeline-row:last-child { border-bottom: none; }

.pipeline-meta { width: 118px; flex: none; padding-top: 2px; }
.pipeline-meta__date { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pipeline-meta__time { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }

.pipeline-arrow { align-self: center; flex: none; font-size: 18px; color: var(--grey-300); }
.pipeline-arrow.is-complete { color: var(--color-accent); }

.pipeline-node {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--grey-200);
    border-radius: 10px;
    padding: 12px 14px;
}
.pipeline-node--unused {
    border: 1px dashed var(--grey-300);
    background: #fbfcfe;
}
.pipeline-node--ready {
    border-color: #d3ede9;
    background: #f4fbfa;
}
.pipeline-node__eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 8px;
}
.pipeline-node--unused .pipeline-node__eyebrow { color: #a4b0c6; }
.pipeline-node__file {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    min-height: 28px;
}
.pipeline-node__link {
    font-size: 13px;
    color: var(--color-accent-strong);
    font-weight: 500;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pipeline-node__link--strong,
.pipeline-node--ready .pipeline-node__link { font-weight: 600; }
.pipeline-node__placeholder { font-size: 13px; color: #a4b0c6; }
.pipeline-node__placeholder--busy { color: var(--grey-400); font-style: italic; }
.pipeline-node__delete { margin-left: auto; display: inline-flex; }
.pipeline-node__retry { display: inline; }

.icon-btn {
    flex: none;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grey-200);
    border-radius: 7px;
    background: white;
    color: var(--grey-400);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.icon-btn:hover { color: var(--rose); border-color: var(--grey-300); }
.icon-btn--lg { width: 34px; height: 34px; border-radius: 8px; }
.pipeline-row__delete { align-self: center; flex: none; }

/* Full-width 6px variant of the shared progress bar inside a node. */
.pipeline-node .progress-bar-wrap { width: 100%; height: 6px; border-radius: 4px; }
.pipeline-node .progress-bar-fill { height: 100%; border-radius: 4px; }
.pipeline-node--unused .progress-bar-wrap { background: #eef2f8; }
.progress-bar-fill.is-pulsing { animation: mhpulse 1.4s ease-in-out infinite; }

.pipeline-status {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--grey-400);
    font-weight: 500;
}
.pipeline-status--done { color: #065f46; }
.pipeline-status--active { color: var(--color-accent-strong); font-weight: 600; }
.pipeline-status--failed { color: #be123c; font-weight: 600; }
.pipeline-status--ready { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grey-300); flex: none; }
.pipeline-status--done .status-dot { background: var(--green); }
.pipeline-status--active .status-dot { background: var(--color-accent); }
.pipeline-status--failed .status-dot { background: var(--rose); }
.status-dot.is-pulsing { animation: mhpulse 1.4s ease-in-out infinite; }

.link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-accent-strong);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.link-button:hover { text-decoration: underline; }

/* ── CASE DOCUMENTS — GENERATE DRAWER (2b) ──────────────────────────────────
   Right-hand off-canvas panel over a scrim; opened by [data-drawer-open],
   closed by ×/Cancel/scrim/Escape (mediation-hub.js). */
.mh-drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 31, 61, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 60;
}
.mh-drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.mh-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 352px;
    max-width: 100vw;
    background: white;
    box-shadow: -10px 0 34px rgba(15, 31, 61, 0.20);
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    transition: transform 0.25s ease;
    z-index: 61;
}
.mh-drawer.is-open { transform: none; }
.mh-drawer__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--grey-100);
}
.mh-drawer__title {
    flex: 1;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}
.mh-drawer__close {
    width: 32px;
    height: 32px;
    border: 1px solid var(--grey-200);
    border-radius: 7px;
    background: white;
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.mh-drawer__close:hover { background: var(--grey-100); color: var(--text-primary); }
.mh-drawer__body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    overflow-y: auto;
}
.mh-drawer__foot { margin-top: auto; display: flex; gap: 10px; }
.mh-drawer__foot .btn-primary { flex: 1; justify-content: center; }

/* ── HOME CASE LIST ─────────────────────────────────────────────────────────
   The staff case list on the home page: a tall search field with filter chips,
   the seven-column case table with per-party disclosure bars, and the numbered
   pager. All state is server-side (querystring); rows click through to
   /case/{id}. */

/* Screen-reader-only content (the search field's label). */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.case-list__header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--grey-100);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The search row: deliberately the loudest element on the page — long queries
   must stay visible on one line. */
.case-search { display: flex; gap: 12px; align-items: stretch; }
.case-search__field {
    flex: 1;
    height: 72px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    border: 2px solid var(--grey-200);
    border-radius: 10px;
    background: white;
}
.case-search__field:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-tint-10);
}
.case-search__icon { font-size: 18px; color: var(--text-muted); flex: none; }
.case-search__input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 17px;
    font-family: inherit;
    color: var(--text-primary);
    background: transparent;
}
.case-search__input::placeholder { color: var(--text-muted); }
.case-search__kbd {
    flex: none;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border: 1px solid var(--grey-200);
    border-radius: 5px;
    padding: 3px 7px;
    font-family: inherit;
}
.case-search__submit { width: 132px; justify-content: center; }

/* Filter chips: the visible, editable record of the query. */
.case-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 8px 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}
.chip--amber { background: var(--color-highlight-tint-10); color: var(--color-highlight-strong); }
.chip--teal { background: var(--color-accent-tint-10); color: var(--color-accent-strong); }
.chip--purple { background: rgba(139,92,246,0.1); color: var(--purple); }
.chip__remove { color: var(--text-muted); text-decoration: none; font-size: 13px; line-height: 1; }
.chip__remove:hover { color: var(--text-primary); }
.chip--add {
    padding: 4px 12px;
    border: 1px dashed var(--grey-300);
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    list-style: none;
}
.chip--add::-webkit-details-marker { display: none; }
.chip--add:hover { border-color: var(--grey-400); color: var(--text-primary); }
.chip-add { position: relative; }
.chip-add__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    background: white;
    border: 1px solid var(--grey-200);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 31, 61, 0.12);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Stretched by the column flex panel; centre the label like the drawer footer. */
.chip-add__panel .btn { justify-content: center; }
.case-count { margin-left: auto; font-size: 12.5px; color: var(--text-muted); }
.case-count strong { color: var(--text-secondary); font-weight: 600; }

/* Archive-failure flash from the row actions. */
.case-list__flash {
    padding: 10px 20px;
    font-size: 13px;
    color: var(--color-highlight-strong);
    background: var(--color-highlight-tint-10);
    border-bottom: 1px solid var(--grey-100);
}

/* Table: comfortable rows, whole row clickable. */
.case-list__col-caseno { width: 146px; }
.case-list__col-status { width: 138px; }
.case-list__col-mediator { width: 150px; }
.case-list__col-session { width: 118px; }
.case-list__col-actions { width: 148px; }
.case-list__table td { padding-top: 15px; padding-bottom: 15px; }
.case-list__th-sub {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--grey-300);
}
.case-list__th-actions { text-align: right; }
.case-list__sort { color: var(--text-secondary); text-decoration: none; }
.case-list__sort:hover { color: var(--text-primary); }
.case-list__sort:focus-visible,
.chip__remove:focus-visible,
.chip--add:focus-visible,
.case-pager__rows select:focus-visible,
.case-pager__apply:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
/* The search input carries no ring of its own — the 72px field wrapper shows it via :focus-within. */
.case-list__muted { color: var(--text-muted); }

.case-row { cursor: pointer; }
.case-row:hover td { background: var(--grey-50, #fafbfd); }
.case-row__link {
    color: var(--color-accent-strong);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
.case-row__link:hover { text-decoration: underline; }
.case-row__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Per-party disclosure line beneath the name (approved option 2b: no Disclosure
   column — the bar's position under the name is what identifies it). */
.party-cell__name { font-size: 13.5px; color: var(--text-primary); }
.party-cell__missing { font-size: 13.5px; color: var(--text-muted); font-style: italic; }
.party-cell__progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.party-cell__progress .progress-bar-wrap { width: 92px; }
.party-cell__count { font-size: 11px; color: var(--text-muted); }
.party-cell__none { font-size: 11.5px; color: var(--text-muted); font-style: italic; margin-top: 6px; }
.progress-bar-fill.green { background: var(--green); }

/* Generate drawer: the per-party disclosure-progress panels shown in place of
   the upload field when a disclosure-sourced type (a schedule) is selected. */
.disclosure-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.disclosure-panel { border: 1px solid var(--grey-200); border-radius: 8px; padding: 10px 12px; background: var(--grey-50, #fafafa); }
.disclosure-panel__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 2px; }

/* Row actions: muted at rest, full strength on row hover; never trigger the
   row's navigation. */
.case-row__actions { display: flex; gap: 5px; justify-content: flex-end; align-items: center; }
.case-row__action-form { display: inline-flex; }
.icon-btn--accent:hover { color: var(--color-accent-strong); border-color: var(--grey-300); }
.case-row:hover .icon-btn { color: var(--text-secondary); border-color: var(--grey-300); }
.case-row:hover .icon-btn:hover { color: var(--color-accent-strong); }
.case-row:hover .icon-btn:not(.icon-btn--accent):hover { color: var(--rose); }
.icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.icon-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Pager: footer bar of the card. */
.case-pager {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: var(--offwhite);
    border-top: 1px solid var(--grey-200);
}
.case-pager__rows { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.case-pager__rows select {
    border: 1px solid var(--grey-200);
    border-radius: 7px;
    padding: 5px 10px;
    background: white;
    color: var(--text-primary);
    font-size: 12.5px;
    font-family: inherit;
}
.case-pager__apply {
    border: 1px solid var(--grey-200);
    border-radius: 7px;
    padding: 5px 10px;
    background: white;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
}
.case-pager__range { font-size: 12.5px; color: var(--text-muted); }
.case-pager__range strong { color: var(--text-secondary); font-weight: 600; }
.case-pager__pages { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.page-btn {
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grey-200);
    border-radius: 7px;
    background: white;
    color: var(--text-secondary);
    font-size: 12.5px;
    text-decoration: none;
    padding: 0 6px;
}
.page-btn:hover { border-color: var(--grey-300); background: var(--grey-100); }
.page-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.page-btn.is-current { background: var(--color-accent); border-color: var(--color-accent); color: white; font-weight: 600; }
.page-btn.is-current:hover { background: var(--color-accent-strong); }
.page-btn.is-disabled { color: var(--grey-300); pointer-events: none; }
.page-btn.is-ellipsis { border: none; background: transparent; color: var(--text-muted); pointer-events: none; }

/* Empty states: no cases at all, or nothing matching the query. */
/* Tall enough that the "Add filter" popover (two fields + Apply) has room below
   the header; the card clips overflow, so a short empty state truncated it. */
.case-list__empty {
    padding: 48px 20px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.case-list__empty-title { font-size: 15px; font-weight: 600; color: var(--color-primary); margin-bottom: 6px; }
.case-list__empty-hint { font-size: 13px; color: var(--text-secondary); }
.case-list__empty-hint a { color: var(--color-accent-strong); font-weight: 500; }

/* ── CASE DETAIL PAGE ───────────────────────────────────────────────────────
   /case/{id}: summary facts, section links and party cards. */
.case-detail { display: flex; flex-direction: column; gap: 16px; }
.case-facts { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.case-facts > div { display: flex; gap: 12px; }
.case-facts dt {
    flex: 0 0 150px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    padding-top: 1px;
}
.case-facts dd { margin: 0; font-size: 13.5px; color: var(--text-primary); }
.case-subheading {
    margin: 18px 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.case-sections { display: flex; flex-wrap: wrap; gap: 12px; }
.case-section-link {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--grey-100);
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
}
a.case-section-link:hover { border-color: var(--color-accent); }
.case-section-link__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.case-section-link__sub { font-size: 12.5px; color: var(--text-secondary); }
.case-section-link--empty { background: var(--grey-50, #fafbfd); }
.case-section-link--empty .case-section-link__sub { color: var(--text-muted); }
.case-party-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

/* ── HIDDEN DEVELOPER PANEL ─────────────────────────────────────────────────
   Development-only drawer toggled by double-pressing backtick (dev-panel.js).
   Reuses the .mh-drawer visuals but with its own data-dev-panel-* wiring and a
   higher z-index so it can sit over the Generate drawer when both are open. */
.dev-panel { width: 420px; z-index: 71; }
.dev-panel-scrim { z-index: 70; }
.dev-panel__section { display: flex; flex-direction: column; gap: 10px; }
.dev-panel__heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}
.dev-panel__hint { font-size: 12.5px; color: var(--text-secondary); margin: 0; }
.dev-panel__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--grey-100);
    border-radius: 9px;
    padding: 10px 12px;
}
.dev-panel__row--error { border-color: var(--rose, #c2455f); }
.dev-panel__row-main { flex: 1; min-width: 0; }
.dev-panel__row-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dev-panel__row-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.dev-panel__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 6px;
    font-size: 12.5px;
}
.dev-panel__links a { color: var(--color-accent-strong); font-weight: 500; text-decoration: none; }
.dev-panel__links a:hover { text-decoration: underline; }
.dev-panel__provision { margin-top: 8px; }

/* Native select with the custom ▾ caret. */
.select-wrap { position: relative; display: block; }
.select-wrap select { appearance: none; padding-right: 34px; }
.select-wrap::after {
    content: '▾';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

/* The drawer's compact hi-fi dropzone variant. */
.dropzone--drawer {
    border: 1.5px dashed var(--grey-300);
    border-radius: 10px;
    background: #fbfcfe;
    padding: 26px 16px;
}
.dropzone--drawer:hover { border-color: var(--color-accent); }
.dropzone__glyph { font-size: 24px; color: var(--grey-400); line-height: 1; }

/* ── PRACTICE SETTINGS: mediator selection ───────────
   Each directory user is one clickable row (the whole row is the checkbox's
   label). A checked row tints toward the brand accent and shows the
   "Mediator" badge, so the recognised set reads at a glance. */
.mediator-list { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.mediator-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--grey-200);
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.mediator-row:hover { border-color: var(--grey-300); background: #fbfcfe; }
.mediator-row:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-tint-06);
}
.mediator-row:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.mediator-row__check {
    width: 16px; height: 16px;
    accent-color: var(--color-accent);
    flex-shrink: 0;
}
.mediator-row__avatar {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-strong));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}
.mediator-row__identity { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mediator-row__name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.mediator-row__meta {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mediator-row__badge {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--color-accent-tint-10);
    color: var(--color-accent-strong);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    visibility: hidden;
}
.mediator-row:has(input:checked) .mediator-row__badge { visibility: visible; }
.mediator-list__actions {
    display: flex; align-items: center; gap: 12px;
    margin-top: 14px;
    max-width: 640px;
}
.mediator-list__hint { font-size: 12px; color: var(--text-secondary); margin-left: auto; }
.mediator-row--saved { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-tint-20); }
.mediator-row__check:disabled { opacity: 0.6; }
/* display:flex would defeat the hidden attribute the autosave script toggles. */
.mediator-list__actions[hidden] { display: none; }

/* ── PRACTICE SETTINGS: main point of contact ────────
   One dropdown; with JavaScript the Save button hides, each change saves
   itself and the "Saved ✓" chip flashes as confirmation. */
.main-contact__row { display: flex; align-items: center; gap: 8px; max-width: 640px; }
.main-contact__field { flex: 1; min-width: 0; }
.main-contact__saved {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent-strong);
    flex-shrink: 0;
}
.main-contact__saved[hidden] { display: none; }
.main-contact__field:disabled { opacity: 0.6; }
/* .btn's display:inline-flex would defeat the hidden attribute the autosave script sets. */
.main-contact__row .btn[hidden] { display: none; }
.main-contact__alternate {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--grey-200);
}

/* Practice contact details: one plain form, saved as a whole. */
.contact-details { max-width: 640px; }
.contact-details__field { margin-bottom: 14px; }
.contact-details__label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.contact-details__field .domain-field__input { width: 100%; box-sizing: border-box; }
.contact-details__address .uk-address-field { margin: 0; }
.contact-details__hint { color: var(--text-secondary); font-size: 0.85em; margin-top: 6px; line-height: 1.45; }

/* ── Inline evidence viewer ─────────────────────────────────────────────── */

.evidence-viewer__title { overflow-wrap: anywhere; }
.evidence-viewer__frame { width: 100%; height: 80vh; border: 0; border-radius: 8px; background: var(--grey-100); }
.evidence-viewer__image { max-width: 100%; height: auto; border-radius: 8px; }

/* ── Legal Aid assessment form (#220) ─────────────────────────────────────── */
.legal-aid-form .account-card + .account-card { margin-top: 1rem; }
.legal-aid-form legend { font-weight: 600; margin-bottom: .5rem; }
.legal-aid-form .wizard-progress { margin: 1rem 0 1.5rem; }
.legal-aid-money__inputs { display: flex; align-items: center; gap: .5rem; }
.legal-aid-money__currency { color: var(--muted, #6b7280); }
.legal-aid-money__amount { max-width: 10rem; }
.legal-aid-money__frequency { max-width: 12rem; }
.legal-aid__percent { max-width: 8rem; }
.legal-aid__choices { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.legal-aid-list { border: 0; padding: 0; margin: 1.5rem 0; }
.legal-aid-list__rows { display: grid; gap: 1rem; margin-bottom: .75rem; }
.legal-aid-row { position: relative; }
.legal-aid-evidence { margin-top: 2rem; }
.legal-aid-evidence__branch { margin-bottom: 1rem; }
.legal-aid-evidence__example-image { max-width: 18rem; height: auto; display: block; margin-top: .5rem; border: 1px solid var(--border, #e5e7eb); }
.legal-aid-evidence__upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin: 1rem 0; }
.legal-aid-evidence__file { display: flex; align-items: center; gap: .75rem; }
.legal-aid-evidence__file .statement-card { flex: 1; }
.btn-small { padding: .25rem .6rem; font-size: .875rem; }