/* writer-focus.css — the Flow Bar + Focus Mode.
   Warm editorial system; motion on transform/opacity only. */

:root {
  --fb-paper: var(--paper, oklch(0.965 0.012 80));
  --fb-paper-2: var(--paper-2, oklch(0.945 0.014 78));
  --fb-ink: var(--ink, oklch(0.22 0.025 60));
  --fb-ink-3: var(--ink-3, oklch(0.52 0.02 60));
  --fb-rule: var(--rule, rgba(42, 36, 25, 0.12));
  --fb-accent: var(--plot-forest, #3a7a72);
  --fb-sans: var(--sans, "DM Sans", system-ui, sans-serif);
  --fb-serif: var(--serif, "EB Garamond", Georgia, serif);
}

/* ── Flow Bar ─────────────────────────────────────────────────────── */
.flow-bar {
  position: fixed; z-index: 10030;
  left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px;
  background: color-mix(in oklab, var(--fb-paper) 92%, transparent);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid var(--fb-rule);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(42, 36, 25, 0.08), 0 14px 40px -10px rgba(42, 36, 25, 0.4);
  font-family: var(--fb-sans);
  color: var(--fb-ink);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.flow-bar.is-focus { opacity: 0.42; }
.flow-bar.is-focus:hover, .flow-bar.is-focus:focus-within { opacity: 1; }

.fb-sep { width: 1px; align-self: stretch; margin: 3px 0; background: var(--fb-rule); }

.fb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fb-sans); font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  padding: 7px 12px; border-radius: 11px;
  border: 1px solid var(--fb-rule); background: var(--fb-paper);
  color: var(--fb-ink);
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
}
.fb-btn:hover { background: var(--fb-paper-2); border-color: var(--fb-ink-3); }
.fb-btn:active { transform: translateY(1px); }
.fb-btn.is-primary { background: var(--fb-accent); color: #fff; border-color: transparent; }
.fb-btn.is-primary:hover { background: color-mix(in oklab, var(--fb-accent) 88%, #000); }

.fb-focus.is-on { background: var(--fb-ink); color: var(--fb-paper); border-color: var(--fb-ink); }
.fb-focus-glyph { font-size: 14px; line-height: 1; }

/* ── Sprint ───────────────────────────────────────────────────────── */
.fb-sprint { display: inline-flex; align-items: center; gap: 8px; }
.fb-sprint-icon { font-size: 15px; opacity: 0.75; }
.fb-sprint-picker { display: inline-flex; gap: 3px; }
.fb-chip {
  font-family: var(--fb-sans); font-size: 11.5px; font-weight: 600; cursor: pointer;
  min-width: 26px; padding: 4px 6px; border-radius: 8px;
  border: 1px solid var(--fb-rule); background: var(--fb-paper); color: var(--fb-ink-3);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.fb-chip:hover { color: var(--fb-ink); }
.fb-chip.is-on { background: var(--fb-ink); color: var(--fb-paper); border-color: var(--fb-ink); }

.fb-sprint-live { gap: 10px; }
.fb-sprint-count {
  font-family: var(--fb-serif); font-size: 20px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--fb-ink); min-width: 52px; text-align: center;
}
.fb-sprint-words { font-size: 12px; font-weight: 600; color: var(--fb-accent); white-space: nowrap; }
.fb-sprint-bar { width: 72px; height: 5px; border-radius: 3px; background: var(--fb-rule); overflow: hidden; }
.fb-sprint-bar > div {
  height: 100%; width: 100%; transform-origin: left center;
  background: var(--fb-accent); border-radius: 3px;
  transition: transform 260ms linear;
}

/* ── Daily goal ring ──────────────────────────────────────────────── */
.fb-goal { display: inline-flex; align-items: center; gap: 8px; }
.fb-ring { position: relative; width: 38px; height: 38px; }
.fb-ring svg { transform: rotate(-90deg); }
.fb-ring-track { fill: none; stroke: var(--fb-rule); stroke-width: 4; }
.fb-ring-prog {
  fill: none; stroke: var(--fb-accent); stroke-width: 4; stroke-linecap: round;
  transition: stroke-dashoffset 420ms cubic-bezier(0.16, 1, 0.3, 1), stroke 200ms ease;
}
.fb-ring-prog.is-done { stroke: var(--st-done, #4c9a5b); }
.fb-ring-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--fb-ink); font-variant-numeric: tabular-nums;
}
.fb-streak {
  position: absolute; top: -6px; right: -12px; font-size: 10px; font-weight: 700;
  background: var(--fb-paper); border: 1px solid var(--fb-rule); border-radius: 8px;
  padding: 1px 4px; color: var(--fb-ink); white-space: nowrap;
}
.fb-goal-meta {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15;
  border: none; background: transparent; cursor: pointer; font-family: var(--fb-sans); padding: 0;
}
.fb-goal-count { font-size: 13px; font-weight: 700; color: var(--fb-ink); font-variant-numeric: tabular-nums; }
.fb-goal-target { font-size: 10.5px; color: var(--fb-ink-3); }
.fb-goal-edit { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fb-ink-3); }
.fb-goal-edit input {
  width: 62px; font-family: var(--fb-sans); font-size: 13px; font-weight: 600;
  padding: 3px 6px; border: 1px solid var(--fb-rule); border-radius: 7px; color: var(--fb-ink); background: #fff;
}
.fb-goal-edit input:focus { outline: none; border-color: var(--fb-accent); }

.fb-btn-label { display: inline; }

/* ── Focus Mode: fade the global + writer chrome, keep the page ────── */
body.if-focus-mode .if-shell-nav {
  opacity: 0.05;
  transition: opacity 380ms ease;
}
body.if-focus-mode .if-shell-nav:hover,
body.if-focus-mode .if-shell-nav:focus-within {
  opacity: 1;
}
body.if-focus-mode .wr-ed-rail,
body.if-focus-mode .wr-ed-toolbar,
body.if-focus-mode .wr-ed-tb-stat,
body.if-focus-mode .wr-rail,
body.if-focus-mode .if-shell-search,
body.if-focus-mode .if-shell-tabs {
  opacity: 0.14;
  transition: opacity 320ms ease;
}
body.if-focus-mode .wr-ed-rail:hover,
body.if-focus-mode .wr-ed-toolbar:hover,
body.if-focus-mode .wr-rail:hover {
  opacity: 1;
}
/* Give the manuscript column a touch more air in focus mode. */
body.if-focus-mode .wr-ed-page { transition: max-width 320ms ease; }

@media (prefers-reduced-motion: reduce) {
  .flow-bar, .fb-sprint-bar > div, .fb-ring-prog,
  body.if-focus-mode .if-shell-nav, body.if-focus-mode .wr-ed-rail { transition: none; }
}

@media (max-width: 640px) {
  .flow-bar { gap: 7px; padding: 6px 8px; bottom: 12px; }
  .fb-btn-label, .fb-goal-target { display: none; }
  .fb-sprint-picker { display: none; }
}