/* Our Words Africa — design tokens from the prototype (Google-style palette), as plain CSS.
   No Tailwind runtime: the CSP allows no inline script, and the classes stay ones we define. */
:root {
  --blue-50:#F0F6FE; --blue-100:#E1EAFD; --blue-200:#C2D6FC; --blue-500:#4285F4; --blue-600:#1A73E8;
  --blue-700:#185ABC; --blue-800:#15489B;
  --green-50:#E6F4EA; --green-100:#CEEAD6; --green-600:#0F9D58; --green-700:#137333;
  --amber-50:#FEF7E0; --amber-100:#FEEFC3; --amber-500:#FBBC04; --amber-700:#E37400;
  --red-50:#FCE8E6; --red-600:#D93025; --red-700:#B3261E;
  --s0:#FFFFFF; --s50:#F8F9FA; --s100:#F1F3F4; --s200:#E8EAED; --s300:#DADCE0; --s400:#BDC1C6;
  --s500:#9AA0A6; --s600:#70757A; --s700:#5F6368; --s800:#3C4043; --s900:#202124;
  --e1:0 1px 2px 0 rgba(60,64,67,.15),0 1px 3px 1px rgba(60,64,67,.08);
  --e2:0 2px 6px 2px rgba(60,64,67,.12),0 1px 2px 0 rgba(60,64,67,.15);
  --soft:0 10px 30px -10px rgba(26,115,232,.25);
  --r-lg:16px; --r-xl:24px; --r-md:12px;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0; }
body { font-family:var(--font); background:var(--s50); color:var(--s900); line-height:1.5;
       -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--blue-700); }
a:hover { color:var(--blue-800); }
h1,h2,h3 { line-height:1.25; margin:0 0 .4em; letter-spacing:-.01em; }
h1 { font-size:1.6rem; } h2 { font-size:1.25rem; } h3 { font-size:1.05rem; }
p { margin:0 0 .75em; }
.muted { color:var(--s700); } .small { font-size:.85rem; } .tiny { font-size:.75rem; }
input,select,textarea,button { font:inherit; font-size:16px; }   /* 16px stops iOS zoom-on-focus */
:focus-visible { outline:3px solid var(--blue-200); outline-offset:2px; }

/* header */
.topbar { background:rgba(255,255,255,.96); border-bottom:1px solid var(--s200); position:sticky; top:0; z-index:40; }
.topbar .inner { max-width:1080px; margin:0 auto; padding:0 16px; height:64px; display:flex;
                 align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--s900); }
.brand .mark { width:40px; height:40px; border-radius:12px; background:var(--blue-50); border:1px solid var(--blue-200);
               display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand .name { font-weight:800; font-size:1.1rem; } .brand .name span { color:var(--blue-600); }
.brand .tag { display:block; font-size:.72rem; color:var(--s700); font-weight:500; }
.nav { display:flex; align-items:center; gap:4px; }
.nav a, .nav button.link { padding:8px 12px; border-radius:10px; text-decoration:none; color:var(--s800);
                           font-weight:600; font-size:.9rem; background:none; border:0; cursor:pointer; }
.nav a.active, .nav a:hover, .nav button.link:hover { background:var(--s100); color:var(--s900); }
.nav form { margin:0; }
.who { font-size:.8rem; color:var(--s700); padding:0 8px; }

main { flex:1; width:100%; max-width:1080px; margin:0 auto; padding:16px 16px 96px; }
@media (min-width:768px) { main { padding:28px 24px 48px; } }

/* bottom nav for phones */
.bottomnav { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--s200);
             display:flex; justify-content:space-around; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); z-index:40; }
.bottomnav a { flex:1; text-align:center; text-decoration:none; color:var(--s700); font-size:.72rem; font-weight:600;
               padding:6px 2px; border-radius:10px; min-height:48px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.bottomnav a i { font-size:1.05rem; }
.bottomnav a.active { color:var(--blue-700); background:var(--blue-50); }
@media (min-width:768px) { .bottomnav { display:none; } }
@media (max-width:767px) { .nav .wide { display:none; } }

/* surfaces */
.card { background:#fff; border:1px solid var(--s200); border-radius:var(--r-lg); padding:20px; box-shadow:var(--e1); }
.card + .card { margin-top:16px; }
.hero { background:#fff; border:1px solid var(--s200); border-radius:var(--r-xl); padding:24px; box-shadow:var(--e1);
        position:relative; overflow:hidden; }
.hero::after { content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%;
               background:var(--blue-50); filter:blur(30px); pointer-events:none; }
.hero > * { position:relative; z-index:1; }
.grid { display:grid; gap:16px; }
.grid.two { grid-template-columns:1fr; } .grid.four { grid-template-columns:repeat(2,1fr); }
@media (min-width:640px) { .grid.two { grid-template-columns:repeat(2,1fr); } .grid.four { grid-template-columns:repeat(4,1fr); } }
.stack > * + * { margin-top:16px; }
.metric { background:#fff; border:1px solid var(--s200); border-radius:var(--r-lg); padding:16px; }
.metric .label { font-size:.75rem; font-weight:700; color:var(--s700); text-transform:uppercase; letter-spacing:.04em; }
.metric .value { font-size:1.5rem; font-weight:800; margin-top:4px; }
.empty { text-align:center; padding:40px 20px; }
.empty .icon { width:64px; height:64px; border-radius:20px; background:var(--blue-50); color:var(--blue-600);
               display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:12px; }

/* pills & badges */
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:.75rem;
        font-weight:700; border:1px solid var(--blue-200); background:var(--blue-50); color:var(--blue-700); }
.pill.green { background:var(--green-50); border-color:var(--green-100); color:var(--green-700); }
.pill.amber { background:var(--amber-50); border-color:var(--amber-100); color:var(--amber-700); }
.pill.red { background:var(--red-50); border-color:#F6C8C3; color:var(--red-700); }
.pill.grey { background:var(--s100); border-color:var(--s300); color:var(--s700); }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px;
       border-radius:var(--r-md); border:1px solid transparent; font-weight:700; font-size:.95rem; cursor:pointer;
       text-decoration:none; transition:background .15s, box-shadow .15s; }
.btn.primary { background:var(--blue-600); color:#fff; box-shadow:var(--soft); }
.btn.primary:hover { background:var(--blue-700); color:#fff; }
.btn.secondary { background:#fff; color:var(--s800); border-color:var(--s300); }
.btn.secondary:hover { background:var(--s50); }
.btn.danger { background:#fff; color:var(--red-700); border-color:#F6C8C3; }
.btn.danger:hover { background:var(--red-50); }
.btn.small { min-height:40px; padding:0 14px; font-size:.85rem; }
.btn.block { width:100%; }
.actions { display:flex; flex-wrap:wrap; gap:10px; }

/* forms */
.form { max-width:560px; }
.field { margin-bottom:16px; }
.field label, .field .label { display:block; font-weight:700; font-size:.9rem; margin-bottom:6px; }
.field .hint { font-size:.8rem; color:var(--s700); margin-top:4px; }
.input, select.input, textarea.input { width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--s300);
       border-radius:var(--r-md); background:#fff; color:var(--s900); }
textarea.input { min-height:96px; }
.input:focus { border-color:var(--blue-500); outline:3px solid var(--blue-100); }
.check { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--s200);
         border-radius:var(--r-md); background:#fff; cursor:pointer; }
.check input { width:20px; height:20px; margin-top:2px; flex-shrink:0; }
.langlist { max-height:320px; overflow:auto; border:1px solid var(--s200); border-radius:var(--r-md); padding:6px; background:#fff; }
.langlist .check { border:0; padding:8px; }
.langlist .check[hidden] { display:none; }

/* alerts */
.alert { border-radius:var(--r-md); padding:12px 14px; margin-bottom:16px; border:1px solid; font-size:.92rem; }
.alert.ok { background:var(--green-50); border-color:var(--green-100); color:var(--green-700); }
.alert.error { background:var(--red-50); border-color:#F6C8C3; color:var(--red-700); }
.alert.info { background:var(--blue-50); border-color:var(--blue-200); color:var(--blue-800); }
.alert.warn { background:var(--amber-50); border-color:var(--amber-100); color:#8a4b00; }
.alert ul { margin:0; padding-left:18px; }

/* tables (stack into cards on phones) */
.table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--s200); border-radius:var(--r-lg); overflow:hidden; }
.table th, .table td { text-align:left; padding:12px; border-bottom:1px solid var(--s200); font-size:.9rem; vertical-align:top; }
.table th { background:var(--s50); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--s700); }
@media (max-width:640px) {
  .table thead { display:none; }
  .table tr { display:block; border-bottom:1px solid var(--s200); padding:8px 0; }
  .table td { display:block; border:0; padding:4px 12px; }
  .table td[data-label]::before { content:attr(data-label) ": "; font-weight:700; color:var(--s700); }
}
.mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.8rem; word-break:break-all; }
dl.kv { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:0; }
dl.kv dt { font-weight:700; color:var(--s700); font-size:.85rem; } dl.kv dd { margin:0; }
.fade { animation:fade .2s ease-out; } @keyframes fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
footer.site { text-align:center; font-size:.75rem; color:var(--s600); padding:16px; }

/* phase C/D/E additions */
progress.bar { width:100%; height:8px; appearance:none; -webkit-appearance:none; border:0; border-radius:999px; overflow:hidden; background:var(--s100); }
progress.bar::-webkit-progress-bar { background:var(--s100); border-radius:999px; }
progress.bar::-webkit-progress-value { background:var(--blue-600); border-radius:999px; }
progress.bar::-moz-progress-bar { background:var(--blue-600); border-radius:999px; }
a.card, a.metric { display:block; text-decoration:none; color:inherit; }
a.card:hover, a.metric:hover { box-shadow:var(--e2); }
.taskcard h3 { margin-top:8px; }
.item .english { font-size:1.1rem; font-weight:700; margin:4px 0 10px; }
.item label { display:block; margin-top:8px; font-weight:600; }
.item.focus { padding:28px 22px; }
.item.focus .english { font-size:1.6rem; }
.item.saving .answer { border-color:var(--amber-500); }
.item.saved .answer { border-color:var(--green-600); }
.item.error .answer { border-color:var(--red-600); }
.item + .item { margin-top:12px; }
.pager { justify-content:space-between; align-items:center; }
.finding { border-top:1px solid var(--s200); padding:10px 0; }
.finding:first-of-type { border-top:0; }
details summary { cursor:pointer; color:var(--blue-700); margin-top:6px; }
.js .js-only { display:inline-flex; } .js-only { display:none; }
.savestate.ok { color:var(--green-700); } .savestate.err { color:var(--red-700); }
.grid > .card + .card, .grid > a.card + a.card { margin-top:0; }
.btn:disabled, .btn[disabled] { opacity:.45; cursor:not-allowed; box-shadow:none; }