/* Per-screen spacing. The shared components live in the other eight
   stylesheets; what stays here is the rule a single screen owns, which in the
   prototypes sits in that file's own <style> block. Every layout loads every
   stylesheet, so each rule is scoped to its screen's class. */

/* Spacing for the pre-storyboard placeholder views only (the magic-link
   confirmation). Real job screens own their spacing (.intro etc.); delete this
   block as the placeholders are replaced. */
.placeholder-page { padding-block: var(--s6) var(--s8); }
.placeholder-page > * + *,
.placeholder-page section > * + * { margin-top: var(--s4); }
.placeholder-page ul { padding-left: 1.2em; }

/* Upload page (docs/design/app/job-new.html). */
.intro-intake { padding-block: var(--s7) var(--s4); }

@media (max-width: 480px) {
  .intro-intake { padding-top: var(--s6); }
}

/* Invoices list (docs/design/app/invoices-a-route.html, invoices-empty.html).
   The forward action shares the heading's line, so a customer here to do this
   month's billing never reads the history to get past it. */
.intro-hist {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; padding-block: var(--s6) var(--s5);
}

@media (max-width: 560px) {
  .intro-hist { align-items: flex-start; }
}

/* The facts form, a received job's page (docs/design/app/job-details-c-roster.html).
   It runs wider than the standard 720px because the roster needs four columns
   across without crowding; the prototype sets that as --wrap-max on :root,
   which reaches the top bar as well as the content column, so here the view
   names the variant on both the way the ready screen does. */
.wrap-details { --wrap-max: 860px; }
.intro-details { padding-block: var(--s7) var(--s5); }

@media (max-width: 480px) {
  .intro-details { padding-top: var(--s6); }
}

/* Ready screen (docs/design/app/job-ready.html). The delivery sequence reads a
   little wider than the standard job screen, which the prototype sets as
   --wrap-max on :root; here it is the wrapper variant the view names, because
   Propshaft serves every stylesheet on every page. The prototype's :root reaches
   the top bar as well as the content column, so this screen names the variant
   twice — once for the layout's <main> and once for the bar's own .wrap — and
   the two sit on the one measure. The headline sits where the other job screens'
   headlines sit: the prototype's extra top margin is the room its statebar
   takes, and this page draws no statebar. */
.wrap-ready { --wrap-max: 760px; }
.intro-ready { padding-block: var(--s7) 0; }

/* The quiet link under the ready screen's headline, into the sheet of the
   upload's rows. The prototype reaches the sheet from its statebar, which this
   page does not draw, so the way in is a plain link where the statebar's step
   would have been. */
.intro-ready .rowlink { margin-top: var(--s3); font-size: var(--step--1); }
.intro-ready .rowlink a { font-weight: 500; text-decoration: none; }
.intro-ready .rowlink a:hover { text-decoration: underline; }

/* Sheet screen (docs/design/app/review-i-sheet.html). The sheet's seven columns
   need the widest measure in the app, which the prototype sets as --wrap-max on
   :root; here it is the wrapper variant the view names, for the reason the ready
   screen's variant is named. The headline sits where the prototype's does once
   the room its statebar took is removed. */
.wrap-sheet { --wrap-max: 1200px; }
.intro-sheet { padding-block: var(--s7) var(--s3); }


/* Sign-in, the destination of every marketing CTA. It is laid out as a
   conversion screen rather than as a form: the promise and the three steps in
   one column, the single action in a card beside them, the fine print under
   both. Under 860px the columns stack, which puts the action directly below the
   promise and ahead of everything else on the screen. The measure runs wider
   than the standard 720px so the two columns each keep a readable width, and
   the view names the variant twice — once for the layout's <main> and once for
   the signed-out bar's own .wrap — the way the ready and sheet screens do. */
.wrap-signin { --wrap-max: 940px; }

.signin {
  display: grid; align-items: start; gap: var(--s6);
  padding-block: var(--s7) var(--s8);
}

@media (min-width: 860px) {
  .signin { grid-template-columns: minmax(0, 1fr) 340px; column-gap: var(--s8); }
}

/* The measure breaks the headline after "invoice", so the second line reads
   "to LEDES" rather than leaving "LEDES" alone. */
.signin-promise h1 { font-size: var(--step-3); max-width: 17ch; }

/* On a phone the promise is set one step down and the sequence tightens, so
   the button the reader came to press is not pushed off the screen by a
   four-line headline. */
@media (max-width: 560px) {
  .signin { padding-block: var(--s6) var(--s7); gap: var(--s5); }
  .signin-promise h1 { font-size: var(--step-2); }
  .signin-steps { margin-top: var(--s5); gap: var(--s2); }
}
.signin-promise .lede {
  margin-top: var(--s4); font-size: var(--step-0); color: var(--ink-muted); max-width: 44ch;
}

/* The homepage's three steps, at the size of body text: the sequence is the
   reassurance, so it is drawn quietly rather than as a second headline. */
.signin-steps { list-style: none; counter-reset: sstep; display: grid; gap: var(--s3); margin-top: var(--s6); }
.signin-steps li {
  counter-increment: sstep; position: relative; padding-left: 32px;
  font-size: var(--step-0); color: var(--ink-body);
}
.signin-steps li::before {
  content: counter(sstep);
  position: absolute; left: 0; top: 2px; width: 21px; height: 21px;
  display: grid; place-items: center;
  border: 1px solid var(--hair-strong); border-radius: 50%; background: var(--surface);
  font-size: var(--step--2); font-weight: 600; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.signin-card {
  background: var(--surface); border: 1px solid var(--hair-strong);
  border-radius: var(--radius); padding: var(--s5);
  box-shadow: 0 1px 2px oklch(0.27 0.05 258 / 0.05);
}
.signin-card__h {
  font-size: var(--step-1); font-weight: 700; color: var(--ink); letter-spacing: -0.015em;
}
.signin-card .btn { width: 100%; }
/* Only a misconfigured environment renders a disabled primary here, and it must
   not look pressable while it is. */
.signin-card .btn[disabled] { background: var(--ink-ghost); cursor: not-allowed; }
.signin-primary { margin-top: var(--s4); }
.signin-free {
  margin-top: var(--s3); text-align: center;
  font-size: var(--step--1); font-weight: 600; color: var(--ink-body);
}
.signin-note { margin-top: var(--s3); font-size: var(--step--1); color: var(--ink-muted); }

/* the quieter second way in */
.signin .alt { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--hair); }
.signin .alt-lead { font-size: var(--step--1); color: var(--ink-muted); }
.signin .field-block { margin-top: var(--s4); }
.signin input[type="email"] {
  width: 100%; font-family: var(--sans); font-size: var(--step-0); font-weight: 500;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--hair-strong); border-radius: var(--radius-sm); padding: 12px 14px;
}
.signin input[type="email"]::placeholder { color: var(--ink-ghost); font-weight: 400; }
.signin input[type="email"]:hover { border-color: var(--ink-faint); }
.signin .alt .btn { margin-top: var(--s4); }

/* The component gallery at /ui_components, in development and test only. It
   holds every component the nine stylesheets define, so the rules here do one
   thing: keep the sections apart and label each sample with its class name.
   Nothing below restyles a sample — the samples are drawn by the shared rules
   exactly as a real screen draws them.

   The swatch and scale rules below are one class per token because they must
   be: the app's content security policy allows styles only from its own
   stylesheets, so a swatch cannot carry its color in a style attribute. */
.gallery { padding-block: var(--s6) var(--s8); }
.gallery-section { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--hair); }
.gallery-section > h2 { font-size: var(--step-1); font-weight: 700; color: var(--ink); letter-spacing: -0.015em; }
.gallery-item { margin-top: var(--s5); }
.gallery-name { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--ink-faint); }
.gallery-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); }

/* colour swatches */
.gallery-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--s3); margin-top: var(--s2); }
.gallery-swatch { border: 1px solid var(--hair); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.gallery-swatch i { display: block; height: 44px; }
.gallery-swatch span { display: block; padding: 5px var(--s2); font-family: var(--mono); font-size: 0.62rem; color: var(--ink-muted); }
.gallery-sw-ground { background: var(--ground); }
.gallery-sw-surface { background: var(--surface); }
.gallery-sw-surface-sunk { background: var(--surface-sunk); }
.gallery-sw-ink { background: var(--ink); }
.gallery-sw-ink-body { background: var(--ink-body); }
.gallery-sw-ink-muted { background: var(--ink-muted); }
.gallery-sw-ink-faint { background: var(--ink-faint); }
.gallery-sw-ink-ghost { background: var(--ink-ghost); }
.gallery-sw-hair { background: var(--hair); }
.gallery-sw-hair-strong { background: var(--hair-strong); }
.gallery-sw-accent { background: var(--accent); }
.gallery-sw-accent-strong { background: var(--accent-strong); }
.gallery-sw-accent-ink { background: var(--accent-ink); }
.gallery-sw-accent-wash { background: var(--accent-wash); }
.gallery-sw-accent-hair { background: var(--accent-hair); }
.gallery-sw-check { background: var(--check); }
.gallery-sw-good { background: var(--good); }
.gallery-sw-warn { background: var(--warn); }
.gallery-sw-error { background: var(--error); }
.gallery-sw-flag-ink { background: var(--flag-ink); }
.gallery-sw-flag-border { background: var(--flag-border); }
.gallery-sw-flag-bg { background: var(--flag-bg); }

/* the type scale, each step set in it */
.gallery-type { color: var(--ink); line-height: 1.2; }
.gallery-type--2 { font-size: var(--step--2); }
.gallery-type--1 { font-size: var(--step--1); }
.gallery-type-0 { font-size: var(--step-0); }
.gallery-type-1 { font-size: var(--step-1); }
.gallery-type-2 { font-size: var(--step-2); }
.gallery-type-3 { font-size: var(--step-3); }
.gallery-type-4 { font-size: var(--step-4); }

/* the 4pt spacing steps, each drawn at its own width */
.gallery-sp { display: block; height: 14px; background: var(--accent-hair); border-radius: 2px; }
.gallery-sp-1 { width: var(--s1); }
.gallery-sp-2 { width: var(--s2); }
.gallery-sp-3 { width: var(--s3); }
.gallery-sp-4 { width: var(--s4); }
.gallery-sp-5 { width: var(--s5); }
.gallery-sp-6 { width: var(--s6); }
.gallery-sp-7 { width: var(--s7); }
.gallery-sp-8 { width: var(--s8); }

/* The question screen's progress bar reads its fill from the round it belongs
   to, and the gallery has no round, so the sample states a fraction of its own. */
.gallery .qbar i { width: 40%; }

/* The upload page's disclosure of the layouts the app reads. */
.intake-form .supported { margin-top: var(--s3); font-size: var(--step--1); color: var(--ink-muted); }
.intake-form .supported summary { cursor: pointer; color: var(--ink-body); }
.intake-form .supported p { margin: var(--s2) 0 0; }
.intake-form .supported .columns { font-family: var(--mono); font-size: 0.9em; }

/* Account access uses the same form and color vocabulary as the app. */
.auth-page { max-width: 440px; margin: var(--s7) auto; }
.auth-form { display: grid; gap: var(--s4); margin-top: var(--s4); }
.auth-form .field-block { margin-top: 0; }
.signin .auth-form { margin-top: 0; }
.signin .auth-form .field-block { margin-top: 0; }
.auth-form input[type="email"],
.auth-form input[type="password"] {
  width: 100%; font-family: var(--sans); font-size: var(--step-0);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--hair-strong); border-radius: var(--radius-sm); padding: 12px 14px;
}
.auth-divider {
  display: flex; align-items: center; gap: var(--s3); margin-block: var(--s5) var(--s3);
  color: var(--ink-muted); font-size: var(--step--1);
}
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--hair); }
.auth-errors { margin-top: var(--s4); color: var(--error); font-size: var(--step--1); }
.auth-page strong { overflow-wrap: anywhere; }