/* Shared persona Overview dashboard art direction. The legacy CCO selector is
   retained as a stable styling hook; each page uses its Overview gold with
   white, grey and black for neutral contrast. */
.cco-overview {
  --cco-ink: var(--color-text);
  --cco-accent: var(--framework-section-color);
  --cco-accent-deep: color-mix(in srgb,var(--cco-accent) 72%,var(--color-text));
  --cco-accent-pale: color-mix(in srgb,var(--cco-accent) 18%,var(--color-surface));
  --cco-accent-faint: color-mix(in srgb,var(--cco-accent) 10%,var(--color-surface));
  --cco-chart-outline: color-mix(in srgb,var(--cco-accent) 24%,var(--color-border));
  color: var(--cco-ink);
}
.cco-overview__heading { display:flex; flex-direction:column; align-items:center; gap:var(--space-4); margin-bottom:var(--space-8); text-align:center; }
.cco-overview .cco-overview__eyebrow { margin:0 0 var(--space-2); color:var(--dashboard-ink); font-size:var(--type-body); font-weight:500; }
.cco-overview .cco-overview__heading h3 { margin:0; color:var(--cco-accent); }
.cco-overview [hidden] { display:none !important; }
/* The coloured cards meet the chapter rails without an enclosing panel or inset. */
.cco-overview__board { padding:0; border:0; background:transparent; }
/* Matching outer tracks keep the ring and dot panels exactly equal in width;
   the centre track remains wider to accommodate its paired bar chart. */
.cco-overview__research { container-type:inline-size; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr); column-gap:var(--space-4); }
/* Shared heading, chart, explanation and footer rows align each card without
   fixing its total height. Chart size follows the narrowest column's width. */
.cco-overview__tile { --cco-chart-size:min(320px,calc((100cqw - 2 * var(--space-4)) / 3.25 - 2 * var(--space-5))); min-width:0; display:grid; grid-row:span 5; grid-template-rows:subgrid; padding:var(--space-7) var(--space-5) var(--space-5); border-radius:var(--radius-card); }
.cco-overview__spotlight { background:var(--cco-accent-pale); }
.cco-overview__bars-tile { background:var(--cco-accent-faint); }
.cco-overview__share-tile { background:color-mix(in srgb,var(--cco-accent) 14%,var(--color-surface)); }
.cco-overview h4 { margin:0; font-family:var(--font-body); font-size:var(--type-body-lg); font-weight:600; line-height:var(--leading-heading); color:var(--cco-ink); }
.cco-overview__tile-heading { text-align:center; }
/* A fixed token-sized label band keeps the descriptive headings on one baseline
   across browsers, regardless of whether the uppercase label uses one or two lines. */
.cco-overview .cco-overview__signal { display:flex; align-items:flex-start; justify-content:center; min-block-size:var(--space-7); margin:0 0 var(--space-3); color:var(--cco-accent-deep); font-size:var(--type-small); font-weight:600; line-height:var(--leading-heading); letter-spacing:.04em; text-transform:uppercase; }
.cco-overview__tile h4 { text-wrap:balance; font-size:calc(var(--type-body-lg) * 1.18); font-weight:400; padding-bottom:var(--space-6); }
.cco-overview p { font-size:var(--type-body); line-height:var(--leading-body); color:var(--cco-ink); }
/* Overlay the value in the ring; scale both to the card so narrow screens retain a clear centre. */
.cco-overview__hero-value { position:relative; display:grid; place-items:center; container-type:inline-size; width:var(--cco-chart-size); height:var(--cco-chart-size); margin:var(--space-5) auto var(--space-7); }
.cco-overview .persona-role-dashboard__metric { color:var(--cco-ink); width:auto; font-weight:500; }
.cco-overview__hero-value .persona-role-dashboard__metric { grid-area:1/1; z-index:1; font-size:clamp(32px,26cqw,84px); line-height:1; letter-spacing:-.06em; }
.cco-overview--compact-ratio .cco-overview__hero-value .persona-role-dashboard__metric { font-size:clamp(28px,19cqw,60px); letter-spacing:-.045em; }
.cco-overview__ring { grid-area:1/1; width:100%; overflow:visible; transform:rotate(-90deg); }
.cco-overview__ring circle { fill:none; stroke-width:17; }
.cco-overview__ring-track { stroke:color-mix(in srgb,var(--cco-accent) 22%,var(--color-surface)); }
.cco-overview__ring-fill { stroke:var(--cco-accent-deep); }
/* Inner/outer ring edges follow r=46 plus/minus half its 17-unit stroke.
   Non-scaling outlines preserve chart geometry and distinguish pale tracks. */
.cco-overview__ring .cco-overview__ring-outline { stroke:var(--cco-chart-outline); stroke-width:1; }
.cco-overview__hero-value--kpi { align-content:center; border:1px solid var(--cco-chart-outline); border-radius:var(--radius-card); background:color-mix(in srgb,var(--color-surface) 45%,transparent); }
.cco-overview__hero-value--kpi .persona-role-dashboard__metric { position:static; font-size:clamp(40px,18cqw,72px); letter-spacing:-.04em; }
.cco-overview__hero-value--kpi > span { max-width:72%; margin-top:var(--space-3); font-size:var(--type-body); line-height:var(--leading-heading); text-align:center; }
.cco-overview__bar-track { outline:1px solid var(--cco-chart-outline); outline-offset:-1px; }
.cco-overview .cco-overview__source { font-size:var(--type-eyebrow-size); margin:0; padding-top:var(--space-4); }
.cco-overview .cco-overview__copy { position:relative; display:flex; flex-direction:column; margin:0; padding:var(--space-6) 0 var(--space-5); align-self:stretch; text-align:left; font-size:var(--type-body); line-height:var(--leading-body); }
.cco-overview__copy::before { content:""; position:absolute; left:0; right:0; height:1px; background:var(--cco-chart-outline); }
.cco-overview__copy::before { top:0; }
.cco-overview .cco-overview__copy p { font-size:inherit; line-height:inherit; }
.cco-overview .cco-overview__copy > p:first-child { margin-top:0; }
.cco-overview__role-lens { box-sizing:border-box; align-self:stretch; padding:var(--space-5) 0; border-bottom:1px solid var(--cco-chart-outline); }
.cco-overview__role-lens strong { display:block; margin-bottom:var(--space-2); color:var(--cco-accent-deep); font-size:inherit; }
.cco-overview .cco-overview__role-lens p { margin:0; font-size:inherit; }
/* Both bars retain a shared 0–100% plot; values and labels occupy the bottom
   of the same chart band used by the ring and dot matrix. */
/* Centre the compact bar pair with equal outer tracks; the independent scale
   stays on the card's left copy rail and uses the bars' exact plotting height. */
.cco-overview__bar-chart { position:relative; display:grid; grid-template-columns:minmax(var(--space-2),1fr) repeat(2,minmax(0,116px)) minmax(var(--space-2),1fr); grid-template-rows:minmax(0,1fr) auto auto; column-gap:clamp(var(--space-3),2cqw,var(--space-5)); width:100%; height:var(--cco-chart-size); margin:var(--space-5) 0 var(--space-7); }
.cco-overview__scale { position:absolute; z-index:2; grid-row:1/2; grid-column:1/-1; top:0; bottom:0; left:0; display:flex; flex-direction:column; justify-content:space-between; font-size:var(--type-eyebrow-size); }
.cco-overview__grid-lines { z-index:0; grid-column:1/-1; grid-row:1; display:flex; flex-direction:column; justify-content:space-between; margin-left:var(--space-7); pointer-events:none; }
.cco-overview__grid-lines span { height:1px; background:color-mix(in srgb,var(--cco-accent-deep) 18%,transparent); }
.cco-overview__bar-track { height:100%; width:clamp(48px,6vw,84px); max-width:100%; margin-inline:auto; display:flex; align-items:flex-end; border-radius:var(--radius-pill); background:color-mix(in srgb,var(--color-surface) 35%,transparent); overflow:hidden; }
/* Proportional horizontal radii remove the flat segment that oversized pill
   radii create on short values. The vertical radius is capped on tall fills,
   so percentages and durations retain the same clean rounded cap. */
.cco-overview__bar-fill { width:100%; border-radius:50% 50% 0 0 / min(50%,32px) min(50%,32px) 0 0; background:var(--cco-accent-deep); }
.cco-overview__bar-fill--1 { background:var(--cco-accent); }
.cco-overview__bar-column { position:relative; z-index:1; min-width:0; display:grid; grid-row:1/4; grid-template-rows:subgrid; text-align:center; }
.cco-overview__bar-column--0 { grid-column:2; }
.cco-overview__bar-column--1 { grid-column:3; }
.cco-overview__bar-column .persona-role-dashboard__metric { display:block; margin-top:var(--space-3); font-size:var(--type-heading-md); }
.cco-overview__bar-chart--duration .cco-overview__bar-column .persona-role-dashboard__metric { max-width:100%; font-size:clamp(22px,1.75vw,28px); line-height:1.05; letter-spacing:-.04em; }
.cco-overview__bar-column--0 .persona-role-dashboard__metric { color:var(--cco-accent-deep); }
.cco-overview__bar-column--1 .persona-role-dashboard__metric { color:color-mix(in srgb,var(--cco-accent) 78%,var(--color-text)); }
.cco-overview__bar-column h5 { margin:var(--space-2) 0 0; padding-inline:var(--space-1); text-wrap:balance; font-size:var(--type-eyebrow-size); font-family:var(--font-body); font-weight:500; color:var(--cco-ink); }
.cco-overview .cco-overview__bar-definitions p { margin:var(--space-3) 0 0; }
.cco-overview .cco-overview__bar-definitions p:first-child { margin-top:0; }
/* A direct proportion bar makes the single 60% finding readable without an
   additional legend or an implied interpretation of the other responses. */
.cco-overview__share-chart { display:flex; flex-direction:column; justify-content:center; width:100%; max-width:var(--cco-chart-size); height:var(--cco-chart-size); margin:var(--space-5) auto var(--space-7); }
.cco-overview__share-value { display:flex; flex-direction:column; align-items:center; margin-bottom:var(--space-6); text-align:center; }
.cco-overview__share-value .persona-role-dashboard__metric { font-size:clamp(48px,18cqw,72px); line-height:1; letter-spacing:-.04em; }
.cco-overview__share-value > span { margin-top:var(--space-2); font-size:var(--type-body); }
.cco-overview__share-track { height:var(--space-6); border-radius:var(--radius-pill); background:color-mix(in srgb,var(--cco-accent) 18%,var(--color-surface)); outline:1px solid var(--cco-chart-outline); outline-offset:-1px; overflow:hidden; }
.cco-overview__share-fill { height:100%; border-radius:inherit; background:var(--cco-accent-deep); transform-origin:left; }
.cco-overview__share-scale { display:flex; justify-content:space-between; margin-top:var(--space-2); font-size:var(--type-eyebrow-size); }
.cco-overview__share-chart--kpi { align-items:center; }
.cco-overview__share-chart--kpi .cco-overview__share-value { width:100%; min-height:55%; justify-content:center; padding:var(--space-6); border:1px solid var(--cco-chart-outline); border-radius:var(--radius-card); background:color-mix(in srgb,var(--color-surface) 45%,transparent); }

/* Six concise responsibilities restore the role-at-a-glance context beneath
   the research signals without repeating the larger review framework. */
.persona-role-essence { margin-top:clamp(var(--space-8),7vw,var(--space-9)); }
.cco-overview .persona-role-essence > h4 { margin:0 0 var(--space-6); color:var(--cco-accent); font-size:var(--type-heading-md); font-weight:500; text-align:center; }
.persona-role-essence__cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr; gap:var(--space-4); padding:0; margin:0; list-style:none; }
.persona-role-essence__card { display:flex; min-width:0; flex-direction:column; padding:var(--space-6); border:1px solid var(--cco-chart-outline); border-radius:var(--radius-card); background:var(--cco-accent-faint); text-align:left; }
.persona-role-essence__scene { position:relative; display:block; width:clamp(84px,6.5vw,104px); aspect-ratio:1; flex:none; overflow:hidden; margin-bottom:var(--space-5); border:1px solid var(--cco-chart-outline); border-radius:50%; background:var(--color-surface); clip-path:circle(50% at 50% 50%); }
/* Fill the circular frame with one continuous crop. A one-pixel bleed keeps
   the bitmap beneath the border and prevents pale seams at the curved edge. */
.persona-role-essence__scene::before { content:none; }
.persona-role-essence__scene img { position:absolute; inset:-1px; display:block; width:calc(100% + 2px); max-width:none; height:calc(100% + 2px); border-radius:inherit; object-fit:cover; object-position:center; }
.persona-role-essence__card h5 { margin:0 0 var(--space-3); color:var(--cco-ink); font-family:var(--font-body); font-size:var(--type-body-lg); font-weight:500; line-height:var(--leading-heading); }
.persona-role-essence__card p { margin:0; font-size:var(--type-body); line-height:var(--leading-body); }
@media(max-width:1024px) {
  .cco-overview__research { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--space-4); }
  .cco-overview__tile { --cco-chart-size:min(320px,calc((100cqw - var(--space-4)) / 2 - 2 * var(--space-5))); row-gap:0; }
  .cco-overview__share-tile { grid-column:1/-1; }
  .persona-role-essence__cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .cco-overview__research { grid-template-columns:1fr; }
  .cco-overview__tile { --cco-chart-size:min(320px,calc(100cqw - 2 * var(--space-5))); }
  .persona-role-essence__cards { grid-template-columns:1fr; }
  .persona-role-essence__card { padding:var(--space-5); }
}