/* Working Well with Generative AI — single stylesheet. System fonts only; no external resources. */
:root {
  --bg: #fbfaf7; --surface: #ffffff; --surface-2: #f2f0ea; --text: #1d1d1b; --muted: #5a5a55;
  --border: #d9d6cc; --accent: #0b5d63; --accent-ink: #ffffff; --accent-soft: #e2f0ef;
  --good: #1f6b35; --good-soft: #e5f3e8; --warn: #8a4b00; --warn-soft: #fbf0df; --bad: #9b1c1c; --bad-soft: #fbe9e9;
  --judg: #4b3b8f; --judg-soft: #efecfa; --focus: #c2410c;
  --radius: 10px; --gap: 1rem; --sidebar: 20rem; --measure: 72ch;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-ar: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #141514; --surface: #1c1e1d; --surface-2: #242726; --text: #ecebe6; --muted: #b3b1a8;
    --border: #3a3d3b; --accent: #5cc3c9; --accent-ink: #0b1a1b; --accent-soft: #173335;
    --good: #7fd49a; --good-soft: #17301f; --warn: #f0b563; --warn-soft: #33260f; --bad: #f19b9b; --bad-soft: #3a1b1b;
    --judg: #bcb0f5; --judg-soft: #26213f; --focus: #ffb27a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141514; --surface: #1c1e1d; --surface-2: #242726; --text: #ecebe6; --muted: #b3b1a8;
  --border: #3a3d3b; --accent: #5cc3c9; --accent-ink: #0b1a1b; --accent-soft: #173335;
  --good: #7fd49a; --good-soft: #17301f; --warn: #f0b563; --warn-soft: #33260f; --bad: #f19b9b; --bad-soft: #3a1b1b;
  --judg: #bcb0f5; --judg-soft: #26213f; --focus: #ffb27a; color-scheme: dark;
}
* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.6 var(--font); }
:lang(ar), [lang="ar"] { font-family: var(--font-ar); line-height: 1.9; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: .5rem; top: -3rem; background: var(--accent); color: var(--accent-ink); padding: .5rem .8rem; border-radius: 6px; z-index: 100; }
.skip-link:focus { top: .5rem; }
.noscript { padding: 2rem; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { text-decoration: none; color: var(--text); font-weight: 700; flex: 1 1 auto; min-width: 0; }
.brand-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; min-width: 2.5rem; justify-content: center; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; font: inherit; cursor: pointer; padding: 0 .6rem; }
.icon-btn:hover { background: var(--surface-2); }
.search-form { display: flex; gap: .3rem; flex: 0 1 18rem; }
.search-form input { flex: 1; min-width: 0; min-height: 2.5rem; padding: 0 .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
.menu-btn { display: none; }

/* Layout */
.layout { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: calc(100vh - 3.6rem); }
.sidebar { border-right: 1px solid var(--border); background: var(--surface); padding: 1rem .75rem 3rem; overflow-y: auto; position: sticky; top: 3.6rem; height: calc(100vh - 3.6rem); font-size: .94rem; }
.main { padding: 1.5rem clamp(1rem, 4vw, 3rem) 5rem; min-width: 0; }
.main:focus { outline: none; }
.page { max-width: var(--measure); margin: 0 auto; }
.page.wide { max-width: 64rem; }
@media (max-width: 1023px) {
  .menu-btn { display: inline-flex; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 3.6rem auto 0 0; width: min(22rem, 88vw); height: auto; z-index: 30; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
  .sidebar.open { transform: none; }
  .search-form { flex-basis: 10rem; }
  .menu-label { display: none; }
}
@media (max-width: 560px) { .brand-title { font-size: .95rem; } .search-form { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Sidebar */
.nav-section { margin: 0 0 1rem; }
.nav-section > h2 { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: .8rem .5rem .3rem; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a, .nav-toggle { display: flex; gap: .5rem; align-items: baseline; padding: .35rem .5rem; border-radius: 6px; color: var(--text); text-decoration: none; width: 100%; text-align: left; font: inherit; background: none; border: 0; cursor: pointer; }
.nav-list a:hover, .nav-toggle:hover { background: var(--surface-2); }
.nav-list a[aria-current="page"] { background: var(--accent-soft); font-weight: 600; }
.nav-sub { list-style: none; margin: 0 0 .3rem .9rem; padding: 0 0 0 .5rem; border-left: 2px solid var(--border); }
.nav-sub a { font-size: .9rem; }
.tick { color: var(--good); font-weight: 700; min-width: 1rem; }
.nav-caret { margin-left: auto; color: var(--muted); }

/* Typography */
h1 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); line-height: 1.2; margin: .3rem 0 .6rem; }
h2 { font-size: 1.35rem; line-height: 1.3; margin: 2rem 0 .6rem; }
h3 { font-size: 1.1rem; margin: 1.4rem 0 .4rem; }
p { margin: .6rem 0; }
ul, ol { padding-left: 1.4rem; }
li { margin: .25rem 0; }
code { font-family: var(--mono); font-size: .92em; background: var(--surface-2); padding: .05rem .3rem; border-radius: 4px; }
pre { font-family: var(--mono); font-size: .88rem; background: var(--surface-2); padding: .9rem; border-radius: 8px; overflow-x: auto; white-space: pre; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.lede { font-size: 1.1rem; color: var(--muted); }
.crumbs { font-size: .88rem; color: var(--muted); }
.crumbs a { color: var(--muted); }

/* Badges */
.badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 1rem; }
.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.badge.level { background: var(--accent-soft); border-color: transparent; }
.badge.status-optional { background: var(--surface-2); }
.badge.status-role-specific { background: var(--judg-soft); border-color: transparent; }
.badge.access-paid, .badge.access-plan, .badge.access-varies { background: var(--warn-soft); border-color: transparent; }
.badge.done { background: var(--good-soft); color: var(--good); border-color: transparent; }

/* Cards & lists */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1rem 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .8rem; }
.unit-list { list-style: none; padding: 0; margin: .5rem 0; }
.unit-list li { display: flex; gap: .7rem; align-items: baseline; padding: .55rem .2rem; border-bottom: 1px solid var(--border); }
.unit-list .meta { margin-left: auto; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.progress { display: flex; align-items: center; gap: .6rem; }
.progress-track { flex: 1; height: .6rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.progress-fill { height: 100%; background: var(--accent); }
.progress-text { font-size: .88rem; color: var(--muted); white-space: nowrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: .45rem 1rem; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn.secondary { background: var(--surface); color: var(--accent); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }

/* Content blocks */
.callout { border-left: 5px solid var(--accent); background: var(--accent-soft); border-radius: 8px; padding: .75rem 1rem; margin: 1.1rem 0; }
.callout > .callout-title { font-weight: 700; margin: 0 0 .2rem; display: flex; gap: .4rem; }
.callout.judgment { border-color: var(--judg); background: var(--judg-soft); }
.callout.access, .callout.beforeYouPaste { border-color: var(--warn); background: var(--warn-soft); }
.callout.tip, .callout.signpost, .callout.note { border-color: var(--border); background: var(--surface-2); }
.callout-meta { font-size: .82rem; color: var(--muted); margin: .3rem 0 0; }
.figure { margin: 1.1rem 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.figure-head { display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: .86rem; font-weight: 600; }
.figure-head .spacer { flex: 1; }
.figure-body { padding: .7rem 1rem; }
.figure-body p:first-child { margin-top: 0; }
.figure.output .figure-head { background: var(--judg-soft); }
.figure.prompt .figure-head { background: var(--accent-soft); }
.small-btn { font: inherit; font-size: .82rem; padding: .2rem .6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; min-height: 2rem; }
.table-wrap { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--border); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; vertical-align: top; padding: .5rem .7rem; border-bottom: 1px solid var(--border); }
th { background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
.compare-box { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.compare-box > div { padding: .7rem 1rem; }
.compare-box > div + div { border-left: 1px solid var(--border); }
.compare-box h3 { margin: 0 0 .3rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .compare-box { grid-template-columns: 1fr; } .compare-box > div + div { border-left: 0; border-top: 1px solid var(--border); } }

/* Interactions */
textarea { width: 100%; min-height: 6.5rem; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--bg); color: var(--text); resize: vertical; }
.save-status { font-size: .8rem; color: var(--muted); min-height: 1.2em; }
.interaction { margin: 1.1rem 0; }
.interaction > label, .field-label { display: block; font-weight: 600; margin: 0 0 .35rem; }
.reveal-btn { margin: .4rem 0; }
.reveal-body { border-left: 3px solid var(--accent); padding: .2rem 0 .2rem 1rem; margin: .5rem 0 1rem; }
.question { border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; margin: 1rem 0; background: var(--surface); }
.question legend { font-weight: 600; padding: 0; float: left; width: 100%; margin: 0 0 .5rem; }
.question legend + * { clear: both; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.option { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .5rem; border-radius: 8px; cursor: pointer; }
.option:hover { background: var(--surface-2); }
.option input { margin-top: .35rem; flex: none; width: 1.1rem; height: 1.1rem; }
.feedback { margin-top: .6rem; padding: .6rem .8rem; border-radius: 8px; }
.feedback.right { background: var(--good-soft); }
.feedback.wrong { background: var(--bad-soft); }
.feedback .verdict { font-weight: 700; }
.worksheet-step { border-top: 1px solid var(--border); padding: .7rem 0; }
.answer-reveal { border: 1px dashed var(--border); border-radius: 8px; padding: .6rem .9rem; margin: .7rem 0; }
.gloss-term { font: inherit; color: inherit; background: none; border: 0; border-bottom: 2px dotted var(--accent); padding: 0; cursor: help; }
.popover { position: absolute; z-index: 60; max-width: min(24rem, 92vw); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: .8rem 1rem; }
.popover h2 { font-size: 1rem; margin: 0 0 .3rem; }
.lesson-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; flex-wrap: wrap; }
.lesson-nav a { flex: 1 1 14rem; border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem 1rem; text-decoration: none; background: var(--surface); }
.lesson-nav a .dir { display: block; font-size: .8rem; color: var(--muted); }
.lesson-nav a.next { text-align: right; }
.complete-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 2rem 0 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.banner { background: var(--warn-soft); color: var(--text); border-bottom: 1px solid var(--border); padding: .6rem 1rem; display: flex; gap: 1rem; align-items: center; }
.banner[hidden] { display: none; }
.notice { background: var(--warn-soft); border-radius: 8px; padding: .7rem 1rem; margin: 1rem 0; }
.search-result { padding: .8rem 0; border-bottom: 1px solid var(--border); }
.search-result .snip { font-size: .92rem; color: var(--muted); margin: .2rem 0 0; }
mark { background: var(--warn-soft); color: inherit; }
dialog { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); max-width: min(32rem, 92vw); padding: 1.2rem 1.4rem; }
dialog::backdrop { background: rgba(0,0,0,.45); }
.file-list { list-style: none; padding: 0; }
.file-list li { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.kbd { font-family: var(--mono); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 .35rem; }
.diag-progress { color: var(--muted); font-size: .9rem; }

@media print {
  .topbar, .sidebar, .lesson-nav, .complete-row, .reveal-btn, .banner, .skip-link, .small-btn, textarea, .save-status { display: none !important; }
  .layout { display: block; }
  .main { padding: 0; }
  .reveal-body[hidden] { display: block !important; }
  a { color: inherit; }
  body { background: #fff; color: #000; }
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }