/* Self-check quiz (scoped .ssq) */
.ssq{--ink:var(--ink);--muted:var(--muted);--paper:var(--card);--line:var(--line);--clay:var(--clay);--clay-dark:var(--bluestem-deep);--sand:var(--paper-2);
       --ok:#4f7a4a;--ok-bg:#eaf2e7;--warn:#9a6a14;--warn-bg:#fbf1dc;--alert:#a63d2a;--alert-bg:#f9e6e1;
       max-width:680px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
       box-shadow:0 10px 30px rgba(60,40,20,.08);color:var(--ink);overflow:hidden;font-family:var(--font-sans)}
  .ssq *{box-sizing:border-box}
  .ssq-head{padding:28px 28px 8px}
  .ssq-eyebrow{margin:0 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);font-weight:600}
  .ssq-title{margin:0 0 8px;font-family:var(--font-serif);font-weight:600;font-size:clamp(24px,4vw,32px);line-height:1.15}
  .ssq-lede{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
  .ssq-progress{height:4px;background:var(--line);margin:20px 28px 0;border-radius:4px;overflow:hidden}
  .ssq-progress span{display:block;height:100%;width:0;background:var(--clay);transition:width .35s ease}
  .ssq-step{margin:10px 28px 0;font-size:12px;color:var(--muted)}
  .ssq-body{padding:10px 28px 8px;min-height:300px}
  .ssq-q{font-family:var(--font-serif);font-weight:500;font-size:22px;line-height:1.25;margin:6px 0 4px}
  .ssq-hint{margin:0 0 14px;color:var(--muted);font-size:14px}
  .ssq-opts{display:grid;gap:10px;margin-top:14px}
  .ssq-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border:1.5px solid var(--line);
           border-radius:var(--radius-lg);background:#fff;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,transform .05s}
  .ssq-opt:hover{border-color:#cdb9a2;background:#fffaf3}
  .ssq-opt:active{transform:scale(.995)}
  .ssq-opt:focus-visible{outline:3px solid rgba(154,91,52,.35);outline-offset:2px}
  .ssq-opt.is-on{border-color:var(--clay);background:#fbf3ea}
  .ssq-mark{flex:none;width:18px;height:18px;border:1.5px solid #bfae9a;background:#fff;position:relative}
  .ssq-mark.single{border-radius:50%}
  .ssq-mark.multi{border-radius:5px}
  .ssq-opt.is-on .ssq-mark{border-color:var(--clay);background:var(--clay)}
  .ssq-opt.is-on .ssq-mark.single::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
  .ssq-opt.is-on .ssq-mark.multi::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .ssq-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 28px 26px}
  .ssq-btn{font:inherit;font-weight:600;font-size:15px;border-radius:999px;padding:12px 22px;cursor:pointer;border:1.5px solid transparent;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .ssq-btn.primary{background:var(--clay);color:#fff}
  .ssq-btn.primary:hover{background:var(--clay-dark)}
  .ssq-btn.primary:disabled{opacity:.4;cursor:not-allowed}
  .ssq-btn.ghost{background:transparent;color:var(--muted);border-color:var(--line)}
  .ssq-btn.ghost:hover{color:var(--ink);border-color:#cdb9a2}
  .ssq-btn.outline{background:#fff;color:var(--clay-dark);border-color:var(--clay)}
  .ssq-btn[hidden]{display:none}

  /* Result */
  .ssq-result{padding:4px 28px 28px}
  .ssq-badge{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;margin-bottom:12px}
  .ssq-badge.inspect{background:var(--alert-bg);color:var(--alert)}
  .ssq-badge.drain{background:var(--warn-bg);color:var(--warn)}
  .ssq-badge.monitor{background:var(--ok-bg);color:var(--ok)}
  .ssq-rtitle{font-family:var(--font-serif);font-weight:600;font-size:clamp(24px,4vw,30px);line-height:1.15;margin:0 0 8px}
  .ssq-rsum{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0 0 20px}
  .ssq-block{background:var(--sand);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:14px}
  .ssq-block h4{margin:0 0 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--clay-dark)}
  .ssq-block ul,.ssq-block ol{margin:0;padding-left:20px;line-height:1.6;font-size:15px}
  .ssq-block li+li{margin-top:6px}
  .ssq-ctas{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 14px}
  .ssq-fine{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0}
  .ssq-restart{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--clay-dark);text-decoration:underline;cursor:pointer;margin-top:12px}
  .ssq-fade{animation:ssqFade .28s ease}
  @keyframes ssqFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media (max-width:520px){.ssq-head,.ssq-body,.ssq-result{padding-left:18px;padding-right:18px}.ssq-progress{margin-left:18px;margin-right:18px}.ssq-step{margin-left:18px}.ssq-nav{padding-left:18px;padding-right:18px}.ssq-ctas .ssq-btn{flex:1 1 100%}}
  @media (prefers-reduced-motion:reduce){.ssq-fade{animation:none}.ssq-progress span{transition:none}}
