/* =========================================================
   Life Archive – Cue Diary

   Dieselben Bausteine wie überall (.mnt-stats, .mnt-card, .pop aus
   styles/components.css, .mnt-hero aus der Meditation), nur mit
   den beiden Rosétönen aus AppColors:
     --accent-app  #f9b4c9  Flächen, Titel, Knöpfe   (cueDiaryFill)
     --accent-deep #f2729f  Rahmen, Linien, Marken   (cueDiaryStroke)
   ========================================================= */

.cd {
  --accent-app: var(--c-cue-diary);
  --accent-deep: var(--c-cue-diary-stroke);
}

/* Popups des Moduls erben die Akzente über die Ebenen-Klasse. */
.modal-layer.cd {
  --accent-app: var(--c-cue-diary);
  --accent-deep: var(--c-cue-diary-stroke);
}

/* ---------- Kennzahlen ------------------------------------------------------- */

/* Der Name des häufigsten Cues steht in der Beschriftung und darf
   dort auf zwei Zeilen umbrechen. */
.cd .mnt-stat { display: flex; flex-direction: column; justify-content: center; }
.cd .mnt-stat__label { text-wrap: balance; }

.cd-delta {
  margin-inline-start: 4px;
  font-size: max(var(--fs-floor), 11.5px);
  font-weight: 600;
  letter-spacing: 0;
}

/* Weniger Intensität ist die gute Richtung. */
.cd-delta.is-down { color: #4ade80; }
.cd-delta.is-up { color: #f26c6c; }

/* ---------- Track Cue ---------------------------------------------------------- */

.cd-track {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 15px 16px;
  border-radius: 8px;
  background: var(--accent-deep);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: filter var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.cd-track:hover { filter: brightness(1.08); }
.cd-track:active { transform: scale(.98); }

/* =========================================================
   Fragen-Chat
   ========================================================= */

.cd-topic {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}

.cd-topic__name { font-size: 18px; color: var(--accent-app); min-width: 0; overflow-wrap: anywhere; }
.cd-topic__step { font-size: 12px; letter-spacing: .08em; color: var(--text-faint); }

.cd-progress {
  height: 3px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(var(--o), .09);
  overflow: hidden;
}

.cd-progress__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent-deep);
  transition: width 320ms var(--ease-out);
}

/* Verlauf */

.cd-thread {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding-bottom: 8px;
}

.cd-msg {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  animation: cd-msg-in 260ms var(--ease-out) both;
}

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

/* Frage – links, ruhig */
.cd-msg--ask {
  justify-self: start;
  border-bottom-left-radius: 5px;
  background: var(--surface);
  border: 1px solid rgba(var(--o), .07);
  color: var(--g-12);
}

/* Die Frage, die gerade dran ist */
.cd-msg--ask.is-current {
  border-color: var(--accent-deep);
  color: var(--g-02);
}

.cd-msg__label {
  display: block;
  margin-bottom: 3px;
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-app);
}

/* Antwort – rechts, in Modulfarbe */
.cd-msg--say {
  justify-self: end;
  border-bottom-right-radius: 5px;
  background: var(--accent-app);
  color: var(--ink);
  font-weight: 500;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Eingabe */

.cd-compose { display: grid; gap: 10px; margin-top: 6px; }

.cd-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.cd-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--field-bg);
  border: 1.5px solid rgba(var(--o), .10);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  resize: none;
  outline: none;
  overflow-y: auto;
}

.cd-input::placeholder { color: var(--text-faint); }
.cd-input:focus { border-color: var(--accent-deep); }

.cd-input--time { color-scheme: dark; }

.cd-send {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-app);
  transition: filter var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.cd-send img { width: 20px; }
.cd-send:hover { filter: brightness(1.08); }
.cd-send:active { transform: scale(.92); }

.cd-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.cd-chip {
  padding: 6px 12px;
  border: 1px solid rgba(var(--o), .14);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--g-11);
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}

.cd-chip:hover {
  border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent-deep) 14%, transparent);
}

.cd-chip:active { transform: scale(.96); }

.cd-skip {
  justify-self: start;
  font-size: 12.5px;
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cd-skip:hover { color: var(--accent-app); }

/* 0–10 */

.cd-scale {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 4px;
}

.cd-step {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--g-21);
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.cd-step:hover { border-color: var(--accent-deep); }

.cd-step.is-picked,
.cd-step:active {
  background: var(--accent-app);
  border-color: var(--accent-deep);
  color: var(--ink);
  transform: scale(.94);
}

.cd-scale__ends {
  display: flex;
  justify-content: space-between;
  font-size: max(var(--fs-floor), 11px);
  letter-spacing: .06em;
  color: var(--text-faint);
}

/* Feste Antworten */

.cd-choices { display: grid; grid-auto-flow: column; gap: 8px; }

.cd-choice {
  padding: 13px 10px;
  border: 1.5px solid var(--accent-deep);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-app);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.cd-choice:hover { background: color-mix(in srgb, var(--accent-deep) 16%, transparent); }

.cd-choice.is-picked,
.cd-choice:active {
  background: var(--accent-app);
  color: var(--ink);
  transform: scale(.97);
}

/* =========================================================
   Ergebnis
   ========================================================= */

.cd-result {
  margin-top: 22px;
  padding: 18px 16px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid rgba(var(--o), .07);
  border-top: 1.5px solid var(--accent-app);
}

.cd-result__head { display: grid; gap: 3px; text-align: center; }

.cd-result__cue {
  font-size: clamp(21px, 5.8vw, 25px);
  font-weight: 500;
  color: var(--accent-app);
}

.cd-result__time { font-size: 12.5px; color: var(--text-dim); }

.cd-gauge { display: grid; justify-items: center; gap: 8px; margin-top: 18px; }

.cd-gauge__value {
  font-family: var(--font-mono);
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.cd-gauge__max { font-size: 14px; font-weight: 400; color: var(--text-faint); }

.cd-gauge__bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--o), .08);
  overflow: hidden;
}

.cd-gauge__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent-app) 60%, transparent),
    var(--accent-deep));
  animation: cd-fill 620ms var(--ease-out) both;
}

@keyframes cd-fill { from { width: 0; } }

.cd-gauge__label {
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.cd-rows { display: grid; gap: 14px; }

.cd-row {
  display: grid;
  gap: 3px;
  padding-inline-start: 11px;
  border-inline-start: 2px solid var(--accent-deep);
}

.cd-row.is-empty { border-inline-start-color: rgba(var(--o), .12); }

.cd-row__label {
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-app);
}

.cd-row.is-empty .cd-row__label { color: var(--text-faint); }

.cd-row__text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--g-10);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cd-row.is-empty .cd-row__text { color: var(--text-faint); }

.cd-done {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--accent-deep);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  transition: filter var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.cd-done:hover { filter: brightness(1.08); }
.cd-done:active { transform: scale(.98); }

/* ---------- Anklickbarer Verlauf ------------------------------------------------ */

/* Beantwortete und übersprungene Zeilen springen zurück zu ihrer Frage. */
.cd-msg.is-editable {
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out),
              filter var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.cd-msg--ask.is-editable:hover { border-color: var(--accent-deep); }
.cd-msg--say.is-editable { position: relative; padding-inline-end: 32px; }
.cd-msg--say.is-editable:hover { filter: brightness(1.06); }
.cd-msg.is-editable:active { transform: scale(.98); }

.cd-msg.is-editable:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

/* Übersprungen: das „–" bleibt sichtbar, tritt aber zurück. */
.cd-msg--say.is-skipped {
  background: transparent;
  border: 1.5px dashed var(--accent-deep);
  color: var(--text-dim);
  font-weight: 400;
}

/* Stift als Hinweis, dass sich das ändern lässt */
.cd-msg__pen {
  position: absolute;
  inset-inline-end: 11px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  background: var(--ink);
  opacity: .5;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.cd-msg--say.is-skipped .cd-msg__pen { background: var(--accent-app); opacity: .7; }
.cd-msg.is-editable:hover .cd-msg__pen { opacity: 1; }

.cd-topic__mode {
  font-size: max(var(--fs-floor), 11px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.cd-hint { font-size: 12.5px; color: var(--text-faint); text-align: center; }

.cd-save {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--accent-deep);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  transition: filter var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.cd-save:hover { filter: brightness(1.08); }
.cd-save:active { transform: scale(.98); }

/* ---------- Vorschaukarten ------------------------------------------------------- */

.cd-cards { display: grid; gap: 8px; }

.cd-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--field-bg);
  text-align: start;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.cd-card:hover { background: var(--g-42); }
.cd-card:active { transform: scale(.99); }

.cd-card__body { display: grid; gap: 2px; min-width: 0; }

.cd-card__cue {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--accent-app);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.cd-card__text {
  font-size: 13.5px;
  color: var(--g-12);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die Überschrift je Auslöser macht jetzt der geteilte Baustein
   (.cd-sec aus app/cue-diary/ui.js) – hier bleibt nur der Abstand
   zwischen zwei Bündeln. */
.cd-group + .cd-group { margin-top: 16px; }


/* ---------- Archiv: Filter -------------------------------------------------------- */

.cd-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.cd-select { position: relative; display: block; min-width: 0; }

.cd-select select {
  width: 100%;
  padding: 8px 30px 8px 12px;
  border: 1.5px solid var(--accent-deep);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}

.cd-select select option { background: var(--surface); color: var(--text); }

.cd-select::after {
  content: "";
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-inline-end: 2.2px solid var(--text);
  border-bottom: 2.2px solid var(--text);
  transform: rotate(45deg);
  pointer-events: none;
}

.cd-field2 { display: grid; gap: 4px; min-width: 0; }

.cd-field2__label {
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.cd-date {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--accent-deep);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  color-scheme: dark;
}

.cd-date::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; cursor: pointer; }

.cd-reset {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.cd-reset:hover { border-color: var(--accent-deep); color: var(--accent-app); }

.cd-count {
  margin-bottom: 10px;
  font-size: max(var(--fs-floor), 11.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- Detailansicht: zwei Knöpfe -------------------------------------------- */

.cd-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 10px;
  margin-top: 20px;
}

.cd-actions .cd-done { margin-top: 0; }

.cd-done--ghost {
  background: transparent;
  border: 1.5px solid var(--accent-deep);
  color: var(--accent-app);
}

.cd-done--ghost:hover { background: color-mix(in srgb, var(--accent-deep) 14%, transparent); }

/* =========================================================
   Einstieg: der Bildschirm vor dem ersten Cue
   ========================================================= */

.cd-hero {
  margin-top: 26px;
  padding: 26px 20px 24px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 50% 0%,
      color-mix(in srgb, var(--accent-deep) 14%, transparent) 0%,
      transparent 70%),
    var(--surface);
  text-align: center;
}

/* Die Welle: eine gezeichnete Linie, kein Symbol aus einer Sammlung. */
.cd-hero__art {
  display: block;
  width: min(240px, 100%);
  height: auto;
  margin: 0 auto 18px;
  overflow: visible;
}

.cd-hero__base {
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 2 7;
}

.cd-hero__wave {
  stroke: var(--accent-app);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  animation: cd-draw 1400ms var(--ease-out) 120ms forwards;
}

.cd-hero__dot {
  fill: var(--accent-deep);
  stroke: var(--bg);
  stroke-width: 2;
  transform-origin: 88px 16px;
  opacity: 0;
  animation: cd-pop 420ms var(--ease-spring) 900ms forwards;
}

.cd-hero__spark {
  stroke: var(--accent-deep);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0;
  animation: cd-fade 420ms var(--ease-out) 1150ms forwards;
}

@keyframes cd-draw { to { stroke-dashoffset: 0; } }

@keyframes cd-pop {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes cd-fade { to { opacity: .8; } }

.cd-hero__title {
  margin-bottom: 12px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--accent-app);
  text-wrap: balance;
}

.cd-hero__text {
  max-width: 34em;
  margin: 0 auto 12px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--g-20);
  text-wrap: pretty;
}

.cd-hero__text--last { margin-bottom: 22px; color: var(--text-dim); }

/* Schwarz auf Rosé – der Kontrast liegt bei rund 7:1. */
.cd-hero__btn {
  display: block;
  width: 100%;
  padding: 16px;
  border-radius: 10px;
  background: var(--accent-deep);
  color: var(--ink);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: filter var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.cd-hero__btn:hover { filter: brightness(1.08); }
.cd-hero__btn:active { transform: scale(.98); }

.cd-hero__note {
  margin-top: 10px;
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-dim);
}

/* =========================================================
   Insights – nur hier, nicht auf der Startseite
   ========================================================= */

.cd-insights__list { display: grid; gap: 9px; }

.cd-insights__line {
  position: relative;
  padding-inline-start: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--g-20);
}

.cd-insights__line::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent-app);
}

.cd-insights__note {
  margin-top: 12px;
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-dim);
}

/* =========================================================
   Zusammenfassung: Welle und der Satz zum Moment
   ========================================================= */

.cd-wave {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.cd-wave__mark {
  width: 22px;
  height: 8px;
  flex: none;
  border-top: 2px solid var(--accent-deep);
  border-radius: 999px 999px 0 0;
}

.cd-wave.is-down { color: #4ade80; }
.cd-wave.is-down .cd-wave__mark { border-color: #4ade80; }

.cd-urge {
  margin-top: 10px;
  padding: 10px 12px;
  border-inline-start: 2px solid var(--accent-deep);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--accent-deep) 10%, transparent);
  font-size: 13px;
  line-height: 1.5;
  color: var(--g-20);
}

/* =========================================================
   Mehrfachauswahl im Chat
   ========================================================= */

.cd-chips--multi { margin-bottom: 4px; }

.cd-chip--toggle {
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.cd-chip--toggle.is-picked {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
  color: var(--ink);
  font-weight: 600;
}

/* Der kleine Sprung beim Antippen – Marke wie Skalenknopf. */
.cd-chip--toggle.is-tapped,
.cd-step.is-tapped { animation: cd-tap 300ms var(--ease-spring); }

@keyframes cd-tap {
  0%   { transform: scale(1); }
  40%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

.cd-multi__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.cd-save--inline {
  width: auto;
  padding: 11px 22px;
  font-size: 14.5px;
}

/* =========================================================
   Verwaltung: Auslöser und Fragensätze
   ========================================================= */

.cd-manage__title {
  margin-top: 24px;
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-app);
}

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

.cd-manage__list { display: grid; gap: 8px; margin-bottom: 16px; }

.cd-manage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--field-bg);
  transition: border-color var(--dur) var(--ease-out);
}

/* Zeilen ohne Griff (die Fragensätze) haben eine Spalte weniger. */
.cd-manage:not(:has(.cd-manage__grip)) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.cd-manage:hover { border-color: var(--accent-deep); }
.cd-manage.is-ghost { opacity: .9; }

.cd-manage__grip {
  width: 18px;
  height: 18px;
  flex: none;
  background: var(--text-faint);
  cursor: grab;
  touch-action: none;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.cd-manage__body { display: grid; gap: 2px; min-width: 0; }

.cd-manage__name {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.cd-manage__badge {
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-deep) 24%, transparent);
  font-size: max(var(--fs-floor), 10px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-app);
  vertical-align: 1px;
}

.cd-manage__act {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 8px;
  background: var(--accent-app);
  transition: background-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  -webkit-mask: var(--m) center / 17px no-repeat;
          mask: var(--m) center / 17px no-repeat;
}

.cd-manage__act:hover { background: var(--g-01); }
.cd-manage__act:active { transform: scale(.92); }
.cd-manage__act--danger { background: #f26c6c; }
.cd-manage__act--danger:hover { background: #ff9090; }

/* =========================================================
   Popups der Verwaltung
   ========================================================= */

.cd-body { display: grid; gap: 14px; }

.cd-field3 { display: grid; gap: 5px; min-width: 0; }
.cd-field3--head { margin-top: 20px; }

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

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

.cd-input2 {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  transition: border-color var(--dur) var(--ease-out);
}

.cd-input2:focus { border-color: var(--accent-app); outline: none; }
.cd-input2::placeholder { color: var(--text-faint); }

.cd-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.cd-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
}

.cd-check input { width: 18px; height: 18px; accent-color: var(--accent-deep); }

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

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

.cd-foot { display: flex; gap: 10px; }

.cd-btn {
  flex: 1;
  min-height: 44px;
  padding: 10px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  color: var(--text);
  font-size: 14.5px;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.cd-btn:hover { border-color: var(--accent-deep); }
.cd-btn:active { transform: scale(.96); }
.cd-btn[disabled] { opacity: .4; cursor: not-allowed; }
.cd-btn[disabled]:active { transform: none; }

.cd-btn--primary {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
  color: var(--ink);
  font-weight: 600;
}

.cd-btn--primary:hover { filter: brightness(1.08); }

.cd-btn--danger { border-color: #f26c6c; color: #f26c6c; }
.cd-btn--danger:hover { background: rgba(var(--t-fitness-stroke), .14); }

/* Die Knopfliste im Dreipunkt-Popup eines Fragensatzes. */
.cd-opts { display: grid; gap: 8px; }

.cd-opt {
  padding: 13px 14px;
  border-radius: 10px;
  background: var(--btn-quiet);
  font-size: 15px;
  text-align: start;
  transition: background-color var(--dur) var(--ease-out);
}

.cd-opt:hover { background: var(--btn-quiet-hover); }
.cd-opt[disabled] { opacity: .4; cursor: not-allowed; }
.cd-opt--danger {
  background: rgba(var(--t-fitness-stroke), .26);
  box-shadow: inset 0 0 0 1px rgba(var(--t-fitness-stroke), .5);
  color: #ff9a9a;
}
.cd-opt--danger:hover { background: rgba(var(--t-fitness-stroke), .38); }

/* ---------- Katalog ------------------------------------------------------------- */

.cd-cat { display: grid; gap: 6px; }

.cd-cat__title {
  margin-top: 6px;
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-app);
}

.cd-cat__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--field-bg);
  text-align: start;
  transition: background-color var(--dur) var(--ease-out);
}

.cd-cat__row:hover { background: var(--g-42); }
.cd-cat__row.is-taken { opacity: .45; cursor: not-allowed; }

.cd-cat__body { display: grid; gap: 2px; min-width: 0; }
.cd-cat__name { font-size: 14.5px; }

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

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

/* Die Felder einer eigenen Frage – je nach Antwortart. */
.cd-kind { display: grid; gap: 14px; }
.cd-kind[hidden] { display: none; }

/* =========================================================
   Wer keine Bewegung will, bekommt keine. Die Zeichnung steht
   dann fertig da, statt sich aufzubauen.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .cd-hero__wave { stroke-dashoffset: 0; animation: none; }
  .cd-hero__dot { opacity: 1; animation: none; }
  .cd-hero__spark { opacity: .8; animation: none; }

  .cd-chip--toggle.is-tapped,
  .cd-step.is-tapped { animation: none; }

  .cd-chip--toggle:active,
  .cd-step:active,
  .cd-hero__btn:active,
  .cd-btn:active,
  .cd-manage__act:active { transform: none; }
}

/* =========================================================
   Die drei Reiter: Today · Archive · Patterns

   Alles ab hier gehört zum Umbau des Bereichs. Die Formen sind
   dieselben wie in Fitness: eine Fläche trägt den Eckschnitt und
   keinen Sockel, ein Knopf trägt den Sockel (.btn3d). Sechseckig
   ist nur, was für sich steht – das Zeichen des Bereichs und die
   Zahl einer Intensität.
   ========================================================= */

/* ---------- Segmentschalter ------------------------------------------------- */

/* Derselbe Baustein wie .fitm-seg im Fitness-Bereich: ein
   Bildschirm, mehrere Abschnitte. Der Rahmen schneidet, die Stücke
   darin nicht – zwei Schnitte ineinander wären eine doppelte Kante. */
.cd-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 16px;
  padding: 4px;
  background: rgba(var(--o), .05);
}

.cd-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);
}

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

/* ---------- Abschnittsüberschrift ------------------------------------------- */

.cd-sec {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(var(--o), .07);
}

.cd-sec__mark {
  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;
}

.cd-sec__title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--g-12);
}

.cd-sec__right { font-size: 12px; color: var(--text-dim); }
.cd-sec__link { font-size: 12px; color: var(--accent-app); }

/* ---------- Sechseckzeichen -------------------------------------------------- */

.cd-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);
}

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

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

/* ---------- Die Intensität als Marke ----------------------------------------- */

/* Dieselbe Rolle wie das Rangabzeichen im Fitness-Bereich: eine Zahl,
   die für sich steht, also ein Sechseck. Der Anteil der Skala liegt
   als Fläche darin – die 9 ist voll, die 2 fast leer, und man sieht
   es, bevor man die Ziffer liest. */
.cd-level {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  /* Die Skala steht als Füllstand in der Marke: die 9 ist fast ganz
     Akzent, die 2 fast leer. Der leere Teil ist heller Überzug, nicht
     ein dunkler Akzent – sonst stünde die Ziffer bei einer niedrigen
     Zahl dunkel auf dunkel und wäre nicht mehr zu lesen. */
  background:
    linear-gradient(to top,
      var(--accent-app) 0 var(--fill, 0%),
      rgba(var(--o), .30) var(--fill, 0%) 100%);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.cd-level.is-empty {
  background: rgba(var(--o), .06);
  color: var(--text-faint);
  font-weight: 500;
}

/* ---------- Today ------------------------------------------------------------ */

.cd-today {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px 18px 20px;
  background: var(--surface);
  text-align: center;
}

.cd-today__state { margin-top: 6px; font-size: 19px; color: var(--g-01); }

.cd-today__hint {
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}

.cd-today__go {
  width: 100%;
  margin-top: 12px;
  padding: 15px 16px;
  font-size: 16px;
}

/* Der zweite Weg daneben: derselbe Vorgang, nur ohne Uhr. Er ist
   kein Knopf mit Sockel – sonst stünden zwei Handlungen gleich laut
   nebeneinander. */
.cd-today__more {
  padding: 6px 4px;
  color: var(--text-dim);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out);
}

.cd-today__more:hover { color: var(--accent-app); }

.cd-today .cd-cards { width: 100%; margin-top: 14px; }

/* ---------- Die Welle zu Ende messen ------------------------------------------ */

.cd-pickup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent-deep) 12%, var(--surface));
}

.cd-pickup__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cd-pickup__title { font-size: 15px; color: var(--g-01); }
.cd-pickup__meta { font-size: 12px; color: var(--text-dim); }

/* ---------- Leere Zustände ----------------------------------------------------- */

.cd-empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px 18px;
  background: var(--surface);
  text-align: center;
}

.cd-empty__text {
  max-width: var(--measure);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* ---------- Balken auf „Patterns" ---------------------------------------------- */

.cd-bars { display: grid; gap: 10px; }

.cd-bar {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
}

.cd-bar__label {
  font-size: 13px;
  color: var(--g-10);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-bar__track {
  height: 10px;
  background: rgba(var(--o), .07);
  overflow: hidden;
}

.cd-bar__fill {
  display: block;
  height: 100%;
  min-width: 0;
  background: var(--accent-app);
}

.cd-bar__value {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  text-align: end;
}

.cd-bar--link { transition: opacity var(--dur) var(--ease-out); }
.cd-bar--link:hover { opacity: .82; }
.cd-bar--link:hover .cd-bar__label { color: var(--accent-app); }

/* ---------- Quoten -------------------------------------------------------------- */

.cd-quotas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.cd-quota {
  display: grid;
  gap: 3px;
  padding: 14px;
  background: var(--field-bg);
}

.cd-quota__value {
  font-size: 26px;
  font-weight: 700;
  color: var(--accent-app);
}

.cd-quota__label { font-size: 13px; color: var(--g-10); }
.cd-quota__meta { font-size: max(var(--fs-floor), 11.5px); color: var(--text-faint); }

/* ---------- Einstellungen: Zeilen, die weiterführen ------------------------------ */

.cd-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--btn-quiet);
  transition: background-color var(--dur) var(--ease-out);
}

.cd-link:hover { background: var(--btn-quiet-hover); }
.cd-link__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cd-link__title { font-size: 15px; color: var(--text); }

.cd-link__meta {
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der Pfeil ist der Zurück-Pfeil, andersherum gedreht. */
.cd-link__go {
  width: 13px;
  height: 13px;
  flex: none;
  transform: rotate(180deg);
  background: var(--text-faint);
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}

/* ---------- Einstellungen: Schalter ---------------------------------------------- */

/* Dieselbe Zeile wie .fit-toggle im Fitness-Bereich, in den Farben
   dieses Bereichs. Ein Schalter ist eine Fläche, kein Knopf: er
   trägt den Schnitt und keinen Sockel. */
.cd-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  background: var(--btn-quiet);
  text-align: start;
  transition: background-color var(--dur) var(--ease-out);
}

.cd-toggle:hover { background: var(--btn-quiet-hover); }

.cd-toggle__mark {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.cd-toggle__text { display: grid; gap: 2px; min-width: 0; }
.cd-toggle__text b { font-size: 14.5px; font-weight: 500; color: var(--text); }
.cd-toggle__text span { font-size: 12px; color: var(--text-dim); }

.cd-toggle.is-on .cd-toggle__mark {
  box-shadow: inset 0 0 0 1.5px var(--accent-deep);
  background: var(--accent-deep);
}

/* Der Haken wird gezeichnet – so braucht die Zeile kein Symbol. */
.cd-toggle.is-on .cd-toggle__mark::after {
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid var(--on-accent);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.cd-wide { width: 100%; justify-content: center; }

/* ---------- Filterklappe ---------------------------------------------------------- */

.cd-filterbox__on {
  margin-inline-start: 6px;
  padding: 1px 7px;
  background: var(--accent-deep);
  color: var(--on-accent);
  font-size: max(var(--fs-floor), 11px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cd-reset { margin-top: 14px; }

/* =========================================================
   Kantenschnitt und Sockel

   Dasselbe Stück wie am Ende von styles/fitness.css, und aus
   demselben Grund: das Cue Diary war der letzte Bereich, in dem
   alles rund war – 34 Radien, kein einziger Schnitt. Zwei Regeln
   gelten ab hier für alles:

     Eine FLÄCHE trägt den Eckschnitt (--cut-clip) und keinen
     Sockel: Karten, Zeilen, Felder, Segmente, Blasen im Verlauf.

     Ein KNOPF trägt den Sockel (dieselbe Bauweise wie .btn3d in
     styles/components.css): Fläche, dahinter versetzt der Sockel,
     beim Drücken wandert der Knopf auf ihn und der Sockel geht weg.

   Rund bleibt in der ganzen App nur der zentrale Menü-Knopf.
   Sechseckig ist, was für sich steht: das Zeichen des Bereichs
   (.cd-hexmark) und die Zahl einer Intensität (.cd-level).
   ========================================================= */

.cd-card,
.cd-msg,
.cd-input,
.cd-step,
.cd-choice,
.cd-chip,
.cd-gauge__bar,
.cd-progress,
.cd-manage,
.cd-input2,
.cd-opt,
.cd-cat__row,
.cd-seg,
.cd-toggle,
.cd-toggle__mark,
.cd-link,
.cd-quota,
.cd-today,
.cd-pickup,
.cd-empty,
.cd-bar__track,
.cd-filterbox__on,
.cd-result,
.cd-urge {
  border-radius: 0;
  clip-path: var(--cut-clip);
}

.cd-card          { --cut: 9px; }
.cd-msg           { --cut: 10px; }
.cd-input         { --cut: 9px; }
.cd-step          { --cut: 5px; }
.cd-choice        { --cut: 9px; }
.cd-chip          { --cut: 7px; }
.cd-gauge__bar    { --cut: 4px; }
.cd-progress      { --cut: 2px; }
.cd-manage        { --cut: 9px; }
.cd-input2        { --cut: 8px; }
.cd-opt           { --cut: 8px; }
.cd-cat__row      { --cut: 8px; }
.cd-seg           { --cut: 8px; }
.cd-toggle        { --cut: 9px; }
.cd-toggle__mark  { --cut: 6px; }
.cd-link          { --cut: 9px; }
.cd-quota         { --cut: 9px; }
.cd-today         { --cut: 14px; }
.cd-pickup        { --cut: 10px; }
.cd-empty         { --cut: 12px; }
.cd-bar__track    { --cut: 3px; }
.cd-filterbox__on { --cut: 3px; }
.cd-result        { --cut: 14px; }
.cd-urge          { --cut: 8px; }

/* Die Blasen des Verlaufs hatten zusätzlich eine abgeflachte Ecke
   unten – die Spitze, die eine Sprechblase ausmacht. Der Schnitt
   nimmt beide Ecken diagonal weg und macht sie damit hinfällig. */
.cd-msg--ask { border-bottom-left-radius: 0; }
.cd-msg--say { border-bottom-right-radius: 0; }

/* Ein Rand überlebt den Schnitt nicht: clip-path schneidet ihn an den
   Diagonalen mit weg, und übrig bleiben Splitter. Wo eine Fläche eine
   Kontur braucht, liegt sie als innerer Schatten an – der folgt der
   Fläche und wird sauber mitgeschnitten. */
.cd-msg--ask,
.cd-input,
.cd-step,
.cd-choice,
.cd-chip,
.cd-manage,
.cd-input2 { border: 0; }

.cd-msg--ask { box-shadow: inset 0 0 0 1px rgba(var(--o), .07); }
.cd-msg--ask.is-current { box-shadow: inset 0 0 0 1.5px var(--accent-deep); }

/* Das Antwortfeld hatte seine Kante als Rand. Ohne ihn stünde der
   Cursor im Nichts – die Fläche ist fast so dunkel wie die Seite. */
.cd-input { box-shadow: inset 0 0 0 1.5px rgba(var(--o), .10); }

.cd-step { box-shadow: inset 0 0 0 1.5px var(--line); }
.cd-step:hover { box-shadow: inset 0 0 0 1.5px var(--accent-deep); }
.cd-step.is-picked,
.cd-step:active { box-shadow: inset 0 0 0 1.5px var(--accent-deep); }

.cd-choice { box-shadow: inset 0 0 0 1.5px var(--accent-deep); }
.cd-chip { box-shadow: inset 0 0 0 1px rgba(var(--o), .14); }
.cd-chip:hover { box-shadow: inset 0 0 0 1px var(--accent-deep); }

.cd-manage { box-shadow: inset 0 0 0 1px var(--line); }
.cd-manage:hover { box-shadow: inset 0 0 0 1px var(--accent-deep); }

.cd-input:focus,
.cd-input2:focus {
  box-shadow: inset 0 0 0 2px var(--accent-app);
  outline: none;
}

/* Der Umriss der Notiz im Ergebnis war ein linker Rand. Ein Rand an
   genau einer Seite überlebt den Schnitt – die Zeile selbst wird
   nicht geschnitten, sie ist nur eine Linie mit Text daneben. */

/* ---------- Knöpfe: Fläche mit Sockel ---------------------------------------- */

/* Dieselbe Bauweise wie .btn3d. Die Knöpfe dieses Bereichs behalten
   ihre Namen (sie stehen in vier Dateien), bekommen hier aber die
   Form, die überall sonst gilt: kein Radius, kein Schrumpfen beim
   Antippen, sondern ein Körper, der sich auf seinen Sockel setzt. */
.cd-track,
.cd-done,
.cd-save,
.cd-btn,
.cd-send,
.cd-hero__btn {
  --cut: 9px;
  --depth: 3px;
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);

  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--on-accent);
  filter: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

/* Kein Eckschnitt an einem Knopf – siehe „Ein Knopf ist ein RECHTECK"
   am Ende von styles/components.css. Der Schnitt gehört den Flächen;
   den Knopf macht allein der Sockel. */
.cd-track::before,   .cd-track::after,
.cd-done::before,    .cd-done::after,
.cd-save::before,    .cd-save::after,
.cd-btn::before,     .cd-btn::after,
.cd-send::before,    .cd-send::after,
.cd-hero__btn::before, .cd-hero__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: none;
  border-radius: 0;
}

.cd-track::before,
.cd-done::before,
.cd-save::before,
.cd-btn::before,
.cd-send::before,
.cd-hero__btn::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.cd-track::after,
.cd-done::after,
.cd-save::after,
.cd-btn::after,
.cd-send::after,
.cd-hero__btn::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
  transition: background-color var(--dur) var(--ease-out);
}

:is(.cd-track, .cd-done, .cd-save, .cd-btn, .cd-send, .cd-hero__btn):hover::after,
:is(.cd-track, .cd-done, .cd-save, .cd-btn, .cd-send, .cd-hero__btn):focus-visible::after {
  background: var(--btn-face-hover);
}

:is(.cd-track, .cd-done, .cd-save, .cd-btn, .cd-send, .cd-hero__btn):hover { filter: none; }

:is(.cd-track, .cd-done, .cd-save, .cd-btn, .cd-send, .cd-hero__btn):active {
  transform: translate(var(--depth), var(--depth));
}

:is(.cd-track, .cd-done, .cd-save, .cd-btn, .cd-send, .cd-hero__btn):active::before {
  opacity: 0;
}

/* Der zweite Knopf einer Reihe handelt nicht – er nimmt zurück. Also
   dieselbe Form, aber die ruhige Fläche. */
/* Night Pond (0.6.0 beta): der zweite Knopf führt weiter („From the
   catalog", „New cue") – getönt wie das „+" auf Home (--tint-*,
   styles/pond.css). Wer nur schließt oder zurücknimmt (Close, der
   Geist-Knopf), ist die stille Stufe wie „Later": nur eine Kante. */
.cd-btn {
  --btn-face: var(--tint-face);
  --btn-face-hover: var(--tint-hover);
  --btn-lift: var(--tint-lift);
  color: var(--tint-ink);
  font-weight: 600;
}

.cd-btn::after { box-shadow: inset 0 0 0 1.5px var(--tint-edge); }

.cd-btn--quiet,
.cd-done--ghost {
  --btn-face: transparent;
  --btn-face-hover: rgba(var(--o), .10);
  --btn-lift: rgba(var(--o), .22);
  --btn-under: transparent;
  color: var(--text);
  font-weight: 500;
}

.cd-btn--quiet::after,
.cd-done--ghost::after { box-shadow: inset 0 0 0 1.5px rgba(var(--o), .26); }
.cd-btn--primary::after,
.cd-btn--danger::after { box-shadow: none; }

.cd-btn--primary {
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);
  color: var(--on-accent);
  font-weight: 600;
}

.cd-btn--danger {
  --btn-face: #f26c6c;
  --btn-face-hover: #ff9090;
  --btn-lift: var(--g-42);
  color: var(--on-accent);
  font-weight: 600;
}

.cd-btn--danger:hover,
.cd-done--ghost:hover { background: none; }

.cd-btn[disabled] {
  color: var(--text-disabled);
  cursor: not-allowed;
  transform: none;
}

.cd-btn[disabled]::before { opacity: 0; }
.cd-btn[disabled]::after { background: none; box-shadow: inset 0 0 0 1.5px rgba(var(--o), .12); }
.cd-btn[disabled]:active { transform: none; }

/* Der Antwort-Knopf ist quadratisch und trägt ein Symbol. Damit es auf
   der Akzentfläche lesbar bleibt, wird es schwarz gerechnet – wie in
   jedem anderen Bereich auch. */
.cd-send img { position: relative; filter: brightness(0) saturate(100%); }

/* Der Sockel braucht Platz. Ohne ihn stünde die untere Reihe eines
   Dialogs mit ihrem Schatten auf der Kante des Fensters. */
.cd-foot { padding-bottom: 3px; }

/* ---------- E-ink und wenig Bewegung ------------------------------------------- */

/* Im E-ink-Modus gibt es keine Tiefe: eine Fläche kann dort nicht
   heller sein als eine andere, und ein Sockel wäre nur ein zweiter
   schwarzer Fleck. Dieselbe Entscheidung wie in fitness.css. */
@media (prefers-reduced-motion: reduce) {
  :is(.cd-track, .cd-done, .cd-save, .cd-btn, .cd-send, .cd-hero__btn):active {
    transform: none;
  }
}

/* ---------- Der Rest der Radien ------------------------------------------------- */

/* Was die Liste oben nicht getroffen hat: Auswahlfelder, die
   Einstiegskarte, die kleinen Marken. Auswahlfelder sind Flächen –
   Schnitt, kein Sockel, und der Fokus liegt innen an, weil ein Rand
   an den Diagonalen aufbräche. */
.cd-select select,
.cd-date,
.cd-hero,
.cd-manage__badge {
  border-radius: 0;
  clip-path: var(--cut-clip);
}

.cd-select select   { --cut: 8px; }
.cd-date            { --cut: 8px; }
.cd-hero            { --cut: 16px; }
.cd-manage__badge   { --cut: 4px; }

.cd-select select,
.cd-date,
.cd-hero { border: 0; }

.cd-select select { box-shadow: inset 0 0 0 1.5px var(--line); }
.cd-date          { box-shadow: inset 0 0 0 1.5px var(--line); }
.cd-hero          { box-shadow: inset 0 0 0 1.5px var(--line); }

:is(.cd-select select, .cd-date):focus {
  box-shadow: inset 0 0 0 2px var(--accent-app);
  outline: none;
}

/* Ein Balken in einer geschnittenen Spur bekommt keinen zweiten
   Schnitt und keine Rundung – die Spur gibt die Form vor. */
.cd-progress__fill,
.cd-gauge__fill { border-radius: 0; }

/* Die Marke vor einer Insights-Zeile war ein Punkt mit 2px Radius.
   Sie ist jetzt eine kleine Raute – dieselbe Geometrie wie die
   Sechsecke, nur so klein, dass davon die Spitzen bleiben. */
.cd-insights__line::before {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Der Handgriff neben einer Verwaltungszeile ist ein Symbol, keine
   Fläche: seine Form macht die Maske, nicht der Rahmen. */
.cd-manage__act { border-radius: 0; }

/* Der alte „Reset"-Knopf war ein Rahmen mit Radius. Er trägt jetzt
   .btn3d im Markup – hier bleibt nur, was seine eigene Regel noch
   dagegen hielt. */
.cd-reset {
  display: inline-flex;
  width: auto;
  border: 0;
  border-radius: 0;
}

/* ---------- Unter der Größenschwelle: Rechteck, ohne Schnitt -------------------- */

/* Genau wie in fitness.css: an einem Element, das kleiner ist als
   zweimal --cut, frisst der Schnitt die Fläche auf. Solche Stellen
   bleiben Rechtecke. */
.cd-progress,
.cd-bar__track,
.cd-filterbox__on { clip-path: none; }

/* Der Fragen-Chat endet mit seiner Eingabe, und die soll über der
   Tableiste stehen, nicht dahinter. Der Abstand, den sich .app für
   die Leiste nimmt, reicht dafür nicht: die Eingabe einer Skala ist
   höher als eine Textzeile, und am Ende der Seite blieb sie halb
   verdeckt. Also hier noch einmal die Höhe der Leiste. */
.cd-chat { padding-bottom: calc(var(--sh-tabs-h) + 12px); }

/* Wohin `scrollIntoView` die Eingabe setzt: um die Höhe der Tableiste
   höher, als es sonst täte. Sonst käme sie genau dahinter zu liegen. */
.cd-compose { scroll-margin-bottom: calc(var(--sh-tabs-h) + 16px); }

/* =========================================================
   Was beobachtet wird – Auslöser und Fragensätze, auffindbar

   Auf „Today" ganz unten eine leise Zeile (.cd-setline, seit 0.6.0
   beta statt zweier Kacheln), im Cue-Dialog die Reihe „+ New set · Edit this set", im Editor eines
   Satzes der Hinweis, für welchen Auslöser er entsteht, und „Start
   from a copy". Flächen tragen den Schnitt, Knöpfe den Sockel – wie
   im Rest des Bereichs.
   ========================================================= */

/* Der kleine Knopf: dieselbe Bauweise wie .cd-btn, nur niedriger. */
.cd-btn--sm {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 13.5px;
}

/* Im Cue-Dialog: Vorschau des Satzes und die beiden Wege zu ihm. */
.cd-setrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }

/* Zwei Nebenwege, nicht zwei Hälften: sie nehmen nur ihre eigene
   Breite und bleiben damit leiser als Cancel · Create darunter. */
.cd-setrow .cd-btn { flex: 0 0 auto; }

/* Settings: der Knopf unter der Zeile, die zur Verwaltung führt. */
.mnt-card .cd-btn--sm.cd-wide { margin-top: 10px; }

/* Die Verwaltung der Auslöser zeigt den Weg zu den Fragensätzen. */
.cd-link--gap { margin-top: 14px; }

/* Für welchen Auslöser ein Satz gerade entsteht. */
.cd-for {
  --cut: 9px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--accent-deep) 14%, var(--surface));
  clip-path: var(--cut-clip);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}

.cd-for b { font-weight: 600; color: var(--accent-app); }

.cd-for__mark {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  background: var(--accent-app);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

/* Ein neuer Satz kann von einem bestehenden ausgehen. */
.cd-from { display: grid; gap: 8px; margin-top: 18px; }
.cd-from__list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Die Zeile einer Frage ist selbst der Knopf, der sie öffnet. */
.cd-manage__body--btn {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.cd-manage__body--btn:hover .cd-manage__name { color: var(--accent-app); }

.cd-manage__body--btn:focus-visible {
  outline: 2px solid var(--accent-app);
  outline-offset: 4px;
}

.cd-manage__kind { color: var(--text-faint); }

/* =========================================================
   0.6.0 beta – der warme Cue Diary

   Derselbe Schein wie im Journal (.la-shine) auf der Karte, die das
   Bemerken startet – dauerhaft und nie als Lohn. Dazu dieselbe Tönung
   aus der Ecke wie die Vorlagenkarten des Journals (115°, 9 %) auf
   Schnellstarts, Zeilen und Kits: ein Material für den ganzen Bereich.
   Zahlen bleiben neutral – kein Grün für „gut", kein Rot für „schlecht".
   ========================================================= */

/* ---------- Today: die Karte und ihre Wellen ------------------------------------- */

.cd-today { gap: 6px; padding-top: 16px; }

/* Höchstens so breit wie am Telefon: am Rechner würde die Linie sonst
   mit der Karte wachsen und 200 px hoch werden – aus einem Streifen
   würde ein Diagramm. */
.cd-waves {
  display: block;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  height: auto;
  margin-bottom: 4px;
  overflow: visible;
}

.cd-waves__base { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.cd-waves__area { fill: color-mix(in srgb, var(--accent-app) 16%, transparent); stroke: none; }
.cd-waves__line {
  fill: none;
  stroke: var(--accent-app);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cd-waves__peak { fill: var(--accent-app); }
.cd-waves__tick { stroke: var(--accent-app); stroke-width: 2; }
.cd-waves__now { stroke: var(--accent-deep); stroke-width: 1; stroke-dasharray: 2 3; }
.cd-waves__hour {
  fill: var(--text-faint);
  font: 500 max(var(--fs-floor), 9px) var(--font-mono);
  letter-spacing: .04em;
}

@media (prefers-reduced-motion: no-preference) {
  .cd-waves__line {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: cd-wave-draw 1.1s 120ms var(--ease-out) forwards;
  }
  .cd-waves__area, .cd-waves__peak { animation: cd-fade 500ms 700ms var(--ease-out) both; }
}

@keyframes cd-wave-draw { to { stroke-dashoffset: 0; } }
@keyframes cd-fade { from { opacity: 0; } to { opacity: 1; } }

.cd-today__state { margin-top: 2px; }

/* ---------- Schnellstarts: die zuletzt benutzten Auslöser ------------------------ */

.cd-qs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.cd-qs--1 { grid-template-columns: minmax(0, 1fr); }
.cd-qs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cd-qs__tile {
  --cut: 9px;
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 58px;
  padding: 10px 11px 11px;
  border: 0;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--accent-app) 10%, transparent), transparent 58%),
    var(--field-bg);
  clip-path: var(--cut-clip);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-touch-callout: none;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cd-qs__tile:hover { background-color: var(--g-42); }
.cd-qs__tile:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -2px; }
.cd-qs__name {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd-qs__meta { font-size: max(var(--fs-floor), 11px); color: var(--text-dim); }

/* ---------- Karten: die Welle in einem Blick ------------------------------------- */

.cd-card--arc { grid-template-columns: 38px minmax(0, 1fr) auto; }
.cd-card__arc {
  font: 500 12px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  white-space: nowrap;
}
.cd-card__arc.is-down { color: var(--accent-app); }
.cd-card { -webkit-touch-callout: none; }

/* Mehrere ausgewählt (Archive › Select). */
.cd.is-selecting .cd-card { box-shadow: inset 0 0 0 1px var(--line); }
.cd .cd-card.is-chosen {
  background: color-mix(in srgb, var(--accent-deep) 18%, var(--field-bg));
  box-shadow: inset 0 0 0 1.5px var(--accent-app);
}

/* ---------- Eine leise Zeile statt zweier lauter Kacheln ------------------------- */

.cd-setline {
  --cut: 9px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 12px 13px;
  background: var(--field-bg);
  clip-path: var(--cut-clip);
  color: var(--text-dim);
  font-size: 13px;
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.cd-setline:hover { color: var(--text); background: var(--g-42); }
.cd-setline:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -2px; }
.cd-setline__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-setline__mark,
.cd-setline__go {
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}
.cd-setline__go { transform: rotate(180deg); opacity: .7; }

/* ---------- Der Chat --------------------------------------------------------------- */

/* Ein Strich je Frage statt eines Balkens. */
.cd-steps {
  display: flex;
  gap: 3px;
  margin-top: 8px;
}
.cd-steps__bit {
  flex: 1 1 0;
  height: 3px;
  background: rgba(var(--o), .10);
  transition: background-color 320ms var(--ease-out);
}
.cd-steps__bit.is-done { background: var(--accent-deep); }
.cd-steps__bit.is-current { background: var(--accent-app); }

/* Die offene Frage trägt den Schein – sie ist der nächste Schritt. */
.cd-msg--ask.is-current {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent-app) 14%, transparent) 0%, transparent 70%),
    var(--surface);
}

/* 0–10 als elf Sechsecke, die sich zum Akzent hin färben – ohne Grün
   und ohne Rot. Die Schrift bleibt bei jeder Stufe weiß: die Mischung
   endet bei 40 %, dort steht Weiß noch über 5:1. */
.cd-scale { gap: 3px; }
.cd-scale .cd-step {
  aspect-ratio: 1.12;
  border: 0;
  box-shadow: none;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  background: color-mix(in srgb, var(--accent-app) calc(var(--i, 0) * 4%), var(--surface-2));
  color: var(--g-01);
  font-variant-numeric: tabular-nums;
}
.cd-scale .cd-step:hover { box-shadow: none; filter: brightness(1.18); }
.cd-scale .cd-step.is-picked,
.cd-scale .cd-step:active {
  box-shadow: none;
  background: var(--accent-app);
  color: var(--on-accent);
  transform: scale(.94);
}
.cd-scale .cd-step:focus-visible { outline: none; filter: brightness(1.35); }

/* Mehr als drei feste Antworten brechen um, statt zu quetschen. */
.cd-choices--wrap { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-choices--wrap .cd-choice { font-size: 14px; }

/* ---------- Verwaltung: leiser Handgriff, Griff aus Strichen ---------------------- */

/* ⋯ statt rotem Papierkorb: das Menü der Zeile, still. */
.cd-manage__act--quiet { background: var(--text-dim); }
.cd-manage__act--quiet:hover { background: var(--text); }

/* Der Griff war das Symbol für „Ebenen". Er ist jetzt das, was er ist:
   sechs kleine Quadrate zum Anfassen. */
.cd-manage__grip {
  width: 12px;
  height: 18px;
  margin-inline-start: 2px;
  -webkit-mask: none;
          mask: none;
  background:
    linear-gradient(var(--text-faint) 0 0) 0 2px / 4px 4px no-repeat,
    linear-gradient(var(--text-faint) 0 0) 8px 2px / 4px 4px no-repeat,
    linear-gradient(var(--text-faint) 0 0) 0 7px / 4px 4px no-repeat,
    linear-gradient(var(--text-faint) 0 0) 8px 7px / 4px 4px no-repeat,
    linear-gradient(var(--text-faint) 0 0) 0 12px / 4px 4px no-repeat,
    linear-gradient(var(--text-faint) 0 0) 8px 12px / 4px 4px no-repeat;
}

/* Zeilen und Kacheln tragen dieselbe Tönung aus der Ecke wie im Journal. */
.cd-manage,
.cd-cat__row {
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--accent-app) 7%, transparent), transparent 55%),
    var(--field-bg);
}
.cd-manage { -webkit-touch-callout: none; }

/* Ein Link in Knopfform (From a kit). */
.cd-btn--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 14px;
  font-size: 14.5px;
  text-decoration: none;
}
.cd-grid2 > .cd-track { width: 100%; margin: 0; }

/* ---------- Katalog: Suche und die Marken der Kits -------------------------------- */

.cd-catsearch { display: block; }
.cd-cat__count {
  margin-inline-start: 4px;
  font: 500 max(var(--fs-floor), 10px) var(--font-mono);
  color: var(--text-faint);
}
.cd-cat__kits { display: inline-flex; gap: 3px; margin-inline-start: 8px; vertical-align: 1px; }
.cd-cat__kit {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 15px;
  font: 600 max(var(--fs-floor), 8.5px) var(--font-mono);
  color: var(--accent-app);
  background: color-mix(in srgb, var(--accent-deep) 22%, transparent);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}

/* ---------- Einstieg und Kits ----------------------------------------------------- */

.cd-hero.la-shine { box-shadow: none; }
.cd-hero__text--last { margin-bottom: 0; }

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

.cd-kit {
  --cut: 10px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 13px 15px;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--accent-app) 10%, transparent), transparent 60%),
    var(--surface);
  clip-path: var(--cut-clip);
  color: var(--text);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cd-kit:hover { background-color: var(--g-42); }
.cd-kit:active { transform: scale(.985); }
.cd-kit:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -2px; }

.cd-kit__hex {
  display: grid;
  place-items: center;
  width: 34px;
  height: 31px;
  background: color-mix(in srgb, var(--accent-deep) 26%, transparent);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  color: var(--accent-app);
  font: 600 13px var(--font-mono);
}
.cd-kit__hex--lg {
  width: 56px;
  height: 50px;
  background: var(--accent-app);
  color: var(--on-accent);
  font-size: 20px;
}
.cd-kit__name { font-size: 14.5px; font-weight: 600; }
.cd-kit__sub { font-size: max(var(--fs-floor), 11.5px); line-height: 1.4; color: var(--text-dim); }

.cd-kits__note { margin-top: 10px; font-size: 12px; color: var(--text-dim); }

.cd-hero__blank { display: grid; justify-items: center; gap: 8px; margin-top: 22px; }
.cd-hero__btn2 { min-width: 220px; }

@media (min-width: 720px) {
  .cd-kits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Die Seite eines Kits. */
.cd-kithead {
  --cut: 16px;
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 22px 18px 20px;
  background: var(--surface);
  clip-path: var(--cut-clip);
  text-align: center;
}
.cd-kithead__name { font-size: 22px; font-weight: 600; color: var(--g-01); }
.cd-kithead__sub { max-width: 34ch; font-size: 13px; color: var(--text-dim); }

.cd-kitwhy { display: grid; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--text); }
.cd-kitwhy__roots { font-size: 12.5px; color: var(--text-dim); }

.cd-kitcaution {
  margin-top: 14px;
  padding: 10px 12px;
  border-inline-start: 3px solid var(--accent-app);
  background: color-mix(in srgb, var(--accent-deep) 10%, var(--surface));
  font-size: 13px;
  line-height: 1.5;
}

.cd-kitcues .cd-kitcue {
  display: grid;
  gap: 1px;
  padding: 8px 11px;
  text-align: start;
}
.cd-kitcue__name { font-size: 13.5px; font-weight: 600; }
.cd-kitcue__hint { font-size: max(var(--fs-floor), 11px); color: var(--text-dim); }
.cd-kitcue.is-picked .cd-kitcue__hint { color: inherit; opacity: .8; }
.cd-kitcue[disabled] { opacity: .55; cursor: default; }

.cd-kitq {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kq;
}
.cd-kitq__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 8px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.45;
}
.cd-kitq__row::before {
  counter-increment: kq;
  content: counter(kq);
  grid-row: span 2;
  font: 500 max(var(--fs-floor), 11px)/1.9 var(--font-mono);
  color: var(--text-faint);
}
.cd-kitq__if { grid-column: 2; font-size: max(var(--fs-floor), 11.5px); color: var(--text-faint); }

.cd-kitgo { display: grid; gap: 12px; margin-top: 24px; justify-items: stretch; }

/* „If it's too much" – leise, aber immer da. */
.cd-helpline {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 6px;
  border: 0;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cd-kits ~ .cd-helpline { display: flex; margin-inline: auto; }
.cd-helpline:hover { color: var(--accent-app); }
.cd-helpline__mark {
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.cd-help { display: grid; gap: 12px; }
.cd-help__lead { font-size: 14px; line-height: 1.5; }
.cd-help__lead b { color: var(--accent-app); }
.cd-help__text { font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.cd-help__text a { color: var(--accent-app); }
.cd-help__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cd-help__row {
  --cut: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "where num" "name num";
  align-items: center;
  column-gap: 12px;
  padding: 10px 12px;
  background: var(--field-bg);
  clip-path: var(--cut-clip);
}
.cd-help__where { grid-area: where; font-size: 13.5px; font-weight: 600; }
.cd-help__name { grid-area: name; font-size: max(var(--fs-floor), 11.5px); color: var(--text-dim); }
.cd-help__num {
  grid-area: num;
  /* Eine Krisennummer muss man auch zitternd treffen: 44 px hoch, wie
     es Apple für jedes Ziel will (10.10.2026). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font: 600 15px var(--font-mono);
  color: var(--accent-app);
  font-variant-numeric: tabular-nums;
  -webkit-user-select: all;
          user-select: all;
}
.cd-help__note { font-size: 12px; line-height: 1.5; color: var(--text-faint); text-align: center; }

.cd-pickup--entry { margin-top: 16px; }

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

html[data-eink] .cd-scale .cd-step { background: #ffffff; color: #000000; box-shadow: inset 0 0 0 1.5px #000000; clip-path: none; }
html[data-eink] .cd-scale .cd-step.is-picked { background: #000000; color: #ffffff; }
html[data-eink] .cd-waves__area { fill: none; }
html[data-eink] :is(.cd-qs__tile, .cd-kit, .cd-manage, .cd-cat__row) { background: #ffffff; box-shadow: inset 0 0 0 1.5px #000000; }
html[data-eink] .cd-msg--ask.is-current { background: #ffffff; }