/* One Call Handyman - quote request page.
 *
 * Every value here comes from brand/tokens.css. Component recipes follow
 * one-call-brand/DESIGN.md. If you need a colour, a radius or a spacing
 * step that is not a token, it does not belong on this page.
 *
 * Dark mode needs no rules below: the tokens swap themselves on
 * prefers-color-scheme.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2 { font-family: var(--font-heading); color: var(--text-heading); margin: 0; }
p { margin: 0; }

:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: var(--z-toast);
  background: var(--action);
  color: var(--action-text);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font: 600 var(--text-base)/1 var(--font-heading);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-3); }

/* ---- buttons (DESIGN.md recipe) ------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  font: 600 var(--text-base)/1 var(--font-heading);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.btn-primary       { background: var(--action); color: var(--action-text); }
.btn-primary:hover { background: var(--action-hover); }

/* The one --cta on this screen. Nothing else may use it. */
.btn-cta       { background: var(--cta); color: var(--cta-text); }
.btn-cta:hover { background: var(--cta-hover); }

.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---- masthead ------------------------------------------------------- */

.masthead {
  background: var(--surface);
  border-bottom: var(--border-width) solid var(--border);
}

.masthead__in {
  max-width: var(--measure-container);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.masthead__logo { display: inline-flex; flex: none; }
.masthead__logo img { width: 132px; height: auto; }

.masthead__call { flex: none; }

@media (max-width: 26rem) {
  .masthead__logo img { width: 108px; }
  .masthead__call { padding: 0 var(--space-4); }
  .masthead__call span { font-size: var(--text-sm); }
}

/* ---- layout --------------------------------------------------------- */

.page {
  max-width: var(--measure-container);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter) var(--space-24);
}

.intro { margin-bottom: var(--space-8); }

.eyebrow {
  font: 700 var(--text-sm)/1.4 var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--brand-deep);
  margin-bottom: var(--space-2);
}

.intro h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  max-width: var(--measure);
}

/* ---- error summary (DESIGN.md recipe) ------------------------------- */

.summary {
  border: var(--border-width) solid var(--danger);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  background: var(--surface);
}
.summary h2 {
  color: var(--danger);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}
.summary ul {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
}
.summary li + li { margin-top: var(--space-1); }
.summary a { color: var(--danger); }

/* ---- capture zone --------------------------------------------------- */

.capture { margin-bottom: var(--space-4); }

.capture input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.capture__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 12.5rem;
  padding: var(--space-6);
  background: var(--surface-subtle);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.capture__zone:hover,
.capture__zone.is-over {
  border-style: solid;
  border-color: var(--brand-deep);
  background: var(--bg-subtle);
}

.capture input:focus-visible + .capture__zone {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.capture__icon {
  width: 3rem;
  color: var(--brand-deep);
  margin-bottom: var(--space-1);
}

.capture__title {
  font: 600 var(--text-xl)/1.3 var(--font-heading);
  color: var(--text-heading);
}
.capture__hint { color: var(--text-muted); font-size: var(--text-sm); }

/* ---- thumbnails ----------------------------------------------------- */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
}

.shots:empty { margin-bottom: var(--space-4); }

.shot {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-subtle);
  border: var(--border-width) solid var(--border);
  animation: pop var(--dur-base) var(--ease-out);
}

.shot img { width: 100%; height: 100%; object-fit: cover; }

/* 44px tap target on a 28px visual button, per --tap-min. */
.shot__drop {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--tap-min);
  height: var(--tap-min);
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-invert);
  cursor: pointer;
  padding: 0;
}

.shot__drop::before {
  content: "";
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--action);
}

.shot__drop svg { position: relative; }

@keyframes pop { from { transform: scale(0.88); opacity: 0; } }

/* ---- fields (DESIGN.md recipe) -------------------------------------- */

.fields { margin-bottom: var(--space-6); }

.field { margin-bottom: var(--field-gap); }

.field > label {
  display: block;
  font: 600 var(--text-sm)/1.4 var(--font-heading);
  color: var(--text);
  margin-bottom: var(--label-gap);
}

.req {
  font: 700 var(--text-xs)/1 var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin-left: var(--space-2);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: var(--control-h);
  background: var(--field-bg);
  color: var(--field-text);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--field-radius);
  padding: 0 var(--control-px);
  /* 16px literal, not --text-base: iOS zooms the viewport below 16px. */
  font: 400 16px/1.4 var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.field textarea {
  min-height: 128px;
  padding: var(--space-3) var(--control-px);
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { border-color: var(--brand-deep); }

.field ::placeholder { color: var(--text-muted); opacity: 1; }

.help {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 6px;
}

.err {
  font: 600 var(--text-sm)/1.4 var(--font-body);
  color: var(--danger);
  margin-top: 6px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.err[hidden] { display: none; }

.err svg { flex: none; margin-top: 3px; }

.field.invalid input,
.field.invalid textarea,
.field.invalid select {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}

/* Same invalid treatment, applied to the capture zone on finish.html when
   photos are the thing still missing. */
#capture-block.invalid .capture__zone {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}

/* ---- actions -------------------------------------------------------- */

.send { width: 100%; min-height: var(--control-h-lg); }

.fineprint {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

/* ---- sent ----------------------------------------------------------- */

.done {
  border: var(--border-width) solid var(--success);
  border-left: 4px solid var(--success);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-6);
}

.done h2 {
  color: var(--success);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.done p { color: var(--text-muted); }
.done p + p { margin-top: var(--space-4); }

/* ---- finish.html states ----------------------------------------------- */

.loading {
  color: var(--text-muted);
  padding: var(--space-6) 0;
}

.expired {
  border: var(--border-width) solid var(--danger);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-6);
}

.expired h2 {
  color: var(--danger);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

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