/* Shared card skin for the selected black, white and lime direction.
   Loaded by the page palette and by research components inside their shadow roots.
   Layout, typography, and component behavior stay in their own stylesheets. */
:is(.form-card,.form-panel,.choice-card,.priority-card,.partnership-card,.portfolio-node,
.work-card,.client-quote,.people-card,.episode-card,.journey-quote,.possibility-quote,
.feedback-card,.research-asset,.thinking-asset,.inputs-card,.results-card,.scenario-chart,
.profile-card,.brief-document,.shortlist,.research-card,.card,.banner,dialog) {
  --on-text:var(--concept-text); --on-muted:var(--concept-muted);
  --on-line:var(--card-line); --on-accent:var(--concept-accent);
  background:var(--card-bg); color:var(--on-text);
  border:1px solid var(--card-line);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
}
/* Banded headers and footers belong to the card, with lime used for the detail. */
:is(.card-top,.report-header,.brief-agreement,.card-heading,.card-footer,
.asset-top,.asset-footer,.thinking-footer) {
  --on-text:var(--concept-text); --on-muted:var(--concept-muted);
  --on-line:var(--card-line); --on-accent:var(--concept-accent);
  background:var(--card-raised); color:var(--on-text);
  border-color:var(--card-line);
}
:is(.card-top,.report-header,.card-heading,.asset-top){border-bottom:1px solid var(--card-line)}
:is(.brief-agreement,.card-footer,.asset-footer,.thinking-footer){border-top:1px solid var(--card-line)}
.report-header img,.report-brand-mark{filter:invert(1)}
.role-icon img{filter:grayscale(1) brightness(0) invert(1)}
:is(.report-brand-mark,.brief-agreement svg,.card-heading-icon,.asset-top>.icon,
.thinking-heading>.icon,.question-icon,.portfolio-node>.icon){color:var(--concept-accent)}
/* Recessed information blocks use a deeper black within the charcoal card. */
:is(.profile-card .insight,.shortlist .evidence,.research-card .insight,
.card footer,.card .mobile-score,.choice-results,.work-card blockquote) {
  --on-text:var(--concept-text); --on-muted:var(--concept-muted);
  --on-line:var(--card-line); --on-accent:var(--concept-accent);
  background:var(--card-inset); color:var(--on-text);
  border:1px solid var(--card-line); box-shadow:none;
}
:is(.initials,.candidate-initials,.role-icon) {
  background:var(--card-raised); color:var(--concept-text);
  border:1px solid var(--card-control-line); box-shadow:none;
}
:is(.acceptance-track,.card .track,.result-bar){background:var(--card-line)}
/* Both acceptance metrics use the same baseline, gain, and track treatment. */
:is(.acceptance-track,.card .track){height:6px;border-radius:999px;overflow:hidden}
:is(.acceptance-baseline,.card .base-fill){background:var(--concept-muted);border:0;border-radius:999px 0 0 999px}
:is(.acceptance-fill,.card .gain-fill){background:var(--concept-accent);border-radius:0 999px 999px 0}
.acceptance-fill{transform:none;border-radius:999px}
/* One check glyph and badge across static cards and interactive research cards. */
svg.icon:has(>use:is([href="#i-check"],[href="#check"])),
.shortlist .hc-check,.card .hc-check,.brief-agreement .hc-check {
  display:block;box-sizing:border-box;width:26px;height:26px;flex:none;
  padding:4px;border:0;border-radius:50%;background:var(--concept-accent);
  color:var(--concept-accent-ink);fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}
.shortlist :is(.brief-icon,.recommendation>span),
.round-check:has(use[href="#i-check"]),
:is(.asset-footer,.standards-note)>span:has(use[href="#i-check"]) {
  width:26px;height:26px;background:transparent;border:0;padding:0;
}
.path-dot:has(use[href="#i-check"]){background:transparent;border-color:transparent}
.card .tick{width:26px;height:26px;border:1px solid var(--card-control-line);background:transparent}
.card .is-checked .tick{border:0;background:var(--concept-accent)}
/* Selected research rows remain clearly marked without large lime panels. */
.candidate-tabs button[aria-selected="true"],.area-row.is-next {
  --on-text:var(--concept-text); --on-muted:var(--concept-muted);
  --on-line:var(--concept-accent); --on-accent:var(--concept-accent);
  background:var(--card-raised); color:var(--on-text);
  box-shadow:inset 0 0 0 1px var(--concept-accent);
}
.candidate-tabs button[aria-selected="true"] .candidate-arrow{color:var(--concept-accent)}
.candidate-tabs button[aria-selected="true"] .profile-countdown-fill{background:var(--concept-accent)}
.area-row.is-next .status{border-color:var(--concept-accent)}
.area-row:hover{box-shadow:inset 0 0 0 1px var(--card-control-line)}
.area-row.is-next:hover{box-shadow:inset 0 0 0 1px var(--concept-accent)}
.shortlist .has-caveat dl>div:last-child{background:var(--card-raised);border-left:2px solid var(--concept-accent)}
/* Quotes and outcome cards use a small accent rule instead of a full lime fill. */
:is(.client-quote,.possibility-quote,.grapl-result){border-left:3px solid var(--concept-accent)}
.founder-note{
  --on-text:var(--concept-text); --on-muted:var(--concept-muted);
  --on-line:var(--card-line); --on-accent:var(--concept-accent);
  background:var(--card-raised); color:var(--on-text);
  box-shadow:none;
}
.client-quote .quote-mark{color:var(--concept-accent)}
/* Controls stay distinct from their surrounding form or calculator card. */
:is(.form-card,.form-panel) :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select),
.inputs-card .input-shell {
  background:var(--card-raised); color:var(--concept-text); border-color:var(--card-control-line);
}
.form-card .route-choices button{background:var(--card-raised);border-color:var(--card-control-line)}
.form-card .route-choices button:hover{background:var(--card-raised);color:var(--concept-text);--on-muted:var(--concept-muted);border-color:var(--concept-accent)}
.form-card .route-choices button:focus-visible{outline:2px solid var(--concept-accent);outline-offset:3px}
.form-card .choice:has(input:focus-visible){outline:2px solid var(--concept-accent);outline-offset:3px}
/* Linked cards share the same restrained hover/focus border. */
.episode-card:has(a:is(:hover,:focus-visible)){border-color:var(--concept-accent)}
/* Keyboard focus stays visible inside shadow-root components as well as pages. */
:is(button,a,[tabindex],input,select,textarea):focus-visible{outline-color:var(--concept-accent)}
.area-row:has(input:focus-visible){outline-color:var(--concept-accent)}