/* Опора · тесты-рефлексии — стили тест-UI, ЗАСКОУПЛЕНЫ под .ot, чтобы жить рядом
   с боевым style.css сайта. Токены (--c-*, --font, --serif) берутся из style.css. */

.ot{width:min(720px,calc(100vw - 40px));margin:0 auto;padding:clamp(16px,2.2vw,28px) 0 80px}
.ot *{box-sizing:border-box}
.ot section{padding:0;margin:0}
.ot .serif{font-family:var(--serif);font-weight:400}
.ot button{font-family:inherit;cursor:pointer}
.ot .hidden{display:none!important}

.ot .eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-brass);margin:0}
.ot .eyebrow::before{content:"";width:24px;height:1px;background:var(--c-brass)}
.ot h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,50px);line-height:1.08;letter-spacing:-.01em;margin-top:18px;color:var(--c-ink)}
.ot .lead{color:var(--c-mid);font-size:clamp(16px,1.6vw,18px);font-weight:300;line-height:1.64;margin-top:22px}
.ot .method{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r);padding:26px;margin-top:32px;box-shadow:var(--sh-card)}
.ot .method h2{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-forest);margin-bottom:14px}
.ot .method ul{list-style:none;display:grid;gap:13px;margin:0;padding:0}
.ot .method li{display:flex;gap:12px;font-size:14.5px;color:var(--c-mid);font-weight:300;line-height:1.55}
.ot .method li b{color:var(--c-ink);font-weight:600}
.ot .method .dot{color:var(--c-brass);flex:0 0 auto;font-family:var(--serif);line-height:1.3}

.ot .btn{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:16px 34px;border-radius:var(--r-sm);border:1px solid var(--c-brass);background:var(--c-brass);color:var(--c-bg);transition:all .4s var(--ease);text-decoration:none}
.ot .btn:hover{background:var(--c-brass-deep);border-color:var(--c-brass-deep);transform:translateY(-2px)}
.ot .btn--ghost{background:transparent;color:var(--c-ink);border-color:var(--c-line-strong)}
.ot .btn--ghost:hover{background:var(--c-forest);border-color:var(--c-forest);color:var(--c-bg)}
.ot .btn--tg{background:var(--c-forest);border-color:var(--c-forest);color:var(--c-bg)}
.ot .startrow{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.ot .startrow .mini{font-size:13px;color:var(--c-low)}
.ot .disclaimer{margin-top:34px;font-size:12.5px;color:var(--c-low);font-weight:300;line-height:1.6;max-width:60ch}

.ot .progress{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.ot .pbar{flex:1;height:3px;background:var(--c-line-strong);border-radius:999px;overflow:hidden}
.ot .pfill{height:100%;background:var(--c-brass);width:0;transition:width .4s var(--ease)}
.ot .pnum{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--c-mid);flex:0 0 auto}
.ot .qscene{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brass);margin-bottom:12px}
.ot .qtext{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3.1vw,30px);line-height:1.24;letter-spacing:-.005em;color:var(--c-ink)}
.ot .opts{margin-top:30px;display:grid;gap:13px}
.ot .opt{text-align:left;background:var(--c-white);border:1px solid var(--c-line-strong);border-radius:var(--r);padding:19px 22px;font-size:15.5px;line-height:1.5;color:var(--c-ink);transition:all .25s var(--ease);width:100%}
.ot .opt:hover{border-color:var(--c-brass);background:#fff;transform:translateY(-1px);box-shadow:var(--sh-card)}
.ot .opt--sel{border-color:var(--c-brass);background:#fff;box-shadow:var(--sh-card)}
.ot .opt--sel::after{content:"✓";float:right;color:var(--c-brass);font-weight:700;margin-left:10px}
.ot .navq{margin-top:26px;display:flex;justify-content:space-between;align-items:center}
.ot .lnk{background:none;border:none;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c-mid);padding:6px 2px}
.ot .lnk:hover{color:var(--c-ink)} .ot .lnk[disabled]{opacity:0;pointer-events:none}

.ot .rkicker{color:var(--c-mid);font-weight:300;margin-top:20px}
.ot .rtitle{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.2vw,44px);line-height:1.1;letter-spacing:-.01em;margin-top:8px;color:var(--c-ink)}
.ot .rscale{margin-top:24px;display:flex;gap:6px}
.ot .rseg{flex:1;height:6px;border-radius:999px;background:var(--c-line-strong)}
.ot .rseg.on{background:var(--c-brass)}
.ot .rlabels{margin-top:9px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-low)}
.ot .rbody{margin-top:26px;font-size:16.5px;font-weight:300;line-height:1.72;color:#3a3d34}
.ot .rbody p{margin-top:16px}
.ot .rsec{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r);padding:24px 26px;margin-top:20px;box-shadow:var(--sh-card)}
.ot .rsec h3{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c-forest);margin-bottom:14px}
.ot .rsec p{font-size:15px;font-weight:300;line-height:1.64;color:var(--c-mid)} .ot .rsec p+p{margin-top:11px}
.ot .rlist{list-style:none;display:grid;gap:11px;margin:0;padding:0}
.ot .rlist li{display:flex;gap:12px;font-size:15px;font-weight:300;line-height:1.55;color:#3a3d34}
.ot .rlist .q{color:var(--c-brass);flex:0 0 auto;font-family:var(--serif);line-height:1.2}
.ot .cta{background:var(--c-forest);color:var(--c-bg);border-radius:var(--r);padding:34px 30px;margin-top:34px}
.ot .cta .eyebrow{color:var(--c-brass-soft)} .ot .cta .eyebrow::before{background:var(--c-brass-soft)}
.ot .cta h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,30px);line-height:1.16;color:var(--c-bg);margin-top:14px}
.ot .cta p{color:rgba(244,241,234,.74);font-weight:300;margin-top:14px;font-size:15px;line-height:1.6;max-width:52ch}
.ot .cta .btn--tg{margin-top:24px;background:var(--c-brass);border-color:var(--c-brass);color:var(--c-forest-deep)}
.ot .cta .btn--tg:hover{background:var(--c-brass-soft);border-color:var(--c-brass-soft)}
.ot .rfoot{margin-top:30px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.ot .rdisc{margin-top:26px;font-size:12.5px;color:var(--c-low);font-weight:300;line-height:1.6;max-width:62ch}

/* разбор ответов */
.ot .ranswers{list-style:none;display:grid;gap:0;margin:0;padding:0}
.ot .ranswers li{display:flex;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--c-line)}
.ot .ranswers li:last-child{border-bottom:none}
.ot .ra-q{flex:0 0 34%;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-brass-deep)}
.ot .ra-a{flex:1;font-size:14.5px;font-weight:300;color:#3a3d34;line-height:1.5}
@media(max-width:560px){ .ot .ranswers li{flex-direction:column;gap:4px} .ot .ra-q{flex:none} }

/* печатный фирменный макет (шапка PDF: бренд слева, QR справа) */
.ot .print-only{display:none}
.ot .print-head{justify-content:space-between;align-items:flex-start;gap:24px}
.ot .print-head .ph-row{display:flex;align-items:center;gap:12px}
.ot .print-head .ph-mk{width:36px;height:36px;border-radius:999px;border:1px solid var(--c-brass);display:grid;place-items:center;color:var(--c-brass);font-size:17px}
.ot .print-head .ph-brand{font-size:17px;color:var(--c-ink)}
.ot .print-head .ph-sub{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-mid);margin-top:2px}
.ot .print-head .ph-test{margin-top:14px;font-size:13px;color:var(--c-ink);font-weight:600}
.ot .print-head .ph-qr{width:96px;height:96px;flex:0 0 auto}
/* панель действий под заголовком */
.ot .rtop{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.ot .rtop .btn{padding:13px 24px}
@media(max-width:560px){ .ot .rtop .btn{flex:1 1 auto;justify-content:center} }

@page{margin:15mm 14mm}
@media print{
  header,footer,.ot .noprint,.ot #intro,.ot #quiz{display:none !important}
  .ot .print-only{display:block !important}
  .ot .print-head{display:flex !important;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #e2ddce;break-after:avoid}
  .ot .print-head .ph-qr{width:92px;height:92px}
  body{background:#fff;color:#292C25;font-size:10.5pt}
  .ot{width:100% !important;padding:0 !important}
  .ot .rkicker{break-after:avoid}
  .ot .rtitle{font-size:21pt;break-after:avoid}
  .ot .rbody{color:#292C25}
  .ot .rsec{box-shadow:none;border:1px solid #e2ddce;break-inside:avoid}
  .ot .cta{display:none !important}
  .ot .ranswers li{break-inside:avoid}
  a[href]{color:inherit;text-decoration:none}
}