/* =========================================================
   Life Archive – Calendar
   Kopf · Serienband · Raster ⇄ Woche · Tagesdetail ·
   Zeitstrahl · Upcoming · Patterns

   ---------------------------------------------------------
   Formensprache

   Diese Datei war die letzte im Projekt, die sie nicht führte:
   dreiunddreißig `border-radius`, davon zwölf auf 999px, und
   kein einziges `clip-path`. Zum Vergleich hatte Journal neun
   Radien und dreizehn Schnitte.

   Jetzt gilt hier dasselbe wie überall sonst:

     Fläche   geschnittenes Rechteck (--cut-clip), kein Sockel
     Knopf    .btn3d aus styles/components.css – Sockel heißt,
              dass er etwas TUT: hinzufügen, starten, öffnen
     Zeichen  Sechseck (--hex-clip-pointy), wenn es für sich
              steht: „heute", die Marke einer Zeile

   Rund ist im ganzen Bereich nichts mehr. Der Sammelblock am
   Ende dieser Datei zieht den Schnitt für alle Flächen an einer
   Stelle, wie es Cue Diary vormacht.

   ---------------------------------------------------------
   Farbe

   Der Kalender führt sieben fremde Farben. Damit sie
   nebeneinander lesbar bleiben, tragen sie nur Konturen, Punkte
   und Balken – nie Text und nie eine Fläche mit Schrift darauf.
   Der einzige farbige Grund mit Schrift ist der Akzent selbst,
   und der trägt --ink.
   ========================================================= */

.cal {
  --accent-app:  var(--c-calendar);
  --accent-deep: var(--c-calendar-stroke);
  --cal-line:    rgba(var(--o), .08);
  --cal-tint:    var(--t-calendar);  /* --c-calendar als RGB für die Tönung */
}

/* =========================================================
   Kopf: Monat blättern

   Links und rechts, nicht hoch und runter – Zeit läuft
   waagerecht. Der Titel ist ein Knopf und führt in die
   Monatsauswahl; „Today" steht nur da, wenn es etwas zu tun
   hat, und ist ein gewöhnlicher Knopf statt einer Akzentfläche.
   ========================================================= */

.cal-head {
  display: grid;
  grid-template-columns: 34px 1fr 34px auto;
  align-items: center;
  gap: 8px;
}

.cal-head--plain { grid-template-columns: 1fr; }
.cal-head--inline { grid-template-columns: 34px 1fr 34px; margin-bottom: 12px; }

.cal-head__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 10px;
  font-size: clamp(17px, 4.6vw, 20px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--accent-app);
  transition: background-color var(--dur) var(--ease-out);
}

.cal-head__title:hover { background: rgba(var(--cal-tint), .10); }

/* Der Hinweis, dass der Titel etwas öffnet: ein kleiner Winkel,
   derselbe wie an den Klappen der Bereichskarten. */
.cal-head__caret {
  width: 7px;
  height: 7px;
  flex: none;
  border-inline-end: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .7;
}

.cal-head__plain {
  font-size: clamp(17px, 4.6vw, 20px);
  font-weight: 600;
  color: var(--accent-app);
}

.cal-pat__month {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-app);
}

/* Die zwei Schrittpfeile: Knöpfe der zweiten Reihe, getönt wie das „+"
   auf Home (Night Pond, 0.6.0 beta) – eckig, Sockel dahinter, sinken
   beim Druck ein. Vorher eine graue Fläche mit Rand, die beim Tippen
   nur schrumpfte. */
.cal-step {
  --depth: 2.5px;
  position: relative;
  isolation: isolate;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  filter: var(--tint-glow);
  transition: transform var(--dur-fast) var(--ease-out);
}

.cal-step::before,
.cal-step::after { content: ""; position: absolute; inset: 0; z-index: -1; }

.cal-step::before {
  background: var(--tint-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.cal-step::after {
  background: var(--tint-face);
  box-shadow: inset 0 0 0 1.5px var(--tint-edge);
  transition: background-color var(--dur) var(--ease-out);
}

/* Das Pfeilsymbol zeigt von Haus aus nach rechts. Der Rückwärtsschritt
   dreht es um eine halbe Drehung, der Vorwärtsschritt gar nicht.

   Die zweite Zeile hat gefehlt: die Regel darüber traf BEIDE Knöpfe,
   und damit zeigten „voriger Monat" und „nächster Monat" in dieselbe
   Richtung – nach links. Zu sehen war das nur, wenn man hinsah; zu
   bedienen war es trotzdem falsch. */
.cal-step img { width: 14px; transform: rotate(180deg); }
.cal-step--next img { transform: none; }

.cal-step:hover::after { background: var(--tint-hover); }
.cal-step:active { transform: translate(var(--depth), var(--depth)); }
.cal-step:active::before { opacity: 0; }

.cal-today { flex: none; white-space: nowrap; }

/* =========================================================
   Serienband

   Von den neun Serien steht hier nur, was läuft – eine Zeile
   statt drei Reihen Kacheln, in denen sieben auf null standen.
   Es ist ein Link: alles Weitere steht in „Patterns".
   ========================================================= */

.cal-ribbon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(var(--o), .04);
  border-inline-start: 2px solid var(--accent-app);
  transition: background-color var(--dur) var(--ease-out);
}

.cal-ribbon:hover { background: rgba(var(--cal-tint), .10); }

.cal-ribbon--empty {
  font-size: 12px;
  color: var(--text-dim);
}

/* Waagerecht scrollbar statt umbrechend: das Band soll eine Zeile
   hoch bleiben, egal wie viele Serien laufen. */
.cal-ribbon__rail {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cal-ribbon__rail::-webkit-scrollbar { display: none; }

.cal-ribbon__item {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
  color: var(--text-dim);
}

.cal-ribbon__dot {
  width: 7px;
  height: 7px;
  align-self: center;
  clip-path: var(--hex-clip-pointy);
  background: var(--dot);
  opacity: .55;
}

.cal-ribbon__item.is-live .cal-ribbon__dot { opacity: 1; }

.cal-ribbon__num {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--g-06);
}

.cal-ribbon__label {
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cal-ribbon__more {
  flex: none;
  width: 7px;
  height: 7px;
  border-inline-end: 1.5px solid var(--text-dim);
  border-top: 1.5px solid var(--text-dim);
  transform: rotate(45deg);
}

/* =========================================================
   Raster und Woche

   Zwei Dichten desselben Bausteins. Das Raster ist die
   Übersicht, die Woche der Arbeitsplatz – sie klappt dreißig
   Kacheln auf sieben zusammen und holt damit das Tagesdetail
   über die Falz.
   ========================================================= */

/* Sieben Spalten, immer. `minmax(0, 1fr)` sagt das schon – aber nur,
   solange nichts im Raster breiter ist, als es sein darf. `max-width`
   und `overflow: clip` sind der Riegel dahinter: was auch immer einmal
   in eine Zelle gerät (eine lange Marke, ein Balken mit fester Breite),
   kann das Raster nicht mehr über den Bildschirm hinausschieben.

   Der Anlass war eine Meldung, die sich hier nicht nachstellen ließ:
   auf dem Telefon seien nur fünf Tage zu sehen. Die Ursache lag eine
   Ebene höher: die Spalte von .module__body wuchs mit ihrem breitesten
   Inhalt, und Safari zoomte die zu breite Seite (behoben in
   styles/module.css). Der Riegel hier bleibt als zweite Sicherung. */
.cal-grid {
  position: relative;
  display: grid;
  gap: 6px;
  max-width: 100%;
  overflow: clip;
}

.cal-grid__head,
.cal-grid__cells {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  max-width: 100%;
}

.cal-cell { min-width: 0; }

.cal-grid__wd {
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-dim);
}

/* Der Streifen ist höher als eine Rasterzeile: er ist jetzt der
   Ort, an dem man den Tag wechselt, und keine Zelle unter dreißig. */
.cal-grid--week .cal-cell { min-height: 60px; }

.cal-cell {
  position: relative;
  display: grid;
  align-content: space-between;
  justify-items: center;
  gap: 4px;
  min-height: 46px;
  padding: 6px 3px 5px;
  border: 1px solid transparent;
  background: rgba(var(--o), .04);
  transition: background-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.cal-cell--blank { background: none; min-height: 0; }

/* Vier Stufen wie die Heatmap im Reader – relativ zum vollsten Tag
   des Monats, nicht zu einer festen Zahl.

   Die oberste Stufe liegt bei .34 und nicht höher: darüber wird der
   Grund so hell, dass die Tageszahl darauf unter 4.5:1 fällt und die
   Markierung des heutigen Tages (Akzent auf Akzent) verschwindet.
   Vier unterscheidbare Stufen gibt der Bereich bis .34 noch her. */
.cal-cell[data-level="1"] { background: rgba(var(--cal-tint), .10); }
.cal-cell[data-level="2"] { background: rgba(var(--cal-tint), .18); }
.cal-cell[data-level="3"] { background: rgba(var(--cal-tint), .26); }
.cal-cell[data-level="4"] { background: rgba(var(--cal-tint), .34); }

.cal-cell.is-future { opacity: .55; }
.cal-cell.is-today { border-color: var(--accent-app); }

.cal-cell.is-selected {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text);
}

.cal-cell:hover { background: rgba(var(--cal-tint), .22); }
.cal-cell:active { transform: scale(.94); }

.cal-cell__n {
  font-size: 13px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--g-05);
}

.cal-cell.is-today .cal-cell__n { font-weight: 700; color: var(--accent-app); }

/* --- Dichtebalken ---------------------------------------------------------

   Bis zu sieben Punkte standen hier auf fünfundvierzig Pixeln. Das war
   kein Diagramm, sondern Konfetti. Der Balken sagt dasselbe in einer
   Form, die auf jeder Breite hält: die Segmente teilen sich die volle
   Breite, ihre Zahl ist die Zahl der Bereiche, ihre Farbe die des
   Bereichs. Alles ab dem fünften fällt in ein stilles Restsegment. */

.cal-cell__bar {
  display: flex;
  width: calc(100% - 6px);
  height: 3px;
  gap: 1px;
  overflow: hidden;
}

.cal-cell__bar i { flex: 1; min-width: 2px; }
.cal-cell__rest { background: rgba(var(--o), .28); }

/* --- Offene Versprechen ---------------------------------------------------

   Ein gefülltes Segment heißt „passiert". Für „war geplant und ist
   ausgeblieben" braucht es das Gegenteil: eine hohle, gestrichelte
   Kontur in der Strichfarbe des Moduls. Sie sitzt in der Ecke der
   Zelle und nimmt der Tageszahl keinen Platz weg – und sie ist
   geschnitten, nicht rund, wie alles andere hier. */

.cal-cell__open {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  width: 9px;
  height: 9px;
  border: 1.5px dashed var(--ring);
}

/* --- Der Griff zwischen Monat und Woche ----------------------------------

   Er hängt unter dem Raster in der Mitte und zeigt in die Richtung,
   in die es geht: nach oben heißt zusammenklappen, nach unten heißt
   aufklappen. */

.cal-fold {
  justify-self: center;
  width: 56px;
  height: 20px;
  display: grid;
  place-items: center;
  background: rgba(var(--o), .05);
  transition: background-color var(--dur) var(--ease-out);
}

.cal-fold:hover { background: rgba(var(--cal-tint), .14); }

.cal-fold__chev {
  width: 8px;
  height: 8px;
  border-inline-end: 1.5px solid var(--text-dim);
  border-bottom: 1.5px solid var(--text-dim);
  transform: rotate(-135deg) translate(-2px, -2px);
}

.cal-fold--open .cal-fold__chev { transform: rotate(45deg) translate(-2px, -2px); }

/* =========================================================
   Tagesdetail
   ========================================================= */

.cal-detail { display: grid; gap: 0; }

.cal-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--accent-app);
}

.cal-detail__when { min-width: 0; }

.cal-detail__date {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
}

.cal-detail__sum {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.cal-add { flex: none; }
.cal-add__glyph { width: 14px; height: 14px; }

/* Ein Wort, das für sich steht – also ein Sechseck, wie die
   Intensitätsmarke im Cue Diary und das Rangabzeichen in Fitness.
   Vorher war es eine Pille. */
.cal-hexmark {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 62px;
  padding: 4px 12px;
  clip-path: var(--hex-clip-pointy);
  background: var(--accent-app);
  color: var(--ink);
  font-size: max(var(--fs-floor), 9.5px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- Sections | Timeline --------------------------------------------------
   Er schaltet um, er tut nichts: geschnitten, ohne Sockel – dasselbe
   Stück wie .cd-seg und .fit-seg. */

.cal-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 14px 0 4px;
  padding: 4px;
  background: rgba(var(--o), .05);
}

.cal-seg__btn {
  padding: 9px 0;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.cal-seg__btn.is-on { background: var(--accent-deep); color: var(--on-accent); }
.cal-seg__btn:not(.is-on):hover { color: var(--text); background: rgba(var(--o), .06); }

/* --- Abschnittsüberschrift ohne Karte ------------------------------------- */

.cal-sechead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 20px 0 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(var(--o), .07);
}

.cal-sechead__title {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g-09);
}

.cal-sechead__right { font-size: max(var(--fs-floor), 11.5px); color: var(--text-dim); }

/* --- Bereichskarte -------------------------------------------------------- */

.cal-sec { --sec: var(--accent-app); border-top-color: var(--sec); }

.cal-sec__head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
}

/* Das Bereichszeichen war ein Kreis. Es steht für sich – also ein
   Sechseck, wie überall im Projekt. */
.cal-sec__dot {
  width: 10px;
  height: 10px;
  flex: none;
  clip-path: var(--hex-clip-pointy);
  background: var(--sec);
}

.cal-sec__title { flex: 1; min-width: 0; text-align: start; font-size: 15px; }

.cal-sec__count {
  padding: 1px 9px;
  background: rgba(var(--o), .07);
  font-size: max(var(--fs-floor), 11.5px);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.cal-sec__chev {
  width: 9px;
  height: 9px;
  flex: none;
  border-inline-end: 1.5px solid var(--text-dim);
  border-bottom: 1.5px solid var(--text-dim);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease-out);
}

.cal-sec.is-closed .cal-sec__chev { transform: rotate(-45deg) translate(-1px, 1px); }

.cal-sec__body { padding-top: 12px; }
.cal-sec.is-closed .cal-sec__body { display: none; }
.cal-sec__empty { font-size: 12.5px; color: var(--text-dim); }

.cal-sec__hint {
  margin-top: 8px;
  font-size: max(var(--fs-floor), 11.5px);
  line-height: 1.5;
  color: var(--text-dim);
}

/* Die Overdue-Karte trägt die Warnfarbe des Projekts an der Oberkante –
   sie ist die einzige Karte, die um Aufmerksamkeit bittet. */
.cal-sec--overdue .cal-up__date { color: var(--c-fitness); }

/* --- Plan, offene und verpasste Aufgaben ---------------------------------- */

.cal-plan { display: grid; gap: 6px; margin-bottom: 12px; }

.cal-plan__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  background: rgba(var(--o), .04);
  border-inline-start: 2px solid var(--sec);
  font-size: 12px;
  color: var(--text-dim);
}

.cal-plan__mark {
  width: 12px;
  height: 12px;
  flex: none;
  border: 1.5px solid var(--text-faint);
}

.cal-plan__row.is-done { color: var(--g-25); }

.cal-plan__row.is-done .cal-plan__mark {
  background: var(--sec);
  border-color: var(--sec);
}

/* Verpasstes trägt die Strichfarbe, mit der der Bereich sonst warnt –
   und einen Strich durch das Kästchen statt eines Hakens. */
.cal-plan--missed .cal-plan__row { border-inline-start-color: var(--c-fitness-stroke); }
.cal-plan__row.is-missed { color: var(--g-14); }

.cal-plan__row.is-missed .cal-plan__mark {
  position: relative;
  border-color: var(--c-fitness-stroke);
}

.cal-plan__row.is-missed .cal-plan__mark::before {
  content: "";
  position: absolute;
  inset: 3px 1px;
  border-top: 1.5px solid var(--c-fitness-stroke);
  transform: translateY(1px);
}

.cal-plan__link {
  min-width: 0;
  display: grid;
  gap: 1px;
  color: var(--g-09);
}

.cal-plan__link:hover { color: var(--text); }

.cal-plan__note {
  font-size: max(var(--fs-floor), 11px);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   Zeilen
   ========================================================= */

.cal-list { display: grid; gap: 3px; }
.cal-row { display: flex; align-items: center; gap: 6px; }
.cal-row .cal-item { flex: 1; min-width: 0; }

.cal-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  transition: background-color var(--dur) var(--ease-out);
}

.cal-item:hover { background: rgba(var(--o), .05); }

/* Eine Zeile mit farbiger Schiene links – in Upcoming und in der
   All-day-Schiene des Zeitstrahls. Sie sagt den Bereich, ohne dass
   ein Wort dafür nötig wäre. */
.cal-item--rail {
  border-inline-start: 2px solid var(--sec);
  background: rgba(var(--o), .03);
}

.cal-item--rail.is-missed { border-inline-start-color: var(--c-fitness); }

.cal-item__time {
  font-size: max(var(--fs-floor), 11.5px);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.cal-item__time--none { min-height: 1px; }

.cal-item__body { min-width: 0; display: grid; gap: 2px; }

/* Titel auf voller Textfarbe. In Upcoming standen sie auf --text-dim
   und blieben damit unter 4.5:1 – eine Liste, die man anstrengen
   musste, um sie zu lesen. */
.cal-item__title {
  font-size: 14px;
  color: var(--g-06);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-item__meta {
  font-size: max(var(--fs-floor), 11.5px);
  line-height: 1.45;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-item__tag {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--cal-line);
  font-size: max(var(--fs-floor), 10px);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Eine erledigte Aufgabe ist im Tagesstrom etwas anderes als eine
   angelegte Notiz: sie ist etwas, das getan wurde. Der Haken davor
   sagt das in einem Zeichen – ohne ihn stünden im Archive-Abschnitt
   drei Sorten Zeile nebeneinander, die gleich aussehen und
   Verschiedenes meinen.

   Derselbe Haken wie an einem To-do: zwei Linien, kein Symbol. */
.cal-item__tag[data-tag="Done"] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: transparent;
  background: rgba(var(--o), .08);
  color: var(--text-muted);
}

.cal-item__tag[data-tag="Done"]::before {
  content: "";
  width: 5px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* Ein Einkauf ist kein Haken, sondern eine Menge – die Marke trägt
   deshalb den Rahmen des Bereichs, aber kein Zeichen. */
.cal-item__tag[data-tag="Shopping"] {
  border-color: rgba(var(--t-archive), .45);
  color: var(--g-16);
}

.cal-item__tag[data-tag="Missed"] {
  border-color: rgba(var(--t-fitness), .5);
  color: #ffbcbc;
}

/* Eine Einheit auf einen anderen Tag kopieren – der Weg zum Fast Track. */
.cal-copy {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cal-line);
  transition: background-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.cal-copy img { width: 15px; opacity: .75; }
.cal-copy:hover { background: rgba(var(--o), .07); }
.cal-copy:hover img { opacity: 1; }
.cal-copy:active { transform: scale(.9); }

/* --- Marken an einer Zeile ------------------------------------------------ */

.cal-item__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.cal-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--cal-line);
  font-size: max(var(--fs-floor), 10.5px);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

/* Intensität eines Cues: die Zahl steht daneben, der Balken macht sie
   auf einen Blick vergleichbar. */
.cal-badge--level { border-color: rgba(var(--t-cue-diary), .4); color: #f2c3d2; }

.cal-badge__bar {
  width: 26px;
  height: 4px;
  background: rgba(var(--o), .14);
  overflow: hidden;
}

.cal-badge__bar::before {
  content: "";
  display: block;
  width: var(--fill);
  height: 100%;
  background: var(--c-cue-diary);
}

.cal-badge--record { border-color: rgba(var(--t-journal), .45); color: #f6d68a; }
.cal-badge--rank   { border-color: rgba(var(--t-fitness), .45); color: #ffbcbc; }
.cal-badge--link   { border-color: rgba(var(--t-calendar), .4);  color: #9fd9e9; }

/* =========================================================
   Zeitstrahl

   Bänder geben dem Tag eine Form, Strecken geben den
   Ereignissen eine Dauer. Die Zeitmarke trägt die Farbe ihres
   Bereichs – deshalb trägt sie hier ausnahmsweise Schrift, und
   deshalb ist die Schrift darauf --ink.
   ========================================================= */

.cal-tl { display: grid; gap: 4px; margin-top: 14px; }

/* --- Was keine Uhrzeit hat ------------------------------------------------ */

.cal-tl__allday { margin-bottom: 10px; }

.cal-tl__allday-title {
  margin-bottom: 6px;
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cal-tl__allday-list { display: grid; gap: 3px; }

.cal-tl__allday-list .cal-item {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* --- Bänder --------------------------------------------------------------- */

.cal-tl__band { position: relative; padding-top: 4px; }

.cal-tl__band-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  padding-inline-start: 4px;
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cal-tl__band-count {
  padding: 0 7px;
  background: rgba(var(--o), .07);
  font-size: max(var(--fs-floor), 10px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Die Linie läuft durch die Mitte der Zeitmarken, damit sie darauf
   sitzen wie Haltestellen und nicht daneben stehen: 4px Innenabstand
   plus die halbe Marke (52px) ergeben 30px. */
.cal-tl__list {
  position: relative;
  display: grid;
  gap: 3px;
  padding-inline-start: 4px;
}

.cal-tl__list::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  inset-inline-start: 30px;
  width: 1px;
  background: var(--cal-line);
}

.cal-tl__row { position: relative; }

.cal-tl__item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 9px 8px 9px 0;
  transition: background-color var(--dur) var(--ease-out);
}

.cal-tl__item:hover { background: rgba(var(--o), .05); }

.cal-tl__when {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.cal-tl__chip {
  min-width: 52px;
  padding: 3px 8px;
  background: var(--sec);
  color: var(--ink);
  font-size: max(var(--fs-floor), 11px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* --- Strecken -------------------------------------------------------------

   Was gedauert hat, bekommt einen Balken unter der Zeitmarke. Seine
   Länge ist der Anteil an der längsten Strecke des Tages – ein
   Vergleich innerhalb des Tages, nicht gegen vierundzwanzig Stunden.

   Gemessen heißt volle Fläche, nachgetragen heißt Kontur: behauptete
   Zeit ist nicht gemessene Zeit, und der Unterschied soll zu sehen
   sein, ohne dass man das Wort dafür liest. */

.cal-tl__span {
  width: var(--len);
  min-width: 6px;
  max-width: 100%;
  height: 4px;
  justify-self: center;
  background: var(--sec);
  opacity: .35;
}

.cal-tl__span.is-measured { opacity: .9; }

.cal-tl__body { min-width: 0; display: grid; gap: 2px; }

.cal-tl__area {
  font-size: max(var(--fs-floor), 10px);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Im Strom darf der Titel umbrechen: dort steht er als Ereignis, nicht
   als Zeile einer Liste, die alle gleich hoch sein müssen. */
.cal-tl__body .cal-item__title { white-space: normal; }
.cal-tl__body .cal-item__meta { white-space: normal; }

/* =========================================================
   Ruhige Zustände und handelnde Knöpfe
   ========================================================= */

.cal-quiet {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 26px 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-dim);
}

.cal-quiet--tall { padding: 60px 16px; }
.cal-quiet__hint { font-size: 12px; color: var(--text-dim); max-width: 42ch; }

.cal-quiet__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.cal-act { flex: none; white-space: nowrap; }
.cal-act--wide { width: 100%; margin-top: 6px; }

/* =========================================================
   Upcoming
   ========================================================= */

/* Der Kübel bringt seine eigene Überschrift mit; die Karten darin
   tragen bereits den Abstand von .mnt-card. Ein zusätzlicher Abstand
   riss zwischen „TODAY" und der ersten Karte eine Lücke von sechzig
   Pixeln auf – die Überschrift stand danach bei nichts. */
.cal-bucket { display: grid; gap: 0; }
.cal-bucket .cal-sechead { margin-bottom: 0; }
.cal-bucket > .mnt-card:first-of-type { margin-top: 12px; }

.cal-up__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cal-line);
}

.cal-up__date { font-size: 14px; font-weight: 600; }

.cal-up__rel {
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-app);
}

/* =========================================================
   Patterns
   ========================================================= */

.cal-pat { display: grid; }

/* --- Serien ----------------------------------------------------------------

   Hier stehen alle neun, auch die auf null – dafür ist dieser Reiter
   da. Der Zeilenabstand ist größer als der Spaltenabstand, weil die
   „today"-Marke oben aus der Kachel herausragt. */

.cal-streaks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  column-gap: 8px;
  row-gap: 16px;
}

.cal-chip {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 11px 8px 10px;
  background: var(--surface);
  border: 1px solid var(--cal-line);
  border-top: 1.5px solid var(--dot);
  text-align: center;
  transition: background-color var(--dur) var(--ease-out);
}

.cal-chip:hover { background: var(--surface-2); }

.cal-chip__dot {
  width: 9px;
  height: 9px;
  clip-path: var(--hex-clip-pointy);
  background: var(--dot);
}

.cal-chip__num {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.cal-chip__label {
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cal-chip__hint {
  font-size: max(var(--fs-floor), 10.5px);
  line-height: 1.4;
  color: var(--text-faint);
}

/* „today" heißt: der Tag ist schon abgehakt. Ohne die Marke läuft die
   Serie zwar weiter, der Tag ist aber noch offen – genau der
   Unterschied, den ein reiner Zähler nicht zeigt. */
.cal-chip__live {
  position: absolute;
  top: -9px;
  inset-inline-end: -4px;
  /* Der Sechseckschnitt nimmt oben und unten je ein Viertel der Höhe.
     Mit der alten Pillenpolsterung (1px) lag die Schrift genau in dem
     Viertel und wurde abgeschnitten – die Marke braucht Luft, die die
     Kontur ihr wieder wegnehmen darf. */
  min-width: 58px;
  padding: 5px 12px;
  text-align: center;
  clip-path: var(--hex-clip-pointy);
  background: var(--dot);
  color: var(--ink);
  font-size: max(var(--fs-floor), 9.5px);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cal-chip.is-off { opacity: .5; }
.cal-chip.is-off .cal-chip__num { color: var(--text-dim); }

/* Abgeschaltet heißt: zählt weiter, steht aber nicht mehr im Band.
   Das ist etwas anderes als „steht auf null" – deshalb ein anderes
   Zeichen: durchgestrichene Zahl statt blasser Kachel. */
.cal-chip.is-mute { border-top-color: var(--text-faint); }
.cal-chip.is-mute .cal-chip__num { text-decoration: line-through; opacity: .5; }
.cal-chip.is-mute .cal-chip__dot { background: var(--text-faint); }

/* --- Monatsbilanz --------------------------------------------------------- */

.cal-sum__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 14px 12px;
}

.cal-sum__cell { display: grid; gap: 2px; }

.cal-sum__value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-app);
}

.cal-sum__label {
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --- Bereichsbilanz ------------------------------------------------------- */

.cal-bal { display: grid; gap: 8px; }

.cal-bal__row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.cal-bal__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--g-09);
}

.cal-bal__track { height: 6px; background: rgba(var(--o), .07); }
.cal-bal__fill { display: block; height: 100%; background: var(--sec); }

.cal-bal__num {
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--text-dim);
}

/* --- Jahr -----------------------------------------------------------------

   Dieselbe Heatmap wie in Journal → Progress: Wochen als Spalten, Tage
   als Zeilen. Sie ist breiter als der Bildschirm und scrollt deshalb
   in sich selbst – nie die Seite. */

.cal-year { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }

.cal-year__grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 10px);
  grid-auto-columns: 10px;
  gap: 3px;
}

.cal-year__cell { background: rgba(var(--o), .05); }
.cal-year__cell.is-void { background: none; }
.cal-year__cell[data-level="1"] { background: rgba(var(--cal-tint), .22); }
.cal-year__cell[data-level="2"] { background: rgba(var(--cal-tint), .40); }
.cal-year__cell[data-level="3"] { background: rgba(var(--cal-tint), .60); }
.cal-year__cell[data-level="4"] { background: rgba(var(--cal-tint), .85); }
.cal-year__cell.is-today { outline: 1.5px solid var(--text); outline-offset: 1px; }

.cal-year__key {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: max(var(--fs-floor), 10.5px);
  color: var(--text-dim);
}

.cal-year__key i { width: 10px; height: 10px; background: rgba(var(--o), .05); }
.cal-year__key i[data-level="1"] { background: rgba(var(--cal-tint), .22); }
.cal-year__key i[data-level="2"] { background: rgba(var(--cal-tint), .40); }
.cal-year__key i[data-level="3"] { background: rgba(var(--cal-tint), .60); }
.cal-year__key i[data-level="4"] { background: rgba(var(--cal-tint), .85); }

/* =========================================================
   Popups
   ========================================================= */

.cal-layer { --accent-app: var(--c-calendar); --accent-deep: var(--c-calendar-stroke); }
.pop--cal .pop__body { gap: 10px; }

.cal-opt { --sec: var(--accent-app); font-size: 15px; text-align: start; }

.cal-opt__box {
  width: 22px;
  height: 22px;
  flex: none;
  border: 1.5px solid var(--text-faint);
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

.cal-opt.is-on .cal-opt__box { background: var(--sec); border-color: var(--sec); }
.cal-opt:not(.is-on) { color: var(--text); }

.cal-opt__hint {
  display: block;
  margin-top: 2px;
  font-size: max(var(--fs-floor), 11.5px);
  line-height: 1.4;
  color: var(--text-dim);
}

/* Die drei Sorten des Archive-Bereichs hängen unter ihm – eingerückt,
   mit einer Schiene, die die Zugehörigkeit zeigt. */
.cal-opt__subs {
  display: grid;
  gap: 6px;
  margin: 2px 0 4px 14px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--cal-line);
}

.cal-opt__subs.is-off { opacity: .4; pointer-events: none; }

.cal-opt--sub { font-size: 13.5px; }
.cal-opt--sub .cal-opt__box { width: 18px; height: 18px; }

/* --- Monatsauswahl -------------------------------------------------------- */

.cal-jump__head {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.cal-jump__year {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--accent-app);
}

.cal-jump__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cal-jump__cell {
  padding: 12px 0;
  background: rgba(var(--o), .05);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--g-09);
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

.cal-jump__cell:hover { background: rgba(var(--cal-tint), .16); }
.cal-jump__cell.is-now { color: var(--accent-app); }

.cal-jump__cell.is-on {
  background: var(--accent-deep);
  color: var(--on-accent);
  font-weight: 600;
}

/* =========================================================
   Wasserstand, Leseziel, Journalhinweis
   ========================================================= */

.cal-water { margin-bottom: 12px; }

/* Der Balken kommt aus der Ernährung und bringt seine Farben mit. Die
   Zeile unter ihm steht dort auf --text-faint und bleibt damit unter
   4.5:1. Hier wird sie angehoben – in styles/nutrition.css, wo derselbe
   Balken sonst noch steht, wird nichts angefasst. */
.cal-water .nu-bar__meta { color: var(--text-dim); }

.cal-goal {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: rgba(var(--o), .04);
  border-inline-start: 2px solid var(--sec);
  font-size: 12px;
  color: var(--text-dim);
}

/* Der Anteil als Fläche in einem Sechseck – dieselbe Sprache wie die
   Intensitätsmarke im Cue Diary. Vorher war es ein Kreisring, das
   einzige runde Zeichen, das hier noch stand. */
.cal-goal__ring {
  width: 16px;
  height: 16px;
  flex: none;
  clip-path: var(--hex-clip-pointy);
  background:
    linear-gradient(to top,
      var(--sec) 0 calc(var(--ratio) * 100%),
      rgba(var(--o), .16) calc(var(--ratio) * 100%) 100%);
}

.cal-goal__text { flex: 1; min-width: 0; }

.cal-goal__state {
  flex: none;
  font-size: max(var(--fs-floor), 10px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cal-goal.is-done .cal-goal__state { color: var(--c-nutrition); }

.cal-mention {
  margin-bottom: 12px;
  padding: 7px 10px;
  background: rgba(var(--o), .04);
  border-inline-start: 2px solid var(--c-journal);
  font-size: 12px;
  color: var(--text-dim);
}

/* =========================================================
   Schaltbare Zeilen im Einstellungsfenster

   Das Fenster gehört app/shell.js und liegt außerhalb von .cal –
   deshalb stehen diese Regeln ungebunden. Der Schalter selbst ist der
   aus dem Reader (.rd-check--switch); hier kommt nur die Zeile dazu.
   ========================================================= */

.set-row--toggle { cursor: pointer; }
.set-row--toggle .set-row__name { color: var(--g-09); }
.set-row--toggle .set-row__hint { color: var(--text-dim); }
.set-row--toggle:hover { background: rgba(var(--o), .04); }

/* =========================================================
   Größere Bildschirme – dieselbe Ordnung, mehr Luft
   ========================================================= */

@media (min-width: 560px) {
  .cal-cell { min-height: 58px; padding: 7px 4px 6px; }
  .cal-grid--week .cal-cell { min-height: 68px; }
  .cal-cell__n { font-size: 14px; }
  .cal-cell__bar { height: 4px; }
  .cal-cell__open { width: 10px; height: 10px; top: 4px; inset-inline-end: 4px; }
  .cal-item { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .cal-year__grid { grid-template-rows: repeat(7, 12px); grid-auto-columns: 12px; }
}

/* =========================================================
   Der Monat nimmt die Spalte, der Tag den Fluss

   #cal-root steht in der Ausnahmeliste von .mnt (styles/components.css)
   und hat damit die ganze --shell: das Monatsgitter hat sieben Spalten,
   und sieben Spalten sind auf 896px sieben ordentliche Kacheln statt
   sieben Briefmarken. Kopfzeile und Serienband gehören dazu – sie sind
   die Zeile über dem Gitter und sollen mit ihm fluchten.

   Was darunter kommt, ist wieder Text: der ausgewählte Tag mit seinen
   Einträgen. Eine Liste aus Zeilen über 896px zu ziehen, macht sie
   nicht besser. Also --flow, zentriert unter dem Gitter.
   ========================================================= */

.cal-detail {
  /* width: 100% muss dabeistehen. Das hier ist ein Kind eines Grids
     (.module__body), und `margin-inline: auto` allein macht aus einem
     gestreckten Rasterkind eines, das sich auf seinen Inhalt
     zusammenzieht. Mit einer gesetzten Breite bleibt nur noch das
     Zentrieren zu tun, und das ist gemeint. */
  width: 100%;
  max-width: var(--board);
  margin-inline: auto;
}

/* =========================================================
   Termine: das Band unter dem Datum

   Was ganztägig gilt – ein Geburtstag, eine Reise, eine
   Klausur – ist keine Zeile in einer Liste, sondern ein
   Zustand des Tages. Es steht deshalb direkt unter dem Datum
   und nicht im Abschnitt darunter: „Tag 3 von 9 in Lissabon"
   beantwortet „wo bin ich", und diese Frage steht in dieser
   App immer ganz oben.

   Ein mehrtägiger Termin zeichnet durch. Der senkrechte
   Strich links ist an seinem ersten und letzten Tag gestutzt
   und läuft dazwischen von Kante zu Kante – so sieht man beim
   Blättern, dass die Reise nicht an jedem Tag neu anfängt.
   ========================================================= */

.cal-band {
  display: grid;
  gap: 6px;
  margin: 10px 0 2px;
}

.cal-band__row { position: relative; }

.cal-band__link {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 14px;
  background: rgba(var(--cal-tint), .10);
  transition: background-color var(--dur) var(--ease-out);
}

.cal-band__link:hover { background: rgba(var(--cal-tint), .17); }

/* Der Strich links trägt die Bereichsfarbe. Er ist die einzige Fläche
   des Bandes mit voller Farbe – der Grund dahinter bleibt getönt,
   damit die Schrift darauf ihre eigene bleibt (§ Der Kalender führt
   sieben fremde Farben, oben in app/calendar/ui.js). */
.cal-band__row::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--c-calendar);
}

/* Durchlaufend: oben, unten oder beides bis an die Kante. */
.cal-band__row.is-cont::before { top: 0; }
.cal-band__row.is-open::before { bottom: 0; }

.cal-band__mark {
  width: 18px;
  height: 18px;
  background: var(--c-calendar);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.cal-band__body { display: grid; gap: 1px; min-width: 0; }

.cal-band__title {
  font-size: 14px;
  color: var(--g-03);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-band__meta {
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   Die sechs Arten

   Der Weg in einen Termin geht immer über seine Art. Ein
   Formular mit zwölf leeren Feldern ist ein Formular –
   „Arzttermin" ist ein Gedanke.

   Zwei Spalten und nicht sechs Zeilen: die Arten sind gleich-
   rangig, und untereinander gestellt läse man sie als
   Rangfolge. Sie sind Flächen, keine Knöpfe, also Eckschnitt
   ohne Sockel.
   ========================================================= */

.cal-kinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 4px;
}

.cal-kind {
  display: grid;
  gap: 2px;
  padding: 11px 12px;
  text-align: start;
  background: rgba(var(--o), .05);
  transition:
    background-color var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.cal-kind:hover { background: rgba(var(--cal-tint), .16); }
.cal-kind:active { transform: scale(.97); }

.cal-kind__mark {
  width: 20px;
  height: 20px;
  margin-bottom: 3px;
  background: var(--c-calendar);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.cal-kind__label { font-size: 14px; color: var(--g-03); }

.cal-kind__hint {
  font-size: max(var(--fs-floor), 11px);
  line-height: 1.35;
  color: var(--text-faint);
}

/* Der Tracker: eine breite Fläche unter den sechs Arten. Er gilt ab einem
   Tag statt an einem – deshalb die ganze Zeile und die Ideen darunter,
   die mit einem Tipp vorbelegt öffnen. Die Fläche selbst gibt nicht
   nach, nur ihr Knopf; sonst schrumpfte sie beim Tippen auf eine Idee. */
.cal-kind--track {
  grid-column: 1 / -1;
  gap: 8px;
  padding: 0 0 11px;
}

.cal-kind--track:active { transform: none; }

.cal-kind__main {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 11px 12px 0;
  text-align: start;
  transition: transform var(--dur-fast) var(--ease-out);
}

.cal-kind__main:active { transform: scale(.98); }

.cal-kind__starters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px;
}

@media (min-width: 720px) {
  .cal-kind--track .cal-kind__hint { max-width: 44ch; }
}

/* =========================================================
   Das Formular eines Termins

   Der einzige Bildschirm des Bereichs, auf dem geschrieben
   wird. Er ist bewusst schmal (--flow): ein Formular über die
   volle Brettbreite zwingt das Auge bei jedem Feld einmal quer
   über den Schirm.
   ========================================================= */

.cal-form {
  width: 100%;
  max-width: var(--flow);
  margin-inline: auto;
}

.cal-form__head {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 4px 2px 10px;
}

.cal-form__mark {
  width: 24px;
  height: 24px;
  background: var(--c-calendar);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.cal-form__headtext { display: grid; gap: 2px; min-width: 0; }
.cal-form__title { font-size: 19px; color: var(--g-02); }
.cal-form__hint { font-size: 12px; color: var(--text-faint); }

.cal-form__card,
.cal-form__more { display: grid; gap: 12px; padding: 14px; }

.cal-field { display: grid; gap: 5px; }

.cal-field__label {
  font-size: max(var(--fs-floor), 11.5px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cal-field__hint { font-size: max(var(--fs-floor), 11.5px); color: var(--text-faint); }

/* „Ends" vor „Starts" – die Meldung unter dem Paar (event-screen.js). */
.cal-form__err {
  margin: -4px 0 0;
  font-size: 12.5px;
  color: var(--danger);
}
.cal-input[aria-invalid="true"] { border-color: var(--danger); }

/* 16 px, nicht 15: darunter zoomt Safari auf dem iPhone beim Antippen
   jedes Feld heran und zoomt nicht zurück (10.10.2026). */
.cal-input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: rgba(var(--o), .05);
  border: 1px solid transparent;
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.cal-input:focus-visible {
  outline: none;
  border-color: var(--accent-app);
  background: rgba(var(--o), .08);
}

.cal-input--area { resize: vertical; min-height: 84px; line-height: 1.5; }

/* Das Uhrzeit- und Datumsfeld bringt ein eigenes Symbol mit, das in
   der dunklen Fassung schwarz auf schwarz stünde. */
.cal-input::-webkit-calendar-picker-indicator { filter: invert(.7); }

.cal-select { position: relative; display: block; }

.cal-select select {
  width: 100%;
  padding: 10px 34px 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: rgba(var(--o), .05);
  border: 1px solid transparent;
  appearance: none;
}

.cal-select::after {
  content: "";
  position: absolute;
  inset-inline-end: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-inline-end: 1.5px solid var(--text-dim);
  border-bottom: 1.5px solid var(--text-dim);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Zwei Felder nebeneinander – Anfang und Ende, Zahl und Einheit. Sie
   gehören zusammen und lesen sich untereinander als zwei Fragen. */
.cal-form__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  /* Oben bündig: trägt nur EIN Feld einen Hinweis („Optional"), wird
     die Zelle höher – gestreckt rutschte das Nachbarfeld nach unten. */
  align-items: start;
}

/* Ein Feld hält Beschriftung und Eingabe oben zusammen, auch wenn die
   Zelle höher ist als es selbst. */
.cal-field { align-content: start; min-width: 0; }

/* Datum und Uhrzeit: Systemfelder bringen eine Mindestbreite und
   (iOS) eine eigene Höhe mit. Ohne das ragen sie auf schmalen Geräten
   aus der Spalte, und ein leeres Feld fällt zusammen. */
.cal-input[type="time"],
.cal-input[type="date"] {
  -webkit-appearance: none;
          appearance: none;
  min-width: 0;
  min-height: 46px;
  line-height: 1.5;
}

.cal-input::-webkit-date-and-time-value { text-align: start; }

/* Unter 340 px passen zwei Uhrzeiten mit Symbol nicht nebeneinander. */
@media (max-width: 339px) {
  .cal-form__pair { grid-template-columns: minmax(0, 1fr); }
}

.cal-form__row { display: grid; }

.cal-form__note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-faint);
}

/* Kein Fehler, sondern eine Auskunft: die Regel greift so nicht. Sie
   trägt deshalb die Warnfarbe und keinen Rahmen – nichts ist blockiert,
   speichern lässt es sich trotzdem. */
.cal-form__warn {
  font-size: 12px;
  line-height: 1.45;
  color: var(--c-fitness-stroke);
}

/* Die Wochentage einer eigenen Regel. Sieben Felder in einer Reihe –
   die Reihenfolge ist dieselbe wie im Raster darüber, Montag zuerst. */
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.cal-day {
  padding: 9px 0;
  font-size: 13px;
  color: var(--text-dim);
  background: rgba(var(--o), .05);
  transition:
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

/* --on-accent und nicht --ink: in der E-ink-Fassung wird --c-calendar
   zu einem dunklen Grau, und --ink (schwarz) stünde dann schwarz auf
   dunkelgrau. --on-accent kippt dort auf Weiß mit. */
.cal-day.is-on {
  color: var(--on-accent);
  background: var(--c-calendar);
}

/* Die Klappe mit allem, was ein Termin KANN. Nichts darin ist
   gestrichen – es ist eine Ebene tiefer, und die Klappe steht offen,
   sobald etwas darin gesetzt ist. */
.cal-form__more { padding-block: 0; }
.cal-form__more[open] { padding-bottom: 14px; }

/* Der Kopf ist .la-fold (styles/components.css), derselbe wie jede
   andere „mehr davon“-Klappe der App; hier nur die Farbe des Pfeils. */
.cal-form__more { --fold-accent: var(--c-calendar); }


.cal-form__morebody { display: grid; gap: 10px; }

/* Eine Erinnerung: das Häkchen füllt die Zeile, „Edit time" steht
   rechts daneben als eigener, stiller Knopf – die Uhrzeit gehört zur
   Erinnerung, ändern ist aber nicht dasselbe wie an- und ausschalten. */
.cal-remind {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}
.cal-remind:has(.cal-remind__edit) { grid-template-columns: minmax(0, 1fr) auto; }
.cal-remind > .cal-opt { min-width: 0; }

.cal-remind__edit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-inline: 12px;
  white-space: nowrap;
  font-size: 13px;
}

.cal-remind__icon {
  width: 15px;
  height: 15px;
  flex: none;
  background: var(--accent-app);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.cal-remind__clock { font-size: 22px; letter-spacing: .02em; text-align: center; }
.cal-remind__reset { justify-self: start; }

/* Die Notizen eines Termins: derselbe Block-Editor wie im Journal,
   in der Fläche eines Eingabefelds. */
.cal-doc {
  min-height: 120px;
  padding: 8px 10px 10px 0;
  background: rgba(var(--o), .05);
  border: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}
.cal-doc:focus-within { border-color: var(--accent-app); }

@media (max-width: 380px) {
  .cal-remind__edit { padding-inline: 10px; font-size: 12px; }
}

/* =========================================================
   Die Handgriffe des Formulars: der Streifen unter der Topbar

   „Save" ist keine Sicht auf den Inhalt, sondern der Abschluss
   der Arbeit – deshalb steht es nicht im Werkzeugplatz der
   Topbar. Die Topbar bleibt unberührt: Bereichszeichen, Name,
   Werkzeugplatz des Kalenders.

   Der Streifen klebt DIREKT DARUNTER und scrollt nicht mit.
   Die drei Fragen aus dem Design-Rahmen beantwortet er an
   derselben Stelle, an der man sie stellt:

     Wo bin ich?       Die Topbar darüber (Calendar).
     Was kann ich hier
     tun?              Genau hier, immer sichtbar, nie
                       weggescrollt – ein Formular ist länger
                       als das Bild, und „More" macht es doppelt
                       so lang.
     Wohin von hier?   Cancel und Save sind beide Ausgänge, und
                       beide stehen nebeneinander da.

   Rangfolge (§ Squint-Test): genau EINE gefüllte Akzentfläche –
   Save. Cancel ist ein gewöhnlicher Knopf, Löschen trägt nur
   rote Schrift auf stiller Fläche. Der AUSLÖSER einer
   Zerstörung soll leise sein; laut wird erst die RÜCKFRAGE, wo
   „Delete" dann die gefüllte Fläche bekommt (.cal-act--danger
   weiter unten).

   Räumliche Beständigkeit: der Streifen sitzt auf jeder Art und
   in jedem Zustand an derselben Stelle. Nur „Delete" fehlt an
   einem Termin, den es noch nicht gibt – deshalb steht es
   links, wo sein Fehlen nichts verschiebt.
   ========================================================= */

.cal-form__bar {
  position: fixed;
  inset-inline-start: 50%;
  top: calc(var(--safe-top) + var(--sh-top-h) + 6px);
  z-index: 60;                    /* unter der Topbar (70), über allem sonst */
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 8px;
  width: min(var(--flow), calc(100vw - 2 * var(--gutter)));
  padding: 8px 10px;

  /* Der Inhalt läuft darunter durch – ohne eigenen Grund stünde die
     Schrift des Formulars mitten in den Knöpfen (§ Legibility).

     --surface-3 und nicht --surface-2: die Karten des Formulars tragen
     bereits --surface-2, und derselbe Ton machte den Streifen zur
     oberen Kante der ersten Karte statt zu etwas, das darüber liegt.
     Eine Kontur ginge hier nicht – clip-path schneidet sie mit weg,
     dieselbe Stelle ist bei .nt-toast in styles/notes.css ausführlich
     beschrieben –, also trägt der Schatten die Trennung. Er fällt nach
     unten, weil der Streifen jetzt oben klebt. */
  background: var(--surface-3);
  filter: drop-shadow(0 6px 18px rgba(var(--o-deep), .6));
}

.cal-form__gap { flex: 1 1 auto; }

/* Der Platz, den der Streifen dem Formular wegnimmt. Ohne ihn begänne
   die erste Karte unter den Knöpfen – und das TITLE-Feld, das beim
   Anlegen den Fokus bekommt, läge verdeckt hinter ihnen. */
.cal-form { padding-top: 58px; }

/* Überschrift und erste Karte sind hier EIN Gedanke: „New appointment"
   und die Felder, die den Termin ausmachen. Der Abstand des Rasters
   (26px) trägt das; die zusätzlichen 18px, die eine Karte sonst
   mitbringt, rissen daraus zwei getrennte Blöcke. */
.cal-form > .mnt-card:first-of-type { margin-top: 0; }

/* Löschen ist der AUSLÖSER, nicht die Tat: stille Fläche, rote Schrift.
   #f26c6c auf dem dunklen Grund liegt über 4,5:1 und ist damit auch als
   gewöhnlicher Text lesbar (WCAG AA). Die gefüllte rote Fläche bekommt
   erst die Rückfrage. */
.cal-form__bar .cal-act--danger {
  --btn-face: rgba(var(--o), .06);
  --btn-face-hover: rgba(242, 108, 108, .18);
  color: var(--c-fitness-stroke);
}

/* Im Rückfrage-Popup ist derselbe Streifen nur eine Knopfzeile: dort
   steht er im Fluss, rechtsbündig, wie in jedem anderen Popup der App –
   und „Delete" trägt dort die volle Farbe, weil es dort die Tat ist. */
.pop .cal-form__bar {
  position: static;
  transform: none;
  width: auto;
  padding: 0;
  justify-content: flex-end;
  background: none;
  filter: none;
}

/* Auf dem Brett rückt die Tableiste an den linken Rand und wird zur
   Schiene; alles Feste muss um deren halbe Breite mitwandern. Dieselbe
   Zeile wie bei .fit-chip (styles/fitness.css) und .nt-toast. */
@media (min-width: 900px) {
  body[data-shell] .cal-form__bar { inset-inline-start: calc(50% + var(--rail-w) / 2); }
}

/* Löschen ist das einzige, was hier etwas wegnimmt – und das einzige,
   was seine Farbe dafür bekommt. */
/* Dieselbe Farbe, die der Kalender schon für „missed" führt – und
   dieselbe Sockel-Bauart wie .cd-btn--danger im Cue Diary, damit ein
   gefährlicher Knopf in der ganzen App gleich aussieht. --on-accent
   hält die Schrift darauf lesbar. */
.cal-act--danger {
  --btn-face: var(--c-fitness-stroke);
  --btn-face-hover: var(--c-fitness);
  --btn-lift: var(--g-42);
  color: var(--on-accent);
}

/* =========================================================
   Formensprache: der Schnitt, an einer Stelle

   Dasselbe Muster wie am Ende von styles/cue-diary.css. Wer eine neue
   Fläche baut, trägt sie hier ein und gibt ihr ihren --cut – statt in
   der Regel selbst einen Radius zu setzen, der beim nächsten Blick
   wieder aus der Reihe fällt.

   Nicht in dieser Liste stehen: was schon .btn3d ist (bringt den
   Schnitt mit), was ein Sechseck ist, und was eine reine Linie ist.
   ========================================================= */

.cal-head__title,
.cal-step,
.cal-ribbon,
.cal-cell,
.cal-cell__bar,
.cal-cell__open,
.cal-fold,
.cal-seg,
.cal-seg__btn,
.cal-sec__count,
.cal-plan__row,
.cal-plan__mark,
.cal-item,
.cal-item__tag,
.cal-item__badges .cal-badge,
.cal-badge__bar,
.cal-copy,
.cal-tl__item,
.cal-tl__chip,
.cal-tl__band-count,
.cal-chip,
.cal-bal__track,
.cal-year__cell,
.cal-year__key i,
.cal-opt__box,
.cal-jump__cell,
.cal-goal,
.cal-mention,
.cal-band__link,
.cal-kind,
.cal-input,
.cal-select select,
.cal-day,
.cal-form__bar,
.cal-water .nu-bar__track {
  border-radius: 0;
  clip-path: var(--cut-clip);
}

.cal-head__title    { --cut: 8px; }
.cal-step           { --cut: 8px; }
.cal-ribbon         { --cut: 8px; }
.cal-cell           { --cut: 6px; }
.cal-cell__bar      { --cut: 1px; }
.cal-cell__open     { --cut: 3px; }
.cal-fold           { --cut: 6px; }
.cal-seg            { --cut: 10px; }
.cal-seg__btn       { --cut: 7px; }
.cal-sec__count     { --cut: 5px; }
.cal-plan__row      { --cut: 7px; }
.cal-plan__mark     { --cut: 3px; }
.cal-item           { --cut: 7px; }
.cal-item__tag      { --cut: 5px; }
.cal-badge          { --cut: 5px; }
.cal-badge__bar     { --cut: 2px; }
.cal-copy           { --cut: 7px; }
.cal-tl__item       { --cut: 7px; }
.cal-tl__chip       { --cut: 5px; }
.cal-tl__band-count { --cut: 4px; }
.cal-chip           { --cut: 9px; }
.cal-bal__track     { --cut: 2px; }
.cal-year__cell     { --cut: 2px; }
.cal-year__key i    { --cut: 2px; }
.cal-opt__box       { --cut: 5px; }
.cal-jump__cell     { --cut: 8px; }
.cal-goal           { --cut: 7px; }
.cal-mention        { --cut: 7px; }
.cal-band__link     { --cut: 8px; }
.cal-kind           { --cut: 9px; }
.cal-input          { --cut: 7px; }
.cal-select select  { --cut: 7px; }
.cal-day            { --cut: 5px; }
.cal-form__bar     { --cut: 12px; }

/* ---------- Nachtrag: was davon ein KNOPF ist ----------------------------

   In der Liste oben standen fünf Dinge, die keine Flächen sind,
   sondern Knöpfe: der Monatsname (er öffnet die Monatsauswahl), die
   beiden Schrittpfeile, der Griff, der das Raster zusammenklappt, der
   Kopierknopf und die Bereichsfilter.

   Ein Rechteck mit abgeschnittenen Ecken IST ein Sechseck – und das
   Sechseck gehört hier der Fläche. Sie werden deshalb eckig. Alle sind
   unter dreißig Pixeln oder tragen ein Zeichen; einen Schnitt hätten
   sie ohnehin nicht vertragen, er liefe quer hindurch. */
.cal-head__title,
.cal-step,
.cal-fold,
.cal-copy,
.cal-chip {
  border-radius: 0;
  clip-path: none;
}