@media (max-width: 400px) {
  header { height: auto; min-height: 72px; padding: 14px; gap: 10px; flex-wrap: wrap; }
  main { padding: 18px 14px; }
  h1 { font-size: 30px; }
  .stats { gap: 14px; flex-wrap: wrap; }
  .stats b { font-size: 21px; }
  .toolbar select { max-width: 100%; }
  .modalhead { padding: 16px; gap: 10px; }
  .modalbody { padding: 16px; }
  .specs { gap: 12px; }
  .comparebar { padding: 12px; gap: 10px; flex-wrap: wrap; }
}

.board-match{border:1px solid var(--line);border-radius:12px;background:white;padding:20px;margin:24px 0}
.board-match h2{margin-top:0;font-family:Georgia,serif;font-weight:400}
.board-match p{line-height:1.5}.board-match label{display:block;font-size:12px}
.board-match textarea,.requirement-fields input,.requirement-fields select{display:block;width:100%;padding:10px;margin:8px 0 14px;border:1px solid var(--line);border-radius:6px;background:white;font:inherit;color:inherit}
.requirement-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:15px 0}
.board-match .match-item{display:flex;align-items:start;gap:10px;border-top:1px solid var(--line);padding:14px 0;line-height:1.6}
.match-item small{color:#765444}.board-match button:disabled{opacity:.5;cursor:wait}
@media(max-width:650px){.requirement-fields{grid-template-columns:1fr;gap:0}.board-match{padding:14px}}

.expand-catalogue{width:100%;font-size:15px;min-height:44px}
.catalogue-filters{width:100%}.catalogue-filters summary{font-weight:600;cursor:pointer;font-size:15px;padding:8px 0}
@media(min-width:651px){.catalogue-filters summary{margin-bottom:18px}}
@media(max-width:650px){
 body{font-size:15px} header{min-height:0;padding:14px;gap:12px;height:auto;flex-wrap:wrap}
 .brand{font-size:20px}.pill{font-size:10px}
 aside{padding:8px 16px;border-bottom:1px solid var(--line)}
 aside .notice,aside .nav,aside .eyebrow{display:none}
 .filter{margin:12px 0}.filter label{font-size:14px}
 main{padding:16px}.topline .eyebrow,.topline .sub,.stats{display:none}
 h1{font-family:inherit;font-size:23px;letter-spacing:-.5px;margin:0}
 .topline>button{padding:8px 12px;font-size:13px;margin-top:10px}
 .board-match{margin:16px 0}.board-match h2{font-family:inherit;font-size:20px;line-height:1.3}
 .board-match label,.material,.sku,.notice,.result,.comparecheck,.specs dd,.costrow{font-size:13px}
 .board-match textarea,.board-match input,.board-match select{font-size:15px}
 .board-match .primary{width:100%;min-height:44px}
 .toolbar{margin-top:18px} .visual{height:190px} .cardbody{padding:16px}
 .card h3{font-size:18px}.detailbtn{font-size:14px;min-height:40px}
 .board-match .notice{margin-top:16px} .search input{font-size:14px}
}

/* Keep the primary actions reachable in Miro's narrow scrolling iframe. */
html{height:100%;overflow-y:auto}body{min-height:100%;overflow-y:visible}
.requirement-fields{grid-template-columns:1fr;margin:10px 0}
.requirement-fields [hidden]{display:none!important}
#sendMatches{position:sticky;bottom:8px;z-index:5;margin:12px 0;box-shadow:0 3px 14px #302c2830}
#sendMatches[hidden]{display:none}
#matchResults{max-height:360px;overflow-y:auto;overscroll-behavior:auto}
.board-match .notice{margin-top:10px}

.board-match > [hidden]{display:none!important}
#readBoard,#matchBrief{margin:6px 8px 6px 0}

#sourcePreview{max-height:200px;overflow:auto;margin-top:10px}.source-item{padding:10px;background:#f2efe9;border-radius:6px;margin:8px 0}.source-item summary{cursor:pointer;font-weight:600}.source-item p{white-space:normal;overflow-wrap:anywhere;font-size:13px}.match-group{border-top:2px solid #e6d9c6;padding-top:12px}

.match-reference{padding:14px 0;border-bottom:1px solid var(--line)}.match-photo{height:160px;display:flex;justify-content:center;background:#f4f0e9;border-radius:8px}.image-caption{font-size:11px;color:var(--muted);margin:6px 0}.match-reference .match-item{border:0;padding:10px 0}
/* Compact Miro panel; keep the expanded catalogue comfortable to read. */
@media(max-width:650px){
 body{font-size:12px}
 header{padding:9px 12px;gap:7px}.brand{font-size:17px}.brand span{width:25px;height:25px;margin-right:7px}.pill{font-size:9px;padding:4px 8px}
 main{padding:10px 12px}aside{padding:4px 12px}
 h1{font-size:19px}.topline>button{font-size:11px;padding:6px 9px;margin-top:7px}
 .primary,.detailbtn,.expand-catalogue,.board-match .primary{font-size:12px;padding:7px 10px;min-height:30px}
 .expand-catalogue{min-height:30px}.catalogue-filters summary{font-size:12px;padding:5px 0}
 .filter{margin:8px 0}.filter label{font-size:11px;margin:5px 0}.filter select{padding:7px;font-size:12px}
 .board-match{padding:10px;margin:10px 0}.board-match h2{font-size:16px;margin-bottom:7px}
 .board-match p{font-size:12px;line-height:1.4;margin:7px 0}
 #readBoard,#matchBrief{margin:3px 4px 3px 0}.board-match .primary{width:auto}
 #sourcePreview{max-height:140px;margin-top:6px}.source-item{padding:7px;margin:5px 0}.source-item summary,.source-item p{font-size:11px}
 #matchResults{max-height:440px}.match-group{padding-top:8px}.match-group h3{font-size:14px;margin:5px 0}
 .match-reference{padding:9px 0}.match-photo{height:105px}.board-match .match-item{gap:7px;padding:7px 0;font-size:12px;line-height:1.4}
 .board-match .image-caption{font-size:10px;margin:4px 0}.match-item small{font-size:11px}
 #sendMatches{margin:7px 0;bottom:5px}
 .toolbar{gap:7px;margin:12px 0 10px}.search input,.toolbar select{padding:8px 10px;font-size:12px}
 .result,.notice,.sku,.material,.comparecheck{font-size:11px}.result{margin-bottom:10px}.notice{margin-top:14px}
 .grid{gap:12px}.visual{height:160px}.cardbody{padding:12px}.card h3{font-size:15px}.material{min-height:0}.swatches{margin:9px 0}.cardfoot{padding-top:9px}.price{font-size:16px}
 .comparebar{padding:9px;font-size:12px}.comparebar button{font-size:11px;padding:6px 8px}
}
/* Slightly larger panel copy while retaining compact controls and spacing. */
@media(max-width:650px){
 body{font-size:13px}
 .board-match p,.board-match .match-item,.search input,.toolbar select,.filter select{font-size:13px}
 .source-item summary,.source-item p,.match-item small,.filter label,.catalogue-filters summary{font-size:12px}
 .result,.notice,.sku,.material,.comparecheck{font-size:12px}
 .board-match .image-caption{font-size:11px}
 .board-match h2{font-size:17px}.match-group h3{font-size:15px}.card h3{font-size:16px}
 .primary,.detailbtn,.expand-catalogue,.board-match .primary{font-size:13px}
}