/* Focus mode (design/v5/V5Focus*.dc.html): its own top bar, then one centred stage: the start
   screen, the running session or a recap. Past Sessions and Settings › Focus are in focus-past.css,
   the start screen's switch, menu and split bar in focus-setup.css, the capsule and its panel in
   the toolbar in focus-panel.css. `.m-<mode>` sets --mc, a mode's colour, for an element. */

.m-task { --mc: var(--task); --mct: var(--task-text); }
.m-drift { --mc: var(--drift); --mct: var(--drift-text); }
.m-break { --mc: var(--break); --mct: var(--break-text); }
/* (--mct: the mode's colour where it's words, lifted a little in light) */
.f-mc { color: var(--mct, var(--accent-text)); }

/* read out by screen readers only */
.f-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.focus {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  color: var(--fg);
  font: 400 13px/1.5 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.f-host { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; }
.f-empty { margin: auto; color: var(--muted); }

/* ---- the top bar: the way back, today's date and time; the screen's own tools are in the toolbar */
.f-bar {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  height: 36px;
  pointer-events: none;
}
.f-bar > * { pointer-events: auto; }
.f-date { position: absolute; left: 50%; color: var(--muted); font-size: 12px; white-space: nowrap; transform: translateX(-50%); }
.f-cap {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px 0 10px;
  border-radius: 18px;
  color: var(--fg);
  font: 500 12px var(--font-ui);
  text-decoration: none;
  white-space: nowrap;
}
button.f-cap:not(:has(svg)) { padding: 0 16px; }
.f-cap:disabled { color: var(--faint); }

/* ---- the stage: one centred column */
.f-stage {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 64px 16px 32px;
  overflow-x: hidden; /* the split bar's grip rides a rail moved by a transform, which would count as overflow */
  overflow-y: auto;
  text-align: center;
}
.f-ava { display: grid; flex: none; place-items: center; width: 200px; height: 156px; margin-bottom: 28px; overflow: visible; }
.f-ava-sm { width: 160px; height: 120px; margin-bottom: 16px; }

/* Ava speaking: mono, "Ava · …" */
.f-ava-line { margin: 0; color: var(--muted); font-size: 13px; }
.f-ava-line b { color: var(--ava); font-weight: 600; }

/* inputs on the page */
.f-fld {
  box-sizing: border-box;
  border: 1px solid var(--sep);
  border-radius: 10px;
  outline: none;
  background: var(--card);
  color: var(--fg-strong);
  font: inherit;
}
.f-fld::placeholder { color: var(--placeholder); }
.f-fld:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* the one prominent action: accent tint, white words */
.f-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 360px;
  max-width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 22px;
  background: var(--pri);
  color: var(--fg-strong);
  font: 600 15px var(--font-ui);
  transition: background-color 120ms var(--ease), filter 120ms var(--ease);
}
@media (hover: hover) { .f-primary:hover { filter: brightness(1.15); } }
.f-primary:active { background: var(--pri-hover); }
.f-primary[hidden] { display: none; }

/* ---- running */
.f-run { padding-bottom: 96px; }
.f-run .f-ava { margin-bottom: 4px; }
.f-mode { display: flex; align-items: center; gap: 8px; max-width: 100%; margin: 0; font-size: 13px; }
.f-dot { flex: none; width: 8px; height: 8px; border-radius: 4px; background: var(--mc); transition: background-color 300ms var(--ease); }
.f-mode b { color: var(--mct); font-weight: 600; transition: color 300ms var(--ease); }
.f-sep { color: var(--muted); }
.f-run-task { min-width: 0; overflow: hidden; color: var(--fg); text-overflow: ellipsis; white-space: nowrap; }
.f-run[data-mode="task"] { --mc: var(--task); --mct: var(--task-text); }
.f-run[data-mode="drift"] { --mc: var(--drift); --mct: var(--drift-text); }
.f-run[data-mode="break"] { --mc: var(--break); --mct: var(--break-text); }
.f-timer { margin: 10px 0 8px; color: var(--fg-strong); font-size: 96px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.f-held { margin: 0; color: var(--muted); font-size: 13px; }
.f-run-line { display: flex; flex-direction: column; width: 420px; max-width: 100%; margin-top: 32px; }

/* what's left, under the clock: the countdowns side by side (two with no break planned), each its words,
   its time under them and its bar (it fills as the time goes, on a transform). Past zero it says "over",
   in the warning colour. */
.f-left { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 24px; width: 420px; max-width: 100%; margin-top: 32px; }
.f-left-part { display: flex; flex-direction: column; }
.f-left-part[hidden] { display: none; }
.f-left-name { color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.f-left-val { margin-top: 4px; color: var(--fg); font-size: 15px; font-weight: 500; }
.f-left-bar { display: block; height: 4px; margin-top: 8px; overflow: hidden; border-radius: 2px; background: var(--fill); }
.f-left-fill { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--mc); }
.f-left-all { --mc: var(--muted); }
.f-left-part.over .f-left-val,
.f-left-part.over .f-left-name { color: var(--task-text); }

.f-run > .f-ava-line { margin-top: 28px; }
.f-ticks { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 11px; }
.f-run-acts {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 28px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.f-run-acts > * { pointer-events: auto; }
.f-mseg { width: 360px; height: 48px; padding: 6px; border-radius: 999px; font-size: 13px; }
.f-mseg > .pill { top: 6px; bottom: 6px; }
.f-mseg > button { height: 100%; padding: 0 6px; border: 0; border-radius: 999px; color: var(--muted); font: 500 13px var(--font-ui); white-space: nowrap; }
.f-mseg > button[aria-selected="true"] { color: var(--fg-strong); font-weight: 600; }
.f-mseg[data-mode="task"] > .pill { --pill-c: var(--task); --pill-a: var(--tint-a); }
.f-mseg[data-mode="drift"] > .pill { --pill-c: var(--drift); --pill-a: var(--tint-a); }
.f-mseg[data-mode="break"] > .pill { --pill-c: var(--break); --pill-a: var(--tint-a); }
.f-end { height: 48px; padding: 0 20px; border-radius: 24px; color: var(--fg); font: 500 13px var(--font-ui); white-space: nowrap; }


/* the timeline: a part per stretch, in its mode's colour; the rest of the plan as empty track */
.f-tl { position: relative; display: flex; gap: 2px; width: 100%; height: 16px; margin: -5px 0; }
.f-tl-part { position: relative; display: flex; flex: 1 1 0; align-items: center; min-width: 4px; }
.f-tl-part > i { flex: 1; height: 6px; border-radius: 3px; background: var(--mc); transition: height 120ms var(--ease); }
.f-tl-rest { flex: 1 1 0; height: 6px; align-self: center; border-radius: 3px; background: var(--track); }
.f-tip {
  position: absolute;
  z-index: 5;
  bottom: 20px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  background: var(--solid);
  color: var(--fg);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 120ms var(--ease);
}
.f-tip > i { width: 8px; height: 8px; border-radius: 2px; background: var(--mc); }
.f-tip b { color: var(--fg-strong); font-weight: 600; }
.f-tip span { color: var(--muted); }
@media (hover: hover) {
  .f-tl-part:hover > i { height: 10px; }
  .f-tl-part:hover > .f-tip { opacity: 1; }
}

/* task, drift and break so far */
.f-tots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.f-tots > span { display: inline-flex; align-items: center; gap: 6px; }
.f-tots i { width: 6px; height: 6px; border-radius: 3px; background: var(--mc); }
.f-tots b { color: var(--fg); font-weight: 600; }

/* the log, from the toolbar */
.f-log {
  position: fixed;
  z-index: 40;
  top: 54px;
  right: 12px;
  width: 280px;
  max-height: calc(100vh - 120px);
  padding: 8px;
  overflow-y: auto;
  border-radius: 18px;
  transform-origin: top right;
}
.f-log-head { margin: 0; padding: 4px 10px 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
.f-log-row { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; font-size: 12px; }
.f-log-at { width: 36px; color: var(--muted); }
.f-log-row > i { flex: none; width: 6px; height: 6px; border-radius: 3px; background: var(--mc); }
.f-log-what { flex: 1; min-width: 0; overflow: hidden; color: var(--fg); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.f-log-d { min-width: 40px; color: var(--muted); text-align: right; }

/* ---- the recap */
.f-recap-title { max-width: 420px; margin: 0; overflow: hidden; color: var(--fg-strong); font-size: 22px; font-weight: 600; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.f-recap-when { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.f-recap .f-run-line { margin-top: 32px; }
.f-plan { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.f-recap > .f-ava-line { max-width: 420px; margin-top: 24px; }
/* the save line (UI-10): there only once there's something to say (the end saves at once, so that's
   from the start for a session just ended); a chip while saving, then the green saved chip */
/* (its own class: as `.f-save` it also styled Save as Preset's disclosure on the start screen, which then
   stayed 34 px tall and 8 down while closed: most of the ~70 px over Start Session, UI-10d) */
.f-saved-line { display: flex; align-items: center; justify-content: center; min-height: 22px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 18px; }
.f-saved-line[hidden] { display: none; }
.f-chip { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 22px; padding: 0 10px 0 8px; border-radius: 11px; white-space: nowrap; }
.f-chip-wait { background: var(--fill); color: var(--muted); animation: f-fade 240ms var(--ease) both; }
.f-chip-spin { display: inline-block; width: 10px; height: 10px; box-sizing: border-box; border: 1.5px solid var(--sel); border-top-color: var(--fg); border-radius: 50%; animation: spin 700ms linear infinite; }
/* pops in on the snappy spring, its tick draws itself, then one soft green ring breathes out and fades
   (Ava's Done, in small) */
.f-chip-saved { background: var(--good-soft); color: var(--fg); animation: f-chip-in 380ms var(--sp-snappy) both, f-chip-ring 700ms var(--ease) 360ms both; }
.f-chip-saved svg { flex: none; }
.f-chip-tick { stroke: var(--good); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; animation: f-tick 320ms var(--ease) 80ms forwards; }
.f-save-err { animation: f-fade 200ms var(--ease) both; }
@keyframes f-fade { from { opacity: 0; } }
@keyframes f-chip-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes f-chip-ring {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 45%, transparent); }
  to { box-shadow: 0 0 0 10px color-mix(in srgb, var(--good) 0%, transparent); }
}
@keyframes f-tick { to { stroke-dashoffset: 0; } }
/* reduced motion: a plain fade, no scale or ring (the tick is simply there); the spinner slows rather than
   flickers at the 1 ms every animation gets */
@media (prefers-reduced-motion: reduce) {
  .f-chip-spin { animation-duration: 2.4s !important; }
  .f-chip-saved { animation: f-fade 200ms var(--ease) both !important; }
  .f-chip-tick { animation: none !important; stroke-dashoffset: 0; }
}
:root.rm .f-chip-spin { animation-duration: 2.4s !important; }
:root.rm .f-chip-saved { animation: f-fade 200ms var(--ease) both !important; }
:root.rm .f-chip-tick { animation: none !important; stroke-dashoffset: 0; }
.f-recap-acts { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 24px; }
.f-del { height: 28px; padding: 0 12px; border: 0; border-radius: 14px; color: var(--drift-text); font: 500 12px var(--font-ui); }

/* short windows: the stage steps down rather than scroll */
@media (max-height: 720px) {
  .f-ava { width: 160px; height: 112px; margin-bottom: 16px; }
  .f-ava canvas { width: 160px !important; height: 160px !important; }
  .f-timer { font-size: 72px; }
  .f-left { margin-top: 24px; }
  .f-run-line { margin-top: 24px; }
}
@media (max-width: 520px) {
  .f-timer { font-size: 72px; }
  .f-mseg { width: auto; flex: 1 1 0; min-width: 0; }
  .f-run-acts { right: 16px; left: 16px; }
  .f-date { display: none; }
}