/* Estrade UI (menu, share page, presenter, editor). The slides themselves never use this file.
   Palette: classroom. Chalkboard green for actions, oak for the platform the slides stand on, cool grey paper. */
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-display: swap; src: url(fonts/barlow-semi-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2"); }
:root {
  --bg: #eceeec; --panel: #ffffff; --ink: #1e2622; --mute: #646e69; --line: #d9ddd9; --soft: #e5e8e5;
  --accent: #2f5446; --accent-ink: #ffffff; --oak: #a8733f; --oak-top: #c99764; --oak-dark: #7a522c;
  --warn: #a85a12; --bad: #a3302a; --good: #2f6b45;
  --a: #2f5d7c; --b: #8a4b6e;
  --r: 10px;
  --display: "Barlow Semi Condensed", "Bahnschrift", "DIN Alternate", sans-serif;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 7px 13px; }
button:hover { border-color: #c9cbc7; background: #fafaf9; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.primary:hover { filter: brightness(1.08); }
button.ghost { border-color: transparent; background: transparent; }
button.ghost:hover { background: var(--soft); }
button:disabled { opacity: .45; cursor: default; }
kbd { font-family: "Cascadia Mono", Consolas, monospace; font-size: .85em; background: var(--soft); border: 1px solid var(--line);
      border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }
.muted { color: var(--mute); }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--soft); color: var(--mute); }
.badge.draft { background: #fff3cf; color: #7a5a00; }
.badge.sp-A { background: #e3eef6; color: var(--a); }
.badge.sp-B { background: #f1e6f4; color: var(--b); }
.slide-frame { position: relative; aspect-ratio: 16 / 9; background: #fff; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); }
.slide-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.slide-frame .shield { position: absolute; inset: 0; }
.save-status { font-size: 13px; color: var(--mute); min-width: 110px; text-align: right; }
.save-status.error { color: var(--bad); }
.overlay { position: fixed; inset: 0; background: rgba(20, 22, 25, .55); display: none; place-items: center; z-index: 50; }
.overlay.on { display: grid; }
.dialog { background: var(--panel); border-radius: 14px; padding: 26px 30px; max-width: 760px; width: calc(100% - 40px); max-height: 86vh; overflow: auto; }
.dialog h2 { margin: 0 0 14px; font-size: 20px; }
/* the estrade: a slide standing on an oak platform (the product's one signature) */
.estrade { position: relative; padding-bottom: 16px; }
.estrade::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: 0; height: 16px; border-radius: 2px;
  background: linear-gradient(var(--oak-top) 0 4px, var(--oak) 4px 13px, var(--oak-dark) 13px),
              repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 37px);
  background-blend-mode: multiply; box-shadow: 0 10px 18px -12px rgba(60, 35, 10, .55); }
.estrade .slide-frame { box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 14px 28px -18px rgba(20,30,25,.45); border-radius: 3px; }
.wordmark { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.wordmark::after { content: ""; display: inline-block; width: .55em; height: .16em; margin-left: .12em; background: var(--oak); border-radius: 1px; vertical-align: .02em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 9px 18px; font-size: 15px; }