/**
 * Wall Plate Template Generator — page template styles.
 * Scoped under #mwp-wallplate. Live-scales an outlet/switch SVG by the user's
 * clay shrinkage rate and prints a true 1:1 sheet with a calibration square.
 */

/* ── Hero (mirrors the shop archive header) ─────────────────────────────── */
.mwp-wp-hero{
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  text-align: center;
  background: var(--color-warm-white);
}
.mwp-wp-hero .section-label{ display:block; margin-bottom: var(--space-xs); }
.mwp-wp-hero .page-title{
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 500; color: var(--color-charcoal); line-height: 1;
  margin-bottom: var(--space-sm);
}
.mwp-wp-hero p{
  font-size: 1rem; color: var(--color-warm-gray); font-weight: 400;
  max-width: 520px; margin: 0 auto;
}

/* ── Widget ─────────────────────────────────────────────────────────────── */
#mwp-wallplate{
  --cream:#F6F1EB; --sand:#E8DFD4; --warm-white:#FDFAF7;
  --terracotta:#C4704B; --clay:#A0593C; --charcoal:#2E2A26; --warm-gray:#6B635B;
  --radius:14px;
  max-width:820px; margin:0 auto; color:var(--charcoal);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  line-height:1.5; box-sizing:border-box;
}
#mwp-wallplate *{box-sizing:border-box;}
#mwp-wallplate .mwp-wp-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start;
}
@media (max-width:640px){ #mwp-wallplate .mwp-wp-grid{grid-template-columns:1fr;} }
#mwp-wallplate .mwp-wp-card{
  background:var(--warm-white); border:1px solid var(--sand);
  border-radius:var(--radius); padding:22px; box-shadow:0 1px 3px rgba(46,42,38,.05);
}
/* fields */
#mwp-wallplate label{display:block; font-size:13px; font-weight:600; color:var(--charcoal); margin:0 0 6px;}
#mwp-wallplate .mwp-wp-hint{font-weight:400; color:var(--warm-gray); font-size:12px;}
#mwp-wallplate select, #mwp-wallplate input[type=number]{
  width:100%; padding:11px 12px; font-size:16px; border:1px solid var(--sand);
  border-radius:9px; background:#fff; color:var(--charcoal); -webkit-appearance:none; color-scheme:light;
}
#mwp-wallplate select:focus, #mwp-wallplate input[type=number]:focus{
  outline:none; border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(196,112,75,.15);}
#mwp-wallplate .mwp-wp-field{margin-bottom:16px;}
/* One row per gang. Gangs read left-to-right on the plate, so they stack in the
   same order here rather than sitting side by side and wrapping unpredictably. */
#mwp-wallplate .mwp-wp-devices{display:flex; flex-direction:column; gap:10px;}
#mwp-wallplate .mwp-wp-gang{display:flex; align-items:center; gap:10px;}
#mwp-wallplate .mwp-wp-gang label{
  flex:0 0 62px; margin:0; font-size:12px; color:var(--warm-gray);
  text-transform:uppercase; letter-spacing:.04em;
}
#mwp-wallplate .mwp-wp-gang select{flex:1 1 auto; padding:9px 10px; font-size:14px;}
#mwp-wallplate input[type=range]{width:100%; accent-color:var(--terracotta); margin-top:8px;}
#mwp-wallplate .mwp-wp-shrinkval{font-weight:600; color:var(--clay);}
/* preview */
#mwp-wallplate .mwp-wp-preview{
  display:flex; align-items:center; justify-content:center;
  background:var(--cream); border-radius:12px; padding:18px; min-height:320px;
}
#mwp-wallplate .mwp-wp-preview svg{max-width:100%; height:auto;}
#mwp-wallplate .mwp-wp-plate{fill:#fff; stroke:var(--charcoal); stroke-width:1.5;}
#mwp-wallplate .mwp-wp-cut{fill:#efe7dc; stroke:var(--terracotta); stroke-width:1.5;}
#mwp-wallplate .mwp-wp-screw{fill:#fff; stroke:var(--clay); stroke-width:1.25;}
#mwp-wallplate .mwp-wp-ctr{stroke:var(--warm-gray); stroke-width:.6; stroke-dasharray:4 3;}
#mwp-wallplate .mwp-wp-ghost{fill:none; stroke:var(--warm-gray); stroke-width:1; stroke-dasharray:6 4; opacity:.55;}
/* legend */
#mwp-wallplate .mwp-wp-legend{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  font-size:12px; color:var(--warm-gray); margin-top:10px;
}
#mwp-wallplate .mwp-wp-legend span{display:inline-flex; align-items:center; gap:6px;}
#mwp-wallplate .mwp-wp-swatch{width:20px; height:0; border-top:2px solid var(--charcoal);}
#mwp-wallplate .mwp-wp-swatch--ghost{border-top:2px dashed var(--warm-gray);}
/* dims table */
#mwp-wallplate table{width:100%; border-collapse:collapse; margin-top:8px; font-size:14px;}
#mwp-wallplate th, #mwp-wallplate td{padding:8px 8px; text-align:left; border-bottom:1px solid var(--sand);}
#mwp-wallplate th{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--warm-gray);}
#mwp-wallplate td.mwp-wp-wet{font-weight:600; color:var(--clay);}
/* Device heading inside the measurement table — a multi-gang plate lists each
   device's numbers as its own block, so the blocks need a visible boundary. */
#mwp-wallplate tr.mwp-wp-grouprow td{
  background:var(--cream); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--charcoal);
  padding-top:10px; padding-bottom:6px;
}
#mwp-wallplate .mwp-wp-strike{color:var(--warm-gray);}
/* mm equivalent on round holes — secondary to the inch figure it follows */
#mwp-wallplate .mwp-wp-mm{font-weight:400; color:var(--warm-gray); white-space:nowrap;}
/* buttons + callouts */
#mwp-wallplate .mwp-wp-actions{display:flex; gap:10px; flex-wrap:wrap;}
#mwp-wallplate .mwp-wp-print{
  flex:1 1 200px; margin-top:6px; background:var(--terracotta); color:#fff; border:none;
  padding:13px 18px; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer;
}
#mwp-wallplate .mwp-wp-print:hover{background:var(--clay);}
#mwp-wallplate .mwp-wp-download{
  flex:1 1 200px; margin-top:6px; background:#fff; color:var(--terracotta);
  border:1.5px solid var(--terracotta); padding:13px 18px; border-radius:10px;
  font-size:15px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
#mwp-wallplate .mwp-wp-download:hover{background:var(--cream); color:var(--clay); border-color:var(--clay);}
#mwp-wallplate .mwp-wp-callout{
  background:var(--cream); border-left:3px solid var(--terracotta);
  padding:12px 14px; border-radius:0 8px 8px 0; font-size:13px; color:var(--warm-gray); margin-top:16px;
}
#mwp-wallplate .mwp-wp-warn{
  background:#FBF3EC; border-left:3px solid var(--clay);
  padding:10px 13px; border-radius:0 8px 8px 0; font-size:12.5px;
  color:var(--warm-gray); margin-top:12px;
}
#mwp-wallplate .mwp-wp-foot{text-align:center; font-size:12px; color:var(--warm-gray); margin-top:22px;}
#mwp-wallplate .mwp-wp-foot a{color:var(--clay); text-decoration:none; font-weight:600;}