/* =========================================================
   Life Archive – Journal

   Farben wie in Meditation, Fitness und Nutrition aus AppColors,
   nur mit den beiden Gelbtönen des Journals:
     --accent-app  #f6d68a  Flächen, Titel, Knöpfe   (journalFill)
     --accent-deep #e8c454  Rahmen, Linien, Marken   (journalStroke)

   Kein Wert steht hier fest: die beiden Zeilen unter `.jr` sind
   die einzige Stelle, an der die Farbe gesetzt wird, und sie holt
   sie aus var(--c-journal). Alles Weitere rechnet damit – deshalb
   stimmt der E-ink-Modus, ohne dass er hier vorkäme.

   Formen wie überall (styles/components.css):
     eine FLÄCHE trägt den Eckschnitt und keinen Sockel
     ein KNOPF trägt den Sockel und geht beim Drücken ein
   Karten und Popups sind die geteilten Bausteine (.mnt-card, .pop__*).

   Reihenfolge unten wie auf dem Bildschirm:
     Gemeinsames · Today · Entries · Progress · Editor
   ========================================================= */

.jr {
  --accent-app: var(--c-journal);
  --accent-deep: var(--c-journal-stroke);
}

/* Popups des Moduls erben die Akzente über die Ebenen-Klasse. */
.modal-layer.jr,
.nt-toast.jr {
  --accent-app: var(--c-journal);
  --accent-deep: var(--c-journal-stroke);
}

/* Icons ohne eigene Farbe: die schwarzen SVGs dienen als Maske,
   eingefärbt wird über den Hintergrund. So folgen Pfeile, Stern und
   Dreipunkt dem Akzent, statt invertiertes Weiß zu bleiben. */
.jr-arrow,
.jr-star,
.jr-rowmenu,
.jr-sec__mark {
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

/* ---------- Gemeinsames: Abschnitte, Schalter, Listen ---------------------- */

/* Überschrift über einer Liste – dieselbe Zeile wie .nu-sec in
   Nutrition: eine Karte je Monat wären zwölf Rahmen für zwölf
   Listen. */
.jr-sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 0 8px;
}

.jr-sec__mark {
  width: 15px;
  height: 15px;
  flex: none;
  align-self: center;
  margin-inline-end: -4px;
  background: var(--text-muted);
}

.jr-sec > .jr-sec__mark + .jr-sec__title { margin-inline-end: auto; }

.jr-sec__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.jr-sec__count,
.jr-sec__right { font-size: 12.5px; color: var(--text-faint); }

.jr-seclink {
  color: var(--accent-app);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.jr-seclink:hover { text-decoration: underline; }

/* Segmentschalter – ein Bildschirm, drei Abschnitte. Der Schnitt
   sitzt am Rahmen, nicht an den Stücken darin: sonst stünden drei
   Sechsecke in einem Sechseck. Und kein Sockel – ein Segment
   schaltet um, es handelt nicht. */
.jr-seg {
  --cut: 9px;
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  padding: 3px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}

.jr-seg__item {
  flex: 1;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out);
}

.jr-seg__item:hover { background: rgba(var(--o), .05); }

.jr-seg__item.is-on {
  background: var(--accent-app);
  color: var(--ink);
  font-weight: 600;
}

/* Das Sechseck vor einer Zeile – dieselbe Silhouette wie die
   Bereichszeichen in der Leiste. */
.jr-hexmark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--accent-app);
}

.jr-hexmark img { width: 17px; filter: brightness(0) saturate(100%); }

.jr-hexmark--lg { width: 54px; height: 54px; }
.jr-hexmark--lg img { width: 26px; }

/* ---------- Listen ---------------------------------------------------------- */

.jr-list { display: grid; }

.jr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
}

.jr-row:last-child { border-bottom: 0; }

.jr-row__open {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 2px 0;
  text-align: start;
}

.jr-row__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  color: var(--g-09);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jr-row__meta,
.jr-row__text {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jr-row__meta { color: var(--text-dim); }
.jr-row__text { color: var(--text-faint); }

.jr-row__open:hover .jr-row__title { color: var(--accent-app); }

/* Das Schloss an einer gesperrten Zeile – dieselbe Zeichnung wie im
   Hinweis über einem gesperrten Eintrag, nur kleiner. */
.jr-row__lock {
  width: 10px;
  height: 8px;
  flex: none;
  position: relative;
  border-radius: 1.5px;
  background: var(--text-dim);
}

.jr-row__lock::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  bottom: 100%;
  width: 7px;
  height: 5px;
  transform: translateX(-50%);
  border: 1.5px solid var(--text-dim);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.jr-star {
  width: 22px;
  height: 22px;
  flex: none;
  background: rgba(var(--o), .26);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.jr-star.is-on { background: var(--accent-app); }
button.jr-star:hover { background: var(--accent-deep); }
button.jr-star:active { transform: scale(.86); }

/* Der Dreipunkt an einer Zeile: von hier aus lassen sich Sperren und
   Löschen erreichen, ohne den Eintrag zu öffnen. */
.jr-rowmenu {
  width: 22px;
  height: 22px;
  flex: none;
  background: rgba(var(--o), .5);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.jr-rowmenu:hover,
.jr-rowmenu:focus-visible { background: var(--accent-app); }
.jr-rowmenu:active { transform: scale(.86); }

/* Die Zeichnung bleibt 22 Pixel, die Fläche zum Treffen wächst auf
   32: die Maske schneidet nur, was man sieht, nicht, wo man tippt.
   Der Dreipunkt ist der Weg zum Löschen – er muss mit dem Daumen
   zu treffen sein, nicht nur mit dem Mauszeiger. */
.jr-rowmenu {
  width: 32px;
  height: 32px;
  margin: -5px -5px -5px 0;
  -webkit-mask-size: 22px;
          mask-size: 22px;
}

.jr-rowmenu:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Ein Etikett an einer Zeile – „quick start" an einer Vorlage.
   Eine Fläche, also der Eckschnitt und kein Sockel; rund ist in
   der ganzen App nur der zentrale Menü-Knopf. */
.jr-tag {
  --cut: 5px;
  flex: none;
  padding: 3px 8px;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--accent-deep) 22%, transparent);
  font-size: max(var(--fs-floor), 10px);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-app);
}

/* Ein breiter, handelnder Knopf über einer Liste. */
.jr-wide {
  display: flex;
  width: 100%;
  margin-bottom: 6px;
}

.jr-note {
  margin-bottom: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* ---------- Today: Datumszeile ---------------------------------------------- */

/* Schmal und leise. Dieselbe Zeile wie in Nutrition – ein Datum,
   zwei Pfeile –, damit der Wechsel zwischen den Bereichen nichts zu
   lernen kostet. */
.jr-datebar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.jr-datebar__body {
  flex: 1;
  display: grid;
  gap: 1px;
  padding: 4px 8px;
  text-align: center;
}

.jr-datebar__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--g-04);
}

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

.jr-datebar__body:not([disabled]):hover .jr-datebar__sub { color: var(--accent-app); }

.jr-arrow {
  width: 26px;
  height: 26px;
  flex: none;
  background: var(--accent-app);
  opacity: .85;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

/* Dieselben Icons, für die linke Seite um 180° gedreht. */
.jr-arrow--flip { transform: rotate(180deg); }

.jr-arrow:hover { opacity: 1; }
.jr-arrow:active { transform: scale(.88); }
.jr-arrow--flip:active { transform: rotate(180deg) scale(.88); }

/* ---------- Today: der Kopf --------------------------------------------------- */

/* Der Blickfang. Eine Fläche mit Eckschnitt, und darin als einziges
   kräftig Gefärbtes der Knopf – wer den Bereich öffnet, will
   schreiben. Das Sechseck darüber ist Zeichen, nicht Konkurrenz. */
.jr-hero {
  --cut: 16px;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 20px 22px;
  margin-bottom: 16px;
  background: var(--surface);
  clip-path: var(--cut-clip);
  text-align: center;
}

.jr-hero__state {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--g-04);
}

.jr-hero__hint {
  max-width: 30ch;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.jr-hero__go {
  --cut: 10px;
  width: 100%;
  max-width: 320px;
  margin-top: 12px;
  padding: 14px 18px;
  font-size: 15px;
}

/* Steht an dem Tag schon etwas, tritt der Eintrag nach vorn: links
   ausgerichtet wie eine Zeile, nicht mittig wie ein Plakat. */
.jr-hero--filled {
  justify-items: stretch;
  gap: 4px;
  padding: 18px 18px 16px;
  text-align: start;
}

/* Kopfzeile der gefüllten Karte: der Stand links, der Dreipunkt
   rechts – dieselbe Anordnung wie in jeder Zeile darunter. */
.jr-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.jr-hero__kicker {
  font-size: max(var(--fs-floor), 11px);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-app);
}

.jr-hero__title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--g-02);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jr-hero--filled .jr-hero__hint { max-width: none; }
.jr-hero--filled .jr-hero__go { max-width: none; margin-top: 14px; }

/* Der zweite Weg daneben – ohne Fläche, damit er nicht mit dem
   Knopf darüber um denselben Blick streitet. */
.jr-hero__more {
  margin-top: 10px;
  padding: 4px 0;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
}

.jr-hero__more:hover { color: var(--accent-app); }

.jr-list--hero {
  margin-top: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(var(--o), .08);
}

/* ---------- Today: Schnellstarts ---------------------------------------------- */

/* Die Vorlage, die man jeden Tag nimmt, liegt hier – nicht hinter
   dem Popup. Höchstens vier davon; welche, entscheidet der Nutzer
   (das Stiftzeichen am Ende). */
.jr-quicks {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.jr-quicks::-webkit-scrollbar { display: none; }

.jr-quick {
  --cut: 8px;
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 96px;
  padding: 9px 11px;
  background: var(--btn-quiet);
  clip-path: var(--cut-clip);
  text-align: start;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.jr-quick:hover { background: var(--btn-quiet-hover); }
.jr-quick:active { transform: scale(.97); }

.jr-quick__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-06);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.jr-quick--edit {
  flex: none;
  min-width: 0;
  place-items: center;
  padding: 9px 12px;
}

.jr-quick--edit img { width: 16px; opacity: .55; }
.jr-quick--edit:hover img { opacity: 1; }

.jr-quicks__empty {
  flex: 1;
  align-self: center;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* ---------- Today: die Serie als Zeile ----------------------------------------- */

.jr-streak {
  --cut: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  margin-bottom: 4px;
  background: var(--surface);
  clip-path: var(--cut-clip);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out);
}

.jr-streak:hover { background: var(--surface-2); }

/* Das Zeichen ist ein kleines Sechseck in Akzentfarbe – kein Symbol,
   weil die Zahl daneben schon sagt, worum es geht. */
.jr-streak__mark {
  width: 14px;
  height: 16px;
  flex: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--accent-app);
}

.jr-streak__body { display: grid; gap: 2px; flex: 1; min-width: 0; }

.jr-streak__now { font-size: 14px; font-weight: 600; color: var(--g-06); }
.jr-streak__meta { font-size: max(var(--fs-floor), 11.5px); color: var(--text-faint); }

.jr-streak__tail { color: var(--text-faint); font-size: 17px; }

/* ---------- Entries: Suche ------------------------------------------------------ */

.jr-search {
  --cut: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  margin-bottom: 12px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}

/* 16px, nicht kleiner: darunter zoomt iOS beim Hineintippen in das
   Feld hinein und die Seite steht danach schief – dieselbe Größe wie
   im Suchfeld des Archive. */
.jr-search__input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.jr-search__input::placeholder { color: var(--text-faint); }
.jr-search__input:focus { outline: none; }
.jr-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent-deep); }

/* Das Kreuz des Browsers passt nicht zur Form – das eigene schon. */
.jr-search__input::-webkit-search-cancel-button { display: none; }

.jr-search__clear {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
}

.jr-search__clear:hover { color: var(--accent-app); }

.jr-found {
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--text-dim);
}

/* ---------- Progress: die Serie als Karte --------------------------------------- */

/* Drei Zahlen, und die erste ist die größte: die laufende Serie ist
   das, wofür man den Reiter öffnet. */
.jr-streakcard {
  --cut: 16px;
  display: grid;
  gap: 16px;
  padding: 22px 18px 18px;
  margin-bottom: 4px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}

.jr-streakcard__now {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.jr-streakcard__value {
  font-family: var(--font-mono, inherit);
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent-app);
}

.jr-streakcard__unit {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--g-09);
}

.jr-streakcard__note { font-size: 12px; color: var(--text-dim); }

.jr-figs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--o), .08);
}

.jr-figs--wide { margin-top: 16px; }

.jr-fig { display: grid; gap: 3px; text-align: center; }

.jr-fig dt {
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.jr-fig dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--g-06);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Progress: das Jahr --------------------------------------------------- */

/* Zwölf Balken. Die Höhe misst sich am stärksten Monat, nicht an
   einer festen Zahl – sonst wären drei Einträge im Januar und
   dreißig im Juni derselbe Strich. */
.jr-bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 4px;
  height: 132px;
  margin-bottom: 4px;
}

.jr-bar {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  height: 100%;
  min-width: 0;
}

.jr-bar__track {
  display: flex;
  align-items: flex-end;
  height: 100%;
  background: rgba(var(--o), .05);
}

.jr-bar__fill {
  width: 100%;
  min-height: 2px;
  background: var(--accent-deep);
}

.jr-bar.is-now .jr-bar__fill { background: var(--accent-app); }

.jr-bar__label {
  font-size: max(var(--fs-floor), 9.5px);
  text-align: center;
  color: var(--text-faint);
  overflow: hidden;
}

.jr-bar.is-now .jr-bar__label { color: var(--accent-app); font-weight: 600; }

/* ---------- Popups: Vorlagen und Schnellstarts ------------------------------------ */

/* Die Zeilen selbst kommen aus styles/doc.css (.doc-pick) – hier steht
   nur, wie „Blank" und die Liste darunter angeordnet sind. */

.jr-tpls { display: grid; gap: 8px; }

.jr-tpls__list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  max-height: 46dvh;
  overflow-y: auto;
  border-top: 1.5px solid var(--accent-app);
  scrollbar-width: thin;
}

/* Ohne „Blank" darüber gibt es nichts abzutrennen. */
.jr-tpls__list--tall {
  margin-top: 6px;
  padding-top: 0;
  max-height: 52dvh;
  border-top: 0;
}

/* Eine Zeile mit Haken statt Pfeil: die Schnellstarts sind eine
   Mehrfachauswahl, keine Abzweigung. Die Marke links füllt sich,
   sobald sie gewählt ist. */
.jr-check .doc-pick__mark {
  border: 1.5px solid var(--accent-deep);
  background: none;
}

.jr-check.is-on .doc-pick__mark { background: var(--accent-app); }
.jr-check.is-on .doc-pick__name { color: var(--accent-app); }

/* ---------- Editor-Bildschirm ------------------------------------------------------ */

/* Der Editor selbst steht in styles/doc.css und gehört allen Umgebungen.
   Journal-spezifisch ist nur die Zeile über dem Dokument.

   Stern und Dreipunkt stehen rechts in der Topbar des Bereichs
   (.sh-tools in styles/shell.css) – der Editor hat keine eigene
   Kopfzeile. */

/* Datumszeile über dem Eintrag: links, wohin er gehört, rechts sein
   Dreipunkt – sperren, doppeln, löschen. */
.jr-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.jr-meta__text {
  min-width: 0;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.jr-editor__doc { margin-top: 10px; }

/* Hinweis auf einen gesperrten Eintrag */

.jr-lock {
  --cut: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  box-shadow: inset 0 0 0 1.5px var(--accent-deep);
  background: color-mix(in srgb, var(--accent-deep) 10%, transparent);
  font-size: 12.5px;
  color: var(--accent-app);
}

.jr-lock__mark {
  width: 13px;
  height: 11px;
  flex: none;
  position: relative;
  border-radius: 2px;
  background: var(--accent-app);
}

/* der Bügel des Schlosses */
.jr-lock__mark::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  bottom: 100%;
  width: 9px;
  height: 7px;
  transform: translateX(-50%);
  border: 1.5px solid var(--accent-app);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

/* ---------- Nachtrag: der Schnellstart ist ein Knopf ---------------------

   .jr-quick trug den Eckschnitt der Flächen. Es ist aber kein Feld und
   keine Karte, sondern der Knopf, mit dem ein Eintrag beginnt – eckig,
   wie jeder Knopf dieser App. */
.jr-quick {
  border-radius: 0;
  clip-path: none;
}

/* Night Pond (0.6.0 beta): und darum auch ein Knopf mit Sockel, der beim
   Druck einsinkt – getönt wie das „+" auf Home (--tint-*, styles/pond.css).
   Vorher eine flache graue Fläche, die beim Tippen nur schrumpfte. Der Name
   steht in der Schrift des Tons, die Vorlage darunter leise. */
.jr-quick {
  --depth: 2.5px;
  position: relative;
  isolation: isolate;
  margin: 0 var(--depth) var(--depth) 0;
  background: none;
  filter: var(--tint-glow);
  transition: transform var(--dur-fast) var(--ease-out);
}

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

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

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

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

.jr-quick .jr-quick__name { color: var(--tint-ink); }
.jr-quick .jr-quick__meta { color: var(--text-muted); }
.jr-quick--edit { color: var(--tint-ink); }
.jr-quick--edit .la-glyph { width: 16px; height: 16px; }

/* =========================================================
   Überarbeitung: Handgriffe, die antworten

   Die Liste war still: ein Druck öffnete, alles andere lag hinter
   dem Dreipunkt. Was hier dazukommt, antwortet sichtbar auf jeden
   Griff – eine Zeile gibt beim Wischen nach, der Stern springt,
   eine gelöschte Zeile gleitet hinaus, statt dass die Liste springt.
   ========================================================= */

/* ---------- Wischen ---------------------------------------------------------- */

.jr-row[data-swipe] {
  position: relative;
  isolation: isolate;
  /* Senkrecht scrollt die Liste, waagrecht gehört die Geste der Zeile. */
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
  /* Was beim Wischen über den Rand rückt, wird an der Zeile
     abgeschnitten – sonst schöbe es die ganze Seite seitwärts. */
  overflow-x: clip;
  overflow-clip-margin: 6px;
  transition: height var(--dur) var(--ease-out),
              padding var(--dur) var(--ease-out),
              opacity var(--dur) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

/* Alles, was man sieht, rückt mit dem Finger; die Fläche dahinter bleibt. */
.jr-row[data-swipe] > :not(.jr-row__swipe) {
  transform: translateX(var(--sx, 0px));
  transition: transform var(--dur) var(--ease-out);
}

.jr-row.is-swiping > :not(.jr-row__swipe) { transition: none; }

.jr-row__swipe {
  position: absolute;
  inset: 1px 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  opacity: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: opacity var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.jr-row.is-swiping .jr-row__swipe,
.jr-row.is-leaving .jr-row__swipe { opacity: 1; }

.jr-row__swipe-r,
.jr-row__swipe-l {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

/* Nach links: Löschen, rot – erst leise, über der Schwelle voll. */
.jr-row[data-dir="left"] .jr-row__swipe {
  background: rgba(242, 108, 108, .14);
  color: var(--state-bad);
}
.jr-row[data-dir="left"] .jr-row__swipe-l,
.jr-row.is-leaving .jr-row__swipe-l { opacity: 1; margin-inline-start: auto; }
.jr-row[data-dir="left"].is-armed .jr-row__swipe,
.jr-row.is-leaving .jr-row__swipe {
  background: var(--state-bad);
  color: var(--on-accent);
}

/* Nach rechts: die zweite Handlung, in der Farbe des Bereichs. */
.jr-row[data-dir="right"] .jr-row__swipe {
  background: color-mix(in srgb, var(--accent-deep) 16%, transparent);
  color: var(--accent-app);
}
.jr-row[data-dir="right"] .jr-row__swipe-r { opacity: 1; }
.jr-row[data-dir="right"].is-armed .jr-row__swipe {
  background: var(--accent-app);
  color: var(--ink);
}

.jr-row.is-armed .jr-row__swipe-l,
.jr-row.is-armed .jr-row__swipe-r { transform: scale(1.08); }

/* Hinaus: zur Seite, dann schließt sich die Lücke. */
.jr-row.is-leaving {
  height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  border-bottom-width: 0;
}
.jr-row.is-leaving > :not(.jr-row__swipe) { transform: translateX(var(--sx-out, -100%)); }

/* Langes Drücken: die Zeile gibt kurz nach, bevor das Menü kommt. */
.jr-row.is-held { background: rgba(var(--o), .06); }

/* Ein Druck auf die Zeile ist zu sehen, nicht nur zu ahnen. */
.jr-row__open:active .jr-row__title { color: var(--accent-app); }

/* ---------- Der Stern springt ------------------------------------------------- */

@keyframes jr-star-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35) rotate(-8deg); }
  70%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

.jr-star.is-pop { animation: jr-star-pop 360ms var(--ease-out); }

/* Der Stern ist 22px Zeichnung, aber 32px Treffer – wie der Dreipunkt. */
.jr-star {
  width: 32px;
  height: 32px;
  margin: -5px 0;
  -webkit-mask-size: 22px;
          mask-size: 22px;
}

/* ---------- Werkzeugzeile: Suche + Select -------------------------------------- */

.jr-toolrow {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}

.jr-toolrow .jr-search { flex: 1; min-width: 0; margin-bottom: 0; }
.jr-selectbtn { flex: none; min-width: 72px; }
.jr-selectbtn[aria-pressed="true"] {
  --btn-face: var(--accent-app);
  --btn-face-hover: var(--accent-deep);
  color: var(--ink);
}

/* ---------- Auswahlmodus -------------------------------------------------------- */

.jr-list.is-selecting .jr-row__open {
  position: relative;
  padding-inline-start: 34px;
}

/* Die Marke: ein Quadrat ohne Schnitt – klein genug, dass der Schnitt
   das Häkchen zerschnitte (Größenuntergrenze der Formsprache). */
.jr-row__check {
  position: absolute;
  inset-inline-start: 2px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  box-shadow: inset 0 0 0 1.5px var(--accent-deep);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.jr-row.is-picked .jr-row__check {
  background: var(--accent-app);
  box-shadow: none;
}

.jr-row.is-picked .jr-row__check::after {
  content: "";
  position: absolute;
  inset-inline-start: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.jr-row.is-picked { background: color-mix(in srgb, var(--accent-deep) 10%, transparent); }
.jr-row.is-picked .jr-row__title { color: var(--accent-app); }

/* Der Streifen – fest unter der Topbar, wie im Termin-Formular. */
.jr-selbar {
  --cut: 10px;
  position: fixed;
  inset-inline-start: 50%;
  top: calc(var(--safe-top) + var(--sh-top-h) + 6px);
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(var(--flow), calc(100vw - 2 * var(--gutter)));
  padding: 8px 10px;
  background: var(--surface-3);
  clip-path: var(--cut-clip);
  filter: drop-shadow(0 6px 18px rgba(var(--o-deep), .6));
  animation: jr-bar-in var(--dur) var(--ease-out);
}

@keyframes jr-bar-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.jr-selbar__count {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jr-selbar .btn3d--sm { padding: 7px 10px; }

/* Löschen ist der Auslöser: rote Schrift auf stiller Fläche. */
.jr-act--danger {
  /* Auf dem Streifen (--surface-3) läge das Rot bei 4,49:1 – knapp
     unter AA. Eine leicht abgedunkelte Fläche hebt es auf 5,2:1, und
     die Fläche bleibt still. */
  --btn-face: rgba(var(--o-deep), .22);
  --btn-face-hover: rgba(242, 108, 108, .18);
  color: var(--state-bad);
}

/* Platz für den Streifen, damit die Suche nicht darunter liegt. */
#jr-entries.is-selecting { padding-top: 58px; }

@media (min-width: 900px) {
  body[data-shell] .jr-selbar { inset-inline-start: calc(50% + var(--rail-w) / 2); }
}

/* ---------- Vorlagen-Zeile ------------------------------------------------------ */

.jr-row--tpl { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }

.jr-row__outline {
  font-size: 12.5px;
  color: var(--accent-app);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jr-rowuse { flex: none; }

.jr-hint {
  margin: 14px 0 0;
  font-size: max(var(--fs-floor), 11.5px);
  text-align: center;
  color: var(--text-faint);
}

/* ---------- Vorlagenauswahl: Zeile + Stift ---------------------------------------- */

.jr-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: stretch;
}

.jr-pick__edit {
  --depth: 2.5px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  margin-inline-end: var(--depth);
  border: 0;
  border-radius: 0;
  background: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

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

.jr-pick__edit::before {
  background: rgba(var(--o), .22);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.jr-pick__edit::after { background: var(--field-bg); }
.jr-pick__edit:hover::after { background: var(--g-42); }
.jr-pick__edit:active { transform: translate(var(--depth), var(--depth)); }
.jr-pick__edit:active::before { opacity: 0; }
.jr-pick__edit img { width: 18px; }

.jr-tpls__manage {
  justify-self: center;
  margin-top: 6px;
  padding: 8px 4px;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-app);
}

.jr-tpls__manage:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Schnellstarts: die Marke trägt die Stelle in der Reihe. */
.jr-check .doc-pick__mark {
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

@keyframes jr-deny {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.jr-check.is-denied { animation: jr-deny 240ms var(--ease-out); }

/* Die Menüzeilen mit Unterzeile stehen seit 0.6.0 beta im Halte-Menü
   der App (.hold-pop__label, styles/components.css). */

/* ---------- Editor: gespeichert, Name der Vorlage ---------------------------------- */

.jr-meta__status {
  transition: color var(--dur) var(--ease-out);
}

.jr-meta__status.is-fresh { color: var(--accent-app); }

.jr-tplname {
  --cut: 10px;
  display: grid;
  gap: 2px;
  margin-top: 12px;
  padding: 8px 14px 6px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}

.jr-tplname:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent-deep); }

.jr-tplname__label {
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.jr-tplname__input {
  width: 100%;
  padding: 2px 0 4px;
  border: 0;
  background: none;
  color: var(--accent-app);
  font: inherit;
  font-size: 18px;          /* über 16px: iOS zoomt beim Tippen nicht */
  font-weight: 600;
}

.jr-tplname__input::placeholder { color: var(--text-faint); font-weight: 500; }
.jr-tplname__input:focus { outline: none; }

.jr-tplname__hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

@media (prefers-reduced-motion: reduce) {
  .jr-star.is-pop,
  .jr-check.is-denied,
  .jr-selbar { animation: none; }
}

/* ---------- E-ink ---------------------------------------------------------------- */

html[data-eink] .jr-row[data-dir="left"] .jr-row__swipe,
html[data-eink] .jr-row[data-dir="right"] .jr-row__swipe {
  background: #ffffff;
  color: #000000;
  box-shadow: inset 0 0 0 1.5px #000000;
}

html[data-eink] .jr-row.is-armed .jr-row__swipe,
html[data-eink] .jr-row.is-leaving .jr-row__swipe {
  background: #000000;
  color: #ffffff;
}

html[data-eink] .jr-selbar { filter: none; background: #ffffff; outline: 1.5px solid #000000; }
html[data-eink] .jr-act--danger { color: #000000; text-decoration: underline; }
html[data-eink] .jr-row.is-picked { background: #eeeeee; }
html[data-eink] .jr-row.is-picked .jr-row__check { background: #000000; }
html[data-eink] .jr-row.is-picked .jr-row__check::after { border-color: #ffffff; }
html[data-eink] .jr-pick__edit::before { background: #000000; }
html[data-eink] .jr-pick__edit::after { background: #ffffff; box-shadow: inset 0 0 0 1.5px #000000; }

/* Die Liste scrollt und schneidet deshalb alles ab, was ueber ihren
   Rand ragt - auch den Sockel des Stifts rechts. Etwas Luft rechts und
   unten, dann steht er ganz da. */
.jr-tpls__list { padding-inline-end: 4px; padding-bottom: 4px; }

/* ---------- Vorlagenauswahl: Karten statt gleichförmiger Zeilen ------------------

   Vorher trug jede Zeile dasselbe gelbe Quadrat, und darunter stand
   eine Zahlenkette. Jetzt sagt das Zeichen, was die Vorlage ist (Text
   oder Liste), die Marken darunter, was sie enthält, und {{date}} steht
   als das Datum da, das der Eintrag bekommt – hervorgehoben, weil es
   mitwandert. Fläche: Schnitt oben links und unten rechts wie jede
   Listenzeile; das Zeichen darin ist 36px und trägt einen kleinen. */

.jr-tcard {
  --cut: 12px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--accent-app) 9%, transparent), transparent 55%),
    var(--field-bg);
  clip-path: var(--cut-clip);
  color: var(--text);
  font: inherit;
  text-align: start;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.jr-tcard:hover { background-color: var(--g-42); }
.jr-tcard:active { transform: scale(.985); }
.jr-tcard:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -2px; }

.jr-tcard__icon {
  --cut: 7px;
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: color-mix(in srgb, var(--accent-app) 18%, transparent);
  clip-path: var(--cut-clip);
  transition: background-color var(--dur) var(--ease-out);
}

.jr-tcard__icon span {
  width: 20px;
  height: 20px;
  background: var(--accent-app);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.jr-tcard:hover .jr-tcard__icon { background: color-mix(in srgb, var(--accent-app) 28%, transparent); }

.jr-tcard__body { display: grid; gap: 4px; min-width: 0; flex: 1; }

.jr-tcard__name {
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jr-tcard__outline {
  font-size: 12.5px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jr-tcard__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }

/* „Most used" – gelesen, nicht gedrückt: kleine Fläche ohne Schnitt. */
.jr-tcard__tag {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  padding: 3px 10px 3px 12px;
  background: var(--accent-app);
  color: var(--ink);
  font-size: max(var(--fs-floor), 10px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.jr-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(var(--o), .06);
  color: var(--text-dim);
  font-size: max(var(--fs-floor), 11px);
  line-height: 1.3;
  white-space: nowrap;
}

.jr-chip__icon {
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.jr-chip--live {
  background: color-mix(in srgb, var(--accent-app) 16%, transparent);
  color: var(--accent-app);
  font-weight: 600;
}

/* Das Datum aus {{date}}: Akzent, gepunktet unterstrichen – es ist
   ein Wert, der jeden Tag neu eingesetzt wird, kein getippter Text. */
.jr-live {
  color: var(--accent-app);
  text-decoration: underline dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  font-variant-numeric: tabular-nums;
}

/* Blank: dieselbe Karte, aber gestrichelt umrandet gedacht – hier als
   stille Fläche ohne Verlauf, damit die eigenen Vorlagen führen. */
.jr-tcard[data-template=""] { background: var(--field-bg); }
.jr-tcard[data-template=""] .jr-tcard__icon { background: rgba(var(--o), .07); }
.jr-tcard[data-template=""] .jr-tcard__icon span { background: var(--text); }

.jr-tpls__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-size: max(var(--fs-floor), 11px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.jr-tpls__head::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, var(--accent-app), transparent);
}

.jr-tpls__count {
  padding: 1px 7px;
  background: color-mix(in srgb, var(--accent-app) 18%, transparent);
  color: var(--accent-app);
  font-variant-numeric: tabular-nums;
}

.jr-tpls__head + .jr-tpls__list {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 0;
}

/* Karten treten nacheinander ein – kurz, und nicht mit Reduce motion. */
.pop--tpl .jr-tcard { animation: jr-tcard-in .32s var(--ease-out) both; }
.pop--tpl .jr-pick:nth-child(2) .jr-tcard { animation-delay: .04s; }
.pop--tpl .jr-pick:nth-child(3) .jr-tcard { animation-delay: .08s; }
.pop--tpl .jr-pick:nth-child(n+4) .jr-tcard { animation-delay: .12s; }

@keyframes jr-tcard-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pop--tpl .jr-tcard { animation: none; }
}
html[data-motion="reduce"] .pop--tpl .jr-tcard { animation: none; }

/* E-ink: keine Tönungen, nur Schwarz auf Weiß mit Rand-Ersatz. */
html[data-eink] .jr-tcard { background: #ffffff; box-shadow: inset 0 0 0 1.5px #000000; }
html[data-eink] .jr-tcard__icon,
html[data-eink] .jr-chip,
html[data-eink] .jr-tpls__count { background: #ffffff; box-shadow: inset 0 0 0 1px #000000; color: #000000; }
html[data-eink] .jr-tcard__icon span,
html[data-eink] .jr-tcard[data-template=""] .jr-tcard__icon span { background: #000000; }
html[data-eink] .jr-chip--live,
html[data-eink] .jr-tcard__tag { background: #000000; color: #ffffff; }
html[data-eink] .jr-live { color: #000000; }
html[data-eink] .jr-tpls__head::after { background: #000000; }