/* Shared visual bridge, loaded AFTER legacy/Bootstrap/Tailwind styles.
   No layout positioning, permission, print, timer or answer-state changes.
   Existing gold-primary tokens remain the source of truth. */
@media screen {
  html[data-site-design="chalk-v2"] body {
    font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
  }
  html[data-site-design="chalk-v2"] .page {
    min-width: 0;
  }
  html[data-site-design="chalk-v2"] .workspace-heading-tw h1 { text-align: left; margin: 0; }
  html[data-site-design="chalk-v2"] .workspace-tw table { font-variant-numeric: tabular-nums; }
  html[data-site-design="chalk-v2"] .workspace-tw .input-tw { border-radius: 10px; min-height: 44px; }
  /* Keep existing answer-state meanings readable on dark surfaces. */
  html[data-site-design="chalk-v2"][data-bs-theme="dark"] .workspace-tw :is(.badge-oson,.nav-dot.correct,.nav-dot.answered) { color: #86efac; }
  html[data-site-design="chalk-v2"][data-bs-theme="dark"] .workspace-tw :is(.badge-qiyin,.nav-dot.incorrect) { color: #fca5a5; }
  html[data-site-design="chalk-v2"][data-bs-theme="dark"] .workspace-tw :is(.badge-orta,.nav-dot.flagged) { color: #fcd34d; }
  html[data-site-design="chalk-v2"][data-bs-theme="dark"] .workspace-tw .variant.correct .variant-letter { background: #166534; color: #fff; }
  /* Bootstrap's global link rule must not repaint sidebar navigation. */
  html[data-site-design="chalk-v2"] .nav-bar a {
    color: var(--text-muted);
    min-height: 44px;
  }
  html[data-site-design="chalk-v2"] .nav-bar a:is(:hover,.active) {
    color: var(--text);
    background: var(--primary-light);
  }
  html[data-site-design="chalk-v2"] .nav-bar a.brand { color: var(--text); }
  html[data-site-design="chalk-v2"] .page a:is(.btn-tw-primary,.btn-tw-secondary,.btn-tw-board) { text-decoration: none; }
  html[data-site-design="chalk-v2"] .page a.btn-tw-primary { color: var(--ink-on-gold); }
  html[data-site-design="chalk-v2"] .page a.btn-tw-secondary { color: var(--text); }
  html[data-site-design="chalk-v2"] .page a.btn-tw-board { color: var(--accent-ink); }
  html[data-site-design="chalk-v2"] .page a.card-tw-hover { color: var(--text); text-decoration: none; }
  html[data-site-design="chalk-v2"] .page a.text-primary-dark { color: var(--text); text-decoration-color: var(--primary); }
  html[data-site-design="chalk-v2"] .page :is(h1,h2,h3) {
    text-wrap: balance;
  }
  html[data-site-design="chalk-v2"] .page h1 {
    font-family: 'Bitter', Georgia, serif;
    letter-spacing: -.025em;
  }
  html[data-site-design="chalk-v2"] .page > .container {
    max-width: 1280px;
  }
  html[data-site-design="chalk-v2"] .page .card {
    --bs-card-bg: var(--surface);
    --bs-card-color: var(--text);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: 16px;
    border-radius: 16px;
    border-color: var(--border);
    background: var(--surface);
    box-shadow: 0 2px 6px rgba(22,51,42,.04);
  }
  html[data-site-design="chalk-v2"] .page .card:hover {
    box-shadow: 0 2px 6px rgba(22,51,42,.04);
  }
  html[data-site-design="chalk-v2"] .page .card-header {
    padding: 16px 20px;
    background: transparent;
    border-bottom-color: var(--border);
    font-weight: 700;
    color: var(--text);
  }
  html[data-site-design="chalk-v2"] .page .card-body { padding: 20px; }
  /* Modal windows may sit outside .page; keep their own surface/ink paired. */
  html[data-site-design="chalk-v2"] .modal-content {
    --bs-modal-bg: var(--surface);
    --bs-modal-color: var(--text);
    --bs-modal-border-color: var(--border);
    --bs-modal-header-border-color: var(--border);
    --bs-modal-footer-border-color: var(--border);
    background-color: var(--surface);
    color: var(--text);
  }
  html[data-site-design="chalk-v2"] .modal-content :is(.form-control,.form-select) {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border);
  }
  html[data-site-design="chalk-v2"] .modal-content :is(.form-control,.form-select)::placeholder {
    color: var(--text-muted);
    opacity: 1;
  }
  html[data-site-design="chalk-v2"] .page :is(.form-control,.form-select) {
    min-height: 44px;
    border-radius: 10px;
    border-color: var(--border);
    background-color: var(--surface);
    color: var(--text);
    font-family: inherit;
  }
  html[data-site-design="chalk-v2"] .page :is(.form-control,.form-select)::placeholder {
    color: var(--text-muted);
    opacity: 1;
  }
  html[data-site-design="chalk-v2"] .page .btn {
    min-height: 44px;
    border-radius: 10px;
    font-weight: 700;
    font-family: inherit;
  }
  html[data-site-design="chalk-v2"] .page .btn-primary {
    --bs-btn-color: var(--ink-on-gold);
    --bs-btn-hover-color: var(--ink-on-gold);
    --bs-btn-active-color: var(--ink-on-gold);
    --bs-btn-disabled-color: var(--ink-on-gold);
    color: var(--ink-on-gold);
    background-color: var(--primary);
    border-color: var(--primary);
  }
  html[data-site-design="chalk-v2"] .page .table {
    --bs-table-color: var(--text);
    --bs-table-bg: var(--surface);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: color-mix(in srgb,var(--text) 3%,var(--surface));
    --bs-table-hover-bg: color-mix(in srgb,var(--primary) 8%,var(--surface));
    font-size: 15px;
    font-variant-numeric: tabular-nums;
  }
  html[data-site-design="chalk-v2"] .page .table > :not(caption) > * > * { padding: 14px 16px; }
  html[data-site-design="chalk-v2"] .page .table th { font-size: 13px; font-weight: 700; }
  html[data-site-design="chalk-v2"] :is(a,button,input,select,textarea,summary):focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
  }
  html[data-site-design="chalk-v2"] .landing-hero {
    border-radius: 24px;
  }
  html[data-site-design="chalk-v2"] .landing-hero-copy > p {
    max-width: 55ch;
    line-height: 1.7;
  }
  html[data-site-design="chalk-v2"] .landing-hero h1 {
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  html[data-site-design="chalk-v2"] .landing-hero-cta { flex-wrap: wrap; }
  html[data-site-design="chalk-v2"] .landing-hero-cta a.landing-btn-secondary { color: var(--text); }
  html[data-site-design="chalk-v2"][data-bs-theme="light"] .landing-hero h1 span {
    color: var(--ink-on-gold);
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-decoration-thickness: 3px;
    text-underline-offset: .12em;
  }
  html[data-site-design="chalk-v2"] .public-footer { border-top: 1px solid var(--border); }
  @media (max-width: 640px) {
    html[data-site-design="chalk-v2"] .page .card-body { padding: 16px; }
    html[data-site-design="chalk-v2"] .page .card-header { padding: 14px 16px; }
    html[data-site-design="chalk-v2"] .page .table > :not(caption) > * > * { padding: 12px; }
    html[data-site-design="chalk-v2"] .landing-hero { border-radius: 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-site-design="chalk-v2"] { scroll-behavior: auto; }
    html[data-site-design="chalk-v2"] .page :is(.btn,.card) { transition: none; }
  }
}