/*
  Tests (employers?a=tests, class.company_tests.php, tests.js) — a tool in the works, pilot only.

  The page borrows the looks that already exist: the surveys hero (svy_*), the how-it-works block
  and the boxes from meetings (cm_*), the settings rows, the process drawer's label (pd_label) and
  the next-steps cards from emergency alerts (ea_next_*). Only the walkthrough is its own: the
  slide stack, the options, the reveal and the score.

  tst_ is this file's prefix and nothing else uses it. A slide is shown with .tst_on rather than
  by taking hide_me off — a later display rule beats .hide_me, and these are flex.
*/

.tst_ready { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: #8a5a00; background: #fff8e8; border: 1px solid #f0dfb8; border-radius: 10px; padding: 9px 12px; margin-top: 14px; }
.tst_ready i { color: #b07d00; margin-top: 2px; flex: none; }

.tst_row_icon i, .tst_next_icon i { color: #0f7777; }
.tst_note { background: #eef7f7 !important; border-color: #cfe5e6 !important; color: #0b5f5f !important; }
.tst_note i { color: #0f7777 !important; }
.tst_num { background: #0f7777; }

/* ---------------------------------------------------------------- the rules, as chips */

.tst_chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.tst_chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #0b5f5f; background: #e6f3f3; border: 1px solid #cfe5e6; border-radius: 999px; padding: 4px 10px; }
.tst_chip i { font-size: 12px; }

/* ---------------------------------------------------------------- the walkthrough */

.tst_take { display: flex; flex-direction: column; min-height: 100%; }
.tst_bar { height: 5px; border-radius: 999px; background: #dbe4e6; overflow: hidden; margin-bottom: 18px; flex: none; }
.tst_bar_fill { height: 100%; width: 0; background: #0f7777; border-radius: 999px; transition: width .25s ease; }

.tst_slide { display: none; }
.tst_slide.tst_on { display: block; }

.tst_kind { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0f7777; background: #e6f3f3; border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
.tst_kind_q { color: #8a5a00; background: #fff4de; }

.tst_q_title { font-family: 'Alegreya Sans', sans-serif; font-weight: 500; font-size: 1.5em; line-height: 1.25; letter-spacing: -.01em; color: #1f3338; margin-bottom: 10px; }
.tst_info_body { font-size: 15px; line-height: 1.6; color: #435b64; }

.tst_figure { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; background: #fff; border: 1.5px dashed #cfdcde; border-radius: 12px; padding: 22px 18px; margin-top: 16px; }
.tst_figure > i { font-size: 26px; color: #9fb7bb; }
.tst_figure > div { font-size: 13.5px; color: #435b64; line-height: 1.45; max-width: 420px; }
.tst_figure > span { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9fb7bb; }

/* ---------------------------------------------------------------- the options */

.tst_options { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.tst_option { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #dbe4e6; border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.tst_option:hover { border-color: #9ecdd0; }
.tst_option_mark { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #eef3f3; color: #557; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: #435b64; }
.tst_option_text { flex: 1; font-size: 14.5px; line-height: 1.4; color: #1f3338; }
.tst_option_icon { flex: none; font-size: 16px; }

.tst_option.tst_picked { border-color: #0f7777; background: #f2fafa; }
.tst_option.tst_picked .tst_option_mark { background: #0f7777; color: #fff; }

/* once the answer is out: the right one green, the wrong pick red, the rest quiet */
.tst_options.tst_shown .tst_option { cursor: default; }
.tst_options.tst_shown .tst_option[data-correct] { border-color: #1f7a45; background: #f1faf4; }
.tst_options.tst_shown .tst_option[data-correct] .tst_option_mark { background: #1f7a45; color: #fff; }
.tst_options.tst_shown .tst_option[data-correct] .tst_option_icon { color: #1f7a45; }
.tst_options.tst_shown .tst_option.tst_picked:not([data-correct]) { border-color: #b91c1c; background: #fdf3f3; }
.tst_options.tst_shown .tst_option.tst_picked:not([data-correct]) .tst_option_mark { background: #b91c1c; color: #fff; }
.tst_options.tst_shown .tst_option.tst_picked:not([data-correct]) .tst_option_icon { color: #b91c1c; }

.tst_reveal { display: none; margin-top: 14px; background: #fff; border: 1.5px solid #dbe4e6; border-left: 4px solid #0f7777; border-radius: 10px; padding: 12px 14px; }
.tst_reveal.tst_on { display: block; }
.tst_reveal_head { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; color: #0f7777; }
.tst_reveal_head.tst_wrong { color: #b91c1c; }
.tst_reveal.tst_wrong { border-left-color: #b91c1c; }
.tst_reveal_note { font-size: 14px; line-height: 1.55; color: #435b64; }

/* ---------------------------------------------------------------- the cover */

.tst_cover_icon { width: 54px; height: 54px; border-radius: 14px; background: #e6f3f3; color: #0f7777; font-size: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.tst_cover_title { font-family: 'Alegreya Sans', sans-serif; font-weight: 500; font-size: 1.85em; line-height: 1.15; letter-spacing: -.015em; color: #1f3338; }
.tst_cover_sub { font-size: 14.5px; color: #435b64; margin-top: 4px; }

.tst_cover_rules { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.tst_rule { display: flex; gap: 11px; align-items: flex-start; background: #fff; border: 1.5px solid #dbe4e6; border-radius: 10px; padding: 12px 14px; }
.tst_rule > i { flex: none; color: #0f7777; font-size: 17px; margin-top: 1px; }
.tst_rule b { display: block; font-size: 14.5px; color: #1f3338; }
.tst_rule span { display: block; font-size: 13px; line-height: 1.45; color: #6b8189; margin-top: 2px; }

.tst_sample_note { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.45; color: #6b8189; background: #f7fbfb; border: 1px solid #e3ebec; border-radius: 10px; padding: 9px 12px; margin-top: 16px; }
.tst_sample_note i { color: #9fb7bb; margin-top: 2px; flex: none; }

/* ---------------------------------------------------------------- the score */

.tst_score_ring { width: 132px; height: 132px; border-radius: 50%; margin: 6px auto 14px; display: flex; align-items: center; justify-content: center; background: conic-gradient(#0f7777 var(--tst_deg, 0deg), #dbe4e6 0deg); }
.tst_score_ring.tst_failed { background: conic-gradient(#b91c1c var(--tst_deg, 0deg), #dbe4e6 0deg); }
.tst_score_num { width: 108px; height: 108px; border-radius: 50%; background: #eef3f3; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: #1f3338; line-height: 1; }
.tst_score_num span { font-size: 15px; font-weight: 700; color: #6b8189; align-self: flex-start; margin-top: 34px; }
.tst_score_line { text-align: center; font-family: 'Alegreya Sans', sans-serif; font-weight: 500; font-size: 1.6em; color: #0f7777; }
.tst_score_line.tst_failed { color: #b91c1c; }
.tst_score_sub { text-align: center; font-size: 14px; color: #435b64; margin-top: 2px; }

.tst_review { display: flex; flex-direction: column; gap: 8px; }
.tst_review_row { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1.5px solid #dbe4e6; border-radius: 10px; padding: 12px 14px; }
.tst_review_icon { flex: none; font-size: 16px; margin-top: 2px; }
.tst_review_row.tst_right .tst_review_icon { color: #1f7a45; }
.tst_review_row.tst_wrong .tst_review_icon { color: #b91c1c; }
.tst_review_q { font-size: 14.5px; font-weight: 700; color: #1f3338; line-height: 1.35; }
.tst_review_mine { font-size: 13px; color: #b91c1c; margin-top: 3px; }
.tst_review_mine b, .tst_review_right b { font-weight: 800; color: #8a9a9f; text-transform: uppercase; font-size: 10.5px; letter-spacing: .05em; margin-right: 4px; }
.tst_review_right { font-size: 13px; color: #1f7a45; margin-top: 2px; }
.tst_review_note { font-size: 13px; color: #6b8189; line-height: 1.5; margin-top: 5px; }

.tst_foot { display: flex; gap: 8px; }

/* inside the phone's Tools drawer the page's own hero buttons are the drawer's business */
@media (max-width: 767px)
{
  .tst_q_title { font-size: 1.35em; }
  .tst_cover_title { font-size: 1.6em; }
}