/* GENERATED by tools/sync-apex-ui.mjs from packages/ui/src/signin.css. Do not edit here; edit the source and re-run. */
/* @cal/ui sign-in: the one sign-in, everywhere.
 *
 * The split Chris picked on 2026-10-12 ("love this sign in page, this needs to be
 * universal"): a flooded green panel with the mark, the hero line and three live
 * stats, and a paper form column. It was born as apps/apex/sign-in.html; this file
 * is that page's styles on brand tokens, so it renders identically on askcal.io,
 * copilot.askcal.io and every subdomain.
 *
 * Paper on purpose. The sign-in is the one signed-out screen, so it wears the public
 * brand even when it covers a Night page: the root carries class="cal-paper", the
 * paper island in cal-brand.css, so every token resolves to paper inside it. Tokens
 * only: every colour below is a var() from cal-brand.css. The muted tints on the green
 * panel are opaque color-mix() of --paper-raised over the flood, never a literal and
 * never alpha text.
 *
 * Markup is emitted by signin.js. Classes are prefixed cal-signin so nothing here
 * collides with a surface's own styles.
 */

.cal-signin { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.12fr 0.88fr; font-family: var(--sans); color: var(--ink); background: var(--paper); }
.cal-signin *, .cal-signin *::before, .cal-signin *::after { box-sizing: border-box; }

/* ---- the brand panel ---- */
.cal-signin__brand { position: relative; overflow: hidden; isolation: isolate; background: var(--green-deep); color: var(--paper-raised);
  padding: 60px 58px 40px; display: flex; flex-direction: column; gap: 40px; justify-content: space-between; }
.cal-signin__grid { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); z-index: 0; pointer-events: none; opacity: 0.5; }
.cal-signin__grid pattern rect { fill: var(--paper-raised); }
.cal-signin__square { position: absolute; z-index: 0; pointer-events: none; right: -120px; top: -90px; width: 360px; height: 360px;
  background: color-mix(in srgb, var(--paper-raised) 4.5%, var(--green-deep)); transform: rotate(6deg); }
.cal-signin__brand > :not(.cal-signin__grid):not(.cal-signin__square) { position: relative; z-index: 1; }

.cal-signin__mark { display: flex; align-items: center; gap: 14px; }
.cal-signin__mark svg { width: 42px; height: 42px; }
.cal-signin__mark .stroke { stroke: var(--paper-raised); }
.cal-signin__mark .fill { fill: var(--green-dark); }
.cal-signin__mark .word { font-family: var(--serif); font-size: 31px; font-weight: 500; letter-spacing: -0.02em; color: var(--paper-raised); }

.cal-signin__hero h2 { font-family: var(--serif); text-transform: none; border: 0; padding: 0; font-weight: 500; font-style: normal; font-size: clamp(2.55rem, 4.6vw, 3.6rem); line-height: 1.03;
  letter-spacing: -0.025em; margin: 0 0 22px; color: var(--paper-raised); max-width: 14ch; text-wrap: balance; }
.cal-signin__hero h2 em { font-style: italic; color: inherit; }   /* beats the page's own em rules (night.css greys them) */
.cal-signin__hero p { font-weight: 400; font-family: var(--sans); font-size: 17px; line-height: 1.64; color: color-mix(in srgb, var(--paper-raised) 76%, var(--green-deep)); margin: 0; max-width: 42ch; }

.cal-signin__stats { display: flex; gap: 0; border-top: 1px solid color-mix(in srgb, var(--paper-raised) 22%, var(--green-deep)); padding-top: 26px; }
.cal-signin__stats[hidden] { display: none; }
.cal-signin__stat { flex: 1; padding-right: 28px; border-left: 1px solid color-mix(in srgb, var(--paper-raised) 22%, var(--green-deep)); padding-left: 26px; min-width: 0; }
.cal-signin__stat:first-child { border-left: none; padding-left: 0; }
.cal-signin__stat .n { font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 3.4vw, 2.85rem); letter-spacing: -0.02em;
  color: var(--paper-raised); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.cal-signin__stat .l { font-family: var(--sans); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper-raised) 64%, var(--green-deep)); margin-top: 11px; }
.cal-signin__foot { font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper-raised) 58%, var(--green-deep)); margin-top: 24px; }

/* ---- the form column ---- */
.cal-signin__form { display: grid; place-items: center; padding: 48px 28px; background: var(--paper); min-width: 0; }
.cal-signin__card { width: 100%; max-width: 404px; animation: cal-signin-rise 0.5s ease both; }
@keyframes cal-signin-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.cal-signin__eyebrow { font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px; }
.cal-signin__card h1 { font-family: var(--serif); text-transform: none; border: 0; padding: 0; font-weight: 500; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.022em; margin: 0 0 12px; color: var(--ink); }
.cal-signin__lead { font-family: var(--sans); font-weight: 400; font-size: 15.5px; color: var(--ink-muted); margin: 0 0 30px; line-height: 1.58; }

.cal-signin__fields { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.cal-signin__fields label { display: block; font-weight: 500; font-family: var(--sans); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: -6px; }
.cal-signin__fields input { font-family: var(--sans); font-size: 16px; padding: 15px 16px; background: var(--paper-raised); border: 1px solid var(--hairline-strong);
  color: var(--ink); border-radius: 0; width: 100%; margin: 0; min-height: 0; line-height: 1.3; -webkit-appearance: none; appearance: none; }
.cal-signin__fields input::placeholder { color: var(--ink-muted); }
.cal-signin__fields input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }

.cal-signin__btn { display: inline-flex; margin: 0; text-transform: none; letter-spacing: 0.01em; line-height: 1.2; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 16px 22px;
  font-family: var(--sans); font-size: 15.5px; font-weight: 600; letter-spacing: 0.01em; border: 1px solid var(--green); border-radius: 0;
  background: var(--green); color: var(--paper); cursor: pointer; transition: background 150ms ease, border-color 150ms ease, transform 100ms ease; }
.cal-signin__btn:hover { background: var(--green-hover); border-color: var(--green-hover); }
.cal-signin__btn:active { transform: translateY(1px); }
.cal-signin__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cal-signin__btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
.cal-signin__btn--secondary { background: transparent; border-color: var(--hairline-strong); color: var(--ink); font-weight: 500; }
.cal-signin__btn--secondary:hover { background: var(--paper-raised); border-color: var(--ink); }
a.cal-signin__btn { text-decoration: none; }

.cal-signin__or { display: flex; align-items: center; gap: 12px; margin: 4px 0; font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.cal-signin__or::before, .cal-signin__or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

.cal-signin__other { margin-top: 6px; text-align: left; }
.cal-signin__link { background: none; border: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 0; padding: 5px 0; min-height: 24px;
  font-family: var(--sans); font-size: 13.5px; color: var(--ink-muted); cursor: pointer; }
.cal-signin__link:hover { color: var(--ink); border-color: var(--ink); }
.cal-signin__password { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.cal-signin__password[hidden] { display: none; }

.cal-signin__hint { font-family: var(--sans); font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; margin: 2px 0 0; }
.cal-signin__msg { font-family: var(--sans); padding: 13px 16px; font-size: 14.5px; line-height: 1.5; margin: 0; color: var(--ink); }
.cal-signin__msg[hidden] { display: none; }
.cal-signin__msg--ok { background: var(--green-wash); border-left: 3px solid var(--green); }
.cal-signin__msg--err { background: var(--alert-wash); border-left: 3px solid var(--status-alert); }

.cal-signin__exchange { text-align: center; }
.cal-signin__exchange p { font-family: var(--sans); color: var(--ink); margin: 0; }
.cal-signin__spinner { width: 24px; height: 24px; border: 2px solid var(--hairline); border-top-color: var(--green); border-radius: 50%; animation: cal-signin-spin 0.7s linear infinite; margin: 8px auto 18px; }
@keyframes cal-signin-spin { to { transform: rotate(360deg); } }

.cal-signin__new { margin: 32px 0 0; font-family: var(--sans); font-size: 13.5px; color: var(--ink-muted); }
.cal-signin__new a { display: inline-block; background: none; padding: 5px 0; min-height: 24px; color: var(--ink); border-bottom: 1px solid var(--green); text-decoration: none; font-weight: 600; }

/* ---- sections inside the card, for pages that draw their own card (account security) ---- */
.cal-signin__who { font-family: var(--sans); font-size: 13px; color: var(--ink-muted); margin: 0 0 26px; overflow-wrap: anywhere; }
.cal-signin__section { border: 1px solid var(--hairline); border-left: 3px solid var(--ink); padding: 22px 22px 20px; margin: 0 0 16px; background: var(--paper-raised); }
.cal-signin__section h2 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ink); text-transform: none; }
.cal-signin__status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 12px; }
.cal-signin__status::before { content: ""; width: 8px; height: 8px; flex: none; border: 1px solid var(--ink); background: transparent; }
.cal-signin__status--on { color: var(--ink); }
.cal-signin__status--on::before { background: var(--green); border-color: var(--green); }
.cal-signin__desc { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink-muted); margin: 0 0 14px; }
.cal-signin__list { list-style: none; padding: 0; margin: 0 0 14px; }
.cal-signin__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-family: var(--sans); font-size: 14px; color: var(--ink); }
.cal-signin__list li:last-child { border-bottom: 0; }
.cal-signin__meta { font-size: 12px; color: var(--ink-muted); }
.cal-signin__back { display: block; margin: 8px 0 0; font-family: var(--sans); font-size: 13.5px; color: var(--ink-muted); }
.cal-signin__back a { color: var(--ink); border-bottom: 1px solid var(--hairline-strong); text-decoration: none; padding: 5px 0; min-height: 24px; display: inline-block; }
.cal-signin__back a:hover { border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .cal-signin__card, .cal-signin__spinner { animation: none; }
}
@media (max-width: 900px) {
  .cal-signin { grid-template-columns: 1fr; }
  .cal-signin__brand { display: none; }
  .cal-signin__form { padding: 40px 22px; }
}

/* Campaign opt-in: the same auth component and methods, a new arrival screen. */
.cal-signin--campaign{grid-template-columns:1.08fr 1fr}
.cal-signin--campaign .cal-signin__skip{position:absolute;left:16px;top:-100px;z-index:10;padding:12px 16px;background:var(--campaign-ivory);color:var(--campaign-ink);border-radius:var(--r-sm)}
.cal-signin--campaign .cal-signin__skip:focus{top:16px}
.cal-signin--campaign .cal-signin__brand{background:var(--campaign-forest);padding:40px clamp(28px,5vw,80px);gap:28px}
.cal-signin--campaign .cal-signin__grid,.cal-signin--campaign .cal-signin__square{display:none}
.cal-signin--campaign .cal-signin__home{text-decoration:none;color:var(--campaign-ivory)}
.cal-signin--campaign .cal-signin__home-label{margin-left:auto;font-size:12px;letter-spacing:0;color:var(--campaign-muted)}
.cal-signin--campaign .cal-signin__home:focus-visible{outline-color:var(--campaign-mint)}
.cal-signin--campaign .cal-signin__art{display:block;height:clamp(180px,25vh,270px);flex:0 0 auto;background:url('../assets/campaign-ecosystem.png') center 54%/cover no-repeat;border-radius:var(--r-lg);animation:cal-signin-rise var(--campaign-enter) var(--campaign-ease) both}
.cal-signin--campaign .cal-signin__hero h2{font-family:var(--display);font-weight:600;font-size:clamp(40px,4.8vw,68px);line-height:1.02;max-width:none;letter-spacing:-.045em;color:var(--campaign-ivory);margin-bottom:18px}
.cal-signin--campaign .cal-signin__hero h2 em{font-family:var(--serif);font-weight:400;color:var(--campaign-mint)}
.cal-signin--campaign .cal-signin__hero>.cal-signin__eyebrow{display:block;color:var(--campaign-muted);font-size:12px;letter-spacing:.1em}
.cal-signin--campaign .cal-signin__hero p{font-size:15px;color:var(--campaign-muted);max-width:44ch}
.cal-signin--campaign .cal-signin__stats{padding-top:20px;border-color:var(--campaign-line)}
.cal-signin--campaign .cal-signin__stat{border-color:var(--campaign-line);padding-left:18px;padding-right:18px}
.cal-signin--campaign .cal-signin__stat:first-child{padding-left:0}
.cal-signin--campaign .cal-signin__stat .n{font-family:var(--display);font-size:30px;color:var(--campaign-ivory)}
.cal-signin--campaign .cal-signin__stat .l{font-size:12px;letter-spacing:.04em;color:var(--campaign-muted);line-height:1.5}
.cal-signin--campaign .cal-signin__foot{color:var(--campaign-muted);letter-spacing:.05em}
.cal-signin--campaign .cal-signin__form{padding:56px 32px;background:var(--campaign-ivory)}
.cal-signin--campaign .cal-signin__card{max-width:420px;animation:cal-signin-rise var(--campaign-enter) var(--campaign-ease) both}
.cal-signin--campaign .cal-signin__card h1{font-family:var(--display);font-size:clamp(36px,3.6vw,48px);font-weight:600;letter-spacing:-.045em}
.cal-signin--campaign .cal-signin__lead{margin-bottom:28px}
.cal-signin--campaign .cal-signin__fields input,.cal-signin--campaign .cal-signin__btn,.cal-signin--campaign .cal-signin__msg{border-radius:var(--r-md)}
.cal-signin--campaign .cal-signin__fields input{background:var(--campaign-paper-inset)}
.cal-signin--campaign .cal-signin__btn{transition:background var(--campaign-fast),border-color var(--campaign-fast),transform var(--campaign-fast);color:var(--campaign-ivory)}
.cal-signin--campaign .cal-signin__btn--secondary{color:var(--campaign-ink)}
.cal-signin--campaign .cal-signin__hint{line-height:1.65}
.cal-signin--campaign .cal-signin__new{padding-top:22px;border-top:1px solid var(--hairline)}
@media(max-width:900px){
  .cal-signin--campaign{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .cal-signin--campaign .cal-signin__brand{display:flex;padding:20px 24px;gap:0}
  .cal-signin--campaign .cal-signin__brand>.cal-signin__hero,.cal-signin--campaign .cal-signin__brand>.cal-signin__art,.cal-signin--campaign .cal-signin__brand>div:last-child{display:none}
  .cal-signin--campaign .cal-signin__mark svg{width:32px;height:32px}
  .cal-signin--campaign .cal-signin__mark .word{font-size:27px}
  .cal-signin--campaign .cal-signin__form{padding:36px 24px;align-items:start}
}
@media(max-width:360px){.cal-signin--campaign .cal-signin__form{padding:30px 18px}.cal-signin--campaign .cal-signin__brand{padding:16px 18px}}
@media(prefers-reduced-motion:reduce){.cal-signin--campaign .cal-signin__art,.cal-signin--campaign .cal-signin__card{animation:none}.cal-signin--campaign .cal-signin__btn{transition:none}}
.cal-signin--campaign[data-motion="reduce"] *{animation:none!important;transition:none!important}