/* Reserved artwork space: captions, controls, and the lesson never sit under Pagey. */
.recall-guide { margin: 0 0 12px; text-align: left; }
.recall-choice-group { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.recall-choices button { min-height: 48px; padding: 9px 6px; white-space: normal; border: 1px solid #cbbc9f; border-radius: 12px; background: var(--paper-light,#fffdf7); color: var(--paper-ink,#42372b); font: inherit; cursor: pointer; }
.recall-choices button:hover { background: var(--paper-mid,#f2e7d1); }
/* Three ratings in one row, each centred under a short mark in the tone of
   what it means, so the row reads at a glance without colouring the buttons. */
.recall-guide { text-align: center; }
.recall-choices button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 60px; text-align: center; font-weight: 500; line-height: 1.2; }
.recall-choices button::before { content: ''; width: 24px; height: 3px; border-radius: 2px; background: var(--calm-accent-focus,#b95d0a); }
.recall-choices button[value='0']::before { background: var(--calm-no,#a4392a); }
.recall-choices button[value='2']::before, .recall-choices button[value='3']::before { background: var(--calm-ok,#2f6b46); }
@media (forced-colors:active) { .recall-choices button::before { background: CanvasText; } }
.recall-repair { margin-top:20px; padding:18px; border:1px solid var(--calm-hair,#cbbc9f); border-radius:16px; background:var(--calm-bg-parchment,#f6f1e7); color:var(--calm-text,#42372b); text-align:left; }
.recall-repair-heading { display:flex; align-items:flex-start; gap:12px; }
.recall-repair-mark { flex:0 0 32px; width:32px; height:32px; color:var(--calm-accent-text,#a3510a); }
.recall-repair-mark path { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.recall-repair-title { margin:0 0 5px; font-family:Lora,Georgia,serif; font-size:18px; line-height:1.3; font-weight:500; }
.recall-repair-heading .calm-note { margin:0; }
.recall-repair-help { margin-top:16px; padding-top:16px; border-top:1px solid var(--calm-hair,#cbbc9f); }
.recall-repair-help .calm-note { margin:6px 0 0; }
.recall-repair-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:10px; align-items:stretch; margin:16px 0 0; }
.recall-repair-actions > button, .recall-repair-actions form button { width:100%; height:100%; margin:0; min-height:48px; white-space:normal; justify-content:center; }
.recall-repair-actions > .calm-btn-quiet { border-color:transparent; background:transparent; }
.recall-repair-actions button, .pagey-teaching button { min-height:44px; }
.pagey-teaching { margin-top: 14px; text-align:left; }
.pagey-teaching [hidden], .recall-repair [hidden] { display:none !important; }
.pagey-teaching-scene { display:flex; align-items:end; min-height:166px; border-bottom:2px solid #cbbc9f; margin:12px 0; background:var(--paper-light,#fffdf7); border-radius:16px 16px 0 0; }
.pagey-teaching-actor { flex:0 0 76px; height:160px; }
.pagey-teaching.is-no-actor .pagey-teaching-actor { display:none; }
.companion-root.is-demonstrating { z-index:55; }
.calm-flashcard-stage:has([data-recall-repair]) { height:auto; max-height:none; min-height:var(--calm-flashcard-height); justify-content:flex-start; overflow:visible; }
.calm-flashcard-wrap:has([data-recall-repair]) { perspective:none; }
.calm-flashcard-wrap:has([data-recall-repair])::before, .calm-flashcard-wrap:has([data-recall-repair])::after { display:none; }
.pagey-teaching-board { flex:1; min-width:0; position:relative; height:160px; padding:0 10px 32px; }
.pagey-teaching-board svg { display:block; width:100%; height:126px; overflow:visible; color:var(--paper-ink,#42372b); }
.pagey-teaching-board svg path, .pagey-teaching-board svg line { stroke:currentColor; stroke-width:2.5; fill:none; stroke-linecap:round; }
.pagey-teaching-board svg text { font-size:17px; fill:currentColor; font-family:inherit; }
.pagey-teaching-board svg rect { fill:var(--paper-mid,#f2e7d1); stroke:var(--paper-ink,#42372b); stroke-width:2; }
.pagey-teaching-prop { position:absolute; bottom:32px; left:0; min-width:28px; max-width:70px; padding:6px; border:2px solid var(--paper-ink,#42372b); border-radius:7px; background:var(--paper-fold,#dfcaa7); color:var(--paper-ink,#42372b); font-size:14px; text-align:center; }
.pagey-teaching-caption { margin:12px 0; line-height:1.5; }
.pagey-teaching-readable { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; overflow-wrap:anywhere; }
.pagey-teaching-readable > span { padding:8px 12px; border:1px solid #cbbc9f; border-radius:10px; background:var(--paper-light,#fffdf7); color:var(--paper-ink,#42372b); }
.pagey-teaching-controls { display:flex; flex-wrap:wrap; gap:8px; }
.pagey-teaching-controls button { flex:1; }
.pagey-teaching-prop.is-ink-mark { text-decoration:underline; text-decoration-thickness:2px; }
.cp-peek-grips.is-card-grip { display:block; position:fixed; z-index:3; pointer-events:none; }
html.dark .recall-choices button, html.dark .pagey-teaching-readable > span { background:#302b24; color:#fff1d5; border-color:#8d7f69; }
html.dark .recall-choices button:hover { background:var(--paper-ink,#42372b); }
html.dark .pagey-teaching-scene { background:#302b24; border-color:#8d7f69; }
html.dark .pagey-teaching-board svg { color:#fff1d5; }
html.dark .pagey-teaching-board svg rect { fill:var(--paper-ink,#42372b); stroke:#fff1d5; }
@media (forced-colors:active) {
  .recall-repair, .recall-repair-help { background:Canvas; color:CanvasText; border-color:CanvasText; }
  .recall-repair-mark { color:CanvasText; }
  .recall-choices button, .pagey-teaching-readable > span, .pagey-teaching-prop { background:Canvas; color:CanvasText; border-color:CanvasText; }
  .pagey-teaching-scene { background:Canvas; border-color:CanvasText; }
  .pagey-teaching-board svg { color:CanvasText; }
  .pagey-teaching-board svg rect { fill:Canvas; stroke:CanvasText; }
}