/* ══ Mac-Schicht: Heute, „Jetzt dran“ und „+ Aufgabe“ (M3, seit 25.10.2026)
   Jede Regel hängt an html.mac (mac-frueh.js). Vincent: Übersicht und
   Projektmanagement zeigten dieselben Aufgaben doppelt. Am Mac steht oben
   nur noch „Jetzt dran“ (mac-aufgaben.js), alles andere im Brett. Was hier
   zurücktritt, bleibt im DOM und ohne html.mac unverändert sichtbar.
   Plan: docs/plan-desktop-mac.md, M3. */

/* Was am Mac doppelt stand: die Behälter-Zeile (steht im Brett), die zweite
   Schnell-Eingabe („+ Aufgabe“ in der Symbolleiste), die Karten „Wichtigste
   To-dos“ (jetzt „Jetzt dran“) mit ihrer Farblegende und „Heute im Betrieb“
   (dessen Zeilen stehen in „Jetzt dran“). Rote Behälter und ein gescheiterter
   Postfach-Abgleich aus der Behälter-Zeile stehen dort ebenfalls. */
html.mac [data-kachel="todo-top"] > :is(#projekte-cockpit, .todo-quickadd, #todo-heute-cockpit),
html.mac [data-kachel="todo-top"] .section-subtitle { display: none; }
/* Beim Anordnen der Kacheln bleibt alles greifbar. */
html.mac body:not(.kacheln-anordnen) #ops-heute-section { display: none; }

/* Leer heißt: der Abschnitt ist weg, auch vor dem ersten Laden (sonst
   blitzte ein leerer Titel auf). Eine neue Aufgabe geht immer über „+“ in
   der Symbolleiste (mac-symbolleiste.js). */
html.mac body:not(.kacheln-anordnen) [data-kachel="todo-top"]:has(> #mac-jetzt:empty) { display: none; }

/* Eigene Elemente tragen hidden und erscheinen nur hier. */
html.mac .mac-jetzt[hidden] { display: flex; }

/* ── „Jetzt dran“: eine Liste wie in Erinnerungen ── */
html.mac .mac-jetzt {
  flex-direction: column;
  background: var(--tooltip-grund, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
html.mac .mac-jetzt:empty { display: none; }
html.mac .mj-zeile {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding: 0 0 0 var(--sp-4);
}
/* Die Trennlinie beginnt beim Text, wie in den Listen von macOS. */
html.mac .mj-zeile + .mj-zeile .mj-haupt { border-top: 1px solid var(--border); }
html.mac .mj-zeile.pb-wartet { opacity: .5; cursor: progress; }

html.mac .mj-kreis, html.mac .mj-symbol {
  flex: none; width: 20px; height: 20px; padding: 0;
  border-radius: var(--r-full);
}
html.mac .mj-kreis {
  border: 1.5px solid var(--border-strong); background: transparent; cursor: pointer;
}
html.mac .mj-zeile.st-rot .mj-kreis    { border-color: var(--crit); }
html.mac .mj-zeile.st-orange .mj-kreis { border-color: var(--serious); }
html.mac .mj-kreis:hover { background: var(--bg-card2); box-shadow: inset 0 0 0 3px var(--bg-card); }
html.mac .mj-kreis:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
html.mac .mj-kreis[aria-busy="true"] { background: var(--text-subtle); box-shadow: inset 0 0 0 3px var(--bg-card); }
html.mac .mj-symbol { display: grid; place-items: center; color: var(--text-muted); }
html.mac .mj-symbol svg { width: 16px; height: 16px; }
html.mac .mj-zeile.st-rot .mj-symbol { color: var(--crit-ink); }
html.mac .mj-zeile.st-orange .mj-symbol { color: var(--serious-ink); }

html.mac .mj-haupt {
  flex: 1; min-width: 0; align-self: stretch;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) 0;
  border: 0; background: none; color: var(--text); font: inherit; text-align: left;
}
html.mac button.mj-haupt { cursor: pointer; }
html.mac button.mj-haupt:hover .mj-titel { color: var(--brand); }
html.mac button.mj-haupt:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--r-xs); }
html.mac .mj-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html.mac .mj-titel {
  font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: var(--lh-snug);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.mac .mj-meta {
  font-size: var(--fs-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.mac .mj-grund { flex: none; max-width: 40%; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-muted); text-align: right; }
html.mac .mj-zeile.st-rot .mj-grund    { color: var(--crit-ink); }
html.mac .mj-zeile.st-orange .mj-grund { color: var(--serious-ink); }

/* ── „+ Aufgabe“: Feld, Frist, Bestätigung ── */
html.mac .mac-neu { display: flex; flex-direction: column; gap: var(--sp-3); width: 340px; max-width: calc(100vw - 32px); }
html.mac .mac-neu-kopf { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text); }
html.mac .mac-neu input[type="text"] {
  height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-base);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg-card); color: var(--text);
}
html.mac .mac-neu input[type="text"]:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
/* Die Frist als Segment wie in den Einstellungen von macOS: die Spur
   deutlich grauer als das Feld, die Wahl hell mit Schatten, im Dunkeln
   heller als die Spur (Gesamtprüfung: in Glas war die Wahl kaum zu sehen). */
html.mac .mac-neu-frist {
  align-self: flex-start; display: inline-flex; gap: 2px; padding: 2px;
  border-radius: var(--r-sm); background: var(--bg-card3);
}
html.mac .mac-neu-frist label { position: relative; }
html.mac .mac-neu-frist input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
html.mac .mac-neu-frist span {
  display: block; padding: 3px var(--sp-3); border-radius: var(--r-xs);
  font-size: var(--fs-sm); color: var(--text-muted);
}
html.mac .mac-neu-frist input:checked + span { background: var(--bg-card); color: var(--text); box-shadow: var(--shadow); font-weight: var(--fw-medium); }
html.mac[data-theme="dark"] .mac-neu-frist input:checked + span { background: color-mix(in srgb, var(--text) 18%, var(--bg-card3)); }
html.mac .mac-neu-frist input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
html.mac .mac-neu-ok {
  margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-muted);
}
html.mac .mac-neu-ok > span { color: var(--good-ink); font-weight: var(--fw-semi); }