/* how-to-use.css — RT42. The How to use page. The player is drawn like the Classification Workflow screen
   (assets/eccn-wf.css): navy for structure, ember for the one action, gold for the result's rule, green for
   what the tool suggested; questions in the serif, codes and figures in the mono. */
.hu-hero{padding:56px 0 28px}
.hu-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:end}
.hu-kicker{font-size:12.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#B08A3E;margin-bottom:12px}
.hu-before{background:#fff;border:1px solid #E4E7EC;border-radius:12px;padding:18px 22px}
.hu-before b{display:block;font-size:13px;color:#12233F;margin-bottom:6px}
.hu-before p{margin:8px 0 0;font-size:14px;line-height:1.5;color:#344054}
.hu-sec{padding:20px 0 36px}
.hu-sub{margin:8px 0 0;font-size:15px;color:#5D6B80}
.hu-stages{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hu-stages li{display:flex;gap:16px;background:#fff;border:1px solid #E4E7EC;border-radius:12px;padding:20px 22px}
.hu-stages b{display:block;font-size:16px;color:#12233F;margin-bottom:6px}
.hu-stages p{margin:0;font-size:14px;line-height:1.55;color:#5D6B80}
.hu-n{width:34px;height:34px;flex-shrink:0;border-radius:50%;border:1.5px solid #12233F;color:#12233F;font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:center}

.hu-watch-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px;flex-wrap:wrap}
.hu-tabs{display:flex;gap:8px;flex-wrap:wrap}
.hu-tab{min-height:56px;padding:8px 16px;border-radius:10px;text-align:left;cursor:pointer;background:#fff;color:#12233F;
  border:1px solid #DCE0E6;font-family:inherit}
.hu-tab[aria-pressed="true"]{background:#12233F;color:#fff;border-color:#12233F}
.hu-tab small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;opacity:.8}
.hu-tab span{display:block;font-size:14.5px;font-weight:600;margin-top:2px}
.hu-tab:focus-visible,.hu-ib:focus-visible,.hu-play:focus-visible{outline:2px solid #C0451B;outline-offset:2px}

.hu-player{background:#fff;border:1px solid #DCE0E6;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.hu-bar{height:44px;background:#F3F5F8;border-bottom:1px solid #DCE0E6;display:flex;align-items:center;gap:8px;padding:0 16px}
.hu-bar span{width:11px;height:11px;border-radius:50%;background:#D5DAE1}
.hu-bar em{margin-left:14px;font-style:normal;font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:12.5px;color:#5D6B80}
.hu-body{display:flex;min-height:600px}
.hu-rail{width:240px;flex-shrink:0;border-right:1px solid #E4E7EC;padding:22px 16px;background:#FBFCFD}
.hu-rail-h{font-size:11.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#5D6B80;margin:0 0 8px 4px}
.hu-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hu-rail li{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;font-size:14px;color:#8792A3;border:1px solid transparent}
.hu-rail li i{width:26px;height:26px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;
  font-size:12.5px;font-weight:600;border:1.5px solid #C5CCD6;color:#8792A3}
.hu-rail li.is-done{color:#344054}
.hu-rail li.is-done i{border-color:#2E7D5B;color:#2E7D5B}
.hu-rail li.is-cur{background:#fff;border-color:#E4E7EC;box-shadow:inset 3px 0 0 #12233F;color:#12233F;font-weight:600}
.hu-rail li.is-cur i{background:#12233F;border-color:#12233F;color:#fff}

.hu-screen{flex:1;min-width:0;padding:22px 28px;display:flex;flex-direction:column;gap:14px}
.hu-top{display:flex;justify-content:space-between;align-items:center;font-size:15px;color:#12233F}
.hu-muted{font-size:13px;color:#5D6B80;font-weight:400}
.hu-id{display:flex;align-items:center;gap:10px}
.hu-sku{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:15px;font-weight:600;color:#12233F}
.hu-chip{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:#FFF3E6;color:#9A4A12}
.hu-chip.is-ok{background:#E7F4EE;color:#1F5A43}
.hu-ask{flex:1;background:#fff;border:1px solid #DCE0E6;border-left:3px solid #12233F;border-radius:0 10px 10px 0;padding:18px 20px 20px}
.hu-stage{font-size:11.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#B08A3E;margin-bottom:8px}
.hu-q{font-family:'Source Serif 4',Georgia,serif;font-size:19px;font-weight:600;line-height:1.35;color:#12233F;margin:0 0 14px}
.hu-form{display:grid;grid-template-columns:170px minmax(0,1fr);gap:10px 16px;font-size:14.5px}
.hu-form > span:nth-child(odd){color:#5D6B80}
.hu-field{border:1px solid #DCE0E6;border-radius:7px;padding:9px 12px;background:#FBFCFD;line-height:1.5}
.hu-radios{display:flex;gap:18px;flex-wrap:wrap}
.hu-radios span{display:flex;align-items:center;gap:7px}
.hu-radios i{width:14px;height:14px;border-radius:50%;box-sizing:border-box;border:1.5px solid #98A2B3}
.hu-radios i.on{border:4px solid #12233F}
.hu-note{margin-top:12px;font-size:13px;color:#5D6B80}
.hu-note b{color:#12233F}
.hu-rows{display:flex;flex-direction:column;gap:8px}
.hu-row{display:flex;justify-content:space-between;gap:16px;border:1px solid #E4E7EC;border-radius:8px;padding:9px 14px;font-size:14px;color:#344054}
.hu-row b{color:#2E7D5B;white-space:nowrap}
.hu-opts{display:flex;flex-direction:column;gap:8px}
.hu-opt{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.45;padding:11px 14px;border-radius:8px;border:1px solid #DCE0E6;
  background:#fff;transition:background .25s,border-color .25s}
.hu-opt.is-sug{border-color:#9CC9B3;box-shadow:inset 3px 0 0 #2E7D5B}
.hu-opt.is-on{border:1.5px solid #12233F;background:#F0F4FA;box-shadow:none}
.hu-opt i{width:16px;height:16px;flex-shrink:0;margin-top:2px;border-radius:4px;border:1.5px solid #98A2B3;background:#fff}
.hu-opt.is-on i{background:#12233F;border-color:#12233F}
.hu-opt em{display:inline-block;margin-top:5px;font-style:normal;font-size:11.5px;font-weight:600;color:#2E7D5B}
.hu-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hu-card{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:10px;border:1px solid #DCE0E6;background:#fff;transition:background .25s,border-color .25s}
.hu-card.is-on{border:1.5px solid #12233F;background:#F0F4FA}
.hu-card b{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:22px;color:#12233F}
.hu-card p{margin:0;font-size:13.5px;line-height:1.45;color:#344054;min-height:58px}
.hu-card span{align-self:flex-start;border-radius:8px;padding:8px 14px;font-size:13.5px;font-weight:600;border:1px solid #E8B7A5;color:#C0451B}
.hu-card.is-on span{background:#C0451B;color:#fff;border-color:#C0451B}
.hu-alt{margin-top:14px;display:inline-block;border:1px solid #16202E;border-radius:8px;padding:9px 16px;font-size:14px;font-weight:600;color:#16202E}
.hu-vals{display:grid;grid-template-columns:200px 180px minmax(0,1fr);gap:14px;align-items:center;font-size:14.5px;color:#344054}
.hu-val{border:1px solid #9CC9B3;border-radius:7px;padding:9px 12px;background:#F4FAF7;font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:14px}
.hu-from{font-size:12.5px;font-weight:600;color:#2E7D5B}
.hu-load{display:flex;flex-direction:column;gap:14px;padding:12px 0}
.hu-load p{margin:0;font-size:15px;color:#344054}
.hu-track{height:8px;border-radius:4px;background:#EEF1F5;overflow:hidden}
.hu-track div{height:8px;border-radius:4px;background:#12233F;transition:width .8s}
.hu-count{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:13px;color:#5D6B80}
.hu-res{display:flex;flex-direction:column;gap:14px}
.hu-code{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:2px solid #D9B166}
.hu-code b{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:34px;color:#12233F}
.hu-code span{font-size:14px;color:#5D6B80}
.hu-acts{display:flex;gap:10px;flex-wrap:wrap}
.hu-acts span{border:1px solid #DCE0E6;border-radius:8px;padding:10px 16px;font-size:14px;color:#16202E}
.hu-btn{display:inline-block;margin-top:16px;border-radius:8px;padding:11px 20px;font-size:14.5px;font-weight:600;color:#fff;background:#C0451B;transition:background .2s,box-shadow .2s}
.hu-btn.is-press{background:#A63A15;box-shadow:0 0 0 3px #F3C9B8}
.hu-acts .hu-accept{border:0;color:#fff;background:#2E7D5B;font-weight:600}
.hu-acts .hu-accept.is-press{background:#1F5A43;box-shadow:0 0 0 3px #CDE8DA}

.hu-ctl{border-top:1px solid #E4E7EC;padding:16px 24px;display:flex;align-items:center;gap:20px;background:#FBFCFD}
.hu-btns{display:flex;gap:8px}
.hu-ib{width:44px;height:44px;border:1px solid #DCE0E6;border-radius:8px;background:#fff;color:#12233F;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hu-play{height:44px;min-width:96px;padding:0 16px;border:0;border-radius:8px;background:#12233F;color:#fff;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.hu-say{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.hu-say p{margin:0;font-size:14.5px;line-height:1.45;color:#16202E}
.hu-say b{color:#C0451B}
.hu-prog{height:4px;border-radius:2px;background:#E4E7EC;overflow:hidden}
.hu-prog div{height:4px;background:#C0451B;transition:width .4s;width:0}

.hu-tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.hu-tips div{background:#fff;border:1px solid #E4E7EC;border-radius:12px;padding:18px 22px}
.hu-tips b{display:block;font-size:15.5px;color:#12233F;margin-bottom:6px}
.hu-tips p{margin:0;font-size:14px;line-height:1.6;color:#5D6B80}
.hu-cta{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#12233F;border-radius:14px;padding:26px 32px;flex-wrap:wrap}
.hu-cta b{font-size:20px;color:#fff}
.hu-cta p{margin:6px 0 0;font-size:14.5px;color:#C9D2DF}

@media (max-width:960px){
  .hu-hero-grid{grid-template-columns:1fr;gap:24px}
  .hu-stages{grid-template-columns:1fr 1fr}
  .hu-body{flex-direction:column}
  .hu-rail{width:auto;border-right:0;border-bottom:1px solid #E4E7EC}
  .hu-rail ol{flex-direction:row;flex-wrap:wrap}
  .hu-rail li span{display:none}
  .hu-rail li.is-cur span{display:inline}
  .hu-cards{grid-template-columns:1fr}
  .hu-vals{grid-template-columns:1fr}
}
@media (max-width:620px){
  .hu-stages,.hu-tips{grid-template-columns:1fr}
  .hu-form{grid-template-columns:1fr}
  .hu-screen{padding:16px}
  .hu-ctl{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  .hu-opt,.hu-card,.hu-track div,.hu-prog div,.hu-btn{transition:none}
}