app.css

@font-face {
  font-family: "SpaceGrotesk";
  src: url("SpaceGrotesk-Regular.ttf") format("truetype");
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
  /* Kills the elastic overscroll ("rubber band") drag. Without this, any
     scroll container still slides vertically under a touch drag and springs
     back even when its content fits entirely on screen - which is what the
     login screen was doing. */
  overscroll-behavior: none;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "SpaceGrotesk", monospace;
  background: #000;
  color: #fff;
  /* 100vh is the viewport WITHOUT the soft keyboard, so once the keyboard
     opens on a login/register field the body stays taller than what is
     actually visible and the content shifts. dvh tracks the live viewport;
     vh stays first as the fallback for WebViews that lack dvh. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.screen {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  min-height: 0;
  /* Screens that opt into overflow-y:auto inline must not rubber-band or
     chain their scroll up to the body. `none` rather than `contain`:
     `contain` stops the chaining but still permits the local stretch
     affordance, which is the visible slide being fixed here. */
  overscroll-behavior: none;
}
.screen.active { display: flex; }

/* Login/register/scan: this app is landscape-locked (see MainActivity), so
   the viewport is often only ~360-420px tall on a real phone - not a rare
   edge case. Every vertical gap here is clamp()'d to vh so the form
   compresses to fit that space instead of relying on scrolling to reach
   it. Centered (not flex-start): on the far more common case of a normal
   or tall screen, flex-start left the form pinned under the top bar with
   a dead block of empty space below it - center uses that space instead.
   Safe to center now that content is verified to fit at minimum realistic
   height (measured 0px overflow @ 360px), so there's nothing left above
   the fold for centering to hide; overflow-y:auto stays only as a
   last-resort safety net (e.g. extreme OS-level font scaling). */
.fit-screen {
  justify-content: center;
  padding-top: clamp(10px, 2.8vh, 30px);
  padding-bottom: clamp(10px, 2.8vh, 30px);
  overflow-y: auto;
}

h1 {
  font-size: clamp(1.05em, 4vh, 1.5em);
  letter-spacing: 0.15em;
  margin-bottom: clamp(10px, 3vh, 32px);
}

input {
  background: #111;
  border: 1px solid #333;
  color: #fff;
  font-family: inherit;
  font-size: 1.1em;
  padding: clamp(8px, 2vh, 12px) 16px;
  width: 100%;
  max-width: 320px;
  margin-bottom: clamp(6px, 1.5vh, 10px);
  border-radius: 2px;
  outline: none;
}
input:focus { border-color: #555; }

.btn {
  background: #111;
  color: #fff;
  border: 1px solid #333;
  font-family: inherit;
  font-size: 1.1em;
  padding: clamp(8px, 2vh, 12px) 24px;
  cursor: pointer;
  border-radius: 2px;
  width: 100%;
  max-width: 320px;
  letter-spacing: 0.08em;
  text-align: center;
}
.btn + .btn { margin-top: clamp(6px, 2.2vh, 10px); }
.btn:active { background: #1a1a1a; }
.btn.primary { border-color: #00A2E8; color: #00A2E8; }
.btn.danger  { border-color: #f44336; color: #f44336; }
.btn:disabled { opacity: 0.4; cursor: default; }

.status-msg {
  font-size: 0.95em;
  color: #f44336;
  margin-top: clamp(6px, 2.2vh, 14px);
  min-height: 1.2em;
  text-align: center;
}

/* Scan screen */
/* min-height:0 overrides the flex default of min-height:auto, which would
   otherwise force this box to at least its content's size and push
   #screen-scan into overflow instead of letting #device-list do its own
   internal scrolling below. */
#scan-idle, #scan-active { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; flex: 1; min-height: 0; }
#scan-active { display: none; }

#pulse-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid #00A2E8;
  position: relative;
  /* margin-top has a 36px floor, not the usual small clamp floor: the
     ::before/::after halos below are 150/190px centered on this 120px box,
     so they overhang it by (190-120)/2 = 35px on every side. Less than
     35px clearance above and the halo's top gets rendered above this
     element's own box - into negative scroll territory that can never be
     scrolled to, i.e. invisibly clipped. Confirmed on a real device. */
  margin: clamp(36px, 4vh, 40px) 0 clamp(20px, 3vh, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#pulse-ring::before, #pulse-ring::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 2px solid #00A2E8;
  animation: pulse 2s ease-out infinite;
}
#pulse-ring::before { width: 150px; height: 150px; animation-delay: 0s; }
#pulse-ring::after  { width: 190px; height: 190px; animation-delay: 0.6s; }
@keyframes pulse {
  0%   { opacity: 0.6; transform: scale(0.85); }
  100% { opacity: 0;   transform: scale(1.1); }
}
#scan-label { font-size: 1em; color: #fff; letter-spacing: 0.15em; margin-top: clamp(20px, 5vh, 50px); margin-bottom: clamp(12px, 3vh, 24px); flex-shrink: 0; }

#device-list { width: 100%; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: none; }
.device-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 8px;
  border-bottom: 1px solid #1a1a1a;
  cursor: pointer;
  font-size: 1em;
  -webkit-tap-highlight-color: transparent;
}
.device-item:active { background: #0d0d0d; }
.device-rssi { font-size: 0.8em; color: #555; }
.empty-msg { color: #444; padding: 24px 0; text-align: center; font-size: 0.9em; }

/* Full-screen iframes */
#screen-home, #screen-rowing { padding: 0; }
#home-frame { width: 100%; height: 100%; border: none; display: block; }
#screen-rowing { align-items: stretch; justify-content: flex-start; }
#screen-rowing #main-container { height: 100%; }

/* Overlays on rowing screen */
.rowing-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: #000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  z-index: 20;
}
.rowing-overlay.visible { display: flex; }

/* Top bar */
#topbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #0a0a0a;
  border-bottom: 1px solid #1a1a1a;
  align-items: stretch;
  z-index: 300;
}
#topbar.visible { display: flex; }
.tbar-btn {
  background: none;
  color: #666;
  border: none;
  font-family: inherit;
  font-size: 0.95em;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 0 20px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.tbar-btn:active { background: #111; color: #fff; }
.tbar-btn.danger { color: #744; }
.tbar-btn.danger:active { color: #f44; background: #110000; }
.tbar-btn.accent { color: #00A2E8; }
.tbar-btn.accent:active { color: #00A2E8; background: #00111a; }
.tbar-version {
  font-size: 0.7em;
  color: #444;
  letter-spacing: 0.08em;
  white-space: nowrap;
  align-self: center;
}
#tbar-user { display: flex; align-items: center; margin-left: 8px; margin-right: 4px; }
.tbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #00A2E8;
  color: #000;
  font-size: 0.7em;
  font-weight: bold;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Status screens */
.big-label {
  font-size: 1.2em;
  letter-spacing: 0.12em;
  margin-bottom: 28px;
}

/* Status banner (FTMS state) */
#ftmsBanner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "SpaceGrotesk", monospace;
  font-size: 1.6em;
  font-weight: bold;
  letter-spacing: 0.15em;
  color: #fff;
  text-align: center;
  padding: 24px 36px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid #333;
  border-radius: 4px;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
#ftmsBanner.visible { opacity: 1; }

/* Save dialog + offline choice */
.ftms-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 150;
  font-family: "SpaceGrotesk", monospace;
  overflow-y: auto;
  overscroll-behavior: none;
  padding: 12px;
}

/* When the top bar is visible, push everything below it */
body.with-bar { padding-top: 56px; }
body.with-bar .ftms-overlay { inset: 56px 0 0 0; }
.ftms-overlay.visible { display: flex !important; }

.ftms-overlay-title {
  font-size: 1.4em;
  font-weight: bold;
  letter-spacing: 0.15em;
  color: #fff;
  margin-bottom: 24px;
}
.ftms-overlay-subtitle {
  font-size: 0.9em;
  color: #666;
  letter-spacing: 0.1em;
  margin-top: -16px;
  margin-bottom: 24px;
}

/* Summary grid (save dialog) */
.ftms-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #1a1a1a;
  border: 1px solid #1a1a1a;
  margin-bottom: 24px;
  width: 90%;
  max-width: 360px;
}
.ftms-summary-tile { background: #000; padding: 12px; text-align: center; }
.ftms-summary-label { font-size: 0.75em; color: #555; letter-spacing: 0.1em; }
.ftms-summary-value { font-size: 1.4em; color: #fff; margin-top: 4px; }

/* Buttons inside overlays */
.ftms-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 90%;
  max-width: 360px;
}
.ftms-btn {
  background: #000;
  color: #fff;
  border: 1px solid #333;
  padding: 14px;
  font-size: 1em;
  font-weight: bold;
  letter-spacing: 0.1em;
  cursor: pointer;
  font-family: "SpaceGrotesk", monospace;
  -webkit-tap-highlight-color: transparent;
}
.ftms-btn.primary   { color: #00A2E8; border-color: #00A2E8; }
.ftms-btn.secondary { color: #555;    border-color: #222; }

/* Boot splash */
#boot-splash {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.25s ease;
}
#boot-splash.hidden { opacity: 0; pointer-events: none; }
.boot-logo {
  font-family: "SpaceGrotesk", monospace;
  font-size: 2em;
  color: #fff;
  letter-spacing: 0.3em;
  margin-bottom: 24px;
}
.boot-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid #222;
  border-top-color: #00A2E8;
  border-radius: 50%;
  animation: boot-spin 0.9s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }

/* Landscape short viewport */
@media (max-height: 500px) {
  .ftms-overlay { justify-content: flex-start; padding: 8px; }
  .ftms-overlay-title { font-size: 1em; margin-bottom: 10px; }
  .ftms-overlay-subtitle { font-size: 0.75em; margin-top: -6px; margin-bottom: 10px; }
  .ftms-summary-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; max-width: 600px; }
  .ftms-summary-tile { padding: 6px 8px; }
  .ftms-summary-label { font-size: 0.65em; }
  .ftms-summary-value { font-size: 1em; margin-top: 2px; }
  .ftms-actions { flex-direction: row; max-width: 600px; gap: 8px; }
  .ftms-btn { padding: 10px; font-size: 0.85em; flex: 1; }
}