/* sync.css — sign-in and cloud state, in the shell.
   Desktop: the foot of the left rail. Mobile: a dot on More + a row in the
   More sheet. Nothing here is allowed to widen the page at 375px. */

/* v1's firebase.js drives #syncBadge; v2 only reads its class. */
#syncBadge { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── The state dot ────────────────────────────────────────────────────── */

.sync-dot {
  flex: none;
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-dim);
  vertical-align: middle;
}
.sync-dot[data-status="synced"]     { background: var(--good); }
.sync-dot[data-status="syncing"]    { background: var(--gold); }
.sync-dot[data-status="offline"]    { background: var(--warn); }
.sync-dot[data-status="conflict"]   { background: var(--warn); }
.sync-dot[data-status="error"]      { background: var(--bad); }
.sync-dot[data-status="signed-out"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-dim); }

/* Mobile: pinned to the More tab's icon — the whole indicator is 7px wide, so
   it can never push the page sideways. */
#navMore { position: relative; }
#navMore .sync-dot {
  position: absolute;
  top: 4px;
  left: calc(50% + 8px);
}
@media (min-width: 1024px) {
  #navMore .sync-dot { display: none; }
}

/* ── Desktop rail foot ────────────────────────────────────────────────── */

.sync-foot { display: none; }

@media (min-width: 1024px) {
  .sync-foot {
    display: block;
    margin-top: auto;          /* the rail is a flex column — sit at the foot */
    padding: 14px 12px 4px;
    border-top: 1px solid var(--line);
  }
}

.sync-cta {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.sync-cta:hover { border-color: var(--gold); background: var(--gold-dim); }
.sync-cta svg { width: 18px; height: 18px; flex: none; color: var(--gold); }

.sync-why {
  margin-top: 9px;
  color: var(--ink-dim);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.sync-who {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.sync-av {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--night-2);
}
.sync-av-x {
  display: grid;
  place-items: center;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--gold);
}
.sync-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-state {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--ink-dim);
  font-size: var(--fs-small);
  line-height: 1.35;
}
.sync-state[data-status="error"] { color: var(--bad); }

.sync-link {
  margin-top: 8px;
  padding: 6px 0;
  min-height: 32px;
  color: var(--ink-dim);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sync-link:hover { color: var(--ink); }

/* ── More sheet row ───────────────────────────────────────────────────── */

.sheet-row.sync-row { align-items: center; }
.sync-row-dot { margin-left: auto; }

/* ── Sheet copy ───────────────────────────────────────────────────────── */

.sync-p {
  margin: 0 0 10px;
  font-size: var(--fs-body);
  line-height: 1.5;
}
.sync-p:last-child { margin-bottom: 0; }
.sync-p-dim { color: var(--ink-dim); font-size: var(--fs-small); }
.sync-p .sync-dot { margin-right: 7px; }

/* ── Transient notice ─────────────────────────────────────────────────── */

.sync-notice-wrap {
  position: fixed;
  left: 12px;
  right: 12px;
  top: calc(10px + env(safe-area-inset-top, 0px));
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.sync-notice {
  max-width: 460px;
  padding: 10px 14px;
  background: var(--night-2);
  border: 1px solid var(--gold);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.4;
  text-align: center;
  animation: syncNoticeIn var(--t-fast) var(--ease);
}
@keyframes syncNoticeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 1024px) {
  .sync-notice-wrap { left: 236px; }
}

/* ══ Sharing (v2/js/share.js sheets) ═══════════════════════════════════ */

.shr-p { margin: 0 0 10px; font-size: var(--fs-body); line-height: 1.5; }
.shr-p:last-child { margin-bottom: 0; }
.shr-dim { color: var(--ink-dim); font-size: var(--fs-small); }
.shr-warn { color: var(--bad); font-size: var(--fs-small); }

.shr-h {
  margin: 18px 0 6px;
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.shr-codebox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.shr-code {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: .18em;
  font-feature-settings: "tnum";
  overflow-wrap: anywhere;
}
.shr-copy { flex: none; }

.shr-link {
  display: block;
  margin-top: 8px;
  border: none;
  background: none;
  padding: 6px 0;
  color: var(--ink-dim);
  font: inherit;
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.shr-link:hover { color: var(--ink); }

.shr-member,
.shr-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
}
.shr-member:last-child, .shr-pending:last-child { border-bottom: none; }
.shr-av {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.shr-av-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-dim);
  color: var(--gold);
  font-weight: 700;
  font-size: var(--fs-small);
}
.shr-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shr-who b { font-weight: 600; font-size: var(--fs-body); overflow-wrap: anywhere; }
.shr-who span { color: var(--ink-dim); font-size: var(--fs-small); overflow-wrap: anywhere; }
.shr-role {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.shr-role.is-owner { border-color: var(--gold); color: var(--gold); }
.shr-remove {
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: none;
  color: var(--bad);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.shr-remove:hover { border-color: var(--bad); }
.shr-pending em { color: var(--warn); font-size: var(--fs-small); font-style: normal; }
.shr-pending span { flex: 1; min-width: 0; font-size: var(--fs-small); overflow-wrap: anywhere; }

.shr-inviterow { display: flex; gap: 8px; }
.shr-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--night-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  transition: border-color var(--t-fast) var(--ease);
}
.shr-input:hover { border-color: var(--line-hover); }
.shr-codein {
  width: 100%;
  margin: 6px 0 8px;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.shr button:focus-visible,
.shr input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── v1's confirm/prompt modal, in Nightfall ──────────────────────────────
   The reused sharing functions (removeMember, regenerateShareCode, pending
   invites on sign-in) confirm through v1's ui-utils modal, which brings its
   class names but no styling of its own to this page. Style it here so the
   proven code looks native instead of unstyled. Sits above the sheet (60). */

.confirm-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 4, 12, .62);
}
.confirm-modal-backdrop.show { display: flex; }
.confirm-modal {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background: var(--night-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.confirm-modal-msg { font-size: var(--fs-body); line-height: 1.5; }
.confirm-modal-input {
  width: 100%;
  margin-top: 12px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--night-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
}
.confirm-modal-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}
.confirm-modal .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.confirm-modal .btn-secondary:hover { border-color: var(--line-hover); }
.confirm-modal button:focus-visible,
.confirm-modal input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.sync-state[data-status="conflict"] { color: var(--warn); }