/* Warm editorial lesson menus. Scoped to the picker so activities retain their layout. */
.lesson-dialog {
  width: min(1020px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  border: 1px solid #826b54;
  border-radius: 18px;
  background: #fbf3e5;
  color: #422d21;
  box-shadow: 0 20px 80px #30251d40;
  font-family: "Aptos", "Segoe UI", sans-serif;
}
.lesson-dialog::backdrop { background: #30271e99; backdrop-filter: blur(3px); }
.lesson-dialog .dialog-inner { padding: clamp(16px, 3vw, 30px); }
.lesson-dialog .dialog-header { align-items: flex-start; margin-bottom: 24px; }
.lesson-dialog .dialog-header h2 { color: #422d21; font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.05; }
.dialog-prompt { margin: 8px 0 0; font-size: 1.1rem; color: #73604e; }
.lesson-dialog .dialog-close { width: 44px; height: 44px; border: 1px solid #826b54; background: transparent; color: #422d21; font-weight: 400; }
.lesson-dialog .dialog-lessons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; background: transparent; }
.lesson-dialog .activity-link,
.lesson-dialog .activity-link:nth-child(n) {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start;
  gap: 12px; min-height: 240px; padding: 16px;
  border: 1px solid #ac9680; border-radius: 14px;
  background: #fff9ef; color: #422d21; box-shadow: none;
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}
.lesson-dialog .activity-link:hover { transform: none; border-color: #6d755b; background: #fffdf7; box-shadow: 0 4px 14px #4b382316; }
.lesson-dialog a:focus-visible,.lesson-dialog button:focus-visible { outline: 3px solid #426a74; outline-offset: 3px; }
.lesson-dialog .lesson-number { align-self: flex-start; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; font-size: 1rem; font-weight: 600; color: #78614e; }
.lesson-dialog .lesson-copy { margin-top: auto; text-align: center; }
.lesson-dialog .lesson-copy strong { color: #422d21; font-size: clamp(1.1rem, 2.1vw, 1.55rem); font-weight: 600; line-height: 1.15; }
.lesson-dialog .lesson-copy small { margin-top: 5px; font-size: 1rem; color: #73604e; font-weight: 400; }
.lesson-dialog .lesson-cue { border: 0; background: #eee9db; border-radius: 9px; min-height: 120px; }
.verb-picture, .verb-walker { display: block; width: 100%; aspect-ratio: 1; background-image: url("images/verb-menu-art.jpg"); background-size: 300% 200%; background-repeat: no-repeat; }
.verb-picture { align-self: center; border-radius: 9px; }
.verb-picture, .verb-walker { background-position: 0 0; }
.verb-example { text-align: center; font-size: 1rem; color: #64503f; line-height: 1.2; }
.verb-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; height: var(--verb-art-size); flex-shrink: 0; border: 1px solid #c6b39f; border-radius: 9px; overflow: hidden; background: #f4ebdf; }
.verb-day { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; }
.verb-day + .verb-day { border-inline-start: 1px solid #c6b39f; }
.verb-day-label { padding: 4px 0; text-align: center; font-size: .78rem; color: #64503f; line-height: 1.15; }
.verb-day-active { background: #efd1c3; }
.verb-day-active .verb-day-label { color: #422d21; font-weight: 650; }
.verb-walker { place-self: center; max-width: min(100%, calc(var(--verb-art-size) - 46px)); }
.verb-day:not(.verb-day-active) .verb-walker { filter: grayscale(1); opacity: .28; }
.verb-form { min-height: 1.5em; padding: 0 2px 3px; text-align: center; font-size: .85rem; font-weight: 650; line-height: 1.2; }
.verb-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); place-content: center; gap: 12px; width: 100%; height: var(--verb-art-size); flex-shrink: 0; padding: 10px; border-radius: 9px; background: #e8dfeb; text-align: center; }
.verb-collage span { padding: 5px 2px; border-radius: 4px; background: #fff9ef; font-size: .92rem; font-weight: 600; line-height: 1.2; }
.verb-collage span:nth-child(odd) { transform: rotate(-4deg); }
.verb-collage span:nth-child(even) { transform: rotate(4deg); }
.lesson-dialog .review-choice { grid-column: 1 / -1; }
.lesson-dialog .review-choice .activity-link { flex-direction: row; align-items: center; gap: 20px; min-height: 95px; background: #e1e5d5; }
.lesson-dialog .review-choice .lesson-number { align-self: center; }
.lesson-dialog .review-choice .lesson-copy { margin: 0; text-align: left; }
.review-arrow { margin-left: auto; font-size: 2rem; font-weight: 400; }
.review-sheets { position: relative; flex: 0 0 64px; height: 55px; }
.review-sheets i { position: absolute; left: 16px; top: 6px; width: 37px; height: 46px; border: 1px solid #a58a70; border-radius: 3px; background: #dbcedc; transform: rotate(12deg); }
.review-sheets i:last-child { left: 3px; top: 0; transform: rotate(-9deg); background: repeating-linear-gradient(to bottom, #fff7e9 0 9px, #b5a68e 9px 11px, #fff7e9 11px 16px); border: 7px solid #fff7e9; box-shadow: 0 1px 3px #5b493326; }
@media (max-width: 700px) {
  .lesson-dialog .dialog-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lesson-dialog .activity-link { min-height: 210px; padding: 12px; }
}
@media (max-width: 380px) {
  .lesson-dialog { width: calc(100% - 16px); }
  .lesson-dialog .dialog-inner { padding: 12px; }
  .lesson-dialog .dialog-lessons { grid-template-columns: 1fr; }
  .lesson-dialog .review-choice .activity-link { gap: 12px; }
  .review-sheets { display: none; }
}
/* Keep the illustrated menus compact, and size their artwork to the viewport. */
.lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .dialog-inner { padding: 20px; }
.lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .dialog-header { margin-bottom: 14px; }
.lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .dialog-header h2 { font-size: clamp(2rem, 5dvh, 3rem); }
.lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .dialog-prompt { margin-top: 5px; font-size: 1rem; }
.lesson-dialog[data-group="Verbs"] .dialog-lessons { gap: 12px; }
.lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .activity-link { min-height: 0; padding: 12px; gap: 7px; }
.lesson-dialog[data-group="Verbs"] { --verb-art-size: clamp(52px, calc((100dvh - 550px) / 2), 170px); }
.lesson-dialog[data-group="Verbs"] .verb-picture { max-width: var(--verb-art-size); flex-shrink: 0; }
.lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .lesson-copy strong { font-size: clamp(1rem, 2vw, 1.35rem); }
.lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .review-choice .activity-link { min-height: 64px; padding: 8px 14px; }
.lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .review-sheets { height: 46px; transform: scale(.8); }
@media (max-width: 700px) {
  .lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .dialog-inner { padding: 12px; }
  .lesson-dialog[data-group="Verbs"] .dialog-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .activity-link { padding: 8px; gap: 5px; }
  .lesson-dialog[data-group="Verbs"] { --verb-art-size: clamp(44px, calc((100dvh - 590px) / 3), 120px); }
  .verb-day-label { font-size: .65rem; padding-block: 3px; }
  .verb-walker { max-width: min(100%, calc(var(--verb-art-size) - 34px)); }
  .verb-form { font-size: .65rem; padding-bottom: 2px; }
  .verb-collage { gap: 5px; padding: 4px; }
  .verb-collage span { padding: 2px 0; font-size: .65rem; }
  .lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .lesson-copy strong { font-size: 1rem; }
  .lesson-dialog[data-group="Verbs"] .lesson-copy small,
  .lesson-dialog[data-group="Verbs"] .verb-example { font-size: .85rem; }
  .lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .review-sheets { display: none; }
  .lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .review-choice .activity-link { min-height: 48px; gap: 12px; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .lesson-dialog[data-group="Verbs"] { --verb-art-size: clamp(49px, calc((100dvh - 590px) / 3), 120px); }
  .lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .dialog-header { margin-bottom: 10px; }
  .lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .illustrated-lesson { padding: 6px; gap: 3px; }
  .lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .illustrated-lesson .verb-example { font-size: .75rem; }
  .lesson-dialog:is([data-group="Verbs"], [data-group="Nouns"]) .illustrated-lesson .lesson-number { font-size: .8rem; }
}

.lesson-dialog[data-group="Nouns"] { width: min(760px, calc(100% - 20px)); }
.lesson-dialog[data-group="Nouns"] .dialog-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.noun-visual { width: 100%; max-width: clamp(115px, calc((100dvh - 505px) * .75), 280px); align-self: center; }
.noun-picture { display: block; aspect-ratio: 3 / 2; border-radius: 8px 8px 0 0; background: url("images/noun-menu-art.jpg") 0 0 / 200% 200% no-repeat; }
.noun-picture-2 { background-image: url("images/noun-menu-common-proper.jpg"); background-size: cover; background-position: center; }
.noun-picture-3 { background-position: 0 100%; }
.noun-picture-4 { background-position: 100% 100%; }
.noun-examples { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid #d8cabb; border-top: 0; border-radius: 0 0 8px 8px; background: #f4ebdf; text-align: center; }
.noun-picture-4 + .noun-examples { grid-template-columns: 7fr 9fr; }
.noun-examples span { padding: 5px 2px; color: #422d21; font-size: .85rem; line-height: 1.2; }
.noun-examples span + span { border-inline-start: 1px solid #d8cabb; }
.noun-examples small { display: block; margin-bottom: 2px; color: #6f5745; font-size: .85em; font-weight: 650; }
.noun-examples strong { display: inline; color: #663b27; font-size: inherit; font-weight: 750; }
@media (max-width: 700px) {
  .lesson-dialog[data-group="Nouns"] .dialog-lessons { gap: 8px; }
  .noun-examples span { font-size: .72rem; }
}
@media (max-height: 680px) {
  .lesson-dialog[data-group="Nouns"] .dialog-inner { padding: 12px; }
  .lesson-dialog[data-group="Nouns"] .dialog-header { margin-bottom: 8px; }
  .lesson-dialog[data-group="Nouns"] .dialog-lessons { gap: 8px; }
  .lesson-dialog[data-group="Nouns"] .illustrated-lesson { padding: 8px; }
  .noun-visual { max-width: clamp(104px, calc((100dvh - 505px) * .75), 280px); }
  .noun-examples span { padding-block: 3px; font-size: .72rem; }
  .lesson-dialog[data-group="Nouns"] .review-choice .activity-link { min-height: 50px; }
  .lesson-dialog[data-group="Nouns"] .review-sheets { height: 32px; transform: scale(.65); }
}