/*
 * Recipes Page Styles  Rosewood Ridge Site
 * Layout: VORP Crafting UI port (sidebar + view-state-machine)
 */

@import url('variables.css');

/* 
   CRAFTING PALETTE
 */
:root {
  --craft-bg:              #0e0b08;
  --craft-card:            #1e1b14;
  --craft-card-hover:      #252118;
  --craft-input-bg:        rgba(255,255,255,0.06);
  --craft-border-dim:      rgba(180,150,100,0.10);
  --craft-border-soft:     rgba(180,150,100,0.18);
  --craft-border-acc:      rgba(200,168,112,0.35);
  --craft-text:            #e8dcc4;
  --craft-text-sec:        rgba(200,175,135,0.68);
  --craft-text-dim:        rgba(180,155,120,0.60);
  --craft-accent:          #c8a870;
  --craft-accent-glow:     rgba(200,168,112,0.14);
  --craft-accent-bright:   #e0c090;
  --sidebar-w:             320px;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px;
  --ease: all 0.22s cubic-bezier(0.4,0,0.2,1);
  --cat1:#ffe5b4; --cat1-bg:rgba(59,48,29,0.52);
  --cat2:#b4e1ff; --cat2-bg:rgba(26,46,58,0.48);
  --cat3:#e0b4ff; --cat3-bg:rgba(46,26,58,0.44);
  --cat4:#ffb4b4; --cat4-bg:rgba(58,26,26,0.48);
  --cat5:#ffd6b4; --cat5-bg:rgba(58,42,26,0.42);
  --cat6:#b4ffd6; --cat6-bg:rgba(26,58,42,0.52);
  --cat7:#b4fff7; --cat7-bg:rgba(26,58,54,0.48);
  --cat8:#e6e6e6; --cat8-bg:rgba(42,42,42,0.48);
  --cat9:#f7e6b4; --cat9-bg:rgba(58,54,26,0.44);
  --cat10:#e6b4f7; --cat10-bg:rgba(42,26,58,0.44);
  --cat11:#f7b4e6; --cat11-bg:rgba(58,26,42,0.48);
  --cat12:#b4f7e6; --cat12-bg:rgba(26,58,54,0.38);
}

/* PAGE WRAPPER */
.recipes-page-container {
  max-width: 1440px;
  margin: 1.5rem auto;
  padding: 0 1rem 3rem;
  color: var(--craft-text);
  font-family: 'Roboto', sans-serif;
}

/* TAB NAVIGATION */
.recipes-tabs {
  display: flex;
  border-bottom: 1px solid var(--craft-border-soft);
  margin-bottom: 0;
  overflow-x: auto;
  background: rgba(14,11,8,0.80);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: 0.4rem 0.5rem 0;
  gap: 4px;
}
.recipe-tab-button {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.7rem 1.6rem;
  margin-bottom: -1px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--craft-text-dim);
  transition: var(--ease);
  white-space: nowrap;
  font-family: inherit;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.recipe-tab-button:hover { color: var(--craft-text); background: rgba(200,168,112,0.06); }
.recipe-tab-button.active {
  color: var(--craft-accent-bright);
  border-bottom-color: var(--craft-accent);
  background: rgba(200,168,112,0.08);
}
.tab-content { display: none; }
.tab-content.active {
  display: block;
  animation: nodeIn 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* CRAFT LAYOUT */
.craft-layout {
  display: flex;
  height: calc(100vh - 210px);
  min-height: 580px;
  border: 1px solid var(--craft-border-soft);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden;
  background: var(--craft-bg);
}

/* SIDEBAR */
.craft-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--craft-border-dim);
  background: rgba(20,17,12,0.92);
  overflow: hidden;
}
.craft-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--craft-border-dim);
  flex-shrink: 0;
}
.craft-brand-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--craft-accent-glow);
  border: 1px solid var(--craft-border-acc);
  border-radius: 8px;
  font-size: 16px;
}
.craft-brand-name {
  font-family: 'Georgia', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--craft-accent);
  letter-spacing: 1px;
}
.craft-brand-tagline {
  font-size: 0.72rem;
  color: var(--craft-text-dim);
  letter-spacing: 0.5px;
}
.craft-sidebar-search {
  padding: 10px 14px;
  flex-shrink: 0;
}
.craft-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 14px;
  background: var(--craft-input-bg);
  border: 1px solid var(--craft-border-soft);
  border-radius: 30px;
  color: var(--craft-text);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: var(--ease);
}
.craft-search::placeholder { color: var(--craft-text-dim); }
.craft-search:focus { border-color: var(--craft-border-acc); box-shadow: 0 0 16px var(--craft-accent-glow); }

.craft-categories {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.craft-categories::-webkit-scrollbar { width: 4px; }
.craft-categories::-webkit-scrollbar-thumb { background: var(--craft-border-soft); border-radius: 2px; }

.craft-cat-chip {
  --node-color: var(--craft-accent);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--craft-text-sec);
  transition: var(--ease);
  border: 1px solid transparent;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
}
.craft-cat-chip:hover { background: rgba(255,255,255,0.04); color: var(--craft-text); }
.craft-cat-chip.active {
  background: color-mix(in srgb, transparent 72%, var(--node-color) 28%);
  border-color: color-mix(in srgb, transparent 55%, var(--node-color) 45%);
  color: var(--node-color);
}
.craft-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.craft-cat-count {
  margin-left: auto;
  font-size: 0.75rem;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 1px 7px;
  color: var(--craft-text-dim);
}
.craft-cat-chip.active .craft-cat-count {
  background: color-mix(in srgb, transparent 60%, var(--node-color) 40%);
  color: var(--node-color);
}

.craft-sidebar-footer {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--craft-border-dim);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.craft-sidebar-footer-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--craft-text-dim);
  margin-bottom: 2px;
}
.craft-ing-search {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 12px;
  background: var(--craft-input-bg);
  border: 1px solid var(--craft-border-soft);
  border-radius: 30px;
  color: var(--craft-text);
  font-size: 0.83rem;
  font-family: inherit;
  outline: none;
  transition: var(--ease);
}
.craft-ing-search::placeholder { color: var(--craft-text-dim); }
.craft-ing-search:focus { border-color: var(--craft-border-acc); box-shadow: 0 0 12px var(--craft-accent-glow); }

#ingredient-suggestions {
  background: #1a1610;
  border: 1px solid var(--craft-border-acc);
  border-radius: var(--r-sm);
  max-height: 150px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  display: none;
}
#ingredient-suggestions .suggestion-item {
  padding: 0.5rem 0.9rem;
  color: var(--craft-text-sec);
  font-size: 0.83rem;
  cursor: pointer;
  transition: var(--ease);
}
#ingredient-suggestions .suggestion-item:hover { background: var(--craft-accent-glow); color: var(--craft-accent-bright); }

#selected-ingredients {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 80px;
  overflow-y: auto;
}
.ingredient-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  background: rgba(200,168,112,0.10);
  border: 1px solid var(--craft-border-acc);
  border-radius: 20px;
  font-size: 0.78rem;
  color: var(--craft-accent);
}
.remove-ingredient {
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.6;
  transition: var(--ease);
}
.remove-ingredient:hover { opacity: 1; }

/* MAIN AREA */
.craft-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--craft-bg);
}
.craft-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px 11px;
  border-bottom: 1px solid var(--craft-border-dim);
  flex-shrink: 0;
}
#grid-title {
  font-family: 'Georgia', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--craft-accent);
  letter-spacing: 0.5px;
  text-transform: capitalize;
}
#grid-count {
  font-size: 0.8rem;
  color: var(--craft-text-dim);
}
.craft-view {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.craft-view::-webkit-scrollbar { width: 6px; }
.craft-view::-webkit-scrollbar-thumb { background: var(--craft-border-soft); border-radius: 3px; }

/* RECIPE GRID */
.craft-recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* RECIPE NODE CARD */
.recipe-node {
  --node-color: var(--craft-accent);
  --node-bg:    var(--craft-accent-glow);
  border-radius: var(--r-md);
  border: 1px solid var(--craft-border-dim);
  background: var(--craft-card);
  cursor: pointer;
  transition: var(--ease);
  position: relative;
  overflow: hidden;
  animation: nodeIn 0.3s cubic-bezier(0.4,0,0.2,1) backwards;
  animation-delay: calc(var(--i,0) * 0.03s);
}
.recipe-node::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--node-color) 40%, transparent);
  opacity: 0.55;
  transition: var(--ease);
}
.recipe-node:hover {
  border-color: var(--node-color);
  background: color-mix(in srgb, var(--craft-card) 82%, var(--node-color) 18%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.30);
}
.recipe-node:hover::before { opacity: 1; }

.recipe-node-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recipe-node-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.recipe-node-img-wrap {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--craft-border-dim);
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.recipe-node-img { width: 40px; height: 40px; object-fit: contain; }
.recipe-node-info { flex: 1; min-width: 0; }
.recipe-node-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--craft-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recipe-node-cat {
  font-size: 0.72rem;
  color: var(--node-color);
  text-transform: capitalize;
  margin-top: 2px;
}
.recipe-node-ings {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.recipe-node-ing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--craft-border-dim);
  border-radius: 20px;
  font-size: 0.78rem;
  color: var(--craft-text-sec);
  white-space: nowrap;
}
.recipe-node-ing-img { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; }
.recipe-node-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--craft-border-dim);
}
.recipe-node-yields { font-size: 0.78rem; color: var(--craft-text-dim); }
.recipe-node-chain-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.73rem;
  color: var(--node-color);
  opacity: 0.7;
}
.recipe-node-chain-hint svg { width: 12px; height: 12px; flex-shrink: 0; }

.craft-empty {
  text-align: center;
  color: var(--craft-text-dim);
  padding: 4rem 2rem;
  font-size: 1rem;
  display: none;
}

/* DETAIL VIEW */
.craft-detail-view { animation: nodeIn 0.25s cubic-bezier(0.4,0,0.2,1); }

.craft-detail-hero {
  background: linear-gradient(180deg, rgba(26,22,14,0.9) 0%, rgba(14,11,8,0.6) 100%);
  border: 1px solid var(--craft-border-soft);
  border-radius: var(--r-lg);
  padding: 20px 24px 24px;
  margin-bottom: 20px;
}
.detail-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--craft-border-soft);
  border-radius: 30px;
  color: var(--craft-text-sec);
  font-size: 0.82rem;
  font-family: inherit;
  padding: 5px 14px 5px 10px;
  cursor: pointer;
  transition: var(--ease);
  margin-bottom: 18px;
}
.detail-back-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.detail-back-btn:hover { border-color: var(--craft-border-acc); color: var(--craft-accent); background: var(--craft-accent-glow); }

.detail-hero-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.detail-hero-img-wrap {
  position: relative;
  width: 100px; height: 100px;
  flex-shrink: 0;
}
.detail-hero-glow {
  --hero-glow: rgba(200,168,112,0.14);
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle, var(--hero-glow) 0%, transparent 70%);
  animation: heroGlow 3s ease-in-out infinite alternate;
  pointer-events: none;
}
.detail-hero-img {
  width: 100px; height: 100px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.detail-hero-info { flex: 1; min-width: 0; }
.detail-hero-title {
  font-family: 'Georgia', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--craft-text);
  margin-bottom: 8px;
  line-height: 1.2;
}
.detail-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.detail-cat-badge {
  display: inline-block;
  padding: 3px 12px;
  border: 1px solid;
  border-radius: 20px;
  font-size: 0.8rem;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}
.detail-yields-badge {
  display: inline-block;
  padding: 3px 12px;
  background: rgba(200,168,112,0.08);
  border: 1px solid var(--craft-border-acc);
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--craft-text-sec);
}
.detail-hero-desc {
  font-size: 0.85rem;
  color: var(--craft-text-sec);
  line-height: 1.55;
  max-width: 580px;
  opacity: 0.85;
}

/* CHAIN SECTION */
.craft-chain-section { animation: nodeIn 0.3s cubic-bezier(0.4,0,0.2,1); }
.chain-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.chain-section-title {
  font-family: 'Georgia', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--craft-accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  white-space: nowrap;
}
.chain-section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--craft-border-acc) 0%, transparent 100%);
}

/* CHAIN NODE */
.cn-wrapper { animation: cnFadeIn 0.3s cubic-bezier(0.4,0,0.2,1) backwards; }
.cn-recipe-bar {
  --node-color: var(--craft-accent);
  --node-border: rgba(200,168,112,0.35);
  --node-bg-color: var(--craft-accent-glow);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--node-bg-color);
  border: 1px solid var(--node-border);
  border-radius: var(--r-md);
}
.cn-recipe-img-wrap {
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.cn-recipe-img { width: 44px; height: 44px; object-fit: contain; }
.cn-recipe-info { flex: 1; }
.cn-recipe-name { font-weight: 700; font-size: 0.97rem; color: var(--craft-text); margin-bottom: 3px; }
.cn-recipe-cat { font-size: 0.77rem; color: var(--node-color); text-transform: capitalize; }

.cn-flow {
  --node-color: var(--craft-accent);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
}
.cn-flow-track {
  width: 2px; height: 28px;
  background: linear-gradient(180deg, var(--node-color) 0%, transparent 100%);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.cn-flow-particle {
  position: absolute;
  width: 4px; height: 8px;
  border-radius: 2px;
  top: -8px; left: -1px;
  animation: cnParticleUp 1.4s linear infinite;
}
.cn-flow-label { font-size: 0.75rem; color: var(--craft-text-dim); text-transform: uppercase; letter-spacing: 1px; }

.cn-ingredients { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px 0 12px; }
.cn-ing-wrap { position: relative; display: flex; flex-direction: column; align-items: flex-start; }

.cn-ing-card {
  --node-color: var(--craft-accent);
  --node-bg-color: var(--craft-accent-glow);
  min-width: 120px;
  width: fit-content;
  background: color-mix(in srgb, var(--craft-card) 75%, var(--node-bg-color) 25%);
  border: 1px solid color-mix(in srgb, var(--craft-border-dim) 60%, var(--node-color) 40%);
  border-radius: var(--r-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: var(--ease);
  position: relative;
  overflow: visible;
}
.cn-ing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--node-color);
  opacity: 0.45;
  transition: var(--ease);
}
.cn-ing-craftable { cursor: pointer; }
.cn-ing-craftable:hover { border-color: var(--node-color); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.cn-ing-craftable:hover::before { opacity: 1; }

.cn-ing-img-wrap {
  position: relative;
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.cn-ing-img { width: 40px; height: 40px; object-fit: contain; }
.cn-ing-count-badge {
  position: absolute;
  bottom: -5px; right: -8px;
  background: #1e1b14;
  border: 1px solid var(--node-color);
  color: var(--node-color);
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 6px;
  white-space: nowrap;
  pointer-events: none;
}
.cn-ing-label {
  font-size: 0.75rem;
  color: var(--craft-text);
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
  font-weight: 600;
}
.cn-raw-badge {
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: var(--craft-text-dim);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  white-space: nowrap;
}
.cn-src-badge { background: rgba(200,168,112,0.08); color: var(--craft-accent); border-color: var(--craft-border-acc); }

.cn-ing-actions { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.cn-expand-btn, .cn-view-btn {
  width: 100%;
  padding: 4px 0;
  font-size: 0.72rem;
  font-family: inherit;
  border-radius: 6px;
  border: 1px solid;
  cursor: pointer;
  transition: var(--ease);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cn-expand-btn {
  background: color-mix(in srgb, transparent 80%, var(--node-bg-color) 20%);
  border-color: color-mix(in srgb, transparent 55%, var(--node-color) 45%);
  color: var(--node-color);
}
.cn-expand-btn:hover { background: color-mix(in srgb, transparent 60%, var(--node-bg-color) 40%); }
.cn-view-btn { background: rgba(200,168,112,0.06); border-color: var(--craft-border-acc); color: var(--craft-accent); }
.cn-view-btn:hover { background: var(--craft-accent-glow); }
.cn-depth-note { font-size: 0.68rem; color: var(--craft-text-dim); text-align: center; padding: 2px 0; font-style: italic; }

.cn-sub-chain { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--craft-border-soft); width: max-content; max-width: calc(100vw - 120px); }
.cn-sub-connector { width: 2px; height: 10px; background: var(--craft-border-soft); margin-left: -1px; }
.cn-no-chain { font-size: 0.85rem; color: var(--craft-text-dim); padding: 12px 18px; font-style: italic; }

/* USED IN */
.used-in-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.used-in-card {
  --node-color: var(--craft-accent);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--craft-card);
  border: 1px solid var(--craft-border-dim);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--ease);
}
.used-in-card:hover { border-color: var(--node-color); background: color-mix(in srgb, var(--craft-card) 82%, var(--node-color) 18%); transform: translateX(3px); }
.used-in-img { width: 40px; height: 40px; object-fit: contain; background: rgba(255,255,255,0.04); border-radius: var(--r-sm); padding: 3px; flex-shrink: 0; }
.used-in-info { flex: 1; min-width: 0; }
.used-in-name { font-weight: 700; font-size: 0.88rem; color: var(--craft-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.used-in-cat { font-size: 0.73rem; color: var(--node-color); text-transform: capitalize; margin-top: 2px; }
.used-in-arrow { width: 16px; height: 16px; flex-shrink: 0; color: var(--craft-text-dim); transition: var(--ease); }
.used-in-card:hover .used-in-arrow { color: var(--node-color); }

/* ANIMATIONS */
@keyframes nodeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroGlow {
  from { opacity: 0.6; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.08); }
}
@keyframes cnFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cnParticleUp {
  from { top: 100%; opacity: 1; }
  to   { top: -10px; opacity: 0; }
}

/* SUGGESTION DROPDOWNS */
#calc-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #1a1610;
  border: 1px solid var(--craft-border-acc);
  border-radius: var(--r-sm);
  max-height: 200px;
  overflow-y: auto;
  z-index: 80;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  display: none;
}
.suggestion-item { padding: 0.55rem 1rem; color: var(--craft-text-sec); font-size: 0.88rem; cursor: pointer; transition: var(--ease); }
.suggestion-item:hover { background: var(--craft-accent-glow); color: var(--craft-accent-bright); }

/* CALCULATOR TAB */
#calculator-tab { padding: 1.5rem; }
.calc-panel {
  max-width: 560px;
  margin: 0 auto;
  background: var(--craft-card);
  border: 1px solid var(--craft-border-soft);
  border-radius: var(--r-lg);
  padding: 24px 28px;
}
.calc-panel h2 { font-family: 'Georgia', serif; font-size: 1.2rem; color: var(--craft-accent); margin: 0 0 18px; letter-spacing: 1px; }
.calc-row { display: flex; gap: 10px; align-items: center; position: relative; flex-wrap: wrap; }
.calc-autocomplete-wrap { flex: 1; position: relative; min-width: 200px; }
.calc-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  background: var(--craft-input-bg);
  border: 1px solid var(--craft-border-soft);
  border-radius: var(--r-sm);
  color: var(--craft-text);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: var(--ease);
}
.calc-input::placeholder { color: var(--craft-text-dim); }
.calc-input:focus { border-color: var(--craft-border-acc); box-shadow: 0 0 14px var(--craft-accent-glow); }
.calc-qty-input {
  width: 70px;
  padding: 9px 10px;
  background: var(--craft-input-bg);
  border: 1px solid var(--craft-border-soft);
  border-radius: var(--r-sm);
  color: var(--craft-text);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  text-align: center;
  transition: var(--ease);
  -moz-appearance: textfield;
}
.calc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.calc-qty-input:focus { border-color: var(--craft-border-acc); }
.calc-submit {
  padding: 9px 20px;
  background: var(--craft-accent-glow);
  border: 1px solid var(--craft-border-acc);
  border-radius: var(--r-sm);
  color: var(--craft-accent);
  font-weight: 700;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  transition: var(--ease);
  letter-spacing: 0.5px;
}
.calc-submit:hover { background: rgba(200,168,112,0.22); color: var(--craft-accent-bright); }
#calc-result-wrapper { margin-top: 20px; }

/* Calculator card shares recipe-node classes; also needs .recipe-card base */
.recipe-card {
  --node-color: var(--craft-accent);
  --node-bg:    var(--craft-accent-glow);
  border-radius: var(--r-md);
  border: 1px solid var(--craft-border-dim);
  background: var(--craft-card);
  position: relative;
  overflow: hidden;
  animation: nodeIn 0.25s cubic-bezier(0.4,0,0.2,1);
}
.recipe-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--node-color) 40%, transparent);
  opacity: 0.6;
}
.recipe-node-ings-label, .recipe-node-reward-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--craft-text-dim);
  margin-bottom: 5px;
}
.recipe-node-reward-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  background: var(--craft-accent-glow);
  border: 1px solid var(--craft-border-acc);
  border-radius: 20px;
  font-size: 0.82rem;
  color: var(--craft-accent);
}
.recipe-node-reward-pill img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; }
.recipe-ing-source {
  font-size: 0.68rem;
  padding: 1px 6px;
  background: rgba(200,168,112,0.08);
  border: 1px solid var(--craft-border-acc);
  border-radius: 10px;
  color: var(--craft-accent);
  margin-left: 4px;
}

/* RESPONSIVE */
@media (max-width: 860px) {
  .craft-layout { flex-direction: column; height: auto; min-height: unset; }
  .craft-sidebar { width: 100%; max-height: 260px; }
  .craft-categories { flex-direction: row; flex-wrap: wrap; overflow-y: hidden; overflow-x: auto; padding: 6px 10px; }
  .craft-cat-chip { white-space: nowrap; }
  .cn-ingredients { gap: 8px; }
  .cn-ing-card { min-width: 100px; width: fit-content; }
  .detail-hero-inner { flex-direction: column; }
  .detail-hero-img-wrap { margin: 0 auto; }
}
/* === ADDITIONAL ALIASES & CALC TAB LAYOUT === */
.craft-brand-text { font-family: 'Georgia', serif; font-size: 1.05rem; font-weight: 700; color: var(--craft-accent); letter-spacing: 1px; }
.craft-search-wrap { padding: 10px 14px; flex-shrink: 0; }
.craft-cat-section-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.1px; color: var(--craft-text-dim); padding: 4px 4px 2px; }
.calculator-controls-container { max-width: 560px; margin: 0 auto 20px; background: var(--craft-card); border: 1px solid var(--craft-border-soft); border-radius: var(--r-lg); padding: 24px 28px; }
.calculator-controls-container h2 { font-family: 'Georgia', serif; font-size: 1.2rem; color: var(--craft-accent); margin: 0 0 18px; letter-spacing: 1px; }
.control-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; position: relative; }
.control-group label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--craft-text-dim); }
.control-group input[type="text"], .control-group input[type="number"] { padding: 9px 14px; background: var(--craft-input-bg); border: 1px solid var(--craft-border-soft); border-radius: var(--r-sm); color: var(--craft-text); font-size: 0.92rem; font-family: inherit; outline: none; transition: var(--ease); }
.control-group input:focus { border-color: var(--craft-border-acc); box-shadow: 0 0 14px var(--craft-accent-glow); }
.control-group input::placeholder { color: var(--craft-text-dim); }
.calculate-button { padding: 10px 24px; background: var(--craft-accent-glow); border: 1px solid var(--craft-border-acc); border-radius: var(--r-sm); color: var(--craft-accent); font-weight: 700; font-size: 0.9rem; font-family: inherit; cursor: pointer; transition: var(--ease); letter-spacing: 0.5px; width: 100%; }
.calculate-button:hover { background: rgba(200,168,112,0.22); color: var(--craft-accent-bright); }
.calculator-result-wrapper { max-width: 560px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════
   INGREDIENT HOVER TOOLTIP
═══════════════════════════════════════════════════════════════ */
.ing-hover-tooltip {
  position: absolute;
  z-index: 9999;
  width: 240px;
  background: var(--craft-card);
  border: 1px solid var(--craft-border-acc);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(200,168,112,0.06);
  pointer-events: auto;
  display: none;
  transition: opacity 0.15s ease;
  font-size: 0.82rem;
  color: var(--craft-text);
}
.ing-tip-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.ing-tip-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--craft-accent-glow);
  flex-shrink: 0;
}
.ing-tip-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--craft-accent);
  line-height: 1.2;
}
.ing-tip-source {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 8px;
  background: rgba(200,168,112,0.08);
  border: 1px solid rgba(200,168,112,0.25);
  border-radius: 10px;
  color: var(--craft-accent);
  margin-bottom: 8px;
}
.ing-tip-used-hdr {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--craft-text-dim);
  margin-bottom: 6px;
}
.ing-tip-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ing-tip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(200,168,112,0.05);
  font-size: 0.82rem;
}
.ing-tip-recipe-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}
.ing-tip-more {
  font-size: 0.75rem;
  color: var(--craft-text-dim);
  padding: 2px 6px;
  font-style: italic;
}
.ing-tip-hint {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--craft-accent);
  border-top: 1px solid var(--craft-border-soft);
  padding-top: 6px;
  text-align: center;
  opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════
   RAW INGREDIENT CLICKABLE STATE (chain nodes)
═══════════════════════════════════════════════════════════════ */
.cn-ing-card.cn-ing-raw-clickable {
  cursor: pointer;
}
.cn-ing-card.cn-ing-raw-clickable:hover {
  border-color: var(--craft-accent) !important;
  background: color-mix(in srgb, var(--node-bg-color) 75%, rgba(200,168,112,0.18) 25%) !important;
  transform: translateY(-2px);
}
.cn-ing-card.cn-ing-raw-clickable:hover .cn-ing-label {
  color: var(--craft-accent);
}
.cn-ing-card.cn-ing-raw-clickable:hover .cn-raw-badge {
  background: rgba(200,168,112,0.18);
  border-color: rgba(200,168,112,0.5);
}