/* EagleTagz demo: one look for icons, labels and accent colour (change #8, October 2026),
 * on Micro, Tracking and Camera. look.js adds the Camera labels; the worker moves
 * "[Patent Pending]" out of two headings into the badge below and spells "EagleTagz" the
 * same way everywhere.
 *
 * - "Patent pending" is a small gold badge beside a heading, not part of the heading.
 * - Purple meant four different things (AI on Micro, Refresh on Tracking, Copyright
 *   Registration, Load Audio). Tracking's Refresh buttons are tools, so they are gray now;
 *   gold stays for the one main action (Apple: "avoid using the same color to mean
 *   different things").
 * - Camera's round controls were five colours with icons only. They are now one dark style
 *   with a short white label beside each (Mobbin: Shopee, CapCut and Instagram camera rails);
 *   Camera on is gold, Record is red. */

.etz-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid rgba(241, 197, 14, 0.5);
  border-radius: 9999px;
  color: #f1c50e;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}

/* ---------- Tracking ---------- */
#refreshChartBtn,
#refreshMapBtn {
  background: rgba(255, 255, 255, 0.1) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
#refreshChartBtn:hover,
#refreshMapBtn:hover { background: rgba(255, 255, 255, 0.16) !important; }

/* ---------- Camera: the controls beside the picture ---------- */
.floating-controls { gap: 10px !important; }
.floating-controls > button {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(17, 24, 39, 0.72) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
.floating-controls > button:hover { background: rgba(31, 41, 55, 0.92) !important; }
.floating-controls > button i { color: inherit !important; }
.floating-controls > #startCameraBtn { background: #f1c50e !important; border-color: #f1c50e !important; color: #111827 !important; }
.floating-controls > #startRecordingBtn,
.floating-controls > #stopRecordingBtn { background: #dc2626 !important; border-color: #dc2626 !important; }
.floating-controls > button:focus-visible { outline: 2px solid #f1c50e; outline-offset: 2px; }
/* the label sits to the left of its button, over the picture, so the column doesn't grow */
.etz-rail-label {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* the guide under the camera, rebuilt by look.js to match the controls */
.etz-guide { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; font-size: 14px; }
.etz-guide > div { display: flex; align-items: flex-start; gap: 12px; }
.etz-guide i { width: 20px; margin-top: 2px; text-align: center; color: #d1d5db; }
.etz-guide .etz-red { color: #f87171; }
.etz-guide .etz-gold { color: #f1c50e; }
.etz-guide strong { display: block; color: #f9fafb; font-weight: 600; }
.etz-guide span { display: block; color: #9ca3af; font-size: 13px; line-height: 1.35; }