/* [onboarding] "Set up how OllyOlly works for your family" and "Where to find things"
   (public/screens/onboarding.js). docs/DESIGN.md: calm grown-up screens, tokens from
   public/ui/tokens.css, no nested cards, streetlights as progress, tap targets 44px and up. */

.ob-top { display: grid; gap: var(--space-2); justify-items: start; }
.ob-top:empty { display: none; }
.ob-body { max-width: 680px; }
.ob-body h2 { margin: 0; font: var(--weight-display) var(--text-xl) / 1.2 var(--font-display); }
.ob-body h2:focus, .ob-body h2:focus-visible { outline: none; box-shadow: none; }
.ob-title { font-size: var(--text-2xl); }
.ob-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ob-points li { display: flex; gap: var(--space-2); align-items: flex-start; line-height: 1.45; }
.ob-points li > .ui-icon { flex: none; margin-top: 2px; color: var(--success); }
.ob-points--small { gap: var(--space-2); font-size: var(--text-sm); }
.ob-set { margin: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); display: grid; gap: var(--space-2); min-width: 0; }
.ob-set > legend { padding: 0 var(--space-1); font-weight: var(--weight-strong); font-size: var(--text-md); }
.ob-pick { display: grid; gap: var(--space-1); padding: var(--space-2) 0; }
.ob-pick + .ob-pick { border-top: 1px solid var(--line); }
.ob-pick-name { font-weight: var(--weight-strong); font-size: var(--text-sm); }
.ob-pick .ui-seg { max-width: 100%; }
.ob-pick .ui-seg span { white-space: normal; text-align: center; line-height: 1.2; }
.ob-suggested { margin-left: var(--space-2); vertical-align: middle; }
.ob-times { display: grid; gap: var(--space-3); }
.ob-time { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.ob-time-name { margin: 0; font-weight: var(--weight-strong); }
.ob-later { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; }
.ob-later .ui-icon { flex: none; margin-top: 3px; }
.ob-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-2); }
.ob-nav > :last-child { margin-left: auto; }
.ob-nav--start > :last-child { margin-left: 0; }
.ob-always { display: grid; gap: var(--space-2); background: var(--success-soft); border-color: transparent; }
.ob-always p { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.ob-always ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.ob-kid { min-height: var(--tap, 44px); align-items: center; }
.ob-summary .ui-list { display: grid; }
.ob-line { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); }
.ob-line + .ob-line { border-top: 1px solid var(--line); }
.ob-line p { margin: 0; }
.ob-line-title { font-weight: var(--weight-strong); }
.ob-line-text { line-height: 1.45; }
.ob-card .ui-cluster { flex-wrap: wrap; }

@media (min-width: 700px) {
  .ob-time { grid-template-columns: 1fr 1fr; align-items: end; }
  .ob-time-name { grid-column: 1 / -1; }
  .ob-pick { grid-template-columns: minmax(150px, 1fr) 2fr; align-items: center; }
}

/* A phone on its side: the setup reads in one column, with less space above. */
@media (orientation: landscape) and (max-height: 500px) {
  .ob-title { font-size: var(--text-xl); }
  .ob-set { padding: var(--space-3); }
}