/* Compact GH DESIGNS-inspired editor chrome. */
#ghboard .orderhead{padding:12px clamp(14px,2vw,28px);align-items:end}
#ghboard .orderhead h2{font-size:18px;line-height:1.15}
#ghboard .orderhead .small{font-size:11px}
#ghboard .price{font-size:22px}
#ghboard .pricebox .small{font-size:10px}
#ghboard .rate-line{margin-top:4px;color:var(--gh-blue);font-size:11px;font-weight:700;letter-spacing:.15px}
#ghboard .price-detail{max-width:250px;margin-top:3px;color:#526172;line-height:1.25}
#ghboard #gh-cut-toggle,#ghboard #gh-cut-panel{display:none!important}

#ghboard .work{min-height:max(560px,calc(100vh - 300px))}
#ghboard .canvasarea{min-height:max(560px,calc(100vh - 300px));padding:12px clamp(12px,2vw,30px) 20px}
#ghboard .canvasarea .boardhead{margin-bottom:8px}
#ghboard .canvasarea .boardwrap{width:min(430px,max(190px,calc((100vh - 390px)/2)));padding-top:8px}
#ghboard .canvasarea .sheetwidth{margin-bottom:4px;font-size:10px}
#ghboard .canvasarea .boardcaption{margin-top:8px;font-size:10px}
#ghboard .canvasarea .boardfoot{margin-top:8px;font-size:10px}

#ghboard .files{top:12px;left:12px;width:min(270px,calc(100% - 24px));max-height:calc(100% - 24px);padding:12px;border-radius:6px}
#ghboard .files .filehead{margin-bottom:8px}
#ghboard .files .filehead strong{font-size:14px}
#ghboard .files .add{padding:9px;margin-bottom:7px}
#ghboard .files .formatnote{font-size:10px;margin-bottom:8px}
#ghboard .artitem{margin-bottom:6px;border-radius:4px}
#ghboard .artrow{grid-template-columns:48px minmax(0,1fr);gap:8px;padding:8px}
#ghboard .artrow img{width:48px;height:36px}
#ghboard .filename{font-size:12px}
#ghboard .itemdetails{padding:0 8px 8px}
#ghboard .quantityrow{margin-bottom:6px}
#ghboard .quantityrow input{width:56px;padding:5px 6px}
#ghboard .fits button,#ghboard .minor button{font-size:10px;padding:5px 3px}

#ghboard .option-dock{padding:8px 12px}
#ghboard .tabs{gap:6px;justify-content:flex-start}
#ghboard .tabs button{flex:0 1 auto;min-height:36px;padding:6px 9px;border:1px solid var(--gh-line);border-radius:4px;box-shadow:none;gap:5px}
#ghboard .tabs button[aria-selected=true]{box-shadow:0 0 0 1px #c7d8ff}
#ghboard .tabs span{font-size:10px;margin:0}
#ghboard .tabs b{background:transparent;color:var(--gh-blue);padding:0;font-size:10px}
#ghboard .tabs button[aria-selected=true] b{color:var(--gh-blue)}

/* Keep the add action with the artwork tray, like a production ordering workspace. */
#ghboard .files{display:flex;flex-direction:column}
#ghboard .files #gh-items{min-height:0}
#ghboard .files .add-sign{margin:10px 0 0;min-height:44px;border:1px dashed var(--gh-blue);background:#fff;color:var(--gh-blue);font-weight:700;letter-spacing:.1px}
#ghboard .files .add-sign:hover{background:#eef4ff}
#ghboard .files .add-sign:focus-visible{outline:3px solid #8bb2ff;outline-offset:2px}
#ghboard .files .add-sign + .formatnote{margin:7px 0 0;text-align:center;line-height:1.35}

/* Full-width option tabs with larger, easier-to-scan values. */
#ghboard .option-dock{padding:10px clamp(12px,2vw,30px) 0}
#ghboard .tabs{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:0;align-items:stretch;justify-content:stretch}
#ghboard .tabs button{min-width:0;min-height:64px;flex:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:10px 13px;border:1px solid var(--gh-line);border-bottom:3px solid transparent;border-radius:0;background:#fff;text-align:left}
#ghboard .tabs button+button{border-left:0}
#ghboard .tabs button[aria-selected=true]{background:#eef4ff;border-bottom-color:var(--gh-blue);box-shadow:none}
#ghboard .tabs span{font-size:11px;font-weight:800;letter-spacing:.35px;line-height:1.15;white-space:normal}
#ghboard .tabs b{display:block;margin-top:5px;padding:0;background:transparent;color:var(--gh-blue);font-size:13px;font-weight:700;line-height:1.15;white-space:normal;overflow-wrap:anywhere}

@media(max-width:700px){
  #ghboard .tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  #ghboard .tabs button{min-height:58px;padding:9px 10px}
  #ghboard .tabs span{font-size:10px}
  #ghboard .tabs b{font-size:12px}
}
@media(max-width:480px){
  #ghboard .tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  #ghboard .tabs button+button{border-left:1px solid var(--gh-line)}
}

/* Keep a second sheet visible beside the first for multi-sheet production layouts. */
#ghboard .sheetrow{justify-content:flex-start;align-items:flex-start;gap:10px;overflow-x:auto;padding:0 2px 8px}
#ghboard .sheetrow .boardwrap{flex:0 0 min(430px,max(190px,calc((100vh - 390px)/2)))}
#ghboard .sheetrow .sheetwidth{font-weight:800;letter-spacing:.55px;color:#526172;text-transform:uppercase}
#ghboard .sheetrow>#gh-prev,#ghboard .sheetrow>#gh-next{display:none}
#ghboard .boardhead>div:last-child{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#ghboard .gh-preview-tools{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
#ghboard .gh-preview-tools .gh-zoom-controls{margin-left:0}
#ghboard .gh-sheet-nav{display:flex;align-items:center;justify-content:flex-end;gap:4px}
#ghboard .gh-sheet-nav-label{font-size:9px;font-weight:800;letter-spacing:.8px;color:#718094;margin-right:3px}
#ghboard .gh-sheet-nav button{min-width:30px;height:27px;padding:3px 9px;border:1px solid #cbd6e2;border-radius:4px;background:#fff;color:#0039b8;font-size:16px;font-weight:700;line-height:1}
#ghboard .gh-sheet-nav button:hover{background:#eef4ff;border-color:#8bb2ff}
#ghboard .gh-sheet-nav button:focus-visible{outline:3px solid #8bb2ff;outline-offset:2px}
#ghboard .sheetrow .boardwrap[data-gh-secondary-sheet]{opacity:.96}
#ghboard .sheetrow .boardwrap[data-gh-secondary-sheet] .board{border-color:#7e8b99}
#ghboard .boardhead{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#ghboard .gh-zoom-controls{display:flex;align-items:center;gap:4px;margin-left:auto}
#ghboard .gh-zoom-label{font-size:9px;font-weight:800;letter-spacing:.9px;color:#718094;margin-right:3px}
#ghboard .gh-zoom-controls button{min-width:32px;height:28px;padding:3px 8px;border:1px solid #cbd6e2;border-radius:4px;background:#fff;color:#0039b8;font-weight:700;line-height:1}
#ghboard .gh-zoom-controls button:hover{background:#eef4ff;border-color:#8bb2ff}
#ghboard .gh-zoom-controls button:focus-visible{outline:3px solid #8bb2ff;outline-offset:2px}
#ghboard .sheetrow .boardwrap{overflow:auto;scrollbar-width:thin;scrollbar-color:#aab8c8 transparent}
#ghboard .sheetrow .boardwrap .board{transform:scale(var(--gh-artwork-zoom,1));transform-origin:center center;outline:2px solid rgba(0,57,184,.36);outline-offset:-3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
#ghboard .sheetrow .boardwrap .board:after{content:'';position:absolute;inset:5px;border:1px dashed rgba(0,57,184,.26);pointer-events:none;z-index:20}
@media(max-width:700px){
  #ghboard .sheetrow{gap:8px}
  #ghboard .sheetrow .boardwrap{flex-basis:min(310px,max(180px,calc((100vh - 430px)/2)))}
  #ghboard .gh-preview-tools{align-items:flex-start}
  #ghboard .gh-sheet-nav{justify-content:flex-start}
}

@media(max-width:700px){
  #ghboard .work{min-height:0}
  #ghboard .canvasarea{min-height:440px}
  #ghboard .canvasarea .boardwrap{width:min(310px,max(180px,calc((100vh - 430px)/2)))}
  #ghboard .files{max-height:none}
  #ghboard .tabs{gap:5px}
  #ghboard .tabs button{flex:1 1 calc(33.333% - 5px);justify-content:space-between}
}

/* Reassert the stacked, centered tab treatment after the compact mobile rules. */
@media(max-width:700px){#ghboard .tabs button{flex:none;justify-content:center}}