/* Public deck shell: "Click to advance" hint, the options gear + menu (window corner) and captions. Caption and hint
   sizes follow the deck's scale (--s, set by shell.js) with a floor, so they stay readable on a phone. */
#notes, #overview, #help { display: none !important; }
#counter { right: 104px !important; }  /* room for the gear in the window corner */

/* ---- title-slide hint: a thought bubble from the robot, in an overlay laid over the slide by shell.js */
#talk-hint { position: fixed; z-index: 48; pointer-events: none; }
#talk-hint svg { display: block; width: 100%; height: 100%; overflow: visible; }
#talk-hint .cloud, #talk-hint .dot { fill: #FBF8F0; stroke: var(--ink, #1F1D1A); stroke-width: 2.6; stroke-linejoin: round; }
#talk-hint .cloud { filter: drop-shadow(0 5px 10px rgba(31, 29, 26, .12)); }
#talk-hint text { fill: var(--ink, #1F1D1A); font-family: 'Fraunces', Georgia, serif; }
#talk-hint .t1 { font-size: 34px; font-weight: 600; }
#talk-hint .t2 { font-size: 21px; font-style: italic; fill: var(--ink-soft, #5B564E); }
#talk-hint .t3 { font-size: 15px; fill: var(--ink-soft, #5B564E); }
#talk-hint .gicon { fill: var(--ink-soft, #5B564E); }
#talk-hint .dot, #talk-hint .cloud, #talk-hint text { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4);
  transition: opacity .35s ease, transform .45s cubic-bezier(.3, 1.5, .5, 1); }
#talk-hint .cloud { transform-origin: 15% 85%; }
#talk-hint text { transform: none; transition: opacity .5s ease; }
/* the icon is placed by its transform attribute: fade it with opacity only (a CSS transform would replace that) */
#talk-hint .gicon { opacity: 0; transition: opacity .5s ease .85s; }
#talk-hint.show-robot .robot :is(.dot, .cloud, text) { opacity: 1; transform: none; }
#talk-hint.show-robot .robot .gicon { opacity: 1; }
#talk-hint .d2 { transition-delay: .18s; }
#talk-hint .d3 { transition-delay: .36s; }
#talk-hint .cloud { transition-delay: .55s; }
#talk-hint text { transition-delay: .85s; }
#talk-hint.bye :is(.dot, .cloud, text, .gicon) { opacity: 0 !important; transition: opacity .35s ease; transition-delay: 0s; }

/* ---- the gear and its menu (window corner, outside the slide where the window leaves room) */
#talk-ui { position: fixed; right: 12px; bottom: 12px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end;
  gap: 8px; font: 400 14px/1.25 'Fraunces', Georgia, serif; color: var(--ink, #1F1D1A); }
#talk-ui .gear {
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 50%;
  border: 1px solid rgba(31, 29, 26, .28); background: rgba(246, 241, 227, .85); color: var(--ink-soft, #5B564E);
  opacity: .55; transition: opacity .2s, transform .35s ease, color .2s, border-color .2s;
}
#talk-ui .gear svg { width: 20px; height: 20px; fill: currentColor; }
#talk-ui .gear:hover, #talk-ui .gear:focus-visible, #talk-ui.open .gear { opacity: 1; color: var(--ink, #1F1D1A); border-color: rgba(31, 29, 26, .55); }
#talk-ui.open .gear { transform: rotate(60deg); }
#talk-ui.active .gear { opacity: .85; color: var(--yellow-deep, #B8860B); border-color: var(--yellow-deep, #B8860B); }
#talk-ui .gear:focus-visible { outline: 2px solid var(--yellow-deep, #B8860B); outline-offset: 2px; }

#talk-menu {
  width: 248px; padding: 6px; border-radius: 10px; background: rgba(250, 247, 238, .97);
  border: 1px solid rgba(31, 29, 26, .25); box-shadow: 0 10px 30px rgba(31, 29, 26, .18);
  opacity: 0; transform: translateY(6px); visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
#talk-ui.open #talk-menu { opacity: 1; transform: none; visibility: visible; transition: opacity .2s ease, transform .2s ease; }
#talk-menu .opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
#talk-menu .opt:hover { background: rgba(31, 29, 26, .06); }
#talk-menu input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--ink, #1F1D1A); cursor: pointer; flex: none; }
#talk-menu .txt { display: flex; flex-direction: column; gap: 2px; }
#talk-menu .lbl { font-size: 15px; }
#talk-menu .note { font-size: 12px; color: var(--ink-soft, #5B564E); font-style: italic; }
#talk-menu .opt:has(input:disabled) { cursor: default; opacity: .45; }
#talk-menu .opt:has(input:disabled):hover { background: none; }
#talk-menu .opt:has(input:disabled) input { cursor: default; }
#talk-menu .txt { flex: 1; min-width: 0; }
#talk-menu .lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#talk-menu .status { visibility: hidden; font: 11px/1 system-ui, sans-serif; color: var(--ink-soft, #5B564E); font-variant-numeric: tabular-nums; white-space: nowrap; }
#talk-menu.auto-on .status { visibility: visible; }

/* ---- seek bar (bottom centre of the slide; positioned by shell.js) */
#talk-seek {
  position: fixed; z-index: 49; transform: translateX(-50%); display: none; align-items: center; gap: 12px;
  padding: 7px 16px; border-radius: 999px; background: rgba(250, 247, 238, .95); border: 1px solid rgba(31, 29, 26, .25);
  box-shadow: 0 4px 16px rgba(31, 29, 26, .12); font: 12px/1 system-ui, sans-serif; color: var(--ink-soft, #5B564E);
  font-variant-numeric: tabular-nums; box-sizing: border-box;
}
#talk-seek.show { display: flex; }
#talk-seek input { flex: 1; min-width: 0; margin: 0; accent-color: var(--yellow-deep, #B8860B); cursor: pointer; }
#talk-seek input:focus-visible { outline: 2px solid var(--yellow-deep, #B8860B); outline-offset: 3px; }

/* ---- captions */
#talk-cc {
  position: fixed; z-index: 49; transform: translateX(-50%); max-width: min(92vw, calc(var(--s, 1) * 1400px));
  padding: .32em .7em .38em; border-radius: 6px; background: rgba(31, 29, 26, .84); color: #FBF8F0;
  font: 400 max(14px, calc(var(--s, 1) * 34px)) / 1.3 'Fraunces', Georgia, serif; text-align: center;
  pointer-events: none; display: none; text-wrap: balance;
}
#talk-cc.show { display: block; }
@media (prefers-reduced-motion: reduce) { #talk-hint *, #talk-ui .gear, #talk-menu { transition: none !important; } }