/* The job screens themselves — processing, the ready sequence, the invoice
   list, the terminal notices, and the question screens. The controls those
   screens use are in forms.css. Every screen's rules are scoped to that
   screen's own container, because every layout loads every stylesheet. */

/* ==========================================================================
   PROCESSING
   ========================================================================== */
.head { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.head h1 { font-size: var(--step-2); }

.intro .lede { margin-top: var(--s2); font-size: var(--step-0); color: var(--ink-muted); }


/* ==========================================================================
   THE WAY BACK
   ========================================================================== */
.back-link {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--step--1); font-weight: 600; color: var(--ink-muted); text-decoration: none;
}
.back-link:hover { color: var(--accent-strong); }
.back-link .arr { color: var(--ink-faint); }

/* ==========================================================================
   READY — the delivery sequence
   A real <ol>. The counter draws the numbers in a left rail; a 1px connector
   runs from each number down to the next, and stops at the last step.
   ========================================================================== */
ol.flow { list-style: none; counter-reset: step; margin-top: var(--s7); }
ol.flow > li {
  counter-increment: step; position: relative;
  padding-left: 40px; padding-bottom: var(--s7);
}
ol.flow > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0; width: 20px;
  text-align: center; font-variant-numeric: tabular-nums;
  font-size: var(--step-0); font-weight: 600; line-height: 1.5;
  color: var(--ink-muted);
}
ol.flow > li::after {
  content: ""; position: absolute; left: 10px; top: 30px; bottom: 6px;
  width: 1px; background: var(--hair);
}
ol.flow > li:last-child { padding-bottom: 0; }
ol.flow > li:last-child::after { display: none; }

/* body size, weight 600: the number is the structure, not the heading */
ol.flow > li > h2 { font-size: var(--step-0); font-weight: 600; color: var(--ink); line-height: 1.5; letter-spacing: -0.005em; }

.stepbody { margin-top: var(--s3); }
.stepline { font-size: var(--step--1); color: var(--ink-body); max-width: 62ch; }
.stepline b { color: var(--ink); font-weight: 600; }
.stepline .tk { font-family: var(--mono); font-size: 0.92em; font-weight: 600; color: var(--ink); }

/* the corrections CSV: a quiet second way to the same artifact, under the button */
.aside-link { display: block; width: fit-content; margin-top: var(--s4); font-size: var(--step--1); color: var(--ink-muted); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.aside-link:hover { color: var(--accent-strong); }

/* invoice rows: what the one delivered file contains, one row per invoice. The
   row carries no button of its own — there is one file and one download, in
   step 1 (owner ruling, 2026-07-30) — so nothing here styles a trailing
   control. The Invoices list reuses .invrow with its own modifiers below. */
.invlist { margin-top: var(--s4); }
.invrow {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding-block: var(--s3); border-top: 1px solid var(--hair);
}
.invmeta { display: grid; gap: 1px; min-width: 0; flex: 1 1 300px; }
.invmeta .idesc { font-size: var(--step--1); color: var(--ink-body); }
.invmeta .idesc b { color: var(--ink); font-weight: 600; }

/* the Invoices list: the same row turned into a link. These are the page-local
   rules of docs/design/app/invoices-a-route.html and invoices-empty.html, which
   name flow.css as where they belong once the screen is built. */
.hist { list-style: none; }
.hist:has(li) { padding-bottom: var(--s8); }
.hist > li:last-child { border-bottom: 1px solid var(--hair); }
/* The floor. With rows, this line is the first row's own border-top; with none,
   nothing would draw it and the page reads as a header whose body failed to
   load. The empty list carries the line so the emptiness reads as an empty list
   rather than as lost data — a visual fix to a visual problem, which is why no
   sentence was added to solve it. */
.hist:not(:has(li)) { border-top: 1px solid var(--hair); }

/* Each item is the row's link and, beside it, the Delete form. The item owns
   the hairline between rows and the hover band, so both run under the button
   too; the link inside gives up its own border and takes the width the button
   leaves. */
.hist > li { display: flex; align-items: baseline; gap: var(--s4); border-top: 1px solid var(--hair); }
.hist > li:has(> .hrow:hover) { background: var(--surface-sunk); }
.hist > li > .hrow { flex: 1 1 auto; min-width: 0; border-top: 0; }
.hdelete-form { flex: none; align-self: center; padding-block: var(--s3); }

.hrow { align-items: baseline; text-decoration: none; color: inherit; }
.hmeta { gap: 3px; }

.hid { font-size: var(--step-0); color: var(--ink-body); }
/* At rest the client name carries a colorless underline: hover is the only
   other affordance and it is invisible on touch and to anyone scanning. The
   accent stays spent on hover, not on every row. */
.hid b {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--hair-strong);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.hrow:hover .hid b { color: var(--accent-strong); text-decoration-color: currentColor; }

.hsub { font-size: var(--step--1); color: var(--ink-muted); line-height: 1.45; }
.hdate { flex: none; font-size: var(--step--1); color: var(--ink-faint); }

/* Each identity segment holds together; without this a line can begin "· 1
   invoice" once anything follows the client name. The filename is the one
   segment allowed to break, anywhere, because a customer's filename can be
   longer than a narrow screen. */
.hid > b, .hid > span:not(.sep):not(.sr):not(.hfile) { white-space: nowrap; }
.hfile { overflow-wrap: anywhere; }

/* At narrow widths the date wraps under the identity. The row's own 16px gap
   would open a hole, so the wrapped row tightens to the meta grid's 3px and the
   date reads as the row's third line. */
@media (max-width: 560px) {
  .hrow { row-gap: 3px; }
  .hdate { flex-basis: 100%; }
}

/* if an invoice comes back rejected */
.rejected { margin-top: var(--s8); padding-bottom: var(--s8); }
.rejected .lead { font-size: var(--step--1); color: var(--ink-muted); max-width: 62ch; }
.rejected textarea {
  margin-top: var(--s4); width: 100%; min-height: 96px; resize: vertical;
  font-family: var(--sans); font-size: var(--step--1); color: var(--ink-body);
  background: var(--surface); border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm); padding: var(--s3) var(--s4); line-height: 1.5;
}
.rejected textarea:focus-visible { border-color: var(--accent); }

.rrow { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

@media (max-width: 480px) {
  ol.flow > li { padding-left: 32px; }
  .rrow .btn { width: 100%; }
}

/* ==========================================================================
   TERMINAL NOTICES (needs better input, system failed)
   ========================================================================== */
.page { padding-block: var(--s7) var(--s8); }
/* each notice sets its own headline measure (max-width) with its screen */
.notice h1 { font-size: var(--step-2); }
.notice .lede { margin-top: var(--s4); font-size: var(--step-0); color: var(--ink-muted); max-width: 58ch; }

/* the one action */
.actions { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

@media (max-width: 480px) {
  .actions { align-items: stretch; flex-direction: column; }
  .actions .btn { width: 100%; }
}

/* ==========================================================================
   QUESTIONS — one question to a screen
   The components of the Q&A storyboard, lifted out of the <style> blocks of
   docs/design/app/qa-1-sheet.html, qa-3-code.html, qa-4-matter.html and
   flow-04-question-1.html with their class names and values unchanged. Where
   two of those files gave a rule different values the flow- generation's value
   is the one here, because it is the later one.

   No Rails view draws any of this yet. The screen that asks a customer a
   question is Milestone B's, and until it exists /ui_components draws every
   piece below with sample data, in development only.
   ========================================================================== */

/* ---- the round's header: how far in, the way back, the position ---- */
.qtop { padding-top: var(--s5); }
.qbar { height: 3px; background: var(--hair); border-radius: 2px; overflow: hidden; }
/* The filled part of the track. Its width is this round's own fraction — 2 of
   5 is 40% — so the screen drawing the bar states it; no rule here can know it. */
.qbar i { display: block; height: 100%; background: var(--ink-muted); }
.qnav { display: flex; align-items: center; min-height: 32px; margin-top: var(--s2); }
.qback { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
         margin-inline-start: -9px; color: var(--ink-faint); font-size: 1.05rem; line-height: 1;
         text-decoration: none; border-radius: var(--radius-sm); }
.qback:hover { color: var(--accent-strong); }
.qpos { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
        letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint);
        font-variant-numeric: tabular-nums; }

/* ---- the question: the form, and the ask as its headline ---- */
.q { padding-bottom: var(--s7); }
.qask { font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.025em;
        color: var(--ink); max-width: 26ch; margin-top: var(--s4); }

/* ---- the evidence: the customer's own rows, quoted ---- */
.ev { list-style: none; margin-top: var(--s5); border-top: 1px solid var(--hair); }
.ev li { padding: 9px 0; border-bottom: 1px solid var(--hair);
         font-size: var(--step--1); line-height: 1.5; color: var(--ink-body);
         font-variant-numeric: tabular-nums; }

/* ---- the answers: one fat row each, the radio on the right ---- */
.opts { display: grid; gap: var(--s3); margin-top: var(--s6); }
.opt { display: flex; align-items: center; gap: var(--s4); cursor: pointer;
       background: var(--surface); border: 1px solid var(--hair-strong);
       border-radius: var(--radius); padding: var(--s4) var(--s5); }
.opt:hover { border-color: var(--ink-faint); }
.opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.opt input[type="radio"] { order: 2; flex: none; margin: 0 0 0 auto;
                           width: 20px; height: 20px; accent-color: var(--accent); }
.otext { order: 1; min-width: 0; flex: 1 1 auto; }
.olabel { display: block; font-size: var(--step-0); font-weight: 700; color: var(--ink); }
.ocode { font-family: var(--mono); font-size: 0.82em; font-weight: 500; color: var(--ink-muted);
         margin-left: var(--s2); letter-spacing: 0.02em; }
.odetail { display: block; margin-top: 2px; font-size: var(--step--1); color: var(--ink-muted); }

/* rows of the upload quoted inside one option, under its own hairline */
.orows { display: block; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hair); }
.oline { display: block; font-size: 0.82rem; line-height: 1.5; color: var(--ink-body);
         font-variant-numeric: tabular-nums; }

/* ---- the escapes, each inside the last option row ---- */
/* a value the app already knows, chosen from a list of them */
.oselect { display: block; position: relative; max-width: 320px; margin-top: var(--s3); }
.oselect select { -webkit-appearance: none; appearance: none; width: 100%;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hair-strong); border-radius: var(--radius-sm);
  padding: 10px 34px 10px 12px; cursor: pointer; }
.oselect select:invalid { color: var(--ink-ghost); font-weight: 400; }
.oselect::after { content: ""; position: absolute; right: 13px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: translateY(-70%) rotate(45deg); pointer-events: none; }

/* a value only the customer has, typed in the mono the app gives an identifier */
.oinput { display: block; margin-top: var(--s3); }
.oinput input {
  font-family: var(--mono); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink); background: var(--surface); border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm); padding: 12px 14px; width: 12ch;
}
.oinput input:hover { border-color: var(--ink-faint); }
.oinput input:focus-visible { border-color: var(--accent); outline-offset: 1px; }

/* ---- the standalone blank: a question with no options at all, only a value
       for the customer to type (docs/design/app/qa-4-matter.html) ---- */
.blank { margin-top: var(--s6); }
.blank input {
  font-family: var(--mono); font-size: 1.15rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink); background: var(--surface); border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm); padding: 14px 16px; width: 17ch;
}
.blank input:hover { border-color: var(--ink-faint); }
.blank input:focus-visible { border-color: var(--accent); outline-offset: 1px; }

.qsubmit { margin-top: var(--s6); }

@media (max-width: 560px) {
  .qask { font-size: var(--step-2); max-width: none; }
  .opt { padding: var(--s4); }
}