/* ============================================================================
   DCC v2 - SUPPORT PAGE COMPONENTS (Sprint V2-5)
   Loaded ONLY by the hand-built support pages (about, privacy, terms,
   disclaimer, faq, glossary, final-quiz, certificate, support-directory,
   digital-literacy-101). Module pages do not load this file, so nothing here
   can regress the generated lesson set. Token-driven from tokens.css.
   ========================================================================== */

/* --- Old-token bridge for the ported final-quiz runner ---------------------
   js/final-quiz.js was consciously ported from the original site and writes
   inline styles referencing the old token names. Alias them here. */
:root {
  --text-secondary: var(--color-text-light);
  --accent-primary: var(--color-primary);
}

/* --- Legal pages (privacy, terms, disclaimer) ------------------------------ */
.last-updated {
  font-family: var(--font-heading); font-size: var(--font-size-sm);
  color: var(--color-text-light); margin: var(--space-2) 0 var(--space-6);
}
.draft-note {
  background: var(--color-warning-light); color: var(--color-warning-deep);
  border-left: 6px solid var(--color-warning-deep); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-6);
}
.draft-note p { margin: 0; color: inherit; }
.legal-section { margin: var(--space-8) 0; }
.legal-section h2 { margin-top: 0; }
.legal-agreement {
  background: var(--color-surface-primary); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); margin: var(--space-6) 0;
}
.legal-agreement p { margin: 0; }

/* --- Manage-my-data control (S-DCC-LAYER0-FIXES-001) ------------------------
   Save / restore / clear-data control for on-device localStorage, inside
   the Cookies and local storage section of privacy.html. Reuses .story-block
   for the panel and .btn / .btn-quiet for actions — no new button styles. */
.data-manager .data-manager-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 0; }
.data-manager-status { margin: var(--space-3) 0 0; font-weight: var(--font-weight-semibold); min-height: 1.4em; }
.data-manager-status.is-error { color: var(--color-error); }
.data-manager-status.is-success { color: var(--color-success-deep); }

/* --- About page ------------------------------------------------------------ */
.story-block {
  background: var(--color-surface); border-left: 6px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-5) var(--space-6); margin: var(--space-6) 0;
}
.story-block .story-label {
  display: block; font-family: var(--font-heading); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-primary); margin-bottom: var(--space-2);
}
.story-block p:last-child { margin-bottom: 0; }

.principle-grid {
  display: grid; gap: var(--space-4);
  /* min(): shrink below the floor at high zoom, see core.css .card-grid note */
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  margin: var(--space-5) 0;
}
.principle-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.principle-card .principle-icon { font-size: 30px; }
.principle-card .principle-title {
  font-family: var(--font-heading); font-weight: var(--font-weight-bold);
  color: var(--color-primary); margin: var(--space-2) 0;
}
.principle-card p { margin: 0; font-size: calc(var(--font-size-base) - 1px); }

.audience-list { list-style: none; padding: 0; margin: var(--space-5) 0; }
.audience-list li {
  padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider);
}
.audience-list li:last-child { border-bottom: 0; }
.audience-list strong { display: block; font-family: var(--font-heading); color: var(--color-primary); margin-bottom: var(--space-1); }

.testimonial-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
  margin: var(--space-4) 0;
}
.testimonial-card p { margin: 0 0 var(--space-2); }
.testimonial-card .testimonial-attr {
  margin: 0; font-family: var(--font-heading); font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.founder-block { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; margin: var(--space-5) 0; }
.founder-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary);
  color: var(--color-primary-contrast); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 24px; font-weight: var(--font-weight-bold); flex: 0 0 auto;
}
.founder-body { flex: 1 1 320px; }
.founder-name { font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-h3); color: var(--color-primary); }
.founder-role { font-family: var(--font-heading); font-size: var(--font-size-sm); color: var(--color-text-light); margin-bottom: var(--space-3); }
.credentials-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.credential-badge {
  background: var(--color-surface-alt); color: var(--color-text);
  border-radius: var(--radius-pill, 999px); padding: 4px 12px;
  font-family: var(--font-heading); font-size: var(--font-size-sm);
}

/* --- Support directory ------------------------------------------------------ */
.directory-card {
  position: relative; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
  margin: var(--space-5) 0;
}
.directory-card h3 { margin: 0 var(--space-16, 96px) var(--space-2) 0; }
.cost-badge {
  position: absolute; top: var(--space-4); right: var(--space-4);
  background: var(--color-success-light); color: var(--color-success-deep);
  border: 1px solid var(--color-success-deep); border-radius: var(--radius-pill, 999px);
  padding: 2px 12px; font-family: var(--font-heading); font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.contact-row { margin: var(--space-2) 0; overflow-wrap: anywhere; }
.contact-row a { min-height: var(--tap-target-min); display: inline-flex; align-items: center; overflow-wrap: anywhere; word-break: break-word; }
.efficacy-note { display: block; color: var(--color-text-light); margin: var(--space-3) 0; }
.card-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.contact-alt { color: var(--color-text-light); font-size: var(--font-size-sm); }

/* --- Support directory: optional region picker (S-DCC-SUPPORT-DIRECTORY-LOCALIZE-001) --- */
.region-picker {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
}
.region-inputs { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-2); }
.region-inputs label { font-weight: var(--font-weight-semibold); }
.region-inputs input[type="text"] {
  min-height: var(--tap-target-min); padding: 0 var(--space-3); font: inherit;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); width: 9em;
}
.region-error { color: var(--color-danger-deep, var(--color-text)); font-weight: var(--font-weight-semibold); margin: var(--space-2) 0 0; }
.region-privacy-note { color: var(--color-text-light); font-size: var(--font-size-sm); margin: var(--space-3) 0 0; max-width: 60ch; }
.region-select-wrap { margin: var(--space-4) 0 0; }
.region-select-wrap label { display: block; font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-2); }
.region-select-wrap select {
  min-height: var(--tap-target-min); padding: 0 var(--space-3); font: inherit;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
}
.region-confirm { margin-top: var(--space-2); }
.region-confirm .btn-quiet { margin-left: var(--space-3); }

/* --- FAQ --------------------------------------------------------------------- */
.page-search-wrap { margin: var(--space-5) 0; }
.page-search-input {
  width: 100%; max-width: 480px; font-family: var(--font-body); font-size: var(--font-size-base);
  color: var(--color-text); background: var(--color-surface);
  border: 2px solid var(--color-border-strong); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); min-height: var(--tap-target);
}
.page-search-input:focus { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.page-search-count {
  display: block; font-family: var(--font-heading); font-size: var(--font-size-sm);
  color: var(--color-text-light); margin-top: var(--space-2);
}
.page-no-results {
  background: var(--color-surface-alt); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); margin: var(--space-4) 0;
}

/* --- Glossary predictive suggestions ------------------------------------------ */
.gloss-search-wrap { position: relative; }
.gloss-suggest {
  list-style: none; margin: 0; padding: var(--space-2) 0; position: absolute;
  top: 100%; left: 0; width: 100%; max-width: 480px; z-index: 20;
  background: var(--color-surface); border: 2px solid var(--color-border-strong);
  border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.gloss-suggest-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  font-family: var(--font-body); font-size: var(--font-size-base); color: var(--color-text);
  padding: var(--space-2) var(--space-4); min-height: var(--tap-target); cursor: pointer;
}
.gloss-suggest-item:hover, .gloss-suggest-item.is-active { background: var(--color-surface-alt); }
.gloss-suggest-item:focus { outline: var(--focus-ring); outline-offset: -2px; }
.gloss-suggest-item mark { background: none; font-weight: var(--font-weight-bold); color: inherit; padding: 0; }
.gloss-jump-highlight { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-md); transition: outline-color .2s ease; }
.faq-category { margin: var(--space-12) 0 var(--space-4); }
.faq-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); margin-bottom: var(--space-3);
}
.faq-item summary {
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base); color: var(--color-primary);
  padding: var(--space-4) var(--space-5); cursor: pointer; min-height: var(--tap-target);
}
.faq-item summary:hover { background: var(--color-surface-alt); }
.faq-item[open] summary { border-bottom: 1px solid var(--color-divider); }
.faq-answer { padding: var(--space-4) var(--space-5); }
.faq-answer p:last-child { margin-bottom: 0; }

/* --- Glossary ----------------------------------------------------------------- */
.gloss-alpha-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-4) 0 var(--space-6); }
.gloss-alpha-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap-target-min); min-height: var(--tap-target-min);
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px);
  text-decoration: none;
}
.gloss-section { margin: var(--space-8) 0; }
.gloss-letter {
  font-family: var(--font-heading); font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold); color: var(--color-primary);
  border-bottom: 2px solid var(--color-border); padding-bottom: var(--space-1);
  margin-bottom: var(--space-4); /* anchor-scroll offset: html scroll-padding-top + js/dcc.js, see core.css:16 */
}
.gloss-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); /* min(): shrink below 300px at high zoom, see core.css .card-grid note */ }
.gloss-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
}
.gloss-term { font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-h4, 20px); color: var(--color-primary); }
.gloss-category-tag {
  display: inline-block; background: var(--color-surface-alt); color: var(--color-text);
  border-radius: var(--radius-pill, 999px); padding: 1px 10px;
  font-family: var(--font-heading); font-size: var(--font-size-sm); margin: var(--space-1) 0 var(--space-2);
}
.gloss-def { margin: 0; font-size: calc(var(--font-size-base) - 1px); }

/* --- Final quiz (classes emitted by the ported js/final-quiz.js) -------------- */
.quiz-container {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  margin: var(--space-6) 0;
}
.quiz-header h1 { font-size: var(--font-size-h2); margin: 0; }
.quiz-header-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.quiz-score-tracker { font-family: var(--font-heading); font-weight: var(--font-weight-semibold); color: var(--color-text-light); }
.quiz-progress-bar-wrap { background: var(--color-surface-alt); border-radius: var(--radius-pill, 999px); height: 12px; margin: var(--space-4) 0 var(--space-2); overflow: hidden; }
.quiz-progress-bar { background: var(--color-primary); height: 100%; border-radius: inherit; transition: width 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .quiz-progress-bar { transition: none; } }
.quiz-progress-label { font-family: var(--font-heading); font-size: var(--font-size-sm); color: var(--color-text-light); margin-bottom: var(--space-4); }
.quiz-milestone {
  background: var(--color-success-light); color: var(--color-success-deep);
  border: 1px solid var(--color-success-deep); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin: var(--space-4) 0;
}
.quiz-module-tag {
  display: inline-block; background: var(--color-surface-alt); color: var(--color-text);
  border-radius: var(--radius-pill, 999px); padding: 2px 12px;
  font-family: var(--font-heading); font-size: var(--font-size-sm); margin-bottom: var(--space-3);
}
.quiz-question h3 { margin-top: 0; }
.quiz-options { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; }
.quiz-option {
  display: flex; gap: var(--space-3); align-items: flex-start; text-align: left;
  background: var(--color-surface); color: var(--color-text);
  border: 2px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); min-height: var(--tap-target);
  font-family: var(--font-body); font-size: var(--font-size-base); line-height: 1.5; cursor: pointer;
}
.quiz-option:hover:not(:disabled) { border-color: var(--color-primary); }
.quiz-option:disabled { cursor: default; }
.quiz-option.correct { border-color: var(--color-success-deep); background: var(--color-success-light); color: var(--color-success-deep); }
.quiz-option.incorrect { border-color: var(--color-error); background: var(--color-error-light); color: var(--color-error); }
.quiz-option-letter {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-surface-alt); color: var(--color-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: var(--font-weight-bold);
}
.quiz-feedback { display: none; border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin: var(--space-4) 0; }
.quiz-feedback.show { display: block; }
.quiz-feedback.correct-fb { background: var(--color-success-light); color: var(--color-success-deep); border: 1px solid var(--color-success-deep); }
.quiz-feedback.incorrect-fb { background: var(--color-warning-light); color: var(--color-warning-deep); border: 1px solid var(--color-warning-deep); }
.quiz-nav { margin-top: var(--space-4); }
.quiz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6); min-height: var(--tap-target);
  cursor: pointer; text-decoration: none; border: 2px solid transparent;
}
.quiz-btn-primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
.quiz-btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.quiz-btn-primary:disabled { opacity: 0.5; cursor: default; }
.quiz-btn-secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.quiz-results { text-align: center; }
.quiz-results-icon { font-size: 56px; }
.quiz-results-score { font-family: var(--font-heading); font-size: 48px; font-weight: var(--font-weight-bold); }
.quiz-results-score.passing { color: var(--color-success-deep); }
.quiz-results-score.failing { color: var(--color-warning-deep); }
.quiz-results-message { max-width: 560px; margin: var(--space-4) auto; }
.quiz-results-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-5); }
.quiz-breakdown-table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); }
.quiz-breakdown-table th, .quiz-breakdown-table td { border-bottom: 1px solid var(--color-divider); padding: var(--space-2) var(--space-3); text-align: left; }
.quiz-breakdown-table tr.mod-review td { background: var(--color-warning-light); }
.confidence-check-box {
  background: var(--color-surface-primary); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); margin: var(--space-4) 0;
}
.name-input-section input[type="text"] {
  font-family: var(--font-body); font-size: var(--font-size-base); color: var(--color-text);
  background: var(--color-surface); border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  width: 100%; max-width: 420px; min-height: var(--tap-target); box-sizing: border-box;
}

/* dcc.js injects an ext-note inside every external link; when the link is a
   button, the note must inherit the button's text colour (contrast on blue). */
.btn .ext-note, .quiz-btn .ext-note { color: inherit; }

/* Readiness panel blocks emitted by the ported runner */
.tip-box {
  background: var(--color-surface-primary); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); margin: var(--space-4) 0;
}
.warning-box {
  background: var(--color-warning-light); color: var(--color-warning-deep);
  border-left: 6px solid var(--color-warning-deep); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-5); margin: var(--space-4) 0;
}
.warning-box a { color: inherit; }
.module-checklist { list-style: none; padding: 0; margin: var(--space-3) 0; }
.module-checklist li { padding: var(--space-1) 0; }

/* --- Certificate --------------------------------------------------------------- */
.cert-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-5) 0; }
.certificate {
  position: relative; background: var(--color-surface); color: var(--color-text);
  border: 6px double var(--color-primary); border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6); margin: var(--space-6) 0; text-align: center;
}
.cert-corner { position: absolute; color: var(--color-accent-deep); font-size: 20px; }
.cert-corner.tl { top: 10px; left: 12px; } .cert-corner.tr { top: 10px; right: 12px; }
.cert-corner.bl { bottom: 10px; left: 12px; } .cert-corner.br { bottom: 10px; right: 12px; }
.cert-org { font-family: var(--font-heading); font-weight: var(--font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--font-size-sm); color: var(--color-text-light); }
.cert-title { font-family: var(--font-heading); font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); color: var(--color-primary); margin: var(--space-2) 0; }
.cert-subtitle { font-family: var(--font-heading); color: var(--color-text-light); margin-bottom: var(--space-4); }
.cert-logo { font-size: 44px; margin: var(--space-3) 0; }
.cert-awarded { font-style: italic; color: var(--color-text-light); }
.cert-name { font-family: var(--font-heading); font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); border-bottom: 2px solid var(--color-border-strong); display: inline-block; padding: var(--space-2) var(--space-8); margin: var(--space-3) 0; }
.cert-body { max-width: 560px; margin: var(--space-4) auto; }
.cert-achievement { background: var(--color-success-light); color: var(--color-success-deep); border-radius: var(--radius-md); padding: var(--space-4); max-width: 360px; margin: var(--space-5) auto; }
.cert-achievement h3 { margin: 0 0 var(--space-2); color: inherit; }
.cert-score-val { font-family: var(--font-heading); font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); }
.cert-skills { text-align: left; max-width: 560px; margin: var(--space-5) auto; }
.cert-skills ul { columns: 2; column-gap: var(--space-6); margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.cert-skills li { break-inside: avoid; margin-bottom: var(--space-1); }
.cert-footer { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.cert-seal { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); font-family: var(--font-heading); font-size: var(--font-size-sm); color: var(--color-text-light); }
.cert-seal .seal-icon { font-size: 34px; }
.cert-date-block { font-family: var(--font-heading); font-size: var(--font-size-sm); color: var(--color-text-light); text-align: right; }
.cert-domain { color: var(--color-text-light); }
@media (max-width: 560px) { .cert-skills ul { columns: 1; } }
@media print {
  .site-header, .primary-nav, .breadcrumbs, .site-footer, .consent-bar,
  .cert-actions, .no-print, .lesson-back { display: none !important; }
  .certificate { border-color: #000; margin: 0; }
}