/* Outstanding design system — deck frame: header strip, slide stage, stepped progress bar,
   icon controls, notes drawer. Built by deck.js from the manifest in a deck's index.html. */
@import url("tokens.css");
@import url("../style.css");          /* the deck's STYLE block, if it has one */
*{box-sizing:border-box}
html,body{height:100%}
body.ds-deck{background:var(--paper);color:var(--ink);margin:0;overflow:hidden;
  font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;padding:20px 32px 14px}
.ds-deck .hd{flex:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-bottom:1px solid var(--rule);padding-bottom:10px}
.ds-deck .hd h1{font-size:14px;font-weight:600;margin:0;letter-spacing:.01em}
.ds-deck .hd .meta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ds-deck .stage{position:relative;flex:1;min-height:0;margin:0 -32px}
.ds-deck .stage > iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--paper);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.ds-deck .stage > iframe.show{opacity:1;visibility:visible;transition:opacity .35s ease}

.ds-deck .notes{position:absolute;top:0;right:0;bottom:0;width:min(360px,90%);background:var(--paper);z-index:4;
  border-left:1px solid var(--rule);padding:22px 28px;overflow:auto;transform:translateX(100%);transition:transform .3s ease;
  font-size:14px;line-height:1.6;color:var(--body)}
body.notesopen .notes{transform:none}
.ds-deck .notes .eyebrow{font-size:11px;letter-spacing:.13em;color:var(--muted);margin-bottom:12px;text-transform:uppercase}
.ds-deck .notes p{margin:0 0 12px}
.ds-deck .notes .src-eb{margin-top:20px}
.ds-deck .notes .src{margin:0;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);white-space:pre-wrap;word-break:break-word;background:#f6f6f7;border:1px solid var(--rule);border-radius:var(--radius);padding:10px 12px} .ds-deck .notes b{color:var(--ink);font-weight:600}

.ds-deck .ctl{flex:none;display:flex;align-items:flex-end;gap:12px;padding-top:14px;border-top:1px solid var(--rule)}
.ds-deck button{font:inherit;color:var(--ink);background:transparent;cursor:pointer}
.ds-deck .ibtn{border:none;padding:0;width:18px;height:18px;margin-bottom:2px;display:inline-flex;align-items:center;justify-content:center;color:#9a9aa0}
.ds-deck .ibtn:hover{color:var(--ink)}
.ds-deck .ibtn:disabled{opacity:.3;cursor:default;color:#9a9aa0}
.ds-deck .ibtn svg{display:block}
.ds-deck .prog{flex:1;display:flex;gap:6px;user-select:none;min-width:0}
.ds-deck .step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:9px;cursor:pointer}
.ds-deck .plabel{font-size:10px;line-height:1;color:var(--faint);text-align:left;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;transition:color .25s}
.ds-deck .plabel:empty::before{content:"\00a0"}   /* an unlabelled step keeps the label's height, so every track lines up */
.ds-deck .step.reached .plabel{color:#6a6a70}
.ds-deck .step.cur .plabel,.ds-deck .step:hover .plabel{color:var(--ink)}
/* a section's track, cut into one segment per slide; hover names the slide */
.ds-deck .psegs{display:flex;gap:2px;width:100%}
.ds-deck .pseg{position:relative;flex:1 1 0;min-width:0;height:7px;border-radius:2px;background:var(--track)}
.ds-deck .pseg:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}
.ds-deck .pseg:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}
.ds-deck .pfill{display:block;height:100%;width:0;border-radius:inherit;background:var(--fill);transition:width .45s ease}
.ds-deck .pseg:hover{background:#dcdce0}
.ds-deck .pseg[data-t]:not([data-t=""]):hover::after{content:attr(data-t);position:absolute;left:0;top:calc(100% + 6px);z-index:10;
  font-size:11px;line-height:1.2;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  padding:4px 7px;white-space:nowrap;pointer-events:none}
.ds-deck .step:last-child .pseg:last-child:hover::after{left:auto;right:0}   /* keep the far-right tip on screen */
.ds-deck .sb{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:1px;min-width:44px;text-align:right;white-space:nowrap}
.ds-deck .rbtn{color:#c8c8cc} .ds-deck .rbtn:hover{color:var(--ink)}
.ds-deck .tbtn{border:1px solid var(--rule);border-radius:var(--radius);padding:3px 10px;font-size:12px;color:var(--muted);margin-bottom:-2px}
.ds-deck .tbtn[hidden]{display:inline-block;visibility:hidden}   /* keeps its space, so the controls never shift */
.ds-deck .tbtn:hover,body.notesopen .tbtn{border-color:var(--ink);color:var(--ink)}
.ds-deck .foot{flex:none;margin-top:10px;font-size:11px;color:var(--muted)}

/* the overview (G / Slides): every slide as a thumbnail, grouped by section, over the stage */
.ds-deck .overview{position:absolute;inset:0;z-index:6;background:var(--paper);overflow:auto;padding:18px 32px 28px;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
body.ovopen .overview{opacity:1;visibility:visible;transition:opacity .25s ease}
.ds-deck .ov-eb{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:14px 0 10px}
.ds-deck .ov-eb:first-child{margin-top:0}
.ds-deck .ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px 16px}
.ds-deck .ov-t{display:grid;grid-template-columns:auto 1fr;gap:6px 8px;align-items:baseline;border:0;padding:0;text-align:left}
.ds-deck .ov-f{grid-column:1/-1;position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--radius);transition:border-color .2s}
.ds-deck .ov-f iframe{position:absolute;left:0;top:0;width:1440px;height:810px;border:0;pointer-events:none;
  transform:scale(var(--ov-k,.15));transform-origin:0 0;background:var(--paper)}
.ds-deck .ov-t:hover .ov-f{border-color:#9a9aa0}
.ds-deck .ov-t.cur .ov-f{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.ds-deck .ov-n{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ds-deck .ov-l{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ovopen #gridbtn{border-color:var(--ink);color:var(--ink)}

/* a single-slide deck needs no navigation chrome; the copyright footer stays */
.ds-deck.solo .ctl{display:none}
.ds-deck.solo .foot{border-top:1px solid var(--rule);padding-top:12px}

@media (max-width:760px){
  body.ds-deck{padding:14px 16px 10px}
  .ds-deck .stage{margin:0 -16px}
  .ds-deck .plabel{display:none}
  .ds-deck .prog{align-self:center}
  .ds-deck .overview{padding:14px 16px 22px}
  .ds-deck .ov-grid{grid-template-columns:repeat(2,1fr);gap:14px 10px}
}

/* STYLE colours for the frame */
.ds-deck .hd h1{color:var(--c-frame-name)}
.ds-deck .hd .meta{color:var(--c-frame-meta)}
.ds-deck .foot{color:var(--c-frame-footer)}