/* octopus-lite Equipment Hub shell styles (L0.3).
   Self-contained, no external fonts/CDNs so the installed PWA works offline.
   Visual voice MATCHED to the IoT Octopus customer portal (light Material theme:
   light-blue page, white cards, Google-blue accent, dark ink text). */

:root {
  --bg: #eef3fc;
  --bg-2: #f6f9ff;
  --card: #ffffff;
  --line: #dce4f1;
  --text: #1a1c1e;
  --muted: #5f6b7d;
  --accent: #0b57d0;
  /* L18.8 (WCAG-AA): status/secondary text colors darkened to meet the 4.5:1
     small-text contrast floor on white, --bg-2 and --bg (verified in the eval
     harness). Hues are unchanged (same green/amber/red/blue families); only the
     lightness dropped. Used as both text and 1px borders, so more contrast is
     strictly safer for the existing UI. */
  --accent-2: #1667c0;
  --ok: #157a36;
  --wait: #a85b00;
  --bad: #c5221a;
  --radius: 12px;

  /* =====================================================================
     DX-16 DESIGN-TOKEN KIT (CX & Design Remediation sec.2/sec.3, governed by
     NORTH_STAR sec.12 "simple, friendly, modern, approachable").
     FOUNDATIONAL: later CX tasks (nav, microcopy, activity feed, machine
     faces, mission-control home) consume these tokens instead of hard-coded
     values. Additive only -- every legacy token above is preserved so no
     existing rule changes behaviour. Defaults are the remediation sec.3
     proposals; founder/designer may amend the values here in one place.
     ===================================================================== */

  /* --- Color: one trustworthy blue (kept) + ONE warm accent (sec.3) -------- */
  --accent-warm: #b45309;        /* amber/coral, AA on white -- text & borders */
  --accent-warm-strong: #ea580c; /* vivid fill for icons/highlights only */
  --accent-warm-soft: #fff3e6;   /* soft tint background */
  --accent-soft: #e8f0fe;        /* soft blue tint background */

  /* --- Wave/ocean capture-action colors (DX-22, founder-approved) ---------
     Pair each pastel fill with its own dark ink for AA contrast. */
  --act-blue-bg: #dbeafe;
  --act-blue-ink: #0c447c;
  --act-violet-bg: #ede9fe;
  --act-violet-ink: #3c3489;
  --act-teal-bg: #ccfbf1;
  --act-teal-ink: #075e54;
  --act-amber-bg: #fef3c7;
  --act-amber-ink: #7a4b00;

  /* --- Soft CATEGORY colors (consumed by machine "faces", DX-10) --------
     Pastel backgrounds keyed to NORTH_STAR sec.6 asset families; pair with
     --text (or --cat-ink) for the glyph. Calm, never neon. */
  --cat-ink: #334155;
  --cat-refrigeration: #e3f1fb;  /* cool blue   */
  --cat-hvac:          #e6f4ec;  /* fresh green */
  --cat-compressor:    #ede9fe;  /* violet      */
  --cat-motor:         #fdeede;  /* warm amber  */
  --cat-vehicle:       #e9eef6;  /* slate       */
  --cat-kitchen:       #fde9e7;  /* warm coral  */
  --cat-pump:          #e0f2f1;  /* teal        */
  --cat-electrical:    #fef6dc;  /* yellow      */
  --cat-boiler:        #f3e8e2;  /* clay        */
  --cat-general:       #eef2f7;  /* neutral     */

  /* --- Spacing: 8-pt grid, ~16px default margins (sec.3) ------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* default margin */
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Radius: 6 (buttons) / 10 (cards) / 12 (legacy) / pill (nav) (sec.3) - */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* --- Type: Inter/Geist IF locally installed, else the offline-safe
     system stack (no CDN -- preserves the installed-PWA-works-offline rule).
     Tabular figures for data are applied via the .tabular utility below. -- */
  --font-sans: "Inter", "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --lh-tight: 1.25;
  --lh-base: 1.55;

  /* --- Elevation: hairline-border cards; restrained shadows on raised
     layers only (sec.3) ---------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .10);
  --shadow-lg: 0 12px 28px rgba(16, 24, 40, .14);

  /* --- Motion: 200-500ms, one standard easing (sec.3) --------------------- */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
}

* { box-sizing: border-box; }

/* The HTML `hidden` attribute must always win, even over component display rules
   (e.g. .pp-overlay/.plan-panel set display:flex/grid which would otherwise keep a
   `hidden` element visible). Fixes the plan-picker modal showing on load and not
   closing after a plan is chosen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

main,
.wrap,
.card,
.vr-view {
  max-width: 100%;
  min-width: 0;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

/* DX-16: tabular figures for data so numbers align in columns/rows. Applied
   to the canonical data surfaces; add `.tabular` to any new numeric display.
   Additive -- no layout change, only digit metrics. */
.tabular,
.plan-table td,
.plan-table th,
.kv dd,
.amount,
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 9600;
}

.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-mark { display: block; width: 26px; height: 26px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 700; letter-spacing: .2px; }

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}

.topbar-more {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.topbar-more:hover { background: rgba(11, 87, 208, .05); }
.topbar-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.install-app-slot { display: inline-flex; align-items: center; }

@media (max-width: 480px) {
  .topbar {
    padding: 9px 10px;
    gap: 6px;
  }
  .brand { gap: 6px; }
  .brand-mark { width: 23px; height: 23px; }
  .brand-name { font-size: 14px; }
  .topbar-actions { gap: 4px; }
  .topbar-more { padding: 0 9px; font-size: 12px; }
  .topbar .pill {
    max-width: none;
    overflow: hidden;
  }
  .topbar #sync-pill:not([hidden]) { display: none; }
}

.pill {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.pill-ok   { color: var(--ok);   border-color: var(--ok); }
.pill-wait { color: var(--wait); border-color: var(--wait); }
.pill-bad  { color: var(--bad);  border-color: var(--bad); }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px;
  display: grid;
  gap: 16px;
}
/* Mobile overflow fix (QA 2026-06-19): .wrap is a grid, so its card children get
   the default min-width:auto and refuse to shrink below their content's intrinsic
   width - on a phone that forced ~460px-wide cards into a ~360px viewport, giving
   115px of horizontal overflow (clipped text, sideways scroll = "not mobile").
   min-width:0 lets every grid item shrink to its track so the layout reflows. */
.wrap > * { min-width: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.onb-setup-host:empty { display: none; }
body[data-octo-test-mode="first-login"] .vr-view[data-view="account"] > section:not(#pilot-access-root):not(#org-setup-root) {
  display: none;
}
.pilot-test-hint {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 13px;
}
.org-access-card {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.org-access-title {
  margin: 0 0 8px;
  font-size: 17px;
}
.org-form,
.pilot-form {
  display: grid;
  gap: 10px;
}
.org-form input,
.pilot-form input {
  min-height: 44px;
  box-sizing: border-box;
}
.card h2 { margin: 0 0 12px; font-size: 15px; letter-spacing: .3px; }

.kv {
  margin: 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  row-gap: 8px;
  column-gap: 12px;
}
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; font-size: 14px; word-break: break-word; }

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

.roadmap { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.roadmap li { font-size: 14px; display: flex; align-items: center; gap: 10px; }
.tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

.tag-live { color: var(--ok); border-color: var(--ok); }

.card h3.sub { margin: 18px 0 8px; font-size: 13px; color: var(--muted); letter-spacing: .3px; }

/* Upload (L1.5.1) */
.attach-row { display: flex; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.field span { color: var(--muted); font-size: 12px; }
.field input {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 14px;
}
.field input:focus { outline: none; border-color: var(--accent); }

.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 26px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone:focus { border-color: var(--accent); outline: none; }
.dropzone.dragover { border-color: var(--accent); background: rgba(11, 87, 208, .08); }
.dz-main { margin: 0 0 4px; font-weight: 600; }
.dropzone p:last-child { margin: 0; }

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.reject-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.reject-list li { color: var(--bad); }

.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doc-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.doc-name { font-size: 14px; word-break: break-word; }
.doc-meta { text-transform: capitalize; }
/* VP-13 magic-loop deep-link CTA on the empty Documents list */
.doc-empty-cta-row { list-style: none; padding: 0; background: none; border: 0; }
.doc-empty-cta {
  margin: 4px 0 0;
  padding: 8px 16px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--accent, #0b57d0);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.doc-empty-cta:hover { background: var(--accent-strong, #0842a0); }
.doc-empty-cta:focus-visible { outline: 2px solid var(--accent, #0b57d0); outline-offset: 2px; }

/* OCEAN (option A): the Wave document-table host + the document detail page */
.docs-ocean-host { list-style: none; padding: 0; background: none; border: 0; }
.doc-detail {
  list-style: none;
  padding: 0;
  background: none;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doc-detail-back {
  align-self: flex-start;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--accent, #0b57d0);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.doc-detail-back:hover { text-decoration: underline; }
.doc-detail-back:focus-visible { outline: 2px solid var(--accent, #0b57d0); outline-offset: 2px; border-radius: 6px; }
.doc-detail-title { margin: 0; font-size: 18px; font-weight: 600; word-break: break-word; }
.doc-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.extract-btn {
  margin-top: 6px;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}
.extract-btn:hover { background: rgba(11, 87, 208, .1); }
.extract-btn:disabled { opacity: .55; cursor: default; }

/* VP-13: Assets empty-state deep-link CTA (opens the magic-loop guide at "photo") */
.assets-empty-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.assets-empty-cta:hover { background: var(--accent-strong, #0a4cb8); }
.assets-empty-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* PM plan results (L1.5.2) */
.plan-panel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}
.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
/* Tappable machine head -> opens the asset detail screen. Clear pointer + focus
   affordance so the gesture is discoverable and keyboard-reachable. */
.asset-open {
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 6px;
  margin: -4px -6px 2px;
  transition: background .12s ease;
}
.asset-open:hover { background: rgba(11, 87, 208, .06); }
.asset-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.plan-badge {
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  text-transform: capitalize;
  white-space: nowrap;
}
.plan-badge.conf-high   { color: var(--ok);   border-color: var(--ok); }
.plan-badge.conf-medium { color: var(--wait); border-color: var(--wait); }
.plan-badge.conf-low    { color: var(--bad);  border-color: var(--bad); }

.plan-banner {
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.plan-banner.info { background: var(--bg-2); border: 1px solid var(--line); color: var(--muted); }
.plan-banner.err  { background: rgba(217, 48, 37, .1); border: 1px solid var(--bad); color: var(--bad); }

.plan-section h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .3px;
}
.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.plan-table th, .plan-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  word-break: break-word;
}
.plan-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.plan-table tr:last-child td { border-bottom: none; }

/* Condition check (L1.1) */
.check-btn {
  margin-top: 6px;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--wait);
  border-radius: 8px;
  color: var(--wait);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}
.check-btn:hover { background: rgba(227, 116, 0, .1); }
.check-btn:disabled { opacity: .55; cursor: default; }

.check-sev-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Severity badges: 0 = neutral, 1-2 = low/ok, 3 = warn, 4-5 = danger */
.sev-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.sev-badge.sev-0 { color: var(--muted); border-color: var(--line); }
.sev-badge.sev-1 { color: var(--ok);   border-color: var(--ok); }
.sev-badge.sev-2 { color: var(--ok);   border-color: var(--ok); }
.sev-badge.sev-3 { color: var(--wait); border-color: var(--wait); }
.sev-badge.sev-4 { color: var(--bad);  border-color: var(--bad); }
.sev-badge.sev-5 { color: var(--bad);  border-color: var(--bad); background: rgba(217, 48, 37, .1); }

/* Nameplate read button (L1.2) */
.nameplate-btn {
  margin-top: 6px;
  margin-left: 6px;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}
.nameplate-btn:hover { background: rgba(11, 87, 208, .1); }
.nameplate-btn:disabled { opacity: .55; cursor: default; }

/* Assess button (L1.3) */
.assess-btn {
  margin-top: 6px;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--ok);
  border-radius: 8px;
  color: var(--ok);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}
.assess-btn:hover { background: rgba(30, 142, 62, .1); }
.assess-btn:disabled { opacity: .55; cursor: default; }

/* Assets panel (L1.2) */
.asset-onboard-btn {
  width: 100%;
  min-height: 48px;
  margin: 4px 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.asset-onboard-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.profile-setup-btn {
  width: 100%;
  min-height: 46px;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.profile-setup-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body.vr-mobile.profile-setup-collapsed #trade-templates-section,
body.vr-mobile.profile-setup-collapsed #demo-picker-section {
  display: none !important;
}

.assets-panel {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

/* L17.1g / Q4: "Load more" walks the bounded asset pages. Full-width, calm,
   touch-friendly (a 58-yr-old, gloved); hidden when there is no next page. */
.load-more-btn {
  margin-top: 10px;
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  padding: 12px 14px;
  cursor: pointer;
  min-height: 44px;
}
.load-more-btn:hover { background: rgba(30, 142, 62, .08); }
.load-more-btn:disabled { opacity: .55; cursor: default; }
.load-more-btn[hidden] { display: none; }

.asset-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  display: grid;
  gap: 10px;
}

.asset-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.asset-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.assets-mobile-list {
  display: grid;
  gap: 7px;
}

.asset-mobile-row {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text);
  padding: 8px 9px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.asset-mobile-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.asset-mobile-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.asset-mobile-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-mobile-code {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0;
}

.asset-mobile-detail {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-mobile-row .asset-status-badge {
  flex: 0 0 auto;
  margin-left: auto;
}

.assets-mobile-note {
  margin: 2px 0 0;
}

/* DX-10 Machine Faces: every machine wears a calm category icon (or the owner's
   own photo) on a soft --cat- coloured chip, so a non-technical owner recognises
   it at a glance. Consumes the DX-16 --cat-* / --cat-ink design tokens. */
.asset-head-left {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-width: 0;
}
.machine-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--cat-general);
  color: var(--cat-ink, #334155);
}
.machine-face svg {
  width: 20px;
  height: 20px;
  display: block;
}
.machine-face--sm {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: var(--radius-sm, 6px);
}
.machine-face--sm svg {
  width: 17px;
  height: 17px;
}
.machine-face--lg {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: var(--radius-lg, 12px);
}
.machine-face--lg svg {
  width: 30px;
  height: 30px;
}
.machine-face--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.asset-summary-kv {
  grid-template-columns: 110px 1fr;
}

.nameplate-fields-label {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* Asset status badges */
.asset-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.asset-status-active { color: var(--ok);   border-color: var(--ok); }
.asset-status-draft  { color: var(--wait); border-color: var(--wait); }

/* Import asset register (L1.5.4) */
.import-register-controls {
  margin: 12px 0 0;
}

.import-result {
  margin-top: 12px;
}

/* Warranty / contract tracking (L1.5.6) */
.contract-btn {
  margin-top: 6px;
  margin-left: 6px;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--muted);
  border-radius: 8px;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}
.contract-btn:hover { background: rgba(159, 185, 189, .1); border-color: var(--text); color: var(--text); }
.contract-btn:disabled { opacity: .55; cursor: default; }

.contracts-panel {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.contract-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  display: grid;
  gap: 10px;
}

.contract-type-label {
  font-size: 14px;
  font-weight: 600;
}

/* Expiry status badges */
.exp-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.exp-unknown  { color: var(--muted); border-color: var(--line); }
.exp-active   { color: var(--ok);    border-color: var(--ok); }
.exp-expiring { color: var(--wait);  border-color: var(--wait); background: rgba(227, 116, 0, .08); }
.exp-expired  { color: var(--bad);   border-color: var(--bad); background: rgba(217, 48, 37, .1); }

/* Document Q&A / lookup (L1.5.7) */
.ask-btn {
  margin-top: 6px;
  margin-left: 6px;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}
.ask-btn:hover { background: rgba(11, 87, 208, .1); }
.ask-btn:disabled { opacity: .55; cursor: default; }

.qa-input-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.qa-input-row input {
  flex: 1;
  min-width: 160px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 10px;
  font-size: 13px;
}
.qa-input-row input:focus { outline: none; border-color: var(--accent); }
.qa-input-row button {
  background: none;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.qa-input-row button:hover { background: rgba(11, 87, 208, .1); }
.qa-input-row button:disabled { opacity: .55; cursor: default; }

.lookups-panel {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.qa-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.qa-question {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.qa-answer {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.qa-quote {
  margin: 0;
  padding: 6px 10px;
  border-left: 3px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.cap-note {
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  background: rgba(11, 87, 208, .06);
  border: 1px solid var(--accent);
  color: var(--accent);
}

.cap-exhausted {
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  background: rgba(227, 116, 0, .08);
  border: 1px solid var(--wait);
  color: var(--wait);
}

.qa-source {
  font-size: 11px;
  color: var(--muted);
}

/* Maintenance history (L1.4) */
.log-maint-btn {
  margin-top: 6px;
  margin-left: 6px;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}
.log-maint-btn:hover { background: rgba(11, 87, 208, .1); }
.log-maint-btn:disabled { opacity: .55; cursor: default; }

.maint-form {
  margin-top: 8px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
}

.maint-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.maint-field-label {
  display: block;
}

.maint-input {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  width: 100%;
}
.maint-input:focus { outline: none; border-color: var(--accent); }

.maint-select {
  appearance: none;
}

.maint-textarea {
  resize: vertical;
  min-height: 56px;
}

.maint-save-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.maint-field-text {
  font-size: 13px;
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}

.maintenance-panel {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.maint-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.maint-type-label {
  font-size: 14px;
  font-weight: 600;
}

/* Follow-up status badges */
.fu-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.fu-overdue   { color: var(--bad);   border-color: var(--bad);  background: rgba(217, 48, 37, .1); }
.fu-due-soon  { color: var(--wait);  border-color: var(--wait); background: rgba(227, 116, 0, .08); }
.fu-scheduled { color: var(--muted); border-color: var(--line); }

/* Parts chips */
.parts-list { display: grid; gap: 4px; }
.parts-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.parts-chip {
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: rgba(11, 87, 208, .06);
  white-space: nowrap;
}

.foot {
  max-width: 720px;
  margin: 8px auto 24px;
  padding: 0 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* VERSION-VISIBLE-01: group the brand with the unobtrusive live build id so the
   footer reads "OctoVault  Version: lite-..." on the left, leaving the offline
   note on the right. The version stays muted/secondary, never a focal element. */
.foot-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.foot-version {
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* VERSION-BADGE-01 (Dennis 2026-06-27): promote the existing live build id to an
   ALWAYS-VISIBLE, persistent tester badge on BOTH mobile and desktop, instead of a
   footer line a tester only sees after scrolling to the very bottom of Home. It
   reuses the SAME #app-version slot that version-badge.js paints from
   GET /api/version (no new route, no new card or dashboard widget). It is fixed to
   a quiet bottom-left corner and pointer-events:none so it can NEVER cover or block
   a button or a bottom-nav tap. It sets no `display`, so when version-badge.js has
   no real build id the UA `[hidden]` rule still hides it (never a placeholder). */
#app-version {
  position: fixed;
  left: 12px;
  bottom: 8px;
  z-index: 30;
  max-width: 60vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

/* On a phone the router stamps body.vr-mobile and the fixed 64px bottom nav (plus
   the home-indicator safe-area inset) owns the bottom edge; lift the badge clear of
   it so it stays visible on Home and every focused tile page without colliding. */
body.vr-mobile #app-version {
  bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 6px);
}

/* Global search (L1.6) */
.search-card { position: relative; }

.search-input-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.search-box {
  flex: 1;
  min-width: 180px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
}
.search-box:focus { outline: none; border-color: var(--accent); }
.search-box::placeholder { color: var(--muted); }

.search-submit-btn {
  background: none;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.search-submit-btn:hover { background: rgba(11, 87, 208, .1); }
.search-submit-btn:disabled { opacity: .55; cursor: default; }

.search-type-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.sr-type-chip {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s, color .12s;
}
.sr-type-chip:hover { border-color: var(--accent); color: var(--accent); }
.sr-type-chip.sr-chip-active { border-color: var(--accent); color: var(--accent); background: rgba(11, 87, 208, .08); }

.search-results {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.search-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.search-count {
  font-size: 13px;
  color: var(--muted);
}

.search-truncated-note {
  font-size: 12px;
  color: var(--wait);
}

.search-honesty {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 10px;
  border-left: 3px solid var(--line);
  margin: 0;
}

.sr-result-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  display: grid;
  gap: 6px;
}

.sr-result-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sr-type-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  border-radius: 6px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.sr-badge-asset          { color: var(--accent); border-color: var(--accent); }
.sr-badge-document       { color: var(--ok);     border-color: var(--ok); }
.sr-badge-maintenance    { color: var(--wait);   border-color: var(--wait); }
.sr-badge-contract       { color: var(--text);   border-color: var(--text); }
.sr-badge-pm_plan        { color: var(--accent); border-color: var(--accent); background: rgba(11, 87, 208, .06); }
.sr-badge-condition_check { color: var(--wait);  border-color: var(--wait);  background: rgba(227, 116, 0, .06); }

.sr-result-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.sr-snippet {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  font-style: italic;
  word-break: break-word;
}

.sr-citation {
  font-size: 11px;
  color: var(--muted);
}

/* Phone capture card: camera QR scan + photo-to-asset (L2.1 / L2.2) */
.mobile-capture-card .mc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.mobile-capture-card .mc-row input,
.mobile-capture-card .mc-row select {
  flex: 1 1 140px;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text);
}
.mobile-capture-card .mc-hidden-fields {
  display: none;
}
.mc-desktop-capture-title,
.mc-desktop-upload-hint,
.mc-desktop-file-label {
  display: none;
}
body.vr-desktop .mc-mobile-capture-title,
body.vr-desktop .mc-mobile-capture-lead,
body.vr-desktop .mc-mobile-camera-label {
  display: none;
}
body.vr-desktop .mc-desktop-capture-title,
body.vr-desktop .mc-desktop-upload-hint {
  display: block;
}
body.vr-desktop .mc-desktop-file-label {
  display: inline;
}
.mc-photo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 6px 0;
  padding: 12px 16px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: rgba(11, 87, 208, .08);
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
.mc-photo-btn:hover { background: rgba(11, 87, 208, .16); }
.mc-status { margin: 4px 0 0; min-height: 1em; }
.mc-photo-stage {
  margin: 12px 0;
}
.mc-workspace-open .mc-photo-stage {
  display: none;
}
.mc-photo-frame {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border: 2px solid var(--ok, #188038);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(24,128,56,.18), rgba(11,87,208,.08));
}
.mc-photo-preview {
  display: block;
  width: 100%;
  min-height: 220px;
  max-height: 360px;
  object-fit: cover;
}
.mc-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  color: var(--ok, #188038);
  font-weight: 800;
}
.mc-photo-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(8, 56, 28, .92), rgba(8, 56, 28, .62), rgba(8, 56, 28, 0));
  color: #fff;
}
.mc-photo-overlay h4 {
  margin: 2px 0 4px;
  font-size: 18px;
  line-height: 1.2;
}
.mc-photo-overlay p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}
.mc-photo-kicker,
.mc-code-kicker {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mc-draft h4 {
  margin: 0 0 8px;
  font-size: 16px;
}
.mc-found-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
}
.mc-found-list dt {
  color: var(--muted);
  font-size: 12px;
}
.mc-found-list dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  word-break: break-word;
}
.mc-transcript {
  margin: 8px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.mc-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
@media (min-width: 560px) {
  .mc-choice-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.mc-choice-grid-small {
  margin-top: 8px;
}
.mc-choice-card {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.mc-choice-card.mc-primary-choice {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.mc-choice-card.mc-primary-choice .mc-choice-detail {
  color: rgba(255, 255, 255, .86);
}
.mc-choice-card.mc-primary-choice[disabled] {
  opacity: .62;
  cursor: default;
}
.mc-save-equipment-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 58px;
  padding: 14px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.mc-save-equipment-btn[disabled] {
  opacity: .64;
  cursor: default;
}
.mc-choice-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.mc-save-equipment-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.mc-choice-title {
  font-size: 15px;
  font-weight: 700;
}
.mc-choice-detail {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.mc-scan { display: grid; gap: 8px; margin-top: 6px; }
.mc-code-result {
  display: grid;
  gap: 8px;
}
.mc-code-result h4 {
  margin: 0;
  font-size: 18px;
}
.mc-code-kicker {
  color: var(--ok, #188038);
}
.mc-code-facts {
  margin: 4px 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}
.mc-inbound-visual.mal-onboard-visual {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 154px;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  text-align: center;
  padding: 16px;
}
.mc-inbound-visual .mal-onboard-symbol {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  font-size: 18px;
  font-weight: 850;
  color: var(--accent);
  overflow: hidden;
}
.mc-inbound-visual.mal-onboard-visual-qr .mal-onboard-symbol {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: repeating-linear-gradient(45deg, #fff 0, #fff 8px, #dbeafe 8px, #dbeafe 16px);
}
.mc-inbound-visual.mal-onboard-visual-photo .mal-onboard-symbol {
  background: var(--act-teal-bg, #ccfbf1);
  color: var(--act-teal-ink, #075e54);
}
.mc-inbound-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mc-result-back-row {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 10px;
}
.mobile-capture-card .mal-onboard-actions.mc-inbound-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}
.mobile-capture-card .mal-primary.mc-inbound-action,
.mobile-capture-card .mal-secondary.mc-inbound-action {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 48px;
  border-radius: 8px;
  font: inherit;
  font-weight: 750;
  padding: 12px 14px;
  text-align: center;
  cursor: pointer;
}
.mobile-capture-card .mal-primary.mc-inbound-action {
  border: 0;
  background: var(--accent);
  color: #fff;
}
.mobile-capture-card .mal-secondary.mc-inbound-action {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--accent);
}
.mobile-capture-card .mal-primary.mc-inbound-action:focus-visible,
.mobile-capture-card .mal-secondary.mc-inbound-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.mc-other-options {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
}
.mc-workspace {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--card);
}
.mc-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.mc-workspace-head h4 {
  margin: 0 0 4px;
  font-size: 18px;
}
.mc-workspace-head .link-btn {
  flex: 0 0 auto;
  min-height: 40px;
}
.mc-link-grid {
  display: grid;
  gap: 10px;
}
.mc-link-photo {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
}
.mc-link-thumb {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
}
.mc-link-photo .mc-photo-placeholder {
  min-height: 92px;
  border-radius: 8px;
  background: var(--card);
  font-size: 12px;
  text-align: center;
}
.mc-link-copy {
  min-width: 0;
}
.mc-link-copy h4 {
  margin: 0 0 4px;
  font-size: 16px;
}
.mc-link-copy p {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.mc-create-form {
  display: grid;
  gap: 10px;
  margin: 10px 0;
}
.mc-form-field {
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.mc-form-input {
  min-height: 44px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}
.mc-picker-list {
  display: grid;
  gap: 8px;
  max-height: min(420px, 58vh);
  overflow: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}
.mc-picker-row {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.mc-picker-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.mc-picker-name {
  font-size: 15px;
  font-weight: 800;
}
.mc-picker-detail {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.mc-video {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border-radius: 10px;
  background: #000;
}
.mobile-capture-card #mc-scan-result h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* Per-asset QR codes + scan-to-Passport (L1.7) */
.qr-btn {
  margin-top: 6px;
  margin-left: 6px;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}
.qr-btn:hover { background: rgba(11, 87, 208, .1); }
.qr-btn:disabled { opacity: .55; cursor: default; }

.qr-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  display: grid;
  gap: 10px;
}

.qr-image {
  width: 200px;
  max-width: 100%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
}
.qr-image svg {
  display: block;
  width: 100%;
  height: auto;
}

.qr-url-row {
  display: grid;
  gap: 4px;
}
.qr-url {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  width: 100%;
  word-break: break-all;
}
.qr-url:focus { outline: none; border-color: var(--accent); }

.qr-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.qr-caption {
  margin: 0;
}

/* Quick passport (L1.7) */
.scan-input-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.scan-box {
  flex: 1;
  min-width: 160px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
}
.scan-box:focus { outline: none; border-color: var(--accent); }
.scan-box::placeholder { color: var(--muted); }

.scan-role-select {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
}
.scan-role-select:focus { outline: none; border-color: var(--accent); }

.scan-submit-btn {
  background: none;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.scan-submit-btn:hover { background: rgba(11, 87, 208, .1); }
.scan-submit-btn:disabled { opacity: .55; cursor: default; }

.passport-headline {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* AI equipment summaries (L1.5) */
.summary-btn {
  margin-top: 6px;
  margin-left: 6px;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}
.summary-btn:hover { background: rgba(11, 87, 208, .1); }
.summary-btn:disabled { opacity: .55; cursor: default; }

.summary-panel {
  margin-top: 16px;
}

.summary-headline {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
}

.summary-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.summary-completeness {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.summary-missing-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.summary-missing-item {
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.summary-missing-item:last-child { border-bottom: none; }

.summary-assistive-note {
  font-size: 12px;
}

/* L9.2: trust / human-approval section in the summary panel */
.summary-trust { margin-top: 10px; }
.summary-approve-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.summary-trust .badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.summary-trust .badge.ok   { background: rgba(11, 87, 208, .12); color: var(--accent); }
.summary-trust .badge.warn { background: rgba(227, 116, 0, .12); color: var(--wait); }
.summary-trust .badge.err  { background: rgba(217, 48, 37, .12); color: var(--bad); }

/* L0.9: trial-status banner (tb-*) */
.tb-wrap {
  padding: 10px 18px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}

.tb-trialing {
  background: rgba(11, 87, 208, .07);
  border-bottom-color: var(--accent);
  color: var(--text);
}

.tb-expiring {
  background: rgba(227, 116, 0, .1);
  border-bottom-color: var(--wait);
  color: var(--wait);
}

.tb-ended {
  background: rgba(217, 48, 37, .1);
  border-bottom-color: var(--bad);
  color: var(--bad);
}

.tb-active {
  background: transparent;
  border-bottom-color: var(--line);
  color: var(--muted);
}

.tb-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}

.tb-msg {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}

.tb-cta-link {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  white-space: nowrap;
}
.tb-cta-link:hover { color: var(--text); }

.tb-cta-btn {
  background: none;
  border: 1px solid currentColor;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.tb-cta-btn:hover { background: rgba(0, 0, 0, .06); }

.tb-active-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.tb-dismiss-btn {
  background: none;
  border: none;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.tb-dismiss-btn:hover { color: var(--text); background: rgba(0, 0, 0, .06); }

/* L0.9: plan picker modal (pp-*) */
.pp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 31, 36, .82);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px 24px;
  overflow-y: auto;
}

.pp-dialog {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 24px;
  width: 100%;
  max-width: 760px;
  display: grid;
  gap: 14px;
}

.pp-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pp-dialog-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.pp-close-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  cursor: pointer;
  flex-shrink: 0;
}
.pp-close-btn:hover { color: var(--text); border-color: var(--text); }

.pp-dialog-sub {
  margin: 0;
}

.pp-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.pp-plan-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 14px 16px;
  display: grid;
  gap: 8px;
}

.pp-plan-card-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.pp-plan-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.pp-plan-target {
  margin: 0;
  line-height: 1.4;
}

.pp-plan-price {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

.pp-plan-founding {
  margin: 0;
}

.pp-plan-caps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.pp-plan-cap-item {
  font-size: 12px;
  color: var(--muted);
  text-transform: capitalize;
}

.pp-choose-btn {
  margin-top: 4px;
  background: none;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.pp-choose-btn:hover { background: rgba(11, 87, 208, .1); }
.pp-choose-btn:disabled { opacity: .55; cursor: default; }

.pp-status {
  margin: 0;
  min-height: 1.2em;
}

/* L10.6: trade templates (get started by trade) */
.tt-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
/* Two-level picker (2026-06-19): segment cards, then drill into trades. */
.tt-segments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
  /* Fix (2026-06-19): .tt-segments is itself a child of the .tt-list grid, so a
     single child sat inside ONE ~220px track and its own grid never had room for
     more than one column. Spanning every track of the parent restores the intended
     multi-column layout on desktop (auto-fill, 2-3 wide) while it collapses to a
     single column on phones (where .tt-list is one track). */
  grid-column: 1 / -1;
}
.tt-segment {
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  display: grid;
  gap: 6px;
  align-content: start;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.tt-segment:hover { border-color: var(--accent, #0b57d0); background: rgba(11, 87, 208, .06); }
.tt-segment:focus-visible { outline: 2px solid var(--accent, #0b57d0); outline-offset: 2px; }
.tt-seg-count { font-weight: 600; }
.tt-drill-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.tt-back {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
  color: var(--accent, #0b57d0);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tt-back:hover { background: rgba(11, 87, 208, .08); }
.tt-seg-name { font-weight: 600; }
.tt-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
  align-content: start;
}
.tt-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tt-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.tt-desc { margin: 0; }
.tt-apply-btn { margin-top: 4px; align-self: start; }
.tt-checklist {
  list-style: disc;
  margin: 6px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: var(--text);
  font-size: 13px;
}

/* L10.5: shop at a glance weekly digest */
.digest-headline {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.4;
}
.digest-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.digest-list li {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.digest-flag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  border-radius: 6px;
  padding: 2px 7px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--line);
}
.flag-overdue { color: var(--bad);    border-color: var(--bad); }
.flag-soon    { color: var(--wait);   border-color: var(--wait); }
.flag-crit    { color: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------------------------------
   L11.5 mobile-first / one-hand polish. Additive only: every rule is scoped
   under a narrow-viewport media query (or @supports), so the desktop layout is
   unchanged. Goals: finger-sized tap targets (>=44px), full-width controls that
   stack so the primary action sits in the bottom thumb-zone, notch / home-
   indicator safe-area padding, and room for the fixed bottom buttons (feedback
   pill bottom-right, Install-app button bottom-left).
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .wrap {
    padding-left: 14px;
    padding-right: 14px;
    /* keep content clear of the fixed thumb-zone buttons */
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .card { padding: 16px 14px; }

  /* Stack horizontal field+action rows so the action goes full-width beneath
     the field, reachable one-handed at the bottom edge. */
  .search-input-row,
  .scan-input-row,
  .attach-row,
  .import-register-controls {
    flex-direction: column;
    align-items: stretch;
  }

  /* Full-width, finger-sized controls. */
  .search-box,
  .scan-box,
  .scan-role-select,
  .search-submit-btn,
  .scan-submit-btn,
  .extract-btn,
  .import-register-btn,
  .field,
  .field input {
    width: 100%;
    box-sizing: border-box;
  }
  .search-submit-btn,
  .scan-submit-btn,
  .extract-btn,
  .import-register-btn,
  .asset-actions button,
  .search-box,
  .scan-box,
  .scan-role-select,
  .field input {
    min-height: 44px;
    font-size: 16px; /* >=16px prevents iOS Safari zoom-on-focus */
  }

  /* Filter chips stay wrapped and tappable (WCAG 2.1 AA target size). */
  .search-type-filters { gap: 6px; }
  .sr-type-chip { min-height: 44px; padding: 8px 12px; }

  /* Single-column card grids on phones. */
  .tt-list,
  .pp-cards-row { grid-template-columns: 1fr; }

  /* DX-20: on a phone the plan-picker reads as a BOTTOM SHEET, not a centered
     modal - it rises from the bottom (thumb zone), spans the width, and rounds
     only its top, matching the OctopusMobileSheet kit shape. */
  .pp-overlay {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
  }
  .pp-dialog {
    max-width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--radius-lg, 16px);
    border-top-right-radius: var(--radius-lg, 16px);
    border-bottom: 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  @media (prefers-reduced-motion: no-preference) {
    .pp-overlay .pp-dialog {
      animation: octo-sheet-rise var(--dur-base, .24s) var(--ease-standard, ease) both;
    }
    @keyframes octo-sheet-rise {
      from { transform: translateY(14px); opacity: .6; }
      to { transform: translateY(0); opacity: 1; }
    }
  }

  /* Trial banner gets a touch more breathing room. */
  .tb-wrap { padding: 10px 14px; }
}

/* Honor the home-indicator inset on the fixed footer regardless of width. */
@supports (padding: env(safe-area-inset-bottom)) {
  .foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ===========================================================================
   L18.8 ACCESSIBILITY (WCAG-AA) - global layer. Additive only: this block is
   appended last so it layers OVER the component rules above without rewriting
   any of them. It applies app-wide (every panel shares this one stylesheet) and
   to the self-injected panel nodes (account/legal/copilot/etc.), so a single
   pass covers keyboard focus, screen-reader utilities, motion, contrast and
   minimum target size across the whole web/ surface. Honesty: visual-only; no
   behaviour, data or copy changes.
   ========================================================================= */

/* --- 2.4.7 Focus Visible -------------------------------------------------
   Many component rules above do `:focus { outline: none; ... }` and signal
   focus only with a border-color change - invisible to many keyboard users and
   removed entirely on elements without a border. A single always-on
   `:focus-visible` ring guarantees a visible, high-contrast keyboard focus
   indicator on EVERY interactive element. `:focus-visible` only matches
   keyboard/AT focus, so mouse users keep the existing quiet styling. The ring
   uses the brand accent with a white offset so it reads on any card/badge tint.
   `!important` is required to win over the scattered `outline: none` rules. */
:focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
/* Belt-and-suspenders for engines without :focus-visible: keep a visible ring
   on real keyboard-focusable controls. Modern engines override this with the
   tighter rule above. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
[role="button"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  /* a mouse click should not paint the keyboard ring; restore the quiet look */
  outline: none;
}

/* --- Screen-reader-only utility + skip link ------------------------------
   `.sr-only` hides content visually while keeping it in the accessibility tree
   (for labels/announcements). `.skip-link` is visually hidden until focused,
   then drops into view as the first tab stop so keyboard users can jump past
   the header straight to the main content (2.4.1 Bypass Blocks). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 300;
  background: var(--card);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus {
  top: 8px;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* --- 2.5.8 Target Size (Minimum) -----------------------------------------
   The desktop layout uses several compact 12px action buttons (~24px tall).
   AA requires a 24x24 CSS-px minimum target; guarantee it for every button and
   the link-style buttons without disturbing their visual padding. The mobile
   media query above already promotes the primary controls to 44px. */
button,
[role="button"],
.link-btn,
.tb-cta-link {
  min-height: 24px;
}

/* --- 2.3 / motion: respect prefers-reduced-motion ------------------------
   Disable transitions/animations and smooth scrolling for users who request
   reduced motion (vestibular safety). Kept narrow: only neutralizes motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- forced-colors (Windows High Contrast) -------------------------------
   In a forced-colors context, keep a system-colored focus ring so the keyboard
   indicator survives when the author palette is replaced. */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
  }
}

/* ===========================================================================
   L16.9 CROSS-DEVICE RESPONSIVE - ONE experience across DESKTOP + MOBILE +
   TABLET/iPad, for BOTH touch and mouse. Appended LAST so it layers OVER the
   component + a11y + mobile rules without rewriting any of them. Additive only:
   same single, readable column the product is designed around - just adapted to
   the device's WIDTH *and* its INPUT TYPE. No behaviour, data, or copy changes.
   Honesty: visual/layout only.

   The pre-existing responsive surface was a single `max-width:640px` block. That
   keyed every touch ergonomic (44px targets, 16px inputs) off WIDTH, so a touch
   tablet/iPad at 768px+ inherited the cramped *desktop* controls - the real
   cross-device gap. This layer fixes that by:
     1. giving the column comfortable width on tablet and large desktop, and
     2. keying finger-sized targets off pointer:coarse (input type), not width,
        so EVERY touch device gets them while mouse users keep the compact look.
   ========================================================================= */

/* --- Tablet / iPad (between phone and desktop, portrait & landscape) --------
   Let the readable column use the comfortable width tablets afford and add a
   little breathing room. Card grids inside already use auto-fill minmax(), so
   they reflow to fill the extra width automatically - no per-grid rules needed. */
@media (min-width: 641px) and (max-width: 1024px) {
  .wrap { max-width: 760px; padding: 20px; }
}

/* --- Large desktop --------------------------------------------------------
   On wide monitors, a modest widening reduces wasted whitespace while keeping
   text line-length ergonomic (we do NOT go full-bleed - readability first). */
@media (min-width: 1280px) {
  .wrap { max-width: 800px; padding: 24px; }
}

/* --- Touch devices of ANY width (the genuine fix) --------------------------
   Key the touch ergonomics off the INPUT TYPE so phone, iPad/tablet, and 2-in-1
   tablet-mode laptops all get 44px targets and 16px inputs (the latter also
   stops iOS Safari zoom-on-focus). A mouse user at the same width is unaffected
   (pointer:fine), so the desktop stays compact. min-height mirrors the existing
   a11y/mobile pattern (44 >= the AA 24px floor), so it only ever enlarges. */
@media (pointer: coarse) {
  button,
  [role="button"],
  .link-btn,
  .tb-cta-link,
  input,
  select,
  textarea,
  .field input,
  .search-box,
  .scan-box,
  .scan-role-select {
    min-height: 44px;
  }
  input,
  select,
  textarea,
  .field input,
  .search-box,
  .scan-box,
  .scan-role-select {
    font-size: 16px; /* >=16px prevents iOS Safari zoom-on-focus */
  }
  .sr-type-chip { min-height: 44px; }
}

/* --- Hover affordances only where a pointer can actually hover -------------
   Guard against "sticky hover" (a hover style latching after a tap) on touch
   screens: scope the interactive cursor cue to genuinely hover-capable, fine
   pointers. Additive - it adds a cursor hint for mouse users without altering
   any existing component hover rule. */
@media (hover: hover) and (pointer: fine) {
  button:hover,
  [role="button"]:hover,
  .link-btn:hover,
  a:hover { cursor: pointer; }
}

/* ===========================================================================
   DX-22 OCEAN THEME HOME + SIDEBAR
   Shared Wave-inspired layout classes for the router/home modules. Kept last so
   this layer overrides older single-column shell rules on desktop while leaving
   the phone bottom nav intact.
   =========================================================================== */

@media (min-width: 1024px) {
  .wrap {
    max-width: 1240px;
    grid-template-columns: 252px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding: 24px;
  }
  .wrap > #vr-nav { grid-column: 1; }
  .wrap > .vr-view { grid-column: 2; }
}

.wave-home {
  border-radius: 10px;
  padding: 24px;
}

.wave-home-intro {
  max-width: 820px;
  margin: 0 auto 22px;
  text-align: center;
}

.wave-home-kicker {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: var(--fs-md);
}

.wave-home-title {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-2xl);
  line-height: 1.18;
  font-weight: 500;
}

.wave-home-subtitle {
  margin: 8px auto 0;
  max-width: 680px;
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.wave-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 920px;
  margin: 0 auto 28px;
}

.wave-metric {
  min-width: 0;
  padding: 16px;
  border: .5px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.wave-metric-value {
  display: block;
  color: var(--text);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 600;
}

.wave-metric-label {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.wave-section-title {
  max-width: 920px;
  margin: 0 auto 12px;
  color: var(--text);
  font-size: var(--fs-lg);
  line-height: 1.3;
  font-weight: 500;
}

.wave-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .78fr);
  grid-template-areas:
    "attention health"
    "changed changed";
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
}

.wave-insight-card {
  min-width: 0;
  padding: 18px;
  border: .5px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.wave-insight-card h3 {
  margin: 0 0 12px;
  font-size: var(--fs-md);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.wave-attention { grid-area: attention; }
.wave-health { grid-area: health; }
.wave-changed { grid-area: changed; }

.wave-health {
  background: linear-gradient(180deg, #f6f9ff 0%, #e8f0fe 100%);
}

.wave-score-bar {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: #d8e2f2;
}

.wave-score-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

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

.wave-action-card {
  min-width: 0;
  min-height: 88px;
  border: 0;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.wave-action-blue { background: var(--act-blue-bg); color: var(--act-blue-ink); }
.wave-action-violet { background: var(--act-violet-bg); color: var(--act-violet-ink); }
.wave-action-teal { background: var(--act-teal-bg); color: var(--act-teal-ink); }
.wave-action-amber { background: var(--act-amber-bg); color: var(--act-amber-ink); }

.wave-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  color: currentColor;
  background: rgba(255, 255, 255, .52);
}

.wave-action-icon svg {
  width: 22px;
  height: 22px;
}

.wave-action-label {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-md);
  line-height: 1.25;
  font-weight: 600;
}

.wave-action-hint {
  display: block;
  margin-top: 2px;
  color: currentColor;
  font-size: var(--fs-sm);
  line-height: 1.35;
  opacity: .82;
}

.wave-mobile-glance {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

@media (max-width: 760px) {
  .wave-home {
    padding: 18px;
  }
  .wave-home-intro {
    text-align: left;
    margin-bottom: 18px;
  }
  .wave-home-title {
    font-size: 24px;
  }
  .wave-metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 22px;
  }
  .wave-insight-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "attention"
      "health"
      "changed";
  }
}

/* ===========================================================================
   APP-DESKTOP-01 WIDE DESKTOP SHELL (rank 38, P0; live deploy review
   2026-06-24, build lite-20260624-090739). Appended LAST so it layers OVER the
   DX-22 ocean shell and the L16.9 desktop tier WITHOUT rewriting either.
   Additive and breakpoint-scoped to >=1024px, so the strong mobile action-card
   home (<=760px) and the 641-1024px tablet column are untouched. Honesty:
   visual/layout only -- no behaviour, data, or copy change.

   Live evidence: at a 1920px viewport the .wrap shell was capped
   max-width:1240px (332px side gutters) and the inner wave-* dashboard regions
   re-centred at ~916-920px, so the app used only ~47.7% of the screen and read
   as a narrow card island floating in empty water. Fix: let the shell AND the
   dashboard regions expand into the viewport while the left nav stays
   fixed-width (the DX-22 252px + minmax(0,1fr) split still applies -- only the
   cap widens) and reading-width TEXT keeps its caps (max-width is for prose
   line-length, never the whole app shell). The full-width sticky .topbar and
   #trial-banner sit OUTSIDE .wrap, so widening the shell aligns the content
   with the existing bars instead of leaving them stranded at the far edges. */
@media (min-width: 1024px) {
  .wrap {
    /* Expand the shell into the monitor with calm page-edge gutters instead of
       centring a 1240px island. Overrides the DX-22 max-width:1240px (later in
       source, equal specificity), keeping its grid-template-columns split. */
    max-width: 1600px;
  }
  /* Dashboard regions fill the content column rather than re-centring at ~920px.
     `margin: 0 auto` resolves to 0 side-margins once the cap is gone, so these
     left-align with the column. The reading-width TEXT blocks
     (.wave-home-intro / .wave-home-subtitle) deliberately keep their caps. */
  .wave-metric-strip,
  .wave-section-title,
  .wave-insight-grid {
    max-width: none;
  }
}

/* =====================================================================
   FIELD-CARD-SYSTEM-01 (Dennis 2026-06-27, Design Direction Implementation)
   ---------------------------------------------------------------------
   A small, reusable "Field Card" launcher/command-button contract that
   existing mobile and desktop launcher cards and command buttons can opt
   into via shared class hooks. Calm OctoVault blue (--accent), plain
   labels, ONE strong SOLID primary action, ONE OUTLINED secondary action.

   ADDITIVE ONLY: surfaces opt in by ADDING `field-card` / `field-btn`
   `field-btn--primary` / `field-btn--secondary` alongside their current
   classes, so the change is thin and fully reversible -- no existing rule
   is modified and no page structure changes. Canonical copy; the launcher
   (web/function-launchers.js) mirrors these rules in its self-contained
   injected style so it renders the same treatment offline. Do NOT sweep
   every page -- establish the reusable classes; surfaces adopt over time.
   ===================================================================== */
.field-card {
  /* Reusable launcher-card surface hook. Holds the calm-blue field tokens
     WITHOUT imposing geometry, so opting an existing card in never
     regresses its layout. */
  --field-accent: var(--accent, #0b57d0);
  --field-accent-strong: var(--accent-2, #1667c0);
}

/* Shared command-button system: ONE base + two visually distinct, reusable
   treatments. */
.field-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-sm, 6px);
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--dur-fast, 200ms) var(--ease-standard, ease),
              border-color var(--dur-fast, 200ms) var(--ease-standard, ease),
              color var(--dur-fast, 200ms) var(--ease-standard, ease);
}
.field-btn:focus-visible {
  outline: 2px solid var(--accent, #0b57d0);
  outline-offset: 2px;
}

/* PRIMARY: strong solid calm-blue fill, white ink -- the obvious main action. */
.field-btn--primary {
  border: 1px solid var(--accent, #0b57d0);
  background: var(--accent, #0b57d0);
  color: #fff;
}
.field-btn--primary:hover {
  background: var(--accent-2, #1667c0);
  border-color: var(--accent-2, #1667c0);
}
.field-btn--primary[disabled] { opacity: .55; cursor: default; }

/* SECONDARY: outlined -- transparent fill, blue border + blue ink -- clearly
   subordinate to the primary while sharing the same blue family. */
.field-btn--secondary {
  border: 1px solid var(--accent, #0b57d0);
  background: transparent;
  color: var(--accent, #0b57d0);
}
.field-btn--secondary:hover { background: var(--accent-soft, #e8f0fe); }
.field-btn--secondary[disabled] { opacity: .55; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .field-btn { transition: none; }
}

/* Wider monitors (>=1440px) get more width plus a denser action grid -- the
   2-3 column desktop layout the acceptance criteria call for, where content
   density warrants it. The four capture actions move from a 2x2 block into one
   comfortable row so the hero band reads as a confident dashboard. */
@media (min-width: 1440px) {
  .wrap {
    max-width: 1760px;
  }
  .wave-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===========================================================================
   DESKTOP-PARITY-URGENT-01
   Dennis's 2026-06-29 live browser review made the earlier "desktop parity"
   source guards insufficient. Desktop must read like the approved mobile
   launcher pattern: clear work areas, 6-8 compact action cards, focused panels,
   useful width, and no old long mixed stack. This is additive and desktop-only;
   it deliberately leaves the locked mobile capture/card pattern untouched.
   =========================================================================== */
@media (min-width: 1024px) {
  body.vr-desktop .vr-view {
    gap: 18px;
    align-content: start;
  }

  body.vr-desktop .vr-view > section.card,
  body.vr-desktop .vr-view > section.ofl-launcher {
    width: 100%;
    min-width: 0;
  }

  body.vr-desktop .ofl-launcher {
    padding: 24px;
  }

  body.vr-desktop .ofl-intro {
    max-width: none;
    margin-bottom: 18px;
  }

  body.vr-desktop .ofl-grid {
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 14px;
  }

  body.vr-desktop .ofl-tile {
    min-height: 132px;
  }

  body.vr-desktop .ofl-focus {
    max-width: none;
  }
}

/* ===========================================================================
   MOBILE-M1-CONSUMER-ACTION-01
   Locked Mobile M1 / Consumer Action visual skin. Mobile-scoped and visual-only:
   no button order, labels, routing, save, connect, create, scan, upload, OCR, or
   file-later behavior changes. This sits last with body.vr-mobile specificity so
   it can calmly polish component styles that are injected by the mobile modules.
   =========================================================================== */
@media (max-width: 760px) {
  body.vr-mobile {
    --m1-bg: #f4f6f8;
    --m1-card: #ffffff;
    --m1-ink: #111827;
    --m1-muted: #667085;
    --m1-line: #e5e7eb;
    --m1-blue: #1d4ed8;
    --m1-blue-soft: #eef4ff;
    --m1-green: #0f766e;
    --m1-green-soft: #ecfdf3;
    --m1-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    --m1-shadow-strong: 0 14px 34px rgba(15, 23, 42, .12);
    background: var(--m1-bg);
    color: var(--m1-ink);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body.vr-mobile .wrap {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 12px 14px calc(96px + env(safe-area-inset-bottom, 0px));
    background: var(--m1-bg);
  }

  body.vr-mobile .vr-view {
    gap: 12px;
    align-content: start;
    min-width: 0;
  }

  body.vr-mobile *,
  body.vr-mobile *::before,
  body.vr-mobile *::after {
    box-sizing: border-box;
  }

  body.vr-mobile button,
  body.vr-mobile input,
  body.vr-mobile select,
  body.vr-mobile textarea {
    font-family: inherit;
  }

  body.vr-mobile button,
  body.vr-mobile [role="button"],
  body.vr-mobile .field-btn,
  body.vr-mobile .link-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  body.vr-mobile .card,
  body.vr-mobile #mobile-capture-grid-card,
  body.vr-mobile #mobile-assets-launcher-card,
  body.vr-mobile .mobile-capture-card,
  body.vr-mobile .mal-card,
  body.vr-mobile .mc-workspace,
  body.vr-mobile .mc-other-options,
  body.vr-mobile .plan-panel,
  body.vr-mobile .assets-panel,
  body.vr-mobile .search-card {
    border: 1px solid var(--m1-line);
    border-radius: 16px;
    background: var(--m1-card);
    box-shadow: var(--m1-shadow);
    color: var(--m1-ink);
  }

  body.vr-mobile .card,
  body.vr-mobile #mobile-capture-grid-card,
  body.vr-mobile #mobile-assets-launcher-card,
  body.vr-mobile .mobile-capture-card,
  body.vr-mobile .mal-card {
    padding: 16px;
  }

  body.vr-mobile .muted,
  body.vr-mobile .small,
  body.vr-mobile .mh-lead,
  body.vr-mobile .mh-tile-lines,
  body.vr-mobile .mh-equipment-hint,
  body.vr-mobile .mh-equipment-detail,
  body.vr-mobile .mh-summary-line,
  body.vr-mobile .mh-ask-hint,
  body.vr-mobile .mal-muted,
  body.vr-mobile .mal-status,
  body.vr-mobile .mc-choice-detail,
  body.vr-mobile .mc-picker-detail,
  body.vr-mobile .asset-mobile-detail {
    color: var(--m1-muted);
  }

  body.vr-mobile .mh-identity {
    gap: 10px;
    margin: 0 0 12px;
  }

  body.vr-mobile .mh-identity-brand {
    gap: 8px;
    min-width: 0;
  }

  body.vr-mobile .mh-identity-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--m1-blue-soft);
    color: var(--m1-blue);
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, .08);
  }

  body.vr-mobile .mh-identity-mark svg {
    width: 27px;
    height: 27px;
  }

  body.vr-mobile .mh-identity-name {
    color: var(--m1-ink);
    font-size: 15px;
    font-weight: 850;
    letter-spacing: 0;
  }

  body.vr-mobile .mh-identity-workspace {
    color: var(--m1-muted);
    font-size: 12px;
  }

  body.vr-mobile .mh-more,
  body.vr-mobile .mal-back,
  body.vr-mobile .mh-summary-toggle,
  body.vr-mobile .mh-summary-rec-hide {
    min-height: 44px;
    border: 1px solid rgba(29, 78, 216, .18);
    border-radius: 999px;
    background: var(--m1-card);
    color: var(--m1-blue);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
    font-weight: 800;
  }

  body.vr-mobile .mh-card .mh-h2,
  body.vr-mobile .wave-home-title {
    margin: 0;
    color: var(--m1-ink);
    font-size: 25px;
    line-height: 1.16;
    font-weight: 850;
    letter-spacing: 0;
  }

  body.vr-mobile .mh-lead,
  body.vr-mobile .wave-home-subtitle {
    margin: 8px 0 16px;
    font-size: 15px;
    line-height: 1.42;
  }

  body.vr-mobile .mh-grid,
  body.vr-mobile .mal-grid,
  body.vr-mobile .mal-onboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
  }

  body.vr-mobile .mh-tile,
  body.vr-mobile .mal-tile,
  body.vr-mobile .wave-action-card {
    min-height: 114px;
    padding: 13px;
    border: 1px solid var(--m1-line);
    border-radius: 14px;
    background: var(--m1-card);
    color: var(--m1-ink);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
    transform: translateZ(0);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease,
                background .14s ease;
  }

  body.vr-mobile .mh-tile.wave-action-blue,
  body.vr-mobile .mal-tile.wave-action-blue,
  body.vr-mobile .wave-action-card.wave-action-blue {
    border-color: rgba(12, 68, 124, .14);
    background: var(--act-blue-bg, #dbeafe);
    color: var(--act-blue-ink, #0c447c);
  }

  body.vr-mobile .mh-tile.wave-action-teal,
  body.vr-mobile .mal-tile.wave-action-teal,
  body.vr-mobile .wave-action-card.wave-action-teal {
    border-color: rgba(7, 94, 84, .14);
    background: var(--act-teal-bg, #ccfbf1);
    color: var(--act-teal-ink, #075e54);
  }

  body.vr-mobile .mh-tile.wave-action-violet,
  body.vr-mobile .mal-tile.wave-action-violet,
  body.vr-mobile .wave-action-card.wave-action-violet {
    border-color: rgba(60, 52, 137, .14);
    background: var(--act-violet-bg, #ede9fe);
    color: var(--act-violet-ink, #3c3489);
  }

  body.vr-mobile .mh-tile.wave-action-amber,
  body.vr-mobile .mal-tile.wave-action-amber,
  body.vr-mobile .wave-action-card.wave-action-amber {
    border-color: rgba(122, 75, 0, .14);
    background: var(--act-amber-bg, #fef3c7);
    color: var(--act-amber-ink, #7a4b00);
  }

  body.vr-mobile .mh-tile:active,
  body.vr-mobile .mal-tile:active,
  body.vr-mobile .wave-action-card:active,
  body.vr-mobile .mh-ask:active,
  body.vr-mobile .mc-choice-card:active,
  body.vr-mobile .mc-picker-row:active,
  body.vr-mobile .asset-mobile-row:active,
  body.vr-mobile .mal-asset-row:active {
    transform: scale(.985);
  }

  body.vr-mobile .mh-tile-icon,
  body.vr-mobile .mal-tile-icon,
  body.vr-mobile .wave-action-icon,
  body.vr-mobile .mh-ask-ic {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--m1-blue-soft);
    color: var(--m1-blue);
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, .08);
  }

  body.vr-mobile .mh-tile.wave-action-blue .mh-tile-icon,
  body.vr-mobile .mh-tile.wave-action-teal .mh-tile-icon,
  body.vr-mobile .mh-tile.wave-action-violet .mh-tile-icon,
  body.vr-mobile .mh-tile.wave-action-amber .mh-tile-icon,
  body.vr-mobile .mal-tile.wave-action-blue .mal-tile-icon,
  body.vr-mobile .mal-tile.wave-action-teal .mal-tile-icon,
  body.vr-mobile .mal-tile.wave-action-violet .mal-tile-icon,
  body.vr-mobile .mal-tile.wave-action-amber .mal-tile-icon,
  body.vr-mobile .wave-action-card.wave-action-blue .wave-action-icon,
  body.vr-mobile .wave-action-card.wave-action-teal .wave-action-icon,
  body.vr-mobile .wave-action-card.wave-action-violet .wave-action-icon,
  body.vr-mobile .wave-action-card.wave-action-amber .wave-action-icon {
    background: rgba(255, 255, 255, .58);
    color: currentColor;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .44);
  }

  body.vr-mobile .mh-tile-icon svg,
  body.vr-mobile .mal-tile-icon svg,
  body.vr-mobile .wave-action-icon svg,
  body.vr-mobile .mh-ask-ic svg {
    width: 22px;
    height: 22px;
  }

  body.vr-mobile .mh-tile-label,
  body.vr-mobile .mal-tile-label,
  body.vr-mobile .wave-action-label {
    margin-top: 9px;
    color: var(--m1-ink);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  body.vr-mobile .mh-tile.wave-action-blue .mh-tile-label,
  body.vr-mobile .mh-tile.wave-action-teal .mh-tile-label,
  body.vr-mobile .mh-tile.wave-action-violet .mh-tile-label,
  body.vr-mobile .mh-tile.wave-action-amber .mh-tile-label,
  body.vr-mobile .mal-tile.wave-action-blue .mal-tile-label,
  body.vr-mobile .mal-tile.wave-action-teal .mal-tile-label,
  body.vr-mobile .mal-tile.wave-action-violet .mal-tile-label,
  body.vr-mobile .mal-tile.wave-action-amber .mal-tile-label,
  body.vr-mobile .wave-action-card.wave-action-blue .wave-action-label,
  body.vr-mobile .wave-action-card.wave-action-teal .wave-action-label,
  body.vr-mobile .wave-action-card.wave-action-violet .wave-action-label,
  body.vr-mobile .wave-action-card.wave-action-amber .wave-action-label {
    color: currentColor;
  }

  body.vr-mobile .mh-tile-lines,
  body.vr-mobile .mal-tile-detail,
  body.vr-mobile .wave-action-hint {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.32;
    overflow-wrap: anywhere;
  }

  body.vr-mobile .mh-tile.wave-action-blue .mh-tile-lines,
  body.vr-mobile .mh-tile.wave-action-teal .mh-tile-lines,
  body.vr-mobile .mh-tile.wave-action-violet .mh-tile-lines,
  body.vr-mobile .mh-tile.wave-action-amber .mh-tile-lines,
  body.vr-mobile .mal-tile.wave-action-blue .mal-tile-detail,
  body.vr-mobile .mal-tile.wave-action-teal .mal-tile-detail,
  body.vr-mobile .mal-tile.wave-action-violet .mal-tile-detail,
  body.vr-mobile .mal-tile.wave-action-amber .mal-tile-detail,
  body.vr-mobile .wave-action-card.wave-action-blue .wave-action-hint,
  body.vr-mobile .wave-action-card.wave-action-teal .wave-action-hint,
  body.vr-mobile .wave-action-card.wave-action-violet .wave-action-hint,
  body.vr-mobile .wave-action-card.wave-action-amber .wave-action-hint {
    color: currentColor;
    opacity: .82;
  }

  body.vr-mobile .eqm-value-row,
  body.vr-mobile .rf-value-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 10px 0 0;
  }

  body.vr-mobile .rf-value-row {
    margin-top: 8px;
  }

  body.vr-mobile .eqm-value-btn,
  body.vr-mobile .rf-value-btn {
    width: 100%;
    min-height: 72px;
    padding: 14px 16px;
    border-radius: 18px;
    box-shadow: 0 9px 24px rgba(15, 23, 42, .08);
    font-weight: 850;
  }

  body.vr-mobile .eqm-value-btn {
    border-color: rgba(15, 118, 110, .18);
    background: var(--m1-green-soft);
    color: var(--m1-green);
  }

  body.vr-mobile .rf-value-btn {
    border-color: rgba(29, 78, 216, .18);
    background: var(--m1-blue-soft);
    color: var(--m1-blue);
  }

  body.vr-mobile .eqm-value-label,
  body.vr-mobile .rf-value-label {
    color: currentColor;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.18;
  }

  body.vr-mobile .eqm-value-hint,
  body.vr-mobile .rf-value-hint {
    color: currentColor;
    font-size: 12px;
    line-height: 1.28;
    opacity: .78;
  }

  body.vr-mobile .ns-strip {
    margin: 8px 0 0;
  }

  body.vr-mobile .ns-strip-btn {
    min-height: 50px;
    padding: 11px 13px;
    border: 1px solid rgba(122, 75, 0, .18);
    border-radius: 14px;
    background: var(--m1-amber-soft);
    color: var(--m1-amber);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
  }

  body.vr-mobile .ns-strip-icon {
    display: none;
  }

  body.vr-mobile .ns-strip-label {
    color: currentColor;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.18;
  }

  body.vr-mobile .ns-strip-hint {
    color: currentColor;
    font-size: 12px;
    line-height: 1.28;
    opacity: .78;
  }

  body.vr-mobile .ns-panel {
    margin: 12px 0 0;
    padding: 13px;
    border: 1px solid var(--m1-line);
    border-radius: 18px;
    background: var(--m1-card);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
  }

  body.vr-mobile .ns-panel-head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  body.vr-mobile .ns-panel-copy {
    flex: 1 1 170px;
    min-width: 0;
  }

  body.vr-mobile .ns-panel-title {
    color: var(--m1-ink);
    font-size: 17px;
    font-weight: 850;
  }

  body.vr-mobile .ns-panel-intro {
    color: var(--m1-muted);
    font-size: 13px;
    line-height: 1.35;
  }

  body.vr-mobile .ns-open-full {
    flex: 0 1 auto;
    width: auto;
    margin-left: auto;
    min-height: 40px;
    padding: 0 13px;
    border-radius: 14px;
    background: var(--m1-amber-soft);
    color: var(--m1-amber);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
  }

  body.vr-mobile .ns-panel-body .ns-list {
    gap: 8px;
  }

  body.vr-mobile .ns-panel-body .ns-card {
    padding: 10px 11px;
    border-radius: 13px;
    background: #fff;
  }

  body.vr-mobile .ns-panel-body .ns-card-title {
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.22;
  }

  body.vr-mobile .ns-panel-body .ns-card-detail {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.34;
  }

  body.vr-mobile .ns-panel-body .ns-card-source {
    display: none;
  }

  body.vr-mobile .ns-panel-body .ns-jump {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 850;
  }

  body.vr-mobile .eqm-screen,
  body.vr-mobile .rf-screen,
  body.vr-mobile .ns-screen {
    margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--m1-line);
    border-radius: 18px;
    background: var(--m1-card);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
  }

  body.vr-mobile .eqm-title,
  body.vr-mobile .rf-title,
  body.vr-mobile .ns-title {
    color: var(--m1-ink);
    font-size: 20px;
    font-weight: 850;
    line-height: 1.18;
  }

  body.vr-mobile .eqm-back,
  body.vr-mobile .rf-back,
  body.vr-mobile .ns-back {
    min-height: 38px;
    border-radius: 12px;
    border-color: var(--m1-line);
    background: #fff;
    color: var(--m1-ink);
    font-weight: 800;
  }

  body.vr-mobile .eqm-sub,
  body.vr-mobile .rf-sub,
  body.vr-mobile .ns-sub {
    color: var(--m1-muted);
    font-size: 13px;
    line-height: 1.45;
  }

  body.vr-mobile .mh-ask,
  body.vr-mobile .wave-ask-bar {
    min-height: 70px;
    padding: 14px 16px;
    border: 1px solid var(--m1-line);
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .09);
  }

  body.vr-mobile .mh-ask-label {
    color: var(--m1-ink);
    font-size: 16px;
    font-weight: 850;
  }

  body.vr-mobile .mh-equipment-toggle {
    min-height: 36px;
    padding: 0 12px;
    border-color: var(--m1-line);
    border-radius: 999px;
    background: #fff;
    color: var(--m1-ink);
    font-weight: 850;
  }

  body.vr-mobile .mh-equipment,
  body.vr-mobile .mh-summary {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--m1-line);
  }

  body.vr-mobile #owner-notes-section {
    margin-top: -6px;
    padding: 12px;
  }

  body.vr-mobile #owner-notes-section h2 {
    margin: 0 0 6px;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 850;
  }

  body.vr-mobile #owner-notes-section #on-intro:empty,
  body.vr-mobile #owner-notes-section #on-out:empty {
    display: none;
  }

  body.vr-mobile #owner-notes-section .on-note-blurb {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.28;
  }

  body.vr-mobile #owner-notes-section .on-row {
    gap: 6px;
    margin: 6px 0;
  }

  body.vr-mobile #owner-notes-section textarea {
    min-height: 48px;
  }

  body.vr-mobile .mh-equipment-title,
  body.vr-mobile .mh-summary-title,
  body.vr-mobile .mh-summary-insight-title {
    color: var(--m1-ink);
    font-weight: 850;
  }

  body.vr-mobile .mh-equipment-card,
  body.vr-mobile .mh-summary-metric,
  body.vr-mobile .mh-summary-rec,
  body.vr-mobile .asset-card,
  body.vr-mobile .asset-mobile-row,
  body.vr-mobile .mal-asset-row,
  body.vr-mobile .mal-mini-row,
  body.vr-mobile .mal-check-row,
  body.vr-mobile .mc-choice-card,
  body.vr-mobile .mc-picker-row,
  body.vr-mobile .mc-link-photo {
    border: 1px solid var(--m1-line);
    border-radius: 13px;
    background: var(--m1-card);
    box-shadow: 0 5px 16px rgba(15, 23, 42, .06);
    color: var(--m1-ink);
  }

  body.vr-mobile .mh-equipment-card,
  body.vr-mobile .asset-mobile-row,
  body.vr-mobile .mal-asset-row,
  body.vr-mobile .mc-picker-row {
    min-height: 62px;
    padding: 10px 11px;
  }

  body.vr-mobile .mh-summary-metric,
  body.vr-mobile .mh-summary-rec {
    padding: 9px;
  }

  body.vr-mobile .mh-summary-bar {
    background: #dbe4ef;
  }

  body.vr-mobile .mh-summary-bar span {
    background: var(--m1-green);
  }

  body.vr-mobile .mh-equipment-name,
  body.vr-mobile .asset-mobile-name,
  body.vr-mobile .mal-asset-name,
  body.vr-mobile .mc-picker-name,
  body.vr-mobile .mc-choice-title {
    color: var(--m1-ink);
    font-weight: 850;
    letter-spacing: 0;
  }

  body.vr-mobile .mal-focus {
    display: grid;
    gap: 12px;
  }

  body.vr-mobile .mal-focus-head {
    align-items: center;
    gap: 10px;
    margin: 0 0 2px;
  }

  body.vr-mobile .mal-focus-copy {
    min-width: 0;
  }

  body.vr-mobile .mal-breadcrumb {
    color: var(--m1-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0;
  }

  body.vr-mobile .mal-focus-title {
    color: var(--m1-ink);
    font-size: 20px;
    line-height: 1.18;
    font-weight: 850;
    letter-spacing: 0;
  }

  body.vr-mobile .mal-list,
  body.vr-mobile .mal-picker,
  body.vr-mobile .mc-picker-list,
  body.vr-mobile .assets-mobile-list {
    gap: 9px;
  }

  body.vr-mobile .mal-primary,
  body.vr-mobile .field-btn--primary,
  body.vr-mobile .mc-save-equipment-btn,
  body.vr-mobile .mc-photo-btn,
  body.vr-mobile .search-submit-btn,
  body.vr-mobile .scan-submit-btn,
  body.vr-mobile .import-register-btn,
  body.vr-mobile .extract-btn {
    min-height: 52px;
    border: 1px solid var(--m1-blue);
    border-radius: 13px;
    background: var(--m1-blue);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(29, 78, 216, .22);
    font-weight: 850;
    letter-spacing: 0;
  }

  body.vr-mobile .mal-secondary,
  body.vr-mobile .field-btn--secondary,
  body.vr-mobile .mc-inbound-action.mal-secondary,
  body.vr-mobile .load-more-btn {
    min-height: 48px;
    border: 1px solid rgba(29, 78, 216, .22);
    border-radius: 13px;
    background: var(--m1-card);
    color: var(--m1-blue);
    box-shadow: 0 5px 16px rgba(15, 23, 42, .06);
    font-weight: 850;
  }

  body.vr-mobile .mobile-capture-card .mal-onboard-actions.mc-inbound-actions,
  body.vr-mobile .mal-onboard-actions,
  body.vr-mobile .mc-choice-grid,
  body.vr-mobile .mc-create-form {
    gap: 10px;
  }

  body.vr-mobile .mobile-capture-card .mal-primary.mc-inbound-action,
  body.vr-mobile .mobile-capture-card .mal-secondary.mc-inbound-action {
    min-height: 54px;
    border-radius: 14px;
    padding: 11px 12px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
    font-weight: 850;
  }

  body.vr-mobile .mobile-capture-card .mal-primary.mc-inbound-action {
    background: var(--m1-blue);
    border-color: var(--m1-blue);
    color: #ffffff;
  }

  body.vr-mobile .mobile-capture-card .mal-secondary.mc-inbound-action {
    background: var(--m1-card);
    border-color: rgba(29, 78, 216, .22);
    color: var(--m1-blue);
  }

  body.vr-mobile .mc-photo-stage {
    margin-top: 10px;
  }

  body.vr-mobile .mc-photo-frame,
  body.vr-mobile .mc-inbound-visual.mal-onboard-visual,
  body.vr-mobile .mal-onboard-visual {
    border: 1px solid var(--m1-line);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 7px 20px rgba(15, 23, 42, .07);
    overflow: hidden;
  }

  body.vr-mobile .mc-photo-frame {
    min-height: 186px;
  }

  body.vr-mobile .mc-inbound-visual.mal-onboard-visual,
  body.vr-mobile .mal-onboard-visual {
    min-height: 168px;
    margin-bottom: 12px;
  }

  body.vr-mobile .mc-photo-placeholder,
  body.vr-mobile .mal-onboard-symbol,
  body.vr-mobile .mc-inbound-visual .mal-onboard-symbol {
    border-radius: 14px;
    background: var(--m1-blue-soft);
    color: var(--m1-blue);
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, .08);
  }

  body.vr-mobile .mal-onboard-visual-photo .mal-onboard-symbol,
  body.vr-mobile .mc-inbound-visual.mal-onboard-visual-photo .mal-onboard-symbol {
    background: var(--m1-green-soft);
    color: var(--m1-green);
  }

  body.vr-mobile .mc-photo-overlay {
    background: linear-gradient(180deg, rgba(6, 95, 70, .88) 0%, rgba(6, 95, 70, .58) 58%, rgba(6, 95, 70, 0) 100%);
  }

  body.vr-mobile .mc-photo-overlay h4,
  body.vr-mobile .mc-code-result h4,
  body.vr-mobile .mobile-capture-card #mc-scan-result h4,
  body.vr-mobile .mc-workspace-head h4 {
    color: var(--m1-ink);
    font-size: 18px;
    line-height: 1.22;
    font-weight: 850;
    letter-spacing: 0;
  }

  body.vr-mobile .mc-photo-overlay h4,
  body.vr-mobile .mc-photo-overlay p {
    color: #ffffff;
  }

  body.vr-mobile .mc-status,
  body.vr-mobile .mal-status {
    min-height: 18px;
    line-height: 1.38;
  }

  body.vr-mobile .mc-draft,
  body.vr-mobile .mc-code-result {
    padding: 14px;
  }

  body.vr-mobile .mc-transcript,
  body.vr-mobile .mc-code-facts {
    border: 1px solid rgba(29, 78, 216, .13);
    border-radius: 13px;
    background: var(--m1-blue-soft);
    color: var(--m1-ink);
    padding: 10px 11px;
    line-height: 1.42;
  }

  body.vr-mobile .mc-found-list {
    border-color: var(--m1-line);
    border-radius: 13px;
    background: #f8fbff;
  }

  body.vr-mobile .mc-form-field,
  body.vr-mobile .mal-manual-label {
    gap: 5px;
    color: var(--m1-muted);
    font-weight: 850;
  }

  body.vr-mobile .mc-form-input,
  body.vr-mobile .mal-manual-input,
  body.vr-mobile .search-box,
  body.vr-mobile .scan-box,
  body.vr-mobile .scan-role-select,
  body.vr-mobile .field input,
  body.vr-mobile input,
  body.vr-mobile select,
  body.vr-mobile textarea {
    min-height: 50px;
    border: 1px solid var(--m1-line);
    border-radius: 13px;
    background: #ffffff;
    color: var(--m1-ink);
    font-size: 16px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .04);
  }

  body.vr-mobile .mc-form-input:focus,
  body.vr-mobile .mal-manual-input:focus,
  body.vr-mobile .search-box:focus,
  body.vr-mobile .scan-box:focus,
  body.vr-mobile input:focus,
  body.vr-mobile select:focus,
  body.vr-mobile textarea:focus {
    border-color: rgba(29, 78, 216, .55);
    box-shadow: 0 0 0 4px rgba(29, 78, 216, .12);
  }

  body.vr-mobile .mc-link-photo {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  body.vr-mobile .mc-link-thumb {
    width: 82px;
    height: 62px;
    border-radius: 12px;
  }

  body.vr-mobile .mc-video {
    border-radius: 16px;
    border-color: var(--m1-line);
    background: #0b1220;
    box-shadow: var(--m1-shadow);
  }

  body.vr-mobile .asset-mobile-code,
  body.vr-mobile .mal-asset-code,
  body.vr-mobile .asset-status-badge {
    border-radius: 999px;
    background: var(--m1-blue-soft);
    color: var(--m1-blue);
    font-weight: 850;
  }

  body.vr-mobile #octo-bottom-nav {
    left: max(0px, calc((100vw - 430px) / 2));
    right: max(0px, calc((100vw - 430px) / 2));
    border-top: 1px solid var(--m1-line);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -10px 28px rgba(15, 23, 42, .10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.vr-mobile #octo-bottom-nav .octo-bnav-item {
    min-height: 58px;
    color: var(--m1-muted);
    font-size: 11px;
    font-weight: 750;
  }

  body.vr-mobile #octo-bottom-nav .octo-bnav-ic {
    width: 28px;
    height: 28px;
    border-radius: 10px;
  }

  body.vr-mobile #octo-bottom-nav .octo-bnav-item.octo-bnav-on {
    color: var(--m1-blue);
    font-weight: 850;
  }

  body.vr-mobile #octo-bottom-nav .octo-bnav-item.octo-bnav-on .octo-bnav-ic {
    background: var(--m1-blue-soft);
    color: var(--m1-blue);
  }

  body.vr-mobile .octo-bnav-more-item {
    border-color: var(--m1-line);
    border-radius: 13px;
    background: var(--m1-card);
    box-shadow: 0 5px 16px rgba(15, 23, 42, .06);
    color: var(--m1-ink);
    font-weight: 800;
  }

  body.vr-mobile #app-version {
    left: max(12px, calc((100vw - 430px) / 2 + 12px));
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    max-width: min(72vw, 320px);
    padding: 4px 8px;
    border: 1px solid rgba(102, 112, 133, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: var(--m1-muted);
    box-shadow: 0 5px 16px rgba(15, 23, 42, .06);
    opacity: .9;
  }

  body.vr-mobile .mh-tile-label,
  body.vr-mobile .mh-tile-lines,
  body.vr-mobile .mal-tile-label,
  body.vr-mobile .mal-tile-detail,
  body.vr-mobile .mh-ask-label,
  body.vr-mobile .mh-ask-hint,
  body.vr-mobile .mal-focus-title,
  body.vr-mobile .mc-choice-title,
  body.vr-mobile .mc-choice-detail,
  body.vr-mobile .mc-picker-name,
  body.vr-mobile .mc-picker-detail,
  body.vr-mobile .asset-mobile-name,
  body.vr-mobile .asset-mobile-detail,
  body.vr-mobile .mal-asset-name,
  body.vr-mobile .mal-asset-detail {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  @media (prefers-reduced-motion: reduce) {
    body.vr-mobile .mh-tile,
    body.vr-mobile .mal-tile,
    body.vr-mobile .wave-action-card,
    body.vr-mobile .mh-ask,
    body.vr-mobile .mc-choice-card,
    body.vr-mobile .mc-picker-row,
    body.vr-mobile .asset-mobile-row,
    body.vr-mobile .mal-asset-row {
      transition: none;
    }

    body.vr-mobile .mh-tile:active,
    body.vr-mobile .mal-tile:active,
    body.vr-mobile .wave-action-card:active,
    body.vr-mobile .mh-ask:active,
    body.vr-mobile .mc-choice-card:active,
    body.vr-mobile .mc-picker-row:active,
    body.vr-mobile .asset-mobile-row:active,
    body.vr-mobile .mal-asset-row:active {
      transform: none;
    }
  }
}

/* ===========================================================================
   DESKTOP-D1-WAVE-OPERATIONS-01
   Locked Desktop D1 / Wave Operations visual skin. Desktop-scoped and visual-only:
   use the full page width, keep the left navigation, make each page read as a
   calm launcher/work area, and preserve all existing tile destinations/workflows.
   =========================================================================== */
@media (min-width: 1024px) {
  body.vr-desktop {
    --d1-bg: #f6f8fb;
    --d1-panel: #ffffff;
    --d1-line: #dfe5ee;
    --d1-ink: #17202a;
    --d1-muted: #637083;
    --d1-blue: #1769e0;
    --d1-blue-dark: #0f4ea8;
    --d1-blue-soft: #eaf2ff;
    --d1-green: #16865c;
    --d1-green-soft: #edf8f4;
    --d1-amber: #a66a00;
    --d1-amber-soft: #fff7e6;
    --d1-shadow: 0 10px 28px rgba(22, 38, 61, .08);
    --d1-shadow-soft: 0 8px 20px rgba(15, 23, 42, .07);
    --bg: var(--d1-bg);
    --bg-2: #f8fbff;
    --card: var(--d1-panel);
    --line: var(--d1-line);
    --text: var(--d1-ink);
    --muted: var(--d1-muted);
    --accent: var(--d1-blue);
    --accent-2: var(--d1-blue-dark);
    --accent-soft: var(--d1-blue-soft);
    background: var(--d1-bg);
    color: var(--d1-ink);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
  }

  /* DESKTOP-D1-TYPOGRAPHY-POLISH-01: remove the old decorative octopus mark on
     desktop while keeping the text brand, and trade tiny-heavy labels for more
     readable business-app typography. Mobile keeps its sharper M1 identity. */
  body.vr-desktop .brand-mark,
  body.vr-desktop .topbar .brand,
  body.vr-desktop .vr-brand-mark,
  body.vr-desktop .dh-mascot {
    display: none !important;
  }

  body.vr-desktop .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 58px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--d1-line);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.vr-desktop .brand {
    gap: 0;
  }

  body.vr-desktop .brand-mark {
    width: 30px;
    height: 30px;
  }

  body.vr-desktop .brand-name {
    color: var(--d1-ink);
    font-size: 18px;
    font-weight: 760;
    letter-spacing: 0;
  }

  body.vr-desktop .topbar-more,
  body.vr-desktop .install-app-slot button {
    min-height: 40px;
    border-color: rgba(23, 105, 224, .18);
    border-radius: 999px;
    background: var(--d1-panel);
    color: var(--d1-blue-dark);
    box-shadow: 0 5px 14px rgba(15, 23, 42, .05);
    font-weight: 700;
  }

  body.vr-desktop .wrap {
    width: 100%;
    max-width: 1760px;
    margin: 0 auto;
    padding: 24px;
    grid-template-columns: 292px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }

  body.vr-desktop .wrap > #vr-nav {
    grid-column: 1;
  }

  body.vr-desktop .wrap > .vr-view {
    grid-column: 2;
  }

  body.vr-desktop .vr-nav {
    top: 78px;
    gap: 12px;
    padding: 18px 14px;
    border: 1px solid var(--d1-line);
    border-radius: 12px;
    background: var(--d1-panel);
    box-shadow: var(--d1-shadow);
  }

  body.vr-desktop .vr-brand {
    padding: 2px 4px 12px;
  }

  body.vr-desktop .vr-brand-name {
    color: var(--d1-ink);
    font-size: 19px;
    font-weight: 760;
    letter-spacing: 0;
  }

  body.vr-desktop .vr-brand-workspace {
    color: var(--d1-muted);
    font-size: 13px;
  }

  body.vr-desktop .vr-nav-items {
    gap: 12px;
  }

  body.vr-desktop .vr-sidebar-group {
    gap: 6px;
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(217, 225, 236, .82);
  }

  body.vr-desktop .vr-sidebar-group:first-child {
    border-top: 0;
    padding-top: 0;
  }

  body.vr-desktop .vr-group-heading {
    padding: 0 6px 2px;
    color: #6d7788;
    font-size: 12px;
    font-weight: 740;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  body.vr-desktop .vr-group-panel {
    gap: 6px;
  }

  body.vr-desktop .vr-tab {
    min-height: 42px;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--d1-muted);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.32;
    letter-spacing: 0;
  }

  body.vr-desktop .vr-tab[data-nav-action],
  body.vr-desktop .vr-tab[data-nav-alias] {
    width: 100%;
    text-align: left;
  }

  body.vr-desktop .vr-tab:hover {
    background: rgba(23, 105, 224, .07);
    color: var(--d1-blue-dark);
  }

  body.vr-desktop .vr-tab.vr-active {
    background: var(--d1-blue-soft);
    color: var(--d1-blue-dark);
    font-weight: 760;
  }

  body.vr-desktop .vr-group-toggle {
    color: var(--d1-muted);
    font-size: 14px;
    font-weight: 650;
  }

  body.vr-desktop .vr-view {
    gap: 16px;
    align-content: start;
  }

  body.vr-desktop .card,
  body.vr-desktop .dh-card,
  body.vr-desktop .ofl-launcher,
  body.vr-desktop .ofl-focus,
  body.vr-desktop .plan-panel,
  body.vr-desktop .assets-panel,
  body.vr-desktop .asset-card,
  body.vr-desktop .qr-card,
  body.vr-desktop .search-card,
  body.vr-desktop .contract-card,
  body.vr-desktop .qa-card,
  body.vr-desktop .maint-card,
  body.vr-desktop .tt-card {
    border: 1px solid var(--d1-line);
    border-radius: 8px;
    background: var(--d1-panel);
    box-shadow: var(--d1-shadow);
    color: var(--d1-ink);
  }

  body.vr-desktop .card,
  body.vr-desktop .dh-card,
  body.vr-desktop .ofl-launcher {
    padding: 22px;
  }

  body.vr-desktop .card h2,
  body.vr-desktop .card h3,
  body.vr-desktop .ofl-intro-title,
  body.vr-desktop .dh-greeting,
  body.vr-desktop .dh-promise-tag,
  body.vr-desktop .wave-home-title {
    color: var(--d1-ink);
    font-weight: 740;
    letter-spacing: 0;
  }

  body.vr-desktop .muted,
  body.vr-desktop .small,
  body.vr-desktop .ofl-intro-text,
  body.vr-desktop .ofl-muted,
  body.vr-desktop .ofl-status,
  body.vr-desktop .dh-summary,
  body.vr-desktop .dh-promise-sub,
  body.vr-desktop .dh-row-msg,
  body.vr-desktop .dh-note,
  body.vr-desktop .wave-home-subtitle {
    color: var(--d1-muted);
    font-size: 14px;
    line-height: 1.5;
  }

  body.vr-desktop #desktop-home-card {
    padding: 22px;
  }

  body.vr-desktop #desktop-home-card .dh-welcome {
    max-width: none;
    margin: 0 0 18px;
    text-align: left;
  }

  body.vr-desktop #desktop-home-card .dh-greeting {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 740;
  }

  body.vr-desktop #desktop-home-card .dh-summary {
    max-width: 980px;
    font-size: 16px;
    line-height: 1.52;
  }

  body.vr-desktop .dh-actions,
  body.vr-desktop .wave-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body.vr-desktop .dh-action,
  body.vr-desktop .wave-action-card,
  body.vr-desktop .ofl-tile,
  body.vr-desktop .dh-primary-btn,
  body.vr-desktop .dh-dest {
    border: 1px solid var(--d1-line);
    border-radius: 8px;
    box-shadow: var(--d1-shadow-soft);
    transform: translateZ(0);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }

  body.vr-desktop .dh-action,
  body.vr-desktop .wave-action-card,
  body.vr-desktop .ofl-tile {
    min-height: 118px;
    padding: 16px;
  }

  body.vr-desktop .dh-action {
    align-items: flex-start;
    justify-content: center;
    text-align: left;
  }

  body.vr-desktop .dh-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 18px;
  }

  body.vr-desktop .dh-value-card {
    min-height: 184px;
    padding: 18px;
    border: 1px solid var(--d1-line);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--d1-shadow-soft);
  }

  body.vr-desktop .dh-value-card-fixes {
    background: linear-gradient(180deg, #ffffff 0%, #f7fffb 100%);
  }

  body.vr-desktop .dh-value-top {
    gap: 14px;
  }

  body.vr-desktop .dh-value-title {
    color: var(--d1-ink);
    font-size: 20px;
    font-weight: 780;
    line-height: 1.18;
  }

  body.vr-desktop .dh-value-text {
    max-width: 58ch;
    color: var(--d1-muted);
    font-size: 14px;
    line-height: 1.45;
  }

  body.vr-desktop .dh-value-toggle {
    min-height: 38px;
    border-color: rgba(23, 105, 224, .22);
    background: #ffffff;
    color: var(--d1-blue-dark);
    box-shadow: 0 5px 14px rgba(15, 23, 42, .05);
    font-weight: 740;
  }

  body.vr-desktop .dh-value-toggle[data-expanded="true"] {
    background: var(--d1-blue-soft);
    border-color: rgba(23, 105, 224, .42);
  }

  body.vr-desktop .dh-value-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
  }

  body.vr-desktop .dh-value-pill,
  body.vr-desktop .dh-value-item {
    border: 1px solid var(--d1-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 5px 14px rgba(15, 23, 42, .04);
  }

  body.vr-desktop .dh-value-pill {
    padding: 9px 10px;
  }

  body.vr-desktop .dh-value-pill-label {
    color: var(--d1-muted);
    font-size: 12px;
    font-weight: 620;
    line-height: 1.25;
  }

  body.vr-desktop .dh-value-pill-value {
    color: var(--d1-ink);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.3;
  }

  body.vr-desktop .dh-value-detail {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--d1-line);
  }

  body.vr-desktop .dh-value-list {
    gap: 8px;
  }

  body.vr-desktop .dh-value-item {
    padding: 9px 10px;
    color: var(--d1-ink);
    font-size: 13px;
    line-height: 1.4;
  }

  body.vr-desktop .dh-value-actions {
    gap: 8px;
    margin-top: 12px;
  }

  body.vr-desktop .dh-value-action {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--d1-blue);
    border-radius: 8px;
    background: var(--d1-blue);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(23, 105, 224, .16);
    font-weight: 740;
  }

  body.vr-desktop .dh-value-action-troubleshoot {
    border-color: rgba(23, 105, 224, .22);
    background: #ffffff;
    color: var(--d1-blue-dark);
    box-shadow: 0 5px 14px rgba(15, 23, 42, .05);
  }

  body.vr-desktop .dh-action:hover,
  body.vr-desktop .wave-action-card:hover,
  body.vr-desktop .ofl-tile:hover,
  body.vr-desktop .dh-primary-btn:hover,
  body.vr-desktop .dh-dest:hover {
    border-color: rgba(23, 105, 224, .26);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .10);
  }

  body.vr-desktop .dh-action:active,
  body.vr-desktop .wave-action-card:active,
  body.vr-desktop .ofl-tile:active,
  body.vr-desktop .dh-primary-btn:active,
  body.vr-desktop .dh-dest:active {
    transform: scale(.99);
  }

  body.vr-desktop .wave-action-blue,
  body.vr-desktop .ofl-tile.wave-action-blue,
  body.vr-desktop .dh-action.wave-action-blue {
    border-color: rgba(12, 68, 124, .15);
    background: var(--act-blue-bg);
    color: var(--act-blue-ink);
  }

  body.vr-desktop .wave-action-teal,
  body.vr-desktop .ofl-tile.wave-action-teal,
  body.vr-desktop .dh-action.wave-action-teal {
    border-color: rgba(7, 94, 84, .15);
    background: var(--act-teal-bg);
    color: var(--act-teal-ink);
  }

  body.vr-desktop .wave-action-violet,
  body.vr-desktop .ofl-tile.wave-action-violet,
  body.vr-desktop .dh-action.wave-action-violet {
    border-color: rgba(60, 52, 137, .15);
    background: var(--act-violet-bg);
    color: var(--act-violet-ink);
  }

  body.vr-desktop .wave-action-amber,
  body.vr-desktop .ofl-tile.wave-action-amber,
  body.vr-desktop .dh-action.wave-action-amber {
    border-color: rgba(122, 75, 0, .15);
    background: var(--act-amber-bg);
    color: var(--act-amber-ink);
  }

  body.vr-desktop .wave-action-icon,
  body.vr-desktop .ofl-tile-icon,
  body.vr-desktop .dh-action-icon,
  body.vr-desktop .dh-primary-icon,
  body.vr-desktop .dh-dest-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .58);
    color: currentColor;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
  }

  body.vr-desktop .wave-action-icon svg,
  body.vr-desktop .ofl-tile-icon svg,
  body.vr-desktop .dh-action-icon svg,
  body.vr-desktop .dh-primary-icon svg,
  body.vr-desktop .dh-dest-icon svg {
    width: 22px;
    height: 22px;
  }

  body.vr-desktop .dh-action-label,
  body.vr-desktop .ofl-tile-label,
  body.vr-desktop .wave-action-label,
  body.vr-desktop .dh-primary-label,
  body.vr-desktop .dh-dest-label {
    color: currentColor;
    font-size: 16px;
    font-weight: 740;
    line-height: 1.25;
    letter-spacing: 0;
  }

  body.vr-desktop .ofl-tile-line,
  body.vr-desktop .wave-action-hint,
  body.vr-desktop .dh-action-helper,
  body.vr-desktop .dh-primary-desc,
  body.vr-desktop .dh-dest-desc {
    color: currentColor;
    opacity: .78;
    font-size: 13px;
    line-height: 1.42;
  }

  body.vr-desktop .eqm-value-row,
  body.vr-desktop .rf-value-row,
  body.vr-desktop .ns-strip {
    margin: 10px 0 0;
  }

  body.vr-desktop .eqm-value-btn,
  body.vr-desktop .rf-value-btn,
  body.vr-desktop .ns-strip-btn {
    min-height: 58px;
    padding: 12px 14px;
    border-radius: 8px;
    border-style: solid;
    box-shadow: var(--d1-shadow-soft);
  }

  body.vr-desktop .eqm-value-btn {
    border-color: rgba(7, 94, 84, .15);
    background: var(--act-teal-bg);
    color: var(--act-teal-ink);
  }

  body.vr-desktop .rf-value-btn {
    border-color: rgba(12, 68, 124, .15);
    background: var(--act-blue-bg);
    color: var(--act-blue-ink);
  }

  body.vr-desktop .ns-strip-btn {
    border-color: rgba(122, 75, 0, .15);
    background: var(--act-amber-bg);
    color: var(--act-amber-ink);
  }

  body.vr-desktop .ns-strip-icon {
    display: none;
  }

  body.vr-desktop .eqm-value-label,
  body.vr-desktop .rf-value-label,
  body.vr-desktop .ns-strip-label {
    color: currentColor;
    font-size: 15px;
    font-weight: 740;
    line-height: 1.25;
  }

  body.vr-desktop .eqm-value-hint,
  body.vr-desktop .rf-value-hint,
  body.vr-desktop .ns-strip-hint {
    color: currentColor;
    font-size: 13px;
    line-height: 1.42;
    opacity: .78;
  }

  body.vr-desktop .ns-panel {
    margin: 16px 0 0;
    padding: 18px;
    border: 1px solid var(--d1-line);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
    box-shadow: var(--d1-shadow-soft);
  }

  body.vr-desktop .ns-panel-head {
    gap: 14px;
    margin-bottom: 14px;
  }

  body.vr-desktop .ns-panel-title {
    color: var(--d1-ink);
    font-size: 20px;
    font-weight: 780;
    line-height: 1.18;
  }

  body.vr-desktop .ns-panel-intro {
    max-width: 72ch;
    color: var(--d1-muted);
    font-size: 14px;
    line-height: 1.45;
  }

  body.vr-desktop .ns-open-full {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(122, 75, 0, .20);
    border-radius: 8px;
    background: var(--act-amber-bg);
    color: var(--act-amber-ink);
    box-shadow: 0 8px 18px rgba(122, 75, 0, .08);
    font-weight: 740;
  }

  body.vr-desktop .ns-panel-body .ns-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  body.vr-desktop .eqm-screen,
  body.vr-desktop .rf-screen,
  body.vr-desktop .ns-screen {
    max-width: 1040px;
    padding: 22px;
    border: 1px solid var(--d1-line);
    border-radius: 8px;
    background: var(--d1-panel);
    box-shadow: var(--d1-shadow);
  }

  body.vr-desktop .dh-primary,
  body.vr-desktop .dh-destinations {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  body.vr-desktop .dh-primary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body.vr-desktop .dh-dest-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  body.vr-desktop .dh-primary-btn,
  body.vr-desktop .dh-dest {
    min-height: 76px;
    padding: 14px;
    background: var(--d1-panel);
    color: var(--d1-ink);
  }

  body.vr-desktop .dh-primary-ask {
    min-height: 92px;
    border-color: rgba(12, 68, 124, .22);
    background: var(--act-blue-bg);
    color: var(--act-blue-ink);
  }

  body.vr-desktop .dh-primary-btn .dh-primary-icon,
  body.vr-desktop .dh-dest .dh-dest-icon {
    background: var(--d1-blue-soft);
    color: var(--d1-blue-dark);
  }

  body.vr-desktop .dh-primary-ask .dh-primary-icon {
    background: rgba(255, 255, 255, .62);
    color: currentColor;
  }

  body.vr-desktop .dh-primary-ask .dh-primary-label {
    font-size: 18px;
    font-weight: 820;
  }

  body.vr-desktop .dh-metrics,
  body.vr-desktop .wave-metric-strip,
  body.vr-desktop .ofl-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }

  body.vr-desktop .dh-metric,
  body.vr-desktop .wave-metric,
  body.vr-desktop .ofl-summary-pill,
  body.vr-desktop .dh-pill,
  body.vr-desktop .dh-stat {
    border: 1px solid var(--d1-line);
    border-radius: 8px;
    background: var(--d1-panel);
    box-shadow: 0 7px 18px rgba(15, 23, 42, .06);
  }

  body.vr-desktop .dh-metric,
  body.vr-desktop .wave-metric,
  body.vr-desktop .ofl-summary-pill {
    padding: 12px;
  }

  body.vr-desktop .dh-metric-value,
  body.vr-desktop .wave-metric-value,
  body.vr-desktop .dh-pill-val,
  body.vr-desktop .dh-stat-val {
    color: var(--d1-ink);
    font-weight: 760;
  }

  body.vr-desktop .dh-metric-label,
  body.vr-desktop .wave-metric-label,
  body.vr-desktop .dh-pill-label,
  body.vr-desktop .dh-stat-label {
    color: var(--d1-muted);
    font-size: 13px;
    font-weight: 560;
    line-height: 1.35;
  }

  body.vr-desktop .dh-grid,
  body.vr-desktop .wave-insight-grid {
    grid-template-columns: minmax(420px, 1fr) minmax(340px, .82fr);
    grid-template-areas: "attention health" "changed changed";
    gap: 16px;
  }

  body.vr-desktop .dh-hero,
  body.vr-desktop .dh-attn,
  body.vr-desktop .dh-changes,
  body.vr-desktop .wave-insight-card {
    border: 1px solid var(--d1-line);
    border-radius: 8px;
    background: var(--d1-panel);
    box-shadow: var(--d1-shadow-soft);
    padding: 16px;
  }

  body.vr-desktop .dh-score-num {
    color: var(--d1-ink);
    font-size: 46px;
    font-weight: 760;
  }

  body.vr-desktop .dh-list {
    gap: 8px;
  }

  body.vr-desktop .dh-row,
  body.vr-desktop .asset-mobile-row,
  body.vr-desktop .asset-open,
  body.vr-desktop .sr-result-card,
  body.vr-desktop .contract-card,
  body.vr-desktop .maint-card {
    border: 1px solid var(--d1-line);
    border-radius: 8px;
    background: var(--d1-panel);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
  }

  body.vr-desktop .dh-row {
    padding: 12px;
  }

  body.vr-desktop .dh-dot {
    width: 9px;
    height: 9px;
  }

  body.vr-desktop .dh-jump,
  body.vr-desktop .link-btn {
    color: var(--d1-blue-dark);
    font-weight: 700;
  }

  body.vr-desktop .ofl-intro {
    align-items: center;
    gap: 16px;
    margin: 0 0 16px;
    padding-bottom: 2px;
  }

  body.vr-desktop .ofl-intro-copy {
    max-width: none;
  }

  body.vr-desktop .ofl-intro-title {
    font-size: 28px;
    line-height: 1.14;
    font-weight: 740;
  }

  body.vr-desktop .ofl-intro-text {
    max-width: 900px;
    font-size: 15px;
    line-height: 1.5;
  }

  body.vr-desktop .ofl-intro-action,
  body.vr-desktop .ofl-primary,
  body.vr-desktop .field-btn--primary,
  body.vr-desktop .search-submit-btn,
  body.vr-desktop .scan-submit-btn,
  body.vr-desktop .extract-btn,
  body.vr-desktop .import-register-btn,
  body.vr-desktop .assets-empty-cta,
  body.vr-desktop .asset-onboard-btn {
    min-height: 44px;
    border: 1px solid var(--d1-blue);
    border-radius: 8px;
    background: var(--d1-blue);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(23, 105, 224, .18);
    font-weight: 740;
  }

  body.vr-desktop .field-btn--secondary,
  body.vr-desktop .ofl-back,
  body.vr-desktop .vr-back-btn,
  body.vr-desktop .load-more-btn {
    min-height: 42px;
    border: 1px solid rgba(23, 105, 224, .22);
    border-radius: 8px;
    background: var(--d1-panel);
    color: var(--d1-blue-dark);
    box-shadow: 0 5px 14px rgba(15, 23, 42, .05);
    font-weight: 700;
  }

  body.vr-desktop .ofl-grid {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
  }

  body.vr-desktop .ofl-tile {
    min-height: 136px;
    padding: 16px;
  }

  body.vr-desktop .ofl-focus {
    margin-top: 16px;
    padding: 18px;
    max-width: none;
  }

  body.vr-desktop .ofl-focus-head {
    margin-bottom: 14px;
  }

  body.vr-desktop .ofl-focus-title {
    color: var(--d1-ink);
    font-size: 22px;
    font-weight: 740;
  }

  body.vr-desktop .dh-row-title,
  body.vr-desktop .asset-mobile-name,
  body.vr-desktop .asset-name,
  body.vr-desktop .contract-title,
  body.vr-desktop .maint-title {
    color: var(--d1-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.32;
  }

  body.vr-desktop .dh-row-msg,
  body.vr-desktop .asset-mobile-detail,
  body.vr-desktop .asset-mobile-code,
  body.vr-desktop .ofl-status,
  body.vr-desktop .ofl-muted {
    font-size: 13px;
    line-height: 1.45;
  }

  body.vr-desktop .field input,
  body.vr-desktop input,
  body.vr-desktop select,
  body.vr-desktop textarea,
  body.vr-desktop .search-box,
  body.vr-desktop .scan-box,
  body.vr-desktop .scan-role-select {
    border: 1px solid var(--d1-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--d1-ink);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .035);
  }

  body.vr-desktop .field input:focus,
  body.vr-desktop input:focus,
  body.vr-desktop select:focus,
  body.vr-desktop textarea:focus,
  body.vr-desktop .search-box:focus,
  body.vr-desktop .scan-box:focus {
    border-color: rgba(23, 105, 224, .55);
    box-shadow: 0 0 0 4px rgba(23, 105, 224, .12);
  }

  body.vr-desktop .dropzone {
    border-color: #cdd7e5;
    border-radius: 8px;
    background: #f8fbff;
  }

  body.vr-desktop #app-version {
    left: 28px;
    bottom: 58px;
    max-width: 360px;
    padding: 5px 9px;
    border: 1px solid rgba(99, 112, 131, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
    color: var(--d1-muted);
    opacity: .9;
  }

  body.vr-desktop .fbk-trigger {
    left: 28px;
    right: auto;
    bottom: 14px;
    z-index: 24;
    max-width: 236px;
    border: 1px solid rgba(23, 105, 224, .18);
    background: rgba(255, 255, 255, .92);
    color: var(--d1-blue-dark);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
  }

  @media (min-width: 1440px) {
    body.vr-desktop .wrap {
      max-width: 1840px;
      grid-template-columns: 300px minmax(0, 1fr);
      padding-left: 28px;
      padding-right: 28px;
    }

    body.vr-desktop .ofl-grid {
      grid-template-columns: repeat(4, minmax(210px, 1fr));
    }
  }

  @media (max-width: 1180px) {
    body.vr-desktop .wrap {
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 18px;
    }

    body.vr-desktop .dh-actions,
    body.vr-desktop .wave-action-grid,
    body.vr-desktop .dh-values,
    body.vr-desktop .dh-primary-grid,
    body.vr-desktop .ofl-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.vr-desktop .dh-value-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.vr-desktop .dh-dest-grid,
    body.vr-desktop .dh-metrics,
    body.vr-desktop .wave-metric-strip,
    body.vr-desktop .ofl-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.vr-desktop .dh-grid,
    body.vr-desktop .wave-insight-grid {
      grid-template-columns: 1fr;
      grid-template-areas: "attention" "health" "changed";
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.vr-desktop .dh-action,
    body.vr-desktop .wave-action-card,
    body.vr-desktop .ofl-tile,
    body.vr-desktop .dh-primary-btn,
    body.vr-desktop .dh-dest {
      transition: none;
    }

    body.vr-desktop .dh-action:active,
    body.vr-desktop .wave-action-card:active,
    body.vr-desktop .ofl-tile:active,
    body.vr-desktop .dh-primary-btn:active,
    body.vr-desktop .dh-dest:active {
      transform: none;
    }
  }
}