/**
 * SectorCalc — CANONICAL calculator form-field layout (all tools, present + future)
 *
 * Source of truth for readable number inputs beside unit selectors.
 * Imported by public/sc-theme.css and injected on every page by inject-site-nav.mjs.
 * Enforced by scripts/verify-form-fields.mjs (fails npm run build on violations).
 * Scaffold new tools with: npm run new:tool -- --id SC-0XX --slug x --title "X" --kind lit
 *
 * Markup contract:
 *   Engine panels → .uwrap > input + select.units
 *   Lit sidebars  → .sc-input-wrap > input.sc-input + select.sc-unit
 * Never use min-width:0 on value inputs in those wraps.
 */
.field input[type="number"],
.uwrap input[type="number"],
.sc-input[type="number"],
input.sc-input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
  font-variant-numeric:tabular-nums;
}
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button,
.uwrap input[type="number"]::-webkit-outer-spin-button,
.uwrap input[type="number"]::-webkit-inner-spin-button,
.sc-input[type="number"]::-webkit-outer-spin-button,
.sc-input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* Bare number fields (no unit select) */
.field > input[type="number"],
.field input[type="number"]:not(.units){
  font-variant-numeric:tabular-nums;
  overflow-x:auto;
  text-overflow:clip;
  box-sizing:border-box;
}

/* Pro UI (SC-020 / SC-021): unit+value row */
.uwrap{
  display:flex !important;
  gap:6px !important;
  align-items:stretch !important;
  width:100%;
  min-width:0;
}
.uwrap > input{
  flex:1 1 auto !important;
  min-width:5.75rem !important;
  width:auto !important;
  max-width:none !important;
  padding:8px 10px !important;
  font-family:var(--mono,'JetBrains Mono',Consolas,monospace) !important;
  font-size:14px !important;
  font-variant-numeric:tabular-nums;
  line-height:1.35 !important;
  overflow-x:auto !important;
  text-overflow:clip !important;
  box-sizing:border-box !important;
}
.uwrap > select.units,
.uwrap > select{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:3.75rem !important;
  max-width:5.5rem !important;
  padding:8px 6px !important;
  font-size:11px !important;
  box-sizing:border-box !important;
}

/* Narrow left panel: never force 3 numeric fields into one row */
.panel .row3,
.grid > .panel .row3,
.wrap .row3{
  grid-template-columns:1fr 1fr !important;
}
@media (max-width:560px){
  .panel .row,
  .panel .row3,
  .wrap .row,
  .wrap .row3{
    grid-template-columns:1fr !important;
  }
}

/* Give the input column a bit more room on desktop */
@media (min-width:1100px){
  .wrap > .grid{
    grid-template-columns:minmax(380px,540px) 1fr !important;
  }
}
@media (max-width:1000px){
  .wrap > .grid{
    grid-template-columns:1fr !important;
  }
}
/* Mobile: never let calculator panels force horizontal page scroll */
.wrap{
  max-width:min(1320px, 100%);
  overflow-x:clip;
}
.sc-layout{
  max-width:100%;
  overflow-x:clip;
}
@media (max-width:560px){
  .uwrap > input,
  .sc-input-wrap > .sc-input{
    min-width:0 !important;
  }
}

/* Lit / SC-008 / labor / quote / weld */
.sc-input-wrap{
  display:flex !important;
  gap:8px !important;
  align-items:stretch !important;
  width:100%;
  min-width:0;
}
.sc-input-wrap > .sc-input,
.sc-input-wrap > input.sc-input,
.sc-input-wrap > select.sc-input{
  flex:1 1 auto !important;
  min-width:5.75rem !important;
  width:auto !important;
  overflow-x:auto !important;
  text-overflow:clip !important;
  font-variant-numeric:tabular-nums;
  box-sizing:border-box !important;
}
.sc-input-wrap > .sc-unit,
.sc-input-wrap > select.sc-unit{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:3.75rem !important;
  max-width:5.75rem !important;
  box-sizing:border-box !important;
}

/* Dimension rows in SC-008 — keep numeric cells readable */
.sc-dim input[type="number"],
.sc-dim input{
  min-width:3.25rem;
  padding:6px 8px !important;
  font-variant-numeric:tabular-nums;
  overflow-x:auto;
  text-overflow:clip;
  box-sizing:border-box;
}
@media (max-width:900px){
  .sc-dims-hd,
  .sc-dim{
    grid-template-columns:24px 1.2fr 1fr 1fr 1.1fr 26px !important;
  }
}