/* ============================================================
   ShirtMath — measurement view styles.  NEW FILE, additive.
   Scoped entirely under .mv-* so nothing else on the site is affected.
   ============================================================ */

.mv-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:28px;align-items:start}

/* ---------- diagram ---------- */
.mv-diagram{
  background:var(--card);border:1px solid var(--rule);border-radius:16px;
  padding:10px 6px 6px;position:relative}
.mv-svg{width:100%;height:auto;display:block;overflow:visible}
.mv-shirt{
  fill:var(--card-2);stroke:var(--ink-3);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round}
.mv-line{stroke:var(--navy);stroke-width:1.8;stroke-linecap:round}
.mv-cap{stroke:var(--navy);stroke-width:1.8;stroke-linecap:round}
.mv-line.mv-off,.mv-cap.mv-off{
  stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:4 4;opacity:.55}
.mv-lbl{
  font-family:var(--mono);font-size:11.5px;fill:var(--ink);letter-spacing:.01em}
.mv-lbl.mv-off{fill:var(--ink-3);font-style:italic}
.mv-lbl.mv-edit{fill:var(--navy);font-weight:600}

/* ---------- list ---------- */
.mv-summary{
  font-family:var(--mono);font-size:12px;color:var(--ink-2);
  padding:0 0 14px;border-bottom:1px solid var(--rule-2);margin-bottom:14px}
.mv-summary b{color:var(--ink);font-size:14px}
.mv-rows{display:flex;flex-direction:column;gap:8px}
.mv-row{
  display:grid;
  grid-template-columns:1fr auto auto auto;
  grid-template-areas:"name val state btn" "orig orig orig orig" "form form form form";
  gap:6px 12px;align-items:center;
  background:var(--card);border:1px solid var(--rule);border-radius:11px;
  padding:12px 14px}
.mv-name{grid-area:name;font-family:var(--serif);font-size:14.5px;font-weight:600;color:var(--ink)}
.mv-val{grid-area:val;font-family:var(--mono);font-size:15px;color:var(--ink);white-space:nowrap}
.mv-state{
  grid-area:state;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:100px;border:1px solid;white-space:nowrap}
.mv-s-ok{color:var(--match);border-color:#B6CDBE;background:#F2F7F3}
.mv-s-review{color:var(--chalk);border-color:#E4CE96;background:#FBF6E9}
.mv-s-withheld{color:var(--ink-3);border-color:var(--rule);background:var(--card-2)}
.mv-s-edited{color:var(--navy);border-color:#E2B49E;background:#FBF0EA}
.mv-editbtn{
  grid-area:btn;background:none;border:1px solid var(--rule);border-radius:8px;
  color:var(--ink-2);font-family:var(--body);font-size:12.5px;
  min-height:36px;padding:6px 12px;cursor:pointer}
.mv-editbtn:hover{border-color:var(--navy);color:var(--navy)}
.mv-orig{
  grid-area:orig;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.mv-editform{grid-area:form;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding-top:8px;border-top:1px solid var(--rule-2);margin-top:4px}
.mv-editform[hidden]{display:none}
.mv-editform input{
  width:110px;font-family:var(--mono);font-size:15px;padding:9px 11px;
  border:1px solid var(--rule);border-radius:8px;background:var(--card)}
.mv-editform input:focus{border-color:var(--navy);outline:none;
  box-shadow:0 0 0 3px rgba(255,98,79,.12)}
.mv-editform input[aria-invalid="true"]{border-color:var(--snug);
  box-shadow:0 0 0 3px rgba(168,72,47,.14)}
.mv-save,.mv-cancel{
  min-height:38px;padding:8px 16px;border-radius:8px;cursor:pointer;
  font-family:var(--body);font-size:13.5px}
.mv-save{background:var(--navy);color:#fff;border:1px solid var(--navy);font-weight:600}
.mv-save:hover{background:var(--navy-ink)}
.mv-cancel{background:none;border:1px solid var(--rule);color:var(--ink-2)}
.mv-cancel:hover{border-color:var(--ink-3)}
.mv-foot{
  font-size:12.5px;line-height:1.55;color:var(--ink-3);
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--rule-2)}

/* focus visibility */
.mv-wrap :is(button,input):focus-visible{
  outline:2px solid var(--navy);outline-offset:3px}

/* ---------- closet: a saved scan is clickable ---------- */
.li[data-mv-open]{cursor:pointer}
.closet-scanbadge{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);background:#FBF0EA;border:1px solid #E2B49E;
  padding:2px 8px;border-radius:100px;margin-left:8px;vertical-align:1px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .mv-wrap{grid-template-columns:1fr;gap:20px}
}
@media(max-width:560px){
  .mv-row{
    grid-template-columns:1fr auto;
    grid-template-areas:"name state" "val btn" "orig orig" "form form"}
  .mv-val{font-size:17px}
  .mv-editbtn{justify-self:end}
  .mv-editform input{flex:1 1 100px;width:auto}
  .mv-save,.mv-cancel{flex:1 1 90px}
}