/* Reading how-to practice desk. Page-scoped extension; uses the v2.2 paper/ink tokens. */
.practice-desk, .desk-reference, .worksheet {
  --desk-paper: var(--paper, var(--cream));
  --desk-slip: var(--slip, var(--white));
  --desk-ink: var(--ink, var(--navy));
  --desk-soft: var(--ink-soft, var(--soft));
  --desk-meta: var(--ink-meta, var(--muted));
  --desk-line: var(--line-gold, var(--line));
  --desk-dash: var(--line-dash, var(--line));
  --desk-mark: var(--highlighter, var(--paper-rule));
}
.practice-desk {
  background: var(--desk-paper);
  border-block-end: 1px solid var(--desk-line);
  padding: clamp(28px, 5vw, 72px) var(--gutter, 24px) clamp(40px, 6vw, 88px);
}
.practice-desk__inner { max-width: 1120px; margin: 0 auto; }
.reading-practice-page { background: var(--paper); color: var(--ink); }
.reading-practice-page .lrail { display:none !important; }
.reading-practice-page h2[id], .reading-practice-page #bs-prompt, .reading-practice-page #error-worksheet { scroll-margin-top:100px; }
.desk-steps { display:grid; gap:12px; margin-block:24px; }
.desk-steps a { display:flex; gap:12px; align-items:center; color:var(--ink); font-size:16px; text-decoration:none; }
.desk-steps span { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--line-gold); border-radius:var(--r-chip); font-weight:700; }
.desk-steps a:hover span { background:var(--highlighter); }
.desk-steps a:focus-visible, #transfer-next:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
#transfer-next { display:inline-block; font-weight:700; color:var(--ink); border-bottom:2px solid var(--highlighter); margin-top:16px; }
#transfer-next[hidden], .practice-sheet__feedback[hidden], .practice-transfer[hidden], .practice-transfer__note[hidden] { display:none; }
.worksheet__privacy { color:var(--ink-meta); font-size:13px; line-height:1.85; margin:0; }
.reading-practice-page .article h2 { font-family:var(--font-display); font-size:40px; line-height:1.5; }
.reading-practice-page .article__quote { font-family:var(--font-display); font-size:28px; }
.reading-practice-page .dcard { content-visibility:visible; contain-intrinsic-size:none; }
.reading-practice-page .section-title { font-family:var(--font-display); }
.reading-practice-page .lfig { background:var(--slip); }
.reading-practice-page .lfig svg [fill="#1A365D"] { fill:var(--ink); }
.reading-practice-page .lfig svg [fill="#F9F8F4"] { fill:var(--paper); }
.reading-practice-page .lfig svg [fill="#E5E7EB"] { fill:var(--paper-rule); }
.reading-practice-page .lfig svg [fill="#6B7280"] { fill:var(--ink-meta); }
.practice-desk__grid { display: grid; gap: clamp(24px, 4vw, 64px); align-items: start; }
.practice-desk__eyebrow,
.practice-desk__label,
.practice-desk__step {
  color: var(--desk-meta); font-size: var(--fs-meta, 13px); font-weight: 600; margin: 0;
}
.practice-desk__eyebrow { border-inline-start: 2px solid var(--desk-line); padding-inline-start: 10px; }
.practice-desk__title { font-family: var(--font-display, var(--font-fa)); font-size: clamp(42px, 5.5vw, 64px); line-height: 1.24; color: var(--desk-ink); margin: 12px 0 18px; font-weight: 700; }
.practice-desk__lead { color: var(--desk-soft); font-size: var(--fs-lead, 19px); line-height: 1.9; max-width: 34ch; margin: 0; }
.practice-desk__route { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 28px; font-size: var(--fs-meta, 14px); }
.practice-desk__route a,
.desk-reference a { color: var(--desk-ink); font-weight: 700; border-bottom: 1.5px solid var(--desk-mark); text-decoration: none; }
.practice-desk__note { color: var(--desk-meta); font-size: var(--fs-meta, 13px); line-height: 1.85; margin: 24px 0 0; max-width: 40ch; }
.practice-sheet { background: var(--desk-slip); border: 1.5px solid var(--desk-ink); border-radius: var(--r-surface, 3px 14px 3px 14px); padding: clamp(18px, 3vw, 30px); position: relative; }
.practice-sheet::before { content: ""; position: absolute; inset-block: 16px; inset-inline-start: 14px; border-inline-start: 1px solid var(--desk-line); pointer-events: none; }
.practice-sheet > * { position: relative; }
.practice-sheet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-inline-start: 12px; border-block-end: 2px dashed var(--desk-dash); padding-block-end: 12px; }
.practice-sheet__head span { color: var(--desk-meta); font-size: var(--fs-caption, 11px); font-weight: 700; letter-spacing: .1em; direction: ltr; }
.practice-sheet__head p { color: var(--desk-ink); font-size: var(--fs-meta, 13px); font-weight: 600; margin: 0; }
.practice-sheet__question { direction: ltr; text-align: left; color: var(--desk-ink); font-family: var(--font-en, var(--font-fa)); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.65; margin: 22px 0 14px; }
.practice-sheet__question em,
.practice-sheet__passage mark { background: transparent; color: inherit; font-style: normal; }
.practice-sheet__passage { direction: ltr; text-align: left; color: var(--desk-soft); font-family: var(--font-en, var(--font-fa)); font-size: 16px; line-height: 1.8; margin: 0; padding: 14px 0 16px; border-block: 1px solid var(--desk-line); }
.practice-sheet__passage small { display: block; direction: rtl; color: var(--desk-meta); font-family: var(--font-fa); font-size: var(--fs-meta, 13px); margin-block-end: 8px; }
.practice-sheet__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.practice-sheet__option,
.practice-transfer__option,
.worksheet__print,
.worksheet__reset { min-height: 48px; border: 1.5px solid var(--desk-ink); border-radius: var(--r-control, 2px 10px 2px 10px); background: var(--desk-slip); color: var(--desk-ink); cursor: pointer; font: 600 var(--fs-body, 16px)/1.4 var(--font-en, var(--font-fa)); padding: 10px; }
.practice-sheet__option:hover:not(:disabled), .practice-transfer__option:hover:not(:disabled), .worksheet__print:hover, .worksheet__reset:hover { background: var(--desk-paper); }
.practice-sheet__option:focus-visible, .practice-transfer__option:focus-visible, .worksheet__print:focus-visible, .worksheet__reset:focus-visible, .worksheet input:focus-visible, .worksheet textarea:focus-visible { outline: 2px solid var(--desk-ink); outline-offset: 3px; }
.practice-sheet__option.is-right, .practice-transfer__option.is-right { background: var(--desk-mark); }
.practice-sheet__option.is-right::before, .practice-transfer__option.is-right::before { content: "✓ "; }
.practice-sheet__option.is-wrong, .practice-transfer__option.is-wrong { border-color: var(--desk-soft); color: var(--desk-soft); }
.practice-sheet__option.is-wrong::before, .practice-transfer__option.is-wrong::before { content: "✗ "; }
.practice-sheet__option:disabled, .practice-transfer__option:disabled { cursor: default; }
.practice-sheet__feedback, .practice-transfer, .worksheet { margin-top: 20px; border-inline-start: 2px dashed var(--desk-dash); padding-inline-start: 14px; }
.practice-sheet__feedback p, .practice-transfer__note, .worksheet__intro { color: var(--desk-soft); font-size: var(--fs-body, 16px); line-height: 1.85; margin: 0; }
.practice-sheet__feedback strong { color: var(--desk-ink); }
.practice-sheet.is-reviewed .practice-sheet__question em, .practice-sheet.is-reviewed .practice-sheet__passage mark { border-bottom: 2px dashed var(--desk-ink); font-weight: 700; }
.desk-reference { background: var(--desk-slip); border-block-end: 1px solid var(--desk-line); padding: 28px var(--gutter, 24px); }
.desk-reference__inner { max-width: 1120px; margin: 0 auto; display: grid; gap: 20px; }
.desk-reference h2 { color: var(--desk-ink); font-family: var(--font-display, var(--font-fa)); font-size: var(--fs-h2, 28px); margin: 0; }
.desk-reference p { color: var(--desk-soft); font-size: var(--fs-body, 16px); line-height: 1.9; margin: 0; max-width: 75ch; }
.practice-transfer__title, .worksheet__title { color: var(--desk-ink); font-family: var(--font-display, var(--font-fa)); font-size: var(--fs-h3, 23px); margin: 0 0 8px; }
.practice-transfer__question { direction: ltr; text-align: left; color: var(--desk-ink); font-family: var(--font-en, var(--font-fa)); line-height: 1.7; margin: 14px 0 8px; }
.practice-transfer__passage { direction: ltr; text-align: left; color: var(--desk-soft); font-family: var(--font-en, var(--font-fa)); line-height: 1.75; margin: 0; }
.practice-transfer__options { display: grid; gap: 8px; margin-top: 14px; }
.practice-transfer__option { text-align: left; direction: ltr; }
.worksheet { background: var(--desk-slip); border: 1.5px solid var(--desk-ink); border-radius: var(--r-surface, 3px 14px 3px 14px); padding: clamp(18px, 3vw, 30px); max-width: 720px; margin: 36px auto; }
.worksheet__top { display: flex; justify-content: space-between; align-items: start; gap: 16px; border-block-end: 2px dashed var(--desk-dash); padding-block-end: 14px; }
.worksheet__badge { color: var(--desk-meta); font-size: var(--fs-caption, 11px); font-weight: 700; direction: ltr; letter-spacing: .1em; margin: 0; }
.worksheet__fields { display: grid; gap: 18px; margin-top: 20px; }
.worksheet fieldset { border: 0; margin: 0; padding: 0; }
.worksheet legend, .worksheet label { color: var(--desk-ink); font-size: var(--fs-body, 16px); font-weight: 700; }
.worksheet__causes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.worksheet__cause { border: 1px solid var(--desk-line); border-radius: var(--r-control, 2px 10px 2px 10px); color: var(--desk-soft); display: flex; gap: 8px; align-items: center; min-height: 48px; padding: 8px 10px; font-size: var(--fs-meta, 13px); }
.worksheet__cause input { accent-color: var(--desk-ink); }
.worksheet textarea { box-sizing: border-box; width: 100%; min-height: 114px; background: var(--desk-paper); border: 1.5px solid var(--desk-ink); border-radius: var(--r-control, 2px 10px 2px 10px); color: var(--desk-ink); font: 500 var(--fs-body, 16px)/1.85 var(--font-fa); margin-top: 8px; padding: 12px; resize: vertical; }
.worksheet__next { color: var(--desk-soft); font-size: var(--fs-body, 16px); line-height: 1.85; margin: 0; border-inline-start: 2px dashed var(--desk-dash); padding-inline-start: 12px; }
.worksheet__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.worksheet__print { background: var(--desk-mark); }
.worksheet__reset { background: transparent; }
.worksheet__print-notes { display: none; color: var(--desk-ink); font-size: var(--fs-body, 16px); line-height: 1.85; white-space: pre-wrap; }
.practice-desk + .lrail { margin-block-start: 0; }
.practice-desk ~ .article { background: var(--desk-paper); }
@media (min-width: 900px) { .practice-desk__grid { grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); } .desk-reference__inner { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
@media (max-width: 520px) { .practice-desk { padding-inline: 16px; } .practice-desk__title { font-size: 42px; } .practice-sheet { padding: 17px; } .practice-sheet__options, .worksheet__causes { grid-template-columns: 1fr; } .practice-sheet__head, .worksheet__top { align-items: start; flex-direction: column; gap: 4px; } }
@media (max-width: 767px) { .reading-practice-page .worksheet { margin-inline:16px; } .reading-practice-page .article h2 { font-size:32px; } .practice-desk__lead { font-size:var(--fs-body); } .practice-desk__route a { min-height:44px; display:inline-flex; align-items:center; } }
@media (prefers-reduced-motion: reduce) { .practice-desk *, .desk-reference * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media print {
  .reading-practice-page .header, .reading-practice-page .lbar, .reading-practice-page .lrail, .reading-practice-page .progress, .reading-practice-page .toc, .reading-practice-page .lesson-video, .reading-practice-page .meta, .reading-practice-page .markread, .reading-practice-page .lnav, .reading-practice-page .footer, .reading-practice-page .audit, .reading-practice-page .article, .reading-practice-page .practice-desk, .reading-practice-page .desk-reference { display:none !important; }
  .reading-practice-page .worksheet, .reading-practice-page .dcard { display:block !important; background:var(--white) !important; color:var(--ink); margin:0 0 24px; padding:16px; width:auto; max-width:none; }
  .worksheet__fields > label, .worksheet fieldset, .worksheet textarea, .worksheet__actions, .worksheet__privacy, .dcard__print, .dcard__intro { display:none !important; }
  .worksheet__print-notes { display:block; overflow-wrap:anywhere; }
  .worksheet__next a::after { content:" (" attr(href) ")"; font-size:11pt; overflow-wrap:anywhere; }
  .dcard__sheet { break-inside:avoid; }
  .dcard__inner { max-width:none; }
}
