/* Step 4 (impeccable critique + taste-design-review): shape fixes. Scale: --s-* tokens only. */

/* spacing helpers that replace inline style= attributes (taste-code-craft: no inline styles) */
.sp-display-block { display: block; }
.sp-font-size-17px-margin-top-8px { font-size: var(--fs-17); margin-top: var(--s-2); }
.sp-margin-12px-0 { margin: var(--s-3) 0; }
.sp-margin-12px-0-24px { margin: var(--s-3) 0 var(--s-5); }
.sp-margin-8px-0-20px { margin: var(--s-2) 0 var(--s-5); }
.sp-margin-8px-0-8px { margin: var(--s-2) 0; }
.sp-margin-bottom-12px { margin-bottom: var(--s-3); }
.sp-margin-top-10px { margin-top: var(--s-3); }
.sp-margin-top-12px { margin-top: var(--s-3); }
.sp-margin-top-16px { margin-top: var(--s-4); }
.sp-margin-top-20px { margin-top: var(--s-5); }
.sp-margin-top-24px { margin-top: var(--s-5); }
.sp-prose-wide { max-width: 44em; margin-bottom: var(--s-5); }

/* P1 library: "reading now" block put the title in the 112px cover column and the button in the wide column.
   Now: one row per book, title and progress left, action right, rule between rows. */
.reading { display: block; margin-bottom: var(--s-7); }
.reading .h-sub { margin-bottom: var(--s-3); }
.reading-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-5); padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.reading-item:last-child { border-bottom: 1px solid var(--rule); }
.reading-item .bar-track { margin-top: var(--s-3); max-width: 28em; }
@media (max-width: 480px) {
  .reading-item { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .reading-item .btn { width: 100%; }
}

/* P2 home: publisher shelves were 72px thumbnails in a half-width panel; make the covers read as books. */
.press-covers { gap: var(--s-4); flex-wrap: wrap; }
.press-covers img { width: clamp(72px, 7.5vw, 104px); }

/* P1 (found at the step-9 gate, present since the first build): progress fills are <span>s, so inline: width and height were ignored and
   no filled part ever showed in the reading bars. Block display + a fill colour on the small bar too. */
.bar-fill, .mini-track > span { display: block; height: 100%; background: var(--progress); border-radius: 2px; }