/*
  Suggested cards on the Hall of Legends, by Legendary UI.
  Lifted from Docs/Legendary/ui/designer/suggested-card.css. Loads after
  legendary-ratings.css and hangs entirely off .hl-card.is-suggested, so the Hall tab
  is untouched.
*/
/* ============================================================================
   Hall of Legends - Suggested tab additions
   ----------------------------------------------------------------------------
   A separate file on purpose: the Hall of Legends is an existing live page with
   its own stylesheet, and Legendary Web can only add files there. Load this
   after plugins/legendary-ratings.css. It adds nothing to .hl-card itself, so
   the Rated tab is untouched.

   Everything here hangs off .hl-card.is-suggested, which keeps the card's own
   geometry: the 290px grid column, 0.8rem 0.9rem 0.75rem padding, 14px radius,
   0.55rem gap, the 54px sigil and the Cinzel 1.02rem title all come from the
   live rules and are not restated.

   Tokens used are the site's own: --line, --muted, --text, --rk-accent-bright,
   --st-ok, --st-warn, --st-bad, --st-info. No new colour is introduced.

   One deliberate avoidance: the Suggested status tag is --st-info blue, not
   teal. The Hall's C tier is --hl-c #4fd1c5, so a teal pill on a Hall card
   would read as a tier badge.
   ========================================================================== */

/* The status tag goes in the existing .hl-card-sub meta line, in the slot the
   tier badge occupies on a rated card, not in the .hl-card-badges corner. A
   text pill in that corner sits on top of the Cinzel title: at 290px a name
   like "Wrath of the Scientist" wraps to two lines and runs straight under it.
   The corner stays for the crown badge it was built for. */
.hl-card.is-suggested .hl-card-sub { align-items: center; }

.hl-status {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.hl-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

.hl-status.is-suggested { color: var(--st-info); border-color: rgba(116, 217, 255, 0.32); background: rgba(116, 217, 255, 0.1); }
.hl-status.is-review    { color: var(--st-warn); border-color: rgba(255, 179, 71, 0.32); background: rgba(255, 179, 71, 0.1); }
.hl-status.is-approved  { color: var(--st-ok);   border-color: rgba(95, 227, 154, 0.32); background: rgba(95, 227, 154, 0.1); }
.hl-status.is-declined  { color: var(--st-bad);  border-color: rgba(255, 92, 72, 0.32);  background: rgba(255, 92, 72, 0.1); }

/* "Edited by staff": a gold mark on the meta line, not another pill, so it
   reads as provenance rather than as a second status. */
.hl-edited {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--rk-accent-bright);
  font-size: 0.76rem; font-weight: 600;
}
.hl-edited svg { flex: 0 0 auto; }

/* The declined note: one line, ruled off from the card body, never a
   paragraph. It is the only place on a card where a sentence is allowed, and it
   is staff's sentence rather than interface copy. */
.hl-declined {
  display: flex; align-items: flex-start; gap: 0.4rem;
  margin-top: 0.1rem; padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  color: var(--st-bad);
  font-size: 0.78rem; line-height: 1.45;
}
.hl-declined svg { flex: 0 0 auto; margin-top: 0.12rem; }
.hl-declined b { color: var(--text); font-weight: 600; }

/* A suggestion has no tier yet, so the tier picker is replaced by the author
   and the vote count at the same 36px height, keeping every card in the grid
   the same shape. margin-top auto pins it to the bottom of the flex column the
   way the tier picker is pinned, so cards of different heights still line up. */
.hl-suggested-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  height: 36px;
  margin-top: auto;
}
.hl-suggested-by { font-size: 0.78rem; color: var(--muted); }
.hl-suggested-by b { color: var(--text); font-weight: 600; }
.hl-suggested-votes {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8rem; font-weight: 700; color: var(--text);
}
.hl-suggested-votes svg { color: var(--rk-accent-bright); }

/* A declined card reads as inactive without being unreadable: the art dims,
   the text does not. */
.hl-card.is-suggested.is-declined-card .hl-sigil,
.hl-card.is-suggested.is-declined-card .hl-card-art { opacity: 0.55; }

/* ------------------------------------------ the tab's own furniture, by Web --
   The disclaimer, the sort and type filters, the design CTA and the pager are
   not part of the card, so they are not in Legendary UI's sheet. They borrow
   the Hall's tokens so they sit with the tab rather than standing out. */
#hl-suggested .ld-sug-disclaimer {
  margin: 0 0 0.9rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--rk-accent-line);
  border-radius: 8px;
  background: var(--rk-accent-dim);
  color: var(--text);
  font-size: 0.82rem;
}
#hl-suggested .ld-sug-bar { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; margin-bottom: 1rem; }
#hl-suggested .ld-sug-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
#hl-suggested .ld-sug-chip {
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
#hl-suggested .ld-sug-chip:hover { color: var(--text); border-color: var(--hl-s); }
#hl-suggested .ld-sug-chip.is-on { color: #14161d; background: var(--hl-s); border-color: var(--hl-s); font-weight: 600; }
#hl-suggested .ld-sug-chip[disabled] { opacity: 0.45; cursor: not-allowed; }
#hl-suggested .ld-sug-chip:focus-visible { outline: 2px solid var(--hl-s); outline-offset: 2px; }
#hl-suggested .ld-sug-cta {
  margin-left: auto;
  padding: 0.32rem 0.9rem;
  border-radius: 999px;
  background: var(--hl-s);
  color: #14161d;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}
#hl-suggested .ld-sug-cta:hover { background: var(--hl-s-bright, #fff3c4); }
#hl-suggested .ld-sug-pager { display: flex; gap: 0.6rem; align-items: center; justify-content: center; margin-top: 1rem; font-size: 0.82rem; color: var(--muted); }

/* The invitation in the empty state. It is the only thing to do on an empty
   tab, so it carries the accent rather than sitting in the muted text around
   it, and it underlines on hover like every other link on the site. */
.ld-sug-first { color: var(--ld-accent, #7dd3c0); font-weight: 600; text-decoration: none; }
.ld-sug-first:hover { text-decoration: underline; }
.ld-sug-first:focus-visible { outline: 2px solid var(--ld-accent, #7dd3c0); outline-offset: 2px; }

/* NOT IN UI'S SOURCE. Page side, added for the recipe id beside the resolved name: the Hall
   modal read "2x metal.refined" because its item lookup asked window.LDModel, which only the
   designer page has. It loads items-all.json itself now and keeps the shortname here, small and
   muted. If UI takes this upstream, this rule comes out of this file rather than living in two. */
.hl-recipe-id { color: var(--muted); font-size: 0.82em; font-weight: 400; }