/* Recipe browser (docs/recipes.md + javascripts/recipes.js).
 * Slots and tooltips imitate the in-game GUI so they read the same in both colour schemes. */

#recipe-browser {
  --rb-slot: 36px;
  --rb-slot-big: 52px;
  --rb-line: var(--line, var(--md-default-fg-color--lighter));
  --rb-card: var(--md-default-bg-color--light);
  --rb-dim: var(--md-default-fg-color--light);
  margin-top: 1rem;
  font-size: .8rem;
}

#recipe-browser .rb-bar {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

#recipe-browser .rb-search {
  width: 100%;
  max-width: 36rem;
  box-sizing: border-box;
  padding: .6rem .8rem;
  font: inherit;
  font-size: .85rem;
  color: var(--md-default-fg-color);
  background: var(--rb-card);
  border: 1px solid var(--rb-line);
  border-radius: 8px;
}

#recipe-browser .rb-search:focus {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 1px;
}

#recipe-browser .rb-meta,
#recipe-browser .rb-note,
#recipe-browser .rb-status {
  margin: 0;
  color: var(--rb-dim);
}

#recipe-browser .rb-status { padding: 1.5rem 0; }
#recipe-browser .rb-error { color: var(--oxblood, #b5481d); }
#recipe-browser .rb-note { margin: .25rem 0 .75rem; }

#recipe-browser .rb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .9rem 0 1rem;
}

#recipe-browser .rb-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  font: inherit;
  font-weight: 600;
  color: var(--md-default-fg-color);
  background: var(--rb-card);
  border: 1px solid var(--rb-line);
  border-radius: 999px;
  cursor: pointer;
}

#recipe-browser .rb-chip:hover { border-color: var(--md-accent-fg-color); }

#recipe-browser .rb-chip.rb-on {
  color: var(--gilt-ink, #14160f);
  background: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

#recipe-browser .rb-count {
  font-size: .7rem;
  font-weight: 700;
  opacity: .7;
}

#recipe-browser .rb-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: .75rem;
}

#recipe-browser .rb-h {
  margin: 1.2rem 0 .6rem;
  font-size: .9rem;
}

#recipe-browser .rb-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .75rem;
  background: var(--rb-card);
  border: 1px solid var(--rb-line);
  border-radius: 10px;
}

#recipe-browser .rb-craft {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 8px;
  align-self: flex-start;
  background: #c6c6c6;
  border: 2px solid;
  border-color: #fff #555 #555 #fff;
  border-radius: 4px;
}

#recipe-browser .rb-grid {
  display: grid;
  grid-template-columns: repeat(3, var(--rb-slot));
  gap: 0;
}

#recipe-browser .rb-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rb-slot);
  height: var(--rb-slot);
  padding: 0;
  background: #8b8b8b;
  border: 2px solid;
  border-color: #373737 #fff #fff #373737;
  border-radius: 0;
  cursor: pointer;
}

#recipe-browser .rb-slot:not(.rb-empty):not(.rb-static):hover { background: #a7a7a7; }
#recipe-browser .rb-slot:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 1px; z-index: 1; }
#recipe-browser .rb-empty, #recipe-browser .rb-static { cursor: default; }

#recipe-browser .rb-big {
  width: var(--rb-slot-big);
  height: var(--rb-slot-big);
}

#recipe-browser .rb-slot img {
  width: 32px;
  height: 32px;
  pointer-events: none;
}

#recipe-browser .rb-big img {
  width: 44px;
  height: 44px;
}

#recipe-browser .rb-noicon {
  font-weight: 800;
  color: #373737;
}

#recipe-browser .rb-n {
  position: absolute;
  right: 1px;
  bottom: -1px;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
  pointer-events: none;
}

#recipe-browser .rb-arrow {
  width: 26px;
  height: 18px;
  background: #8b8b8b;
  clip-path: polygon(0 35%, 55% 35%, 55% 0, 100% 50%, 55% 100%, 55% 65%, 0 65%);
}

#recipe-browser .rb-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
}

#recipe-browser .rb-name,
.rb-tip {
  padding: .15rem .5rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #3f3f3f;
  background: rgba(16, 0, 16, .94);
  border: 2px solid #2d0a6b;
  border-radius: 3px;
}

#recipe-browser .rb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

#recipe-browser .rb-tag {
  padding: .05rem .45rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--rb-dim);
  border: 1px solid var(--rb-line);
  border-radius: 999px;
}

#recipe-browser .rb-tag-alt { border-style: dashed; }

#recipe-browser .rb-more {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}

#recipe-browser .rb-morebtn,
#recipe-browser .rb-close {
  font: inherit;
  font-weight: 700;
  color: var(--md-default-fg-color);
  background: var(--rb-card);
  border: 1px solid var(--rb-line);
  border-radius: 8px;
  cursor: pointer;
}

#recipe-browser .rb-morebtn { padding: .5rem 1.2rem; }
#recipe-browser .rb-morebtn:hover, #recipe-browser .rb-close:hover { border-color: var(--md-accent-fg-color); }

#recipe-browser .rb-focus {
  margin-bottom: .5rem;
  padding: .9rem;
  background: var(--rb-card);
  border: 1px solid var(--md-accent-fg-color);
  border-radius: 10px;
}

#recipe-browser .rb-focus-head {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
}

#recipe-browser .rb-focus-head > div { flex: 1; min-width: 0; }

#recipe-browser .rb-lore {
  margin-top: .4rem;
  color: var(--rb-dim);
}

#recipe-browser .rb-focus-sub {
  margin-top: .4rem;
  font-weight: 600;
}

#recipe-browser .rb-close {
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
  line-height: 1;
}

#recipe-browser .rb-blocked {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .5rem;
}

#recipe-browser .rb-blocked-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem;
  background: var(--rb-card);
  border: 1px solid var(--rb-line);
  border-radius: 8px;
}

.rb-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  max-width: 20rem;
  padding: .35rem .6rem;
  font-size: .78rem;
  pointer-events: none;
}

.rb-tip[hidden] { display: none; }

.rb-tip-lore {
  font-weight: 500;
  color: #aaa;
}

@media (max-width: 30em) {
  #recipe-browser { --rb-slot: 32px; --rb-slot-big: 46px; }
  #recipe-browser .rb-slot img { width: 28px; height: 28px; }
  #recipe-browser .rb-big img { width: 38px; height: 38px; }
  #recipe-browser .rb-list { grid-template-columns: 1fr; }
}