/* ONE button style for the TV: dock buttons (.db, .db.ic, .db.primary), the top-bar and full-screen links (.lk), the camera on the screen,
   and the admin's top-bar preview. Everything is driven by these tokens; needs --ink --dim --teal --amber from the page. */
:root {
  --btn-h: 36px; --btn-r: 12px; --btn-px: 14px; --btn-gap: 8px; --btn-font: 600 13px/1 system-ui, sans-serif;
  --btn-bg: linear-gradient(180deg, #1a1f22, #111416); --btn-blur: none;
  --btn-shadow: 0 3px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .04);
  --btn-ring: 0 3px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--teal);          /* the teal hover ring */
  --btn-primary-bg: linear-gradient(180deg, #ffc868, var(--amber)); --btn-primary-ink: #2a1604;
}
/* full screen (and the camera over the picture): the same buttons, translucent with a blur so they read over the scene. That is the only difference. */
.ov, #screen > .shot { --btn-bg: rgba(12, 15, 17, .55); --btn-blur: blur(10px); }

.db, .lk { display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap); box-sizing: border-box; height: var(--btn-h); padding: 0 var(--btn-px);
  border: 0; border-radius: var(--btn-r); font: var(--btn-font); color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer;
  background: var(--btn-bg); -webkit-backdrop-filter: var(--btn-blur); backdrop-filter: var(--btn-blur); box-shadow: var(--btn-shadow); }
.db[hidden], .lk[hidden] { display: none; }                                                   /* (display: inline-flex above would otherwise win over the hidden attribute) */
.db:hover, .lk:hover { box-shadow: var(--btn-ring); }
.db svg, .lk svg { width: 16px; height: 16px; flex: none; }
.db.ic, .lk:not(.wide) { width: var(--btn-h); padding: 0; }                                 /* icon-only buttons are square */
.db.ic.on { box-shadow: 0 3px 8px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--teal); color: var(--teal); }
.db.primary { background: var(--btn-primary-bg); color: var(--btn-primary-ink); }
.db.primary:disabled { background: linear-gradient(180deg, #2a2418, #1a160f); color: var(--dim); cursor: default; }
.db .k { font: 700 10px/1 var(--mono, ui-monospace, monospace); color: var(--faint, #56625f); margin-left: 2px; }
.db.primary .k { color: rgba(42, 22, 4, .55); }
@media (max-width: 560px) { .lk.wide span { display: none; } .lk.wide { width: var(--btn-h); padding: 0; } }      /* Advertise is icon-only on phones */
.pv-phone .lk.wide { width: var(--btn-h); padding: 0; } .pv-phone .lk.wide span { display: none; }                  /* the admin preview's "phone" switch */