/* ===========================================================================
   Sign-in, password change, and the report intake screen.

   The split layout follows the kit's auth pages: a calm form on the left, the
   product's own evidence on the right. The right panel is NOT decoration - it
   shows a real payment grid, because what this product does is hard to explain
   and easy to show.
   =========================================================================== */

.auth{min-height:100%;display:grid;grid-template-columns:1fr 1fr;background:var(--page)}

/* -- form side ----------------------------------------------------------- */
.auth-form{display:flex;flex-direction:column;justify-content:center;
  padding:48px 56px;background:var(--card);min-width:0}
.auth-inner{width:100%;max-width:400px;margin:0 auto}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:40px}
/* Same three-part wordmark as the rail: Credit / Read / AI. */
.auth-brand b{font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--g900);
  white-space:nowrap}
.auth-brand b i{font-style:normal;color:var(--brand-600)}
.auth-brand b u{text-decoration:none;color:var(--s2);margin-left:.3em}
.auth-form h1{font-size:27px;font-weight:700;letter-spacing:-.025em;margin-bottom:8px}
.auth-form .lede{color:var(--g500);font-size:14px;margin:0 0 30px;line-height:1.55}

.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--g700);margin-bottom:7px}
.field input{width:100%;border:1px solid var(--g300);border-radius:var(--r-pill);
  padding:13px 20px;font-size:14px;font-family:inherit;color:var(--g900);
  background:var(--card);box-shadow:var(--sh-xs);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.field input::placeholder{color:var(--g400)}
.field input:focus{outline:0;border-color:var(--brand-600);
  box-shadow:0 0 0 3px rgba(21,112,239,.14)}
.field input[aria-invalid="true"]{border-color:var(--er)}
.field .hint{margin:7px 4px 0;font-size:11.5px;color:var(--g500)}
.field-row{display:flex;gap:12px}
.field-row .field{flex:1;min-width:0}

.auth-submit{width:100%;background:var(--brand-700);color:#fff;border:0;
  border-radius:var(--r-pill);padding:14px;font-size:14.5px;font-weight:600;
  cursor:pointer;margin-top:6px;transition:background .15s var(--ease)}
.auth-submit:hover:not([disabled]){background:var(--brand-600)}
.auth-submit[disabled]{opacity:.6;cursor:not-allowed}

.auth-msg{display:flex;gap:10px;border-radius:var(--r);padding:12px 15px;
  font-size:13px;margin-bottom:20px;line-height:1.5}
.auth-msg i{flex:0 0 16px;width:16px;height:16px;border-radius:50%;margin-top:2px;
  display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;font-style:normal}
.auth-msg.err{background:var(--er-bg);border:1px solid var(--er-bd);color:var(--er-tx)}
.auth-msg.err i{background:var(--er)}
.auth-msg.ok{background:var(--ok-bg);border:1px solid var(--ok-bd);color:var(--ok-tx)}
.auth-msg.ok i{background:var(--ok)}
.auth-msg.info{background:var(--brand-100);border:1px solid var(--brand-200);
  color:var(--brand-800)}
.auth-msg.info i{background:var(--brand-600)}

.auth-foot{margin-top:26px;font-size:12px;color:var(--g500);line-height:1.6}
.auth-foot b{color:var(--g700);font-weight:600}

/* -- evidence side ------------------------------------------------------- */
.auth-side{padding:48px;display:flex;flex-direction:column;justify-content:center;
  min-width:0;overflow:hidden;
  background:radial-gradient(760px 320px at 18% 8%,rgba(24,188,235,.16),transparent 62%),
    radial-gradient(660px 340px at 88% 92%,rgba(13,85,199,.16),transparent 60%),var(--page)}
.auth-side .eyebrow{font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brand-600);margin-bottom:12px}
.auth-side h2{font-size:29px;font-weight:700;letter-spacing:-.03em;line-height:1.2;
  margin-bottom:12px;max-width:16ch}
.auth-side p{color:var(--g600);font-size:14px;line-height:1.6;max-width:44ch;margin:0 0 26px}
.auth-proof{background:var(--card);border:1px solid var(--g200);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);padding:20px;max-width:500px}
.auth-proof h3{font-size:14px;font-weight:700;margin-bottom:3px}
.auth-proof h3.tight{margin:0 0 12px}
.auth-proof .cap{font-size:11.5px;color:var(--g500);margin:14px 0 0}

/* The heading, divider, legend and caption belong to the grid, so they arrive
   with it. Left un-timed they sat above an empty space for two seconds,
   announcing a record that was not there yet. */
.auth-proof-rule,.auth-proof h3.tight,.auth-legend,.auth-proof .cap{opacity:0}
/* Every entrance on this panel waits for .seen, which login.js adds when the
   panel scrolls into view. On a wide screen that is immediate; on a phone the
   panel is below the form, and a load-triggered animation would have finished
   before the visitor ever scrolled to it. */
.auth-proof.seen .auth-proof-rule,.auth-proof.seen h3.tight,
.auth-proof.seen .auth-legend,.auth-proof.seen .cap{
  animation:cell-in .5s ease-out var(--at,0ms) forwards}
.auth-proof-rule{--at:calc(var(--lead,0ms) - 250ms)}
.auth-proof h3.tight{--at:calc(var(--lead,0ms) - 120ms)}
.auth-legend{--at:calc(var(--lead,0ms) + 1000ms)}
.auth-proof .cap{--at:calc(var(--lead,0ms) + 1150ms)}
@media (prefers-reduced-motion:reduce){
  .auth-proof-rule,.auth-proof h3.tight,.auth-legend,.auth-proof .cap{
    animation:none;opacity:1}
}
/* No no-script fallback is needed here: this panel is built by the same script
   that builds the form, so if script has not run there is no panel to reveal.
   A browser with no IntersectionObserver is the real gap, and revealOnSight
   handles that by revealing at once. */

/* Figure first, then the chart - the reference kit leads every chart card with
   the number it is about, and it is the number a visitor reads before they
   decide whether the shape under it is worth looking at. */
.auth-proof-hd{margin-bottom:6px}
.auth-proof-hd .fig{display:inline-block;font-size:27px;font-weight:800;
  letter-spacing:-.03em;color:var(--g900);margin:2px 10px 0 0;line-height:1.1}
.auth-proof-hd .delta{display:inline-flex;align-items:baseline;gap:5px;
  font-size:12px;font-weight:700;vertical-align:2px}
.auth-proof-hd .delta.up{color:var(--er-tx)}
.auth-proof-hd .delta.down{color:var(--ok-tx)}
.auth-proof-hd .delta i{font-style:normal;font-weight:500;color:var(--g500)}
.auth-proof-rule{height:1px;background:var(--g200);margin:18px 0 16px}

/* Clipped, so the read-head cannot paint outside the card on its way in and
   out. The padding/margin pair buys 8px of bleed for the cells, which start
   6px above their seat - without it the clip would shave the top row's drop.
   Layout is unchanged: the margin gives back exactly what the padding takes. */
.auth-rows{display:flex;flex-direction:column;gap:11px;position:relative;
  overflow:hidden;padding:8px 0;margin:-8px 0}
.auth-rows .r{display:flex;align-items:center;gap:12px}
/* Every delay below is measured from --lead, which the markup sets from the
   one constant in login.js. Repeating the number here is how the chart and the
   grid would quietly drift out of sequence the first time either is retimed. */
.auth-rows .nm{font-size:11.5px;color:var(--g600);width:104px;flex:0 0 104px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0}
.auth-proof.seen .auth-rows .nm{
  animation:cell-in .4s ease-out calc(var(--lead,0ms) + var(--nd,0ms)) forwards}
.auth-rows .r:nth-child(1) .nm{--nd:0ms}
.auth-rows .r:nth-child(2) .nm{--nd:60ms}
.auth-rows .r:nth-child(3) .nm{--nd:120ms}
.auth-rows .r:nth-child(4) .nm{--nd:180ms}
.auth-rows .r:nth-child(5) .nm{--nd:240ms}
.auth-rows .cells{display:flex;gap:2px;padding:0;flex-wrap:nowrap;overflow:hidden}

/* Each month drops into place in turn. --d is set per cell in the markup and
   is ordered by COLUMN, so the grid fills left to right across all five
   products at once - the way a bureau file is actually written, a month at a
   time. The cell starts slightly above its seat and a little narrow, so it
   reads as landing rather than merely fading up. */
.auth-rows .cell{width:8px;height:15px;border-radius:2px;flex:0 0 8px;
  opacity:0;transform:translateY(-6px) scaleY(.3);transform-origin:center}
.auth-proof.seen .auth-rows .cell{
  animation:cell-drop .42s cubic-bezier(.22,1.2,.5,1)
    calc(var(--lead,0ms) + var(--d,0ms)) forwards}
@keyframes cell-drop{
  60%{opacity:1;transform:translateY(0) scaleY(1.12)}
  to{opacity:1;transform:none}}
@keyframes cell-in{to{opacity:1}}

/* A read-head sweeps the months every few seconds after the grid has landed.
   It is the one thing on this panel that says what the product DOES - it reads
   every month of every account - and it is slow and faint enough to notice
   without asking to be watched. It starts past the row labels, so only the
   record is scanned. */
/* opacity:0 in the BASE rule, not only in the first keyframe. An animation
   with a delay leaves the element at its base style until the delay elapses,
   so without this the band sat there fully opaque - parked off to the left,
   outside the card, over an area with no grid in it yet - for the first three
   and a half seconds of every visit. A keyframe cannot cover the wait before
   its own animation starts. */
.auth-rows::after{content:'';position:absolute;top:-4px;bottom:-4px;
  left:var(--scan-from,116px);
  width:26%;pointer-events:none;border-radius:6px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(21,112,239,.16) 45%,
    rgba(24,188,235,.2) 55%,transparent);
  transform:translateX(-130%)}
.auth-proof.seen .auth-rows::after{
  animation:grid-scan 7s cubic-bezier(.5,0,.5,1)
    calc(var(--lead,0ms) + 1500ms) infinite}
@keyframes grid-scan{
  0%{transform:translateX(-130%);opacity:0}
  8%{opacity:1}
  46%{opacity:1}
  56%{transform:translateX(420%);opacity:0}
  100%{transform:translateX(420%);opacity:0}}

.auth-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--g200)}

/* A visitor who has asked for less motion gets the same panel, complete and
   still - nothing is hidden from them, it simply does not move. */
@media (prefers-reduced-motion:reduce){
  .auth-rows .cell,.auth-rows .nm{animation:none;opacity:1;transform:none}
  .auth-rows::after{animation:none;display:none}
}

/* -- intake -------------------------------------------------------------- */
.drop{border:2px dashed var(--g300);border-radius:var(--r-lg);padding:38px 24px;
  text-align:center;background:var(--g50);cursor:pointer;
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.drop:hover,.drop.over{border-color:var(--brand-600);background:var(--brand-50)}
.drop .ic{width:52px;height:52px;border-radius:15px;background:var(--brand-100);
  display:grid;place-items:center;margin:0 auto 14px}
.drop .ic svg{stroke:var(--brand-600);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.drop b{display:block;font-size:15px;font-weight:700;color:var(--g900);margin-bottom:4px}
.drop span{display:block;font-size:12.5px;color:var(--g500)}
.drop input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.bar{height:8px;border-radius:var(--r-pill);background:var(--g100);overflow:hidden;
  margin-top:16px}
.bar>div{height:100%;background:var(--brand-600);border-radius:var(--r-pill);
  transition:width .18s var(--ease)}

.plist{display:flex;flex-direction:column;margin:0 -24px -22px}
.prow{display:flex;align-items:center;gap:14px;padding:14px 24px;
  border-top:1px solid var(--g100);text-align:left;background:none;border-left:0;
  border-right:0;border-bottom:0;width:100%;cursor:pointer;font-family:inherit}
.prow:hover{background:var(--g50)}
.prow .score{width:46px;height:46px;border-radius:13px;flex:0 0 46px;display:grid;
  place-items:center;font-size:15px;font-weight:700;background:var(--brand-100);
  color:var(--brand-700)}
.prow .who{flex:1;min-width:0}
.prow .who b{display:block;font-size:13.5px;font-weight:600;color:var(--g900)}
.prow .who span{display:block;font-size:12px;color:var(--g500);margin-top:1px}
.prow .go{color:var(--g400);flex:0 0 auto;font-size:12.5px}

/* The panel's own brand row is for the stacked layout only. Beside the form it
   would be the mark twice on one screen. */
.side-brand{display:none}

@media (max-width:1000px){
  /* Stacked, story FIRST and the form under it.
     The panel used to be hidden here entirely, which left a phone with a bare
     form and no answer to "what is this?" - the one question it exists to
     answer. On a phone this page is mostly a first visit, so it opens with
     what the product does and the form follows; the mark moves into the panel
     so the page still starts with the logo rather than an eyebrow. */
  .auth{grid-template-columns:1fr}
  .auth-side{display:flex;order:-1;padding:30px 22px 38px}
  .auth-side h2{font-size:25px}
  .auth-side p{max-width:none}
  .side-brand{display:flex;margin-bottom:26px}
  /* The form's own mark would now be the second one down the page. */
  .auth-form .auth-brand{display:none}
  .auth-form{padding:34px 22px 48px;justify-content:flex-start}
  .auth-proof{max-width:none;width:100%}

  /* A screen the reader was SENT to keeps the form first and its own mark. */
  .auth-task .auth-side{order:0}
  .auth-task .side-brand{display:none}
  .auth-task .auth-form .auth-brand{display:flex}
  .auth-task .auth-form{padding-top:52px}
}

@media (max-width:520px){
  .auth-form{padding:32px 18px}
  .auth-form h1{font-size:23px}
  .field-row{flex-direction:column;gap:0}
  .auth-side{padding:28px 18px 38px}
  .auth-side h2{font-size:22px}
  .auth-proof{padding:16px 14px}
  .auth-proof-hd .fig{font-size:23px}

  /* 24 months at 8px plus a 104px label does not fit a phone. The label is cut
     to what still reads, the cells to what still shows a colour, and the row
     gap comes in with them so the grid keeps its proportions rather than
     turning into five stripes with canyons between. */
  .auth-rows{gap:8px}
  .auth-rows .r{gap:8px}
  .auth-rows .nm{width:74px;flex:0 0 74px;font-size:10.5px}
  .auth-rows .cell{width:6px;flex:0 0 6px;height:13px}
  .auth-rows::after{--scan-from:82px}
  .auth-legend{gap:10px;font-size:11px}
}