/* Speaker Guide's frame (the Shell): the navy header on every screen, the bottom navigation (Home, Search, Library,
   Events, Community) with the mini player just above it, and the full player, a panel that slides up from behind the
   navigation and covers the screen down to it (the navigation stays on top and usable). Loaded last, so the frame's
   look here settles what library.css says about the same pieces. Classes of its own start with sh-. */

/* ---------- Its own tokens ---------- */
:root {
  --sh-nav: #ffffff;                  /* the bottom navigation: a white bar */
  --sh-nav-ink: #5d6878;              /* its tabs, gray-navy */
  --sh-nav-on: var(--clay);           /* the tab you're on: its icon in the client's blue */
  --sh-nav-on-text: var(--clay-dark); /* and its name, in the blue that reads on white */
  /* How tall the bottom navigation stands, its safe-area edge included: app.js measures it (this is until then).
     The full player ends at its top. */
  --sh-nav-h: calc(63px + env(safe-area-inset-bottom, 0px));
}
:root[data-theme="dark"] {
  --sh-nav: var(--bar);
  --sh-nav-ink: rgba(248, 244, 233, 0.68);
}

/* ---------- The header: ‹ Back on inner pages, the L mark and "Speaker Guide" in the middle, the bell, the envelope, the person ---------- */
/* Three columns, the outer two equal where there's room, so the mark sits in the middle (on the five tab pages,
   nothing at the left). The right one holds three 44px buttons (140px with their gaps) and never gets less; on a
   narrow phone the left one gives way first, the brand's cell stays as wide as the brand, which is centered in it. */
#topbar {
  background: var(--bar); color: var(--bar-ink);
  border-bottom: 0; box-shadow: 0 2px 14px rgba(11, 31, 59, 0.2);
}
#topbar .topbar-in {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px;
  height: 64px; max-width: 1080px; margin: 0 auto; padding: 0 10px;
}
#topbar .bar-icon {
  grid-row: 1; grid-column: 1; justify-self: start;
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--bar-ink); text-decoration: none;
}
#topbar .bar-icon i, #topbar .bar-icon svg { display: block; }
#topbar :is(.bar-icon, .sh-tool, .sh-me):active { background: rgba(248, 244, 233, 0.12); }
#topbar .sh-brand {
  grid-row: 1; grid-column: 2; justify-self: center;
  display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 4px 6px; border-radius: 12px;
  color: var(--bar-ink); text-decoration: none;
}
#topbar .sh-brand .logo { width: 32px; height: 32px; border-radius: 9px; box-shadow: none; }
#topbar .brand-name { display: inline; font: 700 23px/1 var(--display); letter-spacing: -0.01em; color: var(--bar-ink); }
/* The narrowest phones (360px and under): the mark alone in the middle, so the three buttons and ‹ Back all fit. */
@media (max-width: 360px) {
  #topbar .brand-name { display: none; }
  #topbar .sh-brand { gap: 0; }
}
/* The right cluster: the bell (Updates), the envelope (Messages) and the photo (the More menu), 44px each, 4px
   apart, from left to right. */
#topbar .sh-tools { grid-row: 1; grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 4px; }
#topbar .sh-tool, #topbar .sh-me {
  position: relative; flex: 0 0 auto;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  color: var(--bar-ink); text-decoration: none;
}
#topbar .sh-tool i, #topbar .sh-tool svg { display: block; }
/* Something waiting for them: a red pill with the number at the top right corner of the bell or the envelope
   (app.js draws it, and takes it away at zero; the button's name says it in words: "Updates, 3 new"). A navy ring
   keeps it clear of the icon. */
.sh-badge {
  position: absolute; z-index: 1; top: 1px; right: 0;
  box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--help, #d8372c); color: #fff;
  font: 700 12px/18px var(--sans); letter-spacing: 0; text-align: center; white-space: nowrap;
  box-shadow: 0 0 0 2px var(--bar); pointer-events: none;
}
/* Until profile.js knows them: the initials of the email they signed in with, in a circle. (:where, so the
   profile's own .avatar-me look wins wherever it says something.) */
:where(#sh-me .sh-initials) {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--clay); color: var(--navy); font: 700 14px/1 var(--sans); letter-spacing: 0.02em;
}
/* The page's name is in the page itself now; library.js still writes it here, out of sight. */
#topbar .topbar-title { display: none !important; }
/* The More menu open (app.js): the photo wears a blue ring, and tapping it closes the menu again. */
#topbar .sh-me[aria-expanded="true"] .avatar-me { box-shadow: 0 0 0 2px var(--bar), 0 0 0 4px var(--clay); }
/* Signed out, or before the 18+ step: the mark alone. */
#topbar.sh-out :is(#lib-back, .sh-tools) { display: none; }
#topbar.sh-out .sh-brand { pointer-events: none; }
/* An album's page seen signed out (round 14: the link a convention's table hands out): the mark, and Sign in at the
   right (48px tall; app.js keeps the album as where to come back to). */
.sh-signin { display: none; }
#topbar.sh-guest .sh-signin {
  grid-row: 1; grid-column: 3; justify-self: end;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(248, 244, 233, 0.5); color: var(--bar-ink); font: 600 15.5px var(--sans); text-decoration: none;
}
#topbar.sh-guest .sh-signin:active { background: rgba(248, 244, 233, 0.14); }
#topbar.sh-guest .sh-brand { display: inline-flex; pointer-events: auto; }

/* ---------- The dock: the mini player over the bottom navigation ---------- */
/* The navigation is always there and usable, the full player included (it ends at the navigation's top). */
#tabs {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0 max(0px, calc((100% - 640px) / 2)) calc(env(safe-area-inset-bottom) + 2px);
  background: var(--sh-nav);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(11, 31, 59, 0.07);
}
#tabs a {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 4px;
  min-width: 0; min-height: 60px; padding: 8px 2px 6px;
  color: var(--sh-nav-ink); text-decoration: none;
  font: 500 12.5px/1.1 var(--sans); letter-spacing: 0; white-space: nowrap;
}
#tabs a i { display: block; height: 26px; color: inherit; }
#tabs a i svg { display: block; width: 26px; height: 26px; }
#tabs a.on { color: var(--sh-nav-on-text); font-weight: 700; }
#tabs a.on i { color: var(--sh-nav-on); }
#tabs a:active { background: color-mix(in srgb, var(--ink) 5%, transparent); }
/* The narrowest phones: "Community" still fits its fifth of the bar. */
@media (max-width: 340px) { #tabs a { font-size: 11.5px; } }

/* The mini player: a white card, the talk's art, its title and "Speaker · Place", play or pause, and ˄ to open
   the full player (so does a tap anywhere else on the card). */
#mini {
  position: relative; display: flex; align-items: center; gap: 2px;
  padding: 8px 4px 8px 8px; border-radius: 16px; overflow: hidden;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(11, 31, 59, 0.14);
  cursor: pointer;
}
#dock > #mini { max-width: 640px; margin: 0 10px 8px; }
@media (min-width: 660px) { #dock > #mini { margin: 0 auto 8px; } }
/* How far along: a thin blue line along its bottom. */
#mini::after { height: 3px; background: var(--clay); }
#mini-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 48px;
  padding: 0; border: 0; background: none; color: inherit; text-align: left;
}
#mini-cover { width: 48px; border-radius: 10px; }
#mini .mini-text { min-width: 0; display: grid; gap: 1px; }
#mini .mini-text b { font: 700 16px/1.25 var(--sans); color: var(--ink); }
#mini .mini-text small { font-size: 14px; line-height: 1.3; color: var(--ink-2); }
#mini .mini-btn {
  flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink);
}
#mini-play { margin: 0 2px; background: var(--ink); color: var(--paper); }
#mini-up { color: var(--ink-2); }
#mini .mini-btn:active { opacity: 0.7; }

/* ---------- Pictures: a square with rounded corners, the talk's art filling it ---------- */
/* Whatever cover() draws (a landscape picture, or a tape) fills the frame; the frame keeps it square. */
.sh-art { position: relative; display: block; flex: 0 0 auto; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
:is(#mini, #player) .sh-art > * {
  display: block; width: 100%; height: 100%; max-width: none; margin: 0;
  border-radius: 0; box-shadow: none; aspect-ratio: auto;
}
:is(#mini, #player) .sh-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- The full player: a panel down to the top of the navigation, which stays on top and usable ---------- */
/* player.js opens it without making the page modal, so the navigation can be tapped (a tab closes the player and
   goes there). While it's open (body.sh-player-open) the page behind doesn't scroll and the mini player steps away
   (it's the same talk); a clear line sits between the player and the navigation. */
body.sh-player-open { overflow: hidden; }
body.sh-player-open #mini { display: none !important; }
body.sh-player-open #tabs { border-top-color: var(--line-strong); }

#player {
  position: fixed; z-index: 28; inset: 0;   /* over the page (REFINE LIBRARY is 25), under the dock (30) */
  width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: var(--bg); color: var(--ink);
}
/* Its bottom is the navigation's top (the navigation covers its last pixel, so no seam shows). In a conversation,
   where there's no navigation, the whole screen. */
#dock:not([hidden]) ~ #player { bottom: calc(var(--sh-nav-h) - 1px); }
/* Up from behind the navigation, solid all the way (no fading in, so nothing shows through it). */
#player[open] { animation: sh-rise 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sh-rise { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #player[open] { animation: none; } }
/* On an iPhone's home screen the clock and battery are drawn in white over the top edge (as over the navy header
   everywhere else): a navy band just that tall keeps them in view. Nothing anywhere else. */
#player::before {
  content: ''; position: absolute; z-index: 2; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  background: var(--bar); pointer-events: none;
}

/* Top to bottom: close and "Playing from", Talk · Transcript · Up next, the middle, then the scrubber and the big
   controls last, 16px clear of the navigation. Only the middle grows and shrinks; nothing else moves or overlaps. */
#player .player-in {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--bg);
  padding: calc(env(safe-area-inset-top) + 8px) 20px max(16px, calc(env(safe-area-inset-bottom) + 8px));
}
#dock:not([hidden]) ~ #player .player-in { padding-bottom: 16px; } /* the navigation carries the safe-area edge */
#player .player-body { flex: 1 1 auto; min-height: 0; }
#player .player-body > * { flex: 0 0 auto; }

/* Its top: ˅ to close, "Playing from …" in the middle. */
#player .player-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
#player-close { grid-column: 1; }
#player .player-from { grid-column: 2; }
#player .player-from small { font: 600 11.5px/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
#player .player-from b { font: 600 15px/1.3 var(--sans); }

/* Talk · Transcript · Up next, 48px to tap. */
#player .player-views { align-self: center; margin: 8px 0 4px; padding: 2px; }
#player .player-views button { height: 48px; padding: 0 18px; font-size: 15px; }

/* The middle: the art, transcript or Up next (all the height that's left, down to about 120px), then the title, the
   tools and the language bar. On a screen too small for even that, the middle scrolls; the controls never do. */
#player .sh-mid {
  flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column;
  margin: 0 -20px; padding: 0 20px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
#player .sh-mid > * { flex: 0 0 auto; }
/* The art is sized to the middle's own height (a size container), so it never runs into the title. */
#player .player-stage {
  flex: 1 1 0; min-height: 120px;
  container-type: size; margin: 0 -20px; padding: 12px 20px 18px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
}
#player .player-art { display: grid; place-items: center; min-height: 100%; padding: 0; }
#player .art-frame {
  width: min(100%, 340px, 36dvh);
  width: min(100%, 340px, 100cqh);
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(11, 31, 59, 0.16);
}
/* No transcript yet: the art, smaller, over the note (leaving the note its room). */
#player .tx-art {
  width: min(56vw, 240px, 26dvh);
  width: min(56vw, 240px, max(64px, calc(100cqh - 130px)));
  margin: 4px auto 14px; padding: 0; border-radius: 18px;
}
/* Back to now (the transcript), over the middle's lower edge. */
#player .tx-now { margin: -46px 0 8px; height: 40px; }

/* The talk: its title, the speaker (to their page), where it was given. */
#player .player-meta { margin: 4px 0 0; text-align: center; }
#player .player-meta h2 { margin: 0; font: 700 23px/1.15 var(--display); letter-spacing: -0.015em; color: var(--ink); }
#player-speaker { display: inline-block; margin-top: 3px; font: 600 17px/1.3 var(--sans); color: var(--clay-dark); text-decoration: none; }
#player .player-meta p { margin: 1px 0 0; font-size: 15px; color: var(--ink-2); }

/* Speed · Download · Add to Library · Share · More, right under the title: one tray across the whole width, every
   button at least 48px to tap. */
#player .player-tools {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
  margin: 10px -12px 0; padding: 3px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--paper);
}
#player .player-tools button {
  display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 56px; padding: 6px 1px;
  border: 0; border-radius: 15px; background: none; color: var(--ink);
  font: 500 12px/1.1 var(--sans); white-space: normal; text-align: center; text-wrap: balance;
}
#player .player-tools button b { height: 24px; }
#player .player-tools button i { height: 24px; }
#player .player-tools button:active { opacity: 1; background: color-mix(in srgb, var(--ink) 7%, transparent); }
/* In Library, Downloaded: the icon in the client's blue, the word in the blue that reads on cream. */
#player .player-tools button[aria-pressed="true"] i { color: var(--clay); }
#player .player-tools button[aria-pressed="true"] span { color: var(--clay-dark); }

/* Ask the speaker (round 14): the speaker is a verified member; one 48px button under the title, to a new post
   at The Parking Lot with the talk attached and the speaker mentioned. */
#player .player-ask { display: flex; justify-content: center; margin: 10px 0 0; }
#player .player-ask-btn {
  display: inline-grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; justify-content: center;
  min-height: 48px; padding: 6px 18px; border: 1px solid var(--clay); border-radius: 999px;
  background: color-mix(in srgb, var(--clay) 14%, transparent); color: var(--clay-dark);
  font: 600 16px/1.2 var(--sans); text-align: left;
}
#player .player-ask-btn svg { grid-row: 1 / span 2; display: block; }
#player .player-ask-btn small { grid-column: 2; font: 400 13px/1.2 var(--sans); color: var(--ink-2); }
#player .player-ask-btn:active { background: color-mix(in srgb, var(--clay) 24%, transparent); }

/* A talk this person can't play yet (round 14): who can, then Own the album and Join Speaker Guide+ side by side (48px),
   right under the title where the eye lands. */
#player .player-locked {
  margin: 12px 0 0; padding: 12px 14px 14px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--paper); text-align: center;
}
#player .player-locked p { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 0 0 12px; font-size: 15.5px; line-height: 1.4; color: var(--ink); }
#player .player-locked p svg { flex: 0 0 auto; margin-top: 2px; color: var(--ink-2); }
#player .player-locked-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#player .player-locked-btns .btn { margin: 0; min-height: 48px; padding: 12px 10px; font-size: 15.5px; }
#player .player-locked-btns .btn:only-child { grid-column: 1 / -1; }
@media (max-width: 340px) { #player .player-locked-btns { grid-template-columns: 1fr; } }

/* The language bar, when the talk is in another language than theirs. */
#player .player-lang { margin: 8px 0 0; }

/* The scrubber and its times. */
#player .scrub { margin: 10px 0 0; }
#player .times { font-size: 13px; }

/* Back · Play · Ahead, last, just above the navigation: play in the very middle of the screen, the skips evenly
   either side. */
#player .controls {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 28px;
  margin: 6px 0 0;
}
#back15 { grid-column: 1; justify-self: end; }
#big-play { grid-column: 2; }
#ahead15 { grid-column: 3; justify-self: start; }
#player .ctl { width: 56px; height: 56px; border-radius: 50%; color: var(--ink); }
#player .ctl:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
#player .big-play {
  width: 80px; height: 80px;
  background: var(--ink); color: var(--bg);
  box-shadow: 0 10px 26px rgba(11, 31, 59, 0.28);
}

/* The transcript's word being said: navy ink on a gold highlighter (on the navy look, the word itself in gold). */
#transcript .tx-s.now .tx-w.on {
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent);
}
:root[data-theme="dark"] #transcript .tx-s.now .tx-w.on {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 24%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 24%, transparent);
}

/* Up next: each talk's art, small and square. */
#player .sh-thumb { width: 48px; border-radius: 10px; }

/* Nothing has played yet. */
#player.empty .sh-mid { display: none; }

/* A short phone (375×667 and the like): a little less around the art, which keeps what's left. */
@media (max-height: 700px) {
  #player .player-views { margin: 4px 0 2px; }
  #player .player-meta h2 { font-size: 20px; -webkit-line-clamp: 1; }
  #player-speaker { margin-top: 1px; font-size: 16px; }
  #player .player-meta p { font-size: 14px; }
  #player .player-tools { margin-top: 8px; }
  #player .scrub { margin-top: 6px; }
  #player .controls { margin-top: 4px; }
  #player .big-play { width: 76px; height: 76px; }
}

/* A note at the bottom while the player is open: just over the scrubber, clear of the big controls. */
body.sh-player-open #toast { bottom: calc(max(16px, calc(env(safe-area-inset-bottom) + 8px)) + 146px); }
body.sh-player-open #dock:not([hidden]) ~ #toast { bottom: calc(var(--sh-nav-h) + 162px); }

/* ---------- The More menu sliding in and out, and inner pages swiped back ---------- */
/* The menu comes in from the right (from the photo) and a swipe right pushes it back out; an inner
   page swiped from its left edge slides right and goes back (app.js, swipe.js). The screen clips sideways, so a
   page sliding out never makes the screen scroll sideways; up-and-down stays the browser's (the page scrolls) while
   sideways is the swipe's (swipe.js sets touch-action: pan-y on the screen). */
#lib-screen { overflow-x: clip; }
#view.sh-in-right { animation: sh-in-right 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sh-in-right { from { transform: translateX(100%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #view.sh-in-right { animation: none; } }

/* Pictures never start the browser's own drag (a mouse swipe on the player's art or a sheet would otherwise drag
   the image instead of the panel; phones don't do this, computers do). */
#player img, .sheet img, #lib-screen img, #welcome img { -webkit-user-drag: none; user-drag: none; }

/* ---------- Signed out: Welcome, Create Your Account, Welcome Back, Check your email (app.js: openWelcome) ---------- */
/* One dark screen for all of them, the same in both looks: a full-bleed picture (fixed, so it stays put while a form
   scrolls up for the keyboard) under a navy gradient that's at least 60% navy wherever words sit, cream words on
   it, in a column 440px wide at the most and 20px in from the edges (a 375px phone shows everything). */
#welcome {
  position: relative; isolation: isolate;
  max-width: none; min-height: 100dvh; padding: 0;
  background: var(--navy); color: var(--cream-brand);
  color-scheme: dark;
}
#welcome a { color: var(--cream-brand); }
#welcome .sh-scene { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--navy); }
/* The pictures (900×1350 portraits, their subjects in the upper half, the lower half already dark): the top of each
   always shows; the next one loads behind and fades in over the one showing. */
#welcome .sh-scene-pic {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  opacity: 0; transition: opacity 500ms ease;
}
#welcome .sh-scene-pic.on { opacity: 1; }
/* A landscape standing in for a picture that couldn't load is a bright dawn scene: dimmed, so the words still read. */
#welcome .sh-scene-pic.sh-fallback { filter: brightness(0.7) saturate(0.85); object-position: center; }
/* The navy over the picture: thin at the top (the picture shows), 60% from 40% of the way down and nearly solid at
   the foot, where the welcome's words are. Under the forms, which start higher, 60% from a fifth of the way down. */
#welcome .sh-scene::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 59, 0.3) 0%, rgba(11, 31, 59, 0.38) 24%, rgba(11, 31, 59, 0.62) 40%, rgba(11, 31, 59, 0.86) 62%, rgba(11, 31, 59, 0.97) 100%);
}
#welcome:is([data-showing="up"], [data-showing="in"], [data-showing="sent"]) .sh-scene::after {
  background: linear-gradient(180deg, rgba(11, 31, 59, 0.5) 0%, rgba(11, 31, 59, 0.66) 20%, rgba(11, 31, 59, 0.84) 45%, rgba(11, 31, 59, 0.95) 100%);
}
@media (prefers-reduced-motion: reduce) { #welcome .sh-scene-pic { transition: none; } }

#welcome .sh-welcome-in {
  display: flex; flex-direction: column; min-height: 100dvh;
  max-width: 440px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
}
/* The top row: ‹ (the forms) at the left, Skip (the welcome) at the right; 48px each. */
#welcome .sh-top { display: flex; justify-content: space-between; align-items: center; min-height: 48px; margin: 0 -8px; }
#welcome .sh-back, #welcome .sh-skip {
  display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0; border: 0; border-radius: 24px;
  background: none; color: var(--cream-brand); font: 500 16px var(--sans);
}
#welcome .sh-skip { margin-left: auto; padding: 0 14px; }
#welcome .sh-back i, #welcome .sh-back svg { display: block; }
#welcome :is(.sh-back, .sh-skip):active { background: rgba(248, 244, 233, 0.14); }
/* The Speaker Guide mark, its name and "Talks · Events · Community", in the middle. */
#welcome .sh-mark { display: grid; justify-items: center; gap: 4px; margin: 0 0 14px; text-align: center; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); }
#welcome .sh-mark .logo { display: block; width: 58px; height: 58px; margin-bottom: 4px; border-radius: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
#welcome .sh-mark-name { font: 700 30px/1 var(--display); letter-spacing: -0.015em; }
#welcome .sh-mark-tag { font: 500 11px/1.3 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85; }
/* Here from a shared link or an invite: a small blue card (member.css's cream one is for the pages inside). */
#welcome .welcome-invite {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 14px;
  background: rgba(59, 167, 249, 0.18); border: 1px solid rgba(59, 167, 249, 0.42);
  color: var(--cream-brand); font-size: 14.5px; line-height: 1.4; text-align: center;
}
#welcome .welcome-invite b { display: inline; font-weight: 700; }
#welcome[data-showing="sent"] .welcome-invite { display: none; }

/* The welcome: the words low on the picture, then the dots, Get Started and "Already have an account?". */
#welcome .sh-pane-welcome { flex: 1 1 auto; display: flex; flex-direction: column; }
#welcome .sh-slides { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; }
#welcome .sh-slide { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
#welcome .sh-headline {
  margin: 0; font: 400 44px/1.04 'DM Serif Display', Georgia, serif; letter-spacing: -0.01em; color: var(--cream-brand);
}
#welcome .sh-headline:focus { outline: none; }
#welcome .sh-lede { margin: 14px 0 0; font-size: 17px; line-height: 1.45; color: rgba(248, 244, 233, 0.92); }
/* The four marks: a frosted square each, its name under it. */
#welcome .sh-marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
#welcome .sh-marks li { display: grid; justify-items: center; align-content: start; gap: 7px; min-width: 0; text-align: center; font: 500 12.5px/1.2 var(--sans); text-wrap: balance; }
#welcome .sh-marks i {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px;
  background: rgba(248, 244, 233, 0.13); border: 1px solid rgba(248, 244, 233, 0.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#welcome .sh-marks svg { display: block; }
/* A slide stepping in: from the side it comes from. */
#welcome .sh-slide.sh-from-right { animation: sh-slide-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
#welcome .sh-slide.sh-from-left { --sh-from: -32px; animation: sh-slide-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sh-slide-in { from { opacity: 0; transform: translateX(var(--sh-from, 32px)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #welcome .sh-slide { animation: none !important; } }
/* The dots: 48px each to tap, the one you're on a cream pill. */
#welcome .sh-dots { display: flex; justify-content: center; margin: 10px 0 0; }
#welcome .sh-dot { display: grid; place-items: center; width: 36px; height: 48px; padding: 0; border: 0; background: none; }
#welcome .sh-dot i { display: block; width: 8px; height: 8px; border-radius: 4px; background: rgba(248, 244, 233, 0.38); transition: width 200ms ease, background-color 200ms ease; }
#welcome .sh-dot.on i { width: 24px; background: var(--cream-brand); }

/* Buttons: a cream pill for the one thing to do, frosted ones for the rest; 54px tall. */
#welcome .sh-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px; margin: 0; padding: 12px 18px;
  border: 1px solid transparent; border-radius: 999px;
  font: 600 17px/1.2 var(--sans); letter-spacing: 0.01em; text-decoration: none;
}
#welcome .sh-btn + .sh-btn { margin-top: 10px; }
#welcome .sh-btn:disabled { opacity: 0.55; }
#welcome .sh-btn:active { transform: translateY(1px); }
#welcome .sh-btn-cream { background: var(--cream-brand); color: var(--navy); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
#welcome .sh-btn-glass {
  background: rgba(248, 244, 233, 0.1); color: var(--cream-brand); border-color: rgba(248, 244, 233, 0.34);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#welcome .sh-btn-glass:active { background: rgba(248, 244, 233, 0.2); }
#welcome .sh-btn i, #welcome .sh-btn svg { display: block; flex: 0 0 auto; }
#welcome .sh-btn-go { margin-top: 8px; }
#welcome .sh-btn-go i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
/* "Already have an account? Sign In", "New to Speaker Guide? Create an Account": the bold part is a 48px button. */
#welcome .sh-switch { margin: 14px 0 0; text-align: center; font-size: 15.5px; color: rgba(248, 244, 233, 0.85); }
#welcome .sh-link {
  display: inline-block; min-height: 48px; margin: -14px 0; padding: 0 6px; border: 0; background: none;
  color: var(--cream-brand); font: 700 16px/48px var(--sans); text-decoration: none;
}
#welcome .sh-link:active { opacity: 0.7; }
#welcome .sh-link-quiet { font-weight: 500; font-size: 15px; }

/* The forms. */
#welcome .sh-title { margin: 0; text-align: center; font: 400 36px/1.1 'DM Serif Display', Georgia, serif; letter-spacing: -0.01em; color: var(--cream-brand); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); }
#welcome .sh-title:focus { outline: none; }
#welcome .sh-sub { margin: 10px 0 20px; text-align: center; font-size: 16.5px; line-height: 1.45; color: rgba(248, 244, 233, 0.88); }
#welcome .sh-sub b { color: var(--cream-brand); }
/* A box: an icon at the left, the words, and in the password's the eye; 56px tall. */
#welcome .sh-field {
  display: flex; align-items: center; min-height: 56px; margin: 0 0 12px; padding: 0 4px 0 16px;
  border: 1px solid rgba(248, 244, 233, 0.3); border-radius: 16px;
  background: rgba(248, 244, 233, 0.09); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#welcome .sh-field > i { display: block; flex: 0 0 auto; width: 22px; height: 22px; color: rgba(248, 244, 233, 0.75); }
#welcome .sh-field > i svg { display: block; }
#welcome .sh-field input {
  flex: 1 1 auto; min-width: 0; width: auto; margin: 0; padding: 15px 12px;
  border: 0; border-radius: 12px; background: none; box-shadow: none;
  color: var(--cream-brand); font: 17px var(--sans);
}
#welcome .sh-field input::placeholder { color: rgba(248, 244, 233, 0.6); }
#welcome .sh-field input:focus { outline: none; border: 0; box-shadow: none; }
#welcome .sh-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59, 167, 249, 0.3); }
/* A browser filling it in for them keeps the dark box. */
#welcome .sh-field input:-webkit-autofill, #welcome .sh-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cream-brand); -webkit-box-shadow: 0 0 0 1000px #1b3357 inset; caret-color: var(--cream-brand);
  transition: background-color 9999s ease-out;
}
#welcome .sh-eye { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(248, 244, 233, 0.8); }
#welcome .sh-eye svg { display: block; }
#welcome .sh-eye:active { background: rgba(248, 244, 233, 0.14); }
#welcome .sh-hint { margin: -4px 0 12px 4px; font-size: 14px; color: rgba(248, 244, 233, 0.72); }
#welcome .sh-right { display: flex; justify-content: flex-end; margin: -2px 0 10px; }
#welcome .sh-note { margin: 12px 0 0; text-align: center; font-size: 15px; line-height: 1.4; color: rgba(248, 244, 233, 0.88); }
#welcome .sh-error {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 12px;
  background: rgba(216, 55, 44, 0.24); border: 1px solid rgba(255, 143, 122, 0.6);
  color: #ffe1db; font-size: 15px; line-height: 1.4;
}
#welcome :is(.sh-note, .sh-error):empty { display: none; }
/* "or continue with", then Apple and Google as the owner set them up, then Email. */
#welcome .sh-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; font-size: 14px; color: rgba(248, 244, 233, 0.8); }
#welcome .sh-or::before, #welcome .sh-or::after { content: ''; flex: 1 1 auto; height: 1px; background: rgba(248, 244, 233, 0.25); }
#welcome .sh-oauth { display: grid; gap: 10px; margin: 0 0 10px; }
#welcome .sh-oauth .sh-btn { margin: 0; }
#welcome .sh-terms { margin: 22px 0 0; text-align: center; font-size: 13.5px; line-height: 1.5; color: rgba(248, 244, 233, 0.8); }
#welcome .sh-fine { margin: 20px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: rgba(248, 244, 233, 0.75); }
/* Check your email. */
#welcome .sh-sent { text-align: center; }
#welcome .sh-sent-ico { display: grid; place-items: center; width: 84px; height: 84px; margin: 8px auto 16px; border-radius: 50%; background: rgba(248, 244, 233, 0.12); border: 1px solid rgba(248, 244, 233, 0.26); }
#welcome .sh-sent-ico svg { display: block; }
/* A short phone (375×667): a little less of everything, so the welcome's words, dots and button fit without scrolling. */
@media (max-height: 700px) {
  #welcome .sh-mark { margin-bottom: 8px; }
  #welcome .sh-mark .logo { width: 46px; height: 46px; margin-bottom: 2px; border-radius: 13px; }
  #welcome .sh-mark-name { font-size: 26px; }
  #welcome .sh-headline { font-size: 37px; }
  #welcome .sh-lede { margin-top: 10px; font-size: 16px; }
  #welcome .sh-marks { margin-top: 14px; }
  #welcome .sh-marks i { width: 44px; height: 44px; border-radius: 13px; }
  #welcome .sh-dots { margin-top: 4px; }
  #welcome .sh-title { font-size: 32px; }
}

/* The welcome's words aren't for selecting (a finger that swipes the slides shouldn't paint them blue); boxes still are. */
#welcome { user-select: none; -webkit-user-select: none; }
#welcome input, #welcome textarea { user-select: text; -webkit-user-select: text; }

/* ---------- The tour (round 14): a first-time walkthrough of the five tabs (app.js) ---------- */
/* One coach card, fixed just above the dock (under it in the stacking order, so the tabs stay tappable), a pointer
   at its foot under the tab it describes (--sh-tour-x, measured by app.js), the tab lit with a blue ring meanwhile.
   Nothing on the page moves. White card and navy words on the cream look; the navy look's card on navy. */
#tour {
  position: fixed; z-index: 29; left: 0; right: 0; bottom: calc(var(--dock-h) + 16px);
  display: flex; justify-content: center; padding: 0 12px; pointer-events: none;
}
#tour .sh-tour-card {
  pointer-events: auto; position: relative; width: min(100%, 440px);
  padding: 14px 18px 10px; border-radius: 18px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(11, 31, 59, 0.28);
  touch-action: pan-y;
}
#tour .sh-tour-card:focus { outline: none; }
#tour .sh-tour-card:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
/* The pointer: a square turned 45°, half under the card's bottom edge. */
#tour .sh-tour-card::after {
  content: ''; position: absolute; bottom: -10px; left: var(--sh-tour-x, 50%);
  width: 18px; height: 18px; margin-left: -9px; border-radius: 3px;
  background: var(--paper); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
#tour .sh-tour-step { margin: 0 0 2px; font-size: 11.5px; color: var(--clay-dark); }
#tour .sh-tour-title { margin: 0; font: 700 22px/1.2 var(--display); letter-spacing: -0.015em; color: var(--ink); }
#tour .sh-tour-text { margin: 6px 0 0; font-size: 16.5px; line-height: 1.45; color: var(--ink); }
/* The dots: 48px each to tap, the one you're on a blue pill. */
#tour .sh-tour-dots { display: flex; justify-content: center; margin: 2px 0 0; }
#tour .sh-dot { display: grid; place-items: center; width: 36px; height: 48px; padding: 0; border: 0; background: none; }
#tour .sh-dot i { display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--line-strong); transition: width 200ms ease, background-color 200ms ease; }
#tour .sh-dot.on i { width: 24px; background: var(--clay); }
/* Skip at the left, Next (Done) at the right, 48px each. */
#tour .sh-tour-btns { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: -2px; }
#tour .sh-tour-skip {
  min-height: 48px; margin: 0 0 0 -10px; padding: 0 10px; border: 0; border-radius: 12px; background: none;
  color: var(--ink-2); font: 500 16px var(--sans); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ink-2) 50%, transparent);
}
#tour .sh-tour-skip:active { background: color-mix(in srgb, var(--ink) 6%, transparent); }
#tour .btn.sh-tour-next { width: auto; min-width: 120px; min-height: 48px; margin: 0; padding: 12px 26px; }
/* A card stepping in from the side it comes from (the welcome's slide). */
#tour .sh-tour-card.sh-from-right { animation: sh-slide-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
#tour .sh-tour-card.sh-from-left { --sh-from: -32px; animation: sh-slide-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { #tour .sh-tour-card { animation: none !important; } }
/* The tab the card is about: lit in blue, with a soft ring that breathes. */
#tabs a.sh-tour-on { color: var(--sh-nav-on-text); font-weight: 700; }
#tabs a.sh-tour-on i { color: var(--sh-nav-on); }
#tabs a.sh-tour-on::before {
  content: ''; position: absolute; inset: 5px 4px; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--clay), 0 0 0 6px color-mix(in srgb, var(--clay) 22%, transparent);
  animation: sh-tour-ring 1.6s ease-in-out infinite;
}
@keyframes sh-tour-ring { 0%, 100% { box-shadow: 0 0 0 2px var(--clay), 0 0 0 5px color-mix(in srgb, var(--clay) 18%, transparent); } 50% { box-shadow: 0 0 0 2px var(--clay), 0 0 0 9px color-mix(in srgb, var(--clay) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { #tabs a.sh-tour-on::before { animation: none; } }
/* A short phone: a little less inside the card. */
@media (max-height: 700px) {
  #tour .sh-tour-card { padding: 12px 16px 8px; }
  #tour .sh-tour-text { font-size: 16px; }
}
@media print { #tour { display: none !important; } }

/* ---------- Printing (round 14: the admin's sheet of codes; admin.css lays the sheet itself out) ---------- */
/* Only the page itself goes to paper: no header, no bottom navigation or mini player, no player, no toast, nothing
   fixed over the page; a white page with black ink, the whole width. */
@media print {
  #topbar, #dock, #tabs, #mini, #player, #toast, #notice, .lot-fab { display: none !important; }
  body { background: #fff !important; color: #000; }
  .screen, #lib-screen, #msg-screen { max-width: none; min-height: 0; padding: 0; }
  #view, #msg-view { padding: 0; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- In the iPhone app (.in-ios on <html> and <body>: native.js, docs/ios-plan.md) ---------- */
/* Nothing is sold in the app: "Speaker Guide+ is managed on our website" in a calm note, and (US only, when the owner allows
   it) the one "Join or buy on our website" button, a full-width 48px button. Google and Apple sign-in stay out of
   the app (app.js draws none; this is in case one was drawn before). */
.in-ios .sh-oauth { display: none !important; }
.ios-managed { display: grid; gap: 10px; margin: 16px 0 0; }
.ios-note {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 16px;
  background: var(--paper); box-shadow: var(--shadow); color: var(--ink); font-size: 16px; line-height: 1.45;
}
.ios-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--clay-dark); }
.ios-lede { margin: 14px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink); }
.btn.ios-web-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 0;
}
.btn.ios-web-btn svg { flex: 0 0 auto; }
.ios-offer { margin-top: 16px; }
.ios-access { margin: 10px 0 0; }

/* ---------- Before the first word to Bill W. or Dr. Bob: the AI note (app.js, once per account) ---------- */
.sh-ai-note { margin: 4px 0 18px; font-size: 17px; line-height: 1.5; color: var(--ink); }
.sh-ai-btns { display: grid; gap: 10px; }
.sh-ai-btns .btn { width: 100%; min-height: 48px; margin: 0; }
/* The iPhone app signs in with email and password: "Continue with Email" (a link that would open Safari, not the app)
   and its "or continue with" line stay out (Forgot Password? and Create an Account stay). */
.in-ios .sh-with { display: none !important; }
/* The Downloads page in the iPhone app with no connection: Open your downloads (the app's own offline player). */
.dl-offline { display: grid; gap: 10px; margin: 0 0 16px; }
.dl-offline .hint { margin: 0; }
.dl-offline .btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; }

/* Speaker Guide mark (web/data/icon.png): a navy square, rounded like the old drawn mark. */
img.logo { object-fit: cover; border-radius: 23%; background: #0b1f3b; }

/* The two-tone wordmark from the concept board: Speaker in cream, Guide in blue. */
.brand-name b, .sh-mark-name span { font-weight: inherit; color: var(--blue); }