/* =====================================================================
   The food map — eds' pickles (Loop 1a)
   Extends ../assets/gui.css + ../assets/jar.css (the eds' pickles skin).
   Chip classes below implement the SAME normalized badge vocabulary as
   edspickle.shop so a chip means the same thing on both surfaces
   (see assets/badges.js).

   GUI pass (issue #41, GUI.md) — the module carries the yardstick:
     one paper surface, one interactive accent, pills no panels,
     hairline rules, a dark greeting band. Semantic colors stay legal
     here because this surface has good/warn/bad to carry.
   ===================================================================== */

:root {
  /* paper + ink, same tokens as the front door (assets/gui.css) */
  --paper: #fffefb;
  --ink: #101a2b;
  --muted: #5a6577;
  --line: #e6e1d8;
  /* the ONE interactive accent on this surface */
  --accent: #0e7490;
  --accent-deep: #0a596f;
  /* dark greeting band */
  --band: #0c1a2b;
  --band-2: #10222f;
  --band-ink: #eef4f7;
  --band-muted: #b6c6ce;
  /* jar.css aliases carried here so this sheet stands alone */
  --brand: var(--accent);
  --brand-deep: var(--accent-deep);
  --bg: var(--paper);
  --radius-sm: 10px;
}

body { background: var(--paper); }
a { text-decoration: none; }
main.wrap { max-width: 74rem; }
header.food-band .wrap { max-width: 74rem; }
.app-foot { border-top: 1px solid var(--line); }

/* ---------- dark greeting band ---------- */
.food-band { padding-bottom: clamp(2rem, 6vw, 3.5rem); }
.food-band .greeting { font-size: clamp(2.05rem, 6.5vw, 3.4rem); max-width: 26ch; }
.band-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.8rem;
}
.food-band .brand { margin: 0; }
.band-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.band-links a {
  color: var(--band-muted); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.band-links a:hover { color: var(--band-ink); }

/* ---------- the sticky find-strip: one paper band, hairline rules ---------- */
.find-strip {
  position: sticky; top: 0; z-index: 900;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0 1rem; margin-bottom: 1.6rem;
}
.find-strip .rule { margin-bottom: .8rem; }
.find-strip .rule.scope { margin-top: 1.3rem; }
.strip-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* the location pill — the no-permission ladder, one friendly control.
   One tap runs the ladder again; its label is always the current rung. */
.loc-pill {
  appearance: none; border: 0; cursor: pointer;
  background: var(--accent); color: #fff;
  border-radius: 10px; padding: .55rem 1.35rem;
  font-size: var(--fs-lg); font-weight: 700; line-height: 1.2;
  min-height: var(--tap-min);
  display: inline-flex; align-items: center; gap: .6rem;
  box-shadow: 0 1px 8px rgb(14 116 144 / .28);
  transition: background .15s ease, transform .15s ease;
}
.loc-pill:hover { background: var(--accent-deep); }
.loc-pill:active { transform: scale(.99); }
.loc-pill .loc-ico { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

.pill-input, .pill-select {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink);
  padding: .6rem 1.1rem; font-size: var(--fs-base);
  min-height: var(--tap-min);
}
.pill-input:focus, .pill-select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(14 116 144 / .16);
}
.pill-select { flex: 1 1 10rem; max-width: 15rem; color: var(--ink); }

/* the field-guide overlay toggle (places PR-B): a checkbox pill, default off */
.guide-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink);
  padding: .6rem 1.1rem; font-size: var(--fs-base);
  font-weight: 700; min-height: var(--tap-min);
  cursor: pointer; flex-shrink: 0;
}
.guide-toggle input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.guide-toggle:has(input:checked) { border-color: var(--accent); color: var(--accent); }

.strip-meta {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: .85rem 0 0; font-size: .85rem; color: var(--muted);
}
.strip-meta .sep { opacity: .6; }
.find-strip .note { margin-top: .6rem; }

/* "grant location access": shown only while the fix is imprecise
   (network / timezone / city / none) — a one-tap ask for the real position */
.grant-row{
  display:flex; align-items:center; justify-content:center;
  gap:.6rem; flex-wrap:wrap; margin:.6rem 0 0;
}
.grant-row[hidden]{ display:none; }
.grant-link{
  appearance:none; border:0; background:transparent; cursor:pointer;
  color:var(--accent); font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; gap:.4rem;
}
.grant-link:hover{ text-decoration:underline; color:var(--accent-deep); }
.grant-note{ color:var(--muted); font-size:.8rem; }

/* ---------- ink-only action buttons (the one accent is the pill) ---------- */
.btn-ink {
  background: var(--bg); border: 1px solid var(--ink); color: var(--ink);
  border-radius: 10px; font-weight: 700; min-height: var(--tap-min);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.btn-ink:hover { border-color: var(--accent); color: var(--accent); background: var(--paper); }

.chip{
  font-weight:700;border-radius: 10px;padding:.25em .7em;font-size:.78rem;
  display:inline-flex;align-items:center;gap:.3em;
  border:1px solid var(--line);color:var(--muted);background: var(--bg);
}
.chip.on{color:var(--good);border-color:var(--good);background:var(--good-soft);}
.chip.warm{color:var(--warm);border-color:var(--warm);background:var(--warm-soft);}
.chip.brand{color:var(--ink);border-color:var(--ink);background:var(--paper);}
.bge-warm{background:var(--warm-soft);color:var(--warm);}

/* map grid / stub styles */
.leaflet-container{background:#eef2f6;}
.food-grid{stroke:#0e7490;stroke-width:1;fill-opacity:.28;cursor:pointer;}
.food-grid:hover{stroke-width:2;fill-opacity:.5;}

/* ---------- the map surface (desktop: a fixed-height paper sheet) ---------- */
#mapWrap{ position: relative; }
#map{
  height:52vh; min-height:340px;
  border:1px solid var(--line); border-radius:20px; z-index:1;
}

/* ---------- the results sheet (desktop: plain flow, no drawer) ---------- */
#resultsSheet{ border:0; box-shadow:none; background:transparent; }
#resultsSheet > #jarSeam{ margin-top:1.25rem; }
.sheet-grip{ display:none; }

/* the Scope disclosure toggle (mobile-only control; hidden on wide screens) */
.scope-toggle{ display:none; }

/* a single food row — pill list, not panels */
.food-card{border:1px solid var(--line);border-radius:22px;background:var(--paper);}
.food-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.food-head h3{font-size:1.12rem;font-weight:800;letter-spacing:-.02em;margin:0;}
.food-note{color:var(--muted);font-size:.95rem;}
.food-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.food-actions{display:flex;flex-wrap:wrap;gap:8px;}
.food-seam{border:1px dashed var(--line);border-radius:var(--radius-sm);background:var(--wash);}

/* empty list — a dashed pill, honest "nothing yet" */
.empty-pill{
  border:1px dashed var(--line); border-radius: 10px;
  padding:1.3rem 1.6rem; text-align:center; background:var(--paper);
}

/* the fold modal — paper leaf inside a hairline frame */
.modal-content{ border:1px solid var(--line); }
.modal-header{ border-bottom:1px solid var(--line); }
.modal-footer{ border-top:1px solid var(--line); }

/* ---- the fold card (PR-A) : a paper strip, you on top, destination below ---- */
#foldDialog .modal-body{overflow-y:auto;}
.fold-paper{
  --fold:var(--brand);
  position:relative;margin:0 auto;max-width:20rem;
  background:linear-gradient(180deg,var(--brand-soft),#fff 38%);
  border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:1.2rem 1.4rem 1.6rem;
}
.fold-paper::before,.fold-paper::after{
  content:"";position:absolute;left:12px;right:12px;height:14px;
  border-top:2px dashed color-mix(in srgb,var(--brand) 55%,transparent);
  border-radius:50%;
}
.fold-paper::before{top:52px;}
.fold-paper::after{bottom:52px;}
.fold-crease{
  display:flex;flex-direction:column;align-items:center;gap:2px;margin:.4rem 0;
  font-size:.72rem;font-weight:700;color:var(--muted);
}
.fold-crease .fold-line{width:2px;height:2.2rem;background:var(--brand);border-radius:2px;}
.fold-crease .fold-line.turn{background:repeating-linear-gradient(0deg,var(--brand) 0 5px,#fff 5px 9px);}
.fold-user,.fold-dest{
  display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-size:.95rem;
}
.fold-user{color:var(--brand-deep);}
.fold-dest{color:var(--good);}
.fold-user .dot,.fold-dest .dot{
  width:.7rem;height:.7rem;border-radius:50%;
}
.fold-user .dot{background:var(--brand);}
.fold-dest .dot{background:var(--good);}
.fold-row{
  display:flex;justify-content:space-between;gap:8px;font-size:.85rem;color:var(--muted);
  padding:.35rem 0;border-top:2px solid var(--wash);
}
.fold-row:last-of-type{border-top:0;}
.fold-row strong{color:var(--ink);font-weight:700;}

/* =====================================================================
   Mobile: the food map is one phone screen, not a scroll.
   The dark band and the pill strip slim down, the map takes every
   remaining pixel, and the results live in a paper drawer that sits at
   the bottom of the map instead of pushing it off-screen.
   (Owner directive 2026-09-12: "the user should not be scrolling if we
   can avoid it.") Desktop behavior above is untouched — this block only
   tightens what a small screen genuinely needs.
   ===================================================================== */

@media (max-width: 48rem){

  /* the brand bar + pill strip — slim, one line of truth */
  header.food-band{ padding:.9rem 0 1.05rem; }
  .food-band .band-top{ margin-bottom:.35rem; }
  .food-band .band-links{ display:none; }          /* sibling tools surrender their row */
  .food-band .greeting{
    font-size:clamp(1.35rem,5.4vw,1.85rem); letter-spacing:-.02em;
    margin:.05rem 0 .15rem; max-width:none;
  }
  .food-band .lede{ display:none; }                 /* the lede lives behind the map now */
  main.wrap{ max-width:none; }

  .find-strip{ position:relative; padding:.6rem 0 .7rem; margin-bottom:.5rem; }
  .find-strip .rule{ display:none; }                /* hairline rules fold into the pill row */
  .strip-row{ gap:.5rem; }
  .loc-pill{
    padding:.45rem 1.1rem; font-size:.95rem; min-height:44px; max-width:46vw;
  }
  .loc-pill span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  .pill-input,.pill-select{ min-height:44px; padding:.5rem .95rem; font-size:.95rem; }
  .pill-input{ flex:1 1 auto !important; min-width:0; }
  .pill-select{ flex:1 1 7rem; max-width:none; }
  .strip-meta{ display:none; }                      /* the count moved into the drawer grip */
  .find-strip .note{ margin-top:.4rem; }

  /* the Scope disclosure: filters ride behind one tap (progressive disclosure) */
  .scope-toggle{
    display:inline-flex; align-items:center; gap:.35rem;
    appearance:none; cursor:pointer; border:1px solid var(--ink);
    background: var(--bg); color:var(--ink); border-radius: 10px;
    padding:.5rem .95rem; min-height:44px; font-size:.95rem; font-weight:700; line-height:1.2;
    flex-shrink:0;
  }
  .scope-chev{ width:.78rem; height:.78rem; transition:transform .2s ease; }
  #findStrip.open .scope-toggle{ border-color:var(--accent); color:var(--accent); }
  #findStrip.open .scope-chev{ transform:rotate(180deg); }
  #scopeRow{ display:none; }
  #findStrip.open #scopeRow{ display:flex; }

  #sortNote{ display:none; }

  /* the page is one phone screen — locked to 100dvh, no page scroll.
     Leaflet sets an inline position:relative on its container, so the map
     fills its wrapper by height instead of absolute-inset positioning. */
  body{
    height:100vh; height:100dvh;
    display:flex; flex-direction:column; overflow:hidden;
  }
  main.wrap{
    flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
    overflow:hidden; padding-bottom:0;
  }
  #mapWrap{ flex:1 1 auto; min-height:0; position:relative; }
  #map{ height:100% !important; min-height:0; border-radius:16px; }

  /* the results drawer: a paper sheet that always sits on the map's hem.
     Compact before anything is found; a peek when results arrive; the grip
     lifts it to a working height. */
  #resultsSheet{
    position:fixed; left:.75rem; right:.75rem; bottom:max(.5rem,env(safe-area-inset-bottom));
    z-index:800;
    display:flex; flex-direction:column;
    background:var(--paper); border:1px solid var(--line); border-radius:18px;
    box-shadow:0 -6px 24px rgb(16 26 43 / .12);
    max-height:32dvh; max-height:32vh;
    overflow:hidden;
  }
  body.has-results #resultsSheet{ max-height:44dvh; max-height:44vh; }
  #resultsSheet.sheet-expanded{ max-height:78dvh !important; max-height:78vh !important; }
  .sheet-grip{
    display:flex; flex-direction:column; align-items:center; gap:.3rem;
    padding:.55rem 1rem .5rem; cursor:pointer; user-select:none; -webkit-user-select:none;
  }
  .sheet-handle{
    width:2.6rem; height:4px; border-radius: 10px; background:var(--line); flex-shrink:0;
  }
  .sheet-count{ font-size:.8rem; font-weight:700; color:var(--muted); letter-spacing:.03em; }
  #resultsSheet .row{
    flex:1 1 auto; min-height:0; overflow-y:auto;
    padding:0 .6rem max(.4rem,env(safe-area-inset-bottom)) .6rem;
    margin-right:0; margin-left:0;
  }
  #resultsSheet #jarSeam{ margin:.35rem .6rem .5rem; }

  .app-foot{ display:none; }        /* the office stays closed on the phone */
}