/* View „Profil“ (src/views/settings.ts). Nur View-spezifische Regeln; Bausteine (Listen, Segmente, Switches, Listen im
   Sheet) kommen aus components.css. Klassen mit Präfix prof-; Konto- und Kategorien-Sheet hängen am <body>. */
@layer views {
  /* Sprungziel für alte ?tab=-Links: nicht bündig unter dem Rand */
  .prof-group { scroll-margin-top:max(var(--space-4), env(safe-area-inset-top, 0px)); }

  @media (max-width: 359px) {
    .prof-ver-word { display:none; } /* „Version 1.11.0“ → „1.11.0“, damit „Neuigkeiten“ nicht bricht */
  }

  /* ---------- Konto-Karte ---------- */
  .prof-acct {
    display:flex; align-items:center; gap:var(--space-3);
    width:100%; min-width:0; min-height:68px; margin:0; padding:var(--space-3) var(--space-4);
    border-radius:0; background:transparent;
    color:var(--text); font:inherit; line-height:1.3; text-align:start;
  }
  button.prof-acct {
    cursor:pointer;
    transition:var(--press-transition), background-color var(--dur-state) var(--ease-out);
  }
  .prof-avatar {
    display:flex; align-items:center; justify-content:center; flex:none;
    width:var(--hit-min); height:var(--hit-min); border-radius:var(--radius-pill);
    background:var(--accent-soft); color:var(--accent-text);
    font-size:var(--text-md); font-weight:var(--weight-bold); line-height:1;
  }
  .prof-acct-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .prof-acct-name { font-size:var(--text-md); font-weight:var(--weight-semibold); overflow-wrap:anywhere; }
  .prof-acct-sub {
    display:flex; align-items:center; gap:var(--space-1);
    font-size:var(--text-xs); line-height:1.35; color:var(--muted);
  }
  .prof-acct > .btn.link { flex:none; }
  /* Geräte-Sync: Wolke gedämpft wie im Artboard */
  .prof-sync .row-icon { color:var(--muted); }

  /* ---------- Daten & Über ---------- */
  .prof-done { display:flex; flex:none; color:var(--good); }
  .prof-note { padding:0 var(--space-1); font-size:var(--text-xs); line-height:1.45; color:var(--muted); }
  .prof-meta {
    display:flex; flex-direction:column; gap:2px; padding:0 var(--space-1);
    font-size:var(--text-xs); line-height:1.45; color:var(--muted);
  }
  .prof-meta > div { display:flex; flex-wrap:wrap; gap:0 var(--space-2); min-width:0; }
  .prof-meta dd { min-width:0; overflow-wrap:anywhere; }

  /* ---------- Sheets (Konto, Kategorien) ---------- */
  .prof-sheet-text { font-size:var(--text-sm); line-height:1.5; color:var(--muted); }
  .prof-subhead {
    margin-top:var(--space-3);
    font-size:var(--text-sm); font-weight:var(--weight-semibold); line-height:1.3; color:var(--muted);
  }
  .prof-pad { padding:var(--space-3) var(--space-4); }

  /* Rückmeldung direkt im Sheet, nah an der Aktion; bleibt beim Scrollen oben sichtbar */
  .prof-msg {
    position:sticky; top:0; z-index:1;
    padding:10px var(--space-3); border-radius:var(--radius-key);
    font-size:var(--text-sm); line-height:1.4;
    animation:rise-in var(--dur-enter) var(--ease-out) both;
  }
  .prof-msg.is-good { background:color-mix(in srgb, var(--good) 14%, var(--surface)); color:var(--text); }
  .prof-msg.is-bad { background:color-mix(in srgb, var(--bad) 14%, var(--surface)); color:var(--text); }

  /* Formulare: Anmelden, Umbenennen */
  .prof-signin, .prof-form { display:flex; flex-direction:column; gap:var(--space-3); min-width:0; }
  .prof-form { gap:var(--space-2); }
  .prof-form > .btn.primary { margin-top:var(--space-2); }
  .prof-field { font-size:var(--text-sm); font-weight:var(--weight-semibold); }
  .prof-input {
    width:100%; min-width:0; min-height:var(--hit-min); margin:0; padding:0 var(--space-3);
    border:1px solid var(--border); border-radius:var(--radius-key);
    background:var(--surface); color:var(--text); font:inherit; font-size:var(--text-md);
    transition:border-color var(--dur-state) var(--ease-out);
  }
  .prof-input:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 40%, transparent); border-color:var(--accent); }
  .prof-input[aria-invalid="true"] { border-color:var(--bad); }
  .prof-err { font-size:var(--text-xs); line-height:1.4; color:var(--bad); }
  .prof-err:empty { display:none; }
  .prof-or {
    display:flex; align-items:center; gap:var(--space-3);
    font-size:var(--text-xs); color:var(--muted);
  }
  .prof-or::before, .prof-or::after { content:""; flex:1; height:1px; background:var(--border); }
  .prof-edit { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
  .prof-edit-actions, .prof-confirm-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--space-2); }

  /* Sync-Status im Sheet */
  .prof-sync-line { display:flex; align-items:center; gap:var(--space-3); min-height:52px; padding:var(--space-2) var(--space-4); }
  .prof-sync-text { flex:1; min-width:0; font-size:var(--text-sm); line-height:1.4; }

  /* Passkeys: Icon | Name, Daten; Aktionen darunter (passt auch bei 320 px) */
  .prof-pk {
    display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:start; gap:var(--space-1) var(--space-3);
    padding:var(--space-3) var(--space-4);
  }
  .prof-pk-icon { display:flex; flex:none; padding-top:1px; color:var(--muted); }
  .prof-pk-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .prof-pk-name {
    display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-2);
    font-size:var(--text-md); line-height:1.3; overflow-wrap:anywhere;
  }
  .prof-pk-sub { font-size:var(--text-xs); line-height:1.4; color:var(--muted); }
  .prof-pk-actions { grid-column:2; display:flex; flex-wrap:wrap; gap:0 var(--space-3); margin-left:calc(-1 * var(--space-1)); }
  .prof-pk-wide { grid-column:1 / -1; min-width:0; }
  .prof-badge {
    display:inline-flex; align-items:center; padding:2px var(--space-2); border-radius:var(--radius-pill);
    background:var(--good-soft); color:var(--good); font-size:var(--text-xs); font-weight:var(--weight-semibold); line-height:1.3;
  }

  /* Bestätigung an Ort und Stelle (Passkey/Konto löschen) */
  .prof-confirm {
    display:flex; flex-direction:column; gap:var(--space-3); min-width:0;
    padding:var(--space-3); border-radius:var(--radius-key); background:var(--bad-soft);
    animation:rise-in var(--dur-enter) var(--ease-out) both;
  }
  .prof-pk .prof-confirm { padding:var(--space-2) 0 0; background:transparent; }
  .prof-confirm-text { font-size:var(--text-sm); line-height:1.5; }
  .prof-sheet-actions { display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-3); }

  /* Wiederherstellungscode: Status im Konto-Sheet, „Passkey verloren?“, einmalige Anzeige im Dialog */
  .prof-recovery { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
  .prof-warn { color:var(--warn); }
  .prof-code {
    display:block; padding:var(--space-3); border:1px dashed var(--border); border-radius:var(--radius-key);
    background:var(--surface-2); color:var(--text);
    font:var(--weight-semibold) var(--text-md)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing:0.04em; text-align:center; word-break:break-all; user-select:all;
  }
  .prof-lost > summary {
    display:flex; align-items:center; min-height:var(--hit-min); cursor:pointer;
    font-size:var(--text-sm); color:var(--muted); list-style:none;
  }
  .prof-lost > summary::-webkit-details-marker { display:none; }
  .prof-lost[open] > summary { color:var(--text); }

  @media (hover: hover) {
    button.prof-acct:hover { background-color:var(--press); }
  }
  @media (prefers-reduced-motion: reduce) {
    .prof-msg, .prof-confirm { animation:fade-in 150ms linear both; }
  }
}