/* ==========================================================================
   JF Garden Tour Map — Mobile-First Styles
   All selectors scoped under .jf-garden-tour-app
   ========================================================================== */

/* ── CSS Custom Properties ──────────────────────────────────────────────── */
.jf-garden-tour-app {
  --jf-brand:         #B51846;
  --jf-brand-dark:    #8F1238;
  --jf-brand-bg:      rgba(181,24,70,0.06);
  --jf-lilac-purple:  #8E6AAE;
  --jf-lilac-light:   #C7B5D8;
  --jf-lilac-bg:      #F8F4F6;
  --jf-lilac-hover:   #A88CBD;
  --jf-garden-green:  #7C9A7A;
  --jf-light-green:   #91AD8E;
  --jf-green-bg:      #EEF4EE;
  --jf-cream:         #F8F4F6;
  --jf-cream-dark:    #FCFAFD;
  --jf-soft-pink:     #FCFAFD;
  --jf-border:        #D8C7D9;
  --jf-border-light:  #E1D3EA;
  --jf-text:          #332630;
  --jf-heading:       #562b70;
  --jf-text-med:      #4C3A47;
  --jf-muted:         #7B6A78;
  --jf-shadow-sm:     0 1px 4px rgba(0,0,0,.07);
  --jf-shadow-md:     0 4px 16px rgba(0,0,0,.10);
  --jf-shadow-lg:     0 8px 32px rgba(0,0,0,.14);
  --jf-radius-sm:     8px;
  --jf-radius-md:     14px;
  --jf-radius-lg:     20px;
  --jf-radius-xl:     28px;
  --jf-nav-height:    68px;
  --jf-transition:    0.22s ease;
  --jf-font-headline:  "Amarante", Georgia, serif;
  --jf-font-subhead:   "Helvetica Neue Condensed Bold", "HelveticaNeue-CondensedBold", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --jf-font-body:      "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ── Reset / Base ───────────────────────────────────────────────────────── */
.jf-garden-tour-app *,
.jf-garden-tour-app *::before,
.jf-garden-tour-app *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.jf-garden-tour-app {
  font-family: var(--jf-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--jf-text);
  background: #F8F4F6;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.jf-garden-tour-app button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.jfgt-header-title,
.jfgt-welcome-title,
.jfgt-detail-name,
.jfgt-empty-title {
  font-family: var(--jf-font-headline);
  font-weight: 400;
}

.jfgt-header-org,
.jfgt-welcome-sub,
.jfgt-header-tagline,
.jfgt-notice-card,
.jfgt-map-legend,
.jfgt-list-title,
.jfgt-filter-btn,
.jfgt-sheet-number,
.jfgt-sheet-name,
.jfgt-sheet-cat,
.jfgt-gc-number,
.jfgt-gc-name,
.jfgt-gc-cat,
.jfgt-tour-label,
.jfgt-tour-title,
.jfgt-tour-step,
.jfgt-detail-number,
.jfgt-detail-cat,
.jfgt-info-title,
.jfgt-link-card,
.jfgt-nav-label,
.jfgt-btn {
  font-family: var(--jf-font-subhead);
  font-stretch: condensed;
}
.jf-garden-tour-app a {
  color: var(--jf-brand);
  text-decoration: none;
}
.jf-garden-tour-app a:hover {
  color: var(--jf-brand-dark);
}
.jf-garden-tour-app img {
  display: block;
  max-width: 100%;
}
.jf-garden-tour-app ul {
  list-style: none;
}

/* ── App Shell — full-width on mobile ───────────────────────────────────── */
.jf-garden-tour-app {
  width: 100%;
  min-height: 720px;
  display: flex;
  flex-direction: column;
}

body.jfgt-map-export-mode {
  overflow: hidden;
}

body.jfgt-map-export-mode .jf-garden-tour-app {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

body.jfgt-map-export-mode .jfgt-app-top,
body.jfgt-map-export-mode .jfgt-bottom-nav,
body.jfgt-map-export-mode .jf-story-column,
body.jfgt-map-export-mode .jfgt-map-legend,
body.jfgt-map-export-mode .jfgt-btn-explore,
body.jfgt-map-export-mode .jfgt-sheet,
body.jfgt-map-export-mode .jfgt-sheet-backdrop,
body.jfgt-map-export-mode .jfgt-admin-map-notice {
  display: none !important;
}

body.jfgt-map-export-mode .jf-desktop-grid,
body.jfgt-map-export-mode .jf-map-column,
body.jfgt-map-export-mode .jfgt-map-wrap,
body.jfgt-map-export-mode .jfgt-map-canvas,
body.jfgt-map-export-mode .jfgt-fallback-map {
  display: flex !important;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 100vh !important;
}

body.jfgt-map-export-mode .jfgt-map-wrap,
body.jfgt-map-export-mode .jfgt-map-canvas,
body.jfgt-map-export-mode .jfgt-fallback-map {
  position: relative;
  overflow: hidden;
}

/* ── Visibility helpers ─────────────────────────────────────────────────── */
.jfgt-desktop-only { display: none !important; }
.jfgt-mobile-only  { display: block; }

.jfgt-botanical-bg,
.jfgt-welcome-panel,
.jfgt-side-panel,
.jf-desktop-grid {
  display: block;
}

.jfgt-app-top {
  flex-shrink: 0;
}

.jfgt-welcome-panel {
  display: none;
}

.jf-map-column {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.jf-story-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.jfgt-side-panel {
  display: none;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.jfgt-side-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.jfgt-side-panel-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
  border-radius: var(--jf-radius-md);
  border: 1px solid #E1D3EA;
  box-shadow: var(--jf-shadow-sm);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.jfgt-side-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FCFAFD;
  border: 1px solid rgba(86,43,112,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jf-heading);
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
  z-index: 20;
}

.jfgt-side-close svg {
  width: 18px;
  height: 18px;
  color: var(--jf-heading);
  stroke: currentColor !important;
  stroke-width: 2.4;
}

.jfgt-side-panel .jfgt-detail-hero-side,
.jfgt-side-panel .jfgt-detail-hero-placeholder.jfgt-detail-hero-side {
  height: 180px;
}

.jfgt-side-panel .jfgt-detail-name {
  font-size: 20px;
}

.jfgt-welcome-panel {
  flex: 1;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 24px 22px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
  border-radius: var(--jf-radius-md);
  border: 1px solid #E1D3EA;
  box-shadow: var(--jf-shadow-sm);
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.jfgt-welcome-panel:not([hidden]) {
  display: flex;
}

.jfgt-welcome-badge {
  display: inline-block;
  align-self: flex-start;
  background: #EEF4EE;
  color: #5F805D;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  border: 1px solid rgba(124,154,122,.28);
}

.jfgt-welcome-legend {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--jf-cream);
  border-radius: var(--jf-radius-sm);
  border: 1px solid var(--jf-border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jfgt-welcome-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--jf-text-med);
}

.jfgt-welcome-legend-item svg {
  width: 14px;
  height: 14px;
  color: var(--jf-muted);
}

.jfgt-welcome-tips {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--jf-border-light);
}

.jfgt-welcome-tips-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--jf-text);
  margin-bottom: 10px;
}

.jfgt-welcome-tips-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jfgt-welcome-tips-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--jf-text-med);
}

.jfgt-welcome-tips-list svg {
  width: 15px;
  height: 15px;
  color: var(--jf-brand);
  flex-shrink: 0;
}

.jfgt-welcome-tips-list .jfgt-flower-bullet {
  width: 15px;
  height: 15px;
}

.jfgt-welcome-lock-msg {
  margin-top: auto;
  padding-top: 16px;
  font-size: 12.5px;
  color: var(--jf-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  font-style: italic;
  border-top: 1px solid var(--jf-border-light);
}

.jfgt-welcome-lock-msg svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.jfgt-admin-map-notice {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 12;
  background: rgba(255, 243, 220, .96);
  border: 1px solid #dba617;
  color: #6b4f00;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--jf-radius-sm);
  box-shadow: var(--jf-shadow-sm);
}

.jfgt-fallback-preview-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  background: rgba(255,255,255,.94);
  color: var(--jf-brand);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(181,24,70,.2);
  box-shadow: var(--jf-shadow-sm);
}

.jfgt-fallback-map-preview {
  background: linear-gradient(160deg, #F8F4F6 0%, #F2ECF7 100%);
}

.jfgt-fallback-map-live {
  background: linear-gradient(160deg, #F8F4F6 0%, #EEF4EE 100%);
}

.jfgt-welcome-accent {
  margin-bottom: 16px;
}

.jfgt-welcome-lilac {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.jfgt-welcome-title {
  font-size: 26px;
  font-weight: 400;
  color: var(--jf-heading);
  line-height: 1.15;
  margin-bottom: 8px;
}

.jfgt-welcome-sub {
  font-size: 14px;
  color: #8E6AAE;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 12px;
}

.jfgt-welcome-copy {
  font-size: 14px;
  color: var(--jf-text-med);
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 36ch;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.jfgt-header {
  background: #FCFAFD;
  padding: 22px 24px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #D8C7D9;
}

.jfgt-header::before {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(181,24,70,.28), transparent);
  pointer-events: none;
}

.jfgt-header-botanical {
  flex-shrink: 0;
}
.jfgt-lilac-svg {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(181,24,70,.12));
}

.jfgt-header-text {
  flex: 1;
}
.jfgt-header-org {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  color: #B51846;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.jfgt-header-title {
  font-size: 36px;
  font-weight: 400;
  color: var(--jf-heading);
  line-height: 1;
  letter-spacing: 0;
}
.jfgt-header-tagline {
  font-size: 12px;
  color: var(--jf-text-med);
  margin-top: 8px;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 380px) {
  .jfgt-header {
    padding: 20px 18px 16px;
    gap: 12px;
  }
  .jfgt-lilac-svg {
    width: 50px;
    height: 50px;
  }
  .jfgt-header-title {
    font-size: 30px;
  }
}

/* ── Notice Card ─────────────────────────────────────────────────────────── */
.jfgt-notice-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin: 12px 14px;
  border-radius: var(--jf-radius-md);
  font-size: 13px;
  flex-shrink: 0;
}
.jfgt-notice-preview {
  background: var(--jf-lilac-bg);
  border: 1px solid var(--jf-lilac-light);
  color: var(--jf-brand-dark);
}
.jfgt-notice-live {
  background: var(--jf-green-bg);
  border: 1px solid #7C9A7A;
  color: var(--jf-garden-green);
}
.jfgt-notice-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: currentColor;
}
.jfgt-notice-icon svg,
.jfgt-lock-badge {
  width: 22px;
  height: 22px;
  display: block;
}
.jfgt-notice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jfgt-notice-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.jfgt-notice-msg {
  font-size: 12.5px;
  opacity: .85;
}

/* ── Main Content ────────────────────────────────────────────────────────── */
.jfgt-main {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

/* ── Views ───────────────────────────────────────────────────────────────── */
.jfgt-view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: calc(var(--jf-nav-height) + 8px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--jf-transition), transform var(--jf-transition);
  -webkit-overflow-scrolling: touch;
}
.jfgt-view-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── Screen Headers (Gardens / Tour / Info) ──────────────────────────────── */
.jfgt-screen-header {
  padding: 18px 18px 10px;
  border-bottom: 1px solid var(--jf-border-light);
  background: var(--jf-cream);
  position: sticky;
  top: 0;
  z-index: 2;
}
.jfgt-screen-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--jf-heading);
  letter-spacing: -.02em;
}
.jfgt-screen-sub {
  font-size: 12.5px;
  color: var(--jf-muted);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAP VIEW
   ═════════════════════════════════════════════════════════════════════════*/
.jfgt-view-map {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}

.jfgt-map-wrap {
  flex: 1;
  position: relative;
  background: #F2ECF7;
  overflow: hidden;
  min-height: 340px;
}

.jfgt-map-canvas {
  width: 100%;
  height: 100%;
  min-height: 340px;
}

/* Google Maps iframe/div fill */
.jfgt-map-canvas > div {
  width: 100% !important;
  height: 100% !important;
}

/* ── Fallback illustrated map ─────────────────────────────────────────────── */
.jfgt-fallback-map {
  width: 100%;
  height: 100%;
  min-height: 340px;
  position: relative;
  background: #F2ECF7;
  overflow: hidden;
}
.jfgt-fallback-map-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.jfgt-fallback-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 65%, rgba(250,247,242,.25) 100%);
  pointer-events: none;
}

/* ── Map legend ───────────────────────────────────────────────────────────── */
.jfgt-map-legend {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-radius: var(--jf-radius-sm);
  padding: 7px 10px;
  font-size: 11.5px;
  color: var(--jf-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--jf-shadow-sm);
}
.jfgt-map-legend svg {
  width: 12px;
  height: 12px;
  color: #aaa;
  flex-shrink: 0;
}
.jfgt-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.jfgt-legend-pin {
  width: 14px;
  height: 17px;
  object-fit: contain;
  flex-shrink: 0;
}
.jfgt-legend-dot-live    { background: var(--jf-garden-green); }
.jfgt-legend-dot-preview { background: var(--jf-brand); }

/* ── Map pins ─────────────────────────────────────────────────────────────── */
.jfgt-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  width: 72px;
  height: 72px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 5;
  transition: transform .18s ease, filter .18s ease;
}
.jfgt-pin:hover,
.jfgt-pin:focus,
.jfgt-pin.is-active {
  transform: translate(-50%, -100%) scale(1.06);
  outline: none;
  filter: drop-shadow(0 8px 18px rgba(168,140,189,.45));
}
.jfgt-pin:hover .jf-pin-bloom,
.jfgt-pin:focus .jf-pin-bloom,
.jfgt-pin.is-active .jf-pin-bloom {
  opacity: 1;
  transform: scale(1);
}
.jfgt-pin:hover .jf-pin-core,
.jfgt-pin:focus .jf-pin-core,
.jfgt-pin.is-active .jf-pin-core {
  transform: translateY(-4px) scale(1.05);
}

.jf-pin-bloom {
  position: absolute;
  inset: 0;
  transform: scale(0.75);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  filter: drop-shadow(0 8px 14px rgba(168, 140, 189, 0.34));
}
.jf-pin-bloom svg,
.jf-pin-core svg {
  display: block;
}
.jf-pin-core {
  position: absolute;
  left: 14px;
  top: 8px;
  z-index: 2;
  transition: transform 0.2s ease;
}
.jfgt-pin:hover .jf-pin-core path,
.jfgt-pin:focus .jf-pin-core path,
.jfgt-pin.is-active .jf-pin-core path {
  fill: #B51846;
}
.jfgt-pin:hover .jf-pin-core text,
.jfgt-pin:focus .jf-pin-core text,
.jfgt-pin.is-active .jf-pin-core text {
  fill: #B51846;
}
[data-status="live"] .jf-pin-bloom svg ellipse {
  fill: #C7B5D8;
  stroke: #B51846;
}
[data-status="live"] .jf-pin-bloom {
  filter: drop-shadow(0 8px 16px rgba(168, 140, 189, 0.38));
}

.jfgt-pin-svg {
  width: 44px;
  height: 54px;
  display: block;
}

.jfgt-pin-icon {
  font-size: 15px;
}

/* ── Explore button ───────────────────────────────────────────────────────── */
.jfgt-btn-explore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 32px);
  margin: 12px 16px;
  padding: 14px;
  background: var(--jf-brand);
  color: white;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: var(--jf-shadow-md);
  transition: background var(--jf-transition), transform .12s ease;
  flex-shrink: 0;
}
.jfgt-btn-explore:hover  { background: #8F1238; }
.jfgt-btn-explore:active { transform: scale(.98); }

/* ── Bottom sheet ─────────────────────────────────────────────────────────── */
.jfgt-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FCFAFD;
  border-radius: var(--jf-radius-lg) var(--jf-radius-lg) 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.14);
  z-index: 20;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  max-height: 60%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.jfgt-sheet.jfgt-sheet-open {
  transform: translateY(0);
}
.jfgt-sheet-handle {
  width: 40px;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  margin: 10px auto 6px;
  flex-shrink: 0;
}
.jfgt-sheet-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jf-muted);
  background: var(--jf-cream);
}
.jfgt-sheet-close svg {
  width: 16px;
  height: 16px;
}
.jfgt-sheet-body {
  padding: 0 16px 20px;
  overflow-y: auto;
  flex: 1;
}

.jfgt-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.3);
  z-index: 19;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.jfgt-sheet-backdrop.jfgt-backdrop-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Sheet Card content ───────────────────────────────────────────────────── */
.jfgt-sheet-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-top: 6px;
}
.jfgt-sheet-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--jf-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--jf-cream-dark);
}
.jfgt-sheet-thumb-placeholder {
  width: 72px;
  height: 72px;
  border-radius: var(--jf-radius-sm);
  background: linear-gradient(135deg, var(--jf-lilac-bg), var(--jf-green-bg));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.jfgt-placeholder-accent {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.jfgt-sheet-info {
  flex: 1;
  min-width: 0;
}
.jfgt-sheet-number {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #7C9A7A;
  margin-bottom: 2px;
}
.jfgt-sheet-name {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--jf-heading);
}
.jfgt-sheet-gardener {
  font-size: 12.5px;
  color: var(--jf-muted);
  margin-top: 2px;
}
.jfgt-sheet-cat {
  display: inline-block;
  background: #EEF4EE;
  color: #5F805D;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 5px;
}
.jfgt-sheet-location {
  font-size: 12px;
  color: var(--jf-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.jfgt-sheet-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--jf-border-light);
}
.jfgt-sheet-locked {
  font-size: 12px;
  color: var(--jf-muted);
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-style: italic;
}
.jfgt-sheet-location svg,
.jfgt-gc-location svg,
.jfgt-tour-loc svg,
.jfgt-detail-address svg,
.jfgt-sheet-locked svg,
.jfgt-detail-locked svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GARDENS LIST VIEW
   ═════════════════════════════════════════════════════════════════════════*/
.jfgt-garden-cards {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jfgt-garden-card {
  background: #FCFAFD;
  border-radius: var(--jf-radius-md);
  box-shadow: var(--jf-shadow-sm);
  border: 1px solid #E1D3EA;
  overflow: hidden;
  display: flex;
  cursor: pointer;
  transition: box-shadow var(--jf-transition), transform .12s ease;
}
.jfgt-garden-card:hover { box-shadow: var(--jf-shadow-md); }
.jfgt-garden-card:active { transform: scale(.99); }

.jfgt-gc-img-wrap {
  width: 90px;
  flex-shrink: 0;
  position: relative;
}
.jfgt-gc-img {
  width: 90px;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}
.jfgt-gc-img-placeholder {
  width: 90px;
  min-height: 90px;
  height: 100%;
  background: linear-gradient(145deg, var(--jf-lilac-bg) 0%, var(--jf-green-bg) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.jfgt-gc-pin-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--jf-garden-green);
  color: white;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
[data-status="preview"] .jfgt-gc-pin-badge { background: var(--jf-lilac-purple); }

.jfgt-gc-body {
  flex: 1;
  padding: 12px 12px 12px 12px;
  min-width: 0;
}
.jfgt-gc-number {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #7C9A7A;
  margin-bottom: 2px;
}
[data-status="live"] .jfgt-gc-number { color: var(--jf-garden-green); }
.jfgt-gc-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--jf-heading);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jfgt-gc-gardener {
  font-size: 12px;
  color: var(--jf-muted);
  margin-top: 2px;
}
.jfgt-gc-cat {
  display: inline-block;
  background: #EEF4EE;
  color: #5F805D;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  margin-top: 6px;
}
[data-status="live"] .jfgt-gc-cat {
  background: var(--jf-green-bg);
  color: var(--jf-garden-green);
}
.jfgt-gc-location {
  font-size: 11.5px;
  color: var(--jf-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.jfgt-gc-arrow {
  margin-left: auto;
  padding-left: 8px;
  color: #ccc;
  display: flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUR VIEW
   ═════════════════════════════════════════════════════════════════════════*/
.jfgt-tour-list {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.jfgt-tour-stop {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  cursor: pointer;
  position: relative;
}
.jfgt-tour-stop + .jfgt-tour-stop {
  border-top: 1px solid var(--jf-border-light);
}

.jfgt-tour-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.jfgt-tour-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--jf-garden-green);
  color: white;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--jf-shadow-sm);
  flex-shrink: 0;
}
[data-status="preview"] .jfgt-tour-num { background: var(--jf-lilac-purple); }
.jfgt-tour-line {
  width: 2px;
  flex: 1;
  min-height: 20px;
  background: var(--jf-border);
  margin-top: 6px;
}
.jfgt-tour-stop:last-child .jfgt-tour-line { display: none; }

.jfgt-tour-content { flex: 1; }
.jfgt-tour-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--jf-text);
  line-height: 1.2;
}
.jfgt-tour-gardener {
  font-size: 12px;
  color: var(--jf-muted);
  margin-top: 2px;
}
.jfgt-tour-loc {
  font-size: 12px;
  color: var(--jf-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.jfgt-tour-footer {
  padding: 0 14px 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFO VIEW
   ═════════════════════════════════════════════════════════════════════════*/
.jfgt-info-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jfgt-card {
  background: #FCFAFD;
  border-radius: var(--jf-radius-md);
  border: 1px solid #E1D3EA;
  padding: 16px;
  box-shadow: var(--jf-shadow-sm);
}
.jfgt-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.jfgt-card-head h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--jf-heading);
}
.jfgt-card-emoji {
  display: none;
}
.jfgt-card-icon {
  width: 18px;
  height: 18px;
  color: #8E6AAE;
  flex-shrink: 0;
}

.jfgt-tips-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.jfgt-tips-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--jf-text-med);
}
.jfgt-tip-bullet {
  color: var(--jf-lilac-purple);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  line-height: 1;
}
.jfgt-flower-bullet {
  display: block;
  object-fit: contain;
}

.jfgt-contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jfgt-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--jf-brand);
  padding: 8px 10px;
  border-radius: var(--jf-radius-sm);
  background: #F8F4F6;
  transition: background var(--jf-transition), color var(--jf-transition);
}
.jfgt-contact-row:hover { background: #EEF4EE; color: #5F805D; }
.jfgt-contact-row svg {
  width: 18px;
  height: 18px;
  color: #7C9A7A;
  flex-shrink: 0;
}

.jfgt-event-date {
  font-size: 15px;
  font-weight: 600;
  color: var(--jf-garden-green);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DETAIL VIEW
   ═════════════════════════════════════════════════════════════════════════*/
.jfgt-view-detail {
  background: #FCFAFD;
  padding-bottom: calc(var(--jf-nav-height) + 16px);
}

#jfgt-detail-body {
  display: flex;
  flex-direction: column;
}

.jfgt-detail-hero {
  width: 100%;
  height: 220px;
  object-fit: cover;
  flex-shrink: 0;
}
.jfgt-detail-hero-placeholder {
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, #B51846 0%, #C7B5D8 55%, #7C9A7A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  flex-shrink: 0;
}
.jfgt-detail-hero-bar {
  position: relative;
  margin-top: -1px;
}
.jfgt-detail-back {
  position: absolute;
  top: -200px;
  left: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jf-brand);
  box-shadow: var(--jf-shadow-md);
  z-index: 5;
  transition: background var(--jf-transition), color var(--jf-transition);
}
.jfgt-detail-back:hover { background: white; color: var(--jf-brand-dark); }
.jfgt-detail-back svg {
  width: 18px;
  height: 18px;
}

.jfgt-detail-body-inner {
  padding: 18px 18px 10px;
}
.jfgt-detail-number {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--jf-lilac-purple);
  margin-bottom: 4px;
}
[data-status="live"] .jfgt-detail-number { color: var(--jf-garden-green); }
.jfgt-detail-name {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--jf-heading);
  letter-spacing: 0;
}
.jfgt-detail-gardener {
  font-size: 13px;
  color: var(--jf-muted);
  margin-top: 4px;
}
.jfgt-detail-cat {
  display: inline-flex;
  align-items: center;
  background: #EEF4EE;
  color: #5F805D;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 8px;
}
[data-status="live"] .jfgt-detail-cat {
  background: var(--jf-green-bg);
  color: var(--jf-garden-green);
}

.jfgt-detail-desc {
  font-size: 14px;
  color: var(--jf-text-med);
  line-height: 1.6;
  margin-top: 14px;
}

.jfgt-detail-address {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--jf-muted);
  margin-top: 10px;
}

.jfgt-detail-section {
  padding: 0 18px 16px;
  border-top: 1px solid var(--jf-border-light);
  margin-top: 16px;
  padding-top: 16px;
}
.jfgt-detail-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--jf-muted);
  margin-bottom: 10px;
}

.jfgt-highlights-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jfgt-highlights-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--jf-text-med);
}
.jfgt-highlight-bullet {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
}

.jfgt-detail-actions {
  padding: 0 18px 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.jfgt-detail-locked {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--jf-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  font-style: italic;
  background: var(--jf-lilac-bg);
  margin: 0 18px 18px;
  padding: 10px 14px;
  border-radius: var(--jf-radius-sm);
}

/* ── Shared buttons ───────────────────────────────────────────────────────── */
.jfgt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  transition: background var(--jf-transition), transform .1s ease, box-shadow var(--jf-transition);
  cursor: pointer;
}
.jfgt-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.jfgt-btn:active { transform: scale(.97); }

.jfgt-btn-primary {
  background: var(--jf-brand);
  color: white;
  box-shadow: var(--jf-shadow-sm);
}
.jfgt-btn-primary:hover { background: #8F1238; }

.jfgt-btn-outline {
  background: transparent;
  color: var(--jf-brand);
  border: 2px solid var(--jf-brand);
}
.jfgt-btn-outline:hover { background: #E8DDF1; }

.jfgt-btn-ghost {
  background: rgba(181,24,70,0.06);
  color: var(--jf-brand);
  font-size: 13px;
  padding: 10px 14px;
}
.jfgt-btn-ghost:hover { background: #EEF4EE; color: #5F805D; }

.jfgt-btn-full { width: 100%; }

/* ── Detail Open button inside sheet ─────────────────────────────────────── */
.jfgt-btn-open-detail {
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION
   ═════════════════════════════════════════════════════════════════════════*/
.jfgt-bottom-nav {
  display: flex;
  align-items: stretch;
  background: #FCFAFD;
  border-top: 1px solid var(--jf-border);
  border-bottom: 1px solid var(--jf-border);
  height: var(--jf-nav-height);
  flex-shrink: 0;
  position: static;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

.jfgt-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px 10px;
  color: #7B6A78;
  cursor: pointer;
  transition: color var(--jf-transition), background var(--jf-transition);
  position: relative;
}
.jfgt-nav-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: var(--jf-brand);
  opacity: 0;
  transition: opacity var(--jf-transition);
}
.jfgt-nav-btn.jfgt-nav-active {
  color: #B51846;
  background: rgba(181,24,70,0.06);
}
.jfgt-nav-btn.jfgt-nav-active::after {
  opacity: 1;
}
.jfgt-nav-btn:hover { background: rgba(181,24,70,0.06); color: #8E6AAE; }

.jfgt-nav-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}
.jfgt-nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .jfgt-view,
  .jfgt-sheet,
  .jfgt-pin,
  .jfgt-btn,
  .jfgt-nav-btn,
  .jfgt-garden-card {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Mobile top-tab shell ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .jf-garden-tour-app {
    height: auto;
    min-height: 100svh;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    --jf-mobile-map-min: calc(100svh - 180px);
  }

  .jfgt-desktop-only,
  .jfgt-welcome-panel,
  .jfgt-side-panel {
    display: none !important;
  }

  .jfgt-botanical-bg {
    display: none;
  }

  .jfgt-app-top {
    display: block;
    flex-shrink: 0;
  }

  .jf-desktop-grid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
  }

  .jf-map-column {
    flex: 1;
    display: none;
    min-height: 0;
  }

  .jf-garden-tour-app[data-active-view="map"] .jf-map-column {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: var(--jf-mobile-map-min);
  }

  .jf-garden-tour-app[data-active-view="map"] .jfgt-map-wrap {
    flex: 1 1 auto;
    min-height: var(--jf-mobile-map-min);
  }

  .jf-garden-tour-app[data-active-view="map"] .jfgt-map-canvas,
  .jf-garden-tour-app[data-active-view="map"] .jfgt-fallback-map {
    min-height: var(--jf-mobile-map-min);
  }

  .jf-garden-tour-app[data-active-view="map"] .jfgt-map-canvas > div {
    min-height: var(--jf-mobile-map-min) !important;
  }

  .jfgt-btn-explore {
    flex-shrink: 0;
    margin: 8px 16px 10px;
    width: calc(100% - 32px);
  }

  .jf-story-column {
    flex: 1;
    display: none;
    min-height: 0;
  }

  .jf-garden-tour-app:not([data-active-view="map"]) .jf-story-column {
    display: flex;
    flex: 0 0 auto;
    min-height: auto;
  }

  .jfgt-main {
    flex: 0 0 auto;
    position: relative;
    overflow: visible;
  }

  .jfgt-view {
    position: static;
    display: none;
    overflow: visible;
    padding-bottom: 18px;
    opacity: 1;
    pointer-events: none;
    transform: none;
    transition: none;
  }

  .jfgt-view-active {
    display: block;
    pointer-events: auto;
  }

  .jfgt-bottom-nav {
    position: sticky;
    top: 0;
    bottom: auto;
    margin-top: 0;
    flex-shrink: 0;
    z-index: 1;
  }

  .jfgt-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(420px, 70svh);
    z-index: 1000;
  }

  .jfgt-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
  }
}

/* ── Utility: visually hidden ─────────────────────────────────────────────── */
.jfgt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Loading state ────────────────────────────────────────────────────────── */
.jfgt-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--jf-muted);
  font-size: 13px;
  background: #F2ECF7;
}
.jfgt-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--jf-border);
  border-top-color: var(--jf-lilac-purple);
  border-radius: 50%;
  animation: jfgt-spin .8s linear infinite;
}
@keyframes jfgt-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET — 768px to 1023px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .jf-garden-tour-app {
    --jf-nav-height: 56px;
    max-width: 720px;
    margin: 24px auto 40px;
    border-radius: var(--jf-radius-xl);
    box-shadow: var(--jf-shadow-lg), 0 0 0 1px var(--jf-border);
    overflow: hidden;
    min-height: auto;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }

  .jfgt-app-top {
    order: 1;
  }

  .jf-app-tabs {
    order: 2;
  }

  .jf-desktop-grid {
    order: 3;
  }

  .jfgt-mobile-only {
    display: none !important;
  }

  .jfgt-desktop-only {
    display: inline-flex !important;
  }

  .jfgt-botanical-bg {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(circle at 92% 8%, rgba(181,24,70,.06) 0%, transparent 28%),
      radial-gradient(circle at 4% 92%, rgba(45,90,39,.05) 0%, transparent 24%);
  }

  .jfgt-app-top,
  .jf-app-tabs,
  .jf-desktop-grid {
    position: relative;
    z-index: 1;
  }

  .jfgt-app-top {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 18px 20px 0;
  }

  .jfgt-header {
    flex: 1;
    border-radius: var(--jf-radius-md);
    margin: 0;
  }

  .jfgt-notice-card {
    flex: 0 0 240px;
    margin: 0;
    align-self: center;
  }

  .jfgt-bottom-nav {
    position: static;
    height: var(--jf-nav-height);
    box-shadow: none;
    border-top: none;
    border-bottom: 1px solid var(--jf-border);
    margin: 0 20px;
    border-radius: var(--jf-radius-md) var(--jf-radius-md) 0 0;
    background: #F2ECF7;
  }

  .jfgt-nav-btn::after {
    top: auto;
    bottom: 0;
    border-radius: 3px 3px 0 0;
  }

  .jf-desktop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px 20px 24px;
    min-height: 520px;
  }

  .jf-map-column {
    min-height: 520px;
    border-radius: var(--jf-radius-md);
    overflow: hidden;
    border: 1px solid var(--jf-border-light);
    box-shadow: var(--jf-shadow-sm);
    background: #F2ECF7;
  }

  .jfgt-map-wrap {
    min-height: 520px;
    flex: 1;
  }

  .jfgt-map-canvas,
  .jfgt-fallback-map {
    min-height: 520px;
  }

  .jf-story-column {
    min-height: 520px;
    max-height: 520px;
  }

  .jfgt-welcome-panel {
    height: 100%;
  }

  .jfgt-side-panel {
    height: 100%;
    max-height: 520px;
  }

  .jfgt-main {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
    background: #FCFAFD;
    border-radius: var(--jf-radius-md);
    border: 1px solid var(--jf-border-light);
    box-shadow: var(--jf-shadow-sm);
  }

  .jfgt-main[hidden] {
    display: none !important;
  }

  .jfgt-view {
    position: absolute;
    inset: 0;
    padding-bottom: 0;
    transform: none;
    opacity: 0;
  }

  .jfgt-view-active {
    opacity: 1;
  }

  .jfgt-view-map {
    display: none !important;
  }

  .jfgt-view-detail {
    display: none !important;
  }

  .jfgt-garden-cards {
    padding: 12px;
  }

  .jf-map-column .jfgt-map-legend {
    display: none;
  }

  .jf-story-column {
    height: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP — 1024px and above
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .jf-garden-tour-app {
    --jf-desktop-body-height: clamp(430px, calc(100svh - 300px), 620px);
    max-width: 1240px;
    margin: 32px auto 48px;
    border-radius: var(--jf-radius-xl);
    min-height: 0;
  }

  .jfgt-app-top {
    padding: 20px 28px 12px;
    align-items: center;
    gap: 20px;
  }

  .jfgt-header {
    padding: 20px 24px 16px;
    border-radius: var(--jf-radius-md);
  }

  .jfgt-header-title {
    font-size: 40px;
  }

  .jfgt-header-tagline {
    margin-top: 6px;
  }

  .jfgt-notice-card {
    flex: 0 0 320px;
    padding: 14px 16px;
    margin: 0;
  }

  .jfgt-bottom-nav {
    margin: 0 28px;
    padding: 0 12px;
    background: #FCFAFD;
    border: 1px solid var(--jf-border-light);
    border-radius: var(--jf-radius-md);
  }

  .jfgt-nav-btn {
    flex-direction: row;
    gap: 8px;
    padding: 12px 18px;
    border-radius: var(--jf-radius-sm);
  }

  .jfgt-nav-btn.jfgt-nav-active {
    color: #B51846;
    background: rgba(181,24,70,0.06);
  }

  [data-status="live"] .jfgt-nav-btn.jfgt-nav-active {
    color: #B51846;
    background: rgba(181,24,70,0.06);
  }

  [data-status="live"] .jfgt-nav-btn::after {
    background: var(--jf-brand);
  }

  .jfgt-nav-label {
    font-size: 12px;
  }

  .jf-desktop-grid {
    grid-template-columns: minmax(0, 65%) minmax(320px, 35%);
    gap: 22px;
    padding: 16px 28px 28px;
    height: var(--jf-desktop-body-height);
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
  }

  .jf-map-column {
    min-height: 0;
    height: 100%;
  }

  .jfgt-map-wrap,
  .jfgt-map-canvas,
  .jfgt-fallback-map {
    min-height: 0;
  }

  .jf-story-column {
    min-height: 0;
    max-height: none;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .jfgt-welcome-panel,
  .jfgt-side-panel:not([hidden]) {
    flex: 1;
    min-height: 0;
    max-height: 100%;
  }

  .jfgt-side-panel {
    max-height: 100%;
  }

  .jfgt-main {
    flex: 1;
    min-height: 0;
    max-height: 100%;
  }

  .jfgt-welcome-panel {
    padding: 28px 26px;
  }

  .jfgt-welcome-title {
    font-size: 28px;
  }

  .jfgt-side-panel .jfgt-detail-hero-side,
  .jfgt-side-panel .jfgt-detail-hero-placeholder.jfgt-detail-hero-side {
    height: 200px;
  }

  .jfgt-garden-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  .jfgt-map-legend.jfgt-desktop-hide {
    display: none;
  }
}