/* SecondSpeaker presenter: phone layout (under 900 px) plus the few shared additions the
   phone work needed (Remote badge, Sync to screen button, Q&A toggle). Loaded after app.css.
   Desktop (900 px and up) keeps the app.css two column layout untouched.
   W5: on phones the presentation controls live in a fixed bottom dock; the sticky header is slim.
   W9: the dock has three rows laid out for a left thumb (timer, Open pill and More on row 1; Black and
   Sync screen on row 2; Next left and Prev right on row 3) and a More sheet above it (planned time,
   Go to Q&A, Export, Reset session, Sign out). presenter.js moves the elements into the slots. */

/* ---------- shared additions (all widths) ---------- */
.status-badge.warn { background: var(--ss-warn-bg); color: var(--ss-warn-text); border-color: var(--ss-warn-text); }
.pres-badges { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pres-nav-slot, .pres-next-slot, .pres-badge-slot, .pres-jump-slot, .pres-plan-slot { display: none; }
.pres-dock, .pres-sheet, .sheet-backdrop { display: none; }
.qa-toggle { display: none; }
.pres-controls, .pres-timer-btns, .pres-foot, .tabs, .pres-nav-slot, .pres-dock, .pres-sheet { touch-action: manipulation; }
.btn, .tab { touch-action: manipulation; -webkit-tap-highlight-color: rgba(245, 166, 35, 0.18); }
/* Desktop: keep Export, Sync screen, Reset and Sign out on one line at 1280 px wide */
@media (min-width: 900px) { .pres-foot { gap: 6px; } .pres-foot .btn { padding-left: 12px; padding-right: 12px; } .pres-foot #syncnow { padding-left: 8px; padding-right: 8px; gap: 6px; } }

/* ---------- phone layout ---------- */
@media (max-width: 899px) {
  /* Only html carries overflow-x hidden (it propagates to the viewport). Setting overflow on body would make
     body its own scroll container and the sticky header would stop sticking. */
  html { overflow-x: hidden; overflow-y: auto; height: auto; }
  body.presenter { height: auto; min-height: 100%; overflow: visible; font-size: 16px; -webkit-text-size-adjust: 100%; }
  /* --dock-h is measured by presenter.js (dock height including the safe area); the fallback covers a no JS moment */
  .pres-wrap { display: flex; flex-direction: column; height: auto; min-height: 100vh; width: 100%; max-width: 100vw; padding-bottom: var(--dock-h, calc(140px + env(safe-area-inset-bottom))); box-sizing: border-box; }
  /* Both columns dissolve so their children become the single column, ordered below. */
  .pres-left, .pres-right { display: contents; }

  /* 1. slim sticky header: slide id + jump select on line one, title, position, planned time, badges on line two */
  .pres-top {
    order: 1; position: sticky; top: 0; z-index: 5;
    display: block; padding: 8px 10px 8px;
    background: var(--ss-paper); border-bottom: 1px solid var(--ss-line);
    box-shadow: var(--ss-shadow);
  }
  .pres-preview { display: none; }
  .pres-meta { gap: 0; }
  .pres-title { display: none; }
  .pres-slide-id {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: auto auto;
    column-gap: 8px; row-gap: 4px; align-items: center; font-size: 14px; font-weight: 400; line-height: 1.3;
  }
  .pres-slide-id #cur-id { grid-column: 1; grid-row: 1; font-family: var(--ss-mono); font-size: 20px; font-weight: 700; color: var(--ss-brand); white-space: pre; }
  .pres-jump-slot { display: block; grid-column: 2 / -1; grid-row: 1; min-width: 0; }
  .pres-jump-slot select { width: 100%; max-width: none; min-height: 44px; font-size: 16px; padding: 8px 10px; }
  .pres-slide-id #cur-title { grid-column: 1 / 3; grid-row: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ss-ink); font-weight: 600; }
  .pres-slide-id small { grid-column: 3; grid-row: 2; margin-left: 0; font-size: 12px; white-space: nowrap; }
  .pres-badge-slot { display: inline-flex; grid-column: 4; grid-row: 2; justify-self: end; }
  .pres-badge-slot .status-badge { font-size: 11px; padding: 3px 7px; }
  .pres-times { display: none; } /* elapsed and the timer buttons moved to the dock, planned to the More sheet */
  .pres-meta .pres-next { display: none; }

  /* 2. notes, large and readable, then the next slide line */
  .pres-notes { order: 2; flex: none; overflow: visible; padding: 16px 16px 8px; font-size: 20px; line-height: 1.55; min-height: 38vh; }
  .pres-next-slot { order: 3; display: block; padding: 0 16px 14px; }
  .pres-next-slot .pres-next { font-size: 15px; color: var(--ss-muted); border-top: 1px solid var(--ss-line); padding-top: 10px; }
  .pres-qrurl { order: 4; flex-wrap: wrap; padding: 10px 12px; }
  .pres-qrurl input { flex: 1 1 100%; font-size: 16px; min-height: 44px; }
  .pres-qrurl .btn { min-height: 44px; }

  /* 3. Q&A as a collapsible section with the Live and Clusters tabs */
  .pres-right-head { order: 5; position: relative; padding: 8px 10px; gap: 6px; border-top: 1px solid var(--ss-line); }
  .qa-toggle {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
    background: transparent; border: 1px solid var(--ss-line); border-radius: var(--ss-radius); color: var(--ss-ink); font-size: 16px; font-weight: 700;
  }
  .qa-toggle .chev { display: inline-block; transition: transform 0.15s; font-size: 14px; color: var(--ss-muted); }
  body.qa-collapsed .qa-toggle .chev { transform: rotate(-90deg); }
  .pres-right-head .pres-badges { display: none; } /* the badges live in the sticky header on phones */
  .tab { min-height: 44px; padding: 8px 14px; font-size: 16px; }
  .tab .badge { font-size: 13px; padding: 2px 8px; }
  .pane { order: 6; flex: none; max-height: 60vh; overflow: auto; padding: 10px; border-bottom: 1px solid var(--ss-line); }
  body.qa-collapsed .pane { display: none !important; }
  .pane-tools .btn.small { min-height: 40px; padding: 8px 12px; font-size: 14px; }
  .item .actions .btn.small { min-height: 40px; padding: 8px 12px; font-size: 14px; }
  .item .text { font-size: 16px; line-height: 1.4; }
  .item .reply { font-size: 15px; }

  /* 4. the desktop control row and footer are empty on phones (everything moved to the dock or the sheet) */
  .pres-controls, .pres-foot { display: none; }
  .toast { bottom: calc(var(--dock-h, 190px) + 10px); max-width: 92vw; text-align: center; z-index: 50; }

  /* 5. fixed bottom dock (W9, left thumb), three rows, every target at least 44 px:
        row 1: elapsed timer + Start or Pause + Reset (left), Open / Close pill and More (right);
        row 2: Black toggle (left, 2 parts) and Sync screen with its state line (right, 3 parts);
        row 3: Next (left, gold, 3 parts) and Prev (right, 2 parts), 64 px tall.
        Respects the iOS home indicator through the safe area inset; presenter.js measures --dock-h. */
  .pres-dock {
    display: flex; flex-direction: column; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: var(--ss-paper); border-top: 1px solid var(--ss-line);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.35);
  }
  .dock-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .dock-status { gap: 6px; flex-wrap: wrap; } /* wraps only if a wide font makes the row too long (the dock then grows, --dock-h follows) */
  .dock-timer { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
  .dock-timer .elapsed { font-family: var(--ss-mono); font-size: 20px; font-weight: 700; letter-spacing: 0; line-height: 1; min-width: 56px; }
  .dock-timer .elapsed.over { color: var(--ss-warn-text); }
  .dock-timer .pres-timer-btns { gap: 4px; }
  .dock-timer .btn.small { min-height: 44px; padding: 6px 8px; font-size: 13px; font-weight: 600; }
  /* one slot for Start and Pause: only the one that applies is shown (desktop keeps both) */
  body.timer-running .dock-timer #t-start { display: none; }
  body:not(.timer-running) .dock-timer #t-pause { display: none; }
  .dock-open-slot { display: inline-flex; flex: none; margin-left: auto; }
  .dock-open-slot .open-toggle { min-height: 44px; padding: 4px 8px 4px 10px; font-size: 13px; gap: 5px; }
  .dock-open-slot .open-toggle .act { font-size: 11px; padding: 2px 7px; }
  .dock-open-slot .open-toggle.is-unknown .act { display: none; } /* "Unknown": the whole pill retries, no tail needed */
  .dock-open-slot .open-toggle.is-unknown { padding-right: 12px; }
  .more-btn { flex: none; width: 44px; min-height: 44px; padding: 0; position: relative; color: var(--ss-ink); }
  .more-btn::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; transform: translate(-50%, -50%);
    box-shadow: -8px 0 0 currentColor, 8px 0 0 currentColor;
  }
  .more-btn[aria-expanded="true"] { background: var(--ss-line); }
  .dock-tools { gap: 8px; }
  .dock-black-slot { display: flex; flex: 2 1 0; min-width: 0; }
  .dock-sync-slot { display: flex; flex: 3 1 0; min-width: 0; }
  .dock-black-slot .btn, .dock-sync-slot .btn { flex: 1 1 auto; min-height: 48px; min-width: 0; }
  .dock-black-slot .black-toggle { font-size: 16px; font-weight: 600; justify-content: center; }
  .dock-sync-slot .sync-btn { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; column-gap: 6px; row-gap: 2px; padding: 6px 10px; line-height: 1.2; }
  .dock-sync-slot .sync-btn .sync-main { flex: 0 0 100%; text-align: center; font-size: 15px; font-weight: 600; }
  .dock-sync-slot .sync-btn .st-dot { order: 1; }
  .dock-sync-slot .sync-btn .sync-state { order: 2; display: inline; font-size: 12px; color: var(--ss-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 16px); }
  .dock-sync-slot .sync-btn .st-dot.is-ok ~ .sync-state { color: var(--ss-ok-text); }
  .dock-sync-slot .sync-btn .st-dot.is-warn ~ .sync-state { color: var(--ss-warn-text); }
  .dock-sync-slot .sync-btn .st-dot.is-bad ~ .sync-state { color: var(--ss-bad-text); }
  .pres-nav-slot { display: flex; gap: 10px; }
  .pres-nav-slot .btn.big { flex: 2 1 0; min-height: 64px; font-size: 22px; font-weight: 700; padding: 14px 10px; border-radius: 12px; }
  .pres-nav-slot .btn.big#next { flex: 3 1 0; font-size: 24px; }
  .pres-nav-slot .btn.big#prev { font-weight: 600; }

  /* 6. More sheet: slides up above the dock; backdrop covers the page and the dock (tap closes) */
  .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 7; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.2s; }
  .sheet-backdrop.is-open { opacity: 1; }
  .sheet-backdrop[hidden], .pres-sheet[hidden] { display: none; }
  .pres-sheet {
    display: flex; flex-direction: column; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: var(--dock-h, 190px); z-index: 8;
    max-height: calc(100vh - var(--dock-h, 190px) - 40px); overflow: auto;
    padding: 10px 12px 14px; background: var(--ss-paper-2); color: var(--ss-ink);
    border-top: 3px solid var(--ss-brand); border-bottom: 1px solid var(--ss-line);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.35);
    transform: translateY(100%); transition: transform 0.2s ease-out; outline: none;
  }
  .pres-sheet.is-open { transform: translateY(0); }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .sheet-title { font-size: 13px; font-weight: 700; color: var(--ss-muted); text-transform: uppercase; letter-spacing: var(--ss-ls-label); }
  .sheet-close { min-height: 44px; padding: 8px 14px; font-size: 15px; }
  .sheet-plan { display: flex; align-items: baseline; gap: 8px; padding: 6px 2px 8px; border-bottom: 1px solid var(--ss-line); }
  .sheet-plan .planned { font-size: 14px; color: var(--ss-muted); }
  .sheet-plan .planned .lbl::after { content: " time for this slide"; }
  .sheet-plan .planned b { font-family: var(--ss-mono); font-size: 20px; color: var(--ss-ink); margin-left: 6px; }
  .sheet-items { display: flex; flex-direction: column; gap: 8px; }
  .sheet-items .btn { width: 100%; min-height: 48px; font-size: 16px; text-align: left; padding: 10px 14px; }
  .sheet-items .pres-signout { display: block; width: 100%; min-height: 44px; padding: 12px 14px; font-size: 15px; text-align: left; text-decoration: none; color: var(--ss-muted); border: 1px solid transparent; border-radius: var(--ss-radius); }
  .sheet-items .pres-signout:hover { color: var(--ss-ink); border-color: var(--ss-line); }
  /* the key gate sits above the dock and the sheet */
  .pres-keygate { z-index: 100; }
}

/* Narrow phones (360 px class): the pill drops its Close / Open tail (the whole pill is the button,
   the dot and the word carry the state) so the status row stays on one line next to the timer */
@media (max-width: 369px) {
  .dock-open-slot .open-toggle .act { display: none; }
  .dock-open-slot .open-toggle { padding-right: 12px; }
}
@media (max-width: 349px) {
  .dock-timer .btn.small { padding: 6px 7px; font-size: 12px; }
  .dock-timer .elapsed { font-size: 18px; min-width: 54px; }
}

/* Very short phones in landscape: keep the dock compact */
@media (max-width: 899px) and (max-height: 440px) {
  .pres-nav-slot .btn.big { min-height: 52px; font-size: 18px; padding: 10px; }
  .dock-black-slot .btn, .dock-sync-slot .btn { min-height: 44px; }
  .pres-notes { min-height: 0; }
}