/* ===========================================================================
   Alpha Agent seminar — shared long-form reading-page styles.
   Loaded after styles.css; uses the same :root custom properties.
   =========================================================================== */

.sem-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Topic hero */
.topic-hero { max-width: var(--maxw); margin: 0 auto; padding: 44px 24px 8px; }
.topic-hero .back {
  font-family: "Helvetica Neue", Arial, sans-serif; font-size: 13px;
  color: var(--accent-2); text-decoration: none;
}
.topic-hero .back:hover { text-decoration: underline; }
.topic-hero .kicker {
  font-family: "Helvetica Neue", Arial, sans-serif; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  font-weight: 700; margin: 14px 0 6px;
}
.topic-hero h1 { color: var(--accent); font-size: 34px; line-height: 1.15; margin: 0 0 10px; }
.topic-hero .standfirst { color: var(--ink-soft); font-size: 18px; line-height: 1.6; max-width: 820px; }

/* Sections */
.sem-sec { max-width: var(--maxw); margin: 34px auto; padding: 0 24px; scroll-margin-top: 24px; }
.sem-sec p, .sem-sec li { line-height: 1.7; color: var(--ink); }
.sem-sec h2 { color: var(--accent); font-size: 26px; margin: 30px 0 6px; line-height: 1.2; }
.sem-sec h3 { color: var(--accent); font-size: 20px; margin: 24px 0 8px; }

.paper-meta {
  font-family: "Helvetica Neue", Arial, sans-serif; font-size: 13px;
  color: var(--ink-soft); margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px 16px;
}
.paper-meta a { color: var(--accent-2); text-decoration: none; }
.paper-meta a:hover { text-decoration: underline; }
.paper-meta .tag { background: #eef2f9; color: var(--accent); border-radius: 12px; padding: 2px 10px; font-weight: 600; font-size: 12px; }

/* Callouts */
.callout { border-left: 4px solid var(--accent); background: #fbfaf6; padding: 14px 18px; border-radius: 0 6px 6px 0; margin: 18px 0; font-size: 15px; color: var(--ink-soft); }
.callout.warn { border-left-color: var(--gold);  background: #fdf8ec; }
.callout.crit { border-left-color: var(--red);   background: #fbeae8; }
.callout.idea { border-left-color: var(--green); background: #f3faf3; }
.callout strong { color: var(--ink); }

/* Flow / pipeline diagrams (pure CSS) */
.flow { display: flex; flex-direction: column; gap: 0; margin: 22px 0; font-family: "Helvetica Neue", Arial, sans-serif; }
.flow.h { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
.flow .step { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 5px; padding: 11px 16px; font-size: 14px; color: var(--ink); max-width: 760px; }
.flow .step .lab { display: block; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.flow .step.alt { border-left-color: var(--gold); }
.flow .step.out { border-left-color: var(--green); }
.flow .arrow { color: var(--muted); font-size: 18px; text-align: center; padding: 4px 0; line-height: 1; }
.flow.h .arrow { padding: 0 10px; align-self: center; }
.flow.h .step { flex: 1; min-width: 150px; }

/* Code digest */
.codebox { background: #1f2733; color: #e6edf3; border-radius: 8px; padding: 18px 20px; margin: 18px 0; overflow-x: auto; font-family: "SF Mono","Menlo",Consolas,monospace; font-size: 13px; line-height: 1.55; white-space: pre; }
.codebox .c { color: #8aa0b6; }
.codebox .k { color: #d2a8ff; }
.codebox .s { color: #7ee787; }
.codebox .f { color: #79c0ff; }

/* Tables */
.sem-sec table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 13.5px; font-family: "Helvetica Neue", Arial, sans-serif; }
.sem-sec th, .sem-sec td { border: 1px solid var(--rule); padding: 8px 11px; text-align: left; }
.sem-sec th { background: var(--accent); color: #fff; font-weight: 600; }
.sem-sec tbody tr:nth-child(even) { background: #fbfaf6; }
.sem-sec td strong { color: var(--accent); }
.table-scroll { overflow-x: auto; }

/* Equations */
mjx-container { overflow-x: auto; overflow-y: hidden; max-width: 100%; }

/* Figures (original paper figures + SVG schematics) */
.figure { margin: 24px 0; text-align: center; }
.figure img { max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 6px; background: #fff; padding: 8px; box-shadow: var(--shadow-sm); }
.figure svg { max-width: 100%; height: auto; }
.figure figcaption { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 12.5px; color: var(--muted); margin-top: 8px; max-width: 820px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.figure figcaption a { color: var(--accent-2); text-decoration: none; }
.figure figcaption a:hover { text-decoration: underline; }

/* Prev / next topic nav */
.topic-nav { max-width: var(--maxw); margin: 40px auto; padding: 22px 24px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: "Helvetica Neue", Arial, sans-serif; }
.topic-nav a { text-decoration: none; color: var(--accent); font-size: 14px; max-width: 46%; }
.topic-nav a:hover { color: var(--accent-2); }
.topic-nav .nxt { text-align: right; margin-left: auto; }
.topic-nav .lab { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }

.rule-div { max-width: var(--maxw); margin: 0 auto; border: none; border-top: 1px solid var(--rule); }

.epigraph { max-width: 760px; margin: 8px auto 0; font-style: italic; color: var(--ink-soft); font-size: 17px; line-height: 1.6; text-align: center; }
.epigraph cite { display: block; font-style: normal; font-size: 13px; color: var(--muted); margin-top: 8px; font-family: "Helvetica Neue", Arial, sans-serif; }

@media (max-width: 720px) {
  .topic-hero h1 { font-size: 27px; }
  .topic-nav a { max-width: 100%; }
}