/* The look of the shared paste-and-review upload (static/upload_wizard.js).

   The engine moved out of manage_binders.html and the two pages started driving it, but the CSS
   stayed behind -- so Upload Target rendered the same markup with none of the rules: the format
   toggle was two plain buttons, the review table had no monospace column and no part labels. The
   code was shared and the look was not, which reads to anyone using it as two different
   features.

   So these live beside the engine. They are the rules the wizard's own markup needs and nothing
   else: `.chain-tag` and `.seq-mono` are also used by the construct list on the binders page,
   which is why they are here rather than duplicated there. */

/* Which input shape -- Single-domain vs Antibody, Standard vs pMHC. */
.bt-toggle { display: inline-flex; border: 1px solid var(--border-light); border-radius: 8px;
  overflow: hidden; }
.bt-opt { padding: 8px 16px; font-size: 13px; font-weight: 600; border: none; background: #fff;
  color: var(--grey-text); cursor: pointer; font-family: var(--font-primary); }
.bt-opt.active { background: var(--pink); color: #fff; }
.bt-opt + .bt-opt { border-left: 1px solid var(--border-light); }

/* The review table. Scrolls inside its own box so a hundred rows do not push the buttons off. */
.parse-preview { border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden;
  margin-bottom: 16px; max-height: 350px; overflow-y: auto; }
.parse-preview table { width: 100%; border-collapse: collapse; }
.parse-preview th { background: #fafafa; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.3px; padding: 8px 12px; text-align: left; font-weight: 600;
  position: sticky; top: 0; }
.parse-preview td { padding: 8px 12px; border-top: 1px solid var(--border-light);
  font-size: 13px; }
.parse-preview .seq-mono { font-family: 'Monaco','Menlo',monospace; font-size: 11px;
  max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seq-mono { font-family: 'Monaco','Menlo',monospace; }

/* What a part is, above the part. Same convention the construct list uses, so a multi-part row
   reads the same way in both places. */
.chain-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--grey-text); font-weight: 700; margin: 6px 0 3px; }

/* Review-row expander: a quiet control, since most rows never need opening. */
.rev-exp { background: none; border: none; padding: 0 2px; cursor: pointer;
  color: var(--grey-text); line-height: 1; display: inline-flex; align-items: center; }
.rev-exp:hover { color: var(--pink); }
.rev-detail > td { background: #FAFBFC; padding: 10px 12px 14px; }
.rev-detail .chain-tag { margin: 6px 0 4px; }
.aa-block { font-family: 'Monaco','Menlo',monospace; font-size: 11px; line-height: 1.7;
  word-break: break-all; color: var(--dark-navy); }

/* Something to fix, and something to know. The blocking variant is the one that disables the
   button, so it does not look like the other one. */
.warning-box { background: #FFF3E0; border: 1px solid #FFB74D; border-radius: 8px;
  padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: #E65100; }
.warning-box.blocking { background: #FFEBEE; border-color: #EF5350; color: #B71C1C; }
.info-box { background: #E3F2FD; border: 1px solid #64B5F6; border-radius: 8px;
  padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: #1565C0; }

/* A button that is working says so on itself. Without this the only feedback for a multi-second
   save was nothing at all, which is why Upload got clicked twice and made two groups. */
.uw-spin { font-size: 14px; vertical-align: middle; animation: uw-spin 0.9s linear infinite; }
@keyframes uw-spin { to { transform: rotate(360deg); } }

/* NO `.row-num` RULE HERE. There was one -- `display: inline-block` for a row number in a review
   card -- and this file is loaded on every page, so it reached every `.row-num` in the app. Every
   one of them is a <th> or a <td>: the construct preview, the construct list, the binder list,
   the target list. `display: inline-block` takes a cell OUT of the table's column model, so the
   browser wraps it in an ANONYMOUS cell and the real first column is left empty -- a narrow blank
   column between "#" and "Name" that nothing renders into and no markup explains.

   The card that wanted it no longer exists. A bare, generic class name in a globally loaded
   stylesheet is the trap: `.row-num` here and `.cn-table .row-num` there are one word with two
   owners, and the more specific rule did not save it, because `display` was declared in only one
   of them. */