/* Display face for headings. The site was 100% system UI font, which is the main
   reason it read as "plain" — system fonts look like an unstyled app, not a
   brand. Nunito is rounded and friendly, which echoes the bubbly logo wordmark;
   an editorial serif was tried first and read as too close to a competitor's
   look. Body text stays on the system stack for speed. Caveat (handwriting) is used sparingly on the home page — the motto and the
   polaroid caption — for a personal touch. Imported here rather than
   per-page so one file covers the whole site. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&family=Caveat:wght@700&display=swap');

:root {
  --display: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --pink:         #c2185b;
  --pink-light:   #f8bbd0;
  --pink-pale:    #fce4ec;
  --cream:        #fffbf8;
  --brown:        #3e2723;
  --brown-lt:     #6d4c41;
  --green:        #2e7d32;
  --green-pale:   #e8f5e9;
  --blue:         #1565c0;
  --blue-pale:    #e3f2fd;
  --red:          #b71c1c;
  --red-pale:     #ffebee;
  --orange:       #e65100;
  --orange-pale:  #fff3e0;
  --shadow:       0 2px 8px rgba(0,0,0,.12);
  --radius:       10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--cream);
  color: var(--brown);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Sticky top wrapper (header + nav together) ─────────────── */
.cs-top {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow);
}

/* Header */
/* ── Site bar: the logo's iced biscuit, in two layers ───────
   Replaces a tall pink block + separate nav row (302px together, 37% of a phone
   screen) with ONE row at 66px. Colours sampled from icons/Logo.png: icing
   #fef2d8 over a biscuit whose lit points are #f8b318/#e18609 — pulled back
   here, because those are highlights on a shaded biscuit and read as garish
   orange when laid flat across a full-width bar.

   .cs-bar is the CAKE; .cs-bar-icing is the FROSTING laid over it. The frosting's
   drips hang down into the sponge and STOP there — deepest drip ends 3px above
   the bar's bottom edge — so nothing spills onto the page and the map page's
   filter bar is unaffected. */
header.cs-bar {
  position: relative;          /* anchors the icing layer + mobile nav panel */
  z-index: 300;
  height: 84px;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 3px, transparent 3px 7px),
    linear-gradient(#f3c471, #dd9c3c);
}
/* The frosting. Sized to the bar exactly, so a drip can never paint outside it —
   a background image is clipped to its element, which also means NO overflow
   rule is needed here (overflow:hidden would clip the mobile nav panel). */
.cs-bar-icing {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27364%27%20height%3D%2784%27%20viewBox%3D%270%200%20364%2084%27%3E%3Cpath%20d%3D%27M0%2C0%20H364%20V58%20C364%2C64.8%20356.8%2C69%20346%2C69%20C335.2%2C69%20328%2C64.8%20328%2C58%20C328%2C61.1%20321.6%2C63%20312%2C63%20C302.4%2C63%20296%2C61.1%20296%2C58%20C296%2C67.9%20287.6%2C74%20275%2C74%20C262.4%2C74%20254%2C67.9%20254%2C58%20C254%2C62.3%20248.8%2C65%20241%2C65%20C233.2%2C65%20228%2C62.3%20228%2C58%20C228%2C69.8%20217.6%2C77%20202%2C77%20C186.4%2C77%20176%2C69.8%20176%2C58%20C176%2C60.5%20170%2C62%20161%2C62%20C152%2C62%20146%2C60.5%20146%2C58%20C146%2C66.7%20138.4%2C72%20127%2C72%20C115.6%2C72%20108%2C66.7%20108%2C58%20C108%2C61.1%20102.4%2C63%2094%2C63%20C85.6%2C63%2080%2C61.1%2080%2C58%20C80%2C71.6%2070.8%2C80%2057%2C80%20C43.2%2C80%2034%2C71.6%2034%2C58%20C34%2C62.3%2027.2%2C65%2017%2C65%20C6.800000000000001%2C65%200%2C62.3%200%2C58%20Z%27%20fill%3D%27%23fef2d8%27%2F%3E%3Cpath%20d%3D%27M364%2C58%20C364%2C64.8%20356.8%2C69%20346%2C69%20C335.2%2C69%20328%2C64.8%20328%2C58%20C328%2C61.1%20321.6%2C63%20312%2C63%20C302.4%2C63%20296%2C61.1%20296%2C58%20C296%2C67.9%20287.6%2C74%20275%2C74%20C262.4%2C74%20254%2C67.9%20254%2C58%20C254%2C62.3%20248.8%2C65%20241%2C65%20C233.2%2C65%20228%2C62.3%20228%2C58%20C228%2C69.8%20217.6%2C77%20202%2C77%20C186.4%2C77%20176%2C69.8%20176%2C58%20C176%2C60.5%20170%2C62%20161%2C62%20C152%2C62%20146%2C60.5%20146%2C58%20C146%2C66.7%20138.4%2C72%20127%2C72%20C115.6%2C72%20108%2C66.7%20108%2C58%20C108%2C61.1%20102.4%2C63%2094%2C63%20C85.6%2C63%2080%2C61.1%2080%2C58%20C80%2C71.6%2070.8%2C80%2057%2C80%20C43.2%2C80%2034%2C71.6%2034%2C58%20C34%2C62.3%2027.2%2C65%2017%2C65%20C6.800000000000001%2C65%200%2C62.3%200%2C58%20%27%20fill%3D%27none%27%20stroke%3D%27%23f6e0b6%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E);
  background-repeat: repeat-x;
  background-position: top left;
  filter: drop-shadow(0 2px 2px rgba(140, 85, 15, .22));
  pointer-events: none;
}
/* Logo + menu sit on the frosting.
   Deliberately NOT position:relative — the mobile nav panel is absolutely
   positioned with top:100%, and it must resolve against the 66px bar, not this
   46px row. Its children are lifted above the icing individually instead. */
.cs-bar-row {
  height: 58px;                /* the frosting band, above the drips */
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
}
.cs-bar-logo,
.cs-bar-burger,
.cs-bar .cs-nav { position: relative; z-index: 2; }
.cs-bar-logo { display: flex; align-items: center; flex-shrink: 0; }
.cs-bar-logo img { height: 46px; width: auto; display: block; }

/* Burger — only used below 768px, where the four links can't fit beside the logo */
.cs-bar-burger {
  display: none;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--pink-light);
  border-radius: 9px;
  cursor: pointer;
}
.cs-bar-burger span {
  display: block;
  height: 2px;
  background: var(--pink);
  border-radius: 2px;
  transition: transform .18s, opacity .18s;
}
.cs-bar-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cs-bar-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cs-bar-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav INSIDE the bar. Scoped to .cs-bar so the admin pages, which use a bare
   .cs-nav of their own, are untouched. */
.cs-bar .cs-nav {
  background: none;
  border: 0;
  padding: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  /* MUST stay above .cs-bar-icing (z-index 1) — this rule comes after the one
     that lifts the row's children, so `z-index: auto` here put the whole menu
     BEHIND the frosting and made it invisible. */
  z-index: 2;
}
.cs-bar .cs-nav-link,
.cs-bar .cs-nav-dropdown-toggle {
  font-size: .92rem;
  font-weight: 500;            /* was 600 — lighter reads less shouty */
  padding: 8px 13px;
  border-bottom: 0;
  border-radius: 8px;
  color: var(--brown-lt);
}
.cs-bar .cs-nav-link:hover,
.cs-bar .cs-nav-dropdown-toggle:hover { background: var(--pink-pale); color: var(--pink); }
.cs-bar .cs-nav-link.active,
.cs-bar .cs-nav-dropdown-toggle.active {
  color: var(--pink);
  background: var(--pink-pale);
  border-bottom-color: transparent;
}

@media (max-width: 767px) {
  header.cs-bar { height: 72px; }
  .cs-bar-icing { background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27364%27%20height%3D%2771%27%20viewBox%3D%270%200%20364%2071%27%3E%3Cpath%20d%3D%27M0%2C0%20H364%20V50%20C364%2C55.6%20356.8%2C59%20346%2C59%20C335.2%2C59%20328%2C55.6%20328%2C50%20C328%2C52.5%20321.6%2C54%20312%2C54%20C302.4%2C54%20296%2C52.5%20296%2C50%20C296%2C57.4%20287.6%2C62%20275%2C62%20C262.4%2C62%20254%2C57.4%20254%2C50%20C254%2C53.7%20248.8%2C56%20241%2C56%20C233.2%2C56%20228%2C53.7%20228%2C50%20C228%2C59.3%20217.6%2C65%20202%2C65%20C186.4%2C65%20176%2C59.3%20176%2C50%20C176%2C51.9%20170%2C53%20161%2C53%20C152%2C53%20146%2C51.9%20146%2C50%20C146%2C56.8%20138.4%2C61%20127%2C61%20C115.6%2C61%20108%2C56.8%20108%2C50%20C108%2C52.5%20102.4%2C54%2094%2C54%20C85.6%2C54%2080%2C52.5%2080%2C50%20C80%2C60.5%2070.8%2C67%2057%2C67%20C43.2%2C67%2034%2C60.5%2034%2C50%20C34%2C53.1%2027.2%2C55%2017%2C55%20C6.800000000000001%2C55%200%2C53.1%200%2C50%20Z%27%20fill%3D%27%23fef2d8%27%2F%3E%3Cpath%20d%3D%27M364%2C50%20C364%2C55.6%20356.8%2C59%20346%2C59%20C335.2%2C59%20328%2C55.6%20328%2C50%20C328%2C52.5%20321.6%2C54%20312%2C54%20C302.4%2C54%20296%2C52.5%20296%2C50%20C296%2C57.4%20287.6%2C62%20275%2C62%20C262.4%2C62%20254%2C57.4%20254%2C50%20C254%2C53.7%20248.8%2C56%20241%2C56%20C233.2%2C56%20228%2C53.7%20228%2C50%20C228%2C59.3%20217.6%2C65%20202%2C65%20C186.4%2C65%20176%2C59.3%20176%2C50%20C176%2C51.9%20170%2C53%20161%2C53%20C152%2C53%20146%2C51.9%20146%2C50%20C146%2C56.8%20138.4%2C61%20127%2C61%20C115.6%2C61%20108%2C56.8%20108%2C50%20C108%2C52.5%20102.4%2C54%2094%2C54%20C85.6%2C54%2080%2C52.5%2080%2C50%20C80%2C60.5%2070.8%2C67%2057%2C67%20C43.2%2C67%2034%2C60.5%2034%2C50%20C34%2C53.1%2027.2%2C55%2017%2C55%20C6.800000000000001%2C55%200%2C53.1%200%2C50%20%27%20fill%3D%27none%27%20stroke%3D%27%23f6e0b6%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E); }   /* shallower drips to match */
  .cs-bar-row { height: 50px; padding: 0 14px; gap: 10px; }
  .cs-bar-logo img { height: 40px; }
  .cs-bar-burger { display: flex; }

  /* Nav drops out of the bar as a panel */
  .cs-bar .cs-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px;
    background: #fff;
    border-bottom: 1px solid rgba(62, 39, 35, .10);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .10);
  }
  .cs-bar .cs-nav.open { display: flex; }
  .cs-bar .cs-nav-link,
  .cs-bar .cs-nav-dropdown-toggle { padding: 12px 14px; font-size: .98rem; width: 100%; }
  .cs-bar .cs-nav-dropdown { display: block; }
  /* Sub-items sit inline in the panel rather than floating off the side */
  .cs-bar .cs-nav-dropdown-menu {
    position: static;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    padding-left: 14px;
  }
}
header .emoji { font-size: 1.5rem; flex-shrink: 0; }
header h1 { font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
header .tagline { font-size: .72rem; opacity: .85; display: block; line-height: 1.3; margin-top: 1px; }

/* Search (legacy — panel removed, controls now live inside .cs-filter-bar) */
.search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.search-row input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid var(--pink-light);
  border-radius: var(--radius);
  font-size: 1rem;
  outline: none;
  text-transform: uppercase;
  color: var(--brown);
  background: white;
}
.search-row input:focus { border-color: var(--pink); }
.search-row input::placeholder { text-transform: none; }

.cs-btn-primary {
  background: black;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.cs-btn-primary:hover    { background: #fff; color: #111; }
.cs-btn-primary:disabled { background: #fff; color: #999; cursor: not-allowed; }

.cs-dist-val { font-weight: 700; color: var(--pink); min-width: 56px; font-size: .85rem; }

/* Filters */
.cs-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: white;
  border-bottom: 1px solid var(--pink-light);
}
.cs-chip {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  opacity: .4;
  user-select: none;
  transition: opacity .15s;
}
.cs-chip.active { opacity: 1; }
.cs-chip.verified        { background: var(--green-pale);  color: var(--green);  border: 2px solid #a5d6a7; }
.cs-chip.unverified      { background: var(--blue-pale);   color: var(--blue);   border: 2px solid #90caf9; }
.cs-chip.owner_submitted { background: var(--orange-pale); color: var(--orange); border: 2px solid #ffcc80; }
.cs-chip.closed          { background: var(--red-pale);    color: var(--red);    border: 2px solid #ef9a9a; }

/* Error / count */
.cs-error { background: var(--red-pale); color: var(--red); padding: 10px 20px; font-size: .9rem; }
.cs-count { padding: 6px 20px; font-size: .82rem; color: var(--brown-lt); background: var(--cream); min-height: 28px; }

/* Results */
.cs-list { padding: 10px 12px 0; display: flex; flex-direction: column; gap: 8px; }
.cs-card:last-child { margin-bottom: 24px; }

/* ── Map page full-height layout ────────────────────────────── */
.cs-map-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;                  /* modern browsers */
  height: var(--app-vh, 100dvh);   /* JS sets --app-vh to the real visible height */
  min-height: 0;                   /* override the global body{min-height:100vh} that was forcing overflow */
  overflow: hidden;
}
.cs-map-page .cs-top     { flex-shrink: 0; position: relative; } /* flex layout pins it — sticky not needed and can overlap on mobile */
.cs-map-page #cs-error   { flex-shrink: 0; }
.cs-map-page #cs-results-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ── Result tabs ─────────────────────────────────────────────── */
.cs-tabs-bar {
  display: flex;
  align-items: center;
  background: white;
  border-bottom: 2px solid var(--pink-light);
  padding: 0 12px;
  flex-shrink: 0;
}
.cs-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 18px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--brown-lt);
  cursor: pointer;
  font-family: inherit;
  transition: color .15s, border-color .15s;
}
.cs-tab--active        { color: var(--pink); border-bottom-color: var(--pink); }
.cs-tab:hover          { color: var(--pink); }
.cs-tabs-bar .cs-count { margin-left: auto; padding-right: 4px; background: none; min-height: 0; padding-top: 0; padding-bottom: 0; }

/* Tab panels */
#cs-list-panel {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#cs-map-panel {
  flex: 1;
  min-height: 0;
}
#cs-map {
  width: 100%;
  height: 100%;
}

/* Empty */
.cs-empty { text-align: center; padding: 32px 16px; color: var(--brown-lt); }
.cs-big-emoji { font-size: 2.4rem; margin-bottom: 8px; }
.cs-empty p { font-size: .9rem; line-height: 1.6; }

/* Card */
.cs-card {
  background: white;
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  border-left: 4px solid #ccc;
  transition: transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.cs-card.verified        { border-left-color: var(--green); }
.cs-card.unverified      { border-left-color: var(--blue); }
.cs-card.owner_submitted { border-left-color: var(--orange); }
.cs-card.closed          { border-left-color: var(--red); opacity: .72; }

.cs-card-top  { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.cs-card-name { font-weight: 700; font-size: .95rem; line-height: 1.3; }
.cs-card-dist { font-size: .82rem; font-weight: 700; color: var(--pink); white-space: nowrap; }
.cs-card-desc { font-size: .82rem; color: var(--brown-lt); }
.cs-card-address { font-size: .78rem; color: var(--brown-lt); }
.cs-card-visit { font-size: .76rem; color: var(--brown-lt); font-style: italic; }
.cs-card-link a { color: var(--pink); font-size: .8rem; font-weight: 600; text-decoration: none; }
.cs-card-link a:hover { text-decoration: underline; }

.cs-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.cs-badge.verified        { background: var(--green-pale);  color: var(--green); }
.cs-badge.unverified      { background: var(--blue-pale);   color: var(--blue); }
.cs-badge.owner_submitted { background: var(--orange-pale); color: var(--orange); }
.cs-badge.closed          { background: var(--red-pale);    color: var(--red); }

/* Leaflet popup — replaced by cs-popup-inner block below */

/* ── Admin ─────────────────────────────── */
.login-card {
  max-width: 380px;
  margin: 60px auto;
  background: white;
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.login-card h2 { color: var(--pink); margin-bottom: 20px; }

.admin-wrapper { max-width: 1280px; margin: 0 auto; padding: 24px 16px; flex: 1; }

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.admin-stats {
  display: flex;
  gap: 20px;
  background: var(--pink-pale);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: .9rem;
  color: var(--brown-lt);
}
.admin-stats strong { color: var(--pink); font-size: 1.1rem; }

.back-link { color: var(--pink); font-size: .9rem; font-weight: 600; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

.btn-secondary {
  background: white;
  color: var(--pink);
  border: 2px solid var(--pink);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-secondary:hover { background: var(--pink-pale); }

.admin-section {
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.admin-section h2 { font-size: 1rem; color: var(--pink); margin-bottom: 16px; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 5px; font-size: .88rem; font-weight: 600; color: var(--brown-lt); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 9px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: .93rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
  color: var(--brown);
  background: white;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--pink); }
.form-group textarea { resize: vertical; min-height: 70px; }

.postcode-row { display: flex; gap: 8px; }
.postcode-row input { flex: 1; }
.hint { font-size: .8rem; color: var(--brown-lt); margin-top: 5px; }

.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

#cs-form-msg.success { background: var(--green-pale); color: var(--green); }
#cs-form-msg.error   { background: var(--red-pale);   color: var(--red); }

.table-search {
  width: 100%;
  max-width: 320px;
  padding: 8px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: .9rem;
  outline: none;
  margin-bottom: 12px;
}
.table-search:focus { border-color: var(--pink); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th { text-align: left; padding: 9px 12px; background: var(--pink-pale); color: var(--pink); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
tr:hover td { background: var(--cream); }

.cs-badge-admin { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .72rem; font-weight: 700; }
.cs-badge-admin.verified        { background: var(--green-pale);  color: var(--green); }
.cs-badge-admin.unverified      { background: var(--blue-pale);   color: var(--blue); }
.cs-badge-admin.owner_submitted { background: var(--orange-pale); color: var(--orange); }
.cs-badge-admin.closed          { background: var(--red-pale);    color: var(--red); }
.cs-badge-admin.pending         { background: var(--orange-pale); color: var(--orange); }

.btn-edit    { background: white; color: var(--blue);   border: 1px solid var(--blue);   padding: 4px 10px; border-radius: 6px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.btn-edit:hover    { background: var(--blue-pale); }
.btn-delete  { background: white; color: var(--red);    border: 1px solid var(--red);    padding: 4px 10px; border-radius: 6px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.btn-delete:hover  { background: var(--red-pale); }
.btn-approve { background: white; color: var(--green);  border: 1px solid var(--green);  padding: 4px 10px; border-radius: 6px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.btn-approve:hover { background: var(--green-pale); }

/* ── Navigation ────────────────────────────────────────────── */
.cs-nav {
  background: white;
  border-bottom: 2px solid var(--pink-light);
  display: flex;
  padding: 0 16px;
  overflow: visible;
  position: relative;
  z-index: 200;
}
.cs-nav::-webkit-scrollbar { display: none; }
.cs-nav-link {
  color: var(--brown-lt);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  padding: 10px 14px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.cs-nav-link:hover  { color: var(--pink); }
.cs-nav-link.active { color: var(--pink); border-bottom-color: var(--pink); }

/* ── Sticky footer: main content areas grow to fill the page ── */
.cs-home,
.cs-contact-wrap,
.cs-public-form-wrap {
  flex: 1;
}

/* ── Home page ─────────────────────────────────────────────── */
.cs-home {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 20px 52px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cs-intro-section h2 {
  font-size: 1.3rem;
  color: var(--pink);
  margin-bottom: 14px;
}
.cs-intro-section p {
  margin-bottom: 12px;
  line-height: 1.75;
  font-size: .97rem;
  color: var(--brown);
}
.cs-intro-section a { color: var(--pink); font-weight: 600; }

.cs-home-ctas {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cs-home-ctas .cs-btn-primary { font-size: .95rem; padding: 12px 24px; }

.cs-submit-callout {
  background: var(--pink-pale);
  border-radius: var(--radius);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: .93rem;
  line-height: 1.65;
}
.cs-submit-callout a { color: var(--pink); font-weight: 600; text-decoration: none; }
.cs-submit-callout a:hover { text-decoration: underline; }

.cs-tcs-section {
  background: white;
  border: 1px solid var(--pink-light);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.cs-tcs-section h3 {
  font-size: .95rem;
  color: var(--brown-lt);
  margin-bottom: 12px;
  font-weight: 700;
}
.cs-tcs-section ul { padding-left: 20px; }
.cs-tcs-section li {
  font-size: .88rem;
  line-height: 1.75;
  color: var(--brown-lt);
  margin-bottom: 2px;
}
.cs-tcs-section a { color: var(--pink); }

/* ── Header logo (Map My Cake) ─────────────────────────────── */
.cs-logo-chip {
  background: #fff;
  border-radius: 12px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 5px rgba(0,0,0,.18);
  flex-shrink: 0;
}
.cs-logo-img { height: 100px; width: auto; display: block; }
@media (max-width: 420px) {
  .cs-logo-img { height: 56px; }
  .cs-logo-chip { padding: 4px 9px; }
}

/* ── Home: two-card row (about + T&Cs) ─────────────────────── */
.cs-home-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 680px) {
  .cs-home-cards { grid-template-columns: 1fr; }
}
/* Headings get the display face everywhere — one rule, whole site. */
h1, h2, h3,
.cs-hero-title,
.cs-route-feature h2,
.cs-detail-name {
  font-family: var(--display);
  letter-spacing: -.01em;
}

/* ── Home: hero ─────────────────────────────────────────────
   The page used to open on an internal progress stat. A visitor now lands on
   what the site does for them, with the route planner (the USP) said up front
   and a way into the map above the fold.
   Visually: a tinted, softly patterned panel with the logo alongside, so the
   page opens with something to look at instead of text on flat cream. */
.cs-hero {
  position: relative;
  padding: 44px 20px 52px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.75), transparent 42%),
    radial-gradient(circle at 82% 8%,  rgba(255,255,255,.55), transparent 38%),
    linear-gradient(160deg, #fbdae6 0%, #fff4f8 52%, var(--pink-pale) 100%);
  overflow: hidden;
}
/* Soft dotted texture — stops the panel reading as a flat colour block */
.cs-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--pink-light) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .32;
  pointer-events: none;
}
/* Scalloped lower edge, like a doily — a small bakery cue that costs nothing */
.cs-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 14px;
  background: radial-gradient(circle at 50% 0, var(--cream) 9px, transparent 10px);
  background-size: 26px 14px;
  background-repeat: repeat-x;
}
.cs-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 860px;
  margin: 0 auto;
}
.cs-hero-copy { flex: 1 1 auto; text-align: left; }
.cs-hero-art {
  flex: 0 0 auto;
  width: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-hero-art img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(194,24,91,.22));
}
@media (max-width: 720px) {
  .cs-hero-inner { flex-direction: column; gap: 18px; }
  .cs-hero-copy  { text-align: center; }
  .cs-hero-art   { width: 132px; order: -1; }   /* logo first on a phone */
}
.cs-hero-motto {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}
.cs-hero-title {
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1.25;
  color: var(--brown);
  margin: 0 0 14px;
}
.cs-hero-sub {
  max-width: 460px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--brown-lt);
}
.cs-hero-ctas {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .cs-hero-sub  { margin-left: auto; margin-right: auto; }
  .cs-hero-ctas { justify-content: center; }
}
.cs-hero-ctas .cs-btn-primary,
.cs-hero-ctas .cs-btn-outline { font-size: .95rem; padding: 12px 24px; }

/* The reassurance a wavering visitor needs, right where they decide */
.cs-hero-trust {
  margin-top: 14px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--brown-lt);
  opacity: .9;
}

/* ── Home: no sign-up ───────────────────────────────────────
   Sits right after the route-planner feature on purpose (see index.php). */
.cs-nosignup {
  background: var(--pink-pale);
  border: 1px solid var(--pink-light);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.cs-nosignup h2 { font-size: 1.15rem; color: var(--pink); margin-bottom: 14px; }
.cs-nosignup-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.cs-nosignup-list li {
  position: relative;
  padding-left: 26px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--brown);
}
.cs-nosignup-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: -1px;
  font-weight: 800;
  color: var(--green);
}
.cs-nosignup-list strong { color: var(--brown); }
.cs-nosignup-foot {
  margin: 0;
  padding-top: 13px;
  border-top: 1px dashed var(--pink-light);
  font-size: .86rem;
  line-height: 1.65;
  color: var(--brown-lt);
}

/* Our mission + progress, in the slot the stats strip used to occupy (above the
   welcome/story card). The stats strip was four bare numbers that said nothing;
   this says what we're actually doing and shows how far along it is. */
.cs-mission-card {
  background: #fff;
  border: 1px solid var(--pink-light);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.cs-mission-card h2 { font-size: 1.15rem; color: var(--pink); margin-bottom: 10px; }
.cs-mission-card p {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--brown);
  margin-bottom: 10px;
}
.cs-mission-count { color: var(--brown-lt); }
.cs-mission-card .cs-mission-bar { margin-top: 4px; }

.cs-story h2 { font-size: 1.15rem; color: var(--pink); margin-bottom: 14px; }

/* ── Home: Facebook community card ──────────────────────────
   The banner is a background image, deliberately layered over a pink gradient:
   if icons/fb-group.jpg is missing the block still looks intentional rather
   than showing a broken image. */
.cs-fb-card {
  background: #fff;
  border: 1px solid var(--pink-light);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.cs-fb-banner {
  height: 170px;
  background-color: var(--pink);
  background-image:
    linear-gradient(135deg, rgba(194,24,91,.55), rgba(194,24,91,.15)),
    url('/icons/fb-group.jpg');
  background-size: cover;
  background-position: center;
}
.cs-fb-body { padding: 20px 22px 22px; }
.cs-fb-body h2 { font-size: 1.15rem; color: var(--pink); margin-bottom: 10px; }
.cs-fb-body p {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--brown);
  margin-bottom: 16px;
}
.cs-fb-btn { display: inline-block; text-decoration: none; }

/* ── Home: shed-owner tiles ─────────────────────────────────
   Was a paragraph list; the three things an owner can do are now equally
   weighted and tappable. */
.cs-owner-section { text-align: center; }
.cs-owner-section h2 { font-size: 1.15rem; color: var(--pink); margin-bottom: 8px; }
.cs-owner-lead {
  max-width: 520px;
  margin: 0 auto 18px;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--brown-lt);
}
/* Always one row of three — they used to stack below 700px. Holding 1x3 on a
   phone means the tiles have to get smaller rather than taller, so the padding
   and type step down, and the descriptive line is dropped on the narrowest
   screens where three columns leave ~100px each. The labels stand alone. */
.cs-owner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 700px) {
  .cs-owner-grid { gap: 8px; }
  .cs-owner-tile { padding: 16px 10px; gap: 4px; }
  .cs-owner-tile strong { font-size: .9rem; }
  .cs-owner-tile span  { font-size: .76rem; }
}
@media (max-width: 520px) {
  .cs-owner-grid { gap: 6px; }
  .cs-owner-tile { padding: 14px 6px; }
  .cs-owner-tile-icon { font-size: 1.3rem; }
  .cs-owner-tile strong { font-size: .84rem; line-height: 1.25; }
  /* Below this the description can't sit in ~100px without becoming a column
     of single words — the icon plus "Add / Edit / Claim my shed" is enough. */
  .cs-owner-tile span:not(.cs-owner-tile-icon) { display: none; }
}
.cs-owner-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 16px;
  background: #fff;
  border: 1px solid var(--pink-light);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.cs-owner-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.cs-owner-tile-icon { font-size: 1.5rem; }
.cs-owner-tile strong { font-size: .98rem; color: var(--pink); }
.cs-owner-tile span {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--brown-lt);
}

.cs-about-card {
  background: #fff;
  border: 1px solid var(--pink-light);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.cs-about-card h3 { font-size: 1.05rem; color: var(--pink); margin-bottom: 12px; }
.cs-about-card p {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--brown);
  margin-bottom: 10px;
}
.cs-about-card p:last-child { margin-bottom: 0; }
.cs-about-card a { color: var(--pink); font-weight: 600; }

/* ── Home: route-planner USP feature ───────────────────────── */
.cs-route-feature {
  background: var(--pink);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow);
}
.cs-route-feature h3 { font-size: 1.25rem; color: #fff; margin-bottom: 10px; }
.cs-route-feature p {
  font-size: .97rem;
  line-height: 1.7;
  color: #fff;
  opacity: .96;
  margin-bottom: 12px;
}
.cs-route-feature .cs-btn-primary {
  display: block;
  width: fit-content;
  margin: 10px auto 0;
  background: #fff;
  color: var(--pink);
}
.cs-route-feature .cs-btn-primary:hover { background: #111; color: #fff; }

/* Outline CTA (light backgrounds) */
.cs-btn-outline {
  display: inline-block;
  background: #fff;
  color: var(--pink);
  border: 2px solid var(--pink);
  padding: 10px 22px;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.cs-btn-outline:hover { background: var(--pink-pale); }

/* ── Home: features card ───────────────────────────────────── */
.cs-features-card {
  background: #fff;
  border: 1px solid var(--pink-light);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.cs-features-card h3 { font-size: 1.05rem; color: var(--pink); margin-bottom: 14px; }
.cs-feature-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.cs-feature-list li {
  display: flex;
  gap: 9px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--brown);
}
.cs-feature-list strong { color: var(--pink); }
.cs-feat-emoji { flex-shrink: 0; font-size: 1.05rem; line-height: 1.4; }

/* Coming-soon line in the owners callout */
.cs-coming-soon {
  border-top: 1px dashed var(--pink-light);
  padding-top: 10px;
  margin-top: 2px;
  color: var(--brown-lt);
}
.cs-coming-soon strong { color: var(--pink); }

/* Home small print */
.cs-home-smallprint {
  font-size: .75rem;
  color: var(--brown-lt);
  text-align: center;
  opacity: .85;
  line-height: 1.6;
  margin-top: -6px;
}
.cs-home-smallprint a { color: var(--pink); }

/* ── Location button ───────────────────────────────────────── */
.cs-location-btn {
  width: 100%;
  background: white;
  border: 2px solid var(--pink-light);
  color: var(--pink);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background .15s, border-color .15s;
  text-align: center;
}
.cs-location-btn:hover    { background: var(--pink-pale); border-color: var(--pink); }
.cs-location-btn:disabled { color: #aaa; border-color: #e0e0e0; cursor: not-allowed; }

/* ── Search + location joined row ──────────────────────────── */
.cs-search-row {
  display: flex;
  align-items: stretch;
}
/* Autocomplete input loses its right border-radius to join the button */
.cs-pac-wrap--joined {
  flex: 1;
}
.cs-pac-wrap--joined gmp-place-autocomplete {
  display: block;
  width: 100%;
}
.cs-pac-wrap--joined gmp-place-autocomplete::part(input) {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 2px solid var(--pink-light);
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-size: .95rem;
  font-family: inherit;
  color: var(--brown);
  background: #fff;
  outline: none;
  height: 100%;
  transition: border-color .15s;
}
.cs-pac-wrap--joined gmp-place-autocomplete::part(input):focus {
  border-color: var(--pink);
}
/* Location button loses its left border-radius, margin, full-width */
.cs-location-btn--joined {
  width: auto;
  margin: 0;
  border-radius: 0 8px 8px 0;
  border-left: none;
  padding: 0 14px;
  font-size: 1.15rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Directions button on cards ────────────────────────────── */
.cs-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.cs-card-directions {
  background: none;
  border: 1px solid var(--pink-light);
  color: var(--pink);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.cs-card-directions:hover { background: var(--pink-pale); }

/* ── Two-column form layout (admin + public forms on desktop) ── */
.cs-form-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .cs-form-cols {
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
    align-items: start;
  }
  .cs-form-cols--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .cs-form-cols--4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  /* Operational Info section spans 2 columns inside a 4-col grid */
  .cs-form-col--span2 {
    grid-column: span 2;
  }
  .cs-public-form-wrap {
    max-width: 720px;
  }
}

/* Wide form container — used when the form should be wider than the page intro text */
.cs-wide-form {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 52px;
}

/* Narrow intro container — keeps h2 + intro paragraph at a readable width */
.cs-page-intro {
  max-width: 580px;
  margin: 0 auto;
  padding: 28px 20px 20px;
}

/* Shed checker gate (Add My Shed) — narrow, so it reads as a single focused step */
.cs-checker-outer { max-width: 480px; margin: 0 auto; padding: 4px 20px 8px; }
.cs-checker-box h2 { color: var(--pink); font-size: 1.05rem; }

/* Column section headings */
.cs-form-col-heading {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--pink);
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--pink-pale);
}

/* ── Add My Shed public page ───────────────────────────────── */
.cs-public-form-wrap {
  max-width: 580px;
  margin: 0 auto;
  padding: 28px 20px 52px;
}
.cs-public-form-wrap h2 {
  color: var(--pink);
  font-size: 1.2rem;
  margin-bottom: 6px;
}
.cs-form-intro {
  font-size: .9rem;
  color: var(--brown-lt);
  line-height: 1.65;
  margin-bottom: 22px;
}
.cs-success-box {
  background: var(--green-pale);
  color: var(--green);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-align: center;
  font-size: .97rem;
  line-height: 1.7;
}
.cs-success-box .cs-big-emoji { font-size: 2.4rem; margin-bottom: 8px; }

/* ── Admin pending section ─────────────────────────────────── */
.cs-pending-banner {
  background: var(--orange-pale);
  border: 2px solid #ffcc80;
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
}
.cs-pending-banner h2 {
  font-size: 1rem;
  color: var(--orange);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
/* Collapse chevron — rotates to point right when the section is collapsed */
.cs-pending-banner h2::after {
  content: '▾';
  margin-left: auto;
  font-size: .8rem;
  color: var(--orange);
  transition: transform .15s;
}
.cs-pending-banner.cs-pending-collapsed h2 { margin-bottom: 0; }
.cs-pending-banner.cs-pending-collapsed h2::after { transform: rotate(-90deg); }
.cs-pending-banner.cs-pending-collapsed > *:not(h2) { display: none; }

/* Small filter-toggle checkbox+label, used on the admin "All Sheds" toolbar */
.cs-admin-filter-check {
  font-size: .8rem;
  font-weight: 600;
  color: var(--brown);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
}
.cs-pending-count {
  background: var(--orange);
  color: white;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: .75rem;
}
.cs-pending-empty { font-size: .9rem; color: var(--brown-lt); }
.cs-pending-card {
  background: white;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-pending-card:last-child { margin-bottom: 0; }
.cs-pending-name { font-weight: 700; font-size: .95rem; }
.cs-pending-meta { font-size: .82rem; color: var(--brown-lt); }
.cs-pending-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

/* ── Nav dropdown ──────────────────────────────────────────── */
.cs-nav-dropdown { position: relative; display: flex; align-items: stretch; }
.cs-nav-dropdown-toggle {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--brown-lt);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .15s, border-color .15s;
}
.cs-nav-dropdown-toggle:hover  { color: var(--pink); }
.cs-nav-dropdown-toggle.active { color: var(--pink); border-bottom-color: var(--pink); }
.cs-nav-dropdown-toggle .cs-caret { font-size: .7rem; transition: transform .15s; }
.cs-nav-dropdown-toggle[aria-expanded="true"] .cs-caret { transform: rotate(180deg); }

.cs-nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid var(--pink-light);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  min-width: 170px;
  z-index: 1000;
}
.cs-nav-dropdown-menu.open { display: block; }
.cs-nav-dropdown-item {
  display: block;
  padding: 10px 16px;
  color: var(--brown-lt);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  transition: background .1s;
  white-space: nowrap;
}
.cs-nav-dropdown-item:hover { background: var(--pink-pale); color: var(--pink); }
.cs-nav-dropdown-item + .cs-nav-dropdown-item { border-top: 1px solid #f5f5f5; }

/* ── Address search results ────────────────────────────────── */
.cs-address-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.cs-address-result {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  font-size: .84rem;
  color: var(--brown);
  line-height: 1.45;
  transition: background .1s, border-color .1s;
  font-family: inherit;
}
.cs-address-result:hover { background: var(--pink-pale); border-color: var(--pink-light); }

/* ── Google PlaceAutocompleteElement ───────────────────────── */
.cs-pac-wrap {
  width: 100%;
}
/* Make the web component fill the container and look like our inputs */
.cs-pac-wrap gmp-place-autocomplete {
  display: block;
  width: 100%;
}
.cs-pac-wrap gmp-place-autocomplete::part(input) {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #d7ccc8;
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  color: var(--brown);
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.cs-pac-wrap gmp-place-autocomplete::part(input):focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(194,24,91,.1);
}

/* ── Edit My Shed page ─────────────────────────────────────── */
.cs-edit-request-wrap {
  max-width: 480px;
  margin: 40px auto;
  padding: 0 20px 52px;
  text-align: center;
}
.cs-edit-request-wrap h2 { color: var(--pink); font-size: 1.2rem; margin-bottom: 8px; }
.cs-edit-request-wrap p  { font-size: .93rem; color: var(--brown-lt); line-height: 1.65; margin-bottom: 20px; }
.cs-info-box {
  background: var(--blue-pale);
  border: 1px solid #90caf9;
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: .88rem;
  color: var(--blue);
  line-height: 1.6;
  text-align: left;
  margin-top: 16px;
}

/* ── Toast notification ─────────────────────────────────────── */
.cs-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--brown);
  color: white;
  padding: 13px 22px;
  border-radius: 50px;
  font-size: .93rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  z-index: 9000;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.cs-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Contact page ───────────────────────────────────────────── */
.cs-contact-wrap {
  max-width: 580px;
  margin: 0 auto;
  padding: 28px 20px 52px;
}
.cs-contact-wrap h2 {
  color: var(--pink);
  font-size: 1.2rem;
  margin-bottom: 6px;
}
.cs-contact-wrap .cs-form-intro {
  font-size: .93rem;
  color: var(--brown-lt);
  line-height: 1.65;
  margin-bottom: 20px;
}
.g-recaptcha {
  margin-bottom: 16px;
}

/* ── Dietary badges ─────────────────────────────────────────── */
.cs-card-dietary {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 3px 0;
}
.cs-diet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  min-width: 22px;
}
.cs-diet.gf     { background: #fff8e1; color: #e65100; border: 1px solid #ffcc80; }
.cs-diet.veggie { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.cs-diet.vegan  { background: #e0f2f1; color: #00695c; border: 1px solid #80cbc4; }
.cs-diet.halal  { background: #ede7f6; color: #4527a0; border: 1px solid #ce93d8; }
.cs-diet.cash   { background: #f1f8e9; color: #33691e; border: 1px solid #aed581; }
.cs-diet.card   { background: #e3f2fd; color: #0d47a1; border: 1px solid #90caf9; }
.cs-diet.bank   { background: #fce4ec; color: #880e4f; border: 1px solid #f48fb1; }

/* ── Dietary checkboxes (add/edit form) ─────────────────────── */
.cs-diet-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.cs-diet-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  cursor: pointer;
  color: var(--brown);
}
.cs-diet-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--pink);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Vote buttons ───────────────────────────────────────────── */
.cs-card-votes {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #f0f0f0;
  align-items: center;
}
.cs-card-votes-label {
  font-size: .72rem;
  color: var(--brown-lt);
  margin-right: 2px;
}
.cs-vote-btn {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .8rem;
  cursor: pointer;
  font-family: inherit;
  color: var(--brown-lt);
  transition: background .15s, border-color .15s, color .15s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.cs-vote-btn:hover { background: var(--pink-pale); border-color: var(--pink-light); color: var(--brown); }
.cs-vote-up.cs-vote-active   { background: var(--green-pale); border-color: #a5d6a7; color: var(--green); font-weight: 700; }
.cs-vote-down.cs-vote-active { background: var(--red-pale);   border-color: #ef9a9a; color: var(--red);   font-weight: 700; }

/* ── Header logo link ───────────────────────────────────────── */
.cs-header-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: white;
}
.cs-header-link:visited,
.cs-header-link:active  { color: white; }
.cs-header-link:hover   { opacity: .88; color: white; }
.cs-header-text {
  display: flex;
  flex-direction: column;
}

/* ── Footer ─────────────────────────────────────────────────── */
.cs-footer {
  background: white;
  border-top: 1px solid var(--pink-light);
  text-align: center;
  padding: 18px 20px;
  font-size: .82rem;
  color: var(--brown-lt);
  flex-shrink: 0;
}

/* ── Admin pages: sticky footer ─────────────────────────────── */
.cs-admin-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.cs-admin-body > #login-section,
.cs-admin-body > #dashboard-section,
.cs-admin-body > .admin-wrapper {
  flex: 1;
}

/* On a phone the admin wrapper (a flex item with auto side margins) shrink-wrapped to its widest content,
   which made the whole page wider than the screen. Give it the full width so wide tables scroll inside it. */
@media (max-width: 900px) {
  .cs-admin-body > .admin-wrapper { width: 100%; box-sizing: border-box; min-width: 0; }
}

/* ── Admin sub-navigation ───────────────────────────────────── */
/* One row that always fits: on a phone it scrolls sideways (soft fade at an edge that has more),
   and the page you're on is scrolled into view (see the tiny script in includes/admin_subnav.php). */
.cs-admin-subnav {
  background: var(--pink-pale);
  border-bottom: 1px solid var(--pink-light);
  display: flex;
  gap: 2px;
  padding: 0 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cs-admin-subnav::-webkit-scrollbar { display: none; }
.cs-admin-subnav.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.cs-admin-subnav.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.cs-admin-subnav.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.cs-admin-subnav-link {
  flex: 0 0 auto;
  color: var(--brown-lt);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
  padding: 11px 14px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.cs-admin-subnav-link:hover  { color: var(--pink); }
.cs-admin-subnav-link.active { color: var(--pink); border-bottom-color: var(--pink); }
@media (max-width: 640px) {
  .cs-admin-subnav { padding: 0 8px; }
  .cs-admin-subnav-link { padding: 12px 12px; }
}

/* ── Admin table enhancements ───────────────────────────────── */
#cs-sheds-table th.sortable { cursor: pointer; user-select: none; }
#cs-sheds-table th.sortable:hover { background: var(--pink-pale); }
.sort-icon { color: var(--brown-lt); font-size: .8em; margin-left: 2px; }
.col-id    { width: 46px; text-align: center; color: var(--brown-lt); font-size: .82rem; }
.col-addr  { max-width: 160px; font-size: .82rem; color: #666; }
.col-email { max-width: 170px; font-size: .82rem; color: #666; word-break: break-all; }
.col-visit { white-space: nowrap; }
.col-actions { white-space: nowrap; text-align: center; }

.btn-icon {
  background: none;
  border: 1px solid transparent;
  font-size: 1rem;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 5px;
  transition: background .1s, border-color .1s;
  line-height: 1;
}
.btn-icon:hover { background: #f0f0f0; border-color: #e0e0e0; }

.btn-visit-date {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .85rem;
  padding: 1px 3px;
  margin-left: 3px;
  border-radius: 3px;
  vertical-align: middle;
  transition: background .1s;
}
.btn-visit-date:hover { background: var(--pink-pale); }
.visit-date-input {
  font-size: .82rem;
  border: 1px solid var(--pink);
  border-radius: 4px;
  padding: 2px 5px;
  width: 130px;
  font-family: inherit;
}

/* ── Filter bar (map page) — search + distance + filters in one row ── */
.cs-filter-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 12px;
  background: white;
  border-bottom: 1px solid var(--pink-light);
}

/* Row 1: search input + 📍 button group */
.cs-filter-search-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* Row 2: distance slider group */
.cs-filter-dist-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.cs-filter-dist-wrap input[type="range"] {
  flex: 1;
  accent-color: var(--pink);
  cursor: pointer;
}

/* Row 3: plan a journey + filters (equal-width buttons) */
.cs-filter-actions {
  display: flex;
  gap: 8px;
}
.cs-filter-actions > .cs-filter-btn,
.cs-filter-actions > .cs-filter-wrap { flex: 1 1 0; min-width: 0; }
.cs-filter-actions .cs-filter-btn { width: 100%; justify-content: center; }

.cs-filter-wrap { position: relative; }
.cs-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 2px solid var(--pink-light);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--brown-lt);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.cs-filter-btn:hover { border-color: var(--pink); color: var(--pink); }
.cs-filter-btn.cs-filter-active { background: var(--pink-pale); border-color: var(--pink); color: var(--pink); }
.cs-filter-badge {
  background: var(--pink);
  color: white;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 800;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}
.cs-filter-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: white;
  border: 1px solid var(--pink-light);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  padding: 12px 16px;
  z-index: 500;
  min-width: 210px;
  flex-direction: column;
  gap: 10px;
}
.cs-filter-panel.open { display: flex; }
.cs-filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  cursor: pointer;
  color: var(--brown);
  white-space: nowrap;
  user-select: none;
}
.cs-filter-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--pink);
  cursor: pointer;
  flex-shrink: 0;
}
.cs-filter-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* Combined Filters panel (Status + Dietary + Payment + Open now) */
.cs-filter-panel--all {
  left: auto;
  right: 0;
  min-width: 250px;
  max-width: min(92vw, 330px);
  max-height: 62vh;
  overflow-y: auto;
  gap: 14px;
}
.cs-filter-group { display: flex; flex-direction: column; gap: 9px; }
.cs-filter-group + .cs-filter-group { border-top: 1px solid #f0e8e2; padding-top: 13px; }
.cs-filter-group-title {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--pink);
}

/* ── Map popup ──────────────────────────────────────────────── */
.cs-popup-inner { padding: 2px; min-width: 200px; }

/* Row 1: name + open/closed badge */
.cs-popup-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.cs-popup-name    { font-weight: 700; font-size: .97rem; color: var(--brown); line-height: 1.3; flex: 1; }
.cs-popup-address { font-size: .8rem; color: var(--brown-lt); margin-bottom: 4px; }
.cs-popup-desc    { font-size: .8rem; color: var(--brown-lt); margin-bottom: 4px; line-height: 1.5; }

/* Divider between info and actions */
.cs-popup-divider {
  border-top: 1px solid #f0e8e2;
  margin: 8px 0;
}

/* Row 4: social icons (left) + opening times button (right) */
.cs-popup-social-oh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.cs-popup-socials { display: flex; gap: 10px; align-items: center; }
.cs-popup-social  { display: flex; align-items: center; transition: opacity .15s; }
.cs-popup-social:hover { opacity: .75; }
.cs-popup-social svg { display: block; }

/* Row 5: directions + submit photo side by side */
.cs-popup-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 4px;
}

/* Social icons on list cards */
.cs-card-socials { display: flex; gap: 8px; align-items: center; }
.cs-card-social  { display: flex; align-items: center; opacity: .85; transition: opacity .15s; }
.cs-card-social:hover { opacity: 1; }
.cs-card-social svg { display: block; width: 22px; height: 22px; }

/* Share button (popup + list card) */
.cs-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--brown-lt);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color .15s;
}
.cs-share-btn:hover { color: var(--pink); }
.cs-popup-directions,
.cs-popup-directions:link,
.cs-popup-directions:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--pink);
  color: white;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
  line-height: 1.3;
}
.cs-popup-directions:hover,
.cs-popup-directions:active { background: var(--brown); color: white; }

/* ── Marker cluster brand colours ───────────────────────────── */
.marker-cluster-small       { background-color: rgba(194,24,91,.18); }
.marker-cluster-small  div  { background-color: rgba(194,24,91,.60); }
.marker-cluster-medium      { background-color: rgba(194,24,91,.28); }
.marker-cluster-medium div  { background-color: rgba(194,24,91,.72); }
.marker-cluster-large       { background-color: rgba(194,24,91,.38); }
.marker-cluster-large  div  { background-color: rgba(194,24,91,.85); }
.marker-cluster div { color: white; font-weight: 700; }

/* ── Panel show/hide (mobile) ───────────────────────────────── */
@media (max-width: 767px) {
  .cs-map-page #cs-map-panel,
  .cs-map-page #cs-list-panel {
    display: none;
    flex-direction: column;
  }
  .cs-map-page #cs-map-panel.cs-panel--active,
  .cs-map-page #cs-list-panel.cs-panel--active {
    display: flex;
  }
}

/* ── Desktop side-by-side layout ───────────────────────────── */
@media (min-width: 768px) {
  .cs-map-page #cs-results-section {
    flex-direction: row;
  }
  .cs-tabs-bar {
    display: none;
  }
  .cs-map-page #cs-map-panel {
    display: flex;
    flex: 1;
    min-height: 0;
  }
  .cs-map-page #cs-list-panel {
    display: flex;
    width: 360px;
    flex: none;
    flex-shrink: 0;
    border-left: 1px solid var(--pink-light);
    overflow-y: auto;
    min-height: 0;
  }
}

/* ── Sort bar + list header ─────────────────────────────────── */
.cs-list-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 8px;
  background: var(--cream);
  border-bottom: 1px solid var(--pink-light);
  flex-shrink: 0;
}
.cs-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cs-sort-label {
  font-size: .78rem;
  color: var(--brown-lt);
  font-weight: 600;
  white-space: nowrap;
}
.cs-sort-btn {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--brown-lt);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.cs-sort-btn:hover  { background: var(--pink-pale); border-color: var(--pink-light); color: var(--brown); }
.cs-sort-active     { background: var(--pink-pale); border-color: var(--pink); color: var(--pink); font-weight: 700; }
.cs-sort-select {
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  color: var(--brown);
  padding: 5px 10px;
  border: 1px solid var(--pink-light);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.cs-sort-select:focus { outline: none; border-color: var(--pink); }
.cs-count-list {
  font-size: .78rem;
  color: var(--brown-lt);
  align-self: flex-end;
}

/* ── Admin pagination ───────────────────────────────────────── */
.cs-admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 0 4px;
  font-size: .88rem;
  color: var(--brown-lt);
}
.cs-admin-pagination button {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: .85rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .1s, border-color .1s;
}
.cs-admin-pagination button:hover:not(:disabled) { background: var(--pink-pale); border-color: var(--pink-light); }
.cs-admin-pagination button:disabled { opacity: .35; cursor: not-allowed; }

/* ── Opening hours widget ───────────────────────────────────── */
.oh-widget {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.oh-day-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.oh-day-row {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fafafa;
  border: 1px solid #ede0d6;
}
.oh-day-toggle {
  display: flex;
  align-items: center;
  padding-top: 9px;
  cursor: pointer;
}
.oh-day-label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--brown);
}
.oh-day-toggle input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--pink);
  cursor: pointer;
}
.oh-slots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.oh-slots-hidden { display: none !important; }
.oh-from, .oh-to {
  padding: 4px 8px;
  border: 1px solid #d5c8c0;
  border-radius: 5px;
  font-size: .85rem;
  font-family: inherit;
  color: var(--brown);
  width: 100%;
}
.oh-to-sep {
  color: var(--brown-lt);
  font-weight: 700;
  font-size: .9rem;
}

/* ── Open / Closed badges ───────────────────────────────────── */
.cs-oh-open {
  display: inline-block;
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
  border-radius: 12px;
  padding: 2px 9px;
  font-size: .75rem;
  font-weight: 700;
  vertical-align: middle;
}
.cs-oh-closed {
  display: inline-block;
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
  border-radius: 12px;
  padding: 2px 9px;
  font-size: .75rem;
  font-weight: 700;
  vertical-align: middle;
}

/* ── Owner-set open/closed: compact ✔ tick on list cards ────────────────── */
.cs-oh-by { font-weight: 900; opacity: .85; }

/* ── "The baker has confirmed…" customer-facing notice (pin / detail / page) */
.cs-baker-notice {
  border-radius: 12px;
  padding: 11px 14px;
  margin: 6px 0 12px;
  line-height: 1.45;
}
.cs-baker-notice--open   { background: #e7f6e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.cs-baker-notice--closed { background: #fdecea; color: #b71c1c; border: 1px solid #f5b8b2; }
.cs-baker-notice-line        { font-size: .95rem; }
.cs-baker-notice-line strong { font-weight: 800; }
.cs-baker-notice-since {
  font-size: .8rem;
  opacity: .78;
  margin-top: 2px;
}
.cs-baker-notice-quote {
  margin: 7px 0 0;
  padding: 0;
  font-style: italic;
  font-size: .95rem;
  opacity: .92;
}
/* Compact inside the map pin popup */
.cs-popup-inner .cs-baker-notice { padding: 8px 10px; margin: 6px 0 2px; }
.cs-popup-inner .cs-baker-notice-line,
.cs-popup-inner .cs-baker-notice-quote { font-size: .78rem; }
.cs-popup-inner .cs-baker-notice-since { font-size: .7rem; }

/* ── Owner's one-tap status link box (Edit My Shed) ─────────────────────── */
.cs-quicklink {
  background: linear-gradient(135deg, #fff5f9, #fff);
  border: 2px solid var(--pink-light);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.cs-quicklink-head { font-weight: 800; color: var(--pink); font-size: 1.02rem; margin-bottom: 4px; }
.cs-quicklink-sub  { font-size: .86rem; color: var(--brown-lt); line-height: 1.5; margin: 0 0 12px; }
.cs-quicklink-row  { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-quicklink-row input {
  flex: 1; min-width: 180px; box-sizing: border-box; padding: 10px 12px; font-size: 14px;
  border: 1px solid #d7ccc8; border-radius: 8px; background: #fff; color: var(--brown); font-family: inherit;
}
.cs-quicklink-copy, .cs-quicklink-open {
  border: none; border-radius: 8px; padding: 10px 16px; font-weight: 700; cursor: pointer;
  font-family: inherit; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center;
}
.cs-quicklink-copy { background: var(--pink); color: #fff; }
.cs-quicklink-open { background: #fff; color: var(--pink); border: 1px solid var(--pink-light); }

/* ── Opening Times button ───────────────────────────────────── */
.cs-oh-btn, .cs-oh-toggle-btn {
  background: none;
  border: 1px solid var(--pink-light);
  border-radius: 6px;
  color: var(--pink);
  font-size: .8rem;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .1s;
}
.cs-oh-btn:hover, .cs-oh-toggle-btn:hover { background: var(--pink-pale); }

/* ── Opening Times modal ────────────────────────────────────── */
.cs-oh-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cs-oh-modal-backdrop.cs-oh-modal--visible { display: flex; }
.cs-oh-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  animation: csOhSlideIn .18s ease;
}
@keyframes csOhSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.cs-oh-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px 12px;
  border-bottom: 1px solid #f0e8e2;
}
.cs-oh-modal-title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--brown);
}
.cs-oh-modal-close {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--brown-lt);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  transition: background .1s;
}
.cs-oh-modal-close:hover { background: #f0e8e2; color: var(--brown); }
.cs-oh-modal-body { padding: 14px 18px 10px; }
.cs-oh-modal-disclaimer {
  font-size: .73rem;
  color: var(--brown-lt);
  font-style: italic;
  border-top: 1px solid #f0e8e2;
  padding: 10px 18px 14px;
}

/* Day list inside modal */
.cs-oh-list {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}
.cs-oh-row {
  display: flex;
  align-items: baseline;
  gap: 0;
  line-height: 1.75;
}
.cs-oh-day-lbl {
  font-size: .82rem;
  font-weight: 600;
  color: var(--brown);
  width: 32px;
  flex-shrink: 0;
}
.cs-oh-day-sep {
  font-size: .82rem;
  color: var(--brown-lt);
  padding: 0 2px;
  flex-shrink: 0;
}
.cs-oh-day-val {
  font-size: .82rem;
  color: var(--brown);
}
.cs-oh-row--closed .cs-oh-day-lbl,
.cs-oh-row--closed .cs-oh-day-val { color: var(--brown-lt); }
.cs-oh-disclaimer {
  font-size: .72rem;
  color: var(--brown-lt);
  font-style: italic;
  border-top: 1px solid #f0e8e2;
  padding-top: 5px;
}

/* ── "Check socials" message (no hours set) ─────────────────── */
.cs-oh-no-times {
  font-size: .78rem;
  color: var(--brown-lt);
  font-style: italic;
}

/* ── Popup open/closed + button row ─────────────────────────── */
/* .cs-popup-oh-row removed — social+OH row now uses .cs-popup-social-oh-row */

/* ── Badge row on list cards ────────────────────────────────── */
.cs-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

/* ── Admin shed card grid ───────────────────────────────────── */
.cs-sheds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* ── Admin shed sort buttons ────────────────────────────────── */
.cs-sort-shed-btn {
  padding: 5px 12px;
  border: 1px solid #d5c8c0;
  border-radius: 6px;
  background: white;
  color: var(--brown-lt);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.cs-sort-shed-btn:hover,
.cs-sort-shed-btn.cs-sort-shed-active {
  background: var(--pink-pale);
  border-color: var(--pink-light);
  color: var(--pink);
}

/* ── Photo strip (map popup + list card) ─────────────────── */
.cs-popup-photos {
  margin: 6px -2px 0;
}
.cs-photo-strip {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: 6px;
  margin-bottom: 2px;
}
.cs-photo-strip::-webkit-scrollbar { height: 4px; }
.cs-photo-strip::-webkit-scrollbar-thumb { background: var(--pink-light); border-radius: 4px; }
.cs-photo-thumb {
  height: 110px;
  min-width: 80px;
  max-width: 160px;
  object-fit: cover;
  border-radius: 6px;
  scroll-snap-align: start;
  flex-shrink: 0;
  display: block;
}
.cs-photo-loading {
  font-size: .75rem;
  color: var(--brown-lt);
  padding: 6px 0;
}

/* Photo button in popup */
.cs-photo-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px dashed var(--pink-light);
  border-radius: 7px;
  color: var(--brown-lt);
  font-size: .78rem;
  padding: 7px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, color .15s;
  text-align: center;
  line-height: 1.3;
}
.cs-photo-submit-btn:hover { border-color: var(--pink); color: var(--pink); }

/* List card photo wrapper + thumbnail */
.cs-card-photo-wrap { position: relative; }
.cs-card-photo {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  display: block;
}
.cs-card-photo-count {
  position: absolute;
  bottom: 6px;
  right: 8px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .73rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  pointer-events: none;
}

/* Popup photo count label */
.cs-photo-count {
  font-size: .78rem;
  color: var(--brown-lt);
  font-weight: 600;
  margin: 6px 0 4px;
}

/* ── Photo upload modal (reuses OH modal structure) ──────── */
.cs-photo-modal { max-width: 420px; }
.cs-photo-modal .form-group { margin-bottom: 12px; }
.cs-photo-modal .form-group label {
  display: block;
  margin-bottom: 4px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--brown-lt);
}
.cs-photo-modal input[type="file"],
.cs-photo-modal input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 2px solid #e0e0e0;
  border-radius: var(--radius);
  font-size: .9rem;
  font-family: inherit;
  color: var(--brown);
  background: white;
}
.cs-photo-modal input:focus { border-color: var(--pink); outline: none; }
.cs-photo-modal .form-actions { margin-top: 8px; }

/* ── Admin pending photos ─────────────────────────────────── */
.cs-photo-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.cs-photo-review-card {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.cs-photo-review-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}
.cs-photo-review-info {
  padding: 7px 9px 4px;
  font-size: .8rem;
}
.cs-photo-review-info strong { font-size: .82rem; color: var(--brown); display: block; margin-bottom: 2px; }

/* ── Admin edit page — photo grid ────────────────────────── */
.cs-photo-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.cs-photo-admin-thumb {
  position: relative;
}
.cs-photo-admin-thumb img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.cs-photo-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,.55);
  color: white;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: .7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .15s;
}
.cs-photo-delete-btn:hover { background: var(--red); }

/* "Set as main" button on photo thumbnails */
.cs-photo-set-main-btn {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0,0,0,.55);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s;
  line-height: 1.5;
}
.cs-photo-set-main-btn:hover { background: var(--pink); }

/* "★ Main" badge overlaid on the chosen main photo */
.cs-photo-main-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: var(--pink);
  color: white;
  border-radius: 4px;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 6px;
  pointer-events: none;
  line-height: 1.5;
}

/* ── Popup redesign: Option A — hero photo card ──────────────────────────── */

/* Remove padding so hero image sits flush at top of popup content */
.cs-popup-inner { padding: 0; min-width: 240px; overflow: hidden; }

/* Hero photo */
.cs-popup-hero {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}
.cs-popup-hero-img {
  width: 100%;
  height: 145px;
  object-fit: cover;
  display: block;
  transition: opacity .2s;
}
.cs-popup-hero:hover .cs-popup-hero-img { opacity: .88; }
.cs-popup-hero-count {
  position: absolute;
  bottom: 8px; right: 10px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Name (now in the body) */
.cs-popup-name {
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--brown);
}

/* Body */
.cs-popup-body {
  padding: 11px 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Status / open / managed / dietary pill row */
.cs-popup-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.cs-popup-open-chip { font-size: .7rem; font-weight: 700; }

/* View details hand-off button */
.cs-popup-details-btn {
  display: block;
  margin-top: 4px;
  background: var(--pink);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: .88rem;
  padding: 10px;
  border-radius: 9px;
  transition: background .15s;
}
.cs-popup-details-btn:hover { background: #a31549; }
.cs-popup-status-chip {
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  color: #fff;
}
.cs-popup-status-verified        { background: var(--green); }
.cs-popup-status-unverified      { background: var(--blue); }
.cs-popup-status-owner_submitted { background: var(--orange); }
.cs-popup-status-closed          { background: var(--red); }

/* Social icons — slightly larger in body */
.cs-popup-body .cs-popup-socials { display: flex; gap: 6px; align-items: center; }
.cs-popup-body .cs-popup-social svg { width: 24px; height: 24px; }

/* "X photos" chip — no-hero fallback */
.cs-popup-view-photos {
  background: none;
  border: 1px solid var(--pink-light);
  color: var(--pink);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  align-self: flex-start;
  transition: background .15s, color .15s;
}
.cs-popup-view-photos:hover { background: var(--pink); color: #fff; }

/* Action bar */
.cs-popup-action-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #f0e8e2;
  padding: 8px 8px 9px;
  gap: 0;
}
.cs-popup-bar-btn {
  background: none;
  border: none;
  color: var(--brown);
  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
  font-family: inherit;
  padding: 3px 7px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 4px;
  transition: color .15s;
  white-space: nowrap;
  line-height: 1.3;
}
.cs-popup-bar-btn:hover,
.cs-popup-bar-btn:focus { color: var(--pink); }
.cs-popup-bar-sep {
  color: #d4c8c0;
  font-size: 1.1rem;
  user-select: none;
  line-height: 1;
  flex-shrink: 0;
}
.cs-popup-bar-btn--na {
  color: #bbb;
  cursor: default;
  pointer-events: none;
  font-weight: 600;
  font-size: .75rem;
}

/* ── Gallery lightbox ────────────────────────────────────────────────────── */
.cs-gallery-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.cs-gallery-backdrop.cs-gallery--visible { display: flex; }

.cs-gallery-modal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 50px 70px;
  box-sizing: border-box;
}
.cs-gallery-close {
  position: absolute;
  top: 14px; right: 18px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  opacity: .85;
  transition: opacity .15s;
  z-index: 1;
}
.cs-gallery-close:hover { opacity: 1; }

.cs-gallery-prev,
.cs-gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 2rem;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 6px;
  z-index: 1;
  transition: background .15s;
  line-height: 1;
}
.cs-gallery-prev { left: 10px; }
.cs-gallery-next { right: 10px; }
.cs-gallery-prev:hover,
.cs-gallery-next:hover { background: rgba(255,255,255,.30); }

.cs-gallery-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#cs-gallery-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 40px rgba(0,0,0,.5);
}
.cs-gallery-counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.85);
  font-size: .9rem;
  font-weight: 600;
  background: rgba(0,0,0,.45);
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .cs-popup-hero-img { height: 120px; }
  .cs-gallery-modal { padding: 48px 50px; }
  .cs-gallery-prev { left: 4px; padding: 8px 10px; font-size: 1.5rem; }
  .cs-gallery-next { right: 4px; padding: 8px 10px; font-size: 1.5rem; }
}

/* ── List card (compact horizontal) ──────────────────────────────────────── */
.cs-card {
  position: relative;
  padding: 10px 12px !important;
  overflow: hidden;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--pink-light) !important;
}
.cs-card--visited { padding-left: 34px !important; }
.cs-card-banner {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 24px;
  background: #1b5e20;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.cs-added-chip {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--blue-pale);
  color: var(--blue);
  border: 1px solid #bbdefb;
  white-space: nowrap;
}
.cs-list-cap-note {
  text-align: center;
  font-size: .78rem;
  color: var(--brown-lt);
  padding: 12px 8px 4px;
}

.cs-card-thumb {
  width: 78px;
  height: 78px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--pink-pale), var(--pink-light));
  cursor: pointer;
}
.cs-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s; }
.cs-card-thumb:hover img { opacity: .88; }
.cs-card-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  cursor: default;
}

.cs-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cs-card-name { font-weight: 700; font-size: .98rem; line-height: 1.25; color: var(--brown); }
.cs-card-town {
  font-size: .8rem;
  color: var(--brown-lt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-card-openrow { margin: 1px 0; }
.cs-card-statline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  color: var(--brown-lt);
  margin-top: 2px;
}
.cs-card-stat { font-weight: 600; }
.cs-card-chev {
  flex-shrink: 0;
  color: var(--pink);
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0 2px;
  align-self: center;
}

/* Status + open chips */
.cs-card-status-chip {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  color: #fff;
}
.cs-card-status-verified        { background: var(--green); }
.cs-card-status-unverified      { background: var(--blue); }
.cs-card-status-owner_submitted { background: var(--orange); }
.cs-card-status-closed          { background: var(--red); }
.cs-card-open-chip { font-size: .68rem; font-weight: 700; }

/* Card status line (ownership pill + open/closed) then metrics line (likes | photos) */
.cs-card-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.cs-card-metrics {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  color: var(--brown-lt);
  margin-top: 4px;
}
.cs-card-sep  { color: var(--pink-light); font-weight: 700; }
.cs-card-dist { font-weight: 700; color: var(--pink); }
.cs-card-open { font-size: .7rem; font-weight: 700; color: var(--green); }
.cs-card-shut { font-size: .7rem; font-weight: 700; color: var(--red); }

/* ── Mobile map card (pin tap → compact card over the map) ────────────────── */
.cs-map-card {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--pink-light);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  animation: cs-mc-up .18s ease;
}
.cs-map-card[hidden] { display: none; }

/* "We've visited" ribbon — matches the list card */
.cs-map-card-banner {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 24px;
  background: #1b5e20;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 14px 0 0 14px;
  z-index: 1;
}
.cs-map-card--visited .cs-map-card-banner { display: flex; }
.cs-map-card--visited .cs-map-card-body   { padding-left: 34px; }
@keyframes cs-mc-up {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: none;             opacity: 1; }
}
.cs-map-card-close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--brown-lt);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.cs-map-card-body {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
}
.cs-mc-thumb {
  flex-shrink: 0;
  width: 74px;
  height: 74px;
  border-radius: 10px;
  overflow: hidden;
  background: #fdeef4;
}
.cs-mc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-mc-thumb--empty { display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.cs-mc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 18px; }
.cs-mc-visited { font-size: .64rem; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: .3px; }
.cs-mc-name { font-weight: 700; font-size: .95rem; line-height: 1.2; color: var(--brown); }
.cs-mc-addr {
  font-size: .76rem;
  color: var(--brown-lt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-mc-status  { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 1px; }
.cs-mc-metrics { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--brown-lt); margin-top: 2px; }
.cs-mc-socials { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.cs-mc-chev    { align-self: center; color: var(--pink); font-size: 1.5rem; font-weight: 700; }

/* ── In-panel shed detail view ───────────────────────────────────────────── */
#cs-shed-detail { padding-bottom: 40px; }
.cs-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--pink);
  font-weight: 700;
  font-size: .85rem;
  font-family: inherit;
  cursor: pointer;
  padding: 12px 16px 8px;
}
.cs-detail-back:hover { text-decoration: underline; }
.cs-detail-hero {
  cursor: pointer;
  overflow: hidden;
  position: relative;
  margin: 0 16px;
  border-radius: 12px;
}
.cs-detail-hero img { width: 100%; max-height: 260px; object-fit: cover; display: block; transition: opacity .2s; }
.cs-detail-hero:hover img { opacity: .9; }
.cs-detail-hero-count {
  position: absolute;
  bottom: 10px; right: 12px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.cs-detail-body { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 11px; }
.cs-detail-banner {
  background: #1b5e20;
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
  letter-spacing: .3px;
}
.cs-detail-name { font-size: 1.3rem; color: var(--pink); line-height: 1.2; }
.cs-detail-pills { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cs-detail-visit { font-size: .82rem; color: var(--brown-lt); font-style: italic; }
.cs-detail-votes { display: flex; align-items: center; gap: 8px; }
.cs-detail-address { font-size: .9rem; color: var(--brown-lt); }
.cs-detail-desc { font-size: .95rem; line-height: 1.65; color: var(--brown); }
.cs-detail-hours {
  background: #fff;
  border: 1px solid var(--pink-light);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.cs-detail-hours h3 { font-size: .95rem; color: var(--pink); margin-bottom: 8px; }
.cs-detail-hours-note { font-size: .72rem; color: var(--brown-lt); margin-top: 8px; }
.cs-detail-socials { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* Placeholder hero (no photo) — big cupcake on a soft pink field */
.cs-shedpage-hero--empty,
.cs-detail-hero--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pink-pale);
  cursor: default;
}
.cs-shedpage-hero--empty { min-height: 200px; }
.cs-detail-hero--empty  { min-height: 150px; }
.cs-shedpage-hero-emoji { font-size: 5rem; line-height: 1; }
.cs-detail-hero-emoji   { font-size: 4rem; line-height: 1; }

/* "Opening times aren't listed yet" placeholder line */
.cs-shedpage-hours-empty,
.cs-detail-hours-empty {
  font-size: .85rem;
  color: var(--brown-lt);
  margin: 0;
}

/* "Check out their socials:" label */
.cs-shedpage-socials-label,
.cs-detail-socials-label {
  font-weight: 700;
  font-size: .8rem;
  color: var(--brown-lt);
}
.cs-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cs-detail-gallery h3 { font-size: .95rem; color: var(--pink); margin-bottom: 8px; }
.cs-detail-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.cs-detail-gallery-grid img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  display: block;
}

/* ── Header visited chip ─────────────────────────────────────────────────── */
header .cs-header-visited {
  margin-left: auto;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Homepage shed mission ───────────────────────────────────────────────── */
.cs-mission-section {
  background: #fff;
  border: 1px solid var(--pink-light);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.cs-mission-section h2,
.cs-mission-section h3 {
  color: var(--pink);
  font-size: 1.15rem;
  margin-bottom: 10px;
}
.cs-mission-section p {
  font-size: .93rem;
  line-height: 1.65;
  margin-bottom: 14px;
}
.cs-mission-bar {
  background: var(--pink-pale);
  border-radius: 20px;
  height: 26px;
  overflow: hidden;
}
.cs-mission-fill {
  background: linear-gradient(90deg, var(--pink) 0%, #e91e63 100%);
  height: 100%;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  min-width: 34px;
  transition: width .6s ease;
}
.cs-mission-fill span {
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}

/* ── Map loading overlay ─────────────────────────────────────────────────── */
/* isolation:isolate gives the map panel its own stacking context, so Leaflet's
   z-index:1000 controls (zoom +/-, attribution) stay contained BELOW the sticky
   header — otherwise they leak to the root and paint over the search dropdown. */
#cs-map-panel { position: relative; isolation: isolate; }
#cs-loading {
  position: absolute;
  inset: 0;
  z-index: 900;
  background: rgba(255,251,248,.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  color: var(--brown-lt);
  font-size: .95rem;
}
.cs-loading-emoji {
  font-size: 2.2rem;
  animation: cs-loading-bounce 1s ease-in-out infinite;
}
@keyframes cs-loading-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ── Individual shed page ────────────────────────────────────────────────── */
.cs-shedpage {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 20px 52px;
  flex: 1;
  width: 100%;
}
/* Active-filter chips (map) */
.cs-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 12px 8px;
}
.cs-af-label { font-size: .78rem; color: var(--brown-lt); font-weight: 700; }
.cs-af-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--pink-pale);
  color: var(--pink);
  border: 1px solid var(--pink-light);
  border-radius: 20px;
  padding: 4px 6px 4px 12px;
  font-size: .78rem;
  font-weight: 700;
}
.cs-af-chip-x {
  background: none;
  border: none;
  color: var(--pink);
  cursor: pointer;
  font-size: .72rem;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 50%;
}
.cs-af-chip-x:hover { background: rgba(194, 24, 91, .15); }

/* Previous / next shed navigation */
.cs-shed-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.cs-shed-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--pink-light);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--pink);
  text-decoration: none;
  transition: background .15s;
}
.cs-shed-nav-btn:hover { background: var(--pink-pale); }
.cs-shed-nav-btn--off { color: var(--brown-lt); opacity: .45; pointer-events: none; }

.cs-shedpage-hero {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.cs-shedpage-hero img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  display: block;
}
.cs-shedpage-name {
  color: var(--pink);
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.cs-shedpage-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cs-shedpage-status {
  font-size: .74rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 20px;
  color: #fff;
}
.cs-shedpage-status-verified        { background: var(--green); }
.cs-shedpage-status-unverified      { background: var(--blue); }
.cs-shedpage-status-owner_submitted { background: var(--orange); }
.cs-shedpage-status-closed          { background: var(--red); }
.cs-shedpage-visit {
  font-size: .8rem;
  color: var(--brown-lt);
  font-style: italic;
}
.cs-shedpage-address {
  font-size: .9rem;
  color: var(--brown-lt);
  margin-bottom: 10px;
}
.cs-shedpage-desc {
  font-size: .95rem;
  line-height: 1.7;
  margin-bottom: 14px;
}
.cs-shedpage-hours {
  background: #fff;
  border: 1px solid var(--pink-light);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 16px 0;
  max-width: 320px;
}
.cs-shedpage-hours h2 {
  font-size: .95rem;
  color: var(--pink);
  margin-bottom: 10px;
}
.cs-shedpage-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 0;
}
.cs-shedpage-socials a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pink);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
}
.cs-shedpage-socials a svg { display: block; flex-shrink: 0; }
.cs-shedpage-socials a:hover { text-decoration: underline; }
.cs-shedpage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}
.cs-btn-secondary {
  display: inline-block;
  background: #fff;
  color: var(--pink);
  border: 2px solid var(--pink);
  font-weight: 700;
  font-size: .9rem;
  padding: 10px 22px;
  border-radius: 26px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.cs-btn-secondary:hover { background: var(--pink-pale); }
.cs-shedpage-gallery h2 {
  font-size: .95rem;
  color: var(--pink);
  margin-bottom: 10px;
}
.cs-shedpage-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.cs-shedpage-gallery-grid img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ── Community confirmations ("still there — I visited!") ────────────────── */
.cs-confirm-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.cs-confirm-line {
  font-size: .74rem;
  color: var(--brown-lt);
  font-style: italic;
}
.cs-confirm-btn {
  background: #fff;
  border: 1px solid var(--green);
  color: var(--green);
  font-weight: 700;
  font-size: .74rem;
  font-family: inherit;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.cs-confirm-btn:hover { background: var(--green-pale); }
.cs-confirm-btn:disabled {
  border-color: #c5dcc7;
  color: #7cae80;
  background: var(--green-pale);
  cursor: default;
}
.cs-shedpage-confirm {
  font-size: .82rem;
  color: var(--brown-lt);
  font-style: italic;
  margin-bottom: 10px;
}

/* Shed-page vote row */
.cs-shedpage-votes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.cs-shedpage-votes-label { font-size: .85rem; font-weight: 700; color: var(--brown-lt); }

/* ── Claim your shed ──────────────────────────────────────────────────────── */
.cs-owner-chip {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--pink-pale);
  color: var(--pink);
  border: 1px solid var(--pink-light);
  white-space: nowrap;
}
.cs-claim-section {
  background: #fff;
  border: 1px dashed var(--pink-light);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 22px;
}
.cs-claim-section h2 { font-size: 1.05rem; color: var(--pink); margin-bottom: 8px; }
.cs-claim-section > p { font-size: .92rem; color: var(--brown-lt); line-height: 1.6; margin-bottom: 14px; }
.cs-shedpage-owned {
  background: var(--green-pale);
  border: 1px solid #c5dcc7;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-top: 22px;
  font-size: .9rem;
  color: var(--green);
}

/* Claim link on map popups + list cards */
.cs-claim-link {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 2px 0;
  font-family: inherit;
  font-size: .74rem;
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
  text-decoration: underline;
}
.cs-claim-link:hover { color: var(--brown); }

/* Claim modal */
.cs-claim-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cs-claim-backdrop.cs-claim--visible { display: flex; }
.cs-claim-modal {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  width: 100%;
  max-width: 440px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
}
.cs-claim-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--pink);
  margin-bottom: 12px;
}
.cs-claim-modal-close {
  background: none;
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  color: #999;
  padding: 4px 8px;
  line-height: 1;
}
.cs-claim-modal-intro {
  font-size: .9rem;
  color: var(--brown-lt);
  line-height: 1.55;
  margin-bottom: 14px;
}
/* Nearby-shed suggestions ("is this your shed?") */
.near-item {
  border: 1px solid var(--pink-light);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.near-item--owned { opacity: .75; }
.near-item-main { font-weight: 700; color: var(--brown); }
.near-item-sub  { font-size: .78rem; color: var(--brown-lt); margin-top: 2px; line-height: 1.4; }
.near-item .near-claim-btn { margin-top: 8px; width: 100%; }

/* ── Custom place search (our input + dropdown, Google suggestions) ──────── */
.cs-pac-wrap { position: relative; }
.cs-search-box {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100%;
}
.cs-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 34px 10px 12px;
  border: 1px solid #d7ccc8;
  border-radius: 8px;
  font-size: 16px; /* 16px stops iOS Safari auto-zooming the field on focus */
  font-family: inherit;
  color: var(--brown);
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.cs-search-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(194,24,91,.1);
}
/* Joined variant (main map search, next to the 📍 button) */
.cs-pac-wrap--joined .cs-search-input {
  border: 2px solid var(--pink-light);
  border-radius: 8px 0 0 8px;
  height: 100%;
  box-shadow: none;
}
.cs-pac-wrap--joined .cs-search-input:focus { border-color: var(--pink); }
.cs-search-clear {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #b6a89f;
  font-size: .92rem;
  cursor: pointer;
  padding: 5px 7px;
  line-height: 1;
}
.cs-search-clear:hover { color: var(--pink); }
.cs-search-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--pink-light);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.16);
  z-index: 9500;
  max-height: 320px;         /* never run off the bottom on small screens */
  overflow-y: auto;          /* scroll the list internally if it's taller  */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* scrolling the list must not pan the map behind it */
}
.cs-search-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #f5eee9;
  padding: 10px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: .86rem;
  color: var(--brown);
}
.cs-search-item:hover,
.cs-search-item--hl { background: var(--pink-pale); }
/* Shed-name matches: tinted + pink label so they stand out from place results */
.cs-search-item--shed { background: var(--pink-pale); }
.cs-search-item--shed:hover,
.cs-search-item--shed.cs-search-item--hl { background: var(--pink-light); }
.cs-search-item--shed .cs-search-main { color: var(--pink); }
.cs-search-main { font-weight: 700; display: block; }
.cs-search-sec {
  display: block;
  color: var(--brown-lt);
  font-size: .76rem;
  margin-top: 1px;
}
.cs-search-powered {
  font-size: .64rem;
  color: #b6a89f;
  text-align: right;
  padding: 4px 10px;
  background: #faf6f3;
}

/* ── Address picker (postcode + draggable pin — replaces Google autocomplete) ─ */
.cs-ap-row { display: flex; gap: 8px; }
.cs-ap-postcode, .cs-ap-street {
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid #d7ccc8;
  border-radius: 8px;
  font-size: 16px;              /* 16px stops iOS zooming the field on focus */
  font-family: inherit;
  color: var(--brown);
  background: #fff;
  outline: none;
}
.cs-ap-postcode { flex: 1; min-width: 0; text-transform: uppercase; }
.cs-ap-postcode::placeholder, .cs-ap-street::placeholder { text-transform: none; }
.cs-ap-street  { width: 100%; margin-top: 8px; }
.cs-ap-select {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 11px 12px;
  border: 1px solid var(--pink);
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  color: var(--brown);
  background: #fff;
}
.cs-ap-postcode:focus, .cs-ap-street:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(194,24,91,.1); }
.cs-ap-find {
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  padding: 0 20px;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  font-family: inherit;
  cursor: pointer;
}
.cs-ap-find:disabled { opacity: .6; }
.cs-ap-status { margin-top: 7px; font-size: .85rem; line-height: 1.4; color: var(--brown-lt); }
.cs-ap-status--err { color: var(--red); }
.cs-ap-status--ok  { color: var(--green); }
.cs-ap-map {
  height: 240px;
  margin-top: 10px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e0d3cc;
}
.cs-ap-map .leaflet-container { height: 100%; width: 100%; }
.cs-ap-pin { font-size: 28px; line-height: 1; text-align: center; background: none; border: 0; cursor: grab; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.cs-ap-pin:active { cursor: grabbing; }
.cs-ap-hint { font-size: .8rem; color: var(--brown-lt); margin: 6px 2px 0; }
.cs-ap-preview {
  margin-top: 8px;
  font-size: .9rem;
  color: var(--green);
  line-height: 1.45;
}

/* ── Search this area pill ───────────────────────────────────────────────── */
.cs-area-btn {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 850;
  background: #fff;
  color: var(--pink);
  border: 1px solid var(--pink-light);
  border-radius: 22px;
  padding: 9px 18px;
  font-size: .84rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  white-space: nowrap;
  transition: background .15s;
}
.cs-area-btn:hover { background: var(--pink-pale); }
.cs-area-btn:active { transform: translateX(-50%) scale(.97); }

/* ── Journey mode ────────────────────────────────────────────────────────── */

/* Planner modal */
.cs-journey-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 8000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cs-journey-backdrop.cs-journey--visible { display: flex; }
.cs-journey-modal {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
}
.cs-journey-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--pink);
}
.cs-journey-modal-close {
  background: none;
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  color: #999;
  padding: 4px 8px;
  line-height: 1;
}
.cs-journey-field label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  color: var(--brown-lt);
  margin-bottom: 5px;
}
.cs-journey-field .cs-pac-wrap { width: 100%; }
.cs-journey-field input[type="range"] {
  width: 100%;
  accent-color: var(--pink);
  display: block;
}
.cs-journey-from-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.cs-journey-from-row .cs-pac-wrap { flex: 1; min-width: 0; }
.cs-journey-loc-btn {
  background: #fff;
  border: 1px solid var(--pink-light);
  border-radius: 8px;
  padding: 0 13px;
  font-size: 1.05rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.cs-journey-loc-btn:hover { background: var(--pink-pale); }
.cs-journey-loc-btn:disabled { opacity: .6; cursor: default; }
.cs-journey-loc-status {
  font-size: .74rem;
  font-weight: 600;
  color: var(--green);
  margin: 6px 0 0;
}
#cs-journey-find {
  width: 100%;
  font-size: .95rem;
  padding: 12px;
}
.cs-journey-hint {
  font-size: .72rem;
  color: #b6a89f;
  margin: 0;
}

/* Journey "Add a stop" — optional via points between From and To */
.cs-journey-stops { display: flex; flex-direction: column; gap: 8px; }
.cs-journey-stops:empty { display: none; }
.cs-journey-stop-row { display: flex; align-items: stretch; gap: 6px; }
.cs-journey-stop-row .cs-pac-wrap { flex: 1; min-width: 0; }
.cs-journey-stop-remove {
  flex-shrink: 0;
  width: 38px;
  border: 1px solid var(--pink-light);
  border-radius: 8px;
  background: #fff;
  color: var(--brown-lt);
  font-size: .9rem;
  cursor: pointer;
}
.cs-journey-stop-remove:hover { background: var(--pink-pale); color: var(--red); }
.cs-journey-add-stop {
  align-self: flex-start;
  background: none;
  border: 1px dashed var(--pink);
  border-radius: 8px;
  color: var(--pink);
  font-weight: 700;
  font-size: .82rem;
  padding: 7px 12px;
  cursor: pointer;
}
.cs-journey-add-stop:hover { background: var(--pink-pale); }

/* Bottom-sheet style on phones */
@media (max-width: 640px) {
  .cs-journey-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .cs-journey-modal {
    max-width: none;
    border-radius: 16px 16px 0 0;
    padding-bottom: 28px;
  }
}

/* Journey strip (slim bar under the filter bar while a journey is active) */
.cs-journey-strip {
  position: relative;   /* anchors the Current route panel below */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--pink-pale);
  border-top: 1px solid var(--pink-light);
  border-bottom: 1px solid var(--pink-light);
  padding: 7px 16px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--brown);
}
.cs-journey-strip-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.cs-journey-strip-actions button {
  background: #fff;
  border: 1px solid var(--pink-light);
  border-radius: 16px;
  padding: 4px 12px;
  font-weight: 700;
  font-size: .76rem;
  font-family: inherit;
  color: var(--pink);
  cursor: pointer;
  white-space: nowrap;
}
.cs-journey-strip-actions button:hover { background: var(--pink-pale); }
#cs-journey-exit:hover {
  color: var(--red);
  border-color: var(--red);
}

/* Tick box on on-route cards */
.cs-journey-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pink-pale);
  border: 1px solid var(--pink-light);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--pink);
  cursor: pointer;
  user-select: none;
}
.cs-journey-pick input {
  width: 17px;
  height: 17px;
  accent-color: var(--pink);
  cursor: pointer;
  margin: 0;
}

/* "Take me to cake" bar at the bottom of the list panel */
.cs-journey-go {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 10px 12px;
  background: var(--cream);
  border-top: 1px solid var(--pink-light);
  text-align: center;
}
.cs-journey-go .cs-btn-primary {
  width: 100%;
  font-size: .95rem;
}
.cs-journey-go .cs-btn-primary:disabled {
  opacity: .55;
  cursor: default;
}

/* ── Routing-service outage notice ──────────────────────────────────────────
   Amber, not red: the route planner is unavailable but the site isn't broken. */
.cs-routing-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 16px;
  background: var(--orange-pale);
  border-top: 1px solid #ffcc80;
  border-bottom: 1px solid #ffcc80;
  font-size: .8rem;
  line-height: 1.4;
  color: #8a4b00;
}
.cs-routing-notice-text { flex: 1 1 auto; }
.cs-routing-notice-x {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0 2px;
  font-size: .82rem;
  font-family: inherit;
  color: #8a4b00;
  opacity: .65;
  cursor: pointer;
}
.cs-routing-notice-x:hover { opacity: 1; }

/* Same message inside the journey modal — the page's error strip would be
   behind this modal's backdrop (z-index 8000), so it needs its own. */
.cs-journey-warn {
  background: var(--orange-pale);
  border: 1px solid #ffcc80;
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: .82rem;
  line-height: 1.45;
  color: #8a4b00;
}

/* "Plan a journey" button while routing is down */
.cs-filter-btn--warn {
  background: var(--orange-pale);
  border-color: #ffcc80;
  color: #8a4b00;
}

/* ── "Current route" panel ──────────────────────────────────────────────────
   Drops out of the journey strip, so it's reachable from the Map tab and the
   List tab alike. Overlays rather than pushing content down — vertical space on
   the map page is already tight (see the --app-vh note above). */
/* Cake-run button. Shared appearance here; each variant positions itself below.
   `position: relative` is load-bearing — the count badge is absolutely positioned
   and must anchor to the button, not to some ancestor. */
.cs-route-fab {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--pink);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  cursor: pointer;
  font-family: inherit;
}
.cs-route-fab[hidden] { display: none; }
.cs-route-fab:active  { transform: scale(.94); }
.cs-route-fab-icon    { font-size: 1.6rem; line-height: 1; }
.cs-route-fab-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--pink);
  border: 2px solid var(--pink);
  border-radius: 13px;
  font-size: .82rem;
  font-weight: 800;
}
/* Nothing picked yet: still visible (it's the way back to the route) but quieter */
.cs-route-fab--empty { opacity: .82; }
.cs-route-fab--empty .cs-route-fab-count {
  color: var(--brown-lt);
  border-color: var(--pink-light);
}

/* Map variant: floats over the map's top-right corner. Absolute inside
   #cs-map-panel (already position:relative + isolation:isolate, so this z-index is
   scoped to the map). Top-right is the only free corner — Leaflet puts its zoom
   control top-left, the OpenStreetMap attribution sits bottom-right, and the
   mobile map card spans the bottom. */
.cs-route-fab--map {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1100;          /* above Leaflet's controls (1000) and the map card */
}

/* List variant: at the end of the sort row, directly above the count. A bit
   smaller than the map's, since it sits in a toolbar rather than floating over a
   map. Hidden on desktop, where both panels are visible at once and the map's
   copy is already on screen — two cupcakes would just be confusing. */
.cs-route-fab--list {
  margin-left: auto;
  width: 48px;
  height: 48px;
  border-width: 2px;
}
.cs-route-fab--list .cs-route-fab-icon  { font-size: 1.3rem; }
.cs-route-fab--list .cs-route-fab-count {
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  font-size: .74rem;
}
@media (min-width: 768px) {
  .cs-route-fab--list { display: none; }
}

/* Keep the sort row — and so the cake-run button — in view while the list is
   scrolled, otherwise the button would disappear the moment you started browsing
   sheds, which is exactly when you are ticking them. #cs-list-panel is the
   scroll container (overflow-y: auto), so sticky resolves against it. */
.cs-list-header {
  position: sticky;
  top: 0;
  z-index: 6;
}

/* The cake-run dialog — full width on a phone, so the itinerary finally has room */
.cs-route-modal { max-width: 460px; }
.cs-route-body {
  max-height: 52vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  /* matches the -6px bleed on .cs-route-item, so rows can run to the edges
     without pushing a horizontal scrollbar into the dialog */
  padding: 0 6px;
  margin-bottom: 14px;
}
.cs-route-go { width: 100%; font-size: .95rem; }
/* The shared :disabled is white-on-white, which would vanish against this
   dialog — give it a visibly inactive look instead */
.cs-route-go:disabled {
  background: var(--pink-pale);
  color: var(--brown-lt);
  opacity: 1;
  cursor: default;
}

.cs-route-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}
.cs-route-cap { font-size: .72rem; font-weight: 700; color: var(--brown-lt); white-space: nowrap; }

.cs-route-list { list-style: none; margin: 0; padding: 0; }
.cs-route-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  border-bottom: 1px dashed #f0e8e2;
}
.cs-route-item:last-child { border-bottom: 0; }
.cs-route-item[data-id] { cursor: pointer; }
.cs-route-item[data-id]:hover { background: var(--pink-pale); }
.cs-route-item--end { opacity: .85; }

.cs-route-marker {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}
.cs-route-marker--shed {
  background: var(--pink);
  color: #fff;
  border-radius: 50%;
  font-size: .76rem;
  font-weight: 800;
}
.cs-route-marker--via {
  background: var(--blue-pale);
  border-radius: 50%;
}

.cs-route-text { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.cs-route-text b {
  display: block;
  font-size: .84rem;
  font-weight: 700;
  color: var(--brown);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-route-text span {
  display: block;
  font-size: .71rem;
  font-weight: 400;
  color: var(--brown-lt);
}

.cs-route-actions { display: flex; gap: 3px; flex-shrink: 0; }
.cs-route-actions button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #fff;
  border: 1px solid var(--pink-light);
  border-radius: 7px;
  color: var(--pink);
  font-family: inherit;
  font-size: .7rem;
  line-height: 1;
  cursor: pointer;
}
.cs-route-actions button:hover:not(:disabled) { background: var(--pink-pale); }
.cs-route-actions button:disabled { opacity: .3; cursor: default; }
.cs-route-actions .cs-route-drop { color: var(--red); border-color: #f0cccc; }
.cs-route-actions .cs-route-drop:hover { background: var(--red-pale); }

.cs-route-note {
  margin: 10px 0 0;
  font-size: .71rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--brown-lt);
}
.cs-route-empty {
  padding: 6px 4px;
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--brown-lt);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME PAGE + SITE FOOTER
   The home page used to be a column of identical white boxes with thin pink borders.
   Now: full-bleed colour bands with wavy (frosting) top edges, alternating left/right,
   and a few things drawn rather than boxed — a sliced-cake progress plate, a taped-up
   polaroid, the route planner shown as the thing itself, a rubber stamp, a pinned photo,
   and little sheds standing in the grass. All scoped under .v2 / .v2-* so nothing else
   on the site changes. The footer is butter icing over a thin golden sponge strip —
   the header's two layers, flipped. The old .cs-home / .cs-mission-card / .cs-nosignup /
   .cs-fb-card / .cs-owner-* / .cs-route-feature rules above are now unused by the home
   page and can be deleted in a later tidy-up.
   ═══════════════════════════════════════════════════════════════════════════ */
.v2{overflow-x:clip}
.v2 section{position:relative}
.v2 a.cs-btn-primary{text-decoration:none}
.v2-in{max-width:1000px;margin:0 auto;padding:0 22px;position:relative;z-index:1}
.v2-band{padding:30px 0 64px}
.v2-wave{position:absolute;left:0;bottom:100%;width:100%;height:clamp(26px,5vw,56px);display:block;margin-bottom:-1px;pointer-events:none}
.v2-sprinkles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.v2-sp{position:absolute;width:15px;height:5.5px;border-radius:4px;opacity:.9}

.v2-h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.6vw,2.05rem);line-height:1.15;color:var(--pink);margin:0 0 20px}
.v2-h2::after{content:'';display:block;width:92px;height:10px;margin-top:11px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2092%2010%22%3E%3Cpath%20d%3D%22M2%206%20Q9%200%2016%205%20T30%205%20T44%205%20T58%205%20T72%205%20T90%205%22%20fill%3D%22none%22%20stroke%3D%22%23c2185b%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat left center/contain}
.v2-h2-w{color:#fff}.v2-h2-w::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2092%2010%22%3E%3Cpath%20d%3D%22M2%206%20Q9%200%2016%205%20T30%205%20T44%205%20T58%205%20T72%205%20T90%205%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E")}
.v2-h2-c{text-align:center}.v2-h2-c::after{margin-left:auto;margin-right:auto;background-position:center}
.v2-p{font-size:1.04rem;line-height:1.8;color:var(--brown);margin:0 0 14px;max-width:62ch}
.v2-lede{font-size:1.16rem;line-height:1.7}
.v2-split{display:grid;gap:clamp(28px,6vw,64px);align-items:center}

/* HERO */
.v2-hero{padding:54px 20px 96px}
.v2-hero::after{display:none}
.v2-hero .cs-hero-inner{max-width:1000px;gap:clamp(24px,5vw,64px)}
.v2-hero .cs-hero-title{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5.6vw,3.15rem);line-height:1.08}
.v2-hero .cs-hero-sub{font-size:1.1rem;max-width:520px}
.v2-hero .cs-hero-motto{font-family:'Caveat',var(--display),cursive;font-size:1.5rem;letter-spacing:.01em;text-transform:none;font-weight:700}
.v2-hero .cs-hero-art{width:clamp(210px,32vw,340px);position:relative}
.v2-hero .cs-hero-art img{position:relative;z-index:2;transform:rotate(-4deg)}
.v2-halo{position:absolute;inset:-4%;border-radius:50%;background:radial-gradient(circle,#fff 0 58%,rgba(255,255,255,0) 72%)}
.v2-orbit{position:absolute;inset:-14%;width:128%;height:128%;z-index:1;overflow:visible}
@media (max-width:720px){.v2-hero{padding:34px 20px 80px}.v2-hero .cs-hero-art{width:190px;margin:12px 0}}

/* MISSION — a sliced cake that fills up */
.v2-mission{padding-top:14px}
.v2-split-plate{grid-template-columns:230px 1fr}
.v2-plate{position:relative;width:min(100%,220px);aspect-ratio:1;border-radius:50%;margin:0 auto;
  background:conic-gradient(var(--pink) calc(var(--p)*1%),var(--pink-light) 0);
  box-shadow:0 0 0 8px #fff,0 0 0 9px var(--pink-light),0 16px 34px rgba(194,24,91,.16);display:grid;place-items:center}
.v2-plate::before{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(#fff 0 1.3deg,transparent 1.3deg 45deg)}
.v2-plate-in{position:relative;width:60%;aspect-ratio:1;border-radius:50%;background:var(--cream);display:grid;place-content:center;text-align:center;box-shadow:0 0 0 6px #fff}
.v2-plate-in b{font-family:var(--display);font-weight:800;font-size:2.3rem;line-height:1;color:var(--pink)}
.v2-plate-in small{font-size:.82rem;font-weight:700;color:var(--brown-lt);letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
.v2-count{color:var(--brown-lt);margin-bottom:0}
@media (max-width:760px){.v2-split-plate{grid-template-columns:1fr;text-align:center}.v2-split-plate .v2-h2::after{margin-left:auto;margin-right:auto;background-position:center}.v2-split-plate .v2-p{margin-left:auto;margin-right:auto}.v2-plate{width:170px}.v2-plate-in b{font-size:1.9rem}}

/* STORY — text on a warm band, with a pinned-up family polaroid */
.v2-story{background:#fff1d4;padding-top:38px;padding-bottom:78px}
.v2-split-story{grid-template-columns:1fr 290px;align-items:start}
.v2-mark{background:linear-gradient(transparent 58%,#ffd54f 58% 92%,transparent 92%);padding:0 3px;border-radius:2px}
.v2-polaroid{position:relative;margin:10px 0 0;background:#fff;padding:14px 14px 18px;border-radius:4px;box-shadow:0 18px 34px rgba(62,39,35,.2);transform:rotate(3.2deg)}
.v2-polaroid::before{content:'';position:absolute;top:-13px;left:50%;width:92px;height:28px;margin-left:-46px;background:rgba(248,187,208,.78);transform:rotate(-3deg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.v2-polaroid-img{aspect-ratio:1;background:linear-gradient(160deg,#fbdae6,#fff4f8);display:grid;place-items:center;overflow:hidden}
.v2-polaroid-img img{width:88%;height:auto;display:block}
/* a real photo fills the square (cropped, not squashed). The current family photo is portrait
   with the faces in its lower half and sky above, so the crop is aimed low (65%) — lower the
   number to show more of the top, raise it for more of the bottom, if the photo changes. */
.v2-polaroid-photo{position:relative;background:#f3e6dc}
.v2-polaroid-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 65%}
.v2-polaroid figcaption{font-family:'Caveat',cursive;font-weight:700;font-size:1.55rem;text-align:center;color:var(--brown);margin-top:12px;line-height:1.1}
@media (max-width:760px){.v2-split-story{grid-template-columns:1fr}.v2-polaroid{width:min(260px,78%);margin:14px auto 0}}

/* ROUTE — the USP gets colour and a picture of the thing itself */
.v2-route{background:var(--pink);padding-top:44px;padding-bottom:84px}
.v2-split-route{grid-template-columns:minmax(0,420px) 1fr}
.v2-route-art{order:-1;transform:rotate(-3.5deg);filter:drop-shadow(0 20px 28px rgba(60,0,25,.35))}
.v2-map{width:100%;height:auto;display:block;overflow:visible}
.v2-route .v2-p{color:#fff;opacity:.97}
.v2-btn-white{display:inline-block;margin-top:6px;background:#fff;color:var(--pink);font-weight:800;text-decoration:none;padding:13px 26px;border-radius:999px;box-shadow:0 6px 16px rgba(60,0,25,.25);transition:transform .12s}
.v2-btn-white:hover{transform:translateY(-2px)}
@media (max-width:760px){.v2-split-route{grid-template-columns:1fr}.v2-route-art{order:2;width:min(330px,88%);margin:10px auto 0}}

/* NO SIGN-UP — a rubber stamp, not a box */
.v2-nosignup{padding-top:42px}
.v2-split-stamp{grid-template-columns:1fr 210px}
.v2-ticks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:13px}
.v2-ticks li{display:flex;gap:13px;align-items:flex-start;font-size:1.02rem;line-height:1.6;color:var(--brown)}
.v2-ticks li::before{content:'✓';flex:0 0 27px;height:27px;border-radius:50%;background:var(--pink);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.9rem;margin-top:1px}
.v2-foot{max-width:54ch;font-size:.97rem;line-height:1.7;color:var(--brown-lt);padding-left:16px;border-left:3px solid var(--pink-light);margin:0}
.v2-stamp-wrap{display:grid;place-items:center}
.v2-stamp{width:190px;height:auto;transform:rotate(11deg);filter:drop-shadow(0 10px 16px rgba(194,24,91,.25))}
@media (max-width:760px){.v2-split-stamp{grid-template-columns:1fr}.v2-stamp-wrap{order:-1}.v2-stamp{width:140px}}

/* FACEBOOK — a photo pinned to the board */
.v2-fb{background:#fce4ec;padding-top:42px;padding-bottom:70px}
.v2-split-fb{grid-template-columns:minmax(0,420px) 1fr}
.v2-pinned{display:block;text-decoration:none;position:relative;background:#fff;padding:12px;border-radius:5px;box-shadow:0 16px 30px rgba(62,39,35,.2);transform:rotate(-2.6deg)}
.v2-pinned::before{content:'';position:absolute;top:-12px;left:50%;width:84px;height:26px;margin-left:-42px;background:rgba(255,213,79,.8);transform:rotate(2.5deg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.v2-pinned-img{aspect-ratio:16/9;border-radius:3px;display:grid;place-items:center;text-align:center;color:#fff;font-weight:800;line-height:1.35;
  background-color:var(--pink);
  background-image:linear-gradient(135deg,rgba(194,24,91,.55),rgba(255,160,0,.3)),url('/icons/fb-group.jpg');background-size:cover;background-position:center}
@media (max-width:760px){.v2-split-fb{grid-template-columns:1fr}.v2-pinboard{width:min(320px,86%);margin:0 auto}}

/* OWNERS — little sheds standing in the grass (still 1x3 at every width) */
.v2-owners{padding:40px 0 58px;background:linear-gradient(#fffbf8,#fff6ee)}
.v2-owners-in{text-align:center}
.v2-lead{max-width:520px;margin:0 auto 54px;font-size:1.02rem;line-height:1.7;color:var(--brown-lt)}
.v2-sheds{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,4.4vw,44px);max-width:880px;margin:0 auto}
.v2-shed{position:relative;display:block;text-decoration:none;filter:drop-shadow(0 8px 10px rgba(62,39,35,.16));transition:transform .15s}
.v2-shed:hover{transform:translateY(-4px)}
.v2-shed::before{content:'';position:absolute;left:-5%;right:-5%;bottom:100%;height:clamp(34px,7vw,54px);background:var(--pink);clip-path:polygon(50% 0,100% 100%,0 100%)}
.v2-shed::after{content:'';position:absolute;left:-5%;right:-5%;bottom:100%;height:5px;background:#9c1148}
.v2-shed-body{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 14px 24px;height:100%;
  background:repeating-linear-gradient(90deg,rgba(120,72,40,.11) 0 1px,transparent 1px 14px),#fbeedb;border-radius:0 0 8px 8px;box-shadow:inset 0 0 0 1px rgba(120,72,40,.12)}
.v2-shed-ic{font-size:1.7rem}
.v2-shed strong{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--pink)}
.v2-shed-d{font-size:.86rem;line-height:1.5;color:var(--brown-lt)}
@media (max-width:700px){.v2-shed-body{padding:16px 8px 18px}.v2-shed strong{font-size:.9rem;line-height:1.25}.v2-shed-d{font-size:.76rem}}
@media (max-width:520px){.v2-shed-ic{font-size:1.35rem}.v2-shed strong{font-size:.82rem}.v2-shed-d{display:none}}
.v2-grass{position:absolute;left:0;width:100%;height:clamp(60px,9vw,90px);display:block;pointer-events:none;bottom:0}
.v2-grass-back{z-index:1}.v2-grass-front{z-index:3}

/* FOOTER — butter icing over a thin golden sponge strip: the header's two layers, flipped, so
   the page opens and closes on the same cake. The wave rises out of the grass on the home page
   (.v2 + .v2-footer sets --foot-back); on other pages the holder is transparent and the butter
   wave simply sits on the cream page. Phones keep the two halves side by side — everything
   just gets smaller, so the coffee line and the social icons share ~330px. */
.v2 + .v2-footer{--foot-back:#a5d6a7}
.v2-footer{flex-shrink:0;color:var(--brown)}
.v2-foot-wave{display:block;width:100%;height:clamp(24px,4vw,44px);background:var(--foot-back,transparent)}
.v2-foot-body{background:#fff1d4;margin-top:-1px;padding:12px 22px 20px}
.v2-foot-row{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(28px,5vw,60px);padding:10px 0 20px}
.v2-foot-give p{margin:0 0 11px;font-size:1.02rem;line-height:1.7;color:var(--brown-lt)}
.v2-coffee{display:inline-block;background:#ffdd00;color:#2b1b16;font-weight:800;text-decoration:none;padding:7px 18px;border-radius:999px;white-space:nowrap;box-shadow:0 3px 8px rgba(120,80,0,.2);transition:transform .12s,background .12s}
.v2-coffee:hover{transform:translateY(-2px);background:#ffe94d}
.v2-foot-connect{flex:0 0 auto;text-align:center}
.v2-foot-connect h3{margin:0 0 10px;font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:.02em;color:var(--brown)}
.v2-foot-socials{display:flex;gap:11px;justify-content:center}
.v2-soc{width:44px;height:44px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;box-shadow:0 4px 9px rgba(194,24,91,.25);transition:transform .12s,background .12s}
.v2-soc svg{width:22px;height:22px;display:block}
.v2-soc:hover{transform:translateY(-3px);background:#9c1148}
.v2-soc:focus-visible,.v2-coffee:focus-visible{outline:3px solid var(--brown);outline-offset:3px}
.v2-foot-note{max-width:1000px;margin:0 auto;padding-top:14px;border-top:1.5px dashed rgba(194,24,91,.22);text-align:center;font-size:.85rem;line-height:1.65;color:var(--brown-lt)}
.v2-foot-note a{color:var(--pink);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--pink-light);white-space:nowrap}
.v2-foot-sponge{height:12px;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 3px,transparent 3px 7px),linear-gradient(#f3c471,#dd9c3c)}
@media (max-width:760px){
  .v2-foot-row{gap:16px;padding-bottom:18px}
  .v2-foot-give{flex:1 1 0;min-width:0}
  .v2-foot-give p{font-size:.9rem;line-height:1.75}
  .v2-coffee{padding:5px 13px;font-size:.88rem}
  .v2-foot-connect h3{font-size:.92rem;margin-bottom:9px}
  .v2-foot-socials{gap:8px}
  .v2-soc{width:38px;height:38px}
  .v2-soc svg{width:19px;height:19px}
}
@media (max-width:360px){
  .v2-foot-row{gap:12px}
  .v2-foot-give p{font-size:.84rem}
  .v2-foot-socials{gap:6px}
  .v2-soc{width:34px;height:34px}
  .v2-soc svg{width:17px;height:17px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERIOR PAGES — Contact, Add/Edit my shed, Shed page (owner status page has its own CSS)
   Same language as the home page: a hero band with a squiggle title and a handwritten line, taped
   paper cards, sticky notes, pill buttons, a progress trail. Forms are regrouped into three roomy
   sections instead of four cramped columns. Everything is scoped under .v3 / .v3-* so admin pages
   (which share .form-group / .admin-section) and the map are NOT affected.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Interior pages ─ shared kit ── */
.v3{overflow-x:clip}
.v3 section{position:relative}
.v3-in{max-width:1000px;margin:0 auto;padding:0 22px;position:relative;z-index:1}
.v3-in-wide{max-width:1120px}
.v3-band{background:#fffbf8;padding:26px 0 72px}
.v3-band-short{padding-bottom:56px}

.v3-hero{padding:38px 20px 80px}
.v3-hero::after{display:none}
.v3-hero .cs-hero-inner{max-width:1000px;gap:clamp(20px,5vw,56px);justify-content:space-between}
.v3-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,5vw,2.7rem);line-height:1.08;color:var(--brown);margin:0 0 14px}
.v3-hero h1::after{content:'';display:block;width:92px;height:10px;margin-top:12px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2092%2010%22%3E%3Cpath%20d%3D%22M2%206%20Q9%200%2016%205%20T30%205%20T44%205%20T58%205%20T72%205%20T90%205%22%20fill%3D%22none%22%20stroke%3D%22%23c2185b%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat left center/contain}
.v3-lede{font-size:1.08rem;line-height:1.7;color:var(--brown-lt);max-width:54ch;margin:0}
.v3-eyebrow{font-family:'Caveat',var(--display),cursive;font-size:1.5rem;font-weight:700;color:var(--pink);margin:0 0 4px}
.v3-hero-art{flex:0 0 auto;position:relative;width:clamp(130px,22vw,200px);aspect-ratio:1;display:grid;place-items:center}
.v3-hero-art .v2-halo{inset:-2%}
.v3-emoji{position:relative;z-index:2;font-size:clamp(3.6rem,9vw,5.6rem);transform:rotate(-6deg);filter:drop-shadow(0 8px 14px rgba(194,24,91,.22))}
.v3-shedart{position:relative;z-index:2;width:88%;height:auto;display:block;filter:drop-shadow(0 8px 12px rgba(62,39,35,.18))}
@media (max-width:720px){
  .v3-hero{padding:28px 20px 70px}
  .v3-hero .cs-hero-inner{flex-direction:column-reverse;align-items:center;text-align:center;gap:14px}
  .v3-hero h1::after{margin-left:auto;margin-right:auto;background-position:center}
  .v3-lede{margin:0 auto}
  .v3-hero-art{width:118px}
}

/* progress trail */
.v3-steps{display:flex;list-style:none;max-width:620px;margin:0 auto 30px;padding:0}
.v3-step{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:.86rem;font-weight:700;line-height:1.3;color:var(--brown-lt);padding:0 4px}
.v3-step b{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:#fff;border:2.5px solid var(--pink-light);color:var(--pink);display:grid;place-items:center;font-family:var(--display);font-weight:800;margin-bottom:8px}
.v3-step.is-on{color:var(--brown)}
.v3-step.is-on b{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 6px 14px rgba(194,24,91,.3)}
.v3-step.is-done b{background:var(--pink-pale);border-color:var(--pink-light)}
.v3-step + .v3-step::before{content:'';position:absolute;top:19px;right:50%;width:100%;border-top:3px dotted var(--pink-light)}
@media (max-width:520px){.v3-step{font-size:.76rem}.v3-step b{width:34px;height:34px}.v3-step + .v3-step::before{top:16px}}

/* paper card + sticky note */
.v3-paper{position:relative;background:#fff;border-radius:24px;padding:34px 34px 30px;box-shadow:0 18px 40px rgba(62,39,35,.10);border:1px solid rgba(248,187,208,.7)}
.v3-paper::before,.v3-note::before,.v3-claim::before{content:'';position:absolute;top:-13px;left:50%;width:92px;height:26px;margin-left:-46px;background:rgba(255,213,79,.82);transform:rotate(-2deg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.v3-paper-narrow{max-width:540px;margin:0 auto}
.v3-paper h2{font-family:var(--display);font-weight:800;font-size:1.28rem;line-height:1.25;color:var(--pink);margin:0 0 8px}
.v3-sub{color:var(--brown-lt);font-size:.97rem;line-height:1.65;margin:0 0 22px}
.v3-fine{font-size:.85rem;line-height:1.55;color:var(--brown-lt);margin:12px 0 0}
.v3-fine-c{text-align:center}
.v3-note{position:relative;background:#fff1d4;border-radius:8px 8px 26px 8px;padding:30px 26px 26px;box-shadow:0 16px 30px rgba(62,39,35,.14);transform:rotate(1.2deg)}
.v3-note::before{background:rgba(248,187,208,.85);transform:rotate(2.5deg)}
.v3-note h3{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--brown);margin:0 0 10px}
.v3-note p{font-size:.98rem;line-height:1.7;color:var(--brown-lt);margin:0 0 16px}
.v3-note h4{font-family:var(--display);font-weight:800;font-size:.98rem;color:var(--brown);margin:22px 0 10px}
.v3-note .v2-foot-socials{justify-content:flex-start}
.v3-pinphoto{display:block;margin:0 0 16px;background:#fff;padding:9px;border-radius:5px;box-shadow:0 10px 20px rgba(62,39,35,.18);transform:rotate(-2deg)}
.v3-pinphoto-img{display:block;aspect-ratio:16/9;border-radius:3px;background:linear-gradient(135deg,rgba(194,24,91,.55),rgba(255,160,0,.3)),url('/icons/fb-group.jpg') center/cover,var(--pink)}

/* columns */
.v3-cols{display:grid;gap:clamp(28px,5vw,56px);align-items:start}
.v3-cols-contact{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
@media (max-width:820px){.v3-cols-contact{grid-template-columns:minmax(0,1fr)}.v3-note{transform:none;margin-top:10px}}

/* form controls (scoped: admin pages keep the old look) */
.v3-field{margin-bottom:20px}
.v3-field label{display:block;margin-bottom:7px;font-family:var(--display);font-weight:800;font-size:.96rem;color:var(--brown)}
.v3-field label small{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-weight:600;font-size:.82rem;color:var(--brown-lt)}
.v3 .v3-field input:not([type=checkbox]):not([type=radio]),.v3 .v3-field textarea,.v3 .v3-field select,.v3-quick input,.v3-captcha,.v3 .cs-ap-postcode,.v3 .cs-ap-street{width:100%;padding:13px 16px;border:2px solid #f0e0d6;border-radius:16px;background:#fffdfb;font:inherit;font-size:1rem;color:var(--brown);transition:border-color .15s,box-shadow .15s}
.v3 .v3-field input:focus,.v3 .v3-field textarea:focus,.v3 .cs-ap-postcode:focus,.v3 .cs-ap-street:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(194,24,91,.12)}
.v3 .v3-field textarea{resize:vertical;min-height:110px;line-height:1.5}
.v3-hint{font-size:.86rem;line-height:1.55;color:var(--brown-lt);margin:8px 2px 0}
.v3-hint-top{margin:-2px 2px 10px}
.v3 .cs-ap-row{display:flex;gap:10px}
.v3 .cs-ap-postcode{flex:1;min-width:0;text-transform:uppercase}
.v3 .cs-ap-street{margin-top:10px}
.v3 .cs-ap-find{flex:0 0 auto;border:0;border-radius:16px;background:var(--pink);color:#fff;font-family:var(--display);font-weight:800;font-size:1rem;padding:0 22px;cursor:pointer}
.v3-mapbox{margin-top:12px;height:150px;border-radius:18px;border:2px dashed #f0cfd9;background:repeating-linear-gradient(45deg,#fff6f9 0 14px,#fff 14px 28px);display:grid;place-content:center;text-align:center;gap:4px;color:var(--brown-lt)}
.v3-mapbox span{font-size:2rem}.v3-mapbox small{font-size:.82rem}
.v3-captcha{display:flex;align-items:center;gap:12px;max-width:304px;padding:16px;margin-bottom:22px;font-size:.92rem;border-radius:6px!important;background:#f9f9f9!important;position:relative}
.v3-captcha-box{width:24px;height:24px;border:2px solid #c1c1c1;background:#fff;border-radius:2px}
.v3-captcha small{margin-left:auto;font-size:.6rem;color:#777}

/* sections inside the big form */
.v3-sec{padding:0 0 26px;margin:0 0 26px;border-bottom:2.5px dotted var(--pink-light)}
.v3-sec:last-of-type{border-bottom:0}
.v3-sec-head{display:flex;align-items:center;gap:12px;margin:0 0 22px;font-family:var(--display);font-weight:800;font-size:1.22rem;color:var(--brown)}
.v3-sec-head i{font-style:normal;width:42px;height:42px;border-radius:50%;background:var(--pink-pale);display:grid;place-items:center;font-size:1.3rem}
.v3-grid-2,.v3-grid-3{display:grid;gap:0 clamp(24px,4vw,44px);align-items:start}
.v3-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.v3-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:861px){.v3-grid-hours{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:860px){.v3-grid-2,.v3-grid-3{grid-template-columns:minmax(0,1fr)}.v3-paper{padding:28px 20px 24px}}

/* opening-hours widget, dietary + payment chips */
.v3 .oh-widget{display:flex;flex-direction:column;gap:8px}
.v3 .oh-day-wrap{align-items:center;gap:10px}
.v3 .oh-day-toggle{padding:0}
.v3 .oh-day-toggle input{width:20px;height:20px}
.v3 .oh-day-row{min-width:0;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:9px 14px;border-radius:14px;background:#fffdfb;border:2px solid #f0e0d6;min-height:46px}
.v3 .oh-day-wrap:has(.oh-open-cb:checked) .oh-day-row{background:var(--pink-pale);border-color:var(--pink-light)}
.v3 .oh-day-label{flex:0 0 88px;font-weight:700;color:var(--brown)}
.v3 .oh-slots{flex:1 1 170px;min-width:170px;gap:6px}
.v3 .oh-from,.v3 .oh-to{flex:1 1 0;width:0;min-width:78px;padding:6px 8px;border:2px solid #f0cfd9;border-radius:10px;background:#fff}
.v3 .cs-diet-checks{flex-direction:row;flex-wrap:wrap;gap:10px}
.v3 .cs-diet-check{gap:8px;padding:9px 16px 9px 12px;border:2px solid #f0e0d6;border-radius:999px;background:#fffdfb;font-weight:600;transition:background .15s,border-color .15s}
.v3 .cs-diet-check:has(input:checked){background:var(--pink-pale);border-color:var(--pink)}
.v3 .cs-diet-check input[type=checkbox]{width:18px;height:18px}

.v3-closed{margin:0 0 26px;background:var(--red-pale);border:2px solid #ef9a9a;border-radius:18px;padding:16px 20px}
.v3-closed label{display:flex;align-items:flex-start;gap:12px;cursor:pointer;margin:0}
.v3-closed input{width:20px;height:20px;accent-color:var(--red);margin-top:2px}
.v3-closed b{display:block;color:var(--red)}
.v3-closed small{display:block;margin-top:4px;color:var(--brown-lt);font-size:.85rem;line-height:1.5}

/* buttons (pill) */
.v3-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#151515;color:#fff;border:0;border-radius:999px;padding:14px 32px;font-family:var(--display);font-weight:800;font-size:1.04rem;line-height:1.2;text-decoration:none;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.2);transition:transform .12s,box-shadow .12s}
.v3-btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(0,0,0,.24)}
.v3-btn-block{width:100%}
.v3-btn-sm{padding:10px 20px;font-size:.92rem}
.v3-btn-ghost{background:#fff;color:var(--pink);border:2px solid var(--pink);box-shadow:none}
.v3-btn-ghost:hover{background:var(--pink-pale);box-shadow:none}
.v3-actions{margin-top:6px}
.v3-actions-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.v3-actions .v3-fine{margin-top:12px}

/* quick link (edit page) */
.v3-quick{background:#fff1d4;border-radius:22px;padding:22px 26px;margin:0 0 30px;border:2px dashed #f3c471}
.v3-quick-head{font-family:var(--display);font-weight:800;font-size:1.12rem;color:var(--brown);margin-bottom:6px}
.v3-quick p{font-size:.93rem;line-height:1.6;color:var(--brown-lt);margin:0 0 14px}
.v3-quick-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.v3-quick-row input{flex:1 1 240px;width:auto!important;padding:10px 14px!important;font-size:.9rem!important}

/* shed page */
.v3-shedhero .cs-hero-inner{align-items:center;justify-content:flex-start;gap:clamp(24px,5vw,60px)}
.v3-shedhero{padding-top:74px}
.v3-shedhero .cs-hero-inner{padding-left:16px}
.v3-shednav{position:absolute;top:22px;left:0;right:0;max-width:1000px;margin:0 auto;padding:0 22px;display:flex;justify-content:space-between;z-index:2}
.v3-shednav a{background:#fff;color:var(--pink);border:2px solid var(--pink-light);border-radius:999px;padding:7px 16px;font-weight:700;font-size:.88rem;text-decoration:none;box-shadow:0 4px 10px rgba(194,24,91,.1)}
.v3-shednav a:hover{background:var(--pink-pale)}
.v3-photo{position:relative;flex:0 0 auto;width:clamp(210px,27vw,280px);margin:0;background:#fff;padding:12px 12px 14px;border-radius:5px;box-shadow:0 20px 38px rgba(62,39,35,.24);transform:rotate(-2.4deg)}
.v3-photo::before{content:'';position:absolute;top:-13px;left:50%;width:90px;height:26px;margin-left:-45px;background:rgba(255,213,79,.82);transform:rotate(2deg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.v3-photo-img{aspect-ratio:4/5;overflow:hidden;background:#fbdae6;display:grid;place-items:center}
.v3-photo-img img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block}
.v3-photo-empty .v3-photo-img{background:linear-gradient(160deg,#fbdae6,#fff4f8)}
.v3-photo-empty .v3-shedart{width:92%}
.v3-photo figcaption{font-family:'Caveat',cursive;font-weight:700;font-size:1.4rem;text-align:center;color:var(--brown);margin-top:8px;line-height:1.1}
.v3-shedcopy{text-align:left}
.v3-shedhero h1{font-size:clamp(2rem,5.4vw,3rem)}
.v3-sticker{display:inline-block;margin:0 0 14px;padding:7px 16px;border-radius:999px;color:#fff;font-weight:800;font-size:.86rem;letter-spacing:.02em;transform:rotate(-2deg);box-shadow:0 5px 12px rgba(0,0,0,.18),inset 0 0 0 2px rgba(255,255,255,.35)}
.v3-sticker-verified{background:var(--green)}.v3-sticker-unverified{background:var(--blue)}.v3-sticker-owner_submitted{background:var(--orange)}.v3-sticker-closed{background:var(--red)}
.v3-address{font-size:1.06rem;color:var(--brown);margin:0 0 14px;font-weight:600}
.v3-address-note{font-weight:500;color:var(--brown-lt);font-size:.88rem}
.v3-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:0 0 14px;font-size:.93rem;color:var(--brown-lt)}
.v3-votes{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.v3-votes-label{font-weight:700;color:var(--brown)}
.v3 .cs-vote-btn{background:#fff;border:2px solid var(--pink-light);border-radius:999px;padding:5px 14px;font-size:.95rem;font-weight:700;color:var(--brown)}
.v3-owned{display:inline-block;background:var(--green-pale);color:#1b5e20;border:2px solid #a5d6a7;border-radius:16px;padding:10px 16px;font-size:.92rem;line-height:1.5}
.v3-cols-shed{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:820px){.v3-cols-shed{grid-template-columns:minmax(0,1fr)}}
.v3-baker{border-radius:18px;padding:16px 20px;margin:0 0 20px;line-height:1.55}
.v3-baker-open{background:#e7f6e9;color:#1b5e20;border:2px solid #a5d6a7}
.v3-baker-since{font-size:.86rem;opacity:.85}
.v3-baker blockquote{margin:8px 0 0;font-style:italic;font-weight:700}
.v3-desc{font-size:1.12rem;line-height:1.75;color:var(--brown);margin:0 0 18px}
.v3-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.v3-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border:2px solid #f0e0d6;border-radius:999px;background:#fff;font-weight:700;font-size:.9rem;color:var(--brown)}
.v3-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 22px;padding:14px 18px;background:#fff;border:2px dashed var(--pink-light);border-radius:18px}
.v3-confirm-line{font-size:.9rem;color:var(--brown-lt)}
.v3 .cs-confirm-btn{border:2px solid #2e7d32;background:#fff;color:#2e7d32;border-radius:999px;padding:8px 18px;font-weight:800;font-size:.93rem;cursor:pointer}
.v3 .cs-confirm-btn:hover{background:var(--green-pale)}
.v3-socials{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 4px;font-weight:700;color:var(--brown)}
.v3-socials span{margin-right:4px}
.v3-shedside{position:relative}
.v3-sign{position:relative;background:#fff1d4;border-radius:20px;padding:34px 24px 20px;border:2.5px solid #f3c471;box-shadow:0 16px 30px rgba(62,39,35,.14)}
.v3-sign::before,.v3-sign::after{content:'';position:absolute;top:12px;width:11px;height:11px;border-radius:50%;background:#c79a4b;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.v3-sign::before{left:20px}.v3-sign::after{right:20px}
.v3-sign h2{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--pink);margin:0 0 10px}
.v3-oh-list{list-style:none;margin:0 0 6px;padding:0}
.v3-oh-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1.5px dashed rgba(194,24,91,.2);font-weight:700;color:var(--brown)}
.v3-oh-list li:last-child{border-bottom:0}
.v3-oh-list li.is-closed{color:var(--brown-lt);font-weight:600;opacity:.8}
.v3-claim{position:relative;background:var(--pink-pale);border-radius:8px 8px 26px 8px;padding:32px 26px 26px;box-shadow:0 16px 30px rgba(62,39,35,.14);transform:rotate(1.2deg)}
.v3-claim h2{font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--pink);margin:0 0 10px}
.v3-claim p{font-size:.97rem;line-height:1.65;color:var(--brown);margin:0 0 16px}
@media (max-width:720px){
  .v3-shedhero .cs-hero-inner{flex-direction:column;align-items:center;text-align:center}
  .v3-shedcopy{text-align:center}
  .v3-hero.v3-shedhero h1::after{margin-left:auto;margin-right:auto}
  .v3-meta,.v3-votes{justify-content:center}
  .v3-photo{width:min(240px,74%)}
  .v3-claim{transform:none}
}

/* prev/next when there is none; shed gallery; success + error states; disabled buttons */
.v3-shednav span.is-off{background:#fff;color:var(--brown-lt);border:2px solid #f0e0d6;border-radius:999px;padding:7px 16px;font-weight:700;font-size:.88rem;opacity:.55}
.v3-gallery{margin:30px 0 0}
.v3-gallery h2{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--pink);margin:0 0 12px}
.v3-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.v3-gallery-grid img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;border:3px solid #fff;box-shadow:0 8px 18px rgba(62,39,35,.16)}
.v3-hint-empty{color:var(--brown-lt);margin:0 0 6px}
.v3-baker-closed{background:#fdecea;color:#b71c1c;border:2px solid #f5b8b2}
.v3-success{text-align:center}
.v3-success p{font-size:1rem;line-height:1.65;color:var(--brown);margin:0 0 10px}
.v3-success .cs-big-emoji{font-size:3rem;margin-bottom:10px}
.v3-success-link a{color:var(--pink);font-weight:800;text-decoration:none;border-bottom:2px solid var(--pink-light)}
.v3-success-bad{background:var(--red-pale);border-color:#ef9a9a}
.v3-success-bad a{color:var(--red);font-weight:800}
.v3-error{border-radius:14px;padding:12px 16px;margin:0 0 16px}
.v3 .cs-info-box{border-radius:16px}
.v3-recaptcha{margin:0 0 22px}
.v3-photos{margin-top:30px}
.v3-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.v3-claim form{margin-top:18px}
.v3-claim .v3-field{margin-bottom:14px}

/* the home page's buttons match the pill buttons used on the other pages */
.v2 a.cs-btn-primary,.v2 a.cs-btn-outline{border-radius:999px;font-family:var(--display);font-weight:800}
.v2 a.cs-btn-primary{box-shadow:0 8px 18px rgba(0,0,0,.18)}

/* ═══ BAKER PAGES: My sheds (/manage/), email preferences (/emails/), privacy ═══ */
.v3-backlink{margin:0 0 14px;font-weight:800}
.v3-backlink a{color:var(--pink);text-decoration:none;border-bottom:2px solid var(--pink-light)}
.v3-success-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}

/* My sheds */
.hub-all{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;background:#fff1d4;border:2px dashed #f3c471;border-radius:22px;padding:18px 24px;margin:0 0 26px}
.hub-all b{display:block;font:800 1.15rem var(--display);color:var(--brown)}.hub-all span{font-size:.9rem;color:var(--brown-lt)}
.hub-all-btns{display:flex;flex-wrap:wrap;gap:10px}
.hub-allbtn{border:0;border-radius:999px;padding:12px 22px;font:800 .98rem var(--display);color:#fff;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.16)}
.hub-allbtn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.16)}
.hub-allbtn--open{background:#2e7d32}.hub-allbtn--closed{background:#c62828}
.hub-list{display:grid;gap:22px}
.hub-card{display:flex;gap:22px;align-items:flex-start;background:#fff;border:1px solid rgba(248,187,208,.7);border-radius:24px;padding:22px;box-shadow:0 16px 36px rgba(62,39,35,.10)}
.hub-card--wait{border:2px dashed #f3c471;background:#fffdf6}
.hub-card--off{background:#f7f2ef;border-color:#e6dbd4;box-shadow:none}.hub-card--off .hub-thumb{filter:grayscale(.7);opacity:.75}
.hub-thumb{flex:0 0 132px;aspect-ratio:4/5;border-radius:6px;background:#fff;padding:7px;box-shadow:0 10px 22px rgba(62,39,35,.2);transform:rotate(-2deg);overflow:hidden}
.hub-thumb>img,.hub-thumb>svg{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 14%;border-radius:2px;background:linear-gradient(160deg,#fbdae6,#fff4f8)}
.hub-thumb>svg{padding:6px}
.hub-main{flex:1;min-width:0}
.hub-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 8px}
.hub-top h2{margin:0;font:800 1.45rem/1.15 var(--display);color:var(--brown);overflow-wrap:anywhere}
.hub-now{margin:0 0 14px;font-weight:700;color:var(--brown);line-height:1.5}
.hub-now small{display:block;font-weight:600;font-size:.82rem;color:var(--brown-lt)}
.hub-now--open{color:#1b5e20}.hub-now--closed{color:#b71c1c}.hub-now--off,.hub-now--wait{color:var(--brown)}
.hub-seg{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.hub-seg button{border:2px solid #f0e0d6;background:#fffdfb;color:var(--brown);border-radius:999px;padding:9px 16px;font:800 .9rem var(--display);cursor:pointer}
.hub-seg button:hover{border-color:var(--pink-light)}
.hub-seg button[data-answer="open"].is-on{background:#e7f6e9;border-color:#2e7d32;color:#1b5e20}
.hub-seg button[data-answer="closed"].is-on{background:#fdecea;border-color:#c62828;color:#b71c1c}
.hub-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.hub-link{color:var(--pink);font-weight:800;font-size:.9rem;text-decoration:none;border-bottom:2px solid var(--pink-light)}
.hub-more{margin-top:14px}
.hub-linkbtn{background:none;border:0;padding:0;font:700 .84rem var(--display);color:var(--brown-lt);text-decoration:underline;cursor:pointer}
.hub-confirm{margin-top:14px;background:#fdecea;border:2px solid #f5b8b2;border-radius:16px;padding:14px 16px}
.hub-confirm p{margin:0 0 10px;font-size:.92rem;line-height:1.55;color:var(--brown)}
.hub-confirm-btns{display:flex;flex-wrap:wrap;gap:10px}
.hub-foot{display:grid;gap:14px;margin-top:30px}
.hub-secure{background:#fff1d4;border-radius:16px;padding:12px 16px;font-size:.88rem;line-height:1.55;color:var(--brown-lt)}
.hub-secure a,.hub-small a{color:var(--pink);font-weight:800}
.hub-small{text-align:center;margin:4px 0 0;font-size:.92rem}
body.hub-busy .hub-card,body.hub-busy .hub-all{opacity:.6;pointer-events:none}
@media (max-width:640px){
  .hub-card{flex-direction:column;align-items:stretch;padding:18px}
  .hub-thumb{flex:0 0 auto;width:150px;margin:0 auto 4px}
  .hub-top{justify-content:center;text-align:center}.hub-top h2{font-size:1.3rem}
  .hub-now{text-align:center}.hub-seg{justify-content:center}.hub-links{justify-content:center}.hub-more{text-align:center}
  .hub-all{padding:16px}.hub-all-btns{width:100%}.hub-allbtn{flex:1 1 100%}
}

/* email preferences */
.bm-choice{display:flex;flex-direction:column;gap:12px;margin:0 0 22px}
.bm-choice label{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border:2px solid #f0e0d6;border-radius:18px;background:#fffdfb;cursor:pointer}
.bm-choice label:has(input:checked){background:var(--pink-pale);border-color:var(--pink)}
.bm-choice input{margin-top:4px;accent-color:var(--pink);width:18px;height:18px;flex:0 0 auto}
.bm-choice b{display:block;font-family:var(--display);font-weight:800;color:var(--brown)}
.bm-choice small{display:block;color:var(--brown-lt);font-size:.88rem;line-height:1.5;margin-top:2px}

/* privacy page prose */
.pv{max-width:720px;margin:0 auto}
.pv .v2-h2{margin-top:34px}.pv .v2-h2:first-child{margin-top:0}
.pv p,.pv li{font-size:1.02rem;line-height:1.75;color:var(--brown)}.pv p{margin:0 0 14px}
.pv ul{margin:0 0 14px;padding-left:22px}.pv li{margin-bottom:10px}
.pv a{color:var(--pink);font-weight:800}

/* admin: Email bakers tab */
.cs-switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-weight:700;color:var(--brown)}
.cs-switch input{position:absolute;opacity:0;pointer-events:none}
.cs-switch .track{width:50px;height:28px;border-radius:999px;background:#cfc3bc;position:relative;flex:0 0 auto;transition:background .15s}
.cs-switch .track::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.cs-switch input:checked + .track{background:#2e7d32}.cs-switch input:checked + .track::after{transform:translateX(22px)}
.cs-switch input:focus-visible + .track{outline:3px solid rgba(194,24,91,.35);outline-offset:2px}
.bm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
.bm-stat{background:#fffbf8;border:1px solid #f0e2da;border-radius:12px;padding:12px 14px}
.bm-stat b{display:block;font:800 1.4rem var(--display);color:var(--pink)}.bm-stat span{font-size:.8rem;color:#8a7268;font-weight:700}
.bm-table{width:100%;border-collapse:collapse;font-size:.88rem}
.bm-table th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#8a7268;padding:8px 10px;border-bottom:2px solid #f0e2da}
.bm-table td{padding:10px;border-bottom:1px solid #f4ebe5;vertical-align:top}
.bm-pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:800}
.bm-pill.ok{background:#e8f5e9;color:#2e7d32}.bm-pill.bad{background:#ffebee;color:#b71c1c}.bm-pill.run{background:#fff3e0;color:#e65100}
.bm-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media (max-width:900px){.bm-grid{grid-template-columns:1fr}}
.bm-code{font-family:Consolas,monospace;font-size:.82rem;background:#f7f1ed;border-radius:8px;padding:10px 12px;word-break:break-all;color:#4a352e}
details.bm-details{margin-top:14px;border-top:1px dashed #e8d8cf;padding-top:12px}
details.bm-details summary{cursor:pointer;font-weight:800;color:var(--pink)}
.bm-bar{height:14px;border-radius:999px;background:#f3e9e3;overflow:hidden}
.bm-bar>div{height:100%;width:0;background:linear-gradient(90deg,#f48fb1,var(--pink));transition:width .3s}
.bm-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.bm-modal-card{background:#fff;border-radius:16px;width:100%;max-width:680px;height:min(86vh,820px);display:flex;flex-direction:column;overflow:hidden}
.bm-modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #f0e2da;font-size:.92rem}
.bm-modal-head button{background:none;border:0;font-size:1.2rem;cursor:pointer;color:#8a7268}
.bm-modal-card iframe{flex:1;width:100%;border:0}

/* admin: "who opened" dialog */
.bm-modal-card.wide{max-width:900px}
.bm-detail-bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #f0e2da;font-size:.92rem}
.bm-detail-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bm-detail-tools select{padding:7px 10px;border:1.5px solid #e6d4cb;border-radius:8px;font:inherit;background:#fff}
.bm-detail-scroll{flex:1;overflow:auto;padding:0 16px}
.bm-detail-note{margin:0;padding:10px 16px 14px;border-top:1px solid #f0e2da}

/* admin: fixing a mistyped baker email (Failures dialog) */
.fl-edit{display:grid;gap:8px;padding:6px 0}
.fl-edit label{font-weight:800;font-size:.85rem;color:var(--brown-lt)}
.fl-input{width:100%;box-sizing:border-box;padding:10px 12px;font:inherit;font-size:1rem;border:2px solid var(--pink-light);border-radius:10px;background:#fff}
.fl-input:focus{outline:none;border-color:var(--pink)}
.fl-edit-btns{display:flex;flex-wrap:wrap;gap:8px}
.fl-err{color:#b71c1c;font-weight:700;font-size:.85rem}

/* ═══ ROUTE CAKE / AREA CAKE (map page planner) ═══ */
/* choice screen */
.cs-mode-lede{margin:-6px 0 0;font-size:.86rem;color:var(--brown-lt)}
.cs-mode-grid{display:grid;gap:12px}
.cs-mode-card{display:flex;gap:14px;align-items:center;text-align:left;width:100%;background:#fff;border:2px solid var(--pink-light);border-radius:16px;padding:14px 16px;cursor:pointer;font-family:inherit;box-shadow:0 4px 0 var(--pink-light)}
.cs-mode-card:hover{border-color:var(--pink)}
.cs-mode-card:active{transform:translateY(3px);box-shadow:0 1px 0 var(--pink-light)}
.cs-mode-ico{flex:0 0 54px;height:54px;border-radius:14px;background:var(--pink-pale);display:grid;place-items:center;font-size:1.8rem}
.cs-mode-card b{display:block;font:800 1.1rem var(--display);color:var(--brown);margin-bottom:2px}
.cs-mode-card .sub{display:block;font-size:.82rem;line-height:1.4;color:var(--brown-lt)}
.cs-journey-back{align-self:flex-start;background:none;border:0;color:var(--pink);font-weight:800;font-size:.8rem;cursor:pointer;padding:0;margin:-6px 0 0;font-family:inherit}
/* Area Cake form */
.cs-seg{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cs-seg button{border:2px solid var(--pink-light);background:#fff;border-radius:999px;padding:6px 14px;font-weight:700;font-size:.82rem;font-family:inherit;color:var(--brown-lt);cursor:pointer}
.cs-seg button.is-on{background:var(--pink-pale);border-color:var(--pink);color:var(--pink)}
.cs-seg select{border:2px solid var(--pink-light);border-radius:999px;padding:5px 10px;font-weight:700;font-size:.82rem;font-family:inherit;color:var(--brown);background:#fff}
.cs-check{display:flex;gap:8px;align-items:center;font-size:.86rem;font-weight:700;color:var(--brown);cursor:pointer}
.cs-check input{width:17px;height:17px;accent-color:var(--pink);margin:0}
#cs-area-find,#cs-shared-plan{width:100%;font-size:.95rem;padding:12px}
/* the Suggest bar floating on the map */
.cs-suggest{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:14px;z-index:990;display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;justify-content:center;background:#fff;border:2px solid var(--pink-light);border-radius:18px;padding:8px 12px;box-shadow:0 6px 18px rgba(0,0,0,.2);font-size:.8rem;font-weight:700;color:var(--brown);max-width:calc(100% - 24px)}
.cs-suggest[hidden]{display:none}
.cs-stepper{display:inline-flex;align-items:center;border:2px solid var(--pink-light);border-radius:999px;background:#fff}
.cs-stepper button{width:30px;height:30px;border:0;background:none;font-size:1.1rem;font-weight:800;color:var(--pink);cursor:pointer;font-family:inherit}
.cs-stepper b{min-width:20px;text-align:center}
.cs-suggest-btn{border:0;border-radius:999px;background:var(--pink);color:#fff;padding:8px 16px;font-weight:800;font-size:.84rem;font-family:inherit;box-shadow:0 3px 0 #8e1450;cursor:pointer}
.cs-suggest-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8e1450}
.cs-suggest-btn.is-ghost{background:#fff;color:var(--pink);border:2px solid var(--pink);box-shadow:none;padding:6px 14px}
.cs-end-pin{width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--pink);display:grid;place-items:center;font-size:1.05rem;box-shadow:0 2px 6px rgba(0,0,0,.3)}
/* list cards at the chosen time */
.cs-card--shut{opacity:.62}
.cs-card-hrs{font-size:.7rem;font-weight:700;color:#8a6d00}
.cs-card-confirm{font-size:.68rem;font-weight:800;color:#1b5e20;background:#e7f6e9;border-radius:999px;padding:1px 8px}
/* cake-run dialog extras */
.cs-route-banner{background:#fdecea;border:1.5px solid #f5b8b2;color:#b71c1c;border-radius:10px;padding:9px 12px;margin-bottom:10px;font-size:.82rem;font-weight:700;line-height:1.4}
.cs-route-total{font-size:.82rem;font-weight:800;color:var(--brown);margin-right:auto}
.cs-route-head{justify-content:flex-end}
.cs-route-cap--over{color:#b71c1c}
.cs-route-text .cs-route-badge{display:inline-block;font-size:.66rem;font-weight:800;padding:1px 7px;border-radius:999px;margin-left:4px;vertical-align:1px}
.cs-route-badge.ok{background:#e7f6e9;color:#1b5e20}.cs-route-badge.warn{background:#fff3cd;color:#8a6d00}.cs-route-badge.shut{background:#fdecea;color:#b71c1c}
.cs-route-tools{display:flex;gap:8px;margin:-4px 0 0}
.cs-ghost-btn{flex:1;border:2px solid var(--pink-light);background:#fff;color:var(--pink);border-radius:999px;padding:8px 10px;font-weight:800;font-size:.82rem;font-family:inherit;cursor:pointer}
.cs-ghost-btn:hover{border-color:var(--pink)}
.cs-route-fab--over .cs-route-fab-count{background:#c62828;color:#fff;border-color:#c62828}
.cs-route-go.is-over:disabled{background:#fdecea;color:#b71c1c}
/* "are you sure?" dialogs */
.cs-confirm{max-width:380px;text-align:center;align-items:center}
.cs-confirm-ico{width:60px;height:60px;border-radius:50%;background:var(--pink-pale);display:grid;place-items:center;font-size:1.9rem}
.cs-confirm h3{margin:0;font:800 1.2rem var(--display);color:var(--brown)}
.cs-confirm p{margin:0;font-size:.9rem;line-height:1.5;color:var(--brown-lt)}
.cs-confirm-btns{display:grid;gap:8px;width:100%}
.cs-confirm-btns .cs-btn-primary{font-size:.95rem;padding:12px}
.cs-btn-danger{border:2px solid #c62828;background:#fff;color:#c62828;border-radius:999px;padding:11px;font-weight:800;font-size:.92rem;font-family:inherit;cursor:pointer}
.cs-btn-danger:hover{background:#fdecea}
/* share */
.cs-share-sum{margin:-4px 0 0;font-size:.88rem;color:var(--brown-lt);line-height:1.5}
.cs-share-link{display:flex;gap:6px}
.cs-share-link input{flex:1;min-width:0;border:1px solid #d7ccc8;border-radius:8px;padding:9px 10px;font-size:.82rem;color:var(--brown-lt);background:#faf6f3;font-family:Consolas,monospace}
.cs-share-link button{border:0;border-radius:8px;background:var(--pink);color:#fff;font-weight:800;padding:0 16px;font-family:inherit;cursor:pointer}
.cs-switch-row{display:flex;gap:10px;align-items:flex-start;background:#fffbf8;border:1.5px solid #f0e2da;border-radius:12px;padding:10px 12px;cursor:pointer}
.cs-switch-row input{margin-top:3px;width:17px;height:17px;accent-color:var(--pink)}
.cs-switch-row b{display:block;font-size:.86rem;color:var(--brown)}.cs-switch-row small{display:block;font-size:.74rem;line-height:1.45;color:var(--brown-lt);margin-top:2px}
.cs-share-actions{display:flex;gap:8px}
.cs-shared-list{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:.86rem;font-weight:700;color:var(--brown)}
.cs-shared-list li{display:flex;gap:8px;align-items:center}
.cs-shared-list i{flex:0 0 22px;height:22px;border-radius:50%;background:var(--pink);color:#fff;font-style:normal;font-size:.72rem;font-weight:800;display:grid;place-items:center}

/* Area Cake map key */
.cs-key{position:absolute;left:10px;top:84px;z-index:990;background:rgba(255,255,255,.96);border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,.28);font-size:.72rem;color:var(--brown);max-width:230px}
.cs-key[hidden]{display:none}
.cs-key-head{display:flex;align-items:center;gap:6px;width:100%;background:none;border:0;padding:6px 10px;font:800 .74rem inherit;font-family:inherit;color:var(--brown);cursor:pointer;text-align:left}
.cs-key-caret{margin-left:auto;transition:transform .15s;color:var(--pink)}
.cs-key.is-collapsed .cs-key-caret{transform:rotate(-90deg)}
.cs-key.is-collapsed .cs-key-list{display:none}
.cs-key-list{list-style:none;margin:0;padding:0 10px 8px;display:grid;gap:5px;font-weight:700}
.cs-key-list li{display:flex;align-items:center;gap:7px;line-height:1.25}
.cs-key-pin{flex:0 0 auto;display:block}
.cs-key-list .cs-key-note{display:block;margin-top:2px;padding-top:6px;border-top:1px dashed #eadfd8;font-weight:600;font-size:.66rem;color:var(--brown-lt);line-height:1.4}
/* hover a shed in the list -> its pin (or the cluster hiding it) lights up */
.leaflet-marker-icon svg{transition:transform .12s ease,filter .12s ease}
.leaflet-marker-icon.cs-pin-hl svg{transform:scale(1.45);transform-origin:50% 100%;filter:drop-shadow(0 0 6px rgba(194,24,91,.95));animation:cs-pin-bob .8s ease-in-out infinite}
.marker-cluster.cs-pin-hl div{box-shadow:0 0 0 4px rgba(194,24,91,.6),0 0 14px rgba(194,24,91,.7);animation:cs-pin-ring .8s ease-in-out infinite}
@keyframes cs-pin-bob{0%,100%{transform:scale(1.45)}50%{transform:scale(1.62)}}
@keyframes cs-pin-ring{0%,100%{box-shadow:0 0 0 3px rgba(194,24,91,.6),0 0 10px rgba(194,24,91,.6)}50%{box-shadow:0 0 0 7px rgba(194,24,91,.35),0 0 16px rgba(194,24,91,.8)}}
@media (prefers-reduced-motion:reduce){.leaflet-marker-icon.cs-pin-hl svg,.marker-cluster.cs-pin-hl div{animation:none}}