/* pacote gravacao: pausa/retomada, cronômetro, marcas de capítulo e alerta — tudo dentro do #dock (deste pacote).
   Reaproveita @keyframes blink do deck.css (global na página, já carregado antes deste arquivo). */

#pg-alert{display:none;align-items:center;gap:10px;background:var(--ink);border:3px solid var(--red);box-shadow:5px 5px 0 var(--red);
  padding:10px 12px;margin:0 2px 10px;transform:rotate(-1deg)}
#pg-alert.pg-show{display:flex}
#pg-alert .pg-alert-dot{flex:none;width:13px;height:13px;border-radius:50%;background:var(--red);animation:blink .6s steps(1) infinite}
#pg-alert .pg-alert-msg{flex:1;min-width:0;font-family:'Permanent Marker',cursive;font-weight:400;font-size:14px;line-height:1.25;color:#fff}
#pg-alert .pg-alert-x{flex:none;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--li);text-align:right;white-space:nowrap}

#pg-bar{display:none;align-items:center;gap:10px;margin:0 2px 10px}
#pg-bar.pg-show{display:flex}
#pg-time{flex:1;min-width:0;font-size:22px;line-height:1;color:var(--li);text-shadow:2px 2px 0 var(--ink);letter-spacing:.03em;white-space:nowrap;overflow:hidden}
#pg-bar.pg-paused #pg-time{color:var(--paper)}
.pg-btn{flex:none;height:44px;padding:0 14px;display:flex;align-items:center;gap:7px;background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-size:13px;letter-spacing:.05em;transform:rotate(var(--r,-1deg))}
.pg-btn b{font-weight:400}
.pg-btn:active{transform:translate(3px,3px) rotate(0deg);box-shadow:1px 1px 0 var(--ink)}
.pg-pause .pg-dot{width:10px;height:10px;border-radius:50%;background:var(--ink)}
.pg-pause.pg-on{background:var(--red);color:#fff}
.pg-pause.pg-on .pg-dot{background:#fff;animation:blink 1s steps(1) infinite}
.pg-mark{background:var(--li)}

#pg-marks{display:none;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:0 2px 10px;padding-bottom:2px}
#pg-marks.pg-show{display:flex}
#pg-marks::-webkit-scrollbar{display:none}
.pg-chip{flex:none;background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  padding:6px 10px;font-family:'Permanent Marker',cursive;font-weight:400;font-size:12px;line-height:1;white-space:nowrap;transform:rotate(var(--r,0deg))}

@media (min-aspect-ratio:1/1){
  #pg-time{font-size:19px}
  .pg-btn{height:38px;padding:0 11px;font-size:12px}
}