/* Crophalo: the setup wizard's look. It only uses the tokens and classes of css/app.css and never restates a token value. */
#view-setup { padding: 0; }
.setup { display: grid; grid-template-columns: minmax(340px, 30%) minmax(0, 1fr); align-items: stretch; gap: 0; max-width: none; margin: 0; padding: 0; }   /* the map takes all the room the steps do not need, edge to edge */
.panel { min-width: 0; display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-16) var(--space-16) 0; border-radius: 0; background: var(--card); box-shadow: 1px 0 0 var(--sep); }
.mapcol { min-height: 420px; border-radius: 0; background: var(--map-ph); position: sticky; top: var(--navh); height: calc(100dvh / var(--tz) - var(--navh)); }
.panel-name { font-size: var(--fs-title2); }
.panel-place { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-8); margin-top: var(--space-4); color: var(--ink2); font-size: var(--fs-small); }
.wh { font-size: 26px; }
.sub { margin-top: var(--space-8); font-size: var(--fs-headline); }
.q { margin: var(--space-12) 0 var(--space-8); font-size: var(--fs-row); font-weight: var(--fw-semi); }

/* step bar: one equal tile per step; a done step shows a tick, the current one a ring, steps far ahead are off */
.wsteps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wstep { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; min-height: 64px; padding: 10px 4px 8px; border: 0; border-radius: var(--r2); background: var(--fill2); color: var(--ink2); font-size: 12.5px; font-weight: var(--fw-semi); line-height: 1.2; text-align: center; overflow-wrap: anywhere; cursor: pointer; }
.wstep:disabled { opacity: .45; cursor: default; }
.wnum { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fill); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.wstep.done .wnum { background: var(--good-soft); color: var(--good); }
.wstep.now { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent); }
.wstep.now .wnum { background: var(--card); color: var(--accent-text); }
.wnum .ic { width: 14px; height: 14px; }
@media (max-width: 380px) { .wstep { font-size: 12px; } }
.listen-row { margin: 0; }

.wbody { display: grid; gap: var(--space-12); align-content: start; }
.tile { min-height: 84px; }
.tile small { display: block; font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--ink2); }
.tile .pic { width: 40px; height: 40px; }
.tile:has(input:checked) small { color: inherit; }
.tiles3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tiles4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tiles3.big .tile { min-height: 96px; }
@media (max-width: 420px) { .tile small { display: none; } .tiles4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .tiles3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.soilcard { display: grid; gap: 4px; padding: var(--space-12); border-radius: var(--r2); background: var(--card2); box-shadow: inset 0 0 0 .5px var(--sep); }

.wheel { padding: var(--space-12); border-radius: var(--r2); background: var(--card2); box-shadow: inset 0 0 0 .5px var(--sep); text-align: center; }
.wheel-name { font-size: var(--fs-headline); font-weight: var(--fw-semi); }
.rcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-8); }
.rcards.compact { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.rcards.own { grid-template-columns: 1fr; margin-top: var(--space-12); }
.rcard { position: relative; align-items: flex-start; justify-content: flex-start; text-align: left; min-height: 56px; gap: var(--space-4); padding: var(--space-12) 44px var(--space-12) var(--space-12); transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.rcard.rbig { min-height: 96px; }
.rcard.own { align-items: flex-start; }
.rcard small { font-weight: var(--fw-regular); color: var(--ink2); font-size: max(12px, var(--fs-caption)); }
.rcard .rc-source { font-size: var(--fs-caption); }
.rc-tag { font-size: var(--fs-caption); font-weight: var(--fw-semi); color: var(--accent-text); }
.rc-suggest { margin-bottom: var(--space-12); } .rc-suggest .rcard { width: 100%; }
.rc-helper { margin: 0 0 var(--space-12); color: var(--ink2); }
.rc-msg { margin: 0 0 var(--space-12); padding: var(--space-12); border-radius: var(--r2); background: var(--card2); box-shadow: inset 0 0 0 .5px var(--sep); }
.rc-wait { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-12); border-radius: var(--r2); background: var(--card2); box-shadow: inset 0 0 0 .5px var(--sep); }
.rc-bar { display: block; height: 4px; width: 60%; border-radius: 2px; background: var(--sep); }
.rc-check { position: absolute; top: var(--space-12); right: var(--space-12); width: 24px; height: 24px; padding: 3px; border-radius: 50%; background: var(--accent); stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; opacity: 0; }
.rc-check { transition: opacity .15s linear; }   /* Full and Less: the check fades in; Full also draws it */
.rcard:has(input:checked) .rc-check { opacity: 1; }
.rcard:has(input:checked) .rc-check path { stroke-dasharray: 20; stroke-dashoffset: 0; animation: rc-draw .22s ease-out both; }
.yearlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.rc-preview { margin: var(--space-12) 0 var(--space-4); font-weight: var(--fw-semi); }
@keyframes rc-draw { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
@keyframes rc-wait { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
html:not([data-motion]) .rc-bar, html[data-motion=""] .rc-bar { animation: rc-wait 1.8s ease-in-out infinite; }
/* Less: a short fade, no drawing, nothing that loops. Still: nothing moves. */
html[data-motion=less] .rcard:has(input:checked) .rc-check path { animation: none; }
html[data-motion=reduce] .rcard, html[data-motion=reduce] .rc-check, html[data-motion=reduce] .rc-check path, html[data-motion=reduce] .rc-bar { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .rcard, .rc-check, .rc-check path, .rc-bar { animation: none !important; transition: none !important; } }
.rc-row .croprow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.croprow-crop { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-row); }
.croprow .pic, .chipc .pic { width: 28px; height: 28px; }
.croprow-next { color: var(--ink2); }
.chipsc { display: flex; flex-wrap: wrap; gap: 8px; }
.chipc { flex-direction: row; gap: 6px; padding: 6px 12px; min-height: var(--touch); }
.years { display: grid; gap: 8px; }
.year { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.year-n { font-size: var(--fs-row); font-weight: var(--fw-semi); min-width: 52px; }
.year select { min-height: var(--touch); }

.fold-card { border-radius: var(--r2); background: var(--card2); box-shadow: inset 0 0 0 .5px var(--sep); }
.fold-card > summary { display: flex; align-items: center; gap: var(--space-12); min-height: 52px; padding: 10px 14px; font-weight: var(--fw-semi); list-style: none; cursor: pointer; }
.fold-card > summary::-webkit-details-marker { display: none; }
.fold-card > summary::after { content: ""; margin-left: auto; width: 16px; height: 16px; background: var(--ink2); clip-path: polygon(29% 31.6%, 50% 52.7%, 71% 31.6%, 79% 39.6%, 50% 68.6%, 21% 39.6%); transition: transform .2s var(--ease); }
.fold-card[open] > summary::after { transform: rotate(180deg); }
.fold-card > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fold-card .fold-b { display: grid; gap: var(--space-8); padding: 2px 14px 14px; font-size: var(--fs-row); }
.coords { display: flex; align-items: end; gap: var(--space-8); }
.coords .field { flex: 1 1 auto; } .coords input { min-height: var(--touch); }
.plinks { margin: 0; padding-left: 1.2em; }

/* the sticky bar: Back and Next, 50 px tall, the note under them; it bleeds to the panel edges */
.cta { position: sticky; bottom: 0; z-index: var(--z-bar); display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); margin: 0 calc(-1 * var(--space-16)); padding: var(--space-12) var(--space-16) calc(var(--space-12) + env(safe-area-inset-bottom, 0px)); background: var(--card); box-shadow: 0 -.5px 0 var(--sep), 0 -8px 20px rgba(0,0,0,.05); border-radius: 0 0 var(--r1) var(--r1); }
.cta .btn.lg { min-height: 50px; height: auto; min-width: 0; padding-inline: var(--space-12); white-space: normal; }   /* at 320 px with the largest text the words wrap onto two lines, never past the edge */
.cta-note { grid-column: 1 / -1; min-height: 1.2em; margin: 0; text-align: center; }
@media (max-height: 560px) { .cta { position: static; } }

@media (max-width: 860px) {
  .setup { grid-template-columns: minmax(0, 1fr); }
  .mapcol { position: static; order: -1; height: 46vh; min-height: 260px; }
  .setup[data-step=field] .mapcol { height: max(60svh, 320px); }   /* the field step is the map's step: room to see the field and draw it with a thumb */
  .setup:not([data-step=field]) .mapcol { height: 18vh; min-height: 120px; }   /* once the field is chosen the questions come first: the map is a strip that only shows the field */
  .panel { padding: var(--space-12) var(--space-12) 0; } .cta { margin: 0 calc(-1 * var(--space-12)); padding-left: var(--space-12); padding-right: var(--space-12); }
}
@media (forced-colors: active) { .panel, .fold-card, .soilcard, .wheel { border: 1px solid CanvasText; } .wstep.now { outline: 2px solid Highlight; } }


/* the crop chooser: a button for the chosen crop, a panel under it */
.year { position: relative; }
.pk-btn { display: flex; align-items: center; gap: var(--space-8); min-width: 0; min-height: var(--touch); padding: 4px 10px; border: 0; border-radius: var(--r3); background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ctl); font-size: var(--fs-field); text-align: left; cursor: pointer; }
.pk-btn .pic { width: 28px; height: 28px; flex: none; }
.pk-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-btn[aria-expanded=true] { box-shadow: inset 0 0 0 2px var(--accent); }
.pk-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-pop); display: grid; gap: var(--space-8); max-height: min(560px, 70vh); padding: var(--space-8); border-radius: var(--r1); background: var(--card); box-shadow: var(--shadow-lg); overflow: hidden; animation: drop .16s var(--ease) both; }
.pk-search { width: 100%; min-height: var(--touch); }
.pk-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.pk-tabs .chip { flex: none; }
.pk-list { margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.pk-row { display: flex; align-items: center; gap: var(--space-12); width: 100%; min-height: var(--touch); padding: 4px var(--space-12); border: 0; border-radius: var(--r2); background: none; color: var(--ink); font-size: var(--fs-row); text-align: left; cursor: pointer; }
.pk-row .pic { width: 28px; height: 28px; flex: none; }
.pk-row[aria-current=true] { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--fw-semi); }
.pk-none { padding: var(--space-12); }
@media (hover: hover) and (pointer: fine) { .pk-row:hover:not([aria-current=true]) { background: var(--fill2); } }
@media (max-width: 420px) { .pk-panel { position: fixed; left: var(--space-8); right: var(--space-8); top: auto; bottom: var(--space-8); max-height: 75vh; } }

/* a parcel link is a list row on a phone: 44 px to hit */
.plinks { list-style: none; padding: 0; display: grid; gap: 2px; }
.plinks a { display: flex; align-items: center; min-height: var(--touch); }

/* the sentence that stands in for the map is for the moment before it loads: once the map is in its place the sentence is gone */
.panel:has(+ .mapcol > *) #mapSlot { display: none; }
/* the steps column is a third of the screen at most, the map takes the rest; the step chips line their numbers up and let long labels wrap below */
@media (min-width: 861px) { .setup { grid-template-columns: clamp(340px, 30%, 460px) minmax(0, 1fr); } .panel { min-height: calc(100dvh / var(--tz) - var(--navh)); } }
.wsteps { align-items: stretch; }
.wstep { hyphens: manual; overflow-wrap: break-word; }
.cta { margin-top: auto; }   /* the bar rests at the bottom of the column, not under the last question */

/* the demo block of step 1: its sentence and its button never touch */
.demo-ready { display: grid; gap: var(--space-8); justify-items: start; margin: 0 0 var(--space-12); }
.demo-ready p { margin: 0; }
/* the soil-test boxes: a gap between one box and the next, in a row and between rows */
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); margin: 0 0 var(--space-12); }
@media (max-width: 420px) { .st-grid { grid-template-columns: minmax(0, 1fr); } }

/* the cards of a row start at the same height: the titles sit on one line whatever the small words under them (Rainfed, Limited irrigation, Irrigated as needed) */
.tiles3 .tile, .tiles4 .tile { justify-content: flex-start; }

/* ---- the area block under "Your field" (js/areablock.js) and the grey skeletons (js/skeleton.js) */
.area-host:empty { display: none; }
.ab { display: grid; gap: var(--space-4); padding: var(--space-12); border-radius: var(--r2); background: var(--card2); box-shadow: inset 0 0 0 .5px var(--sep); }
.ab p { margin: 0; }
.ab .spot-big { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ab .spot-second { color: var(--ink2); }
.ab-fig { margin: var(--space-8) 0 0; max-width: 240px; }
.sk-block { display: block; } .sk-lines { display: grid; gap: 10px; padding: var(--space-4) 0; }