/* Per-deck overrides for slidesExample.lean.
   Everything here is layered ON TOP of the shared leanTheme/lean.css, so put
   only what's specific to THIS deck — most importantly the header name.
   (Loaded via extraCss in Main.lean; read at runtime → edit + re-run
   `lake exe versoslide`, no rebuild.) */

:root {
   --project: "Lean for Software";   /* the name shown at the top-left of every slide */
   --name-w: 5.8em;     /* where the blue rule starts (bump if the name is longer) */

  /* optional: PLAIN text above the blue rule, right-aligned (name / handle /
     repo / paper ref). Not clickable — for links use :::class "links" on a
     slide. Delete this line to hide it. */
}

/* add any other per-deck tweaks below, e.g.:
   :root { --lean-blue: #6d28d9; }   ← recolour just this deck
*/

.reveal section[data-state="title"] {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   padding: 8.5vh 7vw 5vh;
}

.reveal section[data-state="title"]::before {
   margin-bottom: 1em;
}

.reveal section[data-state="title"] h2 {
   margin-bottom: 0.25em;
}

.reveal .subheader {
   font-size: 1.35em;
   line-height: 1.35;
   max-width: 44ch;
   margin-bottom: 1.8em;
}

.reveal .byline {
   font-size: 1.06em;
   line-height: 1.4;
   margin-bottom: 0.16em;
}

.reveal .byline + .event,
.reveal .subheader + .event {
   margin-top: 1.35em;
   padding-top: 0.85em;
}

.reveal .event {
   font-size: 0.9em;
}

.reveal ul,
.reveal ol {
   font-size: 0.92em;
}

/* Numbered step list — always fully visible (NOT reveal.js fragments; every
   point should read as one static, numbered sequence, not a click-through). */
.reveal .steps {
   list-style: none;
   margin: 0.6em 0;
   padding: 0;
   font-size: 0.95em;
   line-height: 1.5;
   counter-reset: step-counter;
}

.reveal .steps li {
   position: relative;
   counter-increment: step-counter;
   padding: 0.05em 0 0.05em 2.3em;
   margin-bottom: 0.6em;
   opacity: 1;
}

.reveal .steps li::marker {
   content: none;
}

.reveal .steps li::before {
   content: counter(step-counter);
   position: absolute;
   left: 0;
   top: 0.05em;
   width: 1.6em;
   height: 1.6em;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, var(--lean-blue), var(--lean-teal));
   color: #fff;
   font-weight: 700;
   font-size: 0.7em;
   line-height: 1;
}

.reveal .key-box {
   box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

/* Nesting Venn: Math and CS are two big overlapping circles; AI is a small
   circle fully inside CS (biased toward the Math∩CS edge); Lean is a tiny
   circle mostly inside the Math∩CS overlap, touching AI a little.
   Each <p> is a flex column: an empty ::before circle on top, the label
   BELOW it (outside the coloured fill) — labels no longer sit on the circle
   itself. left/top on each <p> are the circle's CENTER (translate(-50%,-50%)
   recenters both the circle and its label under that point). */
.reveal .venn {
   position: relative;
   width: min(64vw, 720px);
   height: 42vh;
   margin: 0.8em auto 0.3em;
}

.reveal .venn > p {
   position: absolute;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.3em;
   margin: 0;
   padding: 0;
   max-width: 11em;
   text-align: center;
   font-weight: 700;
   font-size: 0.85em;
   color: var(--ink);
}

.reveal .venn > p::before {
   content: "";
   display: block;
   border-radius: 50%;
   border: 2px solid rgba(15, 23, 42, 0.1);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
   mix-blend-mode: multiply;
}

/* 1 — Mathematics: big circle, left */
.reveal .venn > p:nth-child(1) {
   left: 32%;
   top: 40%;
   transform: translate(-50%, -50%);
   z-index: 1;
}
.reveal .venn > p:nth-child(1)::before {
   width: 27vh;
   height: 27vh;
   background: rgba(59, 130, 246, 0.22);
}

/* 2 — Computer Science: big circle, overlapping Math on the right */
.reveal .venn > p:nth-child(2) {
   left: 50%;
   top: 40%;
   transform: translate(-50%, -50%);
   z-index: 1;
}
.reveal .venn > p:nth-child(2)::before {
   width: 27vh;
   height: 27vh;
   background: rgba(8, 145, 178, 0.22);
}

/* 3 — AI: small circle, fully inside CS, biased toward the Math∩CS edge */
.reveal .venn > p:nth-child(3) {
   left: 47%;
   top: 40%;
   transform: translate(-50%, -50%);
   z-index: 2;
   max-width: 6em;
   font-size: 0.75em;
}
.reveal .venn > p:nth-child(3)::before {
   width: 13vh;
   height: 13vh;
   background: rgba(245, 158, 11, 0.4);
}

/* 4 — Lean: tiny circle, mostly in the Math∩CS overlap, touching AI */
.reveal .venn > p:nth-child(4) {
   left: 41%;
   top: 40%;
   transform: translate(-50%, -50%);
   z-index: 3;
   max-width: 4.5em;
   font-size: 0.68em;
   font-weight: 800;
   color: var(--lean-blue);
}
.reveal .venn > p:nth-child(4)::before {
   width: 7.2vh;
   height: 7.2vh;
   background: rgba(255, 255, 255, 0.95);
   border: 2px solid var(--lean-blue);
   box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
   mix-blend-mode: normal;
}

.reveal .impact-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.9em;
   margin: 0.55em 0 0.35em;
}

/* odd 5th card (last, alone in its row) spans full width instead of
   sitting lopsided next to an empty column */
.reveal .impact-grid > .impact-card:last-child:nth-child(odd) {
   grid-column: 1 / -1;
}

.reveal .impact-card {
   position: relative;
   background: rgba(248, 250, 252, 0.9);
   border: 1px solid rgba(15, 23, 42, 0.12);
   border-left: 3px solid var(--lean-teal);
   border-radius: 10px 14px 14px 10px;
   padding: 0.78em 0.9em;
   box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.reveal .impact-card .kicker {
   display: block;
   color: var(--lean-teal);
   font-size: 0.62em;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   margin-bottom: 0.35em;
}

.reveal .impact-card strong {
   display: block;
   color: var(--lean-blue);
   margin-bottom: 0.3em;
   font-size: 0.98em;
}

.reveal .impact-card > span {
   display: block;
   color: var(--ink);
   font-size: 0.78em;
   line-height: 1.45;
}

.reveal .image-frame {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 0.45em;
}

.reveal .image-frame img {
   display: block;
   max-width: 100%;
   max-height: 68vh;
   width: auto;
   height: auto;
   object-fit: contain;
   border-radius: 14px;
   box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
}

.reveal section[data-state="title"] .subheader {
   max-width: 44ch;
}