/* Demo build only. The TV screen is a fixed 1920 x 1080 stage; #fit clips it to the window (so the page never scrolls
   sideways) and demo.js scales it to fit, centred, with the remote below it and room for the shared demo pill above. */
#fit { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }

/* the to-do page is clickable while it is open (it ignores the pointer when closed, so the Home screen under it works) */
#todo.open { pointer-events: auto; }
#todo .view, #todo .task, #todo .tile, #todo .pill { cursor: pointer; }

#demoBar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-size: 12px; line-height: 16px;
  -webkit-user-select: none; user-select: none; pointer-events: none;
}
#demoHint {
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(10, 15, 34, 0.74); color: #fff; letter-spacing: 0.01em;
}
#demoRemote { display: inline-flex; gap: 6px; pointer-events: auto; }
#demoRemote button {
  min-width: 44px; height: 36px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  background: rgba(10, 15, 34, 0.74); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 14px; font-weight: 500; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#demoRemote button.wide { min-width: 52px; font-size: 12px; }
#demoRemote button:active { background: rgba(60, 90, 170, 0.9); }
@media (pointer: coarse) { #demoRemote button { height: 44px; } }
@media (max-width: 520px) {
  #demoHint { white-space: normal; text-align: center; }
  #demoRemote button { min-width: 48px; height: 44px; }
  #demoRemote button.wide { min-width: 48px; }
}
@media (max-width: 360px) {
  #demoRemote { gap: 4px; }
  #demoRemote button, #demoRemote button.wide { min-width: 44px; padding: 0 6px; }
}