/* Scenarios - lightweight, site-friendly styles. */
:root{
  /* These are defaults. If the main site defines similar variables, it will naturally override the look. */
  --kpa-bg: var(--page-bg, transparent);
  --kpa-fg: var(--text-color, inherit);
  --kpa-border: var(--card-border, rgba(0,0,0,.12));
  --kpa-card-bg: var(--card-bg, transparent);
  --kpa-muted: var(--muted-text, rgba(0,0,0,.75));
  --kpa-focus: var(--accent-color, rgba(0,0,0,.25));

  --kpa-max: 980px;
  --kpa-gap: 16px;
  --kpa-radius: 12px;
  }

body{
  background: var(--kpa-bg);
  color: var(--kpa-fg);
}

.kpa-wrap{ max-width: var(--kpa-max); margin: 0 auto; padding: 24px 16px 40px; }
.kpa-breadcrumb{ font-size: 0.95rem; color: var(--kpa-muted); margin: 6px 0 18px; }
.kpa-breadcrumb a{ text-decoration: none; }
.kpa-breadcrumb a:hover{ text-decoration: underline; }

.kpa-hero{ border: 1px solid var(--kpa-border); background: var(--kpa-card-bg); border-radius: var(--kpa-radius); padding: 18px; margin-bottom: 18px; }
.kpa-hero h1{ margin: 0 0 6px; line-height: 1.2; font-size: 1.9rem; }
.kpa-sub{ margin: 0; color: var(--kpa-muted); }

.kpa-grid{ display: grid; grid-template-columns: 1fr; gap: var(--kpa-gap); }
@media (min-width: 900px){ .kpa-grid{ grid-template-columns: 1.25fr 0.75fr; align-items: start; } }

.kpa-card{ border: 1px solid var(--kpa-border); background: var(--kpa-card-bg); border-radius: var(--kpa-radius); padding: 16px; }
.kpa-card h2{ margin: 0 0 10px; font-size: 1.25rem; }
.kpa-card h3{ margin: 14px 0 8px; font-size: 1.05rem; }
.kpa-card p{ margin: 0 0 10px; line-height: 1.55; }
.kpa-card ul, .kpa-card ol{ margin: 8px 0 0 18px; padding: 0; }

.kpa-pill{ display:inline-block; font-size:.85rem; padding:4px 10px; border-radius:999px; border:1px solid var(--kpa-border); opacity:.9; margin-right:8px; }

.kpa-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; align-items:center; }

.kpa-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px; border:1px solid var(--kpa-border);
  background: var(--kpa-button-bg, transparent); color: inherit; cursor:pointer; text-decoration:none; user-select:none;
}
.kpa-btn:hover{ filter:brightness(0.98); }
.kpa-btn:active{ transform:translateY(1px); }
.kpa-btn[aria-pressed="true"]{ outline:2px solid var(--kpa-focus); }

.kpa-note{ font-size:.95rem; color: var(--kpa-muted); }
.kpa-small{ font-size:.92rem; color: var(--kpa-muted); }

.kpa-divider{ height:1px; background:var(--kpa-border); margin:14px 0; }

.kpa-noise{ display:none; margin-top:12px; padding-top:12px; border-top:1px dashed var(--kpa-border); }
.kpa-noise[hidden]{ display:none; }
.kpa-noise:not([hidden]){ display:block; }

.kpa-noise-block{ border:1px solid var(--kpa-border); border-radius:10px; padding:10px 12px; margin:10px 0; }
.kpa-noise-block h4{ margin:0 0 6px; font-size:1rem; }
.kpa-noise-block ul{ margin:0 0 0 18px; }

.kpa-footer-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:16px; }

.kpa-locked{ position:relative; min-height: 180px; }
.kpa-lock-overlay{
  position:absolute; inset:0; border-radius:var(--kpa-radius);
  background: var(--kpa-overlay-bg, rgba(255,255,255,.9)); backdrop-filter:blur(1px);
  display:flex; align-items:center; justify-content:center; padding:14px; text-align:center;
}
.kpa-lock-overlay .kpa-card{ max-width:480px; border-style:dashed; }
.kpa-lock-overlay[hidden]{ display:none; }

.kpa-callout{
  border: 1px solid var(--kpa-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0;
}

.kpa-list{ list-style:none; padding:0; margin:0; }
.kpa-list li{ border:1px solid var(--kpa-border); border-radius:var(--kpa-radius); padding:14px; margin-bottom:12px; }
.kpa-list h2{ margin:0 0 6px; font-size:1.25rem; }
.kpa-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 10px; }
.kpa-link{ text-decoration:none; }
.kpa-link:hover{ text-decoration:underline; }


@media (prefers-color-scheme: dark){
  :root{
    --kpa-border: var(--card-border, rgba(255,255,255,.18));
    --kpa-muted: var(--muted-text, rgba(255,255,255,.75));
    --kpa-overlay-bg: rgba(0,0,0,.65);
    --kpa-focus: var(--accent-color, rgba(255,255,255,.35));
  }
}


/* --- Site integration tweaks (v17) --- */
body.site .kpa-hero,
body.site .kpa-card{
  color: #fff;
}

/* Muted text on dark backgrounds */
body.site .kpa-note,
body.site .kpa-small,
body.site .kpa-sub{
  color: rgba(255,255,255,.80);
}

/* Keep links readable */
body.site .kpa-link{
  color: #fff;
  text-decoration-color: rgba(255,255,255,.55);
}
body.site .kpa-link:hover{
  text-decoration-color: rgba(255,255,255,.85);
}

/* Compact layout to reduce scrolling */
.kpa-wrap{ padding: 18px 12px; }
.kpa-hero{ padding: 16px; margin: 0 0 14px 0; }
.kpa-card{ padding: 14px; margin: 0 0 14px 0; }
.kpa-actions{ gap: 8px; }
.kpa-grid{ gap: 14px; }
.kpa-divider{ margin: 14px 0; }

/* Collapsible "How to use" */
.kpa-card.kpa-compact details > summary{
  cursor: pointer;
  list-style: none;
}
.kpa-card.kpa-compact details > summary::-webkit-details-marker{ display:none; }
.kpa-card.kpa-compact .kpa-details-body{ margin-top: 10px; }


/* --- Layout upgrades (v18) --- */
.kpa-narrow{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.kpa-filter-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px){
  .kpa-filter-grid{ grid-template-columns: 1fr; }
}

.kpa-field label{
  display:block;
  margin: 0 0 6px 0;
}
.kpa-field input,
.kpa-field select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--kpa-border);
  background: rgba(255,255,255,.96);
  color: #111;
}

/* Scenario list as a grid of cards */
#scenarioBrowse .kpa-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 14px;
  padding: 0;
}
#scenarioBrowse .kpa-list > li{
  height: 100%;
}

/* Dark-site readability fixes */
body.site .kpa-pill{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}
body.site .kpa-btn{
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
}
body.site .kpa-btn:hover{
  background: rgba(255,255,255,.08);
}
body.site .kpa-meta{
  opacity: 1;
}

body.site .kpa-hero,
body.site .kpa-card{
  background: rgba(255,255,255,.03);
}


/* --- Resources-style guide tweaks (v20) --- */
body.site .start-guide{
  background: linear-gradient(180deg, rgba(59,130,246,.14), rgba(16,185,129,.06));
  border: 1px solid rgba(255,255,255,.10);
}
body.site .start-guide h2,
body.site .start-guide h3,
body.site .start-guide p,
body.site .start-guide li{
  color: rgba(255,255,255,.92);
}
body.site .start-guide .start-guide-lead{
  color: rgba(255,255,255,.82);
}

body.site .guide-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}
body.site .guide-card h3{
  color: rgba(255,255,255,.95);
}
body.site .guide-card p{
  color: rgba(255,255,255,.80);
}

.kpa-guide-single{
  grid-template-columns: 1fr !important;
  margin-top: 14px;
}

body.site .kpa-narrow{ padding-top: 6px; }
body.site .kpa-narrow > h1{ margin-top: 6px; }

.kpa-locked{ position:relative; min-height: 180px; }


/* --- Example framing toggle placement (v3.0) --- */
.kpa-framing-card{
  padding: 0;
  overflow: hidden;
}

.kpa-framing-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--kpa-border);
}

.kpa-framing-head h2{
  margin: 0;
}

.kpa-framing-body{
  position: relative;
  min-height: 0;
  padding: 0;
}

.kpa-framing-body [data-framing-content]:not([hidden]){
  display: block;
  padding: 16px;
}

.kpa-framing-body .kpa-lock-overlay{
  inset: 16px;
  border-radius: 10px;
}

.kpa-framing-body .kpa-lock-overlay:not([hidden]){
  position: static;
  inset: auto;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  display: block;
  padding: 0 16px 16px;
  text-align: left;
}

.kpa-framing-body .kpa-lock-overlay:not([hidden]) .kpa-card{
  max-width: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
}

.kpa-framing-body .kpa-lock-overlay:not([hidden]) .kpa-card h3{
  margin: 0 0 6px;
  font-size: 1rem;
}

.kpa-framing-body .kpa-lock-overlay:not([hidden]) .kpa-card p{
  margin: 0;
}

.kpa-section-intro{
  margin: 0 0 12px;
  color: var(--kpa-muted);
  line-height: 1.55;
}

@media (max-width: 720px){
  .kpa-framing-head{
    align-items: flex-start;
    flex-direction: column;
  }

  .kpa-framing-head .kpa-btn{
    width: 100%;
    justify-content: center;
  }
}


/* Dynamic scenario browser */
.scenario-group{ margin-top: 18px; }
.scenario-group-head{ margin: 0 0 12px; }
.scenario-group-head h2{ margin: 0 0 6px; }
.scenario-card-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 800px){
  .scenario-card-grid{ grid-template-columns: 1fr 1fr; }
}
.scenario-card h3{ margin-top: 8px; margin-bottom: 8px; }
.scenario-card-top{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}


/* ===== Website redesign integration overrides ===== */
:root{ --kpa-border: rgba(35,54,77,.12); --kpa-card-bg: rgba(255,255,255,.9); --kpa-muted: #617286; --kpa-focus: rgba(41,79,125,.22); --kpa-button-bg: rgba(255,255,255,.88); }
body.site .kpa-wrap,
body.site .kpa-narrow{ padding-top: 6px; }
body.site .kpa-hero,
body.site .kpa-card{ color: #23364d; background: rgba(255,255,255,.92); border-color: rgba(35,54,77,.12); border-radius: 24px; box-shadow: 0 22px 60px rgba(27,42,58,.10); }
body.site .kpa-note,
body.site .kpa-small,
body.site .kpa-sub,
body.site .kpa-card p,
body.site .kpa-card li,
body.site .kpa-card ul,
body.site .kpa-card ol,
body.site .kpa-breadcrumb{ color: #617286; }
body.site .kpa-hero h1,
body.site .kpa-card h2,
body.site .kpa-card h3,
body.site .kpa-card h4{ color: #1f3450; }
body.site .kpa-link,
body.site .kpa-breadcrumb a{ color: #294f7d; text-decoration-color: rgba(41,79,125,.24); }
body.site .kpa-link:hover,
body.site .kpa-breadcrumb a:hover{ text-decoration-color: rgba(41,79,125,.48); }
body.site .kpa-pill{ border-color: rgba(41,79,125,.16); color: #294f7d; background: rgba(41,79,125,.07); }
body.site .kpa-btn{ border-color: rgba(35,54,77,.12); background: rgba(255,255,255,.88); color: #23364d; border-radius: 999px; min-height: 44px; }
body.site .kpa-btn:hover{ background: #fff; border-color: rgba(35,54,77,.18); }
body.site .kpa-btn[aria-pressed="true"]{ outline-color: rgba(41,79,125,.24); }
body.site .kpa-divider{ background: rgba(35,54,77,.10); }
body.site .kpa-noise-block,
body.site .kpa-callout,
body.site .kpa-list li,
body.site .kpa-field input,
body.site .kpa-field select{ border-color: rgba(35,54,77,.12); background: rgba(248,244,236,.72); }
body.site .kpa-lock-overlay{ background: rgba(246,242,234,.78); backdrop-filter: blur(4px); }
body.site .scenario-card-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
body.site .scenario-group + .scenario-group{ margin-top: 20px; }
body.site .scenario-group-head h2{ margin-bottom: 12px; }


/* ===== 5.2 redesign follow-up fixes ===== */
body.site .start-guide,
body.site .guide-card,
body.site .kpa-browse,
body.site .cards-browse-panel,
body.site #scenarioBrowse .kpa-card,
body.site #cardsBrowse .kpa-card,
body.site .scenario-card,
body.site .card-library-tile{
  background: rgba(255,255,255,.96) !important;
  color: #23364d !important;
  opacity: 1 !important;
}
body.site .start-guide::before,
body.site .start-guide::after,
body.site .guide-card::before,
body.site .guide-card::after,
body.site .kpa-browse::before,
body.site .kpa-browse::after,
body.site .cards-browse-panel::before,
body.site .cards-browse-panel::after,
body.site #scenarioBrowse .kpa-card::before,
body.site #scenarioBrowse .kpa-card::after,
body.site #cardsBrowse .kpa-card::before,
body.site #cardsBrowse .kpa-card::after{
  display: none !important;
  content: none !important;
}
body.site .start-guide h2,
body.site .start-guide h3,
body.site .guide-card h3,
body.site .kpa-browse h2,
body.site #scenarioBrowse .kpa-card h2,
body.site #scenarioBrowse .kpa-card h3,
body.site #cardsBrowse .kpa-card h2,
body.site #cardsBrowse .kpa-card h3,
body.site .card-library-tile h3{
  color: #1f3450 !important;
}
body.site .start-guide p,
body.site .start-guide li,
body.site .guide-card p,
body.site .kpa-browse p,
body.site .kpa-browse label,
body.site .kpa-browse .kpa-note,
body.site .kpa-browse .kpa-small,
body.site #scenarioBrowse .kpa-card p,
body.site #scenarioBrowse .kpa-card li,
body.site #scenarioBrowse .kpa-card .kpa-note,
body.site #scenarioBrowse .kpa-card .kpa-small,
body.site #cardsBrowse .kpa-card p,
body.site #cardsBrowse .kpa-card li,
body.site #cardsBrowse .kpa-card .kpa-note,
body.site #cardsBrowse .kpa-card .kpa-small,
body.site .card-library-snippet,
body.site .card-library-meta,
body.site .cards-section-count{
  color: #617286 !important;
}
body.site .kpa-browse .kpa-field input,
body.site .kpa-browse .kpa-field select,
body.site .cards-browse-panel .kpa-field input,
body.site .cards-browse-panel .kpa-field select{
  background: #fff !important;
  color: #23364d !important;
  border-color: rgba(35,54,77,.16) !important;
}
body.site .kpa-browse .kpa-btn,
body.site .cards-browse-panel .kpa-btn{
  background: rgba(255,255,255,.94) !important;
  color: #23364d !important;
  border-color: rgba(35,54,77,.14) !important;
}
body.site .kpa-browse .kpa-btn.is-active,
body.site .cards-browse-panel .kpa-btn.is-active{
  background: linear-gradient(180deg, #3c6699, #294f7d) !important;
  color: #fff !important;
  border-color: rgba(41,79,125,.28) !important;
}
body.site #scenarioBrowse .btn,
body.site #cardsBrowse .btn{
  background: rgba(255,255,255,.94);
  color: #23364d;
  border-color: rgba(35,54,77,.14);
}
body.site #scenarioBrowse .btn.btn-primary,
body.site #cardsBrowse .btn.btn-primary{
  background: linear-gradient(180deg, #3c6699, #294f7d) !important;
  color: #fff !important;
  border-color: rgba(41,79,125,.28) !important;
}
body.site .kpa-lock-overlay{
  background: rgba(246,242,234,.4) !important;
  backdrop-filter: blur(1px) !important;
}


/* ===== 5.2 page-specific button refinements ===== */
body.site.site-scenarios .kpa-field input,
body.site.site-scenarios .kpa-field select,
body.site.site-cards .kpa-field input,
body.site.site-cards .kpa-field select{
  border-color: rgba(35,54,77,.24) !important;
  background: #ffffff !important;
  color: #23364d !important;
}
body.site.site-scenarios .kpa-field input:focus,
body.site.site-scenarios .kpa-field select:focus,
body.site.site-cards .kpa-field input:focus,
body.site.site-cards .kpa-field select:focus{
  outline: none;
  border-color: rgba(41,79,125,.40) !important;
  box-shadow: 0 0 0 3px rgba(41,79,125,.10);
}

body.site.site-scenarios .btn,
body.site.site-scenarios .kpa-btn,
body.site.site-cards .btn,
body.site.site-cards .kpa-btn{
  background: linear-gradient(180deg, #3c6699, #294f7d) !important;
  color: #ffffff !important;
  border-color: rgba(41,79,125,.30) !important;
  box-shadow: 0 12px 28px rgba(41,79,125,.18);
}
body.site.site-scenarios .btn:hover,
body.site.site-scenarios .btn:focus-visible,
body.site.site-scenarios .kpa-btn:hover,
body.site.site-scenarios .kpa-btn:focus-visible,
body.site.site-cards .btn:hover,
body.site.site-cards .btn:focus-visible,
body.site.site-cards .kpa-btn:hover,
body.site.site-cards .kpa-btn:focus-visible{
  background: linear-gradient(180deg, #4873a9, #2c588c) !important;
  border-color: rgba(41,79,125,.36) !important;
}
body.site.site-scenarios .kpa-btn.is-active,
body.site.site-scenarios .kpa-btn[aria-pressed="true"],
body.site.site-cards .kpa-btn.is-active,
body.site.site-cards .kpa-btn[aria-pressed="true"]{
  background: linear-gradient(180deg, #315a89, #213f63) !important;
  border-color: rgba(33,63,99,.46) !important;
}
body.site.site-scenarios #scenarioBrowse .btn,
body.site.site-cards #cardsBrowse .btn{
  background: linear-gradient(180deg, #3c6699, #294f7d) !important;
  color: #ffffff !important;
  border-color: rgba(41,79,125,.30) !important;
}
body.site.site-cards .card-detail-close{
  background: linear-gradient(180deg, #3c6699, #294f7d) !important;
  color: #ffffff !important;
  border-color: rgba(41,79,125,.30) !important;
}
body.site.site-cards .card-detail-close:hover{
  background: linear-gradient(180deg, #4873a9, #2c588c) !important;
}


/* ===== 5.2 redesign fix 5 ===== */
/* Cards, Scenarios, and individual scenario pages use blue buttons throughout. */
body.site .kpa-btn,
body.site .btn,
body.site .card-detail-close{
  background: linear-gradient(180deg, #3c6699, #294f7d) !important;
  color: #ffffff !important;
  border-color: rgba(41,79,125,.30) !important;
  box-shadow: 0 12px 28px rgba(41,79,125,.18) !important;
}
body.site .kpa-btn:hover,
body.site .kpa-btn:focus-visible,
body.site .btn:hover,
body.site .btn:focus-visible,
body.site .card-detail-close:hover,
body.site .card-detail-close:focus-visible{
  background: linear-gradient(180deg, #4873a9, #2c588c) !important;
  color: #ffffff !important;
  border-color: rgba(41,79,125,.36) !important;
}
body.site .kpa-btn.is-active,
body.site .kpa-btn[aria-pressed="true"]{
  background: linear-gradient(180deg, #315a89, #213f63) !important;
  border-color: rgba(33,63,99,.46) !important;
}

/* Search fields should read more clearly. */
body.site .kpa-field input,
body.site .kpa-field select{
  border-color: rgba(35,54,77,.24) !important;
  background: #ffffff !important;
  color: #23364d !important;
}
body.site .kpa-field input:focus,
body.site .kpa-field select:focus{
  outline: none;
  border-color: rgba(41,79,125,.40) !important;
  box-shadow: 0 0 0 3px rgba(41,79,125,.10);
}