/* Briefing skin: a calm magazine layout for people who decide. Bottom line
   first, hairlines instead of glowing cards, precise type, one accent ink.
   No cartoons, mascots, emoji marks or game points. Same structure as Studio.
   Same palette and the same Agentic AI shell as Studio (player.css: header, outline
   rail, step tabs, buttons, cards, chips): the skin only changes the content column,
   its type rhythm, charts, case layout and flat content blocks with no sheen or glow.
   Applies to <html data-skin="briefing">. */

:root[data-skin="briefing"] {
  --measure: 42rem;
}
:root[data-skin="briefing"] .ia:not(:where(.sim-stage *)),
:root[data-skin="briefing"] .case:not(:where(.sim-stage *)),
:root[data-skin="briefing"] .practical:not(:where(.sim-stage *)),
:root[data-skin="briefing"] .takeaway:not(:where(.sim-stage *)),
:root[data-skin="briefing"] .discussion:not(:where(.sim-stage *)) { border-radius: 6px; box-shadow: none; background: var(--panel); }
:root[data-skin="briefing"] .lesson p:not(:where(.sim-stage *)),
:root[data-skin="briefing"] .lesson li:not(:where(.sim-stage *)) { line-height: 1.7; }

/* Numbered sections with a hairline rule, magazine style */
:root[data-skin="briefing"] .lesson:not(:where(.sim-stage *)) { counter-reset: brief; }
:root[data-skin="briefing"] .sec:not(:where(.sim-stage *)) { padding-top: 6px; border-top: 1px solid var(--line); margin-top: 30px; }
:root[data-skin="briefing"] .sec > h2:not(:where(.sim-stage *)) { margin-top: 14px; font-size: 22px; font-stretch: 94%; }
:root[data-skin="briefing"] .sec > h2:not(:where(.sim-stage *))::before {
  counter-increment: brief; content: counter(brief, decimal-leading-zero);
  display: block; margin-bottom: 6px; color: var(--accent-text);
  font: 500 11px var(--font-mono); letter-spacing: .14em;
}
:root[data-skin="briefing"] .callout--bottomline:not(:where(.sim-stage *)) { border: 0; border-top: 3px solid var(--accent); border-radius: 0; background: transparent; padding: 14px 0 4px; }
:root[data-skin="briefing"] .callout--bottomline > div > p:not(:where(.sim-stage *)) { font: 600 20px/1.45 var(--font-display); font-stretch: 94%; color: var(--ink); }
:root[data-skin="briefing"] .tip:not(:where(.sim-stage *)) { border-radius: 4px; }
:root[data-skin="briefing"] .fig .art:not(:where(.sim-stage *)),
:root[data-skin="briefing"] .sim-stage { border-radius: 4px; background: var(--panel); }
:root[data-skin="briefing"] .opt:not(:where(.sim-stage *)) { border-radius: 4px; }
:root[data-skin="briefing"] .opt .mark:not(:where(.sim-stage *)) { border-radius: 3px; }
:root[data-skin="briefing"] .step .num:not(:where(.sim-stage *)) { border-radius: 3px; background: transparent; border: 1px solid var(--accent); color: var(--accent-text); }
:root[data-skin="briefing"] .case:not(:where(.sim-stage *)) { border-left: 3px solid var(--accent); }
:root[data-skin="briefing"] .takeaway:not(:where(.sim-stage *)) { border-top: 3px solid var(--accent); }
:root[data-skin="briefing"] .score:not(:where(.sim-stage *)) { font-size: 38px; }
:root[data-skin="briefing"] .qbar span:not(:where(.sim-stage *)) { transition: none; }