/* Classroom examples: the filters, the cards and the viewer (see examples.js).
   Uses the Beyond the Blackboard colours when they are there, and sensible ones when not. */
.ex-filters { display: grid; gap: 10px; margin-bottom: 18px; }
.ex-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 4px; }
.ex-chips::-webkit-scrollbar { display: none; }
.ex-chips button { flex: none; min-height: 42px; padding: 8px 16px; background: #fff; border: 1px solid var(--bb-line, #dadcd1); border-radius: 999px; color: var(--bb-ink, #252b25); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.ex-chips button:hover { border-color: var(--bb-ink, #252b25); }
.ex-chips button[aria-pressed="true"] { background: var(--bb-ink, #252b25); border-color: var(--bb-ink, #252b25); color: #fff; }
.ex-count { margin: 0 0 12px; color: var(--bb-muted, #62685f); font-size: 14px; }

.ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ex-card { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 0; background: #fff; border: 1px solid var(--bb-line, #dadcd1); border-radius: 16px; color: var(--bb-ink, #252b25); font: inherit; text-align: left; cursor: pointer; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .2s; animation: ex-in .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.ex-card:hover { transform: translateY(-4px); border-color: var(--ac); box-shadow: 0 18px 36px -22px rgb(30 40 30 / .45); }
.ex-card:active { transform: translateY(-1px) scale(.99); }
.ex-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f4f3ec; border-bottom: 1px solid #ecebe3; }
.ex-thumb svg { display: block; width: 100%; height: 100%; }
.ex-card-text { display: grid; gap: 6px; padding: 16px 18px 8px; }
.ex-card-text small { color: var(--ac); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ex-card-text strong { font-size: 19px; font-weight: 650; letter-spacing: -.025em; line-height: 1.25; }
.ex-card-text > span { color: var(--bb-muted, #62685f); font-size: 15px; line-height: 1.45; }
.ex-go { margin-top: auto; padding: 8px 18px 16px; color: var(--ac); font-size: 14px; font-weight: 700; }
.ex-empty { grid-column: 1 / -1; padding: 28px; background: #fff; border: 1px dashed var(--bb-line, #dadcd1); border-radius: 14px; color: var(--bb-muted, #62685f); text-align: center; }
.ex-all { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; margin-top: 22px; padding: 12px 22px; background: var(--bb-ink, #252b25); border-radius: 999px; color: #fff !important; font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .2s; }
.ex-all:hover { background: var(--bb-red, #bd2934); }
@keyframes ex-in { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 960px) { .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .ex-grid { grid-template-columns: 1fr; gap: 10px; }
  .ex-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: stretch; }
  .ex-thumb { grid-row: span 2; aspect-ratio: auto; height: 100%; border-bottom: 0; border-right: 1px solid #ecebe3; }
  .ex-thumb svg { height: 100%; object-fit: cover; }
  .ex-card-text { padding: 14px 14px 4px; gap: 4px; }
  .ex-card-text strong { font-size: 17px; }
  .ex-card-text > span { font-size: 14px; }
  .ex-go { padding: 4px 14px 14px; font-size: 13px; }
}

/* ---------- The viewer ---------- */
html.ex-open { overflow: hidden; }
.ex-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 20px; background: var(--bb-paper, #faf9f4); color: var(--bb-ink, #252b25); box-shadow: 0 40px 90px -30px rgb(0 0 0 / .5); font-family: Inter, Arial, sans-serif; }
.ex-dialog::backdrop { background: rgb(20 26 20 / .55); backdrop-filter: blur(3px); }
.ex-dialog[open] { animation: ex-pop .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes ex-pop { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.ex-sheet { max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; }
.ex-top { display: flex; justify-content: space-between; gap: 16px; padding: 22px 24px 8px; }
.ex-top small { color: var(--ac); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ex-top h2 { margin: 4px 0 0; font-size: clamp(22px, 3vw, 28px); font-weight: 650; letter-spacing: -.035em; line-height: 1.2; }
.ex-top p { margin: 6px 0 0; color: var(--bb-muted, #62685f); font-size: 16px; }
.ex-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: #fff; border: 1px solid var(--bb-line, #dadcd1); border-radius: 50%; color: var(--bb-ink, #252b25); font-size: 18px; cursor: pointer; }
.ex-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 10px 24px 0; padding: 4px; background: #ecebe3; border-radius: 12px; }
.ex-tabs button { min-height: 42px; background: none; border: 0; border-radius: 9px; color: var(--bb-muted, #62685f); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.ex-tabs button[aria-selected="true"] { background: #fff; color: var(--bb-ink, #252b25); box-shadow: 0 4px 12px -6px rgb(0 0 0 / .3); }
.ex-panel { padding: 16px 24px 8px; }
.ex-panel[hidden] { display: none; }
.ex-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 24px 16px; background: linear-gradient(transparent, var(--bb-paper, #faf9f4) 30%); }
.ex-foot button { min-height: 44px; padding: 8px 16px; background: #fff; border: 1px solid var(--bb-line, #dadcd1); border-radius: 999px; color: var(--bb-ink, #252b25); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ex-foot span { color: var(--bb-muted, #62685f); font-size: 14px; }

/* The activity itself */
.ex-widget { display: grid; gap: 14px; }
.ex-art { overflow: hidden; background: #f4f3ec; border: 1px solid #e4e3d9; border-radius: 14px; }
.ex-art > svg { display: block; width: 100%; height: auto; }
.ex-art svg text, .ex-thumb svg text { font-family: Inter, Arial, sans-serif; }
.ex-controls { display: grid; gap: 12px; }
.ex-range { display: grid; gap: 4px; }
.ex-range span { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; }
.ex-range output { color: var(--ac); font-variant-numeric: tabular-nums; }
.ex-range input { width: 100%; min-height: 32px; accent-color: var(--ac); }
.ex-choice { display: grid; gap: 6px; }
.ex-clabel { color: var(--bb-muted, #62685f); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ex-choice > div, .ex-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-choice button, .ex-btn { min-height: 44px; padding: 8px 16px; background: #fff; border: 1.5px solid var(--bb-line, #dadcd1); border-radius: 999px; color: var(--bb-ink, #252b25); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.ex-choice button:hover, .ex-btn:hover { border-color: var(--ac); }
.ex-choice button[aria-pressed="true"], .ex-btn.is-primary { background: var(--ac); border-color: var(--ac); color: #fff; }
.ex-read { margin: 0; padding: 14px 16px; background: #fff; border-left: 4px solid var(--ac); border-radius: 4px 12px 12px 4px; font-size: 16px; line-height: 1.55; }
.ex-read b { color: var(--ac); }

/* How a teacher makes it */
.ex-make .ex-k { margin: 14px 0 6px; color: var(--ac); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ex-make .ex-k:first-child { margin-top: 0; }
.ex-make blockquote { margin: 0; padding: 14px 16px; background: #1f2622; border-radius: 12px; color: #eef0e6; font-size: 16px; line-height: 1.55; }
.ex-make ol { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.5; }
.ex-make p { margin: 0; font-size: 16px; line-height: 1.55; }
.ex-make .ex-note { margin-top: 16px; color: var(--bb-muted, #62685f); font-size: 14px; }

/* Pieces some activities draw in HTML */
.ex-sentence { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 26px 18px; font-size: 22px; font-weight: 650; line-height: 1.2; }
.ex-w { display: inline-grid; gap: 4px; padding: 8px 12px; border-radius: 10px; animation: ex-in .35s ease both; }
.ex-w small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.ex-w0 { background: #f1e7c9; color: #6b5214; } .ex-w1 { background: #e6dcf6; color: #4b2a85; } .ex-w2 { background: #6a3fb0; color: #fff; } .ex-w3 { background: #d8ecd9; color: #1f5a33; }
.ex-comma { display: grid; gap: 4px; padding: 20px 18px 0; text-align: center; }
.ex-comma p { margin: 0; font-size: clamp(24px, 4vw, 32px); font-weight: 700; letter-spacing: -.02em; }
.ex-mark { display: inline-block; color: #bd2934; font-size: 1.4em; line-height: 0; animation: ex-drop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes ex-drop { from { opacity: 0; transform: translateY(-18px) scale(1.6); } }
.ex-letter { display: grid; gap: 10px; max-width: 460px; margin: 18px auto; padding: 22px 24px; background: #fff; border: 1px solid #e0dccf; border-radius: 6px; box-shadow: 0 10px 24px -18px rgb(0 0 0 / .4); font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.6; animation: ex-in .35s ease both; }
.ex-letter p { margin: 0; }
.ex-letter .ex-small { color: #62685f; font-size: 14px; }
.ex-prog { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 12px 12px; list-style: none; counter-reset: step; }
.ex-prog li { padding: 5px 10px; background: #fff; border: 1px solid #d6dcd8; border-radius: 8px; font-size: 13px; font-weight: 600; counter-increment: step; }
.ex-prog li::before { content: counter(step) ". "; color: #62685f; }
.ex-prog li.on { background: var(--ac); border-color: var(--ac); color: #fff; }
.ex-prog li.on::before { color: #fff; }
.ex-prog li.bad { background: #fff1f2; border-color: #e58b91; color: #a1101c; }
.ex-prog .ex-prog-empty { color: #62685f; font-weight: 500; }
.ex-prog .ex-prog-empty::before { content: none; }

/* Motion inside the pictures */
.ex-flow { stroke-dasharray: 3 11; animation: ex-flow .9s linear infinite; }
@keyframes ex-flow { to { stroke-dashoffset: -28; } }
.ex-glow { animation: ex-glow 1.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes ex-glow { from { opacity: .35; transform: scale(.9); } to { opacity: .7; transform: scale(1.05); } }
.ex-drift { animation: ex-drift 6s ease-in-out infinite alternate; }
@keyframes ex-drift { to { transform: translateX(26px); } }
.ex-rain path { animation: ex-rain .7s linear infinite; }
@keyframes ex-rain { from { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(14px); opacity: 0; } }

/* Blocks that rise in as they arrive (examples.js adds html.ex-rise-on) */
.ex-rise-on [data-rise] > * { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.ex-rise-on [data-rise].is-in > * { opacity: 1; transform: none; }

@media (max-width: 620px) {
  .ex-dialog { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .ex-sheet { height: 100dvh; max-height: none; }
  .ex-top { padding: 16px 16px 6px; }
  .ex-tabs { margin: 8px 16px 0; }
  .ex-panel { padding: 14px 16px 8px; }
  .ex-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
  .ex-sentence { font-size: 19px; padding: 20px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-card, .ex-dialog[open], .ex-w, .ex-mark, .ex-letter, .ex-flow, .ex-glow, .ex-drift, .ex-rain path { animation: none !important; }
  .ex-card { transition: none; }
}
.lite .ex-flow, .lite .ex-glow, .lite .ex-drift, .lite .ex-rain path { animation: none; }

/* The examples page */
.ex-page .bb-kicker a { color: inherit; }
.ex-h1 { margin: 16px 0 14px !important; font-size: clamp(40px, 5vw, 60px) !important; line-height: 1.02 !important; letter-spacing: -.055em !important; }
.ex-intro { max-width: 58ch; margin-bottom: 30px !important; color: #50594f; font-size: 17px; line-height: 1.65; }
.ex-cta { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 24px 40px; align-items: center; margin-top: 64px; padding: 34px; background: #1f2622; border-radius: 20px; color: #f3f2ea; }
.ex-cta .bb-kicker { color: #b7bfac; }
.ex-cta h2 { margin: 8px 0 10px !important; font-size: clamp(28px, 3.4vw, 40px) !important; }
.ex-cta h2 em { color: #f08f95; }
.ex-cta p:not(.bb-kicker) { color: #c9cdbf; font-size: 16px; }
.ex-cta-actions { display: grid; gap: 8px; justify-items: start; }
.ex-cta .bb-text-link { color: #f3f2ea !important; }
@media (max-width: 760px) { .ex-cta { grid-template-columns: 1fr; padding: 24px; } }

/* Stories, comics and speeches (English), and switches that stay pressed */
.ex-btn[aria-pressed="true"] { background: var(--ac); border-color: var(--ac); color: #fff; }
.ex-story { display: grid; }
.ex-story svg { display: block; width: 100%; max-height: 190px; }
.ex-story p { margin: 0; padding: 16px 18px 18px; font-family: Georgia, 'Times New Roman', serif; font-size: 19px; line-height: 1.65; }
.ex-v, .ex-adj, .ex-doer { display: inline-block; padding: 0 6px; border-radius: 6px; font-family: Inter, Arial, sans-serif; font-size: .92em; font-weight: 700; animation: ex-flip .45s cubic-bezier(.2, .8, .2, 1) both; }
.ex-v { background: #6a3fb0; color: #fff; }
.ex-adj { background: #f1e7c9; color: #6b5214; }
.ex-doer { background: #ffe1e3; color: #a1101c; }
@keyframes ex-flip { from { opacity: 0; transform: rotateX(80deg); } }
.ex-big-line { font-size: 22px !important; text-align: center; }
.ex-comic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; }
.ex-comic > div { position: relative; padding: 14px 16px; background: #fff; border: 2.5px solid #252b25; border-radius: 18px; animation: ex-in .4s ease both; }
.ex-comic > div:nth-child(2) { animation-delay: .15s; }
.ex-comic > div::after { content: ""; position: absolute; left: 22px; bottom: -12px; width: 18px; height: 18px; background: #fff; border-right: 2.5px solid #252b25; border-bottom: 2.5px solid #252b25; transform: rotate(45deg); }
.ex-comic b { color: var(--ac); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.ex-comic p { margin: 4px 0 0; font-size: 17px; font-weight: 600; line-height: 1.4; }
.ex-report { display: grid; gap: 10px; margin: 18px; padding: 16px 18px; background: #fffdf4; border-left: 5px solid var(--ac); font-family: Georgia, 'Times New Roman', serif; font-size: 18px; line-height: 1.6; animation: ex-in .4s ease both; }
.ex-report p { margin: 0; }
.ex-report mark { padding: 0 4px; border-radius: 4px; background: #e6dcf6; color: #4b2a85; font-weight: 700; }
.ex-speech { margin: 18px; padding: 18px 20px; background: #fff; border: 1px solid #e0dccf; border-radius: 14px; animation: ex-in .4s ease both; }
.ex-speech small { color: var(--ac); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ex-speech p { margin: 8px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: 18px; line-height: 1.65; }
.ex-speech mark { padding: 0 4px; border-radius: 4px; background: #e6dcf6; color: #4b2a85; }
.ex-pop { animation: ex-pop-in .5s cubic-bezier(.3, 1.4, .5, 1) both; transform-box: fill-box; transform-origin: center; }
@keyframes ex-pop-in { from { opacity: 0; transform: scale(.6); } }
.ex-drive { animation: ex-drive 5s linear infinite; }
.ex-drive-slow { animation: ex-drive 11s linear infinite; }
@keyframes ex-drive { from { transform: translateX(-10px); } to { transform: translateX(360px); } }
@media (max-width: 620px) {
  .ex-comic { grid-template-columns: 1fr; gap: 18px; }
  .ex-story p { font-size: 17px; }
  .ex-big-line { font-size: 19px !important; }
}
@media (prefers-reduced-motion: reduce) { .ex-v, .ex-adj, .ex-doer, .ex-comic > div, .ex-report, .ex-speech, .ex-pop, .ex-drive, .ex-drive-slow { animation: none !important; } }
.lite .ex-drive, .lite .ex-drive-slow { animation: none; }