/* Aino's story (finstory.js, /brief/FIN/story/): what this page adds to story.css. Every rule sits under .explainer.x-fin.
   The hero with the cut-out and the score badge, step headings as h2 (the page's h1 is the hero), the "What can Aino see?"
   cards, the travel rows and the dated EU law list. Answers show without script; story.css's .x-js rules hide them until asked. */
.explainer.x-fin{border-top:0}
.explainer.x-fin .x-hero-top{display:grid;grid-template-columns:1fr 160px;gap:24px;align-items:center;max-width:1120px;padding-top:40px}
.explainer.x-fin .x-hero-top h1{font:700 44px/1.08 Inter,system-ui,sans-serif;letter-spacing:-.015em;margin:10px 0 12px;text-wrap:balance;max-width:20ch}
.explainer.x-fin .x-hero-top .x-dek{max-width:36em}
.explainer.x-fin .x-cast{margin:0;text-align:center}
.explainer.x-fin .x-cast img{width:92px;height:auto;display:block;margin:0 auto}
.explainer.x-fin .x-castcap{font:14px/1.35 Inter,system-ui,sans-serif;text-align:left;max-width:160px;margin:8px auto 0}
.explainer.x-fin .x-castcap .nm{display:block;font:700 16px Inter,system-ui,sans-serif}
.explainer.x-fin .x-castcap .pl{display:block;color:var(--x-g7)}
.explainer.x-fin .badge{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:4px 0 6px}
.explainer.x-fin .sb-wrap{position:relative;display:block;width:96px;height:8px;flex:0 0 96px}
.explainer.x-fin .sb-bar{position:absolute;inset:0;background:#E8ECEC;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px #9CA3AF}
.explainer.x-fin .sb-fill{position:absolute;left:0;top:0;bottom:0}
.explainer.x-fin .sb-tick{position:absolute;top:-3px;width:2px;height:14px;background:var(--x-ink)}
.explainer.x-fin .sb-sc{flex-basis:100%;font-size:14px;color:var(--x-g7);font-variant-numeric:tabular-nums;white-space:nowrap}.explainer.x-fin .sb-sc b{font-size:16px;color:var(--x-ink)}
.explainer.x-fin .x-big+.x-turn{margin-top:18px}
.explainer.x-fin .x-txt h2{font:700 30px/1.15 Inter,system-ui,sans-serif;margin:6px 0 14px;text-wrap:balance}
/* What can Aino see? Status up front (a filled or hollow square and a word); tap for the reason */
.explainer.x-fin .x-seecards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.explainer.x-fin .x-seecard{text-align:left;border:1px solid #9CA3AF;background:#fff;border-radius:12px;padding:14px;min-height:88px;font:600 16px/1.35 Inter,system-ui,sans-serif;color:var(--x-ink);cursor:pointer}
.explainer.x-fin .x-seecard>span{display:block}
.explainer.x-fin .x-tag{font:600 14px Inter,system-ui,sans-serif;margin-top:6px}
.explainer.x-fin .x-sa{font:400 14px/1.45 Inter,system-ui,sans-serif;color:var(--x-g7);margin-top:8px}
.explainer.x-fin.x-js .x-seecard:not(.x-open) .x-sa{display:none}
.explainer.x-fin .x-seecard.x-open{border-color:var(--x-ink)}
.explainer.x-fin .x-seecard:focus-visible{outline:3px solid var(--x-acc);outline-offset:2px}
.explainer.x-fin .x-mk2{display:inline-block;width:12px;height:12px;vertical-align:-1px;box-sizing:border-box}
.explainer.x-fin .x-mk2.x-yes{background:var(--x-ink)}.explainer.x-fin .x-mk2.x-no{border:2px solid var(--x-ink);background:#fff}
/* Aino goes to Spain: two counted rows, then the dated list (spaced in order, not to scale) */
.explainer.x-fin .x-trow{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start;font:15px/1.5 Inter,system-ui,sans-serif;border-top:1px solid #E7E1D6;padding:12px 0}
.explainer.x-fin .x-tn{font:700 40px/1 Inter,system-ui,sans-serif}
.explainer.x-fin .x-trow .x-q{color:var(--x-g7);font-size:14px}
.explainer.x-fin .x-tlh{font:600 16px Inter,system-ui,sans-serif;margin:22px 0 6px}
.explainer.x-fin .x-tl{list-style:none;padding:0;margin:0}
.explainer.x-fin .x-tl li{position:relative;padding:0 0 14px 22px;font:15px/1.45 Inter,system-ui,sans-serif}
.explainer.x-fin .x-tl li::before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--x-ink)}
.explainer.x-fin .x-tl li:first-child::before{background:var(--x-ink)}
.explainer.x-fin .x-tl b{display:block}.explainer.x-fin .x-tl span{color:var(--x-g7)}
.explainer.x-fin .x-quiz .x-gq{display:block;font:600 16px Inter,system-ui,sans-serif;margin:0 0 4px}
@media (max-width:820px){
 .explainer.x-fin .x-hero-top{grid-template-columns:1fr;gap:8px;padding-top:24px}
 .explainer.x-fin .x-hero-top h1{font-size:32px;max-width:none}
 .explainer.x-fin .x-cast{display:flex;align-items:center;gap:14px;margin-top:8px}
 .explainer.x-fin .x-cast img{width:40px;margin:0}
 .explainer.x-fin .x-castcap{max-width:none;margin:0}
 .explainer.x-fin .x-txt h2{font-size:26px}
 .explainer.x-fin .x-seecards{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){.explainer.x-fin .x-seecards{grid-template-columns:1fr}}
@media print{
 .explainer.x-fin .x-hero-top{grid-template-columns:1fr 90px;padding-top:0}
 .explainer.x-fin .x-hero-top h1{font-size:24pt}
 .explainer.x-fin .x-cast img{width:60px}
 .explainer.x-fin .x-txt h2{font-size:17pt}
 .explainer.x-fin .x-seecard .x-sa{display:block!important}
 .explainer.x-fin .x-seecard{break-inside:avoid;min-height:0}
 .explainer.x-fin .x-quiz .x-gq{display:block!important}
}
/* review fixes (ux-design, tufte, 3 Oct): control edges at 3:1 or better, a 48px picker in WebKit, quiz spacing and the right answer
   marked after a wrong one, the next action on step 8 at reading size, print hero wide enough for the badge */
.explainer.x-fin .x-seecard,.explainer.x-fin .x-opt,.explainer.x-fin .x-lookup select{border-color:var(--x-g5)}
.explainer.x-fin .x-tick.x-you{background:var(--x-g5)}
.explainer.x-fin .x-lookup select{-webkit-appearance:none;appearance:none;padding-right:36px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center}
.explainer.x-fin .x-quiz fieldset{border-top:0;padding:0 0 8px;margin-top:22px}
.explainer.x-fin .x-quiz .x-gq{margin-bottom:6px}
.explainer.x-fin .x-qq.x-done .x-opt.x-answer:not(.x-picked){box-shadow:inset 0 0 0 2px var(--x-ink)}
.explainer.x-fin .x-qq.x-done .x-opt.x-answer:not(.x-picked)::after{content:" (the answer)"}
.explainer.x-fin .x-lookup .x-brief{font:600 16px Inter,system-ui,sans-serif}
.explainer.x-fin .x-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:820px){.explainer.x-fin .x-trow{grid-template-columns:40px 1fr}}
@media print{.explainer.x-fin .x-hero-top{grid-template-columns:1fr 160px}}