/* Pass 4 · 24.1.33 · shared small-screen presentation only.
 * No root overflow hiding, fixed body, transform scaling or session DOM changes.
 * Existing native controls, hidden states and route scroll ownership stay intact.
 */
body.otoprep-app :where(.otoprep-card, .otoprep-card__body, .otoprep-main,
  .opwe, .opwe-shell, .opwe-workspace, .opwe-question, .opwe-panel,
  .qm235650-resume-notice, .qm235656-save-toolbar, .qm24131-sync){
  min-inline-size:0;
  max-inline-size:100%;
}
body.otoprep-app :where(h1,h2,h3,h4,p,blockquote,figcaption,.otoprep-note,
  .opwe-prose,.opwe-instructions,.qm235650-save-status,.qm235656-exit-status){
  overflow-wrap:anywhere;
  word-break:normal;
}
/* Remove compressed letter spacing on normal reading text, not brand headings. */
body.otoprep-app :where(.opwe-prose,.opwe-instructions,.opwe-editor-part textarea,
  .qm235650-save-status,.qm235656-exit-status){letter-spacing:normal;}
body.otoprep-app :where(.otoprep-actions,.opwe-button-row,.opwe-navigation,
  .qm235656-save-toolbar){gap:.625rem;}
body.otoprep-app :where(.otoprep-btn,.opwe button,.qm235656-save-toolbar button,
  .qm235650-resume-notice button){
  box-sizing:border-box;
  max-inline-size:100%;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  line-height:1.4;
  min-height:44px;
}
body.otoprep-app :where(.otoprep-card,.opwe,.qm235656-save-toolbar) :where(
  input[type="text"],input[type="search"],input[type="email"],input[type="url"],
  input[type="number"],input[type="date"],input[type="datetime-local"],select,textarea){
  min-inline-size:0;
  max-inline-size:100%;
  box-sizing:border-box;
}
body.otoprep-app :where(.opwe,.otoprep-card,.qm235656-save-toolbar) :where(
  button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--otoprep-blue,#1075bc);
  outline-offset:3px;
}
/* Preserve answer label markup and question IDs. Rich text may wrap, but this
 * does not restyle ranking, matrix, hotspots or image answer hit areas. */
body.otoprep-app #otoprep-written-ui :where(.ays_quiz_question,.ays_questtion_explanation){
  min-width:0;overflow-wrap:anywhere;word-break:normal;
}
body.otoprep-app #otoprep-written-ui .ays-quiz-answers .ays-field label:not([class*="image_class"]){
  overflow-wrap:anywhere;word-break:normal;letter-spacing:normal;
}
body.otoprep-app :where(.opwe-clock,.opwe-clock strong,.qm59-time){
  font-variant-numeric:tabular-nums;
}
body.otoprep-app .opwe :where(.opwe-exam-head>div,.opwe-question-heading>h2,
  .opwe-savebar>span,.opwe-editor-footer>label,.opwe-navigation>span){min-width:0;}
body.otoprep-app .opwe :where(.opwe-question-heading,.opwe-editor-footer){flex-wrap:wrap;}
body.otoprep-app .opwe :where(.opwe-diff,.opwe-panel dl){min-width:0;}
body.otoprep-app .opwe .opwe-diff>*{min-width:0;}
/* The compact title has its own full-width row instead of a thin column beside
 * a clock. Time remains visible and unchanged; never truncate an exam title. */
@media(max-width:600px){
  body.otoprep-app .opwe .opwe-exam-head{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;}
  body.otoprep-app .opwe .opwe-clock{min-width:0;max-width:100%;justify-self:start;}
  body.otoprep-app .opwe .opwe-clock strong{font-size:1.5rem;}
  body.otoprep-app .opwe .opwe-clock span{font-size:.8125rem;}
  body.otoprep-app .opwe .opwe-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch;}
  body.otoprep-app .opwe .opwe-navigation>span{grid-column:1/-1;grid-row:1;text-align:center;max-width:none;font-size:.875rem;}
  body.otoprep-app .opwe .opwe-navigation>button{width:100%;min-width:0;padding:12px 8px;}
  body.otoprep-app .opwe .opwe-editor-footer>span{max-width:100%;text-align:start;}
  body.otoprep-app .opwe .opwe-marks{white-space:normal;overflow-wrap:anywhere;}
  body.otoprep-app :where(.otoprep-card,.opwe,.qm235656-save-toolbar) :where(
    input[type="text"],input[type="search"],input[type="email"],input[type="url"],
    input[type="number"],input[type="date"],input[type="datetime-local"],select,textarea){font-size:max(1rem,16px)!important;}
  body.otoprep-app :where(.qm235656-save-toolbar,.qm235650-resume-notice){flex-wrap:wrap;}
}
@media(max-width:360px){
  body.otoprep-app .opwe .opwe-navigation{grid-template-columns:minmax(0,1fr);}
}
/* Browsing chrome must not consume the usable landscape/keyboard viewport.
 * Session-owned fixed controls and visible modal scroll locks are not changed. */
@media(max-width:1023px) and (max-height:500px){
  html.otoprep-responsive-shell-v4 body.otoprep-app:not(.otoprep-view-voice):not(.otoprep-view-quiz) .otoprep-topbar{position:relative!important;top:auto!important;}
  html.otoprep-app-shell-v2:not(.otoprep-modal-active){scroll-padding-top:12px;}
}
@media(max-width:1023px){
  html.otoprep-responsive-shell-v4 body.otoprep-app.otoprep-vp-keyboard-open:not(.otoprep-view-voice):not(.otoprep-view-quiz) .otoprep-topbar{position:relative!important;top:auto!important;}
  body.otoprep-app.otoprep-vp-keyboard-open #otoprep-written-ui .qm59-notification{
    position:relative;bottom:auto;left:auto;transform:none;max-width:100%;flex-wrap:wrap;
  }
  body.otoprep-app.otoprep-vp-keyboard-open .opwe .opwe-palette{position:static;}
}
@media(prefers-reduced-motion:reduce){
  body.otoprep-app :where(.opwe,.qm235650-resume-notice,.qm235656-save-toolbar){scroll-behavior:auto;}
}


/* FRONTEND_VISUAL_POLISH_24140 · screenshot-led component corrections.
 * Presentation only: native fields, state, visibility owners and handlers remain.
 */
/* Calm, consistent canvas. Preserve semantic answer, notice and assessment colours. */
html.otoprep-app-shell-v2.otoprep-responsive-shell-v4 body.otoprep-app {
  --otoprep-canvas:#fbf7ed;
  --otoprep-polish-ink:#19324c;
  --otoprep-polish-muted:#536579;
  --otoprep-polish-blue:#245b88;
  --otoprep-polish-line:#d4dfe7;
  background-color:var(--otoprep-canvas)!important;
  background-image:none!important;
  color:var(--otoprep-polish-ink);
}
html body.otoprep-app .otoprep-topbar {
  border-color:#d4dfe7!important;
  box-shadow:0 3px 14px rgb(25 50 76 / 5%)!important;
}
/* Do not remove the maintenance notice or change its configured message. */
html body.otoprep-app .otoprep-app-update-notice {
  display:flex;align-items:flex-start!important;gap:8px!important;
  width:auto!important;min-width:0!important;max-width:100%!important;
  margin:12px 0!important;padding:11px 13px!important;
  background:#edf4f9!important;border:1px solid #cedfea!important;border-radius:12px!important;
  box-shadow:none!important;color:#334f67!important;
  font-size:13px!important;line-height:1.5!important;
  white-space:normal!important;overflow-wrap:break-word!important;
}
html body.otoprep-app .otoprep-app-update-notice__icon {flex:0 0 auto!important;font:inherit!important;line-height:1.5!important;}
html body.otoprep-app .otoprep-app-update-notice__message {min-width:0!important;font:inherit!important;color:inherit!important;-webkit-text-fill-color:currentColor!important;}
/* Compact browsing chrome: no changes to native session headers or route ownership. */
html body.otoprep-app .otoprep-topbar--app-shell :is(.otoprep-pill,.otoprep-exam-menu__summary,.otoprep-exam-current) {
  box-shadow:none!important;text-shadow:none!important;font-family:inherit!important;
  line-height:1.35!important;letter-spacing:normal!important;
}
html body.otoprep-app .otoprep-topbar--app-shell .otoprep-exam-menu__identity {min-width:0!important;display:block!important;text-align:left!important;}
html body.otoprep-app .otoprep-topbar--app-shell .otoprep-exam-menu__value {
  font-size:14px!important;font-weight:700!important;line-height:1.35!important;color:#19324c!important;
  white-space:normal!important;overflow-wrap:break-word!important;-webkit-text-fill-color:currentColor!important;
}
html body.otoprep-app .otoprep-topbar--app-shell .otoprep-exam-menu__access {
  display:block!important;font-size:12px!important;line-height:1.4!important;font-weight:500!important;
  color:#536579!important;-webkit-text-fill-color:currentColor!important;
}
html body.otoprep-app :is(.otoprep-written-v8__subtitle,.otoprep-written-builder-v8__subtitle) {
  color:#536579!important;font-size:15px!important;line-height:1.6!important;letter-spacing:normal!important;
}
html body.otoprep-app :is(.otoprep-written-v8__title,.otoprep-written-builder-v8__title) {
  color:#19324c!important;line-height:1.25!important;letter-spacing:-.02em!important;
}
html body.otoprep-app :is(.otoprep-written-v8__identity-tools,.otoprep-written-v8__header) {
  min-width:0!important;border:0!important;
}
/* Statistics are a UI component inside rich explanation content, not body prose.
 * Give every cell an explicit grid placement. Extra 'You'/'Correct' badges must
 * never auto-flow into the 10px colour-swatch column. Keep every data value. */
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats {
  background:#f5f9fc!important;border:1px solid #d2e1eb!important;border-radius:14px!important;
  box-shadow:none!important;padding:16px!important;margin:18px 0 0!important;
  color:#19324c!important;text-shadow:none!important;
}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__header {margin:0 0 14px!important;padding:0!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__title {font-size:16px!important;font-weight:700!important;line-height:1.4!important;color:#19324c!important;margin:0!important;letter-spacing:normal!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__meta {font-size:13px!important;line-height:1.5!important;color:#536579!important;margin:4px 0 0!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__grid {display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;gap:16px!important;align-items:start!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__chart-wrap {display:flex!important;justify-content:center!important;align-items:center!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__chart {width:88px!important;height:88px!important;flex:0 0 88px!important;position:relative!important;border-radius:50%!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__chart-inner {position:absolute!important;inset:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:3px!important;padding:0!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__chart-inner strong {font-size:20px!important;font-weight:750!important;line-height:1.15!important;color:#19324c!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__chart-inner span {font-size:9px!important;font-weight:650!important;line-height:1.2!important;color:#536579!important;letter-spacing:.03em!important;margin:0!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__legend {display:grid!important;gap:0!important;margin:0!important;padding:0!important;list-style:none!important;min-width:0!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__legend-item {display:grid!important;grid-template-columns:10px 28px minmax(0,1fr) 42px!important;align-items:start!important;gap:8px!important;padding:12px 0!important;margin:0!important;border-bottom:1px solid #dce6ee!important;font-size:14px!important;line-height:1.5!important;min-width:0!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__legend-item:last-child {border-bottom:0!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__legend-swatch {grid-column:1!important;grid-row:1!important;width:10px!important;height:10px!important;margin-top:8px!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__legend-choice {grid-column:2!important;grid-row:1!important;width:28px!important;min-width:28px!important;min-height:28px!important;padding:0!important;font-size:12px!important;line-height:1.3!important;font-weight:700!important;color:#19324c!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__legend-text {grid-column:3!important;grid-row:1!important;font-size:14px!important;line-height:1.5!important;font-weight:450!important;color:#19324c!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:normal!important;overflow-wrap:break-word!important;min-width:0!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__legend-pct {grid-column:4!important;grid-row:1!important;justify-self:end!important;font-size:14px!important;line-height:1.8!important;font-weight:700!important;color:#245b88!important;white-space:nowrap!important;font-variant-numeric:tabular-nums;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__legend-pill {grid-column:3 / -1!important;grid-row:auto!important;justify-self:start!important;display:inline-flex!important;min-width:max-content!important;min-height:24px!important;padding:3px 8px!important;font-size:11px!important;line-height:1.35!important;font-weight:650!important;white-space:nowrap!important;word-break:normal!important;-webkit-text-fill-color:currentColor!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__legend-pill--correct {color:#236044!important;background:#eaf5ee!important;border-color:#b9d9c4!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__legend-pill--you {color:#245b88!important;background:#eaf2f9!important;border-color:#c2d7e8!important;}
html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats :is(p,span,strong) {-webkit-text-fill-color:currentColor!important;text-shadow:none!important;}
@media(max-width:767px) {
  html body.otoprep-app .otoprep-topbar--app-shell {padding:10px 12px!important;border-radius:16px!important;}
  html body.otoprep-app .otoprep-topbar--app-shell :is(.otoprep-pill,.otoprep-pill span) {font-size:12px!important;line-height:1.3!important;}
  html body.otoprep-app .otoprep-topbar--app-shell .otoprep-pill {min-height:44px!important;padding:7px 10px!important;border-radius:12px!important;}
  html body.otoprep-app .otoprep-topbar--app-shell .otoprep-brand__logo {width:28px!important;height:28px!important;border-radius:9px!important;}
  html body.otoprep-app .otoprep-topbar--app-shell .otoprep-exam-menu__summary {min-height:48px!important;padding:8px 30px 8px 10px!important;border-radius:12px!important;}
  html body.otoprep-app .otoprep-topbar--app-shell .otoprep-topbar__help {width:44px!important;height:44px!important;min-width:44px!important;}
  html body.otoprep-app :is(.otoprep-written-v8__title,.otoprep-written-builder-v8__title) {font-size:22px!important;}
  html body.otoprep-app :is(.otoprep-written-v8__header,.otoprep-written-v8__identity-tools) {gap:12px!important;}
  html body.otoprep-app .otoprep-written-v8__identity-tools {justify-content:flex-start!important;flex-wrap:wrap!important;max-width:100%!important;}
  html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats {padding:14px!important;}
  html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__grid {grid-template-columns:minmax(0,1fr)!important;gap:10px!important;}
  html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__chart-wrap {justify-content:flex-start!important;}
  html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__legend-text {grid-column:2 / -1!important;grid-row:2!important;}
  html body.otoprep-app :is(.otoprep-main,#otoprep-written-ui,.otoprep-qreview-body) .otoprep-crowd-stats__legend-pill {grid-column:2 / -1!important;}
}

/* Labelled disclosures need no theme/font-dependent leading decorative glyph.
   Keep semantic summary controls and use a drawn chevron, not an icon font. */
html body.otoprep-app :is(.otoprep-exam-menu__summary,.otoprep-topbar__surfaceSummary,.otoprep-written-v8__identity-tools summary,.otoprep-oj__settings > summary,.otoprep-oux__moreSummary,#otoprep-written-ui .qm235650-quality-widget > summary) {list-style:none!important;}
html body.otoprep-app :is(.otoprep-exam-menu__summary,.otoprep-topbar__surfaceSummary,.otoprep-written-v8__identity-tools summary,.otoprep-oj__settings > summary,.otoprep-oux__moreSummary,#otoprep-written-ui .qm235650-quality-widget > summary)::before {content:none!important;}
html body.otoprep-app :is(.otoprep-exam-menu__summary,.otoprep-topbar__surfaceSummary,.otoprep-written-v8__identity-tools summary,.otoprep-oj__settings > summary,.otoprep-oux__moreSummary,#otoprep-written-ui .qm235650-quality-widget > summary)::marker {content:""!important;}
html body.otoprep-app :is(.otoprep-exam-menu__summary,.otoprep-topbar__surfaceSummary,.otoprep-written-v8__identity-tools summary,.otoprep-oj__settings > summary,.otoprep-oux__moreSummary,#otoprep-written-ui .qm235650-quality-widget > summary)::-webkit-details-marker {display:none!important;}
html body.otoprep-app .otoprep-exam-menu__summary::after {content:""!important;display:block!important;width:7px!important;height:7px!important;border:solid currentColor!important;border-width:0 2px 2px 0!important;transform:translateY(-65%) rotate(45deg)!important;}
html body.otoprep-app .otoprep-exam-menu[open] .otoprep-exam-menu__summary::after {transform:translateY(-25%) rotate(225deg)!important;}
html body.otoprep-app .otoprep-oj__settings > summary {position:relative!important;padding-right:30px!important;}
html body.otoprep-app .otoprep-oj__settings > summary::after {content:""!important;position:absolute!important;right:12px!important;top:20px!important;width:7px!important;height:7px!important;border:solid currentColor!important;border-width:0 2px 2px 0!important;transform:rotate(45deg)!important;}
html body.otoprep-app .otoprep-oj__settings[open] > summary::after {transform:rotate(225deg)!important;}

/* Keep explicit native concealment authoritative over component display rules. */
html body.otoprep-app .otoprep-app-update-notice[hidden] {display:none!important;}
