/* Focus space: The System's focus window, always dark blue whatever the theme, holding one centred
   column. Each mode has one colour (--f-task, --f-drift, --f-break); `.m-<mode>` sets --mc for an
   element, and while a session runs the whole window takes the current mode's colour. The strip
   in other spaces (focus-strip.css) is dark too; only the dock's tab row follows the theme. */

:root {
  --f-task: #9a5c00;
  --f-drift: #c0392b;
  --f-break: #17766e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --f-task: #ffb347; --f-drift: #ff6b5f; --f-break: #5fd4c8; }
}

:root[data-theme="dark"] { --f-task: #ffb347; --f-drift: #ff6b5f; --f-break: #5fd4c8; }

/* While the focus space is shown, the whole page is The System's dark blue too (header, crumb,
   view switch, the page around the window), whatever theme or dark look the workspace uses. */
:root:has(.app.quiet-header) {
  color-scheme: dark;
  --bg: #0c0f14; --surface: #0f131a; --sheet: #121721; --tab: #0f131a; --fg: #c3d4ea; --muted: #66778e;
  --line: #1f2836; --accent: #6aa8ff; --accent-soft: #1e3557; --check-img: url("/img/check-white.svg");
  --ok: #5cc28d; --warn: #e0a060; --danger: #ec7063;
}

.m-task { --mc: var(--f-task); }
.m-drift { --mc: var(--f-drift); }
.m-break { --mc: var(--f-break); }
.f-mc { color: var(--mc, var(--accent)); }

/* the window (also the dock's body): its own dark tokens, a frame and a soft glow */
.focus {
  color-scheme: dark;
  --sheet: #0e131d; --fg: #d6deeb; --muted: #8a9bb5; --tab: #111827; --line: #1f2a3a;
  --accent: #5aa9ff; --warn: #f2b45a; --danger: #ff5a4f; --ok: #5cc28d;
  --f-task: #ffb347; --f-drift: #ff5a4f; --f-break: #5fd4c8;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, #0e131d);
  --tline: color-mix(in srgb, var(--accent) 40%, #1f2a3a);
  --tedge: color-mix(in srgb, var(--accent) 30%, #1f2a3a);
  --sel-bg: color-mix(in srgb, var(--accent) 13%, var(--tab));
  --check-img: url("/img/check-white.svg");
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #0b0f17;
  box-shadow: inset 0 0 90px color-mix(in srgb, var(--accent) 6%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--fg);
  font: 400 12px/1.6 var(--font-ui);
  font-variant-numeric: tabular-nums;
  scrollbar-color: #2a4a75 transparent;
  transition: border-color .4s, box-shadow .4s;
  /* the running screen steps down on short windows */
  container-type: size;
}
.focus[data-mode="task"] { --mc: var(--f-task); }
.focus[data-mode="drift"] { --mc: var(--f-drift); }
.focus[data-mode="break"] { --mc: var(--f-break); }
/* while a session runs, the window's accent, lines, frame and glow take the mode colour */
.focus:is([data-mode="task"], [data-mode="drift"], [data-mode="break"]) {
  --accent: var(--mc);
  --accent-soft: color-mix(in srgb, var(--mc) 16%, #0e131d);
  --tline: color-mix(in srgb, var(--mc) 40%, #1f2a3a);
  --line: color-mix(in srgb, var(--mc) 18%, #1f2a3a);
  --tedge: color-mix(in srgb, var(--mc) 30%, #1f2a3a);
  border-color: color-mix(in srgb, var(--mc) 45%, #1f2a3a);
  background: radial-gradient(ellipse 70% 45% at 50% 0%, color-mix(in srgb, var(--mc) 10%, transparent), transparent 70%), #0b0f17;
  box-shadow: inset 0 0 90px color-mix(in srgb, var(--mc) 9%, transparent), 0 0 22px color-mix(in srgb, var(--mc) 12%, transparent);
}

/* Keyboard focus in the window: a dashed ring in the accent (the mode colour while running) */
.focus button:focus-visible { outline: 1px dashed var(--accent); outline-offset: 2px; }

/* the column sits in the middle of the window (auto margins share the spare height) */
.f-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 720px;
  margin: auto;
}

.f-host { display: flex; flex: 1 0 auto; flex-direction: column; }

/* 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; }

.f-empty { margin: auto; color: var(--muted); font-size: 12px; }

.f-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--sheet);
}
/* The System's corner marks on the start screen's and the recap's boxes */
.f-setup .f-box,
.f-recap .f-box {
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 8px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top / 2px 8px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 8px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 2px 8px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 8px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 2px 8px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 8px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 2px 8px no-repeat,
    var(--sheet);
}
.f-setup .f-box { gap: 14px; }
.f-recap .f-box { gap: 10px; }

.f-hd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; }
.f-hd b { color: var(--accent); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.f-k { color: var(--muted); }
.f-under { color: var(--warn); }
.f-over { color: var(--ok); }

/* the line under the clock: what just happened, and a quieter second line */
.f-say { margin: 0; text-align: center; font-size: 13px; }
.f-say .sub { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }

/* start screen */
.f-clock {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  border: 1px solid var(--tline);
  border-bottom-width: 2px;
  background: color-mix(in srgb, var(--accent) 6%, #0e131d);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .06em;
}
.f-clock i { width: 1px; height: 14px; background: var(--tline); }
.f-clock b { color: #f2f6fc; font-size: 15px; font-weight: 600; letter-spacing: .08em; text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }

.f-task {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-bottom-width: 2px;
  outline: none;
  background: var(--sheet);
  color: #f2f6fc;
  font: 500 15px var(--font-ui);
  text-align: center;
}
.f-task:focus { border-color: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.f-task::placeholder { color: var(--muted); }

.f-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.f-step { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 2px solid var(--mc); }
.f-step > span { color: var(--muted); font-size: 12px; }
.f-step div { display: flex; align-items: center; justify-content: space-between; }
.f-step b { font-size: 20px; font-weight: 600; }
.f-pm {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: var(--tab);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}

/* the split bar: drag (or arrow keys) to move the task / break line */
.f-sbar {
  position: relative;
  display: flex;
  gap: 2px;
  height: 18px;
  outline: none;
  background: var(--tab);
  cursor: ew-resize;
  touch-action: none;
}
.f-sbar i { display: block; min-width: 0; height: 100%; background: var(--mc); }
.f-sbar i:last-of-type { flex: 1; }
.f-knob {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 8px;
  margin-left: -4px;
  border: 2px solid #0a0e15;
  background: #f2f6fc;
  box-shadow: 0 0 8px rgb(242 246 252 / .5);
  pointer-events: none;
}
.f-sbar:focus-visible { box-shadow: 0 0 0 1px var(--accent); }

/* big buttons: begin, drift, break, new session */
.f-btn {
  min-height: 64px;
  padding: 0 10px;
  border: 2px solid var(--mc, var(--accent));
  border-bottom-width: 4px;
  background: #0a0e15;
  box-shadow: 0 0 18px color-mix(in srgb, var(--mc, var(--accent)) 25%, transparent);
  color: var(--mc, var(--accent));
  font: 700 16px/1.6 var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.f-btn.sec { border-width: 1px; border-bottom-width: 3px; background: color-mix(in srgb, var(--mc, var(--accent)) 8%, #0a0e15); box-shadow: none; font-size: 13px; font-weight: 600; }
.f-btn:disabled { opacity: .4; cursor: default; }
.f-btn:not(:disabled):active { transform: translateY(1px); }
.f-recap .f-btn { min-height: 58px; }
.f-begin { --mc: var(--accent); }

/* running */
.f-run-box { align-items: center; gap: 4px; padding: 18px 18px 16px; text-align: center; }
.focus[data-mode] .f-run-box { background: color-mix(in srgb, var(--mc) 5%, var(--sheet)); }
.f-qline { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; min-width: 0; font-size: 15px; }
.f-tag { flex: none; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.f-qsep { flex: none; color: var(--muted); }
.f-qname { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.f-time { color: #f2f6fc; font-size: 88px; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.focus[data-mode] .f-time { color: color-mix(in srgb, var(--mc) 18%, #f2f6fc); text-shadow: 0 0 28px color-mix(in srgb, var(--mc) 38%, transparent); }
.f-held { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; width: 100%; margin-top: 8px; padding-top: 6px; border-top: 1px dashed #2a3a52; color: var(--muted); font-size: 13px; }
.f-held .nm { color: var(--fg); }
.f-held .f-mc { font-weight: 600; text-transform: uppercase; }
.f-held.none { opacity: .55; }
.f-paused { color: var(--muted); }
.f-so { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--tline); }

.f-timeline { display: flex; flex-direction: column; gap: 4px; }
.f-line { display: flex; gap: 2px; height: 18px; }
.f-line i { display: block; min-width: 2px; background: var(--mc); }
.f-line i.rest { min-width: 0; border: 1px dashed var(--line); background: var(--tab); }
.f-ticks { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }

.f-tots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.f-tots > div { display: flex; flex-direction: column; align-items: center; padding-top: 4px; border-top: 2px solid var(--mc); }
.f-tots span { color: var(--muted); font-size: 12px; }
.f-tots b { font-size: 18px; font-weight: 600; }

.f-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.f-endrow { display: flex; justify-content: center; }
.f-endb {
  min-height: 30px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.f-endb.armed { border-color: var(--warn); color: var(--warn); }
.f-endb:active { transform: translateY(1px); }
@media (hover: hover) { .f-endb:not(.armed):hover { border-color: var(--muted); color: var(--fg); } }

/* folds: the log (and past sessions) */
.f-fold { border: 1px solid var(--line); }
.f-fold.open { border-color: var(--tline); }
.f-foldbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  letter-spacing: .04em;
  cursor: pointer;
}
@media (hover: hover) { .f-foldbar:hover { color: var(--accent); } }
.f-log { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; padding: 0 12px 10px; font-size: 13px; }
.f-log[hidden] { display: none; }
.f-log .r { display: grid; grid-template-columns: 52px 26px minmax(0, 1fr) auto; gap: 6px; }
.f-log .dt,
.f-log .du { color: var(--muted); }
.f-log .mk { color: var(--mc, var(--accent)); }
/* the start and the end are in The System's blue, whatever the mode */
.f-log .mk.m-start,
.f-log .f-endt,
.f-log .r:last-child .mk:not([class*="m-"]) { color: #5aa9ff; }
.f-log .live { color: var(--f-drift); }

/* recap */
.f-done { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px 6px; border: 2px solid var(--accent); background: #0a0e15; box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); text-align: center; }
.f-done b { color: var(--accent); font-size: 22px; letter-spacing: .16em; text-transform: uppercase; }
.f-done span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.f-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.f-sum > div { display: flex; flex-direction: column; align-items: center; padding-top: 6px; border-top: 2px solid var(--mc, var(--accent)); text-align: center; }
.f-sum span { color: var(--muted); font-size: 12px; }
.f-sum b { font-size: 22px; font-weight: 600; }
.f-recap { gap: 10px; }

/* short windows: the running screen steps down, as The System's did */
@container (max-height: 900px) {
  .f-run { gap: 10px; }
  .f-run .f-time { font-size: 64px; }
  .f-run .f-run-box { padding: 12px 16px; }
  .f-run .f-btn { min-height: 52px; }
}
@container (max-height: 680px) {
  .f-run { gap: 8px; }
  .f-run .f-time { font-size: 54px; }
  .f-run .f-run-box { padding: 10px 16px; }
  .f-run .f-btn { min-height: 46px; }
}

/* narrow windows: one smaller clock, and drift / break stay in reach while the page scrolls */
@media (max-width: 860px) {
  .f-run .f-time { font-size: 54px; }
  .f-run .f-btn { padding: 0 6px; font-size: 13px; letter-spacing: .05em; white-space: nowrap; }
  .f-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-run .f-acts { position: sticky; z-index: 2; bottom: 0; padding-top: 8px; background: linear-gradient(transparent, #0b0f17 30%); }
}
@media (max-width: 700px) {
  .f-ticks { font-size: 11px; }
}