/* The sign-in dialog, the account button and menu, and the welcome note (see auth.js). Used by the site and by the studio, which have
   different design tokens, so every colour here is read from the site's variables when the page has them (--bg-raise, --fg, --amber, --serif ...,
   as defined in /s/styles.9560408c.css) and falls back to the studio's values when it doesn't. A restyle of the site's variables flows through; this file
   only needs touching for the shape of things. Both products are dark. Type is inherited, except the dialog's title, which uses the site's
   serif where there is one. Only transform and opacity are animated (plus the dialog's height while its view changes). */

/* The headline face of the standalone sign-in pages (the welcome page an emailed link opens). The build points this at the hashed copy of the
   site's own Fraunces, so it is one font file for the whole site; pages that already have --serif never ask for it. */
@font-face { font-family: "Brand Serif"; src: url("/s/fraunces-normal.58e6da7c.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

.ia-veil, .ia-acct, .ia-btn, .ia-hello {
  --ia-bg: var(--bg-raise, #111113);
  --ia-raise: var(--bg-raise-2, #18181b);
  --ia-hover: #202024;
  --ia-line: var(--line-2, #2c2c31);
  --ia-line-2: var(--line-3, #45454c);
  --ia-fg: var(--fg, #eeebe6);
  --ia-fg-2: var(--fg-2, #a6a3a0);
  --ia-fg-3: var(--fg-3, #8b8885);
  --ia-accent: var(--amber, #f0a660);
  --ia-on-fg: var(--on-fg, #0a0a0b);
  --ia-soft: #e8a49b; /* a softened rose for problems: readable on dark, never a red wall */
  --ia-ok: var(--ok, #5bd68a);
  --ia-serif: var(--serif, inherit);
  --ia-ease: var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  --ia-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- the dialog ---------- */
.ia-veil {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, 0.66); opacity: 0; transition: opacity 160ms ease; overscroll-behavior: contain;
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.ia-veil.is-open { opacity: 1; transition-duration: 220ms; }
.ia-veil.is-closing { pointer-events: none; }
.ia-sheet {
  position: relative; width: min(100%, 400px); max-height: calc(100% - 16px); overflow: auto; padding: 30px 26px 22px;
  border-radius: 20px; background: var(--ia-bg); border: 1px solid var(--ia-line); color: var(--ia-fg);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  transform: translateY(10px) scale(0.975); opacity: 0;
  transition: transform 160ms ease, opacity 140ms ease;
}
.ia-veil.is-open .ia-sheet { transform: none; opacity: 1; transition: transform 260ms var(--ia-ease), opacity 200ms ease; }
.ia-sheet:focus { outline: none; }
:where(.ia-sheet h2, .ia-sheet p) { margin: 0; }
.ia-sheet [hidden] { display: none !important; }
.ia-x {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--ia-fg-3); cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, transform 160ms var(--ia-ease);
}
.ia-x:active { transform: scale(0.92); }

/* The mark: a beam in, a small glass triangle, the beam out in colour. The same drawing as the welcome page, small. */
.ia-mark { display: block; width: 52px; height: 26px; margin-bottom: 14px; overflow: visible; }
.ia-mark .ia-tri { fill: rgba(255, 255, 255, 0.05); stroke: var(--ia-fg-2); stroke-width: 1.4; stroke-linejoin: round; }
.ia-mark .ia-in { stroke: var(--ia-fg); stroke-width: 1.8; stroke-linecap: round; }
.ia-mark .ia-ray { stroke-width: 1.8; stroke-linecap: round; }

.ia-h { font-family: var(--ia-serif); font-size: 1.625rem; line-height: 1.15; font-weight: 400; letter-spacing: -0.02em; padding-right: 32px; outline: none; text-wrap: balance; }
.ia-lede { margin-top: 8px; color: var(--ia-fg-2); text-wrap: pretty; }
.ia-lede b { color: var(--ia-fg); font-weight: 600; overflow-wrap: anywhere; }

/* Google's own button is drawn by Google's script (their rules: their logo, their text, no restyling). Until it arrives, a quiet placeholder
   of the same size holds the room so nothing jumps; it has no text, so it can't be mistaken for the real button. */
.ia-google { position: relative; display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: 22px; border-radius: 999px; }
.ia-google.is-loading::before { content: ""; width: min(100%, 352px); height: 40px; border-radius: 999px; background: var(--ia-raise); border: 1px solid var(--ia-line); animation: ia-breathe 1.4s ease-in-out infinite; }
.ia-fake { width: 100%; }
.ia-note { margin-top: 12px; font-size: 0.8125rem; color: var(--ia-fg-3); }
.ia-or { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: var(--ia-fg-3); font-size: 0.8125rem; }
.ia-or::before, .ia-or::after { content: ""; flex: 1; height: 1px; background: var(--ia-line); }

.ia-form { display: grid; gap: 8px; }
.ia-form:first-child, .ia-lede + .ia-form { margin-top: 22px; }
.ia-label { font-size: 0.8125rem; color: var(--ia-fg-2); }
.ia-input {
  height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--ia-line); background: var(--ia-raise);
  color: var(--ia-fg); font: inherit; font-size: 1rem; /* 16px keeps iOS from zooming in on focus */
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ia-input::placeholder { color: var(--ia-fg-3); }
.ia-input:focus { outline: none; border-color: var(--ia-accent); box-shadow: 0 0 0 3px rgba(240, 166, 96, 0.16); }
.ia-input[aria-invalid="true"] { border-color: var(--ia-soft); box-shadow: 0 0 0 3px rgba(232, 164, 155, 0.12); }
.ia-primary, .ia-secondary, .ia-danger-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1px solid transparent; font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: transform 160ms var(--ia-ease), background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.ia-primary { background: var(--ia-fg); color: var(--ia-on-fg); }
.ia-secondary { background: transparent; color: var(--ia-fg); border-color: var(--ia-line-2); }
.ia-danger-btn { background: #b8332b; color: #fff; }
.ia-primary:active, .ia-secondary:active, .ia-danger-btn:active { transform: scale(0.97); }
.ia-primary:disabled, .ia-secondary:disabled, .ia-danger-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.ia-primary.is-busy:disabled { opacity: 1; }
.ia-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(10, 10, 11, 0.25); border-top-color: currentColor; animation: ia-spin 640ms linear infinite; }
.ia-link { padding: 8px 4px; border: 0; background: none; color: var(--ia-fg-2); font: inherit; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ia-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 22px; }
.ia-actions .ia-secondary { font-variant-numeric: tabular-nums; }

/* a problem: a small note with a dot, in a softened rose. It appears under the field, it doesn't shout. */
.ia-msg { min-height: 0; margin-top: 12px; font-size: 0.875rem; color: var(--ia-fg-2); }
.ia-msg:empty { display: none; }
.ia-msg.is-bad { color: var(--ia-soft); padding-left: 16px; position: relative; animation: ia-note-in 220ms var(--ia-ease); }
.ia-msg.is-bad::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ia-fine { margin-top: 18px; font-size: 0.75rem; color: var(--ia-fg-3); }
.ia-fine a, .ia-sheet .ia-lede a { color: var(--ia-fg-2); text-underline-offset: 3px; }
.ia-ts:empty { display: none; }
.ia-ts { margin-top: 12px; }
.ia-sheet :focus-visible { outline: 2px solid var(--ia-accent); outline-offset: 2px; }
.ia-input:focus-visible, .ia-h:focus-visible { outline: none; }

/* views inside the dialog: the new one comes in with a short rise, the height follows (auth.js animates it) */
.ia-view { animation: ia-view-in 280ms var(--ia-ease) both; }

/* the sent view: an envelope that draws itself, then a flash of the beam's colours */
.ia-env { width: 60px; height: 46px; margin-bottom: 14px; overflow: visible; }
.ia-env .ia-env-body { fill: rgba(255, 255, 255, 0.04); stroke: var(--ia-fg-2); stroke-width: 1.6; stroke-linejoin: round; animation: ia-view-in 320ms var(--ia-ease) both; transform-origin: 50% 60%; }
.ia-env .ia-env-flap { fill: none; stroke: var(--ia-fg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: ia-draw 520ms var(--ia-ease) 160ms forwards; }
.ia-env circle { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ia-twinkle 700ms var(--ia-ease) forwards; }
.ia-env circle:nth-of-type(1) { animation-delay: 560ms; }
.ia-env circle:nth-of-type(2) { animation-delay: 620ms; }
.ia-env circle:nth-of-type(3) { animation-delay: 680ms; }
.ia-env circle:nth-of-type(4) { animation-delay: 740ms; }
.ia-env circle:nth-of-type(5) { animation-delay: 800ms; }
.ia-env circle:nth-of-type(6) { animation-delay: 860ms; }

@media (hover: hover) and (pointer: fine) {
  .ia-x:hover { color: var(--ia-fg); background: var(--ia-raise); }
  .ia-primary:hover:not(:disabled) { background: #fff; }
  .ia-secondary:hover:not(:disabled) { background: var(--ia-raise); border-color: #5a5a62; }
  .ia-danger-btn:hover:not(:disabled) { background: #c93a31; }
  .ia-link:hover, .ia-fine a:hover { color: var(--ia-fg); }
}
@media (max-width: 480px) {
  .ia-veil { align-items: end; padding: 0; }
  .ia-sheet {
    width: 100%; max-height: 92%; border-radius: 22px 22px 0 0; padding-bottom: max(24px, env(safe-area-inset-bottom));
    transform: translateY(100%); opacity: 1; transition: transform 200ms var(--ia-drawer);
  }
  .ia-veil.is-open .ia-sheet { transform: none; transition: transform 340ms var(--ia-drawer); }
  .ia-actions .ia-secondary, .ia-actions .ia-primary, .ia-actions .ia-danger-btn { flex: 1 1 100%; }
}

/* ---------- the button and the menu ---------- */
.ia-acct { position: relative; display: inline-flex; }
/* the site's own .btn classes are put on the sign-in button; a <button> needs its background and font reset to match a link */
[data-ico-account] button.btn { background: transparent; font-family: inherit; }
[data-ico-account] { display: inline-flex; align-items: center; }
[data-ico-account][hidden] { display: none; }
.ia-btn {
  height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ia-line); background: transparent; color: var(--ia-fg);
  font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: transform 160ms var(--ia-ease), border-color 150ms ease;
}
.ia-btn:active { transform: scale(0.97); }

/* The avatar is the signed-in state: a gradient of two of the beam's colours, picked from the address, with its first letter. */
.ia-avatar, .ia-avatar-lg {
  --a: #f0a660; --b: #8f86f0;
  display: grid; place-items: center; padding: 0; border-radius: 999px; border: 0; flex: none;
  background: linear-gradient(135deg, var(--a), var(--b)); color: #0a0a0b; font: inherit; font-weight: 700; line-height: 1;
}
.ia-avatar {
  position: relative; width: 32px; height: 32px; font-size: 0.8125rem; cursor: pointer;
  box-shadow: 0 0 0 2px var(--ia-bg), 0 0 0 3px rgba(238, 235, 230, 0.22); transition: box-shadow 160ms ease, transform 160ms var(--ia-ease);
}
.ia-avatar::after { /* the "signed in" light */
  content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--ia-ok); box-shadow: 0 0 0 2px var(--ia-bg);
}
.ia-avatar:active { transform: scale(0.94); }
.ia-avatar[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--ia-bg), 0 0 0 3px var(--ia-fg-2); }
.ia-avatar-lg { width: 40px; height: 40px; font-size: 1rem; }
.ia-avatar:focus-visible, .ia-btn:focus-visible, .ia-pop :focus-visible { outline: 2px solid var(--ia-accent); outline-offset: 2px; }

.ia-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 1001; width: 280px; padding: 6px; border-radius: 16px;
  background: var(--ia-bg); border: 1px solid var(--ia-line); box-shadow: 0 18px 54px rgba(0, 0, 0, 0.55);
  color: var(--ia-fg); font-size: 0.875rem; line-height: 1.4; text-align: left;
  transform-origin: top right; transform: translateY(-4px) scale(0.97); opacity: 0; transition: transform 120ms ease, opacity 100ms ease;
}
.ia-pop.is-open { transform: none; opacity: 1; transition: transform 180ms var(--ia-ease), opacity 140ms ease; }
.ia-pop[hidden] { display: none; }
:where(.ia-pop p) { margin: 0; }
.ia-pop-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.ia-pop-who { min-width: 0; }
.ia-pop-email { font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.ia-pop-plan { margin-top: 3px; }
.ia-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--ia-line-2); color: var(--ia-fg-2); font-size: 0.75rem; line-height: 1.5; }
.ia-pop-extra:not(:empty) { margin: 0 6px 6px; padding: 10px 12px; border-radius: 10px; background: var(--ia-raise); color: var(--ia-fg-2); font-size: 0.8125rem; }
.ia-pop-sep { height: 1px; margin: 4px 0; background: var(--ia-line); }
.ia-pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--ia-fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color 120ms ease, transform 140ms var(--ia-ease);
}
.ia-pop-item:active { transform: scale(0.985); }
.ia-pop-item svg { flex: none; width: 16px; height: 16px; color: var(--ia-fg-3); }
.ia-pop-danger, .ia-pop-danger svg { color: var(--ia-soft); }
.ia-pop-msg { padding: 4px 10px; font-size: 0.75rem; color: var(--ia-soft); }
.ia-pop-msg:empty { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ia-pop-item:hover { background: var(--ia-raise); }
  .ia-avatar:hover { box-shadow: 0 0 0 2px var(--ia-bg), 0 0 0 3px var(--ia-fg-3); }
  .ia-btn:hover { border-color: var(--ia-fg-3); }
}

/* on a phone the menu spans the screen under the header (auth.js sets its top), so it can't run off the left edge */
@media (max-width: 480px) { .ia-pop { position: fixed; left: 12px; right: 12px; width: auto; top: 60px; transform-origin: top center; } }

/* ---------- the welcome note: a small panel under the account button, gone in a few seconds ---------- */
.ia-hello {
  position: fixed; z-index: 1002; top: 68px; right: 16px; width: min(340px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px;
  padding: 12px 8px 12px 12px; border-radius: 16px; background: var(--ia-bg); border: 1px solid var(--ia-line); color: var(--ia-fg);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.55); font-size: 0.875rem; line-height: 1.4; -webkit-font-smoothing: antialiased; overflow: hidden;
  transform: translateY(-8px) scale(0.98); transform-origin: top right; opacity: 0; transition: transform 160ms ease, opacity 140ms ease;
}
.ia-hello.is-in { transform: none; opacity: 1; transition: transform 320ms var(--ia-ease), opacity 220ms ease; }
.ia-hello-text { min-width: 0; flex: 1; }
.ia-hello-title { font-family: var(--ia-serif); font-size: 1.0625rem; line-height: 1.2; letter-spacing: -0.01em; }
.ia-hello-line { margin-top: 2px; color: var(--ia-fg-2); }
.ia-hello .ia-x { position: static; flex: none; width: 32px; height: 32px; }
.ia-hello::after { /* the beam, drawn along the bottom and shrinking as the time runs out */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left center; opacity: 0.85;
  background: linear-gradient(90deg, #ff5d4a, #f0a660, #f6d27a, #7ed6a4, #52b8d6, #8f86f0);
}
.ia-hello.is-in::after { animation: ia-run var(--ia-hello-ms, 6000ms) linear forwards; }
.ia-hello.is-held::after { animation-play-state: paused; }
@media (max-width: 640px) { .ia-hello { top: 60px; right: 0; left: 0; margin: 0 auto; transform-origin: top center; } }

@keyframes ia-view-in { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ia-note-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes ia-draw { to { stroke-dashoffset: 0; } }
@keyframes ia-twinkle { 0% { opacity: 0; transform: scale(0.4); } 40% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0.9; transform: scale(1); } }
@keyframes ia-spin { to { transform: rotate(360deg); } }
@keyframes ia-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes ia-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ia-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ia-veil, .ia-sheet, .ia-primary, .ia-secondary, .ia-danger-btn, .ia-avatar, .ia-btn, .ia-x, .ia-pop, .ia-pop-item, .ia-hello { transition: opacity 150ms ease; }
  .ia-sheet, .ia-veil.is-open .ia-sheet, .ia-pop, .ia-pop.is-open, .ia-hello, .ia-hello.is-in { transform: none; }
  .ia-view, .ia-msg.is-bad, .ia-env .ia-env-body { animation: ia-fade 150ms ease both; }
  .ia-env .ia-env-flap { animation: none; stroke-dashoffset: 0; }
  .ia-env circle { animation: none; opacity: 0.9; }
  .ia-hello.is-in::after { animation: none; }
  .ia-google.is-loading::before { animation: none; }
  .ia-spin { animation-duration: 1.6s; }
}