:root {
  --bg: #0f1116;
  --bg-raised: #171a23;
  --bg-card: #1b1f2a;
  --bg-card-hover: #212636;
  --border: #2b3040;
  --border-soft: #23283a;
  --text: #e8e6df;
  --text-dim: #aba49e;
  --text-faint: #7d7570;
  /* Fire/ember brand accent, color-matched to the guild's own Eminence
     artwork (sampled directly from it, not eyeballed) — these two vars
     drive nearly every highlight, border, and heading color across the
     site, so retuning them here reskins the whole app in one place.
     --arcane and --fel are the artwork's secondary magic-glow colors,
     used only as rare decorative accents (never a primary fill). */
  --gold: #c8401f;
  --gold-bright: #ff9736;
  --arcane: #8b5cf6;
  --fel: #6fbf3c;
  --accent: #4f7cff;
  --danger: #e0555a;
  --danger-bg: #3a1f22;
  --success: #3fcf7f;

  --q-poor: #9d9d9d;
  --q-common: #e8e6df;
  --q-uncommon: #3fdc4a;
  --q-rare: #3f9dff;
  --q-epic: #c165f2;
  --q-legendary: #ff8a1e;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 4px 18px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Avenir Next", Avenir, Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  /* Backstop for mobile: without this, one too-wide table/grid anywhere on
     the page silently widens the whole layout viewport instead of scrolling
     itself, forcing the visitor to pinch-zoom the entire page just to reach
     it. Individual wide components (tables, the raid comp grid) still get
     their own overflow-x:auto so their content stays reachable. */
  overflow-x: hidden;
}

.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); font-size: 0.85em; }

/* ---------- Top bar ---------- */
.topbar {
  background:
    radial-gradient(1100px 200px at 15% -40%, rgba(200,64,31,0.16), transparent 65%),
    radial-gradient(600px 160px at 100% 120%, rgba(111,191,60,0.05), transparent 70%),
    radial-gradient(500px 140px at -5% 110%, rgba(139,92,246,0.045), transparent 70%),
    linear-gradient(180deg, #1a1d28, #12141c 85%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(200,64,31,0.15), 0 8px 24px rgba(0,0,0,0.35);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  display: block;
  width: 50px; height: 50px;
  flex-shrink: 0;
  background: url('../img/favicon.png') center / cover no-repeat;
  border: 1px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(200,64,31,0.35), inset 0 0 10px rgba(0,0,0,0.4);
}
.brand-text h1 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(200,64,31,0.3);
}
.brand-text p { margin: 0; font-size: 0.85rem; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.phase-pill {
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(200,64,31,0.16), rgba(200,64,31,0.04));
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 0 10px rgba(200,64,31,0.14);
}

/* One combined identity pill (Discord + officer, was two separate
   buttons) with a small dropdown for whichever sign-in/profile actions
   currently apply. */
.identity-pill-wrap { position: relative; }
/* Deliberately NOT .btn-primary (dark text on a bright fill) — that's what
   made this unreadable before. Same bordered/translucent treatment as the
   phase pill instead: light gold text on a dark background reads clearly
   in every state, including the brief moment between page load and the
   first renderChrome() paint. */
.identity-pill {
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(200,64,31,0.18), rgba(200,64,31,0.05));
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 0 10px rgba(200,64,31,0.14);
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.identity-pill::after { content: '▾'; font-size: 0.7em; opacity: 0.85; color: inherit; }
.identity-pill:hover {
  color: #ffdbb0;
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(200,64,31,0.28), rgba(200,64,31,0.10));
  box-shadow: 0 0 14px rgba(255,151,54,0.32);
}
.identity-pill:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  color: #ffe3c2;
}
/* Signed in (officer and/or Discord) — same bordered pill, just a touch
   brighter/stronger so it reads as "active" without becoming a filled
   block again. */
.identity-pill.is-active {
  color: #ffe3c2;
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(200,64,31,0.32), rgba(200,64,31,0.13));
}
.identity-pill.menu-open {
  color: #ffe3c2;
  border-color: var(--gold-bright);
  box-shadow: 0 0 14px rgba(255,151,54,0.4);
}
.identity-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: linear-gradient(165deg, var(--bg-card-hover), var(--bg-card));
  border: 1px solid var(--border-soft);
  border-top: 1px solid rgba(200,64,31,0.25);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 30;
}
.identity-menu[hidden] { display: none; }
.identity-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
}
.identity-menu-item[hidden] { display: none; }
.identity-menu-item:hover { background: rgba(200,64,31,0.14); color: var(--gold-bright); }

.tabs {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  gap: 4px;
  padding: 0 20px;
  overflow-x: auto;
}
.tab {
  position: relative;
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 10px 16px;
  font-size: 0.92rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  border-radius: 6px 6px 0 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.tab.active {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
  box-shadow: 0 1px 8px -1px rgba(255,151,54,0.65);
  text-shadow: 0 0 10px rgba(200,64,31,0.4);
}
.tab-badge {
  display: inline-block;
  min-width: 16px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  vertical-align: 2px;
  box-shadow: 0 0 6px rgba(224,85,90,0.5);
}
.tab-badge[hidden] { display: none; }

/* ---------- Layout ---------- */
.app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}
.view { display: none; }
.view.active { display: block; }

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.section-header h2 { margin: 0; padding-left: 10px; border-left: 3px solid var(--gold); font-size: 1.15rem; color: var(--text); }

.card {
  background: linear-gradient(165deg, var(--bg-card-hover) 0%, var(--bg-card) 22%, var(--bg-card) 65%, var(--bg-raised) 100%);
  border: 1px solid var(--border-soft);
  border-top: 1px solid rgba(200,64,31,0.16);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.03);
}
.card > h3:first-child, .card > h3:first-of-type { color: var(--gold-bright); margin-top: 0; }
.grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat {
  background: linear-gradient(165deg, var(--bg-card-hover) 0%, var(--bg-raised) 60%);
  border: 1px solid var(--border-soft);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.stat .num { font-size: 1.8rem; font-weight: 800; color: var(--gold-bright); text-shadow: 0 0 14px rgba(200,64,31,0.35); margin: 3px 0; }
.stat .label { font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }

/* Home hero is the guild's banner — the Eminence artwork as a cover
   background with a scrim fading to the card's solid color, so the
   welcome text/next-raid line sit on readable ground at the bottom of
   the image. Kept short — the Guild Announcement lives in its own card
   just below, not stacked inside this one. */
.dashboard-hero {
  position: relative;
  text-align: center;
  padding: 32px 20px 24px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(6,4,4,0.3) 0%, rgba(6,4,4,0.8) 45%, var(--bg-card) 90%),
    url('../img/eminence-banner.jpg') center 22% / cover no-repeat;
}
/* A soft rounded backdrop sits directly behind the text block itself
   (on top of the big scrim) so the banner reads as one intentional
   "title card" rather than text merely floating over an image. */
.hero-text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  max-width: 620px;
  padding: 14px 22px 4px;
  background: linear-gradient(180deg, transparent, rgba(6,4,4,0.4) 55%, rgba(6,4,4,0.55));
  border-radius: var(--radius-lg);
}
.hero-kicker {
  width: 42px; height: 3px;
  border-radius: 999px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow: 0 0 8px rgba(255,151,54,0.5);
}
.dashboard-guild-name { margin: 0; font-size: 2.2rem; color: var(--gold-bright); letter-spacing: 0.02em; text-shadow: 0 2px 12px rgba(0,0,0,0.9); }
.dashboard-realm { margin: 6px 0 0; font-size: 1rem; text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
.hero-next-raid { margin: 4px 0 0; text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
.nav-stat {
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.nav-stat:hover { border-color: var(--gold); background: var(--bg-card-hover); box-shadow: 0 0 0 1px rgba(200,64,31,0.25), 0 4px 14px rgba(200,64,31,0.14); transform: translateY(-1px); }
/* Officer Action Center mini-stats: nothing to do reads as subdued,
   something to do reads as a clear attention state. */
.stat-zero { opacity: 0.55; border-top-color: var(--border-soft); }
.stat-zero .num { color: var(--text-dim); text-shadow: none; }
.stat-attn { border-top-color: var(--gold-bright); box-shadow: 0 0 0 1px rgba(255,151,54,0.18), 0 0 14px rgba(255,151,54,0.16); }
.stat-attn .num { color: var(--gold-bright); text-shadow: 0 0 10px rgba(255,151,54,0.45); }
.nav-stat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nav-stat-title { font-size: 1.02rem; font-weight: 700; color: var(--gold-bright); }
.nav-stat-icon-badge, .card-icon-badge {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 14px;
  background: linear-gradient(160deg, rgba(200,64,31,0.24), rgba(200,64,31,0.06));
  border: 1px solid rgba(200,64,31,0.35);
}
.card-icon-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-icon-header h3 { margin: 0; color: var(--gold-bright); }
.progress-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  margin-top: 8px;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,151,54,0.55);
  transition: width 0.3s ease;
}
.readiness-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.readiness-pct { font-weight: 700; color: var(--gold-bright); font-size: 0.9rem; }
.missing-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  font-size: 0.76rem;
}
.chip-more {
  position: relative;
  cursor: help;
  border-color: var(--gold);
  color: var(--gold-bright);
}
.chip-more::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-raised);
  border: 1px solid var(--gold);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 400;
  white-space: normal;
  width: max-content;
  max-width: 260px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 100;
}
.chip-more:hover::after, .chip-more:focus::after { opacity: 1; visibility: visible; }

.activity-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.activity-filter-btn { cursor: pointer; font: inherit; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.activity-filter-btn.active { border-color: var(--gold); color: var(--gold-bright); background: rgba(200,64,31,0.16); }
.activity-icon { flex-shrink: 0; font-size: 0.9rem; }

/* ---------- Buttons & inputs ---------- */
.btn {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--bg-card-hover); border-color: var(--gold); }
.btn-primary { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: var(--gold); color: #1a0e08; font-weight: 700; box-shadow: 0 2px 10px rgba(200,64,31,0.25); }
.btn-primary:hover { filter: brightness(1.12); box-shadow: 0 2px 16px rgba(200,64,31,0.45); }
.btn-ghost { background: transparent; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }
.btn-small { padding: 4px 9px; font-size: 0.78rem; border-radius: 6px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

input[type="text"], input[type="password"], input[type="number"], select, textarea {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 0.88rem;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,64,31,0.18);
}
textarea { resize: vertical; min-height: 90px; }
.announce-textarea {
  background: linear-gradient(165deg, var(--bg-raised), var(--bg-card));
  border-color: var(--border-soft);
}
label { font-size: 0.8rem; color: var(--text-dim); display: block; margin-bottom: 4px; }
.field { margin-bottom: 12px; }
.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.field-row > .field { flex: 1; min-width: 140px; }

/* ---------- Quality colors ---------- */
.q-poor { color: var(--q-poor); }
.q-common { color: var(--q-common); }
.q-uncommon { color: var(--q-uncommon); }
.q-rare { color: var(--q-rare); }
.q-epic { color: var(--q-epic); }
.q-legendary { color: var(--q-legendary); }

.q-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.wh-icon {
  display: inline-block;
  width: 20px; height: 20px;
  margin-right: 6px;
  border-radius: 4px;
  vertical-align: middle;
  overflow: hidden;
}
.wh-icon-lg, .q-dot-lg {
  width: 36px; height: 36px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-right: 0;
}
.wh-icon-lg { border: 2px solid var(--border-soft); }
.wh-icon-lg.q0 { border-color: var(--q-poor); }
.wh-icon-lg.q1 { border-color: var(--q-common); }
.wh-icon-lg.q2 { border-color: var(--q-uncommon); }
.wh-icon-lg.q3 { border-color: var(--q-rare); }
.wh-icon-lg.q4 { border-color: var(--q-epic); }
.wh-icon-lg.q5 { border-color: var(--q-legendary); }
.q-dot-lg { background: var(--bg-card); border: 2px dashed var(--border-soft); }
.class-icon {
  width: 18px; height: 18px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 3px;
  border: 1px solid var(--border-soft);
}
.class-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.class-pick-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 8px 12px;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}
.class-pick-btn .class-icon { width: 22px; height: 22px; margin-right: 0; }
.class-pick-btn:hover { border-color: var(--gold); }
.class-pick-btn.active { border-color: var(--gold); background: var(--bg-card-hover); color: var(--gold-bright); }
.wishlist-os-label { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--text-dim); flex-shrink: 0; }
.item-search-results { max-height: 340px; overflow-y: auto; margin-top: 8px; }
.wishlist-search-row { cursor: pointer; }
.wishlist-search-row:hover { background: var(--bg-card-hover); }

/* Bench: roomy wrap-around chips, still boxed (not pills) so they read as
   "slots" consistent with the group columns below. */
.raid-group-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.raid-chip {
  --class-color: var(--border-soft);
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--class-color);
  border-radius: var(--radius-sm);
  padding: 6px 10px 6px 8px;
  font-size: 0.85rem;
  max-width: 100%;
}
.raid-chip[draggable="true"] { cursor: grab; }
.raid-chip[draggable="true"]:hover { border-color: var(--class-color); background: var(--bg-card-hover); }
.raid-chip.dragging { opacity: 0.35; }
/* Same [data-tooltip] convention as .attendance-dot — now on the whole
   chip too, so hovering anywhere on a red "absent" tile explains why,
   not just the tiny status dot inside it. */
.raid-chip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 400;
  white-space: normal;
  width: max-content;
  max-width: 220px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 100;
}
.raid-chip[data-tooltip]:hover::after, .raid-chip[data-tooltip]:focus::after { opacity: 1; visibility: visible; }
/* Attendance status — never replaces the class color on the left edge,
   just supplements it (§11: "do not replace the player's class color").
   One small dot, same footprint as penaltyDot, so a tile's size never
   changes with its status — full detail (late time, absence reason) is a
   hover/focus tooltip, same [data-tooltip] convention as penaltyDot. */
.raid-chip-absent { border-color: rgba(224,85,90,0.5); background: var(--danger-bg); }
.attendance-dot {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: 2px;
  border-radius: 50%;
  cursor: help;
}
.attendance-dot-confirmed { background: var(--success); box-shadow: 0 0 0 2px rgba(63,207,127,0.15); }
.attendance-dot-awaiting { background: var(--text-faint); box-shadow: 0 0 0 2px rgba(125,117,112,0.15); }
.attendance-dot-late { background: #e8b93f; box-shadow: 0 0 0 2px rgba(232,185,63,0.18); }
.attendance-dot-absent { background: var(--danger); box-shadow: 0 0 0 2px var(--danger-bg); }
.attendance-dot::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 400;
  white-space: normal;
  width: max-content;
  max-width: 220px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 100;
}
.attendance-dot:hover::after, .attendance-dot:focus::after { opacity: 1; visibility: visible; }
/* One confirmation prompt for the whole comp sheet — not a button per
   tile — so the sheet's layout stays put as raiders confirm. */
.confirm-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: rgba(200,64,31,0.1);
  border: 1px solid rgba(200,64,31,0.3);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.85rem;
}
.raid-events-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.raid-event-chip { cursor: pointer; font: inherit; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.raid-event-chip.active { border-color: var(--gold); color: var(--gold-bright); background: rgba(200,64,31,0.16); }
.raid-chip-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.raid-chip .class-icon { width: 16px; height: 16px; margin-right: 0; flex-shrink: 0; }
.os-toggle {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-faint);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 5px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1.3;
}
.os-toggle:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.os-toggle.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.os-toggle:disabled { cursor: default; opacity: 0.55; }
.raid-slot-empty {
  display: flex; align-items: center; justify-content: center;
  width: 90px; height: 32px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  font-size: 0.8rem;
}

.raid-team-bench {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.raid-team-bench h3 {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); margin: 0 0 4px;
}
/* 5 groups side by side needs real width per column to stay usable for
   dragging players — on a phone that's wider than the screen, so the grid
   scrolls horizontally within its own box instead of squeezing groups down
   to unusable width or blowing out the page. */
.raid-team-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.raid-group-col {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 8px;
}
.raid-group-col-header {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gold); text-align: center;
  padding-bottom: 7px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.raid-group-col-slots {
  display: flex; flex-direction: column; gap: 6px; min-height: 20px;
  border-radius: var(--radius-sm);
  transition: background 0.12s ease;
}
.raid-group-col-slots.drop-target { background: rgba(200,64,31,0.08); outline: 1px dashed var(--gold); outline-offset: 2px; }
.raid-chip.drop-target-chip { box-shadow: 0 -2px 0 0 var(--gold-bright); }
.raid-group-col-slots .raid-chip { width: 100%; }
.raid-slot-empty-sm {
  height: 30px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-sm);
}
.raid-group-slots.drop-target { background: rgba(200,64,31,0.06); outline: 1px dashed var(--gold); outline-offset: 4px; border-radius: var(--radius-sm); }

.roster-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.roster-table th {
  text-align: left; padding: 8px 10px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gold); border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}
.roster-table th:first-child { border-top-left-radius: var(--radius-sm); }
.roster-table th:last-child { border-top-right-radius: var(--radius-sm); }
.roster-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  vertical-align: middle;
}
.roster-table td:last-child { border-right: none; }
.roster-table tr:nth-child(even) td { background: rgba(255,255,255,0.014); }
.roster-cell {
  --class-color: var(--border-soft);
  display: flex; align-items: center; gap: 5px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--class-color);
  background: var(--bg-raised);
  font-size: 0.88rem;
}
.roster-cell-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.roster-cell-team {
  flex-shrink: 0;
  font-size: 0.66rem; font-weight: 600;
  color: var(--text-faint);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}
.roster-cell-clickable { cursor: pointer; }
.roster-cell-clickable:hover { border-color: var(--class-color); background: var(--bg-card-hover); }
.roster-cell-profile-btn {
  position: relative;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0 2px;
  border-radius: 4px;
  line-height: 1;
}
.roster-cell-profile-btn:hover { color: var(--gold-bright); background: rgba(255,255,255,0.06); }
/* Same [data-tooltip] hover/focus convention as .attendance-dot/.penalty-dot. */
.roster-cell-profile-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 400;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 100;
}
.roster-cell-profile-btn:hover::after, .roster-cell-profile-btn:focus::after { opacity: 1; visibility: visible; }
.profile-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  object-fit: cover;
  flex-shrink: 0;
}
.sixty-embed {
  width: 100%;
  height: 75vh;
  min-height: 500px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-raised);
  margin-top: 8px;
}
.roster-cell-empty {
  height: 30px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-sm);
  opacity: 0.5;
}
.wishlist-os-label input[type="checkbox"] { width: 16px; height: 16px; }
.wishlist-note-input { flex: 1 1 160px; min-width: 120px; }
.q-dot.q-poor { background: var(--q-poor); }
.q-dot.q-common { background: var(--q-common); }
.q-dot.q-uncommon { background: var(--q-uncommon); }
.q-dot.q-rare { background: var(--q-rare); }
.q-dot.q-epic { background: var(--q-epic); }
.q-dot.q-legendary { background: var(--q-legendary); }

.raid-section-title {
  font-size: 1.3rem;
  color: var(--gold-bright);
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
}
.raid-section-title:first-of-type { margin-top: 6px; }

/* ---------- Boss / item groups ---------- */
.boss-group { margin-bottom: 22px; }
.boss-title {
  font-size: 0.95rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.item-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.item-card.raid-mode-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer;
}
.item-card.raid-mode-row:hover { border-color: var(--gold); }
.raid-mode-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.raid-mode-main .item-name { display: block; }
.raid-mode-main .item-meta { display: block; margin-top: 2px; }
.item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.item-name { font-weight: 700; font-size: 1rem; }
.item-meta { font-size: 0.78rem; color: var(--text-faint); }

.priority-list { list-style: none; margin: 12px 0 0; padding: 0; }
.priority-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 7px;
  background: var(--bg-card);
  margin-bottom: 6px;
}
.priority-row[draggable="true"] { cursor: grab; }
.priority-row.dragging { opacity: 0.4; }
/* A priority-row that's actually a nav link to something else (e.g. "pick
   a character") — distinct from the drag-to-reorder rows above, which
   already communicate their own affordance via the grab cursor. */
.priority-row-clickable {
  --class-color: var(--border-soft);
  cursor: pointer;
  border-left: 3px solid var(--class-color);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.priority-row-clickable:hover { background: var(--bg-card-hover); border-color: var(--class-color); }
.row-chevron { color: var(--text-faint); font-size: 1.15rem; flex-shrink: 0; line-height: 1; }
.priority-row-clickable:hover .row-chevron { color: var(--gold-bright); }
.priority-rank {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text);
  font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.priority-row:first-child .priority-rank { background: var(--gold); color: #1a1508; font-weight: 700; }
.priority-char { font-weight: 600; }
.priority-sub { color: var(--text-faint); font-size: 0.78rem; }
.priority-row .spacer { flex: 1; }
.drag-handle { color: var(--text-faint); cursor: grab; padding: 0 4px; }
input.rank-input {
  width: 44px; flex-shrink: 0;
  text-align: center;
  padding: 4px 2px;
  font-weight: 700;
}

.received-strike { text-decoration: line-through; opacity: 0.6; }
.received-check { color: var(--success); font-weight: 700; margin-left: 3px; }

select.symbol-select {
  width: 108px; flex-shrink: 0;
}

.empty-note {
  color: var(--text-faint);
  font-size: 0.85rem;
  font-style: italic;
  padding: 8px 0;
}

/* ---------- Voting ---------- */
.vote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.vote-cell {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 8px 10px;
}
.vote-cell .officer-name { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 4px; }
.vote-cell select { font-size: 0.82rem; padding: 5px 7px; }
.consensus-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.consensus-agree { background: rgba(63,207,127,0.15); color: var(--success); }
.consensus-split { background: rgba(224,85,90,0.15); color: var(--danger); }
.consensus-pending { background: rgba(154,160,180,0.15); color: var(--text-dim); }

/* ---------- Table (assignments) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius); }
table.sheet { border-collapse: collapse; width: 100%; min-width: 480px; }
table.sheet th, table.sheet td {
  border-bottom: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  padding: 8px 10px;
  font-size: 0.85rem;
  text-align: left;
  white-space: nowrap;
}
table.sheet th {
  background: var(--bg-raised);
  color: var(--gold-bright);
  position: sticky; top: 0;
}
table.sheet td[contenteditable="true"] { cursor: text; }
table.sheet td[contenteditable="true"]:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
table.sheet tr:hover td { background: rgba(255,255,255,0.02); }

/* ---------- Modals ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(5,6,10,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow);
  max-height: 88vh;
  overflow-y: auto;
}
.modal.modal-wide { max-width: 820px; }
.modal h2 { margin-top: 0; color: var(--gold-bright); font-size: 1.1rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.error { color: var(--danger); font-size: 0.85rem; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 200;
  font-size: 0.88rem;
}
.toast.error { border-color: var(--danger); color: var(--danger); }
.toast.success { border-color: var(--success); color: var(--success); }

/* ---------- Import mapping table ---------- */
.map-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.map-table th, .map-table td { padding: 6px 8px; font-size: 0.8rem; border-bottom: 1px solid var(--border-soft); }
.preview-scroll { max-height: 220px; overflow: auto; border: 1px solid var(--border-soft); border-radius: 8px; margin-top: 10px; }

/* ---------- Boss chip nav ---------- */
.boss-chip-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.chip {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { color: var(--gold-bright); border-color: var(--gold); }
.chip-active { color: #1a1508; background: var(--gold); border-color: var(--gold); font-weight: 700; }
.chip-active:hover { color: #1a1508; background: var(--gold-bright); }
.spacer2 { flex: 1; }

/* ---------- Boss sections (collapsible) + ranking table ---------- */
.boss-section { margin-bottom: 18px; }
.boss-section-head {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  padding: 6px 2px 10px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left;
}
.boss-section-head h3 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.boss-section-head .chevron { color: var(--text-faint); font-size: 0.75rem; }
.boss-section-head:hover h3 { color: var(--gold-bright); }
/* The 5-rank table doesn't fit a phone's width — let it scroll internally
   rather than widening the page (see html/body overflow-x above). */
.boss-section-body { overflow-x: auto; }

table.rank-table { border-collapse: collapse; width: 100%; }
table.rank-table th, table.rank-table td {
  padding: 9px 10px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}
table.rank-table th {
  color: var(--text-faint);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
table.rank-table th:nth-child(n+3), table.rank-table td:nth-child(n+3) { text-align: center; }
tr.rank-row { cursor: pointer; }
tr.rank-row:hover td { background: var(--bg-card-hover); }
tr.rank-detail-row td { background: var(--bg-raised); padding: 16px; border-bottom: 1px solid var(--border-soft); cursor: default; }
.more-link { color: var(--accent); font-size: 0.8rem; text-decoration: none; }
.more-link:hover { text-decoration: underline; }

.vote-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
}
.vote-dot.consensus-pending { background: var(--text-faint); }
.vote-dot.consensus-agree { background: var(--success); }
.vote-dot.consensus-split { background: var(--danger); }

.item-detail .priority-list { margin-top: 0; }

.locked-note {
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: 4px;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-dim);
  margin-left: 6px;
}
.badge-pending { border-color: var(--accent); color: var(--accent); }
.attendance-status-badge-attended { border-color: var(--success); color: var(--success); }
.attendance-status-badge-late { border-color: #e8b93f; color: #e8b93f; }
.attendance-status-badge-absent { border-color: var(--danger); color: var(--danger); }
.attendance-status-badge-noshow { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.badge-penalty {
  border-color: var(--danger); color: var(--danger); background: var(--danger-bg); cursor: help;
  position: relative;
}
.badge-penalty::after,
.penalty-dot::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-raised);
  border: 1px solid var(--danger);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 400;
  white-space: normal;
  width: max-content;
  max-width: 260px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 100;
}
.badge-penalty:hover::after,
.badge-penalty:focus::after,
.penalty-dot:hover::after,
.penalty-dot:focus::after {
  opacity: 1;
  visibility: visible;
}
.penalty-dot {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--danger-bg);
  cursor: help;
}

@media (max-width: 640px) {
  .brand-text h1 { font-size: 1.1rem; }
  .item-head { flex-direction: column; align-items: flex-start; }
  .identity-pill { padding: 6px 12px; font-size: 0.76rem; }
  .identity-menu { right: auto; left: 0; }
  .tour-card, .tip-bubble { max-width: calc(100vw - 24px); }
}

/* -------------------------------------------------------- First-visit tour
   The page stays fully visible and usable underneath — the overlay itself
   ignores pointer events, only the small card captures clicks, so nothing
   about normal site use is blocked while the tour is open. */
.tour-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 500; }
.tour-ring {
  position: fixed;
  border: 2px solid var(--gold-bright);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(255,151,54,0.22), 0 0 18px rgba(255,151,54,0.45);
  pointer-events: none;
  transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease;
  z-index: 501;
}
.tour-card {
  position: fixed;
  width: 300px;
  max-width: calc(100vw - 20px);
  background: var(--bg-raised);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  pointer-events: auto;
  z-index: 502;
  transition: left 0.2s ease, top 0.2s ease;
}
.tour-card-centered {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
}
.tour-progress { font-size: 0.7rem; color: var(--text-faint); font-weight: 600; letter-spacing: 0.02em; margin-bottom: 4px; }
.tour-card h3 { margin: 0 0 8px; color: var(--gold-bright); font-size: 1.05rem; }
.tour-card p { margin: 0 0 10px; color: var(--text-dim); font-size: 0.85rem; line-height: 1.45; white-space: pre-line; }
.tour-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }

/* -------------------------------------------------------- Profile discovery tip
   Same visual language as the tour card but lighter — no ring, no dimming,
   just a small arrow-anchored callout on the 👤 icon. */
.tip-bubble {
  position: fixed;
  width: 240px;
  max-width: calc(100vw - 20px);
  background: var(--bg-raised);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  z-index: 502;
}
.tip-bubble h4 { margin: 0 0 6px; color: var(--gold-bright); font-size: 0.9rem; }
.tip-bubble p { margin: 0 0 10px; color: var(--text-dim); font-size: 0.8rem; line-height: 1.4; }