/* SassPan sign-in screen (db.js draws it). Covers the app until someone is signed in.
   Rounded rectangles only, never pill-shaped buttons. */

body.is-signed-out {
  overflow: hidden;
}

.auth {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: max(40px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 60% at 50% 0%, var(--accent-soft) 0%, transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

.auth__card {
  width: 100%;
  max-width: 400px;
  margin-top: 4vh;
  text-align: center;
}

/* The pan is wider than tall (174×108). Size logos by height only and let the width follow. */
.auth__logo {
  display: block;
  height: 72px;
  width: auto;
  margin: 0 auto 14px;
}

/* Guard: no logo or icon image anywhere in the app can ever be stretched or squished. */
img[class*="logo"],
img[class*="icon"] {
  object-fit: contain;
}

.auth__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.auth__sub {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.auth__providers {
  display: grid;
  gap: 10px;
}

.auth__provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: 600 16px var(--font-body);
  cursor: pointer;
}

.auth__provider svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.auth__provider--apple {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.auth__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 6px;
  color: var(--muted);
  font-size: 14px;
}

.auth__or::before,
.auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth__form {
  display: grid;
  gap: 6px;
  text-align: left;
}

.auth__label {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
}

.auth__input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: 16px var(--font-body); /* 16px keeps phones from zooming in */
  box-sizing: border-box;
}

.auth__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.auth__note {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--heads-up) 14%, var(--surface));
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}

.auth__submit {
  margin-top: 16px;
  min-height: 50px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 17px var(--font-body);
  cursor: pointer;
}

.auth__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.auth__links {
  display: grid;
  gap: 4px;
  margin-top: 18px;
}

.auth__link {
  padding: 8px;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: 600 15px var(--font-body);
  cursor: pointer;
}

.auth__fine {
  margin: 32px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.me-account__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.me-account__actions .btn {
  border-radius: var(--radius-sm);
}

/* Let the app's own background fill the whole screen, including behind the notch and home bar. */
html { background: var(--bg); min-height: 100%; }
/* The artifact wrapper used to pad the page by the notch height, and the top bar pulled itself up by the
   same amount. Without the wrapper, the top bar sits at the very top and its own padding fills the notch. */
.topbar { margin-top: 0; }

/* Me → Connect to Claude (closed by default). */
.claude-connect { padding: 0; }
.claude-connect details { padding: 14px 16px; }
.claude-connect__head { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.claude-connect__head::-webkit-details-marker { display: none; }
.claude-connect__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); }
.claude-connect__icon svg { width: 20px; height: 20px; }
.claude-connect__title { flex: 1; display: grid; gap: 2px; }
.claude-connect__title .hint { margin: 0; }
.claude-connect__chev { flex: none; color: var(--muted); transition: transform 0.2s ease; }
.claude-connect__chev svg { width: 20px; height: 20px; }
.claude-connect details[open] .claude-connect__chev { transform: rotate(180deg); }
.claude-connect__body { display: grid; gap: 10px; margin-top: 14px; }
.copy-row { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.copy-row__label { font-size: 13px; font-weight: 700; color: var(--muted); }
.copy-row__value { min-width: 0; overflow-wrap: anywhere; font: 600 14px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.copy-row__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--accent-text); cursor: pointer; }
.copy-row__btn svg { width: 20px; height: 20px; }
.copy-row__btn.is-copied { background: var(--accent-soft); }
.claude-connect__steps { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; }

.push-test { align-self: flex-start; border-radius: var(--radius-sm); }

/* Phone bars match the app exactly (2026-10-20): the header is solid in the status bar's color,
   and the tab bar is solid in the color the phone's own nav bar uses (manifest background_color). */
:root { --dock-solid: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dock-solid: #1b2922; } }
:root[data-theme="dark"] { --dock-solid: #1b2922; }
.topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.tabbar { background: var(--dock-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }