/* Dark mode (default) */
:root{
  --bg: #0b0f14;
  --text: #e7eef8;
  --muted: #c5d1e0;
  --border: rgba(255,255,255,.10);
  --bad: #ff6b6b;
  --warn: #ffcc66;
  --good: #7ee787;
  --tech: #ff6b6b;
  --org: #61afef;
  --prod: #98c379;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --gradient-1: rgba(120,166,255,.12);
  --gradient-2: rgba(126,231,135,.08);
  --card-bg: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  --pill-bg: rgba(255,255,255,.04);
  --btn-primary-bg: rgba(120,166,255,.18);
  --btn-primary-border: rgba(120,166,255,.35);
  --btn-secondary-bg: rgba(255,255,255,.06);
  --progress-bg: rgba(255,255,255,.08);
  --kpi-bg: rgba(0,0,0,.14);
  --item-bg: rgba(0,0,0,.12);
  --chk-bg: rgba(0,0,0,.10);
  --chk-checked-bg: rgba(120,166,255,.10);
  --chk-checked-border: rgba(120,166,255,.35);
  --badge-bg: rgba(255,255,255,.04);
  --details-bg: rgba(0,0,0,.12);
  --details-border: rgba(255,255,255,.14);
  --textarea-bg: rgba(0,0,0,.16);
}

/* Light mode */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f8f9fa;
    --text: #1a1d23;
    --muted: #5a6370;
    --border: rgba(0,0,0,.12);
    --bad: #dc2626;
    --warn: #d97706;
    --good: #059669;
    --tech: #dc2626;
    --org: #2563eb;
    --prod: #059669;
    --shadow: 0 10px 30px rgba(0,0,0,.08);
    --gradient-1: rgba(59,130,246,.08);
    --gradient-2: rgba(5,150,105,.06);
    --card-bg: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
    --pill-bg: rgba(0,0,0,.04);
    --btn-primary-bg: rgba(59,130,246,.12);
    --btn-primary-border: rgba(59,130,246,.30);
    --btn-secondary-bg: rgba(0,0,0,.04);
    --progress-bg: rgba(0,0,0,.08);
    --kpi-bg: rgba(255,255,255,.60);
    --item-bg: rgba(255,255,255,.50);
    --chk-bg: rgba(0,0,0,.02);
    --chk-checked-bg: rgba(59,130,246,.08);
    --chk-checked-border: rgba(59,130,246,.35);
    --badge-bg: rgba(0,0,0,.04);
    --details-bg: rgba(0,0,0,.02);
    --details-border: rgba(0,0,0,.12);
    --textarea-bg: rgba(0,0,0,.03);
  }
}

html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(ellipse 120vw 80vh at 20% 10%, var(--gradient-1), transparent 60%),
    radial-gradient(ellipse 120vw 80vh at 80% 30%, var(--gradient-2), transparent 60%),
    var(--bg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color:var(--text);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.wrap{max-width:1180px;margin:0 auto;padding:18px 16px 44px}
/* Scoped to .wrap so CARE app shell <header class="care-app-topbar"> is not affected */
.wrap > header{display:grid;gap:8px;margin-bottom:14px}
h1{margin:0;font-size:20px;letter-spacing:.2px}
.sub{margin:0;color:var(--muted);max-width:92ch}
.grid{display:grid;gap:12px}
.topbar{display:grid;grid-template-columns: 0.9fr 1.6fr; gap:12px; align-items:stretch; margin:12px 0 14px}
.cardHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.titleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.headerFilters{
  flex-wrap:wrap;
  justify-content:flex-end;
}
.headerProgress{
  margin-top:6px;
}
.card{
  background: var(--card-bg);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  box-shadow: var(--shadow);
}
.card h2{margin:0 0 8px;font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.10em}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{
  padding:6px 10px;border-radius:999px;border:1px solid var(--border);
  background:var(--pill-bg);color:var(--muted);
  font-weight:700;font-size:12px;white-space:nowrap;
  cursor:pointer;
}
.btn{
  cursor:pointer;background:var(--btn-primary-bg);
  border:1px solid var(--btn-primary-border);color:var(--text);
  padding:10px 12px;border-radius:12px;font-weight:800;letter-spacing:.2px;
  user-select:none;
}
.btn.secondary{background:var(--btn-secondary-bg);border:1px solid var(--border)}
.btn:active{transform:translateY(1px)}
.progress{height:10px;border-radius:999px;background:var(--progress-bg);overflow:hidden;border:1px solid var(--border)}
.bar{height:100%;width:0%;background:linear-gradient(90deg, rgba(120,166,255,.9), rgba(126,231,135,.9))}
.kpis{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
  gap:10px;
  align-items:stretch;
}
.kpi-subcolumn{
  display:grid;
  gap:8px;
}
.kpi{
  padding:1rem 0.2rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--kpi-bg);
  min-width:0;
  box-sizing:border-box;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Overall capability KPI: treat as a centered hero block */
.kpi-overall{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:1.6rem 0.2rem;
  min-width:0;
}
.kpi .lab{
  color:var(--muted);
  font-weight:800;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.10em;
  word-break:break-word;
  overflow-wrap:break-word;
  hyphens:auto;
  text-align:center;
}
.kpi .num{
  font-size:20px;
  font-weight:900;
  margin-top:4px;
  text-align:center;
}

/* Overall capability number: scale with viewport; clearly larger than domains */
.kpi#kpiOverall-container .num{
  font-size:clamp(24px, 3.2vw, 72px);
}

/* Global maturity level coloring - applies to ANY element with data-level */
[data-level="0"],
[data-level="1"]{--level-color:var(--bad)}
[data-level="2"],
[data-level="3"]{--level-color:var(--warn)}
[data-level="4"],
[data-level="5"]{--level-color:var(--good)}

/* Reverse polarity (e.g. risk: low = good, high = bad). Set on .wrap via model.scoring.polarity */
[data-polarity="reverse"] [data-level="0"],
[data-polarity="reverse"] [data-level="1"]{--level-color:var(--good)}
[data-polarity="reverse"] [data-level="2"]{--level-color:var(--warn)}
[data-polarity="reverse"] [data-level="3"],
[data-polarity="reverse"] [data-level="4"],
[data-polarity="reverse"] [data-level="5"]{--level-color:var(--bad)}

/* Apply level color to number */
.kpi .num{color:var(--level-color,var(--text))}

/* Overall KPI - add background color (domains don't have this) */
.kpi#kpiOverall-container[data-level]{
  background:color-mix(in srgb,var(--level-color) 15%,transparent);
  border-color:color-mix(in srgb,var(--level-color) 40%,transparent);
}

/* KPI label - centered and colored like the number */
.kpi .kpi-label{
  font-size:13px;
  font-weight:700;
  margin-top:6px;
  text-align:center;
  color:var(--level-color,var(--text));
}

/* Overall capability label: scale with viewport; noticeably larger than domain labels */
.kpi#kpiOverall-container .kpi-label{
  font-size:clamp(18px, 2.2vw, 40px);
}

/* KPI separator - reduced opacity */
.kpi .kpi-separator{
  margin:8px 12px;
  border:none;
  border-top:1px solid var(--border);
  opacity:0.4;
}

/* KPI description - 85% opacity */
.kpi .kpi-desc{
  font-size:12px;
  text-align:center;
  color:var(--muted);
  opacity:0.85;
  padding:0 8px;
  line-height:1.4;
}

/* Binary (gates) assessments: hide domain KPIs, show only Overall as Viability */
.binary-hidden {
  display: none !important;
}

/* Spider chart layout */
.spiderLayout{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:12px;
  align-items:stretch;
}
.spiderCard{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.spiderChart{
  width:100%;
  aspect-ratio:1 / 1;
}
.spiderChart svg{
  width:100%;
  height:100%;
  display:block;
}
#spiderSummary{
  white-space:pre-line;
}

/* Spider chart visuals */
.spiderChart[data-level] .spider-ring{
  fill:none;
  stroke-width:0.6;
}
.spiderChart .spider-ring-level-1{
  stroke:color-mix(in srgb,var(--bad) 25%,transparent);
}
.spiderChart .spider-ring-level-2,
.spiderChart .spider-ring-level-3{
  stroke:color-mix(in srgb,var(--warn) 25%,transparent);
}
.spiderChart .spider-ring-level-4,
.spiderChart .spider-ring-level-5{
  stroke:color-mix(in srgb,var(--good) 25%,transparent);
}
.spiderChart .spider-axis{
  stroke:color-mix(in srgb,var(--muted) 30%,transparent);
  stroke-width:0.35;
}
.spiderChart .spider-arc{
  stroke:none;
  fill:color-mix(in srgb,var(--muted) 4%,transparent);
}
.spiderChart .spider-arc-level-1{ fill:color-mix(in srgb,var(--bad) 6%,transparent); }
.spiderChart .spider-arc-level-2,
.spiderChart .spider-arc-level-3{ fill:color-mix(in srgb,var(--warn) 6%,transparent); }
.spiderChart .spider-arc-level-4,
.spiderChart .spider-arc-level-5{ fill:color-mix(in srgb,var(--good) 6%,transparent); }
.spiderChart .spider-arc.is-active.spider-arc-level-1{ fill:color-mix(in srgb,var(--bad) 22%,transparent); }
.spiderChart .spider-arc.is-active.spider-arc-level-2,
.spiderChart .spider-arc.is-active.spider-arc-level-3{ fill:color-mix(in srgb,var(--warn) 22%,transparent); }
.spiderChart .spider-arc.is-active.spider-arc-level-4,
.spiderChart .spider-arc.is-active.spider-arc-level-5{ fill:color-mix(in srgb,var(--good) 22%,transparent); }
.spiderChart .spider-polygon{
  stroke:#1d4ed8;
  stroke-width:1.4;
}
.spiderChart .spider-label{
  fill:var(--muted);
  font-size:5px;
  font-weight:600;
  text-anchor:middle;
  pointer-events:none;
}

.small{margin:6px 0 0;color:var(--muted);font-size:12px}
.cap{display:block}
.cap-accordion{border:none;padding:0;background:transparent;border-radius:0}
.cap-accordion summary{display:block;cursor:pointer}
.cap-accordion summary::-webkit-details-marker{display:inline-block;margin-inline-end:8px}
.cap-accordion > .no-print{margin-top:10px}
.cap-accordion > .chkgrid{margin-top:10px}
.capHead{display:grid;gap:6px}
.capTitleRow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.capTitle{margin:0;font-size:16px;line-height:1.25}
.capBadges{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.capWhat{margin:0;color:var(--muted);font-size:12px}
/* Scoped to .wrap; exclude capability accordion; never target shell chrome <details> outside .wrap */
.wrap details:not(.cap-accordion){border:1px dashed var(--details-border);border-radius:12px;padding:10px 12px;background:var(--details-bg)}
.wrap summary{cursor:pointer;color:var(--muted);font-weight:800}
.list{display:grid;gap:8px}
.item{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--item-bg)}
.itemTop{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start}
.itemBody{margin-top:8px}
.itemBody ul{margin:4px 0 0;padding-left:18px;font-size:0.9em}
.badge{font-size:12px;font-weight:900;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:var(--badge-bg);color:var(--muted);white-space:nowrap}
.badge.bad{--badge-color:var(--bad)}
.badge.warn{--badge-color:var(--warn)}
.badge.good{--badge-color:var(--good)}
.badge.info{--badge-color:#61afef}
.badge.bad,.badge.warn,.badge.good,.badge.info{
  color:var(--badge-color);
  border-color:color-mix(in srgb,var(--badge-color) 35%,transparent);
  background:color-mix(in srgb,var(--badge-color) 10%,transparent);
}
.chkgrid{display:grid;gap:8px;margin-top:8px}
.chk{
  padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:var(--chk-bg);
  transition:background 0.2s ease;
}
.chk-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  align-items:stretch;
}
.chk-control{
  display:flex;
  flex-direction:row;
  gap:10px;
  align-items:flex-start;
  min-width:0;
  flex:1 1 auto;
}
.chk-control:has(.slider-row){
  flex-direction:column;
  align-items:stretch;
}
.chk-control > input[type="checkbox"]{
  flex:0 0 18px;
  width:18px;
  height:18px;
  margin-top:2px;
}
@media (min-width:768px){
  .chk:has(.chk-evidence-wrap) .chk-body{
    flex-direction:row;
    align-items:stretch;
    gap:16px;
  }
  .chk:has(.chk-evidence-wrap) .chk-control{
    flex:1 1 0;
    min-width:0;
  }
  .chk:has(.chk-evidence-wrap) .chk-evidence-wrap{
    flex:0 1 36%;
    min-width:min(12rem,100%);
    max-width:24rem;
    margin-top:0;
  }
}
.chk[data-answered="0"]{
  opacity:0.6;
}
.chk[data-answered="1"]{
  opacity:1;
}
.chk:has(input:checked){
  background:var(--chk-checked-bg);
  border-color:var(--chk-checked-border);
}
.chk-evidence-wrap{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.evidence-hint{
  font-size:11px;
  color:var(--muted);
  font-weight:600;
}
.evidence-field{
  min-height:2.6em;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--textarea-bg);
  color:var(--text);
  font:inherit;
  line-height:1.4;
  outline:none;
  white-space:pre-wrap;
  word-break:break-word;
}
.evidence-field:focus{
  border-color:color-mix(in srgb,var(--btn-primary-border) 70%,var(--border));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--btn-primary-border) 35%,transparent);
}
.evidence-field .evidence-link{
  color:var(--org);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.evidence-field .evidence-link:hover{
  color:color-mix(in srgb,var(--org) 85%,var(--text));
}
.chk-control label{cursor:pointer;display:grid;gap:2px;flex:1;min-width:0}
.chk-control b{font-size:12.5px;font-weight:900}
.chk-control label > span:last-child{
  font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap
}
.chk-control .item-details{
  font-size:12px;
  color:var(--muted);
  opacity:0.8;
  line-height:1.4;
}
.chk-control .slider-item-title{display:block;font-size:12.5px;font-weight:700;color:inherit}
.chk-control .slider-item-scale{display:block;font-size:11.5px;color:var(--muted);font-weight:400;text-wrap:balance;margin-top:2px}
.slider-row{display:block;margin-top:4px}
.slider-value[data-level]{color:var(--level-color,var(--muted));font-weight:700}
.slider-value{display:block;font-size:12px;color:var(--muted);margin-top:4px}
/* Range input: visible track and thumb */
.slider-input{
  width:100%;
  min-width:120px;
  -webkit-appearance:none;appearance:none;
  height:20px;
  margin:0;
  align-self:center;
  background:transparent;
  border-radius:999px;
  border:none;
}
.slider-input::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;height:20px;
  margin-top:-6px;
  border-radius:50%;
  background:var(--btn-primary-border);
  border:2px solid var(--bg);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  cursor:pointer;
}
.slider-input::-moz-range-thumb{
  width:20px;height:20px;
  border-radius:50%;
  background:var(--btn-primary-border);
  border:2px solid var(--bg);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  cursor:pointer;
}
.slider-input::-webkit-slider-runnable-track{
  height:8px;border-radius:999px;
  background:var(--progress-bg);
  border:1px solid var(--border);
  margin-top:6px;
}
.slider-input::-moz-range-track{
  height:8px;border-radius:999px;
  background:var(--progress-bg);
  border:1px solid var(--border);
}
.slider-input::-moz-range-track{height:8px;border-radius:999px;background:transparent}
.muted{color:var(--muted)}
.level-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:800;
  padding:2px 6px;
  border-radius:4px;
  border:1px solid var(--border);
  background:var(--badge-bg);
  color:var(--muted);
  min-width:20px;
  font-variant-numeric:tabular-nums;
}
.level-badge[data-level]{
  color:var(--level-color);
  border-color:color-mix(in srgb,var(--level-color) 35%,transparent);
  background:color-mix(in srgb,var(--level-color) 10%,transparent);
}
.domain-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
  padding:2px 6px;
  border-radius:4px;
  border:1px solid var(--border);
  background:var(--badge-bg);
  color:var(--muted);
  text-transform:capitalize;
}
.domain-badge[data-domain="technical"]{--domain-color:var(--tech)}
.domain-badge[data-domain="organizational"]{--domain-color:var(--org)}
.domain-badge[data-domain="product"]{--domain-color:var(--prod)}
.domain-badge[data-domain]{
  color:var(--domain-color);
  border-color:color-mix(in srgb,var(--domain-color) 35%,transparent);
  background:color-mix(in srgb,var(--domain-color) 10%,transparent);
}
textarea{
  width:100%;min-height:160px;border-radius:12px;padding:10px 12px;
  border:1px solid var(--border);background:var(--textarea-bg);color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:0.8rem;line-height:1.35;
  box-sizing: border-box;
}
.footerBtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:10px}
.stickyActions{position: sticky; top: 10px; display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.stickyActions .btn{text-decoration:none;box-sizing:border-box}
.assessment-results-wrap{display:flex;flex-direction:column;gap:14px}
.assessment-footer-signup{margin-top:4px;text-align:center;padding:20px 16px;display:flex;justify-content:center;align-items:center}
.assessment-footer-signup .btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.topbar .actionsCard{
  grid-column:1 / -1;
}
.notice{
  border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);
  background:color-mix(in srgb,var(--warn) 10%,transparent);
  border-radius:14px;
  padding:12px 14px;
  box-shadow: var(--shadow);
  margin:12px 0;
}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
@media (max-width: 980px){
  .topbar{grid-template-columns:1fr}
  .spiderLayout{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr;gap:2vw;box-sizing:border-box;}
  .kpi-subcolumn{grid-template-columns:repeat(3,minmax(0,1fr));gap:2vw;box-sizing:border-box;}
  .capTitleRow{justify-content:flex-start}
  .capBadges{flex-direction:column-reverse;align-items:flex-start;justify-content:flex-start}
}

@media (max-width: 640px){
  .kpi-overall{
    padding:1.2rem 0.2rem;
  }
  .kpi#kpiOverall-container .num{
    font-size:clamp(20px, 6vw, 32px);
  }
  .kpi#kpiOverall-container .kpi-label{
    font-size:clamp(14px, 4.5vw, 22px);
  }
}

/* Print styles */
@media print {
  /* Hide elements marked as no-print */
  .no-print {
    display: none !important;
  }
  
  /* Unchecked items get 30% opacity */
  .chk:not(:has(input:checked)) {
    opacity: 0.3;
  }
  
  /* Make details elements appear as if they're open */
  .wrap details > summary::marker,
  .wrap details > summary::-webkit-details-marker {
    display: none;
  }
  
  .wrap details > *:not(summary) {
    display: block !important;
  }
  
  /* Clean print appearance */
  body {
    background: white;
    color: black;
  }
  
  /* Card styling */
  .card {
    box-shadow: none;
    border: 1px solid #ccc;
    background: white;
  }

  /* Spider chart: keep compact on paper, not full-page */
  .spiderChart {
    max-width: 70mm;
    max-height: 70mm;
    margin: 0 auto;
  }
  
  /* Capability cards - prevent breaking inside if they fit on one page */
  .card.cap {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Results section cards - force page break before each card */
  #results > .card {
    page-break-before: always;
  }
  
  /* Prevent individual items from breaking */
  .item,
  .chk {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  .muted,
  .capWhat,
  .small {
    color: #555;
  }
  
  /* Progress bar - use solid color for printing (gradients don't print well) */
  .bar {
    background: #4a90e2 !important; /* Solid blue that prints well */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  /* Ensure progress container is visible */
  .progress {
    border: 1px solid #ccc;
    background: #f0f0f0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* CARE app shell embed (agent-assessment.php): runner CSS loads after shell; undo standalone html/body + body paint */
html.care-app.care-assessment-shell-page,
html.care-app.care-assessment-shell-page body.care-assessment-shell-body {
  height: auto;
  min-height: 100dvh;
}
html.care-app body.care-assessment-shell-body {
  background-color: var(--care-app-color-canvas);
  background-image: var(--care-app-color-canvas-tint);
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: scroll;
  font: inherit;
  color: var(--care-app-color-ink-primary);
}