#learnReviewPanel { position: relative; z-index: 2; width: min(100%, 660px); margin: 20px auto 0; text-align: left; flex-shrink: 0; } /* above the fall pumpkin patch */
#learnReviewPanel[hidden], body:not(.knox-learn-mode) #learnReviewPanel { display: none; }
#welcomeScreen.has-learn-review { overflow-y: auto; }
#learnReviewPanel details { border: 2px solid color-mix(in srgb, var(--purple) 45%, var(--border)); border-radius: 18px; background: var(--surface); box-shadow: 0 4px 0 color-mix(in srgb, var(--purple) 35%, var(--border)); overflow: hidden; }
#learnReviewPanel summary { display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-weight: 900; font-size: 14.5px; color: var(--purple-on-tint); cursor: pointer; list-style: none; }
#learnReviewPanel summary::-webkit-details-marker { display: none; }
#learnReviewPanel .lr-icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; color: var(--purple); background: var(--purple-light); border: 1.5px solid var(--purple); box-shadow: 0 2px 0 var(--purple-dark); }
#learnReviewPanel .lr-icon svg { width: 17px; height: 17px; }
/* While the topics load: the same card, gently pulsing, no arrow to open yet. */
#learnReviewPanel .lr-loading summary { cursor: default; pointer-events: none; }
#learnReviewPanel .lr-loading summary::after { display: none; }
#learnReviewPanel .lr-loading summary > span:last-child { animation: lrPulse 1.2s ease-in-out infinite; }
@keyframes lrPulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { #learnReviewPanel .lr-loading summary > span:last-child { animation: none; } }
#learnReviewPanel summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
#learnReviewPanel details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
/* The panel after ×: one small pill, centered where the card was. */
#learnReviewPanel:has(> .lr-peek) { display: flex; justify-content: center; }
.lr-peek { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--purple) 45%, var(--border)); background: var(--surface); color: var(--purple-on-tint); font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 color-mix(in srgb, var(--purple) 35%, var(--border)); transition: transform .12s, box-shadow .12s; }
.lr-peek:hover { transform: translateY(-1px); box-shadow: 0 4px 0 color-mix(in srgb, var(--purple) 50%, var(--border)); }
.lr-peek:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--purple) 35%, var(--border)); }
.lr-peek:focus-visible { outline: 3px solid color-mix(in srgb, var(--purple) 60%, transparent); outline-offset: 3px; }
#learnReviewPanel .lr-peek .lr-icon { width: 26px; height: 26px; border-radius: 50%; box-shadow: none; }
#learnReviewPanel .lr-peek .lr-icon svg { width: 15px; height: 15px; }
.lr-close { flex: 0 0 auto; order: 10; width: 30px; height: 30px; margin-left: 2px; border: 0; border-radius: 50%; background: transparent; color: var(--text-light); font: inherit; font-size: 20px; font-weight: 900; line-height: 1; cursor: pointer; }
.lr-close:hover { color: var(--text); background: var(--cream-warm, var(--gray)); }
.lr-close:focus-visible { outline: 3px solid color-mix(in srgb, var(--purple) 60%, transparent); outline-offset: 1px; }
#learnReviewPanel summary:hover { background: color-mix(in srgb, var(--purple) 6%, var(--surface)); }
#learnReviewPanel summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--purple) 55%, transparent); outline-offset: -3px; border-radius: 16px; }
.lr-title { flex: 1 1 auto; min-width: 0; }
.lr-count { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; color: #fff; background: var(--purple); box-shadow: 0 2px 0 var(--purple-dark); }
#learnReviewPanel summary::after { margin-left: 4px; }
.lr-intro { padding: 0 16px; margin: 0 0 12px; color: var(--text-light); font-size: 13.5px; font-weight: 700; line-height: 1.5; }
/* Each topic is a chunky card, like the topic cards on the welcome screen. */
.lr-items { padding: 4px 14px 6px; display: flex; flex-direction: column; gap: 10px; max-height: min(300px, 34vh); overflow-y: auto; overscroll-behavior: contain; } /* long lists scroll inside the card, not the page */
.lr-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 40px 12px 12px; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--purple) 40%, var(--border)); background: var(--surface); box-shadow: 0 3px 0 color-mix(in srgb, var(--purple) 40%, var(--border)); transition: transform .15s, box-shadow .15s; }
.lr-item:hover { transform: translateY(-1px); box-shadow: 0 4px 0 color-mix(in srgb, var(--purple) 55%, var(--border)); }
.lr-item-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--purple); background: var(--purple-light); border: 2px solid var(--purple); }
.lr-item-icon svg { width: 20px; height: 20px; }
.lr-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lr-copy strong { display: block; color: var(--text); font-size: 14.5px; font-weight: 900; line-height: 1.3; }
.lr-copy p { margin: 3px 0 6px; font-size: 13px; font-weight: 700; color: var(--text-light); line-height: 1.4; }
.lr-copy small { display: inline-block; font-size: 11.5px; font-weight: 900; color: var(--text-light); background: var(--cream-warm, var(--gray)); border-radius: 999px; padding: 2px 9px; }
.lr-copy small.due { color: var(--green-dark); background: color-mix(in srgb, var(--green) 16%, var(--surface)); }
html[data-theme="dark"]:not(.knox-seasonal) .lr-copy small.due { color: var(--green); }
.lr-actions { display: flex; flex-shrink: 0; align-items: center; }
.lr-start { font: inherit; cursor: pointer; font-size: 13.5px; font-weight: 900; border-radius: 12px; min-height: 38px; border: 2px solid var(--purple-dark); background: var(--purple); color: #fff; padding: 6px 14px; box-shadow: 0 3px 0 var(--purple-dark); transition: transform .12s, box-shadow .12s; white-space: nowrap; }
.lr-start:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--purple-dark); }
.lr-start:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--purple-dark); }
.lr-remove { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--text-light); font: inherit; font-size: 18px; font-weight: 900; line-height: 1; cursor: pointer; }
.lr-remove:hover { color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--surface)); }
.lr-start:focus-visible, .lr-remove:focus-visible { outline: 3px solid color-mix(in srgb, var(--purple) 60%, transparent); outline-offset: 3px; }
.lr-start:disabled, .lr-remove:disabled { opacity: .5; cursor: wait; }
.lr-status { color: var(--text-light); font-size: 12px; padding: 0 16px; }
.lr-status:empty { display: none; }
.lr-toggle { display: inline-flex; align-items: center; gap: 7px; margin: 12px 16px 14px; padding: 7px 13px; border-radius: 12px; border: 2px solid var(--border); background: var(--surface); color: var(--text-light); font: inherit; font-size: 12.5px; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 var(--border); transition: transform .12s, box-shadow .12s, color .12s; }
.lr-toggle .kk-ic { width: 15px; height: 15px; }
.lr-toggle:hover:not(:disabled) { color: var(--text); transform: translateY(-1px); box-shadow: 0 4px 0 var(--border); }
.lr-toggle:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--border); }
.lr-toggle:disabled { opacity: .5; cursor: wait; }
.lr-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--purple) 60%, transparent); outline-offset: 3px; }
@media (max-width: 540px) { .lr-item { flex-wrap: wrap; } .lr-copy { flex-basis: calc(100% - 52px); } .lr-actions { width: 100%; } .lr-start { width: 100%; } }
/* Learn diagrams: a card like "Your turn", lined up with the other lesson cards. */
.learn-visual { margin: 0 18px 14px; padding: 12px 16px 14px; border: 2px solid color-mix(in srgb, var(--purple) 40%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--purple) 5%, var(--surface)); }
.learn-visual figcaption { margin-bottom: 10px; color: var(--purple-dark); font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
html[data-theme="dark"]:not(.knox-seasonal) .learn-visual figcaption { color: var(--purple-on-tint); }
.learn-visual svg { width: 100%; max-width: 380px; display: block; margin: auto; }
.lv-filled { fill: var(--purple); stroke: var(--purple-dark); stroke-width: 2; }
.lv-empty { fill: var(--surface); stroke: color-mix(in srgb, var(--purple) 60%, var(--border)); stroke-width: 2; }
.lv-flow { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lv-flow li { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.lv-flow li > span { padding: 6px 12px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--purple) 45%, var(--border)); background: var(--surface); box-shadow: 0 2px 0 color-mix(in srgb, var(--purple) 35%, var(--border)); font-size: 13.5px; font-weight: 800; color: var(--text); }
.lv-flow li:not(:last-child)::after { content: '→'; color: var(--purple); font-size: 18px; font-weight: 900; }
@media (max-width: 600px) { .learn-visual { margin: 0 14px 12px; } }
@media (max-width: 540px) { .lv-flow { flex-direction: column; align-items: stretch; } .lv-flow li { flex-direction: column; text-align: center; } .lv-flow li > span { width: 100%; } .lv-flow li:not(:last-child)::after { content: '↓'; } }
/* Lesson file restored / missing notes in the chat */
.learn-source-note { align-self: center; margin: 4px auto 10px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; text-align: center; color: var(--purple-on-tint); background: var(--purple-light); border: 2px solid color-mix(in srgb, var(--purple) 35%, var(--border)); max-width: min(560px, 92%); }
.learn-source-note.warn { color: var(--orange-dark); background: color-mix(in srgb, var(--orange) 12%, var(--surface)); border-color: color-mix(in srgb, var(--orange) 40%, var(--border)); border-radius: 14px; }