/* TaskBlink Data: the sign-up sheet and the sign-in pages (DESIGN-BRIEF 2.11, 2.14; artboards SignUpSheet and
   PhoneSignUp; BUILD-PLAN package A5). Tokens and the sheet frame come from tb.css; this file only lays out
   what tb-auth.js draws inside it. Every control keeps a 44 px target. */

/* ------------------------------------------------------------------ *
 * The sheet: 640 from the right, padding 28, blocks 20 apart, the Terms line at the foot
 * ------------------------------------------------------------------ */
.tb-sheet.tb-auth-sheet .tb-sheet__head { padding: 14px 14px 0 28px; min-height: 44px; }
.tb-sheet.tb-auth-sheet .tb-sheet__title:empty { display: none; }
.tb-sheet.tb-auth-sheet .tb-sheet__close { margin: 0 0 0 auto; }
/* The close row is 20 tall with a -6 margin, then the 22 gap (SignUpSheet): the preview starts 36 below the padding */
.tb-sheet.tb-auth-sheet .tb-sheet__body { padding: 6px 28px 28px; gap: 0; }

.tb-auth { display: flex; flex-direction: column; gap: 22px; min-height: 100%; }
.tb-auth > [hidden] { display: none; }

/* What you were doing (bg-soft, radius 14, padding 14 16, gap 10) */
.tb-auth__preview {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border-radius: var(--r-lg); background: var(--bg-soft);
}
.tb-auth__biz { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-auth__thumb {
  position: relative; flex: none; width: 48px; height: 48px; box-sizing: border-box; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-3);
}
.tb-auth__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-auth__biz-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-auth__biz-name { font: 600 15px/1.3 var(--font); color: var(--ink); overflow-wrap: anywhere; }
.tb-auth__biz-meta { font: 400 12.5px/1.4 var(--font); color: var(--ink-3); }
.tb-auth__search { display: flex; flex-direction: column; gap: 2px; }
.tb-auth__search-label { font: 600 15px/1.3 var(--font); color: var(--ink); }
.tb-auth__search-found { font: 400 12.5px/1.4 var(--font); color: var(--ink-3); }
.tb-auth__bubble {
  margin: 0; align-self: flex-end; max-width: 80%; box-sizing: border-box; padding: 10px 14px;
  border-radius: 14px 14px 4px 14px; background: var(--brand-tint); border: 1px solid var(--brand-line);
  font: 500 14px/1.4 var(--font); color: var(--brand-ink); overflow-wrap: anywhere;
}
.tb-auth__kept { margin: 0; display: flex; align-items: center; gap: 6px; font: 400 12.5px/1.4 var(--font); color: var(--ink-2); }
.tb-auth__kept .tb-icon { width: 14px; height: 14px; color: var(--good); stroke-width: 2.25; }

/* The title names the exact thing (H2 22/600, at most two lines) and one sub line */
.tb-auth__head { display: block; }
.tb-auth__title { margin: 0; font: 600 22px/1.3 var(--font); letter-spacing: -0.01em; color: var(--ink); }
.tb-auth__sub { margin: 8px 0 0; font: 400 14px/1.5 var(--font); color: var(--ink-2); }

/* Continue with Google (primary large) and Continue with email (secondary large), full width, 12 apart */
.tb-auth__buttons { display: flex; flex-direction: column; gap: 12px; }
.tb-auth__buttons .tb-btn--lg { padding: 0 20px; gap: 12px; }
.tb-auth__buttons .tb-btn--secondary .tb-icon { width: 18px; height: 18px; color: var(--ink-3); }
/* The G mark: one ink stroke letter in a white circle (DESIGN-BRIEF 1.7), never Google's colours */
.tb-auth__g {
  flex: none; width: 26px; height: 26px; border-radius: var(--pill); background: #FFFFFF; color: #0E1230;
  display: inline-flex; align-items: center; justify-content: center;
}
.tb-auth__g .tb-icon { width: 18px; height: 18px; stroke-width: 2.25; color: #0E1230; }
.tb-btn--secondary .tb-auth__g { box-shadow: inset 0 0 0 1px var(--line-strong); }
.tb-auth__google.is-busy .tb-auth__g { visibility: hidden; }

/* Free plan line, the sign-in switch */
.tb-auth__free { margin: 0; display: flex; align-items: flex-start; gap: 8px; font: 400 13px/1.5 var(--font); color: var(--ink-2); }
.tb-auth__free .tb-icon { flex: none; margin-top: 2px; color: var(--good); }
.tb-auth__extra { display: flex; flex-direction: column; gap: 10px; }
.tb-auth__extra .tb-auth__next { margin-top: 12px; }
.tb-auth__switch {
  margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 24px;
  font: 400 13px/1.5 var(--font); color: var(--ink-2);
}
.tb-auth__switch .tb-link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0;
  font: 600 13px/1 var(--font); color: var(--brand-text);
}
.tb-auth__switch-short { display: none; }

/* What happens next: four steps, one per part of onboarding */
.tb-auth__next { display: flex; flex-direction: column; gap: 12px; }
.tb-auth__next-title { margin: 0; }
.tb-auth__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tb-auth__step { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-auth__step-n {
  flex: none; width: 22px; height: 22px; box-sizing: border-box; border-radius: var(--pill);
  background: var(--bg-soft); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center;
  font: 500 12px/1 var(--font-mono); color: var(--ink-2);
}
.tb-auth__step-w { font: 400 12.5px/1.3 var(--font); color: var(--ink-3); }

/* The Terms line sits at the foot of the sheet (12 ink-3, links brand-text 500) */
.tb-auth__terms {
  margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font: 400 12px/1.5 var(--font); color: var(--ink-3);
}
.tb-auth__terms a { color: var(--brand-text); font-weight: 500; text-decoration: none; }
.tb-auth__terms a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * The email forms (in place in the sheet, and on the full pages)
 * ------------------------------------------------------------------ */
.tb-auth__panel { display: flex; flex-direction: column; gap: 14px; }
.tb-auth__or { margin: 0; display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--font); color: var(--ink-3); }
.tb-auth__or::before, .tb-auth__or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.tb-auth__form { display: flex; flex-direction: column; gap: 14px; }
.tb-auth__form > [hidden] { display: none; }
/* 24 tall, so Forgot password? keeps a 44 px target between the email box (14 above) and its own box (6 below) */
.tb-auth__labelrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.tb-auth__forgot { position: relative; font: 500 13px/1 var(--font); }
.tb-auth__forgot::after { content: ''; position: absolute; left: -8px; right: -8px; top: calc(50% - 26px); height: 44px; }
.tb-auth__pw { position: relative; }
.tb-auth__pw .tb-input { padding-right: 72px; }
.tb-auth__show {
  position: absolute; top: 0; right: 0; height: 44px; min-width: 64px; padding: 0 14px; border: 0; background: none;
  border-radius: 0 var(--r-md) var(--r-md) 0; font: 600 13px/1 var(--font); color: var(--brand-text); cursor: pointer;
}
.tb-auth__show:hover { color: var(--brand-ink); background: var(--surface-2); }
.tb-auth__show:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.tb-auth__alt { margin: 0; display: flex; justify-content: center; }
.tb-auth__alt .tb-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; }
.tb-auth__alt .tb-icon { color: var(--brand-text); }
.tb-auth__hint { margin: 8px 0 0; }
.tb-auth__note { margin: 0; display: flex; align-items: flex-start; gap: 8px; font: 400 13px/1.5 var(--font); color: var(--ink-2); }
.tb-auth__note .tb-icon { flex: none; margin-top: 2px; color: var(--ink-3); }

.tb-auth__msg {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-md);
  font: 500 13px/1.45 var(--font);
}
.tb-auth__msg .tb-icon { flex: none; margin-top: 1px; }
.tb-auth__msg--bad { background: var(--bad-tint); color: var(--bad); }
.tb-auth__msg--warn { background: var(--warn-tint); color: var(--warn); }
.tb-auth__msg--info { background: var(--bg-soft); color: var(--ink-2); }

/* Check your email */
.tb-auth__sent { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tb-auth__sent > [hidden] { display: none; }
.tb-auth__sent-icon {
  width: 44px; height: 44px; border-radius: var(--pill); background: var(--brand-tint); color: var(--brand-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.tb-auth__sent-icon--good { background: var(--good-tint); color: var(--good); }
.tb-auth__sent-title { margin-top: 4px; }
.tb-auth__sent-title:focus { outline: none; }
.tb-auth__sent-line { margin: 0; font: 400 16px/1.55 var(--font); color: var(--ink); }
.tb-auth__sent-to { margin: 0; font: 400 14px/1.5 var(--font); color: var(--ink-2); overflow-wrap: anywhere; }
.tb-auth__sent-to b { color: var(--ink); font-weight: 600; }
.tb-auth__sent-note { margin: 0; font: 400 13px/1.5 var(--font); color: var(--ink-3); }
.tb-auth__sent-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.tb-auth__change { min-height: 44px; font-size: 14px; }

/* ------------------------------------------------------------------ *
 * Full-page views on /app (#login, #signup, #link, #forgot, #confirm, #new-password, #signed-in)
 * ------------------------------------------------------------------ */
.tb-authpage {
  min-height: calc(100vh - var(--topbar-h)); box-sizing: border-box;
  padding: 56px var(--gutter) 80px; background: var(--glow-top);
  display: flex; justify-content: center; align-items: flex-start;
}
.tb-authpage__card {
  width: 100%; max-width: 440px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px;
}
.tb-authpage__card--in { align-items: flex-start; padding-top: 24px; }
.tb-authpage__title { margin: 0; font: 600 32px/1.15 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.tb-authpage__title:focus { outline: none; }
.tb-authpage__sub { margin: -8px 0 0; font: 400 16px/1.55 var(--font); color: var(--ink-2); }
.tb-authpage__sub b { color: var(--ink); font-weight: 600; }
.tb-authpage .tb-auth__terms { margin-top: 4px; }
.tb-auth__retry { margin: -8px 0 0; }

/* ------------------------------------------------------------------ *
 * Phone (PhoneSignUp: a bottom sheet at most 92% high with its grabber; one 358 column)
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  /* PhoneSignUp: the grabber, a 32 tall close row (the 44 px close overhangs it by 8), the preview 4 below */
  .tb-sheet.tb-auth-sheet .tb-sheet__head { padding: 0 6px 0 16px; height: 32px; min-height: 0; flex: none; }
  .tb-sheet.tb-auth-sheet .tb-sheet__close { margin-top: -4px; position: relative; z-index: 1; }
  .tb-sheet.tb-auth-sheet .tb-sheet__body { padding: 4px 16px 24px; }
  .tb-auth { gap: 18px; }
  .tb-auth__preview { padding: 12px 14px; gap: 8px; }
  .tb-auth__biz { gap: 10px; }
  .tb-auth__biz-words { gap: 1px; }
  .tb-auth__thumb { width: 40px; height: 40px; }
  .tb-auth__bubble { max-width: 85%; }
  .tb-auth__biz-rating { display: none; }
  .tb-auth__title { font-size: 20px; }
  .tb-auth__sub { margin-top: 6px; }
  .tb-auth__sub-more { display: none; }
  .tb-auth__buttons { gap: 10px; }
  .tb-auth__extra { gap: 4px; margin-top: -2px; }
  .tb-auth__switch-long { display: none; }
  .tb-auth__switch-short { display: inline; }
  .tb-auth__switch { color: var(--ink); min-height: 32px; }
  .tb-auth__switch .tb-link { padding: 0 4px; }
  .tb-auth__next { display: none; }
  .tb-auth__terms { padding-top: 12px; }
  .tb-authpage { padding: 32px var(--gutter) 56px; }
  .tb-authpage__title { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-auth__show { transition: none; }
}