/* Samma formspråk som leveling-sidan (se README där): Cinzel rubriker, Marcellus etiketter och namn, Open Sans brödtext och siffror.
   Blått = det man gör (knappar, val), guld = små rubriker och rubrikernas bärande ord, klassfärger bara på namn. */
:root {
  --obsidian-950: #04070f; --obsidian-900: #0a1020; --obsidian-850: #0e1628; --obsidian-800: #121b30;
  --act-500: #1286a3; --act-600: #075a70; --act-ink: #efe5d2; --act-rim: #d4bb92;   /* loggans färger: knappar och valda lägen (det man gör) */
  --gold-300: #f0d27a; --gold-400: #d9a93f; --gold-500: #b0822a;
  --bone-50: #f4ede4; --ash-200: #c9bfb5; --ash-300: #a3978c; --stone-400: #6f655d;
  --line: rgba(244, 237, 228, .1); --line-strong: rgba(244, 237, 228, .2);
  --bg: var(--obsidian-950); --surface: var(--obsidian-900); --surface-2: var(--obsidian-850);
  --text-primary: var(--bone-50); --text-body: var(--ash-200); --text-muted: var(--ash-300); --text-faint: var(--stone-400);
  --brand: var(--gold-400);
  --font-display: "Cinzel", Georgia, serif;
  --font-ui: "Marcellus", Georgia, serif;
  --font-body: "Open Sans", system-ui, sans-serif;
  --cap: .08em;
  --fs-d1: clamp(40px, 6vw, 84px);
  --fs-d2: clamp(30px, 4.2vw, 54px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --link: 28px;   /* höjden på strecken i organisationskartan */
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; font-synthesis: none; scroll-padding-top: 70px; }
body { margin: 0; background: var(--bg); color: var(--text-body); font: 400 16px/1.7 var(--font-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
.narrow { max-width: 780px; margin-inline: auto; padding-inline: 16px; }
section { padding-block: clamp(64px, 8vw, 110px); }
section + section { border-top: 1px solid var(--line); }

.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 400 16px/1.2 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: var(--brand); -webkit-text-stroke: .45px currentColor; }
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--brand); transform: rotate(45deg); flex: none; }
.d1, .d2 { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); letter-spacing: .03em; line-height: 1.04; margin: 0 0 22px; text-wrap: balance; }
.d1 { font-size: var(--fs-d1); } .d2 { font-size: var(--fs-d2); }
.d1 span, .d2 span, .quote span { color: var(--gold-300); }
.h3 { margin: 0 0 14px; font: 400 20px/1.3 var(--font-ui); color: var(--text-primary); -webkit-text-stroke: .3px currentColor; }
.lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; margin: 0; max-width: 60ch; }
.note { margin: -6px 0 16px; font-size: 15px; color: var(--text-muted); }
.n { font-family: var(--font-body); font-weight: 700; letter-spacing: .02em; -webkit-text-stroke: 0; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 4px; border: 1px solid transparent; text-decoration: none;
  font: 400 14px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; -webkit-text-stroke: .3px currentColor; transition: transform .2s, border-color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: linear-gradient(180deg, var(--act-500), var(--act-600)); color: var(--act-ink); box-shadow: 0 0 0 1px var(--act-rim) inset, 0 10px 30px -12px rgba(10, 114, 141, .9); }
.btn--ghost { background: rgba(255, 255, 255, .02); border-color: var(--line-strong); color: var(--text-primary); }
.btn--ghost:hover { border-color: var(--text-muted); }

/* ========== TOPBAR ========== */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 16px;
  background: rgba(4, 7, 15, .72); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); }
.topbar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 17px/1 var(--font-display); letter-spacing: .14em; color: var(--text-primary); flex: none; }
.topbar__brand .logo { height: 30px; width: auto; }
.topbar nav { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.topbar nav a { font: 600 14px/1 var(--font-body); text-decoration: none; color: var(--text-muted); white-space: nowrap; }
.topbar nav a:hover { color: var(--text-primary); }

/* ========== HERO ========== */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(70px, 10vw, 130px) 0 clamp(56px, 7vw, 90px); text-align: center; }
.hero .eyebrow { justify-content: center; }
.hero .lede { margin-inline: auto; }
/* raidingsidans egen bild: tornet i solnedgången. Mörkas så att texten går att läsa mot den ljusa solen. */
.hero__art { position: absolute; inset: 0; z-index: -1; background: url("assets/hero.webp") center 55% / cover; filter: grayscale(.1) brightness(.72) contrast(1.05); opacity: .8;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 75%); }

/* ========== NAMN (klassfärg bara på namnet) ========== */
.who { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  font: 400 15px/1.4 var(--font-ui); color: var(--c, var(--text-primary)); white-space: nowrap; transition: border-color .2s, background-color .2s; }
.who::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.who:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.who--self { color: var(--text-muted); border-style: dashed; }   /* ingen utsedd: Raid Master gör det själv */
.who--self::before { background: var(--text-faint); }
.whos { display: flex; flex-wrap: wrap; gap: 6px; }

/* ========== ORGANISATIONSKARTAN ========== */
.org { margin-top: 48px; display: grid; justify-items: center; }
.tier { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; position: relative; }
.stem { width: 1px; height: var(--link); background: var(--line-strong); }
.node { position: relative; display: grid; gap: 8px; min-width: 220px; padding: 14px 16px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); text-align: left; }
.node--top { min-width: 280px; border-color: rgba(217, 169, 63, .35); box-shadow: 0 0 40px -18px rgba(217, 169, 63, .5); }
.node__role { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 400 13px/1 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: var(--brand); }
.qm { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text-muted); font: 600 12px/1 var(--font-body); flex: none; }
.qm:hover { color: var(--gold-300); border-color: var(--gold-400); }
.node__title { font: 400 20px/1.2 var(--font-ui); color: var(--text-primary); -webkit-text-stroke: .3px currentColor; }
.node__meta { font-size: 13px; color: var(--text-muted); line-height: 1.4; }

/* raidgrupperna: en kolumn per 20-/40-mannagrupp, strecken ritas som i ett släktträd */
.groups-row { --gap: 20px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); width: 100%; }
.gcol { position: relative; display: grid; align-content: start; justify-items: stretch; padding-top: var(--link); }
.gcol::before { content: ""; position: absolute; top: 0; left: calc(var(--gap) / -2); right: calc(var(--gap) / -2); border-top: 1px solid var(--line-strong); }
.gcol:first-child::before { left: 50%; } .gcol:last-child::before { right: 50%; }
.gcol:only-child::before { display: none; }
.gcol::after { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: var(--link); background: var(--line-strong); }
.gcol .stem { justify-self: center; height: 18px; }
.node--rm { cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.node--rm:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.node--rm .node__title { color: var(--gold-300); }
.ops { margin: 0; padding: 12px 14px; list-style: none; display: grid; gap: 9px; border-radius: 6px; border: 1px dashed var(--line); }
.ops li { display: grid; gap: 4px; }
.ops__fn { font-size: 13px; color: var(--text-muted); text-align: left; }
.ops__fn:hover { color: var(--text-primary); }
.ops .who { font-size: 14px; padding-block: 1px; }

.tens { width: 100%; margin-top: 56px; padding: 18px; border-radius: 8px; border: 1px dashed var(--line-strong); }
.tens__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.tens__head p { margin: 0; font-size: 14px; color: var(--text-muted); }
.tens__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }

@media (max-width: 820px) {
  .groups-row { grid-template-columns: 1fr; }
  .gcol::before { display: none; }
  .gcol + .gcol { margin-top: 12px; }
  .node, .node--top { min-width: 0; width: 100%; }
  .tier { width: 100%; }
}

/* ========== RAIDGRUPPSKORT ========== */
.gcards { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.gcard { display: grid; gap: 14px; padding: 20px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); text-align: left; cursor: pointer; transition: border-color .2s, transform .25s var(--ease); }
.gcard:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.gcard__top { display: flex; align-items: center; gap: 14px; }
.size { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 6px; flex: none; background: linear-gradient(180deg, var(--act-500), var(--act-600)); box-shadow: 0 0 0 1px var(--act-rim) inset;
  font: 700 20px/1 var(--font-body); color: var(--act-ink); }
.gcard__name { font: 400 22px/1.2 var(--font-ui); color: var(--text-primary); -webkit-text-stroke: .3px currentColor; }
.gcard__meta { font-size: 14px; color: var(--text-muted); line-height: 1.4; }
.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; }
.kv dt { font: 400 12px/1 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: var(--text-faint); }
.kv dd { margin: 0; }
.gcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-muted); }
.gcard__foot b { color: var(--text-primary); }

/* ========== ROLLER & FUNKTIONER ========== */
.cols { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
.acc { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.acc + .acc { margin-top: 10px; }
.acc summary { list-style: none; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 16px; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; grid-column: 3; grid-row: 1 / span 2; font: 400 22px/1 var(--font-body); color: var(--text-muted); transition: transform .2s; }
.acc[open] summary::after { transform: rotate(45deg); }
.acc__num { grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(217, 169, 63, .5); color: var(--gold-300); font: 700 14px/1 var(--font-body); }
.acc__name { font: 400 18px/1.25 var(--font-ui); color: var(--text-primary); -webkit-text-stroke: .25px currentColor; }
.acc__short { grid-column: 2; font-size: 14px; color: var(--text-muted); line-height: 1.45; }
.acc summary:not(:has(.acc__num)) .acc__name, .acc summary:not(:has(.acc__num)) .acc__short { grid-column: 1 / span 2; }
.acc__body { padding: 0 16px 16px; border-top: 1px solid var(--line); }

/* gemensamt för detaljtext i dragspel och sidopanel */
.prose p { margin: 14px 0 0; }
.label { margin: 20px 0 8px; font: 400 13px/1 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: var(--brand); }
.list { margin: 0; padding-left: 18px; }
.list li { margin: 3px 0; }
.list li::marker { color: var(--gold-500); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 3px 10px; border-radius: 4px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); font-size: 13px; color: var(--text-body); }
.holders { display: grid; gap: 8px; }
.holders__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.holders__ctx { font-size: 13px; color: var(--text-muted); }

.quote { margin: 90px auto 0; max-width: 900px; text-align: center; }
.quote blockquote { margin: 0; font: 600 clamp(26px, 4vw, 48px)/1.12 var(--font-display); letter-spacing: .02em; color: var(--text-primary); text-wrap: balance; }

/* ========== RAIDGRUPPENS SIDA ========== */
.gp { padding-block: 40px clamp(64px, 8vw, 110px); }
.back { display: inline-flex; gap: 8px; margin-bottom: 36px; font-size: 14px; color: var(--text-muted); text-decoration: none; }
.back:hover { color: var(--text-primary); }
.gp__head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-bottom: 14px; }
.gp__head .size { width: 72px; height: 72px; font-size: 28px; }
.gp__head .d2 { margin: 0; }
.gp__blurb { margin: 0 0 26px; max-width: 60ch; font-size: 18px; }
.gp__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; margin-bottom: 44px; border-radius: 6px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.gp__facts div { padding: 14px 16px; background: var(--surface); }
.gp__facts dt { font: 400 12px/1 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.gp__facts dd { margin: 0; color: var(--text-primary); }
.gp__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 860px) { .gp__grid { grid-template-columns: 1fr; } }

.staff { width: 100%; border-collapse: collapse; }
.staff th, .staff td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.staff thead th { font: 400 12px/1 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: var(--text-faint); }
.staff tbody th { font-weight: 400; width: 46%; }
.staff tr.key th .fnbtn { color: var(--gold-300); }
.fnbtn { font: 400 17px/1.3 var(--font-ui); color: var(--text-primary); -webkit-text-stroke: .2px currentColor; }
.fnbtn:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.fnbtn small { display: block; margin-top: 2px; font: 400 13px/1.4 var(--font-body); color: var(--text-muted); -webkit-text-stroke: 0; }
@media (max-width: 560px) {
  .staff thead { display: none; }
  .staff tr { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .staff th, .staff td { padding: 0; border: 0; width: auto; }
}

.contact { padding: 20px; border-radius: 8px; background: var(--surface); border: 1px solid rgba(217, 169, 63, .3); }
.contact h3 { margin: 0 0 8px; font: 400 20px/1.25 var(--font-ui); color: var(--text-primary); }
.contact p { margin: 0 0 14px; font-size: 15px; }

/* ========== SIDOPANEL ========== */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(2, 4, 10, .6); backdrop-filter: blur(2px); }
.drawer { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(460px, 100%); overflow-y: auto; padding: 28px 24px 40px; background: var(--obsidian-900); border-left: 1px solid var(--line-strong);
  box-shadow: -30px 0 60px -20px rgba(0, 0, 0, .7); transform: translateX(105%); transition: transform .35s var(--ease); visibility: hidden; }
.drawer.is-open { transform: none; visibility: visible; }
.drawer:focus { outline: none; }
.drawer__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--text-muted); }
.drawer__close:hover { color: var(--text-primary); }
.drawer h2 { margin: 6px 40px 10px 0; font: 600 30px/1.1 var(--font-display); color: var(--text-primary); letter-spacing: .02em; }
.drawer .eyebrow { margin-bottom: 10px; font-size: 14px; }
.drawer .lead { margin: 0; font-size: 17px; color: var(--text-primary); }
.drawer .who { font-size: 15px; }
.person-name { color: var(--c) !important; }
.duty { padding: 12px 14px; border-radius: 6px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.duty + .duty { margin-top: 8px; }
.duty a { font: 400 17px/1.3 var(--font-ui); color: var(--text-primary); text-decoration: none; }
.duty a:hover { color: var(--gold-300); }
.duty p { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }

/* ========== FOT ========== */
footer { display: flex; justify-content: center; padding: 40px 16px 56px; border-top: 1px solid var(--line); }
.foot__brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.foot__brand .logo { height: 46px; width: auto; }
.foot__brand b { display: block; font: 700 18px/1.2 var(--font-display); letter-spacing: .14em; color: var(--text-primary); }
.foot__brand small { font-size: 13px; color: var(--text-muted); }

/* ========== INLOGGNING OCH REDIGERING ========== */
.topbar__right { display: flex; align-items: center; gap: 22px; min-width: 0; }
.btn--sm { padding: 8px 14px; font-size: 13px; }
.acct { display: grid; justify-items: end; gap: 2px; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--line); line-height: 1.1; }
.acct:hover { border-color: var(--line-strong); }
.acct b { font: 400 15px/1.1 var(--font-ui); color: var(--c); }
.acct small { font-size: 11px; color: var(--text-muted); }
@media (max-width: 640px) {
  .topbar { gap: 12px; }
  .topbar__brand { font-size: 0; gap: 0; }   /* bara loggan, så att menyn får plats */
  .topbar__right { gap: 12px; }
  .topbar nav { gap: 14px; }
  .topbar nav a { font-size: 13px; }
  .acct small { display: none; }
  .wide-only { display: none; }
  #account .btn--sm { padding: 7px 10px; white-space: nowrap; }
}

.picks { display: grid; gap: 6px; }
.pick { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.pick:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .05); }
.pick .person-name { font: 400 17px/1.2 var(--font-ui); }
.pick small { font-size: 13px; color: var(--text-muted); }

.gp__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 36px; }
.gp__bar .back { margin: 0; }
.gcard--new { place-content: center; justify-items: center; text-align: center; text-decoration: none; min-height: 220px; border-style: dashed; background: transparent; gap: 8px; }
.gcard__plus { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--gold-400); color: var(--gold-300); font: 400 30px/1 var(--font-body);
  background: linear-gradient(180deg, var(--act-500), var(--act-600)); }

.ed__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: start; margin-top: 30px; }
.ed__col { display: grid; gap: 20px; }
@media (max-width: 860px) { .ed__grid { grid-template-columns: 1fr; } }
.ed__box { margin: 0; padding: 18px 18px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.ed__box legend { padding: 0 8px; font: 400 13px/1 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: var(--brand); }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 13px; color: var(--text-muted); }
.field small { font-size: 12px; color: var(--text-faint); }
.field input, .field textarea, .pickadd { width: 100%; padding: 10px 12px; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--obsidian-950); color: var(--text-primary); font: 400 15px/1.4 var(--font-body); }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .pickadd:focus { outline: none; border-color: var(--gold-400); }
.seg { display: inline-flex; border-radius: 4px; border: 1px solid var(--line-strong); overflow: hidden; width: max-content; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg input:disabled { cursor: not-allowed; }
.seg span { display: block; padding: 8px 18px; color: var(--text-muted); }
.seg label + label span { border-left: 1px solid var(--line-strong); }
.seg input:checked + span { background: linear-gradient(180deg, var(--act-500), var(--act-600)); color: var(--act-ink); }
.seg input:focus-visible + span { outline: 2px solid var(--gold-300); outline-offset: -2px; }
.seg input:disabled:not(:checked) + span { opacity: .45; }

.ed__slot { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr); gap: 8px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.ed__slot:first-child { border-top: 0; padding-top: 0; }
.ed__slot:last-child { padding-bottom: 12px; }
@media (max-width: 520px) { .ed__slot { grid-template-columns: 1fr; } }
.ed__slotname { font: 400 16px/1.25 var(--font-ui); color: var(--text-primary); }
.ed__slotname small { display: block; margin-top: 2px; font: 400 12px/1.35 var(--font-body); color: var(--text-faint); }
.ed__slot .whos { align-items: center; }
.ed__slot .who { padding-right: 4px; }
.who__x { display: grid; place-items: center; width: 20px; height: 20px; margin-left: 2px; border-radius: 50%; color: var(--text-muted); font-size: 11px; }
.who__x:hover { color: var(--text-primary); background: rgba(255, 255, 255, .1); }
.pickadd { width: auto; padding: 4px 10px; border-radius: 999px; border-style: dashed; background: transparent; color: var(--text-muted); font-size: 14px; cursor: pointer; }
.pickadd option { background: var(--obsidian-900); color: var(--text-primary); }

.ed__error { margin-top: 20px; padding: 12px 16px; border-radius: 6px; border: 1px solid rgba(224, 108, 92, .5); background: rgba(224, 108, 92, .08); color: #f1b3a9; }
.ed__error p { margin: 0; }
.ed__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn--danger { margin-left: auto; color: #f1b3a9; border-color: rgba(224, 108, 92, .4); }
.btn--danger:hover { border-color: rgba(224, 108, 92, .8); }

/* ledningen: Guild Master och Guild Leaders är samma nivå, i samma ruta */
.node--lead { gap: 12px; padding: 16px 18px; }
.node--lead .node__title { font-size: 22px; }
.lead-row { display: grid; gap: 6px; }
.lead-row__t { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 400 13px/1 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: var(--brand); }

/* borttagna grupper (bara ledningen ser dem) */
.removed:empty { display: none; }
.removed { margin-top: 36px; padding: 6px 18px 12px; border-radius: 8px; border: 1px dashed var(--line-strong); }
.removed__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.removed .label + .removed__row { border-top: 0; }
.removed__row > a { font: 400 17px/1.2 var(--font-ui); color: var(--text-muted); text-decoration: none; }
.removed__row > a:hover { color: var(--text-primary); }
.removed__meta { font-size: 13px; color: var(--text-faint); }
.removed__btns { display: flex; gap: 8px; margin-left: auto; }
.removed__btns .btn--danger, .gp__bar .btn--danger { margin-left: 0; }

/* Detaljer: fri text som Raid Master skriver */
.gp__side { display: grid; gap: 18px; align-content: start; }
.details { padding: 20px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.details h3 { margin: 0 0 4px; font: 400 20px/1.25 var(--font-ui); color: var(--text-primary); }
.details__text p { margin: 10px 0 0; font-size: 15px; white-space: pre-line; overflow-wrap: anywhere; }
.details--empty { border-style: dashed; background: transparent; }
.details--empty p { margin: 6px 0 14px; font-size: 14px; color: var(--text-muted); }

/* ========== AMBITIONSNIVÅ ========== */
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ash-300); }
.pips i.on { background: var(--bone-50); border-color: var(--bone-50); }
.amb { display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); }
.amb:hover span { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.linkish { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }
.linkish:hover { color: var(--text-primary); }
.amblist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ambcard { display: grid; gap: 8px; padding: 14px 16px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s; }
.ambcard:hover { border-color: var(--line-strong); }
.ambcard__name { font: 400 17px/1.2 var(--font-ui); color: var(--text-primary); }
.ambcard__tag { font-size: 14px; color: var(--text-muted); line-height: 1.45; }
.ambx { padding: 14px 16px; margin-top: 10px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.ambx.is-current { border-color: var(--gold-400); box-shadow: 0 0 0 1px var(--gold-400) inset; }
.ambx__head { display: flex; align-items: center; gap: 10px; }
.ambx__head b { font: 400 18px/1.2 var(--font-ui); color: var(--text-primary); }
.ambx__tag { margin: 6px 0 8px; font-size: 15px; color: var(--text-primary); }
.ambx dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
.ambx dt { color: var(--text-faint); }
.ambx dd { margin: 0; }
.ambx__groups { margin: 10px 0 0; font-size: 14px; }
.ambx__groups a { color: var(--text-primary); }
.field select { width: 100%; padding: 10px 12px; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--obsidian-950); color: var(--text-primary); font: 400 15px/1.4 var(--font-body); }

/* ========== GRUPPENS FLIKAR ========== */
.wrap--wide { max-width: 1680px; }
.gp__tabs { display: flex; gap: 6px; margin: 6px 0 30px; border-bottom: 1px solid var(--line); }
.gp__tabs a { padding: 10px 16px; margin-bottom: -1px; border-bottom: 2px solid transparent; font: 400 15px/1 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: var(--text-muted); text-decoration: none; }
.gp__tabs a:hover { color: var(--text-primary); }
.gp__tabs a[aria-current="page"] { color: var(--gold-300); border-bottom-color: var(--gold-400); }

/* ========== ASSIGNMENTS (som lootwatch) ========== */
.bd__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.bd__hint { font-size: 13px; color: var(--text-muted); }
.bd__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.bd__emptybox { display: grid; justify-items: start; gap: 14px; padding: 24px; border-radius: 8px; border: 1px dashed var(--line-strong); }
.bd__emptybox p { margin: 0; color: var(--text-muted); }
.bd__emptynote { margin-top: 18px; }
.pchip { display: inline-flex; align-items: baseline; gap: 6px; padding: 1px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font: 600 13px/1.5 var(--font-body); white-space: nowrap; }
.pchip small { font-size: 11px; font-weight: 400; opacity: .7; }
.pchip[draggable="true"] { cursor: grab; }
.pchip--role small { padding-right: 5px; margin-right: 1px; border-right: 1px solid color-mix(in srgb, var(--c) 35%, transparent); opacity: .85; font-weight: 600; }
.pchip--vacant { --c: #8a8178; border-style: dashed; }
.mk { width: 18px; height: 18px; vertical-align: -4px; margin: 0 1px; }
.bd__pool { margin-bottom: 18px; padding: 8px 16px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.bd__pool .label { margin-top: 8px; }
.bd__poolrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; }
.bd__grp { width: 70px; font-size: 12px; color: var(--text-faint); }
.is-over { outline: 2px dashed var(--gold-400); outline-offset: -2px; background: rgba(217, 169, 63, .06) !important; }

/* raiderna */
.bd__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.bd__tab { padding: 9px 16px; border-radius: 4px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .02); color: var(--text-muted); font: 400 15px/1 var(--font-ui); }
.bd__tab:hover { color: var(--text-primary); }
.bd__tab[aria-selected="true"] { background: linear-gradient(180deg, var(--act-500), var(--act-600)); color: var(--act-ink); border-color: transparent; box-shadow: 0 0 0 1px var(--act-rim) inset; }
.bd__tab--add { border-style: dashed; color: var(--text-primary); }
.bd__tabinput { padding: 8px 12px; border-radius: 4px; border: 1px solid var(--gold-400); background: var(--obsidian-950); color: var(--text-primary); font: 400 15px/1 var(--font-ui); width: 200px; }
.bd__raidctl { display: flex; gap: 14px; margin-left: auto; }
.linkish--danger:hover { color: #f1b3a9; }

/* tabellen */
.bd__wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.bd__table { border-collapse: collapse; width: 100%; font-size: 13px; }
.bd__table th, .bd__table td { padding: 6px 10px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; vertical-align: middle; }
.bd__table thead th { background: var(--obsidian-850); color: var(--text-primary); font: 400 14px/1.2 var(--font-ui); vertical-align: top; }
.bd__col { min-width: 112px; }
.bd__col:nth-child(odd) { background: color-mix(in srgb, var(--obsidian-850) 85%, #000); }
.bd__colhead { display: grid; justify-items: center; gap: 4px; position: relative; padding-top: 4px; }
.bd__colname { display: block; line-height: 1.2; text-wrap: balance; }
[data-startrename] { cursor: text; }
[data-startrename]:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.bd__boss { width: 96px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.bd__noboss { height: 48px; }
.bd__colctl { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 1px; border-radius: 4px; background: var(--obsidian-950);
  border: 1px solid var(--line); opacity: 0; transition: opacity .15s; z-index: 1; }
.bd__col:hover .bd__colctl, .bd__colctl:focus-within { opacity: 1; }
.bd__colctl button { display: grid; place-items: center; width: 22px; height: 20px; border-radius: 3px; color: var(--text-muted); font-size: 12px; }
.bd__colctl button:hover:not(:disabled) { color: var(--text-primary); background: rgba(255, 255, 255, .08); }
.bd__colctl button:disabled { opacity: .25; cursor: default; }
.bd__coladd { width: 44px; min-width: 44px; padding: 0 !important; }
.bd__coladd button { width: 30px; height: 30px; border-radius: 50%; border: 1px dashed var(--line-strong); color: var(--text-muted); font-size: 18px; }
.bd__coladd button:hover { color: var(--text-primary); border-color: var(--text-muted); }

.bd__role, .bd__player { position: sticky; z-index: 1; background: var(--obsidian-900); text-align: left !important; }
.bd__role { left: 0; width: 130px; min-width: 130px; font-weight: 400; color: var(--text-body); }
.bd__player { left: 130px; width: 160px; min-width: 160px; }
thead .bd__role, thead .bd__player { z-index: 2; background: var(--obsidian-850); font: 400 12px/1 var(--font-ui) !important; letter-spacing: var(--cap); text-transform: uppercase; color: var(--text-faint) !important; vertical-align: middle !important; }
.bd__rolecell { display: flex; align-items: center; gap: 4px; }
.bd__rolename { flex: 1; min-width: 0; }
.bd__grip { cursor: grab; color: var(--stone-400); opacity: 0; user-select: none; }
.bd__x { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 3px; color: var(--stone-400); font-size: 11px; opacity: 0; flex: none; }
.bd__x:hover { color: #f1b3a9; background: rgba(255, 255, 255, .06); }
.bd__x--big { opacity: 1; width: 28px; height: 28px; margin-left: auto; }
.bd__row:hover .bd__grip, .bd__row:hover .bd__x, .bd__x:focus-visible { opacity: 1; }
.bd__row:hover > * { background-color: color-mix(in srgb, var(--obsidian-900) 92%, #fff); }
.bd__nameinput { width: 100%; padding: 4px 6px; border-radius: 3px; border: 1px solid var(--gold-400); background: var(--obsidian-950); color: var(--text-primary); font: 400 13px/1.3 var(--font-body); }
.bd__slot { display: flex; align-items: center; gap: 4px; }
.bd__slot .pchip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bd__pick { display: flex; justify-content: space-between; width: 100%; padding: 2px 4px; border-radius: 3px; color: var(--stone-400); font-size: 12px; font-style: italic; }
.bd__pick:hover { color: var(--text-muted); background: rgba(255, 255, 255, .04); }
.bd__nobody { color: var(--text-faint); }
.bd__cell.is-editable { cursor: pointer; }
.bd__cell.is-editable:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.bd__ph { color: var(--stone-400); opacity: 0; }
.bd__cell:hover .bd__ph { opacity: 1; }
.bd__table td .pchip { margin: 1px 2px; }
.bd__sec th, .bd__sec td { background: var(--obsidian-850); text-align: left; padding: 10px; border-right: 0; }
.bd__sec th { position: sticky; left: 0; z-index: 1; font: 400 14px/1 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: var(--sec, var(--text-primary)); box-shadow: inset 3px 0 0 var(--sec); }
.bd__sec small { margin-left: 8px; font: 400 11px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text-faint); }
.bd__sec--tanks { --sec: #7ea6f2; } .bd__sec--healers { --sec: var(--bone-50); } .bd__sec--ranged { --sec: #a99cf0; } .bd__sec--melee { --sec: #e5a06a; }
.bd__add td { text-align: left !important; padding: 4px 10px; border-right: 0; }
.bd__add td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.bd__addrow { font-size: 12px; color: var(--text-muted); }
.bd__addrow:hover { color: var(--text-primary); }

/* den lilla editorn */
.bd__pop { position: fixed; z-index: 45; width: 280px; padding: 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--obsidian-900);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .8); font-size: 13px; }
.bd__popttl { margin-bottom: 8px; font: 400 15px/1.2 var(--font-ui); color: var(--text-primary); }
.bd__poplbl { display: block; margin: 8px 0 4px; font: 400 11px/1 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: var(--text-faint); }
.bd__pop select, .bd__pop input, .bd__picksearch { width: 100%; padding: 6px 8px; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--obsidian-950); color: var(--text-primary); font: 400 13px/1.3 var(--font-body); }
.bd__pop select:focus, .bd__pop input:focus { outline: none; border-color: var(--gold-400); }
.bd__popmk { display: flex; gap: 2px; margin-top: 8px; }
.bd__popmk button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; }
.bd__popmk button:hover { background: rgba(255, 255, 255, .08); }
.bd__popmk img { width: 22px; height: 22px; }
.bd__poppre { min-height: 26px; margin-top: 8px; padding: 4px 6px; border-radius: 4px; background: rgba(255, 255, 255, .03); text-align: center; }
.bd__popbtns { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.bd__picklist { max-height: 260px; overflow-y: auto; margin-top: 6px; }
.bd__pickhead { margin: 8px 0 2px; font: 400 11px/1 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: var(--text-faint); }
.bd__pickopt { display: block; width: 100%; padding: 3px 4px; border-radius: 4px; text-align: left; }
.bd__pickopt:hover { background: rgba(255, 255, 255, .06); }
.bd__pickopt--free { margin-top: 6px; padding: 6px 8px; border: 1px dashed var(--line-strong); color: var(--text-muted); font-size: 13px; }
.bd__pickopt--free b { color: var(--text-primary); font-weight: 600; }
.bd__pickopt--none { color: var(--text-muted); font-size: 13px; padding: 5px 6px; }

/* lägg till raid */
.bd__check { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; }
.bd__raidopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bd__raidopt { display: grid; gap: 2px; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); text-align: left; }
.bd__raidopt:hover { border-color: var(--gold-400); }
.bd__raidopt span { display: flex; height: 28px; margin-bottom: 4px; }
.bd__raidopt span img { width: 44px; height: 28px; object-fit: contain; margin-right: -8px; }
.bd__raidopt b { font: 400 15px/1.2 var(--font-ui); color: var(--text-primary); }
.bd__raidopt small { font-size: 12px; color: var(--text-muted); }
.bd__raidopt--tpl { width: 100%; margin-bottom: 6px; }
.bd__inline { display: flex; gap: 8px; }
.bd__inline input { flex: 1; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--obsidian-950); color: var(--text-primary); }
.tpl b { font: 400 17px/1.3 var(--font-ui); color: var(--text-primary); }
.tpl .tpl__meta { font-size: 12px; color: var(--text-faint); margin-bottom: 10px; }
.drawer textarea { width: 100%; padding: 10px 12px; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--obsidian-950); color: var(--text-primary); font: 400 12px/1.4 ui-monospace, monospace; }

/* storlek, nivå och tid som korta rader med etikett */
.node__facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: center; font-size: 13px; color: var(--text-body); }
.node__facts dt { font: 400 11px/1.6 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: var(--text-faint); }
.node__facts dd { margin: 0; }
.node__facts .pips { margin-right: 4px; }
.seg--multi { flex-wrap: wrap; }
.seg--multi span { padding: 8px 12px; }
.seg input[type="checkbox"]:checked + span { background: linear-gradient(180deg, var(--act-500), var(--act-600)); color: var(--act-ink); }
.field-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
.field input[type="time"] { color-scheme: dark; }

/* ========== SIDORNA ========== */
.page-head { padding-top: clamp(40px, 6vw, 72px); }
.topbar nav a[aria-current="page"] { color: var(--gold-300); }
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.steps li { position: relative; padding: 22px 20px 18px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.steps__n { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 12px; border-radius: 50%; border: 1px solid rgba(217, 169, 63, .5); color: var(--gold-300); font-size: 15px; }
.steps h3 { margin: 0 0 6px; font: 400 21px/1.2 var(--font-ui); color: var(--text-primary); -webkit-text-stroke: .3px currentColor; }
.steps p { margin: 0 0 10px; font-size: 15px; }
.steps .linkish { font-size: 13px; }
.steps__ten { margin: 14px 0 0; }
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.way { position: relative; display: grid; gap: 8px; padding: 24px 64px 24px 24px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; transition: border-color .2s, transform .25s var(--ease); }
.way:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.way__t { font: 400 24px/1.2 var(--font-ui); color: var(--text-primary); -webkit-text-stroke: .3px currentColor; }
.way__d { font-size: 15px; color: var(--text-muted); }
.way__go { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(180deg, var(--act-500), var(--act-600)); box-shadow: 0 0 0 1px var(--act-rim) inset; color: var(--act-ink); }

/* bild till Discord */
.bd__colimg { position: absolute; top: -4px; right: 0; width: 24px; height: 22px; border-radius: 4px; font-size: 12px; opacity: 0; transition: opacity .15s; }
.bd__col:hover .bd__colimg, .bd__colimg:focus-visible { opacity: .85; }
.bd__colimg:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.bd__colpick { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; max-height: 210px; overflow-y: auto; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); }
.bd__colpick .bd__check { margin: 0; font-size: 13px; }
.bd__check--all { grid-column: 1 / -1; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.bd__imgprev { margin: 16px 0 14px; padding: 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--obsidian-950); min-height: 80px; display: grid; place-items: center; }
.bd__imgprev img { display: block; max-width: 100%; max-height: 360px; object-fit: contain; }

/* raidgrupperna per storlek */
.gsec { margin-top: 44px; padding: 0; }
.gsec + .gsec { border-top: 0; }
.gsec__h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
  font: 400 24px/1.2 var(--font-ui); color: var(--text-primary); -webkit-text-stroke: .3px currentColor; }
.gsec__h small { font: 400 14px/1 var(--font-body); color: var(--text-muted); -webkit-text-stroke: 0; }
.gsec__note { margin: 10px 0 0; }
.gsec .gcards { margin-top: 18px; }
.gcard__blurb { margin: 0; font-size: 14px; color: var(--text-muted); }

/* läsbarhet: fast tabellbredd utan sidscroll, varannan rad randig, heltäckande klassfärg på spelaren */
.bd__wrap { overflow: hidden; }
.bd__table { table-layout: fixed; width: 100%; }
.bd__col { min-width: 0; overflow: hidden; }
.bd__colname { overflow-wrap: anywhere; hyphens: auto; }
.bd__colctl { top: 2px; }
.bd__colimg { top: 2px; }
.bd__boss { width: 100%; max-width: 96px; height: auto; aspect-ratio: 2 / 1; }
.bd__role, .bd__player { position: static; width: auto; min-width: 0; }
.bd__sec th { position: static; }
.bd__add td:first-child { position: static; }
.bd__row > * { background: var(--obsidian-900); }
.bd__row.is-alt > * { background: #141e36; }
.bd__row:hover > * { background: #1b2744; }
.bd__table td.bd__cell, .bd__table td.bd__player { overflow: hidden; }
.bd__cell .pchip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.pchip--solid { background: var(--c); color: var(--ct); border-color: transparent; font-weight: 700; }
.bd__player .pchip--solid { display: block; width: 100%; border-radius: 4px; padding: 2px 8px; overflow: hidden; text-overflow: ellipsis; }
.bd__pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: -4px 0 10px; font-size: 13px; color: var(--text-muted); }
.bd__pager b { color: var(--text-primary); font-weight: 600; }
.bd__pager button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text-primary); font-size: 18px; line-height: 1; }
.bd__pager button:hover:not(:disabled) { border-color: var(--gold-400); color: var(--gold-300); }
.bd__pager button:disabled { opacity: .3; cursor: default; }

/* kompakta brickor i rutorna, så att roll + namn ryms utan att klippas */
.bd__table td.bd__cell { padding: 5px 4px; }
.bd__cell .pchip { font-size: 12px; padding: 0 7px; gap: 4px; margin: 1px; line-height: 1.6; }
.bd__cell .pchip--role small { padding-right: 4px; font-size: 10px; }
.bd__cell { line-height: 1.5; }
.bd__slot { position: relative; }
.bd__slot .bd__x { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); background: rgba(10, 16, 32, .75); color: #fff; }
.bd__slot .bd__x:hover { background: rgba(10, 16, 32, .95); color: #f1b3a9; }
@media (max-width: 640px) {
  .bd__table th, .bd__table td { padding: 5px 4px; }
  .bd__role { font-size: 12px; }
  .bd__player .pchip--solid { padding: 2px 5px; font-size: 12px; }
  .bd__pick { font-size: 11px; }
}

/* rekrytering */
.recruit { font-size: 14px; color: var(--text-muted); }
.recruit--open { display: inline-flex; align-items: center; gap: 7px; color: var(--text-primary); font-weight: 600; }
.recruit--open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-300); box-shadow: 0 0 8px rgba(240, 210, 122, .6); }
.gcard__recruit { margin: 0; padding: 8px 10px; border-radius: 4px; border-left: 2px solid var(--gold-400); background: rgba(240, 210, 122, .05); font-size: 14px; color: var(--text-body); }
.details--recruit { border-color: rgba(217, 169, 63, .35); }
.gfilter { margin-top: 26px; font-size: 15px; cursor: pointer; }
.gfilter small { color: var(--text-muted); font-size: 13px; }
#recruitCount { margin-left: 6px; font-size: 12px; color: var(--text-faint); }
#recruitCount.is-over { color: #f1b3a9; }
/* korten i samma rad: innehållet uppe, Öppna-raden längst ner */
.gcard:not(.gcard--new) { display: flex; flex-direction: column; }
.gcard__foot { margin-top: auto; }

/* tillbaka-knapp och brödsmulor */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.crumbs__trail { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--text-muted); }
.crumbs__trail li { display: flex; align-items: center; }
.crumbs__trail li + li::before { content: "/"; margin: 0 10px; color: var(--stone-400); }
.crumbs__trail a { color: var(--text-muted); text-decoration: none; }
.crumbs__trail a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.crumbs__trail [aria-current] { color: var(--text-primary); }

/* namn utan kapslar: klassfärg + prick (grön = online på Discord, grå = offline) */
.who { display: inline-flex; align-items: center; gap: 7px; padding: 1px 0; border: 0; border-radius: 0; background: none;
  font: 400 15px/1.4 var(--font-ui); color: var(--c, var(--text-primary)); white-space: nowrap; }
.who:hover { background: none; border: 0; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c) 50%, transparent); text-underline-offset: 3px; }
.who__dot, .who::before { width: 7px; height: 7px; border-radius: 50%; background: #5d6170; flex: none; }
.who::before { content: none; }
.who.is-online .who__dot, .presence.is-online .who__dot { background: #6fd08c; box-shadow: 0 0 6px rgba(111, 208, 140, .55); }
.who--self { color: color-mix(in srgb, var(--c) 70%, var(--text-muted)); }
.who--self small { margin-left: 4px; font: 400 12px/1 var(--font-body); color: var(--text-faint); }
.whos { gap: 4px 16px; }
.ops .who { font-size: 14px; }
.presence { display: flex; align-items: center; gap: 8px; font-size: 15px !important; color: var(--text-muted) !important; }
.presence .who__dot { display: inline-block; }
.ed__slot .who { padding-right: 0; }
.classpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.classpick label { position: relative; }
.classpick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.classpick span { display: block; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--c); font: 400 15px/1 var(--font-ui); text-align: center; }
.classpick input:checked + span { background: var(--c); color: #0b0f1a; border-color: transparent; font-weight: 600; }
.classpick input:focus-visible + span { outline: 2px solid var(--gold-300); outline-offset: 2px; }

/* ========== STARTSIDAN: konceptet ========== */
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 36px; }
.level { display: flex; gap: 18px; align-items: flex-start; padding: 22px 20px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); text-align: left;
  transition: border-color .2s, transform .25s var(--ease); }
.level:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.level__letter { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 8px; background: linear-gradient(180deg, var(--act-500), var(--act-600));
  box-shadow: 0 0 0 1px var(--act-rim) inset; color: var(--act-ink); font: 600 28px/1 var(--font-display); }
.level__letter--sm { width: 32px; height: 32px; font-size: 16px; border-radius: 6px; }
.level__body { display: grid; gap: 6px; }
.level__body b { font: 400 21px/1.2 var(--font-ui); color: var(--text-primary); -webkit-text-stroke: .3px currentColor; }
.level__body > span { font-size: 15px; color: var(--text-body); }
.level__body small { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.naming { margin-top: 26px; max-width: 70ch; }
.naming p { margin: 0 0 8px; }
.gcode { display: inline-block; padding: 1px 7px; border-radius: 4px; border: 1px solid rgba(217, 169, 63, .45); color: var(--gold-300);
  font: 700 13px/1.4 var(--font-body); letter-spacing: .04em; vertical-align: middle; -webkit-text-stroke: 0; }
.gcard__name .gcode { margin-left: 6px; font-size: 12px; }

.org--titles .node--role { display: grid; gap: 4px; justify-items: center; text-align: center; min-width: 240px; cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.org--titles .node--role:hover { border-color: var(--gold-400); transform: translateY(-2px); }
.org--titles .node__title { font-size: 21px; }
.org--titles .node__meta { font-size: 14px; color: var(--text-muted); }
.node__more { font-size: 12px; color: var(--gold-300); opacity: 0; transition: opacity .2s; }
.node--role:hover .node__more, .node--role:focus-visible .node__more { opacity: 1; }
.org--titles .gcol .node { justify-self: center; width: min(100%, 320px); }
.lead-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lead-role { display: grid; gap: 2px; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line); text-align: center; }
.lead-role:hover { border-color: var(--gold-400); }
.lead-role b { font: 400 16px/1.2 var(--font-ui); color: var(--gold-300); }
.lead-role small { font-size: 12px; color: var(--text-muted); }
.org__ten { margin: 26px auto 0; text-align: center; max-width: 60ch; }
.fnsteps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.fnstep { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; width: 100%; height: 100%; padding: 16px 18px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); text-align: left; }
.fnstep:hover { border-color: var(--line-strong); }
.fnstep__n { grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(217, 169, 63, .5); color: var(--gold-300); font-size: 14px; }
.fnstep b { font: 400 18px/1.25 var(--font-ui); color: var(--text-primary); }
.fnstep span:last-child { font-size: 14px; color: var(--text-body); line-height: 1.5; }
.fnsteps__note { margin-top: 16px; }
.howto { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px; max-width: 760px; }
.howto li { display: flex; gap: 16px; align-items: flex-start; }
.howto__n { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: linear-gradient(180deg, var(--act-500), var(--act-600));
  box-shadow: 0 0 0 1px var(--act-rim) inset; color: var(--act-ink); }
.howto b { color: var(--text-primary); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 30px; }
.cta .linkish { font-size: 14px; }

/* ========== RAIDGRUPPSKORTEN SOM SPELETS GROUP FINDER ==========
   Samma panel som gruppsöket på leveling-sidan: äventyrarna på klippan, svart kant, tunn guldlinje, mörk rubriklist.
   (Föregående kortstil finns kvar ovan som .gcard; den här skriver över den.) */
.lfgcard { display: flex; flex-direction: column; gap: 0; padding: 0; border: 1px solid #000; border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(240, 210, 122, .32), 0 18px 40px -22px rgba(0, 0, 0, .9);
  background: linear-gradient(180deg, rgba(12, 9, 8, .15), rgba(12, 9, 8, .7)), url("assets/lfg-panel.webp") center 30% / cover; }
.lfgcard:hover { border-color: #000; box-shadow: inset 0 0 0 1px rgba(240, 210, 122, .6), 0 18px 40px -18px rgba(0, 0, 0, .9); }
.lfgcard__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(0, 0, 0, .6); background: rgba(0, 0, 0, .45);
  box-shadow: 0 1px 0 rgba(255, 235, 190, .05); }
.lfgcard__head b { font: 600 19px/1.2 var(--font-display); color: var(--gold-300); text-shadow: 0 1px 2px #000; letter-spacing: .02em; }
.lfgcard__head .gcode { margin: 0; }
.lfgcard__size { margin-left: auto; font: 500 13px/1 var(--font-body); color: #b9ab94; white-space: nowrap; }
.lfgcard__rows { margin: 0; }
.lfgcard__row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, .45); background: rgba(10, 8, 7, .28); text-shadow: 0 1px 2px #000; }
.lfgcard__row dt { font: 400 12px/1.2 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: #b9ab94; }
.lfgcard__row dd { margin: 0; min-width: 0; color: var(--text-primary); }
.lfgcard__seek { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--gold-300); }
.lfgcard__seek .role { width: 22px; height: 22px; background-size: 66px 22px; }
.lfgcard__seek .role--healer { background-position: -22px 0; }
.lfgcard__seek .role--dps { background-position: -44px 0; }
.lfgcard__seek > span { margin-left: 2px; }
.lfgcard__closed { color: #b9ab94; font-size: 14px; }
.lfgcard__note { margin: 0; padding: 10px 16px; background: rgba(10, 8, 7, .55); border-bottom: 1px solid rgba(0, 0, 0, .45);
  font-size: 14px; color: var(--text-body); text-shadow: 0 1px 2px #000; }
.lfgcard__note--plain { color: #b9ab94; }
.lfgcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 12px 16px;
  background: rgba(10, 8, 7, .6); border-top: 0; font-size: 13px; color: #b9ab94; }
.lfgcard__foot b { color: var(--text-primary); }
/* spelets rollikoner (samma remsa som leveling-sidan: tank · healer · dps) */
.role { display: inline-block; width: 26px; height: 26px; flex: none; background: url("assets/lfg-roles.webp") 0 0 / 78px 26px no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); vertical-align: middle; }
.role--healer { background-position: -26px 0; }
.role--dps { background-position: -52px 0; }
.details--recruit h3 { display: flex; align-items: center; gap: 6px; }
.rolepick { display: flex; flex-wrap: wrap; gap: 8px; }
.rolepick label { position: relative; }
.rolepick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rolepick span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-muted); }
.rolepick input:checked + span { border-color: var(--gold-400); color: var(--text-primary); background: rgba(217, 169, 63, .08); }
.rolepick input:not(:checked) + span .role { filter: grayscale(1) brightness(.6); }
.rolepick input:focus-visible + span { outline: 2px solid var(--gold-300); outline-offset: 2px; }
/* "Ny raidgrupp" i samma ton */
.gcard--new { border: 1px dashed rgba(240, 210, 122, .35); background: rgba(10, 8, 7, .35); }

/* ========== GRUPPENS SIDA I GROUP FINDER-STIL ==========
   Samma panel som raidgruppskorten: spelets Group Finder-bakgrund, svart kant, guldlinje, mörk rubriklist och listrader. */
.gp__head { gap: 14px 16px; align-items: center; }
.gp__head .gcode { font-size: 15px; padding: 2px 9px; }
.gp__size { font: 500 15px/1 var(--font-body); color: #b9ab94; }
.lfgpanel { padding: 0; border: 1px solid #000; border-radius: 6px; overflow: hidden;   /* section: inget sidavstånd */
  box-shadow: inset 0 0 0 1px rgba(240, 210, 122, .32), 0 18px 40px -22px rgba(0, 0, 0, .9);
  background: linear-gradient(180deg, rgba(12, 9, 8, .2), rgba(12, 9, 8, .78)), url("assets/lfg-panel.webp") center 30% / cover; }
.lfgpanel__head { padding: 12px 16px; border-bottom: 1px solid rgba(0, 0, 0, .6); background: rgba(0, 0, 0, .45); box-shadow: 0 1px 0 rgba(255, 235, 190, .05); }
.lfgpanel__head h3 { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 17px/1.2 var(--font-display); color: var(--gold-300); text-shadow: 0 1px 2px #000; letter-spacing: .02em; }
.lfgpanel__body { padding: 14px 16px 16px; background: rgba(10, 8, 7, .35); text-shadow: 0 1px 2px #000; }
.lfgpanel__body p { margin: 0 0 12px; font-size: 15px; color: var(--text-body); }
.lfgpanel__body p:last-child { margin-bottom: 0; }
.lfgpanel__body .details__text p { margin: 0 0 10px; }
.lfgpanel__muted { color: #b9ab94 !important; font-size: 14px !important; }
.lfgpanel__body .label { margin-top: 16px; }
.gp__side { gap: 16px; }

/* faktaraden som en panellist */
.gp__facts.lfgpanel { gap: 0; background: linear-gradient(180deg, rgba(12, 9, 8, .55), rgba(12, 9, 8, .8)), url("assets/lfg-panel.webp") center 60% / cover; }
.gp__facts.lfgpanel div { background: rgba(10, 8, 7, .3); border-right: 1px solid rgba(0, 0, 0, .55); text-shadow: 0 1px 2px #000; }
.gp__facts.lfgpanel div:last-child { border-right: 0; }
.gp__facts.lfgpanel dt { color: #b9ab94; }

/* bemanningen som spelets listrader */
.lfgpanel--staff .staff { width: 100%; }
.lfgpanel--staff .staff th, .lfgpanel--staff .staff td { padding: 10px 16px; border-bottom: 1px solid rgba(0, 0, 0, .5); background: rgba(10, 8, 7, .3); text-shadow: 0 1px 2px #000; }
.lfgpanel--staff .staff tbody tr:nth-child(even) > * { background: rgba(10, 8, 7, .5); }
.lfgpanel--staff .staff tbody tr:last-child > * { border-bottom: 0; }
.lfgpanel--staff .staff thead th { background: rgba(0, 0, 0, .3); color: #b9ab94; padding-block: 8px; }
.lfgpanel--staff .fnbtn small { color: #b9ab94; }
.lfgpanel--staff .staff tr.key .fnbtn { color: var(--gold-300); }

/* nivåerna på startsidan som små Group Finder-paneler */
.levelpanel { display: flex; flex-direction: column; }
.levelpanel .lfgpanel__head { padding: 10px 14px; }
.levelpanel__title { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.levelpanel__name { margin: 0; font: 600 18px/1.2 var(--font-display); color: var(--gold-300); text-shadow: 0 1px 2px #000; letter-spacing: .02em; }
.levelpanel__title .pips { margin-left: auto; }
.levelpanel__title:hover .levelpanel__name { text-decoration: underline; text-decoration-color: rgba(240, 210, 122, .4); text-underline-offset: 4px; }
.levelpanel__tag { margin: 0; padding: 12px 16px; background: rgba(10, 8, 7, .35); border-bottom: 1px solid rgba(0, 0, 0, .5);
  font-size: 15px; color: var(--text-body); text-shadow: 0 1px 2px #000; }
.levelpanel__groups { list-style: none; margin: 0; padding: 0; flex: 1; background: rgba(10, 8, 7, .25); }
.levelpanel__groups li { border-bottom: 1px solid rgba(0, 0, 0, .45); }
.levelpanel__groups li:last-child { border-bottom: 0; }
.levelpanel__groups a { display: flex; align-items: center; gap: 10px; padding: 9px 16px; color: var(--text-primary); text-decoration: none; text-shadow: 0 1px 2px #000; }
.levelpanel__groups a:hover { background: rgba(240, 210, 122, .06); }
.levelpanel__groups a > span:not(.gcode) { font: 400 16px/1.2 var(--font-ui); }   /* bara gruppnamnet: koden och siffrorna står i Open Sans */
.levelpanel__groups a small { margin-left: auto; font-size: 13px; color: #b9ab94; }
.levelpanel__none { padding: 10px 16px; font-size: 14px; color: #b9ab94; text-shadow: 0 1px 2px #000; }

/* hierarkin på startsidan som Group Finder-paneler */
.lfgnode { display: grid; min-width: 260px; padding: 0; border: 1px solid #000; border-radius: 6px; overflow: hidden; text-align: center;
  box-shadow: inset 0 0 0 1px rgba(240, 210, 122, .32), 0 18px 40px -22px rgba(0, 0, 0, .9);
  background: linear-gradient(180deg, rgba(12, 9, 8, .25), rgba(12, 9, 8, .75)), url("assets/lfg-panel.webp") center 30% / cover;
  transition: box-shadow .2s, transform .2s var(--ease); }
button.lfgnode:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(240, 210, 122, .65), 0 18px 40px -18px rgba(0, 0, 0, .9); }
.lfgnode__head { display: block; padding: 11px 16px; border-bottom: 1px solid rgba(0, 0, 0, .6); background: rgba(0, 0, 0, .45);
  font: 600 18px/1.2 var(--font-display); color: var(--gold-300); text-shadow: 0 1px 2px #000; letter-spacing: .02em; }
.lfgnode__body { display: grid; gap: 4px; justify-items: center; padding: 12px 16px 14px; background: rgba(10, 8, 7, .3);
  font-size: 14px; color: var(--text-body); text-shadow: 0 1px 2px #000; }
.lfgnode .node__more { font-size: 12px; color: var(--gold-300); opacity: 0; transition: opacity .2s; }
.lfgnode:hover .node__more, .lfgnode:focus-visible .node__more { opacity: 1; }
.lfgnode--lead { min-width: 0; width: min(100%, 470px); }
.lfgnode--lead .lead-roles { padding: 12px; background: rgba(10, 8, 7, .3); }
.lfgnode--lead .lead-role { border-color: rgba(0, 0, 0, .55); background: rgba(10, 8, 7, .45); text-shadow: 0 1px 2px #000; }
.lfgnode--lead .lead-role:hover { border-color: var(--gold-400); }
.org--titles .gcol .lfgnode { justify-self: center; width: min(100%, 320px); }


/* de sex uppgifterna som guildens stadgar: ljust pergament med mörkt bläck (pergament = utmärkelser och guildens stadgar) */
.charter { position: relative; margin-top: 48px; padding: 34px 40px 28px; border-radius: 4px; color: #2b1d0e;
  background: linear-gradient(180deg, rgba(255, 244, 214, .18), rgba(120, 80, 30, .12)), url("assets/parchment.webp") center top / 100% 200%;
  box-shadow: inset 0 0 40px rgba(70, 40, 10, .55), inset 0 0 0 1px rgba(60, 35, 10, .5), 0 20px 50px -20px rgba(0, 0, 0, .9); }
.charter__title { margin: 0; text-align: center; font: 700 26px/1.2 var(--font-display); letter-spacing: .06em; color: #3a2108; text-transform: uppercase; }
.charter__lead { margin: 8px auto 22px; max-width: 60ch; text-align: center; font: 400 16px/1.5 var(--font-ui); color: #4a3216; }
.charter__list { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(60, 35, 10, .35);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 34px; }
.charter__list button { display: grid; grid-template-columns: 44px 1fr; gap: 2px 10px; align-content: start; width: 100%; padding: 8px 6px; border-radius: 3px; text-align: left; color: inherit; }
.charter__list button:hover { background: rgba(80, 45, 10, .08); }
.charter__n { grid-row: 1 / span 2; font: 700 22px/1.1 var(--font-display); color: #7a2e12; text-align: center; }
.charter__list b { font: 400 19px/1.25 var(--font-ui); color: #2b1d0e; }
.charter__list span:last-child { font-size: 14px; line-height: 1.5; color: #4a3216; }
.charter__foot { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid rgba(60, 35, 10, .35); text-align: center; font: italic 400 14px/1.5 var(--font-body); color: #4a3216; }
/* läsbarhet: varje punkt på en ljusare papperslapp med tunn bläckkant */
.charter__list { gap: 10px 14px; }
.charter__list li { border-radius: 4px; background: rgba(255, 246, 222, .62); box-shadow: inset 0 0 0 1px rgba(60, 35, 10, .22), 0 1px 2px rgba(60, 35, 10, .25); }
.charter__list button { padding: 12px 14px 14px 6px; }
.charter__list button:hover { background: rgba(255, 250, 235, .55); }
.charter__list b { color: #22160a; }
.charter__list span:last-child { font-size: 15px; color: #33230f; }
.charter__lead, .charter__foot { color: #33230f; }
.charter__lead { font-size: 17px; }
.charter__foot { font-size: 15px; }
@media (max-width: 640px) { .charter { padding: 26px 16px 20px; } }
.charter__lead .n { font-weight: 600; color: inherit; }

/* stadgan: inga lappar, texten direkt på den blekare nedre halvan av pergamentet, bläcklinjer mellan punkterna */
.charter--plain { background: linear-gradient(180deg, rgba(255, 244, 214, .22), rgba(150, 110, 50, .1)), url("assets/parchment.webp") center bottom / 100% 200%; }
.charter--plain .charter__list { gap: 0 34px; }
.charter--plain .charter__list li { background: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid rgba(60, 35, 10, .3); }
.charter--plain .charter__list button { padding: 14px 6px 16px; }
.charter--plain .charter__list button:hover { background: rgba(80, 45, 10, .07); }
.charter--plain .charter__list b { color: #1e1307; }
.charter--plain .charter__list span:last-child { color: #2a1c0b; }

/* ========== ASSIGNMENT-TAVLAN I GROUP FINDER-STIL ==========
   Samma panel som resten av gruppens sida. Raderna är halvgenomskinliga så att panelen syns, men mörka nog att läsa. */
.bd__wrap { border: 1px solid #000; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(240, 210, 122, .32), 0 18px 40px -22px rgba(0, 0, 0, .9);
  background: linear-gradient(180deg, rgba(12, 9, 8, .3), rgba(12, 9, 8, .8)), url("assets/lfg-panel.webp") center 30% / cover; }
.bd__table th, .bd__table td { border-color: rgba(0, 0, 0, .5); }
.bd__table thead th, thead .bd__role, thead .bd__player { background: rgba(0, 0, 0, .5); text-shadow: 0 1px 2px #000; }
.bd__table thead .bd__colname { color: var(--gold-300); }
.bd__col:nth-child(odd) { background: rgba(0, 0, 0, .58); }
thead .bd__role, thead .bd__player { color: #b9ab94 !important; }
.bd__row > * { background: rgba(10, 8, 7, .45); text-shadow: 0 1px 2px #000; }
.bd__row.is-alt > * { background: rgba(10, 8, 7, .68); }
.bd__row:hover > * { background: rgba(60, 46, 22, .55); }
.bd__role { color: var(--text-body); }
.bd__sec th, .bd__sec td { background: rgba(0, 0, 0, .55); border-color: rgba(0, 0, 0, .6); text-shadow: 0 1px 2px #000; }
.bd__add td { background: rgba(10, 8, 7, .3); }
.bd__add td:first-child { background: rgba(10, 8, 7, .3); }
.bd__pick { color: #9a8d78; }
.bd__ph { color: #9a8d78; }
.bd__coladd button { border-color: rgba(240, 210, 122, .35); color: #b9ab94; }

.bd__pool.lfgpanel { margin-bottom: 18px; padding: 0; }
.bd__pool .lfgpanel__head h3 small { margin-left: 8px; font: 400 12px/1 var(--font-body); color: #b9ab94; letter-spacing: 0; }
.bd__pool .bd__poolrow { padding: 6px 16px; background: rgba(10, 8, 7, .35); border-bottom: 1px solid rgba(0, 0, 0, .45); }
.bd__pool .bd__poolrow:last-child { border-bottom: 0; }
.bd__pool .bd__grp { color: #b9ab94; text-shadow: 0 1px 2px #000; }

/* spelarcellen helt i klassfärgen, utan skugga på namnet */
.bd__table .bd__row > td.bd__player.is-filled { background: var(--c); }
.bd__table .bd__row:hover > td.bd__player.is-filled { background: color-mix(in srgb, var(--c) 88%, #fff); }
.bd__player.is-filled .pchip--solid { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ct);
  font-weight: 700; text-shadow: none; overflow: hidden; text-overflow: ellipsis; }
.bd__player.is-filled { text-shadow: none; }
.bd__player.is-filled .bd__x { background: rgba(0, 0, 0, .35); }

/* mallarna: en panel per raid */
.tplsearch { width: 100%; margin: 18px 0 4px; padding: 9px 12px; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--obsidian-950); color: var(--text-primary); }
.tplsearch:focus { outline: none; border-color: var(--gold-400); }
.tplgroups { display: grid; gap: 12px; margin-top: 16px; }
.tplgroup .lfgpanel__head h3 { gap: 8px; font-size: 16px; }
.tplgroup .lfgpanel__head small { font: 400 11px/1 var(--font-body); color: #b9ab94; letter-spacing: 0; }
.tplgroup__art { display: flex; margin-left: auto; }
.tplgroup__art img { width: 40px; height: 22px; object-fit: contain; margin-left: -6px; filter: drop-shadow(0 1px 2px #000); }
.tplgroup__list { list-style: none; margin: 0; padding: 0; }
.tplrow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(10, 8, 7, .4); border-bottom: 1px solid rgba(0, 0, 0, .5); text-shadow: 0 1px 2px #000; }
.tplrow:last-child { border-bottom: 0; }
.tplrow__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tplrow__main b { font: 400 16px/1.25 var(--font-ui); color: var(--text-primary); }
.tplrow__main p { margin: 0; font-size: 13px; color: var(--text-body); }
.tplrow__main small { font-size: 12px; color: #b9ab94; }
.tplrow__main .linkish { font-size: 12px; }
.tplsave { margin-top: 18px; }
.tplsave .lfgpanel__body .field input { background: rgba(4, 7, 15, .85); }

/* ========== SIDOPANELERNA OCH DE SMÅ EDITORERNA I GROUP FINDER-STIL ==========
   Gäller alla paneler (person, roll, funktion, nivåer, inloggning, profil, raid, mallar, import, bild) och editorerna på tavlan. */
.drawer { background: linear-gradient(180deg, rgba(12, 9, 8, .72) 0, rgba(12, 9, 8, .95) 340px), url("assets/lfg-panel.webp") center top / 100% auto no-repeat, #0c0908;
  border-left: 1px solid #000; box-shadow: inset 1px 0 0 rgba(240, 210, 122, .32), -30px 0 60px -20px rgba(0, 0, 0, .8); }
.drawer h2 { color: var(--gold-300); text-shadow: 0 1px 3px #000; }
.drawer h2.person-name { color: var(--c); }
.drawer .lead, .drawer p { text-shadow: 0 1px 2px #000; }
.drawer__close { border-color: rgba(240, 210, 122, .3); background: rgba(0, 0, 0, .35); color: #b9ab94; }
.drawer__close:hover { border-color: var(--gold-400); color: var(--gold-300); }

/* rutor i panelerna: mörka listrader med svart kant, guld vid hovring */
.drawer .duty, .drawer .pick, .drawer .ambx, .drawer .bd__raidopt, .drawer .acc {
  background: rgba(10, 8, 7, .55); border: 1px solid rgba(0, 0, 0, .7); box-shadow: inset 0 0 0 1px rgba(240, 210, 122, .08); border-radius: 5px; }
.drawer .pick:hover, .drawer .bd__raidopt:hover, .drawer .duty:hover { border-color: rgba(0, 0, 0, .7); box-shadow: inset 0 0 0 1px rgba(240, 210, 122, .55); background: rgba(40, 30, 14, .6); }
.drawer .ambx.is-current { box-shadow: inset 0 0 0 1px var(--gold-400); }
.drawer .duty a, .drawer .bd__raidopt b { color: var(--gold-300); }
.drawer .duty p, .drawer .pick small, .drawer .bd__raidopt small, .drawer .ambx dt { color: #b9ab94; }
.drawer .tag { background: rgba(10, 8, 7, .6); border-color: rgba(0, 0, 0, .7); }

/* fält */
.drawer .field input, .drawer .field textarea, .drawer .field select, .drawer textarea, .drawer .bd__inline input, .tplsearch {
  background: rgba(4, 3, 2, .6); border: 1px solid rgba(240, 210, 122, .18); color: var(--text-primary); }
.drawer .field input:focus, .drawer .field textarea:focus, .drawer .bd__inline input:focus, .tplsearch:focus { outline: none; border-color: var(--gold-400); }
.drawer .classpick span, .drawer .rolepick span { background: rgba(10, 8, 7, .55); border-color: rgba(0, 0, 0, .7); }
.drawer .bd__imgprev { background: rgba(0, 0, 0, .5); border-color: rgba(0, 0, 0, .7); }
.drawer .bd__check input { accent-color: var(--gold-400); }

/* de små editorerna på tavlan (ruta och spelarval) */
.bd__pop { border: 1px solid #000; background: linear-gradient(180deg, rgba(12, 9, 8, .9), rgba(12, 9, 8, .97)), url("assets/lfg-panel.webp") center 30% / cover;
  box-shadow: inset 0 0 0 1px rgba(240, 210, 122, .32), 0 18px 40px -10px rgba(0, 0, 0, .9); }
.bd__popttl { color: var(--gold-300); font-family: var(--font-display); font-weight: 600; text-shadow: 0 1px 2px #000; }
.bd__pop select, .bd__pop input, .bd__picksearch { background: rgba(4, 3, 2, .6); border-color: rgba(240, 210, 122, .18); }
.bd__poppre { background: rgba(0, 0, 0, .35); }
.bd__pickopt:hover { background: rgba(240, 210, 122, .08); }
.bd__poplbl, .bd__pickhead { color: #b9ab94; }

/* ========== ROLLER & ANSVAR I GROUP FINDER-STIL ========== */
.lfgpanel--acc .acc { border: 0; border-radius: 0; border-bottom: 1px solid rgba(0, 0, 0, .55); background: rgba(10, 8, 7, .4); text-shadow: 0 1px 2px #000; }
.lfgpanel--acc .acc:last-child { border-bottom: 0; }
.lfgpanel--acc .acc + .acc { margin-top: 0; }
.lfgpanel--acc .acc[open] { background: rgba(10, 8, 7, .7); }
.lfgpanel--acc .acc summary:hover { background: rgba(240, 210, 122, .05); }
.lfgpanel--acc .acc__name { color: var(--text-primary); }
.lfgpanel--acc .acc[open] .acc__name { color: var(--gold-300); }
.lfgpanel--acc .acc__short { color: #b9ab94; }
.lfgpanel--acc .acc__body { border-top: 1px solid rgba(0, 0, 0, .5); }
.lfgpanel--acc .acc summary::after { color: #b9ab94; }
.lfgpanel__intro { margin: 0; padding: 10px 16px; background: rgba(10, 8, 7, .55); border-bottom: 1px solid rgba(0, 0, 0, .55); font-size: 14px; color: #b9ab94; text-shadow: 0 1px 2px #000; }
#ambList.levels { margin-top: 16px; }

/* ========== REDIGERA RAIDGRUPP I GROUP FINDER-STIL ========== */
.ed__box { padding: 0 0 6px; border: 1px solid #000; border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(240, 210, 122, .32), 0 18px 40px -22px rgba(0, 0, 0, .9);
  background: linear-gradient(180deg, rgba(12, 9, 8, .55), rgba(12, 9, 8, .88)), url("assets/lfg-panel.webp") center 30% / cover; }
.ed__box > legend { float: left; width: 100%; margin: 0 0 14px; padding: 12px 16px; background: rgba(0, 0, 0, .45); border-bottom: 1px solid rgba(0, 0, 0, .6);
  font: 600 16px/1.2 var(--font-display); letter-spacing: .02em; text-transform: none; color: var(--gold-300); text-shadow: 0 1px 2px #000; }
.ed__box > legend + * { clear: both; }
.ed__box > :not(legend) { margin-left: 16px; margin-right: 16px; }
.ed__box .field > span, .ed__box .field small { color: #b9ab94; text-shadow: 0 1px 2px #000; }
.ed__box .field input, .ed__box .field textarea, .ed__box .field select, .ed__box .pickadd {
  background: rgba(4, 3, 2, .6); border-color: rgba(240, 210, 122, .18); color: var(--text-primary); }
.ed__box .field input:focus, .ed__box .field textarea:focus, .ed__box .field select:focus, .ed__box .pickadd:focus { border-color: var(--gold-400); }
.ed__box .seg { border-color: rgba(240, 210, 122, .2); }
.ed__box .seg span { background: rgba(10, 8, 7, .55); color: #b9ab94; }
.ed__box .seg label + label span { border-left-color: rgba(0, 0, 0, .6); }
.ed__box .rolepick span { background: rgba(10, 8, 7, .55); border-color: rgba(0, 0, 0, .7); }
.ed__box .ed__slot { border-top-color: rgba(0, 0, 0, .55); text-shadow: 0 1px 2px #000; }
.ed__box .ed__slotname { color: var(--text-primary); }
.ed__box .ed__slotname small { color: #b9ab94; }
#staffBox { padding-bottom: 6px; }

/* nivåbokstaven (A/B/C): mörk bronsruta med guldkant, som spelets ikonramar, i stället för den blå knappfärgen */
.level__letter { background: linear-gradient(180deg, #3b2b14, #160f07); border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(240, 210, 122, .6), inset 0 1px 0 rgba(255, 236, 190, .25), 0 1px 3px rgba(0, 0, 0, .7);
  color: var(--gold-300); text-shadow: 0 1px 2px #000; }

/* "Hitta ditt rum": stegen i en panel, siffrorna i samma bronsruta som nivåbokstäverna (fast rund) */
.howto-panel { max-width: 860px; margin-top: 34px; }
.howto-panel .howto { margin: 0; gap: 0; max-width: none; }
.howto-panel .howto li { padding: 14px 18px; background: rgba(10, 8, 7, .4); border-bottom: 1px solid rgba(0, 0, 0, .55); text-shadow: 0 1px 2px #000; }
.howto-panel .howto li:nth-child(even) { background: rgba(10, 8, 7, .6); }
.howto-panel .howto b { color: var(--gold-300); font-weight: 600; }
.howto__n { background: linear-gradient(180deg, #3b2b14, #160f07); border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(240, 210, 122, .6), inset 0 1px 0 rgba(255, 236, 190, .25), 0 1px 3px rgba(0, 0, 0, .7); color: var(--gold-300); }
.howto-panel .cta { margin: 0; padding: 14px 18px; background: rgba(10, 8, 7, .65); }
.howto-panel .cta .linkish { text-shadow: 0 1px 2px #000; }
/* siffrorna i "Så går det till": bara bronsfärgad siffra, ingen ruta (samma brons som bronskronan på leveling-sidan) */
.howto-panel .howto__n { width: 26px; height: auto; background: none; border: 0; box-shadow: none; border-radius: 0;
  font: 700 22px/1.2 var(--font-body); color: #cd8a4e; text-shadow: 0 1px 2px #000; }
/* "Så går det till": inga tabellrader, stegen står fritt på panelen */
.howto-panel .howto { padding: 12px 0 4px; background: rgba(10, 8, 7, .35); }
.howto-panel .howto li, .howto-panel .howto li:nth-child(even) { padding: 8px 18px; background: none; border: 0; }
.howto-panel .cta { padding: 12px 18px 18px; background: rgba(10, 8, 7, .35); }
/* utan panel: stegen och knapparna direkt på sidan (bara siffrorna i brons) */
.howto-panel--plain { max-width: 860px; margin-top: 30px; }
.howto-panel--plain .howto, .howto-panel--plain .cta { padding-left: 0; padding-right: 0; background: none; }
.howto-panel--plain .howto li, .howto-panel--plain .howto li:nth-child(even) { padding-left: 0; background: none; text-shadow: none; }
.howto-panel--plain .cta { padding-top: 18px; }

/* ========== FEEDBACK 2026-10-12 ========== */
/* ambitionsnivåerna i spelets kvalitetsfärger (Legendary orange, Epic lila, Rare blå): bokstav i färgad ram, namnet i färgen */
.qlvl { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 4px; vertical-align: middle;
  background: color-mix(in srgb, var(--q) 16%, #0c0908); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--q);
  color: var(--q); font: 700 13px/1 var(--font-body); text-shadow: 0 1px 2px #000; }
.qlvl--md { width: 30px; height: 30px; font-size: 16px; }
.amb { gap: 8px; }
.amb span { font-weight: 600; }
.levelpanel__q { margin-left: auto; font: 400 11px/1 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; opacity: .85; }
.ambx__head small.ambx__q { margin-left: auto; font: 400 11px/1 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: #b9ab94; }

/* filtren på Raidgrupper */
.gfilters { display: grid; gap: 10px; margin-top: 26px; padding: 14px 16px; border: 1px solid #000; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(240, 210, 122, .25); background: rgba(10, 8, 7, .6); }
.gfilters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gfilters__label { width: 64px; font: 400 12px/1 var(--font-ui); letter-spacing: var(--cap); text-transform: uppercase; color: #b9ab94; }
.fchip { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(240, 210, 122, .2); background: rgba(10, 8, 7, .5); color: var(--text-body); font-size: 13px; }
.fchip:hover { border-color: rgba(240, 210, 122, .5); color: var(--text-primary); }
.fchip[aria-pressed="true"] { background: linear-gradient(180deg, var(--act-500), var(--act-600)); color: var(--act-ink); border-color: transparent; box-shadow: 0 0 0 1px var(--act-rim) inset; }
.gfilters__foot { gap: 10px 18px; padding-top: 4px; border-top: 1px solid rgba(0, 0, 0, .5); }
.gfilters__count { margin-left: auto; font-size: 13px; color: #b9ab94; }
.gfilters .bd__check { margin: 0; font-size: 14px; }
.gfilters .bd__check input { accent-color: var(--gold-400); }

/* romerska siffror på funktionerna (Roller & ansvar) */
.acc__num--roman { border: 0; width: auto; min-width: 30px; height: auto; border-radius: 0; font: 700 18px/1 var(--font-display); color: #b04a24; text-shadow: 0 1px 2px #000; }
.lfgpanel--acc .acc__num--roman { color: #cd8a4e; }

/* tavlan: roll- och spelarnamn på en rad (krymps av fitNames om de inte får plats) */
.bd__rolename { white-space: nowrap; overflow: hidden; }
.bd__player .pchip--solid { white-space: nowrap; }

/* gruppkoden i nivåns kvalitetsfärg */
.gcode[style*="--q"] { color: var(--q); border-color: color-mix(in srgb, var(--q) 55%, transparent); background: color-mix(in srgb, var(--q) 14%, #0c0908); }
/* dra-handtaget och ✕ ligger ovanpå, så rollnamnet får hela bredden */
.bd__rolecell { position: relative; }
.bd__rolecell .bd__grip { position: absolute; left: -9px; top: 50%; transform: translateY(-50%); }
.bd__rolecell .bd__x { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: rgba(10, 8, 7, .85); }
.bd__rolecell .bd__rolename { flex: 1; min-width: 0; }
.bd__rolename, .bd__player .pchip--solid { text-overflow: ellipsis; }

/* signups: Öppet (guld), Hör av dig (ljus), Fullt hus (dämpad) */
.signup { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.signup > span { margin-right: 2px; }
.signup--open { color: var(--gold-300); }
.signup--ask { color: var(--text-primary); }
.signup--full { color: #b9ab94; font-weight: 400; }
.signup .role { width: 22px; height: 22px; background-size: 66px 22px; }
.signup .role--healer { background-position: -22px 0; }
.signup .role--dps { background-position: -44px 0; }
#signupHint { color: #b9ab94; }

/* Text till Discord */
.gp__actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.dpost { width: 100%; margin-top: 16px; padding: 12px 14px; border-radius: 6px; border: 1px solid #000; resize: vertical;
  box-shadow: inset 0 0 0 1px rgba(240, 210, 122, .25); background: #1e1f22; color: #dbdee1;
  font: 13px/1.5 ui-monospace, Consolas, monospace; }
.dpost:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gold-400); }
.dpost__bar { display: flex; align-items: center; gap: 14px; margin: 12px 0; }
.dpost__status { font-size: 14px; color: #b9ab94; }

/* Fullt hus i rött (beslut 2026-10-14) */
.signup--full { color: #e5533d; font-weight: 600; }
/* rollikonerna i filtret */
.fchip { display: inline-flex; align-items: center; }
.fchip .fchip__role { width: 18px; height: 18px; margin-right: 6px; background-size: 54px 18px; }
.fchip .fchip__role.role--healer { background-position: -18px 0; }
.fchip .fchip__role.role--dps { background-position: -36px 0; }


/* ========== Visningsläget på hemmet.wtf/raiding: sajtens gemensamma meny + raidingsidans flikar ========== */
/* den valda sidan: EN guldlinje som åker mellan menyvalen (slideBar i app.js): till det man hovrar, tillbaka till det valda,
   och från förra sidans val till det nya när man byter sida */
.topbar .site-nav { position: relative; overflow: visible; }
.site-nav a { padding: 6px 0; }
.topbar .site-nav a[aria-current] { color: var(--text-primary); }
.site-nav__bar { position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; border-radius: 2px; background: var(--gold-300); pointer-events: none;
  box-shadow: 0 0 10px rgba(240, 210, 122, .5); opacity: 0;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), width .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.topbar__menu { display: none; padding: 8px 12px; border-radius: 4px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); color: var(--text-primary);
  font: 600 13px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 700px) {
  .topbar__menu { display: inline-flex; }
  .site-nav { display: none !important; }
  .topbar.is-open .site-nav { display: flex !important; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 4px 16px 12px;
    background: rgba(4, 7, 15, .96); border-bottom: 1px solid var(--line); }
  .topbar.is-open .site-nav a { padding: 13px 0; font-size: 16px; border-top: 1px solid var(--line); }
  .site-nav__bar { display: none; }
  .topbar .site-nav a[aria-current] { color: var(--gold-300); }
}

/* konto och fel */
.account__out { display: inline-flex; align-items: center; gap: 8px; }
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 90; transform: translateX(-50%); max-width: min(520px, calc(100vw - 32px)); padding: 11px 16px; border-radius: 6px;
  border: 1px solid #000; box-shadow: inset 0 0 0 1px #e5533d, 0 12px 30px -12px #000; background: rgba(36, 14, 10, .96); color: var(--text-primary); font-size: 14px; }

/* heron: samma uppbyggnad som på hemmet.wtf, med raidingsidans egen bild. Topbaren är genomskinlig över den. */
:root { --fs-hero: clamp(64px, 14vw, 200px); }
.has-hero .topbar { margin-bottom: calc(-1 * var(--tb, 55px)); }
.topbar { transition: background-color .3s, border-color .3s; }
.topbar.at-top:not(.is-open) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.hero { min-height: min(88svh, 860px); display: grid; align-content: center; justify-items: center; padding: calc(env(safe-area-inset-top, 0px) + 96px) 16px 70px; }
.hero__art { z-index: -2; background: url("assets/hero.webp") center 62% / cover; filter: saturate(1.05) brightness(.82); opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%); mask-image: linear-gradient(180deg, #000 62%, transparent 98%); }
.hero__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 52% at 50% 46%, rgba(8, 6, 14, .62), rgba(8, 6, 14, .2) 75%, transparent),
  linear-gradient(180deg, rgba(4, 7, 15, .3), transparent 26%); }
.hero canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero__sigil { width: auto; height: 76px; margin-bottom: 18px; filter: drop-shadow(0 0 18px rgba(0, 0, 0, .6)); }
.hero__meta { margin: 0 0 14px; font: 600 14px/1.3 var(--font-label); letter-spacing: var(--cap); text-transform: uppercase; color: var(--text-primary); text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .7); }
.hero__meta b { color: var(--gold-300); font-weight: 600; }
.hero h1 { margin: 0; font: 700 var(--fs-hero)/.9 var(--font-display); letter-spacing: .04em; filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .7));
  background: linear-gradient(180deg, #fff8ea 30%, #c9b18a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__slogan { margin: 18px 0 0; font: 400 clamp(22px, 3vw, 34px)/1.3 var(--font-ui); color: var(--gold-300); text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.hero__count { display: flex; gap: clamp(18px, 4vw, 44px); justify-content: center; margin-top: 30px; }
.hero__count div { display: grid; gap: 7px; min-width: 64px; }
.hero__count b { font: 500 clamp(34px, 5vw, 56px)/1 var(--font-body); color: var(--text-primary); font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.hero__count span { font: 600 12px/1.2 var(--font-label); letter-spacing: var(--cap); text-transform: uppercase; color: var(--text-primary); text-shadow: 0 1px 4px #000; }
.hero .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.hero .btn-row svg { width: 20px; height: 20px; margin-right: 8px; vertical-align: -5px; }
.hero__status { margin: 28px 0 0; color: var(--text-primary); text-shadow: 0 1px 4px #000; }

/* rullbandet: veckans raids */
.ticker { border-block: 1px solid var(--line); background: rgba(10, 16, 32, .6); overflow: hidden; }
.ticker__row { display: flex; align-items: center; gap: 22px; width: max-content; padding: 14px 0; animation: marquee 60s linear infinite; }
.ticker:hover .ticker__row { animation-play-state: paused; }
.ticker__row span { font: 500 15px/1 var(--font-body); letter-spacing: .02em; color: var(--text-muted); white-space: nowrap; }
.ticker__row em { font-style: normal; color: var(--text-primary); }
.ticker__row .mile em { color: var(--gold-300); }
.ticker__row .dot { color: var(--gold-500); font-size: 9px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__row { animation: none; } }
.topbar.at-top:not(.is-open) .site-nav a { color: var(--text-primary); text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
@media (max-width: 480px) {
  .hero__count { gap: 14px; }
  .hero__count span { font-size: 10px; letter-spacing: .06em; }
}

/* kontot i menyn: profilbilden från Discord, namnet i klassfärg */
.acct { display: flex; align-items: center; justify-items: start; gap: 9px; padding: 2px 4px 2px 2px; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.acct:hover .acct__img { box-shadow: 0 0 0 2px var(--gold-300); }
.acct__img { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--c);
  background: var(--obsidian-900); color: var(--c); font: 700 15px/1 var(--font-body); transition: box-shadow .15s; }
.acct__text { display: grid; gap: 2px; text-align: left; }
.topbar.at-top:not(.is-open) .acct b, .topbar.at-top:not(.is-open) .acct small { text-shadow: 0 1px 4px rgba(0, 0, 0, .9); }
.topbar.at-top:not(.is-open) .acct small { color: var(--text-primary); }
@media (max-width: 480px) { .acct__text { display: none; } }

/* pricken syns bara när någon är online: utan närvaro från boten vet vi inget om resten */
.who:not(.is-online) .who__dot, .presence:not(.is-online) .who__dot { display: none; }

/* undersidorna: samma bild som heron, men lägre. Innehållet ska börja direkt under. */
.subhero { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; justify-items: center; min-height: min(44svh, 400px);
  padding: calc(var(--tb, 56px) + 36px) 16px 44px; text-align: center; }
.subhero .eyebrow { justify-content: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.subhero .d2 { margin-bottom: 12px; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.subhero .lede { margin: 0 auto; color: var(--text-primary); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.subhero + .page-head { padding-top: 12px; }
.subhero + .page-head .gfilters { margin-top: 0; }