/*
 * MFP2026 design system.
 *
 * Bootstrap 5.3 supplies the grid, utilities and colour-mode plumbing (data-bs-theme on <html>); this file maps its
 * tokens onto the Modernfold palette shared with the Vendor Maintenance Portal (navy, azure, ink, muted, line) and
 * adds the dense-data components the portal is built from: the app bar, page headers, section cards, key/value grids,
 * compact tables and status pills. Dark is the default theme; light is a first-class alternative, not an afterthought.
 *
 * Sections:  1 tokens · 2 base · 3 app shell · 4 page header · 5 sections & cards · 6 key/value · 7 tables
 *            8 pills, badges, alerts · 9 forms & buttons · 10 misc components · 11 print
 */

/* ── 1. Tokens ───────────────────────────────────────────────────────────────────────────────────────────── */

:root {
    /* Brand palette (shared with VendorMaintenancePortal/wwwroot/css/vmp.css) */
    --mf-navy: #0b264b;
    --mf-navy-deep: #071a35;
    --mf-azure: #2f6eb4;
    --mf-azure-dark: #24598f;
    --mf-azure-light: #5b93d9;
    --mf-ink: #1a2433;
    --mf-muted: #5b6678;
    --mf-line: #d8dee8;
    --mf-green: #1d7a3d;
    --mf-red: #b3261e;
    --mf-amber: #8a5a00;

    --mf-font-sans: "Host Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mf-font-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

    --mf-radius: 8px;
    --mf-radius-sm: 5px;
    --mf-radius-lg: 12px;
    --mf-ease: cubic-bezier(.4, 0, .2, 1);

    --bs-font-sans-serif: var(--mf-font-sans);
    --bs-font-monospace: var(--mf-font-mono);
    --bs-body-font-size: .9375rem;
    --bs-body-line-height: 1.5;
    --bs-border-radius: var(--mf-radius-sm);
    --bs-border-radius-lg: var(--mf-radius);
    --bs-border-radius-xl: var(--mf-radius-lg);
}

/* Light */
:root,
[data-bs-theme="light"] {
    color-scheme: light;

    --mf-canvas: #eef2f7;
    --mf-surface: #ffffff;
    --mf-surface-2: #f5f7fb;
    --mf-surface-3: #eaeff6;
    --mf-line-soft: #e6ebf2;
    --mf-line-strong: #c3ccd9;
    --mf-text: var(--mf-ink);
    --mf-text-muted: var(--mf-muted);
    --mf-text-faint: #8791a3;
    --mf-heading: var(--mf-navy);
    --mf-accent: var(--mf-azure);
    --mf-accent-hover: var(--mf-azure-dark);
    --mf-accent-soft: #e3eefc;
    --mf-accent-ring: rgba(47, 110, 180, .28);
    --mf-shadow: 0 1px 2px rgba(11, 38, 75, .05), 0 4px 14px rgba(11, 38, 75, .06);
    --mf-shadow-lg: 0 8px 30px rgba(11, 38, 75, .14);
    --mf-appbar-bg: var(--mf-navy);
    --mf-appbar-text: rgba(255, 255, 255, .78);
    --mf-appbar-text-strong: #ffffff;
    --mf-appbar-line: rgba(255, 255, 255, .12);
    --mf-appbar-hover: rgba(255, 255, 255, .08);
    --mf-row-hover: #f1f5fb;
    --mf-row-stripe: #f8fafd;

    --bs-body-bg: var(--mf-canvas);
    --bs-body-color: var(--mf-text);
    --bs-emphasis-color: var(--mf-navy);
    --bs-secondary-color: var(--mf-text-muted);
    --bs-tertiary-color: var(--mf-text-faint);
    --bs-secondary-bg: var(--mf-surface-2);
    --bs-tertiary-bg: var(--mf-surface-3);
    --bs-border-color: var(--mf-line);
    --bs-border-color-translucent: rgba(11, 38, 75, .12);
    --bs-heading-color: var(--mf-heading);
    --bs-link-color: var(--mf-azure-dark);
    --bs-link-hover-color: var(--mf-navy);
    --bs-link-color-rgb: 36, 89, 143;
    --bs-link-hover-color-rgb: 11, 38, 75;
    --bs-primary: var(--mf-azure);
    --bs-primary-rgb: 47, 110, 180;
    --bs-primary-text-emphasis: var(--mf-azure-dark);
    --bs-primary-bg-subtle: var(--mf-accent-soft);
    --bs-primary-border-subtle: #bcd4f0;
    --bs-success-text-emphasis: var(--mf-green);
    --bs-success-bg-subtle: #e2f5e5;
    --bs-success-border-subtle: #bfe5c6;
    --bs-danger-text-emphasis: var(--mf-red);
    --bs-danger-bg-subtle: #fdecea;
    --bs-danger-border-subtle: #f1c2bf;
    --bs-warning-text-emphasis: var(--mf-amber);
    --bs-warning-bg-subtle: #fdf3dd;
    --bs-warning-border-subtle: #ecd9ac;
    --bs-info-text-emphasis: #24598f;
    --bs-info-bg-subtle: #e3eefc;
    --bs-info-border-subtle: #bcd4f0;
    --bs-secondary-text-emphasis: #46536a;
    --bs-secondary-bg-subtle: #e9edf3;
    --bs-secondary-border-subtle: #d3dae4;
    --bs-code-color: #8a2f6b;
}

/* Dark (default: set on <html> by the inline script in _Layout before first paint) */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --mf-canvas: #0a1220;
    --mf-surface: #111b2d;
    --mf-surface-2: #172338;
    --mf-surface-3: #1d2b44;
    --mf-line: #253550;
    --mf-line-soft: #1c2a42;
    --mf-line-strong: #34486a;
    --mf-text: #e2e8f2;
    --mf-text-muted: #98a5ba;
    --mf-text-faint: #6c7a92;
    --mf-heading: #f4f7fb;
    --mf-accent: var(--mf-azure-light);
    --mf-accent-hover: #83b1e8;
    --mf-accent-soft: rgba(91, 147, 217, .16);
    --mf-accent-ring: rgba(91, 147, 217, .38);
    --mf-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .28);
    --mf-shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
    --mf-appbar-bg: #0a1526;
    --mf-appbar-text: rgba(226, 232, 242, .72);
    --mf-appbar-text-strong: #ffffff;
    --mf-appbar-line: #1c2a42;
    --mf-appbar-hover: rgba(255, 255, 255, .06);
    --mf-row-hover: #182740;
    --mf-row-stripe: #131f33;

    --bs-body-bg: var(--mf-canvas);
    --bs-body-color: var(--mf-text);
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: var(--mf-text-muted);
    --bs-tertiary-color: var(--mf-text-faint);
    --bs-secondary-bg: var(--mf-surface-2);
    --bs-tertiary-bg: var(--mf-surface-3);
    --bs-border-color: var(--mf-line);
    --bs-border-color-translucent: rgba(255, 255, 255, .1);
    --bs-heading-color: var(--mf-heading);
    --bs-link-color: #86b4ec;
    --bs-link-hover-color: #b1d0f4;
    --bs-link-color-rgb: 134, 180, 236;
    --bs-link-hover-color-rgb: 177, 208, 244;
    --bs-primary: var(--mf-azure-light);
    --bs-primary-rgb: 91, 147, 217;
    --bs-primary-text-emphasis: #9cc2f0;
    --bs-primary-bg-subtle: rgba(91, 147, 217, .16);
    --bs-primary-border-subtle: rgba(91, 147, 217, .35);
    --bs-success-text-emphasis: #6fd08c;
    --bs-success-bg-subtle: rgba(45, 158, 82, .16);
    --bs-success-border-subtle: rgba(45, 158, 82, .38);
    --bs-danger-text-emphasis: #f0857d;
    --bs-danger-bg-subtle: rgba(214, 69, 60, .16);
    --bs-danger-border-subtle: rgba(214, 69, 60, .4);
    --bs-warning-text-emphasis: #e9be6a;
    --bs-warning-bg-subtle: rgba(201, 141, 0, .16);
    --bs-warning-border-subtle: rgba(201, 141, 0, .4);
    --bs-info-text-emphasis: #9cc2f0;
    --bs-info-bg-subtle: rgba(91, 147, 217, .14);
    --bs-info-border-subtle: rgba(91, 147, 217, .35);
    --bs-secondary-text-emphasis: #b3bfd1;
    --bs-secondary-bg-subtle: rgba(152, 165, 186, .14);
    --bs-secondary-border-subtle: rgba(152, 165, 186, .3);
    --bs-code-color: #e6a7d1;
}

/* ── 2. Base ─────────────────────────────────────────────────────────────────────────────────────────────── */

html {
    scroll-padding-top: 4.5rem; /* anchors land below the sticky app bar */
}

body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: var(--mf-font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";
}

main {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -.01em;
    font-weight: 600;
}

a {
    text-decoration: none;
    text-underline-offset: .15em;
}

a:hover {
    text-decoration: underline;
}

code {
    font-size: .85em;
    background: var(--mf-surface-3);
    padding: .1em .35em;
    border-radius: 4px;
}

time, .num, .mono, .claim-type {
    font-variant-numeric: tabular-nums;
}

.mono, .claim-type {
    font-family: var(--mf-font-mono);
    font-size: .85em;
    letter-spacing: .01em;
    word-break: break-all;
}

:focus-visible {
    outline: 2px solid var(--mf-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

::selection {
    background: var(--mf-accent-soft);
}

.skip-link:focus {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1100;
    padding: .5rem 1rem;
    background: var(--mf-surface);
    color: var(--mf-text);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-sm);
    box-shadow: var(--mf-shadow);
}

.text-body-secondary { color: var(--mf-text-muted) !important; }
.text-body-tertiary  { color: var(--mf-text-faint) !important; }

/* Nothing animates for people who asked for less motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── 3. App shell ────────────────────────────────────────────────────────────────────────────────────────── */

/* Sticky on the <header>, not the nav: sticky only holds within its parent, and the nav's parent is the header. */
body > header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.app-bar {
    background: var(--mf-appbar-bg);
    border-bottom: 1px solid var(--mf-appbar-line);
    color: var(--mf-appbar-text);
    padding: 0;
    min-height: 3.25rem;
}

.app-bar .container {
    gap: 1rem;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--mf-appbar-text-strong);
    font-weight: 700;
    letter-spacing: -.01em;
    padding: .55rem 0;
    margin-right: .25rem;
}

.app-brand:hover, .app-brand:focus-visible {
    color: #fff;
    text-decoration: none;
}

.app-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 7px;
    background: linear-gradient(145deg, var(--mf-azure-light), var(--mf-azure-dark));
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

.app-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.app-brand-text small {
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mf-appbar-text);
}

.app-nav .nav-link {
    position: relative;
    color: var(--mf-appbar-text);
    font-weight: 500;
    font-size: .9rem;
    padding: .95rem .8rem;
    border-radius: 0;
    transition: color .15s var(--mf-ease);
}

.app-nav .nav-link:hover,
.app-nav .nav-link:focus-visible {
    color: var(--mf-appbar-text-strong);
    text-decoration: none;
}

.app-nav .nav-link.active {
    color: var(--mf-appbar-text-strong);
}

.app-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--mf-azure-light);
}

.app-bar .navbar-toggler {
    border-color: var(--mf-appbar-line);
    color: var(--mf-appbar-text-strong);
    padding: .3rem .5rem;
}

.app-bar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.app-tools {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mf-appbar-text);
    transition: background .15s var(--mf-ease), color .15s var(--mf-ease);
}

.icon-btn:hover, .icon-btn:focus-visible {
    background: var(--mf-appbar-hover);
    color: var(--mf-appbar-text-strong);
}

.icon-btn svg {
    width: 1.05rem;
    height: 1.05rem;
}

/* The toggle shows the icon for the mode you would switch *to*. */
[data-bs-theme="dark"] .theme-toggle .icon-moon,
:root:not([data-bs-theme="dark"]) .theme-toggle .icon-sun {
    display: none;
}

.user-menu > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--mf-appbar-text);
    padding: .35rem .5rem;
    border-radius: 7px;
}

.user-menu > .nav-link:hover, .user-menu > .nav-link:focus-visible {
    background: var(--mf-appbar-hover);
    color: var(--mf-appbar-text-strong);
}

.user-menu .dropdown-toggle::after {
    opacity: .6;
}

.user-avatar {
    display: inline-grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--mf-azure);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.user-name {
    font-size: .875rem;
    font-weight: 500;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-bar .dropdown-menu {
    --bs-dropdown-bg: var(--mf-surface);
    --bs-dropdown-border-color: var(--mf-line);
    --bs-dropdown-link-color: var(--mf-text);
    --bs-dropdown-link-hover-bg: var(--mf-surface-2);
    --bs-dropdown-link-hover-color: var(--mf-heading);
    --bs-dropdown-link-active-bg: var(--mf-accent-soft);
    --bs-dropdown-link-active-color: var(--mf-heading);
    --bs-dropdown-divider-bg: var(--mf-line-soft);
    box-shadow: var(--mf-shadow-lg);
    border-radius: var(--mf-radius);
    padding: .35rem;
    min-width: 12rem;
}

.app-bar .dropdown-item {
    border-radius: 5px;
    font-size: .9rem;
    padding: .45rem .7rem;
}

.user-card {
    padding: .45rem .7rem .5rem;
    max-width: 16rem;
}

.user-card-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--mf-heading);
}

.user-card-email {
    font-size: .78rem;
    color: var(--mf-text-muted);
}

.user-card-role {
    margin-top: .35rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mf-accent);
}

@media (max-width: 767.98px) {
    .app-nav .nav-link { padding: .6rem .5rem; }
    .app-nav .nav-link.active::after { display: none; }
    .app-nav .nav-link.active { color: var(--mf-azure-light); }
    .app-bar .navbar-collapse { padding-bottom: .5rem; }
}

.app-footer {
    border-top: 1px solid var(--mf-line-soft);
    color: var(--mf-text-faint);
    font-size: .78rem;
    background: transparent;
}

.app-footer a {
    color: var(--mf-text-muted);
}

/* ── 4. Page header ──────────────────────────────────────────────────────────────────────────────────────── */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--mf-line-soft);
}

.page-header-main {
    min-width: 0;
    flex: 1 1 24rem;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.page-header h1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 .3rem;
    color: var(--mf-heading);
}

.page-header h1 .badge {
    font-size: .68rem;
}

.page-header .lead {
    font-size: .95rem;
    color: var(--mf-text-muted);
    margin: 0;
    max-width: 68ch;
}

.eyebrow {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mf-text-faint);
    margin-bottom: .35rem;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--mf-text-faint);
    --bs-breadcrumb-item-active-color: var(--mf-text-muted);
    --bs-breadcrumb-divider: "/";
    font-size: .8rem;
    margin-bottom: .45rem;
}

.breadcrumb a {
    color: var(--mf-text-muted);
}

.breadcrumb a:hover {
    color: var(--mf-accent);
}

/* Meta chips under a title: "Order 5001 · Line 10 · Job J12345" as scannable key/value pairs */
.meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
    margin-top: .65rem;
    font-size: .82rem;
}

.meta-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--mf-line);
    background: var(--mf-surface);
    color: var(--mf-text);
    white-space: nowrap;
}

.meta-chip .k {
    color: var(--mf-text-faint);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.meta-chip a {
    color: inherit;
}

a.meta-chip:hover {
    border-color: var(--mf-accent);
    color: var(--mf-accent);
    text-decoration: none;
}

/* Sticky in-page jump links for long detail pages */
.page-subnav {
    position: sticky;
    top: 3.25rem;
    z-index: 1020;
    display: flex;
    gap: .15rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin: -.5rem 0 1.25rem;
    padding: .35rem 0;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--mf-line-soft);
}

.page-subnav::-webkit-scrollbar { display: none; }

.page-subnav a {
    flex: 0 0 auto;
    padding: .35rem .7rem;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--mf-text-muted);
    white-space: nowrap;
}

.page-subnav a:hover,
.page-subnav a:focus-visible {
    color: var(--mf-heading);
    background: var(--mf-surface-2);
    text-decoration: none;
}

.page-subnav a .count {
    margin-left: .35rem;
    color: var(--mf-text-faint);
    font-variant-numeric: tabular-nums;
}

/* ── 5. Sections & cards ─────────────────────────────────────────────────────────────────────────────────── */

.card {
    --bs-card-bg: var(--mf-surface);
    --bs-card-border-color: var(--mf-line);
    --bs-card-cap-bg: transparent;
    --bs-card-border-radius: var(--mf-radius);
    --bs-card-inner-border-radius: calc(var(--mf-radius) - 1px);
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1.15rem;
    box-shadow: var(--mf-shadow);
}

.card-header {
    border-bottom-color: var(--mf-line-soft);
    font-weight: 600;
}

/* A section: a card with a header row (title, count, subtitle, actions) and a body. <section> or <details>. */
.section {
    background: var(--mf-surface);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
    box-shadow: var(--mf-shadow);
    margin-bottom: 1.25rem;
    overflow: clip;
}

.section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    padding: .8rem 1.15rem;
    border-bottom: 1px solid var(--mf-line-soft);
    background: var(--mf-surface);
}

.section-header .section-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--mf-heading);
}

.section-header .section-sub {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
    font-size: .8rem;
    color: var(--mf-text-muted);
    text-wrap: pretty;
}

.section-header .section-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
}

.section-body {
    padding: 1rem 1.15rem;
}

.section-body.flush {
    padding: 0;
}

.section-body > :last-child {
    margin-bottom: 0;
}

/* Count pill next to a section title */
.count-pill {
    display: inline-flex;
    align-items: center;
    min-width: 1.5rem;
    height: 1.35rem;
    padding: 0 .5rem;
    border-radius: 999px;
    background: var(--mf-surface-3);
    color: var(--mf-text-muted);
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    justify-content: center;
}

/* Collapsible sections: <details class="section"><summary class="section-header">…</summary>…</details> */
details.section > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

details.section > summary::-webkit-details-marker { display: none; }

details.section > summary::before {
    content: "";
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    margin-right: .15rem;
    border-right: 2px solid var(--mf-text-faint);
    border-bottom: 2px solid var(--mf-text-faint);
    transform: rotate(-45deg);
    transition: transform .15s var(--mf-ease);
}

details.section[open] > summary::before {
    transform: rotate(45deg);
}

details.section:not([open]) > summary {
    border-bottom: 0;
}

details.section > summary:hover {
    background: var(--mf-surface-2);
}

details.section > summary:focus-visible {
    outline-offset: -2px;
}

/* Section-with-a-table: tables sit flush against the card edges */
.section > .table-responsive,
.section-body.flush > .table-responsive {
    margin: 0;
}

.section .table {
    margin-bottom: 0;
}

/* Two columns of sections on wide screens */
.section-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    margin-bottom: 1.25rem;
    align-items: start;
}

.section-grid > .section {
    margin-bottom: 0;
}

/* Home tiles */
.tile-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.tile {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.1rem 1.2rem;
    background: var(--mf-surface);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
    box-shadow: var(--mf-shadow);
    color: var(--mf-text);
    transition: border-color .15s var(--mf-ease), transform .15s var(--mf-ease), box-shadow .15s var(--mf-ease);
}

.tile:hover, .tile:focus-visible {
    text-decoration: none;
    color: var(--mf-text);
    border-color: var(--mf-accent);
    box-shadow: var(--mf-shadow), 0 0 0 3px var(--mf-accent-ring);
    transform: translateY(-1px);
}

.tile-icon {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 8px;
    background: var(--mf-accent-soft);
    color: var(--mf-accent);
    margin-bottom: .35rem;
}

.tile-icon svg { width: 1.15rem; height: 1.15rem; }

.tile h2 {
    font-size: 1rem;
    margin: 0;
}

.tile p {
    margin: 0;
    font-size: .85rem;
    color: var(--mf-text-muted);
}

.tile .tile-go {
    margin-top: auto;
    padding-top: .5rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mf-accent);
}

/* Hero / callout card (sign in, resume) */
.callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--mf-radius);
    border: 1px solid var(--bs-primary-border-subtle);
    background: linear-gradient(120deg, var(--mf-accent-soft), transparent 70%), var(--mf-surface);
    margin-bottom: 1.25rem;
}

.callout h2 {
    font-size: 1rem;
    margin-bottom: .2rem;
}

.callout p {
    margin: 0;
    font-size: .875rem;
    color: var(--mf-text-muted);
}

/* ── 6. Key/value ────────────────────────────────────────────────────────────────────────────────────────── */

/*
 * <dl class="kv"><div><dt>Label</dt><dd>Value</dd></div>…</dl>
 * Auto-fills columns; each pair is its own cell so labels stay glued to their values at every width.
 */
.kv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: .15rem 1.25rem;
    margin: 0;
    font-size: .875rem;
}

.kv > div {
    padding: .45rem 0;
    border-bottom: 1px solid var(--mf-line-soft);
    min-width: 0;
}

.kv dt {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mf-text-faint);
    margin-bottom: .1rem;
}

.kv dd {
    margin: 0;
    color: var(--mf-text);
    overflow-wrap: anywhere;
}

.kv dd:empty::before,
.kv dd.is-empty::before {
    content: "\2014";
    color: var(--mf-text-faint);
}

.kv .sub {
    color: var(--mf-text-muted);
    font-size: .8em;
}

.kv.kv-wide {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.kv.kv-rows {
    grid-template-columns: 1fr;
}

/* Inline label/value in a running line: <span class="lv"><span class="k">A</span> 48</span> */
.lv .k {
    color: var(--mf-text-faint);
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-right: .2rem;
}

/* ── 7. Tables ───────────────────────────────────────────────────────────────────────────────────────────── */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mf-text);
    --bs-table-border-color: var(--mf-line-soft);
    --bs-table-hover-bg: var(--mf-row-hover);
    --bs-table-hover-color: var(--mf-text);
    --bs-table-striped-bg: var(--mf-row-stripe);
    --bs-table-striped-color: var(--mf-text);
    font-size: .855rem;
    font-variant-numeric: tabular-nums;
    margin-bottom: 1.25rem;
}

.table > :not(caption) > * > * {
    padding: .5rem .75rem;
    vertical-align: middle;
    background-color: var(--bs-table-bg);
}

.table > thead > tr > th {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mf-text-faint);
    white-space: nowrap;
    border-bottom: 1px solid var(--mf-line);
    background: var(--mf-surface-2);
}

.table > tbody > tr:last-child > * {
    border-bottom: 0;
}

.table > tbody > tr > th[scope="row"] {
    font-weight: 500;
    color: var(--mf-text-muted);
    white-space: nowrap;
}

.table-sm > :not(caption) > * > * {
    padding: .35rem .6rem;
}

.table td > a:first-child,
.table td > a.row-key {
    font-weight: 600;
}

td.num, th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

td.nowrap, th.nowrap {
    white-space: nowrap;
}

td.dim, .table .dim {
    color: var(--mf-text-muted);
}

/* Secondary text on its own line inside a cell */
.cell-sub {
    display: block;
    font-size: .78rem;
    color: var(--mf-text-muted);
    line-height: 1.3;
}

/* Sticky header when the table scrolls inside .table-responsive */
.table-responsive {
    border-radius: 0;
}

.table-responsive > .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Whole-row links (site.js): a <tr data-href> is one big click target. Razor renders a null data-* value as
   data-href="" rather than dropping it, so an empty one is a row with nowhere to go. */
tr[data-href]:not([data-href=""]) {
    cursor: pointer;
}

.table-hover > tbody > tr[data-href]:not([data-href=""]):hover > * {
    box-shadow: inset 2px 0 0 var(--mf-accent);
}

/* Row highlight used for finish drift. Bootstrap's literal colours would be wrong in dark mode. */
.table-danger {
    --bs-table-color: var(--bs-danger-text-emphasis);
    --bs-table-bg: var(--bs-danger-bg-subtle);
    --bs-table-border-color: var(--bs-danger-border-subtle);
    --bs-table-hover-bg: var(--bs-danger-bg-subtle);
    --bs-table-hover-color: var(--bs-danger-text-emphasis);
    --bs-table-striped-bg: var(--bs-danger-bg-subtle);
}

.table-warning {
    --bs-table-color: var(--bs-warning-text-emphasis);
    --bs-table-bg: var(--bs-warning-bg-subtle);
    --bs-table-border-color: var(--bs-warning-border-subtle);
    --bs-table-hover-bg: var(--bs-warning-bg-subtle);
}

/* ── 8. Pills, badges, alerts ────────────────────────────────────────────────────────────────────────────── */

.badge {
    font-weight: 600;
    font-size: .68rem;
    letter-spacing: .03em;
    padding: .28em .6em;
    border-radius: 999px;
    vertical-align: middle;
    border: 1px solid transparent;
}

/* Bootstrap's solid text-bg-* badges become tinted pills that read the same in both themes. */
.badge.text-bg-primary   { background: var(--bs-primary-bg-subtle) !important;   color: var(--bs-primary-text-emphasis) !important;   border-color: var(--bs-primary-border-subtle); }
.badge.text-bg-secondary { background: var(--bs-secondary-bg-subtle) !important; color: var(--bs-secondary-text-emphasis) !important; border-color: var(--bs-secondary-border-subtle); }
.badge.text-bg-success   { background: var(--bs-success-bg-subtle) !important;   color: var(--bs-success-text-emphasis) !important;   border-color: var(--bs-success-border-subtle); }
.badge.text-bg-danger    { background: var(--bs-danger-bg-subtle) !important;    color: var(--bs-danger-text-emphasis) !important;    border-color: var(--bs-danger-border-subtle); }
.badge.text-bg-warning   { background: var(--bs-warning-bg-subtle) !important;   color: var(--bs-warning-text-emphasis) !important;   border-color: var(--bs-warning-border-subtle); }
.badge.text-bg-info      { background: var(--bs-info-bg-subtle) !important;      color: var(--bs-info-text-emphasis) !important;      border-color: var(--bs-info-border-subtle); }

/* Status dot + label: <span class="status status-ok">Reachable</span> */
.status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
}

.status::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

.status-ok   { color: var(--bs-success-text-emphasis); }
.status-bad  { color: var(--bs-danger-text-emphasis); }
.status-off  { color: var(--mf-text-faint); }
.status-warn { color: var(--bs-warning-text-emphasis); }

.alert {
    --bs-alert-border-radius: var(--mf-radius);
    font-size: .875rem;
    padding: .75rem 1rem;
}

.alert strong {
    font-weight: 600;
}

/* Empty states */
.empty-state {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--mf-text-muted);
    font-size: .875rem;
    border: 1px dashed var(--mf-line-strong);
    border-radius: var(--mf-radius);
    background: var(--mf-surface);
}

.section > .empty-state,
.section-body > .empty-state {
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* ── 9. Forms & buttons ──────────────────────────────────────────────────────────────────────────────────── */

.form-control, .form-select {
    background-color: var(--mf-surface);
    border-color: var(--mf-line-strong);
    color: var(--mf-text);
    font-size: .9rem;
    border-radius: var(--mf-radius-sm);
}

.form-control:focus, .form-select:focus {
    background-color: var(--mf-surface);
    color: var(--mf-text);
    border-color: var(--mf-accent);
    box-shadow: 0 0 0 3px var(--mf-accent-ring);
}

.form-control::placeholder {
    color: var(--mf-text-faint);
}

.form-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--mf-text-muted);
    margin-bottom: .3rem;
}

/* Compact lookup: label inside the group, input + button */
.lookup {
    display: flex;
    align-items: stretch;
    max-width: 22rem;
    border: 1px solid var(--mf-line-strong);
    border-radius: var(--mf-radius-sm);
    background: var(--mf-surface);
    overflow: clip;
    transition: border-color .15s var(--mf-ease), box-shadow .15s var(--mf-ease);
}

.lookup:focus-within {
    border-color: var(--mf-accent);
    box-shadow: 0 0 0 3px var(--mf-accent-ring);
}

.lookup label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .75rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--mf-text-muted);
    white-space: nowrap;
    border-right: 1px solid var(--mf-line-soft);
    background: var(--mf-surface-2);
}

.lookup label svg { width: .9rem; height: .9rem; opacity: .7; }

.lookup input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--mf-text);
    padding: .5rem .75rem;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

.lookup input:focus {
    outline: none;
}

.lookup button {
    border: 0;
    border-left: 1px solid var(--mf-line-soft);
    border-radius: 0;
    padding: 0 .9rem;
    font-weight: 600;
    font-size: .85rem;
    background: var(--mf-accent);
    color: #fff;
}

.lookup button:hover {
    background: var(--mf-accent-hover);
}

/* Site search: the same lookup group, wide enough for words as well as numbers */
.lookup-search {
    max-width: 34rem;
    width: 100%;
}

.lookup-search input {
    font-variant-numeric: normal;
    -webkit-appearance: none;
    appearance: none;
}

/* On the home page the box sits under the welcome lead, as part of the header rather than beside it */
.home-search {
    margin-top: 1rem;
    max-width: 34rem;
}

.search-looked-for {
    font-size: .82rem;
    color: var(--mf-text-muted);
    margin: 0 0 1rem;
}

.search-notices p {
    margin: 0;
}

.search-notices p + p {
    margin-top: .35rem;
}

.search-hits {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-hits li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .9rem;
    padding: .65rem 1rem;
    border-top: 1px solid var(--mf-line-soft);
}

.search-hits li:first-child {
    border-top: 0;
}

.search-kind {
    flex: 0 0 5.5rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mf-text-muted);
}

.search-hit-main {
    flex: 1 1 18rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.search-hit-title {
    font-weight: 600;
}

.search-hit-sub {
    font-size: .82rem;
    color: var(--mf-text-muted);
    overflow-wrap: anywhere;
}

.search-links {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .8rem;
    font-size: .82rem;
}

@media (max-width: 575.98px) {
    .search-kind { flex-basis: 100%; }
    .search-hits li { padding: .6rem .8rem; }
}

.btn {
    --bs-btn-border-radius: var(--mf-radius-sm);
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: .875rem;
    --bs-btn-padding-y: .45rem;
    --bs-btn-padding-x: .9rem;
}

.btn-sm {
    --bs-btn-font-size: .8rem;
    --bs-btn-padding-y: .3rem;
    --bs-btn-padding-x: .7rem;
}

.btn-primary {
    --bs-btn-bg: var(--mf-azure);
    --bs-btn-border-color: var(--mf-azure);
    --bs-btn-hover-bg: var(--mf-azure-dark);
    --bs-btn-hover-border-color: var(--mf-azure-dark);
    --bs-btn-active-bg: var(--mf-navy);
    --bs-btn-active-border-color: var(--mf-navy);
    --bs-btn-disabled-bg: var(--mf-azure);
    --bs-btn-disabled-border-color: var(--mf-azure);
    --bs-btn-focus-shadow-rgb: 47, 110, 180;
}

.btn-outline-primary {
    --bs-btn-color: var(--mf-accent);
    --bs-btn-border-color: var(--mf-accent);
    --bs-btn-hover-bg: var(--mf-accent-soft);
    --bs-btn-hover-color: var(--mf-accent);
    --bs-btn-hover-border-color: var(--mf-accent);
    --bs-btn-active-bg: var(--mf-accent);
    --bs-btn-active-border-color: var(--mf-accent);
    --bs-btn-focus-shadow-rgb: 47, 110, 180;
}

.btn-outline-secondary {
    --bs-btn-color: var(--mf-text-muted);
    --bs-btn-border-color: var(--mf-line-strong);
    --bs-btn-hover-bg: var(--mf-surface-2);
    --bs-btn-hover-color: var(--mf-heading);
    --bs-btn-hover-border-color: var(--mf-line-strong);
    --bs-btn-active-bg: var(--mf-surface-3);
    --bs-btn-active-color: var(--mf-heading);
    --bs-btn-active-border-color: var(--mf-line-strong);
}

.btn-success {
    --bs-btn-bg: var(--mf-green);
    --bs-btn-border-color: var(--mf-green);
    --bs-btn-hover-bg: #166231;
    --bs-btn-hover-border-color: #166231;
}

.btn-danger {
    --bs-btn-bg: var(--mf-red);
    --bs-btn-border-color: var(--mf-red);
    --bs-btn-hover-bg: #921e18;
    --bs-btn-hover-border-color: #921e18;
}

.btn-outline-light {
    --bs-btn-color: var(--mf-appbar-text-strong);
    --bs-btn-border-color: rgba(255, 255, 255, .35);
    --bs-btn-hover-bg: var(--mf-appbar-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: rgba(255, 255, 255, .6);
}

/* ── 10. Misc components ─────────────────────────────────────────────────────────────────────────────────── */

/* Warranty problem cards: a header row and a list of expandable reports */
.problem {
    margin-bottom: .9rem;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
    background: var(--mf-surface);
    box-shadow: var(--mf-shadow);
    overflow: clip;
}

.problem.is-plant {
    border-color: var(--bs-danger-border-subtle);
}

.problem-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--mf-line-soft);
    background: var(--mf-surface-2);
    font-size: .875rem;
}

.problem.is-plant .problem-header {
    box-shadow: inset 3px 0 0 var(--bs-danger-text-emphasis);
}

.problem-header strong {
    color: var(--mf-heading);
}

.problem-header .problem-stats {
    margin-left: auto;
    color: var(--mf-text-muted);
    font-size: .78rem;
    white-space: nowrap;
}

.report {
    border-bottom: 1px solid var(--mf-line-soft);
}

.report:last-child {
    border-bottom: 0;
}

.report.is-ours {
    background: var(--bs-warning-bg-subtle);
}

.report > summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .75rem;
    padding: .6rem 1rem .6rem 2.1rem;
    cursor: pointer;
    list-style: none;
    position: relative;
    font-size: .85rem;
}

.report > summary::-webkit-details-marker { display: none; }

.report > summary::before {
    content: "";
    position: absolute;
    left: .95rem;
    top: 1.05rem;
    width: .45rem;
    height: .45rem;
    border-right: 2px solid var(--mf-text-faint);
    border-bottom: 2px solid var(--mf-text-faint);
    transform: rotate(-45deg);
    transition: transform .15s var(--mf-ease);
}

.report[open] > summary::before {
    transform: rotate(45deg);
}

.report > summary:hover {
    background: var(--mf-row-hover);
}

.report.is-ours > summary:hover {
    background: var(--bs-warning-bg-subtle);
}

.report-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    grid-column: 1 / -1;
}

.report-line time {
    font-weight: 600;
    color: var(--mf-heading);
}

.report-problem {
    grid-column: 1 / -1;
    color: var(--mf-text);
}

.report-body {
    padding: .25rem 1rem 1rem 2.1rem;
    font-size: .85rem;
}

.report-body .kv {
    font-size: .83rem;
}

.notes {
    list-style: none;
    padding: 0;
    margin: .6rem 0 0;
    border-left: 2px solid var(--mf-line);
}

.notes li {
    padding: .3rem 0 .3rem .85rem;
    font-size: .82rem;
}

.notes time {
    color: var(--mf-text-muted);
    margin-right: .35rem;
}

.notes .event {
    color: var(--mf-text-faint);
}

/* Summary strip: a few numbers with labels, above a section */
.stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
    background: var(--mf-surface);
    margin-bottom: 1.25rem;
    overflow: clip;
}

.stat {
    flex: 1 1 9rem;
    padding: .75rem 1rem;
    border-right: 1px solid var(--mf-line-soft);
}

.stat:last-child {
    border-right: 0;
}

.stat .stat-label {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mf-text-faint);
}

.stat .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mf-heading);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.stat .stat-sub {
    display: block;
    font-size: .75rem;
    color: var(--mf-text-muted);
}

.stat .stat-value.is-danger { color: var(--bs-danger-text-emphasis); }
.stat .stat-value.is-warning { color: var(--bs-warning-text-emphasis); }

/* Drawing thumbnails */
.thumb-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.thumb {
    margin: 0;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-sm);
    background: #fff;
    overflow: clip;
    transition: border-color .15s var(--mf-ease), box-shadow .15s var(--mf-ease);
}

.thumb:hover {
    border-color: var(--mf-accent);
    box-shadow: 0 0 0 3px var(--mf-accent-ring);
}

.thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fff;
}

.thumb figcaption {
    padding: .4rem .6rem;
    font-size: .78rem;
    color: var(--mf-text-muted);
    background: var(--mf-surface-2);
    border-top: 1px solid var(--mf-line-soft);
}

/* Visual aid figure */
.figure-frame {
    margin: 0;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-sm);
    background: #fff;
    overflow: clip;
}

.figure-frame img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.figure-frame figcaption {
    padding: .45rem .75rem;
    font-size: .78rem;
    color: var(--mf-text-muted);
    background: var(--mf-surface-2);
    border-top: 1px solid var(--mf-line-soft);
}

/* Inline PDF viewer */
.pdf-frame {
    width: 100%;
    height: 70vh;
    display: block;
    border: 0;
    background: var(--mf-surface-3);
}

/* Centered message pages (error, denied, sign out) */
.message-page {
    max-width: 30rem;
    margin: 3rem auto;
    text-align: center;
}

.message-page .message-icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--mf-surface-3);
    color: var(--mf-text-muted);
    margin-bottom: 1rem;
}

.message-page .message-icon svg { width: 1.4rem; height: 1.4rem; }

.message-page h1 {
    font-size: 1.35rem;
}

.message-page p {
    color: var(--mf-text-muted);
    font-size: .9rem;
}

/* Copy-for-AI affordance */
.copy-hint {
    font-size: .78rem;
    color: var(--mf-text-muted);
    max-width: 22rem;
}

/* Developer information footer block */
.dev-notes {
    margin-top: 2.5rem;
    font-size: .8rem;
    color: var(--mf-text-muted);
}

.dev-notes summary {
    cursor: pointer;
    color: var(--mf-text-faint);
}

.dev-notes ul {
    margin: .5rem 0 0;
    padding-left: 1.1rem;
}

/* Cards used as links (legacy) */
a.card:hover,
a.card:focus-visible {
    border-color: var(--mf-accent);
    box-shadow: 0 0 0 3px var(--mf-accent-ring);
}

/*
 * Panel overview. Attributes, coverings and finish stack in the main column; with a visual aid, the aid takes the
 * second column and stretches to the main column's full height (the image is absolutely positioned inside its
 * figure so it can never drive the row height and leave a gap under the other column).
 */
.panel-overview {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.panel-overview-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.panel-overview-main > .section {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .panel-overview.has-aid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .panel-overview.has-aid > #visual-aid {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .panel-overview.has-aid > #visual-aid .figure-frame {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 20rem;
    }

    .panel-overview.has-aid > #visual-aid .figure-frame > a {
        flex: 1 1 auto;
        position: relative;
        min-height: 0;
        background: #fff;
    }

    .panel-overview.has-aid > #visual-aid .figure-frame img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: .5rem;
    }

    .panel-overview.has-aid > #visual-aid .figure-frame figcaption {
        flex: 0 0 auto;
    }
}

/*
 * Progress steps: where a record has got to, as a short row of done/not-yet steps.
 * <ol class="progress-steps"><li class="done"><span class="step-name">…</span><span class="step-detail">…</span></li>…</ol>
 */
.progress-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: .75rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.progress-steps > li {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .65rem .9rem .7rem 2.3rem;
    position: relative;
    background: var(--mf-surface);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
    min-width: 0;
}

.progress-steps > li::before {
    content: "";
    position: absolute;
    left: .85rem;
    top: .95rem;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    border: 2px solid var(--mf-line-strong);
}

.progress-steps > li.done::before {
    border-color: var(--bs-success-text-emphasis);
    background: var(--bs-success-text-emphasis);
    box-shadow: inset 0 0 0 2px var(--mf-surface);
}

.progress-steps .step-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--mf-heading);
}

.progress-steps li:not(.done) .step-name { color: var(--mf-text-muted); }

.progress-steps .step-detail {
    font-size: .8rem;
    color: var(--mf-text-muted);
    overflow-wrap: anywhere;
}

/* Plain-sentence list of problems under the page header */
.alert.attention ul {
    margin: .35rem 0 0;
    padding-left: 1.1rem;
}

.alert.attention li + li { margin-top: .2rem; }

/* A quiet "show more" disclosure inside a section body: <details class="more-toggle"><summary>Show 8 more</summary>…</details> */
.more-toggle {
    margin-top: .75rem;
}

.more-toggle > summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    list-style: none;
    font-size: .82rem;
    font-weight: 600;
    color: var(--mf-accent);
}

.more-toggle > summary::-webkit-details-marker { display: none; }

.more-toggle > summary::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s var(--mf-ease);
}

.more-toggle[open] > summary::before { transform: rotate(45deg); }
.more-toggle[open] > summary { margin-bottom: .75rem; }
.more-toggle .table-responsive + .sub-heading { margin-top: 1rem; }

.finish-verdict { margin: .75rem 0 0; }
.finish-verdict .status { font-weight: 500; }

/* A thin bar of table options above a section's table */
.section-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: .5rem 1.15rem;
    border-bottom: 1px solid var(--mf-line-soft);
    font-size: .82rem;
}

/*
 * Optional columns: cells marked .col-extra stay hidden until the "Show all columns" switch inside the same
 * .has-col-toggle wrapper is on. Screen only, so a printout always carries every column.
 */
@media screen {
    .has-col-toggle:not(:has(.col-toggle input:checked)) .col-extra { display: none !important; }
}

/* A group heading row inside a table: <tbody><tr class="group-row"><th colspan="…">Name <span class="group-count">…</span></th></tr>… */
.table > tbody > tr.group-row > th {
    background: var(--mf-surface-2);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mf-heading);
}

.group-row .group-count {
    margin-left: .5rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mf-text-muted);
}

/*
 * A folded group inside a section: one summary row (title, badges, counts) over its table.
 * <details class="fold"><summary><span class="fold-title">…</span><span class="fold-meta">…</span></summary>…</details>
 */
.fold {
    border-top: 1px solid var(--mf-line-soft);
}

.fold > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    padding: .7rem 1.15rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.fold > summary::-webkit-details-marker { display: none; }

.fold > summary::before {
    content: "";
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    margin-right: .2rem;
    border-right: 2px solid var(--mf-text-faint);
    border-bottom: 2px solid var(--mf-text-faint);
    transform: rotate(-45deg);
    transition: transform .15s var(--mf-ease);
}

.fold[open] > summary::before { transform: rotate(45deg); }
.fold > summary:hover { background: var(--mf-surface-2); }
.fold > summary:focus-visible { outline-offset: -2px; }
.fold[open] > summary { border-bottom: 1px solid var(--mf-line-soft); }

.fold-title {
    font-weight: 600;
    color: var(--mf-heading);
}

.fold-meta {
    margin-left: auto;
    font-size: .82rem;
    color: var(--mf-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Filter chips: a row of links that narrow a list, one of them .active */
.filter-chips {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .35rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem;
    border: 1px solid var(--mf-line);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mf-text);
    text-decoration: none;
}

.filter-chip .count {
    font-weight: 500;
    color: var(--mf-text-muted);
    font-variant-numeric: tabular-nums;
}

.filter-chip:hover { background: var(--mf-surface-2); color: var(--mf-text); }

.filter-chip.active {
    background: var(--mf-accent-soft);
    border-color: var(--mf-accent);
    color: var(--mf-accent);
}

/* Small links for record ids inside a cell: <span class="id-chips"><a class="id-chip">7</a>…</span> */
.id-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}

.table td .id-chip {
    display: inline-block;
    min-width: 1.6rem;
    padding: .05rem .4rem;
    border-radius: var(--mf-radius-sm);
    background: var(--mf-surface-3);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    color: var(--mf-text);
    text-decoration: none;
    white-space: nowrap;
}

.table td .id-chip:hover { background: var(--mf-accent-soft); color: var(--mf-accent); }
.table td .id-chip.more { background: transparent; color: var(--mf-accent); }

/* Tiny progress bar under a number: <span class="mini-bar"><span style="width: 40%"></span></span> */
.mini-bar {
    display: block;
    width: 4rem;
    height: .25rem;
    margin: .25rem 0 0 auto;
    border-radius: 999px;
    background: var(--mf-surface-3);
    overflow: hidden;
}

.mini-bar > span {
    display: block;
    height: 100%;
    background: var(--bs-success-text-emphasis);
}

/* Part and material numbers never break mid-number in a table cell */
.table td.mono, .table .mono {
    word-break: normal;
    white-space: nowrap;
}

/* Small uppercase heading inside a section body */
.sub-heading {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mf-text-faint);
    margin: 0 0 .5rem;
}

/* Stats that link to a section */
a.stat {
    color: inherit;
    transition: background .15s var(--mf-ease);
}

a.stat:hover, a.stat:focus-visible {
    text-decoration: none;
    background: var(--mf-surface-2);
}

/* ── 11. Mobile ──────────────────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    main.py-4 { padding-top: 1rem !important; padding-bottom: 1.5rem !important; }
    .container { --bs-gutter-x: 2rem; }

    .page-header {
        margin-bottom: 1rem;
        padding-bottom: .85rem;
        gap: .75rem;
    }

    .page-header h1 { font-size: 1.35rem; }
    .page-header .lead { font-size: .9rem; }
    .page-header-actions { width: 100%; }
    .page-header-actions .lookup { max-width: none; width: 100%; }
    .page-header-actions .d-flex { flex-wrap: wrap; }

    .meta-row { gap: .35rem; }
    .meta-chip { font-size: .78rem; }

    .page-subnav {
        margin-left: calc(var(--bs-gutter-x) * -.5);
        margin-right: calc(var(--bs-gutter-x) * -.5);
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    .section-header { padding: .7rem .9rem; }
    .section-body { padding: .85rem .9rem; }
    .section-header .section-actions { margin-left: 0; flex-basis: 100%; }

    .kv { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0 1rem; }

    .stat { flex-basis: 45%; padding: .6rem .8rem; }
    .stat:nth-child(2n) { border-right: 0; }
    .stat:nth-child(n + 3) { border-top: 1px solid var(--mf-line-soft); }
    .stat .stat-value { font-size: 1.1rem; }

    /* Touch targets */
    .btn, .lookup button, .lookup input { min-height: 2.6rem; }
    .icon-btn { width: 2.6rem; height: 2.6rem; }
    .app-nav .nav-link { min-height: 2.75rem; display: flex; align-items: center; }
    .app-brand-text small { display: none; }

    .report > summary { padding-left: 1.9rem; }
    .report-body { padding-left: .9rem; }
    .problem-header .problem-stats { margin-left: 0; flex-basis: 100%; white-space: normal; }

    .thumb-grid { grid-template-columns: repeat(2, 1fr); }
    .pdf-frame { height: 60vh; }

    /*
     * Stacked tables. Each row becomes a card; each cell prints its column name from data-label. Header row is
     * hidden but stays in the DOM for assistive tech. Tables without data-label keep scrolling horizontally.
     */
    .table-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td {
        display: block;
        width: 100%;
    }

    .table-stack tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 .75rem;
        padding: .6rem .9rem .7rem;
        border-bottom: 1px solid var(--mf-line-soft);
        border-left: 0;
    }

    .table-stack tbody tr:last-child { border-bottom: 0; }

    .table-stack td {
        padding: .2rem 0 !important;
        border: 0 !important;
        background: transparent !important;
        min-width: 0;
    }

    .table-stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .64rem;
        font-weight: 600;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--mf-text-faint);
        line-height: 1.3;
    }

    .table-stack td.num { text-align: left; }

    /* The first cell (the row's key: panel, order, line) spans the card's full width and reads as its title */
    .table-stack td:first-child {
        grid-column: 1 / -1;
        padding-bottom: .35rem !important;
        font-size: .95rem;
    }

    .table-stack td:first-child::before { display: none; }
    .table-stack td:first-child .badge { margin-left: .25rem; }

    .table-hover > tbody > tr[data-href]:not([data-href=""]):hover > * { box-shadow: none; }
    .table-stack tbody tr[data-href]:not([data-href=""]):hover { background: var(--mf-row-hover); }
    .table-stack tbody tr[data-href]:not([data-href=""]) { box-shadow: inset 3px 0 0 transparent; }
    .table-stack tbody tr[data-href]:not([data-href=""]):active { box-shadow: inset 3px 0 0 var(--mf-accent); }

    /* Sticky heads don't apply once the table is stacked */
    .table-responsive > .table-stack > thead > tr > th { position: static; }

    /* Group heading rows stay a single full-width band */
    .table-stack tr.group-row { display: block; padding: 0; }
    .table-stack tr.group-row > th { display: block; padding: .45rem .9rem; border: 0; }

    /* Numbers go left-aligned once stacked; their progress bar follows */
    .table-stack .mini-bar { margin-left: 0; }
}

@media (max-width: 479.98px) {
    .kv { grid-template-columns: 1fr 1fr; }
    .table-stack tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .thumb-grid { grid-template-columns: 1fr 1fr; }
    .tile-grid { grid-template-columns: 1fr; }
    .stat { flex-basis: 45%; }
}

/* ── 12. Print ───────────────────────────────────────────────────────────────────────────────────────────── */

@page {
    margin: 12mm 12mm 14mm;
}

@media print {
    :root, [data-bs-theme="dark"], [data-bs-theme="light"] {
        color-scheme: light;
        --mf-canvas: #fff;
        --mf-surface: #fff;
        --mf-surface-2: #f3f5f8;
        --mf-surface-3: #e9edf2;
        --mf-line: #c9d1dc;
        --mf-line-soft: #dfe5ec;
        --mf-line-strong: #aeb9c8;
        --mf-text: #000;
        --mf-text-muted: #444c59;
        --mf-text-faint: #667085;
        --mf-heading: #0b264b;
        --mf-accent: #24598f;
        --mf-accent-soft: #e3eefc;
        --mf-row-hover: transparent;
        --mf-row-stripe: #f6f8fa;
        --mf-shadow: none;
        --mf-shadow-lg: none;
        --bs-body-bg: #fff;
        --bs-body-color: #000;
        --bs-link-color: #0b264b;
        --bs-heading-color: #0b264b;
        --bs-primary-bg-subtle: #e3eefc;   --bs-primary-text-emphasis: #24598f;   --bs-primary-border-subtle: #bcd4f0;
        --bs-secondary-bg-subtle: #eef1f5; --bs-secondary-text-emphasis: #46536a; --bs-secondary-border-subtle: #d3dae4;
        --bs-success-bg-subtle: #e2f5e5;   --bs-success-text-emphasis: #1d7a3d;   --bs-success-border-subtle: #bfe5c6;
        --bs-danger-bg-subtle: #fdecea;    --bs-danger-text-emphasis: #b3261e;    --bs-danger-border-subtle: #f1c2bf;
        --bs-warning-bg-subtle: #fdf3dd;   --bs-warning-text-emphasis: #8a5a00;   --bs-warning-border-subtle: #ecd9ac;
        --bs-info-bg-subtle: #e3eefc;      --bs-info-text-emphasis: #24598f;      --bs-info-border-subtle: #bcd4f0;
    }

    html { font-size: 11pt; }
    body { background: #fff !important; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Chrome that has no meaning on paper */
    .app-bar, .app-footer, .page-subnav, .page-header-actions, .skip-link, .theme-toggle, .dev-notes,
    .icon-btn, .lookup, .btn, .copy-hint, .tile-go, .section-actions a, .navbar-toggler { display: none !important; }

    /* Full-width, no container max */
    .container { max-width: none !important; width: auto !important; padding: 0 !important; }
    main { padding: 0 !important; }

    /* Printed provenance: title, path and time */
    .print-meta {
        display: flex !important;
        justify-content: space-between;
        gap: 1rem;
        font-size: 8pt;
        color: #667085;
        border-bottom: 1px solid #c9d1dc;
        padding-bottom: 4pt;
        margin-bottom: 10pt;
    }

    .page-header { border-bottom: 2px solid #0b264b; margin-bottom: 10pt; padding-bottom: 6pt; }
    .page-header h1 { font-size: 16pt; color: #0b264b; }
    .page-header .lead { color: #444c59; }
    .breadcrumb { font-size: 8pt; }
    .meta-chip { border-color: #c9d1dc; background: #fff; }

    .section, .card, .problem, .stat-strip, .callout, .tile {
        box-shadow: none !important;
        border: 1px solid #c9d1dc !important;
        break-inside: avoid;
        margin-bottom: 8pt;
        overflow: visible;
    }

    .section-header { background: #f3f5f8 !important; padding: 5pt 8pt; }
    .section-header .section-title { font-size: 10.5pt; }
    .section-header .section-sub { font-size: 8pt; }
    .section-body { padding: 6pt 8pt; }
    .section-grid { display: block; }
    .section-grid > .section { margin-bottom: 8pt; }

    /* details are opened by site.js on beforeprint; hide the disclosure chevrons */
    details.section > summary::before, .report > summary::before { display: none; }
    details.section > summary { cursor: default; }

    .kv { font-size: 9pt; gap: 0 10pt; grid-template-columns: repeat(auto-fill, minmax(38mm, 1fr)); }
    .kv > div { padding: 2.5pt 0; border-bottom-color: #dfe5ec; }
    .kv dt { font-size: 6.5pt; }

    .table { font-size: 8.5pt; color: #000; }
    .table > :not(caption) > * > * { padding: 3pt 5pt; }
    .table > thead > tr > th { background: #f3f5f8 !important; color: #444c59; font-size: 6.5pt; border-bottom: 1px solid #aeb9c8; }
    .table > tbody > tr > * { border-bottom: 1px solid #dfe5ec; }
    .table-responsive { overflow: visible !important; }
    .table-responsive > .table > thead > tr > th { position: static; }
    thead { display: table-header-group; }
    tr { break-inside: avoid; }
    tr[data-href]:not([data-href=""]) { cursor: default; }
    .table-hover > tbody > tr:hover > * { background: transparent !important; box-shadow: none !important; }

    .table-danger > * { background: #fdecea !important; color: #b3261e !important; }
    .badge { border: 1px solid #aeb9c8 !important; }

    .stat-strip { border: 1px solid #c9d1dc; }
    .stat { padding: 4pt 8pt; }
    .stat .stat-value { font-size: 12pt; }

    .thumb-grid { grid-template-columns: repeat(3, 1fr); gap: 6pt; }
    .thumb, .figure-frame { border: 1px solid #c9d1dc; }
    .thumb img { aspect-ratio: auto; max-height: 70mm; }
    .figure-frame img { max-height: 120mm; }
    .pdf-frame { display: none; }

    .problem { break-inside: auto; }
    .problem-header { background: #f3f5f8 !important; }
    .report { break-inside: avoid; }
    .report > summary { padding-left: 8pt; }
    .report-body { padding-left: 8pt; }

    .alert { border: 1px solid currentColor; }
    .empty-state { border: 1px dashed #aeb9c8; }

    a { color: inherit !important; text-decoration: none !important; }
    /* Show where an external anchor points, except in-page links and row keys */
    .section-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 7.5pt; color: #667085; }

    .tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6pt; }
    .message-page { margin-top: 20mm; }
    textarea.d-none { display: none !important; }
}

/* Off-screen unless printing */
.print-meta { display: none; }

/* Crate editor: one card per crate, panels as an ordered list with a "stop here" action per row */
.crate-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    align-items: start;
}

.crate-card {
    display: flex;
    flex-direction: column;
    background: var(--mf-surface);
    border: 1px solid var(--mf-line);
    border-left: 4px solid var(--bs-success-border-subtle);
    border-radius: var(--mf-radius);
    box-shadow: var(--mf-shadow);
    padding: .85rem 1rem 1rem;
    min-width: 0;
}

.crate-card.is-invalid { border-left-color: var(--bs-danger-border-subtle); }

.crate-card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.crate-card-header h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--mf-heading);
}

.crate-dims {
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    margin-bottom: .5rem;
}

.crate-dims > div { padding: .25rem 0; border-bottom: none; }
.crate-dims dd { font-variant-numeric: tabular-nums; }

.crate-problems {
    margin: 0 0 .6rem;
    padding: .5rem .75rem;
    list-style: none;
    font-size: .8rem;
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    border-radius: var(--mf-radius-sm);
}

.crate-slots {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mf-line-soft);
}

.crate-slot {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--mf-line-soft);
    font-size: .85rem;
}

.crate-slot-row {
    font-size: .72rem;
    font-weight: 700;
    color: var(--mf-text-faint);
    font-variant-numeric: tabular-nums;
}

.crate-slot-desc {
    font-family: var(--mf-font-mono);
    font-size: .78rem;
    overflow-wrap: anywhere;
}

.crate-slot-action .btn-link {
    padding: 0 .25rem;
    font-size: .75rem;
    text-decoration: none;
    white-space: nowrap;
}

.crate-slot-action .btn-link:hover { text-decoration: underline; }

.crate-card-footer {
    margin: .7rem 0 0;
    font-size: .8rem;
}

.crate-config {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

@media print {
    .crate-grid { grid-template-columns: repeat(2, 1fr); gap: 6pt; }
    .crate-card { break-inside: avoid; border: 1px solid #c9d1dc; border-left-width: 3pt; box-shadow: none; }
    .crate-slot-action, .crate-card-footer form, .crate-config, .page-header-actions { display: none !important; }
}

/* L-skid editor reuses the crate cards; these are the extra controls */
.crate-card.is-unvalidated { border-left-color: var(--mf-line-strong); }

.crate-slot-action {
    display: flex;
    align-items: center;
    gap: .1rem;
}

.skid-card-tools {
    display: flex;
    gap: .25rem;
    margin-left: auto;
}

.skid-card-tools form { display: contents; }

.skid-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.btn.icon-only {
    padding-left: .5rem;
    padding-right: .5rem;
    line-height: 1;
}

.crate-slot-desc .badge { margin-left: .3rem; vertical-align: middle; }

@media print {
    .skid-card-tools, .skid-header-actions { display: none !important; }
}

/* A page with an editing grid (ViewData["WidePage"], see _Layout) may use a wide screen past Bootstrap's 1320px. */
.page-wide .container { max-width: 1600px; }

/* Processing hub: the editable panel grid. It has to fit the card at desktop width without a scrollbar, so cells are
   tight, headers wrap rather than widen a column, number fields drop their spinners (a quarter of the field, drawn
   over the value) and every field fills its column, which also keeps each header over its field. Header and body
   cells share one inset; the edge columns keep the card's usual table inset. */
.grid-edit > :not(caption) > * > * { padding: .2rem; }
.grid-edit > thead > tr > th { padding-top: .4rem; padding-bottom: .4rem; white-space: normal; vertical-align: bottom; }
.grid-edit > tbody > tr > :first-child,
.grid-edit > thead > tr:first-child > :first-child { padding-left: .6rem; }
.grid-edit > :not(caption) > tr > :last-child { padding-right: .6rem; }
.grid-edit td { vertical-align: middle; font-size: .8rem; }
.grid-edit .form-control, .grid-edit .form-select { font-size: .8rem; padding-left: .35rem; }
/* 5.9rem holds a ten-character part number ("104007-001"); 4.25rem below holds seven-character numbers ("39.1875"). */
.grid-edit .form-control { min-width: 5.9rem; padding-right: .35rem; }
.grid-edit .form-control.num { min-width: 4.25rem; text-align: right; font-variant-numeric: tabular-nums; }
.grid-edit .form-select { min-width: 7rem; }
.grid-edit input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.grid-edit input[type=number]::-webkit-inner-spin-button,
.grid-edit input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.grid-edit tr.grid-jamb td { background: color-mix(in srgb, var(--mf-surface) 70%, var(--mf-canvas)); }
/* A side's columns under one "Side L" / "Side R" heading, ruled off from the other side. */
.grid-edit th.grid-side { text-align: center; }
.grid-edit .grid-side-start { border-left: 1px solid var(--mf-line); }
/* The work-surface lists show TCM's descriptions (up to "F.H. T.B. W/ P.H. PORC. M.B."): never narrower than the
   longest one, so none truncates, while still filling the column like every other field. */
.grid-work-surfaces .form-select { min-width: max-content; }
/* The grid form sits flush in its section so the tables get the card's full width; its headings, notes and action
   rows keep the section's inset, and the last row the section's bottom padding. */
.section > form > .grid-subtitle,
.section > form > .grid-note,
.section > form > .grid-actions,
.section > form.grid-actions { padding-left: 1.15rem; padding-right: 1.15rem; }
.section > form.grid-actions:last-child { padding-bottom: 1rem; }
@media (max-width: 767.98px) {
    .section > form > .grid-subtitle,
    .section > form > .grid-note,
    .section > form > .grid-actions,
    .section > form.grid-actions { padding-left: .9rem; padding-right: .9rem; }
}
.grid-subtitle { font-size: .95rem; font-weight: 700; margin: 1rem 0 .4rem; color: var(--mf-heading); }
.grid-note { margin: .5rem 0 0; font-size: .8rem; color: var(--mf-text-muted); }
.grid-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; font-size: .85rem; }
.pre-line { white-space: pre-line; }
@media print { .grid-actions { display: none !important; } }