/* Illusions trainer (js/illusions.js): the letter rail, the instrument and cockpit views, and the side view. */
.il-page [hidden] { display: none !important; }
.il-rail { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.il-let { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink-2); font: 600 .9rem var(--ui); cursor: pointer; }
.il-let b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--canvas); color: var(--ink); font: 800 1rem var(--display); }
.il-let[aria-pressed="true"] { border-color: var(--orange); color: var(--ink); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .18); }
.il-let[aria-pressed="true"] b { background: var(--sunrise); color: #fff; }
/* the animations on the left, the description and the steps on the right: everything in view at once */
.il-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.il-side { display: grid; gap: 12px; min-width: 0; }
.il-detail { padding: 16px 18px; }
.il-stepcard h3, .il-note h3 { margin: 0 0 8px; font-size: 1rem; }
.il-g { color: #2f9e6e; }
.il-r { color: var(--bad); }
.il-badge { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 10px; border-radius: 50%; background: var(--sunrise); color: #fff; font: 800 1.15rem var(--display); }
.il-dl { display: grid; gap: 2px; margin: 8px 0 0; font-size: .93rem; }
.il-dl dt { margin-top: 6px; font: 700 .78rem var(--ui); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.il-dl dd { margin: 0; line-height: 1.4; }
.il-stage { display: grid; gap: 10px; }
.il-var { gap: 10px; align-items: center; }
.il-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.il-fig { position: relative; margin: 0; min-width: 0; text-align: center; }
.il-fig figcaption { margin-bottom: 6px; font: 700 .85rem var(--ui); color: var(--ink-2); }
/* green is what is really happening (the instruments, the familiar picture); red is what you feel or see (the illusion) */
.il-truth { --glow: #2f9e6e; }
.il-feel { --glow: var(--bad); }
.il-fig figcaption { color: var(--glow); text-shadow: 0 0 10px color-mix(in srgb, var(--glow) 55%, transparent); }
.il-fig .il-ai { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--glow) 65%, transparent)); }
.il-fig .il-cv { box-shadow: 0 0 0 2px var(--glow), 0 0 18px color-mix(in srgb, var(--glow) 60%, transparent); }
.il-ai { display: block; width: 100%; max-width: 290px; margin: 0 auto; }
.il-ai .sky { fill: #4f97dd; }
.il-ai .gnd { fill: #8b5a2b; }
.il-ai .hz { stroke: #fff; stroke-width: 2; }
.il-ai .lad line { stroke: rgba(255, 255, 255, .8); stroke-width: 1.5; }
.il-ai .lad text { fill: rgba(255, 255, 255, .85); font: 700 8px var(--ui); }
.il-ai .ring { fill: none; stroke: var(--glow, #2b2f3e); stroke-width: 9; }
.il-ai .ptr { fill: var(--amber); }
.il-ai .acft { fill: none; stroke: var(--amber); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.il-ai .acft.dot { fill: var(--amber); stroke: none; }
.il-read { min-height: 1.4em; margin-top: 6px; }
.il-obey { margin: 6px auto 0; padding: 3px 10px; width: max-content; max-width: 100%; border-radius: 99px; background: rgba(229, 72, 77, .14); color: #c0262b; font: 700 .8rem var(--ui); }
.il-ctl { display: flex; align-items: center; gap: 10px; }
.il-ctl input[type="range"] { flex: 1; min-width: 0; accent-color: var(--orange); }
.il-cap { margin: 0; padding: 10px 14px; border-radius: var(--r-s); background: var(--canvas); font-weight: 600; min-height: 3.2em; }
.il-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.il-steps li { padding: 6px 10px; border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; color: var(--ink-2); font-size: .88rem; line-height: 1.35; }
.il-steps li.on { border-left-color: var(--orange); background: var(--canvas); color: var(--ink); font-weight: 600; }
.il-cv { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--r-s); background: #000; }
.il-side-fig figcaption { color: var(--ink-2); text-shadow: none; }
.il-sidebox { overflow: hidden; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); }
.il-sv { display: block; width: 100%; height: auto; }
.il-sv .g { fill: #6b8a55; }
.il-sv .rw { fill: #3d4148; }
.il-sv .norm { stroke: #2f9e6e; stroke-width: 2.5; stroke-dasharray: 6 5; }
.il-sv .ghost { fill: none; stroke: rgba(229, 72, 77, .22); stroke-width: 2; }
.il-sv .flown { fill: none; stroke: var(--bad); stroke-width: 3.5; stroke-linejoin: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--bad) 60%, transparent)); }
.il-sv .fl { fill: var(--bad); }
.il-sv .nm { fill: #2f9e6e; }
.il-sv .t { font: 600 11px var(--ui); fill: var(--ink-2); }
.il-sv .t.mk { font-size: 9.5px; fill: #2f9e6e; font-weight: 700; }
.il-sv .t.out { font-weight: 800; }
.il-sv .t.out.bad { fill: var(--bad); }
.il-sv .t.out.ok { fill: #2f9e6e; }
.il-sv .lg { font-weight: 800; }
.il-sv .lg.n { fill: #2f9e6e; }
.il-sv .lg.f { fill: var(--bad); }
/* a tall enough screen keeps the animations in view while the description and steps scroll past */
@media (min-width: 1000px) and (min-height: 760px) { .il-stage { position: sticky; top: calc(var(--bar) + 8px); } }
@media (max-width: 900px) {
  .il-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .il-pair { grid-template-columns: minmax(0, 1fr); }
}

/* A guided comparison: aircraft state, misleading perception, then potential response. */
.il-let { padding:7px 10px; border-radius:9px; font-size:.8rem; }
.il-let[aria-pressed="true"] { border-color:var(--link); background:var(--nav-soft); box-shadow:none; }
.il-let[aria-pressed="true"] b { background:var(--link); }
.il-lesson-hint { margin:4px 0 18px; padding:12px 16px; border-left:3px solid var(--link); border-radius:0 10px 10px 0; background:var(--nav-soft); font-size:.86rem; line-height:1.65; }
.il-fig figcaption { font:600 .82rem/1.5 var(--ui); text-shadow:none; margin-bottom:12px; }
.il-fig .il-ai { filter:none; }
.il-fig .il-cv { box-shadow:none; border:1px solid var(--line); }
.il-perception-note { margin:10px 0 0; font-size:.72rem; color:var(--ink-2); line-height:1.5; }
.il-badge { background:var(--nav-soft); color:var(--link); }
.il-detail h2 { font-size:1.25rem; }
.il-dl { gap:5px; }
.il-dl dt { margin-top:9px; font-size:.69rem; }
.il-dl dd { font-size:.88rem; line-height:1.7; }
.il-stage { gap:16px; }
.il-cap { font-size:.87rem; font-weight:500; line-height:1.7; }
.il-steps li { padding:0; }
.il-steps button { display:flex; gap:10px; padding:10px; width:100%; border:0; background:none; color:inherit; text-align:left; cursor:pointer; font:inherit; line-height:1.6; }
.il-steps li.on { background:var(--nav-soft); border-left-color:var(--link); }
.il-ctl { flex-wrap:wrap; }
.il-ctl input[type=range] { min-width:120px; }
.il-var .lt-seg { display:flex; flex-wrap:wrap; gap:5px; }
.il-var button { padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink-2); font:500 .78rem var(--ui); cursor:pointer; }
.il-var button[aria-pressed=true] { background:var(--nav-soft); border-color:var(--link); color:var(--link); }

.il-reading-cue { margin:0; font-size:.82rem; line-height:1.65; color:var(--ink-2); }

.il-page .il-var .lt-seg { padding:4px; border-radius:10px; }
.il-page .il-var .lt-seg button { box-shadow:none; background:transparent; color:var(--ink-2); border:1px solid transparent; border-radius:7px; height:auto; min-height:36px; }
.il-page .il-var .lt-seg button[aria-pressed="true"] { background:var(--nav-soft); color:var(--link); border-color:var(--link); box-shadow:none; }
.il-page .il-var .lt-seg button:focus-visible { outline:2px solid var(--link); outline-offset:2px; }