/* Bobbi brand: warm cream ground, EB Garamond italic display type, Inter for
   everything else, deep-green pill buttons, warm hairline borders. Light only,
   like joinbobbi.com. */
:root {
  --bg: #fcf9f5;
  --bg-warm: #f9f4f1;
  --surface: #ffffff;
  --ink: #2b2b2b;
  --muted: #6b635d;
  --mauve: #755760;
  --faint: #a39a92;
  --line: #e0d5cc;
  --line-soft: #ece4dc;
  --green: #1b4d30;
  --green-hover: #143a24;
  --green-tint: #e7efe9;
  --banner: #e6edfa;
  --plate: #ffffff;
  --shadow: 0 1px 2px rgb(43 43 43 / 5%), 0 6px 18px rgb(80 60 40 / 7%);
  --shadow-lift: 0 2px 4px rgb(43 43 43 / 7%), 0 14px 32px rgb(80 60 40 / 14%);
  --radius: 16px;
  --tile: 104px;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ease-out-back: overshoots ~1.1, then settles */
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

button {
  font: inherit;
  color: inherit;
}

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a {
  color: var(--green);
}

.sr,
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Bobbi pill buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 26px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-dark {
  background: var(--green);
  border: 1px solid var(--green);
  color: #fff;
}

.btn-dark:hover {
  background: var(--green-hover);
}

.btn-dark:disabled {
  opacity: 0.6;
  cursor: progress;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}

.btn-outline:hover {
  background: var(--surface);
  border-color: var(--faint);
}

/* ------------------------------------------------------------ banner */

.banner {
  padding: 8px 16px;
  background: var(--banner);
  color: var(--green);
  font-size: 13.5px;
  text-align: center;
}

.banner a {
  font-weight: 600;
  text-decoration: none;
}

.banner a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------ header
   Home: centred logo, serif hero line, big search, suggestion pills.
   Search: one compact sticky bar — logo left, search centre. */

.top {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 24px 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.brand-full {
  display: block;
  width: auto;
  height: 50px;
}

.brand-sub {
  padding-left: 12px;
  border-left: 1px solid var(--line);
  color: var(--mauve);
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  white-space: nowrap;
}

.hero {
  margin-top: 48px;
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 64px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.lede {
  margin: 12px 0 0;
  color: var(--mauve);
  font-size: 16px;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(680px, 100%);
  height: 58px;
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgb(27 77 48 / 12%), var(--shadow);
}

.search-icon {
  flex: none;
  margin-left: 20px;
  color: var(--faint);
}

.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.search input::placeholder {
  color: var(--faint);
}

.search input::-webkit-search-cancel-button {
  cursor: pointer;
}

.hint {
  margin-right: 8px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--faint);
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.search:focus-within .hint {
  display: none;
}

.go {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  margin-right: 6px;
  padding: 0 16px 0 22px;
  border: 0;
  border-radius: 100px;
  background: var(--green);
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.go:hover {
  background: var(--green-hover);
}

.go svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.search.busy .go svg {
  animation: nudge 0.8s ease-in-out infinite;
}

@keyframes nudge {
  50% {
    transform: translateX(3px);
  }
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 760px;
}

.chip {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.chip:hover {
  background: var(--surface);
  border-color: var(--faint);
}

.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
}

.progress.on {
  opacity: 1;
}

.progress::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  animation: sweep 1s ease-in-out infinite;
}

@keyframes sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(300%);
  }
}

/* search state: compact sticky bar */
.is-search .top {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 680px) auto;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 24px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.is-search .top::after {
  content: "";
  width: 1px; /* balances the logo so the search sits centred */
}

.is-search .brand-full {
  height: 34px;
}

.is-search .brand-sub {
  font-size: 17px;
}

.is-search .hero,
.is-search .suggestions {
  display: none;
}

.is-search .search {
  height: 48px;
  margin: 0;
}

.is-search .go {
  height: 38px;
  padding: 0 12px;
}

.is-search .go-label {
  display: none;
}

/* ------------------------------------------------------------ main */

main {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px 40px;
}

.is-home main {
  padding-top: 44px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.status {
  color: var(--muted);
  font-size: 13.5px;
}

.is-home .status {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.seg {
  display: flex;
  flex: none;
  margin: 0;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
}

.seg button,
.seg label {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.seg svg {
  width: 16px;
  height: 16px;
}

.seg button[aria-pressed="true"],
.seg label:has(input:checked) {
  background: var(--green);
  color: #fff;
}

.seg label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg label:has(input:focus-visible) {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* Rate-limit notice: soft (results still shown) or stop (search refused). */
.notice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 4px;
  padding: 14px 16px;
  background: var(--bg-warm);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--ink);
  animation: notice-in 0.25s ease-out;
}

.notice[hidden],
.notice-action[hidden] {
  display: none;
}

.notice.stop {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.notice-icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--mauve);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notice-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.notice-title {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
}

.notice-body {
  color: var(--muted);
}

.notice.limit {
  align-items: flex-start;
  padding: 18px 20px;
}

.notice.limit .notice-icon {
  margin-top: 2px;
}

.notice-action {
  flex: none;
  height: 38px;
  padding: 0 18px;
  font-size: 14px;
}

@keyframes notice-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .notice {
    animation: none;
  }
}

@media (max-width: 560px) {
  .notice {
    flex-wrap: wrap;
  }

  .notice-action {
    width: 100%;
  }
}

.empty {
  margin: 48px 0;
  color: var(--muted);
  text-align: center;
}

/* "are you a vendor?" */
.vendor-cta {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 32px));
  margin: 24px auto 0;
  /* Extra room at the bottom, and the card fades out over it, so it
     dissolves into the meadow (which sits in front) instead of ending in a
     hard edge. The fade starts below the buttons. */
  padding: 40px 32px calc(40px + var(--meadow-h) * 0.18);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--meadow-h) * 0.24), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--meadow-h) * 0.24), transparent);
  background: var(--bg-warm);
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  text-align: center;
}

.vendor-cta h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 4.5vw, 42px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
}

.vendor-cta p {
  max-width: 520px;
  margin: 10px auto 0;
  color: var(--mauve);
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

/* the meadow from joinbobbi.com, along the bottom of the page. Its height
   follows the image's own proportions (2752×645), so the flower tips are
   never sliced off on wide screens. It sits in front of the vendor card and
   is pulled up so the tall blades grow over the card's lower edge (the top
   ~30% of the image is open sky, the dense flowers start about halfway). It
   ignores clicks, so the card's buttons still work through it. */
.meadow {
  position: relative;
  z-index: 2;
  height: var(--meadow-h);
  margin-top: calc(var(--meadow-h) * -0.62);
  background: url("./assets/brand/grass-flowers.webp") center bottom / cover no-repeat;
  pointer-events: none;
}

/* Height of the meadow strip (see .meadow); the vendor card's bottom space
   grows with it so the blades always have room to rise over the card. */
:root {
  --meadow-h: max(120px, calc(100vw * 645 / 2752));
}

/* Phones: a fixed meadow whose blades cross the card's lower edge. */
@media (max-width: 640px) {
  :root {
    --meadow-h: 170px;
  }
}

/* ------------------------------------------------------------ logo plate */

.plate {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--plate);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.plate.dark {
  background: #2b2b2b;
  border-color: #2b2b2b;
}

.plate img {
  width: 76%;
  height: 76%;
  object-fit: contain;
}

.mono {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: hsl(var(--h) 38% 93%);
  color: hsl(var(--h) 35% 30%);
  font-family: var(--serif);
  font-size: 30px;
  font-style: italic;
}

/* ------------------------------------------------------------ grid */

.results.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
  gap: 24px 16px;
  margin-top: 18px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
}

.tile .plate {
  width: var(--tile);
  height: var(--tile);
  max-width: 100%;
  box-shadow: var(--shadow);
  transition: transform 0.22s var(--spring), box-shadow 0.22s;
}

.tile:hover .plate,
.tile:focus-visible .plate {
  transform: translateY(-3px) scale(1.06);
  box-shadow: var(--shadow-lift);
}

.tile:focus-visible .plate {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.tile-name {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 100px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tile .badge {
  position: absolute;
  top: -7px;
  right: calc(50% - var(--tile) / 2 - 7px);
  box-shadow: 0 2px 6px rgb(27 77 48 / 25%);
}

.weak {
  opacity: 0.55;
}

.weak .badge {
  background: var(--faint);
}

/* pop: old logos shrink away, new ones spring up with a small overshoot */
.in {
  animation: pop-in 280ms var(--spring) both;
  animation-delay: var(--d, 0ms);
}

.out {
  animation: pop-out 150ms ease-in both;
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pop-out {
  to {
    opacity: 0;
    transform: scale(0.2);
  }
}

.list .in {
  animation-name: rise-in;
  animation-duration: 240ms;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .in,
  .out {
    animation: none;
  }
}

/* ------------------------------------------------------------ list */

.results.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 12px 16px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.row:hover,
.row:focus-visible {
  border-color: var(--line);
  box-shadow: var(--shadow);
  outline: none;
}

.row .plate {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}

.row .mono {
  font-size: 20px;
}

.row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.row-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.row-top strong {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-kind {
  flex: none;
  color: var(--mauve);
  font-size: 12.5px;
}

.row-line {
  overflow: hidden;
  color: var(--muted);
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.row-domain {
  color: var(--faint);
  font-size: 12px;
}

/* ------------------------------------------------------------ hover card */

.hovercard {
  position: fixed;
  left: var(--x);
  top: var(--y);
  z-index: 30;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) scale(0.9);
  transform-origin: var(--caret) 100%;
  transition: opacity 0.12s, transform 0.2s var(--spring);
}

.hovercard.glide {
  transition: opacity 0.12s, transform 0.2s var(--spring), left 0.16s ease-out, top 0.16s ease-out;
}

.hovercard[data-side="bottom"] {
  transform: translate(-50%, 0) scale(0.9);
  transform-origin: var(--caret) 0;
}

.hovercard.show {
  opacity: 1;
  transform: translate(-50%, -100%);
}

.hovercard[data-side="bottom"].show {
  transform: translate(-50%, 0);
}

.hc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.hc-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}

.hc-score {
  color: var(--green);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hc-kind {
  color: var(--mauve);
  font-size: 12px;
}

.hc-line {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.hc-line:empty {
  display: none;
}

.hc-caret {
  position: absolute;
  left: var(--caret);
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}

.hovercard[data-side="bottom"] .hc-caret {
  top: -6px;
  bottom: auto;
  transform: translateX(-50%) rotate(225deg);
}

/* ------------------------------------------------------------ detail */

.detail {
  width: min(660px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 30px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lift);
}

.detail[open] {
  animation: pop-in 260ms var(--spring);
}

.detail::backdrop {
  background: rgb(43 43 43 / 35%);
  backdrop-filter: blur(3px);
}

.close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.close:hover {
  color: var(--ink);
}

.d-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 44px;
}

.d-head > div {
  flex: 1;
  min-width: 0;
}

.plate.big {
  flex: none;
  width: 88px;
  height: 88px;
}

.d-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
}

.d-sub {
  margin-top: 2px;
  color: var(--mauve);
  font-size: 13.5px;
}

.badge.big {
  flex: none;
  padding: 4px 12px;
  font-size: 12px;
}

.site {
  display: inline-flex;
  margin: 18px 0 4px;
  padding: 8px 18px;
  border-radius: 100px;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}

.site:hover {
  background: var(--green-hover);
}

.detail .d-summary {
  margin: 18px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.detail h3 {
  margin: 26px 0 10px;
  font-family: var(--serif);
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
}

.detail p {
  margin: 0;
}

.offerings {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offerings li {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
}

.offerings strong {
  font-weight: 600;
}

.offerings p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
}

.bullets {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--muted);
  font-size: 12.5px;
}

.tag.aud {
  background: var(--green-tint);
  border-color: transparent;
  color: var(--green);
}

.muted {
  color: var(--muted);
}

.report {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.linklike {
  padding: 0;
  border: 0;
  background: none;
  color: var(--green);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.linklike:hover {
  text-decoration: underline;
}

/* inquiry form */
.inquiry {
  width: min(560px, calc(100vw - 32px));
}

.inquiry h2 {
  margin: 0;
  padding: 0 44px 2px 0;
  font-family: var(--serif);
  font-size: 34px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
}

.detail .form-lede,
.detail .sent p {
  margin: 14px 0 0;
  color: var(--mauve);
}

.type-toggle {
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  margin-top: 18px;
  border-radius: 22px;
}

.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
}

.fields em {
  margin-left: 4px;
  color: var(--faint);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.fields .wide {
  grid-column: 1 / -1;
}

.fields .for-add {
  display: none;
}

.is-add .fields .for-add {
  display: flex;
}

.fields input,
.fields textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.fields textarea {
  resize: vertical;
}

.fields input:focus,
.fields textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgb(27 77 48 / 12%);
}

.form-error {
  margin: 14px 0 0;
  color: #b3261e;
  font-size: 14px;
}

.inquiry .submit {
  width: 100%;
  margin-top: 18px;
}

.sent {
  padding: 8px 0 4px;
  text-align: center;
}

.sent .btn {
  margin-top: 20px;
}

.skeleton {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.skeleton span {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--bg-warm), var(--line-soft), var(--bg-warm));
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

.skeleton span:nth-child(2) {
  width: 80%;
}

.skeleton span:nth-child(3) {
  width: 60%;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 760px) {
  :root {
    --tile: 84px;
  }

  .top {
    padding: 20px 16px 4px;
    gap: 14px;
  }

  .brand-full {
    height: 40px;
  }

  .hero {
    margin-top: 20px;
  }

  .search {
    height: 52px;
  }

  .hint,
  .go-label {
    display: none;
  }

  .go {
    padding: 0 12px;
  }

  .is-search .top {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 16px;
  }

  .is-search .top::after {
    display: none;
  }

  .is-search .brand {
    justify-content: center;
  }

  .is-search .brand-full {
    height: 28px;
  }

  main {
    padding: 14px 16px 32px;
  }

  .is-home main {
    padding-top: 28px;
  }

  .is-home .status {
    font-size: 20px;
  }

  .view-toggle span {
    display: none;
  }

  .results.grid {
    gap: 20px 10px;
  }

  .row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .row .plate {
    width: 48px;
    height: 48px;
  }

  .row-side,
  .row-kind {
    display: none;
  }

  .detail {
    width: calc(100vw - 20px);
    max-height: 90vh;
    padding: 22px 18px;
  }

  .d-head {
    flex-wrap: wrap;
    gap: 12px 14px;
    padding-right: 40px;
  }

  .plate.big {
    width: 68px;
    height: 68px;
  }

  .d-head > div {
    flex-basis: calc(100% - 82px);
  }

  .d-head h2 {
    font-size: 24px;
  }

  .badge.big {
    order: 3;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .controls {
    justify-content: space-between;
  }

  .seg button {
    padding: 0 10px;
  }

  .vendor-cta {
    padding: 30px 20px calc(30px + var(--meadow-h) * 0.3);
  }

  .cta-buttons .btn {
    width: 100%;
  }

  .fields {
    grid-template-columns: 1fr;
  }

  .inquiry h2 {
    font-size: 28px;
  }
}

/* Cookie consent (same banner as joinbobbi.com; shown by analytics.js). */
.cookie-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 60;
  width: min(400px, calc(100vw - 32px));
  padding: 20px 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
}

.cookie-banner h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
}

.cookie-banner p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.cookie-banner a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.cookie-banner-actions .btn {
  flex: 1;
  height: 42px;
  font-size: 14px;
}

@media (max-width: 480px) {
  .cookie-banner {
    left: 16px;
    bottom: 16px;
  }
}

/* Sentinel under the grid: when it nears the viewport, the next batch of
   vendors is added (app.js appendBatch). */
.more {
  height: 1px;
}

.more[hidden] {
  display: none;
}

/* Country flags as inline SVG: Windows has no flag emoji (it shows "CA"/"US"). */
.flag,
.seg .flag {
  flex: none;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
}