:root{--gap:12px;--fg:#1d1d1f;--bg:#fff;--muted:#6e6e73;--line:#e6e6e7;--accent:#2563eb;--danger:#dc2626}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
body{margin:0;padding:16px;background:#fff;color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.container{max-width:1300px;margin:0 auto;display:grid;gap:16px}
.card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.panel{border:1px solid var(--line);border-radius:12px;padding:12px}
.silver-bg{background:#f9f9f9}
.gold-bg{background:#fffdeb}
h1{margin:0 0 6px;font-size:clamp(18px,2.6vw,22px)}
h2{margin:8px 0;font-size:clamp(16px,2.2vw,20px)}
label{display:block;font-weight:600;margin-bottom:6px}

/* Make selects larger to encourage larger native picker UI */
input[type="number"],input[type="text"],select{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;
  font-size:18px; /* bumped from 16px */
  line-height:1.5;min-height:48px; /* bumped from 44px */
}
/* Only shrink the four reference selects */
#refSilver select, #refGold select {
  font-size: 15px;
  min-height: 40px;
  padding: 8px 10px;
}
label { font-size: 14px; }       /* default was bold 16–20 via headings */
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#f8f9fb;color:#111;padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:600}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.link{background:transparent;border-color:transparent;color:#dc2626;padding:0 6px}
.muted{color:var(--muted);font-size:14px}

.rows{margin-top:12px;display:grid;gap:var(--gap)}
.row{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px}
.result-readonly{background:#fafafa}
.error-field{border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.15)!important}

.field-item{position:relative;padding-right:36px}
.remove-x{position:absolute;top:0;right:0;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-weight:700;border-radius:6px;border:1px solid #f1c0bd;background:#ffecec;color:#a61b1b;cursor:pointer;z-index:2}
.remove-x:hover{background:#ffdcdc}

.result-cards{display:grid;gap:10px}
.result-card{border:1px solid var(--line);border-radius:12px;padding:12px}
.rowline{display:flex;align-items:center;gap:10px}
.label{color:var(--muted);font-size:13px}
.value{font-weight:600;margin-left:auto;text-align:right}
.right{text-align:right}

/* ===== NEW: column layout wrapper (easier to insert ref blocks between sections) ===== */
.layout-cols{
  display:grid; gap:16px;
  grid-template-columns: 1fr; /* mobile: single column */
}
.col{display:grid; gap:16px;} /* stack inside each column */

@media(min-width:900px){
  .layout-cols{ grid-template-columns: 1fr 1fr; } /* desktop: two columns */
}

/* ===== Reference inline blocks between sections ===== */
.ref-inline{
  /* keep visual consistency but no headings/labels inside */
}
.ref-inline .ref-grid{
  display:grid; gap:10px;
}
@media(min-width:900px){
  .ref-inline .ref-grid{ grid-template-columns: 1fr 1fr; } /* side-by-side on desktop */
}
@media(max-width:899px){
  .ref-inline .ref-grid{ grid-template-columns: 1fr; } /* stacked full width on mobile */
}

/* Existing reference section styles (kept if ever reused elsewhere) */
.ref-card .ref-row{display:grid;gap:10px}
@media(min-width:900px){.ref-card .ref-row{grid-template-columns:repeat(4,1fr)}}
@media(max-width:899px){.ref-card .ref-row{grid-template-columns:repeat(2,1fr)}}

/* Desktop row grids */
@media(min-width:900px){
  #calcA .row,#calcB .row{grid-template-columns:1.6fr 1fr 1fr 1.2fr;grid-template-areas:"item pct qty res" "remove remove remove remove";align-items:end}
  #calcA .row .field label,#calcB .row .field label{display:block}
  .field-item{grid-area:item}
  .field-pct{grid-area:pct}
  .field-qty{grid-area:qty}
  .field-res{grid-area:res}
  .field-remove{grid-area:remove;margin-top:4px;text-align:right}
  .remove-x{display:none}
  .field-remove{display:block}

  .byw .row{grid-template-columns:1.2fr 1fr 0.8fr 0.9fr 1.2fr;grid-template-areas:"comp weight unit pct res" "remove remove remove remove remove";align-items:end}
  .byw .field-comp{grid-area:comp}
  .byw .field-weight{grid-area:weight}
  .byw .field-unit{grid-area:unit}
  .byw .field-pct{grid-area:pct}
  .byw .field-res{grid-area:res}
  .byw .field-remove{grid-area:remove;margin-top:4px;text-align:right}
  .byw .field label{display:block}
}

/* Mobile row grids */
@media(max-width:899px){
  #calcA .row,#calcB .row{grid-template-columns:.9fr .9fr 1.2fr;grid-template-areas:"item item item" "pct qty res";align-items:end}
  #calcA .field-item,#calcB .field-item{grid-area:item}
  #calcA .field-pct,#calcB .field-pct{grid-area:pct}
  #calcA .field-qty,#calcB .field-qty{grid-area:qty}
  #calcA .field-res,#calcB .field-res{grid-area:res}
  #calcA .row .field label,#calcB .row .field label{display:block}
  .field-remove{display:none}
  .remove-x{display:inline-flex}

  .byw .row{grid-template-columns:.9fr .6fr .6fr 1.0fr;grid-template-areas:"comp comp comp comp" "weight unit pct res";align-items:end}
  .byw .field-comp{grid-area:comp;position:relative;padding-right:36px}
  .byw .field-weight{grid-area:weight}
  .byw .field-unit{grid-area:unit}
  .byw .field-pct{grid-area:pct}
  .byw .field-res{grid-area:res}
  .byw .row .field label{display:block}
}

/* Top spot prices side-by-side, centered */
.two-top{display:grid;gap:10px;grid-template-columns:1fr 1fr}
#global_spot_silver,#global_spot_gold{text-align:center}

.footer-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:12px}

/* Modal (unchanged) */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:1000}
.modal{background:#fff;border-radius:12px;max-width:520px;width:calc(100% - 40px);padding:20px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.2)}
.modal h3{margin:0 0 8px;font-size:18px}
.modal p{margin:0 0 16px;color:#444}
.modal .actions{display:flex;justify-content:flex-end;gap:8px}
.modal .btn.primary{padding:10px 14px}
.modal-open{display:flex}