/* Adapt the workspace to available CSS pixels, not monitor inches or page zoom.
   Keep native text sizing, document scrolling and user-resizable note fields. */
.wrap,.header-brand,.header-brand-copy,.header-actions,.grid>div,.grid .panel{min-width:0}
.grid input,.grid textarea,.grid select{max-width:100%;min-width:0}
.grid select{min-height:44px}
.grid .output-box{overflow-wrap:anywhere}
.workspace-settings-scroll{display:contents}
.workspace-settings-hint{display:none}
.workspace-settings-scroll>.field{padding-bottom:11px;border-bottom:1px solid rgba(185,205,165,.1)}

/* Intermediate windows need a wrapping header before the mobile breakpoint. */
@media(max-width:1240px){
  .header{flex-wrap:wrap;align-items:center;gap:12px}
  .header-brand{flex:1 1 360px;max-width:100%}
  .header-actions{flex:0 1 auto;max-width:100%;flex-wrap:wrap;gap:8px}
}

/* A short laptop viewport needs less chrome even when it is wide. */
@media(max-width:1100px),(max-height:820px){
  body{padding-top:12px;padding-left:clamp(12px,2vw,24px);padding-right:clamp(12px,2vw,24px)}
  .header{margin-bottom:10px;padding-top:0;padding-bottom:10px;gap:10px}
  .header .kb-logo{width:clamp(180px,22vw,250px);max-width:250px;height:auto}
  .header-brand{gap:12px}
  .header-brand-copy{gap:5px}
  .header-brand-copy .brand-promise{font-size:12px;line-height:1.4}
  .scout-workspace-entry{padding-bottom:12px;font-size:13px;gap:10px}
  .grid{align-items:start;gap:14px;grid-template-columns:minmax(310px,28%) minmax(0,1fr)}
  .grid .panel{padding:16px}
  .grid .panel .field{margin-bottom:10px}
  .grid>div:first-child>.panel{min-height:0}
  .grid>div:first-child>.panel>.field:not(:last-child){padding-bottom:10px}
  .workspace-settings-scroll>.field{padding-bottom:10px}
  #lengthFormatField,#blitzVoiceField,#preplyModuleField,#studentGenderField,#protocolFormatField{min-height:0;justify-content:flex-start}
  #protocolSelect{gap:6px}
  #protocolSelect>label,#protocolSelect>label:has(input[value="PREPLY"]),#protocolSelect>label:not(:has(input[value="PREPLY"])){height:58px;min-height:58px;max-height:none}
  #lengthFormatSelect>label{min-height:56px}
  .length-summary{margin-top:8px;gap:8px}
  .grid label.field-label{line-height:1.35;margin-bottom:6px}
  #krispNotes{height:clamp(132px,24dvh,186px);min-height:132px;font-size:15px}
  #specialRemarks{height:64px;min-height:64px}
  .generate-summary{position:static;max-width:none;white-space:normal;overflow:visible;text-align:left;margin:3px 0 6px;line-height:1.45}
  .grid .field-counter{margin-top:6px;font-size:13px}
  .grid .generate-btn{min-height:48px;padding:12px 16px}
  .grid>div:nth-child(2)>.panel:last-child{flex:none}
  .grid>div:nth-child(2)>.panel:last-child>#outputBox{flex:none}
  .grid>div:nth-child(2)>.panel:last-child>#outputBox.empty{min-height:140px}
  .grid .action-row{flex-wrap:wrap}
}

@media(min-width:1120px) and (max-height:820px){
  .header .kb-logo{width:210px;max-width:210px;flex-basis:210px}
  .header-brand-copy{flex:1 1 150px;min-width:130px}
}

/* Tablets: full-width notes, with settings arranged in two useful columns. */
@media(max-width:860px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .grid>div:first-child>.panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
  .grid>div:first-child>.panel>.field{margin-bottom:0;min-width:0}
  .grid>div:first-child>.panel .workspace-settings-scroll>.field{margin-bottom:0;min-width:0}
  .workspace-settings-scroll>.field:first-child{grid-column:1/-1}
  .grid>div:first-child>.panel>.field:first-child,.grid #ratingField{grid-column:1/-1}
  #protocolSelect{grid-template-columns:repeat(3,minmax(0,1fr))}
  #protocolSelect>label:has(input[value="PREPLY"]){grid-column:1/-1}
  .header-brand-copy{max-width:210px}
  .header-actions{justify-content:flex-start}
  .header-actions>button.account-btn{padding-left:10px;padding-right:10px;font-size:13px}
}

/* Phones and high zoom: one clear, readable flow; no hidden settings. */
@media(max-width:560px){
  .header-brand{flex-basis:100%;gap:10px;align-items:center}
  .header .kb-logo{width:clamp(150px,44vw,210px);max-width:210px;flex:0 1 auto}
  .header-brand-copy{flex:1;max-width:none;min-width:0}
  .header-brand-copy .brand-promise{font-size:12px}
  .header-actions{width:100%;gap:8px}
  .header-actions>button.account-btn{padding-left:10px;padding-right:10px;font-size:13px}
  html[data-appearance] .header-actions>button#helpBtn{gap:7px}
  .grid .panel{padding:14px}
  .grid>div:first-child>.panel{display:block}
  .grid>div:first-child>.panel>.field{margin-bottom:12px}
  .grid>div:first-child>.panel .workspace-settings-scroll>.field{margin-bottom:12px}
  .grid>div:first-child>.panel>.field:last-child{margin-bottom:0}
  #protocolSelect{grid-template-columns:repeat(2,minmax(0,1fr))}
  #krispNotes{height:160px;min-height:132px;font-size:16px}
  #specialRemarks{font-size:16px}
  .scout-workspace-entry{padding-left:0;padding-right:0}
  .grid .action-row>button{flex:1 1 90px;min-height:44px}
}

/* Short desktop windows: keep the real rating controls in view, not below
   the page fold. Only the settings above them scroll; no duplicated inputs. */
@media(min-width:861px){
  body.workspace-height-fit .grid>div:first-child{align-self:start;position:sticky;top:12px}
  body.workspace-height-fit .grid>div:first-child>.panel{display:flex;flex-direction:column;gap:12px;height:var(--workspace-fit-height);min-height:0;overflow:visible}
  body.workspace-height-fit .workspace-settings-scroll{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border) transparent;padding-right:7px;overscroll-behavior-y:contain;scroll-padding:8px}
  body.workspace-height-fit #ratingField{flex:0 0 auto;min-height:0;padding-top:10px;border-top:1px solid var(--border)}
  body.workspace-height-fit .workspace-settings-hint{display:flex;justify-content:center;align-items:center;gap:8px;flex:none;margin:0;font-size:12px;line-height:1.4;color:var(--text-dim)}
  body.workspace-height-fit #ratingCaption{max-height:90px;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}
  body.workspace-height-fit .workspace-settings-scroll .info-icon::after{position:fixed;left:auto;right:16px;bottom:16px;width:min(360px,calc(100vw - 32px));max-width:none}
  body.workspace-height-fit .grid>div:nth-child(2){display:block;height:auto;min-height:0}
  body.workspace-height-fit .grid>div:nth-child(2)>.panel:first-child{display:flex;flex-direction:column;height:max(280px,calc(var(--workspace-fit-height)*.52));min-height:0;overflow:visible}
  /* Reports grow in normal document flow; never trap them with feedback in a
     viewport-height scroller. Page scrolling reveals the entire report. */
  .grid>div:nth-child(2)>.panel:last-child{display:block;flex:none;height:auto;max-height:none;overflow:visible}
  .grid>div:nth-child(2)>.panel:last-child .output-box{flex:none;height:auto;max-height:none;overflow:visible}
  body.workspace-height-fit .workspace-content-scroll{flex:1 1 0;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;scroll-padding:8px;overscroll-behavior:contain;padding-right:5px}
  body.workspace-height-fit #generateBtn{flex:none;min-height:44px;margin-top:10px}
  body.workspace-height-fit #krispNotes{height:clamp(60px,11dvh,100px);min-height:60px}
  body.workspace-height-fit .generate-summary{position:absolute;top:0;right:0;max-width:70%;margin:0;text-align:right}
  body.workspace-height-fit #actionRow{flex:none;margin-top:10px;gap:8px}
  body.workspace-height-fit #actionRow>button{min-height:44px}
  body.workspace-height-fit .grid>div:nth-child(2)>.panel>.of-output-heading{flex:none;margin-bottom:8px}
}
@media(min-width:861px) and (max-height:700px){
  body.workspace-height-fit #workspaceNotesScroll .field-hint{display:none}
}