/* ── focus ──
 * Focus mode.
 * Linked from index.html in cascade order — the order is load-bearing. */

/* ── Focus mode ────────────────────────────────────── */
body.focus-mode .block:not(.active) {
  opacity: 0.16;
  filter: blur(0.6px);
}
body.focus-mode .block { transition: opacity 0.3s var(--ease), filter 0.3s var(--ease); }
body.focus-mode .block.active.text-block::before,
body.focus-mode .block.active.code-block::before {
  content: '';
  position: absolute;
  left: -2px;
  /* Was a fixed 10px inset, sized for the old 8px-padded block; a one-line block is
     now ~22px, which left a ~2px stub. A small proportional inset keeps the bar
     visible at one line and still short of the block's full height when it grows. */
  top: 3px;
  bottom: 3px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-line);
  z-index: 3;
}
body.focus-mode .gutter { display: none; }

/* ── Floating command button (touch / small screens) ─ */
#fab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(var(--status-height) + 16px);
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: none;
  background: var(--accent);
  color: var(--bg-page);
  font-size: 20px;
  font-weight: 600;
  box-shadow: 0 10px 30px var(--accent-line);
  z-index: 90;
  cursor: pointer;
}
@media (hover: none), (max-width: 700px) {
  #fab { display: grid; place-items: center; }
}