:root {
  --cisco-blue: #049FD9;
  --cisco-blue-dark: #003B8A;
  --cisco-teal: #04A4B0;
  --cisco-teal-muted: rgba(4, 164, 176, 0.12);
  --cisco-green: #6BA32A;
  --cisco-yellow: #D9B216;
  --cisco-red: #C24632;
  --cisco-orange: #F26722;
  --bg-page: #F7F7F7;
  --bg-surface: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --bg-header: #003B8A;
  --bg-elevated: #FFFFFF;
  --bg-hover: #F0F1F2;
  --bg-input: #FFFFFF;
  --bg-code: #F0F1F2;
  --text-primary: #23282E;
  --text-secondary: #464C54;
  --text-tertiary: #656C75;
  --text-inverse: #FFFFFF;
  --text-link: #1D69CC;
  --border-default: #E1E4E8;
  --border-subtle: #F0F1F2;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', 'Consolas', monospace;
  --radius: var(--radius-md);
  --accent: var(--cisco-blue);
  --bg-tertiary: #E8EAED;
  --bg-callout: rgba(4,159,217,0.06);
  --border-accent: rgba(4,159,217,0.2);
  --bg-card: var(--bg-surface);
  --bg-muted: #F0F1F2;
  --sidebar-w: 280px;
  --header-h: 56px;
  --footer-h: 50px;
}
html.dark {
  --bg-page: #0F1214;
  --bg-surface: #23282E;
  --bg-sidebar: #171B20;
  --bg-header: #171B20;
  --bg-elevated: #2A2F35;
  --bg-hover: #373C42;
  --bg-input: #171B20;
  --bg-code: #171B20;
  --text-primary: #E8EBF1;
  --text-secondary: #D0D4D9;
  --text-tertiary: #979FA8;
  --text-link: #649EF5;
  --border-default: #464C54;
  --border-subtle: #373C42;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.35);
  --bg-tertiary: #373C42;
  --bg-callout: rgba(100,158,245,0.08);
  --border-accent: rgba(100,158,245,0.2);
  --bg-card: var(--bg-elevated);
  --bg-muted: #2A2F35;
}
html.cb-friendly .c-badge-critical { background: rgba(0,80,180,0.2); color: #1e5a9e; }
html.cb-friendly .c-badge-high { background: rgba(120,60,0,0.15); color: #a65a00; }
html.cb-friendly .c-badge-medium { background: rgba(100,100,0,0.15); color: #8a7a00; }
html.cb-friendly .c-badge-low { background: rgba(0,90,60,0.15); color: #1d6b4a; }
html.cb-friendly .uc-crit-dot.c-critical { background: #0050b4; }
html.cb-friendly .uc-crit-dot.c-high { background: #c45c00; }
html.cb-friendly .uc-crit-dot.c-medium { background: #8a7a00; }
html.cb-friendly .uc-crit-dot.c-low { background: #1d6b4a; }
html.dark.cb-friendly .c-badge-critical { background: rgba(0,80,180,0.25); color: #6FAAEE; }
html.dark.cb-friendly .c-badge-high { background: rgba(196,92,0,0.25); color: #F5A85F; }
html.dark.cb-friendly .c-badge-medium { background: rgba(138,122,0,0.25); color: #D4C94A; }
html.dark.cb-friendly .c-badge-low { background: rgba(29,107,74,0.25); color: #5FC09A; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent, #0066cc); outline-offset: 2px; }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
}
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: var(--font-sans); cursor: pointer; }
.si { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.15em; }
.c-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: var(--bg-header);
  display: flex; align-items: center;
  padding: 0 16px 0 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.c-hamburger {
  display: none; width: 36px; height: 36px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md); color: #fff; font-size: 18px;
  align-items: center; justify-content: center; margin-right: 8px;
}
.c-header-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; cursor: pointer; background: none; border: none; padding: 0; text-align: left; }
.c-header-logo-mark {
  width: 32px; height: 32px; background: rgba(255,255,255,0.15);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff;
}
.c-header-logo-text { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.c-header-logo-sub { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.04em; }
.c-header-spacer { flex: 1; }
.c-back-link {
  display: none; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-pill); padding: 0 12px; height: 34px;
  color: #fff; font-size: 13px; margin-right: 8px;
}
.c-main-search {
  margin-left: var(--sidebar-w); margin-top: var(--header-h);
  padding: 20px 32px 0;
}
.c-main-search-inner {
  position: relative; max-width: 560px;
}
.c-main-search-inner input {
  width: 100%; height: 42px; padding: 0 16px 0 42px;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-pill); color: var(--text-primary);
  font-size: 14px; font-family: var(--font-sans); outline: none;
  box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s;
}
.c-main-search-inner input:focus {
  border-color: var(--cisco-blue); box-shadow: 0 0 0 3px rgba(4,159,217,0.15);
}
.c-main-search-inner input::placeholder { color: var(--text-tertiary); }
.c-main-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; fill: var(--text-tertiary); pointer-events: none;
}
.c-header-actions { display: flex; align-items: center; gap: 6px; margin-left: 8px; flex-wrap: wrap; }
.c-header-audience {
  display: flex; align-items: center; gap: 0; margin-right: 6px;
  border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08); overflow: hidden;
}
.c-header-audience a {
  padding: 0 10px; height: 34px; display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.92);
  text-decoration: none; letter-spacing: 0.01em;
  border-right: 1px solid rgba(255,255,255,0.12); transition: background .15s, color .15s;
}
.c-header-audience a:last-child { border-right: 0; }
.c-header-audience a:hover { background: rgba(255,255,255,0.18); color: #fff; }
.c-header-audience a.active { background: rgba(255,255,255,0.22); color: #fff; cursor: default; }
@media (max-width: 900px) { .c-header-audience { display: none; } }
.c-equip-wrap { display: flex; gap: 4px; align-items: center; }
.c-equip-wrap select {
  height: 34px; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1); color: #fff; font-size: 12px; padding: 0 8px; max-width: 140px;
}
.c-equip-wrap option { color: #23282E; }
.view-mode-toggle { display: flex; border-radius: var(--radius-pill); overflow: hidden; border: 1px solid rgba(255,255,255,0.2); }
.view-mode-toggle button {
  padding: 0 10px; height: 34px; font-size: 11px; font-weight: 600;
  background: transparent; color: rgba(255,255,255,0.85); border: none;
}
.view-mode-toggle button.active { background: rgba(255,255,255,0.2); color: #fff; }
.c-inv-btn { position: relative; height: 34px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.1); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.c-inv-btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.25); }
.c-inv-btn:active { background: rgba(255,255,255,0.25); }
#inv-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 50%;
  background: var(--cisco-teal); color: #0F1214; font-size: 10px; font-weight: 800;
  display: none; align-items: center; justify-content: center;
}

.c-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,0.4); }
.c-sidebar-backdrop.open { display: block; }
.c-sidebar {
  position: fixed; top: var(--header-h); left: 0; bottom: 0;
  width: var(--sidebar-w); background: var(--bg-sidebar);
  border-right: 1px solid var(--border-default); overflow-y: auto; z-index: 50;
  padding: 12px 0; transition: transform 0.25s ease;
}
.sb-group { margin-bottom: 2px; }
.sb-group-hd {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: none; background: transparent;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-tertiary); cursor: pointer; text-align: left;
}
.sb-group-hd .si { transition: transform 0.2s; }
.sb-group-hd.open .si { transform: rotate(90deg); }
.sb-group-hd .c-sidebar-count { margin-left: auto; }
.sb-group-bd { display: none; padding-bottom: 8px; }
.sb-group-bd.open { display: block; }
.sb-subcats { display: none; padding-left: 12px; border-left: 2px solid var(--border-subtle); margin: 0 12px 8px 24px; }
.sb-subcats.open { display: block; }
.sb-subcat {
  padding: 6px 8px; font-size: 12px; color: var(--text-secondary); cursor: pointer;
  display: flex; justify-content: space-between; border-radius: var(--radius-sm);
}
.sb-subcat:hover { background: var(--bg-hover); color: var(--text-primary); }
.sb-subcat.active { color: var(--cisco-blue); font-weight: 600; }

.c-sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; cursor: pointer; font-size: 13px; color: var(--text-secondary);
  border-left: 3px solid transparent; margin-left: 0;
}
.c-sidebar-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.c-sidebar-item.active {
  background: var(--cisco-teal-muted); color: var(--cisco-blue); font-weight: 600;
  border-left-color: var(--cisco-teal);
}
.c-sidebar-item.depth { padding-left: 28px; }
.c-sidebar-count { margin-left: auto; font-size: 11px; background: var(--border-subtle); padding: 1px 7px; border-radius: var(--radius-pill); color: var(--text-tertiary); font-weight: 500; }
.c-sidebar-item.active .c-sidebar-count { background: rgba(4,159,217,0.12); color: var(--cisco-blue); }

.c-main {
  margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--header-h)); padding: 28px 36px 120px;
}

.c-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.c-kpi-card {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 18px; text-align: center; box-shadow: var(--shadow-sm);
}
.c-kpi-num {
  font-size: 28px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--cisco-blue);
}
.c-kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-top: 4px; }

.ov-hero-inline { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 28px; margin-bottom: 28px; }
.ov-hero-badge { font-size: 12px; font-weight: 600; color: var(--cisco-blue); margin-bottom: 8px; }
.ov-hero-h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.ov-hero-h2 span { color: var(--cisco-blue); }
.hero-domains { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-default);
  background: var(--bg-surface); font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
}
.hero-chip .si { width: 16px; height: 16px; }
.hero-chip:hover { border-color: var(--cisco-blue); color: var(--cisco-blue); }
.hero-chip.active { background: var(--cisco-teal-muted); border-color: var(--cisco-teal); color: var(--cisco-blue); }
.hd-count { margin-left: 6px; font-size: 11px; color: var(--text-secondary); }

.filter-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.filter-count { margin-left: auto; font-size: 13px; color: var(--text-secondary); }
.filter-count strong { color: var(--cisco-blue); }
.c-chip {
  height: 32px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-default);
  background: var(--bg-surface); color: var(--text-secondary); font-size: 12px; font-weight: 500;
}
.c-chip:hover { border-color: var(--cisco-blue); }
.c-chip.active { background: var(--cisco-blue); color: #fff; border-color: var(--cisco-blue); }
.c-chip.sm { height: 28px; padding: 0 10px; font-size: 11px; }
.c-chip.trend.active { background: rgba(217,178,22,0.2); border-color: var(--cisco-yellow); color: var(--text-primary); }
.c-select {
  height: 32px; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid var(--border-default);
  background: var(--bg-surface); color: var(--text-primary); font-size: 12px; font-family: var(--font-sans);
}
.c-select.full { width: 100%; max-width: 280px; }
.c-input.full { width: 100%; max-width: 280px; height: 32px; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary); font-size: 12px; font-family: var(--font-sans); }
.mt { margin-top: 6px; }

.adv-toggle-row { margin-bottom: 14px; }
.adv-toggle-btn { background: transparent; border: none; color: var(--cisco-blue); font-size: 13px; font-weight: 600; cursor: pointer; }
.adv-filter-panel {
  background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 16px; margin-bottom: 16px;
}
.adv-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.adv-row.single { grid-template-columns: 1fr; }
.adv-group.grow { min-width: 0; }
.adv-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 4px; }
.adv-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.adv-mitre-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.adv-mitre-wrap { position: relative; flex: 1; min-width: 200px; max-width: 420px; }
.adv-mitre-btn {
  width: 100%; text-align: left; padding: 8px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: var(--bg-surface); font-size: 12px; cursor: pointer;
}
.adv-mitre-btn.has-value { border-color: var(--cisco-blue); }
.adv-mitre-dd {
  display: none; position: absolute; z-index: 60; top: 100%; left: 0; right: 0;
  margin-top: 4px; max-height: 320px; overflow-y: auto; background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.adv-mitre-dd.show { display: block; }
.adv-mitre-search { width: 100%; padding: 8px; border: none; border-bottom: 1px solid var(--border-default); font-size: 12px; background: var(--bg-surface); color: var(--text-primary); }
.adv-mitre-clear { padding: 8px 12px; font-size: 12px; color: var(--cisco-blue); cursor: pointer; }
.adv-mitre-tactic { padding: 6px 12px; font-weight: 700; font-size: 11px; text-transform: uppercase; color: var(--text-tertiary); cursor: pointer; }
.adv-mitre-tactic.clickable:hover { background: var(--bg-hover); }
.adv-mitre-opt { padding: 6px 12px; font-size: 12px; cursor: pointer; border-left: 3px solid transparent; }
.adv-mitre-opt:hover, .adv-mitre-opt.selected { background: var(--cisco-teal-muted); border-left-color: var(--cisco-blue); }
.mitre-tid { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin-right: 6px; }
.mitre-map-trigger { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.c-active-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; align-items: center; }
.c-active-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 12px;
  background: var(--cisco-teal-muted); color: var(--cisco-blue); border: none; border-radius: var(--radius-pill); cursor: pointer;
}
.c-clear-all { font-size: 12px; font-weight: 600; color: var(--text-secondary); background: none; border: none; text-decoration: underline; cursor: pointer; }

.ov-tab-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 28px; border-bottom: 1px solid var(--border-default); padding-bottom: 16px; }
.ov-tab {
  padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-default);
  background: var(--bg-surface); font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.ov-tab.active { background: var(--cisco-blue); color: #fff; border-color: var(--cisco-blue); }
.ov-sort { margin-left: auto; height: 32px; border-radius: var(--radius-md); padding: 0 8px; font-size: 12px; border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary); }

.c-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.c-cat-card {
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 22px; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s, border-color 0.2s;
}
.c-cat-card:hover { box-shadow: var(--shadow-md); border-color: var(--cisco-blue); }
.c-cat-card-head { display: flex; align-items: flex-start; gap: 12px; }
.c-cat-card-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--cisco-blue);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.c-cat-card-icon .si { width: 20px; height: 20px; fill: #fff; }
.c-cat-card-title { font-size: 15px; font-weight: 700; }
.c-cat-card-num { font-size: 11px; color: var(--cisco-blue); font-weight: 600; margin-top: 2px; }
.c-cat-card-desc { font-size: 13px; color: var(--text-secondary); margin-top: 12px; line-height: 1.55; }
.c-cat-card-footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.c-cat-card-badge { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--border-subtle); color: var(--text-secondary); }
.c-breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-tertiary); margin-bottom: 12px; flex-wrap: wrap; }
.c-breadcrumb button { background: none; border: none; color: var(--text-link); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: var(--radius-sm); }
.c-breadcrumb button:hover { text-decoration: underline; }
.c-bc-sep { color: var(--text-tertiary); font-size: 11px; }
.c-bc-current { color: var(--text-secondary); font-weight: 500; }
.sc-view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 20px; }
.sc-view-card {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: 20px;
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.sc-view-card:hover { border-color: var(--cisco-blue); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sc-view-card-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sc-view-card-id { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--cisco-blue); }
.sc-view-card-name { flex: 1; font-size: 15px; font-weight: 600; color: var(--text-primary); min-width: 0; }
.sc-view-card-count { font-size: 11px; color: var(--text-tertiary); background: var(--bg-page); padding: 2px 8px; border-radius: var(--radius-sm); flex-shrink: 0; white-space: nowrap; }
.sc-guide-link { font-size: 11px; font-weight: 500; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--accent-faint, rgba(0,120,212,.08)); white-space: nowrap; flex-shrink: 0; transition: background .15s; }
.sc-guide-link:hover { background: var(--accent-muted, rgba(0,120,212,.16)); text-decoration: none; }
.sc-guide-link .si { width: 12px; height: 12px; }
.sc-view-card-crit { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sc-crit-dot { font-size: 11px; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.sc-crit-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sc-crit-dot.critical::before { background: var(--cisco-red); }
.sc-crit-dot.high::before { background: #ff9800; }
.sc-crit-dot.medium::before { background: var(--cisco-blue); }
.sc-crit-dot.low::before { background: var(--cisco-teal); }
.sc-crit-dot.critical { color: var(--cisco-red); }
.sc-crit-dot.high { color: #ff9800; }
.sc-crit-dot.medium { color: var(--cisco-blue); }
.sc-crit-dot.low { color: var(--cisco-teal); }
.sc-view-card-ucs { border-top: 1px solid var(--border-subtle); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.sc-view-uc-peek { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: background 0.12s; }
.sc-view-uc-peek:hover { background: var(--bg-hover); color: var(--cisco-blue); }
.sc-view-uc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-view-more { font-size: 11px; color: var(--text-tertiary); padding: 4px 8px; font-style: italic; }
.sc-view-showall { text-align: center; margin-top: 24px; margin-bottom: 24px; }
.sc-view-showall-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); color: var(--text-primary);
  font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sc-view-showall-btn .si { width: 16px; height: 16px; }
.sc-view-showall-btn:hover { background: var(--cisco-blue); border-color: var(--cisco-blue); color: #fff; }

.uc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.uc-card {
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 18px; cursor: pointer; text-align: left; transition: border-color 0.15s;
}
.uc-card:hover { border-color: var(--cisco-blue); }
.uc-card-top { display: flex; gap: 8px; align-items: flex-start; padding-right: 28px; }
.uc-crit-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.uc-crit-dot.c-critical { background: var(--cisco-red); }
.uc-crit-dot.c-high { background: var(--cisco-orange); }
.uc-crit-dot.c-medium { background: var(--cisco-yellow); }
.uc-crit-dot.c-low { background: var(--cisco-green); }
.uc-card-title { font-size: 13px; font-weight: 700; line-height: 1.35; }
.uc-card-id { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--cisco-blue); background: rgba(4,159,217,0.08); padding: 1px 6px; border-radius: var(--radius-sm); flex-shrink: 0; }
.uc-card-val { font-size: 12px; color: var(--text-secondary); margin-top: 8px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.uc-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.uc-card-tag { font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--border-subtle); color: var(--text-secondary); }
.uc-card-equip { font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(4,159,217,0.08); color: var(--cisco-blue); border: 1px solid rgba(4,159,217,0.2); font-family: var(--font-mono); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-card-cim { font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(107,163,42,0.08); color: var(--cisco-green); border: 1px solid rgba(107,163,42,0.2); font-family: var(--font-mono); white-space: nowrap; }
.uc-card-pillar { font-size: 10px; padding: 1px 7px; border-radius: var(--radius-pill); font-weight: 600; white-space: nowrap; }
.uc-card-pillar.security { background: rgba(194,70,50,0.08); color: #B03927; border: 1px solid rgba(194,70,50,0.18); }
.uc-card-pillar.observability { background: rgba(4,159,217,0.08); color: var(--cisco-blue); border: 1px solid rgba(4,159,217,0.18); }
html.dark .uc-card-pillar.security { color: #E8897B; }
html.dark .uc-card-pillar.observability { color: #7DD3FC; }
.uc-card-reg { font-size: 10px; padding: 1px 7px; border-radius: var(--radius-pill); font-weight: 600; white-space: nowrap; background: rgba(128,90,213,0.08); color: #7C5CBF; border: 1px solid rgba(128,90,213,0.18); }
html.dark .uc-card-reg { color: #C4B5FD; }
.uc-card-es { font-size: 10px; padding: 1px 7px; border-radius: var(--radius-pill); font-weight: 600; white-space: nowrap; background: rgba(4,164,176,0.08); color: var(--cisco-teal); border: 1px solid rgba(4,164,176,0.18); }
.uc-card-successor { font-size: 10px; padding: 1px 7px; border-radius: var(--radius-pill); font-weight: 600; white-space: nowrap; background: rgba(0,150,136,0.08); color: #00897b; border: 1px solid rgba(0,150,136,0.18); }
.uc-card-status { font-size: 10px; padding: 1px 7px; border-radius: var(--radius-pill); font-weight: 600; white-space: nowrap; text-transform: capitalize; }
.uc-card-status.verified { background: rgba(16,185,129,0.10); color: #047857; border: 1px solid rgba(16,185,129,0.25); }
.uc-card-status.community { background: rgba(107,114,128,0.10); color: #4B5563; border: 1px solid rgba(107,114,128,0.25); }
.uc-card-status.draft { background: rgba(245,158,11,0.10); color: #B45309; border: 1px solid rgba(245,158,11,0.25); }
html.dark .uc-card-status.verified { color: #34D399; border-color: rgba(16,185,129,0.40); }
html.dark .uc-card-status.community { color: #9CA3AF; border-color: rgba(107,114,128,0.40); }
html.dark .uc-card-status.draft { color: #FBBF24; border-color: rgba(245,158,11,0.40); }
/* Provenance origin badges — show where the SPL was sourced from.  Colour
   convention: stronger authority → cooler / more saturated palette. */
.uc-card-prov { font-size: 10px; padding: 1px 7px; border-radius: var(--radius-pill); font-weight: 600; white-space: nowrap; cursor: help; }
.uc-card-prov.prov-SO { background: rgba(4,159,217,0.10); color: #0369A1; border: 1px solid rgba(4,159,217,0.28); }   /* Splunk official */
.uc-card-prov.prov-VO { background: rgba(107,163,42,0.10); color: #3F6D16; border: 1px solid rgba(107,163,42,0.28); }  /* Vendor official */
.uc-card-prov.prov-MA { background: rgba(194,70,50,0.10); color: #8B2E20; border: 1px solid rgba(194,70,50,0.28); }    /* MITRE ATT&CK */
.uc-card-prov.prov-NC { background: rgba(124,92,191,0.10); color: #553C9E; border: 1px solid rgba(124,92,191,0.28); }  /* Standards */
.uc-card-prov.prov-TI { background: rgba(234,88,12,0.10); color: #9A3412; border: 1px solid rgba(234,88,12,0.28); }    /* Threat intel */
.uc-card-prov.prov-SB { background: rgba(4,159,217,0.06); color: #0891B2; border: 1px solid rgba(4,159,217,0.18); }    /* Splunk blog */
.uc-card-prov.prov-CO { background: rgba(107,114,128,0.10); color: #4B5563; border: 1px solid rgba(107,114,128,0.25); }/* Community */
.uc-card-prov.prov-UN { background: rgba(107,114,128,0.06); color: #6B7280; border: 1px solid rgba(107,114,128,0.18); }/* Unclassified */
.uc-card-prov.prov-CT { background: rgba(250,204,21,0.10); color: #854D0E; border: 1px solid rgba(234,179,8,0.28); }   /* Contributor */
html.dark .uc-card-prov.prov-SO { color: #7DD3FC; border-color: rgba(4,159,217,0.40); }
html.dark .uc-card-prov.prov-VO { color: #BEF264; border-color: rgba(107,163,42,0.40); }
html.dark .uc-card-prov.prov-MA { color: #FCA5A5; border-color: rgba(194,70,50,0.40); }
html.dark .uc-card-prov.prov-NC { color: #C4B5FD; border-color: rgba(124,92,191,0.40); }
html.dark .uc-card-prov.prov-TI { color: #FDBA74; border-color: rgba(234,88,12,0.40); }
html.dark .uc-card-prov.prov-SB { color: #67E8F9; border-color: rgba(4,159,217,0.28); }
html.dark .uc-card-prov.prov-CO { color: #9CA3AF; border-color: rgba(107,114,128,0.40); }
html.dark .uc-card-prov.prov-UN { color: #9CA3AF; border-color: rgba(107,114,128,0.28); }
html.dark .uc-card-prov.prov-CT { color: #FCD34D; border-color: rgba(234,179,8,0.40); }
.uc-card-fresh { font-size: 10px; padding: 1px 7px; border-radius: var(--radius-pill); font-weight: 600; white-space: nowrap; font-family: var(--font-mono); }
.uc-card-fresh.fresh-green { background: rgba(16,185,129,0.08); color: #047857; border: 1px solid rgba(16,185,129,0.22); }
.uc-card-fresh.fresh-amber { background: rgba(245,158,11,0.08); color: #B45309; border: 1px solid rgba(245,158,11,0.22); }
.uc-card-fresh.fresh-red { background: rgba(220,38,38,0.08); color: #B91C1C; border: 1px solid rgba(220,38,38,0.22); }
html.dark .uc-card-fresh.fresh-green { color: #34D399; border-color: rgba(16,185,129,0.40); }
html.dark .uc-card-fresh.fresh-amber { color: #FBBF24; border-color: rgba(245,158,11,0.40); }
html.dark .uc-card-fresh.fresh-red { color: #F87171; border-color: rgba(220,38,38,0.40); }

/* Content depth badges (Gold Standard quality tiers) */
.uc-card-depth { font-size: 10px; padding: 1px 7px; border-radius: var(--radius-pill); font-weight: 600; white-space: nowrap; text-transform: capitalize; }
.uc-card-depth.depth-gold   { background: rgba(234,179,8,0.12);   color: #854D0E; border: 1px solid rgba(234,179,8,0.30); }
.uc-card-depth.depth-silver { background: rgba(107,114,128,0.10); color: #374151; border: 1px solid rgba(107,114,128,0.28); }
.uc-card-depth.depth-bronze { background: rgba(180,83,9,0.08);    color: #92400E; border: 1px solid rgba(180,83,9,0.22); }
.uc-card-depth.depth-none   { background: rgba(220,38,38,0.06);   color: #B91C1C; border: 1px solid rgba(220,38,38,0.18); }
html.dark .uc-card-depth.depth-gold   { color: #FCD34D; border-color: rgba(234,179,8,0.50); }
html.dark .uc-card-depth.depth-silver { color: #D1D5DB; border-color: rgba(107,114,128,0.45); }
html.dark .uc-card-depth.depth-bronze { color: #FDBA74; border-color: rgba(180,83,9,0.40); }
html.dark .uc-card-depth.depth-none   { color: #FCA5A5; border-color: rgba(220,38,38,0.35); }

/* Subcategory quality bar */
.sc-quality { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.sc-quality-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; flex: 1; background: var(--bg-tertiary); min-width: 60px; }
.sc-q-seg { height: 100%; min-width: 2px; }
.sc-q-gold   { background: #EAB308; }
.sc-q-silver { background: #6B7280; }
.sc-q-bronze { background: #D97706; }
.sc-q-none   { background: #DC2626; opacity: 0.3; }
.sc-quality-label { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }

/* Quality gaps callout in detail panel */
.quality-callout { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.18); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.quality-callout .c-panel-section-title { color: #B45309; }
html.dark .quality-callout { background: rgba(245,158,11,0.04); border-color: rgba(245,158,11,0.15); }
html.dark .quality-callout .c-panel-section-title { color: #FBBF24; }
.quality-callout ul { margin: 4px 0 0 16px; padding: 0; font-size: 13px; color: var(--text-secondary); }
.quality-callout li { margin-bottom: 2px; }

/* Category quality summary (header and overview cards) */
.cat-quality-summary { margin-top: 6px; font-size: 12px; color: var(--text-tertiary); font-weight: 500; }

/* Quality tab — category cards sorted by depth */
.quality-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 12px; }
.quality-cat-card {
  background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius);
  padding: 16px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.quality-cat-card:hover { border-color: var(--cisco-blue); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.quality-cat-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.quality-cat-title { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.quality-cat-stats { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.quality-cat-gaps { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.quality-gap-item { font-size: 11px; color: var(--text-secondary); padding: 2px 0; border-top: 1px solid var(--border-default); }
.quality-gap-item:first-child { border-top: none; }

.ov-section { margin-bottom: 32px; }
.subcat-header { font-size: 16px; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); }
.subcat-count { font-weight: 600; color: var(--cisco-blue); margin-left: 8px; }
.ov-subcat-list { display: flex; flex-direction: column; gap: 6px; }
.ov-subcat-row {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 16px; background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); cursor: pointer; text-align: left; font-size: 13px;
}
.ov-subcat-row:hover { border-color: var(--cisco-blue); }
.ov-subcat-id { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.ov-subcat-count { font-size: 12px; font-weight: 600; color: var(--cisco-blue); }

.roadmap-hd { font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 36px; padding: 14px 0; display: flex; align-items: center; gap: 8px; }
.ov-collapse-arrow { display: inline-flex; transition: transform 0.2s; }
.ov-collapse-arrow.open, .roadmap-hd:has(+ .roadmap-body:not([style*="display: none"])) .ov-collapse-arrow { transform: rotate(90deg); }
.roadmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.roadmap-phase { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px; }
.rp-num { font-size: 11px; font-weight: 700; color: var(--cisco-blue); text-transform: uppercase; margin-bottom: 6px; }
.roadmap-phase h4 { font-size: 14px; margin-bottom: 8px; }
.roadmap-phase p { font-size: 12px; color: var(--text-secondary); }

.c-section-header { margin-bottom: 28px; }
.c-section-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.c-section-desc { font-size: 14px; color: var(--text-secondary); margin-top: 6px; }
.c-subcat-group { margin-bottom: 36px; scroll-margin-top: calc(var(--header-h) + 16px); }
.c-subcat-title {
  font-size: 16px; font-weight: 700; margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 2px solid var(--cisco-blue); display: inline-block;
}
.c-uc-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.c-uc-table th { text-align: left; padding: 10px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); background: var(--bg-elevated); border-bottom: 1px solid var(--border-default); }
.c-uc-table td { padding: 11px 14px; font-size: 13px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.c-uc-table tr:last-child td { border-bottom: none; }
.c-uc-table tbody tr { cursor: pointer; }
.c-uc-table tbody tr:hover td { background: var(--bg-hover); }
.c-uc-table .uc-tbl-cb { width: 32px; text-align: center; padding-left: 8px; padding-right: 0; }
.c-uc-table .uc-tbl-cb input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 2px solid var(--border-default);
  border-radius: 3px; background: var(--bg-surface); cursor: pointer; position: relative; vertical-align: middle; transition: all .15s ease;
}
.c-uc-table .uc-tbl-cb input[type="checkbox"]:hover { border-color: var(--cisco-blue); }
.c-uc-table .uc-tbl-cb input[type="checkbox"]:checked { background: var(--cisco-blue); border-color: var(--cisco-blue); }
.c-uc-table .uc-tbl-cb input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 3px; top: 0px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.c-uc-id { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.c-uc-title { font-weight: 600; }
.c-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 600; }
.c-badge-critical { background: rgba(194,70,50,0.1); color: #B03927; }
.c-badge-high { background: rgba(242,103,34,0.1); color: #AD3907; }
.c-badge-medium { background: rgba(217,178,22,0.15); color: #7A5203; }
.c-badge-low { background: rgba(107,163,42,0.12); color: #2D7312; }
html.dark .c-badge-critical { background: rgba(194,70,50,0.18); color: #E8897B; }
html.dark .c-badge-high { background: rgba(242,103,34,0.18); color: #F5945F; }
html.dark .c-badge-medium { background: rgba(217,178,22,0.2); color: #E5C233; }
html.dark .c-badge-low { background: rgba(107,163,42,0.18); color: #85BD46; }
html.dark .uc-card-successor { color: #4DB6AC; }
html.dark .uc-card-es { color: #5EC6D0; }
html.dark .c-equip-wrap option { color: var(--text-primary); background: var(--bg-surface); }
html.dark .c-chip.trend.active { background: rgba(217,178,22,0.25); }
html.dark .uc-sizing-tray { box-shadow: 0 -2px 8px rgba(0,0,0,0.25); border-top-color: var(--border-default); }
html.dark .uc-sizing-tray.has-selection { box-shadow: 0 -4px 12px rgba(0,0,0,0.4); }
html.dark .c-header { box-shadow: 0 2px 12px rgba(0,0,0,0.35); }
html.dark .c-sidebar-backdrop { background: rgba(0,0,0,0.6); }
html.dark .c-overlay { background: rgba(0,0,0,0.65); }
html.dark .sc-crit-dot.high { color: #FFB74D; }
html.dark .sc-crit-dot.high::before { background: #FFB74D; }
html.dark .uc-card-equip { background: rgba(4,159,217,0.15); border-color: rgba(4,159,217,0.3); }
html.dark .uc-card-cim { background: rgba(107,163,42,0.15); border-color: rgba(107,163,42,0.3); }
html.dark .uc-card-reg { background: rgba(128,90,213,0.15); border-color: rgba(128,90,213,0.28); }
html.dark .uc-card-es { background: rgba(4,164,176,0.15); border-color: rgba(4,164,176,0.28); }
html.dark .uc-card-successor { background: rgba(0,150,136,0.15); border-color: rgba(0,150,136,0.28); }
.c-badge-diff { background: var(--border-subtle); color: var(--text-secondary); }
.c-badge-wave-crawl { background: rgba(107,163,42,0.14); color: #2D7312; }
.c-badge-wave-walk { background: rgba(217,178,22,0.18); color: #7A5203; }
.c-badge-wave-run { background: rgba(128,90,213,0.16); color: #6A3CB5; }
html.dark .c-badge-wave-crawl { background: rgba(107,163,42,0.22); color: #9BD05A; }
html.dark .c-badge-wave-walk { background: rgba(217,178,22,0.24); color: #E5C233; }
html.dark .c-badge-wave-run { background: rgba(128,90,213,0.24); color: #B79BF0; }
html.cb-friendly .c-badge-wave-crawl { background: rgba(0,114,178,0.18); color: #004F87; }
html.cb-friendly .c-badge-wave-walk { background: rgba(213,94,0,0.18); color: #8C3D00; }
html.cb-friendly .c-badge-wave-run { background: rgba(204,121,167,0.20); color: #793158; }
html.dark.cb-friendly .c-badge-wave-crawl { background: rgba(0,114,178,0.30); color: #6BAEDF; }
html.dark.cb-friendly .c-badge-wave-walk { background: rgba(213,94,0,0.30); color: #F0A55C; }
html.dark.cb-friendly .c-badge-wave-run { background: rgba(204,121,167,0.30); color: #DBA1C2; }
.uc-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; padding: 0; list-style: none; }
.uc-chip-list li { margin: 0; padding: 0; }
button.uc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); background: var(--bg-surface);
  color: var(--text-primary); font-family: var(--font-mono); font-size: 11px;
  cursor: pointer; transition: all .15s ease;
}
button.uc-chip:hover { border-color: var(--cisco-blue); color: var(--cisco-blue); }
button.uc-chip .chip-wave { font-family: var(--font-sans, inherit); font-size: 9px; }
.c-roadmap-band {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
  margin: 18px 0 24px 0; padding: 14px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
}
.c-roadmap-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.c-roadmap-col-title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }
.c-roadmap-col-title .c-roadmap-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); font-weight: 500; letter-spacing: 0; }
.c-roadmap-col-arrow { color: var(--text-tertiary); font-weight: 400; padding: 0 4px; }
.c-roadmap-col-body { display: flex; flex-wrap: wrap; gap: 4px; }
.c-roadmap-empty { font-size: 11px; color: var(--text-tertiary); font-style: italic; }
.c-roadmap-more { font-size: 11px; color: var(--text-tertiary); align-self: center; padding: 0 4px; }
.c-roadmap-unassigned { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border-subtle); grid-column: 1 / -1; }
@media (max-width: 720px) { .c-roadmap-band { grid-template-columns: 1fr; } .c-roadmap-col-arrow { display: none; } }
.c-search-heading { font-size: 15px; font-weight: 700; margin-bottom: 20px; }
.c-search-heading strong { color: var(--cisco-blue); }
.search-cat-block { margin-bottom: 28px; }
.c-empty { text-align: center; padding: 48px; color: var(--text-tertiary); }
.c-empty-state { text-align: center; padding: 56px 24px; }
.c-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }
.c-empty-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.c-empty-desc { font-size: 13px; color: var(--text-tertiary); margin-bottom: 16px; }
.c-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.c-empty-actions button { padding: 7px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
.c-empty-actions button:hover { border-color: var(--cisco-blue); color: var(--cisco-blue); }
.c-empty-actions button.primary { background: var(--cisco-blue); color: #fff; border-color: var(--cisco-blue); }
.c-empty-actions button.primary:hover { background: #038cc2; }

/* ─── Master-detail layout (three-column) ─── */
body.detail-open #main { display: none; }
body.detail-open .c-main-search { display: none; }
body.detail-open .site-footer { left: var(--sidebar-w); }
#detail-container {
  display: none; margin-left: var(--sidebar-w); margin-top: var(--header-h); min-height: calc(100vh - var(--header-h));
}
body.detail-open #detail-container { display: grid; grid-template-columns: 260px 1fr; }
#detail-list {
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h));
  overflow-y: auto; border-right: 1px solid var(--border-default);
  background: var(--bg-sidebar); padding: 0;
}
#detail-pane {
  overflow-y: auto; padding: 32px 40px 120px; max-height: calc(100vh - var(--header-h));
}
.dl-heading {
  padding: 14px 16px 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-default); background: var(--bg-sidebar);
  position: sticky; top: 0; z-index: 2;
}
.dl-heading-cat { color: var(--text-primary); font-size: 12px; }
.dl-heading-sc { margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--cisco-blue); text-transform: none; letter-spacing: 0; }
.dl-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 12px;
  color: var(--text-secondary); cursor: pointer; border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border-subtle); transition: background 0.1s;
}
.dl-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.dl-item.active { background: var(--cisco-teal-muted); color: var(--cisco-blue); font-weight: 600; border-left-color: var(--cisco-teal); }
.dl-item-id { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); flex-shrink: 0; min-width: 68px; }
.dl-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-sc-divider {
  padding: 8px 16px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-tertiary); background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}
.dp-header { margin-bottom: 20px; }
.dp-id { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); margin-bottom: 4px; }
.dp-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.dp-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.dp-meta-line { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 2px; }
.dp-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--cisco-blue); text-decoration: none; margin-top: 4px; }
.dp-link:hover { text-decoration: underline; }
.dp-ge { background: rgba(4,159,217,0.06); border: 1px solid rgba(4,159,217,0.15); border-radius: var(--radius-md); padding: 16px; margin-bottom: 20px; }
.dp-ge-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--cisco-blue); margin-bottom: 6px; }
.dp-ge-body { font-size: 14px; line-height: 1.6; color: var(--text-primary); }
.dp-thin { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.18); border-radius: var(--radius-md); padding: 16px; margin-bottom: 20px; text-align: center; }
.dp-thin-title { font-size: 14px; font-weight: 600; color: #B45309; margin-bottom: 6px; }
.dp-thin a { color: var(--cisco-blue); }
html.dark .dp-thin { background: rgba(245,158,11,0.04); border-color: rgba(245,158,11,0.15); }
html.dark .dp-thin-title { color: #FBBF24; }
.dp-section { margin-bottom: 20px; }
.dp-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); margin-bottom: 6px; }
.dp-section-body { font-size: 13px; line-height: 1.6; }
.dp-section-body p { margin: 0 0 8px; }
.dp-section-body ul, .dp-section-body ol { margin: 0 0 8px 18px; padding: 0; }
.dp-section-body li { margin-bottom: 4px; }
.dp-section-body code { font-family: var(--font-mono); font-size: 11px; background: var(--bg-code); padding: 2px 5px; border-radius: 4px; }
.dp-section-body strong { font-weight: 700; }
.dp-section-body h2, .dp-section-body h3, .dp-section-body h4, .dp-section-body h5 { font-size: 14px; font-weight: 700; margin: 16px 0 6px; }
.md-h { font-weight: 700; margin: 16px 0 6px; }
h2.md-h { font-size: 16px; }
h3.md-h { font-size: 14px; }
h4.md-h, h5.md-h { font-size: 13px; }
.md-list { margin: 4px 0 8px 18px; padding: 0; }
.md-list li { margin-bottom: 4px; font-size: 13px; line-height: 1.55; }
/* List/grid toggle */
.browse-toggle { display: inline-flex; border-radius: var(--radius-pill); overflow: hidden; border: 1px solid var(--border-default); height: 32px; margin-right: 8px; }
.browse-toggle button { padding: 0 12px; font-size: 11px; font-weight: 600; background: var(--bg-surface); color: var(--text-secondary); border: none; cursor: pointer; }
.browse-toggle button.active { background: var(--cisco-blue); color: #fff; }
.uc-list-container { display: flex; flex-direction: column; }
.uc-list-row {
  display: grid; grid-template-columns: 80px 1fr auto auto; gap: 8px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); cursor: pointer;
  font-size: 13px; transition: background 0.1s;
}
.uc-list-row:hover { background: var(--bg-hover); }
.uc-list-id { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.uc-list-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) {
  body.detail-open .c-sidebar { display: none; }
  body.detail-open .c-main { margin-left: 0; }
  body.detail-open #detail-container { margin-left: 0; grid-template-columns: 240px 1fr; }
  body.detail-open .site-footer { left: 0; }
}
@media (max-width: 768px) {
  body.detail-open #detail-container { display: none; }
  body.detail-open .c-sidebar { display: none; }
}

/* Detail pane content styles */
.c-panel-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.c-panel-meta-item { padding: 4px 8px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border-subtle); font-size: 12px; }
.c-panel-meta-item.full { width: 100%; }
.c-panel-meta-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 1px; }
.c-panel-section { margin-bottom: 20px; }
.c-panel-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); margin-bottom: 6px; }
.c-panel-section-body { font-size: 13px; line-height: 1.55; }
.c-panel-section-body code { font-family: var(--font-mono); font-size: 11px; background: var(--bg-code); padding: 2px 5px; border-radius: 4px; }
.c-spl-block {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  background: var(--bg-code); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px; margin: 0;
}
.code-wrap { position: relative; }
.code-wrap .copy-btn { position: absolute; top: 8px; right: 8px; font-size: 11px; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--bg-surface); cursor: pointer; }
.c-panel-details { margin-bottom: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px; }
.c-panel-details summary { font-weight: 600; cursor: pointer; }
.sapp-card { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px; margin-top: 8px; font-size: 12px; }
.splunk-app-link, .splunk-ta-card {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: var(--radius-md); border: 1px solid var(--border-default);
  background: var(--bg-surface); text-decoration: none; color: inherit;
  transition: border-color 0.2s, background 0.2s; margin-top: 8px;
  max-width: 520px;
}
.splunk-app-link.app-card { border-left: 3px solid var(--cisco-green); }
.splunk-app-link.ta-card { border-left: 3px solid var(--cisco-teal); }
.splunk-ta-card { border-left: 3px solid var(--cisco-teal); }
.splunk-app-link:hover { border-color: var(--cisco-blue); background: var(--bg-hover); }
.splunk-app-icon, .splunk-ta-icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--cisco-green); }
.splunk-app-icon svg, .splunk-ta-icon svg { width: 24px; height: 24px; }
.splunk-ta-icon { color: var(--cisco-teal); }
.splunk-app-info, .splunk-ta-info { flex: 1; font-size: 13px; line-height: 1.5; }
.splunk-app-info strong, .splunk-ta-info strong { display: block; font-size: 13px; color: var(--text-primary); }
.splunk-app-desc { color: var(--text-tertiary); font-size: 11px; }
.splunk-app-arrow { flex-shrink: 0; width: 16px; height: 16px; color: var(--text-tertiary); }
.splunk-app-arrow svg { width: 16px; height: 16px; }
.splunk-app-label, .splunk-ta-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 2px; }
.splunk-app-label { color: var(--cisco-green); }
.splunk-ta-label { color: var(--cisco-teal); }
.predecessor-note-box {
  margin-top: 6px; padding: 8px 12px; border-radius: var(--radius-md);
  background: rgba(0,0,0,0.02); border: 1px solid var(--border-subtle);
  font-size: 11px; color: var(--text-tertiary); line-height: 1.5;
}
html.dark .predecessor-note-box { background: rgba(255,255,255,0.03); }
.predecessor-note-box a { color: var(--text-secondary); text-decoration: underline; }
.app-screenshots-section { margin-top: 16px; }
.app-screenshots-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; }
.app-screenshots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; max-width: 520px; }
.app-screenshot-card {
  display: block; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border-default); background: var(--bg-page);
  text-decoration: none; transition: border-color 0.2s, transform 0.15s;
}
.app-screenshot-card:hover { border-color: var(--cisco-blue); transform: translateY(-2px); }
.app-screenshot-card img { width: 100%; height: auto; display: block; aspect-ratio: 16/10; object-fit: cover; }
.app-screenshot-label { display: block; padding: 6px 10px; font-size: 11px; color: var(--text-secondary); background: var(--bg-surface); text-align: center; }
.ntviz-panels { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; max-width: 520px; }
.ntviz-panel { flex: 1 1 200px; max-width: 240px; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-page); }
.ntviz-panel-title { font-size: 11px; font-weight: 500; color: var(--text-secondary); padding: 6px 10px; background: var(--bg-elevated); border-bottom: 1px solid var(--border-default); }
.ntviz-svg { width: 100%; height: auto; display: block; }
.ntviz-sv { max-width: 200px; margin: 0 auto; }
.linkish { background: none; border: none; color: var(--text-link); cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0; margin-right: 6px; }

.uc-compliance-table-wrap { overflow-x: auto; margin-top: 4px; border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.uc-compliance-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.uc-compliance-table thead th {
  text-align: left; padding: 8px 10px; background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-default); font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-tertiary); white-space: nowrap;
}
.uc-compliance-table tbody td {
  padding: 8px 10px; border-bottom: 1px solid var(--border-default);
  vertical-align: top; line-height: 1.4;
}
.uc-compliance-table tbody tr:last-child td { border-bottom: none; }
.uc-compliance-table tbody tr:nth-child(even) { background: var(--bg-subtle, rgba(0,0,0,0.015)); }
.uc-compliance-ver { font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; }
.uc-compliance-filter-clause { font-size: 10.5px; margin-left: 4px; }
.uc-compliance-missing { color: var(--text-tertiary); font-style: italic; }
.uc-compliance-footnote { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; }

.uc-compliance-mode, .uc-compliance-assurance {
  display: inline-block; padding: 2px 6px; border-radius: var(--radius-sm, 4px);
  font-size: 10.5px; font-weight: 600; text-transform: capitalize;
  border: 1px solid transparent; white-space: nowrap;
}
.uc-compliance-mode.mode-satisfies { background: rgba(46,160,67,0.08); color: #1a7f37; border-color: rgba(46,160,67,0.2); }
.uc-compliance-mode.mode-detects-violation-of { background: rgba(218,54,51,0.08); color: #a40e26; border-color: rgba(218,54,51,0.2); }
.uc-compliance-mode.mode-assists-with { background: rgba(54,120,218,0.08); color: #0550ae; border-color: rgba(54,120,218,0.2); }

.uc-compliance-assurance.assurance-full { background: rgba(46,160,67,0.12); color: #1a7f37; border-color: rgba(46,160,67,0.25); }
.uc-compliance-assurance.assurance-partial { background: rgba(187,128,9,0.12); color: #8a5200; border-color: rgba(187,128,9,0.25); }
.uc-compliance-assurance.assurance-contributing { background: rgba(130,80,223,0.10); color: #553098; border-color: rgba(130,80,223,0.22); }

.c-panel-gh { margin-top: 20px; }
.c-doc-chip { display: inline-block; padding: 4px 10px; background: var(--bg-callout); border: 1px solid var(--border-accent); border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; color: var(--text-link); text-decoration: none; transition: background .12s; }
.c-doc-chip:hover { background: var(--border-accent); text-decoration: none; }
.c-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; border: 1px solid var(--border-default); text-decoration: none; color: var(--text-primary); background: var(--bg-elevated); }
.c-btn-secondary:hover { border-color: var(--cisco-blue); color: var(--cisco-blue); }
.c-panel-nav {
  display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border-default); flex-shrink: 0;
}
.c-panel-nav-btn { flex: 1; height: 36px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--bg-elevated); font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.c-panel-nav-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
#panel-pos { font-size: 12px; font-weight: 600; color: var(--text-tertiary); min-width: 64px; text-align: center; }

.c-overlay { position: fixed; inset: 0; z-index: 220; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.c-overlay.open { display: flex; }
.c-modal {
  background: var(--bg-surface); border-radius: var(--radius-lg); max-width: 960px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); position: relative;
}
.c-modal.narrow { max-width: 480px; }
.c-modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: none; background: var(--bg-hover); border-radius: var(--radius-md); font-size: 22px; cursor: pointer; z-index: 2; color: var(--text-primary); }
.c-modal-hd { padding: 20px 48px 12px 20px; border-bottom: 1px solid var(--border-default); font-size: 20px; font-weight: 800; }
.c-modal-bd { padding: 20px 24px; overflow-y: auto; flex: 1; font-size: 13px; line-height: 1.6; }
.src-section { margin-bottom: 24px; }
.src-section-head { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--cisco-blue-dark); }
html.dark .src-section-head { color: var(--cisco-teal); }
.src-group-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-tertiary); margin: 12px 0 6px; }
.src-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.src-table th, .src-table td { border: 1px solid var(--border-default); padding: 8px 10px; text-align: left; vertical-align: top; }
.src-table th { background: var(--bg-elevated); font-weight: 700; }
.src-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 600; text-transform: capitalize; }
.src-badge.used { background: rgba(107,163,42,0.15); color: #2D7312; }
html.dark .src-badge.used { color: #85BD46; }

.inv-modal { max-width: 780px; }
.inv-header { display: flex; gap: 12px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-default); flex-wrap: wrap; }
.inv-header h2 { font-size: 18px; font-weight: 800; flex: 1; min-width: 120px; }
.inv-header-sub { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.inv-search-bar { padding: 12px 20px; border-bottom: 1px solid var(--border-default); background: var(--bg-elevated); }
.inv-search-bar input { width: 100%; height: 36px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-default); font-size: 13px; background: var(--bg-input); color: var(--text-primary); font-family: var(--font-sans); outline: none; }
.inv-search-bar input:focus { border-color: var(--cisco-blue); box-shadow: 0 0 0 3px rgba(4,159,217,0.12); }
.inv-search-bar input::placeholder { color: var(--text-tertiary); }
.inv-body { padding: 0; max-height: 55vh; overflow-y: auto; }
.inv-group { border-bottom: 1px solid var(--border-default); }
.inv-group:last-child { border-bottom: none; }
.inv-group-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-secondary); user-select: none; transition: background .1s; }
.inv-group-header:hover { background: var(--bg-hover); }
.inv-group-header .inv-chevron { transition: transform .2s; font-size: 11px; color: var(--text-tertiary); }
.inv-group.open .inv-chevron { transform: rotate(90deg); }
.inv-group-header.collapsed + .inv-items { display: none; }
.inv-group-count { margin-left: auto; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--border-subtle); color: var(--text-tertiary); }
.inv-selall { font-size: 11px; padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--bg-surface); cursor: pointer; color: var(--text-secondary); transition: all .15s; }
.inv-selall:hover { border-color: var(--cisco-blue); color: var(--cisco-blue); }
.inv-items { display: none; padding: 4px 8px 8px; }
.inv-group.open .inv-items { display: block; }
.inv-items.collapsed { display: none; }
.inv-card {
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 10px 12px; margin-bottom: 6px; display: flex; align-items: flex-start; gap: 10px;
  transition: border-color .15s, box-shadow .15s; box-shadow: var(--shadow-sm); cursor: pointer;
}
.inv-card:hover { border-color: var(--cisco-blue); box-shadow: var(--shadow-md); }
.inv-card.selected { border-color: var(--cisco-green); background: rgba(107,163,42,0.06); }
.inv-card-cb { flex-shrink: 0; margin-top: 2px; }
.inv-card-cb input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid var(--border-default);
  border-radius: 4px; background: var(--bg-surface); cursor: pointer; position: relative; transition: all .15s ease;
}
.inv-card-cb input[type="checkbox"]:hover { border-color: var(--cisco-blue); }
.inv-card-cb input[type="checkbox"]:checked { background: var(--cisco-blue); border-color: var(--cisco-blue); }
.inv-card-cb input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.inv-card-info { flex: 1; min-width: 0; }
.inv-card-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.inv-card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.inv-card-tag { display: inline-block; padding: 1px 7px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 600; }
.inv-card-tag.dsa { background: rgba(4,159,217,.12); color: var(--cisco-blue); }
.inv-card-tag.models { background: var(--cisco-teal-muted); color: var(--cisco-teal); }
.inv-card-tag.ucs { background: rgba(107,163,42,0.12); color: var(--cisco-green); }
html.dark .inv-card-tag.dsa { background: rgba(4,159,217,.18); }
html.dark .inv-card-tag.ucs { background: rgba(107,163,42,.18); }
html.dark .inv-card-tag.models { background: rgba(4,164,176,.18); }
.inv-models-drawer { padding-left: 28px; margin-top: 4px; }
.inv-model-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; color: var(--text-secondary); }
.inv-model-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; flex: 1; }
.inv-model-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 2px solid var(--border-default);
  border-radius: 3px; background: var(--bg-surface); cursor: pointer; position: relative; transition: all .15s ease; flex-shrink: 0;
}
.inv-model-row input[type="checkbox"]:checked { background: var(--cisco-blue); border-color: var(--cisco-blue); }
.inv-model-row input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 3px; top: 0px; width: 4px; height: 7px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.inv-footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border-default); background: var(--bg-elevated); }
.inv-footer-left { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; }
.inv-footer-count { font-size: 14px; font-weight: 700; color: var(--cisco-blue); }
.inv-footer-dsa { font-size: 11px; color: var(--text-tertiary); }
.inv-footer-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-btn { padding: 8px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary); transition: all .15s; }
.inv-btn:hover { border-color: var(--cisco-blue); color: var(--cisco-blue); }
.inv-btn.primary { background: var(--cisco-blue); color: #fff; border-color: var(--cisco-blue); }
.inv-btn.primary:hover { background: #038cc2; }
.inv-btn.danger { color: var(--cisco-red); border-color: rgba(194,70,50,0.3); }
.inv-btn.danger:hover { border-color: var(--cisco-red); }
.inv-btn.estimate { background: var(--cisco-green); color: #fff; border-color: var(--cisco-green); }
.inv-btn.estimate:hover { background: #5c8d24; }
.inv-btn.estimate:disabled { opacity: 0.4; cursor: not-allowed; }

.mitre-map-modal { max-width: 98vw; width: 1400px; max-height: 92vh; }
.mitre-map-body { padding: 12px 16px; overflow: auto; max-height: calc(92vh - 100px); }
.mitre-filtered-note { font-size: 12px; color: var(--cisco-blue); background: rgba(4,159,217,0.06); border: 1px solid rgba(4,159,217,0.15); border-radius: var(--radius-sm); padding: 6px 12px; margin-bottom: 10px; }
.mitre-map-grid { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.mitre-map-col { flex: 0 0 160px; min-width: 140px; }
.mitre-map-tactic {
  font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 10px 8px; background: var(--cisco-blue-dark); color: #fff;
  border-radius: var(--radius-sm); margin-bottom: 6px; cursor: pointer; text-align: center; line-height: 1.3;
}
html.dark .mitre-map-tactic { background: #373C42; }
.mm-count { display: block; font-size: 16px; font-weight: 800; color: var(--cisco-teal); }
.mitre-map-tech { font-size: 10px; padding: 6px 8px; margin-bottom: 4px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); cursor: pointer; line-height: 1.35; }
.mitre-map-tech.zero { opacity: 0.5; }
.mitre-map-tech:hover { border-color: var(--cisco-blue); }
.mm-tc { font-weight: 800; color: var(--cisco-blue); margin-right: 4px; }
.mitre-map-legend { padding: 10px 20px; font-size: 12px; color: var(--text-secondary); border-top: 1px solid var(--border-default); }

.site-footer {
  position: fixed; bottom: 0; left: var(--sidebar-w); right: 0;
  background: var(--bg-surface); border-top: 1px solid var(--border-default);
  padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; z-index: 40; font-size: 12px;
}
.footer-text-size button {
  width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--text-primary); font-weight: 700; cursor: pointer; margin: 0 2px;
}
.c-theme-btn-footer {
  height: 28px; padding: 0 10px; background: var(--bg-elevated);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  color: var(--text-primary); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.c-theme-btn-footer:hover { background: var(--bg-hover); border-color: var(--cisco-blue); }
.footer-cb { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-secondary); }
.footer-meta { margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.footer-meta button { background: none; border: none; color: var(--text-link); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; }

.nt-hero { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 28px; margin-bottom: 24px; text-align: center; }
.nt-hero h2 { font-size: 24px; font-weight: 800; margin-bottom: 12px; }
.nt-stats { display: flex; justify-content: center; gap: 40px; margin-top: 20px; }
.nt-stats div { text-align: center; }
.nt-stats strong { display: block; font-size: 28px; color: var(--cisco-blue); }
.nt-stats span { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; }
.nt-card h3 { margin-bottom: 12px; }
.nt-out { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.5; }
.nt-area { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 20px; margin-bottom: 18px; }
.nt-area h4 { color: var(--cisco-blue); margin-bottom: 8px; }
.nt-area ul { margin-left: 18px; font-size: 13px; color: var(--text-secondary); }
.nt-area li { margin-bottom: 6px; }
.nt-area-meta { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 14px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.nt-area-meta dt { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.nt-area-meta dd { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.nt-area-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.nt-area-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; font-weight: 500; color: var(--cisco-blue); background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); text-decoration: none; }
.nt-area-links a:hover { background: var(--bg-surface); text-decoration: underline; }

@media (max-width: 1024px) {
  .c-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
.c-mobile-search-btn { display: none; }
.c-mobile-search-bar { display: none; position: fixed; top: 56px; left: 0; right: 0; z-index: 99; background: var(--bg-header); padding: 8px 16px; box-shadow: var(--shadow-md); }
.c-mobile-search-bar input { width: 100%; height: 40px; padding: 0 12px; border: none; border-radius: var(--radius-sm); font-size: 15px; background: rgba(255,255,255,0.15); color: #fff; }
.c-mobile-search-bar input::placeholder { color: rgba(255,255,255,0.55); }
.c-mobile-search-bar.open { display: block; }
@media (max-width: 768px) {
  .c-hamburger { display: flex; }
  .c-sidebar { transform: translateX(-100%); }
  .c-sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .c-main { margin-left: 0; padding: 24px 18px 130px; }
  .c-main-search { margin-left: 0; padding: 16px 16px 0; }
  .site-footer { left: 0; }
  .c-equip-wrap { display: none; }
  .c-mobile-search-btn { display: none; }
  .uc-sizing-tray { left: 0; }
}
body.non-technical-view .c-main-search,
body.non-technical-view .c-equip-wrap,
body.non-technical-view .c-inv-btn,
body.non-technical-view .adv-toggle-row,
body.non-technical-view .adv-filter-panel,
body.non-technical-view .filter-strip,
body.non-technical-view .hero-domains,
body.non-technical-view .ov-tab-bar,
body.non-technical-view .c-active-tags,
body.non-technical-view .c-kpi-strip { display: none !important; }

/* ─── UC Selection checkboxes ─── */
.uc-select-cb { position: absolute; top: 8px; right: 8px; z-index: 2; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.uc-select-cb input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid var(--border-default);
  border-radius: 4px; background: var(--bg-surface); cursor: pointer; position: relative; transition: all .15s ease;
}
.uc-select-cb input[type="checkbox"]:hover { border-color: var(--cisco-blue); }
.uc-select-cb input[type="checkbox"]:checked {
  background: var(--cisco-blue); border-color: var(--cisco-blue);
}
.uc-select-cb input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.uc-card { position: relative; }

/* ─── Sizing tray ─── */
.uc-sizing-tray {
  position: fixed; bottom: var(--footer-h); left: var(--sidebar-w); right: 0; z-index: 150;
  background: var(--bg-surface); border-top: 1px solid var(--border-default);
  padding: 10px 24px; display: none; align-items: center; gap: 12px;
  transition: box-shadow .25s ease, right .3s cubic-bezier(0.25,0.8,0.25,1);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.uc-sizing-tray.has-selection { display: flex; box-shadow: 0 -4px 12px rgba(0,0,0,0.1); }
.uc-sizing-tray-count { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.uc-sizing-tray-btn {
  padding: 6px 16px; border-radius: var(--radius-pill); border: none; font-size: 12px;
  font-weight: 600; cursor: pointer; transition: all .15s;
}
.uc-sizing-tray-btn.primary { background: var(--cisco-blue); color: #fff; }
.uc-sizing-tray-btn.primary:hover:not(:disabled) { background: #038cc2; }
.uc-sizing-tray-btn.primary:disabled { opacity: 0.4; cursor: not-allowed; }
.uc-sizing-tray-btn.ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default); }
.uc-sizing-tray-btn.ghost:hover { border-color: var(--text-primary); color: var(--text-primary); }
@media print {
  .c-header, .c-sidebar, .c-footer, .uc-sizing-tray, .uc-select-cb, .uc-tbl-cb,
  .filter-strip, .c-mobile-search-btn, .c-mobile-search-bar, .c-main-search,
  .c-back-link, #back-btn, .sc-view-showall, .c-panel-gh, .c-help-banner,
  .adv-panel, .panel-backdrop, .c-breadcrumb button { display: none !important; }
  .c-main { margin-left: 0 !important; padding: 20px !important; }
  .uc-card { break-inside: avoid; }
  .c-section-header, .c-subcat-group { break-inside: avoid; }
  a[href]::after { content: none !important; }
}
body.non-technical-view .uc-select-cb,
body.non-technical-view .uc-tbl-cb,
body.non-technical-view .uc-sizing-tray { display: none !important; }
/* ─── Release Notes in Modal ─── */
.rn-version { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.rn-version:first-of-type { margin-top: 0; }
.rn-version-tag { display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; }
.rn-version-tag.major { background: rgba(4,159,217,0.15); color: var(--cisco-blue); }
.rn-version-tag.minor { background: var(--border-subtle); color: var(--text-secondary); }
.rn-version-tag.patch { background: var(--border-subtle); color: var(--text-tertiary); }
.rn-version-date { font-size: 12px; color: var(--text-tertiary); }
.rn-section { margin-top: 14px; }
.rn-section-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.rn-section-intro { font-size: 13px; color: var(--text-secondary); margin: -4px 0 10px 0; line-height: 1.5; }
.rn-list { padding-left: 20px; font-size: 13px; line-height: 1.65; }
.rn-list li { margin-bottom: 8px; }
.rn-list code { font-family: var(--font-mono); font-size: 11px; background: var(--bg-code); padding: 2px 5px; border-radius: 4px; }

/* ─── How to use this site — Help button, banner, and modal tabs ─── */
.c-help-btn {
  position: relative; height: 34px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.1); color: #fff;
  font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: background .15s, border-color .15s;
}
.c-help-btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.25); }
.c-help-btn:active { background: rgba(255,255,255,0.25); }
.c-help-btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.22); font-size: 11px; font-weight: 800;
}

.c-help-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, rgba(4,159,217,0.10), rgba(4,164,176,0.08));
  border: 1px solid var(--border-default); border-left: 3px solid var(--cisco-blue);
  border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px; position: relative;
}
html.dark .c-help-banner { background: linear-gradient(90deg, rgba(4,159,217,0.18), rgba(4,164,176,0.12)); }
.c-help-banner-ico {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(4,159,217,0.18); color: var(--cisco-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
}
.c-help-banner-text { flex: 1; font-size: 13px; line-height: 1.55; color: var(--text-secondary); min-width: 200px; }
.c-help-banner-text strong { color: var(--text-primary); font-weight: 700; margin-right: 4px; }
.c-help-banner-cta {
  flex-shrink: 0; height: 34px; padding: 0 16px; border-radius: var(--radius-pill);
  background: var(--cisco-blue); color: #fff; border: none; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.c-help-banner-cta:hover { background: #038cc2; }
.c-help-banner-close {
  flex-shrink: 0; width: 30px; height: 30px; border: none; background: transparent;
  color: var(--text-tertiary); font-size: 20px; cursor: pointer; border-radius: var(--radius-sm);
  line-height: 1;
}
.c-help-banner-close:hover { background: var(--bg-hover); color: var(--text-primary); }

@media (max-width: 640px) {
  .c-help-banner { flex-wrap: wrap; }
  .c-help-banner-text { flex-basis: 100%; }
  .c-help-banner-cta { margin-left: 52px; }
}
@media (max-width: 768px) {
  .c-help-btn-label { display: none; }
  .c-help-btn { padding: 0 10px; }
}

.help-tabs {
  display: flex; gap: 4px; padding: 10px 20px 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-default); background: var(--bg-surface);
}
.help-tab-btn {
  padding: 10px 14px; background: transparent; border: none; border-bottom: 2px solid transparent;
  font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
  transition: color .15s, border-color .15s; font-family: var(--font-sans);
}
.help-tab-btn:hover { color: var(--text-primary); }
.help-tab-btn.active { color: var(--cisco-blue); border-bottom-color: var(--cisco-blue); }
html.dark .help-tab-btn.active { color: var(--cisco-teal); border-bottom-color: var(--cisco-teal); }

.help-tab-panel { display: none; }
.help-tab-panel.active { display: block; }

.help-value {
  display: block; padding: 10px 14px; margin-bottom: 16px;
  background: var(--cisco-teal-muted); border-left: 3px solid var(--cisco-teal);
  border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5;
}
.help-value strong { color: var(--cisco-blue-dark); }
html.dark .help-value strong { color: var(--cisco-teal); }

.help-section { margin-bottom: 22px; }
.help-section-title {
  font-size: 14px; font-weight: 700; margin-bottom: 8px; color: var(--cisco-blue-dark);
}
html.dark .help-section-title { color: var(--cisco-teal); }
.help-section p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 8px; }
.help-section ul { padding-left: 20px; font-size: 13px; line-height: 1.65; color: var(--text-secondary); }
.help-section ul li { margin-bottom: 6px; }
.help-section ul li strong { color: var(--text-primary); font-weight: 700; }
.help-section code {
  font-family: var(--font-mono); font-size: 11px; background: var(--bg-code);
  padding: 2px 5px; border-radius: 4px; color: var(--text-primary);
}
.help-section pre {
  background: var(--bg-code); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 8px 0 10px;
  overflow-x: auto; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--text-primary);
}
.help-section pre code { background: transparent; padding: 0; border-radius: 0; font-size: inherit; }
.help-section a { color: var(--text-link); font-weight: 600; }
.help-why {
  margin-top: 6px; padding: 6px 10px; background: var(--bg-hover);
  border-left: 2px solid var(--cisco-teal); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}
.help-why strong { color: var(--cisco-teal); font-weight: 700; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 6px; }
.help-grid-card { padding: 10px 12px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 12px; line-height: 1.55; }
.help-grid-card strong { display: block; margin-bottom: 4px; color: var(--text-primary); font-weight: 700; }
/* ================================================================
 * 06-chrome.css
 * ----------------------------------------------------------------
 * Shared page chrome for the secondary surfaces that DON'T use the
 * catalogue sidebar (regulatory-primer.html, clause-navigator.html,
 * compliance-story.html). Driven entirely by the catalogue design
 * tokens in 01-tokens.css so dark mode, colour-blind friendly mode,
 * and future token changes flow in automatically.
 *
 * The catalog (index.html) and scorecard.html use their own
 * fixed-header markup and are not affected by this file.
 *
 * Naming: .c-* mirrors the catalogue; .c-*--sticky marks the
 * non-fixed sticky variant used by the three pages above.
 * ================================================================ */

/* ----- skip-to-content (shared) ------------------------------- */
.c-skip {
  position: absolute;
  top: -40px;
  left: 16px;
  background: var(--cisco-blue-dark);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  z-index: 1000;
  transition: top 0.15s;
  text-decoration: none;
}
.c-skip:focus { top: 12px; text-decoration: none; }

/* ----- sticky header variant ---------------------------------- *
 * Unlike the catalogue's .c-header which is position:fixed, this
 * variant sticks with the page but still lets content scroll past
 * it. Same colour, same audience-nav pill, same theme button so
 * the three secondary surfaces feel like siblings of the catalogue.
 * -------------------------------------------------------------- */
.c-header--sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-header);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
@media (max-width: 720px) {
  .c-header--sticky { padding: 10px 14px; }
}

/* ----- brand block (logo mark + title + sub) ------------------ */
.c-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}
.c-brand:hover { text-decoration: none; }
.c-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}
.c-brand-text { min-width: 0; }
.c-brand-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-brand-sub {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ----- spacer + actions area ---------------------------------- */
.c-header-spacer { flex: 1; }
.c-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ----- audience navigation pill ------------------------------- *
 * Matches index.html lines 145–159 verbatim (tokens aside) so the
 * active-link highlight and hover state look identical across all
 * five surfaces.
 * -------------------------------------------------------------- */
.c-header-audience {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.c-header-audience a {
  padding: 0 12px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  letter-spacing: 0.01em;
  border-right: 1px solid rgba(255,255,255,0.12);
  transition: background .15s, color .15s;
}
.c-header-audience a:last-child { border-right: 0; }
.c-header-audience a:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
  text-decoration: none;
}
.c-header-audience a.active,
.c-header-audience a[aria-current="page"] {
  background: rgba(255,255,255,0.22);
  color: #fff;
  cursor: default;
}
@media (max-width: 900px) {
  .c-header-audience { display: none; }
}

/* ----- theme toggle button ------------------------------------ */
.c-theme-btn {
  height: 32px;
  padding: 0 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.c-theme-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.25);
}
.c-theme-btn:active { background: rgba(255,255,255,0.25); }

/* ----- centred content shells --------------------------------- *
 * Replaces bespoke .rp-shell / .cn-shell / .cs-shell wrappers.
 * The default .c-shell is a single centred column; the TOC variant
 * adds a left sidebar grid used by the primer's table of contents.
 * -------------------------------------------------------------- */
.c-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}
@media (max-width: 720px) {
  .c-shell { padding: 20px 14px 40px; }
}

.c-shell--with-toc {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 40px;
  padding: 32px 24px 80px;
}
@media (max-width: 1080px) {
  .c-shell--with-toc {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 16px 18px 60px;
  }
}

/* ----- lite footer (text-only, no fixed bar) ------------------ *
 * Matches the visual weight of .cn-footer / .cs-footer / .rp-footer
 * while using shared tokens only. Lives at the bottom of the page
 * flow; does not stick.
 * -------------------------------------------------------------- */
.site-footer-lite {
  max-width: 1400px;
  margin: 48px auto 0;
  padding: 24px 24px 32px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: baseline;
  border-top: 1px solid var(--border-subtle);
}
.site-footer-lite a { color: var(--text-link); }
.site-footer-lite a:hover { text-decoration: underline; }
.site-footer-lite strong { color: var(--text-secondary); }
.site-footer-lite .site-footer-lite-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 0;
}

/* ----- print: hide chrome on printed pages -------------------- */
@media print {
  .c-header--sticky,
  .c-skip,
  .site-footer-lite { display: none !important; }
  .c-shell,
  .c-shell--with-toc {
    display: block;
    max-width: none;
    padding: 0;
  }
}