/* Shared Hiddly/Hiddlo palette, approved in the separate brand review.
   Only loaded for these brands. Answer categories use one consistent colour. */
:root {
  --brand-accent: #6C8EFF; --brand-accent-hover: #4564D5;
  --brand-accent-soft: #EAF0FF; --brand-deep-ink: #19212C;
  --brand-canvas: #FAF9F6; --brand-bg: #fff; --brand-surface: #F8F8F6;
  --brand-border: #E5E5E0; --brand-muted: #626E82;
  --brand-support: #F5ECE2; --brand-support-edge: #BE9472;
  --brand-support-ink: #5F4938;
}
@font-face { font-family: Outfit; src: url("./Outfit.e31a3aa5fce3.ttf") format('truetype'); font-style: normal; font-weight: 100 900; font-display: swap; }
:root {
  --paper: var(--brand-bg); --ink: var(--brand-deep-ink); --muted: var(--brand-muted); --green: var(--brand-deep-ink);
  --mint: var(--brand-accent-soft); --line: var(--brand-border); --white: var(--brand-bg); --orange: var(--brand-accent-hover);
  --brand-icon-bg: color-mix(in srgb, var(--brand-accent) 5%, #fff);
  --brand-icon-fg: #101319;
  --brand-accent-ink: color-mix(in srgb, var(--brand-accent) 48%, var(--brand-deep-ink));
  --brand-accent-border: color-mix(in srgb, var(--brand-accent) 30%, #fff);
  --brand-hover-bg: color-mix(in srgb, var(--brand-accent) 5%, #fff);
  --brand-font: Outfit, 'Avenir Next', system-ui, sans-serif;
  --radius: 16px; font-family: var(--brand-font); line-height: 1.55;
}
body { background: var(--brand-canvas); color: var(--ink); font-family: var(--brand-font); }
h1, h2, h3, h4, .page-title, .question-title, .vignette-card-title,
.vignette-question-reminder > p, .onboarding-takeaway, .vignette-callout,
.vignette-story-copy blockquote { font-family: var(--brand-font); }
h1, .page-title { font-weight: 540; letter-spacing: -.045em; }
h2, h3, .vignette-card-title { font-weight: 520; letter-spacing: -.025em; }
a.brand { display: inline-block; font: 750 36px/1 var(--brand-font); letter-spacing: -.065em; color: var(--brand-deep-ink); white-space: nowrap; }
.brand-dot { display: inline-block; font-size: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent); margin-left: 3px; vertical-align: 1px; }
.vignette-card-title:focus, h1[tabindex='-1']:focus { outline: none; }
.button { font-weight: 560; letter-spacing: -.01em; border-radius: 10px; }
.button.primary, button.primary { background: var(--brand-deep-ink); color: #fff; border-color: var(--brand-deep-ink); }
.button.secondary { background: #fff; color: var(--brand-deep-ink); border-color: var(--brand-border); }
.button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--brand-deep-ink) 85%, #fff); }
.button.secondary:hover:not(:disabled) { background: var(--brand-hover-bg); }
.button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: var(--brand-accent-hover); }
input, textarea, select { background-color: #fff; color: var(--brand-deep-ink); border-color: var(--brand-border); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand-accent-hover); }
.question-card, .response-panel { background: #fff; border-color: var(--brand-border); box-shadow: none; }
.quiet { color: var(--brand-muted); }
.eyebrow { color: var(--brand-muted); letter-spacing: .14em; font-weight: 650; }
.vignette-callout { background: var(--brand-accent-soft); border-left-color: var(--brand-accent); border-radius: 0 12px 12px 0; }
.vignette-question-reminder { background: var(--brand-surface); border-color: var(--brand-border); }
.vignette-person-answer { font-family: var(--brand-font); }
.site-header { border-bottom: 1px solid var(--brand-border); }
.site-footer { border-color: var(--brand-border); }
@media (max-width: 560px) { a.brand { font-size: 31px; } }

/* Diagram roles inherit the active brand palette. No image recoloring needed.
   All recorded sensitive answers share one appearance, whatever their origin. */
:root {
  --diagram-ink: var(--brand-deep-ink);
  --diagram-muted: var(--brand-muted);
  --diagram-border: var(--brand-border);
  --diagram-surface: var(--brand-surface);
  --diagram-sensitive-ink: color-mix(in srgb, var(--brand-accent) 48%, var(--brand-deep-ink));
  --diagram-sensitive-fill: color-mix(in srgb, var(--brand-accent) 20%, var(--brand-bg));
  --diagram-sensitive-soft: var(--brand-accent-soft);
  --diagram-ordinary-ink: var(--brand-muted);
  --diagram-ordinary-fill: color-mix(in srgb, var(--brand-muted) 13%, var(--brand-bg));
  --diagram-ordinary-soft: color-mix(in srgb, var(--brand-muted) 6%, var(--brand-bg));
  --diagram-arrow: color-mix(in srgb, var(--brand-accent) 30%, var(--brand-muted));
  --diagram-automatic: var(--diagram-sensitive-ink);
}
.vignette-population h3 { background: var(--diagram-ordinary-soft); color: var(--diagram-ink); }
.vignette-population:is(.honest,.recorded,.chance) h3 { background: var(--diagram-sensitive-soft); color: var(--diagram-sensitive-ink); }
.person-ordinary { color: var(--diagram-ordinary-ink); --person-fill: var(--diagram-ordinary-fill); }
.person-honest, .person-recorded, .person-chance { color: var(--diagram-sensitive-ink); --person-fill: var(--diagram-sensitive-fill); --person-head: currentColor; }
.vignette-change { color: var(--diagram-automatic); }
.assigned-origin::before, .chosen-origin::before { color: var(--diagram-sensitive-ink); background: var(--diagram-sensitive-fill); }
.vignette-legend.honest { color: var(--diagram-sensitive-ink); }
.vignette-reminder-label, .vignette-answer-key, .onboarding-question > .vignette-question-key { color: var(--diagram-muted); }
.vignette-callout { background: var(--diagram-sensitive-soft); border-inline-start-color: var(--brand-accent); color: var(--diagram-ink); }
.sensitive-lane { background: var(--diagram-sensitive-soft); }
.ordinary-lane { background: var(--diagram-ordinary-soft); }
.sensitive-outcome { background: var(--diagram-sensitive-fill); color: var(--diagram-sensitive-ink); }
.ordinary-outcome { background: var(--diagram-ordinary-fill); color: var(--diagram-ordinary-ink); }
.response-flow-outcome + .response-flow-outcome { border-color: var(--diagram-surface); }
.response-flow-connector { color: var(--diagram-arrow); }
.response-flow-headings, .response-flow-names, .response-flow-detail,
.response-flow-source::before, .response-flow-outcome::before { color: var(--diagram-muted); }
.response-flow-probability { color: var(--diagram-ink); }
.home-example { background: var(--diagram-surface); border-color: var(--diagram-border); }
.home-choice { color: var(--diagram-ink); background: var(--brand-bg); border-color: var(--diagram-border); }
.home-record { color: var(--diagram-sensitive-ink); background: var(--diagram-sensitive-fill); border-color: color-mix(in srgb,var(--brand-accent) 30%,var(--brand-bg)); }
.home-ordinary { color: var(--diagram-ordinary-ink); background: var(--diagram-ordinary-fill); border-color: var(--diagram-border); }
.home-arrow i { background: var(--diagram-arrow); }
.home-arrow i::after { border-color: var(--diagram-arrow); }
.home-arrow > span, .home-path-head, .home-example .example-key { color: var(--diagram-muted); }
.home-example figcaption { color: var(--diagram-sensitive-ink); background: var(--diagram-sensitive-soft); }
.home-example .sensitive-star, .vignette-deck .sensitive-star,
.respondent-explanation .sensitive-star, .demo-answer-options .sensitive-star { color: var(--diagram-sensitive-ink); }

/* Apply the same semantic roles to the existing homepage and guide diagrams. */
.path-record { color: var(--diagram-sensitive-ink); background: var(--diagram-sensitive-fill); }
.path-record.ordinary-record { color: var(--diagram-ordinary-ink); background: var(--diagram-ordinary-fill); }
.path-source { background: #fff; color: var(--brand-deep-ink); border-color: var(--brand-border); }
.path-arrow { color: var(--diagram-arrow); }
.path-headings, .sensitive-key { color: var(--brand-muted); }
.vignette, .template-card { background: #fff; border-color: var(--brand-border); }
.vignette figcaption, .vignette-callout, .comment-thread {
  background: var(--brand-support); color: var(--brand-deep-ink);
  border-inline-start-color: var(--brand-support-edge);
}
.vignette figcaption { border-radius: 10px; padding: 14px 18px; }
.vignette-callout .sensitive-star { color: var(--diagram-sensitive-ink); }
.sensitive-star { color: var(--diagram-sensitive-ink); }
.onboarding-question > p, .vignette-question, .vignette-example-answer,
.onboarding-grid blockquote, .onboarding-scene h3, .vignette-editor-section > h3,
.vignette-editor-protection, .estimate-value, .response-flow-category,
.onboarding-question.vignette-question-reminder > p { font-family: var(--brand-font); }
.vignette-question-reminder { background: var(--brand-surface); }
.vignette-person-answer, .vignette-population h3 { font-family: var(--brand-font); }
.steps-strip > div > span { color: var(--brand-accent-hover); }
.hero h1 { font-size: clamp(44px, 4.2vw, 60px); line-height: 1.06; font-weight: 540; }
.hero h1 em { font-style: normal; color: var(--brand-accent-hover); }
.hero .lede { color: #526075; }
.hero { gap: 44px; align-items: center; }
.hero .vignette { padding: 28px; border-radius: 22px; box-shadow: 0 14px 40px #19212c06; }
.hero .vignette-title { font-family: var(--brand-font); font-size: 16px; font-weight: 550; }
.hero .vignette-question { font-size: 24px; line-height: 1.3; }
.path-headings { font-size: 13px; }
.path-source, .path-record { font-size: 19px; }
.notice, .panel, .template-card:hover, .response-detail, .estimate-item,
.bayesian-estimate { background-color: var(--brand-surface); border-color: var(--brand-border); }
.pill { background: var(--brand-accent-soft); color: var(--diagram-sensitive-ink); }
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: var(--brand-accent-hover); }
.text-link { color: var(--brand-deep-ink); }
.template-card { box-shadow: none; }
@media (max-width: 700px) {
  .hero { gap: 28px; }
  .hero h1 { font-size: clamp(38px, 9vw, 48px); }
  .hero .vignette { padding: 22px 18px; }
  .hero .vignette-question { font-size: 22px; }
}

.path-source, .path-record, .steps-strip > div > span { font-family: var(--brand-font); }

/* Remaining creator, response and results controls share the palette too. */
.aside-card, .private-panel, .feedback-prompt { background: var(--brand-support); border-color: var(--brand-border); }
.aside-card .quiet { color: #5B6472; }
.aside-card hr, .example-answer, .example-answer.plain { border-color: var(--brand-border); }
.example-answer { background: #fff; }
.star-button[aria-pressed="true"] { background: var(--brand-accent-soft); border-color: var(--brand-accent-hover); color: var(--diagram-sensitive-ink); }
.add-answer, .protection-summary strong { color: var(--diagram-sensitive-ink); }
.feedback-link { background: var(--brand-surface); }
.metrics strong, .result-card h3 { font-family: var(--brand-font); }
/* Error and warning notices keep their distinct, meaningful status colours. */
.notice.error { background: #f5e5df; color: #873d29; border-color: #deb5a6; }
.notice.warning { background: #f2ecd5; color: #706023; }

.brand-tagline { margin-left: 0; font-size: 12px; line-height: 1.45; color: var(--brand-muted); }
.brand-signature-wordmark { font-family: var(--brand-font); font-size: 23px; font-weight: 750; letter-spacing: -.055em; color: var(--brand-deep-ink); }
.brand-signature-wordmark > span { display: inline-block; font-size: 0; width: 5px; height: 5px; margin-left: 2px; border-radius: 50%; background: var(--brand-accent); vertical-align: 1px; }
.privacy-callout { background: var(--brand-support); }
progress, progress::-webkit-progress-bar { background: var(--brand-border); }
progress::-webkit-progress-value { background: var(--brand-accent-hover); }
progress::-moz-progress-bar { background: var(--brand-accent-hover); }
.choice-button, .multiple-choice { border-color: var(--brand-border); }
.choice-button::after { border-color: var(--brand-muted); }
.choice-button[aria-pressed="true"], .multiple-choice:has(input:checked) { background: var(--brand-accent-soft); border-color: var(--brand-accent-hover); }
.choice-button[aria-pressed="true"]::after { background: var(--brand-accent-hover); border-color: var(--brand-accent-soft); outline-color: var(--brand-accent-hover); }
.finish-mark { background: var(--brand-accent-soft); color: var(--diagram-sensitive-ink); }
.result-empty, .survey-markdown code, .survey-inline code { background: var(--brand-surface); }
.story-number { color: var(--brand-accent-hover); font-family: var(--brand-font); }
.respondent-paths h2 { font-family: var(--brand-font); }
.template-icon { color: var(--diagram-sensitive-ink); }
.template-icon-option:has(input:checked) { border-color: var(--brand-accent-hover); background: var(--brand-accent-soft); }
.template-icon-option:focus-within { outline-color: var(--brand-accent-hover); }
.template-icon-option input[type=radio] { accent-color: var(--brand-accent-hover); }