/**
 * The shared look of the pages you land on before the app.
 *
 * Sign-in and the invitation page are the same card on the same background,
 * so the CSS lives in one file rather than being copied into each — a copy is
 * how two pages that should look identical stop looking identical.
 *
 * Extracted verbatim from signin.html's <style> block; nothing here changed
 * on the way out.
 */
  /* The DigitPeak violet, one literal (styles.css: --brand-solid); dark mode reads it mixed with white,
     as the app does, with dark ink on the button (owner, 7 Oct 2026). */
  :root {
    --brand-solid: #5b33f5;
    --brand: var(--brand-solid);
    --brand-ink: #FFFFFF;
    --ink: #14161D;
    --muted: #5F6577;
    --line: #E3E6EF;
    --bg: #FFFFFF;
    --panel: #FFFFFF;
    --field: #FFFFFF;
    --bad: #B32D2D;
    --bad-bg: #FBEDED;
    --ok: #0B7A4B;
    --ok-bg: #E8F6EF;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    /* Plus Jakarta Sans, the app's one typeface (owner, 11 Oct 2026, after Zalando Sans), headings included; the system face behind it. */
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    word-spacing: 0.04em; /* Jakarta's word space is narrow; see styles.css. */
    font-size: 15px;
    line-height: 1.6;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    -webkit-font-smoothing: antialiased;
  }
  /* The browser's bold is 700 or 900; 620 is the app's bold, Jakarta's match for Manrope's 700 (styles.css). */
  b, strong, th, h1, h2, h3, h4, h5, h6 { font-weight: 620; }
  .card { width: 100%; max-width: 390px; }
  .brand {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 30px; text-decoration: none; color: var(--ink);
  }
  /* The DigitPeak logo (owner, 7 Oct 2026): violet on the light page, white on the dark one. */
  .brand img { height: 26px; width: auto; display: block; }
  .brand .logo-dark { display: none; }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .brand .logo-light { display: none; }
    html:not([data-theme="light"]) .brand .logo-dark { display: block; }
  }
  html[data-theme="dark"] .brand .logo-light { display: none; }
  html[data-theme="dark"] .brand .logo-dark { display: block; }
  h1 {
    font-weight: 620;
    font-size: 26px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 7px;
  }
  .sub { margin: 0 0 26px; color: var(--muted); font-size: 14px; }
  .google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 12px 16px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--field); color: var(--ink);
    font-family: inherit; font-size: 14.5px; font-weight: 500;
    text-decoration: none; cursor: pointer;
  }
  .google:hover { border-color: #C6CBDA; background: #FAFBFF; }
  .google:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .or {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0; color: var(--muted); font-size: 12.5px;
  }
  .or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
  label {
    display: block; font-size: 12.5px; font-weight: 500;
    margin-bottom: 5px; color: var(--muted);
  }
  input {
    width: 100%; padding: 11px 13px; margin-bottom: 15px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--field); color: var(--ink);
    font-family: inherit; font-size: 15px;
  }
  input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
  .btn {
    width: 100%; padding: 12px 16px; border: 0; border-radius: 9px;
    background: var(--brand); color: var(--brand-ink);
    font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  }
  .btn:hover { background: #163BD0; }
  .btn:disabled { opacity: .6; cursor: default; }
  .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .msg { font-size: 13.5px; border-radius: 8px; padding: 0; margin: 0 0 14px; }
  .msg:not(:empty) { padding: 10px 13px; }
  .msg.bad { background: var(--bad-bg); color: var(--bad); }
  .msg.good { background: var(--ok-bg); color: var(--ok); }
  .swap {
    display: block; width: 100%; margin-top: 18px; padding: 0;
    background: none; border: 0; color: var(--brand);
    font-family: inherit; font-size: 13.5px; cursor: pointer; text-align: center;
  }
  .swap:hover { text-decoration: underline; }
  .foot { margin-top: 26px; font-size: 12.5px; color: var(--muted); text-align: center; }
  .legal {
    text-align: center; font-size: 12.5px; line-height: 1.55;
    color: var(--muted); margin: 18px auto 0; max-width: 34ch;
  }
  .foot a { color: var(--muted); }
  /* The Terms and Privacy links were the browser's own #0000ee: in the brand violet now (DigitPeak, 7 Oct 2026). */
  .legal a { color: var(--brand); }
  .hint { font-size: 12.5px; color: var(--muted); margin: -8px 0 15px; }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
      --bg: #0C0E14; --panel: #141824; --field: #141824;
      --ink: #E9EBF2; --muted: #939AAE; --line: #262B38;
      --brand: color-mix(in srgb, var(--brand-solid) 60%, white); --brand-ink: #0C0E14;
      --bad: #FF8A8A; --bad-bg: #2C1618; --ok: #48D394; --ok-bg: #12261D;
    }
  }
  html[data-theme="dark"] {
    --bg: #0C0E14; --panel: #141824; --field: #141824;
    --ink: #E9EBF2; --muted: #939AAE; --line: #262B38;
    --brand: color-mix(in srgb, var(--brand-solid) 60%, white); --brand-ink: #0C0E14;
    --bad: #FF8A8A; --bad-bg: #2C1618; --ok: #48D394; --ok-bg: #12261D;
  }