/* ============================================================
   auth.css — page set C: auth/signin + auth/done
   "The Dorm Wall" (site-v2 experiment). Extends wall.css —
   only page-specific layout lives here. Shadow recipe, tape,
   pins, paper and type voices all come from wall.css.
   Web-flow sign-in per docs/WEB-AUTH-HANDOFF.md: the site owns
   sign-in; the app only receives a one-time handoff code via
   the clankmaxx:// deep link from the done page.
   ============================================================ */

/* ---------- shared footer extras (same recipe as pages.css) ---------- */
/* the deskedge patrol can push past the right edge mid-walk — clip, never scroll */
html, body { overflow-x: clip; }
.footstrip .tagline {
  font-size: 1.12rem;
  font-weight: 700;
  max-width: 58ch;
  margin: 0;
}
.footstrip .expnote {
  margin: 14px 0 0;
  font-size: 1.3rem;
  color: var(--ink);
  transform: rotate(-1deg);
}

/* ---------- the pinned/taped sheet both pages share ---------- */
.authsheet {
  max-width: 640px;
  margin: 26px auto 0;
  padding: 46px 48px 58px;
  text-align: center;
}
.authsheet .pill {
  display: inline-block;
  margin: 0 0 20px;
  font-family: var(--f-type);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper-white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 6px 16px;
}
.authsheet h1.anton { font-size: clamp(2.6rem, 6.5vw, 4.4rem); }
.authsheet .intro {
  font-size: 1.08rem;
  max-width: 50ch;
  margin: 0 auto 30px;
}
.authsheet .fineprint {
  font-family: var(--f-type);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 24px auto 0;
}

/* ---------- sign-in: the two provider buttons ---------- */
.providers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 36px 0 8px;
}
.btn-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 15px 24px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 4px 0 var(--ink), var(--shadow-art);
  transform: rotate(var(--tilt, -1deg));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-provider svg { width: 22px; height: 22px; flex: none; }
.btn-provider:hover {
  transform: rotate(0deg) translateY(3px);
  box-shadow: 0 1px 0 var(--ink), var(--shadow-art);
}
.btn-provider:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.btn-apple { background: var(--ink); color: var(--paper-white); }
.btn-google { background: var(--paper-white); color: var(--ink); }
.btn-provider.off { opacity: 0.45; pointer-events: none; }
.provnote { margin: 22px 0 0; font-size: 1.45rem; color: var(--marker-blue); }

/* the hand note that only appears when the app sent you (?src=app) */
.srcline {
  margin: 26px 0 0;
  font-size: 1.45rem;
  color: var(--marker-blue);
}

/* the tip sticky beside the sheet */
.authwrap { position: relative; }
.authtip {
  position: absolute;
  right: 4%;
  top: 30px;
  max-width: 235px;
  z-index: 2;
}

/* ---------- done: handoff status sheet ---------- */
.donebuy { margin-top: 6px; }
.donebuy .fineprint { margin-top: 20px; }
.donesheet .handstatus {
  font-size: 1.7rem;
  margin: 4px 0 16px;
  color: var(--ink);
}
.donefallback {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 2px dashed rgba(36, 28, 18, 0.35);
}
.donefallback p { margin: 0 0 12px; }
.donefallback a { color: var(--marker-blue); font-weight: 800; }

/* small chunky button, same recipe as .btn-buy at mini scale */.btn-mini {
  display: inline-block;
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.02em;
  background: var(--highlighter);
  color: var(--ink);
  text-decoration: none;
  padding: 8px 18px;
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 3px 0 var(--ink), var(--shadow-art);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-mini:hover {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink), var(--shadow-art);
  background: #ffe95e;
}
.btn-mini:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.btn-mini.ghost { background: transparent; color: var(--ink-soft); }
.btn-mini.ghost:hover { background: transparent; color: var(--ink); }

/* ---------- account: settings rows on the sheet ---------- */
.acctmail { margin: -6px 0 0; font-size: 1.45rem; color: var(--marker-blue); }
.acctrows { margin-top: 30px; text-align: left; }
.acctrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 2px dashed rgba(36, 28, 18, 0.35);
}
.acctrow:first-child { border-top: 0; padding-top: 2px; }
.acctrow strong {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.acctrow p { margin: 5px 0 0; font-size: 0.92rem; line-height: 1.5; }
.acctrow .btn-mini, .acctrow .stat { flex: none; }
.stat {
  font-family: var(--f-type);
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--paper-white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .authtip { position: static; margin: 44px auto 0; }
}
@media (max-width: 720px) {
  /* settle entrance transiently overflows small viewports — skip it there */
  .settle { animation: none; }
  .authsheet { padding: 34px 22px 42px; --tilt: 0deg; }
  .btn-provider { font-size: 1.05rem; }
  .acctrow { flex-direction: column; align-items: flex-start; gap: 10px; }
}