/* HIVE - live presentations (present.js), the collaborators' course (academy.js), the entry and
 * follow pages. Ported from Krios (itself from CollHub). Colours from the Hive tokens; buttons and
 * fields are styled here (pr-btn, pr-input) because the Hive pages carry no shared button kit.
 * Training is purple, so a collaborator never mistakes the course for a client demo. */
:root {
  --pr-surface: var(--hv-surface);
  --pr-line: var(--hv-border);
  --pr-primary: var(--hv-brand-secondary);
  --pr-primary-50: var(--hv-brand-50);
  --pr-ink: var(--hv-text);
  --pr-ink-2: var(--hv-text-2);
  --pr-muted: var(--hv-text-muted);
  --pr-surface-2: var(--hv-surface-alt);
  --pr-radius: 8px;
  --pr-radius-lg: 12px;
  --pr-shadow: 0 12px 32px rgba(16, 24, 40, .18);
  --pr-danger: var(--hv-danger);
  --pr-success: var(--hv-success);
  --pr-train: var(--hv-train);
  --pr-train-50: var(--hv-train-50);
}

/* ---------- buttons and fields of these tools */
.pr-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--pr-line); border-radius: var(--pr-radius);
  background: var(--pr-surface); color: var(--pr-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.pr-btn:hover:not(:disabled) { border-color: var(--pr-primary); }
.pr-btn:disabled { opacity: .55; cursor: not-allowed; }
.pr-btn-sm { min-height: 36px; padding: 0 10px; font-size: 13px; }
.pr-btn-primary { background: var(--pr-primary); border-color: var(--pr-primary); color: var(--hv-on-brand); }
.pr-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.pr-btn-success { background: var(--pr-success); border-color: var(--pr-success); color: var(--hv-on-brand); }
.pr-btn-danger { background: var(--pr-danger); border-color: var(--pr-danger); color: var(--hv-on-brand); }
.pr-btn-light { background: var(--pr-surface-2); }
.pr-btn-ghost { background: none; border-color: transparent; }
.pr-input { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--pr-line); border-radius: var(--pr-radius); font: inherit; font-size: 14px; color: var(--pr-ink); background: var(--pr-surface); }
.pr-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.pr-help { font-size: 12px; color: var(--pr-muted); margin-top: 4px; }
@media (pointer: coarse) { .pr-btn, .pr-btn-sm, .pr-input { min-height: 44px; } }

/* ---------- launch buttons (presenter only, never recorded) */
.pr-launch { position: fixed; right: 16px; bottom: 16px; z-index: 2500; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 16px; border: 0; border-radius: 999px; background: var(--pr-primary); color: var(--hv-on-brand); font: inherit; font-weight: 600; box-shadow: var(--pr-shadow); cursor: pointer; text-decoration: none; }
.pr-launch:hover { filter: brightness(1.08); }
.pr-launch.is-training { background: var(--pr-train); }
body.pr-presenting .pr-launch { display: none; }


/* ---------- presenter console */
.pr-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 100vw; z-index: 2600; background: var(--pr-surface); border-left: 1px solid var(--pr-line);
  box-shadow: var(--pr-shadow); display: flex; flex-direction: column; color: var(--pr-ink); font-size: 14px; }
.pr-panel[hidden] { display: none; }
.pr-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--pr-line); font-size: 15px; }
.pr-head i { color: var(--pr-primary); }
.pr-head b { flex: 1; }
.pr-head .pr-btn { min-width: 44px; min-height: 44px; cursor: pointer; }
.pr-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pr-hint { margin: 0; color: var(--pr-ink-2); font-size: 13.5px; line-height: 1.5; }
.pr-wide { width: 100%; justify-content: center; min-height: 44px; cursor: pointer; }
.pr-h { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--pr-muted); font-weight: 600; }
.pr-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--pr-line); border-radius: var(--pr-radius); background: var(--pr-surface);
  padding: 10px 12px; cursor: pointer; min-height: 44px; }
.pr-item:hover { border-color: var(--pr-primary); }
.pr-item span { flex: 1; display: flex; flex-direction: column; }
.pr-item small { color: var(--pr-muted); }
.pr-back { align-self: flex-start; cursor: pointer; min-height: 40px; }
.pr-title { margin: 0; font-size: 16px; font-weight: 600; }
.pr-link { display: flex; gap: 6px; }
.pr-link .pr-input { flex: 1; min-width: 0; font-size: 12.5px; }
.pr-link .pr-btn { cursor: pointer; }
.pr-switch { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--pr-line); border-radius: var(--pr-radius); padding: 10px 12px; cursor: pointer; margin: 0; }
.pr-switch input { margin-top: 3px; width: 18px; height: 18px; cursor: pointer; flex: none; }
.pr-switch span { display: flex; flex-direction: column; }
.pr-switch small { color: var(--pr-muted); font-size: 12px; }
.pr-count { font-size: 13px; color: var(--pr-ink-2); }
.pr-count i { color: var(--pr-primary); margin-right: 4px; }
.pr-step { background: var(--pr-primary-50); border-radius: var(--pr-radius); padding: 12px; }
.pr-step small { color: var(--pr-primary); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.pr-step b { display: block; margin: 4px 0; }
.pr-step p { margin: 0 0 8px; color: var(--pr-ink-2); font-size: 13.5px; line-height: 1.5; }
.pr-nav { display: flex; gap: 8px; }
.pr-nav .pr-btn { flex: 1; justify-content: center; min-height: 44px; cursor: pointer; }
.pr-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-tools .pr-btn { cursor: pointer; min-height: 38px; }
.pr-tools .pr-btn.is-on { border-color: var(--hv-brand-accent); color: var(--pr-train); }
.pr-chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pr-chap { width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: var(--pr-radius); padding: 8px 10px; cursor: pointer; min-height: 40px; color: var(--pr-ink); }
.pr-chap:hover { background: var(--pr-surface-2); }
.pr-chap.is-here { border-color: var(--pr-primary); background: var(--pr-primary-50); font-weight: 600; }
.pr-chap i { color: var(--pr-primary); width: 20px; }
.pr-foot { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--pr-line); flex-wrap: wrap; }
.pr-foot .pr-btn { cursor: pointer; min-height: 40px; }
body.pr-presenting { margin-right: 360px; }
body.pr-picking, body.pr-picking * { cursor: crosshair !important; }
@media (max-width: 1100px) { body.pr-presenting { margin-right: 0; } }

/* private notices of the console */
.pr-toasts { position: fixed; right: 376px; bottom: 16px; z-index: 2700; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
body:not(.pr-presenting) .pr-toasts { right: 16px; }
.pr-toast { background: var(--pr-ink); color: var(--hv-on-brand); border-radius: var(--pr-radius); padding: 10px 14px; box-shadow: var(--pr-shadow); font-size: 14px; }
.pr-toast.is-error { background: var(--pr-danger); }


/* ---------- what the presenter shows (recorded with her page, so the prospects see it too) */
.pr-card { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2540; width: 560px; max-width: calc(100vw - 24px); background: var(--pr-surface);
  border-radius: var(--pr-radius-lg); box-shadow: var(--pr-shadow); padding: 16px 52px 16px 20px; border-top: 4px solid var(--pr-primary); color: var(--pr-ink); }
.pr-card[hidden] { display: none; }
body.pr-presenting .pr-card { left: calc((100vw - 360px) / 2); }
.pr-card small { color: var(--pr-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.pr-card b { display: block; font-size: 18px; margin: 2px 0 6px; }
.pr-card p { margin: 0; color: var(--pr-ink-2); font-size: 15.5px; line-height: 1.55; }
.pr-card-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: none; border-radius: 50%; background: none; color: var(--pr-ink-2); cursor: pointer; }
.pr-card-x:hover { background: var(--pr-surface-2); }
.pr-rect { position: fixed; z-index: 2545; pointer-events: none; border: 4px solid var(--hv-highlight); border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 18px 4px rgba(57, 255, 20, .75), inset 0 0 14px rgba(57, 255, 20, .35); animation: pr-glow 1.6s ease-in-out infinite; }
@keyframes pr-glow { 50% { box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 30px 8px rgba(57, 255, 20, .95), inset 0 0 18px rgba(57, 255, 20, .5); } }
@media (prefers-reduced-motion: reduce) { .pr-rect { animation: none; } }
.pr-draw { position: fixed; inset: 0; z-index: 2590; cursor: crosshair; background: rgba(0, 0, 0, .04); touch-action: none; }

/* ---------- the prospect's screen, seen by the presenter while he tries */
.pr-watch { position: fixed; z-index: 2580; top: 70px; left: 20px; right: 380px; bottom: 20px; background: var(--hv-replay-bg); border-radius: var(--pr-radius-lg); box-shadow: var(--pr-shadow);
  display: flex; flex-direction: column; overflow: hidden; border: 3px solid var(--pr-primary); }
.pr-watch.is-small { top: auto; left: auto; right: 380px; width: 420px; height: 300px; }
body:not(.pr-presenting) .pr-watch, body:not(.pr-presenting) .pr-watch.is-small { right: 20px; }
.pr-watch-head { display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--pr-primary); color: var(--hv-on-brand); font-size: 14px; }
.pr-watch-head b { flex: 1; }
.pr-watch-head .pr-btn { color: var(--hv-on-brand); min-height: 40px; cursor: pointer; }
.pr-watch-wait { font-size: 12.5px; opacity: .85; }
.pr-watch-screen { position: relative; flex: 1; overflow: hidden; }

/* ---------- viewer */
.pr-strip { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 2700; background: var(--pr-ink); color: var(--hv-on-brand); border-radius: 0 0 12px 12px;
  padding: 8px 16px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; max-width: calc(100vw - 24px); pointer-events: none; }
.pr-strip i { color: var(--hv-strip-accent); }
.pr-strip.is-explore { background: var(--pr-primary); }
.pr-screen { position: fixed; inset: 0; z-index: 2600; background: var(--hv-replay-bg); overflow: hidden; }
.pr-screen[hidden] { display: none; }
.pr-screen-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--hv-replay-text); font-size: 16px; padding: 24px; text-align: center; }
.pr-screen .replayer-wrapper, .pr-watch-screen .replayer-wrapper { position: absolute; transform-origin: 0 0; }
.pr-screen .replayer-wrapper iframe, .pr-watch-screen .replayer-wrapper iframe { border: 0; background: var(--hv-on-brand); }
.pr-screen.pr-nocursor .replayer-mouse { display: none; }

/* follow page (waiting card) */
.pr-follow { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--pr-surface-2); }
.pr-follow-card { background: var(--pr-surface); border-radius: 14px; box-shadow: var(--pr-shadow); padding: 2.25rem 2rem; width: 100%; max-width: 460px; text-align: center; }
.pr-follow-card img { width: 56px; height: 56px; margin-bottom: 12px; }
.pr-follow-card h1 { font-size: 1.3rem; margin: 0 0 .5rem; text-wrap: balance; }
.pr-follow-card p { color: var(--pr-ink-2); margin: 0; }
.pr-follow-wait { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; color: var(--pr-muted); font-size: 14px; }
.pr-follow-wait i { color: var(--pr-primary); }

/* ---------- the course */
.ac-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; max-width: 1200px; }
@media (max-width: 991.98px) { .ac-wrap { grid-template-columns: minmax(0, 1fr); } }
.ac-side { display: flex; flex-direction: column; gap: 6px; }
.ac-list { display: flex; flex-direction: column; gap: 6px; }
.ac-list[open] { display: flex; }
.ac-list > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--pr-line); border-radius: var(--pr-radius); background: var(--pr-surface); font-weight: 600; margin-bottom: 6px; }
.ac-list .ac-mod { margin-bottom: 6px; }
@media (min-width: 992px) { .ac-list > summary { display: none; } }
.ac-progress { background: var(--pr-surface); border: 1px solid var(--pr-line); border-radius: var(--pr-radius); padding: 12px; }
.ac-progress b { font-size: 22px; }
.ac-bar { height: 8px; border-radius: 999px; background: var(--pr-surface-2); overflow: hidden; margin-top: 8px; }
.ac-bar span { display: block; height: 100%; background: var(--pr-train); }
.ac-mod { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--pr-surface); border: 1px solid var(--pr-line); border-radius: var(--pr-radius);
  padding: 10px 12px; cursor: pointer; min-height: 44px; color: var(--pr-ink); }
.ac-mod:hover { border-color: var(--pr-train); }
.ac-mod.is-here { border-color: var(--pr-train); background: var(--pr-train-50); }
.ac-mod i.ac-ico { color: var(--pr-train); width: 22px; text-align: center; }
.ac-mod span { flex: 1; }
.ac-mod .ac-state { color: var(--pr-success); font-size: 14px; }
.ac-main { background: var(--pr-surface); border: 1px solid var(--pr-line); border-radius: var(--pr-radius-lg); padding: 22px 24px; min-width: 0; }
@media (max-width: 575.98px) { .ac-main { padding: 16px; } }
.ac-main h2 { margin: 0 0 4px; font-size: 1.5rem; }
.ac-main h3 { margin: 22px 0 8px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.ac-main h3 i { color: var(--pr-train); }
.ac-main p, .ac-main dd { color: var(--pr-ink-2); line-height: 1.6; }
.ac-main dt { margin-top: 10px; }
.ac-say { border-left: 4px solid var(--pr-primary); padding-left: 14px; }
.ac-ex { border: 1px solid var(--pr-line); border-radius: var(--pr-radius); padding: 12px 14px; margin-bottom: 10px; display: flex; gap: 12px; align-items: flex-start; }
.ac-ex.is-done { border-color: var(--pr-success); background: rgba(31, 138, 76, .06); }
.ac-ex > div { display: flex; flex-direction: column; min-width: 0; }
.ac-ex small { color: var(--pr-ink-2); }
.ac-ex-mark { font-size: 22px; color: var(--pr-muted); background: none; border: none; padding: 0; width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; }
button.ac-ex-mark:hover { background: var(--pr-surface-2); color: var(--pr-primary); }
.ac-ex.is-done .ac-ex-mark { color: var(--pr-success); cursor: default; }
.ac-ex-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ac-ex-acts .pr-btn { min-height: 44px; cursor: pointer; }
.ac-ex-ok { color: var(--pr-success) !important; font-weight: 600; margin-top: 4px; }
.ac-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--pr-line); }
.ac-foot .pr-btn { min-height: 44px; cursor: pointer; }
.ac-bar-ex { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2550; width: 720px; max-width: calc(100vw - 24px); background: var(--pr-surface);
  border: 2px solid var(--pr-train); border-radius: var(--pr-radius-lg); box-shadow: var(--pr-shadow); padding: 12px 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ac-bar-ex[hidden] { display: none; }
.ac-bar-ex > i { color: var(--pr-train); font-size: 22px; }
.ac-bar-ex > div:first-of-type { flex: 1 1 260px; display: flex; flex-direction: column; min-width: 0; }
.ac-bar-ex small { color: var(--pr-ink-2); }
.ac-bar-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ac-bar-acts .pr-btn { min-height: 44px; cursor: pointer; }
body.ac-exercising .pr-launch { bottom: 110px; }

/* ---------- phone: the console takes the whole screen, the windows fit it */
@media (max-width: 575.98px) {
  .pr-panel { width: 100vw; }
  .pr-watch, .pr-watch.is-small { top: 10px; left: 10px; right: 10px; bottom: 10px; width: auto; height: auto; }
  .pr-toasts { right: 16px; left: 16px; max-width: none; }
}

/* standalone pages (entry link, follow page) */
body.pr-standalone { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--pr-ink); }

/* Up to 1024px Hive docks a full-width back-nav bar at the bottom (common.css, R4-01): stay above it. */
@media (max-width: 1024px) {
  .pr-launch { bottom: calc(var(--backnav-bar-h, 54px) + 12px); }
  .ac-bar-ex { bottom: calc(var(--backnav-bar-h, 54px) + 12px); }
  body.ac-exercising .pr-launch { bottom: calc(var(--backnav-bar-h, 54px) + 150px); }
}

.ac-muted { color: var(--pr-muted); }
.ac-alert { border: 1px solid var(--pr-train); background: var(--pr-train-50); border-radius: var(--pr-radius); padding: 12px 14px; }
.ac-page { margin-top: 16px; }