.bio-page {
  --accent: #146b54;
  --soft: #e1f2e9;
  --bio-deep: #123c31;
  --bio-focus: #17549a;
  --bio-focus-soft: #e5f0ff;
  --bio-fire: #db4b18;
  --bio-fire-soft: #fff0d7;
  background: #f4f7ef;
  color: #20332a;
}
.bio-page .topbar { background: rgb(244 247 239 / .93); border-bottom-color: #d6e5d6; }
.bio-page .topbar .brand { color: var(--bio-deep); }
.bio-session-bar { max-width: 1130px; margin: 10px auto 0; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; color: #365c47; font-size: .82rem; font-weight: 700; }
.bio-session-bar a { color: #17549a; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.bio-live-banner { max-width: 1130px; margin: 12px auto; padding: 13px 20px; box-sizing: border-box; border: 2px solid #c99248; border-radius: 16px; background: #fff4d9; color: #493814; }
.bio-live-banner > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 15px; margin: 5px 0; }
.bio-live-banner strong { font: 700 1.15rem/1.2 var(--serif); }
.bio-live-banner .btn { margin-left: auto; }
.bio-live-banner p { margin: 0; }
.bio-quiz-page.bio-quiz-live .bio-live-banner, .bio-cards-page.bio-cards-active .bio-live-banner { flex: none; width: min(1130px, calc(100% - 16px)); margin: 4px auto; padding: 5px 12px; font-size: .75rem; }
.bio-quiz-page.bio-quiz-live .bio-live-banner strong, .bio-cards-page.bio-cards-active .bio-live-banner strong { font: 800 .85rem/1.2 var(--sans); }
.bio-quiz-page.bio-quiz-live .bio-live-banner .btn, .bio-cards-page.bio-cards-active .bio-live-banner .btn { min-height: 32px; padding: 5px 10px; font-size: .75rem; }
.bio-live-pulse { width: 12px; height: 12px; flex: none; border-radius: 50%; background: #ba4e26; box-shadow: 0 0 0 4px #f8d8a7; }
.bio-onboarding { margin: 18px 0; padding: 17px 22px; border-left: 4px solid #4e9877 !important; }
.bio-onboarding h2 { margin: 0 0 6px; font: 700 1.35rem/1.2 var(--serif); color: var(--bio-deep); }
.bio-onboarding summary { cursor: pointer; font-weight: 800; color: var(--bio-deep); }
.bio-onboarding p { max-width: 78ch; color: #425f4d; }
.bio-session-change { max-width: 610px; margin: 36px auto; padding: 26px; background: #fffefa; border: 1px solid #d9e8d8; border-radius: 18px; }
.bio-session-change h2 { margin: 0 0 8px; }
.bio-session-change a { color: #17549a; font-weight: 800; }
.bio-page .card { border: 1px solid #d9e8d8; }
.bio-page .btn.accent { background: var(--bio-deep); }
.bio-page .btn.ghost { background: #fffefa; }
.bio-page a.btn { text-decoration: none; }
.bio-home-wrap { max-width: 1130px; }
.bio-home-hero {
  min-height: 310px; border-radius: 24px; overflow: hidden; display: flex; align-items: center;
  padding: clamp(30px, 5vw, 62px); color: #fff;
  background: #103d32 url('../bio/forest-canopy.jpg') center center / cover no-repeat;
  box-shadow: 0 18px 40px rgb(17 57 42 / .14);
}
.bio-home-hero-copy { max-width: 560px; text-shadow: 0 1px 12px rgb(0 0 0 / .28); }
.bio-home-hero .bio-kicker { color: #b5f2d0; }
.bio-home-hero h1 { font: 700 clamp(2.5rem, 6vw, 4.8rem)/.97 var(--serif); letter-spacing: -.045em; margin: 0 0 18px; }
.bio-home-hero p:not(.bio-kicker) { font-size: clamp(1rem, 2vw, 1.18rem); margin: 0; max-width: 48ch; }
.bio-home-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 25px; }
.bio-home-hero .btn.accent { background: #c8ed96; color: var(--bio-deep); text-shadow: none; }
.bio-home-hero .btn.ghost { background: rgb(255 255 255 / .13); color: #fff; border: 1px solid rgb(255 255 255 / .6); box-shadow: none; text-shadow: none; }
.bio-hero-link { align-self: center; color: #e7f7d2; font-weight: 700; font-size: .9rem; margin-left: 4px; }
.bio-student-home .bio-home-hero { min-height: 190px; padding: clamp(24px, 4vw, 40px); }
.bio-student-home .bio-home-hero h1 { font-size: clamp(2.25rem, 4vw, 3.4rem); margin-bottom: 10px; }
.bio-student-home .bio-home-hero-actions, .bio-student-home .bio-feature-grid,
.bio-student-home #blocks, .bio-student-home .footer-note, .bio-student-home .bio-live-banner { display: none; }
.bio-student-home .bio-home-my-prep { margin: 12px 0 0; padding: 12px 0 24px; border: 0 !important; background: transparent; }
.bio-student-home .bio-home-my-prep h2 { margin-bottom: 15px; }
.bio-home-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bio-home-action { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 154px; padding: 17px; border: 2px solid #a9c8c0; border-radius: 18px; background: #e7f1ff; color: #163a43; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.bio-home-action:nth-child(2) { border-color: #afd0ae; background: #e9f4df; }
.bio-home-action:nth-child(3) { border-color: #e8c893; background: #fff0d4; }
.bio-home-action:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgb(17 57 42 / .12); }
.bio-home-action:focus-visible { outline: 3px solid #17549a; outline-offset: 3px; }
.bio-home-action > span:nth-last-child(2) { flex: 1; min-width: 0; }
.bio-home-action strong { display: block; font: 700 clamp(1.12rem, 1.8vw, 1.5rem)/1.12 var(--serif); }
.bio-home-action small { display: block; margin-top: 8px; color: #36564e; font: 600 .82rem/1.35 var(--sans); }
.bio-home-action > span:last-child { align-self: flex-end; font-size: 1.5rem; font-weight: 800; }
.bio-home-action-icon { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 16px; background: #d1e6ff; color: #17549a; font-size: 2rem; }
.bio-home-action:nth-child(3) .bio-home-action-icon { background: #ffe0aa; color: #9c471d; }
.bio-home-action img { flex: none; width: 70px; height: 70px; object-fit: cover; border-radius: 16px; background: #f8fff4; }
.bio-home-save-note:empty { display: none; }
@media (max-width: 800px) { .bio-home-actions { grid-template-columns: 1fr; } .bio-home-action { min-height: 108px; } }
@media (prefers-reduced-motion: reduce) { .bio-home-action { transition: none; } }
.bio-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 46px; }
.bio-feature-grid > .card { margin: 0; border-radius: 18px; min-width: 0; }
.bio-feature-grid > .card:first-child { background: #e7f1df; border-color: #bad6b2; }
.bio-feature-grid > .card h2 { font: 700 1.55rem/1.15 var(--serif); margin: 0 0 10px; }
.bio-feature-grid > .card p { color: #4b6255; margin: 0 0 18px; }
.bio-feature-grid > .card .btn { margin: 4px 5px 4px 0; }
.bio-block-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 16px; }
.bio-block-heading h2 { font: 700 clamp(2rem, 4vw, 3rem)/1.05 var(--serif); margin: 0; }
.bio-block-heading a { color: var(--accent); font-size: .9rem; font-weight: 700; }
.bio-block-links { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.bio-block-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bio-track-card { display: flex; flex-direction: column; min-height: 260px; background: #fffefa; border: 1px solid #d9e8d8; border-radius: 18px; padding: 21px; }
.bio-track-top { display: flex; justify-content: space-between; gap: 8px; color: #477461; font-size: .73rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bio-track-card h3 { color: var(--bio-deep); font: 700 1.48rem/1.15 var(--serif); margin: 15px 0 9px; }
.bio-track-card p { color: #53685b; font-size: .9rem; margin: 0 0 18px; }
.bio-track-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.bio-track-card .btn.small { border-radius: 9px; }
.bio-track-focus { color: #17549a; font-size: .8rem; font-weight: 700; margin-top: 13px; }
.bio-report-wrap { max-width: 1130px; }
.bio-kicker { color: #177357; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; }
.bio-report-hero {
  min-height: 310px; border-radius: 24px; overflow: hidden;
  display: flex; align-items: center; padding: clamp(30px, 5vw, 62px);
  background: #103d32 url('../bio/forest-canopy.jpg') center center / cover no-repeat;
  color: #fff; box-shadow: 0 18px 40px rgb(17 57 42 / .14);
}
.bio-report-hero-copy { max-width: 570px; text-shadow: 0 1px 12px rgb(0 0 0 / .28); }
.bio-report-hero .bio-kicker { color: #b5f2d0; }
.bio-report-hero h1 { font: 700 clamp(2.4rem, 5vw, 4.4rem)/1.02 var(--serif); letter-spacing: -.04em; margin: 0 0 16px; }
.bio-report-hero p:not(.bio-kicker) { font-size: clamp(1rem, 2vw, 1.18rem); max-width: 48ch; margin: 0; }
.bio-report-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.bio-report-hero .btn.accent { background: #c8ed96; color: var(--bio-deep); text-shadow: none; }
.bio-report-hero .btn.ghost { background: rgb(255 255 255 / .13); color: #fff; border: 1px solid rgb(255 255 255 / .6); box-shadow: none; text-shadow: none; }
.bio-report-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.bio-summary-tile { background: #fffefa; border: 1px solid #d9e8d8; border-radius: 18px; padding: 20px 22px; min-width: 0; }
.bio-summary-tile > span { display: block; color: #3d6955; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bio-summary-tile strong { display: block; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.1; color: var(--bio-deep); margin: 8px 0; font-variant-numeric: tabular-nums; }
.bio-summary-tile strong small { font-size: .48em; color: #527363; }
.bio-summary-tile p { color: #53685b; font-size: .88rem; margin: 0; }
.bio-next-step { display: flex; gap: 24px; align-items: center; justify-content: space-between; background: #e7f1df; border-color: #bad6b2 !important; margin-bottom: 34px; }
.bio-next-step h2 { font: 700 clamp(1.5rem, 3vw, 2.3rem)/1.15 var(--serif); margin: 0 0 8px; }
.bio-next-step p:last-child { margin: 0; max-width: 60ch; }
.bio-next-step .btn { flex: none; }
.bio-map-heading { display: flex; gap: 20px; align-items: end; justify-content: space-between; }
.bio-map-heading h2 { font: 700 clamp(2rem, 4vw, 3rem)/1.1 var(--serif); margin: 0; }
.bio-map-heading > p { max-width: 42ch; color: #526a5c; margin: 0 0 4px; }
.bio-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 24px; font-size: .85rem; font-weight: 700; }
.bio-key-focus { color: var(--bio-focus); }.bio-key-growing { color: #976014; }.bio-key-strong { color: var(--bio-fire); }.bio-key-unseen { color: #627469; }
.bio-map-block { margin: 22px 0 32px; }
.bio-map-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid #bfd4c2; padding-bottom: 10px; }
.bio-map-block-head h3 { font-size: clamp(1.18rem, 2vw, 1.48rem); margin: 0; }
.bio-map-block-head a { color: var(--accent); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.bio-concept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 10px; margin-top: 12px; }
.bio-concept { display: flex; flex-direction: column; gap: 6px; min-height: 128px; padding: 14px; border: 1px solid; border-radius: 14px; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.bio-concept:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgb(18 60 49 / .1); }
.bio-concept-name { font-weight: 800; line-height: 1.25; }
.bio-concept-pe { font: 700 .68rem var(--mono); opacity: .75; }
.bio-concept-score { margin-top: auto; font-size: 1.16rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.bio-concept-focus { background: var(--bio-focus-soft); border-color: #a9c9f3; color: #123d73; }
.bio-concept-growing { background: #fff5da; border-color: #e8ca7e; color: #764c0a; }
.bio-concept-strong { background: radial-gradient(circle at 88% 10%, #ffe5a2, #fff0d7 58%, #ffe0cf); border: 2px solid #df5229; color: #8e2c12; box-shadow: inset 0 0 25px #ffb24b35, 0 4px 18px #df52292b; }
.bio-concept-strong .bio-concept-score { font-size: 1.65rem; color: #bb3413; text-shadow: 0 1px 0 #fff; }
.bio-concept-unseen { background: #fffefa; border-color: #d6e4d3; color: #3d5548; }
.bio-report-footnote { color: #526a5c; font-size: .85rem; margin: 32px 0 0; }

.bio-weeks-wrap { max-width: 1130px; }
.bio-weeks-hero { display: flex; align-items: center; min-height: 250px; padding: clamp(26px, 5vw, 54px); border-radius: 24px; color: #fff; background: linear-gradient(90deg, rgb(7 49 37 / .93), rgb(7 49 37 / .48)), url('../img/bio/clusters/water-seedling.jpg') center / cover no-repeat; }
.bio-weeks-hero > div { max-width: 650px; }
.bio-weeks-hero .bio-kicker { color: #bcecc8; }
.bio-weeks-hero h1 { font: 700 clamp(2.3rem, 5vw, 4.2rem)/1 var(--serif); letter-spacing: -.04em; margin: 0 0 15px; }
.bio-weeks-hero p:last-child { font-size: clamp(1rem, 1.8vw, 1.13rem); margin: 0; }
.bio-weeks-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 16px 0; color: #506b59; }
.bio-weeks-intro p { margin: 0; }
.bio-weeks-intro a { flex: none; color: var(--accent); font-weight: 800; }
.bio-week-jump { display: flex; align-items: center; gap: 12px; padding: 17px 20px; background: #e7f1df; border-color: #bad6b2 !important; }
.bio-week-jump label { font-weight: 800; color: var(--bio-deep); }
.bio-week-jump select { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #9fbea4; border-radius: 9px; background: #fffefa; color: var(--bio-deep); font: inherit; }
.bio-week-jump .btn { flex: none; }
.bio-week-jump [aria-disabled="true"] { pointer-events: none; opacity: .6; }
.bio-week-session, .bio-week-copy-status { min-height: 1.5em; margin: 12px 0; color: #476250; font-size: .89rem; }
.bio-week-session a { color: #17549a; font-weight: 800; }
.bio-week-block { margin: 34px 0 45px; }
.bio-week-block-head { border-bottom: 1px solid #bbd2be; margin-bottom: 14px; padding-bottom: 11px; }
.bio-week-block-head h2 { font: 700 clamp(1.7rem, 3vw, 2.45rem)/1.12 var(--serif); color: var(--bio-deep); margin: 0; }
.bio-week-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bio-week-card { display: flex; flex-direction: column; min-width: 0; padding: 20px; border: 1px solid #d9e8d8; border-radius: 17px; background: #fffefa; scroll-margin-top: 90px; }
.bio-week-card-top { display: flex; flex-wrap: wrap; gap: 5px 12px; justify-content: space-between; color: #477461; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bio-week-state { letter-spacing: 0; text-transform: none; }
.bio-week-state-finished { color: #9a3417; }
.bio-week-state-in-progress, .bio-week-state-finish-needed { color: #17549a; }
.bio-week-card h3 { margin: 16px 0 9px; color: var(--bio-deep); font: 700 1.42rem/1.15 var(--serif); }
.bio-week-card p { margin: 0 0 13px; color: #53685b; font-size: .9rem; }
.bio-week-card small { display: block; margin-top: auto; color: #557364; font: 700 .72rem/1.5 var(--mono); overflow-wrap: anywhere; }
.bio-week-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.bio-week-actions .btn { box-shadow: none; }
.bio-bridge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr); gap: 20px; align-items: center; margin: 24px 0; padding: 22px; border: 1px solid #bad6b2; border-radius: 18px; background: #e7f1df; }
.bio-bridge h2 { margin: 0 0 10px; color: var(--bio-deep); font: 700 1.9rem/1.1 var(--serif); }
.bio-bridge p { color: #476250; }
.bio-bridge .bio-week-grid { display: block; }
.bio-bridge a:not(.btn) { color: #17549a; }
.bio-week-archive { margin: 24px 0 36px; padding: 20px; border: 1px solid #bbd2be; border-radius: 18px; background: #edf3e9; }
.bio-week-archive summary { color: var(--bio-deep); font: 700 1.45rem/1.2 var(--serif); cursor: pointer; }
.bio-week-archive > p { color: #53685b; }
.bio-week-card-archived { background: #f6f8f4; }
.bio-page .pinned table { border-collapse: collapse; width: 100%; margin: 9px 0; background: #fffefa; font-size: .88rem; }
.bio-page .pinned caption { text-align: left; font-weight: 750; margin-bottom: 5px; }
.bio-page .pinned th, .bio-page .pinned td { border: 1px solid #c6dbc8; padding: 5px 8px; text-align: left; }
.bio-page .pinned .bio-flow { padding: 8px; border-radius: 8px; background: #fffefa; color: var(--bio-deep); font-weight: 700; overflow-wrap: anywhere; }
.bio-question-box { margin: 16px 0 26px; padding: 18px 22px; }
.bio-question-box summary { color: var(--bio-deep); font: 700 1.35rem/1.2 var(--serif); cursor: pointer; }
.bio-question-box p { color: #53685b; }
.bio-question-box label { display: block; margin: 14px 0 7px; font-weight: 800; }
.bio-question-box textarea { box-sizing: border-box; display: block; width: 100%; max-width: 760px; padding: 12px; border: 1px solid #9fbea4; border-radius: 9px; background: #fffefa; font: inherit; resize: vertical; }
.bio-question-box button { margin-top: 10px; }
.bio-question-box li { margin: 9px 0; overflow-wrap: anywhere; }

.bio-page .fcard { background: #fffefa; border: 2px solid #cfe5d5; }
.bio-page .fcard .front { font-family: var(--serif); color: var(--bio-deep); }
.bio-page .fcard.flash-bad { border-color: var(--bio-focus); box-shadow: 0 0 0 5px var(--bio-focus-soft), var(--shadow-2); }
.bio-page .fcard.flash-good { border-color: var(--bio-fire); box-shadow: 0 0 0 5px var(--bio-fire-soft), 0 0 30px #f3833a88, var(--shadow-2); }
.bio-page .tally .t-good { color: var(--bio-fire); background: var(--bio-fire-soft); }
.bio-page .tally .t-bad { color: var(--bio-focus); background: var(--bio-focus-soft); }
.bio-page .tally .t-good strong { font-size: 1.7rem; line-height: 1; }
.bio-page .tally .t-bad strong { font-size: 1.3rem; line-height: 1; }
.bio-card-stage { display: grid; grid-template-columns: 108px minmax(0, 560px) 108px; gap: 10px; align-items: stretch; justify-content: center; width: 100%; height: min(65dvh, 560px); min-height: 260px; margin: 12px auto 0; }
.bio-card-stage .deck { width: 100%; height: 100%; min-width: 0; margin: 0; }
.bio-card-side { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 8px; border: 2px solid currentColor; border-radius: 16px; font-weight: 900; line-height: 1.15; text-align: center; }
.bio-card-side strong { font-size: 2.4rem; line-height: 1; }
.bio-card-side.is-unknown { background: #ddecff; color: #174d91; }
.bio-card-side.is-known { background: radial-gradient(circle at center, #ffe9a8, #ffbd72); color: #a93313; box-shadow: 0 0 22px #f3833a77; }
.bio-card-side:focus-visible { outline: 3px solid #183d2c; outline-offset: 3px; }
.bio-card-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.bio-card-controls .btn { min-height: 48px; }
.bio-card-controls .is-unknown { background: var(--bio-focus-soft); color: var(--bio-focus); border: 1px solid #a9c9f3; }
.bio-card-controls .is-known { background: var(--bio-fire); color: #fff; }
.bio-card-controls .is-work { background: #fff5da; color: #764c0a; border: 1px solid #e8ca7e; }
.bio-sound { display: block; margin: 18px auto 0; border: 0; background: transparent; color: #4c6655; font-size: .83rem; text-decoration: underline; }
.bio-streak { min-height: 25px; margin: 12px 0 0; text-align: center; color: var(--bio-fire); font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 900; text-shadow: 0 2px 8px #ffad6a; }
.bio-page .quiz-meta { border-color: #d8e9d8; }
.bio-cloud-status { display: flex; flex: none; align-items: center; gap: 9px; min-height: 22px; margin: 2px 0 4px; color: #386b51; font-size: .78rem; font-weight: 800; }
.bio-cloud-status .btn { min-height: 30px; padding: 4px 8px; font-size: .72rem; }
.bio-page [hidden] { display: none !important; }
.bio-cluster-visual { margin: 6px 0 14px !important; }
.bio-cluster-visual img { display: block; width: 100%; height: auto; border-radius: 9px; }
.bio-cluster-visual figcaption { margin-top: 5px; color: #4d6757; font-size: .76rem; line-height: 1.35; }
.bio-quiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; color: #4d6757; font-size: .78rem; font-weight: 800; }
.bio-quiz-nav .btn { min-height: 42px; padding: 8px 10px; }
.bio-quiz-nav .btn:disabled { opacity: .42; cursor: default; }
.bio-variable-answer { display: grid; gap: 10px; margin: 18px 0 2px; padding: 18px; border: 1px solid #a9cfc0; border-radius: 16px; background: #ecf6eb; }
.bio-variable-answer label { color: var(--bio-deep); font-weight: 800; }
.bio-variable-answer select { width: 100%; min-height: 52px; padding: 10px 14px; border: 2px solid #4e9877; border-radius: 10px; background: #fffefa; color: var(--bio-deep); font: 700 1rem var(--sans); }
.bio-variable-answer select:focus-visible { outline: 3px solid #d45e34; outline-offset: 3px; }
.bio-variable-answer .btn { justify-self: start; min-height: 46px; }
.bio-quiz .nopt > span:last-child { flex: 1 1 0; min-width: 0; }
.bio-scale-choice { display: grid; flex: 1 1 0; min-width: 0; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 4px 10px; width: 100%; }
.bio-scale-choice strong { color: var(--bio-deep); }
.bio-scale-choice small { grid-column: 2; color: #557364; font-size: .68rem; }
.bio-scale-ticks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 0; border-top: 2px solid #507764; }
.bio-scale-ticks span { min-width: 0; padding: 5px 0 0; border-left: 2px solid #507764; text-align: center; font: 700 clamp(.58rem, 1.1vw, .78rem)/1 var(--mono); }
.bio-scale-ticks span:last-child { border-right: 2px solid #507764; }
.bio-idea-card h2 { margin: 5px 0 12px; color: var(--bio-deep); font: 700 clamp(1.7rem, 3vw, 2.5rem)/1.1 var(--serif); }
.bio-idea-card label { display: block; margin: 13px 0 7px; font-weight: 800; }
.bio-idea-card textarea { box-sizing: border-box; width: 100%; padding: 12px; border: 2px solid #a9cfc0; border-radius: 10px; background: #fffefa; font: inherit; resize: vertical; }
.bio-idea-card .toolbar { margin-top: 12px; }
.bio-idea-card .bio-idea-note { color: #506a58; font-size: .88rem; }
.bio-idea-confirm { margin: 0; padding: 5px 10px; color: #26684d; font-size: .8rem; font-weight: 800; }
.bio-away-notice { position: fixed; top: 82px; left: 50%; transform: translateX(-50%); z-index: 90; display: grid; grid-template-columns: 1fr auto; gap: 5px 16px; width: min(630px, calc(100vw - 28px)); box-sizing: border-box; padding: 18px 20px; border: 2px solid #c18a47; border-radius: 16px; background: #fff8e9; color: #453616; box-shadow: 0 14px 34px rgb(23 51 35 / .24); }
.bio-away-notice strong { font: 700 1.45rem/1.1 var(--serif); }
.bio-away-notice span { grid-column: 1; line-height: 1.45; }
.bio-away-notice button { grid-column: 2; grid-row: 1 / 3; align-self: start; border: 0; background: transparent; color: #60462a; font-size: 1.8rem; cursor: pointer; }
.bio-rotate-tip { display: none; }
.bio-focus-view .bio-quiz .slot.is-ghost { display: none; }
.bio-focus-view .bio-quiz .qcard .qprompt { font-size: clamp(1.15rem, 2.2vw, 1.32rem); }
.bio-focus-view .bio-quiz .nopt { font-size: 1rem; padding: 14px; }
.bio-page .score-line { color: var(--bio-fire); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.1; text-shadow: 0 2px 12px #ffb27f; }
.bio-page .score-line span { display: block; margin-top: 8px; color: #425e4e; font-size: .95rem; font-weight: 700; text-shadow: none; }
.bio-report-link { margin-top: 16px; }
.bio-reset { text-align: center; max-width: 610px; margin: 24px auto; padding: 42px 28px; background: #e7f1df; }
.bio-reset h2 { font: 700 clamp(2rem, 4vw, 3rem)/1.1 var(--serif); margin: 0 0 14px; }
.bio-reset > p { max-width: 46ch; margin: 0 auto 15px; }
.bio-reset-leaf { display: block; width: 108px; height: 108px; margin: 18px auto; border: 2px solid #9dcba7; border-radius: 50%; background: #fffefa; font-size: 3rem; box-shadow: 0 8px 19px rgb(18 60 49 / .11); transition: transform .16s ease; }
.bio-reset-leaf:active { transform: scale(.94); }
#reset-countdown { color: var(--bio-deep); font-weight: 800; font-variant-numeric: tabular-nums; }
#reset-leaves { min-height: 1.5em; color: #527363; font-size: .86rem; }
.bio-hearts { color: #cb461f; font-size: 1.65rem; font-weight: 900; letter-spacing: .04em; line-height: 1; text-shadow: 0 2px 0 #ffd5b5; white-space: nowrap; }
.bio-skip-notice { margin: 8px 0 0; padding: 9px 12px; border-radius: 10px; background: #fff0df; color: #82371b; font-weight: 750; }
.bio-language-note { color: #79501f; font-weight: 750; }
.bio-access-card { max-width: 680px; margin: 25px auto; padding: clamp(22px, 5vw, 40px); border: 2px solid #94c5a0 !important; background: #f2f8eb; }
.bio-access-card h1 { font: 700 clamp(2rem, 5vw, 3.3rem)/1.05 var(--serif); color: var(--bio-deep); margin: 8px 0 14px; }
.bio-access-card p { max-width: 60ch; }
.bio-access-error { padding: 10px 13px; border-radius: 9px; background: #fff0df; color: #87371b; }
.bio-recovery h2,.bio-writing-gate h2 { color: var(--bio-deep); font: 700 clamp(1.5rem, 3vw, 2.2rem)/1.1 var(--serif); margin: 8px 0 12px; }
.bio-recovery-card { display: grid; place-items: center; min-height: 110px; margin: 16px 0; padding: 18px; border: 2px solid #428a67; border-radius: 18px; background: linear-gradient(145deg, #eff8e6, #d8edc9); color: #174b35; box-shadow: 0 7px 0 #a2cba8; font: 800 clamp(1rem, 2vw, 1.25rem)/1.4 var(--sans); text-align: center; cursor: grab; }
.bio-recovery-card:active { cursor: grabbing; }
.bio-recovery-card.no-match { animation: bio-card-return .55s ease-in-out; }
@keyframes bio-card-return { 0%,100% { transform: rotateY(0); } 45% { transform: rotateY(85deg) translateY(-8px); } }
.bio-recovery-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
.bio-recovery-option { min-height: 66px; padding: 12px; border: 2px solid #b3d1bc; border-radius: 12px; background: #fffefa; color: #173d30; font: 800 .95rem/1.25 var(--sans); cursor: pointer; }
.bio-recovery-option:hover,.bio-recovery-option:focus-visible { border-color: #218461; background: #ecf7e7; outline-offset: 2px; }
.bio-writing-gate label { display: block; margin: 16px 0 7px; font-weight: 800; }
.bio-writing-gate textarea { box-sizing: border-box; width: 100%; min-height: 160px; padding: 14px; border: 2px solid #8cb99d; border-radius: 12px; background: #fffefa; color: var(--bio-deep); font: inherit; resize: vertical; }
.bio-writing-gate .btn { margin: 8px 9px 0 0; }
.bio-writing-gate #writing-count { color: #416653; font-size: .85rem; font-weight: 800; }

@media (max-width: 700px) {
  .bio-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bio-weeks-intro { display: block; }
  .bio-weeks-intro a { display: inline-block; margin-top: 7px; }
  .bio-week-jump { flex-wrap: wrap; }
  .bio-week-jump label { flex: 1 1 100%; }
  .bio-feature-grid { grid-template-columns: 1fr; }
  .bio-block-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bio-block-heading { align-items: start; }
  .bio-home-hero { background-position: 30% center; min-height: 340px; padding: 28px; }
  .bio-home-hero-copy { background: rgb(6 42 31 / .52); border-radius: 16px; padding: 18px; margin: -18px; }
  .bio-report-summary { grid-template-columns: 1fr; }
  .bio-summary-tile { padding: 16px 18px; }
  .bio-next-step, .bio-map-heading { display: block; }
  .bio-next-step .btn { margin-top: 18px; }
  .bio-map-heading > p { margin-top: 10px; }
  .bio-report-hero { background-position: 30% center; min-height: 330px; padding: 28px; }
  .bio-report-hero-copy { background: rgb(6 42 31 / .52); border-radius: 16px; padding: 18px; margin: -18px; }
}
@media (max-width: 560px) {
  .bio-card-stage { flex: 1 1 auto; grid-template-columns: 62px minmax(0, 1fr) 62px; gap: 5px; min-height: 0; height: auto; margin-top: 5px; }
  .bio-card-side { padding: 4px; font-size: .7rem; overflow-wrap: anywhere; }
  .bio-card-side strong { font-size: 1.9rem; }
  .bio-recovery-options { grid-template-columns: 1fr 1fr; }
  .bio-hearts { font-size: 1.4rem; }
  .bio-weeks-page .topbar .brand { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .bio-weeks-hero { min-height: 0; padding: 28px 24px; background-position: 30% center; }
  .bio-weeks-hero h1 { font-size: 2.35rem; }
  .bio-week-grid { grid-template-columns: 1fr; }
  .bio-bridge { grid-template-columns: 1fr; }
  .bio-week-jump select { flex: 1 1 100%; width: 100%; }
  .bio-week-jump .btn { width: 100%; justify-content: center; }
  .bio-block-grid { grid-template-columns: 1fr; }
  .bio-track-card { min-height: 0; }
  .bio-block-heading { display: block; }
  .bio-block-heading a { display: inline-block; margin-top: 8px; }
  .bio-page .deck { height: min(46dvh, 360px); min-height: 270px; }
  .bio-card-controls { display: grid; grid-template-columns: repeat(2, 1fr); }
  .bio-card-controls .is-work { grid-column: 1 / -1; }
  .bio-card-controls .btn { justify-content: center; padding: 10px; }
  .bio-concept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bio-concept { min-height: 148px; padding: 12px; font-size: .9rem; }
  .bio-map-block-head { align-items: start; }
  .bio-map-block-head a { white-space: normal; text-align: right; }
}
@media (max-width: 380px) { .bio-concept-grid { grid-template-columns: 1fr; } }

/* Chromebook practice keeps the evidence visible beside the answer. */
@media (min-width: 651px) {
  .bio-quiz-page.bio-quiz-live { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  .bio-quiz-page.bio-quiz-live .topbar, .bio-quiz-page.bio-quiz-live .bio-session-bar { flex: none; }
  .bio-quiz-page.bio-quiz-live #app { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: 1180px; padding-top: 8px; padding-bottom: 8px; }
  .bio-quiz-page.bio-quiz-live .quiz-meta { padding: 5px 12px !important; }
  .bio-quiz-page.bio-quiz-live .bio-cloud-status { min-height: 0; margin: 0; line-height: 1.2; }
  .bio-quiz-page.bio-quiz-live .quiz-meta, .bio-quiz-page.bio-quiz-live .qprogress { flex: none; }
  .bio-quiz-page.bio-quiz-live .slots.bio-quiz.has-context { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0; height: auto; }
  .bio-quiz-page.bio-quiz-live .bio-quiz.has-context .slot.is-pinned { grid-column: 1; grid-row: 1; min-height: 0; overflow: auto; }
  .bio-quiz-page.bio-quiz-live .bio-quiz.has-context .slot.is-current { grid-column: 2; grid-row: 1; min-height: 0; overflow: auto; }
  .bio-quiz-page.bio-quiz-live .bio-quiz .slot.is-ghost { display: none; }
}
@media (min-width: 651px) and (max-height: 600px) {
  .bio-quiz-page.bio-quiz-live .topbar, .bio-quiz-page.bio-quiz-live .bio-session-bar { display: none; }
  .bio-quiz-page.bio-quiz-live .bio-cloud-status { display: none; }
}

/* Phone practice uses the space left after the real header and learner label. */
@media (max-width: 1050px) and (max-height: 600px) and (orientation: landscape),
       (max-width: 650px) and (orientation: portrait) {
  .bio-quiz-page.bio-quiz-live { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  .bio-quiz-page.bio-quiz-live .topbar, .bio-quiz-page.bio-quiz-live .bio-session-bar { flex: none; }
  .bio-quiz-page.bio-quiz-live .topbar-in { padding: 4px 10px; min-height: 34px; }
  .bio-quiz-page.bio-quiz-live .topbar .brand { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .78rem; }
  .bio-quiz-page.bio-quiz-live .bio-session-bar { width: 100%; margin: 0 auto; padding: 2px 10px; font-size: .7rem; }
  .bio-quiz-page.bio-quiz-live #app { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: none; margin-top: 0 !important; padding: 3px 8px 8px; }
  .bio-quiz-page.bio-quiz-live .quiz-meta { position: static !important; flex: none; flex-wrap: nowrap; gap: 7px; overflow-x: auto; padding: 4px 6px !important; white-space: nowrap; }
  .bio-quiz-page.bio-quiz-live .quiz-meta > * { flex: none; }
  .bio-quiz-page.bio-quiz-live .quiz-meta .spacer { display: none; }
  .bio-quiz-page.bio-quiz-live .quiz-meta [data-action="submit"] { order: -1; }
  .bio-quiz-page.bio-quiz-live .quiz-meta .btn { min-height: 40px; padding: 6px 10px; font-size: .78rem; }
  .bio-quiz-page.bio-quiz-live .qprogress { flex: none; margin-top: 5px; max-height: 19px; overflow: hidden; }
  .bio-quiz-page.bio-quiz-live .slots.bio-quiz { flex: 1; min-height: 0; height: auto; margin-top: 5px; gap: 8px; }
  .bio-quiz-page.bio-quiz-live .bio-quiz .slot.is-ghost { display: none; }
  .bio-quiz-page.bio-quiz-live .bio-quiz .slot.is-current,
  .bio-quiz-page.bio-quiz-live .bio-quiz .slot.is-pinned { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .bio-quiz-page.bio-quiz-live .bio-quiz .qcard { padding: 12px; }
  .bio-quiz-page.bio-quiz-live .bio-quiz .pinned { padding: 12px; }
  .bio-quiz-page.bio-quiz-live .bio-quiz .pinned img,
  .bio-quiz-page.bio-quiz-live .bio-quiz .pinned svg { width: 100%; height: auto; max-height: none; }
  .bio-quiz-page.bio-quiz-live .bio-quiz .pinned.is-open img,
  .bio-quiz-page.bio-quiz-live .bio-quiz .pinned.is-open svg { width: auto; max-width: none; }
  .bio-quiz-page.bio-quiz-live .bio-quiz .nopt { min-height: 44px; }
}
@media (max-width: 1050px) and (max-height: 600px) and (orientation: landscape) {
  .bio-quiz-page.bio-quiz-live .slots.bio-quiz.has-context { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.07fr); grid-template-rows: minmax(0, 1fr); }
  .bio-quiz-page.bio-quiz-live .bio-quiz.has-context .slot.is-pinned { grid-column: 1; grid-row: 1; }
  .bio-quiz-page.bio-quiz-live .bio-quiz.has-context .slot.is-current { grid-column: 2; grid-row: 1; }
  .bio-quiz-page.bio-quiz-live .slots.bio-quiz:not(.has-context) { display: flex; flex-direction: column; }
  .bio-quiz-page.bio-quiz-live .slots.bio-quiz:not(.has-context) .slot.is-current { flex: 1; }
}
@media (max-width: 650px) and (orientation: portrait) {
  .bio-quiz-page.bio-quiz-live .bio-rotate-tip { display: block; flex: none; margin: 5px 0 0; padding: 5px 9px; border-radius: 8px; background: #e7f1df; color: #244d3a; font-size: .75rem; line-height: 1.3; }
  .bio-quiz-page.bio-quiz-live .slots.bio-quiz { display: flex; flex-direction: column; }
  .bio-quiz-page.bio-quiz-live .bio-quiz .slot.is-pinned { flex: 0 0 auto; max-height: 32dvh; }
  .bio-quiz-page.bio-quiz-live .bio-quiz .slot.is-current { flex: 1 1 auto; }
  .bio-quiz-page.bio-quiz-live .bio-quiz-nav { gap: 3px; }
  .bio-cards-page.bio-cards-active { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  .bio-cards-page.bio-cards-active .topbar, .bio-cards-page.bio-cards-active .bio-session-bar { flex: none; }
  .bio-cards-page.bio-cards-active .topbar-in { padding: 5px 10px; }
  .bio-cards-page.bio-cards-active .bio-session-bar { width: 100%; margin: 0 auto; padding: 3px 10px; font-size: .73rem; }
  .bio-cards-page.bio-cards-active #app { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: none; margin-top: 0 !important; padding: 5px 10px 8px; }
  .bio-cards-page.bio-cards-active .deck { flex: 1 1 auto; min-height: 0; height: auto; width: 100%; max-width: none; margin: 3px auto 0; }
  .bio-cards-page.bio-cards-active .fcard { overflow: auto; padding: 18px 18px 42px; }
  .bio-cards-page.bio-cards-active .fcard .front { font-size: clamp(1.3rem, 6vw, 1.9rem); }
  .bio-cards-page.bio-cards-active .fcard .back { font-size: clamp(1rem, 4vw, 1.2rem); }
  .bio-cards-page.bio-cards-active .tally { flex: none; gap: 4px; margin-top: 9px; }
  .bio-cards-page.bio-cards-active .tally > span { padding: 4px 8px; font-size: .7rem; }
  .bio-cards-page.bio-cards-active .bio-card-controls { flex: none; margin-top: 9px; gap: 7px; }
  .bio-cards-page.bio-cards-active .bio-card-controls .btn { min-height: 54px; font-size: .98rem; font-weight: 800; }
  .bio-cards-page.bio-cards-active .bio-card-controls .is-work { min-height: 38px; font-size: .8rem; }
  .bio-cards-page.bio-cards-active .bio-streak { flex: none; min-height: 0; margin: 5px 0 0; }
  .bio-cards-page.bio-cards-active .bio-sound { flex: none; margin: 2px auto 0; padding: 4px; }
}
@media (prefers-reduced-motion: reduce) { .bio-page .bio-concept { transition: none; } }
@media (prefers-reduced-motion: reduce) { .bio-reset-leaf { transition: none; } }
@media (prefers-reduced-motion: reduce) { .bio-recovery-card.no-match { animation: none; border-color: #cb461f; } }