/* Showroom: "Use a measured rectangle" (EXPERIMENTAL, ?calib=rect). */
#calib-card{position:relative;margin:12px 0 4px;background:var(--panel);border:2px solid #1d6fa3;border-radius:14px;padding:14px 16px;display:grid;gap:10px}
#calib-card[hidden]{display:none}
#calib-card p{margin:0}
.calib-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.calib-exp{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:#e5eef5;color:#1d4f73}
.calib-fig svg{display:block;width:100%;max-width:260px;height:auto}
.calib-guide{font-weight:600}
.calib-rules{margin:0;padding-left:18px;display:grid;gap:3px;font-size:13px}
.calib-sides{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.calib-side{display:grid;grid-template-columns:auto 1fr;gap:2px 6px;align-items:center;font-size:13px;font-weight:600}
.calib-side i{width:12px;height:12px;border-radius:3px;display:inline-block}
.calib-side input{grid-column:1 / -1;width:112px;font-size:16px;padding:8px 10px;border-radius:10px;border:1px solid #b9c4bd}
#calib-unit{font-size:16px;padding:8px;border-radius:10px;border:1px solid #b9c4bd;min-height:42px}
.calib-step{font-size:13px;font-weight:600;color:#24412f}
.calib-msg{font-size:13px;font-weight:600;color:#7a2512;background:#f6dcd4;border-radius:8px;padding:6px 10px}
.calib-msg[hidden],#calib-info[hidden]{display:none}
.calib-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.calib-actions .btn,.calib-actions .tb{min-height:44px}
.calib-actions .lnk{min-height:44px;padding:0 6px}
.calib-note{font-size:12px}
.calib-diag{margin:8px 0;padding:10px 12px;border:1px dashed #9aa79f;border-radius:10px;font-size:13px}
.calib-diag[hidden]{display:none}
.calib-diag-row{display:flex;flex-wrap:wrap;gap:6px 14px}
#calib-remove[hidden],#calib-open[hidden],#dock-calib[hidden]{display:none}

/* on the photo */
#view #calib-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#calib-svg .cg-edge{stroke-width:3;fill:none;vector-effect:non-scaling-stroke}
#calib-svg .cg-edge.far{stroke-dasharray:7 5}
#calib-svg .cg-side{font:700 13px/1 system-ui,sans-serif;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:4px}
#calib-svg .cg-grid{stroke:rgba(255,255,255,.75);stroke-width:1;vector-effect:non-scaling-stroke}
#calib-svg .cg-ref{stroke:#1d6fa3;stroke-width:2.5;vector-effect:non-scaling-stroke}
#calib-svg .cg-rug{stroke:#ffd23f;stroke-width:2.5;vector-effect:non-scaling-stroke}
#calib-svg .cg-dim{font:700 12px/1 system-ui,sans-serif;text-anchor:middle;fill:#111;paint-order:stroke;stroke:#ffd23f;stroke-width:4px}
#calib-dots{position:absolute;inset:0;pointer-events:none}
.calib-dot{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(20,40,29,.92);border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.5);display:grid;place-items:center;transform:scale(calc(1 / var(--z,1)))}
.calib-dot[hidden]{display:none}
.calib-dot b{color:#fff;font:700 13px/1 system-ui,sans-serif}
/* the exact point is the centre; a small cross keeps it visible on the photo */
.calib-dot::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#ffd23f}
.calib-dot b{transform:translateY(-9px);font-size:11px}
.calib-dot.active{background:#1d6fa3}
#calib-loupe{position:absolute;z-index:40;width:120px;height:120px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 16px rgba(0,0,0,.45);pointer-events:none;background:#2a2f2c}
#calib-loupe[hidden]{display:none}
body.calib-editing #stage{touch-action:none;overscroll-behavior:none}
body.calib-editing #estimate-badge{display:none!important}
.scale-pill[data-state="calibrated"]{background:#dce9f3;color:#1d4f73}

@media (max-width:600px),(max-height:520px){
  #sheet-body #calib-card{position:static;border:0;padding:0;background:none;gap:8px}
  #sheet-body .calib-fig{display:none}
  #sheet-body .calib-rules{font-size:12px}
}

/* validation rounds (test only) */
#calib-svg .val-mark{fill:none;stroke:#a3341d;stroke-width:3;vector-effect:non-scaling-stroke}
.val-table table{border-collapse:collapse;font-size:12px}
.val-table td,.val-table th{border:1px solid #c9cdc6;padding:2px 6px;text-align:right}
#val-panel[hidden]{display:none}