/* app.css — sign-in, paste-a-URL, queue, results.
 *
 * Tokens, type, forms, buttons and chrome all come from base.css. This file
 * holds only what these screens genuinely add: the agent list, the queue table,
 * the KPI row and the sign-in card.
 */

/* ── Sign in ──────────────────────────────────────────────────────────────── */
.signin {
  width: min(23rem, 100%);
  background: var(--surface); border: 1px solid var(--rule-soft);
  border-top: 1px solid var(--accent);
  border-radius: 3px; padding: 2.25rem 2rem;
}
.signin h1 { font-size: 1.6rem; }
.signin .lede { font-size: .95rem; margin-bottom: 2rem; }
.signin form button { width: 100%; margin-top: .6rem; }
.signin label { margin-top: 1.1rem; }
.signin label:first-of-type { margin-top: 0; }
.foot { color: var(--faint); font-size: .78rem; margin: 2rem 0 0; line-height: 1.6; }

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.bar nav { display: flex; gap: 1.4rem; }
.bar nav a {
  text-decoration: none; color: var(--soft); font-size: .86rem;
  padding: .25rem 0; border-bottom: 1px solid transparent;
}
.bar nav a:hover { color: var(--ink); }
.bar nav a.on { color: var(--accent-text); border-bottom-color: var(--accent); }

/* ── The agents working ───────────────────────────────────────────────────── */
/* Showing the specialists land one by one is the point — a rep pasting a URL
   should see the machine working, not a spinner that could mean anything. */
.agents { list-style: none; margin: 0; padding: 0; }
.agents li {
  display: grid; grid-template-columns: 1.3rem 1fr auto; gap: .8rem;
  align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--rule-soft);
  font-size: .92rem; color: var(--mid);
}
.agents li:last-child { border-bottom: 0; }
.agents .dot { color: var(--faint); font-size: .8rem; }
.agents li.running { color: var(--ink); }
.agents li.running .dot { color: var(--accent-text); }
.agents li.done .dot { color: var(--proven); }
.agents li.cached .dot { color: var(--accent-text); }
.agents li.failed .dot, .agents li.skipped .dot { color: var(--failed); }
.agents li.failed, .agents li.skipped { color: var(--soft); }
.agents .t {
  color: var(--faint); font: 500 .72rem var(--data);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.agents li.cached .t { color: var(--accent-text); }

/* ── Progress ─────────────────────────────────────────────────────────────── */
.bar-outer { height: 2px; background: var(--rule); overflow: hidden; margin: 1.75rem 0 0; }
.bar-inner { height: 100%; width: 0; background: var(--accent); transition: width .5s ease; }

/* ── Queue ────────────────────────────────────────────────────────────────── */
table.queue { width: 100%; border-collapse: collapse; margin-top: 1.75rem; }
.queue th {
  text-align: left; font: 500 .64rem/1 var(--data);
  letter-spacing: .18em; text-transform: uppercase; color: var(--soft);
  padding: 0 1rem .7rem 0; border-bottom: 1px solid var(--rule);
}
.queue td {
  padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--rule-soft);
  vertical-align: top; color: var(--mid);
}
.queue tr:hover td { background: var(--surface); }
.co { font-weight: 500; color: var(--ink); }
.co small { display: block; font-weight: 400; color: var(--faint); font-size: .78rem;
            font-family: var(--data); margin-top: .15rem; }
.fit { font: 500 .82rem var(--data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.changed { font-size: .88rem; }
.changed small { display: block; color: var(--faint); font: 500 .7rem var(--data); margin-top: .2rem; }
.pill { font: 500 .74rem var(--data); white-space: nowrap; }
.pill.ready { color: var(--proven); }
.pill.none  { color: var(--faint); }
.pill.flag  { color: var(--judge); }

/* ── Results ──────────────────────────────────────────────────────────────── */
.kpis { display: flex; gap: 1px; flex-wrap: wrap; margin: 1.75rem 0;
        background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: 3px; }
.kpi { flex: 1 1 9rem; background: var(--surface); padding: 1.2rem 1.3rem; }
.kpi b {
  display: block; font: 600 2rem/1 var(--display);
  letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums;
  margin-bottom: .35rem;
}
.kpi span {
  color: var(--soft); font: 600 .68rem var(--data);
  letter-spacing: .13em; text-transform: uppercase;
}

@media (max-width: 48rem) {
  .bar nav { gap: 1rem; font-size: .82rem; }
  .who span { display: none; }
  .queue th:nth-child(2), .queue td:nth-child(2) { display: none; }
}

/* ── New account ──────────────────────────────────────────────────────────── */
.newacct {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--accent); border-radius: 6px;
  padding: 2rem 2.25rem 2.25rem; margin-bottom: 1rem;
}
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* ── Dropzone ─────────────────────────────────────────────────────────────── */
/* Documents are where the real material is — an RFP says what a homepage never
   will — so this is a first-class field, not an afterthought behind a link. */
.drop {
  position: relative; border: 1.5px dashed var(--rule); border-radius: 6px;
  padding: 1.5rem 1.25rem; text-align: center; cursor: pointer;
  background: var(--bg); transition: border-color .12s, background .12s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-wash); }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-text { margin: 0; color: var(--mid); font-size: .95rem; }
.drop-link { color: var(--accent-text); text-decoration: underline; }
.drop .hint { max-width: 34rem; margin-left: auto; margin-right: auto; }

.filelist { list-style: none; margin: .8rem 0 0; padding: 0; }
.filelist li {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .45rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .9rem;
}
.filelist li:last-child { border-bottom: 0; }
.filelist .fname { color: var(--ink); font-weight: 500; }
.filelist .fsize {
  color: var(--soft); font: 500 .78rem var(--data); font-variant-numeric: tabular-nums;
}
.filelist .link { margin-left: auto; }

@media (max-width: 48rem) {
  .two { grid-template-columns: 1fr; gap: 0; }
  .newacct { padding: 1.5rem 1.25rem; }
}

/* ── Config gaps ──────────────────────────────────────────────────────────── */
/* Said where a rep is about to start work, not on a status page nobody opens. */
.configbar {
  max-width: 72rem; margin: 1.25rem auto 0; padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--judge) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--judge) 35%, var(--rule)); border-left: 3px solid var(--judge);
  border-radius: 6px; color: var(--mid); font-size: .92rem;
}
.configbar.blocking { background: color-mix(in srgb, var(--failed) 12%, var(--surface)); border-color: color-mix(in srgb, var(--failed) 35%, var(--rule)); border-left-color: var(--failed); }
.configbar strong { display: block; color: var(--ink); margin-bottom: .5rem; }
.configbar.blocking strong { color: var(--failed); }
.configbar ul { margin: 0; padding-left: 1.1rem; }
.configbar li { margin-bottom: .4rem; }
.configbar code {
  font: 600 .84rem var(--data); color: var(--ink);
  background: var(--surface); padding: .08em .35em; border-radius: 3px;
}
.configbar .hint { margin-top: .6rem; }

/* ─── THE ACCOUNT PAGE, WITH SOME COLOUR IN IT ───────────────────────────────
   Styling only. Nothing here adds a section, a control or a number: the page
   does exactly what it did, it just stops looking like a form on a black
   rectangle. A rep opens this every day and it is the first thing they see. */

/* A quiet field of light behind the page. Two very low-opacity washes, fixed so
   they do not slide with the content, and a fine grid over the top. The grid is
   at 2% so it reads as texture rather than as a pattern competing with the
   form. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52rem 32rem at 12% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(44rem 30rem at 92% 4%, color-mix(in srgb, var(--tier-industry) 9%, transparent), transparent 72%),
    linear-gradient(var(--rule-soft) 1px, transparent 1px) 0 0 / 100% 4.5rem,
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px) 0 0 / 4.5rem 100%;
  opacity: .55;
  mask-image: linear-gradient(to bottom, #000 0, #000 34rem, transparent 52rem);
}

/* The card itself lifts off that ground rather than sitting flat on it. The top
   edge goes from the accent into the industry blue so the eye has somewhere to
   start, and the glow underneath is what separates the card from the wash. */
.newacct {
  position: relative;
  border-top: 0;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, var(--accent), var(--tier-industry) 55%, var(--accent-edge)) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 4%, transparent) inset,
    0 18px 40px -24px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* The eyebrow was the same grey as everything else. It is the first word on the
   page, so it gets the accent and a mark beside it. */
.newacct .eyebrow {
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.newacct .eyebrow::before {
  content: '';
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* The two fields that actually start the work. A left edge marks them as the
   required pair without adding a word to the label. */
.newacct .two .field {
  padding-left: .7rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.newacct .two .field:last-child {
  border-left-color: color-mix(in srgb, var(--tier-industry) 38%, transparent);
}

/* Focus was a thin ring on a dark field, easy to lose. */
.newacct input:focus,
.newacct textarea:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* The dropzone read as a disabled area. Still quiet, but clearly a target. */
.drop {
  background: color-mix(in srgb, var(--accent) 3%, var(--surface));
  border-color: var(--accent-edge);
}
.drop:hover, .drop.over {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* The one button that starts everything, sized and coloured like it. */
#n-go {
  padding: .8rem 1.6rem;
  font-size: 1rem;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--tier-industry)));
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
#n-go:hover { filter: brightness(1.08); }
/* Disabled still has to be READABLE. This was `background: var(--rule)`, a dark
   grey, under the base rules' near-black text at 50% opacity: the button
   vanished the moment a build started, which looked like it had gone missing.
   A control a rep cannot see is worse than one they cannot press, because the
   second tells them the build is running and the first tells them nothing. */
#n-go:disabled {
  background: var(--surface-2);
  color: var(--mid);
  opacity: 1;
  box-shadow: none;
  border: 1px solid var(--rule);
}

/* "Your accounts" sat on the page with no separation from the card above it. */
.newacct + h2 {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .newacct { transition: box-shadow .2s ease; }
  #n-go { transition: filter .15s ease, box-shadow .2s ease; }
}