/* Robinair service request: Diversified Power.
   Mobile-first. The whole page is one form, so the styling exists to keep
   that form legible and thumb-friendly, nothing more.
   Palette is lifted from diversifiedpower.ca so the two read as one house. */

:root {
  --surface: hsl(214 46% 5%);
  --surface-2: hsl(216 28% 9%);
  --card: hsl(215 30% 8%);
  --border: hsl(214 20% 20%);
  --fg: hsl(0 0% 98%);
  --muted: hsl(214 12% 65%);
  --accent: #76c341;
  --accent-ink: hsl(214 46% 6%);
  --danger: #ff6b5e;
  --radius: 12px;
}

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

/* Author styles outrank the UA sheet, so anything carrying its own display
   rule stays on screen even with [hidden] set. Make the attribute win. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--fg);
  font: 400 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* A quiet wash so the page is not a flat black slab on big screens. */
  background-image: radial-gradient(ellipse 120% 60% at 50% 0%, hsl(214 40% 11%), transparent 70%);
  background-repeat: no-repeat;
}

/* ── masthead ─────────────────────────────────────────────────────── */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand-mark {
  /* The mark carries its own green rule underneath the letterforms, so
     it needs no border or baseline of its own, just height. */
  height: 26px;
  width: auto;
  display: block;
}

.brand-text { font-size: 15px; }

.masthead-note {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

/* ── layout ───────────────────────────────────────────────────────── */
main {
  max-width: 680px;
  margin: 0 auto;
  padding: 28px 16px 56px;
}

.intro { margin-bottom: 22px; }

h1 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 5vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.intro p {
  margin: 0;
  color: var(--muted);
  max-width: 46ch;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px 22px;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 26px;
}

legend {
  padding: 0;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── fields ───────────────────────────────────────────────────────── */
.field { margin-bottom: 16px; }

label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}

.req { color: var(--accent); }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  padding: 12px 13px;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  /* 16px keeps iOS Safari from zooming the viewport on focus. */
  font: inherit;
  font-size: 16px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

textarea { resize: vertical; min-height: 116px; }

input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px hsl(96 52% 51% / 0.25);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--danger); }

.err {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--danger);
}

.hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Chrome paints autofilled inputs a hard pale blue that wrecks a dark
   form. There is no direct override, so the fill is faked with a huge
   inset shadow and the text colour is forced. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--fg);
  transition: background-color 100000s ease-in-out 0s;
}

.row { display: grid; gap: 0 14px; }
@media (min-width: 560px) {
  .row { grid-template-columns: 1fr 1fr; }
  .row-3 { grid-template-columns: 2fr 1fr 1fr; }
}

/* ── file input ───────────────────────────────────────────────────── */
input[type="file"] {
  width: 100%;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
}

input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.filelist {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.filelist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

.filelist .size { color: var(--muted); white-space: nowrap; }
.filelist .bad { color: var(--danger); }

/* ── actions ──────────────────────────────────────────────────────── */
.actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.btn {
  /* Full width on phones: it is the only action on the page. */
  width: 100%;
  padding: 15px 22px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease;
}

.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.actions-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.actions-note strong { color: var(--fg); font-weight: 600; }

@media (min-width: 560px) {
  .btn { width: auto; align-self: flex-start; }
  .actions-note { text-align: left; }
}

/* ── result banner ────────────────────────────────────────────────── */
.formnote {
  margin-top: 18px;
  padding: 0;
  font-size: 14px;
}

.formnote:not(:empty) {
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.formnote.ok {
  border-color: hsl(96 52% 51% / 0.5);
  background: hsl(96 52% 51% / 0.1);
}

.formnote.bad {
  border-color: hsl(4 100% 68% / 0.5);
  background: hsl(4 100% 68% / 0.1);
}

/* ── spam trap ────────────────────────────────────────────────────── */
/* Off-canvas rather than display:none, since some bots skip hidden inputs. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── footer ───────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 20px 16px 32px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

footer p { margin: 0 0 6px; }
footer a { color: var(--fg); }
.footer-links a { color: var(--accent); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* -- success state ------------------------------------------------- */
.success {
  text-align: center;
  padding: 42px 22px 46px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.success h2 {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 4.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.success-lead { margin: 0 0 8px; }
.success-lead strong {
  color: var(--accent);
  font-weight: 600;
  /* An address with no spaces will not wrap on its own and would push the
     card sideways on a narrow phone. */
  overflow-wrap: anywhere;
}

.success-sub { margin: 0; color: var(--muted); font-size: 14px; }
.success-sub a { color: var(--accent); }

/* The stroke-drawn checkmark: the ring draws itself, the tick follows, then
   one small pop. Each stroke starts hidden behind a dash offset equal to its
   own length and animates to zero, which is what draws it. The numbers are
   the real path lengths: 2*pi*24 = 151 for the ring, 34 for the tick. */
.success-mark {
  width: 88px;
  height: 88px;
  display: block;
  margin: 0 auto 24px;
  animation: success-pop 300ms ease-in-out 660ms both;
}

.success-mark-circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: success-draw 620ms cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-mark-check {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: success-draw 340ms cubic-bezier(0.65, 0, 0.45, 1) 560ms forwards;
}

@keyframes success-draw { to { stroke-dashoffset: 0; } }

@keyframes success-pop {
  0%, 100% { transform: none; }
  50% { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .success-mark,
  .success-mark-circle,
  .success-mark-check { animation: none !important; }
  /* Without this the strokes would sit at full offset, i.e. an invisible
     checkmark. Turning the animation off has to leave the drawn state. */
  .success-mark-circle,
  .success-mark-check { stroke-dashoffset: 0; }
}