/* Practice reading uses the existing CognaType member shell and tokens. */
/* Runway 1c follow-up (1c.15): every card's inner gutter and every section's vertical rhythm
   come from these two properties. Media queries change only the properties, never a card's
   padding, so no width can hand a card the bare section rule (padding: N 0) and push its text
   against the border. test/practice-card-padding.test.mjs holds this at every width. */
:root { --pr-card-pad: var(--ct-space-5); --pr-section-y: var(--ct-space-6); }
.pr-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
/* The actions row spans both hero columns so "This works for me" and "Add to My Library" sit
   side by side at desktop width; .ct-action-row still wraps them when they do not fit. */
.pr-hero > .pr-actions { grid-column: 1 / -1; margin: 0; }
.pr-hero-media { margin: 0; min-width: 0; overflow: hidden; border-radius: var(--ct-radius-sm); }
.pr-hero-media img { display: block; width: 100%; height: 100%; max-height: 315px; aspect-ratio: 5 / 3; object-fit: cover; object-position: center; }
.pr-hero-media figcaption { padding-top: var(--ct-space-2); color: var(--ct-text-secondary); font-size: var(--ct-text-sm); line-height: 1.4; }
.pr-back { margin: 0 0 var(--ct-space-5); font-size: var(--ct-text-sm); }
.pr-door-note { color: var(--ct-text-secondary); }
.pr-prose { max-width: 68ch; line-height: 1.65; }
.pr-prose p { margin: 0; }
/* Even rhythm between every block inside reader prose (paragraphs, lists, quotes). */
.ct-section .pr-prose > * + *, .pr-quote-text p + p { margin-top: var(--ct-space-4); }
.pr-prose a { overflow-wrap: anywhere; }
.pr-list { margin: 0; padding-left: 1.4em; }
.pr-list li + li { margin-top: var(--ct-space-3); }
.pr-tldr { padding: var(--pr-card-pad); background: var(--ct-accent-blue-tint); border: 1px solid var(--ct-border-strong); border-left: 4px solid var(--ct-accent-blue); border-radius: var(--ct-radius-md); }
.pr-tldr-label { color: var(--ct-accent-blue-ink); font-size: var(--ct-text-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pr-tldr-title { margin: var(--ct-space-2) 0 var(--ct-space-3); color: var(--ct-text-primary); font-size: var(--ct-text-xl); line-height: 1.25; }
.pr-tldr .pr-prose { color: var(--ct-text-primary); font-weight: 500; }
/* Two independent columns (R1-2a): each column flows at its own height, so a long
   side card never stretches the reading column into empty space. */
.pr-article-grid, .pr-guide-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); column-gap: var(--ct-space-6); align-items: start; }
.pr-col { min-width: 0; }
/* Side cards get breathing room from the Quick read and from each other (R1-2b). */
.pr-col--aside { display: flex; flex-direction: column; gap: var(--ct-space-5); padding: var(--ct-space-6) 0; }
.pr-section { min-width: 0; padding: var(--pr-section-y) 0; }
/* Runway 1c: whitespace between a section title and its first block, a little more inside
   cards so the first numbered item does not touch the title. */
.pr-section > .ct-section-title { margin-bottom: var(--ct-space-3); }
.pr-smallest > .ct-section-title, .pr-fit-callout > .ct-section-title,
.pr-accommodations-callout > .ct-section-title, .pr-card > .ct-section-title { margin-bottom: var(--ct-space-4); }
/* Runway 1c: a rail jump lands with the section header in view, below the sticky app bar
   (chrome.js keeps --ct-topbar-height at the bar's measured height at every width). */
#practice-app [id] { scroll-margin-top: calc(var(--ct-topbar-height, 56px) + var(--ct-space-4)); }
.pr-smallest { padding: var(--pr-card-pad); background: var(--ct-bg-paper); border: 1px solid var(--ct-border-default); border-radius: var(--ct-radius-md); }
.pr-fit-callout, .pr-accommodations-callout { padding: var(--pr-card-pad); border: 1px solid var(--ct-border-default); border-radius: var(--ct-radius-md); }
.pr-fit-callout { background: var(--ct-bg-subtle); border-left: 3px solid var(--ct-accent-blue); }
.pr-accommodations-callout { background: var(--ct-accent-sage-tint); border-left: 3px solid var(--ct-accent-sage); }
.pr-accommodations-eyebrow { margin: 0 0 var(--ct-space-2); color: var(--ct-accent-sage-ink); }
/* Supporting information cards without an accent (Related Patterns, Sources and confidence):
   the side column is for supporting cards, so these read as cards too (Runway 1c). */
.pr-card { padding: var(--pr-card-pad); background: var(--ct-bg-surface); border: 1px solid var(--ct-border-default); border-radius: var(--ct-radius-md); }
.pr-card .pr-list > li:first-child { border-top: 0; padding-top: 0; }
.pr-section--related .pr-list { list-style: none; padding-left: 0; }
.pr-section--related .pr-list li { border-top: 1px solid var(--ct-border-subtle); padding: var(--ct-space-3) 0; }
.pr-section--related.pr-card .pr-list > li:last-child { padding-bottom: 0; }
.pr-section--related .pr-list li + li { margin-top: 0; }
.pr-section--sources { color: var(--ct-text-secondary); font-size: var(--ct-text-sm); }
.pr-library { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ct-space-4); }
/* FR-081 (2026-09-26): each row is a fixed thumbnail column plus a flexible text column, so a
   short title next to a tall thumbnail (or the empty placeholder) never stretches oddly. */
.pr-library-card a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--ct-space-4); align-items: center; padding: var(--ct-space-5); background: var(--ct-bg-surface); border: 1px solid var(--ct-border-default); border-radius: var(--ct-radius-md); text-decoration: none; }
.pr-library-card a:hover, .pr-library-card a:focus-visible { background: var(--ct-bg-hover); }
.pr-library-card-body { display: grid; gap: var(--ct-space-2); min-width: 0; }
.pr-library-card strong { color: var(--ct-text-primary); font-size: var(--ct-text-lg); }
.pr-library-card span { color: var(--ct-text-secondary); }
/* Shared thumbnail box (library cards, the Guide row, and the signed-out Body Doubling
   invitation): fixed square, fixed aspect ratio, so nothing shifts as images load in. A record
   with no valid hero_image yet (T-204's still-unreviewed slots) gets this same box, empty and
   dashed, rather than a broken image or a collapsed column. */
.pr-thumb { display: block; width: 72px; height: 72px; border-radius: var(--ct-radius-sm); overflow: hidden; background: var(--ct-bg-subtle); }
.pr-thumb img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
.pr-thumb--empty { border: 1px dashed var(--ct-border-default); }
.pr-admin { border-top: 2px solid var(--ct-border-strong); }
.pr-admin h3 { margin: var(--ct-space-5) 0 var(--ct-space-2); }
.pr-guide-picker .pr-list { list-style: none; padding-left: 0; }
.pr-guide-picker .pr-list li { padding: var(--ct-space-4) 0; border-top: 1px solid var(--ct-border-subtle); }
.pr-guide-picker .pr-list li + li { margin-top: 0; }
.pr-guide-grid .pr-section--capacity { padding: var(--pr-card-pad) var(--pr-card-pad) var(--ct-space-6); background: var(--ct-bg-subtle); border: 1px solid var(--ct-border-default); border-left: 3px solid var(--ct-accent-blue); border-radius: var(--ct-radius-md); }
/* Guide "Choose for your capacity today" was cramped (Runway 1c, 1b.18): room under the title,
   a little more line height, and a clear gap between the capacity levels. */
.pr-guide-grid .pr-section--capacity > .ct-section-title { margin-bottom: var(--ct-space-4); line-height: 1.3; }
.pr-guide-grid .pr-section--capacity .pr-prose { line-height: 1.7; }
.pr-guide-grid .pr-section--capacity .pr-prose > * + * { margin-top: var(--ct-space-5); }
.pr-library-guide { padding: var(--ct-space-5); border: 1px solid var(--ct-border-default); border-left: 4px solid var(--ct-accent-sage); border-radius: var(--ct-radius-md); background: var(--ct-accent-sage-tint); }
.pr-library-guide a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--ct-space-4); align-items: center; text-decoration: none; }
.pr-library-guide .pr-library-card-body { gap: var(--ct-space-2); }
.pr-library-guide strong { color: var(--ct-text-primary); font-size: var(--ct-text-lg); }
.pr-library-guide span { color: var(--ct-text-secondary); }
/* FR-081: the signed-out Body Doubling invitation gets the same thumbnail-plus-copy row. */
.pr-freebie-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--ct-space-4); align-items: flex-start; }
.pr-freebie-copy > * + * { margin-top: var(--ct-space-2); }
/* Right-rail section nav (R1-2e): text-only links, so drop the shell's 30px icon column
   that squeezed each label into two or three lines. */
#practice-context .pr-context-link { display: block; padding: var(--ct-space-2) 0; line-height: 1.35; }

/* "Activity" accents after the workroom route card (R1-2d): a soft circle behind the
   Quick read and the smallest-version card, and colored numbered markers for steps. */
.pr-tldr, .pr-smallest { position: relative; overflow: hidden; isolation: isolate; }
.pr-tldr::before, .pr-smallest::before { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.pr-tldr::before { width: 11rem; height: 11rem; right: -3.5rem; top: -4.5rem; background: var(--ct-accent-coral-tint); }
.pr-smallest { border-left: 3px solid var(--ct-accent-amber); }
.pr-smallest::before { width: 8rem; height: 8rem; right: -2.75rem; top: -3rem; background: var(--ct-accent-amber-tint); }
/* Numbering rule (Runway 1c, 1b.12): a sequence (ordered steps, such as "Try the smallest
   version") uses one color, a dark site-blue circle with a light number; the tokens flip it
   in dark mode. A list of options ("Make it fit") keeps the color spectrum. */
.pr-steps, .pr-fit-callout .pr-list { list-style: none; padding-left: 0; counter-reset: pr-step; }
.pr-steps > li, .pr-fit-callout .pr-list > li { position: relative; min-height: 1.7rem; padding-left: 2.3rem; counter-increment: pr-step; }
.pr-steps > li::before, .pr-fit-callout .pr-list > li::before { content: counter(pr-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; font-size: var(--ct-text-sm); font-weight: 700; line-height: 1; }
.pr-steps > li::before { background: var(--ct-accent-blue-ink); color: var(--ct-bg-surface); }
.pr-fit-callout .pr-list > li { --pr-dot: var(--ct-accent-blue); --pr-dot-tint: var(--ct-accent-blue-tint); --pr-dot-ink: var(--ct-accent-blue-ink); }
.pr-fit-callout .pr-list > li::before { background: var(--pr-dot-tint); box-shadow: inset 0 0 0 1.5px var(--pr-dot); color: var(--pr-dot-ink); }
.pr-fit-callout .pr-list > li:nth-child(4n+2) { --pr-dot: var(--ct-accent-sage); --pr-dot-tint: var(--ct-accent-sage-tint); --pr-dot-ink: var(--ct-accent-sage-ink); }
.pr-fit-callout .pr-list > li:nth-child(4n+3) { --pr-dot: var(--ct-accent-amber); --pr-dot-tint: var(--ct-accent-amber-tint); --pr-dot-ink: var(--ct-accent-amber-ink); }
.pr-fit-callout .pr-list > li:nth-child(4n+4) { --pr-dot: var(--ct-accent-coral); --pr-dot-tint: var(--ct-accent-coral-tint); --pr-dot-ink: var(--ct-accent-coral-ink); }

/* Pull quote for "> " lines in reader text (Runway 1c): the Pattern pull-quote look (a 4px
   rule, no fill, italic 19px text at 1.5 line height, 62ch measure) recolored to site blue,
   with a leading symbol like the Pattern callout at the top of the chain. */
.pr-quote { display: flex; align-items: flex-start; gap: var(--ct-space-3); max-width: 62ch; margin: 0; padding: 6px 0 6px 18px; border-left: 4px solid var(--ct-accent-blue); color: var(--ct-text-primary); font-size: 1.1875rem; font-style: italic; font-weight: 400; line-height: 1.5; }
.pr-quote-mark { flex: none; margin-top: 0.1em; color: var(--ct-accent-blue); font-family: "Material Symbols Rounded"; font-size: 22px; font-style: normal; font-weight: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; font-variation-settings: "FILL" 1; user-select: none; }
.pr-quote-text { min-width: 0; }

@media (max-width: 1050px) {
  /* One column (Runway 1c, 1b.15): the article column, then the supporting cards, Sources last.
     Plain block flow, so every section and card takes the full column width. */
  .pr-article-grid, .pr-guide-grid { display: block; }
  .pr-col--aside { padding: var(--ct-space-4) 0 var(--ct-space-6); gap: var(--ct-space-4); }
  /* Only the property changes here: a bare .pr-section padding rule in this block outranked
     every card (same specificity, later in the file) and zeroed their side padding at 701-1050. */
  :root { --pr-section-y: var(--ct-space-5); }
}
@media (max-width: 860px) {
  .pr-hero { grid-template-columns: minmax(0, 1fr); }
  .pr-hero-media { order: 2; }
  .pr-hero > .pr-actions { order: 1; }
  .pr-hero-media img { max-height: 220px; aspect-ratio: 16 / 9; }
}
@media (max-width: 700px) {
  /* One inner gutter for every card at narrow widths. */
  :root { --pr-card-pad: var(--ct-space-4); }
  .pr-quote { gap: var(--ct-space-2); padding-left: var(--ct-space-3); font-size: 1.0625rem; }
  .pr-quote-mark { font-size: 20px; }
  .pr-tldr::before { width: 7rem; height: 7rem; right: -2.5rem; top: -3rem; }
  .pr-smallest::before { width: 5.5rem; height: 5.5rem; right: -2rem; top: -2.25rem; }
  .pr-hero-media img { max-height: 170px; }
  /* FR-081: a smaller thumbnail column at phone width so the title/summary column keeps room
     to read (measured against a 390px viewport with the library card's own side padding). */
  .pr-thumb { width: 56px; height: 56px; }
  .pr-library-card a, .pr-library-guide a, .pr-freebie-row { grid-template-columns: 56px minmax(0, 1fr); }
}