/* ==========================================================================
   CasePloy theme — the one visual language, taken from the login and signup
   pages and carried across the app shell and the public site.

   Paper ground, DM Sans, medium-weight display type with a grey second line,
   black pill primary actions that turn CasePloy blue on hover, white 10px
   inputs with a blue focus ring, white 16px cards on a hairline, and three
   pastels (lavender, sky, peach) for tinted surfaces. Loaded last on every
   shell so page files only carry layout.
   ========================================================================== */

:root {
    --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --paper: #fafafa;
    --ink: #232323;
    --ink-muted: #68686f;
    --ink-faint: #8a8a93;
    --line: #e5e5e8;
    --line-strong: #dfe5ed;

    --blue: #006dfc;
    --blue-hover: #0058df;
    --blue-text: #0058d9;
    --blue-ring: #e9f1ff;
    --blue-border: #4384ee;

    --lavender: #edeef6;
    --lavender-deep: #e3e4f0;
    --sky: #dce9ff;
    --sky-soft: #edf3fc;
    --peach: #f1d9ca;
    --peach-soft: #faf0ea;
    --violet-soft: #f0edfc;
    --heading-tail: #787b98;

    --card-shadow: 0 8px 20px -16px #454b68;
    --panel-radius: 24px;
    --card-radius: 16px;
    --control-radius: 10px;

    /* Map the older token names onto the same values so every earlier rule
       lands on the same colours. */
    --bg: var(--paper);
    --canvas: var(--paper);
    --surface-1: #ffffff;
    --surface-2: #f4f4f7;
    --surface-3: #ececf1;
    --text: var(--ink);
    --text-muted: var(--ink-muted);
    --text-faint: var(--ink-faint);
    --border: var(--line);
    --border-strong: #d3d6de;
    --border-loud: #b7bcc9;
    --accent: var(--blue);
    --accent-hover: var(--blue-hover);
    --accent-text: var(--blue-text);
    --accent-soft: var(--sky-soft);
    --hover-tint: #f3f4f8;
    --sunken-tint: #f7f7fa;
    --brand-gradient: linear-gradient(var(--ink), var(--ink));
    --brand-gradient-text: linear-gradient(var(--ink), var(--ink));
    --shadow-glow: none;
    --r-sm: 6px;
    --r-md: var(--control-radius);
    --r-lg: 14px;
    --r-xl: var(--card-radius);
}

body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); }
::selection { background: #dbe7ff; color: #123a85; }
/* Keyboard focus shows as an outline on things you click; a text field shows its own
   rounded ring (border and glow) instead, so nothing draws a square box around a pill. */
:where(a, button, summary, [tabindex], [role="button"], input[type="checkbox"], input[type="radio"], input[type="file"]):focus-visible { outline: 2px solid var(--blue-border); outline-offset: 3px; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea, [contenteditable="true"]):focus-visible { outline: none; }
body .topbar-search-input:focus, body .topbar-search-input:focus-visible { outline: none; box-shadow: none; }

/* ---------- Type ---------- */
.design-eyebrow, .eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.display-tail { color: var(--heading-tail); font-style: normal; }

/* ---------- Buttons ---------- */
body .btn {
    height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    gap: 8px;
    box-shadow: none;
    transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease, translate 140ms cubic-bezier(.2,.75,.25,1);
}
body .btn-primary { background: var(--ink); color: #fff; }
body .btn-primary:hover { background: var(--blue-hover); color: #fff; box-shadow: none; }
body .btn-primary:active { background: var(--ink); box-shadow: none; }
body .btn-primary .icon { color: #fff; }
body .btn-outline, body .btn-secondary {
    background: #fff;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    border: 0;
}
body .btn-outline:hover, body .btn-secondary:hover { background: #fff; box-shadow: inset 0 0 0 1px #b7c7e0; color: var(--blue-text); }
body .btn-outline .icon, body .btn-secondary .icon, body .btn-ghost .icon { color: var(--ink-muted); }
body .btn-outline:hover .icon { color: var(--blue-text); }
body .btn-ghost { background: transparent; color: var(--ink-muted); }
body .btn-ghost:hover { background: var(--hover-tint); color: var(--ink); }
body .btn-danger { background: var(--danger); color: #fff; }
body .btn-danger:hover { background: #b8232f; }
body .btn-light { background: var(--ink); color: #fff; }
body .btn-sm { height: 30px; padding: 0 13px; font-size: 12px; }
body .btn-lg { height: 48px; padding: 0 26px; font-size: 14px; }
body .btn-icon { width: 38px; padding: 0; gap: 0; }
body .btn-icon.btn-sm { width: 30px; }
body .btn-block { width: 100%; }
body .btn .icon { width: 15px; height: 15px; }

/* ---------- Inputs ---------- */
body .input, body .select, body .textarea {
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--control-radius);
    background-color: #fff;
    box-shadow: none;
    color: var(--ink);
    font-size: 13.5px;
    transition: border-color 140ms ease, box-shadow 160ms ease, background-color 140ms ease;
}
body .textarea { height: auto; min-height: 100px; padding: 11px 14px; line-height: 1.6; }
body .input-lg { height: 46px; font-size: 15px; }
body .input::placeholder, body .textarea::placeholder { color: #8d94a3; opacity: 1; }
body .input:hover, body .select:hover, body .textarea:hover { border-color: #b7c7e0; background-color: #fff; box-shadow: none; }
body .input:focus, body .select:focus, body .textarea:focus { border-color: var(--blue-border); background-color: #fff; box-shadow: 0 0 0 3px var(--blue-ring); outline: none; }
body .input.is-error, body .select.is-error, body .textarea.is-error { border-color: #b34545; background-color: #fff; box-shadow: none; }
body .select, body .select:hover, body .select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237e8da5' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 36px;
}
body .input-group .input { padding-left: 42px; }
body .input-group .input-icon { color: #8d94a3; }
body .input-group:focus-within .input-icon { color: var(--blue-text); }
body .label { font-size: 12.5px; font-weight: 500; color: #4d596c; }
body .password-toggle { color: var(--blue-text); border-radius: 100px; }
body .password-toggle:hover { background: var(--blue-ring); }

/* ---------- Cards, tables, badges ---------- */
body .card, body .app-content .card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    box-shadow: none;
}
body .card-header { background: transparent; border-bottom: 1px solid var(--line); padding: 18px 22px; }
body .card-title { font-size: 15px; font-weight: 500; letter-spacing: -.3px; }
body .card-link { font-size: 12.5px; font-weight: 500; color: var(--blue-text); }
body .table th { background: transparent; font-size: 12px; font-weight: 500; color: var(--ink-muted); padding-block: 12px; box-shadow: inset 0 -1px var(--line); }
body .table td { font-size: 13.5px; padding-block: 15px; box-shadow: inset 0 -1px var(--line); }
body .table tbody tr:hover { background: var(--hover-tint); }
body .badge { border-radius: 100px; font-size: 11px; font-weight: 500; padding: 0 9px; height: 22px; }
body .badge-outline { background: var(--surface-2); color: var(--ink-muted); box-shadow: none; }
body .badge-blue { background: var(--sky); color: #1f4f9c; }
body .badge-amber { background: var(--peach); color: #7a4a2a; }
body .badge-green { background: #e6efe9; color: #2d5a43; }
body .badge-red { background: #fbe6e6; color: #9b2c2c; }
body .badge-neutral { background: var(--surface-2); color: var(--ink-muted); }
body .case-stage-pill, body .app-content .case-stage-pill { border-radius: 10px; background-color: var(--sky); color: #1f4f9c; border-color: transparent; }
body .chip { border-radius: 100px; }
body .avatar { border-radius: 50%; box-shadow: none; }
body .avatar-accent { background: var(--lavender-deep); color: #4a4d70; }
body .alert { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
body .alert-success, body .alert-info { background: var(--sky-soft); box-shadow: inset 0 0 0 1px #d7e4fb; }
body .alert-success .alert-icon, body .alert-info .alert-icon { color: var(--blue-text); }
body .alert-warning { background: var(--peach-soft); box-shadow: inset 0 0 0 1px #efd8c6; }
body .alert-danger { background: #fdf1f1; box-shadow: inset 0 0 0 1px #f2d3d3; }
body .menu, body .app-menu { border-radius: 14px; background: #fff; box-shadow: 0 1px 2px #1d233a0a, 0 14px 34px -18px #1d233a55, inset 0 0 0 1px var(--line); padding: 6px; }
body .menu-item, body .app-menu .menu-item { border-radius: 9px; font-size: 13px; }
body .menu-item:hover, body .app-menu .menu-item:hover { background: var(--hover-tint); }
body .modal { border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 24px 80px #17264725; }
body .modal-backdrop { background: rgba(246, 247, 251, 0.6); }
body .tabs { border-bottom-color: var(--line); }
body .tab { font-weight: 500; color: var(--ink-muted); }
body .tab.is-active, body .tab[aria-selected="true"] { color: var(--ink); }
body .tab.is-active::after { background: var(--blue); }
/* Empty states: tall and calm, never a squeezed strip. The .app-shell hop in the
   selectors keeps these ahead of any later sheet that tries to compact them. */
body .empty, body.workspace-app .app-shell .empty { padding: 52px 32px; }
body .card.empty, body .card > .empty, body.workspace-app .app-shell .card.empty, body.workspace-app .app-shell .card > .empty { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
body .empty .empty-icon, body.workspace-app .app-shell .empty .empty-icon { width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 14px; background: var(--lavender); color: #5a5e86; }
body .empty .empty-icon .icon, body.workspace-app .app-shell .empty .empty-icon .icon { width: 20px; height: 20px; }
body .empty .empty-title, body.workspace-app .app-shell .empty .empty-title { font-size: 19px; font-weight: 500; letter-spacing: -.4px; line-height: 1.3; }
body .empty .empty-body, body.workspace-app .app-shell .empty .empty-body { max-width: 46ch; margin: 8px auto 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-muted); }
body .empty > .btn, body .empty > .empty-action, body .empty > .card-link, body .empty > form,
body.workspace-app .app-shell .empty > .btn, body.workspace-app .app-shell .empty > .empty-action, body.workspace-app .app-shell .empty > .card-link { margin-top: 24px; }
body.workspace-app .today-onboarding { min-height: 260px; padding: 44px 40px; justify-content: center; }
@media (max-width: 600px) {
    body .empty, body.workspace-app .app-shell .empty { padding: 40px 22px; }
    body .card.empty, body .card > .empty, body.workspace-app .app-shell .card.empty, body.workspace-app .app-shell .card > .empty { min-height: 270px; }
    body .empty .empty-title, body.workspace-app .app-shell .empty .empty-title { font-size: 18px; }
    body.workspace-app .today-onboarding { padding: 36px 24px; }
}
body .dropzone { border-radius: 14px; border-color: #cfd8e6; background: #fff; }
body .dropzone:hover { background: var(--sky-soft); }
body .seg-opt input:checked + span { color: var(--blue-text); border-bottom-color: var(--blue); }
body .pagination .page.is-active { background: var(--ink); color: #fff; border-radius: 100px; }
body .pagination .page { border-radius: 100px; }
body .progress .bar, body .stat-meter span { background: var(--blue); }
body .choice input[type="checkbox"]:checked, body input.checkbox[type="checkbox"]:checked { border-color: var(--blue); background-color: var(--blue); }
body .choice:hover input[type="checkbox"]:not(:disabled) { border-color: var(--blue); box-shadow: 0 0 0 3px #006dfc10; }
body .switch input:checked + .track { background: var(--blue); }
body .step.is-current .step-num { background: var(--ink); }
body .step.is-done .step-num { background: var(--sky); color: #1f4f9c; }
body .skip-link, body .redesign-skip { border-radius: 100px; background: #fff; color: var(--ink); border: 1px solid var(--line-strong); }

/* ==========================================================================
   The app shell
   ========================================================================== */

body.workspace-app .app-shell { background: var(--paper); }
body.workspace-app .app-content { background: var(--paper); }

/* Sidebar: the login page's lavender panel, inset from the edge, with the
   current section as a white card on it. */
body.workspace-app .app-sidebar {
    position: sticky;
    top: 12px;
    align-self: flex-start;
    width: 244px;
    height: calc(100vh - 24px);
    margin: 12px 0 12px 12px;
    padding: 24px 14px 14px;
    border: 0;
    border-radius: 20px;
    background: var(--lavender);
    color: var(--ink);
    box-shadow: none;
    overflow: visible;
}
body.workspace-app .app-sidebar .app-sidebar-logo { padding: 0 10px; margin-bottom: 22px; }
body.workspace-app .app-sidebar-logo img { height: 25px; filter: none; }
body.workspace-app .app-sidebar .ws-switch {
    height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    box-shadow: var(--card-shadow);
}
body.workspace-app .app-sidebar .ws-switch-name { font-weight: 600; }
body.workspace-app .app-sidebar .ws-switch:hover,
body.workspace-app .app-sidebar .ws-switch[aria-expanded="true"] { background: #fff; box-shadow: 0 8px 20px -14px #454b68; }
body.workspace-app .app-sidebar .ws-switch > .icon, body.workspace-app .app-sidebar .user-switch > .icon { color: #7d7d8a; }
body.workspace-app .app-sidebar .app-nav { margin-top: 24px; }
body.workspace-app .app-sidebar .app-nav-group + .app-nav-group { margin-top: 18px; }
body.workspace-app .app-nav-label {
    padding-left: 12px;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #7c7f97;
}
body.workspace-app .app-nav-list { gap: 2px; }
body.workspace-app .app-sidebar .app-nav-link {
    height: 38px;
    padding: 0 12px;
    gap: 11px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 400;
    color: #4e5064;
    box-shadow: none;
}
body.workspace-app .app-nav-link .icon { width: 16px; height: 16px; color: #7b7e96; stroke-width: 1.5; }
body.workspace-app .app-sidebar .app-nav-link:hover { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
body.workspace-app .app-sidebar .app-nav-link:hover .icon { color: var(--blue-text); }
body.workspace-app .app-sidebar .app-nav-link.is-active {
    background: #fff;
    color: var(--ink);
    font-weight: 500;
    box-shadow: var(--card-shadow);
}
body.workspace-app .app-sidebar .app-nav-link.is-active .icon { color: var(--blue); }
body.workspace-app .app-sidebar-bottom { margin-top: auto; padding-top: 12px; box-shadow: none; }
body.workspace-app .firm-nav { margin-bottom: 10px; }
body.workspace-app .firm-nav > .icon:last-child { width: 12px; margin-left: auto; color: #8f92a8; }
body.workspace-app .user-switch { border-top: 1px solid rgba(35, 35, 35, 0.08); border-radius: 0; padding: 12px 10px 0; }
body.workspace-app .user-switch:hover, body.workspace-app .user-switch[aria-expanded="true"] { background: transparent; }
body.workspace-app .user-switch-name { font-size: 12.5px; font-weight: 500; color: var(--ink); }
body.workspace-app .user-switch-email { display: none; }
body.workspace-app .app-sidebar .avatar-accent { background: #fff; color: #4a4d70; box-shadow: var(--card-shadow); }
body.workspace-app .app-sidebar .menu { color: var(--ink); }
body.workspace-app .drawer-close { color: #55555d; }

/* Top bar: workspace name or crumbs, a pill search, the page's actions */
body.workspace-app .app-main { padding: 0 36px 56px; }
body.workspace-app .app-topbar-row { min-height: 74px; padding: 18px 0; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
body.workspace-app .shell-workspace-name { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); }
body.workspace-app .app-crumbs { font-size: 12.5px; color: var(--ink-muted); }
body.workspace-app .app-crumbs a:hover { color: var(--blue-text); }
body.workspace-app .app-crumbs .is-current { color: var(--ink); font-weight: 500; }
body.workspace-app .topbar-search {
    height: 40px;
    border-radius: 100px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--line-strong);
}
body.workspace-app .topbar-search:focus-within { background: #fff; box-shadow: inset 0 0 0 1px var(--blue-border), 0 0 0 3px var(--blue-ring); }
body.workspace-app .topbar-search-input { font-size: 12.5px; padding-left: 38px; }
body.workspace-app .topbar-search-icon { left: 14px; color: #8d94a3; }
body.workspace-app .topbar-kbd { font-family: inherit; background: var(--surface-2); color: #7c8290; border: 0; border-radius: 100px; font-size: 10px; padding: 2px 8px; right: 10px; }

/* Page header: the display type from the sign-in pages */
body.workspace-app .app-header { padding: 0; margin: 0 0 26px; border: 0; align-items: center; }
body.workspace-app .app-header .h2, body.workspace-app .app-header h1 {
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -1.3px;
    line-height: 1.15;
    color: var(--ink);
}
body.workspace-app .app-header-meta { margin-top: 7px; font-size: 13px; color: var(--ink-muted); }
body.workspace-app .app-header .design-eyebrow { margin-bottom: 10px; }

/* Section navigation under the top bar (Firm › Team · Billing …) */
body.workspace-app .area-nav { margin: -6px 0 24px; gap: 6px; }
body.workspace-app .area-nav a { min-height: 34px; padding: 6px 12px; border-radius: 100px; font-size: 12.5px; color: var(--ink-muted); }
body.workspace-app .area-nav a:first-child { color: var(--ink); font-weight: 500; }
body.workspace-app .area-nav a:hover { background: var(--hover-tint); color: var(--ink); }
body.workspace-app .area-nav a[aria-current] { background: #fff; color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Library hubs */
body.workspace-app .hub-tool { border-radius: var(--card-radius); border-color: var(--line); background: #fff; }
body.workspace-app .hub-tool:hover { border-color: #b7c7e0; box-shadow: var(--card-shadow); }
body.workspace-app .hub-tool-icon { border-radius: 12px; background: var(--lavender); color: #4a4d70; }
body.workspace-app .hub-tool h2 { font-weight: 500; }

/* Older dashboard-style stats (billing, trust): tinted tiles, no chrome */
body.workspace-app .dash-stats-card .dash-stats { border: 0; background: transparent; gap: 14px; overflow: visible; }
body.workspace-app .dash-stats .stat:nth-child(n), body.workspace-app .dash-stats .stat + .stat { border: 0; border-radius: 15px; background: var(--sky-soft); padding: 20px 22px; }
body.workspace-app .dash-stats .stat:nth-child(2) { background: var(--violet-soft); }
body.workspace-app .dash-stats .stat:nth-child(3) { background: var(--peach-soft); }
body.workspace-app .dash-stats .stat:nth-child(4) { background: var(--lavender); }
body.workspace-app .dash-stats .stat-label { font-size: 12px; color: #566780; }
body.workspace-app .dash-stats .stat-value { font-size: 32px; font-weight: 500; letter-spacing: -1.4px; color: var(--ink); }
body.workspace-app .dash-stats .stat-meter { background: rgba(255, 255, 255, 0.8); }

/* Firm pages (Team, Billing, Trust, Audit log, Settings) keep the workspace's
   skeleton: the header, a tab row when the page has views, tinted tiles flush
   with the content, then sections of white cards with one table style. */
body.workspace-app .dash-stats { gap: 14px; padding: 0; margin: 0 0 28px; border: 0; box-shadow: none; }
body.workspace-app .dash-stats-card .dash-stats { margin: 0; }
body.workspace-app .dash-stats .stat:nth-child(n), body.workspace-app .dash-stats .stat + .stat { min-height: 112px; border-radius: 16px; }
body.workspace-app .dash-stats .stat-sub { margin-top: 6px; font-size: 12px; color: #566780; }
body.workspace-app .period-tabs, body.workspace-app .tabs.settings-tabs { display: flex; flex-wrap: wrap; gap: 28px; margin: 0 0 28px; padding: 0; border-bottom: 1px solid var(--line); background: transparent; }
body.workspace-app .period-tabs a, body.workspace-app .settings-tabs .tab { position: relative; flex: 0 0 auto; width: auto; height: auto; min-height: 0; padding: 0 0 13px; border: 0; border-radius: 0; background: transparent; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-muted); white-space: nowrap; }
body.workspace-app .period-tabs a:hover, body.workspace-app .settings-tabs .tab:hover { color: var(--ink); background: transparent; }
body.workspace-app .period-tabs a[aria-current], body.workspace-app .settings-tabs .tab.is-active, body.workspace-app .settings-tabs .tab[aria-selected="true"] { color: var(--ink); font-weight: 500; }
body.workspace-app .period-tabs a[aria-current]::after, body.workspace-app .settings-tabs .tab.is-active::after, body.workspace-app .settings-tabs .tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--blue); }
body.workspace-app .period-tabs a:focus-visible, body.workspace-app .settings-tabs .tab:focus-visible { outline: 2px solid var(--blue-border); outline-offset: 4px; border-radius: 2px; }
body.workspace-app .table thead th { background: #f7f7fa; font-size: 12px; font-weight: 500; color: var(--ink-muted); padding-block: 12px; }
body.workspace-app .billing-table th, body.workspace-app .billing-table td { padding: 14px 16px; }
body.workspace-app .billing-table th + th, body.workspace-app .billing-table td + td { border-left: 0; }
body.workspace-app .app-section { margin-top: 36px; }
body.workspace-app .app-section-title, body.workspace-app .dash-section-title, body.workspace-app .intake-sub, body.workspace-app .settings .intake-sub { font-size: 16px; font-weight: 500; letter-spacing: -.2px; color: var(--ink); }
body.workspace-app .app-section-title, body.workspace-app .intake-group > .intake-sub { margin-bottom: 12px; }
body.workspace-app .dash-section-head, body.workspace-app .settings-head { margin-bottom: 12px; }
body.workspace-app .app-main:has(.settings) { max-width: 1420px; }
body.workspace-app .settings { max-width: 1000px; }
body.workspace-app .team-hint, body.workspace-app .settings-note { font-size: 12.5px; color: var(--ink-muted); }

/* Settings and edit forms */
body.workspace-app .settings .intake-frame, body.workspace-app .intake-frame { border-radius: var(--card-radius); border: 1px solid var(--line); background: #fff; }
body.workspace-app .settings .input { border: 1px solid var(--line-strong); box-shadow: none; background: #fff; }
body.workspace-app .settings .input:focus { border-color: var(--blue-border); box-shadow: 0 0 0 3px var(--blue-ring); }
body.workspace-app .intake-sub { font-weight: 500; color: var(--ink); }
body.workspace-app .overview-card, body.workspace-app .case-rail .rail-section, body.workspace-app .review-group { border-radius: var(--card-radius); border-color: var(--line); }
body.workspace-app .overview-action { border-radius: 12px; }
body.workspace-app .overview-row-icon { background: var(--lavender); color: #4a4d70; border-radius: 8px; }
body.workspace-app .mobile-case, body.workspace-app .task-table .task-row, body.workspace-app .sol-table tr, body.workspace-app .billing-table tr { border-radius: var(--card-radius); }
body.workspace-app .focused-task-banner { border-radius: 14px; background: var(--sky-soft); border-color: #d7e4fb; }
body.workspace-app .case-tabs-row .tab.is-active { color: var(--ink); border-bottom-color: var(--blue); }
body.workspace-app .case-tabs-row .tab:hover { color: var(--ink); }
body.workspace-app .case-section-picker .select { border-radius: var(--control-radius); }
body.workspace-app .list-toolbar .input { height: 42px; }
body.workspace-app .list-sort .select { min-height: 42px; }
body.workspace-app .list-search-icon { left: 14px; }
body.workspace-app .list-search .input { padding-left: 38px; }
body.workspace-app .cal-toolbar .btn-sm { border-radius: 100px; }
body.workspace-app .cal-pill { border-radius: 8px; }
body.workspace-app .deadline-exceptions { border-radius: var(--card-radius); }
body.workspace-app .deadline-exception-icon { border-radius: 10px; background: var(--peach-soft); color: #8a5a2e; }
body.workspace-app .hipaa-drop { border-radius: 14px; }
body.workspace-app .note-modal, body.workspace-app .confirm-modal { border-radius: 20px; }

@media (max-width: 1100px) {
    body.workspace-app .app-main { padding-inline: 26px; }
    body.workspace-app .app-header .h2, body.workspace-app .app-header h1 { font-size: 28px; letter-spacing: -1px; }
}
@media (max-width: 900px) {
    body.workspace-app .app-sidebar {
        position: fixed;
        top: 0;
        width: 268px;
        height: auto;
        margin: 0;
        border-radius: 0 20px 20px 0;
        padding-top: 14px;
        overflow-y: auto;
    }
    body.workspace-app .app-main { padding: 0 20px 44px; }
    body.workspace-app .app-topbar-row { min-height: 64px; padding-block: 14px; margin-bottom: 22px; }
    body.workspace-app .topbar-search { height: 38px; }
    body.workspace-app .topbar-menu { border-radius: 100px; }
}
@media (max-width: 560px) {
    body.workspace-app .app-main { padding-inline: 16px; }
    body.workspace-app .app-header .h2, body.workspace-app .app-header h1 { font-size: 26px; letter-spacing: -.9px; }
    body.workspace-app .app-header-meta { font-size: 12.5px; }
    body.workspace-app .btn { padding-inline: 14px; font-size: 12.5px; }
    body.workspace-app .btn-icon { padding: 0; }
}
@media (max-width: 560px) {
    body.workspace-app .dash-stats.billing-stats > .stat:nth-child(n) { padding: 16px 18px; border: 0; }
    body.workspace-app .dash-stats.billing-stats { gap: 10px; }
}
@media (pointer: coarse) {
    body.workspace-app .btn { min-height: 44px; }
    body.workspace-app .input, body.workspace-app .select, body.workspace-app .textarea { font-size: 16px; }
}

/* ==========================================================================
   Account pages (login, signup, onboarding, invites, the client's intake)
   ========================================================================== */

body.account-page { background: var(--paper); }
body.account-page .auth-topbar { background: transparent; border: 0; padding: 30px 48px; }
body.account-page .auth-logo { height: 27px; }
body.account-page .auth-switch { font-size: 12.5px; color: var(--ink-muted); }
body.account-page .auth-switch a, body.account-page .auth-row a, body.account-page .auth-note a, body.account-page .auth-alt a, body.account-page .auth-link-btn { color: var(--blue-text); font-weight: 500; }
body.account-page .auth-main { gap: 90px; padding-top: 45px; max-width: 1320px; grid-template-columns: minmax(320px, 500px) minmax(0, 440px); }
body.account-page .auth-col { background: transparent; border: 0; box-shadow: none; padding: 20px 0; }
body.account-page .auth-title { font-size: 34px; font-weight: 500; letter-spacing: -1.2px; line-height: 1.15; }
body.account-page .auth-head > .text-muted { font-size: 14px; color: var(--ink-muted); }
body.account-page .auth-form { gap: 18px; }
body.account-page .auth-form .input, body.account-page .auth-form .select { border: 1px solid var(--line-strong); border-radius: var(--control-radius); background-color: #fff; box-shadow: none; }
body.account-page .auth-form .input:hover, body.account-page .auth-form .select:hover { border-color: #b7c7e0; }
body.account-page .auth-form .input:focus, body.account-page .auth-form .select:focus { border-color: var(--blue-border); box-shadow: 0 0 0 3px var(--blue-ring); }
body.account-page .auth-note { font-size: 11.5px; color: var(--ink-muted); }
body.account-page .auth-row { font-size: 12px; }
body.account-page .btn-primary { background: var(--ink); }
body.account-page .btn-primary:hover { background: var(--blue-hover); }
body.account-page .public-information { border-top: 1px solid var(--line); }
body.account-page .public-information a { color: var(--ink-muted); }
body.account-page .auth-main-wide .auth-col { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 32px; }

/* The story panel beside the form */
.auth-story {
    position: relative;
    color: #25252c;
    background: var(--lavender);
    border: 0;
    border-radius: var(--panel-radius);
    padding: 50px 42px;
}
.auth-story-art { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; margin-bottom: 30px; }
.auth-story .design-eyebrow { color: #70728b; }
.auth-story h2 { font-family: var(--font-sans); font-size: 51px; font-weight: 500; line-height: 1.08; letter-spacing: -2.3px; margin: 28px 0; }
.auth-story h2 em { font-style: normal; color: var(--heading-tail); }
.auth-story > p:not(.design-eyebrow) { color: #727485; font-size: 14px; line-height: 1.8; max-width: 320px; margin: 0 0 32px; }
.auth-story-line {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 18px;
    margin: 12px -8px;
    background: #fff;
    box-shadow: var(--card-shadow);
    border-radius: 12px;
    font-size: 13px;
}
.auth-story-line:nth-of-type(1) { transform: rotate(-3deg); }
.auth-story-line:nth-of-type(2) { background: var(--sky); transform: rotate(2deg); }
.auth-story-line:nth-of-type(3) { background: var(--peach); transform: rotate(-1deg); }
.auth-story-line > span { font-size: 10px; color: #7a8293; }
.auth-story-line strong { font-weight: 500; }
.auth-story-foot { display: block; margin-top: 55px; font-size: 9px; letter-spacing: 1.5px; color: #777c8b; }

@media (max-width: 1100px) {
    body.account-page .auth-main { gap: 45px; padding-inline: 35px; }
    .auth-story { padding: 38px 30px; }
    .auth-story h2 { font-size: 42px; }
}
@media (max-width: 900px) {
    body.account-page .auth-main { grid-template-columns: 1fr; max-width: 500px; gap: 0; padding: 36px 24px 50px; }
    body.account-page .auth-col { padding: 10px 0; }
    .auth-story { display: none; }
}
@media (max-width: 560px) {
    body.account-page .auth-topbar { padding: 24px 20px; }
    body.account-page .auth-main { padding-inline: 20px; }
    body.account-page .auth-title { font-size: 30px; }
    body.account-page .auth-main-wide .auth-col { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    body .btn, body .input, body .select, body .textarea { transition: none; }
}

/* Scrollbars: thin and barely there, no arrows. Chrome and Safari take the exact 6px bar below;
   Firefox takes its thin bar with the same faint thumb. Base.css's thin-width rule would make
   Chrome ignore the custom bar, so it is set back to auto first. */
@supports selector(::-webkit-scrollbar) {
    /* Any sheet that sets a native thin bar on a panel (dashboard card bodies, the sidebar, calendar
       days, menus) would make Chrome drop the custom bar there, so the reset is universal and firm. */
    html, body, * { scrollbar-width: auto !important; scrollbar-color: auto !important; }
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
    ::-webkit-scrollbar-thumb { background-color: rgba(35, 35, 35, .11); border-radius: 100px; border: 0; min-height: 36px; }
    :hover::-webkit-scrollbar-thumb { background-color: rgba(35, 35, 35, .22); }
    ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: rgba(35, 35, 35, .34); }
    ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
    ::-webkit-scrollbar-corner { background: transparent; }
    /* The page's own bar is the one you reach for: a 9px gutter with a floating 5px thumb, clearly
       there. Panels inside cards keep the 4px hairline above. Chrome styles the viewport from the
       body when html has no overflow of its own, so both are named. */
    :root::-webkit-scrollbar, body::-webkit-scrollbar { width: 9px; height: 9px; }
    :root::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent; margin: 0; }
    :root::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background-color: rgba(35, 35, 35, .2); border: 2px solid transparent; background-clip: padding-box; border-radius: 100px; min-height: 48px; }
    :root:hover::-webkit-scrollbar-thumb, body:hover::-webkit-scrollbar-thumb { background-color: rgba(35, 35, 35, .28); }
    :root::-webkit-scrollbar-thumb:hover, :root::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:active { background-color: rgba(35, 35, 35, .42); }
}
@supports not selector(::-webkit-scrollbar) {
    html, body, * { scrollbar-width: thin; scrollbar-color: rgba(35, 35, 35, .14) transparent; }
    html { scrollbar-width: auto; scrollbar-color: rgba(35, 35, 35, .24) transparent; }
}
/* A panel that scrolls fades at its foot while more waits below; the fade rides the bottom edge
   and comes to rest after the last item, so nothing is hidden once you reach the end. */
body .today-page .today-queue-scroll::after, body .today-page .today-card-body::after, body .layout-paper::after {
    content: ""; display: block; position: sticky; bottom: 0; z-index: 1; height: 28px; margin: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 78%); pointer-events: none;
}
/* The fade is the panel's bottom padding, so nothing peeks out beneath it. */
body .today-page .today-queue-scroll, body .today-page .today-card-body { padding-bottom: 0; background: #fff; }
/* An opaque ground on every scrolling panel: Chrome drops subpixel text antialiasing inside a
   transparent scrolling layer, which made one card's text print lighter than its neighbour's. */

/* Playbooks: applying one to a case reads top to bottom, choose, review, confirm; the
   chooser is one row, and no column waits empty for a preview that is not there yet. */
body.workspace-app .case-playbooks-page { max-width: none; }
body.workspace-app .pb-columns { display: block; }
body.workspace-app .pb-apply { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px 16px; align-items: end; }
body.workspace-app .pb-apply .field { margin: 0; }
body.workspace-app .pb-apply-row { display: contents; }
body.workspace-app .pb-apply .field-hint { grid-column: 1 / 3; align-self: center; margin: 8px 0 0; }
body.workspace-app .pb-apply .btn-primary { grid-column: 3; justify-self: end; margin-top: 8px; }
body.workspace-app .pb-card { padding: 0 24px 22px; margin-bottom: 20px; }
body.workspace-app .pb-card-head { padding: 20px 0 14px; }
body.workspace-app .pb-card-head .card-title, body.workspace-app .pb-section-title, body.workspace-app .pb-book-title .card-title { font-size: 16px; font-weight: 500; letter-spacing: -.2px; color: var(--ink); }
body.workspace-app .pb-explainer { border-radius: var(--card-radius); border: 1px solid var(--line); }
body.workspace-app .pb-day { border-radius: 100px; background: var(--lavender); color: #4a4d70; }
@media (max-width: 900px) {
    body.workspace-app .pb-apply { grid-template-columns: minmax(0, 1fr); }
    body.workspace-app .pb-apply .field-hint, body.workspace-app .pb-apply .btn-primary { grid-column: 1; justify-self: stretch; }
}

/* Time tab: one line per entry; the person never wraps, the rate has its own column. */
body.workspace-app .time-table td { vertical-align: middle; }
body.workspace-app .time-table td:nth-child(2) { white-space: nowrap; }

/* An intake request that was signed: the drawing beside the facts */
body.workspace-app .intake-signed-frame { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px 28px; align-items: start; }
body.workspace-app .intake-signed-image { display: grid; place-items: center; min-height: 120px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
body.workspace-app .intake-signed-image img { max-width: 100%; max-height: 120px; }
body.workspace-app .intake-signed-typed { font-size: 22px; font-style: italic; color: var(--ink); }
body.workspace-app .intake-unsigned { margin: 0 0 18px; }
@media (max-width: 760px) { body.workspace-app .intake-signed-frame { grid-template-columns: minmax(0, 1fr); } }

/* The signature certificate: one document card, facts in two columns, the events beneath. */
body.workspace-app .certificate { max-width: 900px; padding: 0; }
body.workspace-app .cert-status { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: var(--ink); background: #f3faf5; border-radius: var(--card-radius) var(--card-radius) 0 0; }
body.workspace-app .cert-status .icon { width: 16px; height: 16px; color: #1f8a4c; }
body.workspace-app .cert-status.is-off { background: #fdf4f2; }
body.workspace-app .cert-status.is-off .icon { color: #c2410c; }
body.workspace-app .cert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.workspace-app .cert-section { padding: 22px 24px; border-bottom: 1px solid var(--line); }
body.workspace-app .cert-grid .cert-section:nth-child(odd) { border-right: 1px solid var(--line); }
body.workspace-app .cert-section h2 { margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); }
body.workspace-app .cert-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 14px; font-size: 13.5px; line-height: 1.55; }
body.workspace-app .cert-kv dt { color: var(--ink-muted); }
body.workspace-app .cert-kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
body.workspace-app .cert-hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .2px; }
body.workspace-app .cert-signature-image { display: grid; place-items: center; min-height: 140px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
body.workspace-app .cert-signature-image img { max-width: 100%; max-height: 150px; }
body.workspace-app .cert-signature-typed { font-size: 24px; font-style: italic; }
body.workspace-app .cert-signature-name { margin: 10px 0 0; font-size: 13px; color: var(--ink-muted); }
body.workspace-app .cert-events { border-bottom: 1px solid var(--line); }
body.workspace-app .cert-events ol { list-style: none; margin: 0; padding: 0; }
body.workspace-app .cert-events li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; padding: 9px 0; font-size: 13.5px; border-top: 1px solid var(--line); }
body.workspace-app .cert-events li:first-child { border-top: 0; }
body.workspace-app .cert-events time { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
body.workspace-app .cert-consent { margin: 0; padding: 18px 24px 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); font-style: italic; }
body.workspace-app .cert-foot { margin: 0; padding: 10px 24px 22px; font-size: 12.5px; line-height: 1.6; color: var(--ink-muted); }
@media (max-width: 760px) {
    body.workspace-app .cert-grid { grid-template-columns: minmax(0, 1fr); }
    body.workspace-app .cert-grid .cert-section:nth-child(odd) { border-right: 0; }
    body.workspace-app .cert-kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    body.workspace-app .cert-kv dt { margin-top: 8px; }
    body.workspace-app .cert-events li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Native selects using .input need the same inset arrow as .select. */
body select:is(.input, .select):not([multiple]):not([size]),
body.workspace-app select:is(.input, .select):not([multiple]):not([size]):is(:hover, :focus) {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23747b90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

/* ---- Checkboxes, radios and switches: one control everywhere. Native accent squares are gone;
        segmented controls keep their hidden inputs. ---- */
body:is(.workspace-app, .account-page) :is(input[type="checkbox"], input[type="radio"]):not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden]) {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px; flex-shrink: 0;
    border: 1px solid var(--line-strong); border-radius: 5px;
    background: #fff center / 12px 12px no-repeat;
    box-shadow: none; cursor: pointer; vertical-align: middle;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
body:is(.workspace-app, .account-page) input[type="radio"]:not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden]) { border-radius: 50%; }
body:is(.workspace-app, .account-page) :is(input[type="checkbox"], input[type="radio"]):not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden]):hover:not(:disabled) { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-ring); }
body:is(.workspace-app, .account-page) input[type="checkbox"]:not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden]):checked {
    border-color: var(--blue); background-color: var(--blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M2.5 6.3 4.9 8.7 9.6 3.5' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body:is(.workspace-app, .account-page) input[type="checkbox"]:not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden]):indeterminate {
    border-color: var(--blue); background-color: var(--blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M3 6h6' stroke='white' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}
body:is(.workspace-app, .account-page) input[type="radio"]:not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden]):checked {
    border-color: var(--blue); background-color: var(--blue);
    background-image: radial-gradient(circle at center, #fff 0 3px, transparent 3.6px);
}
body:is(.workspace-app, .account-page) :is(input[type="checkbox"], input[type="radio"]):not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden]):disabled { opacity: .5; cursor: default; box-shadow: none; }
body:is(.workspace-app, .account-page) :is(input[type="checkbox"], input[type="radio"]):not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden]):focus-visible { outline: 2px solid var(--blue-border); outline-offset: 3px; }

/* A switch is the same control stretched into a pill: off is grey with the knob left, on is blue with the knob right. */
body:is(.workspace-app, .account-page) input[type="checkbox"][role="switch"]:not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden]) { position: relative; width: 36px; height: 20px; border-color: transparent; border-radius: 100px; background: #dfe1ea; }
body:is(.workspace-app, .account-page) input[type="checkbox"][role="switch"]:not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden])::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(23, 38, 71, .22); transition: translate 140ms cubic-bezier(.2,.75,.25,1); }
body:is(.workspace-app, .account-page) input[type="checkbox"][role="switch"]:not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden]):hover:not(:disabled) { border-color: transparent; background-color: #d3d6e2; }
body:is(.workspace-app, .account-page) input[type="checkbox"][role="switch"]:not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden]):checked { border-color: transparent; background: var(--blue); }
body:is(.workspace-app, .account-page) input[type="checkbox"][role="switch"]:not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden]):checked:hover:not(:disabled) { background: var(--blue-hover); }
body:is(.workspace-app, .account-page) input[type="checkbox"][role="switch"]:not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden]):checked::before { translate: 16px 0; }
@media (prefers-reduced-motion: reduce) {
    body:is(.workspace-app, .account-page) :is(input[type="checkbox"], input[type="radio"]) { transition: none; }
    body:is(.workspace-app, .account-page) input[type="checkbox"][role="switch"]:not(.seg-opt > input):not(.switch > input):not(.template-method input):not(.template-upload input):not(.layout-type-tag input):not([hidden])::before { transition: none; }
}
@media (forced-colors: active) {
    body:is(.workspace-app, .account-page) :is(input[type="checkbox"], input[type="radio"]) { appearance: auto; -webkit-appearance: auto; background-image: none; }
}