/* Explicit phone layout: children can use recall; parent/trial show device guidance.
   Keep the existing common --space for panels, controls and their spacing. */
.mobile-menu-back,.phone-device-notice,.phone-recall-menu{display:none}
@media (max-width:767px){
  .phone-unavailable>:not(.phone-device-notice){display:none!important}
  .phone-unavailable>.phone-device-notice{display:block;margin:var(--space);color:#20382d;line-height:1.7}
  .phone-unavailable dialog::backdrop{display:none}
  body.child-portal .app{display:block;max-width:none}
  .child-portal .left-rail{position:static;width:100%;height:calc(100dvh - 2 * var(--space));overflow:hidden;gap:var(--space)}
  .child-portal .masthead{display:none}
  .child-portal .phone-recall-menu{display:grid;gap:0}
  .child-portal .phone-recall-menu strong{padding:calc(var(--space) / 2) var(--space)}
  .child-portal .phone-recall-menu button{padding-inline-start:calc(2 * var(--space))}
  .child-portal .left-rail>.sidebar{flex:1;overflow-y:auto}
  .child-portal .nav>button,
  .child-portal .nav>hr:not(:first-child){display:none}
  .child-portal .app:not([data-mobile-view="quiz"])>.main,
  .child-portal .app[data-mobile-view="quiz"]>.left-rail{display:none}
  .child-portal .main>.view:not([data-page="quiz"]){display:none}
  /* One set of quiz/answer/buttons is laid out as an immersive phone screen.
     Only the stable control wrappers use display:contents; quiz boxes stay real. */
  html.phone-child-portal,html.phone-child-portal body{background:var(--exam-board-bg)!important}
  .child-portal .view[data-page="quiz"].active{display:flex;flex-direction:column;min-height:calc(100dvh - 2 * var(--space));height:calc(100dvh - 2 * var(--space));gap:var(--space)}
  .child-portal .view[data-page="quiz"]>.heading-row,
  .child-portal .recall-subject-panel,.child-portal #recall-panel-title,.child-portal #recall-chart{display:none}
  .child-portal .view[data-page="quiz"]>.content-stack{display:flex;flex-direction:column;flex:1;min-height:0}
  .child-portal #recall-panel{display:grid;flex:1;min-height:0;grid-template-rows:minmax(min-content,1fr) auto auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"quiz quiz" "answer answer" "incorrect correct";gap:var(--space);padding:0;border:0;background:transparent;box-shadow:none}
  .child-portal .recall-header,.child-portal .recall-actions{display:contents}
  /* Keep a real, width-constrained box across hidden/loading updates.
     Also clear the desktop two-line scroll box so no line can be clipped. */
  .child-portal .recall-body{grid-area:quiz;display:block;height:auto;overflow:visible;scrollbar-gutter:auto;min-width:0;align-self:start}
  .child-portal #recall-content{display:block;position:static;min-width:0;width:100%}
  .child-portal #recall-quiz,.child-portal #recall-loading{min-height:0;margin:0}
  /* The quiz stays at the top of its flexible row; answer and grading stay below it. */
  .child-portal #recall-quiz,.child-portal #recall-loading{align-self:start}
  .child-portal #recall-quiz{width:100%;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}
  .child-portal #recall-reveal,.child-portal #recall-answer{grid-area:answer;min-height:48px}
  .child-portal #recall-reveal{width:100%}
  /* Balance space above/below the revealed answer; long quizzes keep their
     min-content height rather than overlap the answer. Grading stays at bottom. */
  .child-portal #recall-panel[data-revealed="true"]{grid-template-rows:minmax(min-content,1fr) auto minmax(0,1fr) auto;grid-template-areas:"quiz quiz" "answer answer" ". ." "incorrect correct"}
  .child-portal #recall-panel[data-revealed="true"] #recall-reveal{display:none}
  .child-portal #recall-answer{display:flex;align-items:center;margin:0;text-align:left}
  .child-portal #recall-answer-text{font-size:var(--recall-text-size);padding:0;line-height:1.8}
  .child-portal .recall-answer-line{text-decoration:none}
  .child-portal #recall-incorrect{grid-area:incorrect}
  .child-portal #recall-correct{grid-area:correct}
  .child-portal #recall-retry{grid-area:auto;grid-column:1/-1}
  .child-portal .recall-actions button{white-space:normal}
  .child-portal .view .mobile-menu-back{display:inline-flex;align-self:flex-start;align-items:center;justify-content:center;width:44px;min-height:44px;padding:0;margin:0;border:0;background:transparent;box-shadow:none;font-size:22px;font-weight:400;line-height:1;color:var(--muted);opacity:.65}
}