/* ==========================================================================
   PSIML 11 brand kit — extracted from PSIML11-Lecture-Template.potx
   --------------------------------------------------------------------------
   Design canvas is 1280x720 px, which is exactly the PPTX slide box
   (12192000 x 6858000 EMU / 9525 = px at 96 dpi).  Every coordinate below is
   therefore the SAME NUMBER as in the source XML, and font sizes are written
   in CSS pt, which at this canvas size matches PowerPoint pt 1:1.
   To port another slide: read <a:off>/<a:ext> from the XML, divide by 9525,
   drop the numbers into --x/--y/--w/--h.  No other conversion needed.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Carlito is metric-compatible with Calibri, Caladea with Cambria: same
   advance widths, so nothing reflows relative to the original deck.
   latin-ext is loaded separately because it carries č ć š ž đ.
   Real Calibri/Cambria are listed first so a Windows machine uses them. */

@font-face {
  font-family: "Carlito"; font-style: normal; font-weight: 400; font-display: block;
  src: url("fonts/carlito-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Carlito"; font-style: normal; font-weight: 400; font-display: block;
  src: url("fonts/carlito-400-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Carlito"; font-style: normal; font-weight: 700; font-display: block;
  src: url("fonts/carlito-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Carlito"; font-style: normal; font-weight: 700; font-display: block;
  src: url("fonts/carlito-700-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caladea"; font-style: normal; font-weight: 400; font-display: block;
  src: url("fonts/caladea-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caladea"; font-style: normal; font-weight: 400; font-display: block;
  src: url("fonts/caladea-400-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caladea"; font-style: normal; font-weight: 700; font-display: block;
  src: url("fonts/caladea-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caladea"; font-style: normal; font-weight: 700; font-display: block;
  src: url("fonts/caladea-700-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------
   Palette is what the slides actually paint with. It is NOT the theme1.xml
   clrScheme, which is the untouched stock Office palette (4472C4 etc.) and
   is never referenced by any shape in the deck. */

:root {
  /* Backgrounds — the deck only ever uses these two. */
  --psiml-bg-dark:   #0C2233;   /* title, section dividers, emphasis slides */
  --psiml-bg-light:  #F2F8F7;   /* every content slide */

  /* Ink */
  --psiml-ink:       #0C2233;   /* headings on light */
  --psiml-body:      #23404F;   /* body copy on light */
  --psiml-muted:     #5A7484;   /* footers, slide numbers */
  --psiml-on-dark:   #FFFFFF;
  --psiml-sub-dark:  #95E1D9;   /* subtitle on dark */
  --psiml-foot-dark: #3A5B72;   /* footer on dark */

  /* Accents */
  --psiml-primary:   #146B93;   /* teal-blue: rules, edges, links */
  --psiml-orange:    #F19F22;   /* wordmark, highlight nodes */
  --psiml-mint:      #6EC7BF;
  --psiml-mint-pale: #95E1D9;
  --psiml-panel:     #E3EEF1;   /* light panel / card fill */

  /* Geometry */
  --psiml-margin:    67px;      /* left margin, identical on every slide */

  /* Type stacks — real MS fonts first (Windows), metric clones next. */
  --psiml-head: Cambria, Caladea, Georgia, serif;
  --psiml-text: Calibri, Carlito, "Segoe UI", sans-serif;
  --psiml-mono: "Cascadia Mono", Consolas, "Courier New", monospace;
}

/* --- Deck plumbing -------------------------------------------------------
   Slides are authored at a fixed 1280x720 and scaled to the viewport with a
   transform, so authoring coordinates never depend on the display. The
   scale factor is set by the tiny script in index.html (CSS alone cannot
   turn a viewport ratio into the unitless number transform: scale() needs). */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}

/* Mobile browsers will happily let a 1280px-wide layout box widen the visual
   viewport even with overflow:hidden; pinning body to the viewport stops the
   deck from being pannable/half-visible on a phone. */
body {
  position: fixed;
  inset: 0;
  width: 100%;
  /* 'manipulation' keeps pinch-zoom (essential for reading dense chart slides
     on a phone) while dropping the 300ms double-tap-zoom delay. */
  touch-action: manipulation;
}

.deck {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1280px;
  height: 720px;
  transform: translate(-50%, -50%) scale(var(--deck-scale, 1));
  transform-origin: center center;
}

.slide {
  position: absolute;
  inset: 0;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  font-family: var(--psiml-text);
  font-size: 16pt;
  line-height: 1.2;          /* PowerPoint's default single spacing */
  display: none;
}
.slide[data-active] { display: block; }

.slide--dark  { background: var(--psiml-bg-dark);  color: var(--psiml-on-dark); }
.slide--light { background: var(--psiml-bg-light); color: var(--psiml-body); }

/* Absolute placement helper. Feed it the PPTX numbers:
   <div class="at" style="--x:67; --y:163; --w:729; --h:182">
   Omit --h to let the box size to its content: var(--h) is then invalid at
   computed-value time, the declaration drops, and height falls back to auto. */
.at {
  position: absolute;
  left:   calc(var(--x, 0) * 1px);
  top:    calc(var(--y, 0) * 1px);
  width:  calc(var(--w, 0) * 1px);
  height: calc(var(--h) * 1px);
}

/* --- Furniture ----------------------------------------------------------- */

.logo { position: absolute; display: block; }
.logo--title   { left: 67px;   top: 60px; width: 67px;  height: 67px; }
.logo--content { left: 1169px; top: 44px; width: 48px;  height: 48px; }

.wordmark {
  position: absolute;
  left: 144px; top: 60px;
  width: 288px; height: 67px;
  display: flex; align-items: center;
  font: 700 15pt/1.2 var(--psiml-text);
  letter-spacing: .04em;
  color: var(--psiml-orange);
}

.footer {
  position: absolute;
  left: var(--psiml-margin);
  width: 768px; height: 29px;
  font-size: 10pt;
  color: var(--psiml-muted);
}
.footer--title   { top: 638px; font-size: 11pt; color: var(--psiml-foot-dark); }
.footer--content { top: 658px; }

.slide-number {
  position: absolute;
  left: 1190px; top: 658px;
  width: 38px; height: 29px;
  text-align: right;
  font-size: 10pt;
  color: var(--psiml-muted);
}

/* --- Type ---------------------------------------------------------------- */

.h1-title {
  margin: 0;
  font: 700 44pt/1.1 var(--psiml-head);
  color: var(--psiml-on-dark);
}
.subtitle-title {
  margin: 0;
  font-size: 18pt;
  color: var(--psiml-sub-dark);
}
.presenters {
  margin: 0;
  font-size: 18pt;
  color: var(--psiml-on-dark);
}
.nav-hint {
  margin: 0;
  font-size: 13pt;
  color: var(--psiml-sub-dark);
}
.nav-hint .key {
  display: inline-block;
  padding: .05em .45em;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 11pt;
  line-height: 1.4;
}

.presenters .affil {
  display: block;
  margin-top: .35em;
  font-size: 16pt;
  color: var(--psiml-sub-dark);
}

.h1-content {
  margin: 0;
  font: 700 32pt/1.15 var(--psiml-head);
  color: var(--psiml-ink);
}

.lead   { margin: 0 0 22px; font-size: 18pt; color: var(--psiml-body); }
.body   { margin: 0; font-size: 16pt; color: var(--psiml-body); }
.body p { margin: 0 0 14px; }
.body strong { color: var(--psiml-ink); }

/* Card / panel, the deck's one recurring container treatment. */
.panel {
  background: var(--psiml-panel);
  border-radius: 12px;
  padding: 20px 24px;
}
.panel--accent { border-left: 4px solid var(--psiml-primary); }

.stat        { font: 700 40pt/1 var(--psiml-head); color: var(--psiml-primary); }
.stat-label  { margin-top: 6px; font-size: 12pt; color: var(--psiml-muted); }

/* --- Added for slides 6/13-16 (Lazar's §3/§6 sections) -------------------
   Reuses the existing --psiml-* tokens only; no new colors introduced. */

.arch-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.arch-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--psiml-panel);
  border-radius: 12px;
  padding: 18px 28px;
  font: 700 20pt/1.2 var(--psiml-head);
  color: var(--psiml-ink);
}
.arch-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--psiml-primary);
  color: #fff;
  font: 700 16pt var(--psiml-text);
}

.slide-img {
  display: block;
}

/* Plain bullet list — slide 17 (red teaming intro). Deliberately NOT the
   arch-list treatment (no boxes/numbered circles): bold serif lines with a
   short teal accent bar, echoing .panel--accent's left-border motif used
   elsewhere in the deck rather than inventing a new visual language. */
.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.plain-list li {
  position: relative;
  padding-left: 34px;
  font: 700 25pt/1.35 var(--psiml-head);
  color: var(--psiml-ink);
}
.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 5px;
  height: 1em;
  border-radius: 3px;
  background: var(--psiml-primary);
}

/* Orange variant — slide 20 "what's next" half, to read as a distinct group
   from the teal "takeaways" half above it. */
.plain-list--next li::before {
  background: var(--psiml-orange);
}

/* Small eyebrow label above each plain-list group (slide 20). */
.group-label {
  margin: 0 0 14px;
  font: 700 14pt/1 var(--psiml-text);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--psiml-muted);
}
.group-label--accent  { color: var(--psiml-primary); }
.group-label--accent2 { color: var(--psiml-orange); }

.panel-heading {
  font: 700 15pt/1.2 var(--psiml-head);
  color: var(--psiml-ink);
  margin-bottom: 10px;
}

/* Inline code — used on slide 17 affordances (cli.py --help, AGENTS.md, etc.).
   Monospace, sized down to sit inside 13pt body copy. */
code {
  font: 12pt/1.3 "DejaVu Sans Mono", "Consolas", monospace;
  background: rgba(20, 107, 147, .10);
  padding: 0 .25em;
  border-radius: 3px;
  color: var(--psiml-ink);
}

/* --- Print / PDF export --------------------------------------------------
   Chrome: Ctrl+P, landscape, margins none, background graphics on. */
@page { size: 1280px 720px; margin: 0; }

@media print {
  /* body is position:fixed on screen (mobile viewport pinning); a fixed body
     clips paged output to a single page, so undo it for print. */
  html, body { overflow: visible; background: #fff; position: static; }
  .deck { position: static; transform: none; width: 1280px; height: auto; }
  .slide { position: relative; display: block; break-after: page; }
}

/* --- On-screen navigation (phones, and anything without a keyboard) ------- */

.deck-nav {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: none;
  gap: 10px;
  z-index: 10;
}
.deck-nav button {
  width: 44px; height: 44px;
  /* These sit on the black letterbox around the deck, so they need real
     contrast against #000 rather than a dark translucent fill. */
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: 400 24px/1 var(--psiml-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (pointer: coarse), (max-width: 900px) {
  .deck-nav { display: flex; }
}
@media print {
  .deck-nav { display: none !important; }
}