/* AI Literacy Framework: additions to the OKAI GO lesson stylesheet. Uses the site's colour variables. */
.work-note{font-size:1.12rem;line-height:1.65;color:var(--deep);border-left:5px solid var(--gold);padding:4px 0 4px 20px;margin:0 0 32px}
.ask{font:italic 1.3rem/1.5 var(--serif);color:var(--cherry);margin:30px 0 1.2rem;max-width:720px}
.content-block .ask:last-child{margin-bottom:0}
.source-line{font-size:.86rem;line-height:1.6;color:var(--muted);margin-top:26px}
.pair,.trio,.quad{display:grid;gap:22px;margin:34px 0}
.pair,.quad{grid-template-columns:repeat(2,minmax(0,1fr))}
.trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--cabernet);padding:26px 26px 24px}
.card>:last-child{margin-bottom:0}
.card h3{font-size:1.3rem;margin:0 0 .8rem}
.card ul{margin:0;padding-left:1.2rem}.card li{margin:.5rem 0;line-height:1.55}
.card p{line-height:1.6;margin-bottom:1rem}
.card--dark{background:var(--deep);border-color:var(--deep);border-top-color:var(--gold);color:#fffaf4}
.card--dark h3{color:var(--gold)}
.card--warm{background:#fbefe2;border-color:#e6c3a0;border-top-color:var(--gold)}
.card--num{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;border-top-width:1px;padding:22px}
.card--num h3{font-size:1.2rem;margin:4px 0 .35rem}
.card--num p{margin:0;font-size:.98rem}
.num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--deep);font-weight:800}
.quote{font:italic 1.02rem/1.55 var(--serif);color:var(--cherry)}
.pills{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;font-size:.8rem;font-weight:750}
.pills span{padding:3px 11px;border-radius:999px;background:var(--cream);border:1px solid var(--line);color:var(--deep)}
.pills span.to{background:var(--cabernet);border-color:var(--cabernet);color:#fffaf4}
.pills i{font-style:normal;color:var(--cherry);font-weight:800}
.more-ideas{columns:2;column-gap:44px;margin:26px 0;padding-left:1.2rem}
.more-ideas li{break-inside:avoid;margin:0 0 .8rem;line-height:1.55}
.tasks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:26px 0 0;padding:0}
.tasks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;margin:0;background:#fff;border:1px solid #e6c3a0;border-radius:6px;padding:14px 16px;line-height:1.5;font-size:.98rem}
.chip{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--cabernet);color:#fffaf4;font-size:.8rem;font-weight:800;line-height:1.6}
.content-block h4{margin:2rem 0 .4rem;color:var(--deep)}
.content-block .code-block{margin-top:14px}
.code-block pre{padding-top:62px}
.split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:34px;align-items:center;margin:34px 0}
.split figure{margin:0}.split .ask{margin:0 0 18px;font-size:1.2rem}
/* Four habits diagram: four cards around the task, joined by lines that meet in the middle. */
.fourds{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:84px 190px;margin:40px 0 20px;padding:6px}
.fourds svg{position:absolute;inset:0;width:100%;height:100%}
.fourds div{position:relative;background:#fff;border:1px solid var(--line);border-left:6px solid var(--gold);padding:18px 20px;line-height:1.45}
.fourds strong{display:block;font:650 1.3rem/1.2 var(--serif);color:var(--cabernet);margin-bottom:4px}
.fourds .task{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:170px;height:84px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--deep);color:#fffaf4;font:650 1.15rem var(--serif);padding:0}
.parts{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.parts li{margin:0}
.parts a,.parts .soon{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-left:6px solid var(--cabernet);padding:18px 22px;text-decoration:none;color:var(--ink)}
.parts a:hover{background:var(--cream)}
.parts strong{display:block;font:650 1.25rem/1.3 var(--serif);color:var(--cabernet)}
.parts span.desc{display:block;font-size:.96rem;line-height:1.5;color:var(--muted)}
.parts .soon{border-left-color:var(--line)}.parts .soon strong{color:var(--muted)}.parts .soon .num{background:var(--cream);color:var(--muted)}
.parts .tag{font-size:.72rem;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.parts .go{color:var(--cherry);font-weight:800}
@media(max-width:760px){
 .pair,.trio,.quad,.tasks,.split{grid-template-columns:1fr}
 .more-ideas{columns:1}
 .fourds{gap:74px 14px}.fourds div{padding:14px}.fourds strong{font-size:1.1rem}.fourds div{font-size:.9rem}
 .fourds .task{width:130px;height:60px;font-size:1rem}
 .parts a,.parts .soon{grid-template-columns:44px minmax(0,1fr);padding:16px}.parts .tag,.parts .go{display:none}
 .ask{font-size:1.15rem}
}
@media print{.fourds .task,.card--dark{background:#fff;color:#222;border:1px solid #222}}

/* Workshop bar: names the workshop and shows the seven parts on every page. */
.workshop-bar{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;padding:12px 38px;background:var(--cream);border-top:1px solid var(--line)}
.workshop-name{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;text-decoration:none}
.workshop-name strong{font:650 1.25rem/1.3 var(--serif);color:var(--cabernet)}
.workshop-name span{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--cherry)}
.workshop-bar ol{list-style:none;display:flex;gap:6px;margin:0;padding:0}
.workshop-bar li{margin:0}
.workshop-bar li a,.workshop-bar li span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--paper);font-weight:800;font-size:.9rem;text-decoration:none;color:var(--cabernet)}
.workshop-bar li span{color:#b5aaa3;background:transparent}
.workshop-bar li a:hover{background:#e9e1d6}
.workshop-bar li a[aria-current]{background:var(--gold);border-color:var(--gold);color:var(--deep)}
/* Section links sit under the header and scroll away with the page; they wrap instead of scrolling sideways. */
.lesson-contents{position:static;box-shadow:none;background:transparent;align-items:flex-start;padding-top:22px;padding-bottom:0;border-bottom:0}
.lesson-contents-label{padding-top:7px}
.lesson-contents ol{flex-wrap:wrap;overflow:visible}
.reading{padding-top:44px}
.expect{border-left:5px solid var(--gold);padding:2px 0 2px 20px;margin:30px 0 0}
.expect h4{margin:0 0 .5rem;font-size:1rem;color:var(--cherry);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:800}
.expect p{margin-bottom:.9rem}.expect>:last-child{margin-bottom:0}
details.reveal{margin:26px 0 0;background:#fff;border:1px solid #e6c3a0;border-radius:6px;padding:14px 18px}
details.reveal summary{cursor:pointer;font-weight:750;color:var(--cabernet)}
details.reveal[open] summary{margin-bottom:10px}
.key{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.45}
.key th,.key td{text-align:left;vertical-align:top;padding:9px 10px 9px 0;border-top:1px solid var(--line)}
.key thead th{border-top:0;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
@media(max-width:760px){.workshop-bar{padding:12px 20px}.workshop-bar li a,.workshop-bar li span{width:32px;height:32px}.lesson-contents-label{display:block}.lesson-contents{flex-direction:column;gap:6px}}
@media print{.workshop-bar ol,.lesson-contents{display:none}}

/* ---- components added with parts 1, 2 and 4 to 7 ---- */
.site-nav--c>a[aria-current]{background:var(--cream)}
.tasks--one{grid-template-columns:1fr}
.questions{margin:26px 0 0;padding:0;list-style:none;counter-reset:q}
.questions li{counter-increment:q;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;margin:0;padding:14px 0;border-top:1px solid var(--line);line-height:1.5}
.questions li::before{content:counter(q);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--deep);font-weight:800;font-size:.95rem}
.questions li>span{padding-top:5px}
.questions .opts{display:block;font-size:.9rem;color:var(--muted);margin-top:2px}
.steps{margin:26px 0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;margin:0;padding:14px 0;border-top:1px solid var(--line);line-height:1.55}
.steps li::before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--deep);font-weight:800;font-size:.95rem}
.steps li>div{padding-top:5px}.steps li>div>:last-child{margin-bottom:0}
.steps .code-block{margin-top:14px}
.card .when{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--cherry);margin:0 0 .6rem}
.card--dark .when{color:var(--gold)}
.card .src{font-size:.84rem;color:var(--muted);margin-top:auto;padding-top:.4rem}
.card--dark .src,.card--dark .src a{color:#d9cdc4}
.pair .card,.trio .card{display:flex;flex-direction:column}
.light{border-top-width:8px}.light--g{border-top-color:#2e7d4f}.light--y{border-top-color:#d9a400}.light--r{border-top-color:#b3362d}
.big-line{font:650 1.45rem/1.4 var(--serif);color:var(--cabernet);margin:34px 0;max-width:760px}
.lenses{width:100%;border-collapse:collapse;margin:30px 0;line-height:1.5}
.lenses th,.lenses td{text-align:left;vertical-align:top;padding:16px 16px 16px 0;border-top:1px solid var(--line)}
.lenses th{font:650 1.2rem/1.3 var(--serif);color:var(--cabernet);white-space:nowrap}
.lenses th small{display:block;font:500 .8rem var(--sans);color:var(--muted)}
.lenses td.q{font-weight:750;color:var(--deep);white-space:nowrap}
.role{margin-top:56px}.role h3{margin-bottom:.4rem}
.role .when{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--cherry);margin:0 0 1rem}
.case{background:#fff;border:1px solid var(--line);border-left:6px solid var(--cabernet);padding:26px 28px;margin:26px 0}
.case h3{font-size:1.3rem;margin-bottom:.4rem}.case .when{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--cherry);margin:0 0 .4rem}
.case .steps{margin:14px 0}.case .steps li{padding:10px 0}
.case .point{font-weight:650;color:var(--deep)}
.case>:last-child{margin-bottom:0}
.draft{margin:26px 0 0;background:#fff;border:1px solid var(--line);border-left:6px solid var(--line);padding:24px 28px;font:1rem/1.75 var(--serif)}
.draft p:last-child{margin:0}
.draft-label{font:800 .74rem var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--cherry);margin:0 0 .8rem}
.declaration{margin:22px 0 0;background:var(--deep);color:#fffaf4;padding:24px 28px}
.declaration .draft-label{color:var(--gold)}
.declaration .decl{font:italic 1.3rem/1.5 var(--serif);margin:0 0 1rem}
.declaration .sign{margin:0;color:#eadfd7}
.resources{list-style:none;margin:26px 0 0;padding:0}
.resources li{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:8px 24px;margin:0;padding:14px 0;border-top:1px solid var(--line)}
.resources strong{color:var(--deep)}
/* Workflow diagram: see .flow-svg below */
.io{display:grid;grid-template-columns:minmax(0,1.5fr) auto minmax(0,.9fr) auto minmax(0,1fr);gap:14px;align-items:center;margin:38px 0}
.io .fb{text-align:left;padding:18px 20px;font-size:.95rem}
.io .fb h4{margin:.8rem 0 .2rem;font-size:.9rem;color:var(--cherry)}
.io .model{background:var(--deep);color:#fffaf4;border-radius:999px;padding:26px 18px;text-align:center;font:650 1.1rem/1.3 var(--serif)}
.io .fa{font-size:1.4rem}
@media(max-width:760px){
 .io{grid-template-columns:1fr}.io .fa{transform:rotate(90deg)}
 .lenses,.lenses tbody,.lenses tr,.lenses th,.lenses td{display:block;white-space:normal}
 .lenses tr{border-top:1px solid var(--line);padding:14px 0}.lenses th,.lenses td{border:0;padding:2px 0}
 .resources li{grid-template-columns:1fr}
 .big-line{font-size:1.25rem}
 .key{font-size:.88rem}
}

/* Workflow diagram (SVG). The wide version shows on larger screens, the narrow one on phones. */
.flow-figure{margin:38px 0}
.flow-svg{display:block;width:100%;height:auto;overflow:visible}
.flow-svg[class*="-narrow"]{display:none;max-width:420px;margin:0 auto}
.flow-box rect{fill:#fff;stroke:var(--line);stroke-width:1.5}
.flow-box .flow-cap{fill:var(--gold);stroke:none}
.flow-box--dark rect{fill:var(--deep);stroke:var(--deep)}
.flow-title{font-family:var(--serif);font-weight:650;font-size:19px;fill:var(--cabernet)}
.flow-body{font-family:var(--sans);font-size:14.5px;fill:var(--ink)}
.flow-box--dark .flow-title{fill:#fffaf4}.flow-box--dark .flow-body{fill:#eadfd7}
.flow-arrow line{stroke:var(--cherry);stroke-width:3.5}
.flow-head{fill:var(--cherry)}
.flow-label{font-family:var(--sans);font-weight:800;font-size:14px;fill:var(--deep)}
.flow-box.is-dim,.flow-arrow.is-dim{opacity:.32}
.flow-box.is-hi rect{stroke:var(--cherry);stroke-width:3}
.flow-box.is-hi .flow-cap{fill:var(--cherry)}
@media(max-width:620px){.flow-svg[class*="-wide"]{display:none}.flow-svg[class*="-narrow"]{display:block}}
@media print{.flow-box--dark rect{fill:#fff;stroke:#222}.flow-box--dark .flow-title,.flow-box--dark .flow-body{fill:#222}}

/* "What shapes the AI's answer" diagram */
.flow-model rect{fill:var(--deep)}
.flow-model .flow-title{fill:#fffaf4}
.flow-label--caps{font-size:13px;letter-spacing:.12em;fill:var(--cherry)}
.flow-figure--io .flow-svg[class*="-wide"]{max-width:900px}
@media print{.flow-model rect{fill:#fff;stroke:#222}.flow-model .flow-title{fill:#222}}

/* 12 Nov 2026 QA fixes */
.key a{overflow-wrap:normal;word-break:normal}
.expect h3{margin:0 0 .5rem;font-family:var(--sans);line-height:inherit;color:var(--cherry);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:800}
@media(max-width:760px){.workshop-bar ol{gap:4px;flex-wrap:wrap}.workshop-bar li a,.workshop-bar li span{width:36px;height:36px}.fourds{grid-auto-rows:1fr}}
@media(max-width:360px){.site-nav{flex-wrap:wrap}}