/* ==========================================================================
   P-SSCRM — Design tokens
   ========================================================================== */
:root {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --text: #1B2430;
  --text-muted: #5B6472;
  --border: #E1E4E9;
  --accent: #2557A7;
  --accent-dark: #17396B;
  --accent-soft: #EAF1FB;
  --accent-fill: #2557A7;        /* solid backgrounds carrying white text */
  --accent-fill-hover: #17396B;
  --code: #0F6E5C;
  --code-soft: #E6F5F1;

  --group-g: #2557A7;
  --group-p: #2F7D4F;
  --group-e: #8A4B2E;
  --group-d: #6B4EA8;
  --group-u: #5B6472;
  --group-g-ink: #2557A7;
  --group-g-tint: #EAF1FB;
  --group-p-ink: #2F7D4F;
  --group-p-tint: #E8F3EC;
  --group-e-ink: #8A4B2E;
  --group-e-tint: #F6ECE4;
  --group-d-ink: #6B4EA8;
  --group-d-tint: #EFEAF8;
  --group-u-ink: #5B6472;
  --group-u-tint: #EDEEF1;

  --role: #52525B;
  --role-tint: #F1F1F3;
  --role-ink: #52525B;
  --mitre: #B3261E;
  --mitre-tint: #FBEAE9;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --max-width: 1120px;
  --radius: 6px;
  --content-top-pad: 2rem;
  --header-height: 52px;
  color-scheme: light dark;
}

/* NOTE: the dark colours are listed twice (the block below and the [data-theme="dark"]
   block after it). Change both together. */
/* Dark colours. Used when the visitor's system is dark (unless they picked light
   with the toggle), or when they picked dark with the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F141B;
    --surface: #171E28;
    --text: #E6EAF0;
    --text-muted: #9AA5B4;
    --border: #2A3441;
    --accent: #8DB4F2;
    --accent-dark: #B9D0F7;
    --accent-soft: #16233A;
    --accent-fill: #2A55A0;
    --accent-fill-hover: #3766BA;
    --code: #5FD0B6;
    --code-soft: #12302A;
    --group-g-ink: #8DB4F2;
    --group-p-ink: #74C79A;
    --group-e-ink: #E0A583;
    --group-d-ink: #B7A2EC;
    --group-u-ink: #A9B2C0;
    --group-g-tint: #16233A;
    --group-p-tint: #14291D;
    --group-e-tint: #2C1F17;
    --group-d-tint: #221B33;
    --group-u-tint: #212833;
    --role-tint: #222229;
    --role-ink: #C4C4CC;
    --mitre: #F28B82;
    --mitre-tint: #33191A;
  }
}
:root[data-theme="dark"] {
  --bg: #0F141B;
  --surface: #171E28;
  --text: #E6EAF0;
  --text-muted: #9AA5B4;
  --border: #2A3441;
  --accent: #8DB4F2;
  --accent-dark: #B9D0F7;
  --accent-soft: #16233A;
  --accent-fill: #2A55A0;
  --accent-fill-hover: #3766BA;
  --code: #5FD0B6;
  --code-soft: #12302A;
  --group-g-ink: #8DB4F2;
  --group-p-ink: #74C79A;
  --group-e-ink: #E0A583;
  --group-d-ink: #B7A2EC;
  --group-u-ink: #A9B2C0;
  --group-g-tint: #16233A;
  --group-p-tint: #14291D;
  --group-e-tint: #2C1F17;
  --group-d-tint: #221B33;
  --group-u-tint: #212833;
  --role-tint: #222229;
  --role-ink: #C4C4CC;
  --mitre: #F28B82;
  --mitre-tint: #33191A;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  min-width: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--text);
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.7rem); font-weight: 700; margin-top: 1.15em; letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; font-weight: 600; margin-top: 1em; }
h4 { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; }

p { margin: 0 0 0.85em; color: var(--text); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.site-banner { display: block; background: var(--accent-fill); color: #fff; }
.site-wordmark {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.1rem 1.5rem 1rem;
  color: #fff !important;
  text-decoration: none !important;
}
/* Logo slot — replace .site-logo-placeholder with an <img> when the mark lands */
.site-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  overflow: hidden;
}
.site-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-logo-placeholder {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
}
.site-wordmark-text { min-width: 0; }
.site-wordmark-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.site-wordmark-expand {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.85;
  margin-top: 0.25rem;
}
.site-wordmark:hover .site-wordmark-name { text-decoration: underline; }

.site-nav-bar {
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1.4rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.site-nav a {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

.hero {
  padding: 2.75rem 0 2.5rem;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
}
.hero .container { padding-top: 0; padding-bottom: 0; }
.hero-brand {
  font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 0.4rem;
}
.hero-expand {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin: 0 0 1.1rem;
}
.hero-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--accent-dark);
  max-width: 42ch;
  margin: 0 0 1.1rem;
}
.hero-lede {
  max-width: 62ch;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}

.btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.55rem 1.2rem;
  background: var(--accent-fill);
  color: #fff !important;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none !important;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--accent-fill-hover); }

main .container { padding-top: var(--content-top-pad); padding-bottom: 2.5rem; }

.home-section .container { padding-top: 0; padding-bottom: 0; }

h1 code,
.code-badge {
  font-family: var(--font-mono);
  font-size: 0.55em;
  font-weight: 600;
  color: var(--code);
  background: var(--code-soft);
  padding: 0.15em 0.5em;
  border-radius: 4px;
  vertical-align: middle;
}

/* Framework page: colour each control/practice/group code by its Group */
.fw-group-g .code-badge { color: var(--group-g-ink); background: var(--group-g-tint); }
.fw-group-p .code-badge { color: var(--group-p-ink); background: var(--group-p-tint); }
.fw-group-e .code-badge { color: var(--group-e-ink); background: var(--group-e-tint); }
.fw-group-d .code-badge { color: var(--group-d-ink); background: var(--group-d-tint); }
.fw-group-u .code-badge { color: var(--group-u-ink); background: var(--group-u-tint); }

.framework-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.framework-badge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.framework-badge a { color: var(--accent); font-weight: 600; }
.mitre-badge { background: var(--mitre-tint); border-color: rgba(179, 38, 30, 0.25); }
.mitre-badge a { color: var(--mitre); }

.version-list {
  margin: 0.4rem 0 0;
  padding: 0 0 0 1.2rem;
}

.version-list li { margin: 0.3rem 0; }

.version-number { font-family: var(--font-mono); font-weight: 600; }

.version-heading {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 1.4rem 0 0;
}

.framework-badge .mapping-ref {
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--text-muted);
}


.framework-index {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  column-gap: 2rem;
}
.framework-index li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.55rem 0.9rem 0.55rem 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.framework-index h2 {
  margin: 0;
  font-size: 0.92rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.framework-index p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
  padding: 2rem 0 2.5rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-bottom: 1rem;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text);
  font-weight: 500;
}
.footer-nav a:hover { color: var(--accent); }
.footer-nav svg { opacity: 0.55; flex-shrink: 0; }
.footer-meta { font-size: 0.78rem; line-height: 1.6; margin: 0.4rem 0 0; max-width: 72ch; }
.footer-meta a { color: var(--accent); }
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
}
.footer-main { min-width: 0; }
.footer-partner {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.footer-partner-logo {
  display: block;
  height: 96px;
  width: auto;
  /* The artwork is dark shapes on a transparent background (no dark-mode
     variant) — without this it disappears against the dark theme's near-black
     footer. */
  background: #fff;
  border-radius: 4px;
  padding: 6px 8px;
}
.footer-partner-link {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}
.footer-partner:hover .footer-partner-link { color: var(--accent); }

@media (max-width: 640px) {
  /* a 5-item question-style nav wraps to several lines on phones —
     pinning it would eat the viewport, so let it scroll away here */
  .site-nav-bar { position: static; }
  .site-nav { gap: 0.15rem 1rem; font-size: 0.88rem; }
  .site-wordmark { padding: 0.9rem 1.25rem 0.85rem; }
  .hero { padding: 2rem 0 1.75rem; }
  main .container { padding-top: 1.25rem; }
  .home-section { padding: 0.9rem 0; }
  .fw-standards { margin-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

#back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 38px;
  padding: 0 0.9rem 0 0.7rem;
  border: none;
  border-radius: 999px;
  background: var(--accent-fill);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
  z-index: 30;
}
#back-to-top span { font-size: 1rem; }

#back-to-top:hover { background: var(--accent-fill-hover); }

#back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ==========================================================================
   Framework page
   ========================================================================== */
.framework-main { max-width: var(--max-width); min-width: 0; }
.framework-main > h1 { margin-bottom: 0.5rem; }

.framework-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1rem 0 1.5rem; }
.framework-controls .reverse-map-filter { margin: 0; }
.framework-controls .expand-all-btn { flex-shrink: 0; width: auto; margin: 0; }
.framework-search-empty { font-size: 0.88rem; color: var(--text-muted); font-style: italic; margin: -1rem 0 1.5rem; }

.expand-all-btn {
  display: block;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.expand-all-btn:hover { color: var(--accent); background: var(--accent-soft); }

.self-assessment-note {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0 2rem;
}
.self-assessment-note h2 { margin-top: 0; font-size: 1.05rem; }
.self-assessment-note p { margin-bottom: 0; }

.fw-group { margin-top: 2rem; scroll-margin-top: calc(var(--header-height) + 1rem); }
.fw-group:first-child { margin-top: 1rem; }
.fw-group-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  list-style: none;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--border);
}
.fw-group-summary::-webkit-details-marker { display: none; }
.fw-group-summary::marker { display: none; content: ""; }
.fw-group-summary::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-left: auto;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  flex-shrink: 0;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.fw-group[open] > .fw-group-summary::after { transform: rotate(45deg); margin-top: -0.35rem; }
.fw-group-summary h2 { margin: 0; padding-bottom: 0; border-bottom: none; flex: 1; min-width: 0; }
.fw-group-body { padding-top: 0.5rem; }

/* Practice: collapsed by default, opens to its description + control list */
.fw-practice {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  scroll-margin-top: calc(var(--header-height) + 1rem);
}
.fw-practice-summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
  transition: background 0.12s ease;
}
.fw-practice-summary:hover { background: var(--bg); }
.fw-practice-summary::-webkit-details-marker { display: none; }
.fw-practice-summary::marker { display: none; content: ""; }
.fw-practice-summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: auto;
  order: 3;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  flex-shrink: 0;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.fw-practice[open] > .fw-practice-summary::after { transform: rotate(45deg); margin-top: -0.25rem; }
.fw-practice-summary h3 { margin: 0; font-size: 1.1rem; flex: 1; min-width: 0; order: 1; }
.fw-practice-count {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  color: #fff;
  background: var(--text-muted);
  flex-shrink: 0;
  order: 2;
}
.fw-group-g .fw-practice-count { background: var(--group-g); }
.fw-group-p .fw-practice-count { background: var(--group-p); }
.fw-group-e .fw-practice-count { background: var(--group-e); }
.fw-group-d .fw-practice-count { background: var(--group-d); }
.fw-group-u .fw-practice-count { background: var(--group-u); }
.fw-practice-body { padding: 0 1.1rem 1rem; border-top: 1px solid var(--border); }
.fw-practice-body > p { margin: 0.85rem 0 0; color: var(--text-muted); }

/* Control: nested, collapsed by default, opens to full detail */
.fw-control {
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  scroll-margin-top: calc(var(--header-height) + 1rem);
}
.fw-control:first-of-type { margin-top: 1rem; }
.fw-control-summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  border-radius: var(--radius);
  transition: background 0.12s ease;
}
.fw-control-summary:hover { background: var(--bg); }
.fw-control-summary::-webkit-details-marker { display: none; }
.fw-control-summary::marker { display: none; content: ""; }
.fw-control-summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  flex-shrink: 0;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.fw-control[open] > .fw-control-summary::after { transform: rotate(45deg); margin-top: -0.2rem; }
.fw-control-body { padding: 0 0.85rem 0.9rem; }
.fw-objective p { margin: 0 0 0.6rem; font-weight: 500; }
.fw-definition { color: var(--text-muted); margin: 0 0 0.75rem; }

.fw-block { margin-top: 0.85rem; }
.fw-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 0.35rem;
}
.fw-questions ul { margin: 0; padding-left: 1.1rem; }
.fw-questions li { margin: 0.2rem 0; }
.role-badge { background: var(--role-tint); border-color: rgba(82, 82, 91, 0.25); }
.role-badge a { color: var(--role-ink); font-weight: 600; }

.fw-standards { margin-top: 2.5rem; }

.reverse-map-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0.5rem; align-items: center; }
.reverse-map-filter {
  display: block;
  width: 100%;
  max-width: 360px;
  padding: 0.5rem 0.75rem 0.5rem 2.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.7rem center;
  background-size: 15px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
}
.reverse-map-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.reverse-map-controls .expand-all-btn { flex-shrink: 0; }
.reverse-map-empty { font-size: 0.88rem; color: var(--text-muted); font-style: italic; margin: 0 0 0.5rem; }

.reverse-map { margin-top: 0.5rem; }
.reverse-map details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.9rem;
  margin: 0.5rem 0;
  background: var(--surface);
}
.reverse-map summary {
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  list-style: none;
}
.reverse-map summary::-webkit-details-marker { display: none; }
.reverse-map summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  flex-shrink: 0;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.reverse-map details[open] > summary::before { transform: rotate(45deg); }
.reverse-map-name { flex: 1; min-width: 0; }
.reverse-map-ratio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.reverse-map-count {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  color: #fff;
  background: var(--accent-fill);
  flex-shrink: 0;
}
.reverse-map-body { margin-top: 0.5rem; }
.reverse-map-full {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-left: 0.4rem;
}
.reverse-map-practice {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0.9rem 0 0.3rem;
}
.reverse-map-practice:first-child { margin-top: 0.3rem; }
.reverse-map-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.3rem 0 0.3rem 1.1rem;
  color: var(--text);
  font-size: 0.92rem;
}
.reverse-map-item:hover { color: var(--accent); }
.reverse-map-item[hidden],
.reverse-map-practice[hidden] { display: none; }
.reverse-map .mapping-ref {
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: var(--text-muted);
}

/* ==========================================================================
   Overview diagram — columns = Groups, expandable tiles = Practices
   ========================================================================== */
.fw-figure {
  margin: 1.5rem 0 0;
}
.fw-diagram {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.7rem;
  align-items: start;
}
.fw-figcaption {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.9rem;
}
.fw-cell-count-unit {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fw-col { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.fw-col-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 4.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  color: #fff !important;
  text-decoration: none !important;
}
.fw-col-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.fw-col-gloss { font-size: 0.72rem; line-height: 1.35; opacity: 0.92; margin-top: 0.2rem; }

.fw-cell {
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.82rem;
  line-height: 1.3;
}
.fw-cell-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.55rem 0.5rem 1.4rem;
  position: relative;
  cursor: pointer;
  border-radius: var(--radius);
  list-style: none;
  transition: background 0.12s ease;
}
.fw-cell-summary::-webkit-details-marker { display: none; }
.fw-cell-summary::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 50%;
  width: 5px; height: 5px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.12s ease;
  opacity: 0.55;
}
.fw-cell[open] > .fw-cell-summary::before { transform: rotate(45deg); }
.fw-cell-summary:hover .fw-cell-name { text-decoration: underline; }
.fw-cell-name { min-width: 0; }
.fw-cell-count {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  color: #fff;
  flex-shrink: 0;
}
.fw-cell-controls {
  list-style: none;
  margin: 0 0.55rem 0.5rem;
  padding: 0.45rem 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}
.fw-cell-controls li { margin: 0.32rem 0; }
.fw-cell-controls a {
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
  color: var(--text);
}
.fw-cell-controls a:hover { color: var(--accent); }
.fw-cell-code {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.88em;
  font-weight: 600;
}
.fw-col-foot { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.35rem; }

.fw-col-g .fw-cell-code { color: var(--group-g-ink); }
.fw-col-p .fw-cell-code { color: var(--group-p-ink); }
.fw-col-e .fw-cell-code { color: var(--group-e-ink); }
.fw-col-d .fw-cell-code { color: var(--group-d-ink); }
.fw-col-u .fw-cell-code { color: var(--group-u-ink); }

.fw-col-g .fw-col-head { background: var(--group-g); }
.fw-col-p .fw-col-head { background: var(--group-p); }
.fw-col-e .fw-col-head { background: var(--group-e); }
.fw-col-d .fw-col-head { background: var(--group-d); }
.fw-col-u .fw-col-head { background: var(--group-u); }
.fw-col-g .fw-cell { background: var(--group-g-tint); }
.fw-col-p .fw-cell { background: var(--group-p-tint); }
.fw-col-e .fw-cell { background: var(--group-e-tint); }
.fw-col-d .fw-cell { background: var(--group-d-tint); }
.fw-col-u .fw-cell { background: var(--group-u-tint); }
.fw-col-g .fw-cell-count { background: var(--group-g); }
.fw-col-p .fw-cell-count { background: var(--group-p); }
.fw-col-e .fw-cell-count { background: var(--group-e); }
.fw-col-d .fw-cell-count { background: var(--group-d); }
.fw-col-u .fw-cell-count { background: var(--group-u); }

@media (max-width: 1100px) { .fw-diagram { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .fw-diagram { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fw-diagram { grid-template-columns: 1fr; } }

/* ==========================================================================
   Landing extras
   ========================================================================== */
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.btn-secondary { background: transparent; color: var(--accent) !important; border: 1px solid var(--accent); }
.btn-secondary:hover { background: var(--accent-soft); }
.btn-disabled { background: var(--border); color: var(--text-muted) !important; cursor: not-allowed; }

.home-section { padding: 1rem 0; }
.home-section:first-of-type { padding-top: 1.75rem; }
.home-section h2 { margin-top: 0; }
.home-cta {
  margin-top: 0.5rem;
  padding-top: 2rem;
  padding-bottom: 2.25rem;
  background: var(--accent-soft);
  border-top: 1px solid var(--border);
}
.home-cta .container { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.home-cta p { max-width: 60ch; }
.section-intro, .section-note { color: var(--text-muted); }
.section-note { font-size: 0.85rem; }

.audience-cards {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.audience-cards li { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; background: var(--surface); display: flex; flex-direction: column; }
.audience-cards h3 { margin: 0.75rem 0 0.3rem; font-size: 1rem; }
.audience-cards p { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 0.75rem; flex: 1; }
.audience-cards li > a { margin-top: auto; }
.card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.audience-cards p { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 0.6rem; }

.footer-meta { font-size: 0.78rem; margin: 0.6rem 0 0.3rem; }
/* the closing call-to-action band sits flush against the footer rule */
main:has(> .home-cta:last-child) + .site-footer { margin-top: 0; }

/* ==========================================================================
   Roles page
   ========================================================================== */
.roles-grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1rem;
  align-items: start;
}
.role-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.role-card-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
}
.role-card-summary::-webkit-details-marker { display: none; }
.role-card-summary::marker { display: none; content: ""; }
.role-card-summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  flex-shrink: 0;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.role-card[open] > .role-card-summary::before { transform: rotate(45deg); }
.role-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  flex: 1;
  min-width: 0;
}
.role-card-ratio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.role-card-bar {
  display: flex;
  gap: 2px;
  width: 120px;
  height: 12px;
  flex-shrink: 0;
}
.role-card-seg { height: 100%; flex-basis: 0; min-width: 7px; border-radius: 3px; }
@media (max-width: 520px) { .role-card-bar { width: 72px; } .roles-grid { grid-template-columns: 1fr; } }

/* colour key shown above the roles and standards lists */
.group-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  margin: 1rem 0 0.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.group-key-label { font-weight: 600; }
.group-key-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.group-key-item::before { content: ""; width: 0.9rem; height: 0.6rem; border-radius: 3px; background: var(--k); }
.group-key-g { --k: var(--group-g); }
.group-key-p { --k: var(--group-p); }
.group-key-e { --k: var(--group-e); }
.group-key-d { --k: var(--group-d); }

/* News */
.news-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.news-list li { border-top: 1px solid var(--border); padding: 1.1rem 0; }
.news-list h2 { margin: 0.15rem 0 0.4rem; font-size: 1.15rem; padding: 0; border: 0; }
.news-date { font-size: 0.8rem; color: var(--text-muted); }
.news-list p { margin: 0; color: var(--text-muted); }
.lifecycle-figure { margin: 1.25rem 0; }
.lifecycle-figure img { display: block; width: 100%; height: auto; aspect-ratio: 1088 / 548; object-fit: cover; object-position: top; /* trims the caption baked into the image */ border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.lifecycle-figure figcaption { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }
.radar-figure { margin: 1.25rem 0; }
.radar-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.radar-figure figcaption { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }
.role-seg-g { background: var(--group-g); }
.role-seg-p { background: var(--group-p); }
.role-seg-e { background: var(--group-e); }
.role-seg-d { background: var(--group-d); }
.role-card-count {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  color: #fff;
  background: var(--role);
  flex-shrink: 0;
}
.role-card-body { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--border); }
.role-card[open] { grid-column: 1 / -1; }
.role-card-controls { list-style: none; margin: 0.85rem 0 0; padding: 0; columns: 3 260px; column-gap: 2rem; }
.role-card-controls li { break-inside: avoid; }
.role-card-controls li { margin: 0.4rem 0; }
.role-card-controls a { display: flex; gap: 0.4rem; align-items: baseline; color: var(--text); font-size: 0.9rem; }
.role-card-controls a:hover { color: var(--accent); }

/* Prose fills the page column, same as headings, cards, and figures */
main .container > p,
main .container > ul:not([class]),
main .container > ol:not([class]),
main .container > blockquote { max-width: none; }

/* Latest news strip on the home page */
.home-news { list-style: none; padding: 0; margin: 1rem 0 0.75rem; max-width: 72ch; border-top: 1px solid var(--border); }
.home-news li { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.home-news .news-date { flex: 0 0 auto; min-width: 9.5rem; white-space: nowrap; }
.home-news a { font-weight: 500; }

/* Light / dark switch: sits at the right end of the sticky navigation bar */
.theme-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2rem;
  padding: 0 0.85rem 0 0.65rem;
  border: 1.5px solid var(--text-muted);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* keep the icon exactly centred in its slot */
.theme-toggle [data-icon] { display: flex; }
.theme-toggle [hidden] { display: none; }
.theme-toggle .icon { display: block; width: 18px; height: 18px; }
@media (max-width: 520px) {
  .theme-toggle { padding: 0; width: 2rem; justify-content: center; }
  .theme-toggle-label { display: none; }
}

/* ==========================================================================
   ATT&CK mapping page — process diagram and control/technique/standard example
   ========================================================================== */
.attck-figure { margin: 1.5rem 0; }
.attck-figcaption,
.attck-figure figcaption { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.75rem; }

/* Flowchart: boxes connected directly by arrows (with a visible arrowhead,
   not just a line), the way a flowchart actually reads. Mobile-first
   vertical, arrows pointing down; at >=900px a hard, binary switch to
   horizontal, arrows pointing right. That switch is a fixed layout change
   (flex-direction: column vs. row), never a flex-wrap that reflows at an
   uncontrolled point — a wrapped row of boxes-plus-arrows is exactly what
   orphaned a connector before. */
.attck-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.attck-flow-node {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.85rem 1rem;
  text-decoration: none;
}
a.attck-flow-node:hover { border-color: var(--accent); }
.attck-flow-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; }
.attck-flow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--accent-fill);
  color: #fff;
  flex-shrink: 0;
}
.attck-flow-icon .icon { width: 15px; height: 15px; }
.attck-flow-num { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }
.attck-flow-node h3 { font-size: 0.95rem; margin: 0 0 0.3rem; }
.attck-flow-node > p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

/* Arrow: a line with a triangular arrowhead — an actual direction indicator,
   not a plain divider. */
.attck-flow-arrow {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 1.75rem;
}
.attck-flow-arrow::before { content: ""; width: 2px; flex: 1; background: var(--border); }
.attck-flow-arrow::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--text-muted);
}

/* Example diagram: icons colour-matched to the node type they introduce */
.attck-flow-icon-control { background: var(--group-p); }
.attck-flow-icon-technique { background: var(--mitre); }
.attck-flow-icon-standards { background: var(--accent-fill); }
.attck-flow-node-control { border-left: 3px solid var(--group-p); }
.attck-flow-node-technique { border-left: 3px solid var(--mitre); background: var(--mitre-tint); }
.attck-flow-node-technique .attck-node-name { color: var(--mitre); }
.attck-flow-node-standards { border-left: 3px solid var(--accent); }
.attck-flow-node-standards .framework-list { margin-top: 0.5rem; }

/* Hub diagram: P-SSCRM sits at the center of the flow, visually emphasized
   as the thing that connects the technique on one side to the standards on
   the other, rather than just another step in a linear chain. */
.attck-flow-hub .attck-flow-node-hub {
  border: 2px solid var(--group-p);
  background: var(--group-p-tint);
}
.attck-flow-hub .attck-flow-node-hub .attck-flow-icon-control {
  width: 2.2rem;
  height: 2.2rem;
}
.attck-flow-hub .attck-flow-node-hub .attck-node-name { font-size: 0.95rem; }
@media (min-width: 900px) {
  .attck-flow-hub .attck-flow-node-hub { flex: 1.15 1 0; }
}

@media (min-width: 900px) {
  .attck-flow { flex-direction: row; align-items: stretch; }
  .attck-flow-node { flex: 1 1 0; min-width: 0; }
  .attck-flow-arrow { flex-direction: row; height: auto; width: 2.5rem; }
  .attck-flow-arrow::before { width: auto; height: 2px; }
  .attck-flow-arrow::after {
    border-left: 8px solid var(--text-muted);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: none;
  }
}

.attck-node-label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.attck-node-name { display: block; font-size: 0.88rem; font-weight: 600; color: var(--text); }

.attck-examples { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.attck-examples a { font-weight: 600; }
.attck-examples-note { margin: 1rem 0 0; }

/* Reverse (technique -> control) map: many more entries than the standards
   reverse map, so lay collapsed rows out in columns instead of one long
   single-column stack. A CSS grid, not `columns` — multi-column layout
   rebalances every item's position across columns whenever any one item's
   height changes, so opening a details element could relocate entries that
   had nothing to do with it. A grid keeps every item in its own fixed
   row/column cell; opening one only grows the row it's already in. */
.reverse-map-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 0.75rem;
  align-items: start;
}
.reverse-map-compact details { margin: 0; padding: 0.4rem 0.75rem; }
.reverse-map-compact summary { font-size: 0.86rem; gap: 0.5rem; }
.reverse-map-compact .role-card-bar { width: 44px; height: 8px; }
@media (max-width: 640px) { .reverse-map-compact { grid-template-columns: 1fr; } }