/* =========================================================
   Life Archive – Account

   Das Tor (.acct-gate) liegt über allem und ist die einzige
   Ansicht, die ohne angemeldeten Nutzer sichtbar ist. Solange
   es steht, trägt der body die Klasse `is-gated`: Nav, Leiste
   und Menü sind dann nicht nur unsichtbar, sondern auch nicht
   erreichbar – sonst käme man per Tabulator daran vorbei.

   Die Bausteine (.acct-field, .acct-tile, …) werden zweimal
   gebraucht: im Tor und im Account-Reiter des Menüs. Sie sind
   deshalb unabhängig vom Tor gestaltet.
   ========================================================= */

/* ---------- Das Tor ------------------------------------------------------- */

body.is-gated { overflow: hidden; }

/* Alles, was zur App gehört, verschwindet vollständig – auch aus der
   Tabulator-Reihenfolge und für Screenreader. */
body.is-gated .shell,
body.is-gated .app,
body.is-gated .sheet { display: none !important; }

.acct-gate {
  position: fixed;
  inset: 0;
  z-index: 900;
  /* Der Schein darunter ist breiter als das Tor (130vw) und würde sonst
     eine echte horizontale Überlaufachse aufmachen – auf dem iPhone
     pannbar und Grund für das „hineingezoomte" Bild. hidden behält die
     senkrechte Rolle (overflow-y: auto) und schneidet die waagerechte
     ab: gescrollt wird nur noch die Höhe. */
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  place-items: center;
  padding: calc(24px + var(--safe-top)) 18px calc(24px + var(--safe-bottom));
  background: var(--bg-deep);
  animation: fade-in var(--dur) var(--ease-out) both;
}

/* Ein ruhiger Schein hinter der Karte – dieselbe Handschrift wie
   der Ring auf die Startseite, nur ohne Form.

   Der Schein darf das Tor nie verlassen: 130vw ragte auf schmalen
   Bildschirmen gut 55px je Seite über das Tor hinaus, und genau
   diese Überlaufachse war auf dem iPhone pannbar („hineingezoomt").
   Die Breite ist deshalb auf 100vw begrenzt – auf breiten Bildschirmen
   bleibt es bei 680px, und der Verlauf ist jenseits von 62% Radius
   ohnehin vollständig transparent, das sichtbare Leuchten endet weit
   vor dem Rand. */
.acct-gate__glow {
  position: absolute;
  top: -18vh;
  inset-inline-start: 50%;
  width: min(680px, 100vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(var(--t-meditation), .16), transparent 62%);
  pointer-events: none;
}

.acct-gate__inner {
  position: relative;
  width: min(430px, 100%);
  display: grid;
  gap: 18px;
  justify-items: stretch;
}

.acct-brand {
  margin: 0;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

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

.acct-card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 26px 22px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  animation: pop-in 300ms var(--ease-spring) both;
}

.acct-card--wide { gap: 16px; }

.acct-title {
  margin: 0;
  font-size: 1.42rem;
  font-weight: 650;
  letter-spacing: -.01em;
  text-align: center;
}

.acct-lead {
  margin: 0;
  text-align: center;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.acct-fine {
  margin: 4px 0 0;
  font-size: .74rem;
  line-height: 1.55;
  color: var(--text-faint);
}

.acct-code {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .74rem;
  color: var(--text-dim);
  /* Der Streifen (Recovery-Code, 24 Wörter, oder ein Befehl) rollt nur
     in sich selbst: overflow-x: auto macht ihn zur eigenen Scroll-Box,
     und weil das kein visible ist, ist sein automatisches Minimum in
     der Karten-Grid 0 – der nowrap-Inhalt kann die Karte also nie
     verbreitern. Zusammen mit overflow-x: hidden am Tor erreicht kein
     Teil des Streifens jemals die Seitenachse. */
  overflow-x: auto;
  white-space: nowrap;
}

/* Zurück: ein Knopf in eigener Zeile über dem Titel (siehe backButton()
   in app/account/screen.js). Form und Sockel kommen aus .btn. */
.acct-nav { display: flex; margin: -8px 0 2px; }

.acct-back {
  gap: 6px;
  min-height: 36px;
  padding: 7px 13px 7px 9px;
  font: inherit;
  font-size: .82rem;
  font-weight: 550;
  color: var(--text-dim);
}

.acct-back:hover { color: var(--text); }
.acct-back svg { flex: none; }

/* ---------- Nutzerzeichen ------------------------------------------------- */

.acct-avatar {
  justify-self: center;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tone, var(--accent-app));
  color: var(--ink);
  font-size: 1.28rem;
  font-weight: 650;
  letter-spacing: .02em;
  box-shadow: 0 6px 20px rgba(var(--o-deep), .45);
}

/* ---------- Nutzerkacheln ------------------------------------------------- */

.acct-tiles,
.acct-switch { display: grid; gap: 8px; }

.acct-tile {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  text-align: start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}

.acct-tile:hover,
.acct-tile:focus-visible {
  background: var(--surface-3);
  border-color: var(--tone, var(--accent-app));
}

.acct-tile:active { transform: scale(.98); }

.acct-tile.is-locked { opacity: .55; }

.acct-tile__mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tone, var(--accent-app));
  color: var(--ink);
  font-weight: 650;
  font-size: .95rem;
}

.acct-tile__body { display: grid; gap: 2px; min-width: 0; }

.acct-tile__name {
  font-weight: 600;
  font-size: .96rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --text-faint kam auf der Kachel nur auf 3,1:1 – zu wenig für 12px.
   Die Zeile trägt inzwischen echte Auskunft („ohne Passwort", „zuletzt
   …"), also --text-dim: 5,6:1 und damit über AA. */
.acct-tile__meta {
  font-size: .76rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-tile__meta:empty { display: none; }

.acct-tag {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(var(--t-meditation), .18);
  color: var(--accent-app);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- Felder -------------------------------------------------------- */

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

.acct-field__label {
  font-size: .78rem;
  font-weight: 550;
  color: var(--text-dim);
}

/* Der Kasten trägt das Feld und den „Zeigen"-Knopf nebeneinander. */
.acct-field__box { position: relative; display: block; }

.acct-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-deep);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.acct-field__box .acct-input { padding-inline-end: 84px; }

.acct-input:focus {
  outline: none;
  border-color: var(--accent-app);
  box-shadow: 0 0 0 3px rgba(var(--t-meditation), .18);
}

.acct-input::placeholder { color: var(--text-faint); }

/* Ein Hinweis, der eine Folge ankündigt – „ersetzt die vorhandenen Daten".
   Der ist zwar Kleingedrucktes, aber der wichtigste Satz im Dialog: als
   .acct-fine läge er bei 3,9:1 und damit unter WCAG AA. */
.acct-fine--warn { color: var(--text-dim); }

/* Dateifeld (Daten zurückholen). Der Auswahlknopf ist sonst ein grauer
   Systemknopf mitten in einer durchgestalteten Fläche – hier bekommt er
   dieselbe Sprache wie die übrigen Knöpfe. */
.acct-input[type="file"] {
  padding: 7px 8px;
  cursor: pointer;
  font-size: .88rem;
  color: var(--text-dim);
}

.acct-input[type="file"]::file-selector-button {
  margin-inline-end: 10px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.acct-input[type="file"]:hover::file-selector-button {
  border-color: var(--accent-app);
  background: var(--surface-3);
}

.acct-eye {
  position: absolute;
  top: 50%;
  inset-inline-end: 6px;
  transform: translateY(-50%);
  padding: 6px 9px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-faint);
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
}

.acct-eye:hover { color: var(--text); background: var(--surface-2); }

.acct-hint { font-size: .72rem; color: var(--text-faint); }
.acct-hint.is-bad { color: var(--c-fitness); }

.acct-caps {
  font-size: .72rem;
  color: var(--c-journal);
}

.acct-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 9px;
  font-size: .85rem;
  color: var(--text-dim);
  cursor: pointer;
}

.acct-check input { margin-top: 2px; accent-color: var(--accent-app); }

.acct-check--claim {
  padding: 12px;
  border: 1px solid var(--c-nutrition-stroke);
  border-radius: var(--r-sm);
  background: rgba(var(--t-nutrition), .07);
  font-size: .8rem;
  line-height: 1.5;
}

.acct-check--claim b { color: var(--c-nutrition); }

/* ---------- Passwortgüte -------------------------------------------------- */

.acct-meter { display: grid; gap: 5px; margin-top: -6px; }

.acct-meter__bar {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.acct-meter__bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--c-fitness);
  transition: width var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.acct-meter__bar i[data-score="2"] { background: var(--c-journal); }
.acct-meter__bar i[data-score="3"] { background: var(--c-calendar); }
.acct-meter__bar i[data-score="4"] { background: var(--c-nutrition); }

.acct-meter__label { font-size: .72rem; color: var(--text-faint); }

/* ---------- Meldungen ----------------------------------------------------- */

/* Der Kasten steht immer da, auch leer: sonst springt das Formular,
   sobald eine Meldung erscheint. */
.acct-note {
  margin: 0;
  min-height: 1.1em;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--c-fitness);
}

.acct-note.is-on { animation: acct-shake 320ms var(--ease-out); }

@keyframes acct-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  45%      { transform: translateX(4px); }
  70%      { transform: translateX(-2px); }
}

.acct-lock {
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: rgba(var(--t-fitness-stroke), .12);
  border: 1px solid rgba(var(--t-fitness-stroke), .35);
  font-size: .82rem;
  color: var(--c-fitness);
  text-align: center;
}

/* ---------- Knöpfe -------------------------------------------------------- */

/* .btn--accent zieht seine Farbe aus --accent. Das setzen sonst die
   Bereiche auf ihrer eigenen Seite; das Tor und die Account-Popups
   gehören zu keinem Bereich und müssten sonst mit dem grauen
   Rückfallwert leben – dunkler Text auf dunklem Grund. */
.acct-gate,
.acct-modal,
.acct-panel { --accent: var(--accent-app); }

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

/* Während PBKDF2 rechnet, ist der Knopf gesperrt – das muss man sehen. */
.acct-wide:disabled,
.acct-row .btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.acct-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 9px;
  margin-top: 14px;
}

/* .acct-danger ist weg: „Gefahr" ist keine Eigenheit des Accounts,
   sondern eine der drei (vier) Stufen des Knopfsystems. Sie heißt
   jetzt .btn--danger und steht in styles/components.css – dieselbe
   Zeile im Sheet, im Blockmenü und hier. */


/* ---------- Verwaltung im Menü -------------------------------------------- */

.acct-panel { display: grid; gap: 14px; padding: 4px 2px 8px; }

.acct-me {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--tone, var(--accent-app));
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.acct-me .acct-avatar { width: 52px; height: 52px; font-size: 1.1rem; }

.acct-me__body { display: grid; gap: 3px; min-width: 0; }

.acct-me__name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
}

.acct-me__meta {
  margin: 0;
  font-size: .76rem;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Die UserID steht bewusst da: sie ist der Schlüssel, unter dem alle
   Daten dieses Nutzers liegen, und hilft beim Nachsehen im Speicher. */
.acct-me__id {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .68rem;
  opacity: .7;
}

.acct-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}

.acct-stats span {
  display: grid;
  gap: 2px;
  padding: 10px 6px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: .68rem;
  color: var(--text-faint);
}

.acct-stats b {
  font-size: .92rem;
  font-weight: 650;
  color: var(--text);
}

.acct-panel__head {
  margin: 4px 0 -6px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.acct-actions { display: grid; gap: 8px; }

/* ---------- Popups der Verwaltung ----------------------------------------- */

/* .modal-panel bringt selbst keinen Innenabstand mit – die Popups des
   Accounts setzen ihn deshalb hier. */
.acct-modal {
  display: grid;
  gap: 12px;
  padding: 22px 20px 20px;
}

.acct-modal .modal-title {
  margin: 0;
  font-size: 1.14rem;
  font-weight: 650;
}

.acct-modal .acct-lead { text-align: start; }

@media (prefers-reduced-motion: reduce) {
  .acct-gate,
  .acct-card { animation: none; }
  .acct-note.is-on { animation: none; }
}

/* ---------- Form: nichts ist rund ---------------------------------------
   Das Konto steht im Sheet hinter dem Dreipunkt-Knopf und damit auf der
   Startseite – es muss dieselbe Sprache sprechen wie alles andere dort.

   Kennzeichen und Marken sind Flächen, keine Knöpfe: sie bekommen den
   Eckschnitt. Das Kennzeichen selbst wird ein Sechseck, weil es für
   eine Person steht und in der App jedes Zeichen für etwas ein Sechseck
   ist (Bereichszeichen, Ringsymbole). */

.acct-avatar,
.acct-tile__mark {
  border-radius: 0;
  clip-path: var(--hex-clip);
}

/* Der Schnitt frisst sonst die Schrift: bei 7 px Innenabstand reicht
   die Schräge bis ins erste und letzte Zeichen. Kleinerer Schnitt,
   mehr Luft links und rechts. */
.acct-tag {
  --cut: 3px;
  padding: 3px 10px;
  border-radius: 0;
  clip-path: var(--cut-clip);
}

.acct-meter__bar,
.acct-meter__bar i {
  --cut: 3px;
  border-radius: 0;
  clip-path: var(--cut-clip);
}

/* ---------- Konto: Flächen und Abstände --------------------------------

   Zwei Sachen waren hier noch offen.

   ERSTENS die Form. Die Kennkarte oben und die drei Kennzahlen darunter
   trugen noch einen Radius. Beides sind Flächen, also bekommen sie den
   Eckschnitt.

   Die Kennkarte hatte dabei einen Rahmen und links einen 3 px breiten
   Streifen in der Akzentfarbe. Beides überlebt clip-path nicht – der
   Rahmen reißt an den Schrägen auf. Sie ist deshalb zweischichtig
   gebaut wie alles Geschnittene in dieser App: hinten die Akzentfarbe,
   darüber die Fläche, links um 3 px eingerückt statt um 1 px. Der
   Streifen ist damit dasselbe Element wie der Rahmen, nur breiter –
   und beide können nicht mehr abreißen.

   ZWEITENS die Abstände. Die Knöpfe standen mit 8 px Abstand
   untereinander. Seit sie einen Sockel von 3 px nach unten tragen,
   bleiben davon 5 px übrig, und der Sockel des einen sitzt fast auf dem
   nächsten Knopf. Der Abstand muss die Tiefe mitrechnen: er ist jetzt
   Grundabstand PLUS Sockeltiefe. Dasselbe gilt für zwei Knöpfe
   nebeneinander. */

.acct-me {
  position: relative;
  isolation: isolate;
  --cut: 13px;
  border: 0;
  border-radius: 0;
  background: none;
}

.acct-me::before,
.acct-me::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: var(--cut-clip);
}

.acct-me::before { inset: 0; background: var(--tone, var(--accent-app)); }
.acct-me::after  { inset: 1px 1px 1px 3px; background: var(--surface-2); }

.acct-stats span {
  --cut: 8px;
  border-radius: 0;
  clip-path: var(--cut-clip);
}

/* Grundabstand plus Sockeltiefe – sonst klebt der Sockel am nächsten Knopf. */
.acct-actions { gap: calc(8px + var(--depth, 3px)); }
.acct-row     { gap: calc(9px + var(--depth, 3px)); }

/* Die Marke ist 18 px hoch. Selbst ein 3-px-Schnitt reicht auf dieser
   Höhe in die Versalien – aus TEST wurde fEST. Sie fällt damit unter
   die Faustregel: unter etwa 30 px mit Zeichen darin kein Eckschnitt,
   nur gerade Ecken. */
.acct-tag { clip-path: none; padding: 3px 8px; }

/* =========================================================
   Nachtrag: Form und Kontrast des Anmelde-Tors

   Diese Datei war die letzte, in der die alte Sprache noch
   vollständig stand: Radien statt Eckschnitt, drei runde
   Kreise, zwei Pillen – und als Knopffläche --surface-2 auf
   --surface, gemessen 1,11:1. Sichtbar war davon nur der
   Sockel; der Knopf selbst las sich als leerer Umriss.

   Die Regeln stehen am ENDE der Datei und nicht an ihren
   Stellen, weil sie dann ohne !important gewinnen und weil
   man sie hier zusammen liest – als eine Entscheidung, nicht
   als zwanzig verstreute.

   Was sich woraus ergibt:

     FLÄCHE  Karte, Kachel, Feld, Fortschrittsbalken:
             Eckschnitt (--cut-clip), kein Radius.
     KNOPF   eckig plus Sockel – das machen die drei Stufen
             in components.css, hier steht nur, welche Stufe
             welcher Knopf ist (siehe app/account/screen.js).
     RUND    Es gibt nichts Rundes mehr. Die drei Kreise
             (Avatar, Kachelzeichen, Punkt der Stärkeanzeige)
             sind Sechsecke, die beiden Pillen sind
             geschnittene Marken.
   ========================================================= */

/* ---------- Flächen: Schnitt statt Radius --------------------------------- */

/* Die Karte ist die größte Fläche des Tors; sie bekommt den vollen
   Schnitt. `border` kann sie darunter nicht behalten – clip-path
   schneidet ihn an beiden Diagonalen mit weg und ließe zwei Splitter
   stehen. Also zwei Lagen: außen die Randfarbe, darin dieselbe Form
   in der Fläche. Der Schatten wandert nach `filter`, aus demselben
   Grund. */
.acct-card {
  --cut: 18px;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--line);
  box-shadow: none;
  filter: drop-shadow(0 18px 40px rgba(var(--o-deep), .5));
}

.acct-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--cut-clip);
  background: var(--surface);
}

/* Eine Nutzerkachel ist eine Zeile, die man liest und antippt – eine
   Fläche mit Schnitt, kein Knopf mit Sockel. Der Stand sitzt in der
   Füllung und nicht im Rand: einen Rand gibt es unter clip-path
   nicht mehr.

   --surface-2 auf --surface waren 1,11:1. Der Überzug --btn-quiet
   rechnet sich auf jeden Grund und kommt auf 1,78:1 – hier ist das
   richtig, denn die Kachel SOLL still sein: was sie hervorhebt, ist
   das farbige Zeichen links, nicht ihre eigene Fläche. */
.acct-tile {
  --cut: 12px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--btn-quiet);
  padding: 12px 16px;
}

.acct-tile:hover,
.acct-tile:focus-visible {
  background: color-mix(in srgb, var(--tone, var(--accent-app)) 22%, var(--btn-quiet));
}

/* ---------- Nichts ist rund ----------------------------------------------- */

/* Drei Kreise standen hier. Sie sind jetzt flach liegende Sechsecke –
   dieselbe Form wie das Zeichen eines Bereichs in der Leiste und im
   Ring der Startseite. Ein Nutzer ist damit dasselbe Zeichen wie ein
   Bereich, und das ist kein Zufall: beide sind ein Ort, in den man
   hineingeht. */
.acct-avatar,
.acct-tile__mark,
.acct-me__mark {
  border-radius: 0;
  clip-path: var(--hex-clip);
}

/* Die Marke „TEST" und der Balken der Passwortstärke waren Pillen.
   Eine Marke wird gelesen, nicht gedrückt – also Schnitt. Bei sieben
   Pixeln Innenabstand liefe eine Diagonale durch den ersten
   Buchstaben, deshalb steigt er auf zwölf. */
.acct-tag {
  --cut: 5px;
  border-radius: 0;
  clip-path: var(--cut-clip);
  padding: 3px 12px;
}

.acct-meter,
.acct-meter__bar,
.acct-meter__bar i {
  border-radius: 0;
}

/* ---------- Felder -------------------------------------------------------- */

/* Ein Eingabefeld ist eine Fläche, auf der Text steht – Schnitt. Es
   trägt seinen Rand deshalb ebenfalls in zwei Lagen, hier über einen
   inset-Schatten: der zählt nicht zur Größe, das Feld springt beim
   Fokus also nicht um einen Pixel. */
.acct-input {
  --cut: 9px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--btn-quiet);
  box-shadow: inset 0 0 0 1.5px rgba(var(--o), .14);
}

.acct-input:focus {
  box-shadow: inset 0 0 0 1.5px var(--accent-deep, var(--accent-app));
}

/* Der Kasten mit dem Wiederherstellungscode ist Text zum Lesen. */
.acct-code {
  --cut: 9px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
}

/* Zurück-Pfeil und Auge im Passwortfeld sind Knöpfe: eckig, und
   unter dreißig Pixeln ohne Schnitt – er liefe sonst quer durch das
   Zeichen. */
.acct-eye { border-radius: 0; }
.acct-eye:hover { background: var(--btn-quiet); }

/* ---------- Verwaltung ---------------------------------------------------- */

.acct-me,
.acct-stats > span,
.acct-switch > * {
  border-radius: 0;
}

/* Die drei Zahlen über den Handgriffen sind Flächen. Sie trugen
   --surface-2 und waren damit vom Grund kaum zu unterscheiden. */
.acct-stats > span {
  --cut: 8px;
  clip-path: var(--cut-clip);
  background: var(--btn-quiet);
}

/* ---------- Körper & Ziel (app/profile.js) ------------------------------------

   Das Fenster „Body & goal" und der Block im Account-Reiter. Die Wahl-
   knöpfe sind Knöpfe (.btn – Rechteck mit Sockel); gewählt heißt: die
   Fläche im Akzent, die Kante voll. */

.pf-modal { max-height: min(88vh, 720px); overflow-y: auto; }
.pf-lead { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--text-dim); }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-hint { font-size: .74rem; line-height: 1.4; color: var(--text-dim); }

.pf-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}
.pf-choice { padding: 10px 8px; font-size: .84rem; }
.pf-choice.is-on {
  --btn-face: color-mix(in srgb, var(--accent-app) 22%, transparent);
  --btn-face-hover: color-mix(in srgb, var(--accent-app) 30%, transparent);
  --btn-edge: var(--accent-app);
  font-weight: 650;
}

.acct-body { display: grid; gap: 8px; }
.acct-body__line { margin: 0; font-size: .92rem; color: var(--text); }
.acct-body__why { margin: 0; font-size: .76rem; line-height: 1.4; color: var(--text-dim); }

html[data-eink] .pf-choice.is-on { --btn-face: #1c1c1c; --btn-face-hover: #000000; color: #ffffff; }

/* ---------- Den Account mitsichern (Back Up Data) ------------------------------

   Die eine Wahl im Fenster, die etwas Unumkehrbares mit sich bringt:
   ohne Passwort öffnet die Datei niemand mehr. Deshalb eine Fläche im
   Ton der App (Lavendel), geschnittene Ecke, eine Kante links – nicht
   noch ein Kästchen in der Reihe darüber. Eingeschaltet wird sie
   satter, und darunter erscheint das Passwortfeld. */

.acct-seal {
  --cut: 12px;
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 14px 14px 14px 16px;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--accent-app) 9%, var(--surface-2));
  box-shadow: inset 3px 0 0 var(--accent-app);
  transition: background-color var(--dur) var(--ease-out);
}

.acct-seal.is-on {
  background: color-mix(in srgb, var(--accent-app) 17%, var(--surface-2));
}

/* Ohne Passwort (Testaccount) gibt es nichts zu verschließen –
   die Fläche bleibt stehen, damit niemand sie vermisst, aber still. */
.acct-seal.is-off {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--line-strong);
}

.acct-seal__switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 32px;
}

.acct-seal__switch input:focus-visible + .rd-check__box {
  outline: 2px solid var(--accent-app);
  outline-offset: 3px;
}

.acct-seal__title {
  margin: 0;
  font-size: .95rem;
  font-weight: 650;
  color: var(--text);
}

/* Unter 30 px und mit Schrift darin: gerade Ecken, kein Schnitt. */
.acct-seal__tag {
  padding: 3px 7px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent-app);
}

.acct-seal__text {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.acct-seal__text b { color: var(--text); font-weight: 650; }

.acct-seal__pw {
  display: grid;
  gap: 6px;
  padding-top: 4px;
  animation: pop-in 220ms var(--ease-out) both;
}

.acct-seal__pw[hidden],
.acct-unlock[hidden] { display: none; }

/* Das Passwortfeld einer verschlossenen Sicherung – in „Restore Data"
   und im Anmelde-Tor. */
.acct-unlock { display: grid; gap: 10px; }

/* ---------- Anmelde-Tor: „Restore from backup" ----------------------------------

   Leiser als „Create New Account": ein Satz, kein zweiter Knopf mit
   Sockel. Wer umzieht, sucht ihn; wer neu ist, wird nicht abgelenkt.
   44 px hoch, damit er auf dem Telefon trotzdem gut zu treffen ist. */

.acct-link {
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: .84rem;
  color: var(--text-dim);
  cursor: pointer;
}

.acct-link b {
  color: var(--accent-app);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.acct-link:hover b { text-decoration-thickness: 2px; }
.acct-link:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

[data-restore-go][hidden],
[data-restore-name][hidden] { display: none; }

html[data-eink] .acct-seal,
html[data-eink] .acct-seal.is-on { background: #ffffff; box-shadow: inset 3px 0 0 #000000; }
html[data-eink] .acct-seal__tag { background: #000000; color: #ffffff; }
html[data-eink] .acct-link b { color: #000000; }

@media (prefers-reduced-motion: reduce) {
  .acct-seal { transition: none; }
  .acct-seal__pw { animation: none; }
}

/* ---------- Dateifeld einer Sicherung (fileField in screen.js) -----------------

   Ersetzt das System-Dateifeld, das die Sprache des Browsers sprach
   und einen runden Systemknopf trug. Eine Fläche (Schnitt, Rand in zwei
   Lagen), links das Zeichen, in der Mitte Name und Größe, rechts ein
   echter Knopf – der zeigt, dass man hier drückt. Das <input> liegt
   unsichtbar über allem: es fängt Tippen UND Hineinziehen. */

.acct-file {
  --cut: 12px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px 14px 12px 14px;
  cursor: pointer;
}

.acct-file::before,
.acct-file::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: var(--cut-clip);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.acct-file::before { inset: 0; background: rgba(var(--o), .16); }
.acct-file::after  { inset: 1.5px; --cut: 11px; background: var(--bg-deep); }

.acct-file:hover::before,
.acct-file:focus-within::before { background: var(--accent-app); }
.acct-file:hover::after { background: color-mix(in srgb, var(--accent-app) 6%, var(--bg-deep)); }

.acct-file.is-picked::before { background: color-mix(in srgb, var(--accent-app) 70%, transparent); }
.acct-file.is-picked::after  { background: color-mix(in srgb, var(--accent-app) 9%, var(--bg-deep)); }

.acct-file input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;      /* iOS zoomt sonst beim Fokus */
}

/* Unter 30 px Schnitt-Grenze liegt das Zeichen nicht – es ist 40 px
   und eine gelesene Fläche, also Schnitt. */
.acct-file__mark {
  --cut: 7px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--accent-app) 16%, transparent);
  color: var(--accent-app);
}

.acct-file__body { display: grid; gap: 3px; min-width: 0; }

/* Darf auf zwei Zeilen umbrechen: auf dem Telefon bliebe sonst nur
   der Anfang stehen, und der sagt nichts. Ein sehr langer Name wird in
   screen.js in der Mitte gekürzt. */
.acct-file__name {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* --text-dim statt --text-faint: die Zeile sagt, welche Datei gemeint
   ist – das ist Auskunft, kein Kleingedrucktes (AA). */
.acct-file__meta {
  font-size: .76rem;
  line-height: 1.35;
  color: var(--text-dim);
  overflow-wrap: break-word;
}
.acct-file__meta b { color: var(--text); font-weight: 600; white-space: nowrap; }

.acct-file__btn {
  --depth: 2.5px;
  padding: 8px 13px;
  font-size: .8rem;
  pointer-events: none;   /* gedrückt wird das <input> darüber */
}

/* Der Druck gilt der ganzen Fläche – also sinkt der Knopf mit. */
.acct-file:active .acct-file__btn { transform: translate(var(--depth), var(--depth)); }
.acct-file:active .acct-file__btn::after { box-shadow: inset 0 0 0 1.5px var(--btn-edge, transparent); }

/* Der Satz über die einfache Sicherung ist ein Nachtrag, kein Teil
   des Wegs: abgesetzt durch eine Haarlinie. */
.acct-aside {
  margin-top: -4px;
  padding-top: 14px;
  box-shadow: inset 0 1px 0 var(--line);
}

[data-restore-summary][hidden] { display: none; }

html[data-eink] .acct-file::before,
html[data-eink] .acct-file.is-picked::before { background: #000000; }
html[data-eink] .acct-file::after,
html[data-eink] .acct-file:hover::after,
html[data-eink] .acct-file.is-picked::after { background: #ffffff; }
html[data-eink] .acct-file__mark { background: #000000; color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  .acct-file::before, .acct-file::after { transition: none; }
}

[data-summary]:empty,
[data-restore-summary]:empty { display: none; }

/* ---------- Sprache (seit 0.7.0 beta) ---------------------------------------

   Über der Karte: der Name der App mittig, rechts daneben leise die
   Sprache, die gerade gilt – ein Knopf, kein Menü: er führt zur Wahl.
   Die Wahl selbst ist eine Liste stiller Flächen mit Schnitt wie die
   Nutzerkacheln; die gewählte trägt die Füllung der App und ein
   Häkchen. Jede Sprache steht in ihrer eigenen Schrift (lang=), damit
   Chinesisch und Japanisch ihre richtigen Zeichen bekommen. */

.acct-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.acct-top .acct-brand { grid-column: 2; }

/* Ein Knopf: eckig mit Sockel (.btn .btn--quiet aus components.css), kein
   Eckschnitt – den tragen nur Flächen (bis 12.10.2026 trug er einen). */
.acct-langbtn {
  grid-column: 3;
  justify-self: end;
  isolation: isolate;
  gap: 6px;
  min-height: 32px;
  max-width: 100%;
  padding: 4px 10px;
  color: var(--text-muted);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur) var(--ease-out);
}
.acct-langbtn:hover,
.acct-langbtn:focus-visible { color: var(--text); }
.acct-langbtn:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }
.acct-langbtn__glyph {
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.acct-langs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 8px;
}

.acct-lang {
  --cut: 10px;
  position: relative;
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 58px;
  padding: 10px 40px 10px 14px;
  border: 0;
  clip-path: var(--cut-clip);
  background: var(--btn-quiet);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.acct-lang:hover,
.acct-lang:focus-visible { background: color-mix(in srgb, var(--accent-app) 14%, var(--btn-quiet)); }
.acct-lang:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -2px; }
.acct-lang:active { transform: scale(.98); }
.acct-lang__name { font-size: 1rem; font-weight: 600; color: var(--text-strong); min-width: 0; }
.acct-lang__here { font-size: .8rem; color: var(--text-muted); min-width: 0; }
.acct-lang__check {
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  clip-path: var(--hex-clip);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--line);
}
.acct-lang.is-on { background: color-mix(in srgb, var(--accent-app) 26%, var(--btn-quiet)); }
.acct-lang.is-on .acct-lang__check { background: var(--accent-app); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .acct-lang, .acct-langbtn { transition: none; }
  .acct-lang:active { transform: none; }
}
html[data-eink] .acct-lang.is-on { outline: 2px solid currentColor; outline-offset: -2px; }

/* ---------- Die Demo (seit 12.10.2026, app/account/screen.js › A.demo) ------
   Das Fenster „You're in the demo" und die Karte, die in der Demo an die
   Stelle des Teilens tritt. Das Absperrband ist dasselbe wie im Schild
   der Topbar (styles/shell.css, .sh-demo__tape). */
.acct-demo__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--state-warn);
  font: 700 max(var(--fs-floor), 11px)/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.acct-demo__tape {
  flex: none;
  display: inline-block;
  width: 12px;
  height: 12px;
  color: var(--state-warn);
  background: repeating-linear-gradient(135deg, currentColor 0 2px, transparent 2px 4.5px);
}
.acct-demo__tape--l { width: 54px; height: 10px; }
.acct-demo__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--text);
  line-height: 1.45;
}
.acct-demo__list li {
  position: relative;
  padding-inline-start: 18px;
}
.acct-demo__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  background: var(--state-warn);
}

html[data-eink] .acct-demo__eyebrow,
html[data-eink] .acct-demo__tape { color: #000000; }
html[data-eink] .acct-demo__list li::before { background: #000000; }

/* ---------- Abgleich zwischen Geräten (Stufen 4, 5 – app/vault/ui.js,
   Tor-Bildschirme „Sign in" · „Use your recovery phrase" · „Restoring")

   Flächen mit Schnitt: jedes Wort der Phrase, jede Gerätezeile, der
   Balken des ersten Holens. Knöpfe bleiben .btn (eckig, Sockel). Die
   Wörter stehen in Spline Sans mit festen Ziffern – Abschreiben ist
   die eine Aufgabe dieses Fensters. ------------------------------------ */

.vault-modal { max-height: min(90vh, 760px); overflow-y: auto; }

.vault-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--text-dim);
}
.vault-points li { position: relative; padding-inline-start: 18px; }
.vault-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: .5em;
  width: 7px;
  height: 7px;
  background: var(--accent-app);
}

.vault-hint.is-good { color: var(--state-good); }
.vault-steps:empty { display: none; }
/* Leer reserviert die Fehlerzeile im Tor ihren Platz (nichts springt) –
   in diesen Fenstern läge dort nur ein Loch über den Knöpfen. */
.vault-modal .acct-note:empty { display: none; }

/* 24 Wörter: drei Spalten, am Telefon zwei. Jedes Wort eine kleine
   Fläche – Nummer leise, Wort voll. */
.vault-words {
  margin: 2px 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
@media (max-width: 420px) {
  .vault-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vault-word {
  --cut: 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 8px 12px;
  clip-path: var(--cut-clip);
  background: var(--btn-quiet);
}
.vault-word__n {
  flex: none;
  min-width: 1.6em;
  font-size: max(var(--fs-floor), .72rem);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.vault-word__w {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .01em;
  color: var(--text);
}

.vault-phrase-input {
  min-height: 5.6em;
  resize: vertical;
  line-height: 1.5;
  font-size: 16px;
}

/* Die Geräte: eine Zeile je Gerät, Name und Stand links, ein Handgriff
   rechts. „This device" ist eine Marke (.acct-tag). */
.vault-devices {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.vault-device {
  --cut: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 16px;
  clip-path: var(--cut-clip);
  background: var(--btn-quiet);
}
.vault-device.is-me { background: color-mix(in srgb, var(--accent-app) 14%, var(--btn-quiet)); }
.vault-device.is-loading { color: var(--text-dim); font-size: .86rem; }
.vault-device__body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.vault-device__name {
  font-weight: 600;
  font-size: .92rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  overflow-wrap: anywhere;
}
.vault-device__meta {
  font-size: max(var(--fs-floor), .74rem);
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.vault-device__btn { flex: none; min-height: 36px; padding: 6px 12px; font-size: .82rem; }
.vault-device__btn.is-danger { color: var(--danger); }

/* Zwei Wege beim Ausschalten – Kacheln wie im Tor, mit einem Satz. */
.vault-choice { display: grid; gap: 8px; }
.vault-choice__item { grid-template-columns: 1fr; }
.vault-choice__text {
  font-size: max(var(--fs-floor), .78rem);
  line-height: 1.45;
  color: var(--text-dim);
  white-space: normal;
}

/* Das erste Holen auf einem neuen Gerät. Ein Balken, keine Pille. */
.vault-progress {
  --cut: 4px;
  display: block;
  height: 8px;
  clip-path: var(--cut-clip);
  background: var(--btn-quiet);
  overflow: hidden;
}
.vault-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-app);
  transition: width var(--dur) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .vault-progress i { transition: none; }
}

html[data-eink] .vault-word,
html[data-eink] .vault-device,
html[data-eink] .vault-progress { background: #ffffff; outline: 1.5px solid #000000; outline-offset: -1.5px; }
html[data-eink] .vault-device.is-me { outline-width: 3px; outline-offset: -3px; }
html[data-eink] .vault-progress i,
html[data-eink] .vault-points li::before { background: #000000; }
html[data-eink] .vault-word__n,
html[data-eink] .vault-device__meta,
html[data-eink] .vault-choice__text { color: #000000; }
html[data-eink] .vault-hint.is-good,
html[data-eink] .vault-device__btn.is-danger { color: #000000; }

/* ---------- Free und Premium (app/vault/plan.js) ----------------------------

   Ein Fenster, kein Verkaufsbildschirm: oben, warum es gerade aufgeht
   (.plan-why, nur wenn etwas Premium braucht), dann was Premium bringt
   als stille Zeilen, darunter klar, was IMMER frei bleibt. Genau eine
   gefüllte Fläche – „Redeem". Die Zeilen sind Flächen (Schnitt), das
   Zeichen darin hat keinen Schnitt (unter 30 px, Regel der Form). */
.plan-modal { display: grid; gap: 12px; }
.plan-modal .acct-lead { margin-top: -4px; }

.plan-why {
  --cut: 10px;
  margin: 0;
  padding: 10px 14px;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--accent-app) 16%, var(--btn-quiet));
  font-size: .86rem;
  line-height: 1.45;
  color: var(--text);
}

.plan-perks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.plan-perk {
  --cut: 10px;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 12px;
  padding: 8px 12px;
  clip-path: var(--cut-clip);
  background: var(--btn-quiet);
  font-size: .82rem;
  line-height: 1.4;
  color: var(--text-dim);
}
.plan-perk b { color: var(--text); font-weight: 600; font-size: .9rem; }
.plan-perk__icon { width: 22px; height: 22px; margin-top: 2px; opacity: .9; }

.plan-free {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.plan-free b { color: var(--text); font-weight: 600; }

.plan-use { display: grid; gap: 6px; }
.plan-use__line { margin: 0; font-size: .84rem; color: var(--text); font-variant-numeric: tabular-nums; }
/* Die Spur des Passwort-Messers (--surface-3) verschwindet auf dem
   Fenster – hier muss man sie sehen, auch bei 0 %. */
.plan-use .acct-meter__bar { height: 6px; background: rgba(var(--o), .16); }
.plan-use .acct-meter__bar i { background: var(--accent-app); }

.plan-code { font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; }
.plan-code::placeholder { text-transform: none; letter-spacing: .04em; }

/* Ein Verweis im Kleingedruckten – Text, kein Knopf. */
.plan-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent-app);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.plan-link:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

html[data-eink] .plan-why,
html[data-eink] .plan-perk { background: #ffffff; outline: 1.5px solid #000000; outline-offset: -1.5px; color: #000000; }
html[data-eink] .plan-why { outline-width: 3px; outline-offset: -3px; }
html[data-eink] .plan-perk b,
html[data-eink] .plan-free,
html[data-eink] .plan-free b,
html[data-eink] .plan-use__line,
html[data-eink] .plan-link { color: #000000; }
html[data-eink] .plan-use .acct-meter__bar { background: #ffffff; outline: 1.5px solid #000000; outline-offset: -1.5px; }
html[data-eink] .plan-use .acct-meter__bar i { background: #000000; }

/* Was gerade mit den Dateien geschieht (LA.plan.fileLines) – stille Zeilen
   mit einem kleinen Quadrat, nur wenn es etwas zu sagen gibt. */
.plan-now {
  --cut: 10px;
  margin: 0;
  padding: 10px 14px;
  list-style: none;
  display: grid;
  gap: 4px;
  clip-path: var(--cut-clip);
  background: rgba(var(--o), .06);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--text);
}
.plan-now[hidden] { display: none; }
.plan-now li { position: relative; padding-inline-start: 14px; }
.plan-now li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  background: var(--accent-app);
}
html[data-eink] .plan-now { background: #ffffff; outline: 1.5px solid #000000; outline-offset: -1.5px; color: #000000; }
html[data-eink] .plan-now li::before { background: #000000; }

/* ---------- Anmelde-Tor: der Einladungsschlüssel (geschlossene Beta, 11.20) -----
   Steht über dem Namen: ohne ihn entsteht kein Konto. Gesetzt in der
   Schrift der Zahlen, damit 0/O und 1/I unterscheidbar bleiben; das
   Prüfzeichen färbt den Hinweis schon beim Tippen. */

.acct-input--key {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), .9rem);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.acct-input--key::placeholder { text-transform: none; letter-spacing: .04em; }
.acct-hint.is-good { color: var(--c-nutrition); }
.acct-invite-alt { margin-block-start: -6px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.acct-invite-alt .acct-link { padding-inline: 4px; }
html[data-eink] .acct-hint.is-good { color: #000000; font-weight: 650; }

/* ---------- Ruhender Zugang (app/access.js, seit 13.10.2026) -------------------
   Ein Fenster, das Ruhe gibt: oben in einem Satz, was los ist, dann die
   Nachricht des Betreibers als Zitat, zwei kurze Listen (was geht · was
   ruht) und EIN gefüllter Knopf. Kein Rot – es ist keine Strafe und kein
   Fehler. */
.acc-modal { max-width: 440px; }
.acc-note {
  --cut: 8px;
  margin: 0;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--accent-app) 9%, var(--bg));
  box-shadow: inset 3px 0 0 var(--accent-app);
}
[dir="rtl"] .acc-note { box-shadow: inset -3px 0 0 var(--accent-app); }
.acc-note__from {
  font: 600 max(var(--fs-floor), 10.5px)/1.2 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-app);
}
.acc-note__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-strong); overflow-wrap: anywhere; }
.acc-lists { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 400px) { .acc-lists { grid-template-columns: 1fr; } }
.acc-list__title {
  margin: 0 0 6px;
  font: 600 max(var(--fs-floor), 11px)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.acc-list ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.acc-list li {
  position: relative;
  padding-inline-start: 16px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
}
.acc-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .5em;
  width: 7px;
  height: 7px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.acc-list.is-ok li::before { background: var(--state-good); }
.acc-list.is-off li::before { background: var(--text-subtle); }
.acc-list.is-off li { color: var(--text-muted); }
.acc-fine { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.acc-actions { justify-content: flex-end; }
html[data-eink] .acc-note { background: #ffffff; box-shadow: inset 3px 0 0 #000000, inset 0 0 0 1px #000000; clip-path: none; }
html[data-eink] .acc-list li::before { background: #000000; }

/* ---------- Sync und Teilen einrichten (app/vault/setup.js, 13.10.2026) ------

   Gleich nach „Create account" über dem ersten Home. Am Telefon füllt das
   Fenster das Bild (ein Ablauf, kein Hinweis), ab 720px ein Blatt von
   440px über dem gedämpften Home. Regeln aus dem Bericht:
     · die zwei Wege (Sync | Only on this device) gleich groß, gleich still,
       nichts vorgewählt – die EINE volle Fläche ist „Continue"
     · drei Listen „What leaves this device?" in drei Tönen: geht versiegelt
       (Nutrition-Grün), der Server sieht (Journal-Bernstein), nie (grau)
     · die 24 Wörter verdeckt, bis man tippt
     · Sechsecke statt Kreisen: Schrittpunkte, Wahlmarke, Stand-Punkte */

.modal-layer:has(> .su-panel) { padding: 18px; }

.modal-panel.su-panel {
  --cut: 18px;
  --accent: var(--accent-app);
  width: min(440px, 100%);
  max-height: min(92dvh, 860px);
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 719.98px) {
  .modal-layer:has(> .su-panel) { padding: 0; }
  .modal-panel.su-panel {
    width: 100%;
    height: 100%;
    max-height: none;
    clip-path: none;
    filter: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Der Schein des Teichs oben im Fenster – in den Tönen der Bereiche,
   unter 20 % Deckung (styles/look.css: sonst kleine Schrift unter AA). */
.su {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 14px;
  min-height: 100%;
  padding: 14px 20px 22px;
  align-content: start;
}
.su::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 0;
  height: 260px;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 22% 55%, rgba(var(--t-nutrition), .11), transparent 72%),
    radial-gradient(closest-side at 78% 35%, rgba(var(--t-meditation), .12), transparent 72%),
    radial-gradient(closest-side at 50% 0%, rgba(var(--t-cue-diary), .07), transparent 70%);
}
.su[data-step="share"]::before,
.su[data-step="consent"]::before {
  background: radial-gradient(closest-side at 50% 45%, rgba(var(--t-meditation), .16), transparent 72%);
}

.su-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
}
.su-dots { display: inline-flex; gap: 6px; }
.su-dots i {
  width: 10px;
  height: 11px;
  background: rgba(var(--o), .16);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.su-dots i.is-on { background: var(--text); }

/* „Skip", „Later", „Back": still, aber immer da und groß genug zum Tippen. */
.su-corner {
  min-height: 36px;
  padding: 6px 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: .86rem;
  color: var(--text-dim);
  cursor: pointer;
}
.su-corner:hover { color: var(--text); text-decoration: underline; }

.su-eyebrow {
  margin: 4px 0 -8px;
  font-size: max(var(--fs-floor), .72rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.su-title {
  margin: 0;
  font-size: 1.42rem;
  font-weight: 650;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--text);
}
.su-title:focus { outline: none; }
.su-lead { margin: -4px 0 0; font-size: .92rem; line-height: 1.5; color: var(--text-dim); }
.su-small { margin: 0; font-size: max(var(--fs-floor), .8rem); line-height: 1.45; color: var(--text-faint); }
.su-fine { margin: -4px 0 0; font-size: max(var(--fs-floor), .76rem); line-height: 1.45; color: var(--text-faint); text-align: center; }
.su-note:empty { display: none; }
.su-go { margin-top: 2px; }
/* Zwei gleich laute Knöpfe: Platz für den Sockel des linken (3D-Kante). */
.su-row { margin-top: 2px; gap: 16px; padding-inline-end: 4px; }

/* ----- Zwei gleiche Wege ----- */

.su-choices { display: grid; gap: 8px; }
.su-choice {
  --cut: 10px;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  clip-path: var(--cut-clip);
  background: rgba(var(--o), .035);
  box-shadow: inset 0 0 0 1.5px rgba(var(--o), .14);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur, 200ms) var(--ease-out), box-shadow var(--dur, 200ms) var(--ease-out);
}
.su-choice:hover { background: rgba(var(--o), .06); }
.su-choice.is-picked { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--text); }
.su-choice:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }
.su-choice__mark {
  position: relative;
  width: 15px;
  height: 17px;
  margin-top: 2px;
  background: rgba(var(--o), .28);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.su-choice__mark::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--surface);
  clip-path: inherit;
}
.su-choice.is-picked .su-choice__mark,
.su-choice.is-picked .su-choice__mark::after { background: var(--text); }
.su-choice__body { display: grid; gap: 3px; min-width: 0; }
.su-choice__body b { font-size: .98rem; font-weight: 600; }
.su-choice__body span { font-size: .84rem; line-height: 1.45; color: var(--text-dim); }

/* Was unter „Sync" aufgeht – eingerückt auf die Schrift der Wahl. */
.su-on {
  display: grid;
  gap: 12px;
  margin: 2px 0 6px;
  padding-inline-start: 30px;
  animation: su-in 220ms var(--ease-out) both;
}
@keyframes su-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.su-as {
  --cut: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 9px 12px;
  clip-path: var(--cut-clip);
  background: var(--btn-quiet);
  font-size: .86rem;
  color: var(--text-dim);
}
.su-as__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.su-as__text b { color: var(--text); font-weight: 600; }
.su-as__state:empty { display: none; }
.su-as__state.is-good { color: var(--state-good); }
.su-handle .acct-hint.is-good { color: var(--state-good); }

.su-link {
  min-height: 32px;
  padding: 4px 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: .84rem;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.su-link:disabled { opacity: .5; cursor: default; }
.su-alt { justify-self: start; margin-top: -6px; }

.su-consent {
  --cut: 8px;
  padding: 11px 12px;
  clip-path: var(--cut-clip);
  background: rgba(var(--t-journal), .06);
  box-shadow: inset 0 0 0 1px rgba(var(--t-journal), .32);
  font-size: .84rem;
  line-height: 1.5;
}
.su .su-consent b { display: block; color: var(--text); font-weight: 450; }
.su-consent small { display: block; margin-top: 4px; font-size: max(var(--fs-floor), .76rem); color: var(--text-faint); }

/* ----- What leaves this device? ----- */

.su-what { border-top: 1px solid rgba(var(--o), .1); padding-top: 4px; }
.su-what summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  font-size: .88rem;
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
}
.su-what summary::-webkit-details-marker { display: none; }
.su-what summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-inline-end: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur, 200ms) var(--ease-out);
}
.su-what[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.su-what summary:hover { color: var(--text); }
.su-what__body { display: grid; gap: 8px; padding: 2px 0 6px; }

.su-sub {
  margin: 4px 0 0;
  font-size: max(var(--fs-floor), .7rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.su-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: .86rem; line-height: 1.45; color: var(--text-dim); }
.su-list li { position: relative; padding-inline-start: 20px; }
.su-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .38em;
  width: 9px;
  height: 10px;
  background: var(--c-nutrition);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.su-list.is-sees li::before { background: var(--c-journal); }
.su-list.is-never li::before { background: var(--text-faint); }
.su-list.is-share li::before { background: var(--c-meditation); }

.su-card {
  --cut: 8px;
  margin: 2px 0 0;
  padding: 11px 13px;
  clip-path: var(--cut-clip);
  background: var(--surface-2);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.su-card p { margin: 4px 0 0; }

/* Ein abgeschalteter Hauptknopf bleibt als Knopf erkennbar (Umriss) –
   ohne Fläche las er sich als bloßer Text. */
.su .su-go[disabled] { --btn-edge: rgba(var(--o), .2); opacity: 1; }

/* ----- Der Schlüssel ----- */

/* Drei Spalten auch am Telefon und enger als in .vault-words: sonst
   stehen bei 390px Sichern und „I've saved it“ unter dem Rand (1Password:
   der Schritt, den man nicht sah, wurde weggetippt). */
.su-words .vault-words { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.su-words .vault-word { --cut: 5px; gap: 6px; padding: 6px 8px; }
.su-words .vault-word__w { font-size: .86rem; }

.su-words { position: relative; }
.su-words .vault-words { transition: filter 260ms var(--ease-out); }
.su-words:not(.is-shown) .vault-words { filter: blur(6px); user-select: none; pointer-events: none; }
.su-reveal {
  --cut: 8px;
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  clip-path: var(--cut-clip);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px rgba(var(--o), .3);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.su-reveal:hover { box-shadow: inset 0 0 0 1.5px var(--text); }

.su-opts { display: grid; gap: 8px; }
.su-opt {
  --cut: 8px;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  clip-path: var(--cut-clip);
  background: var(--btn-quiet);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.su-opt:hover { background: rgba(var(--o), .24); }
.su-opt > span:last-child { display: grid; gap: 2px; min-width: 0; }
.su-opt b { font-size: .92rem; font-weight: 600; }
.su-opt > span:last-child > span { font-size: .8rem; color: var(--text-dim); }
.su-opt__icon {
  width: 22px;
  height: 22px;
  background: var(--c-nutrition);
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}

/* ----- Teilen ----- */

.su-post {
  --cut: 10px;
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  clip-path: var(--cut-clip);
  background: var(--surface-2);
}
.su-post__who { display: flex; align-items: center; gap: 10px; }
.su-post__who span { display: grid; min-width: 0; }
.su-post__who b { font-size: .9rem; }
.su-post__who small, .su-post__num small { font-size: max(var(--fs-floor), .76rem); color: var(--text-faint); }
.su-post__num { margin: 0; }
.su-post__num b { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.su-consent-block { display: grid; gap: 14px; }

/* ----- You're set ----- */

.su-sum { display: grid; gap: 1px; background: rgba(var(--o), .08); clip-path: var(--cut-clip); --cut: 10px; }
.su-sum__row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
}
.su-sum__body { display: grid; gap: 2px; min-width: 0; }
.su-sum__body b { font-size: .94rem; font-weight: 600; }
.su-sum__body span { font-size: .82rem; color: var(--text-dim); overflow-wrap: anywhere; }
.su-dot {
  width: 12px;
  height: 13px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--text-faint);
}
.su-dot.is-ok { background: var(--state-good); }
.su-dot.is-due { background: var(--c-journal); }
.su-phone .su-sub { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .su-on { animation: none; }
  .su-words .vault-words, .su-choice, .su-what summary::after { transition: none; }
}

/* E-ink: kein Schein, keine Unschärfe – die Wörter liegen unter einer
   festen Fläche, bis man tippt. */
html[data-eink] .su::before { display: none; }
html[data-eink] .su-words:not(.is-shown) .vault-words { filter: none; visibility: hidden; }
html[data-eink] .su-words:not(.is-shown) { min-height: 120px; background: #ffffff; outline: 1.5px solid #000000; outline-offset: -1.5px; }
html[data-eink] .su-reveal,
html[data-eink] .su-choice,
html[data-eink] .su-as,
html[data-eink] .su-consent,
html[data-eink] .su-card,
html[data-eink] .su-opt,
html[data-eink] .su-post,
html[data-eink] .su-sum__row { background: #ffffff; box-shadow: inset 0 0 0 1.5px #000000; color: #000000; }
html[data-eink] .su-choice.is-picked { box-shadow: inset 0 0 0 3px #000000; }
html[data-eink] .su-list li::before,
html[data-eink] .su-dot,
html[data-eink] .su-dots i.is-on,
html[data-eink] .su-opt__icon,
html[data-eink] .su-choice.is-picked .su-choice__mark,
html[data-eink] .su-choice.is-picked .su-choice__mark::after { background: #000000; }
html[data-eink] .su-dot.is-off { background: #ffffff; outline: 1.5px solid #000000; }
html[data-eink] .su-lead,
html[data-eink] .su-small,
html[data-eink] .su-fine,
html[data-eink] .su-choice__body span,
html[data-eink] .su-as__state.is-good { color: #000000; }