/* ---------------- centre: phone ---------------- */
  /* The column is the screen and nothing else: every control that acts on it lives
     in the page heading, so no row of chrome takes height from the frame. */
  .shotpane{ align-items:center; justify-content:center; overflow:hidden; }
  .phone-stage{ flex:1 1 auto; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
  .phone{
    position:relative; flex-shrink:0; padding:4px;
    /* Fallback proportion (1080 x 2400) until fitPhone() learns the real device,
       so the frame is never a collapsed bezel before the first poll. */
    width:392px; height:871px;
    background:var(--phone-bezel); border:1px solid var(--phone-line); border-radius:0;
    box-shadow:0 20px 40px -22px rgba(15,23,42,0.4);
    transition:width .22s cubic-bezier(.22,.61,.36,1), height .22s cubic-bezier(.22,.61,.36,1);
  }
  .screen{
    position:relative; width:100%; height:100%;
    border-radius:0; background:var(--screen-bg); overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  #shotImg{ display:block; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .18s ease; }
  #shotImg.loaded{ opacity:1; }
  #shotImg[hidden]{ display:none; }
  .shot-empty{ padding:24px 20px; text-align:center; font-size:12px; line-height:1.5; color:#5C6377; }
  .shot-empty[hidden]{ display:none; }
  .shot-nav{ display:flex; align-items:center; gap:8px; }
  .shot-nav[hidden]{ display:none; }
  .shot-arrow{
    width:30px; height:26px; font-size:14px; line-height:1;
    border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink-dim); cursor:pointer;
    transition:border-color .16s, color .16s, background .16s, transform .12s;
  }
  .shot-arrow:hover:not(:disabled){ border-color:var(--ink-faint); color:var(--ink); }
  .shot-arrow:active:not(:disabled){ transform:scale(0.94); }
  .shot-arrow:disabled{ opacity:0.35; cursor:default; }
  .shot-count{ font-size:11px; color:var(--ink-dim); }

  /* Playback controls as icons: six word-buttons would not fit on one row. */
  .icon-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:24px; padding:0;
    border:1px solid var(--line); border-radius:6px; background:var(--panel);
    color:var(--ink-dim); cursor:pointer;
    transition:border-color .18s, color .18s, background .18s, transform .12s;
  }
  .icon-btn svg{ width:13px; height:13px; display:block; }
  .icon-btn:hover:not(:disabled){ border-color:var(--ink-faint); color:var(--ink); }
  .icon-btn:active:not(:disabled){ transform:scale(0.93); }
  .icon-btn:disabled{ opacity:0.35; cursor:default; }
  .icon-btn.primary{ color:var(--blue); border-color:rgba(37,99,235,0.3); }
  .icon-btn.primary:hover:not(:disabled){ background:rgba(37,99,235,0.08); color:var(--blue); }

  .tgroup{ display:inline-flex; gap:6px; }
  .tgroup[hidden]{ display:none; }
  /* The replay transport: start · previous · play/pause · next · end. The play
     button is the widest of the five, so it reads as the anchor of the row and -
     being the middle of an odd, symmetric set - it sits dead centre. */
  .transport{ gap:4px; }
  .transport .icon-btn.play{ width:30px; }
  .ctl{
    padding:5px 11px; border:1px solid var(--line); border-radius:6px; background:var(--panel);
    font-family:inherit; font-size:11px; color:var(--ink-dim); cursor:pointer;
    transition:border-color .18s, color .18s, background .18s;
  }
  .ctl:hover:not(:disabled){ border-color:var(--ink-faint); color:var(--ink); }
  .ctl.primary{ background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600; }
  .ctl.primary:hover:not(:disabled){ background:#1D4FD8; color:#fff; }
  .ctl:disabled{ opacity:0.4; cursor:default; }