/* ────────────────────────────────────────────────────────────
   Lawmaker — Auth pages (Direction A: "Split dispatch")
   Bespoke, intentionally outside the Tailwind/DaisyUI build.
   Tokens match lawmakergame.com. Adapted from the design handoff.
   ──────────────────────────────────────────────────────────── */

:root {
  --ink: #17151f;
  --paper: #f5f3ee;
  --line: #e3dfd4;
  --line-2: #d6d1c4;
  --muted: #6a6577;
  --muted-2: #908b9c;
  --indigo: #4733e6;
  --indigo-deep: #2c1ca0;
  --indigo-soft: #efedfd;
  --red: #db3a2c;
  --green: #11a877;
  --amber: #efa636;
  --pink: #ff5a7e;
  --discord: #5865f2;

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --shadow: 0 1px 2px rgba(23, 21, 31, .04), 0 18px 40px -20px rgba(23, 21, 31, .22);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--indigo-deep); }

/* ── Page grid ──────────────────────────────── */
.auth-grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 640px 1fr;
}

/* ── Form column (left, paper) ──────────────── */
.form-col {
  display: flex;
  flex-direction: column;
  padding: 44px 64px 40px;
}

.form-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.brand .seal {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--indigo);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  box-shadow: 0 6px 14px -6px rgba(71, 51, 230, .7);
}

.brand .chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--indigo);
  border: 1.4px solid var(--indigo);
  border-radius: 5px;
  padding: 2px 6px;
}

.back-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.back-link:hover { color: var(--ink); }

.form-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo);
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--indigo);
  display: block;
}

h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 18px 0 0;
}

.form-sub {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  margin: 14px 0 0;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

/* ── Messages banner (login) ────────────────── */
.auth-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

.auth-message {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  padding: 12px 15px;
  border-radius: 12px;
  border: 1.5px solid var(--line-2);
  background: #fff;
  color: var(--ink);
}

.auth-message.is-success {
  border-color: var(--green);
  color: var(--green);
  background: rgba(17, 168, 119, .08);
}

.auth-message.is-error {
  border-color: var(--red);
  color: var(--red);
  background: rgba(219, 58, 44, .07);
}

.auth-message.is-info {
  border-color: var(--indigo);
  color: var(--indigo-deep);
  background: var(--indigo-soft);
}

/* ── Buttons ────────────────────────────────── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 22px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
  white-space: nowrap;
}

/* Discord: equal visual weight with the primary button */
.btn-discord {
  background: #fff;
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.btn-discord:hover { transform: translateY(-2px); color: var(--ink); }

.btn-discord svg { width: 20px; height: 20px; fill: var(--discord); }

.btn-primary {
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(71, 51, 230, .6);
  margin-top: 10px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(71, 51, 230, .7);
}

.btn-primary:disabled,
.btn-primary.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ── Divider ────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
}

.divider span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ── Fields ─────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 8px; }
.field + .field { margin-top: 6px; }

.field label,
.field .label-row label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.field .label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.field .label-row a { font-size: 13px; font-weight: 600; }

.field input {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  padding: 13px 16px;
  outline: none;
  width: 100%;
}

.field input::placeholder { color: var(--muted-2); }

.field input:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-soft);
}

/* Error + helper text under fields */
.field input.has-error,
.field input.input-error {
  border-color: var(--red);
}

.field input.has-error:focus,
.field input.input-error:focus {
  box-shadow: 0 0 0 3px rgba(219, 58, 44, .15);
}

.field-error {
  font-size: 13px;
  line-height: 1.4;
  color: var(--red);
}

.field-help {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.field-help.is-error { color: var(--red); }
.field-help.is-success { color: var(--green); }

.remember {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 4px;
  cursor: pointer;
}

.remember input { width: 17px; height: 17px; accent-color: var(--indigo); }

.form-switch {
  font-size: 14.5px;
  color: var(--muted);
  margin: 26px 0 0;
}

.form-switch a { font-weight: 700; }


/* ── Dispatch column (right, ink) ───────────── */
.dispatch-col {
  /* Pinned to the viewport height (independent of the grid row, which
     can grow taller than 100vh if the form column's content is long)
     so the feed's own overflow:hidden below has a real, fixed box to
     crop against instead of the whole column stretching to fit an
     ever-growing list. */
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(71, 51, 230, .28), transparent 60%),
    var(--ink);
  color: var(--paper);
  padding: 44px 52px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
}

.dispatch-col::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(80% 100% at 50% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 100% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}

.dispatch-col > * { position: relative; }

.dispatch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.eyebrow-light {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b3a9ff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow-light::before {
  content: "";
  width: 26px;
  height: 2px;
  background: #b3a9ff;
  display: block;
}

.sim-date {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(239, 166, 54, .18);
  border-radius: 999px;
  padding: 4px 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.sim-date i {
  font-style: normal;
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── Dispatch feed + arrival animation ──────── */
/* The feed starts empty and fills as items arrive. It grows to take
   the column's remaining height and crops overflow at the bottom,
   fading the crop edge out (same language as the grid overlay). */
.dispatch-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent 100%);
}

/* Once the list is taller than the feed's box, items must overflow
   (to be cropped by the mask above) rather than shrink to fit — flex
   items default to flex-shrink:1, which would otherwise squash every
   row/card as the list grows past the fold. */
.dispatch-feed > * {
  flex-shrink: 0;
}

.dispatch-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  color: #d8d4e4;
}

.dispatch-item .dot { color: var(--indigo); font-size: 9px; line-height: 2.2; flex: none; }
.dispatch-item .txt { line-height: 1.5; flex: 1; min-width: 0; }
.dispatch-item .txt b { color: #fff; font-weight: 600; }

.dispatch-item .tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a94ab;
  flex: none;
  line-height: 2.2;
}

.dispatch-item.fresh .tag { color: var(--amber); }
.dispatch-item.fresh .tag::before { content: "● "; }

/* Arrival: the slot expands first (pushing older items down),
   then the new item fades and slides into it. */
.dispatch-item.fresh {
  overflow: hidden;
  animation: dispatchIn .9s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes dispatchIn {
  0% {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: -10px; /* offsets the feed's 10px gap */
    transform: translateY(-8px);
  }
  50% {
    opacity: 0;
    max-height: 320px;
    padding-top: 13px;
    padding-bottom: 13px;
    margin-bottom: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    max-height: 320px;
    padding-top: 13px;
    padding-bottom: 13px;
    margin-bottom: 0;
    transform: translateY(0);
  }
}

/* Card items (voter spotlight / election results) travel through the
   same feed. They're taller than event rows, so their arrival uses a
   variant with a larger max-height. Padding stays constant — with
   border-box sizing, max-height: 0 fully collapses the slot anyway. */
.dispatch-card { overflow: hidden; }

.dispatch-card.fresh {
  animation: dispatchInCard .9s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes dispatchInCard {
  0% {
    opacity: 0;
    max-height: 0;
    margin-bottom: -10px; /* offsets the feed's 10px gap */
    transform: translateY(-8px);
  }
  50% {
    opacity: 0;
    max-height: 420px;
    margin-bottom: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    max-height: 420px;
    margin-bottom: 0;
    transform: translateY(0);
  }
}

/* ── Voter card ─────────────────────────────── */
.voter-card {
  background: #201d2c;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  padding: 24px;
}

.voter-top { display: flex; align-items: center; gap: 14px; }

.voter-ava {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #2e2a3d;
  display: grid;
  place-items: center;
  font-size: 27px;
  flex: none;
}

.voter-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  color: #fff;
  letter-spacing: -0.02em;
}

.voter-meta { font-size: 13.5px; color: #a39eb3; margin-top: 2px; }

.voter-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.voter-tags:empty { display: none; }

.vtag {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: #2e2a3d;
  color: #d7d2e2;
}

.vtag.indigo { background: rgba(71, 51, 230, .25); color: #c3baff; }
.vtag.pink { background: rgba(255, 90, 126, .2); color: #ffb3c5; }

.voter-opinion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #18151f;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 13px;
  padding: 16px 18px;
  margin-top: 16px;
}

.voter-score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.02em;
  color: var(--pink);
  line-height: 1;
}

.voter-score.is-positive { color: var(--green); }
.voter-score.is-negative { color: var(--pink); }

.voter-verdict {
  text-align: right;
  font-size: 14px;
  color: #cbc6d6;
  max-width: 230px;
  line-height: 1.45;
}

.voter-verdict b { color: #fff; }

/* ── Seat bar panel ─────────────────────────── */
.seat-panel {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 20px 24px;
}

.seat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.seat-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  letter-spacing: -0.01em;
}

.seat-sub { font-family: var(--font-mono); font-size: 11.5px; color: #a39eb3; }

.seatbar {
  display: flex;
  gap: 2px;
  height: 15px;
  border-radius: 8px;
  overflow: hidden;
  background: #2e2a3d;
}

.seatbar i { display: block; height: 100%; }

.seat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  font-size: 12.5px;
  color: #a39eb3;
  margin-top: 12px;
}

.seat-legend span { display: flex; align-items: center; gap: 7px; }
.seat-legend i { width: 9px; height: 9px; border-radius: 3px; display: block; flex: none; }

.dispatch-fine {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a94ab;
}

/* ── Responsive ─────────────────────────────── */
/* Mobile / narrow: single column. The form comes first and fills
   the first screen (zero-scroll login, keyboard-safe). */
@media (max-width: 1080px) {
  .auth-grid { grid-template-columns: 1fr; }
  .form-col { padding: 28px 24px 32px; min-height: 100svh; }
  .form-body { justify-content: flex-start; padding-top: 40px; }
  .dispatch-col { display: none; }
}

@media (max-width: 520px) {
  h1 { font-size: 34px; }
  .back-link { display: none; }
}