/* Label League — 02 Sign-in · D the account (9/25/2026), on top of site.css's .si-* (screen 02, 9/21). Values are the artboard's
   (SCREENS §2.2 D): the league card · the CTA stack pinned at bottom 30. v7 (11/1): the Keep's card, its told button and its "Not now" line
   are gone with it (Lake 11/1: "Eliminate keep a label entirely, both from the site and from the app."). v8 (11/5 · sign-in step 3, PR B): the
   phone — the "Use your phone instead" switch, the robot check's slot, the offer's and the account's add-a-number flow, the Phone row.
   v9 (11/5 · PR C, phone-only sign-up): League News in the app (.si-news); the phone-only Email row reuses the Phone row's look. */
.signin-page .si-step.d{padding-bottom:190px}
.signin-page .si-pad.d{padding:28px 26px 0}
.signin-page .si-body.d{font-size:13.5px;line-height:1.5;max-width:36ch;margin-top:12px}
.signin-page .si-league{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--card);border:1px solid var(--rule);display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.signin-page .si-league .e{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}.signin-page .si-league .r{text-align:right}
.signin-page .si-league .t{font-family:var(--disp);font-weight:700;font-size:15px}.signin-page .si-league .s{font-family:var(--mono);font-size:10px;color:var(--eyebrow);text-align:right}
.signin-page .si-who{font-family:var(--mono);font-size:10.5px;line-height:1.6;color:var(--mute);margin-top:14px}
.signin-page .si-ctas{position:absolute;left:26px;right:26px;bottom:30px;display:grid;gap:8px;justify-items:stretch}
.signin-page .si-ctas .si-btn{margin:0}
.signin-page .si-ctas .so{justify-self:center;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);background:none;border:0;cursor:pointer;text-decoration:underline;margin-top:6px}
.signin-page .si-timer{margin-top:18px}

/* 9/26 · the logo: "+ Logo" beside the motto (02-C, verbatim: 48 px · dashed #8A8984 · DM Mono 9.5/.1em) and the crest row on D */
.signin-page .si-mrow{display:flex;gap:8px;margin-top:8px}.signin-page .si-mrow .si-motto{flex:1;min-width:0;margin-top:0}
.signin-page .si-logo{height:48px;padding:0 14px;border-radius:12px;border:1px dashed #8A8984;background:transparent;color:#4A4A48;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.signin-page .si-crestrow{display:flex;align-items:center;gap:14px;margin-top:16px}.signin-page .si-crestrow .crest{position:relative;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,#3A3A40 0 34%,#0B0B0D 34.5%);box-shadow:0 10px 20px -10px rgba(0,0,0,.9);display:grid;place-items:center;flex:none}
.signin-page .si-crestrow .crest svg{width:16px;height:16px;stroke:#111}.signin-page .si-crestrow .t .e{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}.signin-page .si-crestrow .b{display:flex;gap:10px;align-items:center;margin-top:6px}.signin-page .si-crestrow .si-logo{height:36px;padding:0 12px}
.signin-page .si-crestrow .si-link{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);background:none;border:0;cursor:pointer;text-decoration:underline}

/* 9/26 · step C: Start a label / Join an existing one (02-signup-step-c.md, verbatim: the segmented control on sunk · chips 38 px · the ink card
   with the 52 px record · the member-email input with the ink border · the CTA pinned at bottom 30) and J, the joiner's waiting screen */
@keyframes llspin{to{transform:rotate(360deg)}}
@keyframes llrise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.signin-page .si-seg{display:inline-flex;background:var(--sunk);border-radius:10px;padding:3px;gap:2px;margin-bottom:12px}
.signin-page .si-seg button{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:7px;background:transparent;color:var(--ink2);border:0;cursor:pointer}
.signin-page .si-seg button.on{background:var(--ink);color:var(--paper)}
.signin-page .si-join{animation:llrise .25s ease both}
.signin-page .si-join .si-h1{margin-top:16px}
.signin-page .si-jchips{display:flex;gap:6px;margin-top:22px;overflow-x:auto;scrollbar-width:none;padding-right:26px;margin-right:-26px}.signin-page .si-jchips::-webkit-scrollbar{display:none}
.signin-page .si-jchip{flex:none;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 8px;border-radius:999px;border:1px solid var(--rule-strong);background:var(--card);color:var(--ink);font-family:var(--disp);font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap}
.signin-page .si-jchip i{width:16px;height:16px;border-radius:50%;background:var(--t);display:block}
.signin-page .si-jchip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.signin-page .si-jcard{margin-top:18px;display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;background:#111;color:#F1EFEA}
.signin-page .si-jrec{width:52px;height:52px;border-radius:50%;position:relative;background:radial-gradient(circle,var(--t,#3A3A40) 0 34%,#0B0B0D 34.5%);flex:none;animation:llspin 9s linear infinite;display:grid;place-items:center}
.signin-page .si-jrec svg{width:14px;height:14px;stroke:#fff}
.signin-page .si-jcard .t{flex:1;min-width:0}.signin-page .si-jcard .n{font-weight:700;font-size:17px;letter-spacing:-.02em;line-height:1}
.signin-page .si-jcard .m{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:#8B8A86;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signin-page .si-jname,.signin-page .si-jemail,.signin-page .si-jline{width:100%;height:48px;margin-top:8px;padding:0 16px;border-radius:12px;border:1px solid var(--rule-strong);background:var(--card);color:var(--ink);font-size:14px;outline:none;box-sizing:border-box;font-family:var(--disp)}
.signin-page .si-jname{margin-top:14px}.signin-page .si-jemail{height:52px;border-color:var(--ink);font-family:var(--mono)}
.signin-page .si-jname:focus,.signin-page .si-jline:focus{border-color:var(--ink)}
.signin-page .si-jnote{font-family:var(--mono);font-size:10px;line-height:1.6;color:var(--mute);margin-top:12px}
.signin-page .si-join .cta{position:absolute;left:26px;right:26px;bottom:30px;width:auto;margin:0}
.signin-page #stepC.joining{padding-bottom:120px}
.signin-page .si-jwait .si-jrec{width:96px;height:96px;margin-top:40px;box-shadow:0 18px 36px -18px rgba(0,0,0,.6)}.signin-page .si-jwait .si-jrec svg{width:20px;height:20px}
.signin-page .si-jwait .si-h1{margin-top:26px}
.signin-page .si-jwait .si-body{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--ink2);max-width:30ch}

/* 9/26 · the display name on the account view (D) — the team's chips and /join read it */
.signin-page .si-namerow{display:flex;gap:8px;margin-top:16px}.signin-page .si-namerow input{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--rule-strong);background:var(--card);color:var(--ink);font-size:14px;outline:none;font-family:var(--disp)}.signin-page .si-namerow input:focus{border-color:var(--ink)}.signin-page .si-namerow .si-logo{height:44px;border-style:solid;border-color:var(--rule-strong)}
.signin-page .si-namenote{margin-top:8px;font-size:9.5px}

/* ═══ 9/26 · 31 THE MAIL on the account view (design/claude-design-handoff-2026-09-26b/CLAUDE-CODE-notifications.md) ═══
   Phone 390 dark: "← Account" bar · eyebrow · the 40px headline · the card (#19191C · #2A2A2E · padding 2/16 · rows 14/0) · 72×44 switches.
   Desktop 1280 light: the account rail (300px) + the column (the Signed in as / Your name card, then the prefs card · rows 16/0 · 44×26 switches). */
.signin-page .si-rail{display:none}
.signin-page .si-col{position:relative;min-height:100dvh}
.signin-page .si-step.m{padding-bottom:40px}
.signin-page .si-mailhead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-top:26px}
.signin-page .si-mailhead .si-h1{margin-top:12px;font-size:40px;line-height:.92;letter-spacing:-.045em}
.signin-page .si-on{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow);white-space:nowrap;padding-bottom:4px}
.signin-page .si-acct{display:none}
.signin-page .si-prefs{margin-top:20px;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:2px 16px}
.signin-page .si-prefs .pr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t s" "n s";gap:4px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.signin-page .si-prefs .pr .t{grid-area:t;min-width:0}.signin-page .si-prefs .pr .n{font-weight:700;font-size:13px;letter-spacing:-.01em}
.signin-page .si-prefs .pr .w{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--eyebrow);margin-top:4px;line-height:1.5}
/* "Drop the needle" — the test send; mute when the moment is off */
.signin-page .si-prefs .needle{grid-area:n;justify-self:start;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;margin-top:2px}
.signin-page .si-prefs .needle.off{color:var(--mute)}.signin-page .si-prefs .needle:disabled{opacity:.6;cursor:default}
/* THE TAPE-DECK SWITCH — the site's one toggle from here on. Phone (thumb): 72×44 r7, paddle 36×36 r5 at top 3, left 3 → 32, a 14px tick.
   ON = ink track, paper paddle, the tick in ink. OFF = hairline track, grey paddle, no tick. No green anywhere. */
.signin-page .tape{grid-area:s;width:72px;height:44px;border-radius:7px;border:1px solid var(--rule-strong);background:var(--card);position:relative;cursor:pointer;padding:0;transition:background .18s,border-color .18s;flex:none}
.signin-page .tape span{position:absolute;top:3px;left:3px;width:36px;height:36px;border-radius:5px;background:var(--rule-strong);display:grid;place-items:center;transition:left .18s cubic-bezier(.2,.8,.2,1),background .18s;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.signin-page .tape svg{width:14px;height:14px;stroke:transparent}
.signin-page .tape.on{background:var(--ink);border-color:var(--ink)}.signin-page .tape.on span{left:32px;background:var(--paper)}.signin-page .tape.on svg{stroke:var(--ink)}
.signin-page .si-prefs .ft{padding:12px 0;font-family:var(--mono);font-size:9px;letter-spacing:.04em;line-height:1.7;color:var(--eyebrow)}
/* the phone's way in: a row on the account view */
.signin-page .si-mailrow{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--card);border:1px solid var(--rule);text-decoration:none;color:inherit}
.signin-page .si-mailrow b{font-weight:700;font-size:15px;display:block}.signin-page .si-mailrow small{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--eyebrow);display:block;margin-top:4px}.signin-page .si-mailrow i{font-style:normal;color:var(--mute)}
@media(prefers-reduced-motion:reduce){.signin-page .tape,.signin-page .tape span{transition:none}}
/* ── desktop ≥1024: the account views widen to the artboard (padding 40/40/56 · 300px rail + the column · gap 48) ── */
@media(min-width:1024px){
  .signin-page .si.acctview{max-width:1280px}
  .signin-page .si.acctview .si-step.d,.signin-page .si.acctview .si-step.m{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start;padding:40px 40px 56px;min-height:0}
  .signin-page .si.acctview .si-col{max-width:520px;min-height:0}
  .signin-page .si.acctview .si-step.d .si-col{min-height:calc(100dvh - 96px)}
  .signin-page .si.acctview .si-step.m .si-col{max-width:none}
  .signin-page .si.acctview .si-rail{display:block;position:sticky;top:20px}
  .signin-page .si-rail .eyebrow{margin-bottom:10px}
  .signin-page .si-rail a{display:block;padding:12px 14px;border-radius:9px;text-decoration:none;font-weight:700;font-size:15px;color:var(--ink2)}
  .signin-page .si-rail a.on{background:var(--ink);color:var(--paper)}
  .signin-page .si-rail a:hover:not(.on){background:var(--card)}
  .signin-page .si-step.m .si-bar.ph{display:none}
  .signin-page .si-step.m .si-pad.tight{padding:0}
  .signin-page .si-acct{display:block;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:6px 22px 4px}
  .signin-page .si-acct .r{display:grid;grid-template-columns:1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule-soft);font-size:13.5px}
  .signin-page .si-acct .r:last-child{border-bottom:0}.signin-page .si-acct .r span{color:var(--eyebrow)}.signin-page .si-acct .r b{font-weight:700}.signin-page .si-acct .r b.mono{font-family:var(--mono);font-size:12.5px;font-weight:400}
  .signin-page .si-mailhead .si-h1{font-size:34px;letter-spacing:-.04em;line-height:1}
  .signin-page .si-on{padding-bottom:2px}
  .signin-page .si-prefs{margin-top:16px;padding:4px 22px}
  .signin-page .si-prefs .pr{grid-template-columns:1fr auto auto;grid-template-areas:"t n s";gap:22px;padding:16px 0}
  .signin-page .si-prefs .needle{justify-self:end;margin-top:0}
  .signin-page .tape{width:44px;height:26px;border-radius:5px}
  .signin-page .tape span{top:2px;left:2px;width:20px;height:20px;border-radius:3px}.signin-page .tape.on span{left:21px}
  .signin-page .tape svg{width:10px;height:10px}
  .signin-page .si-prefs .ft{font-size:9.5px;letter-spacing:.06em;padding:14px 0}
  .signin-page .si-mailrow{display:none}
}
/* 9/29 · phones/tablets: the pinned CTA stack sits at the bottom of .si-col, so its reserve belongs inside .si-col (it was on .si-step,
   below the column; on desktop there was none) — a long account view no longer runs under the buttons */
.signin-page .si-step.d .si-col{padding-bottom:200px}
@media(max-width:1023px){.signin-page .si-step.d{padding-bottom:0}}

/* v8 (11/5) · sign-in step 3: the code by text (design/signin/STEP3-DESIGN-2026-11-04.md §10). Nothing here shows while texting is off */
.signin-page .si-swap{display:block;margin:14px 0 0;padding:0;background:none;border:0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-decoration:underline;cursor:pointer}
.signin-page .si-swap.in{display:inline;margin:0;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}
.signin-page .si-robot{margin-top:10px}.signin-page .si-robot:empty{margin:0}
.signin-page .si-padd{margin-top:14px}.signin-page .si-padd[hidden]{display:none}.signin-page .si-pcode{margin-top:6px}
.signin-page .si-phone{margin-top:16px;padding:6px 16px;border-radius:12px;background:var(--card);border:1px solid var(--rule)}
.signin-page .si-prow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule-soft);font-size:13.5px}
.signin-page .si-prow:last-of-type{border-bottom:0}.signin-page .si-prow>span:first-child{color:var(--eyebrow)}.signin-page .si-prow b.mono{font-family:var(--mono);font-size:12.5px;font-weight:400}
.signin-page .si-prow .a{display:flex;gap:12px}.signin-page .si-prow .si-link{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);background:none;border:0;cursor:pointer;text-decoration:underline;padding:0}
.signin-page .si-prow.sw{grid-template-columns:1fr auto}
.signin-page .si-prow .tape{grid-area:auto}
.signin-page .si-news{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--card);border:1px solid var(--rule)}.signin-page .si-news .si-h1{margin-top:6px}.signin-page .si-news .si-link{display:inline-block;margin-top:10px}