/* learn.orism.ai. Brand roles only (brand/dist/tokens.css): colours, type, radii, motion. Logical properties
   (inline/block) so Arabic mirrors itself; code and prompts stay left-to-right. No inline styles anywhere (CSP). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-canvas); color: var(--color-text);
  font-family: var(--type-body-family); font-size: var(--type-body-size); line-height: var(--type-body-leading); font-weight: var(--type-body-weight);
  overflow-wrap: anywhere;
}
:lang(ar) { font-family: "Alyamama", var(--type-body-family); }
a { color: var(--color-link); }
:lang(ar) a { text-underline-offset: .4em; }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.wrap, #top .nav { max-width: 46rem; margin-inline: auto; padding-inline: 1rem; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding-block: .75rem; }
.nav__brand { font-family: var(--type-heading-family); font-weight: 700; color: var(--color-text-brand); text-decoration: none; }
.nav__link { color: var(--color-text); }
.nav__space { flex: 1; }
.nav__lang { font: inherit; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: .25rem .6rem; color: var(--color-text); cursor: pointer; }
.display { font-family: var(--type-display-family); font-size: clamp(1.75rem, 5vw, var(--type-display-size)); line-height: var(--type-display-leading); margin-block: 1rem .5rem; }
h2 { font-family: var(--type-heading-family); font-size: var(--type-heading-size); line-height: var(--type-heading-leading); margin-block: 1.25rem .5rem; }
.eyebrow { font-family: var(--type-eyebrow-family); font-size: var(--type-eyebrow-size); color: var(--color-text-muted); margin: 0; }
.meta { color: var(--color-text-muted); font-size: var(--type-caption-size); }
.lead { font-size: 1.125em; }
.button {
  display: inline-block; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  background: var(--color-action-primary); color: var(--color-text-on-action); border: 1px solid transparent;
  border-radius: var(--radius-control); padding: .55rem 1rem; margin-block: .25rem; margin-inline-end: .5rem;
  transition: background var(--duration-quick) var(--ease-move);
}
.button:hover { background: var(--color-action-primary-hover); }
.button--quiet { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.button--quiet:hover { background: var(--color-surface-sunken); }
.button--danger { background: var(--color-danger); color: var(--color-text-on-accent); }
.button.is-on { background: var(--color-success); }
.notice { background: var(--color-info-soft); border-radius: var(--radius-card); padding: .75rem 1rem; }
.notice--preview { background: var(--color-warning-soft); }
.card { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); padding: 1rem; }
.tracks { list-style: none; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.track { border-block-start: 4px solid var(--track); }
.track__name { margin-block-start: 0; color: var(--track-text); }
.track__courses { list-style: none; padding: 0; margin: 0; }
.track__courses li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.course-link { font-weight: 600; }
.tier { font-size: var(--type-caption-size); border-radius: var(--radius-control); padding-inline: .4rem; }
.tier--free { background: var(--color-tier-free-soft); color: var(--color-tier-free); }
.tier--paid { background: var(--color-tier-paid-soft); color: var(--color-tier-paid); }
.track--basics { --track: var(--color-track-basics-bright); --track-text: var(--color-track-basics-text); }
.track--prompts { --track: var(--color-track-prompts-bright); --track-text: var(--color-track-prompts-text); }
.track--tools { --track: var(--color-track-tools-bright); --track-text: var(--color-track-tools-text); }
.track--agents { --track: var(--color-track-agents-bright); --track-text: var(--color-track-agents-text); }
.track--skills { --track: var(--color-track-skills-bright); --track-text: var(--color-track-skills-text); }
.track--local { --track: var(--color-track-local-bright); --track-text: var(--color-track-local-text); }
.switch, .check { display: flex; gap: .5rem; align-items: flex-start; margin-block: .5rem; cursor: pointer; }
.switch input, .check input { inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: .2rem; accent-color: var(--color-accent); flex: none; }
.lessons { padding-inline-start: 1.25rem; }
.lesson-row { margin-block: .4rem; }
.lesson-row .meta { margin-inline-start: .5rem; }
.lesson-row a, .lesson-row .meta, .eyebrow a { unicode-bidi: isolate; }
.badge { margin-inline-start: .5rem; color: var(--color-success); }
.part { border-block-start: 1px solid var(--color-border-subtle); margin-block-start: 1.5rem; }
.stage { background: var(--color-stage); color: var(--color-text-on-accent); border-radius: var(--radius-panel); padding: 1.25rem; min-block-size: 7rem; display: flex; align-items: center; }
.stage__frame { margin: 0; font-size: 1.15em; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-block: .5rem; }
.frames { inline-size: 6rem; accent-color: var(--color-progress-fill); }
.transcript summary, details summary { cursor: pointer; color: var(--color-link); }
pre.code { position: relative; unicode-bidi: plaintext; text-align: start; background: var(--color-prompt-surface); border-radius: var(--radius-card); padding: 1rem; padding-inline-end: 4.75rem; overflow-x: auto; white-space: pre-wrap; font-family: var(--type-code-family); font-size: var(--type-code-size); }
/* learn/render.mjs marks every prompt dir="ltr"; on an Arabic page the box runs right to left, so the copy button sits
   where Arabic lines end. Each line still takes its own direction (plaintext above). */
:root[dir="rtl"] pre.code { direction: rtl; }
pre.code .copy { position: absolute; inset-block-start: .4rem; inset-inline-end: .4rem; font: inherit; font-size: .8em; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); cursor: pointer; }
.checks { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); margin-block: .75rem; }
.field { display: grid; gap: .25rem; margin-block: .75rem; }
.field textarea, .field input, .block input[type=text] { font: inherit; inline-size: 100%; padding: .5rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); }
.reveal { background: var(--color-response-surface); border-radius: var(--radius-card); padding: .5rem 1rem; margin-block: .5rem; }
.done { color: var(--color-success); font-weight: 600; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
.facts dt, .terms dt { font-weight: 600; }
.facts dd, .terms dd { margin: 0; }
.facts dd p { margin: 0; }
.terms dt { direction: ltr; unicode-bidi: isolate; }
:root[dir="rtl"] .terms dt { text-align: right; }
.terms dd + dt { margin-block-start: .75rem; }
.block--danger { border: 1px solid var(--color-danger-soft); border-radius: var(--radius-card); padding: 1rem; margin-block-start: 2rem; }
.dialog { border: none; border-radius: var(--radius-panel); box-shadow: var(--shadow-overlay); inline-size: min(32rem, 92vw); background: var(--color-surface); color: var(--color-text); }
.dialog::backdrop { background: var(--color-overlay); }
.foot { color: var(--color-text-muted); font-size: var(--type-caption-size); padding-block: 2rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }