/* ═══════════════════════════════════════════════════════════════
   Tomasetti portal-gate login — shared light, borderless language (2026-09-07)

   Mirrors the office manager / Pat's Desk tokens and grammar: soft canvas
   background, a borderless white card with a soft layered shadow, filled
   canvas controls instead of outlined boxes, and purple spent only where it
   means something (the brand mark, the primary action). Neutral on purpose —
   this gate fronts every property on both hosts (.com and .online), so it
   carries no per-property branding; it just reads coherently everywhere.

   Auth contract is untouched: the same POST /login form, fields, and
   redirects. Only presentation changed.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --ink: #241b38;
  --muted: #6f6487;
  --faint: #9a90b4;
  --line: #e6e0f0;
  --surface: #ffffff;
  --canvas: #f4f0fa;
  --brand: #6845d8;
  --brand-dark: #4f31b6;
  --brand-soft: #efe8ff;
  --danger: #b42318;
  --danger-soft: #fdecec;
  --shadow: 0 1px 2px rgba(35, 18, 66, 0.05), 0 12px 32px rgba(35, 18, 66, 0.07);
  --radius: 14px;
  --font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  color: var(--ink);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse 70% 55% at 12% -10%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 0%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 50%),
    var(--canvas);
}

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--brand) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 4%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  animation: drift 28s linear infinite;
}

@keyframes drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 48px 24px, -24px 48px; }
}

.card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 2.25rem 1.75rem 1.6rem;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: rise 0.5s ease both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand);
}

h1 {
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.3rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}

.lede {
  margin: 0.55rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.error {
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 0;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 700;
}

form {
  display: grid;
  gap: 0.95rem;
  margin-top: 1.4rem;
}

label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted);
}

input {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.95rem;
  font: inherit;
  font-size: 1.02rem;
  border: 0;
  border-radius: 9px;
  background: var(--canvas);
  color: var(--ink);
  transition: box-shadow 0.15s ease, background 0.15s ease;
}

input:focus {
  outline: none;
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}

button {
  margin-top: 0.25rem;
  min-height: 3.1rem;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  cursor: pointer;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 30%, transparent);
  transition: background 0.15s ease, transform 0.12s ease;
}

button:hover { background: var(--brand-dark); transform: translateY(-1px); }
button:active { transform: translateY(0); }

.hint {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Mobile-first: no iOS/Android default chrome ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  -webkit-tap-highlight-color: transparent;
}
input, button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px;
  touch-action: manipulation;
}
input {
  font-size: 1rem;
}

/* iOS/Chrome autofill: keep the themed fill instead of default yellow */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--canvas) inset;
  box-shadow: 0 0 0 1000px var(--canvas) inset;
  transition: background-color 9999s ease-out;
  caret-color: var(--ink);
}

/* Tactile press feedback */
button:active {
  transform: translateY(1px) scale(0.98);
}

/* Focus visible (keep accessible) */
:where(input, button):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent);
  outline-offset: 2px;
}

/* ── Small screens (phones) ── */
@media (max-width: 480px) {
  body {
    padding: max(1.25rem, env(safe-area-inset-top))
             max(1rem, env(safe-area-inset-right))
             max(1.5rem, env(safe-area-inset-bottom))
             max(1rem, env(safe-area-inset-left));
    place-items: start center;
  }
  .card {
    width: min(100%, 400px);
    margin-top: 2vh;
    padding: 1.7rem 1.4rem 1.4rem;
    border-radius: 16px;
  }
  h1 {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
  }
  label {
    font-size: 0.86rem;
  }
  input {
    min-height: 3.1rem;
    font-size: 1.05rem;
  }
  button {
    min-height: 3.3rem;
    font-size: 1.1rem;
  }
  .eyebrow {
    font-size: 0.68rem;
  }
  .sky {
    animation: none;
  }
}

@media (max-width: 360px) {
  body { padding-inline: 0.75rem; }
  .card { padding: 1.5rem 1.1rem 1.25rem; }
  .lede { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sky, .card, button { animation: none; transition: none; }
  button:hover, button:active { transform: none; }
}

/* ── the powered footer ────────────────────────────────────────────────
   Inlined from assets/tomasetti-powered.css on 2026-09-27. The login page
   used to <link> that file from https://tomasetti.online, which from inside
   the house is a PRIVATE address: Chrome treats a public page fetching a
   local one as a blocked request behind a permission prompt, so every gated
   host popped "wants to access other devices on your local network" at the
   login screen. Serving these 52 lines from the gate's own origin ends it,
   and it cannot break when the apex is unreachable. Keep in step with
   assets/tomasetti-powered.css if the footer is ever restyled. */
/* Pride bar (rainbow top strip) */
.t-pride {
  width: 100%;
  height: 6px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    #e40303 0%, #ff8c00 14%, #ffed00 28%,
    #008026 42%, #004dff 57%, #750787 72%,
    #d896ff 86%, #ff69b4 100%
  );
}

.tomasetti-powered {
  position: relative;
  z-index: 20;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(192, 132, 252, 0.22);
  background:
    linear-gradient(100deg, rgba(91, 33, 182, 0.18), transparent 42%, rgba(168, 85, 247, 0.14)),
    rgba(9, 12, 24, 0.9);
  color: rgba(255, 255, 255, 0.72);
  font-family: "Bricolage Grotesque", "Inter", "Nunito", sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.075em;
  text-align: center;
}

.tomasetti-powered a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.tomasetti-powered a:hover,
.tomasetti-powered a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: #c084fc;
}

@media (prefers-reduced-motion: reduce) {
  .tomasetti-powered a {
    transition: none;
  }
}