/* DNEG AI Roadmap: present.css
   Present mode (#/present and #/present/<n>, js/present.js; docs/plans/PLAN.md section 11, WP17): the briefing as full-viewport scenes.
   html.present-on switches the site chrome off. .pr-deck is one fixed layer: the HUD on top, the scene in .pr-stage (which scrolls
   when a lens page is long), a progress bar under it, and the panels (speaker notes, all scenes, keys) over the scene. The look is the
   Gate LLM presentation's HUD, notes drawer and scene overview. Colors come from tokens.css only, so the light theme works unchanged. */

/* ------------------------- 1. site chrome off ------------------------- */
html.present-on { --topbar-h: 0px; }                       /* sticky offsets inside a scene start at the top of the stage */
html.present-on .topbar, html.present-on .filterbar, html.present-on .rail, html.present-on .footer,
html.present-on .skip, html.present-on #help { display: none !important; }
html.present-on, html.present-on body { overscroll-behavior: none; }   /* a swipe is ours: no history gesture, no pull to refresh */
html.present-on body { padding-top: 0; overflow: hidden; }
html.present-on .layout { padding: 0; max-width: none; }

/* ------------------------- 2. deck, HUD, stage ------------------------- */
.pr-deck { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; color: var(--fg); }

.pr-hud { position: relative; z-index: 6; flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; min-height: 44px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 20px 8px; font-size: .78rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.pr-brand { flex: 0 0 auto; font-weight: 600; color: var(--fg); white-space: nowrap; }
.pr-nav { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; }
.pr-count { padding: 0 6px; color: var(--fg); white-space: nowrap; }
.pr-step { border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
  padding: 0 8px; font-size: 1.2rem; line-height: 1.3; }
.pr-step:hover:not(:disabled) { color: var(--fg); border-color: var(--line); }
.pr-step:disabled { opacity: .35; cursor: default; }
.pr-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .86rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.pr-spacer { flex: 1 1 0; }
.pr-clock { flex: 0 0 auto; font-family: var(--mono); letter-spacing: 0; text-transform: none; }
.pr-pill { flex: 0 0 auto; }
.pr-filters, .pr-filters:hover { color: var(--accent2); border-color: var(--accent); }

.pr-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;                           /* a sideways swipe is next and back, not a scroll or a history gesture */
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.pr-stage:focus { outline: none; }
.pr-page { width: min(var(--maxw-layout), 100%); min-width: 0; margin: 0 auto; padding: 8px 28px 56px; }

/* a lens's own "Filter this page" button opens the filter bar, which stays hidden while presenting */
.pr-page .lk-headtools, .pr-page .lk-filterbtn { display: none; }

.pr-fade { position: absolute; left: 0; right: 0; bottom: 3px; z-index: 2; height: 64px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--bg)); transition: opacity .25s var(--ease); }
.pr-fade.on { opacity: 1; }

.pr-progress { position: relative; z-index: 3; flex: 0 0 3px; }
.pr-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s var(--ease); }

/* a scene comes in from the side it was reached from */
.pr-page.pr-in-fade { animation: pr-in-fade .45s var(--ease) backwards; }   /* backwards, not both: nothing is left over once it ends, so the */
.pr-page.pr-in-next { animation: pr-in-next .4s var(--ease) backwards; }    /* page never keeps a transform, which would trap fixed children */
.pr-page.pr-in-prev { animation: pr-in-prev .4s var(--ease) backwards; }
@keyframes pr-in-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pr-in-next { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes pr-in-prev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

/* scene 1: the splash's own rules (scoped under .splash) drawn inside the page instead of over the viewport */
.pr-page .splash.splash-embed { display: block; position: static; inset: auto; z-index: auto; overflow: visible; background: none; }
.pr-page .splash-embed .s-inner { width: 100%; padding: 4px 0 0; transition: none; }
.pr-page .splash-embed .s-foot { padding-top: 1.4rem; }

/* ------------------------- 3. panels ------------------------- */
.pr-notes { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: min(380px, 90vw); overflow: auto; padding: 56px 20px 20px;
  font-size: .95rem; background: var(--scrim); border-left: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  visibility: hidden; transform: translateX(100%); transition: transform .3s var(--ease), visibility 0s .3s; }
.pr-notes.open { visibility: visible; transform: none; transition: transform .3s var(--ease), visibility 0s; }
.pr-notes h2 { margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent2); }
.pr-nt { margin-bottom: .7rem; font-size: .8rem; color: var(--muted); }
.pr-notes p { margin-bottom: .8rem; font-weight: 300; color: var(--fg); }
.pr-notes p.pr-nonote { color: var(--muted); }

.pr-panel { position: absolute; inset: 0; z-index: 8; overflow: auto; padding: 70px 30px 30px; background: var(--scrim);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pr-ph { max-width: var(--maxw); margin: 0 auto .9rem; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; max-width: var(--maxw); margin: 0 auto; }
.pr-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.pr-tile:hover { border-color: var(--accent); }
.pr-tile.cur { border-color: var(--accent2); }
.pr-tk { font-size: .75rem; color: var(--accent2); }
.pr-tt { font-weight: 600; }
.pr-tq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .8em; line-height: 1.4; color: var(--muted); }

.pr-help .box { max-width: 560px; margin: 0 auto; }
.pr-help .box:focus { outline: none; }
.pr-help dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: .8rem 0 0; }
.pr-help dt { text-align: right; white-space: nowrap; }
.pr-help dd { margin: 0; color: var(--muted); }

.pr-toast { position: absolute; left: 50%; bottom: 24px; z-index: 9; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel2); font-size: .85rem; opacity: 0; transform: translate(-50%, 20px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease); }
.pr-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------- 4. responsive, motion, print ------------------------- */
@media (max-width: 900px) {
  .pr-brand { display: none; }
  .pr-hud { gap: .6rem; padding-left: 12px; padding-right: 12px; }
  .pr-page { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 640px) {
  .pr-pill.opt { display: none; }
  .pr-help dl { grid-template-columns: 1fr; gap: 2px; }
  .pr-help dt { text-align: left; margin-top: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-page { animation: none !important; }
  .pr-notes, .pr-progress i, .pr-toast, .pr-fade { transition: none; }
}
@media print {
  html.present-on body { overflow: visible; }
  .pr-deck { position: static; display: block; }
  .pr-stage { overflow: visible; }
  .pr-page { padding: 0; }
  .pr-hud, .pr-progress, .pr-fade, .pr-notes, .pr-panel, .pr-toast { display: none !important; }
}

/* The executive pass (WP20): a scene is the page head and its brief; supporting detail stays on the full page. */
html.present-on .lk-fold, html.present-on .lk-more, html.present-on .lk-jump, html.present-on .lk-see, html.present-on .lk-expandall,
html.present-on .lk-headtools, html.present-on .lk-back { display: none !important; }
.pr-full { margin: 1.2rem 0 0; font-size: 1rem; }
.pr-full a { color: var(--accent2); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent2) 40%, transparent); }
.pr-full a:hover { border-bottom-color: var(--accent2); }
html:not(.present-on) .pr-full { display: none; }
/* A projected brief reads from the back of the room. */
html.present-on .pr-page .lk-brief { margin-top: 1.4rem; }
html.present-on .pr-page .lk-answer { font-size: clamp(1.35rem, 2.1vw, 2.05rem); max-width: 72rem; }
html.present-on .pr-page .lk-fv { font-size: clamp(1.8rem, 3vw, 2.8rem); }
html.present-on .pr-page .lk-fl { font-size: clamp(.95rem, 1.2vw, 1.15rem); }
html.present-on .pr-page .lk-fs { font-size: clamp(.8rem, 1vw, .95rem); }
/* the brief as a map (K.brief with a hub): sized for the room */
html.present-on .pr-page .lk-brief.has-map .lk-fv { font-size: clamp(1.5rem, 2.3vw, 2.2rem); }
html.present-on .pr-page .lk-hv { font-size: clamp(1.9rem, 3vw, 2.7rem); }
html.present-on .pr-page .lk-hl { font-size: clamp(.9rem, 1.1vw, 1.08rem); }
html.present-on .pr-page .lk-leaf > a, html.present-on .pr-page .lk-leaf > span { font-size: clamp(.86rem, 1vw, 1rem); }
/* the map on a slide: tighter rows, so a scene with its head, answer and map fits a 1366 x 768 projector */
html.present-on .pr-page .lk-brief.has-map { margin-bottom: .6rem; }
html.present-on .pr-page .lk-brief.has-map .lk-answer { margin-bottom: .6rem; }
html.present-on .pr-page .lk-map .lk-node > a, html.present-on .pr-page .lk-map .lk-node:not(.linked) { padding: 9px 14px; }
@container (min-width: 1100px) { html.present-on .pr-page .lk-map .lk-branch { padding-block: 3px; } }
@media (max-height: 820px) {
  html.present-on .pr-page .lk-answer { font-size: clamp(1.2rem, 1.75vw, 1.6rem); }
  html.present-on .pr-page .lk-brief.has-map .lk-fv { font-size: clamp(1.3rem, 1.9vw, 1.75rem); }
  html.present-on .pr-page .lk-hv { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
}
/* the Overview's hero introduces the website; on its slide the answer says it, and the map needs the room */
html.present-on .pr-page .hero .lede { display: none; }