/* paddezcraft — "Torchlit Hold" theme.
   Original iconography and palette; deliberately avoids any Blizzard/WoW
   trademarked art or wordmarks. Single fixed dark-fantasy theme by design —
   this isn't meant to adapt to light mode. */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap');

/* Every page shares this stylesheet, so this applies site-wide: cross-fades
   between full page navigations (e.g. clicking between admin console
   subpages) instead of the browser's default hard cut. Both the outgoing and
   incoming document need this rule for the transition to activate, which is
   automatically true here since it's the one shared stylesheet. Pure
   progressive enhancement - browsers without support just ignore it and fall
   back to today's instant navigation, nothing to feature-detect. */
@view-transition {
  navigation: auto;
}

:root {
  color-scheme: dark;

  --void: #0a0806;
  --stone-1: #17120d;
  --stone-2: #211a12;
  --stone-3: #2c2216;

  --gold-dim: #7a5f22;
  --gold: #c9a227;
  --gold-bright: #f0d27a;

  --ember: #ff7a3d;
  --blood: #a23c3c;
  --blood-bright: #e2a3a3;
  --emerald: #4c8f6c;
  --emerald-bright: #b9e6cd;

  --ink: #ece3cf;
  --ink-muted: #b3a488;

  --radius: 10px;
  --border-hairline: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);

  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body: 'Spectral', Georgia, 'Iowan Old Style', serif;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(ellipse 60% 50% at 50% -10%, color-mix(in srgb, var(--ember) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, color-mix(in srgb, var(--gold-dim) 18%, transparent), transparent 70%),
    repeating-linear-gradient(135deg, var(--stone-1) 0 2px, var(--stone-2) 2px 4px),
    var(--void);
  background-attachment: fixed;
}

/* Faint drifting embers — purely decorative, disabled for reduced-motion. */
.embers {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.embers span {
  position: absolute;
  bottom: -5%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 6px 1px var(--ember);
  opacity: 0;
  animation: rise 9s linear infinite;
}

.embers span:nth-child(1) { left: 12%; animation-delay: 0s; }
.embers span:nth-child(2) { left: 28%; animation-delay: 2.2s; }
.embers span:nth-child(3) { left: 47%; animation-delay: 4.8s; }
.embers span:nth-child(4) { left: 63%; animation-delay: 1.4s; }
.embers span:nth-child(5) { left: 79%; animation-delay: 6.1s; }
.embers span:nth-child(6) { left: 90%; animation-delay: 3.6s; }

@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(-100vh) translateX(12px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .embers { display: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

main {
  position: relative;
  z-index: 1;
  width: min(30rem, 100%);
  min-width: 0;
}

.hold {
  position: relative;
  min-width: 0;
  background: linear-gradient(160deg, var(--stone-3), var(--stone-2) 60%, var(--stone-1));
  border: var(--border-hairline);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 5vw, 2.75rem);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--void) 60%, transparent),
    0 20px 60px -20px rgb(0 0 0 / 0.8),
    inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 10%, transparent);
}

.corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--gold-dim);
  opacity: 0.8;
}
.corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: var(--radius); }
.corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; border-top-right-radius: var(--radius); }
.corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; border-bottom-left-radius: var(--radius); }
.corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: var(--radius); }

.crest {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 0.75rem;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gold) 50%, transparent));
}

h1 {
  font-family: var(--font-display);
  text-align: center;
  font-size: clamp(1.5rem, 5vw, 2rem);
  letter-spacing: 0.04em;
  margin: 0;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px color-mix(in srgb, var(--gold) 35%, transparent);
}

.tagline {
  text-align: center;
  font-style: italic;
  color: var(--ink-muted);
  margin: 0.4rem 0 1.75rem;
  font-size: 0.95rem;
}

.divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: var(--gold-dim);
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

form {
  display: grid;
  gap: 1.1rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.input-wrap {
  position: relative;
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--void) 55%, var(--stone-1));
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

select option {
  background: var(--stone-1);
  color: var(--ink);
}

input[type="password"] {
  padding-right: 2.6rem;
}

input::placeholder {
  color: color-mix(in srgb, var(--ink-muted) 70%, transparent);
}

input:focus-visible,
select:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent);
  background: color-mix(in srgb, var(--void) 40%, var(--stone-1));
}

input:user-invalid {
  border-color: var(--blood);
}

.toggle-visibility {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.3rem;
  cursor: pointer;
  color: var(--ink-muted);
  display: grid;
  place-items: center;
  border-radius: 4px;
}
.toggle-visibility:hover,
.toggle-visibility:focus-visible {
  color: var(--gold-bright);
}
.toggle-visibility svg {
  width: 18px;
  height: 18px;
}

.hint {
  font-size: 0.78rem;
  color: var(--ink-muted);
}

/* Honeypot: present for bots that fill every field, invisible to real users. */
.hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

button[type="submit"] {
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--void);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 65%, var(--gold-dim));
  border: 1px solid color-mix(in srgb, var(--gold-bright) 60%, transparent);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--gold) 60%, transparent);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

button[type="submit"]:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--gold) 75%, transparent);
}

button[type="submit"]:active:not(:disabled) {
  transform: translateY(0);
}

button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: progress;
}

#msg {
  display: none;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding: 0.75rem 0.9rem;
  border-radius: 6px;
  font-size: 0.92rem;
  line-height: 1.4;
  animation: settle 0.2s ease-out;
}

#msg svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
}

#msg.ok {
  display: flex;
  background: color-mix(in srgb, var(--emerald) 18%, var(--stone-1));
  border: 1px solid color-mix(in srgb, var(--emerald) 45%, transparent);
  color: var(--emerald-bright);
}

#msg.err {
  display: flex;
  background: color-mix(in srgb, var(--blood) 20%, var(--stone-1));
  border: 1px solid color-mix(in srgb, var(--blood) 50%, transparent);
  color: var(--blood-bright);
}

@keyframes settle {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.6rem;
  max-width: min(26rem, calc(100vw - 3rem));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--void) 92%, var(--stone-2));
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink);
  pointer-events: auto;
  animation: toast-in 0.25s ease-out;
}

.toast svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.toast.ok {
  border: 1px solid color-mix(in srgb, var(--emerald) 45%, transparent);
  color: var(--emerald-bright);
}

.toast.err {
  border: 1px solid color-mix(in srgb, var(--blood) 50%, transparent);
  color: var(--blood-bright);
}

.toast a.item-name {
  font-weight: 600;
}

.toast.leaving {
  animation: toast-out 0.2s ease-in forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}

footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--ink-muted) 80%, transparent);
}

.nav-link {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.85rem;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding: 0.75rem 0.9rem;
  border-radius: 6px;
  font-size: 0.88rem;
  line-height: 1.45;
  background: color-mix(in srgb, var(--ember) 14%, var(--stone-1));
  border: 1px solid color-mix(in srgb, var(--ember) 40%, transparent);
  color: color-mix(in srgb, var(--ink) 90%, var(--ember) 10%);
}
.notice svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  color: var(--ember);
}

a {
  color: var(--gold-bright);
}
a:hover, a:focus-visible {
  color: var(--gold);
}

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-bright);
  background: color-mix(in srgb, var(--gold) 12%, var(--stone-1));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 50%;
}

.steps h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.03em;
  margin: 0.15rem 0 0.35rem;
  color: var(--gold-bright);
}

.steps p {
  margin: 0.35rem 0;
  color: var(--ink);
  line-height: 1.55;
}

code {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  background: color-mix(in srgb, var(--void) 55%, var(--stone-1));
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.88em;
}

pre {
  margin: 0.6rem 0;
  padding: 0.75rem 0.9rem;
  background: color-mix(in srgb, var(--void) 55%, var(--stone-1));
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  border-radius: 6px;
  overflow-x: auto;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--gold-bright);
}

.back-link {
  text-align: center;
  font-size: 0.9rem;
}

/* --- Admin console --- */

.admin-shell {
  width: min(72rem, 100%);
}

.feed-shell {
  width: min(50rem, 100%);
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.admin-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--gold-bright);
  margin: 0;
  text-align: left;
}

.stat-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.stat-card {
  background: linear-gradient(160deg, var(--stone-3), var(--stone-2));
  border: var(--border-hairline);
  border-radius: 8px;
  padding: 0.75rem 1.1rem;
  min-width: 9rem;
}

.stat-card .label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.stat-card .value {
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 0.15rem;
  color: var(--ink);
}

.stat-card.reg-open .value { color: var(--emerald-bright); }
.stat-card.reg-closed .value { color: var(--blood-bright); }

.toggle-reg {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, var(--stone-1));
  color: var(--gold-bright);
  cursor: pointer;
  transition: filter 0.12s ease;
}
.toggle-reg:hover { filter: brightness(1.15); }

.table-wrap {
  overflow-x: auto;
  border: var(--border-hairline);
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: var(--stone-1);
  padding: 0.65rem 0.8rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
}

tbody td {
  padding: 0.6rem 0.8rem;
  border-top: 1px solid color-mix(in srgb, var(--gold) 12%, transparent);
  vertical-align: middle;
  white-space: nowrap;
}

tbody tr:hover {
  background: color-mix(in srgb, var(--gold) 5%, transparent);
}

.pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.pill.online { background: color-mix(in srgb, var(--emerald) 25%, var(--stone-1)); color: var(--emerald-bright); }
.pill.offline { background: color-mix(in srgb, var(--ink-muted) 20%, var(--stone-1)); color: var(--ink-muted); }
.pill.banned { background: color-mix(in srgb, var(--blood) 25%, var(--stone-1)); color: var(--blood-bright); }
.pill.service { background: color-mix(in srgb, var(--gold) 20%, var(--stone-1)); color: var(--gold-bright); }

.row-actions {
  display: flex;
  gap: 0.4rem;
}

/* Feed */
.post-card {
  display: block;
  padding: 1.25rem;
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--void) 70%, var(--stone-1));
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.post-card:hover {
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
  transform: translateY(-2px);
}

.post-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold-bright);
  margin: 0 0 0.35rem 0;
}

.post-date {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}

.post-summary {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}

.post-meta {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* Reactions */
.reaction-bar {
  display: flex;
  gap: 0.5rem;
  margin: 1.5rem 0;
}

.reaction-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  background: color-mix(in srgb, var(--void) 60%, var(--stone-1));
  color: var(--ink);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.reaction-btn:hover {
  border-color: var(--gold);
}

.reaction-btn.active {
  border-color: var(--gold-bright);
  background: color-mix(in srgb, var(--gold) 20%, var(--stone-2));
  color: var(--gold-bright);
}

/* Comments */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.comment {
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  background: color-mix(in srgb, var(--void) 75%, var(--stone-1));
  border: 1px solid color-mix(in srgb, var(--gold) 12%, transparent);
  border-radius: 6px;
}

.comment-author {
  font-family: var(--font-display);
  color: var(--gold-bright);
  font-size: 0.9rem;
}

.comment-date {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-left: 0.5rem;
}

.comment-text {
  margin-top: 0.35rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.row-actions button {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.35rem 0.6rem;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  background: var(--stone-1);
  color: var(--ink);
  cursor: pointer;
}
.row-actions button:hover { border-color: var(--gold); color: var(--gold-bright); }
.row-actions button.danger:hover { border-color: var(--blood); color: var(--blood-bright); }

dialog {
  background: linear-gradient(160deg, var(--stone-3), var(--stone-2));
  color: var(--ink);
  border: var(--border-hairline);
  border-radius: var(--radius);
  padding: 1.5rem;
  width: min(24rem, 90vw);
  box-shadow: 0 20px 60px -20px rgb(0 0 0 / 0.8);
}
dialog::backdrop {
  background: color-mix(in srgb, var(--void) 70%, transparent);
  backdrop-filter: blur(2px);
}
dialog h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
  color: var(--gold-bright);
}
dialog .field { margin-bottom: 0.9rem; }
dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}
dialog .dialog-actions button {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  background: var(--stone-1);
  color: var(--ink);
}
dialog .dialog-actions button.primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 65%, var(--gold-dim));
  color: var(--void);
  border-color: transparent;
}
dialog .dialog-actions button.primary.danger {
  background: linear-gradient(180deg, var(--blood-bright), var(--blood) 70%);
}

.loading, .empty {
  text-align: center;
  padding: 2rem;
  color: var(--ink-muted);
}

/* --- Item grant search --- */

.section-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-bright);
  margin: 0 0 1rem;
}

.search-wrap {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.search-wrap input[type="text"] { flex: 1; }

.search-mode {
  display: flex;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: 6px;
  overflow: hidden;
}
.search-mode-btn {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.55rem 0.8rem;
  border: none;
  background: var(--stone-1);
  color: var(--ink-muted);
  cursor: pointer;
}
.search-mode-btn.active {
  background: color-mix(in srgb, var(--gold) 18%, var(--stone-1));
  color: var(--gold-bright);
}

.search-results {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  max-height: 16rem;
  overflow-y: auto;
  border: var(--border-hairline);
  border-radius: 8px;
}
.search-results li {
  padding: 0.55rem 0.8rem;
  border-top: 1px solid color-mix(in srgb, var(--gold) 10%, transparent);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.88rem;
}
.search-results li:first-child { border-top: none; }
.search-results li:hover { background: color-mix(in srgb, var(--gold) 6%, transparent); }
.search-results .meta { color: var(--ink-muted); font-size: 0.78rem; white-space: nowrap; }

.grant-target {
  margin-top: 1rem;
  padding: 1rem;
  border: var(--border-hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--void) 30%, transparent);
}

.item-name {
  font-weight: 600;
  text-decoration: none;
}
a.item-name:hover, a.item-name:focus-visible {
  text-decoration: underline;
}
/* Wowhead's tooltip script injects an <ins> icon before the link text -
   nudge it to sit inline with our text instead of stacking above it. */
.item-name ins {
  vertical-align: middle;
  margin-right: 0.35rem;
}

/* WoW item-quality colors (item_template.Quality 0-6), Blizzard's own client
   convention. 6/"artifact" is unused in WotLK loot but mapped for
   completeness; anything unexpected falls back to quality-1 in the JS
   mapping helper. */
.quality-0 { color: #9d9d9d; } /* poor */
.quality-1 { color: #ffffff; } /* common */
.quality-2 { color: #1eff00; } /* uncommon */
.quality-3 { color: #0070dd; } /* rare */
.quality-4 { color: #a335ee; } /* epic */
.quality-5 { color: #ff8000; } /* legendary */
.quality-6 { color: #e6cc80; } /* artifact */

.grant-set-results {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
.grant-set-results li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.grant-set-results svg { width: 16px; height: 16px; flex: none; }
.grant-set-results li.ok svg { color: var(--emerald-bright); }
.grant-set-results li.err svg { color: var(--blood-bright); }

/* --- Mobile (admin console) --- */

@media (max-width: 640px) {
  .admin-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .stat-row {
    width: 100%;
  }

  .stat-card {
    flex: 1 1 7rem;
    min-width: 7rem;
    padding: 0.6rem 0.8rem;
  }

  .stat-card .value {
    font-size: 1.15rem;
  }

  .toggle-reg {
    flex: 1 1 100%;
  }

  table {
    font-size: 0.78rem;
  }

  thead th, tbody td {
    padding: 0.5rem 0.55rem;
  }

  .row-actions {
    flex-wrap: wrap;
  }

  .search-wrap {
    flex-wrap: wrap;
  }

  .search-wrap input[type="text"] {
    flex-basis: 100%;
  }

  dialog {
    width: 92vw;
    padding: 1.1rem;
  }

  .playbook-layout {
    grid-template-columns: 1fr !important;
  }
}

/* --- Playbooks --- */

.playbook-layout {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 1.5rem;
  align-items: start;
}

.playbook-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--border-hairline);
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 1rem;
}

.playbook-nav li { border-top: 1px solid color-mix(in srgb, var(--gold) 10%, transparent); }
.playbook-nav li:first-child { border-top: none; }

.playbook-nav a {
  display: block;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--stone-1);
}
.playbook-nav a:hover { background: color-mix(in srgb, var(--gold) 8%, var(--stone-1)); }
.playbook-nav a.active {
  background: color-mix(in srgb, var(--gold) 16%, var(--stone-1));
  color: var(--gold-bright);
  font-weight: 600;
}

.playbook-content {
  min-width: 0;
  padding: 1.25rem 1.5rem;
  border: var(--border-hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--void) 30%, transparent);
  line-height: 1.6;
  overflow-x: auto;
}

.playbook-content h1, .playbook-content h2, .playbook-content h3 {
  font-family: var(--font-display);
  color: var(--gold-bright);
}
.playbook-content h1 { font-size: 1.4rem; margin-top: 0; }
.playbook-content h2 { font-size: 1.15rem; margin-top: 1.75rem; padding-top: 0.75rem; border-top: 1px solid color-mix(in srgb, var(--gold) 12%, transparent); }
.playbook-content h3 { font-size: 1rem; }

.playbook-content p, .playbook-content li { color: var(--ink); }

.playbook-content a { color: var(--gold-bright); }
.playbook-content a:hover { text-decoration: underline; }

.playbook-content code {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  background: color-mix(in srgb, var(--void) 55%, var(--stone-1));
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.85em;
}

.playbook-content pre {
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--void) 55%, var(--stone-1));
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  border-radius: 6px;
  overflow-x: auto;
}
.playbook-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--gold-bright);
}

.playbook-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 1rem 0;
}
.playbook-content th, .playbook-content td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--gold) 15%, transparent);
}
.playbook-content th {
  font-family: var(--font-display);
  color: var(--gold-bright);
  background: var(--stone-1);
}

.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

.choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.choice-btn.primary {
  color: var(--void);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 65%, var(--gold-dim));
  border: 1px solid color-mix(in srgb, var(--gold-bright) 60%, transparent);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--gold) 60%, transparent);
}

.choice-btn:not(.primary) {
  color: var(--ink);
  background: color-mix(in srgb, var(--void) 70%, var(--stone-1));
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
}

.choice-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.choice-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.choice-sub {
  font-size: 0.85rem;
  opacity: 0.85;
}

@media (max-width: 480px) {
  .choice-grid {
    grid-template-columns: 1fr;
  }
}

.paddez-nav {
  /* body uses `place-items: center`, which shrink-wraps + re-centers every
     direct child based on its own content width - main avoids this via an
     explicit width, and this needs the same treatment. Without it, the bar's
     width (and apparent position) shifts with whatever nav.js renders into
     it (guest vs member, username length, admin link present or not). */
  width: 100%;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.75rem;
  min-height: 3rem;
  padding: 0.85rem 1.75rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--void) 94%, var(--stone-2)), color-mix(in srgb, var(--void) 88%, var(--stone-1)));
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.paddez-nav a, .paddez-nav button {
  color: var(--ink-muted);
  text-decoration: none;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.paddez-nav a:hover, .paddez-nav button:hover {
  color: var(--gold-bright);
}

.paddez-nav-user {
  color: var(--ink-muted);
  margin-right: auto;
  letter-spacing: 0.04em;
}

.paddez-nav-user strong {
  color: var(--gold-bright);
}

.admin-subnav {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: var(--border-hairline);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-subnav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding-bottom: 0.6rem;
}

.admin-subnav a:hover {
  color: var(--gold-bright);
}

.admin-subnav a.active {
  color: var(--gold-bright);
  border-bottom: 2px solid var(--gold-bright);
}

.playbook-content blockquote {
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border-left: 3px solid var(--gold-dim);
  color: var(--ink-muted);
}