/* Yezbi brand for Placement (Derek, October 8, 2026; shared/brand/README.md). Loaded after placement.css, with
   /shared/brand/yezbi-tokens.css and brand-header.css. placement.css is unchanged: this layer maps its variables
   and its few fixed colors onto the --yz-* roles, and only on a page that opts in with data-yezbi-theme on <html>.
   Placement has one theme (Light) and stores no appearance preference, so nothing is read or written here.
   Kept on purpose: Georgia headings, the body font, layout, the sprout artwork (hero illustration and sidebar mark)
   and every assessment behavior. Question screens get no new color: selection is a soft blue with the radio dot and
   a heavier edge, progress is neutral blue, and nothing marks an answer right or wrong. */

/* Neutral, calm surfaces; softer blue for actions, links and focus; restrained terracotta for emphasis. */
html[data-yezbi-theme]{
  --ink:var(--yz-text);
  --muted:var(--yz-muted);
  --green:var(--yz-primary);
  --pale:var(--yz-raised);
  --paper:var(--yz-background);
  --line:var(--yz-border);
  --orange:var(--yz-emphasis);
  --white:var(--yz-surface);
  --shadow:0 12px 38px rgba(36,50,71,.07);
}
html[data-yezbi-theme] .lp-ui:is(.placement-guest-entry,.placement-guest-dialog){
  --lp-line:var(--yz-control-border);
  --lp-accent:var(--yz-primary);
  --lp-on-accent:var(--yz-on-primary);
  --lp-success:var(--yz-success);
  --lp-focus:var(--yz-focus);
  --lp-danger:var(--yz-danger);
}

/* Header: wordmark → "Placement" → icon in one home link, then the existing tagline on wide screens. The tagline sits
   on the same baseline as the app name. The bar is white (--yz-header-bg via .yezbi-brand-bar). */
.placement-identity{display:flex;align-items:baseline;gap:18px;min-width:0}
.topbar .yezbi-brand{--yezbi-brand-size:26px}
.placement-tagline{font-size:13px;line-height:1;color:var(--yz-muted);white-space:nowrap;padding-left:18px;border-left:1px solid var(--yz-border)}
@media(max-width:1000px){.placement-tagline{display:none}}
@media(max-width:700px){.topbar .yezbi-brand{--yezbi-brand-size:clamp(13px,3.8vw,16px)}}
@media(max-width:370px){.topbar{gap:10px}}

/* Keyboard focus: the action blue, 3:1 or better on every surface. Width and offset stay as before. */
html[data-yezbi-theme] :is(button,a,input,select,textarea,summary):focus-visible{outline-color:var(--yz-focus)}

/* Steps: the current step is soft blue with an action-blue number. */
html[data-yezbi-theme] .nav-btn .step{border-color:var(--yz-control-border)}
html[data-yezbi-theme] .nav-btn.active{background:var(--yz-primary-soft);color:var(--yz-text)}
html[data-yezbi-theme] .nav-btn.active .step{background:var(--yz-primary);border-color:var(--yz-primary);color:var(--yz-on-primary)}
html[data-yezbi-theme] .setup-steps>[aria-current]{color:var(--yz-primary)}

/* Surfaces and labels. */
html[data-yezbi-theme] .card,html[data-yezbi-theme] .comparison-scroll{background:var(--yz-surface)}
html[data-yezbi-theme] .chip{background:var(--yz-raised);color:var(--yz-text)}
html[data-yezbi-theme] .chip.orange{background:var(--yz-emphasis-soft);color:var(--yz-emphasis)}
html[data-yezbi-theme] .notice{border-left-color:var(--yz-primary);background:var(--yz-raised);color:var(--yz-text)}
html[data-yezbi-theme] .notice.warning{border-left-color:var(--yz-emphasis);background:var(--yz-emphasis-soft);color:var(--yz-text)}
html[data-yezbi-theme] .flow-card{background:var(--yz-raised)}
html[data-yezbi-theme] .admin{background:var(--yz-raised);border-color:var(--yz-border)}
html[data-yezbi-theme] .stimulus{background:var(--yz-raised)}
html[data-yezbi-theme] .handoff-steps>span{background:var(--yz-raised)}
html[data-yezbi-theme] .handoff-steps>.current{background:var(--yz-primary-soft);color:var(--yz-text);box-shadow:inset 0 0 0 1px var(--yz-primary)}
html[data-yezbi-theme] .skip-link{background:var(--yz-surface);color:var(--yz-primary)}
html[data-yezbi-theme] .error{color:var(--yz-danger)}
html[data-yezbi-theme] .administration-guide::backdrop{background:rgba(20,27,38,.45)}

/* Fields and choices: 3:1 edges. A chosen answer or subject is soft blue with a heavier blue edge and its own
   radio or check, never green, so it cannot read as "correct". */
html[data-yezbi-theme] :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-color:var(--yz-control-border);background:var(--yz-surface);color:var(--yz-text)}
html[data-yezbi-theme] :is(.choice,.rating-row .check){border-color:var(--yz-control-border);background:var(--yz-surface)}
html[data-yezbi-theme] :is(.choice,.subject-pick):has(input:checked){background:var(--yz-primary-soft);border-color:var(--yz-primary)}
html[data-yezbi-theme] .choice:has(input:checked){box-shadow:inset 0 0 0 1px var(--yz-primary)}

/* Buttons: action blue; secondary is white with a 3:1 edge; quiet and danger keep their roles. */
html[data-yezbi-theme] .btn{border-color:var(--yz-primary);background:var(--yz-primary);color:var(--yz-on-primary)}
html[data-yezbi-theme] .btn:hover{border-color:var(--yz-primary-hover);background:var(--yz-primary-hover)}
html[data-yezbi-theme] .btn.secondary{background:var(--yz-surface);color:var(--yz-primary);border-color:var(--yz-control-border)}
html[data-yezbi-theme] .btn.secondary:hover{background:var(--yz-primary-soft)}
html[data-yezbi-theme] .btn[aria-pressed=true]{background:var(--yz-primary-soft);border-color:var(--yz-primary)}
html[data-yezbi-theme] .btn.quiet{background:none;border-color:transparent;color:var(--yz-muted)}
html[data-yezbi-theme] .btn.danger{background:var(--yz-surface);color:var(--yz-danger);border-color:var(--yz-danger)}

/* Progress is neutral: action blue on a visible track, the same for every answer. */
html[data-yezbi-theme] .progress-track{background:var(--yz-border)}
html[data-yezbi-theme] .progress-fill{background:var(--yz-primary)}

/* Results (adult-facing): the existing status dots keep their meaning beside their words; green is completion. */
html[data-yezbi-theme] .status-dot{background:var(--yz-success)}
html[data-yezbi-theme] .status-dot.mixed{background:var(--yz-emphasis)}
html[data-yezbi-theme] .feature-boolean.yes{color:var(--yz-success)}
html[data-yezbi-theme] .fit-warning{color:var(--yz-emphasis)}
html[data-yezbi-theme] .subject-comparison :is(thead th,caption){background:var(--yz-raised)}
html[data-yezbi-theme] .subject-comparison tr>:first-child{background:var(--yz-surface)}
html[data-yezbi-theme] .subject-comparison thead tr>:first-child{background:var(--yz-raised)}