/* ui.css: the window around the slides. A thumbnail strip on the left as in PowerPoint, a bar with Present at the top and a
   status line below; in full screen only the slide. Cards use the simulator pages' Return card look. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#lwApp { position: fixed; inset: 0; display: flex; background: #16181d; color: #e9ebf0; font: 13px/1.35 Arial, Helvetica, sans-serif; }
#lwMain { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#lwView { position: relative; flex: 1 1 0; min-height: 0; height: auto !important; background: #24272e; overflow: hidden; }
#lwView .reveal { position: absolute; inset: 0; width: auto; height: auto; background: transparent; }
body.lw-fs #lwView, body.lw-recv #lwView { background: #000; }

/* only the slide on screen, the one leaving and the ones prepared next to it are drawn */
.reveal .slides > section { display: none !important; transition: none !important; }
.reveal .slides > section.present, .reveal .slides > section.lw-on, .reveal .slides > section.lw-out {
  display: block !important; visibility: visible !important; opacity: 1 !important; transform: none !important;
}
.reveal .slides > section.present { z-index: 12 !important; }
.reveal .slides > section.lw-out { z-index: 11 !important; pointer-events: none; }
.reveal .slides > section.lw-on:not(.present):not(.lw-out) { z-index: 10 !important; pointer-events: none; }
.stage .lw-bgfade { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }

/* the bar */
#lwBar { height: 46px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #1d2028; border-bottom: 1px solid #2c313c; }
.lw-title { font: 700 14px Arial, Helvetica, sans-serif; color: #fff; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-fill { flex: 1; }
.lw-tool { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 1px solid #3a404c; border-radius: 7px;
  background: #262a33; color: #e7e9ef; font: 700 13px Arial, Helvetica, sans-serif; cursor: pointer; white-space: nowrap; }
.lw-tool:hover { background: #303542; }
.lw-tool svg { width: 16px; height: 16px; }
.lw-present { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 16px; border: 0; border-radius: 8px; background: #d11f36;
  color: #fff; font: 700 15px Arial, Helvetica, sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(209, 31, 54, .38); white-space: nowrap; }
.lw-present:hover { background: #e0263f; }
.kbd { display: inline-block; padding: 0 6px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 4px; font: 700 11px/17px Arial, Helvetica, sans-serif; }
button:focus-visible, .lw-th:focus-visible, .lw-gt:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#lwStatus { height: 26px; flex: none; padding: 0 14px; display: flex; align-items: center; background: #1d2028; color: #aab0bd;
  border-top: 1px solid #2c313c; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the thumbnail strip, as PowerPoint draws it */
#lwStrip { width: 236px; flex: none; display: flex; flex-direction: column; background: #f4f4f4; color: #222; border-right: 1px solid #cdcdcd; }
.lw-striph { display: flex; align-items: center; gap: 6px; padding: 9px 10px 8px 12px; border-bottom: 1px solid #dcdcdc; font: 700 13px Arial, Helvetica, sans-serif; color: #333; }
.lw-striph span { flex: 1; }
.lw-striph button { font: 11px Arial, Helvetica, sans-serif; border: 1px solid #c6c6c6; background: #fff; color: #333; border-radius: 4px; padding: 2px 6px; cursor: pointer; }
.lw-striph button:hover { background: #ececec; }
.lw-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0 60px; scrollbar-width: thin; overscroll-behavior: contain; }
.lw-sech { display: flex; align-items: center; gap: 7px; width: 100%; border: 0; background: none; padding: 8px 10px 5px 10px; text-align: left;
  font: 12px Arial, Helvetica, sans-serif; color: #444; cursor: pointer; }
.lw-sech:hover { color: #000; }
.lw-chev { flex: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #666; transition: transform .15s; }
.lw-sec.shut .lw-chev { transform: rotate(-90deg); }
.lw-secn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-secc { flex: none; color: #8a8a8a; font-size: 11px; }
.lw-sec.shut .lw-secb { display: none; }
.lw-th { display: flex; gap: 6px; padding: 5px 12px 5px 4px; text-decoration: none; color: #333; }
.lw-num { width: 28px; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 1px; font: 11px Arial, Helvetica, sans-serif; color: #555; }
.lw-num svg { width: 12px; height: 12px; color: #777; }
.lw-img { flex: 1; position: relative; aspect-ratio: 16 / 9; background: #e2e2e2; border: 1px solid #c8c8c8; border-radius: 2px; overflow: hidden; }
.lw-img img { display: block; width: 100%; height: 100%; }
.lw-th:hover .lw-img { border-color: #9a9a9a; }
.lw-th.cur .lw-img { border-color: #d35230; box-shadow: 0 0 0 2px #d35230; }
.lw-th.cur .lw-num { color: #c43e1c; font-weight: 700; }
.lw-th.hid .lw-img img { opacity: .42; }
.lw-th.hid .lw-num > span { position: relative; padding: 0 2px; border: 1px solid #8a8a8a; line-height: 13px; }
.lw-th.hid .lw-num > span::after { content: ''; position: absolute; left: -1px; right: -1px; top: 50%; border-top: 1px solid #8a8a8a; transform: rotate(-32deg); }
body.lw-fs #lwStrip, body.lw-nostrip #lwStrip, body.lw-recv #lwStrip { display: none; }
body.lw-fs #lwBar, body.lw-fs #lwStatus, body.lw-recv #lwBar, body.lw-recv #lwStatus { display: none; }

/* full screen: the slide alone; the mouse shows a small Exit pill */
#lwFsPill { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .25s; }
body:not(.lw-fs) #lwFsPill, body.lw-recv #lwFsPill, body.lw-simon #lwFsPill { display: none; }
body.lw-fs.lw-mouse #lwFsPill { opacity: 1; pointer-events: auto; }
#lwFsPill button { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid #626c7a; border-radius: 999px;
  background: rgba(32, 37, 50, .92); color: #fff; font: 700 13px Arial, Helvetica, sans-serif; cursor: pointer; box-shadow: 0 8px 26px #0008; }
body.lw-fs:not(.lw-mouse) #lwView { cursor: none; }

/* the spotlight: a layer over the slide that dims all but a circle around the pointer; clicks go through it to the slide.
   While it is on, the circle is the pointer. When zoomed, a drag moves the slide. */
#lwSpot { position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .2s ease-out; will-change: opacity; }
#lwSpot.on { opacity: 1; }
body.lw-recv #lwSpot { display: none; }
/* the laser pointer: a red dot with a glow, in place of the arrow */
#lwLaser { position: absolute; left: 0; top: 0; z-index: 35; --lz: 16px; width: var(--lz); height: var(--lz);
  margin: calc(var(--lz) / -2) 0 0 calc(var(--lz) / -2); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: radial-gradient(circle, #fff4f4 0, #ff8080 20%, #ff2020 46%, #e80000 100%);
  box-shadow: 0 0 calc(var(--lz) * .55) calc(var(--lz) * .2) rgba(255, 32, 32, .7), 0 0 calc(var(--lz) * 1.5) calc(var(--lz) * .55) rgba(255, 0, 0, .3);
  will-change: transform; }
#lwLaser.on { opacity: 1; }
body.lw-recv #lwLaser { display: none; }
body.lw-panning #lwView, body.lw-panning #lwView * { cursor: grabbing !important; }
body.lw-spoton #lwView, body.lw-spoton #lwView *, body.lw-laseron #lwView, body.lw-laseron #lwView * { cursor: none !important; }

/* the end of a show, and the black and white screens */
#lwEnd { position: absolute; inset: 0; z-index: 40; background: #000; color: #d8d8d8; display: flex; justify-content: center; align-items: flex-start;
  padding-top: 2.6%; font: 20px Arial, Helvetica, sans-serif; cursor: default; }
#lwEnd p { margin: 0; }
#lwEnd[hidden], #lwBlank[hidden] { display: none; }
#lwBlank { position: absolute; inset: 0; z-index: 45; background: #000; }
#lwBlank.white { background: #fff; }

/* cards: the look of the simulator pages' Return card */
#lwCard { position: fixed; inset: 0; z-index: 2147483600; display: none; align-items: center; justify-content: center; background: rgba(5, 7, 13, .82);
  padding: 24px; font: 16px/1.5 Arial, Helvetica, sans-serif; color: #f5f5f7; }
#lwCard.open { display: flex; }
#lwCard .lw-cardb { background: #202532; border: 1px solid #626c7a; border-radius: 14px; max-width: 660px; width: 100%; max-height: calc(100vh - 48px);
  overflow: auto; padding: 27px 30px; box-shadow: 0 20px 65px #0009; box-sizing: border-box; }
#lwCard h2 { margin: 0 0 14px; font: 700 25px/1.2 Arial, Helvetica, sans-serif; color: #fff; }
#lwCard h3 { margin: 0 0 8px; font: 700 17px/1.3 Arial, Helvetica, sans-serif; color: #fff; }
#lwCard p { margin: 0 0 10px; color: #e7e9ef; }
#lwCard kbd, #lwGrid kbd { display: inline-block; padding: 1px 7px; border: 1px solid #9299aa; border-radius: 5px; background: #363d4a; color: #fff; font: 700 15px Arial, Helvetica, sans-serif; }
#lwCard button { border: 0; border-radius: 7px; background: #d11f36; color: #fff; padding: 10px 17px; font: 700 15px Arial, Helvetica, sans-serif; cursor: pointer; margin-top: 8px; }
#lwCard button.lw-alt { background: transparent; color: #fff; border: 1px solid #9299aa; padding: 9px 16px; }
#lwCard button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lw-cols { display: flex; flex-wrap: wrap; gap: 14px; margin: 2px 0 6px; }
.lw-col { flex: 1 1 240px; padding: 15px 18px 6px; border: 1px solid #4a5263; border-radius: 10px; background: #181c26; }
.lw-row { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center; margin-top: 6px; }
#lwCard .lw-dim { color: #b9bfcc; font-size: 14px; }
#lwCard .lw-dim kbd { font-size: 13px; }
.lw-keys { border-collapse: collapse; width: 100%; margin-bottom: 6px; }
.lw-keys th { text-align: left; font-weight: 700; color: #fff; padding: 7px 14px 7px 0; vertical-align: top; white-space: nowrap; }
.lw-keys td { padding: 7px 0; color: #e7e9ef; }
.lw-keys tr + tr th, .lw-keys tr + tr td { border-top: 1px solid #343b4a; }
.lw-keys kbd { font-size: 13px !important; }
/* the shortcuts legend: Windows and Mac side by side */
#lwCard.lw-wide .lw-cardb { max-width: 1080px; }
.lw-legend { border-collapse: collapse; width: 100%; margin-bottom: 6px; font-size: 15px; line-height: 1.45; }
.lw-legend thead th { text-align: left; padding: 0 14px 6px 0; font: 700 13px Arial, Helvetica, sans-serif; color: #b9bfcc; letter-spacing: .06em; text-transform: uppercase; }
.lw-legend thead th:first-child { width: 22%; }
.lw-legend thead th + th { width: 39%; }
.lw-here { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #d11f36; color: #fff; font: 700 10px/17px Arial, Helvetica, sans-serif; letter-spacing: .04em; vertical-align: 1px; }
.lw-legend tbody th { text-align: left; font-weight: 700; color: #fff; padding: 6px 14px 6px 0; vertical-align: top; }
.lw-legend td { padding: 6px 14px 6px 0; color: #e7e9ef; vertical-align: top; }
.lw-legend tbody tr + tr > * { border-top: 1px solid #343b4a; }
.lw-legend tr.lw-grp th { padding: 14px 0 4px; color: #ff7a8a; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.lw-legend tr.lw-grp > *, .lw-legend tr.lw-grp + tr > * { border-top: 0; }
.lw-legend tbody tr.lw-grp:first-child th { padding-top: 6px; }
.lw-legend kbd { font-size: 13px !important; padding: 0 6px !important; }
@media (max-height: 980px) {   /* the shortcuts legend fits a laptop screen without scrolling */
  #lwCard .lw-cardb { padding: 18px 28px 16px; }
  #lwCard h2 { margin-bottom: 6px; font-size: 22px; }
  .lw-keys th, .lw-keys td { padding-top: 4px; padding-bottom: 4px; }
  .lw-legend { font-size: 14px; line-height: 1.35; }
  .lw-legend tbody th, .lw-legend td { padding-top: 3px; padding-bottom: 3px; }
  .lw-legend tr.lw-grp th { padding: 9px 0 2px; }
  #lwCard .lw-keys + .lw-row button, #lwCard .lw-legend + .lw-row button { margin-top: 2px; }
}
@media (max-height: 860px) {   /* a smaller laptop screen, or the browser window on one */
  #lwCard { padding: 12px; }
  #lwCard .lw-cardb { padding: 13px 24px 11px; max-height: calc(100vh - 24px); }
  #lwCard.lw-wide h2 { margin-bottom: 3px; font-size: 19px; }
  .lw-legend { font-size: 13px; line-height: 1.27; }
  .lw-legend kbd { font-size: 12px !important; padding: 0 5px !important; }
  .lw-legend thead th { padding-bottom: 3px; font-size: 12px; }
  .lw-legend tbody th, .lw-legend td { padding-top: 2px; padding-bottom: 2px; }
  .lw-legend tr.lw-grp th { padding: 7px 0 1px; font-size: 11px; }
  #lwCard .lw-legend + .lw-row button { margin-top: 0; padding: 7px 15px; }
}

/* the projector boost: a filter on how each slide is shown, by its theme (and on a configurator page) */
body.lw-boost1 .reveal .slides > section { filter: url(#lwBoostL1); }
body.lw-boost1 .reveal .slides > section.lw-dk { filter: url(#lwBoostD1); }
body.lw-boost2 .reveal .slides > section { filter: url(#lwBoostL2); }
body.lw-boost2 .reveal .slides > section.lw-dk { filter: url(#lwBoostD2); }
body.lw-boost1 #lwSimFrame, body.lw-boost1 #lwSubFrame { filter: url(#lwBoostD1); }   /* configurator pages open dark */
body.lw-boost2 #lwSimFrame, body.lw-boost2 #lwSubFrame { filter: url(#lwBoostD2); }

/* the simulator pages, over the slide and full screen, with one way back */
#lwSim { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; background: #0b0d12; }
#lwSim[hidden] { display: none; }
.lw-simbar { height: 54px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: #11141b; border-bottom: 1px solid #262b36; }
.lw-back { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 20px; border: 0; border-radius: 999px; background: #d11f36; color: #fff;
  font: 700 16px Arial, Helvetica, sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(209, 31, 54, .45); }
.lw-back:hover { background: #e0263f; }
.lw-back .kbd { border-color: rgba(255, 255, 255, .65); font-size: 12px; }
.lw-simhint { color: #aab0bd; font: 13px Arial, Helvetica, sans-serif; }
/* the page has a view of its own below the bar: the zoom enlarges the page inside it, and the spotlight and the laser lie
   over it there, as over a slide */
#lwSimView { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #0b0d12; }
#lwSimZoom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#lwSimFrame, #lwSubFrame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; background: #fff; }
#lwSubFrame { z-index: 1; background: #0b0d12; }
#lwSubFrame[hidden] { display: none; }
.lw-simstat { color: #ff7a8a; font: 700 13px Arial, Helvetica, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-simbar .lw-tool { flex: none; }
@media (max-width: 1100px) { .lw-simhint { display: none; } }

/* all slides */
#lwGrid { position: fixed; inset: 0; z-index: 2147482000; overflow: auto; background: #14161b; color: #e9ebf0; font: 13px Arial, Helvetica, sans-serif; }
#lwGrid[hidden] { display: none; }
.lw-gridh { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 14px 26px; background: #1d2028; border-bottom: 1px solid #2c313c; }
.lw-gridh h2 { margin: 0; font: 700 20px Arial, Helvetica, sans-serif; color: #fff; }
.lw-gridh span { flex: 1; color: #aab0bd; }
.lw-gridh kbd { font-size: 12px !important; }
.lw-gridh button { border: 0; border-radius: 7px; background: #d11f36; color: #fff; padding: 8px 15px; font: 700 14px Arial, Helvetica, sans-serif; cursor: pointer; }
.lw-gridb { padding: 6px 26px 70px; }
.lw-gridb h3 { margin: 24px 0 10px; font: 700 14px Arial, Helvetica, sans-serif; color: #cfd3dc; }
.lw-gr { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.lw-gt { position: relative; display: block; aspect-ratio: 16 / 9; border: 1px solid #3a404c; border-radius: 4px; overflow: hidden; background: #22252c; }
.lw-gt img { display: block; width: 100%; height: 100%; }
.lw-gt span { position: absolute; left: 6px; bottom: 5px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .72); color: #fff; font: 700 12px Arial, Helvetica, sans-serif; }
.lw-gt.hid img { opacity: .45; }
.lw-gt.cur { outline: 3px solid #d35230; outline-offset: 2px; }
.lw-gt:hover { border-color: #8a93a5; }
@media (max-width: 900px) { #lwStrip { width: 180px; } .lw-tool .kbd { display: none; } }