/* Al Safwan Academy simulators: the frame every simulator sits in (Watch it, Try it), the same in every course.
   Greys and hairlines, one orange (#E94E1B) for the thing that matters, tabular numbers. Responsive by container:
   a 16:9 stage with the readouts over it; a 4:5 stage on phones; fullscreen adds the machine's panels at the side. */
.sim {
  --sim-or: #e94e1b;
  --sim-ink: var(--ink, #1d1d1b);
  --sim-ink-2: var(--ink-2, #55554f);
  --sim-mute: var(--ink-3, #8a8a84);
  --sim-line: var(--line, #e2e2de);
  --sim-bg: #ecebe8;
  --sim-panel: rgba(250, 250, 248, 0.92);
  --sim-ok: #2f8f5f;
  container-type: inline-size;
  display: grid;
  /* one column that may shrink: a nowrap row of buttons must scroll, not widen the frame */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 12px;
  margin-block: 40px;
  font-variant-numeric: tabular-nums;
  color: var(--sim-ink);
}
.sim__head { display: grid; gap: 4px; }
.sim__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sim-ink-2); }
.sim__kicker::before { content: ""; width: 3px; height: 13px; background: var(--sim-or); }
.sim__title { margin: 0; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
.sim__lede { margin: 0; color: var(--sim-ink-2); font-size: 15px; line-height: 1.5; max-width: 62ch; }
.sim__lede:empty { display: none; }
.sim__body { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.sim__bar, .sim__transport, .sim__opts { min-width: 0; }
.sim__stage { position: relative; aspect-ratio: 16 / 9; background: var(--sim-bg); border-radius: 6px; overflow: hidden; isolation: isolate; user-select: none; -webkit-user-select: none; }
@container (max-width: 560px) { .sim__stage { aspect-ratio: 4 / 5; } }
.sim__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.sim__stage.is-armed .sim__gl { touch-action: none; }
.sim__gl.is-drag { cursor: grabbing; }
.sim__leaders, .sim__labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sim__leaders polyline { fill: none; stroke: var(--sim-or); stroke-width: 1; }
.sim__leaders circle { fill: var(--sim-or); }
.sim__label { position: absolute; font-size: 11.5px; line-height: 1.25; text-shadow: 0 0 2px rgba(250, 250, 248, 0.95), 0 0 5px rgba(250, 250, 248, 0.9), 0 0 9px rgba(250, 250, 248, 0.7); }
.sim__label b { display: flex; align-items: center; gap: 6px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 10.5px; }
.sim__label b::before { content: ""; width: 6px; height: 6px; background: var(--sim-or); flex: none; }
.sim__label span { display: block; color: var(--sim-ink-2); margin-top: 2px; padding-left: 12px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim__label b { white-space: nowrap; }
.sim__label.is-r { text-align: right; }
.sim__label.is-r b { justify-content: flex-end; }
.sim__label.is-r span { padding-left: 0; }

/* the live state chip, top left; the readouts, top right */
.sim__chip { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 9px; background: var(--sim-panel); border: 1px solid var(--sim-line); border-radius: 6px; backdrop-filter: blur(6px); max-width: calc(100% - 24px); }
.sim__chip i { width: 8px; height: 26px; border-radius: 2px; background: var(--sim-ink); flex: none; }
.sim__chip[data-tone="move"] i { background: var(--sim-or); }
.sim__chip[data-tone="warn"] i { background: var(--sim-or); animation: sim-blink 1s steps(2) infinite; }
.sim__chip b { display: block; font-size: 14px; font-weight: 500; line-height: 1.2; }
.sim__chip span { display: block; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sim-mute); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes sim-blink { 50% { opacity: 0.25; } }
.sim__reads { position: absolute; right: 12px; top: 12px; margin: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 1px; background: var(--sim-line); border: 1px solid var(--sim-line); border-radius: 6px; overflow: hidden; }
.sim__reads div { background: var(--sim-panel); padding: 6px 10px; min-width: 86px; }
.sim__reads dt { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sim-mute); }
.sim__reads dd { margin: 1px 0 0; font-size: 14px; font-weight: 500; }
@container (max-width: 560px) {
  .sim__reads { top: auto; bottom: 12px; right: 12px; left: 12px; grid-template-columns: repeat(4, 1fr); }
  .sim__reads div { min-width: 0; padding: 5px 7px; }
  .sim__reads dd { font-size: 12.5px; }
  .sim__chip b { font-size: 13px; }
}

/* the tour's caption (watch), the task's prompt (try) */
.sim__caption { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 6px); margin: 0; max-width: min(78%, 620px); padding: 9px 14px; background: rgba(29, 29, 27, 0.86); color: #fff; font-size: 14.5px; line-height: 1.4; border-radius: 6px; text-align: center; opacity: 0; transition: opacity 0.35s, transform 0.35s; pointer-events: none; }
.sim__caption.is-on { opacity: 1; transform: translate(-50%, 0); }
@container (max-width: 560px) { .sim__caption { bottom: auto; top: 64px; max-width: calc(100% - 24px); font-size: 13.5px; } }
.sim__prompt { position: absolute; left: 12px; right: 12px; bottom: 12px; margin-inline: auto; max-width: 560px; padding: 11px 14px; background: var(--sim-panel); border: 1px solid var(--sim-line); border-left: 3px solid var(--sim-or); border-radius: 6px; font-size: 14px; line-height: 1.45; backdrop-filter: blur(6px); }
.sim--watch .sim__prompt { display: none; }
.sim__prompt b { display: block; font-weight: 500; }
.sim__prompt.is-ok { border-left-color: var(--sim-ok); }
.sim__prompt.is-done { border-left-color: var(--sim-ok); }
.sim__prompt.is-no { border-left-color: var(--sim-or); animation: sim-nudge 0.32s; }
@keyframes sim-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.sim__why, .sim__hint, .sim__count { display: block; margin-top: 4px; color: var(--sim-ink-2); font-size: 13px; }
.sim__why { color: #b33a12; }
.sim__why--ok { color: var(--sim-ok); }
.sim__choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sim__choice { font: inherit; font-size: 13px; padding: 6px 11px; border: 1px solid var(--sim-line); border-radius: 6px; background: #fff; color: var(--sim-ink); cursor: pointer; }
.sim__choice:hover { border-color: var(--sim-ink-2); }
@container (max-width: 560px) { .sim--try .sim__reads { display: none; } }

/* the part under the pointer, the tour's focus */
.sim__marker { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1.5px solid var(--sim-or); border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.sim__marker.is-on { opacity: 1; animation: sim-pulse 1.4s ease-out infinite; }
@keyframes sim-pulse { 0% { box-shadow: 0 0 0 0 rgba(233, 78, 27, 0.35); } 100% { box-shadow: 0 0 0 14px rgba(233, 78, 27, 0); } }
.sim__tip { position: absolute; left: 0; top: 0; translate: -50% -100%; padding: 3px 8px; background: var(--sim-ink); color: #fff; font-size: 11.5px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.sim__tip.is-on { opacity: 1; }

/* buttons on the stage, the cover (touch, gate, loading) */
.sim__btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--sim-line); border-radius: 6px; background: var(--sim-panel); color: var(--sim-ink); cursor: pointer; }
.sim__btn:hover { background: #fff; }
.sim__full { position: absolute; right: 12px; bottom: 12px; }
.sim--try .sim__full, .sim__reads ~ .sim__full { bottom: auto; top: auto; }
.sim__stage .sim__full { bottom: 12px; }
.sim--try .sim__stage .sim__full { top: 12px; bottom: auto; right: 12px; }
.sim--try .sim__reads { right: 54px; }
@container (min-width: 561px) { .sim--watch .sim__stage .sim__full { top: auto; bottom: 12px; } }
@container (max-width: 560px) { .sim--watch .sim__stage .sim__full { top: 12px; bottom: auto; } .sim--watch .sim__chip { max-width: calc(100% - 70px); } }
.sim__cover { position: absolute; inset: 0; display: none; place-items: center; }
.sim__stage:not(.is-armed) .sim__cover:has(.sim__arm) { display: grid; pointer-events: none; }
.sim__arm { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--sim-line); border-radius: 6px; background: var(--sim-panel); font: inherit; font-size: 13.5px; color: var(--sim-ink); position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.sim.is-gated .sim__cover { display: grid; background: rgba(236, 235, 232, 0.72); backdrop-filter: blur(3px); }
.sim__gate { display: grid; gap: 10px; justify-items: center; text-align: center; max-width: 340px; padding: 20px; }
.sim__gate b { font-size: 18px; font-weight: 500; }
.sim__gate span { color: var(--sim-ink-2); font-size: 14px; }
.sim.is-gated .sim__chip, .sim.is-gated .sim__reads, .sim.is-gated .sim__prompt { display: none; }
.sim.is-loading .sim__stage::after { content: "Loading the 3D model"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: 13px; color: var(--sim-mute); }

/* the control bar */
.sim__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sim__transport { display: flex; align-items: center; gap: 12px; flex: 1 1 320px; min-width: 0; }
.sim__play { background: var(--sim-or); border-color: var(--sim-or); color: #fff; border-radius: 50%; width: 38px; height: 38px; flex: none; }
.sim__play:hover { background: #d4441a; }
.sim__scrub { flex: 1; padding: 10px 0; cursor: pointer; outline: none; }
.sim__track { position: relative; height: 3px; background: #dcdcd8; border-radius: 2px; --k: 0; }
.sim__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--k) * 100%); background: var(--sim-or); border-radius: 2px; }
.sim__knob { position: absolute; top: 50%; left: calc(var(--k) * 100%); width: 13px; height: 13px; translate: -50% -50%; border: 2px solid var(--sim-or); background: #fff; border-radius: 50%; }
.sim__scrub:focus-visible .sim__knob { box-shadow: 0 0 0 3px rgba(233, 78, 27, 0.3); }
.sim__tick { position: absolute; top: -3px; width: 1px; height: 9px; background: #bdbdb8; }
.sim__time { font-size: 12.5px; color: var(--sim-mute); white-space: nowrap; }
.sim__opts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.sim__views, .sim__disp { display: flex; flex-wrap: wrap; gap: 4px; }
.sim__disp { padding-left: 14px; border-left: 1px solid var(--sim-line); }
.sim__chipbtn { font: inherit; font-size: 12.5px; padding: 5px 10px; border: 1px solid var(--sim-line); border-radius: 6px; background: transparent; color: var(--sim-ink-2); cursor: pointer; white-space: nowrap; }
.sim__chipbtn:hover { color: var(--sim-ink); border-color: #c8c8c3; }
.sim__chipbtn[aria-pressed="true"] { background: var(--sim-ink); border-color: var(--sim-ink); color: #fff; }
@container (max-width: 560px) {
  .sim__opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding-inline: 2px; width: 100%; }
  .sim__opts::-webkit-scrollbar { display: none; }
  .sim__views, .sim__disp { flex-wrap: nowrap; }
  .sim__disp { padding-left: 10px; }
  .sim__chipbtn { font-size: 12px; padding: 5px 8px; }
}

/* try: the steps */
.sim__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--sim-line); border: 1px solid var(--sim-line); border-radius: 6px; overflow: hidden; counter-reset: s; }
.sim__steps li { display: flex; gap: 10px; align-items: baseline; background: #fff; padding: 9px 12px; font-size: 14px; color: var(--sim-mute); }
.sim__steps li.is-now { color: var(--sim-ink); }
.sim__steps li.is-done { color: var(--sim-ink-2); }
.sim__stepn { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; flex: none; }
.sim__steps li.is-now .sim__stepn { border-color: var(--sim-or); color: var(--sim-or); }
.sim__steps li.is-done .sim__stepn { background: var(--sim-ok); border-color: var(--sim-ok); color: #fff; font-size: 0; }
.sim__steps li.is-done .sim__stepn::after { content: "✓"; font-size: 11px; }

/* panels: only in fullscreen (or a very wide frame) */
.sim__side { display: none; }
.sim__panel { background: #fff; border: 1px solid var(--sim-line); border-radius: 6px; padding: 12px 14px; }
.sim__panel h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.sim__panel h3::before { content: ""; width: 3px; height: 12px; background: var(--sim-or); }
.sim__panel svg { display: block; width: 100%; height: auto; }
.sim.is-full { position: fixed; inset: 0; z-index: 1000; margin: 0; padding: 18px 22px; background: #f5f5f3; overflow: auto; grid-template-rows: auto 1fr auto auto; }
.sim:fullscreen { margin: 0; padding: 18px 22px; background: #f5f5f3; overflow: auto; grid-template-rows: auto 1fr auto auto; }
.sim.is-full .sim__body { grid-template-columns: 1fr 300px; min-height: 0; }
.sim.is-full .sim__stage { aspect-ratio: auto; min-height: 0; height: 100%; }
.sim.is-full .sim__side { display: grid; gap: 10px; align-content: start; overflow: auto; }
@media (max-width: 900px) { .sim.is-full .sim__body { grid-template-columns: 1fr; } .sim.is-full .sim__side { display: none; } }
@media (prefers-reduced-motion: reduce) { .sim__marker.is-on { animation: none; } .sim__prompt.is-no { animation: none; } }

/* in the lesson: wider than the reading column on big screens */
@media (min-width: 1280px) { .player__main .lesson-main > .sim { margin-inline: -80px; } }

/* the still shown before the 3D loads */
.sim-still { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #ecebe8; }
.sim-still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sim-still__bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sim-still__k { padding: 5px 10px; background: rgba(250, 250, 248, 0.92); border-radius: 6px; font-size: 12.5px; }

/* the lesson's five steps, under its title: the same in every lesson with a simulator */
.lesson-steps { margin-top: 18px; }
.lesson-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lesson-steps a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border: 1px solid var(--line, #e2e2de); border-radius: 6px; font-size: 13px; color: var(--ink-2, #55554f); text-decoration: none; }
.lesson-steps a:hover { color: var(--ink, #1d1d1b); border-color: #c8c8c3; }
.lesson-steps span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #ececE9; font-size: 11.5px; color: var(--ink, #1d1d1b); font-variant-numeric: tabular-nums; }
.lesson-steps li:nth-child(2) span, .lesson-steps li:nth-child(4) span { background: #e94e1b; color: #fff; }

/* the home page's Academy Ship (kind "hero") */
.ship { position: relative; aspect-ratio: 16 / 8; min-height: 460px; background: #ecebe8; border-radius: 6px; overflow: hidden; isolation: isolate; container-type: inline-size; user-select: none; -webkit-user-select: none; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .ship { aspect-ratio: 4 / 5; min-height: 0; } }
.ship .sim-still { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.ship__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.ship__pins { position: absolute; inset: 0; pointer-events: none; }
.ship__pin { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; translate: -11px -11px; font: inherit; }
.ship__pin span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(250, 250, 248, 0.94); color: #1d1d1b; font-size: 11.5px; font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.ship__pin b { display: none; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 4px; background: rgba(29, 29, 27, 0.86); color: #fff; white-space: nowrap; }
.ship__pin:hover b, .ship__pin.is-on b { display: block; }
.ship__pin.is-on span { background: #e94e1b; color: #fff; animation: sim-pulse 1.4s ease-out infinite; }
.ship__card { position: absolute; left: 16px; bottom: 64px; width: min(400px, calc(100% - 32px)); padding: 14px 16px; background: rgba(250, 250, 248, 0.94); border: 1px solid #e2e2de; border-radius: 6px; backdrop-filter: blur(6px); }
.ship__card p { margin: 0; }
.ship__k { display: flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #55554f; }
.ship__k span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e94e1b; color: #fff; font-size: 11px; letter-spacing: 0; }
.ship__t { margin-top: 6px !important; font-size: 18px; font-weight: 500; line-height: 1.25; }
.ship__l { margin-top: 4px !important; font-size: 14px; color: #55554f; line-height: 1.45; }
.ship__card ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 1px; background: #e2e2de; border-radius: 6px; overflow: hidden; }
.ship__card li a { display: grid; gap: 1px; padding: 8px 10px; background: #fff; text-decoration: none; color: #1d1d1b; }
.ship__card li a:hover b { color: #e94e1b; }
.ship__card li b { font-weight: 500; font-size: 14.5px; }
.ship__card li span { font-size: 12.5px; color: #8a8a84; }
.ship__bar { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px; }
.ship__btn { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 10px; border: 1px solid #e2e2de; border-radius: 6px; background: rgba(250, 250, 248, 0.94); color: #1d1d1b; font: inherit; font-size: 16px; cursor: pointer; }
.ship__tour { font-size: 12.5px; margin-left: auto; }
.ship__tour[aria-pressed="true"] { background: #1d1d1b; color: #fff; border-color: #1d1d1b; }
.ship__dots { display: flex; gap: 5px; flex-wrap: wrap; }
.ship__dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: rgba(29, 29, 27, 0.25); cursor: pointer; }
.ship__dot[aria-current="true"] { background: #e94e1b; width: 20px; border-radius: 4px; }
.ship__hint { position: absolute; right: 16px; top: 14px; margin: 0; padding: 4px 9px; border-radius: 4px; background: rgba(250, 250, 248, 0.86); font-size: 12px; color: #55554f; }
.ship.is-loading::after { content: "Loading the Academy Ship"; position: absolute; left: 50%; top: 45%; translate: -50% -50%; font-size: 13px; color: #8a8a84; }
@container (max-width: 640px) {
  .ship__card { bottom: 58px; left: 10px; width: calc(100% - 20px); padding: 11px 12px; }
  .ship__card ul { margin-top: 8px; }
  .ship__hint { display: none; }
  .ship__dots { display: none; }
  .ship__bar { left: 10px; right: 10px; bottom: 10px; }
  .ship__pin b { display: none !important; }
}
.sw-ship { margin: 0; }
.sw-ship__try { margin: 10px 0 0; font-size: 14px; }