/* Cuadernillos: the overview page and the six-sheet reader. Loaded only on those pages.
   On screen the sheets stack like pages on a desk; in print each sheet is one page. */

:root { --bk-sheet: 46rem; --bk-pad: clamp(1.4rem, 0.8rem + 3vw, 3.2rem); --bk-num: 2.6rem; }

/* ---------- overview ---------- */
.bk-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; list-style: none; padding: 0; margin: 0; }
.bk-parts li { display: flex; gap: 1rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.bk-parts h3 { font-size: 1.15rem; }
.bk-parts p { color: var(--muted); margin-top: 0.4rem; font-size: 0.96rem; }
.bk-n { flex: 0 0 var(--bk-num); height: var(--bk-num); border-radius: 50%; background: var(--green); color: var(--white); display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.bk-covers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.bk-cover { display: flex; flex-direction: column; gap: 0.6rem; padding: 2rem; min-height: 19rem; border-radius: var(--radius); background: var(--ink); color: var(--white); border-left: 0.5rem solid var(--accent); transition: transform var(--dur) var(--ease); }
.bk-cover:hover { transform: translateY(-0.25rem); }
.bk-cover-num { font-size: 3.4rem; font-weight: 700; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.bk-cover-tag { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.bk-cover-title { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; }
.bk-cover-q { color: var(--muted-2); }
.bk-cover-go { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--accent); }
.bk-cover-go svg { width: var(--icon); height: var(--icon); }

/* ---------- reader ---------- */
.bk { background: var(--paper-2); padding-bottom: var(--space-section); }
.bk-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: calc(var(--bk-sheet) + 2 * var(--gutter)); padding-block: 1.6rem; }
.bk-back { color: var(--green-ink); font-weight: 600; text-decoration: underline; text-underline-offset: var(--nudge); min-height: var(--tap); display: inline-flex; align-items: center; }
/* minmax(0, …): a grid track otherwise grows to its widest sheet and overflows a phone */
.bk-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; max-width: calc(var(--bk-sheet) + 2 * var(--gutter)); }
.bk-sheet { background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: var(--bk-pad); display: flex; flex-direction: column; gap: 1.1rem; }
.bk-sheet > * { margin: 0; }
.bk-sheet h3 { font-size: 1.15rem; margin-top: 0.8rem; }
.bk-h { font-size: var(--text-h3); padding-bottom: 0.8rem; border-bottom: var(--hair) solid var(--green); }
.bk-folio { margin-top: auto; padding-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.bk-front { background: var(--ink); color: var(--white); border-left: 0.5rem solid var(--accent); }
.bk-front h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); letter-spacing: -0.02em; }
.bk-front h2 { font-size: 1.05rem; font-family: var(--font-body); color: var(--accent); margin-top: 1.2rem; }
.bk-kicker { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.bk-q { font-family: var(--font-display); font-size: var(--text-h3); }
.bk-for, .bk-front .bk-folio { color: var(--muted-2); }
.bk-goals { list-style: disc; padding-left: 1.2rem; display: grid; gap: 0.5rem; }

.bk-story { font-family: var(--font-display); font-size: var(--text-lead); }
.bk-ask { padding: 1.3rem; border-radius: var(--radius-sm); background: var(--green-soft); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.bk-sheet .btn { white-space: normal; text-align: left; }
.bk-ask-q { font-weight: 700; font-size: var(--text-lead); }

.bk-dl { display: grid; gap: 1rem; }
.bk-dl > div { padding-left: 1rem; border-left: var(--hair) solid var(--accent-ink); }
.bk-dl dt { font-weight: 700; }
.bk-dl dd { margin: 0.2rem 0 0; color: var(--muted); }
.bk-gloss { grid-template-columns: 1fr 1fr; }

.bk-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bk-table caption { text-align: left; font-weight: 700; padding-bottom: 0.6rem; }
.bk-table th, .bk-table td { padding: 0.65rem 0.4rem; border-bottom: 1px solid var(--line); text-align: right; }
.bk-table th[scope="row"] { text-align: left; font-weight: 400; }
.bk-table thead th { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.bk-table tbody td:last-child { font-weight: 700; }

.bk-ex { list-style: decimal; padding-left: 1.3rem; display: grid; gap: 1.2rem; }
.bk-ex li > p { font-weight: 600; margin-bottom: 0.6rem; }
.bk-ex .answer p { padding: 0 1.2rem 1rem; color: var(--muted); }
.bk-list { list-style: disc; padding-left: 1.2rem; display: grid; gap: 0.45rem; color: var(--muted); }
.bk-src a { display: inline-block; padding-block: 0.35rem; color: var(--green-ink); text-decoration: underline; text-underline-offset: var(--nudge); overflow-wrap: anywhere; }
.bk-notes-l { font-weight: 700; margin-top: 0.8rem; }
.bk-notes { width: 100%; padding: 0.9rem; border: 1px solid var(--muted); border-radius: var(--radius-sm); font: inherit; background: var(--paper); resize: vertical; }
.bk-hint { font-size: 0.86rem; color: var(--muted); }
.bk-notice { padding: 1rem; border-radius: var(--radius-sm); background: var(--paper-2); font-size: 0.9rem; color: var(--muted); }
.bk-pager > span { flex: 1; }

@media (max-width: 1020px) { /* ds-allow-hardcode: custom properties are not valid in media queries */
  .bk-parts, .bk-covers { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .bk-parts, .bk-covers, .bk-gloss { grid-template-columns: 1fr; }
  .bk-cover { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-cover:hover { transform: none; }
}

@media print {
  .site-header, .site-footer, .skip-link, .bk-bar, .bk-screen { display: none; }
  .bk { background: none; padding: 0; }
  .bk-doc { display: block; max-width: none; padding: 0; }
  .bk-sheet { box-shadow: none; border-radius: 0; min-height: 92vh; break-after: page; break-inside: avoid; }
  .bk-sheet:last-child { break-after: auto; }
  .bk-front { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .bk-notes { min-height: 12rem; background: none; }
}