/* ============================================================================
   DCC Core — production refinement layer (v1, 2026-06-18)
   ----------------------------------------------------------------------------
   Senior-accessible UI rebuild. Token-driven only: every value references a
   custom property from tokens.css. Loaded LAST so it can harmonise the
   ad-hoc, off-token sections that made core pages look generic, without
   touching page content, links, or JavaScript hooks.

   Load order on a page:
     main.css → tokens.css → tokens-dark.css → fonts.css → components.css
     → accessibility.css → mobile.css → dcc-core.css   (this file, last)

   Contents:
     1. Focus + reduced motion safety net
     2. Accessible primary CTA (fixes white-on-#E8842C 2.7:1 failure)
     3. .dcc-callout — one component for every coloured info/alert box
     4. .dcc-card top accents (replaces inline border-top hex)
     5. Marketing primitives: hero, section, feature grid, steps, CTA band
     6. Utilities
   ========================================================================== */

/* --- 1. Focus + motion safety net ---------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* Keyboard users must never lose the focus ring behind the sticky header. */
html { scroll-padding-top: calc(var(--nav-height) + var(--space-4)); }

/* --- 2. Accessible primary CTA ------------------------------------------- */
/* Legacy .btn-primary used white text on --color-accent (#E8842C = 2.7:1,
   FAILS). Re-point primary CTAs to the AA-safe --color-accent-strong. */
.dcc-btn,
a.dcc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--motion-duration-2) var(--motion-ease),
              border-color var(--motion-duration-2) var(--motion-ease);
}
.dcc-btn--primary,
a.dcc-btn--primary {
  background: var(--color-accent-strong);
  color: var(--color-accent-contrast);
}
.dcc-btn--primary:hover,
a.dcc-btn--primary:hover { background: var(--color-accent-hover); color: var(--color-accent-contrast); }
.dcc-btn--primary:active { background: var(--color-accent-active); }

.dcc-btn--secondary,
a.dcc-btn--secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.dcc-btn--secondary:hover { background: var(--color-primary-light); }

.dcc-btn--on-dark,
a.dcc-btn--on-dark {
  background: var(--color-text-inverse);
  color: var(--color-primary);
}
.dcc-btn--on-dark:hover { background: var(--color-surface); }

/* Harmonise existing primary CTAs on pages that load this file. */
.btn-primary,
a.btn-primary,
.email-invite-btn {
  background-color: var(--color-accent-strong) !important;
  color: var(--color-accent-contrast) !important;
}
.btn-primary:hover,
a.btn-primary:hover,
.email-invite-btn:hover { background-color: var(--color-accent-hover) !important; }

/* --- 3. .dcc-callout ----------------------------------------------------- */
/* One accessible component for every coloured information / alert box.
   Replaces ad-hoc inline styles like background:#fff3f3;border:3px solid …  */
.dcc-callout {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-primary);
  border-radius: var(--radius-lg);
  color: var(--color-text);
}
.dcc-callout > :first-child { margin-top: 0; }
.dcc-callout > :last-child { margin-bottom: 0; }
.dcc-callout__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}
.dcc-callout p { line-height: var(--line-height-body); }

.dcc-callout--brand   { background: var(--color-surface-primary); border-left-color: var(--color-primary); }
.dcc-callout--info    { background: var(--color-info-light);      border-left-color: var(--color-info); }
.dcc-callout--success { background: var(--color-success-light);   border-left-color: var(--color-success); }
.dcc-callout--success .dcc-callout__title { color: var(--color-success-deep); }
.dcc-callout--warning { background: var(--color-warning-light);   border-left-color: var(--color-warning); }
.dcc-callout--warning .dcc-callout__title { color: var(--color-warning-deep); }
.dcc-callout--danger  { background: var(--color-error-light);     border-left-color: var(--color-error); }
.dcc-callout--danger  .dcc-callout__title { color: var(--color-error); }

.dcc-callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* --- 4. Card top accents (replace inline border-top:#hex) ---------------- */
.dcc-top--brand   { border-top: 4px solid var(--color-primary) !important; }
.dcc-top--accent  { border-top: 4px solid var(--color-accent) !important; }
.dcc-top--info    { border-top: 4px solid var(--color-info) !important; }
.dcc-top--success { border-top: 4px solid var(--color-success-deep) !important; }
.dcc-top--warning { border-top: 4px solid var(--color-warning-deep) !important; }

/* --- 5. Marketing primitives (used by rebuilt for-libraries.html) -------- */
.dcc-page { color: var(--color-text); background: var(--color-bg); }

.dcc-shell {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.dcc-section { padding-block: var(--space-16); }
.dcc-section--tight { padding-block: var(--space-12); }
.dcc-section--surface { background: var(--color-surface); }
.dcc-section--brand {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.dcc-section--brand h1,
.dcc-section--brand h2,
.dcc-section--brand h3,
.dcc-section--brand p { color: var(--color-text-inverse); }

.dcc-section__lead {
  max-width: var(--content-max);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
}

.dcc-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-4);
  background: var(--color-surface-alt);
  color: var(--color-accent-deep);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}
.dcc-section--brand .dcc-eyebrow {
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-text-inverse);
}

/* Hero */
.dcc-hero { padding-block: var(--space-16); background: var(--color-surface-primary); }
.dcc-hero__grid {
  display: grid;
  gap: var(--space-12);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .dcc-hero__grid { grid-template-columns: 1.1fr 0.9fr; }
}
.dcc-hero h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-tight);
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
}
.dcc-hero__sub {
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  max-width: 40ch;
  margin: 0 0 var(--space-6);
}
.dcc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.dcc-hero__media img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Feature / value grid */
.dcc-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .dcc-grid--2 { grid-template-columns: repeat(2, 1fr); }
                             .dcc-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px)  { .dcc-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.dcc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.dcc-section--surface .dcc-card { background: var(--color-bg); }
.dcc-card__icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.dcc-card h3 {
  margin: 0;
  font-size: var(--font-size-h3);
  color: var(--color-primary);
}
.dcc-card p { margin: 0; line-height: var(--line-height-body); }

/* Numbered steps */
.dcc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  counter-reset: dcc-step;
}
.dcc-steps > li {
  position: relative;
  padding-left: calc(var(--space-12) + var(--space-2));
  counter-increment: dcc-step;
}
.dcc-steps > li::before {
  content: counter(dcc-step);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-circle);
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
}
.dcc-steps h3 { margin: 0 0 var(--space-2); font-size: var(--font-size-h4); color: var(--color-text); }
.dcc-steps p { margin: 0; }

/* CTA band */
.dcc-cta-band { text-align: center; }
.dcc-cta-band h2 { font-size: var(--font-size-h1); margin: 0 0 var(--space-4); }
.dcc-cta-band p { max-width: 52ch; margin: 0 auto var(--space-6); font-size: var(--font-size-lead); }
.dcc-cta-band .dcc-hero__actions { justify-content: center; }

/* --- 7. Module-page refinements (DCC v2 batch 1 migration) --------------- */
/* These replace the repeated inline styles in module-1…module-10 with
   token-driven, AA-safe classes. No content, links, or JS hooks change —
   selectors that touch JS hooks (.font-size-btn, .dcc-quiz-container) only
   restyle existing attributes, they never rename them. */

/* Plain-HTML fallback shown when JavaScript is unavailable (<noscript>). */
.dcc-noscript {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-5);
  font-family: var(--font-body);
}

/* Accessibility-bar text-size buttons: the glyph scales up by step. Was an
   inline font-size on each .font-size-btn (a JS hook). */
.font-size-btn[data-size="small"]  { font-size: var(--font-size-caption); }
.font-size-btn[data-size="medium"] { font-size: var(--font-size-sm); }
.font-size-btn[data-size="large"]  { font-size: var(--font-size-h5); }
.font-size-btn[data-size="xl"]     { font-size: var(--font-size-h3); }

/* Print-this-module row. */
.dcc-print-row { text-align: center; padding: var(--space-4) 0 var(--space-2); }

/* In-flow newsletter slot spacing (populated by JS). */
.dc-newsletter-slot { margin: var(--space-8) 0 var(--space-4); }

/* Token-driven spacing utilities (replace inline margin-top px/rem). */
.dcc-mt-2 { margin-top: var(--space-2); }
.dcc-mt-3 { margin-top: var(--space-3); }
.dcc-mt-8 { margin-top: var(--space-8); }

/* Bulleted / numbered lists inside tip and example blocks. */
.dcc-list {
  margin-top: var(--space-2);
  padding-left: var(--space-5);
  line-height: var(--line-height-body);
}

/* Row of secondary action buttons (e.g. scam deep-dive links). The legacy
   inline font-size (~13px) fell below the 16px senior minimum — lift to token. */
.dcc-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.dcc-btn-row .btn { font-size: var(--font-size-sm); }

/* Emphasised inline note — replaces hardcoded #1565C0 with the AA-safe brand
   teal (4.83:1 on page background; the blue was off-token). */
.dcc-note-strong { color: var(--color-primary); font-weight: var(--font-weight-semibold); }

/* Comparison / reference data tables — replaces inline table styling and the
   off-token #1565C0 header border. */
.dcc-data-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-4);
  font-size: var(--font-size-sm);
}
.dcc-data-table th,
.dcc-data-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
.dcc-data-table thead tr { border-bottom: 2px solid var(--color-info); }
.dcc-data-table tbody tr { border-bottom: 1px solid var(--color-border); }

/* Filled-header variant (module-10): teal header, zebra body rows. */
.dcc-data-table--filled thead tr {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-bottom: 0;
}
.dcc-data-table--filled th,
.dcc-data-table--filled td { padding: var(--space-3); }
.dcc-data-table--filled tbody tr:nth-child(even) { background: var(--color-surface-alt); }

/* --- 7b. Module-page refinements (DCC v3 batch 2 migration) -------------- */
/* These replace the repeated inline styles in module-11…module-20 with
   token-driven, AA-safe classes. As in batch 1, no content, links, or JS
   hooks change — selectors only restyle existing attributes. */

/* Summary checklist (module-11): the inline styles gave each label a
   flex-start, padded layout so multi-line items align under the checkbox.
   Preserve that intent on top of the shared .checklist base, token-driven. */
.dcc-checklist { margin-bottom: var(--space-6); }
.dcc-checklist label {
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
}
.dcc-checklist label input[type="checkbox"] {
  margin-top: var(--space-1);
  flex-shrink: 0;
}

/* Centre-aligned data columns (module-11 availability table): first column
   stays left, remaining columns centre. Higher specificity than the base
   left-aligned .dcc-data-table cells so it wins without !important. */
.dcc-data-table--center th:not(:first-child),
.dcc-data-table--center td:not(:first-child) { text-align: center; }

/* Small supplementary note text (module-14 privacy meter): replaces the
   off-token #666 colour and sub-floor 0.82rem with the token colour and the
   16px senior minimum. */
.dcc-meta-note { font-size: var(--font-size-sm); color: var(--color-text-light); }

/* --- 7c. Named-module refinements (DCC v4 batch 3 migration) ------------- */
/* Modules 21–27 and the named AI modules (module-ai-literacy, module-visual-ai,
   module-fact-check, module-ai-health) plus scam-simulator are moved onto this
   layer. Same rules as batch 1/2: replace presentational inline styles and
   off-token hex/px with token-driven, AA-safe classes. Content, links, and JS
   hooks are untouched. */

/* Spoken-script / sample-call box (module-25 "what to say when you call").
   Replaces inline italic + off-token #f0f7ff bg / #1565C0 border. Italics are
   dropped per the accessibility bar; the info-tinted card carries the meaning. */
.dcc-script {
  display: block;
  margin-block: var(--space-4);
  padding: var(--space-4);
  background: var(--color-info-light);
  border-radius: var(--radius-md);
  border-top: 4px solid var(--color-info);
  color: var(--color-text);
  line-height: var(--line-height-body);
}

/* Audience / category pill (module-ai-literacy). Replaces an inline off-token
   indigo badge whose 0.78rem text fell below the 16px senior floor. Primary on
   surface-primary is AA in both themes (light 4.51:1, dark 5.61:1). */
.dcc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-4);
  background: var(--color-surface-primary);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

/* Breadcrumb trail (module-ai-literacy). Replaces inline list reset + off-token
   colour fallbacks; links inherit the themed link colour. */
.dcc-breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Emphasised single line inside a tip block ("Stop. Breathe. Verify."). */
.dcc-tip-emphasis {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* --- 8. Utilities -------------------------------------------------------- */
.dcc-center { text-align: center; }
.dcc-measure { max-width: var(--content-max); }
.dcc-mt-0 { margin-top: 0; }
.dcc-mb-0 { margin-bottom: 0; }
.dcc-mt-4 { margin-top: var(--space-4); }
.dcc-stack > * + * { margin-top: var(--space-4); }
.dcc-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}