/* ==========================================================================
   African Technical AI Safety — editorial design system
   UCT blue (#003A70 / #2a5298). Fraunces display + Source Serif 4 body +
   IBM Plex Mono labels. Flat, document-like; no gradients/heavy shadows.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Source+Serif+4:wght@400;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --navy:#003A70;
  --blue:#2a5298;
  --ink:#2c3e50;
  --muted:#5a6672;
  --rule:#e4e8ec;
  --tint:#f5f7f9;
  --paper:#ffffff;
  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

html{ font-size:17px; }
*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.72;
  color:var(--ink);
  background:#eceff2;
  padding:24px;
}

.container{
  max-width:880px;
  margin:0 auto;
  background:var(--paper);
  border:1px solid var(--rule);
}

/* --- Back-to-contents bar (standalone pages: about, disclaimer) --- */
.back-nav{ background:var(--navy); padding:12px 40px; font-family:var(--mono); font-size:0.72rem; letter-spacing:1px; text-transform:uppercase; }
.back-nav a{ color:#cfe2f3; text-decoration:none; }
.back-nav a:hover{ color:#fff; }

/* --- Sticky top nav (Contents + prev/next), injected by add_page_nav.py --- */
.top-nav{ position:sticky; top:0; z-index:20; background:var(--navy); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 40px; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.5px; }
.top-nav a{ color:#cfe2f3; text-decoration:none; white-space:nowrap; }
.top-nav a:hover{ color:#fff; }
.top-nav .tn-home{ flex:0 0 auto; text-transform:uppercase; letter-spacing:1px; }
.top-nav .tn-links{ display:flex; gap:20px; min-width:0; }
.top-nav .tn-prev, .top-nav .tn-next{ display:inline-block; max-width:26ch; overflow:hidden; text-overflow:ellipsis; }
/* in-session dropdown (JS-free <details>) */
.top-nav .tn-menu{ position:relative; flex:0 1 auto; }
.top-nav .tn-menu > summary{ cursor:pointer; list-style:none; color:#cfe2f3; white-space:nowrap; text-transform:uppercase; letter-spacing:1px; }
.top-nav .tn-menu > summary::-webkit-details-marker{ display:none; }
.top-nav .tn-menu > summary::after{ content:" \25BE"; }
.top-nav .tn-menu[open] > summary{ color:#fff; }
.top-nav .tn-menu ul{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); min-width:260px; max-width:84vw; background:var(--paper); border:1px solid var(--rule); border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,0.18); padding:8px; margin:0; list-style:none; z-index:30; }
.top-nav .tn-menu li{ margin:0; }
.top-nav .tn-menu ul a, .top-nav .tn-menu ul .tn-current{ display:block; padding:7px 12px; border-radius:5px; font-family:var(--serif); font-size:0.92rem; letter-spacing:0; text-transform:none; white-space:normal; line-height:1.35; }
.top-nav .tn-menu ul a{ color:var(--ink); }
.top-nav .tn-menu ul a:hover{ background:var(--tint); color:var(--navy); }
.top-nav .tn-menu ul .tn-current{ color:var(--navy); font-weight:500; background:var(--tint); }
@media (max-width:768px){
  .top-nav{ padding:10px 24px; gap:12px; }
  .top-nav .tn-title{ display:none; }
  .top-nav .tn-prev, .top-nav .tn-next{ max-width:none; }
  .top-nav .tn-menu ul{ left:auto; right:0; transform:none; }
}

/* --- AI transparency notice --- */
.ai-notice{ background:var(--tint); color:var(--navy); padding:12px 40px; text-align:center; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.3px; border-bottom:1px solid var(--rule); }
.ai-notice strong{ font-weight:500; }
.ai-notice a{ color:var(--navy); text-decoration:underline; }

/* --- Header --- */
header{ background:var(--paper); color:var(--ink); padding:50px 48px 30px; }
header::after{ content:""; display:block; width:56px; height:3px; background:var(--navy); margin-top:24px; }
.week-badge{ display:inline-block; font-family:var(--mono); font-size:0.72rem; letter-spacing:2px; text-transform:uppercase; color:var(--blue); margin-bottom:14px; }
header h1{ font-family:var(--display); font-weight:500; font-size:2.6rem; line-height:1.08; letter-spacing:-0.5px; color:var(--navy); margin:0; }
header p{ font-size:1.12rem; color:var(--muted); max-width:60ch; margin:14px 0 0; line-height:1.5; }

/* --- Content wrapper --- */
.content{ padding:42px 48px 8px; }

.intro-text{ background:var(--tint); border-left:3px solid var(--navy); padding:24px 28px; margin:0 0 40px; }
.intro-text h2{ font-family:var(--display); color:var(--navy); font-size:1.4rem; font-weight:500; margin-bottom:12px; }
.intro-text p{ font-size:1.05rem; color:var(--ink); line-height:1.75; margin-bottom:12px; }
.intro-text p:last-child{ margin-bottom:0; }

.section-title{ font-family:var(--display); font-size:1.75rem; font-weight:500; color:var(--navy); margin:48px 0 18px; line-height:1.15; }

.lead{ font-size:1.12rem; color:var(--muted); margin-bottom:26px; line-height:1.6; }

/* --- Cards --- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; margin:28px 0; }
.card{ background:var(--paper); border:1px solid var(--rule); border-radius:8px; padding:22px 24px; }
.card h3{ font-family:var(--display); color:var(--navy); font-size:1.2rem; font-weight:500; margin-bottom:10px; }
.card p{ color:var(--ink); line-height:1.65; margin-bottom:10px; font-size:0.98rem; }
.card p:last-child{ margin-bottom:0; }

/* --- Lists --- */
.styled-list{ list-style:none; margin:14px 0; }
.styled-list li{ padding:6px 0 6px 24px; color:var(--ink); position:relative; line-height:1.65; }
.styled-list li::before{ content:'\25B8'; position:absolute; left:0; color:var(--navy); }

/* --- Strong call-out (solid navy) --- */
.highlight-box{ background:var(--navy); color:#fff; padding:28px 30px; border-radius:8px; margin:36px 0; }
.highlight-box h3{ font-family:var(--display); font-weight:500; font-size:1.5rem; color:#fff; margin-bottom:12px; }
.highlight-box p{ font-size:1.02rem; line-height:1.7; color:#dce7f2; margin-bottom:10px; }
.highlight-box p:last-child{ margin-bottom:0; }
.highlight-box a{ color:#bcd4ec; }

/* --- Left-rule call-outs --- */
.info-box{ background:var(--tint); border-left:3px solid var(--navy); padding:18px 24px; margin:22px 0; }
.info-box h4{ font-family:var(--display); color:var(--navy); font-size:1.15rem; font-weight:500; margin-bottom:8px; }
.info-box p{ color:var(--ink); line-height:1.7; }

.warning-box{ background:#fff8e8; border-left:3px solid #e0a200; padding:18px 24px; margin:22px 0; }
.warning-box h4{ font-family:var(--display); color:#9a6b00; font-size:1.15rem; font-weight:500; margin-bottom:8px; }
.warning-box p{ color:#5d4e1f; line-height:1.7; }

.technical-detail{ background:var(--paper); border:1px solid var(--rule); border-radius:8px; padding:22px 24px; margin:22px 0; }
.technical-detail h4{ font-family:var(--display); color:var(--navy); font-size:1.2rem; font-weight:500; margin-bottom:12px; }

.case-study{ background:var(--tint); border-left:3px solid var(--blue); padding:22px 26px; margin:28px 0; }
.case-study h4{ font-family:var(--display); color:var(--navy); font-size:1.2rem; font-weight:500; margin-bottom:12px; }
.case-study p{ color:var(--ink); line-height:1.72; margin-bottom:10px; }

/* --- Readings / resources --- */
.resource-placeholder{ border-top:2px solid var(--navy); padding:18px 0 6px; margin:26px 0; }
.resource-placeholder h4{ font-family:var(--mono); text-transform:uppercase; letter-spacing:1.5px; color:var(--blue); font-size:0.78rem; margin-bottom:12px; font-weight:500; }
.resource-placeholder p{ color:var(--ink); margin-top:8px; line-height:1.65; font-size:0.98rem; }
.reading-core{ border-top-color:var(--navy); }

/* --- Tables --- */
.comparison-table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:0.96rem; }
.comparison-table th{ background:var(--navy); color:#fff; padding:12px 14px; text-align:left; font-family:var(--mono); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.5px; font-weight:500; }
.comparison-table td{ padding:11px 14px; border-bottom:1px solid var(--rule); color:var(--ink); vertical-align:top; }
.comparison-table tr:last-child td{ border-bottom:none; }

/* --- Decision framework / numbered steps --- */
.decision-framework{ background:var(--tint); border-left:3px solid var(--navy); padding:24px 28px; margin:28px 0; }
.decision-framework h4{ font-family:var(--display); color:var(--navy); font-size:1.25rem; font-weight:500; margin-bottom:16px; }
.decision-framework ol{ margin-left:22px; color:var(--ink); line-height:2.0; }

/* --- Lab box --- */
.lab-box{ background:#f1f6fb; border:1px solid #cfe0f0; border-left:3px solid var(--navy); border-radius:8px; padding:24px 26px; margin:28px 0; }
.lab-box h4{ font-family:var(--display); color:var(--navy); font-size:1.2rem; font-weight:500; margin-bottom:12px; }
.lab-box p{ color:var(--ink); line-height:1.72; margin-bottom:10px; }
.lab-box .tag{ display:inline-block; background:var(--blue); color:#fff; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.5px; text-transform:uppercase; padding:3px 9px; border-radius:4px; margin-left:8px; vertical-align:middle; }

/* --- Tool cards (lab resource links) --- */
.tool-card{ background:var(--paper); border:1px solid var(--rule); border-radius:8px; padding:16px 18px; margin:12px 0; }
.tool-url{ font-family:var(--mono); font-size:0.82rem; color:var(--blue); word-break:break-all; }

/* --- Inline code and display formulas --- */
code{ background:#eef2f6; padding:1px 6px; border-radius:4px; font-size:0.86em; color:var(--navy); font-family:var(--mono); }
.formula{ background:#f1f6fb; border:1px solid #d6e3ef; border-radius:8px; padding:16px 20px; margin:20px 0; text-align:center; font-size:1.1rem; color:var(--navy); overflow-x:auto; line-height:1.6; }
.formula code{ background:none; padding:0; font-size:1em; }

/* --- In-content links --- */
.content a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:0.6px; }
.content a:hover{ color:var(--navy); }
.resource-placeholder a{ font-weight:400; }

/* --- Figures --- */
figure{ margin:32px auto; text-align:center; }
figure img{ max-width:100%; height:auto; border:1px solid var(--rule); border-radius:6px; }
/* Wide diagrams break out of the 880px column; at column width their labels
   render too small to read. The caption carries a full-size link for phones. */
figure.wide{ width:min(1240px, 96vw); margin-left:50%; transform:translateX(-50%); }
figcaption{ color:var(--muted); font-size:0.9rem; line-height:1.55; margin:12px auto 0; max-width:62ch; }
figcaption strong{ color:var(--blue); }
figcaption code{ background:#eef2f6; }

/* --- Prev / Next page navigation --- */
.page-nav{ display:flex; align-items:stretch; gap:12px; padding:32px 48px 44px; border-top:1px solid var(--rule); background:var(--paper); }
.page-nav a, .page-nav .nav-empty{ flex:1 1 0; display:flex; flex-direction:column; justify-content:center; padding:14px 18px; border-radius:6px; text-decoration:none; border:1px solid var(--rule); background:var(--paper); transition:border-color 0.15s ease; min-height:60px; }
.page-nav a:hover{ border-color:var(--navy); }
.page-nav .nav-empty{ border-style:dashed; opacity:0.4; }
.page-nav .nav-label{ font-family:var(--mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:3px; }
.page-nav .nav-title{ font-family:var(--display); color:var(--navy); font-weight:500; font-size:0.98rem; line-height:1.3; }
.page-nav .next{ text-align:right; }
.page-nav .home{ flex:0 0 auto; align-items:center; justify-content:center; }
.page-nav .home .nav-title{ font-size:1.3rem; }

@media (max-width:768px){
  body{ padding:0; }
  .container{ border:none; }
  header{ padding:36px 24px 24px; }
  header h1{ font-size:2rem; }
  .content{ padding:30px 24px 8px; }
  .back-nav, .ai-notice{ padding-left:24px; padding-right:24px; }
  .card-grid{ grid-template-columns:1fr; }
  .section-title{ font-size:1.5rem; }
  .page-nav{ flex-direction:column; padding:24px; }
  .page-nav .next{ text-align:left; }
}

/* Embedded video (core-material boxes, Session 2) */
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; margin: 22px 0; }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }