/* Local visual pilot: only the visible competitor screen changes the shell.
   Existing route permissions, IDs, data queries and actions stay in app.js. */
#workspace-menu-toggle { display: none; }
body.drv-design {
  --ci-ink: #172c37;
  --ci-muted: #61717a;
  --ci-line: #dce4e6;
  --ci-accent: #087f76;
  background: #f3f6f6;
  color: var(--ci-ink);
}
body.drv-design .app-shell-top { background: #fff; padding-top: 0; }
body.drv-design header {
  min-height: 72px; padding: 16px 32px 16px 256px;
  background: #fff; border-color: var(--ci-line); backdrop-filter: none;
}
body.drv-design #nav-brand {
  position: fixed; top: 0; left: 0; width: 224px; height: 88px; z-index: 2;
  display: flex; align-items: center; gap: 12px; padding: 24px;
  background: #132b35; color: #f6fafb; font-size: 18px;
}
body.drv-design #nav-brand::before {
  content: 'D'; background: #30baa7; color: #0a3033; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 9px; font-weight: 800;
}
body.drv-design #nav-icons {
  position: fixed; inset: 88px auto 0 0; width: 224px; max-height: calc(100dvh - 88px);
  padding: 8px 12px 28px; margin: 0; display: flex; flex-direction: column; align-items: stretch;
  justify-content: flex-start; gap: 3px; overflow: auto; background: #132b35;
  scrollbar-width: thin; scrollbar-color: #3a5360 transparent;
}
body.drv-design #nav-icons .nav-link:not(.hidden) {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-height: 42px;
  padding: 10px 12px; border-radius: 8px; color: #b9cbd2; font-size: 14px;
}
body.drv-design #nav-icons .nav-link::after {
  content: attr(title); font-size: 12px; line-height: 1.4; font-weight: 500;
}
body.drv-design #nav-icons .nav-link:hover { background: #203d48; color: white; }
body.drv-design #nav-icons .nav-link[aria-current="page"] { background: #224a50; color: #8ae2d5; }
body.drv-design #nav-icons .nav-link > span { top: 5px; right: 3px; background: #3a5260; font-size: 9px; }
body.drv-design #user-email { color: #61717a; font-size: 12px; }
body.drv-design #user-role { background: #edf3f4; color: #526970; font-size: 10px; }
body.drv-design #logout-btn { color: #526970; font-size: 12px; padding: 8px; }
body.drv-design main { max-width: 1440px; width: calc(100% - 224px); margin-left: 224px; padding: 36px 32px 108px; }
body.drv-design .hermes-launcher { background: #18343e; border-color: #35545f; box-shadow: 0 4px 18px #132b351a; border-radius: 14px; padding: 10px 16px; bottom: 20px; }
body.drv-design .hermes-launcher-detail { display: none; }
#view-compintel { font-size: 14px; line-height: 1.5; --ci-radius: 12px; }
#view-compintel .ci-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
#view-compintel .ci-eyebrow { color: #61717a; text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 700; margin-bottom: 9px; }
#view-compintel h1 { font-size: clamp(24px, 2.5vw, 32px); letter-spacing: -.04em; font-weight: 650; line-height: 1.2; }
#view-compintel .ci-subtitle { color: #61717a; margin-top: 9px; font-size: 14px; }
#view-compintel button, #view-compintel input, #view-compintel select { transition: background .15s, border-color .15s; }
#view-compintel button { cursor: pointer; }
#view-compintel :is(button,input,select,summary,a):focus-visible,
body.drv-design :is(#workspace-menu-toggle,.nav-link):focus-visible { outline: 3px solid #0c9388; outline-offset: 3px; }
#view-compintel .ci-refresh { min-height: 44px; padding: 10px 16px; border-radius: 9px; background: #087f76; color: #fff; font-size: 13px; font-weight: 600; flex-shrink: 0; display: flex; gap: 9px; align-items: center; }
#view-compintel .ci-refresh:hover { background: #066d65; }
#view-compintel button:disabled { opacity: .6; cursor: wait; }
#compintel-health { color: #61717a; }
#compintel-health > details { padding: 0; border: 1px solid #dce4e6; background: #fff; border-radius: 12px; }
#compintel-health details[open] { padding-bottom: 16px; }
#compintel-health details > :not(summary) { margin-left: 16px; margin-right: 16px; }
#compintel-health .ci-health-toggle { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; }
#compintel-health summary::-webkit-details-marker { display: none; }
.ci-health-summary { display: flex; flex-wrap: wrap; gap: 16px; }
.ci-health-supplier { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #526670; }
.ci-health-supplier i { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #088371; }
.ci-health-supplier strong { font-weight: 500; color: #087562; }
.ci-health-warn i { background: #b97516; }
.ci-health-warn strong { color: #986018; }
.ci-health-more { color: #526670; white-space: nowrap; font-size: 11px; }
#compintel-health details[open] .ci-health-more > span { display: inline-block; transform: rotate(180deg); }
#view-compintel #compintel-tabs { margin-top: 26px; margin-bottom: 22px; gap: 24px; border-color: #d5e0e2; }
#view-compintel .ci-tab-btn { min-height: 48px; padding: 10px 0; color: #61717a; border-radius: 0; font-weight: 550; gap: 8px; }
#view-compintel .ci-tab-btn[aria-pressed="true"] { color: #08786e; border-bottom-color: #087f76; }
#compintel-changes-count { background: #dcefeb; color: #08786e; padding: 2px 7px; font-size: 11px; }
#view-compintel .ci-filter-box { padding: 20px; border: 1px solid #dce4e6; border-radius: 12px; background: #fff; }
.ci-filter-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.ci-net-note { color: #61717a; font-size: 11px; white-space: nowrap; }
#view-compintel :is(.ci-ch-panel-btn,.ci-panel-btn,.ci-tracked-btn,.ci-prio-btn,.ci-view-btn) { color: #586a73; background: #fff; border: 1px solid #dce4e6; border-radius: 7px; font-size: 12px; min-height: 36px; padding: 7px 12px; }
#view-compintel :is(.ci-ch-panel-btn,.ci-panel-btn,.ci-tracked-btn,.ci-prio-btn,.ci-view-btn).bg-brand-600 { background: #e5f3ef; border-color: #b8dcd4; color: #086e65; font-weight: 650; }
.ci-filter-fields { display: grid; grid-template-columns: minmax(180px,1.5fr) minmax(140px,1fr) minmax(150px,1.1fr) minmax(150px,1fr); gap: 12px; }
.ci-filter-fields label { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ci-filter-fields label > span { color: #61717a; font-size: 11px; font-weight: 500; }
#view-compintel :is(input[type="search"],select) { border: 1px solid #d3dddf; border-radius: 8px; background: #fff; color: #2b414b; font-size: 13px; min-height: 44px; padding: 10px 12px; max-width: 100%; }
#view-compintel :is(input[type="search"],select):hover { border-color: #96b5b7; }
#view-compintel input::placeholder { color: #61717a; }
#compintel-ch-summary { color: #61717a; padding: 10px 2px 6px; font-size: 12px; }
.ci-list-head, .ci-change-row { display: grid; grid-template-columns: minmax(200px,1fr) 190px 132px 92px; align-items: center; gap: 20px; }
.ci-list-head { padding: 0 20px 8px; font-size: 10px; color: #61717a; text-transform: uppercase; letter-spacing: .07em; }
#compintel-changes-list { background: white; border: 1px solid #dce4e6; border-radius: 12px; overflow: hidden; margin-top: 0; }
#compintel-changes-list:empty { display: none; }
.ci-change-row { padding: 20px; border-bottom: 1px solid #e6ecee; min-height: 104px; }
.ci-change-row:last-child { border-bottom: 0; }
.ci-change-row:hover { background: #fafcfc; }
.ci-product { min-width: 0; }
.ci-product-name { font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
#view-compintel .ci-product-name :is(a,span) { color: #203741; font-weight: 600; }
#view-compintel .ci-product-name a:hover { color: #087f76; }
.ci-account { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: #61717a; margin-top: 7px; }
.ci-supplier { font-weight: 550; color: #4d656f; }
.ci-account > span + span::before { content: '·'; padding-right: 8px; }
.ci-price-pair { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-variant-numeric: tabular-nums; font-size: 13px; }
.ci-old-price { color: #61717a; text-decoration: line-through; white-space: nowrap; }
.ci-price-arrow { color: #8b9b9f; }
.ci-price-pair strong { color: #19323c; font-weight: 700; white-space: nowrap; font-size: 15px; }
.ci-price-pair small { font-size: 10px; font-weight: 400; color: #61717a; }
.ci-delta { display: flex; flex-direction: column; gap: 5px; font-variant-numeric: tabular-nums; }
.ci-delta > span { border-radius: 6px; padding: 4px 8px; align-self: flex-start; font-size: 12px; font-weight: 650; white-space: nowrap; }
.ci-down > span { background: #e9f4ef; color: #197457; }
.ci-up > span { background: #fff0ed; color: #b34d3b; }
.ci-delta small { color: #61717a; font-size: 10px; padding-left: 2px; }
.ci-detected { font-size: 11px; color: #61717a; line-height: 1.7; }
.ci-mobile-label { display: none; }
#view-compintel #compintel-ch-more { background: #fff; color: #08786e; border-color: #b8d4d0; min-height: 44px; padding: 10px 18px; font-weight: 550; }
#view-compintel :is(#compintel-changes-empty,#compintel-empty,#compintel-loading,#compintel-changes-loading) { background: white; color: #61717a; padding: 24px; border-radius: 12px; font-style: normal; line-height: 1.7; }
.ci-source-note { color: #61717a; font-size: 12px; padding: 12px 0; }
.ci-source-note summary { cursor: pointer; color: #4c6871; padding: 8px 0; }
.ci-source-note p { margin-top: 8px; max-width: 850px; line-height: 1.7; }
/* Give existing secondary catalog/health markup the same accessible light palette. */
#view-compintel :is(#compintel-tab-prices,#compintel-health) [class*="bg-slate-"] { background-color: #fff; }
#view-compintel :is(#compintel-tab-prices,#compintel-health) [class*="border-slate-"] { border-color: #dce4e6; }
#view-compintel :is(#compintel-tab-prices,#compintel-health) :is(.text-slate-100,.text-slate-200,.text-slate-300) { color: #243e48; }
#view-compintel :is(#compintel-tab-prices,#compintel-health) :is(.text-slate-400,.text-slate-500,.text-slate-600) { color: #64767e; }
#view-compintel :is(#compintel-tab-prices,#compintel-health) [class*="text-amber-"] { color: #916014; }
#view-compintel :is(#compintel-tab-prices,#compintel-health) .text-emerald-300 { color: #167657; }
#view-compintel :is(#compintel-tab-prices,#compintel-health) [class*="bg-amber-"] { background: #fff8e9; }
#compintel-tab-prices > .grid > div { padding: 18px; text-align: left; border-radius: 12px; }
#compintel-tab-prices > .grid > div > [id] { font-size: 24px; margin-top: 8px; }
#compintel-list > li { padding: 20px; border-radius: 12px; }
#compintel-list .truncate { white-space: normal; overflow-wrap: anywhere; }
#compintel-table-wrap { max-width: 100%; }
#compintel-table-wrap th, #compintel-table-wrap td { padding: 12px; }
#compintel-table-wrap table { min-width: 900px; }
@media (min-width: 1800px) { body.drv-design main { margin-left: max(224px,calc((100vw - 1440px + 224px)/2)); } }
@media (max-width: 1200px) {
  .ci-filter-fields { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ci-search-field { grid-column: 1/-1; }
  .ci-list-head,.ci-change-row { grid-template-columns: minmax(150px,1fr) 175px 116px; gap: 14px; }
  .ci-list-head > :last-child { display: none; }
  .ci-detected { grid-column: 1/-1; font-size: 10px; margin-top: -6px; }
  .ci-mobile-label { display: inline; }
  .ci-health-toggle { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  body.drv-design header { padding: 12px 20px; min-height: 64px; }
  body.drv-design #nav-brand { position: static; width: auto; height: auto; background: transparent; color: #19323c; padding: 0; font-size: 16px; }
  body.drv-design #nav-brand::before { width: 28px; height: 28px; }
  body.drv-design #workspace-menu-toggle { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px; background: #edf3f4; color: #294751; border-radius: 8px; font-size: 13px; }
  body.drv-design #nav-icons { display: none; }
  body.drv-design header[data-menu-open="true"] #nav-icons { display: flex; inset: 64px 0 auto auto; width: min(320px,100vw); max-height: calc(100dvh - 64px); border-radius: 0 0 0 12px; box-shadow: -8px 12px 32px #132b3526; z-index: 1100; }
  body.drv-design main { margin: 0; width: 100%; padding: 28px 24px 100px; }
  body.drv-design #user-email { display: none; }
}
@media (max-width: 600px) {
  body.drv-design header { padding: 12px 16px; }
  body.drv-design #user-role,body.drv-design #logout-btn { display: none; }
  body.drv-design header[data-menu-open="true"] #logout-btn { display: block; }
  body.drv-design main { padding: 24px 16px 100px; }
  #view-compintel .ci-heading { gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; }
  #view-compintel h1 { font-size: 27px; }
  #view-compintel .ci-refresh { min-height: 40px; padding: 8px 12px; font-size: 12px; }
  #view-compintel .ci-subtitle { font-size: 13px; }
  #compintel-health .ci-health-toggle { padding: 14px; gap: 12px; }
  .ci-health-summary { flex-direction: column; gap: 9px; }
  .ci-health-more { width: 100%; border-top: 1px solid #edf1f2; padding-top: 10px; display: flex; justify-content: space-between; }
  #view-compintel #compintel-tabs { margin-top: 20px; margin-bottom: 16px; }
  #view-compintel .ci-filter-box { padding: 14px; }
  .ci-filter-top { display: block; margin-bottom: 14px; }
  .ci-net-note { display: block; margin-top: 12px; }
  #view-compintel .ci-ch-panel-btn { padding: 7px 9px; min-height: 40px; font-size: 11px; }
  .ci-filter-fields { grid-template-columns: 1fr 1fr; gap: 12px 8px; }
  .ci-filter-fields label:nth-child(3) { grid-column: 1/-1; grid-row: 3; }
  #view-compintel :is(input[type="search"],select) { font-size: 16px; padding: 9px; }
  #compintel-ch-summary { font-size: 11px; padding-top: 8px; }
  .ci-list-head { display: none; }
  #compintel-changes-list { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .ci-change-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px 8px; padding: 18px 16px; background: #fff; border: 1px solid #dce4e6; border-radius: 12px; margin-bottom: 10px; }
  .ci-change-row:last-child { border-bottom: 1px solid #dce4e6; }
  .ci-product { grid-column: 1/-1; }
  .ci-product-name { font-size: 14px; }
  .ci-price-pair { font-size: 12px; gap: 5px; }
  .ci-price-pair strong { font-size: 16px; }
  .ci-delta { align-items: flex-end; }
  .ci-delta > span { align-self: flex-end; }
  .ci-detected { grid-column: 1/-1; border-top: 1px solid #edf1f2; padding-top: 10px; margin-top: 0; }
  body.drv-design .hermes-launcher { left: auto; right: 16px; bottom: 16px; width: auto; }
  #compintel-tab-prices > .grid { grid-template-columns: 1fr; }
  #compintel-tab-prices > .grid > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; }
  #compintel-tab-prices > .grid > div > [id] { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { #view-compintel * { transition: none !important; } }

body.drv-design .ci-nav-group { flex-shrink: 0; }
body.drv-design .ci-nav-group:not(:has(.nav-link:not(.hidden))) { display: none; }
body.drv-design .ci-nav-group > summary { color: #91adb7; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 650; padding: 14px 12px 10px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
body.drv-design .ci-nav-group > summary::after { content: '+'; font-size: 13px; line-height: 1; }
body.drv-design .ci-nav-group[open] > summary::after { content: '−'; }
body.drv-design .ci-nav-group > summary::-webkit-details-marker { display: none; }
body.drv-design .ci-nav-group > summary:focus-visible { outline: 2px solid #77dacb; outline-offset: -2px; }
@media (max-width:600px) {
  #view-compintel .ci-heading { flex-wrap: nowrap; align-items: center; }
  #view-compintel .ci-heading > div { min-width: 0; }
  #view-compintel h1 { font-size: 24px; }
  #view-compintel .ci-refresh { justify-content: center; min-width: 42px; height: 42px; padding: 8px; font-size: 20px; }
  #view-compintel .ci-refresh span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

#view-compintel #compintel-tab-prices button.bg-brand-600 { background: #e5f3ef; border-color: #a7cfc7; color: #086e65; }
@media (max-width: 360px) {
  .ci-filter-fields { grid-template-columns: minmax(0,1fr); }
  .ci-filter-fields label:nth-child(3) { grid-row: auto; }
  body.drv-design .hermes-launcher { width: 46px; height: 46px; padding: 0; justify-content: center; }
  body.drv-design .hermes-launcher > span:not(.hermes-spark) { display: none; }
}