* {
    box-sizing: border-box;
}

html {
    color-scheme: light;
    background: var(--mshp-bg-page);
}

body {
    min-width: 320px;
    margin: 0;
    color: var(--mshp-text-default);
    background: var(--mshp-bg-page);
    font-family: var(--mshp-font-sans);
    font-size: 16px;
    line-height: 1.5;
}

a {
    color: var(--mshp-link);
}

a:hover {
    color: var(--mshp-brand-deep-blue);
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--mshp-focus);
    outline-offset: 2px;
}

.mshp-app-header {
    display: flex;
    min-height: 64px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--mshp-space-6);
    margin: 0;
    padding: var(--mshp-space-3) max(
        var(--mshp-space-6),
        calc((100% - var(--mshp-container)) / 2)
    );
    color: var(--mshp-text-strong);
    background: var(--mshp-bg-surface);
    border-bottom: 1px solid var(--mshp-border);
    box-shadow: var(--mshp-shadow-sm);
}

.mshp-brand {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: var(--mshp-space-3);
    color: var(--mshp-text-strong);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.mshp-brand:hover {
    color: var(--mshp-text-strong);
}

.mshp-brand__logo {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.mshp-primary-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mshp-space-1);
    flex-wrap: wrap;
}

.mshp-nav-link {
    display: inline-flex;
    min-height: 40px;
    margin: 0;
    align-items: center;
    justify-content: center;
    padding: var(--mshp-space-2) var(--mshp-space-3);
    color: var(--mshp-text-default);
    background: transparent;
    border: 0;
    border-radius: var(--mshp-radius-sm);
    font-size: inherit;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.mshp-nav-link:hover {
    color: var(--mshp-action-secondary-text);
    background: var(--mshp-bg-subtle);
}

.mshp-nav-link.is-active {
    color: var(--mshp-action-secondary-text);
    background: var(--mshp-bg-selected);
}

.mshp-nav-logout {
    display: inline-flex;
    margin: 0;
}

.mshp-main {
    width: min(100%, calc(var(--mshp-container) + 48px));
    margin: 0 auto;
    padding: var(--mshp-space-8) var(--mshp-space-6) var(--mshp-space-12);
}

.mshp-main--narrow {
    width: min(100%, 760px);
}

.mshp-main--auth {
    display: grid;
    width: min(100%, 560px);
    min-height: calc(100vh - 64px);
    place-items: center;
}

.mshp-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mshp-space-6);
    margin-bottom: var(--mshp-space-6);
}

.mshp-page-heading h1,
.mshp-card h1 {
    margin: 0;
    color: var(--mshp-text-strong);
    font-size: 32px;
    line-height: 1.2;
}

.mshp-page-heading p,
.mshp-card__lead {
    max-width: 720px;
    margin: var(--mshp-space-2) 0 0;
    color: var(--mshp-text-muted);
}

.mshp-eyebrow {
    margin: 0 0 var(--mshp-space-1);
    color: var(--mshp-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.mshp-principal {
    color: var(--mshp-text-muted);
    font-size: 14px;
    text-align: right;
}

.mshp-principal strong {
    display: block;
    color: var(--mshp-text-strong);
}

.mshp-card,
.panel,
.confirmation {
    margin: 0 0 var(--mshp-space-5);
    padding: var(--mshp-space-6);
    background: var(--mshp-bg-surface);
    border: 1px solid var(--mshp-border);
    border-radius: var(--mshp-radius-md);
    box-shadow: var(--mshp-shadow-sm);
}

.mshp-card h2,
.panel h2 {
    margin: 0 0 var(--mshp-space-4);
    color: var(--mshp-text-strong);
    font-size: 22px;
    line-height: 1.3;
}

.mshp-auth-card {
    width: 100%;
    padding: var(--mshp-space-8);
}

.mshp-auth-mark {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: var(--mshp-space-4);
    object-fit: contain;
}

.mshp-form,
.stacked-form {
    display: grid;
    gap: var(--mshp-space-4);
}

.mshp-form label,
.stacked-form label,
.inline-form label {
    display: grid;
    gap: var(--mshp-space-1);
    color: var(--mshp-text-strong);
    font-size: 14px;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: var(--mshp-space-2) var(--mshp-space-3);
    color: var(--mshp-text-default);
    background: var(--mshp-bg-surface);
    border: 1px solid var(--mshp-border-strong);
    border-radius: var(--mshp-radius-sm);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

button,
.button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: var(--mshp-space-2) var(--mshp-space-4);
    color: var(--mshp-brand-white);
    background: var(--mshp-action-primary);
    border: 1px solid var(--mshp-action-primary);
    border-radius: var(--mshp-radius-sm);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

button:hover,
.button:hover {
    color: var(--mshp-brand-white);
    background: var(--mshp-action-primary-hover);
    border-color: var(--mshp-action-primary-hover);
}

button:disabled,
.button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .5;
}

.button.secondary,
.secondary-button,
.danger-secondary {
    color: var(--mshp-action-secondary-text);
    background: var(--mshp-action-secondary-bg);
    border-color: var(--mshp-brand-light-blue);
}

.button.secondary:hover,
.secondary-button:hover,
.danger-secondary:hover {
    color: var(--mshp-action-secondary-text);
    background: #ddf1f8;
    border-color: var(--mshp-brand-light-blue);
}

.danger,
button.danger {
    color: var(--mshp-brand-white);
    background: var(--mshp-brand-red);
    border-color: var(--mshp-brand-red);
}

.danger-secondary {
    color: var(--mshp-state-critical-fg);
    background: var(--mshp-state-critical-bg);
    border-color: var(--mshp-state-critical-border);
}

.mshp-alert,
.notice,
.error,
.auth-error,
.auth-success,
.token-status {
    margin: 0 0 var(--mshp-space-4);
    padding: var(--mshp-space-3) var(--mshp-space-4);
    border: 1px solid var(--mshp-border);
    border-radius: var(--mshp-radius-sm);
}

.notice,
.auth-success,
.token-status {
    color: var(--mshp-state-demonstrated-fg);
    background: var(--mshp-state-demonstrated-bg);
    border-color: var(--mshp-state-demonstrated-border);
}

.error,
.auth-error {
    color: var(--mshp-state-critical-fg);
    background: var(--mshp-state-critical-bg);
    border-color: var(--mshp-state-critical-border);
}

.token-status--empty,
.mshp-alert--neutral {
    color: var(--mshp-state-insufficient-fg);
    background: var(--mshp-state-insufficient-bg);
    border-color: var(--mshp-state-insufficient-border);
}

.mshp-section-navigation {
    display: flex;
    margin: 0 0 var(--mshp-space-6);
    padding: var(--mshp-space-1);
    gap: var(--mshp-space-1);
    overflow-x: auto;
    background: var(--mshp-bg-surface);
    border: 1px solid var(--mshp-border);
    border-radius: var(--mshp-radius-md);
}

.mshp-section-navigation a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    padding: var(--mshp-space-2) var(--mshp-space-3);
    color: var(--mshp-text-default);
    border-radius: var(--mshp-radius-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.mshp-section-navigation a.is-active {
    color: var(--mshp-action-secondary-text);
    background: var(--mshp-bg-selected);
}

.summary,
.impact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--mshp-space-3);
    margin: 0;
}

.summary div,
.impact div,
.summary-card {
    padding: var(--mshp-space-4);
    background: var(--mshp-bg-subtle);
    border: 1px solid var(--mshp-border);
    border-radius: var(--mshp-radius-sm);
}

dt {
    color: var(--mshp-text-muted);
    font-size: 13px;
}

dd {
    margin: var(--mshp-space-1) 0 0;
    color: var(--mshp-text-strong);
    font-weight: 700;
}

.mshp-table-scroll {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: var(--mshp-space-3);
    border-bottom: 1px solid var(--mshp-border);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--mshp-text-muted);
    background: var(--mshp-bg-subtle);
    font-size: 14px;
}

.inline-form,
.assignment,
.confirmation-actions,
.section-heading {
    display: flex;
    align-items: end;
    gap: var(--mshp-space-3);
}

.section-heading {
    justify-content: space-between;
    margin-bottom: var(--mshp-space-4);
}

.section-heading h2 {
    margin-bottom: 0;
}

.assignment {
    justify-content: space-between;
    padding: var(--mshp-space-2) 0;
    border-bottom: 1px solid var(--mshp-border);
}

.grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mshp-space-5);
}

.confirmation-actions {
    justify-content: flex-end;
    margin-top: var(--mshp-space-6);
}

.muted,
.empty,
.token-warning {
    color: var(--mshp-text-muted);
}

.empty {
    padding: var(--mshp-space-5);
    background: var(--mshp-bg-subtle);
    border-radius: var(--mshp-radius-sm);
    text-align: center;
}

.token-warning {
    margin: 0;
    font-size: 13px;
}

.token-technical-code {
    color: var(--mshp-text-muted);
}

.token-reconnect-dialog {
    width: min(calc(100% - 32px), 480px);
    padding: var(--mshp-space-6);
    color: var(--mshp-text-default);
    background: var(--mshp-bg-surface);
    border: 1px solid var(--mshp-border);
    border-radius: var(--mshp-radius-lg);
    box-shadow: var(--mshp-shadow-md);
}

.token-reconnect-dialog::backdrop {
    background: rgba(23, 32, 51, .48);
}

.graph-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mshp-space-4);
    margin-bottom: var(--mshp-space-5);
}

.summary-value {
    margin-bottom: var(--mshp-space-1);
    color: var(--mshp-text-strong);
    font-size: 32px;
    font-weight: 700;
}

.summary-label {
    color: var(--mshp-text-muted);
}

.graph-placeholder {
    min-height: 420px;
}

@media (max-width: 900px) {
    .mshp-app-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .mshp-primary-navigation {
        width: 100%;
        justify-content: flex-start;
    }

    .grid-two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .mshp-app-header {
        padding: var(--mshp-space-3) var(--mshp-space-4);
    }

    .mshp-brand {
        font-size: 16px;
    }

    .mshp-primary-navigation {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mshp-nav-link {
        width: 100%;
        min-height: 44px;
    }

    .mshp-main {
        padding: var(--mshp-space-6) var(--mshp-space-4) var(--mshp-space-10);
    }

    .mshp-page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .mshp-page-heading h1,
    .mshp-card h1 {
        font-size: 28px;
    }

    .mshp-auth-card {
        padding: var(--mshp-space-5);
    }

    .inline-form,
    .assignment,
    .confirmation-actions,
    .section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .graph-summary {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
.methodical-page {
    display: grid;
    gap: var(--mshp-space-5);
}

.methodical-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mshp-space-2);
    padding-bottom: var(--mshp-space-2);
    border-bottom: 1px solid var(--mshp-border);
}

.methodical-tabs a {
    padding: var(--mshp-space-2) var(--mshp-space-3);
    color: var(--mshp-text-muted);
    border-radius: var(--mshp-radius-md);
    text-decoration: none;
}

.methodical-tabs a:hover,
.methodical-tabs a.is-active {
    color: var(--mshp-action-secondary-text);
    background: var(--mshp-action-secondary-bg);
}

.methodical-tabs a.is-active {
    font-weight: 700;
}

.methodical-page .page-heading,
.methodical-filters,
.methodical-properties,
.methodical-relations {
    display: grid;
    gap: var(--mshp-space-3);
}

.methodical-page .page-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.methodical-filters {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    align-items: end;
}

.methodical-filters label,
.methodical-form label {
    display: grid;
    gap: var(--mshp-space-2);
}

.methodical-list,
.methodical-form {
    display: grid;
    gap: var(--mshp-space-3);
}

.methodical-card {
    display: grid;
    gap: var(--space-1);
    padding: var(--mshp-space-4);
    border: 1px solid var(--mshp-border);
    border-radius: var(--mshp-radius-lg);
    color: inherit;
    text-decoration: none;
}

.methodical-code {
    font-family: var(--mshp-font-mono);
}

.methodical-warning {
    padding: var(--mshp-space-3);
    border-left: 0.25rem solid var(--mshp-brand-orange);
}

/* Methodical editor UX: uses only brandbook tokens. */
.methodical-page .eyebrow {
    margin: 0 0 var(--mshp-space-1);
    color: var(--mshp-brand-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.methodical-page > .page-heading .button {
    align-self: start;
}

.methodical-filters {
    grid-template-columns:
        minmax(16rem, 1.4fr)
        minmax(14rem, 1fr)
        minmax(10rem, .7fr)
        minmax(10rem, .7fr)
        auto;
    padding: var(--mshp-space-4);
    background: var(--mshp-bg-surface);
    border: 1px solid var(--mshp-border);
    border-radius: var(--mshp-radius-lg);
    box-shadow: var(--mshp-shadow-sm);
}

.methodical-filter__submit {
    width: auto;
    min-width: 7.5rem;
}

.methodical-filter-actions {
    display: flex;
    align-items: end;
    gap: var(--mshp-space-2);
}

.methodical-filter__reset {
    width: auto;
    white-space: nowrap;
}

.methodical-card {
    grid-template-columns: minmax(8.5rem, 10rem) minmax(0, 1fr) auto;
    gap: var(--mshp-space-3);
    align-items: center;
    min-height: 72px;
    padding: var(--mshp-space-3) var(--mshp-space-4);
    background: var(--mshp-bg-surface);
    box-shadow: var(--mshp-shadow-sm);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.methodical-card:hover {
    background: var(--mshp-bg-selected);
    border-color: var(--mshp-brand-light-blue);
    box-shadow: var(--mshp-shadow-md);
}

.methodical-card__body {
    display: grid;
    min-width: 0;
    gap: var(--mshp-space-1);
}

.methodical-card__meta {
    overflow: hidden;
    color: var(--mshp-text-muted);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.methodical-code {
    color: var(--mshp-brand-deep-blue);
    font-size: 14px;
    font-weight: 700;
}

.status-badge,
.methodical-relation__count {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: var(--mshp-space-1) var(--mshp-space-2);
    color: var(--mshp-state-demonstrated-fg);
    background: var(--mshp-state-demonstrated-bg);
    border: 1px solid var(--mshp-state-demonstrated-border);
    border-radius: var(--mshp-radius-pill);
    font-size: 12px;
    font-weight: 700;
}

.status-badge--archived {
    color: var(--mshp-state-insufficient-fg);
    background: var(--mshp-state-insufficient-bg);
    border-color: var(--mshp-state-insufficient-border);
}

.status-badge--unmapped {
    color: var(--mshp-state-insufficient-fg);
    background: var(--mshp-state-insufficient-bg);
    border-color: var(--mshp-state-insufficient-border);
}

.status-badge--draft {
    color: var(--mshp-state-not-found-fg);
    background: var(--mshp-state-not-found-bg);
    border-color: var(--mshp-state-not-found-border);
}

.methodical-filters--compact {
    grid-template-columns: minmax(16rem, 1.4fr) minmax(14rem, 1fr) minmax(11rem, .7fr) auto;
}

.methodical-filters--lessons {
    grid-template-columns: minmax(16rem, 1.4fr) minmax(14rem, 1fr) auto;
}

.methodical-lesson-groups,
.methodical-lesson-group {
    display: grid;
}

.methodical-lesson-groups {
    max-height: 52rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.methodical-search-form {
    background: var(--mshp-bg-subtle);
}

.methodical-lesson-group + .methodical-lesson-group {
    border-top: 1px solid var(--mshp-border);
}

.methodical-lesson-group h3 {
    margin: 0;
    padding: var(--mshp-space-3) var(--mshp-space-5);
    color: var(--mshp-brand-deep-blue);
    background: var(--mshp-bg-subtle);
    font-size: 16px;
}

.methodical-lesson-group__heading,
.methodical-status-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mshp-space-3);
}

.methodical-lesson-group__heading {
    padding-right: var(--mshp-space-5);
    background: var(--mshp-bg-subtle);
}

.methodical-status-form {
    justify-content: flex-start;
}

.methodical-status-form select {
    width: min(100%, 16rem);
}

.methodical-pagination,
.methodical-pagination__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mshp-space-3);
}

.methodical-pagination {
    color: var(--mshp-text-muted);
}

.methodical-actions,
.methodical-relation__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mshp-space-2);
}

.methodical-properties {
    grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
    padding: var(--mshp-space-5);
    background: var(--mshp-bg-surface);
    border: 1px solid var(--mshp-border);
    border-radius: var(--mshp-radius-lg);
    box-shadow: var(--mshp-shadow-sm);
}

.methodical-properties dt,
.methodical-properties dd {
    margin: 0;
}

.methodical-properties dt {
    color: var(--mshp-text-muted);
    font-size: 14px;
    font-weight: 700;
}

.methodical-properties dd {
    color: var(--mshp-text-strong);
    font-weight: 400;
}

.methodical-relations {
    gap: var(--mshp-space-4);
}

.methodical-relation {
    overflow: hidden;
    background: var(--mshp-bg-surface);
    border: 1px solid var(--mshp-border);
    border-radius: var(--mshp-radius-lg);
    box-shadow: var(--mshp-shadow-sm);
}

.methodical-relation__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mshp-space-4);
    padding: var(--mshp-space-4) var(--mshp-space-5);
    border-bottom: 1px solid var(--mshp-border);
}

.methodical-relation__heading > div {
    display: flex;
    align-items: center;
    gap: var(--mshp-space-2);
}

.methodical-relation__heading h2 {
    margin: 0;
    font-size: 20px;
}

.methodical-relation__count {
    min-width: 26px;
    padding-inline: 7px;
    color: var(--mshp-action-secondary-text);
    background: var(--mshp-action-secondary-bg);
    border-color: var(--mshp-brand-light-blue);
}

.methodical-relation__list {
    max-height: 34rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    scrollbar-gutter: stable;
}

.methodical-relation__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mshp-space-4);
    padding: var(--mshp-space-3) var(--mshp-space-5);
    border-bottom: 1px solid var(--mshp-border);
}

.methodical-relation__row:last-child {
    border-bottom: 0;
}

.methodical-relation__row:hover {
    background: var(--mshp-bg-subtle);
}

.methodical-relation__content {
    min-width: 0;
}

.methodical-relation__meta,
.methodical-relation__comment {
    color: var(--mshp-text-muted);
    font-size: 14px;
}

.methodical-relation__meta {
    margin-left: var(--mshp-space-2);
}

.methodical-relation__comment {
    display: block;
    margin-top: var(--mshp-space-1);
}

.methodical-relation__actions {
    flex: 0 0 auto;
}

.methodical-relation__empty {
    padding: var(--mshp-space-6) var(--mshp-space-5);
    color: var(--mshp-text-muted);
    text-align: center;
}

.methodical-compact-action {
    width: auto;
    min-height: 34px;
    padding: var(--mshp-space-1) var(--mshp-space-3);
    font-size: 14px;
}

.methodical-form,
.methodical-confirm-form {
    width: min(100%, 52rem);
    padding: var(--mshp-space-5);
    background: var(--mshp-bg-surface);
    border: 1px solid var(--mshp-border);
    border-radius: var(--mshp-radius-lg);
    box-shadow: var(--mshp-shadow-sm);
}

.methodical-form__submit,
.methodical-confirm-form button {
    width: fit-content;
    justify-self: start;
}

.methodical-confirm-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--mshp-space-3);
}

.methodical-confirm-form label {
    flex: 1 1 100%;
}

.methodical-context {
    width: min(100%, 52rem);
    margin: 0;
    padding: var(--mshp-space-3) var(--mshp-space-4);
    color: var(--mshp-action-secondary-text);
    background: var(--mshp-action-secondary-bg);
    border-radius: var(--mshp-radius-md);
}

.methodical-checkbox {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: start;
}

.methodical-checkbox input {
    width: 20px;
    min-height: 20px;
    margin: 0;
}

.methodical-import-form {
    width: min(100%, 62rem);
}

.methodical-success {
    width: min(100%, 62rem);
    margin: 0;
    padding: var(--mshp-space-4);
    color: var(--mshp-text-strong);
    background: var(--mshp-bg-subtle);
    border-left: 0.25rem solid var(--mshp-brand-green);
    border-radius: var(--mshp-radius-md);
}

.methodical-import-files {
    display: grid;
    gap: var(--mshp-space-4);
    margin: 0;
    padding: var(--mshp-space-5);
    border: 1px solid var(--mshp-border);
    border-radius: var(--mshp-radius-md);
}

.methodical-import-files legend {
    padding: 0 var(--mshp-space-2);
    font-weight: 700;
}

.methodical-import-files input[type="file"] {
    width: 100%;
    min-height: 46px;
    padding: var(--mshp-space-2);
    background: var(--mshp-bg-subtle);
}

.methodical-field-hint,
.methodical-import-update-option small {
    display: block;
    color: var(--mshp-text-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.methodical-import-update-option {
    align-items: start;
    padding: var(--mshp-space-4);
    background: var(--mshp-bg-subtle);
    border-radius: var(--mshp-radius-md);
}

.methodical-import-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mshp-space-3);
}

.methodical-import-summary > div {
    display: grid;
    gap: var(--mshp-space-1);
    padding: var(--mshp-space-4);
    background: var(--mshp-bg-surface);
    border: 1px solid var(--mshp-border);
    border-radius: var(--mshp-radius-md);
}

.methodical-import-summary span {
    color: var(--mshp-text-muted);
    font-size: 14px;
}

.methodical-import-summary strong {
    font-size: 18px;
}

.methodical-import-source-rows {
    grid-template-columns: minmax(18rem, max-content) auto;
    justify-content: start;
    column-gap: var(--mshp-space-6);
}

.methodical-import-source-rows dd {
    min-width: 4rem;
    text-align: right;
}

.methodical-import-table {
    width: 100%;
    border-collapse: collapse;
}

.methodical-import-table th,
.methodical-import-table td {
    padding: var(--mshp-space-3) var(--mshp-space-4);
    border-bottom: 1px solid var(--mshp-border);
    text-align: left;
}

.methodical-import-table thead th {
    background: var(--mshp-bg-subtle);
}

.methodical-import-table tbody th {
    font-weight: 600;
}

.methodical-import-details {
    display: grid;
    gap: var(--mshp-space-3);
}

.methodical-import-details details {
    overflow: hidden;
    background: var(--mshp-bg-surface);
    border: 1px solid var(--mshp-border);
    border-radius: var(--mshp-radius-md);
}

.methodical-import-details summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: var(--mshp-space-4);
    padding: var(--mshp-space-3) var(--mshp-space-4);
    cursor: pointer;
    font-weight: 700;
}

.methodical-import-details summary span {
    color: var(--mshp-text-muted);
    font-size: 14px;
    font-weight: 400;
}

.methodical-import-records-wrap {
    max-height: 34rem;
    overflow: auto;
    border-top: 1px solid var(--mshp-border);
}

.methodical-import-records-table {
    min-width: 64rem;
}

.methodical-import-records-table thead {
    position: sticky;
    z-index: 1;
    top: 0;
}

.methodical-import-records-table td,
.methodical-import-records-table th {
    vertical-align: top;
}

@media (max-width: 1100px) {
    .methodical-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .methodical-filter__submit {
        justify-self: start;
    }

    .methodical-filter-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    .methodical-page .page-heading,
    .methodical-filters,
    .methodical-card,
    .methodical-properties {
        grid-template-columns: minmax(0, 1fr);
    }

    .methodical-page > .page-heading .button,
    .methodical-filter__submit,
    .methodical-filter__reset,
    .methodical-form__submit {
        width: 100%;
    }

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

    .methodical-card {
        gap: var(--mshp-space-1);
    }

    .methodical-card__meta {
        white-space: normal;
    }

    .methodical-actions,
    .methodical-relation__heading,
    .methodical-relation__row,
    .methodical-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .methodical-actions {
        justify-content: flex-start;
    }

    .methodical-actions .button,
    .methodical-actions form,
    .methodical-actions button {
        width: 100%;
    }

    .methodical-relation__actions {
        justify-content: flex-start;
    }

    .methodical-properties dt:not(:first-child) {
        margin-top: var(--mshp-space-2);
    }

    .methodical-form,
    .methodical-confirm-form {
        padding: var(--mshp-space-4);
    }

    .methodical-import-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .methodical-import-source-rows {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .methodical-import-files {
        padding: var(--mshp-space-4);
    }
}

/* 404 DVD easter egg */
.mshp-dvd-not-found {
    min-height: 100dvh;
    overflow: hidden;
    color: #fff;
    background: #000;
}

.mshp-dvd-not-found .mshp-app-header {
    position: relative;
    z-index: 2;
    color: #fff;
    background: rgba(0, 0, 0, .88);
    border-bottom-color: rgba(255, 255, 255, .28);
    box-shadow: none;
}

.mshp-dvd-not-found .mshp-brand,
.mshp-dvd-not-found .mshp-brand:hover {
    color: #fff;
}

.mshp-dvd-not-found .mshp-main--not-found {
    width: 100%;
    min-height: calc(100dvh - 64px);
    margin: 0;
    padding: 0;
}

.mshp-dvd-stage {
    position: relative;
    min-height: calc(100dvh - 64px);
    overflow: hidden;
    isolation: isolate;
    background: #000;
}

.mshp-dvd-logos {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.mshp-dvd-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(88px, 13vw, 168px);
    aspect-ratio: 1;
    will-change: transform, filter;
}

.mshp-dvd-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mshp-dvd-message {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: min(100% - 40px, 440px);
    padding: var(--mshp-space-5);
    color: #fff;
    background: rgba(0, 0, 0, .78);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: var(--mshp-radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
    transform: translate(-50%, -50%);
}

.mshp-dvd-message h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
}

.mshp-dvd-message p:not(.mshp-eyebrow) {
    margin: var(--mshp-space-3) 0 var(--mshp-space-5);
    color: rgba(255, 255, 255, .86);
}

.mshp-dvd-message .mshp-eyebrow {
    color: rgba(255, 255, 255, .68);
}

.mshp-dvd-message .button {
    color: #fff;
    background: var(--mshp-brand-blue);
    border-color: var(--mshp-brand-blue);
}

.mshp-dvd-message .button:hover {
    color: #fff;
    background: var(--mshp-brand-deep-blue);
    border-color: var(--mshp-brand-deep-blue);
}

@media (max-width: 640px) {
    .mshp-dvd-message {
        width: calc(100% - 32px);
    }
}