/*
   Countertop Office visual system.
   The app is used in ordinary office light by owners, admin staff, and
   bookkeepers who need dense records to feel calm and trustworthy.
*/

:root {
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
    --fs-1: 0.75rem;
    --fs-2: 0.8125rem;
    --fs-3: 0.9375rem;
    --fs-4: 1.0625rem;
    --fs-5: 1.25rem;
    --fs-6: 1.5rem;
    --fs-7: 1.875rem;
    --lh-tight: 1.18;
    --lh-body: 1.5;
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 10px;
    --r-pill: 999px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --shadow-1: 0 1px 2px oklch(25% 0.025 145 / 8%);
    --shadow-2: 0 1px 2px oklch(25% 0.025 145 / 7%), 0 18px 42px oklch(25% 0.025 145 / 10%);
}

html,
body {
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--fs-3);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    min-width: 320px;
}

a {
    color: var(--brand-strong);
}

.mud-layout,
.mud-main-content {
    background: var(--page) !important;
}

.app-shell.mud-layout {
    --app-shell-bar-height: 60px;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
}

.app-shell .mud-appbar {
    border-bottom: 1px solid var(--line);
    box-shadow: none !important;
    flex: 0 0 auto;
    min-height: var(--app-shell-bar-height);
    position: sticky !important;
    top: 0 !important;
    z-index: 1300 !important;
}

.app-shell .mud-main-content {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--app-shell-bar-height));
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}

@media (min-width: 960px) {
    .app-shell.mud-drawer-open-responsive-md-left .mud-main-content {
        max-width: calc(100% - var(--mud-drawer-width-left));
        width: calc(100% - var(--mud-drawer-width-left));
    }
}

.app-footer {
    border-top: 1px solid var(--hairline);
    color: var(--ink-soft);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0;
    padding: var(--sp-4) var(--sp-5);
    text-align: center;
    margin-top: auto;
    flex-shrink: 0;
}

/* Keep the product footer centred on the viewport, not on the main content
   area. At md+ the persistent drawer pushes .mud-main-content (the footer's
   parent) right by the drawer width, which would otherwise drag the centred
   footer text along with it whenever the nav opens/closes. Negate that offset
   so the footer always spans the full viewport and its text stays put. */
@media (min-width: 960px) {
    .mud-drawer-open-responsive-md-left .app-footer {
        box-sizing: border-box;
        margin-left: calc(-1 * var(--mud-drawer-width-left));
        width: calc(100% + var(--mud-drawer-width-left));
    }
}

.mud-appbar,
.mud-appbar.mud-elevation-0 {
    background: var(--topbar-bg) !important;
    color: var(--topbar-fg) !important;
}

.mud-appbar .mud-toolbar {
    gap: var(--sp-2);
    min-height: var(--app-shell-bar-height);
    padding-left: var(--sp-3);
    padding-right: var(--sp-4);
}

.mud-appbar .mud-icon-button {
    color: var(--ink-muted) !important;
}

.mud-appbar .mud-icon-button:hover {
    background: var(--surface-tint) !important;
    color: var(--ink) !important;
}

.app-title {
    color: var(--ink) !important;
    font-size: var(--fs-5) !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-title::before,
.public-brand-mark,
.auth-card-mark {
    color: var(--brand);
}

.app-title::before {
    border-radius: var(--r-sm);
    content: "C";
    display: inline-grid;
    font-size: 0.8rem;
    font-weight: 800;
    height: 26px;
    margin-right: 10px;
    place-items: center;
    vertical-align: 2px;
    width: 26px;
}

.app-shell .mud-drawer {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid oklch(100% 0 0 / 8%) !important;
    color: var(--sidebar-fg) !important;
    max-height: calc(100dvh - var(--app-shell-bar-height));
    overflow: hidden !important;
}

.app-shell .mud-drawer .mud-drawer-content {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.house-nav-section {
    color: var(--sidebar-muted) !important;
    display: block !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    padding-left: 12px !important;
    text-transform: uppercase !important;
}

.house-nav-rule {
    height: 1px;
    margin: 12px 16px 0;
    background: color-mix(in oklch, var(--sidebar-muted), transparent 70%);
}

.list-count-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 4px 16px;
    font-family: var(--font-ui);
}

.list-count-line .list-count-value {
    font-size: 1.5rem;
    font-weight: 760;
    color: var(--ink);
    line-height: 1;
}

.list-count-line .list-count-label {
    font-size: 0.8125rem;
    color: var(--ink-soft);
    text-transform: lowercase;
    letter-spacing: 0;
}

.attention-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.attention-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-ui);
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.attention-tile:hover {
    border-color: color-mix(in oklch, var(--brand), var(--line) 50%);
    box-shadow: 0 1px 2px oklch(25% 0.025 145 / 7%), 0 6px 18px oklch(25% 0.025 145 / 8%);
}

.attention-tile:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.attention-tile-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.attention-tile-icon .mud-icon-root {
    font-size: 1.35rem;
}

.attention-tile--bad .attention-tile-icon {
    background: var(--bad-soft);
    color: var(--bad);
}

.attention-tile-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.attention-tile-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ink-muted);
    letter-spacing: 0;
}

.attention-tile-value {
    font-size: 1.375rem;
    font-weight: 760;
    color: var(--ink);
    line-height: 1.1;
}

.attention-tile-hint {
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

/* Mobile quick-create floating action button.
   Mirrors the top-bar Quick Create menu items but only renders on small
   viewports, where the top-bar button is hidden. */
.mobile-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    display: none;
}

.mobile-fab .mud-fab {
    box-shadow: 0 4px 16px oklch(25% 0.025 145 / 22%);
}

@media (max-width: 959.98px) {
    .mobile-fab {
        display: block;
    }
}

/* Command palette (Ctrl/Cmd+K) overlay */
.command-palette-overlay {
    position: fixed;
    inset: 0;
    background: oklch(20% 0.024 155 / 32%);
    z-index: 1400;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    animation: command-palette-fade-in 100ms ease-out;
}

@keyframes command-palette-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.command-palette {
    width: min(640px, 92vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: 0 18px 48px oklch(25% 0.025 145 / 24%);
    overflow: hidden;
    font-family: var(--font-ui);
}

.command-palette-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.command-palette-icon {
    color: var(--ink-soft);
    font-size: 1.1rem;
}

.command-palette-input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    padding: 2px 0;
}

.command-palette-input::placeholder {
    color: var(--ink-faint);
}

.command-palette-kbd,
.command-palette-footer kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    padding: 1px 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface-tint);
    color: var(--ink-muted);
    line-height: 1.4;
}

.command-palette-results {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.command-palette-empty {
    padding: 24px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.875rem;
}

.command-palette-group-label {
    padding: 8px 16px 4px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.command-palette-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--ink);
    transition: background 80ms ease;
}

.command-palette-item.is-selected,
.command-palette-item:hover {
    background: var(--brand-wash);
}

.command-palette-item.is-selected .command-palette-item-icon,
.command-palette-item:hover .command-palette-item-icon {
    color: var(--brand-strong);
}

.command-palette-item-icon {
    color: var(--ink-soft);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.command-palette-item-label {
    flex: 1;
}

.command-palette-item-hint {
    font-size: 0.75rem;
    color: var(--ink-faint);
}

.command-palette-footer {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid var(--line);
    background: var(--surface-tint);
    font-size: 0.75rem;
    color: var(--ink-soft);
}

/* Active-filter chip strip rendered above a data grid. Mirrors the URL
   filter state so users can see and clear individual filters without
   hunting through three different widgets. */
.filter-chip-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 4px 12px;
    margin-bottom: 6px;
    font-family: var(--font-ui);
    font-size: 0.8125rem;
}

.filter-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 4px 4px 10px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.4;
    min-height: 30px;
    vertical-align: middle;
    white-space: nowrap;
}

.filter-chip-field {
    flex: 0 0 auto;
    color: color-mix(in oklch, var(--brand-strong), var(--ink-muted) 30%);
    font-weight: 700;
    margin-right: 2px;
}

.filter-chip-field::after {
    content: ":";
    margin-left: 1px;
}

.filter-chip-value {
    color: var(--brand-strong);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-chip-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.filter-chip-close:hover {
    background: color-mix(in oklch, var(--brand-strong), transparent 80%);
}

.filter-chip-clear-all {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    padding: 4px 8px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.filter-chip-clear-all:hover {
    color: var(--ink);
}

.mud-drawer .mud-navmenu {
    padding: 0 8px 18px;
}

.mud-drawer .mud-nav-link {
    border-radius: var(--r-sm);
    color: var(--sidebar-muted) !important;
    font-size: 0.9rem;
    font-weight: 650;
    letter-spacing: 0;
    margin: 2px 0;
    min-height: 38px !important;
    padding: 7px 10px !important;
    transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}

.mud-drawer .mud-nav-link .mud-icon-root,
.mud-drawer .mud-nav-link .mud-nav-link-icon {
    color: currentColor !important;
    opacity: .9;
}

.mud-drawer .mud-nav-link:hover {
    background: oklch(100% 0 0 / 7%) !important;
    color: var(--sidebar-fg) !important;
}

.mud-drawer .mud-nav-link.active,
.mud-drawer .mud-nav-link.mud-nav-link-active {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-fg) !important;
}

.mud-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
    font-size: 0.84rem;
    margin-left: 18px;
}

.page-header {
    background: color-mix(in oklch, var(--page), var(--surface) 60%) !important;
    border-bottom: 1px solid var(--line);
    padding: 14px 24px;
}

.page-header-crumbs {
    padding: 0 0 6px 0 !important;
    margin: 0 0 2px 0 !important;
}

.page-header-crumbs .mud-breadcrumb-item,
.page-header-crumbs .mud-breadcrumb-item .mud-typography {
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.page-header-crumbs .mud-breadcrumb-item a {
    color: var(--ink-soft);
    text-decoration: none;
}

.page-header-crumbs .mud-breadcrumb-item a:hover {
    color: var(--brand-strong);
    text-decoration: underline;
}

.page-header-crumbs .mud-breadcrumb-item.mud-disabled .mud-typography {
    color: var(--ink-muted);
    font-weight: 600;
}

.page-header-crumbs .mud-breadcrumb-separator {
    color: var(--ink-faint);
    margin: 0 6px;
}

.page-title,
.page-title-display {
    color: var(--ink) !important;
    font-family: var(--font-ui) !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
    line-height: var(--lh-tight);
}

.list-header {
    align-items: flex-end;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.list-header-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: var(--sp-2);
    margin-left: auto;
}

.options-mode-band,
.report-mode-band {
    align-items: center;
    background: color-mix(in oklch, var(--surface), var(--brand-wash) 42%);
    border: 1px solid var(--ledger-rule);
    border-radius: var(--r-md);
    display: flex;
    gap: var(--sp-4);
    justify-content: space-between;
    margin-bottom: var(--sp-4);
    padding: 16px 18px;
}

.options-mode-title,
.report-mode-title {
    color: var(--ink) !important;
    font-family: var(--font-display) !important;
    font-weight: 860 !important;
}

.options-mode-toggle,
.report-mode-toggle {
    flex: 0 0 auto;
}

/* Detail-page action bar: wrap to the next line instead of clipping when the
   row is too wide for the viewport (keeps the primary action reachable). */
.page-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: var(--sp-2);
}

.stat-card,
.table-card,
.report-metric,
.feature-block,
.feature-card,
.highlight-item,
.plan-card,
.auth-card {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-1);
}

.stat-card {
    min-height: 112px;
    padding: 18px;
    transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 180ms var(--ease-out);
}

.stat-card:hover {
    background: var(--surface-raised) !important;
    border-color: color-mix(in oklch, var(--brand), var(--line) 58%) !important;
    box-shadow: var(--shadow-2) !important;
    transform: none !important;
}

.stat-icon-wrap {
    align-items: center;
    border-radius: var(--r-sm);
    display: flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.stat-icon-wrap--lg {
    height: 46px;
    width: 46px;
}

.stat-label {
    color: var(--ink-muted) !important;
    font-size: var(--fs-2) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.stat-value {
    color: var(--ink) !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
    line-height: var(--lh-tight);
}

.stat-hint {
    color: var(--ink-soft) !important;
    font-size: var(--fs-1) !important;
}

.table-card {
    overflow: hidden;
    width: 100%;
}

.table-card > .d-flex.align-center {
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-4) !important;
}

.mud-table,
.mud-data-grid {
    background: var(--surface) !important;
}

.mud-table-cell,
.mud-data-grid .mud-table-cell {
    border-bottom-color: var(--line-soft) !important;
    color: var(--ink);
    font-size: var(--fs-3);
}

.mud-table-head .mud-table-cell {
    background: var(--surface-tint) !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--ink-muted) !important;
    font-size: var(--fs-2);
    font-weight: 760;
}

.mud-table-row:hover > .mud-table-cell {
    background: var(--brand-wash) !important;
}

.selected {
    background-color: var(--brand-soft) !important;
}

.selected > td,
.selected > td .mud-input {
    color: var(--ink) !important;
}

.mud-button-root {
    border-radius: var(--r-sm) !important;
    box-shadow: none !important;
    font-family: var(--font-ui) !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.mud-button-filled.mud-button-filled-primary {
    background: var(--brand) !important;
    color: var(--brand-contrast) !important;
}

.mud-button-filled.mud-button-filled-primary:hover {
    background: var(--brand-strong) !important;
}

.mud-button-outlined.mud-button-outlined-primary {
    border-color: color-mix(in oklch, var(--brand), var(--line) 25%) !important;
    color: var(--brand-strong) !important;
}

.mud-button-text.mud-button-text-primary,
.mud-link,
.mud-link:hover {
    color: var(--brand-strong) !important;
}

.mud-input-outlined-border {
    border-radius: var(--r-sm) !important;
}

.mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--ink-soft) !important;
}

.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--brand) !important;
}

.mud-input-label.mud-focused {
    color: var(--brand-strong) !important;
}

.mud-chip {
    border-radius: var(--r-pill) !important;
    font-size: var(--fs-1);
    font-weight: 760;
    letter-spacing: 0;
    text-transform: none;
}

.mud-tabs .mud-tab {
    color: var(--ink-muted) !important;
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    min-height: 42px !important;
    text-transform: none !important;
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--brand-strong) !important;
}

.mud-tabs .mud-tab-slider {
    background: var(--brand) !important;
}

.mud-tabs-tabbar.mud-tabs-tabbar-primary,
.mud-tabs-tabbar.mud-tabs-tabbar-secondary,
.mud-tabs-tabbar.mud-tabs-tabbar-success,
.mud-tabs-tabbar.mud-tabs-tabbar-info,
.mud-tabs-tabbar.mud-tabs-tabbar-warning,
.mud-tabs-tabbar.mud-tabs-tabbar-error,
.mud-tabs-tabbar.mud-tabs-tabbar-dark {
    background-color: transparent !important;
    border-bottom: 1px solid var(--line);
    color: var(--ink) !important;
}

.mud-dialog {
    background: var(--surface) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-2) !important;
    overflow: hidden;
}

.mud-dialog .mud-dialog-title {
    background: var(--surface-tint);
    border-bottom: 1px solid var(--line);
    color: var(--ink) !important;
    font-size: var(--fs-5) !important;
    font-weight: 760 !important;
    letter-spacing: 0;
    padding: 20px 26px 12px !important;
}

.mud-dialog .mud-dialog-content {
    color: var(--ink);
    padding: 22px 26px !important;
}

.mud-dialog .mud-dialog-actions,
.mud-message-box .mud-dialog-actions {
    background: var(--surface-tint);
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: 14px 22px 18px !important;
}

.mud-snackbar {
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-2) !important;
    font-family: var(--font-ui) !important;
}

.mud-alert {
    border: 1px solid transparent;
    border-radius: var(--r-md) !important;
    font-family: var(--font-ui) !important;
}

.mud-alert.mud-alert-filled-info,
.mud-alert.mud-alert-text-info {
    background: var(--info-soft) !important;
    color: var(--info) !important;
}

.mud-alert.mud-alert-filled-success,
.mud-alert.mud-alert-text-success {
    background: var(--ok-soft) !important;
    color: var(--ok) !important;
}

.mud-alert.mud-alert-filled-warning,
.mud-alert.mud-alert-text-warning {
    background: var(--warn-soft) !important;
    color: var(--warn) !important;
}

.mud-alert.mud-alert-filled-error,
.mud-alert.mud-alert-text-error {
    background: var(--bad-soft) !important;
    color: var(--bad) !important;
}

.house-hero {
    background:
        linear-gradient(135deg, var(--surface) 0%, var(--brand-wash) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    overflow: hidden;
    padding: 30px 34px;
}

.house-hero-eyebrow,
.public-eyebrow,
.public-section-eyebrow {
    color: var(--brand-strong);
    font-size: var(--fs-2);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.house-hero-headline {
    color: var(--ink);
    font-size: var(--fs-7);
    font-weight: 780;
    letter-spacing: 0;
    line-height: var(--lh-tight);
    margin-top: 4px;
}

.house-hero-sub {
    color: var(--ink-muted);
    max-width: 68ch;
}

.house-hero-stat {
    align-items: baseline;
    align-self: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    display: inline-flex;
    gap: 10px;
    margin-top: var(--sp-2);
    padding: 14px 16px;
}

.house-hero-stat-value {
    color: var(--brand-strong);
    font-size: var(--fs-7);
    font-weight: 780;
    line-height: 1;
}

.house-hero-stat-label {
    color: var(--ink-muted);
    font-size: var(--fs-2);
    max-width: 20ch;
}

.house-section-title {
    color: var(--ink);
    font-size: var(--fs-4);
    font-weight: 760;
    margin: var(--sp-5) 0 var(--sp-3);
}

.house-section-title--lead {
    margin-top: var(--sp-7);
}

.stat-card--signal {
    min-height: 124px;
}

.records-strip {
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--sp-5);
    overflow: hidden;
}

.records-strip-label {
    align-items: center;
    background: var(--surface-tint);
    border-right: 1px solid var(--line);
    color: var(--ink-muted);
    display: flex;
    font-size: var(--fs-1);
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0 var(--sp-4);
    text-transform: uppercase;
}

.records-strip-item {
    align-items: baseline;
    border-right: 1px solid var(--line-soft);
    color: inherit;
    display: flex;
    flex: 1 1 0;
    gap: 10px;
    min-width: 140px;
    padding: 14px var(--sp-4);
    text-decoration: none;
    transition: background 160ms var(--ease-out);
}

.records-strip-item:last-child {
    border-right: none;
}

.records-strip-item:hover {
    background: var(--brand-wash);
}

.records-strip-value {
    color: var(--ink);
    font-size: var(--fs-5);
    font-weight: 780;
    line-height: 1;
}

.records-strip-name {
    color: var(--ink-muted);
    font-size: var(--fs-2);
}

@media (max-width: 599px) {
    .records-strip {
        flex-direction: column;
    }

    .records-strip-label {
        border-bottom: 1px solid var(--line);
        border-right: none;
        padding: 10px var(--sp-4);
    }

    .records-strip-item {
        border-bottom: 1px solid var(--line-soft);
        border-right: none;
    }

    .records-strip-item:last-child {
        border-bottom: none;
    }
}

.public-shell {
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-ui);
    min-height: 100dvh;
}

.public-header {
    background: color-mix(in oklch, var(--surface), var(--page) 30%);
    border-bottom: 1px solid var(--line);
}

.public-header-inner {
    align-items: center;
    display: flex;
    gap: var(--sp-4);
    justify-content: space-between;
    padding: 16px 0;
}

.public-brand {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.public-brand-mark,
.auth-card-mark {
    display: block;
    flex: 0 0 auto;
}

.public-brand-mark {
    height: 30px;
    width: 30px;
}

.public-brand-name {
    color: var(--ink);
    font-size: var(--fs-4);
    font-weight: 780;
}

.public-nav {
    align-items: center;
    display: flex;
    gap: var(--sp-1);
}

.public-hero {
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--brand-wash), var(--surface) 60%), var(--page));
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.public-hero-inner {
    margin: 0 auto;
    max-width: 760px;
    padding: 76px 0 68px;
    text-align: center;
}

.public-headline {
    color: var(--ink);
    font-size: 3rem;
    font-weight: 820;
    letter-spacing: 0;
    line-height: 1.04;
    margin: 12px 0 18px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.public-headline em {
    color: var(--brand-strong);
    font-style: normal;
}

.public-lede {
    color: var(--ink-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 auto 28px;
    max-width: 65ch;
}

.public-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
}

.public-section {
    padding: 72px 0;
}

.public-section--alt {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
}

.public-section-eyebrow,
.public-section-title,
.public-section-sub {
    text-align: center;
}

.public-section-title {
    color: var(--ink);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: var(--lh-tight);
    margin: 8px 0 12px;
}

.public-section-sub {
    color: var(--ink-muted);
    font-size: var(--fs-4);
    margin: 0 auto var(--sp-6);
    max-width: 65ch;
}

.feature-block,
.feature-card {
    height: 100%;
    padding: 26px;
    transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.feature-block:hover,
.feature-card:hover,
.highlight-item:hover {
    border-color: color-mix(in oklch, var(--brand), var(--line) 58%) !important;
    box-shadow: var(--shadow-2);
}

.feature-block-mark,
.feature-card-mark,
.highlight-item-mark {
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
}

.feature-block-mark,
.feature-card-mark {
    height: 46px;
    margin-bottom: var(--sp-4);
    width: 46px;
}

.feature-block-title,
.feature-card-title,
.plan-name {
    color: var(--ink);
    font-size: var(--fs-5);
    font-weight: 760;
    letter-spacing: 0;
    line-height: var(--lh-tight);
    margin: 0 0 8px;
}

.feature-block-body,
.feature-card-body,
.plan-tagline {
    color: var(--ink-muted);
    margin: 0 0 var(--sp-4);
}

.feature-block-list {
    display: grid;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.feature-block-list li {
    align-items: flex-start;
    color: var(--ink);
    display: flex;
    font-size: var(--fs-2);
    gap: 9px;
}

.feature-block-list li::before {
    background: var(--brand);
    border-radius: 50%;
    content: "";
    flex: 0 0 auto;
    height: 5px;
    margin-top: 8px;
    width: 5px;
}

.highlight-row {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.highlight-item {
    align-items: flex-start;
    display: flex;
    gap: var(--sp-3);
    padding: 14px 16px;
    transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.highlight-item-mark {
    background: var(--brand-soft);
    color: var(--brand-strong);
    flex: 0 0 auto;
    height: 32px;
    width: 32px;
}

.highlight-item-title {
    color: var(--ink);
    display: block;
    font-size: var(--fs-3);
    font-weight: 720;
    line-height: 1.25;
}

.highlight-item-sub {
    color: var(--ink-muted);
    display: block;
    font-size: var(--fs-2);
    line-height: 1.4;
    margin-top: 3px;
}

.plan-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px;
}

.plan-card--featured {
    border-color: var(--brand) !important;
    box-shadow: var(--shadow-2);
    position: relative;
}

.plan-price-row {
    align-items: baseline;
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.plan-price {
    color: var(--ink);
    font-size: 2.75rem;
    font-weight: 820;
    line-height: 1;
}

.plan-price-period,
.plan-price-note {
    color: var(--ink-muted);
}

.plan-price-note {
    display: block;
    font-size: var(--fs-2);
    margin-bottom: var(--sp-5);
}

.plan-feature {
    align-items: center;
    color: var(--ink);
    display: flex;
    gap: 10px;
    padding: 6px 0;
}

.plan-feature .mud-icon-root {
    color: var(--ok);
    font-size: 1.2rem;
}

.public-footer {
    background: var(--surface-tint);
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    padding: 30px 0;
}

.public-footer-inner,
.public-footer-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
}

.public-footer-links a {
    color: var(--ink-muted) !important;
    text-decoration: none;
}

.auth-shell {
    align-items: center;
    background:
        linear-gradient(145deg, var(--brand-wash), var(--page) 44%, var(--accent-soft));
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 63px);
    padding: 36px 20px;
}

.auth-card {
    max-width: 440px;
    overflow: hidden;
    width: 100%;
}

.auth-card--wide {
    max-width: 780px;
}

.auth-card-head {
    background: var(--surface-tint);
    border-bottom: 1px solid var(--line);
    padding: 32px 34px 20px;
    text-align: center;
}

.auth-card-mark {
    height: 48px;
    margin: 0 auto 14px;
    width: 48px;
}

.auth-card-title {
    color: var(--ink);
    font-size: var(--fs-6);
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 4px;
}

.auth-card-sub {
    color: var(--ink-muted);
    margin: 0;
}

.auth-card-body {
    padding: 26px 34px 34px;
}

.auth-fieldset {
    background: var(--surface-tint);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin: 0 0 var(--sp-5);
    padding: 18px 16px 4px;
}

.auth-fieldset legend {
    color: var(--ink);
    font-size: var(--fs-2);
    font-weight: 760;
    padding: 0 8px;
}

.auth-footer-links {
    color: var(--ink-muted);
    font-size: var(--fs-2);
    margin-top: var(--sp-2);
    text-align: center;
}

.app-footer a {
    color: inherit;
    text-decoration: none;
}

.app-footer a:hover,
.app-footer a:focus-visible {
    color: var(--brand-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-mode-switch {
    color: var(--ink-muted);
    margin-bottom: var(--sp-3);
}

.auth-submit-button {
    min-height: 50px !important;
}

.app-footer {
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: var(--fs-1);
    font-weight: 650;
    padding: var(--sp-4) var(--sp-5);
    text-align: center;
}

@media (max-width: 959px) {
    .house-hero-stat {
        align-self: flex-start;
    }
}

@media (max-width: 599px) {
    .options-mode-band,
    .report-mode-band {
        align-items: stretch;
        flex-direction: column;
    }

    .options-mode-toggle,
    .report-mode-toggle,
    .report-mode-toggle .mud-toggle-group-button,
    .options-mode-toggle .mud-toggle-group-button {
        width: 100%;
    }

    .mud-appbar .mud-toolbar {
        padding-left: 6px;
        padding-right: 8px;
    }

    .page-header {
        padding: 10px 12px;
    }

    .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .list-header {
        align-items: stretch;
        flex-wrap: wrap;
        gap: var(--sp-3);
        margin-bottom: var(--sp-4);
    }

    .list-header > div:first-child {
        flex: 1 1 100%;
        min-width: 0;
    }

    .list-header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-left: 0;
        width: 100%;
    }

    .list-header-actions .mud-button-root {
        flex: 0 0 auto;
    }

    .house-hero {
        padding: 22px 20px;
    }

    .house-hero-headline {
        font-size: var(--fs-6);
    }

    .house-hero-stat {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .house-hero-stat-value {
        font-size: var(--fs-7);
    }

    .stat-card {
        padding: 12px;
    }

    .stat-card:hover {
        box-shadow: var(--shadow-1) !important;
    }

    .stat-icon-wrap--lg {
        height: 40px;
        width: 40px;
    }

    .table-card .mud-table-container,
    .table-card .mud-data-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-card .mud-table-toolbar {
        align-items: stretch !important;
        flex-wrap: wrap;
        height: auto !important;
        min-height: 0 !important;
    }

    .table-card .mud-table-toolbar .mud-spacer {
        display: none;
    }

    .table-card .mud-table-toolbar .mud-input-control,
    .table-card .mud-table-toolbar .mud-toggle-group {
        width: 100%;
    }

    .public-hero-inner {
        padding: 54px 0 48px;
    }

    .public-headline {
        font-size: 1.9rem;
        line-height: 1.12;
    }

    .public-lede,
    .public-section-sub {
        font-size: 1rem;
    }

    .public-section {
        padding: 54px 0;
    }

    .public-section-title {
        font-size: 1.6rem;
    }

    .feature-block,
    .plan-card {
        padding: 22px;
    }

    .auth-card-head,
    .auth-card-body {
        padding-left: 22px;
        padding-right: 22px;
    }
}

/* -------------------------------------------------------------------------
   2026 staged workbench overhaul.
   This layer intentionally sits after the legacy system and MudBlazor
   overrides. It turns the approved direction into reusable app-wide rules.
------------------------------------------------------------------------- */

:root {
    --font-ui: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif;
    --font-nav: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif;
    --fs-1: 0.75rem;
    --fs-2: 0.8125rem;
    --fs-3: 0.9375rem;
    --fs-4: 1.0625rem;
    --fs-5: 1.25rem;
    --fs-6: 1.5625rem;
    --fs-7: 2rem;
    --lh-tight: 1.14;
    --lh-body: 1.48;
    --r-xs: 3px;
    --r-sm: 5px;
    --r-md: 7px;
    --r-lg: 9px;
    --shadow-1: 0 1px 0 var(--line), 0 1px 2px oklch(25% 0.02 120 / 7%);
    --shadow-2: 0 1px 0 var(--line), 0 18px 38px oklch(24% 0.02 120 / 12%);
    --shadow-inset: inset 0 1px 0 oklch(100% 0 0 / 64%);
}

html,
body {
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--line-soft), transparent 56%) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(180deg, var(--page), color-mix(in oklch, var(--page), var(--page-deep) 45%));
    color: var(--ink);
    font-family: var(--font-ui);
    font-feature-settings: "kern";
    font-kerning: normal;
}

.mud-layout,
.mud-main-content {
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--line-soft), transparent 62%) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--page) !important;
}

.app-shell.mud-layout {
    --app-shell-bar-height: 64px;
}

.app-shell .mud-appbar {
    background: var(--topbar-bg) !important;
    border-bottom: 1px solid var(--ledger-rule);
    box-shadow: var(--shadow-inset) !important;
    min-height: var(--app-shell-bar-height);
}

.app-shell .mud-appbar .mud-toolbar {
    min-height: var(--app-shell-bar-height);
    padding-left: 10px;
    padding-right: 14px;
}

.app-brand-block {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    color: var(--ink);
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: 34px minmax(0, 1fr);
    min-width: 0;
    padding: 6px 8px;
    text-align: left;
}

.app-brand-block:hover {
    background: var(--surface-tint);
}

.app-brand-block:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.app-brand-mark {
    display: block;
    flex: 0 0 auto;
    height: 34px;
    width: 34px;
}

.app-brand-name {
    color: var(--ink);
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-4);
    font-weight: 860;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-brand-kicker {
    color: var(--ink-soft);
    display: block;
    font-size: var(--fs-1);
    font-weight: 760;
    letter-spacing: 0.035em;
    line-height: 1.1;
    text-transform: uppercase;
}

.topbar-primary-action.mud-button-root {
    min-height: 38px;
}

.app-shell .mud-drawer {
    background:
        linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2)) !important;
    border-right: 1px solid oklch(100% 0 0 / 10%) !important;
    box-shadow: inset -1px 0 0 oklch(0% 0 0 / 18%);
    color: var(--sidebar-fg) !important;
}

.house-nav-section {
    color: color-mix(in oklch, var(--sidebar-muted), var(--sidebar-fg) 16%) !important;
    font-family: var(--font-nav) !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.075em !important;
    padding-left: 10px !important;
}

.mud-drawer .mud-navmenu {
    padding: 0 10px 20px;
}

.mud-drawer .mud-nav-link {
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--sidebar-muted) !important;
    font-family: var(--font-nav);
    font-size: 0.88rem;
    font-weight: 780;
    letter-spacing: 0.004em;
    margin: 3px 0;
    min-height: 39px !important;
    padding: 8px 10px !important;
}

.mud-drawer .mud-nav-link:hover {
    background: oklch(100% 0 0 / 7%) !important;
    border-color: oklch(100% 0 0 / 9%);
    color: var(--sidebar-fg) !important;
}

.mud-drawer .mud-nav-link.active,
.mud-drawer .mud-nav-link.mud-nav-link-active {
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--sidebar-active-bg), white 3%), var(--sidebar-active-bg)) !important;
    border-color: color-mix(in oklch, var(--sidebar-active-bg), white 18%);
    box-shadow: inset 0 -2px 0 oklch(0% 0 0 / 16%);
    color: var(--sidebar-active-fg) !important;
}

.mud-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
    font-size: 0.825rem;
    margin-left: 16px;
    min-height: 34px !important;
}

.page-header {
    background:
        linear-gradient(180deg, var(--surface), var(--surface-tint)) !important;
    border-bottom: 1px solid var(--ledger-rule);
    box-shadow: var(--shadow-inset);
    padding: 16px 24px;
}

.page-title,
.page-title-display,
.house-hero-headline,
.public-headline,
.auth-card-title {
    color: var(--ink) !important;
    font-family: var(--font-display) !important;
    font-weight: 860 !important;
    letter-spacing: 0 !important;
}

.page-title {
    font-size: var(--fs-6) !important;
    line-height: var(--lh-tight);
}

.list-header {
    align-items: flex-end;
    border-bottom: 1px solid var(--ledger-rule);
    gap: var(--sp-5);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
}

.list-header > div:first-child {
    min-width: 0;
}

.list-header .mud-typography-body2 {
    color: var(--ink-muted) !important;
}

.stat-card,
.table-card,
.report-metric,
.feature-block,
.feature-card,
.highlight-item,
.plan-card,
.auth-card {
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--surface), white 18%), var(--surface)) !important;
    border: 1px solid var(--ledger-rule) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-1), var(--shadow-inset);
}

.stat-card {
    min-height: 108px;
    padding: 16px;
}

.stat-card:hover,
.feature-block:hover,
.feature-card:hover,
.highlight-item:hover {
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--surface-raised), white 14%), var(--surface-raised)) !important;
    border-color: color-mix(in oklch, var(--brand), var(--line) 54%) !important;
    box-shadow: var(--shadow-2), var(--shadow-inset) !important;
}

.stat-icon-wrap {
    border: 1px solid color-mix(in oklch, currentColor, transparent 72%);
    border-radius: var(--r-sm);
    box-shadow: inset 0 -2px 0 oklch(0% 0 0 / 5%);
}

.stat-icon-wrap--lg {
    height: 44px;
    width: 44px;
}

.stat-label {
    color: var(--ink-muted) !important;
    font-family: var(--font-nav) !important;
    font-size: var(--fs-1) !important;
    font-weight: 900 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
}

.stat-value {
    color: var(--ink) !important;
    font-family: var(--font-display) !important;
    font-weight: 870 !important;
    letter-spacing: 0 !important;
}

.stat-hint {
    color: var(--ink-soft) !important;
    font-weight: 650 !important;
}

.table-card {
    overflow: hidden;
}

.table-card > .d-flex.align-center,
.mud-table-toolbar {
    background: var(--surface-tint);
    border-bottom: 1px solid var(--ledger-rule);
}

.mud-table,
.mud-data-grid,
.mud-table-container {
    background: var(--surface) !important;
}

.mud-table-cell,
.mud-data-grid .mud-table-cell {
    border-bottom-color: var(--line-soft) !important;
    color: var(--ink);
    font-size: var(--fs-3);
}

.mud-table-head .mud-table-cell,
.mud-data-grid-header .mud-table-cell {
    background: color-mix(in oklch, var(--surface-tint), var(--surface-mark) 38%) !important;
    border-bottom: 1px solid var(--ledger-rule) !important;
    color: var(--ink-muted) !important;
    font-family: var(--font-nav);
    font-size: var(--fs-2);
    font-weight: 880;
    letter-spacing: 0.025em;
}

.mud-table-row:hover > .mud-table-cell,
.mud-data-grid .mud-table-row:hover > .mud-table-cell {
    background: var(--brand-wash) !important;
}

.mud-data-grid .mud-selected,
.selected {
    background-color: var(--brand-soft) !important;
}

.mud-button-root {
    border-radius: var(--r-sm) !important;
    box-shadow: none !important;
    font-family: var(--font-nav) !important;
    font-weight: 850 !important;
    letter-spacing: 0.006em !important;
    min-height: 38px;
    text-transform: none !important;
}

.mud-button-filled.mud-button-filled-primary {
    background-color: var(--brand) !important;
    background-image: none !important;
    border: 1px solid color-mix(in oklch, var(--brand), black 12%) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--brand), white 14%),
        inset 0 -2px 0 color-mix(in oklch, var(--brand-strong), black 10%) !important;
    color: var(--brand-contrast) !important;
}

.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--brand-strong) !important;
    background-image: none !important;
    border-color: color-mix(in oklch, var(--brand-strong), black 16%) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--brand-strong), white 10%),
        inset 0 -2px 0 color-mix(in oklch, var(--brand-strong), black 18%) !important;
}

.mud-button-outlined {
    border-width: 1px !important;
}

.mud-button-outlined.mud-button-outlined-primary {
    background-color: color-mix(in oklch, var(--surface), var(--brand-wash) 35%) !important;
    background-image: none !important;
    border-color: color-mix(in oklch, var(--brand), var(--line) 35%) !important;
    color: var(--brand-strong) !important;
}

.mud-button-outlined.mud-button-outlined-primary:hover {
    background-color: var(--brand-wash) !important;
    border-color: color-mix(in oklch, var(--brand), var(--line) 15%) !important;
}

.mud-button-text.mud-button-text-primary:hover {
    background-color: var(--brand-wash) !important;
}

.mud-button-text.mud-button-text-primary,
.mud-link,
.mud-link:hover {
    color: var(--brand-strong) !important;
    font-weight: 800;
}

.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.mud-input-outlined-border {
    background: transparent;
    border-color: var(--line) !important;
    border-radius: var(--r-sm) !important;
}

.mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: color-mix(in oklch, var(--ink-soft), var(--line) 30%) !important;
}

.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--brand) !important;
    border-width: 1px !important;
}

.mud-input-label {
    color: var(--ink-muted) !important;
    font-weight: 680 !important;
}

.mud-input-label.mud-focused {
    color: var(--brand-strong) !important;
}

.mud-switch {
    --mud-ripple-opacity: 0;
}

.mud-switch .mud-switch-track {
    background-color: color-mix(in oklch, var(--ink-muted), var(--line) 58%) !important;
    opacity: 0.34 !important;
    transition:
        background-color 140ms var(--ease-out),
        opacity 140ms var(--ease-out) !important;
}

.mud-switch .mud-switch-base {
    background-color: transparent !important;
    transition:
        transform 140ms var(--ease-out),
        color 140ms var(--ease-out) !important;
}

.mud-switch .mud-switch-base:hover,
.mud-switch .mud-switch-base:active,
.mud-switch .mud-switch-base:focus {
    background-color: transparent !important;
}

.mud-switch .mud-switch-base.mud-checked + .mud-switch-track {
    background-color: var(--brand) !important;
    opacity: 0.44 !important;
}

.mud-switch:has(.mud-switch-input:focus-visible) .mud-switch-span {
    border-radius: var(--r-pill);
    outline: 2px solid var(--focus-ring-soft);
    outline-offset: 1px;
}

.mud-switch .mud-ripple-switch::after {
    background-image: none !important;
    opacity: 0 !important;
    transition: none !important;
}

.mud-chip {
    border-radius: var(--r-xs) !important;
    font-family: var(--font-nav) !important;
    font-size: var(--fs-1) !important;
    font-weight: 880 !important;
    letter-spacing: 0.025em;
}

.mud-tabs .mud-tab {
    color: var(--ink-muted) !important;
    font-family: var(--font-nav) !important;
    font-weight: 820 !important;
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--brand-strong) !important;
}

.mud-tabs .mud-tab-slider {
    background: var(--accent) !important;
    height: 3px;
}

.mud-dialog {
    background: var(--surface) !important;
    border: 1px solid var(--ledger-rule);
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-2) !important;
}

.mud-dialog .mud-dialog-title {
    background: var(--surface-tint);
    border-bottom: 1px solid var(--ledger-rule);
    color: var(--ink) !important;
    font-family: var(--font-display) !important;
    font-weight: 860 !important;
}

.mud-dialog .mud-dialog-actions,
.mud-message-box .mud-dialog-actions {
    background: var(--surface-tint);
    border-top: 1px solid var(--ledger-rule);
}

.mud-alert {
    border: 1px solid color-mix(in oklch, currentColor, transparent 76%) !important;
    border-radius: var(--r-sm) !important;
}

.house-hero {
    background:
        linear-gradient(135deg, var(--surface) 0%, var(--brand-wash) 62%, color-mix(in oklch, var(--accent-soft), var(--surface) 52%) 100%);
    border: 1px solid var(--ledger-rule);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1), var(--shadow-inset);
    padding: 28px 32px;
    position: relative;
}

.house-hero::after {
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--line), transparent 56%) 1px, transparent 1px) 0 0 / 24px 24px;
    content: "";
    inset: 0;
    opacity: .32;
    pointer-events: none;
    position: absolute;
}

.house-hero > * {
    position: relative;
    z-index: 1;
}

.house-hero-eyebrow,
.public-eyebrow,
.public-section-eyebrow {
    color: var(--brand-strong);
    font-family: var(--font-nav);
    font-size: var(--fs-2);
    font-weight: 900;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.house-hero-sub {
    color: var(--ink-muted);
    font-size: var(--fs-4);
    max-width: 72ch;
}

.house-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.house-hero-stat {
    background: color-mix(in oklch, var(--surface), var(--accent-soft) 18%);
    border: 1px solid var(--ledger-rule);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-inset);
}

.house-hero-stat-value {
    color: var(--brand-strong);
    font-family: var(--font-display);
    font-weight: 900;
}

.house-section-title {
    color: var(--ink);
    font-family: var(--font-nav);
    font-size: var(--fs-3);
    font-weight: 900;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.dashboard-board .mud-grid {
    align-items: stretch;
}

.dashboard-board .mud-list {
    background: var(--surface) !important;
}

.dashboard-board .mud-list-item {
    transition: background 160ms var(--ease-out);
}

.dashboard-board .mud-list-item:hover {
    background: var(--brand-wash);
}

.public-shell {
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--line-soft), transparent 58%) 1px, transparent 1px) 0 0 / 34px 34px,
        var(--page);
}

.public-header {
    background: color-mix(in oklch, var(--surface), var(--page) 18%);
    border-bottom: 1px solid var(--ledger-rule);
    box-shadow: var(--shadow-inset);
}

.public-brand-mark,
.auth-card-mark {
    color: var(--brand);
}

.public-brand-name {
    font-family: var(--font-display);
    font-weight: 880;
}

.public-hero {
    background:
        radial-gradient(circle at 14% 12%, color-mix(in oklch, var(--accent-soft), transparent 32%), transparent 28%),
        linear-gradient(180deg, var(--surface), var(--page));
    border-bottom: 1px solid var(--ledger-rule);
}

.public-hero-inner {
    max-width: 820px;
}

.public-headline {
    color: var(--ink);
    font-size: 3.7rem;
    line-height: 0.98;
}

.public-headline em {
    color: var(--brand-strong);
}

.public-lede,
.public-section-sub {
    color: var(--ink-muted);
}

.public-section--alt {
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--surface), var(--surface-tint) 30%), var(--surface));
    border-color: var(--ledger-rule);
}

.feature-block-mark,
.feature-card-mark,
.highlight-item-mark {
    border: 1px solid color-mix(in oklch, currentColor, transparent 80%);
    border-radius: var(--r-sm);
}

.feature-block-list li::before {
    background: var(--accent);
    border-radius: 1px;
    height: 6px;
    width: 6px;
}

.plan-card--featured {
    border-color: color-mix(in oklch, var(--brand), var(--line) 25%) !important;
}

.auth-shell {
    background:
        radial-gradient(circle at 15% 12%, color-mix(in oklch, var(--accent-soft), transparent 18%), transparent 28%),
        linear-gradient(140deg, var(--brand-wash), var(--page) 48%, color-mix(in oklch, var(--surface-tint), var(--accent-soft) 35%));
}

/* Keep header, sign-in card, and footer all within one viewport: the page is a
   flex column exactly one screen tall and the shell flexes to fill the gap,
   instead of the shell claiming 100vh on its own and pushing the footer below. */
.auth-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.auth-page .auth-shell {
    flex: 1 1 auto;
    min-height: 0;
}

.auth-card {
    border-radius: var(--r-lg) !important;
}

.auth-card-head {
    background:
        linear-gradient(180deg, var(--surface), var(--surface-tint));
    border-bottom: 1px solid var(--ledger-rule);
}

.auth-fieldset {
    background: color-mix(in oklch, var(--surface-tint), var(--surface) 40%);
    border-color: var(--ledger-rule);
    border-radius: var(--r-md);
}

.auth-fieldset legend {
    color: var(--ink);
    font-family: var(--font-nav);
    font-weight: 850;
}

.app-footer {
    background: color-mix(in oklch, var(--surface-tint), var(--page) 30%);
    border-top: 1px solid var(--ledger-rule);
    color: var(--ink-soft);
    font-family: var(--font-nav);
}

.page-load-error {
    background: var(--bad-soft) !important;
    border: 1px solid color-mix(in oklch, var(--bad), var(--bad-soft) 45%) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-1), var(--shadow-inset);
    text-align: center;
}

/* -------------------------------------------------------------------------
   Shared section title for transaction ledgers.
------------------------------------------------------------------------- */

.invoice-section-title {
    color: var(--ink) !important;
    font-family: var(--font-nav, var(--font-ui)) !important;
    font-weight: 880 !important;
    letter-spacing: 0 !important;
}

.select-create-new {
    display: inline-flex;
    align-items: center;
    color: var(--mud-palette-primary);
    font-weight: 500;
}

/* -------------------------------------------------------------------------
   Transaction workbench: shared invoice/quote/credit/purchase ledgers.
------------------------------------------------------------------------- */

.transaction-create-container {
    container-type: inline-size;
    min-width: 0;
}

.transaction-assembly-shell {
    display: grid;
    gap: var(--sp-4);
    min-width: 0;
}

.transaction-setup-band {
    min-width: 0;
    padding: var(--sp-5);
}

.transaction-ledger-card.table-card {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.transaction-ledger-toolbar {
    align-items: center;
    background: var(--surface-tint);
    border-bottom: 1px solid var(--ledger-rule);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: space-between;
    min-width: 0;
    padding: var(--sp-4) var(--sp-5);
}

.transaction-ledger-title {
    min-width: 220px;
}

.transaction-ledger-actions {
    align-items: center;
    display: flex;
    flex: 1 1 460px;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: flex-end;
    min-width: 0;
}

.transaction-catalog-search {
    flex: 1 1 320px;
    max-width: 620px;
    min-width: 280px;
}

.transaction-ledger-card .mud-data-grid,
.transaction-ledger-card .mud-table-container {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.transaction-ledger-card .mud-table {
    table-layout: fixed;
    width: 100%;
}

.transaction-ledger-card .mud-table-cell {
    overflow-wrap: anywhere;
}

.transaction-ledger-card .mud-table-head .mud-table-cell,
.transaction-ledger-card .mud-data-grid-header .mud-table-cell,
.transaction-ledger-card thead .mud-table-cell {
    overflow-wrap: normal;
    white-space: nowrap;
}

.transaction-ledger-card .mud-table-cell:has(.transaction-line-name) {
    width: 10.5rem;
}

.transaction-ledger-card .mud-table-cell:nth-child(2) {
    width: auto;
}

.transaction-ledger-card .mud-table-cell:nth-child(3),
.transaction-ledger-card .mud-table-cell:nth-child(5) {
    width: 4.75rem;
}

.transaction-ledger-card .mud-table-cell:nth-child(4) {
    width: 6.75rem;
}

.transaction-ledger-card .mud-table-cell:nth-child(6) {
    width: 7.75rem;
}

.transaction-ledger-card .mud-table-cell:last-child {
    width: 3.25rem;
}

.transaction-line-name {
    align-items: center;
    display: flex;
    gap: var(--sp-2);
    min-width: 0;
}

.transaction-line-name > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-totals-bar {
    align-items: center;
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--surface), var(--surface-tint) 24%), var(--surface));
    border-top: 1px solid var(--ledger-rule);
    bottom: 0;
    box-shadow: 0 -1px 2px oklch(25% 0.025 145 / 5%);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: flex-end;
    padding: var(--sp-4) var(--sp-5);
    position: sticky;
    z-index: 5;
}

.transaction-totals-note {
    color: var(--ink-muted);
    flex: 1 1 260px;
}

.transaction-total-lines {
    display: grid;
    font-variant-numeric: tabular-nums;
    gap: var(--sp-1);
    min-width: min(100%, 300px);
}

.transaction-total-lines > div {
    align-items: center;
    display: flex;
    gap: var(--sp-5);
    justify-content: space-between;
}

.transaction-total-main {
    border-top: 1px solid var(--line-soft);
    margin-top: var(--sp-1);
    padding-top: var(--sp-2);
}

.transaction-total-main .mud-typography {
    color: var(--ink) !important;
    font-family: var(--font-display, var(--font-ui)) !important;
    font-weight: 900 !important;
}

.transaction-save-button {
    min-width: 148px;
}

@media (max-width: 959px) {
    .topbar-primary-action {
        display: none !important;
    }

    .invoice-section-head,
    .invoice-totals-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .invoice-checkpoints {
        justify-content: flex-start;
    }
}

@media (max-width: 599px) {
    .app-shell.mud-layout {
        --app-shell-bar-height: 58px;
    }

    .app-brand-block {
        gap: 0;
        grid-template-columns: 30px;
        padding: 4px 6px;
    }

    .app-brand-mark {
        height: 30px;
        width: 30px;
    }

    .app-brand-block > span:last-child {
        display: none;
    }

    .page-header,
    .list-header {
        padding-left: 12px;
        padding-right: 12px;
    }

    .page-header > .mud-container > .d-flex {
        flex-wrap: wrap;
        gap: var(--sp-2) var(--sp-3);
        row-gap: var(--sp-3);
    }

    .page-header .page-header-actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-left: 0;
    }

    .page-header .page-header-actions > .mud-button-root,
    .page-header .page-header-actions > .mud-menu > .mud-button-root,
    .page-header .page-header-actions > .mud-menu {
        flex: 0 0 auto;
    }

    .page-header .mud-spacer {
        display: none;
    }

    .list-header {
        align-items: stretch;
        gap: var(--sp-3);
    }

    .public-headline {
        font-size: 2.15rem;
    }

    .house-hero {
        padding: 22px 18px;
    }

    .stat-label {
        letter-spacing: 0.035em !important;
    }

    .transaction-setup-band {
        padding: var(--sp-4);
    }

    .transaction-ledger-toolbar {
        align-items: stretch;
        padding: var(--sp-4);
    }

    .transaction-ledger-actions,
    .transaction-catalog-search,
    .transaction-save-button {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    .transaction-totals-bar {
        align-items: stretch;
        flex-direction: column;
        padding: var(--sp-4);
    }

    .transaction-ledger-card .mud-table-cell:has(.transaction-line-name),
    .transaction-ledger-card .mud-table-cell:nth-child(3),
    .transaction-ledger-card .mud-table-cell:nth-child(4),
    .transaction-ledger-card .mud-table-cell:nth-child(5),
    .transaction-ledger-card .mud-table-cell:nth-child(6),
    .transaction-ledger-card .mud-table-cell:last-child {
        width: auto;
    }
}

/* -------------------------------------------------------------------------
   Public docket surface: About and Pricing.
   Uses semantic HTML/CSS fragments instead of raster UI mockups.
------------------------------------------------------------------------- */

.public-shell--docket {
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--line-soft), transparent 54%) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(180deg, var(--surface), var(--page) 34%, color-mix(in oklch, var(--page), var(--page-deep) 34%));
}

.public-shell--docket .public-brand {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    color: inherit;
    font: inherit;
    padding: 4px 6px 4px 0;
    text-align: left;
}

.public-shell--docket .public-brand:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.public-hero--workbench,
.public-hero--pricing {
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--ledger-rule), transparent 52%) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(180deg, color-mix(in oklch, var(--surface), var(--brand-wash) 24%), var(--page));
    border-bottom: 1px solid var(--ledger-rule);
}

.public-hero-grid,
.pricing-hero-grid {
    align-items: center;
    display: grid;
    gap: clamp(32px, 6vw, 72px);
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, .88fr);
    min-height: 620px;
    padding: 64px 0;
}

.pricing-hero-grid {
    grid-template-columns: minmax(0, .96fr) minmax(320px, .72fr);
    min-height: 560px;
}

.public-hero-copy {
    max-width: 720px;
}

.public-hero-copy .public-headline,
.public-hero-copy .public-lede {
    margin-left: 0;
    text-align: left;
}

.public-hero-copy .public-headline {
    max-width: 12ch;
}

.public-hero-copy .public-lede {
    max-width: 62ch;
}

.public-cta-row--left {
    justify-content: flex-start;
}

.app-preview,
.price-docket,
.workflow-card,
.ledger-card,
.docket-list-item,
.included-register-row,
.closing-panel {
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--surface), var(--surface-tint) 22%), var(--surface));
    border: 1px solid var(--ledger-rule);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1), var(--shadow-inset);
}

.app-preview {
    align-self: stretch;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 390px;
    overflow: hidden;
}

.app-preview-toolbar {
    align-items: center;
    background: var(--surface-tint);
    border-bottom: 1px solid var(--ledger-rule);
    display: flex;
    gap: var(--sp-3);
    justify-content: space-between;
    padding: 16px;
}

.app-preview-toolbar strong {
    color: var(--ink);
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-5);
    font-weight: 860;
    line-height: 1.1;
}

.app-preview-eyebrow {
    color: var(--ink-muted);
    display: block;
    font-family: var(--font-nav);
    font-size: var(--fs-1);
    font-weight: 880;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.app-preview-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: flex-end;
}

.app-preview-search,
.app-preview-button {
    border: 1px solid var(--ledger-rule);
    border-radius: var(--r-sm);
    font-family: var(--font-nav);
    font-size: var(--fs-2);
    font-weight: 820;
    min-height: 34px;
    padding: 7px 11px;
}

.app-preview-search {
    background: var(--surface);
    color: var(--ink-soft);
    min-width: 142px;
}

.app-preview-button {
    background: var(--brand);
    color: var(--brand-contrast);
}

.app-preview-table {
    display: grid;
    overflow-x: auto;
}

.app-preview-row {
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-muted);
    display: grid;
    font-size: var(--fs-2);
    gap: 12px;
    grid-template-columns: 96px 92px minmax(150px, 1fr) 98px 98px;
    min-width: 620px;
    padding: 13px 16px;
}

.app-preview-row:last-child {
    border-bottom: 0;
}

.app-preview-row--head {
    background: color-mix(in oklch, var(--surface-tint), var(--surface-mark) 38%);
    color: var(--ink-muted);
    font-family: var(--font-nav);
    font-weight: 880;
}

.app-preview-row strong {
    color: var(--ink);
    font-weight: 850;
}

.app-preview-row mark {
    background: var(--surface-tint);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xs);
    color: var(--ink-muted);
    font-family: var(--font-nav);
    font-size: var(--fs-1);
    font-weight: 850;
    padding: 4px 7px;
}

.app-preview-row mark.is-sent {
    background: var(--info-soft);
    border-color: color-mix(in oklch, var(--info), var(--info-soft) 44%);
    color: var(--info);
}

.app-preview-row mark.is-accepted {
    background: var(--ok-soft);
    border-color: color-mix(in oklch, var(--ok), var(--ok-soft) 44%);
    color: var(--ok);
}

.price-docket-head,
.plan-card-topline {
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-muted);
    display: flex;
    font-family: var(--font-nav);
    font-size: var(--fs-1);
    font-weight: 880;
    justify-content: space-between;
    letter-spacing: 0.045em;
    margin-bottom: 14px;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.price-docket-head strong,
.plan-card-topline small {
    color: var(--brand-strong);
    font: inherit;
}

.docket-amount {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--fs-7);
    font-weight: 880;
    line-height: var(--lh-tight);
    margin-bottom: 18px;
}

.section-lead {
    margin: 0 auto var(--sp-6);
    max-width: 820px;
    text-align: center;
}

.section-lead--split {
    align-items: end;
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: minmax(0, .95fr) minmax(280px, .82fr);
    max-width: none;
    text-align: left;
}

.section-lead--split .public-section-title,
.section-lead--split .public-section-sub,
.section-lead--split .public-section-eyebrow {
    text-align: left;
}

.section-lead--split .public-section-sub {
    margin-bottom: 0;
}

.public-section--tight {
    padding-top: 58px;
}

.workflow-rail {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workflow-card {
    min-height: 220px;
    padding: 20px;
    position: relative;
}

.workflow-number {
    color: var(--ink-faint);
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-6);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 28px;
}

.workflow-icon {
    background: var(--brand-soft);
    border: 1px solid color-mix(in oklch, var(--brand), var(--line) 56%);
    border-radius: var(--r-sm);
    color: var(--brand-strong) !important;
    height: 38px !important;
    padding: 8px;
    position: absolute;
    right: 18px;
    top: 18px;
    width: 38px !important;
}

.workflow-card h3,
.ledger-card h3,
.included-register-row h3 {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--fs-5);
    font-weight: 860;
    line-height: var(--lh-tight);
    margin: 0 0 8px;
}

.workflow-card p,
.ledger-card p,
.included-register-row p {
    color: var(--ink-muted);
    margin: 0;
}

.module-ledger-grid {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.ledger-card {
    padding: 22px;
}

.ledger-card-head {
    align-items: flex-start;
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: 44px minmax(0, 1fr);
    margin-bottom: 18px;
}

.ledger-card-mark,
.included-register-icon {
    align-items: center;
    border: 1px solid color-mix(in oklch, currentColor, transparent 80%);
    border-radius: var(--r-sm);
    display: inline-flex;
    justify-content: center;
}

.ledger-card-mark {
    height: 44px;
    width: 44px;
}

.docket-list {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.docket-list-item {
    align-items: flex-start;
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 14px 16px;
}

.docket-list-item > .mud-icon-root {
    background: var(--brand-soft);
    border: 1px solid color-mix(in oklch, var(--brand), var(--line) 56%);
    border-radius: var(--r-sm);
    color: var(--brand-strong);
    height: 34px;
    padding: 7px;
    width: 34px;
}

.docket-list-item span {
    color: var(--ink);
    display: block;
    font-family: var(--font-nav);
    font-weight: 850;
    line-height: 1.2;
}

.docket-list-item p {
    color: var(--ink-muted);
    font-size: var(--fs-2);
    line-height: 1.42;
    margin: 4px 0 0;
}

.public-section--closing {
    padding-top: 0;
}

.closing-panel {
    padding: clamp(28px, 5vw, 44px);
    text-align: center;
}

.price-docket {
    padding: 24px;
}

.price-docket-main {
    display: grid;
    gap: 4px;
    margin: 24px 0;
}

.price-docket-main span {
    color: var(--ink-muted);
    font-family: var(--font-nav);
    font-weight: 820;
}

.price-docket-main strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 4.25rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: .95;
}

.price-docket-lines {
    border-top: 1px solid var(--line-soft);
    display: grid;
}

.price-docket-lines > div {
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
}

.price-docket-lines span {
    color: var(--ink-muted);
}

.price-docket-lines strong {
    color: var(--ink);
    font-weight: 850;
}

.pricing-ledger {
    align-items: stretch;
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plan-card--docket {
    padding: 28px;
}

.plan-card--docket .plan-card-topline {
    margin-bottom: 18px;
}

.plan-card--docket .plan-feature {
    border-top: 1px solid var(--line-soft);
    padding-top: 10px;
}

.plan-card--docket .plan-price-note + .plan-feature {
    border-top: 0;
    padding-top: 0;
}

.included-register {
    background: var(--surface);
    border: 1px solid var(--ledger-rule);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1), var(--shadow-inset);
    overflow: hidden;
}

.included-register-row {
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    box-shadow: none;
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 22px;
}

.included-register-row:last-child {
    border-bottom: 0;
}

.included-register-icon {
    height: 44px;
    width: 44px;
}

.included-register-row ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.included-register-row li {
    background: var(--surface-tint);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    color: var(--ink-muted);
    font-family: var(--font-nav);
    font-size: var(--fs-2);
    font-weight: 760;
    padding: 6px 9px;
}

@media (max-width: 959px) {
    .public-hero-grid,
    .pricing-hero-grid,
    .section-lead--split,
    .pricing-ledger {
        grid-template-columns: 1fr;
    }

    .public-hero-grid,
    .pricing-hero-grid {
        min-height: 0;
        padding: 54px 0;
    }

    .workflow-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .public-shell--docket .public-brand {
        max-width: 180px;
    }

    .public-hero-copy .public-headline {
        max-width: 100%;
    }

    .public-cta-row--left .mud-button-root,
    .public-cta-row .mud-button-root {
        flex: 1 1 100%;
    }

    .app-preview {
        min-height: 0;
    }

    .app-preview-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .app-preview-actions {
        justify-content: stretch;
    }

    .app-preview-search,
    .app-preview-button {
        flex: 1 1 auto;
    }

    .workflow-rail,
    .module-ledger-grid,
    .docket-list {
        grid-template-columns: 1fr;
    }

    .workflow-card {
        min-height: 0;
    }

    .price-docket-main strong {
        font-size: 3.1rem;
    }

    .included-register-row {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   Public quote portal.
   Anonymous customer review surface for bearer-link quotes.
------------------------------------------------------------------------- */

.quote-portal-shell {
    min-height: 100dvh;
}

.quote-portal-main {
    padding: clamp(28px, 5vw, 56px) 0 clamp(44px, 7vw, 76px);
}

.quote-portal-loading {
    padding-top: var(--sp-3);
}

.quote-portal-state {
    align-items: center;
    display: grid;
    gap: var(--sp-3);
    justify-items: center;
    margin: 48px auto;
    max-width: 560px;
    padding: clamp(28px, 5vw, 42px);
    text-align: center;
}

.quote-portal-state h1,
.quote-portal-hero h1,
.quote-portal-panel h2 {
    color: var(--ink);
    font-family: var(--font-display, var(--font-ui));
    font-weight: 880;
    letter-spacing: 0;
    line-height: var(--lh-tight);
    margin: 0;
}

.quote-portal-state p {
    color: var(--ink-muted);
    margin: 0;
    max-width: 56ch;
}

.quote-portal-hero {
    align-items: end;
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: var(--sp-4);
}

.quote-portal-hero h1 {
    font-size: clamp(2rem, 4vw, 3.15rem);
    margin-top: var(--sp-2);
}

.quote-portal-hero p {
    color: var(--ink-muted);
    font-size: var(--fs-4);
    margin: var(--sp-3) 0 0;
    max-width: 62ch;
}

.quote-portal-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: flex-end;
}

.quote-portal-meta {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: var(--sp-4);
}

.quote-portal-meta > div {
    border-right: 1px solid var(--line-soft);
    display: grid;
    gap: 3px;
    min-height: 78px;
    padding: 16px 18px;
}

.quote-portal-meta > div:last-child {
    border-right: 0;
}

.quote-portal-meta span,
.quote-portal-notes span,
.quote-portal-contact span,
.quote-portal-confirmation span {
    color: var(--ink-soft);
    font-family: var(--font-nav, var(--font-ui));
    font-size: var(--fs-2);
    font-weight: 820;
    letter-spacing: 0;
}

.quote-portal-meta strong {
    color: var(--ink);
    font-family: var(--font-display, var(--font-ui));
    font-size: var(--fs-4);
    font-weight: 860;
    overflow-wrap: anywhere;
}

.quote-portal-grid {
    align-items: start;
}

.quote-portal-ledger {
    min-width: 0;
}

.quote-portal-notes {
    background: color-mix(in oklch, var(--surface), var(--brand-wash) 48%);
    border-bottom: 1px solid var(--line-soft);
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-5);
}

.quote-portal-notes p {
    color: var(--ink-muted);
    margin: 0;
    white-space: pre-wrap;
}

.quote-portal-table-wrap {
    overflow-x: auto;
}

.quote-portal-table {
    background: var(--surface);
    border-collapse: collapse;
    min-width: 720px;
    width: 100%;
}

.quote-portal-table th,
.quote-portal-table td {
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    padding: 13px 16px;
    text-align: right;
    vertical-align: top;
}

.quote-portal-table th:first-child,
.quote-portal-table td:first-child {
    text-align: left;
    width: 44%;
}

.quote-portal-table th {
    background: var(--surface-tint);
    color: var(--ink-muted);
    font-family: var(--font-nav, var(--font-ui));
    font-size: var(--fs-2);
    font-weight: 860;
}

.quote-portal-table tbody tr:hover td {
    background: var(--brand-wash);
}

.quote-portal-code {
    background: var(--surface-tint);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xs);
    color: var(--ink-muted);
    display: inline-block;
    font-family: var(--font-nav, var(--font-ui));
    font-size: var(--fs-1);
    font-weight: 820;
    margin: 0 0 var(--sp-1);
    padding: 3px 6px;
}

.quote-portal-description {
    display: block;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.quote-portal-panel {
    display: grid;
    gap: var(--sp-4);
    padding: var(--sp-5);
    position: sticky;
    top: 18px;
}

.quote-portal-panel-head {
    align-items: start;
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: 38px minmax(0, 1fr);
}

.quote-portal-panel-head > .mud-icon-root {
    background: var(--brand-soft);
    border: 1px solid color-mix(in oklch, currentColor, transparent 78%);
    border-radius: var(--r-sm);
    height: 38px;
    padding: 8px;
    width: 38px;
}

.quote-portal-panel h2 {
    font-size: var(--fs-5);
}

.quote-portal-panel p {
    color: var(--ink-muted);
    margin: 4px 0 0;
}

.quote-portal-choice {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-portal-choice .mud-button-root {
    min-width: 0;
}

.quote-portal-confirmation {
    background: var(--surface-tint);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-4);
}

.quote-portal-confirmation strong {
    color: var(--ink);
    font-family: var(--font-display, var(--font-ui));
    font-size: var(--fs-5);
    font-weight: 860;
    overflow-wrap: anywhere;
}

.quote-portal-confirmation p {
    border-top: 1px solid var(--line-soft);
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    white-space: pre-wrap;
}

.quote-portal-contact {
    border-top: 1px solid var(--line-soft);
    display: grid;
    gap: var(--sp-1);
    padding-top: var(--sp-4);
}

.quote-portal-contact a {
    color: var(--brand-strong);
    font-weight: 760;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.quote-portal-contact a:hover {
    text-decoration: underline;
}

/* Portal supporting-files list (shared quote + client portal attachment view). */
.portal-attachments {
    display: grid;
    gap: var(--sp-2);
}

.portal-attachments-head {
    align-items: center;
    color: var(--ink-soft);
    display: flex;
    font-family: var(--font-nav, var(--font-ui));
    font-size: var(--fs-2);
    font-weight: 820;
    gap: var(--sp-1);
}

.portal-attachments-list {
    display: grid;
    gap: var(--sp-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.portal-attachments-item {
    align-items: center;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
}

.portal-attachments-icon {
    flex: 0 0 auto;
}

.portal-attachments-body {
    display: grid;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.portal-attachments-name {
    background: none;
    border: 0;
    color: var(--brand-strong);
    cursor: pointer;
    font: inherit;
    font-weight: 760;
    overflow-wrap: anywhere;
    padding: 0;
    text-align: left;
}

.portal-attachments-name:hover:not(:disabled) {
    text-decoration: underline;
}

.portal-attachments-name:disabled {
    cursor: default;
    opacity: 0.7;
}

.portal-attachments-desc {
    color: var(--ink-soft);
    font-size: var(--fs-2);
    overflow-wrap: anywhere;
}

.portal-attachments-meta {
    color: var(--ink-soft);
    display: grid;
    flex: 0 0 auto;
    font-size: var(--fs-2);
    gap: 2px;
    justify-items: end;
    text-align: right;
    white-space: nowrap;
}

.portal-attachments-detail-row > td {
    background: color-mix(in oklch, var(--surface), var(--brand-wash) 48%);
    padding: var(--sp-3) var(--sp-4);
}

@media (max-width: 959px) {
    .quote-portal-hero {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .quote-portal-actions {
        justify-content: flex-start;
    }

    .quote-portal-panel {
        position: static;
    }
}

@media (max-width: 599px) {
    .quote-portal-main {
        padding-top: var(--sp-5);
    }

    .quote-portal-hero h1 {
        font-size: 2rem;
    }

    .quote-portal-meta > div {
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .quote-portal-meta > div:last-child {
        border-bottom: 0;
    }

    .quote-portal-choice {
        grid-template-columns: 1fr;
    }
}

/* ----- Client portal (full customer portal) ----- */
.portal-summary-grid {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.portal-summary-card {
    display: grid;
    gap: 6px;
    padding: 18px 20px;
}

.portal-summary-card .stat-value {
    font-family: var(--font-display, var(--font-ui));
    font-size: var(--fs-6);
    font-weight: 860;
}

.portal-summary-card .stat-value-sm {
    color: var(--ink);
    font-family: var(--font-display, var(--font-ui));
    font-size: var(--fs-4);
    font-weight: 820;
    line-height: var(--lh-tight);
}

.portal-summary-card--alert {
    border-color: color-mix(in oklch, var(--mud-palette-error, #b3261e), transparent 55%);
}

.portal-summary-card--alert .stat-value {
    color: var(--mud-palette-error, #b3261e);
}

.portal-tabs {
    padding: var(--sp-2) var(--sp-3) var(--sp-4);
}

.portal-list-table {
    min-width: 640px;
}

.portal-list-table th:first-child,
.portal-list-table td:first-child {
    width: auto;
}

.portal-list-table th:last-child,
.portal-list-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

.portal-row-actions {
    align-items: center;
    display: flex;
    gap: var(--sp-1);
    justify-content: flex-end;
}

.portal-statement {
    padding: var(--sp-2) var(--sp-1) var(--sp-3);
}

.portal-statement-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.portal-statement-controls .mud-input-control {
    max-width: 220px;
}

@media (max-width: 599px) {
    .portal-statement-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .portal-statement-controls .mud-input-control {
        max-width: none;
    }
}

/* ───────── Two-factor authentication ───────── */

.two-factor-scan {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
}

.two-factor-qr {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    flex: 0 1 auto;
    line-height: 0;
    padding: var(--sp-3);
    width: 220px;
    max-width: 100%;
    box-sizing: border-box;
}

.two-factor-qr svg {
    display: block;
    width: 100%;
    height: auto;
    shape-rendering: crispEdges;
}

.two-factor-manual {
    flex: 1 1 220px;
    min-width: 220px;
}

.two-factor-secret {
    background: var(--surface-tint);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    display: inline-block;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    padding: var(--sp-2) var(--sp-3);
    user-select: all;
    word-break: break-all;
}

.recovery-codes-grid {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recovery-code {
    background: var(--surface-tint);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 1rem;
    letter-spacing: 0.08em;
    padding: var(--sp-2) var(--sp-3);
    text-align: center;
    user-select: all;
}

@media (max-width: 599px) {
    .recovery-codes-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Notification centre ───────────────────────────────────────────── */

/* Bell dropdown panel */
.notification-popover .mud-list-item {
    padding: 0;
}

.notification-panel {
    width: 360px;
    max-width: 92vw;
    font-family: var(--font-ui);
}

.notification-panel-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 10px 8px 10px 16px;
}

.notification-panel-title {
    color: var(--ink);
    font-weight: 800;
    font-size: 0.95rem;
}

.notification-panel-foot {
    padding: 4px 8px;
}

.notification-viewall.mud-menu-item {
    border-radius: var(--r-sm);
    color: var(--brand);
    justify-content: center;
    padding: 10px 16px;
}

.notification-viewall.mud-menu-item .mud-menu-item-text {
    color: var(--brand);
    font-weight: 700;
    text-align: center;
}

.notification-list {
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

/* A single notification row — used in the dropdown */
.notification-item {
    align-items: flex-start;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    text-align: left;
    width: 100%;
}

.notification-item:hover {
    background: var(--brand-wash);
}

.notification-item--unread {
    background: color-mix(in oklch, var(--brand-wash), white 30%);
}

.notification-item-icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

.notification-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notification-item-title {
    color: var(--ink);
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.25;
}

.notification-item-message {
    color: var(--ink-muted);
    font-size: 0.8rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-item-time {
    color: var(--ink-soft);
    font-size: 0.72rem;
    margin-top: 2px;
}

/* Unread dot indicator */
.notification-item-dot {
    align-self: center;
    background: oklch(55% 0.17 25);
    border-radius: 50%;
    flex: 0 0 auto;
    height: 8px;
    width: 8px;
}

.notification-empty {
    align-items: center;
    color: var(--ink-soft);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px 16px;
    text-align: center;
}

.notification-empty--page {
    padding: 56px 16px;
}

/* Full notifications page list */
.notification-page-list {
    padding: 0;
}

.notification-row {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    display: flex;
    gap: 14px;
    padding: 14px 18px;
    text-align: left;
    width: 100%;
}

.notification-row:hover {
    background: var(--brand-wash);
}

.notification-row--unread {
    background: color-mix(in oklch, var(--brand-wash), white 30%);
}

.notification-row-icon {
    flex: 0 0 auto;
}

.notification-row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.notification-row-title {
    color: var(--ink);
    font-weight: 700;
    font-size: 0.9rem;
}

.notification-row-message {
    color: var(--ink-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.notification-row-time {
    color: var(--ink-soft);
    flex: 0 0 auto;
    font-size: 0.76rem;
    white-space: nowrap;
}

/* On narrow screens the bell sits near the right edge, so the popover's
   anchored left position pushes the panel off-screen. Pin it to the viewport
   gutters and let the panel fill the available width. */
@media (max-width: 599px) {
    .notification-popover {
        left: 12px !important;
        right: 12px !important;
        max-width: none !important;
        width: auto !important;
    }

    .notification-panel {
        width: 100%;
        max-width: none;
    }
}

/* ── Data import ─────────────────────────────────────────────────────────
   Numbered migration steps: a fixed step badge, a flexible title/description
   column, and a right-aligned action cluster that wraps under the text on
   narrow screens so the upload/template buttons stay reachable. */
.import-entity-head {
    align-items: flex-start;
    display: flex;
    gap: var(--sp-4);
}

.import-step {
    align-items: center;
    background: var(--brand);
    border-radius: var(--r-pill);
    color: var(--brand-contrast);
    display: flex;
    flex: 0 0 auto;
    font-family: var(--font-ui);
    font-size: var(--fs-3);
    font-weight: 760;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.import-entity-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.import-entity-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.import-error-table th {
    color: var(--ink-soft);
}

@media (max-width: 599px) {
    .import-entity-head {
        flex-wrap: wrap;
    }

    .import-entity-actions {
        margin-left: 44px;
    }
}