/* ECG Remote: the ungated shell.
 *
 * Sign-in, sign-out and the 404 -- the three pages a reader can meet before
 * the gate has let them through, so they are deployed to Hosting rather than
 * the bucket and cannot use anything that lives behind the gate.
 *
 * This is the app's own furniture, not the Lab's. It used to borrow the Lab's
 * app.css, which brought a whole navigation panel to draw a centred card and
 * tied ECG Remote's look to a repo it no longer shares a host with. What is
 * here is only what these three pages need.
 */

.card {
  margin: auto;
  padding: 1.5rem;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}
.card h1 { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; }
.card p { color: var(--prose); font-size: 0.9rem; }
.mark { border-radius: 8px; align-self: center; margin-bottom: 0.2rem; }

/* The trace, drawn once and still. It says which application is asking for an
   account before the heading does, and it is the only thing on these pages
   that belongs to ECG Remote alone. */
.pulse {
  align-self: center;
  width: 100%;
  max-width: 15rem;
  height: 2.6rem;
  margin: -0.2rem 0 0.1rem;
  color: var(--accent);
}
.pulse path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.who {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--muted);
  word-break: break-all;
}

.btn {
  align-self: center;
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: 0.55; cursor: default; }

.err {
  color: var(--accent);
  font-size: 0.82rem;
  min-height: 1.2em;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* The footer is a flex sibling of the card rather than a child, so the two
   agree on offset and the card's auto margins still centre it. 1.5rem of top
   margin, not the home site's 4.5rem: on a normal window the auto margins
   absorb the difference anyway, and on a short one the larger value was fixed
   overhead that pushed a card with room to spare into scrolling. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
}
footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0 1rem 2.5rem;
  border: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  position: relative;
  z-index: 1;
}
/* The mark, not a link. There is nowhere on this page worth sending a
   signed-out visitor, and an anchor here reads as a way out of signing in.
   Unselectable with it: it is a label on the page, not content, and a
   stray drag across the footer highlighting it looks like a mistake. */
.copy {
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--mark); border-color: var(--grid); }
.theme-toggle:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

@media (max-width: 480px) {
  footer { gap: 0.7rem; letter-spacing: 0.04em; padding: 0 0.75rem 2rem; }
  .theme-toggle { width: 1.5rem; height: 1.5rem; font-size: 0.8rem; }
}


/* ---------- returning from Google ----------
   The head script adds .signing-in from a marker set before this page
   navigated away, so this state is painted on the FIRST frame of the return
   trip -- before the Firebase SDK has downloaded, and long before it can say
   whether a redirect is in flight. Waiting for the SDK to tell us is what left
   the page looking idle, and an idle sign-in page reads as one that ignored
   you. */
.returning { display: none; }
html.signing-in .lead,
html.signing-in .btn,
html.signing-in .err,
html.signing-in .who { display: none; }
html.signing-in .returning {
  display: block;
  color: var(--prose);
  font-size: 0.9rem;
}

/* The trace runs while it waits. It is the one element already on the page
   that can carry motion without adding furniture, and a moving ECG is a more
   honest progress indicator here than a spinner would be. */
html.signing-in .pulse path {
  stroke-dasharray: 44 300;
  animation: kk-sweep 1.5s linear infinite;
}
@keyframes kk-sweep {
  from { stroke-dashoffset: 344; }
  to   { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.signing-in .pulse path { animation: none; stroke-dasharray: none; }
}