:root {
    --canvas: #f6f7f9;
    --surface: #fff;
    --subtle: #f0f2f5;
    --ink: #171a21;
    --muted: #626a78;
    --border: #d9dee7;
    --brand: #2448a8;
    --brand-hover: #193887;
    --success: #147a50;
    --warning: #9a5a00;
    --danger: #b4232c;
    --purple: #6741a5;
    --shadow: 0 1px 2px #1720330b, 0 5px 18px #17203308
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font: 14px/1.5 Inter, system-ui, sans-serif
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px
}

.auth-card {
    width: min(100%, 430px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 32px
}

.subscription-choice {
    width: min(100%, 980px)
}

.subscription-choice .pricing-grid {
    margin-top: 24px
}

.pricing-card.selected {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent), var(--shadow)
}

.subscription-rails {
    margin: 20px 0 0;
    font-size: 12px
}

.auth-brand {
    padding: 0 0 28px
}

.auth-form {
    display: grid;
    gap: 16px;
    margin-top: 24px
}

.auth-form label {
    display: grid;
    gap: 6px;
    font-weight: 600
}

.auth-form input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 10px 12px;
    color: var(--ink);
    background: var(--surface)
}

.auth-submit {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    padding: 11px 16px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.auth-submit:hover {
    background: var(--brand-strong, #193a8d);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    margin: 22px 0 12px
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    height: 1px;
    background: var(--border);
    flex: 1
}

.auth-oauth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.auth-status {
    min-height: 24px;
    color: var(--muted);
    margin: 16px 0 0
}

.auth-switch,
.auth-security {
    text-align: center
}

.profile-button {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 20px;
    background: #10152266
}

.settings-modal {
    width: min(100%, 460px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 20px 60px #10152233;
    padding: 24px
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 22px
}

.settings-modal > label {
    display: grid;
    gap: 6px;
    margin-top: 16px;
    font-weight: 600
}

.settings-modal select {
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 9px 10px;
    background: var(--surface);
    color: var(--ink)
}

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

.record-actions,
.modal-actions {
    display: flex;
    align-items: center;
    gap: 8px
}

.client-form {
    display: grid;
    gap: 14px
}

.client-form > .muted {
    margin: -6px 0 0;
    font-size: 12px
}

.client-form label {
    display: grid;
    gap: 6px;
    font-weight: 600
}

.client-form input,
.client-form select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 10px 12px;
    color: var(--ink);
    background: var(--surface)
}

.form-section {
    display: grid;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--border)
}

.form-section:first-of-type {
    padding-top: 0;
    border-top: 0
}

.form-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline
}

.form-section-heading strong {
    color: var(--ink);
    font-size: 13px
}

.form-section-heading span {
    color: var(--muted);
    font-size: 11px
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
}

.form-row:has(label:nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

[data-person-fields][hidden],
[data-organization-fields][hidden] {
    display: none
}

.settings-check {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px
}

.settings-note {
    font-size: 12px;
    margin-top: 20px
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px
}

.duplicate-review-warning {
    display: grid;
    gap: 8px;
    margin-top: 4px;
    padding: 14px 16px;
    border: 1px solid #edcf96;
    border-left: 4px solid var(--warning);
    border-radius: 8px;
    background: #fffaf1;
    color: #714807;
}

.duplicate-review-warning strong {
    color: inherit
}

.duplicate-review-warning p {
    margin: 0
}

.duplicate-review-warning ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 20px
}

.duplicate-review-warning li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline
}

.duplicate-review-warning li span {
    color: var(--muted);
    font-size: 12px;
    text-align: right
}

.duplicate-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px
}

.duplicate-review-warning .secondary-button {
    margin-top: 4px
}

[data-theme="dark"] .duplicate-review-warning {
    border-color: #80652f;
    background: #302818;
    color: #f5d58e
}

[data-density="compact"] .nav-item {
    min-height: 32px;
    padding-top: 6px;
    padding-bottom: 6px
}

[data-theme="dark"] {
    --canvas: #151922;
    --surface: #202532;
    --subtle: #293142;
    --ink: #f0f3f8;
    --muted: #aeb7c6;
    --border: #3b4658
}

[data-theme="dark"] .sidebar {
    background: var(--surface)
}

@media (prefers-reduced-motion: reduce), [data-reduced-motion="true"] * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important
}

.auth-security {
    color: var(--muted);
    font-size: 12px;
    margin-top: 22px
}

button,
a {
    font: inherit
}

a {
    color: var(--brand);
    text-decoration: none
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -50px;
    background: var(--ink);
    color: #fff;
    padding: 10px 14px;
    z-index: 5
}

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

.app-shell {
    display: flex;
    min-height: 100vh
}

.sidebar {
    width: 248px;
    background: #fff;
    border-right: 1px solid var(--border);
    padding: 20px 12px 16px;
    display: flex;
    flex-direction: column;
    flex: none
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 22px;
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -.04em
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--brand);
    color: #fff;
    font-weight: 700
}

.tenant-switcher {
    display: flex;
    align-items: center;
    gap: 9px;
    width: calc(100% - 8px);
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px;
    margin: 0 4px 20px;
    cursor: pointer
}

.tenant-switcher:hover,
.tenant-switcher:focus-visible {
    border-color: var(--brand);
    outline: none
}

.tenant-switcher[aria-busy="true"] {
    cursor: progress;
    opacity: .75
}

.tenant-switcher-wrap {
    position: relative
}

.tenant-switcher-panel {
    position: absolute;
    top: 48px;
    left: 4px;
    z-index: 10;
    width: min(340px, calc(100vw - 32px));
    max-height: min(70vh, 520px);
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 14px 40px #17203320;
    padding: 14px
}

.tenant-switcher-panel[hidden] {
    display: none
}

.tenant-switcher-panel[aria-busy="true"] {
    cursor: progress
}

.tenant-switcher-panel-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border)
}

.tenant-switcher-panel-header .eyebrow,
.tenant-switcher-panel-header h2 {
    margin: 0
}

.tenant-switcher-panel-header h2 {
    font-size: 16px
}

.tenant-switcher-close {
    flex: none;
    min-width: 30px;
    min-height: 30px;
    margin: -5px -5px 0 0;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted)
}

.tenant-switcher-close:hover,
.tenant-switcher-close:focus-visible {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--ink);
    outline: none
}

.tenant-current-workspace {
    display: grid;
    gap: 2px;
    margin: 12px 0 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--subtle)
}

.tenant-current-workspace .eyebrow {
    margin: 0;
    font-size: 10px
}

.tenant-current-workspace strong,
.tenant-current-workspace small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.tenant-current-workspace strong {
    font-size: 13px
}

.tenant-current-workspace small {
    color: var(--muted);
    font-size: 11px
}

.tenant-switcher-status {
    min-height: 17px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    text-align: right
}

.tenant-switcher-feedback {
    margin: 7px 0 0;
    color: var(--success);
    font-size: 12px
}

.tenant-switcher-feedback:empty {
    display: none
}

.tenant-membership-list {
    display: grid;
    gap: 5px;
    list-style: none;
    margin: 10px 0 0;
    padding: 0
}

.tenant-membership-option {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer
}

.tenant-membership-option:hover:not(:disabled),
.tenant-membership-option:focus-visible:not(:disabled) {
    background: var(--subtle);
    border-color: var(--border);
    outline: none
}

.tenant-membership-option:disabled {
    cursor: default;
    background: #edf1ff
}

.tenant-membership-option[aria-current="true"] {
    border-color: #c4d0f6;
    background: #edf1ff;
    color: var(--brand)
}

.tenant-membership-option[aria-current="true"] .tenant-membership-state {
    color: var(--brand);
    font-weight: 700
}

.tenant-membership-option:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent);
    outline-offset: 1px
}

.tenant-membership-copy {
    min-width: 0;
    flex: 1
}

.tenant-membership-copy strong,
.tenant-membership-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.tenant-membership-copy strong {
    font-size: 12px
}

.tenant-membership-copy small {
    color: var(--muted);
    font-size: 10px
}

.tenant-membership-state {
    flex: none;
    color: var(--muted);
    font-size: 10px
}

.tenant-switcher-error,
.tenant-switcher-empty {
    display: grid;
    gap: 8px;
    padding: 14px 4px 2px
}

.tenant-switcher-error p,
.tenant-switcher-empty p,
.tenant-switcher-inline-error {
    margin: 0
}

.tenant-switcher-error .secondary-button {
    justify-self: start
}

.tenant-switcher-inline-error {
    margin-top: 10px;
    color: var(--danger);
    font-size: 12px
}

.tenant-switcher-error [data-tenant-memberships-retry] {
    margin-top: 2px
}

.tenant-avatar,
.profile-avatar {
    display: grid;
    place-items: center;
    flex: none;
    background: #dce5ff;
    color: var(--brand);
    font-weight: 650;
    border-radius: 7px;
    width: 30px;
    height: 30px
}

.tenant-switcher strong {
    display: block;
    font-size: 12px
}

.tenant-switcher small {
    display: block;
    color: var(--muted);
    font-size: 10px
}

.chevron {
    margin-left: auto;
    color: var(--muted)
}

.nav-list {
    display: grid;
    gap: 3px
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    color: var(--muted);
    border-radius: 7px;
    min-height: 38px
}

.nav-item:hover,
.nav-item:focus-visible {
    background: var(--subtle);
    color: var(--ink)
}

.nav-item.active {
    background: #edf1ff;
    color: var(--brand);
    font-weight: 600
}

.nav-icon {
    width: 18px;
    text-align: center;
    font-size: 16px
}

.nav-count {
    margin-left: auto;
    background: #e5eaff;
    color: var(--brand);
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 11px
}

.sidebar-bottom {
    margin-top: auto
}

.security-note {
    margin: 17px 4px 0;
    border-top: 1px solid var(--border);
    padding: 17px 8px 0;
    color: var(--success);
    font-size: 12px;
    display: flex;
    gap: 8px
}

.security-note small {
    color: var(--muted);
    font-size: 10px
}

.main {
    min-width: 0;
    flex: 1
}

.topbar {
    height: 56px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px
}

.breadcrumb {
    color: var(--muted);
    font-size: 12px
}

.breadcrumb span {
    padding: 0 8px;
    color: #adb4c0
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 14px
}

.icon-button,
.notification-button,
.more-button {
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer
}

.icon-button span {
    font-size: 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 3px
}

.create-button {
    border: 0;
    border-radius: 6px;
    background: var(--brand);
    color: #fff;
    padding: 8px 12px;
    cursor: pointer
}

.create-button:hover {
    background: var(--brand-hover)
}

.caret {
    margin-left: 8px;
    opacity: .8
}

.notification-button {
    position: relative;
    font-size: 21px
}

.notification-button b {
    position: absolute;
    top: -3px;
    right: -5px;
    background: var(--danger);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 9px;
    font-size: 9px;
    padding: 0 4px
}

.profile {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 12px
}

.profile-avatar {
    width: 28px;
    height: 28px;
    background: #e5e8ee;
    color: #3f4654;
    font-size: 10px
}

.content {
    max-width: 1500px;
    margin: 0 auto;
    padding: 30px 32px
}

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 25px
}

.eyebrow {
    color: var(--muted);
    font-size: 11px;
    margin: 0 0 4px
}

.page-heading h1 {
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -.03em;
    margin: 0 0 5px
}

.muted,
.panel-subtitle {
    color: var(--muted);
    margin: 0
}

.quiet-button {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 6px;
    padding: 8px 11px;
    color: var(--muted);
    cursor: pointer
}

.risk-banner {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: #fffaf1;
    border: 1px solid #edcf96;
    border-left: 3px solid #d99018;
    border-radius: 7px;
    padding: 13px 15px;
    margin-bottom: 20px;
    color: #714807
}

.risk-icon {
    display: grid;
    place-items: center;
    background: #f8e4b9;
    color: #9a5a00;
    border-radius: 50%;
    font-weight: 700;
    width: 19px;
    height: 19px;
    flex: none
}

.risk-banner strong {
    display: block;
    font-size: 12px
}

.risk-banner span:not(.risk-icon) {
    display: block;
    font-size: 12px
}

.risk-banner a {
    margin-left: auto;
    white-space: nowrap;
    font-size: 12px;
    color: #8a5300;
    font-weight: 600
}

.close-banner {
    border: 0;
    background: transparent;
    color: #9a5a00;
    font-size: 17px;
    cursor: pointer
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px
}

.metric-card,
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: var(--shadow)
}

.workspace-records {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0
}

.workspace-record {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px
}

.workspace-record span {
    color: var(--muted);
    font-size: 12px;
    text-align: right
}

.workspace-spotlight {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
    padding: 24px 28px;
    border: 1px solid #cfd9ff;
    border-radius: 12px;
    background: linear-gradient(120deg, #eef2ff, #f8faff 62%, #ffffff);
}

.documents-spotlight {
    border-color: #d9d0f7;
    background: linear-gradient(120deg, #f3efff, #fbfaff 62%, #ffffff);
}

.spotlight-copy {
    max-width: 620px
}

.spotlight-kicker {
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.spotlight-copy h2 {
    margin: 6px 0;
    font-size: 22px;
    letter-spacing: -.03em
}

.spotlight-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 13px
}

.spotlight-stat {
    min-width: 120px;
    padding-left: 24px;
    border-left: 1px solid #cfd9ff
}

.spotlight-stat strong {
    display: block;
    color: var(--brand);
    font-size: 32px;
    letter-spacing: -.06em
}

.spotlight-stat span {
    color: var(--muted);
    font-size: 11px
}

.workspace-search input {
    width: min(240px, 42vw);
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
}

.record-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0
}

.record-main > div {
    min-width: 0
}

.record-icon.client {
    background: #e5f5ed;
    color: var(--success);
    font-size: 12px;
    font-weight: 700
}

.status-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--subtle);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
}

.empty-state {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 36px 20px;
    text-align: center
}

.empty-state h3 {
    margin: 2px 0 0;
    font-size: 16px
}

.empty-state p {
    margin: 0 0 8px
}

.empty-state-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: #eef3ff;
    color: var(--brand);
    font-size: 22px
}

.searchable-record[hidden] {
    display: none
}

.secondary-button {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--brand);
    cursor: pointer;
    padding: 8px 12px
}

.secondary-button:disabled {
    cursor: wait;
    opacity: .65
}

.metric-card {
    padding: 16px 17px
}

.metric-top {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.metric-label {
    font-weight: 600;
    font-size: 12px
}

.metric-icon {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 7px;
    font-weight: 700
}

.metric-icon.blue {
    background: #e8edff;
    color: var(--brand)
}

.metric-icon.purple {
    background: #f0eaff;
    color: var(--purple)
}

.metric-icon.amber {
    background: #fff2d8;
    color: var(--warning)
}

.metric-icon.green {
    background: #e2f5eb;
    color: var(--success)
}

.metric-value {
    font-size: 27px;
    letter-spacing: -.04em;
    display: block;
    margin-top: 10px
}

.metric-note {
    font-size: 11px;
    color: var(--muted)
}

.dashboard-grid,
.lower-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px
}

.lower-grid {
    grid-template-columns: 1.1fr .9fr
}

.panel {
    padding: 20px
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px
}

.panel h2 {
    font-size: 14px;
    margin: 0 0 2px;
    letter-spacing: -.01em
}

.panel-header a {
    font-size: 11px;
    font-weight: 600
}

.agenda-list,
.work-list,
.activity-list {
    display: grid
}

.agenda-item,
.work-item,
.activity-item,
.recent-record {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #edf0f4;
    padding: 13px 0
}

.agenda-item:first-child,
.work-item:first-child,
.activity-item:first-child {
    border-top: 0;
    padding-top: 2px
}

.agenda-item time,
.activity-item time {
    width: 42px;
    color: var(--muted);
    font: 11px ui-monospace, monospace
}

.agenda-line {
    width: 3px;
    height: 31px;
    border-radius: 3px
}

.blue-line {
    background: var(--brand)
}

.purple-line {
    background: var(--purple)
}

.amber-line {
    background: #d99018
}

.agenda-item strong,
.work-item strong,
.activity-item strong,
.recent-record strong {
    display: block;
    font-size: 12px
}

.agenda-item p,
.work-item p,
.activity-item p,
.recent-record p {
    color: var(--muted);
    font-size: 11px;
    margin: 2px 0 0
}

.agenda-tag,
.priority,
.provenance {
    margin-left: auto;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 4px;
    background: #eef3ff;
    color: var(--brand);
    white-space: nowrap
}

.agenda-tag.review {
    background: #f2ecff;
    color: var(--purple)
}

.agenda-tag.deadline,
.priority.high {
    background: #fff0e8;
    color: var(--danger)
}

.priority.medium {
    background: #fff4d9;
    color: var(--warning)
}

.priority.low {
    background: #e5f5ed;
    color: var(--success)
}

.add-link {
    border: 0;
    background: transparent;
    color: var(--brand);
    font-size: 11px;
    font-weight: 600;
    padding: 12px 0 0;
    cursor: pointer
}

.check {
    width: 17px;
    height: 17px;
    border: 1px solid #bdc5d1;
    border-radius: 50%;
    flex: none
}

.work-item>div {
    min-width: 0
}

.activity-item time {
    width: 48px
}

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9aa9ca;
    flex: none
}

.provenance {
    background: var(--subtle);
    color: var(--muted)
}

.record-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    flex: none
}

.record-icon.doc {
    background: #e8edff;
    color: var(--brand)
}

.record-icon.matter {
    background: #f0eaff;
    color: var(--purple)
}

.record-icon.template {
    background: #e2f5eb;
    color: var(--success)
}

.record-arrow {
    margin-left: auto;
    color: var(--brand)
}

.footer {
    display: flex;
    justify-content: space-between;
    color: #7a8290;
    font-size: 10px;
    padding: 4px 2px 20px
}

.footer a {
    color: inherit
}

.footer kbd {
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 4px
}

.mobile-menu {
    display: none;
    border: 0;
    background: transparent;
    font-size: 20px
}

.main a:focus-visible,
.main button:focus-visible,
.nav-item:focus-visible {
    outline: 3px solid #9ab1ff;
    outline-offset: 2px
}

.update-notice {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(480px, calc(100vw - 30px));
    padding: 12px 14px;
    background: var(--ink);
    color: #fff;
    border-radius: 7px;
    box-shadow: 0 8px 24px #17203340
}

.update-button {
    border: 1px solid #fff8;
    border-radius: 5px;
    padding: 6px 9px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap
}

@media(prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important
    }

    .landing-shell { min-height: 100vh; background: var(--canvas); color: var(--ink); }
    .landing-header, .landing-hero, .landing-section, .principles, .landing-footer { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
    .landing-header { min-height: 72px; display: flex; align-items: center; gap: 32px; border-bottom: 1px solid var(--border); }
    .landing-header nav { display: flex; gap: 24px; flex: 1; }
    .landing-header a, .landing-footer a { color: inherit; text-decoration: none; }
    .landing-actions { display: flex; align-items: center; gap: 12px; }
    .landing-hero { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; padding-top: 96px; padding-bottom: 96px; }
    .landing-hero h1 { max-width: 760px; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.02; margin: 12px 0 24px; }
    .landing-lede { max-width: 640px; font-size: 1.2rem; color: var(--muted); }
    .workflow-illustration { align-self: center; display: grid; gap: 16px; padding: 32px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
    .workflow-illustration span { padding: 18px; border-left: 4px solid var(--brand); background: var(--subtle); }
    .principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-bottom: 72px; }
    .principles div, .feature-grid article, .pricing-card { padding: 24px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
    .principles span { display: block; margin-top: 8px; color: var(--muted); }
    .landing-section { padding-top: 72px; padding-bottom: 72px; }
    .landing-section h2 { max-width: 760px; font-size: 2.2rem; margin: 8px 0 28px; }
    .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
    .segmented-controls { display: flex; flex-wrap: wrap; gap: 4px; }
    .segmented-controls button { min-height: 44px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); padding: 0 14px; cursor: pointer; }
    .segmented-controls button[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
    .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; min-height: 190px; }
    .pricing-card { display: flex; flex-direction: column; gap: 12px; }
    .pricing-card strong { font-size: 2rem; }
    .pricing-card .primary-button { margin-top: auto; text-align: center; text-decoration: none; }
    .security-band { max-width: none; background: #20252f; color: #fff; }
    .security-band > * { max-width: 1152px; margin-left: auto; margin-right: auto; }
    .landing-footer { display: flex; justify-content: space-between; padding-top: 32px; padding-bottom: 32px; color: var(--muted); }
    @media (max-width: 767px) {
        .landing-header nav { display: none; }
        .landing-header { justify-content: space-between; }
        .landing-hero, .feature-grid, .pricing-grid, .principles { grid-template-columns: 1fr; }
        .landing-hero { padding-top: 56px; padding-bottom: 56px; }
        .section-heading, .landing-footer { align-items: flex-start; flex-direction: column; }
    }
}

@media(max-width:1050px) {
    .sidebar {
        width: 72px;
        padding-left: 8px;
        padding-right: 8px
    }

    .brand {
        padding-left: 14px
    }

    .brand-name,
    .tenant-switcher strong,
    .tenant-switcher small,
    .tenant-switcher .chevron,
    .nav-item>span:not(.nav-icon),
    .security-note {
        display: none
    }

    .tenant-switcher {
        justify-content: center;
        padding: 8px
    }

    .nav-item {
        justify-content: center;
        padding: 9px
    }

    .nav-count {
        display: none
    }

    .content {
        padding: 25px 22px
    }
}

@media(max-width:700px) {
    .sidebar {
        display: none
    }

    /* Public marketing page */
    .landing-shell { min-height: 100vh; background: var(--canvas); color: var(--ink); }
    .landing-header, .landing-hero, .landing-section, .principles, .landing-footer { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
    .landing-header { min-height: 78px; display: flex; align-items: center; gap: 32px; border-bottom: 1px solid var(--border); }
    .landing-header nav { display: flex; gap: 26px; flex: 1; }
    .landing-header a, .landing-footer a { color: inherit; text-decoration: none; }
    .landing-header nav a, .landing-footer { color: var(--muted); }
    .landing-header nav a:hover, .landing-footer a:hover { color: var(--ink); }
    .landing-actions { display: flex; align-items: center; gap: 12px; }
    .landing-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; padding-top: 92px; padding-bottom: 92px; align-items: center; }
    .landing-hero h1 { max-width: 760px; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -.055em; margin: 14px 0 26px; }
    .landing-lede { max-width: 620px; font-size: 1.18rem; line-height: 1.65; color: var(--muted); }
    .landing-hero > div:first-child > .muted { margin-top: 22px; }
    .workflow-illustration { display: grid; gap: 12px; padding: 24px; border: 1px solid #31415f; border-radius: 18px; background: linear-gradient(145deg, #111b31, #26385c); box-shadow: 0 24px 70px #17203335; transform: rotate(1.5deg); }
    .workflow-illustration span { padding: 18px 20px; border: 1px solid #ffffff22; border-radius: 10px; background: #ffffff0d; color: #fff; font-weight: 650; }
    .workflow-illustration span::before { content: '✓'; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: #75d6b1; color: #10253a; font-size: 12px; }
    .principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-bottom: 72px; }
    .principles div, .feature-grid article, .pricing-card { padding: 26px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 10px 28px #1720330a; }
    .principles div { min-height: 132px; }
    .principles strong, .principles span { display: block; }
    .principles span { margin-top: 9px; color: var(--muted); line-height: 1.5; font-size: 13px; }
    .landing-section { padding-top: 88px; padding-bottom: 88px; }
    .landing-section h2 { max-width: 760px; font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -.04em; margin: 8px 0 30px; }
    .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .feature-grid article { min-height: 180px; }
    .feature-grid article h3 { margin-top: 0; font-size: 1.1rem; }
    .feature-grid article p { color: var(--muted); line-height: 1.6; }
    .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
    .segmented-controls { display: flex; flex-wrap: wrap; gap: 4px; }
    .segmented-controls button { min-height: 42px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--ink); padding: 0 14px; cursor: pointer; }
    .segmented-controls button[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
    .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; min-height: 190px; }
    .pricing-card { display: flex; flex-direction: column; gap: 12px; }
    .pricing-card strong { font-size: 2rem; letter-spacing: -.04em; }
    .pricing-card .primary-button { margin-top: auto; text-align: center; text-decoration: none; }
    .security-band { max-width: none; background: #172033; color: #fff; }
    .security-band > * { max-width: 1152px; margin-left: auto; margin-right: auto; }
    .security-band .muted, .security-band p { color: #b8c3d5; }
    .landing-footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 32px; padding-bottom: 32px; color: var(--muted); font-size: 13px; }
    .primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 17px; border-radius: 8px; font-weight: 700; text-decoration: none; cursor: pointer; }
    .primary-button { border: 1px solid var(--brand); background: var(--brand); color: #fff !important; }
    .primary-button:hover { background: #193a8d; border-color: #193a8d; }
    .secondary-button { border: 1px solid var(--border); background: var(--surface); color: var(--ink) !important; }
    .secondary-button:hover { border-color: var(--brand); color: var(--brand) !important; }
    @media (max-width: 767px) {
        .landing-header nav { display: none; }
        .landing-header { justify-content: space-between; }
        .landing-hero, .feature-grid, .pricing-grid, .principles { grid-template-columns: 1fr; }
        .landing-hero { padding-top: 56px; padding-bottom: 56px; gap: 40px; }
        .landing-hero h1 { font-size: clamp(2.8rem, 13vw, 4.2rem); }
        .section-heading, .landing-footer { align-items: flex-start; flex-direction: column; }
    }

    .mobile-menu {
        display: block
    }

    .topbar {
        padding: 0 15px;
        gap: 10px
    }

    .breadcrumb {
        display: none
    }

    .top-actions {
        gap: 9px
    }

    .profile-name,
    .profile>span:last-child,
    .top-actions>.icon-button:first-child {
        display: none
    }

    .content {
        padding: 20px 15px
    }

    .page-heading {
        align-items: flex-start;
        gap: 15px
    }

    .page-heading h1 {
        font-size: 22px
    }

    .quiet-button {
        font-size: 11px;
        padding: 7px
    }

    .risk-banner {
        flex-wrap: wrap
    }

    .risk-banner a {
        margin-left: 30px
    }

    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    .dashboard-grid,
    .lower-grid {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .panel {
        padding: 16px
    }

    .footer {
        display: block;
        line-height: 2
    }

    .footer span {
        display: block
    }

    .work-item,
    .agenda-item {
        gap: 8px
    }
}

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

.landing-shell {
    min-height: 100vh;
    background: var(--canvas);
    color: var(--ink);
    overflow: hidden
}

.landing-header {
    position: sticky;
    top: 0;
    z-index: 8;
    min-height: 72px;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border-bottom: 1px solid var(--border)
}

.landing-header-inner,
.landing-hero,
.principles,
.landing-section,
.workflow-section,
.security-inner,
.landing-footer {
    width: min(100% - 48px, 1200px);
    margin: 0 auto
}

.landing-header-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 28px
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.04em;
    flex: none
}

.landing-header nav {
    display: flex;
    align-items: center;
    gap: 25px;
    flex: 1
}

.landing-header nav a,
.landing-footer a {
    color: var(--muted)
}

.landing-header nav a:hover,
.landing-header nav a:focus-visible,
.landing-footer a:hover,
.landing-footer a:focus-visible {
    color: var(--ink)
}

.landing-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none
}

.mobile-nav-toggle,
.language-button {
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer
}

.mobile-nav-toggle {
    display: none;
    padding: 0 12px
}

.language-button {
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700
}

.landing-hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px;
    align-items: center;
    padding-top: 96px;
    padding-bottom: 96px
}

.hero-copy {
    grid-column: span 7;
    min-width: 0
}

.landing-hero h1 {
    max-width: 760px;
    margin: 14px 0 24px;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -.055em
}

.landing-lede {
    max-width: 640px;
    margin: 0;
    color: var(--muted);
    font-size: 1.18rem;
    line-height: 1.65
}

.hero-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 13px
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    flex: none
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 28px
}

.landing-actions .primary-button,
.landing-actions .secondary-button {
    min-height: 46px
}

.workflow-illustration {
    grid-column: span 5;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 18px 44px #17203312
}

.illustration-label,
.feature-kicker,
.control-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.workflow-illustration ol,
.workflow-steps {
    margin: 16px 0 0;
    padding: 0;
    list-style: none
}

.workflow-illustration li {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 12px;
    padding: 12px 0
}

.workflow-illustration li:not(:last-child)::after {
    position: absolute;
    left: 13px;
    top: 40px;
    bottom: -8px;
    width: 1px;
    background: var(--border);
    content: ''
}

.workflow-illustration li > span,
.workflow-steps li > span,
.principle-index,
.feature-number {
    color: var(--brand);
    font: 600 11px/1.4 ui-monospace, monospace
}

.workflow-illustration strong,
.workflow-illustration small {
    grid-column: 2
}

.workflow-illustration small,
.workflow-steps small {
    color: var(--muted);
    font-size: 12px
}

.principles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding-bottom: 8px
}

.principles > div,
.feature-card,
.pricing-card,
.comparison-cards article {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow)
}

.principles > div {
    min-height: 136px
}

.principles strong,
.principles > span {
    display: block
}

.principles strong {
    margin-top: 12px
}

.principles > div > span:last-child {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5
}

.landing-section,
.workflow-section {
    padding-top: 96px;
    padding-bottom: 96px
}

.section-intro {
    max-width: 760px
}

.section-intro h2,
.security-band h2,
.responsible-ai-band h2,
.final-cta h2 {
    margin: 8px 0 18px;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.045em
}

.section-intro h2 span {
    color: var(--brand)
}

.section-intro > p:last-child,
.security-inner > div:first-child > p:last-of-type {
    max-width: 640px;
    color: var(--muted);
    font-size: 1.05rem
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px
}

.feature-card {
    display: flex;
    flex-direction: column;
    min-height: 240px
}

.feature-card-primary {
    border-color: #a9baf5
}

.feature-card h3,
.proof-copy h3 {
    margin: 14px 0 8px;
    font-size: 1.15rem
}

.feature-card p,
.proof-copy li {
    color: var(--muted);
    line-height: 1.6
}

.feature-card a,
.landing-text-link {
    margin-top: auto;
    color: var(--brand);
    font-weight: 700
}

.workflow-section {
    width: 100%;
    padding-left: max(24px, calc((100% - 1200px) / 2));
    padding-right: max(24px, calc((100% - 1200px) / 2));
    background: #f3eee5
}

[data-theme="dark"] .workflow-section {
    background: #2b2a27
}

.workflow-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-top: 34px
}

.workflow-steps li {
    position: relative;
    display: grid;
    gap: 8px;
    min-height: 98px;
    padding: 0 22px 0 0
}

.workflow-steps li:not(:last-child)::after {
    position: absolute;
    top: 8px;
    left: 34px;
    right: 18px;
    height: 1px;
    background: #c6bcae;
    content: ''
}

.workflow-steps li > span {
    z-index: 1;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #b9ad9f;
    border-radius: 50%;
    background: #f3eee5
}

.workflow-footnote {
    margin: 28px 0 0;
    color: var(--success);
    font-weight: 700
}

.workflow-footnote span {
    margin-right: 7px
}

.proof-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    margin-top: 64px
}

.proof-row-reverse .proof-copy {
    order: 2
}

.proof-copy ul {
    display: grid;
    gap: 9px;
    margin: 18px 0 24px;
    padding-left: 20px
}

.product-mockup {
    min-height: 300px;
    padding: 22px;
    border: 1px solid #aeb9cd;
    border-radius: 12px;
    background: #202b42;
    color: #fff;
    box-shadow: 0 20px 45px #1720331f
}

.mockup-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #bac6dc;
    font-size: 10px
}

.mockup-bar span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #73809b
}

.mockup-bar b {
    margin-left: 8px;
    letter-spacing: .08em
}

.mockup-heading,
.mockup-status {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 30px
}

.mockup-heading span,
.mockup-status span {
    color: #bac6dc
}

.mockup-lines {
    display: grid;
    gap: 12px;
    margin-top: 26px
}

.mockup-lines i,
.document-page > span {
    display: block;
    height: 10px;
    border-radius: 2px;
    background: #7180a1
}

.mockup-lines i:nth-child(2) {
    width: 82%
}

.mockup-lines i:nth-child(3) {
    width: 65%
}

.mockup-lines i:nth-child(4) {
    width: 90%
}

.mockup-status {
    padding-top: 18px;
    border-top: 1px solid #ffffff22;
    color: #91e1bf
}

.document-mockup {
    background: #e7e4de;
    color: var(--ink)
}

.document-mockup .mockup-bar {
    color: #566174
}

.document-mockup .mockup-bar span {
    background: #8d99a9
}

.document-page {
    display: grid;
    gap: 14px;
    width: min(100%, 330px);
    min-height: 220px;
    margin: 24px auto 0;
    padding: 28px;
    background: #fff;
    box-shadow: 0 8px 20px #17203318
}

.document-page > span {
    height: 8px;
    background: #c7ccd5
}

.document-page .document-highlight {
    width: 78%;
    background: #9ab1ff
}

.document-page small {
    margin-top: 10px;
    color: #626a78
}

.responsible-ai-band {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 48px;
    align-items: center;
    padding: 72px max(24px, calc((100% - 1200px) / 2));
    background: #e9efff
}

.responsible-ai-band p {
    max-width: 680px;
    color: #43506a
}

.ai-boundaries {
    display: grid;
    gap: 10px
}

.ai-boundaries span {
    padding: 13px 15px;
    border: 1px solid #b5c4ee;
    border-radius: 7px;
    background: #f8faff;
    color: #2448a8;
    font-weight: 700
}

.security-band {
    width: 100%;
    padding: 96px 24px;
    background: #172033;
    color: #fff
}

.security-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px
}

.security-band .eyebrow,
.security-band .landing-text-link {
    color: #b6c8ff
}

.security-band h2 {
    max-width: 600px
}

.security-inner > div:first-child > p:last-of-type,
.security-list p {
    color: #b8c3d5
}

.security-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 24px
}

.security-list > div {
    border-top: 1px solid #ffffff30;
    padding-top: 14px
}

.security-list > div > span {
    color: #91e1bf;
    font: 600 11px ui-monospace, monospace
}

.security-list strong {
    display: block;
    margin-top: 8px
}

.security-list p {
    margin: 6px 0 0;
    font-size: 13px
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px
}

.pricing-controls {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 8px 10px;
    flex: none
}

.control-label {
    text-align: right
}

.segmented-controls {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--subtle)
}

.segmented-controls button {
    min-height: 44px;
    padding: 0 13px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--ink);
    cursor: pointer
}

.segmented-controls button[aria-pressed="true"] {
    background: var(--brand);
    color: #fff
}

.pricing-status {
    min-height: 24px;
    margin: 28px 0 12px;
    color: var(--muted)
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch
}

.pricing-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 360px
}

.pricing-card.is-featured {
    border: 2px solid var(--brand);
    padding: 23px
}

.pricing-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    min-height: 20px
}

.plan-label,
.plan-badge {
    color: var(--brand);
    font-size: 11px;
    font-weight: 700
}

.plan-badge {
    padding: 3px 7px;
    border-radius: 4px;
    background: #e8edff
}

.pricing-card h3 {
    margin: 8px 0 0;
    font-size: 1.3rem
}

.pricing-card > strong {
    font-size: 2rem;
    letter-spacing: -.04em
}

.pricing-card p {
    min-height: 44px;
    line-height: 1.5
}

.plan-points {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0 0 0 18px;
    color: var(--muted);
    font-size: 13px
}

.pricing-card .primary-button {
    width: 100%;
    margin-top: auto;
    text-align: center
}

.pricing-note {
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 12px
}

.pricing-grid[data-pricing-state="stale"] {
    opacity: .72
}

.pricing-skeleton {
    min-height: 360px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--subtle);
    animation: pricing-pulse 1.5s ease-in-out infinite
}

@keyframes pricing-pulse {
    50% { opacity: .55 }
}

.comparison-wrap {
    margin-top: 44px
}

.comparison-wrap > h3 {
    margin: 0 0 14px
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 13px
}

.comparison-table th,
.comparison-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top
}

.comparison-table th {
    font-weight: 700
}

.comparison-table td {
    color: var(--muted)
}

.comparison-cards {
    display: none
}

.faq-list {
    max-width: 900px;
    margin-top: 30px;
    border-top: 1px solid var(--border)
}

.faq-item {
    border-bottom: 1px solid var(--border)
}

.faq-item h3 {
    margin: 0
}

.faq-item button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 60px;
    padding: 14px 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    font-weight: 700;
    cursor: pointer
}

.faq-item button::after {
    content: '+';
    color: var(--brand);
    font-size: 22px;
    font-weight: 400
}

.faq-item button[aria-expanded="true"]::after {
    content: '−'
}

.faq-item [id] {
    max-width: 760px;
    padding: 0 40px 18px 0;
    color: var(--muted)
}

.faq-item p {
    margin: 0
}

.final-cta {
    width: min(100% - 48px, 1200px);
    margin: 0 auto;
    padding: 96px 0;
    border-top: 1px solid var(--border)
}

.final-cta h2 {
    max-width: 760px
}

.landing-footer {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    padding-top: 32px;
    padding-bottom: 40px;
    color: var(--muted);
    font-size: 13px
}

.landing-footer strong {
    color: var(--ink)
}

.landing-footer p {
    margin: 8px 0 0;
    font-size: 12px
}

.footer-notes {
    max-width: 270px;
    font-size: 11px
}

.footer-notes p {
    color: var(--muted)
}

.landing-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 18px
}

.footer-placeholder {
    color: var(--muted);
    font-style: italic
}

.landing-header a:focus-visible,
.landing-header button:focus-visible,
.landing-shell a:focus-visible,
.landing-shell button:focus-visible {
    outline: 3px solid #91aaff;
    outline-offset: 3px
}

@media (min-width: 768px) and (max-width: 1279px) {
    .landing-header-inner,
    .landing-hero,
    .principles,
    .landing-section,
    .security-inner,
    .landing-footer {
        width: min(100% - 40px, 960px)
    }

    .landing-hero {
        gap: 32px
    }

    .product-mockup {
        min-height: 260px
    }
}

@media (max-width: 767px) {
    .landing-header-inner,
    .landing-hero,
    .principles,
    .landing-section,
    .landing-footer {
        width: min(100% - 32px, 640px)
    }

    .landing-header-inner {
        position: relative;
        min-height: 64px;
        gap: 12px
    }

    .landing-header {
        min-height: 64px
    }

    .landing-header nav {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 16px 14px;
        border: 1px solid var(--border);
        border-top: 0;
        background: var(--surface);
        box-shadow: var(--shadow)
    }

    .landing-header nav.is-open {
        display: flex
    }

    .landing-header nav a {
        min-height: 44px;
        padding: 11px 0
    }

    .mobile-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto
    }

    .landing-header-actions {
        gap: 6px
    }

    .landing-header-actions .secondary-button {
        display: none
    }

    .landing-header-actions .primary-button {
        min-height: 44px;
        padding: 0 12px
    }

    .landing-hero {
        display: block;
        padding-top: 56px;
        padding-bottom: 56px
    }

    .landing-hero h1 {
        font-size: clamp(2.35rem, 12vw, 4rem)
    }

    .landing-lede {
        font-size: 1.05rem
    }

    .landing-actions {
        align-items: stretch;
        flex-direction: column
    }

    .landing-actions > * {
        width: 100%
    }

    .workflow-illustration {
        margin-top: 40px
    }

    .principles,
    .feature-grid,
    .pricing-grid,
    .security-inner,
    .security-list {
        grid-template-columns: 1fr
    }

    .principles {
        padding-bottom: 0
    }

    .landing-section,
    .workflow-section,
    .security-band {
        padding-top: 56px;
        padding-bottom: 56px
    }

    .workflow-section {
        padding-left: 16px;
        padding-right: 16px
    }

    .workflow-steps {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 26px
    }

    .workflow-steps li {
        grid-template-columns: 40px 1fr;
        min-height: 70px;
        padding: 0
    }

    .workflow-steps li > span {
        grid-row: span 2
    }

    .workflow-steps li:not(:last-child)::after {
        top: 34px;
        left: 16px;
        right: auto;
        bottom: 0;
        width: 1px;
        height: auto
    }

    .proof-row,
    .proof-row-reverse {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 44px
    }

    .proof-row-reverse .proof-copy {
        order: 0
    }

    .responsible-ai-band {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 56px 16px
    }

    .section-heading {
        display: block
    }

    .pricing-controls {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: 24px
    }

    .control-label {
        text-align: left
    }

    .segmented-controls {
        width: max-content;
        max-width: 100%
    }

    .comparison-table {
        display: none
    }

    .comparison-cards {
        display: grid;
        gap: 10px
    }

    .comparison-cards article {
        display: grid;
        gap: 7px
    }

    .comparison-cards h4,
    .comparison-cards p {
        margin: 0
    }

    .comparison-cards p,
    .comparison-cards span {
        color: var(--muted);
        font-size: 13px
    }

    .final-cta {
        width: min(100% - 32px, 640px);
        padding: 56px 0
    }

    .landing-footer {
        align-items: flex-start;
        flex-direction: column;
        padding-bottom: 28px
    }

    .landing-footer nav {
        justify-content: flex-start
    }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-skeleton {
        animation: none
    }
}

.document-version-tools{display:flex;flex-wrap:wrap;align-items:end;gap:.65rem;margin-bottom:1rem;padding:.8rem;border:1px solid var(--border);border-radius:10px;background:var(--surface-subtle)}
.document-version-tools label{display:grid;gap:.25rem;font-size:.75rem;color:var(--muted)}
.document-version-tools select{min-width:7rem}
.document-review-form,.document-hold-form{margin:1rem 0;padding:1rem;border:1px solid var(--border);border-radius:10px;background:var(--surface-subtle)}
.document-status-retention[data-retention-state="held"]{color:var(--danger)}

[data-reduced-motion="true"] .pricing-skeleton {
    animation: none
}

@media (forced-colors: active) {
    .landing-shell,
    .landing-header,
    .feature-card,
    .pricing-card,
    .workflow-illustration,
    .product-mockup,
    .comparison-table {
        forced-color-adjust: auto
    }

    .segmented-controls button[aria-pressed="true"],
    .primary-button {
        border: 2px solid ButtonText
    }
}

/* Drafting flow refinements: compact source review and readable document surfaces. */
.app-shell .drafting-page .drafting-context-rail {
    margin-top: 14px;
}

.app-shell .drafting-page .drafting-step-navigation {
    margin-top: 16px;
}

.app-shell .drafting-page .drafting-source-review {
    border: 1px solid var(--draft-line);
    border-radius: 10px;
    background: var(--draft-inset);
}

.app-shell .drafting-page .drafting-source-review > summary,
.app-shell .drafting-page .drafting-technical-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    color: var(--draft-ink);
    font-size: .8rem;
    font-weight: 780;
    cursor: pointer;
}

.app-shell .drafting-page .drafting-source-review > summary span {
    color: var(--draft-muted);
    font-size: .7rem;
    font-weight: 700;
}

.app-shell .drafting-page .drafting-source-review > .form-hint {
    padding: 0 14px 12px;
}

.app-shell .drafting-page .drafting-mapping-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 14px 14px;
}

.app-shell .drafting-page .drafting-information-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-content: start;
}

.app-shell .drafting-page .drafting-information-source,
.app-shell .drafting-page .drafting-mapping-account-value,
.app-shell .drafting-page .drafting-mapping-error {
    grid-column: 2 / -1;
}

.app-shell .drafting-page .drafting-information-source {
    display: grid;
    gap: 5px;
    margin-top: 5px;
}

.app-shell .drafting-page .drafting-information-source > span,
.app-shell .drafting-page .drafting-mapping-account-value > span {
    color: var(--draft-muted);
    font-size: .66rem;
    font-weight: 720;
}

.app-shell .drafting-page .drafting-mapping-account-value {
    min-height: 0;
    margin-top: 3px;
    padding: 9px 11px;
}

.app-shell .drafting-page .drafting-mapping-account-value[hidden] {
    display: none;
}

.app-shell .drafting-page .drafting-preview-output,
.app-shell .drafting-page .drafting-result-output {
    max-width: 78ch;
    margin-right: auto;
    margin-left: auto;
    padding: clamp(24px, 4vw, 48px);
    background: #fffefa;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .88rem;
    line-height: 1.75;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.app-shell .drafting-page .drafting-preview-metadata {
    display: block;
}

.app-shell .drafting-page .drafting-preview-metadata[hidden] {
    display: none;
}

.app-shell .drafting-page .drafting-technical-details {
    margin: 0 18px 16px;
    border: 1px solid var(--draft-line);
    border-radius: 9px;
    background: var(--draft-inset);
}

.app-shell .drafting-page .drafting-technical-details .drafting-preview-metadata-heading {
    margin: 0;
    padding: 0 14px 10px;
}

.app-shell .drafting-page .drafting-technical-details .metadata-grid {
    margin: 0 14px 14px;
}

.app-shell .drafting-page .drafting-result-technical {
    margin-top: 0;
}

@media (min-width: 980px) {
    .app-shell .drafting-page .drafting-composer-form {
        grid-template-columns: minmax(20rem, .82fr) minmax(34rem, 1.18fr);
    }

    .app-shell .drafting-page .drafting-fields {
        max-height: 58vh;
        overflow: auto;
    }

    .app-shell .drafting-page .drafting-composer-form > .drafting-matter-context {
        grid-template-columns: 1fr;
    }

    .app-shell .drafting-page .drafting-composer-form > .drafting-matter-context .drafting-matter-context-action {
        justify-items: start;
    }
}

@media (max-width: 900px) {
    .app-shell .drafting-page .drafting-mapping-list {
        grid-template-columns: 1fr;
    }
}

.work-dialog {
    max-width: 46rem;
}

.work-dialog .workspace-form,
.work-dialog .client-form {
    max-width: none;
}

.work-dialog [data-task-options-state] {
    margin: -.25rem 0 0;
}

.work-dialog [data-task-options-retry] {
    justify-self: start;
    margin-top: -.45rem;
}

.work-dialog select[multiple] {
    min-height: 7.5rem;
}

.work-dialog :where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.work-created-state {
    display: grid;
    gap: 1rem;
}

.work-created-state[aria-busy="true"] {
    opacity: .78;
}

/* The deadline calculation trace. The dialog tells the practitioner to preserve
   it before accepting, so it has to be legible on the screen that says so. */
.work-created-trace {
    border: 1px solid var(--line, #e2e8f0);
    border-radius: .6rem;
    padding: .65rem .9rem;
    background: var(--surface-muted, #f8fafc);
}

.work-created-trace > summary {
    cursor: pointer;
    font-weight: 700;
}

.work-created-trace .metadata-grid {
    margin: .6rem 0 0;
}

.work-trace-steps {
    margin: .35rem 0 0;
    padding-left: 1.3rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .1rem .9rem;
    font-variant-numeric: tabular-nums;
}

.work-created-header,
.work-detail-header,
.work-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.work-created-header h3,
.work-detail-header h2,
.work-section-heading h3 {
    margin: .15rem 0 .25rem;
}

.work-state-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: .2rem .6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--subtle);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 750;
    text-transform: capitalize;
    white-space: nowrap;
}

.work-state-pill[data-work-state="done"],
.work-state-pill[data-task-state-label="done"],
.work-state-pill[data-deadline-state="accepted"] {
    border-color: #a9d5bd;
    background: var(--success-soft);
    color: var(--success);
}

.work-state-pill[data-work-state="blocked"],
.work-state-pill[data-task-state-label="blocked"],
.work-state-pill[data-deadline-state="proposed"] {
    border-color: #e9ca8c;
    background: var(--warning-soft);
    color: var(--warning);
}

.work-state-pill[data-work-state="cancelled"],
.work-state-pill[data-task-state-label="cancelled"],
.work-state-pill[data-deadline-state="cancelled"] {
    color: var(--muted);
}

.work-transition-status[data-state="submitting"],
[data-deadline-transition-status][data-state="submitting"] {
    color: var(--brand);
}

.work-transition-status[data-state="conflict"],
[data-deadline-transition-status][data-state="conflict"] {
    color: var(--danger);
}

.work-detail[data-task-transition-state="loading"],
.work-detail[data-task-transition-state="success"],
.work-detail[data-task-transition-state="conflict"],
.work-detail[data-task-transition-state="error"] {
    border-radius: var(--radius-md);
}

.work-detail[data-task-transition-state="loading"] {
    cursor: progress;
}

.work-detail[data-task-transition-state="conflict"] {
    box-shadow: 0 0 0 3px #b4232c18;
}

.work-metadata {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}

.work-metadata > div {
    min-width: 0;
    padding: .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--subtle);
}

.work-metadata dt {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 750;
    text-transform: uppercase;
}

.work-metadata dd {
    margin: .25rem 0 0;
    overflow-wrap: anywhere;
}

.work-dependencies {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.work-count {
    display: inline-grid;
    min-width: 1.6rem;
    min-height: 1.6rem;
    place-items: center;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .72rem;
    font-weight: 750;
}

.work-dependency-list {
    display: grid;
    gap: .55rem;
    margin: .8rem 0 0;
    padding: 0;
    list-style: none;
}

.work-dependency-row {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem .8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.work-dependency-row > div {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.work-dependency-row span:last-child {
    color: var(--muted);
    font-size: .78rem;
    text-transform: capitalize;
}

.work-dependency-icon {
    color: var(--brand);
    font-weight: 800;
}

.work-blocked-note {
    margin-top: 1rem;
    padding: .8rem .9rem;
    border: 1px solid #e9ca8c;
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    color: var(--warning);
}

.work-blocked-note p {
    margin: .25rem 0 0;
}

.work-record-meta {
    color: var(--muted);
    font-size: .75rem;
}

@media (max-width: 760px) {
    .work-metadata {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-created-header,
    .work-detail-header,
    .work-section-heading {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .work-metadata {
        grid-template-columns: 1fr;
    }
}

.auth-shell {
    background:
        radial-gradient(circle at 50% 0, #e8efff 0, transparent 34rem),
        var(--canvas);
}

.auth-shell .auth-card {
    border-color: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.auth-shell .auth-form {
    gap: 17px;
}

.auth-shell .auth-form label {
    color: var(--ink);
    font-size: 13px;
}

.auth-shell .auth-form input,
.modal-backdrop :where(input, select, textarea) {
    min-height: 42px;
    border-color: var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 2px #17203308;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.auth-shell .auth-form input:focus,
.modal-backdrop :where(input, select, textarea):focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px #3157c821, inset 0 1px 2px #17203308;
    outline: none;
}

.auth-shell .auth-submit {
    min-height: 46px;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px #3157c82b;
}

.modal-backdrop .settings-modal {
    max-height: min(92vh, 780px);
    overflow: auto;
}

.modal-backdrop .modal-header h2 {
    margin-top: 4px;
    letter-spacing: -.03em;
}

.modal-backdrop .modal-actions {
    position: sticky;
    bottom: -24px;
    margin-right: -24px;
    margin-left: -24px;
    padding: 16px 24px 0;
    background: linear-gradient(180deg, transparent, var(--surface) 28%);
}

[data-theme="dark"] .auth-shell {
    background:
        radial-gradient(circle at 50% 0, #27375d 0, transparent 34rem),
        var(--canvas);
}

[data-theme="dark"] .auth-shell .auth-form input,
[data-theme="dark"] .modal-backdrop :where(input, select, textarea) {
    box-shadow: inset 0 1px 2px #00000035;
}

@media (max-width: 520px) {
    .auth-shell {
        padding: 16px;
    }

    .auth-shell .auth-card {
        padding: 24px 20px;
    }

    .modal-backdrop {
        align-items: end;
        padding: 12px;
    }

    .modal-backdrop .settings-modal {
        width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 10px 10px;
        padding: 20px;
    }

    .modal-backdrop .modal-actions {
        bottom: -20px;
        margin-right: -20px;
        margin-left: -20px;
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media (max-width: 720px) {
    .workspace-spotlight {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px
    }

    .spotlight-stat {
        width: 100%;
        padding: 12px 0 0;
        border-top: 1px solid #cfd9ff;
        border-left: 0
    }

    .workspace-search,
    .workspace-search input {
        width: 100%
    }

    .workspace-record {
        align-items: flex-start;
        flex-direction: column
    }

    .workspace-record .record-actions {
        width: 100%;
        justify-content: flex-end
    }
}

/* Drafting library controls keep discovery separate from governed record state. */
.app-shell .library-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .75rem;
    align-items: end;
    margin: 0 0 1rem;
    padding: .85rem;
    border: 1px solid var(--panel-border, var(--border));
    border-radius: var(--radius-md, 10px);
    background: var(--surface);
}

.app-shell .library-scope-row {
    display: flex;
    gap: .4rem;
    margin-top: .45rem;
}

.app-shell .library-scope-badge {
    display: inline-flex;
    width: fit-content;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .18rem .5rem;
    background: var(--subtle);
    color: var(--muted);
    font-size: .7rem;
    font-weight: 750;
}

.app-shell .library-scope-badge[data-scope="global"] {
    border-color: #b9c8f4;
    background: #f3f6ff;
    color: var(--brand);
}

.template-conversion-dialog {
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
}

.template-conversion-provenance {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--subtle);
    color: var(--muted);
    font-size: .78rem;
}

.template-candidate-list {
    display: grid;
    gap: .5rem;
    max-height: 240px;
    overflow: auto;
    margin-top: .6rem;
}

.template-candidate-row {
    display: grid;
    grid-template-columns: auto minmax(9rem, 1fr) minmax(10rem, .8fr) auto;
    gap: .6rem;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .55rem;
}

.template-candidate-row small {
    color: var(--muted);
    white-space: nowrap;
}

.app-shell .drafting-account-source {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #cbd6f4;
    border-radius: var(--radius-sm);
    padding: .75rem;
    background: #f5f8ff;
}

.app-shell .drafting-account-source > div {
    display: grid;
    gap: .2rem;
}

.app-shell .drafting-account-source span {
    color: var(--muted);
    font-size: .78rem;
}

.app-shell .library-toolbar label {
    display: grid;
    gap: .3rem;
    min-width: 0;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.app-shell .library-toolbar input,
.app-shell .library-toolbar select {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: var(--radius-sm, 7px);
    padding: .55rem .7rem;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.app-shell .library-toolbar input:focus,
.app-shell .library-toolbar select:focus {
    border-color: var(--brand);
    outline: 0;
    box-shadow: 0 0 0 3px #3157c821;
}

.app-shell .library-search input {
    padding-left: 2.1rem;
    background-image: linear-gradient(var(--surface), var(--surface)), linear-gradient(var(--muted), var(--muted));
    background-repeat: no-repeat;
    background-size: 100% 100%, 9px 9px;
    background-position: 0 0, .75rem .85rem;
    background-blend-mode: normal;
}

.app-shell .library-clear-filters {
    margin: 0;
    white-space: nowrap;
}

.app-shell .library-card {
    min-width: 0;
}

.app-shell .library-card-header > div > div {
    min-width: 0;
}

.app-shell .library-card-header h3,
.app-shell .library-card-header p {
    overflow-wrap: anywhere;
}

.app-shell .library-status {
    flex: none;
}

.app-shell .library-status-unpublished {
    border-color: #cbd6f4;
    background: #f5f8ff;
    color: var(--brand);
}

.app-shell .library-status-active {
    border-color: #a9d5bd;
    background: var(--success-soft, #f0fbf5);
    color: var(--success);
}

.app-shell .library-status-archived,
.app-shell .library-status-deprecated,
.app-shell .library-status-retired {
    background: var(--subtle);
    color: var(--muted);
}

.app-shell .library-version-value {
    font-weight: 750;
    color: var(--ink);
}

.app-shell .library-loading {
    display: grid;
    gap: .8rem;
    min-height: 190px;
    align-content: center;
    padding: 1.5rem;
}

.app-shell .library-loading span {
    display: block;
    height: .75rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--subtle-strong, #e5e9f1), var(--surface), var(--subtle-strong, #e5e9f1));
    background-size: 200% 100%;
    animation: library-loading-shimmer 1.35s ease-in-out infinite;
}

.app-shell .library-loading span:nth-child(1) { width: 42%; }
.app-shell .library-loading span:nth-child(2) { width: 82%; }
.app-shell .library-loading span:nth-child(3) { width: 64%; }

@keyframes library-loading-shimmer {
    to { background-position: -200% 0; }
}

.app-shell .library-state-protected {
    border-color: #cbd6f4;
    background: #f5f8ff;
}

.app-shell .library-state-error {
    border-color: #efb8bc;
    background: var(--danger-soft, #fff4f4);
}

.app-shell .drafting-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .45rem;
}

.app-shell .drafting-navigation a:not(.primary-button) {
    padding: .45rem .6rem;
    border-radius: .45rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.app-shell .drafting-navigation a:not(.primary-button):hover,
.app-shell .drafting-navigation a:not(.primary-button):focus-visible {
    background: var(--subtle);
    color: var(--brand);
}

.app-shell .drafting-library-context {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(11rem, .7fr) auto;
    gap: 1rem;
    align-items: center;
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border: 1px solid #b9c8eb;
    border-radius: var(--radius-md, 10px);
    background: #f5f8ff;
}

.app-shell .drafting-library-context[data-state="ready"] {
    border-color: #b7d9c7;
    background: var(--success-soft, #f2fbf6);
}

.app-shell .drafting-library-context[data-state="protected"],
.app-shell .drafting-library-context[data-state="error"] {
    border-color: #efb8bc;
    background: var(--danger-soft, #fff4f4);
}

.app-shell .drafting-library-context > div {
    min-width: 0;
}

.app-shell .drafting-library-context strong {
    display: block;
    overflow-wrap: anywhere;
}

.app-shell .drafting-library-context p {
    margin: .15rem 0 0;
}

.app-shell .drafting-library-context dl {
    display: flex;
    gap: 1rem;
    margin: 0;
}

.app-shell .drafting-library-context dl div {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.app-shell .drafting-library-context dt {
    color: var(--muted);
    font-size: .67rem;
    font-weight: 750;
    text-transform: uppercase;
}

.app-shell .drafting-library-context dd {
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
}

.app-shell .drafting-library-context-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}

.app-shell .drafting-library-context .quiet-button {
    margin: 0;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .library-loading span {
        animation: none;
    }
}

@media (max-width: 800px) {
    .app-shell .library-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .app-shell .library-search {
        grid-column: 1 / -1;
    }

    .app-shell .library-clear-filters {
        justify-self: start;
    }

    .app-shell .drafting-library-context {
        grid-template-columns: 1fr;
    }

    .app-shell .drafting-library-context-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .app-shell .library-toolbar {
        grid-template-columns: 1fr;
    }

    .app-shell .library-search {
        grid-column: auto;
    }

    .app-shell .library-toolbar .quiet-button {
        width: 100%;
    }

    .app-shell .drafting-navigation {
        justify-content: flex-start;
    }

    .app-shell .drafting-library-context dl {
        justify-content: space-between;
    }
}
.workspace-form{display:grid;gap:.75rem;margin-top:1.25rem;max-width:44rem}
.metadata-grid{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:1rem 0}
.metadata-grid dt{font-weight:700;color:var(--muted,#64748b)}
.metadata-grid dd{margin:0;overflow-wrap:anywhere}
.offline-banner{margin:.5rem 0 1rem;padding:.75rem 1rem;border:1px solid #f59e0b;border-radius:.75rem;background:#fffbeb;color:#92400e}
.conflict-state{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(148,163,184,.25)}
.conflict-review-layout{display:grid;grid-template-columns:minmax(12rem,.7fr) minmax(0,1.5fr);gap:1rem;margin-top:1rem}
.conflict-list,.conflict-candidate-list{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.conflict-check-row{border:1px solid rgba(148,163,184,.25);border-radius:.65rem;background:var(--surface,#fff)}
.conflict-check-row.is-selected{border-color:var(--brand,#3157d5);box-shadow:0 0 0 1px var(--brand,#3157d5)}
.conflict-check-select{display:grid;grid-template-columns:auto 1fr auto;gap:.3rem .55rem;width:100%;padding:.75rem;text-align:left;color:inherit;background:transparent;border:0;border-radius:.65rem;cursor:pointer}
.conflict-check-select strong{font-size:.85rem}
.conflict-check-select>span:nth-of-type(2){grid-column:2/4;color:var(--muted,#64748b);font-size:.8rem}
.conflict-check-select time{grid-column:1/4;color:var(--muted,#64748b);font-size:.75rem}
.conflict-detail-state{min-width:0;padding:1rem;border:1px solid rgba(148,163,184,.25);border-radius:.7rem;background:var(--subtle,#f8fafc)}
.conflict-detail-header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding-bottom:.85rem;border-bottom:1px solid rgba(148,163,184,.25)}
.conflict-detail-header h3{margin:.15rem 0;font-size:1.05rem}
.conflict-status,.conflict-disposition,.conflict-severity{display:inline-flex;align-items:center;width:max-content;padding:.2rem .5rem;border-radius:999px;font-size:.7rem;font-weight:700;text-transform:capitalize}
.conflict-status-pending,.conflict-disposition-pending{background:#fff7ed;color:#9a3412}
.conflict-status-clear,.conflict-disposition-cleared{background:#ecfdf5;color:#047857}
.conflict-status-rejected,.conflict-disposition-confirmed_conflict{background:#fef2f2;color:#b91c1c}
.conflict-status-override,.conflict-disposition-insufficient_information{background:#eff6ff;color:#1d4ed8}
.conflict-status-superseded,.conflict-status-cancelled{background:#f1f5f9;color:#475569}
.conflict-candidate-list{margin-top:.85rem}
.conflict-candidate{padding:.85rem;border:1px solid rgba(148,163,184,.25);border-radius:.65rem;background:var(--surface,#fff)}
.conflict-candidate-header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.conflict-candidate-header h4{margin:.35rem 0 .15rem;font-size:.95rem}
.conflict-candidate-header code{color:var(--muted,#64748b);font-size:.72rem;overflow-wrap:anywhere}
.conflict-severity-high{background:#fef2f2;color:#b91c1c}
.conflict-severity-medium{background:#fff7ed;color:#9a3412}
.conflict-severity-low{background:#eff6ff;color:#1d4ed8}
.conflict-candidate-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:.85rem 0}
.conflict-candidate-metrics div{padding:.5rem;border-radius:.45rem;background:var(--subtle,#f8fafc)}
.conflict-candidate-metrics dt{color:var(--muted,#64748b);font-size:.7rem}
.conflict-candidate-metrics dd{margin:.2rem 0 0;font-size:.8rem;font-weight:700;overflow-wrap:anywhere}
.conflict-decision-form,.conflict-completion-form{display:grid;gap:.65rem;margin-top:.8rem;padding-top:.8rem;border-top:1px solid rgba(148,163,184,.2)}
.conflict-completion-form{margin-top:1rem;padding:1rem;border:1px solid #b7d9c7;border-radius:.65rem;background:#f2fbf6}
.conflict-completion-form textarea,.conflict-decision-form textarea{min-height:4rem}
.conflict-decision-meta{display:flex;justify-content:space-between;gap:.75rem;margin-top:.75rem;color:var(--muted,#64748b);font-size:.75rem}
.conflict-decision-reason{margin:.5rem 0 0;font-size:.8rem}
.conflict-decision-reason strong{color:var(--ink)}
.conflict-completed-note,.conflict-no-candidates,.conflict-empty,.conflict-error-state,.conflict-protected-state{padding:.75rem 0}
.conflict-completed-note{margin-top:1rem;padding:.85rem;border-radius:.65rem;background:var(--surface,#fff)}
.conflict-completed-note p{margin-bottom:0}
.conflict-list time{color:var(--muted,#64748b);font-size:.85rem}
.drafting-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1.25rem;margin-bottom:1.25rem}
.drafting-layout .panel{min-width:0}
.drafting-context-note{margin:-.75rem 0 1.25rem;padding:.7rem .85rem;border:1px dashed var(--border);border-radius:.6rem;background:var(--subtle);font-size:.82rem}
.drafting-matter-context{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:1rem;align-items:center;margin:1rem 0;padding:.85rem 1rem;border:1px solid var(--border);border-radius:.7rem;background:var(--subtle)}
.drafting-matter-context-route{margin:0 0 1.25rem;background:var(--surface)}
.drafting-matter-context[data-state="ready"]{border-color:#b7d9c7;background:#f2fbf6}
.drafting-matter-context[data-state="attention"]{border-color:#edcf96;background:#fffaf1}
.drafting-matter-context[data-state="error"]{border-color:#efb8bc;background:#fff4f4}
.drafting-matter-context>div{min-width:0}
.drafting-matter-context .eyebrow{margin-bottom:.15rem}
.drafting-matter-context strong{display:block;font-size:.88rem;overflow-wrap:anywhere}
.drafting-matter-context p{margin:.15rem 0 0}
.drafting-matter-context-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:0}
.drafting-matter-context-meta div{display:grid;gap:.1rem;min-width:0}
.drafting-matter-context-meta dt{color:var(--muted);font-size:.66rem;font-weight:700;text-transform:uppercase}
.drafting-matter-context-meta dd{margin:0;font-size:.78rem;overflow-wrap:anywhere}
.drafting-matter-context-action{display:grid;gap:.4rem;justify-items:end;min-width:10rem}
.drafting-matter-context-action .secondary-button{margin:0}
.drafting-matter-readiness{font-size:.75rem;text-align:right}
.drafting-matter-readiness[data-ready="true"]{color:var(--success)}
.drafting-matter-readiness[data-ready="false"]{color:var(--warning)}
[data-theme="dark"] .drafting-matter-context[data-state="ready"],[data-theme="dark"] .matter-readiness.is-ready{background:#182c24;color:#b7e5c9;border-color:#356c50}
[data-theme="dark"] .drafting-matter-context[data-state="attention"],[data-theme="dark"] .matter-readiness.needs-attention{background:#302818;color:#f5d58e;border-color:#80652f}
[data-theme="dark"] .drafting-matter-context[data-state="error"]{background:#301f23;color:#f4b8bd;border-color:#85414b}
@media (prefers-color-scheme: dark){[data-theme="system"] .drafting-matter-context[data-state="ready"],[data-theme="system"] .matter-readiness.is-ready{background:#182c24;color:#b7e5c9;border-color:#356c50}[data-theme="system"] .drafting-matter-context[data-state="attention"],[data-theme="system"] .matter-readiness.needs-attention{background:#302818;color:#f5d58e;border-color:#80652f}[data-theme="system"] .drafting-matter-context[data-state="error"]{background:#301f23;color:#f4b8bd;border-color:#85414b}}
.drafting-step-badge{padding:.25rem .55rem;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.7rem;font-weight:700;white-space:nowrap}
.drafting-template-panel code{padding:.12rem .3rem;border-radius:.3rem;background:var(--subtle);color:var(--brand);font-size:.85em}
.form-hint{margin:0;color:var(--muted);font-size:.8rem}
.drafting-empty-state{display:grid;justify-items:center;gap:.45rem;min-height:20rem;padding:3rem 1rem;text-align:center;align-content:center}
.drafting-empty-state h3{margin:.35rem 0 0;font-size:1rem}
.drafting-composer{min-width:0}
.drafting-template-summary,.drafting-result-heading{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.75rem .85rem;border:1px solid #b7d9c7;border-radius:.65rem;background:#f2fbf6}
.drafting-template-summary>div,.drafting-result-heading>div{display:flex;align-items:center;gap:.5rem;min-width:0}
.drafting-template-summary strong,.drafting-result-heading strong{display:block}
.drafting-template-summary span:not(.drafting-status-dot),.drafting-result-heading span:not(.drafting-status-dot){color:var(--muted);font-size:.8rem}
.drafting-template-summary small,.drafting-result-heading small{color:var(--muted);font: .72rem ui-monospace,monospace;overflow-wrap:anywhere;text-align:right}
.drafting-status-dot{width:.55rem;height:.55rem;display:inline-block;flex:none;border-radius:50%;background:var(--success)}
.drafting-mapping-panel{margin-top:1rem;padding:1rem;border:1px solid var(--border);border-radius:.7rem;background:var(--surface)}
.drafting-workflow-guide .workflow-steps{grid-template-columns:repeat(6,minmax(0,1fr))}
.drafting-mapping-header,.drafting-resolver-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}
.drafting-mapping-header h3,.drafting-resolver-header h3{margin:0 0 .2rem;font-size:1rem}
.drafting-mapping-state{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:.25rem .55rem;color:var(--muted);font-size:.7rem;font-weight:700;white-space:nowrap}
.drafting-mapping-state-draft{border-color:#edcf96;background:#fffaf1;color:#714807}
.drafting-mapping-state-published{border-color:#b7d9c7;background:#f2fbf6;color:var(--success)}
.drafting-mapping-state-published-dirty{border-color:#edcf96;background:#fffaf1;color:#714807}
.drafting-mapping-state-error{border-color:#efb8bc;background:#fff4f4;color:var(--danger)}
.drafting-mapping-guidance{display:grid;gap:.2rem;margin-bottom:.75rem;padding:.7rem .8rem;border-left:3px solid var(--brand);border-radius:.45rem;background:var(--brand-soft);font-size:.78rem}
.drafting-mapping-guidance span{color:var(--muted)}
.drafting-mapping-summary{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;margin-bottom:.85rem;padding:.55rem .7rem;border:1px solid var(--border);border-radius:.5rem;background:var(--subtle);font-size:.76rem}
.drafting-mapping-summary strong{color:var(--ink)}
.drafting-mapping-summary span{color:var(--muted);text-align:right}
.drafting-mapping-list{display:grid;gap:.75rem;margin-top:.25rem}
.drafting-mapping-row{display:grid;grid-template-columns:minmax(10rem,.85fr) minmax(8rem,.7fr) minmax(10rem,1fr);gap:.75rem;align-items:end;padding:.75rem;border:1px solid var(--border);border-radius:.55rem;background:var(--subtle)}
.drafting-mapping-row.is-static{border-left:3px solid var(--success)}
.drafting-mapping-row.is-invalid{border-color:#d99018;background:#fffaf1}
.drafting-mapping-field{display:flex;align-items:flex-start;gap:.55rem;align-self:center;min-width:0}
.drafting-mapping-number{display:grid;place-items:center;width:1.55rem;height:1.55rem;flex:none;border-radius:.4rem;background:var(--surface);color:var(--brand);font:700 .68rem ui-monospace,SFMono-Regular,Consolas,monospace}
.drafting-mapping-field>div{display:grid;gap:.15rem;min-width:0}
.drafting-mapping-field strong{font-size:.85rem}
.drafting-mapping-field small{color:var(--muted);font-size:.72rem}
.drafting-mapping-row label{display:grid;gap:.3rem;font-size:.75rem;font-weight:650}
.drafting-mapping-label-hint{color:var(--muted);font-size:.68rem;font-weight:400}
.drafting-mapping-row input,.drafting-mapping-row select{width:100%;border:1px solid var(--border);border-radius:.4rem;padding:.55rem .6rem;background:var(--surface);color:var(--ink)}
.drafting-mapping-row input:disabled{opacity:.62;background:var(--subtle)}
.drafting-mapping-help{grid-column:1 / -1;margin:-.2rem 0 0 2.1rem;color:var(--muted);font-size:.72rem}
.drafting-mapping-error{grid-column:1 / -1;margin:-.2rem 0 0 2.1rem;color:var(--danger);font-size:.74rem;font-weight:700}
.drafting-mapping-error[hidden]{display:none}
.drafting-mapping-recovery{display:flex;justify-content:space-between;gap:.75rem;align-items:center;margin-top:.85rem;padding:.7rem .8rem;border:1px solid #edcf96;border-radius:.55rem;background:#fffaf1;color:#714807;font-size:.76rem}
.drafting-mapping-recovery>div{display:grid;gap:.15rem}
.drafting-mapping-recovery span{color:inherit}
.drafting-mapping-recovery .secondary-button{margin:0;flex:none}
.drafting-mapping-recovery[hidden]{display:none}
.drafting-resolver{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.drafting-resolver[hidden]{display:none}
.drafting-resolver-header{margin-bottom:.25rem}
.drafting-resolver-controls{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;flex-wrap:wrap}
.drafting-resolver-controls [data-drafting-session-status]{font-size:.72rem}
.drafting-resolver .drafting-fields{padding-top:.75rem}
.drafting-resolver .drafting-fields label{display:grid;gap:.3rem}
.drafting-resolver .drafting-fields label>.muted{font-size:.75rem;font-weight:400}
.drafting-resolver .drafting-fields code,.drafting-mapping-field code{padding:.1rem .3rem;border-radius:.25rem;background:var(--surface);color:var(--brand);font-size:.82em;overflow-wrap:anywhere}
.drafting-static-field{display:grid;gap:.2rem;padding:.7rem .8rem;border:1px solid #b7d9c7;border-radius:.5rem;background:#f2fbf6}
.drafting-static-field span{color:var(--muted);font-size:.78rem}
.drafting-composer-form{margin-top:1rem;max-width:none}
.drafting-fields{display:grid;gap:.75rem;padding-top:1rem;border-top:1px solid var(--border)}
.drafting-fields .form-section-heading{margin-bottom:.1rem}
.drafting-preview-panel{margin-top:.25rem;padding:1rem;border:1px solid var(--border);border-radius:.7rem;background:var(--subtle)}
.drafting-preview-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.drafting-preview-header>div{display:grid;gap:.15rem}
.drafting-preview-header span{color:var(--muted);font-size:.78rem}
.drafting-preview-header .secondary-button{margin-top:0;white-space:nowrap}
.drafting-preview-output,.drafting-result-output{max-height:25rem;min-height:8rem;overflow:auto;margin:1rem 0 0;padding:1rem;border:1px solid var(--border);border-radius:.5rem;background:var(--surface);color:var(--ink);font: .86rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
/* THE DRAFTING PREVIEW RENDERS THE DOCUMENT, NOT ITS TRANSCRIPT.
   The frame carries its own, stricter policy from the response, so it keeps the
   inline styling a rendered document needs while the page's `style-src 'self'`
   would have stripped it. A stale render stays visible and is dimmed rather
   than blanked: blanking mid-edit makes the preview fight the typist. */
.drafting-preview-render{position:relative;margin:1rem 0 0;min-height:26rem;border:1px solid var(--border);border-radius:.5rem;background:#eef0f4;overflow:hidden}
.drafting-preview-frame{display:block;width:100%;height:42rem;border:0;background:#eef0f4}
.drafting-preview-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:1.5rem;text-align:center;color:var(--muted, #667085);font-size:.9rem;background:var(--surface)}
.drafting-preview-panel[data-preview-state="stale"] .drafting-preview-frame,
.drafting-preview-panel[data-preview-state="checking"] .drafting-preview-frame{opacity:.55;transition:opacity .18s ease}
.drafting-preview-panel[data-preview-state="local-error"] .drafting-preview-frame{opacity:.45}
.drafting-preview-text{margin-top:.75rem}
.drafting-preview-text .drafting-preview-output{margin-top:.5rem}
@media (max-width:720px){.drafting-preview-frame{height:24rem}.drafting-preview-render{min-height:18rem}}
.drafting-preview-output.has-blockers{border-color:#edcf96;background:#fffaf1;color:#714807}
.drafting-preview-output[data-preview-state="checking"]{border-color:#b9c8eb;background:#f5f8ff}
.drafting-preview-output[data-preview-state="local-error"]{border-color:#edcf96;background:#fffaf1}
.drafting-preview-metadata{margin-top:1rem;padding:.75rem .9rem;border:1px solid #b7d9c7;border-radius:.6rem;background:#f2fbf6}
.drafting-preview-metadata-heading{display:grid;gap:.15rem;margin:0 0 .65rem}
.drafting-preview-metadata-heading span{color:var(--muted);font-size:.78rem}
.drafting-preview-metadata .metadata-grid{margin:0}
.drafting-preview-metadata code{font-size:.75rem;overflow-wrap:anywhere}
.drafting-actions{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-top:1rem}
.drafting-actions .quiet-button{margin-top:0}
.drafting-result{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.drafting-result-output{max-height:34rem;background:var(--surface)}
.drafting-result .metadata-grid{margin-bottom:0}
.drafting-handoff{margin-top:1rem;padding:1rem;border:1px solid #b7c9ed;border-radius:.7rem;background:#f5f8ff}
.drafting-handoff[aria-busy="true"]{opacity:.82}
.drafting-handoff-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.9rem}
.drafting-handoff-header h3{margin:.15rem 0 .25rem;font-size:1rem}
.drafting-handoff-header .eyebrow{margin:0}
.drafting-handoff-badge{display:inline-flex;align-items:center;min-height:1.7rem;padding:.25rem .6rem;border:1px solid #b9c8eb;border-radius:999px;background:#fff;color:var(--brand);font-size:.7rem;font-weight:750;white-space:nowrap}
.drafting-handoff-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:0 0 1rem;padding:0;list-style:none}
.drafting-handoff-steps li{display:flex;align-items:center;gap:.55rem;min-width:0;padding:.6rem .65rem;border:1px solid var(--border);border-radius:.55rem;background:var(--surface);color:var(--muted)}
.drafting-handoff-steps li>span{display:grid;place-items:center;width:1.55rem;height:1.55rem;flex:none;border-radius:50%;background:var(--subtle-strong);font-size:.72rem;font-weight:800}
.drafting-handoff-steps li>div{display:grid;gap:.05rem;min-width:0}
.drafting-handoff-steps strong{font-size:.75rem;color:var(--ink)}
.drafting-handoff-steps small{font-size:.68rem;overflow-wrap:anywhere}
.drafting-handoff-steps li[data-state="complete"]{border-color:#b7d9c7;background:#f2fbf6}
.drafting-handoff-steps li[data-state="complete"]>span{background:var(--success);color:#fff}
.drafting-handoff-steps li[data-state="current"]{border-color:#9db6ed;background:#edf4ff;box-shadow:0 0 0 2px #3157c814}
.drafting-handoff-steps li[data-state="current"]>span{background:var(--brand);color:#fff}
.drafting-handoff-content{min-width:0}
.drafting-handoff-loading{display:grid;gap:.45rem;margin:.2rem 0 .75rem}
.drafting-handoff-loading span{display:block;height:.65rem;border-radius:999px;background:linear-gradient(90deg,var(--subtle-strong),#fff,var(--subtle-strong));background-size:200% 100%;animation:drafting-handoff-shimmer 1.4s ease-in-out infinite}
.drafting-handoff-loading span:nth-child(1){width:72%}
.drafting-handoff-loading span:nth-child(2){width:94%}
.drafting-handoff-loading span:nth-child(3){width:58%}
@keyframes drafting-handoff-shimmer{to{background-position:-200% 0}}
.drafting-handoff-form fieldset{display:grid;gap:.7rem;margin:0;padding:.8rem;border:1px solid var(--border);border-radius:.55rem;background:var(--surface)}
.drafting-handoff-form legend{padding:0 .25rem;font-weight:750}
.drafting-handoff-review{display:grid;gap:.45rem;margin-top:.75rem;padding:.8rem;border:1px solid #b9c8eb;border-radius:.55rem;background:#edf4ff}
.drafting-handoff-review[hidden]{display:none}
.drafting-handoff-review h4,.drafting-handoff-review p{margin:0}
.drafting-handoff-review h4{font-size:.86rem}
.drafting-handoff-confirm{display:flex;align-items:flex-start;gap:.55rem;color:var(--ink);font-size:.78rem;font-weight:700}
.drafting-handoff-confirm input{width:1rem;height:1rem;margin:.1rem 0 0;accent-color:var(--brand);flex:none}
.drafting-handoff-confirm input:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 32%,transparent);outline-offset:2px}
.drafting-client-options{display:grid;gap:.5rem}
.drafting-client-option{display:flex;align-items:flex-start;gap:.65rem;padding:.7rem;border:1px solid var(--border);border-radius:.5rem;background:var(--subtle);cursor:pointer}
.drafting-client-option:has(input:checked){border-color:#86a8e8;background:#edf4ff}
.drafting-client-option input{margin-top:.2rem;accent-color:var(--brand)}
.drafting-client-option span{display:grid;gap:.15rem}
.drafting-client-option small{color:var(--muted);font-size:.75rem}
.drafting-handoff-submit-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.8rem}
.drafting-handoff-selection{color:var(--muted);font-size:.76rem;font-weight:700}
.drafting-handoff-status{margin:.8rem 0 0}
.drafting-handoff-status[data-state="success"],.drafting-handoff-status[data-state="replayed"]{color:var(--success)}
.drafting-handoff-status[data-state="blocked"]{color:#714807}
.drafting-handoff-status[data-state="conflict"],.drafting-handoff-status[data-state="error"]{color:var(--danger)}
.drafting-handoff-success,.drafting-handoff-blocked,.drafting-handoff-conflict,.drafting-handoff-error{display:grid;gap:.65rem;padding:.8rem;border:1px solid var(--border);border-radius:.55rem;background:var(--surface)}
.drafting-handoff-success{border-color:#b7d9c7;background:#f2fbf6}
.drafting-handoff-success[data-immutable-success="true"]{box-shadow:0 0 0 3px #147a5014}
.drafting-handoff-blocked{border-color:#edcf96;background:#fffaf1}
.drafting-handoff-conflict,.drafting-handoff-error{border-color:#efb8bc;background:#fff4f4}
.drafting-handoff-success p,.drafting-handoff-blocked p,.drafting-handoff-conflict p,.drafting-handoff-error p{margin:0}
.drafting-handoff-success{grid-template-columns:auto minmax(0,1fr);align-items:start}
.drafting-handoff-success .drafting-handoff-actions{grid-column:1 / -1}
.drafting-handoff-success-icon,.drafting-handoff-empty-icon{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;font-weight:850}
.drafting-handoff-success-icon{background:var(--success);color:#fff}
.drafting-handoff-empty{grid-template-columns:auto minmax(0,1fr);align-items:start}
.drafting-handoff-empty .secondary-button{grid-column:1 / -1;justify-self:start}
.drafting-handoff-empty-icon{background:#fff0cf;color:var(--warning)}
.drafting-handoff-proof{display:block;margin-top:.4rem;color:var(--success);font-size:.72rem;font-weight:750}
.drafting-handoff-finality{display:block;margin-top:.2rem;color:var(--muted);font-size:.72rem;font-weight:650}
.drafting-handoff-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.drafting-handoff-actions .primary-button,.drafting-handoff-actions .secondary-button,.drafting-handoff-actions .quiet-button{margin-top:0}
.drafting-handoff-submit-row .primary-button:disabled{opacity:.55}
[data-theme="dark"] .drafting-handoff-steps li[data-state="complete"],[data-theme="dark"] .drafting-handoff-success{background:#182c24;color:#d8f3e2}
[data-theme="dark"] .drafting-handoff-steps li[data-state="current"]{background:#1b2945;color:#dce7ff}
[data-theme="dark"] .drafting-handoff-badge,[data-theme="dark"] .drafting-handoff-review{background:#1b2945;border-color:#536fae}
@media (prefers-color-scheme: dark){[data-theme="system"] .drafting-handoff-steps li[data-state="complete"],[data-theme="system"] .drafting-handoff-success{background:#182c24;color:#d8f3e2}[data-theme="system"] .drafting-handoff-steps li[data-state="current"],[data-theme="system"] .drafting-handoff-review{background:#1b2945;color:#dce7ff;border-color:#536fae}}
@media (prefers-reduced-motion: reduce){.drafting-handoff-loading span{animation:none}}
.drafting-workflow-guide{margin-bottom:1.25rem}
[data-drafting-composer-state="empty"]{border:1px dashed var(--border);border-radius:.7rem}
@media (max-width:900px){.drafting-layout{grid-template-columns:1fr}}
@media(max-width:720px){.drafting-mapping-row{grid-template-columns:1fr}.drafting-mapping-header,.drafting-resolver-header{flex-direction:column}}
@media(max-width:720px){.drafting-mapping-summary,.drafting-mapping-recovery{align-items:flex-start;flex-direction:column}.drafting-mapping-summary span{text-align:left}.drafting-mapping-recovery .secondary-button{width:100%}.drafting-mapping-help,.drafting-mapping-error{margin-left:0}}
@media(max-width:900px){.drafting-workflow-guide .workflow-steps{grid-template-columns:1fr}}
@media(max-width:720px){.drafting-handoff-header{flex-direction:column}}
@media(max-width:720px){.drafting-handoff-steps{grid-template-columns:1fr}.drafting-handoff-submit-row{align-items:stretch;flex-direction:column}.drafting-handoff-submit-row button{width:100%}}
@media(max-width:560px){.drafting-preview-header,.drafting-template-summary,.drafting-result-heading{align-items:flex-start;flex-direction:column}.drafting-template-summary small,.drafting-result-heading small{text-align:left}.drafting-preview-header .secondary-button{width:100%}.drafting-handoff-actions{align-items:stretch;flex-direction:column}.drafting-handoff-actions a,.drafting-handoff-actions button{width:100%;text-align:center}}
 [data-theme="dark"] .drafting-mapping-guidance{background:#1b2945}
 [data-theme="dark"] .drafting-mapping-recovery{background:#302818;color:#f5d58e;border-color:#80652f}
 [data-theme="dark"] .drafting-mapping-row.is-invalid{background:#302818}
 [data-theme="dark"] .drafting-static-field{background:#182c24}
 [data-theme="dark"] .drafting-mapping-state-draft,[data-theme="dark"] .drafting-mapping-state-published-dirty{background:#302818;color:#f5d58e;border-color:#80652f}
 [data-theme="dark"] .drafting-mapping-state-published{background:#182c24;color:#b7e5c9;border-color:#356c50}
 @media (prefers-color-scheme: dark){[data-theme="system"] .drafting-mapping-guidance{background:#1b2945}[data-theme="system"] .drafting-mapping-recovery{background:#302818;color:#f5d58e;border-color:#80652f}[data-theme="system"] .drafting-mapping-row.is-invalid{background:#302818}[data-theme="system"] .drafting-static-field{background:#182c24}[data-theme="system"] .drafting-mapping-state-draft,[data-theme="system"] .drafting-mapping-state-published-dirty{background:#302818;color:#f5d58e;border-color:#80652f}[data-theme="system"] .drafting-mapping-state-published{background:#182c24;color:#b7e5c9;border-color:#356c50}}
@media (prefers-reduced-motion: reduce){.drafting-mapping-row{transition:none}}
@media (max-width:900px){.conflict-review-layout{grid-template-columns:1fr}}
@media (max-width:720px){.conflict-candidate-metrics{grid-template-columns:1fr 1fr}.conflict-detail-header,.conflict-candidate-header,.conflict-decision-meta{align-items:flex-start;flex-direction:column}}
.app-shell .conflict-create-panel {
    display: grid;
    gap: 12px;
}

.app-shell .conflict-create-form {
    display: grid;
    gap: 8px;
    max-width: 42rem;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.app-shell .conflict-create-form input,
.app-shell .conflict-decision-form select,
.app-shell .conflict-decision-form textarea,
.app-shell .conflict-completion-form select,
.app-shell .conflict-completion-form textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--ink);
    background: var(--surface);
}

.app-shell .conflict-form-help,
.app-shell .conflict-pending-note,
.app-shell .conflict-decision-lock {
    color: var(--muted);
    font-size: .78rem;
}

.app-shell .conflict-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.app-shell .conflict-workflow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 4px;
    padding: 0;
    list-style: none;
}

.app-shell .conflict-workflow li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px;
    align-items: center;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: .75rem;
}

.app-shell .conflict-workflow li span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--subtle);
    font-weight: 800;
}

.app-shell .conflict-workflow li[data-state="current"] {
    border-color: var(--brand);
    color: var(--ink);
    box-shadow: 0 0 0 3px #3157c81c;
}

.app-shell .conflict-workflow li[data-state="current"] span,
.app-shell .conflict-workflow li[data-state="complete"] span {
    background: var(--brand);
    color: #fff;
}

.app-shell .conflict-workflow li[data-state="complete"] {
    border-color: #b7d9c7;
    color: var(--success);
}

.app-shell .conflict-required {
    color: var(--danger);
    font-size: .72rem;
    font-weight: 700;
}

.app-shell .conflict-candidate[data-severity="high"] {
    border-left: 4px solid var(--danger);
}

.app-shell .conflict-candidate[data-severity="medium"] {
    border-left: 4px solid var(--warning);
}

.app-shell .conflict-candidate[data-severity="low"] {
    border-left: 4px solid var(--brand);
}

.app-shell .conflict-signal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-shell .conflict-signal-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: .72rem;
    font-weight: 600;
}

.app-shell .conflict-score-value {
    display: grid;
    grid-template-columns: minmax(4rem, 1fr) auto;
    gap: 7px;
    align-items: center;
}

.app-shell .conflict-score-meter {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--border);
}

.app-shell .conflict-score-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--purple));
}

.app-shell .conflict-pending-note,
.app-shell .conflict-decision-state {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--subtle);
}

.app-shell .conflict-decision-state-confirmed_conflict {
    border: 1px solid #efb8bc;
    background: var(--danger-soft);
}

.app-shell .conflict-decision-state-cleared {
    border: 1px solid #b7d9c7;
    background: var(--success-soft);
}

.app-shell .conflict-decision-state-insufficient_information {
    border: 1px solid #b9d0ff;
    background: var(--brand-soft);
}

.app-shell .conflict-completion-form[data-conflict-approval-state="blocked"] {
    border-color: #edcf96;
    background: var(--warning-soft);
}

.app-shell .conflict-completion-form[data-conflict-approval-state="ready"] {
    border-color: #b7d9c7;
    background: var(--success-soft);
}

.app-shell .conflict-decision-lock {
    margin: 0;
}

.app-shell .conflict-decision-form [aria-invalid="true"],
.app-shell .conflict-completion-form [aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px #b4232c18;
}

.app-shell .conflict-error-state[role="alert"],
.app-shell .conflict-protected-state[role="alert"] {
    border-color: #e4aeb3;
    background: var(--danger-soft);
}

@media (max-width: 720px) {
    .app-shell .conflict-workflow {
        grid-template-columns: 1fr;
    }

    .app-shell .conflict-score-value {
        grid-template-columns: minmax(3rem, 1fr) auto;
    }

    .app-shell .conflict-form-actions > * {
        flex: 1 1 12rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .conflict-candidate,
    .app-shell .conflict-check-row {
        transition: none;
    }
}
.library-spotlight{border-color:#c9d8f5;background:linear-gradient(120deg,#edf4ff,#f9fbff 62%,#fff)}
.library-tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.25rem;padding:.35rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface)}
.library-tabs a{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem .8rem;border-radius:.5rem;color:var(--ink);font-weight:700}
.library-tabs a:hover,.library-tabs a:focus-visible,.library-tabs a.active{background:var(--subtle);color:var(--brand)}
.library-tabs a span{color:var(--muted);font-size:.75rem;font-weight:500}
.library-sync-state{padding:.25rem .55rem;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.7rem;font-weight:700;white-space:nowrap}
.library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
.library-card{display:grid;gap:1rem;padding:1rem;border:1px solid var(--border);border-radius:.7rem;background:var(--surface)}
.library-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.library-card-header>div{display:flex;gap:.7rem;min-width:0}
.library-card-header h3{margin:0 0 .2rem;font-size:1rem}
.library-card-header p{margin:0;color:var(--muted);font-size:.8rem}
.library-card-icon{display:grid;place-items:center;width:2rem;height:2rem;flex:none;border-radius:.55rem;background:#e8edff;color:var(--brand);font-weight:700}
.library-status{display:inline-flex;align-items:center;min-height:1.65rem;padding:.2rem .55rem;border:1px solid var(--border);border-radius:999px;background:var(--subtle);color:var(--muted);font-size:.7rem;font-weight:700;text-transform:capitalize;white-space:nowrap}
.library-status-published{border-color:#b9e2cf;background:#f0fbf5;color:var(--success)}
.library-status-draft{border-color:#edcf96;background:#fffaf1;color:var(--warning)}
.library-status-deprecated,.library-status-retired{color:var(--muted)}
.library-card-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:0}
.library-card-meta div{display:grid;gap:.15rem;padding-top:.55rem;border-top:1px solid var(--border);min-width:0}
.library-card-meta dt{color:var(--muted);font-size:.68rem;font-weight:700;text-transform:uppercase}
.library-card-meta dd{margin:0;font-size:.78rem;overflow-wrap:anywhere}
.library-card-actions{display:flex;justify-content:flex-end}
.library-card-actions .secondary-button{margin-top:0}
.library-state{display:grid;justify-items:center;gap:.5rem;min-height:11rem;padding:2rem 1rem;text-align:center;align-content:center}
.library-state h3{margin:.2rem 0 0;font-size:1rem}
.library-state p{max-width:38rem;margin:0}
.library-state .primary-button,.library-state .secondary-button{margin-top:.3rem}
.library-session-note{margin:1rem 0 0;padding:.7rem .85rem;border:1px solid #edcf96;border-radius:.6rem;background:#fffaf1;color:#714807;font-size:.8rem}
.library-dialog{max-height:min(92vh,760px);overflow:auto}
@media (max-width:900px){.library-grid{grid-template-columns:1fr}}
@media (max-width:560px){.library-card-header{align-items:flex-start;flex-direction:column}.library-card-meta{grid-template-columns:1fr}.library-tabs{display:grid;grid-template-columns:1fr}.library-tabs a{justify-content:space-between}}
.relationship-state{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(148,163,184,.25)}
.relationship-list{display:grid;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none}
.relationship-row{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.8rem .9rem;border:1px solid rgba(148,163,184,.25);border-radius:.65rem}
.relationship-row strong,.relationship-row span{display:block}
.relationship-row>div:first-child{min-width:0}
.relationship-row>div:first-child span{color:var(--muted,#64748b);font-size:.85rem}
.relationship-meta{display:grid;gap:.2rem;text-align:right;color:var(--muted,#64748b);font-size:.8rem;white-space:nowrap}
.relationship-empty{padding:1.5rem 1rem}
.relationship-dialog{max-height:min(92vh,760px);overflow:auto}
@media (max-width:720px){.relationship-row{align-items:flex-start;flex-direction:column}.relationship-meta{text-align:left;white-space:normal}.relationship-state .panel-header{align-items:flex-start;flex-direction:column}}

.matter-detail{display:grid;gap:1.25rem}
.matter-detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.matter-detail-header h2{margin:0 0 .35rem;font-size:1.5rem;letter-spacing:-.03em}
.matter-detail-header p{margin:0}
.matter-context-section{padding:1rem 0 1.1rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.matter-context-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:0}
.matter-context-grid div{display:grid;gap:.15rem;padding:.7rem .8rem;border:1px solid var(--border);border-radius:.6rem;background:var(--subtle)}
.matter-context-grid dt{color:var(--muted);font-size:.68rem;font-weight:700;text-transform:uppercase}
.matter-context-grid dd{margin:0;font-size:.82rem;font-weight:700;overflow-wrap:anywhere}
.matter-readiness{margin:.75rem 0 0;padding:.7rem .85rem;border:1px solid #edcf96;border-radius:.6rem;background:#fffaf1;color:#714807;font-size:.8rem}
.matter-readiness.is-ready{border-color:#b7d9c7;background:#f2fbf6;color:var(--success)}
.matter-readiness.needs-attention{color:var(--warning)}
.matter-status-pill,.matter-classification,.matter-tag,.matter-count{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:999px;background:var(--subtle);color:var(--muted);font-size:.72rem;font-weight:700;text-transform:capitalize;white-space:nowrap}
.matter-status-pill{min-height:2rem;padding:.25rem .75rem}
.matter-status-pill[data-matter-state="active"]{border-color:#b9e2cf;background:#f0fbf5;color:var(--success)}
.matter-status-pill[data-matter-state="on_hold"]{border-color:#edcf96;background:#fffaf1;color:var(--warning)}
.matter-status-pill[data-matter-state="closed"],.matter-status-pill[data-matter-state="archived"]{color:var(--muted)}
.matter-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.matter-detail-section{min-width:0;padding-top:1.1rem;border-top:1px solid var(--border)}
.matter-detail-grid>.matter-detail-section:nth-child(-n+2){padding-top:0;border-top:0}
.matter-section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.9rem}
.matter-section-heading h3{margin:0;font-size:1rem;letter-spacing:-.01em}
.matter-section-heading .eyebrow{margin-bottom:.2rem}
.matter-classification,.matter-count{min-height:1.7rem;padding:.2rem .6rem}
.matter-count{min-width:1.7rem}
.matter-access-section>p{margin:0;color:var(--muted);font-size:.86rem}
.matter-access-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:1rem 0 0}
.matter-access-metrics div{display:grid;gap:.15rem;padding:.7rem .75rem;border:1px solid var(--border);border-radius:.6rem;background:var(--subtle)}
.matter-access-metrics dt{color:var(--muted);font-size:.7rem;font-weight:700;text-transform:uppercase}
.matter-access-metrics dd{margin:0;font-size:1rem;font-weight:700}
.matter-participant-list,.matter-history-list,.matter-timeline-list{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.matter-participant-row,.matter-history-row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.7rem .8rem;border:1px solid var(--border);border-radius:.6rem}
.matter-participant-row>div,.matter-history-row>div{display:grid;gap:.12rem;min-width:0}
.matter-participant-row strong,.matter-history-row strong{font-size:.82rem}
.matter-participant-row span,.matter-history-row span{color:var(--muted);font-size:.76rem;overflow-wrap:anywhere}
.matter-participant-icon{display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:.5rem;background:#e8edff;color:var(--brand);font-size:.7rem;font-weight:800;flex:none}
.matter-participant-icon.member{background:#e5f5ed;color:var(--success)}
.matter-tag{padding:.2rem .5rem;font-size:.68rem}
.matter-history-row{align-items:flex-start}
.matter-history-row time,.matter-timeline-heading time{color:var(--muted);font-size:.72rem;white-space:nowrap}
.matter-timeline-section{grid-column:1 / -1}
.matter-timeline-list{position:relative}
.matter-timeline-list::before{position:absolute;top:.7rem;bottom:.7rem;left:.28rem;width:1px;background:var(--border);content:''}
.matter-timeline-row{position:relative;display:grid;grid-template-columns:1rem 1fr;gap:.75rem;min-width:0}
.matter-timeline-marker{z-index:1;width:.62rem;height:.62rem;margin-top:.35rem;border:2px solid var(--surface);border-radius:50%;background:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.matter-timeline-row>div{min-width:0;padding:0 0 .85rem}
.matter-timeline-heading{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.matter-timeline-heading strong{font-size:.82rem;text-transform:capitalize}
.matter-timeline-row p{margin:.2rem 0 0;color:var(--muted);font-size:.8rem}
.matter-empty-state,.matter-detail-state{display:grid;justify-items:start;gap:.35rem;padding:.9rem;border:1px dashed var(--border);border-radius:.6rem;background:var(--subtle)}
.matter-empty-state strong,.matter-detail-state strong{font-size:.82rem}
.matter-empty-state p,.matter-detail-state p{margin:0;font-size:.8rem}
.matter-detail-error{padding:1.25rem}
.matter-detail-error .secondary-button{margin-top:.35rem}
.matter-state-section{padding:1rem 0 1.15rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.matter-state-section>p{margin:.35rem 0 0}
.matter-version{display:inline-flex;align-items:center;min-height:1.7rem;padding:.2rem .6rem;border:1px solid var(--border);border-radius:999px;background:var(--subtle);color:var(--muted);font-size:.72rem;font-weight:700;white-space:nowrap}
.matter-state-controls{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.matter-state-controls .matter-empty-state{width:100%}
.matter-state-controls[data-matter-transition-state="loading"]{opacity:.68;pointer-events:none}
.matter-transition-reason{max-width:38rem;margin-top:.8rem}
.matter-transition-reason label{display:grid;gap:.35rem;color:var(--ink);font-size:.82rem;font-weight:700}
.matter-transition-reason textarea{min-height:4.2rem}
.matter-activation-gate{display:grid;gap:.2rem;margin-top:.8rem;padding:.75rem .9rem;border:1px solid #edcf96;border-radius:.6rem;background:#fffaf1;color:#714807}
.matter-activation-gate strong{font-size:.8rem}
.matter-activation-gate p{margin:0;font-size:.8rem}
.matter-transition-status{min-height:1.2rem;margin:.65rem 0 0;color:var(--muted);font-size:.8rem}
.matter-transition-status[data-state="submitting"]{color:var(--muted)}
.matter-transition-status[data-state="success"]{color:var(--success)}
.matter-transition-status[data-state="conflict"]{color:#714807}
.matter-transition-status[data-state="error"]{color:var(--danger)}
.matter-transition-status .quiet-button{margin-left:.35rem}
.matter-transition-loading{margin-top:.6rem}
@media (max-width:720px){.matter-detail-header{flex-direction:column}.matter-detail-grid{grid-template-columns:1fr}.matter-detail-grid>.matter-detail-section:nth-child(2){padding-top:1.1rem;border-top:1px solid var(--border)}.matter-timeline-section{grid-column:auto}.matter-access-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.matter-participant-row,.matter-history-row{align-items:flex-start;flex-wrap:wrap}.matter-history-row time{margin-left:2.6rem}.matter-timeline-heading{align-items:flex-start;flex-direction:column;gap:.15rem}}
@media (max-width:560px){.matter-state-controls{align-items:stretch;flex-direction:column}.matter-state-controls button{width:100%}.matter-section-heading{align-items:flex-start;flex-direction:column}.matter-version{white-space:normal}}
.matter-party-refresh{display:flex;align-items:center;gap:.65rem}
.matter-party-refresh span{color:var(--muted);font-size:.78rem}
.matter-party-refresh .quiet-button{margin-top:0}
.matter-party-list{margin-top:1rem}
.matter-party-row-meta{display:grid;justify-items:end;gap:.25rem;text-align:right}
.matter-party-row-meta>span{color:var(--muted);font-size:.75rem}
.matter-party-form{max-width:none;padding-top:1rem;border-top:1px solid var(--border)}
.matter-party-form-actions{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.matter-party-form-actions .quiet-button,
.matter-party-form-actions .secondary-button{margin-top:0}
.matter-party-clear-state{margin:1rem 0 0;padding:.75rem .9rem;border:1px dashed var(--border);border-radius:.6rem;background:var(--subtle)}
.matter-party-error{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem .9rem;border:1px solid #edcf96;border-radius:.6rem;background:#fffaf1;color:#714807}
.matter-party-error p{margin:0}
.matter-party-error .quiet-button{margin-top:0}
[data-matter-parties][data-refresh-state="refreshing"]{opacity:.72}
@media (max-width:720px){.matter-party-refresh{align-items:flex-start;flex-direction:column;gap:.35rem}.matter-party-row-meta{justify-items:start;text-align:left}.matter-party-error{align-items:flex-start;flex-direction:column}}
@media (max-width:900px){.drafting-matter-context{grid-template-columns:1fr 1fr}.drafting-matter-context-action{justify-items:start}.drafting-matter-readiness{text-align:left}}
@media (max-width:560px){.drafting-matter-context{grid-template-columns:1fr}.drafting-matter-context-meta{grid-template-columns:1fr}.drafting-matter-context-action .secondary-button{width:100%}.matter-context-grid{grid-template-columns:1fr}}

./* Matter participant controls keep role meaning and server-confirmed state visible. */
.app-shell .matter-party-state {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--panel-border, var(--border));
    border-radius: 14px;
    background: linear-gradient(180deg, var(--surface), var(--surface-inset, var(--subtle)));
    box-shadow: 0 1px 4px #1720330b;
}
.app-shell .matter-party-state[data-state="refreshing"] {
    opacity: .72;
}
.app-shell .matter-party-state[data-state="conflict"] {
    border-color: #edcf96;
    background: #fffaf1;
}
.app-shell .matter-party-state[data-state="error"] {
    border-color: color-mix(in srgb, var(--danger) 32%, var(--border));
}
.matter-party-loading {
    display: grid;
    gap: .55rem;
    min-height: 7rem;
    align-content: center;
}
.matter-party-loading p {
    margin: .15rem 0 0;
}
.matter-party-loading-bar {
    display: block;
    width: min(100%, 30rem);
    height: .65rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--subtle), color-mix(in srgb, var(--brand) 14%, var(--subtle)), var(--subtle));
    background-size: 220% 100%;
    animation: matter-party-loading 1.4s ease-in-out infinite;
}
.matter-party-loading-bar:nth-child(2) { width: min(75%, 22rem); }
.matter-party-loading-bar:nth-child(3) { width: min(55%, 16rem); }
.matter-party-form {
    display: grid;
    gap: .8rem;
}
.matter-party-form-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.matter-party-form-heading div {
    display: grid;
    gap: .2rem;
}
.matter-party-form-heading strong {
    font-size: .9rem;
}
.matter-party-form-heading span {
    color: var(--muted);
    font-size: .78rem;
}
.matter-party-form-badge {
    flex: none;
    padding: .25rem .55rem;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--border));
    border-radius: 999px;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 7%, var(--surface));
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}
.matter-party-form select {
    min-height: 42px;
}
.matter-party-form-actions {
    justify-content: flex-end;
}
.matter-party-form #matter-party-role-help {
    max-width: 62rem;
}
.matter-party-role {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: .2rem .55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--subtle);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.matter-party-role[data-role="client"] {
    border-color: #b9e2cf;
    background: #f0fbf5;
    color: var(--success);
}
.matter-party-role[data-role="participant"] {
    border-color: #c7d3f6;
    background: #f1f4ff;
    color: var(--brand);
}
.matter-party-error {
    min-height: 4.5rem;
}
.matter-party-error strong {
    display: block;
    margin-bottom: .2rem;
    color: inherit;
}
.matter-party-error p {
    color: inherit;
    font-size: .8rem;
}
.matter-party-error .quiet-button,
.matter-party-refresh .quiet-button,
.matter-party-form-actions .quiet-button,
.matter-party-form-actions .secondary-button {
    min-height: 36px;
}
@keyframes matter-party-loading {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .matter-party-loading-bar { animation: none; }
}
@media (max-width: 720px) {
    .app-shell .matter-party-state { padding: 1rem; }
    .matter-party-form-heading { flex-direction: column; }
    .matter-party-form-badge { align-self: flex-start; }
    .matter-party-form .form-row { grid-template-columns: 1fr; }
    .matter-party-form-actions { justify-content: stretch; }
    .matter-party-form-actions > * { flex: 1 1 12rem; }
}
@media (max-width: 420px) {
    .matter-party-form-actions { align-items: stretch; flex-direction: column; }
    .matter-party-form-actions > * { width: 100%; }
}
@media (forced-colors: active) {
    .matter-party-role,
    .matter-party-form-badge,
    .app-shell .matter-party-state { border-color: ButtonText; }
}
[data-theme="dark"] .app-shell .matter-party-state[data-state="conflict"] {
    background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}
[data-theme="dark"] .matter-party-role[data-role="client"] {
    border-color: color-mix(in srgb, var(--success) 55%, var(--border));
    background: color-mix(in srgb, var(--success) 14%, var(--surface));
}
[data-theme="dark"] .matter-party-role[data-role="participant"] {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
    background: color-mix(in srgb, var(--brand) 14%, var(--surface));
}

admin-tabs{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.25rem;padding:.35rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface)}
.admin-tabs a{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem .8rem;border-radius:.5rem;color:var(--ink);font-weight:700}
.admin-tabs a:hover,.admin-tabs a:focus-visible{background:var(--subtle);color:var(--brand)}
.admin-tabs a span{color:var(--muted);font-size:.75rem;font-weight:500}
.admin-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);gap:1.25rem}
.admin-panel{min-width:0}
.admin-users-panel{grid-column:span 1}
.admin-sessions-panel{grid-column:span 1}
.admin-roles-panel{grid-column:1 / -1}
.admin-state{min-height:7rem}
.admin-state-badge{padding:.25rem .5rem;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.7rem;font-weight:700;white-space:nowrap}
.admin-user-summary{display:flex;align-items:center;gap:.75rem;padding:.85rem;border:1px solid var(--border);border-radius:.65rem;background:var(--subtle)}
.admin-user-summary>div{min-width:0}
.admin-user-summary strong,.admin-user-summary span{display:block;overflow-wrap:anywhere}
.admin-user-summary span{color:var(--muted);font-size:.8rem}
.admin-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1rem}
.admin-meta-grid div{display:grid;gap:.2rem;padding:.7rem;border-top:1px solid var(--border)}
.admin-meta-grid small,.admin-session-card small{color:var(--muted);font-size:.72rem}
.admin-meta-grid strong{font-size:.85rem;overflow-wrap:anywhere}
.admin-invite-form{max-width:none;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.admin-form-heading{display:grid;gap:.2rem}
.admin-form-heading span{color:var(--muted);font-size:.78rem;font-weight:400}
.admin-invite-form .primary-button{justify-self:start}
.admin-subsection{display:grid;gap:.6rem;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.admin-list{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.admin-list li{display:flex;justify-content:space-between;gap:.75rem;padding:.65rem .75rem;border:1px solid var(--border);border-radius:.55rem}
.admin-list li span,.admin-list li small{overflow-wrap:anywhere}
.admin-list li small{color:var(--muted)}
.admin-note{margin:1rem 0 0;color:var(--muted);font-size:.8rem}
.admin-protected-state{display:grid;justify-items:start;gap:.55rem;padding:.9rem;border:1px dashed var(--border);border-radius:.65rem;background:var(--subtle)}
.admin-protected-state p{margin:0}
.admin-protected-state .secondary-button{min-height:36px;padding:0 .75rem}
.admin-empty-state{display:grid;justify-items:start;gap:.45rem;padding:1rem;border:1px dashed var(--border);border-radius:.65rem;background:var(--subtle)}
.admin-empty-state strong{font-size:.85rem}
.admin-empty-state p{margin:0}
.admin-membership-summary{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-bottom:.7rem}
.admin-membership-summary strong{font-size:.85rem}
.admin-membership-summary span{color:var(--muted);font-size:.75rem}
.admin-member-list{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.admin-member-row{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.75rem;border:1px solid var(--border);border-radius:.6rem;background:var(--surface)}
.admin-member-identity{display:flex;align-items:center;gap:.65rem;min-width:0}
.admin-member-identity>div{min-width:0}
.admin-member-identity strong,.admin-member-identity span{display:block;overflow-wrap:anywhere}
.admin-member-identity>div>span{color:var(--muted);font-size:.76rem}
.admin-current-member{display:inline-block!important;margin-left:.3rem;padding:.12rem .35rem;border-radius:999px;background:#e8edff;color:var(--brand)!important;font-size:.65rem!important;font-weight:700}
.admin-member-state{display:grid;justify-items:end;gap:.2rem;flex:none;text-align:right}
.admin-member-state small{color:var(--muted);font-size:.7rem}
.admin-role-pill,.admin-state-pill{display:inline-flex;align-items:center;min-height:1.45rem;padding:.15rem .45rem;border:1px solid var(--border);border-radius:999px;font-size:.68rem;line-height:1.2;white-space:nowrap}
.admin-role-pill{background:#eef2ff;color:var(--brand)}
.admin-state-pill{background:var(--subtle);color:var(--muted)}
.admin-state-active{border-color:#b9e2cf;background:#f0fbf5;color:var(--success)}
.admin-state-invited{border-color:#c9d8f5;background:#edf4ff;color:var(--brand)}
.admin-state-suspended{border-color:#edcf96;background:#fffaf1;color:var(--warning)}
.admin-state-closed,.admin-state-unknown{color:var(--muted)}
.admin-session-card{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem;border:1px solid #b9e2cf;border-radius:.65rem;background:#f0fbf5}
.admin-session-card>div{display:grid;gap:.2rem;min-width:0}
.admin-session-card strong,.admin-session-card span{overflow-wrap:anywhere}
.admin-session-card span{color:var(--muted);font-size:.8rem}
.session-status-dot{width:.65rem;height:.65rem;margin-top:.3rem;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px #d9f4e5;flex:none}
.admin-session-summary{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.75rem;color:var(--muted);font-size:.78rem}
.admin-session-summary strong{color:var(--brand);font-size:1.35rem;letter-spacing:-.04em}
.admin-session-inventory{display:grid;gap:.65rem}
.admin-session-card{display:grid;gap:.75rem;border-color:var(--border);background:var(--surface)}
.admin-session-card.is-current{border-color:#9fcfb3;background:#f0fbf5;box-shadow:0 0 0 2px #2d8a571a}
.admin-session-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.admin-session-card-header>div{display:grid;gap:.2rem;min-width:0}
.admin-session-card-header strong{font-size:.9rem}
.admin-session-badge{padding:.25rem .5rem;border-radius:999px;background:var(--subtle);color:var(--muted)!important;font-size:.68rem!important;font-weight:700;white-space:nowrap}
.admin-session-card.is-current .admin-session-badge{background:#d9f4e5;color:#17653a!important}
.admin-session-card[data-admin-session-state="expiring"]{border-color:#edcf96;background:#fffaf1}
.admin-session-card[data-admin-session-state="expiring"] .admin-session-badge{background:#fff2d8;color:var(--warning)!important}
.admin-session-card[data-admin-session-state="revoked"],
.admin-session-card[data-admin-session-state="expired"]{border-color:#e4c5c8;background:#fff7f7}
.admin-session-card[data-admin-session-state="revoked"] .admin-session-badge,
.admin-session-card[data-admin-session-state="expired"] .admin-session-badge{background:#fbe9ea;color:var(--danger)!important}
.admin-session-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:0;padding-top:.65rem;border-top:1px solid var(--border)}
.admin-session-meta div{display:grid;gap:.15rem}
.admin-session-meta dt{color:var(--muted);font-size:.68rem}
.admin-session-meta dd{margin:0;font-size:.76rem;overflow-wrap:anywhere}
.admin-session-empty{margin-top:.25rem}
.admin-session-terminal-note{margin:0;color:var(--danger);font-size:.76rem}
.admin-session-section{display:grid;gap:.8rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--border)}
.admin-session-section:first-child{margin-top:0;padding-top:0;border-top:0}
.admin-session-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.admin-session-section-heading h3{margin:0 0 .15rem;font-size:.92rem}
.admin-session-safety{padding:.25rem .5rem;border:1px solid #b9e2cf;border-radius:999px;background:#f0fbf5;color:var(--success);font-size:.68rem;font-weight:700;white-space:nowrap}
.admin-current-session-card{display:grid;gap:.75rem}
.admin-session-revocation{display:grid;gap:.35rem;padding:.75rem .85rem;border:1px solid #edcf96;border-radius:.65rem;background:#fffaf1}
.admin-session-revocation .admin-note{margin:0}
.admin-session-revocation .secondary-button{justify-self:start;margin-top:.25rem}
.admin-session-revocation .auth-status{min-height:1.2rem;margin:.1rem 0 0}
.admin-session-revocation .auth-status[data-state="success"]{color:var(--success)}
.admin-session-revocation .auth-status[data-state="unauthorized"],
.admin-session-revocation .auth-status[data-state="error"]{color:var(--danger)}
.admin-role-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.admin-role-card{display:grid;gap:.55rem;min-width:0;padding:.9rem;border:1px solid var(--border);border-radius:.65rem;background:var(--surface)}
.admin-role-card.is-current{border-color:var(--brand);box-shadow:0 0 0 2px #2448a81f}
.admin-role-heading{display:flex;align-items:center;gap:.6rem}
.admin-role-heading>div{min-width:0;flex:1}
.admin-role-count{color:var(--muted);font-size:.68rem;font-weight:700;white-space:nowrap}
.admin-role-heading h3{margin:0;font-size:.95rem}
.admin-role-icon{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:.5rem;background:#e8edff;color:var(--brand);font-weight:700}
.admin-role-card p{margin:0;color:var(--muted);font-size:.8rem}
.admin-role-card small{color:var(--muted);font-size:.72rem;line-height:1.45}
.admin-role-current{display:block;color:var(--brand);font-size:.68rem;font-weight:700}
[data-admin-invite-form][hidden]{display:none}
@media (max-width:900px){.admin-grid{grid-template-columns:1fr}.admin-users-panel,.admin-sessions-panel,.admin-roles-panel{grid-column:auto}.admin-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.admin-tabs{display:grid;grid-template-columns:1fr}.admin-tabs a{justify-content:space-between}.admin-meta-grid,.admin-role-grid,.admin-session-meta{grid-template-columns:1fr}.admin-list li{align-items:flex-start;flex-direction:column}.admin-invite-form .form-row{grid-template-columns:1fr}.admin-session-card-header,.admin-session-section-heading{flex-direction:column}.admin-member-row{align-items:flex-start;flex-direction:column}.admin-member-state{justify-items:start;text-align:left}.admin-membership-summary{align-items:flex-start;flex-direction:column;gap:.15rem}.admin-session-safety{white-space:normal}}

.document-detail{display:grid;gap:1.25rem}
.document-detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.document-detail-header h2{margin:0 0 .35rem;font-size:1.35rem;letter-spacing:-.02em}
.document-detail-header p{max-width:58rem}
.document-detail-id{display:grid;gap:.2rem;justify-items:end;max-width:18rem;text-align:right}
.document-detail-id span,.document-version-metric span{color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.document-detail-id code{overflow-wrap:anywhere;color:var(--muted);font-size:.75rem}
.document-detail-section{padding-top:1.1rem;border-top:1px solid var(--border)}
.document-detail-section:first-of-type{padding-top:0;border-top:0}
.document-detail-section .panel-header{margin-bottom:1rem}
.document-statuses{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.document-status{display:inline-flex;align-items:center;min-height:1.8rem;padding:.2rem .65rem;border:1px solid var(--border);border-radius:999px;background:var(--subtle);color:var(--muted);font-size:.75rem;font-weight:700;text-transform:capitalize}
.document-status-content[data-content-state="ready"]{border-color:#b9e2cf;background:#f0fbf5;color:var(--success)}
.document-status-content[data-content-state="quarantined"]{border-color:#edcf96;background:#fffaf1;color:var(--warning)}
.document-status-record[data-record-state="archived"]{color:var(--muted)}
.document-version-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.document-version-metric{display:grid;gap:.2rem;padding:.8rem .9rem;border:1px solid var(--border);border-radius:.65rem;background:var(--subtle)}
.document-version-metric strong{font-size:1rem;text-transform:capitalize}
.document-version-metadata{margin-top:1rem}
.document-version-metadata code{font-size:.75rem;overflow-wrap:anywhere}
.document-immutable-badge{display:inline-flex;align-items:center;min-height:1.7rem;padding:.2rem .6rem;border:1px solid #b9e2cf;border-radius:999px;background:#f0fbf5;color:var(--success);font-size:.72rem;font-weight:700;white-space:nowrap}
.document-export-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem}
.document-export-actions .secondary-button{margin-top:0}
.document-download-unavailable{padding:.55rem .7rem;border:1px dashed var(--border);border-radius:.55rem;color:var(--muted);font-size:.78rem}
.document-export-note{margin:1rem 0 0;padding:.75rem .9rem;border:1px solid #c9d8f5;border-radius:.6rem;background:#f3f6ff;color:#27437f;font-size:.82rem}
.document-state-note,.document-editor-note{margin:1rem 0 0;padding:.75rem .9rem;border:1px solid #edcf96;border-radius:.6rem;background:#fffaf1;color:#714807;font-size:.82rem}
.document-client-list{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.document-client-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem .9rem;border:1px solid var(--border);border-radius:.65rem}
.document-client-row>div{display:grid;gap:.15rem;min-width:0}
.document-client-row>div span{color:var(--muted);font-size:.8rem;text-transform:capitalize}
.document-client-row strong{overflow-wrap:anywhere}
.document-client-role{padding:.2rem .55rem;border-radius:999px;background:var(--subtle);color:var(--muted);font-size:.72rem;font-weight:700;text-transform:capitalize;white-space:nowrap}
.document-client-empty{padding:.9rem 0}
.document-client-empty strong{display:block;margin-bottom:.25rem}
.document-client-assignment-form{gap:.75rem}
.document-client-assignment-form select{min-height:9rem}
.document-client-assignment-status{margin:0;padding:.7rem .8rem;border:1px solid var(--border);border-radius:.6rem;background:var(--subtle);font-size:.82rem}
.document-client-assignment-status[data-document-client-state="loading"],
.document-client-assignment-status[data-document-client-state="submitting"]{color:var(--muted)}
.document-client-assignment-status[data-document-client-state="ready"]{border-color:#b9d0ff;background:#f3f6ff;color:var(--brand)}
.document-client-assignment-status[data-document-client-state="empty"]{border-color:#d9dee7;background:var(--subtle);color:var(--muted)}
.document-client-assignment-status[data-document-client-state="success"]{border-color:#b9e2cf;background:#f0fbf5;color:var(--success)}
.document-client-assignment-status[data-document-client-state="conflict"]{border-color:#edcf96;background:#fffaf1;color:#714807}
.document-client-assignment-status[data-document-client-state="error"]{border-color:#f1bcc0;background:#fff5f5;color:var(--danger)}
.document-client-assignment-form[data-document-client-dialog-state="loading"] select,
.document-client-assignment-form[data-document-client-dialog-state="submitting"] select{cursor:wait}
.document-client-assignment-form[data-document-client-dialog-state="success"] .modal-actions{justify-content:flex-end}
.document-client-assignment-form[data-document-client-dialog-state="success"] select{opacity:.7}
.document-metadata-form{max-width:52rem}
.document-metadata-form .primary-button{justify-self:start}
@media (max-width:720px){.document-detail-header{flex-direction:column}.document-detail-id{justify-items:start;text-align:left}.document-version-grid{grid-template-columns:1fr}.document-client-row{align-items:flex-start;flex-direction:column}.document-client-role{white-space:normal}}
@media (max-width:560px){.document-export-actions{align-items:stretch;flex-direction:column}.document-export-actions .secondary-button,.document-download-unavailable{width:100%;text-align:center}.document-immutable-badge{white-space:normal}}

.party-dialog{width:min(100%,760px);max-height:min(92vh,900px);overflow:auto}
.party-dialog .modal-header{position:sticky;top:-24px;z-index:1;margin:0 -24px 8px;padding:0 24px 18px;background:var(--surface)}
.party-form{max-width:none}
.party-form input,.party-form select,.party-form textarea{min-width:0;width:100%;border:1px solid var(--border);border-radius:7px;padding:10px 12px;color:var(--ink);background:var(--surface)}
.party-form textarea{resize:vertical}
.party-form input:focus-visible,.party-form select:focus-visible,.party-form textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 25%,transparent);outline-offset:1px;border-color:var(--brand)}
.party-form [disabled]{cursor:not-allowed;opacity:.7}
.party-form .form-section-heading>div{display:grid;gap:2px}
.party-form .form-section-heading .quiet-button{margin-top:0;white-space:nowrap}
.party-repeater{display:grid;gap:10px}
.party-repeat-row{position:relative;display:grid;grid-template-columns:minmax(120px,.7fr) minmax(180px,1.4fr) minmax(120px,.7fr) auto;gap:10px;align-items:end;padding:12px 42px 12px 12px;border:1px solid var(--border);border-radius:8px;background:var(--subtle)}
.party-repeat-row label{display:grid;gap:5px;min-width:0;font-size:12px;font-weight:650}
.party-repeat-row .party-remove-row{position:absolute;top:8px;right:8px;width:30px;height:30px}
.party-repeat-row .form-row{align-items:end}
.party-address-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.party-address-row>label:first-child{grid-column:1 / -1}
.party-address-row>.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.party-readonly-list{display:grid;gap:8px}
.party-readonly-value{display:grid;grid-template-columns:minmax(100px,.65fr) minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--subtle)}
.party-readonly-value code{overflow-wrap:anywhere;color:var(--ink)}
.party-readonly-value .muted{font-size:11px;text-align:right}
.party-detail{display:grid;gap:18px}
.party-detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.party-detail-header h2{margin:0 0 4px;font-size:1.45rem;letter-spacing:-.03em}
.party-detail-header p{margin:0}
.party-detail-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.party-status-pill{display:inline-flex;align-items:center;min-height:30px;padding:4px 10px;border:1px solid var(--border);border-radius:999px;background:var(--subtle);color:var(--muted);font-size:11px;font-weight:700;text-transform:capitalize}
.party-status-pill[data-party-state="active"]{border-color:#b9e2cf;background:#f0fbf5;color:var(--success)}
.party-profile-summary,.party-detail-section{min-width:0;padding:16px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.party-profile-summary .metadata-grid{margin:0;grid-template-columns:minmax(120px,.35fr) 1fr}
.party-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.party-detail-section{display:grid;gap:12px}
.party-detail-section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.party-detail-section-heading h3{margin:0;font-size:1rem}
.party-detail-section-heading p{margin:3px 0 0;font-size:12px}
.party-detail-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.party-detail-row{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 0;border-top:1px solid var(--border)}
.party-detail-row:first-child{border-top:0;padding-top:0}
.party-detail-row>div{display:grid;gap:2px;min-width:0}
.party-detail-row strong,.party-detail-row code{overflow-wrap:anywhere}
.party-detail-row>div>span{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.party-detail-icon{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:7px;background:#e8edff;color:var(--brand);font-size:13px}
.party-detail-row.sensitive{align-items:flex-start}
.party-detail-row.sensitive code{font-size:12px;color:var(--muted)}
.party-sensitive-badge{margin-left:auto;padding:3px 7px;border-radius:999px;background:var(--subtle);color:var(--muted);font-size:10px;font-weight:700;white-space:nowrap}
.party-detail-empty{display:grid;gap:3px;padding:12px;border:1px dashed var(--border);border-radius:8px;background:var(--subtle)}
.party-detail-empty strong{font-size:13px}
.party-detail-empty p{margin:0;font-size:12px}
@media (max-width:720px){
    .party-dialog{padding:18px}
    .party-dialog .modal-header{top:-18px;margin:0 -18px 8px;padding:0 18px 16px}
    .party-repeat-row,.party-address-row{grid-template-columns:1fr}
    .party-address-row>label:first-child{grid-column:auto}
    .party-address-row>.form-row{grid-template-columns:1fr}
    .party-readonly-value{grid-template-columns:1fr;padding-right:42px}
    .party-readonly-value .muted{text-align:left}
    .party-detail-grid{grid-template-columns:1fr}
    .party-detail-header{flex-direction:column}
    .party-detail-header-actions{justify-content:flex-start}
}
@media (max-width:480px){
    .party-form .form-section-heading{align-items:flex-start;flex-direction:column}
    .party-form .form-section-heading .quiet-button{width:100%}
    .party-detail-header-actions{align-items:stretch;flex-direction:column;width:100%}
    .party-detail-header-actions .secondary-button{width:100%}
}

.client-documents-state{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(148,163,184,.25)}
.client-documents-state .panel-header{align-items:flex-start}
.client-documents-state .panel-header .secondary-button{margin-top:0;white-space:nowrap}
.client-document-list{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.client-document-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem .9rem;border:1px solid var(--border);border-radius:.65rem}
.client-document-main{display:flex;align-items:center;gap:.7rem;min-width:0}
.client-document-main>div{display:grid;gap:.15rem;min-width:0}
.client-document-main strong,.client-document-main span{overflow-wrap:anywhere}
.client-document-main>div>span{color:var(--muted);font-size:.8rem;text-transform:capitalize}
.client-document-state{padding:.2rem .55rem;border-radius:999px;background:var(--subtle);color:var(--muted);font-size:.72rem;font-weight:700;text-transform:capitalize;white-space:nowrap}
.client-document-empty{padding:1.5rem 1rem}
@media (max-width:720px){.client-documents-state .panel-header{align-items:flex-start;flex-direction:column}.client-documents-state .panel-header .secondary-button{white-space:normal}.client-document-row{align-items:flex-start;flex-direction:column}.client-document-state{white-space:normal}}

/* MVP workspace refinement: calmer surfaces, clearer hierarchy, and resilient states. */
:root {
    --canvas: #f5f7fb;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --subtle: #eef2f7;
    --subtle-strong: #e5ebf3;
    --ink: #172033;
    --muted: #5d687a;
    --border: #d7dee9;
    --border-strong: #c1cad8;
    --brand: #3157c8;
    --brand-hover: #2445a9;
    --brand-soft: #edf2ff;
    --success: #18774f;
    --success-soft: #edf9f2;
    --warning: #9a5c08;
    --warning-soft: #fff8e9;
    --danger: #b4232c;
    --danger-soft: #fff1f2;
    --purple: #6741a5;
    --focus-ring: #7d9cff;
    --shadow-xs: 0 1px 2px #17203310;
    --shadow-sm: 0 2px 8px #1720330d, 0 10px 26px #1720330b;
    --shadow-md: 0 10px 30px #17203314, 0 2px 5px #1720330b;
    --radius-sm: 7px;
    --radius-md: 11px;
    --radius-lg: 15px;
}

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 100% 0, #eaf0ff 0, transparent 32rem),
        var(--canvas);
    color: var(--ink);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
select,
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
}

button:disabled,
select:disabled,
input:disabled,
textarea:disabled {
    cursor: not-allowed;
}

::selection {
    background: #cbd7ff;
    color: #142254;
}

::placeholder {
    color: #8b96a7;
    opacity: 1;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

:where(a, button):focus:not(:focus-visible) {
    outline: none;
}

.app-shell {
    min-height: 100svh;
    background: transparent;
}

.app-shell .sidebar {
    position: sticky;
    top: 0;
    height: 100svh;
    background: color-mix(in srgb, var(--surface) 94%, var(--canvas));
    border-right-color: var(--border);
    box-shadow: 8px 0 24px #17203307;
}

.app-shell .brand {
    min-height: 42px;
    padding-top: 1px;
    color: var(--ink);
}

.app-shell .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(145deg, #3f63d4, #23429c);
    box-shadow: 0 4px 10px #3157c833;
}

.app-shell .tenant-switcher {
    min-height: 52px;
    margin-bottom: 22px;
    background: var(--subtle);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px #ffffff99;
}

.app-shell .tenant-switcher:hover,
.app-shell .tenant-switcher:focus-visible {
    background: var(--brand-soft);
    border-color: #aebef0;
}

.app-shell .nav-list {
    gap: 5px;
}

.app-shell .nav-item {
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 13px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.app-shell .nav-item:hover {
    border-color: var(--border);
    background: var(--subtle);
}

.app-shell .nav-item.active {
    border-color: #c9d5f9;
    background: var(--brand-soft);
    color: var(--brand);
    box-shadow: inset 3px 0 0 var(--brand);
}

.app-shell .nav-icon {
    color: currentColor;
    opacity: .85;
}

.app-shell .security-note {
    border-top-color: var(--border);
    color: var(--success);
}

.app-shell .main {
    min-width: 0;
}

.app-shell .topbar {
    position: sticky;
    top: 0;
    z-index: 7;
    height: 64px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-bottom-color: var(--border);
    box-shadow: 0 3px 14px #17203308;
    backdrop-filter: blur(14px);
}

.app-shell .breadcrumb {
    font-weight: 600;
}

.app-shell .top-actions {
    gap: 8px;
}

.app-shell .icon-button,
.app-shell .notification-button,
.app-shell .more-button,
.app-shell .profile-button {
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}

.app-shell .icon-button:hover,
.app-shell .notification-button:hover,
.app-shell .more-button:hover,
.app-shell .profile-button:hover {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--ink);
}

.app-shell .profile-button {
    padding: 4px 7px 4px 4px;
}

.app-shell .create-button,
.app-shell .primary-button {
    min-height: 40px;
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #3b61d1, var(--brand));
    box-shadow: 0 3px 8px #3157c826;
    font-weight: 700;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.app-shell .create-button:hover,
.app-shell .primary-button:hover {
    background: linear-gradient(180deg, #3157c8, var(--brand-hover));
    box-shadow: 0 5px 12px #3157c83b;
    transform: translateY(-1px);
}

.app-shell .secondary-button,
.app-shell .quiet-button {
    min-height: 38px;
    border-radius: var(--radius-sm);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.app-shell .secondary-button {
    border-color: var(--border-strong);
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--shadow-xs);
}

.app-shell .secondary-button:hover {
    border-color: #9badde;
    background: var(--brand-soft);
    color: var(--brand);
    transform: translateY(-1px);
}

.app-shell .quiet-button {
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
}

.app-shell .quiet-button:hover {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--ink);
}

.app-shell .content {
    width: min(100%, 1480px);
    padding: clamp(24px, 4vw, 42px) clamp(16px, 3vw, 42px);
}

.app-shell .page-heading {
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 28px;
}

.app-shell .page-heading > div:first-child {
    min-width: 0;
}

.app-shell .page-heading h1 {
    max-width: 780px;
    margin-bottom: 7px;
    font-size: clamp(1.75rem, 2.4vw, 2.35rem);
    letter-spacing: -.045em;
}

.app-shell .eyebrow {
    color: var(--brand);
    font-weight: 750;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.app-shell .page-heading .muted {
    max-width: 70ch;
    font-size: 14px;
}

.app-shell .page-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.app-shell .metric-grid {
    gap: 16px;
}

.app-shell .metric-card,
.app-shell .panel {
    border-color: var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.app-shell .metric-card {
    position: relative;
    min-height: 124px;
    padding: 18px 19px;
    overflow: hidden;
}

.app-shell .metric-card::after {
    position: absolute;
    right: -25px;
    bottom: -34px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--brand-soft);
    content: "";
    opacity: .72;
}

.app-shell .metric-top,
.app-shell .metric-value,
.app-shell .metric-note {
    position: relative;
    z-index: 1;
}

.app-shell .metric-value {
    margin-top: 12px;
    font-size: 2rem;
    font-weight: 750;
}

.app-shell .metric-note {
    display: block;
    margin-top: 2px;
}

.app-shell .panel {
    padding: clamp(17px, 2vw, 22px);
}

.app-shell .panel-header {
    gap: 14px;
    margin-bottom: 18px;
}

.app-shell .panel-header h2 {
    font-size: 15px;
    letter-spacing: -.02em;
}

.app-shell .panel-subtitle {
    margin-top: 3px;
    font-size: 12px;
}

.app-shell .risk-banner {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.app-shell .workspace-spotlight {
    position: relative;
    min-height: 138px;
    border-color: #c4d2f6;
    border-radius: var(--radius-lg);
    background: linear-gradient(120deg, #edf2ff 0%, #f8faff 62%, var(--surface) 100%);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.app-shell .workspace-spotlight::after {
    position: absolute;
    right: 7%;
    bottom: -64px;
    width: 180px;
    height: 180px;
    border: 1px solid #ffffff99;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.app-shell .spotlight-copy,
.app-shell .spotlight-stat {
    position: relative;
    z-index: 1;
}

.app-shell .spotlight-copy h2 {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.app-shell .spotlight-stat strong {
    font-size: 2.25rem;
}

.app-shell .workspace-search {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-shell .workspace-search label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-shell .workspace-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    gap: 18px;
    align-items: start;
}

.app-shell .party-inline-detail {
    position: sticky;
    top: 18px;
    max-height: calc(100vh - 36px);
    overflow: auto;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.app-shell .archived-record {
    opacity: .78;
    background: var(--subtle);
}

.app-shell .party-record-table {
    width: 100%;
    border-collapse: collapse;
}

.app-shell .party-record-table td,
.app-shell .party-record-table th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.app-shell .party-record-table tr:last-child td,
.app-shell .party-record-table tr:last-child th {
    border-bottom: 0;
}

.app-shell .party-record-table th {
    width: 28%;
}

.app-shell .party-record-table tr[data-inline-party-row] {
    cursor: pointer;
}

.app-shell .party-record-table tr[data-inline-party-row]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 72%, #fff);
    outline-offset: -3px;
}

.app-shell .party-record-table .record-actions {
    justify-content: flex-end;
}

.app-shell .workspace-search input {
    width: min(290px, 42vw);
    min-height: 40px;
    border-color: var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
}

.app-shell .workspace-search select {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.app-shell .workspace-records {
    gap: 9px;
}

.app-shell .workspace-record {
    min-height: 68px;
    border-color: var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xs);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.app-shell .workspace-record:hover {
    border-color: #aebee8;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.app-shell .workspace-record > a,
.app-shell .workspace-record .record-main a {
    color: var(--ink);
}

.app-shell .workspace-record > a:hover,
.app-shell .workspace-record .record-main a:hover {
    color: var(--brand);
}

.app-shell .record-main {
    flex: 1;
}

.app-shell .record-main > div > span,
.app-shell .workspace-record > span {
    margin-top: 4px;
    font-size: 12px;
}

.app-shell .record-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px #ffffff99;
}

.app-shell .status-pill,
.app-shell .agenda-tag,
.app-shell .priority,
.app-shell .provenance {
    border: 1px solid transparent;
    font-weight: 700;
}

.app-shell .empty-state,
.app-shell .library-state,
.app-shell .admin-state,
.app-shell .conflict-empty,
.app-shell .conflict-no-candidates,
.app-shell .conflict-error-state,
.app-shell .conflict-protected-state {
    min-height: 190px;
    align-content: center;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--surface), var(--subtle));
}

.app-shell .empty-state-icon {
    width: 52px;
    height: 52px;
    border: 1px solid #cbd6f4;
    border-radius: 15px;
    background: var(--brand-soft);
    box-shadow: 0 5px 12px #3157c81a;
}

.app-shell [aria-busy="true"] {
    cursor: progress;
}

.app-shell [aria-busy="true"] > :first-child {
    opacity: .72;
}

.app-shell .auth-status,
.app-shell [data-route-state],
.app-shell [data-library-state],
.app-shell [data-conflict-state] {
    overflow-wrap: anywhere;
}

.app-shell .auth-status[role="alert"],
.app-shell [data-state="error"],
.app-shell .matter-transition-status[data-state="error"],
.app-shell .drafting-handoff-status[data-state="error"] {
    color: var(--danger);
}

.app-shell .form-hint,
.app-shell .muted {
    color: var(--muted);
}

.app-shell .client-form,
.app-shell .workspace-form,
.app-shell .auth-form {
    gap: 16px;
}

.app-shell .client-form label,
.app-shell .workspace-form label,
.app-shell .auth-form label,
.app-shell .party-form label,
.app-shell .drafting-fields label,
.app-shell .drafting-mapping-row label {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.app-shell .client-form input,
.app-shell .client-form select,
.app-shell .client-form textarea,
.app-shell .workspace-form input,
.app-shell .workspace-form select,
.app-shell .workspace-form textarea,
.app-shell .auth-form input,
.app-shell .party-form input,
.app-shell .party-form select,
.app-shell .party-form textarea,
.app-shell .drafting-fields input,
.app-shell .drafting-fields select,
.app-shell .drafting-fields textarea,
.app-shell .drafting-mapping-row input,
.app-shell .drafting-mapping-row select {
    min-height: 42px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: inset 0 1px 2px #17203308;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.app-shell .client-form input,
.app-shell .client-form select,
.app-shell .client-form textarea,
.app-shell .workspace-form input,
.app-shell .workspace-form select,
.app-shell .workspace-form textarea,
.app-shell .auth-form input,
.app-shell .party-form input,
.app-shell .party-form select,
.app-shell .party-form textarea {
    padding: 10px 12px;
}

.app-shell .client-form textarea,
.app-shell .workspace-form textarea,
.app-shell .party-form textarea,
.app-shell .drafting-fields textarea {
    min-height: 100px;
    resize: vertical;
}

.app-shell :where(input, select, textarea):focus {
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 4px #3157c821, inset 0 1px 2px #17203308;
    outline: none;
}

.app-shell :where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.app-shell .form-section {
    gap: 14px;
    padding: 20px 0;
}

.app-shell .form-section-heading {
    min-height: 28px;
}

.app-shell .form-section-heading strong {
    font-size: 14px;
}

.app-shell .form-section-heading span {
    font-size: 12px;
}

.app-shell .drafting-layout {
    gap: 18px;
    align-items: start;
}

.app-shell .drafting-layout > .panel {
    box-shadow: var(--shadow-md);
}

.app-shell .drafting-template-panel,
.app-shell .drafting-composer {
    position: relative;
}

.app-shell .drafting-template-panel::before,
.app-shell .drafting-composer::before {
    position: absolute;
    top: 0;
    left: 22px;
    width: 42px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--brand);
    content: "";
}

.app-shell .drafting-composer::before {
    background: var(--success);
}

.app-shell .drafting-matter-context {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.app-shell .drafting-matter-context[data-state="ready"],
.app-shell .drafting-template-summary,
.app-shell .drafting-result-heading,
.app-shell .drafting-handoff-success {
    border-color: #a9d5bd;
    background: var(--success-soft);
}

.app-shell .drafting-matter-context[data-state="attention"],
.app-shell .drafting-preview-output.has-blockers,
.app-shell .drafting-handoff-blocked {
    border-color: #e9ca8c;
    background: var(--warning-soft);
}

.app-shell .drafting-matter-context[data-state="error"],
.app-shell .drafting-handoff-conflict,
.app-shell .drafting-handoff-error {
    border-color: #e4aeb3;
    background: var(--danger-soft);
}

.app-shell .drafting-mapping-panel,
.app-shell .drafting-preview-panel,
.app-shell .drafting-handoff {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.app-shell .drafting-mapping-row {
    border-radius: var(--radius-sm);
    background: var(--subtle);
}

.app-shell .drafting-mapping-row.is-invalid {
    border-color: #d99018;
    box-shadow: 0 0 0 3px #d9901817;
}

.app-shell .drafting-preview-output,
.app-shell .drafting-result-output {
    border-radius: var(--radius-sm);
    background: #fbfcfe;
    box-shadow: inset 0 1px 3px #1720330a;
}

.app-shell .drafting-preview-output[data-preview-state="checking"] {
    background: var(--brand-soft);
}

.app-shell .drafting-static-field {
    border-color: #a9d5bd;
    background: var(--success-soft);
}

.app-shell .conflict-review-layout {
    gap: 16px;
}

.app-shell .conflict-check-row,
.app-shell .conflict-detail-state,
.app-shell .conflict-candidate,
.app-shell .relationship-row,
.app-shell .matter-participant-row,
.app-shell .matter-history-row,
.app-shell .client-document-row,
.app-shell .admin-role-card,
.app-shell .admin-session-card,
.app-shell .library-card {
    border-color: var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.app-shell .conflict-check-row:hover,
.app-shell .conflict-candidate:hover,
.app-shell .library-card:hover,
.app-shell .admin-role-card:hover {
    border-color: #aebee8;
    box-shadow: var(--shadow-sm);
}

.app-shell .conflict-check-row.is-selected,
.app-shell .admin-role-card.is-current {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px #3157c81c, var(--shadow-xs);
}

.app-shell .matter-detail,
.app-shell .party-detail,
.app-shell .document-detail {
    gap: 20px;
}

.app-shell .matter-detail-header,
.app-shell .party-detail-header,
.app-shell .document-detail-header {
    padding-bottom: 20px;
    border-bottom-color: var(--border-strong);
}

.app-shell .matter-detail-header h2,
.app-shell .party-detail-header h2,
.app-shell .document-detail-header h2 {
    font-size: clamp(1.35rem, 2.1vw, 1.8rem);
}

.app-shell .matter-context-grid div,
.app-shell .matter-access-metrics div,
.app-shell .document-version-metric,
.app-shell .admin-meta-grid div,
.app-shell .admin-session-meta div {
    border-color: var(--border);
    border-radius: var(--radius-sm);
    background: var(--subtle);
}

.app-shell .matter-status-pill,
.app-shell .party-status-pill,
.app-shell .document-status,
.app-shell .library-status,
.app-shell .admin-state-badge,
.app-shell .admin-role-pill,
.app-shell .admin-state-pill {
    min-height: 28px;
    padding: 4px 9px;
    border-color: var(--border-strong);
    background: var(--subtle);
}

.app-shell .matter-status-pill[data-matter-state="active"],
.app-shell .party-status-pill[data-party-state="active"],
.app-shell .document-status-content[data-content-state="ready"],
.app-shell .library-status-published,
.app-shell .admin-state-active {
    border-color: #a9d5bd;
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .matter-activation-gate,
.app-shell .matter-readiness.needs-attention,
.app-shell .offline-banner,
.app-shell .library-session-note {
    border-color: #e9ca8c;
    border-radius: var(--radius-md);
    background: var(--warning-soft);
    color: #7b4c08;
}

.app-shell .matter-empty-state,
.app-shell .matter-detail-state,
.app-shell .party-detail-empty,
.app-shell .admin-protected-state {
    border-color: var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--subtle);
}

.app-shell .modal-backdrop {
    padding: 24px;
    background: #10152280;
    backdrop-filter: blur(4px);
}

.app-shell .settings-modal,
.settings-modal {
    border-color: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 70px #1015223d;
}

.app-shell .modal-header {
    margin-bottom: 24px;
}

.app-shell .footer {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--muted);
}

@media (max-width: 1050px) {
    .app-shell .sidebar {
        box-shadow: 5px 0 20px #17203308;
    }

    .app-shell .content {
        padding-right: 24px;
        padding-left: 24px;
    }
}

@media (max-width: 760px) {
    .app-shell .topbar {
        height: 60px;
    }

    .app-shell .mobile-menu {
        display: inline-grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--ink);
    }

    .app-shell .content {
        padding: 22px 16px 30px;
    }

    .app-shell .page-heading {
        flex-direction: column;
        gap: 15px;
    }

    .app-shell .page-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .app-shell .page-actions > :where(button, a) {
        flex: 1 1 auto;
    }

    .app-shell .metric-grid {
        gap: 10px;
    }

    .app-shell .workspace-search {
        align-items: stretch;
        flex-direction: column;
    }

    .app-shell .workspace-search label,
    .app-shell .workspace-split {
        display: flex;
        flex-direction: column;
    }

    .app-shell .party-inline-detail {
        position: static;
        max-height: none;
    }

    .app-shell .party-record-table,
    .app-shell .party-record-table tbody,
    .app-shell .party-record-table tr,
    .app-shell .party-record-table td,
    .app-shell .party-record-table th {
        display: block;
    }

    .app-shell .party-record-table td,
    .app-shell .party-record-table th {
        padding: 6px 0;
        border-bottom: 0;
        white-space: normal;
    }

    .app-shell .workspace-search input {
        width: 100%;
    }

    .app-shell .workspace-record {
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
    }

    .app-shell .record-actions {
        flex-wrap: wrap;
    }

    .app-shell .record-actions > :where(button, a) {
        flex: 1 1 auto;
    }

    .app-shell .drafting-layout {
        gap: 14px;
    }
}

@media (max-width: 520px) {
    .app-shell .top-actions > .icon-button,
    .app-shell .top-actions > .notification-button {
        display: none;
    }

    .app-shell .profile-button {
        min-width: 40px;
    }

    .app-shell .page-heading h1 {
        font-size: 1.7rem;
    }

    .app-shell .page-actions,
    .app-shell .page-actions > :where(button, a),
    .app-shell .modal-actions,
    .app-shell .record-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .app-shell .page-actions > :where(button, a),
    .app-shell .modal-actions > :where(button, a),
    .app-shell .record-actions > :where(button, a) {
        width: 100%;
    }

    .app-shell .metric-grid {
        grid-template-columns: 1fr;
    }

    .app-shell .panel {
        padding: 16px;
    }

    .app-shell .panel-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #111621;
    --surface: #1b2331;
    --surface-raised: #222c3c;
    --subtle: #263244;
    --subtle-strong: #303d51;
    --ink: #f2f5fa;
    --muted: #b3bdcc;
    --border: #3c4a60;
    --border-strong: #52627a;
    --brand: #91aaff;
    --brand-hover: #b0c0ff;
    --brand-soft: #27365d;
    --success: #8bdfb7;
    --success-soft: #1c3a30;
    --warning: #f5d58e;
    --warning-soft: #3a301e;
    --danger: #ffadb5;
    --danger-soft: #3e252c;
    --focus-ring: #b7c6ff;
    --shadow-xs: 0 1px 2px #00000040;
    --shadow-sm: 0 8px 24px #00000035, 0 2px 5px #00000030;
    --shadow-md: 0 16px 38px #00000045, 0 2px 6px #00000035;
}

[data-theme="dark"] body {
    background:
        radial-gradient(circle at 100% 0, #28375b 0, transparent 32rem),
        var(--canvas);
}

[data-theme="dark"] ::selection {
    background: #455d9c;
    color: #fff;
}

[data-theme="dark"] .app-shell .sidebar,
[data-theme="dark"] .app-shell .topbar {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

[data-theme="dark"] .app-shell .primary-button,
[data-theme="dark"] .app-shell .create-button {
    color: #111a32;
    background: linear-gradient(180deg, #b0c0ff, #91aaff);
    border-color: #91aaff;
}

[data-theme="dark"] .app-shell .primary-button:hover,
[data-theme="dark"] .app-shell .create-button:hover {
    color: #111a32;
    background: linear-gradient(180deg, #c2ceff, #a6b8ff);
}

[data-theme="dark"] .app-shell .workspace-spotlight {
    border-color: #526aa8;
    background: linear-gradient(120deg, #26365c, #202d48 62%, var(--surface));
}

[data-theme="dark"] .app-shell .metric-card::after {
    background: #2c3d6e;
}

[data-theme="dark"] .app-shell .drafting-preview-output,
[data-theme="dark"] .app-shell .drafting-result-output {
    background: #182130;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

[data-reduced-motion="true"] *,
[data-reduced-motion="true"] *::before,
[data-reduced-motion="true"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea):focus-visible {
        outline: 2px solid Highlight;
    }

    .app-shell .primary-button,
    .app-shell .secondary-button,
    .app-shell .quiet-button,
    .app-shell .workspace-record,
    .app-shell .panel,
    .app-shell .metric-card {
        forced-color-adjust: auto;
    }
}

/* Enterprise visual system: quiet chrome, strong hierarchy, and review-first drafting. */
:root {
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --surface-hover: #f7f9fc;
    --surface-inset: #f8fafc;
    --border-soft: #e7ebf2;
    --focus-ring: #6f8fff;
    --radius-xl: 18px;
}

html {
    font-family: var(--font-sans);
    font-size: 16px;
}

body {
    min-width: 320px;
    font-family: var(--font-sans);
    line-height: 1.55;
    letter-spacing: -.005em;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: color-mix(in srgb, var(--brand) 24%, transparent);
    color: var(--ink);
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus-ring) 72%, transparent);
    outline-offset: 3px;
}

:where(button, a, input, select, textarea):disabled {
    filter: saturate(.7);
}

/* Public shell and authentication surfaces. */
.landing-header {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 78%, transparent);
    backdrop-filter: blur(18px);
}

.landing-brand .brand-mark,
.auth-brand .brand-mark {
    background: linear-gradient(145deg, #466be0, #24439f);
    box-shadow: 0 7px 18px #3157c83d;
}

.landing-header nav a,
.landing-footer a {
    font-size: .82rem;
    font-weight: 650;
}

.landing-header nav a {
    position: relative;
    padding: .55rem 0;
}

.landing-header nav a::after {
    position: absolute;
    right: 0;
    bottom: .2rem;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
    content: "";
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .18s ease, transform .18s ease;
}

.landing-header nav a:hover::after,
.landing-header nav a:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.landing-hero h1,
.auth-card h1 {
    text-wrap: balance;
}

.auth-shell {
    padding: clamp(20px, 5vw, 56px);
}

.auth-shell .auth-card {
    border-radius: var(--radius-xl);
    padding: clamp(24px, 4vw, 40px);
    box-shadow: 0 24px 70px #17203314, 0 2px 6px #1720330b;
}

.auth-shell .auth-brand {
    padding-bottom: 30px;
}

.auth-shell .auth-card h1 {
    margin-top: .35rem;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    letter-spacing: -.045em;
}

.auth-shell .auth-card > .muted {
    max-width: 46ch;
}

.primary-button,
.secondary-button,
.quiet-button,
.create-button {
    min-height: 40px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.primary-button:active,
.secondary-button:active,
.quiet-button:active,
.create-button:active {
    transform: translateY(1px);
}

/* Application chrome. */
.app-shell {
    background:
        radial-gradient(circle at 100% 0, #eaf0ff 0, transparent 34rem),
        var(--canvas);
}

.app-shell .sidebar {
    width: 264px;
    padding: 22px 14px 18px;
    background: color-mix(in srgb, var(--surface) 96%, var(--canvas));
    box-shadow: 10px 0 30px #17203308;
}

.app-shell .brand {
    padding-right: 10px;
    padding-left: 10px;
    letter-spacing: -.04em;
}

.app-shell .tenant-switcher {
    width: calc(100% - 4px);
    margin-right: 2px;
    margin-left: 2px;
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-inset);
}

.app-shell .nav-list {
    gap: 4px;
}

.app-shell .nav-item {
    min-height: 44px;
    padding-right: 11px;
    padding-left: 11px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.app-shell .nav-item.active {
    border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
    background: color-mix(in srgb, var(--brand-soft) 78%, var(--surface));
    box-shadow: inset 3px 0 0 var(--brand), 0 3px 10px color-mix(in srgb, var(--brand) 8%, transparent);
}

.app-shell .nav-count {
    min-width: 1.45rem;
    text-align: center;
    font-weight: 750;
}

.app-shell .main {
    background: transparent;
}

.app-shell .topbar {
    height: 68px;
    padding-right: clamp(18px, 3vw, 42px);
    padding-left: clamp(18px, 3vw, 42px);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 5px 18px #17203309;
}

.app-shell .breadcrumb {
    color: var(--muted);
    font-size: .76rem;
    letter-spacing: .01em;
}

.app-shell .content {
    max-width: 1560px;
    padding-top: clamp(28px, 4vw, 48px);
    padding-bottom: clamp(34px, 5vw, 64px);
}

.app-shell .page-heading h1 {
    font-size: clamp(1.85rem, 3vw, 2.55rem);
    text-wrap: balance;
}

.app-shell .page-heading .muted {
    line-height: 1.6;
}

.app-shell .metric-card,
.app-shell .panel {
    background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 96%, var(--subtle)));
}

.app-shell .metric-card {
    min-height: 132px;
    border-radius: var(--radius-md);
}

.app-shell .metric-label,
.app-shell .panel-header h2 {
    font-weight: 750;
}

.app-shell .panel-header {
    align-items: flex-start;
}

.app-shell .panel-header h2 {
    text-wrap: balance;
}

.app-shell .workspace-spotlight {
    min-height: 154px;
    padding: 28px 30px;
    border-radius: var(--radius-xl);
}

.app-shell .workspace-spotlight .spotlight-kicker {
    letter-spacing: .1em;
}

.app-shell .workspace-record {
    min-height: 74px;
    padding: 15px 16px;
    background: var(--surface);
}

.app-shell .workspace-record:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent), var(--shadow-sm);
}

.app-shell .workspace-record .record-main a {
    font-weight: 700;
}

.app-shell .workspace-record .record-main > div > span {
    color: var(--muted);
}

.app-shell .empty-state,
.app-shell .library-state,
.app-shell .admin-state,
.app-shell .conflict-empty,
.app-shell .conflict-no-candidates,
.app-shell .conflict-error-state,
.app-shell .conflict-protected-state {
    min-height: 220px;
    padding: 32px 22px;
}

/* Forms use a consistent field rhythm and a stronger review focus. */
.app-shell :where(.client-form, .workspace-form, .party-form, .auth-form, .drafting-fields, .drafting-handoff-form) {
    max-width: 56rem;
}

.app-shell :where(.client-form, .workspace-form, .party-form, .auth-form) label {
    gap: 7px;
}

.app-shell :where(input, select, textarea) {
    accent-color: var(--brand);
}

.app-shell :where(input, select, textarea)::placeholder {
    color: color-mix(in srgb, var(--muted) 72%, transparent);
}

.app-shell :where(input, select, textarea):hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--border-strong));
}

.app-shell :where(input, select, textarea):focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent), inset 0 1px 2px #1720330a;
}

.app-shell .form-hint,
.app-shell .panel-subtitle {
    line-height: 1.5;
}

.app-shell .form-section {
    padding-top: 22px;
    padding-bottom: 22px;
}

.app-shell .modal-backdrop {
    background: color-mix(in srgb, #101522 52%, transparent);
    backdrop-filter: blur(10px);
}

.app-shell :where(.settings-modal, .party-dialog, .work-dialog, .relationship-dialog, .library-dialog) {
    border-radius: var(--radius-xl);
    box-shadow: 0 28px 80px #1015224a, 0 2px 8px #10152226;
}

/* Drafting is intentionally denser than the rest of the workspace. */
.app-shell .drafting-layout {
    grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr);
    gap: 20px;
}

.app-shell .drafting-layout > .panel {
    border-radius: var(--radius-xl);
}

.app-shell .drafting-template-panel,
.app-shell .drafting-workflow-panel,
.app-shell .drafting-composer {
    overflow: clip;
}

.app-shell .drafting-template-panel::before,
.app-shell .drafting-workflow-panel::before,
.app-shell .drafting-composer::before {
    right: 22px;
    left: 22px;
    width: auto;
    height: 4px;
}

.app-shell .drafting-workflow-panel::before {
    background: var(--brand);
}

.app-shell .drafting-template-panel .panel-header,
.app-shell .drafting-workflow-panel .panel-header {
    padding-bottom: 4px;
}

.app-shell .drafting-step-badge,
.app-shell .drafting-mapping-state {
    background: var(--surface-inset);
    font-size: .7rem;
    letter-spacing: .02em;
}

.app-shell .drafting-matter-context {
    grid-template-columns: minmax(0, 1.25fr) minmax(220px, .9fr) auto;
    padding: 16px 18px;
    border-radius: var(--radius-md);
}

.app-shell .drafting-matter-context strong {
    font-size: .95rem;
}

.app-shell .drafting-mapping-panel,
.app-shell .drafting-preview-panel,
.app-shell .drafting-handoff {
    padding: 18px;
    border-radius: var(--radius-md);
}

.app-shell .drafting-mapping-row {
    padding: 14px;
    border-radius: var(--radius-sm);
}

.app-shell .drafting-mapping-field strong {
    font-size: .88rem;
}

.app-shell .drafting-preview-output,
.app-shell .drafting-result-output {
    min-height: 12rem;
    padding: clamp(16px, 2.5vw, 24px);
    border-radius: var(--radius-sm);
    background: var(--surface-inset);
    font-family: var(--font-mono);
    font-size: .8rem;
    line-height: 1.75;
}

.app-shell .drafting-result-output {
    min-height: 18rem;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--brand-soft) 32%, transparent) 0, transparent 2.5rem),
        var(--surface-inset);
}

.app-shell .drafting-actions {
    padding-top: 4px;
}

.app-shell .drafting-client-option {
    min-height: 54px;
    align-items: center;
    border-radius: var(--radius-sm);
}

/* Client, matter, document, and admin records share the same information density. */
.app-shell :where(.party-profile-summary, .party-detail-section, .document-detail-section) {
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 97%, var(--subtle)));
    box-shadow: var(--shadow-xs);
}

.app-shell .party-profile-summary,
.app-shell .party-detail-section {
    padding: 18px;
}

.app-shell .party-detail-grid,
.app-shell .matter-detail-grid {
    gap: 18px;
}

.app-shell :where(.party-detail-row, .document-client-row, .client-document-row, .relationship-row, .matter-participant-row, .matter-history-row, .admin-member-row, .admin-session-card, .admin-role-card) {
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.app-shell :where(.party-detail-row, .document-client-row, .client-document-row, .relationship-row, .matter-participant-row, .matter-history-row, .admin-member-row, .admin-session-card, .admin-role-card):hover {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
    background: var(--surface-hover);
}

.app-shell .document-detail-section {
    padding: 18px;
}

.app-shell .document-detail-section:first-of-type {
    padding-top: 18px;
}

.app-shell .document-version-grid,
.app-shell .matter-context-grid,
.app-shell .matter-access-metrics {
    gap: 10px;
}

.app-shell :where(.document-version-metric, .matter-context-grid div, .matter-access-metrics div, .admin-meta-grid div, .admin-session-meta div) {
    background: var(--surface-inset);
}

.app-shell .document-statuses {
    margin-bottom: 14px;
}

.app-shell .document-immutable-badge {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 12%, transparent);
}

.app-shell .matter-detail-header,
.app-shell .party-detail-header,
.app-shell .document-detail-header {
    align-items: flex-start;
}

.app-shell .matter-detail-header h2,
.app-shell .party-detail-header h2,
.app-shell .document-detail-header h2 {
    text-wrap: balance;
}

/* System dark mode follows the explicit light/dark preference controls. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        color-scheme: dark;
        --canvas: #111621;
        --surface: #1b2331;
        --surface-raised: #222c3c;
        --surface-hover: #263244;
        --surface-inset: #182130;
        --subtle: #263244;
        --subtle-strong: #303d51;
        --ink: #f2f5fa;
        --muted: #b3bdcc;
        --border: #3c4a60;
        --border-soft: #303d51;
        --border-strong: #52627a;
        --brand: #91aaff;
        --brand-hover: #b0c0ff;
        --brand-soft: #27365d;
        --success: #8bdfb7;
        --success-soft: #1c3a30;
        --warning: #f5d58e;
        --warning-soft: #3a301e;
        --danger: #ffadb5;
        --danger-soft: #3e252c;
        --focus-ring: #b7c6ff;
        --shadow-xs: 0 1px 2px #00000040;
        --shadow-sm: 0 8px 24px #00000035, 0 2px 5px #00000030;
        --shadow-md: 0 16px 38px #00000045, 0 2px 6px #00000035;
    }

    html:not([data-theme="light"]) body {
        background:
            radial-gradient(circle at 100% 0, #28375b 0, transparent 32rem),
            var(--canvas);
    }

    html:not([data-theme="light"]) .app-shell {
        background:
            radial-gradient(circle at 100% 0, #28375b 0, transparent 34rem),
            var(--canvas);
    }

    html:not([data-theme="light"]) .landing-header,
    html:not([data-theme="light"]) .app-shell .sidebar,
    html:not([data-theme="light"]) .app-shell .topbar {
        background: color-mix(in srgb, var(--surface) 92%, transparent);
    }

    html:not([data-theme="light"]) .app-shell .workspace-record,
    html:not([data-theme="light"]) .app-shell :where(.party-profile-summary, .party-detail-section, .document-detail-section) {
        background: linear-gradient(180deg, var(--surface-raised), var(--surface));
    }

    html:not([data-theme="light"]) .app-shell .drafting-result-output {
        background:
            linear-gradient(90deg, #27365d 0, transparent 2.5rem),
            var(--surface-inset);
    }
}

/* Responsive behavior keeps the drafting flow and record actions usable on small screens. */
@media (min-width: 901px) {
    .app-shell .drafting-template-panel {
        position: sticky;
        top: 88px;
    }
}

@media (max-width: 1100px) {
    .app-shell .drafting-layout {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    }

    .app-shell .drafting-matter-context {
        grid-template-columns: 1fr 1fr;
    }

    .app-shell .drafting-matter-context-action {
        justify-items: start;
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .app-shell .drafting-layout {
        grid-template-columns: 1fr;
    }

    .app-shell .drafting-template-panel {
        position: static;
    }

    .app-shell .drafting-template-panel,
    .app-shell .drafting-workflow-panel,
    .app-shell .drafting-composer {
        overflow: visible;
    }
}

@media (max-width: 700px) {
    .app-shell .sidebar {
        display: none;
    }

    .app-shell .topbar {
        height: 62px;
    }

    .app-shell .content {
        padding: 24px 16px 34px;
    }

    .app-shell .workspace-spotlight {
        padding: 22px;
    }

    .app-shell .drafting-matter-context {
        grid-template-columns: 1fr;
    }

    .app-shell .drafting-matter-context-action {
        grid-column: auto;
    }

    .app-shell .drafting-matter-context-action .secondary-button {
        width: 100%;
    }

    .app-shell .document-detail-section,
    .app-shell .party-profile-summary,
    .app-shell .party-detail-section {
        padding: 16px;
    }
}

@media (max-width: 520px) {
    .auth-shell .auth-card {
        padding: 24px 20px;
    }

    .app-shell .page-heading h1 {
        font-size: 1.8rem;
    }

    .app-shell .drafting-mapping-panel,
    .app-shell .drafting-preview-panel,
    .app-shell .drafting-handoff {
        padding: 14px;
    }

    .app-shell .drafting-preview-output,
    .app-shell .drafting-result-output {
        min-height: 10rem;
        padding: 14px;
        font-size: .76rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-header nav a::after {
        transition: none;
    }

    .app-shell :where(.workspace-record, .party-detail-row, .document-client-row, .client-document-row, .relationship-row, .matter-participant-row, .matter-history-row, .admin-member-row, .admin-session-card, .admin-role-card) {
        transition: none;
    }
}

@media (forced-colors: active) {
    .app-shell .nav-item.active,
    .app-shell .workspace-record:focus-within,
    .app-shell .conflict-check-row.is-selected,
    .app-shell .admin-role-card.is-current {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}

/* Visual system v2: deliberate controls, consistent iconography, and review-grade surfaces. */
:root {
    --control-height: 42px;
    --control-height-sm: 36px;
    --control-radius: 9px;
    --button-shadow: 0 1px 2px #17203314, 0 4px 10px #1720330d;
    --button-shadow-primary: 0 5px 14px #3157c833, inset 0 1px 0 #ffffff38;
    --panel-border: color-mix(in srgb, var(--border) 88%, var(--ink));
}

body {
    color: var(--ink);
    font-feature-settings: "cv11", "ss01";
}

h1,
h2,
h3,
h4,
strong,
button,
label {
    letter-spacing: -.018em;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl {
    text-wrap: pretty;
}

/* Buttons are intentionally unmistakable: primary, secondary, quiet, and destructive. */
:where(.primary-button, .secondary-button, .quiet-button, .create-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: var(--control-height);
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--control-radius);
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    user-select: none;
}

:where(.primary-button, .secondary-button, .quiet-button, .create-button):hover:not(:disabled) {
    transform: translateY(-1px);
}

:where(.primary-button, .secondary-button, .quiet-button, .create-button):active:not(:disabled) {
    transform: translateY(0);
}

:where(.primary-button, .secondary-button, .quiet-button, .create-button):disabled {
    box-shadow: none;
    opacity: .52;
    transform: none;
}

.primary-button,
.create-button {
    border-color: var(--brand);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 86%, white), var(--brand));
    color: #fff !important;
    box-shadow: var(--button-shadow-primary);
}

.primary-button:hover:not(:disabled),
.create-button:hover:not(:disabled) {
    border-color: var(--brand-hover);
    background: linear-gradient(180deg, var(--brand), var(--brand-hover));
    box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 28%, transparent), inset 0 1px 0 #ffffff40;
}

.secondary-button {
    border-color: var(--border-strong);
    background: var(--surface-raised);
    color: var(--ink) !important;
    box-shadow: var(--button-shadow);
}

.secondary-button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--brand) 58%, var(--border-strong));
    background: var(--brand-soft);
    color: var(--brand) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 12%, transparent);
}

.quiet-button {
    min-height: var(--control-height-sm);
    border-color: transparent;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
}

.quiet-button:hover:not(:disabled) {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--ink);
}

:where([data-client-archive], [data-document-archive], [data-logout], [data-deadline-transition="cancellation"], [data-matter-transition="archived"]) {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
    color: var(--danger) !important;
}

:where([data-client-archive], [data-document-archive], [data-logout], [data-deadline-transition="cancellation"], [data-matter-transition="archived"]):hover:not(:disabled) {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger) !important;
}

.app-shell .record-actions > .quiet-button,
.app-shell .matter-party-form-actions > .quiet-button,
.app-shell .form-section-heading > .quiet-button {
    border-color: var(--border);
    background: var(--surface);
    color: var(--muted);
}

.app-shell .record-actions > .quiet-button:hover:not(:disabled),
.app-shell .matter-party-form-actions > .quiet-button:hover:not(:disabled),
.app-shell .form-section-heading > .quiet-button:hover:not(:disabled) {
    background: var(--subtle);
}

/* One icon frame for navigation, utility actions, status marks, and record types. */
.app-shell .nav-icon,
.app-shell .record-icon,
.app-shell .metric-icon,
.app-shell .empty-state-icon,
.app-shell .party-detail-icon,
.app-shell .matter-participant-icon,
.app-shell .admin-role-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    font-family: "Segoe UI Symbol", "Apple Symbols", var(--font-sans);
    font-weight: 800;
    line-height: 1;
}

.app-shell .nav-icon {
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 7%, transparent);
    font-size: .9rem;
}

.app-shell .nav-item.active .nav-icon {
    border-color: color-mix(in srgb, var(--brand) 22%, transparent);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.app-shell .record-icon {
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    border-radius: 11px;
    font-size: 1rem;
}

.app-shell .metric-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

.app-shell .icon-button,
.app-shell .notification-button,
.app-shell .more-button,
.app-shell .mobile-menu,
.app-shell .close-banner {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--control-radius);
    background: transparent;
    color: var(--muted);
    font-weight: 800;
    line-height: 1;
}

.app-shell .icon-button:hover,
.app-shell .notification-button:hover,
.app-shell .more-button:hover,
.app-shell .mobile-menu:hover,
.app-shell .close-banner:hover {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--ink);
}

.app-shell .icon-button {
    font-family: var(--font-mono);
    font-size: .78rem;
}

.app-shell .icon-button span {
    margin-left: 2px;
    padding: 1px 4px;
    border-color: var(--border-strong);
    background: var(--surface);
    font: 700 .58rem var(--font-mono);
}

.app-shell .notification-button {
    position: relative;
    font-size: 1.2rem;
}

.app-shell .notification-button b {
    top: 2px;
    right: 1px;
    min-width: 16px;
    min-height: 16px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border: 2px solid var(--surface);
    border-radius: 999px;
    font-size: .58rem;
    line-height: 1;
}

.app-shell .close-banner {
    font-size: 1.25rem;
}

/* Navigation reads as a product shell instead of a list of links. */
.app-shell .sidebar {
    width: 276px;
    padding: 24px 16px 20px;
    border-right-color: var(--border);
}

.app-shell .brand {
    min-height: 44px;
    gap: 11px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 1.1rem;
}

.app-shell .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.app-shell .tenant-switcher {
    min-height: 58px;
    margin-top: 8px;
    margin-bottom: 24px;
    padding: 10px;
}

.app-shell .nav-item {
    gap: 10px;
    min-height: 46px;
    padding: 8px 10px;
    color: var(--muted);
    font-size: .8rem;
}

.app-shell .nav-item.active {
    color: var(--brand);
}

.app-shell .sidebar-bottom {
    padding-top: 18px;
}

.app-shell .security-note {
    margin-top: 20px;
    padding-top: 18px;
}

.app-shell .topbar {
    height: 72px;
    padding-right: clamp(18px, 3.2vw, 48px);
    padding-left: clamp(18px, 3.2vw, 48px);
}

.app-shell .top-actions {
    gap: 5px;
}

.app-shell .profile-button {
    min-height: 42px;
    margin-left: 4px;
    padding: 4px 9px 4px 5px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--button-shadow);
}

.app-shell .profile-button:hover {
    background: var(--surface-hover);
}

.app-shell .profile-avatar {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 800;
}

/* Cards and data rows use layered surfaces and a consistent information rhythm. */
.app-shell .metric-card,
.app-shell .panel {
    border-color: var(--panel-border);
    border-radius: 14px;
    box-shadow: 0 2px 5px #1720330b, 0 14px 34px #1720330a;
}

.app-shell .metric-card {
    min-height: 142px;
    padding: 20px;
}

.app-shell .metric-value {
    font-size: 2.15rem;
    letter-spacing: -.06em;
}

.app-shell .panel {
    padding: clamp(20px, 2.2vw, 28px);
}

.app-shell .panel-header {
    min-height: 34px;
    margin-bottom: 20px;
}

.app-shell .panel-header h2 {
    font-size: .94rem;
}

.app-shell .workspace-record {
    min-height: 80px;
    padding: 16px 18px;
    border-radius: 12px;
    box-shadow: 0 1px 3px #1720330c;
}

.app-shell .workspace-record:hover,
.app-shell .workspace-record:focus-within {
    border-color: color-mix(in srgb, var(--brand) 50%, var(--border));
    background: var(--surface-hover);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 9%, transparent);
}

.app-shell .workspace-record .record-actions {
    gap: 6px;
}

.app-shell .agenda-item,
.app-shell .work-item,
.app-shell .activity-item,
.app-shell .recent-record {
    min-height: 60px;
    padding: 14px 0;
    border-top-color: var(--border-soft);
}

.app-shell .agenda-item strong,
.app-shell .work-item strong,
.app-shell .activity-item strong,
.app-shell .recent-record strong {
    font-size: .8rem;
}

.app-shell .status-pill,
.app-shell .agenda-tag,
.app-shell .priority,
.app-shell .provenance,
.app-shell .matter-status-pill,
.app-shell .party-status-pill,
.app-shell .document-status,
.app-shell .library-status {
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .02em;
}

/* Forms and selects no longer inherit browser-default visual weight. */
.app-shell :where(input, select, textarea) {
    min-height: var(--control-height);
    border-radius: var(--control-radius);
    border-color: var(--border-strong);
    background-color: var(--surface-raised);
    color: var(--ink);
    font-size: .84rem;
}

.app-shell :where(select) {
    appearance: none;
    padding-right: 38px;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
}

.app-shell :where(input[type="checkbox"], input[type="radio"]) {
    width: 18px;
    min-height: 18px;
    accent-color: var(--brand);
}

.app-shell :where(input[type="file"]) {
    min-height: 48px;
    padding: 5px;
}

.app-shell :where(input[type="file"])::file-selector-button {
    min-height: 36px;
    margin-right: 10px;
    padding: 0 11px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--subtle);
    color: var(--ink);
    font: 700 .78rem var(--font-sans);
    cursor: pointer;
}

.app-shell :where(input, select, textarea):focus {
    border-color: var(--brand);
    background-color: var(--surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent), 0 2px 5px #1720330d;
}

.app-shell :where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--danger);
    background-color: var(--danger-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 13%, transparent);
}

.app-shell .form-section {
    gap: 16px;
    padding-top: 24px;
    padding-bottom: 24px;
}

.app-shell .form-section-heading {
    align-items: flex-start;
}

.app-shell .form-section-heading strong {
    font-size: .86rem;
}

.app-shell .form-section-heading span,
.app-shell .form-hint {
    color: var(--muted);
    font-size: .75rem;
}

/* Dialogs feel like focused workspaces, with clear title/action zones. */
.app-shell .modal-backdrop {
    padding: clamp(12px, 4vw, 36px);
}

.app-shell :where(.settings-modal, .party-dialog, .work-dialog, .relationship-dialog, .library-dialog) {
    max-height: min(94vh, 920px);
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    background: var(--surface);
}

.app-shell .modal-header {
    align-items: flex-start;
    margin: -2px 0 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-soft);
}

.app-shell .modal-header h2 {
    margin: 3px 0 0;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    letter-spacing: -.04em;
}

.app-shell .modal-actions {
    gap: 9px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
}

.app-shell .modal-actions .primary-button,
.app-shell .modal-actions .secondary-button {
    min-width: 112px;
}

/* Drafting workspace: a calm command center with a paper-like review output. */
.app-shell .drafting-layout {
    grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
    gap: 24px;
    align-items: start;
}

.app-shell .drafting-layout > .panel {
    border-radius: 16px;
}

.app-shell .drafting-template-panel,
.app-shell .drafting-workflow-panel,
.app-shell .drafting-composer {
    border-top: 0;
}

.app-shell .drafting-template-panel::before,
.app-shell .drafting-workflow-panel::before,
.app-shell .drafting-composer::before {
    right: 0;
    left: 0;
    height: 5px;
    border-radius: 16px 16px 0 0;
}

.app-shell .drafting-template-panel::before {
    background: linear-gradient(90deg, #5576de, var(--brand));
}

.app-shell .drafting-workflow-panel::before {
    background: linear-gradient(90deg, var(--brand), #829aff);
}

.app-shell .drafting-composer::before {
    background: linear-gradient(90deg, #2d9b6b, var(--success));
}

.app-shell .drafting-template-panel .panel-header,
.app-shell .drafting-workflow-panel .panel-header {
    padding-top: 4px;
}

.app-shell .drafting-template-panel .panel-header h2,
.app-shell .drafting-workflow-panel .panel-header h2 {
    font-size: 1rem;
}

.app-shell .drafting-step-badge {
    border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
    background: var(--brand-soft);
    color: var(--brand);
}

.app-shell .drafting-matter-context {
    margin-top: 0;
    border-radius: 12px;
    border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
    background: linear-gradient(135deg, var(--brand-soft), var(--surface));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 9%, transparent);
}

.app-shell .drafting-matter-context[data-state="ready"] {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
    background: linear-gradient(135deg, var(--success-soft), var(--surface));
}

.app-shell .drafting-mapping-panel,
.app-shell .drafting-preview-panel,
.app-shell .drafting-handoff {
    margin-top: 20px;
    border-color: var(--panel-border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 3px #1720330c;
}

.app-shell .drafting-mapping-header,
.app-shell .drafting-resolver-header,
.app-shell .drafting-preview-header,
.app-shell .drafting-handoff-header {
    gap: 16px;
}

.app-shell .drafting-mapping-row {
    gap: 16px;
    padding: 16px;
    border-color: var(--border);
    border-radius: 10px;
    background: var(--surface-inset);
}

.app-shell .drafting-mapping-row:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.app-shell .drafting-preview-panel {
    background: linear-gradient(180deg, var(--subtle), var(--surface));
}

.app-shell .drafting-preview-output,
.app-shell .drafting-result-output {
    min-height: 16rem;
    max-height: 34rem;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-inset);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: .79rem;
    line-height: 1.8;
    box-shadow: inset 0 1px 4px #17203314;
}

.app-shell .drafting-result-output {
    min-height: 24rem;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--brand-soft) 38%, transparent), transparent 3rem),
        var(--surface-inset);
}

.app-shell .drafting-preview-output[data-preview-state="checking"] {
    border-color: color-mix(in srgb, var(--brand) 48%, var(--border));
    background: linear-gradient(135deg, var(--brand-soft), var(--surface-inset));
}

.app-shell .drafting-preview-output.has-blockers,
.app-shell .drafting-handoff-blocked {
    border-color: color-mix(in srgb, var(--warning) 46%, var(--border));
    background: linear-gradient(135deg, var(--warning-soft), var(--surface));
}

.app-shell .drafting-actions {
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

/* Information surfaces for matters, clients, and documents. */
.app-shell .matter-detail,
.app-shell .party-detail,
.app-shell .document-detail {
    gap: 22px;
}

.app-shell .matter-detail-header,
.app-shell .party-detail-header,
.app-shell .document-detail-header {
    padding: 0 0 22px;
    border-bottom: 1px solid var(--border-strong);
}

.app-shell .matter-detail-grid,
.app-shell .party-detail-grid {
    gap: 20px;
}

.app-shell :where(.party-profile-summary, .party-detail-section, .document-detail-section) {
    padding: 22px;
    border-color: var(--panel-border);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--surface), var(--surface-inset));
    box-shadow: 0 1px 4px #1720330b;
}

.app-shell .document-detail-section:first-of-type {
    padding-top: 22px;
}

.app-shell :where(.party-detail-row, .document-client-row, .client-document-row, .relationship-row, .matter-participant-row, .matter-history-row, .admin-member-row, .admin-session-card, .admin-role-card) {
    min-height: 52px;
    border-color: var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.app-shell :where(.party-detail-row, .document-client-row, .client-document-row, .relationship-row, .matter-participant-row, .matter-history-row, .admin-member-row, .admin-session-card, .admin-role-card):hover {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
    background: var(--surface-hover);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 8%, transparent);
    transform: translateY(-1px);
}

.app-shell :where(.matter-context-grid div, .matter-access-metrics div, .document-version-metric, .admin-meta-grid div, .admin-session-meta div) {
    border-color: var(--border);
    border-radius: 10px;
    background: var(--surface-inset);
}

.app-shell .matter-readiness,
.app-shell .matter-activation-gate,
.app-shell .document-export-note,
.app-shell .document-state-note,
.app-shell .document-editor-note,
.app-shell .offline-banner {
    border-radius: 10px;
    box-shadow: inset 0 1px 0 #ffffff40;
}

/* Explicit system dark mode keeps contrast coherent when the preference is "System". */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --panel-border: #46566d;
        --surface-hover: #2b384b;
        --surface-inset: #17202e;
        --border-soft: #303d51;
        --button-shadow: 0 2px 5px #00000038;
        --button-shadow-primary: 0 5px 16px #00000045, inset 0 1px 0 #ffffff32;
    }

    html:not([data-theme="light"]) .app-shell {
        background:
            radial-gradient(circle at 100% 0, #2a3a62 0, transparent 36rem),
            var(--canvas);
    }

    html:not([data-theme="light"]) .primary-button,
    html:not([data-theme="light"]) .create-button {
        color: #10182c !important;
        background: linear-gradient(180deg, #b9c6ff, #91aaff);
    }

    html:not([data-theme="light"]) .secondary-button {
        border-color: var(--border-strong);
        background: var(--surface-raised);
    }

    html:not([data-theme="light"]) .app-shell :where(.party-profile-summary, .party-detail-section, .document-detail-section, .workspace-record) {
        background: linear-gradient(180deg, var(--surface-raised), var(--surface));
    }
}

@media (max-width: 1050px) {
    .app-shell .sidebar {
        width: 76px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .app-shell .brand {
        justify-content: center;
        padding-right: 0;
        padding-left: 0;
    }

    .app-shell .nav-item {
        justify-content: center;
        padding-right: 8px;
        padding-left: 8px;
    }

    .app-shell .nav-item.active {
        box-shadow: inset 3px 0 0 var(--brand);
    }
}

@media (max-width: 900px) {
    .app-shell .drafting-layout {
        grid-template-columns: 1fr;
    }

    .app-shell .drafting-template-panel {
        position: static;
    }
}

@media (max-width: 700px) {
    .app-shell .topbar {
        height: 64px;
    }

    .app-shell .content {
        padding: 24px 16px 36px;
    }

    .app-shell .panel {
        padding: 18px;
    }

    .app-shell .workspace-record {
        padding: 15px;
    }

    .app-shell .page-actions,
    .app-shell .record-actions,
    .app-shell .modal-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .app-shell .page-actions > :where(a, button),
    .app-shell .record-actions > :where(a, button),
    .app-shell .modal-actions > :where(a, button) {
        width: 100%;
    }

    .app-shell .drafting-matter-context {
        grid-template-columns: 1fr;
    }

    .app-shell .document-detail-section,
    .app-shell .party-profile-summary,
    .app-shell .party-detail-section {
        padding: 18px;
    }
}

@media (max-width: 520px) {
    .app-shell .top-actions {
        gap: 2px;
    }

    .app-shell .icon-button,
    .app-shell .notification-button,
    .app-shell .profile-button {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
    }

    .app-shell .profile-name,
    .app-shell .profile > span:last-child {
        display: none;
    }

    .app-shell .metric-grid {
        grid-template-columns: 1fr;
    }

    .app-shell .drafting-preview-output,
    .app-shell .drafting-result-output {
        min-height: 12rem;
        padding: 15px;
        font-size: .74rem;
    }

    .app-shell :where(.settings-modal, .party-dialog, .work-dialog, .relationship-dialog, .library-dialog) {
        padding: 20px;
        border-radius: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.primary-button, .secondary-button, .quiet-button, .create-button):hover:not(:disabled),
    .app-shell :where(.party-detail-row, .document-client-row, .client-document-row, .relationship-row, .matter-participant-row, .matter-history-row, .admin-member-row, .admin-session-card, .admin-role-card):hover {
        transform: none;
    }
}

@media (forced-colors: active) {
    :where(.primary-button, .secondary-button, .quiet-button, .create-button, .icon-button, .notification-button, .more-button, .mobile-menu) {
        border: 1px solid ButtonText;
        forced-color-adjust: auto;
    }
}

/* Tables and feedback states use the same visual language as the record surfaces. */
.app-shell :where(table, .comparison-table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.app-shell :where(th, td) {
    padding: 13px 15px;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    vertical-align: top;
}

.app-shell :where(th) {
    background: var(--subtle);
    color: var(--ink);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.app-shell :where(td) {
    color: var(--muted);
    font-size: .8rem;
}

.app-shell :where(tr:last-child td) {
    border-bottom: 0;
}

.app-shell .auth-status:not(:empty),
.app-shell [data-route-state]:not(:empty),
.app-shell [data-library-state]:not(:empty),
.app-shell [data-conflict-state]:not(:empty) {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-inset);
    color: var(--muted);
    font-size: .78rem;
}

.app-shell .auth-status[role="alert"],
.app-shell [data-state="error"],
.app-shell [data-conflict-state="error"] {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
    background: var(--danger-soft);
    color: var(--danger);
}

.app-shell [data-state="success"],
.app-shell [data-state="ready"] {
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
    background: var(--success-soft);
    color: var(--success);
}

.app-shell [data-state="loading"],
.app-shell [aria-busy="true"] {
    position: relative;
}

.app-shell [data-state="loading"]::after,
.app-shell [aria-busy="true"]::after {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--brand) 20%, transparent);
    border-top-color: var(--brand);
    border-radius: 50%;
    content: "";
    animation: lexos-spin .7s linear infinite;
}

@keyframes lexos-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell [data-state="loading"]::after,
    .app-shell [aria-busy="true"]::after {
        animation: none;
    }
}

/* ================================================================
   AUTH — premium split-screen experience (login / signup)
   ================================================================ */
.auth-shell--split {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    padding: 0;
    place-items: stretch;
    background: var(--canvas);
}

/* ---- left: brand showcase ------------------------------------ */
.auth-showcase {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: center;
    padding: clamp(40px, 6vw, 88px);
    background:
        radial-gradient(1200px 600px at -10% -20%, #2a56d6 0%, transparent 55%),
        radial-gradient(900px 700px at 110% 120%, #4a2fa6 0%, transparent 55%),
        linear-gradient(155deg, #0d1b3e 0%, #101a38 45%, #0a1226 100%);
    color: #eef2ff;
}

.auth-showcase-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    pointer-events: none;
    animation: auth-glow-drift 16s ease-in-out infinite alternate;
}
.auth-showcase-glow--a { width: 420px; height: 420px; top: -120px; right: -80px; background: #3b6bff; }
.auth-showcase-glow--b { width: 380px; height: 380px; bottom: -120px; left: -60px; background: #7a4dff; animation-delay: -8s; }

@keyframes auth-glow-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-40px, 30px, 0) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-showcase-glow { animation: none; }
}

/* The preview separates a fast local hint from the server-confirmed snapshot. */
.app-shell .drafting-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    flex-wrap: wrap;
}

.app-shell .drafting-preview-state {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: .25rem .65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-inset);
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}

.app-shell .drafting-preview-state[data-state="server"] {
    border-color: #a9d5bd;
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .drafting-preview-state[data-state="checking"] {
    border-color: #9db6ed;
    background: var(--brand-soft);
    color: var(--brand);
}

.app-shell .drafting-preview-state[data-state="stale"],
.app-shell .drafting-preview-state[data-state="local-error"] {
    border-color: #e9ca8c;
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .drafting-preview-retry[hidden] {
    display: none;
}

.app-shell .drafting-preview-panel[data-preview-state="server"] {
    border-color: #a9d5bd;
}

.app-shell .drafting-preview-panel[data-preview-state="stale"],
.app-shell .drafting-preview-panel[data-preview-state="local-error"] {
    border-color: #e9ca8c;
}

.app-shell .drafting-preview-output[data-preview-state="server"] {
    border-color: #a9d5bd;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--success-soft) 75%, transparent), transparent 3.5rem),
        var(--surface-inset);
}

.app-shell .drafting-preview-output[data-preview-state="stale"],
.app-shell .drafting-preview-output[data-preview-state="local-error"] {
    border-color: #e9ca8c;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--warning-soft) 78%, transparent), transparent 3.5rem),
        var(--surface-inset);
}

.app-shell .drafting-preview-missing {
    display: grid;
    gap: .55rem;
    margin-top: .8rem;
    padding: .8rem .9rem;
    border: 1px solid #e9ca8c;
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .drafting-preview-missing[hidden] {
    display: none;
}

.app-shell .drafting-preview-missing ul {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-shell .drafting-preview-missing li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    font-size: .78rem;
}

.app-shell .drafting-preview-missing li span {
    color: color-mix(in srgb, var(--warning) 78%, var(--ink));
    text-align: right;
}

.app-shell .drafting-preview-metadata {
    border-color: #a9d5bd;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--success-soft) 72%, transparent), var(--surface));
}

@media (max-width: 560px) {
    .app-shell .drafting-preview-toolbar {
        width: 100%;
        justify-content: flex-start;
    }

    .app-shell .drafting-preview-retry,
    .app-shell .drafting-preview-frame-open {
        flex: 1 1 100%;
    }

    .app-shell .drafting-preview-missing li {
        align-items: flex-start;
        flex-direction: column;
        gap: .15rem;
    }

    .app-shell .drafting-preview-missing li span {
        text-align: left;
    }
}

[data-theme="dark"] .app-shell .drafting-preview-state[data-state="server"],
[data-theme="dark"] .app-shell .drafting-preview-metadata {
    border-color: #356c50;
    background: #182c24;
}

[data-theme="dark"] .app-shell .drafting-preview-state[data-state="stale"],
[data-theme="dark"] .app-shell .drafting-preview-state[data-state="local-error"],
[data-theme="dark"] .app-shell .drafting-preview-missing {
    border-color: #80652f;
    background: #302818;
}

.auth-showcase-inner {
    position: relative;
    display: grid;
    gap: 20px;
    max-width: 460px;
}

.auth-showcase-brand { color: #fff; }

.auth-showcase-title {
    margin: 8px 0 0;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    font-weight: 800;
}
.auth-showcase-title em {
    font-style: normal;
    background: linear-gradient(90deg, #7fa5ff, #b79dff 60%, #6ee7d8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-showcase-lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #b9c4e6;
    max-width: 40ch;
}

.auth-showcase-points {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.auth-showcase-points li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
    color: #cdd6f2;
    padding: 14px 16px;
    border: 1px solid #ffffff14;
    border-radius: 14px;
    background: #ffffff0a;
    backdrop-filter: blur(6px);
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.auth-showcase-points li:hover {
    border-color: #ffffff2e;
    background: #ffffff12;
    transform: translateY(-2px);
}
.auth-showcase-points strong { color: #f2f5ff; font-weight: 650; }

.auth-showcase-point-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 15px;
    color: #cfe0ff;
    background: linear-gradient(150deg, #3b6bff33, #7a4dff33);
    border: 1px solid #ffffff1f;
}

.auth-showcase-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.auth-showcase-badge {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #c9d4f5;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #ffffff1c;
    background: #ffffff0d;
}

/* ---- right: form panel --------------------------------------- */
.auth-panel {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(24px, 5vw, 64px);
    background:
        radial-gradient(900px 500px at 100% 0%, #eef3ff 0%, transparent 60%),
        linear-gradient(180deg, #f7f9fd 0%, #f1f4fa 100%);
}

.auth-panel .auth-card {
    width: min(100%, 460px);
    background: #ffffff;
    border: 1px solid #e4e9f3;
    border-radius: 22px;
    box-shadow:
        0 1px 2px #1720330a,
        0 12px 32px #17203314,
        0 32px 80px #1720331f;
    padding: clamp(28px, 4vw, 44px);
    position: relative;
}
.auth-panel .auth-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(90deg, #2448a8, #5b6bff 45%, #8a5bff);
    opacity: .9;
}

.auth-brand { padding: 0 0 24px; }
.auth-panel .brand-name { font-weight: 750; letter-spacing: .01em; }

.auth-panel .eyebrow { margin: 0 0 6px; }

.auth-panel h1 {
    margin: 0 0 8px;
    font-size: clamp(24px, 2.6vw, 30px);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.auth-panel .auth-card > .muted { margin: 0 0 22px; }

/* ---- fields --------------------------------------------------- */
.auth-form { display: grid; gap: 16px; }

.auth-field { display: grid; gap: 7px; }

.auth-field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    color: var(--ink);
}
.auth-field-hint { font-size: 11.5px; font-weight: 500; color: var(--muted); }

.auth-input-wrap {
    position: relative;
    display: block;
}

.auth-input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    translate: 0 -50%;
    font-size: 14px;
    color: #97a3b8;
    pointer-events: none;
    transition: color .2s ease;
}

.auth-input-wrap input {
    width: 100%;
    border: 1.5px solid #dce2ee;
    border-radius: 12px;
    padding: 12px 14px 12px 38px;
    font: inherit;
    color: var(--ink);
    background: #fbfcfe;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.auth-input-wrap input::placeholder { color: #a5aebf; }

.auth-input-wrap input:hover { border-color: #c3cde0; background: #fff; }

.auth-input-wrap input:focus {
    outline: none;
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}
.auth-input-wrap input:focus ~ * {}
.auth-input-wrap:focus-within .auth-input-icon { color: var(--brand); }

.auth-reveal {
    position: absolute;
    right: 8px;
    top: 50%;
    translate: 0 -50%;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.auth-reveal:hover { color: var(--brand); background: #f0f4fd; }

.auth-field-note {
    font-size: 12px;
    color: var(--muted);
}

/* ---- submit CTA ------------------------------------------------ */
.auth-submit {
    margin-top: 4px;
    width: 100%;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 12px;
    padding: 13px 18px;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #2448a8 0%, #3556d6 55%, #5b4fd6 100%);
    box-shadow: 0 8px 20px #2448a83d, inset 0 1px 0 #ffffff2b;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.auth-submit:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px #2448a850, inset 0 1px 0 #ffffff33;
}
.auth-submit:active { transform: translateY(0); filter: brightness(.98); }

.auth-submit-arrow {
    transition: transform .18s ease;
}
.auth-submit:hover .auth-submit-arrow { transform: translateX(4px); }

.auth-submit:focus-visible,
.auth-reveal:focus-visible,
.auth-oauth .secondary-button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---- divider + oauth ------------------------------------------- */
.auth-divider { margin: 24px 0 14px; }

.auth-oauth { gap: 12px; }

.auth-oauth .secondary-button {
    min-height: 46px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .18s ease, background .2s ease;
}
.auth-oauth .secondary-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px #17203314;
}

.auth-oauth-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dot, var(--brand));
    flex: 0 0 auto;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--brand)) 22%, transparent);
}

.auth-oauth-dot[data-oauth-brand="google"] {
    background: #4285f4;
    box-shadow: 0 0 0 3px color-mix(in srgb, #4285f4 22%, transparent);
}

.auth-oauth-dot[data-oauth-brand="microsoft"] {
    background: #00a4ef;
    box-shadow: 0 0 0 3px color-mix(in srgb, #00a4ef 22%, transparent);
}

/* ---- status / footer ------------------------------------------- */
.auth-status { margin-top: 16px; }
.auth-otp-intro { margin: 0; color: var(--muted); line-height: 1.55; }
.auth-otp-resend { width: 100%; min-height: 42px; }
.auth-form input[autocomplete="one-time-code"] {
    letter-spacing: .35em;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.auth-switch { margin-top: 14px; }
.auth-switch a { color: var(--brand); font-weight: 650; }

.auth-security {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px dashed #e2e7f1;
    font-size: 12px;
    color: var(--muted);
}

/* ---- responsive ------------------------------------------------ */
@media (max-width: 980px) {
    .auth-shell--split { grid-template-columns: 1fr; }
    .auth-showcase {
        padding: 40px 24px 48px;
        align-content: start;
    }
    .auth-showcase-inner { max-width: 560px; margin-inline: auto; }
    .auth-showcase-points { gap: 10px; }
    .auth-showcase-points li { padding: 12px 14px; }
}

@media (max-width: 640px) {
    .auth-showcase-points li:nth-child(n+3),
    .auth-showcase-foot { display: none; }
    .auth-showcase-lede { font-size: 15px; }
    .auth-panel { padding: 20px 14px 48px; }
    .auth-panel .auth-card { padding: 24px 20px; border-radius: 18px; }
    .auth-oauth { grid-template-columns: 1fr; }
}

/* ---- dark theme ------------------------------------------------ */
[data-theme="dark"] .auth-shell--split { background: #0b0f1c; }

[data-theme="dark"] .auth-panel {
    background:
        radial-gradient(900px 500px at 100% 0%, #131c38 0%, transparent 60%),
        linear-gradient(180deg, #0d1222 0%, #0a0f1e 100%);
}

[data-theme="dark"] .auth-panel .auth-card {
    background: #111730;
    border-color: #232c4c;
    box-shadow: 0 12px 32px #00000066, 0 32px 80px #00000080;
}

[data-theme="dark"] .auth-panel h1,
[data-theme="dark"] .auth-field-label { color: #eef1fa; }

[data-theme="dark"] .auth-panel .auth-card > .muted,
[data-theme="dark"] .auth-field-hint,
[data-theme="dark"] .auth-field-note,
[data-theme="dark"] .auth-security,
[data-theme="dark"] .auth-status { color: #9aa6c4; }

[data-theme="dark"] .auth-input-wrap input {
    background: #0d1326;
    border-color: #2a3357;
    color: #eef1fa;
}
[data-theme="dark"] .auth-input-wrap input:hover { border-color: #384475; background: #0f1630; }
[data-theme="dark"] .auth-input-wrap input::placeholder { color: #5d6a91; }
[data-theme="dark"] .auth-input-icon { color: #5d6a91; }
[data-theme="dark"] .auth-input-wrap input:focus {
    border-color: #5b7bff;
    box-shadow: 0 0 0 4px #5b7bff26;
}
[data-theme="dark"] .auth-input-wrap:focus-within .auth-input-icon { color: #8aa5ff; }

[data-theme="dark"] .auth-reveal:hover { color: #8aa5ff; background: #1a2244; }

[data-theme="dark"] .auth-submit {
    background: linear-gradient(135deg, #2b52c4 0%, #3a63e0 55%, #6a52e0 100%);
    box-shadow: 0 8px 20px #00000066, inset 0 1px 0 #ffffff26;
}

[data-theme="dark"] .auth-oauth .secondary-button {
    background: #131a34;
    border-color: #2a3357;
    color: #dfe5f5;
}
[data-theme="dark"] .auth-oauth .secondary-button:hover { border-color: #40508c; box-shadow: 0 6px 16px #00000059; }

[data-theme="dark"] .auth-switch a { color: #8aa5ff; }
[data-theme="dark"] .auth-security { border-top-color: #232c4c; }

[data-theme="dark"] .auth-panel .auth-card::before {
    background: linear-gradient(90deg, #3b6bff, #6a8bff 45%, #9a7bff);
}

/* showcase brand visibility on dark panel */
.auth-showcase-brand .brand-mark,
.auth-showcase-brand .brand-name {
    background: linear-gradient(145deg, #6f93ff, #4a6ef2);
    box-shadow: 0 8px 22px #00000059;
}
.auth-showcase-brand .brand-name {
    background: none;
    box-shadow: none;
    color: #fff;
    font-size: 19px;
    font-weight: 750;
}

/* ================================================================
   VISUAL QUALITY SLICE — review-grade workspace surfaces
   ================================================================ */
:root {
    --surface-hover: #f7f9fd;
    --surface-inset: #f3f6fa;
    --border-soft: #e8edf4;
    --ink-strong: #101827;
    --focus-ring: #6f8fff;
}

body {
    min-width: 320px;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
}

::selection {
    background: #cbd8ff;
    color: #10204c;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

:where(button, input, select, textarea):disabled {
    opacity: .58;
}

/* Icon frames keep the existing text glyphs legible without changing markup. */
.app-shell :where(.nav-icon, .record-icon, .metric-icon, .empty-state-icon, .party-detail-icon, .matter-participant-icon, .admin-role-icon, .library-card-icon) {
    display: inline-grid;
    place-items: center;
    flex: none;
    font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif;
    font-weight: 800;
    line-height: 1;
    text-rendering: geometricPrecision;
}

.app-shell .nav-icon {
    width: 30px;
    height: 30px;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    font-size: .9rem;
}

.app-shell .nav-item.active .nav-icon {
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
    background: color-mix(in srgb, var(--brand) 15%, transparent);
}

.app-shell :where(.record-icon, .party-detail-icon, .matter-participant-icon, .admin-role-icon, .library-card-icon) {
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 #ffffff80;
    font-size: 1rem;
}

.app-shell .metric-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: .95rem;
}

/* Strong actions, quiet actions, and destructive actions read differently at a glance. */
:where(.primary-button, .secondary-button, .quiet-button, .create-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}

:where(.primary-button, .create-button) {
    border: 1px solid var(--brand);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 86%, white), var(--brand));
    color: #fff !important;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 24%, transparent), inset 0 1px 0 #ffffff40;
}

:where(.primary-button, .create-button):hover:not(:disabled) {
    border-color: var(--brand-hover);
    background: linear-gradient(180deg, var(--brand), var(--brand-hover));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 28%, transparent), inset 0 1px 0 #ffffff40;
    transform: translateY(-1px);
}

.secondary-button {
    border: 1px solid var(--border-strong);
    background: var(--surface-raised, var(--surface));
    color: var(--ink) !important;
    box-shadow: 0 1px 2px #17203314;
}

.secondary-button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--brand) 52%, var(--border-strong));
    background: var(--brand-soft);
    color: var(--brand) !important;
    transform: translateY(-1px);
}

.quiet-button {
    min-height: 38px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
}

.quiet-button:hover:not(:disabled) {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--ink);
}

:where([data-client-archive], [data-document-archive], [data-logout], [data-matter-transition="archived"], [data-deadline-transition="cancellation"]) {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
    color: var(--danger) !important;
}

:where([data-client-archive], [data-document-archive], [data-logout], [data-matter-transition="archived"], [data-deadline-transition="cancellation"]):hover:not(:disabled) {
    border-color: var(--danger);
    background: var(--danger-soft);
}

/* Application shell: calmer chrome with clear content boundaries. */
.app-shell {
    background:
        radial-gradient(circle at 100% 0, #e8efff 0, transparent 34rem),
        var(--canvas);
}

.app-shell .sidebar {
    width: 276px;
    padding: 24px 16px 20px;
    background: color-mix(in srgb, var(--surface) 94%, var(--canvas));
    box-shadow: 8px 0 24px #17203308;
}

.app-shell .brand {
    min-height: 44px;
    gap: 11px;
    padding-right: 8px;
    padding-left: 8px;
}

.app-shell .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(145deg, #4568da, #23429c);
    box-shadow: 0 5px 13px #3157c833;
}

.app-shell .tenant-switcher {
    min-height: 58px;
    margin-top: 8px;
    margin-bottom: 24px;
    border-color: transparent;
    border-radius: 10px;
    background: var(--subtle);
}

.app-shell .tenant-switcher:hover,
.app-shell .tenant-switcher:focus-visible {
    border-color: #aebef0;
    background: var(--brand-soft);
}

.app-shell .nav-list {
    gap: 5px;
}

.app-shell .nav-item {
    min-height: 46px;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: .82rem;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.app-shell .nav-item:hover {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--ink);
}

.app-shell .nav-item.active {
    border-color: #c7d3f8;
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
    color: var(--brand);
}

.app-shell .topbar {
    height: 72px;
    padding-inline: clamp(18px, 3.2vw, 48px);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 3px 14px #17203308;
    backdrop-filter: blur(14px);
}

.app-shell .profile-button,
.app-shell :where(.icon-button, .notification-button, .more-button, .mobile-menu) {
    min-width: 40px;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 9px;
}

.app-shell .profile-button {
    min-width: 0;
    margin-left: 4px;
    padding: 4px 9px 4px 5px;
    border-color: var(--border);
    background: var(--surface);
    box-shadow: 0 1px 2px #17203314;
}

.app-shell :where(.icon-button, .notification-button, .more-button, .mobile-menu):hover,
.app-shell .profile-button:hover {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--ink);
}

.app-shell .content {
    width: min(100%, 1480px);
    padding: clamp(24px, 4vw, 42px) clamp(16px, 3vw, 42px);
}

.app-shell .page-heading {
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 28px;
}

.app-shell .page-heading h1 {
    margin-bottom: 7px;
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    letter-spacing: -.05em;
}

.app-shell .eyebrow {
    color: var(--brand);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Panels and records carry hierarchy through spacing, elevation, and hover affordance. */
.app-shell :where(.metric-card, .panel, .library-card, .admin-role-card, .admin-session-card) {
    border-color: var(--panel-border, var(--border));
    border-radius: 14px;
    box-shadow: 0 2px 5px #1720330b, 0 14px 34px #1720330a;
}

.app-shell .metric-card {
    position: relative;
    min-height: 142px;
    padding: 20px;
    overflow: hidden;
}

.app-shell .metric-card::after {
    position: absolute;
    right: -28px;
    bottom: -38px;
    width: 104px;
    height: 104px;
    border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-soft) 75%, transparent);
    content: "";
    pointer-events: none;
}

.app-shell .metric-top,
.app-shell .metric-value,
.app-shell .metric-note {
    position: relative;
    z-index: 1;
}

.app-shell .metric-value {
    margin-top: 12px;
    font-size: 2.15rem;
    font-weight: 800;
    letter-spacing: -.06em;
}

.app-shell .panel {
    padding: clamp(20px, 2.2vw, 28px);
}

.app-shell .panel-header {
    min-height: 34px;
    gap: 16px;
    margin-bottom: 20px;
}

.app-shell .panel-header h2 {
    font-size: .96rem;
    letter-spacing: -.02em;
}

.app-shell :where(.workspace-record, .party-detail-row, .document-client-row, .client-document-row, .relationship-row, .matter-participant-row, .matter-history-row, .admin-member-row) {
    min-height: 54px;
    border-color: var(--border);
    border-radius: 11px;
    background: var(--surface-raised, var(--surface));
    box-shadow: 0 1px 3px #1720330c;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.app-shell :where(.workspace-record, .party-detail-row, .document-client-row, .client-document-row, .relationship-row, .matter-participant-row, .matter-history-row, .admin-member-row):hover,
.app-shell :where(.workspace-record, .party-detail-row, .document-client-row, .client-document-row, .relationship-row, .matter-participant-row, .matter-history-row, .admin-member-row):focus-within {
    border-color: color-mix(in srgb, var(--brand) 44%, var(--border));
    background: var(--surface-hover);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 9%, transparent);
    transform: translateY(-1px);
}

.app-shell .empty-state,
.app-shell :where(.library-state, .admin-state, .conflict-empty, .conflict-no-candidates, .conflict-error-state, .conflict-protected-state) {
    min-height: 190px;
    align-content: center;
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--surface), var(--subtle));
}

/* Drafting surfaces are denser, but still separate selection, mapping, and output. */
.app-shell .drafting-layout {
    grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr);
    gap: 20px;
    align-items: start;
}

.app-shell :where(.drafting-template-panel, .drafting-workflow-panel, .drafting-composer) {
    position: relative;
    overflow: clip;
    border-radius: 15px;
}

.app-shell :where(.drafting-template-panel, .drafting-workflow-panel, .drafting-composer)::before {
    position: absolute;
    top: 0;
    right: 22px;
    left: 22px;
    height: 5px;
    border-radius: 0 0 5px 5px;
    background: linear-gradient(90deg, #5576de, var(--brand));
    content: "";
}

.app-shell .drafting-workflow-panel::before {
    background: linear-gradient(90deg, var(--brand), #829aff);
}

.app-shell .drafting-composer::before {
    background: linear-gradient(90deg, #2d9b6b, var(--success));
}

.app-shell .drafting-matter-context {
    border-radius: 12px;
    border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
    background: linear-gradient(135deg, var(--brand-soft), var(--surface));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 9%, transparent);
}

.app-shell .drafting-matter-context[data-state="ready"],
.app-shell :where(.drafting-template-summary, .drafting-result-heading, .drafting-handoff-success) {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
    background: linear-gradient(135deg, var(--success-soft), var(--surface));
}

.app-shell :where(.drafting-mapping-panel, .drafting-preview-panel, .drafting-handoff) {
    margin-top: 20px;
    border-color: var(--panel-border, var(--border));
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 3px #1720330c;
}

.app-shell .drafting-mapping-row {
    gap: 16px;
    padding: 16px;
    border-radius: 10px;
    background: var(--surface-inset);
}

.app-shell .drafting-mapping-row:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}

.app-shell :where(.drafting-preview-output, .drafting-result-output) {
    min-height: 16rem;
    max-height: 34rem;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-inset);
    color: var(--ink);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .79rem;
    line-height: 1.8;
    box-shadow: inset 0 1px 4px #17203314;
}

.app-shell .drafting-result-output {
    min-height: 24rem;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--brand-soft) 38%, transparent), transparent 3rem),
        var(--surface-inset);
}

/* Forms and dialogs feel intentional while retaining native semantics. */
.app-shell :where(.client-form, .workspace-form, .party-form, .document-metadata-form, .drafting-composer-form, .relationship-dialog form, .work-dialog form) {
    gap: 16px;
}

.app-shell :where(.client-form, .workspace-form, .party-form, .document-metadata-form, .drafting-composer-form, .relationship-dialog form, .work-dialog form) label {
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
}

.app-shell :where(input, select, textarea) {
    min-height: 42px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--surface-raised, var(--surface));
    color: var(--ink);
    box-shadow: inset 0 1px 2px #17203308;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.app-shell :where(input, select, textarea):focus {
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent), inset 0 1px 2px #17203308;
    outline: none;
}

.app-shell :where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.app-shell :where(.settings-modal, .party-dialog, .work-dialog, .relationship-dialog, .library-dialog) {
    max-width: min(46rem, calc(100vw - 32px));
    max-height: min(92vh, 780px);
    overflow: auto;
    border: 1px solid var(--panel-border, var(--border));
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 28px 80px #1015224a, 0 2px 8px #10152226;
}

.app-shell .modal-backdrop {
    padding: 24px;
    background: color-mix(in srgb, #101522 58%, transparent);
    backdrop-filter: blur(10px);
}

.app-shell .modal-header {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
}

.app-shell .modal-header h2 {
    margin-top: 0;
    letter-spacing: -.04em;
}

.app-shell .modal-actions {
    position: sticky;
    bottom: -24px;
    z-index: 1;
    margin: 20px -24px -24px;
    padding: 16px 24px 24px;
    border-top: 1px solid var(--border-soft);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 28%);
}

/* Small screens keep actions tappable and preserve the drafting sequence. */
@media (min-width: 901px) {
    .app-shell .drafting-template-panel {
        position: sticky;
        top: 96px;
    }
}

@media (max-width: 1100px) {
    .app-shell .drafting-layout {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    }
}

@media (max-width: 900px) {
    .app-shell .drafting-layout {
        grid-template-columns: 1fr;
    }

    .app-shell .drafting-template-panel {
        position: static;
    }
}

@media (max-width: 700px) {
    .app-shell .sidebar {
        display: none;
    }

    .app-shell .topbar {
        height: 64px;
    }

    .app-shell .content {
        padding: 24px 16px 36px;
    }

    .app-shell :where(.page-actions, .record-actions, .modal-actions) {
        align-items: stretch;
        flex-direction: column;
    }

    .app-shell :where(.page-actions, .record-actions, .modal-actions) > :where(a, button) {
        width: 100%;
    }

    .app-shell .drafting-matter-context {
        grid-template-columns: 1fr;
    }

    .app-shell .modal-backdrop {
        align-items: end;
        padding: 12px;
    }

    .app-shell :where(.settings-modal, .party-dialog, .work-dialog, .relationship-dialog, .library-dialog) {
        width: 100%;
        max-width: none;
        border-radius: 16px 16px 10px 10px;
    }

    .app-shell .modal-actions {
        bottom: -20px;
        margin: 20px -20px -20px;
        padding: 16px 20px 20px;
    }
}

@media (max-width: 520px) {
    .app-shell .top-actions {
        gap: 2px;
    }

    .app-shell :where(.icon-button, .notification-button, .profile-button) {
        min-width: 38px;
        min-height: 38px;
    }

    .app-shell .metric-grid {
        grid-template-columns: 1fr;
    }

    .app-shell :where(.drafting-preview-output, .drafting-result-output) {
        min-height: 12rem;
        padding: 15px;
        font-size: .74rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.primary-button, .secondary-button, .quiet-button, .create-button),
    .app-shell :where(.workspace-record, .party-detail-row, .document-client-row, .client-document-row, .relationship-row, .matter-participant-row, .matter-history-row, .admin-member-row) {
        transition: none;
    }

    :where(.primary-button, .secondary-button, .quiet-button, .create-button):hover:not(:disabled),
    .app-shell :where(.workspace-record, .party-detail-row, .document-client-row, .client-document-row, .relationship-row, .matter-participant-row, .matter-history-row, .admin-member-row):hover {
        transform: none;
    }
}

@media (forced-colors: active) {
    :where(.primary-button, .secondary-button, .quiet-button, .create-button, .icon-button, .notification-button, .more-button, .mobile-menu) {
        border: 1px solid ButtonText;
        forced-color-adjust: auto;
    }

    .app-shell .nav-item.active,
    .app-shell .workspace-record:focus-within,
    .app-shell .drafting-mapping-row:focus-within {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --surface-hover: #2b384b;
        --surface-inset: #17202e;
        --border-soft: #303d51;
        --ink-strong: #f7f9ff;
    }

    html:not([data-theme="light"]) .app-shell {
        background:
            radial-gradient(circle at 100% 0, #2a3a62 0, transparent 36rem),
            var(--canvas);
    }

    html:not([data-theme="light"]) .app-shell :where(.workspace-record, .party-detail-row, .document-client-row, .client-document-row, .relationship-row, .matter-participant-row, .matter-history-row, .admin-member-row) {
        background: linear-gradient(180deg, var(--surface-raised), var(--surface));
    }
}

[data-theme="dark"] {
    --surface-hover: #2b384b;
    --surface-inset: #17202e;
    --border-soft: #303d51;
    --ink-strong: #f7f9ff;
}

[data-theme="dark"] .app-shell {
    background:
        radial-gradient(circle at 100% 0, #2a3a62 0, transparent 36rem),
        var(--canvas);
}

[data-theme="dark"] .app-shell :where(.workspace-record, .party-detail-row, .document-client-row, .client-document-row, .relationship-row, .matter-participant-row, .matter-history-row, .admin-member-row) {
    background: linear-gradient(180deg, var(--surface-raised), var(--surface));
}

/* Client profiles: dense enough for practice work, calm enough for review. */
.party-dialog {
    scrollbar-gutter: stable;
}

.party-form .form-section-heading > div {
    min-width: 0;
}

.party-form .form-section-heading strong {
    letter-spacing: -.01em;
}

.party-form .form-hint {
    margin: -4px 0 0;
    font-size: .76rem;
    line-height: 1.45;
}

.party-form .party-repeater {
    min-width: 0;
}

.party-repeater-empty {
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: 9px;
    background: var(--surface-inset, var(--subtle));
    color: var(--muted);
    font-size: .8rem;
}

.party-repeat-row {
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.party-repeat-row:focus-within {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
    background: var(--surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.party-repeat-row label > span:first-child {
    min-height: 1.1em;
}

.party-repeat-row .party-remove-row {
    color: var(--muted);
}

.party-repeat-row .party-remove-row:hover:not(:disabled) {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
    background: var(--danger-soft);
}

.party-field-error {
    color: var(--danger);
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.35;
}

.party-form [aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent);
}

.party-form[data-client-save-state="checking"] .modal-actions,
.party-form[data-client-save-state="submitting"] .modal-actions {
    pointer-events: none;
}

.party-form[data-client-save-state="checking"] .modal-actions .primary-button,
.party-form[data-client-save-state="submitting"] .modal-actions .primary-button {
    cursor: progress;
}

.party-form [data-client-status] {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: .78rem;
}

.party-form [data-client-status]:empty {
    display: none;
}

.party-form [data-client-status][data-state="dirty"] {
    border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
    background: var(--brand-soft);
    color: var(--brand);
}

.party-form [data-client-status][data-state="checking"],
.party-form [data-client-status][data-state="submitting"] {
    border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
    background: var(--surface-inset, var(--subtle));
    color: var(--muted);
}

.party-form [data-client-status][data-state="invalid"],
.party-form [data-client-status][data-state="error"] {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
    background: var(--danger-soft);
    color: var(--danger);
}

.party-form [data-client-status][data-state="warning"],
.party-form [data-client-status][data-state="conflict"] {
    border-color: color-mix(in srgb, var(--warning) 44%, var(--border));
    background: var(--warning-soft, #fff8eb);
    color: var(--warning);
}

.party-form [data-client-status][data-state="success"] {
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
    background: var(--success-soft);
    color: var(--success);
}

.party-form [data-client-status] .quiet-button {
    margin: -4px 0 -4px 6px;
    padding: 3px 7px;
    vertical-align: middle;
}

.party-form[data-client-save-state="success"] .modal-actions {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 28%);
}

.party-form[data-identifier-save-state="submitting"] .modal-actions {
    pointer-events: none;
}

.party-form [data-identifier-status] {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: .78rem;
}

.party-form [data-identifier-status][data-state="invalid"],
.party-form [data-identifier-status][data-state="error"] {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
    background: var(--danger-soft);
    color: var(--danger);
}

.party-form [data-identifier-status][data-state="conflict"] {
    border-color: color-mix(in srgb, var(--warning) 44%, var(--border));
    background: var(--warning-soft, #fff8eb);
    color: var(--warning);
}

.party-form [data-identifier-status][data-state="success"] {
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
    background: var(--success-soft);
    color: var(--success);
}

@media (max-width: 720px) {
    .party-form .party-repeat-row {
        gap: 9px;
        padding: 12px 42px 12px 12px;
    }

    .party-form .party-repeat-row .form-row {
        gap: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .party-repeat-row {
        transition: none;
    }
}

/* ============================================================
   DASHBOARD — enterprise refinement pass
   Restrained palette · strong hierarchy · subtle depth
   ============================================================ */

.content { max-width: 1440px }

/* --- Page heading --- */
.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px
}
.page-heading h1 {
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 6px 0 6px
}
.page-heading .eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0
}
.page-heading .muted { font-size: 14px; margin: 0 }
.quiet-button {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 550;
    transition: border-color .15s, box-shadow .15s;
    white-space: nowrap
}
.quiet-button:hover {
    border-color: #b9c2d2;
    box-shadow: 0 1px 3px #17203314
}

/* --- Risk banner: quiet, actionable --- */
.risk-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: linear-gradient(0deg, var(--surface), var(--surface)), #fdf9ec;
    background: #fdfaf1;
    border: 1px solid #e5d9b8;
    border-left: 3px solid #b98a1f;
    border-radius: 10px;
    margin-bottom: 24px
}
.risk-banner strong { font-size: 13.5px; font-weight: 600 }
.risk-banner span, .risk-banner b { font-size: 13px; color: var(--muted) }
.risk-banner b { color: var(--ink); font-weight: 550 }
.risk-banner a {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    white-space: nowrap
}
.risk-icon {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f6edd2;
    color: #8a6410;
    font-weight: 700;
    font-size: 14px
}

/* --- Metric cards --- */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px
}
.metric-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px 16px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .18s, border-color .18s;
    position: relative;
    overflow: hidden
}
.metric-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--brand);
    opacity: 0;
    transition: opacity .18s
}
.metric-card:hover { box-shadow: 0 2px 4px #17203312, 0 8px 24px #17203312; border-color: #c3cbdb }
.metric-card:hover::before { opacity: .85 }
.metric-card .metric-top { display: flex; align-items: center; justify-content: space-between }
.metric-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted)
}
.metric-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600
}
.metric-icon.blue { background: #eef2fa; color: #2a4fa8 }
.metric-icon.purple { background: #f1edf9; color: #5d3fa0 }
.metric-icon.amber { background: #faf3e4; color: #96660a }
.metric-icon.green { background: #e9f4ee; color: #147a50 }
.metric-value {
    font-size: 34px;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums
}
.metric-foot {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 2px
}
.metric-note { font-size: 12.5px; color: var(--muted) }
.metric-delta {
    font-size: 11.5px;
    font-weight: 550;
    color: #8a93a3;
    font-variant-numeric: tabular-nums
}

/* --- Panels --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 24px
}
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow)
}
.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--subtle)
}
.panel-header h2 {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0
}
.panel-subtitle { font-size: 12.5px; color: var(--muted); margin: 2px 0 0 }
.panel-header a {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand);
    white-space: nowrap
}

/* --- Agenda list --- */
.agenda-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 12px;
    margin: 0 -12px;
    border-radius: 10px;
    transition: background .12s
}
.agenda-item:hover { background: #f7f8fb }
.agenda-item time {
    font-size: 13px;
    font-weight: 650;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    width: 46px;
    flex: none
}
.agenda-item strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink) }
.agenda-item p { margin: 1px 0 0; font-size: 12.5px; color: var(--muted) }
.agenda-line { flex: none; width: 3px; height: 34px; border-radius: 2px }
.blue-line { background: #7d97d6 }
.purple-line { background: #b3a3dd }
.amber-line { background: #ddb45f }
.agenda-tag {
    margin-left: auto;
    flex: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--subtle);
    color: var(--muted)
}
.agenda-tag.review { background: #f1edf9; color: #5d3fa0 }
.agenda-tag.deadline { background: #faf3e4; color: #96660a }
.add-link {
    margin-top: 12px;
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: none;
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s
}
.add-link:hover { border-color: #b9c2d2; background: #f9fafc }

/* --- Work list --- */
.work-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 12px;
    margin: 0 -12px;
    border-radius: 10px;
    transition: background .12s
}
.work-item:hover { background: #f7f8fb }
.work-item strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink) }
.work-item p { margin: 1px 0 0; font-size: 12.5px; color: var(--muted) }
.work-item .check {
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #b9c2d2;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s, background .15s
}
.work-item .check:hover { border-color: var(--brand); background: #eef2fa }
.priority {
    margin-left: auto;
    flex: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 999px
}
.priority.high { background: #faeceb; color: #9a2f26 }
.priority.medium { background: #faf3e4; color: #96660a }
.priority.low { background: var(--subtle); color: var(--muted) }

/* --- Sidebar polish --- */
.sidebar { border-right: 1px solid var(--border) }
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px
}
.brand-mark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(160deg, #1d3c8f, #14265c);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    box-shadow: inset 0 -1px 0 #0c1738
}
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ink) }
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #444c5c;
    text-decoration: none;
    transition: background .12s, color .12s
}
.nav-item:hover { background: #f0f2f6; color: var(--ink) }
.nav-item.active {
    background: #e9eef9;
    color: #1d3c8f;
    font-weight: 600
}
.nav-icon {
    width: 20px;
    text-align: center;
    color: inherit;
    opacity: .75;
    font-size: 14px
}
.nav-item.active .nav-icon { opacity: 1 }
.nav-count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #dfe5f1;
    color: #1d3c8f;
    font-size: 11px;
    font-weight: 650
}
.security-note {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: #f2f8f4;
    border: 1px solid #d9e9de;
    font-size: 12px;
    color: #2f6b47
}
.security-note span:first-child { color: var(--success) }

/* --- Topbar --- */
.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 32px;
    border-bottom: 1px solid var(--border);
    background: var(--surface)
}
.breadcrumb { font-size: 13px; color: var(--muted) }
.breadcrumb span { margin: 0 6px; color: #b6bdc9 }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px }
.icon-button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
    transition: border-color .15s, color .15s
}
.icon-button:hover { border-color: #b9c2d2; color: var(--ink) }
.create-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: #1d3c8f;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 -1px 0 #142a66;
    transition: background .15s
}
.create-button:hover { background: #19347e }
.create-button .caret { opacity: .7 }
.notification-button {
    position: relative;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted)
}
.notification-button b {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #b4232c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 0 4px
}
.profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px 5px 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s
}
.profile:hover { border-color: #b9c2d2 }
.profile-avatar {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #1d3c8f;
    color: #fff;
    font-size: 11px;
    font-weight: 700
}
.profile-name { font-size: 13px; font-weight: 600; color: var(--ink) }

/* --- Footer --- */
.footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 8px;
    border-top: 1px solid var(--subtle);
    font-size: 12px;
    color: #8a93a3
}
.footer a { color: var(--muted) }
.footer a:hover { color: var(--brand) }
.footer kbd {
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--subtle);
    font-size: 11px;
    color: var(--ink)
}

/* --- Responsive --- */
@media (max-width: 1200px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr) }
    .dashboard-grid { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
    .metric-grid { grid-template-columns: 1fr }
    .page-heading { flex-direction: column; align-items: flex-start }
    .metric-card { padding: 16px }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .metric-card, .nav-item, .agenda-item, .work-item,
    .quiet-button, .add-link, .icon-button, .create-button { transition: none }
}

/* ============================================================
   UNIFIED RECORD ROW SYSTEM — enterprise list treatment
   Applies to every collection: clients, organizations, matters,
   documents, tasks, calendar, notifications
   ============================================================ */
.app-shell .workspace-records {
    gap: 10px;
}

.app-shell .workspace-record {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 14px 18px 14px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.app-shell .workspace-record::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 999px;
    background: var(--brand);
    opacity: 0;
    transition: opacity .18s ease;
}

.app-shell .workspace-record:hover {
    border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
    box-shadow: 0 2px 4px #1720330d, 0 10px 26px #17203310;
    transform: translateY(-1px);
}

.app-shell .workspace-record:hover::before {
    opacity: 1;
}

/* --- Anchoring chip --- */
.app-shell .record-chip {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
    border-radius: 10px;
    background: #eef2fa;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

.app-shell .record-chip[data-chip-tone="high"] {
    background: #faeceb;
    border-color: color-mix(in srgb, #9a2f26 22%, var(--border));
    color: #9a2f26;
}

.app-shell .record-chip[data-chip-tone="medium"] {
    background: #faf3e4;
    border-color: color-mix(in srgb, #96660a 22%, var(--border));
    color: #96660a;
}

.app-shell .record-chip[data-chip-tone="low"] {
    background: #e9f4ee;
    border-color: color-mix(in srgb, #147a50 22%, var(--border));
    color: #147a50;
}

/* --- Main content column --- */
.app-shell .record-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.app-shell .record-main a,
.app-shell .record-title {
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.008em;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s ease;
}

.app-shell .record-main a:hover {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent);
    text-underline-offset: 3px;
}

.app-shell .record-meta,
.app-shell .record-main > div > span,
.app-shell .work-record-meta {
    color: var(--muted);
    font-size: 12.5px;
    letter-spacing: .004em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-shell .work-record-meta {
    font-size: 12px;
    opacity: .85;
}

/* --- Trailing column: pills + actions --- */
.app-shell .record-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* --- Semantic state pills (shared: record + task pills) --- */
.app-shell .record-state-pill,
.app-shell .work-state-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--subtle);
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-shell .record-state-pill::before,
.app-shell .work-state-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: .75;
}

.app-shell .record-state-pill[data-state="active"],
.app-shell .record-state-pill[data-state="open"],
.app-shell .record-state-pill[data-state="accepted"],
.app-shell .record-state-pill[data-state="published"],
.app-shell .work-state-pill[data-work-state="done"],
.app-shell .work-state-pill[data-deadline-state="accepted"] {
    background: #e9f4ee;
    border-color: color-mix(in srgb, #147a50 24%, transparent);
    color: #147a50;
}

.app-shell .record-state-pill[data-state="draft"],
.app-shell .record-state-pill[data-state="proposed"],
.app-shell .record-state-pill[data-state="pending"],
.app-shell .record-state-pill[data-state="scheduled"],
.app-shell .record-state-pill[data-state="in-review"],
.app-shell .record-state-pill[data-state="in-progress"],
.app-shell .work-state-pill[data-work-state="in-progress"],
.app-shell .work-state-pill[data-deadline-state="proposed"] {
    background: #faf3e4;
    border-color: color-mix(in srgb, #96660a 24%, transparent);
    color: #96660a;
}

.app-shell .record-state-pill[data-state="blocked"],
.app-shell .record-state-pill[data-state="quarantined"],
.app-shell .work-state-pill[data-work-state="blocked"] {
    background: #faeceb;
    border-color: color-mix(in srgb, #9a2f26 24%, transparent);
    color: #9a2f26;
}

.app-shell .record-state-pill[data-state="archived"],
.app-shell .record-state-pill[data-state="cancelled"],
.app-shell .record-state-pill[data-state="cancelled-archived"],
.app-shell .work-state-pill[data-work-state="cancelled"] {
    background: var(--subtle);
    border-color: var(--border);
    color: var(--muted);
}

/* --- Dark theme --- */
html[data-theme="dark"] .app-shell .workspace-record {
    background: #1c2230;
    border-color: #2c3444;
}

html[data-theme="dark"] .app-shell .workspace-record:hover {
    border-color: color-mix(in srgb, #7d97d8 42%, #2c3444);
    box-shadow: 0 2px 4px #0000004d, 0 10px 26px #00000059;
}

html[data-theme="dark"] .app-shell .workspace-record::before {
    background: #7d97d8;
}

html[data-theme="dark"] .app-shell .record-chip {
    background: color-mix(in srgb, #7d97d8 14%, transparent);
    border-color: color-mix(in srgb, #7d97d8 30%, transparent);
    color: #a8bbee;
}

html[data-theme="dark"] .app-shell .record-chip[data-chip-tone="high"] {
    background: color-mix(in srgb, #d9857e 14%, transparent);
    border-color: color-mix(in srgb, #d9857e 30%, transparent);
    color: #e6a8a3;
}

html[data-theme="dark"] .app-shell .record-chip[data-chip-tone="medium"] {
    background: color-mix(in srgb, #d9a95e 14%, transparent);
    border-color: color-mix(in srgb, #d9a95e 30%, transparent);
    color: #e3c48f;
}

html[data-theme="dark"] .app-shell .record-chip[data-chip-tone="low"] {
    background: color-mix(in srgb, #5eb98b 14%, transparent);
    border-color: color-mix(in srgb, #5eb98b 30%, transparent);
    color: #8fd4b1;
}

html[data-theme="dark"] .app-shell .record-main a,
html[data-theme="dark"] .app-shell .record-title {
    color: #eef1f6;
}

html[data-theme="dark"] .app-shell .record-main a:hover {
    color: #a8bbee;
}

html[data-theme="dark"] .app-shell .record-meta,
html[data-theme="dark"] .app-shell .record-main > div > span,
html[data-theme="dark"] .app-shell .work-record-meta {
    color: #9aa3b2;
}

html[data-theme="dark"] .app-shell .record-state-pill,
html[data-theme="dark"] .app-shell .work-state-pill {
    background: color-mix(in srgb, #ffffff 6%, transparent);
    border-color: #2c3444;
    color: #9aa3b2;
}

html[data-theme="dark"] .app-shell .record-state-pill[data-state="active"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="open"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="accepted"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="published"],
html[data-theme="dark"] .app-shell .work-state-pill[data-work-state="done"],
html[data-theme="dark"] .app-shell .work-state-pill[data-deadline-state="accepted"] {
    background: color-mix(in srgb, #5eb98b 14%, transparent);
    border-color: color-mix(in srgb, #5eb98b 30%, transparent);
    color: #8fd4b1;
}

html[data-theme="dark"] .app-shell .record-state-pill[data-state="draft"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="proposed"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="pending"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="scheduled"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="in-review"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="in-progress"],
html[data-theme="dark"] .app-shell .work-state-pill[data-work-state="in-progress"],
html[data-theme="dark"] .app-shell .work-state-pill[data-deadline-state="proposed"] {
    background: color-mix(in srgb, #d9a95e 14%, transparent);
    border-color: color-mix(in srgb, #d9a95e 30%, transparent);
    color: #e3c48f;
}

html[data-theme="dark"] .app-shell .record-state-pill[data-state="blocked"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="quarantined"],
html[data-theme="dark"] .app-shell .work-state-pill[data-work-state="blocked"] {
    background: color-mix(in srgb, #d9857e 14%, transparent);
    border-color: color-mix(in srgb, #d9857e 30%, transparent);
    color: #e6a8a3;
}

/* --- Responsive: stack rows gracefully --- */
@media (max-width: 720px) {
    .app-shell .workspace-record {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 10px;
    }

    .app-shell .record-side {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .workspace-record,
    .app-shell .workspace-record::before,
    .app-shell .record-main a,
    .app-shell .record-state-pill,
    .app-shell .work-state-pill {
        transition: none;
    }

    .app-shell .workspace-record:hover {
        transform: none;
    }
}
/* === LIBRARY (templates & clauses) — enterprise refinement === */

.app-shell .library-page .page-heading {
    margin-bottom: 1.15rem;
}

/* ---- Tabs ---- */
.app-shell .library-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0 0 1.25rem;
    padding: .3rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.app-shell .library-tabs a {
    display: inline-flex;
    flex-direction: column;
    gap: .1rem;
    padding: .6rem .95rem;
    border-radius: 7px;
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, color .15s, box-shadow .15s;
}

.app-shell .library-tabs a:hover,
.app-shell .library-tabs a:focus-visible {
    background: var(--subtle);
    color: var(--ink);
}

.app-shell .library-tabs a.active {
    background: var(--brand);
    color: #fff;
}

.app-shell .library-tabs a.active .library-tab-sub {
    color: #c5d2f0;
}

.app-shell .library-tab-label {
    font-size: .82rem;
    line-height: 1.3;
}

.app-shell .library-tab-sub {
    font-size: .68rem;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.3;
}

/* ---- Spotlight ---- */
.app-shell .library-spotlight {
    border: 1px solid var(--border);
    background: linear-gradient(115deg, var(--surface) 55%, #eef2fa 100%);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.15rem;
    box-shadow: var(--shadow);
}

.app-shell .library-spotlight .spotlight-kicker {
    display: inline-block;
    font-size: .68rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--brand);
    margin-bottom: .35rem;
}

.app-shell .library-spotlight h2 {
    margin: 0 0 .3rem;
    font-size: 1.08rem;
    line-height: 1.35;
}

.app-shell .library-spotlight p {
    margin: 0;
    font-size: .8rem;
    color: var(--muted);
    max-width: 42rem;
}

.app-shell .library-spotlight .spotlight-stat strong {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.app-shell .library-spotlight .spotlight-stat span {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin-top: .1rem;
}

/* ---- Toolbar ---- */
.app-shell .library-toolbar {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(9rem, .35fr) minmax(11rem, .45fr) auto;
    gap: .7rem;
    align-items: end;
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.app-shell .library-toolbar label {
    display: grid;
    gap: .3rem;
    min-width: 0;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.app-shell .library-toolbar input,
.app-shell .library-toolbar select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: .5rem .7rem;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: .82rem;
    text-transform: none;
    letter-spacing: normal;
    transition: border-color .15s, box-shadow .15s;
}

.app-shell .library-toolbar input:focus,
.app-shell .library-toolbar select:focus {
    border-color: var(--brand);
    outline: 0;
    box-shadow: 0 0 0 3px #2448a815;
}

.app-shell .library-search input {
    padding-left: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23626a78' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: .7rem center;
    background-size: 14px;
}

.app-shell .library-clear-filters {
    margin: 0;
    white-space: nowrap;
}

/* ---- Sync pill ---- */
.app-shell .library-sync-state {
    padding: .28rem .65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--subtle);
}

/* ---- Grid ---- */
.app-shell .library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: .85rem;
    padding: 1.25rem;
}

/* ---- Card ---- */
.app-shell .library-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 1px 2px #17203308;
    transition: box-shadow .18s, transform .18s, border-color .18s;
    position: relative;
    overflow: hidden;
}

.app-shell .library-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: background .18s;
}

.app-shell .library-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #17203312, 0 12px 32px #1720330a;
    border-color: #b8c4d8;
}

.app-shell .library-card:hover::before {
    background: var(--brand);
}

.app-shell .library-card[data-library-status="published"]:hover::before {
    background: var(--success);
}

.app-shell .library-card[data-library-status="draft"]:hover::before {
    background: var(--warning);
}

/* Card top row */
.app-shell .library-card-top {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: 1.05rem 1.15rem .55rem;
}

.app-shell .library-card-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 9px;
    background: var(--subtle);
    color: var(--muted);
    font-size: 1rem;
    font-weight: 700;
    transition: background .15s, color .15s;
}

.app-shell .library-card-icon[data-state="published"] {
    background: #e9f4ee;
    color: var(--success);
}

.app-shell .library-card-icon[data-state="draft"] {
    background: #faf3e4;
    color: var(--warning);
}

.app-shell .library-card-icon[data-state="active"] {
    background: #e9f4ee;
    color: var(--success);
}

.app-shell .library-card-icon[data-state="archived"],
.app-shell .library-card-icon[data-state="deprecated"],
.app-shell .library-card-icon[data-state="retired"] {
    background: var(--subtle);
    color: var(--muted);
}

.app-shell .library-card-titles {
    flex: 1;
    min-width: 0;
}

.app-shell .library-card-titles h3 {
    margin: 0 0 .2rem;
    font-size: .88rem;
    font-weight: 750;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.app-shell .library-card-titles p {
    margin: 0;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* ---- Status pill ---- */
.app-shell .library-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: none;
    min-height: 1.5rem;
    padding: .18rem .55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--subtle);
    color: var(--muted);
    font-size: .66rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .045em;
    white-space: nowrap;
    line-height: 1.35;
}

.app-shell .library-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
    opacity: .75;
}

.app-shell .library-status[data-state="published"] {
    border-color: #b9e2cf;
    background: #e9f4ee;
    color: #147a50;
}

.app-shell .library-status[data-state="active"] {
    border-color: #b9e2cf;
    background: #e9f4ee;
    color: #147a50;
}

.app-shell .library-status[data-state="draft"] {
    border-color: #e5c887;
    background: #faf3e4;
    color: #96660a;
}

.app-shell .library-status[data-state="archived"],
.app-shell .library-status[data-state="deprecated"],
.app-shell .library-status[data-state="retired"] {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--muted);
}

.app-shell .library-status[data-state="unpublished"] {
    border-color: #c5d0e8;
    background: #eef2fa;
    color: var(--brand);
}

/* ---- Meta grid ---- */
.app-shell .library-card-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: .55rem 1.15rem;
    border-top: 1px solid var(--border);
}

.app-shell .library-card-meta div {
    display: grid;
    gap: .15rem;
    min-width: 0;
    padding-right: .6rem;
}

.app-shell .library-card-meta div + div {
    border-left: 1px solid var(--border);
    padding-left: .7rem;
}

.app-shell .library-card-meta dt {
    color: var(--muted);
    font-size: .62rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.4;
}

.app-shell .library-card-meta dd {
    margin: 0;
    font-size: .76rem;
    line-height: 1.4;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.app-shell .library-version-value {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* ---- Footer / actions ---- */
.app-shell .library-card-footer {
    display: flex;
    justify-content: flex-end;
    padding: .55rem 1.15rem 1rem;
    margin-top: auto;
}

.app-shell .library-card-actions {
    display: flex;
}

.app-shell .library-card-cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .8rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--brand);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}

.app-shell .library-card-cta:hover,
.app-shell .library-card-cta:focus-visible {
    border-color: var(--brand);
    background: #eef2fa;
    color: var(--brand);
}

.app-shell .library-card-cta-arrow {
    font-size: .85rem;
    line-height: 1;
    transition: transform .15s;
}

.app-shell .library-card-cta:hover .library-card-cta-arrow {
    transform: translateX(2px);
}

/* ---- Empty / loading / error states ---- */
.app-shell .library-state {
    display: grid;
    justify-items: center;
    gap: .4rem;
    min-height: 12rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    align-content: center;
}

.app-shell .library-state .empty-state-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--subtle);
    color: var(--muted);
    font-size: 1.1rem;
    margin-bottom: .3rem;
}

.app-shell .library-state h3 {
    margin: 0;
    font-size: .92rem;
    font-weight: 750;
}

.app-shell .library-state p {
    max-width: 36rem;
    margin: 0;
    font-size: .8rem;
    color: var(--muted);
}

.app-shell .library-state .primary-button,
.app-shell .library-state .secondary-button {
    margin-top: .5rem;
}

.app-shell .library-state-error {
    border-left: 3px solid var(--danger);
}

.app-shell .library-loading {
    display: grid;
    gap: .7rem;
    min-height: 200px;
    align-content: center;
    padding: 1.75rem 1.5rem;
}

.app-shell .library-loading span {
    display: block;
    height: .7rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--subtle), var(--surface), var(--subtle));
    background-size: 200% 100%;
    animation: library-loading-shimmer 1.35s ease-in-out infinite;
}

.app-shell .library-loading span:nth-child(1) { width: 38%; }
.app-shell .library-loading span:nth-child(2) { width: 78%; }
.app-shell .library-loading span:nth-child(3) { width: 58%; }

@keyframes library-loading-shimmer {
    to { background-position: -200% 0; }
}

/* ---- Session note ---- */
.app-shell .library-session-note {
    margin: .85rem 0 0;
    padding: .65rem .85rem;
    border: 1px solid #e5c887;
    border-radius: 8px;
    background: #faf3e4;
    color: #96660a;
    font-size: .76rem;
    line-height: 1.45;
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
    .app-shell .library-toolbar {
        grid-template-columns: 1fr 1fr;
    }
    .app-shell .library-toolbar .library-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 780px) {
    .app-shell .library-grid {
        grid-template-columns: 1fr;
    }
    .app-shell .library-toolbar {
        grid-template-columns: 1fr;
    }
    .app-shell .library-card-top {
        flex-wrap: wrap;
    }
    .app-shell .library-card-meta {
        grid-template-columns: 1fr;
        gap: .5rem;
    }
    .app-shell .library-card-meta div + div {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--border);
        padding-top: .5rem;
    }
    .app-shell .library-tabs a {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ---- Dark theme ---- */
[data-theme="dark"] .app-shell .library-spotlight {
    background: linear-gradient(115deg, var(--surface) 55%, #1a2233 100%);
    border-color: #3b4658;
}

[data-theme="dark"] .app-shell .library-spotlight .spotlight-kicker {
    color: #7ea3e0;
}

[data-theme="dark"] .app-shell .library-tabs {
    border-color: #3b4658;
}

[data-theme="dark"] .app-shell .library-tabs a.active {
    background: #2a4a9e;
    color: #e0e8fa;
}

[data-theme="dark"] .app-shell .library-tabs a.active .library-tab-sub {
    color: #8ea8d8;
}

[data-theme="dark"] .app-shell .library-toolbar input,
[data-theme="dark"] .app-shell .library-toolbar select {
    background: #1a2032;
    border-color: #3b4658;
    color: var(--ink);
}

[data-theme="dark"] .app-shell .library-toolbar input:focus,
[data-theme="dark"] .app-shell .library-toolbar select:focus {
    border-color: #4a6cc0;
    box-shadow: 0 0 0 3px #4a6cc020;
}

[data-theme="dark"] .app-shell .library-card {
    border-color: #3b4658;
    box-shadow: 0 1px 2px #00000020;
}

[data-theme="dark"] .app-shell .library-card:hover {
    border-color: #4a5568;
    box-shadow: 0 4px 14px #00000030, 0 10px 28px #00000018;
}

[data-theme="dark"] .app-shell .library-card-icon[data-state="published"],
[data-theme="dark"] .app-shell .library-card-icon[data-state="active"] {
    background: #142e22;
    color: #4dab7e;
}

[data-theme="dark"] .app-shell .library-card-icon[data-state="draft"] {
    background: #2e2410;
    color: #d4a038;
}

[data-theme="dark"] .app-shell .library-status[data-state="published"],
[data-theme="dark"] .app-shell .library-status[data-state="active"] {
    border-color: #2a5c42;
    background: #142e22;
    color: #4dab7e;
}

[data-theme="dark"] .app-shell .library-status[data-state="draft"] {
    border-color: #5c4a1e;
    background: #2e2410;
    color: #d4a038;
}

[data-theme="dark"] .app-shell .library-status[data-state="unpublished"] {
    border-color: #2a3a5c;
    background: #1a2233;
    color: #7ea3e0;
}

[data-theme="dark"] .app-shell .library-card-meta div + div {
    border-left-color: #3b4658;
}

[data-theme="dark"] .app-shell .library-card-cta {
    border-color: #3b4658;
    color: #7ea3e0;
}

[data-theme="dark"] .app-shell .library-card-cta:hover,
[data-theme="dark"] .app-shell .library-card-cta:focus-visible {
    border-color: #4a6cc0;
    background: #1a2233;
    color: #8fb4e8;
}

[data-theme="dark"] .app-shell .library-session-note {
    border-color: #5c4a1e;
    background: #2e2410;
    color: #d4a038;
}

[data-theme="dark"] .app-shell .library-state .empty-state-icon {
    background: #293142;
    color: var(--muted);
}

[data-theme="dark"] .app-shell .library-loading span {
    background: linear-gradient(90deg, #293142, #202532, #293142);
    background-size: 200% 100%;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .app-shell .library-card,
    .app-shell .library-card::before,
    .app-shell .library-card-cta,
    .app-shell .library-card-cta-arrow,
    .app-shell .library-tabs a {
        transition: none;
    }
    .app-shell .library-card:hover {
        transform: none;
    }
    .app-shell .library-loading span {
        animation: none;
    }
}

/* === DRAFTING — enterprise refinement === */
.app-shell .drafting-page {
    --draft-accent: #1d3c8f;
    --draft-accent-hover: #17327a;
    --draft-accent-soft: #eef2fa;
    --draft-on-accent: #ffffff;
    --draft-line: #d9dee7;
    --draft-line-strong: #c8d0dd;
    --draft-inset: #f8fafc;
    --draft-paper: #fdfdfe;
    --draft-ink: #171a21;
    --draft-muted: #626a78;
    --draft-success: #147a50;
    --draft-success-soft: #e9f4ee;
    --draft-warning: #96660a;
    --draft-warning-soft: #faf3e4;
    --draft-danger: #9a2f26;
    --draft-danger-soft: #faeceb;
    --draft-radius: 14px;
    --draft-shadow: 0 1px 2px #1720330a, 0 10px 26px #17203308;
    color: var(--draft-ink);
}

[data-theme="dark"] .app-shell .drafting-page {
    --draft-accent: #a3b6ee;
    --draft-accent-hover: #c0ceff;
    --draft-accent-soft: #26345a;
    --draft-on-accent: #101a2d;
    --draft-line: #3b4658;
    --draft-line-strong: #52627a;
    --draft-inset: #161e2b;
    --draft-paper: #151d29;
    --draft-ink: #f2f5fa;
    --draft-muted: #b3bdcc;
    --draft-success: #8bdfb7;
    --draft-success-soft: #1c3a30;
    --draft-warning: #f5d58e;
    --draft-warning-soft: #3a301e;
    --draft-danger: #ffadb5;
    --draft-danger-soft: #3e252c;
    --draft-shadow: 0 2px 5px #00000030, 0 12px 30px #00000035;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .app-shell .drafting-page {
        --draft-accent: #a3b6ee;
        --draft-accent-hover: #c0ceff;
        --draft-accent-soft: #26345a;
        --draft-on-accent: #101a2d;
        --draft-line: #3b4658;
        --draft-line-strong: #52627a;
        --draft-inset: #161e2b;
        --draft-paper: #151d29;
        --draft-ink: #f2f5fa;
        --draft-muted: #b3bdcc;
        --draft-success: #8bdfb7;
        --draft-success-soft: #1c3a30;
        --draft-warning: #f5d58e;
        --draft-warning-soft: #3a301e;
        --draft-danger: #ffadb5;
        --draft-danger-soft: #3e252c;
        --draft-shadow: 0 2px 5px #00000030, 0 12px 30px #00000035;
    }
}

.app-shell .drafting-page .page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: start;
    margin: 0 0 20px;
    padding: 22px 24px;
    border: 1px solid var(--draft-line);
    border-radius: var(--draft-radius);
    background: var(--surface);
    box-shadow: var(--draft-shadow);
}

.app-shell .drafting-page .drafting-page-intro { min-width: 0; }
.app-shell .drafting-page .page-heading .eyebrow { margin: 0 0 7px; color: var(--draft-accent); font-size: 11px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.app-shell .drafting-page .page-heading h1 { margin: 0; color: var(--draft-ink); font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 830; letter-spacing: -.035em; line-height: 1.14; }
.app-shell .drafting-page .page-heading .muted { max-width: 66ch; margin: 8px 0 0; color: var(--draft-muted); font-size: .88rem; line-height: 1.55; }
.app-shell .drafting-page .drafting-header-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--draft-line); }
.app-shell .drafting-page .drafting-trust-item { display: grid; gap: 2px; }
.app-shell .drafting-page .drafting-trust-item strong { color: var(--draft-ink); font-size: .82rem; font-weight: 780; }
.app-shell .drafting-page .drafting-trust-item span { color: var(--draft-muted); font-size: .71rem; letter-spacing: .04em; text-transform: uppercase; }

.app-shell .drafting-page .drafting-toolbar { position: sticky; top: 16px; z-index: 2; display: inline-flex; gap: 4px; justify-self: end; max-width: 100%; padding: 4px; border: 1px solid var(--draft-line); border-radius: 11px; background: color-mix(in srgb, var(--draft-inset) 88%, transparent); backdrop-filter: blur(10px); overflow: auto; }
.app-shell .drafting-page .drafting-toolbar a { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid transparent; border-radius: 8px; color: var(--draft-muted); font-size: .8rem; font-weight: 720; text-decoration: none; white-space: nowrap; transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.app-shell .drafting-page .drafting-toolbar a span:first-child { color: var(--draft-accent); font-size: .9rem; line-height: 1; }
.app-shell .drafting-page .drafting-toolbar a:not(.primary-button):hover, .app-shell .drafting-page .drafting-toolbar a:not(.primary-button):focus-visible { border-color: color-mix(in srgb, var(--draft-accent) 22%, var(--draft-line)); background: var(--surface); color: var(--draft-ink); }
.app-shell .drafting-page .drafting-toolbar .primary-button { padding: 0 12px; }

.app-shell .drafting-page .drafting-context-rail { display: grid; gap: 12px; margin-bottom: 20px; }
.app-shell .drafting-page .drafting-context-note { margin: 0; padding: 13px 15px; border: 1px solid var(--draft-line); border-left: 3px solid color-mix(in srgb, var(--draft-accent) 55%, transparent); border-radius: 10px; background: var(--surface); color: var(--draft-muted); font-size: .8rem; }
.app-shell .drafting-page :where(.drafting-library-context, .drafting-matter-context) { position: relative; overflow: hidden; margin: 0; padding: 16px 18px; border: 1px solid var(--draft-line); border-left: 3px solid color-mix(in srgb, var(--draft-accent) 58%, transparent); border-radius: 11px; background: var(--surface); color: var(--draft-ink); box-shadow: 0 1px 2px #1720330a; }
.app-shell .drafting-page :where(.drafting-library-context, .drafting-matter-context):not([data-state]) { border-left-color: color-mix(in srgb, var(--draft-accent) 34%, var(--draft-line)); background: var(--draft-inset); }
.app-shell .drafting-page :where(.drafting-library-context, .drafting-matter-context)[data-state="loading"] { border-left-color: color-mix(in srgb, var(--draft-accent) 48%, var(--draft-line)); background: var(--draft-inset); }
.app-shell .drafting-page :where(.drafting-library-context, .drafting-matter-context)[data-state="ready"], .app-shell .drafting-page .drafting-library-context[data-state="protected"] { border-color: color-mix(in srgb, var(--draft-success) 26%, var(--draft-line)); border-left-color: var(--draft-success); background: color-mix(in srgb, var(--draft-success-soft) 72%, var(--surface)); }
.app-shell .drafting-page :where(.drafting-library-context, .drafting-matter-context)[data-state="attention"], .app-shell .drafting-page :where(.drafting-library-context, .drafting-matter-context)[data-state="loading"][data-library-kind="clause"] { border-color: color-mix(in srgb, var(--draft-warning) 22%, var(--draft-line)); border-left-color: var(--draft-warning); background: color-mix(in srgb, var(--draft-warning-soft) 70%, var(--surface)); }
.app-shell .drafting-page :where(.drafting-library-context, .drafting-matter-context)[data-state="error"] { border-color: color-mix(in srgb, var(--draft-danger) 24%, var(--draft-line)); border-left-color: var(--draft-danger); background: color-mix(in srgb, var(--draft-danger-soft) 72%, var(--surface)); }
.app-shell .drafting-page .drafting-library-context .eyebrow, .app-shell .drafting-page .drafting-matter-context .eyebrow { margin: 0 0 5px; color: var(--draft-muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.app-shell .drafting-page .drafting-library-context strong, .app-shell .drafting-page .drafting-matter-context strong { display: block; color: var(--draft-ink); font-size: .92rem; font-weight: 780; overflow-wrap: anywhere; }
.app-shell .drafting-page .drafting-library-context p, .app-shell .drafting-page .drafting-matter-context p { margin: 5px 0 0; color: var(--draft-muted); font-size: .79rem; line-height: 1.45; }
.app-shell .drafting-page .drafting-matter-context { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.app-shell .drafting-page .drafting-matter-context-route { background: var(--surface); }
.app-shell .drafting-page .drafting-matter-context-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; align-self: center; }
.app-shell .drafting-page .drafting-matter-context-meta div { display: grid; gap: 3px; min-width: 0; }
.app-shell .drafting-page .drafting-matter-context-meta dt { color: var(--draft-muted); font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.app-shell .drafting-page .drafting-matter-context-meta dd { margin: 0; color: var(--draft-ink); font-size: .78rem; overflow-wrap: anywhere; }
.app-shell .drafting-page .drafting-matter-context-action { display: grid; justify-items: end; gap: 8px; min-width: 170px; }
.app-shell .drafting-page .drafting-matter-readiness { margin: 0; padding: 6px 9px; border: 1px solid var(--draft-line); border-radius: 999px; background: var(--draft-inset); color: var(--draft-muted); font-size: .7rem; line-height: 1.3; text-align: right; }
.app-shell .drafting-page .drafting-matter-readiness[data-ready="true"] { border-color: color-mix(in srgb, var(--draft-success) 28%, transparent); background: var(--draft-success-soft); color: var(--draft-success); }
.app-shell .drafting-page .drafting-matter-readiness[data-ready="false"] { border-color: color-mix(in srgb, var(--draft-warning) 28%, transparent); background: var(--draft-warning-soft); color: var(--draft-warning); }
.app-shell .drafting-page .drafting-library-context-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.app-shell .drafting-page .drafting-library-context-actions .quiet-button, .app-shell .drafting-page .drafting-library-context-actions .secondary-button { min-height: 34px; padding: 0 10px; }

.app-shell .drafting-page .workspace-spotlight { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin: 0 0 20px; padding: 20px 22px; border: 1px solid var(--draft-line); border-radius: var(--draft-radius); background: var(--surface); box-shadow: 0 1px 2px #1720330a; }
.app-shell .drafting-page .documents-spotlight::before { display: none; }
.app-shell .drafting-page .spotlight-copy { min-width: 0; }
.app-shell .drafting-page .spotlight-kicker { display: inline-block; margin-bottom: 8px; color: var(--draft-accent); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.app-shell .drafting-page .spotlight-copy h2 { margin: 0; color: var(--draft-ink); font-size: clamp(1.08rem, 2vw, 1.32rem); font-weight: 790; letter-spacing: -.025em; line-height: 1.25; }
.app-shell .drafting-page .spotlight-copy > p { max-width: 72ch; margin: 8px 0 0; color: var(--draft-muted); font-size: .83rem; line-height: 1.55; }
.app-shell .drafting-page .drafting-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.app-shell .drafting-page .drafting-principles li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--draft-line); border-radius: 9px; background: var(--draft-inset); }
.app-shell .drafting-page .drafting-principles strong { color: var(--draft-ink); font-size: .78rem; font-weight: 760; }
.app-shell .drafting-page .drafting-principles span { color: var(--draft-muted); font-size: .69rem; }
.app-shell .drafting-page .spotlight-stat { display: grid; justify-items: end; gap: 2px; min-width: 112px; padding: 14px 0 14px 20px; border-left: 1px solid var(--draft-line); text-align: right; }
.app-shell .drafting-page .spotlight-stat strong { color: var(--draft-accent); font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.app-shell .drafting-page .spotlight-stat span { max-width: 100px; color: var(--draft-muted); font-size: .69rem; line-height: 1.35; }

.app-shell .drafting-page .drafting-layout { display: grid; grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.app-shell .drafting-page .drafting-layout .panel, .app-shell .drafting-page .drafting-composer, .app-shell .drafting-page .drafting-resolver, .app-shell .drafting-page .drafting-result { position: relative; overflow: clip; min-width: 0; border: 1px solid var(--draft-line); border-radius: var(--draft-radius); background: var(--surface); box-shadow: var(--draft-shadow); }
.app-shell .drafting-page :where(.drafting-template-panel, .drafting-workflow-panel, .drafting-composer)::before { top: 0; right: auto; left: 0; width: 42px; height: 3px; border-radius: 0; background: var(--draft-accent); opacity: .72; }
.app-shell .drafting-page .drafting-template-panel::before, .app-shell .drafting-page .drafting-workflow-panel::before, .app-shell .drafting-page .drafting-composer::before { background: var(--draft-accent); }
.app-shell .drafting-page .panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0; padding: 18px 20px; border-bottom: 1px solid var(--draft-line); background: transparent; }
.app-shell .drafting-page .drafting-heading-copy { min-width: 0; }
.app-shell .drafting-page .drafting-step-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-shell .drafting-page .drafting-step-index { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--draft-accent) 20%, transparent); border-radius: 9px; background: var(--draft-accent-soft); color: var(--draft-accent); font-size: .71rem; font-weight: 820; line-height: 1; font-variant-numeric: tabular-nums; }
.app-shell .drafting-page .panel-header h2 { margin: 0; color: var(--draft-ink); font-size: 1.04rem; font-weight: 790; letter-spacing: -.022em; line-height: 1.25; }
.app-shell .drafting-page .panel-subtitle { margin: 7px 0 0; color: var(--draft-muted); font-size: .78rem; line-height: 1.5; }
.app-shell .drafting-page .panel-subtitle code, .app-shell .drafting-page .drafting-mapping-header code, .app-shell .drafting-page .drafting-resolver-header code { padding: 2px 4px; border: 1px solid var(--draft-line); border-radius: 4px; background: var(--draft-inset); color: var(--draft-accent); font-size: .82em; }
.app-shell .drafting-page .drafting-step-badge { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid var(--draft-line); border-radius: 999px; background: var(--draft-inset); color: var(--draft-muted); font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

.app-shell .drafting-page .drafting-template-form { display: grid; gap: 16px; margin: 0; padding: 20px; }
.app-shell .drafting-page .drafting-template-form label { display: grid; gap: 7px; margin: 0; color: var(--draft-ink); font-size: .79rem; font-weight: 740; }
.app-shell .drafting-page .drafting-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.app-shell .drafting-page .drafting-label-meta { color: var(--draft-muted); font-size: .67rem; font-weight: 720; letter-spacing: .05em; text-transform: uppercase; }
.app-shell .drafting-page :where(input, select, textarea) { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--draft-line-strong); border-radius: 9px; background: var(--surface); color: var(--draft-ink); font-size: .83rem; transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
.app-shell .drafting-page textarea { min-height: 82px; line-height: 1.55; resize: vertical; }
.app-shell .drafting-page .drafting-template-form textarea[name="bodyDsl"] { min-height: 300px; background: var(--draft-paper); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace); font-size: .79rem; line-height: 1.7; tab-size: 2; }
.app-shell .drafting-page :where(input, select, textarea)::placeholder { color: color-mix(in srgb, var(--draft-muted) 72%, transparent); }
.app-shell .drafting-page :where(input, select, textarea):hover:not(:disabled) { border-color: color-mix(in srgb, var(--draft-accent) 28%, var(--draft-line-strong)); }
.app-shell .drafting-page :where(input, select, textarea):focus, .app-shell .drafting-page :where(input, select, textarea):focus-visible { border-color: var(--draft-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--draft-accent) 14%, transparent); }
.app-shell .drafting-page .drafting-token-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: -4px; }
.app-shell .drafting-page .drafting-token-label { color: var(--draft-muted); font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.app-shell .drafting-page .drafting-token-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border: 1px solid var(--draft-line); border-radius: 999px; background: var(--draft-inset); color: var(--draft-accent); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace); font-size: .7rem; cursor: help; }
.app-shell .drafting-page .form-hint { margin: -4px 0 0; color: var(--draft-muted); font-size: .74rem; line-height: 1.5; }
.app-shell .drafting-page .drafting-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0; padding-top: 14px; border-top: 1px solid var(--draft-line); }

.app-shell .drafting-page .drafting-empty-state { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 430px; margin: 0; padding: 34px 24px; background: transparent; text-align: center; }
.app-shell .drafting-page .empty-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 5px; border: 1px solid color-mix(in srgb, var(--draft-accent) 18%, transparent); border-radius: 14px; background: var(--draft-accent-soft); color: var(--draft-accent); font-size: 1.15rem; }
.app-shell .drafting-page .drafting-empty-state h3 { margin: 0; color: var(--draft-ink); font-size: 1.05rem; font-weight: 780; letter-spacing: -.02em; }
.app-shell .drafting-page .drafting-empty-state .muted { max-width: 40ch; margin: 0; color: var(--draft-muted); font-size: .8rem; }
.app-shell .drafting-page .drafting-empty-checklist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 640px; margin: 18px 0 0; padding: 0; list-style: none; text-align: left; }
.app-shell .drafting-page .drafting-empty-checklist li { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--draft-line); border-radius: 9px; background: var(--draft-inset); }
.app-shell .drafting-page .drafting-empty-checklist strong { color: var(--draft-ink); font-size: .78rem; font-weight: 760; }
.app-shell .drafting-page .drafting-empty-checklist span { color: var(--draft-muted); font-size: .69rem; line-height: 1.4; }
.app-shell .drafting-page .drafting-workflow-guide .panel-header { border-bottom: 1px solid var(--draft-line); }
.app-shell .drafting-page .workflow-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 20px; list-style: none; }
.app-shell .drafting-page .workflow-steps li { position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--draft-line); border-radius: 10px; background: var(--draft-inset); transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.app-shell .drafting-page .workflow-steps li:hover { border-color: color-mix(in srgb, var(--draft-accent) 30%, var(--draft-line)); box-shadow: 0 1px 2px #1720330a, 0 6px 16px #17203308; transform: translateY(-1px); }
.app-shell .drafting-page .workflow-steps span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid color-mix(in srgb, var(--draft-accent) 18%, transparent); border-radius: 8px; background: var(--surface); color: var(--draft-accent); font-size: .69rem; font-weight: 830; font-variant-numeric: tabular-nums; }
.app-shell .drafting-page .workflow-steps strong { color: var(--draft-ink); font-size: .8rem; font-weight: 760; line-height: 1.35; }
.app-shell .drafting-page .workflow-steps small { color: var(--draft-muted); font-size: .68rem; letter-spacing: .03em; text-transform: uppercase; }

.app-shell .drafting-page .drafting-composer { margin: 0; padding: 0; }
.app-shell .drafting-page .drafting-template-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0; padding: 17px 20px; border: 0; border-bottom: 1px solid var(--draft-line); border-radius: 0; background: var(--draft-inset); }
.app-shell .drafting-page .drafting-template-summary > div { display: flex; align-items: center; gap: 11px; min-width: 0; }
.app-shell .drafting-page .drafting-template-summary strong { display: block; color: var(--draft-ink); font-size: .94rem; font-weight: 790; overflow-wrap: anywhere; }
.app-shell .drafting-page .drafting-template-summary > div > span { display: block; margin-top: 2px; color: var(--draft-muted); font-size: .72rem; }
.app-shell .drafting-page .drafting-template-summary small { flex: 0 0 auto; max-width: 30ch; color: var(--draft-muted); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace); font-size: .68rem; overflow-wrap: anywhere; text-align: right; }
.app-shell .drafting-page .drafting-status-dot { flex: 0 0 auto; width: 9px; height: 9px; border: 2px solid var(--surface); border-radius: 50%; background: var(--draft-success); box-shadow: 0 0 0 1px color-mix(in srgb, var(--draft-success) 22%, transparent); }
.app-shell .drafting-page .drafting-mapping-panel { margin: 20px; padding: 0; border: 1px solid var(--draft-line); border-radius: 11px; background: var(--surface); box-shadow: none; }
.app-shell .drafting-page .drafting-mapping-header, .app-shell .drafting-page .drafting-resolver-header, .app-shell .drafting-page .drafting-preview-header, .app-shell .drafting-page .drafting-handoff-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--draft-line); }
.app-shell .drafting-page .drafting-mapping-header h3, .app-shell .drafting-page .drafting-resolver-header h3, .app-shell .drafting-page .drafting-handoff-header h3 { margin: 0; color: var(--draft-ink); font-size: .98rem; font-weight: 780; letter-spacing: -.02em; }
.app-shell .drafting-page .drafting-mapping-header p, .app-shell .drafting-page .drafting-resolver-header p, .app-shell .drafting-page .drafting-preview-header span, .app-shell .drafting-page .drafting-handoff-header p { margin: 6px 0 0; color: var(--draft-muted); font-size: .76rem; line-height: 1.5; }
.app-shell .drafting-page .drafting-mapping-guidance { display: grid; gap: 3px; margin: 16px 18px 0; padding: 11px 13px; border: 1px solid var(--draft-line); border-left: 3px solid var(--draft-accent); border-radius: 8px; background: var(--draft-inset); font-size: .75rem; }
.app-shell .drafting-page .drafting-mapping-guidance strong { color: var(--draft-ink); font-size: .78rem; font-weight: 760; }
.app-shell .drafting-page .drafting-mapping-guidance span { color: var(--draft-muted); line-height: 1.45; }
.app-shell .drafting-page .drafting-mapping-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 12px 18px 0; padding: 11px 13px; border: 1px solid var(--draft-line); border-radius: 8px; background: var(--surface); }
.app-shell .drafting-page .drafting-mapping-summary strong { color: var(--draft-ink); font-size: .79rem; font-variant-numeric: tabular-nums; }
.app-shell .drafting-page .drafting-mapping-summary span { color: var(--draft-muted); font-size: .73rem; text-align: right; }
.app-shell .drafting-page .drafting-mapping-form { display: grid; gap: 15px; padding: 16px 18px 18px; }
.app-shell .drafting-page .drafting-mapping-form label { display: grid; gap: 6px; color: var(--draft-ink); font-size: .78rem; font-weight: 740; }
.app-shell .drafting-page .drafting-mapping-list { display: grid; gap: 10px; }
.app-shell .drafting-page .drafting-mapping-row { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(140px, .55fr) minmax(0, 1.2fr); align-items: start; gap: 14px; margin: 0; padding: 14px; border: 1px solid var(--draft-line); border-radius: 10px; background: var(--draft-inset); transition: border-color .16s ease, box-shadow .16s ease; }
.app-shell .drafting-page .drafting-mapping-row:focus-within { border-color: var(--draft-accent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--draft-accent) 14%, transparent); }
.app-shell .drafting-page .drafting-mapping-row.is-invalid { border-color: color-mix(in srgb, var(--draft-danger) 42%, var(--draft-line)); border-left: 3px solid var(--draft-danger); background: color-mix(in srgb, var(--draft-danger-soft) 70%, var(--surface)); }
.app-shell .drafting-page .drafting-mapping-field { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.app-shell .drafting-page .drafting-mapping-number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 27px; height: 27px; border: 1px solid var(--draft-line); border-radius: 8px; background: var(--surface); color: var(--draft-muted); font-size: .67rem; font-weight: 830; font-variant-numeric: tabular-nums; }
.app-shell .drafting-page .drafting-mapping-field strong { display: block; color: var(--draft-ink); font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
.app-shell .drafting-page .drafting-mapping-field strong code { padding: 0; border: 0; background: transparent; color: var(--draft-accent); font-size: .78rem; }
.app-shell .drafting-page .drafting-mapping-field small { display: block; margin-top: 3px; color: var(--draft-muted); font-size: .68rem; }
.app-shell .drafting-page .drafting-mapping-label-hint { display: block; color: var(--draft-muted); font-size: .67rem; font-weight: 650; line-height: 1.35; }
.app-shell .drafting-page .drafting-mapping-help { grid-column: 1 / -1; margin: 0; color: var(--draft-muted); font-size: .72rem; line-height: 1.45; }
.app-shell .drafting-page .drafting-mapping-error { grid-column: 1 / -1; margin: 0; color: var(--draft-danger); font-size: .73rem; line-height: 1.4; }
.app-shell .drafting-page .drafting-mapping-row.is-static [data-mapping-static-control] { color: var(--draft-ink); }
.app-shell .drafting-page .drafting-mapping-recovery { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--draft-warning) 25%, var(--draft-line)); border-radius: 9px; background: var(--draft-warning-soft); }
.app-shell .drafting-page .drafting-mapping-recovery[hidden] { display: none; }
.app-shell .drafting-page .drafting-mapping-recovery strong { display: block; color: var(--draft-ink); font-size: .78rem; }
.app-shell .drafting-page .drafting-mapping-recovery span { display: block; margin-top: 2px; color: color-mix(in srgb, var(--draft-warning) 88%, var(--draft-ink)); font-size: .72rem; }
.app-shell .drafting-page .drafting-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin: 0; padding-top: 14px; border-top: 1px solid var(--draft-line); }
.app-shell .drafting-page .drafting-static-field { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--draft-line); border-radius: 9px; background: var(--draft-inset); }
.app-shell .drafting-page .drafting-static-field strong code { color: var(--draft-accent); font-size: .78rem; }
.app-shell .drafting-page .drafting-static-field span { color: var(--draft-muted); font-size: .73rem; line-height: 1.5; }
.app-shell .drafting-page .drafting-static-field b { color: var(--draft-ink); font-weight: 760; }

.app-shell .drafting-page .drafting-resolver { margin: 20px; }
.app-shell .drafting-page .drafting-resolver[hidden], .app-shell .drafting-page .drafting-result[hidden] { display: none; }
.app-shell .drafting-page .drafting-composer-form { display: grid; gap: 18px; padding: 18px; }
.app-shell .drafting-page .drafting-composer-form .form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.app-shell .drafting-page .drafting-composer-form label { display: grid; gap: 6px; color: var(--draft-ink); font-size: .78rem; font-weight: 740; }
.app-shell .drafting-page .drafting-composer-form label strong { color: var(--draft-ink); font-size: .78rem; }
.app-shell .drafting-page .drafting-composer-form label strong code { color: var(--draft-accent); font-size: .78rem; }
.app-shell .drafting-page .drafting-composer-form label .muted { color: var(--draft-muted); font-size: .68rem; font-weight: 650; line-height: 1.35; }
.app-shell .drafting-page .drafting-handoff-confirm {
    display: flex;
    align-items: start;
    gap: 9px;
}
.app-shell .drafting-page .drafting-handoff-confirm span {
    flex: 1;
    min-width: 0;
    line-height: 1.45;
    text-align: left;
}
.app-shell .drafting-page .drafting-handoff-confirm input[type="checkbox"],
.app-shell .drafting-page .drafting-client-option input[type="checkbox"] {
    flex: none;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
}
.app-shell .drafting-page .drafting-fields { display: grid; gap: 14px; padding: 14px; border: 1px solid var(--draft-line); border-radius: 10px; background: var(--draft-inset); }
.app-shell .drafting-page .drafting-field-group { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--draft-line); }
.app-shell .drafting-page .drafting-field-group:first-of-type { padding-top: 0; border-top: 0; }
.app-shell .drafting-page .drafting-field-group-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.app-shell .drafting-page .drafting-field-group-heading h4,
.app-shell .drafting-page .drafting-field-group-heading p { margin: 0; }
.app-shell .drafting-page .drafting-field-group-heading h4 { color: var(--draft-ink); font-size: .83rem; }
.app-shell .drafting-page .drafting-field-group-heading p { margin-top: 3px; color: var(--draft-muted); font-size: .7rem; line-height: 1.4; }
.app-shell .drafting-page .drafting-field-group-heading > span { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border: 1px solid var(--draft-line); border-radius: 999px; background: var(--surface); color: var(--draft-muted); font-size: .68rem; font-weight: 800; }
.app-shell .drafting-page .drafting-field-group-list { display: grid; gap: 12px; }
.app-shell .drafting-page .form-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-shell .drafting-page .form-section-heading strong { color: var(--draft-ink); font-size: .81rem; font-weight: 780; }
.app-shell .drafting-page .form-section-heading span { color: var(--draft-muted); font-size: .69rem; letter-spacing: .04em; text-transform: uppercase; }

.app-shell .drafting-page .drafting-preview-panel { margin: 0; padding: 0; border: 1px solid var(--draft-line); border-radius: 10px; background: var(--surface); box-shadow: none; }
.app-shell .drafting-page .drafting-preview-header strong { display: block; color: var(--draft-ink); font-size: .84rem; font-weight: 770; }
.app-shell .drafting-page .drafting-preview-toolbar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.app-shell .drafting-page .drafting-preview-output { display: block; min-height: 250px; max-height: 48vh; margin: 16px 18px; padding: 20px; overflow: auto; border: 1px solid var(--draft-line); border-radius: 9px; background: linear-gradient(90deg, var(--draft-inset), transparent 4rem), var(--draft-paper); color: var(--draft-ink); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace); font-size: .78rem; line-height: 1.75; white-space: pre-wrap; overflow-wrap: break-word; box-shadow: inset 0 1px 3px #17203308; }
.app-shell .drafting-page .drafting-preview-output:focus-visible { border-color: var(--draft-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--draft-accent) 14%, transparent); }
.app-shell .drafting-page .drafting-preview-output.has-blockers { border-color: color-mix(in srgb, var(--draft-warning) 40%, var(--draft-line)); background: linear-gradient(90deg, color-mix(in srgb, var(--draft-warning-soft) 78%, transparent), transparent 4rem), var(--draft-paper); }
.app-shell .drafting-page .drafting-preview-missing { margin: 0 18px 14px; padding: 12px; border: 1px solid color-mix(in srgb, var(--draft-warning) 27%, var(--draft-line)); border-radius: 9px; background: var(--draft-warning-soft); }
.app-shell .drafting-page .drafting-preview-missing strong { color: var(--draft-ink); font-size: .78rem; }
.app-shell .drafting-page .drafting-preview-missing ul { margin: 7px 0 0; padding-left: 18px; }
.app-shell .drafting-page .drafting-preview-missing li { color: color-mix(in srgb, var(--draft-warning) 88%, var(--draft-ink)); font-size: .73rem; }
.app-shell .drafting-page .drafting-preview-missing li span { color: color-mix(in srgb, var(--draft-muted) 88%, transparent); }
.app-shell .drafting-page .drafting-preview-missing[hidden] { display: none; }
.app-shell .drafting-page .drafting-preview-metadata { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 18px 16px; padding-top: 14px; border-top: 1px solid var(--draft-line); }
.app-shell .drafting-page .drafting-preview-metadata dt { color: var(--draft-muted); font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.app-shell .drafting-page .drafting-preview-metadata dd { margin: 3px 0 0; color: var(--draft-ink); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace); font-size: .69rem; overflow-wrap: anywhere; }
.app-shell .drafting-page .drafting-preview-metadata code { color: inherit; }
.app-shell .drafting-page .drafting-result { margin: 20px; }
.app-shell .drafting-page .drafting-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--draft-line); background: color-mix(in srgb, var(--draft-success-soft) 55%, var(--surface)); }
.app-shell .drafting-page .drafting-result-heading > div { display: flex; align-items: center; gap: 11px; min-width: 0; }
.app-shell .drafting-page .drafting-result-heading strong { display: block; color: var(--draft-ink); font-size: .94rem; font-weight: 790; }
.app-shell .drafting-page .drafting-result-heading span { display: block; margin-top: 2px; color: var(--draft-muted); font-size: .72rem; }
.app-shell .drafting-page .drafting-result-heading small { flex: 0 0 auto; max-width: 30ch; color: var(--draft-muted); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace); font-size: .68rem; overflow-wrap: anywhere; text-align: right; }
.app-shell .drafting-page .drafting-result-output { display: block; min-height: 250px; max-height: 52vh; margin: 16px 18px; padding: 22px; overflow: auto; border: 1px solid var(--draft-line); border-radius: 9px; background: var(--draft-paper); color: var(--draft-ink); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace); font-size: .79rem; line-height: 1.75; white-space: pre-wrap; overflow-wrap: break-word; box-shadow: inset 0 1px 3px #17203308; }
.app-shell .drafting-page .metadata-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 18px; padding: 14px 0; border-top: 1px solid var(--draft-line); }
.app-shell .drafting-page .metadata-grid dt { color: var(--draft-muted); font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.app-shell .drafting-page .metadata-grid dd { margin: 3px 0 0; color: var(--draft-ink); font-size: .72rem; overflow-wrap: anywhere; }
.app-shell .drafting-page .drafting-handoff { margin: 0 18px 18px; padding: 0; border: 1px solid var(--draft-line); border-radius: 10px; background: var(--draft-inset); }
.app-shell .drafting-page .drafting-handoff-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 16px 18px; list-style: none; }
.app-shell .drafting-page .drafting-handoff-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--draft-line); border-radius: 9px; background: var(--surface); }
.app-shell .drafting-page .drafting-handoff-steps li span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 25px; height: 25px; border: 1px solid var(--draft-line); border-radius: 50%; background: var(--draft-inset); color: var(--draft-muted); font-size: .7rem; font-weight: 820; font-variant-numeric: tabular-nums; }
.app-shell .drafting-page .drafting-handoff-steps li strong { display: block; color: var(--draft-ink); font-size: .78rem; }
.app-shell .drafting-page .drafting-handoff-steps li small { display: block; margin-top: 2px; color: var(--draft-muted); font-size: .67rem; }
.app-shell .drafting-page .drafting-handoff-steps li[data-state="complete"] { border-color: color-mix(in srgb, var(--draft-success) 27%, var(--draft-line)); background: color-mix(in srgb, var(--draft-success-soft) 70%, var(--surface)); }
.app-shell .drafting-page .drafting-handoff-steps li[data-state="complete"] span { border-color: color-mix(in srgb, var(--draft-success) 30%, transparent); background: var(--draft-success-soft); color: var(--draft-success); }
.app-shell .drafting-page .drafting-handoff-steps li[data-state="current"] { border-color: color-mix(in srgb, var(--draft-accent) 28%, var(--draft-line)); background: color-mix(in srgb, var(--draft-accent-soft) 64%, var(--surface)); }
.app-shell .drafting-page .drafting-handoff-steps li[data-state="current"] span { border-color: color-mix(in srgb, var(--draft-accent) 24%, transparent); background: var(--surface); color: var(--draft-accent); }
.app-shell .drafting-page .drafting-handoff-content { padding: 0 18px 16px; }
.app-shell .drafting-page .drafting-handoff-loading { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.app-shell .drafting-page .drafting-handoff-loading span { height: 58px; border: 1px solid var(--draft-line); border-radius: 8px; background: linear-gradient(90deg, var(--draft-inset), var(--surface), var(--draft-inset)); background-size: 200% 100%; animation: drafting-sweep 1.5s ease-in-out infinite; }
.app-shell .drafting-page .drafting-handoff-error { padding: 12px; border: 1px solid color-mix(in srgb, var(--draft-danger) 25%, var(--draft-line)); border-radius: 9px; background: var(--draft-danger-soft); }
.app-shell .drafting-page .drafting-handoff-error strong { display: block; color: var(--draft-ink); font-size: .8rem; }
.app-shell .drafting-page .drafting-handoff-error p { margin: 5px 0 10px; color: color-mix(in srgb, var(--draft-danger) 88%, var(--draft-ink)); font-size: .74rem; }

.app-shell .drafting-page .auth-status { margin: 0; font-size: .75rem; }
.app-shell .drafting-page .auth-status:not(:empty) { position: relative; display: block; padding: 10px 12px 10px 29px; border: 1px solid var(--draft-line); border-radius: 8px; background: var(--draft-inset); color: var(--draft-muted); line-height: 1.45; }
.app-shell .drafting-page .auth-status:not(:empty)::before { position: absolute; top: 15px; left: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--draft-accent); content: ""; }
.app-shell .drafting-page .auth-status[role="alert"]:not(:empty) { border-color: color-mix(in srgb, var(--draft-danger) 27%, var(--draft-line)); background: color-mix(in srgb, var(--draft-danger-soft) 70%, var(--surface)); color: color-mix(in srgb, var(--draft-danger) 88%, var(--draft-ink)); }
.app-shell .drafting-page .auth-status[role="alert"]:not(:empty)::before { background: var(--draft-danger); }
.app-shell .drafting-page .drafting-handoff-status { margin: 0 18px 18px; font-size: .73rem; }
.app-shell .drafting-page .drafting-handoff-status[data-state="loading"] { border-color: color-mix(in srgb, var(--draft-accent) 22%, var(--draft-line)); background: color-mix(in srgb, var(--draft-accent-soft) 60%, var(--surface)); color: color-mix(in srgb, var(--draft-accent) 88%, var(--draft-ink)); }
.app-shell .drafting-page .drafting-handoff-status[data-state="success"], .app-shell .drafting-page .drafting-handoff-status[data-state="replayed"] { border-color: color-mix(in srgb, var(--draft-success) 26%, var(--draft-line)); background: color-mix(in srgb, var(--draft-success-soft) 72%, var(--surface)); color: color-mix(in srgb, var(--draft-success) 88%, var(--draft-ink)); }
.app-shell .drafting-page .drafting-handoff-status[data-state="blocked"] { border-color: color-mix(in srgb, var(--draft-warning) 26%, var(--draft-line)); background: color-mix(in srgb, var(--draft-warning-soft) 72%, var(--surface)); color: color-mix(in srgb, var(--draft-warning) 88%, var(--draft-ink)); }
.app-shell .drafting-page .drafting-handoff-status[data-state="conflict"], .app-shell .drafting-page .drafting-handoff-status[data-state="error"] { border-color: color-mix(in srgb, var(--draft-danger) 26%, var(--draft-line)); background: color-mix(in srgb, var(--draft-danger-soft) 72%, var(--surface)); color: color-mix(in srgb, var(--draft-danger) 88%, var(--draft-ink)); }
.app-shell .drafting-page .drafting-mapping-state { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 24px; padding: 0 9px; border: 1px solid var(--draft-line); border-radius: 999px; background: var(--draft-inset); color: var(--draft-muted); font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.app-shell .drafting-page .drafting-mapping-state-draft, .app-shell .drafting-page .drafting-mapping-state-published-dirty { border-color: color-mix(in srgb, var(--draft-warning) 26%, transparent); background: var(--draft-warning-soft); color: color-mix(in srgb, var(--draft-warning) 88%, var(--draft-ink)); }
.app-shell .drafting-page .drafting-mapping-state-published { border-color: color-mix(in srgb, var(--draft-success) 26%, transparent); background: var(--draft-success-soft); color: color-mix(in srgb, var(--draft-success) 88%, var(--draft-ink)); }
.app-shell .drafting-page .drafting-mapping-state-error { border-color: color-mix(in srgb, var(--draft-danger) 26%, transparent); background: var(--draft-danger-soft); color: color-mix(in srgb, var(--draft-danger) 88%, var(--draft-ink)); }
.app-shell .drafting-page .drafting-preview-state { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid var(--draft-line); border-radius: 999px; background: var(--draft-inset); color: var(--draft-muted); font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.app-shell .drafting-page .drafting-preview-state[data-state="server"] { border-color: color-mix(in srgb, var(--draft-success) 27%, transparent); background: var(--draft-success-soft); color: color-mix(in srgb, var(--draft-success) 88%, var(--draft-ink)); }
.app-shell .drafting-page .drafting-preview-state[data-state="checking"] { border-color: color-mix(in srgb, var(--draft-accent) 24%, transparent); background: var(--draft-accent-soft); color: color-mix(in srgb, var(--draft-accent) 88%, var(--draft-ink)); }
.app-shell .drafting-page .drafting-preview-state[data-state="stale"], .app-shell .drafting-page .drafting-preview-state[data-state="local-error"] { border-color: color-mix(in srgb, var(--draft-warning) 27%, transparent); background: var(--draft-warning-soft); color: color-mix(in srgb, var(--draft-warning) 88%, var(--draft-ink)); }
.app-shell .drafting-page .drafting-preview-panel[data-preview-state="server"] { border-color: color-mix(in srgb, var(--draft-success) 24%, var(--draft-line)); }
.app-shell .drafting-page .drafting-preview-panel[data-preview-state="stale"], .app-shell .drafting-page .drafting-preview-panel[data-preview-state="local-error"] { border-color: color-mix(in srgb, var(--draft-warning) 24%, var(--draft-line)); }
.app-shell .drafting-page .drafting-preview-retry[hidden] { display: none; }

.app-shell .drafting-page .primary-button { min-height: 40px; padding: 0 14px; border: 1px solid var(--draft-accent); border-radius: 9px; background: var(--draft-accent); color: var(--draft-on-accent) !important; font-size: .8rem; font-weight: 790; box-shadow: 0 1px 2px #1720331a; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.app-shell .drafting-page .primary-button:hover:not(:disabled) { border-color: var(--draft-accent-hover); background: var(--draft-accent-hover); box-shadow: 0 2px 4px #17203314, 0 8px 18px #17203310; transform: translateY(-1px); }
.app-shell .drafting-page .secondary-button, .app-shell .drafting-page .quiet-button { min-height: 38px; font-size: .79rem; }
.app-shell .drafting-page .secondary-button { border: 1px solid var(--draft-line-strong); background: var(--surface); color: var(--draft-ink) !important; box-shadow: 0 1px 2px #1720330a; }
.app-shell .drafting-page .secondary-button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--draft-accent) 34%, var(--draft-line-strong)); background: var(--draft-accent-soft); color: var(--draft-accent) !important; }
.app-shell .drafting-page .quiet-button { border: 1px solid transparent; background: transparent; color: var(--draft-muted) !important; }
.app-shell .drafting-page .quiet-button:hover:not(:disabled) { border-color: var(--draft-line); background: var(--draft-inset); color: var(--draft-ink) !important; }
.app-shell .drafting-page :where(a, button, input, select, textarea):focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--draft-accent) 14%, transparent); }
.app-shell .drafting-page :disabled { cursor: not-allowed; opacity: .52; transform: none !important; }
@media (max-width: 1180px) {
    .app-shell .drafting-page .drafting-layout { grid-template-columns: 1fr; }
    .app-shell .drafting-page .workflow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .app-shell .drafting-page .drafting-mapping-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .app-shell .drafting-page .drafting-mapping-row .drafting-mapping-help, .app-shell .drafting-page .drafting-mapping-row .drafting-mapping-error { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .app-shell .drafting-page .page-heading, .app-shell .drafting-page .workspace-spotlight { grid-template-columns: 1fr; }
    .app-shell .drafting-page .drafting-toolbar { position: static; justify-self: start; width: 100%; }
    .app-shell .drafting-page .drafting-matter-context { grid-template-columns: 1fr; }
    .app-shell .drafting-page .drafting-matter-context-action { justify-items: start; }
    .app-shell .drafting-page .drafting-matter-readiness { text-align: left; }
    .app-shell .drafting-page .spotlight-stat { justify-items: start; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--draft-line); text-align: left; }
    .app-shell .drafting-page .drafting-principles, .app-shell .drafting-page .drafting-empty-checklist, .app-shell .drafting-page .drafting-handoff-steps { grid-template-columns: 1fr; }
    .app-shell .drafting-page .workflow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-shell .drafting-page .drafting-composer-form .form-row { grid-template-columns: 1fr; }
    .app-shell .drafting-page .drafting-preview-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .app-shell .drafting-page .page-heading, .app-shell .drafting-page .drafting-template-form, .app-shell .drafting-page .drafting-mapping-form, .app-shell .drafting-page .drafting-composer-form { padding: 16px; }
    .app-shell .drafting-page .panel-header, .app-shell .drafting-page .drafting-template-summary, .app-shell .drafting-page .drafting-mapping-header, .app-shell .drafting-page .drafting-resolver-header, .app-shell .drafting-page .drafting-preview-header, .app-shell .drafting-page .drafting-result-heading, .app-shell .drafting-page .drafting-handoff-header { align-items: flex-start; flex-direction: column; }
    .app-shell .drafting-page .drafting-mapping-row { grid-template-columns: 1fr; }
    .app-shell .drafting-page .workflow-steps { grid-template-columns: 1fr; }
    .app-shell .drafting-page .metadata-grid, .app-shell .drafting-page .drafting-preview-metadata, .app-shell .drafting-page .drafting-handoff-loading { grid-template-columns: 1fr; }
    .app-shell .drafting-page .drafting-actions, .app-shell .drafting-page .drafting-form-actions { align-items: stretch; flex-direction: column; }
    .app-shell .drafting-page :where(.primary-button, .secondary-button, .quiet-button) { width: 100%; }
    .app-shell .drafting-page .drafting-template-summary small, .app-shell .drafting-page .drafting-result-heading small { max-width: 100%; text-align: left; }
}

[data-theme="dark"] .app-shell .drafting-page :where(.panel, .drafting-composer, .drafting-resolver, .drafting-result, .workspace-spotlight, .page-heading) { box-shadow: 0 2px 5px #00000030, 0 12px 30px #00000035; }
[data-theme="dark"] .app-shell .drafting-page .drafting-preview-output, [data-theme="dark"] .app-shell .drafting-page .drafting-result-output { box-shadow: inset 0 1px 5px #00000040; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .app-shell .drafting-page :where(.panel, .drafting-composer, .drafting-resolver, .drafting-result, .workspace-spotlight, .page-heading) { box-shadow: 0 2px 5px #00000030, 0 12px 30px #00000035; }
    html:not([data-theme="light"]) .app-shell .drafting-page .drafting-preview-output, html:not([data-theme="light"]) .app-shell .drafting-page .drafting-result-output { box-shadow: inset 0 1px 5px #00000040; }
}

@keyframes drafting-sweep { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
    .app-shell .drafting-page :where(a, button, input, select, textarea, .workflow-steps li, .drafting-mapping-row), .app-shell .drafting-page .drafting-handoff-loading span { transition: none !important; animation: none !important; }
    .app-shell .drafting-page :where(a, button, .workflow-steps li):hover { transform: none !important; }
}
@media (forced-colors: active) {
    .app-shell .drafting-page :where(a, button, input, select, textarea, .panel, .drafting-composer, .drafting-resolver, .drafting-result, .drafting-library-context, .drafting-matter-context) { border: 1px solid ButtonText; forced-color-adjust: auto; }
    .app-shell .drafting-page :where(input, select, textarea, a, button):focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* Keep drafting and document recovery usable at touch size without changing their state semantics. */
.app-shell :where(.drafting-page, .document-detail) :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 72%, #fff);
    outline-offset: 3px;
}

.app-shell .drafting-page :where(.primary-button, .secondary-button, .quiet-button, .drafting-preview-retry, .drafting-handoff-actions button),
.app-shell .document-detail :where(.primary-button, .secondary-button, .quiet-button, .document-export-actions a, .document-export-actions button) {
    min-height: 44px;
}

.app-shell .drafting-page :where([data-drafting-handoff-state="loading"], [data-preview-state="checking"], [data-state="loading"])[aria-busy="true"],
.app-shell .document-detail :where([data-document-client-dialog-state="loading"], [data-document-client-state="loading"]) {
    cursor: progress;
}

.app-shell .drafting-page :where(.drafting-handoff-error, .drafting-handoff-conflict, .drafting-preview-state[data-state="local-error"], .drafting-mapping-recovery),
.app-shell .document-detail :where(.document-client-assignment-status[data-document-client-state="error"], .document-state-note) {
    border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--border));
    border-radius: var(--draft-radius, 10px);
    background: var(--danger-soft, #fff4f4);
    color: var(--danger);
}

.app-shell .drafting-page :where(.drafting-library-context[data-state="protected"], .drafting-empty-state, .drafting-preview-missing),
.app-shell .document-detail :where(.document-client-empty, .document-client-assignment-status[data-document-client-state="empty"]) {
    border: 1px dashed var(--border-strong, var(--border));
    border-radius: var(--draft-radius, 10px);
    background: var(--subtle);
}

.app-shell .drafting-page :where(.drafting-mapping-recovery, .drafting-handoff-actions),
.app-shell .document-detail :where(.document-export-actions, .document-client-assignment-status[data-document-client-state="conflict"]) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
}

.app-shell .drafting-page :where(.drafting-mapping-recovery, .drafting-handoff-actions) > *,
.app-shell .document-detail :where(.document-export-actions, .document-client-assignment-status[data-document-client-state="conflict"]) > * {
    min-width: 0;
}

@media (max-width: 620px) {
    .app-shell .drafting-page :where(.drafting-mapping-recovery, .drafting-handoff-actions),
    .app-shell .document-detail :where(.document-export-actions, .document-client-assignment-status[data-document-client-state="conflict"]) {
        align-items: stretch;
        flex-direction: column;
    }

    .app-shell .drafting-page :where(.drafting-mapping-recovery, .drafting-handoff-actions) > *,
    .app-shell .document-detail :where(.document-export-actions, .document-client-assignment-status[data-document-client-state="conflict"]) > * {
        width: 100%;
    }

    .app-shell .drafting-page .drafting-preview-toolbar {
        justify-content: stretch;
        width: 100%;
    }

    .app-shell .drafting-page .drafting-preview-toolbar > * {
        flex: 1 1 100%;
    }
}

@media (forced-colors: active) {
    .app-shell :where(.drafting-page, .document-detail) :where(.drafting-handoff-error, .drafting-handoff-conflict, .drafting-mapping-recovery, .drafting-library-context, .drafting-empty-state, .drafting-preview-missing, .document-client-empty, .document-state-note, .document-client-assignment-status) {
        border-color: ButtonText;
    }
}

/* === CONFLICTS / ADMIN / SEARCH — enterprise refinement === */
.app-shell .enterprise-loading{display:grid;gap:.6rem;justify-items:center;padding:2rem;color:var(--muted);font-size:.8rem;text-align:center}
.app-shell .enterprise-loading span{display:inline-grid;grid-template-columns:repeat(3,14px);gap:5px}
.app-shell .enterprise-loading span+span{display:none}
.app-shell .enterprise-loading::before{content:"";grid-column:1/-1;width:36px;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,#c8d1e2,transparent);animation:lexos-enterprise-sweep 1.2s ease-in-out infinite}
.app-shell .enterprise-protected-state,.app-shell .enterprise-error-state{max-width:640px;margin:0 auto;padding:1.25rem;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.app-shell .enterprise-protected-state strong,.app-shell .enterprise-error-state strong{display:block;margin-bottom:.3rem}
.app-shell .enterprise-error-state{border-color:#e7c5c5;background:#fdf8f8;color:#772b2b}
.app-shell .enterprise-protected-state .secondary-button,.app-shell .enterprise-error-state .secondary-button{margin-top:.9rem}
.app-shell .micro-label{display:block;margin-bottom:.35rem;color:var(--muted);font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}

.app-shell .conflict-workspace{padding-top:.2rem}
.app-shell .conflict-review-layout{display:grid;grid-template-columns:minmax(215px,.65fr) minmax(0,1.35fr);gap:1rem;align-items:start;margin-top:1rem}
.app-shell .conflict-rail{padding:.9rem;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.app-shell .conflict-list,.app-shell .conflict-candidate-list{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.app-shell .conflict-check-row{overflow:hidden;border:1px solid var(--border);border-radius:10px;background:var(--surface);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.app-shell .conflict-check-row:hover{border-color:#c4cddc;transform:translateY(-1px);box-shadow:var(--shadow)}
.app-shell .conflict-check-row.is-selected{border-color:var(--brand);box-shadow:0 0 0 1px #2448a81f,var(--shadow)}
.app-shell .conflict-check-select{display:grid;gap:.35rem;width:100%;padding:.75rem .8rem;text-align:left;color:inherit;background:transparent;border:0;cursor:pointer}
.app-shell .conflict-check-index{color:var(--ink);font-size:.82rem;font-weight:750}
.app-shell .conflict-candidate-count{color:var(--muted);font-size:.76rem}
.app-shell .conflict-candidate-count strong{color:var(--ink)}
.app-shell .conflict-check-select time{color:var(--muted);font-size:.72rem}
.app-shell .conflict-status,.app-shell .conflict-disposition,.app-shell .conflict-severity{display:inline-flex;align-items:center;width:max-content;padding:.2rem .45rem;border:1px solid transparent;border-radius:99px;font-size:.68rem;font-weight:750;letter-spacing:.02em;text-transform:capitalize}
.app-shell .conflict-status-pending,.app-shell .conflict-disposition-pending{border-color:#e7d2a4;background:#faf3e4;color:#96660a}
.app-shell .conflict-status-clear,.app-shell .conflict-disposition-cleared{border-color:#b8d8c8;background:#e9f4ee;color:#147a50}
.app-shell .conflict-status-rejected,.app-shell .conflict-disposition-confirmed_conflict{border-color:#e3bdbb;background:#faeceb;color:#9a2f26}
.app-shell .conflict-status-override,.app-shell .conflict-disposition-insufficient_information{border-color:#cdc3e6;background:#f1edf9;color:#5d3fa0}
.app-shell .conflict-status-superseded,.app-shell .conflict-status-cancelled{border-color:var(--border);background:var(--subtle);color:var(--muted)}
.app-shell .conflict-detail-panel,.app-shell .conflict-candidate{border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.app-shell .conflict-detail-panel{overflow:hidden}
.app-shell .conflict-detail-state{padding:1rem}
.app-shell .conflict-detail-header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:1rem;border-bottom:1px solid var(--border);background:var(--surface)}
.app-shell .conflict-detail-header h3{margin:.15rem 0;font-size:1.05rem}
.app-shell .conflict-workflow{display:grid;grid-auto-flow:column;justify-content:start;gap:.5rem;margin:0;padding:.8rem 1rem;list-style:none;border-bottom:1px solid var(--border);background:var(--subtle)}
.app-shell .conflict-workflow li{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.74rem}
.app-shell .conflict-workflow span{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--border);border-radius:50%;background:var(--surface);font-size:.68rem}
.app-shell .conflict-workflow li[data-state="current"]{color:var(--brand)}
.app-shell .conflict-workflow li[data-state="current"] span{border-color:#b9c5de;background:#eef2fa}
.app-shell .conflict-workflow li[data-state="complete"]{color:#147a50}
.app-shell .conflict-workflow li[data-state="complete"] span{border-color:#b8d8c8;background:#e9f4ee}
.app-shell .conflict-candidate-list{padding:.9rem}
.app-shell .conflict-candidate{position:relative;display:grid;grid-template-columns:4px minmax(0,1fr);overflow:hidden}
.app-shell .conflict-candidate-anchor{background:var(--border)}
.app-shell .conflict-candidate[data-severity="high"] .conflict-candidate-anchor{background:#9a2f26}
.app-shell .conflict-candidate[data-severity="medium"] .conflict-candidate-anchor{background:#b07a1c}
.app-shell .conflict-candidate[data-severity="low"] .conflict-candidate-anchor{background:#5f6b7d}
.app-shell .conflict-candidate-body{min-width:0;padding:.9rem;background:var(--surface)}
.app-shell .conflict-candidate-header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.app-shell .conflict-candidate-header h4{margin:.45rem 0 .15rem;font-size:.93rem}
.app-shell .conflict-candidate-header code{color:var(--muted);font-size:.7rem;overflow-wrap:anywhere}
.app-shell .conflict-severity-high{border-color:#e3bdbb;background:#faeceb;color:#9a2f26}
.app-shell .conflict-severity-medium{border-color:#e7d2a4;background:#faf3e4;color:#96660a}
.app-shell .conflict-severity-low{border-color:#c9d1de;background:#eef2fa;color:#46587a}
.app-shell .conflict-candidate-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:.9rem 0}
.app-shell .conflict-candidate-metrics div{min-width:0;padding:.6rem;border:1px solid var(--border);border-radius:8px;background:var(--subtle)}
.app-shell .conflict-candidate-metrics dt{color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.07em;text-transform:uppercase}
.app-shell .conflict-candidate-metrics dd{margin:.3rem 0 0;font-size:.78rem;overflow-wrap:anywhere}
.app-shell .conflict-signal-list{display:flex;flex-wrap:wrap;gap:.25rem;margin:0;padding:0;list-style:none}
.app-shell .conflict-signal-chip{padding:.15rem .4rem;border:1px solid var(--border);border-radius:99px;background:var(--surface);color:var(--muted);font-size:.68rem}
.app-shell .conflict-score-meter{position:relative;width:min(150px,100%);height:6px;margin:.2rem 0 .25rem;border-radius:99px;background:#dfe4ec;overflow:hidden}
.app-shell .conflict-score-meter span{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--brand)}
.app-shell .conflict-pending-note,.app-shell .conflict-decision-state{padding:.75rem;border:1px solid var(--border);border-radius:9px;background:var(--subtle)}
.app-shell .conflict-pending-note{display:grid;gap:.2rem}
.app-shell .conflict-decision-state-confirmed_conflict{border-color:#e3bdbb;background:#faeceb;color:#7c241d}
.app-shell .conflict-decision-state-cleared{border-color:#b8d8c8;background:#e9f4ee;color:#10603f}
.app-shell .conflict-decision-state-insufficient_information{border-color:#cdc3e6;background:#f1edf9;color:#4a337c}
.app-shell .conflict-decision-form,.app-shell .conflict-completion-form{display:grid;gap:.65rem;margin-top:.75rem;padding:1rem;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.app-shell .conflict-completion-form{background:#f8faf7}
.app-shell .conflict-completion-form[data-conflict-approval-state="blocked"]{background:var(--subtle)}
.app-shell .conflict-form-help,.app-shell .conflict-decision-lock{color:var(--muted);font-size:.72rem}
.app-shell .conflict-required{color:#9a2f26;font-size:.72rem;font-weight:750}
.app-shell .conflict-no-candidates,.app-shell .conflict-empty,.app-shell .conflict-protected-state,.app-shell .conflict-error-state{padding:1rem;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.app-shell .conflict-protected-state,.app-shell .conflict-error-state{max-width:640px}

.app-shell .administration-page{max-width:1380px}
.app-shell .admin-tabs{display:inline-grid;grid-auto-flow:column;gap:.2rem;margin:.2rem 0 1rem;padding:.22rem;border:1px solid var(--border);border-radius:99px;background:var(--surface);box-shadow:var(--shadow)}
.app-shell .admin-tabs a{display:grid;gap:.05rem;padding:.42rem .85rem;border-radius:99px;color:var(--muted);font-size:.78rem;font-weight:700;text-decoration:none}
.app-shell .admin-tabs a span{font-size:10px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;opacity:.72}
.app-shell .admin-tabs:hover{border-color:#c4cddc}
.app-shell .admin-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
.app-shell .admin-panel{border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.app-shell .admin-sessions-panel{grid-column:1 / -1}
.app-shell .admin-state{padding-top:.85rem}
.app-shell .admin-state-badge{padding:.25rem .55rem;border:1px solid var(--border);border-radius:99px;background:var(--subtle);color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.app-shell .admin-user-summary{display:flex;align-items:center;gap:.8rem;padding:.9rem;border:1px solid var(--border);border-radius:11px;background:var(--subtle)}
.app-shell .admin-user-summary strong{display:block}
.app-shell .admin-user-summary span:last-child{color:var(--muted);font-size:.76rem}
.app-shell .admin-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:.75rem}
.app-shell .admin-meta-grid div{padding:.7rem;border:1px solid var(--border);border-radius:9px;background:var(--surface)}
.app-shell .admin-meta-grid small{display:block;color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.07em;text-transform:uppercase}
.app-shell .admin-membership-summary{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-top:1rem;padding:.65rem .75rem;border:1px solid #cfd8e5;border-radius:10px;background:#eef2fa}
.app-shell .admin-membership-summary span{color:#46587a;font-size:.76rem}
.app-shell .admin-member-list{display:grid;gap:.5rem;margin:.8rem 0 0;padding:0;list-style:none}
.app-shell .admin-member-row{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.7rem .75rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);transition:border-color .16s ease,box-shadow .16s ease}
.app-shell .admin-member-row:hover{border-color:#c4cddc;box-shadow:var(--shadow)}
.app-shell .admin-member-identity{display:flex;min-width:0;align-items:center;gap:.7rem}
.app-shell .admin-member-identity>div{min-width:0}
.app-shell .admin-member-identity strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-shell .admin-member-identity span{display:block;color:var(--muted);font-size:.74rem}
.app-shell .admin-user-summary .profile-avatar,.app-shell .admin-member-identity .profile-avatar,.app-shell .admin-session-identity .profile-avatar{display:grid;flex:0 0 auto;place-items:center;width:34px;height:34px;border-radius:50%;background:#eef2fa;color:#2448a8;font-size:.72rem;font-weight:800}
.app-shell .admin-member-state{display:grid;justify-items:end;gap:.25rem}
.app-shell .admin-role-pill,.app-shell .admin-state-pill{display:inline-flex;width:max-content;align-items:center;padding:.2rem .45rem;border:1px solid var(--border);border-radius:99px;background:var(--subtle);color:var(--muted);font-size:.68rem;font-weight:750;text-transform:capitalize}
.app-shell .admin-role-pill-owner{border-color:#cdc3e6;background:#f1edf9;color:#5d3fa0}
.app-shell .admin-role-pill-admin{border-color:#c4cfe6;background:#eef2fa;color:#2448a8}
.app-shell .admin-role-pill-member{border-color:#b8d8c8;background:#e9f4ee;color:#147a50}
.app-shell .admin-role-pill-viewer{border-color:#d8dce3;background:#f0f2f5;color:#626a78}
.app-shell .admin-state-active{border-color:#b8d8c8;background:#e9f4ee;color:#147a50}
.app-shell .admin-state-invited{border-color:#e7d2a4;background:#faf3e4;color:#96660a}
.app-shell .admin-state-suspended,.app-shell .admin-state-closed{border-color:#e3bdbb;background:#faeceb;color:#9a2f26}
.app-shell .admin-current-member{padding:.1rem .35rem;border-radius:99px;background:#eef2fa;color:#2448a8;font-size:.65rem;vertical-align:middle}
.app-shell .admin-subsection{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--border)}
.app-shell .admin-form-heading strong,.app-shell .admin-subsection strong{display:block;font-size:.9rem}
.app-shell .admin-form-heading span{display:block;margin-top:.15rem;color:var(--muted);font-size:.74rem}
.app-shell .admin-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:.85rem}
.app-shell .admin-role-card{padding:.85rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.app-shell .admin-role-card:hover{border-color:#c4cddc;transform:translateY(-1px);box-shadow:var(--shadow)}
.app-shell .admin-role-card.is-current{border-color:var(--brand);box-shadow:0 0 0 1px #2448a81f}
.app-shell .admin-role-heading{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.55rem;align-items:center}
.app-shell .admin-role-heading h3{margin:0;font-size:.9rem}
.app-shell .admin-role-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#eef2fa;color:var(--brand);font-weight:800}
.app-shell .admin-role-card p{margin:.6rem 0 0;color:var(--muted);font-size:.78rem}
.app-shell .admin-role-card small{display:block;margin-top:.55rem;color:var(--muted);font-size:.68rem;line-height:1.45}
.app-shell .admin-role-count{color:var(--muted);font-size:.7rem;white-space:nowrap}
.app-shell .admin-role-current{display:block;color:var(--brand);font-size:.66rem;font-weight:750}
.app-shell .admin-session-section{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.app-shell .admin-session-section:first-child{margin-top:0;padding-top:0;border-top:0}
.app-shell .admin-session-section-heading{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:.75rem}
.app-shell .admin-session-section-heading h3{margin:0;font-size:.95rem}
.app-shell .admin-session-safety{padding:.25rem .5rem;border:1px solid #b8d8c8;border-radius:99px;background:#e9f4ee;color:#147a50;font-size:10px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.app-shell .admin-current-session-card{display:grid;gap:.7rem;padding:.8rem;border:1px solid var(--border);border-radius:11px;background:var(--surface)}
.app-shell .admin-session-revocation{padding-top:.7rem;border-top:1px solid var(--border)}
.app-shell .admin-session-inventory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:.75rem}
.app-shell .admin-session-card{padding:.85rem;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.app-shell .admin-session-card.is-current{border-color:#c4cfe6;box-shadow:0 0 0 1px #2448a81f}
.app-shell .admin-session-card-header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.app-shell .admin-session-identity{display:flex;min-width:0;align-items:center;gap:.6rem}
.app-shell .admin-session-identity strong{display:block}
.app-shell .admin-session-identity span:last-child{display:block;color:var(--muted);font-size:.73rem;text-transform:capitalize}
.app-shell .admin-session-badge{flex:0 0 auto;padding:.22rem .5rem;border:1px solid var(--border);border-radius:99px;background:var(--subtle);color:var(--muted);font-size:.66rem;font-weight:750;text-transform:capitalize}
.app-shell .admin-session-badge-active{border-color:#b8d8c8;background:#e9f4ee;color:#147a50}
.app-shell .admin-session-badge-expiring{border-color:#e7d2a4;background:#faf3e4;color:#96660a}
.app-shell .admin-session-badge-expired,.app-shell .admin-session-badge-revoked{border-color:#e3bdbb;background:#faeceb;color:#9a2f26}
.app-shell .admin-session-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:.75rem 0 0;padding:0}
.app-shell .admin-session-meta div{padding:.6rem;border:1px solid var(--border);border-radius:8px;background:var(--subtle)}
.app-shell .admin-session-meta dt{color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.07em;text-transform:uppercase}
.app-shell .admin-session-meta dd{margin:.2rem 0 0;font-size:.76rem}
.app-shell .admin-invite-form{margin-top:1rem;padding:1rem;border:1px solid var(--border);border-radius:11px;background:var(--subtle)}
.app-shell .admin-note{margin-top:.8rem;color:var(--muted);font-size:.74rem}

.app-shell .search-page{max-width:1140px}
.app-shell .search-panel{padding:1.1rem;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.app-shell .search-command{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.6rem;padding:.35rem .35rem .35rem .85rem;border:1px solid var(--border);border-radius:99px;background:var(--surface);transition:border-color .16s ease,box-shadow .16s ease}
.app-shell .search-command:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px #2448a814}
.app-shell .search-command-icon{color:var(--muted);font-size:1rem}
.app-shell .search-command input{min-width:0;border:0;background:transparent;color:var(--ink);font-size:.9rem;outline:none}
.app-shell .search-scope-note{display:flex;gap:.5rem;align-items:center;margin-top:.7rem;color:var(--muted);font-size:.74rem}
.app-shell .search-scope-note .micro-label{margin:0;white-space:nowrap}
.app-shell .search-results-state{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.app-shell .search-summary{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:.8rem}
.app-shell .search-summary strong{font-size:1rem}
.app-shell .search-summary span{color:var(--muted);font-size:.76rem}
.app-shell .search-partial-note{margin:-.25rem 0 .8rem;padding:.55rem .7rem;border:1px solid #e7d2a4;border-radius:9px;background:#faf3e4;color:#96660a;font-size:.75rem}
.app-shell .search-result-list{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.app-shell .search-result-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.7rem .8rem;border:1px solid var(--border);border-radius:11px;background:var(--surface);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.app-shell .search-result-row:hover{border-color:#c4cddc;transform:translateY(-1px);box-shadow:var(--shadow)}
.app-shell .search-result-avatar{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--subtle);color:var(--muted);font-size:.8rem}
.app-shell .search-result-main{min-width:0}
.app-shell .search-result-title-line{display:flex;align-items:center;gap:.5rem;min-width:0}
.app-shell .search-result-title-line a{overflow:hidden;color:var(--ink);font-weight:750;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.app-shell .search-result-title-line a:hover{color:var(--brand);text-decoration:underline}
.app-shell .search-result-meta{margin:.25rem 0 0;color:var(--muted);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-shell .search-type-chip{flex:0 0 auto;padding:.15rem .4rem;border:1px solid var(--border);border-radius:99px;font-size:.65rem;font-weight:750;letter-spacing:.03em;text-transform:uppercase}
.app-shell .search-type--client{border-color:#b8d8c8;background:#e9f4ee;color:#147a50}
.app-shell .search-type--matter{border-color:#c4cfe6;background:#eef2fa;color:#2448a8}
.app-shell .search-type--document{border-color:#cdc3e6;background:#f1edf9;color:#5d3fa0}
.app-shell .search-result-state{padding:.22rem .5rem;border:1px solid var(--border);border-radius:99px;background:var(--subtle);color:var(--muted);font-size:.66rem;font-weight:750;text-transform:capitalize}
.app-shell .search-result-state--active{border-color:#b8d8c8;background:#e9f4ee;color:#147a50}
.app-shell .search-result-state--ready{border-color:#c4cfe6;background:#eef2fa;color:#2448a8}
.app-shell .search-result-state--archived,.app-shell .search-result-state--quarantined{border-color:#e3bdbb;background:#faeceb;color:#9a2f26}
.app-shell .search-empty{border:0;background:transparent;box-shadow:none}

@media (max-width:1100px){
  .app-shell .conflict-review-layout{grid-template-columns:1fr}
  .app-shell .admin-grid{grid-template-columns:1fr}
  .app-shell .admin-sessions-panel{grid-column:auto}
  .app-shell .admin-session-inventory{grid-template-columns:1fr}
}
@media (max-width:700px){
  .app-shell .conflict-workflow{grid-auto-flow:row;justify-content:stretch}
  .app-shell .conflict-candidate-metrics{grid-template-columns:1fr}
  .app-shell .admin-tabs{display:grid;grid-auto-flow:row}
  .app-shell .admin-tabs a{justify-content:space-between}
  .app-shell .admin-role-grid,.app-shell .admin-meta-grid,.app-shell .admin-session-meta{grid-template-columns:1fr}
  .app-shell .admin-member-row,.app-shell .admin-session-card-header,.app-shell .admin-session-section-heading{align-items:flex-start;flex-direction:column}
  .app-shell .admin-member-state{justify-items:start}
  .app-shell .search-command{grid-template-columns:minmax(0,1fr) auto}
  .app-shell .search-command-icon{display:none}
  .app-shell .search-result-row{grid-template-columns:auto minmax(0,1fr)}
  .app-shell .search-result-state{justify-self:start;grid-column:2}
  .app-shell .search-summary{align-items:flex-start;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .app-shell .conflict-check-row,.app-shell .search-result-row,.app-shell .admin-role-card,.app-shell .admin-member-row{transform:none !important}
  .app-shell .enterprise-loading::before{animation:none !important}
}
[data-theme="dark"] .app-shell .enterprise-error-state{border-color:#5c3535;background:#2b2222;color:#f3c9c9}
[data-theme="dark"] .app-shell .conflict-detail-header{background:transparent}
[data-theme="dark"] .app-shell .conflict-status-pending,[data-theme="dark"] .app-shell .conflict-disposition-pending,[data-theme="dark"] .app-shell .conflict-severity-medium{border-color:#69551f;background:#372e17;color:#e3c473}
[data-theme="dark"] .app-shell .conflict-status-clear,[data-theme="dark"] .app-shell .conflict-disposition-cleared{border-color:#356c50;background:#182c24;color:#a9dfc0}
[data-theme="dark"] .app-shell .conflict-status-rejected,[data-theme="dark"] .app-shell .conflict-disposition-confirmed_conflict,[data-theme="dark"] .app-shell .conflict-severity-high{border-color:#703b37;background:#332220;color:#efb6b1}
[data-theme="dark"] .app-shell .conflict-status-override,[data-theme="dark"] .app-shell .conflict-disposition-insufficient_information{border-color:#55467c;background:#292340;color:#c9baf0}
[data-theme="dark"] .app-shell .conflict-workflow li[data-state="current"] span{border-color:#4b5c80;background:#283148;color:#c8d4ee}
[data-theme="dark"] .app-shell .conflict-workflow li[data-state="complete"]{color:#8ad3b2}
[data-theme="dark"] .app-shell .conflict-workflow li[data-state="complete"] span{border-color:#356c50;background:#1d2f27}
[data-theme="dark"] .app-shell .conflict-score-meter{background:#3b4658}
[data-theme="dark"] .app-shell .conflict-pending-note,[data-theme="dark"] .app-shell .conflict-decision-state,[data-theme="dark"] .app-shell .conflict-candidate-metrics div,[data-theme="dark"] .app-shell .admin-meta-grid div,[data-theme="dark"] .app-shell .admin-session-meta div,[data-theme="dark"] .app-shell .admin-user-summary .profile-avatar,[data-theme="dark"] .app-shell .admin-member-identity .profile-avatar,[data-theme="dark"] .app-shell .admin-session-identity .profile-avatar,[data-theme="dark"] .app-shell .admin-role-icon,[data-theme="dark"] .app-shell .search-result-avatar{background:var(--subtle)}
[data-theme="dark"] .app-shell .admin-membership-summary{border-color:#3b4658;background:#252d3d;color:#c4cedd}
[data-theme="dark"] .app-shell .admin-membership-summary span{color:#aeb7c6}
[data-theme="dark"] .app-shell .admin-role-pill-owner,[data-theme="dark"] .app-shell .search-type--document{border-color:#55467c;background:#292340;color:#c9baf0}
[data-theme="dark"] .app-shell .admin-role-pill-admin,[data-theme="dark"] .app-shell .search-type--matter,[data-theme="dark"] .app-shell .search-result-state--ready{border-color:#43567c;background:#242f44;color:#b5c7ef}
[data-theme="dark"] .app-shell .admin-role-pill-member,[data-theme="dark"] .app-shell .search-type--client,[data-theme="dark"] .app-shell .search-result-state--active{border-color:#356c50;background:#182c24;color:#a9dfc0}
[data-theme="dark"] .app-shell .admin-current-member{background:#242f44;color:#b5c7ef}
[data-theme="dark"] .app-shell .admin-state-active,[data-theme="dark"] .app-shell .admin-session-badge-active{border-color:#356c50;background:#182c24;color:#a9dfc0}
[data-theme="dark"] .app-shell .admin-state-invited,[data-theme="dark"] .app-shell .admin-session-badge-expiring{border-color:#69551f;background:#372e17;color:#e3c473}
[data-theme="dark"] .app-shell .admin-state-suspended,[data-theme="dark"] .app-shell .admin-state-closed,[data-theme="dark"] .app-shell .admin-session-badge-expired,[data-theme="dark"] .app-shell .admin-session-badge-revoked{border-color:#703b37;background:#332220;color:#efb6b1}
[data-theme="dark"] .app-shell .search-partial-note{border-color:#69551f;background:#372e17;color:#e3c473}
[data-theme="dark"] .app-shell .search-result-state--archived,[data-theme="dark"] .app-shell .search-result-state--quarantined{border-color:#703b37;background:#332220;color:#efb6b1}

/* === CALENDAR — enterprise board + agenda === */
.app-shell .cal-board {
    display: grid;
    grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr);
    gap: 14px;
    align-items: start;
}

.app-shell .cal-month-panel,
.app-shell .cal-agenda-panel {
    padding: 0;
    overflow: hidden;
}

/* Toolbar */
.app-shell .cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.app-shell .cal-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.app-shell .cal-month-label {
    min-width: 128px;
    text-align: center;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 750;
    letter-spacing: -.01em;
}

.app-shell .cal-toolbar-side {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.app-shell .cal-count {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

/* Month grid */
.app-shell .cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px 12px 0;
}

.app-shell .cal-weekdays span {
    padding: 4px 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: center;
}

.app-shell .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 8px 12px 14px;
}

.app-shell .cal-day {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.app-shell .cal-day:hover {
    background: var(--subtle);
}

.app-shell .cal-day-outside {
    cursor: default;
    background: transparent;
}

.app-shell .cal-day.is-today {
    border-color: color-mix(in srgb, var(--brand) 38%, transparent);
    color: var(--brand);
    font-weight: 750;
}

.app-shell .cal-day.is-selected {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 1px 3px #17203326;
}

.app-shell .cal-day.is-selected .cal-dots i {
    background: #fff;
}

.app-shell .cal-dots {
    display: inline-flex;
    gap: 3px;
}

.app-shell .cal-dots i {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--brand);
}

.app-shell .cal-hint {
    margin: 0;
    padding: 0 16px 14px;
    color: var(--muted);
    font-size: 11.5px;
}

/* Agenda */
.app-shell .cal-agenda {
    max-height: 560px;
    overflow: auto;
    padding: 12px 16px 16px;
}

.app-shell .cal-agenda-group + .cal-agenda-group {
    margin-top: 16px;
}

.app-shell .cal-date-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .02em;
    color: var(--ink);
}

.app-shell .cal-relative {
    padding: 1px 7px;
    border-radius: 999px;
    background: #eef2fa;
    color: var(--brand);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.app-shell .cal-event-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-shell .cal-event {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.app-shell .cal-event:hover {
    border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.app-shell .cal-event-time {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.app-shell .cal-all-day {
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.app-shell .cal-event-main {
    min-width: 0;
}

.app-shell .cal-event-main a {
    display: block;
    color: var(--ink);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-shell .cal-event-main a:hover {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.app-shell .cal-event-main p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-shell .cal-empty {
    padding: 2rem 1rem;
}

/* Responsive */
@media (max-width: 980px) {
    .app-shell .cal-board {
        grid-template-columns: 1fr;
    }

    .app-shell .cal-agenda {
        max-height: none;
    }
}

@media (max-width: 480px) {
    .app-shell .cal-day {
        min-height: 34px;
        font-size: 11.5px;
    }

    .app-shell .cal-event {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .app-shell .cal-event-time {
        grid-column: 1 / -1;
    }

    .app-shell .cal-toolbar {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .cal-day,
    .app-shell .cal-event {
        transition: none;
    }

    .app-shell .cal-event:hover {
        transform: none;
    }
}

/* Dark theme */
[data-theme="dark"] .app-shell .cal-month-label,
[data-theme="dark"] .app-shell .cal-date-head {
    color: #eef1f6;
}

[data-theme="dark"] .app-shell .cal-count,
[data-theme="dark"] .app-shell .cal-hint,
[data-theme="dark"] .app-shell .cal-event-time,
[data-theme="dark"] .app-shell .cal-event-main p {
    color: #9aa3b2;
}

[data-theme="dark"] .app-shell .cal-day {
    color: #eef1f6;
}

[data-theme="dark"] .app-shell .cal-day:hover {
    background: #232a3a;
}

[data-theme="dark"] .app-shell .cal-day.is-today {
    border-color: color-mix(in srgb, #7d97d8 45%, transparent);
    color: #a8bbee;
}

[data-theme="dark"] .app-shell .cal-day.is-selected {
    background: #2a4a9e;
    border-color: #2a4a9e;
    color: #eef1f6;
}

[data-theme="dark"] .app-shell .cal-dots i {
    background: #7d97d8;
}

[data-theme="dark"] .app-shell .cal-day.is-selected .cal-dots i {
    background: #dce4f8;
}

[data-theme="dark"] .app-shell .cal-event {
    background: #1c2230;
    border-color: #2c3444;
}

[data-theme="dark"] .app-shell .cal-event:hover {
    border-color: color-mix(in srgb, #7d97d8 42%, #2c3444);
}

[data-theme="dark"] .app-shell .cal-event-main a {
    color: #eef1f6;
}

[data-theme="dark"] .app-shell .cal-event-main a:hover {
    color: #a8bbee;
}

[data-theme="dark"] .app-shell .cal-date-head {
    border-bottom-color: #2c3444;
}

[data-theme="dark"] .app-shell .cal-relative {
    background: #242f44;
    color: #b5c7ef;
}

.app-shell .drafting-page .drafting-step-navigation {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0;
}

.app-shell .drafting-page .drafting-step-navigation button {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    min-height: 76px;
    padding: 14px;
    text-align: left;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
}

.app-shell .drafting-page .drafting-step-navigation button > span {
    grid-row: 1 / 3;
    color: var(--muted);
    font: 700 0.78rem/1 var(--mono, monospace);
}

.app-shell .drafting-page .drafting-step-navigation button small {
    color: var(--muted);
}

.app-shell .drafting-page .drafting-step-navigation button[data-state="current"] {
    color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.app-shell .drafting-page .drafting-step-navigation button[data-state="complete"] {
    border-color: color-mix(in srgb, var(--success, #26734d) 45%, var(--border));
}

.app-shell .drafting-page .drafting-step-navigation button[data-state="locked"],
.app-shell .drafting-page[data-drafting-mode="review"] .drafting-step-navigation button {
    cursor: not-allowed;
    opacity: 0.58;
}

.app-shell .drafting-page .drafting-launch-layout,
.app-shell .drafting-page .drafting-workflow-panel {
    display: block;
}

.app-shell .drafting-page .drafting-step-space,
.app-shell .drafting-page .drafting-start-panel {
    width: 100%;
    min-height: 52vh;
}

.app-shell .drafting-page .drafting-step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
}

.app-shell .drafting-page .drafting-mapping-account-value {
    display: grid;
    align-content: center;
    gap: 4px;
    min-height: 72px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--brand) 6%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
    border-radius: 10px;
}

.app-shell .drafting-page .drafting-mapping-account-value span,
.app-shell .drafting-page .drafting-mapping-account-value small {
    color: var(--muted);
}

.app-shell .drafting-page .drafting-account-field {
    border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
}

.app-shell .drafting-page .drafting-client-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--warning, #9a6700) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--warning, #9a6700) 35%, var(--border));
    border-radius: 10px;
}

.app-shell .drafting-page .drafting-client-link[hidden] {
    display: none;
}

.app-shell .drafting-page .drafting-client-link p {
    margin: 0;
}

.app-shell .drafting-page .drafting-create-intake {
    justify-self: start;
}

.app-shell .drafting-page .drafting-result-heading-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-shell .drafting-page .drafting-information-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.app-shell .drafting-page .drafting-information-row > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.app-shell .drafting-page .drafting-information-row small {
    color: var(--muted);
}

.app-shell .drafting-page .drafting-information-row[data-information-state="known"] {
    border-left: 4px solid var(--success);
}

.app-shell .drafting-page .drafting-information-row[data-information-state="question"] {
    border-left: 4px solid var(--warning);
}

.app-shell .drafting-page .drafting-information-state {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--subtle);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 750;
}

.app-shell .drafting-page .drafting-information-row[data-information-state="missing"] {
    border-left: 4px solid var(--warning);
}

.app-shell .drafting-page .drafting-information-row[data-information-state="answered"] {
    border-left: 4px solid var(--brand);
}

.app-shell .drafting-page .drafting-information-row[data-information-state="answered"] .drafting-information-state {
    background: color-mix(in srgb, var(--brand) 12%, var(--surface));
    color: var(--brand);
}

.app-shell .drafting-page .drafting-information-row[data-information-state="missing"] .drafting-information-state {
    background: color-mix(in srgb, var(--warning) 14%, var(--surface));
    color: var(--warning);
}

/* The value typed on a placeholder card: one document's answer, entered in place. */
.app-shell .drafting-page .drafting-mapping-manual-value {
    grid-column: 2 / -1;
    display: grid;
    gap: 5px;
    margin-top: 3px;
}

.app-shell .drafting-page .drafting-mapping-manual-value[hidden] {
    display: none;
}

.app-shell .drafting-page .drafting-mapping-manual-value > span {
    color: var(--draft-muted, var(--muted));
    font-size: .66rem;
    font-weight: 720;
}

.app-shell .drafting-page .drafting-mapping-manual-value textarea {
    width: 100%;
    min-height: 2.5rem;
    max-height: 14rem;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    line-height: 1.45;
    resize: vertical;
    field-sizing: content;
}

.app-shell .drafting-page .drafting-mapping-manual-value textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.app-shell .drafting-page .drafting-information-row.is-invalid .drafting-mapping-manual-value textarea,
.app-shell .drafting-page .drafting-mapping-manual-value textarea[aria-invalid="true"] {
    border-color: var(--danger);
}

.app-shell .drafting-page .drafting-mapping-summary [data-drafting-mapping-next-missing] {
    justify-self: start;
}

.app-shell .drafting-page .drafting-mapping-summary [data-drafting-mapping-next-missing][hidden] {
    display: none;
}

.app-shell .drafting-page [data-drafting-session-status][data-state="saving"],
.app-shell .drafting-page [data-drafting-session-status][data-state="dirty"] {
    color: var(--warning);
}

.app-shell .drafting-page [data-drafting-session-status][data-state="saved"] {
    color: var(--success);
}

.app-shell .drafting-page [data-drafting-session-status][data-state="error"],
.app-shell .drafting-page [data-drafting-session-status][data-state="conflict"] {
    color: var(--danger);
}

/* The preview column holds a RENDERED PAGE now, not a column of monospace
   text, and a page has a width it needs: at 536px the PDF viewer zoomed itself
   to 63% — legible, but not what someone approves a land-transfer form from.
   The split moves to the document's side and the two-column layout waits for a
   viewport that can actually afford both, rather than squeezing the page to
   keep the answers beside it. Below that, they stack and the page is full
   width. The sticky second column is kept: the whole point of rendering here
   is that the document stays in view while the answers are typed. */
@media (min-width: 1180px) {
    .app-shell .drafting-page .drafting-composer-form {
        display: grid;
        grid-template-columns: minmax(16rem, .52fr) minmax(40rem, 1.48fr);
        gap: 14px 22px;
        align-items: start;
        /* `.client-form` caps forms at 56rem for field rhythm, and the composer
           carries that class. It is not a column of fields any more: half of it
           is a rendered page, and the cap was leaving 226px of the panel unused
           while the PDF viewer zoomed the page down to fit what was left. */
        max-width: none;
    }

    .app-shell .drafting-page .drafting-composer-form > .form-row,
    .app-shell .drafting-page .drafting-composer-form > .drafting-matter-context,
    .app-shell .drafting-page .drafting-composer-form > .drafting-fields {
        grid-column: 1;
    }

    .app-shell .drafting-page .drafting-composer-form > .drafting-preview-panel {
        position: sticky;
        top: 18px;
        grid-column: 2;
        grid-row: 1 / span 3;
        min-height: 36rem;
    }

    .app-shell .drafting-page .drafting-preview-output {
        min-height: 26rem;
        max-height: 54vh;
        background: #fffefa;
        box-shadow: 0 12px 36px #17203312;
    }

    .app-shell .drafting-page .drafting-composer-form > .drafting-step-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .app-shell .drafting-page .drafting-step-navigation {
        grid-template-columns: 1fr 1fr;
    }

    .app-shell .drafting-page .drafting-step-actions,
    .app-shell .drafting-page .drafting-result-heading-actions,
    .app-shell .drafting-page .drafting-client-link {
        align-items: stretch;
        flex-direction: column;
    }

    .app-shell .drafting-page .drafting-information-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .app-shell .drafting-page .drafting-information-state {
        grid-column: 2;
        justify-self: start;
    }
}

/* 2026 enterprise interface system */
:root {
    color-scheme: light;
    --canvas: #f3f6fb;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-translucent: #ffffffd9;
    --subtle: #edf2f9;
    --surface-hover: #e7edf7;
    --ink: #111827;
    --muted: #667085;
    --muted-strong: #475467;
    --border: #d8e0ec;
    --border-strong: #b9c6d8;
    --brand: #6558e8;
    --brand-hover: #5548d5;
    --brand-soft: #eeecff;
    --automation: #0891b2;
    --automation-soft: #e3f8fc;
    --success: #16805c;
    --success-soft: #e7f8f1;
    --warning: #a15c00;
    --warning-soft: #fff5df;
    --danger: #c9374c;
    --danger-soft: #fff0f2;
    --purple: #7c3aed;
    --ring: #7569f5;
    --shadow-xs: 0 1px 2px #1018280a;
    --shadow-sm: 0 1px 3px #10182812, 0 1px 2px #10182808;
    --shadow-md: 0 12px 30px -12px #1018282e, 0 3px 8px #1018280a;
    --shadow-lg: 0 28px 70px -24px #10182859, 0 8px 22px #10182814;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
}

[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #070a14;
    --surface: #0d1220;
    --surface-elevated: #12192a;
    --surface-translucent: #0d1220dc;
    --subtle: #151d30;
    --surface-hover: #1b2540;
    --ink: #edf1ff;
    --muted: #98a4c2;
    --muted-strong: #c0c9de;
    --border: #222d49;
    --border-strong: #34415f;
    --brand: #8b7cff;
    --brand-hover: #a498ff;
    --brand-soft: #211d48;
    --automation: #4bd7ed;
    --automation-soft: #102f3a;
    --success: #42d39d;
    --success-soft: #102f29;
    --warning: #f4bd54;
    --warning-soft: #352917;
    --danger: #ff7c8e;
    --danger-soft: #381b25;
    --purple: #b09aff;
    --ring: #9a8dff;
    --shadow-xs: 0 1px 2px #0005;
    --shadow-sm: 0 2px 8px #0005;
    --shadow-md: 0 18px 44px -18px #000c, 0 0 0 1px #8b7cff0a;
    --shadow-lg: 0 34px 90px -28px #000f, 0 0 36px -18px #8b7cff55;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --canvas: #070a14;
        --surface: #0d1220;
        --surface-elevated: #12192a;
        --surface-translucent: #0d1220dc;
        --subtle: #151d30;
        --surface-hover: #1b2540;
        --ink: #edf1ff;
        --muted: #98a4c2;
        --muted-strong: #c0c9de;
        --border: #222d49;
        --border-strong: #34415f;
        --brand: #8b7cff;
        --brand-hover: #a498ff;
        --brand-soft: #211d48;
        --automation: #4bd7ed;
        --automation-soft: #102f3a;
        --success: #42d39d;
        --success-soft: #102f29;
        --warning: #f4bd54;
        --warning-soft: #352917;
        --danger: #ff7c8e;
        --danger-soft: #381b25;
        --purple: #b09aff;
        --ring: #9a8dff;
        --shadow-xs: 0 1px 2px #0005;
        --shadow-sm: 0 2px 8px #0005;
        --shadow-md: 0 18px 44px -18px #000c, 0 0 0 1px #8b7cff0a;
        --shadow-lg: 0 34px 90px -28px #000f, 0 0 36px -18px #8b7cff55;
    }
}

html {
    background: var(--canvas);
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    min-height: 100vh;
    background:
        radial-gradient(circle at 78% -10%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 34rem),
        radial-gradient(circle at 10% 100%, color-mix(in srgb, var(--automation) 8%, transparent), transparent 30rem),
        var(--canvas);
    color: var(--ink);
    font-family: Inter, "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: color-mix(in srgb, var(--brand) 30%, transparent);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: var(--border-strong);
    background-clip: padding-box;
}

.ui-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
}

.brand {
    gap: 11px;
    padding: 0;
}

.brand-mark {
    position: relative;
    isolation: isolate;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand) 65%, white);
    border-radius: 11px;
    background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 58%, var(--automation)));
    box-shadow: 0 8px 20px -10px var(--brand);
}

.brand-mark::after {
    content: "";
    position: absolute;
    inset: -50% 35% 50% -35%;
    z-index: -1;
    background: linear-gradient(120deg, transparent, #fff7, transparent);
    transform: rotate(25deg);
}

.brand-mark-core {
    font-weight: 850;
    letter-spacing: -.08em;
}

.brand-copy {
    display: grid;
    gap: 0;
    line-height: 1.1;
}

.brand-name {
    color: var(--ink);
    font-size: 18px;
    font-weight: 760;
    letter-spacing: -.04em;
}

.brand-copy small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

button,
a,
input,
select,
textarea {
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease, transform .16s ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 24%, transparent);
}

:where(input, select, textarea) {
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-xs);
}

:where(input, select, textarea):hover:not(:disabled) {
    border-color: var(--border-strong);
}

:where(input, select, textarea):focus {
    border-color: var(--ring);
}

:where(input, textarea)::placeholder {
    color: color-mix(in srgb, var(--muted) 78%, transparent);
}

.primary-button,
.secondary-button,
.quiet-button,
.create-button,
.icon-button,
.notification-button,
.more-button,
.update-button,
.add-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    border-radius: var(--radius-sm);
    font-weight: 680;
    line-height: 1;
    cursor: pointer;
}

.primary-button,
.create-button,
.update-button {
    border: 1px solid color-mix(in srgb, var(--brand) 78%, black);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 91%, white), var(--brand));
    color: #fff;
    box-shadow: 0 1px 2px #10182818, 0 7px 16px -9px var(--brand);
}

.primary-button:hover:not(:disabled),
.create-button:hover:not(:disabled),
.update-button:hover:not(:disabled) {
    border-color: var(--brand-hover);
    background: var(--brand-hover);
    box-shadow: 0 9px 20px -11px var(--brand);
    transform: translateY(-1px);
}

.secondary-button,
.quiet-button,
.icon-button,
.notification-button,
.more-button,
.add-link {
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    color: var(--muted-strong);
    box-shadow: var(--shadow-xs);
}

.secondary-button:hover:not(:disabled),
.quiet-button:hover:not(:disabled),
.icon-button:hover:not(:disabled),
.notification-button:hover:not(:disabled),
.more-button:hover:not(:disabled),
.add-link:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    color: var(--ink);
    transform: translateY(-1px);
}

.icon-button,
.notification-button,
.more-button {
    width: 40px;
    padding: 0;
}

.app-shell {
    min-height: 100svh;
    background: transparent;
}

.sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 268px;
    height: 100svh;
    padding: 18px 14px 14px;
    border-right: 1px solid var(--border);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, var(--brand)) 0%, var(--surface) 58%),
        var(--surface);
    box-shadow: 6px 0 24px -24px #10182866;
}

.sidebar-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 18px;
}

.sidebar-close {
    display: none;
}

.tenant-switcher {
    width: 100%;
    margin: 0 0 18px;
    padding: 10px;
    border-color: var(--border);
    border-radius: var(--radius-md);
    background: var(--subtle);
    box-shadow: inset 0 1px #ffffff12;
}

.tenant-switcher:hover,
.tenant-switcher:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 50%, var(--border));
    background: var(--surface-hover);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.tenant-avatar,
.profile-avatar {
    background: linear-gradient(145deg, var(--brand-soft), color-mix(in srgb, var(--automation-soft) 70%, var(--surface)));
    color: var(--brand);
    font-weight: 800;
}

.chevron .ui-icon,
.caret .ui-icon {
    width: 14px;
    height: 14px;
}

.nav-list {
    display: grid;
    gap: 10px;
    align-content: start;
    overflow-y: auto;
    padding: 0 3px 10px;
    scrollbar-width: thin;
}

.nav-group {
    display: grid;
    gap: 3px;
}

.nav-group-label {
    margin: 0;
    padding: 0 9px 5px;
    color: color-mix(in srgb, var(--muted) 78%, transparent);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.nav-item {
    position: relative;
    min-height: 36px;
    gap: 11px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 570;
}

.nav-item:hover,
.nav-item:focus-visible {
    border-color: color-mix(in srgb, var(--border) 80%, transparent);
    background: color-mix(in srgb, var(--surface-hover) 70%, transparent);
    color: var(--ink);
}

.nav-item.active {
    border-color: color-mix(in srgb, var(--brand) 18%, var(--border));
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 14%, transparent), color-mix(in srgb, var(--brand) 5%, transparent));
    color: var(--ink);
    box-shadow: inset 3px 0 var(--brand);
}

.nav-item.active .nav-icon {
    color: var(--brand);
}

.nav-icon {
    display: grid;
    width: 20px;
    place-items: center;
    color: var(--muted);
}

.nav-count {
    margin-left: auto;
    border: 0;
    background: var(--brand-soft);
    color: var(--brand);
}

.sidebar-bottom {
    padding-top: 12px;
    background: linear-gradient(180deg, transparent, var(--surface) 20%);
}

.security-note {
    border: 1px solid color-mix(in srgb, var(--success) 20%, var(--border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--success-soft) 72%, var(--surface));
    color: var(--muted-strong);
}

.security-signal {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent);
}

.main {
    min-width: 0;
    background: transparent;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 35;
    min-height: 68px;
    gap: 14px;
    padding: 10px clamp(16px, 2.4vw, 32px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    background: var(--surface-translucent);
    box-shadow: 0 8px 22px -25px #10182899;
    backdrop-filter: blur(18px) saturate(145%);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: fit-content;
    color: var(--muted);
    font-size: 12px;
}

.breadcrumb .ui-icon {
    width: 13px;
    height: 13px;
    opacity: .6;
}

.breadcrumb strong {
    color: var(--ink);
    font-weight: 650;
}

.command-trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(390px, 32vw);
    min-height: 40px;
    margin: 0 auto;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--subtle) 72%, transparent);
    color: var(--muted);
    text-align: left;
    cursor: pointer;
}

.command-trigger:hover {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.command-trigger span {
    overflow: hidden;
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-trigger kbd,
.footer kbd {
    border: 1px solid var(--border);
    border-bottom-color: var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--muted);
    box-shadow: 0 1px 0 var(--border);
    font: 600 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.top-actions {
    gap: 7px;
}

.create-button {
    min-height: 40px;
    padding: 0 14px;
}

.create-button .ui-icon {
    width: 15px;
    height: 15px;
}

.theme-toggle .theme-icon {
    display: grid;
    place-items: center;
}

.theme-icon-moon {
    display: none !important;
}

[data-theme="dark"] .theme-icon-sun {
    display: none !important;
}

[data-theme="dark"] .theme-icon-moon {
    display: grid !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-icon-sun {
        display: none !important;
    }

    :root:not([data-theme="light"]) .theme-icon-moon {
        display: grid !important;
    }
}

.notification-button {
    position: relative;
}

.notification-button b {
    top: 3px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    border: 2px solid var(--surface);
    background: var(--danger);
    color: #fff;
    font-size: 9px;
}

.profile {
    min-height: 42px;
    padding: 4px 7px 4px 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-elevated);
}

.profile:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.profile .ui-icon {
    width: 14px;
    height: 14px;
    color: var(--muted);
}

.content {
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: clamp(24px, 3vw, 42px);
    animation: content-enter .32s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes content-enter {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-heading {
    margin-bottom: 24px;
    padding-bottom: 21px;
    border-bottom: 1px solid var(--border);
}

.eyebrow {
    color: var(--brand);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

.page-heading h1 {
    margin: 5px 0 4px;
    color: var(--ink);
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 720;
    letter-spacing: -.045em;
    line-height: 1.08;
}

.page-heading .muted {
    max-width: 68ch;
    margin: 7px 0 0;
    font-size: 14px;
}

.metric-grid {
    gap: 14px;
}

.metric-card,
.panel,
.workspace-spotlight,
.workspace-record,
.pricing-card,
.feature-card,
.settings-modal,
.auth-card {
    border-color: var(--border);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-sm);
}

.metric-card {
    position: relative;
    overflow: hidden;
    min-height: 154px;
    padding: 19px;
    border-radius: var(--radius-md);
}

.metric-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 52px;
    height: 2px;
    background: var(--brand);
    opacity: .75;
}

.metric-card:hover {
    border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.metric-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.metric-icon.blue {
    background: var(--automation-soft);
    color: var(--automation);
}

.metric-icon.purple {
    background: var(--brand-soft);
    color: var(--brand);
}

.metric-icon.amber {
    background: var(--warning-soft);
    color: var(--warning);
}

.metric-icon.green {
    background: var(--success-soft);
    color: var(--success);
}

.metric-value {
    color: var(--ink);
    font-size: 34px;
    font-weight: 680;
    font-variant-numeric: tabular-nums;
}

.dashboard-grid,
.lower-grid {
    gap: 14px;
    margin-top: 14px;
}

.panel {
    border-radius: var(--radius-md);
}

.panel:hover {
    border-color: color-mix(in srgb, var(--brand) 14%, var(--border));
}

.panel-header {
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.panel h2,
.spotlight-copy h2 {
    color: var(--ink);
    font-weight: 680;
    letter-spacing: -.025em;
}

.agenda-item,
.work-item,
.activity-item,
.recent-record {
    min-height: 63px;
}

.agenda-item:hover,
.work-item:hover,
.activity-item:hover,
.recent-record:hover,
.workspace-record:hover {
    background: color-mix(in srgb, var(--surface-hover) 54%, transparent);
}

.status-pill,
.agenda-tag,
.priority,
.provenance,
.work-state-pill,
.matter-status-pill {
    border-radius: 999px;
    font-weight: 720;
    letter-spacing: .015em;
}

.risk-banner {
    border-color: color-mix(in srgb, var(--warning) 25%, var(--border));
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--warning-soft) 78%, var(--surface));
    box-shadow: var(--shadow-xs);
}

.risk-icon {
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
    background: color-mix(in srgb, var(--warning) 13%, transparent);
    color: var(--warning);
}

.workspace-spotlight {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 22rem),
        var(--surface-elevated);
}

.workspace-records {
    gap: 9px;
}

.workspace-record {
    border-radius: 11px;
}

.record-icon {
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    background: var(--brand-soft);
    color: var(--brand);
}

.table-wrap,
.comparison-table {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

table {
    background: var(--surface);
}

th {
    background: var(--subtle);
    color: var(--muted);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: .09em;
}

tbody tr {
    transition: background-color .14s ease;
}

tbody tr:hover {
    background: color-mix(in srgb, var(--surface-hover) 58%, transparent);
}

.modal-backdrop {
    z-index: 100;
    overflow-y: auto;
    padding: clamp(14px, 3vw, 36px);
    background: color-mix(in srgb, #060914 66%, transparent);
    backdrop-filter: blur(8px);
    animation: backdrop-enter .18s ease-out both;
}

.settings-modal,
.workspace-dialog,
.work-dialog,
.party-dialog,
.drafting-dialog {
    width: min(100%, 760px);
    max-width: calc(100vw - 28px);
    max-height: min(90svh, 900px);
    overflow: auto;
    margin: auto;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-lg);
    animation: modal-enter .24s cubic-bezier(.2, .8, .2, 1) both;
    overscroll-behavior: contain;
}

.settings-modal {
    width: min(100%, 520px);
}

.modal-header {
    position: sticky;
    top: calc(clamp(20px, 3vw, 30px) * -1);
    z-index: 3;
    gap: 16px;
    margin: calc(clamp(20px, 3vw, 30px) * -1) calc(clamp(20px, 3vw, 30px) * -1) 22px;
    padding: clamp(20px, 3vw, 30px);
    border-bottom: 1px solid var(--border);
    background: var(--surface-translucent);
    backdrop-filter: blur(16px);
}

.modal-header h2 {
    margin: 4px 0 0;
    font-size: clamp(20px, 3vw, 27px);
    letter-spacing: -.035em;
}

.modal-actions {
    position: sticky;
    bottom: calc(clamp(20px, 3vw, 30px) * -1);
    z-index: 2;
    margin: 24px calc(clamp(20px, 3vw, 30px) * -1) calc(clamp(20px, 3vw, 30px) * -1);
    padding: 16px clamp(20px, 3vw, 30px);
    border-top: 1px solid var(--border);
    background: var(--surface-translucent);
    backdrop-filter: blur(16px);
}

@keyframes backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-enter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.auth-shell {
    min-height: 100svh;
    background:
        radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 32rem),
        radial-gradient(circle at 92% 90%, color-mix(in srgb, var(--automation) 12%, transparent), transparent 30rem),
        var(--canvas);
}

.auth-card {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.auth-showcase {
    background:
        linear-gradient(#070a14d9, #070a14f2),
        linear-gradient(120deg, #121735, #071927);
}

.auth-showcase::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(#8b7cff0d 1px, transparent 1px),
        linear-gradient(90deg, #8b7cff0d 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at center, black, transparent 78%);
}

.auth-showcase-inner {
    position: relative;
    z-index: 1;
}

.auth-showcase-title em {
    background: linear-gradient(90deg, #a89dff, #5ee5f4);
    background-clip: text;
    color: transparent;
}

.landing-header {
    border-bottom-color: color-mix(in srgb, var(--border) 75%, transparent);
    background: var(--surface-translucent);
    backdrop-filter: blur(18px) saturate(140%);
}

.landing-hero h1,
.section-intro h2,
.security-band h2,
.responsible-ai-band h2,
.final-cta h2 {
    color: var(--ink);
    letter-spacing: -.055em;
}

.feature-card,
.pricing-card,
.principles > div,
.comparison-cards article {
    border-radius: var(--radius-lg);
}

.feature-card:hover,
.pricing-card:hover {
    border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.pricing-card.is-featured {
    border-color: color-mix(in srgb, var(--brand) 65%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent), var(--shadow-md);
}

.footer {
    color: var(--muted);
}

.sidebar-scrim {
    display: none;
}

@media (max-width: 1180px) {
    .command-trigger {
        width: min(290px, 27vw);
    }

    .command-trigger kbd {
        display: none;
    }

    .profile-name,
    .help-button {
        display: none;
    }
}

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: min(310px, calc(100vw - 38px));
        transform: translateX(-105%);
        transition: transform .24s cubic-bezier(.2, .8, .2, 1);
    }

    .sidebar-close {
        display: inline-flex;
    }

    .sidebar-scrim {
        position: fixed;
        inset: 0;
        z-index: 39;
        display: block;
        background: #05081499;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        backdrop-filter: blur(4px);
    }

    .app-shell.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .app-shell.sidebar-open .sidebar-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-menu {
        display: inline-flex;
    }

    .command-trigger {
        width: auto;
        margin-left: auto;
    }

    .command-trigger span {
        display: none;
    }

    .breadcrumb {
        flex: 1;
    }
}

@media (max-width: 700px) {
    .topbar {
        min-height: 60px;
        padding: 9px 12px;
    }

    .breadcrumb > span,
    .create-button .caret,
    .profile .ui-icon {
        display: none;
    }

    .top-actions {
        gap: 5px;
    }

    .create-button {
        width: 40px;
        padding: 0;
        font-size: 0;
    }

    .create-button > span:first-child {
        display: grid;
    }

    .content {
        padding: 22px 15px 36px;
    }

    .page-heading {
        gap: 16px;
    }

    .page-actions,
    .record-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .page-actions > *,
    .record-actions > * {
        flex: 1 1 auto;
    }

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

    .dashboard-grid,
    .lower-grid {
        grid-template-columns: 1fr;
    }

    .risk-banner {
        grid-template-columns: auto 1fr auto;
    }

    .risk-banner a {
        grid-column: 2 / -1;
    }

    .modal-backdrop {
        align-items: end;
        padding: 0;
    }

    .settings-modal,
    .workspace-dialog,
    .work-dialog,
    .party-dialog,
    .drafting-dialog {
        width: 100%;
        max-width: none;
        max-height: 94svh;
        margin: auto 0 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 22px 22px 0 0;
        padding: 22px 18px calc(20px + env(safe-area-inset-bottom));
    }

    .modal-header {
        top: -22px;
        margin: -22px -18px 20px;
        padding: 20px 18px 17px;
    }

    .modal-actions {
        bottom: calc((20px + env(safe-area-inset-bottom)) * -1);
        margin: 22px -18px calc((20px + env(safe-area-inset-bottom)) * -1);
        padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    }

    .form-row,
    .form-row:has(label:nth-child(3)) {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .breadcrumb {
        display: none;
    }

    .command-trigger {
        margin-left: 0;
    }

    .top-actions {
        margin-left: auto;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .metric-card {
        min-height: 136px;
    }

    .theme-toggle {
        display: none;
    }

    .profile {
        border: 0;
        background: transparent;
    }
}

@media (hover: none) {
    .metric-card:hover,
    .feature-card:hover,
    .pricing-card:hover,
    .primary-button:hover,
    .secondary-button:hover,
    .quiet-button:hover,
    .icon-button:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    .brand-mark,
    .primary-button,
    .create-button,
    .security-signal {
        forced-color-adjust: none;
    }
}

/* Cascade closure: outrank legacy `.app-shell .x` rules. */
.app-shell {
    background: transparent;
}

[data-theme="dark"] .app-shell,
html:not([data-theme="light"]) .app-shell {
    background: transparent;
}

.app-shell .mobile-menu,
.app-shell .sidebar-close {
    display: none;
}

.app-shell .primary-button,
.app-shell .create-button,
.app-shell .update-button {
    border: 1px solid color-mix(in srgb, var(--brand) 78%, black);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 91%, white), var(--brand));
    color: #fff;
    box-shadow: 0 1px 2px #10182818, 0 7px 16px -9px var(--brand);
}

[data-theme="dark"] .app-shell .primary-button,
[data-theme="dark"] .app-shell .create-button,
html:not([data-theme="light"]) .app-shell .primary-button,
html:not([data-theme="light"]) .app-shell .create-button {
    border-color: color-mix(in srgb, var(--brand) 76%, black);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 91%, white), var(--brand));
    color: #fff;
}

.auth-shell .auth-form input,
.modal-backdrop input,
.modal-backdrop select,
.modal-backdrop textarea {
    border-color: var(--border);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-xs);
}

.auth-shell .auth-form input:focus,
.modal-backdrop input:focus,
.modal-backdrop select:focus,
.modal-backdrop textarea:focus {
    border-color: var(--ring);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 24%, transparent);
}

@media (max-width: 1180px) {
    .app-shell .help-button {
        display: none;
    }
}

@media (max-width: 900px) {
    .app-shell .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 40;
        display: flex;
        width: min(310px, calc(100vw - 38px));
        height: 100svh;
        transform: translateX(-105%);
    }

    .app-shell.sidebar-open .sidebar {
        display: flex;
        transform: translateX(0);
    }

    .app-shell .mobile-menu,
    .app-shell .sidebar-close {
        display: inline-flex;
    }

    .app-shell .nav-item {
        min-height: 44px;
    }
}

@media (max-width: 700px) {
    .modal-backdrop .settings-modal,
    .modal-backdrop .workspace-dialog,
    .modal-backdrop .work-dialog,
    .modal-backdrop .party-dialog,
    .modal-backdrop .drafting-dialog {
        width: 100%;
        max-width: none;
        max-height: 94svh;
        margin: auto 0 0;
        padding: 22px 18px calc(20px + env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 22px 22px 0 0;
    }

    .modal-backdrop .modal-actions {
        bottom: calc((20px + env(safe-area-inset-bottom)) * -1);
        margin: 22px -18px calc((20px + env(safe-area-inset-bottom)) * -1);
        padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 480px) {
    .app-shell .theme-toggle {
        display: inline-flex;
    }
}

@media (forced-colors: active) {
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }
}

.quick-create-menu {
    position: fixed;
    z-index: 90;
    display: grid;
    gap: 2px;
    width: min(300px, calc(100vw - 24px));
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--surface);
    box-shadow: 0 12px 32px -12px #10182859, 0 2px 8px #10182814;
}

.quick-create-item {
    display: grid;
    gap: 2px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 8px);
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.quick-create-item strong {
    font-size: 13px;
    font-weight: 600;
}

.quick-create-item small {
    color: var(--muted);
    font-size: 11.5px;
}

.quick-create-item:hover,
.quick-create-item:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 22%, var(--border));
    background: color-mix(in srgb, var(--brand) 7%, transparent);
    outline: none;
}

/* Author display rules were overriding the hidden attribute, leaking error-only
   controls into ready states. Keep the attribute authoritative app-wide. */
[hidden] {
    display: none !important;
}

.drafting-start-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 14px;
}

.approval-views {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 6px;
}

.approval-views .is-active {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    color: var(--ink);
}

.approval-list {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.approval-card {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.approval-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.approval-card-top code {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.approval-status {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.approval-status[data-state="pending"] { background: var(--brand-soft, #eef2ff); color: var(--brand); }
.approval-status[data-state="overdue"] { background: #fdecec; color: var(--danger); }
.approval-status[data-state="approved"] { background: #e8f6ef; color: var(--success); }
.approval-status[data-state="rejected"] { background: #fdecec; color: var(--danger); }
.approval-status[data-state="cancelled"],
.approval-status[data-state="expired"],
.approval-status[data-state="reassigned"] { background: var(--subtle); color: var(--muted); }

.approval-decision-form {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.approval-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.record-select {
    display: grid;
    place-items: center;
    padding-right: 4px;
}

.send-approval-modal {
    width: min(100%, 620px);
}

.approval-doc-section {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    background: var(--subtle);
}

.approval-doc-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.approval-doc-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface);
    font-size: 13px;
}

.approval-approvers {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
}

.approval-approvers legend {
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.drafting-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table caption {
    text-align: left;
}

.data-table th,
.data-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table thead th {
    background: var(--subtle);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr:hover {
    background: color-mix(in srgb, var(--brand) 4%, transparent);
}

.drafting-queue-panel {
    margin-bottom: 18px;
}

/* Fourteen navigation entries must all be reachable at a 900px viewport
   without the list silently clipping its tail. */
.app-shell .sidebar .nav-list {
    gap: 8px;
    min-height: 0;
}

.app-shell .sidebar .nav-item {
    min-height: 33px;
    padding: 6px 10px;
}

.app-shell .sidebar .nav-group-label {
    padding-bottom: 3px;
}

.app-shell .sidebar .sidebar-bottom {
    flex: none;
}

.drafting-step-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 14px 0 4px;
}

.drafting-step-crumb {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
}

.toast-host {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 120;
    display: grid;
    gap: 8px;
    width: min(360px, calc(100vw - 36px));
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface);
    box-shadow: 0 12px 30px -14px #10182877;
    font-size: 13px;
}

.toast-dot {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--brand);
    flex: none;
}

.toast[data-tone="success"] .toast-dot { background: var(--success); }
.toast[data-tone="error"] .toast-dot { background: var(--danger); }
.toast[data-tone="warning"] .toast-dot { background: var(--warning); }

.toast-text { flex: 1; }

.toast-close {
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.notification-panel {
    position: fixed;
    z-index: 95;
    width: min(380px, calc(100vw - 24px));
    max-height: min(70vh, 560px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--surface);
    box-shadow: 0 16px 40px -16px #10182866;
    overflow: hidden;
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.notification-panel-body {
    overflow-y: auto;
    padding: 8px;
}

.notification-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notification-item {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border-radius: var(--radius-sm, 8px);
    border-left: 3px solid var(--border);
    font-size: 13px;
}

.notification-item[data-tone="success"] { border-left-color: var(--success); }
.notification-item[data-tone="warning"] { border-left-color: var(--warning); }
.notification-item[data-tone="error"] { border-left-color: var(--danger); }
.notification-item[data-tone="info"] { border-left-color: var(--brand); }

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

.notification-meta {
    color: var(--muted);
    font-size: 11.5px;
}

.notification-panel-footer {
    display: flex;
    gap: 14px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
}

/* Desktop sidebar collapse. Labels are hidden but every control keeps an
   accessible name, so the navigation stays usable when collapsed. */
.sidebar-collapse {
    transform: rotate(90deg);
    transition: transform .18s ease;
}

.app-shell.sidebar-collapsed .sidebar-collapse {
    transform: rotate(-90deg);
}

@media (min-width: 861px) {
    .app-shell.sidebar-collapsed .sidebar {
        width: 74px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .app-shell.sidebar-collapsed .nav-item span:not(.nav-icon):not(.nav-count),
    .app-shell.sidebar-collapsed .nav-group-label,
    .app-shell.sidebar-collapsed .brand-text,
    .app-shell.sidebar-collapsed .security-note span,
    .app-shell.sidebar-collapsed .tenant-switcher-text,
    .app-shell.sidebar-collapsed .sidebar-bottom .nav-item span:not(.nav-icon) {
        display: none;
    }

    .app-shell.sidebar-collapsed .nav-item {
        justify-content: center;
        padding-left: 6px;
        padding-right: 6px;
    }

    .app-shell.sidebar-collapsed .security-note {
        display: none;
    }
}

@media (max-width: 860px) {
    .sidebar-collapse { display: none; }
}

.settings-usage {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    background: var(--subtle);
}

.settings-usage h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 0;
}

.usage-grid > div {
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface);
}

.usage-grid dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.usage-grid dd {
    margin: 3px 0 0;
    font-size: 15px;
    font-weight: 650;
}

.usage-note {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
}

.usage-seats-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 12.5px;
}

.usage-bar {
    height: 7px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.usage-bar span {
    display: block;
    height: 100%;
    background: var(--brand);
}

.profile-menu {
    position: fixed;
    z-index: 95;
    width: min(330px, calc(100vw - 24px));
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--surface);
    box-shadow: 0 16px 40px -16px #10182866;
    overflow: hidden;
}

.profile-menu-identity {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
}

.profile-menu-identity strong {
    display: block;
    font-size: 13.5px;
}

.profile-menu-email,
.profile-menu-tenant {
    display: block;
    color: var(--muted);
    font-size: 11.5px;
}

.profile-menu-plan {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.profile-plan-badge {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--brand-soft, #eef2ff);
    color: var(--brand);
    font-weight: 700;
    font-size: 11.5px;
}

.profile-menu-usage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border-bottom: 1px solid var(--border);
}

.profile-menu-usage div {
    display: grid;
    gap: 2px;
    padding: 9px 14px;
    background: var(--surface);
}

.profile-menu-usage span {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}

.profile-menu-usage strong { font-size: 13.5px; }

.profile-menu-actions { padding: 6px; }

.profile-menu-item {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.profile-menu-item:hover,
.profile-menu-item:focus-visible {
    background: var(--subtle);
    outline: none;
}

.profile-menu-upgrade {
    color: var(--brand);
    font-weight: 650;
}

.profile-menu-footer {
    padding: 6px;
    border-top: 1px solid var(--border);
}

.profile-menu-signout { color: var(--danger); }

.billing-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.billing-plan-card {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--surface);
}

.billing-plan-card.is-current {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 14%, transparent);
}

.billing-plan-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.billing-plan-card h3 {
    margin: 0;
    font-size: 15px;
}

.billing-plan-price {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.billing-usage-panel {
    margin-bottom: 16px;
}

.support-button {
    min-height: 34px;
    padding: 6px 13px;
    font-size: 12.5px;
}

.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 80;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    box-shadow: 0 10px 26px -10px #25d36699, 0 2px 6px #10182833;
    transition: transform .16s ease;
}

.whatsapp-float svg { width: 27px; height: 27px; }

.whatsapp-float:hover,
.whatsapp-float:focus-visible { transform: scale(1.06); }

.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-top: 10px;
    padding: 8px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
}

.sidebar-profile:hover,
.sidebar-profile:focus-visible {
    background: var(--subtle);
    outline: none;
}

.sidebar-profile .profile-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
}

@media (min-width: 861px) {
    .app-shell.sidebar-collapsed .sidebar-profile { justify-content: center; }
    .app-shell.sidebar-collapsed .sidebar-profile .profile-name,
    .app-shell.sidebar-collapsed .sidebar-profile svg { display: none; }
}

/* The floating WhatsApp control must not sit on top of toasts. */
.toast-host { bottom: 84px; }

.note-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.note-card {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--note-bg, #fffbea);
    box-shadow: var(--shadow);
}

.note-card[data-colour="yellow"] { --note-bg: #fffbea; --note-edge: #e6d08a; }
.note-card[data-colour="green"]  { --note-bg: #edfaf1; --note-edge: #94ceac; }
.note-card[data-colour="blue"]   { --note-bg: #eef4fd; --note-edge: #9dbdec; }
.note-card[data-colour="pink"]   { --note-bg: #fdeef4; --note-edge: #e5a2bd; }
.note-card[data-colour="purple"] { --note-bg: #f3eefd; --note-edge: #b8a2e5; }
.note-card[data-colour="grey"]   { --note-bg: #f4f5f7; --note-edge: #c3c8d1; }

.note-card { border-color: var(--note-edge, var(--border)); }

[data-theme="dark"] .note-card[data-colour="yellow"] { --note-bg: #322c17; --note-edge: #6b5b2a; }
[data-theme="dark"] .note-card[data-colour="green"]  { --note-bg: #162c20; --note-edge: #336b4c; }
[data-theme="dark"] .note-card[data-colour="blue"]   { --note-bg: #172533; --note-edge: #35597f; }
[data-theme="dark"] .note-card[data-colour="pink"]   { --note-bg: #321d26; --note-edge: #7a4059; }
[data-theme="dark"] .note-card[data-colour="purple"] { --note-bg: #241d33; --note-edge: #55447f; }
[data-theme="dark"] .note-card[data-colour="grey"]   { --note-bg: #22252b; --note-edge: #454b56; }

.note-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.note-title {
    flex: 1;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 2px 0;
}

.note-title:focus-visible,
.note-body:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.note-body {
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    resize: vertical;
    padding: 0;
}

.note-items {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.note-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.note-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: pointer;
}

.note-item.is-checked span {
    text-decoration: line-through;
    color: var(--muted);
}

.note-add-item {
    display: flex;
    gap: 6px;
}

.note-add-item input {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--note-edge, var(--border));
    border-radius: var(--radius-sm, 8px);
    background: var(--surface);
    font: inherit;
    font-size: 12.5px;
}

.note-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--note-edge, var(--border));
}

.note-colours { display: flex; gap: 5px; }

.note-colour {
    width: 17px;
    height: 17px;
    border: 1px solid #00000022;
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
}

.note-colour[data-note-colour="yellow"] { background: #f5dd8a; }
.note-colour[data-note-colour="green"]  { background: #94ceac; }
.note-colour[data-note-colour="blue"]   { background: #9dbdec; }
.note-colour[data-note-colour="pink"]   { background: #e5a2bd; }
.note-colour[data-note-colour="purple"] { background: #b8a2e5; }
.note-colour[data-note-colour="grey"]   { background: #c3c8d1; }

.note-colour[data-active="true"] {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
}

.note-status:empty { display: none; }

.reminder-backdrop {
    /* A due legal reminder must be acknowledged, not dismissed by mis-click. */
    background: #0b1020cc;
}

.reminder-modal {
    width: min(100%, 460px);
    border-top: 4px solid var(--warning);
}


/* ═══ DS3 MERGED LAYERS — appended by the Counsel overhaul; sections in fixed order. ═══ */

/* ─────────── DS3 section: f1-foundation.css ─────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   DS3 · "Counsel" design layer — foundation
   Appended authority layer: tokens, fonts, base, and the application shell.
   Light = Chancery paper · Dark = Midnight chambers.
   See docs/design/counsel-design-system.md for the binding rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Faces (self-hosted; CSP font-src 'self') ─────────────────────────────── */
@font-face {
    font-family: 'Newsreader';
    src: url('fonts/newsreader-var.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Newsreader';
    src: url('fonts/newsreader-italic-var.woff2') format('woff2');
    font-weight: 400 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Sans';
    src: url('fonts/instrument-sans-var.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Sans';
    src: url('fonts/instrument-sans-italic-var.woff2') format('woff2');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/plex-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/plex-mono-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ── Tokens · light (Chancery paper) ──────────────────────────────────────── */
:root {
    --font-ui: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, 'SFMono-Regular', monospace;

    --canvas: #f4f3ef;
    --surface: #fdfdfb;
    --surface-raised: #ffffff;
    --subtle: #ecebe4;
    --subtle-strong: #e3e1d7;
    --ink: #1a2233;
    --muted: #5c6577;
    --border: #ddd9cf;
    --border-strong: #c8c2b4;

    --brand: #1e3a8a;
    --brand-hover: #16296b;
    --brand-strong: #16296b;
    --brand-soft: #e9edf9;
    --brand-fill-ink: #ffffff;
    --aurum: #8a6d1d;
    --aurum-bright: #b18a24;
    --aurum-soft: #f5efdc;

    --success: #14684a;
    --success-soft: #e5f3ec;
    --warning: #8f5606;
    --warning-soft: #faf1de;
    --danger: #a91f2e;
    --danger-soft: #faebec;
    --info: #275a9e;
    --info-soft: #e8effa;
    --purple: #5b4396;

    --focus-ring: #3b62d6;
    --focus-glow: 0 0 0 5px color-mix(in srgb, #3b62d6 18%, transparent);

    --shadow-xs: 0 1px 2px #1a223310;
    --shadow-sm: 0 1px 2px #1a22330c, 0 6px 20px #1a22330a;
    --shadow-md: 0 2px 6px #1a22330e, 0 14px 36px #1a223314;
    --shadow-lg: 0 6px 16px #1a223316, 0 28px 64px #1a22331e;
    --shadow: var(--shadow-sm);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    --text-xs: 11.5px;
    --text-sm: 12.5px;
    --text-base: 14px;
    --text-md: 15.5px;
    --text-lg: clamp(17px, 1.2vw + 12px, 19px);
    --text-xl: clamp(21px, 1.8vw + 14px, 26px);
    --text-display: clamp(26px, 2.6vw + 16px, 38px);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 44px;

    --motion-fast: 120ms;
    --motion-base: 200ms;
    --motion-slow: 350ms;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    --topbar-h: 64px;
    --sidebar-w: 260px;
    --note-ink: var(--ink);
}

/* ── Tokens · dark (Midnight chambers) ────────────────────────────────────── */
[data-theme="dark"] {
    --canvas: #080b14;
    --surface: #0d1120;
    --surface-raised: #131a2e;
    --subtle: #171f36;
    --subtle-strong: #1e2841;
    --ink: #e8eaf3;
    --muted: #97a0b8;
    --border: #232c47;
    --border-strong: #32405f;

    --brand: #8ea8ff;
    --brand-hover: #a8bcff;
    --brand-strong: #a8bcff;
    --brand-soft: #17224466;
    --brand-fill: #4a6cf7;
    --brand-fill-hover: #5f7ef8;
    --brand-fill-ink: #ffffff;
    --aurum: #d9b64a;
    --aurum-bright: #ecd075;
    --aurum-soft: #2b25143f;

    --success: #4cc38a;
    --success-soft: #12271e;
    --warning: #e5b555;
    --warning-soft: #2b2213;
    --danger: #f07882;
    --danger-soft: #301a1e;
    --info: #6fa8f5;
    --info-soft: #14213a;
    --purple: #a58fd8;

    --focus-ring: #7d9cff;
    --focus-glow: 0 0 0 5px color-mix(in srgb, #7d9cff 22%, transparent);

    --shadow-xs: 0 1px 2px #00000055;
    --shadow-sm: 0 1px 2px #00000050, 0 8px 24px #00000038;
    --shadow-md: 0 2px 8px #00000055, 0 16px 44px #00000042, 0 0 0 1px #8ea8ff0a;
    --shadow-lg: 0 8px 22px #00000060, 0 32px 80px #00000055, 0 0 32px -12px #8ea8ff30;
    --shadow: var(--shadow-sm);
}

/* Light theme uses --brand directly as its fill; map the fill aliases. */
:root {
    --brand-fill: var(--brand);
    --brand-fill-hover: var(--brand-hover);
}

[data-theme="dark"] {
    --brand-fill: #4a6cf7;
    --brand-fill-hover: #5f7ef8;
}

/* ── Density ──────────────────────────────────────────────────────────────── */
[data-density="compact"] {
    --space-3: 10px;
    --space-4: 13px;
    --space-5: 16px;
    --space-6: 19px;
    --space-7: 26px;
    --text-base: 13.5px;
    --topbar-h: 56px;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html {
    color-scheme: light;
    scroll-behavior: smooth;
}

[data-theme="dark"]:root {
    color-scheme: dark;
}

body {
    margin: 0;
    background:
        radial-gradient(52rem 34rem at -6% -8%, color-mix(in srgb, var(--brand-fill) 5%, transparent), transparent 68%),
        radial-gradient(46rem 30rem at 106% 112%, color-mix(in srgb, var(--aurum) 5%, transparent), transparent 66%),
        var(--canvas);
    background-attachment: fixed;
    color: var(--ink);
    font: 400 var(--text-base)/1.55 var(--font-ui);
    letter-spacing: .004em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: color-mix(in srgb, var(--brand) 24%, transparent);
    color: var(--ink);
}

[data-theme="dark"] ::selection {
    background: color-mix(in srgb, var(--brand-fill) 42%, transparent);
    color: #fff;
}

::placeholder {
    color: color-mix(in srgb, var(--muted) 72%, transparent);
    opacity: 1;
}

h1, h2, h3, h4 {
    letter-spacing: -.012em;
    text-wrap: balance;
}

kbd {
    font-family: var(--font-mono);
    font-size: .82em;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    box-shadow: var(--focus-glow);
    border-radius: 6px;
}

:where(a, button):focus:not(:focus-visible) {
    outline: none;
}

/* Refined scrollbars on every scroll surface. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
    border: 3px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
    background-clip: padding-box;
    border: 3px solid transparent;
}

.skip-link {
    position: absolute;
    top: -48px;
    left: 16px;
    z-index: 200;
    padding: 10px 18px;
    background: var(--brand-fill);
    color: var(--brand-fill-ink);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--motion-base) var(--ease-out);
}

.skip-link:focus-visible {
    top: 12px;
}

/* Motion discipline: hard global kill under user/system preference. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

[data-reduced-motion="true"] *,
[data-reduced-motion="true"] *::before,
[data-reduced-motion="true"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
}

/* ── Application shell ────────────────────────────────────────────────────── */
.app-shell {
    display: flex;
    min-height: 100svh;
    background: transparent;
}

/* Sidebar — quiet chrome, editorial brand, precise nav. */
.app-shell .sidebar,
.sidebar {
    width: var(--sidebar-w);
    padding: 18px 14px calc(14px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 88%, var(--canvas));
    border-right: 1px solid var(--border);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    flex: none;
    position: sticky;
    top: 0;
    height: 100svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 40;
}

[data-theme="dark"] .app-shell .sidebar,
[data-theme="dark"] .sidebar {
    background: color-mix(in srgb, var(--surface) 72%, var(--canvas));
}

.sidebar-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.app-shell .brand,
.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 2px 8px 18px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
    min-height: 0;
}

.app-shell .brand-mark,
.brand-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(150deg, #24409a, #101f4e 78%);
    color: #f3e5b5;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    box-shadow: inset 0 1px 0 #ffffff26, 0 4px 12px #101f4e3d;
}

.brand-mark::after {
    content: '';
    position: absolute;
    inset: auto 6px 5px 6px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--aurum-bright), transparent);
    opacity: .9;
}

[data-theme="dark"] .app-shell .brand-mark,
[data-theme="dark"] .brand-mark {
    background: linear-gradient(150deg, #2c4cb4, #131f45 78%);
    box-shadow: inset 0 1px 0 #ffffff2e, 0 4px 14px #00000066, 0 0 18px -6px #8ea8ff55;
}

.brand-copy {
    display: grid;
    line-height: 1.16;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 550;
    letter-spacing: 0;
}

.brand-copy small {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
}

/* Navigation */
.app-shell .nav-list,
.nav-list {
    display: grid;
    gap: 3px;
    margin: 2px 0;
}

.nav-group-label {
    margin: 16px 10px 6px;
    color: color-mix(in srgb, var(--muted) 82%, transparent);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.app-shell .nav-item,
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 9px;
    color: color-mix(in srgb, var(--ink) 78%, var(--muted));
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.app-shell .nav-item::before,
.nav-item::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-fill);
    opacity: 0;
    transform: scaleY(.4);
    transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

.app-shell .nav-item:hover,
.nav-item:hover {
    background: color-mix(in srgb, var(--subtle) 72%, transparent);
    color: var(--ink);
}

.app-shell .nav-item.active,
.nav-item.active {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

[data-theme="dark"] .app-shell .nav-item.active,
[data-theme="dark"] .nav-item.active {
    background: color-mix(in srgb, var(--brand-fill) 16%, transparent);
    color: var(--brand);
}

.app-shell .nav-item.active::before,
.nav-item.active::before {
    opacity: 1;
    transform: scaleY(1);
}

.nav-icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    opacity: .84;
}

.nav-item.active .nav-icon {
    opacity: 1;
}

.nav-item .nav-count {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
}

.nav-item.active .nav-count {
    background: color-mix(in srgb, var(--brand-fill) 14%, transparent);
    color: var(--brand);
}

/* Sidebar bottom cluster */
.sidebar-bottom {
    margin-top: auto;
    display: grid;
    gap: 10px;
    padding-top: 14px;
}

.security-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--success) 26%, transparent);
    border-radius: var(--radius-md);
    background: var(--success-soft);
    color: var(--success);
    font-size: var(--text-sm);
    font-weight: 550;
    line-height: 1.35;
}

.security-note small {
    color: color-mix(in srgb, var(--success) 68%, var(--muted));
    font-weight: 450;
}

.security-signal {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
    animation: ds3-signal 2.6s var(--ease-out) infinite;
}

@keyframes ds3-signal {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 24%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 10%, transparent); }
}

.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    text-align: left;
    transition: border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.sidebar-profile:hover {
    border-color: var(--border-strong);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xs);
}

.profile-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(150deg, color-mix(in srgb, var(--brand-fill) 88%, #fff), var(--brand-fill));
    color: var(--brand-fill-ink);
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: .02em;
}

.profile-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 550;
}

/* Tenant switcher */
.app-shell .tenant-switcher,
.tenant-switcher {
    min-height: 50px;
    margin: 0 0 16px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.app-shell .tenant-switcher:hover,
.app-shell .tenant-switcher:focus-visible,
.tenant-switcher:hover {
    border-color: color-mix(in srgb, var(--brand-fill) 45%, var(--border));
    background: var(--surface-raised);
    box-shadow: var(--shadow-xs);
}

/* Topbar — translucent, hairline meridian base. */
.app-shell .topbar,
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--topbar-h);
    padding: 10px clamp(14px, 2.6vw, 28px);
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}

.topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 4%, color-mix(in srgb, var(--aurum) 55%, transparent) 50%, transparent 96%);
    opacity: .55;
    pointer-events: none;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
}

.breadcrumb strong {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -.01em;
}

.breadcrumb .ui-icon {
    width: 13px;
    height: 13px;
    opacity: .55;
}

.command-trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(340px, 30vw);
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 55%, transparent);
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.command-trigger:hover {
    border-color: var(--border-strong);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    color: var(--ink);
}

.command-trigger .ui-icon {
    width: 15px;
    height: 15px;
    opacity: .7;
}

.command-trigger kbd {
    margin-left: auto;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--muted);
    font-size: 10.5px;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Topbar buttons */
.app-shell :where(.icon-button, .notification-button, .more-button, .mobile-menu) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

.app-shell :where(.icon-button, .notification-button, .more-button, .mobile-menu):hover,
.app-shell :where(.icon-button, .notification-button, .more-button, .mobile-menu)[aria-expanded="true"] {
    background: var(--subtle);
    border-color: var(--border);
    color: var(--ink);
}

.app-shell .notification-button {
    position: relative;
}

.notification-button [data-notification-count] {
    position: absolute;
    top: 5px;
    right: 4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    font-style: normal;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--surface);
}

.notification-button [data-notification-count][hidden] {
    display: none;
}

.app-shell .create-button,
.create-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-fill) 92%, #fff), var(--brand-fill));
    color: var(--brand-fill-ink);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .006em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 #ffffff2e, var(--shadow-xs);
    transition: filter var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.app-shell .create-button:hover,
.create-button:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-fill-hover) 92%, #fff), var(--brand-fill-hover));
    box-shadow: inset 0 1px 0 #ffffff2e, var(--shadow-sm);
    transform: translateY(-1px);
    filter: none;
}

.app-shell .create-button:active,
.create-button:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 0 #ffffff1c, var(--shadow-xs);
}

/* Dark: saturated sapphire fill with white ink (overrides the legacy pale
   gradient, whose [data-theme] selector outranks the base rule above). */
[data-theme="dark"] .app-shell .create-button,
[data-theme="dark"] .create-button {
    color: var(--brand-fill-ink);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-fill) 86%, #fff), var(--brand-fill));
    border-color: transparent;
    box-shadow: inset 0 1px 0 #ffffff2e, 0 4px 14px -4px color-mix(in srgb, var(--brand-fill) 55%, transparent);
}

[data-theme="dark"] .app-shell .create-button:hover,
[data-theme="dark"] .create-button:hover {
    color: var(--brand-fill-ink);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-fill-hover) 86%, #fff), var(--brand-fill-hover));
}

.create-button .caret .ui-icon {
    width: 13px;
    height: 13px;
    opacity: .8;
}

.app-shell .secondary-button.support-button {
    border-radius: 10px;
}

/* Theme toggle icon visibility is handled by the legacy layer (kept as-is). */

/* Main + content column */
.app-shell .main,
.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-shell .content,
.content {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(18px, 2.6vw, 32px) clamp(14px, 2.8vw, 30px) calc(clamp(24px, 3vw, 40px) + env(safe-area-inset-bottom));
    display: grid;
    gap: var(--space-6);
    align-content: start;
    animation: ds3-page-in var(--motion-slow) var(--ease-out) both;
}

@keyframes ds3-page-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Page heading — editorial serif + meridian rule. */
.page-heading {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 18px;
}

.page-heading::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--aurum) 62%, transparent), color-mix(in srgb, var(--aurum) 14%, transparent) 55%, transparent);
}

.page-heading h1 {
    margin: 4px 0 6px;
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-display);
    font-weight: 500;
    letter-spacing: -.014em;
    line-height: 1.12;
    color: var(--ink);
}

.page-heading .muted,
.page-heading p.muted {
    max-width: 64ch;
    color: var(--muted);
    font-size: var(--text-md);
    line-height: 1.5;
}

.eyebrow {
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

/* Footer */
.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-sm);
}

.footer a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
    transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

.footer a:hover {
    color: var(--brand);
    border-color: currentColor;
}

/* Collapsed sidebar refinements (mechanics live in the legacy layer). */
.sidebar-collapse {
    transition: transform var(--motion-base) var(--ease-out);
}

.app-shell.sidebar-collapsed .sidebar-collapse {
    transform: rotate(180deg);
}

@media (min-width: 901px) {
    .app-shell.sidebar-collapsed .sidebar {
        width: 76px;
        padding-inline: 10px;
    }

    .app-shell.sidebar-collapsed .nav-item {
        justify-content: center;
        padding-inline: 0;
    }

    .app-shell.sidebar-collapsed .brand {
        justify-content: center;
        padding-inline: 0;
    }
}

/* Mobile shell (mechanics preserved from legacy; aesthetics upgraded). */
@media (max-width: 900px) {
    .app-shell .sidebar,
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100dvh;
        width: min(320px, calc(100vw - 40px));
        transform: translateX(-105%);
        transition: transform var(--motion-slow) var(--ease-out);
        box-shadow: var(--shadow-lg);
        padding-top: calc(18px + env(safe-area-inset-top));
        background: var(--surface);
        z-index: 45;
    }

    [data-theme="dark"] .app-shell .sidebar,
    [data-theme="dark"] .sidebar {
        background: var(--surface);
    }

    .app-shell.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-scrim {
        position: fixed;
        inset: 0;
        z-index: 44;
        display: block;
        background: color-mix(in srgb, #060913 62%, transparent);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--motion-base) var(--ease-out);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .app-shell.sidebar-open .sidebar-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    .app-shell .topbar,
    .topbar {
        padding-top: calc(10px + env(safe-area-inset-top));
        min-height: calc(var(--topbar-h) + env(safe-area-inset-top));
    }
}

@media (max-width: 700px) {
    .app-shell :where(.icon-button, .notification-button, .more-button, .mobile-menu) {
        width: 44px;
        height: 44px;
    }

    .app-shell .create-button,
    .create-button {
        min-height: 44px;
    }

    .command-trigger {
        min-height: 44px;
    }

    .page-heading h1 {
        font-size: clamp(24px, 7vw, 30px);
    }
}

/* ─────────── DS3 section: f2-primitives.css ─────────── */
/* ===== DS3 · Primitives ===== */
/*
 * Shared component primitives: buttons, form controls, status, tables,
 * cards/panels, overlays, kbd/code, scrollbars, skeletons.
 *
 * Cascade notes (this file is appended after all legacy CSS):
 * - Legacy carries `.app-shell .primary-button`-grade selectors (0,2,0) and
 *   `[data-theme="dark"] .app-shell .primary-button` (0,3,0). Doubled-class
 *   selectors (`.primary-button.primary-button`) tie the former and win by
 *   source order; dark overrides here carry `[data-theme="dark"]` to tie the
 *   latter. Route-scoped legacy themes (e.g. `.app-shell .drafting-page …`)
 *   intentionally keep outranking these base rules.
 * - Overlays (modal-backdrop, toast-host, menus) are appended to <body>,
 *   outside `.app-shell`, so their rules never rely on the shell scope.
 * - Inputs only ever change `background-color` (never the `background`
 *   shorthand) so the legacy select chevron background-image survives.
 */

/* ---------------------------------------------------------------- */
/* 1. Buttons                                                        */
/* ---------------------------------------------------------------- */

/* `display` lives in a zero-specificity rule so legacy responsive hide rules
   (`.help-button`, `.landing-header-actions .secondary-button`, `.app-shell
   .top-actions > .icon-button`, …) keep winning at their breakpoints. */
:where(.primary-button, .secondary-button, .quiet-button, .create-button, .auth-submit) {
    display: inline-flex;
}

.primary-button.primary-button,
.secondary-button.secondary-button,
.quiet-button.quiet-button,
.create-button.create-button,
.auth-submit.auth-submit {
    --ds3-on-brand: var(--on-brand, #fff); /* spec idiom: white text on sapphire fill */
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: var(--radius-md, 12px);
    font-family: var(--font-ui, "Instrument Sans", "Segoe UI", system-ui, sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .004em;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--motion-fast, 120ms) var(--ease-out, ease),
        border-color var(--motion-fast, 120ms) var(--ease-out, ease),
        color var(--motion-fast, 120ms) var(--ease-out, ease),
        box-shadow var(--motion-base, 200ms) var(--ease-out, ease),
        transform var(--motion-base, 200ms) var(--ease-out, ease);
}

.primary-button.primary-button,
.create-button.create-button,
.auth-submit.auth-submit {
    border: 1px solid color-mix(in srgb, var(--brand) 86%, var(--ink));
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 90%, var(--surface-raised, var(--surface))), var(--brand));
    color: var(--ds3-on-brand);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--surface-raised, var(--surface)) 24%, transparent),
        var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, .08));
}

.primary-button.primary-button:hover,
.create-button.create-button:hover,
.auth-submit.auth-submit:hover {
    border-color: var(--brand-hover, var(--brand));
    background: linear-gradient(180deg, var(--brand), var(--brand-hover, var(--brand)));
    color: var(--ds3-on-brand);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--surface-raised, var(--surface)) 18%, transparent),
        var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, .1));
    transform: translateY(-1px);
}

.primary-button.primary-button:active,
.create-button.create-button:active,
.auth-submit.auth-submit:active {
    background: var(--brand-hover, var(--brand));
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, .08));
    transform: translateY(0);
    transition-duration: var(--motion-fast, 120ms);
}

[data-theme="dark"] .primary-button.primary-button,
[data-theme="dark"] .create-button.create-button,
[data-theme="dark"] .auth-submit.auth-submit {
    /* Dark fills lean on the on-surface brand token, lifted toward ink,
       carrying near-black text for AA contrast. */
    border-color: color-mix(in srgb, var(--brand) 82%, var(--ink));
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 80%, var(--ink)), var(--brand));
    color: var(--canvas);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--ink) 30%, transparent),
        0 6px 18px -8px color-mix(in srgb, var(--brand) 55%, transparent);
}

[data-theme="dark"] .primary-button.primary-button:hover,
[data-theme="dark"] .create-button.create-button:hover,
[data-theme="dark"] .auth-submit.auth-submit:hover {
    border-color: color-mix(in srgb, var(--brand) 70%, var(--ink));
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 66%, var(--ink)), color-mix(in srgb, var(--brand) 88%, var(--ink)));
    color: var(--canvas);
    box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--brand) 60%, transparent);
}

[data-theme="dark"] .primary-button.primary-button:active,
[data-theme="dark"] .create-button.create-button:active,
[data-theme="dark"] .auth-submit.auth-submit:active {
    background: var(--brand);
    color: var(--canvas);
}

.secondary-button.secondary-button {
    border: 1px solid var(--border-strong, var(--border));
    background: var(--surface-raised, var(--surface));
    color: var(--ink);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, .06));
}

.secondary-button.secondary-button:hover {
    border-color: color-mix(in srgb, var(--brand) 38%, var(--border-strong, var(--border)));
    background: color-mix(in srgb, var(--brand) 4%, var(--surface-raised, var(--surface)));
    color: var(--ink);
    box-shadow: var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, .08));
    transform: translateY(-1px);
}

.secondary-button.secondary-button:active {
    background: color-mix(in srgb, var(--brand) 8%, var(--surface-raised, var(--surface)));
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, .06));
    transform: translateY(0);
}

.secondary-button.is-active,
.approval-views .secondary-button.is-active {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--border-strong, var(--border)));
    background: color-mix(in srgb, var(--brand) 9%, var(--surface-raised, var(--surface)));
    color: var(--ink);
}

.quiet-button.quiet-button {
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
}

.quiet-button.quiet-button:hover {
    border-color: color-mix(in srgb, var(--border) 80%, transparent);
    background: var(--subtle);
    color: var(--ink);
}

.quiet-button.quiet-button:active {
    background: color-mix(in srgb, var(--subtle) 70%, var(--border));
}

/* Topbar Create keeps its compact, commanding shape. */
.create-button.create-button {
    min-height: 36px;
    padding: 0 13px;
    font-size: 13px;
}

.create-button.create-button .caret {
    margin-left: 2px;
    opacity: .75;
}

/* Auth submit stays full-width and slightly taller (legacy width rule kept). */
.auth-submit.auth-submit {
    min-height: 46px;
    font-size: var(--text-md, 15px);
    letter-spacing: .01em;
}

/* Icon buttons: quiet 38px squares that firm up on hover.
   `:where(:not(.mobile-menu))` adds no specificity but keeps these rules off
   the hamburger, whose show/hide lives in weaker legacy breakpoint rules; the
   display declaration stays at zero specificity so `.help-button`-style
   responsive hides keep winning. */
:where(.icon-button):where(:not(.mobile-menu)) {
    display: inline-flex;
}

.icon-button.icon-button:where(:not(.mobile-menu)) {
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 38px;
    min-height: 38px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--motion-fast, 120ms) var(--ease-out, ease),
        border-color var(--motion-fast, 120ms) var(--ease-out, ease),
        color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.icon-button.icon-button:where(:not(.mobile-menu)):hover {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--ink);
}

.notification-button.notification-button,
.more-button.more-button {
    border-radius: var(--radius-sm, 8px);
    transition:
        background-color var(--motion-fast, 120ms) var(--ease-out, ease),
        border-color var(--motion-fast, 120ms) var(--ease-out, ease),
        color var(--motion-fast, 120ms) var(--ease-out, ease);
}

/* Notification badge: brand-forward count, ringed by the surface behind it. */
.notification-button.notification-button b {
    top: 4px;
    right: 3px;
    min-width: 16px;
    padding: 1px 4px;
    border: 2px solid var(--surface);
    border-radius: var(--radius-pill, 999px);
    background: var(--danger);
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

/* Disabled states: dimmed, flat, motionless. Legacy cursor semantics kept. */
.primary-button.primary-button:disabled,
.secondary-button.secondary-button:disabled,
.quiet-button.quiet-button:disabled,
.create-button.create-button:disabled,
.auth-submit.auth-submit:disabled,
.icon-button.icon-button:disabled {
    opacity: .5;
    box-shadow: none;
    transform: none;
}

.primary-button.primary-button:disabled:hover,
.secondary-button.secondary-button:disabled:hover,
.quiet-button.quiet-button:disabled:hover,
.create-button.create-button:disabled:hover,
.auth-submit.auth-submit:disabled:hover {
    border-color: inherit;
    transform: none;
}

/* Risk-banner dismiss control: quiet warning-toned square. */
.close-banner.close-banner {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    min-height: 30px;
    margin-left: 4px;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.close-banner.close-banner:hover {
    background: color-mix(in srgb, var(--warning) 16%, transparent);
}

/* Focus: 2px ring offset 2px, everywhere a control can take focus.
   `.main :is(button, a)` ties legacy `.main button:focus-visible` (0,2,1). */
.main :is(a, button):focus-visible,
.app-shell :is(a, button, [tabindex]):focus-visible,
.auth-shell :is(a, button):focus-visible,
:is(.modal-backdrop, .toast-host, .quick-create-menu, .profile-menu, .notification-panel) :is(a, button):focus-visible {
    outline: 2px solid var(--focus-ring, var(--brand));
    outline-offset: 2px;
    box-shadow: none;
}

[data-theme="dark"] .main :is(a, button):focus-visible,
[data-theme="dark"] .app-shell :is(a, button, [tabindex]):focus-visible,
[data-theme="dark"] .auth-shell :is(a, button):focus-visible,
[data-theme="dark"] :is(.modal-backdrop, .toast-host, .quick-create-menu, .profile-menu, .notification-panel) :is(a, button):focus-visible {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--focus-ring, var(--brand)) 22%, transparent);
}

/* ---------------------------------------------------------------- */
/* 2. Form controls                                                  */
/* ---------------------------------------------------------------- */

.app-shell :where(.client-form, .workspace-form, .party-form, .auth-form, .drafting-fields, .drafting-mapping-row, .document-metadata-form, .drafting-composer-form) label,
.modal-backdrop .settings-modal label,
.auth-shell .auth-form label {
    color: var(--ink);
    font-size: var(--text-sm, 12.5px);
    font-weight: 600;
    letter-spacing: .012em;
}

/* Text-entry surfaces. background-color only — the shorthand would erase the
   legacy select chevron drawn via background-image. */
.app-shell :where(input, select, textarea),
.modal-backdrop :where(input, select, textarea),
.auth-shell .auth-form input {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    background-color: var(--surface-raised, var(--surface));
    color: var(--ink);
    font-family: var(--font-ui, "Instrument Sans", "Segoe UI", system-ui, sans-serif);
    font-size: var(--text-base, 14px);
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 3%, transparent);
    transition:
        border-color var(--motion-fast, 120ms) var(--ease-out, ease),
        background-color var(--motion-fast, 120ms) var(--ease-out, ease),
        box-shadow var(--motion-fast, 120ms) var(--ease-out, ease);
}

.app-shell :where(input, select, textarea):hover:not(:disabled):not(:focus),
.modal-backdrop :where(input, select, textarea):hover:not(:disabled):not(:focus) {
    border-color: var(--border-strong, var(--border));
}

.app-shell :where(input, select, textarea):focus,
.app-shell :where(input, select, textarea):focus-visible,
.modal-backdrop :where(input, select, textarea):focus,
.modal-backdrop :where(input, select, textarea):focus-visible,
.auth-shell .auth-form input:focus,
.auth-shell .auth-form input:focus-visible {
    border-color: var(--brand);
    background-color: var(--surface-raised, var(--surface));
    outline: none;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent),
        inset 0 1px 2px color-mix(in srgb, var(--ink) 3%, transparent);
}

[data-theme="dark"] .app-shell :where(input, select, textarea),
[data-theme="dark"] .modal-backdrop :where(input, select, textarea),
[data-theme="dark"] .auth-shell .auth-form input {
    background-color: color-mix(in srgb, var(--canvas) 45%, var(--surface));
    box-shadow: inset 0 1px 3px color-mix(in srgb, var(--canvas) 65%, transparent);
}

[data-theme="dark"] .app-shell :where(input, select, textarea):focus,
[data-theme="dark"] .modal-backdrop :where(input, select, textarea):focus,
[data-theme="dark"] .auth-shell .auth-form input:focus {
    background-color: var(--surface);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent),
        inset 0 1px 3px color-mix(in srgb, var(--canvas) 50%, transparent);
}

.app-shell :where(input, textarea)::placeholder,
.modal-backdrop :where(input, textarea)::placeholder,
.auth-shell .auth-form input::placeholder {
    color: color-mix(in srgb, var(--muted) 75%, transparent);
}

.app-shell :where(input, select, textarea):disabled,
.modal-backdrop :where(input, select, textarea):disabled {
    background-color: var(--subtle);
    color: var(--muted);
    opacity: .75;
}

/* Validation: a danger hairline plus a soft interior wash. */
.app-shell :where(input, select, textarea)[aria-invalid="true"],
.modal-backdrop :where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--danger);
    background-color: color-mix(in srgb, var(--danger) 5%, var(--surface-raised, var(--surface)));
}

.app-shell :where(input, select, textarea)[aria-invalid="true"]:focus,
.modal-backdrop :where(input, select, textarea)[aria-invalid="true"]:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent);
}

/* Checks and radios: crisp 18px marks; modals sit outside .app-shell, so the
   bare 42px min-height from the legacy input reset is corrected here. */
.app-shell :where(input[type="checkbox"], input[type="radio"]),
.modal-backdrop :where(input[type="checkbox"], input[type="radio"]),
.settings-check :where(input[type="checkbox"], input[type="radio"]) {
    width: 17px;
    height: 17px;
    min-height: 17px;
    flex: none;
    border-radius: 4px;
    accent-color: var(--brand);
    box-shadow: none;
}

.app-shell input[type="radio"],
.modal-backdrop input[type="radio"] {
    border-radius: var(--radius-pill, 999px);
}

.settings-check.settings-check {
    align-items: center;
    gap: 9px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* Fieldsets used for approver/attendee selection. */
fieldset.approval-approvers,
.approval-approvers.approval-approvers {
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--subtle) 45%, var(--surface));
}

.approval-approvers.approval-approvers legend {
    padding: 0 7px;
    color: var(--muted);
    font-size: var(--text-xs, 11px);
    font-weight: 650;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Required marker: an aurum editorial whisper, not a shout. */
.required-field.required-field {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 1px 7px;
    border: 1px solid color-mix(in srgb, var(--aurum, var(--warning)) 30%, transparent);
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--aurum, var(--warning)) 9%, transparent);
    color: var(--aurum, var(--warning));
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.auth-field-hint.auth-field-hint,
.app-shell .form-hint {
    color: var(--muted);
    font-size: var(--text-sm, 12.5px);
    font-weight: 450;
    line-height: 1.5;
}

/* Form section dividers breathe a little more. */
.app-shell .form-section,
.modal-backdrop .form-section {
    border-top-color: color-mix(in srgb, var(--border) 70%, transparent);
}

.app-shell .form-section-heading strong,
.modal-backdrop .form-section-heading strong {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.008em;
}

/* Action rows: aligned, hairline-separated, evenly spaced. */
.modal-actions.modal-actions {
    gap: 10px;
    border-top-color: color-mix(in srgb, var(--border) 75%, transparent);
}

.app-shell .form-actions,
.app-shell .matter-party-form-actions,
.app-shell .conflict-form-actions {
    gap: 10px;
}

/* ---------------------------------------------------------------- */
/* 3. Status: pills, badges, counts, banners                         */
/* ---------------------------------------------------------------- */

.status-pill.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
    border-radius: var(--radius-pill, 999px);
    background: var(--success-soft);
    color: var(--success);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .02em;
    white-space: nowrap;
}

.status-pill.status-pill-archived {
    border-color: color-mix(in srgb, var(--muted) 30%, transparent);
    background: var(--subtle);
    color: var(--muted);
}

.app-shell .matter-status-pill,
.app-shell .party-status-pill,
.app-shell .matter-classification,
.app-shell .matter-tag,
.app-shell .matter-count {
    border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px);
    background: var(--subtle);
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .015em;
}

.app-shell .matter-status-pill[data-matter-state="active"],
.app-shell .party-status-pill[data-party-state="active"] {
    border-color: color-mix(in srgb, var(--success) 38%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .matter-status-pill[data-matter-state="on_hold"] {
    border-color: color-mix(in srgb, var(--warning) 42%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .matter-status-pill[data-matter-state="closed"],
.app-shell .matter-status-pill[data-matter-state="archived"] {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--muted);
}

.approval-status.approval-status {
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill, 999px);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.approval-status.approval-status[data-state="pending"] {
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
    background: color-mix(in srgb, var(--brand) 9%, transparent);
    color: var(--brand);
}

.approval-status.approval-status[data-state="approved"] {
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

.approval-status.approval-status[data-state="overdue"],
.approval-status.approval-status[data-state="rejected"] {
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

.approval-status.approval-status[data-state="cancelled"],
.approval-status.approval-status[data-state="expired"],
.approval-status.approval-status[data-state="reassigned"] {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--muted);
}

.profile-plan-badge.profile-plan-badge {
    border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
    background: color-mix(in srgb, var(--brand) 9%, transparent);
    color: var(--brand);
    font-weight: 650;
}

.nav-count.nav-count {
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    font-weight: 500;
}

/* Risk banner: warm advisory strip with a hairline and warning rail. */
.risk-banner.risk-banner {
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--border));
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-md, 12px);
    background: var(--warning-soft);
    color: color-mix(in srgb, var(--warning) 62%, var(--ink));
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, .05));
}

.risk-banner.risk-banner .risk-icon {
    width: 22px;
    height: 22px;
    background: color-mix(in srgb, var(--warning) 22%, transparent);
    color: color-mix(in srgb, var(--warning) 75%, var(--ink));
    font-size: 12px;
}

.risk-banner.risk-banner a {
    color: color-mix(in srgb, var(--warning) 70%, var(--ink));
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--warning) 45%, transparent);
    text-underline-offset: 3px;
}

.offline-banner.offline-banner {
    border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border));
    border-radius: var(--radius-md, 12px);
    background: var(--warning-soft);
    color: color-mix(in srgb, var(--warning) 62%, var(--ink));
}

[data-theme="dark"] .risk-banner.risk-banner,
[data-theme="dark"] .offline-banner.offline-banner {
    color: color-mix(in srgb, var(--warning) 78%, var(--ink));
}

[data-theme="dark"] .risk-banner.risk-banner .risk-icon {
    color: var(--warning);
}

/* ---------------------------------------------------------------- */
/* 4. Tables                                                         */
/* ---------------------------------------------------------------- */

.table-scroll.table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--surface);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, .05));
}

.data-table.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.data-table.data-table th,
.data-table.data-table td {
    padding: 11px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
    text-align: left;
    vertical-align: middle;
}

.data-table.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs, 11px);
    font-weight: 650;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-strong, var(--border));
}

.data-table.data-table tbody td {
    font-variant-numeric: tabular-nums;
}

.data-table.data-table tbody tr {
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.data-table.data-table tbody tr:hover {
    background: color-mix(in srgb, var(--brand) 5%, transparent);
}

.data-table.data-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Party/organization list rows (a one-row table per record). */
.app-shell .party-record-table td,
.app-shell .party-record-table th {
    vertical-align: middle;
}

.app-shell .party-record-table tr[data-inline-party-row] {
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.app-shell .party-record-table tr[data-inline-party-row]:hover {
    background: color-mix(in srgb, var(--brand) 5%, transparent);
}

/* The "Updated …" cell reads as record metadata: mono, small, muted. */
.app-shell .party-record-table td:nth-of-type(4) {
    color: var(--muted);
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: var(--text-sm, 12.5px);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Landing plan comparison keeps the same table language. */
.comparison-table.comparison-table th,
.comparison-table.comparison-table td {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.comparison-table.comparison-table thead th {
    color: var(--muted);
    font-size: var(--text-xs, 11px);
    font-weight: 650;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------- */
/* 5. Cards, panels, empty states                                    */
/* ---------------------------------------------------------------- */

.app-shell .panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    background: var(--surface);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .06));
}

.app-shell .metric-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    background: var(--surface);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .06));
    transition:
        box-shadow var(--motion-base, 200ms) var(--ease-out, ease),
        transform var(--motion-base, 200ms) var(--ease-out, ease),
        border-color var(--motion-base, 200ms) var(--ease-out, ease);
}

.app-shell .panel-header h2 {
    color: var(--ink);
    font-family: var(--font-ui, "Instrument Sans", "Segoe UI", system-ui, sans-serif);
    font-size: var(--text-md, 15px);
    font-weight: 650;
    letter-spacing: -.015em;
}

.app-shell .panel-subtitle {
    color: var(--muted);
    font-size: var(--text-sm, 12.5px);
}

.app-shell .panel-header a {
    color: var(--brand);
    font-size: var(--text-sm, 12.5px);
    font-weight: 600;
}

.approval-card.approval-card,
.billing-plan-card.billing-plan-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    background: var(--surface);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .06));
}

/* Empty states: editorial serif title over a dashed, softly-washed ground. */
.app-shell .empty-state,
.app-shell :where(.library-state, .admin-state, .conflict-empty, .conflict-no-candidates, .conflict-error-state, .conflict-protected-state) {
    border: 1px dashed color-mix(in srgb, var(--border-strong, var(--border)) 80%, transparent);
    border-radius: var(--radius-lg, 16px);
    background:
        radial-gradient(120% 90% at 50% 0, color-mix(in srgb, var(--brand) 3%, transparent), transparent 60%),
        var(--surface);
}

.app-shell .empty-state h3,
.drafting-empty-state.drafting-empty-state h3 {
    font-family: var(--font-display, "Newsreader", Georgia, serif);
    font-optical-sizing: auto;
    font-size: var(--text-lg, 18px);
    font-weight: 550;
    letter-spacing: -.01em;
}

.app-shell .empty-state-icon {
    border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--brand) 8%, var(--surface));
    color: var(--brand);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, .05));
}

.app-shell .matter-empty-state,
.app-shell .matter-detail-state,
.app-shell .admin-empty-state,
.app-shell .admin-protected-state,
.app-shell .party-detail-empty {
    border: 1px dashed color-mix(in srgb, var(--border-strong, var(--border)) 80%, transparent);
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--subtle) 55%, var(--surface));
}

/* ---------------------------------------------------------------- */
/* 6. Overlays: dialogs, toasts, menus                               */
/* ---------------------------------------------------------------- */

@keyframes ds3-p-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ds3-p-dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ds3-p-sheet-in {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ds3-p-toast-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ds3-p-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-backdrop.modal-backdrop {
    padding: clamp(16px, 4vw, 36px);
    background: color-mix(in srgb, var(--ink) 42%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: ds3-p-fade var(--motion-base, 200ms) var(--ease-out, ease);
}

[data-theme="dark"] .modal-backdrop.modal-backdrop {
    background: color-mix(in srgb, var(--canvas) 62%, transparent);
}

.modal-backdrop .settings-modal {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-lg, 0 28px 80px rgba(0, 0, 0, .3));
    animation: ds3-p-dialog-in var(--motion-base, 200ms) var(--ease-out, ease);
    scrollbar-width: thin;
}

[data-theme="dark"] .modal-backdrop .settings-modal {
    border-color: var(--border-strong, var(--border));
}

.modal-backdrop .modal-header {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    padding-bottom: 16px;
}

.modal-backdrop .modal-header h2 {
    font-family: var(--font-display, "Newsreader", Georgia, serif);
    font-optical-sizing: auto;
    font-weight: 560;
    letter-spacing: -.015em;
}

.modal-backdrop .modal-header .eyebrow {
    color: var(--aurum, var(--muted));
    font-size: var(--text-xs, 11px);
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* A due legal reminder keeps its heavier, warning-railed presence. */
.reminder-backdrop.reminder-backdrop {
    background: color-mix(in srgb, var(--ink) 58%, transparent);
}

[data-theme="dark"] .reminder-backdrop.reminder-backdrop {
    background: color-mix(in srgb, var(--canvas) 76%, transparent);
}

.reminder-modal.reminder-modal {
    border-top: 4px solid var(--warning);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--warning) 22%, transparent),
        var(--shadow-lg, 0 28px 80px rgba(0, 0, 0, .3));
}

/* Toasts: raised slips that rise in from the corner. */
.toast.toast {
    align-items: flex-start;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-raised, var(--surface));
    color: var(--ink);
    box-shadow: var(--shadow-lg, 0 12px 30px rgba(0, 0, 0, .18));
    font-size: 13px;
    line-height: 1.5;
    animation: ds3-p-toast-in var(--motion-base, 200ms) var(--ease-out, ease);
}

.toast.toast .toast-dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}

.toast.toast[data-tone="success"] .toast-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent); }
.toast.toast[data-tone="error"] .toast-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.toast.toast[data-tone="warning"] .toast-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 18%, transparent); }

.toast.toast .toast-close {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    min-height: 28px;
    margin: -4px -4px -4px 0;
    border-radius: var(--radius-sm, 8px);
    color: var(--muted);
    transition:
        background-color var(--motion-fast, 120ms) var(--ease-out, ease),
        color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.toast.toast .toast-close:hover {
    background: var(--subtle);
    color: var(--ink);
}

/* Popover menus share one raised, hairlined language. */
.quick-create-menu.quick-create-menu,
.profile-menu.profile-menu,
.notification-panel.notification-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, .18));
    animation: ds3-p-menu-in var(--motion-fast, 120ms) var(--ease-out, ease);
    transform-origin: top right;
}

[data-theme="dark"] .quick-create-menu.quick-create-menu,
[data-theme="dark"] .profile-menu.profile-menu,
[data-theme="dark"] .notification-panel.notification-panel {
    border-color: var(--border-strong, var(--border));
    box-shadow:
        var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, .5)),
        0 0 40px -20px color-mix(in srgb, var(--brand) 25%, transparent);
}

.quick-create-item.quick-create-item,
.profile-menu-item.profile-menu-item {
    border-radius: var(--radius-sm, 8px);
    transition:
        background-color var(--motion-fast, 120ms) var(--ease-out, ease),
        color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.quick-create-item.quick-create-item:hover,
.quick-create-item.quick-create-item:focus-visible {
    border-color: transparent;
    background: color-mix(in srgb, var(--brand) 7%, transparent);
}

.quick-create-item.quick-create-item strong {
    font-weight: 600;
    letter-spacing: -.005em;
}

.profile-menu-item.profile-menu-item:hover,
.profile-menu-item.profile-menu-item:focus-visible {
    background: color-mix(in srgb, var(--brand) 7%, transparent);
}

.profile-menu-item.profile-menu-signout:hover,
.profile-menu-item.profile-menu-signout:focus-visible {
    background: var(--danger-soft);
    color: var(--danger);
}

.profile-menu.profile-menu :where(.profile-menu-identity, .profile-menu-plan, .profile-menu-footer) {
    border-color: color-mix(in srgb, var(--border) 75%, transparent);
}

.profile-menu-usage.profile-menu-usage {
    background: color-mix(in srgb, var(--border) 75%, transparent);
    border-bottom-color: color-mix(in srgb, var(--border) 75%, transparent);
}

.profile-menu-usage.profile-menu-usage div {
    background: var(--surface-raised, var(--surface));
}

.profile-menu-usage.profile-menu-usage strong {
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.notification-panel-header.notification-panel-header,
.notification-panel-footer.notification-panel-footer {
    border-color: color-mix(in srgb, var(--border) 75%, transparent);
}

.notification-item.notification-item {
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.notification-item.notification-item:hover {
    background: color-mix(in srgb, var(--brand) 5%, transparent);
}

.notification-meta.notification-meta {
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}

.notification-panel-footer.notification-panel-footer a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

/* Bottom sheets under 700px (covers the ≤640px contract and matches the
   existing app breakpoint so the behavior never splits mid-range). */
@media (max-width: 700px) {
    .modal-backdrop.modal-backdrop {
        place-items: end center;
        padding: 0;
    }

    .modal-backdrop .settings-modal {
        width: 100%;
        max-width: none;
        max-height: 92dvh;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: var(--radius-xl, 22px) var(--radius-xl, 22px) 0 0;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        animation: ds3-p-sheet-in var(--motion-slow, 350ms) var(--ease-out, ease);
    }

    .toast-host.toast-host {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------------------------------------------------------------- */
/* 7. kbd, code, icons, scrollbars, dividers, skeletons              */
/* ---------------------------------------------------------------- */

kbd,
.footer kbd,
.command-trigger kbd,
.modal-backdrop kbd {
    display: inline-block;
    min-width: 18px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--subtle);
    color: var(--ink);
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

code {
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: var(--text-sm, 12.5px);
    font-variant-numeric: tabular-nums;
}

.ui-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.chevron .ui-icon,
.caret .ui-icon {
    width: 13px;
    height: 13px;
}

/* Scrollbars: slim, recessed, quiet until hovered. */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--border-strong, var(--border)) 85%, transparent);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--muted) 60%, transparent);
    background-clip: padding-box;
}

.notification-panel-body.notification-panel-body,
.modal-backdrop .settings-modal,
.table-scroll.table-scroll {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--border-strong, var(--border)) 85%, transparent) transparent;
}

hr {
    height: 1px;
    margin: 18px 0;
    border: 0;
    background: color-mix(in srgb, var(--border) 80%, transparent);
}

/* Skeletons: a 1.8s shimmer sweep over a subtle ground. */
@keyframes ds3-p-shimmer {
    from { background-position: -160% 0; }
    to { background-position: 260% 0; }
}

.pricing-skeleton.pricing-skeleton {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    background:
        linear-gradient(100deg, transparent 36%, color-mix(in srgb, var(--surface-raised, var(--surface)) 70%, transparent) 50%, transparent 64%) var(--subtle);
    background-size: 220% 100%;
    animation: ds3-p-shimmer 1.8s var(--ease-out, ease) infinite;
}

/* ---------------------------------------------------------------- */
/* 8. Touch targets, density, motion, forced colors                  */
/* ---------------------------------------------------------------- */

@media (max-width: 767px) {
    .primary-button.primary-button,
    .secondary-button.secondary-button,
    .quiet-button.quiet-button,
    .create-button.create-button,
    .auth-submit.auth-submit,
    .icon-button.icon-button,
    .notification-button.notification-button,
    .more-button.more-button,
    .close-banner.close-banner,
    .toast.toast .toast-close,
    .quick-create-item.quick-create-item,
    .profile-menu-item.profile-menu-item,
    .segmented-controls.segmented-controls button {
        min-height: 44px;
    }

    .icon-button.icon-button,
    .notification-button.notification-button,
    .more-button.more-button {
        min-width: 44px;
    }

    .app-shell :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
    .modal-backdrop :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
    .auth-shell .auth-form input {
        min-height: 44px;
    }

    .app-shell :where(input[type="checkbox"], input[type="radio"]),
    .modal-backdrop :where(input[type="checkbox"], input[type="radio"]) {
        width: 20px;
        height: 20px;
        min-height: 20px;
    }
}

[data-density="compact"] .primary-button.primary-button,
[data-density="compact"] .secondary-button.secondary-button,
[data-density="compact"] .quiet-button.quiet-button,
[data-density="compact"] .create-button.create-button {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

[data-density="compact"] .icon-button.icon-button {
    min-width: 32px;
    min-height: 32px;
}

[data-density="compact"] .app-shell :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
[data-density="compact"] .modal-backdrop :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
    min-height: 36px;
}

[data-density="compact"] .data-table.data-table th,
[data-density="compact"] .data-table.data-table td {
    padding: 7px 12px;
}

[data-density="compact"] .app-shell .panel {
    padding: 16px;
}

/* Foundation kills motion globally; this is the local belt-and-braces so the
   primitives never animate even if loaded standalone. */
@media (prefers-reduced-motion: reduce) {
    .modal-backdrop.modal-backdrop,
    .modal-backdrop .settings-modal,
    .toast.toast,
    .quick-create-menu.quick-create-menu,
    .profile-menu.profile-menu,
    .notification-panel.notification-panel,
    .pricing-skeleton.pricing-skeleton {
        animation: none;
    }
}

[data-reduced-motion="true"] .modal-backdrop.modal-backdrop,
[data-reduced-motion="true"] .modal-backdrop .settings-modal,
[data-reduced-motion="true"] .toast.toast,
[data-reduced-motion="true"] .quick-create-menu.quick-create-menu,
[data-reduced-motion="true"] .profile-menu.profile-menu,
[data-reduced-motion="true"] .notification-panel.notification-panel,
[data-reduced-motion="true"] .pricing-skeleton.pricing-skeleton {
    animation: none;
}

/* Meaning-bearing color must survive forced-colors mode as geometry. */
@media (forced-colors: active) {
    .primary-button.primary-button,
    .secondary-button.secondary-button,
    .quiet-button.quiet-button,
    .create-button.create-button,
    .auth-submit.auth-submit,
    .icon-button.icon-button,
    .status-pill.status-pill,
    .approval-status.approval-status,
    .app-shell .matter-status-pill,
    .app-shell .party-status-pill,
    .toast.toast,
    .quick-create-menu.quick-create-menu,
    .profile-menu.profile-menu,
    .notification-panel.notification-panel {
        border: 1px solid ButtonText;
    }

    .main :is(a, button):focus-visible,
    .app-shell :is(a, button, [tabindex]):focus-visible,
    .auth-shell :is(a, button):focus-visible,
    :is(.modal-backdrop, .toast-host, .quick-create-menu, .profile-menu, .notification-panel) :is(a, button):focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}

/* ─────────── DS3 section: f3-landing-auth-dashboard.css ─────────── */
/* ===== DS3 · Landing, Auth, Dashboard ===== */
/* Appended after all legacy CSS. Overrides use equal-or-higher specificity than
   the legacy rule they replace (legacy selector text copied verbatim where
   needed). Tokens only; both themes via [data-theme="dark"]; motion always
   runs on var(--motion-*) durations or is explicitly disabled under
   [data-reduced-motion="true"] and prefers-reduced-motion. */

/* ---------------------------------------------------------------- */
/* Keyframes (ds3-h- prefix)                                        */
/* ---------------------------------------------------------------- */

@keyframes ds3-h-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ds3-h-aurora-a {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(48px, 26px, 0) scale(1.12);
    }
}

@keyframes ds3-h-aurora-b {
    from {
        transform: translate3d(0, 0, 0) scale(1.08);
    }

    to {
        transform: translate3d(-42px, -30px, 0) scale(1);
    }
}

@keyframes ds3-h-shimmer {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@keyframes ds3-h-pulse {
    50% {
        opacity: .45;
    }
}

/* ================================================================ */
/* 1 · PUBLIC LANDING                                               */
/* ================================================================ */

/* --- Ambient ground: chancery paper with sapphire + aurum washes --- */
.landing-shell {
    background:
        radial-gradient(1100px 720px at 88% -8%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%),
        radial-gradient(940px 640px at -12% 42%, color-mix(in srgb, var(--aurum) 6%, transparent), transparent 70%),
        var(--canvas);
    color: var(--ink);
}

[data-theme="dark"] .landing-shell {
    background:
        radial-gradient(1100px 720px at 88% -8%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%),
        radial-gradient(940px 640px at -12% 42%, color-mix(in srgb, var(--aurum) 5%, transparent), transparent 70%),
        var(--canvas);
}

/* --- Header: translucent chancery bar with meridian hairline --- */
.landing-header {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.landing-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--aurum) 55%, transparent) 50%, transparent 92%);
    pointer-events: none;
}

.landing-brand {
    gap: 10px;
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.landing-header nav a,
.landing-footer a {
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 550;
    transition: color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.landing-header nav a:hover,
.landing-header nav a:focus-visible,
.landing-footer a:hover,
.landing-footer a:focus-visible {
    color: var(--ink);
}

.landing-header nav a::after {
    background: var(--aurum);
}

.mobile-nav-toggle,
.language-button {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface);
    color: var(--ink);
    transition: border-color var(--motion-fast, 120ms) var(--ease-out, ease), background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.mobile-nav-toggle:hover,
.language-button:hover {
    border-color: var(--border-strong);
    background: var(--subtle);
}

/* --- Hero: editorial serif with animated aurora depth --- */
.landing-hero {
    position: relative;
    padding-top: clamp(64px, 9vw, 112px);
    padding-bottom: clamp(64px, 9vw, 112px);
}

.landing-hero::before,
.landing-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(84px);
    pointer-events: none;
}

.landing-hero::before {
    width: min(560px, 62vw);
    height: min(560px, 62vw);
    top: -170px;
    left: -150px;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%);
    animation: ds3-h-aurora-a 26s ease-in-out infinite alternate;
}

.landing-hero::after {
    width: min(480px, 56vw);
    height: min(480px, 56vw);
    right: -130px;
    bottom: -160px;
    background: radial-gradient(circle, color-mix(in srgb, var(--aurum) 15%, transparent), transparent 70%);
    animation: ds3-h-aurora-b 32s ease-in-out infinite alternate;
}

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

.hero-copy {
    animation: ds3-h-rise var(--motion-slow, 350ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)) backwards;
}

.landing-hero .workflow-illustration {
    animation: ds3-h-rise var(--motion-slow, 350ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)) 120ms backwards;
}

.landing-hero h1 {
    margin: 16px 0 22px;
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    font-optical-sizing: auto;
    font-size: clamp(2.55rem, 5.2vw, 4.4rem);
    font-weight: 540;
    letter-spacing: -.02em;
    line-height: 1.06;
    text-wrap: balance;
    color: var(--ink);
}

.landing-lede {
    color: var(--muted);
    font-size: clamp(1.05rem, 1.2vw, 1.18rem);
    line-height: 1.65;
}

.hero-note {
    color: var(--muted);
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 12px;
    letter-spacing: .01em;
}

.status-dot {
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
    animation: ds3-h-pulse 2.6s ease-in-out infinite;
}

/* --- Eyebrows: aurum, engraved --- */
.eyebrow {
    color: var(--aurum);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* --- Hero illustration: raised chancery card --- */
.workflow-illustration {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl, 22px);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-lg, var(--shadow-md));
}

.workflow-illustration::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--aurum) 65%, transparent), transparent);
}

.workflow-illustration li:not(:last-child)::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 30%, var(--border)), var(--border));
}

.workflow-illustration li > span,
.workflow-steps li > span,
.principle-index,
.feature-number {
    color: var(--aurum);
    font: 600 11px/1.4 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .06em;
}

.illustration-label,
.feature-kicker,
.control-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

/* --- Principles strip --- */
.principles > div,
.feature-card,
.pricing-card,
.comparison-cards article {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-sm);
}

.principles > div {
    position: relative;
    transition: border-color var(--motion-base, 200ms) var(--ease-out, ease), box-shadow var(--motion-base, 200ms) var(--ease-out, ease);
    animation: ds3-h-rise var(--motion-slow, 350ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)) backwards;
}

.principles > div:nth-child(1) { animation-delay: 160ms; }
.principles > div:nth-child(2) { animation-delay: 200ms; }
.principles > div:nth-child(3) { animation-delay: 240ms; }
.principles > div:nth-child(4) { animation-delay: 280ms; }

.principles > div:hover {
    border-color: color-mix(in srgb, var(--brand) 22%, var(--border));
    box-shadow: var(--shadow-md);
}

/* --- Section headings: editorial serif --- */
.section-intro h2,
.security-band h2,
.responsible-ai-band h2,
.final-cta h2 {
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    font-optical-sizing: auto;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-weight: 540;
    letter-spacing: -.015em;
    line-height: 1.12;
    text-wrap: balance;
}

.section-intro h2 span {
    color: var(--brand);
    font-style: italic;
}

.section-intro > p:last-child,
.security-inner > div:first-child > p:last-of-type {
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.65;
}

/* --- Feature cards --- */
.feature-card {
    padding: 28px;
    transition: border-color var(--motion-base, 200ms) var(--ease-out, ease), box-shadow var(--motion-base, 200ms) var(--ease-out, ease), transform var(--motion-base, 200ms) var(--ease-out, ease);
}

.feature-card:hover,
.pricing-card:hover {
    border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.feature-card-primary {
    border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
    background:
        radial-gradient(560px 300px at 100% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%),
        var(--surface-raised, var(--surface));
}

.feature-card h3,
.proof-copy h3 {
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    font-size: 1.3rem;
    font-weight: 560;
    letter-spacing: -.01em;
}

.feature-card a,
.landing-text-link {
    color: var(--brand);
    font-weight: 650;
    transition: color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.feature-card a:hover,
.landing-text-link:hover {
    color: var(--brand-hover, var(--brand));
}

/* --- Workflow band: parchment interlude --- */
.workflow-section {
    background: color-mix(in srgb, var(--aurum) 7%, var(--canvas));
    border-top: 1px solid color-mix(in srgb, var(--aurum) 18%, var(--border));
    border-bottom: 1px solid color-mix(in srgb, var(--aurum) 18%, var(--border));
}

[data-theme="dark"] .workflow-section {
    background: color-mix(in srgb, var(--aurum) 6%, var(--surface));
    border-top-color: color-mix(in srgb, var(--aurum) 16%, var(--border));
    border-bottom-color: color-mix(in srgb, var(--aurum) 16%, var(--border));
}

.workflow-steps li:not(:last-child)::after {
    background: color-mix(in srgb, var(--aurum) 35%, var(--border));
}

.workflow-steps li > span {
    border: 1px solid color-mix(in srgb, var(--aurum) 45%, var(--border));
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-xs);
}

.workflow-steps small {
    color: var(--muted);
}

.workflow-footnote {
    color: var(--success);
    font-weight: 650;
}

/* --- Proof rows and product mockups --- */
.proof-copy li {
    color: var(--muted);
    line-height: 1.62;
}

.proof-copy ul li::marker {
    color: var(--aurum);
}

.product-mockup {
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--ink));
    border-radius: var(--radius-lg, 16px);
    background:
        radial-gradient(620px 320px at 100% 0%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%),
        linear-gradient(165deg, color-mix(in srgb, var(--brand) 22%, var(--ink)), var(--ink));
    color: var(--canvas);
    box-shadow: var(--shadow-lg, var(--shadow-md));
}

[data-theme="dark"] .product-mockup {
    border-color: var(--border-strong);
    background:
        radial-gradient(620px 320px at 100% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
        linear-gradient(165deg, color-mix(in srgb, var(--brand) 12%, var(--surface-raised, var(--surface))), var(--surface));
}

/* --- Responsible AI band --- */
.responsible-ai-band {
    background: color-mix(in srgb, var(--brand) 7%, var(--canvas));
    border-top: 1px solid color-mix(in srgb, var(--brand) 14%, var(--border));
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 14%, var(--border));
}

[data-theme="dark"] .responsible-ai-band {
    background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}

.responsible-ai-band p {
    color: color-mix(in srgb, var(--ink) 76%, var(--muted));
    line-height: 1.65;
}

.ai-boundaries span {
    padding: 13px 16px;
    border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--border));
    border-radius: var(--radius-md, 12px);
    background: var(--surface-raised, var(--surface));
    color: var(--brand);
    font-weight: 650;
    box-shadow: var(--shadow-xs);
}

/* --- Security band: midnight chambers moment --- */
.security-band {
    background:
        radial-gradient(900px 480px at 12% 0%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 65%),
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, var(--ink)), var(--ink));
    color: var(--canvas);
}

.security-band h2 {
    color: var(--canvas);
}

.security-band .eyebrow,
.security-band .landing-text-link {
    color: color-mix(in srgb, var(--aurum) 55%, var(--canvas));
}

.security-inner > div:first-child > p:last-of-type,
.security-list p {
    color: color-mix(in srgb, var(--canvas) 68%, transparent);
}

.security-list > div {
    border-top: 1px solid color-mix(in srgb, var(--canvas) 18%, transparent);
}

.security-list > div > span {
    color: color-mix(in srgb, var(--aurum) 60%, var(--canvas));
    font: 600 11px var(--font-mono, ui-monospace, monospace);
    letter-spacing: .08em;
}

[data-theme="dark"] .security-band {
    background:
        radial-gradient(900px 480px at 12% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 65%),
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, var(--surface)), var(--canvas));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--ink);
}

[data-theme="dark"] .security-band h2 {
    color: var(--ink);
}

[data-theme="dark"] .security-band .eyebrow,
[data-theme="dark"] .security-band .landing-text-link {
    color: var(--aurum);
}

[data-theme="dark"] .security-inner > div:first-child > p:last-of-type,
[data-theme="dark"] .security-list p {
    color: var(--muted);
}

[data-theme="dark"] .security-list > div {
    border-top-color: var(--border);
}

[data-theme="dark"] .security-list > div > span {
    color: var(--aurum);
}

/* --- Pricing --- */
.segmented-controls {
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px);
    background: var(--subtle);
}

.segmented-controls button {
    border-radius: var(--radius-pill, 999px);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease), color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.segmented-controls button:hover {
    color: var(--ink);
}

.segmented-controls button[aria-pressed="true"] {
    background: var(--brand);
    color: var(--surface);
    box-shadow: var(--shadow-xs);
}

.pricing-status {
    color: var(--muted);
    font-size: 13px;
}

.pricing-card {
    position: relative;
    overflow: hidden;
    padding: 26px;
    transition: border-color var(--motion-base, 200ms) var(--ease-out, ease), box-shadow var(--motion-base, 200ms) var(--ease-out, ease), transform var(--motion-base, 200ms) var(--ease-out, ease);
}

.pricing-card.is-featured {
    border: 1px solid color-mix(in srgb, var(--brand) 55%, var(--border));
    padding: 26px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent), var(--shadow-md);
}

.pricing-card.is-featured::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--brand), var(--aurum));
}

.pricing-card h3 {
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    font-size: 1.35rem;
    font-weight: 560;
}

.pricing-card > strong {
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    font-size: 2.1rem;
    font-weight: 540;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -.02em;
    color: var(--ink);
}

.plan-label,
.plan-badge {
    color: var(--aurum);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.plan-badge {
    padding: 3px 9px;
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--brand) 8%, var(--surface));
    color: var(--brand);
}

.plan-badge:empty {
    display: none;
}

.plan-points {
    color: var(--muted);
}

.plan-points li::marker {
    color: var(--aurum);
}

.pricing-skeleton {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    background-color: var(--subtle);
    background-image: linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--surface-raised, var(--surface)) 65%, transparent) 50%, transparent 62%);
    background-size: 200% 100%;
    animation: ds3-h-shimmer 1.8s linear infinite;
}

.pricing-note {
    color: var(--muted);
}

.comparison-wrap {
    overflow-x: auto;
}

.comparison-table {
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-xs);
}

.comparison-table th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.comparison-table tbody th {
    color: var(--ink);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

.comparison-wrap > h3 {
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    font-size: 1.25rem;
    font-weight: 560;
}

/* --- FAQ --- */
.faq-list {
    border-top: 1px solid var(--border);
}

.faq-item {
    border-bottom: 1px solid var(--border);
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.faq-item button {
    color: var(--ink);
    font-size: 15px;
    font-weight: 620;
    transition: color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.faq-item button:hover {
    color: var(--brand);
}

.faq-item button::after {
    content: '+';
    color: var(--aurum);
    font-size: 22px;
    font-weight: 400;
    transition: transform var(--motion-base, 200ms) var(--ease-out, ease);
}

.faq-item button[aria-expanded="true"]::after {
    content: '−';
}

.faq-item [id] {
    color: var(--muted);
    line-height: 1.65;
}

/* --- Final CTA: a centered closing plate --- */
.final-cta {
    position: relative;
    border-top: 0;
    padding-top: clamp(72px, 9vw, 112px);
    padding-bottom: clamp(72px, 9vw, 112px);
    text-align: center;
}

.final-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: min(420px, 70%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--aurum), transparent);
}

.final-cta h2 {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.final-cta .landing-actions {
    justify-content: center;
}

/* --- Footer --- */
.landing-footer {
    border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    padding-top: 36px;
    color: var(--muted);
}

.landing-footer strong {
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    font-size: 15px;
    font-weight: 560;
    color: var(--ink);
}

/* --- Focus: token ring replaces hardcoded legacy outline --- */
.landing-header a:focus-visible,
.landing-header button:focus-visible,
.landing-shell a:focus-visible,
.landing-shell button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* --- Landing responsive refinements --- */
@media (max-width: 767px) {
    .landing-header nav {
        border: 1px solid var(--border);
        border-top: 0;
        border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px);
        background: var(--surface-raised, var(--surface));
        box-shadow: var(--shadow-lg, var(--shadow-md));
    }

    .landing-header nav a {
        font-size: 15px;
    }

    .landing-hero::before {
        top: -120px;
        left: -120px;
    }

    .final-cta {
        text-align: left;
    }

    .final-cta::before {
        left: 0;
        width: min(320px, 80%);
        transform: none;
        background: linear-gradient(90deg, var(--aurum), transparent);
    }

    .final-cta .landing-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .landing-hero h1 {
        font-size: clamp(2.1rem, 10vw, 2.7rem);
    }

    .feature-card,
    .pricing-card,
    .pricing-card.is-featured,
    .principles > div {
        padding: 20px;
    }

    .landing-section,
    .workflow-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

/* ================================================================ */
/* 2 · AUTH & SUBSCRIPTIONS                                         */
/* ================================================================ */

/* --- Shell: stronger animated ambient permitted here --- */
.auth-shell {
    background:
        radial-gradient(circle at 10% 6%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 34rem),
        radial-gradient(circle at 92% 92%, color-mix(in srgb, var(--aurum) 8%, transparent), transparent 30rem),
        var(--canvas);
}

[data-theme="dark"] .auth-shell {
    background:
        radial-gradient(circle at 10% 6%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 34rem),
        radial-gradient(circle at 92% 92%, color-mix(in srgb, var(--aurum) 7%, transparent), transparent 30rem),
        var(--canvas);
}

.auth-shell--split {
    background: var(--canvas);
}

/* --- Left showcase: midnight chambers, both themes --- */
.auth-showcase {
    background:
        radial-gradient(1200px 600px at -10% -20%, color-mix(in srgb, var(--brand) 46%, transparent) 0%, transparent 55%),
        radial-gradient(900px 700px at 110% 120%, color-mix(in srgb, var(--aurum) 26%, transparent) 0%, transparent 55%),
        linear-gradient(155deg, color-mix(in srgb, var(--brand) 22%, var(--ink)) 0%, var(--ink) 60%);
    color: var(--canvas);
}

.auth-showcase::after {
    background-image:
        linear-gradient(color-mix(in srgb, var(--canvas) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--canvas) 5%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
}

[data-theme="dark"] .auth-showcase {
    background:
        radial-gradient(1200px 600px at -10% -20%, color-mix(in srgb, var(--brand) 20%, transparent) 0%, transparent 55%),
        radial-gradient(900px 700px at 110% 120%, color-mix(in srgb, var(--aurum) 12%, transparent) 0%, transparent 55%),
        linear-gradient(155deg, color-mix(in srgb, var(--brand) 10%, var(--surface-raised, var(--surface))) 0%, var(--canvas) 62%);
    color: var(--ink);
}

[data-theme="dark"] .auth-showcase::after {
    background-image:
        linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
}

.auth-showcase-glow--a {
    background: color-mix(in srgb, var(--brand) 80%, transparent);
}

.auth-showcase-glow--b {
    background: color-mix(in srgb, var(--aurum) 70%, transparent);
}

[data-theme="dark"] .auth-showcase-glow--a {
    background: color-mix(in srgb, var(--brand) 40%, transparent);
}

[data-theme="dark"] .auth-showcase-glow--b {
    background: color-mix(in srgb, var(--aurum) 32%, transparent);
}

.auth-showcase-brand {
    color: var(--canvas);
}

[data-theme="dark"] .auth-showcase-brand {
    color: var(--ink);
}

.auth-showcase-title {
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    font-optical-sizing: auto;
    font-size: clamp(2.2rem, 3.6vw, 3.4rem);
    font-weight: 540;
    letter-spacing: -.015em;
    line-height: 1.1;
    color: var(--canvas);
}

.auth-showcase-title em {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: color-mix(in srgb, var(--aurum) 55%, var(--canvas));
    font-style: italic;
}

[data-theme="dark"] .auth-showcase-title {
    color: var(--ink);
}

[data-theme="dark"] .auth-showcase-title em {
    color: var(--aurum);
}

.auth-showcase-lede {
    color: color-mix(in srgb, var(--canvas) 72%, transparent);
    line-height: 1.65;
}

[data-theme="dark"] .auth-showcase-lede {
    color: var(--muted);
}

.auth-showcase-points li {
    border: 1px solid color-mix(in srgb, var(--canvas) 14%, transparent);
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--canvas) 6%, transparent);
    color: color-mix(in srgb, var(--canvas) 66%, transparent);
    transition: border-color var(--motion-base, 200ms) var(--ease-out, ease), background-color var(--motion-base, 200ms) var(--ease-out, ease);
}

.auth-showcase-points li:hover {
    border-color: color-mix(in srgb, var(--canvas) 26%, transparent);
    background: color-mix(in srgb, var(--canvas) 9%, transparent);
}

.auth-showcase-points strong {
    color: var(--canvas);
}

.auth-showcase-point-icon {
    color: color-mix(in srgb, var(--aurum) 55%, var(--canvas));
}

[data-theme="dark"] .auth-showcase-points li {
    border-color: var(--border);
    background: color-mix(in srgb, var(--surface-raised, var(--surface)) 65%, transparent);
    color: var(--muted);
}

[data-theme="dark"] .auth-showcase-points li:hover {
    border-color: var(--border-strong);
    background: var(--surface-raised, var(--surface));
}

[data-theme="dark"] .auth-showcase-points strong {
    color: var(--ink);
}

[data-theme="dark"] .auth-showcase-point-icon {
    color: var(--aurum);
}

.auth-showcase-badge {
    border: 1px solid color-mix(in srgb, var(--canvas) 22%, transparent);
    border-radius: var(--radius-pill, 999px);
    color: color-mix(in srgb, var(--canvas) 80%, transparent);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
}

[data-theme="dark"] .auth-showcase-badge {
    border-color: var(--border-strong);
    color: var(--muted);
}

/* --- Right panel and card --- */
.auth-panel {
    background:
        radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--brand) 6%, transparent) 0%, transparent 60%),
        var(--canvas);
}

[data-theme="dark"] .auth-panel {
    background:
        radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--brand) 10%, transparent) 0%, transparent 60%),
        var(--canvas);
}

.auth-shell .auth-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl, 22px);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-lg, var(--shadow-md));
    animation: ds3-h-rise var(--motion-slow, 350ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)) backwards;
}

.auth-panel .auth-card {
    border: 1px solid var(--border);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-lg, var(--shadow-md));
}

[data-theme="dark"] .auth-panel .auth-card {
    border-color: var(--border);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-lg, var(--shadow-md));
}

.auth-panel .auth-card::before {
    height: 2px;
    border-radius: var(--radius-xl, 22px) var(--radius-xl, 22px) 0 0;
    background: linear-gradient(90deg, transparent 4%, var(--brand) 38%, var(--aurum) 62%, transparent 96%);
    opacity: 1;
}

[data-theme="dark"] .auth-panel .auth-card::before {
    background: linear-gradient(90deg, transparent 4%, var(--brand) 38%, var(--aurum) 62%, transparent 96%);
}

.auth-shell .auth-card h1 {
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    font-optical-sizing: auto;
    font-size: clamp(1.65rem, 2.6vw, 2rem);
    font-weight: 560;
    letter-spacing: -.01em;
    line-height: 1.15;
    color: var(--ink);
}

[data-theme="dark"] .auth-panel h1,
[data-theme="dark"] .auth-field-label {
    color: var(--ink);
}

.auth-shell .auth-card > .muted {
    color: var(--muted);
    line-height: 1.6;
}

[data-theme="dark"] .auth-panel .auth-card > .muted,
[data-theme="dark"] .auth-field-hint,
[data-theme="dark"] .auth-field-note,
[data-theme="dark"] .auth-security,
[data-theme="dark"] .auth-status {
    color: var(--muted);
}

/* --- Fields --- */
.auth-field-label {
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
}

.auth-shell .auth-form input {
    min-height: 46px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface);
    color: var(--ink);
    box-shadow: none;
    transition: border-color var(--motion-fast, 120ms) var(--ease-out, ease), box-shadow var(--motion-fast, 120ms) var(--ease-out, ease), background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.auth-shell .auth-input-wrap input {
    padding-left: 40px;
}

.auth-shell .auth-input-wrap input:hover {
    border-color: var(--border-strong);
    background: var(--surface-raised, var(--surface));
}

.auth-shell .auth-form input:focus {
    border-color: var(--brand);
    background: var(--surface-raised, var(--surface));
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent);
}

[data-theme="dark"] .auth-shell .auth-form input {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--ink);
    box-shadow: none;
}

[data-theme="dark"] .auth-shell .auth-input-wrap input:hover {
    border-color: var(--border-strong);
    background: var(--surface-raised, var(--surface));
}

[data-theme="dark"] .auth-shell .auth-form input:focus {
    border-color: var(--brand);
    background: var(--surface-raised, var(--surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 32%, transparent), 0 0 18px color-mix(in srgb, var(--brand) 18%, transparent);
}

.auth-shell .auth-form input::placeholder {
    color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.auth-input-icon {
    color: var(--muted);
}

[data-theme="dark"] .auth-input-icon {
    color: var(--muted);
}

.auth-input-wrap:focus-within .auth-input-icon {
    color: var(--brand);
}

[data-theme="dark"] .auth-input-wrap:focus-within .auth-input-icon {
    color: var(--brand);
}

.auth-reveal {
    color: var(--muted);
    font-weight: 600;
    border-radius: var(--radius-sm, 8px);
}

.auth-reveal:hover {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 8%, transparent);
}

[data-theme="dark"] .auth-reveal:hover {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 14%, transparent);
}

.auth-field-note {
    color: var(--muted);
    font-size: 12px;
}

/* --- Submit --- */
.auth-shell .auth-submit {
    min-height: 50px;
    border: 1px solid color-mix(in srgb, var(--brand) 80%, var(--ink));
    border-radius: var(--radius-md, 12px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, var(--surface)), var(--brand));
    color: var(--surface);
    font-weight: 650;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 22%, transparent), var(--shadow-sm);
    transition: filter var(--motion-fast, 120ms) var(--ease-out, ease), box-shadow var(--motion-fast, 120ms) var(--ease-out, ease), transform var(--motion-fast, 120ms) var(--ease-out, ease);
}

.auth-shell .auth-submit:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-hover, var(--brand)) 88%, var(--surface)), var(--brand-hover, var(--brand)));
    filter: brightness(1.04);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 22%, transparent), var(--shadow-md);
}

[data-theme="dark"] .auth-submit {
    border-color: color-mix(in srgb, var(--brand) 60%, var(--canvas));
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 90%, var(--ink)), var(--brand));
    color: var(--canvas);
}

.auth-submit-arrow {
    transition: transform var(--motion-base, 200ms) var(--ease-spring, ease);
}

/* --- Divider, OAuth, meta --- */
.auth-divider {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    background: var(--border);
}

.auth-oauth .secondary-button {
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    transition: border-color var(--motion-fast, 120ms) var(--ease-out, ease), box-shadow var(--motion-fast, 120ms) var(--ease-out, ease), background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.auth-oauth .secondary-button:hover {
    border-color: var(--border-strong);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .auth-oauth .secondary-button {
    border-color: var(--border);
    background: var(--surface-raised, var(--surface));
    color: var(--ink);
}

[data-theme="dark"] .auth-oauth .secondary-button:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.auth-status {
    color: var(--muted);
    line-height: 1.55;
}

.auth-status[data-state="error"] {
    color: var(--danger);
}

.auth-switch a {
    color: var(--brand);
    font-weight: 650;
}

[data-theme="dark"] .auth-switch a {
    color: var(--brand);
}

.auth-security {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

[data-theme="dark"] .auth-security {
    border-top-color: var(--border);
}

/* --- OTP step --- */
.auth-otp-intro {
    color: var(--muted);
    line-height: 1.6;
}

.auth-form input[autocomplete="one-time-code"] {
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .32em;
    font-variant-numeric: tabular-nums;
}

.auth-otp-resend {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
}

.auth-otp-resend:hover {
    border-color: var(--border-strong);
    background: var(--subtle);
}

/* --- Subscriptions (plan choice) --- */
.auth-card.subscription-choice {
    width: min(100%, 1020px);
}

.subscription-choice .pricing-grid {
    margin-top: 26px;
}

.pricing-card.selected {
    border-color: color-mix(in srgb, var(--brand) 60%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 35%, transparent), var(--shadow-md);
}

.subscription-rails {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .subscription-choice .pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================ */
/* 3 · DASHBOARD                                                    */
/* ================================================================ */

/* --- Page heading with meridian rule --- */
.page-heading {
    position: relative;
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.page-heading::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--aurum) 60%, transparent) 24%, color-mix(in srgb, var(--aurum) 60%, transparent) 76%, transparent);
    pointer-events: none;
}

.page-heading h1 {
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    font-optical-sizing: auto;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 540;
    letter-spacing: -.015em;
    line-height: 1.1;
    color: var(--ink);
}

.page-heading .eyebrow {
    color: var(--aurum);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.page-heading .muted {
    color: var(--muted);
    font-size: 14px;
}

/* --- Metric cards: staggered load-in, aurum accent --- */
.metric-grid {
    gap: 16px;
}

.metric-card {
    min-height: 150px;
    padding: 20px 22px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-sm);
    transition: border-color var(--motion-base, 200ms) var(--ease-out, ease), box-shadow var(--motion-base, 200ms) var(--ease-out, ease), transform var(--motion-base, 200ms) var(--ease-out, ease);
}

.metric-card::before {
    inset: 0 auto auto 0;
    width: 44px;
    height: 2px;
    background: linear-gradient(90deg, var(--aurum), color-mix(in srgb, var(--aurum) 20%, transparent));
    opacity: 1;
    transition: width var(--motion-slow, 350ms) var(--ease-out, ease);
}

.metric-card:hover {
    border-color: color-mix(in srgb, var(--brand) 22%, var(--border));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.metric-card:hover::before {
    width: 100%;
    opacity: 1;
}

.metric-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.metric-value {
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    font-optical-sizing: auto;
    font-size: 38px;
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -.01em;
    color: var(--ink);
}

.metric-note {
    color: var(--muted);
    font-size: 12.5px;
}

.metric-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm, 8px);
}

.metric-icon.blue {
    background: var(--info-soft, var(--brand-soft, var(--subtle)));
    color: var(--info, var(--brand));
}

.metric-icon.purple {
    background: color-mix(in srgb, var(--brand) 10%, var(--surface));
    color: var(--brand);
}

.metric-icon.amber {
    background: var(--warning-soft);
    color: var(--warning);
}

.metric-icon.green {
    background: var(--success-soft);
    color: var(--success);
}

/* Staggered dashboard entrance (re-runs when the state region re-renders). */
[data-dashboard-state] .metric-card,
[data-dashboard-state] .panel {
    animation: ds3-h-rise var(--motion-slow, 350ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)) backwards;
}

[data-dashboard-state] .metric-card:nth-child(1) { animation-delay: 0ms; }
[data-dashboard-state] .metric-card:nth-child(2) { animation-delay: 40ms; }
[data-dashboard-state] .metric-card:nth-child(3) { animation-delay: 80ms; }
[data-dashboard-state] .metric-card:nth-child(4) { animation-delay: 120ms; }
[data-dashboard-state] .dashboard-grid .panel:nth-child(1) { animation-delay: 160ms; }
[data-dashboard-state] .dashboard-grid .panel:nth-child(2) { animation-delay: 200ms; }
[data-dashboard-state] .lower-grid .panel:nth-child(1) { animation-delay: 240ms; }
[data-dashboard-state] .lower-grid .panel:nth-child(2) { animation-delay: 280ms; }

/* --- Panels --- */
.dashboard-grid,
.lower-grid {
    gap: 16px;
}

.panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-sm);
    transition: border-color var(--motion-base, 200ms) var(--ease-out, ease);
}

.panel:hover {
    border-color: color-mix(in srgb, var(--brand) 14%, var(--border));
}

.panel-header {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.panel-header h2 {
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.01em;
}

.panel-subtitle {
    color: var(--muted);
    font-size: 12.5px;
}

.panel-header a {
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 650;
    transition: color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.panel-header a:hover {
    color: var(--brand-hover, var(--brand));
}

/* --- Agenda --- */
.agenda-item {
    border-radius: var(--radius-sm, 8px);
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.agenda-item:hover {
    background: color-mix(in srgb, var(--brand) 5%, transparent);
}

.agenda-item time {
    color: var(--ink);
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.agenda-item p {
    color: var(--muted);
}

.agenda-line {
    border-radius: var(--radius-pill, 999px);
}

.blue-line {
    background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 35%, transparent));
}

.amber-line {
    background: linear-gradient(180deg, var(--aurum), color-mix(in srgb, var(--aurum) 35%, transparent));
}

.agenda-tag {
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: var(--radius-pill, 999px);
    background: var(--subtle);
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
}

/* --- Priority work --- */
.work-item {
    border-radius: var(--radius-sm, 8px);
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.work-item:hover {
    background: color-mix(in srgb, var(--brand) 5%, transparent);
}

.work-item p {
    color: var(--muted);
}

.work-item .check {
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm, 8px);
    transition: border-color var(--motion-fast, 120ms) var(--ease-out, ease), background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.work-item .check:hover {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.priority {
    border-radius: var(--radius-pill, 999px);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
}

.priority.urgent {
    background: var(--danger-soft);
    color: var(--danger);
}

.priority.high {
    background: var(--warning-soft);
    color: var(--warning);
}

.priority.normal {
    background: color-mix(in srgb, var(--brand) 9%, var(--surface));
    color: var(--brand);
}

.priority.medium {
    background: var(--warning-soft);
    color: var(--warning);
}

.priority.low {
    background: var(--subtle);
    color: var(--muted);
}

/* --- Recent records --- */
.recent-record {
    border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
    border-radius: 0;
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.recent-record:hover {
    background: color-mix(in srgb, var(--brand) 5%, transparent);
}

.recent-record strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.recent-record p {
    color: var(--muted);
    font-size: 12px;
}

.record-icon {
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: var(--radius-sm, 8px);
    font-weight: 700;
}

.record-icon.doc {
    background: color-mix(in srgb, var(--brand) 9%, var(--surface));
    color: var(--brand);
}

.record-icon.matter {
    background: color-mix(in srgb, var(--aurum) 12%, var(--surface));
    color: var(--aurum);
}

.record-arrow {
    color: var(--muted);
    transition: transform var(--motion-fast, 120ms) var(--ease-out, ease), color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.recent-record:hover .record-arrow {
    color: var(--brand);
    transform: translateX(3px);
}

/* --- Empty and loading states --- */
.empty-state h3 {
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    font-size: 19px;
    font-weight: 560;
    letter-spacing: -.01em;
    color: var(--ink);
}

.empty-state p {
    color: var(--muted);
    line-height: 1.6;
}

/* --- Workspace spotlight --- */
.workspace-spotlight {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl, 22px);
    background:
        radial-gradient(640px 300px at 92% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%),
        radial-gradient(520px 280px at 0% 100%, color-mix(in srgb, var(--aurum) 6%, transparent), transparent 70%),
        var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-sm);
}

/* --- Dashboard footer --- */
.footer {
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    color: var(--muted);
    font-size: 12px;
}

.footer a {
    color: var(--muted);
    transition: color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.footer a:hover {
    color: var(--brand);
}

.footer kbd {
    border: 1px solid var(--border);
    border-bottom-color: var(--border-strong);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface);
    color: var(--muted);
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 10.5px;
}

/* --- Dashboard responsive --- */
@media (max-width: 640px) {
    .metric-grid {
        grid-template-columns: 1fr;
    }

    .metric-card {
        min-height: 118px;
    }

    .lower-grid {
        grid-template-columns: 1fr;
    }

    .page-heading h1 {
        font-size: clamp(24px, 7vw, 30px);
    }

    .footer {
        flex-direction: column;
        gap: 8px;
    }
}

@media (min-width: 641px) and (max-width: 1050px) {
    .lower-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================ */
/* 4 · DENSITY, REDUCED MOTION, FORCED COLORS                       */
/* ================================================================ */

[data-density="compact"] .landing-hero {
    padding-top: 56px;
    padding-bottom: 56px;
}

[data-density="compact"] .metric-card {
    min-height: 124px;
    padding: 14px 16px 12px;
}

[data-density="compact"] .panel {
    padding: 14px;
}

[data-density="compact"] .page-heading {
    margin-bottom: 18px;
    padding-bottom: 14px;
}

[data-density="compact"] .auth-panel .auth-card {
    padding: 24px;
}

[data-density="compact"] .feature-card,
[data-density="compact"] .pricing-card,
[data-density="compact"] .pricing-card.is-featured,
[data-density="compact"] .principles > div {
    padding: 18px;
}

/* All ds3-h- animation authored in this section is disabled under both the
   app preference flag and the OS-level preference. Transitions stop via the
   foundation's global var(--motion-*) zeroing. */
[data-reduced-motion="true"] .landing-hero::before,
[data-reduced-motion="true"] .landing-hero::after,
[data-reduced-motion="true"] .hero-copy,
[data-reduced-motion="true"] .landing-hero .workflow-illustration,
[data-reduced-motion="true"] .principles > div,
[data-reduced-motion="true"] .status-dot,
[data-reduced-motion="true"] .pricing-skeleton,
[data-reduced-motion="true"] .auth-shell .auth-card,
[data-reduced-motion="true"] .auth-showcase-glow,
[data-reduced-motion="true"] [data-dashboard-state] .metric-card,
[data-reduced-motion="true"] [data-dashboard-state] .panel {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .landing-hero::before,
    .landing-hero::after,
    .hero-copy,
    .landing-hero .workflow-illustration,
    .principles > div,
    .status-dot,
    .pricing-skeleton,
    .auth-shell .auth-card,
    .auth-showcase-glow,
    [data-dashboard-state] .metric-card,
    [data-dashboard-state] .panel {
        animation: none;
    }
}

@media (forced-colors: active) {
    .priority,
    .agenda-tag,
    .plan-badge,
    .auth-showcase-badge,
    .record-icon,
    .work-item .check {
        border: 1px solid CanvasText;
    }

    .segmented-controls button[aria-pressed="true"] {
        outline: 2px solid CanvasText;
        outline-offset: -2px;
    }

    .page-heading::after,
    .landing-header::after,
    .metric-card::before,
    .agenda-line,
    .final-cta::before {
        background: CanvasText;
    }

    .status-dot {
        background: CanvasText;
    }
}

/* ─────────── DS3 section: f4-records.css ─────────── */
/* ===== DS3 · Records: Clients, Matters, Conflicts, Documents ===== */
/*
 * Appended layer. Restyles the records vertical (workspace lists, party
 * profiles, matter files, conflict review, document files, relationships)
 * onto the Counsel system: warm chancery surfaces, serif file headings,
 * mono identifiers/dates, soft-wash + strong-text state colour.
 * Selectors copy legacy text verbatim so later-position wins at equal
 * specificity; dark overrides use html[data-theme="dark"] where a legacy
 * dark rule of that weight exists. No !important, tokens only.
 */

/* ── 1 · Workspace record lists (all routes) ─────────────────────────── */

.app-shell .workspace-records {
    gap: var(--space-2);
}

.app-shell .workspace-record {
    min-height: 72px;
    padding: var(--space-4) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xs);
    transition:
        border-color var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out),
        background-color var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out);
}

.app-shell .workspace-record:hover,
.app-shell .workspace-record:focus-within {
    border-color: color-mix(in srgb, var(--brand) 26%, var(--border));
    background: color-mix(in srgb, var(--brand) 3%, var(--surface-raised));
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.app-shell .workspace-record::before {
    background: var(--brand);
}

html[data-theme="dark"] .app-shell .workspace-record {
    border-color: var(--border);
    background: var(--surface-raised);
}

html[data-theme="dark"] .app-shell .workspace-record:hover {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
    box-shadow: var(--shadow-md);
}

html[data-theme="dark"] .app-shell .workspace-record::before {
    background: var(--brand);
}

/* Row of a record list that wraps the client/organization table. */
.app-shell .workspace-record:has(.party-record-table) {
    overflow-x: auto;
    padding: 0;
}

/* ── 2 · Chips, titles, meta, state pills ────────────────────────────── */

.app-shell .record-chip {
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
}

.app-shell .record-chip[data-chip-tone="high"] {
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
    background: var(--danger-soft);
    color: var(--danger);
}

.app-shell .record-chip[data-chip-tone="medium"] {
    border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .record-chip[data-chip-tone="low"] {
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
    background: var(--success-soft);
    color: var(--success);
}

html[data-theme="dark"] .app-shell .record-chip {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
    background: var(--brand-soft);
    color: var(--brand);
}

html[data-theme="dark"] .app-shell .record-chip[data-chip-tone="high"] {
    border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
    background: var(--danger-soft);
    color: var(--danger);
}

html[data-theme="dark"] .app-shell .record-chip[data-chip-tone="medium"] {
    border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
    background: var(--warning-soft);
    color: var(--warning);
}

html[data-theme="dark"] .app-shell .record-chip[data-chip-tone="low"] {
    border-color: color-mix(in srgb, var(--success) 38%, var(--border));
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .record-main a,
.app-shell .record-title {
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: 620;
    letter-spacing: -.008em;
}

.app-shell .record-main a:hover {
    color: var(--brand);
    text-decoration-color: color-mix(in srgb, var(--aurum) 55%, transparent);
}

html[data-theme="dark"] .app-shell .record-main a,
html[data-theme="dark"] .app-shell .record-title {
    color: var(--ink);
}

html[data-theme="dark"] .app-shell .record-main a:hover {
    color: var(--brand);
}

.app-shell .record-meta,
.app-shell .record-main > div > span,
.app-shell .work-record-meta {
    color: var(--muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

html[data-theme="dark"] .app-shell .record-meta,
html[data-theme="dark"] .app-shell .record-main > div > span,
html[data-theme="dark"] .app-shell .work-record-meta {
    color: var(--muted);
}

.app-shell .record-state-pill,
.app-shell .work-state-pill {
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.app-shell .record-state-pill[data-state="active"],
.app-shell .record-state-pill[data-state="open"],
.app-shell .record-state-pill[data-state="accepted"],
.app-shell .record-state-pill[data-state="published"],
.app-shell .work-state-pill[data-work-state="done"],
.app-shell .work-state-pill[data-deadline-state="accepted"] {
    border-color: color-mix(in srgb, var(--success) 28%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .record-state-pill[data-state="draft"],
.app-shell .record-state-pill[data-state="proposed"],
.app-shell .record-state-pill[data-state="pending"],
.app-shell .record-state-pill[data-state="scheduled"],
.app-shell .record-state-pill[data-state="in-review"],
.app-shell .record-state-pill[data-state="in-progress"],
.app-shell .work-state-pill[data-work-state="in-progress"],
.app-shell .work-state-pill[data-deadline-state="proposed"] {
    border-color: color-mix(in srgb, var(--warning) 28%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .record-state-pill[data-state="blocked"],
.app-shell .record-state-pill[data-state="quarantined"],
.app-shell .work-state-pill[data-work-state="blocked"] {
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

.app-shell .record-state-pill[data-state="archived"],
.app-shell .record-state-pill[data-state="cancelled"],
.app-shell .record-state-pill[data-state="cancelled-archived"],
.app-shell .work-state-pill[data-work-state="cancelled"] {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--muted);
}

html[data-theme="dark"] .app-shell .record-state-pill,
html[data-theme="dark"] .app-shell .work-state-pill {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--muted);
}

html[data-theme="dark"] .app-shell .record-state-pill[data-state="active"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="open"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="accepted"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="published"],
html[data-theme="dark"] .app-shell .work-state-pill[data-work-state="done"],
html[data-theme="dark"] .app-shell .work-state-pill[data-deadline-state="accepted"] {
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

html[data-theme="dark"] .app-shell .record-state-pill[data-state="draft"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="proposed"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="pending"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="scheduled"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="in-review"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="in-progress"],
html[data-theme="dark"] .app-shell .work-state-pill[data-work-state="in-progress"],
html[data-theme="dark"] .app-shell .work-state-pill[data-deadline-state="proposed"] {
    border-color: color-mix(in srgb, var(--warning) 40%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
}

html[data-theme="dark"] .app-shell .record-state-pill[data-state="blocked"],
html[data-theme="dark"] .app-shell .record-state-pill[data-state="quarantined"],
html[data-theme="dark"] .app-shell .work-state-pill[data-work-state="blocked"] {
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

/* Inline status pill inside record copy (documents list, client tables). */
.app-shell .status-pill {
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 8px;
}

.app-shell .status-pill-archived {
    border-style: dashed;
    border-color: var(--border-strong);
    background: transparent;
    color: var(--muted);
}

/* ── 3 · Client / organization record table + archived state ─────────── */

.app-shell .party-record-table td,
.app-shell .party-record-table th {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-base);
}

.app-shell .party-record-table th a {
    color: var(--ink);
    font-weight: 620;
    letter-spacing: -.006em;
    text-decoration: none;
}

.app-shell .party-record-table th a:hover strong {
    color: var(--brand);
}

.app-shell .party-record-table td {
    color: var(--muted);
    font-size: var(--text-sm);
}

/* "Updated …" cell reads as ledger data. */
.app-shell .party-record-table td:nth-last-of-type(2) {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.app-shell .party-record-table tr[tabindex]:hover td,
.app-shell .party-record-table tr[tabindex]:hover th {
    background: color-mix(in srgb, var(--brand) 5%, transparent);
}

.app-shell .party-record-table tr[tabindex]:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

.app-shell .archived-record {
    opacity: .82;
    border-style: dashed;
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--subtle) 46%, var(--surface));
    box-shadow: none;
}

.app-shell .archived-record:hover {
    opacity: 1;
    transform: none;
}

/* ── 4 · Duplicate review warning (dialog scope) ─────────────────────── */

.duplicate-review-warning {
    padding: var(--space-4) var(--space-5);
    border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--border));
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--warning-soft) 72%, var(--surface));
    color: var(--ink);
    box-shadow: var(--shadow-xs);
}

.duplicate-review-warning strong {
    color: var(--warning);
    font-weight: 680;
    letter-spacing: -.01em;
}

.duplicate-review-warning li span {
    color: var(--muted);
    font-size: var(--text-sm);
}

.duplicate-review-actions {
    gap: var(--space-2);
    margin-top: var(--space-2);
}

html[data-theme="dark"] .duplicate-review-warning {
    border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
    border-left-color: var(--warning);
    background: color-mix(in srgb, var(--warning-soft) 78%, var(--surface));
    color: var(--ink);
}

/* ── 5 · Party dialog + party forms (client + identifier) ────────────── */

.party-dialog .modal-header {
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.party-form input,
.party-form select,
.party-form textarea {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-base);
    transition:
        border-color var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-fast) var(--ease-out);
}

.party-form input:focus-visible,
.party-form select:focus-visible,
.party-form textarea:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-color: var(--brand);
    box-shadow: var(--focus-glow);
}

.party-form [aria-invalid="true"] {
    border-color: color-mix(in srgb, var(--danger) 62%, var(--border));
    background: color-mix(in srgb, var(--danger-soft) 42%, var(--surface));
}

.party-form [aria-invalid="true"]:focus-visible {
    outline-color: var(--danger);
    border-color: var(--danger);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 16%, transparent);
}

.party-field-error {
    color: var(--danger);
    font-size: var(--text-xs);
    font-weight: 620;
    letter-spacing: .01em;
}

.party-form .form-hint {
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.party-repeat-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 48%, var(--surface));
    transition: border-color var(--motion-fast) var(--ease-out);
}

.party-repeat-row:focus-within {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.party-repeater-empty {
    margin: 0;
    padding: var(--space-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 35%, transparent);
    color: var(--muted);
    font-size: var(--text-sm);
}

/* Save-state message panel: soft wash + strong text per state. */
.party-form [data-client-status],
.party-form [data-identifier-status] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.party-form [data-client-status][data-state="dirty"] {
    border-color: color-mix(in srgb, var(--info) 30%, var(--border));
    background: var(--info-soft);
    color: var(--info);
}

.party-form [data-client-status][data-state="checking"],
.party-form [data-client-status][data-state="submitting"],
.party-form [data-identifier-status][data-state="submitting"] {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--muted);
}

.party-form [data-client-status][data-state="invalid"],
.party-form [data-client-status][data-state="error"],
.party-form [data-identifier-status][data-state="invalid"],
.party-form [data-identifier-status][data-state="error"] {
    border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
    background: var(--danger-soft);
    color: var(--danger);
}

.party-form [data-client-status][data-state="warning"],
.party-form [data-client-status][data-state="conflict"],
.party-form [data-identifier-status][data-state="conflict"] {
    border-color: color-mix(in srgb, var(--warning) 34%, var(--border));
    background: var(--warning-soft);
    color: var(--warning);
}

.party-form [data-client-status][data-state="success"],
.party-form [data-identifier-status][data-state="success"] {
    border-color: color-mix(in srgb, var(--success) 34%, var(--border));
    background: var(--success-soft);
    color: var(--success);
}

/* ── 6 · Party detail (profile page) ─────────────────────────────────── */

.app-shell .party-detail-header h2 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-xl);
    font-weight: 560;
    letter-spacing: -.012em;
}

.app-shell .party-status-pill {
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.app-shell .party-status-pill[data-party-state="active"] {
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .party-status-pill[data-party-state="archived"] {
    border-style: dashed;
    border-color: var(--border-strong);
    background: transparent;
    color: var(--muted);
}

.party-profile-summary,
.party-detail-section {
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xs);
}

.app-shell .party-detail-section-heading h3 {
    font-size: var(--text-md);
    font-weight: 650;
    letter-spacing: -.008em;
    color: var(--ink);
}

.app-shell .party-detail-row {
    border-top: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
    min-height: 44px;
}

.app-shell .party-detail-icon {
    border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
}

.app-shell .party-detail-row code,
.app-shell .party-profile-summary .metadata-grid code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.app-shell .party-profile-summary .metadata-grid dt {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.app-shell .party-detail-empty,
.app-shell .party-detail-empty.party-detail-error {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 42%, transparent);
}

.app-shell .party-detail-error {
    border-color: color-mix(in srgb, var(--danger) 34%, var(--border-strong));
    background: color-mix(in srgb, var(--danger-soft) 46%, var(--surface));
}

.app-shell .party-detail-error strong {
    color: var(--danger);
}

.app-shell .party-sensitive-badge {
    border: 1px solid color-mix(in srgb, var(--aurum) 36%, var(--border));
    border-radius: var(--radius-pill);
    background: var(--aurum-soft);
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ── 7 · Matters: file heading, lifecycle, timeline, participants ────── */

.app-shell .matter-detail-header h2 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-xl);
    font-weight: 560;
    letter-spacing: -.012em;
}

.app-shell .matter-detail-header {
    border-bottom: 1px solid var(--border);
    position: relative;
}

.app-shell .matter-detail-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--aurum) 55%, transparent) 18%, transparent 70%);
    pointer-events: none;
}

.app-shell .matter-status-pill,
.app-shell .matter-classification,
.app-shell .matter-tag,
.app-shell .matter-count,
.app-shell .matter-version {
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .04em;
}

.app-shell .matter-count,
.app-shell .matter-version {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.app-shell .matter-status-pill {
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.app-shell .matter-status-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: currentColor;
    opacity: .75;
}

.app-shell .matter-status-pill[data-matter-state="active"] {
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .matter-status-pill[data-matter-state="on_hold"] {
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .matter-status-pill[data-matter-state="closed"],
.app-shell .matter-status-pill[data-matter-state="archived"] {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--muted);
}

.app-shell .matter-section-heading h3 {
    font-size: var(--text-md);
    font-weight: 650;
    letter-spacing: -.008em;
    color: var(--ink);
}

.app-shell .matter-context-grid div,
.app-shell .matter-access-metrics div {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.app-shell .matter-context-grid dt,
.app-shell .matter-access-metrics dt {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.app-shell .matter-access-metrics dd {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-lg);
    font-weight: 600;
}

.app-shell .matter-readiness {
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.app-shell .matter-readiness.is-ready {
    border: 1px solid color-mix(in srgb, var(--success) 32%, var(--border));
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .matter-readiness.needs-attention {
    border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--border));
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .matter-state-controls {
    gap: var(--space-3);
}

.app-shell .matter-activation-gate {
    border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--border));
    border-radius: var(--radius-md);
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .matter-transition-status[data-state="success"] { color: var(--success); }
.app-shell .matter-transition-status[data-state="conflict"] { color: var(--warning); }
.app-shell .matter-transition-status[data-state="error"] { color: var(--danger); }

.app-shell .matter-empty-state,
.app-shell .matter-detail-state {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 42%, transparent);
}

.app-shell .matter-detail-error {
    border-color: color-mix(in srgb, var(--danger) 34%, var(--border-strong));
    background: color-mix(in srgb, var(--danger-soft) 46%, var(--surface));
}

.app-shell .matter-detail-error strong {
    color: var(--danger);
}

/* Timeline: keep the ::before rail (test contract), retone it. */
.app-shell .matter-timeline-list::before {
    background: linear-gradient(
        180deg,
        transparent,
        color-mix(in srgb, var(--aurum) 45%, var(--border)) 14%,
        color-mix(in srgb, var(--aurum) 45%, var(--border)) 86%,
        transparent
    );
}

.app-shell .matter-timeline-marker {
    border: 2px solid var(--surface-raised);
    background: var(--brand);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--brand) 55%, transparent),
        0 0 0 4px color-mix(in srgb, var(--brand) 8%, transparent);
}

.app-shell .matter-timeline-heading strong {
    font-size: var(--text-sm);
    font-weight: 650;
    letter-spacing: -.004em;
}

.app-shell .matter-history-row time,
.app-shell .matter-timeline-heading time {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.app-shell .matter-participant-row,
.app-shell .matter-history-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    min-height: 44px;
    transition:
        border-color var(--motion-base) var(--ease-out),
        background-color var(--motion-base) var(--ease-out);
}

.app-shell .matter-participant-row:hover,
.app-shell .matter-history-row:hover {
    border-color: color-mix(in srgb, var(--brand) 20%, var(--border));
    background: color-mix(in srgb, var(--brand) 3%, var(--surface-raised));
}

.app-shell .matter-participant-icon {
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
}

.app-shell .matter-participant-icon.member {
    background: var(--success-soft);
    color: var(--success);
}

/* Matter parties panel */
.app-shell .matter-party-loading-bar {
    display: block;
    height: 12px;
    border-radius: var(--radius-pill);
    background: linear-gradient(
        90deg,
        var(--subtle) 25%,
        var(--subtle-strong) 40%,
        var(--subtle) 60%
    );
    background-size: 200% 100%;
    animation: ds3-r-shimmer 1.8s linear infinite;
}

@keyframes ds3-r-shimmer {
    from { background-position: 120% 0; }
    to { background-position: -80% 0; }
}

[data-reduced-motion="true"] .app-shell .matter-party-loading-bar {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .matter-party-loading-bar {
        animation: none;
    }
}

.app-shell .matter-party-role {
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .06em;
}

.app-shell .matter-party-role[data-role="client"] {
    border-color: color-mix(in srgb, var(--success) 32%, var(--border));
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .matter-party-role[data-role="participant"] {
    border-color: color-mix(in srgb, var(--info) 32%, var(--border));
    background: var(--info-soft);
    color: var(--info);
}

.app-shell .matter-party-row-meta > span {
    color: var(--muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.app-shell .matter-party-form {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--subtle) 40%, var(--surface));
    padding: var(--space-4);
}

.app-shell .matter-party-form-badge {
    border: 1px solid color-mix(in srgb, var(--aurum) 36%, var(--border));
    border-radius: var(--radius-pill);
    background: var(--aurum-soft);
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .04em;
    padding: 3px 10px;
    white-space: nowrap;
}

.app-shell .matter-party-clear-state {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 42%, transparent);
    font-size: var(--text-sm);
}

.app-shell .matter-party-error {
    border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--border));
    border-radius: var(--radius-md);
    background: var(--warning-soft);
    color: var(--warning);
}

/* ── 8 · Conflicts: rail, snapshots, workflow, candidates, decisions ─── */

.app-shell .conflict-rail {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.app-shell .conflict-check-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    transition:
        border-color var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out),
        background-color var(--motion-base) var(--ease-out);
}

.app-shell .conflict-check-row:hover {
    border-color: color-mix(in srgb, var(--brand) 26%, var(--border));
    background: color-mix(in srgb, var(--brand) 3%, var(--surface-raised));
}

.app-shell .conflict-check-row.is-selected {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
    background: color-mix(in srgb, var(--brand) 6%, var(--surface-raised));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}

.app-shell .conflict-check-select {
    border-radius: var(--radius-md);
    min-height: 44px;
}

.app-shell .conflict-check-select:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.app-shell .conflict-check-index {
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 680;
    letter-spacing: -.004em;
}

.app-shell .conflict-candidate-count {
    color: var(--muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.app-shell .conflict-list time {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.app-shell .conflict-detail-state {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.app-shell .conflict-detail-header h3 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-lg);
    font-weight: 580;
    letter-spacing: -.01em;
}

/* Status / disposition / severity: soft wash + strong text, both themes.
   The doubled class matches markup (`conflict-status conflict-status-x`)
   and out-weighs the legacy dark-theme rules. */
.app-shell .conflict-status,
.app-shell .conflict-disposition,
.app-shell .conflict-severity {
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 680;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.app-shell .conflict-status.conflict-status-pending,
.app-shell .conflict-disposition.conflict-disposition-pending {
    border-color: color-mix(in srgb, var(--warning) 32%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .conflict-status.conflict-status-clear,
.app-shell .conflict-disposition.conflict-disposition-cleared {
    border-color: color-mix(in srgb, var(--success) 32%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .conflict-status.conflict-status-rejected,
.app-shell .conflict-disposition.conflict-disposition-confirmed_conflict {
    border-color: color-mix(in srgb, var(--danger) 32%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

.app-shell .conflict-status.conflict-status-override,
.app-shell .conflict-disposition.conflict-disposition-insufficient_information {
    border-color: color-mix(in srgb, var(--info) 32%, transparent);
    background: var(--info-soft);
    color: var(--info);
}

.app-shell .conflict-status.conflict-status-superseded,
.app-shell .conflict-status.conflict-status-cancelled {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--muted);
}

.app-shell .conflict-severity.conflict-severity-high {
    border-color: color-mix(in srgb, var(--danger) 32%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

.app-shell .conflict-severity.conflict-severity-medium {
    border-color: color-mix(in srgb, var(--warning) 32%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .conflict-severity.conflict-severity-low {
    border-color: color-mix(in srgb, var(--info) 32%, transparent);
    background: var(--info-soft);
    color: var(--info);
}

/* Three-step review workflow */
.app-shell .conflict-workflow {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 48%, var(--surface));
    gap: var(--space-4);
}

.app-shell .conflict-workflow li {
    color: var(--muted);
    font-size: var(--text-xs);
    letter-spacing: .01em;
}

.app-shell .conflict-workflow li span {
    border: 1px solid var(--border-strong);
    background: var(--surface-raised);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
}

.app-shell .conflict-workflow li[data-state="current"] {
    color: var(--brand);
}

.app-shell .conflict-workflow li[data-state="current"] span {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
    background: var(--brand-soft);
    color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.app-shell .conflict-workflow li[data-state="complete"] {
    color: var(--success);
}

.app-shell .conflict-workflow li[data-state="complete"] span {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
    background: var(--success-soft);
    color: var(--success);
}

/* Candidate cards with a severity rail */
.app-shell .conflict-candidate {
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xs);
}

.app-shell .conflict-candidate[data-severity="high"] {
    border-left-color: var(--danger);
}

.app-shell .conflict-candidate[data-severity="medium"] {
    border-left-color: var(--warning);
}

.app-shell .conflict-candidate[data-severity="low"] {
    border-left-color: var(--info);
}

.app-shell .conflict-candidate-header h4 {
    font-size: var(--text-md);
    font-weight: 650;
    letter-spacing: -.008em;
    color: var(--ink);
}

.app-shell .conflict-candidate-header code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
}

.app-shell .conflict-candidate-metrics div {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.app-shell .conflict-candidate-metrics dt {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.app-shell .conflict-score-value strong {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.app-shell .conflict-score-meter {
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--border) 70%, transparent);
    height: 6px;
}

/* JS sets the fill width inline; only paint the fill. */
.app-shell .conflict-score-meter span {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--aurum-bright));
    transition: width var(--motion-slow) var(--ease-out);
}

.app-shell .conflict-score-unavailable {
    color: var(--muted);
    font-size: var(--text-xs);
    font-style: italic;
    font-weight: 500;
}

.app-shell .conflict-signal-chip {
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--text-xs);
}

/* Decision record + pending note */
.app-shell .conflict-pending-note,
.app-shell .conflict-decision-state {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 48%, var(--surface));
}

.app-shell .conflict-pending-note strong {
    color: var(--ink);
    letter-spacing: -.006em;
}

.app-shell .conflict-decision-state-confirmed_conflict {
    border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
    background: var(--danger-soft);
    color: var(--danger);
}

.app-shell .conflict-decision-state-cleared {
    border-color: color-mix(in srgb, var(--success) 34%, var(--border));
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .conflict-decision-state-insufficient_information {
    border-color: color-mix(in srgb, var(--info) 34%, var(--border));
    background: var(--info-soft);
    color: var(--info);
}

.app-shell .conflict-decision-meta {
    font-size: var(--text-xs);
}

.app-shell .conflict-decision-meta time {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.app-shell .conflict-decision-lock,
.app-shell .conflict-form-help {
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.app-shell .conflict-required {
    color: var(--danger);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Create + completion forms */
.app-shell .conflict-create-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

.app-shell .conflict-create-form input,
.app-shell .conflict-decision-form select,
.app-shell .conflict-decision-form textarea,
.app-shell .conflict-completion-form select,
.app-shell .conflict-completion-form textarea {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-base);
}

.app-shell .conflict-create-form input:focus-visible,
.app-shell .conflict-decision-form select:focus-visible,
.app-shell .conflict-decision-form textarea:focus-visible,
.app-shell .conflict-completion-form select:focus-visible,
.app-shell .conflict-completion-form textarea:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-color: var(--brand);
}

.app-shell .conflict-completion-form {
    border: 1px solid color-mix(in srgb, var(--success) 32%, var(--border));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--success-soft) 62%, var(--surface));
}

.app-shell .conflict-completion-form[data-conflict-approval-state="blocked"] {
    border-color: color-mix(in srgb, var(--warning) 32%, var(--border));
    background: color-mix(in srgb, var(--warning-soft) 55%, var(--surface));
}

.app-shell .conflict-completed-note {
    border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border));
    border-radius: var(--radius-md);
    background: var(--success-soft);
}

.app-shell .conflict-completed-note strong {
    color: var(--success);
}

.app-shell .conflict-no-candidates {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 42%, transparent);
    padding: var(--space-5);
}

.app-shell .conflict-error-state,
.app-shell .conflict-protected-state {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
}

.app-shell .conflict-error-state {
    border: 1px dashed color-mix(in srgb, var(--danger) 36%, var(--border-strong));
    background: color-mix(in srgb, var(--danger-soft) 46%, var(--surface));
}

.app-shell .conflict-error-state strong {
    color: var(--danger);
    letter-spacing: -.006em;
}

.app-shell .conflict-protected-state {
    border: 1px dashed color-mix(in srgb, var(--info) 36%, var(--border-strong));
    background: color-mix(in srgb, var(--info-soft) 46%, var(--surface));
}

.app-shell .conflict-protected-state strong {
    color: var(--info);
    letter-spacing: -.006em;
}

/* ── 9 · Documents: file heading, states, versions, export, forms ────── */

.app-shell .document-detail-header h2 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-xl);
    font-weight: 560;
    letter-spacing: -.012em;
}

.app-shell .document-detail-header {
    border-bottom: 1px solid var(--border);
    position: relative;
}

.app-shell .document-detail-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--aurum) 55%, transparent) 18%, transparent 70%);
    pointer-events: none;
}

.app-shell .document-detail-id span {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.app-shell .document-detail-id code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
}

.app-shell .document-detail-section {
    border-top: 1px solid var(--border);
}

.app-shell .document-status {
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.app-shell .document-status-content[data-content-state="ready"] {
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .document-status-content[data-content-state="quarantined"] {
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

.app-shell .document-status-content[data-content-state="pending"],
.app-shell .document-status-content[data-content-state="processing"] {
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .document-status-record[data-record-state="archived"] {
    border-style: dashed;
    border-color: var(--border-strong);
    background: transparent;
    color: var(--muted);
}

.app-shell .document-status-visibility[data-visibility="organization"] {
    border-color: color-mix(in srgb, var(--info) 30%, transparent);
    background: var(--info-soft);
    color: var(--info);
}

.app-shell .document-status-retention[data-retention-state="held"] {
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

.app-shell .document-version-metric {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.app-shell .document-version-metric span {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.app-shell .document-version-metric strong {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-md);
    font-weight: 600;
}

.app-shell .document-version-metadata code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
}

.app-shell .document-immutable-badge {
    border: 1px solid color-mix(in srgb, var(--aurum) 42%, var(--border));
    border-radius: var(--radius-pill);
    background: var(--aurum-soft);
    color: var(--aurum);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.app-shell .document-export-actions {
    gap: var(--space-3);
}

.app-shell .document-download-unavailable {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--subtle) 35%, transparent);
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.app-shell .document-export-note {
    border: 1px solid color-mix(in srgb, var(--info) 30%, var(--border));
    border-left: 3px solid var(--info);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--info-soft) 72%, var(--surface));
    color: var(--info);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.app-shell .document-state-note,
.app-shell .document-editor-note {
    border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--warning-soft) 72%, var(--surface));
    color: var(--warning);
    font-size: var(--text-sm);
    line-height: 1.55;
}

/* Linked clients (appended restyle only; legacy 4613–4627 block untouched) */
.app-shell .document-client-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    min-height: 44px;
    transition:
        border-color var(--motion-base) var(--ease-out),
        background-color var(--motion-base) var(--ease-out);
}

.app-shell .document-client-row:hover {
    border-color: color-mix(in srgb, var(--brand) 20%, var(--border));
    background: color-mix(in srgb, var(--brand) 3%, var(--surface-raised));
}

.app-shell .document-client-row a {
    color: var(--ink);
    text-decoration: none;
}

.app-shell .document-client-row a:hover strong {
    color: var(--brand);
}

.app-shell .document-client-role {
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.app-shell .document-client-empty {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 42%, transparent);
    padding: var(--space-4);
}

/* Assignment dialog status (modal scope → bare selectors) */
.document-client-assignment-status {
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.document-client-assignment-status[data-document-client-state="ready"] {
    border-color: color-mix(in srgb, var(--info) 30%, var(--border));
    background: var(--info-soft);
    color: var(--info);
}

.document-client-assignment-status[data-document-client-state="success"] {
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
    background: var(--success-soft);
    color: var(--success);
}

.document-client-assignment-status[data-document-client-state="conflict"] {
    border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
    background: var(--warning-soft);
    color: var(--warning);
}

.document-client-assignment-status[data-document-client-state="error"] {
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
    background: var(--danger-soft);
    color: var(--danger);
}

/* Version history + tools */
.app-shell .document-version-row .record-main strong {
    font-variant-numeric: tabular-nums;
}

.app-shell .document-version-row .record-main span {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.app-shell .document-version-tools {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 40%, var(--surface));
}

.app-shell .document-version-tools label {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 620;
    letter-spacing: .02em;
}

.app-shell .document-version-tools select {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.app-shell .document-version-tools select:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-color: var(--brand);
}

/* Review / hold / retention forms as quiet inset panels */
.app-shell .document-review-form,
.app-shell .document-hold-form,
.app-shell .document-retention-form {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 40%, var(--surface));
    padding: var(--space-4);
}

/* ── 10 · Client documents on a party profile ────────────────────────── */

.app-shell .client-documents-state {
    border-top: 1px solid var(--border);
}

.app-shell .client-document-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    min-height: 44px;
    transition:
        border-color var(--motion-base) var(--ease-out),
        background-color var(--motion-base) var(--ease-out);
}

.app-shell .client-document-row:hover {
    border-color: color-mix(in srgb, var(--brand) 20%, var(--border));
    background: color-mix(in srgb, var(--brand) 3%, var(--surface-raised));
}

.app-shell .client-document-main a {
    color: var(--ink);
    text-decoration: none;
}

.app-shell .client-document-main a:hover strong {
    color: var(--brand);
}

.app-shell .client-document-state {
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ── 11 · Relationships ──────────────────────────────────────────────── */

.app-shell .relationship-state {
    border-top: 1px solid var(--border);
}

.app-shell .relationship-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    min-height: 44px;
    transition:
        border-color var(--motion-base) var(--ease-out),
        background-color var(--motion-base) var(--ease-out);
}

.app-shell .relationship-row:hover {
    border-color: color-mix(in srgb, var(--brand) 20%, var(--border));
    background: color-mix(in srgb, var(--brand) 3%, var(--surface-raised));
}

.app-shell .relationship-row > div:first-child span {
    color: var(--muted);
    font-size: var(--text-sm);
}

.app-shell .relationship-meta {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.app-shell .relationship-empty {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--subtle) 42%, transparent);
}

/* ── 12 · Responsive: single-column legal file on small screens ──────── */

@media (max-width: 900px) {
    .app-shell .matter-detail-grid,
    .app-shell .party-detail-grid,
    .app-shell .conflict-review-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* First grid children lose their no-divider special-casing cleanly. */
    .app-shell .matter-detail-grid > .matter-detail-section:nth-child(-n+2) {
        padding-top: 1.1rem;
        border-top: 1px solid var(--border);
    }

    .app-shell .matter-detail-grid > .matter-detail-section:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .app-shell .party-record-table {
        min-width: 640px;
    }
}

@media (max-width: 640px) {
    .app-shell .matter-context-grid,
    .app-shell .matter-access-metrics,
    .app-shell .conflict-candidate-metrics,
    .app-shell .document-version-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-shell .matter-detail-header,
    .app-shell .document-detail-header,
    .app-shell .party-detail-header,
    .app-shell .conflict-detail-header,
    .app-shell .conflict-candidate-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .app-shell .document-detail-id {
        max-width: none;
        justify-items: start;
        text-align: left;
    }

    .app-shell .relationship-row,
    .app-shell .document-client-row,
    .app-shell .client-document-row,
    .app-shell .matter-participant-row,
    .app-shell .matter-history-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .app-shell .relationship-meta,
    .app-shell .matter-party-row-meta {
        text-align: left;
        justify-items: start;
    }

    .app-shell .client-document-state,
    .app-shell .document-client-role {
        align-self: flex-start;
    }

    /* 44px touch targets throughout the records vertical. */
    .app-shell .workspace-record .quiet-button,
    .app-shell .workspace-record .secondary-button,
    .app-shell .matter-state-controls .secondary-button,
    .app-shell .matter-state-controls .quiet-button,
    .app-shell .matter-party-form-actions .quiet-button,
    .app-shell .matter-party-form-actions .secondary-button,
    .app-shell .conflict-form-actions .primary-button,
    .app-shell .conflict-form-actions .quiet-button,
    .app-shell .document-export-actions .secondary-button,
    .app-shell .document-export-actions .quiet-button,
    .app-shell .record-actions .quiet-button,
    .app-shell .record-actions .secondary-button {
        min-height: 44px;
    }

    .app-shell .conflict-create-form input,
    .app-shell .conflict-decision-form select,
    .app-shell .conflict-decision-form textarea,
    .app-shell .conflict-completion-form select {
        min-height: 44px;
    }

    .party-form input,
    .party-form select:not([multiple]) {
        min-height: 44px;
    }

    .app-shell .party-record-table td,
    .app-shell .party-record-table th {
        padding: var(--space-4);
    }

    .app-shell .conflict-workflow {
        grid-auto-flow: row;
        justify-content: stretch;
        gap: var(--space-2);
    }
}

/* ── 13 · Forced colors: meaning must survive without washes ─────────── */

@media (forced-colors: active) {
    .app-shell .record-state-pill,
    .app-shell .work-state-pill,
    .app-shell .status-pill,
    .app-shell .matter-status-pill,
    .app-shell .party-status-pill,
    .app-shell .conflict-status,
    .app-shell .conflict-disposition,
    .app-shell .conflict-severity,
    .app-shell .document-status,
    .app-shell .document-client-role,
    .app-shell .client-document-state,
    .app-shell .matter-party-role,
    .app-shell .document-immutable-badge {
        border: 1px solid ButtonText;
    }

    .app-shell .conflict-check-row.is-selected {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }

    .app-shell .conflict-score-meter {
        border: 1px solid ButtonText;
    }

    .app-shell .conflict-score-meter span {
        background: Highlight;
    }

    .app-shell .matter-timeline-marker {
        background: ButtonText;
    }
}

/* ─────────── DS3 section: f5-drafting-library.css ─────────── */
/* ===== DS3 · Drafting & Library ===== */
/*
   Counsel design system layer for the drafting suite and the templates/clauses
   library. Append-only: every rule here matches or exceeds the specificity of
   the legacy rule it retunes. The legacy drafting layer resolves its palette
   through page-scoped --draft-* custom properties; remapping those onto DS3
   foundation tokens rethemes hundreds of legacy declarations at once, in both
   themes, without touching them.
*/

/* ── Drafting palette remap ──────────────────────────────────────────────── */

.app-shell .drafting-page {
    --draft-accent: var(--brand);
    --draft-accent-hover: var(--brand-hover);
    --draft-accent-soft: color-mix(in srgb, var(--brand) 9%, var(--surface));
    --draft-on-accent: var(--brand-fill-ink);
    --draft-line: var(--border);
    --draft-line-strong: var(--border-strong);
    --draft-inset: color-mix(in srgb, var(--subtle) 58%, var(--surface));
    --draft-paper: var(--surface-raised);
    --draft-ink: var(--ink);
    --draft-muted: var(--muted);
    --draft-success: var(--success);
    --draft-success-soft: var(--success-soft);
    --draft-warning: var(--warning);
    --draft-warning-soft: var(--warning-soft);
    --draft-danger: var(--danger);
    --draft-danger-soft: var(--danger-soft);
    --draft-radius: var(--radius-lg);
    --draft-shadow: var(--shadow-sm);
    color: var(--ink);
}

/* Beats both the legacy [data-theme="dark"] block (0-3-0) and the legacy
   prefers-color-scheme block keyed on html:not([data-theme="light"]) (0-3-1). */
html[data-theme="dark"] .app-shell .drafting-page {
    --draft-accent: var(--brand);
    --draft-accent-hover: var(--brand-hover);
    --draft-accent-soft: color-mix(in srgb, var(--brand) 13%, var(--surface));
    --draft-on-accent: var(--brand-fill-ink);
    --draft-line: var(--border);
    --draft-line-strong: var(--border-strong);
    --draft-inset: color-mix(in srgb, var(--subtle) 62%, var(--surface));
    --draft-paper: var(--surface-raised);
    --draft-ink: var(--ink);
    --draft-muted: var(--muted);
    --draft-success: var(--success);
    --draft-success-soft: var(--success-soft);
    --draft-warning: var(--warning);
    --draft-warning-soft: var(--warning-soft);
    --draft-danger: var(--danger);
    --draft-danger-soft: var(--danger-soft);
    --draft-shadow: var(--shadow-sm);
}

/* ── Page heading: unboxed, editorial ────────────────────────────────────── */

.app-shell .drafting-page .page-heading {
    margin: 0 0 var(--space-5);
    padding: var(--space-2) 0 var(--space-5);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    position: relative;
}

.app-shell .drafting-page .page-heading::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--aurum) 62%, transparent) 32%, color-mix(in srgb, var(--aurum) 62%, transparent) 68%, transparent);
    pointer-events: none;
}

.app-shell .drafting-page .page-heading .eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--aurum);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.app-shell .drafting-page .page-heading h1 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-display);
    font-weight: 560;
    letter-spacing: -.015em;
    line-height: 1.12;
}

.app-shell .drafting-page .page-heading .muted {
    max-width: 62ch;
    margin: var(--space-3) 0 0;
    color: var(--muted);
    font-size: var(--text-md);
    line-height: 1.6;
}

.app-shell .drafting-page .drafting-header-meta {
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: 0;
    border-top: 0;
}

.app-shell .drafting-page .drafting-trust-item {
    display: grid;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.app-shell .drafting-page .drafting-trust-item strong {
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 640;
}

.app-shell .drafting-page .drafting-trust-item span {
    color: var(--muted);
    font-size: var(--text-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.app-shell .drafting-page .drafting-toolbar {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-xs);
}

.app-shell .drafting-page .drafting-toolbar a {
    border-radius: calc(var(--radius-md) - 4px);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

/* ── Context rail: matter & library context cards ────────────────────────── */

.app-shell .drafting-page :where(.drafting-library-context, .drafting-matter-context) {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out);
}

.app-shell .drafting-page .drafting-library-context .eyebrow,
.app-shell .drafting-page .drafting-matter-context .eyebrow {
    margin: 0 0 var(--space-1);
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.app-shell .drafting-page .drafting-library-context strong,
.app-shell .drafting-page .drafting-matter-context strong {
    font-size: var(--text-md);
    font-weight: 640;
    letter-spacing: -.01em;
}

.app-shell .drafting-page .drafting-matter-context-meta dt {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 640;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.app-shell .drafting-page .drafting-matter-context-meta dd {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.app-shell .drafting-page .drafting-matter-readiness {
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
}

.app-shell .drafting-page .drafting-matter-readiness[data-ready="true"] {
    border-color: color-mix(in srgb, var(--success) 32%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .drafting-page .drafting-matter-readiness[data-ready="false"] {
    border-color: color-mix(in srgb, var(--warning) 32%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
}

/* Loading context cards shimmer quietly instead of sitting flat. */
.app-shell .drafting-page :where(.drafting-library-context, .drafting-matter-context)[data-state="loading"] {
    background:
        linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--brand) 5%, transparent) 50%, transparent 62%) 0 0 / 240% 100%,
        var(--draft-inset);
    animation: ds3-d-shimmer 1.8s var(--ease-out) infinite;
}

/* ── Queue panel & queue table ───────────────────────────────────────────── */

.app-shell .drafting-page .drafting-queue-panel {
    margin-bottom: var(--space-5);
}

.app-shell .drafting-page .drafting-queue-table {
    font-size: var(--text-base);
}

.app-shell .drafting-page .drafting-queue-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .07em;
}

.app-shell .drafting-page .drafting-queue-table tbody td:first-child {
    color: var(--ink);
    font-weight: 620;
}

.app-shell .drafting-page .drafting-queue-table td:nth-child(5) {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.app-shell .drafting-page .drafting-queue-table tbody tr {
    transition: background-color var(--motion-fast) var(--ease-out);
}

.app-shell .drafting-page .drafting-queue-table tbody tr:hover {
    background: color-mix(in srgb, var(--brand) 5%, transparent);
}

.app-shell .drafting-page .drafting-queue-table .secondary-button {
    min-height: 44px;
    padding: 0 var(--space-3);
}

/* ── Step navigation: the guided spine ───────────────────────────────────── */

.app-shell .drafting-page .drafting-step-navigation {
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.app-shell .drafting-page .drafting-step-navigation button {
    position: relative;
    gap: 3px var(--space-3);
    min-height: 76px;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out);
}

.app-shell .drafting-page .drafting-step-navigation button::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--space-3);
    bottom: var(--space-3);
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background-color var(--motion-base) var(--ease-out);
}

.app-shell .drafting-page .drafting-step-navigation button > span {
    color: var(--muted);
    font: 500 var(--text-sm)/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.app-shell .drafting-page .drafting-step-navigation button strong {
    font-size: var(--text-base);
    font-weight: 640;
    letter-spacing: -.008em;
    line-height: 1.3;
}

.app-shell .drafting-page .drafting-step-navigation button small {
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.35;
}

.app-shell .drafting-page .drafting-step-navigation button:not([data-state="locked"]):not(:disabled):hover {
    border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
    box-shadow: var(--shadow-sm);
}

.app-shell .drafting-page .drafting-step-navigation button[data-state="current"] {
    border-color: color-mix(in srgb, var(--brand) 46%, var(--border));
    background: color-mix(in srgb, var(--brand) 6%, var(--surface));
    color: var(--ink);
    box-shadow: var(--shadow-sm), 0 0 0 3px color-mix(in srgb, var(--brand) 9%, transparent);
}

.app-shell .drafting-page .drafting-step-navigation button[data-state="current"]::before {
    background: var(--brand);
}

.app-shell .drafting-page .drafting-step-navigation button[data-state="current"] > span {
    color: var(--brand);
    font-weight: 500;
}

.app-shell .drafting-page .drafting-step-navigation button[data-state="current"] strong {
    color: var(--brand);
}

.app-shell .drafting-page .drafting-step-navigation button[data-state="complete"] {
    border-color: color-mix(in srgb, var(--success) 34%, var(--border));
    background: color-mix(in srgb, var(--success) 4%, var(--surface));
}

.app-shell .drafting-page .drafting-step-navigation button[data-state="complete"]::before {
    background: color-mix(in srgb, var(--success) 62%, transparent);
}

.app-shell .drafting-page .drafting-step-navigation button[data-state="complete"] > span {
    color: var(--success);
}

.app-shell .drafting-page .drafting-step-navigation button[data-state="locked"],
.app-shell .drafting-page[data-drafting-mode="review"] .drafting-step-navigation button {
    border-style: dashed;
    background: transparent;
    box-shadow: none;
    opacity: .58;
}

.app-shell .drafting-page .drafting-step-pager {
    gap: var(--space-4);
}

.app-shell .drafting-page .drafting-step-crumb {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.app-shell .drafting-page .drafting-step-actions {
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* Step panels rise gently when they appear; the animation restarts each time
   the panel toggles out of [hidden], giving the step-per-screen flow a calm
   sense of forward motion. */
.app-shell .drafting-page [data-drafting-step-panel]:not([hidden]) {
    animation: ds3-d-rise var(--motion-slow) var(--ease-out) both;
}

/* ── Panel chrome shared by the workspace panels ─────────────────────────── */

.app-shell .drafting-page .panel-header {
    padding: var(--space-5) var(--space-5) var(--space-4);
}

.app-shell .drafting-page .panel-header h2 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-lg);
    font-weight: 580;
    letter-spacing: -.01em;
}

.app-shell .drafting-page .panel-header .eyebrow {
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.app-shell .drafting-page .panel-subtitle {
    font-size: var(--text-sm);
    line-height: 1.55;
}

.app-shell .drafting-page .drafting-step-index {
    width: 32px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand) 8%, var(--surface));
    color: var(--brand);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 620;
}

.app-shell .drafting-page .drafting-step-badge {
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 640;
    letter-spacing: .07em;
}

/* ── Start form (Step 1) ─────────────────────────────────────────────────── */

.app-shell .drafting-page .drafting-start-form {
    gap: var(--space-4);
}

.app-shell .drafting-page .drafting-start-form label {
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 620;
}

.app-shell .drafting-page :where(input, select, textarea) {
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

.app-shell .drafting-page .drafting-inline-actions {
    gap: var(--space-2);
}

.app-shell .drafting-page .drafting-start-retry {
    justify-self: start;
}

.app-shell .drafting-page .drafting-client-link {
    border-radius: var(--radius-md);
    border-color: color-mix(in srgb, var(--warning) 36%, var(--border));
    background: color-mix(in srgb, var(--warning-soft) 76%, var(--surface));
}

.app-shell .drafting-page .drafting-start-links {
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.app-shell .drafting-page .drafting-start-links a {
    color: var(--brand);
    font-size: var(--text-sm);
    font-weight: 620;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
    transition: border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.app-shell .drafting-page .drafting-start-links a:hover {
    color: var(--brand-hover);
    border-bottom-color: var(--brand-hover);
}

/* ── Mapping & document information (Step 2) ─────────────────────────────── */

.app-shell .drafting-page .drafting-mapping-panel {
    border-radius: var(--radius-md);
}

.app-shell .drafting-page .drafting-mapping-guidance {
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--brand);
    font-size: var(--text-sm);
}

.app-shell .drafting-page .drafting-mapping-summary {
    border-radius: var(--radius-sm);
}

.app-shell .drafting-page .drafting-mapping-summary strong {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.app-shell .drafting-page .drafting-mapping-row,
.app-shell .drafting-page .drafting-information-row {
    border-radius: var(--radius-md);
    transition: border-color var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.app-shell .drafting-page .drafting-mapping-row:focus-within,
.app-shell .drafting-page .drafting-information-row:focus-within {
    border-color: color-mix(in srgb, var(--brand) 52%, var(--border));
    background: var(--surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.app-shell .drafting-page .drafting-mapping-number {
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.app-shell .drafting-page .drafting-information-row[data-information-state="known"] {
    border-left: 4px solid var(--success);
}

.app-shell .drafting-page .drafting-information-row[data-information-state="question"] {
    border-left: 4px solid var(--warning);
}

.app-shell .drafting-page .drafting-information-state {
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 640;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.app-shell .drafting-page .drafting-information-row[data-information-state="known"] .drafting-information-state {
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .drafting-page .drafting-information-row[data-information-state="question"] .drafting-information-state {
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .drafting-page .drafting-mapping-account-value {
    border-radius: var(--radius-sm);
    border-color: color-mix(in srgb, var(--brand) 22%, var(--border));
    background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}

.app-shell .drafting-page .drafting-mapping-account-value strong {
    font-size: var(--text-base);
    font-weight: 620;
}

.app-shell .drafting-page .drafting-static-field {
    border-radius: var(--radius-sm);
}

.app-shell .drafting-page .drafting-source-review {
    border-radius: var(--radius-md);
}

.app-shell .drafting-page .drafting-source-review > summary,
.app-shell .drafting-page .drafting-technical-details > summary {
    font-size: var(--text-sm);
    font-weight: 640;
    transition: color var(--motion-fast) var(--ease-out);
}

.app-shell .drafting-page .drafting-source-review > summary:hover,
.app-shell .drafting-page .drafting-technical-details > summary:hover {
    color: var(--brand);
}

.app-shell .drafting-page .drafting-mapping-recovery {
    border-radius: var(--radius-md);
    border-color: color-mix(in srgb, var(--warning) 34%, var(--border));
    background: color-mix(in srgb, var(--warning-soft) 78%, var(--surface));
}

.app-shell .drafting-page .drafting-mapping-state {
    border-radius: var(--radius-pill);
    font-weight: 640;
    letter-spacing: .06em;
}

/* ── Fields & interview (Step 3) ─────────────────────────────────────────── */

.app-shell .drafting-page .drafting-fields {
    border-radius: var(--radius-md);
}

.app-shell .drafting-page .drafting-field-group-heading h4 {
    font-size: var(--text-base);
    font-weight: 640;
    letter-spacing: -.006em;
}

.app-shell .drafting-page .drafting-field-group-heading > span {
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.app-shell .drafting-page .drafting-field-row {
    display: grid;
    gap: 6px;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.app-shell .drafting-page .drafting-field-row:focus-within {
    border-color: color-mix(in srgb, var(--brand) 52%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.app-shell .drafting-page .drafting-field-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.app-shell .drafting-page .drafting-field-heading strong {
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 640;
}

.app-shell .drafting-page .drafting-field-source {
    flex: none;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--brand) 7%, var(--surface));
    color: var(--brand);
    font-size: var(--text-xs);
    font-weight: 620;
    white-space: nowrap;
}

/* ── Preview: the typeset page (Step 3) ──────────────────────────────────── */

.app-shell .drafting-page .drafting-preview-panel {
    border-radius: var(--radius-md);
    background:
        radial-gradient(42rem 20rem at 50% -6rem, color-mix(in srgb, var(--brand) 4%, transparent), transparent 70%),
        var(--draft-inset);
}

.app-shell .drafting-page .drafting-preview-header strong {
    font-size: var(--text-base);
    font-weight: 640;
}

.app-shell .drafting-page .drafting-preview-output,
.app-shell .drafting-page .drafting-result-output {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 2 * var(--space-5));
    max-width: 74ch;
    min-height: 280px;
    max-height: 56vh;
    margin: var(--space-5) auto;
    padding: clamp(26px, 5vw, 58px) clamp(20px, 4.5vw, 52px);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--aurum) 52%, transparent) 28%, color-mix(in srgb, var(--aurum) 52%, transparent) 72%, transparent) top / 100% 2px no-repeat,
        linear-gradient(180deg, color-mix(in srgb, var(--aurum) 3%, transparent), transparent 140px),
        var(--surface-raised);
    color: var(--ink);
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-md);
    font-weight: 460;
    line-height: 1.85;
    letter-spacing: .002em;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    tab-size: 4;
    box-shadow: var(--shadow-md);
}

.app-shell .drafting-page .drafting-preview-output:focus-visible {
    border-color: var(--brand);
    box-shadow: var(--shadow-md), 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}

.app-shell .drafting-page .drafting-preview-output.has-blockers {
    border-color: color-mix(in srgb, var(--warning) 44%, var(--border));
    background:
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--warning) 62%, transparent) 28%, color-mix(in srgb, var(--warning) 62%, transparent) 72%, transparent) top / 100% 2px no-repeat,
        linear-gradient(180deg, color-mix(in srgb, var(--warning-soft) 62%, transparent), transparent 140px),
        var(--surface-raised);
}

.app-shell .drafting-page .drafting-preview-state {
    border-radius: var(--radius-pill);
    font-weight: 640;
    letter-spacing: .06em;
    transition: border-color var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
}

.app-shell .drafting-page .drafting-preview-state[data-state="checking"] {
    background:
        linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--brand) 14%, transparent) 50%, transparent 62%) 0 0 / 240% 100%,
        color-mix(in srgb, var(--brand) 9%, var(--surface));
    animation: ds3-d-shimmer 1.8s var(--ease-out) infinite;
}

.app-shell .drafting-page .drafting-preview-missing {
    border-radius: var(--radius-md);
    border-color: color-mix(in srgb, var(--warning) 34%, var(--border));
    background: color-mix(in srgb, var(--warning-soft) 78%, var(--surface));
}

.app-shell .drafting-page .drafting-preview-metadata-heading strong {
    font-size: var(--text-sm);
    font-weight: 640;
}

.app-shell .drafting-page .drafting-technical-details {
    border-radius: var(--radius-sm);
}

.app-shell .drafting-page .metadata-grid dd,
.app-shell .drafting-page .drafting-preview-metadata dd {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.app-shell .drafting-page .metadata-grid code,
.app-shell .drafting-page .drafting-preview-metadata code {
    font-family: var(--font-mono);
}

/* ── Result & handoff (Step 4) ───────────────────────────────────────────── */

.app-shell .drafting-page .drafting-result-heading {
    background: color-mix(in srgb, var(--success-soft) 52%, var(--surface));
}

.app-shell .drafting-page .drafting-result-heading strong {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-lg);
    font-weight: 580;
    letter-spacing: -.01em;
}

.app-shell .drafting-page .drafting-status-dot {
    background: var(--success);
    border-color: var(--surface);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 28%, transparent);
    animation: ds3-d-pulse 2.8s var(--ease-out) infinite;
}

.app-shell .drafting-page .drafting-handoff {
    border-radius: var(--radius-md);
}

.app-shell .drafting-page .drafting-handoff-header h3 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-lg);
    font-weight: 580;
    letter-spacing: -.01em;
}

.app-shell .drafting-page .drafting-handoff-header .eyebrow {
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.app-shell .drafting-page .drafting-handoff-badge {
    border: 1px solid color-mix(in srgb, var(--aurum) 38%, var(--border));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--aurum) 12%, var(--surface));
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.app-shell .drafting-page .drafting-handoff-steps li {
    border-radius: var(--radius-sm);
    transition: border-color var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out);
}

.app-shell .drafting-page .drafting-handoff-steps li span {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.app-shell .drafting-page .drafting-handoff-steps li[data-state="complete"] {
    border-color: color-mix(in srgb, var(--success) 32%, var(--border));
    background: color-mix(in srgb, var(--success-soft) 68%, var(--surface));
}

.app-shell .drafting-page .drafting-handoff-steps li[data-state="complete"] span {
    border-color: color-mix(in srgb, var(--success) 34%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .drafting-page .drafting-handoff-steps li[data-state="current"] {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
    background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}

.app-shell .drafting-page .drafting-handoff-steps li[data-state="current"] span {
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
    background: var(--surface);
    color: var(--brand);
}

.app-shell .drafting-page .drafting-handoff-steps li[data-state="upcoming"] {
    border-style: dashed;
    background: transparent;
}

.app-shell .drafting-page .drafting-handoff-review {
    border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--brand) 6%, var(--surface));
    color: var(--ink);
}

.app-shell .drafting-page .drafting-handoff-review .eyebrow {
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.app-shell .drafting-page .drafting-handoff-review h4 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-md);
    font-weight: 590;
}

.app-shell .drafting-page .drafting-client-options {
    gap: var(--space-2);
}

.app-shell .drafting-page .drafting-client-option {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: border-color var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.app-shell .drafting-page .drafting-client-option:hover {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
}

.app-shell .drafting-page .drafting-client-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--brand) 56%, var(--border));
    background: color-mix(in srgb, var(--brand) 7%, var(--surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 8%, transparent);
}

.app-shell .drafting-page .drafting-client-option input {
    accent-color: var(--brand-fill);
}

.app-shell .drafting-page .drafting-client-option strong {
    font-size: var(--text-base);
    font-weight: 630;
}

.app-shell .drafting-page .drafting-client-option small {
    color: var(--muted);
    font-size: var(--text-sm);
}

.app-shell .drafting-page .drafting-handoff-submit-row {
    gap: var(--space-3);
}

.app-shell .drafting-page .drafting-handoff-selection {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.app-shell .drafting-page .drafting-handoff-success {
    border-color: color-mix(in srgb, var(--success) 34%, var(--border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--success-soft) 72%, var(--surface));
    color: var(--ink);
}

.app-shell .drafting-page .drafting-handoff-success[data-immutable-success="true"] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 10%, transparent);
}

.app-shell .drafting-page .drafting-handoff-success-icon {
    background: var(--success);
    color: var(--brand-fill-ink);
}

.app-shell .drafting-page .drafting-handoff-proof {
    color: var(--success);
    font-size: var(--text-xs);
    font-weight: 650;
}

.app-shell .drafting-page .drafting-handoff-finality {
    color: var(--muted);
    font-size: var(--text-xs);
}

.app-shell .drafting-page .drafting-handoff-blocked {
    border-color: color-mix(in srgb, var(--warning) 34%, var(--border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--warning-soft) 74%, var(--surface));
    color: var(--ink);
}

.app-shell .drafting-page .drafting-handoff-empty-icon {
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .drafting-page .drafting-handoff-error,
.app-shell .drafting-page .drafting-handoff-conflict {
    border-radius: var(--radius-md);
}

.app-shell .drafting-page .drafting-handoff-loading span {
    height: 58px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--ink) 5%, transparent) 50%, transparent 62%) 0 0 / 240% 100%,
        var(--draft-inset);
    animation: ds3-d-shimmer 1.8s var(--ease-out) infinite;
}

/* ── Empty state & workflow guide ────────────────────────────────────────── */

.app-shell .drafting-page .drafting-empty-state h3 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-xl);
    font-weight: 560;
    letter-spacing: -.012em;
}

.app-shell .drafting-page .empty-state-icon {
    border: 1px solid color-mix(in srgb, var(--aurum) 32%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--aurum) 10%, var(--surface));
    color: var(--aurum);
}

.app-shell .drafting-page .drafting-empty-checklist li {
    border-radius: var(--radius-sm);
}

.app-shell .drafting-page .workflow-steps li {
    border-radius: var(--radius-md);
    transition: border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

.app-shell .drafting-page .workflow-steps li:hover {
    border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.app-shell .drafting-page .workflow-steps span {
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ── Buttons inside drafting: DS3 sapphire fill ──────────────────────────── */
/* Legacy paints the drafting primary button with --draft-accent, which in dark
   is the on-surface brand tone (too light for white text). Repoint the fill at
   --brand-fill; the legacy important color declaration keyed on
   --draft-on-accent now resolves to --brand-fill-ink through the remap above. */

.app-shell .drafting-page .primary-button {
    min-height: 44px;
    border-color: var(--brand-fill);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-fill-ink) 10%, transparent), transparent 42%), var(--brand-fill);
    font-weight: 640;
    box-shadow: var(--shadow-xs);
    transition: filter var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

.app-shell .drafting-page .primary-button:hover:not(:disabled) {
    border-color: var(--brand-fill-hover);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-fill-ink) 12%, transparent), transparent 42%), var(--brand-fill-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.app-shell .drafting-page .secondary-button,
.app-shell .drafting-page .quiet-button {
    min-height: 44px;
    border-radius: var(--radius-md);
    font-weight: 620;
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

/* ── Dark-theme reconciliation for high-specificity legacy dark rules ────── */

html[data-theme="dark"] .app-shell .drafting-page :where(.panel, .drafting-composer, .drafting-resolver, .drafting-result, .workspace-spotlight) {
    box-shadow: var(--shadow-sm);
}

html[data-theme="dark"] .app-shell .drafting-page .page-heading {
    background: transparent;
    border: 0;
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .drafting-page .drafting-preview-output,
html[data-theme="dark"] .app-shell .drafting-page .drafting-result-output {
    box-shadow: var(--shadow-md);
}

/* ══ Templates & Clauses library ══════════════════════════════════════════ */
/* All rules ride on `.app-shell .library-page …` so they outrank the legacy
   `[data-theme="dark"] .app-shell .library-*` hex overrides in both themes;
   the token values retheme themselves. */

.app-shell .library-page .page-heading h1 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-display);
    font-weight: 560;
    letter-spacing: -.015em;
    line-height: 1.12;
}

.app-shell .library-page .page-heading .eyebrow {
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Spotlight */
.app-shell .library-page .library-spotlight {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(30rem 16rem at 104% -20%, color-mix(in srgb, var(--aurum) 7%, transparent), transparent 70%),
        radial-gradient(26rem 14rem at -8% 120%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 70%),
        var(--surface);
    box-shadow: var(--shadow-sm);
}

.app-shell .library-page .library-spotlight .spotlight-kicker {
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.app-shell .library-page .library-spotlight h2 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-xl);
    font-weight: 570;
    letter-spacing: -.012em;
}

.app-shell .library-page .library-spotlight .spotlight-stat strong {
    color: var(--brand);
    font-family: var(--font-mono);
    font-size: var(--text-display);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
}

/* Tabs */
.app-shell .library-page .library-tabs {
    padding: var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.app-shell .library-page .library-tabs a {
    border-radius: calc(var(--radius-md) - 4px);
    color: var(--muted);
    font-weight: 620;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.app-shell .library-page .library-tabs a:hover,
.app-shell .library-page .library-tabs a:focus-visible {
    background: var(--subtle);
    color: var(--ink);
}

.app-shell .library-page .library-tabs a.active {
    background: color-mix(in srgb, var(--brand) 10%, var(--surface));
    color: var(--brand);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent);
}

.app-shell .library-page .library-tabs a.active .library-tab-sub {
    color: color-mix(in srgb, var(--brand) 66%, var(--muted));
}

.app-shell .library-page .library-tab-label {
    font-size: var(--text-sm);
}

.app-shell .library-page .library-tab-sub {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 500;
}

/* Toolbar */
.app-shell .library-page .library-toolbar {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    padding: var(--space-3) var(--space-4);
}

.app-shell .library-page .library-toolbar label {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 640;
    letter-spacing: .07em;
}

.app-shell .library-page .library-toolbar input,
.app-shell .library-page .library-toolbar select {
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-base);
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.app-shell .library-page .library-toolbar input:focus,
.app-shell .library-page .library-toolbar select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.app-shell .library-page .library-sync-state {
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 620;
}

/* Grid & cards */
.app-shell .library-page .library-grid {
    gap: var(--space-4);
    padding: var(--space-5);
}

.app-shell .library-page .library-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}

.app-shell .library-page .library-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--brand) 22%, var(--border));
    box-shadow: var(--shadow-md);
}

.app-shell .library-page .library-card::before {
    height: 3px;
    background: transparent;
    transition: background-color var(--motion-base) var(--ease-out);
}

.app-shell .library-page .library-card:hover::before {
    background: var(--brand);
}

.app-shell .library-page .library-card[data-library-status="published"]:hover::before {
    background: var(--success);
}

.app-shell .library-page .library-card[data-library-status="draft"]:hover::before {
    background: var(--warning);
}

.app-shell .library-page .library-card-titles h3 {
    font-size: var(--text-md);
    font-weight: 640;
    letter-spacing: -.008em;
}

.app-shell .library-page .library-card-titles p {
    color: var(--muted);
    font-size: var(--text-sm);
}

.app-shell .library-page .library-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--subtle);
    color: var(--muted);
}

.app-shell .library-page .library-card-icon[data-state="published"],
.app-shell .library-page .library-card-icon[data-state="active"] {
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .library-page .library-card-icon[data-state="draft"] {
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .library-page .library-card-icon[data-state="archived"],
.app-shell .library-page .library-card-icon[data-state="deprecated"],
.app-shell .library-page .library-card-icon[data-state="retired"] {
    background: var(--subtle);
    color: var(--muted);
}

/* Status pills */
.app-shell .library-page .library-status {
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .05em;
}

.app-shell .library-page .library-status[data-state="published"],
.app-shell .library-page .library-status[data-state="active"] {
    border-color: color-mix(in srgb, var(--success) 34%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

.app-shell .library-page .library-status[data-state="draft"] {
    border-color: color-mix(in srgb, var(--warning) 34%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .library-page .library-status[data-state="archived"],
.app-shell .library-page .library-status[data-state="deprecated"],
.app-shell .library-page .library-status[data-state="retired"] {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--muted);
}

.app-shell .library-page .library-status[data-state="unpublished"] {
    border-color: color-mix(in srgb, var(--info) 34%, transparent);
    background: var(--info-soft);
    color: var(--info);
}

.app-shell .library-page .library-scope-badge {
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 640;
}

/* Meta */
.app-shell .library-page .library-card-meta {
    border-top: 1px solid var(--border);
}

.app-shell .library-page .library-card-meta div + div {
    border-left: 1px solid var(--border);
}

.app-shell .library-page .library-card-meta dt {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 640;
    letter-spacing: .08em;
}

.app-shell .library-page .library-card-meta dd {
    color: var(--ink);
    font-size: var(--text-sm);
}

.app-shell .library-page .library-version-value {
    font-family: var(--font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* CTA */
.app-shell .library-page .library-card-cta {
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--brand);
    font-size: var(--text-sm);
    font-weight: 630;
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.app-shell .library-page .library-card-cta:hover,
.app-shell .library-page .library-card-cta:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 46%, var(--border));
    background: color-mix(in srgb, var(--brand) 8%, var(--surface));
    color: var(--brand);
}

.app-shell .library-page .library-card-cta-arrow {
    transition: transform var(--motion-base) var(--ease-spring);
}

.app-shell .library-page .library-card-cta:hover .library-card-cta-arrow {
    transform: translateX(3px);
}

.app-shell .library-page .library-card-action-status {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
}

.app-shell .library-page .library-card-action-status:empty {
    display: none;
}

/* Empty / loading / error states */
.app-shell .library-page .library-state h3 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-xl);
    font-weight: 560;
    letter-spacing: -.012em;
}

.app-shell .library-page .library-state .empty-state-icon {
    border: 1px solid color-mix(in srgb, var(--aurum) 32%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--aurum) 10%, var(--surface));
    color: var(--aurum);
}

.app-shell .library-page .library-state-error {
    border-left: 3px solid var(--danger);
}

.app-shell .library-page .library-state-error .empty-state-icon {
    border-color: color-mix(in srgb, var(--danger) 34%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

.app-shell .library-page .library-loading span {
    border-radius: var(--radius-pill);
    background:
        linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--ink) 6%, transparent) 50%, transparent 62%) 0 0 / 240% 100%,
        var(--subtle);
    animation: ds3-d-shimmer 1.8s var(--ease-out) infinite;
}

.app-shell .library-page .library-session-note {
    border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border));
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    color: var(--warning);
    font-size: var(--text-sm);
}

/* Conversion & library dialogs: content styling only (chrome is global). */
.template-conversion-provenance:not(:empty) {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--info) 30%, var(--border));
    border-radius: var(--radius-sm);
    background: var(--info-soft);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
}

.template-conversion-review textarea {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.7;
    tab-size: 2;
}

.library-dialog .eyebrow,
.template-conversion-dialog .eyebrow {
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
}

/* ── Responsive refinements down to 360px ────────────────────────────────── */

@media (max-width: 480px) {
    .app-shell .drafting-page .drafting-step-navigation {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .app-shell .drafting-page .drafting-step-navigation button {
        min-height: 56px;
        padding: var(--space-3) var(--space-4);
    }

    .app-shell .drafting-page .drafting-header-meta {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .app-shell .drafting-page .drafting-preview-output,
    .app-shell .drafting-page .drafting-result-output {
        width: calc(100% - 2 * var(--space-3));
        max-height: 62vh;
    }

    .app-shell .drafting-page .drafting-step-pager {
        flex-wrap: wrap;
    }

    .app-shell .drafting-page .drafting-step-crumb {
        order: -1;
        width: 100%;
        text-align: center;
    }

    .app-shell .library-page .library-grid {
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .app-shell .library-page .library-spotlight {
        padding: var(--space-4);
    }
}

@media (max-width: 380px) {
    .app-shell .drafting-page .drafting-handoff-submit-row,
    .app-shell .drafting-page .drafting-inline-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .app-shell .drafting-page .drafting-handoff-submit-row button,
    .app-shell .drafting-page .drafting-inline-actions button {
        width: 100%;
    }
}

/* ── Motion & forced-colors guards ───────────────────────────────────────── */

@keyframes ds3-d-shimmer {
    to { background-position: -240% 0, 0 0; }
}

@keyframes ds3-d-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes ds3-d-pulse {
    0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 28%, transparent); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .drafting-page [data-drafting-step-panel]:not([hidden]),
    .app-shell .drafting-page .drafting-status-dot,
    .app-shell .drafting-page .drafting-handoff-loading span,
    .app-shell .drafting-page .drafting-preview-state[data-state="checking"],
    .app-shell .drafting-page :where(.drafting-library-context, .drafting-matter-context)[data-state="loading"],
    .app-shell .library-page .library-loading span {
        animation: none;
    }

    .app-shell .drafting-page .workflow-steps li:hover,
    .app-shell .drafting-page .primary-button:hover:not(:disabled),
    .app-shell .library-page .library-card:hover,
    .app-shell .library-page .library-card-cta:hover .library-card-cta-arrow {
        transform: none;
    }
}

[data-reduced-motion="true"] .app-shell .drafting-page [data-drafting-step-panel]:not([hidden]),
[data-reduced-motion="true"] .app-shell .drafting-page .drafting-status-dot,
[data-reduced-motion="true"] .app-shell .drafting-page .drafting-handoff-loading span,
[data-reduced-motion="true"] .app-shell .drafting-page .drafting-preview-state[data-state="checking"],
[data-reduced-motion="true"] .app-shell .drafting-page :where(.drafting-library-context, .drafting-matter-context)[data-state="loading"],
[data-reduced-motion="true"] .app-shell .library-page .library-loading span {
    animation: none;
}

@media (forced-colors: active) {
    .app-shell .drafting-page .drafting-step-navigation button[data-state="current"] {
        border: 2px solid Highlight;
    }

    .app-shell .drafting-page .drafting-step-navigation button[data-state="complete"] > span,
    .app-shell .drafting-page .drafting-handoff-steps li[data-state="complete"] span {
        border: 2px solid Highlight;
    }

    .app-shell .drafting-page .drafting-preview-output,
    .app-shell .drafting-page .drafting-result-output,
    .app-shell .library-page .library-card,
    .app-shell .library-page .library-status {
        border: 1px solid ButtonText;
        forced-color-adjust: auto;
    }

    .app-shell .drafting-page .drafting-preview-state,
    .app-shell .drafting-page .drafting-mapping-state,
    .app-shell .drafting-page .drafting-handoff-badge {
        border: 1px solid ButtonText;
    }
}
/* ===== end DS3 · Drafting & Library ===== */

/* ─────────── DS3 section: f6-ops-admin.css ─────────── */
/* ===== DS3 · Calendar, Tasks, Search, Notifications, Approvals, Notes, Admin, Billing ===== */
/* Appended after every legacy layer: equal-specificity selectors win by order.
   Selector text is copied verbatim from the legacy layer wherever legacy used
   higher-specificity forms (.app-shell …, [data-theme="dark"] .app-shell …). */

/* ---------------------------------------------------------------- Calendar */

.app-shell .cal-board {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    gap: 18px;
    align-items: start;
}

.app-shell .cal-month-panel,
.app-shell .cal-agenda-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.app-shell .cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.app-shell .cal-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-shell .cal-month-label {
    min-width: 10ch;
    color: var(--ink);
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: .01em;
    text-align: center;
}

.app-shell .cal-toolbar-side {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-shell .cal-count {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.app-shell .cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
}

.app-shell .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.app-shell .cal-day {
    position: relative;
    display: grid;
    place-items: center;
    gap: 2px;
    aspect-ratio: 1 / .92;
    min-height: 44px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-fast) var(--ease-out);
}

.app-shell .cal-day:hover {
    border-color: var(--border);
    background: var(--subtle);
}

.app-shell .cal-day:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.app-shell .cal-day-outside {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    cursor: default;
}

.app-shell .cal-day.has-events {
    border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
    background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}

.app-shell .cal-day.is-today {
    border-color: color-mix(in srgb, var(--aurum) 55%, var(--border));
    background: color-mix(in srgb, var(--aurum) 9%, var(--surface));
    color: var(--ink);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aurum) 30%, transparent);
}

.app-shell .cal-day.is-selected {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    box-shadow: 0 6px 16px -8px var(--brand);
}

.app-shell .cal-dots {
    display: inline-flex;
    gap: 3px;
    font-style: normal;
}

.app-shell .cal-dots i {
    width: 4px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--brand);
}

.app-shell .cal-day.is-today .cal-dots i {
    background: var(--aurum);
}

.app-shell .cal-day.is-selected .cal-dots i {
    background: #fff;
}

.app-shell .cal-hint {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: var(--text-xs);
}

.app-shell .cal-agenda {
    display: grid;
    gap: 18px;
    max-height: min(64vh, 620px);
    overflow-y: auto;
    padding-right: 4px;
}

.app-shell .cal-agenda-group + .cal-agenda-group {
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.app-shell .cal-date-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    color: var(--ink);
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-md);
    font-weight: 600;
}

.app-shell .cal-relative {
    padding: 2px 9px;
    border: 1px solid color-mix(in srgb, var(--aurum) 45%, var(--border));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--aurum) 12%, var(--surface));
    color: var(--aurum);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.app-shell .cal-event-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-shell .cal-event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid color-mix(in srgb, var(--brand) 55%, var(--border));
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out),
        background-color var(--motion-base) var(--ease-out);
}

.app-shell .cal-event:hover {
    border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
    background: color-mix(in srgb, var(--brand) 4%, var(--surface));
    box-shadow: var(--shadow-sm);
}

.app-shell .cal-event-time {
    min-width: 5ch;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.app-shell .cal-all-day {
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
}

.app-shell .cal-event-main {
    min-width: 0;
}

.app-shell .cal-event-main a {
    color: var(--ink);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
}

.app-shell .cal-event-main a:hover {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.app-shell .cal-event-main p {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Legacy dark rules carry hardcoded colors at higher specificity; re-point
   them at tokens so the calendar rethemes with the Midnight palette. */
[data-theme="dark"] .app-shell .cal-month-label,
[data-theme="dark"] .app-shell .cal-date-head {
    color: var(--ink);
}

[data-theme="dark"] .app-shell .cal-count,
[data-theme="dark"] .app-shell .cal-hint,
[data-theme="dark"] .app-shell .cal-event-time,
[data-theme="dark"] .app-shell .cal-event-main p {
    color: var(--muted);
}

[data-theme="dark"] .app-shell .cal-day {
    border-color: transparent;
    background: transparent;
    color: var(--ink);
}

[data-theme="dark"] .app-shell .cal-day:hover {
    border-color: var(--border);
    background: var(--subtle);
}

[data-theme="dark"] .app-shell .cal-day.has-events {
    border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
    background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}

[data-theme="dark"] .app-shell .cal-day.is-today {
    border-color: color-mix(in srgb, var(--aurum) 50%, var(--border));
    background: color-mix(in srgb, var(--aurum) 14%, var(--surface));
    color: var(--ink);
}

[data-theme="dark"] .app-shell .cal-day.is-selected {
    border-color: color-mix(in srgb, var(--brand) 70%, var(--border));
    background: color-mix(in srgb, var(--brand) 32%, var(--surface));
    color: var(--ink);
    box-shadow: 0 6px 18px -10px var(--brand);
}

[data-theme="dark"] .app-shell .cal-dots i {
    background: var(--brand);
}

[data-theme="dark"] .app-shell .cal-day.is-today .cal-dots i {
    background: var(--aurum);
}

[data-theme="dark"] .app-shell .cal-day.is-selected .cal-dots i {
    background: var(--ink);
}

[data-theme="dark"] .app-shell .cal-event {
    border-color: var(--border);
    border-left-color: color-mix(in srgb, var(--brand) 60%, var(--border));
    background: var(--surface);
}

[data-theme="dark"] .app-shell .cal-event:hover {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
    background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}

[data-theme="dark"] .app-shell .cal-event-main a {
    color: var(--ink);
}

[data-theme="dark"] .app-shell .cal-event-main a:hover {
    color: var(--brand);
}

[data-theme="dark"] .app-shell .cal-relative {
    border-color: color-mix(in srgb, var(--aurum) 45%, var(--border));
    background: color-mix(in srgb, var(--aurum) 14%, var(--surface));
    color: var(--aurum);
}

/* Event dialog: attendees fieldset and lead-time hint. */
.work-dialog .form-hint {
    margin: -4px 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.work-dialog [data-event-attendees-field] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 60%, var(--surface));
}

.work-dialog [data-event-attendee-list] {
    display: grid;
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
}

.work-dialog [data-event-attendee-list] .settings-check {
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.work-dialog [data-event-attendee-list] .settings-check:hover {
    background: color-mix(in srgb, var(--brand) 6%, transparent);
}

/* Deadline acceptance: reminder modal + explicit transition feedback. */
.reminder-modal {
    border-top: 3px solid var(--warning);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

[data-deadline-transition-status][data-state] {
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

[data-deadline-transition-status][data-state="submitting"] {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
    background: color-mix(in srgb, var(--brand) 8%, var(--surface));
    color: var(--brand);
}

[data-deadline-transition-status][data-state="success"] {
    border-color: color-mix(in srgb, var(--success) 40%, var(--border));
    background: var(--success-soft, color-mix(in srgb, var(--success) 10%, var(--surface)));
    color: var(--success);
}

[data-deadline-transition-status][data-state="conflict"] {
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
    background: var(--warning-soft, color-mix(in srgb, var(--warning) 10%, var(--surface)));
    color: var(--warning);
}

[data-deadline-transition-status][data-state="unauthorized"],
[data-deadline-transition-status][data-state="error"] {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
    background: var(--danger-soft, color-mix(in srgb, var(--danger) 10%, var(--surface)));
    color: var(--danger);
}

/* ------------------------------------------------------------------- Tasks */

.work-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.work-record {
    transition: border-color var(--motion-base) var(--ease-out),
        background-color var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out);
}

.work-record:hover {
    background: color-mix(in srgb, var(--brand) 4%, transparent);
}

.work-record-meta {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

.work-detail-header h2 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    letter-spacing: .005em;
}

.work-state-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.work-state-pill[data-work-state="done"],
.work-state-pill[data-task-state-label="done"],
.work-state-pill[data-deadline-state="accepted"] {
    border-color: color-mix(in srgb, var(--success) 40%, var(--border));
    background: var(--success-soft, color-mix(in srgb, var(--success) 12%, var(--surface)));
    color: var(--success);
}

.work-state-pill[data-work-state="blocked"],
.work-state-pill[data-task-state-label="blocked"],
.work-state-pill[data-deadline-state="proposed"] {
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
    background: var(--warning-soft, color-mix(in srgb, var(--warning) 12%, var(--surface)));
    color: var(--warning);
}

.work-state-pill[data-work-state="in_progress"],
.work-state-pill[data-task-state-label="in_progress"] {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
    background: var(--brand-soft, color-mix(in srgb, var(--brand) 10%, var(--surface)));
    color: var(--brand);
}

.work-state-pill[data-work-state="cancelled"],
.work-state-pill[data-task-state-label="cancelled"],
.work-state-pill[data-deadline-state="cancelled"] {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--muted);
}

.work-metadata {
    gap: 10px 18px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 55%, var(--surface));
}

.work-metadata dt {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.work-metadata dd {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.work-dependencies {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.work-count {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
    border-radius: var(--radius-pill);
    background: var(--brand-soft, color-mix(in srgb, var(--brand) 10%, var(--surface)));
    color: var(--brand);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.work-dependency-row {
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--subtle) 50%, var(--surface));
}

.work-dependency-icon {
    color: var(--muted);
}

.work-blocked-note {
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    background: var(--warning-soft, color-mix(in srgb, var(--warning) 9%, var(--surface)));
}

.work-blocked-note strong {
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 700;
}

.work-blocked-note p {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}

/* Transition feedback: the attribute drives the visual state. */
.work-detail[data-task-transition-state] {
    border-radius: var(--radius-md);
    transition: box-shadow var(--motion-base) var(--ease-out),
        opacity var(--motion-base) var(--ease-out);
}

.work-detail[data-task-transition-state="loading"] {
    opacity: .6;
}

.work-detail[data-task-transition-state="success"] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 30%, transparent);
}

.work-detail[data-task-transition-state="conflict"] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 35%, transparent);
}

.work-detail[data-task-transition-state="error"] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 30%, transparent);
}

.work-transition-status[data-state="submitting"] {
    color: var(--brand);
}

.work-transition-status[data-state="conflict"] {
    color: var(--warning);
}

.work-transition-status[data-state="error"] {
    color: var(--danger);
}

.work-transition-status[data-state="success"] {
    color: var(--success);
}

/* ------------------------------------------------------------------ Search */

.app-shell .search-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.app-shell .search-command {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 6px 6px 6px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-xs);
    transition: border-color var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out);
}

.app-shell .search-command:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent), var(--shadow-sm);
}

.app-shell .search-command-icon {
    color: var(--muted);
    font-size: var(--text-lg);
}

.app-shell .search-command input {
    min-height: 40px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    font-size: var(--text-md);
}

.app-shell .search-command .secondary-button {
    border-radius: var(--radius-pill);
}

.app-shell .search-scope-note {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    color: var(--muted);
    font-size: var(--text-sm);
}

.app-shell .search-scope-note .micro-label {
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.app-shell .search-results-state {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.app-shell .search-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.app-shell .search-summary strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-lg);
    font-weight: 600;
}

.app-shell .search-summary span {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.app-shell .search-partial-note {
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
    border-radius: var(--radius-sm);
    background: var(--warning-soft, color-mix(in srgb, var(--warning) 9%, var(--surface)));
    color: var(--warning);
    font-size: var(--text-sm);
}

.app-shell .search-result-list {
    gap: 8px;
}

.app-shell .search-result-row {
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out);
}

.app-shell .search-result-row:hover {
    border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
    background: color-mix(in srgb, var(--brand) 3%, var(--surface));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.app-shell .search-result-avatar {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--subtle) 70%, var(--surface));
    color: var(--muted);
    font-family: var(--font-display);
    font-size: var(--text-md);
}

.app-shell .search-result-title-line a {
    color: var(--ink);
    font-weight: 650;
}

.app-shell .search-result-title-line a:hover {
    color: var(--brand);
}

.app-shell .search-result-meta {
    color: var(--muted);
    font-size: var(--text-sm);
}

.app-shell .search-type-chip {
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .06em;
}

.app-shell .search-type--client {
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
    background: var(--success-soft, color-mix(in srgb, var(--success) 10%, var(--surface)));
    color: var(--success);
}

.app-shell .search-type--matter {
    border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
    background: var(--brand-soft, color-mix(in srgb, var(--brand) 9%, var(--surface)));
    color: var(--brand);
}

.app-shell .search-type--document {
    border-color: color-mix(in srgb, var(--info) 38%, var(--border));
    background: var(--info-soft, color-mix(in srgb, var(--info) 10%, var(--surface)));
    color: var(--info);
}

.app-shell .search-type--template,
.app-shell .search-type--clause {
    border-color: color-mix(in srgb, var(--aurum) 42%, var(--border));
    background: color-mix(in srgb, var(--aurum) 10%, var(--surface));
    color: var(--aurum);
}

.app-shell .search-type--task {
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
    background: var(--warning-soft, color-mix(in srgb, var(--warning) 10%, var(--surface)));
    color: var(--warning);
}

.app-shell .search-result-state {
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
}

.app-shell .search-result-state--active {
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
    background: var(--success-soft, color-mix(in srgb, var(--success) 10%, var(--surface)));
    color: var(--success);
}

.app-shell .search-result-state--ready {
    border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
    background: var(--brand-soft, color-mix(in srgb, var(--brand) 9%, var(--surface)));
    color: var(--brand);
}

.app-shell .search-result-state--archived,
.app-shell .search-result-state--quarantined {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
    background: var(--danger-soft, color-mix(in srgb, var(--danger) 9%, var(--surface)));
    color: var(--danger);
}

/* Neutralize the hardcoded dark chip palette: tokens already retheme. */
[data-theme="dark"] .app-shell .search-type--client,
[data-theme="dark"] .app-shell .search-result-state--active {
    border-color: color-mix(in srgb, var(--success) 40%, var(--border));
    background: var(--success-soft, color-mix(in srgb, var(--success) 14%, var(--surface)));
    color: var(--success);
}

[data-theme="dark"] .app-shell .search-type--matter,
[data-theme="dark"] .app-shell .search-result-state--ready {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
    background: var(--brand-soft, color-mix(in srgb, var(--brand) 14%, var(--surface)));
    color: var(--brand);
}

[data-theme="dark"] .app-shell .search-type--document {
    border-color: color-mix(in srgb, var(--info) 42%, var(--border));
    background: var(--info-soft, color-mix(in srgb, var(--info) 14%, var(--surface)));
    color: var(--info);
}

[data-theme="dark"] .app-shell .search-result-state--archived,
[data-theme="dark"] .app-shell .search-result-state--quarantined {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
    background: var(--danger-soft, color-mix(in srgb, var(--danger) 14%, var(--surface)));
    color: var(--danger);
}

[data-theme="dark"] .app-shell .search-partial-note {
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
    background: var(--warning-soft, color-mix(in srgb, var(--warning) 12%, var(--surface)));
    color: var(--warning);
}

.app-shell .enterprise-loading::before {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 35%, transparent), transparent);
    animation: ds3-o-sweep 1.8s var(--ease-out) infinite;
}

@keyframes ds3-o-sweep {
    0% { transform: translateX(-140%); }
    100% { transform: translateX(140%); }
}

/* ----------------------------------------------------------- Notifications */

.notification-button {
    position: relative;
}

.notification-button b,
.notification-button [data-notification-count] {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid var(--surface);
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.notification-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-lg);
    animation: ds3-o-drop var(--motion-base) var(--ease-out) both;
}

@keyframes ds3-o-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.notification-panel-header {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--subtle) 55%, var(--surface));
}

.notification-panel-header strong {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: .01em;
}

.notification-panel-body {
    padding: 8px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.notification-list {
    gap: 4px;
}

.notification-item {
    padding: 10px 12px;
    border: 1px solid transparent;
    border-left: 3px solid var(--border);
    border-radius: var(--radius-sm);
    transition: background-color var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out);
}

.notification-item:hover {
    border-color: var(--border);
    border-left-width: 3px;
    background: var(--subtle);
}

.notification-item[data-tone="success"] { border-left-color: var(--success); }
.notification-item[data-tone="warning"] { border-left-color: var(--warning); }
.notification-item[data-tone="error"] { border-left-color: var(--danger); }
.notification-item[data-tone="info"] { border-left-color: var(--brand); }
.notification-item[data-tone="muted"] { border-left-color: var(--border-strong); }

.notification-item strong,
.notification-item a {
    color: var(--ink);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
}

.notification-item a:hover {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.notification-meta {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.notification-panel-footer {
    padding: 11px 16px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--subtle) 55%, var(--surface));
}

.notification-panel-footer a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

.notification-panel-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------- Approvals */

.approval-views {
    display: inline-flex;
    gap: 4px;
    margin: 18px 0 8px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--subtle);
}

.approval-views [data-approval-view] {
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-weight: 600;
}

.approval-views [data-approval-view]:hover:not(:disabled) {
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--ink);
    transform: none;
}

.approval-views .is-active {
    border-color: var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    color: var(--ink);
}

.approval-views .is-active:hover:not(:disabled) {
    background: var(--surface);
    color: var(--ink);
}

.approval-list {
    gap: 14px;
}

/* Decisions should feel weighty: engraved card, state rail, serif resource. */
.approval-card {
    position: relative;
    gap: 14px;
    padding: 18px 20px 18px 23px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.approval-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--border-strong);
}

.approval-card[data-approval-state="pending"]::before { background: var(--brand); }
.approval-card[data-approval-state="overdue"]::before { background: var(--danger); }
.approval-card[data-approval-state="approved"]::before { background: var(--success); }
.approval-card[data-approval-state="rejected"]::before { background: var(--danger); }

.approval-card[data-approval-state="overdue"] {
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}

.approval-card[data-approval-state="cancelled"],
.approval-card[data-approval-state="expired"],
.approval-card[data-approval-state="reassigned"] {
    background: color-mix(in srgb, var(--subtle) 45%, var(--surface));
}

.approval-card-top strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: capitalize;
}

.approval-card-top code {
    margin-top: 4px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}

.approval-status {
    padding: 4px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.approval-status[data-state="pending"] {
    border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
    background: var(--brand-soft, color-mix(in srgb, var(--brand) 9%, var(--surface)));
    color: var(--brand);
}

.approval-status[data-state="overdue"] {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
    background: var(--danger-soft, color-mix(in srgb, var(--danger) 10%, var(--surface)));
    color: var(--danger);
}

.approval-status[data-state="approved"] {
    border-color: color-mix(in srgb, var(--success) 38%, var(--border));
    background: var(--success-soft, color-mix(in srgb, var(--success) 10%, var(--surface)));
    color: var(--success);
}

.approval-status[data-state="rejected"] {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
    background: var(--danger-soft, color-mix(in srgb, var(--danger) 10%, var(--surface)));
    color: var(--danger);
}

.approval-status[data-state="cancelled"],
.approval-status[data-state="expired"],
.approval-status[data-state="reassigned"] {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--muted);
}

.approval-card .metadata-grid {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 55%, var(--surface));
}

.approval-card .metadata-grid dt {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.approval-card .metadata-grid dd {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.approval-decision-form {
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.approval-decision-form label {
    display: grid;
    gap: 6px;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 600;
}

.approval-decision-form input[name="reason"] {
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 0 12px;
    font-weight: 400;
}

.approval-decision-form input[name="reason"]:focus-visible {
    border-color: var(--brand);
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

.approval-actions {
    gap: 10px;
}

.approval-actions .primary-button,
.approval-actions .secondary-button {
    min-height: 42px;
    padding-inline: 18px;
}

.approval-doc-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 60%, var(--surface));
}

.approval-doc-list li {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: var(--text-sm);
}

.approval-approvers {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.approval-approvers legend {
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.send-approval-modal {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* ------------------------------------------------------------------- Notes */

.notes-page .workspace-search input {
    border-radius: var(--radius-pill);
    padding-inline: 16px;
}

.note-grid {
    gap: 16px;
}

/* Six colour variants harmonized with the Counsel palette: every wash is
   derived from a token so both themes stay coherent. */
.note-card {
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--note-edge, var(--border));
    border-top: 3px solid var(--note-edge, var(--border));
    border-radius: var(--radius-md);
    background: var(--note-bg, var(--surface));
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out);
}

.note-card:focus-within {
    box-shadow: var(--shadow-md);
}

.note-card[data-colour="yellow"] {
    --note-bg: color-mix(in srgb, var(--aurum) 10%, var(--surface));
    --note-edge: color-mix(in srgb, var(--aurum) 45%, var(--border));
}

.note-card[data-colour="green"] {
    --note-bg: color-mix(in srgb, var(--success) 8%, var(--surface));
    --note-edge: color-mix(in srgb, var(--success) 38%, var(--border));
}

.note-card[data-colour="blue"] {
    --note-bg: color-mix(in srgb, var(--brand) 7%, var(--surface));
    --note-edge: color-mix(in srgb, var(--brand) 32%, var(--border));
}

.note-card[data-colour="pink"] {
    --note-bg: color-mix(in srgb, var(--danger) 7%, var(--surface));
    --note-edge: color-mix(in srgb, var(--danger) 30%, var(--border));
}

.note-card[data-colour="purple"] {
    --note-bg: color-mix(in srgb, var(--brand) 5%, color-mix(in srgb, var(--danger) 5%, var(--surface)));
    --note-edge: color-mix(in srgb, var(--brand) 20%, color-mix(in srgb, var(--danger) 22%, var(--border)));
}

.note-card[data-colour="grey"] {
    --note-bg: color-mix(in srgb, var(--subtle) 70%, var(--surface));
    --note-edge: var(--border-strong);
}

[data-theme="dark"] .note-card[data-colour="yellow"] {
    --note-bg: color-mix(in srgb, var(--aurum) 12%, var(--surface));
    --note-edge: color-mix(in srgb, var(--aurum) 40%, var(--border));
}

[data-theme="dark"] .note-card[data-colour="green"] {
    --note-bg: color-mix(in srgb, var(--success) 11%, var(--surface));
    --note-edge: color-mix(in srgb, var(--success) 36%, var(--border));
}

[data-theme="dark"] .note-card[data-colour="blue"] {
    --note-bg: color-mix(in srgb, var(--brand) 12%, var(--surface));
    --note-edge: color-mix(in srgb, var(--brand) 36%, var(--border));
}

[data-theme="dark"] .note-card[data-colour="pink"] {
    --note-bg: color-mix(in srgb, var(--danger) 11%, var(--surface));
    --note-edge: color-mix(in srgb, var(--danger) 34%, var(--border));
}

[data-theme="dark"] .note-card[data-colour="purple"] {
    --note-bg: color-mix(in srgb, var(--brand) 8%, color-mix(in srgb, var(--danger) 7%, var(--surface)));
    --note-edge: color-mix(in srgb, var(--brand) 22%, color-mix(in srgb, var(--danger) 20%, var(--border)));
}

[data-theme="dark"] .note-card[data-colour="grey"] {
    --note-bg: color-mix(in srgb, var(--subtle) 80%, var(--surface));
    --note-edge: var(--border-strong);
}

.note-title {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: .005em;
}

.note-title:focus-visible,
.note-body:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 3px;
}

.note-body {
    color: var(--ink);
    font-size: var(--text-base);
    line-height: 1.55;
}

.note-pin {
    width: 34px;
    min-height: 34px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-size: var(--text-md);
}

.note-pin:hover:not(:disabled) {
    border-color: var(--note-edge, var(--border));
    background: color-mix(in srgb, var(--note-edge, var(--border)) 18%, transparent);
    color: var(--aurum);
    transform: none;
}

.note-pin[aria-pressed="true"] {
    color: var(--aurum);
}

.note-items {
    gap: 6px;
}

.note-item {
    padding: 3px 0;
    font-size: var(--text-base);
}

.note-item input[type="checkbox"] {
    accent-color: var(--brand);
}

.note-item.is-checked span {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent);
}

.note-add-item input {
    min-height: 36px;
    border: 1px solid var(--note-edge, var(--border));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    font-size: var(--text-sm);
}

.note-add-item input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

.note-card-foot {
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--note-edge, var(--border)) 55%, transparent);
}

.note-colours {
    gap: 6px;
}

.note-colour {
    width: 20px;
    height: 20px;
    border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    border-radius: var(--radius-pill);
    transition: transform var(--motion-fast) var(--ease-spring),
        box-shadow var(--motion-fast) var(--ease-out);
}

.note-colour:hover {
    transform: scale(1.15);
}

.note-colour:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.note-colour[data-note-colour="yellow"] { background: color-mix(in srgb, var(--aurum) 55%, var(--surface)); }
.note-colour[data-note-colour="green"] { background: color-mix(in srgb, var(--success) 45%, var(--surface)); }
.note-colour[data-note-colour="blue"] { background: color-mix(in srgb, var(--brand) 40%, var(--surface)); }
.note-colour[data-note-colour="pink"] { background: color-mix(in srgb, var(--danger) 38%, var(--surface)); }
.note-colour[data-note-colour="purple"] { background: color-mix(in srgb, var(--brand) 25%, color-mix(in srgb, var(--danger) 28%, var(--surface))); }
.note-colour[data-note-colour="grey"] { background: color-mix(in srgb, var(--muted) 40%, var(--surface)); }

.note-colour[data-active="true"] {
    box-shadow: 0 0 0 2px var(--note-bg, var(--surface)), 0 0 0 4px var(--brand);
}

/* ------------------------------------------------------------------- Admin */

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 4px 0 18px;
    padding: 0 0 2px;
    border-bottom: 1px solid var(--border);
}

.admin-tabs a {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 650;
    text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out);
}

.admin-tabs a::after {
    content: "";
    position: absolute;
    inset: auto 10px -3px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.admin-tabs a:hover,
.admin-tabs a:focus-visible {
    background: var(--subtle);
    color: var(--brand);
}

.admin-tabs a:hover::after,
.admin-tabs a:focus-visible::after {
    background: var(--aurum);
}

.admin-tabs a span {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 500;
}

.admin-grid {
    gap: 18px;
}

.admin-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: 84px;
}

.admin-state-badge {
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--aurum) 40%, var(--border));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--aurum) 8%, var(--surface));
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-user-summary {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 55%, var(--surface));
}

.admin-meta-grid div {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
}

.admin-meta-grid small {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-meta-grid strong {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.admin-invite-form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.admin-form-heading strong {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-md);
    font-weight: 600;
}

.admin-form-heading span {
    color: var(--muted);
    font-size: var(--text-sm);
}

.admin-membership-summary {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 55%, var(--surface));
}

.admin-membership-summary strong {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-md);
    font-weight: 600;
}

.admin-membership-summary span {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .app-shell .admin-membership-summary {
    border-color: var(--border);
    background: color-mix(in srgb, var(--subtle) 55%, var(--surface));
    color: var(--ink);
}

[data-theme="dark"] .app-shell .admin-membership-summary span {
    color: var(--muted);
}

.admin-member-row {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out);
}

.admin-member-row:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.admin-current-member {
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft, color-mix(in srgb, var(--brand) 12%, var(--surface)));
}

[data-theme="dark"] .app-shell .admin-current-member {
    background: var(--brand-soft, color-mix(in srgb, var(--brand) 18%, var(--surface)));
}

.admin-role-pill,
.admin-state-pill {
    min-height: 24px;
    padding: 2px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .04em;
}

.admin-role-pill {
    background: var(--brand-soft, color-mix(in srgb, var(--brand) 9%, var(--surface)));
    border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
    color: var(--brand);
}

.admin-state-pill {
    background: var(--subtle);
    color: var(--muted);
}

.admin-state-active {
    border-color: color-mix(in srgb, var(--success) 38%, var(--border));
    background: var(--success-soft, color-mix(in srgb, var(--success) 10%, var(--surface)));
    color: var(--success);
}

.admin-state-invited {
    border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
    background: var(--brand-soft, color-mix(in srgb, var(--brand) 9%, var(--surface)));
    color: var(--brand);
}

.admin-state-suspended {
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
    background: var(--warning-soft, color-mix(in srgb, var(--warning) 10%, var(--surface)));
    color: var(--warning);
}

.admin-state-closed,
.admin-state-unknown {
    color: var(--muted);
}

[data-theme="dark"] .app-shell .admin-state-active {
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
    background: var(--success-soft, color-mix(in srgb, var(--success) 14%, var(--surface)));
    color: var(--success);
}

[data-theme="dark"] .app-shell .admin-state-invited {
    border-color: color-mix(in srgb, var(--brand) 38%, var(--border));
    background: var(--brand-soft, color-mix(in srgb, var(--brand) 14%, var(--surface)));
    color: var(--brand);
}

[data-theme="dark"] .app-shell .admin-state-suspended {
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
    background: var(--warning-soft, color-mix(in srgb, var(--warning) 14%, var(--surface)));
    color: var(--warning);
}

[data-theme="dark"] .app-shell .admin-state-closed {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--muted);
}

/* Sessions: a governance inventory — mono metadata, lifecycle-tinted cards. */
.admin-session-summary {
    align-items: baseline;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: var(--text-sm);
}

.admin-session-summary strong {
    color: var(--brand);
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -.02em;
}

.admin-session-inventory {
    gap: 10px;
}

.admin-session-card {
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out);
}

.admin-session-card.is-current {
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
    background: color-mix(in srgb, var(--success) 4%, var(--surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 14%, transparent), var(--shadow-xs);
}

.admin-session-card[data-admin-session-state="expiring"] {
    border-color: color-mix(in srgb, var(--warning) 48%, var(--border));
    background: color-mix(in srgb, var(--warning) 5%, var(--surface));
}

.admin-session-card[data-admin-session-state="revoked"],
.admin-session-card[data-admin-session-state="expired"] {
    border-color: color-mix(in srgb, var(--danger) 32%, var(--border));
    background: color-mix(in srgb, var(--danger) 4%, var(--surface));
}

.admin-session-card-header strong {
    font-size: var(--text-base);
    font-weight: 650;
}

/* Badge text colors are locked by legacy !important (var(--muted), #17653a,
   var(--warning), var(--danger)); backgrounds below are chosen so each locked
   color stays AA-readable in both themes. */
.admin-session-badge {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .05em;
}

.admin-session-card.is-current .admin-session-badge {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
    background: color-mix(in srgb, var(--success) 16%, var(--surface));
}

[data-theme="dark"] .admin-session-card.is-current .admin-session-badge {
    /* Locked #17653a text needs a pale plate even in Midnight. */
    background: color-mix(in srgb, var(--success) 30%, var(--ink));
}

.admin-session-card[data-admin-session-state="expiring"] .admin-session-badge {
    border-color: color-mix(in srgb, var(--warning) 48%, var(--border));
    background: var(--warning-soft, color-mix(in srgb, var(--warning) 12%, var(--surface)));
}

.admin-session-card[data-admin-session-state="revoked"] .admin-session-badge,
.admin-session-card[data-admin-session-state="expired"] .admin-session-badge {
    border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
    background: var(--danger-soft, color-mix(in srgb, var(--danger) 10%, var(--surface)));
}

.admin-session-meta {
    gap: 8px 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.admin-session-meta dt {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-session-meta dd {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.admin-session-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.admin-session-section-heading h3 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-md);
    font-weight: 600;
}

.admin-session-safety {
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border));
    border-radius: var(--radius-pill);
    background: var(--success-soft, color-mix(in srgb, var(--success) 10%, var(--surface)));
    color: var(--success);
    font-size: var(--text-xs);
    font-weight: 700;
}

.admin-current-session-card {
    gap: 12px;
}

.admin-session-revocation {
    gap: 8px;
    padding: 13px 15px;
    border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-md);
    background: var(--warning-soft, color-mix(in srgb, var(--warning) 7%, var(--surface)));
}

.admin-revoke-sessions-button {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
    color: var(--danger);
}

.admin-revoke-sessions-button:hover:not(:disabled) {
    border-color: var(--danger);
    background: var(--danger-soft, color-mix(in srgb, var(--danger) 9%, var(--surface)));
    color: var(--danger);
}

.admin-session-terminal-note {
    color: var(--danger);
    font-size: var(--text-sm);
}

.admin-protected-state,
.admin-empty-state {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 55%, var(--surface));
}

.admin-note {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.admin-list li {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

/* Roles */
.admin-role-grid {
    gap: 12px;
}

.admin-role-card {
    padding: 15px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out);
}

.admin-role-card.is-current {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 15%, transparent), var(--shadow-xs);
}

.admin-role-heading h3 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-md);
    font-weight: 600;
}

.admin-role-icon {
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
    border-radius: var(--radius-sm);
    background: var(--brand-soft, color-mix(in srgb, var(--brand) 9%, var(--surface)));
    color: var(--brand);
}

.admin-role-count {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.admin-role-current {
    color: var(--brand);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.admin-role-card small {
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

/* Region */
.admin-region-form {
    display: grid;
    gap: 12px;
    margin-top: 4px;
}

.admin-region-form label {
    display: grid;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
}

[data-admin-region-select] {
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-weight: 500;
}

[data-admin-region-select]:focus-visible {
    border-color: var(--brand);
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

[data-admin-region-status] {
    min-height: 1.2em;
    font-size: var(--text-sm);
}

[data-admin-region-status][data-state="success"] {
    color: var(--success);
}

[data-admin-region-status][data-state="error"],
[data-admin-region-status][data-state="unauthorized"] {
    color: var(--danger);
}

.admin-region-form .primary-button {
    justify-self: start;
}

/* Approvals: the organization-wide four-eyes switch. Deliberately reuses the
   region panel's form rhythm so the two tenant-scoped policy controls read as
   one family rather than two designs. */
.admin-approvals-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 4px;
}

.admin-approvals-form .settings-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.5;
}

/* `.client-form input { width: 100% }` also matches this checkbox, which
   stretched it across the row and squeezed the label into a one-word column.
   The checkbox is a checkbox; the label takes the rest. */
.admin-approvals-form .settings-check input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
    width: 16px;
    min-width: 16px;
    padding: 0;
}

.admin-approvals-form .settings-check span {
    flex: 1 1 auto;
    font-weight: 600;
}

.admin-approvals-form > .muted {
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.6;
}

[data-admin-approvals-status] {
    min-height: 1.2em;
    font-size: var(--text-sm);
}

[data-admin-approvals-status][data-state="success"] {
    color: var(--success);
}

[data-admin-approvals-status][data-state="error"],
[data-admin-approvals-status][data-state="unauthorized"] {
    color: var(--danger);
}

.admin-approvals-form .primary-button {
    justify-self: start;
}

/* The profile dialog reports the policy and, for an owner or administrator,
   links to the control. It sits inside a <dd>, so it must read as part of the
   sentence rather than as a second button competing with the dialog's own. */
.profile-approval-link {
    padding: 0 2px;
    min-height: 0;
    font-size: inherit;
    text-decoration: underline;
}

/* Audit */
.admin-audit-panel .workspace-search {
    margin: 4px 0 12px;
}

.admin-audit-panel .workspace-search input {
    border-radius: var(--radius-pill);
    padding-inline: 16px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.admin-audit-panel .data-table td {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- Billing */

.billing-page .page-heading h1 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
}

.billing-usage-panel,
.billing-plans-panel,
.enterprise-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.usage-grid > div {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 50%, var(--surface));
    transition: border-color var(--motion-base) var(--ease-out);
}

.usage-grid dt {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.usage-grid dd {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.usage-note {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 500;
}

.usage-seats {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 50%, var(--surface));
}

.usage-seats-top {
    font-size: var(--text-sm);
}

.usage-seats-top strong {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.usage-bar {
    height: 6px;
    margin-top: 8px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--border) 70%, transparent);
    overflow: hidden;
}

.usage-bar span {
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 65%, var(--aurum)));
    transition: width var(--motion-slow) var(--ease-out);
}

.billing-plan-grid {
    gap: 16px;
}

.billing-plan-card {
    gap: 10px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out);
}

.billing-plan-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.billing-plan-card.is-current {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
    background: color-mix(in srgb, var(--brand) 3%, var(--surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 16%, transparent), var(--shadow-sm);
}

.billing-plan-card h3 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: .01em;
}

.billing-plan-price {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.billing-plan-card .primary-button,
.billing-plan-card .secondary-button {
    margin-top: 6px;
    min-height: 42px;
}

.profile-plan-badge {
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--aurum) 42%, var(--border));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--aurum) 10%, var(--surface));
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .05em;
}

[data-billing-status][data-state="error"],
[data-billing-status][data-state="unauthorized"] {
    color: var(--danger);
}

[data-billing-status][data-state="loading"] {
    color: var(--brand);
}

/* Plan-limit upgrade modal: a firm, non-alarming gate. */
.plan-limit-modal {
    border-top: 3px solid var(--aurum);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: ds3-o-settle var(--motion-slow) var(--ease-out) both;
}

@keyframes ds3-o-settle {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.plan-limit-modal .eyebrow {
    color: var(--aurum);
    letter-spacing: .14em;
}

.plan-limit-modal h2 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
}

/* --------------------------------------------------- Floating aids & shell */

.support-button {
    min-height: 36px;
    border-radius: var(--radius-pill);
    padding-inline: 15px;
    font-size: var(--text-sm);
}

.whatsapp-float {
    width: 54px;
    height: 54px;
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    border: 1px solid color-mix(in srgb, var(--surface) 35%, transparent);
    box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--ink) 55%, transparent);
    transition: transform var(--motion-base) var(--ease-spring),
        box-shadow var(--motion-base) var(--ease-out);
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    transform: scale(1.07);
    box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--ink) 60%, transparent);
}

.whatsapp-float:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* Tenant switcher panel */
.tenant-switcher-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-lg);
}

.tenant-switcher-panel-header .eyebrow {
    color: var(--aurum);
    letter-spacing: .14em;
}

.tenant-switcher-panel-header h2 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
}

.tenant-current-workspace {
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border));
    border-radius: var(--radius-md);
    background: var(--brand-soft, color-mix(in srgb, var(--brand) 7%, var(--surface)));
}

.tenant-current-workspace .eyebrow {
    color: var(--brand);
}

.tenant-membership-list {
    gap: 6px;
}

.tenant-membership-option {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--motion-base) var(--ease-out),
        background-color var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out);
}

.tenant-membership-option:hover:not(:disabled),
.tenant-membership-option:focus-visible:not(:disabled) {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
    background: color-mix(in srgb, var(--brand) 4%, var(--surface));
    box-shadow: var(--shadow-xs);
}

.tenant-membership-option:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.tenant-membership-option[aria-current="true"] {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
    background: var(--brand-soft, color-mix(in srgb, var(--brand) 8%, var(--surface)));
    box-shadow: inset 3px 0 0 var(--brand);
}

.tenant-membership-option:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.tenant-membership-state {
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
}

.tenant-membership-option[aria-current="true"] .tenant-membership-state {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
    background: var(--surface);
    color: var(--brand);
}

.tenant-switcher-feedback:empty {
    display: none;
}

.tenant-switcher-error,
.tenant-switcher-empty {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 55%, var(--surface));
}

.tenant-switcher-inline-error {
    color: var(--danger);
    font-size: var(--text-sm);
}

/* Profile menu */
.profile-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-lg);
    animation: ds3-o-drop var(--motion-base) var(--ease-out) both;
}

.profile-menu-identity {
    background: color-mix(in srgb, var(--subtle) 50%, var(--surface));
}

.profile-menu-identity strong {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--text-md);
    font-weight: 600;
}

.profile-menu-email,
.profile-menu-tenant {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.profile-menu-usage strong {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.profile-menu-item {
    min-height: 38px;
    border-radius: var(--radius-sm);
    transition: background-color var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out);
}

.profile-menu-item:hover,
.profile-menu-item:focus-visible {
    background: color-mix(in srgb, var(--brand) 6%, var(--subtle));
}

.profile-menu-item:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
}

.profile-menu-signout:hover,
.profile-menu-signout:focus-visible {
    background: var(--danger-soft, color-mix(in srgb, var(--danger) 8%, var(--surface)));
}

/* Sidebar assurance note */
.security-note {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--success) 4%, var(--surface));
    color: var(--muted);
}

.security-note small {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .02em;
}

.security-signal {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
}

.security-signal::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--success) 55%, transparent);
    animation: ds3-o-signal calc(var(--motion-slow) * 7) var(--ease-out) infinite;
}

@keyframes ds3-o-signal {
    0% { opacity: .9; transform: scale(.7); }
    70% { opacity: 0; transform: scale(1.7); }
    100% { opacity: 0; transform: scale(1.7); }
}

/* ------------------------------------------------- Density, motion, forced */

[data-density="compact"] .approval-card,
[data-density="compact"] .admin-session-card,
[data-density="compact"] .billing-plan-card,
[data-density="compact"] .note-card {
    padding: 12px 14px;
}

[data-density="compact"] .approval-card {
    padding-left: 17px;
}

[data-density="compact"] .admin-panel .panel-header {
    margin-bottom: 8px;
}

[data-density="compact"] .app-shell .cal-day {
    aspect-ratio: auto;
    min-height: 40px;
}

[data-density="compact"] .app-shell .cal-agenda {
    gap: 12px;
}

[data-reduced-motion="true"] .notification-panel,
[data-reduced-motion="true"] .profile-menu,
[data-reduced-motion="true"] .plan-limit-modal,
[data-reduced-motion="true"] .security-signal::after,
[data-reduced-motion="true"] .app-shell .enterprise-loading::before {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .notification-panel,
    .profile-menu,
    .plan-limit-modal,
    .security-signal::after,
    .app-shell .enterprise-loading::before {
        animation: none;
    }

    .app-shell .search-result-row:hover,
    .billing-plan-card:hover,
    .note-colour:hover,
    .whatsapp-float:hover,
    .whatsapp-float:focus-visible {
        transform: none;
    }
}

@media (forced-colors: active) {
    .approval-status,
    .work-state-pill,
    .admin-state-pill,
    .admin-role-pill,
    .admin-session-badge,
    .search-type-chip,
    .search-result-state,
    .tenant-membership-state {
        border: 1px solid CanvasText;
    }

    .approval-card::before,
    .notification-item,
    .work-blocked-note,
    .admin-session-revocation {
        border-color: CanvasText;
    }

    .app-shell .cal-day.is-selected {
        outline: 2px solid Highlight;
    }
}

/* ------------------------------------------------------------- Responsive */

@media (max-width: 1050px) {
    .app-shell .cal-board {
        grid-template-columns: minmax(0, 1fr);
    }

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

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

@media (max-width: 640px) {
    /* 44px touch targets across the governance surfaces. */
    .approval-views [data-approval-view],
    .approval-actions .primary-button,
    .approval-actions .secondary-button,
    .admin-tabs a,
    .note-pin,
    .notification-panel .icon-button,
    .app-shell .cal-day,
    .support-button {
        min-height: 44px;
    }

    .note-pin {
        width: 44px;
    }

    .note-colour {
        width: 26px;
        height: 26px;
    }

    .approval-card {
        padding: 14px 14px 14px 17px;
    }

    .approval-card-top {
        flex-wrap: wrap;
    }

    .approval-card .metadata-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .admin-session-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-session-section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

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

    .app-shell .cal-nav {
        justify-content: space-between;
    }

    .app-shell .cal-toolbar-side {
        justify-content: space-between;
    }

    .app-shell .cal-agenda {
        max-height: none;
    }

    .app-shell .cal-event {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .app-shell .cal-event-time {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .billing-plan-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .notification-panel {
        max-height: min(78vh, 560px);
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .app-shell .cal-grid,
    .app-shell .cal-weekdays {
        gap: 2px;
    }

    .app-shell .cal-day {
        aspect-ratio: auto;
        padding: 2px;
        font-size: var(--text-xs);
    }

    .admin-role-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-meta-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-member-row {
        flex-wrap: wrap;
    }

    .admin-member-state {
        justify-items: start;
        text-align: left;
    }

    .approval-views {
        display: flex;
        width: 100%;
    }

    .approval-views [data-approval-view] {
        flex: 1;
    }

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

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

    .app-shell .search-command {
        padding-left: 10px;
    }
}

/* ─────────── DS3 section: f7-overrides.css ─────────── */
/* ===== DS3 · Final overrides =====
   Cross-section corrections merged LAST. Two jobs:
   1. Re-assert responsive behaviors that DS3 base rules (appended after the
      legacy media queries) accidentally out-cascaded.
   2. Resolve cross-section conflicts with one authoritative rule. */

/* ── Mobile-only chrome must stay hidden on desktop ───────────────────────── */
@media (min-width: 901px) {
    .app-shell .mobile-menu.mobile-menu,
    .app-shell .sidebar-close.sidebar-close {
        display: none;
    }
}

@media (max-width: 900px) {
    .app-shell .mobile-menu.mobile-menu {
        display: inline-flex;
    }

    .app-shell .sidebar-close.sidebar-close {
        display: inline-flex;
    }

    .app-shell .command-trigger {
        width: auto;
        margin-left: auto;
    }

    .app-shell .command-trigger span {
        display: none;
    }
}

/* ── Topbar trims that legacy applied and DS3 base rules overrode ─────────── */
@media (max-width: 1180px) {
    .app-shell .command-trigger kbd {
        display: none;
    }

    .app-shell .command-trigger {
        width: min(290px, 27vw);
    }

    .app-shell .profile-name,
    .app-shell .help-button.help-button {
        display: none;
    }
}

@media (max-width: 700px) {
    .app-shell .topbar {
        min-height: calc(56px + env(safe-area-inset-top));
        padding: 8px 10px;
        padding-top: calc(8px + env(safe-area-inset-top));
        gap: 8px;
    }

    .app-shell .breadcrumb > span,
    .app-shell .breadcrumb .ui-icon,
    .app-shell .create-button .caret,
    .app-shell .profile .ui-icon {
        display: none;
    }

    .app-shell .top-actions {
        gap: 5px;
    }

    /* Icon-only Create on phones (legacy convention, DS3 skin). */
    .app-shell .create-button.create-button {
        width: 44px;
        min-width: 44px;
        padding: 0;
        font-size: 0;
        gap: 0;
        justify-content: center;
    }

    .app-shell .create-button.create-button > span:first-child {
        display: grid;
        place-items: center;
    }

    .app-shell .create-button .ui-icon {
        width: 18px;
        height: 18px;
    }

    .app-shell .secondary-button.support-button {
        display: none;
    }

    .app-shell .command-trigger {
        min-height: 40px;
        padding: 0 10px;
    }
}

/* ── Dark primary actions: one authoritative treatment ────────────────────
   Sections disagreed (saturated fill + white ink vs pale fill + dark ink).
   Verdict: pale luminous fill with near-black ink — the legacy dark
   convention, and the highest-contrast option on midnight surfaces. */
[data-theme="dark"] .app-shell .create-button.create-button,
[data-theme="dark"] .app-shell .primary-button.primary-button,
[data-theme="dark"] .auth-shell .auth-submit.auth-submit,
[data-theme="dark"] .modal-backdrop .primary-button.primary-button {
    border: 1px solid color-mix(in srgb, var(--brand) 65%, transparent);
    background: linear-gradient(180deg, var(--brand-hover), var(--brand));
    color: #0c1226;
    font-weight: 650;
    box-shadow: inset 0 1px 0 #ffffff42, 0 4px 16px -6px color-mix(in srgb, var(--brand) 60%, transparent);
}

[data-theme="dark"] .app-shell .create-button.create-button:hover,
[data-theme="dark"] .app-shell .primary-button.primary-button:hover,
[data-theme="dark"] .auth-shell .auth-submit.auth-submit:hover,
[data-theme="dark"] .modal-backdrop .primary-button.primary-button:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-hover) 80%, #fff), var(--brand-hover));
    color: #0c1226;
    box-shadow: inset 0 1px 0 #ffffff42, 0 6px 22px -6px color-mix(in srgb, var(--brand) 70%, transparent);
}

[data-theme="dark"] .app-shell .create-button.create-button:disabled,
[data-theme="dark"] .app-shell .primary-button.primary-button:disabled {
    opacity: .55;
    box-shadow: none;
}

/* ─────────── DS3 section: f8-collapse-topbar.css ─────────── */
/* ===== DS3 · f8: collapsed-sidebar rebuild + topbar alignment ===== */
/* The legacy collapse rules target markup classes that no longer exist
   (.brand-text, .tenant-switcher-text), so collapsed mode leaked text,
   overflowed horizontally, and pushed the un-collapse toggle out of reach.
   This section is the single authority for collapsed-mode layout. */

@media (min-width: 901px) {
    .app-shell.sidebar-collapsed .sidebar {
        width: 78px;
        padding-inline: 12px;
        overflow-x: hidden;
    }

    .app-shell.sidebar-collapsed .sidebar > * {
        min-width: 0;
    }

    /* Brand row becomes a column: mark on top, the un-collapse toggle
       directly beneath it — always visible, always clickable. */
    .app-shell.sidebar-collapsed .sidebar-brand-row {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding-bottom: 10px;
    }

    .app-shell.sidebar-collapsed .brand {
        justify-content: center;
        padding: 0;
    }

    .app-shell.sidebar-collapsed .brand-copy {
        display: none;
    }

    .app-shell.sidebar-collapsed .sidebar-collapse.sidebar-collapse {
        display: inline-flex;
        width: 34px;
        height: 30px;
    }

    /* Tenant switcher: avatar only. */
    .app-shell.sidebar-collapsed .tenant-switcher {
        justify-content: center;
        padding: 8px 0;
        gap: 0;
        min-height: 46px;
        margin-bottom: 12px;
    }

    .app-shell.sidebar-collapsed .tenant-switcher > span:not(.tenant-avatar),
    .app-shell.sidebar-collapsed .tenant-switcher .chevron {
        display: none;
    }

    /* Navigation: centered icons, no group labels, no text, no counts. */
    .app-shell.sidebar-collapsed .nav-group-label {
        display: none;
    }

    .app-shell.sidebar-collapsed .nav-item {
        justify-content: center;
        padding: 10px 0;
    }

    .app-shell.sidebar-collapsed .nav-item span:not(.nav-icon),
    .app-shell.sidebar-collapsed .nav-item .nav-count {
        display: none;
    }

    .app-shell.sidebar-collapsed .nav-item::before {
        left: -12px;
    }

    /* Bottom cluster: signal dot and avatar only. */
    .app-shell.sidebar-collapsed .security-note {
        justify-content: center;
        padding: 10px 0;
    }

    .app-shell.sidebar-collapsed .security-note > span:not(.security-signal) {
        display: none;
    }

    .app-shell.sidebar-collapsed .sidebar-profile {
        justify-content: center;
        padding: 8px 0;
    }

    .app-shell.sidebar-collapsed .sidebar-profile .profile-name,
    .app-shell.sidebar-collapsed .sidebar-profile .ui-icon,
    .app-shell.sidebar-collapsed .sidebar-profile svg {
        display: none;
    }
}

/* ── Topbar: one uniform 38px control rhythm, vertically centered ────────── */
.app-shell .topbar {
    align-items: center;
}

.app-shell .top-actions {
    align-items: center;
    gap: 8px;
}

.app-shell .top-actions > .icon-button,
.app-shell .top-actions > .notification-button,
.app-shell .top-actions > .more-button {
    width: 38px;
    height: 38px;
}

.app-shell .top-actions > .create-button.create-button {
    height: 38px;
    padding-block: 0;
}

.app-shell .top-actions > .secondary-button.support-button {
    height: 38px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
}

.app-shell .command-trigger {
    height: 38px;
    padding-block: 0;
}

/* Notification badge: pinned inside the button's corner, never floating. */
.app-shell .notification-button {
    position: relative;
    overflow: visible;
}

.app-shell .notification-button [data-notification-count] {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    font-style: normal;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--surface);
}

.app-shell .notification-button [data-notification-count][hidden] {
    display: none;
}

/* Hover lift on Create can read as misalignment next to static buttons —
   keep the lift subtle and preserve baseline. */
.app-shell .create-button:hover,
.create-button:hover {
    transform: none;
}

/* ─────────── DS3 section: f9-shell-fixes.css ─────────── */
/* ===== DS3 · f9: sidebar scroll architecture, pop-out clipping, topbar unity, brand mark ===== */

/* ── Sidebar architecture ──────────────────────────────────────────────────
   A scroll container clips absolutely-positioned children, which trapped the
   tenant-switcher panel inside the rail. Reference-app pattern instead:
   the sidebar never scrolls — brand and bottom clusters stay fixed and ONLY
   the nav list scrolls internally. Pop-outs now escape the sidebar freely. */
.app-shell .sidebar,
.sidebar {
    overflow: visible;
    overflow-y: visible;
}

.app-shell .nav-list,
.nav-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    margin-inline: -4px;
    padding-inline: 4px;
}

.app-shell .nav-list::-webkit-scrollbar,
.nav-list::-webkit-scrollbar {
    display: none;
}

/* Soft scroll cues instead of a scrollbar: hairline fades top/bottom. */
.app-shell .sidebar-bottom {
    position: relative;
}

.app-shell .sidebar-bottom::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 6px;
    right: 6px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* The tenant pop-out panel must layer above content and the topbar. */
.tenant-switcher-panel {
    z-index: 60;
    box-shadow: var(--shadow-lg);
}

/* Collapsed mode: rail must not clip the pop-out either; nothing overflows
   horizontally anyway because every text node is hidden. */
@media (min-width: 901px) {
    .app-shell.sidebar-collapsed .sidebar {
        overflow: visible;
        overflow-x: visible;
    }

    /* The pop-out opens from the rail at full width. */
    .app-shell.sidebar-collapsed .tenant-switcher-panel {
        left: 62px;
        top: 0;
        width: min(340px, calc(100vw - 120px));
    }

    .app-shell.sidebar-collapsed .nav-list {
        margin-inline: 0;
        padding-inline: 0;
    }
}

/* ── Brand mark: crisp, unfussy, confident ────────────────────────────────── */
.app-shell .brand-mark,
.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(180deg, #22409f, #172c6e);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    box-shadow: inset 0 1px 0 #ffffff2b, 0 2px 8px #101f4e33;
}

.brand-mark::after {
    content: none;
}

[data-theme="dark"] .app-shell .brand-mark,
[data-theme="dark"] .brand-mark {
    background: linear-gradient(180deg, #3d5cc4, #1d3178);
    box-shadow: inset 0 1px 0 #ffffff33, 0 2px 10px #00000059;
}

.brand-mark-core {
    transform: translateY(-1px);
}

/* ── Topbar: one ghost family for every icon control, even rhythm ─────────── */
.app-shell .top-actions {
    gap: 10px;
}

.app-shell .top-actions .icon-button,
.app-shell .top-actions .notification-button,
.app-shell .top-actions .theme-toggle,
.app-shell .top-actions .help-button {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--muted);
    border-radius: 10px;
}

.app-shell .top-actions .icon-button:hover,
.app-shell .top-actions .notification-button:hover,
.app-shell .top-actions .icon-button[aria-expanded="true"],
.app-shell .top-actions .notification-button[aria-expanded="true"] {
    background: var(--subtle);
    border: 0;
    color: var(--ink);
}

.app-shell .top-actions .secondary-button.support-button {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-weight: 550;
    padding: 0 10px;
}

.app-shell .top-actions .secondary-button.support-button:hover {
    background: var(--subtle);
    color: var(--ink);
    border: 0;
    box-shadow: none;
    transform: none;
}

.app-shell .top-actions .ui-icon {
    width: 19px;
    height: 19px;
}

/* Divider between the primary action and the utility cluster. */
.app-shell .top-actions .create-button {
    margin-right: 6px;
}

/* Exact metric lockdown: every control in the row is 38px tall, margin-free,
   on one centerline — no exceptions. */
.app-shell .top-actions > * {
    height: 38px !important; /* legacy + section rules disagree on heights; the row must be uniform */
    min-height: 38px;
    margin-block: 0;
    align-self: center;
    box-sizing: border-box;
}

.app-shell .top-actions .notification-button.notification-button {
    width: 38px;
    height: 38px;
    padding: 0;
}

.app-shell .top-actions .secondary-button.support-button {
    margin: 0;
    line-height: 1;
}

/* Notification badge tucked into the button corner — never clipped, never
   floating outside the control. */
.app-shell .notification-button [data-notification-count] {
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    font-size: 9px;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 92%, transparent);
}

/* ─────────── DS3 section: f10-forms.css ─────────── */
/* ===== DS3 · f10: universal dialog & form architecture ===== */
/* Markup convention across the app: <label>Text <span class="muted">(hint)</span><control></label>.
   Labels render the text inline and drop a full-width control beneath — one
   consistent anatomy for every dialog and inline form. Nothing may overflow
   horizontally, ever. */

/* ── Dialog panel ─────────────────────────────────────────────────────────── */
.modal-backdrop {
    padding: 24px 16px;
    background: color-mix(in srgb, #0b1020 52%, transparent);
    backdrop-filter: blur(9px) saturate(1.05);
    -webkit-backdrop-filter: blur(9px) saturate(1.05);
    overflow-y: auto;
}

.modal-backdrop > [role="dialog"],
.modal-backdrop > section,
.modal-backdrop > form,
.modal-backdrop .settings-modal {
    position: relative;
    width: min(600px, 100%);
    max-width: 100%;
    max-height: min(88svh, 900px);
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 24px 26px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: ds3-dialog-in var(--motion-base) var(--ease-out) both;
}

@keyframes ds3-dialog-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
}

.modal-backdrop .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.modal-backdrop .modal-header h2 {
    margin: 2px 0 0;
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: 22px;
    font-weight: 550;
    letter-spacing: -.01em;
    line-height: 1.15;
}

.modal-backdrop .modal-header .icon-button {
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--muted);
    font-size: 17px;
    line-height: 1;
}

.modal-backdrop .modal-header .icon-button:hover {
    color: var(--ink);
    border-color: var(--border-strong);
    background: var(--subtle);
}

/* ── Form body ────────────────────────────────────────────────────────────── */
.modal-backdrop form,
.modal-backdrop .workspace-form {
    display: grid;
    gap: 15px;
    min-width: 0;
    margin-top: 12px;
}

.modal-backdrop form * {
    min-width: 0;
}

/* Label anatomy: inline text line, control drops below at full width. */
.modal-backdrop form label {
    display: block;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.4;
}

.modal-backdrop form label .muted {
    font-weight: 450;
    color: var(--muted);
}

.modal-backdrop form label > input:not([type="checkbox"]):not([type="radio"]),
.modal-backdrop form label > select,
.modal-backdrop form label > textarea {
    display: block;
    width: 100%;
    margin-top: 7px;
    font-size: var(--text-base);
    font-weight: 450;
}

/* Field metrics (background-color only — the select chevron image survives). */
.modal-backdrop :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--ink);
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.modal-backdrop :where(input, select, textarea):focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--brand-fill) 60%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-fill) 16%, transparent);
}

.modal-backdrop textarea {
    min-height: 76px;
    resize: vertical;
    line-height: 1.5;
}

.modal-backdrop input[type="date"],
.modal-backdrop input[type="time"] {
    font-family: var(--font-mono);
    font-size: 13px;
}

/* Checkbox / radio rows stay inline. */
.modal-backdrop form label.settings-check,
.modal-backdrop form label:has(> input[type="checkbox"]),
.modal-backdrop form label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 500;
    cursor: pointer;
}

.modal-backdrop input[type="checkbox"],
.modal-backdrop input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--brand-fill);
    flex: none;
}

/* Two-column rows collapse on narrow screens. */
.modal-backdrop .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

@media (max-width: 560px) {
    .modal-backdrop .form-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Fieldsets read as quiet sections. */
.modal-backdrop fieldset {
    margin: 4px 0 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 40%, transparent);
    display: grid;
    gap: 10px;
    min-width: 0;
}

.modal-backdrop fieldset legend {
    padding: 0 6px;
    margin-left: -6px;
    color: var(--aurum);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.modal-backdrop .form-hint {
    margin: -6px 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Status line + actions. */
.modal-backdrop .auth-status {
    min-height: 20px;
    margin: 0;
    font-size: var(--text-sm);
}

.modal-backdrop .modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.modal-backdrop .modal-actions > button {
    min-height: 40px;
    flex: none;
}

/* Phones: dialogs become full-width bottom sheets. */
@media (max-width: 640px) {
    .modal-backdrop {
        padding: 0;
        align-items: flex-end;
    }

    .modal-backdrop > [role="dialog"],
    .modal-backdrop > section,
    .modal-backdrop > form,
    .modal-backdrop .settings-modal {
        width: 100%;
        max-height: 94svh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: 0;
        padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
    }

    .modal-backdrop .modal-actions > button {
        flex: 1 1 auto;
        min-height: 46px;
    }
}

/* ─────────── DS3 section: f11-records.css ─────────── */
/* ===== DS3 · f11: data surfaces — record lists, toolbars, spotlight ===== */

/* ── Spotlight bands become slim intro strips, not billboards ─────────────── */
.app-shell .workspace-spotlight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(115deg, color-mix(in srgb, var(--brand-soft) 65%, var(--surface)), var(--surface) 70%);
    box-shadow: none;
}

.app-shell .workspace-spotlight .spotlight-copy h2 {
    margin: 2px 0 0;
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: 17px;
    font-weight: 550;
    letter-spacing: -.008em;
}

.app-shell .workspace-spotlight .spotlight-copy p {
    margin: 3px 0 0;
    max-width: 62ch;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.app-shell .spotlight-kicker {
    color: var(--aurum);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.app-shell .workspace-spotlight .spotlight-stat {
    display: grid;
    justify-items: end;
    gap: 0;
    padding-left: 20px;
    border-left: 1px solid var(--border);
    text-align: right;
    flex: none;
}

.app-shell .workspace-spotlight .spotlight-stat strong {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 550;
    color: var(--brand);
    line-height: 1.1;
}

.app-shell .workspace-spotlight .spotlight-stat span {
    color: var(--muted);
    font-size: var(--text-xs);
    letter-spacing: .04em;
}

/* ── Section toolbar: search + filters on one 38px line ───────────────────── */
.app-shell .workspace-search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.app-shell .workspace-search label {
    display: block;
    margin: 0;
    min-width: 0;
}

.app-shell .workspace-search label:first-child {
    flex: 1 1 240px;
}

.app-shell .workspace-search input[type="search"] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    font-size: 13px;
}

.app-shell .workspace-search select {
    height: 38px;
    padding: 0 30px 0 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
}

/* ── Record lists: one card, full-width divided rows ──────────────────────── */
.app-shell .workspace-records {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.app-shell .workspace-records > .workspace-record {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.app-shell .workspace-records > .workspace-record + .workspace-record {
    border-top: 1px solid var(--border);
}

.app-shell .workspace-records > .workspace-record:hover {
    background: color-mix(in srgb, var(--brand-fill) 3.5%, transparent);
    transform: none;
}

/* The split view reserves a fixed side column for an inline-detail panel that
   is hidden by default — the list must own the full width until the panel
   actually opens. */
.app-shell .workspace-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.app-shell .workspace-split:has(> .party-inline-detail:not([hidden])) {
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
}

.app-shell .party-inline-detail[hidden] {
    display: none;
}

.app-shell .party-inline-detail:not([hidden]) {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
    max-height: calc(100svh - var(--topbar-h) - 32px);
    overflow-y: auto;
}

@media (max-width: 1050px) {
    .app-shell .workspace-split:has(> .party-inline-detail:not([hidden])) {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-shell .party-inline-detail:not([hidden]) {
        position: static;
        max-height: none;
    }
}

/* Rows never scroll individually. */
.app-shell .workspace-records > .workspace-record {
    overflow: visible;
}

/* Party rows are single-row tables — stretch them and shape the columns. */
.app-shell .party-record-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.app-shell .party-record-table tr {
    cursor: pointer;
}

.app-shell .party-record-table :where(td, th) {
    padding: 13px 12px;
    background: transparent;
    border: 0;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    font-weight: 450;
}

.app-shell .party-record-table td:first-child {
    width: 54px;
    padding-left: 18px;
    padding-right: 0;
}

/* The name is the row's reason to exist: it always gets the free space and
   never crushes below readability. */
.app-shell .party-record-table th[scope="row"] {
    width: auto;
    min-width: 200px;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}

.app-shell .party-record-table th[scope="row"] a {
    color: var(--ink);
    text-decoration: none;
}

.app-shell .party-record-table th[scope="row"] a:hover strong {
    color: var(--brand);
}

.app-shell .party-record-table th[scope="row"] strong {
    font-weight: 600;
    letter-spacing: -.005em;
    transition: color var(--motion-fast) var(--ease-out);
}

.app-shell .party-record-table td:nth-child(3) {
    color: var(--muted);
    font-size: var(--text-sm);
    text-transform: capitalize;
    width: 110px;
}

.app-shell .party-record-table td:nth-child(5) {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 12px;
}

.app-shell .party-record-table td:last-child {
    width: 190px;
    padding-right: 18px;
}

.app-shell .record-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}

.app-shell .record-actions .secondary-button,
.app-shell .record-actions .quiet-button {
    min-height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
}

/* Record icon tile: quiet, precise. */
.app-shell .record-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--subtle);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 650;
}

.app-shell .record-icon.client {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 25%, transparent);
    color: var(--success);
}

.app-shell .record-icon.doc {
    background: var(--info-soft);
    border-color: color-mix(in srgb, var(--info) 25%, transparent);
    color: var(--info);
}

/* Generic (documents / other) rows: flex, full width, aligned actions. */
.app-shell .workspace-record .record-main {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    flex: 1;
}

.app-shell li.workspace-record:not(:has(.party-record-table)) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 18px;
}

.app-shell .workspace-record .record-main > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.app-shell .workspace-record .record-main a {
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell .workspace-record .record-main a:hover strong {
    color: var(--brand);
}

.app-shell .workspace-record .record-main span {
    color: var(--muted);
    font-size: var(--text-sm);
}

/* Archived rows: quiet, not dashed chaos. */
.app-shell .workspace-record.archived-record {
    background: color-mix(in srgb, var(--subtle) 45%, transparent);
}

.app-shell .workspace-record.archived-record th[scope="row"] strong {
    color: var(--muted);
}

/* Phones: party rows re-compose into stacked cards. */
@media (max-width: 700px) {
    .app-shell .party-record-table,
    .app-shell .party-record-table tbody,
    .app-shell .party-record-table tr {
        display: block;
        width: 100%;
    }

    .app-shell .party-record-table tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "icon name pill"
            "icon meta meta"
            "actions actions actions";
        gap: 4px 12px;
        padding: 13px 14px;
    }

    .app-shell .party-record-table :where(td, th) {
        padding: 0;
        white-space: normal;
    }

    .app-shell .party-record-table td:first-child { grid-area: icon; width: auto; padding: 0; }
    .app-shell .party-record-table th[scope="row"] { grid-area: name; width: auto; max-width: none; }
    .app-shell .party-record-table td:nth-child(3) { display: none; }
    .app-shell .party-record-table td:nth-child(4) { grid-area: pill; justify-self: end; }
    .app-shell .party-record-table td:nth-child(5) { grid-area: meta; }
    .app-shell .party-record-table td:last-child { grid-area: actions; width: auto; padding: 6px 0 0; }
    .app-shell .record-actions { justify-content: flex-start; }
    .app-shell .record-actions .secondary-button,
    .app-shell .record-actions .quiet-button { min-height: 40px; flex: 1; }
}

/* ─────────── DS3 section: f12-admin.css ─────────── */
/* ===== DS3 · f12: administration — real tabbed sections ===== */

.app-shell .admin-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--subtle) 55%, transparent);
    overflow-x: auto;
    scrollbar-width: none;
}

.app-shell .admin-tabs::-webkit-scrollbar {
    display: none;
}

.app-shell .admin-tabs a {
    display: grid;
    gap: 1px;
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.app-shell .admin-tabs a span {
    color: color-mix(in srgb, var(--muted) 75%, transparent);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.app-shell .admin-tabs a:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.app-shell .admin-tabs a.active {
    background: var(--surface-raised);
    color: var(--brand);
    box-shadow: var(--shadow-xs), inset 0 -2px 0 var(--aurum);
}

.app-shell .admin-tabs a.active span {
    color: var(--muted);
}

/* One tab visible at a time → each panel owns the full width. */
.app-shell .admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.app-shell .admin-grid > .admin-panel {
    grid-column: 1 / -1;
    animation: ds3-page-in var(--motion-base) var(--ease-out) both;
}

.app-shell .admin-grid > .admin-panel[hidden] {
    display: none;
}

@media (max-width: 700px) {
    .app-shell .admin-tabs a {
        padding: 8px 12px;
    }

    .app-shell .admin-tabs a span {
        display: none;
    }
}

/* ─────────── DS3 section: f13-detail-pages.css ─────────── */
/* ===== DS3 · f13: detail pages — document detail composition + in-page forms ===== */

/* ── In-page form architecture (the f10 dialog system, outside dialogs) ────
   Scoped to the record-detail and admin surfaces; the drafting workspace has
   its own bespoke field system and is deliberately excluded. */
.app-shell :where(.document-detail-section, .party-detail, .client-documents-state,
        .matter-context-section, .relationship-state, .admin-panel, .work-detail,
        .conflict-create-form) :where(form, .client-form),
.app-shell form:where(.client-form, .document-metadata-form, .document-retention-form,
        [data-document-review-form], [data-document-hold-form], .admin-invite-form,
        .admin-region-form) {
    display: grid;
    gap: 14px;
    min-width: 0;
    justify-items: start;
}

.app-shell :where(.document-detail-section, .party-detail, .admin-panel, .work-detail) form * {
    min-width: 0;
}

.app-shell :where(.document-detail-section, .party-detail, .client-documents-state,
        .matter-context-section, .relationship-state, .admin-panel, .work-detail) form > label,
.app-shell form:where(.client-form, .document-metadata-form, .document-retention-form,
        [data-document-review-form], [data-document-hold-form], .admin-invite-form,
        .admin-region-form) > label,
.app-shell :where(.document-detail-section, .admin-panel) .form-row > label {
    display: block;
    width: 100%;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.4;
}

.app-shell :where(.document-detail-section, .party-detail, .client-documents-state,
        .matter-context-section, .relationship-state, .admin-panel, .work-detail) form label > :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    display: block;
    width: 100%;
    max-width: 560px;
    margin-top: 7px;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    font-size: var(--text-base);
    font-weight: 450;
}

.app-shell :where(.document-detail-section, .admin-panel) form textarea {
    min-height: 76px;
    resize: vertical;
}

.app-shell :where(.document-detail-section, .admin-panel) form .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 560px;
}

@media (max-width: 560px) {
    .app-shell :where(.document-detail-section, .admin-panel) form .form-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Buttons never stretch to full card width. */
.app-shell :where(.document-detail-section, .party-detail, .admin-panel, .work-detail) form :where(button, .primary-button, .secondary-button, .quiet-button) {
    justify-self: start;
    width: auto;
    min-height: 38px;
    padding-inline: 16px;
}

.app-shell :where(.document-detail-section, .admin-panel) form .form-hint,
.app-shell :where(.document-detail-section, .admin-panel) form .auth-status {
    max-width: 62ch;
}

/* Checkboxes stay inline. */
.app-shell :where(.document-detail-section, .admin-panel) form label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 500;
    width: auto;
}

/* ── Document detail composition: main column + sticky rail ───────────────── */
.app-shell .document-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    gap: 18px;
    align-items: start;
}

.app-shell .document-detail-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 0 2px 4px;
}

.app-shell .document-detail-header h2 {
    margin: 4px 0 6px;
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 550;
    letter-spacing: -.01em;
    line-height: 1.2;
    text-wrap: balance;
}

.app-shell .document-detail-id {
    display: grid;
    gap: 3px;
    justify-items: end;
    text-align: right;
    flex: none;
}

.app-shell .document-detail-id span {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.app-shell .document-detail-id code {
    max-width: 220px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--subtle);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 11px;
    word-break: break-all;
}

.app-shell .document-detail-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.app-shell .document-detail-rail {
    display: grid;
    gap: 16px;
    min-width: 0;
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
}

@media (max-width: 1050px) {
    .app-shell .document-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-shell .document-detail-rail {
        position: static;
    }

    .app-shell .document-detail-header {
        flex-direction: column;
    }

    .app-shell .document-detail-id {
        justify-items: start;
        text-align: left;
    }
}

/* Section cards share one rhythm. */
.app-shell .document-detail-section {
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xs);
    display: grid;
    gap: 13px;
    align-content: start;
}

.app-shell .document-detail-section > h3,
.app-shell .document-detail-section .panel-header h3 {
    margin: 0;
    font-size: 15.5px;
    font-weight: 650;
    letter-spacing: -.008em;
}

.app-shell .document-detail-section > p.muted:first-of-type {
    margin: -8px 0 0;
    font-size: var(--text-sm);
}

/* Version state strip: pills in one row, stat trio aligned. */
.app-shell .document-status-visibility {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.app-shell .document-version-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 700px) {
    .app-shell .document-version-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Version tools: one aligned toolbar line. */
.app-shell .document-version-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
}

.app-shell .document-version-tools label {
    display: grid;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.app-shell .document-version-tools select {
    min-width: 96px;
    height: 36px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.app-shell .document-version-tools .secondary-button,
.app-shell .document-version-tools .quiet-button {
    min-height: 36px;
}

.app-shell .document-version-tools .auth-status {
    flex-basis: 100%;
}

/* Export actions row. */
.app-shell .document-export-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.app-shell .document-export-actions .secondary-button {
    min-height: 38px;
}

.app-shell .document-download-unavailable {
    padding: 8px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: var(--text-sm);
}

/* ─────────── DS3 section: f14-qa-fixes.css ─────────── */
/* ===== DS3 · f14: QA-wave fixes (merged last — final authority) ===== */

/* ── 1. Dark primary actions, once and for all ─────────────────────────────
   Later sections kept out-cascading earlier verdicts; this file merges last.
   Spec: saturated sapphire fill (#4a6cf7 family) with white ink — identical
   for topbar Create, in-app primaries, and the auth submit. */
[data-theme="dark"] .app-shell .create-button.create-button,
[data-theme="dark"] .app-shell .primary-button.primary-button,
[data-theme="dark"] .auth-shell .auth-submit.auth-submit,
[data-theme="dark"] .modal-backdrop .primary-button.primary-button,
[data-theme="dark"] .pricing-card .primary-button.primary-button {
    border: 1px solid color-mix(in srgb, #4a6cf7 60%, #000);
    background: linear-gradient(180deg, #5f7ef8, #4a6cf7);
    color: #ffffff;
    font-weight: 600;
    box-shadow: inset 0 1px 0 #ffffff2e, 0 4px 16px -6px #4a6cf766;
}

[data-theme="dark"] .app-shell .create-button.create-button:hover,
[data-theme="dark"] .app-shell .primary-button.primary-button:hover,
[data-theme="dark"] .auth-shell .auth-submit.auth-submit:hover,
[data-theme="dark"] .modal-backdrop .primary-button.primary-button:hover,
[data-theme="dark"] .pricing-card .primary-button.primary-button:hover {
    background: linear-gradient(180deg, #6d89f9, #5875f7);
    color: #ffffff;
    box-shadow: inset 0 1px 0 #ffffff2e, 0 6px 20px -6px #4a6cf780;
}

[data-theme="dark"] .app-shell .create-button.create-button:disabled,
[data-theme="dark"] .app-shell .primary-button.primary-button:disabled {
    opacity: .5;
    box-shadow: none;
}

/* ── 2. Billing plan cards: nothing overflows, pills never wrap ───────────── */
.app-shell .billing-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    min-width: 0;
}

.app-shell .billing-plan-grid > * {
    min-width: 0;
}

.app-shell .billing-plan-card {
    display: grid;
    gap: 10px;
    align-content: start;
    min-width: 0;
    overflow: hidden;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}

.app-shell .billing-plan-card.is-current {
    border-color: color-mix(in srgb, var(--brand-fill) 45%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-fill) 30%, transparent), var(--shadow-sm);
}

.app-shell .billing-plan-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.app-shell .billing-plan-card header h3 {
    margin: 0;
    min-width: 0;
    font-size: 15.5px;
    font-weight: 650;
}

.app-shell .profile-plan-badge {
    white-space: nowrap;
    flex: none;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .04em;
}

.app-shell .billing-plan-card :where(button, .primary-button, .secondary-button) {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    justify-self: start;
    text-align: center;
}

/* ── 3. Landing pricing: no empty card shells in the unavailable state ────── */
.pricing-grid .pricing-card:empty {
    display: none;
}

.pricing-grid:has(.pricing-card:empty) {
    grid-template-columns: minmax(0, 1fr);
}

.pricing-skeleton:empty {
    display: none;
}

/* ── 4. Landing hero "governed path" stepper: locked grid at every width ──── */
.workflow-illustration ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
}

.workflow-illustration li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas:
        "num title"
        "num caption";
    column-gap: 12px;
    row-gap: 1px;
    align-items: start;
    padding: 10px 0;
    position: relative;
}

.workflow-illustration li + li {
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.workflow-illustration li > span {
    grid-area: num;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--aurum) 45%, transparent);
    background: var(--aurum-soft);
    color: var(--aurum);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
}

.workflow-illustration li > strong {
    grid-area: title;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.35;
}

.workflow-illustration li > small {
    grid-area: caption;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

/* ── 5. Sidebar tagline: one calm line, never a stacked tower ─────────────── */
.app-shell .brand-copy small,
.brand-copy small {
    white-space: nowrap;
    font-size: 9px;
    letter-spacing: .11em;
}

/* ─────────── DS3 section: f15-qa-core-fixes.css ─────────── */
/* ===== DS3 · f15: qa2-core fixes ===== */

/* ── Drafting page must never overflow a phone viewport ───────────────────
   The hero grid's min-content width exceeded 390px (nowrap toolbar children,
   no min-width:0 on grid columns), dragging the whole page wide and pushing
   the toolbar labels off-screen. */
.app-shell .drafting-page,
.app-shell .drafting-page .page-heading,
.app-shell .drafting-page .page-heading > div {
    min-width: 0;
}

.app-shell .drafting-page .page-heading > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .app-shell .drafting-page .drafting-toolbar {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        min-width: 0;
        gap: 8px;
    }

    .app-shell .drafting-page .drafting-toolbar > * {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .app-shell .drafting-page .drafting-toolbar > a,
    .app-shell .drafting-page .drafting-toolbar > button {
        flex-basis: 100%;
    }
}

/* ── Loaded ≠ success: stateful CONTAINERS must not wear the success wash ──
   A broad legacy rule paints any [data-state="ready"/"success"] element as a
   green banner; the matter-party section uses data-state="ready" to mean
   "finished loading". Neutralize the wash on containers while keeping it for
   genuine status elements (pills, notices, drafting readiness). */
.app-shell .matter-party-state[data-state="ready"],
.app-shell .matter-party-state[data-state="success"],
.app-shell section.matter-party-state[data-state] {
    background: var(--surface-raised);
    border-color: var(--border);
    color: inherit;
}

.app-shell .matter-party-state[data-state="ready"] :where(h2, h3, strong) {
    color: var(--ink);
}

/* ── The retention form's sole submit deserves button chrome ──────────────── */
.app-shell .document-retention-form .quiet-button,
.app-shell .document-retention-form button[type="submit"] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    min-height: 38px;
    padding: 0 16px;
    font-weight: 550;
}

.app-shell .document-retention-form .quiet-button:hover,
.app-shell .document-retention-form button[type="submit"]:hover {
    border-color: var(--border-strong);
    background: var(--subtle);
}

/* ── Library scope badges: themed in dark ─────────────────────────────────── */
[data-theme="dark"] .app-shell .library-scope-badge[data-scope="global"] {
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    border-color: color-mix(in srgb, var(--brand) 38%, var(--border));
    color: var(--brand);
}

[data-theme="dark"] .app-shell .library-scope-badge {
    background: color-mix(in srgb, var(--subtle) 70%, transparent);
    border-color: var(--border);
    color: var(--muted);
}

[data-theme="dark"] .app-shell .library-scope-badge[data-scope="global"] {
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    border-color: color-mix(in srgb, var(--brand) 38%, var(--border));
    color: var(--brand);
}

/* ─────────── DS3 section: f16-landing-v2.css ─────────── */
/* ===== DS3 · f16: landing v2 (cinematic), header lockdown, modal polish, CLS ===== */

/* ── Landing header: one 40px control row, perfectly centered ─────────────── */
.landing-header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 64px;
}

.landing-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.landing-header-actions > * {
    height: 40px;
    min-height: 40px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.landing-header-actions .language-button {
    /* The trigger holds the globe icon AND the two-letter code; a fixed 40px
       width pushed the code outside the border. Fit the content instead. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .04em;
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}

.landing-header-actions .language-button:hover {
    border-color: var(--border-strong);
    color: var(--ink);
    background: var(--subtle);
}

.landing-header-actions .secondary-button,
.landing-header-actions .primary-button {
    padding: 0 18px;
    border-radius: 10px;
    font-size: 13.5px;
}

/* ── Cinematic hero ───────────────────────────────────────────────────────── */
.landing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hero-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 30%;
    transform: scale(1.02);
    animation: ds3-l-kenburns 26s var(--ease-out) both;
    filter: saturate(1.04);
}

@keyframes ds3-l-kenburns {
    from { transform: scale(1.09) translateY(-6px); }
    to { transform: scale(1.02) translateY(0); }
}

/* Veils keep the serif headline sovereign over the photograph. */
.hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--canvas) 96%, transparent) 0%, color-mix(in srgb, var(--canvas) 82%, transparent) 34%, color-mix(in srgb, var(--canvas) 30%, transparent) 62%, color-mix(in srgb, var(--canvas) 12%, transparent) 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--canvas) 70%, transparent), transparent 30%, transparent 62%, var(--canvas) 100%);
}

[data-theme="dark"] .hero-veil {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--canvas) 88%, transparent) 0%, color-mix(in srgb, var(--canvas) 60%, transparent) 34%, color-mix(in srgb, var(--canvas) 18%, transparent) 62%, color-mix(in srgb, var(--canvas) 6%, transparent) 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--canvas) 50%, transparent), transparent 28%, transparent 60%, var(--canvas) 100%);
}

/* The photograph carries dark mode: lift it slightly out of the void. */
[data-theme="dark"] .hero-backdrop img {
    filter: saturate(1.05) brightness(1.08);
}

.landing-hero .hero-copy {
    position: relative;
    z-index: 1;
}

.landing-hero .hero-copy h1 {
    text-shadow: 0 1px 0 color-mix(in srgb, var(--canvas) 55%, transparent);
}

/* The governed-path card becomes glass over the photograph. */
.landing-hero .workflow-illustration {
    position: relative;
    z-index: 1;
    background: color-mix(in srgb, var(--surface-raised) 76%, transparent);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    box-shadow: var(--shadow-lg);
}

/* ── Product proof: showcase frames worth staring at ──────────────────────── */
.proof-frame {
    position: relative;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md), 0 30px 80px -30px color-mix(in srgb, var(--brand-fill) 35%, transparent);
    transition: transform var(--motion-slow) var(--ease-out), box-shadow var(--motion-slow) var(--ease-out);
}

.proof-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg, color-mix(in srgb, var(--brand-fill) 10%, transparent), transparent 42%, color-mix(in srgb, var(--aurum) 10%, transparent));
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.proof-frame:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 40px 110px -30px color-mix(in srgb, var(--brand-fill) 45%, transparent);
}

.proof-cinematic {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1.001);
    transition: transform 900ms var(--ease-out);
}

.proof-frame:hover .proof-cinematic {
    transform: scale(1.03);
}

/* ── Scroll reveals (class added only by JS; no-JS stays fully visible) ───── */
.landing-shell .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    will-change: opacity, transform;
}

.landing-shell .reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .landing-shell .reveal {
        opacity: 1 !important; /* safety net: reveals must never hide content when motion is off */
        transform: none !important;
    }

    .hero-backdrop img {
        animation: none;
        transform: none;
    }
}

/* ── Dialogs: right-sized, no pointless scrollbars, aligned actions ───────── */
.modal-backdrop > [role="dialog"],
.modal-backdrop > section,
.modal-backdrop .settings-modal {
    height: auto;
    scrollbar-width: thin;
    scrollbar-gutter: auto;
}

/* Trim phantom edges that force a few pixels of overflow. */
.modal-backdrop .settings-modal > :first-child,
.modal-backdrop > [role="dialog"] > :first-child {
    margin-top: 0;
}

.modal-backdrop .settings-modal > :last-child,
.modal-backdrop > [role="dialog"] > :last-child {
    margin-bottom: 0;
}

.modal-backdrop :where(h2, h3, p, ul, ol) {
    margin-block: 0;
}

.modal-backdrop :where(ul, ol) {
    padding-left: 1.2em;
}

.modal-backdrop .modal-actions {
    margin-top: 12px;
}

.modal-backdrop .modal-actions > * {
    height: 40px;
    min-height: 40px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-sizing: border-box;
}

/* Shortcut list rows in the help dialog: one aligned grid. */
.modal-backdrop .shortcut-list,
.modal-backdrop .help-shortcuts {
    display: grid;
    gap: 10px;
}

/* ── Dashboard CLS: reserve space before data arrives ─────────────────────── */
.app-shell [data-dashboard-state] {
    min-height: 560px;
}

.app-shell [data-dashboard-state] .empty-state {
    min-height: 220px;
    display: grid;
    place-content: center;
}

.app-shell .metric-card {
    min-height: 132px;
}

@media (max-width: 700px) {
    .app-shell [data-dashboard-state] {
        min-height: 420px;
    }
}

/* ── Landing on phones: hero image stays cinematic, not cramped ───────────── */
@media (max-width: 900px) {
    .hero-backdrop img {
        object-position: 62% 30%;
    }

    .landing-hero .workflow-illustration {
        background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    }
}

/* ─────────── DS3 section: f17-alignment.css ─────────── */
/* ===== DS3 · f17: alignment-audit fixes — every flagged cluster ===== */
/* Source: docs/testing/evidence/ui-overhaul/alignment-audit.md.
   ROOT CAUSE (audit-verified via computed styles): the legacy base rule gives
   .secondary-button `margin-top: 14px`, which shifts it 7px below center in
   every centered flex row — landing CTAs, page actions, dialog actions, row
   actions. The stylesheet already carried 10+ piecemeal overrides; this ends
   the leak at the source. Stacked layouts separate with gap, not margins. */
.app-shell .secondary-button,
.landing-shell .secondary-button,
.modal-backdrop .secondary-button,
.auth-shell .secondary-button {
    margin-top: 0;
}

/* One rule family for every action row in the product. */
.landing-actions,
.page-actions,
.app-shell .page-actions,
.record-actions,
.app-shell .record-actions,
.drafting-toolbar,
.app-shell .drafting-page .drafting-toolbar {
    display: flex;
    align-items: center;
}

.landing-actions > *,
.page-actions > *,
.app-shell .page-actions > * {
    margin-block: 0;
}

/* Landing/final CTA rows: uniform 44px controls on one centerline. */
.landing-actions > a,
.landing-actions > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
}

/* Page action rows in the app: uniform 38px. */
.app-shell .page-actions > a,
.app-shell .page-actions > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
}

/* Drafting toolbar: four controls, one height, one type size. */
.app-shell .drafting-page .drafting-toolbar > a,
.app-shell .drafting-page .drafting-toolbar > button {
    height: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    box-sizing: border-box;
}

/* Topbar: the primary action's extra margin broke the uniform 10px rhythm. */
.app-shell .top-actions .create-button {
    margin-right: 0;
}

/* Landing header brand matches the control band height, desktop and mobile. */
.landing-brand {
    display: inline-flex;
    align-items: center;
    height: 40px;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .landing-brand {
        height: 44px;
    }

    .landing-header-actions > * {
        height: 44px;
        min-height: 44px;
    }

    .landing-header-actions .language-button {
        width: auto;
        min-width: 44px;
    }
}

/* Drafting toolbar children carry no stray vertical margins or self-alignment. */
.app-shell .drafting-page .drafting-toolbar > * {
    margin-block: 0;
    align-self: center;
}

/* Auth: the show-password toggle centers on the field's own axis. The wrap is
   a flex row (icon · input · toggle) — center on the cross axis, no absolutes. */
.auth-input-wrap {
    align-items: center;
}

.auth-input-wrap .auth-reveal {
    align-self: center;
    margin-block: 0;
}

/* Search command bar: the submit matches the 40px input. */
.app-shell .search-command > button,
.app-shell .search-command .primary-button,
.app-shell .search-command .secondary-button {
    height: 40px;
    min-height: 40px;
    align-self: center;
}

/* Proof frames: floating plate treatment — hairline plate, overhanging badge,
   factual capability chips over a top scrim. */
.proof-frame {
    padding: 12px;
    background: var(--surface-raised);
    overflow: visible;
}

.proof-frame .proof-cinematic {
    border-radius: calc(var(--radius-xl) - 8px);
}

.proof-frame .proof-scrim {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 1;
    display: flex;
    gap: 8px;
    padding: 14px;
    border-radius: calc(var(--radius-xl) - 8px) calc(var(--radius-xl) - 8px) 0 0;
    background: linear-gradient(180deg, #0a0f1ecc, transparent);
    pointer-events: none;
}

.proof-frame .proof-scrim b {
    padding: 4px 11px;
    border: 1px solid #ffffff2e;
    border-radius: var(--radius-pill);
    background: #ffffff14;
    backdrop-filter: blur(6px);
    color: #f2f4fb;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
}

.proof-frame .proof-badge {
    position: absolute;
    top: -13px;
    right: -13px;
    z-index: 2;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: linear-gradient(150deg, #22409f, #101f4e);
    color: #f3e5b5;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .09em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px -6px #101f4e88, inset 0 1px 0 #ffffff26;
}

@media (max-width: 700px) {
    .proof-frame .proof-badge {
        right: 8px;
    }
}

/* Pop-out menus never outgrow the viewport; the tail (Sign out) always
   stays reachable via internal scroll as a last resort. */
.profile-menu,
#profile-menu {
    max-height: calc(100svh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Library cards: action links pin to the card foot so rows align across
   cards regardless of description length. */
.app-shell .library-card {
    display: flex;
    flex-direction: column;
}

.app-shell .library-card > :last-child {
    margin-top: auto;
}

.app-shell .library-card-action {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
}

/* ─────────── DS3 section: f18-section-imagery.css ─────────── */
/* ===== DS3 · f18: cinematic section imagery ===== */

/* Shared showcase frame for section imagery — same plate language as the
   proof frames, quieter (no badge). */
.section-frame {
    position: relative;
    margin: 34px auto 6px;
    max-width: 1080px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md), 0 30px 80px -32px color-mix(in srgb, var(--brand-fill) 30%, transparent);
}

.section-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius-xl) - 8px);
}

/* Value section: the band sits between the intro and the feature grid. */
.value-section .section-frame {
    margin-bottom: 34px;
}

.value-section .section-frame img {
    aspect-ratio: 21 / 9;
    object-fit: cover;
    object-position: 50% 32%;
}

/* Responsible AI + security: two-column with the copy on wide screens. */
@media (min-width: 960px) {
    .responsible-ai-band {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: 20px 44px;
        align-items: center;
    }

    .responsible-ai-band .ai-frame {
        grid-row: 1 / span 2;
        grid-column: 2;
        margin: 0;
    }

    .security-band .security-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px 44px;
        align-items: center;
    }
}

.ai-frame,
.security-frame {
    max-width: 640px;
}

.security-frame {
    margin-inline: auto;
}

/* Dark bands: the plate adapts to the band's own surface. */
.security-band .section-frame {
    background: color-mix(in srgb, #0d1120 88%, transparent);
    border-color: #ffffff1c;
    box-shadow: 0 24px 70px -28px #000000aa, 0 0 40px -18px color-mix(in srgb, var(--brand-fill) 40%, transparent);
}

/* Final CTA: cinematic backdrop under a readable veil. */
.final-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.cta-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.cta-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
}

.cta-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, #0a1128 78%, transparent), color-mix(in srgb, #0a1128 55%, transparent) 45%, color-mix(in srgb, #0a1128 84%, transparent));
}

.final-cta .eyebrow,
.final-cta h2 {
    position: relative;
    z-index: 1;
}

.final-cta h2 {
    color: #f4f6fd;
    text-shadow: 0 1px 8px #0a112899;
}

.final-cta .eyebrow {
    color: var(--aurum-bright, #ecd075);
}

.final-cta .landing-actions {
    position: relative;
    z-index: 1;
}

/* Auth showcase reuses the security scene as its cinematic ground. */
.auth-showcase {
    background-image:
        linear-gradient(180deg, color-mix(in srgb, #0a1128 72%, transparent), color-mix(in srgb, #0a1128 88%, transparent)),
        url('marketing/section-security.webp');
    background-size: cover;
    background-position: 62% 30%;
}

@media (max-width: 959px) {
    .section-frame {
        margin-top: 24px;
    }
}

/* ─────────── DS3 section: f19-final-alignment.css ─────────── */
/* ===== DS3 · f19: final alignment pass (audit v51 residuals) ===== */

/* Billing plan actions on one centerline: no stray primary margins. */
.app-shell .billing-plan-card :where(button, .primary-button, .secondary-button) {
    margin-block: 0;
    align-self: start;
    height: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
}

/* Document version tools: selects and buttons share one 40px line. */
.app-shell .document-version-tools :where(select, button, .secondary-button, .quiet-button) {
    height: 40px;
    min-height: 40px;
    font-size: 12.5px;
    box-sizing: border-box;
    margin-block: 0;
}

/* ── Hero goes full-bleed: the photograph owns the viewport width ─────────── */
.landing-shell {
    overflow-x: clip;
}

.landing-hero {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
}

.landing-hero .hero-copy,
.landing-hero .workflow-illustration {
    margin-inline: auto;
}

.landing-hero > .hero-inner,
.landing-hero {
    padding-inline: max(24px, calc(50vw - 660px));
}

/* ── Language switcher placement ──────────────────────────────────────────
   The i18n module populates any [data-language-switcher] slot it finds; a
   slotless page would otherwise receive an injected flow child that breaks
   grids (it once shoved the whole login form below the fold). Slots exist in
   the landing header and the auth panel; any stray direct-child injection is
   force-pinned as a failsafe. */
.landing-header-actions .language-switcher {
    display: inline-flex;
    align-items: center;
    height: 40px;
}

.auth-language-slot {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    z-index: 40;
}

.auth-panel {
    position: relative;
}

.auth-shell > .language-switcher,
.landing-shell > .language-switcher,
#app > .language-switcher {
    position: fixed;
    top: 14px;
    inset-inline-start: 14px;
    height: auto;
    z-index: 90;
}

/* Theme toggle joins the borderless ghost family — no box, ever. */
.app-shell .top-actions .theme-toggle.theme-toggle,
.app-shell .top-actions .theme-toggle.theme-toggle:hover,
.app-shell .top-actions .theme-toggle.theme-toggle[aria-expanded="true"] {
    border: 0;
    box-shadow: none;
}

.app-shell .top-actions .theme-toggle.theme-toggle {
    background: transparent;
}

.app-shell .top-actions .theme-toggle.theme-toggle:hover {
    background: var(--subtle);
}

/* ── Sidebar collapse control: a floating edge handle ─────────────────────
   The in-row chevron crowded the brand and burned a layout slot when
   collapsed. It now floats on the sidebar's edge as a small circular handle
   (the Linear/Notion pattern): zero layout cost in both states. */
.app-shell .sidebar-collapse.sidebar-collapse {
    position: absolute;
    top: 26px;
    right: -13px;
    z-index: 46;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--muted);
    box-shadow: var(--shadow-sm);
    transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-base) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.app-shell .sidebar-collapse.sidebar-collapse:hover {
    color: var(--brand);
    border-color: color-mix(in srgb, var(--brand-fill) 45%, var(--border));
    box-shadow: var(--shadow-md);
}

.app-shell .sidebar-collapse .ui-icon {
    width: 14px;
    height: 14px;
}

.app-shell.sidebar-collapsed .sidebar-collapse.sidebar-collapse {
    transform: rotate(180deg);
    right: -13px;
    width: 26px;
    height: 26px;
    display: inline-flex;
}

/* The brand row returns to a simple centered row in both states. */
.app-shell .sidebar-brand-row {
    position: relative;
}

@media (min-width: 901px) {
    .app-shell.sidebar-collapsed .sidebar-brand-row {
        flex-direction: row;
        justify-content: center;
        padding-bottom: 12px;
    }
}

/* Mobile sidebar brand row: the desktop collapse toggle is meaningless in
   off-canvas mode and its width pushed the close button out of the row. */
@media (max-width: 900px) {
    .app-shell .sidebar-brand-row {
        flex-wrap: nowrap;
        min-width: 0;
    }

    .app-shell .sidebar-brand-row .sidebar-collapse.sidebar-collapse {
        display: none;
    }

    .app-shell .sidebar-brand-row .brand {
        min-width: 0;
        flex: 1;
    }

    .app-shell .sidebar-brand-row .sidebar-close {
        flex: none;
    }

    /* Topbar: hamburger and search trigger share the 44px touch height. */
    .app-shell .command-trigger {
        height: 44px;
        min-height: 44px;
    }
}

/* ─────────── DS3 section: f20-pricing-four-up.css ─────────── */
/* ===== DS3 · f20: pricing tiers on one row ===== */

/* Four public tiers, one row. The legacy grid was written for three columns,
   which pushed the fourth (Enterprise, contact-sales) onto a lonely second
   row where it read as an afterthought. Cards tighten up to fit four abreast
   inside the same section width. */
.landing-shell .pricing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.landing-shell .pricing-card {
    min-height: 340px;
    padding: 20px 18px;
    gap: 10px;
}

.landing-shell .pricing-card.is-featured {
    padding: 19px 17px;
}

.landing-shell .pricing-card h3 {
    font-size: 1.12rem;
}

.landing-shell .pricing-card > strong {
    font-size: 1.6rem;
}

.landing-shell .pricing-card p {
    min-height: 0;
    font-size: 13px;
}

.landing-shell .plan-points {
    font-size: 12.5px;
}

.landing-shell .pricing-card .primary-button,
.landing-shell .pricing-card .secondary-button {
    padding-inline: 10px;
    font-size: 13px;
}

/* Responsive re-assertions LAST (cascade trap: appended base rules outrank
   legacy media queries). Two columns on tablets, one on phones. */
@media (max-width: 1099.98px) {
    .landing-shell .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .landing-shell .pricing-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-shell .pricing-card {
        min-height: 0;
    }
}

/* ─────────── DS3 section: f21-library-table.css ─────────── */
/* ===== DS3 · f21: library as a compact table with an inline detail rail ===== */

/* The Templates and Clauses libraries used one tall card per record, so a
   catalogue of a dozen templates scrolled for screens. They now follow the
   Clients tab: one compact row per record inside a single framed table, and a
   detail rail that opens beside the list when a row is selected. Test and
   harness contracts are preserved: each row is still article.library-card
   [data-library-card] with an h3, rows stay direct children of .library-grid,
   and the action buttons keep their names and data attributes. */

.app-shell .library-page .library-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.app-shell .library-page .library-split:has(> .library-inline-detail:not([hidden])) {
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
}

.app-shell .library-page .library-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.app-shell .library-page .library-grid > .library-card {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto auto auto auto auto;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-out);
}

.app-shell .library-page .library-grid > .library-card:last-child {
    border-bottom: 0;
}

.app-shell .library-page .library-grid > .library-card:hover,
.app-shell .library-page .library-grid > .library-card:focus-visible {
    transform: none;
    box-shadow: none;
    background: var(--subtle);
}

.app-shell .library-page .library-grid > .library-card.is-selected {
    background: color-mix(in srgb, var(--brand-fill) 10%, var(--surface-raised));
    box-shadow: inset 3px 0 0 var(--brand);
}

.app-shell .library-page .library-grid > .library-card::before {
    display: none;
}

.app-shell .library-page .library-grid > .library-card .library-card-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.app-shell .library-page .library-card-titles {
    min-width: 0;
}

.app-shell .library-page .library-card-titles h3 {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 640;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-shell .library-page .library-card-titles p {
    margin: 2px 0 0;
    font-size: var(--text-xs);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-shell .library-page .library-row-title {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.app-shell .library-page .library-row-title:hover {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.app-shell .library-page .library-row-scope {
    display: inline-flex;
    gap: 6px;
    white-space: nowrap;
}

.app-shell .library-page .library-row-version,
.app-shell .library-page .library-row-date {
    color: var(--muted);
    font-size: var(--text-xs);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.app-shell .library-page .library-grid > .library-card .library-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.app-shell .library-page .library-grid > .library-card .library-card-actions :where(button, a) {
    height: 30px;
    min-height: 30px;
    padding-inline: 10px;
    font-size: 12px;
    white-space: nowrap;
}

.app-shell .library-page .library-grid > .library-card .library-card-cta-arrow {
    display: none;
}

.app-shell .library-page .library-grid > .library-card .library-card-action-status {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--text-xs);
}

.app-shell .library-page .library-grid > .library-card .library-card-action-status:empty {
    display: none;
}

/* ── Detail rail ─────────────────────────────────────────────────────── */
.app-shell .library-page .library-inline-detail[hidden] {
    display: none;
}

.app-shell .library-page .library-inline-detail:not([hidden]) {
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 96px);
    overflow: auto;
    padding: 20px 22px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.app-shell .library-page .library-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.app-shell .library-page .library-detail-head h2 {
    margin: 4px 0 0;
    font-size: var(--text-lg);
    line-height: 1.25;
}

.app-shell .library-page .library-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.app-shell .library-page .library-detail-description {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.app-shell .library-page .library-detail h3 {
    margin: 18px 0 8px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.app-shell .library-page .library-field-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-shell .library-page .library-field-chips li {
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--subtle);
    font-size: var(--text-xs);
    font-family: var(--font-mono, ui-monospace, monospace);
}

.app-shell .library-page .library-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.app-shell .library-page .library-detail-actions .library-card-action-status:empty {
    display: none;
}

/* The legacy titles wrapper is display:contents, which would hand the h3 and
   the description to the row grid as separate cells and shift every column.
   It is a real block here. */
.app-shell .library-page .library-grid > .library-card > .library-card-titles {
    display: block;
    min-width: 0;
}

/* With the detail rail open the list is half as wide: keep icon, title,
   scope, status and actions; version and date live in the rail. */
.app-shell .library-page .library-split:has(> .library-inline-detail:not([hidden])) .library-grid > .library-card {
    grid-template-columns: 32px minmax(0, 1fr) auto auto auto;
}

.app-shell .library-page .library-split:has(> .library-inline-detail:not([hidden])) .library-grid > .library-card :is(.library-row-version, .library-row-date, [data-template-download]) {
    display: none;
}

/* ── Speciality filters: quick chips + a multi-select dropdown ────────── */
.app-shell .library-page .library-speciality-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

.app-shell .library-page .library-speciality-bar[hidden] {
    display: none;
}

.app-shell .library-page .library-speciality-label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 4px;
}

.app-shell .library-page .library-speciality-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.app-shell .library-page .library-speciality-chip:hover {
    border-color: var(--border-strong);
    background: var(--subtle);
}

.app-shell .library-page .library-speciality-chip[aria-pressed="true"] {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.app-shell .library-page .library-speciality-chip .library-speciality-count {
    min-width: 18px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.app-shell .library-page .library-speciality-dropdown {
    position: relative;
    margin-left: auto;
}

.app-shell .library-page .library-speciality-dropdown > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.app-shell .library-page .library-speciality-dropdown > summary::-webkit-details-marker {
    display: none;
}

.app-shell .library-page .library-speciality-dropdown[open] > summary {
    border-color: var(--brand);
}

.app-shell .library-page .library-speciality-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 240px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
}

.app-shell .library-page .library-speciality-menu label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
}

.app-shell .library-page .library-speciality-menu label:hover {
    background: var(--subtle);
}

.app-shell .library-page .library-speciality-menu input {
    margin: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--brand);
}

.app-shell .library-page .library-speciality-menu .library-speciality-menu-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 8px 2px;
    border-top: 1px solid var(--border);
}

/* Speciality tags on rows and in the rail. */
.app-shell .library-page .library-speciality-tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--aurum, #b8933d) 45%, var(--border));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--aurum, #b8933d) 12%, var(--surface-raised));
    color: var(--ink);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

/* The count sits right-aligned in each dropdown row. This is a class, not an
   inline style: the deployed page sends `style-src 'self'`, so an inline
   style attribute is blocked outright — it silently did nothing and logged a
   CSP violation on every load. */
.app-shell .library-page .library-speciality-menu-count {
    margin-left: auto;
    color: var(--muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

/* The floating support button is position:fixed on the page's root stacking
   context, so a z-index raise inside the toolbar cannot beat it — the menu
   would still be covered and a click on a count landed on WhatsApp. The float
   is decoration over content and must never sit above an open menu or dialog,
   so it drops below them instead. */
.app-shell .library-page .library-speciality-menu {
    z-index: 120;
}

.app-shell .whatsapp-float {
    z-index: 40;
}

.app-shell .library-page .library-speciality-dropdown[open] > summary {
    position: relative;
    z-index: 120;
}

/* The menu scrolls inside whatever space it was given rather than growing
   under the sticky topbar. */
.app-shell .library-page .library-speciality-menu {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Opened upward when the viewport has no room beneath the trigger. */
.app-shell .library-page .library-speciality-dropdown.opens-upward .library-speciality-menu {
    top: auto;
    bottom: calc(100% + 6px);
}

/* Responsive re-assertions LAST (cascade trap: appended base rules outrank
   legacy media queries). */
@media (max-width: 1050px) {
    .app-shell .library-page .library-split:has(> .library-inline-detail:not([hidden])) {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-shell .library-page .library-inline-detail:not([hidden]) {
        position: static;
        max-height: none;
    }
}

@media (max-width: 900px) {
    .app-shell .library-page .library-grid > .library-card {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        row-gap: 8px;
    }

    .app-shell .library-page .library-grid > .library-card .library-row-scope,
    .app-shell .library-page .library-grid > .library-card .library-row-version,
    .app-shell .library-page .library-grid > .library-card .library-row-date,
    .app-shell .library-page .library-grid > .library-card .library-card-actions {
        grid-column: 2 / -1;
        justify-self: start;
    }
}


/* ═══ PRESERVED: appended by another session ═══ */
/* LexOS is an iLawBots sub-product, so the sapphire "L" tile gives way to the
   iLawBots robot mark (public/icons/ilawbot-mark.svg) in the sidebar, the
   collapsed rail, the landing header and the auth/onboarding pages. The
   .brand-mark wrapper keeps its box so every layout rule above (collapsed-rail
   centring, mobile brand row) is untouched; only the tile paint is removed.
   The robot's teal body and white face read on both themes without a tile,
   so light and dark share one rule; the dark selectors below only outrank the
   themed tile paints that would otherwise win on specificity. */
.brand-mark.brand-mark--logo,
.app-shell .brand-mark.brand-mark--logo,
.landing-brand .brand-mark.brand-mark--logo,
.auth-brand .brand-mark.brand-mark--logo,
.auth-showcase-brand .brand-mark.brand-mark--logo,
[data-theme="dark"] .brand-mark.brand-mark--logo,
[data-theme="dark"] .app-shell .brand-mark.brand-mark--logo {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    background: none;
    box-shadow: none;
    overflow: hidden;
}

.brand-mark.brand-mark--logo::after {
    content: none;
}

.brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
    user-select: none;
    -webkit-user-drag: none;
}

/* Landing header and the auth showcase panel: the mark fills the 40px band. */
.landing-brand .brand-mark.brand-mark--logo,
.auth-showcase-brand .brand-mark.brand-mark--logo {
    width: 40px;
    height: 40px;
}

/* ===== DS3 · f22: account menu — sectioned profile dropdown ===== */
/* Appended layer. The legacy .profile-menu rules stay untouched; every rule
   below is scoped to .profile-menu-v2 (or to the three new dialogs) and uses
   equal-or-higher specificity than the earlier appended overrides, which are
   written as .profile-menu-item.profile-menu-item. Tokens only, both themes. */

.profile-menu.profile-menu-v2 {
    display: flex;
    flex-direction: column;
    width: min(360px, calc(100vw - 24px));
    max-height: min(calc(100vh - 24px), 660px);
    padding: 0;
    overflow: hidden;
}

/* ---------------------------------------------------------- identity head */

.profile-menu.profile-menu-v2 .profile-menu-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 13px 14px 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    background: color-mix(in srgb, var(--subtle) 55%, var(--surface-raised, var(--surface)));
}

.profile-menu.profile-menu-v2 .profile-menu-identity-text {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.profile-menu.profile-menu-v2 .profile-menu-identity strong,
.profile-menu.profile-menu-v2 .profile-menu-email,
.profile-menu.profile-menu-v2 .profile-menu-tenant {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu.profile-menu-v2 .profile-menu-tenant {
    color: var(--muted);
    font-family: var(--font-ui, inherit);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
}

.profile-menu.profile-menu-v2 .profile-menu-identity .profile-menu-plan {
    display: grid;
    justify-items: end;
    gap: 3px;
    padding: 0;
    border: 0;
}

.profile-menu.profile-menu-v2 .profile-plan-badge {
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    color: var(--brand);
    font-size: 11px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.profile-menu.profile-menu-v2 .profile-plan-badge-pending {
    border-color: color-mix(in srgb, var(--border) 80%, transparent);
    background: color-mix(in srgb, var(--subtle) 70%, transparent);
    color: var(--muted);
}

.profile-menu.profile-menu-v2 .profile-plan-state {
    color: var(--muted);
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ------------------------------------------------------- single usage line */

.profile-menu.profile-menu-v2 .profile-menu-usage {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 9px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    background: var(--surface-raised, var(--surface));
}

.profile-menu.profile-menu-v2 .profile-menu-usage-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.profile-menu.profile-menu-v2 .profile-menu-usage-label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.profile-menu.profile-menu-v2 .profile-menu-usage b {
    color: var(--ink);
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.profile-menu.profile-menu-v2 .profile-menu-usage-pending {
    color: var(--muted);
    font-size: 11.5px;
}

/* ------------------------------------------------------ scrolling sections */

.profile-menu.profile-menu-v2 .profile-menu-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 6px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--border-strong, var(--border)) 90%, transparent) transparent;
}

.profile-menu.profile-menu-v2 .profile-menu-scroll::-webkit-scrollbar {
    width: 8px;
}

.profile-menu.profile-menu-v2 .profile-menu-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--border-strong, var(--border)) 85%, transparent);
    background-clip: content-box;
}

.profile-menu.profile-menu-v2 .profile-menu-heading {
    margin: 10px 0 3px;
    padding: 0 10px;
    color: var(--aurum, var(--muted));
    font-family: var(--font-ui, inherit);
    font-size: 10px;
    font-weight: 700;
    font-variant: small-caps;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.profile-menu.profile-menu-v2 .profile-menu-group {
    display: grid;
    gap: 1px;
}

/* --------------------------------------------------------- rows & controls */

.profile-menu.profile-menu-v2 .profile-menu-row,
.profile-menu.profile-menu-v2 .profile-menu-control {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 5px 10px;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
}

.profile-menu.profile-menu-v2 .profile-menu-row {
    cursor: pointer;
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease),
        color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.profile-menu.profile-menu-v2 .profile-menu-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.profile-menu.profile-menu-v2 .profile-menu-row-icon .ui-icon {
    width: 17px;
    height: 17px;
}

.profile-menu.profile-menu-v2 .profile-menu-row:hover .profile-menu-row-icon,
.profile-menu.profile-menu-v2 .profile-menu-row:focus-visible .profile-menu-row-icon {
    color: var(--brand);
}

.profile-menu.profile-menu-v2 .profile-menu-row-text {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.profile-menu.profile-menu-v2 .profile-menu-row-text > span {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 550;
    letter-spacing: -.004em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu.profile-menu-v2 .profile-menu-row-text small {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu.profile-menu-v2 .profile-menu-row-hint {
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.profile-menu.profile-menu-v2 .profile-menu-readonly {
    cursor: default;
}

.profile-menu.profile-menu-v2 .profile-menu-row:focus-visible {
    outline: 2px solid var(--focus-ring, var(--brand));
    outline-offset: -2px;
}

/* Segmented preference (Appearance, Density) */

.profile-menu.profile-menu-v2 .profile-menu-segment {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--subtle) 65%, transparent);
}

.profile-menu.profile-menu-v2 .profile-menu-segment-option {
    padding: 3px 9px;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease),
        color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.profile-menu.profile-menu-v2 .profile-menu-segment-option:hover {
    color: var(--ink);
}

.profile-menu.profile-menu-v2 .profile-menu-segment-option[aria-checked="true"] {
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, .12));
    color: var(--brand);
}

.profile-menu.profile-menu-v2 .profile-menu-segment-option:focus-visible {
    outline: 2px solid var(--focus-ring, var(--brand));
    outline-offset: 1px;
}

/* Language select */

.profile-menu.profile-menu-v2 .profile-menu-select {
    max-width: 128px;
    min-height: 28px;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface-raised, var(--surface));
    color: var(--ink);
    font: inherit;
    font-size: 11.5px;
}

.profile-menu.profile-menu-v2 .profile-menu-select:focus-visible {
    outline: 2px solid var(--focus-ring, var(--brand));
    outline-offset: 1px;
}

/* Switch preference (email alerts, reminder pop-ups, reduced motion) */

.profile-menu.profile-menu-v2 .profile-menu-switch {
    position: relative;
    display: inline-block;
    flex: none;
    width: 30px;
    height: 17px;
    border: 1px solid color-mix(in srgb, var(--border-strong, var(--border)) 80%, transparent);
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--subtle) 80%, transparent);
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease),
        border-color var(--motion-fast, 120ms) var(--ease-out, ease);
}

.profile-menu.profile-menu-v2 .profile-menu-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 11px;
    height: 11px;
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-raised, #fff);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, .2));
    transition: transform var(--motion-fast, 120ms) var(--ease-out, ease);
}

.profile-menu.profile-menu-v2 .profile-menu-toggle[aria-checked="true"] .profile-menu-switch {
    border-color: color-mix(in srgb, var(--brand) 55%, transparent);
    background: var(--brand);
}

.profile-menu.profile-menu-v2 .profile-menu-toggle[aria-checked="true"] .profile-menu-switch::after {
    transform: translateX(13px);
}

/* Footer */

.profile-menu.profile-menu-v2 .profile-menu-footer {
    flex: none;
    padding: 6px;
    border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    background: color-mix(in srgb, var(--subtle) 35%, var(--surface-raised, var(--surface)));
}

.profile-menu.profile-menu-v2 .profile-menu-signout {
    color: var(--danger);
}

.profile-menu.profile-menu-v2 .profile-menu-signout .profile-menu-row-icon,
.profile-menu.profile-menu-v2 .profile-menu-signout .profile-menu-row-text > span {
    color: var(--danger);
}

/* -------------------------------------------------- dark theme (Midnight) */

[data-theme="dark"] .profile-menu.profile-menu-v2 .profile-menu-identity {
    background: color-mix(in srgb, var(--subtle) 70%, var(--surface-raised, var(--surface)));
}

[data-theme="dark"] .profile-menu.profile-menu-v2 .profile-plan-badge {
    border-color: color-mix(in srgb, var(--brand) 38%, transparent);
    background: color-mix(in srgb, var(--brand) 16%, transparent);
}

[data-theme="dark"] .profile-menu.profile-menu-v2 .profile-menu-segment {
    border-color: color-mix(in srgb, var(--border-strong, var(--border)) 85%, transparent);
    background: color-mix(in srgb, var(--canvas) 60%, transparent);
}

[data-theme="dark"] .profile-menu.profile-menu-v2 .profile-menu-segment-option[aria-checked="true"] {
    background: color-mix(in srgb, var(--brand) 18%, var(--surface-raised, var(--surface)));
    box-shadow: none;
    color: var(--brand);
}

[data-theme="dark"] .profile-menu.profile-menu-v2 .profile-menu-switch::after {
    background: var(--ink);
}

[data-theme="dark"] .profile-menu.profile-menu-v2 .profile-menu-toggle[aria-checked="true"] .profile-menu-switch::after {
    background: var(--surface-raised, var(--surface));
}

[data-theme="dark"] .profile-menu.profile-menu-v2 .profile-menu-footer {
    background: color-mix(in srgb, var(--canvas) 45%, var(--surface-raised, var(--surface)));
}

/* --------------------------------- profile, security and sessions dialogs */

.profile-details-modal .settings-note,
.profile-security-modal .settings-note,
.profile-sessions-modal .settings-note {
    margin-top: 4px;
    font-size: 11.5px;
}

.profile-sessions-modal .profile-session-list {
    display: grid;
    gap: 10px;
    max-height: min(46vh, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.profile-sessions-modal .profile-session {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--surface);
}

.profile-sessions-modal .profile-session.is-current {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
    background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}

.profile-sessions-modal .profile-session-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.profile-sessions-modal .profile-session-top strong {
    font-family: var(--font-display, inherit);
    font-size: var(--text-md, 15px);
    font-weight: 600;
}

.profile-sessions-modal .profile-session-pill {
    padding: 2px 9px;
    border: 1px solid color-mix(in srgb, var(--success, var(--brand)) 30%, transparent);
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--success, var(--brand)) 9%, transparent);
    color: color-mix(in srgb, var(--success, var(--brand)) 80%, var(--ink));
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

.profile-sessions-modal .profile-signout-everywhere {
    border-color: var(--danger);
    background: var(--danger);
}

.profile-sessions-modal .profile-signout-everywhere:hover:not(:disabled) {
    background: color-mix(in srgb, var(--danger) 85%, #000);
}

/* ------------------------------------------ density, motion, forced colors */

/* Compact density inside the account menu and the workspace shell rows the
   menu governs. The foundation already tightens buttons, inputs and tables. */
[data-density="compact"] .profile-menu.profile-menu-v2 .profile-menu-row,
[data-density="compact"] .profile-menu.profile-menu-v2 .profile-menu-control {
    min-height: 32px;
    padding: 3px 10px;
}

[data-density="compact"] .profile-menu.profile-menu-v2 .profile-menu-row-text small {
    display: none;
}

[data-density="compact"] .profile-menu.profile-menu-v2 .profile-menu-heading {
    margin: 7px 0 2px;
}

[data-density="compact"] .app-shell .workspace-record,
[data-density="compact"] .app-shell .admin-list li {
    padding-top: 8px;
    padding-bottom: 8px;
}

[data-density="compact"] .app-shell .page-heading {
    margin-bottom: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .profile-menu.profile-menu-v2 .profile-menu-row,
    .profile-menu.profile-menu-v2 .profile-menu-segment-option,
    .profile-menu.profile-menu-v2 .profile-menu-switch,
    .profile-menu.profile-menu-v2 .profile-menu-switch::after {
        transition: none;
    }
}

[data-reduced-motion="true"] .profile-menu.profile-menu-v2 .profile-menu-row,
[data-reduced-motion="true"] .profile-menu.profile-menu-v2 .profile-menu-segment-option,
[data-reduced-motion="true"] .profile-menu.profile-menu-v2 .profile-menu-switch,
[data-reduced-motion="true"] .profile-menu.profile-menu-v2 .profile-menu-switch::after {
    transition: none;
}

/* Meaning-bearing state must survive forced colors as geometry, not colour. */
@media (forced-colors: active) {
    .profile-menu.profile-menu-v2 .profile-menu-segment-option[aria-checked="true"] {
        border: 1px solid ButtonText;
    }

    .profile-menu.profile-menu-v2 .profile-menu-toggle[aria-checked="true"] .profile-menu-switch {
        border: 2px solid ButtonText;
    }

    .profile-menu.profile-menu-v2 .profile-session.is-current,
    .profile-sessions-modal .profile-session.is-current {
        border: 2px solid Highlight;
    }
}

@media (max-width: 480px) {
    .profile-menu.profile-menu-v2 {
        width: calc(100vw - 16px);
        max-height: min(calc(100vh - 16px), 620px);
    }

    .profile-menu.profile-menu-v2 .profile-menu-row-hint {
        display: none;
    }
}
/* ===== end DS3 · f22: account menu ===== */

/* ===== DS3 · f23: account menu — fit the viewport, and show the fold ===== */
/* Two defects the v71 regression sweep found at 1440x900. The menu capped
   itself at 660px while 876px of viewport was free, so Administration, Invite
   a colleague and Contact support sat below a fold; and that fold was
   invisible, because a hairline thumb over a transparent track reads as
   nothing next to an ivory panel. The cap is now the viewport alone, so the
   menu grows to whatever its own content needs, and whenever the section list
   still overflows (short laptop viewports, a compact browser window) it
   carries a fade at every edge that still has rows behind it and a scrollbar
   with a visible track. The state attributes come from app.js, on
   [data-profile-scroll]. */

.profile-menu.profile-menu-v2 {
    max-height: calc(100vh - 24px);
}

.profile-menu.profile-menu-v2 .profile-menu-scroll[data-overflowing="true"] {
    scrollbar-color: var(--border-strong, var(--border)) color-mix(in srgb, var(--subtle) 85%, transparent);
}

.profile-menu.profile-menu-v2 .profile-menu-scroll[data-overflowing="true"]::-webkit-scrollbar-track {
    margin: 4px 0;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--subtle) 85%, transparent);
}

.profile-menu.profile-menu-v2 .profile-menu-scroll[data-overflowing="true"]::-webkit-scrollbar-thumb {
    background: var(--border-strong, var(--border));
    background-clip: content-box;
}

/* The fade is a mask on the scroll box itself: an ::after would travel with
   the scrolled content, and an overlay element would have to know the footer
   height. Masking keeps it pinned to the edge. */
.profile-menu.profile-menu-v2 .profile-menu-scroll[data-overflowing="true"][data-at-end="false"] {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
}

.profile-menu.profile-menu-v2 .profile-menu-scroll[data-overflowing="true"][data-at-top="false"][data-at-end="false"] {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 30px), transparent);
}

.profile-menu.profile-menu-v2 .profile-menu-scroll[data-overflowing="true"][data-at-top="false"][data-at-end="true"] {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20px);
    mask-image: linear-gradient(to bottom, transparent, #000 20px);
}

/* In forced colours the mask would erase a meaning-bearing edge and the
   scrollbar is drawn by the platform. Leave both alone. */
@media (forced-colors: active) {
    .profile-menu.profile-menu-v2 .profile-menu-scroll[data-overflowing="true"] {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* The fold shrinks from the other side too. A caption that only restates its
   label was costing 9px a row across seventeen rows; captions now survive only
   where they carry a constraint or a value (device scope, the untranslated
   legal content, the current region, the server's notification answer, the
   current workspace), so the rows that remain sit at the 36px the design system
   asks for instead of 47px. Measured at 1440x900: 147px of hidden rows before,
   and what the evidence file records after. */

.profile-menu.profile-menu-v2 .profile-menu-row-text small:empty {
    display: none;
}

.profile-menu.profile-menu-v2 .profile-menu-row:not(:has(.profile-menu-row-text small)),
.profile-menu.profile-menu-v2 .profile-menu-row:has(.profile-menu-row-text small:empty) {
    min-height: 34px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.profile-menu.profile-menu-v2 .profile-menu-heading {
    margin: 7px 0 2px;
}

.profile-menu.profile-menu-v2 .profile-menu-group {
    gap: 0;
}

.profile-menu.profile-menu-v2 .profile-menu-identity {
    padding: 11px 14px 9px;
}

.profile-menu.profile-menu-v2 .profile-menu-usage {
    padding: 7px 14px;
}

/* 5px was all that still separated the admin menu from fitting a 900px-tall
   viewport outright, and it was padding. */
.profile-menu.profile-menu-v2 .profile-menu-scroll {
    padding-top: 2px;
    padding-bottom: 3px;
}

/* ===== end DS3 · f23: account menu scroll affordance ===== */


/* ═══ DS3 · f24: favourites filter chip and per-row star ═══════════════════
   Both controls shipped with NO stylesheet at all. The filter rendered as a
   bare checkbox with an unassociated caption floating beside it, on its own
   line, next to pill-shaped selects; the row star rendered as a plain
   character button. This layer gives both a shape drawn from the tokens the
   rest of the workspace already uses, in every theme.

   The chip deliberately mirrors .library-speciality-chip (the toolbar's
   existing aria-pressed control) rather than inventing a second visual
   language for "a filter that is on or off". Its ON state is a brand tint plus
   a filled star rather than a solid brand fill: --brand is a dark sapphire in
   the light palette and a pale periwinkle in the dark one, so a white-on-brand
   pill that reads in one theme is illegible in the other. */

.favourites-chip,
.favourite-star {
    --favourite-on: #c07f05;
    --favourite-on-hover: #9a6503;
}

[data-theme="dark"] .favourites-chip,
[data-theme="dark"] .favourite-star {
    --favourite-on: #f0c357;
    --favourite-on-hover: #ffd77a;
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] .favourites-chip,
    [data-theme="system"] .favourite-star {
        --favourite-on: #f0c357;
        --favourite-on-hover: #ffd77a;
    }
}

/* ── The filter chip ─────────────────────────────────────────────────────── */
.favourites-chip.favourites-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    /* Matches the 38px search input and selects it sits beside. */
    height: 38px;
    min-height: 38px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-raised, var(--surface));
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.favourites-chip.favourites-chip:hover {
    border-color: var(--border-strong, var(--border));
    background: var(--subtle);
    color: var(--ink);
}

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

.favourites-chip.favourites-chip[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--brand) 52%, var(--border));
    background: color-mix(in srgb, var(--brand) 13%, var(--surface));
    color: var(--ink);
    font-weight: 680;
}

.favourites-chip.favourites-chip[aria-pressed="true"]:hover {
    background: color-mix(in srgb, var(--brand) 19%, var(--surface));
}

/* The star is the fastest read of the on/off state, so it carries colour and
   fill; a fixed box keeps ★ and ☆ — which are not the same width — from
   nudging the label when the state flips. */
.favourites-chip.favourites-chip .favourites-chip-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    flex: none;
    font-size: 14px;
    line-height: 1;
    color: inherit;
}

.favourites-chip.favourites-chip[aria-pressed="true"] .favourites-chip-star {
    color: var(--favourite-on);
}

.favourites-chip.favourites-chip .favourites-chip-text {
    display: inline-block;
}

/* Placement: the collection toolbar is a flex row, the library toolbar a grid
   whose items are bottom-aligned. In both the chip is one control on the SAME
   line as the search box and the selects, never a row of its own. */
.app-shell .workspace-search .favourites-chip.favourites-chip {
    align-self: center;
}

.app-shell .library-toolbar .favourites-chip.favourites-chip {
    justify-self: start;
    align-self: end;
    height: 40px;
    min-height: 40px;
}

@media (max-width: 760px) {
    /* The toolbar stacks here; the chip stays chip-sized instead of becoming a
       full-width bar, and grows to a 44px touch target. */
    .app-shell .workspace-search .favourites-chip.favourites-chip,
    .app-shell .library-toolbar .favourites-chip.favourites-chip {
        align-self: flex-start;
        justify-self: start;
        height: 44px;
        min-height: 44px;
    }
}

/* ── The per-row star ────────────────────────────────────────────────────── */
/* :is() takes the specificity of its most specific branch, so one rule beats
   both `.app-shell .record-actions .quiet-button` and the library card's own
   `.library-card-actions :where(button, a)` sizing without !important. */
.app-shell :is(.favourite-star, .library-page .library-grid > .library-card .library-card-actions .favourite-star) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    /* A fixed square, so toggling ★/☆ can never reflow the row. */
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--muted);
    font-size: 17px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    box-shadow: none;
    transition: color .12s ease, background .12s ease, border-color .12s ease;
}

.app-shell :is(.favourite-star, .library-page .library-grid > .library-card .library-card-actions .favourite-star):hover {
    border-color: color-mix(in srgb, var(--border) 80%, transparent);
    background: var(--subtle);
    color: var(--favourite-on-hover);
}

.app-shell :is(.favourite-star, .library-page .library-grid > .library-card .library-card-actions .favourite-star)[aria-pressed="true"] {
    color: var(--favourite-on);
}

.app-shell :is(.favourite-star, .library-page .library-grid > .library-card .library-card-actions .favourite-star)[aria-pressed="true"]:hover {
    color: var(--favourite-on-hover);
    background: color-mix(in srgb, var(--favourite-on) 12%, transparent);
}

.app-shell :is(.favourite-star, .library-page .library-grid > .library-card .library-card-actions .favourite-star):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.app-shell :is(.favourite-star, .library-page .library-grid > .library-card .library-card-actions .favourite-star)[data-favourite-busy="true"] {
    opacity: .55;
}

@media (max-width: 760px) {
    .app-shell :is(.favourite-star, .library-page .library-grid > .library-card .library-card-actions .favourite-star) {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }
}

/* In forced colours the fill carries no meaning, so the pressed state has to
   be spelled out with a border the platform will honour. */
@media (forced-colors: active) {
    .favourites-chip.favourites-chip[aria-pressed="true"],
    .app-shell .favourite-star[aria-pressed="true"] {
        border: 2px solid currentColor;
    }
}

/* The chip is a FOURTH control in a header toolbar that was already carrying
   three, and the panel header itself does not wrap. The toolbar therefore
   keeps the whole set on one line for longer by letting the search box give
   ground first, instead of pushing the chip onto a line of its own. Below
   760px the header stacks and the rule above takes over. */
.app-shell .panel-header .workspace-search {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

.app-shell .panel-header .workspace-search > label:first-child {
    flex: 1 1 190px;
    min-width: 120px;
}

/* ═══ end DS3 · f24: favourites filter chip and per-row star ═══ */

/* ═══ DS3 · f25: shared record-table pager ═══════════════════════════════ */
/*
 * One pager for every record table. Built from the same tokens as the
 * toolbar chip beside it (--border, --surface-raised, --muted, --radius-pill)
 * rather than a new visual language.
 *
 * The row reserves its own height and both controls are always present —
 * disabled at the ends, never removed — so nothing on the page moves as the
 * user reaches the first or last page.
 */
.table-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    margin: 14px 0 0;
    padding: 9px 0 0;
    border-top: 1px solid var(--border);
}

.table-pager .table-pager-status {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

.table-pager .table-pager-step {
    flex: 0 0 auto;
    /* Matches the 38px toolbar controls this sits under. */
    height: 38px;
    min-height: 38px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-raised, var(--surface));
    color: var(--brand);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.table-pager .table-pager-step:hover:not(:disabled) {
    border-color: var(--brand);
    background: var(--surface);
}

.table-pager .table-pager-step:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/*
 * An end of the range is a disabled control, not a missing one. The shared
 * .secondary-button disabled rule sets a wait cursor, which would wrongly read
 * as "working" here.
 */
.table-pager .table-pager-step:disabled {
    cursor: default;
    opacity: .45;
    color: var(--muted);
}

@media (max-width: 540px) {
    .table-pager {
        gap: 8px;
    }

    .table-pager .table-pager-status {
        font-size: 12px;
    }

    .table-pager .table-pager-step {
        padding: 0 11px;
    }
}

/* ═══ end DS3 · f25: shared record-table pager ═══ */

/* ═══ DS3 · S2b: forced change-password step ═══
 * Rendered by renderPasswordChangeStep() in app.js in place of the shell when
 * the session carries passwordChangeRequired. Reuses the auth-card family;
 * only the layout, the administrator note and the sign-out link are new.
 * Tokens only, both themes. */

.password-change-shell {
    display: grid;
    place-items: center;
    min-height: 100dvh;
}

.password-change-card {
    width: min(100%, 520px);
}

.password-change-card .auth-form {
    margin-top: 22px;
}

.password-change-note {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-md, 11px);
    background: color-mix(in srgb, var(--warning) 9%, var(--surface));
    color: var(--ink);
    font-size: 13px;
    line-height: 1.5;
}

[data-theme="dark"] .password-change-note {
    background: color-mix(in srgb, var(--warning) 14%, var(--surface));
}

.password-change-card .auth-status:empty {
    display: none;
}

.password-change-sign-out {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--brand);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.password-change-sign-out:hover {
    color: color-mix(in srgb, var(--brand) 80%, var(--ink));
}

.password-change-sign-out:focus-visible {
    outline: 2px solid var(--focus-ring, var(--brand));
    outline-offset: 2px;
    border-radius: 4px;
}

@media (forced-colors: active) {
    .password-change-note {
        border-left-color: CanvasText;
    }
}

/* ═══ end DS3 · S2b: forced change-password step ═══ */

/* ═══ DS3 · S2c: split auth shell tolerates runtime-injected banners ═══
 *
 * `public/i18n.js` prepends the machine-translation notice into the
 * translatable root, which on /login and /signup is `.auth-shell`. That root
 * is also the two-column grid, so the notice became a third grid item: it
 * claimed row 1 / column 1, pushed the showcase into row 1 / column 2 and
 * dropped the sign-in panel into row 2 / column 1. The page read as broken in
 * every non-English language.
 *
 * The fix pins each pane to its own cell instead of relying on source order,
 * and gives the notice a full-width band in a leading row that collapses to
 * zero height when no notice is present. Any further node injected into this
 * root can no longer displace the panes.
 */
.auth-shell--split {
    grid-template-rows: auto minmax(0, 1fr);
}

.auth-shell--split > .auth-showcase {
    grid-column: 1;
    grid-row: 2;
}

.auth-shell--split > .auth-panel {
    grid-column: 2;
    grid-row: 2;
}

.auth-shell--split > :is(.i18n-notice, [data-i18n-notice]) {
    grid-column: 1 / -1;
    grid-row: 1;
    /* Translated notices run longer than the English source; let the band grow
       downwards rather than force a wider grid. */
    min-width: 0;
    text-wrap: pretty;
}

@media (max-width: 980px) {
    .auth-shell--split {
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    .auth-shell--split > .auth-showcase {
        grid-column: 1;
        grid-row: 2;
    }

    .auth-shell--split > .auth-panel {
        grid-column: 1;
        grid-row: 3;
    }
}

@media (max-width: 640px) {
    .auth-shell--split > :is(.i18n-notice, [data-i18n-notice]) {
        padding-inline: 14px;
    }
}

/* The single-column auth shells (plan choice, forced password change, the
 * offline notice) centre their card with `place-items: center`, which would
 * shrink the injected notice to its text width and float it as a pill. Keep it
 * a full-width band there too, so the disclosure reads the same on every page.
 */
.auth-shell:not(.auth-shell--split) > :is(.i18n-notice, [data-i18n-notice]) {
    justify-self: stretch;
    align-self: start;
    width: 100%;
}

/* ═══ end DS3 · S2c: split auth shell tolerates runtime-injected banners ═══ */

/* ═══ DS3 · CQ1: unified conversion queue table ═══
   The Conversion Queue tab used to render two sections — batch-job cards each
   holding an item table, then a "Your conversions" table — and the same
   document appeared in both. app.js now merges both sources into ONE table
   under a stat strip, a search box, a status select and quick-filter chips.
   Every colour below comes from the DS3 tokens so the page reads the same in
   the light, dark and system themes; the status chip keeps the shared
   .approval-status shape and is only re-toned by the truthful
   data-conversion-status value. */

.app-shell .conversion-queue-page .conversion-queue-host {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

/* ── Stat strip: five quick-filter tiles that echo the dashboard metric cards ── */
.app-shell .conversion-queue-page .cq-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
}

.app-shell .conversion-queue-page .cq-stat {
    --cq-tone: var(--brand);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: 92px;
    min-width: 0;
    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised, var(--surface));
    color: var(--ink);
    font: inherit;
    text-align: left;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

.app-shell .conversion-queue-page .cq-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 44px;
    height: 2px;
    background: linear-gradient(90deg, var(--cq-tone), color-mix(in srgb, var(--cq-tone) 20%, transparent));
    transition: width var(--motion-slow) var(--ease-out);
}

.app-shell .conversion-queue-page .cq-stat:hover {
    border-color: color-mix(in srgb, var(--cq-tone) 30%, var(--border));
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.app-shell .conversion-queue-page .cq-stat:hover::before,
.app-shell .conversion-queue-page .cq-stat[aria-pressed="true"]::before {
    width: 100%;
}

.app-shell .conversion-queue-page .cq-stat:focus-visible {
    outline: 2px solid var(--focus-ring, var(--brand));
    outline-offset: 2px;
}

.app-shell .conversion-queue-page .cq-stat[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--cq-tone) 55%, var(--border));
    background: color-mix(in srgb, var(--cq-tone) 9%, var(--surface-raised, var(--surface)));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cq-tone) 14%, transparent);
}

.app-shell .conversion-queue-page .cq-stat-label {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.app-shell .conversion-queue-page .cq-stat-value {
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    font-optical-sizing: auto;
    font-size: 28px;
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -.01em;
    line-height: 1;
    color: var(--ink);
}

/* Per-status tones: queued neutral, running informational, awaiting review
   aurum (the one that needs a human), template created success, failed
   danger. The same five tones re-tone the row chips below. */
.app-shell .conversion-queue-page .cq-stat[data-conversion-queue-quick="queued"] { --cq-tone: var(--muted); }
.app-shell .conversion-queue-page .cq-stat[data-conversion-queue-quick="running"] { --cq-tone: var(--info); }
.app-shell .conversion-queue-page .cq-stat[data-conversion-queue-quick="review"] { --cq-tone: var(--aurum); }
.app-shell .conversion-queue-page .cq-stat[data-conversion-queue-quick="template_created"] { --cq-tone: var(--success); }
.app-shell .conversion-queue-page .cq-stat[data-conversion-queue-quick="failed"] { --cq-tone: var(--danger); }

/* ── Toolbar: search, status select, quick-filter chips ─────────────────── */
.app-shell .conversion-queue-page .cq-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.app-shell .conversion-queue-page .cq-search {
    flex: 1 1 240px;
    min-width: 0;
    margin: 0;
}

.app-shell .conversion-queue-page .cq-status-select {
    flex: 0 0 auto;
    margin: 0;
}

.app-shell .conversion-queue-page .cq-toolbar input,
.app-shell .conversion-queue-page .cq-toolbar select {
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-base);
    box-shadow: none;
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.app-shell .conversion-queue-page .cq-toolbar select {
    width: auto;
    min-width: 176px;
    padding-right: var(--space-6);
}

.app-shell .conversion-queue-page .cq-toolbar input:focus,
.app-shell .conversion-queue-page .cq-toolbar select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.app-shell .conversion-queue-page .cq-toolbar input::placeholder {
    color: var(--muted);
}

.app-shell .conversion-queue-page .cq-chips {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.app-shell .conversion-queue-page .cq-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-raised, var(--surface));
    color: var(--muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.app-shell .conversion-queue-page .cq-chip:hover {
    border-color: var(--border-strong, var(--border));
    background: var(--subtle);
    color: var(--ink);
}

.app-shell .conversion-queue-page .cq-chip:focus-visible {
    outline: 2px solid var(--focus-ring, var(--brand));
    outline-offset: 2px;
}

.app-shell .conversion-queue-page .cq-chip[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--brand) 52%, var(--border));
    background: color-mix(in srgb, var(--brand) 13%, var(--surface));
    color: var(--ink);
    font-weight: 680;
}

.app-shell .conversion-queue-page .cq-chip-count {
    min-width: 18px;
    padding: 0 6px;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, currentColor 12%, transparent);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* ── Partial-source notice and coverage hint ────────────────────────────── */
.app-shell .conversion-queue-page [data-conversion-queue-notice]:empty {
    display: none;
}

.app-shell .conversion-queue-page .cq-notice {
    margin: 0;
}

.app-shell .conversion-queue-page [data-conversion-queue-coverage] {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

/* ── The table ──────────────────────────────────────────────────────────── */
.app-shell .conversion-queue-page .cq-table-host {
    min-width: 0;
}

.app-shell .conversion-queue-page .conversion-queue-table {
    min-width: 760px;
}

.app-shell .conversion-queue-page .conversion-queue-table th[data-cq-col="status"],
.app-shell .conversion-queue-page .conversion-queue-table td[data-cq-col="status"],
.app-shell .conversion-queue-page .conversion-queue-table th[data-cq-col="action"],
.app-shell .conversion-queue-page .conversion-queue-table td[data-cq-col="action"],
.app-shell .conversion-queue-page .conversion-queue-table td[data-cq-col="started"] {
    white-space: nowrap;
}

.app-shell .conversion-queue-page .conversion-queue-table td[data-cq-col="document"] {
    min-width: 260px;
}

.app-shell .conversion-queue-page .cq-doc {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.app-shell .conversion-queue-page .cq-doc-name {
    color: var(--ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.app-shell .conversion-queue-page .cq-doc .conversion-item-failure {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-sm);
}

.app-shell .conversion-queue-page .cq-job {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--subtle);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .02em;
}

.app-shell .conversion-queue-page td[data-cq-col="action"] > .primary-button,
.app-shell .conversion-queue-page td[data-cq-col="action"] > .secondary-button,
.app-shell .conversion-queue-page td[data-cq-col="action"] > .quiet-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin: 0;
    padding: 0 12px;
    font-size: var(--text-sm);
    white-space: nowrap;
    text-decoration: none;
}

/* Row chips: keep .approval-status's shape, re-tone by the truthful status. */
.app-shell .conversion-queue-page .approval-status[data-conversion-status="queued"] {
    border-color: var(--border);
    background: var(--subtle);
    color: var(--muted);
}

.app-shell .conversion-queue-page .approval-status[data-conversion-status="running"] {
    border-color: color-mix(in srgb, var(--info) 35%, transparent);
    background: var(--info-soft);
    color: var(--info);
}

.app-shell .conversion-queue-page .approval-status[data-conversion-status="running"]::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 1px;
    animation: cq-pulse 1.2s ease-in-out infinite;
}

.app-shell .conversion-queue-page .approval-status[data-conversion-status="review"] {
    border-color: color-mix(in srgb, var(--aurum) 40%, transparent);
    background: var(--aurum-soft, var(--warning-soft));
    color: var(--aurum);
}

@keyframes cq-pulse {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .conversion-queue-page .approval-status[data-conversion-status="running"]::before {
        animation: none;
    }

    .app-shell .conversion-queue-page .cq-stat,
    .app-shell .conversion-queue-page .cq-stat::before {
        transition: none;
    }
}

[data-reduced-motion="true"] .app-shell .conversion-queue-page .approval-status[data-conversion-status="running"]::before {
    animation: none;
}

/* ── Empty states ───────────────────────────────────────────────────────── */
.app-shell .conversion-queue-page .empty-state .primary-button {
    margin-top: var(--space-3);
}

.app-shell .conversion-queue-page .cq-filtered-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-7) var(--space-4);
    border: 1px dashed color-mix(in srgb, var(--border-strong, var(--border)) 80%, transparent);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    text-align: center;
}

.app-shell .conversion-queue-page .cq-filtered-empty p {
    margin: 0;
}

/* ── Dark theme: a slightly stronger tint so the pressed tile still reads ── */
[data-theme="dark"] .app-shell .conversion-queue-page .cq-stat[aria-pressed="true"] {
    background: color-mix(in srgb, var(--cq-tone) 16%, var(--surface-raised, var(--surface)));
}

[data-theme="dark"] .app-shell .conversion-queue-page .cq-chip[aria-pressed="true"] {
    background: color-mix(in srgb, var(--brand) 20%, var(--surface));
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] .app-shell .conversion-queue-page .cq-stat[aria-pressed="true"] {
        background: color-mix(in srgb, var(--cq-tone) 16%, var(--surface-raised, var(--surface)));
    }

    [data-theme="system"] .app-shell .conversion-queue-page .cq-chip[aria-pressed="true"] {
        background: color-mix(in srgb, var(--brand) 20%, var(--surface));
    }
}

/* ── Responsive: the table scrolls inside .table-scroll; on phones the Job and
   Attempt columns are hidden and the strip stacks two-up. ── */
@media (max-width: 1100px) {
    .app-shell .conversion-queue-page .cq-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .app-shell .conversion-queue-page .cq-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-shell .conversion-queue-page .cq-stat {
        min-height: 78px;
        padding: var(--space-3);
    }

    .app-shell .conversion-queue-page .cq-status-select {
        flex: 1 1 100%;
    }

    .app-shell .conversion-queue-page .cq-toolbar select {
        width: 100%;
    }

    .app-shell .conversion-queue-page .conversion-queue-table {
        min-width: 560px;
    }

    .app-shell .conversion-queue-page .conversion-queue-table th[data-cq-col="attempt"],
    .app-shell .conversion-queue-page .conversion-queue-table td[data-cq-col="attempt"],
    .app-shell .conversion-queue-page .conversion-queue-table th[data-cq-col="job"],
    .app-shell .conversion-queue-page .conversion-queue-table td[data-cq-col="job"] {
        display: none;
    }
}

@media (forced-colors: active) {
    .app-shell .conversion-queue-page .cq-stat[aria-pressed="true"],
    .app-shell .conversion-queue-page .cq-chip[aria-pressed="true"] {
        outline: 2px solid CanvasText;
        outline-offset: -2px;
    }
}

/* ═══ end DS3 · CQ1: unified conversion queue table ═══ */

/* ═══ DS3 · SS1: searchable select ═══
   Progressive enhancement rendered by public/searchable-select.js beside any
   native <select> carrying 8+ options. The native control stays in the DOM as
   the form's source of truth (FormData, `.value`, `change`) but is visually
   removed; the combobox input inherits the DS3 field surface through the
   generic `:where(input, select, textarea)` rules above, so this block only
   adds layout, the chevron and clear affordances, and the listbox popover.
   Tokens only, so [data-theme="dark"] needs no extra rules. ═══ */

.searchable-select {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    cursor: auto;
}

.app-shell label > .searchable-select,
.modal-backdrop form label > .searchable-select {
    width: 100%;
}

.modal-backdrop form label > .searchable-select {
    margin-top: 7px;
}

.app-shell .searchable-select__input,
.modal-backdrop .searchable-select__input {
    display: block;
    width: 100%;
    padding-right: 60px;
    text-overflow: ellipsis;
    font-weight: 450;
}

/* The native select is kept in place (and fills the wrapper) so a browser
   validation bubble anchored on it still points at the field. */
.searchable-select > .searchable-select__native,
.app-shell .searchable-select__native,
.modal-backdrop .searchable-select__native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.searchable-select__chevron {
    position: absolute;
    right: 15px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
    transition: transform var(--motion-fast) var(--ease-out, ease), border-color var(--motion-fast) var(--ease-out, ease);
}

.searchable-select.is-open .searchable-select__chevron {
    transform: translateY(-30%) rotate(225deg);
    border-color: var(--brand);
}

.searchable-select.is-disabled .searchable-select__chevron {
    opacity: .5;
}

.app-shell .searchable-select__clear,
.modal-backdrop .searchable-select__clear {
    position: absolute;
    right: 34px;
    top: 50%;
    width: 22px;
    height: 22px;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.app-shell .searchable-select__clear:hover,
.modal-backdrop .searchable-select__clear:hover {
    background: var(--brand-soft);
    color: var(--ink);
}

.searchable-select__popover {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + var(--space-1));
    z-index: 60;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 450;
    letter-spacing: 0;
    text-align: left;
    color: var(--ink);
}

.searchable-select.is-above .searchable-select__popover {
    top: auto;
    bottom: calc(100% + var(--space-1));
}

.searchable-select__list {
    list-style: none;
    margin: 0;
    padding: var(--space-1);
    max-height: 288px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.searchable-select__option {
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: var(--text-base);
    font-weight: 450;
    line-height: 1.35;
    cursor: pointer;
}

.searchable-select__option.is-active {
    background: var(--brand-soft);
    color: var(--ink);
}

.searchable-select__option[aria-selected="true"] {
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--brand);
}

.searchable-select__option[aria-disabled="true"] {
    color: var(--muted);
    opacity: .6;
    cursor: not-allowed;
}

.searchable-select__option--placeholder {
    color: var(--muted);
    font-style: italic;
}

.searchable-select__option mark {
    padding: 0 1px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--brand) 18%, transparent);
    color: inherit;
}

.searchable-select__group {
    margin: 0;
    padding: 8px 10px 4px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.searchable-select__empty,
.searchable-select__more {
    margin: 0;
    padding: 10px;
    color: var(--muted);
    font-size: var(--text-sm);
    text-align: center;
}

.searchable-select__footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    padding: 6px 10px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 450;
    letter-spacing: 0;
    text-transform: none;
}

.searchable-select__hint {
    white-space: nowrap;
}

.searchable-select__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .searchable-select__hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .searchable-select__chevron {
        transition: none;
    }
}

[data-reduced-motion="true"] .searchable-select__chevron {
    transition: none;
}

@media (forced-colors: active) {
    .searchable-select__popover {
        border-color: CanvasText;
        box-shadow: none;
    }

    .searchable-select__option.is-active {
        background: Highlight;
        color: HighlightText;
        forced-color-adjust: none;
    }

    .searchable-select__option mark {
        background: Mark;
        color: MarkText;
    }

    .searchable-select__chevron {
        border-color: ButtonText;
    }
}

/* ═══ end DS3 · SS1: searchable select ═══ */

/* ═══ DS3 · CR1: full-screen conversion review page ═══
 *
 * /app/conversion-queue/{conversionId}. Replaces the review dialog: a
 * two-column workspace (template details + proposed placeholders on the left,
 * the exact reviewed text on the right, sticky), a sticky action bar at the
 * bottom, and a closing panel that says what was created and where to go
 * next. Tokens only, so the dark theme needs no separate rules.
 */
.app-shell .conversion-review-page {
    gap: var(--space-5);
}

.app-shell .conversion-review-heading .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.app-shell .conversion-review-back {
    color: var(--brand);
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: none;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--motion-fast) var(--ease-out);
}

.app-shell .conversion-review-back:hover,
.app-shell .conversion-review-back:focus-visible {
    border-bottom-color: currentColor;
}

.app-shell .conversion-review-heading h1 {
    overflow-wrap: anywhere;
}

.app-shell .conversion-review-host {
    min-width: 0;
}

.app-shell .conversion-review-form {
    display: grid;
    gap: var(--space-5);
}

.app-shell .conversion-review-layout {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(0, 1.35fr);
    gap: var(--space-5);
    align-items: start;
}

.app-shell .conversion-review-side {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

.app-shell .conversion-review-panel {
    min-width: 0;
}

.app-shell .conversion-review-panel .panel-header h2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.app-shell .conversion-review-count {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font: 600 var(--text-xs)/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.app-shell .conversion-review-fields {
    display: grid;
    gap: var(--space-4);
}

.app-shell .conversion-review-availability {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.app-shell .conversion-review-availability legend {
    padding: 0;
    margin-bottom: var(--space-1);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 600;
}

.app-shell .conversion-review-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

.app-shell .conversion-review-choice:hover {
    border-color: var(--border-strong);
}

.app-shell .conversion-review-choice:has(input:checked) {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
    background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}

.app-shell .conversion-review-choice:has(input:focus-visible) {
    box-shadow: 0 0 0 3px var(--focus-glow);
}

.app-shell .conversion-review-choice input {
    margin: 3px 0 0;
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
}

.app-shell .conversion-review-choice span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.app-shell .conversion-review-choice strong {
    font-size: var(--text-sm);
    font-weight: 620;
    color: var(--ink);
}

.app-shell .conversion-review-choice small {
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.app-shell .conversion-review-publish {
    border-style: dashed;
}

.app-shell .conversion-review-candidate-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.app-shell .conversion-review-filter {
    flex: 1 1 200px;
    min-width: 0;
}

.app-shell .conversion-review-filter input {
    width: 100%;
}

.app-shell .conversion-candidate-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: min(52vh, 620px);
    overflow: auto;
    scrollbar-width: thin;
    padding-right: 2px;
}

.app-shell .conversion-candidate {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(150px, .8fr);
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}

.app-shell .conversion-candidate:has([data-candidate-enabled]:not(:checked)) {
    opacity: .58;
    border-style: dashed;
}

.app-shell .conversion-candidate:has([data-candidate-enabled]:not(:checked)) .conversion-candidate-source {
    text-decoration: line-through;
    text-decoration-color: var(--muted);
}

.app-shell .conversion-candidate[data-candidate-kind="insertion"] {
    border-left: 3px solid var(--aurum);
}

.app-shell .conversion-candidate-toggle input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--brand);
}

.app-shell .conversion-candidate-body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.app-shell .conversion-candidate-source {
    font-size: var(--text-sm);
    color: var(--ink);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.app-shell .conversion-candidate-insert {
    color: var(--muted);
    font-style: italic;
}

.app-shell .conversion-candidate-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--muted);
    font-size: var(--text-xs);
}

.app-shell .conversion-candidate-category {
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 10.5px;
}

.app-shell .conversion-candidate-field {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    margin: 0;
}

.app-shell .conversion-candidate-braces {
    color: var(--muted);
    font: 500 var(--text-sm)/1 var(--font-mono);
}

.app-shell .conversion-candidate-name.conversion-candidate-name {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.app-shell .conversion-candidate-name:invalid {
    border-color: var(--danger);
}

.app-shell .conversion-candidate-empty {
    padding: var(--space-3);
}

.app-shell .conversion-review-editor {
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100svh - var(--topbar-h) - 32px);
}

.app-shell .conversion-review-editor .panel-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.app-shell .conversion-review-editor-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.app-shell .conversion-review-editor-field {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.app-shell .conversion-review-editor textarea.conversion-review-editor-textarea,
.app-shell .conversion-review-editor [data-conversion-review-dsl] {
    flex: 1 1 auto;
    width: 100%;
    min-height: min(60vh, 720px);
    resize: vertical;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.7;
    tab-size: 2;
    white-space: pre-wrap;
}

.app-shell .conversion-review-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}

.app-shell .conversion-review-status {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.app-shell .conversion-review-status:empty {
    display: none;
}

.app-shell .conversion-review-bar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Closing panel */
.app-shell .conversion-review-done {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    max-width: 720px;
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.app-shell .conversion-review-done-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--success-soft);
    color: var(--success);
    font-size: 22px;
    font-weight: 700;
}

.app-shell .conversion-review-done[data-template-published="false"] .conversion-review-done-mark {
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .conversion-review-done h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 560;
    letter-spacing: -.015em;
}

.app-shell .conversion-review-done-meta {
    width: 100%;
}

.app-shell .conversion-review-done-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* Queue row: two actions side by side without wrapping the table */
.app-shell .cq-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Upload dialog: the three-step explainer */
.app-shell .template-conversion-steps,
.modal-backdrop .template-conversion-steps {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: conversion-step;
}

.modal-backdrop .template-conversion-steps li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
    align-items: baseline;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--subtle);
    counter-increment: conversion-step;
}

.modal-backdrop .template-conversion-steps li::before {
    content: counter(conversion-step, decimal-leading-zero);
    grid-row: 1 / span 2;
    color: var(--aurum);
    font: 600 var(--text-xs)/1.6 var(--font-mono);
}

.modal-backdrop .template-conversion-steps strong {
    font-size: var(--text-sm);
    font-weight: 620;
}

.modal-backdrop .template-conversion-steps span {
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.app-shell .empty-state-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

@media (max-width: 1050px) {
    .app-shell .conversion-review-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-shell .conversion-review-editor {
        position: static;
        max-height: none;
    }

    .app-shell .conversion-candidate-list {
        max-height: 420px;
    }
}

@media (max-width: 640px) {
    .app-shell .conversion-candidate {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .app-shell .conversion-candidate-field {
        grid-column: 2;
    }

    .app-shell .conversion-review-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .app-shell .conversion-review-bar-actions {
        margin-left: 0;
    }

    .app-shell .conversion-review-bar-actions > * {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .conversion-candidate,
    .app-shell .conversion-review-choice,
    .app-shell .conversion-review-back {
        transition: none;
    }
}

@media (forced-colors: active) {
    .app-shell .conversion-candidate[data-candidate-kind="insertion"] {
        border-left-color: CanvasText;
    }
}

/* ═══ end DS3 · CR1: full-screen conversion review page ═══ */

/* ═══ DS3 · TL1: template lifecycle actions ═══
   The Templates tab chooses its controls by the real lifecycle state. The
   quiet Deprecate / Retire buttons live in the detail rail only; a retired
   row carries a note instead of a control; a deep link that cannot be
   honoured leaves a one-line notice above the list. */

.app-shell .library-page .library-lifecycle-action {
    min-height: 34px;
    padding: 0 10px;
    font-size: var(--text-sm);
}

.app-shell .library-page .library-lifecycle-action[data-template-deprecate]:hover,
.app-shell .library-page .library-lifecycle-action[data-template-deprecate]:focus-visible {
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
    background: var(--warning-soft);
    color: var(--warning);
}

.app-shell .library-page .library-lifecycle-action[data-template-retire]:hover,
.app-shell .library-page .library-lifecycle-action[data-template-retire]:focus-visible {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
    background: var(--danger-soft);
    color: var(--danger);
}

.app-shell .library-page .library-lifecycle-note {
    margin: 0;
    align-self: center;
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--muted);
}

/* The row grid gives the actions cell a fixed lane; a note there must wrap
   rather than widen the column. */
.app-shell .library-page .library-grid > .library-card .library-lifecycle-note {
    max-width: 22ch;
    text-align: right;
}

.app-shell .library-page .library-detail-actions .library-lifecycle-note {
    flex: 1 1 100%;
    text-align: left;
}

.app-shell .library-page .library-focus-notice {
    margin: 0 0 var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--subtle);
    font-size: var(--text-sm);
}

.app-shell .library-page .library-focus-notice[hidden] {
    display: none;
}

.app-shell .drafting-page .drafting-library-context-actions .primary-button[data-template-use-global] {
    min-height: 34px;
    padding: 0 12px;
}

/* Rail-only management row (Edit details · Archive) and its inline form. */
.app-shell .library-page .library-detail-manage {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.app-shell .library-page .library-detail-manage .library-card-action-status {
    flex: 1 1 100%;
    margin: 0;
}

.app-shell .library-page .library-detail-manage .library-card-action-status:empty {
    display: none;
}

.app-shell .library-page .library-lifecycle-action[data-template-archive]:hover,
.app-shell .library-page .library-lifecycle-action[data-template-archive]:focus-visible {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
    background: var(--danger-soft);
    color: var(--danger);
}

.app-shell .library-page .library-edit-form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--subtle);
}

.app-shell .library-page .library-edit-form[hidden] {
    display: none;
}

.app-shell .library-page .library-edit-form label {
    display: grid;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: 650;
    color: var(--muted);
}

.app-shell .library-page .library-edit-form input,
.app-shell .library-page .library-edit-form textarea {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
}

.app-shell .library-page .library-edit-form textarea {
    resize: vertical;
    min-height: 72px;
}

.app-shell .library-page .library-edit-form .library-card-action-status {
    margin: 0;
}

.app-shell .library-page .library-edit-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (forced-colors: active) {
    .app-shell .library-page .library-lifecycle-action[data-template-deprecate]:hover,
    .app-shell .library-page .library-lifecycle-action[data-template-retire]:hover,
    .app-shell .library-page .library-lifecycle-action[data-template-archive]:hover {
        border-color: CanvasText;
    }
}

/* ═══ end DS3 · TL1: template lifecycle actions ═══ */

/* ═══ DS3 · MA1: matter team access (members) ═══
 *
 * Matter visibility is membership-based, so this control decides who may open
 * a matter and therefore who may review its drafts. It lives inside the
 * existing access-and-confidentiality card, below the metrics, and uses only
 * DS3 tokens so the dark theme needs no separate rules.
 */
.app-shell .matter-member-manager {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.app-shell .matter-member-heading h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: -.01em;
}

.app-shell .matter-member-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-shell .matter-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.app-shell .matter-member-identity {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.app-shell .matter-member-identity strong {
    font-size: var(--text-sm);
    font-weight: 620;
    overflow-wrap: anywhere;
}

.app-shell .matter-member-identity span {
    font-size: var(--text-xs);
}

.app-shell .matter-member-empty {
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.app-shell .matter-member-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.app-shell .matter-member-form label {
    flex: 1 1 190px;
    min-width: 0;
    margin: 0;
}

.app-shell .matter-member-form select {
    width: 100%;
}

.app-shell .matter-member-form button {
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .app-shell .matter-member-form label,
    .app-shell .matter-member-form button {
        flex: 1 1 100%;
    }
}

/* ═══ end DS3 · MA1: matter team access (members) ═══ */

/* ═══ DS3 · RV1: pending draft reviews (reviewer's way in) ═══
 *
 * The panel is hidden unless the server returns work, so it must read as a
 * deliberate queue when it appears rather than an empty shelf. The dialog
 * shows the exact generated output, so its body is monospace and scrolls.
 */
.app-shell .drafting-review-panel {
    border-left: 3px solid var(--aurum);
}

.app-shell .drafting-review-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-shell .drafting-review-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--motion-fast) var(--ease-out);
}

.app-shell .drafting-review-row:hover {
    border-color: var(--border-strong);
}

.app-shell .drafting-review-identity {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.app-shell .drafting-review-identity strong {
    font-size: var(--text-sm);
    font-weight: 620;
    overflow-wrap: anywhere;
}

.app-shell .drafting-review-identity span {
    font-size: var(--text-xs);
}

.modal-backdrop .drafting-review-dialog {
    width: min(880px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
}

.modal-backdrop .drafting-review-output {
    max-height: min(52vh, 560px);
    overflow: auto;
    margin: var(--space-3) 0;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--subtle);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .app-shell .drafting-review-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .drafting-review-row {
        transition: none;
    }
}

/* ═══ end DS3 · RV1: pending draft reviews ═══ */

/* Document preview frame.
   The frame renders a full page-width document, so the dialog is sized to the
   viewport rather than to content: a fixed-width modal would either clip an A4
   page or leave a form floating in whitespace. */
.document-preview-backdrop .document-preview-modal {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: min(1100px, 96vw);
    width: min(1100px, 96vw);
    height: min(92vh, 1000px);
}

.document-preview-frame {
    background: #eef0f4;
    border: 1px solid var(--border, #e4e7ec);
    border-radius: 8px;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.document-preview-backdrop .modal-actions {
    flex: 0 0 auto;
}

/* ─────────── Reminder dialog: facts, snooze row and status ───────────
   A due reminder is acknowledged or deferred, never dismissed. The facts list
   carries what the server resolved (due instant, start, location, matter) and
   the snooze row stays collapsed until the practitioner opts into it, so the
   default path is still one button press. Tokens only — the page enforces a
   strict CSP and loads no external resource. */

.reminder-facts {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--subtle) 55%, var(--surface));
}

.reminder-facts:empty {
    display: none;
}

.reminder-fact {
    display: grid;
    grid-template-columns: minmax(72px, auto) 1fr;
    align-items: baseline;
    gap: 10px;
}

.reminder-fact dt {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-xs, 11px);
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.reminder-fact dd {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.reminder-snooze {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.reminder-snooze-toggle {
    cursor: pointer;
}

.reminder-snooze-fields {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.reminder-snooze-fields[hidden] {
    display: none;
}

.reminder-snooze-label {
    color: var(--muted);
    font-size: var(--text-xs, 11px);
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.reminder-snooze-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    transition:
        border-color var(--motion-fast, 120ms) var(--ease-out, ease),
        box-shadow var(--motion-fast, 120ms) var(--ease-out, ease);
}

.reminder-snooze-input:focus-visible {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
    outline: none;
}

.reminder-snooze-input:disabled {
    background: var(--subtle);
    color: var(--muted);
    cursor: not-allowed;
}

.reminder-status {
    margin: 12px 0 0;
    font-size: 12px;
}

.reminder-status[hidden] {
    display: none;
}

.reminder-status[data-state="loading"] {
    color: var(--muted);
}

.reminder-status[data-state="error"] {
    color: var(--danger);
}

.reminder-modal .modal-actions {
    flex-wrap: wrap;
}

.reminder-modal .modal-actions button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ═══ DS3 · CR2: proposed placeholders are recommendations, grouped by name ═══
   Owner, 2026-09-17. Each proposal is offered, not imposed: a row carries an
   explicit Accept/Reject control and states what a rejection means. Occurrences
   of one name sit under a single group header that names the value once and
   shows how many places it fills. Colour comes from DS3 tokens only, so both
   themes and forced-colors stay readable. */

.app-shell .conversion-review-summary {
    margin: 0 0 var(--space-3);
    color: var(--muted);
    font-size: var(--text-xs);
}

.app-shell .conversion-review-summary:empty {
    display: none;
}

.app-shell .conversion-candidate-group {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.app-shell .conversion-candidate-group[hidden] {
    display: none;
}

.app-shell .conversion-candidate-group[data-group-decision="rejected"] {
    border-style: dashed;
}

.app-shell .conversion-candidate-group[data-group-conflict="true"] {
    border-color: var(--warning);
}

.app-shell .conversion-candidate-group-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.app-shell .conversion-candidate-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    cursor: pointer;
}

.app-shell .conversion-candidate-group-toggle input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--brand);
}

.app-shell .conversion-candidate-group-state {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--muted);
}

.app-shell .conversion-candidate-group[data-group-decision="accepted"] .conversion-candidate-group-state {
    color: var(--success);
}

.app-shell .conversion-candidate-group[data-group-decision="partial"] .conversion-candidate-group-state {
    color: var(--warning);
}

.app-shell .conversion-candidate-group-field {
    flex: 1 1 180px;
}

.app-shell .conversion-candidate-uses {
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.app-shell .conversion-candidate-group[data-group-count="1"] .conversion-candidate-uses {
    font-weight: 500;
}

.app-shell .conversion-candidate-group-note {
    margin: 0;
    padding: 6px 10px;
    border-radius: var(--radius-sm, 7px);
    background: var(--subtle);
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.app-shell .conversion-candidate-group[data-group-conflict="true"] .conversion-candidate-group-note {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.app-shell .conversion-candidate-occurrences {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The per-occurrence layout is now text plus one decision control; the hidden
   state inputs take no column. */
.app-shell .conversion-candidate-occurrences .conversion-candidate {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.app-shell .conversion-candidate[data-candidate-decision="rejected"] {
    opacity: .72;
    border-style: dashed;
}

.app-shell .conversion-candidate[data-candidate-decision="rejected"] .conversion-candidate-source {
    text-decoration: line-through;
    text-decoration-color: var(--muted);
}

.app-shell .conversion-candidate-place {
    font-variant-numeric: tabular-nums;
}

.app-shell .conversion-candidate-decision {
    display: none;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--danger);
}

.app-shell .conversion-candidate[data-candidate-decision="rejected"] .conversion-candidate-decision {
    display: inline;
}

.app-shell .conversion-candidate-decide {
    min-height: 32px;
    min-width: 84px;
    justify-content: center;
}

.app-shell .conversion-candidate[data-candidate-decision="rejected"] .conversion-candidate-decide {
    color: var(--brand);
}

@media (max-width: 640px) {
    .app-shell .conversion-candidate-occurrences .conversion-candidate {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-shell .conversion-candidate-decide {
        min-height: 44px;
        width: 100%;
    }

    .app-shell .conversion-candidate-group-toggle {
        min-height: 44px;
    }

    .app-shell .conversion-candidate-group-toggle input {
        width: 22px;
        height: 22px;
    }

    .app-shell .conversion-candidate-group-field {
        flex: 1 1 100%;
    }

    .app-shell .conversion-candidate-group-field input {
        min-height: 44px;
    }
}

@media (forced-colors: active) {
    .app-shell .conversion-candidate-group[data-group-conflict="true"] {
        border-color: CanvasText;
    }
}

/* ═══ end DS3 · CR2: proposed placeholders are recommendations ═══ */