:root {
  --ink:#172033; --muted:#5f6b7a; --navy:#14213d; --paper:#ffffff;
  --soft:#f5f7fa; --line:#d9e0e8; --green:#dcefe3; --purple:#6d28d9;
  --amber:#fff7e6; --max:1080px;
}
body { color:var(--ink); line-height:1.62; }
main.content { max-width:var(--max); }
h1,h2,h3 { color:var(--navy); letter-spacing:-.015em; }
h1 { font-weight:750; }
.lead { font-size:1.18rem; color:#334155; max-width:850px; }
.course-kicker { text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:800; color:var(--muted); }
.course-card,.obe,.interactive,.message,.sa-context,.formative,.evidence {
  border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.25rem; margin:1.25rem 0; background:var(--paper);
}
.obe { border-top:5px solid var(--navy); }
.formative { border-left:5px solid #b7791f; background:#fffaf0; }
.evidence { border-left:5px solid #64748b; background:#f8fafc; }
.sa-context { border-left:5px solid var(--purple); background:#faf8ff; }
.message { background:#f8fafc; }
.message .meta { color:var(--muted); font-size:.85rem; margin-bottom:.35rem; }
.progress { display:grid; grid-template-columns:repeat(5,1fr); gap:.35rem; margin:1rem 0 1.6rem; }
.progress span { background:#eef2f7; border-radius:6px; padding:.45rem .25rem; text-align:center; font-size:.72rem; font-weight:800; }
.progress .active { background:var(--navy); color:white; }
.progress .done { background:var(--green); }
.btn,.course-button {
  display:inline-block; padding:.7rem 1rem; margin:.2rem .25rem .2rem 0;
  border-radius:7px; background:var(--navy); color:#fff!important; text-decoration:none; font-weight:750;
}
.btn.alt,.course-button.alt { background:#fff; color:var(--navy)!important; border:1px solid var(--navy); }
.actionbar { display:flex; flex-wrap:wrap; gap:.45rem; margin:1rem 0; }
.learning-asset { width:100%; border:1px solid var(--line); border-radius:10px; margin:1rem 0; }
.cell, code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
details { border:1px solid var(--line); border-radius:9px; padding:.7rem .9rem; margin:.8rem 0; background:#fff; }
details summary { cursor:pointer; font-weight:700; }
.checklist label,.choice { display:block; padding:.55rem .7rem; border:1px solid var(--line); border-radius:7px; margin:.4rem 0; }
.course-nav { display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line); }
.small-note { font-size:.88rem; color:var(--muted); }
table { font-size:.94rem; }
@media(max-width:760px){
  .progress { grid-template-columns:1fr; }
  .actionbar,.course-nav { display:block; }
  .btn,.course-button { display:block; margin:.45rem 0; text-align:center; }
}

/* V8 — iframe-first shell */
html { scroll-behavior:smooth; background:#fff; }
body { margin:0; overflow-x:hidden; }
#quarto-header, #quarto-search, .navbar, footer.footer, #quarto-margin-sidebar, .quarto-title-breadcrumbs { display:none!important; }
#quarto-content { padding:0!important; }
main.content { max-width:980px!important; margin:0 auto!important; padding:14px 18px 34px!important; }
.quarto-title-block { margin:0 0 .6rem!important; }
.quarto-title-block .quarto-title-banner { padding:0!important; background:transparent!important; }
.quarto-title h1.title { font-size:clamp(1.65rem,3.2vw,2.45rem); margin:.35rem 0 .25rem; }
.embed-utility { display:flex; justify-content:flex-end; margin:0 0 .25rem; font-size:.78rem; }
.embed-utility a { color:var(--muted); text-decoration:none; }
.stage-progress { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; position:sticky; top:0; z-index:20; padding:8px 0; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); }
.stage-progress a { position:relative; display:block; text-align:center; padding:18px 3px 5px; color:#64748b; text-decoration:none; font-size:.67rem; font-weight:750; }
.stage-progress a:before { content:""; position:absolute; top:5px; left:50%; width:9px; height:9px; transform:translateX(-50%); border:2px solid #aab5c3; border-radius:50%; background:white; z-index:2; }
.stage-progress a:not(:last-child):after { content:""; position:absolute; top:10px; left:55%; width:90%; border-top:1px solid #cbd5e1; z-index:1; }
.stage-progress a.active { color:#137a45; }
.stage-progress a.active:before { background:#1f9d55; border-color:#1f9d55; }
.stage-progress a.visited:not(.active):before { background:#dcefe3; border-color:#6aa77e; }
.hero { position:relative; overflow:hidden; border-radius:14px; margin:.5rem 0 1rem; min-height:330px; display:flex; align-items:flex-end; background:#0f2740; }
.hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0!important; border:0!important; border-radius:0!important; }
.hero:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,20,35,.04) 25%,rgba(7,25,44,.90) 100%); }
.hero-copy { position:relative; z-index:2; color:white; padding:28px; max-width:760px; }
.hero-copy h1 { color:white; font-size:clamp(2rem,5vw,3.6rem); line-height:.98; margin:0 0 .6rem; }
.hero-copy p { font-size:1.05rem; margin:.35rem 0; }
.meta-strip { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.meta-strip span { background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.28); padding:6px 9px; border-radius:999px; font-size:.78rem; }
.resource-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.resource-tile { border:1px solid var(--line); border-radius:10px; padding:14px; text-align:center; text-decoration:none!important; color:var(--ink)!important; background:#fff; }
.resource-tile:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(15,23,42,.08); }
.resource-tile strong { display:block; margin-bottom:3px; }
.video-slot { aspect-ratio:16/9; border:2px dashed #aeb9c7; border-radius:12px; display:grid; place-items:center; background:#f8fafc; text-align:center; padding:18px; }
.page-visual { margin:1rem 0 1.4rem; }
.page-visual img { width:100%; border-radius:12px; border:1px solid var(--line); }
.management-brief { display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:center; border:1px solid #eadcc8; background:#fff9ef; border-radius:12px; padding:16px; margin:1rem 0; }
.brief-avatar { width:110px; height:110px; border-radius:8px; background:linear-gradient(145deg,#d9e1ea,#f8fafc); display:grid; place-items:center; font-size:2.2rem; }
.iframe-nav { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:2rem 0 .5rem; padding-top:1rem; border-top:1px solid var(--line); }
.iframe-nav .course-button { margin:0; }
.state-box { background:#eef6ff; border-left:5px solid #2b6cb0; padding:14px; border-radius:8px; }
textarea.course-response { width:100%; min-height:130px; box-sizing:border-box; padding:12px; border:1px solid var(--line); border-radius:8px; font:inherit; }
@media(max-width:820px){ .resource-grid{grid-template-columns:repeat(2,1fr)} .management-brief{grid-template-columns:1fr}.brief-avatar{display:none} }
@media(max-width:620px){
 main.content{padding:8px 10px 24px!important}.stage-progress{overflow-x:auto;grid-template-columns:repeat(7,minmax(76px,1fr))}.hero{min-height:390px}.hero-copy{padding:20px}.resource-grid{grid-template-columns:1fr 1fr}.iframe-nav{display:grid;grid-template-columns:1fr 1fr}.iframe-nav a{text-align:center}.obe-grid,.platform-grid,.grid3{grid-template-columns:1fr!important}
}


/* V9 — full-page Google Sites embedded learning application */
html.sla-app, html.sla-app body { min-height:100%; }
html.sla-app { scroll-padding-top:68px; overscroll-behavior-y:none; }
body { min-height:100vh; min-height:100dvh; overflow-y:auto; scrollbar-gutter:stable; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }
#quarto-content { min-height:100vh; min-height:100dvh; }
main.content { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; width:min(100%,1040px); }
main.content > .app-nav:last-child { margin-top:auto; }
.stage-progress { box-shadow:0 1px 0 rgba(15,23,42,.08); margin-bottom:.7rem; }
.stage-progress a { touch-action:manipulation; }
.app-link { touch-action:manipulation; }
.iframe-nav { position:relative; background:#fff; padding-bottom:8px; }
.is-embedded .embed-utility { display:flex; }
@media (min-width:900px){
  .is-embedded main.content { padding-left:24px!important; padding-right:24px!important; }
}
@media (max-height:650px) and (min-width:700px){
  .stage-progress { padding-top:4px; padding-bottom:4px; }
  .stage-progress a { padding-top:15px; }
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} *{scroll-behavior:auto!important;transition:none!important} }
.spaced-card { margin-top: 12px; }
.spaced-accent { margin-top: 14px; }

/* Markdown adds paragraph wrappers inside these layout elements. */
.resource-grid > p, .meta-strip > p { display: contents; }
.num > p, .label > p, .meta > p, .obe-head > p,
.course-kicker > p, .formula > p, .brief-avatar > p { margin: 0; }
.hero > p { margin: 0; }
.formula code { color: inherit; background: none; padding: 0; }