/* ══════════════════════════════════════════════════════════════════
   Therapy Sound · Sign in (therapysound.ca/auth/login + subdomains)

   Same night & day look as the homepage (landing.html .hp) and the map
   (find_us.html .mp): the NIGHT half (dark slate, condensed Archivo
   caps, rust hairlines, a dimmed photo) carries the lockup and the
   welcome; the DAY half (off-white, DM Serif caps, light sans) holds
   the form. Rust is the only accent, used for hairlines and active
   states. Square corners, one outlined pill per page (Google).

   Everything is scoped under body.tsl so nothing leaks.
   ══════════════════════════════════════════════════════════════════ */
body.tsl{
  --n:#13161B;--n2:#1C2027;--paper:#F2F1EE;--fog:#B9BCC2;--smoke:#8C9098;
  --day:#F6F5F2;--stone:#ECEBE7;--ink:#2B2D31;--char:#46474B;--mute:#6E6F73;
  --rust:#D2693A;--rust-ink:#B25631;--teal:#7CB7B5;
  --line:rgba(242,241,238,.22);--line-d:rgba(43,45,49,.16);--line-d2:rgba(43,45,49,.32);
  margin:0;min-height:100vh;background:var(--day);color:var(--ink);
  font-family:'Archivo','Hanken Grotesk',system-ui,sans-serif;font-stretch:100%;
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.tsl *,body.tsl *::before,body.tsl *::after{box-sizing:border-box;}
body.tsl a{color:inherit;}
body.tsl :focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.tsl .cx{font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;text-transform:uppercase;}

.tsl-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:calc(100vh - var(--ts-head-h,80px));}

/* ── Night half ─────────────────────────────────────────────────── */
.tsl-night{
  position:relative;overflow:hidden;background:var(--n);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:48px;
  padding:48px;
}
.tsl-night::before{ /* dimmed lasers photo, desktop only (phones skip the download) */
  content:'';position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,rgba(19,22,27,.72) 0%,rgba(19,22,27,.55) 45%,rgba(19,22,27,.94) 100%),
    url('../img/therapy/schedule-hero-lasers.jpg') center/cover no-repeat;
  filter:saturate(.85);
}
.tsl-night>*{position:relative;z-index:1;}
.tsl-night :focus-visible{outline-color:var(--paper);}


.tsl-kick{margin:0 0 22px;display:flex;align-items:center;gap:14px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fog);}
.tsl-h{margin:0;font-size:clamp(64px,8.4vw,128px);line-height:.84;letter-spacing:-.01em;color:var(--paper);}
.tsl-lede{margin:24px 0 0;max-width:420px;font-size:16px;line-height:1.6;color:var(--fog);}


/* ── Day half ───────────────────────────────────────────────────── */
.tsl-day{display:flex;flex-direction:column;padding:28px 48px 40px;background:var(--day);}
.tsl-help{align-self:flex-end;font-size:13px;color:var(--mute);}
.tsl-help a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--rust);padding-bottom:1px;}
.tsl-card{width:100%;max-width:420px;margin:auto;padding:40px 0;}

.tsl-title{margin:0 0 6px;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:38px;line-height:1.1;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);}
.tsl-sub{margin:0 0 30px;font-size:15px;color:var(--mute);}

.tsl-flashes{display:flex;flex-direction:column;gap:8px;margin:0 0 22px;}
.tsl-flash{padding:12px 14px;font-size:14px;line-height:1.45;background:#fff;border:1px solid var(--line-d);border-left:3px solid var(--ink);}
.tsl-flash--error,.tsl-flash--danger{border-left-color:var(--rust);color:#7A2E12;}
.tsl-flash--success{border-left-color:#1F7A5A;}

.tsl-label{display:block;margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--char);}
.tsl-label-pw{margin-top:20px;}
.tsl-input{
  display:block;width:100%;height:52px;padding:0 16px;margin:0;
  font:400 16px/1 'Archivo',system-ui,sans-serif;color:var(--ink);
  background:#fff;border:1px solid var(--line-d2);border-radius:0;
  box-shadow:inset 0 -2px 0 transparent;transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;appearance:none;
}
.tsl-input::placeholder{color:#9A9BA0;opacity:1;}
.tsl-input:hover{border-color:var(--char);}
.tsl-input:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 -2px 0 var(--rust);}
.tsl-field-error{margin-top:6px;font-size:13px;color:#7A2E12;}

.tsl-pw{position:relative;}
.tsl-pw .tsl-input{padding-right:72px;}
.tsl-pw-toggle{
  position:absolute;right:4px;top:4px;height:44px;min-width:60px;padding:0 12px;
  background:none;border:0;cursor:pointer;
  font:700 11px/1 'Archivo',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
}
.tsl-pw-toggle:hover{color:var(--ink);}
.tsl-caps{margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--rust-ink);}

.tsl-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 26px;flex-wrap:wrap;}
.tsl-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--char);min-height:44px;}
.tsl-check input{
  -webkit-appearance:none;appearance:none;margin:0;flex:none;
  width:18px;height:18px;border:1px solid var(--line-d2);background:#fff;border-radius:0;cursor:pointer;
  display:inline-grid;place-items:center;transition:background .15s,border-color .15s;
}
.tsl-check input::after{content:'';width:9px;height:5px;border:2px solid var(--paper);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);opacity:0;}
.tsl-check input:checked{background:var(--ink);border-color:var(--ink);}
.tsl-check input:checked::after{opacity:1;}
.tsl-forgot{font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-d2);padding-bottom:1px;}
.tsl-forgot:hover{border-bottom-color:var(--rust);}

.tsl-submit{
  width:100%;height:56px;display:flex;align-items:center;justify-content:center;gap:14px;
  background:var(--n);color:var(--paper);border:1px solid var(--n);border-radius:0;cursor:pointer;
  font:700 12px/1 'Archivo',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  position:relative;transition:background .15s;
}
.tsl-submit::after{content:'';position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--rust);transition:width .25s ease;}
.tsl-submit:hover{background:var(--n2);}
.tsl-submit:hover::after{width:100%;}
.tsl-submit:focus-visible{outline:2px solid var(--rust);outline-offset:3px;}
.tsl-submit[aria-busy="true"]{opacity:.8;cursor:progress;}

.tsl-or{display:flex;align-items:center;gap:14px;margin:26px 0;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);}
.tsl-or::before,.tsl-or::after{content:'';flex:1;height:1px;background:var(--line-d);}

/* The page's one outlined pill (same as .hp-pill on the homepage). */
.tsl-google{
  width:100%;height:52px;display:flex;align-items:center;justify-content:center;gap:12px;
  border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);
  font-size:16px;font-weight:400;text-decoration:none;transition:background .15s,color .15s;
}
.tsl-google:hover{background:var(--ink);color:var(--paper);}
.tsl-google svg{flex:none;}

.tsl-foot{margin:32px 0 0;padding-top:22px;border-top:1px solid var(--line-d);font-size:14px;color:var(--mute);text-align:center;}
.tsl-foot a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--rust);padding-bottom:1px;margin-left:4px;}

/* ── Narrow: night becomes a header band above the form ─────────── */
@media (max-width:900px){
  .tsl-shell{grid-template-columns:1fr;}
  .tsl-night{padding:20px 20px 28px;gap:36px;}
  .tsl-night::before{background:var(--n);} /* no photo on phones */
  .tsl-kick{margin-bottom:14px;font-size:12px;}
  .tsl-h{font-size:clamp(48px,14vw,72px);}
  .tsl-lede{margin-top:14px;font-size:15px;}
  .tsl-day{padding:12px 20px 32px;}
  .tsl-card{margin:0 auto;padding:20px 0 0;}
  .tsl-title{font-size:30px;}
  .tsl-sub{margin-bottom:24px;}
}
@media (prefers-reduced-motion:reduce){
  .tsl-submit::after,.tsl-input,.tsl-google{transition:none;}
}