/* ChordWalk foundation-family adapter.
   Layout rules live here; page-local CSS is retained only for musical diagrams. */

html.cwFoundationFamily body {
  height: auto !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  margin: 0 0 0 248px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--cw-bg) !important;
  color: var(--cw-text) !important;
  font-family: var(--cw-font) !important;
}

html.cwFoundationFamily .app {
  display: block !important;
  min-width: 0 !important;
  min-height: 100vh !important;
}

html.cwFoundationFamily .app > .side,
html.cwFoundationFamily .cwkUnifiedSide { display: none !important; }

html.cwFoundationFamily .main {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  padding: 10px 14px 42px !important;
  overflow: visible !important;
}

html.cwFoundationFamily .wrap {
  display: grid !important;
  width: min(100%, 1320px) !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  gap: 12px !important;
  overflow: visible !important;
}

html.cwFoundationFamily .hero,
html.cwFoundationFamily .card,
html.cwFoundationFamily .formulaBox,
html.cwFoundationFamily .resultBox,
html.cwFoundationFamily .footer,
html.cwFoundationFamily .haKeyMessage,
html.cwFoundationFamily .haAccidentalProgress {
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: var(--cw-radius) !important;
  background: var(--cw-surface) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html.cwFoundationFamily .card { padding: 16px !important; }
html.cwFoundationFamily .lesson { display: none !important; }
html.cwFoundationFamily h1,
html.cwFoundationFamily h2,
html.cwFoundationFamily h3 { color: var(--cw-text) !important; font-family: inherit !important; }
html.cwFoundationFamily h1 { margin: 5px 0 7px !important; font-size: clamp(2rem, 3vw, 2.8rem) !important; line-height: 1.04 !important; letter-spacing: -.04em !important; }
html.cwFoundationFamily .lead,
html.cwFoundationFamily .copy { color: var(--cw-text-soft) !important; font-size: .92rem !important; line-height: 1.55 !important; }
html.cwFoundationFamily .eyebrow,
html.cwFoundationFamily .card > h2,
html.cwFoundationFamily .card > h3 {
  color: var(--cw-blue) !important;
  font-size: .72rem !important;
  line-height: 1.35 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
html.cwFoundationFamily .big { border-radius: 7px !important; font-size: .94rem !important; line-height: 1.45 !important; }
html.cwFoundationFamily b,
html.cwFoundationFamily strong { font-weight: 720 !important; }

html.cwFoundationFamily button,
html.cwFoundationFamily select,
html.cwFoundationFamily .btn {
  min-height: 38px !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
}
html.cwFoundationFamily .btn.primary,
html.cwFoundationFamily .btn.good {
  border-color: #f1f4f9 !important;
  background: #f1f4f9 !important;
  color: #09101b !important;
  box-shadow: none !important;
}
html.cwFoundationFamily .btn.active {
  border-color: rgba(182,165,255,.55) !important;
  background: linear-gradient(135deg,rgba(78,122,181,.55),rgba(104,82,159,.46)) !important;
  color: #fff !important;
}
html.cwFoundationFamily .controls { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; }
html.cwFoundationFamily .cwTransportIcon { width: auto !important; min-width: 0 !important; padding: 8px 12px !important; font-size: .82rem !important; }
html.cwFoundationFamily .cwTransportIcon::before,
html.cwFoundationFamily .cwTransportIcon::after { display: none !important; content: none !important; }

/* Compact, content-driven lesson introduction. */
html.cwFoundationFamily .haIntroGrid {
  display: grid !important;
  grid-template-columns: minmax(245px,.9fr) minmax(320px,1.35fr) minmax(190px,.65fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  height: auto !important;
  padding: 10px !important;
  overflow: visible !important;
}
html.cwFoundationFamily .haTitlePanel,
html.cwFoundationFamily .haIntroPanel,
html.cwFoundationFamily .haPathDisclosure {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--cw-border);
  border-radius: 8px;
  background: #090e15;
}
html.cwFoundationFamily .haTitlePanel { display: flex; flex-direction: column; justify-content: center; }
html.cwFoundationFamily .haTitlePanel h1 { overflow-wrap: anywhere; }
html.cwFoundationFamily .haTitlePanel > .big { display: none !important; }
html.cwFoundationFamily .haIntroPanel { display: flex; flex-direction: column; justify-content: center; }
html.cwFoundationFamily .haIntroPanel > b { margin-bottom: 7px; color: var(--cw-violet-soft); font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; }
html.cwFoundationFamily .haIntroPanel > span { color: var(--cw-text); font-size: .92rem; line-height: 1.48; }
html.cwFoundationFamily .haPathDisclosure { align-self: stretch; }
html.cwFoundationFamily .haPathDisclosure summary { display: flex; justify-content: space-between; gap: 8px; color: var(--cw-text); font-size: .83rem; font-weight: 720; cursor: pointer; list-style: none; }
html.cwFoundationFamily .haPathDisclosure summary::-webkit-details-marker { display: none; }
html.cwFoundationFamily .haPathDisclosure summary::after { content: '+'; color: var(--cw-muted); }
html.cwFoundationFamily .haPathDisclosure[open] summary::after { content: '−'; }
html.cwFoundationFamily .haPathDisclosure summary span { color: var(--cw-muted); font-size: .7rem; font-weight: 550; }
html.cwFoundationFamily .haGuideSteps { margin: 12px 0 0; padding: 0 0 0 19px; color: var(--cw-text-soft); }
html.cwFoundationFamily .haGuideSteps li { margin: 7px 0; padding-left: 3px; font-size: .78rem; line-height: 1.35; }

/* Build and quiz: activity beside the keyboard, theory after the task. */
html.cwFoundationFamily .haStackedLesson {
  grid-template-columns: minmax(340px,.82fr) minmax(520px,1.18fr) !important;
  align-items: start !important;
}
html.cwFoundationFamily .haStackedLesson > .haIntroGrid { grid-column: 1 / -1 !important; grid-row: auto !important; }
html.cwFoundationFamily .haStackedLesson > .haActivity { grid-column: 1 !important; grid-row: auto !important; display: grid !important; gap: 12px !important; min-width: 0 !important; }
html.cwFoundationFamily .haStackedLesson > .haKeyboardArea { grid-column: 2 !important; grid-row: auto !important; display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; min-width: 0 !important; }
html.cwFoundationFamily .haActivity > .card,
html.cwFoundationFamily .haKeyboardArea > .card { height: auto !important; min-height: 0 !important; overflow: visible !important; }
html.cwFoundationFamily .haKeyboardArea > .card:first-child { order: 1; }
html.cwFoundationFamily .haKeyboardArea > .card:nth-child(2) { order: 2; }
html.cwFoundationFamily .haKeyboardArea > .card:nth-child(3) { order: 3; }
html.cwFoundationFamily .haActivity .infoGrid { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
html.cwFoundationFamily .haActivity .info { min-width: 0 !important; padding: 12px !important; border-radius: 7px !important; }
html.cwFoundationFamily .haActivity .formulaStrip,
html.cwFoundationFamily .haActivity .scaleRow { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 5px !important; min-width: 0 !important; }
html.cwFoundationFamily .haActivity .scaleRow { grid-template-columns: repeat(8,minmax(0,1fr)) !important; }
html.cwFoundationFamily .haActivity .token,
html.cwFoundationFamily .haActivity .noteBox { min-width: 0 !important; overflow: hidden !important; }
html.cwFoundationFamily .testBox { margin-top: 10px !important; padding: 12px !important; border-radius: 7px !important; }
html.cwFoundationFamily .summary { margin-top: 10px !important; padding: 12px !important; border-radius: 7px !important; }

html.cwFoundationFamily .haKeyboardArea .keyboard {
  width: 100% !important;
  height: clamp(275px,28vw,380px) !important;
  min-height: 275px !important;
  margin-top: 8px !important;
  overflow: hidden !important;
  border-radius: 9px !important;
}
html.cwFoundationFamily .keyboardFormulaStrip,
html.cwFoundationFamily .haKeyboardTheory {
  display: grid !important;
  grid-template-columns: repeat(8,minmax(0,1fr)) !important;
  gap: 4px !important;
  position: relative !important;
  height: auto !important;
  min-height: 82px !important;
  margin: 8px 0 !important;
  padding: 7px !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: 8px !important;
  background: #080d14 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}
html.cwFoundationFamily .haTheoryPoint {
  position: static !important;
  width: auto !important;
  min-width: 64px !important;
  transform: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
html.cwFoundationFamily .haTheoryPoint span,
html.cwFoundationFamily .haTheoryPoint b,
html.cwFoundationFamily .haTheoryPoint small { display: block !important; overflow: hidden !important; text-align: center !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html.cwFoundationFamily .haTheoryPoint span { color: var(--cw-blue) !important; font-size: .65rem !important; }
html.cwFoundationFamily .haTheoryPoint b { margin: 4px 0 !important; color: var(--cw-text) !important; font-size: 1rem !important; }
html.cwFoundationFamily .haTheoryPoint small { color: var(--cw-muted) !important; font-size: .62rem !important; }

/* Quiz controls are allowed to wrap instead of being squeezed into one row. */
html.cwFoundationFamily.ha-quiz .testTabs { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 6px !important; }
html.cwFoundationFamily .testTabs .btn { white-space: normal !important; }
html.cwFoundationFamily #formulaRow,
html.cwFoundationFamily .formulaRow { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 5px !important; min-width: 0 !important; }
html.cwFoundationFamily .choiceRow { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
html.cwFoundationFamily .feedback { max-height: none !important; min-height: 0 !important; overflow: visible !important; }
html.cwFoundationFamily .haInlineScore { position: static !important; display: block !important; margin-top: 8px !important; }
html.cwFoundationFamily.ha-quiz .haIntroGrid {
  grid-template-columns: minmax(0,1fr) minmax(250px,.45fr) !important;
  align-items: start !important;
}
html.cwFoundationFamily.ha-quiz .haIntroPanel.message,
html.cwFoundationFamily.ha-quiz .haTitlePanel .lead { display: none !important; }
html.cwFoundationFamily.ha-quiz .haTitlePanel { min-height: 96px !important; }
html.cwFoundationFamily.ha-quiz .haPathDisclosure { grid-column: 2 !important; align-self: start !important; }
html.cwFoundationFamily .haQuizSetup { padding: 0 !important; overflow: hidden !important; }
html.cwFoundationFamily .haQuizOptions { min-width: 0 !important; }
html.cwFoundationFamily .haQuizOptions > summary {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 52px !important;
  padding: 12px 14px !important;
  color: var(--cw-text) !important;
  cursor: pointer !important;
  list-style: none !important;
}
html.cwFoundationFamily .haQuizOptions > summary::-webkit-details-marker { display: none !important; }
html.cwFoundationFamily .haQuizOptions > summary::after { content: '+'; color: var(--cw-muted); }
html.cwFoundationFamily .haQuizOptions[open] > summary::after { content: '−'; }
html.cwFoundationFamily .haQuizOptions > summary span { font-size: .86rem !important; font-weight: 720 !important; }
html.cwFoundationFamily .haQuizOptions > summary small { color: var(--cw-muted) !important; font-size: .7rem !important; font-weight: 550 !important; }
html.cwFoundationFamily .haQuizOptionsBody { padding: 0 14px 14px !important; border-top: 1px solid var(--cw-border) !important; }
html.cwFoundationFamily .haQuizQuestion { padding: 15px !important; }
html.cwFoundationFamily .haQuizQuestion .question { margin-top: 4px !important; }
html.cwFoundationFamily .haQuizQuestion #choices { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
html.cwFoundationFamily .haQuizQuestion #choices > .choiceRow { order: 1 !important; }
html.cwFoundationFamily .haQuizQuestion #choices > .cluePanel { order: 2 !important; margin-top: 4px !important; margin-bottom: 0 !important; padding: 8px 10px !important; }
html.cwFoundationFamily .haQuizQuestion #choices > .cluePanel .copy { display: none !important; }
html.cwFoundationFamily .haQuizActionRow { display: flex !important; justify-content: flex-end !important; margin: 10px 0 0 !important; }
html.cwFoundationFamily .haQuizCheck { min-width: 132px !important; border-color: #f1f4f9 !important; background: #f1f4f9 !important; color: #09101b !important; }
html.cwFoundationFamily .haQuizProgress { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; gap: 7px 12px !important; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid var(--cw-border) !important; }
html.cwFoundationFamily .haQuizProgress .progress { grid-column: 1 !important; width: 100% !important; }
html.cwFoundationFamily .haQuizProgress .copy { grid-column: 1 !important; margin: 0 !important; }
html.cwFoundationFamily .haQuizProgress .score { grid-column: 2 !important; grid-row: 1 / span 2 !important; margin: 0 !important; font-size: 1rem !important; white-space: nowrap !important; }

/* Tonic values: selection, keyboard, then optional supporting cards. */
html.cwFoundationFamily.ha-tonic .wrap { display: grid !important; grid-template-rows: auto !important; }
html.cwFoundationFamily.ha-tonic .grid { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; gap: 12px !important; }
html.cwFoundationFamily .haTonicSelect,
html.cwFoundationFamily .haTonicKeyboard { grid-column: 1 / -1 !important; grid-row: auto !important; height: auto !important; overflow: visible !important; }
html.cwFoundationFamily .haTonicKeyboard { display: block !important; }
html.cwFoundationFamily .haTonicKeyboard .keyboard { width: 100% !important; height: clamp(280px,30vw,400px) !important; min-height: 280px !important; }
html.cwFoundationFamily .haAlignedTonicStrip { display: grid !important; grid-template-columns: repeat(8,minmax(0,1fr)) !important; gap: 4px !important; margin: 8px 0 !important; padding: 0 !important; }
html.cwFoundationFamily .haTonicContext1,
html.cwFoundationFamily .haTonicContext2 { grid-column: auto !important; grid-row: auto !important; display: block !important; height: auto !important; overflow: visible !important; }
html.cwFoundationFamily .haTonicContext3,
html.cwFoundationFamily .haTonicContext4 { display: block !important; }
html.cwFoundationFamily .haTonicQuiz { border-color: var(--cw-border-strong) !important; }
html.cwFoundationFamily .haTonicQuiz .checkBtns { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; }
html.cwFoundationFamily .haTonicQuiz .choice { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 72px !important; min-height: 42px !important; }

/* Accidental-order lessons: simple vertical learning sequence. */
html.cwFoundationFamily.ha-sharp .wrap,
html.cwFoundationFamily.ha-flat .wrap { display: grid !important; grid-template-rows: auto !important; gap: 12px !important; }
html.cwFoundationFamily .tRow { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 6px !important; }
html.cwFoundationFamily .tBtn { width: auto !important; height: auto !important; min-height: 94px !important; padding: 10px 5px !important; border-radius: 7px !important; }
html.cwFoundationFamily .haAccidentalProgress { display: grid !important; grid-template-columns: minmax(210px,.55fr) minmax(0,1.45fr) !important; gap: 8px !important; padding: 8px !important; }
html.cwFoundationFamily .haProgressTitle { display: flex; flex-direction: column; justify-content: center; padding: 12px; border-radius: 7px; background: #090e15; }
html.cwFoundationFamily .haProgressTitle b { color: var(--cw-text) !important; font-size: .88rem !important; }
html.cwFoundationFamily .haProgressTitle span { margin-top: 4px; color: var(--cw-muted) !important; font-size: .75rem !important; line-height: 1.4 !important; }
html.cwFoundationFamily .haProgressRow { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 5px !important; }
html.cwFoundationFamily.ha-flat .haProgressRow { grid-template-columns: repeat(6,minmax(0,1fr)) !important; }
html.cwFoundationFamily .haProgressStep { min-width: 0; min-height: 64px; padding: 6px 3px; border: 1px solid var(--cw-border); border-radius: 6px; background: #080d14; color: var(--cw-text); }
html.cwFoundationFamily .haProgressStep small,
html.cwFoundationFamily .haProgressStep span { display: block; color: var(--cw-muted); font-size: .65rem; }
html.cwFoundationFamily .haProgressStep b { display: block; margin: 2px 0; font-size: 1rem; }
html.cwFoundationFamily .haProgressStep.previous { border-color: rgba(143,197,255,.55); background: rgba(83,132,194,.18); }
html.cwFoundationFamily .haProgressStep.current { border-color: var(--cw-yellow); background: rgba(245,216,99,.12); }
html.cwFoundationFamily .keyboardShell { height: auto !important; padding: 12px !important; }
html.cwFoundationFamily .viewport { min-height: 300px !important; padding-top: 34px !important; overflow-x: auto !important; overflow-y: visible !important; }
html.cwFoundationFamily .result { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
html.cwFoundationFamily .resultBox { padding: 12px !important; }
html.cwFoundationFamily .rule,
html.cwFoundationFamily .rectReminder { display: block !important; }
html.cwFoundationFamily .footer,
html.cwFoundationFamily .haKeyMessage { padding: 12px 14px !important; color: var(--cw-text-soft) !important; font-size: .84rem !important; line-height: 1.45 !important; }

@media (max-width: 1120px) {
  html.cwFoundationFamily .haIntroGrid { grid-template-columns: minmax(220px,.8fr) minmax(0,1.2fr) !important; }
  html.cwFoundationFamily .haPathDisclosure { grid-column: 1 / -1; }
  html.cwFoundationFamily .haStackedLesson { grid-template-columns: minmax(310px,.78fr) minmax(430px,1.22fr) !important; }
  html.cwFoundationFamily .haAccidentalProgress { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  html.cwFoundationFamily body,
  html.cwFoundationFamily body.cwViewportFoundation.cwViewportDense.cwkUnifiedMenu { margin-left: 0 !important; }
  html.cwFoundationFamily .main { padding: 8px 12px 36px !important; }
  html.cwFoundationFamily .haIntroGrid,
  html.cwFoundationFamily .haStackedLesson,
  html.cwFoundationFamily.ha-tonic .grid { grid-template-columns: 1fr !important; }
  html.cwFoundationFamily .haIntroGrid > *,
  html.cwFoundationFamily .haStackedLesson > .haIntroGrid,
  html.cwFoundationFamily .haStackedLesson > .haActivity,
  html.cwFoundationFamily .haStackedLesson > .haKeyboardArea,
  html.cwFoundationFamily .haTonicSelect,
  html.cwFoundationFamily .haTonicKeyboard { grid-column: 1 !important; }
  html.cwFoundationFamily.ha-quiz .haIntroGrid { grid-template-columns: minmax(0,1fr) !important; }
  html.cwFoundationFamily.ha-quiz .haPathDisclosure { grid-column: 1 !important; }
}

@media (max-width: 640px) {
  html.cwFoundationFamily .haIntroGrid { padding: 8px !important; }
  html.cwFoundationFamily.ha-quiz .testTabs { grid-template-columns: 1fr 1fr !important; }
  html.cwFoundationFamily .haActivity .formulaStrip,
  html.cwFoundationFamily #formulaRow,
  html.cwFoundationFamily .formulaRow { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  html.cwFoundationFamily .haActivity .scaleRow,
  html.cwFoundationFamily .haAlignedTonicStrip { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  html.cwFoundationFamily .tRow { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  html.cwFoundationFamily .haProgressRow { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  html.cwFoundationFamily .result { grid-template-columns: 1fr !important; }
  html.cwFoundationFamily .haTonicKeyboard .belowRules { grid-template-columns: minmax(0,1fr) !important; }
  html.cwFoundationFamily .haTonicKeyboard .rule { min-width: 0 !important; }
  html.cwFoundationFamily .haTonicKeyboard .seq { max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; padding-bottom: 6px !important; }
  html.cwFoundationFamily .haQuizOptions > summary { grid-template-columns: 1fr auto !important; }
  html.cwFoundationFamily .haQuizOptions > summary small { display: none !important; }
  html.cwFoundationFamily .haQuizActionRow .haQuizCheck { width: 100% !important; }
  html.cwFoundationFamily .haQuizProgress { grid-template-columns: 1fr !important; }
  html.cwFoundationFamily .haQuizProgress .score { grid-column: 1 !important; grid-row: auto !important; }
}