/* Focus in other spaces: the one-line strip under the notes, and the dock beside the view (desktop).
   Like The System's, the strip and the dock's body are always dark, in the session's mode colour. */

.fstrip {
  color-scheme: dark;
  --fg: #d6deeb; --muted: #8a9bb5; --line: #1f2a3a; --sheet: #0e131d; --accent: #5aa9ff;
  --f-task: #ffb347; --f-drift: #ff5a4f; --f-break: #5fd4c8;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  margin: 0 1px;
  padding: 2px 10px;
  border: 2px solid var(--mc);
  background: #0a0e15;
  box-shadow: 0 0 14px color-mix(in srgb, var(--mc) 20%, transparent);
  color: var(--fg);
  font: 400 12px/1.6 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.fstrip .f-tag { font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.fstrip .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fstrip .nm span { color: var(--muted); }
.fstrip .t { flex: none; color: #f2f6fc; font-size: 16px; font-weight: 600; text-shadow: 0 0 14px color-mix(in srgb, var(--mc) 45%, transparent); }
.fs-bar { display: flex; flex: none; gap: 1px; width: 110px; height: 6px; background: #111827; }
.fs-bar i { display: block; height: 100%; background: var(--mc); }

/* each button in its mode's colour; dock and open (no mode) in the accent */
.fstrip button {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--mc, var(--accent));
  border-bottom-width: 2px;
  background: transparent;
  color: var(--mc, var(--accent));
  font: inherit;
  cursor: pointer;
}
.fstrip button.ic { width: 36px; padding: 0; }
.fstrip button:not([class*="m-"]) { --mc: initial; }
.fstrip button:active { transform: translateY(1px); }

/* the stable wrapper in each place, and the strip or dock inside it */
.fs-place,
.fs-body { display: flex; flex-direction: column; min-height: 0; }
.fd-place,
.fd-place .fs-body { flex: 1; }

/* the dock: a compact running screen in a column beside the view */
.fdock { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.fdock[data-mode="task"] { --mc: #ffb347; }
.fdock[data-mode="drift"] { --mc: #ff5a4f; }
.fdock[data-mode="break"] { --mc: #5fd4c8; }
/* its own tab row, as tall as the file tabs above a note: FOCUS on the left, undock and open on the right */
.fdock-hd { display: flex; flex: none; justify-content: space-between; align-items: center; gap: 6px; height: 43px; padding: 3px 0 7px; }
.fdock-hd > span:last-child { display: flex; flex: none; gap: 6px; }
.fd-tab {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--mc);
  border-bottom-width: 2px;
  border-radius: 2px;
  background: #0a0e15;
  box-shadow: 0 0 10px color-mix(in srgb, var(--mc) 30%, transparent);
  color: var(--mc);
  font: 600 12px var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fdock-hd button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 30px;
  padding: 0 10px;
  border: 1px solid var(--tedge);
  border-bottom-width: 2px;
  border-radius: 2px;
  background: var(--tab);
  color: color-mix(in srgb, var(--fg) 75%, var(--muted));
  font: 400 12px var(--font-ui);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.fdock-hd button:active { transform: translateY(1px); }
@media (hover: hover) { .fdock-hd button:hover { border-color: var(--accent); color: var(--accent); } }

/* the dark box starts where the note page starts; the run column fills it, actions at the bottom */
.fdock-body { flex: 1; padding: 10px; }
.f-run.compact { flex: 1 0 auto; gap: 10px; margin: 0; }
.f-run.compact .f-acts { gap: 8px; margin-top: auto; }
.f-run.compact .f-run-box { padding: 18px 12px 16px; }
.f-run.compact .f-qline { gap: 8px; font-size: 14px; }
.f-run.compact .f-qline .f-tag { font-size: 13px; }
.f-run.compact .f-time { font-size: clamp(58px, calc(58px + (100cqh - 800px) * .25), 76px); }
.f-run.compact .f-held { gap: 10px; font-size: 12px; }
.f-run.compact .f-tots { gap: 6px; }
.f-run.compact .f-tots b { font-size: 14px; }
.f-run.compact .f-tots span { font-size: 11px; }
.f-run.compact .f-ticks { font-size: 10px; }
.f-run.compact .f-btn { min-height: clamp(52px, calc(52px + (100cqh - 800px) * .08), 58px); padding: 0 6px; font-size: 14px; letter-spacing: .06em; white-space: nowrap; }
.f-run.compact .f-endb { width: 100%; min-height: 36px; }

@media (max-width: 700px) {
  .fstrip { gap: 8px; }
  .fs-bar,
  .fstrip .lbl { display: none; }
}