/* Guided unit content: prompts, options, media and the unit guidebook.
   The lesson chrome (header, panel layout, completion, transitions) lives in lesson-ui.css. */
.guided-context { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); margin: 8px 0 24px; font-weight: 750; }
.guided-content { padding-bottom: 24px; }
.guided-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 900; letter-spacing: .09em; color: var(--brand-ink); text-transform: uppercase; }
#cards .guided-page h1 { font-size: clamp(27px, 6vw, 34px); line-height: 1.2; margin: 0 0 20px; text-wrap: balance; outline: none; }
.guided-intro, .guided-instruction { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.guided-video { margin: 20px auto 14px; max-width: 270px; border-radius: 22px; overflow: hidden; background: #172d3c; }
.guided-video video { display: block; width: 100%; max-height: 42svh; aspect-ratio: 9 / 13; object-fit: contain; }
.guided-summary { padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 14px; color: var(--ink); font-size: 14px; line-height: 1.6; }
.guided-summary summary { cursor: pointer; font-weight: 800; }
.guided-summary p { margin-bottom: 0; }
.guided-media-error { color: var(--amber-ink); font-size: 14px; }
.guided-story { margin: 20px 0; padding: 24px; border-radius: 22px; background: var(--brand-soft); line-height: 1.65; }
.guided-illustration { width: 100%; height: clamp(210px, 32vh, 340px); object-fit: cover; object-position: center 45%; border-radius: 22px; display: block; margin: 20px 0; }
.guided-key-fact { margin: 24px 0; border-radius: 22px; padding: 34px 20px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 950; font-size: 44px; text-align: center; }
.guided-fact { margin: 20px 0 10px; font-size: 19px; line-height: 1.65; white-space: pre-line; }
.guided-options { display: grid; gap: 12px; margin-top: 22px; }
.guided-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 68px; padding: 16px; border: 2px solid var(--line-2); border-radius: 17px; box-shadow: 0 3px 0 var(--lip); background: var(--paper); color: var(--ink); text-align: left; font-size: 17px; font-weight: 800; transition: transform .12s ease, background .12s ease; }
.guided-option:active { transform: scale(.98); }
.guided-option-mark { flex: 0 0 25px; height: 25px; display: grid; place-items: center; border: 2px solid var(--line-2); border-radius: 50%; font-size: 17px; }
.guided-option.is-selected { background: var(--brand-soft); border-color: var(--brand); box-shadow: 0 3px 0 var(--brand); color: var(--brand-ink); }
.guided-option.is-selected .guided-option-mark { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 5px var(--brand-soft); }
.guided-option.is-correct { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 3px 0 var(--brand); }
.guided-option.is-correct .guided-option-mark { background: var(--brand-lip); color: #fff; border-color: var(--brand-lip); }
.guided-option.is-wrong { border-color: #ec9a91; background: var(--wrong-soft); box-shadow: 0 3px 0 #ec9a91; }
.guided-option.is-wrong .guided-option-mark { color: var(--wrong-ink); border-color: #ec9a91; }
.guided-option:disabled { opacity: 1; cursor: default; }
.guided-actions { margin-top: auto; padding: 20px 0 12px; }
#cards .guided-actions .big { width: 100%; margin: 0; color: #fff; }
.guided-actions .big:disabled { background: var(--panel-2); box-shadow: 0 4px 0 var(--disabled); color: var(--ink-2) !important; opacity: 1; }
.guided-guide { display: block; }
.guided-guide > .guided-eyebrow { margin-top: 25px; }
.guided-guide section { border-top: 1px solid var(--line-2); padding: 20px 0; }
.guided-guide h2 { margin: 0 0 10px; font-size: 20px; }
.guided-guide section p { margin: 0; line-height: 1.7; font-size: 16px; color: var(--ink); }
.today-course-topic[data-topic="roman-britain"] { --topic-banner: #ff9600; --topic-lip: #cc7800; --topic-node: #ff9600; --topic-ring: #ffd08a; }
.today-guided-kind { display: block; color: var(--topic-banner); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 950; margin-bottom: 5px; }
.today-jump { position: fixed; z-index: 6; right: 18px; bottom: calc(90px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); display: flex; align-items: center; gap: 8px; border: 2px solid var(--brand-soft-2); border-radius: 30px; background: var(--paper); color: var(--brand-ink); box-shadow: 0 3px 12px #0a4c7920; padding: 12px 16px; font-size: 13px; font-weight: 900; }
.today-jump[hidden] { display: none; }
@media (min-width: 960px) {
  .today-jump { bottom: 24px; }
 }
@media (prefers-reduced-motion: reduce) { .guided-option { transition: none; } .guided-option:active { transform: none; }  }

.guided-question-screen .guided-options { margin-top: 16px; gap: 14px; }
.guided-question-screen .guided-option { min-height: 60px; padding: 16px; font-size: 18px; font-weight: 600; border: 2px solid var(--line-1); box-shadow: 0 2px 0 var(--line-1); border-radius: 15px; }
.guided-question-screen .guided-option-mark { display: none; }
.guided-question-screen .guided-option.is-selected, .guided-question-screen .guided-option.is-correct { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-soft-2); box-shadow: 0 2px 0 var(--brand-soft-2); }
.guided-question-screen .guided-option.is-wrong { color: var(--wrong-ink); background: var(--wrong-soft); border-color: var(--wrong-line); box-shadow: 0 2px 0 var(--wrong-line); }

/* The corgi teaches one idea in the same frame as the next question. */
.guided-reading-screen .guided-content { padding-top: 18px; }
.guided-reading-screen .corgi-question { border-bottom: 0; }
/* A reading bubble is plain white with a light rule, like a character speaking, not a tinted panel. */
.guided-reading-screen .corgi-question-bubble,
.guided-reading-screen .corgi-question-bubble::before { background: var(--paper); border-color: var(--line-2); }
.guided-reading-screen .corgi-question-bubble { border-radius: 16px; padding: 16px 18px; }

/* The mascot's hello: a short bubble above a big waving corgi, centred, with a
   soft shadow under its paws. */
/* Pip stands in the same place on every hello: the bubble grows upward from
   its tail, the way a speech bubble should, instead of pushing him down. */
.guided-hello { display: grid; grid-template-rows: minmax(112px, auto) auto auto; justify-items: center; align-content: start; text-align: center; margin: 12px auto 0; }
.guided-hello-bubble { position: relative; align-self: end; max-width: 360px; padding: 12px 16px; border: 2px solid var(--line-2); border-radius: 14px; background: var(--paper); }
#cards .guided-hello-screen .guided-hello-bubble h1, .guided-hello-screen .guided-hello-bubble h1 { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 500; color: var(--ink); }
.guided-hello-bubble::after { content: ""; position: absolute; left: calc(50% - 8px); bottom: -9px; width: 14px; height: 14px; background: var(--paper); border-right: 2px solid var(--line-2); border-bottom: 2px solid var(--line-2); transform: rotate(45deg); }
.guided-hello-mascot { position: relative; z-index: 1; width: min(62vw, 300px); height: auto; margin-top: 26px; }
.guided-hello::after { content: ""; width: min(44vw, 200px); height: 26px; margin-top: -16px; border-radius: 50%; background: var(--panel-2); }
@media (max-height: 760px) { .guided-hello-mascot { width: min(50vw, 240px); } }

/* Key terms marked **like this** in the content. */
#cards .guided-page .guided-term { color: var(--brand-ink); font-weight: 800; }