/* GMXGivers rich surfaces on the journey L0 — Navy Luxe LIGHT (FOUNDATIONAL #1: no
   reverse type). EXTRACTED from the standalone app.css .gg-* surface styles (search
   form, chips, results, the full-scorecard tile grid, business detail, saved rows) +
   the Shelf light re-theme. The standalone .shell / .gx-appbar / .gx-tabbar frame +
   html,body pin are DROPPED — the L0 shell owns the frame. The detail is now an in-view
   push (a normal view), NOT the standalone's absolute overlay — so .gg-card/.gg-detail's
   position:absolute is dropped; the container is the plain .gg-detail-surface. */

/* Palette scoped to our surfaces — GMX App Design Standard v1.0.0 §2 Indigo+Honey
   (technical/_canon/art/GMX_APP_DESIGN_STANDARD.md). Ink on cream, indigo chrome,
   honey FILL-ONLY (never text). Retired: Navy-Luxe #122c4f/#fbf9e4. */
.gg-surface, .gg-detail-surface {
  --ink: #1A1A30;           /* body copy, ~14:1 on cream */
  --pearl: #F8F5EC;         /* gm-cream page bg */
  --navy: #2B2D5E;          /* gm-indigo — headings / chrome / primary, ~11:1 */
  --card: #ffffff;
  --cloud: #F0EEE9;         /* alt surface / cover wash */
  --line: #E8D5AD;          /* gm hairline */
  --surface: #F0EEE9;
  --muted: #4A4E8A;         /* gm-ink-soft — secondary, ~6:1 on cream (AA) */
  --honey: #D4A84B;         /* interactive FILL only (1.9:1 — never a text colour) */
  --gold-deep: #9A7830;     /* hover / UI stroke (large/non-text only) */
  --focus: var(--navy);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* v1.0 (operator 2026-09-05): side gutter widened 14->18px — content read edge-to-edge on phone.
     #l0-content has no horizontal padding (shared L0), so the Givers surface owns its own gutter. */
  padding: 12px 18px 16px;
}
.gx-section-h { color: var(--navy); font-size: 17px; margin: 14px 2px 8px; }
.gx-hint { color: var(--muted); font-size: 14px; line-height: 1.5; }
/* v1.0 (operator 2026-09-05): build-version footer — always shows which version/patch is loaded. */
.gg-ver { text-align: center; color: var(--muted); font-size: 12px; padding: 20px 0 10px; opacity: 0.8; letter-spacing: 0.02em; }

/* Screen-reader-only label */
.gg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Search form ── */
.gg-search { margin: 4px 0 10px; }
.gg-frame { color: var(--navy); font-size: 16px; font-weight: 700; margin: 2px 2px 12px; }
.gg-q, .gg-region {
  width: 100%; min-height: 48px; padding: 12px 14px; font-size: 16px;
  color: var(--ink); background: var(--card);
  /* 1.1.0 dv1 fix (ART-GV-6, 2026-10-04): the field edge is the only cue -> >=3:1 non-text (#8f7a45 on #fff = 4.17:1) */
  border: 1px solid #8f7a45; border-radius: 12px; margin-bottom: 10px;
}
.gg-region-row { display: flex; gap: 8px; }
.gg-region-row .gg-region { flex: 1; }
.gg-usearea {
  flex: none; min-height: 48px; padding: 0 14px; font-size: 14px;
  color: var(--navy); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.gg-chips { border: none; padding: 0; margin: 2px 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.gg-chip { position: relative; }
.gg-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.gg-chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
  font-size: 14px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px;
}
.gg-chip input:checked + span { background: var(--navy); color: var(--pearl); border-color: var(--navy); font-weight: 600; }
.gg-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.gg-mode {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px;
  padding: 10px 2px; margin-bottom: 10px; cursor: pointer;
}
.gg-mode input { width: 22px; height: 22px; accent-color: var(--navy); grid-row: span 2; }
.gg-mode-lbl { font-weight: 600; color: var(--ink); }
.gg-mode-note { font-size: 13px; color: var(--muted); grid-column: 2; }
.gg-submit {
  width: 100%; min-height: 50px; font-size: 16px; font-weight: 700;
  background: var(--navy); color: var(--pearl); border: none; border-radius: 12px; cursor: pointer;
}

/* ── Results ── */
.gg-status { color: var(--muted); font-size: 14px; padding: 6px 2px; }
.gg-offline-note {
  margin: 0 0 8px; padding: 8px 10px; font-size: 13px; line-height: 1.4;
  color: #5a3f00; background: #f3ead0; border: 1px solid #c9b784; border-radius: 8px;
}
.gg-link-btn, .gg-saved-run {
  display: inline-flex; align-items: center;
  background: none; border: none; color: var(--navy); font-weight: 600;
  font-size: 14px; cursor: pointer; padding: 4px 2px; min-height: 44px; text-decoration: underline;
}

/* ── Business detail (in-view push) ── */
.gg-card-back { background: none; border: none; color: var(--navy); font-size: 15px; padding: 12px 4px; min-height: 44px; cursor: pointer; }
.gg-card-id { margin: 6px 2px 14px; }
.gg-card-title { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
.gg-card-sub { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
/* ART 2026-09-05: detail header = category-themed monogram + title block, so the detail
   page carries the same colour identity as the tapped row (mirror-not-invent). */
.gg-card-head { display: flex; align-items: flex-start; gap: 14px; }
.gg-card-mono { flex: none; }
.gg-card-mono .shelf-art-mono {
  width: 60px; height: 60px; border-radius: 15px; font-size: 26px !important;
  box-shadow: 0 2px 6px rgba(18,44,79,.12);
}
.gg-card-head-txt { min-width: 0; padding-top: 2px; }
/* Category chip on the business detail (surfaces the rich taxonomy, not just a list badge).
   Honey-tinted pill, ink glyph+text — light surface (Ogilvy / FOUNDATIONAL #1). */
.gg-card-cat { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0;
  font-size: 12.5px; font-weight: 600; color: #7a5a06; /* AA: 5.76:1 on #FBF3DE (was #9A7830=3.72, fail) */
  background: #FBF3DE; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.gg-card-cat i { color: #C79A2E; }
.gg-card-cat i { font-size: 15px; }
.gg-headline { font-size: 15px; color: var(--ink); margin: 10px 0 0; line-height: 1.5; }
.gg-coarse { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
/* v1.0 (operator 2026-08-27): the detail action bar (.gg-card-actions / .gg-act / Save /
   .gg-act-join "Join the circle") + the private-note textarea are REMOVED — no accounts,
   no member funnel, no circle in v1.0. Their styles are deleted to prevent re-drift. */

/* ── Tile grid (the full scorecard: entire vocabulary every time) ── */
.gg-tiles-mount { margin: 6px 0 4px; }
.gg-set {
  margin: 0 0 10px; padding: 8px 9px 9px; border-radius: 10px;
  background: var(--set-bg, transparent); border: 1px solid var(--set-bd, transparent);
}
.gg-set-h { font-size: 13px; color: var(--ink); margin: 0 2px 8px; font-weight: 700; }
.gg-set-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
/* Learnable per-set tints (mirror the web card canon). Colour is ADDITIVE to icon +
   label + position, NEVER the only signal (glow=ring, aria-label=words; FILLED/EMPTY only). */
.gg-set--web       { --set-bg: #eef2f8; --set-bd: #d3ddec; }
.gg-set--listings  { --set-bg: #eef0e8; --set-bd: #dcdcc8; }
.gg-set--community { --set-bg: #e8f1ee; --set-bd: #cfe0d9; }
.gg-set--giver     { --set-bg: #f6edd2; --set-bd: #e0cf9c; }
.gg-set--gmway     { --set-bg: #f2ead6; --set-bd: #ddc98f; }
.gg-tile {
  position: relative; width: 96px; min-height: 78px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 8px 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--muted);
}
/* Scorecard icons = Phosphor duotone (vendored font, ph-duotone <i>), indigo on light.
   font-size sizes the glyph; colour via currentColor. NO emoji, NO CDN (FOUNDATIONAL #8). */
.gg-tile-glyph { font-size: 24px; line-height: 1; filter: none; color: var(--navy); display: inline-flex; }
/* FILLED = a tasteful glow: soft green wash + a crisp ring + gentle lift, so the verdict
   reads at a glance without shouting (ART 2026-09-05). Glyph deepens to the ink green. */
.gg-tile--glow {
  border-color: #2e7d43; color: var(--ink);
  background: linear-gradient(160deg, #f3faf4 0%, #e6f3e9 100%);
  box-shadow: 0 0 0 2px rgba(46,125,67,.28), 0 2px 6px rgba(46,125,67,.14);
}
.gg-tile--glow .gg-tile-glyph { color: #256b37; }
/* the giver + GM-Way sets glow HONEY (their identity colour) rather than green */
.gg-set--giver .gg-tile--glow, .gg-set--gmway .gg-tile--glow {
  border-color: #a9790a;
  background: linear-gradient(160deg, #fdf7e6 0%, #f6ecce 100%);
  box-shadow: 0 0 0 2px rgba(169,121,10,.32), 0 2px 6px rgba(169,121,10,.16);
}
.gg-set--giver .gg-tile--glow .gg-tile-glyph, .gg-set--gmway .gg-tile--glow .gg-tile-glyph { color: #8a6208; }
/* EMPTY = recede quietly so filled slots pop by contrast ("coverage growing", not "missing") */
.gg-tile--empty { background: var(--surface); border-color: var(--line); }
.gg-tile--empty .gg-tile-glyph { filter: grayscale(1); opacity: .65; } /* 1.1.0 dv1 fix (ART-GV-7): was .5 (2.76-2.96:1) */
/* v1.0: no LOCKED tile state (operator 2026-08-27) — .gg-tile--lock / .gg-tile-lock removed. */
.gg-tile-lbl { font-size: 11px; line-height: 1.25; text-align: center; color: var(--ink); max-width: 100%; }

/* ── Detail extras ── */
.gg-non911 { font-size: 13px; color: #8a2a17; background: #fbeee9; border: 1px solid #e6cfc7; border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.gg-links { margin: 12px 0; }
.gg-links-h { font-size: 14px; color: var(--navy); margin: 0 0 6px; }
.gg-links ul { list-style: none; padding: 0; margin: 0; }
.gg-links li { margin: 0 0 6px; }
.gg-links a { color: var(--navy); font-size: 15px; min-height: 44px; display: inline-block; line-height: 44px; }
/* v1.0: private-note textarea (.gg-note-wrap / .gg-note) removed — no per-device notes. */

/* ── Saved searches rows ── */
.gg-saved-row {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 4px 10px; margin-bottom: 8px;
}
.gg-saved-run { flex: 1; text-align: left; text-decoration: none; }
.gg-saved-del { flex: none; background: none; border: none; color: var(--muted); font-size: 16px; min-width: 44px; min-height: 44px; cursor: pointer; }

/* v1.0 (operator 2026-08-27): the Join/signup surface is removed — .gg-about-* deleted. */

/* ── Shelf primitive re-themed LIGHT via its --jny-* hook (results + favorites lists).
      Base .jny-shelf styles ship in app/lib/shelf.css (DARK defaults); we override the
      vars to our Navy Luxe LIGHT surface — same approach as the standalone app.css. ── */
.jny-shelf {
  --jny-surface-0: #F8F5EC; --jny-surface-1: #ffffff; --jny-surface-2: #F0EEE9;
  --jny-ink: #1A1A30; --jny-ink-dim: #4A4E8A; --jny-accent: #2B2D5E; --jny-border: #E8D5AD;
  background: transparent; height: auto;
}
.jny-shelf .shelf-body { padding: 4px 0 8px; }

/* ── ART beautification pass (2026-09-05) — result-list card polish, Givers-SCOPED so the
      shared base shelf.css (other apps) is untouched. Goal: rows read as finished cards with
      quiet depth + a clear typographic hierarchy, not flat grey rows. Light surface, AA held. ── */
.jny-shelf[data-layout="list"] .shelf-body { gap: 10px; }
.jny-shelf[data-layout="list"] .shelf-item {
  gap: 12px; padding: 11px 12px; border-radius: 14px;
  border: 1px solid #ECE4CD;
  box-shadow: 0 1px 2px rgba(18,44,79,.05), 0 3px 10px rgba(18,44,79,.045);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.jny-shelf[data-layout="list"] .shelf-item:hover {
  border-color: #E0CF9C;
  box-shadow: 0 2px 4px rgba(18,44,79,.07), 0 8px 20px rgba(18,44,79,.08);
}
/* the category-themed monogram — a real avatar tile: bigger, softly rounded, gentle drop */
.jny-shelf[data-layout="list"] .shelf-art {
  width: 52px; height: 52px; border-radius: 13px;
  box-shadow: 0 1px 3px rgba(18,44,79,.10);
}
.jny-shelf[data-layout="grid"] .shelf-art { border-radius: 14px; }
.jny-shelf .shelf-art-mono { border-radius: inherit; }

/* ── Vendored SCRIPT monogram font (ART 2026-09-06, operator direction).
      SOV: self-hosted woff2 in app/fonts/ — NO runtime fonts.googleapis.com/gstatic (won't load
      in sandbox + violates no-external-deps). Both OFL 1.1 (see app/fonts/OFL_NOTICE.txt).
      LIVE DEFAULT = MonteCarlo. Great Vibes = ALTERNATIVE: to compare, comment the MonteCarlo
      @font-face + first font-family line below, and uncomment the Great Vibes pair. ── */
@font-face {
  font-family: "GiverMono";
  src: url("fonts/montecarlo.woff2") format("woff2");   /* MonteCarlo — LIVE DEFAULT */
  font-weight: 400; font-style: normal; font-display: swap;
}
/* ALT — Great Vibes (one-line swap: comment the MonteCarlo src above, uncomment this):
@font-face {
  font-family: "GiverMono";
  src: url("fonts/greatvibes.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}  */

/* ── Monogram = shine-gradient tile (ART 2026-09-06, operator "our tiles may look fancy").
      Mirrors freefrontend Shine Gradient Buttons: per-hue gradient (set inline in shelf.js) +
      a vendored SCRIPT glyph (GiverMono=MonteCarlo) + a diagonal GLOSS stripe + soft drop.
      ONE system (Shelf.monoHtml) so list + detail header inherit. Script letters are ROTATED,
      slightly OVERLAPPED (interlock) + SHADED for depth; the front letter carries a light halo
      so where the two script strokes cross it separates cleanly (never muddy). AA: dark same-hue
      glyph on the lightest stop = 6.37:1 worst hue (verified, post rotation+overlap). Serif stack
      is the graceful fallback if the woff2 fails. Gloss sits BELOW the z-indexed letters. ── */
.shelf-art-mono {
  font-family: "GiverMono", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  /* box-shadow (per-hue ring + inset highlight + soft drop) is set INLINE in shelf.js — inline
     wins over any stylesheet rule, so it stays the SSOT for the tile's depth. */
}
/* .mono-i = the rotated, interlocked pair. Sits above the gloss (z-index 1). */
.shelf-art-mono .mono-i {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transform: rotate(-9deg); transform-origin: 50% 55%;    /* slight off-axis tilt */
  font-size: 0.75em; line-height: 1;                       /* ~half size (operator 2026-09-06) — was 1.5em/too big */
  font-weight: 400;                                        /* script weights read best at 400 */
}
.shelf-art-mono .mono-a,
.shelf-art-mono .mono-b {
  position: relative; display: inline-block;
  /* faux-bold (ART 2026-09-06, operator CONTRAST pass): MonteCarlo is single-weight, so thicken
     the strokes with a small text-stroke in the glyph's own color (currentColor = inline per-hue
     fg from shelf.js). Just enough to read boldly at 0.75em without going clumsy. */
  -webkit-text-stroke: 0.5px currentColor; text-stroke: 0.5px currentColor;
}
/* back letter — soft dark drop for dimension (consistent with the tile's gloss/depth) */
.shelf-art-mono .mono-a { z-index: 0; text-shadow: 0 1px 1px rgba(20,23,31,.28); }
/* front letter — SLIGHT overlap (interlock) + a light HALO so the crossing strokes separate,
   plus a soft dark drop. Halo keeps the front glyph reading on top without lightening it. */
.shelf-art-mono .mono-b {
  z-index: 1; margin-left: -0.14em;
  text-shadow: 0 0 3px rgba(255,255,255,.92), 0 0 6px rgba(255,255,255,.72),
               0 1px 1px rgba(20,23,31,.30);
}
.shelf-art-mono .mono-solo { margin-left: 0; }              /* single initial — no overlap */
.shelf-art-mono::after {                                    /* diagonal shine stripe */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -45%; left: -35%; width: 55%; height: 190%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(22deg);
}

/* typographic hierarchy: name = the anchor (navy, heavier), place = quiet secondary */
.jny-shelf .shelf-title { font-size: 15px; font-weight: 700; color: #1A1A30; letter-spacing: -0.01em; }
.jny-shelf .shelf-sub   { font-size: 12.5px; color: #4A4E8A; margin-top: 3px; }

/* badges = the verdict at a glance. Soft light pills, honey hairline. */
.jny-shelf .shelf-badges { gap: 6px; margin-top: 6px; }
.jny-shelf .shelf-badge {
  font-size: 11px; font-weight: 600; padding: 3px 9px;
  background: #F6F2E6; color: #4A4E8A; border: 1px solid #E8D5AD; border-radius: 999px;
}
/* the giver verdict — honey-tinted, with a reliable text heart (no colour-emoji font on web) */
.jny-shelf .shelf-badge--giver {
  background: #FBF3DE; color: #7a5a06; border-color: #E0CF9C;
}
.jny-shelf .shelf-badge--giver::before {
  content: "\2665"; margin-right: 4px; color: #C79A2E; font-size: 11px;
}

/* ── Categories BROWSE grid (ART 2026-09-06, operator "make Categories a real browse grid").
      Phone-app category bar (mirrors Yelp/Foursquare tiles). LIGHT surfaces ONLY (FOUNDATIONAL
      #1) — navy glyph + navy label on light indigo/honey gradient stops, NO reverse type. Each
      card presets an FSQ top-level category -> runs the shared surface -> live filtered results.
      SOV: vendored Phosphor duotone glyph only (lib/phosphor). Reuses the monogram tile's gloss
      language. AA: --navy #2B2D5E on the lightest stops = ~11:1+ (worst stop verified >= 4.5). ── */
.gg-cat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 4px 2px 8px;
}
@media (min-width: 600px) { .gg-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .gg-cat-grid { grid-template-columns: repeat(4, 1fr); } }
.gg-cat-card {
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  min-height: 96px; padding: 14px; text-align: left;                 /* tap target >= 44px */
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(160deg, #ffffff 0%, #F7F3E8 100%);
  box-shadow: 0 1px 2px rgba(20,23,31,.06), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.gg-cat-card:hover  { border-color: var(--navy); box-shadow: 0 4px 12px rgba(20,23,31,.12); }
.gg-cat-card:active { transform: translateY(1px); }
/* diagonal gloss stripe (mirrors .shelf-art-mono::after) — sits BELOW the z-indexed content */
.gg-cat-card::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -45%; left: -35%; width: 55%; height: 190%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(22deg);
}
@media (prefers-reduced-motion: reduce) { .gg-cat-card { transition: none; } }
.gg-cat-ico { position: relative; z-index: 1; font-size: 30px; line-height: 1; color: var(--navy); }
.gg-cat-lbl { position: relative; z-index: 1; margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--navy); }
/* per-hue wash so the bar reads colourful without going dark (light stops only) */
.gg-cat-h0 { background: linear-gradient(160deg, #ffffff 0%, #eef1fb 100%); }
.gg-cat-h1 { background: linear-gradient(160deg, #ffffff 0%, #fdf3e0 100%); }
.gg-cat-h2 { background: linear-gradient(160deg, #ffffff 0%, #e9f4ee 100%); }
.gg-cat-h3 { background: linear-gradient(160deg, #ffffff 0%, #fdeef0 100%); }
.gg-cat-h4 { background: linear-gradient(160deg, #ffffff 0%, #eef4f8 100%); }

/* Focus-visible ring on our interactives (WCAG 2.4.7) */
.gg-surface a:focus-visible, .gg-surface button:focus-visible,
.gg-surface input:focus-visible, .gg-surface select:focus-visible,
.gg-detail-surface a:focus-visible, .gg-detail-surface button:focus-visible,
.gg-detail-surface textarea:focus-visible {
  outline: 3px solid var(--focus, #122c4f); outline-offset: 2px; border-radius: 6px;
}

/* ── ART near-zero-text audit (2026-08-23): badges/glyphs that replace prose ── */
.gg-spinner {
  display: inline-block; width: 18px; height: 18px; vertical-align: middle;
  border: 2px solid var(--line, #dcd8c6); border-top-color: var(--navy, #1f3a5f);
  border-radius: 50%; animation: gg-spin 0.8s linear infinite;
}
@keyframes gg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gg-spinner { animation-duration: 2s; } }

.gg-offline-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #f3ead0; border: 1px solid #c9b784; color: #5a3f00;
  font-size: 14px; position: relative;
}
.gg-offline-badge::after {   /* the "slash" -> cloud-slash = offline */
  content: ""; position: absolute; left: 3px; right: 3px; top: 50%;
  height: 2px; background: #5a3f00; transform: rotate(-45deg);
}

.gg-empty-line { color: var(--muted, #63676f); font-size: 15px; padding: 18px 2px; }
.gg-empty-ico { font-size: 20px; margin-right: 6px; }

/* v1.0: the Join surface trust badges (.gg-trust / .gg-trust-badge) are removed. */

/* ── MIDDLE depth: card-view (operator 2026-08-27) — compact per-record blocks, each a
      wordless scorecard tile-grid. Navy Luxe LIGHT (ink on pearl, no reverse type). ── */
.gg-cv-surface {
  --ink: #14171f; --pearl: #fbf9e4; --navy: #122c4f; --card: #ffffff; --line: #e6e2c8;
  --surface: #fbf9e4; --muted: #5b5f52; --focus: var(--navy);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: 8px 14px 16px;
}
.gg-cv-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gg-cv-count { font-size: 13px; font-weight: 600; color: var(--muted); }
.gg-cv-list { margin: 8px 0 4px; }

/* a whole card = the tap target (mirror list->detail; individual tiles are not controls) */
.gg-cv-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px 8px; margin: 0 0 12px;
  box-shadow: 0 1px 2px rgba(18,44,79,.05);
}
.gg-cv-card:hover { border-color: #c9c3a2; }
.gg-cv-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gg-cv-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; }
.gg-cv-name { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.gg-cv-city { font-size: 12.5px; color: var(--muted); }

/* Compact wordless scorecard INSIDE a card — reuse GGTiles' markup, shrink it right down so
   the full ~55-tile grid reads as a dense glance-able hero. Glow ring (FILLED) / gray
   empty preserved (state is never colour-only; FILLED/EMPTY only). */
.gg-cv-tiles .gg-set { margin: 0 0 5px; padding: 5px 5px 6px; border-radius: 8px; }
.gg-cv-tiles .gg-set-tiles { gap: 5px; }
.gg-cv-tiles .gg-tile {
  width: 30px; min-height: 30px; padding: 0; border-radius: 8px; gap: 0;
}
.gg-cv-tiles .gg-tile-glyph { font-size: 15px; }

.gg-cv-more { display: flex; justify-content: center; padding: 6px 0 10px; min-height: 30px; }
.gg-cv-morebtn {
  min-height: 44px; padding: 0 22px; font-size: 15px; font-weight: 600;
  color: var(--navy); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.gg-cv-morebtn:hover { border-color: #c9c3a2; }
.gg-cv-surface button:focus-visible, .gg-cv-card:focus-visible {
  outline: 3px solid var(--focus, #122c4f); outline-offset: 2px; border-radius: 8px;
}

/* ── STATIC placeholder sticker system (operator 2026-08-27) — uniform every record, no backend.
      Reuses the tile-state language: present = green glow (FILLED); empty = grayed square-with-X.
      [ART-TODO] finalize sticker SHAPE (badge / business-card rounded-rect; NOT a circle). ── */
/* card-view compact row (1 present + 6 empty) */
.gg-stk-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }
.gg-stk {
  width: 30px; min-height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid #e6e2c8; background: #ffffff;
}
.gg-stk i { font-size: 16px; line-height: 1; }
.gg-stk--present { border-color: #a9790a; color: #7a5a06; box-shadow: 0 0 0 2px rgba(169,121,10,.34); }
.gg-stk--empty { background: #fbf9e4; color: #9a9d90; }
.gg-stk--empty i { opacity: .55; }

/* detail "Stickers" section */
.gg-stk-section { margin: 14px 0 4px; }
.gg-stk-h { font-size: 14px; color: #2B2D5E; margin: 0 2px 8px; font-weight: 700; }
.gg-stk-detail { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
/* the PRESENT sticker — business-card rounded-rect BADGE (NOT a circle). [ART-TODO] shape. */
.gg-stk-card {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 14px;
  background: #ffffff; border: 1px solid #D4A84B;
  box-shadow: 0 2px 8px rgba(43,45,94,.10); max-width: 320px;
}
.gg-stk-qr { width: 104px; height: 104px; flex: none; background: #fff; }
.gg-stk-qr svg { display: block; }
.gg-stk-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gg-stk-name { font-size: 15px; font-weight: 700; color: #14171f; line-height: 1.2; }
.gg-stk-city { font-size: 12.5px; color: #5b5f52; }
.gg-stk-tag {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  font-size: 12px; font-weight: 600; color: #7a5a06;
}
.gg-stk-tag i { font-size: 14px; }
/* the 6 blank sticker slots (grayed square-with-X = "could-have-value", static placeholder) */
.gg-stk-blanks { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; max-width: 160px; }
.gg-stk-blank {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px dashed #d8d3b8; background: #fbf9e4; color: #9a9d90;
}
.gg-stk-blank i { font-size: 18px; opacity: .5; }
.gg-stk-teaser { font-size: 12.5px; color: #5b5f52; margin: 10px 2px 0; line-height: 1.4; }

/* ── STICKER AREA row 2 = "Events" (operator 2026-08-27) — BRIGHT calendar-date COVER tiles,
      COLOR-DISTINCT from the Business row. Full-but-UNUSED (inert): they render strong but go
      nowhere (no QR, nothing tied, no backend). Bright teal cover vs the neutral Business row.
      [ART-TODO] finalize cover shape/date treatment. ── */
.gg-stk-area { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; }
/* Events row — SAME has-data tile model as the scorecard (.gg-tile / .gg-tile--glow): light
   card + subtle border + soft ring + a normal calendar glyph. Distinct teal hue at the SAME
   weight as the green/gold glow so it reads consistent, not bold. Compact = 30px (matches
   .gg-cv-tiles .gg-tile); detail = 96x78 (matches base .gg-tile). (operator 2026-08-27) */
.gg-cal-row { display: flex; flex-wrap: wrap; gap: 5px; }
.gg-cal {
  position: relative; width: 30px; min-height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid #7fb9c4; background: var(--card);
  box-shadow: 0 0 0 2px rgba(26,138,159,.20);
}
.gg-cal-glyph { font-size: 15px; line-height: 1; color: var(--navy); display: inline-flex; }
/* detail: larger tiles, matching the base scorecard tile size */
.gg-stk-block { margin: 0 0 6px; }
.gg-cal-grid { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.gg-cal--lg { width: 96px; min-height: 78px; border-radius: 12px; }
.gg-cal--lg .gg-cal-glyph { font-size: 24px; }

/* ══════════════════════════════════════════════════════════════════════════════
   ART · A/B SPLIT TREATMENT — 2026-09-05 (operator LOCKED direction)
   Replaces the stripped "holistic dimensional uplift" append (which over-fancied
   EVERYTHING, incl. the data rows + whole page). Two jobs, two treatments:
     (A) OUR TILES = ours, may look fancy  → scorecard tiles, the 5 SET panels,
         category chips, the filled submit CTA. Real depth, gloss, character.
     (B) DATA ROWS = nice, not boring, not fancy → search RESULT rows stay the
         calm directory place-card (base .jny-shelf pass, lines ~186-224) + only a
         native drill-in chevron and a subtle press. NO accent stripe, NO heavy lift.
   Light-surface default (FOUNDATIONAL #1). Indigo+Honey vars reused. Own CSS, no
   CDN/runtime dep (SOV). L0 lock in styles.css untouched (appearance only).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── (A) OUR TILES — the 5 scorecard SET panels: grounded dimensional panels with a
      top highlight, soft depth, and a honey heading tick. Pale grounds keep ink AA. ── */
.gg-set {
  border-radius: 14px; padding: 11px 12px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px -12px rgba(18,44,79,.28);
}
.gg-set-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; margin: 0 2px 9px;
  padding-bottom: 7px; border-bottom: 1px solid rgba(43,45,94,.10);
}
.gg-set-h::before {
  content: ""; width: 4px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, #D4A84B, #9A7830); flex: none;
}
/* Keep a SOLID distinct light background-color (color-coding stays queryable + a UA fallback)
   and layer the gradient as background-IMAGE so the shorthand doesn't null the colour. */
.gg-set--web       { background-color: #eef2f8; background-image: linear-gradient(180deg, #f3f6fb 0%, #e7eef7 100%); border-color: #d3ddec; }
.gg-set--listings  { background-color: #eef0e8; background-image: linear-gradient(180deg, #f4f5ee 0%, #e9ebdd 100%); border-color: #dcdcc8; }
.gg-set--community { background-color: #e8f1ee; background-image: linear-gradient(180deg, #eef5f2 0%, #e2efe9 100%); border-color: #cfe0d9; }
.gg-set--giver     { background-color: #f6edd2; background-image: linear-gradient(180deg, #fbf4de 0%, #f4e9c8 100%); border-color: #e0cf9c; }
.gg-set--gmway     { background-color: #f2ead6; background-image: linear-gradient(180deg, #f7f0dd 0%, #efe2bd 100%); border-color: #ddc98f; }

/* ── (A) OUR TILES — scorecard chips: soft-skeuomorphic raised badges (was flat white
      squares). Slightly characterful radius; top highlight + gentle drop. Base --glow /
      --empty colour rules (green/honey ring, gray recede) still win; here = depth only. ── */
.gg-tile {
  border-radius: 14px 14px 13px 13px;
  background: linear-gradient(180deg, #ffffff 0%, #F7F3E8 100%);
  border-color: #E4D7B4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px -2px rgba(18,44,79,.16);
  transition: transform .12s ease, box-shadow .12s ease;
}
.gg-tile-glyph { filter: drop-shadow(0 1px 1px rgba(18,44,79,.12)); }
.gg-tile--glow {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),
              0 0 0 2px rgba(46,125,67,.28), 0 5px 12px -4px rgba(46,125,67,.30);
}
.gg-set--giver .gg-tile--glow, .gg-set--gmway .gg-tile--glow {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),
              0 0 0 2px rgba(169,121,10,.34), 0 5px 12px -4px rgba(169,121,10,.34);
}
.gg-tile--empty {
  background: linear-gradient(180deg, #F3F0E6, #ECE8DA);
  box-shadow: inset 0 1px 2px rgba(18,44,79,.05); transform: none;
}

/* ── (A) OUR TILES — category chips (the selectors we own): dimensional soft pills;
      checked = glossy indigo. 44px tap target held from the base rule above. ── */
.gg-chip span {
  background: linear-gradient(180deg, #ffffff, #F4EFE1);
  border-color: #E4D7B4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(18,44,79,.06);
  transition: box-shadow .14s ease, transform .14s ease;
}
.gg-chip input:checked + span {
  background: linear-gradient(180deg, #3a3d78, #25264f);
  border-color: #22234a; color: var(--pearl);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 3px 8px -3px rgba(37,38,79,.55);
}

/* ── (A) OUR CTA — glossy dimensional filled button (dark fill allowed: FOUNDATIONAL #1). ── */
.gg-submit {
  position: relative; overflow: hidden; border-radius: 14px;
  background: linear-gradient(180deg, #3a3d78 0%, #2B2D5E 55%, #23244f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
              0 10px 22px -8px rgba(37,38,79,.6), 0 2px 4px rgba(18,44,79,.25);
  transition: transform .12s ease, box-shadow .12s ease;
}
.gg-submit::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0));
  pointer-events: none;
}
.gg-submit:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 10px -5px rgba(37,38,79,.55); }

/* ── (B) DATA ROWS — the base .jny-shelf place-card pass (subtle depth, name/place
      hierarchy, monogram avatar, honey badges, hover) STAYS as-is. Add ONLY a native
      drill-in chevron + a gentle press so a row reads as a tappable directory card,
      not a flat text box. NO accent stripe, NO big lift — that's the tiles' job. ── */
.jny-shelf[data-layout="list"] .shelf-item { position: relative; padding-right: 30px; }
.jny-shelf[data-layout="list"] .shelf-item::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); /* 4.15:1 on white — >=3:1 non-text AA */
  transform: rotate(-45deg); pointer-events: none;
}
.jny-shelf[data-layout="list"] .shelf-open:active { transform: translateY(1px); }

/* ── Motion respect ── */
@media (prefers-reduced-motion: reduce) {
  .gg-submit, .gg-chip span, .gg-tile,
  .jny-shelf[data-layout="list"] .shelf-open { transition: none; }
}