/* Addons — cards, not rows. Chrome and type come from assets/css/site.css.
   Hooks the script relies on: .item[data-repo] (+ .has-update), .new (update badge). */

.lede .gold-new { color: var(--accent) }
code { white-space: nowrap }

/* ---------- install: three numbered steps ---------- */
.steps {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 18px;
  color: #16120a; background: var(--accent);
}
.steps b { color: var(--white); font-size: 15px }
.steps span { color: var(--text-dim); font-size: 13px; line-height: 1.45 }
.steps-hint { margin: 10px 2px 0; color: var(--text-dim-2); font-size: 13px }
.steps-hint b { color: var(--text) }

/* ---------- sections ---------- */
.blk { margin-top: 46px }
.blk-hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px }
.blk-hd h2 {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: 28px; text-transform: none; letter-spacing: .2px; color: var(--heading);
}
.blk-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(192, 148, 58, .45); border-radius: 20px; padding: 2px 10px;
}
.blk-tag.quiet { color: var(--text-dim-2); border-color: var(--border) }
.sechint { margin: 4px 0 0; color: var(--text-dim-2); font-size: 13.5px }
.sechint b { color: var(--text) }

/* ---------- addon cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px }
.item {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.item:hover { border-color: var(--accent); transform: translateY(-2px) }
.a-main { display: flex; flex-direction: column; gap: 10px; padding: 18px; flex: 1 }
.a-top { display: flex; align-items: center; gap: 14px }
.ic {
  flex: none; width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center; font-size: 24px;
  background: radial-gradient(circle at 50% 35%, #2e271c, #17171a 75%);
  border: 1px solid var(--line-warm);
}
.a-id { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.nm { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--heading) }
.badges { display: flex; flex-wrap: wrap; gap: 6px }
.badges:empty { display: none }
.desc { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.5; flex: 1 }
.acts { display: flex; gap: 8px; margin-top: 4px }
.acts a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none; font-size: 13px; font-weight: 700;
  border-radius: var(--radius); height: 36px; padding: 0 14px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
}
.acts a.primary { flex: 1; background: var(--accent); color: #16120a; border-color: var(--accent-hi) }
.acts a:hover { border-color: var(--accent); color: var(--white) }
.acts a.primary:hover { background: var(--accent-hi); color: #16120a }

/* the guild's own addon: full width, with its art */
.item.ours {
  grid-column: 1 / -1;
  flex-direction: row;
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(192, 148, 58, .14), var(--surface) 55%);
  box-shadow: 0 0 0 1px rgba(192, 148, 58, .18), 0 18px 40px -22px rgba(192, 148, 58, .35);
}
.a-art { flex: 0 0 44%; min-height: 220px; position: relative; overflow: hidden }
.a-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s }
.item.ours:hover .a-art img { transform: scale(1.04) }
.a-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(28, 29, 32, .9)) }
.item.ours .a-main { padding: 26px 28px; justify-content: center }
.item.ours .nm { font-size: 32px; color: var(--title) }
.item.ours .ic { display: none }
.item.ours .desc { font-size: 16px; flex: 0 }
.item.ours .acts { max-width: 360px }

/* an update waiting: gold, like the Okanvil card */
.item.has-update { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(192, 148, 58, .25) }

/* labels */
.tag, .new, .pill-hot {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  border-radius: 7px; padding: 2px 7px;
}
.tag { background: #3a2f44; color: #d6b3ff; border: 1px solid #5a4a6a }
.tag.ours { color: #1a1a1a; background: var(--accent); border-color: var(--accent-hi) }
.tag.plain { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border) }
.new { background: #1a3320; color: var(--ok); border: 1px solid #3a5b42 }
.pill-hot { color: #16120a; background: var(--accent) }

/* ---------- WeakAura tiers: the raid banner behind the tier number ---------- */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px }
.tier {
  position: relative; overflow: hidden; min-height: 190px;
  display: flex; align-items: flex-end;
  text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 30%, #262b36, #121316 75%);
  transition: border-color .15s, transform .15s;
}
.tier img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .2s, transform .4s }
.tier::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 14, 15, .95) 15%, rgba(14, 14, 15, .2) 70%) }
.tier:hover { border-color: var(--accent); transform: translateY(-2px) }
.tier:hover img { opacity: .75; transform: scale(1.04) }
.tier.hot { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(192, 148, 58, .3) }
.t-in { position: relative; z-index: 1; padding: 16px; display: flex; flex-direction: column; gap: 2px; width: 100% }
.t-in .pill-hot { align-self: flex-start; margin-bottom: 6px }
.t-in b { font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1; color: var(--title) }
.t-raid { font-size: 13px; color: var(--lede); line-height: 1.35 }
.t-go { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--accent-hi) }

@media (max-width: 820px) {
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .item.ours { flex-direction: column }
  .a-art { flex: none; min-height: 0; aspect-ratio: 16 / 9 }
  .a-art::after { background: linear-gradient(0deg, rgba(28, 29, 32, .9), transparent 50%) }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: minmax(0, 1fr) }
  .cards, .cards.two { grid-template-columns: minmax(0, 1fr) }
  .blk-hd { flex-wrap: wrap }
}

/* ---------- compact: everything on one or two screens ---------- */
.phead { padding-bottom: 20px }
.band ~ .wrap .phead { padding-top: 64px }
.steps li { padding: 10px 14px }
.steps li::before { width: 30px; height: 30px; font-size: 16px }
.steps { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.blk { margin-top: 34px }
.blk-hd h2 { font-size: 24px }
#list.cards { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.cards.two, #listOptional.cards { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.cards { gap: 12px; margin-top: 12px }
.a-main { padding: 14px; gap: 8px }
.a-top { gap: 11px }
.ic { width: 38px; height: 38px; font-size: 19px; border-radius: 10px }
.nm { font-size: 18px }
.desc { font-size: 13px }
.acts a { height: 32px; padding: 0 11px; font-size: 12px }
.item.ours .a-art { flex-basis: 30%; min-height: 150px }
.item.ours .a-main { padding: 18px 22px }
.item.ours .nm { font-size: 28px }
.item.ours .desc { font-size: 15px }
.tiers { gap: 12px; margin-top: 12px }
.tier { min-height: 136px }
.t-in { padding: 12px 14px }
.t-in b { font-size: 32px }
.t-go { margin-top: 4px }
/* patch + extras: one line each — icon, name and text left, button right */
.cards.two .item .a-main, #listOptional .item .a-main { flex-direction: row; align-items: center; flex-wrap: wrap }
.cards.two .desc, #listOptional .desc { flex: 1 1 180px }
.cards.two .acts, #listOptional .acts { margin: 0 }
.cards.two .acts a.primary, #listOptional .acts a.primary { flex: none }

@media (max-width: 1000px) {
  #list.cards { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 640px) {
  #list.cards, .cards.two, #listOptional.cards, .steps { grid-template-columns: minmax(0, 1fr) }
  .item.ours .a-art { min-height: 0 }
}
/* numbers in the body face: the display face's old-style figures read as letters ("1" as I, T10 as TIO) */
.steps li::before { font-family: var(--body); font-weight: 800; font-size: 15px }
.t-in b { font-family: var(--body); font-weight: 800; letter-spacing: -.5px }
/* the tier art is made for these cards (dark lower half): show it, darken only under the text */
.tier { min-height: 160px }
.tier img { opacity: .9; object-position: center 35% }
.tier:hover img { opacity: 1 }
.tier::after { background: linear-gradient(0deg, rgba(14, 14, 15, .92) 8%, rgba(14, 14, 15, .35) 45%, transparent 75%) }

/* link out to Okanor's Forge, the site with all of Okanor's addons */
.forge-link {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 12px 16px;
  border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text-dim); text-decoration: none; font-size: 14px;
}
.forge-link b { color: var(--accent-hi); font-weight: 600 }
.forge-link span { flex: 1; min-width: 0 }
.forge-link i { font-style: normal; color: var(--accent-hi) }
.forge-link:hover { border-color: var(--accent) }