/* The Caply island, as drawn in ui-lab/apple-island.html: one black shape at
   the top of the film that changes size instead of opening panels. The shape's
   width, height and radius are driven by springs in island.js; nothing here
   transitions them. */

.player {
  --blue: #0091ff;
  --green: #30d158;
  --orange: #ff9230;
  --label: #fff;
  --label-2: rgba(235, 235, 245, 0.6);
  --label-3: rgba(235, 235, 245, 0.3);
  --fill: rgba(120, 120, 128, 0.36);
  --fill-2: rgba(120, 120, 128, 0.24);
  --group: #1c1c1e;
  --separator: rgba(255, 255, 255, 0.12);
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: clip;
  border-radius: clamp(22px, 3.4vw, 40px);
  background: #0b0b0c;
  color: var(--label);
  user-select: none;
  container-type: inline-size;
}
.player > video, .player > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ── The shape ──────────────────────────────────────────────────────────── */
.island {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 11px;
  width: 126px;
  height: 37px;
  translate: -50% 0;
  transform-origin: 50% 0;
  transition: opacity 0.22s ease, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), filter 0.22s ease;
}
.island[data-state="hidden"] { opacity: 0; transform: scale(0.72); filter: blur(6px); pointer-events: none; }
.seg button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.island-body {
  position: absolute;
  inset: 0;
  overflow: clip;
  border-radius: 18.5px;
  background: #000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
/* Notch: hangs from the top edge and flares into it with two concave ears. */
.island.is-notch { top: 0; }
.island.is-notch .island-body { box-shadow: none; }
.island.is-notch::before, .island.is-notch::after { content: ""; position: absolute; top: 0; width: 10px; height: 10px; }
.island.is-notch::before { left: -10px; background: radial-gradient(circle at 0 100%, transparent 9.5px, #000 10px); }
.island.is-notch::after { right: -10px; background: radial-gradient(circle at 100% 100%, transparent 9.5px, #000 10px); }

/* One view per state. A view keeps its final size while the shape moves, so
   nothing reflows: it leaves blurred and small, the next arrives sharp. */
.view {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  opacity: 0;
  filter: blur(8px);
  transform: scale(0.9);
  pointer-events: none;
  transition: opacity 0.14s ease, filter 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.island[data-state="compact"] .v-compact,
.island[data-state="hidden"] .v-compact,
.island[data-state="controls"] .v-controls,
.island[data-state="settings"] .v-settings,
.island[data-state="langs"] .v-langs,
.island[data-state="replay"] .v-replay {
  opacity: 1;
  filter: none;
  transform: none;
  transition-delay: 0.07s;
}
.island[data-state="controls"] .v-controls,
.island[data-state="settings"] .v-settings,
.island[data-state="langs"] .v-langs { pointer-events: auto; }
.v-langs { transform: translateX(28px); }
.island[data-state="langs"] .v-settings { transform: translateX(-28px); }

.v-compact, .v-replay { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 11px; }
.v-compact svg { width: 19px; height: 19px; }
.v-compact b { font-size: 13px; font-weight: 600; letter-spacing: -0.04px; color: var(--blue); }
.v-replay svg { width: 18px; height: 18px; color: var(--orange); }
.v-replay b { font-size: 15px; font-weight: 600; letter-spacing: -0.13px; color: var(--orange); font-variant-numeric: tabular-nums; }

.v-controls { display: flex; align-items: center; gap: 6px; padding: 6px; }
.seg { position: relative; flex: 1; height: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-radius: 999px; }
.seg-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% / 3);
  border-radius: 999px;
  background: var(--fill);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform 0.38s cubic-bezier(0.3, 1.25, 0.45, 1);
}
.seg button {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.13px;
  color: var(--label-2);
  border-radius: 999px;
  transition: color 0.2s ease, transform 0.1s ease-out;
}
.seg button[aria-pressed="true"] { color: var(--label); font-weight: 600; }
.seg button:active { transform: scale(0.96); }
.more {
  flex: none;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fill-2);
  transition: background-color 0.15s ease, transform 0.1s ease-out;
}
.player .more:hover { background: var(--fill); }
.more:active { transform: scale(0.94); }
.more svg { width: 18px; height: 18px; }

.v-settings, .v-langs { padding: 14px 14px 16px; display: grid; gap: 12px; text-align: left; }
.set-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 6px; }
.set-head b { font-size: 17px; font-weight: 600; letter-spacing: -0.22px; }
.v-langs .set-head { display: grid; grid-template-columns: 1fr auto 1fr; padding: 0; min-height: 30px; }
.player .done {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--blue);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.13px;
  transition: transform 0.1s ease-out, filter 0.15s ease;
}
.done:hover { filter: brightness(1.1); }
.done:active { transform: scale(0.96); }
.player .back {
  justify-self: start;
  height: 30px;
  padding: 0 8px 0 2px;
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--blue);
  font-size: 17px;
  letter-spacing: -0.22px;
  transition: opacity 0.15s ease;
}
.back:active { opacity: 0.4; }
.back svg { width: 12px; height: 20px; }
.group { border-radius: 24px; background: var(--group); overflow: clip; }
.row {
  position: relative;
  width: 100%;
  min-height: 48px;
  padding: 0 14px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 17px;
  letter-spacing: -0.22px;
  text-align: left;
}
.row + .row::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 0.5px; background: var(--separator); }
.player button.row { padding: 0 14px 0 16px; }
.player button.row:active { background: rgba(255, 255, 255, 0.08); }
.row em { font-style: normal; color: var(--label-2); display: flex; align-items: center; gap: 6px; }
.row em svg { width: 9px; height: 14px; color: var(--label-3); }
.row .tick { width: 15px; height: 14px; color: var(--blue); opacity: 0; transition: opacity 0.12s ease; }
.row[aria-checked="true"] .tick { opacity: 1; }
.seg-s { flex: none; width: 116px; height: 32px; padding: 2px; background: var(--fill-2); }
.seg-s .seg-thumb { top: 2px; left: 2px; height: calc(100% - 4px); width: calc((100% - 4px) / 3); background: #636366; }
.seg-s button { font-size: 13px; letter-spacing: -0.04px; }
.player .switch { flex: none; position: relative; width: 60px; height: 30px; border-radius: 999px; background: rgba(120, 120, 128, 0.32); transition: background-color 0.25s ease; }
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 36px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s cubic-bezier(0.3, 1.2, 0.45, 1);
}
.player .switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.player kbd, .keycap {
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 7px;
  display: inline-grid;
  place-items: center;
  background: rgba(120, 120, 128, 0.36);
  font: 600 13px/1 var(--font);
  letter-spacing: -0.04px;
  color: #fff;
}

/* ── Captions ───────────────────────────────────────────────────────────── */
.captions {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 12%;
  display: grid;
  justify-items: center;
  gap: 0.36em;
  padding: 0 6%;
  text-align: center;
  pointer-events: none;
  font-size: clamp(13px, 2.2cqw, 24px);
}
.captions[data-size="s"] { font-size: clamp(12px, 1.8cqw, 20px); }
.captions[data-size="l"] { font-size: clamp(15px, 2.8cqw, 30px); }
.cap-line {
  padding: 0.3em 0.72em 0.34em;
  border-radius: 0.62em;
  background: rgba(22, 22, 24, 0.62);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.cap-tr {
  font-size: 0.78em;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 14px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
}
.captions[data-bg="off"] .cap-line { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 16px rgba(0, 0, 0, 0.6); }
.cap-line:empty, .cap-tr:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .island, .view, .seg-thumb, .switch::after { transition-duration: 0.01s; }
}

/* the modes follow a finger that slides across them */
.player .js-modes { touch-action: none; }

/* where a finger can take the notch: a strip at the top of the film, and the notch itself */
.player .pull { position: absolute; z-index: 2; left: 50%; top: 0; width: min(64%, 300px); height: 76px; translate: -50% 0; touch-action: none; }
.island { touch-action: none; }

/* the R and T keys have no meaning under a finger: their rows stay on a computer */
@media (hover: none), (pointer: coarse) { .player .v-settings .group + .group { display: none; } }