/* Shared by signup and setup. Deliberately its own file rather than part of the
   app's stylesheet: these pages load before anyone is signed in, on a phone, on
   whatever signal a work site has, and they should not wait on the app's CSS. */

:root{
  --ink:#1c2a21; --soft:#5a6b60; --faint:#5f6f65; --line:#dfe5df;
  --paper:#f4f1ea; --card:#fffdf8; --green:#2f5d43; --green-dk:#234833;
  --accent:#c2703d; --bad:#9c3320;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  display:flex; justify-content:center; padding:34px 18px 70px;
}
.shell{width:100%; max-width:480px}
.shell.wide{max-width:660px}

.brand{
  display:block; text-align:center; margin-bottom:26px; text-decoration:none;
  font:700 21px/1 Georgia,"Iowan Old Style",serif; letter-spacing:-.01em;
  color:var(--green-dk);
}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:30px 26px; margin-bottom:16px;
}
h1{font:700 25px/1.25 Georgia,serif; margin:0 0 10px; letter-spacing:-.015em}
h2{font:600 17px/1.3 inherit; margin:0 0 4px}
.lede{color:var(--soft); margin:0 0 24px}
.step{
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); font-weight:600; margin-bottom:6px;
}

label{display:block; font-weight:600; font-size:14.5px; margin:18px 0 6px}
label:first-of-type{margin-top:0}
.hint{font-weight:400; color:var(--faint); font-size:13.5px; display:block; margin-top:2px}

/* `font: 16px/1.4 inherit` is invalid — the shorthand needs a real family, so
   the whole declaration was dropped and every input and button fell back to the
   browser default, Arial 13.3px. On a page set in -apple-system that looked
   like an unstyled form, and anything under 16px makes iOS Safari zoom the
   whole page the moment a field is focused — the layout jumped on every tap. */
input,select,textarea,button{
  font-family:inherit;
  font-size:16px;
  line-height:1.4;
}
input,select,textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:5px;
  background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(47,93,67,.12);
}
input.code{
  font:600 30px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.4em; text-align:center; padding:16px 14px;
}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:420px){ .row{grid-template-columns:1fr} }

.btn{
  display:block; width:100%; margin-top:24px; padding:15px; border:0; border-radius:5px;
  font-family:inherit; font-size:16px; font-weight:600; line-height:1; cursor:pointer;
}
.btn.primary{background:var(--green); color:#fff}
.btn.primary:hover{background:var(--green-dk)}
.btn.primary:disabled{background:#9db3a5; cursor:default}
.btn.ghost{background:#fff; border:1px solid var(--line); color:var(--ink); margin-top:10px}

.linkbtn{
  background:none; border:0; padding:10px 2px; color:var(--green); cursor:pointer;
  font-family:inherit; font-size:15px; text-decoration:underline; min-height:44px;
}
a{color:var(--green)}

.alt{text-align:center; color:var(--soft); font-size:15px; margin:20px 0 0}
.alt a{display:inline-block; padding:10px 4px}
.fine{color:var(--faint); font-size:13px; margin:18px 0 0; line-height:1.5}

.err{
  background:#f7e4e0; border:1px solid #e6c3bb; color:var(--bad);
  padding:11px 13px; border-radius:5px; margin:18px 0 0; font-size:14.5px;
}
.ok{
  background:#e2efe6; border:1px solid #b9d3c1; color:var(--green-dk);
  padding:11px 13px; border-radius:5px; margin:18px 0 0; font-size:14.5px;
}

/* Yard picker on the setup page. */
.yards{display:grid; gap:10px; margin-top:6px}
.yard{
  display:flex; gap:12px; align-items:flex-start; padding:14px;
  border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer;
}
.yard:has(input:checked){border-color:var(--green); background:#f4f9f5}
.yard input{width:auto; margin:3px 0 0; flex:none}
.yard .nm{font-weight:600}
.yard .meta{color:var(--faint); font-size:13.5px}

/* "My yard isn't listed."

   Deliberately shaped like the yard rows above rather than like fine print at the
   bottom of the step. A landscaper whose only supplier is missing is the person most
   likely to abandon setup, so the way out has to be as visible as the options that
   don't apply to them — not a sentence under everything else pointing at a Settings
   page they have to come back to later. */
.yard-add{
  display:block; width:100%; text-align:left; padding:14px; cursor:pointer;
  border:1px dashed var(--line); border-radius:6px; background:#fff;
  color:var(--green-dk); font:inherit; font-weight:600; margin-top:10px;
}
.yard-add:hover{border-color:var(--green); background:#f4f9f5}
.yard-add .meta{display:block; font-weight:400; color:var(--faint); font-size:13.5px; margin-top:2px}

.yard-form{
  border:1px solid var(--line); border-left:3px solid var(--green);
  border-radius:6px; background:#fff; padding:16px; margin-top:10px;
}
.yard-form h3{margin:0 0 4px; font-size:16.5px}
.yard-form .lede{font-size:14.5px; margin:0 0 14px}
.yard-form label{margin-top:12px}
.yard-form label:first-of-type{margin-top:0}
.yard-form .btn{margin-top:14px}

/* A yard already asked for. Reads as settled, not as a warning — the landscaper has
   done everything they can and the ball is with us. */
.yard-pending{
  display:flex; gap:12px; align-items:flex-start; padding:14px; margin-top:10px;
  border:1px solid #b9d3c1; border-radius:6px; background:#e2efe6;
}
.yard-pending .tick{color:var(--green); font-weight:700; flex:none}
.yard-pending .nm{font-weight:600; display:block}
.yard-pending .meta{color:var(--green-dk); font-size:13.5px}

/* Itemised vs summary. Two cards rather than a dropdown, because the difference
   is visual and a landscaper should see it rather than read it. */
.choices{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px}
@media (max-width:440px){ .choices{grid-template-columns:1fr} }
.choice{
  border:1px solid var(--line); border-radius:6px; padding:14px; background:#fff;
  cursor:pointer; display:block;
}
.choice:has(input:checked){border-color:var(--green); background:#f4f9f5}
.choice input{width:auto; margin-right:7px}
.choice .why{color:var(--faint); font-size:13.5px; margin-top:5px}

.progress{display:flex; gap:6px; margin-bottom:22px}
.progress i{flex:1; height:3px; border-radius:2px; background:var(--line)}
.progress i.done{background:var(--green)}

[hidden]{display:none !important}