/* V7 backdrop contract: body.reforged > .page-backdrop[aria-hidden="true"].
   This layer belongs to the document and ends after the opening 2400px. */
body.reforged { position: relative; isolation: isolate; }
body.reforged > .page-backdrop {
  --priest-height: clamp(1560px, 115vw, 1900px);
  position: absolute;
  z-index: 0;
  inset: 0 0 auto 220px;
  height: 2400px;
  max-height: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background-image:
    linear-gradient(90deg, #11100ff5 0%, #11100fd6 17%, #11100f70 39%, #11100f08 70%),
    linear-gradient(180deg, #11100f14 0%, #11100f00 650px, #11100f26 1150px, #11100f8f 1750px, #11100f 2250px),
    var(--priest-hero);
  background-position: center top, center top, right -150px top -45px;
  background-size: 100% 100%, 100% 100%, auto var(--priest-height);
  background-repeat: no-repeat;
  opacity: .96;
}
body.reforged #main,
body.reforged > footer,
body.reforged .site-footer { position: relative; z-index: 1; }
body.reforged .hero-armory .hero-art { display: none; }
body.reforged .hero-armory .hero-copy { width: 62%; max-width: 780px; }
body.reforged .hero-armory h1 {
  font-size: clamp(54px, 5.15vw, 86px);
  line-height: 1.06;
  letter-spacing: -.035em;
  white-space: normal;
  text-shadow: 0 2px 20px #000b;
}
body.reforged .hero-armory h1 > span {
  display: block;
  margin-top: 9px;
  color: inherit;
  font-size: clamp(30px, 2.65vw, 45px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
}
body.reforged .hero-armory .hero-intro { color: #d0c1a5; text-shadow: 0 1px 10px #000; }
body.reforged .site-footer { display: flex; gap: 20px; align-items: center; }

/* One translucent panel per section; its nested surfaces do not conceal the art. */
body.reforged :is(.armory-panel,.gear-armory) {
  background: rgb(26 23 20 / .86);
  border-color: #806540;
  box-shadow: inset 0 1px #d4b77a1c, 0 4px 18px #0003;
}
body.reforged :is(.calc-toolbar,.gear-levels) {
  background: rgb(8 7 6 / .15);
  border-color: #75634870;
  box-shadow: inset 0 1px 4px #0003;
}
body.reforged .stage-brief details { background: rgb(8 7 6 / .16); }
body.reforged .stage-brief details[open] > summary { background: rgb(67 52 29 / .16); }
body.reforged .talent-tree,
body.reforged .talent-tree[data-school='Enhancement'],
body.reforged .talent-tree[data-school='Restoration'] {
  background: transparent;
  border-color: #a1804e75;
  box-shadow: inset 0 0 0 1px #06060680;
}
body.reforged .tree-heading {
  background: rgb(43 34 21 / .18);
  border-bottom-color: #a2804b70;
  box-shadow: inset 0 1px #c7a16020;
}
body.reforged .tree-canvas {
  position: relative;
  background: none;
  box-shadow: inset 0 0 20px #0002;
}
body.reforged .tree-canvas::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: var(--tree-bg);
  background-size: cover;
  background-position: center;
  opacity: .12;
  pointer-events: none;
}
body.reforged .tree-links path { stroke: #b29a6b; }
body.reforged .tree-links path.learned { stroke: #e2bf6c; }
body.reforged #gear-items.gear-slot-table { background: transparent; border-color: #8b6d4473; }
body.reforged #gear-items .gear-slot-row { background: transparent; border-color: #81684755; }
body.reforged #gear-items .gear-slot-row:nth-child(even) { background: rgb(5 4 3 / .05); }
body.reforged #gear-items .slot-heading { background: rgb(5 4 3 / .08); border-color: #8b6c425c; }
body.reforged #gear-items .gear-choice:hover,
body.reforged #gear-items .gear-choice:focus-visible { background: rgb(70 53 30 / .36); }
body.reforged #gear-items .gear-choice[aria-pressed='true'],
body.reforged #gear-items .gear-choice[aria-expanded='true'] { background: rgb(70 53 30 / .45); }
body.reforged #gear-items :is(.choice-name,.choice-stats) { text-shadow: 0 1px 2px #000; }
body.reforged #gear-items .slot-notice { flex: 0 0 100%; margin: 0 0 10px; color: #e2c58e; font-size: 13px; line-height: 1.7; }
body.reforged #gear-items .profession-tag { border-color: #9a7c4f; background: #312719; color: #eed39e; }
body.reforged .respec-calculator { background: rgb(25 21 15 / .88); }

/* Point editing keeps the original square talent art and the V6 WoW buttons. */
body.reforged .talent-editor-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 13px;
  min-width: 0;
  padding: 13px 0 15px;
  margin: 0 0 15px;
  border-top: 1px solid #9b7d494f;
  border-bottom: 1px solid #9b7d494f;
  color: #d8c49c;
  font-size: 12px;
  line-height: 1.5;
}
body.reforged .talent-build-status {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  flex: 0 0 86px;
  color: #cbd8b4;
  font-weight: 600;
}
body.reforged .talent-build-status[data-custom='true'] { color: #ffd987; }
body.reforged .talent-remaining { flex: 0 0 143px; margin-right: auto; color: #c8bfa9; font-variant-numeric: tabular-nums; }
body.reforged :is(#main-talent-editor-toolbar,#respec-talent-editor-toolbar) button {
  min-height: 34px;
  padding: 3px 9px;
  font-size: 11px;
  white-space: nowrap;
}
body.reforged .talent-editor-caption {
  flex: 1 0 100%;
  color: #b5a98f;
  font-size: 11px;
  line-height: 1.6;
}
body.reforged .talent-editor-feedback {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
body.reforged .talent-editor-feedback:empty { display: none; }

/* Leave room below every row, including the seventh: +/- never covers a talent. */
body.reforged .talent-board[data-editor-id] .tree-canvas {
  grid-template-rows: repeat(7, 56px);
  row-gap: 38px;
  height: 686px;
  min-height: 686px;
  padding-top: 16px;
  padding-bottom: 50px;
}
body.reforged .tree-canvas .talent-adjustment {
  grid-row: var(--row);
  grid-column: var(--col);
  align-self: center;
  justify-self: center;
  position: relative;
  z-index: 8;
  display: block;
  width: 74px;
  height: 28px;
  margin: 0;
  padding: 0;
  transform: translateY(49px);
  pointer-events: none;
}
body.reforged .talent-adjustment-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 74px;
  height: 28px;
}
body.reforged :is(#talent-board,#respec-board) .talent-adjustment button {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border-left-width: 9px;
  border-right-width: 9px;
  border-image-width: 6px 9px;
  color: #ffe2a0;
  font-size: 17px;
  font-weight: 600;
  line-height: 16px;
  pointer-events: auto;
}
body.reforged :is(#talent-board,#respec-board) .talent-adjustment button:disabled { color: #8f8878; }
body.reforged :is(#talent-board,#respec-board) .talent-adjustment button:focus-visible { outline: 2px solid #b8ddff; outline-offset: 2px; }
body.reforged .talent-selected-tooltip {
  position: relative;
  z-index: 3;
  min-width: 0;
  margin: 0 10px 13px;
  padding: 13px 12px;
  border: 5px solid transparent;
  border-image: url('assets/ui/wowhead-tooltip.png') 5 fill stretch;
  border-radius: 0;
  background: #070d29;
  box-shadow: 0 5px 16px #0006;
  color: #f0eee5;
  font: 400 12px/1.65 var(--sans, 'Segoe UI', sans-serif);
  overflow-wrap: anywhere;
}
body.reforged .talent-selected-tooltip .talent-detail-head { gap: 9px; align-items: flex-start; margin: 0 0 9px; }
body.reforged .talent-selected-tooltip .talent-detail-head img {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: none;
  margin: 0;
  border-width: 1px;
}
body.reforged .talent-selected-tooltip :is(.tooltip-title,h3) { margin: 0 0 4px; color: #f5d78e; font: 600 15px/1.3 var(--sans, 'Segoe UI', sans-serif); }
body.reforged .talent-selected-tooltip p { margin: 6px 0; color: #e4e4df; font-size: 12px; line-height: 1.65; }
body.reforged .talent-selected-tooltip .tooltip-rank { margin: 0; color: #b6c4d7; font-size: 11px; }
body.reforged .talent-selected-tooltip .tooltip-cost { color: #e8e8e8; }
body.reforged .talent-selected-tooltip .tooltip-body { color: #f0e8c9; }
body.reforged .talent-selected-tooltip .talent-adjustment-reason {
  margin: 11px 0 0;
  padding-top: 9px;
  border-top: 1px solid #74654380;
  color: #d5bba1;
  font-size: 11px;
}
body.reforged .talent-selected-tooltip .talent-adjustment-reason:empty { display: none; }

@media (min-width: 1800px) {
  body.reforged > .page-backdrop { background-position: center top, center top, right max(-70px, calc((100vw - 1800px) / 2 - 70px)) top -45px; }
}
@media (max-width: 1200px) {
  body.reforged > .page-backdrop { --priest-height: 1650px; background-position: center top, center top, right -240px top -30px; }
  body.reforged .hero-armory .hero-copy { width: 78%; }
  body.reforged .hero-armory h1 { font-size: 61px; }
  body.reforged .hero-armory h1 > span { font-size: 35px; }
}
@media (max-width: 1000px) {
  body.reforged > .page-backdrop { left: 0; --priest-height: 1600px; background-position: center top, center top, right -260px top -20px; }
  body.reforged .hero-armory .hero-copy { width: 74%; }
  body.reforged .hero-armory h1 { font-size: clamp(54px, 8vw, 75px); }
  body.reforged .hero-armory h1 > span { font-size: clamp(30px, 4.2vw, 40px); }
}
@media (max-width: 700px) {
  body.reforged > .page-backdrop {
    --priest-height: 1180px;
    height: 1800px;
    background-image:
      linear-gradient(90deg, #11100fee 0%, #11100fcc 33%, #11100f9c 66%, #11100f66 100%),
      linear-gradient(180deg, #11100f00 0%, #11100f0f 550px, #11100f9c 1050px, #11100f 1450px),
      var(--priest-hero);
    background-position: center top, center top, right -265px top 0;
  }
  body.reforged .hero-armory .hero-copy { width: 100%; max-width: 570px; }
  body.reforged .hero-armory h1 { font-size: clamp(38px, 8.5vw, 58px); letter-spacing: -.025em; }
  body.reforged .hero-armory h1 > span { margin-top: 10px; font-size: clamp(24px, 5.3vw, 34px); }
  body.reforged .hero-armory .hero-intro { max-width: 100%; color: #d6c8ac; font-size: 12px; }
  body.reforged :is(.armory-panel,.gear-armory) { background: rgb(26 23 20 / .89); }
  body.reforged .talent-editor-toolbar { gap: 9px 10px; padding: 12px 0; }
  body.reforged .talent-remaining { margin-right: 0; }
  body.reforged .talent-build-status { margin-right: auto; }
  body.reforged :is(#main-talent-editor-toolbar,#respec-talent-editor-toolbar) button { flex: 1 1 125px; min-height: 36px; padding-inline: 4px; font-size: 10px; white-space: normal; }
  body.reforged .talent-editor-caption { font-size: 11px; }
  body.reforged .talent-selected-tooltip { margin-inline: 8px; padding: 12px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.reforged > .page-backdrop { animation: none; transition: none; }
}
@media print {
  body.reforged > .page-backdrop { display: none; }
  body.reforged :is(.armory-panel,.gear-armory,.calc-toolbar,.gear-levels,.respec-calculator) { background: #fff; }
  body.reforged .talent-editor-toolbar,
  body.reforged .talent-adjustment { display: none; }
  body.reforged .talent-board[data-editor-id] .tree-canvas { row-gap: 10px; height: 488px; min-height: 488px; padding-bottom: 20px; }
}
