/* Illustrated lessons extend the reading-page shell without changing sibling pages. */
.guide--illustrated .guide-contents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block: 32px 12px; }
.guide-contents a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-block: 12px; border-top: 1px solid var(--line); font-size: .9375rem; text-decoration: none; }
.guide-contents a:hover { text-decoration: underline; }
.guide-contents span { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.guide--illustrated h2 { scroll-margin-top: 24px; }
.guide--illustrated .clue-parts { gap: 24px; }
.guide--illustrated .clue-parts > div { display: flex; flex-direction: column; border-left: 0; padding: 0; }
.guide--illustrated .clue-parts dt { display: flex; align-items: center; gap: 10px; }
.guide--illustrated .clue-parts dt::before { content: ""; width: 12px; height: 12px; border: 2px solid var(--accent); border-radius: 50%; }
.guide--illustrated .clue-parts > div:last-child dt::before { border-radius: 0; transform: rotate(45deg); }
.guide--illustrated em { font-style: normal; background: #d9e5d5; color: var(--accent); padding: 0 .15em; }
.guide--illustrated s { color: var(--muted); text-decoration-thickness: 2px; }
.guide--illustrated .example-clue { padding: 24px; }
.guide--illustrated .guide-challenge { color: var(--ink); }
.guide-example { margin-block: 20px 8px; }
.guide--illustrated .guide-example .example-clue { margin-bottom: 0; }
.guide-hints { gap: 8px; margin-block: 16px 8px; }
.guide-hints .public-button { flex: 0 1 auto; gap: 8px; padding-inline: 12px; font-size: .875rem; }
.guide-hints .public-button:focus { background: #e6ece3; }
.guide-review-parts { margin-block: 24px; }
.guide-review-parts > div { margin-bottom: 16px; }
.guide-review-parts dt { font-weight: 600; margin-bottom: 4px; }
.guide-review-parts dd { margin: 0; }
.guide-example:has([data-hint="definition"]:is(:hover, :focus-within)) [data-clue-part="definition"],
.guide-example:has([data-hint="indicators"]:is(:hover, :focus-within)) [data-clue-part="indicators"],
.guide-example:has([data-hint="fodder"]:is(:hover, :focus-within)) [data-clue-part="fodder"],
.guide-example:has([data-hint="linking"]:is(:hover, :focus-within)) [data-clue-part="linking"] { background: var(--accent); color: white; border-radius: 2px; }
.guide--illustrated .worked-answer { margin-bottom: 0; }
.guide--illustrated .worked-answer > summary { padding-block: 16px 8px; }
.guide--illustrated .worked-answer .disclosure-body > :last-child { margin-bottom: 0; }
.guide--illustrated .answer-path { justify-content: center; gap: 10px; background: #edf1e8; border-radius: 4px; }
.guide--illustrated .answer-path > :not([aria-hidden]) { padding: 6px 10px; background: white; border: 1px solid var(--line); letter-spacing: .06em; }
.guide--illustrated .answer-path > strong:not([aria-hidden]) { background: var(--accent); color: white; border-color: var(--accent); }
.guide--illustrated .solve-steps { padding-left: 28px; }
.guide--illustrated .solve-steps li { padding-left: 8px; margin-bottom: 20px; }
.guide--illustrated .solve-steps li::marker { color: var(--accent); font-weight: 700; }
.guide--illustrated .techniques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; margin-block: 24px 16px; }
.guide-technique { display: flex; flex-direction: column; min-block-size: 19.5rem; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 4px; background: white; }
.guide-technique h3 > span { display: block; margin-top: 4px; color: var(--muted); font-size: .875rem; font-weight: 400; }
.guide-technique-tabs { font-size: .875rem; }
.guide-technique-panel { padding-top: 20px; }
.guide-technique-panel > :last-child { margin-bottom: 0; }
.guide-technique-panel.guide-example { flex: 1; margin: 0; }
.guide-technique-panel.guide-example:not([hidden]) { display: flex; flex-direction: column; }
.guide--illustrated .technique-clue { flex: 1; margin: 0; padding: 12px 16px; }
.guide-hint-icon { flex: 0 0 auto; }
.guide-hints--compact .public-button { flex: 0 0 44px; padding: 10px; }
.guide-technique-answer { margin-bottom: 12px; }
.guide-technique-answer > span { font-size: .875rem; }
.guide-technique-answer > strong { color: var(--accent); letter-spacing: .045em; }
.guide-technique-diagram { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; padding: 14px; background: var(--paper); border-radius: 4px; color: var(--accent); }
.guide-technique-diagram > span { color: var(--muted); font-size: .9375rem; line-height: 1.35; }
.guide-technique-diagram strong { color: var(--accent); font-size: 1rem; font-weight: 600; letter-spacing: .045em; }
.guide-indicator-words { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-block: 16px; }
.guide-indicator-words > li { padding: 4px 8px; border-radius: 4px; background: var(--paper); color: var(--accent); font-size: .9375rem; }
.guide-grid-lesson { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 24px; margin-block: 24px; }
.guide-grid-lesson figure { min-width: 0; margin: 0; }
.guide-grid-lesson .grid-basics { margin: 0; }
.guide-grid-lesson svg { display: block; width: 100%; height: auto; }
.guide--illustrated .grid-basics { list-style: none; padding: 0; }
.guide--illustrated .grid-basics > li { padding-block: 16px; border-bottom: 1px solid var(--line); }
.guide--illustrated .grid-basics strong { display: block; margin-bottom: 6px; }
@media (max-width: 640px) {
  .guide-hints { gap: 6px; }
  .guide-hints:not(.guide-hints--compact) .public-button { flex-direction: column; gap: 4px; padding-inline: 6px; }
  .guide--illustrated .guide-contents { grid-template-columns: 1fr; gap: 0; }
  .guide-contents a { flex-direction: row; align-items: baseline; gap: 12px; }
  .guide--illustrated .techniques, .guide-grid-lesson { grid-template-columns: 1fr; }
  .guide-grid-lesson figure { width: 100%; max-width: 420px; margin-inline: auto; }
  .guide-technique { padding: 16px; }
  .guide--illustrated .example-clue { padding: 20px; }
  .guide--illustrated .answer-path { gap: 8px; padding: 12px; }
  .guide--illustrated .answer-path > :not([aria-hidden]) { padding: 4px 6px; }
}

/* Narrow cards need one more line for the longest clues. */
@media (min-width: 641px) and (max-width: 800px), (max-width: 350px) {
  .guide-technique { min-block-size: 21.25rem; }
}