/* Home, sign-up and the application (terms, prototype history, apply, before the deposit), the
   $500 deposit and the customer's payments, the project home (Where you are), the files
   page, G1 "Here's what we understood" and a gate's status screen (gates.css has the rest).
   Built on the shared components (components.css); every value comes from the tokens in app.css.
   Loaded by those templates in their head block. */

/* --- Home ------------------------------------------------------------------------------------- */

.home { max-width: calc(var(--narrow) * 2.2); margin: var(--space-4) auto; padding: 0 var(--space-2); }
.home-empty { margin-top: var(--space-3); }

/* --- The terms, the application, home before the deposit ---------------------------------------- */

.terms-page, .apply-page {
  display: grid;
  gap: var(--space-3);
  max-width: calc(var(--narrow) * 1.6);
  margin: var(--space-4) auto;
  padding: 0 var(--space-2);
}
.terms-page .page-head, .apply-page .page-head { margin: 0; }
.terms-body { display: grid; gap: var(--space-2); }
.terms-body h2, .terms-body h3 { margin-top: var(--space-1); }
.terms-page .actions { margin-top: 0; }
.apply-page textarea { min-height: calc(var(--space-5) * 3); }
.choices { display: grid; gap: var(--space-1); margin: 0; padding: 0; border: 0; }
.choices legend { margin-bottom: var(--space-1); padding: 0; font-weight: 500; }
.choice-note { display: block; color: var(--muted); font-size: var(--text-sm); }
.quantities { gap: var(--space-2); }
.quantity-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
}

.pre-deposit { display: grid; gap: var(--space-3); }
.pre-deposit .page-head { margin: 0; align-items: center; }
.status-chip { cursor: default; }
.how h2, .partners h2 { margin-bottom: var(--space-2); }
.how-steps, .partner-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.partner-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* How it works (C123 #4): one column on a phone, 2 x 2 when narrower, 4 in a row, never 3 + 1. */
.how { container: how / inline-size; }
.how-steps { grid-template-columns: minmax(0, 1fr); }
@container how (min-width: 30rem) { .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container how (min-width: 50rem) { .how-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.how-step, .partner { display: grid; align-content: start; gap: var(--space-1); }
.how-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
/* Until a picture is drawn: a grey place that says what it will show. */
.how-placeholder {
  display: grid;
  align-content: center;
  gap: var(--space-half);
  aspect-ratio: 4 / 3;
  padding: var(--space-2);
  color: var(--fg-2);
  font-size: var(--text-sm);
  text-align: center;
  background: var(--panel-2);
  border: var(--border) dashed var(--line-strong);
  border-radius: var(--radius);
}
.partner-logo { max-height: calc(var(--space-5) * 1.25); width: auto; object-fit: contain; }
.application-details summary { cursor: pointer; font-weight: 500; }
.application-details .facts, .quantity-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-half) var(--space-3);
  margin: var(--space-2) 0;
}
.application-details .facts dt, .quantity-facts dt { color: var(--muted); }
.application-details .facts dd, .quantity-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

@media (max-width: 560px) {
  .application-details .facts, .quantity-facts { grid-template-columns: minmax(0, 1fr); }
}

/* --- Upload (the drop zone and file list; no screen uses them since R57, Task 4 does again) */

.brief-form { display: flex; flex-direction: column; gap: var(--space-3); }
.brief-form .actions { margin-top: 0; }
.brief-text { min-height: calc(var(--space-5) * 7); padding: var(--space-3); }

/* The drop zone: the file input covers it, so a click or a drop lands on the input itself. */
.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(var(--space-5) * 2);
  padding: var(--space-3);
  color: var(--fg-2);
  text-align: center;
  border: var(--border) dashed var(--muted);
  border-radius: var(--radius);
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--accent); background: var(--panel-2); }
.dropzone:has(.dropzone-input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-half) var(--space-2);
}
.dropzone-dot { color: var(--muted); }
.dropzone .filetype { font-size: var(--text-sm); line-height: inherit; }

/* Files chosen (app.js). */
.file-list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.file-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-half) var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  background: var(--panel-2);
  border-radius: var(--radius);
}
.file-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file-size { color: var(--muted); font-family: var(--font-mono); }
.file-problem { flex-basis: 100%; color: var(--danger); }

/* --- A gate before its result is published (gate_status.html) --------------------------------- */

.waiting-panel, .status-panel { display: grid; gap: var(--space-2); max-width: calc(var(--narrow) * 1.5); }

/* --- G1: Here's what we understood ----------------------------------------------------------- */

.g1-error { margin-bottom: var(--space-3); }
.g1-product {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin: var(--space-2) 0 var(--space-2);  /* below the answers now (C11): never pulled up (C119) */
  font-weight: 500;
}
.table-scroll { overflow-x: auto; }
.g1-table { min-width: 480px; }  /* two columns: the source is a tag in the text cell (#3) */
.g1-table th[scope="col"] { font-size: var(--text-sm); white-space: nowrap; }
.g1-table td { vertical-align: top; }
.g1-table td > .source { margin-left: var(--space-half); }
.g1-table .g1-check { width: 30%; color: var(--fg-2); }
.g1-table .threshold { font-family: var(--font-mono); font-size: var(--text-sm); }
.g1-not-right { margin-top: var(--space-2); }
.req-details { margin-top: var(--space-half); font-size: var(--text-sm); }
.req-details summary { cursor: pointer; color: var(--muted); }
.req-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-half) var(--space-2); margin: var(--space-1) 0 0; }
.req-facts dt { color: var(--muted); }
.req-facts dd { margin: 0; }
.source { justify-self: end; white-space: nowrap; }
.source-answer { color: var(--link); border-color: var(--link); }

.questions { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.g1-assumed { display: grid; gap: var(--space-1); }  /* the real open questions first, read-only (#1) */
.g1-assumed-title { font: 400 var(--text)/1.4 var(--font-body); color: var(--fg-2); }
.answers-form { display: grid; gap: var(--space-2); }
.answers-form .question { padding: calc(var(--space-1) * 1.5) var(--space-2); }  /* tighter (#1) */
.question label.question-text { flex-basis: 100%; font-weight: 400; }
.question-measure { display: block; color: var(--fg-2); font-size: var(--text-sm); }
.question .req-details { margin-top: 0; }  /* beside the box until opened (#1) */
.question .req-details[open] { flex-basis: 100%; }
.question .req-details p { margin: var(--space-half) 0 0; }
.question input[type="text"] { max-width: calc(var(--narrow) * 1.5); }
.question input[aria-invalid="true"] { border-color: var(--danger); }
.answers-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.question-done strong { font-weight: 500; }

.g1-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: stretch;
  margin-top: var(--space-3);
}
.g1-rows > li { display: grid; align-items: center; gap: var(--space-2); }
.part-row { grid-template-columns: minmax(0, 1fr) auto; }
.g1-confirmed { margin-top: var(--space-3); }
.g1-sent { margin-top: var(--space-1); }  /* the request text is not shown again (#2) */

.rules { margin-top: var(--space-2); padding-top: var(--space-2); border-top: var(--border) solid var(--line); }
.rules-title { margin-bottom: var(--space-1); font: 400 var(--text)/1.4 var(--font-body); color: var(--fg-2); }
.rules-list { display: grid; gap: var(--space-half); margin: 0; padding: 0; list-style: none; color: var(--muted); }
.rules .notice { margin-top: var(--space-1); }

@media (max-width: 1100px) {
  .g1-panels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .part-row { grid-template-columns: minmax(0, 1fr); }
  .part-row > .source { justify-self: start; }
}

/* --- The deposit (screen 5), its line icons, and the customer's payments ------------------------ */

.deposit-page {
  display: grid;
  gap: var(--space-3);
  max-width: calc(var(--narrow) * 1.8);
  margin: var(--space-4) auto;
  padding: 0 var(--space-2);
}
.deposit-page .page-head, .deposit-subhead { margin: 0; }
.deposit-page .actions { margin-top: 0; }
/* In the station panel (payment_base.html) the page is the main column, not a page of its own. */
.cd-panel-main > .deposit-page, .cd-panel-main > .order-form-page { margin: 0; padding: 0; max-width: none; }
.deposit-intro, .deposit-timeline { margin: 0; }
.deposit-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.deposit-item {
  display: grid;
  grid-template-columns: var(--icon) minmax(0, 1fr);
  gap: var(--space-1);
  align-items: start;
}
.deposit-item h3 { margin: 0; font-size: var(--text); }
.deposit-item p { margin: 0; }
.deposit-excluded summary { cursor: pointer; font-weight: 500; }
.deposit-excluded p { margin: var(--space-2) 0 0; }
/* Readability #10 (C120): the button right under the timeline, then "What you get" and "What's
   not included" side by side (one column on a narrow screen), How it works under them (C115). */
.deposit-pay { display: grid; gap: var(--space-1); justify-items: start; }
.deposit-pay > p { margin: 0; }
.deposit-columns {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-3);
  align-items: start;
}
.deposit-column { display: grid; gap: var(--space-2); align-content: start; }
.deposit-columns .deposit-excluded p { margin: 0; }
.deposit-excluded > summary.deposit-subhead {
  font: 600 var(--h2)/1.2 var(--font-head);
  letter-spacing: -0.01em;
}
@media (max-width: 720px) { .deposit-columns { grid-template-columns: minmax(0, 1fr); } }

/* One hidden sprite of symbols (_icons.svg.html); each .icon draws one with the accent stroke. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: var(--icon);
  height: var(--icon);
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.payments h2 { margin-bottom: var(--space-2); }

/* --- Your project (project_home.html) ---------------------------------------------------------- */

.project-home { display: grid; gap: var(--space-3); max-width: calc(var(--narrow) * 1.8); }
.project-home .page-head { margin: 0; }
.where-you-are { display: grid; gap: var(--space-1); }
.status-card { display: grid; gap: var(--space-1); }
.status-title { font-weight: 500; }
.step-holds { display: grid; gap: var(--space-1); }
.project-links { display: flex; flex-wrap: wrap; gap: var(--space-1); } /* quotes, production */

/* --- Factory quotes and Production (quotes.html, production.html) ----------------------------- */

.quotes-page, .production-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* a wide table scrolls in its box, never widens the page */
  gap: var(--space-3);
  max-width: calc(var(--narrow) * 1.8);
}
.quotes-page .page-head, .production-page .page-head { margin: 0; }
/* The Pilot parts station's first lines (Task 11): the production contract over the title, the
   pilot sentence under it, each a whole row of the page head (a wrapping flex row). */
.pilot-contract, .pilot-line { flex-basis: 100%; margin: 0; }
.quotes-page .panel > h2, .production-page .panel > h2 { margin-bottom: var(--space-2); }
.production-page .panel > h3 { margin: var(--space-3) 0 var(--space-1); }
.rows > li.update { display: grid; gap: var(--space-half); align-items: start; }
.update-meta { font-size: var(--text-sm); }

/* --- Upload prototype files (files.html) -------------------------------------------------------- */

.files-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* the form never widens the page */
  gap: var(--space-3);
  max-width: calc(var(--narrow) * 1.5);
}
.files-page .page-head { margin: 0; }
.upload-slot { padding: var(--space-2); border: var(--border) dashed var(--muted); border-radius: var(--radius); }
.upload-slot .label { margin-left: var(--space-half); }
.sent-files { margin-top: var(--space-2); }
.file-ok { color: var(--ok); }
.parts-box { display: grid; gap: var(--space-2); margin: 0; }
.parts-box > legend { padding: 0 var(--space-half); font-weight: 500; }
.parts-typed { display: grid; gap: var(--space-1); margin: 0; padding: 0; border: 0; }
.parts-typed > legend { padding: 0; font-weight: 500; }
.parts-typed [data-add-row] { justify-self: start; }
.parts-table input { width: 100%; min-width: 0; }
.parts-table td:nth-child(3) { width: 7rem; }
.parts-table tr.is-problem input[aria-invalid="true"] { border-color: var(--danger); }

/* --- Your package (package.html) --------------------------------------------------------------- */

.package-page { display: grid; gap: var(--space-3); max-width: calc(var(--narrow) * 1.8); }
.package-page .page-head, .package-page .actions { margin: 0; }
.rows > li.pkg-file {
  display: grid;
  grid-template-columns: var(--space-3) auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}
.pkg-mark { color: var(--ok); }
.is-locked .pkg-mark { color: var(--muted); }
.icon.pkg-mark { width: var(--text-lg); height: var(--text-lg); align-self: center; stroke: var(--muted); }
.pkg-label { font-weight: 500; }
.pkg-name { min-width: 0; color: var(--muted); font-family: var(--font-mono); overflow-wrap: anywhere; }
.pkg-links { display: flex; gap: var(--space-2); }
/* Review results on the Countdown Line (Task 11): the quote's design name over G3's table, the
   locked files counted by kind (their names folded), the credit line under the two ways and the
   stop line in their place. */
.pkg-quote-name { margin: 0 0 var(--space-2); }
.pkg-kinds { margin: 0 0 var(--space-1); font-weight: 500; }
.pkg-locked { margin: 0 0 var(--space-2); }
.pkg-locked > summary { cursor: pointer; color: var(--muted); font-size: var(--text-sm); }
.pkg-locked > .pkg-files { margin-top: var(--space-1); }
.next-intro { margin-bottom: var(--space-2); }
.next-credit { margin: var(--space-2) 0 0; }
.next-stopped { margin: 0; }

@media (max-width: 560px) {
  .rows > li.pkg-file { grid-template-columns: var(--space-3) minmax(0, 1fr); }
  .pkg-name, .pkg-links { grid-column: 2; }
}

/* --- The Order Form, signed right before payment (Task 18) --------------------------------------- */

.order-form-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* the facts table scrolls in its box, never the page */
  gap: var(--space-3);
  max-width: calc(var(--narrow) * 1.8);
  margin: var(--space-4) auto;
  padding: 0 var(--space-2);
}
.order-form-page .page-head, .order-form-page .actions { margin: 0; }
.order-form-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.order-form-body h2, .order-form-body h3, .order-form-body p, .order-form-body ul { margin: 0; }
.order-form-body li.depth-1 { margin-left: var(--space-3); }
.order-form-body li.depth-2, .order-form-body li.depth-3 { margin-left: var(--space-5); }
.order-facts th { width: 30%; }
.order-facts th, .order-facts td { overflow-wrap: anywhere; }  /* the project ID is one long word */
/* "Sign and pay" looks dim until every field is filled in and the box is checked; the line under
   it says what is missing, and a press shows the browser's note on the field. */
.order-sign:invalid .btn-primary { opacity: 0.5; }
.sign-hint { display: none; margin: 0; }
.order-sign:invalid .sign-hint { display: block; }
.order-company { margin: 0; }
.signed-forms-title { margin: var(--space-3) 0 var(--space-1); font-size: var(--text); }
.signed-forms { margin: 0; padding-left: var(--space-3); }