/* Agent Promoter Score in the ContextMatrix Measurement look (kb-aps.css):
   a bento grid of white panels, 10px corners, 1.5px borders, no shadows, bold
   sans titles, big tabular numbers, tick gauges, a hue per part, sharp
   ok/danger. No dark panels. Scoped to .cmaps. */
.cmaps {
  --cm-accuracy: #0e9f94; --cm-loyalty: #b8860b; --cm-sentiment: #a8608f; --cm-score: #6a45c8;
  --cm-ok: #08743A; --cm-bad: #B3131B; --cm-ink: #1d1a16; --cm-text: #2b2722; --cm-faint: #6b645b;
  --cm-border: #e2dccf; --cm-surface: #ffffff; --cm-surface-2: #f6f3ec; --cm-track: #e7e2d8;
  font-family: "Schibsted Grotesk", system-ui, sans-serif; color: var(--cm-text);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
.cmaps button { font-family: inherit; color: inherit; }
.cmaps [data-part="accuracy"] { --part: var(--cm-accuracy); }
.cmaps [data-part="loyalty"] { --part: var(--cm-loyalty); }
.cmaps [data-part="sentiment"] { --part: var(--cm-sentiment); }
.cmaps [data-part="score"] { --part: var(--cm-score); }
.cmaps [data-part] { --part-soft: color-mix(in srgb, var(--part) 14%, var(--cm-surface)); }

.cm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.cm-s4 { grid-column: span 4; } .cm-s5 { grid-column: span 5; } .cm-s7 { grid-column: span 7; } .cm-s12 { grid-column: span 12; }
.cm-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px;
  border: 1.5px solid var(--cm-border); border-radius: 10px; background: var(--cm-surface); text-align: left; }
.cm-panel.flash { animation: cmflash 1.2s ease; }
@keyframes cmflash { 0% { border-color: var(--part, var(--cm-score)); box-shadow: 0 0 0 3px var(--part-soft, #eee); } 100% { border-color: var(--cm-border); box-shadow: none; } }
.cm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cm-head h3, .cm-score h3 { margin: 0; font-family: inherit; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--cm-ink); }
.cm-big { font-size: 40px; font-weight: 700; line-height: 1; color: var(--part); letter-spacing: -.03em; }
.cm-meta, .cm-basis { margin: 4px 0 0; color: var(--cm-faint); font-size: 14px; line-height: 1.45; }
.cm-quiet { color: var(--cm-faint); font-size: 15px; margin: 8px 0; }
.cm-prev { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; vertical-align: 3px;
  font-size: 12px; font-weight: 600; color: var(--cm-score); background: color-mix(in srgb, var(--cm-score) 12%, #fff); }
.cm-part-n em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--cm-accuracy); margin-left: 4px; }

/* gauges */
.cmg { position: relative; display: block; width: 100%; }
.cmg svg { display: block; overflow: visible; }
.cmg-ring { max-width: 270px; } .cmg-sm { max-width: 150px; }
.g-disc { fill: var(--cm-surface-2); }
.g-on { stroke: var(--part, var(--cm-ink)); animation: cmtick .25s both; animation-delay: calc(var(--i) * var(--tick-step)); }
.g-off, .cmg.muted .g-on { stroke: var(--cm-track); }
@keyframes cmtick { from { stroke: var(--cm-track); } }
@media (prefers-reduced-motion: reduce) { .g-on { animation: none; } }
.cmg-face { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cmg-ring .cmg-face { inset: 0; justify-content: center; }
.cm-score-v { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--cm-ink); }
.cm-score-of { color: var(--cm-faint); font-size: 16px; }
.cm-part-v { font-size: 34px; font-weight: 700; line-height: 1; color: var(--cm-ink); }

/* score panel */
.cm-score { gap: 20px; }
.cm-score-body { display: grid; grid-template-columns: minmax(180px, 270px) minmax(0, 1fr); align-items: center; gap: 32px; flex: 1; }
.cm-finding { margin: 0 0 14px; font-size: 17px; line-height: 1.45; color: var(--cm-ink); }
.cm-points { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cm-points li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.cm-pn { font-size: 15px; font-weight: 600; }
.cm-po { color: var(--cm-faint); font-size: 14px; } .cm-po b { color: var(--cm-ink); font-size: 16px; }
.cm-pill { position: relative; display: block; height: 10px; overflow: hidden; border-radius: 999px; background: var(--part-soft, var(--cm-track)); grid-column: 1 / -1; }
.cm-pill > span { display: block; height: 100%; border-radius: 999px; background: var(--part, var(--cm-ink)); }
.cm-points .cm-pill { height: 20px; }

/* part gauges */
.cm-parts { display: grid; grid-template-rows: repeat(3, 1fr); gap: 16px; }
button.cm-part { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 18px; padding: 16px 20px; cursor: pointer; }
button.cm-part:hover, button.cm-part.on { border-color: var(--part); background: color-mix(in srgb, var(--part) 5%, #fff); }
.cm-part-t { display: grid; gap: 4px; }
.cm-part-n { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 700; color: var(--cm-ink); }
.cm-part-n svg { color: var(--part); }
.cm-part-note { color: var(--cm-faint); font-size: 14px; line-height: 1.4; }

/* by tool */
.cm-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cm-tool { display: grid; gap: 10px; align-content: start; }
.cm-tool-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding-bottom: 8px; border-bottom: 1.5px solid var(--cm-border); }
.cm-tool-h b { margin-left: auto; font-size: 24px; color: var(--cm-score); }
.cm-tool-r { display: grid; grid-template-columns: auto minmax(40px, 1fr) 28px; align-items: center; gap: 8px; font-size: 14px; }
.cm-tool-r .cm-pill { grid-column: auto; }
.cm-tool-r b { text-align: right; }
.cm-tools-s { display: grid; gap: 8px; }
.cm-tools-s .cm-tool-r { grid-template-columns: 22px auto minmax(40px, 1fr) 28px; }
.cmaps img.cm-elogo { width: 26px; height: 26px; border-radius: 6px; }
.cmaps img.cm-elogo-s, .cmaps .cm-elogo-s { width: 20px; height: 20px; border-radius: 5px; }
.cmaps .cm-fav { width: 22px; height: 22px; border-radius: 5px; flex: none; }
.cmaps .ph { display: inline-block; background: var(--cm-track); }

/* fix first: light, numbered */
.cm-fix ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.cm-fix li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.cm-fix-m { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px;
  color: var(--cm-score); background: color-mix(in srgb, var(--cm-score) 12%, #fff); }
.cm-fix li.done .cm-fix-m { color: var(--cm-ok); background: color-mix(in srgb, var(--cm-ok) 12%, #fff); }
.cm-fix-t { display: grid; gap: 4px; }
.cm-fix-h { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 16px; color: var(--cm-ink); }
.cm-fix-c b { font-size: 22px; } .cm-fix-c small { margin-left: 4px; color: var(--cm-faint); font-weight: 500; font-size: 13px; }
.cm-fix-d { color: var(--cm-text); font-size: 14px; line-height: 1.45; }
.cm-fix-go { justify-self: start; border: 0; background: none; padding: 0; color: var(--cm-score); font-weight: 600; font-size: 14px; cursor: pointer; }

/* splits, figures, lists */
.cm-split { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--cm-track); }
.cm-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.cm-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.cm-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.cm-figs dt { font-size: 13px; color: var(--cm-faint); } .cm-figs dd { margin: 2px 0 0; font-size: 26px; font-weight: 700; color: var(--cm-ink); }
.cm-figs small { font-size: 13px; font-weight: 500; color: var(--cm-faint); margin-left: 3px; }
.cm-h4 { margin: 6px 0 0; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--cm-ink); }
.cm-rivals { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cm-rivals li { display: grid; grid-template-columns: 22px minmax(0, 1.3fr) minmax(40px, 1fr) 24px; align-items: center; gap: 8px; font-size: 14px; }
.cm-rivals li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-rivals .cm-pill { grid-column: auto; }
.cm-rivals b { text-align: right; }
.cm-list { display: grid; gap: 6px; max-height: 460px; overflow: auto; }
.cm-st { border-top: 1.5px solid var(--cm-surface-2); padding: 8px 0; }
.cm-st summary { display: grid; grid-template-columns: 10px 1fr 20px; gap: 10px; align-items: start; cursor: pointer; list-style: none; font-size: 14px; line-height: 1.45; }
.cm-st summary::-webkit-details-marker { display: none; }
.cm-st summary > i { width: 10px; height: 10px; border-radius: 3px; margin-top: 5px; }
.cm-st-b { padding: 8px 0 4px 20px; font-size: 14px; line-height: 1.5; }
.cm-st-b p { margin: 0 0 6px; }
.cm-st-b blockquote { margin: 6px 0; padding: 8px 12px; background: var(--cm-surface-2); border-radius: 8px; }
.cm-st-b cite { display: block; margin-top: 4px; font-style: normal; font-size: 13px; }
.cm-st-b cite a { color: var(--cm-score); }
.cm-st-src { color: var(--cm-faint); font-size: 13px; }
.cm-more > summary { cursor: pointer; padding: 8px 0; font-weight: 600; font-size: 14px; color: var(--cm-ok); }

/* questions table */
.cm-tablewrap { overflow-x: auto; }
.cm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cm-table th { text-align: left; font-weight: 600; color: var(--cm-faint); font-size: 13px; padding: 8px 10px; border-bottom: 1.5px solid var(--cm-border); white-space: nowrap; }
.cm-table td { padding: 10px; border-bottom: 1px solid var(--cm-surface-2); vertical-align: middle; }
.cm-table td:first-child { min-width: 280px; color: var(--cm-ink); }
.cm-cell { display: grid; grid-template-columns: 80px 28px; gap: 8px; align-items: center; }
.cm-cell .cm-pill { grid-column: auto; }
.cm-na { color: var(--cm-faint); }
.cm-table small { color: var(--cm-faint); }

@media (max-width: 1100px) {
  .cm-s7, .cm-s5 { grid-column: span 12; }
  .cm-s4 { grid-column: span 6; }
  .cm-parts { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
  button.cm-part { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 760px) {
  .cm-grid { gap: 12px; }
  .cm-s4 { grid-column: span 12; }
  .cm-panel { padding: 18px; }
  .cm-score-body { grid-template-columns: 1fr; gap: 18px; justify-items: center; }
  .cm-score-side { width: 100%; }
  .cm-parts { grid-template-columns: 1fr; }
  button.cm-part { grid-template-columns: 110px 1fr; justify-items: start; text-align: left; }
  .cm-tools { grid-template-columns: 1fr; }
  .cm-figs dd { font-size: 22px; }
  .cm-table td:first-child { min-width: 200px; }
}
.cmaps p, .cmaps span, .cmaps li, .cmaps dt, .cmaps dd, .cmaps td, .cmaps th, .cmaps summary, .cmaps blockquote, .cmaps h3, .cmaps h4 { font-family: inherit; letter-spacing: normal; text-transform: none; }
.cm-score-v.wait { font-size: 34px; }