/* Interactive Washington driver study guide (/practice-tests/study-guide/).
   Loads after assets/mit/portal.css and assets/practice/practice.css and reuses their hero, panels,
   buttons, answer options, feedback and law panel. Everything new is .sg-*. */

/* Design rule from the owner (2026-10-08): never put a thick colored accent border on one side of a card or box
   (no border-left bars). Use an even 1px border all around, a soft fill, or nothing. */

/* Content rule: everything must read without JavaScript and without animations. The page script adds .sg-js to
   <html> before the content (sg_assets_css), and every rule that hides an answer until a click is scoped to it.
   Motion is transform-only, never opacity, so nothing stays invisible if an animation never runs. */

.sg-body{--sg-ink:#0E1216;--sg-text:#3B4148;--sg-soft:#646B74;--sg-line:#E2E6EA;--sg-line-2:#C9D2DB;--sg-blue-line:#B9D3EA;--sg-warn:#8A5A00;--sg-warn-bg:#FFF6E0;--sg-warn-line:#F0D08A;--sg-ease:cubic-bezier(.2,.7,.2,1);--sg-flip-ease:cubic-bezier(.45,.05,.55,.95)}
.sg-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sg-app{padding-bottom:3.5rem}
.sg-app :focus-visible{outline:2px solid var(--focus,#4A90E2);outline-offset:2px}
.sg-app .pt-opt__tag{text-transform:none;letter-spacing:0;font-size:.8rem}

/* ---------- hero: the MIT hero plus the dashed lane line, which drives once on load ---------- */
.sg-hero::before{content:"";position:absolute;left:0;right:0;bottom:22px;height:4px;background:linear-gradient(90deg,var(--wmst-yellow,#F7D021) 46px,transparent 46px) 0 0/86px 4px repeat-x;opacity:.9;pointer-events:none;animation:sgLane 1.4s var(--sg-ease) .1s both}
.sg-hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem;position:relative;z-index:1}
.sg-hero__actions .mit-btn{width:auto}
.sg-btn--yellow{background:var(--wmst-yellow,#F7D021);color:var(--sg-ink);border-color:var(--wmst-yellow,#F7D021)}
.sg-btn--yellow:hover{background:#FFDC3D}
.sg-btn--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.sg-btn--line:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ---------- road progress bar: a lane with a small car that drives to your progress ---------- */
.sg-road{position:relative;display:block;flex:1;height:10px;border-radius:99px;background:linear-gradient(90deg,#C9D2DB 50%,transparent 0) 0 50%/12px 2px repeat-x,#E6EBF0}
.sg-road>i{position:relative;display:block;height:100%;width:0;min-width:24px;max-width:100%;border-radius:99px;background:linear-gradient(90deg,#F7D021 50%,transparent 0) 0 50%/12px 2px repeat-x,#0067B0;transition:width .7s var(--sg-ease)}
.sg-road>i::after{content:"";position:absolute;right:0;top:50%;width:24px;height:14px;margin-top:-7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Crect x='1' y='1' width='22' height='12' rx='4' fill='%23004A82' stroke='%23fff' stroke-width='1.5'/%3E%3Crect x='13.5' y='3' width='4.5' height='8' rx='1.3' fill='%23BFE0F7'/%3E%3Crect x='4.5' y='3.5' width='3' height='7' rx='1' fill='%23BFE0F7' opacity='.75'/%3E%3Crect x='19.8' y='2.6' width='1.6' height='2.4' rx='.7' fill='%23F7D021'/%3E%3Crect x='19.8' y='9' width='1.6' height='2.4' rx='.7' fill='%23F7D021'/%3E%3C/svg%3E") no-repeat center/contain}
.sg-road.is-done>i{background-color:#22A06B}

/* ---------- hub ---------- */
.sg-hub__wrap{padding-top:1.6rem}
.sg-search{position:relative;padding:.35rem;margin-bottom:2rem;z-index:5}
.sg-search__box{display:flex;align-items:center;gap:.7rem;padding:.55rem .9rem;color:var(--sg-soft)}
.sg-search__box .mit-ic{width:1.15rem;height:1.15rem;flex:0 0 auto}
.sg-search__box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 1.02rem/1.4 inherit;color:var(--sg-ink);padding:.35rem 0}
.sg-search__box input::placeholder{color:var(--sg-soft);opacity:1}
.sg-search__box:focus-within{color:var(--wmst-blue)}
.sg-search:focus-within{border-color:var(--wmst-blue);box-shadow:0 0 0 3px rgba(0,103,176,.12)}
.sg-search__results{list-style:none;margin:0;padding:.3rem;border-top:1px solid var(--sg-line);max-height:min(60vh,520px);overflow:auto}
.sg-search__results:not([hidden]){animation:sgIn .16s var(--sg-ease)}
.sg-search__results li a{display:block;padding:.7rem .8rem;border-radius:8px;text-decoration:none;color:inherit}
.sg-search__results li a:hover,.sg-search__results li a:focus-visible{background:var(--wmst-blue-soft)}
.sg-search:focus-within .sg-search__results li:first-child a{background:#F7FAFD}
.sg-search__results b{display:block;font:700 .95rem/1.3 var(--font-display,sans-serif);color:var(--sg-ink)}
.sg-search__results small{display:block;font-size:.78rem;color:var(--wmst-blue);margin:.15rem 0 .25rem;font-weight:600}
.sg-search__results span{display:block;font-size:.88rem;line-height:1.5;color:var(--sg-text)}
.sg-search__results mark{background:#FFF1A8;color:inherit;border-radius:2px;padding:0}
.sg-search__empty{padding:.9rem .8rem;color:var(--sg-soft);font-size:.92rem}
.sg-hub__grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.6rem;align-items:start}
.sg-hub__side{display:flex;flex-direction:column;gap:1rem}

.sg-mods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.sg-mod a{position:relative;display:flex;gap:1.1rem;align-items:flex-start;padding:1.15rem 3rem 1.15rem 1.2rem;background:#fff;border:1px solid var(--sg-line);border-radius:12px;text-decoration:none;color:inherit;transition:border-color .16s,box-shadow .2s,transform .2s var(--sg-ease)}
.sg-mod a:hover{border-color:var(--sg-blue-line);box-shadow:0 10px 24px rgba(16,42,67,.1);transform:translateY(-2px)}
.sg-mod a:hover .mit-card__go{opacity:1;transform:none}
.sg-mod .mit-card__go{top:50%;bottom:auto;margin-top:-.6rem}
.sg-mod__num{position:relative;flex:0 0 2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:50%;background:var(--wmst-blue-soft);color:var(--wmst-blue);font:800 1rem/1 var(--font-display,sans-serif);transition:background .25s,color .25s}
.sg-mod__num .mit-ic{position:absolute;opacity:0;transform:scale(.4);transition:.25s var(--sg-ease)}
.sg-mod.is-done .sg-mod__num{background:#22A06B;color:#fff}
.sg-mod.is-done .sg-mod__num span{opacity:0}
.sg-mod.is-done .sg-mod__num .mit-ic{opacity:1;transform:none}
.sg-mod__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.sg-mod__title{font:700 1.08rem/1.3 var(--font-display,sans-serif);color:var(--sg-ink)}
.sg-mod__ch{display:block;margin-bottom:.25rem;font:700 .72rem/1 var(--font-display,sans-serif);letter-spacing:.07em;text-transform:uppercase;color:var(--wmst-blue)}
.sg-mod__sum{font-size:.92rem;line-height:1.5;color:var(--wmst-text)}
.sg-mod__meta{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:.8rem;color:var(--sg-soft);font-weight:500;margin-top:.2rem}
.sg-mod__meta>span{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.sg-mod__quiz:empty{display:none}
.sg-mod__quiz{color:#1B7A50;font-weight:600}
.sg-mod__bar{margin-top:.55rem;height:5px;max-width:280px}
.sg-mod:not(.is-started) .sg-mod__bar{display:none}

.sg-progress{padding:1.3rem 1.3rem 1.4rem}
.sg-progress__big{margin:0 0 .7rem;font-size:.95rem;color:var(--sg-text)}
.sg-progress__big b{font:800 1.5rem/1 var(--font-display,sans-serif);color:var(--wmst-blue-deep);margin-right:.2rem;font-variant-numeric:tabular-nums}
.sg-progress__bar{flex:none}
.sg-progress__meta{margin:.7rem 0 0;font-size:.86rem;line-height:1.5;color:var(--sg-soft)}
.sg-progress__go{width:100%;margin-top:1.1rem}
/* ready-for-the-test checklist: a plain list, no rings or badges */
.sg-ready{margin:1rem 0 0;padding:.95rem 0 0;border-top:1px solid #EDF1F5}
.sg-ready__title{display:flex;justify-content:space-between;gap:.5rem;margin:0 0 .65rem;font:700 .92rem/1.3 var(--font-display,sans-serif);color:var(--sg-ink)}
.sg-ready__title span{font-weight:600;color:var(--sg-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.sg-ready__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.sg-ready__list li{display:flex;align-items:flex-start;gap:.6rem;font-size:.86rem;line-height:1.4;color:var(--sg-text)}
.sg-ready__dot{flex:0 0 1.05rem;height:1.05rem;margin-top:.1rem;border-radius:50%;border:1.5px solid var(--sg-line-2);display:grid;place-items:center}
.sg-ready__dot .mit-ic{width:.7rem;height:.7rem;color:#fff;opacity:0}
.sg-ready__list li.is-done .sg-ready__dot{background:#22A06B;border-color:#22A06B}
.sg-ready__list li.is-done .mit-ic{opacity:1}
.sg-ready__t{flex:1;min-width:0}
.sg-ready__n{margin-left:auto;white-space:nowrap;color:var(--sg-soft);font-variant-numeric:tabular-nums}
.sg-ready__list a{color:var(--wmst-blue-deep)}
.sg-ready__test{display:block;margin-top:.85rem;font:600 .88rem/1.4 var(--font-display,sans-serif);color:var(--wmst-blue);text-decoration:none}
.sg-ready__test:hover{text-decoration:underline}
.sg-ready__test .mit-ic{display:inline-block;width:.95em;height:.95em;vertical-align:-.12em;margin-left:.2rem}
.sg-ready__test.mit-btn{display:flex;width:100%;margin-top:1rem;color:#fff;text-decoration:none;line-height:1.3;text-align:center}
.sg-tool{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;text-decoration:none;color:inherit;transition:border-color .16s,box-shadow .2s,transform .2s var(--sg-ease)}
.sg-tool:hover{border-color:var(--sg-blue-line);box-shadow:0 8px 20px rgba(16,42,67,.09);transform:translateY(-1px)}
.sg-tool>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.sg-tool b{font:700 .98rem/1.25 var(--font-display,sans-serif);color:var(--sg-ink)}
.sg-tool>span:nth-child(2) span{font-size:.82rem;line-height:1.4;color:var(--sg-soft)}
.sg-tool>.mit-ic{color:var(--wmst-blue);flex:0 0 auto}
.sg-tool__ic{flex:0 0 2.5rem;height:2.5rem;border-radius:10px;display:grid;place-items:center;background:var(--wmst-blue-soft);color:var(--wmst-blue)}
.sg-tool__ic .mit-ic{width:1.2rem;height:1.2rem}

/* ---------- module page layout ---------- */
/* module pages use more of a wide screen: reading text keeps a comfortable line length, while boxes, tables, cards and
   drawings use the full width (the site caps every <p> at 70ch, so text inside boxes is let out to fill its box) */
.sg-modpage .mit-wrap{max-width:1440px}
.sg-modpage .mit-crumbs{padding-top:clamp(1.5rem,3vw,2.25rem);padding-bottom:clamp(1.25rem,2.4vw,1.85rem)}
.sg-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:2rem;align-items:start}
.sg-sec__body p:not(.sg-p){max-width:none}
@media (min-width:1200px){
  .sg-modpage .sg-sec{padding:2.5rem 2.9rem}
  .sg-modpage .sg-p,.sg-modpage .sg-list ul{font-size:1.0625rem}
  .sg-modpage .sg-p{max-width:78ch}
  .sg-modpage .sg-fig img{max-height:440px}
}
@media (min-width:1700px){
  .sg-modpage .mit-wrap{max-width:1600px}
  .sg-layout{grid-template-columns:310px minmax(0,1fr);gap:2.2rem}
  .sg-modpage .sg-p,.sg-modpage .sg-list ul{font-size:1.1rem}
  .sg-modpage .sg-fig img{max-height:500px}
}
.sg-toc{position:sticky;top:96px}
.sg-toc__panel{padding:1.1rem .7rem .8rem}
.sg-toc__kicker{margin:0 .6rem .25rem;font:600 .78rem/1 var(--font-display,sans-serif);color:var(--wmst-blue)}
.sg-toc__title{margin:0 .6rem .8rem;font:700 1rem/1.3 var(--font-display,sans-serif);color:var(--sg-ink)}
.sg-toc__prog{display:flex;align-items:center;gap:.6rem;margin:0 .6rem .8rem}
.sg-toc__pct{font:700 .78rem/1 var(--font-display,sans-serif);color:var(--wmst-blue);font-variant-numeric:tabular-nums;min-width:2.4em;text-align:right}
.sg-toc__done{margin:-.2rem .6rem .8rem;font-size:.86rem;line-height:1.4;font-weight:600;color:#1B7A50;animation:sgIn .25s var(--sg-ease)}
.sg-toc__done a{color:var(--wmst-blue-deep)}
.sg-toc__bar{display:none}
/* the outline: a numbered stepper. Read steps turn into green checks, the step on screen is blue. */
.sg-toc__list{list-style:none;margin:0;padding:0;max-height:calc(100vh - 360px);overflow:auto;scrollbar-width:thin}
.sg-toc__list li{position:relative}
.sg-toc__list li:not(:last-child)::before{content:"";position:absolute;left:calc(.6rem + .675rem - 1px);top:1.2rem;bottom:-1.2rem;width:2px;background:#E6EBF0}
.sg-toc__list li:has(a.is-read):not(:last-child)::before{background:#A9DCC3}
.sg-toc__list a{position:relative;display:flex;gap:.65rem;align-items:flex-start;padding:.5rem .6rem;border-radius:8px;text-decoration:none;color:var(--sg-text);font-size:.88rem;line-height:1.35;transition:background .14s,color .14s}
.sg-toc__list a:hover{background:#F4F7FA;color:var(--sg-ink)}
.sg-toc__list a.is-active{background:var(--wmst-blue-soft);color:var(--wmst-blue-deep);font-weight:600}
.sg-toc__t{flex:1;min-width:0;padding-top:.1rem}
.sg-toc__ref{margin-right:.15rem;font-weight:700;color:var(--wmst-blue);font-variant-numeric:tabular-nums}
.sg-toc__part{display:block;padding:.8rem .6rem .3rem;font:700 .7rem/1 var(--font-display,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--sg-soft)}
.sg-toc__list li.sg-toc__haspart:not(:last-child)::before{top:3rem}
.sg-toc__dot{position:relative;z-index:1;flex:0 0 1.35rem;height:1.35rem;border-radius:50%;border:1.5px solid var(--sg-line-2);background:#fff;display:grid;place-items:center;font:700 .7rem/1 var(--font-display,sans-serif);color:var(--sg-soft);font-variant-numeric:tabular-nums;transition:background .25s,border-color .25s,color .25s}
.sg-toc__dot>*{grid-area:1/1}
.sg-toc__num .mit-ic{display:block;width:.75rem;height:.75rem}
.sg-toc__dot>.mit-ic{width:.75rem;height:.75rem;color:#fff;opacity:0;transform:scale(.3);transition:.25s var(--sg-ease)}
.sg-toc__list a.is-active .sg-toc__dot{background:var(--wmst-blue);border-color:var(--wmst-blue);color:#fff}
.sg-toc__list a.is-read .sg-toc__dot{background:#22A06B;border-color:#22A06B}
.sg-toc__list a.is-read .sg-toc__num{opacity:0}
.sg-toc__list a.is-read .sg-toc__dot>.mit-ic{opacity:1;transform:none}
.sg-toc__list a.is-read.is-active .sg-toc__dot{box-shadow:0 0 0 3px rgba(0,103,176,.28)}
.sg-toc__tools{margin:.7rem .6rem 0;padding-top:.75rem;border-top:1px solid #EDF1F5}
.sg-toc__tools .pt-switch{min-height:40px;font-size:.9rem}
.sg-toc__hint{margin:.15rem 0 0;font-size:.78rem;line-height:1.45;color:var(--sg-soft)}

.sg-main{min-width:0;display:flex;flex-direction:column;gap:1.1rem}
.sg-mhead{padding:1.1rem .2rem .6rem}   /* top lines the kicker up with the first line of the contents panel */
.sg-mhead .mit-lesson__step{margin-top:0}
.sg-mhead .mit-lesson__title{margin-bottom:.45rem;font-size:clamp(1.55rem,3vw,2.1rem)}
.sg-mhead__sum{margin:0;font-size:1rem;line-height:1.6;color:var(--sg-soft);max-width:64ch}

.sg-sec{padding:clamp(1.3rem,2.4vw,2.1rem);scroll-margin-top:96px}
.sg-sec__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:1rem;margin-bottom:1.15rem;padding-bottom:1rem;border-bottom:1px solid #EDF1F5}
.sg-sec__kicker{grid-column:1/-1;margin:0 0 .45rem;font:600 .76rem/1 var(--font-display,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--wmst-blue);font-variant-numeric:tabular-nums}
/* the dashed yellow lane line draws under the heading of the section you jumped to (decoration only: the heading never moves) */
.sg-sec__title{margin:0;padding-bottom:.18em;font:800 clamp(1.3rem,2.4vw,1.65rem)/1.25 var(--font-display,sans-serif);color:var(--wmst-blue-deep);text-wrap:balance;background:repeating-linear-gradient(90deg,var(--wmst-yellow,#F7D021) 0 14px,transparent 14px 24px) no-repeat 0 100%/0 3px}
.sg-sec__title:focus{outline:none}
.sg-sec__ref{color:var(--wmst-blue);font-variant-numeric:tabular-nums;white-space:nowrap}
.sg-sec__ref::after{content:"";display:inline-block;width:2px;height:.78em;margin:0 .05em 0 .42em;background:currentColor;opacity:.3;vertical-align:-.04em}
.sg-sec:target .sg-sec__title,.sg-paged:not(.sg-review) .sg-sec.is-current .sg-sec__title{animation:sgLaneDraw .6s var(--sg-ease) .2s forwards}
.sg-sec__done{display:inline-flex;align-items:center;gap:.3rem;flex:0 0 auto;font:600 .82rem/1 var(--font-display,sans-serif);color:#1B7A50}
.sg-sec__done .mit-ic{width:1rem;height:1rem}
.sg-sec__done.is-new{animation:sgPop .35s var(--sg-ease)}
.sg-sec__body{display:flex;flex-direction:column;gap:1.1rem}
.sg-sec__end{display:block;height:1px}

/* one step at a time (the inline script after the module adds .sg-paged; "Key facts only" shows every step) */
.sg-js .sg-paged:not(.sg-review) .sg-sec:not(.is-current){display:none}
.sg-js .sg-paged .sg-pn,.sg-review .sg-sec__nav,.sg-review .sg-sec__time,html:not(.sg-js) .sg-sec__nav{display:none}
.sg-paged:not(.sg-review) .sg-sec.is-current{animation:sgIn .22s var(--sg-ease)}

/* Previous / Next at the end of every step */
.sg-sec__nav{display:flex;align-items:stretch;justify-content:space-between;gap:1rem;margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid #EDF1F5}
.sg-sec__nav a{display:flex;align-items:center;gap:.7rem;min-width:0;text-decoration:none;border-radius:12px}
.sg-sec__nav a>span{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.sg-sec__nav small{font:600 .74rem/1 var(--font-display,sans-serif);letter-spacing:.05em;text-transform:uppercase}
.sg-sec__nav b{font:700 .98rem/1.3 var(--font-display,sans-serif)}
.sg-sec__nav .mit-ic{flex:0 0 auto;width:1.15rem;height:1.15rem}
.sg-sec__prev{flex:0 1 auto;max-width:42%;padding:.75rem .9rem .75rem .6rem;color:var(--sg-soft)}
.sg-sec__prev b{color:var(--sg-text);font-weight:600}
.sg-sec__prev:hover{background:#F4F7FA}
.sg-sec__prev:hover b{color:var(--sg-ink)}
.sg-sec__next{flex:0 1 auto;max-width:58%;margin-left:auto;padding:.85rem 1.1rem .85rem 1.25rem;background:var(--wmst-blue);border:1px solid var(--wmst-blue);color:#fff;box-shadow:0 6px 16px rgba(0,74,130,.18);transition:background .15s,box-shadow .2s,transform .2s var(--sg-ease)}
.sg-sec__next small{color:#CFE3F3}
.sg-sec__next:hover{background:var(--wmst-blue-deep);box-shadow:0 10px 22px rgba(0,74,130,.24);transform:translateY(-1px)}
.sg-sec__next:hover .mit-ic{transform:translateX(2px)}
.sg-sec__next .mit-ic{transition:transform .2s var(--sg-ease)}

/* ---------- blocks ---------- */
.sg-p{margin:0;font-size:1rem;line-height:1.72;color:var(--sg-text);max-width:72ch}
.sg-p strong,.sg-sec strong{color:var(--sg-ink);font-weight:700}
.sg-list__title{display:flex;align-items:center;gap:.45rem;margin:0 0 .55rem;font:700 .98rem/1.3 var(--font-display,sans-serif);color:var(--sg-ink)}
.sg-list ul{margin:0;padding:0 0 0 1.2rem;color:var(--sg-text);line-height:1.6}
.sg-list li{margin:.3rem 0}
.sg-list--do ul,.sg-list--dont ul{list-style:none;padding:0}
.sg-list--do li,.sg-list--dont li{display:flex;gap:.6rem;align-items:flex-start}
.sg-list--do li .mit-ic,.sg-list--dont li .mit-ic{flex:0 0 1.25rem;width:1.25rem;height:1.25rem;padding:.2rem;border-radius:50%;margin-top:.12rem}
.sg-list--do li .mit-ic{background:#EAF7F0;color:#1B7A50}
.sg-list--dont li .mit-ic{background:#FCECEC;color:#C0392B}
.sg-list--do .sg-list__title .mit-ic{color:#1B7A50}
.sg-list--dont .sg-list__title .mit-ic{color:#C0392B}

.sg-steps ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sg-steps li{position:relative;display:flex;gap:.9rem;padding:0 0 1rem}
.sg-steps li:not(:last-child)::before{content:"";position:absolute;left:.95rem;top:2rem;bottom:.2rem;width:2px;background:#E1E8EF}
.sg-steps__n{flex:0 0 1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;background:var(--wmst-blue);color:#fff;font:700 .85rem/1 var(--font-display,sans-serif);position:relative;z-index:1}
.sg-steps__t{margin:.25rem 0 .15rem;font:700 .98rem/1.35 var(--font-display,sans-serif);color:var(--sg-ink)}
.sg-steps__x{margin:0;color:var(--sg-text);line-height:1.6;font-size:.95rem}

/* the guide's sub-headings, in its order */
.sg-h3{margin:.8rem 0 -.3rem;font:800 1.18rem/1.3 var(--font-display,sans-serif);color:var(--sg-ink);text-wrap:balance}
.sg-sec__body>.sg-h3:first-child{margin-top:0}
.sg-h3__ref{display:inline-block;margin-right:.55rem;padding:.2rem .45rem;border-radius:6px;background:var(--wmst-blue-soft);color:var(--wmst-blue);font:700 .8rem/1.2 var(--font-display,sans-serif);vertical-align:.14em;font-variant-numeric:tabular-nums}

/* numbers to know, shown openly (the Numbers to know page has them as flashcards) */
.sg-numlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:.65rem}
.sg-numlist li{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem;border:1px solid var(--sg-line);border-radius:12px;background:#fff}
.sg-numlist__v{font:800 1.45rem/1.15 var(--font-display,sans-serif);color:var(--wmst-blue-deep);letter-spacing:-.01em;overflow-wrap:break-word}
.sg-numlist__l{font-size:.92rem;line-height:1.5;color:var(--sg-text)}
.sg-numlist__l .sg-cite{margin-top:.45rem}

/* signs, signals and lights: picture, name and meaning side by side (the Road signs page has them as flashcards) */
.sg-signlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:.65rem}
.sg-signlist li{display:flex;gap:1rem;align-items:center;padding:.85rem 1rem;border:1px solid var(--sg-line);border-radius:12px;background:#fff}
.sg-signlist__pic{flex:0 0 100px;height:124px;display:grid;place-items:center}
.sg-signlist__pic img{display:block;width:auto;height:auto;max-width:100px;max-height:124px}
.sg-signlist__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.sg-signlist__t b{font:800 1rem/1.3 var(--font-display,sans-serif);color:var(--wmst-blue-deep)}
.sg-signlist__t>span{font-size:.92rem;line-height:1.5;color:var(--sg-text)}

/* where this is in the DOL guide */
.sg-sec__src,.sg-qq__src{display:flex;align-items:center;gap:.5rem;margin:1.6rem 0 0;font-size:.86rem;line-height:1.4;color:var(--sg-soft);max-width:none}
.sg-sec__src>.mit-ic,.sg-qq__src>.mit-ic{flex:0 0 auto;width:1rem;height:1rem;color:var(--wmst-blue)}
.sg-sec__src a,.sg-qq__src a{display:inline-flex;align-items:center;gap:.25rem;color:var(--wmst-blue-deep);font-weight:600}
.sg-sec__src a .mit-ic,.sg-qq__src a .mit-ic{width:.85em;height:.85em}
.sg-qq__src{margin:.55rem 0 0}

/* key facts and warnings are the only tinted, bordered boxes, so the eye goes to them */
.sg-key{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.15rem;border-radius:12px;background:#EEF5FB;border:1px solid #CFE2F2}
.sg-key__ic{flex:0 0 2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--wmst-yellow,#F7D021);color:var(--sg-ink)}
.sg-key__ic .mit-ic{width:1rem;height:1rem;fill:currentColor}
.sg-key__label{margin:0 0 .2rem;font:700 .78rem/1 var(--font-display,sans-serif);color:var(--wmst-blue)}
.sg-key__t{margin:0;font-size:1rem;line-height:1.55;color:var(--sg-ink);font-weight:500}
.sg-cite{display:inline-flex;align-items:center;gap:.3rem;margin-top:.5rem;font:600 .78rem/1 var(--font-display,sans-serif);color:var(--wmst-blue);text-decoration:none;padding:.3rem .55rem;border-radius:6px;background:#fff;border:1px solid #CFE2F2;transition:border-color .15s,background .15s}
a.sg-cite:hover{border-color:var(--wmst-blue);background:var(--wmst-blue-soft)}

/* flip cards: numbers and signs. Both faces share one grid cell and fill it, so every card in a row is the same height. */
.sg-nums__hint{margin:-.2rem 0 .7rem;font-size:.8rem;color:var(--sg-soft)}
.sg-nums__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem}
.sg-signs__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.75rem}
.sg-flip{position:relative;display:grid;width:100%;min-width:0;padding:0;border:0;background:none;cursor:pointer;perspective:900px;text-align:left;font:inherit;color:inherit;transition:scale .12s var(--sg-ease)}
.sg-flip:active{scale:.985}
.sg-flip__face{grid-area:1/1;position:relative;box-sizing:border-box;height:100%;min-height:140px;display:flex;flex-direction:column;justify-content:center;gap:.5rem;padding:1rem;border-radius:12px;border:1px solid var(--sg-line);background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .5s var(--sg-flip-ease) var(--d,0s),visibility 0s linear calc(.25s + var(--d,0s)),box-shadow .2s,border-color .2s}
.sg-flip__back{justify-content:flex-start;background:#F3F8FC;border-color:#9CC4E6;color:var(--sg-ink)}
/* each face also hides itself halfway through the turn (the symmetric curve puts 90 degrees at exactly .25s): Safari doesn't always honor backface-visibility */
.sg-js .sg-flip__back{transform:rotateY(180deg);visibility:hidden}
.sg-js .sg-flip.is-flipped .sg-flip__front{transform:rotateY(-180deg);visibility:hidden}
.sg-js .sg-flip.is-flipped .sg-flip__back{transform:rotateY(0);visibility:visible}
.sg-flip:hover .sg-flip__front{border-color:var(--sg-blue-line);box-shadow:0 8px 20px rgba(16,42,67,.1)}
.sg-flip.is-flipped:hover .sg-flip__back{border-color:var(--wmst-blue)}
.sg-flip.is-flipped .sg-flip__back{box-shadow:0 6px 16px rgba(0,74,130,.1)}
.sg-flip__hint{display:inline-flex;align-items:center;gap:.3rem;margin-top:auto;font:600 .74rem/1 var(--font-display,sans-serif);color:var(--wmst-blue);white-space:nowrap}
.sg-num__label{font:600 .92rem/1.4 var(--font-display,sans-serif);color:var(--sg-ink)}
.sg-num__value{font:800 1.7rem/1.1 var(--font-display,sans-serif);color:var(--wmst-blue-deep);letter-spacing:-.01em;overflow-wrap:break-word}
.sg-num__label--sm{font-weight:500;font-size:.82rem;color:var(--sg-text)}
.sg-num__cite{display:inline-flex;align-items:center;gap:.3rem;font:600 .72rem/1 var(--font-display,sans-serif);color:var(--wmst-blue);margin-top:auto}
.sg-sign .sg-flip__face{min-height:190px}
.sg-sign .sg-flip__front{align-items:center;text-align:center}
.sg-sign .sg-flip__front img{width:auto;max-width:78%;height:110px;object-fit:contain;display:block;margin:auto}
.sg-sign .sg-flip__hint{margin:.6rem auto 0}
.sg-sign__thumb{display:block;height:44px;width:auto;max-width:60%;object-fit:contain;align-self:flex-start;margin-bottom:.15rem}
.sg-sign__noart{font:700 1.05rem/1.3 var(--font-display,sans-serif);color:var(--sg-ink);margin:auto}
.sg-sign__name{font:800 1.05rem/1.25 var(--font-display,sans-serif);color:var(--wmst-blue-deep)}
.sg-sign__meaning{font-size:.86rem;line-height:1.5;color:var(--sg-text)}

.sg-compare__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}
.sg-compare__col{border:1px solid var(--sg-line);border-radius:12px;overflow:hidden;background:#fff}
.sg-compare__h{margin:0;padding:.7rem 1rem;background:var(--wmst-blue-soft);font:700 .95rem/1.3 var(--font-display,sans-serif);color:var(--wmst-blue-deep)}
.sg-compare__col ul{margin:0;padding:.7rem 1rem .8rem 2rem;color:var(--sg-text);line-height:1.55;font-size:.94rem}
.sg-compare__col li{margin:.3rem 0}

.sg-table{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--sg-line);border-radius:12px;background:#fff}
.sg-table table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.45}
.sg-table caption{caption-side:top;text-align:left;padding:.75rem 1rem;font:700 .95rem/1.3 var(--font-display,sans-serif);color:var(--sg-ink);border-bottom:1px solid var(--sg-line)}
.sg-table th,.sg-table td{padding:.6rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid #EDF1F5}
.sg-table thead th{background:#F7F9FB;font:700 .8rem/1.3 var(--font-display,sans-serif);color:var(--sg-soft)}
.sg-table tbody th{font-weight:600;color:var(--sg-ink)}
.sg-table tbody tr:last-child>*{border-bottom:0}

.sg-call{display:flex;gap:.8rem;align-items:flex-start;padding:.95rem 1.1rem;border-radius:12px;border:1px solid}
.sg-call__ic{flex:0 0 auto;margin-top:.1rem}
.sg-call__ic .mit-ic{width:1.15rem;height:1.15rem}
.sg-call__title{margin:0 0 .2rem;font:700 .95rem/1.3 var(--font-display,sans-serif)}
.sg-call__t{margin:0;line-height:1.6;font-size:.95rem;color:var(--sg-text)}
.sg-call--tip{background:#F3F9F5;border-color:transparent}.sg-call--tip .sg-call__ic,.sg-call--tip .sg-call__title{color:#1B7A50}
.sg-call--warning{background:var(--sg-warn-bg);border-color:var(--sg-warn-line)}.sg-call--warning .sg-call__ic,.sg-call--warning .sg-call__title{color:var(--sg-warn)}
.sg-call--note{background:#F5F7F9;border-color:transparent}.sg-call--note .sg-call__ic,.sg-call--note .sg-call__title{color:var(--wmst-blue-deep)}
/* law changed since the 2025 guide */
.sg-call--update{background:#F2F6FD;border-color:#C8D8F2}.sg-call--update .sg-call__ic,.sg-call--update .sg-call__title{color:#1F4E9A}
.sg-call__label{margin:0 0 .25rem;font:700 .72rem/1 var(--font-display,sans-serif);letter-spacing:.07em;text-transform:uppercase;color:#1F4E9A}
.sg-call--update .sg-cite{margin-top:.55rem}

.sg-law{margin-top:0}
.sg-law__means{max-width:none;margin:.5rem 0 0;font-size:.9rem;line-height:1.55;color:var(--sg-text)}

/* scenarios: a soft fill, so the white answer buttons stand out */
.sg-scn{padding:1.1rem 1.15rem;border-radius:12px;background:#F4F7FA}
.sg-scn__label{display:inline-flex;align-items:center;gap:.4rem;margin:0 0 .5rem;font:700 .8rem/1 var(--font-display,sans-serif);color:var(--wmst-blue)}
.sg-scn__q{margin:0 0 .8rem;font:600 1.05rem/1.5 var(--font-sans,sans-serif);color:var(--sg-ink);max-width:none}
.sg-scn__opts{display:flex;flex-direction:column;gap:.5rem}
.sg-scn__opt{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;width:100%;padding:.75rem .9rem;border:1px solid var(--sg-line);border-radius:10px;background:#fff;font:inherit;font-size:.95rem;line-height:1.45;color:var(--sg-text);text-align:left;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.sg-scn__opt:hover:not([aria-disabled=true]){border-color:var(--wmst-blue);background:#F3F8FC}
.sg-scn__opt:active:not([aria-disabled=true]){transform:scale(.995)}
.sg-scn__opt[aria-disabled=true]{cursor:default}
.sg-scn__opt.is-correct{border-color:var(--pt-ok-line,#22A06B);background:var(--pt-ok-bg,#EAF7F0);color:var(--sg-ink)}
.sg-scn__opt.is-correct .pt-opt__key{background:#1B7A50;color:#fff}
.sg-scn__opt.is-wrong{border-color:var(--pt-no-line,#D64545);background:var(--pt-no-bg,#FCECEC)}
.sg-scn__opt.is-wrong .pt-opt__key{background:#D64545;color:#fff}
.sg-scn__opt.is-dim{color:#646B74;background:#FAFBFC}
.sg-scn__txt{flex:1 1 12rem}
.sg-scn__opt .pt-opt__tag{margin-left:auto}
.sg-scn__best{font:700 .8rem/1 var(--font-display,sans-serif);color:#1B7A50}
.sg-scn__why{display:block;flex-basis:100%;padding-left:2.35rem;font-size:.88rem;line-height:1.5;color:var(--sg-soft)}
.sg-js .sg-scn__why,.sg-js .sg-scn__best{display:none}
.sg-js .sg-scn:not(.is-done) .sg-scn__law{display:none}
.sg-scn__fb{margin-top:.8rem;padding:.85rem 1rem;border-radius:10px;border:1px solid;font-size:.94rem;line-height:1.55;color:var(--sg-text);animation:sgIn .2s var(--sg-ease)}
.sg-scn__fb.is-ok{background:var(--pt-ok-bg,#EAF7F0);border-color:#BFE5D0}
.sg-scn__fb.is-no{background:#FFF7F6;border-color:#F3C7C2}
.sg-scn__fb>b:first-child{display:flex;align-items:center;gap:.4rem;margin-bottom:.15rem;font-family:var(--font-display,sans-serif)}
.sg-scn__fb>b:first-child .mit-ic{width:1.05rem;height:1.05rem;flex:0 0 auto}
.sg-scn__fb.is-ok>b:first-child{color:#1B7A50}
.sg-scn__fb.is-no>b:first-child{color:#C0392B}
.sg-scn__fb p{margin:.35rem 0 0;max-width:none}
.sg-scn__law{margin-top:.2rem}
.sg-scn__again{margin-top:.7rem;padding:.6em 1em;font-size:.88rem}

/* "think about it": a plain box with a text link, not a chip */
.sg-reveal{border:1px solid var(--sg-line);border-radius:12px;background:#fff;transition:border-color .2s,background .2s}
.sg-reveal:hover{border-color:var(--sg-blue-line)}
.sg-reveal summary{display:flex;align-items:center;gap:.65rem;padding:.85rem 1rem;border-radius:12px;cursor:pointer;list-style:none;font:600 .97rem/1.45 var(--font-display,sans-serif);color:var(--sg-ink);transition:background .15s}
.sg-reveal summary:hover{background:#F7FAFD}
.sg-reveal summary::-webkit-details-marker{display:none}
.sg-reveal summary>.mit-ic{color:var(--wmst-blue);flex:0 0 auto;width:1.15rem;height:1.15rem}
.sg-reveal__q{flex:1;min-width:0}
.sg-reveal__cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;font-size:.84rem;font-weight:600;color:var(--wmst-blue)}
.sg-reveal summary:hover .sg-reveal__cta{text-decoration:underline}
.sg-reveal__cta .mit-ic{width:.85em;height:.85em;transition:transform .2s var(--sg-ease)}
.sg-reveal__hide{display:none}
.sg-reveal[open]{border-color:var(--sg-blue-line);background:#FBFDFF}
.sg-reveal[open] .sg-reveal__show{display:none}
.sg-reveal[open] .sg-reveal__hide{display:inline}
.sg-reveal[open] .sg-reveal__cta .mit-ic{transform:rotate(180deg)}
.sg-reveal__a{margin:0;padding:0 1rem 1rem 2.8rem;color:var(--sg-text);line-height:1.6;animation:sgIn .2s var(--sg-ease);max-width:none}

/* drawings sit straight on the white panel */
.sg-fig{margin:0;padding:.25rem 0 0;text-align:center}
/* block, not inline-block: an image that hasn't loaded yet shows its alt text, and an inline box would then sit on that
   text's baseline and be ~20px taller, so every lazy figure would shrink as it loads and the page would jump (Safari has no scroll anchoring) */
.sg-fig img{width:auto;height:auto;max-width:100%;max-height:340px;display:block;margin:0 auto}
.sg-fig figcaption{margin-top:.6rem;font-size:.86rem;color:var(--sg-soft);line-height:1.5}

/* review mode: keep only key facts, numbers, signs, warnings and law updates (blocks marked data-sg-keep) */
.sg-review .sg-sec__body>[data-sg-key]:not([data-sg-keep]),.sg-review .sg-sec__src{display:none}
.sg-review .sg-sec:not(:has(.sg-sec__body>[data-sg-keep])):not(.sg-quiz){padding-block:.9rem}
.sg-review .sg-sec:not(:has(.sg-sec__body>[data-sg-keep])):not(.sg-quiz) .sg-sec__title{font-size:1.05rem}
.sg-review .sg-sec:not(:has(.sg-sec__body>[data-sg-keep])):not(.sg-quiz) .sg-sec__head{margin-bottom:.3rem}
.sg-review .sg-sec:not(:has(.sg-sec__body>[data-sg-keep])):not(.sg-quiz) .sg-sec__body::after{content:"Nothing to review here. Turn off \"Key facts only\" to read the section.";font-size:.86rem;color:var(--sg-soft)}

/* ---------- who goes first? ---------- */
.sg-row{padding:1.1rem 1.15rem 1.2rem;border-radius:12px;background:#F4F7FA}
.sg-row__intro{margin:-.2rem 0 .8rem;font-size:.92rem;line-height:1.55;color:var(--sg-text);max-width:none}
.sg-row__round{scroll-margin-top:96px}                     /* "Next intersection" scrolls the new round clear of the sticky header */
.sg-row__round+.sg-row__round{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid #E2E8EE}
.sg-js .sg-row__round:not(.is-current){display:none}
.sg-js .sg-row__round+.sg-row__round{margin-top:0;padding-top:0;border-top:0}
.sg-row__count{margin:0 0 .35rem;font:600 .8rem/1 var(--font-display,sans-serif);color:var(--wmst-blue)}
.sg-row__q{margin:0 0 .8rem;font:600 1.05rem/1.5 var(--font-sans,sans-serif);color:var(--sg-ink);max-width:none}
.sg-row__stage{position:relative;max-width:400px;margin:0 auto}
.sg-row__svg{display:block;width:100%;height:auto}
.sg-row__car{position:absolute;width:max(44px,17%);aspect-ratio:1/1;transform:translate(-50%,-50%);padding:0;border:3px solid transparent;border-radius:14px;background:transparent;cursor:pointer;transition:border-color .15s,background .15s}
.sg-row__car:hover,.sg-row__car:focus-visible{border-color:#7FB8E6;background:rgba(255,255,255,.08)}
.sg-app .sg-row__car:focus-visible{outline:2px solid #fff;outline-offset:1px}
.sg-row__car.is-go{border-color:#22A06B;background:rgba(34,160,107,.12);cursor:default}
.sg-row__car.is-go::after{content:attr(data-n);position:absolute;top:-11px;right:-11px;width:24px;height:24px;border-radius:50%;background:#1B7A50;border:2px solid #fff;color:#fff;font:700 .8rem/20px var(--font-display,sans-serif);text-align:center}
.sg-row__car.is-wrong{border-color:#D64545;background:rgba(214,69,69,.15)}
.sg-row__how{margin:.7rem 0 0;font-size:.86rem;color:var(--sg-soft);text-align:center;max-width:none}
.sg-row__round.is-done .sg-row__how{display:none}
.sg-row .sg-scn__fb{margin-top:.8rem}
.sg-row__next{margin-top:.75rem;width:auto}
.sg-row__ans{margin-top:.8rem}
.sg-row__round.is-done .sg-row__ans{display:none}
.sg-row__order{margin:0 0 .5rem;padding-left:1.3rem;font-weight:600;color:var(--sg-ink)}
.sg-row__why{margin:0;max-width:none}
html:not(.sg-js) .sg-row__car,html:not(.sg-js) .sg-row__how{display:none}

/* ---------- check yourself ---------- */
.sg-quiz__lede{margin:-.4rem 0 1.2rem;color:var(--sg-soft);font-size:.92rem}
.sg-quiz__score{font:700 .85rem/1 var(--font-display,sans-serif);color:#1B7A50}
.sg-qq{padding:1.1rem 0 1.3rem;border-top:1px solid #EDF1F5}
.sg-qq:first-of-type{border-top:0;padding-top:0}
.sg-qq .mit-q__text{margin:0 0 .8rem;font-size:1.05rem;text-wrap:wrap;text-wrap:pretty;max-width:none}
.sg-qq .pt-fb{margin:.8rem 0 0;animation:sgIn .2s var(--sg-ease)}
.sg-qq .pt-fb:focus{outline:none}
.sg-qq .pt-fb:focus-visible{outline:2px solid var(--focus,#4A90E2);outline-offset:2px}
.sg-js .sg-qq:not(.is-done) [data-sg-qfb]{display:none}
.sg-qq.is-done .pt-opt:not(.is-correct):not(.is-wrong):not(.is-missed):hover{border-color:var(--wmst-line)}
.sg-qq__check{margin-top:.8rem;width:auto;min-width:10.5rem}
.sg-qq__check:disabled{opacity:.45;cursor:not-allowed}
.sg-qq__check:disabled:hover{background:var(--wmst-blue)}
.sg-qq.is-done .sg-qq__check{display:none}
.sg-quiz__btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}
.sg-quiz__btns .mit-btn{width:auto}

/* ---------- previous / next ---------- */
.sg-pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.4rem}
.sg-pn__a{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.2rem;text-decoration:none;color:inherit;transition:border-color .16s,box-shadow .2s,transform .2s var(--sg-ease)}
.sg-pn__a:hover{border-color:var(--sg-blue-line);box-shadow:0 8px 20px rgba(16,42,67,.09);transform:translateY(-1px)}
.sg-pn__a span{display:inline-flex;align-items:center;gap:.35rem;font:600 .8rem/1 var(--font-display,sans-serif);color:var(--wmst-blue)}
.sg-pn__a b{font:700 1rem/1.3 var(--font-display,sans-serif);color:var(--sg-ink)}
.sg-pn__a--next{text-align:right;align-items:flex-end}
.sg-disclaimer{margin-top:1.4rem}

/* ---------- numbers / signs collections ---------- */
.sg-coll__wrap{padding-top:.4rem}
.sg-coll__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;padding:.8rem 1rem;margin-bottom:1.6rem;position:sticky;top:84px;z-index:4}
.sg-coll__bar .mit-btn{width:auto}
.sg-coll__known{margin-left:auto;font-size:.86rem;color:var(--sg-soft)}
.sg-coll__known b{color:#1B7A50}
.sg-coll__group{margin-bottom:2rem}
.sg-coll__group .mit-group__title a{color:inherit;text-decoration:none}
.sg-coll__group .mit-group__title a:hover{color:var(--wmst-blue)}
.sg-coll__extra{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin:-.4rem 0 1.1rem}
.sg-coll__extra .pt-group__lede{margin:0;flex:1 1 22rem}
.sg-drill{padding:clamp(1.3rem,3vw,2.2rem);margin-bottom:1.6rem;text-align:center;scroll-margin-top:176px}
.sg-drill__count{margin:0 0 .7rem;max-width:none;font:600 .82rem/1 var(--font-display,sans-serif);color:var(--sg-soft)}
.sg-drill__road{max-width:420px;margin:0 auto 1.1rem}
.sg-drill__card{max-width:420px;margin:0 auto 1.2rem;text-align:left}
.sg-drill__card>.sg-flip{animation:sgDeal .22s var(--sg-ease)}
.sg-drill__card .sg-flip__face{min-height:220px}
.sg-drill__card .sg-flip__back{justify-content:center}
.sg-drill__card .sg-flip:active{scale:none}
.sg-drill__card .sg-flip:not(.is-flipped){cursor:pointer}
.sg-drill__card .sg-flip.is-flipped{cursor:default}
.sg-drill .sg-flip__hint{display:none}
.sg-drill__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.sg-drill__btns .mit-btn{width:auto}
.sg-drill [data-d=knew]{border-color:#22A06B;color:#1B7A50;background:#F3F9F5}
.sg-drill [data-d=knew]:hover{background:#E7F6EE}
.sg-drill__done{margin:0 0 .4rem;max-width:none;font:700 1.25rem/1.3 var(--font-display,sans-serif);color:var(--sg-ink)}
.sg-drill__sub{margin:0 auto 1.2rem;max-width:46ch;font-size:.92rem;line-height:1.55;color:var(--sg-text)}

/* ---------- review what you missed ---------- */
.sg-rv__wrap{padding-top:.4rem}
.sg-rv__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;padding:1.1rem 1.2rem;margin-bottom:1.6rem}
.sg-rv__sum{flex:1 1 18rem;margin:0;font-size:.98rem;line-height:1.55;color:var(--sg-text);max-width:none}
.sg-rv__sum b{font:800 1.2rem/1 var(--font-display,sans-serif);color:var(--wmst-blue-deep)}
.sg-rv__sum a{color:var(--wmst-blue)}
.sg-rv__btns{display:flex;flex-wrap:wrap;gap:.6rem}
.sg-rv__btns .mit-btn{width:auto}
.sg-rv__group{margin-bottom:2rem}
.sg-rv__item{margin-bottom:1rem;padding:1rem 1.1rem 1.1rem;background:#fff;border:1px solid var(--sg-line);border-radius:12px}
.sg-rv__where{display:flex;flex-wrap:wrap;gap:.2rem .8rem;margin:0 0 .6rem;font-size:.84rem;color:var(--sg-soft);max-width:none}
.sg-rv__where a{color:var(--wmst-blue);font-weight:600}
.sg-rv__item>.sg-scn,.sg-rv__item>.sg-row{padding:0;background:none}
.sg-rv__run{text-align:left}
.sg-rv__run .sg-drill__count,.sg-rv__run .sg-drill__done{text-align:center}
.sg-rv__slot{max-width:720px;margin:0 auto 1rem}
.sg-rv__slot>.sg-scn,.sg-rv__slot>.sg-row{animation:sgDeal .22s var(--sg-ease)}
.sg-rv__run .sg-drill__btns{margin-top:.4rem}
.sg-rv__run .sg-scn__again,.sg-rv__run [data-restart]{display:none}

/* ---------- without JavaScript: show every answer, hide the controls that need a script ---------- */
html:not(.sg-js) .sg-flip{cursor:default}
html:not(.sg-js) .sg-flip:active{scale:none}
html:not(.sg-js) .sg-flip__face{grid-area:auto;height:auto}
html:not(.sg-js) .sg-flip__back{min-height:0;margin-top:.4rem}
html:not(.sg-js) .sg-flip__hint,html:not(.sg-js) .sg-num__label--sm,html:not(.sg-js) .sg-sign__thumb,html:not(.sg-js) .sg-nums__hint{display:none}
html:not(.sg-js) .sg-scn__opt{cursor:default}
html:not(.sg-js) .sg-scn__opt[data-ok="1"]{border-color:#22A06B;background:#EAF7F0}
html:not(.sg-js) .sg-qq .pt-opt[data-ok="1"]{border-color:var(--pt-ok-line,#22A06B);background:var(--pt-ok-bg,#EAF7F0)}
html:not(.sg-js) .sg-qq .pt-fb{border-color:#BFE5D0;background:var(--pt-ok-bg,#EAF7F0)}
html:not(.sg-js) .sg-qq .pt-fb__head{color:#1B7A50}
html:not(.sg-js) .sg-qq__check,html:not(.sg-js) .sg-toc__prog,html:not(.sg-js) .sg-toc__tools,html:not(.sg-js) .sg-coll__bar,html:not(.sg-js) .sg-search,html:not(.sg-js) .sg-progress,html:not(.sg-js) .sg-coll__extra .mit-btn{display:none}

/* entrance motion only, never opacity: content must stay readable if the animation never runs (background tabs) */
@keyframes sgPop{0%{transform:scale(.6)}70%{transform:scale(1.08)}100%{transform:none}}
@keyframes sgIn{from{translate:0 4px}to{translate:0 0}}
@keyframes sgDeal{from{transform:translateX(16px)}to{transform:none}}
@keyframes sgLane{from{background-position:0 0}to{background-position:-172px 0}}
@keyframes sgLaneDraw{to{background-size:4.5em 3px}}

@media (max-width:1020px){
  .sg-hub__grid{display:flex;flex-direction:column;align-items:stretch}
  .sg-hub__side{order:-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.6rem;align-items:stretch}
  .sg-progress{grid-column:1/-1}
  .sg-hub:not(.is-started) .sg-progress{display:none}
  .sg-progress__go{display:none}
  .sg-layout{grid-template-columns:minmax(0,1fr);gap:1rem}
  .sg-mhead{padding-top:.5rem}
  .sg-toc{position:sticky;top:60px;z-index:6;min-width:0}
  .sg-toc__panel{position:relative;padding:.7rem .8rem;box-shadow:0 6px 18px rgba(16,42,67,.08)}
  .sg-toc__kicker,.sg-toc__title{display:none}
  .sg-toc__prog{margin:0 0 .35rem}
  .sg-toc__done{margin:0 0 .4rem}
  /* the sticky bar: previous step, "3/12 · title" (opens the contents), next step */
  .sg-toc__bar{display:flex;align-items:center;gap:.4rem}
  .sg-toc__step{flex:0 0 44px;height:44px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--sg-line);background:#fff;color:var(--wmst-blue);transition:background .15s,border-color .15s}
  .sg-toc__step:hover{border-color:var(--wmst-blue);background:var(--wmst-blue-soft)}
  .sg-toc__step[aria-disabled=true]{color:var(--sg-line-2);pointer-events:none}
  .sg-toc__step .mit-ic{width:1.15rem;height:1.15rem}
  .sg-toc__toggle{flex:1;min-width:0;display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.3rem .55rem;border:0;border-radius:10px;background:#F4F7FA;font:600 .9rem/1.3 var(--font-display,sans-serif);color:var(--sg-ink);cursor:pointer;text-align:left}
  .sg-toc__n{flex:0 0 auto;padding:.22rem .45rem;border-radius:6px;background:var(--wmst-blue);color:#fff;font:700 .74rem/1 var(--font-display,sans-serif);font-variant-numeric:tabular-nums}
  .sg-toc__n:empty{display:none}
  .sg-toc__now{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:.84rem;line-height:1.25}
  .sg-toc__toggle .mit-ic:last-child{flex:0 0 auto;transition:transform .2s}
  .sg-toc__toggle[aria-expanded=true] .mit-ic:last-child{transform:rotate(180deg)}
  /* the contents open as a dropdown over the page, so the lesson doesn't jump */
  .sg-toc__list{max-height:none}
  .sg-js .sg-toc__drop{position:absolute;left:0;right:0;top:calc(100% + 6px);max-height:min(65vh,520px);overflow:auto;margin:0;padding:.4rem .4rem .8rem;border:1px solid var(--sg-line);border-radius:12px;background:#fff;box-shadow:0 14px 32px rgba(16,42,67,.16);visibility:hidden;transform:translateY(-6px);transition:transform .16s var(--sg-ease),visibility 0s linear .16s}
  .sg-js .sg-toc.is-open .sg-toc__drop{visibility:visible;transform:none;transition-delay:0s}
  html:not(.sg-js) .sg-toc{position:static}
  html:not(.sg-js) .sg-toc__bar{display:none}
  .sg-sec,.sg-modpage .sg-row__round{scroll-margin-top:156px}  /* clear of the header and the sticky contents bar */
  .sg-rvpage .sg-row__round{scroll-margin-top:84px}
  .sg-modpage:has(.sg-toc__done) :is(.sg-sec,.sg-row__round){scroll-margin-top:184px}   /* the "Module complete" line makes the bar taller */
  .sg-coll__bar{position:static}
  .sg-drill{scroll-margin-top:76px}
}
@media (max-width:640px){
  .sg-hero__actions .mit-btn{flex:1 1 100%}
  .sg-hub__side{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .sg-tool{padding:.75rem .85rem;gap:.7rem}
  .sg-tool>span:nth-child(2) span:not([data-sg-rv-n].is-on),.sg-tool>.mit-ic{display:none}
  .sg-tool__ic{flex-basis:2.1rem;height:2.1rem}
  .sg-pn{grid-template-columns:1fr}
  .sg-sec__nav{flex-direction:column-reverse;gap:.5rem}
  .sg-sec__prev,.sg-sec__next{max-width:none}
  .sg-sec__next{margin-left:0;justify-content:space-between}
  .sg-pn__a--next{text-align:left;align-items:flex-start}
  .sg-mod a{padding:1rem 1rem 1rem .9rem;gap:.8rem}
  .sg-mod .mit-card__go{display:none}
  .sg-nums__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .sg-signs__grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .sg-sign .sg-flip__face,.sg-num .sg-flip__face{padding:.8rem}
  .sg-num__value{font-size:1.4rem}
  .sg-sec{padding:1.15rem 1rem}
  .sg-sec__head{flex-wrap:wrap;gap:.35rem}
  .sg-quiz__score{white-space:nowrap}
  .sg-scn,.sg-row{padding:.9rem .8rem}
  .sg-scn__opt{padding:.65rem .7rem;gap:.4rem .6rem}
  .sg-scn__why{padding-left:2.2rem}
  .sg-key{padding:.85rem .9rem;gap:.7rem}
  .sg-key__ic{flex-basis:1.6rem;height:1.6rem}
  .sg-call{padding:.85rem .9rem}
  .sg-reveal summary{flex-wrap:wrap;row-gap:.35rem}
  .sg-reveal__q{flex:1 1 calc(100% - 2rem)}
  .sg-reveal__cta{margin-left:1.8rem}
  .sg-reveal__a{padding-left:1rem}
  .sg-qq__check{width:100%}
  .sg-coll__bar{padding:.6rem;gap:.5rem}
  .sg-coll__bar .mit-btn{flex:1 1 0;min-width:0;padding:.75em .6em;font-size:.9rem}
  .sg-coll__known{margin-left:0;width:100%}
  .sg-rv__item{padding:.9rem .85rem}
  .sg-rv__btns{width:100%}
  .sg-rv__btns .mit-btn{flex:1 1 100%}
  /* wide diagrams keep readable labels and scroll inside their own box; the next part peeks in */
  .sg-fig--wide{text-align:left}
  .sg-fig__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:.25rem 0 .5rem}
  .sg-fig--wide img{width:min(var(--w),660px);max-width:none;max-height:none;margin:0}
  .sg-fig--wide figcaption{margin-top:.35rem}
  .sg-fig--wide figcaption::after{content:" Swipe to see the whole picture.";color:var(--sg-soft)}
  /* tables of three or more columns become one card per row */
  .sg-table--stack thead{display:none}
  .sg-table--stack table,.sg-table--stack tbody,.sg-table--stack caption{display:block}
  .sg-table--stack tr{display:block;padding:.75rem 1rem;border-bottom:1px solid #EDF1F5}
  .sg-table--stack tbody tr:last-child{border-bottom:0}
  .sg-table--stack th,.sg-table--stack td{display:block;padding:.1rem 0;border:0}
  .sg-table--stack td::before{content:attr(data-label);display:block;margin-top:.35rem;font:600 .74rem/1.3 var(--font-display,sans-serif);color:var(--sg-soft)}
}
@media (pointer:coarse){
  .sg-cite{min-height:36px;padding:.5rem .7rem}
}
@media (prefers-reduced-motion:reduce){
  .sg-flip__face{transition:none}
  .sg-js .sg-flip__back,.sg-js .sg-flip.is-flipped .sg-flip__front,.sg-js .sg-flip.is-flipped .sg-flip__back{transform:none}
  .sg-flip:active{scale:none}
  .sg-hero::before,.sg-sec__done.is-new,.sg-paged:not(.sg-review) .sg-sec.is-current,.sg-scn__fb,.sg-reveal__a,.sg-qq .pt-fb,.sg-drill__card>.sg-flip,.sg-rv__slot>*,.sg-search__results:not([hidden]),.sg-toc__done{animation:none}
  .sg-sec:target .sg-sec__title,.sg-paged:not(.sg-review) .sg-sec.is-current .sg-sec__title{animation:none;background-size:4.5em 3px}
  .sg-mod a,.sg-tool,.sg-pn__a,.sg-sec__next,.sg-sec__next .mit-ic,.sg-app .mit-bar>i,.sg-road>i,.sg-toc__dot,.sg-toc__dot .mit-ic,.sg-mod__num,.sg-mod__num .mit-ic,.sg-scn__opt,.sg-toc__toggle .mit-ic:last-child,.sg-reveal__cta .mit-ic,.sg-flip,.sg-row__car{transition:none}
  .sg-mod a:hover,.sg-tool:hover,.sg-pn__a:hover,.sg-sec__next:hover,.sg-sec__next:hover .mit-ic,.sg-scn__opt:active:not([aria-disabled=true]){transform:none}
  .sg-js .sg-toc__drop{transition:none;transform:none}
}
/* print: a study sheet with every answer showing (the script opens the "Show answer" boxes just before printing) */
@media print{
  .sg-toc,.sg-sec__nav,.sg-search,.sg-hub__side,.sg-pn,.sg-coll__bar,.sg-coll__extra .mit-btn,.sg-drill,.sg-hero__actions,.sg-row__car,.sg-row__how,.sg-row__next,
  .sg-reveal__cta,.sg-flip__hint,.sg-nums__hint,.sg-sign__thumb,.sg-qq__check,.sg-quiz__btns,.sg-scn__again,.sg-toc__done{display:none!important}
  .sg-hero::before{display:none}
  .sg-layout{grid-template-columns:1fr}
  .sg-js .sg-paged .sg-sec{display:block!important;animation:none}
  .sg-flip{perspective:none}
  .sg-flip__face{position:static;grid-area:auto;height:auto;min-height:0;transform:none!important;visibility:visible!important;backface-visibility:visible;color:var(--sg-ink);background:#fff;border:1px solid #ccc;margin-bottom:.3rem}
  .sg-scn__why,.sg-scn__best,.sg-scn__law{display:block!important}
  .sg-scn__opt[data-ok="1"],.sg-qq .pt-opt[data-ok="1"]{border-color:#22A06B;background:#EAF7F0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sg-qq [data-sg-qfb]{display:block!important}
  .sg-row__round,.sg-row__round.is-done .sg-row__ans{display:block!important}
  .sg-row__round+.sg-row__round{margin-top:1rem;padding-top:1rem;border-top:1px solid #E2E8EE}
  .sg-flip,.sg-scn,.sg-qq,.sg-key,.sg-call,.sg-fig,.sg-reveal,.sg-row__round,.pt-law,.sg-compare__col{break-inside:avoid}
  .sg-sec__title,.sg-list__title{break-after:avoid}
}

/* Phones: road signs as a one-column list. The sign sits beside its hint, and a tap opens the meaning right
   under it (no flip), so each card is only as tall as its own text and never stretches a neighbour. */
@media (max-width:640px){
  .sg-signs__grid{grid-template-columns:1fr;gap:.6rem}
  .sg-signs__grid .sg-sign{perspective:none;min-height:0}
  .sg-js .sg-signs__grid .sg-sign .sg-flip__face{grid-area:auto;height:auto;min-height:0;transform:none;transition:none;visibility:visible}
  .sg-signs__grid .sg-sign .sg-flip__front{flex-direction:row;align-items:center;justify-content:flex-start;gap:1rem;text-align:left;padding:.7rem .9rem}
  .sg-signs__grid .sg-sign .sg-flip__front img{height:72px;max-width:96px;flex:0 0 auto;margin:0}
  .sg-signs__grid .sg-sign .sg-flip__front .sg-sign__noart{margin:0}
  .sg-signs__grid .sg-sign .sg-flip__hint{margin:0 0 0 auto}
  .sg-js .sg-signs__grid .sg-sign .sg-flip__back{display:none}
  .sg-js .sg-signs__grid .sg-sign.is-flipped .sg-flip__front{border-radius:12px 12px 0 0;border-color:#9CC4E6;border-bottom-color:transparent;background:#F3F8FC;box-shadow:none}
  .sg-js .sg-signs__grid .sg-sign.is-flipped .sg-flip__back{display:flex;border-radius:0 0 12px 12px;border-top:0;padding:.2rem .9rem .9rem;box-shadow:none;animation:ptIn .2s var(--sg-ease)}
  .sg-js .sg-signs__grid .sg-sign.is-flipped .sg-flip__front .sg-flip__hint{visibility:hidden}
  .sg-signs__grid .sg-sign .sg-sign__thumb{display:none}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .sg-js .sg-signs__grid .sg-sign.is-flipped .sg-flip__back{animation:none}
}