/* ============================================================
   The Foundry — Monitor Style CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   Phase 2 design tokens — "On Snow" language (from the mock-ups)
   Warm paper surfaces · warm near-black ink · green accent.
   ============================================================ */
:root {
    --paper: #f7f5f0;      /* app work surface */
    --paper2: #fafaf8;
    --card: #ffffff;
    --ink: #11110f;        /* primary text / dark rail */
    --ink2: #2a2a27;
    --sub: #6f6c64;        /* muted text */
    --muted: #a8a49a;
    --line: #e9e5dc;       /* borders */
    --line-soft: #f0ece3;
    --green: #10b981;      /* accent */
    --green-dk: #0f9d6e;
    --green-soft: #ecfdf5;
    --blue: #2563eb;       /* links / secondary */
    --blue-dk: #1d4fd8;
    --blue-soft: #eef2fe;
    --amber: #e0a000;
    --amber-bg: #fdf3d8;
    --amber-fg: #8a5a00;
    --red: #ef4444;
    --red-dk: #dc2626;
    --red-bg: #fde4e1;
    --red-fg: #b42318;
    --rail1: #07090c;      /* dark rail gradient */
    --rail2: #191c22;
    --shadow: 0 1px 2px rgba(17,17,15,0.04), 0 6px 20px rgba(17,17,15,0.05);
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
}

/* Remove Dash default margins */
#_dash-app-content {
    margin: 0;
}

/* ============================================================
   Dark collapsible navigation rail (Phase 2 shell)
   Follows the mock-up ShellRail: brand top, nav mid, user bottom.
   ============================================================ */
#app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 72px;
    background: linear-gradient(180deg, var(--rail1) 0%, var(--rail2) 100%);
    display: flex;
    flex-direction: column;
    padding: 0 0 12px;
    z-index: 1000;
    overflow: hidden;
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Topo contour texture across the top of the rail */
#app-sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 160px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20160%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%2050%20Q%20130%2020%2C%20280%2056%20T%20560%2036%20T%20760%2064%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.14%29%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-20%2070%20Q%20130%2040%2C%20280%2076%20T%20560%2056%20T%20760%2084%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.14%29%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-20%2090%20Q%20130%2060%2C%20280%2096%20T%20560%2076%20T%20760%20104%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.14%29%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-20%20110%20Q%20130%2080%2C%20280%20116%20T%20560%2096%20T%20760%20124%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.14%29%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-20%20130%20Q%20130%20100%2C%20280%20136%20T%20560%20116%20T%20760%20144%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.14%29%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-20%20150%20Q%20130%20120%2C%20280%20156%20T%20560%20136%20T%20760%20164%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.14%29%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-20%20170%20Q%20130%20140%2C%20280%20176%20T%20560%20156%20T%20760%20184%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.14%29%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-20%20190%20Q%20130%20160%2C%20280%20196%20T%20560%20176%20T%20760%20204%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.14%29%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
}

#app-sidebar > * {
    position: relative;
    z-index: 1;
}

#app-sidebar.rail-expanded {
    width: 248px;
}

/* Brand — logo mark + wordmark */
.rail-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 68px;
    padding: 22px 0 20px;
    justify-content: center;
    overflow: hidden;
}

#app-sidebar.rail-expanded .rail-brand {
    justify-content: flex-start;
    padding: 22px 22px 20px;
}

.rail-logo {
    height: 26px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.rail-wordmark {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.13em;
    color: #fff;
    white-space: nowrap;
}

.nav-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding-top: 4px;
}

/* Section label — only visible when expanded */
.nav-section {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.34);
    padding: 4px 24px 8px;
    white-space: nowrap;
}

.inv-model-link:hover {
    color: var(--green-dk);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nav-link {
    display: flex;
    align-items: center;
    height: 44px;
    margin: 2px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.62);
    position: relative;
    overflow: hidden;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-ico {
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.nav-link.active {
    background: rgba(16, 185, 129, 0.14);
    color: #fff;
}

.nav-link.active .nav-ico {
    color: var(--green);
}

.nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--green);
}

/* Labels — visibility only; hidden (no layout width) when collapsed */
.nav-label {
    white-space: nowrap;
}

#app-sidebar.rail-collapsed .nav-label {
    display: none;
}

.nav-link .nav-label {
    font-size: 14px;
    font-weight: 500;
}

.nav-link.active .nav-label {
    font-weight: 700;
}

/* ── Rail footer — user + collapse toggle ─────────────────── */
.rail-footer {
    flex: 0 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 14px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rail-user {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    overflow: hidden;
}

#app-sidebar.rail-expanded .rail-user {
    justify-content: flex-start;
}

.rail-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.14);
    border: 2px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.rail-user-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.rail-user-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail-user-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail-signout {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    text-decoration: none;
    padding: 6px;
    border-radius: 7px;
    transition: color 0.15s ease, background 0.15s ease;
}

.rail-signout:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* Collapse / expand toggle */
.rail-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 34px;
    padding: 0 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.6);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.rail-switch:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.nav-toggle {
    flex: 0 0 auto;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.nav-toggle .nav-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ============================================================
   Work-surface page header + stat cards (Phase 2)
   ============================================================ */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.ph-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: var(--sub);
    text-transform: uppercase;
    letter-spacing: 0.13em;
    margin-bottom: 7px;
}

.ph-title-row {
    display: flex;
    align-items: center;
    gap: 13px;
}

.ph-title {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.ph-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Stat cards */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sub);
}

.stat-icon {
    color: var(--muted);
    font-size: 14px;
}

.stat-value {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
}

.stat-value.is-alert {
    color: var(--red-dk);
}

/* ============================================================
   Segmented tab bar — mock-up style (dashboard, On Snow Feedback)
   Active = ink pill; inactive = readable grey (no fade).
   ============================================================ */
/* .pill-tabs is the reusable class; the ids remain for pages that predate it. */
#dashboard-tabs.nav-tabs,
#dashboard-tabs,
#osf-tabs.nav-tabs,
#osf-tabs,
#osf-ff-subtabs.nav-tabs,
#osf-ff-subtabs,
.pill-tabs.nav-tabs,
.pill-tabs {
    border-bottom: none;
    gap: 6px;
    display: flex;
    flex-wrap: wrap;
}

#dashboard-tabs .nav-link,
#osf-tabs .nav-link,
#osf-ff-subtabs .nav-link,
.pill-tabs .nav-link {
    color: var(--sub) !important;
    font-size: 14px;
    font-weight: 600;
    border: none !important;
    background: transparent !important;
    border-radius: 9px;
    padding: 8px 15px;
    margin: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

#dashboard-tabs .nav-link:hover,
#osf-tabs .nav-link:hover,
#osf-ff-subtabs .nav-link:hover,
.pill-tabs .nav-link:hover {
    color: var(--ink) !important;
    background: var(--line-soft) !important;
}

#dashboard-tabs .nav-link.active,
#osf-tabs .nav-link.active,
#osf-ff-subtabs .nav-link.active,
.pill-tabs .nav-link.active {
    color: #fff !important;
    background: var(--ink) !important;
    font-weight: 700;
    border: none !important;
}

#dashboard-tabs .nav-link:focus,
#dashboard-tabs .nav-link:focus-visible,
#osf-tabs .nav-link:focus,
#osf-tabs .nav-link:focus-visible,
#osf-ff-subtabs .nav-link:focus,
#osf-ff-subtabs .nav-link:focus-visible,
.pill-tabs .nav-link:focus,
.pill-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Nested sub-tabs sit a touch smaller/lighter than the top row */
#osf-ff-subtabs .nav-link {
    font-size: 13px;
    padding: 6px 12px;
}

/* ============================================================
   On-Snow Feedback — "Rider Feedback" header + segmented nav
   (mock d3-forms). Title, an ink-pill segmented control with
   count chips, and right-aligned actions on one row.
   ============================================================ */
.osf-header {
    display: flex;
    align-items: center;
    gap: 18px 22px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.osf-header .ph-left { flex: none; }

.fb-seg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.fb-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--sub);
    border-radius: 9px;
    padding: 8px 15px;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.fb-seg-btn:hover { color: var(--ink); background: var(--line-soft); }
.fb-seg-btn.active { background: var(--ink); color: #fff; font-weight: 700; }
.fb-seg-btn:focus,
.fb-seg-btn:focus-visible { outline: none; box-shadow: none; }

.fb-seg-count {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    border-radius: 100px;
    padding: 3px 7px;
    background: var(--line-soft);
    color: var(--sub);
}
.fb-seg-btn.active .fb-seg-count {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.fb-seg-count:empty { display: none; }

/* ============================================================
   Modals — uniform token chrome across every dbc.Modal.
   (The inventory / job-item "creation" modals opt into their own
   dark header via .inv-modal-content and are unaffected here.)
   ============================================================ */
.modal-content {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16) !important;
}
.modal-header {
    border-bottom: 1px solid var(--line);
    padding: 18px 24px;
    border-radius: 16px 16px 0 0;
}
.modal-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.modal-body {
    padding: 22px 24px;
    color: var(--ink);
}
.modal-footer {
    border-top: 1px solid var(--line);
    padding: 14px 24px;
    background: var(--paper2);
    border-radius: 0 0 16px 16px;
    gap: 8px;
}
.modal-footer > * { margin: 0; }
.btn-close { opacity: 0.55; }
.btn-close:hover { opacity: 0.9; }

/* Footer buttons → token language (ink primary, token secondary) */
.modal-footer .btn {
    border-radius: 10px;
    font-weight: 700;
    font-size: 13.5px;
    padding: 8px 16px;
}
.modal-footer .btn-primary {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
}
.modal-footer .btn-secondary,
.modal-footer .btn-outline-secondary {
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink2) !important;
}
.modal-footer .btn-danger {
    background: var(--red-dk) !important;
    border-color: var(--red-dk) !important;
    color: #fff !important;
}

/* Table row hover */
table tbody tr:hover {
    background: var(--paper2) !important;
}

/* Input focus states */
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--green) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

/* Dropdown styling */
.Select-control {
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    height: 40px !important;
}

.Select-control:hover {
    border-color: var(--muted) !important;
}

/* Add Lab Test modal — keep the (multi) template dropdown and its open menu
   bounded to the control/modal width so long labels can't spill past the modal. */
.add-test-dd,
.add-test-dd .Select-control,
.add-test-dd .Select-menu-outer {
    width: 100% !important;
    box-sizing: border-box;
}
.add-test-dd .Select-menu-outer { max-width: 100%; }

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--paper2);
}

::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
}

/* ============================================================
   Create Inventory modal (Add item / product) — mock-up
   ============================================================ */
.inv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}
.inv-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
@media (max-width: 760px) {
    .inv-grid { grid-template-columns: 1fr; }
}
.inv-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: 7px;
    display: block;
}
.inv-locked-wrap {
    position: relative;
}
.inv-locked-wrap .fa-lock {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 11px;
    pointer-events: none;
}
.inv-qty-card {
    background: var(--paper2);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 14px 16px;
}
.inv-step-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--card);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink2);
    font-size: 13px;
}
.inv-step-btn:hover { border-color: var(--muted); }
.inv-step-val {
    width: 62px;
    height: 34px;
    border: 1.5px solid var(--line);
    border-radius: 9px;
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
}
.inv-quick {
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    background: var(--card);
    color: var(--sub);
    border: 1px solid var(--line);
}
.inv-quick:hover { border-color: var(--muted); }

/* Testing-purpose checklist rendered as selectable chips */
#fp-add-purposes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#fp-add-purposes label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    background: var(--card);
    color: var(--sub);
    border: 1px solid var(--line);
    margin: 0;
}
#fp-add-purposes label:has(input:checked) {
    background: var(--green-soft);
    color: var(--green-dk);
    border-color: var(--green);
}
#fp-add-purposes input {
    accent-color: var(--green);
    cursor: pointer;
}

/* Dark header + stats */
.inv-modal-content {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden;
}
.inv-modal {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 60px);
    background: var(--card);
}
.inv-head {
    position: relative;
    background: linear-gradient(120deg, var(--rail1) 0%, var(--rail2) 100%);
    color: #fff;
    padding: 22px 26px 20px;
    overflow: hidden;
    flex-shrink: 0;
}
.inv-head::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20160%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%2050%20Q%20130%2020%2C%20280%2056%20T%20560%2036%20T%20760%2064%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.12%29%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-20%2090%20Q%20130%2060%2C%20280%2096%20T%20560%2076%20T%20760%20104%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.12%29%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-20%20130%20Q%20130%20100%2C%20280%20136%20T%20560%20116%20T%20760%20144%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.12%29%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-size: 100% 100%;
    pointer-events: none;
}
.inv-head > * { position: relative; z-index: 1; }
.inv-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}
.inv-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    color: #fff;
}
.inv-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
}
.inv-stats {
    display: flex;
    gap: 34px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.inv-stat .v { font-size: 20px; font-weight: 800; color: #fff; line-height: 1; }
.inv-stat .l {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 6px;
}
.inv-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.inv-close:hover { background: rgba(255, 255, 255, 0.2); }
.inv-body { padding: 22px 26px; overflow: auto; }
.inv-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-top: 1px solid var(--line);
    background: var(--paper2);
    flex-shrink: 0;
}

/* Allocation split */
.inv-alloc-valid {
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    font-family: var(--mono);
}
.inv-splitbar {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    background: var(--line);
    margin: 10px 0 14px;
}
.inv-alloc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 10px 13px;
}
.inv-alloc-row + .inv-alloc-row { margin-top: 9px; }
.inv-alloc-row.lab { background: var(--blue-soft); border-color: #d5deff; }
.inv-alloc-row.fb { background: var(--green-soft); border-color: #cdeede; }
.inv-alloc-ico {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
}

/* Units-to-be-created preview */
.inv-unit {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 7px;
    padding: 5px 10px;
}
.inv-unit.lab { background: var(--blue-soft); color: var(--blue-dk); border: 1px solid #d5deff; }
.inv-unit.fb { background: var(--green-soft); color: var(--green-dk); border: 1px solid #cdeede; }
.inv-unit .tag { margin-left: auto; font-size: 9.5px; letter-spacing: 0.08em; }

/* ============================================================
   Form Builder — inline question cards + palette (WS-7, mock)
   ============================================================ */
.fb-sec-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 18px;
}
.fb-sec-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--paper2), var(--card));
}
.fb-sec-badge {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 7px;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}
.fb-sec-body {
    padding: 16px;
    background: var(--paper);
}
.fb-grip { color: var(--muted); opacity: 0.6; cursor: grab; }

.fbq-card {
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--card);
    overflow: hidden;
    margin-bottom: 12px;
}
.fbq-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--paper2);
}
.fbq-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink2);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 3px 9px;
}
.fbq-body { padding: 14px 16px 16px; }
.fbq-num { font-size: 12.5px; font-weight: 800; color: var(--muted); width: 18px; flex-shrink: 0; }
.fbq-icon-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 14px; padding: 4px; }
.fbq-icon-btn:hover { color: var(--ink); }
.fbq-scalebox {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1.5px solid var(--line);
    background: var(--paper2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}
.fbq-drop {
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--paper2);
    padding: 0 14px;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
}
.fb-flags { display: inline-flex; gap: 12px; }
.fb-flags label { font-size: 12px; font-weight: 600; color: var(--sub); margin: 0; display: inline-flex; align-items: center; gap: 5px; }
.fb-flags input { accent-color: var(--green); }

.fb-palette {
    border: 1.5px dashed var(--line);
    border-radius: 13px;
    padding: 14px 16px;
    background: var(--paper2);
}
.fb-palette-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 11px;
}
.fb-palette-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 13px;
    border-radius: 9px;
    background: var(--card);
    border: 1px solid var(--line);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink2);
}
.fb-palette-btn:hover { border-color: var(--muted); }

/* Job detail — collapsible details disclosure */
.jd-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.jd-summary::-webkit-details-marker {
    display: none;
}
.jd-chev {
    transition: transform 0.15s ease;
}
.jd-details[open] .jd-chev {
    transform: rotate(90deg);
}

/* Job detail tabs — same segmented ink-pill style as the dashboard */
/* Job-detail tabs — underline style with mono count chips (mock
   foundry-job-detail.jsx). A custom control (html.Button pills), not dbc.Tabs. */
.jd-tabs {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-right: 120px; /* clear the absolute "Add Item" button */
}
.jd-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 18px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--sub);
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease;
    white-space: nowrap;
}
.jd-tab-btn:hover { color: var(--ink); }
.jd-tab-btn.active {
    color: var(--ink);
    font-weight: 700;
    border-bottom-color: var(--ink);
}
.jd-tab-btn:focus,
.jd-tab-btn:focus-visible { outline: none; box-shadow: none; }
.jd-tab-count {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 100px;
    padding: 3px 7px;
    background: var(--paper2);
    color: var(--muted);
}
.jd-tab-btn.active .jd-tab-count {
    background: #e9e5dc;
    color: var(--ink);
}

/* Feedback tab: list + rollup rail (mock's 1fr / 320px grid). */
.jd-feedback-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 980px) {
    .jd-feedback-grid { grid-template-columns: 1fr; }
}

/* Inventory overview — All Items / Assignments sub-tabs (mock d3-inv-overview).
   Reuses the .jd-tab-btn underline pill. */
.inv-subtabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}

/* Inventory Assign/Demo/Transfer modal chrome (mock foundry-inventory-v2.jsx):
   rounded card, topo-gradient hero with X close + stat strip, paper footer. */
.inv-modal-content {
    border-radius: 20px !important;
    overflow: hidden;
    border: none !important;
    box-shadow: 0 24px 60px rgba(16, 32, 45, 0.28);
}
.inv-modal-hero {
    position: relative;
    background: linear-gradient(160deg, var(--rail1, #18222c), var(--rail2, #0d5c63));
    color: #fff;
    padding: 22px 26px;
    overflow: hidden;
}
.inv-modal-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 88% -10%, rgba(255, 255, 255, 0.14), transparent 60%);
    pointer-events: none;
}
.inv-modal-hero > * { position: relative; }
.imh-eyebrow {
    font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 7px;
}
.imh-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.imh-sub { font-size: 13px; color: rgba(255, 255, 255, 0.62); margin-top: 5px; }
.inv-modal-x {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 17px; border: none; cursor: pointer;
    background: rgba(255, 255, 255, 0.14); display: inline-flex; align-items: center;
    justify-content: center; transition: background 0.12s ease;
}
.inv-modal-x:hover { background: rgba(255, 255, 255, 0.26); }
.inv-modal-stats { display: flex; gap: 26px; margin-top: 16px; }
.inv-modal-stats:empty { display: none; }
.ims-v { font-size: 14.5px; font-weight: 800; color: #fff; }
.ims-l {
    font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px;
}
.inv-modal-content .modal-footer {
    background: var(--paper2);
    border-top: 1px solid var(--line);
    padding: 14px 22px;
}
.inv-modal-cancel, .inv-modal-confirm { font-weight: 700; border-radius: 9px; }

/* Two-column modal body: scrollable main + right settings rail */
.inv-modal-split { display: flex; align-items: stretch; }
.inv-modal-split > *:first-child { padding: 18px 20px; overflow: auto; max-height: 60vh; }
.inv-modal-rail {
    width: 300px; flex-shrink: 0; background: var(--paper2);
    border-left: 1px solid var(--line); padding: 18px 20px; overflow: auto; max-height: 60vh;
}
@media (max-width: 720px) {
    .inv-modal-split { flex-direction: column; }
    .inv-modal-rail { width: auto; border-left: none; border-top: 1px solid var(--line); }
}

/* Form-library card list — a dcc.RadioItems whose labels render as cards. */
.ffc-list { margin-top: 8px; }
.ffc-radio { display: flex; flex-direction: column; gap: 10px; }
.ffc-radio input[type="radio"] {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.ffc-label {
    display: flex !important; align-items: flex-start; border: 1.5px solid var(--line);
    border-radius: 13px; padding: 13px 15px; cursor: pointer; margin: 0;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.ffc-label:hover { border-color: var(--line-strong, #c6cfd8); }
.ffc-label:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
/* Newer Dash renders each option as <label class="dash-options-list-option">
   holding the radio in a wrapper span and the card (.ffc-label) in a SIBLING
   span — so the card never contains the input and the rule above can't match.
   Mark the selected card from the option's own state instead, and let the
   card fill the row. */
.ffc-radio .dash-options-list-option { padding: 0; width: 100%; }
.ffc-radio .dash-options-list-option-wrapper { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.ffc-radio .dash-options-list-option-text.ffc-label { flex: 1; min-width: 0; }
.ffc-radio .dash-options-list-option.selected .ffc-label,
.ffc-radio .dash-options-list-option[aria-selected="true"] .ffc-label,
.ffc-radio .dash-options-list-option:has(input:checked) .ffc-label {
    border-color: var(--green); background: var(--green-soft);
}
.ffc { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.ffc-icon {
    width: 30px; height: 30px; border-radius: 8px; background: var(--paper2);
    border: 1px solid var(--line); display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.ffc-name { font-size: 14px; font-weight: 800; color: var(--ink); }
.ffc-desc { font-size: 12.5px; color: var(--sub); line-height: 1.5; margin-top: 5px; }
.ffc-group {
    font-size: 11px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px;
}

/* On-Snow "Add to Home Screen" hint banner (assets/pwa_install.js). The On-Snow
   surface is always dark, so this uses explicit dark chrome rather than tokens. */
.a2hs-banner {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 4000;
    width: calc(100% - 28px);
    max-width: 440px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #17171a;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
    animation: a2hs-rise 0.28s ease-out;
}
@keyframes a2hs-rise {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
.a2hs-ico img { display: block; width: 40px; height: 40px; border-radius: 10px; }
.a2hs-txt { flex: 1; min-width: 0; }
.a2hs-title { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.a2hs-body { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); margin-top: 2px; line-height: 1.4; }
.a2hs-body b { color: #fff; font-weight: 700; }
.a2hs-share { display: inline-flex; align-items: center; vertical-align: -3px; color: #4cc978; }
.a2hs-install {
    flex-shrink: 0; border: none; background: #4cc978; color: #0e0e0c;
    font-weight: 800; font-size: 13px; border-radius: 10px; padding: 9px 16px; cursor: pointer;
}
.a2hs-close {
    flex-shrink: 0; width: 26px; height: 26px; border: none; background: rgba(255, 255, 255, 0.10);
    color: #fff; font-size: 16px; line-height: 1; border-radius: 50%; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .a2hs-banner { animation: none; } }

/* ── CLS fixes — reserve space for dynamic containers ─────────────────────
   Without min-height, these containers start at 0px and jump when Dash
   populates them, causing large Cumulative Layout Shift scores.          */

/* Jobs table on dashboard */
#jobs-table-container            { min-height: 200px; }

/* Board models results */
#bm-table-container              { min-height: 200px; }

/* Spec config cards */
#sc-tables                       { min-height: 100px; }

/* Admin page dynamic areas */
#ac-table-container,
#rl-lists-container              { min-height: 80px; }

/* Model detail content */
#model-detail-content            { min-height: 200px; }

/* Job detail dynamic sections */
#job-detail-content              { min-height: 120px; }

/* ── Loading overlay — pointer events must not block body when overlay
   is being cleared by foundry_perf.js                                    */
._dash-loading {
    margin: 40px auto;
}

._dash-loading-callback {
    background-color: transparent !important;
}

/* Override Dash default purple spinner color */
._dash-loading ._dash-loading-spinner,
.dash-spinner-container .dash-spinner,
.dash-loading-callback,
[data-dash-is-loading="true"] {
    color: #9ca3af !important;
}

._dash-loading ._dash-loading-spinner circle,
.dash-loading-callback circle {
    stroke: #9ca3af !important;
}

/* Burton mountain watermark inside table containers */
[id$="-table-container"] {
    position: relative;
}

[id$="-table-container"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/burton-mtn-watermark.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 65%;
    opacity: 0.06;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

/* Keep table content above the watermark */
[id$="-table-container"] > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   On-Snow field-tester PWA (G-3) — mobile shell + screens
   ============================================================ */
/* Surface switch: on /snow, hide the desktop rail and reframe #page-content as a
   centered mobile column. !important beats the inline margin from apply_nav_state. */
#app-root.on-snow #app-sidebar { display: none !important; }
#app-root.on-snow #page-content { margin: 0 auto !important; max-width: 480px;
  padding: 0 0 84px !important; background: var(--paper); min-height: 100vh;
  box-shadow: 0 0 40px rgba(0,0,0,0.06); }

/* bottom-tab nav — hidden off /snow, shown as a fixed bar on it */
.snow-bottomnav { display: none; }
#app-root.on-snow .snow-bottomnav { position: fixed; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 100%; max-width: 480px; display: flex;
  background: var(--card); border-top: 1px solid var(--line);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); z-index: 50; }
.snow-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; }
.snow-tab i { font-size: 18px; }
.snow-tab.active { color: var(--green-dk, #0f9d6e); }

/* dark wavy header */
.snow-header { background: #111110; color: #eef2f6; padding: 46px 20px 20px; position: relative;
  overflow: hidden; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }
.snow-header::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 130% at 85% -20%, rgba(22,163,74,0.18), transparent 55%); }
.snow-head-top { display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #b9c4cf; margin-bottom: 14px; }
.snow-brand { display: flex; align-items: center; font-weight: 700; }
.snow-welcome { font-size: 13px; color: #b9c4cf; margin-bottom: 2px; }
.snow-title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.snow-stats { display: flex; gap: 28px; margin-top: 18px; }
.snow-stat-n { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.snow-stat-l { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8f9ba8; margin-top: 2px; }

/* body + product cards */
.snow-body { padding: 18px 16px; }
.snow-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 4px 2px 12px; }
.snow-card-link { text-decoration: none; }
.snow-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden; margin-bottom: 12px; }
.snow-card-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 8px; }
.snow-card-thumb { width: 44px; height: 44px; border-radius: 10px; background: var(--paper2);
  border: 1px solid var(--line); flex-shrink: 0; }
.snow-card-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.snow-card-sub { font-size: 12.5px; color: var(--sub); margin-top: 1px; }
.snow-card-desc { font-size: 12.5px; color: var(--ink2); margin-top: 2px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.snow-chip { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; white-space: nowrap; }
.snow-chip.progress { background: var(--amber-bg, #fdf0d6); color: var(--amber-fg, #8a5a00); }
.snow-chip.overdue { background: var(--red-bg, #fbe3e0); color: var(--red-dk, #b0362b); }
.snow-chip.todo { background: var(--blue-soft, #eef2fe); color: var(--blue-dk, #1d4fd8); }
.snow-chip.done { background: var(--green-soft, #dcefe5); color: var(--green-dk, #0f9d6e); }
/* desktop tester profile — clickable assignment-history rows (drill into feedback) */
.tm-assign-link { display: flex; border-radius: 8px; transition: background 0.12s ease; }
.tm-assign-link:hover { background: var(--paper2); }
.snow-card-metarow { display: flex; gap: 16px; padding: 2px 16px 12px; }
.snow-card-meta { font-size: 12px; color: var(--sub); }
.snow-card-meta.overdue { color: var(--red-dk, #b0362b); font-weight: 600; }
.snow-card-cta { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid var(--line-soft); color: var(--green-dk, #0f9d6e);
  font-size: 13px; font-weight: 700; }
.snow-card-main { display: block; color: inherit; }
.snow-card-action { display: inline-flex; align-items: center; color: var(--green-dk, #0f9d6e);
  text-decoration: none; font-weight: 700; padding: 4px 0; }
.snow-card-action:hover { text-decoration: underline; }
.snow-empty { padding: 40px 24px; text-align: center; color: var(--muted); }

/* On-Snow profile screen */
.snow-avatar { width: 52px; height: 52px; border-radius: 12px; background: rgba(255,255,255,0.12);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800;
  font-size: 18px; flex-shrink: 0; }
.snow-role-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
  color: #b7f7d8; background: rgba(22,163,74,0.22); border: 1px solid rgba(22,163,74,0.45);
  padding: 2px 9px; border-radius: 100px; margin-top: 4px; }
.snow-info-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden; margin-bottom: 12px; }
.snow-card-head { padding: 11px 16px; background: var(--paper2); border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sub); }
.snow-f-row { display: flex; align-items: baseline; gap: 16px; padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft); }
.snow-f-row:last-child { border-bottom: 0; }
.snow-f-label { font-size: 13px; color: var(--sub); flex-shrink: 0; }
.snow-f-value { font-size: 14px; color: var(--ink); font-weight: 600; margin-left: auto; text-align: right; }
.snow-tag { font-size: 12px; font-weight: 600; color: var(--ink2); background: var(--paper2);
  border: 1px solid var(--line); padding: 4px 11px; border-radius: 100px; }
.snow-signout { display: block; text-align: center; padding: 13px; margin-top: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: var(--shadow); }
/* App Switcher (mock screen 02) — chrome-free full-screen chooser */
.app-switch #app-sidebar { display: none !important; }
.app-switch .snow-bottomnav { display: none !important; }
.app-switch #page-content { margin: 0 !important; padding: 0 !important; min-height: 100vh; }
.switch-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; background: var(--paper); padding: 40px 20px; }
.switch-head { text-align: center; max-width: 520px; margin-bottom: 26px; }
.switch-brand { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: var(--muted);
  text-transform: uppercase; margin-bottom: 18px; }
.switch-h1 { font-size: 28px; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -0.02em; }
.switch-role { display: inline-block; margin-top: 10px; font-size: 11.5px; font-weight: 700;
  color: var(--green-dk, #0f9d6e); background: var(--green-soft); border: 1px solid #cdeee0;
  padding: 3px 11px; border-radius: 100px; }
.switch-sub { font-size: 14px; color: var(--sub); margin: 14px 0 0; }
.switch-cards { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 460px; }
.switch-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease; }
.switch-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(17,17,15,.12); }
.switch-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 19px; flex-shrink: 0; }
.switch-card-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.switch-card-desc { font-size: 12.5px; color: var(--sub); margin-top: 3px; line-height: 1.4; }
.switch-signout { margin-top: 24px; font-size: 13px; font-weight: 700; color: var(--sub); text-decoration: none; }
.switch-help { display: inline-flex; align-items: center; margin-top: 22px; font-size: 13px;
  font-weight: 700; color: var(--ink2); text-decoration: none; }
.switch-help:hover { color: var(--ink); }
/* profile: section header with an Edit affordance (WS-5 render pass; Edit wired next) */
.snow-card-head-row { display: flex; align-items: center; justify-content: space-between; }
.snow-edit-stub { font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--green-dk, #0f9d6e); }
.snow-chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; }
/* profile: Preferred Products — one framed block per gear category */
.snow-gear-list { padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.snow-gear-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); }
.snow-gear-head { padding: 9px 14px; background: var(--paper2); border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 800; color: var(--ink); }
.snow-gear-body .snow-f-row { padding: 9px 14px; }
/* board detail */
/* staff "R&D" jump — only on the On-Snow surface (see app.py serve_layout) */
.snow-switch-fab { display: none; }
/* Pinned to the 480px On-Snow column's top-right corner (over the dark header),
   not the window's — on a wide desktop window "right: 16px" put the white pill out
   on the light page background, where it was effectively invisible. */
/* top: below the iPhone status bar / notch — the installed app draws under it
   (safe-area inset is 0 on Android and in normal browser tabs, so 16px there). */
.on-snow .snow-switch-fab { display: inline-flex; align-items: center; position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: max(16px, calc(50vw - 240px + 16px));
  z-index: 60; padding: 7px 14px; border-radius: 100px; background: rgba(255,255,255,0.14); color: #fff;
  font-size: 12.5px; font-weight: 700; text-decoration: none; border: 1px solid rgba(255,255,255,0.28); }
.on-snow .snow-switch-fab:hover { background: rgba(255,255,255,0.26); }
/* The Parking-Lot QR screens are light and carry their own back arrow — the white
   pill would sit, barely visible, over their header. */
.on-snow:has(.qr-pick) .snow-switch-fab,
.on-snow:has(.qr-display) .snow-switch-fab { display: none; }
.snow-back { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 10px; background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; font-size: 14px; }
.snow-back:hover { background: rgba(255,255,255,0.2); }
.snow-primary-btn { display: flex; align-items: center; justify-content: center; padding: 15px; margin-bottom: 12px;
  background: var(--forge, #16a34a); color: #fff; font-weight: 800; font-size: 15px; border-radius: 14px;
  text-decoration: none; box-shadow: var(--shadow); }
.snow-primary-btn:hover { filter: brightness(1.05); }
.snow-act { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); }
.snow-act:last-child { border-bottom: 0; }
.snow-act-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--paper2); display: flex;
  align-items: center; justify-content: center; font-size: 15px; color: var(--sub); flex-shrink: 0; }
.snow-act-label { flex: 1; font-size: 14px; font-weight: 600; }
.snow-act-soon { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); background: var(--paper2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 100px; }
.snow-act.disabled { opacity: 0.6; }
/* feedback capture (WS-3) */
.snow-q { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.snow-q:last-child { border-bottom: 0; }
.snow-q-label { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.snow-q-hint { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.snow-textarea { width: 100%; min-height: 80px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 14px; background: var(--card); color: var(--ink); font-family: inherit; }
.snow-choice label { font-size: 14px; color: var(--ink2); cursor: pointer; }
.snow-choice input[type=radio], .snow-choice input[type=checkbox] { margin-right: 8px; accent-color: var(--forge, #16a34a); }
.snow-upload { border: 1.5px dashed var(--line); border-radius: 12px; padding: 16px; text-align: center;
  color: var(--sub); font-size: 14px; font-weight: 700; cursor: pointer; background: var(--paper2); }
.snow-upload:hover { border-color: var(--forge, #16a34a); color: var(--ink); }
.snow-photo-stat { font-size: 13px; color: var(--green-dk, #0f9d6e); margin-top: 8px; font-weight: 600; }
/* feedback READ view (mirrors desktop response) */
.snow-fb-value { font-size: 14.5px; color: var(--ink); margin-top: 2px; }
.snow-fb-answer { font-weight: 600; color: var(--ink); white-space: pre-wrap; }
.snow-fb-empty { color: var(--muted); font-style: italic; }
.snow-fb-comment { font-size: 12.5px; color: var(--sub); font-style: italic; margin-top: 6px; }
.snow-fb-notes { padding: 12px 16px; font-size: 13.5px; color: var(--ink2); white-space: pre-wrap; line-height: 1.5; }
.snow-prefill-note { display: flex; align-items: center; font-size: 12.5px; color: var(--green-dk, #0f9d6e);
  background: var(--green-soft, #dcefe5); border: 1px solid #cdeee0; border-radius: 12px;
  padding: 11px 14px; margin-bottom: 12px; line-height: 1.35; }
/* activity · session history rows */
.snow-act-row { display: block; padding: 20px 18px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line-soft); }
.snow-act-row:last-child { border-bottom: 0; }
.snow-act-head { display: flex; align-items: baseline; gap: 12px; }
.snow-act-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.snow-act-date { font-size: 12px; color: var(--sub); margin-top: 4px; }
.snow-act-hrs { font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; margin-left: auto; }
.snow-act-conds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.snow-act-notes { font-size: 12.5px; color: var(--ink2); margin-top: 10px; line-height: 1.4; }
.snow-conds label { display: inline-flex; align-items: center; font-size: 13.5px; color: var(--ink2);
  border: 1px solid var(--line); border-radius: 100px; padding: 6px 12px; margin: 0 8px 8px 0; cursor: pointer; }
.snow-conds input[type=checkbox] { margin-right: 7px; accent-color: var(--forge, #16a34a); }
/* mobile Dual Login (mock screen 01) */
.mlogin-screen { position: fixed; inset: 0; z-index: 9999; background: var(--paper);
  overflow-y: auto; display: flex; flex-direction: column; }
.mlogin-head { background: #111110; color: #fff; padding: 64px 24px 44px; text-align: center; }
.mlogin-brand { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; display: flex;
  align-items: center; justify-content: center; }
.mlogin-tag { font-size: 13px; color: #b9c4cf; margin-top: 10px; font-weight: 600; }
.mlogin-body { padding: 22px 20px 44px; max-width: 460px; width: 100%; margin: 0 auto; }
.mlogin-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 20px; }
.mlogin-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; }
.mlogin-label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.mlogin-input { width: 100%; padding: 22px 18px; border: 1px solid var(--line); border-radius: 12px;
  font-size: 17px; line-height: 1.2; background: var(--card); color: var(--ink); margin-bottom: 14px; }
.mlogin-btn { display: block; text-decoration: none; text-align: center; border-radius: 12px; padding: 14px; }
.mlogin-btn.green { background: var(--forge, #16a34a); color: #fff; }
.mlogin-btn.dark { background: #111110; color: #fff; font-weight: 800; font-size: 15px; }
.mlogin-btn-title { font-size: 15px; font-weight: 800; }
.mlogin-btn-sub { font-size: 11.5px; font-weight: 500; opacity: 0.85; margin-top: 3px; }
.mlogin-hint { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 12px; line-height: 1.4; }
.mlogin-or { display: flex; align-items: center; gap: 12px; margin: 18px 2px; }
.mlogin-or-line { flex: 1; height: 1px; background: var(--line); }
.mlogin-or-text { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: 0.1em; }
.snow-edit-stub { cursor: pointer; }
.snow-empty-row { padding: 12px 16px; font-size: 12.5px; color: var(--muted); font-style: italic; }
/* profile Edit modal (full-screen sheet) */
.snow-edit-body { background: var(--paper); padding: 8px 16px 24px; }
.snow-edit-sec { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 20px 0 8px; }
.snow-edit-field { margin-bottom: 12px; }
.snow-edit-label { display: block; font-size: 12.5px; color: var(--sub); font-weight: 600; margin-bottom: 4px; }
.snow-in { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; background: var(--card); color: var(--ink); }
.snow-dd { font-size: 14px; }
.snow-dd .Select-control, .snow-dd .Select-menu-outer { border-radius: 10px; }
.snow-edit-gear { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 4px;
  margin-bottom: 12px; background: var(--card); }
.snow-edit-gear-head { font-size: 12.5px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.snow-edit-status { font-size: 12.5px; color: var(--green-dk, #0f9d6e); font-weight: 700; margin-right: auto; }
.snow-edit-cancel { padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; }
.snow-edit-save { padding: 10px 20px; border-radius: 10px; border: 0; background: var(--forge, #16a34a);
  color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; margin-left: 8px; }

/* ── On-Snow · Employee "Parking Lot" QR generator (FR-11.1) ───────────────── */
.qr-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px; }
/* screen 1 — pick inventory */
.qr-pick { background: var(--paper); }
.qr-topback { background: var(--card); border: 1px solid var(--line); color: var(--ink);
  margin: 16px 0 0 16px; }
.qr-pick-head { padding: 10px 18px 0; }
.qr-pick-head .snow-title { font-size: 24px; margin-top: 2px; }
.qr-sub { font-size: 13px; color: var(--sub); margin-top: 4px; }
.qr-search { width: 100%; height: 42px; margin: 14px 0 4px; padding: 0 14px; font-size: 14px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
/* filters */
.qr-filters { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.qr-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.qr-pills::-webkit-scrollbar { display: none; }
.qr-pills label { display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer;
  padding: 6px 13px; border: 1.5px solid var(--line); border-radius: 100px; background: var(--card);
  font-size: 13px; font-weight: 700; color: var(--ink2); }
.qr-pills input { position: absolute; opacity: 0; width: 0; height: 0; }
.qr-pills label:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
.qr-filter-row2 { display: flex; align-items: center; gap: 12px; }
.qr-mini-dd { flex: 1; font-size: 13px; }
.qr-mini-dd .Select-control { border-radius: 11px !important; min-height: 40px; }
.qr-active-toggle { display: flex; align-items: center; white-space: nowrap; }
.qr-active-toggle label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  font-weight: 700; color: var(--ink2); cursor: pointer; }
.qr-inv-count { margin: 12px 2px 0; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--muted); }
.qr-inv-list { padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.qr-inv-card { display: flex; align-items: center; gap: 13px; background: var(--card);
  border: 1.5px solid var(--line); border-radius: 16px; padding: 13px 15px; text-decoration: none;
  box-shadow: var(--shadow); }
.qr-inv-card:hover { border-color: var(--green-dk, #0f9d6e); }
.qr-inv-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--paper2);
  display: flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
.qr-inv-body { flex: 1; min-width: 0; }
.qr-inv-head { display: flex; align-items: center; gap: 8px; }
.qr-inv-name { font-size: 15px; font-weight: 800; color: var(--ink); }
.qr-inv-metarow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.qr-inv-sku { font-size: 12px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.qr-inv-meta { font-size: 12px; color: var(--muted); }
.qr-inv-anon { font-size: 12px; color: var(--green-dk, #0f9d6e); font-weight: 700; }
/* screen 2 — setup sheet */
.qr-field { margin-bottom: 15px; }
.qr-label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.qr-label-opt { font-weight: 500; color: var(--muted); }
.qr-dropdown .Select-control { border-radius: 13px !important; min-height: 48px; }
.qr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qr-input { width: 100%; height: 48px; padding: 0 14px; font-size: 14px; border: 1.5px solid var(--line);
  border-radius: 13px; background: var(--card); color: var(--ink); }
.qr-toggle { display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; margin-bottom: 15px; }
.qr-toggle-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.qr-toggle-sub { font-size: 12.5px; color: var(--sub); margin-top: 2px; }
.qr-switch { display: flex; align-items: center; }
.qr-switch label { margin: 0; }
.qr-textarea { width: 100%; min-height: 70px; padding: 11px 14px; font-size: 13.5px; border: 1.5px solid var(--line);
  border-radius: 13px; background: var(--card); color: var(--ink); font-family: inherit; }
.qr-waiver-note { background: #fdf3d8; border: 1px solid #f3e2b8; color: #8a5a00; border-radius: 12px;
  padding: 11px 14px; font-size: 12.5px; line-height: 1.45; margin-bottom: 16px; }
.qr-cta-hint { text-align: center; font-size: 12.5px; color: var(--muted); padding: 0 16px 24px; }
/* screen 3 — full-screen QR display */
.qr-display { background: var(--paper2); display: flex; flex-direction: column; }
.qr-disp-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 4px; }
.qr-disp-head .snow-back { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.qr-disp-head-c { text-align: center; }
.qr-disp-title { font-size: 15px; font-weight: 800; color: var(--ink); }
.qr-disp-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 28px; gap: 18px; }
.qr-card { background: #fff; border-radius: 24px; padding: 22px; width: 100%;
  box-shadow: 0 8px 40px rgba(17,17,15,0.12); }
.qr-img { display: block; width: 100%; height: auto; border-radius: 6px; }
.qr-img-missing { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; aspect-ratio: 1; }
.qr-card-meta { margin-top: 16px; text-align: center; }
.qr-card-caption { font-size: 13px; font-weight: 800; color: var(--ink); }
.qr-card-url { font-size: 11.5px; color: var(--muted); margin-top: 4px; word-break: break-all;
  font-family: ui-monospace, Menlo, monospace; }
.qr-hold-wrap { text-align: center; }
.qr-hold { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.qr-disp-actions { display: flex; gap: 10px; padding: 0 18px; }
.qr-action-btn { flex: 1; height: 48px; display: flex; align-items: center; justify-content: center;
  gap: 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
  color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.qr-done-link { display: block; text-align: center; padding: 18px; color: var(--muted);
  font-weight: 700; font-size: 14px; text-decoration: none; }

/* ── Proxy feedback entry (Tester Admin submits on behalf of a tester) ─────── */
.fe-back-link { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 13px;
  font-weight: 700; text-decoration: none; }
.fe-back-link:hover { background: var(--paper2); }
.fe-banner { display: flex; align-items: flex-start; gap: 4px; background: var(--blue-soft, #eef2fe);
  border: 1px solid #d6e0fb; color: var(--ink2); border-radius: 12px; padding: 12px 15px;
  font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }
.fe-prefill { background: #fdf3d8; border: 1px solid #f3e2b8; color: #8a5a00; border-radius: 10px;
  padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.fe-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 6px 18px 14px; margin-bottom: 14px; }
.fe-card-head { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding: 14px 0 6px; }
.fe-empty { padding: 36px 20px; text-align: center; color: var(--muted); background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; }
.fe-actions { display: flex; align-items: center; gap: 14px; margin: 4px 0 24px; }
.fe-status { font-size: 13px; color: var(--red-dk, #b0362b); font-weight: 600; }
/* the reused On-Snow question controls sit fine on desktop; give them room */
.fe-card .snow-q { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.fe-card .snow-q:last-child { border-bottom: 0; }
.fe-card .snow-q-label { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.fe-card .snow-textarea, .fe-card .snow-in { width: 100%; max-width: 520px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
  font-size: 14px; font-family: inherit; }

/* ── On-Snow · Product Detail (mock screen 05) ─────────────────────────────── */
.bd-subtitle { font-size: 13px; color: #b9c4cf; margin-top: 6px; font-weight: 500; }
/* header overflow (⋯) menu — native <details> popover */
.bd-menu-wrap { position: relative; }
.bd-menu-wrap > summary { list-style: none; cursor: pointer; }
.bd-menu-wrap > summary::-webkit-details-marker { display: none; }
.bd-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 9px; background: rgba(255,255,255,0.12); color: #fff; font-size: 16px; }
.bd-menu-btn:hover { background: rgba(255,255,255,0.2); }
.bd-menu { position: absolute; top: 42px; right: 0; z-index: 50; min-width: 210px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: 0 10px 34px rgba(17,17,15,0.22); display: flex; flex-direction: column; }
.bd-menu-item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 9px;
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.bd-menu-item i { width: 16px; text-align: center; color: var(--muted); }
.bd-menu-item:hover { background: var(--paper2); }
.bd-menu-item.danger { color: #d0362b; } .bd-menu-item.danger i { color: #d0362b; }
/* status badge */
.bd-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700;
  padding: 3px 11px; border-radius: 100px; margin-bottom: 12px; }
.bd-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bd-badge.progress { background: rgba(217,150,7,0.22); color: #f0b34a; }
.bd-badge.done { background: rgba(22,163,74,0.22); color: #7ee0a8; }
.bd-badge.todo { background: rgba(255,255,255,0.14); color: #cdd6df; }
/* rolled-up stat cards */
.bd-stats { display: flex; gap: 12px; margin-bottom: 14px; }
.bd-stat-card { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 15px; box-shadow: var(--shadow); }
.bd-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); }
.bd-stat-value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink);
  margin-top: 4px; font-variant-numeric: tabular-nums; }
.bd-stat-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* section head edit / inline link */
.bd-edit-link { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700;
  color: var(--green-dk, #0f9d6e); text-decoration: none; }
/* free-text sections (Initial Reaction, Notes) */
.bd-freetext { padding: 12px 16px; font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
.bd-freetext.muted { color: var(--muted); font-style: italic; }
/* recent days session rows */
.bd-sess-row { padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.bd-sess-top { display: flex; align-items: baseline; gap: 12px; }
/* editable Recent Days rows (tap to edit the session) */
.bd-sess-link { display: block; text-decoration: none; color: inherit; }
.bd-sess-link:hover, .bd-sess-link:active { background: var(--paper2); }
.bd-sess-edit { margin-left: auto; font-size: 12px; color: var(--muted); }
.snow-danger-link { display: flex; align-items: center; justify-content: center; width: 100%;
  margin-top: 10px; padding: 12px; background: transparent; border: 1px solid var(--line);
  border-radius: 14px; color: var(--red-dk, #b0362b); font-size: 14px; font-weight: 700; cursor: pointer; }
.bd-sess-date { font-size: 14px; font-weight: 700; color: var(--ink); }
.bd-sess-hrs { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-left: auto; }
.bd-sess-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.bd-sess-note { font-size: 13px; color: var(--sub, #6f6c64); margin-top: 7px; line-height: 1.5; }

/* ── Dashboard filter bar — compact pills (mock) ───────────────────────────── */
.dash-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.filter-pill { display: inline-flex; align-items: center; gap: 3px; height: 40px; padding: 0 8px 0 14px;
  border: 1px solid var(--line-strong, #d3cdbd); border-radius: 100px; background: var(--card); }
.filter-pill:focus-within { border-color: var(--ink2); }
.fp-label { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* dcc.Dropdown is Dash's Radix trigger (.dash-dropdown) — style borderless in the pill */
.filter-pill .dash-dropdown { border: 0 !important; background: transparent !important; box-shadow: none !important;
  outline: none !important; height: 36px !important; min-height: 36px !important; padding: 0 !important;
  border-radius: 0 !important; cursor: pointer; }
.filter-pill .dash-dropdown:hover, .filter-pill .dash-dropdown:focus,
.filter-pill .dash-dropdown[data-state="open"] { border: 0 !important; box-shadow: none !important; outline: none !important; }
.filter-pill .dash-dropdown-trigger { padding: 0 2px 0 6px !important; gap: 3px !important; }
.filter-pill .dash-dropdown-value, .filter-pill .dash-dropdown-placeholder {
  color: var(--ink) !important; font-weight: 600 !important; font-size: 13.5px !important; }
.filter-pill .dash-dropdown-trigger-icon { color: var(--muted); flex-shrink: 0; }
/* search pill — fixed width; actions hug the right edge (mock layout) */
.fp-search { padding-left: 14px; flex: 0 1 190px; min-width: 150px; }
.fp-search-ico { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.fp-search-input { border: 0 !important; background: transparent !important; outline: none !important;
  font-size: 13.5px; color: var(--ink); width: 100%; flex: 1; padding: 0 8px; height: 36px; font-family: inherit; }
.fp-search-input::placeholder { color: var(--muted); }
/* action buttons */
.dash-filter-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.dash-btn-search { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 20px;
  background: var(--ink); border: 1px solid var(--ink); border-radius: 100px; color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; }
.dash-btn-search:hover { filter: brightness(1.1); }
.dash-btn-reset { display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  background: var(--card); border: 1px solid var(--line-strong, #d3cdbd); border-radius: 100px;
  color: var(--ink2); font-size: 13px; font-weight: 600; cursor: pointer; }
.dash-btn-reset:hover { background: var(--paper2); }
/* date-picker pills (On-Snow Feedback filter) — flatten react-dates into the pill */
.filter-pill.fp-date { padding-right: 6px; }
.filter-pill .SingleDatePicker,
.filter-pill .SingleDatePickerInput { background: transparent !important; border: 0 !important; }
.filter-pill .DateInput { background: transparent !important; width: 96px; }
.filter-pill .DateInput_input { border: 0 !important; background: transparent !important;
  box-shadow: none !important; font-size: 13.5px; font-weight: 600; color: var(--ink);
  padding: 0 4px; height: 36px; font-family: inherit; line-height: 36px; }
.filter-pill .DateInput_input::placeholder { color: var(--muted); font-weight: 600; }
.filter-pill .DateInput_input__focused { border-bottom: 0 !important; }

/* ── In-app Help / knowledge base (docs/user-guide → /help) ───────────────── */

/* rail: Help sits in its own group below the work areas */
.nav-list-help { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); }

/* index */
.help-wrap { max-width: 1040px; }
.help-header-meta { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--sub); background: var(--paper2); border: 1px solid var(--line); padding: 3px 9px;
  border-radius: 100px; }
.help-search { position: relative; margin: 4px 0 22px; }
/* z-index: the input is later in the DOM, so its opaque background would
   otherwise paint straight over the icon. */
.help-search-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  z-index: 2; color: var(--muted); font-size: 14px; pointer-events: none; }
.help-search-input { width: 100%; height: 50px; padding: 0 16px 0 42px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink);
  box-shadow: var(--shadow); outline: none; }
/* :focus-visible too — that's the one Chrome draws its own violet ring on. */
.help-search-input:focus, .help-search-input:focus-visible { outline: none;
  border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.help-section-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px; }

.help-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.help-card-link { text-decoration: none; }
.help-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); height: 100%; }
.help-card:hover { border-color: var(--muted); transform: translateY(-1px); transition: all .15s ease; }
.help-card-dim { opacity: 0.62; }
.help-card-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--paper2); display: flex;
  align-items: center; justify-content: center; font-size: 16px; color: var(--sub); flex-shrink: 0; }
.help-card-body { flex: 1; min-width: 0; }
.help-card-head { display: flex; align-items: center; gap: 8px; }
.help-card-title { font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.help-card-badge { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sub); background: var(--paper2); border: 1px solid var(--line); padding: 2px 7px;
  border-radius: 100px; }
.help-card-sub { font-size: 12.5px; color: var(--sub); line-height: 1.45; margin-top: 3px; }
.help-card-chev { color: var(--muted); font-size: 12px; flex-shrink: 0; }

/* search results */
.help-hit-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.help-hit-link { text-decoration: none; }
.help-hit { padding: 13px 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; }
.help-hit:hover { border-color: var(--green); }
.help-hit-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.help-hit-guide { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--green-dk); }
.help-hit-sep { font-size: 10px; color: var(--muted); }
.help-hit-section { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.help-hit-snippet { font-size: 12.5px; color: var(--sub); line-height: 1.5; }
.help-noresult { padding: 22px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; margin-bottom: 26px; }
.help-noresult-title { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 5px; }
.help-noresult-body { font-size: 12.5px; color: var(--sub); line-height: 1.5; }
.help-empty { padding: 60px 24px; text-align: center; }
.help-empty-title { color: var(--ink); font-size: 18px; font-weight: 800; margin: 14px 0 6px; }
.help-empty-body { color: var(--sub); font-size: 13.5px; max-width: 440px; margin: 0 auto; line-height: 1.6; }
.help-back, .help-back-btn { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink2); font-size: 12.5px;
  font-weight: 700; text-decoration: none; }
.help-back-btn:hover { border-color: var(--muted); }

/* article — content column + sticky contents rail */
.help-article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 218px; gap: 40px;
  align-items: start; max-width: 1040px; }
.help-article { min-width: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 10px 34px 34px; box-shadow: var(--shadow); }
.help-toc { position: sticky; top: 24px; }
.help-toc-title { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px; }
.help-toc-list { display: flex; flex-direction: column; border-left: 2px solid var(--line); }
.help-toc-link { font-size: 12.5px; color: var(--sub); text-decoration: none; padding: 5px 0 5px 13px;
  margin-left: -2px; border-left: 2px solid transparent; line-height: 1.35; }
.help-toc-link:hover { color: var(--ink); border-left-color: var(--green); }

/* anchored sections — scroll-margin keeps the heading clear of the fixed chrome */
.help-section { scroll-margin-top: 20px; }
.help-h2 { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em;
  margin: 34px 0 2px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.help-section:first-of-type .help-h2 { border-top: 0; padding-top: 6px; margin-top: 12px; }
.help-h3 { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; margin: 24px 0 2px; }

/* rendered markdown */
.help-md { font-size: 14px; color: var(--ink2); line-height: 1.68; }
.help-md.help-intro { font-size: 15px; color: var(--sub); }
.help-md p { margin: 10px 0; }
.help-md a { color: var(--blue-dk); text-decoration: none; border-bottom: 1px solid var(--blue-soft); }
.help-md a:hover { border-bottom-color: var(--blue-dk); }
.help-md strong { color: var(--ink); font-weight: 700; }
.help-md ul, .help-md ol { margin: 10px 0; padding-left: 22px; }
.help-md li { margin: 5px 0; }
.help-md code { font-family: var(--mono); font-size: 12.5px; background: var(--paper2);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--ink); }
.help-md pre { background: var(--paper2); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px; overflow-x: auto; }
.help-md pre code { border: 0; background: none; padding: 0; }
/* the guides use --- as section rules; the section borders already do that job */
.help-md hr { display: none; }
.help-md blockquote { margin: 14px 0; padding: 12px 16px; background: var(--amber-bg);
  border-left: 3px solid var(--amber); border-radius: 0 10px 10px 0; color: var(--ink2); font-size: 13.5px; }
.help-md blockquote p { margin: 5px 0; }
.help-md table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px;
  display: block; overflow-x: auto; }
.help-md thead th { text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sub); background: var(--paper2); padding: 9px 12px;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.help-md tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.help-md tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 1100px) {
  .help-article-wrap { grid-template-columns: minmax(0, 1fr); }
  .help-toc { display: none; }
}
@media (max-width: 720px) {
  .help-article { padding: 8px 18px 24px; }
}

/* ── On-Snow · Help (mobile) ──────────────────────────────────────────────── */
.snow-help-link { text-decoration: none; }
.snow-help-row { display: flex; align-items: center; gap: 13px; padding: 15px 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; color: var(--ink); }
.snow-help-ico { width: 36px; height: 36px; border-radius: 11px; background: var(--paper2); display: flex;
  align-items: center; justify-content: center; font-size: 15px; color: var(--sub); flex-shrink: 0; }
.snow-help-title { font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; }
.snow-help-sub { font-size: 12px; color: var(--sub); line-height: 1.45; margin-top: 2px; }
.snow-help-article { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 4px 18px 22px; }
.snow-help-section { scroll-margin-top: 12px; }
.snow-help-h2 { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em;
  margin: 26px 0 2px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.snow-help-section:first-of-type .snow-help-h2 { border-top: 0; padding-top: 4px; margin-top: 10px; }
.snow-help-h3 { font-size: 14.5px; font-weight: 800; color: var(--ink); margin: 20px 0 2px; }
.snow-help-md { font-size: 14px; color: var(--ink2); line-height: 1.66; }
.snow-help-md a { color: var(--blue-dk); text-decoration: none; font-weight: 600; }
.snow-help-md strong { color: var(--ink); font-weight: 700; }
.snow-help-md ul, .snow-help-md ol { margin: 9px 0; padding-left: 20px; }
.snow-help-md li { margin: 5px 0; }
.snow-help-md hr { display: none; }
.snow-help-md code { font-family: var(--mono); font-size: 12.5px; background: var(--paper2);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.snow-help-md blockquote { margin: 12px 0; padding: 11px 14px; background: var(--amber-bg);
  border-left: 3px solid var(--amber); border-radius: 0 10px 10px 0; font-size: 13.5px; }
/* tables cannot fit a phone — scroll them rather than squeezing the columns */
.snow-help-md table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12.5px;
  display: block; overflow-x: auto; white-space: nowrap; }
.snow-help-md thead th { text-align: left; font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--sub); background: var(--paper2); padding: 8px 10px;
  border-bottom: 1px solid var(--line); }
.snow-help-md tbody td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }



/* ── On-Snow · Tester Agreement (e-sign gate, pages/snow/agreement.py) ─────── */
.agr-intro { font-size: 13.5px; color: var(--ink2); line-height: 1.5; margin: 4px 0 12px; }
.agr-text { max-height: 46vh; overflow-y: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 16px 10px; font-size: 12.5px; line-height: 1.55; color: var(--ink2);
  box-shadow: var(--shadow); }
.agr-title { font-size: 14px; font-weight: 800; color: var(--ink); text-align: center; margin-bottom: 12px;
  letter-spacing: 0.02em; }
.agr-p { margin: 0 0 10px; }
.agr-item { display: flex; gap: 8px; margin: 0 0 8px; }
.agr-sub { padding-left: 22px; }
.agr-num { font-weight: 800; color: var(--ink); min-width: 18px; flex-shrink: 0; }
.agr-ack { font-weight: 800; color: var(--ink); margin-top: 12px; }
.agr-ver { text-align: right; font-size: 11px; color: var(--muted); }
.agr-sign { margin-top: 16px; padding-bottom: 150px; }  /* clear the bottom tab bar + install banner */
.agr-name { width: 100%; height: 46px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 14px;
  font-size: 16px; background: var(--card); color: var(--ink); }
.agr-name:focus { outline: none; border-color: var(--forge, #16a34a); }
.agr-accept { margin: 12px 0 6px; font-size: 13px; color: var(--ink2); }
.agr-accept label { display: flex; gap: 8px; align-items: flex-start; color: var(--ink2) !important; }
.agr-accept input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.agr-date { font-size: 12.5px; color: var(--sub); margin-bottom: 12px; }
.agr-msg { font-size: 13px; font-weight: 600; color: var(--red-fg, #b42318); min-height: 18px; }
.agr-scroll-hint { display: flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--amber-fg, #92400e);
                   background: var(--amber-bg, #fef3c7); border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; }
.agr-sign .agr-name:disabled, .agr-sign button:disabled, .agr-accept input:disabled { opacity: 0.45; cursor: not-allowed; }
.snow-agr-dl { display: inline-flex; align-items: center; margin-top: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink2);
  font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; }


/* On-Snow Activity: sort + By-item controls, grouped history (pages/snow/activity.py) */
.snow-act-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin: 18px 2px 10px; }
.snow-act-controls { display: flex; align-items: center; gap: 12px; }
.snow-act-ctl { display: flex; align-items: center; gap: 6px; }
.snow-act-ctl-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; }
.snow-act-pills label { padding: 4px 11px !important; font-size: 12px !important; }
.snow-act-toggle { font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.snow-act-toggle label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--ink2) !important; }
.snow-act-group { margin-bottom: 12px; }
.snow-act-group-head { display: block; padding: 12px 16px; background: var(--paper2); text-decoration: none;
  color: var(--ink); border-bottom: 1px solid var(--line); }
.snow-act-dir { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 100px; background: var(--card); color: var(--ink2); font-size: 12px; font-weight: 700;
  cursor: pointer; }

/* On-Snow item · Photos & Videos (pages/snow/board_detail.py _media_card) */
.bd-media-count { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--sub); background: var(--paper2);
  border-radius: 100px; padding: 2px 9px; }
.bd-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 4px; }
.bd-media-tile { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper2); }
.bd-media-visual { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #111; }
.bd-media-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px;
  background: var(--card); }
.bd-media-cap { font-size: 11px; color: var(--sub); }
.bd-media-remove { border: 0; background: transparent; color: var(--muted); font-size: 12px; padding: 4px 6px;
  cursor: pointer; }
.bd-media-remove:hover { color: var(--red-dk, #b0362b); }
.bd-media-add { display: flex; align-items: center; justify-content: center; margin: 12px 16px 16px; padding: 12px;
  border: 1.5px dashed var(--line); border-radius: 12px; color: var(--green-dk, #0f9d6e); font-weight: 700;
  font-size: 14px; text-decoration: none; }
.bd-media-msg { font-size: 12.5px; font-weight: 600; padding: 0 16px; }
.bd-media-msg:empty { display: none; }
.bd-media-msg.ok { color: var(--green-dk, #0f9d6e); padding-top: 8px; }
.bd-media-msg.err { color: var(--red-dk, #b0362b); padding-top: 8px; }

/* On-Snow Testing Items — Needs feedback / Submitted / All filter */
.snow-filter-bar { display: flex; gap: 6px; padding: 4px; margin: 2px 0 14px; background: var(--paper2, #efece5);
                   border: 1px solid var(--line); border-radius: 12px; }
.snow-filter-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
                   height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--sub);
                   font-size: 13px; font-weight: 700; cursor: pointer; }
.snow-filter-btn.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.snow-filter-count { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 100px;
                     background: var(--line-soft, #e6e2d9); color: var(--ink2); }
.snow-filter-btn.active .snow-filter-count { background: var(--forge, #16a34a); color: #fff; }

/* On-Snow feedback form — collapsible ride log at the top */
.snow-ride-log { overflow: hidden; }
.snow-log-summary { list-style: none; display: flex; align-items: center; padding: 14px 16px; cursor: pointer;
                    font-size: 14px; font-weight: 800; color: var(--ink); }
.snow-log-summary::-webkit-details-marker { display: none; }
.snow-log-chev { margin-left: auto; font-size: 12px; color: var(--muted); transition: transform .2s ease; }
.snow-ride-log[open] .snow-log-chev { transform: rotate(180deg); }
.snow-log-rows { border-top: 1px solid var(--line-soft, #ece8df); animation: snowLogDown .2s ease; }
@keyframes snowLogDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .snow-log-rows { animation: none; } .snow-log-chev { transition: none; } }

/* On-Snow profile photo (SUG-7) */
.snow-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.snow-avatar-img { object-fit: cover; padding: 0; }
.snow-avatar-link { font-size: 11.5px; font-weight: 700; color: #b9c4cf; text-decoration: none; white-space: nowrap; }
.snow-avatar-link:hover { color: #fff; }
.snow-photo-msg { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.snow-photo-msg.ok { background: var(--green-soft, #e7f6ec); color: var(--green-dk, #15803d); }
.snow-photo-msg.err { background: var(--red-bg, #fdecea); color: var(--red-dk, #b0362b); }

/* Our own − / + stepper rows (Hours on snow, Board size): hide Dash 4's built-in
   number-input steppers there so there's only one set of controls. */
.snow-stepper-row .dash-input-stepper { display: none !important; }
.snow-stepper-row input[type=number]::-webkit-inner-spin-button,
.snow-stepper-row input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.snow-stepper-row input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* On-Snow Messages */
.snow-msg-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.snow-msg { max-width: 82%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.snow-msg.theirs { align-self: flex-start; background: var(--card); border: 1px solid var(--line);
                   border-bottom-left-radius: 4px; color: var(--ink); }
.snow-msg.mine { align-self: flex-end; background: var(--forge, #16a34a); color: #fff; border-bottom-right-radius: 4px; }
.snow-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.snow-msg-meta { font-size: 11px; margin-top: 5px; opacity: .7; }
.snow-tab { position: relative; }
.snow-tab-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px;
                  border-radius: 100px; background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 800;
                  display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.snow-badge-enable { width: 100%; align-items: center; justify-content: center; margin-bottom: 12px; padding: 11px;
                     border-radius: 12px; border: 1px dashed var(--line); background: var(--card);
                     color: var(--ink2); font-size: 13px; font-weight: 700; cursor: pointer; }

/* ── Inventory model card (pages/on_snow_feedback._inv_model_card) ──────────
   Classes instead of per-element inline styles: ~20 cards per click, and the
   repeated inline styles were ~45% of what the browser had to parse. */
.invc { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
        box-shadow: var(--shadow); overflow: hidden; }
.invc.flagged { border-color: #f3d0ca; }
.invc-head { display: flex; align-items: center; gap: 16px; padding: 15px 20px; cursor: pointer; }
.invc-head:hover { background: var(--paper2); }
.invc-chev { color: var(--muted); width: 16px; font-size: 15px; flex-shrink: 0; }
.invc-icon { width: 44px; height: 50px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line);
             display: flex; align-items: center; justify-content: center; flex-shrink: 0;
             color: var(--muted); font-size: 13px; }
.invc-title { width: 230px; flex-shrink: 0; min-width: 0; }
.invc-name { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); text-decoration: none; }
.invc-sub { font-size: 12.5px; color: var(--sub); margin-top: 3px; }
.invc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.invc-count { font-size: 12.5px; font-weight: 700; color: var(--ink); padding-right: 9px;
              border-right: 1px solid var(--line); }
.invc-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 100px;
             font-size: 11px; font-weight: 700; white-space: nowrap; }
.invc-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
                     margin-right: 6px; }
.invc-chip-overdue { color: var(--red-fg); background: var(--red-bg); }
.invc-chip-test    { color: var(--amber-fg); background: var(--amber-bg); }
.invc-chip-done    { color: var(--green-dk); background: var(--green-soft); }
.invc-chip-vault   { color: var(--sub); background: var(--paper2); }
.invc-chip-demo    { color: var(--blue-dk, #1d4fd8); background: var(--blue-soft, #eef2fe); }
.invc-stats { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.invc-stat { text-align: right; }
.invc-lbl { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase;
            letter-spacing: 0.08em; }
.invc-val { font-size: 15px; font-weight: 800; color: var(--ink); margin-top: 3px; }
.invc-bar { width: 96px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden;
            margin: 9px 0 0 auto; }
.invc-bar-fill { height: 100%; background: var(--ink); border-radius: 3px; }
.invc-bar-fill.full { background: var(--green); }