/* My files ▸ Getting started — the first-week checklist card (public/firstweek.js).
 *
 * Its own sheet, like onthisday.css, so styles.css is not touched. Theme tokens only: every theme
 * dresses it through --panel, --line, --text and --accent without knowing it exists. Nothing
 * moves; a done line is a tick and quieter type, not an animation.
 */

.onb-slot { flex: none; padding: calc(14 * var(--sp)) calc(18 * var(--sp)) 0; }
.onb-slot[hidden] { display: none; }

.onb {
  max-width: 560px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); color: var(--text);
  padding: 10px 12px 8px;
}

.onb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.onb-head h3 { font-size: calc(var(--fs-base) + var(--fs-half)); font-weight: var(--fw-semi); }
.onb-count { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--dim); }   /* --dimmer was 4.27:1 here */
.onb-x { width: 28px; height: 28px; flex: none; }
.onb-x > svg { width: 15px; height: 15px; }

.onb-list { list-style: none; margin: 0; padding: 0; }
.onb-step {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 3px 0;
  border-top: 1px solid var(--line-soft);
}
.onb-step:first-child { border-top: 0; }
.onb-tick {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--check-line);
  display: grid; place-items: center;
}
.onb-step.done .onb-tick { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.onb-tick > svg { width: 12px; height: 12px; stroke-width: 2.6; }
.onb-label { flex: 1; min-width: 0; font-size: var(--fs-md); }
.onb-step.done .onb-label { color: var(--dim); }
.onb-go { flex: none; height: calc(var(--h-control) - 6px); padding: 0 calc(12 * var(--sp)); }

.onb-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 560px) {
  .onb-slot { padding: 10px 12px 0; }
  .onb { max-width: none; padding: 8px 10px 6px; }
  .onb-step { min-height: 40px; }
}

/* N1: on My files app.js docks the slot inside #content, so it scrolls away with the list. The
   list already has its padding there; the slot only keeps a gap under the card. */
.content > .onb-slot { padding: 0 0 calc(10 * var(--sp)); }