/* Land Report: the address form, the pin map and the wait. Uses the tokens in report.css.
   Design brief: pipelines/location-report/DESIGN.md (workspace repo). */
[hidden]{display:none!important}
.field{display:block}
.field label{display:block;font:600 var(--t-label)/1.2 var(--label);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink)}
.field input{width:100%;height:52px;margin-top:var(--sp6);padding:0 14px;font:400 17px/1.2 var(--body);color:var(--ink);background:var(--card);border:1.5px solid var(--soft);border-radius:var(--r)}
.field input::placeholder{color:var(--soft);opacity:1}
.field input:focus{outline:0;border:2px solid var(--teal);padding:0 13.5px}
.hint{font-size:15px;line-height:1.4;color:var(--soft);margin-top:var(--sp6)}
.btn.big{min-height:52px;padding:0 22px;font-size:15px;justify-content:center}
.btn[disabled]{opacity:.6;cursor:default}
.err{margin-top:var(--s4);padding:var(--s3) var(--s4);border:1px solid var(--ink);border-left-width:4px;border-radius:2px;font-size:var(--t-small);line-height:1.45}

/* 1. the form: one split card, the sample aerial is the picture */
.entry{margin:var(--sp56) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 1px 0 rgba(28,35,34,.06),0 22px 36px -28px rgba(14,26,23,.5)}
.entry .aerial{aspect-ratio:auto;min-height:100%;border-radius:0;box-shadow:none}
.entry .sampletag{left:var(--s4);bottom:var(--s4)}
.entry .go{padding:var(--s7)}
.entry h1{font-size:clamp(30px,2.7vw,38px);margin-top:var(--s4)}
.entry h1 span{font:inherit;color:inherit;margin:0;letter-spacing:inherit}
.entry form{margin-top:var(--s6);display:grid;gap:var(--s4)}
.acres{display:grid;grid-template-columns:1fr 132px;gap:var(--s4);align-items:center}
.acres input{margin-top:0}.acres .hint{margin-top:var(--sp2)}
.entry .btn{margin-top:var(--s1);width:100%}
.entry .err{margin-top:0}

/* 2. the pin and 3. the wait: the map is the screen */
.mapview{position:fixed;inset:0;display:grid;grid-template-columns:420px minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:var(--paper)}
#map{background:var(--night);min-height:0}
.side{display:flex;flex-direction:column;background:var(--paper);border-right:1px solid var(--line);min-height:0;overflow:auto}
.side .bar{padding:0 var(--s6);height:64px;display:flex;align-items:center;flex:none}
.say{padding:var(--s6)}
.say h1,.sheet h1{font:700 30px/1.1 var(--display);margin-top:var(--s4)}
.say p{font-size:var(--t-small);line-height:1.5;margin-top:var(--s3)}
.where{font:500 14px/1.4 var(--label);color:var(--soft)}
.acts2{margin-top:auto;padding:var(--s5) var(--s6) var(--s6);display:grid;gap:var(--s3);border-top:1px solid var(--line)}
.acts2 .row{display:flex;flex-direction:column-reverse;gap:var(--s3)}
.acts2 .err{margin-top:0}
.close{display:none}
.sheet{padding:var(--s6)}
.sheet>p:not(.tag):not(.label){font-size:var(--t-small);line-height:1.5;margin-top:var(--s2)}
.sheet .label{margin-top:var(--s5)}
.sheet .row{display:flex;margin-top:var(--s4)}.sheet .row .btn{flex:1}
.mapview.wait .pinstep,.mapview.pay .pinstep,.mapview.parcel .pinstep,.mapview:not(.wait) .waitstep,.mapview:not(.pay) .paystep,.mapview:not(.parcel) .parcelstep{display:none}
/* the packs: one row each, hairlines between, the whole row is the button */
.packs{margin-top:var(--s4);border-top:2px solid var(--ink)}
.pack{width:100%;min-height:64px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s3);align-items:center;padding:var(--sp10) var(--s2);background:none;border:0;border-bottom:1px solid var(--line);text-align:left;color:var(--ink);cursor:pointer}
.pack:hover{background:var(--card)}
.pack b{font:700 20px/1.2 var(--display)}
.pack span{grid-row:1/3;grid-column:2;font:700 20px/1 var(--label);color:var(--teal)}
.pack em{font:500 14px/1.3 var(--label);font-style:normal;color:var(--soft)}
.pack[disabled]{opacity:.6;cursor:default}
.left{font-size:var(--t-small);line-height:1.5;margin-top:var(--s4)}
.linkish{display:inline;padding:0;background:none;border:0;font:inherit;color:var(--teal);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}
.leaflet-container{font:600 12px var(--label)}
.leaflet-touch .leaflet-bar a,.leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:22px;color:var(--ink)}
.pinicon{display:grid;place-items:center}
.pinicon i{width:22px;height:22px;border-radius:50%;background:var(--teal);border:5px solid #fff;box-shadow:0 0 0 1.5px var(--night),0 2px 8px rgba(0,0,0,.45)}
.mapchip{position:static;display:inline-block;transform:translate(-50%,-50%)}

/* the wait: the rules being applied, marked as each real step finishes */
.log{margin-top:var(--s2);border-top:2px solid var(--ink)}
.log li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s3);align-items:center;padding:var(--sp10) 0;border-bottom:1px solid var(--line)}
.log b{font:600 var(--t-label)/1.2 var(--label);letter-spacing:var(--track);text-transform:uppercase;color:var(--soft)}
.log li>span{grid-column:1;font-size:14.5px;line-height:1.4;color:var(--soft);margin-top:var(--sp2)}
/* the mark at the end of each line: checked, checking (the ring motif, turning), or waiting */
.log em{grid-column:2;grid-row:1/3;position:relative;width:24px;height:24px;display:grid;place-items:center}
.log em span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.log em::before{content:"";width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line)}
.log .done b,.log .done>span{color:var(--ink)}
.log .done em::before{border:0;border-radius:2px;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.4l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain}
.log .now b{color:var(--teal)}.log .now>span{color:var(--ink)}
.log .now em::before{width:20px;height:20px;border:2px dashed var(--teal);animation:turn 2.8s linear infinite}
.log .now em::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--teal)}
@keyframes turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.log .now em::before{animation:none}}

@media (max-width:899px){
.entry{margin:0 calc(-1 * var(--gutter));display:block;border:0;border-radius:0;box-shadow:none;background:none}
.entry .aerial{aspect-ratio:39/19;min-height:0}
.entry .sampletag{left:var(--s3);bottom:var(--s3)}
.entry .ring[style*="1000"]{display:none}
.entry .go{padding:var(--sp20) var(--gutter) var(--s6)}
.entry h1{margin-top:var(--s3)}
.entry form{margin-top:var(--sp20)}
.mapview{display:flex;flex-direction:column}
#map{flex:1;order:1}
.side{display:contents}
.side .bar{display:none}
.say{position:absolute;z-index:500;left:var(--s3);right:var(--s3);top:var(--s3);padding:var(--s3) 52px var(--s3) var(--s4);background:var(--card);border:1px solid var(--ink);border-radius:var(--r);box-shadow:0 10px 24px -14px rgba(14,26,23,.7)}
.say h1{font-size:21px;margin-top:var(--s2)}
.say p{font-size:15px;line-height:1.45;margin-top:var(--sp6)}
.say.shut p{display:none}
.close{display:grid;place-items:center;position:absolute;right:0;top:0;width:48px;height:48px;background:none;border:0;font:500 24px/1 var(--label);color:var(--ink);cursor:pointer}
.acts2{order:2;margin:0;padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--ink);gap:var(--s2)}
.acts2 .row{flex-direction:row;gap:var(--s2)}.acts2 .btn.primary{flex:1}
.sheet{order:2;max-height:72dvh;overflow:auto;padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--ink)}
.sheet h1{font-size:24px;margin-top:var(--s3)}
.sheet .label{margin-top:var(--s4)}
}