/* Shared workspace and account visual system. Feature layouts and handlers remain native. */
.account-page .rise, .account-page .rise-group > * { animation: none; }
[data-vehicle-scope][data-include-vehicles="false"] [data-vehicle-only] { display: none !important; }
:root:not([data-theme="dark"]) {
    --text:#202125;
    --text-muted:#656770;
    --text-faint:#737782;
    --canvas:#f8f9fb;
    --surface-2:#f3f4f7;
    --surface-3:#e9edf5;
    --border:rgba(30,51,62,.14);
    --accent:#006dfc;
    --accent-hover:#0058df;
    --accent-text:#0058d9;
    --accent-soft:#eeeefe;
    --brand-gradient:linear-gradient(#006dfc,#006dfc);
    --brand-gradient-text:linear-gradient(#006dfc,#006dfc);
    --shadow-glow:0 2px 4px #18304a16
}

:root {
    --font-sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    --r-md:5px;
    --r-lg:7px;
    --r-xl:9px
}

.design-eyebrow {
    font-size:9px;
    font-weight:600;
    letter-spacing:1.8px;
    color:var(--text-muted);
    margin:0 0 10px
}

.btn {
    font-weight:500
}

.btn-primary {
    background:var(--accent);
    box-shadow:0 2px 3px #16364c10
}

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

.input,.select,.textarea {
    border-radius:5px
}

.h2 {
    font-weight:500;
    letter-spacing:-1px
}

.card-header {
    background:var(--surface-1)
}

.table thead th {
    background:var(--surface-2);
    font-size:11px;
    font-weight:600;
    letter-spacing:.25px
}

.table tbody td {
    padding-block:14px
}


.app-main {
    max-width:1320px;
    padding:28px 40px 64px
}

.app-main-medium {
    max-width:800px
}

.app-main-narrow {
    max-width:560px
}

.app-main-wide {
    max-width:1440px
}

.app-header {
    align-items:center;
    padding-block:14px 24px;
    border-bottom:1px solid var(--border);
    margin-bottom:28px
}

.app-header .h2 {
    font-size:30px;
    line-height:1.2
}

.app-header-meta {
    font-size:12px;
    margin-top:8px
}

.app-header>.app-actions,.app-header>.btn {
    margin-top:0
}

.app-content .card {
    box-shadow:0 1px 3px #1e333e06,inset 0 0 0 1px var(--border);
    border-radius:7px
}

.dash-stats-card {
    background:var(--surface-1);
    margin-bottom:26px
}

.dash-stats {
    padding:28px
}

.dash-stats .stat-label {
    font-size:11px;
    color:var(--text-muted);
    font-weight:500
}

.dash-stats .stat-value {
    font-size:38px;
    font-weight:500;
    letter-spacing:-1.7px;
    color:var(--text);
    line-height:1.3
}

.dash-stats .stat-sub {
    font-size:11px
}

.dash-board {
    gap:24px
}

.dash-card-head {
    padding:20px 24px 15px
}

.dash-card .card-title {
    font-size:15px;
    font-weight:500;
    letter-spacing:-.3px
}

.dash-card .card-body {
    padding:8px 24px 20px
}

.dash-row {
    padding-block:14px
}

.dash-row-title {
    font-size:13px;
    font-weight:500
}

.dash-row-sub,.dash-row-date {
    font-size:11px
}

.dash-quiet {
    font-size:12px;
    line-height:1.75;
    color:var(--text-muted)
}

.chart-bar {
    background:#b6cfff
}

.chart-col.is-current .chart-bar {
    background:#006dfc
}

.card-link {
    font-weight:500
}

.badge {
    font-size:11px
}

.empty {
    padding-block:55px
}

.redesign-skip {
    position:fixed;
    top:-80px;
    left:16px;
    z-index:100;
    background:white;
    padding:12px;
    color:#202125
}

.redesign-skip:focus {
    top:12px
}

.account-page {
    background:#f8f9fb
}

.account-page .auth-topbar {
    padding:28px 48px;
    border-bottom:1px solid var(--border);
    background:#f8f9fb
}

.account-page .auth-logo {
    height:27px
}

.account-page .auth-main {
    display:grid;
    grid-template-columns:minmax(320px,480px) minmax(0,440px);
    align-items:center;
    gap:100px;
    max-width:1240px;
    width:100%;
    margin:auto;
    padding:56px 60px 70px
}

.auth-story {
    border-left:1px solid #d5deec;
    padding:24px 0 24px 40px
}

.auth-story h2 {
    font-family:'DM Sans',system-ui,sans-serif;
    font-weight:400;
    font-size:67px;
    letter-spacing:-2px;
    line-height:1.03;
    margin:24px 0
}

.auth-story h2 em {
    color:#006dfc
}

.auth-story>p:not(.design-eyebrow) {
    font-size:14px;
    line-height:1.8;
    color:var(--text-muted);
    max-width:320px;
    margin:0 0 32px
}

.auth-story-line {
    display:flex;
    align-items:center;
    gap:20px;
    margin:16px 0;
    font-size:12px
}

.auth-story-line>span {
    font-size:10px;
    color:#3571d7
}

.auth-story-line strong {
    font-weight:500
}

.auth-story-foot {
    display:block;
    margin-top:55px;
    font-size:8px;
    letter-spacing:1.5px;
    color:var(--text-muted)
}

.account-page .auth-col {
    background:#fff;
    padding:32px;
    border:1px solid #d5deec;
    border-radius:7px;
    box-shadow:0 12px 40px -30px #263e42;
    max-width:none
}

.account-page .auth-title {
    font-size:28px;
    font-weight:500
}

.account-page .auth-head>.text-muted {
    font-size:13px
}

.account-page .auth-form {
    gap:18px
}

.account-page .label {
    font-size:12px;
    font-weight:500
}

.account-page .input {
    background:#fcfcfd
}

.account-page .auth-switch {
    font-size:12px
}

.account-page .auth-note {
    color:var(--text-muted);
    font-size:11px
}

.account-page .auth-row {
    font-size:11px
}

.account-page .btn-primary {
    background:#202125
}

.account-page .btn-primary:hover {
    background:#304f61
}

@media(min-width:901px) and (max-width:1150px) {
    .app-sidebar {
        width:210px;
        padding-inline:10px
    }
    .app-main {
        padding-inline:24px
    }
    .app-header {
        gap:14px
    }
    .app-header .h2 {
        font-size:25px
    }
    .app-actions {
        gap:8px
    }
    .app-actions .btn {
        font-size:12px;
        padding-inline:12px
    }
    .account-page .auth-main {
        gap:50px;
        padding-inline:40px
    }
    .auth-story {
        padding-left:28px
    }
    .auth-story h2 {
        font-size:58px
    }
}

@media(max-width:900px) {
    .app-main {
        padding:20px 22px 48px
    }
    .app-header {
        align-items:flex-start;
        padding-block:10px 20px
    }
    .app-sidebar {
        width:248px
    }
    .account-page .auth-main {
        grid-template-columns:1fr;
        max-width:500px;
        padding:35px 24px 50px;
        gap:0
    }
    .auth-story {
        display:none
    }
    .account-page .auth-topbar {
        padding:24px
    }
    .account-page .auth-col {
        padding:30px
    }
    .dash-stats {
        padding:22px
    }
    .app-header .h2 {
        font-size:28px
    }
}

@media(max-width:560px) {
    .app-main {
        padding:16px 16px 40px
    }
    .app-header {
        gap:18px
    }
    .app-header .h2 {
        font-size:26px
    }
    .app-actions {
        flex-wrap:wrap;
        gap:8px
    }
    .app-actions .btn {
        font-size:12px;
        padding-inline:12px
    }
    .dash-stats .stat-value {
        font-size:32px
    }
    .dash-board {
        gap:18px
    }
    .dash-card-head {
        padding:18px 18px 12px
    }
    .dash-card .card-body {
        padding:6px 18px 17px
    }
    .account-page .auth-topbar {
        padding:22px 20px
    }
    .account-page .auth-main {
        padding-inline:20px
    }
    .account-page .auth-col {
        padding:26px 22px
    }
    .account-page .auth-title {
        font-size:27px
    }
    .account-page .auth-logo {
        height:25px
    }
    .account-page .auth-pair {
        grid-template-columns:1fr
    }
    .design-eyebrow {
        font-size:8px
    }
}

/* Keep case search, navigation and export usable below a full desktop width. */
@media(max-width:1250px) {
    .app-topbar-row.has-search {
        grid-template-columns:minmax(0,1fr) auto
    }
    .app-topbar-row.has-search .topbar-left {
        grid-column:1
    }
    .app-topbar-row.has-search .topbar-actions {
        grid-column:2;
        grid-row:1
    }
    .app-topbar-row.has-search .topbar-search {
        grid-column:1/-1;
        grid-row:2;
        width:100%
    }
    .topbar-actions {
        flex-wrap:wrap
    }
    .app-topbar-row.has-search .topbar-left .app-crumbs {
        font-size:11px
    }
}

@media(max-width:560px) {
    .app-topbar-row.has-search .app-crumbs .copy-btn {
        display:none
    }
    .app-topbar-row.has-search .topbar-left {
        gap:6px
    }
    .app-topbar-row.has-search .app-crumbs {
        gap:5px
    }
    .topbar-actions>.btn {
        font-size:11px;
        padding-inline:10px
    }
    .topbar-actions .btn-icon {
        width:32px
    }
    .app-topbar-row.has-search {
        gap:12px 7px
    }
    .case-tabs-row {
        position:relative
    }
    .case-tabs-row .case-tabs {
        padding-bottom:5px;
        scrollbar-width:thin;
        scrollbar-color:#9aacb6 transparent
    }
    .case-tabs-row .case-tabs::-webkit-scrollbar {
        display:block;
        height:3px
    }
    .case-tabs-row .case-tabs::-webkit-scrollbar-thumb {
        background:#9aacb6
    }
}

.case-tabs-row {
    min-width:0
}

.case-tabs-row .case-tabs {
    min-width:0;
    max-width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:thin
}

.case-tabs-row .tab {
    flex-shrink:0
}

.mobile-cases {
    display:none
}

@media(max-width:720px) {
    .desktop-cases {
        display:none
    }
    .mobile-cases {
        display:flex;
        flex-direction:column;
        gap:12px
    }
    .mobile-case {
        display:block;
        background:var(--surface-1);
        border:1px solid var(--border);
        border-radius:7px;
        padding:18px;
        color:var(--text)
    }
    .mobile-case:hover {
        border-color:var(--accent)
    }
    .mobile-case-top {
        display:flex;
        justify-content:space-between;
        gap:12px;
        align-items:center;
        font-size:10px;
        color:var(--text-muted);
        margin-bottom:13px
    }
    .mobile-case h2 {
        font-size:18px;
        font-weight:500;
        letter-spacing:-.4px;
        margin:0 0 4px
    }
    .mobile-case>p {
        font-size:12px;
        color:var(--text-muted);
        margin:0
    }
    .mobile-case-next {
        margin-top:15px;
        padding-top:12px;
        border-top:1px solid var(--border);
        display:flex;
        align-items:center;
        gap:10px;
        font-size:12px
    }
    .mobile-case-next>span {
        flex:1
    }
    .mobile-case-next .icon {
        width:15px;
        color:var(--accent-text)
    }
    .mobile-case-next small {
        display:block;
        color:var(--text-muted);
        margin-top:4px
    }
}

.drawer-close {
    display:none
}

.app-sidebar .app-nav-group+.app-nav-group {
    margin-top:18px
}

.app-sidebar .app-nav-link {
    height:34px
}

.app-sidebar .app-nav {
    margin-top:24px
}

.app-sidebar .app-sidebar-logo {
    margin-bottom:24px
}

@media(max-width:900px) {
    .drawer-close {
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:10px;
        border:0;
        background:transparent;
        color:#56657c;
        font:inherit;
        font-size:12px;
        min-height:40px;
        margin-bottom:10px;
        cursor:pointer
    }
    .app-sidebar {
        padding-top:12px
    }
    .app-sidebar .app-nav-link {
        height:40px
    }
    .app-sidebar .app-sidebar-logo {
        margin-bottom:20px
    }
}

.dash-attention {
    border-top:3px solid #006dfc
}

.dash-clear {
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 0
}

.dash-clear>span {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:50%;
    color:#2559b6;
    background:#eeeefe
}

.dash-clear strong {
    font-size:14px;
    font-weight:500
}

.dash-clear p {
    font-size:12px;
    color:var(--text-muted);
    margin:4px 0 0;
    line-height:1.6
}

.dash-recent .dash-row {
    padding-block:16px
}

.dash-setup>summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 24px;
    cursor:pointer;
    list-style:none;
    font-size:13px
}

.dash-setup>summary::-webkit-details-marker {
    display:none
}

.dash-setup>summary>span {
    display:flex;
    align-items:center;
    gap:10px
}

.dash-setup>summary>span:last-child {
    font-size:11px;
    color:var(--text-muted)
}

.dash-setup[open]>summary {
    border-bottom:1px solid var(--border)
}

.dash-setup>summary:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px
}

.dash-board .dash-setup:not([open])>.card-body {
    display:none
}

@media(max-width:560px) {
    .dash-setup>summary {
        padding:18px;
        align-items:flex-start;
        flex-direction:column;
        gap:8px
    }
    .dash-setup>summary>span:last-child {
        padding-left:26px
    }
}

.settings .intake-frame {
    background:var(--surface-1);
    border:1px solid var(--border);
    border-radius:7px;
    padding:22px
}

.settings .intake-frame::before,.settings .intake-frame::after {
    display:none
}

.settings .intake-sub {
    font-weight:500;
    color:var(--text)
}

.settings .input {
    box-shadow:inset 0 0 0 1px var(--border);
    background:var(--surface-1)
}

.settings .input:focus {
    box-shadow:inset 0 0 0 2px var(--accent)
}

.dash-row-sub,.dash-row-date {
    font-size:12px
}

.dash-zero-chart {
    display:flex;
    align-items:center;
    gap:18px;
    padding-block:18px
}

.dash-zero-chart>span {
    font-size:32px;
    font-weight:500;
    letter-spacing:-1px
}

.dash-zero-chart p {
    font-size:12px;
    line-height:1.7;
    color:var(--text-muted);
    margin:0
}

.dash-zero-chart strong {
    display:block;
    color:var(--text);
    font-size:14px;
    font-weight:500
}

@media(max-width:900px) {
    .app-topbar-row.is-empty {
        margin-bottom:8px
    }
    .app-topbar-row.is-empty .topbar-actions:empty {
        display:none
    }
    .app-topbar-row.is-empty>div:empty {
        display:none
    }
    .dash-recent .dash-row {
        flex-wrap:wrap;
        gap:6px 12px
    }
    .dash-recent .dash-row-main {
        flex-basis:100%
    }
    .dash-recent .dash-row-date {
        margin-left:auto
    }
    .settings .intake-frame {
        padding:18px
    }
}

.dash-board {
    align-items:start
}

.dash-board .dash-card {
    height:auto
}

/* Third review: explicit section navigation and compact quiet states. */
.case-section-picker {
    display: none;
}

.dash-quiet-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 24px;
}

.dash-quiet-status > div:last-child {
    display: flex;
    gap: 22px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .dash-stats {
        padding: 18px;
        row-gap: 15px;
    }
    .dash-stats .stat-value {
        font-size: 28px;
        letter-spacing: -1px;
    }
    .dash-stats .stat-sub {
        font-size: 10px;
        margin-top: 2px;
    }
    .dash-stats .stat-label {
        font-size: 11px;
    }
    .dash-quiet-status {
        padding: 8px 18px 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .dash-quiet-status .dash-clear p {
        font-size: 11px;
    }
    .dash-quiet-status > div:last-child {
        padding-left: 48px;
    }
}

@media (max-width: 720px) {
    .case-section-picker {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 24px;
        font-size: 12px;
        color: var(--text-muted);
    }
    .case-section-picker .select {
        height: 46px;
        width: 100%;
        color: var(--text);
        font-size: 14px;
    }
    .case-tabs-row {
        display: none;
    }
    .mobile-case h2, .mobile-case-next, .mobile-case-top, .dash-row-sub {
        overflow-wrap: anywhere;
    }
    .dash-row-title {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .mobile-case-top .badge {
        white-space: normal;
        text-align: right;
    }
}

/* Technology direction shared by every operational screen. */
:root {
    --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

:root:not([data-theme="dark"]) {
    --text: #202125;
    --text-muted: #656770;
    --text-faint: #737782;
    --canvas: #f8f9fb;
    --surface-2: #f3f4f7;
    --surface-3: #e9edf5;
    --border: rgba(31,55,90,.14);
    --accent: #006dfc;
    --accent-hover: #0058df;
    --accent-text: #0058d9;
    --accent-soft: #eeeefe;
}


.app-header .h2 {
    font-weight: 600;
    letter-spacing: -1.1px;
}

.design-eyebrow {
    color: #4c70a3;
}

.app-content .card {
    border-radius: 9px;
}

.dash-card .card-title {
    font-weight: 600;
}

.dash-stats .stat-value {
    font-weight: 600;
}

.dash-stats .stat-label {
    color: #536885;
}

.dash-clear > span {
    background: #eeeefe;
    color: #006dfc;
    border-radius: 8px;
}

.account-page {
    background: #f8f9fb;
}

.account-page .auth-topbar {
    background: #fff;
    border-bottom-color: #e0e7f2;
}

.account-page .auth-main {
    max-width: 1320px;
    gap: 85px;
    grid-template-columns: minmax(320px,500px) minmax(0,440px);
}

.auth-story {
    border: 1px solid #2b4165;
    padding: 42px;
    border-radius: 14px;
    background: #0e1a2e;
    color: white;
}

.auth-story .design-eyebrow {
    color: #90baff;
}

.auth-story h2 {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 43px;
    font-weight: 600;
    letter-spacing: -1.8px;
    line-height: 1.14;
}

.auth-story h2 em {
    font-style: normal;
    color: #80b3ff;
}

.auth-story > p:not(.design-eyebrow) {
    color: #b5c5df;
    font-size: 13px;
}

.auth-story-line {
    font-size: 12px;
}

.auth-story-line > span {
    color: #79afff;
}

.auth-story-foot {
    color: #91a9ce;
    font-size: 8px;
    margin-top: 40px;
}

.account-page .auth-col {
    border-color: #dce4f0;
    border-radius: 10px;
    box-shadow: 0 12px 36px -27px #244b7c55;
}

.account-page .auth-title {
    font-weight: 600;
}

.account-page .input {
    background: #fafafa;
}

.account-page .btn-primary {
    background: #006dfc;
}

.account-page .btn-primary:hover {
    background: #0058df;
}

@media (max-width: 1100px) {
    .account-page .auth-main {
        gap: 45px;
        padding-inline: 35px;
    }
    .auth-story {
        padding: 32px;
    }
    .auth-story h2 {
        font-size: 38px;
    }
}

@media (max-width: 900px) {
    .account-page .auth-main {
        grid-template-columns: 1fr;
        max-width: 500px;
        gap: 0;
        padding-inline: 24px;
    }
}

@media (max-width: 560px) {
    .account-page .auth-main {
        padding-inline: 20px;
    }
    .app-header .h2 {
        font-size: 25px;
    }
}

/* Operational urgency remains distinct from secondary metadata. */
.mobile-case-next small.text-danger, .dash-row-date.text-danger {
    color: var(--danger);
    font-weight: 600;
}

.dash-attention.has-urgent {
    border-top-color: var(--danger);
}

.dash-row.is-urgent {
    padding-left: 12px;
    border-left: 2px solid var(--danger);
}

.dash-row.is-urgent + .dash-row {
    margin-top: 8px;
}

.task-edit {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
}

button.task-edit {
    cursor: pointer;
}

button.task-edit:hover {
    color: var(--accent-text);
}

button.task-edit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.activity-more > summary {
    color: var(--accent-text);
    font-size: 12px;
    padding: 16px 0 0;
    cursor: pointer;
}

.activity-more > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (max-width: 720px) {
    .task-list-card {
        background: transparent;
    }
    .app-content .task-list-card {
        box-shadow: none;
    }
    .task-list-card .table-wrap {
        overflow: visible;
    }
    .task-table, .task-table tbody {
        display: block;
        width: 100%;
    }
    .task-table thead {
        display: none;
    }
    .task-table .task-row {
        display: grid;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: 16px;
        margin-bottom: 14px;
        padding: 20px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--surface-1);
    }
    .task-table .task-row > td, .task-table .task-row > td:first-child, .task-table .task-row > td:last-child {
        display: block;
        padding: 0;
        min-width: 0;
        box-shadow: none;
        border: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 12px;
    }
    .task-table .task-row > td:first-child, .task-table .task-row > td[data-label="Case"] {
        grid-column: 1/-1;
    }
    .task-table .task-row > td:first-child {
        padding-bottom: 15px;
        border-bottom: 1px solid var(--border);
    }
    .task-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: var(--text-muted);
        font-size: 10px;
        margin-bottom: 5px;
        font-weight: 500;
    }
    .task-table .task-title {
        font-size: 14px;
        line-height: 1.6;
        font-weight: 500;
    }
    .task-table .task-sub {
        font-size: 12px;
    }
    .task-table .task-row.is-editable:hover td {
        background: transparent;
    }
    .task-table .task-overdue {
        color: var(--danger);
    }
    .overview-row.case-next {
        grid-template-columns: 26px minmax(0,1fr);
        gap: 12px 8px;
        align-items: start;
        border-top: 1px solid var(--border);
        margin-top: 14px;
        padding-top: 18px;
    }
    .overview-row.case-next .overview-row-value {
        grid-column: 1/-1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 0;
    }
    .overview-row.case-next .case-next-text {
        font-size: 14px;
        line-height: 1.7;
    }
    .overview-row.case-next .case-next-due {
        font-size: 12px;
    }
}

.dash-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

@media(max-width:900px) {
    .dash-stack {
        gap: 18px;
    }
}

.account-page .auth-main.auth-main-wide {
    grid-template-columns: minmax(0, 1fr);
    max-width: 980px;
}

.auth-main-wide .auth-story {
    display: none;
}

.focused-task-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 20px;
    background: var(--accent-soft);
    border: 1px solid #cfddf6;
    border-radius: 7px;
    font-size: 13px;
}

.focused-task-banner > span {
    display: flex;
    align-items: center;
    gap: 9px;
}

.task-table [data-focused-task] {
    background: #f6f9ff;
}

.task-table .task-row[data-focused-task] {
    border-color: #79a8f7;
}

.dash-row.is-due-today {
    border-left: 2px solid #3977df;
    padding-left: 12px;
}

.dash-row.is-due-today .dash-row-date {
    color: #0058d9;
    font-weight: 500;
}

.dash-row.is-urgent .dash-row-title {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Reference direction: a light editorial workspace, with color reserved for context. */
:root:not([data-theme="dark"]) {
    --hover-tint:#f0f4fc;
    --sunken-tint:#f7f8fb;
    --ink-2:rgba(28,45,80,.024);
    --ink-3:rgba(28,65,130,.055);
    --ink-4:rgba(28,65,130,.09);
    --border-strong:#c7ceda;
    --border-loud:#9baac2;
    --surface-4:#e3e8f1;
}

.app-content .input:hover,.app-content .select:hover,.app-content .textarea:hover,.account-page .input:hover,.account-page .select:hover {
    background-color:#f7f9fd;
}

.app-content .input:focus,.app-content .select:focus,.app-content .textarea:focus,.account-page .input:focus,.account-page .select:focus {
    background-color:white;
    box-shadow:inset 0 0 0 2px #006dfc;
}

/* The cases table: each cell is a main line with an optional quiet line under it (number under the client,
   days under the statute date, due date under the next step), so rows share one height and every cell stays
   inside its column. A long next step truncates with the full text on hover. */
.desktop-cases .table { table-layout:auto; }
.desktop-cases .cases-nowrap { white-space:nowrap; }
.desktop-cases .cases-line, .desktop-cases .cases-sub { display:block; }
.desktop-cases .cases-sub { margin-top:2px; font-size:12px; line-height:1.4; color:var(--text-muted); white-space:nowrap; }
.desktop-cases .cases-client { white-space:nowrap; }
.desktop-cases .cases-client .cases-line { display:flex; align-items:center; gap:8px; font-weight:500; }
.desktop-cases .cases-statute { white-space:nowrap; }
.desktop-cases .cases-statute .cases-statute-days { font-weight:500; color:var(--ink); }
.desktop-cases .cases-statute.is-urgent .cases-statute-days { color:var(--danger); }
.desktop-cases .cases-next { max-width:240px; }
.desktop-cases .cases-next-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px; }
.desktop-cases .cases-next .is-late { color:var(--danger); }
.desktop-cases .cases-client .cases-people > summary { white-space:nowrap; }
/* Narrower screens drop the least-used columns rather than scroll sideways: Opened, then Case type, then Intake */
/* Cases list columns: 1 client, 2 type, 3 incident, 4 statute, 5 stage, 6 next step, 7 last contact, 8 team; the least needed go first */
@media (max-width:1500px) { .desktop-cases .table :is(th,td):nth-child(3) { display:none; } .desktop-cases .cases-next, .desktop-cases .cases-next-text { max-width:200px; } }
@media (max-width:1300px) { .desktop-cases .table :is(th,td):nth-child(2) { display:none; } }
@media (max-width:1100px) { .desktop-cases .table :is(th,td):nth-child(8) { display:none; } .desktop-cases .cases-next, .desktop-cases .cases-next-text { max-width:170px; } }

.next-step-detail summary {
    cursor:pointer;
    font-size:12px;
    line-height:1.6;
}

.next-step-detail summary:focus-visible,.cases-history summary:focus-visible {
    outline:2px solid #006dfc;
    outline-offset:4px;
}

.next-step-detail p {
    font-size:12px;
    line-height:1.7;
    margin:9px 0 0;
}

.cases-history {
    margin:0 0 18px;
    font-size:12px;
    color:var(--text-muted);
}

.cases-history summary {
    cursor:pointer;
    width:fit-content;
}

.cases-history .cases-recent {
    margin:12px 0 0;
}

@media(max-width:720px){
    .cases-page .app-header{
        flex-direction:row;
        align-items:center;
        gap:12px
    }
    .cases-page .app-header>.btn{
        flex-shrink:0
    }
    .cases-page .app-header-meta{
        font-size:11px
    }
    .cases-page .list-toolbar{
        display:grid;
        grid-template-columns:1.15fr 1fr;
        gap:10px
    }
    .cases-page .list-search{
        grid-column:1/-1
    }
    .cases-page .list-scope{
        min-width:0;
        width:100%;
        justify-content:center
    }
    .cases-page .seg-opt>span{
        font-size:11px;
        padding-inline:8px
    }
    .cases-page .list-sort{
        min-width:0;
        width:auto
    }
    .cases-page .list-sort .select{
        width:100%;
        min-width:0;
        font-size:11px;
        padding-left:10px
    }
    .cases-history{
        margin-bottom:16px
    }
}

:root {
    --font-sans:'DM Sans',system-ui,sans-serif;
    --r-sm:6px;
    --r-md:10px;
    --r-lg:14px;
    --r-xl:18px;
}

:root:not([data-theme="dark"]) {
    --bg:#fafafa;
    --surface-1:#fff;
    --canvas:#fafafa;
    --surface-2:#f3f4f7;
    --surface-3:#e9edf5;
    --text:#232323;
    --text-muted:#68686f;
    --text-faint:#74747e;
    --border:#e5e5e8;
    --accent:#006dfc;
    --accent-hover:#0058df;
    --accent-text:#0058d9;
    --accent-soft:#eeeffb;
    --brand-gradient:linear-gradient(#292929,#292929);
    --brand-gradient-text:linear-gradient(#292929,#292929);
}

.app-sidebar {
    background:#f4f4f4;
    color:#494949;
    border-right:1px solid #e6e6e6;
    padding:28px 16px 16px;
}

.app-sidebar-logo img {
    filter:none;
}

.app-sidebar .ws-switch {
    background:#fff;
    color:#414141;
    border:1px solid #e1e1e1;
    border-radius:10px;
    height:44px;
}

.app-sidebar .ws-switch:hover,.app-sidebar .ws-switch[aria-expanded="true"] {
    background:#eeeef4;
}

.app-sidebar .ws-switch>.icon,.app-sidebar .user-switch>.icon {
    color:#7d7d83;
}

.app-nav-label {
    color:#808086;
    font-size:9px;
    letter-spacing:1.2px;
}

.app-sidebar .app-nav-link {
    height:37px;
    color:#66666b;
    font-size:12px;
    border-radius:9px;
}

.app-nav-link .icon {
    color:#8a8a91;
    stroke-width:1.6;
}

.app-nav-link:hover {
    color:#174eaa;
    background:#ececf3;
}

.app-nav-link:hover .icon {
    color:#1764d9;
}

.app-nav-link.is-active {
    color:#174eaa;
    background:#e8efff;
    box-shadow:none;
    font-weight:600;
}

.app-nav-link.is-active .icon {
    color:#1764d9;
}

.app-sidebar-bottom {
    box-shadow:inset 0 1px #e1e1e6;
}

.app-sidebar .user-switch-name {
    color:#34343b;
}

.app-sidebar .user-switch-email {
    color:#76767d;
}

.app-sidebar .user-switch:hover,.app-sidebar .user-switch[aria-expanded="true"] {
    background:#ebebf3;
}

.app-sidebar .avatar-accent {
    background:#e3e3ef;
    color:#62628a;
    border-radius:50%;
}

.drawer-close {
    color:#55555d;
}

.app-main {
    padding-top:35px;
}

.app-header {
    border-bottom:0;
    padding-block:12px 26px;
    margin-bottom:12px;
    gap:24px;
}

.app-header .h2 {
    font-size:36px;
    font-weight:500;
    letter-spacing:-1.7px;
}

.design-eyebrow {
    color:#7c7c84;
    font-size:9px;
    letter-spacing:1.5px;
}

.app-header-meta {
    color:#7e7e85;
}

.btn {
    border-radius:100px;
    font-weight:500;
}

.btn-primary,.account-page .btn-primary {
    background:#232323;
    box-shadow:none;
}

.btn-primary:hover,.account-page .btn-primary:hover {
    background:#0058df;
}

.btn-outline {
    background:#fff;
}

.btn-icon {
    border-radius:9px;
}

.input,.select,.textarea {
    border-radius:9px;
}

.app-content .card {
    border-radius:16px;
    box-shadow:0 3px 12px -8px #343e5540,inset 0 0 0 1px var(--border);
}

.card-header {
    background:transparent;
}

.app-content .dash-stats-card {
    box-shadow:none;
    background:transparent;
    margin-bottom:28px;
}

.dash-stats-card .dash-stats {
    padding:0;
    gap:14px;
}

.dash-stats .stat,.dash-stats .stat:not(:last-child),.dash-stats .stat+.stat,.dash-stats .stat:nth-child(2n+1),.dash-stats .stat:nth-child(2n) {
    padding:23px;
    box-shadow:none;
    border-radius:15px;
    background:#edf2fa;
}

.dash-stats .stat:nth-child(2) {
    background:#ecebfa;
}

.dash-stats .stat:nth-child(3) {
    background:#f5e9e0;
}

.dash-stats .stat:nth-child(4) {
    background:#e8edf0;
}

.dash-stats .stat-label {
    font-size:11px;
    color:#636c7b;
}

.dash-stats .stat-value {
    font-size:40px;
    font-weight:500;
    letter-spacing:-2px;
    line-height:1.35;
}

.dash-stats .stat-sub {
    color:#717986;
}

.dash-card .card-title {
    font-size:17px;
    font-weight:500;
    letter-spacing:-.5px;
}

.dash-card-head {
    padding:24px 25px 16px;
}

.dash-card .card-body {
    padding:8px 25px 23px;
}

.dash-attention {
    border-top-width:0;
}

.dash-attention.has-urgent {
    border-top:0;
}

.dash-row {
    padding-block:15px;
}

.dash-row-title {
    font-size:13px;
    font-weight:500;
}

.dash-row-sub,.dash-row-date {
    font-size:12px;
}

.chart-bar {
    background:#d0dff7;
    border-radius:5px 5px 0 0;
}

.chart-col.is-current .chart-bar {
    background:#3575dc;
}

.dash-clear>span {
    color:#2467c3;
    background:#eef4ff;
    border-radius:50%;
}

.badge,.case-stage-pill,.app-content .case-stage-pill {
    border-radius:30px;
}

.table thead th {
    background:#f7f7f7;
    font-weight:500;
    color:#717179;
}

.table tbody td {
    padding-block:17px;
}

.tabs {
    border-bottom-color:#e3e6ed;
}

.tab {
    font-weight:500;
}

.tab.is-active,.tab[aria-selected="true"] {
    color:#454565;
}

.case-section-picker .select {
    border-radius:12px;
}

.mobile-case {
    border-radius:15px;
}

.settings .intake-frame {
    border-radius:15px;
}

.settings .input {
    border-radius:9px;
}

.focused-task-banner {
    border-color:#dedef4;
    border-radius:12px;
}

.task-table [data-focused-task] {
    background:#f7f6ff;
}

.task-table .task-row[data-focused-task] {
    border-color:#b0b2df;
}

.account-page,.account-page .auth-topbar {
    background:#fafafa;
}

.account-page .auth-topbar {
    border:0;
    padding:30px 48px;
}

.account-page .auth-main {
    gap:90px;
    padding-top:45px;
}

.auth-story {
    color:#25252c;
    background:#edeef6;
    border:0;
    border-radius:24px;
    padding:50px 42px;
    position:relative;
}

.auth-story .design-eyebrow {
    color:#70728b;
}

.auth-story h2 {
    font-family:'DM Sans',sans-serif;
    font-size:51px;
    font-weight:500;
    line-height:1.08;
    letter-spacing:-2.3px;
    margin:28px 0;
}

.auth-story h2 em {
    color:#787b98;
}

.auth-story>p:not(.design-eyebrow) {
    color:#727485;
    font-size:14px;
}

.auth-story-line {
    padding:15px 18px;
    margin:12px -8px;
    background:#fff;
    box-shadow:0 8px 20px -16px #454b68;
    border-radius:12px;
    font-size:13px;
}

.auth-story-line:nth-of-type(1) {
    transform:rotate(-3deg);
}

.auth-story-line:nth-of-type(2) {
    background:#dce9ff;
    transform:rotate(2deg);
}

.auth-story-line:nth-of-type(3) {
    background:#f1d9ca;
    transform:rotate(-1deg);
}

.auth-story-line>span {
    color:#7a8293;
}

.auth-story-foot {
    color:#777c8b;
    font-size:9px;
}

.account-page .auth-col {
    background:transparent;
    box-shadow:none;
    border:0;
    padding:20px 0;
}

.account-page .auth-title {
    font-size:34px;
    font-weight:500;
    letter-spacing:-1.2px;
}

.account-page .input {
    background:#fff;
    border-radius:10px;
}

.account-page .auth-head>.text-muted {
    font-size:14px;
}

.account-page .auth-main-wide .auth-col {
    background:#fff;
    border:1px solid var(--border);
    padding:32px;
    border-radius:18px;
}

@media(max-width:1100px){
    .app-header .h2{
        font-size:32px
    }
    .auth-story h2{
        font-size:42px
    }
    .account-page .auth-main{
        gap:45px
    }
    .auth-story{
        padding:38px 30px
    }
}

@media(max-width:900px){
    .app-main{
        padding-top:18px
    }
    .app-header .h2{
        font-size:30px
    }
    .dash-stats .stat,.dash-stats .stat:not(:last-child),.dash-stats .stat+.stat,.dash-stats .stat:nth-child(2n+1),.dash-stats .stat:nth-child(2n){
        padding:19px
    }
    .dash-stats .stat-value{
        font-size:32px
    }
    .account-page .auth-main{
        gap:0;
        padding-top:36px
    }
    .account-page .auth-col{
        padding:10px 0
    }
    .dash-card-head{
        padding:20px 20px 14px
    }
    .dash-card .card-body{
        padding:7px 20px 20px
    }
}

@media(max-width:560px){
    .app-header .h2{
        font-size:28px;
        letter-spacing:-1.2px
    }
    .app-header{
        padding-bottom:20px
    }
    .dash-stats-card .dash-stats{
        gap:10px
    }
    .dash-stats .stat,.dash-stats .stat:not(:last-child),.dash-stats .stat+.stat,.dash-stats .stat:nth-child(2n+1),.dash-stats .stat:nth-child(2n){
        padding:17px;
        border-radius:12px
    }
    .dash-stats .stat-value{
        font-size:30px
    }
    .dash-stats .stat-label{
        font-size:11px
    }
    .dash-stats .stat-sub{
        font-size:10px
    }
    .account-page .auth-topbar{
        padding:24px 20px
    }
    .account-page .auth-title{
        font-size:30px
    }
    .account-page .auth-main-wide .auth-col{
        padding:22px
    }
    .task-table .task-row{
        border-radius:15px
    }
}