/* ===========================================================================
   Fokus — App-Oberfläche (macOS, Menüleiste)
   ---------------------------------------------------------------------------
   Nachbau der echten App. Fokus ist eine Menüleisten-App: sie hat kein
   Fenster, sondern ein Item oben rechts in der Menüleiste. Ein Klick darauf
   öffnet ein schwebendes Panel (im Original 330 pt breit, Ecke 16, Material
   „popover"), ein Rechtsklick das Kontextmenü. Beides steckt hier drin.

   Maße, Radien, Schriftgrößen und Texte sind aus dem Swift-Quellcode
   übernommen (PopoverView, TimerSetupView, RunningView, PomodoroSetupView,
   SettingsView, NotesView, FokusApp) — deshalb stehen hier so viele krumme
   Werte wie 12.5px oder Radius 11.

   Der Rahmen (MacBook) liegt in apps.css.
   =========================================================================== */

.macos {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;

  /* macOS zeichnet in San Francisco. Auf anderen Systemen ist Inter die
     nächstbeste Annäherung — dieselbe Kette wie in den anderen Apps. */
  --fk-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  --fk-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', 'SF Mono', monospace;

  /* Dunkles Popover-Material. `primary` ist in Dark Mode weiß, deshalb sind
     die vollflächigen Knöpfe weiß mit dunkler Schrift (im Original
     Color.primary auf windowBackgroundColor). */
  --fk-text: #fff;
  --fk-sec: rgba(255, 255, 255, 0.56);
  --fk-ter: rgba(255, 255, 255, 0.3);
  --fk-quat: rgba(255, 255, 255, 0.085);
  --fk-quat-2: rgba(255, 255, 255, 0.055);
  --fk-thick: rgba(255, 255, 255, 0.2);
  --fk-line: rgba(255, 255, 255, 0.12);
  --fk-on-fill: #1d1d1f;
  --fk-green: #38c759;

  /* Akzentfarbe — umschaltbar in den Einstellungen (Theme.palette). */
  --fk-accent: #f7542e;

  font-family: var(--fk-sans);
  color: var(--fk-text);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: break-word;
  user-select: none;
  -webkit-user-select: none;
}

:where(.macos button) {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.macos :focus-visible {
  outline: 2px solid var(--fk-accent);
  outline-offset: 1px;
}

/* --- Schreibtisch --------------------------------------------------------- */
.mos-wall {
  position: absolute;
  inset: 0;
  /* Die Bänder unten laufen absichtlich über den Rand — beschnitten wird
     hier, damit der Bildschirm dadurch nicht scrollbar wird. */
  overflow: hidden;
  background:
    radial-gradient(120% 95% at 80% 6%, rgba(255, 141, 74, 0.34), transparent 52%),
    radial-gradient(110% 85% at 12% 92%, rgba(64, 106, 255, 0.42), transparent 58%),
    radial-gradient(95% 75% at 52% 46%, rgba(146, 70, 224, 0.32), transparent 68%),
    linear-gradient(158deg, #161a3e 0%, #0b0d1f 52%, #1b1030 100%);
}

/* Zwei weiche Bänder darüber — der Wellen-Look der aktuellen Systeme. */
.mos-wall::after {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(60% 22% at 30% 62%, rgba(255, 255, 255, 0.09), transparent 70%),
    radial-gradient(48% 18% at 72% 34%, rgba(255, 214, 170, 0.12), transparent 72%);
}

/* --- Menüleiste ----------------------------------------------------------- */
.mos-bar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  height: 26px;
  padding: 0 9px;
  background: rgba(22, 22, 26, 0.42);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  font-size: 11px;
}

.mos-bar__left,
.mos-bar__right {
  display: flex;
  align-items: center;
}

.mos-bar__left {
  gap: 13px;
  min-width: 0;
  /* Bis knapp vor die Notch: sie sitzt mittig und ist rund 10 % breit. */
  max-width: 43%;
  overflow: hidden;
}

.mos-bar__right {
  gap: 11px;
  margin-left: auto;
  flex-shrink: 0;
}

.mos-apple {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
}

.mos-app {
  font-weight: 700;
}

.mos-menu {
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}

/* Die Systemsymbole rechts sind Kulisse — nur das Fokus-Item reagiert. */
.mos-sys {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.9);
}

.mos-clock {
  display: flex;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

/* Das Fokus-Item: im Original der Menüleisten-Text (Zeit oder eigener Text) mit
   dem Indikator-Stapel links davor (Blitz = lädt über 80 %, Tasse =
   wachhalten). Genau das steht hier auch. */
.mos-fokus {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  color: #fff;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: background 0.15s ease;
  position: relative;
}

.mos-fokus:hover {
  background: rgba(255, 255, 255, 0.16);
}

.mos-fokus.is-open {
  background: rgba(255, 255, 255, 0.26);
}

.mos-fokus__one {
  font-variant-numeric: normal;
  font-weight: 500;
}

/* Indikator-Stapel: Blitz oben, Tasse unten, beides in Orange (systemOrange). */
.mos-fokus__ind {
  display: grid;
  gap: 1px;
  justify-items: center;
  color: #ff9f0a;
}

.mos-fokus__ind:empty {
  display: none;
}

/* Einmaliger Hinweis, wo geklickt wird — verschwindet nach dem ersten Öffnen.
   Ohne ihn sucht man das Item in der Menüleiste zu lange. */
.mos-fokus.is-hint::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 7px;
  border: 1.5px solid var(--fk-accent);
  animation: fkPulse 1.9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fkPulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.09); }
}

/* Hinweis unter der Leiste — nur auf dem Handy, wo der Laptop fehlt und man
   sonst nicht wüsste, wo die App sitzt. Verschwindet, sobald sie offen ist. */
.mos-hint {
  display: none;
  position: relative;
  margin: 17px 10px 0;
}

/* Der Pfeil steht über der Blase und zeigt auf das Fokus-Item in der Leiste.
   Wo das sitzt, hängt von der Breite der Systemsymbole ab — deshalb rechnet
   fokus.js den Abstand aus und setzt ihn als --fk-arrow. */
.mos-hint b {
  position: absolute;
  right: var(--fk-arrow, 14px);
  bottom: 100%;
  translate: 50% -1px;
  font-size: 15px;
  line-height: 1;
  color: var(--fk-accent);
}

.mos-hint span {
  display: block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(20, 20, 24, 0.46);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
}

/* --- Dock ----------------------------------------------------------------- */
.mos-dock {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.mos-dock__app {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.mos-dock__sep {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
}

/* --- Das Panel ------------------------------------------------------------ *
   Im Original ein randloses Panel, 330 pt breit, 8 pt unter der Menüleiste,
   Ecke 16, Rand weiß 12 %, Material „popover". Höhe ist bei uns begrenzt:
   auf kleinen Bildschirmen wird darin gescrollt, statt aus dem Gerät zu
   ragen — die Einstellungen scrollen im Original ohnehin.
   ------------------------------------------------------------------------- */
.fk-panel {
  position: absolute;
  /* `--fk-z` verkleinert die ganze App am Stück (Stufen weiter unten). Am Mac
     ist das Menü 330 pt breit auf einem viel größeren Bildschirm — es sieht
     dort schlicht klein aus. Genau das macht `zoom`: die Maße innen bleiben
     die echten, gerechnet wird nur mit einem Faktor. Alles, was am Bildschirm
     hängt (top, right, max-height), muss deshalb durch den Faktor geteilt
     werden, sonst schrumpft auch der Abstand zur Menüleiste. */
  zoom: var(--fk-z, 1);
  top: calc(32px / var(--fk-z, 1));
  right: calc(8px / var(--fk-z, 1));
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(330px, calc(92cqw / var(--fk-z, 1)));
  max-height: calc((100cqh - 42px) / var(--fk-z, 1));
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--fk-line);
  background: rgba(44, 44, 46, 0.76);
  backdrop-filter: blur(42px) saturate(170%);
  -webkit-backdrop-filter: blur(42px) saturate(170%);
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.75);
  overflow-y: auto;
  overflow-x: clip;
  scrollbar-width: none;
  animation: fkPanelIn 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.fk-panel::-webkit-scrollbar {
  width: 0;
}

/* Solange unten noch etwas kommt, läuft der Inhalt an der Kante sanft aus —
   sonst sieht ein abgeschnittener Knopf nach Fehler aus statt nach „scrollbar".
   Die Klasse setzt fokus.js beim Scrollen. */
.fk-panel.has-more {
  mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
}

@keyframes fkPanelIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
}

.fk-panel[hidden] {
  display: none;
}

/* --- Kurzbefehl-Leiste (featureTopBar) ------------------------------------ */
/* Sieben gleich breite Spalten über die ganze Breite, wie in der App */
.fk-topbar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
}

.fk-fired {
  grid-column: 1 / -1;
}

.fk-slot {
  display: grid;
  place-items: center;
  width: 100%;
  height: 36px;
  border-radius: 11px;
  background: var(--fk-quat);
  color: var(--fk-sec);
}

.fk-slot--off {
  position: relative;
  background: var(--fk-quat-2);
  color: var(--fk-ter);
}

.fk-slot--off::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.4px solid currentColor;
  background: linear-gradient(45deg, transparent 44%, currentColor 44% 56%, transparent 56%);
}

.fk-slot--add {
  background: none;
  border: 1.2px dashed rgba(255, 255, 255, 0.22);
  color: var(--fk-ter);
}

/* Kurz aufblitzende Rückmeldung „▶ …", wenn ein Shortcut ausgelöst wird. */
.fk-fired {
  align-self: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* --- Kopfzeile ------------------------------------------------------------ */
.fk-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fk-seg {
  display: flex;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 184px;
  padding: 3px;
  border-radius: 13px;
  background: var(--fk-quat);
}

.fk-seg button {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 8px 6px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fk-sec);
}

.fk-seg button[aria-selected='true'] {
  background: var(--fk-thick);
  color: var(--fk-text);
}

/* Punkt oben rechts, solange dieser Timer läuft. */
.fk-seg button.is-running::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
}

.fk-head__tools {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.fk-iconbtn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--fk-quat);
  color: var(--fk-sec);
}

.fk-iconbtn[aria-pressed='true'] {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
  color: var(--fk-text);
}

/* --- Timer-Einstellung ---------------------------------------------------- */

/* Alle einspaltigen Raster im Panel bekommen `minmax(0, 1fr)`. Ohne das wird
   eine `auto`-Spalte nie schmaler als ihr breitester unteilbarer Inhalt — auf
   schmalen Geräten wuchs der Inhalt der Einstellungen so über das Panel
   hinaus (bei 320 px um 65 px) und wurde am Rand abgeschnitten. */
.fk-view,
.fk-timehead,
.fk-set,
.fk-notes,
.fk-pomo,
.fk-steps,
.fk-ring__mid,
.fk-pop,
.fk-pop__list,
.fk-over {
  grid-template-columns: minmax(0, 1fr);
}

.fk-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
}

/* Nur bei echtem Ansichtswechsel einblenden (siehe fokus.js). */
.fk-view[data-anim] {
  animation: fkIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fkIn {
  from { opacity: 0; transform: translateY(5px); }
}

.fk-timehead {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding-top: 2px;
}

/* Zeit groß in der Mitte, links der Blitz (Aktionen bei Ende), rechts die
   Glocke (Zwischenerinnerung) — im Original per offset ±30 neben der Zeit. */
.fk-timerow {
  position: relative;
  display: inline-grid;
  place-items: center;
  justify-self: center;
}

.fk-time {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.fk-timerow__side {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  color: var(--fk-sec);
}

.fk-timerow__side--l { left: -30px; }
.fk-timerow__side--r { right: -30px; }

.fk-timerow__side.is-on {
  color: var(--fk-accent);
}

.fk-endsat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--fk-sec);
}

/* Ziehfläche: nach unten ziehen stellt die Minuten ein (im Original 220 pt
   hoch, Anker 16 pt von oben, Regelbereich bis 120 min). */
.fk-drag {
  position: relative;
  height: 220px;
  border-radius: 18px;
  background: var(--fk-quat);
  touch-action: none;
  cursor: ns-resize;
}

.fk-drag__anchor {
  position: absolute;
  top: 16px;
  left: 50%;
  translate: -50% 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.6);
}

.fk-drag__line {
  position: absolute;
  top: 24px;
  left: 50%;
  translate: -50% 0;
  width: 2.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
}

.fk-drag__knob {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 17px;
  height: 17px;
  margin-left: -8.5px;
  border-radius: 50%;
  background: #fff;
}

.fk-drag.is-idle .fk-drag__knob,
.fk-drag.is-idle .fk-drag__line {
  transition: translate 0.4s cubic-bezier(0.22, 1, 0.36, 1), height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.fk-drag__knob.is-big {
  scale: 1.18;
}

.fk-drag__hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--fk-sec);
  pointer-events: none;
}

.fk-drag__tip {
  position: absolute;
  left: 50%;
  translate: -180% 0;
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 9px 13px;
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}

.fk-drag__tip b {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fk-drag__tip span {
  font-size: 12px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.fk-presets,
.fk-nudges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.fk-presets button {
  padding: 11px 2px;
  border-radius: 13px;
  background: var(--fk-quat);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fk-presets button[aria-pressed='true'] {
  background: #fff;
  color: var(--fk-on-fill);
}

.fk-nudges button {
  padding: 10px 2px;
  border-radius: 12px;
  background: var(--fk-quat);
  font-size: 13px;
  font-weight: 600;
}

.fk-cta {
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  color: var(--fk-on-fill);
  font-size: 15px;
  font-weight: 700;
}

.fk-releasehint {
  padding: 6px 0;
  text-align: center;
  font-size: 12px;
  color: var(--fk-sec);
}

/* --- Zeilen: Wachhalten, CleanMyMac, Akku, Dimmen ------------------------- */
.fk-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.fk-row__main {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border-radius: 12px;
  background: var(--fk-quat);
  color: var(--fk-sec);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
}

.fk-row__main.is-on {
  background: rgba(255, 255, 255, 0.1);
  color: var(--fk-text);
}

.fk-row__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.fk-dot.is-green { background: var(--fk-green); }
.fk-dot.is-orange { background: #ff9f0a; }

.fk-row__side {
  display: grid;
  place-items: center;
  width: 34px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--fk-quat);
  color: var(--fk-text);
}

/* Akku- und Dimm-Zeile sind im Original etwas flacher als die zwei darüber. */
.fk-row--slim .fk-row__main {
  gap: 8px;
  padding: 8px 12px;
  border-radius: 11px;
}

.fk-row--slim .fk-row__side {
  width: 30px;
  border-radius: 11px;
}

.fk-pct {
  flex-shrink: 0;
  min-width: 40px;
  text-align: right;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Regler im Stil der macOS-Slider */
.fk-slider {
  flex: 1;
  min-width: 0;
  height: 16px;
  margin: 0;
  appearance: none;
  background: none;
  cursor: pointer;
}

.fk-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}

.fk-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}

.fk-slider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.fk-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* --- Laufender Timer ------------------------------------------------------ */
.fk-ring {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 190px;
  height: 190px;
}

.fk-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.fk-ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 12;
}

.fk-ring__fill {
  fill: none;
  stroke: currentColor;
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.95s linear;
}

.fk-ring__mid {
  position: relative;
  display: grid;
  gap: 2px;
  justify-items: center;
  max-width: 150px;
}

.fk-ring__time {
  font-family: var(--fk-mono);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.fk-ring__phase {
  font-size: 12px;
  color: var(--fk-sec);
  text-align: center;
}

.fk-ring__phase.is-accent {
  color: var(--fk-accent);
}

.fk-minirow {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.fk-minibtn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border-radius: 9px;
  background: var(--fk-quat);
  color: var(--fk-sec);
}

.fk-minibtn.is-on {
  color: var(--fk-accent);
}

.fk-round {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.fk-round button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.fk-round button.is-main {
  width: 56px;
  height: 56px;
  background: currentColor;
}

.fk-round button.is-main svg {
  color: var(--fk-on-fill);
}

.fk-hintline {
  text-align: center;
  font-size: 11px;
  color: var(--fk-sec);
}

.fk-wide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fk-wide button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13.5px;
  font-weight: 700;
}

/* --- Pomodoro-Einstellung ------------------------------------------------- */
.fk-pomo {
  display: grid;
}

.fk-pomo__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
}

.fk-pomo__row + .fk-pomo__row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fk-pomo__name {
  flex: 1;
  min-width: 0;
}

.fk-pomo__name b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.fk-pomo__name span {
  font-size: 11.5px;
  color: var(--fk-sec);
}

.fk-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fk-step button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--fk-quat);
}

.fk-step__val {
  min-width: 62px;
  padding: 6px 4px;
  border-radius: 9px;
  background: var(--fk-quat);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: ew-resize;
  touch-action: none;
}

.fk-summary {
  margin-top: 13px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--fk-quat);
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fk-sec);
}

/* --- Notizen -------------------------------------------------------------- */
.fk-notes {
  display: grid;
  gap: 10px;
}

.fk-notes__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fk-notes__head h4 {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
}

.fk-notes__head button {
  color: var(--fk-sec);
}

.fk-notes__head button:disabled {
  color: rgba(255, 255, 255, 0.18);
  cursor: default;
}

.fk-notes textarea {
  width: 100%;
  min-height: 190px;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: var(--fk-quat);
  color: var(--fk-text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  resize: none;
  user-select: text;
  -webkit-user-select: text;
}

.fk-notes textarea::placeholder {
  color: var(--fk-ter);
}

/* --- Einstellungen -------------------------------------------------------- */
.fk-set {
  display: grid;
}

.fk-set__title {
  font-size: 15px;
  font-weight: 800;
  padding-bottom: 4px;
}

.fk-sec {
  padding: 16px 0 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fk-sec);
}

.fk-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}

.fk-toggle + .fk-toggle {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fk-toggle__text {
  flex: 1;
  min-width: 0;
}

.fk-toggle__text b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
}

.fk-toggle__text span {
  font-size: 11px;
  color: var(--fk-sec);
}

/* macOS-Schalter */
.fk-switch {
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.18s ease;
}

.fk-switch i {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: translate 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.fk-switch[aria-pressed='true'] {
  background: var(--fk-accent);
}

.fk-switch[aria-pressed='true'] i {
  translate: 14px 0;
}

.fk-field {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--fk-text);
  font-family: inherit;
  font-size: 13px;
  user-select: text;
  -webkit-user-select: text;
}

.fk-field::placeholder {
  color: var(--fk-ter);
}

.fk-note {
  padding-top: 6px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--fk-ter);
}

.fk-pick {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--fk-quat);
  font-size: 12px;
  color: var(--fk-text);
}

.fk-palette {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.fk-palette button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.fk-palette i {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: currentColor;
}

.fk-palette button[aria-pressed='true'] {
  box-shadow: inset 0 0 0 2px #fff;
}

.fk-presetedit {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 12px 0;
}

.fk-presetedit > div {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 8px 2px;
  border-radius: 11px;
  background: var(--fk-quat);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fk-presetedit__btns {
  display: flex;
  gap: 3px;
}

.fk-presetedit__btns button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 20px;
  border-radius: 7px;
  background: var(--fk-quat);
}

.fk-shortcutrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.fk-shortcutrow .fk-pick {
  flex: 1;
  min-width: 0;
}

.fk-shortcutrow .fk-pick span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-kbd {
  flex-shrink: 0;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--fk-quat);
  font-family: var(--fk-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fk-sec);
}

.fk-linkbtn {
  padding-top: 4px;
  color: var(--fk-accent);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.fk-steps {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 10px;
  background: var(--fk-quat-2);
}

.fk-steps div {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--fk-sec);
}

.fk-steps b {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  color: var(--fk-on-fill);
  font-size: 10px;
}

.fk-quit {
  margin-top: 8px;
  padding: 12px;
  border-radius: 14px;
  background: var(--fk-quat);
  color: var(--fk-sec);
  font-size: 13.5px;
  font-weight: 600;
}

.fk-version {
  padding-top: 10px;
  text-align: center;
  font-size: 10px;
  color: var(--fk-ter);
}

/* --- Popover und Menüs --------------------------------------------------- *
   Im Original sind das echte NSPopover/NSMenu. Hier schweben sie im Panel
   bzw. auf dem Schreibtisch — an derselben Stelle, im gleichen Material.
   ------------------------------------------------------------------------- */
.fk-pop {
  position: absolute;
  z-index: 70;
  display: grid;
  gap: 10px;
  /* Nie höher als der Bildschirm: auf kleinen Geräten wird darin gescrollt,
     statt unten aus dem Gerät zu ragen. */
  max-height: calc(100cqh - 12px);
  overflow-y: auto;
  scrollbar-width: none;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--fk-line);
  background: rgba(58, 58, 60, 0.94);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.8);
  font-size: 12.5px;
  animation: fkIn 0.14s ease-out;
}

.fk-pop__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.fk-pop__title button {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--fk-quat);
  font-size: 11px;
  color: var(--fk-text);
}

.fk-pop__hint {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--fk-ter);
}

.fk-pop__list {
  display: grid;
  gap: 2px;
  max-height: 190px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.fk-pop__cat {
  padding: 8px 6px 1px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fk-ter);
}

.fk-pop__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 7px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  color: var(--fk-text);
}

.fk-pop__row svg:first-child {
  flex-shrink: 0;
  width: 15px;
  color: var(--fk-sec);
}

.fk-pop__row span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-pop__row:hover {
  background: rgba(255, 255, 255, 0.07);
}

.fk-pop__row.is-on {
  background: rgba(255, 255, 255, 0.06);
}

.fk-pop__row.is-on svg:first-child,
.fk-pop__row.is-on .fk-pop__mark {
  color: var(--fk-accent);
}

.fk-pop__mark {
  flex-shrink: 0;
  color: var(--fk-ter);
}

.fk-pop__sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.fk-pop__srow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fk-pop__srow > span:first-child {
  width: 78px;
  flex-shrink: 0;
  color: var(--fk-sec);
}

.fk-pop__btn {
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--fk-quat);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}

/* Menü im Stil eines NSMenu (Wachhalten-Dauern, Kontextmenü). */
.fk-menu {
  position: absolute;
  z-index: 80;
  min-width: 190px;
  padding: 4px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(56, 56, 58, 0.95);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.8);
  font-size: 12px;
  animation: fkIn 0.1s ease-out;
}

.fk-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  border-radius: 4px;
  text-align: left;
  color: var(--fk-text);
  white-space: nowrap;
}

.fk-menu__item:hover:not(:disabled) {
  background: var(--fk-accent);
  color: #fff;
}

.fk-menu__item:disabled {
  color: var(--fk-ter);
  cursor: default;
}

.fk-menu__item i {
  width: 11px;
  flex-shrink: 0;
  font-style: normal;
}

.fk-menu__item span {
  flex: 1;
  min-width: 0;
}

.fk-menu__item em {
  font-style: normal;
  color: var(--fk-ter);
  font-family: var(--fk-mono);
  font-size: 10.5px;
}

.fk-menu__item:hover:not(:disabled) em {
  color: rgba(255, 255, 255, 0.75);
}

.fk-menu__sep {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255, 255, 255, 0.14);
}

/* Untermenü: öffnet sich neben dem Eintrag. */
.fk-menu__sub {
  position: relative;
}

.fk-menu__sub > .fk-menu {
  top: -4px;
  left: 100%;
  display: none;
}

.fk-menu__sub.is-open > .fk-menu,
.fk-menu__sub:hover > .fk-menu {
  display: block;
}

.fk-menu__sub--left > .fk-menu {
  left: auto;
  right: 100%;
}

/* --- Ebene für Popover und Menüs ----------------------------------------- *
   Popover und Menüs liegen nicht im Panel, sondern darüber auf dem
   Bildschirm: so lassen sie sich am Rand abfangen und ragen nie hinaus.
   ------------------------------------------------------------------------- */
.fk-layer {
  position: absolute;
  top: 0;
  left: 0;
  /* Mitverkleinert wie das Menü — und deshalb um den Faktor größer angelegt,
     damit die Ebene den Bildschirm weiter vollständig abdeckt. */
  zoom: var(--fk-z, 1);
  width: calc(100% / var(--fk-z, 1));
  height: calc(100% / var(--fk-z, 1));
  z-index: 90;
  pointer-events: none;
}

.fk-layer[hidden] {
  display: none;
}

.fk-layer > * {
  pointer-events: auto;
}

/* --- Vollbild-Hinweise (EndOverlayView) ---------------------------------- */
.fk-overlay {
  position: absolute;
  top: 0;
  left: 0;
  zoom: var(--fk-z, 1);
  width: calc(100% / var(--fk-z, 1));
  height: calc(100% / var(--fk-z, 1));
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(10, 10, 12, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: fkIn 0.2s ease-out;
}

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

.fk-over {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  max-width: 320px;
}

.fk-over__time {
  font-family: var(--fk-mono);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.fk-over b {
  font-size: 26px;
  font-weight: 800;
}

.fk-over span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fk-sec);
}

.fk-over button {
  margin-top: 14px;
  padding: 11px 26px;
  border-radius: 14px;
  background: #fff;
  color: var(--fk-on-fill);
  font-size: 15px;
  font-weight: 700;
}

.fk-over--lock svg {
  width: 34px;
  height: 34px;
  color: var(--fk-accent);
}

/* --- Wie klein die App steht --------------------------------------------- *
   Der Faktor richtet sich nach der Höhe des Bildschirms: Timer- und
   Laufansicht sollen ganz hineinpassen, ohne dass es nach Scrollen aussieht.
   Die Timer-Ansicht ist mit rund 790 px die höchste davon, deshalb steht in
   jeder Stufe etwa (Höhe − 42) / 800. Die Einstellungen scrollen weiter — die
   scrollen im Original auch (ScrollView, max. 460 pt).

   Abgestuft statt gerechnet, weil sich in CSS keine Länge durch eine Länge
   teilen lässt; die Stufen sind 20 px auseinander, das genügt.
   ------------------------------------------------------------------------- */
@container mac-screen (max-height: 900px) {
  .macos { --fk-z: 0.69; }
}

@container mac-screen (max-height: 600px) {
  .macos { --fk-z: 0.67; }
}

@container mac-screen (max-height: 580px) {
  .macos { --fk-z: 0.64; }
}

@container mac-screen (max-height: 560px) {
  .macos { --fk-z: 0.62; }
}

@container mac-screen (max-height: 540px) {
  .macos { --fk-z: 0.59; }
}

@container mac-screen (max-height: 520px) {
  .macos { --fk-z: 0.57; }
}

@container mac-screen (max-height: 500px) {
  .macos { --fk-z: 0.55; }
}

/* --- Kompakter Modus ----------------------------------------------------- *
   Kleiner Bildschirm (Handy): Ring, Ziehfläche und Zeit werden kleiner,
   damit vom Menü mehr als nur die Kopfzeile zu sehen ist. Gemessen wird der
   Mac-Bildschirm selbst (@container), nicht das Fenster.
   ------------------------------------------------------------------------- */
@container mac-screen (max-height: 340px) {
  .fk-panel {
    top: 29px;
    gap: 7px;
    padding: 11px;
    max-height: calc(100cqh - 35px);
  }

  .fk-time {
    font-size: 31px;
  }

  .fk-drag {
    height: 112px;
  }

  .fk-topbar {
    gap: 5px;
  }

  .fk-ring {
    width: 118px;
    height: 118px;
  }

  .fk-ring__time {
    font-size: 24px;
  }

  .fk-row__main {
    padding: 8px 10px;
    font-size: 12px;
  }

  .fk-cta {
    padding: 11px;
    font-size: 14px;
  }

  .fk-sec {
    padding-top: 12px;
  }

  .fk-toggle {
    padding: 9px 0;
  }

  .fk-ring__track,
  .fk-ring__fill {
    stroke-width: 9;
  }

  .fk-view {
    gap: 10px;
  }

  .fk-notes textarea {
    min-height: 120px;
  }

  .fk-round button {
    width: 40px;
    height: 40px;
  }

  .fk-round button.is-main {
    width: 48px;
    height: 48px;
  }

  /* Das Dock bleibt — es macht den Schreibtisch als macOS erkennbar. Nur
     kleiner, und das Menü der App legt sich davor. */
  .mos-dock {
    bottom: 4px;
    gap: 4px;
    padding: 3px 4px;
    border-radius: 10px;
  }

  .mos-dock__app {
    width: 19px;
    height: 19px;
    border-radius: 5px;
  }

  .mos-dock__app svg {
    width: 11px;
    height: 11px;
  }

  .mos-dock__sep {
    height: 17px;
  }

  .fk-over__time {
    font-size: 32px;
  }

  .fk-over b {
    font-size: 19px;
  }
}

/* Flacher Bildschirm: die Listen in den Popovern kürzer halten, damit Titel
   und Fußzeile darin sichtbar bleiben. */
@container mac-screen (max-height: 470px) {
  .fk-pop__list {
    max-height: 118px;
  }
}

/* Menüs links: auf schmalen Bildschirmen zeigt macOS weniger davon, statt sie
   unter die Notch laufen zu lassen. Von hinten nach vorne ausgeblendet. */
@container mac-screen (max-width: 800px) {
  .mos-menu:nth-last-of-type(-n + 3) {
    display: none;
  }
}

@container mac-screen (max-width: 620px) {
  .mos-menu:nth-last-of-type(-n + 4) {
    display: none;
  }

  .mos-clock__date {
    display: none;
  }
}

@container mac-screen (max-width: 470px) {
  .mos-menu {
    display: none;
  }

  .mos-bar {
    gap: 10px;
  }

  .mos-bar__right {
    gap: 8px;
  }
}

/* Sehr schmaler Bildschirm: das Panel nimmt fast die ganze Breite, die
   Kurzbefehl-Leiste und die Vierer-Reihen dürfen enger stehen. */
@container mac-screen (max-width: 420px) {
  .fk-panel {
    right: 6px;
    width: calc(100cqw - 12px);
  }

  .fk-presets,
  .fk-nudges {
    gap: 5px;
  }

  .fk-presets button,
  .fk-nudges button {
    font-size: 12px;
  }

  .fk-slot {
    width: 36px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fk-panel,
  .fk-view,
  .fk-pop,
  .fk-menu {
    animation: none;
  }

  .fk-ring__fill,
  .fk-drag.is-idle .fk-drag__knob,
  .fk-drag.is-idle .fk-drag__line,
  .fk-switch,
  .fk-switch i {
    transition: none;
  }

  .mos-fokus.is-hint::after {
    animation: none;
  }
}

/* --- Ohne Gehäuse: Menüleiste und Menü ----------------------------------- *
   Bis 920 px fällt der Rahmen weg (siehe apps.css) — dieselbe Grenze muss
   hier stehen, sonst hängt das Menü absolut in einem Bildschirm, der gar
   keine Höhe mehr hat. Es steht deshalb im Fluss unter der Leiste, in voller
   Größe und rechts angeschlagen, genau wie es am Mac unter dem Item hängt.
   Gescrollt wird die Seite, nicht das Menü.
   ------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .macos {
    position: static;
  }

  .mos-hint {
    display: block;
  }

  .macos.is-open .mos-hint {
    display: none;
  }

  /* Das Dock gehört zum ganzen Schreibtisch — hier ist nur der obere
     Ausschnitt zu sehen, also hat es keinen Platz. */
  .mos-dock {
    display: none;
  }

  .fk-panel {
    position: static;
    width: min(330px, calc(100% - 16px));
    max-height: none;
    margin: 8px 8px 12px auto;
    /* Nichts mehr zu scrollen, also auch kein Auslaufen an der Kante. */
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  /* Popover und Menüs bleiben im Ausschnitt — fokus.js hält sie am Rand ab. */
  .fk-pop {
    max-height: 340px;
  }
}