/* Document pages: handout, prompt library, practice files, after the workshop, trainer notes. */

[hidden] { display: none !important; }

.doc-header { margin-bottom: 2.5rem; }
.doc-header h1 { margin-bottom: 0.75rem; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.75rem 0 0.5rem; }
.doc-intro p, .doc-lead { font-size: 1.5rem; line-height: 1.5; max-width: 48rem; }
.doc-intro p + p { font-size: 1.25rem; }
@media (max-width: 760px) { .doc-intro p, .doc-lead { font-size: 1.3rem; } }

/* ---------- Handout layout: contents + text ---------- */
.doc-layout { display: block; }
.toc {
  margin: 0 0 2rem; background: var(--surface-card); border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--border);
}
.toc summary {
  min-height: 56px; padding: 0.5rem 1.5rem; cursor: pointer;
  font-weight: 600; font-size: 1.25rem; color: var(--text-heading);
  display: flex; align-items: center;
}
.toc summary:focus-visible { outline-offset: -3px; border-radius: var(--r-card); }
.toc summary::-webkit-details-marker { display: none; }
.toc summary { list-style: none; }
/* Arrow that shows the box can be opened or closed (phones and narrow windows). */
.toc summary::after {
  content: ""; margin-left: auto; width: 0.6em; height: 0.6em;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translate(-0.15em, -0.15em);
}
.toc[open] summary::after { transform: rotate(-135deg) translate(-0.15em, -0.15em); }
.toc nav { padding: 0 0.75rem 1rem; }
.toc-list, .toc-list ol { list-style: none; margin: 0; padding: 0; }
.toc-list > li { margin-top: 0.125rem; }
.toc-list ol { padding-left: 0.75rem; margin: 0.125rem 0 0.25rem 0.75rem; border-left: 1px solid var(--border); }
.toc a {
  display: flex; align-items: center; min-height: 48px; padding: 0.25rem 1rem;
  border-radius: var(--r-pill); text-decoration: none; color: var(--text-body);
  font-size: 1.25rem; line-height: 1.3;
  transition: background-color var(--dur) var(--ease);
}
.toc-list > li > a { font-weight: 500; }
.toc a:hover { background: var(--surface-sunken); color: var(--text-heading); }
.toc a[aria-current="true"] { background: var(--select-bg); color: var(--link-hover); font-weight: 600; }

@media (min-width: 1100px) {
  .doc-layout { display: grid; grid-template-columns: 18.5rem minmax(0, 1fr); gap: 3rem; align-items: start; }
  .toc {
    position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; margin: 0;
    background: none; box-shadow: none;
  }
  .toc summary { pointer-events: none; padding-left: 1rem; min-height: 48px; padding-top: 0; padding-bottom: 0.25rem; }
  .toc summary::after { display: none; }
  .toc nav { padding: 0; }
}

/* ---------- Handout text ---------- */
.doc { max-width: 57.5rem; }
.doc h2 { scroll-margin-top: 1rem; font-size: 2rem; margin-top: 3.5rem; }
.doc > h2:first-child, .doc > :first-child { margin-top: 0; }
.doc h3 { scroll-margin-top: 1rem; margin-top: 2.25rem; }
.doc h4 { margin-top: 1.75rem; }
/* Long reading text in a serif, as in the design. */
.page-handout .doc p, .page-handout .doc li, .page-handout .doc blockquote {
  font-family: var(--font-reading); font-size: 1.3125rem; line-height: 1.75;
}
.page-handout .doc table, .page-handout .doc table p { font-family: var(--font-body); font-size: 1.25rem; line-height: 1.5; }
.doc hr { border: 0; border-top: 1px solid var(--border); margin: 3.5rem 0 1rem; }
.doc blockquote {
  margin: 1.5rem 0; padding: 1.25rem 1.5rem; background: var(--surface-sunken);
  border-radius: var(--r-panel); color: var(--text-meta);
}
.doc blockquote p:last-child { margin-bottom: 0; }
.doc li + li { margin-top: 0.35rem; }
mark.fill { background: var(--accent-bg); color: var(--accent); padding: 0 0.25em; border-radius: 6px; font-weight: 700; }

.table-wrap {
  overflow-x: auto; margin: 1.25rem 0 1.75rem; border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--border); background: var(--surface-card);
}
.table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.doc table { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: 1.25rem; line-height: 1.5; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
.doc thead th { background: var(--surface-sunken); border-top: 0; font-weight: 600; color: var(--text-heading); }
.doc tbody th { font-weight: 600; color: var(--text-heading); }
.doc table.fill-in td, .doc table.fill-in th { border: 1px solid var(--ring); }
.doc table.fill-in td:empty { height: 3.5rem; }

/* ---------- Prompt library ---------- */
.filters { margin: 0 0 2rem; padding: 0.25rem 0 0.75rem; background: var(--page-bg); }
/* Keep the filters in view while scrolling, but only where there is room for it. */
@media (min-width: 900px) and (min-height: 760px) {
  .filters { position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 0 var(--border); }
}
.search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; max-width: 56rem; margin-bottom: 1rem; }
.search-row label { display: flex; align-items: center; min-height: 44px; font-weight: 500; margin-bottom: 0; }
.search-row input {
  flex: 1 1 18rem; width: 100%; min-height: 56px; padding: 0 1.5rem 0 3.75rem;
  font: inherit; color: var(--text-heading); border: 0; border-radius: var(--r-pill);
  background: var(--surface-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23707175' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E") no-repeat 1.375rem 50%;
  box-shadow: inset 0 0 0 1px var(--ring);
}
.search-row input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus), 0 0 0 4px #bbd6ff; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.25rem; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: inherit; font-size: 1.25rem; font-weight: 500; color: var(--text-body); background: var(--surface-sunken);
}
.chip:hover { background: var(--border); }
.chip:active { transform: scale(0.98); }
.chip[aria-pressed="true"] { background: var(--text-heading); color: #fff; }
.chip[aria-pressed="true"]::before {
  content: ""; width: 18px; height: 18px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.prompt-count { margin: 0.75rem 0 0; color: var(--text-muted); font-size: 1.25rem; }
.no-results { padding: 1.5rem 1.75rem; background: var(--surface-card); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--border); }
.no-results p { margin-top: 0; }

.prompt-groups { background: var(--surface-sunken); border-radius: var(--r-band); padding: 2.5rem; }
.prompt-group + .prompt-group { margin-top: 3rem; }
.prompt-group h2 { margin: 0 0 1.25rem; font-size: 1.75rem; scroll-margin-top: 14rem; }
.group-note { max-width: 48rem; color: var(--text-meta); margin: -0.5rem 0 1.25rem; }
.prompt-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 32.5rem), 1fr));
}
.prompt-card {
  display: flex; flex-direction: column; gap: 0.75rem;
  background: var(--surface-card); border-radius: var(--r-card); padding: 1.75rem 2rem;
}
.prompt-title { font-size: 1.5rem; line-height: 1.3; margin: 0; display: flex; gap: 0.75rem; align-items: center; }
.prompt-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill);
  background: var(--brand-orange); color: var(--text-heading); font-size: 1.25rem; font-weight: 600;
}
.prompt-text { margin: 0; flex: 1; line-height: 1.7; }
.copy-btn { align-self: flex-start; min-height: 52px; font-size: 1.25rem; margin-top: 0.5rem; }
.copy-btn::before {
  content: ""; width: 20px; height: 20px; flex: none; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='13' rx='2'/%3E%3Cpath d='M16 8V5a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='13' rx='2'/%3E%3Cpath d='M16 8V5a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.copy-btn.copied::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
}
.copy-help { margin: 0; padding: 0.75rem 1rem; background: var(--accent-bg); color: var(--text-heading); border-radius: var(--r-panel); font-weight: 500; }
.doc-footer { margin-top: 2.5rem; color: var(--text-meta); }
@media (max-width: 760px) {
  .prompt-groups { padding: 1.25rem; border-radius: var(--r-card); margin: 0 calc(-0.5 * var(--gutter)); }
  .prompt-card { padding: 1.5rem 1.25rem; }
}

/* ---------- Practice files page ---------- */
.invented-notice {
  max-width: 48.75rem; margin: 0 0 2rem; padding: 1.125rem 1.5rem;
  background: var(--info-bg); color: var(--info); border-radius: var(--r-card);
}
.invented-notice strong { font-weight: 600; }
.trainer-tip {
  max-width: 48.75rem; margin: 0 0 2.5rem; padding: 1.5rem 1.75rem;
  background: var(--surface-card); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--border);
}
.trainer-tip h2 {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.875rem; margin: 0 0 0.75rem;
  border-radius: var(--r-pill); background: var(--accent-bg); color: var(--accent);
  font-size: 1.25rem; font-weight: 500; letter-spacing: 0;
}
.trainer-tip p { margin: 0; }
.practice-list {
  background: var(--surface-sunken); border-radius: var(--r-band); padding: 2.5rem;
  display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 33.75rem), 1fr));
}
.practice-card {
  background: var(--surface-card); border-radius: var(--r-card); padding: 2rem;
  display: flex; flex-direction: column;
}
.practice-card h2 { margin: 0.25rem 0 1rem; font-size: 1.625rem; line-height: 1.3; }
.practice-kicker { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.practice-num { font-size: 1.25rem; font-weight: 500; color: var(--text-faint); }
.practice-app {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.875rem;
  border-radius: var(--r-pill); background: var(--info-bg); color: var(--info); font-size: 1.25rem; font-weight: 500;
}
.practice-body { flex: 1; }
.practice-body li + li { margin-top: 0.375rem; }
.practice-prompt { margin: 1.25rem 0; background: var(--surface-sunken); border-radius: var(--r-panel); padding: 1.125rem 1.25rem; }
.practice-prompt-label { margin: 0 0 0.375rem; font-size: 1.25rem; font-weight: 600; color: var(--text-heading); }
.practice-prompt blockquote { margin: 0 0 0.75rem; padding: 0; background: none; line-height: 1.7; }
.practice-prompt blockquote p:last-child { margin-bottom: 0; }
.practice-prompt .copy-btn { margin-top: 0.25rem; min-height: 48px; }
.practice-download { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; margin: 1.5rem 0 0; }
.practice-download .button { min-height: 64px; font-size: 1.375rem; }
.practice-download .button::before {
  content: ""; width: 24px; height: 24px; flex: none; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.file-meta { color: var(--text-muted); font-size: 1.25rem; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .practice-list { padding: 1.25rem; border-radius: var(--r-card); margin: 0 calc(-0.5 * var(--gutter)); }
  .practice-card { padding: 1.5rem 1.25rem; }
}

/* ---------- After the workshop ---------- */
.jump-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.after-part, .trainer-part {
  background: var(--surface-card); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--border);
  padding: 2.5rem; margin-top: 2rem; max-width: 60rem;
}
.after-part#part-plan { background: var(--surface-sunken); box-shadow: none; border-radius: var(--r-band); max-width: none; }
.after-part > h2:first-child, .after-part > h2, .trainer-part > h2 { margin-top: 0; font-size: 2rem; }
.after-part h3 { margin-top: 2rem; }
.after-part#part-plan h3 {
  display: flex; align-items: center; gap: 0.5rem; font-size: 1.5rem;
}
.after-part#part-plan h3::before {
  content: ""; flex: none; width: 12px; height: 12px; border-radius: 999px 999px 999px 3px; background: var(--brand-orange);
}
.part-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.day-ticks { list-style: none; margin: 0.75rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.day-ticks label {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0 1rem 0 0.75rem;
  background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--ring); border-radius: var(--r-pill);
  cursor: pointer; font-size: 1.25rem; font-weight: 500; color: var(--text-body);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.day-ticks label:hover { box-shadow: inset 0 0 0 2px var(--text-faint); }
.day-ticks label:has(input:checked) { background: var(--success-bg); color: var(--success); box-shadow: none; font-weight: 600; }
.day-ticks input, .plan-tasks input { width: 26px; height: 26px; margin: 0; flex: none; accent-color: var(--success); cursor: pointer; }
.day-ticks input:checked + span { color: var(--success); }
.doc .day-ticks li + li { margin-top: 0; }
.plan-tasks { list-style: none; padding: 0; }
.plan-tasks label {
  display: flex; align-items: flex-start; gap: 0.875rem; min-height: 60px; padding: 0.875rem 1.25rem;
  background: var(--surface-card); border-radius: var(--r-panel); cursor: pointer;
}
.plan-tasks label:hover { box-shadow: inset 0 0 0 2px var(--text-faint); }
.plan-tasks input:checked + span { color: var(--success); font-weight: 600; text-decoration: none; }
.email-box {
  background: var(--surface-card); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--border);
  max-width: 56.25rem; overflow: hidden; padding: 0;
}
.email-subject { padding: 1.125rem 1.75rem; background: var(--surface-sunken); }
.email-body { padding: 1.75rem; line-height: 1.7; }
.email-body p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .after-part, .trainer-part { padding: 1.5rem 1.25rem; }
  .after-part#part-plan { border-radius: var(--r-card); }
  .email-subject { padding: 1rem 1.25rem; }
  .email-body { padding: 1.25rem; }
}

/* ---------- Trainer page ---------- */
.trainer-warning {
  max-width: 52rem; padding: 1.125rem 1.5rem; border-radius: var(--r-card);
  background: var(--accent-bg); color: var(--text-heading); box-shadow: inset 0 0 0 2px var(--accent);
}
.trainer-part { max-width: none; }
.key-item { background: var(--surface-sunken); border-radius: var(--r-panel); padding: 1.25rem 1.5rem; margin: 1.25rem 0; }
.key-item h3 { margin-top: 0; }
.key-item > :last-child { margin-bottom: 0; }
.slide-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.slide-id { font-size: 0.8em; color: var(--text-muted); font-weight: 400; }
.outline-section { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.outline-section > h3:first-child { display: flex; align-items: center; gap: 0.75rem; }
.trainer-doc h4 { font-size: 1.25rem; margin: 2rem 0 0.25rem; }
.trainer-doc h4 + .slide-link { margin-bottom: 0.25rem; }

/* ---------- Print ---------- */
@media print {
  .no-print, .toc, .filters, .no-results { display: none !important; }
  .doc-layout { display: block; }
  .doc { max-width: none; }
  .doc h2 { break-before: page; padding-top: 0; }
  .doc > h2:first-of-type { break-before: auto; }
  .doc h2, .doc h3 { break-after: avoid; }
  .doc hr { display: none; }
  .table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; }
  .doc table { min-width: 0; font-size: 14pt; }
  .doc th, .doc td { border: 1px solid #000 !important; }
  .doc th { background: #eee; }
  .doc tr { break-inside: avoid; }
  /* Short write-in lists ("The mistakes I found: 1–4") must not split across pages. */
  .doc ol, .doc ul { break-inside: avoid; }
  .doc p:has(+ ol), .doc p:has(+ ul) { break-after: avoid; }
  .doc table.fill-in td:empty { height: 1.4cm; }
  .doc blockquote { border: 1px solid #000; border-left: 4pt solid #000; break-inside: avoid; }
  mark.fill { background: none; color: #000; text-decoration: underline; }
  .prompt-group h2, .group-note { break-after: avoid; }
  .prompt-card { border: 1px solid #000; break-inside: avoid; }
  .copy-help { display: none; }
  .prompt-list { display: block; }
  .prompt-list > li + li { margin-top: 0.4cm; }
  .prompt-num { background: none; color: #000; border: 1px solid #000; }
  /* After the workshop: each part on its own page; or only the part chosen with its Print button. */
  .after-part + .after-part, .trainer-part + .trainer-part { break-before: page; }
  .after-part > h2, .trainer-part > h2 { margin-top: 0; }
  .after-doc h2, .trainer-doc h2 { break-before: auto; } /* the sections already start new pages */
  body[data-print-section] .doc-header { display: none !important; }
  body[data-print-section] .after-part:not(.print-target) { display: none !important; }
  body[data-print-section] .after-part.print-target { break-before: auto; }
  .day-ticks label, .plan-tasks label { border: 1px solid #000; }
  .email-box { border: 1px solid #000; }
  .trainer-warning { border: 2px solid #000; background: none; }
  .key-item, .trainer-doc h4 { break-inside: avoid; }
}

.email-subject { margin: 0; }
@media print {
  .after-part, .trainer-part, .after-part#part-plan { background: none; box-shadow: none; padding: 0; margin-top: 0; border-radius: 0; max-width: none; }
  .prompt-groups, .practice-list { background: none; padding: 0; border-radius: 0; display: block; }
  .practice-card { border: 1px solid #000; break-inside: avoid; margin-bottom: 0.5cm; }
  .day-ticks label:has(input:checked) { background: none; color: #000; }
  .page-handout .doc p, .page-handout .doc li, .page-handout .doc blockquote, .page-handout .doc table, .page-handout .doc table p { font-size: 14pt; line-height: 1.5; }
  .key-item { background: none; border: 1px solid #000; }
  .invented-notice { background: none; color: #000; border: 1px solid #000; }
}