/* KINESTA — ecrã de captura ao vivo da app (LiveCaptureView.swift) por cima dos vídeos de demonstração.
   Tudo em pontos do iPhone: --pt = 1 pt de um ecrã de 393 pt (retrato) / 852 pt (paisagem) de largura.
   Margens seguras: retrato 59 pt (topo) / 34 pt (base); paisagem 59 pt (laterais) / 21 pt (base). */

.kcap {
  position: absolute; inset: 1.48% 3.2%;           /* = área do ecrã de .phone (style.css) */
  border-radius: 10% / 4.6%; overflow: hidden;
  background: #000; container-type: inline-size;
  -webkit-user-select: none; user-select: none;
}
.phone.land .kcap { inset: 3.2% 1.48%; border-radius: 4.6% / 10%; }
.phone .kcap > video, .phone.land .kcap > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 0; background: #000; display: block; max-width: none;
}

.kcap-ui {
  --pt: calc(100cqw / 393);
  --cream: #f3ece4; --sec: #b9aea2; --ter: #7a6f65; --accent: #b8977a;
  --ok: #6dbf8e; --danger: #d9675f; --border-strong: #56473b;
  --right: #c8742f; --left: #2a7f8f;
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  color: var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.2; text-align: left;
}
.kcap--land .kcap-ui { --pt: calc(100cqw / 852); }
.kcap-ui svg { display: block; overflow: visible; }

/* ---------- topo (retrato): gradiente + linha X / fase / REC + instrução */
.kcap-top {
  position: absolute; top: 0; left: 0; right: 0;
  padding: calc(67 * var(--pt)) calc(16 * var(--pt)) calc(24 * var(--pt));
  display: flex; flex-direction: column; gap: calc(10 * var(--pt));
  background: linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,.5), rgba(0,0,0,0));
}
.kcap-row { display: flex; align-items: center; gap: calc(10 * var(--pt)); min-height: calc(44 * var(--pt)); }
.kcap-sp { flex: 1 1 0; min-width: 0; }
.kcap-close {
  flex: none; width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: 50%;
  background: rgba(0,0,0,.45); display: grid; place-items: center;
}
.kcap-close svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.kcap-chip {
  flex: none; font-size: calc(13 * var(--pt)); font-weight: 600; letter-spacing: calc(1.4 * var(--pt));
  padding: calc(7 * var(--pt)) calc(12 * var(--pt)); border-radius: 999px; background: rgba(0,0,0,.45);
  white-space: nowrap; line-height: calc(16 * var(--pt));
}
.kcap-rec {
  flex: none; display: flex; align-items: center; gap: calc(5 * var(--pt));
  padding: calc(7 * var(--pt)) calc(9 * var(--pt)); border-radius: 999px; background: rgba(0,0,0,.45);
  font-size: calc(11 * var(--pt)); line-height: calc(13 * var(--pt)); white-space: nowrap;
}
.kcap-rec i { width: calc(8 * var(--pt)); height: calc(8 * var(--pt)); border-radius: 50%; background: var(--danger); }
.kcap-rec b { font-weight: 700; color: var(--cream); }
.kcap-rec span { font-weight: 600; color: var(--sec); }
.kcap-instr {
  font-size: calc(36 * var(--pt)); font-weight: 700; line-height: 1.19; text-align: center;
  text-shadow: 0 0 calc(8 * var(--pt)) rgba(0,0,0,.6);
  overflow: hidden; overflow-wrap: break-word; hyphens: manual;
  max-height: calc(3 * 1.19em);
}
.kcap-badges { height: 0; }

/* ---------- paisagem: barra no topo [X · instrução · REC] dentro das margens laterais */
.kcap--land .kcap-top {
  left: calc(59 * var(--pt)); right: calc(59 * var(--pt));
  padding: calc(8 * var(--pt)) calc(12 * var(--pt)) calc(18 * var(--pt));
  flex-direction: row; align-items: center; gap: calc(12 * var(--pt));
}
.kcap--land .kcap-instr { flex: 1 1 0; min-width: 0; font-size: calc(28 * var(--pt)); max-height: calc(2 * 1.19em); }

/* ---------- base: controlos do profissional (esq.) + pontos das repetições (dir.) */
.kcap-bottom {
  position: absolute; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); bottom: calc(50 * var(--pt));
  display: flex; align-items: flex-end; gap: calc(12 * var(--pt));
}
.kcap--land .kcap-bottom { left: calc(71 * var(--pt)); right: calc(71 * var(--pt)); bottom: calc(33 * var(--pt)); }
.kcap-ctrl { display: flex; align-items: center; gap: calc(12 * var(--pt)); }
.kcap-btn {
  display: inline-flex; align-items: center; gap: calc(7 * var(--pt)); white-space: nowrap;
  border-radius: 999px; color: var(--cream); font-weight: 700;
  font-size: calc(17 * var(--pt)); line-height: calc(20 * var(--pt));
  min-height: calc(54 * var(--pt)); padding: 0 calc(20 * var(--pt)); box-sizing: border-box;
}
.kcap-btn svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); flex: none; }
.kcap-btn--start { background: var(--danger); }
.kcap-btn--stop { background: rgba(0,0,0,.65); box-shadow: inset 0 0 0 calc(2 * var(--pt)) var(--danger); }
.kcap-btn--stop svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.kcap-btn--finish {
  font-size: calc(15 * var(--pt)); font-weight: 600; min-height: calc(44 * var(--pt)); padding: 0 calc(14 * var(--pt));
  background: rgba(0,0,0,.6); box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--border-strong);
}
.kcap-btn--finish svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }
.kcap-timer {
  font: 600 calc(17 * var(--pt)) / calc(20 * var(--pt)) ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  padding: calc(6 * var(--pt)) calc(10 * var(--pt)); border-radius: 999px; background: rgba(0,0,0,.55); white-space: nowrap;
}

.kcap-dots {
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(10 * var(--pt));
  padding: calc(12 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(10 * var(--pt)); background: rgba(0,0,0,.55);
}
.kcap--land .kcap-dots { position: absolute; right: calc(71 * var(--pt)); top: 50%; transform: translateY(-50%); }
.kcap-dots .r { display: flex; align-items: center; gap: calc(10 * var(--pt)); }
.kcap-dots .l {
  width: calc(22 * var(--pt)); text-align: center; font-size: calc(17 * var(--pt)); font-weight: 700;
  line-height: calc(22 * var(--pt)); color: var(--ter);
}
.kcap-dots .d { display: flex; gap: calc(10 * var(--pt)); }
.kcap-dots .d i {
  width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); border-radius: 50%; box-sizing: border-box;
  /* traço de 2 pt centrado no contorno (Circle().stroke) */
  box-shadow: 0 0 0 calc(1 * var(--pt)) var(--c), inset 0 0 0 calc(1 * var(--pt)) var(--c);
}
.kcap-dots .d i.on { background: var(--ok); --c: var(--ok); }

/* ---------- centro: contagem grande e ✓/✗ */
.kcap-mid {
  position: absolute; top: calc(59 * var(--pt)); bottom: calc(34 * var(--pt)); left: 0; right: 0;
  display: grid; place-items: center;
}
.kcap--land .kcap-mid { top: 0; bottom: calc(21 * var(--pt)); left: calc(59 * var(--pt)); right: calc(59 * var(--pt)); }
.kcap-count, .kcap-flash { grid-area: 1 / 1; }
.kcap-count {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(110 * var(--pt)); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 calc(14 * var(--pt)) rgba(0,0,0,.6);
}
.kcap-flash {
  display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--pt));
  padding: 0 calc(24 * var(--pt)); transform-origin: 50% 50%; will-change: transform, opacity;
}
.kcap-flash svg { width: calc(150 * var(--pt)); height: calc(150 * var(--pt)); filter: drop-shadow(0 0 calc(10 * var(--pt)) rgba(0,0,0,.5)); }
.kcap--land .kcap-flash svg { width: calc(110 * var(--pt)); height: calc(110 * var(--pt)); }
.kcap-msg {
  font-size: calc(30 * var(--pt)); font-weight: 700; line-height: 1.2; text-align: center;
  padding: calc(8 * var(--pt)) calc(18 * var(--pt)); border-radius: 999px; background: rgba(0,0,0,.6);
}
.kcap--land .kcap-msg { font-size: calc(24 * var(--pt)); }

.kcap [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .kcap-flash, .kcap-instr { transition: none !important; animation: none !important; }
}