/* Daily Life Doc: the screens of web notifications (round 10, zone N; the page's Part 11).
   - .pf, .pf-row, .pf-sw: the rows Notifications, Quiet hours and Bedtime under Preferences in Atlas
     (js/atlas/atlas-prefs.js), and the one row Notifications any screen mounts (DD.pushSwitch, js/core/push-ui.js):
     a name, a quiet line under it, a switch at the right (the switch of the Rules page, the same look).
   - .ph-steps, .ph-lead: the three numbered steps "Add to Home Screen" (onboarding's step and the sheet).
   - .ob-two, .ob-later: Later beside Done at the foot of that onboarding step.
   - .at-clin, .ob-clin: the one plain sentence about the clinician, above Sign out in Atlas and above Continue in
     onboarding's "Tell us about you" (decision 60). Not a warning: quiet ink, no frame, no button. */

.pf { margin-top: 8px; display: flex; flex-direction: column; }
.pf-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 5px 0; text-align: left; color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: opacity var(--m-press) ease; }
.pf-row:active { opacity: .6; }
.pf-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pf-t b { font-size: var(--t-m); font-weight: 500; line-height: 22px; }
.pf-t small { font-size: var(--t-sm); line-height: 18px; color: var(--ink2); overflow-wrap: anywhere; }

.pf-sw { flex: none; width: 50px; height: 44px; display: grid; place-items: center end; }
.pf-sw i { position: relative; width: 46px; height: 28px; border-radius: 14px; background: color-mix(in srgb, var(--ink3) 38%, var(--soft)); transition: background-color var(--m-step) ease; }
.pf-sw i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px var(--scrim);
  transition: transform var(--m-step) var(--ease-out), width var(--m-press) ease; }
.pf-sw[aria-checked="true"] i { background: var(--good); }
.pf-sw[aria-checked="true"] i::after { transform: translateX(18px); }
.pf-row:active .pf-sw i::after { width: 26px; }
.pf-row:active .pf-sw[aria-checked="true"] i::after { transform: translateX(14px); }
.pf-sw[disabled] { opacity: .5; }

.ph-lead { margin: 0 0 18px; font-size: var(--t-m); line-height: 1.45; color: var(--ink2); }
.ph-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ph-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--t-m); line-height: 1.45; }
.ph-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin-top: -1px;
  background: var(--soft); color: var(--ink); font-size: var(--t-sm); font-weight: 600; }
.ph-share { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin: 0 1px; color: var(--ink2); }

.ob-foot.ob-two { display: flex; align-items: center; gap: 16px; }
.ob-foot.ob-two .btn.wide { flex: 1; width: auto; }
.ob-later { flex: none; min-height: 48px; padding: 0 6px; }

.at-clin, .ob-clin { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ink2); }
.at-foot .at-clin { margin: 6px 0 2px; }
.ob-clin { margin-top: 22px; padding: 0 2px; }

@media (prefers-reduced-motion: reduce) {
  .pf-row, .pf-sw i, .pf-sw i::after { transition: none; }
}