/* Focus's capsule in the toolbar and the panel it grows into (focus/capsule.js, panel-start.js,
   panel-run.js; design/v5/V5AvaPane.dc.html). The growing itself is core's (capsules.css). */

/* the capsule: the timer icon (36 wide), or while a session runs a mini swarm and the clock in the mode's
   colour. Its width follows the clock (mono, so 1ch a character); the font here is for that `ch`. The
   row around it slides when it widens (focus/capsule.js), and the panel grows out of it wherever it is */
.cap-focus { --cap-w: 36px; width: var(--cap-w); font: 600 13px var(--font-mono); }
.cap-focus.running { --cap-w: calc(65px + var(--chars, 5) * 1ch); }
.cap-focus > .cap-win { width: 380px; height: 240px; }
.cap-focus .cap-face { border: 0; font: 600 13px var(--font-mono); }
/* its hover and press fills go over the carrier's glass, not under it on the button */
.cap-focus .cap-face.b,
.cap-focus .cap-face.b:active:not(:disabled) { background-color: transparent !important; }
@media (hover: hover) {
  .cap-focus .cap-face:hover .fc-glass { background-image: linear-gradient(var(--fill), var(--fill)); }
}
.cap-focus .cap-face:active .fc-glass { background-image: linear-gradient(var(--press), var(--press)); }
/* its glass and contents on its reveal's carrier, so its width changes on transforms (focus/capsule.js) */
.fc-glass { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; }
/* narrowing: held at its old width, out of the row, its right edge where it was */
.cap-focus .cap-face.fc-held { position: absolute; top: 0; right: 0; width: var(--held-w); }
.fc-swarm { display: inline-flex; width: 28px; height: 28px; margin-left: -4px; }
.fc-time { color: var(--mct, var(--fg)); font: 600 13px var(--font-mono); transition: color 240ms var(--ease); }
/* ending (UI-9h, focus/capsule.js): Done on the swarm, then the clock settles on the time finished, its
   digits easing to the done colour, then it fades as the capsule narrows, the swarm gliding to the icon's
   place and cross-fading into the icon there */
.cap-focus .fc-time { transition: opacity 240ms var(--ease), color 240ms var(--ease); }
.cap-focus.clock-done .fc-time { color: var(--good-text); transition: color 300ms var(--ease), opacity 120ms var(--ease); }
/* with Ava's Done (UI-11): her colour leads the digits' frame by frame (focus/capsule.js), so no transition of their own */
.cap-focus.clock-led .fc-time { transition: opacity 120ms var(--ease); }
.cap-focus.clock-out .fc-time { opacity: 0; transition-duration: 120ms; }
/* its focus ring is the button's own box, which a reveal doesn't move (held wide while it narrows, laid
   out wide while it widens): none while the width changes, so no ring outlines a shape that isn't there
   (UI-9f); it's back on the new shape once it's still */
.cap-focus .cap-face.rv-moving:focus-visible { outline-color: transparent; }
.fc-glass > .fc-icon-at { position: absolute; top: 50%; right: calc((36px - 15px) / 2); margin-top: -7.5px; }

/* the panel: 378 × 238 inside the capsule's edge, 12 in */
.fp { position: relative; width: 378px; height: 238px; box-sizing: border-box; padding: 12px; font: 13px/1.5 var(--font-ui); }
.fp-view { display: flex; flex-direction: column; }
/* × exactly where the capsule's icon was (UI-10 §5): a 28 px circle 4 in from the window's top and right
   edges (3 inside its 1 px edge), so its centre is 18 from both, as the 36 px capsule's icon's; the
   title and ⤢ ride up with it, and what's under them 8, as the board has it, the panel 8 shorter */
.fp-head { display: flex; align-items: center; gap: 4px; height: 28px; margin: -9px -9px 1px 0; }
.fp-head h2 { margin: 0; padding-left: 2px; color: var(--fg-strong); font-size: 13px; font-weight: 600; }
/* the title, then ⤢ (Open Focus Mode) and ×, side by side at the top right, × where the capsule's icon
   was (UI-9g, V5Morph: ⤢ sits by ×, since that's where you go into Focus mode from) */
.fp-lead { display: flex; flex: 1 1 auto; align-items: center; gap: 4px; min-width: 0; }
.fp-lead > .fp-now { flex: 0 1 auto; }
/* ⤢ and ×: 28 px round buttons, centred on the 28 px title row */
.fp-open,
.fp-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--muted);
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
@media (hover: hover) {
  .fp-open:hover,
  .fp-close:hover { background-color: var(--fill); color: var(--fg); }
}
.fp-open:active,
.fp-close:active { background-color: var(--press); }

/* start: the task, the presets switch and split bar at the panel's size, Start Focus */
.fp-task { width: 100%; height: 36px; margin-top: 8px; padding: 0 12px; font-size: 13px; }
.fp .f-switch { width: 100%; margin-top: 12px; }
.fp .f-pseg { height: 30px; padding: 3px; font-size: 12px; }
.fp .f-pseg > .pill { top: 3px; bottom: 3px; }
.fp .f-split { width: 100%; }
.fp .f-sp { margin-top: 12px; }
.fp .f-sp-labels { height: 18px; margin-top: 4px; }
.fp .f-sp-labels > span { height: 18px; }
.fp .f-num { height: 18px; }
.fp-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  margin-top: 16px;
  border: 0;
  border-radius: 20px;
  background: var(--task-pri);
  color: var(--fg-strong);
  font: 600 13px var(--font-ui);
  /* (its own, and stepping aside under Custom ⌄'s menu as shared.css's `.menu-aside`, UI-10 audit) */
  transition: background-color 120ms var(--ease), opacity 160ms var(--ease) 220ms, visibility 0s;
}
.menu-held .fp-start { transition: background-color 120ms var(--ease), opacity 100ms var(--ease), visibility 0s linear 100ms; }
@media (hover: hover) { .fp-start:hover { background: var(--task-pri-hover); } }
.fp-start:active { background: var(--task-pri-press); }
.fp-key { color: var(--muted); font-size: 11px; font-weight: 500; }

/* the presets menu, on the page under the panel's switch (never clipped by the panel) */
.f-pmenu.f-pmenu-page { width: 240px; }
/* its rows' fill sits 4 from the menu's sides (UI-11), as from its foot (preset-fit.js): the menu is across
   the panel's switch, whose own padding is 3, so each row is 1 in from that
   (UI-14d: their words 10 into the row, the rule every menu keeps; they were 9) */
.f-pmenu.f-pmenu-page .f-mi { width: calc(100% - 2px); margin: 0 1px; padding-right: calc(var(--mi-r, 10px) - 1px); padding-left: 10px; }
/* (a command: the rows' own colour, UI-10c) */
.f-pmenu.f-pmenu-page .f-mi.f-mi-edit { padding-left: 30px; }
/* (and "Presets" over them, in step: its place is set as it opens, 1 short of the rows' words now) */
.f-pmenu.f-pmenu-page .menu-title.left { left: 14px !important; }

/* running */
.fp-now { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding-left: 2px; font-size: 13px; }
.fp-dot { flex: none; width: 8px; height: 8px; border-radius: 4px; background: var(--mc); transition: background-color 240ms var(--ease); }
.fp-mode { flex: none; font-weight: 600; }
.fp-sep { flex: none; color: var(--faint); }
.fp-task-name { min-width: 0; overflow: hidden; color: var(--fg); text-overflow: ellipsis; white-space: nowrap; }
.fp-clock { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-top: 8px; }
.fp-time { padding-left: 2px; color: var(--fg-strong); font-size: 44px; font-weight: 600; letter-spacing: -.5px; line-height: 52px; }
.fp-plan { color: var(--muted); font-size: 12px; white-space: nowrap; }
.fp-slash { color: var(--faint); }
/* the bar: focus's part and the break's, each a track its fill grows across (on a transform) */
.fp-bar { display: flex; gap: 4px; height: 18px; margin-top: 8px; align-items: center; }
.fp-track { position: relative; flex: 1 1 0; height: 6px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--mc) 22%, transparent); }
.fp-track[hidden] { display: none; }
.fp-fill { position: absolute; inset: 0; border-radius: 3px; background: var(--mc); transform: scaleX(0); transform-origin: left center; transition: transform 380ms var(--sp-smooth); }
.fp-run.m-drift .fp-track.m-task .fp-fill { opacity: .5; }
.fp-words { display: flex; justify-content: space-between; align-items: center; height: 18px; margin-top: 4px; font-size: 12px; }
.fp-mseg { width: 100%; height: 30px; margin-top: 12px; padding: 3px; border-radius: 999px; background: var(--fill); font-size: 12px; }
.fp-mseg > .pill { top: 3px; bottom: 3px; }
.fp-mseg > button { height: 100%; padding: 0 6px; border: 0; border-radius: 999px; color: var(--muted); font: 500 12px var(--font-ui); white-space: nowrap; }
.fp-mseg > button[aria-selected="true"] { color: var(--fg-strong); font-weight: 600; }
.fp-mseg[data-mode="task"] > .pill { --pill-c: var(--task); --pill-a: var(--tint-a); }
.fp-mseg[data-mode="drift"] > .pill { --pill-c: var(--drift); --pill-a: var(--tint-a); }
.fp-mseg[data-mode="break"] > .pill { --pill-c: var(--break); --pill-a: var(--tint-a); }
.fp-foot { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-top: 12px; }
.fp-end { height: 32px; padding: 0 14px; border: 0; border-radius: 16px; color: var(--fg); font: 500 12px var(--font-ui); }
.fp-next { padding-right: 2px; color: var(--muted); font-size: 12px; }
.fp-at { color: var(--fg); }