/* ==========================================================================
   Shiny Kiwi — centering tool page styles
   Shared tokens, header, buttons, and base footer live in main.css
   ========================================================================== */

.page-head{padding:40px 0 24px;}
.page-head h1{font-size:clamp(1.9rem,3.6vw,2.6rem); color:var(--green-deep); margin:10px 0 12px;}
.page-head p{max-width:66ch; color:#4a4a3c; font-size:1.02rem;}

main{padding-bottom:70px;}

.tool-grid{display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start;}

.panel{background:var(--cream-panel); border:1px solid #E4DFC8; border-radius:18px; padding:18px;}

/* --- dropzone / canvas area --- */
#dropzone{
  border:2px dashed #C9C2A4; border-radius:14px; padding:70px 20px; text-align:center;
  cursor:pointer; transition:border-color .15s, background .15s;
}
#dropzone.drag{border-color:var(--gold); background:#FBF5E4;}
#dropzone h3{color:var(--green-deep); margin-bottom:8px;}
#dropzone p{color:#5b5a4d; font-size:.92rem;}
#dropzone .icon{width:44px; height:44px; margin:0 auto 14px; color:var(--green);}

#fileInput{display:none;}

.canvas-toolbar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; flex-wrap:wrap;}
.zoom-controls{display:flex; align-items:center; gap:8px;}
.zoom-controls button{
  width:32px; height:32px; border-radius:8px; border:1px solid #C9C2A4; background:var(--cream-panel);
  font-size:1.1rem; font-weight:700; color:var(--green-deep); cursor:pointer;
}
.zoom-controls button:hover{background:#EFE9D3;}
.zoom-controls span{font-family:'Space Mono', monospace; font-size:.85rem; min-width:48px; text-align:center;}
.toolbar-btn{
  padding:8px 14px; border-radius:8px; border:1px solid #C9C2A4; background:var(--cream-panel);
  font-weight:600; font-size:.85rem; color:var(--charcoal); cursor:pointer;
}
.toolbar-btn:hover{background:#EFE9D3;}
.toolbar-btn.danger{border-color:#D9B7AC; color:var(--bad);}

/*
  #canvasWrap intentionally does NOT use flexbox centering (align-items/justify-content)
  combined with overflow:auto. That combination has a well-known browser quirk: when the
  centered content is larger than the container, the browser can't scroll far enough to
  reach the far edge of the content on the "centered" axis -- part of the image becomes
  permanently unreachable while zoomed in. Centering here is done with margin:auto on the
  canvas itself instead, which scrolls correctly all the way to every edge.
*/
#canvasWrap{
  overflow:auto; max-height:74vh; min-height:300px;
  border:1px solid #E4DFC8; border-radius:12px;
  background:#EFEBDA; padding:14px;
}
#cardCanvas{display:block; margin:0 auto; cursor:crosshair; touch-action:none;}

.hint-row{display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding:12px 14px; background:#F1ECD7; border-radius:10px; font-size:.85rem; color:#4a4a3c;}
.hint-row svg{flex:none; width:18px; height:18px; margin-top:1px; color:var(--gold);}

.legend{display:flex; gap:18px; margin-top:10px; font-size:.82rem; flex-wrap:wrap;}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.legend i{width:16px; height:2px; display:inline-block; border-top:2px dashed;}
.legend i.outer{border-color:var(--green);}
.legend i.inner{border-color:var(--gold);}

/* --- side panel: measurements --- */
.side-title{font-family:'Baloo 2'; font-size:1.15rem; font-weight:700; color:var(--green-deep); margin-bottom:14px;}

.measure-block{border-bottom:1px solid #E4DFC8; padding:14px 0;}
.measure-block:first-of-type{padding-top:0;}
.measure-block:last-of-type{border-bottom:none;}
.measure-block h4{font-size:.85rem; font-weight:700; color:var(--charcoal); margin-bottom:6px;}
.measure-mm{font-style:italic; color:#6a6858; font-size:.92rem; margin-bottom:4px;}
.measure-pct{font-weight:800; color:var(--green); font-size:1.15rem; font-family:'Space Mono', monospace;}
.verdict-pill{
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700;
  color:#fff; margin-top:8px;
}

.field-row{margin-top:16px;}
.toggle-row{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:.85rem; font-weight:600;}
.toggle-row input{width:16px; height:16px;}

.calib-note{font-size:.76rem; color:#8a8877; margin-top:14px; line-height:1.5;}

.placeholder-measure{color:#8a8877; font-size:.88rem; font-style:italic;}

@media (max-width:940px){
  .tool-grid{grid-template-columns:1fr;}
  #canvasWrap{max-height:56vh;}
}