/* ide theme: each slide is a file open in an editor, with a tab line, a gutter and a
   status line. Loaded after the paper theme's sheets and the kit's deck.css. */

/* One family, Monaspace Neon, in regular, bold and italic. The fonts ship beside this file
   so the deck renders the same on any laptop (SIL OFL); the Nerd Font subset holds the
   status-line branch glyph only. */
@font-face { font-family: "Monaspace Neon"; src: url("fonts/MonaspaceNeon-Regular.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Monaspace Neon"; src: url("fonts/MonaspaceNeon-Bold.woff2") format("woff2"); font-weight: 700; }
@font-face { font-family: "Monaspace Neon"; src: url("fonts/MonaspaceNeon-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Nerd Symbols"; src: url("fonts/NerdSymbols-subset.woff2") format("woff2"); }

:root {
  --font-sans: "Monaspace Neon", "Nerd Symbols", ui-monospace, monospace;
  --font-mono: "Monaspace Neon", "Nerd Symbols", ui-monospace, monospace;
  --ed-bg: #131416;
  --ed-chrome: #0C0D0F;
  --ed-panel: #1A1C1F;
  --ed-line: #2A2D33;
  --ed-fg: #E4E0D8;
  --ed-mute: #8B9099;
  --ed-com: #6C717A;
  --ed-str: #A9C98B;
  --ed-num: #E0A94A;
  --ed-warn: #E0A94A;
  --ed-ok: #7BC496;
  --top: 100px;
  --gut: 92px;
  --bar: 46px;
}

deck-stage > section.s {
  background: var(--ed-bg) !important; color: var(--ed-fg) !important;
  padding: calc(var(--top) + 44px) 100px calc(var(--bar) + 36px) calc(var(--gut) + 56px);
  font-feature-settings: "calt" 1, "liga" 1;
}
.s-foot { display: none; }

/* tab line + breadcrumbs */
.ide-top { position: absolute; left: 0; right: 0; top: 0; height: var(--top); background: var(--ed-chrome); border-bottom: 1px solid var(--ed-line); z-index: 2; }
.ide-tabs { display: flex; height: 56px; }
.tab { display: flex; align-items: center; padding: 0 30px; font-size: 21px; color: var(--ed-com); border-right: 1px solid var(--ed-line); }
.tab--on { background: var(--ed-bg); color: var(--ed-fg); box-shadow: inset 0 3px 0 var(--accent); }
.tab--on::after { content: "●"; margin-left: 16px; font-size: 14px; color: var(--ed-com); }
.ide-crumbs { height: 44px; display: flex; align-items: center; gap: 10px; padding-left: 30px; font-size: 19px; color: var(--ed-com); background: var(--ed-bg); }
.ide-crumbs i { font-style: normal; color: var(--ed-line); }
.ide-crumbs b { font-weight: 400; color: var(--ed-mute); }

/* gutter */
.ide-gutter { position: absolute; left: 0; top: var(--top); bottom: var(--bar); width: var(--gut); padding-top: 44px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-end; padding-right: 26px; border-right: 1px solid var(--ed-line);
  font-size: 20px; line-height: 48px; color: #3A3E45; z-index: 2; overflow: hidden; }
.ide-gutter span:nth-child(2) { color: var(--ed-mute); }

/* status line */
.ide-status { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar); display: flex; align-items: stretch;
  background: var(--ed-chrome); border-top: 1px solid var(--ed-line); font-size: 19px; color: var(--ed-mute); z-index: 2; }
.ide-status > * { display: flex; align-items: center; }
.sl-mode { padding: 0 40px 0 26px; background: var(--accent); color: #140A05; font-weight: 700; letter-spacing: .08em;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
.sl-mode--opt, .sl-mode--spare { background: var(--ed-warn); }
.sl-mode--appx { background: var(--ed-mute); }
.sl-seg { padding: 0 22px; }
.sl-branch { color: var(--ed-fg); }
.sl-path { color: var(--ed-com); }
.sl-fill { flex: 1; }
.sl-pos { padding: 0 26px; background: var(--ed-panel); color: var(--ed-fg); gap: 14px; }
.sl-pos em { font-style: normal; color: var(--accent); }
.ide-status img { height: 24px; padding: 11px 24px; filter: brightness(0) invert(1); opacity: .8; }

/* headings: the eyebrow is a comment line, the title is the code */
.s h1 { font-weight: 700; letter-spacing: -0.03em; color: var(--ed-fg); font-size: 64px; line-height: 1.12; }
.s .eyebrow { color: var(--ed-com); font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 24px; }
.s .sub { color: var(--accent); font-weight: 400; font-size: 34px; letter-spacing: -0.01em; }
.s .sub::before { content: "→ "; color: var(--ed-com); }

/* title, section, close: a shell in the editor */
.s-title h1, .s-close h1 { font-size: 96px; }
.s-title .sub { font-size: 38px; }
.s-section { background: var(--ed-bg) !important; color: var(--ed-fg) !important; }
.s-section h1 { font-size: 132px; color: var(--ed-fg); }
.s-section .sub { color: var(--accent); opacity: 1; font-size: 40px; }
.s-section .eyebrow { font-family: var(--font-mono); color: var(--ed-mute); font-style: normal; font-size: 30px; }
.s-section .eyebrow::before { content: none; }
.prompt { color: var(--accent); }
.cursor { display: inline-block; width: .5em; height: .9em; margin-left: .12em; background: var(--accent); vertical-align: -0.08em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.s-ink { background: #0E0F11 !important; color: var(--ed-fg) !important; }
.s-ink h1 { color: var(--ed-fg); }
.s-close { background: var(--ed-bg) !important; color: var(--ed-fg) !important; }
.s-close h1 { color: var(--ed-fg); }
.s-appendix { background: var(--ed-bg) !important; }

/* text */
.para.mute { color: var(--ed-mute); }
.bul { list-style: none; padding-left: 0; }
.bul li { padding-left: 1.4em; text-indent: -1.4em; }
.bul li::before { content: "- "; color: var(--accent); white-space: pre; display: inline-block; width: 1.4em; text-indent: 0; }
.s code, .s-ink code, .s-close code { background: var(--ed-panel); color: #F0A27A; border: 1px solid var(--ed-line); padding: 0 8px; border-radius: 3px; }
.s em { color: var(--ed-mute); }
.s strong { color: #fff; }

/* tables read like aligned output */
.tbl th { color: var(--ed-com); border-bottom: 1px solid var(--ed-mute); text-transform: none; letter-spacing: 0; font-size: .78em; }
.tbl td { border-bottom: 1px dashed var(--ed-line); }
.s-ink .tbl th { color: var(--ed-com); border-bottom-color: var(--ed-mute); }
.s-ink .tbl td { border-bottom-color: var(--ed-line); }

/* code blocks become peek panels */
.code { background: var(--ed-chrome); border: 1px solid var(--ed-line); border-radius: 4px; color: var(--ed-fg); }
.code__head { background: var(--ed-panel); color: var(--ed-mute); text-transform: none; border-bottom: 1px solid var(--ed-line); }
.code__dots { display: none; }
.code .tok-key { color: var(--accent); }
.code .tok-str { color: var(--ed-str); }
.code .tok-num { color: var(--ed-num); }
.code .tok-com { color: var(--ed-com); }

/* callouts: inline diagnostics */
.callout { background: rgba(226, 90, 28, .09); color: var(--ed-fg); border-left: 4px solid var(--accent); }
.callout--soft { background: var(--ed-panel); color: var(--ed-fg); border-left: 4px solid var(--ed-mute); }
.disclosure { background: rgba(224, 169, 74, .09); color: var(--ed-fg); border-left: 4px solid var(--ed-warn); }
.disclosure__icon, .disclosure__label { color: var(--ed-warn); }
.disclosure__label { text-transform: lowercase; letter-spacing: 0; }
.disclosure__label::after { content: ":"; }

.pill { background: var(--ed-panel); color: var(--ed-fg); border: 1px solid var(--ed-line); border-radius: 3px; text-transform: none; letter-spacing: 0; }

.stat { border-top: 1px solid var(--ed-line); }
.stat__num { font-weight: 700; letter-spacing: -0.04em; }
.stat__label { color: var(--ed-mute); }
.stat--accent { border-top: 2px solid var(--accent); }

.rung { background: var(--ed-panel); border-left-color: var(--ed-line); }
.rung .k { color: var(--ed-com); }
.rung--agent { border-left-color: var(--accent); }
.rung--admin { background: var(--ed-fg); color: var(--ed-bg); border-left-color: var(--ed-fg); }
.rung--admin .k { color: #4A4F57; }

.term { background: #141215; border: 1px solid var(--ed-line); box-shadow: none; border-radius: 4px; }
.term .code__head { background: var(--ed-panel); color: var(--ed-mute); }

/* the editor chrome leaves less height than the paper deck; tall diagrams scale down to fit */
.s-body svg.diagram { max-height: 640px; }

/* nested and numbered lists, as an editor would show them */
.bul--sub { padding-left: 1.4em; font-size: .82em; color: var(--ed-mute); }
.bul--sub li::before { content: "· "; color: var(--ed-com); }
.bul--ol { counter-reset: ol; }
.bul--ol > li { counter-increment: ol; padding-left: 1.8em; text-indent: -1.8em; }
.bul--ol > li::before { content: counter(ol) ". "; width: 1.8em; }
.bul li .bul--sub li { text-indent: -1.4em; }