/*
 * SecTec Security Portal — public.css (plugin sectec-security-portal)
 * VERZIA 4 (base = Verzia 1–3 + navy-dominant layer at the end). Redesign aligned with the SecTec design system / sectec.sk (Elementor kit #8).
 *
 * Rules kept from DESIGN-BRIEF.md: only this file changes; every selector starts
 * with .ssp- (the :root token block is the one exception, as before); no ssp-*
 * class or data-ssp-* attribute was renamed; breakpoints 1050/980/900/680/390;
 * prefers-reduced-motion respected.
 *
 * Visual grammar (from the brand assets): white cards, 10px radius, 1px lavender
 * border, soft diffuse shadow, 4px red cap on primary cards; navy band + red rule
 * for group headers; red used as accent only (dots, caps, eyebrows, primary
 * buttons) — never as a wash; navy carries navigation/selected states.
 */

:root {
  /* brand */
  --ssp-navy: #1b1444;
  --ssp-navy-hover: #261d5c;
  --ssp-red: #ec1c24;
  --ssp-red-dark: #d61b23;
  --ssp-red-deep: #c9151c;
  --ssp-ink: #040315;
  --ssp-text: #332f4d;
  --ssp-muted: #6b6880;
  /* neutrals (cool, lavender tinted) */
  --ssp-surface: #ffffff;
  --ssp-soft: #f8f8fb;
  --ssp-soft-2: #f2f2f7;
  --ssp-page: #f5f5f7;
  --ssp-border: #dfdde8;
  --ssp-border-strong: #c9c6d8;
  /* tints */
  --ssp-red-tint: #fdeced;
  --ssp-navy-tint: #eeedf5;
  --ssp-violet: #6b62a3;
  --ssp-violet-tint: #f1effa;
  --ssp-green: #e6f4ea;
  --ssp-green-ink: #176b3a;
  --ssp-amber-bg: #fff6df;
  --ssp-amber-ink: #7a5c00;
  --ssp-amber-border: #e3b53a;
  --ssp-on-dark-muted: #d8d6e5;
  --ssp-focus: #6b62a3;
  /* geometry */
  --ssp-radius-row: 6px;
  --ssp-radius-chip: 8px;
  --ssp-radius-card: 10px;
  --ssp-radius-pill: 999px;
  --ssp-cap: 4px;
  --ssp-shadow-card: 0 10px 30px rgba(3, 3, 20, 0.08);
  --ssp-shadow-row: 0 2px 8px rgba(3, 3, 20, 0.06);
  --ssp-shadow-dialog: 0 24px 70px rgba(3, 3, 20, 0.35);
  --ssp-speed: 160ms;
  --ssp-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  /* legacy aliases (ssp-views-* / graph) so every old hook keeps resolving */
  --ssp-views-red: var(--ssp-red);
  --ssp-views-navy: var(--ssp-navy);
  --ssp-views-pink: var(--ssp-red-tint);
  --ssp-views-green: var(--ssp-green);
  --ssp-views-green-ink: var(--ssp-green-ink);
  --ssp-views-grey: var(--ssp-muted);
  --ssp-node-section: var(--ssp-red);
  --ssp-node-technology: var(--ssp-navy);
  --ssp-node-vendor: var(--ssp-violet);
  --ssp-node-mitre: #b86b00;
}

/* Cascade containment (see original notes): public.css loads before the theme,
   so every interactive rule carries its block root and states border, background,
   colour and box-shadow explicitly. [hidden] needs !important against the theme's
   `button{display:inline-block}`. */
.ssp-map [hidden],
.ssp-tree [hidden],
.ssp-views [hidden],
.ssp-modebar [hidden],
.ssp-kb [hidden],
.ssp-portal [hidden],
.ssp-detail-layout [hidden],
.ssp-view[hidden],
.ssp-search-results[hidden] { display: none !important; }

.ssp-map *, .ssp-tree *, .ssp-views *, .ssp-section-tech-tree *, .ssp-portal *, .ssp-kb *, .ssp-detail-layout *, .ssp-tree-overlay *, .ssp-reader__content * { box-sizing: border-box; }

/* ---------- shared focus ring ---------- */
.ssp-map a:focus-visible, .ssp-map button:focus-visible,
.ssp-tree a:focus-visible, .ssp-tree button:focus-visible,
.ssp-views a:focus-visible, .ssp-views button:focus-visible, .ssp-views input:focus-visible, .ssp-views select:focus-visible, .ssp-views summary:focus-visible, .ssp-views__table-scroll:focus-visible,
.ssp-modebar a:focus-visible,
.ssp-kb :focus-visible,
.ssp-portal a:focus-visible, .ssp-portal .ssp-button:focus-visible, .ssp-portal .ssp-search input:focus-visible, .ssp-portal .ssp-search select:focus-visible, .ssp-section summary:focus-visible,
.ssp-section-tech-tree a:focus-visible,
.ssp-detail-layout a:focus-visible,
.ssp-reader__content a:focus-visible,
.ssp-tree-overlay a:focus-visible, .ssp-tree-overlay button:focus-visible {
  outline: 3px solid var(--ssp-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ========================================================================
   Lazy graph shortcodes (.ssp-map / .ssp-tree) — vendor page "Mapa bezpečnosti"
   ======================================================================== */
.ssp-map, .ssp-tree {
  margin: 28px 0;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--ssp-border);
  border-top: var(--ssp-cap) solid var(--ssp-red);
  border-radius: var(--ssp-radius-card);
  background: var(--ssp-surface);
  box-shadow: var(--ssp-shadow-card);
  color: var(--ssp-text);
}
.ssp-map__header, .ssp-tree__header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.ssp-map__header h2, .ssp-tree__header h2 { margin: 0; color: var(--ssp-navy); font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; line-height: 1.2; }

.ssp-map__switch, .ssp-tree__switch { display: inline-flex; padding: 3px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-pill); background: var(--ssp-soft-2); }
.ssp-map .ssp-map__switch button, .ssp-tree .ssp-tree__switch button,
.ssp-map .ssp-map__actions button, .ssp-tree .ssp-tree__actions button {
  min-height: 38px; padding: 7px 16px; border: 0; border-radius: var(--ssp-radius-pill); background: transparent; box-shadow: none;
  color: var(--ssp-navy); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; text-transform: none; appearance: none; cursor: pointer;
  transition: background-color var(--ssp-speed) var(--ssp-ease), color var(--ssp-speed) var(--ssp-ease), border-color var(--ssp-speed) var(--ssp-ease);
}
.ssp-map .ssp-map__switch button:hover, .ssp-tree .ssp-tree__switch button:hover { background: var(--ssp-red-tint); color: var(--ssp-red-deep); }
.ssp-map .ssp-map__switch button[aria-pressed="true"], .ssp-tree .ssp-tree__switch button[aria-pressed="true"],
.ssp-map .ssp-map__switch button[aria-pressed="true"]:hover, .ssp-tree .ssp-tree__switch button[aria-pressed="true"]:hover { background: var(--ssp-navy); color: #fff; }

.ssp-map__status, .ssp-tree__status { margin: 0; padding: 18px; border-radius: var(--ssp-radius-chip); background: var(--ssp-soft); color: var(--ssp-muted); text-align: center; }
.ssp-map__grid, .ssp-tree__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* node type is a dot, not a coloured edge */
.ssp-map .ssp-graph-node, .ssp-tree .ssp-graph-node {
  position: relative; min-width: 0; padding: 16px 16px 16px 34px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-chip);
  background: #fff; box-shadow: var(--ssp-shadow-row); --ssp-node: var(--ssp-node-technology);
}
.ssp-map .ssp-graph-node::before, .ssp-tree .ssp-graph-node::before { content: ""; position: absolute; top: 22px; left: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--ssp-node); }
.ssp-map .ssp-graph-node--section, .ssp-tree .ssp-graph-node--section { --ssp-node: var(--ssp-node-section); }
.ssp-map .ssp-graph-node--technology, .ssp-tree .ssp-graph-node--technology { --ssp-node: var(--ssp-node-technology); }
.ssp-map .ssp-graph-node--vendor, .ssp-tree .ssp-graph-node--vendor { --ssp-node: var(--ssp-node-vendor); }
.ssp-map .ssp-graph-node--mitre, .ssp-tree .ssp-graph-node--mitre { --ssp-node: var(--ssp-node-mitre); }
.ssp-map .ssp-graph-node__title, .ssp-tree .ssp-graph-node__title { margin: 0; font-size: 16px; line-height: 1.3; }
.ssp-map .ssp-graph-node__expand, .ssp-tree .ssp-graph-node__expand { padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--ssp-navy); font: inherit; font-weight: 700; text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.ssp-map .ssp-graph-node__expand:hover, .ssp-tree .ssp-graph-node__expand:hover { background: transparent; color: var(--ssp-red-deep); text-decoration: underline; }
.ssp-map .ssp-graph-node__counts, .ssp-tree .ssp-graph-node__counts { margin: 6px 0 8px; color: var(--ssp-muted); font-size: 12px; }
.ssp-map .ssp-graph-node__detail, .ssp-tree .ssp-graph-node__detail { color: var(--ssp-navy); font-size: 12px; font-weight: 700; text-decoration: none; }
.ssp-map .ssp-graph-node__detail:hover, .ssp-tree .ssp-graph-node__detail:hover { color: var(--ssp-red-deep); text-decoration: underline; }

.ssp-tree__roots, .ssp-tree__branch { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ssp-tree__branch { position: relative; margin: 12px 0 0 22px; padding-left: 22px; border-left: 2px solid var(--ssp-border); }
.ssp-tree__branch > .ssp-tree__item::before { position: absolute; width: 20px; margin: 30px 0 0 -22px; border-top: 2px solid var(--ssp-border); content: ""; }

.ssp-map__actions, .ssp-tree__actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.ssp-map .ssp-map__actions button, .ssp-tree .ssp-tree__actions button { border: 1px solid var(--ssp-border-strong); border-radius: var(--ssp-radius-chip); background: #fff; }
.ssp-map .ssp-map__actions button:hover, .ssp-tree .ssp-tree__actions button:hover { border-color: var(--ssp-navy); background: var(--ssp-soft); color: var(--ssp-navy); }

/* vendor / technology summary aside */
.ssp-entity-detail {
  margin: 0 clamp(20px, 4vw, 52px) 28px; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--ssp-border); border-top: var(--ssp-cap) solid var(--ssp-red);
  border-radius: var(--ssp-radius-card); background: var(--ssp-surface); box-shadow: var(--ssp-shadow-card); color: var(--ssp-text);
}
.ssp-entity-detail .ssp-map, .ssp-entity-detail .ssp-tree { margin: 24px 0 0; box-shadow: none; }
.ssp-entity-detail > h2 { margin: 0 0 6px; color: var(--ssp-navy); font-size: 20px; font-weight: 700; }
.ssp-entity-detail__coverage { margin: 0; color: var(--ssp-navy); font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.1; }
.ssp-entity-detail__coverage + p { margin: 6px 0 14px; color: var(--ssp-muted); }
.ssp-entity-detail__facets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ssp-entity-detail__facets li { padding: 6px 12px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-pill); background: #fff; color: var(--ssp-navy); font-size: 13px; font-weight: 600; }
.ssp-entity-detail__facets span { margin-left: 6px; color: var(--ssp-red); font-weight: 700; }

@media (max-width: 900px) { .ssp-map__grid, .ssp-tree__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .ssp-map__header, .ssp-tree__header { align-items: stretch; flex-direction: column; }
  .ssp-map__switch, .ssp-tree__switch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ssp-map .ssp-map__switch button, .ssp-tree .ssp-tree__switch button { padding-inline: 8px; white-space: normal; }
  .ssp-map__grid, .ssp-tree__grid { grid-template-columns: 1fr; }
  .ssp-tree__branch { margin-left: 8px; padding-left: 14px; }
}

/* ========================================================================
   Search shortcode (.ssp-portal) — kept, restyled
   ======================================================================== */
.ssp-portal { max-width: 1440px; margin: 0 auto; padding: 32px 20px 64px; color: var(--ssp-text); font-family: inherit; letter-spacing: 0; }
.ssp-portal--search { padding-bottom: 24px; }
.ssp-portal__intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 0 0 28px; border-bottom: 3px solid var(--ssp-red); }
.ssp-eyebrow { margin: 0 0 8px; color: var(--ssp-red); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ssp-portal__intro h2 { margin: 0; color: var(--ssp-navy); font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1.08; }
.ssp-portal__intro p:not(.ssp-eyebrow) { max-width: 760px; margin: 14px 0 0; color: var(--ssp-muted); font-size: 17px; line-height: 1.65; }

.ssp-search { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(190px, 260px) auto auto; align-items: end; gap: 12px; margin: 28px 0; padding: 18px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-card); background: var(--ssp-soft); }
.ssp-search label { display: grid; gap: 6px; margin: 0; }
.ssp-search label > span { color: var(--ssp-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ssp-portal .ssp-search input, .ssp-portal .ssp-search select { width: 100%; height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--ssp-border-strong); border-radius: var(--ssp-radius-chip); background: #fff; color: var(--ssp-ink); font: inherit; font-size: 15px; }
.ssp-portal .ssp-search input:focus, .ssp-portal .ssp-search select:focus { border-color: var(--ssp-navy); }
.ssp-portal .ssp-search .ssp-button { height: 44px; padding: 0 18px; border: 1px solid var(--ssp-border-strong); border-radius: var(--ssp-radius-chip); background: #fff; box-shadow: none; color: var(--ssp-navy); font: inherit; font-size: 14px; font-weight: 600; text-transform: none; appearance: none; cursor: pointer; transition: background-color var(--ssp-speed) var(--ssp-ease), border-color var(--ssp-speed) var(--ssp-ease), color var(--ssp-speed) var(--ssp-ease); }
.ssp-portal .ssp-search .ssp-button--primary { border-color: var(--ssp-red); background: var(--ssp-red); color: #fff; }
.ssp-portal .ssp-search .ssp-button--primary:hover { border-color: var(--ssp-red-dark); background: var(--ssp-red-dark); color: #fff; }
.ssp-portal .ssp-search .ssp-button--secondary { background: #fff; color: var(--ssp-navy); border-color: var(--ssp-border-strong); }
.ssp-portal .ssp-search .ssp-button--secondary:hover { background: var(--ssp-soft); color: var(--ssp-navy); border-color: var(--ssp-navy); }

.ssp-search-results { scroll-margin-top: 90px; margin: 0 0 28px; padding: 22px; border: 1px solid var(--ssp-border); border-top: var(--ssp-cap) solid var(--ssp-red); border-radius: var(--ssp-radius-card); background: #fff; box-shadow: var(--ssp-shadow-card); }
.ssp-search-results__header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ssp-search-results__header h3 { margin: 0; color: var(--ssp-navy); font-size: 20px; font-weight: 700; }
.ssp-search-results__header span { color: var(--ssp-muted); font-size: 13px; }
.ssp-result-group { margin: 0 0 18px; padding: 16px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-card); background: #fff; }
.ssp-result-group:last-child { margin-bottom: 0; }
.ssp-result-group__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ssp-navy); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.ssp-result-group__count { padding: 1px 8px; border-radius: var(--ssp-radius-pill); background: var(--ssp-navy-tint); color: var(--ssp-navy); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.ssp-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ssp-result { min-width: 0; padding: 16px; border: 1px solid var(--ssp-border); border-top: var(--ssp-cap) solid var(--ssp-red); border-radius: var(--ssp-radius-chip); background: #fff; }
.ssp-result__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--ssp-muted); font-size: 11px; }
.ssp-result__type { color: var(--ssp-red); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ssp-result__title { margin: 8px 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.ssp-result__match { display: inline-block; padding: 1px 8px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-pill); color: var(--ssp-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.ssp-result__match--title { border-color: var(--ssp-navy); color: var(--ssp-navy); }
.ssp-result__match--content { border-color: var(--ssp-red); color: var(--ssp-red); }
.ssp-search-results .ssp-result__snippet { margin: 8px 0 0; color: var(--ssp-muted); font-size: 13px; font-style: italic; line-height: 1.5; }
.ssp-search-results .ssp-result__snippet mark { background: var(--ssp-red-tint); color: inherit; font-style: normal; font-weight: 700; }
.ssp-portal .ssp-result__title a, .ssp-portal .ssp-result__open, .ssp-portal .ssp-technology h4 a, .ssp-search-results .ssp-result__title a, .ssp-search-results .ssp-result__open { color: var(--ssp-navy); text-decoration: none; }
.ssp-portal .ssp-result__title a:hover, .ssp-portal .ssp-result__open:hover, .ssp-portal .ssp-technology h4 a:hover, .ssp-search-results .ssp-result__title a:hover, .ssp-search-results .ssp-result__open:hover { color: var(--ssp-red-deep); text-decoration: underline; }
.ssp-result__summary { margin: 0 0 12px; color: var(--ssp-muted); font-size: 14px; line-height: 1.5; }
.ssp-result__vendors { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
.ssp-result__vendors span { padding: 4px 9px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-pill); background: #fff; color: var(--ssp-navy); font-size: 11px; line-height: 1.2; text-decoration: none; }
.ssp-result__open { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 700; }

.ssp-section-list { display: grid; gap: 10px; }
.ssp-section { overflow: hidden; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-card); background: #fff; }
.ssp-section summary { display: grid; grid-template-columns: 48px 1fr 30px; align-items: center; gap: 12px; min-height: 76px; padding: 12px 16px; cursor: pointer; list-style: none; }
.ssp-section summary::-webkit-details-marker { display: none; }
.ssp-section[open] summary { border-bottom: 1px solid var(--ssp-border); background: var(--ssp-soft); }
.ssp-section__number { color: var(--ssp-red); font-size: 20px; font-weight: 700; }
.ssp-section__title { display: grid; gap: 4px; }
.ssp-section__title strong { color: var(--ssp-navy); font-size: 19px; font-weight: 700; }
.ssp-section__title small { color: var(--ssp-muted); }
.ssp-section__toggle { color: var(--ssp-red); font-size: 24px; text-align: center; transition: transform var(--ssp-speed) var(--ssp-ease); }
.ssp-section[open] .ssp-section__toggle { transform: rotate(45deg); }
.ssp-section__body { padding: 20px; }
.ssp-section__body > p { max-width: 900px; margin: 0 0 6px; color: var(--ssp-muted); line-height: 1.6; }
.ssp-technology-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ssp-technology { min-width: 0; padding: 14px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-chip); background: var(--ssp-soft); }
.ssp-technology h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.ssp-technology > p { margin: 0; color: var(--ssp-muted); font-size: 13px; line-height: 1.45; }
.ssp-empty { margin: 0; padding: 18px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-chip); background: var(--ssp-soft); color: var(--ssp-muted); }

.ssp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ssp-muted); }
.ssp-portal .ssp-breadcrumb__link, .ssp-breadcrumb .ssp-breadcrumb__link { color: inherit; text-decoration: none; }
.ssp-portal .ssp-breadcrumb__link:hover, .ssp-portal .ssp-breadcrumb__link:focus, .ssp-breadcrumb .ssp-breadcrumb__link:hover, .ssp-breadcrumb .ssp-breadcrumb__link:focus { color: var(--ssp-red-deep); text-decoration: underline; }
.ssp-breadcrumb__separator { color: var(--ssp-border-strong); }
.ssp-breadcrumb__current { color: var(--ssp-navy); font-weight: 700; }

@media (max-width: 1050px) {
  .ssp-search { grid-template-columns: 1fr 1fr; }
  .ssp-result-grid, .ssp-technology-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .ssp-portal { padding-inline: 14px; }
  .ssp-portal__intro { display: grid; }
  .ssp-search, .ssp-result-grid, .ssp-technology-grid { grid-template-columns: 1fr; }
  .ssp-search .ssp-button { width: 100%; }
  .ssp-section summary { grid-template-columns: 38px 1fr 24px; padding-inline: 12px; }
  .ssp-section__body { padding: 14px; }
}

/* ========================================================================
   Portfolio views hub (.ssp-views)
   ======================================================================== */
.ssp-views {
  width: 100%; max-width: 1440px; margin: 24px auto; padding: clamp(18px, 3vw, 32px); overflow: hidden;
  border: 1px solid var(--ssp-border); border-top: var(--ssp-cap) solid var(--ssp-red); border-radius: var(--ssp-radius-card);
  background: var(--ssp-surface); box-shadow: var(--ssp-shadow-card); color: var(--ssp-text);
}
.ssp-views__header { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; }
.ssp-views__header h1, .ssp-views__header h2, .ssp-views__coverage h2, .ssp-section-tech-tree h2 { margin: 0; color: var(--ssp-navy); font-weight: 700; line-height: 1.15; }
.ssp-views__header h1, .ssp-views__header h2 { font-size: clamp(26px, 3vw, 34px); }
.ssp-section-tech-tree.sectec-related-tree--section h2 { margin-bottom: 18px; font-size: 20px; }
.ssp-views__header p { margin: 0; color: var(--ssp-muted); font-size: 15px; }
.ssp-views__header p[data-ssp-views-meta] { flex: 1 1 auto; }
.ssp-views__description, .ssp-views__coverage header p { color: var(--ssp-muted); }
.ssp-views__description { margin: 10px 0 0; font-size: 16px; line-height: 1.55; }
.ssp-views__loading { margin: 0 0 12px; color: var(--ssp-muted); font-size: 14px; text-align: center; }

/* view switcher tiles: navigation → navy when selected */
.ssp-views__switcher { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 30px; }
.ssp-views .ssp-views__tile {
  display: flex; min-width: 0; min-height: 84px; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-card); background: #fff; color: var(--ssp-navy); text-decoration: none;
  transition: border-color var(--ssp-speed) var(--ssp-ease), box-shadow var(--ssp-speed) var(--ssp-ease), background-color var(--ssp-speed) var(--ssp-ease), color var(--ssp-speed) var(--ssp-ease);
}
.ssp-views .ssp-views__tile:hover { border-color: var(--ssp-navy); box-shadow: var(--ssp-shadow-row); color: var(--ssp-navy); }
.ssp-views .ssp-views__tile[aria-current="page"], .ssp-views .ssp-views__tile[aria-current="page"]:hover { border-color: var(--ssp-navy); background: var(--ssp-navy); color: #fff; box-shadow: none; }
.ssp-views__badge { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: var(--ssp-radius-chip); background: var(--ssp-navy-tint); color: var(--ssp-navy); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.ssp-views .ssp-views__tile[aria-current="page"] .ssp-views__badge { background: var(--ssp-red); color: #fff; }
.ssp-views .ssp-views__tile strong, .ssp-views .ssp-views__tile small { display: block; }
.ssp-views .ssp-views__tile strong { font-size: 16px; font-weight: 700; }
.ssp-views .ssp-views__tile small { margin-top: 3px; color: var(--ssp-muted); font-size: 13px; line-height: 1.35; }
.ssp-views .ssp-views__tile[aria-current="page"] small { color: var(--ssp-on-dark-muted); }

/* ----- Map view: section cards around the hub ----- */
.ssp-views__map-layout { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(190px, 0.65fr) minmax(220px, 1fr); align-items: center; gap: clamp(28px, 5vw, 74px); padding: 10px 4px; }
.ssp-views__map-column { display: grid; gap: 12px; }
.ssp-views .ssp-views__section-card, .ssp-views__section-card {
  position: relative; z-index: 1; display: block; padding: 14px 16px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-card);
  background: #fff; box-shadow: var(--ssp-shadow-row); color: var(--ssp-navy); text-decoration: none;
  transition: border-color var(--ssp-speed) var(--ssp-ease), box-shadow var(--ssp-speed) var(--ssp-ease), transform var(--ssp-speed) var(--ssp-ease);
}
.ssp-views .ssp-views__section-card:hover, .ssp-views__section-card:hover { border-color: var(--ssp-navy); box-shadow: var(--ssp-shadow-card); transform: translateY(-1px); color: var(--ssp-navy); }
.ssp-views__section-card::before { position: absolute; top: 50%; width: clamp(30px, 5vw, 72px); border-top: 2px solid var(--ssp-border); content: ""; }
/* connector dot: brand ramp navy → red, index comes from the inline --ssp-dot-index set by JS */
.ssp-views__section-card::after { position: absolute; top: calc(50% - 6px); width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--ssp-border); background: color-mix(in srgb, var(--ssp-navy) calc(100% - var(--ssp-dot-index, 0) * 7.6%), var(--ssp-red)); content: ""; }
.ssp-views__map-column--left .ssp-views__section-card:nth-child(even)::after,
.ssp-views__map-column--right .ssp-views__section-card:nth-child(odd)::after { background: color-mix(in srgb, color-mix(in srgb, var(--ssp-navy) calc(100% - var(--ssp-dot-index, 0) * 7.6%), var(--ssp-red)) 68%, #fff); }
.ssp-views__map-column--left .ssp-views__section-card::before { right: clamp(-72px, -5vw, -30px); }
.ssp-views__map-column--left .ssp-views__section-card::after { right: clamp(-78px, calc(-5vw - 6px), -36px); }
.ssp-views__map-column--right .ssp-views__section-card::before { left: clamp(-72px, -5vw, -30px); }
.ssp-views__map-column--right .ssp-views__section-card::after { left: clamp(-78px, calc(-5vw - 6px), -36px); }
.ssp-views__section-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ssp-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ssp-views__section-top b { padding: 1px 8px; border-radius: var(--ssp-radius-pill); background: var(--ssp-navy-tint); color: var(--ssp-navy); font-size: 11px; font-weight: 700; letter-spacing: 0; }
.ssp-views__section-card > strong { display: block; margin: 6px 0 4px; color: var(--ssp-navy); font-size: 17px; font-weight: 700; line-height: 1.25; }
.ssp-views__section-counts { color: var(--ssp-muted); font-size: 13px; }

.ssp-views__hub { position: relative; width: clamp(170px, 17vw, 230px); aspect-ratio: 1; justify-self: center; border-radius: 50%; background: #fff; box-shadow: var(--ssp-shadow-card); text-align: center; }
.ssp-views__donut { display: block; width: 100%; height: 100%; }
.ssp-views__donut-track { fill: none; stroke: var(--ssp-navy-tint); stroke-width: 20; }
/* segments follow the same navy → red ramp as the card dots (inline stroke attribute is overridden by this rule) */
.ssp-views__donut-arc { fill: none; stroke-width: 20; transform: rotate(-90deg); transform-origin: 50% 50%; stroke: color-mix(in srgb, var(--ssp-navy) calc(100% - var(--ssp-i, 0) * 7.6%), var(--ssp-red)); }
.ssp-views__donut-arc:nth-of-type(odd) { stroke: color-mix(in srgb, color-mix(in srgb, var(--ssp-navy) calc(100% - var(--ssp-i, 0) * 7.6%), var(--ssp-red)) 68%, #fff); }
.ssp-views__donut-arc:nth-of-type(2) { --ssp-i: 0; } .ssp-views__donut-arc:nth-of-type(3) { --ssp-i: 1; } .ssp-views__donut-arc:nth-of-type(4) { --ssp-i: 2; } .ssp-views__donut-arc:nth-of-type(5) { --ssp-i: 3; }
.ssp-views__donut-arc:nth-of-type(6) { --ssp-i: 4; } .ssp-views__donut-arc:nth-of-type(7) { --ssp-i: 5; } .ssp-views__donut-arc:nth-of-type(8) { --ssp-i: 6; } .ssp-views__donut-arc:nth-of-type(9) { --ssp-i: 7; }
.ssp-views__donut-arc:nth-of-type(10) { --ssp-i: 8; } .ssp-views__donut-arc:nth-of-type(11) { --ssp-i: 9; } .ssp-views__donut-arc:nth-of-type(12) { --ssp-i: 10; } .ssp-views__donut-arc:nth-of-type(13) { --ssp-i: 11; }
.ssp-views__donut-arc:nth-of-type(14) { --ssp-i: 12; } .ssp-views__donut-arc:nth-of-type(15) { --ssp-i: 13; } .ssp-views__donut-arc:nth-of-type(16) { --ssp-i: 14; } .ssp-views__donut-arc:nth-of-type(n+17) { --ssp-i: 15; }
.ssp-views__hub-center { position: absolute; inset: 22%; display: grid; place-content: center; }
.ssp-views__hub strong { color: var(--ssp-navy); font-size: 24px; font-weight: 700; line-height: 1.1; }
.ssp-views__hub span { color: var(--ssp-muted); font-size: 13px; }
.ssp-views__map-layout--hub-only { grid-template-columns: 1fr; }

/* ----- Coverage matrix ----- */
.ssp-views__coverage header { margin-bottom: 18px; }
.ssp-views__coverage h2 { font-size: clamp(22px, 2.6vw, 28px); }
.ssp-views__coverage header p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; max-width: 900px; }
.ssp-views__scroll-hint { display: flex; justify-content: flex-end; margin: -6px 0 10px; color: var(--ssp-muted); font-size: 13px; }
.ssp-views__scroll-hint[hidden], .ssp-views__scroll-hint [hidden] { display: none !important; }
.ssp-views__scroll-hint > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-pill); background: var(--ssp-soft); transition: border-color var(--ssp-speed) var(--ssp-ease), background-color var(--ssp-speed) var(--ssp-ease), color var(--ssp-speed) var(--ssp-ease); }
.ssp-views__scroll-hint kbd { padding: 1px 6px; border: 1px solid var(--ssp-border-strong); border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--ssp-navy); font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.4; }
.ssp-views__scroll-hint.is-nudged > span { border-color: var(--ssp-red); color: var(--ssp-navy); animation: ssp-scroll-hint-nudge 600ms var(--ssp-ease) 2; }
@keyframes ssp-scroll-hint-nudge { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-6px); } 60% { transform: translateX(6px); } }
.ssp-views__table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-card); }
.ssp-views__table-scroll table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ssp-views__table-scroll th, .ssp-views__table-scroll td { min-width: 140px; padding: 12px 14px; border: 0; border-right: 1px solid var(--ssp-border); border-bottom: 1px solid var(--ssp-border); background: transparent; text-align: center; vertical-align: middle; }
.ssp-views__table-scroll th:last-child, .ssp-views__table-scroll td:last-child { border-right: 0; }
.ssp-views__table-scroll tbody tr:last-child th, .ssp-views__table-scroll tbody tr:last-child td { border-bottom: 0; }
.ssp-views__table-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--ssp-navy); color: #fff; font-size: 13px; font-weight: 600; }
.ssp-views .ssp-views__table-scroll thead a, .ssp-views__table-scroll thead a { color: #fff; text-decoration: none; }
.ssp-views__table-scroll thead a:hover { text-decoration: underline; }
.ssp-views__table-scroll th:first-child { position: sticky; left: 0; z-index: 1; min-width: 235px; background: #fff; text-align: left; }
.ssp-views__table-scroll thead th:first-child { z-index: 3; background: var(--ssp-navy); }
.ssp-views__table-scroll tbody tr:hover th:first-child { background: var(--ssp-navy-tint); }
.ssp-views .ssp-views__table-scroll tbody th a, .ssp-views__table-scroll tbody th a { color: var(--ssp-navy); font-weight: 700; text-decoration: none; }
.ssp-views .ssp-views__table-scroll tbody th a:hover, .ssp-views__table-scroll tbody th a:hover { color: var(--ssp-red-deep); text-decoration: underline; }
.ssp-views__table-scroll tbody th small { display: block; margin-top: 3px; color: var(--ssp-muted); font-size: 12px; font-weight: 400; }
.ssp-views__table-scroll td.has-coverage { background: var(--ssp-green); color: var(--ssp-green-ink); font-weight: 700; }
.ssp-views__table-scroll td.no-coverage { color: var(--ssp-border-strong); font-size: 13px; }

/* ----- Mode toggle (Pohľady / Databáza znalostí) ----- */
.ssp-views__modes { display: inline-flex; padding: 3px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-pill); background: var(--ssp-soft-2); }
.ssp-views .ssp-views__mode, .ssp-modebar .ssp-views__mode {
  display: inline-flex; min-height: 38px; align-items: center; padding: 8px 16px; border-radius: var(--ssp-radius-pill); color: var(--ssp-navy);
  font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color var(--ssp-speed) var(--ssp-ease), color var(--ssp-speed) var(--ssp-ease);
}
.ssp-views .ssp-views__mode:hover, .ssp-modebar .ssp-views__mode:hover { background: var(--ssp-red-tint); color: var(--ssp-red-deep); }
.ssp-views .ssp-views__mode[aria-current="page"], .ssp-views .ssp-views__mode[aria-current="page"]:hover,
.ssp-modebar .ssp-views__mode[aria-current="page"], .ssp-modebar .ssp-views__mode[aria-current="page"]:hover { background: var(--ssp-navy); color: #fff; }
.ssp-modebar { display: flex; justify-content: flex-end; padding: 0 clamp(20px, 4vw, 52px); margin: 0 0 16px; }
.ssp-views__notice { margin: 24px 0 0; padding: 18px 20px; border: 1px solid var(--ssp-border); border-top: var(--ssp-cap) solid var(--ssp-red); border-radius: var(--ssp-radius-card); background: #fff; color: var(--ssp-muted); }

/* ----- Priority matrix: three pillars in brand hues (navy · violet · red) ----- */
.ssp-views .ssp-priority { --ssp-priority-blue: var(--ssp-navy); --ssp-priority-teal: var(--ssp-violet); --ssp-priority-red: var(--ssp-red); font-size: 13px; }
.ssp-views .ssp-priority__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ssp-views .ssp-priority__legend-item { padding: 12px 16px; border: 1px solid var(--ssp-priority-border); border-top: var(--ssp-cap) solid var(--ssp-priority-ink); border-radius: var(--ssp-radius-card); background: var(--ssp-priority-pale); }
.ssp-views .ssp-priority__legend-item--data, .ssp-views .ssp-priority__pillar--data { --ssp-priority-ink: var(--ssp-priority-blue); --ssp-priority-pale: var(--ssp-navy-tint); --ssp-priority-border: #cfcbe3; }
.ssp-views .ssp-priority__legend-item--infrastruktura, .ssp-views .ssp-priority__pillar--infrastruktura { --ssp-priority-ink: var(--ssp-priority-teal); --ssp-priority-pale: var(--ssp-violet-tint); --ssp-priority-border: #d6d0ec; }
.ssp-views .ssp-priority__legend-item--ludia_a_zariadenia, .ssp-views .ssp-priority__pillar--ludia_a_zariadenia { --ssp-priority-ink: var(--ssp-priority-red); --ssp-priority-pale: var(--ssp-red-tint); --ssp-priority-border: #f3c6c9; }
.ssp-views .ssp-priority__legend-item strong, .ssp-views .ssp-priority__legend-item small { display: block; }
.ssp-views .ssp-priority__legend-item strong { color: var(--ssp-priority-ink); font-size: 17px; font-weight: 700; }
.ssp-views .ssp-priority__legend-item small { margin-top: 4px; color: var(--ssp-text); line-height: 1.4; }
.ssp-views .ssp-priority__rows { display: grid; gap: 16px; }
.ssp-views .ssp-priority__row { display: grid; grid-template-columns: 160px repeat(3, minmax(0, 1fr)); min-width: 0; overflow: hidden; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-card); background: #fff; box-shadow: var(--ssp-shadow-row); }
.ssp-views .ssp-priority__summary { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 18px 16px; border-right: 1px solid var(--ssp-border); background: var(--ssp-soft); }
.ssp-views .ssp-priority__number { color: var(--ssp-navy); font-size: 36px; font-weight: 700; line-height: 1; }
.ssp-views .ssp-priority__summary small { margin-top: 10px; color: var(--ssp-red); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ssp-views .ssp-priority__summary h3 { margin: 4px 0 10px; color: var(--ssp-navy); font-size: 16px; font-weight: 700; line-height: 1.25; }
.ssp-views .ssp-priority__summary span { align-self: flex-start; padding: 3px 9px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-pill); background: #fff; color: var(--ssp-muted); font-size: 11px; font-weight: 600; }
.ssp-views .ssp-priority__pillar { min-width: 0; margin: 14px 8px; overflow: hidden; border: 1px solid var(--ssp-priority-border); border-radius: var(--ssp-radius-chip); background: #fff; }
.ssp-views .ssp-priority__pillar h4 { margin: 0; padding: 10px 14px; background: var(--ssp-priority-pale); color: var(--ssp-priority-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ssp-views .ssp-priority__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
.ssp-views .ssp-priority__card { display: grid; min-width: 0; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-chip); background: #fff; }
.ssp-views a.ssp-priority__card { color: inherit; text-decoration: none; transition: border-color var(--ssp-speed) var(--ssp-ease), background-color var(--ssp-speed) var(--ssp-ease), box-shadow var(--ssp-speed) var(--ssp-ease); }
.ssp-views a.ssp-priority__card:hover { border-color: var(--ssp-priority-ink); background: var(--ssp-priority-pale); box-shadow: var(--ssp-shadow-row); }
.ssp-views .ssp-priority__icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--ssp-priority-border); border-radius: var(--ssp-radius-chip); background: var(--ssp-priority-pale); color: var(--ssp-priority-ink); }
.ssp-views .ssp-priority__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.ssp-views .ssp-priority__card-copy { min-width: 0; }
.ssp-views .ssp-priority__card-copy strong, .ssp-views .ssp-priority__card-copy small { display: block; }
.ssp-views .ssp-priority__card-copy strong { color: var(--ssp-navy); font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ssp-views .ssp-priority__card-copy small { margin-top: 3px; color: var(--ssp-muted); font-size: 11px; line-height: 1.3; }
.ssp-views .ssp-priority__vendors { align-self: start; white-space: nowrap; padding: 3px 8px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-pill); background: var(--ssp-soft); color: var(--ssp-muted); font-size: 10px; font-weight: 600; }
.ssp-views .ssp-priority__error { color: var(--ssp-red); }
.ssp-views .ssp-priority__row--unassigned { grid-template-columns: minmax(0, 1fr); }
.ssp-views .ssp-priority__pillar--unassigned { --ssp-priority-ink: var(--ssp-muted); --ssp-priority-pale: var(--ssp-soft-2); --ssp-priority-border: var(--ssp-border); }
.ssp-views .ssp-priority__pillar--unassigned .ssp-priority__cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ssp-views .ssp-priority__pillar--unassigned .ssp-priority__card { grid-template-columns: minmax(0, 1fr); }

/* ========================================================================
   Knowledgebase (.ssp-kb)
   ======================================================================== */
.ssp-kb { display: grid; gap: 20px; width: 100%; max-width: 100%; min-width: 0; margin: 24px 0 0; }
.ssp-kb > * { min-width: 0; max-width: 100%; }
.ssp-kb__tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.ssp-kb__tile { display: grid; align-content: start; gap: 4px; flex: 1 1 150px; padding: 14px 18px 16px; border: 1px solid var(--ssp-border); border-top: var(--ssp-cap) solid var(--ssp-red); border-radius: var(--ssp-radius-card); background: #fff; }
.ssp-kb__tile-label { color: var(--ssp-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ssp-kb__tile-value { color: var(--ssp-navy); font-size: 30px; font-weight: 700; line-height: 1.1; }
.ssp-kb__card { width: 100%; max-width: 100%; min-width: 0; padding: clamp(16px, 2.4vw, 24px); border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-card); background: #fff; }
.ssp-kb__card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ssp-kb__card-header h2 { margin: 0; color: var(--ssp-navy); font-size: 20px; font-weight: 700; }
.ssp-kb__count, .ssp-kb__status { margin: 0; color: var(--ssp-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ssp-kb__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 16px; }
.ssp-kb__row--selects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ssp-kb__field { display: grid; gap: 6px; min-width: 0; }
.ssp-kb__field--search { flex: 1 1 260px; }
.ssp-kb__field--types { flex: 2 1 380px; }
.ssp-kb__field--actions { flex: 0 0 auto; display: flex; flex-direction: row; gap: 8px; }
.ssp-kb__field > label, .ssp-kb__label { overflow: hidden; color: var(--ssp-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ssp-kb__search { display: flex; gap: 8px; }
.ssp-kb .ssp-kb__search input, .ssp-kb .ssp-kb__field select {
  min-width: 0; min-height: 44px; margin: 0; padding: 8px 14px; border: 1px solid var(--ssp-border-strong); border-radius: var(--ssp-radius-chip);
  background: #fff; box-shadow: none; color: var(--ssp-ink); font: inherit; font-size: 15px; transition: border-color var(--ssp-speed) var(--ssp-ease);
}
.ssp-kb .ssp-kb__search input { flex: 1 1 auto; }
.ssp-kb .ssp-kb__field select { max-width: 100%; }
.ssp-kb .ssp-kb__search input:focus, .ssp-kb .ssp-kb__field select:focus { border-color: var(--ssp-navy); }
.ssp-kb .ssp-kb__search input::placeholder { color: var(--ssp-muted); }
.ssp-kb .ssp-kb__submit {
  min-height: 44px; padding: 8px 20px; border: 1px solid var(--ssp-red); border-radius: var(--ssp-radius-chip); background: var(--ssp-red); box-shadow: none;
  color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color var(--ssp-speed) var(--ssp-ease), border-color var(--ssp-speed) var(--ssp-ease);
}
.ssp-kb .ssp-kb__submit:hover { border-color: var(--ssp-red-dark); background: var(--ssp-red-dark); color: #fff; }
.ssp-kb__pills { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.ssp-kb__pills::-webkit-scrollbar { height: 5px; }
.ssp-kb__pills::-webkit-scrollbar-thumb { border-radius: var(--ssp-radius-pill); background: var(--ssp-border-strong); }
.ssp-kb .ssp-kb__pill {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 38px; padding: 6px 12px 6px 14px; white-space: nowrap;
  border: 1px solid var(--ssp-border-strong); border-radius: var(--ssp-radius-pill); background: #fff; box-shadow: none; color: var(--ssp-navy);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--ssp-speed) var(--ssp-ease), color var(--ssp-speed) var(--ssp-ease), background-color var(--ssp-speed) var(--ssp-ease);
}
.ssp-kb .ssp-kb__pill:hover { border-color: var(--ssp-navy); background: var(--ssp-soft); color: var(--ssp-navy); }
.ssp-kb .ssp-kb__pill:disabled, .ssp-kb .ssp-kb__pill:disabled:hover { border-color: var(--ssp-border); background: var(--ssp-soft); color: #a9a6b8; cursor: not-allowed; }
.ssp-kb .ssp-kb__field select option:disabled { color: #a9a6b8; }
.ssp-kb .ssp-kb__pill b { padding: 1px 7px; border-radius: var(--ssp-radius-pill); background: var(--ssp-navy-tint); color: var(--ssp-navy); font-size: 11px; font-weight: 700; }
.ssp-kb .ssp-kb__pill[aria-pressed="true"], .ssp-kb .ssp-kb__pill[aria-pressed="true"]:hover { border-color: var(--ssp-red); background: var(--ssp-red); color: #fff; }
.ssp-kb .ssp-kb__pill[aria-pressed="true"] b { background: rgba(255, 255, 255, 0.22); color: #fff; }
.ssp-kb .ssp-kb__action {
  display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; border: 1px solid var(--ssp-border-strong); border-radius: var(--ssp-radius-chip);
  background: #fff; box-shadow: none; color: var(--ssp-navy); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: border-color var(--ssp-speed) var(--ssp-ease), color var(--ssp-speed) var(--ssp-ease), background-color var(--ssp-speed) var(--ssp-ease);
}
.ssp-kb .ssp-kb__action:hover { border-color: var(--ssp-navy); background: var(--ssp-soft); color: var(--ssp-navy); }
.ssp-kb .ssp-kb__action[aria-disabled="true"], .ssp-kb .ssp-kb__action[aria-disabled="true"]:hover { border-color: var(--ssp-border); background: #fff; color: #a9a6b8; pointer-events: none; }
.ssp-kb__mitre { padding: 12px 16px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-chip); background: var(--ssp-soft); }
.ssp-kb__mitre > summary { color: var(--ssp-navy); font-size: 14px; font-weight: 700; cursor: pointer; }
.ssp-kb__mitre > summary::marker { color: var(--ssp-red); }
.ssp-kb__techniques { display: grid; gap: 6px; max-height: 220px; margin: 14px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.ssp-kb__techniques label { display: flex; align-items: center; gap: 8px; color: var(--ssp-navy); font-size: 13px; cursor: pointer; }
.ssp-kb__techniques input { accent-color: var(--ssp-red); }
.ssp-kb__techniques span { min-width: 0; flex: 1 1 auto; }
.ssp-kb__techniques b { color: var(--ssp-muted); font-size: 11px; font-weight: 600; }
.ssp-kb__hint { margin: 14px 0 0; color: var(--ssp-muted); font-size: 13px; }
.ssp-kb__empty { margin: 12px 0 0; color: var(--ssp-muted); font-size: 13px; }

/* results table */
.ssp-kb__table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-card); }
.ssp-kb__table-scroll table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; background: #fff; }
.ssp-kb__table-scroll th, .ssp-kb__table-scroll td { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--ssp-border); background: transparent; text-align: left; vertical-align: top; }
.ssp-kb__table-scroll tbody tr { background: #fff; }
.ssp-kb__table-scroll tbody tr:last-child td { border-bottom: 0; }
.ssp-kb__table-scroll thead th { background: var(--ssp-navy); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ssp-kb__table-scroll tbody tr:hover { background: var(--ssp-soft); }
.ssp-kb .ssp-kb__cell-page a { color: var(--ssp-navy); font-size: 16px; font-weight: 700; text-decoration: none; }
.ssp-kb .ssp-kb__cell-page a:hover { color: var(--ssp-red-deep); text-decoration: underline; }
.ssp-kb__cell-page small { display: block; margin-top: 4px; color: var(--ssp-muted); font-size: 13px; line-height: 1.5; }
.ssp-kb__badge { display: inline-block; padding: 3px 10px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-pill); background: var(--ssp-soft); color: var(--ssp-navy); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.ssp-kb__badge--section { border-color: var(--ssp-navy); background: var(--ssp-navy); color: #fff; }
.ssp-kb__badge--technology { border-color: var(--ssp-red); background: #fff; color: var(--ssp-red); }
.ssp-kb__badge--vendor { border-color: #cfcbe3; background: var(--ssp-navy-tint); color: var(--ssp-navy); }
.ssp-kb__badge--attack { border-color: #f3c6c9; background: var(--ssp-red-tint); color: var(--ssp-red-deep); }
.ssp-kb__badge--status { margin-left: 8px; border-color: var(--ssp-amber-border); background: var(--ssp-amber-bg); color: var(--ssp-amber-ink); }
.ssp-kb__lang { color: var(--ssp-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.ssp-kb__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ssp-kb__chip { padding: 3px 9px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-pill); background: #fff; color: var(--ssp-text); font-size: 12px; line-height: 1.4; }
.ssp-kb__chip--section { border-color: transparent; background: var(--ssp-navy-tint); color: var(--ssp-navy); font-weight: 600; }

/* loading / empty / pager */
.ssp-kb__filters.is-busy .ssp-kb__pills, .ssp-kb__filters.is-busy .ssp-kb__row--selects, .ssp-kb__filters.is-busy .ssp-kb__mitre { opacity: 0.55; pointer-events: none; }
.ssp-kb .ssp-kb__submit:disabled { border-color: var(--ssp-border-strong); background: var(--ssp-border-strong); color: #fff; cursor: progress; }
.ssp-kb__results[aria-busy="true"] .ssp-kb__pager { opacity: 0.55; pointer-events: none; }
.ssp-kb__skeleton { display: block; height: 12px; border-radius: var(--ssp-radius-pill); background: linear-gradient(90deg, var(--ssp-soft-2) 25%, var(--ssp-soft) 50%, var(--ssp-soft-2) 75%); background-size: 240px 100%; animation: ssp-kb-skeleton 1200ms linear infinite; }
.ssp-kb__skeleton-row td:first-child .ssp-kb__skeleton { max-width: 260px; }
.ssp-kb__skeleton-row td:nth-child(2) .ssp-kb__skeleton, .ssp-kb__skeleton-row td:nth-child(3) .ssp-kb__skeleton { max-width: 70px; }
@keyframes ssp-kb-skeleton { from { background-position: -240px 0; } to { background-position: 240px 0; } }
.ssp-kb__no-results td { padding: 40px 16px; color: var(--ssp-muted); font-size: 15px; text-align: center; }
.ssp-kb__pager { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--ssp-muted); font-size: 13px; }

@media (max-width: 980px) { .ssp-kb__row--selects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .ssp-kb__tile { flex: 1 1 calc(50% - 6px); }
  .ssp-kb__card-header { flex-wrap: wrap; }
  .ssp-kb__count, .ssp-kb__status { white-space: normal; }
  .ssp-kb__field--search, .ssp-kb__field--types, .ssp-kb__field--actions { flex: 1 1 100%; }
  .ssp-kb__row--selects { grid-template-columns: minmax(0, 1fr); }
  .ssp-kb__pills { flex-wrap: wrap; overflow-x: visible; }
  .ssp-kb .ssp-kb__pill { flex: 0 1 auto; }
  .ssp-kb__table-scroll th, .ssp-kb__table-scroll td { padding: 12px; }
}

/* ========================================================================
   Section → technology → vendor tree (hub "Strom" forest + detail-page aside)
   ======================================================================== */
.ssp-section-tech-tree { margin: 28px 0; }
.ssp-tree__forest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ssp-tree .ssp-section-tech-tree { margin: 0; }
.ssp-tree__forest .ssp-section-tech-tree { margin: 0; }
.ssp-section-tech-tree__panel { overflow: hidden; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-card); background: #fff; box-shadow: var(--ssp-shadow-row); }
/* section root = navy band with a red rule (brand header pattern) */
.ssp-section-tech-tree__root { margin: 0; padding: 12px 16px; border-bottom: 3px solid var(--ssp-red); background: var(--ssp-navy); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; }
.ssp-section-tech-tree .ssp-section-tech-tree__root a, .ssp-tree .ssp-section-tech-tree__root a { color: inherit; text-decoration: none; }
.ssp-section-tech-tree .ssp-section-tech-tree__root a:hover, .ssp-tree .ssp-section-tech-tree__root a:hover { color: var(--ssp-on-dark-muted); text-decoration: underline; }
.ssp-section-tech-tree ul { display: grid; gap: 10px; margin: 16px 16px 16px 26px; padding: 0 0 0 20px; border-left: 2px solid var(--ssp-border); list-style: none; }
.ssp-section-tech-tree li { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 10px; min-width: 0; }
.ssp-section-tech-tree li > * { min-width: 0; }
.ssp-section-tech-tree .ssp-section-tech-tree__technology {
  position: relative; display: block; padding: 9px 12px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-row); background: var(--ssp-soft);
  color: var(--ssp-navy); font-size: 14px; line-height: 1.25; text-decoration: none; transition: border-color var(--ssp-speed) var(--ssp-ease), background-color var(--ssp-speed) var(--ssp-ease);
}
.ssp-section-tech-tree .ssp-section-tech-tree__technology strong { color: inherit; font-weight: 700; }
.ssp-section-tech-tree__technology::before { position: absolute; top: 50%; left: -21px; width: 20px; margin-top: -1px; border-top: 2px solid var(--ssp-border); content: ""; }
.ssp-section-tech-tree .ssp-section-tech-tree__technology:hover { border-color: var(--ssp-navy); background: #fff; color: var(--ssp-navy); }
.ssp-section-tech-tree__technology small { display: block; margin-top: 1px; color: var(--ssp-muted); font-size: 11px; }
.ssp-section-tech-tree .ssp-section-tech-tree__technology.is-current, .ssp-section-tech-tree .ssp-section-tech-tree__technology.is-current:hover { border-color: var(--ssp-red); background: var(--ssp-red-tint); box-shadow: inset 3px 0 0 var(--ssp-red); }
.ssp-section-tech-tree__technology.is-current small { color: var(--ssp-red-deep); }
.ssp-section-tech-tree__vendors { display: flex; flex-wrap: wrap; gap: 4px; }
.ssp-section-tech-tree__vendor-count { flex-basis: 100%; color: var(--ssp-muted); font-size: 11px; }
.ssp-section-tech-tree .ssp-section-tech-tree__vendors a { padding: 3px 9px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-pill); background: #fff; color: var(--ssp-navy); font-size: 11px; line-height: 1.3; text-decoration: none; transition: border-color var(--ssp-speed) var(--ssp-ease), color var(--ssp-speed) var(--ssp-ease); }
.ssp-section-tech-tree .ssp-section-tech-tree__vendors a:hover { border-color: var(--ssp-red); color: var(--ssp-red-deep); }

/* ========================================================================
   Technology detail overlay
   ======================================================================== */
.ssp-tree-overlay { position: fixed; z-index: 99999; inset: 0; display: grid; place-items: center; padding: clamp(14px, 4vw, 48px); overflow: auto; overscroll-behavior: contain; background: rgba(27, 20, 68, 0.72); }
.ssp-tree-overlay .ssp-tree-overlay__dialog { display: grid; width: min(980px, 100%); max-height: calc(100vh - 40px); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--ssp-border); border-top: var(--ssp-cap) solid var(--ssp-red); border-radius: var(--ssp-radius-card); background: #fff; box-shadow: var(--ssp-shadow-dialog); color: var(--ssp-text); }
.ssp-tree-overlay .ssp-tree-overlay__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--ssp-border); }
.ssp-tree-overlay .ssp-tree-overlay__header small { display: block; color: var(--ssp-red); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ssp-tree-overlay .ssp-tree-overlay__header h2 { margin: 3px 0 0; color: var(--ssp-navy); font-size: 22px; font-weight: 700; line-height: 1.2; }
.ssp-tree-overlay .ssp-tree-overlay__header button { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; padding: 0; border: 1px solid var(--ssp-border-strong); border-radius: var(--ssp-radius-chip); background: #fff; box-shadow: none; color: var(--ssp-navy); font: inherit; font-size: 22px; line-height: 1; appearance: none; cursor: pointer; transition: border-color var(--ssp-speed) var(--ssp-ease), color var(--ssp-speed) var(--ssp-ease), background-color var(--ssp-speed) var(--ssp-ease); }
.ssp-tree-overlay .ssp-tree-overlay__header button:hover { border-color: var(--ssp-red); background: var(--ssp-red-tint); color: var(--ssp-red-deep); }
.ssp-tree-overlay .ssp-tree-overlay__body { min-height: 180px; overflow: auto; padding: 16px; background: var(--ssp-soft); }
.ssp-tree-overlay .ssp-tree-overlay__body > p { margin: 24px 0; color: var(--ssp-muted); text-align: center; }
.ssp-tree-overlay .ssp-tree-overlay__body > .ssp-detail-layout__main { padding: clamp(18px, 3vw, 32px); border: 1px solid var(--ssp-border); border-top: 0; border-radius: var(--ssp-radius-chip); background: #fff; box-shadow: none; }
.ssp-tree-overlay .ssp-tree-overlay__error { color: var(--ssp-red-deep); font-weight: 600; }
.ssp-tree-overlay .ssp-tree-overlay__footer { display: flex; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--ssp-border); background: #fff; }
.ssp-tree-overlay .ssp-tree-overlay__footer a { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 16px; border-radius: var(--ssp-radius-chip); background: var(--ssp-red); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color var(--ssp-speed) var(--ssp-ease); }
.ssp-tree-overlay .ssp-tree-overlay__footer a:hover { background: var(--ssp-red-dark); color: #fff; }

/* ========================================================================
   Detail pages: tree column + reader
   ======================================================================== */
.ssp-detail-layout { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); align-items: start; gap: clamp(20px, 3vw, 40px); padding: clamp(20px, 4vw, 52px); }
.ssp-detail-layout__main { min-width: 0; }
.ssp-detail-layout > .ssp-detail-layout__main { padding: clamp(24px, 2.5vw, 44px); }
.ssp-detail-layout__tree { position: sticky; top: 24px; }
.ssp-detail-layout__tree .ssp-section-tech-tree { margin: 0; }
.ssp-detail-layout__tree .ssp-section-tech-tree li { grid-template-columns: minmax(0, 1fr); }
.ssp-detail-layout__tree .ssp-section-tech-tree__vendors { margin-top: 6px; padding-left: 2px; }
.ssp-detail-layout__tree .ssp-section-tech-tree ul { margin: 14px 14px 14px 22px; padding-left: 16px; }
.ssp-detail-layout__tree .ssp-section-tech-tree__technology::before { left: -17px; width: 16px; }

/* ========================================================================
   Reader (imported sectec-* content)
   ======================================================================== */
.ssp-reader__content { padding: clamp(20px, 4vw, 52px); border: 1px solid var(--ssp-border); border-top: var(--ssp-cap) solid var(--ssp-red); border-radius: var(--ssp-radius-card); background: #fff; box-shadow: var(--ssp-shadow-card); color: var(--ssp-text); }
.ssp-reader__content h1, .ssp-reader__content h2, .ssp-reader__content h3, .ssp-reader__content h4 { color: var(--ssp-navy); font-weight: 700; line-height: 1.2; }
.ssp-reader__content h1, .ssp-reader__content .sectec-content__header h2 { margin: 0 0 14px; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; }
.ssp-reader__content h2 { margin: 40px 0 14px; font-size: 27px; }
.ssp-reader__content h3 { margin: 26px 0 10px; font-size: 20px; }
.ssp-reader__content h4 { margin: 20px 0 8px; font-size: 17px; }
.ssp-reader__content p, .ssp-reader__content li { font-size: 17px; line-height: 1.65; }
.ssp-reader__content p { margin: 0 0 14px; }
.ssp-reader__content a, .ssp-detail-layout .ssp-reader__content a, .ssp-tree-overlay .ssp-reader__content a { color: var(--ssp-red-deep); text-decoration: none; }
.ssp-reader__content a:hover, .ssp-detail-layout .ssp-reader__content a:hover, .ssp-tree-overlay .ssp-reader__content a:hover { color: var(--ssp-red-dark); text-decoration: underline; }
.ssp-reader__content img { max-width: 100%; height: auto; }
.ssp-reader__content figure { margin: 24px 0; }

.ssp-reader__content .sectec-content__header { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--ssp-border); }
.ssp-reader__content .sectec-eyebrow, .ssp-reader__content .sectec-content__eyebrow { margin: 0 0 10px; color: var(--ssp-red); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ssp-reader__content .sectec-lead { max-width: 920px; margin: 0; color: #4c4963; font-size: 20px; line-height: 1.55; }
.ssp-reader__content .sectec-hierarchy { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 5px 10px 5px 12px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-pill); background: var(--ssp-soft); color: var(--ssp-muted); font-size: 12px; }
.ssp-reader__content .sectec-hierarchy span { color: var(--ssp-red); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ssp-reader__content .sectec-hierarchy span + a, .ssp-reader__content .sectec-hierarchy a { color: var(--ssp-navy); font-weight: 600; }
.ssp-reader__content .sectec-content__block { margin-top: 34px; }
.ssp-reader__content .sectec-content__block > h2:first-child { margin-top: 0; }

.ssp-reader__content .sectec-section-visual { overflow: hidden; border: 1px solid var(--ssp-border); border-radius: 12px; background: var(--ssp-soft); }
.ssp-reader__content .sectec-section-visual img { display: block; width: 100%; }
.ssp-reader__content .sectec-section-visual figcaption { padding: 10px 14px; color: var(--ssp-muted); font-size: 12px; }

/* checklist: red dot bullets */
.ssp-reader__content .sectec-checklist { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.ssp-reader__content .sectec-checklist li { position: relative; padding-left: 22px; }
.ssp-reader__content .sectec-checklist li::before { content: ""; position: absolute; top: 0.62em; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--ssp-red); }

/* glossary */
.ssp-reader__content .sectec-glossary, .ssp-reader__content .sectec-content__glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ssp-reader__content .sectec-glossary > div, .ssp-reader__content .sectec-content__glossary > * { display: grid; grid-template-columns: minmax(56px, auto) 1fr; gap: 14px; padding: 14px 16px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-chip); background: var(--ssp-soft); }
.ssp-reader__content .sectec-glossary dt { color: var(--ssp-navy); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; }
.ssp-reader__content .sectec-glossary dd { display: grid; gap: 3px; margin: 0; }
.ssp-reader__content .sectec-glossary dd strong { color: var(--ssp-red-deep); font-size: 13px; font-weight: 700; }
.ssp-reader__content .sectec-glossary dd span { color: var(--ssp-muted); font-size: 13px; line-height: 1.45; }

/* product / area card grids: white cards with the red cap */
.ssp-reader__content .sectec-product-list, .ssp-reader__content .sectec-section-area-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ssp-reader__content .sectec-product-card { padding: 16px 18px; border: 1px solid var(--ssp-border); border-top: var(--ssp-cap) solid var(--ssp-red); border-radius: var(--ssp-radius-card); background: #fff; box-shadow: var(--ssp-shadow-row); }
.ssp-reader__content .sectec-product-card h3 { margin: 0 0 6px; font-size: 18px; }
.ssp-reader__content .sectec-product-card p { margin: 0; color: var(--ssp-muted); font-size: 15px; line-height: 1.55; }

/* vendor logo frame: white, bordered (brand rule: logos always on white) */
.ssp-reader__content .sectec-vendor-logo-frame { display: grid; place-items: center; width: min(280px, 100%); min-height: 120px; margin: 0 0 22px; padding: 18px 24px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-card); background: #fff; }
.ssp-reader__content .sectec-vendor-logo-frame--light { background: #fff; }
.ssp-reader__content .sectec-vendor-logo { width: auto; max-width: 220px; max-height: 80px; object-fit: contain; }

/* vendor list + tag lists: outlined pills */
.ssp-reader__content .sectec-vendor-list, .ssp-reader__content .sectec-content__vendors, .ssp-reader__content .sectec-tag-list, .ssp-reader__content .sectec-section-tags, .ssp-reader__content .sectec-area-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ssp-reader__content .sectec-vendor-list li, .ssp-reader__content .sectec-content__vendors li { margin: 0; }
.ssp-reader__content .sectec-vendor-list li a, .ssp-reader__content .sectec-content__vendors li a, .ssp-reader__content .sectec-tag-list li, .ssp-reader__content .sectec-section-tags li, .ssp-reader__content .sectec-area-tags li { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--ssp-border-strong); border-radius: var(--ssp-radius-pill); background: #fff; color: var(--ssp-navy); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: border-color var(--ssp-speed) var(--ssp-ease), color var(--ssp-speed) var(--ssp-ease), background-color var(--ssp-speed) var(--ssp-ease); }
.ssp-reader__content .sectec-vendor-list li a:hover, .ssp-reader__content .sectec-content__vendors li a:hover { border-color: var(--ssp-red); background: var(--ssp-red-tint); color: var(--ssp-red-deep); text-decoration: none; }

/* related tree (reader block and vendor-page aside) */
.ssp-reader__content .sectec-related-tree, .ssp-detail-layout__tree .sectec-related-tree { display: grid; gap: 14px; }
.ssp-reader__content .sectec-related-tree__section, .ssp-detail-layout__tree .sectec-related-tree__section { overflow: hidden; padding: 0; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-card); background: #fff; }
.ssp-reader__content .sectec-related-tree__section h3, .ssp-detail-layout__tree .sectec-related-tree__section h3 { margin: 0; padding: 11px 16px; border-bottom: 3px solid var(--ssp-red); background: var(--ssp-navy); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ssp-reader__content .sectec-related-tree__section h3 a, .ssp-detail-layout__tree .sectec-related-tree__section h3 a, .ssp-reader__content .sectec-related-tree .sectec-related-tree__section h3 a { color: inherit; }
.ssp-reader__content .sectec-related-tree__section > p, .ssp-detail-layout__tree .sectec-related-tree__section > p { margin: 12px 16px 0; font-size: 14px; color: var(--ssp-muted); }
.ssp-reader__content .sectec-related-tree__technologies, .ssp-detail-layout__tree .sectec-related-tree__technologies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 14px 16px 16px; list-style: none; }
.ssp-reader__content .sectec-related-tree__technology, .ssp-detail-layout__tree .sectec-related-tree__technology { min-width: 0; padding: 10px 12px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-row); background: var(--ssp-soft); font-size: 14px; line-height: 1.35; }
.ssp-reader__content .sectec-related-tree__technology.is-current, .ssp-detail-layout__tree .sectec-related-tree__technology.is-current { border-color: var(--ssp-red); background: var(--ssp-red-tint); box-shadow: inset 3px 0 0 var(--ssp-red); }
.ssp-reader__content a.sectec-related-tree__technology-link, .ssp-detail-layout__tree a.sectec-related-tree__technology-link, .ssp-reader__content .sectec-related-tree__technology-link, .ssp-detail-layout__tree .sectec-related-tree__technology-link { display: grid; gap: 2px; color: var(--ssp-navy); text-decoration: none; }
.ssp-reader__content a.sectec-related-tree__technology-link:hover, .ssp-detail-layout__tree a.sectec-related-tree__technology-link:hover { color: var(--ssp-red-deep); text-decoration: none; }
.ssp-reader__content .sectec-related-tree__technology-link span:first-child, .ssp-detail-layout__tree .sectec-related-tree__technology-link span:first-child { font-weight: 700; }
.ssp-reader__content .sectec-related-tree__technology-link small, .ssp-detail-layout__tree .sectec-related-tree__technology-link small, .ssp-reader__content .sectec-related-tree__current { color: var(--ssp-muted); font-size: 11px; }
.ssp-reader__content .sectec-related-tree__vendors, .ssp-detail-layout__tree .sectec-related-tree__vendors { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.ssp-reader__content .sectec-related-tree__vendors li, .ssp-detail-layout__tree .sectec-related-tree__vendors li { margin: 0; font-size: 11px; }
.ssp-reader__content .sectec-related-tree__vendors li a, .ssp-detail-layout__tree .sectec-related-tree__vendors li a { display: inline-block; padding: 2px 8px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-pill); background: #fff; color: var(--ssp-navy); font-size: 11px; line-height: 1.4; text-decoration: none; }
.ssp-reader__content .sectec-related-tree__vendors li a:hover, .ssp-detail-layout__tree .sectec-related-tree__vendors li a:hover { border-color: var(--ssp-red); color: var(--ssp-red-deep); }
.ssp-reader__content .sectec-related-tree__vendor-block { margin-top: 8px; }
.ssp-reader__content .sectec-vendor-header__text { min-width: 0; }

/* vendor page: imported related tree lifted into the narrow column */
.ssp-detail-layout__tree > .sectec-content__block { margin: 0; }
.ssp-detail-layout__tree > .sectec-content__block > h2 { margin: 0 0 14px; color: var(--ssp-navy); font-size: 20px; font-weight: 700; line-height: 1.2; }
.ssp-detail-layout__tree .sectec-related-tree { gap: 10px; }
.ssp-detail-layout__tree .sectec-related-tree__technologies { grid-template-columns: minmax(0, 1fr); padding: 12px; }

/* generic grids the importer may emit */
.ssp-reader__content .sectec-content__related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ssp-reader__content .sectec-content__related > * { padding: 14px 16px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-chip); background: var(--ssp-soft); }

/* link list (attack scenarios, ATT&CK techniques): rows with a red dot */
.ssp-reader__content .sectec-link-list { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.ssp-reader__content .sectec-link-list li { position: relative; padding: 13px 16px 13px 36px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-chip); background: var(--ssp-soft); font-size: 15px; line-height: 1.5; }
.ssp-reader__content .sectec-link-list li::before { content: ""; position: absolute; top: 20px; left: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--ssp-red); }
.ssp-reader__content .sectec-link-list li a { display: block; color: var(--ssp-navy); font-size: 16px; font-weight: 700; text-decoration: none; }
.ssp-reader__content .sectec-link-list li a:hover { color: var(--ssp-red-deep); text-decoration: underline; }
.ssp-reader__content .sectec-link-list span { display: block; margin-top: 3px; color: var(--ssp-muted); font-size: 14px; line-height: 1.5; }

/* tables inside imported content */
.ssp-reader__content table { width: 100%; margin: 0 0 14px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ssp-border); border-radius: var(--ssp-radius-chip); overflow: hidden; font-size: 15px; }
.ssp-reader__content th, .ssp-reader__content td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--ssp-border); background: transparent; text-align: left; vertical-align: top; }
.ssp-reader__content th { background: var(--ssp-soft); color: var(--ssp-navy); font-weight: 700; }
.ssp-reader__content tr:last-child td { border-bottom: 0; }

/* ========================================================================
   Responsive
   ======================================================================== */
@media (max-width: 980px) {
  .ssp-detail-layout { grid-template-columns: minmax(0, 1fr); padding: clamp(16px, 4vw, 28px); }
  .ssp-entity-detail { margin-inline: clamp(16px, 4vw, 28px); }
  .ssp-modebar { padding-right: clamp(16px, 4vw, 28px); }
  .ssp-detail-layout__tree { position: static; order: 2; }
  .ssp-views .ssp-priority__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ssp-views .ssp-priority__row--unassigned { grid-template-columns: minmax(0, 1fr); }
  .ssp-views .ssp-priority__summary { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--ssp-border); }
  .ssp-views .ssp-priority__summary small { margin-top: 0; }
  .ssp-views .ssp-priority__summary h3 { flex: 1; margin: 0; }
  .ssp-views .ssp-priority__cards { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 681px) and (max-width: 980px) {
  .ssp-detail-layout__tree .ssp-section-tech-tree li { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
@media (max-width: 1050px) {
  .ssp-tree__forest { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ssp-views__switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .ssp-views__header { align-items: flex-start; flex-direction: column; gap: 6px; }
  .ssp-views__modes, .ssp-modebar .ssp-views__modes { width: 100%; }
  .ssp-views .ssp-views__mode, .ssp-modebar .ssp-views__mode { flex: 1; justify-content: center; }
  .ssp-views__switcher { grid-template-columns: 1fr; gap: 8px; }
  .ssp-views .ssp-views__tile { min-height: 64px; padding: 10px 12px; }
  .ssp-views__map-layout { grid-template-columns: 1fr; gap: 12px; }
  .ssp-views__hub { order: -1; margin-bottom: 10px; }
  .ssp-views__section-card::before, .ssp-views__section-card::after { display: none; }
  .ssp-section-tech-tree li { grid-template-columns: 1fr; }
  .ssp-section-tech-tree ul { margin: 12px 12px 12px 18px; padding-left: 14px; }
  .ssp-section-tech-tree__technology::before { left: -15px; width: 14px; }
  .ssp-views .ssp-priority__legend { grid-template-columns: minmax(0, 1fr); }
  .ssp-views .ssp-priority__row { grid-template-columns: minmax(0, 1fr); }
  .ssp-views .ssp-priority__summary { grid-column: auto; flex-direction: column; align-items: flex-start; gap: 0; }
  .ssp-views .ssp-priority__summary small { margin-top: 9px; }
  .ssp-views .ssp-priority__summary h3 { margin: 4px 0 10px; }
  .ssp-views .ssp-priority__pillar { margin: 10px; }
  .ssp-views .ssp-priority__card { grid-template-columns: 38px minmax(0, 1fr); }
  .ssp-views .ssp-priority__vendors { grid-column: 2; justify-self: start; }
  .ssp-tree-overlay { padding: 8px; }
  .ssp-tree-overlay .ssp-tree-overlay__dialog { max-height: calc(100vh - 16px); }
  .ssp-tree-overlay .ssp-tree-overlay__body { padding: 8px; }
  .ssp-reader__content .sectec-glossary, .ssp-reader__content .sectec-content__glossary, .ssp-reader__content .sectec-content__related,
  .ssp-reader__content .sectec-product-list, .ssp-reader__content .sectec-section-area-list, .ssp-reader__content .sectec-related-tree__technologies { grid-template-columns: 1fr; }
  .ssp-reader__content h2 { font-size: 24px; }
  .ssp-reader__content .sectec-lead { font-size: 18px; }
}
@media (max-width: 390px) {
  .ssp-views { max-width: 100%; margin-inline: 0; padding: 14px; }
  .ssp-views__tile { min-height: 60px; }
  .ssp-views__table-scroll th:first-child { min-width: 190px; }
  .ssp-kb__tile { flex: 1 1 100%; }
  .ssp-section-tech-tree ul { margin-left: 10px; padding-left: 12px; }
  .ssp-section-tech-tree__technology::before { left: -13px; width: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ssp-kb__skeleton, .ssp-views__scroll-hint > span { animation: none !important; }
  .ssp-views *, .ssp-kb *, .ssp-modebar *, .ssp-section-tech-tree *, .ssp-tree-overlay *, .ssp-reader__content *, .ssp-map *, .ssp-tree *, .ssp-portal * { transition: none !important; }
  .ssp-views__section-card:hover { transform: none; }
}


/* ========================================================================
   VERZIA 2 — brand-forward layer. Everything above is Verzia 1; the rules
   below override it (same selectors, later in the cascade). Deploy this
   whole file as public.css when Verzia 2 is chosen.
   ======================================================================== */
:root { --ssp-red-on-dark: #ffa3a7; --ssp-navy-deep: #140f33; --ssp-shadow-band: 0 14px 40px rgba(3, 3, 20, 0.16); }

/* hub shell: navy band with a fine technical grid; tiles / stat cards straddle its lower edge */
.ssp-views { padding: 0; border-top: 0; box-shadow: var(--ssp-shadow-band); }
.ssp-views__header {
  position: relative; align-items: center; gap: 14px 24px; padding: clamp(24px, 3vw, 36px) clamp(18px, 3vw, 32px) 86px;
  border-bottom: 4px solid var(--ssp-red); color: #fff;
  background-color: var(--ssp-navy);
  background-image: radial-gradient(70% 140% at 100% 0%, rgba(236, 28, 36, 0.28), transparent 62%), radial-gradient(50% 120% at 0% 100%, rgba(255, 255, 255, 0.07), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}
.ssp-views__header h1, .ssp-views__header h2 { color: #fff; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.01em; }
.ssp-views__header p { color: var(--ssp-on-dark-muted); font-size: 15px; }
.ssp-views__header .ssp-views__modes { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08); }
.ssp-views .ssp-views__header .ssp-views__mode { color: #fff; }
.ssp-views .ssp-views__header .ssp-views__mode:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ssp-views .ssp-views__header .ssp-views__mode[aria-current="page"], .ssp-views .ssp-views__header .ssp-views__mode[aria-current="page"]:hover { background: #fff; color: var(--ssp-navy); }
.ssp-views > [data-ssp-views-mode-panel] { position: relative; z-index: 1; padding: clamp(18px, 3vw, 32px); }
.ssp-views > [data-ssp-views-mode-panel="views"] { display: flex; flex-direction: column; }
.ssp-views__switcher { order: -2; margin: calc(-52px - clamp(18px, 3vw, 32px)) 0 26px; }
.ssp-views__description { order: -1; margin: 0 0 26px; font-size: 15px; }

/* view tiles: white cards; the selected one gets the red cap + navy badge */
.ssp-views .ssp-views__switcher .ssp-views__tile { min-height: 88px; border: 1px solid var(--ssp-border); border-top: 4px solid transparent; background: #fff; box-shadow: var(--ssp-shadow-card); color: var(--ssp-navy); }
.ssp-views .ssp-views__switcher .ssp-views__tile:hover { border-color: var(--ssp-border); border-top-color: var(--ssp-navy); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(3, 3, 20, 0.14); }
.ssp-views .ssp-views__switcher .ssp-views__tile[aria-current="page"], .ssp-views .ssp-views__switcher .ssp-views__tile[aria-current="page"]:hover { border-color: var(--ssp-border); border-top-color: var(--ssp-red); background: #fff; color: var(--ssp-navy); box-shadow: var(--ssp-shadow-card); transform: none; }
.ssp-views .ssp-views__switcher .ssp-views__tile .ssp-views__badge { background: var(--ssp-navy-tint); color: var(--ssp-navy); }
.ssp-views .ssp-views__switcher .ssp-views__tile[aria-current="page"] .ssp-views__badge { background: var(--ssp-navy); color: #fff; }
.ssp-views .ssp-views__switcher .ssp-views__tile[aria-current="page"] small { color: var(--ssp-muted); }
.ssp-views .ssp-views__switcher .ssp-views__tile[aria-current="page"] strong { color: var(--ssp-red-deep); }

/* map: the hub becomes a navy disc */
.ssp-views__hub { box-shadow: 0 16px 40px rgba(27, 20, 68, 0.18); }
.ssp-views__hub-center { inset: 21%; border-radius: 50%; background: var(--ssp-navy); color: #fff; box-shadow: inset 0 0 0 3px #fff; }
.ssp-views__hub strong { color: #fff; font-size: 22px; }
.ssp-views__hub span { color: var(--ssp-on-dark-muted); font-size: 12px; }
.ssp-views__donut-track { stroke: var(--ssp-soft-2); }
.ssp-views__section-card { padding: 15px 18px; }
.ssp-views__section-card:hover { border-color: var(--ssp-navy); box-shadow: 0 14px 32px rgba(27, 20, 68, 0.16); transform: translateY(-2px); }
.ssp-views .ssp-views__section-card:hover > strong { color: var(--ssp-red-deep); }
.ssp-views__section-card > strong { font-size: 18px; transition: color var(--ssp-speed) var(--ssp-ease); }

/* coverage: filled cells in navy, empty cells quiet */
.ssp-views__coverage h2::after, .ssp-reader__content .sectec-content__block > h2::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--ssp-red); }
.ssp-views__table-scroll td.has-coverage { background: var(--ssp-navy-tint); color: var(--ssp-navy); font-weight: 700; }
.ssp-views__table-scroll td.no-coverage { color: var(--ssp-border-strong); font-size: 12px; }
.ssp-views__table-scroll tbody tr:hover td.has-coverage { background: #e2e0f0; }
.ssp-views__table-scroll tbody tr:hover td.no-coverage { background: var(--ssp-soft); }

/* knowledgebase: stat cards straddle the band; filters sit on a soft panel, results on white */
.ssp-kb { margin-top: 0; }
.ssp-kb__tiles { margin: calc(-52px - clamp(18px, 3vw, 32px)) 0 4px; }
.ssp-kb__tile { gap: 6px; padding: 16px 20px 18px; box-shadow: var(--ssp-shadow-card); }
.ssp-kb__tile-value { font-size: 34px; }
.ssp-kb__card.ssp-kb__filters { background: var(--ssp-soft); }
.ssp-kb .ssp-kb__search input, .ssp-kb .ssp-kb__field select { min-height: 46px; }
.ssp-kb .ssp-kb__submit { min-height: 46px; }
.ssp-kb .ssp-kb__pill { min-height: 40px; }
.ssp-kb .ssp-kb__pill[aria-pressed="true"], .ssp-kb .ssp-kb__pill[aria-pressed="true"]:hover { border-color: var(--ssp-navy); background: var(--ssp-navy); color: #fff; }
.ssp-kb .ssp-kb__pill[aria-pressed="true"] b { background: var(--ssp-red); color: #fff; }
.ssp-kb .ssp-kb__action:hover { border-color: var(--ssp-navy); background: var(--ssp-navy); color: #fff; }
.ssp-kb__mitre { background: #fff; }
.ssp-kb__card.ssp-kb__results { box-shadow: var(--ssp-shadow-card); }
.ssp-kb__table-scroll tbody tr:hover { background: var(--ssp-navy-tint); }
.ssp-kb__badge--section { border-color: var(--ssp-navy); background: var(--ssp-navy); color: #fff; }
.ssp-kb__badge--technology { border-color: var(--ssp-red); background: var(--ssp-red-tint); color: var(--ssp-red-deep); }

/* priority: the summary column is a navy block */
.ssp-views .ssp-priority__row { box-shadow: var(--ssp-shadow-card); }
.ssp-views .ssp-priority__summary { background: var(--ssp-navy); border-color: var(--ssp-navy); color: #fff; }
.ssp-views .ssp-priority__number { color: #fff; font-size: 40px; }
.ssp-views .ssp-priority__summary small { color: var(--ssp-red-on-dark); }
.ssp-views .ssp-priority__summary h3 { color: #fff; }
.ssp-views .ssp-priority__summary span { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1); color: #fff; }
.ssp-views .ssp-priority__legend-item { box-shadow: var(--ssp-shadow-row); }

/* tree panels + related trees: deeper band shadow */
.ssp-section-tech-tree__panel, .ssp-reader__content .sectec-related-tree__section, .ssp-detail-layout__tree .sectec-related-tree__section { box-shadow: var(--ssp-shadow-row); }
.ssp-section-tech-tree__technology:hover { box-shadow: var(--ssp-shadow-row); }

/* detail pages */
.ssp-reader__content .sectec-hierarchy { border-color: var(--ssp-navy); background: var(--ssp-navy); color: #fff; }
.ssp-reader__content .sectec-hierarchy span { color: var(--ssp-red-on-dark); }
.ssp-reader__content .sectec-hierarchy a { color: #fff; }
.ssp-reader__content .sectec-hierarchy a:hover { color: var(--ssp-on-dark-muted); }
.ssp-reader__content .sectec-glossary dt { display: inline-grid; place-items: center; min-width: 56px; height: 32px; padding: 0 10px; border-radius: var(--ssp-radius-row); background: var(--ssp-navy); color: #fff; font-size: 14px; align-self: start; }
.ssp-reader__content .sectec-product-card:hover, .ssp-reader__content .sectec-link-list li:hover { border-color: var(--ssp-border-strong); box-shadow: var(--ssp-shadow-card); }
.ssp-reader__content .sectec-product-card, .ssp-reader__content .sectec-link-list li { transition: box-shadow var(--ssp-speed) var(--ssp-ease), border-color var(--ssp-speed) var(--ssp-ease); }

/* overlay: navy header band */
.ssp-tree-overlay { background: rgba(20, 15, 51, 0.78); }
.ssp-tree-overlay .ssp-tree-overlay__dialog { border-top: 0; }
.ssp-tree-overlay .ssp-tree-overlay__header { background: var(--ssp-navy); border-bottom: 3px solid var(--ssp-red); }
.ssp-tree-overlay .ssp-tree-overlay__header small { color: var(--ssp-red-on-dark); }
.ssp-tree-overlay .ssp-tree-overlay__header h2 { color: #fff; }
.ssp-tree-overlay .ssp-tree-overlay__header button { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1); color: #fff; }
.ssp-tree-overlay .ssp-tree-overlay__header button:hover { border-color: #fff; background: #fff; color: var(--ssp-navy); }

/* vendor page: coverage summary as a navy card */
.ssp-entity-detail { border-color: var(--ssp-navy); background: var(--ssp-navy); color: #fff; }
.ssp-entity-detail > h2 { color: var(--ssp-on-dark-muted); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ssp-entity-detail__coverage { color: #fff; }
.ssp-entity-detail__coverage + p { color: var(--ssp-on-dark-muted); }
.ssp-entity-detail__facets li { border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.08); color: #fff; }
.ssp-entity-detail__facets span { color: var(--ssp-red-on-dark); }
.ssp-entity-detail .ssp-map, .ssp-entity-detail .ssp-tree { border-color: var(--ssp-border); }

/* secondary buttons fill navy on hover */
.ssp-portal .ssp-search .ssp-button--secondary:hover, .ssp-map .ssp-map__actions button:hover, .ssp-tree .ssp-tree__actions button:hover { border-color: var(--ssp-navy); background: var(--ssp-navy); color: #fff; }

@media (max-width: 680px) {
  .ssp-views__header { padding-bottom: 72px; }
  .ssp-views__switcher, .ssp-kb__tiles { margin-top: calc(-40px - clamp(18px, 3vw, 32px)); }
  .ssp-views .ssp-views__switcher .ssp-views__tile { min-height: 64px; }
  .ssp-kb__tile-value { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .ssp-views .ssp-views__switcher .ssp-views__tile:hover, .ssp-views__section-card:hover { transform: none; }
}


/* ========================================================================
   VERZIA 3 — navy-first, expressive. Layer on top of Verzia 1 + 2.
   The hub becomes a navy "command surface": dark header, dark view
   switcher and dark mode panels; content cards float white on navy.
   ======================================================================== */
:root {
  --ssp-navy-deep: #120d33;
  --ssp-navy-2: #241a5e;
  --ssp-navy-3: #2e2374;
  --ssp-on-navy-line: rgba(255, 255, 255, 0.14);
  --ssp-on-navy-fill: rgba(255, 255, 255, 0.07);
  --ssp-grid: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* ---- hub shell: the whole card is navy, with a technical grid + red glow ---- */
.ssp-views {
  border-color: var(--ssp-navy-deep); border-top: var(--ssp-cap) solid var(--ssp-red); color: var(--ssp-text);
  background-color: var(--ssp-navy);
  background-image: radial-gradient(60% 50% at 100% 0%, rgba(236, 28, 36, 0.32), transparent 65%), radial-gradient(40% 40% at 0% 100%, rgba(107, 98, 163, 0.35), transparent 60%), var(--ssp-grid);
  background-size: auto, auto, 56px 56px, 56px 56px;
  box-shadow: 0 30px 70px rgba(3, 3, 20, 0.28);
}
.ssp-views__header { padding-bottom: 28px; border-bottom: 0; background: transparent; }
.ssp-views__header::after { content: ""; position: absolute; left: clamp(18px, 3vw, 32px); right: clamp(18px, 3vw, 32px); bottom: 0; height: 1px; background: var(--ssp-on-navy-line); }
.ssp-views__header h1, .ssp-views__header h2 { position: relative; padding-left: 18px; }
.ssp-views__header h1::before, .ssp-views__header h2::before { content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 5px; border-radius: 3px; background: var(--ssp-red); }
.ssp-views > [data-ssp-views-mode-panel] { padding-top: clamp(20px, 3vw, 28px); }
.ssp-views__switcher { order: -2; margin: 0 0 24px; gap: 14px; }
.ssp-views__description { order: -1; margin: 0 0 24px; color: var(--ssp-on-dark-muted); }
.ssp-views__loading { color: var(--ssp-on-dark-muted); }

/* view switcher: dark glass tiles; the active one lights up red → navy gradient */
.ssp-views .ssp-views__switcher .ssp-views__tile { border: 1px solid var(--ssp-on-navy-line); border-top-width: 1px; background: var(--ssp-on-navy-fill); color: #fff; box-shadow: none; }
.ssp-views .ssp-views__switcher .ssp-views__tile small { color: var(--ssp-on-dark-muted); }
.ssp-views .ssp-views__switcher .ssp-views__tile .ssp-views__badge { background: rgba(255, 255, 255, 0.12); color: #fff; }
.ssp-views .ssp-views__switcher .ssp-views__tile:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); box-shadow: 0 16px 36px rgba(3, 3, 20, 0.3); transform: translateY(-2px); }
.ssp-views .ssp-views__switcher .ssp-views__tile[aria-current="page"], .ssp-views .ssp-views__switcher .ssp-views__tile[aria-current="page"]:hover {
  border-color: transparent; border-top-color: transparent; background: linear-gradient(135deg, var(--ssp-red) 0%, #b5151c 55%, #7a1030 100%); color: #fff; box-shadow: 0 18px 40px rgba(236, 28, 36, 0.35); transform: none;
}
.ssp-views .ssp-views__switcher .ssp-views__tile[aria-current="page"] strong { color: #fff; }
.ssp-views .ssp-views__switcher .ssp-views__tile[aria-current="page"] small { color: rgba(255, 255, 255, 0.82); }
.ssp-views .ssp-views__switcher .ssp-views__tile[aria-current="page"] .ssp-views__badge { background: #fff; color: var(--ssp-red-deep); }

/* map: white section cards float over navy; connectors glow */
.ssp-views__map-layout { padding: 16px 4px 10px; }
.ssp-views__section-card { border-color: transparent; box-shadow: 0 10px 30px rgba(3, 3, 20, 0.28); }
.ssp-views__section-card:hover { border-color: transparent; box-shadow: 0 18px 44px rgba(3, 3, 20, 0.4); }
.ssp-views__section-card::before { border-top-color: rgba(255, 255, 255, 0.28); border-top-style: dashed; }
.ssp-views__section-card::after { border-color: var(--ssp-navy); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 14px rgba(255, 255, 255, 0.35); background: #fff; }
.ssp-views__map-column--left .ssp-views__section-card:nth-child(even)::after, .ssp-views__map-column--right .ssp-views__section-card:nth-child(odd)::after { background: var(--ssp-red-tint); }
.ssp-views__hub { background: var(--ssp-navy-deep); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.06), 0 0 0 1px var(--ssp-on-navy-line), 0 24px 60px rgba(3, 3, 20, 0.5); }
.ssp-views__donut-track { stroke: rgba(255, 255, 255, 0.1); }
.ssp-views__donut-arc { stroke: color-mix(in srgb, #fff calc(100% - var(--ssp-i, 0) * 5.5%), var(--ssp-red)); }
.ssp-views__donut-arc:nth-of-type(odd) { stroke: color-mix(in srgb, color-mix(in srgb, #fff calc(100% - var(--ssp-i, 0) * 5.5%), var(--ssp-red)) 72%, var(--ssp-navy)); }
.ssp-views__hub-center { inset: 21%; background: var(--ssp-navy-deep); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); }
.ssp-views__hub strong { color: #fff; }
.ssp-views__hub span { color: var(--ssp-on-dark-muted); }

/* coverage: dark frame, white matrix inside */
.ssp-views__coverage h2 { color: #fff; }
.ssp-views__coverage h2::after { background: var(--ssp-red); }
.ssp-views__coverage header p { color: var(--ssp-on-dark-muted); }
.ssp-views__table-scroll { border-color: transparent; box-shadow: 0 16px 40px rgba(3, 3, 20, 0.3); }
.ssp-views__table-scroll table { background: #fff; }
.ssp-views__table-scroll thead th { background: var(--ssp-navy-deep); }
.ssp-views__table-scroll thead th:first-child { background: var(--ssp-navy-deep); }

/* priority: legend cards dark, rows white with navy summary */
.ssp-views .ssp-priority__legend-item { border-color: var(--ssp-on-navy-line); background: var(--ssp-on-navy-fill); box-shadow: none; }
.ssp-views .ssp-priority__legend-item--data { --ssp-priority-ink: #b9b1ff; }
.ssp-views .ssp-priority__legend-item--infrastruktura { --ssp-priority-ink: #cbc3ff; }
.ssp-views .ssp-priority__legend-item--ludia_a_zariadenia { --ssp-priority-ink: var(--ssp-red-on-dark); }
.ssp-views .ssp-priority__legend-item small { color: var(--ssp-on-dark-muted); }
.ssp-views .ssp-priority__row { border-color: transparent; box-shadow: 0 16px 40px rgba(3, 3, 20, 0.3); }
.ssp-views .ssp-priority__summary { background: linear-gradient(180deg, var(--ssp-navy-2), var(--ssp-navy-deep)); }
.ssp-views .ssp-priority__number { font-size: 44px; letter-spacing: -0.02em; }

/* tree forest: dark panels with white technology rows */
.ssp-section-tech-tree__panel { border-color: var(--ssp-on-navy-line); background: var(--ssp-navy-deep); box-shadow: 0 16px 40px rgba(3, 3, 20, 0.3); }
.ssp-tree__forest .ssp-section-tech-tree__root { background: transparent; border-bottom-color: var(--ssp-red); }
.ssp-tree__forest .ssp-section-tech-tree ul { border-left-color: rgba(255, 255, 255, 0.22); }
.ssp-section-tech-tree .ssp-tree__forest .ssp-section-tech-tree__technology, .ssp-tree__forest .ssp-section-tech-tree .ssp-section-tech-tree__technology { border-color: transparent; background: #fff; color: var(--ssp-navy); }
.ssp-tree__forest .ssp-section-tech-tree .ssp-section-tech-tree__technology strong { color: var(--ssp-navy); }
.ssp-tree__forest .ssp-section-tech-tree .ssp-section-tech-tree__technology:hover strong { color: var(--ssp-red-deep); }
.ssp-tree__forest .ssp-section-tech-tree__technology::before { border-top-color: rgba(255, 255, 255, 0.22); }
.ssp-tree__forest .ssp-section-tech-tree .ssp-section-tech-tree__technology:hover { background: var(--ssp-red-tint); }
.ssp-tree__forest .ssp-section-tech-tree__vendor-count { color: var(--ssp-on-dark-muted); }
.ssp-tree__forest .ssp-section-tech-tree .ssp-section-tech-tree__vendors a { border-color: var(--ssp-on-navy-line); background: var(--ssp-on-navy-fill); color: #fff; }
.ssp-tree__forest .ssp-section-tech-tree .ssp-section-tech-tree__vendors a:hover { border-color: #fff; background: #fff; color: var(--ssp-navy); }

/* knowledgebase: dark stat tiles, white filter + results cards */
.ssp-kb__tiles { margin: 0 0 4px; }
.ssp-kb__tile { border-color: var(--ssp-on-navy-line); border-top-color: var(--ssp-red); background: var(--ssp-on-navy-fill); box-shadow: none; }
.ssp-kb__tile-label { color: var(--ssp-on-dark-muted); }
.ssp-kb__tile-value { color: #fff; font-size: 38px; }
.ssp-kb__card { border-color: transparent; box-shadow: 0 16px 40px rgba(3, 3, 20, 0.3); }
.ssp-kb__card.ssp-kb__filters { background: #fff; }
.ssp-kb__card-header h2 { position: relative; padding-left: 14px; }
.ssp-kb__card-header h2::before { content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px; border-radius: 2px; background: var(--ssp-red); }
.ssp-kb__mitre { background: var(--ssp-soft); }
.ssp-kb__table-scroll thead th { background: var(--ssp-navy-deep); }
.ssp-kb__pager { color: var(--ssp-on-dark-muted); }
.ssp-kb__pager .ssp-kb__action { border-color: var(--ssp-on-navy-line); background: var(--ssp-on-navy-fill); color: #fff; }
.ssp-kb__pager .ssp-kb__action:hover { border-color: #fff; background: #fff; color: var(--ssp-navy); }
.ssp-kb__pager .ssp-kb__action[aria-disabled="true"], .ssp-kb__pager .ssp-kb__action[aria-disabled="true"]:hover { border-color: var(--ssp-on-navy-line); background: transparent; color: rgba(255, 255, 255, 0.4); }
.ssp-kb__hint, .ssp-kb__empty, .ssp-kb__status { color: var(--ssp-muted); }
.ssp-kb__notice, .ssp-views__notice { border-color: var(--ssp-on-navy-line); background: var(--ssp-on-navy-fill); color: var(--ssp-on-dark-muted); }

/* ---- detail pages: dark modebar strip, red-rule headings ---- */
.ssp-modebar .ssp-views__modes { border-color: var(--ssp-border-strong); background: #fff; box-shadow: var(--ssp-shadow-row); }
.ssp-detail-layout__tree .ssp-section-tech-tree__panel, .ssp-detail-layout__tree .sectec-related-tree__section { background: #fff; border-color: var(--ssp-border); box-shadow: var(--ssp-shadow-card); }
.ssp-detail-layout__tree .ssp-section-tech-tree__root, .ssp-detail-layout__tree .sectec-related-tree__section h3 { background: linear-gradient(135deg, var(--ssp-navy-2), var(--ssp-navy)); }
.ssp-reader__content { border-top: 0; overflow: hidden; }
.ssp-reader__content .sectec-content__header {
  margin: calc(-1 * clamp(20px, 4vw, 52px)) calc(-1 * clamp(20px, 4vw, 52px)) 36px; padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 52px) clamp(24px, 3vw, 36px);
  border-bottom: 4px solid var(--ssp-red); color: #fff;
  background-color: var(--ssp-navy); background-image: radial-gradient(60% 80% at 100% 0%, rgba(236, 28, 36, 0.3), transparent 62%), var(--ssp-grid); background-size: auto, 56px 56px, 56px 56px;
}
.ssp-reader__content .sectec-content__header h1, .ssp-reader__content .sectec-content__header h2, .ssp-reader__content .sectec-content__header h3 { color: #fff; }
.ssp-reader__content .sectec-content__header .sectec-eyebrow, .ssp-reader__content .sectec-content__header .sectec-content__eyebrow { color: var(--ssp-red-on-dark); }
.ssp-reader__content .sectec-content__header .sectec-lead { color: var(--ssp-on-dark-muted); }
.ssp-reader__content .sectec-content__header .sectec-hierarchy { border-color: var(--ssp-on-navy-line); background: var(--ssp-on-navy-fill); color: var(--ssp-on-dark-muted); }
.ssp-reader__content .sectec-content__header .sectec-hierarchy span + a, .ssp-reader__content .sectec-content__header .sectec-hierarchy a { color: #fff; }
.ssp-reader__content .sectec-content__header .sectec-section-visual { border-color: transparent; box-shadow: 0 16px 40px rgba(3, 3, 20, 0.3); }
.ssp-reader__content .sectec-content__header .sectec-vendor-logo-frame { border-color: transparent; box-shadow: 0 16px 40px rgba(3, 3, 20, 0.3); }
.ssp-reader__content .sectec-content__header a, .ssp-detail-layout .ssp-reader__content .sectec-content__header a { color: #fff; }
.ssp-reader__content .sectec-glossary > div, .ssp-reader__content .sectec-content__glossary > * { background: #fff; box-shadow: var(--ssp-shadow-row); }
.ssp-reader__content .sectec-glossary dt { background: linear-gradient(135deg, var(--ssp-navy-2), var(--ssp-navy)); }
.ssp-reader__content .sectec-product-card { border-top: 0; background: linear-gradient(180deg, var(--ssp-navy-tint), #fff 48%); }
.ssp-reader__content .sectec-link-list li::before { box-shadow: 0 0 0 4px var(--ssp-red-tint); }

/* overlay dialog and vendor coverage card get the grid texture too */
.ssp-tree-overlay .ssp-tree-overlay__header, .ssp-entity-detail { background-image: radial-gradient(60% 80% at 100% 0%, rgba(236, 28, 36, 0.3), transparent 62%), var(--ssp-grid); background-size: auto, 56px 56px, 56px 56px; background-color: var(--ssp-navy); }
.ssp-entity-detail .ssp-map, .ssp-entity-detail .ssp-tree { border-top-color: var(--ssp-red); }

@media (max-width: 680px) {
  .ssp-views__header { padding-bottom: 20px; }
  .ssp-views__switcher, .ssp-kb__tiles { margin-top: 0; }
  .ssp-kb__tile-value { font-size: 30px; }
  .ssp-views .ssp-priority__number { font-size: 36px; }
}

/* Cascade containment for links: the theme's `.elementor-kit-8 a` (0,1,1) loads after this file, so portal links state their colour at ≥ (0,2,1). */
.ssp-views .ssp-views__hub a, .ssp-views .ssp-views__section-counts a { color: inherit; }
/* Safety net for classless anchors: must stay below the theme's (0,1,1) but never beat the explicit portal rules above, hence :where(). */
.ssp-views :where(a:not([class])), .ssp-kb :where(a:not([class])), .ssp-section-tech-tree :where(a:not([class])), .ssp-detail-layout__tree :where(a:not([class])), .ssp-entity-detail :where(a:not([class])) { color: inherit; }


/* ========================================================================
   VERZIA 4 — navy dominates the whole portal. Layer on top of Verzia 1–3.
   Every portal surface (hub, knowledgebase, detail pages, overlay) sits on
   navy; red is reduced to rules, dots and the primary button; text and
   controls are white-on-navy. Reading content keeps a white card so long
   texts stay comfortable.
   ======================================================================== */
:root { --ssp-navy-4: #352a86; --ssp-on-navy-text: #e6e4f1; }

/* --- hub: deeper navy, stronger grid, dark tiles everywhere --- */
.ssp-views { background-color: var(--ssp-navy-deep); background-image: radial-gradient(70% 55% at 100% 0%, rgba(53, 42, 134, 0.75), transparent 62%), radial-gradient(45% 45% at 0% 100%, rgba(236, 28, 36, 0.18), transparent 60%), var(--ssp-grid); }
.ssp-views .ssp-views__switcher .ssp-views__tile[aria-current="page"], .ssp-views .ssp-views__switcher .ssp-views__tile[aria-current="page"]:hover { background: linear-gradient(135deg, var(--ssp-navy-4) 0%, var(--ssp-navy-2) 100%); border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 18px 40px rgba(3, 3, 20, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ssp-views .ssp-views__switcher .ssp-views__tile[aria-current="page"] .ssp-views__badge { background: var(--ssp-red); color: #fff; }

/* map: section cards become navy glass with white type */
.ssp-views .ssp-views__section-card, .ssp-views__section-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)); border: 1px solid var(--ssp-on-navy-line); box-shadow: none; color: #fff; }
.ssp-views .ssp-views__section-card:hover, .ssp-views__section-card:hover { background: var(--ssp-navy-4); border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 18px 44px rgba(3, 3, 20, 0.45); }
.ssp-views__section-card > strong { color: #fff; }
.ssp-views .ssp-views__section-card:hover > strong { color: #fff; }
.ssp-views__section-top { color: var(--ssp-on-dark-muted); }
.ssp-views__section-top b { background: var(--ssp-red); color: #fff; }
.ssp-views__section-counts { color: var(--ssp-on-dark-muted); }
.ssp-views__section-card::after { border-color: var(--ssp-navy-deep); }
.ssp-views__hub { background: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(3, 3, 20, 0.5); }
.ssp-views__donut-track { stroke: var(--ssp-navy-tint); }
.ssp-views__donut-arc { stroke: color-mix(in srgb, var(--ssp-navy) calc(100% - var(--ssp-i, 0) * 6%), #b9b1ff); }
.ssp-views__donut-arc:nth-of-type(odd) { stroke: color-mix(in srgb, color-mix(in srgb, var(--ssp-navy) calc(100% - var(--ssp-i, 0) * 6%), #b9b1ff) 80%, var(--ssp-red)); }
.ssp-views__hub-center { background: var(--ssp-navy); box-shadow: inset 0 0 0 3px #fff; }
.ssp-views__map-column--left .ssp-views__section-card:nth-child(even)::after, .ssp-views__map-column--right .ssp-views__section-card:nth-child(odd)::after { background: #b9b1ff; }

/* coverage: navy matrix */
.ssp-views__table-scroll table { background: var(--ssp-navy); color: #fff; }
.ssp-views__table-scroll th, .ssp-views__table-scroll td { border-color: var(--ssp-on-navy-line); }
.ssp-views__table-scroll th:first-child { background: var(--ssp-navy); }
.ssp-views__table-scroll tbody tr:hover th:first-child { background: var(--ssp-navy-2); }
.ssp-views .ssp-views__table-scroll tbody th a, .ssp-views__table-scroll tbody th a { color: #fff; }
.ssp-views .ssp-views__table-scroll tbody th a:hover, .ssp-views__table-scroll tbody th a:hover { color: var(--ssp-red-on-dark); }
.ssp-views__table-scroll tbody th small { color: var(--ssp-on-dark-muted); }
.ssp-views__table-scroll td.has-coverage { background: var(--ssp-navy-4); color: #fff; }
.ssp-views__table-scroll tbody tr:hover td.has-coverage { background: #4236a0; }
.ssp-views .ssp-views__table-scroll td.no-coverage { background: transparent; color: rgba(255, 255, 255, 0.35); }
.ssp-views__table-scroll tbody tr:hover td.no-coverage { background: var(--ssp-navy-2); }
.ssp-views__scroll-hint { color: var(--ssp-on-dark-muted); }
.ssp-views__scroll-hint > span { border-color: var(--ssp-on-navy-line); background: rgba(255, 255, 255, 0.08); }
.ssp-views__scroll-hint kbd { border-color: rgba(255, 255, 255, 0.5); }
.ssp-views__scroll-hint.is-nudged > span { border-color: var(--ssp-red); background: rgba(255, 255, 255, 0.14); color: #fff; }

/* priority: pillar panels navy; cards white for legibility */
.ssp-views .ssp-priority__row { background: var(--ssp-navy); border-color: var(--ssp-on-navy-line); }
.ssp-views .ssp-priority__pillar { border-color: var(--ssp-on-navy-line); background: rgba(255, 255, 255, 0.05); }
.ssp-views .ssp-priority__pillar h4 { background: rgba(255, 255, 255, 0.08); color: #fff; }
.ssp-views .ssp-priority__pillar--data h4 { box-shadow: inset 0 -3px 0 #b9b1ff; }
.ssp-views .ssp-priority__pillar--infrastruktura h4 { box-shadow: inset 0 -3px 0 #cbc3ff; }
.ssp-views .ssp-priority__pillar--ludia_a_zariadenia h4 { box-shadow: inset 0 -3px 0 var(--ssp-red); }
.ssp-views .ssp-priority__card { border-color: transparent; }
.ssp-views a.ssp-priority__card:hover { border-color: #fff; background: #fff; }
.ssp-views .ssp-priority__legend-item--data, .ssp-views .ssp-priority__pillar--data { --ssp-priority-ink: var(--ssp-navy); --ssp-priority-pale: var(--ssp-navy-tint); }
.ssp-views .ssp-priority__legend-item--infrastruktura, .ssp-views .ssp-priority__pillar--infrastruktura { --ssp-priority-ink: var(--ssp-violet); --ssp-priority-pale: var(--ssp-violet-tint); }
.ssp-views .ssp-priority__legend-item--data strong { color: #b9b1ff; }
.ssp-views .ssp-priority__legend-item--infrastruktura strong { color: #cbc3ff; }

/* tree forest: navy panels, navy technology rows */
.ssp-tree__forest .ssp-section-tech-tree__panel { background: var(--ssp-navy); }
.ssp-section-tech-tree .ssp-tree__forest .ssp-section-tech-tree__technology, .ssp-tree__forest .ssp-section-tech-tree .ssp-section-tech-tree__technology { background: rgba(255, 255, 255, 0.08); border-color: var(--ssp-on-navy-line); color: #fff; }
.ssp-tree__forest .ssp-section-tech-tree .ssp-section-tech-tree__technology strong { color: #fff; }
.ssp-tree__forest .ssp-section-tech-tree .ssp-section-tech-tree__technology small { color: var(--ssp-on-dark-muted); }
.ssp-tree__forest .ssp-section-tech-tree .ssp-section-tech-tree__technology:hover { background: #fff; border-color: #fff; }
.ssp-tree__forest .ssp-section-tech-tree .ssp-section-tech-tree__technology:hover strong { color: var(--ssp-navy); }
.ssp-tree__forest .ssp-section-tech-tree .ssp-section-tech-tree__technology:hover small { color: var(--ssp-muted); }

/* knowledgebase: filters + results on navy; inputs white */
.ssp-kb__card, .ssp-kb__card.ssp-kb__filters { background: var(--ssp-navy); border-color: var(--ssp-on-navy-line); color: #fff; }
.ssp-kb__card-header h2 { color: #fff; }
.ssp-kb__count, .ssp-kb__status, .ssp-kb__field > label, .ssp-kb__label, .ssp-kb__hint, .ssp-kb__empty { color: var(--ssp-on-dark-muted); }
.ssp-kb .ssp-kb__search input, .ssp-kb .ssp-kb__field select { border-color: transparent; }
.ssp-kb .ssp-kb__search input:focus, .ssp-kb .ssp-kb__field select:focus { border-color: var(--ssp-red); }
.ssp-kb .ssp-kb__pill { border-color: var(--ssp-on-navy-line); background: rgba(255, 255, 255, 0.08); color: #fff; }
.ssp-kb .ssp-kb__pill b { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ssp-kb .ssp-kb__pill:hover { border-color: #fff; background: #fff; color: var(--ssp-navy); }
.ssp-kb .ssp-kb__pill:hover b { background: var(--ssp-navy-tint); color: var(--ssp-navy); }
.ssp-kb .ssp-kb__pill[aria-pressed="true"], .ssp-kb .ssp-kb__pill[aria-pressed="true"]:hover { border-color: #fff; background: #fff; color: var(--ssp-navy); }
.ssp-kb .ssp-kb__pill[aria-pressed="true"] b { background: var(--ssp-red); color: #fff; }
.ssp-kb .ssp-kb__pill:disabled, .ssp-kb .ssp-kb__pill:disabled:hover { border-color: var(--ssp-on-navy-line); background: transparent; color: rgba(255, 255, 255, 0.35); }
.ssp-kb .ssp-kb__action { border-color: var(--ssp-on-navy-line); background: rgba(255, 255, 255, 0.08); color: #fff; }
.ssp-kb .ssp-kb__action:hover { border-color: #fff; background: #fff; color: var(--ssp-navy); }
.ssp-kb__mitre { border-color: var(--ssp-on-navy-line); background: rgba(255, 255, 255, 0.06); }
.ssp-kb__mitre > summary, .ssp-kb__techniques label { color: #fff; }
.ssp-kb__techniques b { color: var(--ssp-on-dark-muted); }
.ssp-kb__table-scroll { border-color: var(--ssp-on-navy-line); box-shadow: none; }
.ssp-kb__table-scroll table { background: var(--ssp-navy); }
.ssp-kb__table-scroll tbody tr { background: var(--ssp-navy); }
.ssp-kb__table-scroll th, .ssp-kb__table-scroll td { border-color: var(--ssp-on-navy-line); }
.ssp-kb__table-scroll thead th { background: var(--ssp-navy-deep); }
.ssp-kb__table-scroll tbody tr:hover { background: var(--ssp-navy-2); }
.ssp-kb .ssp-kb__cell-page a { color: #fff; }
.ssp-kb .ssp-kb__cell-page a:hover { color: var(--ssp-red-on-dark); }
.ssp-kb__cell-page small { color: var(--ssp-on-dark-muted); }
.ssp-kb__lang { color: var(--ssp-on-dark-muted); }
.ssp-kb__badge { border-color: var(--ssp-on-navy-line); background: rgba(255, 255, 255, 0.1); color: #fff; }
.ssp-kb__badge--section { border-color: #fff; background: #fff; color: var(--ssp-navy); }
.ssp-kb__badge--technology { border-color: var(--ssp-red); background: var(--ssp-red); color: #fff; }
.ssp-kb__badge--vendor { border-color: #b9b1ff; background: rgba(185, 177, 255, 0.18); color: #e6e4f1; }
.ssp-kb__badge--attack { border-color: var(--ssp-red-on-dark); background: rgba(236, 28, 36, 0.22); color: #ffd3d5; }
.ssp-kb__chip { border-color: var(--ssp-on-navy-line); background: transparent; color: var(--ssp-on-navy-text); }
.ssp-kb__chip--section { background: #fff; color: var(--ssp-navy); }
.ssp-kb__no-results td { color: var(--ssp-on-dark-muted); }
.ssp-kb__skeleton { background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%); background-size: 240px 100%; }

/* --- detail pages: navy aside + navy mode bar; reader stays white with navy header band --- */
.ssp-modebar .ssp-views__modes { border-color: var(--ssp-on-navy-line); background: var(--ssp-navy); box-shadow: var(--ssp-shadow-card); }
.ssp-modebar .ssp-views__mode { color: #fff; }
.ssp-modebar .ssp-views__mode:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.ssp-modebar .ssp-views__mode[aria-current="page"], .ssp-modebar .ssp-views__mode[aria-current="page"]:hover { background: #fff; color: var(--ssp-navy); }
.ssp-detail-layout__tree .ssp-section-tech-tree__panel, .ssp-detail-layout__tree .sectec-related-tree__section { background: var(--ssp-navy); border-color: var(--ssp-on-navy-line); }
.ssp-detail-layout__tree > .sectec-content__block > h2, .ssp-detail-layout__tree .ssp-section-tech-tree h2 { color: var(--ssp-navy); }
.ssp-detail-layout__tree .ssp-section-tech-tree__root, .ssp-detail-layout__tree .sectec-related-tree__section h3 { background: var(--ssp-navy-deep); }
.ssp-detail-layout__tree .ssp-section-tech-tree ul, .ssp-detail-layout__tree .sectec-related-tree__technologies { border-left-color: rgba(255, 255, 255, 0.22); }
.ssp-section-tech-tree .ssp-detail-layout__tree .ssp-section-tech-tree__technology, .ssp-detail-layout__tree .ssp-section-tech-tree .ssp-section-tech-tree__technology { background: rgba(255, 255, 255, 0.08); border-color: var(--ssp-on-navy-line); color: #fff; }
.ssp-detail-layout__tree .ssp-section-tech-tree .ssp-section-tech-tree__technology strong { color: #fff; }
.ssp-detail-layout__tree .ssp-section-tech-tree .ssp-section-tech-tree__technology small { color: var(--ssp-on-dark-muted); }
.ssp-detail-layout__tree .ssp-section-tech-tree .ssp-section-tech-tree__technology::before { border-top-color: rgba(255, 255, 255, 0.22); }
.ssp-detail-layout__tree .ssp-section-tech-tree .ssp-section-tech-tree__technology:hover { background: #fff; border-color: #fff; }
.ssp-detail-layout__tree .ssp-section-tech-tree .ssp-section-tech-tree__technology:hover strong { color: var(--ssp-navy); }
.ssp-detail-layout__tree .ssp-section-tech-tree .ssp-section-tech-tree__technology:hover small { color: var(--ssp-muted); }
.ssp-detail-layout__tree .ssp-section-tech-tree .ssp-section-tech-tree__technology.is-current, .ssp-detail-layout__tree .ssp-section-tech-tree .ssp-section-tech-tree__technology.is-current:hover { background: #fff; border-color: #fff; box-shadow: inset 3px 0 0 var(--ssp-red); }
.ssp-detail-layout__tree .ssp-section-tech-tree .ssp-section-tech-tree__technology.is-current strong { color: var(--ssp-navy); }
.ssp-detail-layout__tree .ssp-section-tech-tree .ssp-section-tech-tree__technology.is-current small { color: var(--ssp-red-deep); }
.ssp-detail-layout__tree .ssp-section-tech-tree__vendor-count { color: var(--ssp-on-dark-muted); }
.ssp-detail-layout__tree .ssp-section-tech-tree .ssp-section-tech-tree__vendors a { border-color: var(--ssp-on-navy-line); background: rgba(255, 255, 255, 0.08); color: #fff; }
.ssp-detail-layout__tree .ssp-section-tech-tree .ssp-section-tech-tree__vendors a:hover { border-color: #fff; background: #fff; color: var(--ssp-navy); }
.ssp-detail-layout__tree .sectec-related-tree__technology { background: rgba(255, 255, 255, 0.08); border-color: var(--ssp-on-navy-line); }
.ssp-detail-layout__tree a.sectec-related-tree__technology-link, .ssp-detail-layout__tree .sectec-related-tree__technology-link small { color: #fff; }
.ssp-detail-layout__tree .sectec-related-tree__technology-link small { color: var(--ssp-on-dark-muted); }
.ssp-detail-layout__tree .sectec-related-tree__technology.is-current { background: #fff; border-color: #fff; }
.ssp-detail-layout__tree .sectec-related-tree__technology.is-current a.sectec-related-tree__technology-link { color: var(--ssp-navy); }
.ssp-detail-layout__tree .sectec-related-tree__technology.is-current .sectec-related-tree__technology-link { color: var(--ssp-navy); }
.ssp-detail-layout__tree .sectec-related-tree__technology.is-current .sectec-related-tree__technology-link small { color: var(--ssp-muted); }
.ssp-detail-layout__tree .sectec-related-tree__technology.is-current .sectec-related-tree__current { color: var(--ssp-red-deep); font-weight: 600; }
.ssp-detail-layout__tree .sectec-related-tree__technology.is-current .sectec-related-tree__vendors li a { border-color: var(--ssp-border); background: var(--ssp-soft); color: var(--ssp-navy); }
.ssp-detail-layout__tree .sectec-related-tree__technology.is-current .sectec-related-tree__vendors li a:hover { border-color: var(--ssp-red); background: #fff; color: var(--ssp-red-deep); }
.ssp-detail-layout__tree .sectec-related-tree__vendors li a { border-color: var(--ssp-on-navy-line); background: rgba(255, 255, 255, 0.08); color: #fff; }
.ssp-detail-layout__tree .sectec-related-tree__vendors li a:hover { border-color: #fff; background: #fff; color: var(--ssp-navy); }
.ssp-detail-layout__tree .sectec-related-tree__section > p { color: var(--ssp-on-dark-muted); }
.ssp-reader__content .sectec-content__header { background-color: var(--ssp-navy-deep); background-image: radial-gradient(70% 90% at 100% 0%, rgba(53, 42, 134, 0.8), transparent 62%), var(--ssp-grid); }
.ssp-reader__content .sectec-glossary > div, .ssp-reader__content .sectec-content__glossary > * { background: var(--ssp-navy); border-color: var(--ssp-navy); color: #fff; }
.ssp-reader__content .sectec-glossary dt { background: #fff; color: var(--ssp-navy); }
.ssp-reader__content .sectec-glossary dd strong { color: var(--ssp-red-on-dark); }
.ssp-reader__content .sectec-glossary dd span { color: var(--ssp-on-dark-muted); }
.ssp-reader__content .sectec-product-card { background: var(--ssp-navy); border-color: var(--ssp-navy); color: #fff; }
.ssp-reader__content .sectec-product-card h3 { color: #fff; }
.ssp-reader__content .sectec-product-card p { color: var(--ssp-on-dark-muted); }
.ssp-reader__content .sectec-vendor-list li a, .ssp-reader__content .sectec-content__vendors li a { border-color: var(--ssp-navy); background: var(--ssp-navy); color: #fff; }
.ssp-reader__content .sectec-vendor-list li a:hover, .ssp-reader__content .sectec-content__vendors li a:hover { border-color: var(--ssp-red); background: var(--ssp-red); color: #fff; }
.ssp-reader__content .sectec-link-list li { background: #fff; border-color: var(--ssp-border); }
.ssp-reader__content .sectec-link-list li:hover { background: var(--ssp-navy-tint); border-color: var(--ssp-navy); }
.ssp-reader__content .sectec-related-tree__section { border-color: var(--ssp-navy); }
.ssp-reader__content .sectec-related-tree__technologies { background: var(--ssp-navy); }
.ssp-reader__content .sectec-related-tree__technology { background: rgba(255, 255, 255, 0.08); border-color: var(--ssp-on-navy-line); }
.ssp-reader__content a.sectec-related-tree__technology-link { color: #fff; }
.ssp-reader__content .sectec-related-tree__technology-link small, .ssp-reader__content .sectec-related-tree__current { color: var(--ssp-on-dark-muted); }
.ssp-reader__content .sectec-related-tree__technology.is-current { background: #fff; border-color: #fff; }
.ssp-reader__content .sectec-related-tree__technology.is-current a.sectec-related-tree__technology-link { color: var(--ssp-navy); }
.ssp-reader__content .sectec-related-tree__technology.is-current .sectec-related-tree__technology-link { color: var(--ssp-navy); }
.ssp-reader__content .sectec-related-tree__technology.is-current .sectec-related-tree__technology-link small { color: var(--ssp-muted); }
.ssp-reader__content .sectec-related-tree__technology.is-current .sectec-related-tree__current { color: var(--ssp-red-deep); font-weight: 600; }
.ssp-reader__content .sectec-related-tree__technology.is-current .sectec-related-tree__vendors li a { border-color: var(--ssp-border); background: var(--ssp-soft); color: var(--ssp-navy); }
.ssp-reader__content .sectec-related-tree__technology.is-current .sectec-related-tree__vendors li a:hover { border-color: var(--ssp-red); background: #fff; color: var(--ssp-red-deep); }
.ssp-reader__content .sectec-related-tree__vendors li a { border-color: var(--ssp-on-navy-line); background: rgba(255, 255, 255, 0.08); color: #fff; }
.ssp-reader__content .sectec-related-tree__vendors li a:hover { border-color: #fff; background: #fff; color: var(--ssp-navy); }
.ssp-reader__content .sectec-hierarchy { background: var(--ssp-navy-4); border-color: transparent; }

/* overlay + vendor coverage: fully navy */
.ssp-tree-overlay .ssp-tree-overlay__dialog { background: var(--ssp-navy); border-color: var(--ssp-on-navy-line); }
.ssp-tree-overlay .ssp-tree-overlay__body { background: var(--ssp-navy); }
.ssp-tree-overlay .ssp-tree-overlay__footer { background: var(--ssp-navy); border-top-color: var(--ssp-on-navy-line); }
.ssp-entity-detail { background-color: var(--ssp-navy-deep); }
.ssp-reader__content > .ssp-entity-detail { margin: 40px 0 0; box-shadow: none; }
.ssp-reader__content > .ssp-entity-detail > h2 { margin: 0 0 6px; color: var(--ssp-on-dark-muted); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.ssp-reader__content > .ssp-entity-detail > h2::after { content: none; }
.ssp-reader__content > .ssp-entity-detail > p { margin: 0; color: #fff; font-size: 17px; }
.ssp-map, .ssp-tree { background: var(--ssp-navy); border-color: var(--ssp-on-navy-line); color: #fff; }
.ssp-map__header h2, .ssp-tree__header h2 { color: #fff; }
.ssp-map__switch, .ssp-tree__switch { border-color: var(--ssp-on-navy-line); background: rgba(255, 255, 255, 0.08); }
.ssp-map .ssp-map__switch button, .ssp-tree .ssp-tree__switch button { color: #fff; }
.ssp-map .ssp-map__switch button:hover, .ssp-tree .ssp-tree__switch button:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ssp-map .ssp-map__switch button[aria-pressed="true"], .ssp-tree .ssp-tree__switch button[aria-pressed="true"], .ssp-map .ssp-map__switch button[aria-pressed="true"]:hover, .ssp-tree .ssp-tree__switch button[aria-pressed="true"]:hover { background: #fff; color: var(--ssp-navy); }
.ssp-map__status, .ssp-tree__status { background: rgba(255, 255, 255, 0.08); color: var(--ssp-on-dark-muted); }
.ssp-map .ssp-map__actions button, .ssp-tree .ssp-tree__actions button { border-color: var(--ssp-on-navy-line); background: rgba(255, 255, 255, 0.08); color: #fff; }
.ssp-map .ssp-map__actions button:hover, .ssp-tree .ssp-tree__actions button:hover { border-color: #fff; background: #fff; color: var(--ssp-navy); }

/* --- phones: wide tables become cards; no sideways scrolling --- */
@media (max-width: 620px) {
  /* coverage matrix: one card per section listing only the vendors that cover it */
  .ssp-views__table-scroll { overflow: visible; border: 0; border-radius: 0; }
  .ssp-views__table-scroll table, .ssp-views__table-scroll tbody, .ssp-views__table-scroll tr, .ssp-views__table-scroll th, .ssp-views__table-scroll td { display: block; width: auto; min-width: 0; }
  .ssp-views__table-scroll table { background: transparent; }
  .ssp-views__table-scroll thead { display: none; }
  .ssp-views__table-scroll tbody tr { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 14px; border: 1px solid var(--ssp-on-navy-line); border-radius: var(--ssp-radius-card); background: rgba(255, 255, 255, 0.05); }
  .ssp-views__table-scroll tbody th, .ssp-views__table-scroll th:first-child, .ssp-views__table-scroll tbody tr:hover th:first-child { position: static; flex: 1 1 100%; min-width: 0; padding: 0 0 6px; border: 0; background: transparent; }
  .ssp-views__table-scroll td.no-coverage { display: none; }
  .ssp-views__table-scroll td.has-coverage, .ssp-views__table-scroll tbody tr:hover td.has-coverage { padding: 4px 10px; border: 0; border-radius: var(--ssp-radius-pill); font-size: 12px; font-weight: 600; text-align: left; }
  .ssp-views__table-scroll td.has-coverage::before { content: attr(data-label) " · "; font-weight: 700; }

  /* knowledgebase: each result is a card - title, then type + language, then chips */
  .ssp-kb__results.ssp-kb__card { padding: 14px; }
  .ssp-kb__table-scroll { overflow: visible; border: 0; border-radius: 0; }
  .ssp-kb__table-scroll table { min-width: 0; background: transparent; }
  .ssp-kb__table-scroll table, .ssp-kb__table-scroll tbody, .ssp-kb__table-scroll tr, .ssp-kb__table-scroll td { display: block; }
  .ssp-kb__table-scroll thead { display: none; }
  .ssp-kb__table-scroll tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 10px; padding: 14px; border: 1px solid var(--ssp-on-navy-line); border-radius: var(--ssp-radius-card); }
  .ssp-kb__table-scroll tbody tr:last-child { margin-bottom: 0; }
  .ssp-kb__table-scroll th, .ssp-kb__table-scroll td, .ssp-kb__table-scroll tbody tr:last-child td { padding: 0; border: 0; }
  .ssp-kb .ssp-kb__table-scroll tbody > tr:nth-child(n) > td { background: transparent; }
  .ssp-kb__table-scroll td.ssp-kb__cell-page, .ssp-kb__table-scroll td.ssp-kb__cell-chips, .ssp-kb__no-results td, .ssp-kb__skeleton-row td { flex: 1 1 100%; }
  .ssp-kb__no-results td { padding: 24px 0; }

  /* nested navy panels: give the content the width back */
  .ssp-entity-detail { margin-inline: 0; padding: 16px 14px; }
  .ssp-entity-detail .ssp-map, .ssp-entity-detail .ssp-tree { padding: 14px 12px; }
  .ssp-map .ssp-graph-node, .ssp-tree .ssp-graph-node { padding: 14px 14px 14px 30px; }
  .ssp-map .ssp-graph-node::before, .ssp-tree .ssp-graph-node::before { top: 19px; left: 12px; }
}