/* =========================================================================
   EMPIRIUM OS — MOBILE: FOCUS SESSIONS
   New rules only — everything reusable (.card, .btn, .btn-primary,
   .btn-danger, .btn-block, .chip, .section-head, .list, .row, .empty)
   already lives in app.css.
   ========================================================================= */

.fs-card{ text-align:center; }

.fs-mode-toggle{
  display:flex; gap:6px; margin-bottom:16px;
  background:var(--card-subtle); border:1px solid var(--line); border-radius:var(--r-md);
  padding:4px;
}
.fs-mode-toggle .seg{
  flex:1; border:0; background:transparent; color:var(--muted);
  font-family:var(--font); font-size:14px; font-weight:600;
  padding:10px 0; border-radius:var(--r-sm); cursor:pointer;
}
.fs-mode-toggle .seg.is-active{ background:var(--accent); color:var(--on-accent); }

.fs-duration-label{
  text-align:left; margin-bottom:10px; display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--muted);
}
.fs-duration-label strong{ font-size:15px; color:var(--text); letter-spacing:0; text-transform:none; }

.fs-duration-range{
  -webkit-appearance:none; appearance:none; width:100%; height:36px;
  background:transparent; margin:0;
}
.fs-duration-range::-webkit-slider-runnable-track{
  height:6px; border-radius:3px; background:var(--card-2); border:1px solid var(--line);
}
.fs-duration-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; margin-top:-11px; border-radius:50%;
  background:var(--accent); border:2px solid var(--on-accent);
}
.fs-duration-range::-moz-range-track{
  height:6px; border-radius:3px; background:var(--card-2); border:1px solid var(--line);
}
.fs-duration-range::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--accent); border:2px solid var(--on-accent);
}
.fs-duration-scale{
  display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:10px; color:var(--faint);
  margin:2px 0 16px;
}

.fs-stopwatch-hint{
  margin:0 0 16px; font-size:13px; line-height:1.45; color:var(--muted);
}

.fs-countdown{ margin:8px 0 4px; }
.fs-timer-label{
  display:block; font-family:var(--font-mono); font-size:48px; font-weight:600;
  color:var(--text); letter-spacing:.5px;
}

.fs-planned{
  margin:6px 0 18px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--faint);
}

.fs-confirm{
  border-top:1px solid var(--line); margin-top:6px; padding-top:16px;
}
.fs-confirm p{ margin:0 0 12px; font-size:14px; color:var(--text); }
.fs-confirm .btn-row{ display:flex; gap:8px; }
.fs-confirm .btn-row .btn{ flex:1; }

/* ---------------- permission banner ---------------- */
.fs-banner p{ margin:0 0 10px; font-size:13px; line-height:1.45; color:var(--muted); }

/* ---------------- allowlist row + picker ----------------
   .row is normally a plain div elsewhere in this app; here the whole row is
   the tap target, so it's a <button>, which needs its native button styling
   reset to look identical to every other .row in the app. */
.fs-allowlist-row, .fs-app-row{
  width:100%; text-align:left; cursor:pointer;
  font:inherit; color:inherit;
}
/* .fs-app-row lives inside a .list (gap already spaces it); .fs-allowlist-row
   stands alone after the session card, so it needs its own top margin. */
.fs-allowlist-row{ margin-top:10px; }
.fs-allowlist-row:active, .fs-app-row:active{ background:var(--card-2); }
.fs-app-row.is-active{ border-color:var(--accent); }
.fs-app-check{
  flex:none; width:22px; text-align:center;
  color:var(--accent); font-weight:700; font-size:15px;
}
.fs-allowlist-done{ margin-top:14px; }

/* =========================================================================
   POMODORO

   The mode toggle is three segments wide now rather than two. Nothing else
   needed changing for that — .seg is already flex:1 — but the labels are
   longer, so the font steps down one notch at narrow widths instead of
   wrapping mid-word.
   ========================================================================= */
@media (max-width:359px){
  .fs-mode-toggle .seg{ font-size:12.5px; letter-spacing:-.2px; }
}

.fs-pomo-summary{
  margin:0 0 12px; font-size:12.5px; line-height:1.5; color:var(--muted);
  font-family:var(--font-mono); letter-spacing:.2px;
}

.fs-pomo-toggle{
  display:block; width:100%; margin:0 0 4px;
  background:transparent; border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--muted);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.8px;
  text-transform:uppercase; padding:9px 0; cursor:pointer;
}
.fs-pomo-toggle.is-open{ color:var(--accent); border-color:var(--line-bright); }

.fs-pomo-settings{
  margin:12px 0 16px; padding:4px 0 0;
  border-top:1px solid var(--line-soft);
  text-align:left;
}

/* ---- steppers ----
   A ± pair rather than a slider: five values on one panel, each with a small
   meaningful range, so the point is hitting exactly the number you meant. */
.fs-stepper{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:9px 0; border-bottom:1px solid var(--line-soft);
}
.fs-stepper-label{ font-size:13.5px; color:var(--text); }
.fs-stepper-ctrl{ display:flex; align-items:center; gap:4px; flex:none; }
.fs-stepper-ctrl b{
  min-width:46px; text-align:center;
  font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--accent);
}
.fs-step{
  width:34px; height:34px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--card-subtle); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--text);
  font-size:18px; line-height:1; cursor:pointer;
}
.fs-step:active{ background:var(--card-2); border-color:var(--line-bright); }
.fs-step[disabled]{ opacity:.3; }

/* ---- switches ----
   Every knob here can be turned off, and the hint under each label says what
   OFF actually does — a switch whose consequence you have to guess is a
   switch nobody touches. */
.fs-switches{ margin-top:6px; }
.fs-switch{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:11px 0; background:transparent; border:0; border-bottom:1px solid var(--line-soft);
  text-align:left; font:inherit; color:inherit; cursor:pointer;
}
.fs-switch:last-child{ border-bottom:0; }
.fs-switch-main{ flex:1; min-width:0; }
.fs-switch-label{ display:block; font-size:13.5px; color:var(--text); }
.fs-switch-hint{ display:block; margin-top:2px; font-size:11.5px; line-height:1.4; color:var(--faint); }
.fs-switch-track{
  flex:none; width:42px; height:24px; border-radius:12px;
  background:var(--card-subtle); border:1px solid var(--line);
  position:relative; transition:background .16s ease, border-color .16s ease;
}
.fs-switch-track i{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--faint); transition:transform .16s ease, background .16s ease;
}
.fs-switch.is-on .fs-switch-track{ background:rgba(var(--accent-rgb),.22); border-color:var(--accent); }
.fs-switch.is-on .fs-switch-track i{ transform:translateX(18px); background:var(--accent); }

/* ---- running pomodoro ----
   The card is tinted by phase. A break has to LOOK different from a focus
   block from across the room, or the one thing the mode exists to make
   unambiguous — which of the two you are in — needs reading to find out. */
.fs-active.is-break{
  border-color:rgba(var(--good-rgb),.4);
  background:linear-gradient(180deg, rgba(var(--good-rgb),.10), transparent 60%), var(--card);
}
.fs-active.is-break .fs-timer-label{ color:var(--good); }
.fs-active.is-focus-phase{
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.09), transparent 60%), var(--card);
}

/* One pip per focus block: filled behind you, ringed for the one running,
   hollow ahead. The whole plan at a glance. */
.fs-pips{ display:flex; justify-content:center; gap:6px; margin:2px 0 12px; }
.fs-pip{
  width:8px; height:8px; border-radius:50%;
  border:1px solid var(--line-bright); background:transparent;
}
.fs-pip.is-done{ background:var(--accent); border-color:var(--accent); }
.fs-pip.is-live{
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22);
}
.fs-active.is-break .fs-pip.is-done{ background:var(--good); border-color:var(--good); }

.fs-phase{
  display:flex; align-items:baseline; justify-content:center; gap:10px;
  font-family:var(--font-display); font-size:15px; font-weight:600;
  letter-spacing:.4px; color:var(--text);
}
.fs-phase-round{
  font-family:var(--font-mono); font-size:10.5px; font-weight:400;
  letter-spacing:.8px; text-transform:uppercase; color:var(--faint);
}

.fs-skip, .fs-advance{ margin-bottom:8px; }
.fs-skip{ background:transparent; border:1px solid var(--line); color:var(--muted); }
.fs-skip:active{ border-color:var(--line-bright); color:var(--text); }