/* Site UX layer: headline, welcome + feedback dialogs, floating feedback button, item tooltips, class colors. */

/* Headline block (static HTML, above the paper doll: no CLS) */
.ft-headline { margin: 0.5rem 0 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, #151826, #0f1118); }
.ft-headline h1, .ft-headline .ft-headline-title { margin: 0 0 0.4rem; font-size: clamp(1.45rem, 5.2vw, 2.3rem); line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; }
.ft-headline .ft-headline-title .accent { color: var(--gold); }
.ft-headline p { margin: 0; color: var(--muted); font-size: clamp(0.95rem, 2.8vw, 1.08rem); max-width: 60ch; }
.ft-headline .ft-headline-links { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.9rem; }
.ft-headline .ft-headline-links a { color: var(--gold); }

/* Dialogs */
.ft-dialog { border: 1px solid var(--line); border-radius: 12px; padding: 0; background: var(--bg-raise); color: var(--ink);
  width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; box-shadow: 0 20px 60px #000a; }
.ft-dialog::backdrop { background: rgba(4, 5, 8, 0.66); }
.ft-dialog-body { position: relative; padding: 1.2rem 1.2rem 1rem; margin: 0; }
.ft-dialog h2 { margin: 0 2rem 0.5rem 0; font-size: 1.25rem; }
.ft-dialog-lede { margin: 0 0 0.5rem; color: var(--muted); }
.ft-steps { margin: 0 0 0.75rem; padding-left: 1.3rem; }
.ft-steps li { margin: 0.35rem 0; }
.ft-dialog-note { font-size: 0.85rem; color: var(--muted); margin: 0.25rem 0 0.75rem; }
.ft-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }
.ft-dialog-x { position: absolute; top: 0.5rem; right: 0.6rem; width: 2.25rem; height: 2.25rem; border: 0; background: transparent;
  color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 6px; }
.ft-dialog-x:hover, .ft-dialog-x:focus-visible { color: var(--ink); background: #ffffff12; }
.ft-btn { min-height: 44px; padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-slot);
  color: var(--ink); font: inherit; cursor: pointer; }
.ft-btn-primary { background: var(--gold); border-color: var(--gold); color: #1a1405; font-weight: 700; }
.ft-btn:focus-visible, .ft-fab:focus-visible, .ft-dialog-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-btn:disabled { opacity: 0.6; cursor: progress; }
.ft-feedback-form label { display: block; margin: 0.6rem 0 0.2rem; font-size: 0.88rem; color: var(--ink); }
.ft-feedback-form .opt, .ft-feedback-form .req { color: var(--dim); font-size: 0.8rem; }
.ft-feedback-form textarea, .ft-feedback-form input { width: 100%; max-width: 100%; padding: 0.55rem 0.6rem; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.ft-feedback-form input[readonly] { color: var(--muted); font-size: 0.85rem; }
.ft-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.ft-fb-status { min-height: 1.4em; margin: 0.6rem 0 0; font-size: 0.9rem; }
.ft-fb-status.ok { color: var(--ok); } .ft-fb-status.warn, .ft-fb-status.err { color: var(--warn); }
.ft-fb-status a { color: var(--gold); }

/* Floating feedback button (fixed: no layout shift; small on mobile) */
.ft-fab { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; min-height: 40px;
  padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--gold-dim); background: #1b1810ee; color: var(--gold);
  font: 600 0.85rem/1 Inter, system-ui, sans-serif; cursor: pointer; box-shadow: 0 6px 18px #0008; }
.ft-fab:hover { background: #2a2310; }
@media print { .ft-fab, .ft-tooltip { display: none !important; } }

/* Item tooltip (fixed, pointer-events none: never affects layout or 390px width) */
.ft-tooltip { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; visibility: hidden; opacity: 0;
  max-width: min(320px, calc(100vw - 16px)); padding: 0.6rem 0.7rem; border: 1px solid #5a5f78; border-radius: 6px;
  background: #070b1ef2; color: #fff; font: 0.82rem/1.35 Inter, system-ui, sans-serif; box-shadow: 0 8px 24px #000c;
  transition: opacity 0.08s; will-change: transform; }
.ft-tooltip.on { visibility: visible; opacity: 1; }
.ft-tt-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.15rem; }
.ft-tooltip .q0 { color: var(--q-0); } .ft-tooltip .q1 { color: var(--q-1); } .ft-tooltip .q2 { color: var(--q-2); }
.ft-tooltip .q3 { color: #3d9bff; } .ft-tooltip .q4 { color: #b86ef7; } .ft-tooltip .q5 { color: var(--q-5); }
.ft-tt-row { display: flex; justify-content: space-between; gap: 1rem; }
.ft-tt-green { color: #1eff00; }
.ft-tt-warn { color: #ff6b5b; }
.ft-tt-src { color: #ffd100; margin-top: 0.3rem; }
.ft-tt-conf { margin-top: 0.35rem; color: #c8c4b4; font-size: 0.78rem; }
.ft-tt-foot { margin-top: 0.3rem; color: #7d7a70; font-size: 0.72rem; }

/* Class colors (standard WoW palette) */
[data-class="warrior"], .class-tile[data-c="warrior"] { --chip: #C69B6D; }
[data-class="paladin"], .class-tile[data-c="paladin"] { --chip: #F48CBA; }
[data-class="hunter"], .class-tile[data-c="hunter"] { --chip: #AAD372; }
[data-class="rogue"], .class-tile[data-c="rogue"] { --chip: #FFF468; }
[data-class="priest"], .class-tile[data-c="priest"] { --chip: #FFFFFF; }
[data-class="shaman"], .class-tile[data-c="shaman"] { --chip: #0070DD; --chip-ink: #4da3ff; } /* #0070DD text is 3.6:1 on the dark bg; lighter ink for text only */
[data-class="mage"], .class-tile[data-c="mage"] { --chip: #3FC7EB; }
[data-class="warlock"], .class-tile[data-c="warlock"] { --chip: #8788EE; }
[data-class="druid"], .class-tile[data-c="druid"] { --chip: #FF7C0A; }
a[data-class] { color: var(--chip-ink, var(--chip)); }
.class-tile { border-top: 3px solid var(--chip, var(--line)); }
.class-tile .class-name { color: var(--chip-ink, var(--chip, var(--ink))); font-weight: 700; }
.class-tile.on { background: color-mix(in srgb, var(--chip) 16%, var(--bg-raise)); }
.class-tile:disabled .class-name { color: var(--dim); }
#sim-class { border-left: 4px solid var(--sim-class, var(--line)); }
.sim-class-chip { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--chip); color: #111; font-weight: 700; font-size: 0.8rem; }
.sim-class-chip[data-class="shaman"] { color: #fff; }
.sim-pick-link { display: block; font-size: 0.78rem; margin-top: 0.15rem; min-height: 1.1em; overflow-wrap: anywhere; }
.site-foot-extra a { color: var(--gold); }

/* Thanks page */
.thanks-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.5rem; }
.thanks-list li { padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raise); }
.thanks-list .note { color: var(--muted); margin-left: 0.4rem; }
.ft-headline-links .ft-headline-vanity { display: inline-flex; flex-wrap: wrap; gap: inherit; align-items: center; padding-left: 0.6rem; border-left: 1px solid var(--line, #333); }
.ft-headline-links .ft-headline-vanity .lbl { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #c9a0ff; }

/* Item sets + faction-only quest rewards (scripts/item_sets.py, scripts/quest_faction.py) */
.badge.set-tag { background: rgba(80, 200, 120, 0.12); color: #7fe0a0; border-color: rgba(80, 200, 120, 0.45); text-transform: none; letter-spacing: 0; }
.badge.faction-only { text-transform: none; letter-spacing: 0; }
.badge.faction-only.alliance { background: rgba(60, 110, 220, 0.16); color: #8fb4ff; border-color: rgba(90, 140, 255, 0.5); }
.badge.faction-only.horde { background: rgba(200, 50, 50, 0.16); color: #ff9a8f; border-color: rgba(230, 80, 70, 0.5); }
.detail-card .set-bonuses li { align-items: flex-start; gap: 0.75rem; }
.detail-card .set-bonus-text { font-weight: 500; text-align: right; }
.detail-card .set-pieces { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; }
.detail-close { position: relative; z-index: 2; touch-action: manipulation; }

/* Item set block, in-game / Wowhead colors (tooltip + Details) */
.ft-set { margin-top: 0.55rem; line-height: 1.35; }
.ft-set-name { color: #ffd100; font-weight: 600; }
.ft-set-name a { color: #ffd100; text-decoration: none; }
.ft-set-name a:hover { text-decoration: underline; }
.ft-set-pieces, .ft-set-bonuses { list-style: none; margin: 0.15rem 0 0; padding: 0 0 0 0.9rem; }
.ft-set-pieces li a { text-decoration: none; }
.ft-set-piece.on a { color: #ffff98; }
.ft-set-piece.off a { color: #9d9d9d; }
.ft-set-piece.absent a { color: #6f6f6f; font-style: italic; }
.ft-set-req { color: #6f6f6f; font-size: 0.9em; }
.ft-set-bonuses { padding-left: 0; margin-top: 0.45rem; }
.ft-set-bonuses li { color: #9d9d9d; margin: 0.1rem 0; }
.ft-set-bonuses li.on { color: #1eff00; }
.ft-set-none, .ft-set-foot { color: #9d9d9d; font-size: 0.85em; margin-top: 0.35rem; }
.ft-set-detail { background: #070b1e; border: 1px solid #2a2f45; border-radius: 6px; padding: 0.65rem 0.75rem; margin: 1rem 0 0.5rem; font-size: 0.9rem; }
.ft-set-detail .ft-set-pieces li { padding: 0.12rem 0; }
.ft-set-detail .ft-set-piece a[data-set-piece] { cursor: pointer; }
.ft-set-detail .ft-set-piece a:hover { text-decoration: underline; }
.ft-set-detail .ft-set-foot a { color: var(--gold); }
@media (hover: none) { .ft-set-detail .ft-set-pieces li { padding: 0.3rem 0; } }

/* "Join our Discord" CTA in the site header — Discord blurple, big, above the fold */
header.site .ft-discord {
  order: 3;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 44px; padding: 0.55rem 1.1rem;
  background: #5865F2; color: #fff; border-radius: 8px;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 12px rgba(88, 101, 242, 0.35);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
header.site .ft-discord:hover { background: #4752C4; color: #fff; text-decoration: none; transform: translateY(-1px); }
header.site .ft-discord:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
header.site .ft-discord-logo { flex: 0 0 auto; width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { header.site .ft-discord { transition: none; } header.site .ft-discord:hover { transform: none; } }
@media (max-width: 799px) {
  /* Phones/tablets: row 1 = brand + Discord, then bracket switch, then nav (header height unchanged) */
  header.site .brand-block { order: 0; }
  header.site .ft-discord { order: 1; margin-left: auto; padding: 0.5rem 0.85rem; font-size: 0.9rem; }
  header.site .bracket-switch { order: 2; flex-basis: 100%; }
  header.site nav { order: 3; flex-basis: 100%; }
}
@media (max-width: 359px) {
  header.site .ft-discord { flex-basis: 100%; margin-left: 0; }
}

/* Mid widths with the bracket switch (header would wrap the button to a lone left-aligned row):
   row 1 = brand + Discord, row 2 = bracket switch + nav */
@media (min-width: 800px) and (max-width: 1099px) {
  header.site:has(.bracket-switch) .brand-block { order: 0; }
  header.site:has(.bracket-switch) .ft-discord { order: 1; margin-left: auto; }
  header.site:has(.bracket-switch)::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  header.site:has(.bracket-switch) .bracket-switch { order: 3; }
  header.site:has(.bracket-switch) nav { order: 4; margin-left: auto; }
}