/* Focus timer polish (2026-09-18). Loaded after the main stylesheet.

   The switch/round-complete cards and the timer panel painted themselves with
   --kv-surface, which the legacy layer redefines on html.kavvi-v2 as an 82%
   transparent green - so every card showed the blurred page through it and
   looked washed out. Primary actions used --kv-violet-59, a pale mint, under
   near-white text. Everything here uses the theme-aware tokens the rest of the
   app uses: solid raised cards, the real accent fill for primary actions. */

/* ---- Decision / round-complete dialogs ---------------------------------- */
html .focus-modal {
  background: rgba(10, 16, 12, 0.46);
}
html .focus-modal > section {
  width: min(400px, 100%);
  padding: 30px 28px 24px;
  border: 1px solid var(--kv-line-3);
  border-radius: 22px;
  background: var(--kv-card-raised);
  color: var(--kv-text);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.08);
}
html .focus-modal .focus-modal__icon {
  display: block;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: 2px auto 14px;
  padding: 11px;
  border-radius: 14px;
  color: var(--kv-accent-fill);
  background: color-mix(in srgb, var(--kv-accent-fill) 12%, transparent);
}
html .focus-modal .focus-modal__icon.is-done { color: var(--kv-accent-fill); background: color-mix(in srgb, var(--kv-accent-fill) 14%, transparent); }
html .focus-modal small { color: var(--kv-text-muted); letter-spacing: 0.14em; }
html .focus-modal h2 { margin: 6px 0 8px; font-size: 22px; line-height: 1.25; color: var(--kv-text); }
html .focus-modal p { margin: 0 0 22px; color: var(--kv-text-muted); line-height: 1.55; overflow-wrap: anywhere; }
html .focus-modal section > div { gap: 10px; }
/* The two choices stack full width, the switch (primary) on top: side by side
   they squeezed "Switch to <task>" until the task name - the one thing the
   learner needs to read - was cut off. */
html .focus-modal section > div:not(.stack) { flex-direction: column-reverse; }
html .focus-modal section > div:not(.stack) > button { width: 100%; min-width: 0; }
html .focus-modal section > div button {
  min-height: 46px;
  padding-inline: 14px;
  border: 1px solid var(--kv-line-3);
  border-radius: 13px;
  background: transparent;
  color: var(--kv-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
html .focus-modal section > div button > span,
html .focus-modal section > div button { text-align: center; }
html .focus-modal section > div button:hover { background: rgba(var(--kv-ink-rgb), 0.05); border-color: var(--kv-line-3); }
html .focus-modal section > div button.primary {
  border-color: transparent;
  color: var(--kv-on-accent);
  background: var(--kv-accent-fill);
}
html .focus-modal section > div button.primary:hover { filter: brightness(1.08); background: var(--kv-accent-fill); }
/* A very long task name still ends in an ellipsis rather than a third line. */
html .focus-modal section > div:not(.stack) > button {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html .focus-modal section > div.stack button:last-child { border-color: transparent; color: var(--kv-text-muted); }
html .focus-modal .focus-modal__close { background: rgba(var(--kv-ink-rgb), 0.06); color: var(--kv-text-muted); }

/* ---- Timer panel -------------------------------------------------------- */
html .kv-focus__popover,
html .kv-focus__popover.is-sheet {
  border: 1px solid var(--kv-line-3);
  background: var(--kv-card-raised);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
}
html .kv-focus__popover header small { color: var(--kv-text-muted); letter-spacing: 0.14em; }
html .kv-focus__popover header h3 { margin: 4px 0 0; font-size: 16px; line-height: 1.3; color: var(--kv-text); overflow-wrap: anywhere; }

html .kv-focus__hero-ring { width: 132px; height: 132px; background: rgba(var(--kv-ink-rgb), 0.08); }
html .kv-focus__hero-ring.is-running { background: conic-gradient(var(--kv-accent-fill) var(--kv-focus-progress, 0deg), rgba(var(--kv-ink-rgb), 0.08) var(--kv-focus-progress, 0deg)); }
html .kv-focus__hero-ring.is-paused { background: conic-gradient(var(--kv-warning) var(--kv-focus-progress, 0deg), rgba(var(--kv-ink-rgb), 0.08) var(--kv-focus-progress, 0deg)); }
html .kv-focus__hero-ring::before { inset: 7px; background: var(--kv-card-raised); }
/* The time sits on the ring's exact centre. It used to be centred together
   with the "Focusing" label as one stacked pair, which lifted the digits
   ~25px above the middle of the circle; the label now hangs beneath. */
html .kv-focus__hero-ring { display: block; }
html .kv-focus__hero-ring strong {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  margin: 0;
  font-size: 32px;
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
}
html .kv-focus__hero-ring small {
  position: absolute;
  inset-inline: 0;
  top: calc(50% + 23px);
  margin: 0;
  line-height: 1.2;
  text-align: center;
  color: var(--kv-text-muted);
}

html .kv-focus__working span { color: var(--kv-text-muted); }
html .kv-focus__working select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline: 14px 38px;
  border: 1px solid var(--kv-line-3);
  border-radius: 12px;
  color: var(--kv-text);
  background-color: var(--kv-card);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
[dir="rtl"] .kv-focus__working select { padding-inline: 38px 14px; background-position: 19px 50%, 14px 50%; }
html .kv-focus__working select:hover,
html .kv-focus__working select:focus { border-color: var(--kv-accent-fill); }

html .kv-focus__primary {
  color: var(--kv-on-accent);
  background: var(--kv-accent-fill);
}
html .kv-focus__primary:hover { color: var(--kv-on-accent); background: var(--kv-accent-fill); filter: brightness(1.08); }
html .kv-focus__secondary { border-color: var(--kv-line-3); color: var(--kv-text-muted); }

/* ---- The small ring in the nav and on lesson pages ---------------------- */
html .kv-focus-ring { background: rgba(var(--kv-ink-rgb), 0.1); }
html .kv-focus-ring.is-running { color: var(--kv-accent-fill); background: conic-gradient(var(--kv-accent-fill) var(--kv-focus-progress, 0deg), rgba(var(--kv-ink-rgb), 0.1) var(--kv-focus-progress, 0deg)); }
html .kv-focus-ring__track { background: var(--kv-card-raised); }
html .kv-focus__nav.is-running { border-color: color-mix(in srgb, var(--kv-accent-fill) 35%, transparent); background: color-mix(in srgb, var(--kv-accent-fill) 8%, transparent); }
html .kv-focus__nav-clock { color: var(--kv-text); }

@media (max-width: 639px) {
  html .focus-modal > section { padding: 26px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 22px 22px 16px 16px; }
}