/*
 * RIO OPS - fluxo de missao
 * Complemento visual para os controles existentes de iniciar, pausar,
 * retomar e finalizar. Os estados continuam sendo controlados pelo JS.
 */

.control-grid:has(#btnStart),
.control-grid:has(#btnPause),
.control-grid:has(#btnResume),
.control-grid:has(#btnFinish) {
  align-items:stretch;
}

.control-grid .ctrl-btn[id^='btn'] {
  min-height:82px;
  justify-content:center;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-width:1px;
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset;
}

.control-grid .ctrl-btn[id^='btn']::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  transition:opacity .18s ease;
}

.control-grid .ctrl-btn[id^='btn']:hover::after,
.control-grid .ctrl-btn[id^='btn']:focus-visible::after {
  opacity:1;
}

.control-grid .ctrl-btn[id^='btn']:focus-visible {
  outline:3px solid rgba(230,199,122,.72);
  outline-offset:3px;
}

.control-grid #btnStart {
  font-weight:700;
  box-shadow:0 6px 16px rgba(201,169,97,.15);
}

.control-grid #btnStart::after {
  background:rgba(255,255,255,.12);
}

/* Em execucao, pausar e finalizar formam um par com riscos bem distintos. */
.control-grid #btnPause {
  color:var(--accent-bright);
  border-color:var(--accent-dim);
  background:var(--bg-card);
}

.control-grid #btnPause::after {
  background:rgba(201,169,97,.1);
}

.control-grid #btnResume {
  background:rgba(74,143,92,.12);
  border-color:var(--success);
  box-shadow:0 6px 16px rgba(74,143,92,.1);
}

.control-grid #btnResume::after {
  background:rgba(95,168,112,.12);
}

.control-grid #btnFinish {
  color:var(--danger-bright);
  background:rgba(176,72,72,.055);
  border-color:rgba(209,88,88,.72);
}

.control-grid #btnFinish::after {
  background:rgba(209,88,88,.12);
}

.control-grid #btnPause .ctrl-btn-icon,
.control-grid #btnResume .ctrl-btn-icon,
.control-grid #btnFinish .ctrl-btn-icon {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:15px;
}

.control-grid #btnPause .ctrl-btn-icon {
  background:rgba(201,169,97,.14);
}

.control-grid #btnResume .ctrl-btn-icon {
  background:rgba(74,143,92,.18);
}

.control-grid #btnFinish .ctrl-btn-icon {
  background:rgba(176,72,72,.16);
}

.control-grid .ctrl-btn[id^='btn'] .ctrl-btn-label {
  line-height:1.2;
}

@media (max-width:600px) {
  .control-grid .ctrl-btn[id^='btn'] {
    min-height:76px;
    padding:12px 8px;
  }

  .control-grid .ctrl-btn[id^='btn'] .ctrl-btn-label {
    font-size:9px;
    letter-spacing:1.2px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .control-grid .ctrl-btn,
  .control-grid .ctrl-btn::after {
    transition:none;
  }
}