/* Echo sign-in, the sign-in messages and the staff chooser's base (app/google_login.py; the chooser adds
   web/welcome.css). Vinesight brand: Hanken Grotesk, sand, coral and blue (the design Michael approved on 7 Nov 2026). Light only, like the mockup. */
:root {
  color-scheme: light;
  --si-ink: #000000;
  --si-sand: #F2EFE9;
  --si-line: #E4DFD5;
  --si-coral: #FF808B;
  --si-blue: #5C6BFA;
  --si-white: #FFFFFF;
  --si-error: #B3261E;
}

* { box-sizing: border-box; }
body.si {
  margin: 0; min-height: 100vh; background: var(--si-white); color: var(--si-ink);
  font-family: "Hanken Grotesk", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.5;
}
.si a { color: var(--si-ink); }
.si a:hover { color: var(--si-blue); }
.si h1, .si h2, .si p { margin: 0; }

/* The lockup: Vinesight logo | ECHO */
.si-lockup { display: flex; align-items: center; gap: 16px; }
.si-lockup img { height: 18px; width: auto; display: block; }
.si-lockup .si-rule { width: 1px; height: 18px; background: var(--si-ink); opacity: .25; }
.si-lockup .si-product { font-size: 13px; font-weight: 500; letter-spacing: .28em; }

/* Sign-in: brand panel on the left, the form on the right; stacked on a phone. */
.si-split { min-height: 100vh; display: flex; flex-wrap: wrap; }
.si-brand {
  flex: 1 1 520px; min-width: 0; background: var(--si-sand); display: flex; flex-direction: column;
  justify-content: space-between; gap: 40px; padding: 48px 56px; overflow: hidden;
}
.si-brand .si-art { width: 100%; max-width: 448px; height: auto; align-self: center; display: block; }
/* The coral point breathes: a soft glow, a slight pulse, and thin echo rings going out. */
@keyframes si-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes si-glow { 0%, 100% { opacity: .25; } 50% { opacity: .6; } }
@keyframes si-echo { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(4.6); opacity: 0; } }
.si-art .si-pulse, .si-art .si-glow, .si-art .si-echo { transform-box: fill-box; transform-origin: center; }
.si-art .si-pulse { animation: si-pulse 2.8s ease-in-out infinite; }
.si-art .si-glow { opacity: .25; animation: si-glow 2.8s ease-in-out infinite; }
.si-art .si-echo { opacity: 0; animation: si-echo 3.5s cubic-bezier(.2, .6, .3, 1) infinite; }
.si-art .si-echo2 { animation-delay: 1.75s; }
@media (prefers-reduced-motion: reduce) {
  .si-art .si-pulse, .si-art .si-glow, .si-art .si-echo { animation: none; }
}
.si-brand h2 { font-size: 40px; line-height: 1.15; font-weight: 300; letter-spacing: .06em; }
.si-brand h2 .si-boxed { display: inline-block; border: 1.5px solid var(--si-coral); padding: 0 10px; line-height: 1.2; }
.si-brand p { margin-top: 18px; font-size: 16px; line-height: 1.55; max-width: 520px; }

.si-main { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; padding: 48px 24px 32px; }
.si-center { flex: 1; display: flex; align-items: center; justify-content: center; }
.si-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 22px; }
.si-form h1 { font-size: 32px; font-weight: 700; letter-spacing: -.01em; }
.si-form .si-lead { margin-top: 8px; font-size: 15px; }
.si-field { display: flex; flex-direction: column; gap: 8px; }
.si-field label { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.si-field input {
  font: inherit; font-size: 16px; color: var(--si-ink); background: var(--si-white); width: 100%;
  border: 1.5px solid #8A857C; border-radius: 10px; padding: 13px 14px;
}
.si-field input:focus { outline: 3px solid rgba(92, 107, 250, .18); border-color: var(--si-blue); }
.si-field input[aria-invalid="true"] { border-color: var(--si-error); }
.si-error { color: var(--si-error); font-size: 14px; }
.si-hint { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(67, 17, 22, .65); }

.si-btn {
  display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 50px; width: 100%;
  border-radius: 999px; font: inherit; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer;
  background: var(--si-coral); color: var(--si-ink); border: 1px solid var(--si-coral);
}
.si-btn:hover { color: var(--si-ink); filter: brightness(.96); }
.si-btn:focus-visible { outline: 3px solid var(--si-blue); outline-offset: 2px; }
.si-btn.si-outline { background: var(--si-white); border-color: var(--si-ink); min-height: 48px; font-size: 15px; }
.si-btn svg { flex: none; }
.si-btn .si-google { display: none; }
.si-btn.is-google .si-google { display: block; }
.si-btn.is-google .si-arrow { display: none; }

.si-note { padding: 14px 16px; background: var(--si-sand); border-radius: 10px; font-size: 13px; line-height: 1.5; }
.si-foot { margin-top: 24px; display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; justify-content: center;
           font-size: 12px; letter-spacing: .04em; }
.si .si-foot a { text-decoration: none; }
.si .si-foot a:hover { text-decoration: underline; }
.si-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .35; flex: none; }

/* Messages (refused, expired, ask for access): one card on sand. */
body.si.si-sand { background: var(--si-sand); }
.si-card-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 48px 24px; gap: 48px; }
.si-card { width: 100%; max-width: 440px; background: var(--si-white); border-radius: 16px; padding: 32px; display: flex;
           flex-direction: column; gap: 14px; }
.si-card h1 { font-size: 24px; font-weight: 700; }
.si-card .si-btn { margin-top: 8px; }
.si-card .si-inline { display: contents; }  /* a Sign out form (POST /auth/logout) laid out like the links */

@media (max-width: 640px) {
  .si-brand { padding: 32px 24px; gap: 24px; }
  .si-brand .si-art { display: none; }
  .si-brand h2 { font-size: 30px; }
}

/* Customer set-up and Echo-password sign-in (app/customer_login.py): the card pages, with the form inside */
.si-form-card { max-width: none; }
/* The set-up page fits a laptop screen without scrolling (CFO, 12 Nov): two columns, tighter spacing. */
.si-card-page.si-compact { padding: 28px 20px 20px; gap: 22px; }
.si-card.si-setup { max-width: 780px; padding: 28px 32px; }
.si-setup form { display: flex; flex-direction: column; gap: 18px; }
.si-setup h1 + p, .si-setup .si-lead { margin-top: 4px; }
.si-setup-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.si-setup-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.si-step { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 700; }
.si-step span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--si-coral);
  font-size: 13px; font-weight: 700; flex: none; }
.si-setup .si-field { gap: 6px; }
.si-setup .si-field input { padding: 10px 12px; }
.si-setup .si-hint { margin: 0; }
.si-qr-row { display: flex; gap: 14px; align-items: flex-start; }
.si-qr { flex: none; padding: 0; background: var(--si-white); border: 1px solid var(--si-line); border-radius: 10px; line-height: 0; }
.si-qr svg { width: 144px; height: 144px; display: block; }
.si-key { display: block; margin-top: 8px; font-family: "DM Mono", ui-monospace, monospace; font-size: 12.5px; letter-spacing: .04em;
  word-break: break-all; color: var(--si-ink); background: var(--si-sand); padding: 4px 6px; border-radius: 6px; }
.si-setup .si-btn { margin-top: 0; }
.si-small { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(0, 0, 0, .6); text-align: center; }
.si-compact .si-foot { margin-top: 0; }
@media (max-width: 720px) {
  .si-setup-cols { grid-template-columns: 1fr; gap: 20px; }
  .si-card.si-setup { padding: 24px 20px; }
}
.si-foot-card { justify-content: center; }

.si-change { align-self: center; font-size: 14px; margin-top: 4px; }

.si-inline-form { margin: 0; display: contents; }
.si-inline-form .si-btn { width: 100%; }

/* The one sign-in card (13 Nov, CFO: "one place to login"; app/google_login.py login_page, web/sign-in.js): the work
   email, then on the same card the two ways in as large radio cards (an Echo account or the dashboard account), and
   for the Echo account its password and code. */
.si [hidden] { display: none !important; }
.si-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }
.si-form.si-panel { max-width: 420px; padding: 36px 32px; gap: 20px; background: var(--si-white); border: 1px solid var(--si-line);
  border-radius: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(67, 17, 22, .06); }
.si-panel .si-field input:focus-visible { outline: 3px solid rgba(92, 107, 250, .25); outline-offset: 0; border-color: var(--si-blue); }
.si-ways, .si-pw { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; }
.si-ways { gap: 10px; }
.si-pw { gap: 18px; }
.si-ways legend { padding: 0; margin: 0 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.si-way { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer;
  border: 1.5px solid var(--si-line); border-radius: 14px; background: var(--si-white); }
/* The real radio covers its card: clicks, the keyboard (Tab into the group, arrow keys between) and screen readers. */
.si-way input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.si-way:hover { border-color: #8A857C; }
.si-way:has(input:checked) { border-color: var(--si-ink); box-shadow: inset 0 0 0 1px var(--si-ink); }
.si-way:has(input:focus-visible) { outline: 3px solid var(--si-blue); outline-offset: 2px; }
.si-way-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--si-sand); color: var(--si-ink); }
.si-way-echo .si-way-ico { color: #c2414f; background: rgba(255, 128, 139, .18); }
.si-way-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.si-way-text strong { font-size: 15.5px; font-weight: 700; }
.si-way-text span { font-size: 13px; line-height: 1.4; color: rgba(0, 0, 0, .65); }
.si-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #8A857C; display: grid;
  place-items: center; background: var(--si-white); }
.si-way input:checked ~ .si-radio { border-color: var(--si-ink); }
.si-way input:checked ~ .si-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--si-coral); }
.si-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.si-label-row a { font-size: 13px; text-underline-offset: 3px; }
.si-label-row a:focus-visible, .si-foot a:focus-visible { outline: 3px solid var(--si-blue); outline-offset: 2px; border-radius: 4px; }
.si-panel .si-error:not([hidden]) { padding: 10px 12px; border-radius: 10px; background: #FCEDEC; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes si-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .si-reveal:not([hidden]) { animation: si-reveal .18s ease-out; }
}
@media (max-width: 640px) {
  .si-main { padding: 24px 16px; }
  .si-form.si-panel { padding: 24px 18px; border-radius: 16px; }
  .si-form h1 { font-size: 28px; }
  .si-way { padding: 12px 14px; gap: 12px; }
  .si-way-ico { width: 36px; height: 36px; }
}