/* ==========================================================================
   Gourmet Salt Guide — salt color identity + tablet/mobile refinements
   Loads after tool-theme.css. Structure and layout are unchanged; this file
   only deepens color and tightens the small-screen presentation.
   ========================================================================== */

:root {
  /* Slot accents, deepened from the original near-white tints. */
  --best:          #2f855a;
  --best-soft:     #d8efe1;
  --best-dark:     #1c5238;
  --everyday:      #2b7fc4;
  --everyday-soft: #d8ebf9;
  --everyday-dark: #14547f;
  --chef:          #b58234;
  --chef-soft:     #f6e6c8;
  --chef-dark:     #6d4a10;
  --mav:           #e0623a;
  --mav-soft:      #fbdfd3;
  --mav-dark:      #8f3211;

  --salt-accent: #7f93a3;
  --salt-ink:    #40525f;
}

/* --------------------------------------------------------------------------
   1. Recommendation slots — Best / Everyday / Chef Pick / The Mavrick
   -------------------------------------------------------------------------- */

.recommendation,
.drawer-recommendation {
  background: linear-gradient(140deg, #fff 34%, var(--slot-soft, #fff)) !important;
  border-color: var(--slot-line, var(--line)) !important;
}

.recommendation::before,
.drawer-recommendation::before {
  width: 7px !important;
  background: var(--slot, var(--brand-2)) !important;
}

.slot-best     { --slot: var(--best);     --slot-soft: var(--best-soft);     --slot-ink: var(--best-dark);     --slot-line: rgba(47,133,90,.42); }
.slot-everyday { --slot: var(--everyday); --slot-soft: var(--everyday-soft); --slot-ink: var(--everyday-dark); --slot-line: rgba(43,127,196,.42); }
.slot-chefPick { --slot: var(--chef);     --slot-soft: var(--chef-soft);     --slot-ink: var(--chef-dark);     --slot-line: rgba(181,130,52,.48); }
.slot-swTwist  { --slot: var(--mav);      --slot-soft: var(--mav-soft);      --slot-ink: var(--mav-dark);      --slot-line: rgba(224,98,58,.45); }

/* Slot label reads as a filled tag rather than grey caps. */
.recommendation .slot-label,
.drawer-recommendation .slot-label {
  display: inline-flex !important;
  align-items: center;
  gap: .3rem;
  padding: .17rem .44rem;
  border-radius: 2px;
  background: var(--slot, var(--brand-2));
  color: #fff !important;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .09em;
  margin-bottom: .42rem !important;
}

.recommendation.is-selected {
  border-color: var(--slot, var(--brand-2)) !important;
  box-shadow: inset 0 0 0 1px var(--slot, var(--brand-2)), 0 6px 16px rgba(68, 49, 35, .12) !important;
}

/* --------------------------------------------------------------------------
   2. Per-salt identity — a signature color for each of the 33 salts
   -------------------------------------------------------------------------- */

.recommendation__salt,
.drawer-recommendation h4,
.salt-card h3,
.winner h3,
.alt h4 {
  color: var(--salt-ink) !important;
}

/* Swatch dot carrying the salt's own color. Laid out as a flex marker so the
   dot holds the left edge and the name wraps cleanly beside it rather than
   getting orphaned on its own line. */
.recommendation__salt::before,
.drawer-recommendation h4::before,
.salt-card h3::before,
.winner h3::before,
.alt h4::before {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  margin-right: .32em;
  border-radius: 50%;
  background: var(--salt-accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 2px var(--salt-accent);
}

/* Product names are long and the slots are narrow. `anywhere` was splitting
   words mid-syllable (Espress/o, Alderw/ood); `break-word` only breaks a word
   that genuinely cannot fit on a line of its own. */
.recommendation__salt,
.drawer-recommendation h4,
.salt-card h3,
.food-card h3,
.winner h3,
.alt h4,
.drawer-title {
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto;
}

.recommendation__salt:hover {
  color: var(--salt-ink) !important;
  text-decoration-color: var(--salt-accent);
  text-decoration-thickness: 2px;
}

/* Directory card takes the salt color as a top rail. */
.salt-card {
  border-top: 4px solid var(--salt-accent) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--salt-accent) 9%, #fff) 0%, #fff 62%) !important;
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .salt-card { background: #fff !important; }
}

/* --------------------------------------------------------------------------
   Recommendation grid: two-up rather than four-up
   Four slots across a half-width food card left each one about 99px wide --
   too narrow for names like "Salish(R) Alderwood Smoked Sea Salt", which is
   why they were being force-broken mid-word. Two columns gives each slot
   roughly 215px so names wrap at spaces instead.
   Revert by deleting this block; nothing else depends on it.
   -------------------------------------------------------------------------- */
@media (min-width: 641px) {
  .recommendations { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}


/* --------------------------------------------------------------------------
   3. "Why this salt works" panel follows the selected slot
   -------------------------------------------------------------------------- */

.food-card:has(.recommendation.slot-best.is-selected)     .why-panel { --panel: var(--best);     --panel-soft: var(--best-soft); }
.food-card:has(.recommendation.slot-everyday.is-selected) .why-panel { --panel: var(--everyday); --panel-soft: var(--everyday-soft); }
.food-card:has(.recommendation.slot-chefPick.is-selected) .why-panel { --panel: var(--chef);     --panel-soft: var(--chef-soft); }
.food-card:has(.recommendation.slot-swTwist.is-selected)  .why-panel { --panel: var(--mav);      --panel-soft: var(--mav-soft); }

.why-panel {
  border-left: 4px solid var(--panel, var(--brand-2)) !important;
  background: linear-gradient(120deg, #fff, var(--panel-soft, #f5fbfd)) !important;
}

/* --------------------------------------------------------------------------
   4. Category and method chips — more color separation when idle
   -------------------------------------------------------------------------- */

.category-chip.is-active,
.method-filter-chip.is-active {
  box-shadow: 0 4px 12px rgba(68, 49, 35, .18);
}

/* --------------------------------------------------------------------------
   5. Cooking tool result cards
   -------------------------------------------------------------------------- */

.winner {
  border: 2px solid var(--salt-accent) !important;
  background: linear-gradient(140deg, #fff 40%, color-mix(in srgb, var(--salt-accent) 16%, #fff)) !important;
}

.winner .label {
  display: inline-block;
  padding: .2rem .5rem;
  background: var(--best);
  color: #fff !important;
  border-radius: 2px;
}

/* Alternates are sorted by score, so card position does not map to a fixed
   slot. Colour them by salt identity and let the slot name speak for itself. */
.alt {
  border-top: 5px solid var(--salt-accent) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--salt-accent) 10%, #fff) 0%, #fff 58%) !important;
}

.alt .slot {
  display: inline-block;
  padding: .16rem .44rem;
  border-radius: 2px;
  background: var(--salt-ink);
  color: #fff !important;
  font-size: .68rem;
  letter-spacing: .08em;
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .alt { background: #fff !important; }
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .winner { background: #fff !important; }
}

/* ==========================================================================
   6. Tablet — 641px to 1024px
   ========================================================================== */

@media (min-width: 641px) and (max-width: 1024px) {
  .app-shell { grid-template-columns: 1fr !important; }
  .filters-panel { position: static !important; }

  /* Filters go horizontal so they don't eat a full screen height. */
  .filters-panel .filter-block + .filter-block {
    margin-top: .8rem;
    padding-top: .8rem;
  }

  .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .recommendations { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .salt-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .drawer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .detail-drawer { width: min(560px, 92vw) !important; }
  .category-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category-chip { justify-content: center; text-align: center; }

  /* Cooking tool */
  .options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .alt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .result-hero { grid-template-columns: 1fr !important; }
}

/* Narrow tablets / large phones in landscape */
@media (min-width: 641px) and (max-width: 820px) {
  .results-grid { grid-template-columns: 1fr !important; }
  .recommendations { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ==========================================================================
   7. Phone — up to 640px
   ========================================================================== */

@media (max-width: 640px) {
  /* Recommendations scroll horizontally; make that legible and obvious. */
  .recommendations {
    gap: .5rem !important;
    scroll-padding-left: .1rem;
    scrollbar-width: none;
  }
  .recommendations::-webkit-scrollbar { display: none; }
  .recommendation {
    flex: 0 0 min(72vw, 240px) !important;
    padding: .8rem .8rem .82rem .95rem !important;
  }

  .food-card { padding: .85rem !important; gap: .7rem !important; }
  .food-card h3 { font-size: 1.22rem !important; }

  /* Full-width drawer on a phone. */
  .detail-drawer { width: 100vw !important; padding: 1rem .9rem calc(1rem + env(safe-area-inset-bottom)) !important; }
  .drawer-title { font-size: 1.75rem !important; }
  .drawer-section { padding: .85rem !important; }

  .modal {
    width: calc(100vw - 1.2rem) !important;
    max-width: none !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }

  /* Tap targets */
  .recommendation__select { min-height: 44px; }
  .category-chip, .method-filter-chip, .filter-chip { min-height: 2.5rem; }

  .back-to-top { bottom: calc(1rem + env(safe-area-inset-bottom)) !important; }
  .toast { bottom: calc(1rem + env(safe-area-inset-bottom)) !important; width: calc(100vw - 2rem); text-align: center; }

  /* Cooking tool */
  .alt-grid { grid-template-columns: 1fr !important; }
  .result-hero { grid-template-columns: 1fr !important; }
  .winner h3 { font-size: 1.5rem !important; }
}

/* Prevent iOS zoom-on-focus: inputs must be at least 16px. */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .recommendations { scroll-behavior: auto; }
}

/* ==========================================================================
   8. Embedded mode — overlays anchored to the reader's viewport
   The tool is iframed at its full content height, so the iframe's own
   viewport is the entire document and position:fixed would place a drawer
   thousands of pixels off screen. The parent reports the visible slice as
   --gsg-vp-top / --gsg-vp-h and overlays anchor to that instead.
   Only applies when embedded; opened directly these pages stay as they were.
   ========================================================================== */

.gsg-embedded {
  --gsg-vp-top: 0px;
  --gsg-vp-h: 100vh;
}

.gsg-embedded .drawer-backdrop,
.gsg-embedded .modal-backdrop {
  position: absolute !important;
  top: var(--gsg-vp-top) !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--gsg-vp-h) !important;
}

.gsg-embedded .detail-drawer {
  position: absolute !important;
  top: var(--gsg-vp-top) !important;
  bottom: auto !important;
  height: var(--gsg-vp-h) !important;
  max-height: var(--gsg-vp-h) !important;
}

.gsg-embedded .modal {
  position: absolute !important;
  top: calc(var(--gsg-vp-top) + (var(--gsg-vp-h) / 2)) !important;
  bottom: auto !important;
  max-height: calc(var(--gsg-vp-h) - 2rem) !important;
}

.gsg-embedded .back-to-top { display: none !important; }

.gsg-embedded .toast {
  position: absolute !important;
  top: calc(var(--gsg-vp-top) + var(--gsg-vp-h) - 4.25rem) !important;
  bottom: auto !important;
}

/* Sticky filter rail measured against the iframe, which is now full height,
   so it would never actually stick. Static is honest. */
.gsg-embedded .filters-panel { position: static !important; }

/* ==========================================================================
   9. Overflow containment
   Grid items default to min-width:auto, so the no-wrap method-chip row
   (a horizontal scroller) was forcing the filters column to its max-content
   width — about 1090px — and pushing the whole tool sideways on a phone.
   ========================================================================== */

.app-shell > *,
.filters-panel,
.results-panel,
.salt-directory,
.food-card,
.filter-block,
.field,
.method-filter-chips {
  min-width: 0;
}

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: minmax(0, 1fr) !important; }
}

/* The drawer parks off-canvas via translateX; absolutely positioned it would
   otherwise widen the document. Clip (not hidden) keeps sticky working. */
.gsg-embedded body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  .gsg-embedded body { overflow-x: hidden; }
}

.category-grid, .method-filter-chips, .chips, .summary { max-width: 100%; }
.food-card h3, .salt-card h3, .drawer-title, .winner h3 { overflow-wrap: break-word; }