/* ================================================================
   POMODORO TIMER  ·  style.css
   ──────────────────────────────────────────────────────────────
   Balsamiq-style wireframe aesthetic.
   Edit the palette variables below to retheme the app.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400&display=swap');


/* ── Color Palettes ─────────────────────────────────────────── */

:root {
  /* Pomodoro / focus */
  --pom-ink:        #1a1a1a;
  --pom-timer:      #1a1a1a;
  --pom-accent:     #1a1a1a;
  --pom-badge-bg:   #ffffff;
  --pom-badge-fg:   #1a1a1a;
  --pom-btn-pri-bg: #1a1a1a;
  --pom-btn-pri-fg: #ffffff;

  /* Short break — 5 min */
  --brk-s-ink:        #1a4a20;
  --brk-s-timer:      #1a4a20;
  --brk-s-accent:     #1a4a20;
  --brk-s-badge-bg:   #eaf5ea;
  --brk-s-badge-fg:   #1a4a20;
  --brk-s-btn-pri-bg: #1a4a20;
  --brk-s-btn-pri-fg: #ffffff;

  /* Long break — 20 min */
  --brk-l-ink:        #1a2e6e;
  --brk-l-timer:      #1a2e6e;
  --brk-l-accent:     #1a2e6e;
  --brk-l-badge-bg:   #eaeffa;
  --brk-l-badge-fg:   #1a2e6e;
  --brk-l-btn-pri-bg: #1a2e6e;
  --brk-l-btn-pri-fg: #ffffff;
}


/* ── Active-theme shim (class toggled on #app by JS) ────────── */

#app {
  --ink:        var(--pom-ink);
  --timer-c:    var(--pom-timer);
  --badge-bg:   var(--pom-badge-bg);
  --badge-fg:   var(--pom-badge-fg);
  --btn-pri-bg: var(--pom-btn-pri-bg);
  --btn-pri-fg: var(--pom-btn-pri-fg);
}

#app.theme-short {
  --ink:        var(--brk-s-ink);
  --timer-c:    var(--brk-s-timer);
  --badge-bg:   var(--brk-s-badge-bg);
  --badge-fg:   var(--brk-s-badge-fg);
  --btn-pri-bg: var(--brk-s-btn-pri-bg);
  --btn-pri-fg: var(--brk-s-btn-pri-fg);
}

#app.theme-long {
  --ink:        var(--brk-l-ink);
  --timer-c:    var(--brk-l-timer);
  --badge-bg:   var(--brk-l-badge-bg);
  --badge-fg:   var(--brk-l-badge-fg);
  --btn-pri-bg: var(--brk-l-btn-pri-bg);
  --btn-pri-fg: var(--brk-l-btn-pri-fg);
}


/* ── Reset ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }


/* ── Desktop ────────────────────────────────────────────────── */

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Faint graph-paper grid — sketch-pad feel */
  background-color: #efefef;
  background-image:
    linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  font-family: 'Balsamiq Sans', 'Comic Sans MS', cursive;
}


/* ── Window ─────────────────────────────────────────────────── */

.mac-window {
  width: 340px;
  background: #ffffff;
  border: 2px solid #1a1a1a;
  border-radius: 4px;
  /* Hard offset shadow — marker-on-paper feel */
  box-shadow: 4px 4px 0 #1a1a1a;
}


/* ── Title bar ──────────────────────────────────────────────── */

.title-bar {
  padding: 9px 14px 8px;
  border-bottom: 1.5px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title-text {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}

/* Small X mark in corner — decorative only */
.title-close {
  width: 16px;
  height: 16px;
  border: 1.5px solid #aaaaaa;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #aaaaaa;
  user-select: none;
}


/* ── Window body ────────────────────────────────────────────── */

.window-body {
  padding: 18px 18px 16px;
}


/* ── Mode badge ─────────────────────────────────────────────── */

.mode-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--badge-fg);
  background: var(--badge-bg);
  border: 1.5px solid var(--badge-fg);
  border-radius: 3px;
  padding: 1px 7px 2px;
  margin-bottom: 12px;
}


/* ── Timer box ──────────────────────────────────────────────── */

.timer-box {
  position: relative;
  border: 1.5px solid #1a1a1a;
  border-radius: 3px;
  text-align: center;
  padding: 20px 10px 16px;
  margin-bottom: 10px;
}

.timer-display {
  font-size: 68px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: var(--timer-c);
  line-height: 1;
  user-select: none;
}

/* Tiny unlabeled advance-to-end button */
.advance-btn {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 13px;
  height: 13px;
  background: transparent;
  border: 1px solid #cccccc;
  border-radius: 2px;
  padding: 0;
  line-height: 1;
}

.advance-btn:hover {
  border-color: #888888;
  background: #f5f5f5;
}


/* ── Status line ────────────────────────────────────────────── */

.status-line {
  text-align: center;
  font-size: 11px;
  color: #888888;
  letter-spacing: 0.06em;
  min-height: 15px;
  margin-bottom: 14px;
}


/* ── Controls ───────────────────────────────────────────────── */

.controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 6px;
}


/* ── Buttons ────────────────────────────────────────────────── */

.mac-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 16px 6px;
  background: #ffffff;
  color: #1a1a1a;
  border: 1.5px solid #1a1a1a;
  border-radius: 3px;
  letter-spacing: 0.03em;
}

.mac-btn:hover:not(:disabled) {
  background: #f5f5f5;
}

.mac-btn:active:not(:disabled) {
  background: #ebebeb;
}

.mac-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.mac-btn--primary {
  background: var(--btn-pri-bg);
  color: var(--btn-pri-fg);
  border-color: var(--btn-pri-bg);
}

.mac-btn--primary:hover:not(:disabled) {
  filter: brightness(1.15);
  background: var(--btn-pri-bg);
}


/* ── Choice panel ───────────────────────────────────────────── */

.choice-panel {
  display: none;
  border: 1.5px solid #1a1a1a;
  border-radius: 3px;
  padding: 10px 12px 12px;
  margin-top: 6px;
}

.choice-msg {
  font-size: 11px;
  text-align: center;
  color: #555555;
  margin-bottom: 10px;
  line-height: 1.45;
}

.choice-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}


/* ── Divider ────────────────────────────────────────────────── */

.section-divider {
  margin: 16px 0 13px;
  border: none;
  border-top: 1.5px solid #1a1a1a;
}


/* ── Tomato chart ───────────────────────────────────────────── */

.tomato-section {
  text-align: center;
}

.section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888888;
  margin-bottom: 9px;
}

.tomato-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  align-items: center;
  font-size: 19px;
  line-height: 1;
}

/* Each group of 4 in a simple bordered cell */
.tomato-group {
  display: inline-flex;
  gap: 1px;
  padding: 3px 6px;
  border: 1.5px solid #cccccc;
  border-radius: 3px;
}

.empty-note {
  font-size: 11px;
  color: #bbbbbb;
  letter-spacing: 0.08em;
}

.tomato-count {
  font-size: 10px;
  color: #aaaaaa;
  letter-spacing: 0.07em;
  margin-top: 7px;
  min-height: 14px;
}