/* Quizzes suite styles — builds on shared.css + components.css.
   Accent: rose #b0355f / #e11d63. */
:root {
  --quiz-accent: #b0355f; --quiz-accent-2: #e11d63;
  /* Override the inherited health-suite green so the whole Quizzes suite
     (hero icon, links, card text, arrows, FAQ) reads rose. */
  --accent: #b0355f;
  --accent-h: #922c4f;
  --accent-bg: #fdf2f6;
  --accent-fg: #9d1239;
  --accent-light: #e11d63;
}

.quiz-form { display: flex; flex-direction: column; gap: 1rem; }
.quiz-q { border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 1rem 1.1rem; margin: 0; }
.quiz-q legend { font-weight: 600; padding: 0 .4rem; }
.quiz-opt { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .5rem; border-radius: 8px; cursor: pointer; }
.quiz-opt:hover { background: rgba(225,29,99,.06); }
.quiz-opt input { margin-top: .2rem; accent-color: var(--quiz-accent-2); }
.quiz-progress { font: 600 .95rem/1.4 'JetBrains Mono', monospace; color: var(--quiz-accent); margin: .25rem 0 1rem; }

.quiz-result { margin-top: 1.5rem; }
.quiz-profile h3 { margin: .2rem 0 .4rem; }
.quiz-profile .tagline { color: #6b7280; font-style: italic; margin-bottom: .8rem; }

.ll-breakdown { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.ll-row { display: grid; grid-template-columns: 11rem 1fr 3rem; align-items: center; gap: .6rem; }
.ll-row.is-top .ll-name { font-weight: 700; color: var(--quiz-accent); }
.ll-track { height: 12px; background: #f1f1f4; border-radius: 999px; overflow: hidden; }
.ll-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--quiz-accent), var(--quiz-accent-2)); border-radius: 999px; }
.ll-pct { text-align: right; font-variant-numeric: tabular-nums; }

.quiz-share { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.quiz-share-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1rem; border-radius: 10px; border: 1px solid var(--quiz-accent); background: #fff; color: var(--quiz-accent); font-weight: 600; cursor: pointer; }
.quiz-share-btn.primary { background: var(--quiz-accent); color: #fff; }
.quiz-share-canvas { display: none; }

@media (max-width: 560px) { .ll-row { grid-template-columns: 7rem 1fr 2.6rem; } }

.likert-opts { display: flex; flex-direction: column; gap: .15rem; }
.bf-reads { margin-top: 1.25rem; }
.bf-read { margin: 1rem 0; }
.bf-read h4 { margin: 0 0 .25rem; }
.bf-disclaimer { margin-top: 1.25rem; font-size: .85rem; color: #6b7280; }

/* Hub quiz cards (.related-tool-card grid) — markup copied from the health hub
   but its inline <style> was never carried over, so define it here where the
   rose --accent override applies. */
.related-tools { max-width: 900px; margin: 8px auto 0; padding: 0; }
.related-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.related-tool-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; background: var(--surface, #fff); border: 1px solid var(--border, #cdd1f0); border-radius: var(--radius-lg, 14px); padding: 18px; box-shadow: var(--shadow, 0 1px 3px rgba(20,21,46,.08)); text-decoration: none; transition: all .2s ease; }
.related-tool-card:hover { border-color: var(--accent, #b0355f); box-shadow: 0 8px 24px rgba(20,21,46,.15); transform: translateY(-2px); }
.related-tool-card .rc-body { flex: 1; min-width: 0; }
.related-tool-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 8px; color: var(--text, #14152e); }
.related-tool-card .rc-blurb { font-size: .88rem; color: var(--muted, #5a5f7a); line-height: 1.55; margin: 0 0 8px; }
.related-tool-card .rc-cat { font-size: .75rem; font-weight: 600; color: var(--accent, #b0355f); text-transform: uppercase; letter-spacing: .5px; margin: 0; }
.related-tool-card .rc-arrow { flex-shrink: 0; font-size: 1.2rem; color: var(--accent, #b0355f); opacity: .6; transition: opacity .2s; }
.related-tool-card:hover .rc-arrow { opacity: 1; }
@media (max-width: 600px) { .related-tools-grid { grid-template-columns: 1fr; } }

/* ---- Worksheets (Ikigai finder, Goal-setting) ---- */
.ik-form { display: flex; flex-direction: column; gap: 1.1rem; }
.ik-field { display: flex; flex-direction: column; gap: .3rem; }
.ik-label { font-weight: 700; color: var(--quiz-accent); }
.ik-hint { margin: 0; font-size: .85rem; color: #6b7280; }
.ik-input { width: 100%; padding: .6rem .7rem; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; font: inherit; resize: vertical; }
.ik-input:focus { outline: 2px solid var(--quiz-accent-2); outline-offset: 1px; border-color: var(--quiz-accent-2); }
.ik-go { align-self: flex-start; margin-top: .25rem; }
.ik-sub { margin: 1.4rem 0 .6rem; }

.ik-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin: 1rem 0; }
.ik-circle { border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: .8rem .9rem; }
.ik-circle h4 { margin: 0 0 .3rem; color: var(--quiz-accent); }
.ik-circle p { margin: 0; }
.ik-empty { color: #9ca3af; font-style: italic; }

.ik-zones { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.ik-zone { background: var(--accent-bg, #fdf2f6); border-radius: 12px; padding: .8rem .9rem; }
.ik-zone h4 { margin: 0 0 .1rem; }
.ik-zone-pair { margin: 0 0 .4rem; font: 600 .8rem/1.3 'JetBrains Mono', monospace; color: var(--quiz-accent); }
.ik-zone p { margin: 0; font-size: .9rem; }
.ik-center { margin: 1.3rem 0 0; padding: .9rem 1rem; border: 2px dashed var(--quiz-accent); border-radius: 12px; text-align: center; }
.ik-center-partial { border-style: solid; border-color: var(--border, #e5e7eb); color: #6b7280; }

@media (max-width: 560px) { .ik-grid, .ik-zones { grid-template-columns: 1fr; } }

.gs-statement { font-size: 1.15rem; font-weight: 600; line-height: 1.5; margin: .4rem 0 1rem; padding: .9rem 1rem; background: var(--accent-bg, #fdf2f6); border-left: 4px solid var(--quiz-accent); border-radius: 0 10px 10px 0; }
.gs-why { margin: 0 0 1rem; color: #374151; }
.gs-checklist { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.gs-check { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.gs-check.is-todo { color: #9ca3af; font-weight: 500; }
.gs-mark { display: inline-flex; }
.gs-check.is-done .gs-mark { color: var(--quiz-accent); }
.gs-firststep { margin-top: 1.2rem; }
.gs-firststep h4 { margin: 0 0 .25rem; }

/* Worksheet actions (New test / Print) — shared by IQ + reasoning tests */
.ws-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0 0; }
.ws-actions .btn { flex: 1 1 0; min-width: max-content; height: 48px; min-height: 0; margin: 0; }
.ws-btn { cursor: pointer; }
.ws-print-head { display: none; }

/* Print = a clean, answer-free worksheet: keep only the questions */
@media print {
  .site-header, .site-nav, .tool-hero .subtitle, .iq-note, .rt-note,
  .iq-controls, .rt-controls, #iq-submit, #rt-submit, .ws-actions,
  .quiz-result, .fine-print, .section, .faq, .related-tools,
  .site-footer, footer, .hero-icon { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }
  .calc-layout, .calc-content, main, .card {
    margin: 0 !important; padding: 0 !important; max-width: none !important;
    border: none !important; box-shadow: none !important; background: #fff !important;
  }
  .tool-hero { margin: 0 0 .4rem !important; padding: 0 !important; }
  .tool-hero h1 { font-size: 18pt !important; margin: 0 !important; }

  .ws-print-head { display: block !important; margin: 4pt 0 12pt; font: 400 10pt/1.55 sans-serif; color: #000; }
  .ws-print-head .ws-nd span { display: inline-block; min-width: 150pt; border-bottom: 1px solid #000; margin: 0 14pt 0 4pt; }

  /* questions never split across pages */
  .quiz-q { break-inside: avoid; page-break-inside: avoid; border: none !important; margin: 0 0 12pt !important; padding: 0 !important; }
  .quiz-q legend { font: 600 11pt/1.4 sans-serif; color: #000; }
  .iq-cat, .rt-cat { color: #000 !important; background: none !important; border: 1px solid #000 !important; }
  .iq-stem, .rt-stem, .iq-svg, .rt-svg { color: #000 !important; }

  /* every option shows an identical EMPTY ballot circle — the on-screen selection is never revealed */
  .iq-opt:not(.iq-opt-svg), .rt-opt:not(.rt-opt-svg) {
    display: flex; align-items: center; gap: 8pt; padding: 1.5pt 0 !important; background: none !important;
  }
  .quiz-opt input[type=radio] {
    -webkit-appearance: none; appearance: none; position: static !important; opacity: 1 !important;
    width: 11pt; height: 11pt; min-width: 11pt; margin: 0; border: 1.2pt solid #000;
    border-radius: 50%; background: #fff !important; box-shadow: none !important;
  }
  /* shape-option questions: left-aligned wrapping row (overrides the on-screen centered column) */
  .iq-opts-svg, .rt-opts-svg { flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 12pt !important; margin-top: 6pt; }
  .iq-opt-svg, .rt-opt-svg { align-items: center; gap: 6pt; padding: 4pt !important; border: 1px solid #000 !important; box-shadow: none !important; }
}

/* Single-link header nav: keep the sole "Tools" link visible at all widths
   (no hamburger needed for one short link). Overrides shared.css .nav-link{display:none}. */
.site-header .site-nav .nav-link { display: inline-flex; }