/* CANLOW: load after existing diagnostics styles; opt in with body.canlow-workspace.
   Keeps existing hooks, authorization dialogs, access panels and warnings intact.
   Workbench panels switch only when HTML explicitly opts in with .has-mobile-switcher. */

body.canlow-workspace {
  --ink: #eff5f0;
  --muted: #a1aeaa;
  --line: #253230;
  --surface: #101919;
  --background: #080d0e;
  --nav: #101919;
  --accent: #b8f64f;
  --accent-soft: #22302a;
  --radius: 12px;
  margin: 0;
  min-width: 320px;
  background: #080d0e;
  color: #eff5f0;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}

body.canlow-workspace *,
body.canlow-workspace *::before,
body.canlow-workspace *::after { box-sizing: border-box; }

body.canlow-workspace :where(button, input, select, textarea) { font-family: inherit; }
body.canlow-workspace :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid #b8f64f;
  outline-offset: 3px;
}
body.canlow-workspace :where(button, a) { touch-action: manipulation; }
body.canlow-workspace :where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .55;
}

body.canlow-workspace .sidebar {
  width: 232px;
  padding: 27px 16px 20px;
  border-right: 1px solid #253230;
  background: #101919;
  overflow-y: auto;
}
body.canlow-workspace .workspace { margin-left: 232px; min-width: 0; }
body.canlow-workspace .brand { gap: 9px; }
body.canlow-workspace .brand-glyph {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 29px;
  flex-shrink: 0;
  transform: skew(-30deg);
}
body.canlow-workspace .brand-glyph i { display: block; width: 14px; height: 30px; background: #b8f64f; }
body.canlow-workspace .brand-glyph i:nth-child(2) { height: 20px; align-self: flex-end; }
body.canlow-workspace .brand-word { font-size: 25px; font-weight: 900; letter-spacing: -1.4px; line-height: 1; }
body.canlow-workspace .brand-word > span { color: #b8f64f; }
body.canlow-workspace .brand small { color: #a1aeaa; font-size: 8px; letter-spacing: 1px; }
body.canlow-workspace .vehicle { margin: 29px 0 25px; background: #142020; border-color: #253230; }
body.canlow-workspace .vehicle-icon { color: #eff5f0; border-color: #4a5b53; }
body.canlow-workspace .vehicle strong { font-size: 13px; }
body.canlow-workspace .vehicle div span { color: #a1aeaa; font-size: 12px; }
body.canlow-workspace .nav-label { color: #a1aeaa; font-size: 10px; letter-spacing: 1px; }
body.canlow-workspace .sidebar nav { gap: 4px; }
body.canlow-workspace .sidebar nav a {
  position: relative;
  min-height: 46px;
  padding: 11px 12px;
  color: #bac8c1;
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
}
body.canlow-workspace .sidebar nav a.active { color: #eff5f0; background: #22302a; }
body.canlow-workspace .sidebar nav a.active::before { left: 0; width: 3px; height: 22px; background: #b8f64f; }
body.canlow-workspace .sidebar nav a:hover { color: #eff5f0; background: #142020; }
body.canlow-workspace .sidebar nav .end-icon { color: #a1aeaa; }
body.canlow-workspace .access-card { background: #142020; border-color: #253230; }
body.canlow-workspace .access-card p { color: #bac8c1; font-size: 13px; }
body.canlow-workspace .access-card a { min-height: 44px; align-items: center; color: #b8f64f; font-size: 13px; }
body.canlow-workspace .tiny-label { color: #b8f64f; font-size: 10px; }
body.canlow-workspace .source-note { display: none; }

body.canlow-workspace .topbar { min-height: 72px; height: auto; padding: 14px 32px; background: #080d0e; }
body.canlow-workspace .breadcrumb { min-width: 0; color: #a1aeaa; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
body.canlow-workspace .breadcrumb span { color: #eff5f0; }
body.canlow-workspace .top-actions { gap: 14px; }
body.canlow-workspace .edition { color: #a1aeaa; font-size: 11px; }
body.canlow-workspace .account-button { min-height: 44px; color: #eff5f0; background: #101919; font-size: 13px; }
body.canlow-workspace .account-button span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.canlow-workspace .workspace > main { width: 100%; max-width: 1800px; min-width: 0; padding: 32px; }
body.canlow-workspace .page-heading { gap: 24px; margin-bottom: 27px; }
body.canlow-workspace .page-title { color: #eff5f0; font-size: clamp(26px, 2.4vw, 36px); font-weight: 700; letter-spacing: -.8px; }
body.canlow-workspace .page-intro { color: #a1aeaa; font-size: 14px; line-height: 1.65; }
body.canlow-workspace .eyebrow { color: #b8f64f; font-size: 11px; font-weight: 700; }
body.canlow-workspace .head-badge { color: #bac8c1; font-size: 12px; border-color: #253230; background: #101919; }

body.canlow-workspace :where(.primary-button, .secondary-button, .text-button, .tab, .auth-tab, .choice-button, .code-chip) {
  min-height: 44px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
}
body.canlow-workspace .primary-button { padding: 12px 19px; color: #0a1206; background: #b8f64f; border-color: #b8f64f; font-weight: 700; }
body.canlow-workspace .primary-button:hover { background: #ceff7d; border-color: #ceff7d; }
body.canlow-workspace .secondary-button { padding: 11px 15px; color: #eff5f0; background: #142020; border-color: #34443f; }
body.canlow-workspace .secondary-button:hover { border-color: #79965a; background: #1b2925; }
body.canlow-workspace .text-button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; color: #b8f64f; }
body.canlow-workspace .text-button.danger { color: #f2a696; }
body.canlow-workspace .tab { padding: 10px 16px; color: #bac8c1; border-color: #253230; background: #101919; }
body.canlow-workspace .tab.active { color: #eff5f0; background: #22302a; border-color: #57753e; }
body.canlow-workspace .tabs { gap: 8px; }
body.canlow-workspace .code-chip { padding: 9px 12px; color: #b8f64f; font-family: inherit; border-color: #34443f; background: #142020; }
body.canlow-workspace .code { color: #eff5f0; font-family: inherit; font-weight: 700; letter-spacing: .02em; }
body.canlow-workspace .search-panel { padding: 24px; background: #101919; border-color: #253230; }
body.canlow-workspace .search-label { color: #eff5f0; font-size: 14px; }
body.canlow-workspace .search-input { min-height: 54px; color: #eff5f0; background: #080d0e; border-color: #34443f; font-size: 16px; }
body.canlow-workspace .search-input::placeholder { color: #a1aeaa; font-size: 14px; }
body.canlow-workspace .search-hints { color: #a1aeaa; font-size: 12px; }
body.canlow-workspace .search-bottom { color: #a1aeaa; font-size: 12px; }
body.canlow-workspace .system-filter { min-height: 44px; color: #eff5f0; font-size: 14px; background: #142020; }

body.canlow-workspace :where(.diagnostic-card, .reference-item, .step-card, .timeline, .case-data, .settings-panel, .admin-user, .lock-panel) {
  color: #eff5f0;
  background: #101919;
  border-color: #253230;
  box-shadow: none;
}
body.canlow-workspace .diagnostic-card { padding: 22px; }
body.canlow-workspace .diagnostic-card:hover { transform: none; border-color: #79965a; }
body.canlow-workspace .card-title { color: #eff5f0; font-size: 15px; font-weight: 600; line-height: 1.5; }
body.canlow-workspace :where(.card-system, .card-action, .stat small, .process-item p, .section-heading span) { color: #a1aeaa; font-size: 12px; }
body.canlow-workspace .card-action { color: #b8f64f; }
body.canlow-workspace .badge { color: #b8f64f; border-color: #4a6537; font-size: 11px; line-height: 1.4; }
body.canlow-workspace .badge.pending { color: #e5cf9b; border-color: #665737; background: #292317; }
body.canlow-workspace .section-heading h2 { color: #eff5f0; font-size: 19px; font-weight: 600; }
body.canlow-workspace .stat strong { color: #eff5f0; font-weight: 700; }
body.canlow-workspace .process-item strong { font-size: 14px; }
body.canlow-workspace .notice { color: #bac8c1; background: #142020; border-color: #253230; font-size: 13px; line-height: 1.6; }
body.canlow-workspace .notice.warning { color: #e5cf9b; background: #292317; border-color: #665737; }
body.canlow-workspace .safety-list { color: inherit; font-size: 13px; line-height: 1.65; }
body.canlow-workspace .empty-state { color: #bac8c1; font-size: 14px; }

body.canlow-workspace .details-heading h1 { color: #eff5f0; font-weight: 700; font-size: 25px; line-height: 1.4; }
body.canlow-workspace .detail-meta { color: #a1aeaa; font-size: 13px; line-height: 1.6; }
body.canlow-workspace .detail-layout { grid-template-columns: 205px minmax(0, 1fr); gap: 20px; }
body.canlow-workspace .timeline { display: block; padding: 19px; }
body.canlow-workspace .timeline h3 { color: #a1aeaa; font-size: 11px; }
body.canlow-workspace .timeline-item { color: #a1aeaa; font-size: 12px; line-height: 1.55; }
body.canlow-workspace .timeline-item.current { color: #eff5f0; }
body.canlow-workspace .timeline-item.current .timeline-number { color: #0a1206; }
body.canlow-workspace .step-card { min-width: 0; padding: 27px; }
body.canlow-workspace .step-card h2 { font-size: 23px; font-weight: 700; line-height: 1.35; }
body.canlow-workspace .step-label { color: #b8f64f; font-size: 11px; font-weight: 700; }
body.canlow-workspace .step-instruction { color: #d1dcd5; font-size: 15px; line-height: 1.7; }
body.canlow-workspace .step-question { color: #eff5f0; font-size: 15px; line-height: 1.55; }
body.canlow-workspace .choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.canlow-workspace .choice-button { min-width: 0; min-height: 52px; padding: 13px 18px; color: #eff5f0; background: #22302a; border-color: #57753e; font-weight: 700; }
body.canlow-workspace .choice-button:hover { background: #31432c; }
body.canlow-workspace .step-controls { align-items: center; flex-wrap: wrap; }
body.canlow-workspace :where(.history-answer, .original-text, .source-line, .case-toolbar span, .reference-item p, .lock-panel p, .webhook-box p) { color: #a1aeaa; font-size: 13px; line-height: 1.65; }
body.canlow-workspace .outcome { color: #d9e9d0; font-size: 15px; }
body.canlow-workspace .reference-item { min-width: 0; gap: 16px; }
body.canlow-workspace .reference-item h3 { color: #eff5f0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
body.canlow-workspace .reference-actions { flex-wrap: wrap; }
body.canlow-workspace .component-facts { grid-template-columns: 130px minmax(0, 1fr); }
body.canlow-workspace .component-facts dt { color: #a1aeaa; font-size: 14px; }
body.canlow-workspace .component-facts dd { color: #eff5f0; font-size: 14px; overflow-wrap: anywhere; }
body.canlow-workspace :where(.field, .check-field, .algorithm-step, .case-data, .auth-dialog .intro) { color: #bac8c1; font-size: 14px; }
body.canlow-workspace :where(.field input, .field select, .field textarea, .admin-controls input, .admin-controls select) { min-height: 44px; color: #eff5f0; border-color: #34443f; background: #080d0e; font-size: 15px; }
body.canlow-workspace .check-field { min-height: 44px; }
body.canlow-workspace .form-error { color: #f2a696; font-size: 13px; }
body.canlow-workspace .lock-panel { max-width: 880px; }
body.canlow-workspace .lock-panel h2 { color: #eff5f0; font-weight: 700; }
body.canlow-workspace .lock-panel ul { color: #d1dcd5; font-size: 14px; line-height: 1.8; }
body.canlow-workspace .account-summary { color: #d9e9d0; border-color: #425b34; font-size: 14px; }

/* Presentation only: showModal(), [open], role and access checks stay in existing JS. */
body.canlow-workspace dialog { color: #eff5f0; background: #101919; border: 1px solid #34443f; max-height: calc(100dvh - 32px); overflow-y: auto; }
body.canlow-workspace dialog::backdrop { background: #080d0ecc; backdrop-filter: blur(3px); }
body.canlow-workspace .dialog-close { width: 44px; height: 44px; top: 8px; right: 8px; color: #eff5f0; background: #142020; border-radius: 8px; }
body.canlow-workspace .source-dialog { max-width: 1100px; padding: 32px; }
body.canlow-workspace .auth-dialog { width: min(460px, calc(100vw - 28px)); }
body.canlow-workspace .toast { left: calc(50% + 116px); color: #0a1206; background: #b8f64f; font-size: 14px; line-height: 1.5; }
body.canlow-workspace .workspace > footer { color: #a1aeaa; padding: 20px 32px; font-size: 12px; line-height: 1.5; }
body.canlow-workspace .workspace > footer a { display: inline-flex; min-height: 44px; align-items: center; }

/* Opt-in structural extension; legacy .detail-layout remains usable without it. */
body.canlow-workspace .diagnostic-workbench { display: block; min-width: 0; margin-top: 24px; }
body.canlow-workspace .diagnostic-workbench .workbench-panel { min-width: 0; }
body.canlow-workspace .diagnostic-workbench .workbench-document { margin-top: 20px; }
body.canlow-workspace .workbench-switcher { display: flex; gap: 8px; margin-bottom: 16px; }
body.canlow-workspace .workbench-switcher button { flex: 1; min-height: 48px; padding: 10px 14px; color: #bac8c1; background: #101919; border: 1px solid #253230; border-radius: 8px; font-size: 14px; }
body.canlow-workspace .workbench-switcher button.is-active { color: #eff5f0; background: #22302a; border-color: #57753e; }
body.canlow-workspace :where(#circuit-slot, #component-map-slot) { width: 100%; min-width: 0; border: 1px solid #253230; border-radius: 12px; background: #101919; }
body.canlow-workspace :where(#circuit-slot, #component-map-slot) svg { display: block; width: 100%; max-width: 100%; height: auto; }

@media (min-width: 1200px) {
  body.canlow-workspace .diagnostic-workbench { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: 24px; align-items: start; }
  body.canlow-workspace .diagnostic-workbench .workbench-panel { display: block; }
  body.canlow-workspace .diagnostic-workbench .workbench-document { margin-top: 0; position: sticky; top: 24px; }
  body.canlow-workspace .diagnostic-workbench .workbench-switcher { display: none; }
  body.canlow-workspace .diagnostic-workbench .detail-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1199px) {
  /* Explicit opt-in + explicit active panel prevent CSS-only loss of working content. */
  body.canlow-workspace .diagnostic-workbench.has-mobile-switcher > .workbench-panel { display: none; }
  body.canlow-workspace .diagnostic-workbench.has-mobile-switcher > .workbench-panel.is-active { display: block; }
  body.canlow-workspace .diagnostic-workbench.has-mobile-switcher > .workbench-document.is-active { margin-top: 0; }
  body.canlow-workspace .workspace > main { padding: 28px; }
  body.canlow-workspace .topbar { padding-inline: 28px; }
  body.canlow-workspace .detail-layout { grid-template-columns: minmax(0, 1fr); }
  body.canlow-workspace .timeline { display: block; }
}

@media (max-width: 760px) {
  body.canlow-workspace .sidebar { position: static; width: 100%; height: auto; padding: 20px 16px 12px; border-right: 0; border-bottom: 1px solid #253230; overflow: visible; }
  body.canlow-workspace .workspace { margin-left: 0; }
  body.canlow-workspace .sidebar .vehicle { display: flex; margin: 18px 0 14px; padding: 12px; }
  body.canlow-workspace .sidebar .nav-label { display: block; margin: 8px 0; }
  body.canlow-workspace .sidebar nav { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin-top: 8px; padding: 3px 2px 8px; scroll-padding-inline: 2px; scrollbar-width: thin; scrollbar-color: #57753e #101919; }
  body.canlow-workspace .sidebar nav a { display: flex; flex-shrink: 0; min-height: 46px; padding: 10px 12px; font-size: 13px; white-space: nowrap; }
  body.canlow-workspace .sidebar nav a[data-nav="history"],
  body.canlow-workspace .sidebar nav a[data-nav="saved"] { display: flex; }
  body.canlow-workspace .sidebar nav .end-icon { display: inline-flex; }
  body.canlow-workspace .sidebar nav a.active::before { width: 3px; height: 22px; }
  body.canlow-workspace .sidebar .sidebar-bottom { display: block; }
  body.canlow-workspace .sidebar .access-card { margin-top: 12px; padding: 12px 15px; }
  body.canlow-workspace .sidebar .access-card p { margin: 8px 0; }
  body.canlow-workspace .topbar { padding: 12px 16px; min-height: 64px; align-items: center; }
  body.canlow-workspace .top-actions { gap: 8px; }
  body.canlow-workspace .edition { display: inline; font-size: 10px; }
  body.canlow-workspace .breadcrumb { font-size: 12px; }
  body.canlow-workspace .breadcrumb span { margin-left: 3px; }
  body.canlow-workspace .account-button { padding: 9px 11px; }
  body.canlow-workspace .account-button span { max-width: 90px; }
  body.canlow-workspace .workspace > main { padding: 24px 16px 32px; }
  body.canlow-workspace .page-heading { flex-direction: column; gap: 14px; }
  body.canlow-workspace .head-badge { display: inline-flex; white-space: normal; }
  body.canlow-workspace .page-title { font-size: 28px; }
  body.canlow-workspace .search-panel { padding: 20px 16px; }
  body.canlow-workspace .search-box { flex-direction: column; }
  body.canlow-workspace .search-box .primary-button { min-height: 48px; height: auto; }
  body.canlow-workspace .search-bottom { flex-direction: column; align-items: stretch; }
  body.canlow-workspace .system-filter { max-width: none; width: 100%; }
  body.canlow-workspace .cards-grid { grid-template-columns: minmax(0, 1fr); }
  body.canlow-workspace .stats-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body.canlow-workspace .stat-symbol { display: flex; }
  body.canlow-workspace .stat small { font-size: 12px; }
  body.canlow-workspace .section-heading { align-items: flex-start; flex-wrap: wrap; }
  body.canlow-workspace .step-card { padding: 23px 18px; }
  body.canlow-workspace .step-card h2 { font-size: 22px; }
  body.canlow-workspace .details-heading h1 { font-size: 22px; }
  body.canlow-workspace .reference-item { padding: 18px; flex-wrap: wrap; align-items: flex-start; }
  body.canlow-workspace .reference-item > div:nth-child(2) { min-width: 0; }
  body.canlow-workspace .reference-actions { width: 100%; margin-left: 0; flex-direction: row; }
  body.canlow-workspace .reference-actions .secondary-button { flex: 1; }
  body.canlow-workspace .form-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.canlow-workspace :where(.field input, .field select, .field textarea, .admin-controls input, .admin-controls select) { font-size: 16px; }
  body.canlow-workspace .component-facts { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  body.canlow-workspace .component-facts dd { margin-bottom: 15px; }
  body.canlow-workspace .case-data, body.canlow-workspace .settings-panel { padding: 18px; }
  body.canlow-workspace .lock-panel { padding: 26px 20px; }
  body.canlow-workspace .toast { left: 50%; bottom: 16px; width: max-content; }
  body.canlow-workspace .workspace > footer { flex-wrap: wrap; padding: 16px; gap: 8px 16px; }
  body.canlow-workspace .workspace > footer span { display: inline; }
  body.canlow-workspace .source-dialog { padding: 28px 16px; }
  body.canlow-workspace .source-dialog h2 { padding-right: 36px; }
  body.canlow-workspace .auth-dialog { padding: 34px 22px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  body.canlow-workspace :where(.diagnostic-card, .toast, button, a) { transition: none; }
}

/* CANLOW main-site mobile fit; diagnostics data and image geometry unchanged. */
body.canlow-workspace{min-width:0}
body.canlow-workspace .workspace,body.canlow-workspace .sidebar,
body.canlow-workspace .topbar,body.canlow-workspace .workspace>main{min-width:0;max-width:100%}
@media(max-width:760px){
 body.canlow-workspace .topbar{flex-wrap:wrap;gap:10px}
 body.canlow-workspace .topbar>*{min-width:0;max-width:100%}
 body.canlow-workspace .breadcrumb{overflow-wrap:anywhere}
 body.canlow-workspace .sidebar nav{max-width:100%;overscroll-behavior-x:contain}
 body.canlow-workspace :where(.primary-button,.secondary-button,.text-button,.tab,.auth-tab,.choice-button,.account-button){min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
 body.canlow-workspace .toast{max-width:calc(100% - 32px);white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:1024px),(pointer:coarse){
 body.canlow-workspace input:not([type=checkbox]):not([type=radio]):not([type=range]),
 body.canlow-workspace select,body.canlow-workspace textarea{min-width:0;max-width:100%;font-size:16px!important}
 body.canlow-workspace .cards-grid{grid-template-columns:minmax(0,1fr)}
 body.canlow-workspace .diagnostic-card{min-width:0;max-width:100%}
 body.canlow-workspace .card-top{flex-wrap:wrap}
 body.canlow-workspace .badge{max-width:100%;white-space:normal;overflow-wrap:anywhere}
}