/* ==========================================================================
   Chuk Yip Company — Request a Quote page styles
   Private UI prototype · REVIEW DRAFT · Gate B design review
   Requires: tokens.css → base.css → components.css loaded first.
   Scope: /request-a-quote/ only. Shared components stay in components.css.
   ========================================================================== */

/* --- Page hero --- */
.rfq-hero {
  padding-block: var(--space-4) var(--space-8);
}

.rfq-hero__lead {
  font-size: var(--text-lg);
  max-width: var(--measure);
}

.rfq-hero__review-note {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- Form shell: comfortable reading/measure width --- */
.form-shell {
  max-width: 46rem;
}

/* --- Demo + no-JS notices --- */
.demo-note {
  padding: var(--space-2) var(--space-3);
  margin-block-end: var(--space-3);
  background: var(--color-accent-soft);
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.demo-note--inline {
  margin-block-start: var(--space-2);
}

.no-js-notice {
  padding: var(--space-2) var(--space-3);
  margin-block-end: var(--space-3);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
}

/* Progressive enhancement: once site.js sets html.js, the
   interactive form is available and the fallback notice is removed. */
html.js .no-js-notice {
  display: none;
}

/* --- Error summary (Invalid state) --- */
.error-summary {
  margin-block-end: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-error-bg);
  border: 2px solid var(--color-error);
  border-radius: var(--radius-md);
}

.error-summary__title {
  font-size: var(--text-lg);
  color: var(--color-error);
}

.error-summary__list {
  margin-block-start: var(--space-1);
  padding-inline-start: 1.25em;
}

.error-summary__list a {
  color: var(--color-error);
  font-weight: 600;
}

/* --- Fieldsets / legends --- */
.group {
  margin: 0 0 var(--space-4);
  padding: 0 0 var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  min-width: 0;
}

.group--nested {
  margin-block: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.group__legend {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-heading);
  padding: 0;
  margin-block-end: var(--space-2);
}

.group__legend--sub {
  font-size: var(--text-lg);
}

/* --- Fields --- */
.field {
  margin-block-end: var(--space-3);
}

.field-row {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 40em) {
  .field-row {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}

.field__label {
  display: block;
  font-weight: 600;
  margin-block-end: var(--space-1);
}

/* Required/optional are TEXT indicators, never color-only. */
.field__required,
.field__optional {
  margin-inline-start: 0.35em;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field__required {
  color: var(--color-error);
}

.field__optional {
  color: var(--color-text-muted);
}

.field__hint {
  margin-block-end: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.field__control {
  display: block;
  width: 100%;
  min-height: 44px; /* touch target */
  padding: 0.6em 0.75em;
  background: var(--color-surface);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
}

textarea.field__control {
  min-height: 6em;
  resize: vertical;
}

.field__control--narrow {
  max-width: 12rem;
}

/* Invalid fields: visible border change AND an error message (never color-only). */
.field__control[aria-invalid="true"] {
  border: 2px solid var(--color-error);
  background: var(--color-error-bg);
}

.field__error {
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-error);
}

.field__error::before {
  content: "Error: ";
}

/* --- Intent selector: two large selectable radio cards --- */
.intent__grid {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 40em) {
  .intent__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.intent-card {
  position: relative;
  display: block;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.intent-card__input {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 1.25rem;
  height: 1.25rem;
}

.intent-card__title {
  display: block;
  font-weight: 700;
  font-size: var(--text-lg);
  padding-inline-end: 2rem;
}

.intent-card__text {
  display: block;
  margin-block-start: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Selected state: border + wash AND the native radio remains visible. */
.intent-card:has(.intent-card__input:checked) {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

/* Keyboard focus is shown on the whole card. */
.intent-card:has(.intent-card__input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.intent-notice {
  margin-block-start: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- Branches ---
   No-JS contract: the project branch is first and visible by default; the
   appointment branch keeps its heading/intro readable but its fields stay
   hidden (the no-JS notice directs visitors to email). With JS, exactly the
   active branch shows its fields. */
.branch--appointment .branch__fields {
  display: none;
}

html.js .branch--appointment.is-active .branch__fields {
  display: block;
}

html.js .branch--project:not(.is-active) .branch__fields {
  display: none;
}

/* --- Upload UI --- */
.upload__limits {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.upload__zone {
  margin-block-start: var(--space-2);
  padding: var(--space-3);
  text-align: center;
  background: var(--color-surface);
  border: 2px dashed var(--color-text-muted);
  border-radius: var(--radius-md);
}

.upload__zone.is-dragover {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.upload__zone-text {
  margin-block-end: var(--space-2);
  color: var(--color-text-muted);
}

/* The native file input stays visible and focusable — never drag-only. */
.upload__input {
  display: block;
  margin-block-start: var(--space-2);
  margin-inline: auto;
  max-width: 100%;
  min-height: 44px;
}

.upload__note {
  margin-block-start: var(--space-2);
  font-size: var(--text-sm);
}

.upload__actions {
  margin-block-start: var(--space-2);
}

/* --- File list rows: name, size, status, actions --- */
.file-list {
  margin-block-start: var(--space-2);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.file-row {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.file-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1em;
  align-items: baseline;
}

.file-row__name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.file-row__size {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Status is always a text label; color is only a supplement. */
.file-row__status {
  display: inline-block;
  margin-block-start: var(--space-1);
  padding: 0.15em 0.6em;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.file-row__status--selected,
.file-row__status--uploading,
.file-row__status--checking {
  background: var(--color-accent-soft);
  color: var(--color-text);
  border: 1px solid var(--color-accent-strong);
}

.file-row__status--accepted {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.file-row__status--rejected,
.file-row__status--failed {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

.file-row__detail {
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.file-row__reason {
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-error);
}

.file-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
}

.file-row__btn {
  min-height: 44px; /* touch target */
  padding: 0.35em 1em;
  background: var(--color-surface);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
}

.file-row__btn:hover {
  background: var(--color-accent-soft);
}

/* --- Editing indicator (brief: entries preserved in page memory only) --- */
.editing-indicator {
  margin-block-end: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Submit row / Ready state --- */
.submit-row {
  margin-block-start: var(--space-3);
}

.ready-status {
  margin-block-end: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-md);
}

/* --- DEMO outcome chooser --- */
.demo-chooser {
  margin-block-start: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-soft);
  border: 2px dashed var(--color-accent-strong);
  border-radius: var(--radius-md);
}

.demo-chooser__title {
  font-size: var(--text-lg);
}

.demo-chooser__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
}

/* --- State panels (Submitting / Received / Unknown / Unavailable) --- */
.state-panel {
  margin-block-start: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
}

.state-panel__title {
  font-size: var(--text-xl);
  margin-block-end: var(--space-1);
}

.state-panel--success {
  border-left-color: var(--color-success);
  background: var(--color-success-bg);
}

.state-panel--warning {
  border-left-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.state-panel--error {
  border-left-color: var(--color-error);
  background: var(--color-error-bg);
}

.state-panel__ref {
  font-family: var(--font-mono);
}

/* --- Before you submit --- */
.before-submit {
  margin-block-end: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.before-submit__title {
  font-size: var(--text-lg);
  margin-block-end: var(--space-1);
}

/* --- Compact process steps (density tuned via --grid-min per convention) --- */
.steps--compact {
  --grid-min: 16rem;
}

/* --- Motion: only inside the reduced-motion gate --- */
@media (prefers-reduced-motion: no-preference) {
  .intent-card,
  .upload__zone,
  .file-row__btn {
    transition: background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }
}