/* agent-os-onboarding/shared/styles-onboarding.css
   ─────────────────────────────────────────────────────────────────
   Extends agent-os-arch's brand tokens. Adds chapter-specific styles.
   Loaded AFTER agent-os-arch/shared/styles.css.
*/

:root {
  --callout-note:        var(--accent-gold);
  --callout-tip:         var(--accent-green);
  --callout-warn:        #e8956a;
  --callout-gotcha:      #e8956a;
  --code-bg:             #0a0e15;
  --code-line-highlight: rgba(203, 180, 122, 0.10);
  --inline-code-bg:      rgba(203, 180, 122, 0.08);
}

/* ─── Chapter header ─────────────────────────────────────────────── */
.ag-on-header {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 24px 16px;
}
.ag-on-header__badges {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.ag-on-header__chnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--accent-gold);
  font-family: 'SF Mono', monospace;
  font-size: 12px;
  font-weight: 600;
}
.ag-on-header__time {
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--bg-card);
}
.ag-on-header__subtitle {
  color: var(--accent-gold);
  font-size: 14px;
  margin: 4px 0 8px;
}
.ag-on-header__outcome {
  color: var(--text-hi);
  font-size: 14px;
  margin: 8px 0 0;
  padding: 8px 12px;
  background: var(--bg-card);
  border-left: 3px solid var(--accent-green);
  border-radius: 0 3px 3px 0;
}
.ag-on-header__outcome strong { color: var(--accent-green); }
.ag-on-prereq {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--text-lo);
}
.ag-on-prereq a {
  color: var(--accent-gold);
  text-decoration: none;
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid #1f2735;
  border-radius: 3px;
}
.ag-on-prereq a:hover { border-color: var(--accent-gold); }

/* ─── Chapter body ────────────────────────────────────────────── */
.ag-on-body { max-width: 880px; margin: 0 auto; padding: 0 24px 64px; }
.ag-on-prose { line-height: 1.7; color: var(--text-hi); margin: 16px 0; }
.ag-on-prose p { margin: 0 0 16px; }
.ag-on-prose ul, .ag-on-prose ol { margin: 0 0 16px; padding-left: 24px; }
.ag-on-prose li { margin-bottom: 4px; }
.ag-on-prose a { color: var(--accent-gold); }
.ag-on-prose .ag-on-inline-code {
  background: var(--inline-code-bg);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.92em;
  color: var(--accent-gold);
}

.ag-on-body h2 {
  margin: 32px 0 12px;
  padding-top: 8px;
  font-size: 22px;
  font-style: italic;
  font-family: Georgia, serif;
  color: var(--text-hi);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.ag-on-body h3 {
  margin: 24px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ─── Code blocks ──────────────────────────────────────────────── */
.ag-on-code {
  margin: 16px 0;
  background: var(--code-bg);
  border: 1px solid #1f2735;
  border-radius: 6px;
  overflow: hidden;
}
.ag-on-code__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid #1f2735;
  font-size: 11px;
  color: var(--text-lo);
  font-family: 'SF Mono', monospace;
}
.ag-on-code__filename { color: var(--text-hi); }
.ag-on-code__lang {
  padding: 1px 6px;
  background: var(--bg-page);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ag-on-code pre {
  margin: 0;
  padding: 12px;
  overflow-x: auto;
  font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  position: relative;
}
.ag-on-code code { color: var(--text-hi); }
.ag-on-code .ag-on-code__line-highlight {
  position: absolute; left: 0; right: 0;
  height: 1.6em;
  background: var(--code-line-highlight);
  pointer-events: none;
}

/* Highlighter token colours */
.hl-keyword { color: var(--accent-gold); }
.hl-string  { color: var(--accent-green); }
.hl-comment { color: var(--text-lo); font-style: italic; }
.hl-number  { color: #7ec8e3; }
.hl-key     { color: var(--accent-gold); }
.hl-literal { color: var(--accent-green); }
.hl-prompt  { color: var(--accent-gold); }

/* ─── Callouts ─────────────────────────────────────────────────── */
.ag-on-callout {
  margin: 20px 0;
  padding: 12px 16px;
  background: var(--bg-card);
  border-left: 3px solid var(--callout-note);
  border-radius: 0 4px 4px 0;
}
.ag-on-callout--tip    { border-left-color: var(--callout-tip); }
.ag-on-callout--warn   { border-left-color: var(--callout-warn); }
.ag-on-callout--gotcha { border-left-color: var(--callout-gotcha); }
.ag-on-callout__head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.ag-on-callout--note   .ag-on-callout__head { color: var(--callout-note); }
.ag-on-callout--tip    .ag-on-callout__head { color: var(--callout-tip); }
.ag-on-callout--warn   .ag-on-callout__head { color: var(--callout-warn); }
.ag-on-callout--gotcha .ag-on-callout__head { color: var(--callout-gotcha); }
.ag-on-callout__body { color: var(--text-hi); font-size: 14px; line-height: 1.6; }
.ag-on-callout__body p:last-child { margin-bottom: 0; }

/* ─── Diagrams + screenshots ───────────────────────────────────── */
.ag-on-figure {
  margin: 24px 0;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid #1f2735;
  border-radius: 6px;
  text-align: center;
}
.ag-on-figure img { max-width: 100%; height: auto; }
.ag-on-figure figcaption {
  margin-top: 12px;
  color: var(--text-lo);
  font-size: 12px;
  font-style: italic;
}

.ag-on-screenshot {
  margin: 24px 0;
  background: #050810;
  border: 1px solid #1f2735;
  border-radius: 6px;
  overflow: hidden;
}
.ag-on-screenshot__chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid #1f2735;
}
.ag-on-screenshot__chrome::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e8956a;
  box-shadow: 12px 0 0 #cbb47a, 24px 0 0 #5db075;
}
.ag-on-screenshot img { width: 100%; height: auto; display: block; }
.ag-on-screenshot figcaption {
  padding: 8px 12px;
  background: var(--bg-card);
  color: var(--text-lo);
  font-size: 12px;
  font-style: italic;
}

/* ─── file-paths ──────────────────────────────────────────────── */
.ag-on-file-paths {
  margin: 20px 0;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid #1f2735;
  border-radius: 6px;
}
.ag-on-file-paths__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-hi);
  margin-bottom: 8px;
}
.ag-on-file-paths__lock { font-size: 12px; color: var(--text-lo); }
.ag-on-file-paths__list { list-style: none; margin: 0; padding: 0; }
.ag-on-file-paths__item {
  display: flex; gap: 8px; align-items: center;
  padding: 4px 0;
  font-size: 13px;
}
.ag-on-file-paths__item a { color: var(--accent-gold); text-decoration: none; }
.ag-on-file-paths__item a:hover { text-decoration: underline; }
.ag-on-file-paths__item code {
  color: var(--text-lo);
  font-size: 0.85em;
}

/* ─── Exercise / capstone ─────────────────────────────────────── */
.ag-on-exercise {
  margin: 24px 0;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid #1f2735;
  border-left: 3px solid var(--accent-green);
  border-radius: 0 6px 6px 0;
}
.ag-on-exercise--capstone {
  border-left-width: 6px;
  border-left-color: var(--accent-gold);
  padding: 24px 28px;
  margin-top: 32px;
}
.ag-on-exercise__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-hi);
  margin: 0 0 8px;
}
.ag-on-exercise--capstone .ag-on-exercise__title {
  font-size: 20px;
  color: var(--accent-gold);
  font-style: italic;
  font-family: Georgia, serif;
}
.ag-on-exercise__badge {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-gold);
  background: var(--bg-page);
  padding: 2px 8px;
  border-radius: 3px;
  margin-right: 8px;
}
.ag-on-exercise ol { margin: 0; padding-left: 24px; }
.ag-on-exercise li { margin: 6px 0; line-height: 1.6; }

/* ─── Page footer ─────────────────────────────────────────────── */
.ag-on-pagefoot {
  max-width: 880px;
  margin: 32px auto 0;
  padding: 24px;
  border-top: 1px solid #1f2735;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.ag-on-pagefoot a { color: var(--accent-gold); text-decoration: none; padding: 6px 12px; border: 1px solid #1f2735; border-radius: 4px; }
.ag-on-pagefoot a:hover { border-color: var(--accent-gold); }
.ag-on-pagefoot a[hidden] { visibility: hidden; }

/* ─── Status badges (reusing agent-os-arch palette via tokens) ── */
.ag-on-status {
  display: inline-block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--bg-page);
}
.ag-on-status--live      { color: var(--status-live);     border: 1px solid var(--status-live); }
.ag-on-status--partial   { color: var(--status-partial);  border: 1px solid var(--status-partial); }
.ag-on-status--designed  { color: var(--status-designed); border: 1px solid var(--status-designed); }
.ag-on-status--missing   { color: var(--status-missing);  border: 1px solid var(--status-missing); }

/* ─── Overview index page ─────────────────────────────────────── */
.ag-on-overview {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 24px;
}
.ag-on-overview__lede {
  font-size: 16px;
  color: var(--text-hi);
  max-width: 720px;
  margin: 0 0 16px;
}
.ag-on-overview__total {
  font-size: 12px;
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 32px;
}
.ag-on-overview__cards {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.ag-on-overview__card {
  background: var(--bg-card);
  border: 1px solid #1f2735;
  border-left: 3px solid var(--accent-gold);
  border-radius: 6px;
  display: flex; align-items: center;
  transition: border-color var(--t-fast) var(--ease);
}
.ag-on-overview__card:hover { border-color: var(--accent-green); }
.ag-on-overview__card a {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; flex: 1;
  text-decoration: none;
  color: var(--text-hi);
}
.ag-on-overview__card-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-page);
  color: var(--accent-gold);
  font-family: 'SF Mono', monospace;
  font-size: 12px;
  font-weight: 600;
}
.ag-on-overview__card-meta { flex: 1; }
.ag-on-overview__card-title {
  font-family: Georgia, serif; font-style: italic;
  font-size: 16px; margin: 0 0 2px;
}
.ag-on-overview__card-subtitle {
  color: var(--accent-gold); font-size: 11px; margin: 0 0 4px;
}
.ag-on-overview__card-blurb { color: var(--text-lo); font-size: 12px; margin: 0; line-height: 1.5; }
.ag-on-overview__card-time {
  font-size: 10px;
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: auto;
}

/* ─── Mobile fallback ──────────────────────────────────────────── */
@media (max-width: 1023px) {
  .ag-on-header, .ag-on-body, .ag-on-pagefoot { padding-left: 16px; padding-right: 16px; }
  .ag-on-overview { padding: 32px 16px; }
}

/* ─── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ag-on-overview__card { transition: none; }
}