/* =========================================================
   Life Archive – Notes (der Bereich Archive)

   Die Farbe des Archive ist ein Grau (--c-archive): es ist ein Archiv,
   und die Standardgrautöne der App passen dazu besser als ein weiterer
   Akzent. Seit 0.6.0 beta steht es in der Modul-Registry und lässt sich
   wie jeder Bereich umfärben; die zwei Variablen hier halten Popups und
   den Editor im selben Ton.
   ========================================================= */

.ar {
  --accent-app: var(--c-archive);         /* helles Grau: Marken, Haken, Linien */
  --accent-deep: var(--c-archive-stroke); /* mittleres Grau: Rahmen, Knöpfe    */
}

.modal-layer.ar {
  --accent-app: var(--c-archive);
  --accent-deep: var(--c-archive-stroke);
}

/* =========================================================
   Archive: Notes · Board (seit 0.4.0 beta, eigener Bereich seit 0.6.0)

   Aufgebaut wie die Instrumente in Stats (styles/patterns.css):
   Fläche mit Rand und zwei geschnittenen Ecken, darunter ein
   harter Sockel (--py-plinth als drop-shadow, damit er dem Schnitt
   folgt), Überschriften in Mono. Knöpfe bleiben Rechtecke mit
   Sockel, nie geschnitten.

   Farbe: das Archive selbst bleibt grau – es hält nur Text, und
   ein bunter Akzent stritte mit den Bereichen. Farbe
   bringt man selbst mit: jede Notiz und jede Kategorie kann einen
   der acht Töne der eigenen Tracker tragen (--tr-*). Die liegen
   ZWISCHEN den Bereichsfarben – Gold gehört dem Journal, Mint der
   Ernährung; eine Notiz in Sand oder Amber verwechselt man mit
   keinem Bereich.

   Breiten: unter 520 px zwei Spalten Notizen, darüber so viele zu
   je mindestens 210 px, wie passen (app/notes/ui.js). Das Board
   stapelt seine Kategorien bis 720 px und stellt sie ab dort als
   Spalten nebeneinander.
   ========================================================= */

/* ---------- Hülle ------------------------------------------------------
   Seit 0.6.0 beta ist das Archive ein eigener Bereich: Notes und Board
   sind die Reiter in der Leiste unten (AREAS.archive in app/shell.js).
   Der Segmentschalter, der die zwei Hälften vorher oben im Reiter von
   Home trug (.ar-tabs), ist damit weggefallen. */

.archive { padding-top: 4px; }

/* ---------- Suche und „New" ---------------------------------------------- */

.ar-bar {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

/* Das Feld trägt Rand und Fläche in zwei Schichten: ein <input> kann
   keine Pseudoelemente tragen, also trägt die Hülle den Rand. */
.ar-search {
  --cut: 10px;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  padding: 1px;
  background: var(--line-strong);
  clip-path: var(--cut-clip);
  transition: background-color var(--dur) var(--ease-out);
}

.ar-search:focus-within { background: var(--accent-app); }

.ar-search__glyph {
  position: absolute;
  z-index: 1;
  inset-inline-start: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--text-subtle);
  pointer-events: none;
}

.ar-search__input {
  --cut: 9px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px 0 40px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;           /* unter 16 px zoomt iOS beim Antippen */
  outline: none;
}

.ar-search__input::placeholder { color: var(--text-subtle); }

/* Die eine Akzentfläche des Bildschirms. */
.ar-new {
  flex: none;
  min-height: 44px;
  padding: 0 18px 0 15px;
  gap: 9px;
  font-size: 15px;
}

.ar-new__plus {
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
}

/* ---------- Werkzeuge: Filter · Select · Shelf ------------------------------ */

.ar-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-top: 12px;
}

.ar-tools__group { display: flex; flex-wrap: wrap; gap: 8px; }

.ar-tools__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.ar-tool {
  --depth: 2px;
  min-height: 36px;
  padding: 6px 12px;
  gap: 7px;
  font-size: 13.5px;
  white-space: nowrap;
}

.ar-tool .ar-glyph { width: 15px; height: 15px; }

.ar-tool--icon { padding: 6px 10px; }

/* Eingeschaltet (Filter offen oder aktiv): getönte Fläche, Kante in
   der Farbe des Archives. */
.ar-tool.is-on {
  --btn-face: color-mix(in srgb, var(--accent-app) 16%, transparent);
  --btn-face-hover: color-mix(in srgb, var(--accent-app) 24%, transparent);
  --btn-edge: var(--accent-app);
}

.ar-tool__count {
  min-width: 18px;
  padding: 1px 5px;
  background: var(--surface-3);
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10.5px);
  line-height: 1.5;
  text-align: center;
  color: var(--text);
}

.ar-tool.is-on .ar-tool__count { background: var(--accent-app); color: var(--on-accent); }

/* Ein Zeichen aus assets/icons in der Schriftfarbe. */
.ar-glyph {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

svg.ar-glyph { background: none; -webkit-mask: none; mask: none; }

/* ---------- Hinweise und leere Zustände ------------------------------------ */

.ar-note {
  margin: 14px 0 0;
  padding: 10px 14px;
  background: var(--surface);
  box-shadow: inset 2px 0 0 var(--accent-app);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}

.ar-empty {
  margin-top: 18px;
  padding: 24px 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.ar-empty strong { display: block; margin-bottom: 4px; color: var(--text); font-weight: 600; }

.ar-link {
  margin-inline-start: 4px;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Gruppen: Pinned · Others ------------------------------------------ */

.ar-group { display: grid; gap: 12px; margin-top: 18px; min-width: 0; }
.ar-group + .ar-group { margin-top: 26px; }

.ar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}

.ar-head__title {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 11px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-strong, var(--text));
}

.ar-head__count { font-weight: 500; letter-spacing: .04em; color: var(--text-subtle); }

/* ---------- Mauerwerk --------------------------------------------------------- */

/* Bevor app/notes/ui.js die Spalten baut, stehen die Karten direkt im
   Raster – zwei Spalten, ohne Sprung beim ersten Bild. */
.ar-mason {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.ar-mason__col { display: grid; gap: 14px; align-content: start; min-width: 0; }

/* ---------- Die Karte ----------------------------------------------------------- */

.ar-card {
  --cut: 12px;
  --ar-rim: var(--line-strong);
  --ar-face: var(--surface);
  --ar-face-hover: var(--surface-2);

  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  container-type: inline-size;
  filter: drop-shadow(4px 5px 0 var(--py-plinth));
  transition: transform var(--dur) var(--ease-out);
}

.ar-card::before,
.ar-card::after {
  content: "";
  position: absolute;
  clip-path: var(--cut-clip);
  transition: background-color var(--dur) var(--ease-out);
}

.ar-card::before { inset: 0; z-index: -2; background: var(--ar-rim); }
.ar-card::after  { inset: 1px; z-index: -1; background: var(--ar-face); }

@media (hover: hover) {
  .ar-card:hover { transform: translate(-1px, -2px); }
  .ar-card:hover::after { background: var(--ar-face-hover); }
}

/* Eine Farbe: Rand im Ton, Fläche leicht getönt, Kopfzeile und
   Fortschritt in voller Farbe. Die Schrift bleibt hell – die Töne
   tragen keine Schrift, sie färben nur ein. */
.ar-card.has-tone {
  --ar-rim: color-mix(in srgb, var(--tone) 62%, transparent);
  --ar-face: color-mix(in srgb, var(--tone) 11%, var(--surface));
  --ar-face-hover: color-mix(in srgb, var(--tone) 17%, var(--surface));
}

.ar-card.is-selected { --ar-rim: var(--accent-app); }
.ar-card.is-selected::after { inset: 2px; }

.ar-card.is-dragging { transform: none; }

.ar-card__open {
  display: grid;
  gap: 7px;
  align-content: start;
  width: 100%;
  min-width: 0;
  padding: 15px 15px 6px;
  color: var(--text);
  text-align: start;
}

.ar-card__open:focus-visible {
  outline: 2px solid var(--accent-app);
  outline-offset: -5px;
}

.ar-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 9.5px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ar-card.has-tone .ar-card__eyebrow { color: var(--tone); }

.ar-card__kind {
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.ar-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.ar-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.52;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.ar-card.is-compact .ar-card__text { -webkit-line-clamp: 3; }

/* Häkchenliste: offene Punkte mit Kästchen, wie Keep sie zeigt. */
.ar-todo { display: grid; gap: 5px; }

.ar-todo__row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--text-dim);
}

.ar-todo__box {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  box-shadow: inset 0 0 0 1.5px var(--text-subtle);
}

.ar-card.has-tone .ar-todo__box { box-shadow: inset 0 0 0 1.5px var(--tone); }

.ar-todo__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.ar-todo__more { padding-inline-start: 21px; font-size: 12px; color: var(--text-subtle); }

.ar-todo__done {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 3px;
  padding-top: 7px;
  border-top: 1px dashed var(--line-strong);
  font-size: 12px;
  color: var(--text-subtle);
}

.ar-todo__tick {
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--text-subtle);
  -webkit-mask: url("../assets/icons/done_icon.svg") center / contain no-repeat;
          mask: url("../assets/icons/done_icon.svg") center / contain no-repeat;
}

.ar-card .nt-marks { margin-top: 2px; }

/* Fuß: wann, wie weit, und rechts die Knöpfe. */
.ar-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 0 6px 5px 15px;
}

.ar-card__meta {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 9.5px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ar-progress {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 9.5px);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.ar-progress__bar {
  position: relative;
  width: 30px;
  height: 3px;
  background: var(--surface-3);
}

.ar-progress__bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p);
  background: var(--tone, var(--accent-app));
}

/* In einer schmalen Spalte weicht der Balken der Zahl. */
@container (max-width: 210px) {
  .ar-progress__bar { display: none; }
}

.ar-card__tools { display: flex; flex: none; margin-inline-start: auto; }

/* Ein Knopf an der Karte: in Ruhe nur das Zeichen, unter dem Zeiger
   Fläche und Sockel, beim Drücken sinkt er ein. */
.ar-card__tool {
  --depth: 2px;
  position: relative;
  isolation: isolate;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--text-subtle);
  transition: color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.ar-card__tool::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.ar-card__tool:hover,
.ar-card__tool:focus-visible { color: var(--text); }

.ar-card__tool:hover::after,
.ar-card__tool:focus-visible::after {
  background: rgba(var(--o), .09);
  box-shadow: var(--depth) var(--depth) 0 0 rgba(var(--o), .16);
}

.ar-card__tool:active { transform: translate(var(--depth), var(--depth)); }
.ar-card__tool:active::after { box-shadow: none; }

.ar-card__tool .ar-glyph { width: 16px; height: 16px; }

.ar-card__svg { width: 18px; height: 18px; }

/* Der Stern: angeheftet steht er immer da und leuchtet. Sonst zeigt
   er sich nur unter dem Zeiger – auf dem Handy liegt „Pin" im ⋯. */
.ar-card__tool--pin:not(.is-on) { display: none; }
.ar-card__tool--pin.is-on { color: var(--accent-app); }
.ar-card.has-tone .ar-card__tool--pin.is-on { color: var(--tone); }

@media (hover: hover) {
  .ar-card:hover .ar-card__tool--pin,
  .ar-card:focus-within .ar-card__tool--pin { display: grid; }
}

.ar-card__tool--grip { cursor: grab; touch-action: none; }
.ar-card__tool--grip:active { cursor: grabbing; transform: none; }

/* Auswahl: ein Kästchen oben rechts, die Knöpfe treten zurück. */
.ar-card__check {
  position: absolute;
  top: 11px;
  inset-inline-end: 11px;
  display: none;
  width: 22px;
  height: 22px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--text-muted);
  pointer-events: none;
}

.is-selecting .ar-card__check { display: block; }
.is-selecting .ar-card__open { padding-inline-end: 44px; }
.is-selecting .ar-card__tools { visibility: hidden; }

.ar-card.is-selected .ar-card__check {
  background: var(--accent-app);
  box-shadow: none;
}

.ar-card.is-selected .ar-card__check::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--on-accent);
  -webkit-mask: url("../assets/icons/done_icon.svg") center / contain no-repeat;
          mask: url("../assets/icons/done_icon.svg") center / contain no-repeat;
}

/* Der Klon am Zeiger (LA.sortable) schwebt höher. */
.ar-card.is-ghost { filter: drop-shadow(8px 10px 0 var(--py-plinth)); }

/* ---------- Board: Kategorien ----------------------------------------------------- */

.ar-board { margin-top: 18px; min-width: 0; }

.ar-lanes { display: grid; gap: 24px; }

.ar-lane { display: grid; gap: 12px; align-content: start; min-width: 0; }

.ar-lane__head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.ar-lane.has-tone .ar-lane__head { border-bottom: 2px solid var(--tone); padding-bottom: 5px; }

.ar-lane__grip {
  position: relative;
  width: 28px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--text-subtle);
  cursor: grab;
  touch-action: none;
}

.ar-lane__grip::before { content: ""; position: absolute; inset: -4px; }
.ar-lane__grip:hover { color: var(--text); }
.ar-lane__grip .ar-card__svg { width: 16px; height: 16px; }

.ar-lane__title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 36px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 11px);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
  text-align: start;
}

.ar-lane__chev {
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 2px 3px;
  border-inline-end: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--text-subtle);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}

.ar-lane.is-collapsed .ar-lane__chev { margin-bottom: 0; transform: rotate(-45deg); }

/* Bis zu zwei Zeilen: in einer Spalte von 264 px riss ein Name wie
   „Behaviour patterns" sonst nach zwölf Zeichen ab. */
.ar-lane__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-width: 0;
  overflow: hidden;
  line-height: 1.35;
  word-break: normal;       /* zwischen Wörtern umbrechen, nie mitten drin */
}

.ar-lane.has-tone .ar-lane__name { color: var(--tone); }

.ar-lane__count { flex: none; font-weight: 500; letter-spacing: .04em; color: var(--text-subtle); }

.ar-lane__btn {
  --depth: 2px;
  position: relative;
  isolation: isolate;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--text-subtle);
  transition: color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.ar-lane__btn::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  transition: background-color var(--dur) var(--ease-out);
}

.ar-lane__btn:hover,
.ar-lane__btn:focus-visible { color: var(--text); }

.ar-lane__btn:hover::after,
.ar-lane__btn:focus-visible::after {
  background: rgba(var(--o), .09);
  box-shadow: var(--depth) var(--depth) 0 0 rgba(var(--o), .16);
}

.ar-lane__btn:active { transform: translate(var(--depth), var(--depth)); }
.ar-lane__btn:active::after { box-shadow: none; }

.ar-lane__btn .ar-glyph { width: 15px; height: 15px; }

.ar-lane__list { display: grid; gap: 14px; min-height: 30px; }

.ar-lane.is-collapsed .ar-lane__list { display: none; }

.ar-lane__empty {
  margin: 0;
  padding: 16px 14px;
  border: 1px dashed var(--line-strong);
  font-size: 12.5px;
  color: var(--text-subtle);
  text-align: center;
}

.ar-lane-new {
  justify-self: start;
  min-height: 44px;
  padding: 0 18px 0 15px;
  color: var(--text-dim);
}

.ar-lane-new__plus {
  width: 11px;
  height: 11px;
  background:
    linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat;
}

/* Ab 720 px: Spalten nebeneinander. Jede hat dieselbe Breite (264 bis
   360 px); passen nicht alle, rollt die Reihe seitwärts. Der Abstand
   unten hält die Sockel der untersten Karten im Bild. */
@media (min-width: 720px) {
  .ar-lanes {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    overflow-x: auto;
    padding: 2px 8px 14px 0;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .ar-lane {
    flex: 1 0 264px;
    max-width: 360px;
    scroll-snap-align: start;
  }

  .ar-lane-new { flex: none; }
}

/* Auf dem Tablet dürfen die Spalten schmaler sein – drei Kategorien
   stehen dann ganz im Bild, nur „New category" liegt rechts daneben. */
@media (min-width: 720px) and (max-width: 1023px) {
  .ar-lane { flex-basis: 220px; }

  /* Das „+" einer Spalte weicht dem Namen – „New note here" steht
     weiter im ⋯ der Kategorie, „New" oben über allem. */
  .ar-lane__btn[data-cat-add] { display: none; }
  .ar-lane__head { grid-template-columns: 28px minmax(0, 1fr) auto; }
}

/* ---------- Streifen der Auswahl ---------------------------------------------------

   Klebt unter der Topbar wie Delete · Save im Termin-Formular
   (.cal-form__bar): z-index 60, unter der Leiste (70). Die Fläche ist
   ein Pseudoelement mit Schnitt, damit der Schatten am Element nicht
   mit weggeschnitten wird. */

.ar-selbar {
  position: fixed;
  inset-inline-start: 50%;
  top: calc(var(--safe-top) + var(--sh-top-h) + 6px);
  z-index: 60;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(var(--flow, 560px), calc(100vw - 2 * var(--gutter, 16px)));
  padding: 8px 10px 8px 6px;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 18px rgba(var(--o-deep), .6));
  animation: ar-sel-in var(--dur) var(--ease-out) both;
}

.ar-selbar::before {
  --cut: 12px;
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--cut-clip);
  background: var(--surface-3);
}

/* Solange der Streifen steht, rückt der Inhalt um seine Höhe nach unten –
   sonst läge er über den Reitern. */
body.ar-selecting .archive { padding-top: 66px; }

@keyframes ar-sel-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
}

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

.ar-selbar__x {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--text);
}

.ar-selbar__x:hover { background: rgba(var(--o), .08); }

.ar-selbar__cross {
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 18px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 18px no-repeat;
  transform: rotate(45deg);
}

.ar-selbar__count {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- Menüs: ⋯ einer Karte, Ordnung, Kategorie --------------------------------- */

.ar-menu { display: grid; gap: 10px; }

.ar-menu__label {
  margin: 4px 0 -2px;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.ar-menu__rows { display: grid; gap: 6px; }

.ar-opt { gap: 14px; padding: 12px 16px; font-size: 15px; }
.ar-opt .ar-glyph { width: 18px; height: 18px; color: var(--text-muted); }
.ar-opt.opt-btn--danger .ar-glyph { color: currentColor; }

/* „Move up/down" auf dem Telefon, „left/right" auf dem Tisch – derselbe
   Pfeil, gedreht. */
.ar-opt--earlier .ar-glyph { transform: rotate(90deg); }
.ar-opt--later .ar-glyph { transform: rotate(-90deg); }

@media (min-width: 720px) {
  .ar-opt--earlier .ar-glyph { transform: none; }
  .ar-opt--later .ar-glyph { transform: rotate(180deg); }
}

.ar-radio {
  flex: none;
  width: 16px;
  height: 16px;
  box-shadow: inset 0 0 0 1.5px var(--text-muted);
}

.ar-opt--radio.is-on .ar-radio {
  background: var(--accent-app);
  box-shadow: inset 0 0 0 4px var(--surface-2);
}

/* Farbwahl: neun Felder, das erste ist „keine Farbe". Ein Feld ist
   eine Wahl, kein Knopf, der etwas tut – deshalb kein Sockel; die
   Wahl trägt einen Doppelring. */
.ar-tones {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
}

.ar-tone {
  position: relative;
  min-height: 30px;
  aspect-ratio: 1;
  background: var(--tone);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.ar-tone--none {
  background:
    linear-gradient(135deg, transparent 45%, var(--text-subtle) 45% 55%, transparent 55%),
    var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.ar-tone:hover { transform: translateY(-1px); }

.ar-tone[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
}

.ar-tone:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* Fortschritt der Haken – Balken plus Zahl, ohne eigene Farbe. */
.nt-progress { display: inline-flex; align-items: center; gap: 7px; }

.nt-progress__bar {
  position: relative;
  width: 52px;
  height: 3px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}

.nt-progress__bar::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: var(--p);
  background: var(--accent-app);
}

.nt-progress__label { font-variant-numeric: tabular-nums; }

.nt-empty {
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--text-faint);
}

.nt-empty--wide { text-align: center; }

/* ---------- Popup einer Notiz ----------------------------------------------------- */

.pop--note { width: min(520px, 100%); }

.nt-pop__title {
  font-size: 17px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nt-pop__body { gap: 12px; padding-bottom: 26px; }

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

/* Im Lesemodus steht der Text bündig, im Schreibmodus schafft der
   Editor selbst den Platz für Gutter und Griff. */
.nt-pop__doc .doc-pad { min-height: 90px; }

/* Marken unter dem Auszug */

.nt-marks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

.nt-chip {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .02em;
  color: var(--text-dim);
  white-space: nowrap;
}

.nt-chip--kind { border-color: var(--accent-deep); color: var(--accent-app); }

.nt-chip--tag {
  border-color: transparent;
  background: rgba(var(--o), .07);
  color: #c9ccd3;
}

.nt-chip--due { border-color: rgba(var(--o), .22); }
.nt-chip--due.is-soon { border-color: #f6d68a; color: #f6d68a; }
.nt-chip--due.is-over { border-color: #f26c6c; color: #ff9a9a; }

.nt-chip--bell {
  border-color: transparent;
  background: rgba(var(--o), .09);
  color: #c9ccd3;
}

.nt-chip--prio.is-high { border-color: #f26c6c; color: #ff9a9a; }
.nt-chip--prio.is-normal { border-color: #f6d68a; color: #f6d68a; }
.nt-chip--prio.is-low { border-color: rgba(var(--o), .22); }

/* ---------- Filterleiste ------------------------------------------------------ */

.nt-filters {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.nt-filters__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

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

.nt-select select {
  width: 100%;
  padding: 8px 28px 8px 11px;
  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;
}

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

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

.nt-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.nt-field__label,
.nt-filters__label {
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* UND/ODER */

.nt-logic { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--field-bg); }

.nt-logic__btn {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-faint);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.nt-logic__btn.is-on { background: var(--accent-deep); color: var(--on-accent); }

.nt-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.nt-tag {
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 12px;
  color: #c9ccd3;
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

.nt-tag:hover { border-color: var(--accent-deep); }

.nt-tag.is-on {
  border-color: var(--accent-app);
  background: rgba(var(--t-archive), .16);
  color: var(--g-03);
}

.nt-reset {
  justify-self: start;
  font-size: 12px;
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nt-reset:hover { color: var(--accent-app); }

/* =========================================================
   Notiz-Editor
   ========================================================= */

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

.nt-meta__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

/* Einstell-Popups */

.pop--note-set .pop__body { gap: 16px; }

.nt-field { display: grid; gap: 6px; }

/* ---------- Die Frist -------------------------------------------------------

   Zuerst die Antwort, dann die Ausnahme: drei Knöpfe für heute, morgen
   und das Wochenende, daneben das Datumsfeld für alles andere. Was
   gewählt ist, steht darunter in Worten („Tomorrow · end of day") –
   ein Datum muss man ausrechnen, einen Abstand nicht.

   Die Uhrzeit ist eingeklappt. Eine Frist hat fast nie eine, und ein
   Feld, das eine verlangt, verlangt eine Erfindung. */

.nt-due { display: grid; gap: 10px; }

.nt-due__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Dieselbe Form wie die Marken und Filter daneben (.nt-opt): Eckschnitt
   statt Radius, Fläche statt Rahmen. Im Archive ist nichts rund. */
.nt-due__chip {
  position: relative;
  padding: 10px 14px;
  --cut: 8px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 600;
  transition: color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}

.nt-due__chip:hover { background: var(--g-42); color: var(--text); }

.nt-due__chip.is-on {
  background: rgba(var(--t-archive), .22);
  color: var(--g-03);
}

/* Das Datumsfeld sitzt unsichtbar über seinem Knopf: der Knopf trägt
   die Form, das Feld den Kalender des Systems. */
.nt-due__chip--date { cursor: pointer; }

.nt-due__chip--date input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.nt-due__chip--date.is-set { color: var(--text); }

.nt-due__value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 13px;
  --cut: 9px;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--surface-2);
}

.nt-due__words { font-size: 15px; font-weight: 600; color: var(--text); }
.nt-due__sub { flex: 1; font-size: 12.5px; color: var(--text-faint); }

.nt-due__clear {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nt-due__clear:hover { color: var(--text); }

.nt-due__empty { font-size: 12.5px; color: var(--text-faint); margin: 0; }

.nt-due__more {
  justify-self: start;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-app);
}

.nt-due__more::before {
  content: "＋ ";
  font-weight: 400;
}

.nt-due__more.is-open::before { content: "− "; }

.nt-due__time { max-width: 160px; }

.nt-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid rgba(var(--o), .12);
  border-radius: 9px;
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  color-scheme: dark;
  outline: none;
}

.nt-input:focus { border-color: var(--accent-deep); }
.nt-input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; cursor: pointer; }

.nt-note { font-size: 12px; }

.nt-set { display: grid; gap: 8px; }

.nt-opts { display: flex; flex-wrap: wrap; gap: 6px; }

.nt-opt {
  padding: 8px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 12.5px;
  color: #c9ccd3;
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}

.nt-opt:hover { border-color: var(--accent-deep); }

.nt-opt.is-on {
  border-color: var(--accent-app);
  background: rgba(var(--t-archive), .16);
  color: var(--g-03);
}

.nt-field2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

.nt-add {
  width: 40px;
  border-radius: 9px;
  background: var(--accent-deep);
  color: var(--on-accent);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  transition: filter var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.nt-add:hover { filter: brightness(1.1); }
.nt-add:active { transform: scale(.92); }

/* =========================================================
   Erinnerungs-Banner
   ========================================================= */

.nt-toast {
  position: fixed;
  inset-inline-start: 50%;
  bottom: calc(18px + var(--safe-bottom));
  z-index: 90;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(420px, calc(100% - 32px));
  padding: 12px 14px;
  transform: translateX(-50%);
  background: var(--surface-2);
  animation: nt-toast-in 260ms var(--ease-out) both;

  /* Fläche, also Eckschnitt.

     Der Rand von vorher fällt dabei weg, und ein Ersatz als zweite Lage
     dahinter ginge hier nach hinten los: ein Pseudoelement auf
     z-index:-1 liegt nur dann UNTER der eigenen Fläche, wenn das
     Element keinen eigenen Stapelkontext aufmacht. Mit isolation:
     isolate – das clip-path-Bauten sonst brauchen – macht es einen auf,
     und die Kontur legte sich über die Meldung: ein grüner Block mit
     kaum lesbarer Schrift.

     Also wie beim Popup (.modal-panel): keine Kontur, Schatten über
     filter statt box-shadow (den schneidet clip-path mit weg), und die
     Bereichsfarbe trägt das Zeichen links. */
  --cut: 12px;
  clip-path: var(--cut-clip);
  filter: drop-shadow(0 10px 24px rgba(var(--o-deep), .55));
}

/* Über der Tableiste, nicht auf ihr. Bei 18px vom unteren Rand lag die
   Meldung genau auf „Today · Meals · Progress" und verdeckte die
   Beschriftungen, solange sie stand. */
.nt-toast { bottom: calc(var(--sh-tabs-h, 0px) + var(--safe-bottom) + 16px); }

@keyframes nt-toast-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.nt-toast.is-out { opacity: 0; transition: opacity 200ms var(--ease-out); }

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

.nt-toast__body { display: grid; gap: 2px; min-width: 0; }

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

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

/* Der Knopf HANDELT – er macht rückgängig oder trägt ein. Also die
   Knopfform: rechte Winkel, Sockel dahinter, und er sinkt beim Druck
   um genau die Sockeltiefe ein. Kein Eckschnitt: ein Rechteck mit
   geschnittenen Ecken ist ein Sechseck, und Sechsecke sind Flächen. */
.nt-toast__open {
  --depth: 2.5px;
  /* Ohne Bereichsklasse (Toasts von Home) gibt es kein --accent-deep –
     dann galt die Fläche der Karte, und die dunkle Schrift stand auf
     Dunkel (1,1:1). Der Rückfall ist der Zweitton der App. */
  --btn-face: var(--accent-deep, var(--c-home-stroke));
  --btn-face-hover: var(--accent-deep, var(--c-home-stroke));
  --btn-lift: var(--g-42);
  position: relative;
  isolation: isolate;
  padding: 7px 13px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--on-accent);
  font-size: 12.5px;
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-out);
}

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

.nt-toast__open::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.nt-toast__open::after { background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface)); }

.nt-toast__open:hover::after { background: var(--btn-face-hover); filter: brightness(1.1); }
.nt-toast__open:active { transform: translate(var(--depth), var(--depth)); }
.nt-toast__open:active::before { opacity: 0; }

/* Ab 900 mittig über dem Inhalt statt über dem Fenster – links steht
   die Schiene. Board und Notizliste bleiben unangetastet: ihre
   Raster (auto-fill 150px, auto-fit 140px) füllen den breiteren
   Platz von selbst mit mehr Spalten. */
@media (min-width: 900px) {
  body[data-shell] .nt-toast { inset-inline-start: calc(50% + var(--rail-w) / 2); }
}

/* ---------- Wegschicken: ×, Wischen, Zeitstrich (app/toast.js) ----------
   Die Spalten nach dem Text entstehen nach Bedarf: mit Knopf stehen
   Knopf und × nebeneinander, ohne Knopf das × allein – keine leere
   Spalte, die rechts eine Lücke ließe. */
.nt-toast {
  grid-template-columns: 22px minmax(0, 1fr);
  grid-auto-columns: auto;
  grid-auto-flow: column;
  padding-inline-end: 8px;
  touch-action: none;          /* das Wischen gehört der Meldung */
  -webkit-user-select: none;
          user-select: none;   /* Ziehen mit der Maus markiert keinen Text */
  cursor: grab;
}
.nt-toast.is-dragging { cursor: grabbing; }
.nt-toast button { cursor: pointer; }

/* Das ×: ein Knopf, also Rechteck mit Sockel – aber der leise. Laut ist
   in der Meldung genau einer (Undo, Settings …); das × ist die Neben-
   sache daneben. 32 px Trefferfläche, das Zeichen selbst 12 px. */
.nt-toast__close {
  --depth: 2px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
  --btn-lift: var(--btn-quiet-lift);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-inline-start: -4px;           /* rückt näher an den Knopf, Abstand bleibt */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-dim, var(--text));
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur) var(--ease-out);
}
.nt-toast__close::before,
.nt-toast__close::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.nt-toast__close::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nt-toast__close::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface-2));
}
.nt-toast__close:hover,
.nt-toast__close:focus-visible { color: var(--text); }
.nt-toast__close:hover::after,
.nt-toast__close:focus-visible::after { background: var(--btn-face-hover); }
.nt-toast__close:active { transform: translate(var(--depth), var(--depth)); }
.nt-toast__close:active::before { opacity: 0; }
.nt-toast__close svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
}

/* Wie viel Zeit noch bleibt: ein Strich am unteren Rand, der von rechts
   abläuft und steht, solange man die Meldung anfasst. */
.nt-toast::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent-app, var(--c-home));
  opacity: .55;
  transform-origin: left center;
  animation: nt-toast-clock var(--toast-ms, 9000ms) linear forwards;
  pointer-events: none;
}
.nt-toast.is-held::after,
.nt-toast.is-dragging::after { animation-play-state: paused; }
@keyframes nt-toast-clock {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nt-toast::after { display: none; }
}
html[data-motion="reduce"] .nt-toast::after { display: none; }

/* =========================================================
   Archive und Notizen – die Form der Knöpfe
   =========================================================

   Hier waren die Knöpfe rund: Filter, Marken, das UND/ODER, die
   Zählung neben einer Kategorie – alle auf border-radius 999px, also
   Kapseln. Mit der Sechseck-Sprache der App hatte das nichts zu tun,
   und die Startseite trägt sie als erste, weil das Archive direkt
   unter dem Ring steht.

   Es gilt dieselbe Trennung wie überall (siehe styles/components.css):

     Sechseck         ein Knopf, der nur ein Zeichen trägt
     Rechteck + Sockel ein Knopf, der etwas TUT
     Rechteck ohne     eine Fläche, die etwas UMSCHALTET

   Reiter, Filter und Marken bekommen deshalb den Eckschnitt, aber
   keine Tiefe. Sie schalten um; sie handeln nicht. Bekäme jede Fläche
   einen Sockel, hieße der Sockel nichts mehr.
   ========================================================= */

/* ---------- Zeichen-Knöpfe der Leiste ---------------------------------
   Anlegen, Einstellen, Regal. Form und Verhalten stehen in
   styles/components.css bei den anderen Zeichen-Knöpfen der App –
   Rechteck mit Eckschnitt und Sockel. Hier bleibt nur, was diese drei
   von den anderen unterscheidet. */

.nt-icon img { opacity: .9; }
.nt-icon:hover img { opacity: 1; }
.nt-icon.is-on img { opacity: 1; }

/* Der kleine Bruder in einer Kopfzeile trägt keinen Sockel: er ist eine
   Nebensache, kein Handgriff. */
.nt-icon--sm {
  width: 32px;
  height: 28px;
  --cut: 6px;
  --depth: 0px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
}
.nt-icon--sm::before { display: none; }
.nt-icon--sm img { width: 14px; opacity: .6; }
/* ---------- Handelnde Knöpfe: Eckschnitt und Sockel -------------------- */

/* Das Plus neben einem Feld – legt an, also hat es Tiefe. */
.nt-add {
  --cut: 8px;
  --depth: 3px;
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);

  position: relative;
  width: 40px;
  border-radius: 0;
  background: none;
  color: var(--on-accent);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out);
}

.nt-add::before,
.nt-add::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--cut-clip);
}

.nt-add::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.nt-add::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);
}

.nt-add:hover { filter: none; }
.nt-add:hover::after { background: var(--btn-face-hover); }
.nt-add:active { transform: translate(var(--depth), var(--depth)); }
.nt-add:active::before { opacity: 0; }

/* Der Knopf im Erinnerungs-Banner – öffnet die Notiz, also handelt er. */
.nt-toast__open {
  --cut: 7px;
  --depth: 2.5px;
  /* Rückfall für Toasts ohne Bereichsklasse – siehe weiter oben. */
  --btn-face: var(--accent-deep, var(--c-home-stroke));
  --btn-face-hover: var(--accent-app, var(--c-home));
  --btn-lift: var(--g-42);

  position: relative;
  padding: 7px 13px;
  border-radius: 0;
  background: none;
  color: var(--on-accent);
  font-size: 12.5px;
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-out);
}

.nt-toast__open::before,
.nt-toast__open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--cut-clip);
}

.nt-toast__open::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.nt-toast__open::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);
}

.nt-toast__open:hover { filter: none; }
.nt-toast__open:hover::after { background: var(--btn-face-hover); }
.nt-toast__open:active { transform: translate(var(--depth), var(--depth)); }
.nt-toast__open:active::before { opacity: 0; }

/* ---------- Umschaltende Flächen: Eckschnitt, keine Tiefe -------------- */

/* Filter, Marken, UND/ODER, Zählung: Flächen, keine Handgriffe. */
.nt-tag,
.nt-opt {
  --cut: 8px;
  border-radius: 0;
  clip-path: var(--cut-clip);
  /* clip-path schneidet den Rahmen an den Ecken mit weg. Statt eines
     Rahmens trägt die Marke deshalb eine eigene Fläche – im Ruhezustand
     kaum vom Grund zu unterscheiden, eingeschaltet deutlich. */
  border-color: transparent;
  background: var(--surface-2);
}

.nt-tag:hover,
.nt-opt:hover { background: var(--surface-3); border-color: transparent; }

.nt-tag.is-on,
.nt-opt.is-on {
  border-color: transparent;
  background: var(--accent-deep);
  color: var(--on-accent);
}

.nt-logic {
  --cut: 8px;
  border-radius: 0;
  clip-path: var(--cut-clip);
}

.nt-logic__btn {
  --cut: 6px;
  border-radius: 0;
  clip-path: var(--cut-clip);
}

.nt-chip,
.nt-cat__count {
  --cut: 5px;
  border-radius: 0;
  clip-path: var(--cut-clip);
}

/* Ein Rahmen überlebt den Schnitt nicht – die Marke bekommt statt
   dessen eine Fläche. */
.nt-chip {
  border-color: transparent;
  background: var(--surface-2);
}

.nt-chip--kind { background: var(--surface-3); color: var(--accent-app); }

/* Die Marken tragen ihren Zustand über den Rahmen: fällig, überfällig,
   Priorität. Ein Rahmen überlebt den Eckschnitt aber nicht – an den
   beiden Schrägen bleibt ein farbiger Splitter stehen, und der liest
   als Fehler, nicht als Zustand.

   Die Farbe wandert deshalb vom Rahmen in die Fläche: derselbe Ton,
   stark verdünnt, dazu die Schrift in voller Farbe. Das trägt denselben
   Zustand, hält die 4,5:1 und hat keine Kante, die abreißen kann. */

.nt-chip--kind,
.nt-chip--tag,
.nt-chip--due,
.nt-chip--bell,
.nt-chip--prio { border: 0; }

.nt-chip--due { background: var(--surface-2); color: var(--text-muted); }

.nt-chip--due.is-soon  { background: rgba(246, 214, 138, .16); color: #f6d68a; }
.nt-chip--due.is-over  { background: rgba(242, 108, 108, .18); color: #ff9a9a; }

.nt-chip--prio.is-high   { background: rgba(242, 108, 108, .18); color: #ff9a9a; }
.nt-chip--prio.is-normal { background: rgba(246, 214, 138, .16); color: #f6d68a; }
.nt-chip--prio.is-low    { background: var(--surface-2); color: var(--text-muted); }

.nt-chip--bell { background: var(--surface-2); }

.nt-filters,
.nt-empty {
  --cut: 12px;
  position: relative;
  border: 0;
  border-radius: 0;
  background: none;
}

.nt-filters::before,
.nt-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--cut-clip);
  background: var(--surface);
}

/* Der Schnitt frisst sonst die Schrift. Eine Marke ist knapp 18 px hoch;
   ein 5-px-Schnitt reicht auf dieser Höhe bis in die Zeile hinein und
   nimmt dem ersten und letzten Zeichen die Ecke. Der Schnitt wird
   deshalb kleiner, und die Marke bekommt links und rechts so viel Luft,
   dass die Schräge neben der Schrift verläuft statt durch sie. */

.nt-chip,
.nt-cat__count {
  --cut: 4px;
  padding: 3px 11px;
}

.nt-tag  { --cut: 7px; padding: 6px 13px; }
.nt-opt  { --cut: 7px; padding: 8px 15px; }
.nt-logic__btn { --cut: 5px; padding: 4px 12px; }

/* Dieselbe Faustregel wie im Sheet: unter etwa 30 px Kantenlänge
   bekommt ein Feld mit einem Zeichen darin keinen Eckschnitt, sonst
   nimmt die Schräge dem Zeichen die Ecke. Die Zählung neben einer
   Kategorie ist 29 × 22 px – zu klein. Sie bleibt ein Rechteck. */

.nt-cat__count { clip-path: none; }

/* Ein Knopf ist ein Rechteck – ohne Eckschnitt. Siehe das Ende von
   styles/components.css. Diese beiden stehen hier, weil notes.css
   später geladen wird und ihre Regeln oben sonst stehen blieben. */

.nt-add::before,        .nt-add::after,
.nt-toast__open::before, .nt-toast__open::after {
  clip-path: none;
  border-radius: 0;
}

/* Die Filter sind Knöpfe, keine Flächen: gerade Ecken. Die Marken an
   einer Karte (nt-chip) bleiben geschnitten – die drückt niemand, die
   liest man. */
.nt-tag,
.nt-opt,
.nt-logic,
.nt-logic__btn { clip-path: none; border-radius: 0; }

/* =========================================================
   Erledigtes und Verfallenes

   Eine Häkchenliste liest sich von oben nach unten – wenn
   oben steht, was noch aussteht. Abgehaktes rutscht deshalb
   unter eine eigene Zeile, Verfallenes darunter.

   Und zwar wirklich: sortiert wird der gespeicherte `blocks[]`
   im Store (store.reorderTasks), nicht das Raster im Bild.
   Vorher lief das als reine Ansichtssache über `order` – das
   ging, solange nur gelesen wurde. Sobald derselbe Bildschirm
   auch bearbeitet werden kann, stünden zwei Reihenfolgen
   nebeneinander, die gesehene und die gespeicherte.

   Die Zeilen selbst sind keine Blöcke: sie tragen
   `data-task-head` und werden beim Speichern ausdrücklich
   übergangen (blocksIn() in app/doc/editor.js).
   ========================================================= */

.nt-task-head {
  margin: 16px 0 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: max(var(--fs-floor), 11px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  user-select: none;
}

/* Die erste Zwischenzeile eines Dokuments braucht keinen Abstand nach
   oben, wenn nichts über ihr steht – etwa in einer Liste, in der alles
   abgehakt ist. */
.nt-task-head:first-child { margin-top: 4px; border-top: 0; padding-top: 0; }

/* Verpasst ist nicht kaputt.

   Rot ist in dieser App dem Zerstörerischen vorbehalten – Löschen,
   Verwerfen, Abbrechen. Eine Aufgabe, deren Frist verstrichen ist, hat
   nichts zerstört; sie ist liegengeblieben. Sie bekommt deshalb keine
   Warnfarbe, sondern eine gestrichelte Linie und einen kleinen Strich
   davor: „hier hört das Laufende auf". Wer die Zeile lesen will, liest
   sie; wer die Liste überfliegt, wird nicht angeschrien.

   Weg kommt eine verpasste Aufgabe nur durch den Nutzer – sie doch noch
   abhaken, im Stift-Popup wieder öffnen, oder „Reset all checkboxes"
   für die ganze Liste (app/notes/sweep.js erklärt, warum sie nicht von
   selbst weiterrollt). */

.nt-task-head[data-task-head="expired"] {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top-style: dashed;
  color: var(--text-subtle);
}

.nt-task-head[data-task-head="expired"]::before {
  content: "";
  width: 10px;
  height: 1.5px;
  flex: none;
  background: currentColor;
}

/* =========================================================
   Aufgaben-Dialoge

   Zahlenfeld, Wochentage, Tage im Monat, die Zusammenfassung
   einer Regel und der Schalter für die Hauptliste. Sie stehen
   in zwei Popups – dem einer Aufgabe und dem einer Liste –
   und sehen dort gleich aus, weil es dieselben Bausteine sind
   (N.tasks in app/notes/editor.js).
   ========================================================= */

/* Der Name der Aufgabe über den Feldern – man soll sehen, was man
   gerade einstellt, ohne das Popup zu schließen. */
.nt-task-dlg__name {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}

/* ---------- Zahlenfeld ---------------------------------------------------- */

/* Auf dem Handy ist der Stepper der einzige Weg, eine Zahl zu setzen,
   ohne die Tastatur zu holen. Getippt werden darf trotzdem – das Feld
   in der Mitte bleibt ein Feld. */
.nt-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: stretch;
  gap: 8px;
}

.nt-step__btn {
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nt-step__btn:hover { background: var(--surface-3); }
.nt-step__btn:active { transform: scale(.94); }

/* Derselbe Kasten wie .nt-input – ein Zahlenfeld ist ein Feld und soll
   nicht wie ein zweiter Knopf zwischen den Knöpfen liegen. */
.nt-step__value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1.5px solid rgba(var(--o), .12);
  border-radius: 9px;
  background: var(--field-bg);
}

.nt-step__value:focus-within { border-color: var(--accent-deep); }

.nt-step__input {
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;          /* unter 16px zoomt iOS beim Fokus hinein */
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  text-align: end;
}

.nt-step__input:focus { outline: none; }

/* Die Pfeilchen des Zahlenfeldes verdoppeln die beiden Knöpfe daneben
   und stehen bei jeder Breite im Weg. */
.nt-step__input::-webkit-outer-spin-button,
.nt-step__input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.nt-step__input { appearance: textfield; }

.nt-step__unit {
  font-size: 12.5px;
  color: var(--text-subtle);
  white-space: nowrap;
}

/* ---------- Tage ---------------------------------------------------------- */

/* Sieben Felder, Montag zuerst – wie überall in dieser App (WEEKDAYS in
   app/calendar/store.js). Feste Spalten, damit die Woche eine Woche
   bleibt und nicht bei jeder Breite anders umbricht. */
.nt-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.nt-days--month { grid-template-columns: repeat(7, minmax(0, 1fr)); }

.nt-day {
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.nt-day--num {
  min-height: 32px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.nt-day:hover { background: var(--surface-3); color: var(--text); }

.nt-day.is-on {
  background: var(--accent-deep);
  color: var(--on-accent);
}

/* ---------- Regel --------------------------------------------------------- */

.nt-rule { display: grid; gap: 14px; }

/* Die Zeile, die sagt, was die Regel bedeutet – ohne sie stellt man
   Felder ein und weiß nicht, was dabei herauskommt. */
.nt-rule__sum {
  margin: 0;
  padding: 10px 12px;
  background: var(--surface-2);
  border-inline-start: 2px solid var(--accent-deep);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

/* Ungültig ist kein Fehler, sondern eine offene Angabe: dieselbe Zeile,
   nur mit dem Ton, den auch eine überfällige Marke trägt. */
.nt-rule__sum.is-bad {
  border-inline-start-color: #f26c6c;
  background: rgba(242, 108, 108, .12);
  color: #ff9a9a;
}

.nt-rule__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-subtle);
}

/* ---------- Schalter ------------------------------------------------------ */

/* „Set as main grocery list“ – eine Zeile mit Erklärung und einem
   Zustand rechts. Ein Rechteck, wie jeder Knopf in dieser App. */
.nt-switch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  text-align: start;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nt-switch:hover { background: var(--surface-3); }

.nt-switch__body { display: grid; gap: 3px; min-width: 0; }

.nt-switch__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.nt-switch__hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-subtle);
}

/* Derselbe Haken wie an einem To-do – zwei Linien, kein Icon. */
.nt-switch__mark {
  width: 20px;
  height: 20px;
  flex: none;
  border: 1.5px solid var(--accent-deep);
  background: transparent;
  position: relative;
  transition: background-color var(--dur) var(--ease-out);
}

.nt-switch.is-on .nt-switch__mark { background: var(--accent-app); }

.nt-switch.is-on .nt-switch__mark::after {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- Mehrzeiliges Feld --------------------------------------------- */

.nt-input--area {
  min-height: 76px;
  resize: vertical;
  line-height: 1.55;
  font-family: inherit;
}

/* Art mit Zeichen: das Symbol nimmt die Schriftfarbe der Marke an,
   damit Marke und Zeichen als ein Stück lesen. */
.nt-chip--kind.has-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nt-chip--kind.has-mark::before {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

/* =========================================================
   „Wie hast du sie erledigt?"

   Eine Aufgabe mit Dauer fragt beim Häkchen nach. Drei Wege,
   und der Unterschied zwischen ihnen ist der ganze Punkt des
   Logbuchs – eine gemessene halbe Stunde ist etwas anderes
   als eine behauptete. Deshalb sind es drei ausgeschriebene
   Zeilen mit Erklärung und keine drei Wörter nebeneinander:
   wer hier falsch tippt, schreibt eine falsche Zeit in seine
   eigene Vergangenheit.
   ========================================================= */

.nt-choices { display: grid; gap: 8px; }

/* Ein Knopf ist ein Rechteck – ohne Eckschnitt, wie überall.
   Die Marke links ist derselbe Strich wie an einer Menüzeile:
   sie sagt „hier lässt sich drücken", ohne ein Symbol zu
   erfinden, das nichts bedeutet. */
.nt-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  text-align: start;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nt-choice:hover { background: var(--surface-3); }
.nt-choice:active { transform: scale(.99); }

.nt-choice__mark {
  width: 3px;
  height: 34px;
  margin-top: 2px;
  background: var(--accent-deep);
}

/* Der erste Weg ist der, um den es geht: mitlaufen lassen. Er
   bekommt deshalb den vollen Akzent, die beiden anderen den
   ruhigen Strich. Kein zweites Signal – Reihenfolge und Farbe
   sagen dasselbe. */
.nt-choice:first-child .nt-choice__mark { background: var(--accent-app); }

.nt-choice__body { display: grid; gap: 3px; min-width: 0; }

.nt-choice__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.nt-choice__hint {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-subtle);
}

/* =========================================================
   Der Countdown (app/notes/countdown.js)

   Ein Bildschirm mit genau einer Zahl darauf. Wer eine Aufgabe
   mitlaufen lässt, legt das Telefon weg – was hier steht, muss
   aus zwei Metern Entfernung lesbar sein und sonst nichts.
   ========================================================= */

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

.nt-cd__list {
  margin: 0;
  font-size: max(var(--fs-floor), 11px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  text-align: center;
}

.nt-cd__name {
  margin: 0;
  max-width: var(--flow);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text-strong);
  text-align: center;
}

/* ---------- Die Uhr ------------------------------------------------------ */

/* Der Bogen ist von Hand gezeichnet – ein Kreis, dessen Strich über
   stroke-dasharray aufgezogen wird. Für eine Linie eine Bibliothek zu
   laden wäre ein Fremdkörper (siehe die Diagramme im Fitness-Teil). */
.nt-cd__dial {
  position: relative;
  width: min(260px, 72vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.nt-cd__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Bei −90° beginnt der Bogen oben statt rechts – eine Uhr fängt
     um zwölf an. */
  transform: rotate(-90deg);
}

.nt-cd__track {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 10;
}

.nt-cd__run {
  fill: none;
  stroke: var(--accent-app);
  stroke-width: 10;
  stroke-linecap: butt;
  transition: stroke-dashoffset 1s linear;
}

/* Angehalten: der Bogen tritt zurück, damit der Unterschied ohne
   Farbenlesen erkennbar bleibt – die Zahl steht ja still. */
.nt-cd__dial.is-paused .nt-cd__run {
  stroke: var(--text-disabled);
  transition: none;
}

.nt-cd__center { display: grid; justify-items: center; gap: 2px; }

.nt-cd__time {
  font-family: var(--font-mono);
  font-size: clamp(40px, 13vw, 56px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-strong);
}

.nt-cd__unit {
  font-size: max(var(--fs-floor), 11px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* ---------- Länge und Knöpfe --------------------------------------------- */

.nt-cd__setup,
.nt-cd__acts {
  display: grid;
  gap: 8px;
  width: min(300px, 100%);
}

.nt-cd__act {
  padding: 13px 16px;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nt-cd__act:hover { background: var(--surface-3); }
.nt-cd__act:active { transform: scale(.98); }

/* Der eine Knopf, um den es auf diesem Bildschirm geht. */
.nt-cd__act--go {
  background: var(--accent-app);
  color: var(--on-accent);
}

.nt-cd__act--go:hover { background: var(--accent-app); filter: brightness(1.08); }

/* Abbrechen ist kein Ziel – es steht da, aber es drängt sich nicht auf. */
.nt-cd__act--quiet {
  background: none;
  font-weight: 500;
  color: var(--text-subtle);
}

.nt-cd__act--quiet:hover { background: var(--surface-2); color: var(--text); }

/* ---------- Danach -------------------------------------------------------- */

.nt-cd__done {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px 0;
}

/* Derselbe Haken wie an einem To-do – zwei Linien, kein Symbol. */
.nt-cd__done-mark {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0;
  background: var(--accent-app);
}

.nt-cd__done-mark::after {
  content: "";
  position: absolute;
  inset-inline-start: 24px;
  top: 15px;
  width: 15px;
  height: 30px;
  border: solid var(--ink);
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}

.nt-cd__done-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-strong);
}

.nt-cd__done-text {
  margin: 0;
  max-width: var(--flow);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/* =========================================================
   Der Streifen zum laufenden Countdown

   Er hängt an document.body, außerhalb jeder Ansicht, und
   sitzt auf derselben Höhe wie der des Workouts
   (styles/fitness.css) – über der Tableiste, unter der
   Topbar. Beide können nicht gleichzeitig laufen: jeder
   gehört zu einem Bildschirm, den man verlassen hat.
   ========================================================= */

.nt-chip-run {
  position: fixed;
  inset-inline-start: 50%;
  bottom: calc(var(--safe-bottom) + var(--sh-tabs-h) + 12px);
  z-index: 60;
  transform: translateX(-50%);

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  width: min(var(--flow), calc(100vw - 2 * var(--gutter)));
  padding: 6px 6px 6px 10px;

  border: 1.5px solid var(--c-archive-stroke);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(var(--o-deep), .55);
  animation: nt-chip-in var(--dur) var(--ease-out) both;
}

.nt-chip-run[hidden] { display: none; }

@keyframes nt-chip-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.nt-chip-run__go {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: start;
}

/* Ein leeres Quadrat mit Rahmen: dasselbe Zeichen wie ein offenes
   To-do. Es läuft ja noch etwas, das erst danach einen Haken bekommt. */
.nt-chip-run__mark {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--c-archive-stroke);
}

.nt-chip-run__text { display: grid; min-width: 0; }

.nt-chip-run__name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nt-chip-run__hint { font-size: 12px; color: var(--text-subtle); }

.nt-chip-run__clock {
  font-family: var(--font-mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--c-archive);
}

.nt-chip-run__pause {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
}

.nt-chip-run__pause img { width: 18px; }
.nt-chip-run__pause:active { transform: scale(.92); }

/* Angehalten: die Uhr tritt zurück, damit der Unterschied ohne
   Farbenlesen erkennbar bleibt. Der Zusatz am Hinweis sagt es noch
   einmal in Worten – dieselbe Regel wie am Workout-Streifen. */
.nt-chip-run.is-paused .nt-chip-run__clock { color: var(--text-subtle); }
.nt-chip-run.is-paused .nt-chip-run__hint::after { content: " · paused"; }

/* =========================================================
   Haken zurücknehmen

   Steht oben im Stift-Popup einer erledigten Aufgabe. Der
   Haken selbst tut nichts mehr, sobald er sitzt – ein
   zweiter Fingertipp soll eine Erledigung nicht aus Versehen
   aufheben. Dafür gibt es diesen Weg, und er sieht bewusst
   anders aus als die Felder darunter: er ändert nicht eine
   Angabe an der Aufgabe, sondern ihren Zustand.

   Nicht rot: Zurücknehmen ist keine Zerstörung. Die Zeile im
   Logbuch wird nicht gelöscht, sondern durch eine zweite
   aufgehoben (store.uncheckTask) – deshalb sagt der Hinweis
   „withdrawn" und nicht „deleted".
   ========================================================= */

.nt-undo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  width: 100%;
  margin-bottom: 2px;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  text-align: start;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nt-undo:hover { background: var(--surface-3); }
.nt-undo:active { transform: scale(.99); }

/* Ein Haken mit einem Strich darüber – dasselbe Zeichen wie an der
   Aufgabe, nur durchgestrichen. Von Hand, wie alles Grafische hier. */
.nt-undo__mark {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  border: 1.5px solid var(--accent-deep);
}

.nt-undo__mark::before {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--text-subtle);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.nt-undo__mark::after {
  content: "";
  position: absolute;
  inset-inline-start: -3px;
  top: 8px;
  width: 24px;
  height: 1.5px;
  background: var(--text);
  transform: rotate(-32deg);
}

.nt-undo__body { display: grid; gap: 3px; min-width: 0; }

.nt-undo__name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}

.nt-undo__hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-subtle);
}

/* =========================================================
   Eine Zeile hinzufügen

   Steht unter jeder Aufgabenliste, in Daumenreichweite. Eine
   Liste führt man, indem man dauernd etwas hinzufügt – der
   Weg dahin darf nicht „ans Ende tippen und hoffen" heißen.

   Er sieht bewusst nicht wie eine Aufgabe aus: keine Box,
   keine Marke, nur ein Kreuz und ein Wort. Sonst zählte man
   ihn beim Überfliegen mit.
   ========================================================= */

.nt-task-add {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 2px;
  padding: 11px 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-subtle);
  text-align: start;
  transition: color var(--dur-fast) var(--ease-out);
}

.nt-task-add:hover { color: var(--text); }
.nt-task-add:active { transform: scale(.99); }

/* Das Kreuz sitzt genau dort, wo darüber die Häkchen stehen – die
   Spalte der Liste läuft durch, und der Knopf reiht sich ein, statt
   danebenzustehen. Zwei Striche, von Hand, kein Symbol. */
.nt-task-add__mark {
  position: relative;
  width: 19px;
  height: 19px;
  flex: none;
  border: 1.5px dashed var(--accent-deep);
}

.nt-task-add__mark::before,
.nt-task-add__mark::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.nt-task-add__mark::before { width: 9px; height: 1.5px; }
.nt-task-add__mark::after  { width: 1.5px; height: 9px; }

.nt-task-add:hover .nt-task-add__mark { border-style: solid; }

/* =========================================================
   Vorlagen: was eine neue Notiz werden soll

   Der „+" im Notes-Reiter fragt zuerst nach der Form. Die
   beiden Listen sind eingebaute Vorlagen und lassen sich
   bearbeiten wie jede eigene – deshalb trägt jede Zeile
   einen Stift, und deshalb sehen eingebaute und eigene
   gleich aus. Was gleich funktioniert, sieht gleich aus.
   ========================================================= */

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

.nt-tpls__group { display: grid; gap: 6px; }

.nt-tpls__label {
  margin-top: 6px;
  font-size: max(var(--fs-floor), 11px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.nt-tpls__hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-subtle);
}

/* Zeile und Stift teilen sich eine Fläche, sind aber zwei Ziele: die
   Zeile legt an, der Stift öffnet die Vorlage. Der Spalt dazwischen ist
   der Grund der Fläche – kein Rahmen, der beim Eckschnitt abrisse. */
.nt-tpl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px;
}

.nt-tpl__pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  text-align: start;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nt-tpl__pick:hover { background: var(--surface-3); }
.nt-tpl__pick:active { transform: scale(.99); }

/* Die leere Notiz steht allein und über der Gruppe – sie bekommt die
   volle Breite, weil sie keinen Stift hat. */
.nt-tpl__pick--blank { margin-bottom: 2px; }

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

.nt-tpl__body { display: grid; gap: 2px; min-width: 0; }

.nt-tpl__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nt-tpl__meta {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nt-tpl__edit {
  width: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nt-tpl__edit:hover { background: var(--surface-3); }
.nt-tpl__edit:active { transform: scale(.94); }

.nt-tpl__pen {
  width: 16px;
  height: 16px;
  background: var(--text-subtle);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nt-tpl__edit:hover .nt-tpl__pen { background: var(--text); }

/* Die Zeile über einer Vorlage im Editor: sie sagt, dass hier ein
   Muster geschrieben wird und keine Notiz. Ohne sie sähe der Bildschirm
   aus wie jeder andere, und man änderte eine Vorlage im Glauben, eine
   Liste zu führen. */
.nt-tpl-note {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-inline-start: 2px solid var(--accent-deep);
  background: var(--surface-2);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* =========================================================
   Notiz-Editor: Zahnrad oben rechts und die Metazeile
   ========================================================= */

/* Auf dem Telefon nur das Zeichen – der Platz gehört „‹ Notes" und dem
   Bereichsnamen. Ab 560 px steht das Wort daneben. */
.nt-ed-set__label { display: none; }

@media (min-width: 560px) {
  .nt-ed-set__label { display: inline; }
}

/* Die Metazeile („To-do list · due tomorrow") und die Tags stehen in
   derselben Spalte wie der Text darunter, eingerückt um den Rand für
   „+" und Griff (.doc-body, 42 px). Vorher lief sie am linken Rand der
   breiteren Seite, auf dem Rechner eine Handbreit neben der Notiz. */
#nt-editor > .jr-meta,
#nt-editor > .nt-meta__tags {
  box-sizing: border-box;
  width: 100%;
  max-width: min(560px, 100%);
  margin-inline: auto;
  padding-inline-start: 42px;
}

/* =========================================================
   Archive: wie viel eine Karte zeigt (data-density, app/notes/ui.js)

   Wenige Notizen: breite Spalten und mehr Inhalt. Viele: der Anblick.
   Die Zahl der Listenpunkte regelt ui.js, die Zeilen Text regelt hier
   line-clamp.
   ========================================================= */

.ar-todo__row[hidden],
.ar-todo__more[hidden] { display: none; }

.ar-mason[data-density="compact"] .ar-card__text { -webkit-line-clamp: 4; }
.ar-mason[data-density="normal"]  .ar-card__text { -webkit-line-clamp: 8; }
.ar-mason[data-density="roomy"]   .ar-card__text { -webkit-line-clamp: 18; }

/* Mit viel Platz darf die Schrift einen Hauch größer werden – eine
   breite Karte mit 13,5-px-Text liest sich wie ein Beipackzettel. */
/* Nur wenn die Karte auch wirklich breit ist (≥ 300 px) – zwei Spalten
   auf dem Telefon sind „roomy" in der Höhe, aber nicht in der Breite. */
@container (min-width: 300px) {
  .ar-mason[data-density="roomy"] .ar-card__title { font-size: 16.5px; -webkit-line-clamp: 4; }
  .ar-mason[data-density="roomy"] .ar-card__text,
  .ar-mason[data-density="roomy"] .ar-todo__row { font-size: 14.5px; }
  .ar-mason[data-density="roomy"] .ar-card__open { padding: 18px 18px 8px; gap: 9px; }
  .ar-mason[data-density="roomy"] .ar-card__foot { padding-inline-start: 18px; }
}

/* =========================================================
   Farbwahl mit Rad · Vorgaben für neue Aufgaben (0.4.0)
   ========================================================= */

/* Zehn Felder statt neun: das letzte ist das Farbrad (LA.wheel). Auf
   390 px bleibt jedes Feld rund 27 px – über den 24 px von WCAG 2.5.8,
   und ohne Eckschnitt, weil darunter kein Schnitt mehr passt. */
.ar-tones {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
}

.ar-tone { min-height: 0; }

/* Ungewählt zeigt das Feld, was dahinter liegt: alle Töne rundherum,
   in der Mitte ein kleines Quadrat im Grund des Fensters – kein Punkt,
   rund ist in dieser App nichts. */
.ar-tone--wheel {
  background:
    linear-gradient(var(--surface), var(--surface)) center / 30% 30% no-repeat,
    conic-gradient(from 90deg, #f28b82, #f6c26b, #d8e27a, #7fd6a8, #74c7ec, #8fa4ff, #d59bf0, #f28b82);
}

/* Eine eigene Farbe trägt das Feld selbst – mit einem kleinen Keil in
   der Ecke, damit man es von den acht festen Tönen unterscheidet. */
.ar-tone--wheel.is-custom {
  background:
    linear-gradient(135deg, transparent 62%, var(--surface) 62% 70%, transparent 70%),
    conic-gradient(from 90deg at 86% 86%, #f28b82, #f6c26b, #7fd6a8, #74c7ec, #d59bf0, #f28b82) 100% 100% / 34% 34% no-repeat,
    var(--tone);
}

html[data-eink] .ar-tone--wheel {
  background: repeating-linear-gradient(45deg, #000000 0 2px, #ffffff 2px 5px);
  box-shadow: inset 0 0 0 1.5px #000000;
}
html[data-eink] .ar-tone--wheel.is-custom { background: var(--tone); }

/* ---------- New tasks ---------------------------------------------------- */

.nt-dflt__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Für wen das gilt: zwei Felder, das gewählte wie der aktive Reiter.
   Eine Fläche, die man liest und umschaltet – mit Eckschnitt. */
.nt-dflt__scope {
  --cut: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 3px;
  background: var(--bg);
  clip-path: var(--cut-clip);
}

.nt-dflt__seg {
  --cut: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.nt-dflt__seg:hover { color: var(--text); }
.nt-dflt__seg:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -2px; }

.nt-dflt__seg.is-on {
  clip-path: var(--cut-clip);
  background: var(--surface-3);
  box-shadow: inset 0 -2px 0 var(--accent-app);
  color: var(--text-strong);
  font-weight: 600;
}

.nt-dflt__time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.nt-dflt__time .nt-due__time { width: 140px; }

/* Die Probezeile: eine echte Aufgabe, gezeichnet vom selben Baustein,
   auf der Fläche, auf der sie später steht. */
.nt-dflt__preview { display: grid; gap: 8px; }

.nt-dflt__sample {
  --cut: 12px;
  padding: 10px 14px 12px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
  pointer-events: none;
  animation: nt-dflt-in var(--dur) var(--ease-out);
}

.nt-dflt__sample .doc-b { margin: 0; }
.nt-dflt__sample .doc-task__edit { display: none; }

@keyframes nt-dflt-in {
  from { opacity: .4; transform: translateY(3px); }
  to   { opacity: 1;  transform: none; }
}

/* Apply ist der Schritt, auf den das Fenster hinausläuft. Im Grau des
   Archive trug er dieselbe Fläche (--accent-deep) wie jeder gewählte
   Chip darüber und ging zwischen ihnen unter. Jetzt die hellste Fläche
   im Fenster – das helle Archive-Grau, dunkle Schrift (≈ 11:1), das
   mittlere Grau als Sockel. */
.nt-dflt__apply {
  --ask-face: var(--accent-app);
  --ask-lift: var(--accent-deep);
  color: var(--bg);
  font-weight: 700;
  letter-spacing: .01em;
}

/* Die Zeile „New tasks" im Fenster der Liste führt weiter – ein Pfeil
   statt des Hakens. */
.nt-switch__chev {
  width: 8px;
  height: 8px;
  margin-inline-end: 4px;
  border-top: 1.5px solid var(--text-subtle);
  border-inline-end: 1.5px solid var(--text-subtle);
  transform: rotate(45deg);
}

.nt-switch--go:hover .nt-switch__chev { border-color: var(--accent-app); }

html[data-eink] .nt-dflt__scope { background: #ffffff; box-shadow: inset 0 0 0 2px #000000; clip-path: none; }
html[data-eink] .nt-dflt__seg.is-on { background: #000000; color: #ffffff; box-shadow: none; }
html[data-eink] .nt-dflt__sample { background: #ffffff; box-shadow: inset 0 0 0 1.5px #000000; clip-path: none; }
html[data-eink] .nt-dflt__apply { --ask-face: #000000; --ask-lift: #000000; color: #ffffff; }


/* Felder: Eckschnitt statt Radius (diligent-work). Der Rahmen überlebt
   den Schnitt nicht – der Zustand liegt deshalb in der Fläche: ruhig das
   Feld-Grau, im Fokus derselbe Grund mit einem Hauch Akzent und einer
   Linie unten. Gilt für jedes Feld der Notiz-Fenster und den Stepper. */
.nt-input,
.nt-step__value {
  --cut: 8px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--field-bg);
}

.nt-input:focus,
.nt-step__value:focus-within {
  background: color-mix(in srgb, var(--accent-deep) 14%, var(--field-bg));
  box-shadow: inset 0 -2px 0 var(--accent-app);
}

html[data-eink] .nt-input,
html[data-eink] .nt-step__value { background: #ffffff; clip-path: none; box-shadow: inset 0 0 0 2px #000000; }

/* − und + am Stepper sind Knöpfe: Fläche über einem Sockel, beim
   Drücken sinken sie ein – statt zu schrumpfen. */
.nt-step__btn {
  --depth: 3px;
  position: relative;
  isolation: isolate;
  margin: 0 var(--depth) var(--depth) 0;
  background: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nt-step__btn::before,
.nt-step__btn::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.nt-step__btn::before {
  background: var(--btn-quiet-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nt-step__btn::after { background: var(--surface-2); transition: background-color var(--dur-fast) var(--ease-out); }
.nt-step__btn:hover { background: none; }
.nt-step__btn:hover::after { background: var(--surface-3); }
.nt-step__btn:active { transform: translate(var(--depth), var(--depth)); }
.nt-step__btn:active::before { opacity: 0; }

html[data-eink] .nt-step__btn::before { background: #000000; }
html[data-eink] .nt-step__btn::after { background: #ffffff; box-shadow: inset 0 0 0 2px #000000; }