/* workspace/starcode/css/cosmos-dev.css */
/* SC-DEV-TESTCODE: the developer test barcode on the capture screen.
   A quiet DEV chip under the capture buttons opens a small centered panel
   holding a real scannable EAN-13 drawn white-on-black-page style: the
   code card itself is white so the bars carry full contrast and the baked
   quiet zones stay clear. js/dev-code-panel.js builds all of this markup
   at run time; index.html carries no dev markup at all. */
.dev-code-toggle {
  display: block;
  margin: 2px auto 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 2px;
  padding: 3px 10px;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s;
}
.dev-code-toggle:hover,
.dev-code-toggle.open {
  opacity: 1;
  border-color: var(--accent-dim);
  color: var(--text-secondary);
}
/* The panel sits above the views and nav (z-index 250) but below the
   scanner overlay (300), so Scan it opens the real capture screen over
   it; the panel also closes itself the moment Scan it fires. */
.dev-code-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 250;
  width: min(498px, calc(100vw - 24px));
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  display: none;
  flex-direction: column;
  gap: 10px;
}
.dev-code-panel.open { display: flex; }
.dev-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dev-code-title {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.dev-code-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.dev-code-close:hover { color: var(--text-primary); }
/* The white code card. The canvas already bakes the specified quiet zones
   in; the card's own padding only adds more clear margin. The canvas
   renders at four device pixels per module and CSS only ever shrinks it,
   so the bars stay evenly proportioned at phone widths. */
.dev-code-card {
  background: #ffffff;
  border-radius: 6px;
  padding: 10px 8px 8px;
  text-align: center;
}
.dev-code-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.dev-code-digits {
  font-family: var(--font-data);
  font-size: 14px;
  letter-spacing: 2px;
  color: #111111;
  margin-top: 6px;
}
.dev-code-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.dev-code-pick {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-secondary);
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.dev-code-pick:hover { border-color: var(--border-light); color: var(--text-primary); }
.dev-code-pick.active {
  border-color: var(--accent-dim);
  color: var(--accent);
}
.dev-code-scan { align-self: center; }
.dev-code-hint {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim);
  text-align: center;
}
.dev-code-words {
  display: flex;
  gap: 6px;
}
.dev-code-words-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-primary);
  font-size: 12px;
  padding: 6px 8px;
}
.dev-code-words-input.dev-code-words-bad { border-color: #c0392b; }