/* ══ Mac-Schicht: das Brett, „Spalten | Liste“ und der Kreis (M4, seit 25.10.2026)
   Jede Regel hängt an html.mac (mac-frueh.js). Die Liste ist dieselbe DOM
   wie die Spalten (projekte.js zeichnet sie unverändert), nur anders gesetzt:
   Behälter, Filter, Ziehen, Pfeiltasten und der Karten-Dialog gelten in
   beiden. Am Mac führt #todo hierher, als Liste (mac-aufgaben.js); die
   Aufgaben stehen damit an einem Ort. Plan: docs/plan-desktop-mac.md, M4. */

/* Eigene Elemente tragen hidden und erscheinen nur hier. */
html.mac .pb-sicht[hidden] { display: inline-flex; }
html.mac .pb-kreis[hidden] { display: block; }

/* Die Behälter stehen am Mac in der Seitenleiste unter „Brett“
   (mac-leiste.js), die Leiste des Bretts wäre die zweite. Sie bleibt im
   DOM: Der Spiegel liest und klickt ihre Chips. „Neuer Behälter“ steht im
   ⋯ der Werkzeugzeile, „Ohne Projekt“ und „Alle“ in der Seitenleiste. */
html.mac #projekt-brett .pb-rail { display: none; }
html.mac #projekt-brett .pb-layout { grid-template-columns: minmax(0, 1fr); }

/* ── „Spalten | Liste“ als Segment wie in den Einstellungen von macOS ──
   Auch die nicht gewählte Hälfte in der Schrift der Seite, wie bei macOS;
   leise stand sie auf der Spur bei 3,9:1. */
html.mac .pb-sicht {
  gap: 2px; padding: 2px;
  border-radius: var(--r-sm); background: var(--bg-card3);
}
html.mac .pb-sicht button {
  height: 26px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--text); font-size: var(--fs-sm); cursor: pointer;
}
html.mac .pb-sicht button[aria-pressed="true"] { background: var(--bg-card); color: var(--text); box-shadow: var(--shadow); font-weight: var(--fw-medium); }
html.mac[data-theme="dark"] .pb-sicht button[aria-pressed="true"] { background: color-mix(in srgb, var(--text) 18%, var(--bg-card3)); }
html.mac .pb-sicht button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ── Der Kreis auf jeder Karte (abhaken wie in Erinnerungen) ──
   Ein Knopf: zugStart übergeht Knöpfe, ein Klick darauf zieht also nicht.
   Auch der Geist beim Ziehen (am body) trägt ihn, deshalb ohne #projekt-brett. */
html.mac .pb-karte { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: var(--sp-2); row-gap: 4px; align-items: start; }
html.mac .pb-karte > :not(.pb-kreis) { grid-column: 2; }
html.mac .pb-kreis {
  grid-column: 1; grid-row: 1 / span 2; width: 18px; height: 18px; margin-top: 1px; padding: 0;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-full); background: transparent; cursor: pointer;
}
html.mac .pb-karte.st-rot    .pb-kreis { border-color: var(--crit); }
html.mac .pb-karte.st-orange .pb-kreis { border-color: var(--serious); }
html.mac .pb-karte.st-gelb   .pb-kreis { border-color: var(--warn); }
html.mac .pb-kreis:hover { background: var(--bg-card2); box-shadow: inset 0 0 0 3px var(--bg-card); }
html.mac .pb-kreis:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
html.mac .pb-kreis[aria-busy="true"] { background: var(--text-subtle); box-shadow: inset 0 0 0 3px var(--bg-card); }
/* Erledigt: der gefüllte Kreis, ohne Knopf (wieder öffnen geht im Karten-Dialog). */
html.mac .pb-kreis.pb-kreis-fertig { cursor: default; border-color: var(--text-subtle); background: var(--text-subtle); box-shadow: inset 0 0 0 3px var(--bg-card); }

/* ── Liste: dieselben Spalten untereinander, Karten als schlanke Zeilen ── */
html.mac #projekt-brett[data-ansicht="liste"] .pb-spalten { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-4); }
html.mac #projekt-brett[data-ansicht="liste"] .pb-spalte-kopf {
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  font-size: var(--fs-sm); text-transform: none; letter-spacing: normal; color: var(--text);
}
html.mac #projekt-brett[data-ansicht="liste"] .pb-fach {
  max-height: none; overflow: visible; gap: 0; padding: 0 0 var(--sp-1);
}
html.mac #projekt-brett[data-ansicht="liste"] .pb-karte {
  grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center;
  min-height: 40px; padding: var(--sp-2) var(--sp-4);
  border: 0; border-top: 1px solid var(--border); border-radius: 0;
  background: transparent; box-shadow: none;
}
html.mac #projekt-brett[data-ansicht="liste"] .pb-karte:hover { background: var(--bg-card2); }
html.mac #projekt-brett[data-ansicht="liste"] .pb-karte:focus-visible { outline-offset: -2px; }
html.mac #projekt-brett[data-ansicht="liste"] .pb-karte > .pb-kreis { grid-row: 1; margin-top: 0; }
html.mac #projekt-brett[data-ansicht="liste"] .pb-k-titel { grid-column: 2; -webkit-line-clamp: 1; font-weight: var(--fw-medium); }
html.mac #projekt-brett[data-ansicht="liste"] .pb-k-stand { display: none; }   /* Liste bleibt einzeilig */
html.mac #projekt-brett[data-ansicht="liste"] .pb-k-fuss { grid-column: 3; flex-wrap: nowrap; justify-content: flex-end; max-width: 46ch; overflow: hidden; }
html.mac #projekt-brett[data-ansicht="liste"] .pb-fach-leer,
html.mac #projekt-brett[data-ansicht="liste"] .pb-mehr { margin: var(--sp-1) var(--sp-4) var(--sp-2); }
html.mac #projekt-brett[data-ansicht="liste"] .pb-neu { padding: var(--sp-2) var(--sp-4) var(--sp-3); border-top: 1px solid var(--border); }

/* ── Die Karte als Seitenleiste rechts (seit 27.10.2026) ──────────────────
   Vincent: Das kleine Popover an der Karte wirkte „sperrig“ und „chaotisch“,
   die Mail stand unten in einem engen Fenster. Jetzt eine feste Leiste in
   voller Höhe wie die Aufgabendetails in Linear oder Asana: links bleibt das
   Brett sichtbar, ein Klick dorthin schließt die Karte (bedienung.js, wie
   beim Popover). Die Lage aus bedienung.js (--mac-pop-x/-y) gilt hier nicht. */
html.mac #projekt-karte-overlay.mac-pop { background: color-mix(in srgb, #0a140c 22%, transparent); }
html.mac #projekt-karte-overlay.mac-pop > .pb-karte-modal,
html.mac #projekt-karte-overlay.mac-pop > .pb-karte-modal.breit {
  left: auto; right: var(--sp-2); top: var(--sp-2); bottom: var(--sp-2);
  width: min(760px, calc(100vw - 380px)); max-height: none;
  overflow-y: auto; overscroll-behavior: contain;
  animation: mac-seite-ein var(--dur-2) var(--ease-out) backwards;
}
@keyframes mac-seite-ein { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.mac #projekt-karte-overlay.mac-pop > .pb-karte-modal { animation: none; }
}