.password-criteria{padding:12px 14px;border-radius:14px;background:var(--mint,#e0f2eb);font-size:13px}.password-criteria p{margin:0 0 5px}.password-criteria p::before{content:'○';margin-right:8px}.password-criteria .criterion-met{color:var(--green);font-weight:700}.password-criteria .criterion-met::before{content:'✓'}.password-criteria small{display:block;margin-top:8px;color:var(--muted)}
.auth-confirmation{overflow-wrap:anywhere}.auth-confirmation ol{padding-left:21px;font-size:14px;line-height:1.7}.auth-confirmation li+li{margin-top:8px}.confirmation-mark{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--mint,#e0f2eb);color:var(--green);font-size:30px;margin:18px 0}.auth-confirmation h2{margin-bottom:8px}.auth-confirmation h2:focus,.tutorial-popover h2:focus{outline:none}
.onboarding-profile-note{padding:16px 18px;margin:18px 0;border:1px solid #bce0d2;border-radius:18px;background:#e0f2eb}.onboarding-profile-note p{margin:8px 0 0;font-size:14px}.settings-row span small{display:block;font-size:12px;color:var(--muted);margin-top:5px}.settings-row>button{flex-shrink:0}.account-danger{border-top:1px solid var(--line)}.account-danger b{color:#a22c36}.account-delete-warning{padding:14px;border-radius:14px;background:#fff0ef;color:#772630;font-size:14px;line-height:1.6}.account-delete-actions{display:flex;flex-wrap:wrap;gap:10px}.primary.danger{background:#a22c36;color:#fff}.secondary.danger{color:#a22c36;border-color:#dca6ab}.account-delete-actions button{flex:1;min-width:140px}
.tutorial-target{outline:3px solid #eaa24e!important;outline-offset:4px!important}
dialog.tutorial-popover{position:fixed;z-index:1000;box-sizing:border-box;inset:auto 24px 24px auto;margin:0;padding:22px;width:min(410px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid #bce0d2;border-radius:22px;box-shadow:0 16px 64px rgba(15,45,38,.24);color:var(--ink);background:#fff}
dialog.tutorial-popover::backdrop{background:rgba(15,45,38,.2);backdrop-filter:none}.tutorial-head{position:sticky;top:0;z-index:1;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:14px}.tutorial-head small{font-size:12px;font-weight:700;color:var(--green)}.tutorial-head .close{position:static;flex-shrink:0;width:32px;height:32px}.tutorial-popover h2{font-size:21px;margin:12px 0 10px;line-height:1.25}.tutorial-popover p{font-size:14px;line-height:1.65;margin:0 0 20px}.tutorial-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.tutorial-actions .link{margin-right:auto}.tutorial-actions button{min-height:42px}
@media(max-width:700px){dialog.tutorial-popover{inset:auto 12px max(12px,env(safe-area-inset-bottom)) 12px;max-height:48dvh;padding:18px;width:auto}.settings-row{gap:12px;flex-wrap:wrap}.auth-gate{padding:16px}.auth-card{padding:22px;box-sizing:border-box}.auth-card input{min-width:0;width:100%}.tutorial-popover h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){dialog.tutorial-popover{scroll-behavior:auto}}


/* The tour is a scrollable, non-modal explanation; ordinary dialogs retain their page lock. */
body.tutorial-running .app{padding-bottom:50vh}
.tutorial-popover .tutorial-actions{position:sticky;bottom:0;background:#fff;padding-top:8px}
.tutorial-popover p{overflow-wrap:anywhere}
dialog.tutorial-popover[data-placement="top"]{inset:24px 24px auto auto}
@media(max-width:700px){dialog.tutorial-popover[data-placement="top"]{inset:max(12px,env(safe-area-inset-top)) 12px auto 12px}}

/* Keep long explanations in their own scroll area, never behind the action buttons. */
dialog.tutorial-popover[open]{display:flex;flex-direction:column;overflow:hidden}
.tutorial-popover .tutorial-head,.tutorial-popover h2,.tutorial-popover .tutorial-actions{flex-shrink:0}
.tutorial-popover .tutorial-head,.tutorial-popover .tutorial-actions{position:static}
.tutorial-popover p{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;margin-bottom:12px}