/* Shared card design system — homepage, directory, grocery, resources.
   Linked as cards.css?v=N: sw.js serves static assets cache-first, so bump N on every change. */

/* Card surface: white, thin border, 12px radius, one soft shadow everywhere */
.ds-card {
  background: #fff;
  border: 1px solid #DDE9DF;
  border-radius: 0.75rem;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ds-card-interactive:hover {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
  border-color: #c7e3d1;
}

/* Section label inside cards: teal, uppercase, letterspaced, with a small leading icon */
.ds-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #047857;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ds-label i { font-size: 0.625rem; }

/* Icon tile: one treatment for card icons and image fallbacks */
.ds-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: #ECFDF5;
  color: #047857;
  font-size: 1rem;
}
.ds-icon-tile-sq { border-radius: 0.5rem; }

/* Freshness / meta line: gray, sentence case, clock icon, relative time */
.ds-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #6b7280;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Buttons: one primary (solid pill), one secondary (outline pill) */
.ds-btn-primary,
.ds-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 9999px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ds-btn-primary { background: #047857; color: #fff !important; border: 1px solid #047857; }
.ds-btn-primary:hover { background: #065f46; border-color: #065f46; }
.ds-btn-secondary { background: #fff; color: #047857; border: 1px solid #a7f3d0; }
.ds-btn-secondary:hover { background: #ECFDF5; border-color: #6ee7b7; }
.ds-btn-sm { font-size: 0.75rem; padding: 0.5rem 1rem; }

/* Pills — fully rounded; color carries meaning */
.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  border-radius: 9999px;
  border: 1px solid transparent;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.ds-pill > span { overflow: hidden; text-overflow: ellipsis; }
/* allergen "safe for" — mint */
.ds-pill-allergen { background: #ECFDF5; color: #047857; border-color: #d1fae5; }
/* restaurant-claimed (unverified) allergen/dish — amber */
.ds-pill-owner { background: #fffbeb; color: #b45309; border-color: #fde68a; }
/* store — blue-gray */
.ds-pill-store { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
a.ds-pill-store:hover { background: #dbeafe; border-color: #60a5fa; }
/* dish — neutral white, distinct from allergen mint */
.ds-pill-dish { background: #fff; color: #374151; border-color: #d1d5db; }
.ds-pill-dish i { color: #9ca3af; }
/* empty slot placeholder */
.ds-pill-empty { background: #f9fafb; color: #6b7280; border-color: #e5e7eb; }

/* Disclaimer — one component for every page (see CLAUDE.md "Disclaimer component").
   .ds-disclaimer        full-width strip, placed directly under the site nav, above the page hero/tool
   .ds-disclaimer-inline same look, inline inside a form (e.g. above Submit on review.html)
   Markup: <div class="ds-disclaimer" role="note"><p><i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
           <strong>Lead line.</strong> Up to two supporting sentences.
           <a href="disclaimer.html#section">Read the full disclaimer</a></p></div> */
.ds-disclaimer,
.ds-disclaimer-inline {
  background: #fffbeb;
  border: 0 solid #fde68a;
  color: #92400e;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
}
.ds-disclaimer {
  border-bottom-width: 1px;
  padding: 0.5rem 1rem;
  text-align: center;
}
.ds-disclaimer > p { max-width: 64rem; margin: 0 auto; }
.ds-disclaimer-inline {
  border-width: 1px;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.ds-disclaimer i,
.ds-disclaimer-inline i { margin-right: 0.25rem; }
.ds-disclaimer strong,
.ds-disclaimer-inline strong { font-weight: 800; }
.ds-disclaimer a,
.ds-disclaimer-inline a { color: inherit !important; font-weight: 800; text-decoration: underline; white-space: nowrap; margin-left: 0.25rem; }
.ds-disclaimer-inline + .ds-disclaimer-inline { margin-top: 0.5rem; }

/* Header band — wide illustration strip under a page's hero (grocery, directory only).
   Set the crop per page with style="object-position: X Y" on the <img>. */
.ds-header-band {
  background: #efe6d8;
  border-bottom: 1px solid #DDE9DF;
}
.ds-header-band img {
  display: block;
  width: 100%;
  height: clamp(170px, 24vw, 320px);
  object-fit: cover;
}

/* Nutri-Score badge (grocery cards). Sits on the corner of the product image tile, absolutely
   positioned so cards without a score keep identical layout. Deliberately smaller and quieter
   than the allergen pills — it is a nutrition grade, not an allergy signal.
   Official colors; the letter is always shown (never color alone). */
.ds-nutri {
  position: absolute; right: -5px; bottom: -5px; z-index: 2;
  width: 16px; height: 16px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9px; font-weight: 900; line-height: 1;
  border: 1.5px solid #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
  cursor: help; padding: 0;
}
.ds-nutri-a { background: #038141; }
.ds-nutri-b { background: #85BB2F; }
.ds-nutri-c { background: #FECB02; text-shadow: 0 0 2px rgba(0, 0, 0, 0.45); }
.ds-nutri-d { background: #EE8100; }
.ds-nutri-e { background: #E63E11; }
.ds-nutri-tip {
  /* overlay only — never in flow, never changes card height */
  display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 30;
  width: max-content; max-width: 220px; padding: 6px 8px; border-radius: 6px;
  background: #1f2937; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.35; text-align: left;
}
.ds-nutri-wrap:hover .ds-nutri-tip,
.ds-nutri-wrap.is-open .ds-nutri-tip,
.ds-nutri:focus-visible + .ds-nutri-tip { display: block; }

/* Grocery product image zone — fixed square on the card's left; fallback icon sits underneath and
   shows when there is no image or it fails to load. Nutri-Score badge hangs off its corner. */
.ds-product-img {
  position: relative; flex-shrink: 0;
  width: 100px; height: 100px;
  border-radius: 0.75rem; border: 1px solid #E3EBE5; background: #f7faf8;
  display: flex; align-items: center; justify-content: center;
}
.ds-product-img > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 6px; border-radius: 0.75rem; background: #fff;
}
.ds-product-img-fallback { color: #a7d7bf; font-size: 1.75rem; }