/* ===========================================================================
   RTHG survey styling for Qualtrics. Paste into: Look & Feel > Style > Custom CSS
   No JavaScript required (tooltips are pure CSS). Built to match the live
   instrument 1:1: Inter body / Cormorant serif page titles, slate-50 (#f8fafc)
   page background, white shadowed cards, brand-blue accents. Verified against the
   live preview DOM (table-based ChoiceStructure layout) on 2026-06-14.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap');

/* ---- Page chrome: grey study shell + Inter, matching the live bg-slate-50 ---- */
body,.Skin,.Skin .SkinInner,#SkinContent,.QSIScreen,div[role="main"]{background:#f8fafc !important}
body,.Skin,.QuestionText,.QuestionBody,.rthg-doc,input,textarea,select,button{font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif}

/* Qualtrics' own question prompt -> live "text-base font-semibold text-slate-900".
   .rthg-doc resets weight to 400 below so descriptive blocks are not all-bold. */
.QuestionText{font-size:16px !important;font-weight:600 !important;line-height:1.5 !important;color:#0f172a !important;text-align:left}
.rthg-helper{display:block;font-size:13px;font-weight:400;color:#64748b;margin-top:4px}

/* ---- Descriptive blocks: welcome, instructions, ballot, mechanism, debrief */
.rthg-doc{font-size:15px;line-height:1.65;color:#1e293b;max-width:760px;margin:0 auto;font-weight:400}
.rthg-doc h3{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-size:34px;font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0 0 6px;color:#0f172a}
.rthg-doc h4{font-size:16px;font-weight:700;margin:18px 0 6px;color:#0f172a}
.rthg-doc p{margin:12px 0;font-weight:400}
.rthg-doc ul{margin:10px 0;padding-left:22px}
.rthg-doc li{margin:5px 0;font-weight:400}
.rthg-doc strong{font-weight:600;color:#0f172a}
.rthg-doc em{color:#334155}
.rthg-doc .rthg-subtitle{font-size:16px;color:#475569;margin:12px 0 0}

/* White shadowed card (live: rounded-xl border-slate-200 bg-white shadow-soft).
   Used for ballot body, welcome, instructions, debrief content. */
.rthg-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px 28px;margin:16px auto 0;max-width:760px;box-shadow:0 8px 28px rgba(0,0,0,.08);box-sizing:border-box}
.rthg-card > :first-child{margin-top:0}
.rthg-card > :last-child{margin-bottom:0}

/* Horizontal rule between ballot sections (live: border-t border-slate-100) */
.rthg-rule{border:0;border-top:1px solid #e2e8f0;margin:20px 0}
.rthg-mech .rthg-rule,.rthg-card .rthg-rule{border-top-color:#f1f5f9}

/* Ballot section: bold inline label then text, no separate heading line */
.rthg-sec{margin:0}
.rthg-sec p{margin:0}
.rthg-sec-label{font-weight:600;color:#0f172a}

/* Framing / emphasis lines */
.rthg-doc .rthg-lead{font-size:17px;margin-top:4px}
.rthg-doc .rthg-emphasis{font-size:16px;line-height:1.5;margin:14px 0 4px;padding:12px 16px;background:#f8fafc;border-left:3px solid #0f172a;border-radius:6px}
.rthg-doc .rthg-scale-note{font-size:14px;color:#475569;margin-top:14px}

/* Principle item number (matches live brand-600 "1." before each statement) */
.rthg-qnum{color:#1e66d6;font-weight:700;margin-right:6px}
/* Renumber Section B items by DISPLAY position. The QSF hardcodes each item's
   canonical index in the question text, but Qualtrics randomization shuffles
   the items, so the hardcoded numbers would appear out of order (1, 7, 2, ...).
   The live web instrument numbers by display position; this CSS counter makes
   Qualtrics match it: hide the hardcoded number (font-size:0) and render a
   position-based counter instead. */
#Questions{counter-reset:rthg-bq}
.rthg-qnum{font-size:0 !important}
.rthg-qnum::before{counter-increment:rthg-bq;content:counter(rthg-bq) ".";font-size:15px;font-weight:700;color:#1e66d6}

/* Callout boxes (live: brand-50/40 + brand-200, emerald-50/40 + emerald-200) */
.rthg-callout{border:1px solid #e2e8f0;background:#f8fafc;border-radius:12px;padding:18px 20px;margin:0 auto;max-width:760px;text-align:left;box-shadow:0 8px 28px rgba(0,0,0,.08)}
.rthg-callout + .rthg-callout{margin-top:18px}
.rthg-callout > h4:first-child,.rthg-callout > h3:first-child{margin-top:0;font-size:16px;font-weight:600}
.rthg-callout p{font-size:15px;line-height:1.6;color:#1e293b;margin:0}
.rthg-callout-brand{border-color:#bbd9ff;background:rgba(241,247,255,.6)}
.rthg-callout-emerald{border-color:#a7f3d0;background:rgba(240,253,246,.6)}
.rthg-callout-lead{font-size:14px;font-style:italic;color:#64748b;margin:4px 0 0 !important}
.rthg-callout-outro{font-size:14px;font-style:italic;color:#64748b;margin-top:12px !important}

/* Bulleted lists with colored dots (live: small rounded dots, brand/emerald).
   Items are <div class="rthg-dot"> (not <li>): Qualtrics strips <ul>/<li> from
   imported question HTML, so divs are used to keep bullets and line breaks. */
.rthg-dots{margin:12px 0 0}
.rthg-dots .rthg-dot{position:relative;padding-left:22px;margin:9px 0;line-height:1.6;font-size:15px;color:#1e293b}
.rthg-dots .rthg-dot::before{content:"";position:absolute;left:4px;top:9px;width:6px;height:6px;border-radius:50%;background:#94a3b8}
.rthg-dots-brand .rthg-dot::before{background:#2c86ff}
.rthg-dots-emerald .rthg-dot::before{background:#10b981}
.rthg-dots-rose .rthg-dot::before{background:#f43f5e}

/* Mechanism option content (lives INSIDE the rating question's .Inner.SAHR card,
   so no border/shadow of its own; the card supplies those). */
.rthg-mech{max-width:none;margin:0}
.rthg-mech-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px !important;font-weight:600 !important;line-height:1.15 !important;margin:0 0 4px !important;letter-spacing:-.01em;color:#0f172a}
.rthg-mech-subtitle{font-size:14px;font-weight:500;color:#334155;margin:0 0 4px !important}
.rthg-mech-rateprompt{font-size:14px !important;font-weight:600 !important;color:#0f172a;margin:0 0 4px !important}

/* Stimulus statement (verasight lead pages): the rated sentence itself, bold and
   large, matching the live StimulusCard exactly: Source Serif 4 ("font-stimulus"
   in the site's tailwind config), 24px mobile / 28px desktop, bold, snug leading,
   inside a white card with a 4px brand-blue left accent. A class (not an inline
   style) because Qualtrics strips style attributes from question text on import. */
.rthg-stimulus{font-family:'Source Serif 4',Georgia,Cambria,serif !important;font-size:24px !important;font-weight:700 !important;line-height:1.375 !important;color:#0f172a;margin:0 !important}
@media(min-width:640px){.rthg-stimulus{font-size:28px !important}}
.rthg-stimulus-card{background:#fff;border:1px solid #e2e8f0;border-left:4px solid #1e66d6;border-radius:12px;padding:24px 28px;margin:0 0 16px;box-shadow:0 1px 2px rgba(0,0,0,.05)}

/* Lead-page question prompt (verasight lead pages): live QuestionBlock prompt is
   text-lg/xl font-semibold (18px mobile / 20px desktop), larger than the default
   16px .QuestionText used elsewhere. */
.rthg-lead-prompt{font-size:18px !important;font-weight:600 !important;line-height:1.375 !important;color:#0f172a;margin:0 0 4px !important}
@media(min-width:640px){.rthg-lead-prompt{font-size:20px !important}}

/* Two-column Protects / Depends-on grid (live: emerald-50/60 + rose-50/60) */
.rthg-twocol{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px}
.rthg-col{flex:1 1 220px;border:1px solid #e2e8f0;border-radius:10px;padding:14px 16px}
.rthg-col-protects{border-color:#a7f3d0;background:rgba(236,253,245,.6)}
.rthg-col-depends{border-color:#fecdd3;background:rgba(255,241,242,.6)}
.rthg-col-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px}
.rthg-col-protects .rthg-col-head{color:#065f46}
.rthg-col-depends .rthg-col-head{color:#9f1239}
.rthg-col .rthg-dots{margin-top:6px}
.rthg-col .rthg-dots .rthg-dot{font-size:14px;color:#1e293b}

/* ---- Tooltips (CSS only: hover for mouse, focus for keyboard/touch) ---- */
.rthg-tt{position:relative;border-bottom:1px dotted #475569;cursor:help;font-weight:600}
.rthg-tt:focus,.rthg-tt:focus-within{outline:2px solid #2563eb;outline-offset:2px}
.rthg-tt .rthg-tt-card{visibility:hidden;opacity:0;position:absolute;left:0;top:1.8em;z-index:60;width:340px;max-width:86vw;background:#0f172a;color:#f8fafc;padding:12px 14px;border-radius:10px;font-weight:400;font-size:13px;line-height:1.5;box-shadow:0 12px 30px rgba(15,23,42,.32);transition:opacity .12s ease}
.rthg-tt:hover .rthg-tt-card,.rthg-tt:focus .rthg-tt-card,.rthg-tt:focus-within .rthg-tt-card{visibility:visible;opacity:1}
.rthg-tt-lead{display:block;margin:0 0 2px}
.rthg-tt-list{display:block;margin:6px 0 0}
.rthg-tt-item{display:block;margin:5px 0;line-height:1.45}
/* The card is dark navy; .rthg-doc strong{color:#0f172a} would render the
   bold lead-ins dark-on-dark (invisible). Force light text for everything
   inside the card. */
.rthg-tt-card,.rthg-tt-card strong{color:#f8fafc !important}
/* Qualtrics gives each .QuestionOuter overflow-x:auto / overflow-y:hidden (for
   wide matrix tables), so an open tooltip card gets clipped at its question's
   bottom edge and painted under the next question's white card (2026-08-11
   live panel-page bug). Let questions that contain a tooltip overflow, and
   lift them above sibling questions so the card floats over the one below. */
.QuestionOuter:has(.rthg-tt){overflow:visible !important;position:relative;z-index:70}

/* ---- Hide the export-tag "question name" Qualtrics prints before each
   question for respondents (e.g. "B-bal.", "trust-warmup", "section-b-intro.") */
label.ExportTag,.ExportTag{display:none !important}

/* ===========================================================================
   1-7 scale (classic horizontal "LabelPositionBELOW" tables) -> clean diverging
   tiles, each scale question in a card, with the "I haven't thought about this"
   option on its own row. Colors and selected states match the live instrument's
   LikertScale component exactly (rose-50/100 -> slate-50 -> emerald-50 resting,
   rose-600/500/400 -> slate-500 -> emerald-400/500/600 selected).
   Scoped to rows containing a LabelPositionBELOW label so plain multiple-choice
   and dropdown questions keep their normal layout.
   =========================================================================== */

/* Card around each horizontal-scale question (matches live: rounded-xl
   border-slate-200 bg-white p-5 shadow-soft). .Inner.SAHR wraps text + scale
   and exists only for single-answer-horizontal questions, so descriptive and
   multiple-choice questions are untouched. */
.Inner.SAHR{background:#fff !important;border:1px solid #e2e8f0 !important;border-radius:12px !important;padding:20px !important;margin:18px auto !important;max-width:760px;box-shadow:0 8px 28px rgba(0,0,0,.08) !important;box-sizing:border-box}
.Inner.SAHR .InnerInner{border:0 !important;padding:0 !important}

/* turn the single scale row into a flex row (only horizontal scales) */
table.ChoiceStructure tr:has(label.SingleAnswer.LabelPositionBELOW){display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:stretch}
table.ChoiceStructure tr:has(label.SingleAnswer.LabelPositionBELOW) td.LabelContainer{display:block;width:auto !important;flex:1 1 0;min-width:56px;max-width:128px;padding:0;border:0;background:none}
table.ChoiceStructure tr:has(label.SingleAnswer.LabelPositionBELOW) td.LabelContainer .LabelWrapper{display:block}

/* the clickable tile */
td.LabelContainer label.SingleAnswer.LabelPositionBELOW{display:flex !important;flex-direction:column;align-items:center;justify-content:center;height:auto !important;min-height:78px;margin:0;padding:10px 4px;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;color:#0f172a;text-align:center;cursor:pointer;box-sizing:border-box;transition:background .12s ease,border-color .12s ease,color .12s ease}
td.LabelContainer label.SingleAnswer.LabelPositionBELOW:hover{filter:brightness(.97)}
td.LabelContainer label.SingleAnswer.LabelPositionBELOW > span{padding-bottom:0 !important;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:20px;font-weight:700;line-height:1}
td.LabelContainer label.SingleAnswer.LabelPositionBELOW > span > span{font-size:11.5px;font-weight:500;line-height:1.25;opacity:.95}

/* hide the raw radio + decorative circle for the scale (label[for] still toggles).
   .q-radio is force-shown by an id-scoped !important rule, so collapse via geometry. */
table.ChoiceStructure tr:has(label.LabelPositionBELOW) .ControlContainer{display:none !important}
table.ChoiceStructure tr:has(label.LabelPositionBELOW) input.radio{display:none !important}
table.ChoiceStructure tr:has(label.LabelPositionBELOW) .q-radio{height:0 !important;min-height:0 !important;width:0 !important;margin:0 !important;padding:0 !important;border:0 !important;overflow:hidden !important;opacity:0 !important}

/* diverging color scale matching the live instrument exactly, resting tint */
table.ChoiceStructure tr td.LabelContainer:nth-child(1) label.SingleAnswer.LabelPositionBELOW{background:#fff1f2;border-color:#fecdd3;color:#881337}
table.ChoiceStructure tr td.LabelContainer:nth-child(2) label.SingleAnswer.LabelPositionBELOW{background:rgba(255,241,242,.7);border-color:#fecdd3;color:#881337}
table.ChoiceStructure tr td.LabelContainer:nth-child(3) label.SingleAnswer.LabelPositionBELOW{background:rgba(255,241,242,.4);border-color:#ffe4e6;color:#881337}
table.ChoiceStructure tr td.LabelContainer:nth-child(4) label.SingleAnswer.LabelPositionBELOW{background:#f8fafc;border-color:#e2e8f0;color:#334155}
table.ChoiceStructure tr td.LabelContainer:nth-child(5) label.SingleAnswer.LabelPositionBELOW{background:rgba(236,253,245,.4);border-color:#d1fae5;color:#064e3b}
table.ChoiceStructure tr td.LabelContainer:nth-child(6) label.SingleAnswer.LabelPositionBELOW{background:rgba(236,253,245,.7);border-color:#a7f3d0;color:#064e3b}
table.ChoiceStructure tr td.LabelContainer:nth-child(7) label.SingleAnswer.LabelPositionBELOW{background:#ecfdf5;border-color:#a7f3d0;color:#064e3b}

/* selected state: per-point diverging color, matching the live SELECTED_BG */
td.LabelContainer label.SingleAnswer.LabelPositionBELOW.q-checked{color:#fff}
table.ChoiceStructure tr td.LabelContainer:nth-child(1) label.SingleAnswer.LabelPositionBELOW.q-checked{background:#e11d48;border-color:#e11d48}
table.ChoiceStructure tr td.LabelContainer:nth-child(2) label.SingleAnswer.LabelPositionBELOW.q-checked{background:#f43f5e;border-color:#f43f5e}
table.ChoiceStructure tr td.LabelContainer:nth-child(3) label.SingleAnswer.LabelPositionBELOW.q-checked{background:#fb7185;border-color:#fb7185}
table.ChoiceStructure tr td.LabelContainer:nth-child(4) label.SingleAnswer.LabelPositionBELOW.q-checked{background:#64748b;border-color:#64748b}
table.ChoiceStructure tr td.LabelContainer:nth-child(5) label.SingleAnswer.LabelPositionBELOW.q-checked{background:#34d399;border-color:#34d399}
table.ChoiceStructure tr td.LabelContainer:nth-child(6) label.SingleAnswer.LabelPositionBELOW.q-checked{background:#10b981;border-color:#10b981}
table.ChoiceStructure tr td.LabelContainer:nth-child(7) label.SingleAnswer.LabelPositionBELOW.q-checked{background:#059669;border-color:#059669}
td.LabelContainer label.SingleAnswer.LabelPositionBELOW.q-checked > span > span{opacity:1;color:rgba(255,255,255,.9)}

/* "I haven't thought about this" -> its own full-width row, centered, set apart.
   Prefixed with table.ChoiceStructure so it outranks the base flex:1 1 0 rule. */
table.ChoiceStructure tr td.LabelContainer:has(.rthg-noopinion){flex:0 0 100% !important;max-width:none !important;min-width:0 !important;margin-top:8px}
td.LabelContainer:has(.rthg-noopinion) label.SingleAnswer.LabelPositionBELOW{flex-direction:row;justify-content:center;min-height:0;padding:12px 16px;border-style:dashed;border-color:#cbd5e1;background:#fff;color:#475569}
td.LabelContainer:has(.rthg-noopinion) label.SingleAnswer.LabelPositionBELOW > span{font-size:15px;font-weight:500}
td.LabelContainer:has(.rthg-noopinion) label.SingleAnswer.LabelPositionBELOW.q-checked{background:#334155;border-color:#334155;color:#fff}
.rthg-noopinion{display:inline-block;font-weight:500}

/* ===========================================================================
   Multiple-choice questions (single + multi, vertical) -> bordered radio tiles
   in a card, matching the live instrument's brand-highlighted option tiles.
   Vertical MC uses UL.ChoiceStructure inside .Inner.SAVR / .Inner.MAVR; the 1-7
   scale uses TABLE.ChoiceStructure inside .Inner.SAHR, so the two never collide.
   =========================================================================== */
.Inner.SAVR,.Inner.MAVR{background:#fff !important;border:1px solid #e2e8f0 !important;border-radius:12px !important;padding:20px !important;margin:18px auto !important;max-width:760px;box-shadow:0 8px 28px rgba(0,0,0,.08) !important;box-sizing:border-box}
.Inner.SAVR .InnerInner,.Inner.MAVR .InnerInner{border:0 !important;padding:0 !important}
ul.ChoiceStructure{list-style:none;margin:0;padding:0}
ul.ChoiceStructure li.Selection{margin:8px 0 !important;background:none !important;border:0 !important;padding:0 !important}
ul.ChoiceStructure li.Selection label.SingleAnswer,ul.ChoiceStructure li.Selection label.MultipleAnswer{display:block;background:#fff !important;border:1px solid #e2e8f0 !important;border-radius:10px !important;padding:13px 16px 13px 44px !important;line-height:1.4;transition:border-color .12s ease,background .12s ease;cursor:pointer}
ul.ChoiceStructure li.Selection label.SingleAnswer:hover,ul.ChoiceStructure li.Selection label.MultipleAnswer:hover{border-color:#94a3b8 !important;background:#f8fafc !important}
ul.ChoiceStructure li.Selection label.SingleAnswer.q-checked,ul.ChoiceStructure li.Selection label.MultipleAnswer.q-checked{border-color:#2c86ff !important;background:#f1f7ff !important}

/* Two-line MC option (forced choice): bold title over a muted subtitle, like the
   live design tiles. The choice Display carries .rthg-mc-title / .rthg-mc-sub. */
.rthg-mc-title{display:block;font-weight:600;color:#0f172a}
.rthg-mc-sub{display:block;margin-top:2px;font-size:13px;color:#64748b}