/* =====================================================================
   Homepage-only styles: the painted map (now the dashboard example), the
   film, the hero robot, the climb's scoreboard, the closing cards and the
   sound switch. The brand pieces every page shares (the waving logo, the
   painted buttons, the full-height highlight) live in site.css.
   ===================================================================== */
.pm{margin:0;position:relative}
.pm-top{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.pm-title{font-family:var(--serif);font-size:21px;line-height:1.3;color:var(--ink)}
.pm-sound{flex:1;font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--muted)}
.pm-sound button{font:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:.2em}
.pm-sound button:hover{color:var(--coralD)}
/* the copy follows the pointer we have: a brush with a mouse, a swipe and a tap on a touch screen */
.pm-how-touch{display:none}
@media (hover:none){.pm-how-fine{display:none}.pm-how-touch{display:inline}}
/* the map runs on toward the edge of the screen */
.pm-stage{position:relative;aspect-ratio:2.3;margin-top:6px;margin-right:calc(16px - (100vw - min(100vw, 1300px)) / 2 - var(--gutter));
  border-radius:14px;outline:none;cursor:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
@media (hover:none){.pm-stage{cursor:auto}}
@media (max-width:1040px){.pm-stage{margin-left:calc(8px - var(--gutter));margin-right:calc(8px - var(--gutter))}}
.pm-stage:focus-visible{box-shadow:0 0 0 2px var(--ink)}
.pm-stage canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.pm-art{background:radial-gradient(closest-side,rgba(250,249,245,.97) 84%,rgba(250,249,245,0))}

.pm-foot{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-top:8px}
.pm-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.pm-ramp{display:block;width:110px;height:10px;border-radius:10px;background:linear-gradient(90deg,#d77c75,#e8a066 25%,#f2be52 50%,#b9cf8c 75%,#94c6b2);filter:url(#wcf)}
.pm-legend em{font-style:normal;color:var(--muted2)}
.pm-count{font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.pm-count b{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink)}
.pm-next{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-top:10px;min-height:40px}
.pm-hint{font-size:13.5px;color:var(--ink2);flex:1 1 240px}
.pm-hint em{font-family:var(--serif);font-size:15.5px;color:var(--ink)}
.pm-src{font-size:11.5px;color:var(--muted2);margin-top:6px}
@media (max-width:560px){.pm-ramp{width:70px}}

/* the names toggle */
.pm-names{font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:4px 11px;background:var(--card);transition:color .2s,border-color .2s,background .2s}
.pm-names:hover{color:var(--ink);border-color:var(--ink)}
.pm-names[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* the card for the country under the brush */
.pm-info{position:absolute;left:0;top:0;z-index:2;pointer-events:none;min-width:206px;max-width:270px;background:rgba(255,254,251,.96);border:1px solid var(--line2);border-radius:14px;
  padding:9px 12px 10px;box-shadow:var(--shadow-tight,0 1px 2px rgba(24,25,24,.05),0 6px 12px -8px rgba(24,25,24,.18))}
/* the country's line: life ladder by year, with the world median dashed */
.pi-line{margin-top:6px}
.pm-stage .pm-info .pi-spark{position:static;display:block;width:180px;height:54px;pointer-events:none}
.pi-change{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.35}
.pi-change b{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--ink)}
.pi-change span{display:block;font-size:11px;color:var(--muted2)}
/* docked on the stage's bottom edge (phones, and after a tap) */
.pm-info.dock{left:6px;right:6px;top:auto;bottom:6px;max-width:none;min-width:0;transform:none;display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:10px;align-items:baseline;padding:6px 10px 7px}
.pm-info.dock[hidden]{display:none}
.pm-info.dock .pi-name{grid-column:1;grid-row:1;font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.pm-info.dock .pi-score{grid-column:2;grid-row:1;margin-top:0}
.pm-info.dock .pi-score b{font-size:17px}
.pm-info.dock .pi-bar{display:none}
.pm-info.dock .pi-line{display:contents}
.pm-stage .pm-info.dock .pi-spark{grid-column:3;grid-row:1 / span 2;justify-self:end;align-self:center;width:104px;height:31px}
.pm-info.dock .pi-change{grid-column:1 / 3;grid-row:2;margin-top:0}
.pm-info.dock .pi-change span,.pm-info.dock .pi-meta{display:none}
.pi-name{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.15;color:var(--ink)}
.pi-score{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:3px}
.pi-score b{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink)}
.pi-bar{position:relative;flex:1;height:6px;border-radius:6px;background:linear-gradient(90deg,#d77c75,#e8a066 25%,#f2be52 50%,#b9cf8c 75%,#94c6b2);opacity:.75;margin-left:4px}
.pi-dot{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;border:1.5px solid var(--ink)}
.pi-meta{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.35}


/* Excalifont (Excalidraw's hand-drawn font, OFL) for handwritten notes: the correction in the question story */
@font-face{font-family:Excalifont;src:url(fonts/Excalifont-Regular.woff2) format("woff2");font-display:swap}

/* the sound switch, on: a painted mint stroke like the buttons (site.css) */
.nav-sound[aria-pressed="true"]{border-color:transparent;border-image:url(btn/mint.webp) 0 22% fill / 0 1.35em stretch;background:transparent}
/* the highlight covers the whole word, not just its lower half */
.pm-hero .h1-sub .hl::before{bottom:-.1em;height:.94em;border-radius:.22em}

/* the film: on its own wash between the climb and the scoreboard. */
section.sec.film{background:linear-gradient(180deg,var(--blueW),#eef3f2);border-top-color:var(--line2)}
section.sec.film + section.sec{border-top-color:var(--line2)}
/* the film (v2): the poster tells the course's thesis. Two notes in the left margin point into it with hand-ruled leader
   lines (their coordinates are in poster pixels, 1280 x 720, so they land on the same spots at every width); on phones the
   notes become a caption and a purple button plays it. data-yt on #filmPlayer is the YouTube id; window 'film:play' opens
   the same film in the site modal (home.js: film()). */
.film-wrap{--wrap:1400px;display:flex;flex-direction:column;align-items:center}
.film-fig{position:relative;margin:0;width:100%;max-width:1100px}
.film-player{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#dfe9ee}
.film-player iframe,.film-player video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.film-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;display:block}
.film-poster img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.film-poster:hover img{transform:scale(1.03)}
/* the play control sits in open water to the right of the big robot's head, never on its face */
.film-play{position:absolute;left:78%;top:40%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:11px;padding:13px 26px 13px 22px;
  font-size:15px;font-weight:650;color:#fffefb;white-space:nowrap;border:1px solid transparent;border-image:url(btn/ink.webp) 0 22% fill / 0 1.6em stretch;transition:transform .3s var(--spring),filter .3s}
.film-poster:hover .film-play{transform:translate(-50%,-50%) scale(1.05);filter:brightness(1.3)}
.fp-tri{width:0;height:0;border-left:12px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.film-lead{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transition:opacity .3s}
.film-lead path{fill:none;stroke:var(--ink);stroke-width:2.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease)}
.film-lead circle{fill:var(--ink);opacity:0;transition:opacity .25s}
.film-lead .fl2{transition-delay:.5s}
.film-lead circle.fl1{transition-delay:.55s}
.film-lead circle.fl2{transition-delay:1.05s}
.film-fig.drawn .film-lead path{stroke-dashoffset:0}
.film-fig.drawn .film-lead circle{opacity:1}
.film-fig.playing .film-lead{opacity:0}
.film-notes{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.7vw,24px);line-height:1.25;color:var(--ink)}
.fn{display:block}
.film-go{display:none;--stroke:url(btn/purple.webp)}
@media (min-width:1000px){
  .film-fig{width:calc(100% - clamp(210px,19vw,260px));margin-left:auto}
  .film-notes .fn{position:absolute;right:calc(102% + 8px);width:clamp(180px,16vw,230px);text-align:right}
  .film-notes .fn1{bottom:66%}
  .film-notes .fn2{top:46%}
}
@media (max-width:999px){
  .film-lead{display:none}
  .film-notes{margin-top:16px;font-size:clamp(18px,4.6vw,21px);text-align:center}
  .film-play{display:none}
  .film-go{display:inline-flex;align-items:center;justify-content:center;gap:11px;width:100%;max-width:520px;margin-top:18px;font-size:16px;padding:15px 24px}
}
@media (prefers-reduced-motion:reduce){.film-lead path,.film-lead circle{transition:none;stroke-dashoffset:0;opacity:1}}


/* the history: the timeline on the left, the scoreboard on the right, one benchmark per row (home.js: benchPanel; the board's own
   rules are in v2-middle.css). The section runs wider than the rest of the page, so the two stand well apart. */
.climb .wrap{--wrap:1480px}
.cl-wrap{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(340px,.68fr);gap:clamp(36px,5.5vw,104px);align-items:center}
.cl-main{min-width:0}
.climb-track[data-next] .cl-note{width:min(340px,66%)}
.climb-track[data-next] .cn-year{font-size:34px}


/* the example after level one: the painted world map, the full width of the page (in the hero it bled off the right edge) */
.dash .pm{max-width:1080px;margin:clamp(10px,2vw,20px) auto 0}
.dash .pm-stage{margin-left:0;margin-right:0}
/* phones: the map runs edge to edge, a little taller than the map itself, so a docked card has room */
/* sorted into a beeswarm: no brush, the names step aside */
.pm.sorting .pm-stage{cursor:default}
.pm.sorting .pm-names{visibility:hidden}
@media (prefers-reduced-motion:reduce){.pm-art{transition:opacity .45s}}
@media (max-width:760px){.dash .pm-stage{aspect-ratio:1.9;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));border-radius:0}}

/* Level one's run window keeps one height: the answer arriving at the end of a run used to grow the chat column,
   which resized the chart beside it and made the dots jump */
@media (min-width:901px){.run-body{height:560px}.run-chat{overflow-y:auto}}

/* level three, the manager: the team as robots (home.js: harness). The manager's speech bubble says the result,
   so the result pill stays only for screen readers; the rest is in v2-ending.css */
.harness[data-bots] .h-result{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}