/* RATS — Raider Profile page (mockup Opt 5 — de-duplicated, class-coloured).
   Full-art collapsible hero banner + a 3-column body: Identity rail · Performance · reserved.
   Every accent derives from --col (the selected raider's class colour, set per-render on .hero/.pgrid).
   Styles only through tokens; components from ui.css. Badges (mockup right rail) are PARKED. */

.empty {
  color: var(--text-dim-2);
  font-style: italic;
  padding: 18px 2px;
}

/* section heading (class-coloured uppercase eyebrow) */
.psec {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 10px;
  font-size: 12px;
  color: var(--col, var(--accent));
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 800;
}
.psec.mt {
  margin-top: 20px;
}
/* section-header line icon (Feather style) — inherits the header colour */
.sicon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  stroke: currentColor;
}
.cardhd .ht {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.psec .cnt {
  color: var(--text-dim-2);
  font-weight: 700;
}
/* segmented controls use the site standard (ui.css .segs/.seg); on a class card the picked one takes the class colour */
.segs .seg.active { color: var(--col, var(--accent-hi)) }
/* the raid + size + difficulty toggles sit at the right end of the Performance header (raid, size, diff).
   margin-left:auto on the first one floats the whole group right; the header's gap separates them.
   .sizetog keeps the auto too for the case where no raid selector is shown (single-raid snapshot). */
.raidtog,
.sizetog {
  margin-left: auto;
}
.raidtog ~ .sizetog,
.raidtog ~ .difftog,
.sizetog ~ .difftog {
  margin-left: 0;
}
/* let the header wrap the toggles onto a second line on narrow screens instead of overflowing */
.psec {
  flex-wrap: wrap;
}

/* ============ HERO — full art, whole & uncropped; height follows the art ratio ============ */
.hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--col, var(--accent));
  border-radius: 14px;
  margin-top: 14px;
  margin-bottom: 16px;
  background: #0c0d0f;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--col, var(--accent)) 18%, transparent),
    0 14px 38px rgba(0, 0, 0, 0.45);
}
/* expanded hero: a FIXED height (not max-height) so the art always has a box to fill. The banners are
   2:1-2.5:1, not the 4:1 STYLE.md asks for, so at page width they're shorter than the box — the art must
   be stretched over the whole hero (inset:0 + cover) or the hero's own #0c0d0f background shows through
   as a black bar along the top. Anchored top-right so the character (drawn on the right) stays framed. */
.hero {
  height: 300px;
}
.hero .heroart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
}
/* mostly-neutral dark fade over the left; class colour only as a thin sliver at the far-left edge */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #0a0b0d 0%,
    rgba(10, 11, 13, 0.92) 30%,
    rgba(10, 11, 13, 0.6) 48%,
    transparent 66%
  );
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 2;
  background: var(--col, var(--accent));
}

/* the identity text column overlays the dark left of the art */
.hero .hbody {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  bottom: 0;
  width: 46%;
  min-width: 0;
  box-sizing: border-box; /* keep padding INSIDE the 46% so text can't spill over the art */
  overflow: hidden; /* hard stop: nothing in the text column crosses into the centered art */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(18px, 3vw, 34px);
}
/* every text child stays within the column; long words break instead of pushing the box wider */
.hero .hbody > * {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.hero .hname {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.04;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.hero .hrank {
  font-size: 0.76em;
}
.hero .hmeta {
  color: var(--text);
  font-size: clamp(12px, 1.1vw, 14.5px);
  margin-top: 4px;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.hero .hquip {
  color: color-mix(in srgb, var(--col, var(--accent)) 55%, #fff);
  font-style: italic;
  font-size: clamp(11px, 1vw, 13.5px);
  margin-top: 6px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.hero .hpills {
  display: flex;
  gap: 8px;
  margin-top: 9px;
  flex-wrap: wrap;
}
.hpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 11px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.hpill.away {
  background: #16243a;
  border-color: #34507a;
  color: #7fb4ff;
}
.hpill.next {
  background: #1e2620;
  border-color: #3a5b42;
  color: #8fdf9f;
}
/* ---- corner expand/collapse toggle ---- */
.hero .htoggle {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--col, var(--accent)) 50%, var(--border));
  background: rgba(12, 13, 15, 0.72);
  color: var(--col, var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  backdrop-filter: blur(3px);
}
.hero .htoggle:hover {
  background: rgba(12, 13, 15, 0.92);
}
.hero .htoggle svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s ease;
}
.hero.collapsed .htoggle svg {
  transform: rotate(180deg);
}

/* ---- COLLAPSED: hero becomes a slim band; art cropped to it, anchored top-right ---- */
.hero.collapsed {
  height: 124px;
}
.hero.collapsed .heroart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
}
.hero.collapsed .hbody {
  justify-content: center;
}
.hero.collapsed .hquip,
.hero.collapsed .hpills {
  display: none;
}

/* ---- NO-ART fallback: a designed, class-themed banner (ghost icon + glow + ringed glyph) ---- */
.heroglyph,
.heroghost,
.heroglow {
  display: none;
}
.hero.noart {
  height: 190px;
  background:
    /* subtle diagonal weave */
    repeating-linear-gradient(115deg, transparent 0 26px, rgba(255, 255, 255, 0.018) 26px 27px),
    /* warm class light from the right */
    radial-gradient(
        120% 150% at 88% 25%,
        color-mix(in srgb, var(--col, var(--accent)) 34%, transparent),
        transparent 55%
      ),
    /* deep base gradient */
    linear-gradient(115deg, color-mix(in srgb, var(--col, var(--accent)) 16%, #101216) 0%, #0c0d10 60%, #090a0c 100%);
}
.hero.noart .heroart {
  display: none;
}
.hero.noart .hbody {
  width: 60%;
  z-index: 3;
}

/* big faded class icon watermark behind everything */
.hero.noart .heroghost {
  display: block;
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  width: 300px;
  height: 300px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.09;
  filter: grayscale(0.2);
  mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 74%);
}
.hero.noart .heroghost .clsico {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* soft class-colour glow pool on the right */
.hero.noart .heroglow {
  display: block;
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translate(50%, -50%);
  width: 340px;
  height: 340px;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--col, var(--accent)) 45%, transparent) 0%,
    transparent 62%
  );
  filter: blur(6px);
}

/* ringed class-icon medallion */
.hero.noart .heroglyph {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 46px;
  top: 50%;
  transform: translateY(-50%);
  width: 116px;
  height: 116px;
  border-radius: 50%;
  font-size: 56px;
  background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--col, var(--accent)) 34%, #16181c), #0a0b0d);
  border: 2px solid color-mix(in srgb, var(--col, var(--accent)) 80%, transparent);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--col, var(--accent)) 14%, transparent),
    0 0 46px -6px var(--col, var(--accent)),
    inset 0 0 26px -6px var(--col, var(--accent));
  pointer-events: none;
  z-index: 2;
}
.hero.noart .heroglyph .clsico {
  width: 60%;
  height: 60%;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 0 20px -4px var(--col, var(--accent));
}

.hero.noart.collapsed {
  height: 124px;
}
.hero.noart.collapsed .heroglyph {
  width: 82px;
  height: 82px;
  font-size: 38px;
  right: 30px;
}
.hero.noart.collapsed .heroghost {
  width: 200px;
  height: 200px;
}

/* ============ 3-column body ============ */
.pgrid {
  display: grid;
  /* minmax(0,1fr) on the middle track prevents grid "blowout": without it, wide content in the middle
     column can force the whole grid past its container so the right column sticks out past the banner. */
  grid-template-columns: 248px minmax(0, 1fr) 250px;
  gap: 16px;
  align-items: start;
}

.cardhd {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cardhd .ht {
  font-size: 12px;
  color: var(--col, var(--accent));
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 800;
}
.cardhd .segwrap {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hsmall {
  color: var(--text-dim-2);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 800;
}

/* ============ identity rail (each fact once) ============ */
/* Identity card: keep a steady height whether a raider has 1 fact or 4, so the card doesn't jump
   between raiders. ~3 rows tall; rows sit at the top, extra space stays empty below. */
.idcard {
  min-height: 132px;
}
.railrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #232529;
}
.railrow:last-child {
  border-bottom: 0;
}
.railrow .rk {
  font-size: 18px;
  width: 22px;
  text-align: center;
  flex: 0 0 auto;
}
.railrow .rl {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
}
.railrow .rv {
  margin-left: auto;
  font-weight: 800;
  color: var(--white);
  text-align: right;
}
.railrow .rv.col {
  color: var(--col, var(--accent));
}

/* clean "no parses in this scope" state — a calm centered card instead of empty tiles */
.emptyperf {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 22px;
  gap: 9px;
}
.emptyperf .ep-ic {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--col, var(--accent));
  background: color-mix(in srgb, var(--col, var(--accent)) 12%, transparent);
}
.emptyperf .ep-ic svg {
  width: 26px;
  height: 26px;
}
.emptyperf .ep-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}
.emptyperf .ep-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  max-width: 340px;
  line-height: 1.45;
}
.emptyperf .gold {
  color: var(--accent);
}

/* ============ stat tiles (mirrors rankings .gs) ============ */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 0 0 6px; /* top margin 0 so tiles align with the other columns' first card (header owns the gap) */
}
.tile-s {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 13px 15px;
  overflow: hidden;
}
/* class-color accent strip on the headline tiles */
.tile-s.accent::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--tile-col, var(--accent));
}
.tile-s .lbl {
  color: var(--text-dim);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 800;
}
.tile-s .v {
  font-size: 26px;
  font-weight: 800;
  color: var(--white);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.tile-s .d {
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
  color: var(--text-dim-2);
}

/* ---- TANK tiles: warmer, class-washed, with an inline icon + a big faded shield watermark ---- */
.tile-t {
  /* subtle diagonal wash toward the tank's class color so the row reads as "the wall" */
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--tile-col) 14%, transparent), transparent 60%),
    var(--surface-2);
  border-color: color-mix(in srgb, var(--tile-col) 26%, var(--border));
}
.tile-t .tt-ic {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-bottom: 8px;
  color: var(--tile-col);
  background: color-mix(in srgb, var(--tile-col) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--tile-col) 30%, transparent);
}
.tile-t .tt-ic svg {
  width: 17px;
  height: 17px;
  display: block;
}
.tile-t .v {
  color: var(--white);
}
/* empty tile (no data): recede the whole thing so the "—" doesn't read as a stark white line */
.tile-s.empty-tile {
  opacity: 0.72;
}
.tile-s.empty-tile .v {
  color: var(--text-faint);
  font-weight: 700;
}
.tile-t.empty-tile .tt-ic {
  color: var(--text-dim-2);
  background: color-mix(in srgb, var(--text-dim-2) 12%, transparent);
  border-color: color-mix(in srgb, var(--text-dim-2) 20%, transparent);
}
/* a medal rank chip that can sit on a tile */
.rkchip {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  vertical-align: 2px;
}
.rkchip.g {
  color: var(--accent-hi);
}
.rkchip.s {
  color: #cfd2d6;
}
.rkchip.b {
  color: #d39b6a;
}

/* NOTE: badges (a right-rail coin system) are PARKED — not built yet. No styles here. */

/* ============ The Pack (alts) — stacked rows in the rail ============ */
.barracks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toon {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 13.5px;
  background: var(--surface-2);
  /* every row carries a faint class-tinted border (--col is set per row) */
  border: 1px solid color-mix(in srgb, var(--col, var(--accent)) 35%, var(--border));
  border-radius: 10px;
  padding: 7px 10px;
}
.toon .cdot,
.toon .cicon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: 0 0 auto;
}
.toon .cicon {
  display: inline-flex;
  overflow: hidden;
}
.toon .cicon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.toon .tl {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.toon .tl small {
  color: var(--text-dim-2);
  font-size: 11px;
  font-weight: 600;
}
/* clickable alt rows -> jump to that toon's profile */
.toon[role="button"] {
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s,
    transform 0.06s;
}
.toon[role="button"]:hover {
  border-color: var(--col, var(--accent));
  background: color-mix(in srgb, var(--col, var(--accent)) 14%, var(--surface-2));
}
.toon[role="button"]:active {
  transform: translateY(1px);
}
/* the toon this page is currently showing — highlighted, not clickable */
.toon.current {
  border-color: var(--col, var(--accent));
  background: color-mix(in srgb, var(--col, var(--accent)) 12%, var(--surface-2));
  box-shadow:
    0 0 0 1px var(--col, var(--accent)),
    0 0 16px -6px var(--col, var(--accent));
}

/* ============ per-boss placement bars ============ */
.plist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.plist li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #232529;
}
.plist li:last-child {
  border-bottom: 0;
}
.plist .rk {
  width: 30px;
  text-align: center;
  font-weight: 800;
  color: var(--text-dim-2);
  flex: 0 0 auto;
}
.plist .rk.g {
  color: var(--accent-hi);
}
.plist .rk.s {
  color: #cfd2d6;
}
.plist .rk.b {
  color: #d39b6a;
}
.plist .bn {
  /* FIXED width (not min/max) so every bar starts at the same x regardless of boss-name length */
  flex: 0 0 210px;
  width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.plist .pspec {
  color: var(--text-dim-2);
  font-size: 11px;
  font-weight: 600;
}
.plist .pbar {
  flex: 1 1 120px;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}
/* tank rows have no damage bar — this just fills the middle so Boss and Off-spec align in their columns */
.plist .tankspacer {
  flex: 1 1 120px;
}
/* tank list: no bar to align against, so let the boss name take the space it needs (no truncation) */
.plist-tank .bn {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
}
.plist-tank .pspec {
  white-space: nowrap;
}
.plist .pbar > i {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.plist .bv {
  font-weight: 800;
  color: var(--white);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: right;
}

/* officer-only cards */
.officer-only {
  display: none;
}

/* ============ typeahead dropdown (shared by the header "jump to raider" search) ============ */
.ac {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 300px;
  overflow: auto;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}
.ac .opt {
  padding: 7px 11px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ac .opt:hover {
  background: #23262b;
}
.ac .opt .cdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.ac .none {
  padding: 8px 11px;
  color: var(--text-dim-2);
  font-style: italic;
  font-size: 13px;
}

/* header search — "jump to raider" (free for all). Dark field + magnifier, reuses the .ac dropdown. */
.psearch {
  position: relative;
  width: 210px;
}
.psearch .ps-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-dim-2);
  pointer-events: none;
}
.psearch input {
  width: 100%;
  height: var(--ctl-h);
  background: var(--field);
  color: var(--white);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  font-size: 13px;
  color-scheme: dark;
  padding: 0 12px 0 32px;
}
.psearch input:focus {
  outline: none;
  border-color: var(--accent);
}
/* re-anchor the shared .ac dropdown under this control */
.psearch .ac {
  top: calc(var(--ctl-h) + 4px);
}
@media (max-width: 620px) {
  .psearch {
    width: 150px;
  }
}

/* stack the 3-col body on narrow screens */
@media (max-width: 1000px) {
  .pgrid {
    grid-template-columns: 1fr;
  }
  /* the right column (Raid Vitality) stacks under the rest when narrow */
  .pgrid .side {
    order: -1; /* show the headline vitality first when stacked */
  }
}

/* narrow: stack the hero — art on top, text flows below (no absolute 46% sliver) */
@media (max-width: 620px) {
  .hero .hbody {
    position: static;
    width: 100%;
    padding: 14px 18px;
    background: linear-gradient(180deg, transparent, #0c0d0f 40%);
    margin-top: -60px;
    z-index: 2;
  }
  .hero::before {
    display: none;
  }
  .hero.noart {
    height: auto;
    min-height: 150px;
  }
  /* on mobile the body stacks over the art — shrink the medallion, pull it to the top-right */
  .hero.noart .heroglyph {
    width: 92px;
    height: 92px;
    top: 26px;
    right: 22px;
    transform: none;
  }
  .hero.noart .heroghost {
    width: 210px;
    height: 210px;
    right: -40px;
    top: 30%;
  }
  .hero.noart .heroglow {
    width: 240px;
    height: 240px;
  }
  .plist .bn {
    min-width: 110px;
  }
}

/* ============ Raid Vitality ("raid HP" bar) ============ */
/* tone -> the bar/glow colour; set on the .vitality card so the whole panel themes to the band. */
.vitality {
  --vt: var(--ok);
}
.vitality.fire {
  --vt: #ffb03a;
}
.vitality.ok {
  --vt: var(--ok);
}
.vitality.warn {
  --vt: #e0a13e;
}
.vitality.bad {
  --vt: #ff6b6b;
}
/* honest "no data" state — muted, no colored fill (never reads as a real score) */
.vitality.unknown {
  --vt: var(--text-faint);
}
.hpbar.unknown {
  background: repeating-linear-gradient(45deg, #17181c 0 8px, #1c1d22 8px 16px);
}

/* ---- align the three columns on one grid line ----
   Each column (.rail / .main / .side) opens with a .psec header, but they carry different content
   (plain title · title+toggles · title+status). Pin the FIRST .psec of each column to one fixed
   height so all three headers occupy the same band — then every column's first card starts on the
   same horizontal line, giving the clean grid cross of gutters. */
.rail > .psec:first-child,
.main > .psec:first-child,
.side > .psec:first-child {
  min-height: 34px; /* tall enough for the tallest header (Performance toggles) */
  margin-bottom: 12px;
  flex-wrap: nowrap; /* keep title + control on one line so height stays fixed */
  white-space: nowrap;
}
/* status word lives in the section header, pushed to the right edge; tone-coloured */
.psec .vt-status {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.psec .vt-status.fire {
  color: #ffb03a;
}
.psec .vt-status.ok {
  color: var(--ok);
}
.psec .vt-status.warn {
  color: #e0a13e;
}
.psec .vt-status.bad {
  color: #ff6b6b;
}
.psec .vt-status.unknown {
  color: var(--text-dim-2);
}

/* the health bar itself — dark track + tone-coloured fill with a subtle sheen */
.hpbar {
  position: relative;
  height: 22px;
  border-radius: 999px;
  background: #17181c;
  border: 1px solid var(--border);
  overflow: hidden;
}
.hpfill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--vt) 70%, #000 30%), var(--vt));
  box-shadow: 0 0 12px color-mix(in srgb, var(--vt) 55%, transparent);
  transition: width 0.5s ease;
}
.hplabel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.vt-blurb {
  color: var(--text-dim);
  font-size: 13px;
  margin: 10px 2px 2px;
}

/* soft contributing factors — vibes, not numbers */
.vfacs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.vfac {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
}
.vfac small {
  color: var(--text-dim-2);
  font-weight: 600;
}
.vfac .vf-i {
  font-size: 12px;
}
.vfac.good {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
  color: var(--ok);
}
.vfac.warn {
  border-color: color-mix(in srgb, #e0a13e 50%, var(--border));
  color: #e0a13e;
}
.vfac.bad {
  border-color: color-mix(in srgb, #ff6b6b 50%, var(--border));
  color: #ff6b6b;
}
.vfac.good small,
.vfac.warn small,
.vfac.bad small {
  color: inherit;
  opacity: 0.75;
}

/* ============ Honours — derived badges (right rail, under Raid Vitality) ============ */
.honcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Pokémon-style raid-night progression ring */
.ringrow {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ring {
  position: relative;
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
}
.ring-svg {
  width: 68px;
  height: 68px;
  transform: rotate(-90deg);
}
.ring-bg {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 7;
}
.ring-fg {
  fill: none;
  stroke: var(--col, var(--accent));
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--col, var(--accent)) 55%, transparent));
}
.ring-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ring-n {
  color: var(--white);
  font-size: 20px;
  font-weight: 800;
}
.ring-l {
  color: var(--text-dim-2);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
}
.ringtxt {
  min-width: 0;
}
.ringttl {
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
}
.ringsub {
  color: var(--text-dim-2);
  font-size: 11.5px;
  margin-top: 3px;
  line-height: 1.35;
}
.ringsub b {
  color: var(--col, var(--accent));
  font-weight: 800;
}
/* light list: tight rows for the guild superlatives */
.honours {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.hon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
}
.hon + .hon {
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.hon-emoji {
  font-size: 15px;
  line-height: 1;
  flex: 0 0 auto;
  width: 20px;
  text-align: center;
  filter: saturate(1.1);
}
.hon-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.hon-title {
  color: var(--text);
  font-weight: 700;
  font-size: 12.5px;
}
.hon-note {
  color: var(--text-dim-2);
  font-size: 11px;
}
.hon-note b {
  color: var(--text-dim);
  font-weight: 700;
}
/* which raid/size the award was won in — a quiet tag next to the title */
.hon-scope {
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-left: 5px;
}

/* ============ First-run "who are you" screen (no raider targeted / no saved main) ============ */
.welcome {
  max-width: 640px;
  margin: 7vh auto 0;
  text-align: center;
  padding: 34px 30px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.welcome .wc-mark {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 6px;
}
.welcome h2 {
  color: var(--white);
  margin: 0 0 14px;
  font-size: 22px;
}
/* the permanence warning — boxed + gold-edged so it can't be missed before picking */
.welcome .wc-sub {
  color: var(--text-dim);
  margin: 0 auto 12px;
  max-width: 500px;
  line-height: 1.55;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: var(--radius);
}
.welcome .wc-sub b {
  color: var(--accent);
}
.welcome .wc-hint {
  color: var(--text-dim-2);
  font-size: 13px;
  margin: 0 auto 20px;
  max-width: 460px;
  line-height: 1.5;
}
.welcome .wc-hint b {
  color: var(--accent);
}
/* search + Select row */
.wc-pick {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: flex-start;
  max-width: 440px;
  margin: 0 auto 18px;
}
.wc-field {
  position: relative;
  flex: 1;
  text-align: left;
}
.wc-field input {
  width: 100%;
}
/* anchor the shared .ac typeahead dropdown under the field */
.wc-field .ac {
  top: calc(var(--ctl-h) + 4px);
  left: 0;
  right: 0;
}
.wc-pick #wcSelect {
  flex: 0 0 auto;
}

/* ---- "set as my main" confirm modal (site-styled Yes / No) ---- */
#myToonModal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 7, 9, 0.72);
  backdrop-filter: blur(2px);
}
#myToonModal .mt-box {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
#myToonModal h3 {
  margin: 0 0 10px;
  color: var(--white);
  font-size: 18px;
}
#myToonModal .mt-name {
  color: var(--accent);
}
#myToonModal p {
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0 0 20px;
}
#myToonModal p b {
  color: var(--accent);
}
#myToonModal .mt-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}


/* ---------- Art: every picture this raider is tagged in ------------------- */
/* auto-fill, so a rat with two pictures gets two tiles instead of a stretched row */
.artgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.artthumb {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
}
.artthumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.18s ease;
}
.artthumb:hover img,
.artthumb:focus-visible img {
  transform: scale(1.04);
}
.artthumb:hover,
.artthumb:focus-visible {
  border-color: var(--accent);
  outline: none;
}
/* caption sits ON the image so a tile is all picture, no dead strip below it */
.artcap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 8px 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--white);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- art lightbox (mirrors the gallery page) ---------------------- */
dialog#artlb {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
}
dialog#artlb::backdrop {
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(2px);
}
#artlb .lb-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 18px 18px;
  cursor: zoom-out;
}
#artlb .lb-stage img {
  max-width: 94vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.6);
}
#artlb .lb-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 14px;
  max-width: 94vw;
}
#artlb .lb-txt {
  text-align: center;
}
#artlb .lb-txt .t {
  color: var(--white);
  font-weight: 800;
  font-size: 15px;
}
#artlb .lb-txt .c {
  color: var(--text-dim);
  font-size: 12.5px;
  margin-top: 2px;
}
#artlb .lb-dl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 800;
  background: var(--accent);
  color: var(--surface-2);
  border: 1px solid var(--accent);
  border-radius: 7px;
  padding: 5px 11px;
}
#artlb .lb-dl:hover {
  filter: brightness(1.1);
}
#artlb .lb-stage img,
#artlb .lb-bar {
  cursor: default;
}
#artlb .lb-x,
#artlb .lb-nav {
  position: fixed;
  z-index: 2;
  cursor: pointer;
  color: var(--text);
  height: auto;
  background: rgba(32, 34, 37, 0.7);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}
#artlb .lb-x {
  top: 14px;
  right: 16px;
  padding: 8px 12px;
}
#artlb .lb-nav {
  top: 50%;
  transform: translateY(-50%);
  padding: 14px 16px;
  font-size: 22px;
}
#artlb .lb-nav.prev {
  left: 14px;
}
#artlb .lb-nav.next {
  right: 14px;
}
#artlb .lb-x:hover,
#artlb .lb-nav:hover {
  border-color: var(--accent);
  color: var(--white);
}
#artlb .lb-count {
  position: fixed;
  z-index: 2;
  top: 18px;
  left: 16px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
}

/* ---------- site makeover (assets/css/site.css) ---------- */
/* the raider's banner is the header; this row above it carries the eyebrow + the tools */
.ptools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 26px 0 0 }
.ptools .eyebrow { margin: 0 }
.ptools .pt-acts { margin-left: auto; display: inline-flex; gap: 8px; align-items: center }
/* section titles in the display face, like every other page */
.psec, .cardhd .ht {
  font-family: var(--display); font-weight: 400; font-size: 19px;
  text-transform: none; letter-spacing: 0; color: var(--heading);
}
.psec .sicon, .cardhd .ht .sicon { color: var(--accent); width: 17px; height: 17px }
.psec .cnt { font-family: var(--body); font-size: 12.5px }
.psec .vt-status { font-family: var(--body) }
/* art: real 16:9 tiles, two or three to a row */
.artgrid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) }
.artthumb { height: auto }
.artthumb img { height: auto !important; aspect-ratio: 16 / 9 }
.artcap { font-size: 12.5px; padding: 22px 10px 8px }
.welcome h2 { font-family: var(--display); font-weight: 400; font-size: 34px; text-transform: none; letter-spacing: 0; color: var(--heading) }

/* ================= profile layout (mock D): band header · number strip · rail | tabs · art ================= */
/* the raider's banner behind the header, like every other page's band */
/* The band grows with the screen so it keeps roughly the banners' own shape (~2.4:1): at a fixed 440px
   a wide screen made it ~4.3:1, and "cover" then zoomed each banner until only a head and a shoulder
   were left. The foot fades later too, so more of the picture shows before it melts into the page. */
.band.raider { height: clamp(440px, 42vw, 980px) }
.band.raider[hidden] { display: none }
.band.raider img {
  object-position: 75% 20%; opacity: .85;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.band.raider::after {
  background: linear-gradient(90deg, var(--bg) 0%, rgba(20, 21, 23, .85) 34%, rgba(20, 21, 23, .15) 70%, rgba(20, 21, 23, 0) 100%);
}
/* no art at all: a wash of the class colour instead of a picture */
.band.raider.noart img { display: none }
.band.raider.noart { background: radial-gradient(ellipse at 75% 20%, color-mix(in srgb, var(--col, var(--accent)) 35%, transparent), transparent 65%) }
.band ~ .wrap .phead.ph { padding-top: 110px }

/* the tools row only shows on the welcome screen; with a raider open they sit in the header */
.ptools:not(:has(.pt-acts)) { display: none }
.ptools { justify-content: flex-end }
.ph .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.ph .pt-acts { margin: 0 }
.ph h1 { text-transform: none; letter-spacing: 0 }
.ph .lede i { color: var(--text-dim) }
.ph-ten { color: var(--text-dim); font-size: .92em; white-space: nowrap }
.ph .hpills { margin-top: 12px }

/* the number strip: big values, no boxes */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 26px 0 0;
  border-top: 1px solid var(--line-warm); border-bottom: 1px solid var(--line-warm);
}
.stat { padding: 18px 20px; border-right: 1px solid var(--border); min-width: 0 }
.stat:last-child { border-right: 0 }
.stat .v { font-size: 36px; font-weight: 800; line-height: 1.05; color: var(--accent-hi); white-space: nowrap }
.stat .v small.of { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-left: 5px }
.stat .v.dim { color: var(--text-faint) }
.stat .v .rkchip { font-size: 12px; vertical-align: 6px; margin-left: 6px }
.stat .l { margin-top: 8px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim-2); font-weight: 700 }
.stat .s { margin-top: 3px; font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis }

/* rail | tabs */
.dos { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 30px; margin-top: 30px; align-items: start }
.prail {
  position: sticky; top: calc(var(--bar-h) + 16px); padding: 18px; border-radius: var(--radius-xl);
  background: var(--surface-2); border: 1px solid var(--line-warm);
}
.prail .card { background: none; border: 0; padding: 0; box-shadow: none }
.prail .psec { margin-top: 20px }
.prail .psec:first-child { margin-top: 0 }

/* the pack: each toon on its own banner */
.toon { position: relative; overflow: hidden; min-height: 56px; padding: 8px 12px; background: var(--surface) }
.toon .toon-art {
  position: absolute; top: 0; right: 0; width: 75%; height: 100%; object-fit: cover; object-position: 70% 25%;
  opacity: .55; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
  mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.toon:hover .toon-art { opacity: .85 }
.toon > :not(.toon-art) { position: relative; z-index: 1 }
.toon .tl { text-shadow: 0 1px 6px rgba(0, 0, 0, .9) }
.toon .cicon { display: none }

/* tabs */
.ptabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px }
.ptabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; height: auto;
  padding: 10px 16px; font-size: 14px; font-weight: 700; color: var(--text-dim-2); cursor: pointer;
}
.ptabs button:hover { color: var(--text); filter: none }
.ptabs button.on { color: var(--text); border-bottom-color: var(--accent) }
.ppane[hidden] { display: none }
.pscope { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px }
.plhd { display: flex; justify-content: space-between; margin: 4px 0 6px }
.ppane .plist li { padding: 11px 0 }
.ppane .plist .bn { font-size: 14px }
.ppane .plist .bv { font-size: 15px }

/* honours: medals */
.ppane .honcard { background: none; border: 0; padding: 0 }
.ppane .ringrow { margin-bottom: 14px }
.ppane .honours { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; border: 0; padding: 0 }
.ppane .hon {
  flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(192, 148, 58, .12), transparent 60%), var(--surface-2);
  border: 1px solid var(--line-warm);
}
.ppane .hon + .hon { border-top: 1px solid var(--line-warm) }
.ppane .hon-emoji { font-size: 22px; width: auto; text-align: left }
.ppane .hon-title { font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--heading) }
.ppane .hon-scope { display: block; margin: 2px 0 0; font-family: var(--body); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700 }
.ppane .hon-note { font-size: 12px; color: var(--text-dim); margin-top: 4px }

/* art: a full-width row at the bottom */
#profile > .psec.mt { margin-top: 36px; font-size: 24px }
#profile > .psec.mt + .card { background: none; border: 0; padding: 0 }
#profile > .psec.mt + .card .artgrid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px }

@media (max-width: 900px) {
  .dos { grid-template-columns: minmax(0, 1fr) }
  .prail { position: static }
  .stat .v { font-size: 30px }
}

/* the scope toggles and the tools follow the page gold, not the class colour */
.ph .pt-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.ph .pt-acts .psearch { min-width: 220px }
@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .stat { border-right: 0; border-bottom: 1px solid var(--border); padding: 14px 12px }
  .stat .v { font-size: 26px }
}

/* an empty Performance tab fills the column down to the end of the rail, message centred */
.dos { align-items: stretch }
.prail { align-self: start }
.pmain { display: flex; flex-direction: column; min-height: 100% }
.pmain .ppane:not([hidden]) { flex: 1; display: flex; flex-direction: column }
.pmain .emptyperf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center }