/* The focus start screen (design/v5/V5FocusStart.dc.html): the task field, the presets switch and its
   menu, the split bar with its divider and fields, Save as Preset. */

.f-task { width: 360px; max-width: 100%; height: 44px; padding: 0 14px; font-size: 15px; text-align: center; }

/* a small chip button (Past Sessions' Show All and Start a Session) */
.f-chip-r {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 26px;
  padding: 0 12px;
  overflow: hidden;
  border: 0;
  border-radius: 13px;
  color: var(--fg);
  font: 400 12px var(--font-ui);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- the switch: default · picked · Custom ⌄ */
.f-switch { position: relative; flex: none; width: 360px; max-width: 100%; margin-top: 24px; }
.f-pseg { width: 100%; height: 36px; padding: 4px; border-radius: 999px; background: var(--fill); font-size: 13px; }
.f-pseg > .pill { top: 4px; bottom: 4px; }
.f-pseg > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  padding: 0 6px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  font: 500 13px var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.f-pseg > button[aria-selected="true"] { color: var(--fg-strong); font-weight: 600; }
.f-chev { display: inline-flex; color: var(--muted); transition: transform 200ms var(--ease); }

/* the presets menu: an anchored drop from Custom ⌄ (UI-9h, core/menu-anchor.js), on the page */
.f-pmenu {
  position: fixed;
  z-index: 40;
  width: 260px;
  border-radius: 14px;
  text-align: left;
}
.f-pmenu.closing { pointer-events: none; }
/* its paint on the reveal's carrier, solid from its first frame; its hairline an inset shadow */
.rv.f-pmenu-in {
  display: block;
  border: 0;
  border-radius: 14px;
  background: var(--solid);
  box-shadow: inset 0 0 0 1px var(--sep), var(--drop);
}
@media (prefers-contrast: more) { .rv.f-pmenu-in { background: var(--solid-contrast); box-shadow: inset 0 0 0 1px var(--hc-edge), var(--drop); } }
.f-mi-row { position: relative; }
.f-mi {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  /* (Custom ⌄'s height and 4: `--mi-h`, set as the menu opens, UI-10d) */
  height: var(--mi-h, 32px);
  /* (its right end under the header's, Custom ⌃'s: `--mi-r`, set as the menu opens, UI-10c) */
  padding: 0 var(--mi-r, 10px) 0 10px;
  border: 0;
  border-radius: 10px;
  color: var(--fg);
  font: 400 13px var(--font-ui);
  text-align: left;
}
.f-mi-row > .f-mi { padding-right: max(var(--mi-r, 36px), 27px); }
.f-mi:disabled { opacity: .4; }
/* the keyboard's item: the same ring and fill as every menu's (core menus, ui.css), inside the row */
.f-pmenu:not(.by-pointer) .f-mi:focus-visible { background: var(--sel); outline-offset: -2px; }
/* opened by the pointer: the item the keyboard was moved to shows nothing until a key is pressed (UI-9d) */
.f-pmenu.by-pointer button:focus { outline: none; }
.f-mi.danger { color: var(--drift-text); }
.f-mi-tick { display: inline-flex; flex: none; width: 12px; color: var(--accent-text); opacity: 0; }
.f-mi-tick.on { opacity: 1; }
.f-mi-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-mi-sub { color: var(--muted); font-size: 11px; white-space: nowrap; }
.f-mi-split { font-size: 12px; }
.f-mi-sl { color: var(--faint); }
.f-mi-more {
  position: absolute;
  /* (in the room right of the numbers, which end under the header's end) */
  top: 6px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  font: 600 13px var(--font-ui);
  opacity: 0;
  transition: opacity 120ms var(--ease);
}
/* (a 20 px circle with the skill's 28 px pointer target round it, §7) */
.f-mi-more::before { position: absolute; inset: -4px; content: ""; }
.f-mi-row:hover .f-mi-more,
.f-pmenu:not(.by-pointer) .f-mi-row:focus-within .f-mi-more { opacity: 1; }
@media (hover: none) { .f-mi-more { opacity: 1; } }
.f-mi-sep { display: block; height: 1px; margin: 4px 10px; background: var(--sep); }
/* the separators, the header's label and the ticks share one left inset: the menu's padding and 10, as
   every anchored menu's (UI-10c) */
.f-pmenu .menu-sep { margin: 4px 10px; }
.f-mi-head { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 2px; }
.f-mi-back { display: grid; flex: none; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 13px; color: var(--fg); }
.f-mi-title { flex: 1; min-width: 0; overflow: hidden; color: var(--fg-strong); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.f-mi-ren { flex: 1; min-width: 0; height: 26px; padding: 0 8px; border-radius: 8px; font-size: 13px; font-weight: 600; }

/* ---- the split bar: focus and break always fill it; in Custom the divider drags */
.f-split { display: flex; flex-direction: column; align-items: center; width: 360px; max-width: 100%; }
.f-sp { position: relative; width: 100%; height: 18px; margin-top: 20px; }
.f-sp > i { position: absolute; top: 6px; height: 6px; border-radius: 3px; }
.f-sp-track { right: 0; left: 0; background: transparent; transition: background-color 240ms var(--ease); }
.f-sp.custom .f-sp-track { background: var(--fill); }
/* the two parts: full-width pills in one rounded clip, slid into place on transforms (split.js) */
.f-sp-clip { position: absolute; top: 6px; right: 0; left: 0; height: 6px; overflow: hidden; border-radius: 3px; }
.f-sp-clip > i { position: absolute; inset: 0; border-radius: 3px; transition: transform 380ms var(--sp-smooth), opacity 200ms var(--ease); }
.f-sp-task { background: var(--task); }
.f-sp-break { background: var(--break); }
.f-sp-break.none { opacity: 0; }
/* the grip's rail spans the bar and moves on a transform; the grip sits at its left edge */
.f-grip-rail { position: absolute; inset: 0; pointer-events: none; transition: transform 380ms var(--sp-smooth); }
.f-sp.dragging :is(.f-sp-task, .f-sp-break, .f-grip-rail) { transition: none; }
.f-grip {
  position: absolute;
  left: 0;
  pointer-events: auto;
  top: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 24px;
  margin-left: -12px;
  outline: none;
  cursor: ew-resize;
  touch-action: none;
  animation: rise 200ms var(--ease) both;
}
.f-grip[hidden] { display: none; }
.f-grip > i {
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--grip);
  box-shadow: 0 0 0 3px var(--bg), var(--grip-drop);
  transition: height 160ms var(--ease), width 160ms var(--ease);
}
.f-grip:hover > i,
.f-grip:focus-visible > i,
.f-grip:active > i { width: 6px; height: 26px; }
.f-grip:focus-visible > i { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent-ring); }

.f-sp-labels { display: flex; justify-content: space-between; width: 100%; height: 22px; margin-top: 8px; font-size: 12px; }
.f-sp-labels > span { display: inline-flex; align-items: center; height: 22px; }
.f-num {
  width: 4ch;
  height: 22px;
  margin-right: 4px;
  padding: 0 4px;
  border: 0;
  border-radius: 6px;
  outline: none;
  background: var(--fill);
  color: inherit;
  font: inherit;
  text-align: center;
}
.f-num[hidden] { display: none; }
.f-num:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

/* Save as Preset, and Update "Name" · Save as New · Cancel: in under the bar while in Custom */
.f-save { width: 100%; transition-duration: 380ms, 380ms, 240ms, 0s; }
.f-save.open { margin-top: 14px; }
/* (4 under its buttons, so Start Session's 20 puts it 24 under their fill, as under the labels: UI-10d audit) */
.f-save-row { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 3px 0 4px; }
.f-sbtn {
  height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  color: var(--fg);
  font: 500 12px var(--font-ui);
  white-space: nowrap;
}
.f-tint { background: var(--pri); color: var(--fg-strong); font-weight: 600; transition: filter 120ms var(--ease); }
@media (hover: hover) { .f-tint:hover { filter: brightness(1.15); } }
.f-quiet { padding: 0 10px; color: var(--muted); }
.f-save-name { width: 180px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; }

/* Start Session, or Ava asking for the task */
.f-go { max-width: 100%; margin-top: 24px; }
/* on the start screen, 24 from the split bar labels' ink (UI-10d, measured as seen): they sit on an 18 px
   line in a 22 px row (room for Custom's fields), so 2 px and the line's half-leading are under them */
.f-setup > .f-go { margin-top: 20px; }