/* PomoFocus - dark theme with a per-mode accent.

   Design rule: the BACKGROUND stays constant near-black. Only the ACCENT
   changes per mode (coral focus / teal short break / indigo long break), and it
   shows up on the timer ring, the START button, and an ambient glow behind the
   timer. That keeps the focus-vs-break cue while losing the flat wash of color
   that made the light version ugly. */

:root{
  /* surfaces */
  --bg:#0d0f14;
  --bg2:#12151c;
  --surface:#171b24;
  --surface2:#1d222d;
  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.12);

  /* text */
  --text:#e8eaf0;
  --dim:#8b93a7;
  --faint:#5c6479;

  /* per-mode accent, overridden below */
  --accent:#ff6b5d;
  --accentDim:rgba(255,107,93,.14);
  --accentGlow:rgba(255,107,93,.22);

  --radius:14px;
  --radiusSm:10px;
  --maxw:520px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

body[data-mode="pomodoro"]{
  --accent:#ff6b5d; --accentDim:rgba(255,107,93,.14); --accentGlow:rgba(255,107,93,.22);
}
body[data-mode="shortBreak"]{
  --accent:#2dd4bf; --accentDim:rgba(45,212,191,.14); --accentGlow:rgba(45,212,191,.20);
}
body[data-mode="longBreak"]{
  --accent:#818cf8; --accentDim:rgba(129,140,248,.14); --accentGlow:rgba(129,140,248,.20);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom);
  -webkit-font-smoothing:antialiased;
  transition:background-color .4s ease;
}

/* Ambient glow behind the timer. Fixed + pointer-events:none so it never
   interferes with clicks; it just tints the top of the screen. */
body::before{
  content:"";
  position:fixed;left:50%;top:-190px;transform:translateX(-50%);
  width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle, var(--accentGlow) 0%, transparent 68%);
  filter:blur(38px);
  pointer-events:none;z-index:0;
  transition:background .45s ease;
}

/* Light mode: the toggle now flips TO light rather than to dark. */
body.Light{
  --bg:#f4f5f8; --bg2:#eceef3; --surface:#fff; --surface2:#f7f8fa;
  --line:rgba(0,0,0,.07); --line2:rgba(0,0,0,.12);
  --text:#1a1d26; --dim:#666e80; --faint:#98a0b0;
}

/* ---------- top bar ---------- */
.TopBar{position:relative;z-index:2;border-bottom:1px solid var(--line)}
.TopBarInner{
  max-width:var(--maxw);margin:0 auto;padding:16px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-width:0;
}
.Brand{
  background:none;border:0;color:var(--text);font:inherit;font-weight:650;
  font-size:17px;letter-spacing:-.2px;display:flex;align-items:center;gap:8px;
  cursor:pointer;padding:0;
}
.BrandMark{
  font-size:15px;color:var(--accent);
  width:28px;height:28px;display:grid;place-items:center;
  background:var(--accentDim);border-radius:8px;
  transition:background .3s,color .3s;
}
.TopNav{display:flex;gap:6px;flex:0 0 auto}
.GhostBtn{
  background:transparent;border:1px solid var(--line2);color:var(--dim);
  font:inherit;font-size:13px;font-weight:500;
  padding:8px 13px;border-radius:9px;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
}
.GhostBtn:hover{color:var(--text);border-color:var(--line2);background:var(--surface)}
/* The "?" help link is an <a>, so it needs the anchor bits neutralized to
   sit flush with the sibling <button> elements. */
.HelpBtn{
  text-decoration:none;display:grid;place-items:center;
  width:32px;padding:0;font-weight:600;line-height:1;
}

/* On narrow phones the three nav controls plus the wordmark overflow the bar,
   which clipped "Settings" and pushed the help button off-screen. Tighten
   everything and let the brand text shrink first. */
@media(max-width:430px){
  .TopBarInner{padding:14px 10px;gap:6px}
  .Brand{font-size:15px;gap:6px;min-width:0}
  .Brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .BrandMark{width:24px;height:24px;font-size:13px;flex:0 0 auto}
  .TopNav{gap:5px}
  .GhostBtn{padding:7px 9px;font-size:12px}
  .HelpBtn{width:28px}
}
@media(max-width:340px){
  /* Very small screens: drop the wordmark, keep the icon and the controls. */
  .Brand span:last-child{display:none}
}

/* ---------- main ---------- */
.Main{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:26px 16px 56px}

.TimerCard{
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg2) 100%);
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px 18px 28px;text-align:center;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02) inset;
}

.ModeTabs{
  display:inline-flex;gap:3px;margin-bottom:22px;
  background:var(--bg);border:1px solid var(--line);
  padding:4px;border-radius:11px;
}
.ModeTab{
  background:none;border:0;color:var(--faint);font:inherit;font-size:13px;font-weight:550;
  padding:8px 15px;border-radius:8px;cursor:pointer;
  transition:color .18s, background .18s;white-space:nowrap;
}
.ModeTab:hover{color:var(--dim)}
.ModeTab.Active{background:var(--accentDim);color:var(--accent)}

.TimeDisplay{
  font-size:96px;font-weight:250;line-height:1;letter-spacing:-4px;
  margin:4px 0 6px;font-variant-numeric:tabular-nums;
  color:var(--text);
  text-shadow:0 0 46px var(--accentGlow);
  transition:text-shadow .4s ease;
}
@media(max-width:420px){.TimeDisplay{font-size:76px;letter-spacing:-3px}}

.SessionLabel{
  font-size:11px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--accent);margin:0 0 22px;transition:color .3s;
}

.TimerControls{display:flex;align-items:center;justify-content:center;gap:12px}
.StartBtn{
  background:var(--accent);border:0;border-radius:12px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:700;letter-spacing:1.6px;
  padding:15px 0;width:186px;color:#0d0f14;
  box-shadow:0 8px 26px -8px var(--accent);
  transition:transform .12s, box-shadow .2s, background .3s, opacity .15s;
}
.StartBtn:hover{opacity:.92}
.StartBtn:active{transform:scale(.975)}
.StartBtn.Running{
  background:transparent;color:var(--accent);
  border:1px solid var(--accent);box-shadow:none;
}
.SkipBtn{
  background:var(--surface2);border:1px solid var(--line);color:var(--dim);
  font-size:17px;cursor:pointer;width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;transition:color .15s,border-color .15s;
}
.SkipBtn:hover{color:var(--text);border-color:var(--line2)}

.RoundCounter{text-align:center;color:var(--faint);margin:20px 0 4px;font-size:12px;font-weight:500;letter-spacing:.4px}
.ActiveTaskLabel{text-align:center;font-size:15px;margin:0 0 26px;color:var(--dim);font-weight:450}

/* ---------- tasks ---------- */
.TaskSection{margin-top:6px}
.TaskHeader{
  display:flex;align-items:center;gap:8px;
  padding-bottom:12px;border-bottom:1px solid var(--line);position:relative;
}
.TaskHeader h2{font-size:13px;margin:0;flex:1;color:var(--dim);font-weight:600;letter-spacing:1.4px;text-transform:uppercase}
.IconBtn{
  background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:9px;
  cursor:pointer;font-size:15px;width:32px;height:32px;line-height:1;
  transition:color .15s,border-color .15s;
}
.IconBtn:hover{color:var(--text);border-color:var(--line2)}
.TaskMenu{
  position:absolute;right:0;top:40px;background:var(--surface2);color:var(--text);
  border:1px solid var(--line2);border-radius:12px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.9);z-index:20;overflow:hidden;min-width:200px;
}
.TaskMenu button{
  display:block;width:100%;text-align:left;background:none;border:0;font:inherit;
  font-size:13.5px;padding:12px 15px;cursor:pointer;color:var(--dim);
}
.TaskMenu button:hover{background:var(--surface);color:var(--text)}

.TaskList{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.TaskItem{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radiusSm);padding:14px 14px;
  display:flex;align-items:center;gap:12px;cursor:pointer;
  position:relative;overflow:hidden;
  transition:border-color .18s, background .18s;
}
.TaskItem:hover{border-color:var(--line2)}
/* Active task gets an accent spine on the left edge. */
.TaskItem.Active{border-color:var(--accent);background:var(--surface2)}
.TaskItem.Active::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
}
.TaskItem.Done{opacity:.42}
.TaskItem.Done .TaskTitle{text-decoration:line-through}
.TaskCheck{
  flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  border:1.5px solid var(--faint);background:none;cursor:pointer;
  display:grid;place-items:center;font-size:11px;color:#0d0f14;padding:0;
  transition:background .15s,border-color .15s;
}
.TaskCheck:hover{border-color:var(--accent)}
.TaskCheck.On{background:var(--accent);border-color:var(--accent)}
.TaskTitle{flex:1;font-size:14.5px;word-break:break-word;color:var(--text);font-weight:450}
.TaskCount{color:var(--faint);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.TaskEditBtn{background:none;border:0;color:var(--faint);font-size:14px;cursor:pointer;padding:3px 4px}
.TaskEditBtn:hover{color:var(--text)}

.AddTaskBtn{
  width:100%;margin-top:10px;padding:15px;border-radius:var(--radiusSm);cursor:pointer;
  background:transparent;border:1px dashed var(--line2);
  color:var(--dim);font:inherit;font-size:14px;font-weight:550;
  transition:color .15s,border-color .15s,background .15s;
}
.AddTaskBtn:hover{color:var(--accent);border-color:var(--accent);background:var(--accentDim)}

.TaskForm{
  background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--radiusSm);padding:18px;margin-top:10px;
}
.TaskTitleInput{
  width:100%;border:0;border-bottom:1px solid var(--line2);background:transparent;
  font:inherit;font-size:15.5px;font-weight:550;padding:8px 2px;outline:none;color:var(--text);
}
.TaskTitleInput::placeholder{color:var(--faint)}
.TaskTitleInput:focus{border-bottom-color:var(--accent)}
.EstRow{margin-top:18px}
.EstRow label{display:block;font-size:11px;font-weight:600;color:var(--faint);margin-bottom:8px;letter-spacing:1.1px;text-transform:uppercase}
.EstControls{display:flex;align-items:center;gap:6px}
.EstInput{
  width:74px;padding:10px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);font:inherit;font-size:14.5px;color:var(--text);
}
.EstInput:focus{outline:none;border-color:var(--accent)}
.StepBtn{
  background:var(--bg);border:1px solid var(--line);border-radius:9px;cursor:pointer;
  width:36px;height:38px;font-size:9px;color:var(--dim);
}
.StepBtn:hover{color:var(--text);border-color:var(--line2)}
.TaskFormActions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.PrimaryBtn{
  background:var(--accent);color:#0d0f14;border:0;border-radius:9px;font:inherit;font-size:13.5px;
  padding:11px 20px;cursor:pointer;font-weight:650;
}
.PrimaryBtn:hover{opacity:.92}
.TextBtn{
  background:none;border:0;color:var(--faint);font:inherit;font-size:13.5px;
  cursor:pointer;padding:11px 10px;
}
.TextBtn:hover{color:var(--text)}
.TextBtn.Danger{color:#f87171;display:block;margin:16px auto 0}

.SummaryBar{
  display:flex;justify-content:space-between;gap:10px;margin-top:22px;
  padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;
}

/* ---------- dialogs ---------- */
.Overlay{
  position:fixed;inset:0;background:rgba(5,6,9,.72);backdrop-filter:blur(6px);z-index:50;
  display:flex;align-items:flex-start;justify-content:center;padding:28px 14px;overflow-y:auto;
}
/* A class-level `display` beats the browser's default [hidden]{display:none},
   so hidden overlays must be forced closed explicitly. */
.Overlay[hidden]{display:none}
.TaskMenu[hidden],.TaskForm[hidden],.AddTaskBtn[hidden],.SkipBtn[hidden]{display:none}

.Sheet{
  background:var(--surface);color:var(--text);border:1px solid var(--line2);
  border-radius:18px;width:100%;max-width:430px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9);
}
.SheetHead{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 18px;border-bottom:1px solid var(--line);
}
.SheetHead h2{margin:0;font-size:15px;color:var(--text);font-weight:600}
.SheetBody{padding:18px}

.SectionLabel{
  font-size:10.5px;text-transform:uppercase;color:var(--faint);
  margin:22px 0 12px;letter-spacing:1.6px;font-weight:650;
}
.SectionLabel:first-child{margin-top:0}
.DurationRow{display:flex;gap:9px}
.DurationRow label{flex:1;font-size:11px;color:var(--faint);font-weight:550}
.DurationRow input{
  width:100%;margin-top:7px;padding:11px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);font:inherit;font-size:14.5px;color:var(--text);
}
.DurationRow input:focus{outline:none;border-color:var(--accent)}
.ToggleRow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:450;color:var(--text);
}
.SmallNum{
  width:72px;padding:9px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);font:inherit;color:var(--text);
}
.SmallNum:focus{outline:none;border-color:var(--accent)}
.ToggleRow select{
  padding:9px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);font:inherit;color:var(--text);cursor:pointer;
}
.ToggleRow input[type=range]{accent-color:var(--accent);width:130px}

.Switch{position:relative;display:inline-block;width:44px;height:25px;flex:0 0 auto}
.Switch input{opacity:0;width:0;height:0}
.Slider{position:absolute;cursor:pointer;inset:0;background:var(--surface2);border:1px solid var(--line2);border-radius:25px;transition:.2s}
.Slider:before{
  content:"";position:absolute;height:17px;width:17px;left:3px;top:3px;
  background:var(--faint);border-radius:50%;transition:.2s;
}
.Switch input:checked + .Slider{background:var(--accent);border-color:var(--accent)}
.Switch input:checked + .Slider:before{transform:translateX(19px);background:#0d0f14}

.SheetActions{display:flex;justify-content:flex-end;margin-top:22px}

/* Help links in the settings sheet: styled like a ToggleRow but tappable. */
.LinkRow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-size:14px;font-weight:450;color:var(--text);text-decoration:none;
  transition:color .15s;
}
.LinkRow:hover{color:var(--accent)}
.LinkRow small{display:block;font-size:11.5px;color:var(--faint);font-weight:400;margin-top:3px}
.LinkArrow{color:var(--faint);font-size:15px;flex:0 0 auto}
.LinkRow:hover .LinkArrow{color:var(--accent)}

/* ---------- report ---------- */
.StatRow{display:flex;gap:9px;text-align:center}
.Stat{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 6px}
.StatNum{display:block;font-size:25px;font-weight:300;color:var(--text);font-variant-numeric:tabular-nums}
.StatLbl{display:block;font-size:10px;color:var(--faint);margin-top:5px;letter-spacing:.4px}
.RangeTabs{display:flex;gap:4px;margin:20px 0 12px;background:var(--bg);padding:4px;border-radius:11px;border:1px solid var(--line)}
.RangeTab{
  flex:1;background:none;border:0;border-radius:8px;padding:9px;cursor:pointer;
  font:inherit;font-size:13px;color:var(--faint);font-weight:550;transition:.18s;
}
.RangeTab.Active{background:var(--accentDim);color:var(--accent)}
.Chart{display:flex;align-items:flex-end;gap:4px;height:150px;padding:12px 0}
.Bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:6px}
.BarFill{
  width:100%;background:var(--accent);border-radius:4px;min-height:2px;
  opacity:.85;transition:background .3s;
}
.BarFill[style*="height: 0"]{background:var(--line2);opacity:1}
.BarLbl{font-size:9px;color:var(--faint);white-space:nowrap}
.ReportTotals{margin-top:12px;font-size:13px;color:var(--dim);line-height:1.9;border-top:1px solid var(--line);padding-top:14px}
.ReportTotals b{color:var(--text);font-weight:600}