/* Protocol customization cards. Shared by the project wizard and the landing-page cost
   estimator -- one renderer (wizard_alts.js) and one set of styles, so the same offer
   looks the same in both places. Lifted out of designer.html. */
/* A method choice is a swap, not an add-on, so it reads as a select rather than a checkbox. */
.cfg-method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; }
.cfg-method-card { border: 2px solid var(--border-light); border-radius: 10px; padding: 12px 14px 14px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s; background: #fff;
  display: flex; flex-direction: column; }
.cfg-method-card:hover { border-color: var(--pink); }
.cfg-method-card.selected { border-color: var(--pink); background: rgba(236,58,148,0.04); }
.cfg-method-card.unavailable { opacity: .55; cursor: not-allowed; background: #fafafb; }
.cfg-method-card.unavailable:hover { border-color: var(--border-light); }
.cfg-method-why { margin-top: 6px; font-size: 11.5px; font-weight: 600; color: #A8690A; }
.cfg-method-head { display: flex; align-items: flex-start; gap: 8px; }
.cfg-method-radio { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; accent-color: var(--pink); }
.cfg-method-name { font-size: 13.5px; font-weight: 700; color: var(--dark-navy); line-height: 1.35; }
.cfg-method-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--grey-text); }
.cfg-method-fig { margin: 10px 0 8px; background: #fbfbfc; border: 1px solid var(--border-light);
  border-radius: 8px; padding: 8px; overflow: hidden; }
.cfg-method-fig svg { display: block; width: 100%; height: auto; }
.cfg-method-desc { font-size: 12px; color: var(--grey-text); line-height: 1.5; }
.cfg-method-fig { overflow: visible; }
.cfg-method-step { font-size: 11px; color: var(--grey-text); margin-bottom: 8px; }

/* INSIDE the figure: the plate this method lays out. Shared, because both wizards draw one now --
   the landing page's estimator draws a one-binder version of the same layout. Without these the
   plate takes plate.css's full-page sizing and runs straight out of the card, which is what it
   did the moment the estimator started drawing figures. */
.cfg-method-fig .plate { display: block; width: 100%; padding: 8px 9px 9px; }
.cfg-method-fig .plate .wells { width: 100%; grid-column: auto; }
.cfg-method-fig .plate table { width: 100%; font-size: 8px; table-layout: fixed; }
.cfg-method-fig .plate .well { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 26px;
  margin: 0 auto; }
.cfg-method-fig .plate td, .cfg-method-fig .plate th { padding: 1px; text-align: center; }
.cfg-method-fig .rowmap { display: grid; grid-column: auto; grid-row: auto;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-items: start; gap: 5px 12px; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--border-light); }
.cfg-method-fig .rowmap-item { display: flex; align-items: flex-start; gap: 5px; min-width: 0; }
.cfg-method-fig .rowmap-item .chip { flex: none; }
.cfg-method-fig .rowmap-label { min-width: 0; }
.cfg-method-fig .rowmap-label { font-size: 9px; line-height: 1.25; }
.cfg-method-fig .rowmap-role { font-size: 8px; opacity: .75; }