/* GeoSnoop, light and plain: white surfaces, near-black text, brand green for the logo and the active control,
     amber only for the answer on the map. One photo in, one answer out; detail on demand. */
  :root {
    --bg: #f5f6f4; --panel: #ffffff; --soft: #f1f3f1; --line: #e2e6e3; --line-2: #cfd5d1;
    --ink: #111a16; --muted: #4c5853; --dim: #7a8580;
    --pine: #07291c; --green: #20703e; --amber: #fdae25; --amber-ink: #a86400; --amber-soft: #fff4dc; --danger: #b42318;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --display: "Outfit", var(--sans); --r: 14px;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
  .app { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; }
  header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--line); }   /* stays on screen (Austin, Oct 17: the button always one click away) */
  #logo { display: block; height: 52px; width: auto; }
  #home { display: block; line-height: 0; border-radius: 8px; }   /* Oct 20 (Austin): the logo goes to the home page */
  #home:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }
  .spacer { flex: 1; }
  .chip { font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; color: var(--muted); border: 1px solid var(--line-2); }
  .chip.mock { color: var(--amber-ink); border-color: #f3c873; background: var(--amber-soft); }
  .chip.off { color: var(--danger); border-color: #f1b0a8; }
  .chip.live { display: none; }
  #newBtn { --btn: var(--green); --pin: var(--amber); display: none; align-items: center; gap: 8px; font: 600 15px/1 var(--sans); color: #fff; background: var(--btn); border: 0; border-radius: 10px; padding: 9px 16px 9px 12px; cursor: pointer; }   /* the icon follows: strokes = text colour, pin hole = --btn */
  #newBtn svg { width: 20px; height: 20px; display: block; flex: none; }
  #newBtn { white-space: nowrap; flex: none; } #newBtn .nbS { display: none; }   /* Oct 27 (Austin): never wraps; phones get the short label */
  @media (max-width: 600px) { #newBtn .nbL { display: none; } #newBtn .nbS { display: inline; } #newBtn { padding: 8px 12px 8px 10px; font-size: 14px; } }
  #newBtn:hover { --btn: var(--pine); }
  body:not(.empty) #newBtn { display: inline-flex; }

  /* before a photo: the drop area and nothing else */
  #start { display: grid; place-items: center; padding: 24px; }
  body:not(.empty) #start { display: none; }
  #drop { width: 100%; border: 2px dashed var(--line-2); border-radius: 20px; background: var(--panel); padding: 60px 28px; text-align: center; cursor: pointer;
          transition: border-color .15s, background .15s; }
  #drop:hover, body.dragging #drop { border-color: var(--green); background: #f3faf5; }
  #dropEmpty > svg { display: block; width: 64px; height: 64px; margin: 0 auto; }
  /* Oct 21 (Austin: "a lot to read"): the button is the drop zone's main element; "or drop them here" only where there is a mouse */
  #drop .pick { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font: 600 19px var(--sans); color: #fff; background: var(--pine); border-radius: 12px; padding: 15px 30px; }
  #drop .pick .upi { width: 21px; height: 21px; flex: none; }
  #drop:hover .pick { background: var(--green); }
  /* Oct 21 (Austin: "copy geoseer.com for desktop"): with a mouse, a big drop area with a large central button and three short lines;
     phones keep the Upload Photo button. Also the landing sits higher on desktop ("it is a bit too low right now"). */
  #drop .deskdrop { display: none; }
  @media (hover: hover) and (pointer: fine) {
    #start { padding-top: 26px; }
    #intro { margin-bottom: 20px; } #intro h1 { margin-bottom: 6px; font-size: 35px; }
    #drop:not(.has) { padding: 64px 28px; min-height: 330px; display: grid; place-items: center; }
    #dropEmpty > svg, #drop .pick, #drop .one { display: none; }
    #drop .deskdrop { display: block; }
    #drop .dbtn { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; color: #fff; background: var(--pine);
                  box-shadow: 0 6px 18px rgba(7, 41, 28, .18); transition: background .15s, transform .15s; }
    #drop .dbtn svg { width: 34px; height: 34px; }
    #drop:hover .dbtn, body.dragging #drop .dbtn { background: var(--green); transform: translateY(-2px); }
    #drop .d1 { font: 600 20px/1.3 var(--sans); color: var(--ink); }
    #drop .d2 { color: var(--muted); font-size: 15px; margin-top: 6px; }
    #drop .d3 { color: var(--dim); font-size: 14px; margin-top: 14px; }
    #drop .d3 b { color: var(--ink); font-weight: 600; }
  }
  #intro { text-align: center; margin-bottom: 22px; }
  #intro h1 { font: 700 30px/1.2 var(--display); color: var(--pine); margin: 0 0 8px; }
  #intro p { color: var(--muted); font-size: 17px; margin: 0; }
  #examples { margin-top: 22px; text-align: center; }
  #examples .lbl { color: var(--muted); font-size: 15px; margin-bottom: 10px; }
  #examples .row { display: flex; gap: 12px; justify-content: center; }
  #examples button { padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--panel); width: 120px; height: 90px; }
  #examples button:hover { border-color: var(--green); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
  #examples img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .startwrap { width: min(760px, 100%); margin: 0 auto; }
  /* what every photo is checked against (Austin, Oct 17): the live library's size, from /api/health */
  #stats { margin-top: 26px; text-align: center; }
  #stats .lbl { color: var(--muted); font-size: 15px; margin-bottom: 12px; }
  #stats .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  #stats .st { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 14px; }
  #stats b { display: block; font: 700 30px/1.1 var(--display); color: var(--pine); }
  #stats .st span { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.35; margin-top: 6px; }
  #drop .one { color: var(--muted); font-size: 15.5px; line-height: 1.45; margin: 14px auto 0; max-width: 470px; text-wrap: balance; }
  #drop .one b { color: var(--ink); font-weight: 600; }
  /* Oct 26 (Austin: "Make these fixes"): what happens to uploads, under the drop box */
  /* How it works (Austin, Oct 21: "a how it works at the bottom ... an image turning into pixels ... popping out with a pin"): the one
     moving thing on the start page. One canvas, ~30 fps, paused off-screen / hidden tab / tray; reduced motion = one still frame. */
  #hiw { margin-top: 26px; text-align: center; }
  #hiw .lbl { color: var(--muted); font-size: 15px; margin-bottom: 12px; }
  #hiw .box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 18px; }
  #hiw canvas { display: block; width: 100%; height: 232px; }
  #hiw ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 12px; counter-reset: hiw; }
  #hiw li { counter-increment: hiw; color: var(--ink); font: 500 15px/1.35 var(--sans); text-wrap: balance; }
  #hiw li::before { content: counter(hiw); display: block; width: 22px; height: 22px; margin: 0 auto 6px; border-radius: 50%; background: #e9f2ec; color: var(--green);
                    font: 700 12.5px/22px var(--display); }
  #hiw li:last-child::before { background: var(--amber-soft); color: var(--amber-ink); }
  @media (max-width: 600px) {
    #hiw .box { padding: 12px 10px 14px; } #hiw canvas { height: 178px; }
    #hiw ol { gap: 6px; margin-top: 10px; } #hiw li { font-size: 13px; line-height: 1.3; } #hiw li::before { margin-bottom: 4px; }
  }

  /* Oct 21 (Austin: "the current UI should just stage the item(s) and have one more button to submit them"): what was picked or
     dropped waits in the tray (photos and videos together, one place); Locate sends it: one photo -> the single path as before,
     more than one photo or any video -> /api/predict_multi */
  #drop.has { padding: 22px; cursor: default; text-align: left; }
  #drop.has:hover { border-color: var(--line-2); background: var(--panel); }
  body.dragging #drop.has { border-color: var(--green); background: #f3faf5; }
  #drop.has #dropEmpty, #drop:not(.has) #tray { display: none; }
  .trayHead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
  .trayTitle { font: 700 22px/1.25 var(--display); color: var(--pine); }
  .traySub { color: var(--muted); font-size: 15px; margin-top: 3px; }
  .traySub b { color: var(--ink); font-weight: 600; }
  #locateBtn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 17px var(--sans); color: #fff; background: var(--green);
               border: 0; border-radius: 10px; padding: 12px 24px; cursor: pointer; }
  #locateBtn svg { width: 22px; height: 22px; display: block; flex: none; }
  #locateBtn:hover { background: var(--pine); }
  #locateBtn:disabled { background: var(--line-2); color: #fff; cursor: default; }
  #locateBtn:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }
  .tmsg { font-size: 14.5px; line-height: 1.4; color: #6b4300; background: var(--amber-soft); border: 1px solid #f3c873; border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; }
  .tmsg.err { color: var(--danger); background: #fdf1ef; border-color: #f1b0a8; }
  #trayGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
  .tile { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
  .tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tile .ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; text-align: center; color: var(--muted); font: 600 13px/1.3 var(--sans); word-break: break-word; }
  .tile .x { position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center;
             background: rgba(255, 255, 255, .94); color: var(--pine); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
  .tile .x svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
  .tile .x:hover { color: var(--danger); }
  .tile .badge { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); font: 600 12px/1.25 var(--sans); color: #fff; background: rgba(7, 41, 28, .8);
                 border-radius: 6px; padding: 2px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile.off img, .tile.off .ph { opacity: .38; }
  .tile.off .badge { background: rgba(122, 133, 128, .95); }
  .tile.bad { border-color: #f1b0a8; } .tile.bad .badge { background: var(--danger); }
  .tile.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--line-2); background: var(--panel);
              color: var(--pine); font: 600 14px var(--sans); cursor: pointer; padding: 0; }
  .tile.add:hover { border-color: var(--green); background: #f3faf5; }
  .tile.add svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  #trayNote { color: var(--muted); font-size: 14px; margin-top: 12px; }
  #trayNote:empty { display: none; }

  /* a photo set or a video: a spinner with the steps (preparing / frames / uploading / locating), not the single photo's scan */
  .loader { display: none; align-items: center; gap: 16px; width: 100%; }
  body.set #answer.wait .loader { display: flex; }
  body.set #answer.wait .wait-msg, body.set #answer.wait .place, body.set #answer.wait .match { display: none; }
  .spinner { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 3.5px solid #dfe7e2; border-top-color: var(--green); animation: gspin .8s linear infinite; }
  @keyframes gspin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
  .lbody { flex: 1; min-width: 0; }
  .lstage { font: 600 18px/1.3 var(--sans); color: var(--ink); }
  .lsub { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
  .lbar { height: 6px; border-radius: 3px; background: var(--soft); overflow: hidden; margin-top: 10px; }
  .lbar i { display: block; height: 100%; width: 0; background: var(--green); border-radius: 3px; transition: width .35s ease-out; }
  #setErr { display: none; width: 100%; }
  #answer.failed #setErr { display: block; }
  #answer.failed .place, #answer.failed .match, #answer.failed .loader { display: none !important; }
  body.set #answer.failed ~ .two, body.set #answer.wait ~ .two { display: none; }   /* nothing to list yet (or at all) for a set */
  #setErr .err { font-size: 19px; font-weight: 600; }
  .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  .btn2 { font: 600 15px var(--sans); border-radius: 10px; padding: 9px 16px; cursor: pointer; border: 1px solid var(--line-2); background: var(--panel); color: var(--pine); }
  .btn2.pri { background: var(--green); border-color: var(--green); color: #fff; }
  .btn2:hover { border-color: var(--pine); } .btn2.pri:hover { background: var(--pine); }
  .btn2.sm { font-size: 14px; padding: 5px 11px; margin: 4px 0 0; }   /* a small action inside a tray message */
  .btn2[hidden] { display: none; }
  /* the consent dialog (Oct 26, Austin): shown after a pick, before anything goes up */
  #consent { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(7, 41, 28, .45); }
  #consent[hidden] { display: none; }
  #consent .cbox { background: var(--panel); border-radius: var(--r); max-width: 520px; width: 100%; max-height: calc(100vh - 32px); overflow: auto; padding: 22px 22px 18px; box-shadow: 0 18px 48px rgba(7, 41, 28, .25); }
  #consent h2 { font: 600 21px/1.25 var(--display); color: var(--pine); margin: 0 0 6px; }
  #consent .csub { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
  #consent .cchk { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; cursor: pointer; }
  #consent .cchk input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--green); }
  #consent .cchk a { color: var(--green); }
  #consent .cnote { color: var(--muted); font-size: 13.5px; line-height: 1.45; margin: 2px 0 0 28px; }
  #consent .cnote.cstore { margin: -4px 0 4px 28px; }
  #consent .cerr { color: var(--danger); font-size: 14px; min-height: 0; margin-top: 8px; }
  #consent .cerr:empty { display: none; }
  #consent .cacts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
  #consent .btn2:disabled { opacity: .5; cursor: not-allowed; }

  /* a set's result: no parts, heatmap or likely area (the endpoint has none for sets); the pictures sent, each marked */
  #setCard, #mixNote { display: none; }
  body.set #setCard { display: block; } body.set #mixNote.on { display: block; }
  body.set #photoCard, body.set:not(.sheat) #tools, body.set:not(.sheat) #key { display: none !important; }   /* .sheat: a set answered with a heat view (rid + region) */
  #mixNote { background: var(--amber-soft); border-color: #f3c873; color: #5c3a00; font-size: 16px; line-height: 1.45; }
  #mixNote b { color: #3d2700; }
  #mixNote .mh { display: flex; align-items: center; gap: 9px; font: 700 18px/1.25 var(--display); color: #7a4a00; margin-bottom: 4px; }
  #mixNote .mh svg { width: 22px; height: 22px; flex: none; }
  #strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .pic { position: relative; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--soft); cursor: pointer; display: block; width: 100%; }
  .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pic .mk { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 2px #fff; }
  .pic .mk svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
  .pic.ag .mk { background: var(--green); } .pic.dis .mk { background: #8a948f; }
  .pic .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 6px 4px; font: 600 11.5px/1.2 var(--sans); color: #fff; text-align: left;
             background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pic.on { border-color: var(--pine); }
  .pic:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
  #stripNote { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.45; min-height: 22px; }
  #stripNote b { color: var(--ink); font-weight: 600; }
  #setEdit { margin-top: 12px; }
  .ipin { width: 24px; height: 24px; border-radius: 50%; background: var(--pine); color: #fff; font: 700 12px/24px var(--sans); text-align: center; border: 2px solid #fff;
          box-shadow: 0 1px 5px rgba(0, 0, 0, .35); pointer-events: none; }
  ol.list li.none { color: var(--muted); font-size: 14.5px; font-weight: 400; }

  /* after a photo: the analysis on the left, the map on the right */
  #result { display: none; grid-template-columns: minmax(440px, 46%) 1fr; gap: 18px; padding: 18px; min-height: 0; align-items: start; }
  body:not(.empty) #result { display: grid; }
  #side { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
  .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
  .h { font: 600 13px/1 var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 12px; }

  #answer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
  #answer .place { font: 700 36px/1.1 var(--display); color: var(--pine); display: flex; align-items: center; flex-wrap: wrap; min-width: 0; cursor: default; }
  #answer .place .fi { width: 40px; height: 30px; border-radius: 3px; margin-right: 14px; }
  #answer .match { text-align: right; flex: none; cursor: help; }
  #answer .match b { display: block; font: 700 40px/1 var(--display); color: var(--green); }
  #answer .match span { display: block; font: 600 14px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
  #answer.wait .place, #answer.wait .match { visibility: hidden; }
  #answer .wait-msg { display: none; color: var(--muted); font-size: 17px; } #answer.wait .wait-msg { display: block; }
  /* Oct 26 (Austin: "Make these fixes"): "Unknown Location" + a (?) that says why; a no-location answer has no lists, area or heatmap */
  #answer { position: relative; }
  #answer .qm { flex: none; width: 26px; height: 26px; margin-left: 12px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--panel);
                color: var(--muted); font: 700 15px/1 var(--sans); cursor: pointer; }
  #answer .qm:hover, #answer .qm[aria-expanded="true"] { border-color: var(--pine); color: var(--pine); }
  #answer .qtip { display: none; position: absolute; left: 20px; right: 20px; top: calc(100% - 8px); z-index: 6; background: var(--panel); border: 1px solid var(--line-2);
                  border-radius: 10px; padding: 10px 13px; font: 400 15px/1.45 var(--sans); color: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
  #answer .qtip.open { display: block; }
  body.noloc .two, body.noloc #tools, body.noloc #key { display: none !important; }

  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  ol.list { list-style: none; margin: 0; padding: 0; }
  ol.list li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 16px; }
  ol.list li:first-child { border-top: 0; }
  ol.list .n { color: var(--muted); font-variant-numeric: tabular-nums; }
  ol.list li:first-child, ol.list li:first-child .n { font-weight: 500; color: var(--ink); }   /* the top match, a touch heavier */
  .fi { margin-right: .28em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }   /* about half a space to the name */
  /* the exact spot (Austin, Oct 17): under the top city when it is >= 60% and the spot (within 1 km) >= 70%; click: the map goes there */
  ol.list li.exact { border-top: 0; padding: 0 0 8px; font-size: 15px; font-weight: 500; color: var(--green); cursor: pointer; }
  ol.list li.exact .n { color: var(--green); }
  ol.list li.exact:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
  .xh { width: 17px; height: 17px; vertical-align: -3px; margin: 0 .35em 0 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .xh .dot { fill: currentColor; stroke: none; }
  /* the exact spot in Google Maps (Austin, Oct 17: "let's just link to the point on Google maps"): a small new-tab icon after "Exact spot" */
  a.sv { display: inline-flex; margin-left: .45em; color: var(--muted); vertical-align: -2px; }
  a.sv:hover { color: var(--pine); }
  a.sv svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .xpin { width: 38px; height: 38px; color: var(--pine); pointer-events: none; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff); }
  .xpin .xh { width: 100%; height: 100%; margin: 0; vertical-align: 0; stroke-width: 1.6; }
  /* a city's spots (Austin, Oct 20: "When we click a city can it show the exact match location within it that are > 2% with a link to
     the Google maps spot? So it's like a little expand action"): a chevron on cities that have spots; tap: the list opens under it */
  ol.list li.city.has { cursor: pointer; }
  ol.list li.city.has:hover span:first-child .cn { text-decoration: underline; text-underline-offset: 3px; }
  .chev { display: inline-block; width: 7px; height: 7px; margin: 0 2px 3px 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
  li.city.open .chev { transform: rotate(-135deg); margin-bottom: -1px; }
  ol.list li.spots { display: block; padding: 0 0 6px; border-top: 0; }
  ol.list li.spots[hidden] { display: none; }
  ol.list li.spots ol { list-style: none; margin: 0; padding: 0; }
  ol.list li.spot, ol.list li.spot:first-child { padding: 5px 0 5px 4px; border-top: 0; font-size: 14px; font-weight: 400; color: var(--green); cursor: pointer; }
  ol.list li.spot .n, ol.list li.spot:first-child .n { color: var(--green); font-weight: 400; }
  ol.list li.spot:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
  .spin { width: 30px; height: 30px; color: var(--green); pointer-events: none; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff); }
  .spin .xh { width: 100%; height: 100%; margin: 0; vertical-align: 0; stroke-width: 1.6; }

  .stage { display: flex; justify-content: center; }   /* portrait photos stand tall and centred */
  #photoWrap { position: relative; width: fit-content; max-width: 100%; }
  #photo { display: block; max-width: 100%; max-height: 440px; width: auto; height: auto; border-radius: 8px; }
  #parts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 12px !important; }
  #photoCard.portrait .pbody { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
  #photoCard.portrait #photo { max-height: 520px; }
  #photoCard.portrait #parts { grid-template-columns: 1fr; margin-top: 0 !important; }
  #overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 10px; }
  #hit { position: absolute; inset: 0; cursor: crosshair; }
  /* while the photo is located (Austin, Oct 17): a laser sweeps the photo, then each of its parts, until the answer is in */
  #scan { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 8px; transition: opacity .15s; }
  /* Oct 20 (Austin): the photo's own metadata behind an (i), and its GPS as a separate map point; never used by the engine */
  #infoBtn { position: absolute; top: 8px; right: 8px; z-index: 6; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
             background: rgba(255, 255, 255, .92); color: var(--pine); font: 700 16px/30px var(--display); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
  #infoBtn[hidden] { display: none; }

  /* Oct 21 (Austin): right-click / long-press on the map -> a small menu: open Google Maps there, or copy the coordinates (the only place they are ever shown) */
  #ctxMenu { position: fixed; z-index: 50; display: none; min-width: 190px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
             box-shadow: 0 4px 16px rgba(0, 0, 0, .18); font: 500 14px/1.2 var(--sans); color: var(--ink); -webkit-user-select: none; user-select: none; }
  #ctxMenu.open { display: block; }
  #ctxMenu .ci { display: block; width: 100%; box-sizing: border-box; text-align: left; font: inherit; color: inherit; text-decoration: none; background: none; border: 0;
                 border-radius: 8px; padding: 10px 12px; cursor: pointer; }
  #ctxMenu .ci:hover, #ctxMenu .ci:focus-visible { background: var(--soft); outline: none; }
  #ctxMenu .ci.done { color: var(--green); font-weight: 600; }
  #map, #map canvas { -webkit-touch-callout: none; }
  #infoPop { position: absolute; top: 44px; right: 8px; z-index: 7; width: min(340px, calc(100% - 16px)); max-height: 360px; overflow: auto; display: none;
             background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); padding: 12px 14px; font-size: 13px; }
  #infoPop.open { display: block; }
  #infoPop .inote { color: var(--muted); margin-bottom: 8px; line-height: 1.4; }
  #infoPop table { width: 100%; border-collapse: collapse; }
  #infoPop td { padding: 3px 0; vertical-align: top; border-top: 1px solid var(--line); }
  #infoPop td:first-child { color: var(--muted); padding-right: 10px; white-space: nowrap; } #infoPop td:last-child { word-break: break-word; }
  #infoPop .ilink { border: 0; background: none; padding: 0 0 8px; color: var(--green); font: 600 13px var(--sans); cursor: pointer; text-align: left; }
  .gpin { display: flex; align-items: center; gap: 5px; cursor: pointer; }
  .gpin .gdot { width: 14px; height: 14px; border-radius: 50%; background: #1971c2; border: 3px solid #fff; box-shadow: 0 0 0 1.5px #0b3d75, 0 2px 6px rgba(0, 0, 0, .25); }
  .gpin .glab { font: 600 12px var(--sans); color: #0b3d75; background: rgba(255, 255, 255, .9); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
  #scan.done { opacity: 0; }
  #parts { list-style: none; margin: 0; padding: 0; }
  #parts li { padding: 5px 10px; border-radius: 10px; cursor: default; border: 1px solid transparent; }
  #parts li:hover, #parts li.on { background: var(--amber-soft); border-color: #f3c873; }
  #parts .top { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
  #parts .top span:first-child::first-letter { text-transform: uppercase; }
  #parts .bar { height: 5px; border-radius: 3px; background: var(--amber); margin: 4px 0 2px; }
  #parts .why { color: var(--muted); font-size: 14.5px; }
  #partsNote { color: var(--dim); font-size: 14px; margin-top: 10px; }

  #mapPanel { position: sticky; top: calc(var(--hdrH, 64px) + 18px); height: calc(100vh - var(--hdrH, 64px) - 41px); border-radius: var(--r); overflow: hidden; clip-path: inset(0 round var(--r)); isolation: isolate; border: 1px solid var(--line); background: #eef0ee; min-height: 480px; }  /* stays in view while the analysis scrolls */
  #map { position: absolute; inset: 0; }
  #tools { position: absolute; z-index: 3; top: 14px; left: 14px; display: flex; gap: 10px; align-items: center; }
  .seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
  .seg button { border: 0; background: transparent; padding: 9px 16px; font: 600 15px var(--sans); color: var(--muted); cursor: pointer; }
  .seg button.on { background: var(--pine); color: #fff; }
  #legend { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px; font-size: 15px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
  #key { position: absolute; z-index: 3; left: 14px; bottom: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; width: 280px; display: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
  #key .bar2 { height: 10px; border-radius: 5px; } #key .ticks { display: flex; justify-content: space-between; color: var(--muted); font-size: 13.5px; margin-top: 5px; }
  .pin { width: 18px; height: 18px; border-radius: 50%; background: var(--amber); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--amber-ink), 0 2px 8px rgba(0, 0, 0, .25); }
  .busy { color: var(--amber-ink); font-weight: 600; } .err { color: var(--danger); }
  .maplibregl-ctrl-attrib { font-size: 11px; }

  @media (max-width: 1000px) {
    #result { grid-template-columns: 1fr; padding: 12px; } #mapPanel { position: relative; top: 0; height: 56vh; order: -1; }
    body.setwait #mapPanel { display: none; }   /* a set being prepared on a phone: the steps first, the map once there is an answer */
    #parts { grid-template-columns: 1fr; } header { padding: 10px 16px; } #logo { height: 40px; } #examples button { width: 22vw; height: 17vw; }
    .two { grid-template-columns: 1fr; } #stats .row { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {   /* narrow phones (Austin, Oct 20): flag beside the name, the name fitted to one line (fitName) */
    #answer { gap: 12px; } #answer .place { font-size: 30px; flex-wrap: nowrap; }
    #answer .place .fi { width: 32px; height: 24px; margin-right: 10px; flex: none; } #answer .place .nm { min-width: 0; }
    #answer .match b { font-size: 34px; }
    #start { padding: 16px; } #drop { padding: 40px 18px; } #drop.has { padding: 14px; }
    #intro h1 { font-size: 26px; } #intro p { font-size: 16px; }
    .trayHead { flex-wrap: wrap; } #locateBtn { width: 100%; }
    #trayGrid { grid-template-columns: repeat(3, 1fr); gap: 8px; } #strip { grid-template-columns: repeat(3, 1fr); }
    .tile .badge { left: 4px; bottom: 4px; max-width: calc(100% - 8px); font-size: 11px; padding: 2px 5px; white-space: normal; }
  }


  .pic .frs { position: absolute; inset: 0; }
  .pic .frs img { position: absolute; inset: 0; opacity: 0; }
  .pic .frs img.on { opacity: 1; }
  .pic .play { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: rgba(17, 26, 22, .55); color: #fff;
               display: grid; place-items: center; pointer-events: none; }
  .pic .play svg { width: 8px; height: 8px; margin-left: 1px; }