/* css/island-timer.css — the pomodoro, on the island (js/island-timer.js).

   Drawn after the iPhone's own timer: orange figures and an orange ring
   running down in a black capsule that splits off beside the island, and,
   opened, the time set large with a pause well in the timer's colour and a
   grey cancel well beside it. A break is the same object in green. */

.island {
  --tm-orange: #ff9f0a;
  --tm-green: #30d158;
  --tm-gap: 8px;
}

/* ------------------------------------------------------------ the capsule

   A second, smaller island beside the first — the phone's way of showing
   two things at once. It lives inside the island's element so it rides
   every move the island makes, sits on its reading-end side, and the island
   shifts over by half its width so the pair stays centred. It hides while
   the island is open or answering something, and comes back out of the
   island's edge when it settles. */
.island-timer {
  --tm-tone: var(--tm-orange);
  position: absolute;
  top: 0;
  right: calc(100% + var(--tm-gap));
  z-index: 1;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--header-bar-h);
  min-width: var(--header-bar-h);
  padding: 0 15px 0 13px;
  direction: ltr;

  color: var(--tm-tone);
  background: var(--nav-ocean);
  border: var(--nav-edge-w) solid var(--nav-edge);
  border-radius: 999px;
  box-shadow: var(--nav-shadow);
  font: 600 1rem/1 var(--nav-face);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  opacity: 0;
  visibility: hidden;
  scale: 0.35;
  translate: 30px 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    scale 520ms var(--nav-hop),
    translate 600ms cubic-bezier(0.3, 1.15, 0.4, 1),
    visibility 0s linear 200ms;
}

.island-timer[data-phase="rest"] { --tm-tone: var(--tm-green); }

.island.has-timer[data-drawer=""]:not(.is-activity) .island-timer {
  opacity: 1;
  visibility: visible;
  scale: 1;
  translate: 0 0;
  pointer-events: auto;
  transition:
    opacity 220ms ease 80ms,
    scale 560ms var(--nav-hop) 60ms,
    translate 640ms cubic-bezier(0.3, 1.15, 0.4, 1) 40ms,
    visibility 0s;
}

@media (hover: hover) and (pointer: fine) {
  .island.has-timer[data-drawer=""]:not(.is-activity) .island-timer:hover { scale: 1.06; }
  /* Hovering the capsule is not hovering the island. */
  .main-header .island.has-timer[data-drawer=""]:not(.is-activity):not(.is-pressed):has(.island-timer:hover) { scale: 1; }
}

.island.has-timer[data-drawer=""]:not(.is-activity) .island-timer.is-pressed {
  scale: 0.9;
  transition: scale 110ms cubic-bezier(0.2, 0, 0, 1);
}

.island-timer:focus-visible { outline: 2px solid var(--nav-blue); outline-offset: 3px; }

/* The ring runs down from twelve o'clock, as the phone's does. */
.island-timer-ring {
  flex: none;
  width: 20px;
  height: 20px;
  rotate: -90deg;
}

.island-timer-track,
.island-timer-run {
  fill: none;
  stroke-width: 2.8;
}

.island-timer-track { stroke: color-mix(in srgb, var(--tm-tone) 28%, transparent); }

.island-timer-run {
  stroke: var(--tm-tone);
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  transition: stroke-dashoffset 260ms linear;
}

.island-timer.is-paused .island-timer-time,
.island-timer.is-paused .island-timer-ring { opacity: 0.55; }

/* Finished and waiting for an answer: the figures blink, as the phone's do. */
.island-timer.is-done .island-timer-time { animation: tm-blink 1.1s steps(1, end) infinite; }

@keyframes tm-blink { 50% { opacity: 0.25; } }

/* The island moves over for the capsule, springing, not sliding — on the
   translate transition css/navigation.css gives it. */
.main-header .island.has-timer[data-drawer=""]:not(.is-activity) {
  translate: calc((var(--tm-w, 96px) + var(--tm-gap)) / 2) 0;
}

@media (max-width: 720px) {
  .island-timer {
    gap: 6px;
    padding: 0 12px 0 10px;
    font-size: 0.9rem;
  }
  .island-timer-ring { width: 18px; height: 18px; }

  /* A phone has no room for both at full width, so the island narrows to
     leave the capsule its space — animated for this one move only. */
  .main-header .island.has-timer[data-drawer=""] {
    width: min(340px, calc(100% - 20px - var(--tm-w, 96px) - var(--tm-gap)));
  }
  .main-header .island.is-making-room,
  .main-header.is-scrolled .island.is-making-room {
    transition:
      scale 560ms var(--nav-hop),
      translate 640ms cubic-bezier(0.3, 1.15, 0.4, 1),
      width 560ms cubic-bezier(0.3, 1.1, 0.4, 1);
  }
}

/* -------------------------------------------------------------- the panel */

.tm-note {
  margin: 0 0 14px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--nav-muted);
}

.tm-settings {
  display: grid;
  gap: 8px;
  margin: 4px 0 14px;
}

.tm-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--nav-raise);
  border-radius: 14px;
}

.tm-field-label {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--nav-paper);
}

/* The system stepper: one dark well, minus and plus at its ends, and the
   number between them typed straight in when a step of five is not it. */
.tm-stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  direction: ltr;
  background: var(--nav-raise-hover);
  border-radius: 10px;
}

.tm-step {
  display: grid;
  place-items: center;
  width: 38px;
  height: 32px;
  padding: 0;
  color: var(--nav-paper);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.tm-step:hover { background: var(--nav-raise-strong); }
.tm-step:active { background: #48484a; }
.tm-step:disabled { opacity: 0.3; cursor: default; background: transparent; }
.tm-step-glyph { width: 16px; height: 16px; }

.tm-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  padding: 0 4px;
  color: var(--nav-paper);
  cursor: text;
}

.tm-value input {
  width: 3.2ch;
  padding: 2px 0;
  font: 600 1.05rem/1 var(--nav-face);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--nav-paper);
  background: transparent;
  border: 0;
  border-radius: 6px;
  -moz-appearance: textfield;
  appearance: textfield;
  caret-color: var(--nav-blue);
}

.tm-value input::-webkit-inner-spin-button,
.tm-value input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.tm-value span { font-size: 0.72rem; color: var(--nav-muted); }

/* Start, as the phone's clock app draws it: green, tinted, round. */
.tm-start {
  width: 100%;
  min-height: 50px;
  padding: 10px 16px;
  color: var(--tm-green);
  background: color-mix(in srgb, var(--tm-green) 22%, transparent);
  border: 0;
  border-radius: 999px;
  font: 700 0.95rem/1.4 var(--nav-face);
  cursor: pointer;
  transition: background-color 140ms ease, scale 140ms ease;
}

.tm-start:hover { background: color-mix(in srgb, var(--tm-green) 30%, transparent); }
.tm-start:active { scale: 0.97; }

/* Running: the phone's expanded timer. */
.tm-live {
  --tm-tone: var(--tm-orange);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 6px 16px;
}

.tm-live[data-phase="rest"],
.tm-progress[data-phase="rest"],
.tm-done[data-phase="rest"] { --tm-tone: var(--tm-green); }

.tm-live-readout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tm-live-label {
  font: 600 0.84rem/1.3 var(--nav-face);
  color: var(--tm-tone);
}

.tm-live-time {
  font: 500 3.2rem/1 var(--nav-face);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--tm-tone);
  direction: ltr;
  text-align: right;
}

.tm-live.is-paused .tm-live-time { opacity: 0.55; }

.tm-live-controls {
  display: flex;
  gap: 12px;
  flex: none;
}

.tm-round {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: scale 120ms ease, background-color 120ms ease;
}

.tm-round:active { scale: 0.9; }
.tm-round-glyph { width: 22px; height: 22px; }
.tm-round-cancel { color: #ffffff; background: #3a3a3c; }
.tm-round-cancel:hover { background: #48484a; }
.tm-round-go { color: var(--tm-tone); background: color-mix(in srgb, var(--tm-tone) 24%, transparent); }
.tm-round-go:hover { background: color-mix(in srgb, var(--tm-tone) 32%, transparent); }

.tm-progress {
  --tm-tone: var(--tm-orange);
  height: 4px;
  margin: 0 6px 12px;
  overflow: hidden;
  background: var(--nav-raise-strong);
  border-radius: 999px;
}

.tm-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--tm-tone);
  border-radius: inherit;
  transition: width 260ms linear;
}

.tm-live + .tm-progress + .tm-note { margin-inline: 6px; }

.tm-adjust {
  padding-top: 8px;
  border-top: 1px solid var(--nav-rule);
}

.tm-adjust summary {
  padding: 6px;
  list-style: none;
  font: 600 0.84rem/1.4 var(--nav-face);
  color: var(--nav-blue);
  cursor: pointer;
}

.tm-adjust summary::-webkit-details-marker { display: none; }
.tm-adjust .tm-settings { margin-top: 6px; }
.tm-adjust .tm-note { margin: 0 6px 4px; }

/* Time's up: the question, and two answers. */
.tm-done {
  --tm-tone: var(--tm-orange);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px 6px;
  text-align: center;
}

.tm-done-glyph {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  color: var(--tm-tone);
  background: color-mix(in srgb, var(--tm-tone) 20%, transparent);
  border-radius: 50%;
  animation: tm-ring 1.2s ease-in-out 2;
}

.tm-done-svg { width: 30px; height: 30px; }

/* The shake a ringing alarm gives its glyph. Twice, then still. */
@keyframes tm-ring {
  0%, 60%, 100% { rotate: 0deg; }
  10% { rotate: -12deg; }
  20% { rotate: 11deg; }
  30% { rotate: -8deg; }
  40% { rotate: 6deg; }
  50% { rotate: -3deg; }
}

.tm-done-title {
  margin: 0 0 6px;
  font: 700 1.35rem/1.35 var(--nav-face);
  color: var(--nav-paper);
}

.tm-done-text {
  max-width: 32ch;
  margin: 0 0 18px;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--nav-muted);
}

.tm-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.tm-choice {
  min-height: 50px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  font: 700 0.9rem/1.3 var(--nav-face);
  cursor: pointer;
  transition: background-color 140ms ease, filter 140ms ease, scale 140ms ease;
}

.tm-choice:active { scale: 0.96; }
.tm-choice-quiet { color: var(--nav-paper); background: var(--nav-raise-hover); }
.tm-choice-quiet:hover { background: var(--nav-raise-strong); }
.tm-choice-go { color: #000000; background: var(--tm-tone); }
.tm-choice-go:hover { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
  .island-timer,
  .island.has-timer[data-drawer=""]:not(.is-activity) .island-timer,
  .main-header .island,
  .main-header.is-scrolled .island,
  .main-header .island.is-making-room,
  .main-header.is-scrolled .island.is-making-room { transition: none; }
  .island-timer.is-done .island-timer-time,
  .tm-done-glyph { animation: none; }
}