/* CIVIO page-specific styles
   Source: notes/dx-starts-with-questions.html
   Purpose: separated from HTML for maintainability and AI-assisted editing. */
.question-dx-article .civio-interactive{margin:2.4rem 0;padding:1.5rem;border:1px solid rgba(12,12,12,.14);border-radius:18px;background:linear-gradient(180deg,#fff 0%,#fafafa 100%);box-shadow:0 14px 38px rgba(0,0,0,.045)}
.question-dx-article .civio-interactive h2,.question-dx-article .civio-interactive h3{margin-top:.25rem}
.question-dx-article .civio-interactive-kicker{font-size:.72rem;font-weight:800;letter-spacing:.14em;color:#a22424}
.question-dx-article .civio-tabs{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.1rem 0}
.question-dx-article .civio-tab{appearance:none;border:1px solid #d1d1d1;border-radius:999px;background:#fff;color:#202020;padding:.68rem 1rem;font:inherit;font-weight:700;cursor:pointer;transition:.18s ease}
.question-dx-article .civio-tab:hover,.question-dx-article .civio-tab:focus-visible{border-color:#8b1f1f;transform:translateY(-1px)}
.question-dx-article .civio-tab.is-active{background:#171717;border-color:#171717;color:#fff}
.question-dx-article .civio-panel{padding:1rem 1.1rem;border-left:4px solid #a22424;background:#fff;border-radius:0 12px 12px 0}
.question-dx-article .civio-panel p:last-child{margin-bottom:0}
.question-dx-article [hidden]{display:none!important}
.question-dx-article .civio-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1.2rem 0}
.question-dx-article .civio-choice{appearance:none;text-align:left;border:1px solid #d7d7d7;border-radius:14px;background:#fff;padding:1rem;cursor:pointer;transition:.18s ease}
.question-dx-article .civio-choice:hover,.question-dx-article .civio-choice:focus-visible,.question-dx-article .civio-choice.is-active{border-color:#9b2424;box-shadow:0 8px 24px rgba(0,0,0,.07);transform:translateY(-2px)}
.question-dx-article .civio-choice b,.question-dx-article .civio-choice span{display:block}
.question-dx-article .civio-choice span{margin-top:.3rem;color:#666;font-size:.9rem}
.question-dx-article .civio-answer-box{min-height:6.5rem;padding:1.1rem;border-radius:14px;background:#181818;color:#fff}
.question-dx-article .civio-answer-box p{margin:.5rem 0 0;color:#e9e9e9}
.question-dx-article .civio-question-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.question-dx-article .civio-question-card{appearance:none;text-align:left;border:1px solid #d8d8d8;border-radius:14px;background:#fff;padding:1rem;cursor:pointer}
.question-dx-article .civio-question-card strong,.question-dx-article .civio-question-card span{display:block}
.question-dx-article .civio-card-phase{font-size:.75rem;font-weight:800;letter-spacing:.08em;color:#9b2424;margin-bottom:.45rem}
.question-dx-article .civio-card-answer{display:none!important;margin-top:.75rem;padding-top:.75rem;border-top:1px solid #e5e5e5;color:#555;font-size:.92rem;line-height:1.7}
.question-dx-article .civio-question-card.is-open .civio-card-answer{display:block!important}
.question-dx-article .civio-flow--interactive{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;margin:1rem 0}
.question-dx-article .civio-flow--interactive .civio-flow-step{appearance:none;border:1px solid #d7d7d7;border-radius:14px;background:#fff;padding:.9rem .55rem;cursor:pointer;text-align:center}
.question-dx-article .civio-flow--interactive .civio-flow-step b,.question-dx-article .civio-flow--interactive .civio-flow-step span{display:block}
.question-dx-article .civio-flow--interactive .civio-flow-step b{font-size:.75rem;color:#9b2424}
.question-dx-article .civio-flow--interactive .civio-flow-step.is-active{background:#171717;color:#fff;border-color:#171717}
.question-dx-article .civio-flow-caption{padding:1rem 1.1rem;border-radius:12px;background:#f0f0f0;min-height:4.2rem}
.question-dx-article .civio-accordion{display:grid;gap:.6rem}
.question-dx-article .civio-accordion details{border:1px solid #ddd;border-radius:12px;background:#fff;padding:.1rem 1rem}
.question-dx-article .civio-accordion summary{display:flex;gap:.8rem;align-items:center;cursor:pointer;padding:1rem 0;font-weight:700}
.question-dx-article .civio-accordion summary b{color:#9b2424}
.question-dx-article .civio-accordion details p{padding:0 0 1rem;margin:0;color:#555}
.question-dx-article .civio-stepper{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;margin:1rem 0}
.question-dx-article .civio-stepper button{appearance:none;border:1px solid #d8d8d8;border-radius:12px;background:#fff;padding:.8rem .4rem;cursor:pointer}
.question-dx-article .civio-stepper button b,.question-dx-article .civio-stepper button span{display:block}
.question-dx-article .civio-stepper button b{font-size:.72rem;color:#9b2424}
.question-dx-article .civio-stepper button.is-active{background:#171717;color:#fff;border-color:#171717}
.question-dx-article .civio-step-panel{padding:1rem 1.1rem;border-radius:12px;background:#fff;border-left:4px solid #a22424}
.question-dx-article .civio-translation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.question-dx-article .civio-translation-grid>div{padding:1rem;border:1px solid #ddd;border-radius:14px;background:#fff}
.question-dx-article .civio-translation-grid span{display:inline-block;font-weight:800;color:#9b2424;margin-bottom:.3rem}
.question-dx-article .civio-number-list{display:grid;gap:.75rem;padding-left:0;counter-reset:civio-num}
.question-dx-article .civio-number-list li{list-style:none;display:grid;grid-template-columns:1fr;gap:.25rem;padding:1rem 1rem 1rem 3.2rem;border-left:3px solid #a22424;background:#fafafa;position:relative}
.question-dx-article .civio-number-list li:before{counter-increment:civio-num;content:counter(civio-num);position:absolute;left:1rem;top:1rem;font-weight:900;color:#a22424}
.question-dx-article .civio-number-list span{color:#555}
.question-dx-article .civio-check-result{margin-top:1rem;padding:1rem;border-radius:14px;background:#181818;color:#fff}
.question-dx-article .civio-check-result p{color:#ededed}
.question-dx-article .civio-reset-button{appearance:none;border:1px solid #777;border-radius:999px;background:transparent;color:#fff;padding:.55rem .9rem;cursor:pointer}
.question-dx-article .civio-conclusion-cycle{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:1.5rem 0;padding:1rem;border-radius:14px;background:#f3f3f3}
.question-dx-article .civio-conclusion-cycle span{font-weight:700}
.question-dx-article .civio-conclusion-cycle b{color:#a22424}
.question-dx-article .civio-final-question{margin:2rem 0;padding:1.35rem;border-top:1px solid #222;border-bottom:1px solid #222;text-align:center}
.question-dx-article .civio-final-question span,.question-dx-article .civio-final-question strong{display:block}
.question-dx-article .civio-final-question span{font-size:.75rem;letter-spacing:.12em;color:#777}
.question-dx-article .civio-final-question strong{margin-top:.55rem;font-size:clamp(1.25rem,3vw,2rem)}
@media (max-width:760px){
.question-dx-article .civio-interactive{padding:1.1rem;border-radius:14px}
.question-dx-article .civio-choice-grid,.question-dx-article .civio-translation-grid{grid-template-columns:1fr}
.question-dx-article .civio-question-grid{grid-template-columns:1fr}
.question-dx-article .civio-flow--interactive,.question-dx-article .civio-stepper{grid-template-columns:repeat(5,minmax(70px,1fr));overflow-x:auto;padding-bottom:.4rem}
.question-dx-article .civio-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.35rem}
.question-dx-article .civio-tab{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
.question-dx-article *{scroll-behavior:auto!important;transition:none!important}
}

/* Explicit button contrast and state styles */
.question-dx-article .civio-choice,.question-dx-article .civio-choice b,.question-dx-article .civio-choice span,
.question-dx-article .civio-question-card,.question-dx-article .civio-question-card strong,.question-dx-article .civio-question-card span,
.question-dx-article .civio-tab:not(.is-active),.question-dx-article .civio-stepper button:not(.is-active),
.question-dx-article .civio-flow-step:not(.is-active){color:#111!important;-webkit-text-fill-color:#111!important}
.question-dx-article .civio-tab.is-active,.question-dx-article .civio-tab.is-active *,
.question-dx-article .civio-stepper button.is-active,.question-dx-article .civio-stepper button.is-active *,
.question-dx-article .civio-flow-step.is-active,.question-dx-article .civio-flow-step.is-active *{color:#fff!important;-webkit-text-fill-color:#fff!important}
.question-dx-article .civio-choice.is-active{background:#fff1f2!important;border-color:var(--cv-red)!important;box-shadow:inset 5px 0 0 var(--cv-red)!important}
.question-dx-article .civio-question-card.is-open{background:#fff7f7!important;border-color:var(--cv-red)!important}
.question-dx-article .civio-question-card.is-open .civio-card-answer{display:block!important;color:#444!important;-webkit-text-fill-color:#444!important}
.question-dx-article [hidden]{display:none!important}
.question-dx-article .civio-check-result{background:#111!important;color:#fff!important;border-left:6px solid var(--cv-red)!important}
.question-dx-article .civio-check-result #dx-check-progress{background:#fff!important;color:#111!important;-webkit-text-fill-color:#111!important;border-left:5px solid var(--cv-red)!important}
.question-dx-article .civio-check-result #dx-check-message{color:#fff!important;-webkit-text-fill-color:#fff!important}
.question-dx-article .civio-reset-button{background:#111!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:1px solid #666!important;border-radius:0!important}



/* CIVIO site-axis alignment */
body.cv-article-page .question-dx-article > .civio-reading-note{
  width:min(var(--article-read),calc(100% - 72px))!important;
  max-width:var(--article-read)!important;
  margin:34px auto 10px!important;
  padding:22px 24px!important;
  border:1px solid #d7d7d3!important;
  border-left:5px solid var(--cv-red)!important;
  border-radius:0!important;
  background:#f7f7f5!important;
  color:#333!important;
  box-shadow:none!important;
}
body.cv-article-page .question-dx-article > .civio-reading-note strong{color:#111!important;}
body.cv-article-page .question-dx-article .civio-title{
  max-width:980px!important;
  text-wrap:balance;
}
body.cv-article-page .question-dx-article .civio-lead{
  max-width:850px!important;
}
body.cv-article-page .question-dx-article .civio-interactive{
  border-radius:0!important;
  border:1px solid #cfcfcb!important;
  border-top:5px solid var(--cv-red)!important;
  background:#f7f7f5!important;
  color:#111!important;
  box-shadow:8px 8px 0 rgba(17,17,17,.10)!important;
}
body.cv-article-page .question-dx-article .civio-interactive :is(h2,h3,strong){color:#111!important;}
body.cv-article-page .question-dx-article .civio-interactive p{color:#4b4b4b!important;}
body.cv-article-page .question-dx-article .civio-interactive-kicker{
  display:inline-block!important;
  margin-bottom:8px!important;
  padding:4px 8px!important;
  background:#111!important;
  color:#fff!important;
  font:900 10px/1.4 monospace!important;
  letter-spacing:.12em!important;
}
body.cv-article-page .question-dx-article :is(.civio-panel,.civio-choice,.civio-question-card,.civio-flow-step,.civio-stepper button,.civio-translation-grid>div,.civio-accordion details,.civio-answer-box,.civio-step-panel,.civio-check-result,.civio-final-question){
  border-radius:0!important;
}
body.cv-article-page .question-dx-article .civio-choice{
  border-left:4px solid #111!important;
  background:#fff!important;
  color:#111!important;
  box-shadow:none!important;
}
body.cv-article-page .question-dx-article .civio-choice:hover,
body.cv-article-page .question-dx-article .civio-choice.is-active{
  border-color:var(--cv-red)!important;
  border-left-color:var(--cv-red)!important;
  background:#fff7f7!important;
  transform:translateY(-1px)!important;
}
body.cv-article-page .question-dx-article .civio-answer-box,
body.cv-article-page .question-dx-article .civio-check-result{
  border:1px solid #111!important;
  border-left:6px solid var(--cv-red)!important;
  background:#111!important;
  color:#fff!important;
}
body.cv-article-page .question-dx-article .civio-answer-box :is(p,strong),
body.cv-article-page .question-dx-article .civio-check-result :is(p,strong,div){color:#fff!important;}
body.cv-article-page .question-dx-article .civio-question-card{
  border-top:4px solid #111!important;
}
body.cv-article-page .question-dx-article .civio-question-card.is-open{
  border-top-color:var(--cv-red)!important;
}
body.cv-article-page .question-dx-article .civio-flow--interactive .civio-flow-step,
body.cv-article-page .question-dx-article .civio-stepper button{
  min-height:72px!important;
  background:#fff!important;
  color:#111!important;
}
body.cv-article-page .question-dx-article .civio-flow--interactive .civio-flow-step.is-active,
body.cv-article-page .question-dx-article .civio-stepper button.is-active{
  border-color:var(--cv-red)!important;
  background:var(--cv-red)!important;
  color:#fff!important;
}
body.cv-article-page .question-dx-article .civio-flow--interactive .civio-flow-step.is-active :is(b,span),
body.cv-article-page .question-dx-article .civio-stepper button.is-active :is(b,span){color:#fff!important;}
body.cv-article-page .question-dx-article .civio-flow-caption,
body.cv-article-page .question-dx-article .civio-step-panel{
  border:1px solid #d5d5d1!important;
  border-left:5px solid var(--cv-red)!important;
  background:#fff!important;
  color:#333!important;
}
body.cv-article-page .question-dx-article .civio-accordion details{
  border-left:4px solid #111!important;
  background:#fff!important;
}
body.cv-article-page .question-dx-article .civio-accordion details[open]{border-left-color:var(--cv-red)!important;}
body.cv-article-page .question-dx-article .civio-number-list li{
  border-left:5px solid var(--cv-red)!important;
  background:#f7f7f5!important;
}
body.cv-article-page .question-dx-article .civio-conclusion-cycle{
  border:1px solid #d5d5d1!important;
  border-radius:0!important;
  background:#f5f5f3!important;
}
body.cv-article-page .question-dx-article .civio-final-question{
  padding:24px!important;
  border:0!important;
  border-left:8px solid var(--cv-red)!important;
  background:#111!important;
  color:#fff!important;
  text-align:left!important;
}
body.cv-article-page .question-dx-article .civio-final-question span{color:#bbb!important;}
body.cv-article-page .question-dx-article .civio-final-question strong{color:#fff!important;}
body.cv-article-page .question-dx-article .civio-references > h3{
  margin:0 0 14px!important;
  color:#666!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
}
body.cv-article-page .question-dx-article .civio-ref-group{
  border-radius:0!important;
  border:1px solid #d7d7d3!important;
  background:#fff!important;
}
body.cv-article-page .question-dx-article .civio-ref-group summary{
  padding:15px 16px!important;
  border-left:5px solid #111!important;
}
body.cv-article-page .question-dx-article .civio-ref-group[open] summary{
  border-left-color:var(--cv-red)!important;
  background:#f7f7f5!important;
}
@media(max-width:760px){
  body.cv-article-page .question-dx-article > .civio-reading-note{
    width:calc(100% - 32px)!important;
    margin:24px auto 8px!important;
    padding:18px!important;
  }
  body.cv-article-page .question-dx-article .civio-title{
    font-size:clamp(31px,9.5vw,46px)!important;
  }
  body.cv-article-page .question-dx-article .civio-flow--interactive,
  body.cv-article-page .question-dx-article .civio-stepper{
    display:grid!important;
    grid-template-columns:1fr!important;
    overflow:visible!important;
  }
  body.cv-article-page .question-dx-article .civio-tabs{
    display:flex!important;
    flex-wrap:wrap!important;
    overflow:visible!important;
  }
  body.cv-article-page .question-dx-article .civio-tab{
    flex:1 1 135px!important;
    white-space:normal!important;
  }
}

/* Check result contrast: existing shared CSS used a pale progress background with inherited white text. */
body.cv-article-page .question-dx-article .civio-check-result > .civio-check-progress{
  margin:0 0 12px!important;
  padding:14px 16px!important;
  border:1px solid #d7d7d3!important;
  border-left:5px solid var(--cv-red)!important;
  border-radius:0!important;
  background:#fff!important;
  color:#111!important;
  font-weight:900!important;
}
body.cv-article-page .question-dx-article .civio-check-result > .civio-check-progress *{color:#111!important;}
body.cv-article-page .question-dx-article .civio-check-result > p{color:#fff!important;}