/* Focus start screen: preset chips (with their ⋯ and name fields) and the past-sessions fold.
   The recap's "delete this session" link is here too. */

.f-pres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.f-prew { position: relative; min-width: 0; }

.f-pre {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 6px 30px 6px 12px;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--line);
  background: var(--tab);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.f-pre b,
.f-pre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-pre b { font-weight: 600; }
.f-pre span { color: var(--muted); }
.f-pre[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 25%, transparent); }
.f-pre:active { transform: translateY(1px); }
.f-pre.add { padding-right: 12px; border-style: dashed; border-radius: 2px; border-bottom-style: solid; border-color: var(--tedge); background: transparent; }
.f-pre.add b { color: var(--accent); font-weight: 500; }
.f-mod { color: var(--f-task); font-size: 11px; font-style: normal; font-weight: 400; }

/* a name field in place of a chip */
input.f-pre.f-ren { padding: 0 10px; border-color: var(--accent); outline: none; background: var(--sheet); font-weight: 600; cursor: text; }

.f-pmore {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s;
}
.f-prew:focus-within .f-pmore,
.f-pmore[aria-expanded="true"] { opacity: 1; }
@media (hover: hover) {
  .f-prew:hover .f-pmore { opacity: 1; }
  .f-pmore:hover { color: var(--accent); }
}
@media (hover: none) { .f-pmore { opacity: 1; } }

.f-note { color: var(--muted); font-size: 12px; }
.f-note[hidden] { display: none; }
.f-note b { color: var(--fg); font-weight: 500; }
.f-link { padding: 0; border: none; background: none; color: #7fbcff; font: inherit; cursor: pointer; }
@media (hover: hover) { .f-link:hover { color: var(--accent); text-decoration: underline; } }
.f-link.f-del.armed { color: var(--danger); }

/* past sessions */
/* --f-sbw is the list's scrollbar width (past.js measures it), so "select" lines up with the rows
   in browsers whose scrollbar takes room (Safari) as well as overlay ones */
.f-pasthd { display: flex; align-items: center; gap: 8px; padding-right: calc(10px + var(--f-sbw, 0px)); }
.f-pasthd .f-foldbar { flex: 1; min-width: 0; }
.f-pctl { display: flex; flex: none; align-items: center; gap: 6px; font-size: 12px; }
.f-pctl .cnt { margin-right: 2px; color: var(--accent); }
.f-pctl button {
  padding: 0 8px;
  border: 1px solid var(--tline);
  border-bottom-width: 2px;
  background: var(--tab);
  color: color-mix(in srgb, var(--fg) 75%, var(--muted));
  font: inherit;
  line-height: 1.7;
  cursor: pointer;
}
.f-pctl button:active { transform: translateY(1px); }
@media (hover: hover) { .f-pctl button:hover { border-color: var(--accent); color: var(--accent); } }
.f-pctl button.danger { color: var(--danger); }
.f-pctl button.danger.armed { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, transparent); }

.f-pnone { margin: 0; padding: 0 12px 10px; }
/* exactly three rows (3 × 44px + 2 × 6px) show; more scroll. The gap under them sits outside the
   scroll area, so it stays 10px and a fourth row never peeks into it. */
.f-plist { display: flex; flex-direction: column; gap: 6px; max-height: 144px; overflow-y: auto; margin-bottom: 10px; padding: 0 10px; }
.f-ps {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--f-task);
  background: var(--tab);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.f-ps.sel { grid-template-columns: 12px 170px minmax(0, 1fr) auto; }
.f-ps.picked { border-color: var(--tedge); background: var(--accent-soft); }
.f-ps .dt { white-space: nowrap; }
.f-ps .dt,
.f-ps .pc { color: var(--muted); }
.f-ps .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-ps .f-mk { width: 12px; height: 12px; border: 2px solid var(--tedge); }
/* the tick: an outlined box with a check inside, like the sidebar's */
.f-ps .tk { position: relative; width: 12px; height: 12px; border: 2px solid var(--accent); }
.f-ps .tk::after {
  position: absolute;
  inset: 0;
  background: var(--accent);
  content: "";
  -webkit-mask: url("/img/tick-mask.svg") center / 10px no-repeat;
  mask: url("/img/tick-mask.svg") center / 10px no-repeat;
}

/* recap: delete this session */
.f-del { align-self: center; margin-top: -4px; color: #7fbcff; font-size: 12px; }
.f-del.armed { color: var(--danger); }

@media (max-width: 860px) {
  .f-pres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .f-pasthd { flex-wrap: wrap; padding-bottom: 6px; }
  .f-pasthd .f-foldbar { flex: 1 1 100%; }
  .f-pasthd:not(:has(.f-pctl)) { padding-bottom: 0; }
  .f-pctl { flex-wrap: wrap; padding-left: 12px; }
  .f-ps { grid-template-columns: auto minmax(0, 1fr) auto; }
  .f-ps.sel { grid-template-columns: 12px auto minmax(0, 1fr) auto; }
  .f-ps .tm { display: none; }
}

/* a preset's ⋯ menu: under its chip, as wide as it, in the window's dark colours */
.menu.f-pmenu {
  color-scheme: dark;
  --fg: #d6deeb; --tab: #111827; --accent: #5aa9ff; --danger: #ff5a4f; --muted: #8a9bb5;
  max-width: 260px;
  border-color: #5aa9ff;
  border-radius: 0;
  background: #0e131d;
  box-shadow: 0 6px 18px rgb(0 0 0 / .45);
}
.f-pmenu .menu-item { padding: 6px 8px; }
/* the old inline menu lit only under the pointer (and with keyboard focus), not on opening */
.f-pmenu .menu-item:focus:not(:focus-visible) { background: none; box-shadow: none; }
.f-pmenu .menu-item:hover,
.f-pmenu .menu-item:focus-visible { background: var(--tab); box-shadow: none; color: var(--accent); }
.f-pmenu .menu-item.danger:hover,
.f-pmenu .menu-item.danger:focus-visible { background: var(--tab); box-shadow: none; color: var(--danger); }