:root {
  color-scheme: light;
  --window: #fafafa;
  --surface: #ffffff;
  --text: #1d1d1d;
  --muted: #70757d;
  --support: #e7e9ed;
  --border: #d7dbe0;
  --accent: #1f1f1f;
  --blue: #3584e4;
  --green: #2f9e68;
  --red: #d24444;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --window: #1c1c1f;
    --surface: #26262a;
    --text: #f1f1f3;
    --muted: #9a9aa2;
    --support: #34343a;
    --border: #3c3c43;
    --accent: #f1f1f3;
    --blue: #5a9bf0;
    --green: #4cbd84;
    --red: #e26464;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--window);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* Wide enough that 30 day bars and the year heatmap in the statistics view
   fit without a horizontal scrollbar; every tab shares the same width. */
.timer-panel {
  /* Anchor for the absolutely positioned incoming view during a swipe. */
  position: relative;
  width: min(1000px, 100%);
  min-height: 620px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 18px 55px rgb(0 0 0 / 8%);
  padding: 22px;
}

/* Interactive swipe between tabs (touch, see app.js): while dragging, the
   neighbouring view is shown beside the current one and both follow the
   finger; .settling animates the release. */
.timer-panel.swiping {
  overflow: hidden;
}

.view.peek {
  display: block;
  position: absolute;
}

.view.settling {
  transition: transform 0.2s ease;
}

.top-bar,
.timer-head,
.controls,
.subject-form,
.subject-edit-form,
.brand,
.tabs {
  display: flex;
  align-items: center;
}

.top-bar {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}

.brand {
  gap: 10px;
  font-weight: 700;
}

.brand img {
  width: 30px;
  height: 30px;
}

.tabs {
  background: var(--support);
  border-radius: 8px;
  padding: 3px;
}

.tab {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 7px 14px;
}

.tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.timer-head {
  justify-content: space-between;
  gap: 16px;
}

.state-button {
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  font-weight: 800;
}

.subject-picker {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.9rem;
}

.subject-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.subject-control select {
  flex: 1;
}

.subject-swatch {
  flex: none;
  box-shadow: 0 0 0 1px var(--border);
}

.subject-add {
  flex: none;
  width: 38px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0;
}

.subject-picker select,
.subject-form input,
.subject-form button,
.subject-edit-form input,
.subject-edit-form button,
.preferences-form input,
.preferences-actions button {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 7px 10px;
}

.ring-wrap {
  width: min(440px, 82vw);
  aspect-ratio: 1;
  position: relative;
  margin: 18px auto 8px;
}

.progress-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track,
.ring-value {
  fill: none;
  stroke-width: 14;
}

.ring-track {
  stroke: var(--support);
}

.ring-value {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.35s ease, stroke 0.35s ease;
}

.time-readout {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(3.8rem, 13vw, 6rem);
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.cycle-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  width: min(320px, 70vw);
  margin: 0 auto 28px;
}

.cycle-dot {
  height: 7px;
  border-radius: 999px;
  background: var(--support);
}

.cycle-dot.done {
  background: var(--accent);
}

.controls {
  justify-content: center;
  gap: 30px;
  margin-bottom: 28px;
}

.icon-button,
.main-button {
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
}

.icon-button {
  width: 54px;
  height: 54px;
  font-size: 1.7rem;
}

.main-button {
  width: 72px;
  height: 72px;
  border: 0;
  background: var(--accent);
  color: var(--surface);
  font-size: 1.8rem;
}

.subject-form {
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.subject-form button,
.preferences-actions button[type="submit"] {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(var(--stats-columns, 4), minmax(0, 1fr));
  gap: 14px;
}

.stats-empty {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
}

.stats-toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* +/- stepper to grow/shrink the statistics cards (fewer/more grid columns). */
.card-size {
  display: flex;
  flex: none;
  gap: 3px;
  background: var(--support);
  border-radius: 8px;
  padding: 3px;
}

.card-size button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  width: 30px;
  height: 30px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}

.card-size button:hover:not(:disabled) {
  background: var(--surface);
}

.card-size button:disabled {
  opacity: 0.4;
  cursor: default;
}

.scope-toggle {
  display: flex;
  gap: 3px;
  background: var(--support);
  border-radius: 8px;
  padding: 3px;
}

.scope-toggle button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 6px 14px;
}

.scope-toggle button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
}

/* Timer page: pill button to flip between the short and long preset. */
.preset-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  padding: 5px 12px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.preset-button:hover {
  background: var(--support);
}

/* Settings: segmented Kurz/Lang switch above the timer fields. */
.preset-toggle {
  display: flex;
  gap: 3px;
  background: var(--support);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 8px;
}

.preset-toggle button {
  flex: 1;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 6px 14px;
  font-weight: 700;
}

.preset-toggle button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
}

/* "Zeigt: ..." and the card-size stepper share one line: context grows on
   the left, the stepper keeps its size on the right. */
.stats-context-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}

.stats-context {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
}

.ctx-label {
  color: var(--muted);
  font-weight: 700;
}

.ctx-subject {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chip-clear {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 2px 10px;
  font-size: 0.8rem;
}

.hint {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85rem;
}

.muted-note {
  color: var(--muted);
  margin: 0;
}

.stats-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: calc(16px * var(--stats-card-scale, 1));
  cursor: help;
}

.stats-card span,
.stats-row span {
  color: var(--muted);
  font-weight: 700;
}

.stats-card span {
  font-size: calc(1rem * var(--stats-card-scale, 1));
}

.stats-card strong {
  display: block;
  margin-top: calc(6px * var(--stats-card-scale, 1));
  font-size: calc(1.8rem * var(--stats-card-scale, 1));
  font-weight: 500;
}

/* Container for the reorderable statistics sections: a flex column, so the
   per-section `order` from the settings takes effect. */
.stats-sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.stats-sections [data-section][hidden] {
  display: none;
}

.stats-section {
  margin-top: 28px;
}

.stats-sections .stats-section {
  margin-top: 0;
}

.stats-section h2 {
  font-size: 1.15rem;
  margin: 0 0 12px;
}

.subject-stats {
  display: grid;
  gap: 10px;
}

.stats-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  padding: 6px 8px;
}

.stats-row:hover {
  background: var(--support);
}

.stats-row.active {
  border-color: var(--blue);
  background: var(--support);
}

.swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.meter {
  height: 9px;
  border-radius: 999px;
  background: var(--support);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.8rem;
}

.chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  --bar-color: var(--blue);
}

.legend-focus {
  background: var(--bar-color);
}

.legend-break {
  background: var(--bar-color);
  opacity: 0.3;
}

.legend-interruption {
  background-image: repeating-linear-gradient(
    45deg,
    var(--bar-color) 0 3px,
    transparent 3px 6px
  );
  opacity: 0.75;
}

.daily {
  --plot: 180px;
  --label: 18px;
  display: flex;
  gap: 8px;
}

.daily-axis {
  position: relative;
  flex: none;
  width: 34px;
  height: calc(var(--plot) - var(--label));
}

.y-label {
  position: absolute;
  right: 0;
  transform: translateY(50%);
  color: var(--muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

/* width: 0 + flex-grow: a scroll container's intrinsic width equals its
   content's, so without this the bar track would stretch the whole panel
   (and on phones the page) instead of scrolling inside. */
.daily-scroll {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.daily-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-width: 100%;
  height: var(--plot);
}

.daily-grid {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--plot) - var(--label));
  pointer-events: none;
}

.grid-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--support);
}

.day-bar {
  position: relative;
  z-index: 1;
  flex: 0 0 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 0;
  background: transparent;
  padding: 0;
}

/* Daily chart bars shrink to fit the track (30 days without scrolling) and
   only fall back to scrolling below 14px per bar (e.g. the "Gesamt" view). */
.daily:not(.fill) .day-bar {
  flex: 1 1 14px;
  min-width: 14px;
  max-width: 26px;
}

.bar-col {
  height: calc(var(--plot) - var(--label));
  display: flex;
  align-items: flex-end;
}

.bar-stack {
  width: 100%;
  min-height: 2px;
  display: flex;
  flex-direction: column;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}

.day-bar.empty .bar-stack {
  height: 2px;
  background: var(--support);
}

.bar-focus {
  width: 100%;
  background: var(--bar-color);
}

.bar-break {
  width: 100%;
  background: var(--bar-color);
  opacity: 0.3;
}

.bar-interruption {
  width: 100%;
  opacity: 0.75;
  background-image: repeating-linear-gradient(
    45deg,
    var(--bar-color) 0 3px,
    transparent 3px 6px
  );
}

.x-label {
  height: var(--label);
  line-height: var(--label);
  text-align: center;
  color: var(--muted);
  font-size: 0.7rem;
  /* A label may be wider than its bar; it then spills evenly to both sides
     instead of wrapping to a second line. */
  white-space: nowrap;
}

.day-bar.selected .bar-stack {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

.day-bar.selected .x-label {
  color: var(--text);
  font-weight: 700;
}

.daily.fill {
  --plot: 150px;
}

.daily.fill .daily-track {
  gap: 3px;
}

.daily.fill .day-bar {
  flex: 1;
}

.daily-subject-stats,
.subject-manager-list {
  display: grid;
  gap: 12px;
}

.daily-subject-day {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.daily-subject-day h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.daily-subject-row {
  display: grid;
  grid-template-columns: 16px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.daily-subject-row small {
  color: var(--muted);
}

.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.export-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 7px 14px;
  text-decoration: none;
}

.export-link:hover {
  background: var(--support);
}

.subject-manager .subject-form {
  justify-content: flex-start;
  margin-top: 16px;
}

.subject-edit-form {
  gap: 8px;
}

.subject-edit-form input[name="name"] {
  flex: 1;
  min-width: 150px;
}

.subject-edit-form button[data-delete-subject] {
  color: var(--red);
}

/* Collapsible settings groups: native <details>/<summary>. Everything starts
   collapsed for a compact overview; what the user opens is remembered per
   device (localStorage, see settings.js). */
.settings-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 14px;
  padding: 0 18px;
}

.settings-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -18px;
  padding: 13px 18px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
}

.settings-group > summary::-webkit-details-marker {
  display: none;
}

.settings-group > summary::after {
  content: "▸";
  color: var(--muted);
  transition: transform 0.15s ease;
}

.settings-group[open] > summary::after {
  transform: rotate(90deg);
}

.settings-group > summary:hover {
  background: var(--support);
}

.settings-group[open] {
  padding-bottom: 16px;
}

.settings-group[open] > summary {
  border-bottom: 1px solid var(--support);
  border-radius: 8px 8px 0 0;
  margin-bottom: 10px;
}

/* "Daten" sits right below the "Alles zurücksetzen" row, outside the form;
   give it breathing room (this must follow .settings-group to win the tie). */
.data-export {
  margin-top: 22px;
}

/* Sub-headings inside a settings group (e.g. "Abschnitte" / "Karten" in the
   merged Statistik group). */
.settings-subheading {
  margin: 14px 0 6px;
  font-size: 1rem;
}

.settings-subheading:first-of-type {
  margin-top: 4px;
}

.preferences-form .field-number,
.preferences-form .field-select {
  display: grid;
  grid-template-columns: 1fr 120px 80px;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.preferences-form .field-number + .field-number {
  border-top: 1px solid var(--support);
}

.preferences-form span {
  font-weight: 700;
}

.preferences-form small {
  color: var(--muted);
}

/* Toggle rows: label left, checkbox right, hint on its own line below. */
.preferences-form .field-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 0;
}

.preferences-form .field-toggle + .field-toggle,
.preferences-form .field-select {
  border-top: 1px solid var(--support);
}

.preferences-form .field-toggle small,
.preferences-form .field-select small {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.preferences-form .field-select select,
.preferences-form select {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 7px 10px;
}

.preferences-form .field-select {
  grid-template-columns: 1fr 160px;
}

/* Sound rows: label, sound picker and a preview button; hint below. */
.preferences-form .field-sound {
  display: grid;
  grid-template-columns: 1fr 150px auto;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 0;
  border-top: 1px solid var(--support);
}

.preferences-form .field-sound small {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.sound-preview {
  min-height: 38px;
  width: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.sound-preview:hover {
  background: var(--support);
}

/* Tab-colour rows: label left, "Keine" toggle, colour swatch right. */
.preferences-form .field-color {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--support);
}

.preferences-form .color-none {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}

.preferences-form .color-none input[type="checkbox"] {
  justify-self: auto;
}

.preferences-form .field-color input[type="color"] {
  width: 52px;
  height: 34px;
  min-height: 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  justify-self: end;
  cursor: pointer;
}

.preferences-form .field-color input[type="color"]:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.preferences-form input[type="checkbox"] {
  min-height: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  justify-self: end;
  accent-color: var(--blue);
}

.fieldset-hint {
  color: var(--muted);
  margin: 0 0 12px;
  font-size: 0.9rem;
}

.card-toggles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.card-item {
  padding: 4px 0;
}

.card-item + .card-item {
  border-top: 1px solid var(--support);
}

.card-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-reorder {
  display: inline-flex;
  gap: 4px;
  flex: none;
}

.card-reorder button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.7rem;
  line-height: 1;
}

.card-reorder button:hover {
  background: var(--support);
}

.card-item:first-child .reorder-up,
.card-item:last-child .reorder-down {
  opacity: 0.3;
  cursor: default;
}

/* Hovering a card row shows its explanation as a tooltip, like the stats cards. */
.preferences-form label.card-toggle {
  cursor: help;
}

.fieldset-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.section-reset {
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 6px 14px;
}

.section-reset:hover {
  background: var(--support);
}

.reset-all {
  border-color: var(--text);
  font-weight: 600;
}

.preferences-form label.card-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  margin: 0;
  padding: 0;
}

.preferences-form .card-toggle input[type="checkbox"] {
  justify-self: auto;
}

.preferences-form .card-toggle span {
  font-weight: 600;
}

.preferences-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* Full-screen break overlay (Screen Overlay). */
.break-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(0 0 0 / 78%);
  backdrop-filter: blur(6px);
  color: #fff;
}

.break-overlay[hidden] {
  display: none;
}

.overlay-card {
  text-align: center;
  display: grid;
  gap: 16px;
  max-width: 480px;
}

.overlay-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 0.95rem;
  opacity: 0.8;
}

.overlay-time {
  font-size: clamp(5rem, 22vw, 9rem);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.overlay-hint {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.85;
}

.overlay-dismiss {
  justify-self: center;
  margin-top: 6px;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  padding: 10px 26px;
  font-size: 1rem;
}

.overlay-dismiss:hover {
  background: rgb(255 255 255 / 12%);
}

@media (max-width: 640px) {
  /* Whatever a single section overflows, the page itself never pans
     sideways on a phone. */
  body {
    overflow-x: hidden;
  }

  .app-shell {
    padding: 0;
  }

  .timer-panel {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    padding: 16px;
  }

  /* 30 day bars fit a phone screen: bars and gaps shrink much further than
     on desktop. The day labels are already thinned out (every 4th day), so
     nothing overlaps. */
  .daily:not(.fill) .daily-track {
    gap: 2px;
  }

  .daily:not(.fill) .day-bar {
    flex-basis: 6px;
    min-width: 6px;
  }

  .top-bar {
    align-items: stretch;
    flex-direction: column;
    margin-bottom: 18px;
  }

  /* Timer head stays horizontal: "Pomodoro" and the Kurz/Lang pill share
     the first line, the subject picker gets its own full-width line below -
     less height, so the timer fits without vertical scrolling. */
  .timer-head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .subject-picker {
    flex: 1 1 100%;
  }

  .ring-wrap {
    margin: 12px auto 6px;
  }

  .cycle-progress,
  .controls {
    margin-bottom: 20px;
  }

  /* Four tabs share the full width instead of overflowing it. */
  .tab {
    flex: 1;
    padding: 7px 4px;
    font-size: 0.9rem;
    text-align: center;
  }

  .scope-toggle {
    flex: 1 1 100%;
  }

  .scope-toggle button {
    flex: 1;
    padding: 6px 4px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preferences-form .field-number {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  /* Label above the control instead of squeezing both into one row. */
  .preferences-form .field-select,
  .preferences-form .field-text {
    grid-template-columns: 1fr;
  }

  .preferences-form .field-sound {
    grid-template-columns: 1fr auto;
  }

  .preferences-form .field-sound > span {
    grid-column: 1 / -1;
  }

  .daily-subject-row,
  .subject-edit-form {
    grid-template-columns: 1fr;
  }

  .subject-edit-form {
    align-items: stretch;
    flex-direction: column;
  }

  /* "Nachtragen": kind/subject, note and the submit button get full-width
     rows; date, time and duration share one line. */
  .history-add-form select,
  .history-add-form input[name="note"],
  .history-add-form button[type="submit"] {
    flex: 1 1 100%;
  }

  /* Date gets the most room (full date visible), the minutes field only
     needs two digits. */
  .history-add-form input[name="date"] {
    flex: 2 1 0;
    min-width: 0;
  }

  .history-add-form input[name="time"] {
    flex: 1 1 0;
    min-width: 0;
  }

  .history-add-form .history-minutes input {
    width: 44px;
  }
}

/* --- Offline badge, toasts and in-app dialogs ----------------------------- */

.offline-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--support);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 3px 10px;
  cursor: help;
}

.toast-container {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}

.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 18%);
  color: var(--text);
  font-size: 0.92rem;
  max-width: min(420px, 90vw);
  padding: 10px 16px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.toast-hide {
  opacity: 0;
}

.app-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 18px 55px rgb(0 0 0 / 25%);
  color: var(--text);
  max-width: min(420px, 90vw);
  padding: 20px;
}

.app-dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}

.app-dialog p {
  margin: 0 0 14px;
}

.app-dialog input {
  width: 100%;
  background: var(--window);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  margin-bottom: 14px;
  padding: 8px 10px;
}

.dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.dialog-actions button {
  background: var(--support);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 7px 16px;
}

.dialog-actions .dialog-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--window);
}

/* --- Aufgaben pro Fach (task panel under the timer) ------------------------ */

.task-panel {
  max-width: 560px;
  margin: 0 auto 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
}

.task-panel h2 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.task-list {
  display: grid;
  gap: 2px;
}

.task-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.task-row + .task-row {
  border-top: 1px solid var(--support);
}

.task-row.active .task-title {
  font-weight: 700;
}

.task-row.done .task-title {
  text-decoration: line-through;
  color: var(--muted);
}

.task-pick {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
}

.task-pick:hover {
  background: var(--support);
}

.task-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.task-progress {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.task-progress.reached {
  color: var(--green);
  font-weight: 700;
}

.task-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-actions button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1;
}

.task-actions button:hover {
  background: var(--support);
}

.task-actions [data-remove] {
  color: var(--red);
}

.task-done {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  cursor: pointer;
}

.task-done input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.task-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.task-form input,
.task-form button {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 7px 10px;
}

.task-form input[name="title"] {
  flex: 1;
  min-width: 140px;
}

.task-estimate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-estimate input {
  width: 64px;
}

.task-form button[type="submit"] {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}

/* --- Jahres-Heatmap (GitHub-Stil) ------------------------------------------ */

.year-heatmap {
  --heat-cell: 13px;
  --heat-gap: 3px;
  display: flex;
  gap: 6px;
}

.heatmap-weekdays {
  flex: none;
  display: grid;
  grid-template-rows: repeat(7, var(--heat-cell));
  gap: var(--heat-gap);
  /* Skip the month-label row above the grid. */
  margin-top: calc(1em + var(--heat-gap));
  color: var(--muted);
  font-size: 0.65rem;
  line-height: var(--heat-cell);
}

/* Same width-0 trick as .daily-scroll: 53 week columns must scroll inside,
   never widen the page. */
.heatmap-scroll {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}

.heatmap-months {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--heat-cell);
  gap: var(--heat-gap);
  margin-bottom: var(--heat-gap);
  color: var(--muted);
  font-size: 0.65rem;
  height: 1em;
}

.heatmap-months span {
  white-space: nowrap;
  overflow: visible;
}

.heatmap-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, var(--heat-cell));
  grid-auto-columns: var(--heat-cell);
  gap: var(--heat-gap);
}

.heat-cell {
  width: var(--heat-cell);
  height: var(--heat-cell);
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--support);
}

.heat-cell.selected {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

/* --- Verlauf (session history) -------------------------------------------- */

.history-add {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 18px;
  padding: 14px 18px;
}

.history-add legend {
  padding: 0 8px;
  font-weight: 800;
}

.history-add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.history-add-form select,
.history-add-form input,
.history-add-form button,
.history-edit select,
.history-edit input,
.history-edit button {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 7px 10px;
}

.history-add-form button[type="submit"] {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}

.history-add-form input[name="note"] {
  flex: 1;
  min-width: 160px;
}

.history-minutes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.history-minutes input {
  width: 76px;
}

.history-list {
  display: grid;
  gap: 14px;
}

.history-day {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.history-day h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.history-row {
  display: grid;
  grid-template-columns: auto minmax(90px, auto) 1fr auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 7px 0;
}

.history-row + .history-row,
.history-row + .history-edit,
.history-edit + .history-row {
  border-top: 1px solid var(--support);
}

.history-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.history-kind {
  font-weight: 700;
}

.history-interruption .history-kind,
.history-break .history-kind {
  color: var(--muted);
  font-weight: 400;
}

.history-subject {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.history-duration {
  font-weight: 500;
  white-space: nowrap;
}

.history-note {
  grid-column: 2 / -2;
  color: var(--muted);
  font-style: italic;
  overflow-wrap: anywhere;
}

.history-actions {
  display: inline-flex;
  gap: 6px;
  justify-self: end;
}

.history-actions button {
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  padding: 4px 10px;
}

.history-actions button:hover {
  background: var(--support);
}

.history-actions [data-delete] {
  color: var(--red);
}

.history-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.history-edit-note {
  flex: 1;
  min-width: 160px;
}

.history-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

#history-more {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 7px 18px;
}

@media (max-width: 640px) {
  .history-row {
    grid-template-columns: auto 1fr auto;
  }

  .history-subject {
    grid-column: 1 / -1;
  }

  .history-note {
    grid-column: 1 / -1;
  }
}

/* Text rows (ntfy server/topic): label left, wide text input right, hint below. */
.preferences-form .field-text {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 320px);
  align-items: center;
  gap: 4px 10px;
  padding: 10px 0;
  border-top: 1px solid var(--support);
}

.preferences-form .field-text input {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 7px 10px;
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
}

.preferences-form .field-text small {
  grid-column: 1 / -1;
  margin-top: 2px;
}

/* --- Motivation: Tomaten-Kette, Gold-Ring, Konfetti, Meilensteine ---------- */

/* Today's pomodoros as a growing chain under the timer (app.js). */
.tomato-chain {
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 3px;
  margin: -16px auto 24px;
}

/* Daily goal reached: the progress ring turns golden for the rest of the day. */
.ring-wrap.goal-gold .ring-value {
  stroke: #f6d32d;
  filter: drop-shadow(0 0 7px rgba(246, 211, 45, 0.55));
}

/* Confetti overlay (celebrate.js): pieces fall from the top edge, the layer
   removes itself after the animation. */
.confetti {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2000;
}

.confetti i {
  position: absolute;
  top: -16px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: confetti-fall 2.2s linear forwards;
}

@keyframes confetti-fall {
  to {
    transform: translateY(105vh) rotate(660deg);
    opacity: 0.65;
  }
}

/* Milestones section: one row per category with trophy badges and the
   progress towards the next step. */
.milestone-list {
  display: grid;
  gap: 18px;
}

.milestone-cat h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.milestone-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.milestone-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.85rem;
  white-space: nowrap;
}

.milestone-meter {
  max-width: 420px;
}

.milestone-meter .meter-fill {
  background: var(--blue, #3584e4);
  border-radius: inherit;
}

.milestone-cat small {
  color: var(--muted);
}

/* "Nur kurz anfangen": a low-key pill button under the timer controls. */
.easy-start {
  display: block;
  margin: -8px auto 24px;
  padding: 7px 16px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.easy-start:hover {
  color: var(--text);
  border-color: var(--text);
}

/* Minimal goal reached: a friendly checkmark on the "Heute" card. */
.minimal-reached::after {
  content: " ✓";
  color: #2ec27e;
}

/* Number input in a field-select row (Minimalziel), styled like the selects. */
.preferences-form .field-select input[type="number"] {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 7px 10px;
}

/* Week comparison: only a plus gets colour; a weaker week shows muted, never
   red — the statistics must not produce guilt. */
.stats-card .delta-positive {
  color: #2ec27e;
}

.stats-card .delta-muted {
  color: var(--muted);
}

/* Erfolgs-Journal: pomodoro notes as a done-list, grouped by day. */
.journal-list {
  display: grid;
  gap: 16px;
}

.journal-day h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--muted);
}

.journal-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--support);
}

.journal-row:last-child {
  border-bottom: none;
}

.journal-note {
  flex: 1;
  min-width: 0;
}

.journal-row small {
  color: var(--muted);
  white-space: nowrap;
}

/* --- Login page ---------------------------------------------------------- */
/* Standalone page (templates/login.html); it only borrows the shared variables
   and the .brand styling from the app shell. */
.login-body {
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(360px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 18px 55px rgb(0 0 0 / 8%);
  padding: 28px 26px 30px;
}

.login-brand {
  justify-content: center;
  margin-bottom: 22px;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-form label {
  display: grid;
  gap: 6px;
}

.login-form label span {
  font-size: 0.85rem;
  color: var(--muted);
}

.login-form input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--window);
  color: var(--text);
}

.login-form input:focus {
  outline: none;
  border-color: var(--blue);
}

.login-form button {
  margin-top: 4px;
  padding: 11px 14px;
  border: none;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
}

.login-error {
  margin: 0;
  color: var(--red);
  font-size: 0.88rem;
}

/* Abmelden-Link in der Kopfzeile der App. */
.logout-link {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1;
}

.logout-link:hover {
  background: var(--support);
  color: var(--text);
}