/* Gyde prototype base — Atlas brand tokens + shared primitives.
 * Open Props loads first; these override / extend with brand values. */

:root {
  /* Atlas brand (web/brand-tokens.json) */
  --teal: #1F5F55; --teal-dark: #163F39; --teal-wash: #D6E5DF;
  --copper: #C57B3C; --copper-dark: #9E5E26; --copper-wash: #F1E2CC;
  --paper: #EAEBE5; --surface: #FFFFFF; --surface-alt: #F4F4EE;
  --ink: #101814; --ink-2: #2A332D; --muted: #6E776F;
  --line: rgba(16,24,20,.10); --line-strong: rgba(16,24,20,.22);
  --ok: #2E8A5C; --warn: #B7791F; --err: #B65A35;
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --shadow-1: 0 1px 2px rgba(16,24,20,.06), 0 2px 8px rgba(16,24,20,.05);
  --shadow-2: 0 8px 30px rgba(16,24,20,.14);

  /* Shoelace token bridge — make the kit speak Atlas */
  --sl-color-primary-600: var(--teal); --sl-color-primary-500: var(--teal);
  --sl-color-primary-700: var(--teal-dark);
  --sl-font-sans: var(--body); --sl-border-radius-medium: var(--r-md);
  --sl-input-height-medium: 44px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
a { color: var(--teal); }
.serif { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; }

/* ---- numbered map pin (rank = chat suggestion order) ---- */
.gyde-pin__body {
  display: grid; place-items: center; width: 30px; height: 30px;
  background: var(--pin, var(--teal)); border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(16,24,20,.35); border: 2px solid #fff;
}
.gyde-pin__num { transform: rotate(45deg); color: #fff; font: 700 14px/1 var(--body); }
.gyde-pin.is-active .gyde-pin__body { outline: 3px solid var(--copper); outline-offset: 1px; }
.gyde-pin.is-active { z-index: 600 !important; }

/* you-are-here dot + ambient ring */
.gyde-you__core { position: absolute; inset: 4px; background: var(--teal); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.gyde-you__ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(31,95,85,.30); animation: gyde-pulse 2.4s ease-out infinite; }
@keyframes gyde-pulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }

/* ---- shared place card ---- */
.card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px 12px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px; box-shadow: var(--shadow-1); cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s;
}
.card:hover, .card.is-active { transform: translateY(-1px); box-shadow: var(--shadow-2); border-color: var(--teal); }
.card__rank { grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; background: var(--c, var(--teal)); }
.card__name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.card__meta { grid-column: 2; color: var(--muted); font-size: 12.5px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card__why { grid-column: 1 / -1; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.card__tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-wash, var(--teal-wash)); color: var(--c-dark, var(--teal-dark)); }
.card__acts { grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.iconbtn { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill); width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; font-size: 15px; color: var(--ink-2); }
.iconbtn:hover { border-color: var(--teal); color: var(--teal); }
.iconbtn.is-on { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ---- image-led place card (richCard) ---- */
.rcard { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; box-shadow: var(--shadow-1); cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.rcard:hover, .rcard.is-active { transform: translateY(-1px); box-shadow: var(--shadow-2); border-color: var(--c, var(--teal)); }
.rcard__media { position: relative; flex: none; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background-size: cover; background-position: center; display: grid; place-items: center; }
.rcard__glyph { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; font-size: 24px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.rcard__rank { position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; border-radius: 50%; color: #fff; font: 700 12px/1 var(--body); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(16,24,20,.4); border: 1.5px solid #fff; }
.rcard__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.rcard__head { display: flex; gap: 8px; align-items: flex-start; }
.rcard__name { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; line-height: 1.2; }
.rcard__acts { flex: none; display: flex; gap: 6px; }
.rcard__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); }
.rcard__tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); }
.rcard__match { color: var(--teal-dark); font-weight: 500; }
.rcard__open { font-weight: 600; }
.rcard__open.is-open { color: var(--ok); }
.rcard__open.is-closed { color: var(--err); }
.rcard__hours { color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcard__preview { font-size: 13px; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcard__hoursline { font-size: 12px; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iconbtn.sm { width: 30px; height: 30px; font-size: 13px; }

/* chip / quick-choice */
.chip { font: 500 13px var(--body); padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: all .12s; }
.chip:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.chip.is-on { background: var(--teal); color: #fff; border-color: var(--teal); }

/* focus floor */
:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }