/* AICADEMY · shared styles (pastel paper look, matches the course decks) */
:root {
  --paper: #FBF7F0; --card: #FFFDF8; --line: #ECE4D6; --ink: #123351; --body: #3E3B48; --muted: #6A6478;
  --clay: #C9601A; --brown: #1F6FBF; --blue: #2D87E0; --orange: #FA812A; --green: #53B589; --yellow: #FEB733;
  --sky: #D3E6F2; --sage: #D2E7D6; --lav: #E0DAF3; --butter: #F6EBC4; --peach: #F8DCCB;
  --ok: #2E6B46; --bad: #B4362B; --info: #2B5C7A;
  --serif: 'Fraunces', Georgia, serif; --sans: 'Nunito Sans', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; }
a { color: var(--ink); } a:hover { color: var(--brown); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0 0 .4em; }
h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -.5px; }
h2 { font-size: clamp(26px, 3.4vw, 36px); }
h3 { font-size: 22px; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--mono); font-size: .9em; background: #EEEAF5; border-radius: 4px; padding: 1px 5px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 560px; }
.section { padding: 56px 0; }
.eyebrow { font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brown); margin: 0 0 10px; }
.muted { color: var(--muted); } .small { font-size: 14px; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.spread { justify-content: space-between; }

/* nav */
.topbar { border-bottom: 2px solid var(--line); background: var(--paper); }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { display: block; width: auto; }
.brand-mark { width: 32px; height: 32px; border-radius: 50%; background: var(--peach); display: grid; place-items: center; font-family: var(--serif); font-style: italic; color: var(--clay); font-size: 19px; letter-spacing: 0; }
.nav { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; font-weight: 600; font-size: 15px; }
.nav a { text-decoration: none; }
.nav form { margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; }

/* buttons */
.btn { display: inline-block; border: 0; cursor: pointer; text-decoration: none; text-align: center; font: inherit; font-weight: 800;
  background: var(--ink); color: var(--paper); padding: 13px 24px; border-radius: 999px; min-height: 44px; }
.btn:hover { background: #1D4A73; color: var(--paper); }
.btn-light { background: var(--card); color: var(--ink); border: 2px solid var(--line); }
.btn-light:hover { background: #F3EDE2; color: var(--ink); }
.btn-butter { background: var(--butter); color: var(--ink); } .btn-butter:hover { background: #EFE0AE; color: var(--ink); }
.btn-small { padding: 8px 16px; min-height: 36px; font-size: 14px; }
.btn-block { display: block; width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* cards and tints */
.card { background: var(--card); border: 2px solid var(--line); border-radius: 22px; padding: 26px; }
.tint { border-radius: 22px; padding: 26px; }
.sky { background: var(--sky); } .sage { background: var(--sage); } .lav { background: var(--lav); } .butter { background: var(--butter); } .peach { background: var(--peach); }
.dark { background: var(--ink); color: var(--paper); border-radius: 22px; padding: 26px; }
.dark h3, .dark p { color: var(--paper); }
.price { font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1; }
.pill { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .5px; padding: 3px 10px; border-radius: 999px; background: var(--sage); color: var(--ok); }
.pill.lock { background: #EFE8DA; color: var(--muted); } .pill.warn { background: var(--butter); color: #8A5E0E; } .pill.bad { background: var(--peach); color: var(--bad); }

/* flash and alerts */
.flash { background: var(--butter); border-radius: 14px; padding: 14px 18px; margin: 20px 0; font-weight: 600; }
.alert { background: var(--peach); color: var(--bad); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; font-weight: 600; }

/* forms */
form.stack { display: flex; flex-direction: column; gap: 14px; }
label { font-weight: 700; font-size: 15px; display: flex; flex-direction: column; gap: 6px; }
input, select, textarea { font: inherit; padding: 11px 14px; border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); min-height: 44px; }
input:focus, select:focus, textarea:focus { outline: 3px solid #C9BFE8; border-color: #9C8FD0; }
textarea { min-height: 120px; resize: vertical; }
.hint { font-weight: 400; color: var(--muted); font-size: 14px; }

/* tables */
.table-box { overflow-x: auto; border: 2px solid var(--line); border-radius: 16px; background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--sky); font-weight: 800; }
tr:last-child td { border-bottom: 0; }

/* module list */
.modules { display: flex; flex-direction: column; gap: 10px; }
.module-row { display: flex; gap: 16px; align-items: center; text-decoration: none; background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 14px 18px; }
.module-row:hover { border-color: #D8CDB8; color: var(--ink); }
.module-num { font-family: var(--serif); font-style: italic; font-size: 26px; font-weight: 600; color: var(--clay); min-width: 28px; }
.module-row .grow { flex: 1; min-width: 0; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 18px; overflow: hidden; }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #FBF7F0; }
.chapters { margin: -8px 0 24px; background: #FFFDF8; border: 2px solid #ECE4D6; border-radius: 16px; padding: 14px 18px; }
.chapters summary { cursor: pointer; font-weight: 800; }
.chapters ol { margin: 10px 0 0; padding: 0; list-style: none; columns: 2 280px; column-gap: 24px; }
.chapters li { break-inside: avoid; }
.chapters .chapter { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 4px; font: inherit; font-size: 15px; color: inherit; cursor: pointer; border-radius: 8px; min-height: 36px; }
.chapters .chapter:hover, .chapters .chapter:focus-visible { background: #F3EDE2; }
.chapters .mono { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #6A6478; margin-right: 6px; }
.video .placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #D9D4E4; text-align: center; padding: 24px; }
.files { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.files li { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 12px 16px; }

.footer { border-top: 2px solid var(--line); margin-top: 56px; }
.footer .wrap { padding-top: 24px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: 14px; color: var(--muted); }
.terminal { background: var(--ink); color: #D9D4E4; border-radius: 16px; padding: 18px 20px; font-family: var(--mono); font-size: 13px; white-space: pre-wrap; overflow-x: auto; }
