/* DNA of a Leader — official guide v1.1. Shared by every page. */
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap");
:root {
  --brand-black: #212121;
  --brand-cream: #f2efe9;
  --brand-gold: #9e7a20;
  --brand-tan: #c8b79b;
  --brand-white: #ffffff;
  --brand-peach: #e0b894;
  --brand-clay: #c4ab9e;
  --brand-rose: #7a5c5e;
  --brand-sage: #919e91;
  --brand-forest: #2e3b33;
  /* Functional error red remains distinct from decorative accents. */
  --brand-error: #b4433d;
  --brand-heading: "Times New Roman", Times, serif;
  --brand-body: "Neue Haas Unica W1G", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --brand-mono: "Courier Prime", "Courier New", monospace;
  --brand-dark-panel: color-mix(in srgb, var(--brand-black) 94%, var(--brand-cream));
  --brand-dark-raised: color-mix(in srgb, var(--brand-black) 88%, var(--brand-cream));
  --brand-dark-line: color-mix(in srgb, var(--brand-black) 76%, var(--brand-tan));
  --brand-light-panel: color-mix(in srgb, var(--brand-cream) 75%, var(--brand-white));
  --brand-light-line: color-mix(in srgb, var(--brand-cream) 65%, var(--brand-tan));
  --brand-muted: color-mix(in srgb, var(--brand-black) 70%, var(--brand-tan));
  --brand-on-gold: var(--brand-white);
}
/* Specificity keeps form and accent roles consistent through legacy bundles. */
html body :is(input, textarea, select),
html body :is(.eyebrow, [class$="-eyebrow"], label, .label, [class$="-label"], [class$="-num"], [class$="-kicker"], [class$="-ref"], [class$="-qid"], [class$="-index"], [class$="-number"], [class$="-count"], .step-number, .count, .pct, .price, .track-value, .base-score .val) {
  font-family: var(--brand-mono) !important;
}
html body :is(h1, h2, h3, h4, h5, h6) { font-family: var(--brand-heading) !important; }

/* Language coverage: the guide’s Latin faces do not cover Arabic. */
html[lang="ar"] {
  --brand-heading: "Noto Naskh Arabic", "Times New Roman", serif;
  --brand-body: "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif;
  --brand-mono: "Noto Sans Arabic", "Courier Prime", monospace;
}

/* Logo marks and wordmarks use only the two approved logo colors. */
:root { --brand-logo: var(--brand-black); }
:root[data-theme="dark"] { --brand-logo: var(--brand-cream); }
html body :is(.dna-sidebar-logo, .dna-sidebar-brand, .brand, .brand > span, .brand > strong, .brand small, .dna-sidebar-brand small, .brand-symbol, .brand-word, .brand-name, .brand-name strong, .brand-name small, .footer-brand) {
  color: var(--brand-logo) !important;
  border-color: var(--brand-logo);
}
html body .brand-mark {
  color: var(--brand-cream) !important;
  background: var(--brand-black) !important;
  border-color: var(--brand-logo);
}

/* Muted text remains readable when legacy rules use this role directly. */
:root[data-theme="dark"] {
  --brand-muted: var(--brand-clay);
  --brand-error: #d58b86;
}

/* Language picker: one compact native select on every page. */
html body select.dna-lang-select {
  appearance: none; -webkit-appearance: none;
  min-width: 0; width: auto; min-height: 44px; margin: 0;
  padding: 0 34px 0 12px; padding-inline: 12px 34px;
  border: 1px solid var(--brand-light-line); border-radius: 8px;
  background: var(--brand-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239e7a20' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--brand-black); font-size: .8rem; line-height: 1.2; cursor: pointer;
  transition: border-color .18s ease-out, box-shadow .18s ease-out;
}
html[dir="rtl"] body select.dna-lang-select { background-position: left 12px center; }
html body select.dna-lang-select:hover { border-color: var(--brand-gold); }
html body select.dna-lang-select:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
:root[data-theme="dark"] body select.dna-lang-select { background-color: var(--brand-dark-raised); color: var(--brand-cream); border-color: var(--brand-dark-line); }

/* "More" menu: secondary actions tucked behind one quiet button. */
.dna-more { position: relative; display: inline-block; }
.dna-more > summary {
  list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 16px; border: 1px solid var(--brand-light-line); border-radius: 999px;
  color: var(--brand-muted); font: 600 .85rem/1 var(--brand-body); background: transparent;
}
.dna-more > summary::-webkit-details-marker { display: none; }
.dna-more > summary::after { content: "⋯"; font-size: 1rem; line-height: 1; }
.dna-more[open] > summary { color: var(--brand-black); border-color: var(--brand-gold); }
.dna-more-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30;
  display: grid; gap: 4px; min-width: 200px; padding: 8px;
  border: 1px solid var(--brand-light-line); border-radius: 12px; background: var(--brand-white);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--brand-black) 10%, transparent);
}
.dna-more-menu > :is(a, button) { justify-content: flex-start; text-align: start; white-space: nowrap; }
.dna-more-menu[hidden] { display: none; }
:root[data-theme="dark"] .dna-more-menu { background: var(--brand-dark-raised); border-color: var(--brand-dark-line); }
:root[data-theme="dark"] .dna-more > summary { border-color: var(--brand-dark-line); color: var(--brand-clay); }
:root[data-theme="dark"] .dna-more[open] > summary { color: var(--brand-cream); }