/*
 * H5P on phones (Mo, 31 Oct 2026): one light layer, the text at nearly the full card width.
 * Every rule hangs off html.ols-h5p-phone, which mobile.js sets when the PAGE is under 768 px wide, so tablets and
 * desktop never see any of this. Not a media query: inside an iframe that would test the frame, which is only 507 px
 * wide on a 768 px screen. This file reaches both embeds: H5P.QuestionSet draws in the page, every other type in an iframe.
 */

/* The layers: nothing tinted, boxed or padded between the page card and the words. */
html.ols-h5p-phone .h5p-content,
html.ols-h5p-phone .h5p-container,
html.ols-h5p-phone .h5p-question-set,
html.ols-h5p-phone .questionset,
html.ols-h5p-phone .h5p-theme.h5p-question,
html.ols-h5p-phone .h5p-question-main-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.ols-h5p-phone .questionset,
html.ols-h5p-phone .question-container {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
html.ols-h5p-phone .h5p-question-introduction {
  margin: 4px 0 10px !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
}
html.ols-h5p-phone .h5p-question-introduction > p {
  margin: 0 !important;
}
html.ols-h5p-phone .h5p-question-content {
  margin: 0 !important;
  padding: 0 !important;
}
html.ols-h5p-phone .h5p-theme .h5p-question-evaluation-container,
html.ols-h5p-phone .h5p-theme .h5p-question-buttons {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html.ols-h5p-phone .h5p-theme .h5p-question-feedback,
html.ols-h5p-phone .h5p-theme .h5p-question-explanation-container,
html.ols-h5p-phone .h5p-theme .h5p-question-scorebar-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html.ols-h5p-phone .h5p-theme .h5p-navigation,
html.ols-h5p-phone .h5p-no-frame .questionset .h5p-navigation {
  padding: 8px 0 !important;
  background: transparent !important;
  border: 0 !important;
}

html.ols-h5p-phone .h5p-theme .h5p-progress-dots-container {
  background: transparent !important;
}

/* Fill in the Blanks: a sentence, with boxes in it. mobile.js sizes each box to its answer. */
html.ols-h5p-phone .h5p-blanks .h5p-question-content,
html.ols-h5p-phone .h5p-no-frame > .h5p-theme.h5p-blanks > .h5p-question-main-content > .h5p-question-content {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
html.ols-h5p-phone .h5p-blanks .h5p-question-content > div,
html.ols-h5p-phone .h5p-blanks .h5p-question-content p {
  font-size: 16px !important;
  line-height: 1.5 !important;
  margin: 0 0 8px !important;
}
html.ols-h5p-phone .h5p-blanks .h5p-input-wrapper {
  max-width: 100%;
  margin: 2px 0;
}
html.ols-h5p-phone .h5p-blanks .h5p-text-input {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 44px !important;
  max-width: 100%;
  font-size: 16px !important;
  padding: 0 6px !important;
}

/* Drag the Words: the same sentence, and room for a finger between its lines. */
html.ols-h5p-phone .h5p-drag-text .h5p-drag-droppable-words-container {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
html.ols-h5p-phone .h5p-drag-text .h5p-drag-droppable-words {
  font-size: 16px !important;
  line-height: 42px !important;
}

/* Choice rows, sorting rows and summaries: their own tint is the one layer, so they only give back side room. */
html.ols-h5p-phone .h5p-theme .h5p-alternative-container,
html.ols-h5p-phone .h5p-theme .h5p-sc-alternative,
html.ols-h5p-phone .h5p-theme li.summary-claim-unclicked {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
html.ols-h5p-phone .summary-evaluation-content {
  padding-right: 0 !important;
}
html.ols-h5p-phone .h5p-essay-input-field-message-wrapper {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Dialog Cards */
html.ols-h5p-phone .h5p-dialogcards-title-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
}
html.ols-h5p-phone .h5p-dialogcards-cardwrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
}
html.ols-h5p-phone .h5p-dialogcards-card-text-wrapper {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
html.ols-h5p-phone .h5p-dialogcards-card-text-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html.ols-h5p-phone .h5p-dialogcards-card-text-inner-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Buttons: pills, with a thumb-sized target. */
html.ols-h5p-phone .h5p-theme-button,
html.ols-h5p-phone .h5p-joubelui-button {
  border-radius: 999px !important;
  min-height: 44px !important;
}

/* After Check, H5P squeezes these down to icon circles beside the score bar. On a phone: score above, labelled pills below. */
html.ols-h5p-phone .h5p-question-evaluation-container.evaluation-mode {
  flex-wrap: wrap !important;
  row-gap: 8px;
}
html.ols-h5p-phone .h5p-question-evaluation-container.evaluation-mode .h5p-question-buttons {
  flex: 1 1 100% !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
}
html.ols-h5p-phone .h5p-question-buttons .h5p-theme-button,
html.ols-h5p-phone .h5p-question-buttons .h5p-joubelui-button {
  flex: 0 0 auto !important;
  white-space: nowrap;
}
html.ols-h5p-phone .h5p-theme-check .h5p-theme-label,
html.ols-h5p-phone .h5p-theme-retry .h5p-theme-label,
html.ols-h5p-phone .h5p-theme-show-solutions .h5p-theme-label {
  display: inline !important;
}
html.ols-h5p-phone .h5p-joubelui-button.truncated {
  width: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
html.ols-h5p-phone .h5p-joubelui-button.truncated::after {
  content: attr(data-tooltip);
  margin-left: 6px;
  font-size: 15px;
}