/* Listening-only compact exam chrome.
   Keeps the existing question design intact while giving the question area
   proportions closer to a real IELTS-on-computer Listening workstation. */

body[data-exam-skill="listening"] .exam-header{
  height:50px;
  min-height:50px;
  padding:0 16px;
  gap:14px;
  border-bottom:1px solid #d5deea;
}
body[data-exam-skill="listening"] .exam-brand{
  font-size:22px;
  letter-spacing:-.6px;
}
body[data-exam-skill="listening"] .candidate{
  display:flex!important;
  align-items:center;
  gap:8px;
  padding:0;
  min-width:0;
  font-size:12px;
}
body[data-exam-skill="listening"] .candidate>div{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
body[data-exam-skill="listening"] #candidateLabel{
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
body[data-exam-skill="listening"] .candidate span#attemptLabel{display:none}
body[data-exam-skill="listening"] .clock{
  position:static;
  margin:0;
  min-width:0;
  display:flex!important;
  flex-direction:row;
  align-items:baseline;
  gap:5px;
  text-align:left;
  white-space:nowrap;
}
body[data-exam-skill="listening"] .clock strong{
  font-size:14px;
  line-height:1;
  font-weight:700;
}
body[data-exam-skill="listening"] .clock span{
  font-size:10px;
  line-height:1;
  margin:0;
}
body[data-exam-skill="listening"] .header-actions{
  margin-left:auto;
  gap:5px;
}
body[data-exam-skill="listening"] .header-actions button{
  padding:5px 9px;
  font-size:11px;
  min-height:28px;
}
body[data-exam-skill="listening"] .header-actions button:first-child{
  padding:2px 8px;
  font-size:17px;
}

/* Keep session/saving information, but as a narrow utility strip. */
body[data-exam-skill="listening"] .status-strip{
  min-height:22px;
  height:22px;
  padding:4px 16px;
  align-items:center;
  font-size:10px;
  line-height:1;
}

/* Header + status strip = 72px outside the workstation. */
body[data-exam-skill="listening"] .workstation{
  height:calc(100dvh - 72px);
  min-height:420px;
}

/* Compact component row: Listening / Part / Notes. */
body[data-exam-skill="listening"] .component-bar{
  min-height:36px;
  height:36px;
  padding:4px 16px;
  gap:10px;
  flex-wrap:nowrap;
}
body[data-exam-skill="listening"] .component-bar h1{
  font-size:15px;
  line-height:1;
}
body[data-exam-skill="listening"] #partTitle{
  font-size:11px;
  white-space:nowrap;
}
body[data-exam-skill="listening"] .component-bar>.text-button{
  padding:4px 9px;
  min-height:26px;
  font-size:11px;
}
body[data-exam-skill="listening"] #notesButton{margin-left:2px}

/* These are intentionally absent from the live Listening chrome. */
body[data-exam-skill="listening"] .audio-meter,
body[data-exam-skill="listening"] #highlightButton,
body[data-exam-skill="listening"] #submitButton,
body[data-exam-skill="listening"] .review-row,
body[data-exam-skill="listening"] #partNavigation{
  display:none!important;
}

/* One compact bottom dock instead of navigation + save/volume stacked rows. */
body[data-exam-skill="listening"] .exam-footer{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:50px;
  padding:4px 10px;
  border-top:1px solid #aebbc9;
  overflow:visible;
}
body[data-exam-skill="listening"] .navigation-row{
  flex:1 1 auto;
  min-width:0;
  padding:0;
  gap:7px;
  flex-wrap:nowrap;
}
body[data-exam-skill="listening"] .question-navigation{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 1px;
  scrollbar-width:thin;
}
body[data-exam-skill="listening"] .listening-part{
  display:flex;
  align-items:center;
  gap:5px;
  min-height:34px;
  white-space:nowrap;
}
body[data-exam-skill="listening"] .listening-part>span{
  font-size:10px;
  color:#59677a;
}
body[data-exam-skill="listening"] .listening-part-tab{
  border:0!important;
  background:transparent!important;
  min-width:48px;
  width:auto!important;
  height:28px!important;
  padding:3px 5px!important;
  font-size:11px!important;
  font-weight:700;
}
body[data-exam-skill="listening"] .listening-part.expanded{
  border-top:2px solid #1455a0;
  padding-top:2px;
}
body[data-exam-skill="listening"] .listening-numbers{
  display:flex;
  gap:2px;
}
body[data-exam-skill="listening"] .listening-numbers button{
  position:relative;
  width:25px;
  min-width:25px;
  height:27px;
  padding:1px;
  border-radius:3px!important;
  font-size:11px;
}
body[data-exam-skill="listening"] .listening-numbers button.flagged::after{
  top:-12px;
  font-size:11px;
}
body[data-exam-skill="listening"] .arrow-navigation{
  position:absolute!important;
  right:14px!important;
  bottom:calc(100% + 10px)!important;
  margin-left:auto;
  display:flex;
  flex:0 0 auto;
  gap:4px;
  padding:0;
  background:transparent;
}
body[data-exam-skill="listening"] .arrow-navigation button{
  width:30px;
  height:30px;
  font-size:18px;
  line-height:1;
}

body[data-exam-skill="listening"] .listening-controls{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
}
body[data-exam-skill="listening"] .listening-controls>span{
  font-size:10px;
  line-height:1.2;
  white-space:nowrap;
}
body[data-exam-skill="listening"] .bottom-tools{
  gap:4px;
}
body[data-exam-skill="listening"] .bottom-tools summary{
  padding:5px 8px;
  min-height:30px;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:4px;
}
body[data-exam-skill="listening"] .bottom-tools details[open] .volume-label{
  bottom:35px;
  right:0;
  width:220px;
  padding:12px;
}
body[data-exam-skill="listening"] .bottom-tools input{width:190px}

/* Keep the compact layout usable on narrower screens without changing questions. */
@media(max-width:1100px){
  body[data-exam-skill="listening"] .listening-controls>span{display:none}
  body[data-exam-skill="listening"] .question-navigation{justify-content:flex-start}
}
@media(max-width:700px){
  body[data-exam-skill="listening"] .exam-header{height:46px;min-height:46px;padding:0 8px;gap:8px}
  body[data-exam-skill="listening"] .exam-brand{font-size:18px}
  body[data-exam-skill="listening"] #candidateLabel{display:none}
  body[data-exam-skill="listening"] .status-strip{height:20px;min-height:20px;padding:3px 8px;font-size:9px}
  body[data-exam-skill="listening"] .workstation{height:calc(100dvh - 66px)}
  body[data-exam-skill="listening"] .component-bar{height:34px;min-height:34px;padding:3px 8px}
  body[data-exam-skill="listening"] .component-bar h1{font-size:14px}
  body[data-exam-skill="listening"] .exam-footer{min-height:46px;padding:3px 6px}
  body[data-exam-skill="listening"] .question-navigation{order:initial;flex-basis:auto}
  body[data-exam-skill="listening"] .bottom-tools summary span{display:none}
}


/* One saving status, no redundant session strip or Hide control. */
.exam-brand{letter-spacing:0!important;user-select:none}
.header-save-status{font-size:12px;line-height:1.3;color:#526173;max-width:230px}
.header-save-status.error{color:#b42332}
.workstation{height:calc(100dvh - 76px)}
body[data-exam-skill="listening"] .workstation{height:calc(100dvh - 50px)}
body[data-exam-skill="listening"] .clock strong{font-size:16px}
body[data-exam-skill="listening"] .clock span{font-size:11px}
body[data-exam-skill="listening"] .exam-footer{min-height:58px}
body[data-exam-skill="listening"] .question-navigation{padding-top:13px;min-height:48px}
body[data-exam-skill="listening"] .listening-numbers button{width:30px;min-width:30px;height:30px;font-size:12px}
body[data-exam-skill="listening"] .listening-numbers button.flagged::after{content:'⚑';clip-path:none;background:none;top:-13px;right:0;width:auto;height:auto;font-size:13px;line-height:13px;color:#8a5700}
body[data-exam-skill="listening"] .listening-part-tab{font-size:12px!important}
body[data-exam-skill="listening"] .listening-part>span{font-size:11px}
body[data-exam-skill="listening"] .arrow-navigation button{width:32px;height:32px}
body.contrast .header-save-status,body.contrast #partTitle,body.contrast .listening-part>span,body.contrast .clock span{color:#fff}
body.contrast .bottom-tools summary,body.contrast .bottom-tools details[open] .volume-label{background:#192536;color:#fff;border-color:#bdc9d8}
body.contrast .listening-numbers button.flagged::after{color:#ffd363}
@media(max-width:700px){
 .workstation{height:calc(100dvh - 68px)}
 body[data-exam-skill="listening"] .workstation{height:calc(100dvh - 46px);min-height:0}
 .header-save-status{font-size:11px;max-width:115px}
 body[data-exam-skill="listening"] .clock span{display:none}
 body[data-exam-skill="listening"] .header-actions{gap:4px}
}

#headerFullscreen{font-size:12px;padding:5px 8px;white-space:nowrap}
#fullscreenHint{font-size:13px;line-height:1.5}

/* Reading shares compact exam controls, without Listening audio tools. */
/* Listening-only compact exam chrome.
   Keeps the existing question design intact while giving the question area
   proportions closer to a real IELTS-on-computer Listening workstation. */

body[data-exam-skill="reading"] .exam-header{
  height:50px;
  min-height:50px;
  padding:0 16px;
  gap:14px;
  border-bottom:1px solid #d5deea;
}
body[data-exam-skill="reading"] .exam-brand{
  font-size:22px;
  letter-spacing:-.6px;
}
body[data-exam-skill="reading"] .candidate{
  display:flex!important;
  align-items:center;
  gap:8px;
  padding:0;
  min-width:0;
  font-size:12px;
}
body[data-exam-skill="reading"] .candidate>div{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
body[data-exam-skill="reading"] #candidateLabel{
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
body[data-exam-skill="reading"] .candidate span#attemptLabel{display:none}
body[data-exam-skill="reading"] .clock{
  position:static;
  margin:0;
  min-width:0;
  display:flex!important;
  flex-direction:row;
  align-items:baseline;
  gap:5px;
  text-align:left;
  white-space:nowrap;
}
body[data-exam-skill="reading"] .clock strong{
  font-size:14px;
  line-height:1;
  font-weight:700;
}
body[data-exam-skill="reading"] .clock span{
  font-size:10px;
  line-height:1;
  margin:0;
}
body[data-exam-skill="reading"] .header-actions{
  margin-left:auto;
  gap:5px;
}
body[data-exam-skill="reading"] .header-actions button{
  padding:5px 9px;
  font-size:11px;
  min-height:28px;
}
body[data-exam-skill="reading"] .header-actions button:first-child{
  padding:2px 8px;
  font-size:17px;
}

/* Keep session/saving information, but as a narrow utility strip. */
body[data-exam-skill="reading"] .status-strip{
  min-height:22px;
  height:22px;
  padding:4px 16px;
  align-items:center;
  font-size:10px;
  line-height:1;
}

/* Header + status strip = 72px outside the workstation. */
body[data-exam-skill="reading"] .workstation{
  height:calc(100dvh - 72px);
  min-height:420px;
}

/* Compact component row: Listening / Part / Notes. */
body[data-exam-skill="reading"] .component-bar{
  min-height:36px;
  height:36px;
  padding:4px 16px;
  gap:10px;
  flex-wrap:nowrap;
}
body[data-exam-skill="reading"] .component-bar h1{
  font-size:15px;
  line-height:1;
}
body[data-exam-skill="reading"] #partTitle{
  font-size:11px;
  white-space:nowrap;
}
body[data-exam-skill="reading"] .component-bar>.text-button{
  padding:4px 9px;
  min-height:26px;
  font-size:11px;
}
body[data-exam-skill="reading"] #notesButton{margin-left:2px}

/* These are intentionally absent from the live Listening chrome. */
body[data-exam-skill="reading"] .audio-meter,
body[data-exam-skill="reading"] #highlightButton,
body[data-exam-skill="reading"] #submitButton,
body[data-exam-skill="reading"] .review-row,
body[data-exam-skill="reading"] #partNavigation{
  display:none!important;
}

/* One compact bottom dock instead of navigation + save/volume stacked rows. */
body[data-exam-skill="reading"] .exam-footer{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:50px;
  padding:4px 10px;
  border-top:1px solid #aebbc9;
  overflow:visible;
}
body[data-exam-skill="reading"] .navigation-row{
  flex:1 1 auto;
  min-width:0;
  padding:0;
  gap:7px;
  flex-wrap:nowrap;
}
body[data-exam-skill="reading"] .question-navigation{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 1px;
  scrollbar-width:thin;
}
body[data-exam-skill="reading"] .listening-part{
  display:flex;
  align-items:center;
  gap:5px;
  min-height:34px;
  white-space:nowrap;
}
body[data-exam-skill="reading"] .listening-part>span{
  font-size:10px;
  color:#59677a;
}
body[data-exam-skill="reading"] .listening-part-tab{
  border:0!important;
  background:transparent!important;
  min-width:48px;
  width:auto!important;
  height:28px!important;
  padding:3px 5px!important;
  font-size:11px!important;
  font-weight:700;
}
body[data-exam-skill="reading"] .listening-part.expanded{
  border-top:2px solid #1455a0;
  padding-top:2px;
}
body[data-exam-skill="reading"] .listening-numbers{
  display:flex;
  gap:2px;
}
body[data-exam-skill="reading"] .listening-numbers button{
  position:relative;
  width:25px;
  min-width:25px;
  height:27px;
  padding:1px;
  border-radius:3px!important;
  font-size:11px;
}
body[data-exam-skill="reading"] .listening-numbers button.flagged::after{
  top:-12px;
  font-size:11px;
}
body[data-exam-skill="reading"] .arrow-navigation{
  position:absolute!important;
  right:14px!important;
  bottom:calc(100% + 10px)!important;
  margin-left:auto;
  display:flex;
  flex:0 0 auto;
  gap:4px;
  padding:0;
  background:transparent;
}
body[data-exam-skill="reading"] .arrow-navigation button{
  width:30px;
  height:30px;
  font-size:18px;
  line-height:1;
}

body[data-exam-skill="reading"] .listening-controls{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
}
body[data-exam-skill="reading"] .listening-controls>span{
  font-size:10px;
  line-height:1.2;
  white-space:nowrap;
}
body[data-exam-skill="reading"] .bottom-tools{
  gap:4px;
}
body[data-exam-skill="reading"] .bottom-tools summary{
  padding:5px 8px;
  min-height:30px;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:4px;
}
body[data-exam-skill="reading"] .bottom-tools details[open] .volume-label{
  bottom:35px;
  right:0;
  width:220px;
  padding:12px;
}
body[data-exam-skill="reading"] .bottom-tools input{width:190px}

/* Keep the compact layout usable on narrower screens without changing questions. */
@media(max-width:1100px){
  body[data-exam-skill="reading"] .listening-controls>span{display:none}
  body[data-exam-skill="reading"] .question-navigation{justify-content:flex-start}
}
@media(max-width:700px){
  body[data-exam-skill="reading"] .exam-header{height:46px;min-height:46px;padding:0 8px;gap:8px}
  body[data-exam-skill="reading"] .exam-brand{font-size:18px}
  body[data-exam-skill="reading"] #candidateLabel{display:none}
  body[data-exam-skill="reading"] .status-strip{height:20px;min-height:20px;padding:3px 8px;font-size:9px}
  body[data-exam-skill="reading"] .workstation{height:calc(100dvh - 66px)}
  body[data-exam-skill="reading"] .component-bar{height:34px;min-height:34px;padding:3px 8px}
  body[data-exam-skill="reading"] .component-bar h1{font-size:14px}
  body[data-exam-skill="reading"] .exam-footer{min-height:46px;padding:3px 6px}
  body[data-exam-skill="reading"] .question-navigation{order:initial;flex-basis:auto}
  body[data-exam-skill="reading"] .bottom-tools summary span{display:none}
}


/* One saving status, no redundant session strip or Hide control. */
.exam-brand{letter-spacing:0!important;user-select:none}
.header-save-status{font-size:12px;line-height:1.3;color:#526173;max-width:230px}
.header-save-status.error{color:#b42332}
.workstation{height:calc(100dvh - 76px)}
body[data-exam-skill="reading"] .workstation{height:calc(100dvh - 50px)}
body[data-exam-skill="reading"] .clock strong{font-size:16px}
body[data-exam-skill="reading"] .clock span{font-size:11px}
body[data-exam-skill="reading"] .exam-footer{min-height:58px}
body[data-exam-skill="reading"] .question-navigation{padding-top:13px;min-height:48px}
body[data-exam-skill="reading"] .listening-numbers button{width:30px;min-width:30px;height:30px;font-size:12px}
body[data-exam-skill="reading"] .listening-numbers button.flagged::after{content:'⚑';clip-path:none;background:none;top:-13px;right:0;width:auto;height:auto;font-size:13px;line-height:13px;color:#8a5700}
body[data-exam-skill="reading"] .listening-part-tab{font-size:12px!important}
body[data-exam-skill="reading"] .listening-part>span{font-size:11px}
body[data-exam-skill="reading"] .arrow-navigation button{width:32px;height:32px}
body.contrast .header-save-status,body.contrast #partTitle,body.contrast .listening-part>span,body.contrast .clock span{color:#fff}
body.contrast .bottom-tools summary,body.contrast .bottom-tools details[open] .volume-label{background:#192536;color:#fff;border-color:#bdc9d8}
body.contrast .listening-numbers button.flagged::after{color:#ffd363}
@media(max-width:700px){
 .workstation{height:calc(100dvh - 68px)}
 body[data-exam-skill="reading"] .workstation{height:calc(100dvh - 46px);min-height:0}
 .header-save-status{font-size:11px;max-width:115px}
 body[data-exam-skill="reading"] .clock span{display:none}
 body[data-exam-skill="reading"] .header-actions{gap:4px}
}


body[data-exam-skill="reading"] #submitButton{display:none!important}

body:is([data-exam-skill="listening"],[data-exam-skill="reading"]) .exam-footer{position:relative}
body:is([data-exam-skill="listening"],[data-exam-skill="reading"]) .arrow-navigation{z-index:10}

/* Writing shares the compact exam frame. */
/* Listening-only compact exam chrome.
   Keeps the existing question design intact while giving the question area
   proportions closer to a real IELTS-on-computer Listening workstation. */

body[data-exam-skill="writing"] .exam-header{
  height:50px;
  min-height:50px;
  padding:0 16px;
  gap:14px;
  border-bottom:1px solid #d5deea;
}
body[data-exam-skill="writing"] .exam-brand{
  font-size:22px;
  letter-spacing:-.6px;
}
body[data-exam-skill="writing"] .candidate{
  display:flex!important;
  align-items:center;
  gap:8px;
  padding:0;
  min-width:0;
  font-size:12px;
}
body[data-exam-skill="writing"] .candidate>div{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
body[data-exam-skill="writing"] #candidateLabel{
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
body[data-exam-skill="writing"] .candidate span#attemptLabel{display:none}
body[data-exam-skill="writing"] .clock{
  position:static;
  margin:0;
  min-width:0;
  display:flex!important;
  flex-direction:row;
  align-items:baseline;
  gap:5px;
  text-align:left;
  white-space:nowrap;
}
body[data-exam-skill="writing"] .clock strong{
  font-size:14px;
  line-height:1;
  font-weight:700;
}
body[data-exam-skill="writing"] .clock span{
  font-size:10px;
  line-height:1;
  margin:0;
}
body[data-exam-skill="writing"] .header-actions{
  margin-left:auto;
  gap:5px;
}
body[data-exam-skill="writing"] .header-actions button{
  padding:5px 9px;
  font-size:11px;
  min-height:28px;
}
body[data-exam-skill="writing"] .header-actions button:first-child{
  padding:2px 8px;
  font-size:17px;
}

/* Keep session/saving information, but as a narrow utility strip. */
body[data-exam-skill="writing"] .status-strip{
  min-height:22px;
  height:22px;
  padding:4px 16px;
  align-items:center;
  font-size:10px;
  line-height:1;
}

/* Header + status strip = 72px outside the workstation. */
body[data-exam-skill="writing"] .workstation{
  height:calc(100dvh - 72px);
  min-height:420px;
}

/* Compact component row: Listening / Part / Notes. */
body[data-exam-skill="writing"] .component-bar{
  min-height:36px;
  height:36px;
  padding:4px 16px;
  gap:10px;
  flex-wrap:nowrap;
}
body[data-exam-skill="writing"] .component-bar h1{
  font-size:15px;
  line-height:1;
}
body[data-exam-skill="writing"] #partTitle{
  font-size:11px;
  white-space:nowrap;
}
body[data-exam-skill="writing"] .component-bar>.text-button{
  padding:4px 9px;
  min-height:26px;
  font-size:11px;
}
body[data-exam-skill="writing"] #notesButton{margin-left:2px}

/* These are intentionally absent from the live Listening chrome. */
body[data-exam-skill="writing"] .audio-meter,
body[data-exam-skill="writing"] #highlightButton{display:none!important}

body[data-exam-skill="writing"] #partNavigation{display:flex!important;gap:8px;flex:1}
body[data-exam-skill="writing"] .exam-footer{position:relative}
body[data-exam-skill="writing"] .arrow-navigation{z-index:10}
body[data-exam-skill="writing"] .part-navigation button{min-width:80px;height:32px;font-size:12px}

/* Temporary demonstration controls; disabled when data-demo-submit is removed. */
body[data-demo-submit="true"]:is([data-exam-skill="listening"],[data-exam-skill="reading"],[data-exam-skill="writing"]) #submitButton{display:inline-flex!important;margin-left:auto;align-items:center;white-space:nowrap;padding:4px 10px;font-size:12px;line-height:20px;min-height:28px}

/* Writing uses the same 50px header and compact bottom dock as Listening/Reading. */
body[data-exam-skill="writing"] .workstation{height:calc(100dvh - 50px);min-height:0}
body[data-exam-skill="writing"] .component-bar{flex:0 0 36px}
body[data-exam-skill="writing"] .frame-container{flex:1 1 auto;min-height:0}
body[data-exam-skill="writing"] .exam-footer{display:flex;align-items:center;gap:12px;flex:0 0 50px;height:50px;min-height:50px;padding:4px 10px}
body[data-exam-skill="writing"] .review-row{margin:0;gap:6px;font-size:11px;white-space:nowrap}
body[data-exam-skill="writing"] #currentQuestion,
body[data-exam-skill="writing"] #answeredCount,
body[data-exam-skill="writing"] #questionNavigation{display:none}
body[data-exam-skill="writing"] .navigation-row{flex:1;min-width:0;flex-wrap:nowrap;gap:8px}
body[data-exam-skill="writing"] .part-navigation button{height:28px;min-width:70px;padding:3px 9px;font-size:11px}
body[data-exam-skill="writing"] .arrow-navigation{position:static;margin-left:auto;gap:6px}
body[data-exam-skill="writing"] .arrow-navigation button{width:32px;height:32px;font-size:19px}
@media(max-width:700px){body[data-exam-skill="writing"] .exam-footer{gap:8px;padding:4px 8px}body[data-exam-skill="writing"] .component-bar{padding-inline:8px;gap:8px}}