/* ==========================================================================
   Barcode generator
   Controls on the left, the barcode on the right, on a white card — because a
   barcode is a black-on-white object and showing it on the page's dark
   surface would be showing something that does not exist.
   ========================================================================== */

.bc-panel{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  align-items:stretch;
}
@media (max-width:820px){
  .bc-panel{grid-template-columns:1fr;}
}

.bc-controls{padding:22px 20px;border-right:1px solid var(--rule);}
@media (max-width:820px){
  .bc-controls{border-right:none;border-bottom:1px solid var(--rule);}
}

.bc-controls .ci input[type="text"]{
  width:100%;padding:11px 12px;
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--ink);
  font-family:var(--f-mono);font-size:1.02rem;letter-spacing:.04em;
}
.bc-controls .ci input[type="text"]:focus{outline:none;border-color:var(--accent);}

/* The live value beside its own label, so the slider does not need a second
   line to say what it is currently set to. */
.bc-controls label[for="height"]{display:flex;justify-content:space-between;gap:10px;}
.bc-controls label[for="height"] span{font-family:var(--f-mono);color:var(--ink-2);}

.check{
  display:flex;align-items:center;gap:9px;margin-top:4px;
  font-size:.93rem;color:var(--ink);cursor:pointer;
}
.check input{width:17px;height:17px;accent-color:var(--accent);flex-shrink:0;}

.bc-buttons{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;}
.bc-buttons .btn{flex:1 1 140px;justify-content:center;}

.bc-out{
  padding:22px 20px;display:flex;flex-direction:column;gap:16px;min-width:0;
}

/* Always white, in both themes. A barcode printed on anything else is not a
   barcode, and showing it on a dark card would be showing a thing that will
   not exist on paper. */
.bc-stage{
  display:flex;align-items:center;justify-content:center;
  padding:22px 18px;border-radius:var(--radius-sm);
  background:#fff;border:1px solid var(--rule-2);min-height:190px;
}
.bc-stage svg{width:100%;height:auto;max-width:460px;display:block;}
.bc-empty{margin:0;color:#5d6360;font-size:.92rem;text-align:center;line-height:1.6;}

/* The GS1 note is the longest message and the least alarming; msg-busy is the
   neutral tone, and its spinner is switched off because nothing is loading. */
#msgArea .msg-busy::before{display:none;}
#msgArea .msg + .msg{margin-top:9px;}