/* /en/tcf-or-tef-canada/ (which-test-en). Colours only from site.css tokens.
   Layout: first screen = the official formats (7 cols) beside the 5-question check (5 cols); then one section per
   People-also-ask question, each with its own view (word rules, IRCC table card on a photo, certificate columns, timeline).

   Motion state list (Markup, expressive but exact):
   1. At rest the page is finished: table complete, question 1 of the check showing, every view drawn.
   2. Pick an answer: the option steps to the jade tint (160 ms, ease-out-3); the matching table row tints (160 ms);
      the reason line fades up 6 px (300 ms, ease-out-4).
   3. Next or skip: the next question fades up 8 px (240 ms, ease-out-4). Back shows the earlier one the same way.
   4. Result: fades up (300 ms); focus moves to it; the result text is read by screen readers (aria-live on the step).
   5. Buttons press at scale(.97) (site.css); options press at scale(.99); hover only where hover exists.
   Reduced motion: no rise, the colour steps stay (site.css keeps transitions at 120 ms). */

/* ---------------------------------------------------------------- header + first screen */
.wt-gh h1{max-width:900px}
.wt-gh .intro{max-width:900px}
.wt-jump{display:none;margin-top:20px}
@media (max-width:1080px){.wt-jump{display:block}}
.wt-quiz [hidden],.wt-res[hidden],.wt-why[hidden]{display:none!important}
.wt-bench{padding-top:36px}
.wt-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:start}
@media (max-width:1080px){.wt-grid{grid-template-columns:minmax(0,1fr)}}

/* the comparison: a real table, read row by row */
.wt-cmp table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.wt-cmp th,.wt-cmp td{text-align:left;white-space:normal;padding:10px 16px;border-bottom:1px solid var(--line);vertical-align:top;
 transition:background-color 160ms var(--ease-out-3)}
.wt-cmp thead th{font-size:17px;font-weight:600;color:var(--ink);padding-top:14px;padding-bottom:12px;width:39%}
.wt-cmp thead td{width:22%}
.wt-by{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:2px}
.wt-cmp tbody th{font-weight:500;color:var(--muted);font-size:14px}
.wt-cmp tbody tr:last-child th,.wt-cmp tbody tr:last-child td{border-bottom:0}
.wt-sub{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.wt-sub .q{vertical-align:-3px}
.wt-cmp .mk.err s{font-weight:500}
.wt-cmp .fixed{margin-left:0;padding:1px 5px}
.wt-cmp tr.is-on th,.wt-cmp tr.is-on td{background:var(--fix-tint)}
.wt-cmp tr.is-on th{color:var(--ink)}

/* phones: the label on its own line, the two tests side by side under it */
@media (max-width:600px){
 .wt-cmp table,.wt-cmp tbody{display:block}
 .wt-cmp thead{display:block}
 .wt-cmp thead tr,.wt-cmp tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .wt-cmp thead td{display:none}
 .wt-cmp thead th{width:auto;font-size:16px;padding:12px 14px 10px}
 .wt-cmp tbody th{grid-column:1/-1;border-bottom:0;padding:10px 14px 0;font-size:13px}
 .wt-cmp tbody td{padding:2px 14px 10px;font-size:14px}
 .wt-cmp tbody tr{border-bottom:1px solid var(--line)}
 .wt-cmp tbody tr:last-child{border-bottom:0}
 .wt-cmp tbody td{border-bottom:0}
 .wt-sub{font-size:13px}
}

/* the 5-question check */
.wt-quiz .tool-b{overflow:visible}
.wt-q{border:0;margin:0;padding:0;min-width:0}
.wt-q+.wt-q{margin-top:28px}
.wt-q legend{font-size:20px;line-height:1.35;font-weight:600;padding:0;margin-bottom:16px;letter-spacing:-.01em}
.wt-opts{display:flex;flex-direction:column;gap:10px}
.wt-opt{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:var(--r-input);
 background:var(--surface);cursor:pointer;font-size:16px;line-height:1.45;
 transition:background-color 160ms var(--ease-out-3),border-color 160ms var(--ease-out-3),transform 160ms var(--ease-out-3)}
.wt-opt:active{transform:scale(.99)}
.wt-opt input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--primary)}
.wt-opt:has(input:checked){background:var(--fix-tint);border-color:var(--fix);font-weight:500}
.wt-opt:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
@media (hover:hover){.wt-opt:hover{background:var(--hover)}.wt-opt:has(input:checked):hover{background:var(--fix-tint)}}
.wt-why{margin-top:12px;font-size:15px;line-height:1.55;color:var(--muted)}
.wt-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wt-nav #check-go{margin-left:auto}
.wt-nav #check-again{margin-left:auto}
/* with the script: one question at a time. All 5 questions and the result share one grid cell, so the card keeps
   the height of the tallest one and the buttons stay put; the reason line keeps its space until an answer is picked. */
.wt-quiz.js .tool-b{display:grid}
.wt-quiz.js .wt-q,.wt-quiz.js .wt-res{grid-area:1/1;min-width:0}
.wt-quiz.js .wt-q+.wt-q{margin-top:0}
.wt-quiz.js .wt-q:not(.is-on),.wt-quiz.js .wt-res:not(.is-on),.wt-quiz.js .wt-why:not(.is-shown){visibility:hidden}
.wt-res{outline:none}
.wt-res-v{font-size:26px;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.wt-res-n{font-size:15px;color:var(--muted);margin-top:8px;font-variant-numeric:tabular-nums}
.wt-res-p{font-size:16px;line-height:1.55;margin-top:14px}
.wt-res-a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:10px}
@media (prefers-reduced-motion:no-preference){
 .wt-quiz.js .wt-q.is-on{animation:wtIn 240ms var(--ease-out-4) both}
 .wt-why.is-in{animation:wtWhy 300ms var(--ease-out-4) both}
 .wt-res.is-in{animation:wtIn 300ms var(--ease-out-4) both}
 @keyframes wtIn{from{opacity:0;transform:translateY(8px)}}
 @keyframes wtWhy{from{opacity:0;transform:translateY(6px)}}
}

/* ---------------------------------------------------------------- word rules: closed boxes (TCF) and open bars (TEF) */
.wt-words{margin:0}
.wt-wl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.wt-wl li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center}
.wt-wn{font-size:14px;font-weight:500;line-height:1.3}
.wt-tef .wt-wn{color:var(--ink)}
.wt-tr{position:relative;display:block;height:30px;border-radius:6px;background:var(--band);
 background-image:repeating-linear-gradient(to right,transparent 0 calc(20% - 1px),var(--line) calc(20% - 1px) 20%)}
.wt-z{position:absolute;top:0;bottom:0;display:flex;align-items:center}
.wt-wl li:not(.wt-tef) .wt-z{background:var(--fix-tint);border:2px solid var(--fix);border-radius:4px}
.wt-z1{left:24%;width:24%}.wt-z2{left:48%;width:12%}.wt-z3{left:48%;width:24%}
.wt-wl li:not(.wt-tef) .wt-zl{position:absolute;left:calc(100% + 8px);white-space:nowrap}
.wt-tef .wt-z{right:0;background:linear-gradient(to right,var(--fix-tint) 0,var(--fix-tint) 55%,transparent 100%);border-radius:4px 0 0 4px}
.wt-tef .wt-z::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:2px;background:var(--fix)}
.wt-za{left:32%}.wt-zb{left:80%}
.wt-tef .wt-zl{padding-left:12px;white-space:nowrap}
.wt-zl{font-size:13px;font-weight:600;color:var(--fix);font-variant-numeric:tabular-nums}
.wt-zb .wt-zl{position:absolute;right:calc(100% + 8px);padding:0}
.wt-axis{display:flex;justify-content:space-between;margin:10px 0 0 124px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.wt-axis span{width:0;display:flex;justify-content:center;white-space:nowrap}
.wt-words .tool-f{line-height:1.5}
@media (max-width:600px){.wt-wl li{grid-template-columns:88px minmax(0,1fr);gap:8px}.wt-wn{font-size:13px}.wt-axis{margin-left:96px}}

/* one column: the heading and answer first, the view after it */
@media (max-width:960px){.wt-harder>:first-child,.wt-easy>:first-child{order:2}}

.wt-txt{display:flex;flex-direction:column;gap:14px;max-width:60ch}
.wt-txt p{font-size:17px;line-height:1.65}
.wt-txt b{font-weight:600}
.wt-txt .tl{align-self:flex-start}
.wt-txt-wide{margin-top:32px;max-width:72ch}

/* ---------------------------------------------------------------- photo frame with IRCC's table on the wall */
.wt-frame{position:relative}
.wt-pic{position:relative;aspect-ratio:3/2;max-width:100%;border-radius:var(--r-frame);border:1px solid var(--line);overflow:hidden;overflow:clip;
 background:var(--field);background-image:repeating-linear-gradient(to bottom,transparent 0 39px,var(--rule) 39px 40px)}
.wt-pic .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wt-card{position:absolute;left:38.5%;top:5%;width:34%;min-width:236px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
 box-shadow:var(--shadow);padding:12px 12px 10px}
/* until the photo slot lands: no empty field, the card stands alone in a 5-column track beside the answer */
@media (min-width:961px){.wt-easy:has(.no-photo){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.wt-frame:has(.no-photo) .wt-pic{display:none}
.wt-frame:has(.no-photo) .wt-card{position:relative;left:auto;top:auto;width:100%;min-width:0;padding:18px 18px 14px;box-shadow:var(--shadow-soft)}
.wt-frame:has(.no-photo) .wt-card-h{font-size:15px}
.wt-frame:has(.no-photo) .wt-mt table{font-size:15px}
.wt-frame:has(.no-photo) .wt-mt th,.wt-frame:has(.no-photo) .wt-mt td{padding:7px 6px}
.wt-card-h{font-size:13px;font-weight:600;line-height:1.35;margin:0 2px 8px}
.wt-mini{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.wt-mt{margin:0;min-width:0}
.wt-mt figcaption{font-size:12px;font-weight:600;color:var(--muted);margin:0 2px 4px}
.wt-mt table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.wt-mt th,.wt-mt td{padding:4px 4px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.wt-mt thead th{font-size:12px;font-weight:500;color:var(--muted)}
.wt-mt th:nth-child(n+2):nth-child(-n+4),.wt-mt td:nth-child(n+2):nth-child(-n+4){display:none}
.wt-mt th:last-child,.wt-mt td:last-child{text-align:right}
.wt-mt tbody tr:last-child td{border-bottom:0}
.wt-mt tr.hl td{background:var(--fix-tint);font-weight:600}
.wt-mt .scroll{overflow-x:auto}
@media (max-width:600px){
 .wt-pic{aspect-ratio:4/3}
 .wt-pic .photo{object-position:25% 50%}
 .wt-card{position:relative;left:auto;top:auto;width:auto;min-width:0;margin:-48px 12px 0}
 .wt-frame:has(.no-photo) .wt-card{margin:0;width:auto;min-width:0}
}

/* ---------------------------------------------------------------- the two score columns of a TEF certificate */
.wt-cert{margin:0}
.wt-cols{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.wt-col{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.wt-col-h{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;line-height:1.4}
.wt-col-h .badge{margin:0;flex:none}
.wt-no s{color:var(--error);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--error)}
.wt-yes .fixed{margin-left:0}
.wt-b-fix{background:var(--fix)}
.wt-col-r{margin-top:8px;font-size:15px;line-height:1.55;color:var(--muted)}

/* ---------------------------------------------------------------- 3 months: one baseline, stems of two heights */
.wt-line{margin:0}
.wt-line figcaption{font-size:15px;font-weight:600;margin-bottom:12px}
.wt-tl{list-style:none;margin:0;padding:0;position:relative;height:224px}
.wt-tl::before{content:"";position:absolute;left:0;right:0;bottom:24px;height:2px;background:var(--line-strong)}
.wt-e{position:absolute;bottom:25px;display:flex;flex-direction:column;justify-content:flex-start;width:min(200px,calc(100% / 6 - 12px));padding-left:12px}
.wt-e::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line-strong)}
.wt-e::after{content:"";position:absolute;left:-5px;bottom:-6px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--primary)}
.wt-e0{left:0;height:72px;width:220px}
.wt-e1{left:58.33%;height:174px}
.wt-e2{left:75%;height:72px}
.wt-e3{left:83.33%;height:174px}
.wt-e4{left:100%;height:72px}
.wt-e1::after,.wt-e3::after{background:var(--primary)}
.wt-e2,.wt-e4{padding-left:0;padding-right:12px;text-align:right;transform:translateX(-100%)}
.wt-e2::before,.wt-e4::before{left:auto;right:0}
.wt-e2::after,.wt-e4::after{left:auto;right:-5px}
.wt-d{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--primary);line-height:1.3}
.wt-t{font-size:15px;line-height:1.4;color:var(--ink)}
@media (max-width:900px){
 .wt-tl{height:auto;display:flex;flex-direction:column;gap:18px;padding-left:28px}
 .wt-tl::before{left:7px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
 .wt-e,.wt-e2,.wt-e4{position:relative;left:auto;bottom:auto;height:auto;width:auto;padding:0;text-align:left;transform:none}
 .wt-e::before{display:none}
 .wt-e::after,.wt-e2::after,.wt-e4::after{left:-27px;right:auto;top:5px;bottom:auto}
}

.wt-qc .sec-h{margin-bottom:4px}