/* Phone navigation and readable lesson cards. Desktop keeps the full matrix. */
.mobile-nav { display: none; }
.lesson-row-topic { display: none; }
@media screen and (max-width: 650px) {
  html { scroll-padding-top: 132px; }
  header { gap: 12px; padding-inline: 16px; }
  header a { min-height: 44px; display: flex; align-items: center; white-space: nowrap; }
  .mobile-nav { display: flex; position: sticky; top: 60px; z-index: 5; overflow-x: auto; gap: 8px; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
  .mobile-nav a { flex: 0 0 auto; display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 8px; background: #f0edff; color: #493478; font-size: 15px; font-weight: 650; }
  .mobile-nav a:nth-child(2) { display: flex; }
  main, main section, .matrix-toolbar > label, .studio summary > div { min-width: 0; }
  h1 span { white-space: normal; }
  p, li, a, h2, h3, .lesson-evidence { overflow-wrap: anywhere; }
  .btn, .toolbar button, .matrix-actions button, .lesson-import, #lesson-close { min-height: 44px; }
  input, select, textarea, .pace select { font-size: 16px !important; }
  .matrix-scroll { max-height: none; overflow: visible; border: 0; background: transparent; }
  .lesson-table, .lesson-table tbody, .lesson-table tr, .lesson-table td { display: block; width: 100% !important; min-width: 0; }
  .lesson-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .curriculum-page #lessons .matrix-scroll { border: 0; }
  .curriculum-page #lessons .lesson-table tr, .curriculum-page #lessons .lesson-table tr:hover { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 22px 0; margin: 0; }
  .curriculum-page .lesson-table td { padding: 6px 0 0; border: 0; }
  .lesson-table td[data-label="Topic"] { display: none; }
  .lesson-table .lesson-row-topic { display: inline; }
  .lesson-table td:first-child { padding-top: 0; }
  .lesson-open { display: block; width: 100%; }
  .lesson-table small { display: block; margin: 0 0 6px; }
  .matrix-actions > button, .matrix-actions > label { flex: 1 1 140px; text-align: center; }
  #lesson-dialog { width: calc(100% - 16px); max-width: none; max-height: calc(100dvh - 24px); padding: 18px; border-radius: 14px; overscroll-behavior: contain; }
  #lesson-close { position: sticky; top: 0; z-index: 2; box-shadow: 0 2px 8px #0001; }
  #lesson-detail > .eyebrow { clear: both; padding-top: 12px; }
  #lesson-dialog h2 { font-size: 28px; }
  #lesson-dialog p, #lesson-dialog li { font-size: 17px; }
  #lesson-dialog ul { padding-left: 22px; }
  .discovery-card { padding: 20px; }
  .studio summary { grid-template-columns: 34px minmax(0,1fr) 16px; gap: 10px; }
  .studio-body { padding-inline: 18px; }
  .sources a { padding-block: 5px; }
  footer { flex-direction: column; }
}
@media screen and (max-width: 360px) {
  header b { font-size: 13px; }
  header a { font-size: 11px; }
  header a span { margin-left: 5px; }
  hero { padding-inline: 20px; }
  .stat-strip { padding: 15px; gap: 16px; }
}

/* Briefing first. Practice, teaching and sharing follow at the learner's pace. */
.lesson-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.lesson-guide > div { padding: 20px; border: 1px solid #ddd7ec; background: #f0ebfb; border-radius: 12px; }
.lesson-guide strong { font-size: 19px; }
.lesson-guide p { margin: 8px 0 0; font-size: 16px; }
#lesson-dialog { padding: 0; overflow: hidden; max-height: 90vh; max-height: 90dvh; }
#lesson-dialog[open] { display: flex; flex-direction: column; }
.lesson-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; flex: 0 0 auto; border-bottom: 1px solid #e1ddea; background: #fcfcff; }
.lesson-dialog-bar > span { font-size: 11px; font-weight: 750; letter-spacing: .1em; color: #6b5d87; }
#lesson-close { float: none; position: static; flex: 0 0 auto; min-height: 44px; box-shadow: none; }
.lesson-scroll { padding: 24px 30px 30px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#lesson-heading:focus { outline: none; }
#lesson-dialog .lesson-intro { color: #62616c; font-size: 16px; }
.lesson-path { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.lesson-path span { padding: 6px 10px; border-radius: 7px; background: #ece6fb; color: #574478; font-size: 13px; font-weight: 650; }
.lesson-key-points { padding-left: 23px; }
.lesson-key-points li { margin: 12px 0; padding-left: 4px; }
.lesson-insight, .lesson-fact, .lesson-takeaway { padding: 20px; border-radius: 12px; margin: 22px 0; }
.lesson-insight { background: #ece6fb; border-left: 4px solid #9a7bc6; }
.lesson-takeaway { background: #eff8d9; border-left: 4px solid #a7ca58; }
.lesson-fact { background: #fff3d7; border: 1px solid #edddb1; }
#lesson-dialog .lesson-insight h3, #lesson-dialog .lesson-takeaway h3, #lesson-dialog .lesson-fact h3 { margin: 0 0 8px; }
#lesson-dialog .lesson-fact .eyebrow { margin-bottom: 10px; }
#lesson-dialog .lesson-insight p, #lesson-dialog .lesson-takeaway p, #lesson-dialog .lesson-fact p { margin: 8px 0 0; }
#lesson-dialog .lesson-fact a { display: inline-block; margin-top: 12px; font-size: 15px; }
#lesson-dialog .lesson-example-label { font-size: 12px; color: #777281; margin: 0; text-transform: uppercase; letter-spacing: .05em; }
.lesson-step { border-top: 1px solid #dfdbe7; padding: 2px 0; }
.lesson-step summary { padding: 17px 0; min-height: 44px; cursor: pointer; font-size: 18px; font-weight: 700; }
#lesson-dialog .lesson-step li { margin: 14px 0; }
#lesson-dialog .lesson-bookmark { font-size: 14px; color: #6c6675; }
@media screen and (max-width: 650px) {
  .lesson-guide { grid-template-columns: 1fr; }
  #lesson-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 24px); padding: 0; }
  .lesson-dialog-bar { padding: 10px 16px; }
  .lesson-scroll { padding: 18px; }
  #lesson-detail > .eyebrow { padding-top: 0; }
  .lesson-insight, .lesson-fact, .lesson-takeaway { padding: 16px; }
  .lesson-step summary { font-size: 17px; }
}
/* Applied judgment and capability evidence. */
.practice-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0 36px}
.practice-card{background:white;border:1px solid #dddde7;border-radius:14px;padding:22px;min-width:0;margin-bottom:16px}
.practice-routes .practice-card{margin:0}
.practice-card summary{cursor:pointer;min-height:44px;list-style:none}
.practice-card summary::before{content:'+';float:right;font-size:24px;color:#72608f;margin-left:10px}
.practice-card[open] summary::before{content:'−'}
.practice-card h3{font-size:23px;line-height:1.3;margin:8px 0 12px}
.practice-card h4{font-size:20px;margin:24px 0 8px}
.practice-card summary span,.practice-card small{font-size:14px;color:#675581}
.practice-card li{margin:12px 0}
.practice-card textarea,.mastery-step textarea{display:block;width:100%;max-width:100%;font:inherit;padding:12px;border:1px solid #bcb6cc;border-radius:8px;margin:10px 0 16px;box-sizing:border-box}
.practice-card button{min-height:44px;padding:12px 16px;white-space:normal;text-align:left}
.practice-card a{overflow-wrap:anywhere}
.mastery-overview,#lesson-mastery{background:#eff5df;border:1px solid #d8e2c1;border-radius:14px;padding:22px;margin:26px 0}
#lesson-mastery h3{margin-top:0}
.mastery-step{padding:12px 0;border-top:1px solid #d0dab9}
.mastery-step label{display:flex!important;gap:12px;align-items:flex-start}
.mastery-step input{width:22px!important;height:22px;flex:0 0 22px;margin-top:4px}
.mastery-step p{font-size:16px;margin:8px 0}
.mastery-step textarea{background:#fff;font-size:16px}
#mastery-count,#case-save-status{font-size:15px;color:#5d6264}
@media(max-width:650px){.practice-routes{grid-template-columns:1fr}.practice-card{padding:18px}.practice-card h3{font-size:22px}#lesson-mastery{padding:16px}}