/* ============================================================
   LIBRARY.CSS
   UpLoft PLLC — Library module (publications)

   Shared page layout for every publication's sections, loaded
   after the system styles, before each publication's own
   dialect.css: variables → template → print → THIS FILE →
   dialect.

   Generalizes orientation/css/orientation.css: the old .prose
   panel only ever held hand-written <p> tags. Now that section
   bodies render from real markdown, .prose also needs to style
   headings, lists, and blockquotes — the handful of block-level
   elements `marked` produces.

   Page-specific bespoke layout (timebar, stage cards, crisis
   panel, etc.) stays embedded in each section's own markdown
   file as raw HTML + <style>, same convention as before.
   ============================================================ */

h1 {
  font-size      : 34px;
  line-height    : 0.95;
  letter-spacing : 1px;
}

/* Optional subtitle under the title — "The Idea Behind It" line,
   used by publications that attribute each piece to a theoretical basis */
.section-subtitle {
  font-family: var(--font-body);
  font-style : italic;
  font-size  : 11.5px;
  color      : var(--bone);
  opacity    : 0.85;
  margin-top : 2px;
}

/* Standard prose panel */
.prose {
  border       : var(--border-mid);
  background   : var(--bone);
  padding      : var(--space-lg);
  box-shadow   : 4px 4px 0 var(--steel);
  margin-bottom: var(--space-md);
}

.prose p { font-size: 13.5px; line-height: 1.45; }
.prose p + p { margin-top: var(--space-md); }

/* Subheadings inside a prose panel — markdown ### / ## */
.prose h2, .prose h3 {
  font-family    : var(--font-label);
  letter-spacing : 0.5px;
  text-transform : uppercase;
  color          : var(--ink);
  margin-top     : var(--space-md);
  margin-bottom  : var(--space-xs);
}

.prose h2 { font-size: 15px; }
.prose h3 { font-size: 13px; }
.prose > :first-child { margin-top: 0; }

/* Lists — markdown * / - and numbered lists */
.prose ul, .prose ol {
  margin     : var(--space-sm) 0 var(--space-sm) var(--space-lg);
  font-size  : 13.5px;
  line-height: 1.45;
}

.prose li { margin-bottom: var(--space-xs); }

/* Blockquote — used for the "10% Shift" style callout convention */
.prose blockquote {
  border-left  : 5px solid var(--accent);
  background   : var(--paper);
  padding      : var(--space-sm) var(--space-md);
  margin       : var(--space-md) 0;
  font-style   : italic;
}

.prose blockquote p { font-size: 13px; }

/* Horizontal rule — markdown --- divider between intro and body */
.prose hr {
  border    : none;
  border-top: 2px dotted var(--steel);
  margin    : var(--space-md) 0;
}

/* Back link in the footer — screen only */
footer .back-link {
  display        : inline-block;
  margin-top     : var(--space-xs);
  font-family    : var(--font-label);
  font-size      : 10px;
  letter-spacing : 2px;
  text-transform : uppercase;
  color          : var(--steel);
  text-decoration: none;
}

footer .back-link:hover { color: var(--ink); text-decoration: underline; }

@media print { footer .back-link { display: none; } }


/* ============================================================
   QUICK GUIDE — reusable page-1 components
   ============================================================
   Drop-in components for the "infographic page 1, full prose
   page 2" pattern. Fully content-driven — copy the markup, fill
   in your own text, no CSS needed. Wrap the whole page-1 block
   in .quick-guide; everything after it in the same section's
   markdown becomes the wordier "page 2" (plain .prose panels).

   .quick-guide forces a page break after itself IN PRINT ONLY —
   on screen it just reads as one more boxed panel, so the section
   still scrolls as a single continuous page during editing/review.

   Usage sketch (paste at the top of a section's .md file, above
   the regular prose):

     <div class="quick-guide">
       <span class="qg-label">Quick Guide</span>
       <p class="qg-lede">One sentence framing the whole idea.</p>

       <div class="qg-steps">
         <div class="qg-step">
           <span class="qg-step-num">1</span>
           <div class="qg-step-body">
             <h4>Step Name</h4>
             <p>One line on what it means.</p>
           </div>
         </div>
         <!-- repeat .qg-step for each step -->
       </div>
     </div>

   For a category/comparison shape instead of a sequence, swap
   .qg-steps for .qg-grid (add "cols-2" for a two-column layout,
   default is three):

     <div class="qg-grid cols-2">
       <div class="qg-card a">
         <h4>Category Name</h4>
         <p>One or two lines.</p>
       </div>
       <!-- .qg-card b, .qg-card c for additional cards/colors -->
     </div>

   .qg-callout is a single boxed stat/line for one big takeaway.
   ============================================================ */

.quick-guide {
  border       : var(--border-mid);
  background   : var(--bone);
  padding      : var(--space-lg);
  box-shadow   : 4px 4px 0 var(--steel);
  margin-bottom: var(--space-md);
}

.qg-label {
  display        : inline-block;
  align-self     : flex-start; /* stay a small badge, not stretched full-width by print's flex centering */
  font-family    : var(--font-label);
  font-size      : 11px;
  letter-spacing : 2px;
  text-transform : uppercase;
  background     : var(--brand-sage);
  color          : var(--ink);
  padding        : 2px 9px;
  border         : 2px solid var(--ink);
  margin-bottom  : var(--space-sm);
}

.qg-lede {
  font-size    : 13.5px;
  line-height  : 1.4;
  margin-bottom: var(--space-md);
}

/* Numbered sequence — for step-by-step content */
.qg-steps {
  display       : flex;
  flex-direction: column;
  gap           : var(--space-sm);
}

.qg-step {
  display     : flex;
  gap         : var(--space-md);
  align-items : flex-start;
  border-left : 5px solid var(--accent);
  background  : var(--paper);
  padding     : var(--space-sm) var(--space-md);
}

.qg-step-num {
  font-family: var(--font-display);
  font-size  : 26px;
  line-height: 1;
  color      : var(--ink);
  min-width  : 28px;
}

/* h3 (site/) and h4 (existing Survival Guide packet content) — see
   the .qg-card h3/h4 note above. */
.qg-step-body h3,
.qg-step-body h4 {
  font-family    : var(--font-label);
  font-size      : 13px;
  letter-spacing : 0.5px;
  text-transform : uppercase;
  color          : var(--ink);
  margin-bottom  : 2px;
}

.qg-step-body p {
  font-size  : 12px;
  line-height: 1.35;
  color      : var(--steel);
}

/* Card grid — for categories, comparisons, short lists */
.qg-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : var(--space-sm);
}

.qg-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.qg-card {
  border    : 2.5px solid var(--ink);
  background: var(--paper);
  padding   : var(--space-sm) var(--space-md);
}

/* h3 and h4 both styled here — site/ pages use h3 (their qg-label
   section headers are h2, so card titles need to be h3 to avoid a
   heading-level skip); the Survival Guide's existing packet content
   already uses h4 under a different heading structure. Both valid,
   neither should be renamed out from under the other. */
.qg-card h3,
.qg-card h4 {
  font-family    : var(--font-label);
  font-size      : 12.5px;
  letter-spacing : 0.5px;
  text-transform : uppercase;
  margin-bottom  : 3px;
}

.qg-card p {
  font-size  : 11.5px;
  line-height: 1.35;
  color      : var(--steel);
}

/* Three-way accent cycle: violet / sage / forest — the tokens
   Approach's four-card grids are meant to rotate through. .c was
   --steel before --brand-green existed as a token; this also shifts
   the 3rd card of Home's 15/5/30 session-structure grid from grey to
   forest green as a side effect, since .qg-card.c is shared. */
.qg-card.a { border-top: 6px solid var(--accent); }
.qg-card.b { border-top: 6px solid var(--brand-sage); }
.qg-card.c { border-top: 6px solid var(--brand-green); }

/* Single boxed callout — one big stat or takeaway line */
.qg-callout {
  text-align    : center;
  border        : var(--border-mid);
  background-color : var(--ink);
  background-image : radial-gradient(circle, rgba(245, 241, 231, 0.05) 1px, transparent 1px);
  background-size   : 8px 8px;
  color         : var(--bone);
  padding       : var(--space-md);
  margin-top    : var(--space-sm);
  font-family   : var(--font-label);
  font-size     : 14px;
  letter-spacing: 0.5px;
}

/* Continuation header — auto-injected by render.js (injectContinuedHeader)
   right before a quick-guide section's first subheading, using that
   section's own title/subtitle. Nothing to author by hand per file. It's
   a full replica of the real <header> band (same rules apply — see
   template.css) rather than a small tag, so a page that spills past the
   quick guide starts clean instead of picking up mid-thought. On screen
   it just reads as a second header band; in print it forces the actual
   page break. */
header.continued {
  margin-top: var(--space-lg);
}

@media print {
  header.continued { break-before: page; }
}