/* MailFlow — sign-in page */
:root {
  --navy: #0d1a3d;
  --navy-2: #091330;
  --ink: #0f172a;
  --ink-2: #5b6578;
  --ink-3: #94a0b4;
  --line: #dfe4ee;
  --blue: #1a6dff;
  --blue-2: #0f5ae6;
  --blue-soft: #e8f0ff;
  --red: #dc2626;
  --red-soft: #fdeeee;
  --green: #22c55e;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.login { margin: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); min-height: 100vh; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }

/* ---------------------------------------------------------------- left: the story */
.story {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 28px;
  padding: 44px 56px 40px;
  color: #c9d3ea;
  background:
    radial-gradient(900px 500px at 85% 110%, rgba(26, 109, 255, .28), transparent 60%),
    radial-gradient(600px 400px at -10% -10%, rgba(14, 165, 233, .18), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
}
.story::before { /* the canvas dot grid from the flow builder */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.story > * { position: relative; }
.story-logo { width: 210px; height: auto; }
.story-copy { max-width: 40rem; margin-top: auto; }
.story h1 { margin: 0 0 14px; color: #fff; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; }
.story-copy p { margin: 0; font-size: 16px; line-height: 1.6; color: #aab6d3; max-width: 30rem; }
.story-foot { margin: 0; font-size: 13px; color: #7f8db0; max-width: 34rem; line-height: 1.5; }

/* the animated flow */
.flow { width: 100%; max-width: 660px; margin-bottom: auto; }
.flow svg { width: 100%; height: auto; display: block; overflow: visible; }
.wire { fill: none; stroke: rgba(148, 170, 220, .28); stroke-width: 2; }
.wire.no { stroke-dasharray: 4 5; }
.route { fill: none; stroke: #4f8df7; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 8; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -14; } }
.node rect:first-child { fill: rgba(255, 255, 255, .97); stroke: rgba(255, 255, 255, .5); }
.node .t { font: 700 12px Inter, sans-serif; fill: var(--ink); }
.node .s { font: 500 10.5px Inter, sans-serif; fill: var(--ink-2); }
.node .s.dim { fill: var(--ink-3); }
.node .chip { stroke: none; }
.node .glyph { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-box { fill: #2f6bff; } .c-research { fill: #0ea5e9; } .c-email { fill: #8b5cf6; } .c-cond { fill: #ec4899; } .c-hot { fill: #ef4444; }
.node.faint { opacity: .38; }
.node.goal rect:first-child { stroke: #22c55e; stroke-width: 2; }
.pill text { font: 700 10.5px Inter, sans-serif; text-anchor: middle; fill: #fff; }
.yes-pill rect { fill: #22c55e; }
.no-pill rect { fill: #f43f5e; opacity: .55; }
.lead circle { fill: #fff; stroke: #1a6dff; stroke-width: 4; }

/* ---------------------------------------------------------------- right: the form */
.panel { display: flex; align-items: center; justify-content: center; padding: 48px 32px; background: #fff; }
.form-wrap { width: 100%; max-width: 400px; }
.mobile-logo { display: none; width: 180px; margin-bottom: 28px; }
.form-wrap h2 { margin: 0; font-size: 30px; letter-spacing: -.02em; font-weight: 800; }
.lead-text { margin: 8px 0 28px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }

.alert { display: flex; gap: 10px; align-items: flex-start; background: var(--red-soft); color: #9f1d1d; border: 1px solid #f7caca; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45; margin: -8px 0 20px; }
.notice { display: flex; gap: 10px; align-items: center; background: #ecfdf3; color: #146c3a; border: 1px solid #bfe9cf; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: -8px 0 20px; }
.notice svg { color: #16a34a; flex-shrink: 0; }
.alert svg { flex-shrink: 0; margin-top: 1px; color: var(--red); }

label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; }
.label-row label { margin-bottom: 8px; }
.link { color: var(--blue); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }

.field { position: relative; display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.field > svg { position: absolute; left: 14px; color: var(--ink-3); pointer-events: none; }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); padding: 14px 14px 14px 44px; border-radius: 12px; }
.field input::placeholder { color: #a9b3c4; }
.field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.field:focus-within > svg { color: var(--blue); }
.field.invalid { border-color: #f1a3a3; }
.field.invalid:focus-within { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.reveal { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 8px 14px; cursor: pointer; border-radius: 8px; margin-right: 4px; }
.reveal:hover { color: var(--ink); background: #f3f5f9; }
.reveal:focus-visible, .link:focus-visible, .submit:focus-visible, .remember input:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; }
.hint { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }

.remember { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14px; color: var(--ink-2); margin: 20px 0 26px; cursor: pointer; }
.remember input { width: 17px; height: 17px; accent-color: var(--blue); margin: 0; }

.submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 12px; padding: 15px 18px; font: inherit; font-size: 15.5px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #2a7bff, var(--blue)); box-shadow: 0 10px 22px -8px rgba(26, 109, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform .1s, box-shadow .15s, background .15s; }
.submit:hover { background: linear-gradient(180deg, #1f72ff, var(--blue-2)); }
.submit:active { transform: translateY(1px); box-shadow: 0 6px 14px -8px rgba(26, 109, 255, .7); }
.submit.busy { opacity: .85; cursor: progress; }
.submit.busy::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 26px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  body.login { grid-template-columns: 1fr; }
  .story { display: none; }
  .panel { align-items: flex-start; padding: 40px 20px; background: linear-gradient(180deg, #f3f6fc 0, #fff 260px); }
  .mobile-logo { display: block; }
}

/* ---------------------------------------------------------------- Patch 003: no cut-off on any screen
   The page used to be locked to exactly the window height (html, body { height: 100% }) while the left panel hid
   whatever didn't fit, so on short screens (laptop + projector, browser bars showing) the diagram and the caption
   were cropped. Now the page grows when needed, the diagram scales with the window height, and phones don't
   scroll sideways. */
body.login { height: auto; grid-template-columns: minmax(0, 1.15fr) minmax(min(420px, 100%), 1fr); }
.story { min-height: 100vh; }
.panel { min-width: 0; min-height: 100vh; }
.flow { max-width: max(300px, min(660px, calc((100vh - 360px) * 2.3))); }
@media (max-height: 640px) and (min-width: 961px) {
  .story { gap: 18px; padding: 28px 48px 26px; }
  .story h1 { font-size: clamp(26px, 2.6vw, 38px); margin-bottom: 10px; }
  .story-copy p { font-size: 15px; }
  .flow { max-width: max(280px, min(660px, calc((100vh - 300px) * 2.3))); }
  .panel { padding: 28px 32px; }
  .lead-text { margin-bottom: 20px; }
}
@media (max-width: 960px) {
  body.login { grid-template-columns: minmax(0, 1fr); }
  .panel { min-height: 100vh; }
  .form-wrap { max-width: 420px; }
}
@media (max-width: 400px) {
  .panel { padding: 28px 16px; }
  .form-wrap h2 { font-size: 26px; }
  .label-row { flex-wrap: wrap; gap: 4px 12px; }
}
/* Large monitors and projectors: use the space. */
@media (min-width: 1800px) and (min-height: 1000px) {
  .story { padding: 64px 88px 56px; gap: 36px; }
  .story-logo { width: 250px; }
  .story h1 { font-size: clamp(44px, 2.7vw, 60px); }
  .story-copy { max-width: 46rem; }
  .story-copy p { font-size: 19px; max-width: 36rem; }
  .story-foot { font-size: 15px; max-width: 40rem; }
  .flow { max-width: max(300px, min(900px, calc((100vh - 420px) * 2.3))); }
  .form-wrap { max-width: 480px; }
  .form-wrap h2 { font-size: 38px; }
  .lead-text { font-size: 17px; }
  label { font-size: 15px; }
  .field input { font-size: 17px; padding: 17px 16px 17px 48px; }
  .submit { font-size: 17px; padding: 17px 18px; }
  .remember, .link { font-size: 15px; }
  .secure { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .route { animation: none; }
  .lead { display: none; }
}