/* speedingfines.gg logged-in app: sidebar shell, cards, forms. One file, no build step.
   Every colour comes from theme.css (linked first): the names below are this file's short aliases for those tokens,
   and guides.css / tierlists.css read the same aliases. WoW flavour (Bob's ruling A3): stone surfaces, gold frames
   and corner brackets, Horde red accents, parchment for reading surfaces, class and item-quality colours. */
:root {
  --bg: var(--sf-bg); --side: #0f0c0e; --panel: var(--sf-surface); --panel2: var(--sf-surface-2); --field: var(--sf-sunken);
  --bg2: var(--sf-surface);
  --line: rgba(224, 178, 78, 0.13); --line2: rgba(224, 178, 78, 0.24);
  --text: var(--sf-text); --muted: var(--sf-text-muted); --dim: var(--sf-text-dim);
  --red: var(--sf-red-500); --red-d: var(--sf-red-600); --red-bg: var(--sf-red-bg); --red-text: var(--sf-red-400);
  --green: var(--sf-green); --green-bg: var(--sf-green-bg); --amber: var(--sf-amber); --amber-bg: var(--sf-amber-bg);
  --blue: var(--sf-blue); --blue-bg: var(--sf-blue-bg); --purple: var(--sf-q-epic-text);
  --gold: var(--sf-gold-300); --gold-d: var(--sf-gold-500); --link: var(--sf-gold-300);
  --head: var(--sf-font-display); --body: var(--sf-font-body); --mono: var(--sf-font-mono);
  --radius: var(--sf-radius-md); --side-w: 240px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased;
  background: var(--bg) radial-gradient(1200px 520px at 70% -180px, var(--sf-bg-glow), transparent 70%) no-repeat; }
a { color: inherit; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sf-gold-300); outline-offset: 2px; }
::selection { background: rgba(214, 58, 47, 0.45); color: #fff; }
.sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; overflow-x: clip; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; z-index: 40;
  background: var(--sf-grain), linear-gradient(180deg, #151013, #0c0a0d 55%);
  box-shadow: inset -1px 0 0 var(--sf-gold-line), inset -2px 0 0 #000; }
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; text-decoration: none; }
.brand img { width: 46px; height: 46px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)); }
.brand span { display: flex; flex-direction: column; min-width: 0; }
.brand b { font: 800 1.42rem/0.95 var(--head); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; color: var(--text); }
.brand small { font: 700 0.64rem/1 var(--head); letter-spacing: 0.24em; text-transform: uppercase; color: var(--sf-trim); margin-top: 5px; white-space: nowrap; }
.side > .brand { margin: 0 10px 4px; padding-left: 6px; padding-right: 6px; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--sf-gold-line), transparent) 1; }
.nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--sf-radius-sm); text-decoration: none;
  color: #d4cbbd; font-weight: 500; position: relative; }
.nav a svg { width: 20px; height: 20px; flex: none; color: var(--dim); transition: color 0.15s; }
.nav a:hover { background: rgba(255, 236, 200, 0.045); color: #fff; }
.nav a:hover svg { color: var(--muted); }
.nav a[aria-current="page"] { color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--sf-accent) 34%, transparent), transparent 88%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sf-trim) 26%, transparent); }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -9px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%);
  background: var(--sf-ornament-diamond) center / contain no-repeat; }
.nav a[aria-current="page"] svg { color: var(--sf-gold-300); }
.nav .count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--sf-accent); color: #fff;
  font: 700 0.72rem/18px var(--body); text-align: center; box-shadow: 0 0 0 1px var(--sf-trim); }
.nav-h { margin: 18px 20px 6px; font: 700 0.72rem/1 var(--head); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sf-gold-500);
  display: flex; align-items: center; gap: 8px; }
.nav-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--sf-gold-line), transparent); }
/* the Officer section folds: a <details> whose summary is the section header */
.nav-fold > summary { list-style: none; cursor: pointer; padding: 6px 8px; margin: 12px 12px 2px; border-radius: var(--sf-radius-sm); user-select: none; }
.nav-fold > summary::-webkit-details-marker { display: none; }
.nav-fold > summary:hover { background: rgba(255, 236, 200, 0.045); color: var(--sf-gold-300); }
.nav-fold > summary::after { order: 2; }
.nav-fold > summary .count { order: 1; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--sf-accent); color: #fff;
  font: 700 0.68rem/16px var(--body); letter-spacing: 0; text-align: center; box-shadow: 0 0 0 1px var(--sf-trim); }
.nav-fold > summary .chev { order: 3; width: 14px; height: 14px; flex: none; transition: transform 0.18s; }
.nav-fold[open] > summary .chev { transform: rotate(90deg); }
.nav-fold[open] > summary .count { display: none; }
@media (max-width: 900px) { .nav-fold > summary { min-height: 44px; } }
.nav > .nav-sub a { padding: 6px 10px; min-height: 0; }
.nav-sub a img { width: 18px; height: 18px; flex: none; }
.side-foot { margin-top: auto; padding: 12px 10px 14px; border-top: 1px solid var(--line); }
.me-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--sf-radius-md); text-decoration: none; }
.me-card:hover { background: rgba(255, 236, 200, 0.045); }
.me-card img { width: 40px; height: 40px; border-radius: 50%; flex: none; background: #222; box-shadow: 0 0 0 2px var(--sf-trim), 0 0 0 3px #000; }
.me-card b { display: block; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-card small { display: block; color: var(--muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-card span { min-width: 0; }
.logout { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-top: 2px; color: var(--muted);
  text-decoration: none; border-radius: var(--sf-radius-sm); font-weight: 500; }
.logout:hover { color: #fff; background: rgba(255, 236, 200, 0.045); }
.logout svg { width: 20px; height: 20px; }
.side-links { display: flex; gap: 12px; padding: 8px 12px 0; font-size: 0.78rem; color: var(--dim); }
.side-links a { color: var(--dim); text-decoration: none; padding: 4px 0; }
.side-links a:hover { color: var(--text); }

.content { min-width: 0; padding: 22px 28px 48px; max-width: 1500px; width: 100%; }
.topbar, .tabbar, .scrim { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-102%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.28s; visibility: hidden;
    box-shadow: inset -1px 0 0 var(--sf-gold-line), 0 0 40px rgba(0, 0, 0, 0.7);
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); overscroll-behavior: contain; }
  body.drawer .side { transform: none; visibility: visible; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
  body.drawer { overflow: hidden; }
  .nav a, .logout { min-height: 44px; }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 30; opacity: 0;
    pointer-events: none; transition: opacity 0.25s; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  body.drawer .scrim { opacity: 1; pointer-events: auto; }
  .topbar { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 20; min-height: 56px;
    padding: env(safe-area-inset-top) 10px 0; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px;
    background: rgba(13, 12, 15, 0.92); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
    box-shadow: inset 0 -1px 0 var(--sf-gold-line), 0 1px 0 #000; }
  .topbar .burger { border: 0; background: none; width: 44px; height: 44px; margin-left: -4px; display: grid; place-items: center;
    cursor: pointer; color: var(--text); border-radius: var(--sf-radius-sm); }
  .topbar .burger:active { background: rgba(255, 236, 200, 0.06); }
  .topbar .burger svg { width: 26px; height: 26px; display: block; }
  .topbar .brand { padding: 0; gap: 8px; min-width: 0; }
  .topbar .brand img { width: 32px; height: 32px; }
  .topbar .brand b { font-size: 1.25rem; overflow: hidden; text-overflow: ellipsis; }
  .topbar .av { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
  .topbar .av img { width: 34px; height: 34px; border-radius: 50%; display: block; box-shadow: 0 0 0 2px var(--sf-trim), 0 0 0 3px #000; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: linear-gradient(180deg, rgba(23, 19, 22, 0.97), rgba(11, 10, 13, 0.98));
    box-shadow: inset 0 1px 0 var(--sf-gold-line), 0 -1px 0 #000, 0 -8px 24px rgba(0, 0, 0, 0.45);
    padding: 4px 4px max(4px, env(safe-area-inset-bottom)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .tabbar a, .tabbar button { position: relative; flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; padding: 4px 0; color: var(--muted); text-decoration: none; font: 700 0.7rem/1 var(--head);
    letter-spacing: 0.1em; text-transform: uppercase; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
    border-radius: var(--sf-radius-sm); }
  .tabbar a:active, .tabbar button:active { background: rgba(255, 236, 200, 0.05); }
  .tabbar svg { width: 23px; height: 23px; }
  .tabbar [aria-current="page"] { color: var(--sf-gold-300); }
  .tabbar [aria-current="page"] svg { filter: drop-shadow(0 0 6px rgba(224, 178, 78, 0.45)); }
  .tabbar [aria-current="page"]::before { content: ""; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; transform: translateX(-50%);
    background: var(--sf-ornament-diamond) center / contain no-repeat; }
  .tabbar [aria-current="page"]::after { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--sf-trim), transparent); }
  .content { padding: 14px 14px calc(88px + env(safe-area-inset-bottom)); }
}

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--head); text-transform: uppercase; letter-spacing: 0.02em; margin: 0; line-height: 1.05; }
.page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 4px 0 18px; }
.page-h h1 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; }
.page-h h1::before { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; margin-bottom: 10px;
  background: linear-gradient(90deg, var(--sf-accent), var(--sf-trim)); }
.page-h p { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }
.kicker { font: 700 0.8rem/1 var(--head); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sf-trim); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 0.85rem; }
.num { font-variant-numeric: tabular-nums; }
.crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }

/* ---------- hero ---------- */
.hero { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--sf-frame), var(--sf-shadow-2);
  min-height: 290px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  background: #050608 url(/media/hero.webp) 62% 24% / 122% auto no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5, 6, 8, 0) 18%, rgba(5, 6, 8, 0.55) 46%, rgba(5, 6, 8, 0.94) 72%),
    linear-gradient(0deg, rgba(5, 6, 8, 0.7) 0%, rgba(5, 6, 8, 0) 45%); }
.hero > * { position: relative; }
.stamp { position: absolute; top: 14px; left: 18px; right: 18px; font: 500 0.95rem/1.2 var(--mono); letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.86); text-transform: uppercase; display: flex; gap: 0 26px; flex-wrap: wrap; pointer-events: none;
  text-shadow: 0 1px 2px #000; }
.hero-main { grid-column: 2; padding: 56px 26px 24px 20px; min-width: 0; width: min(680px, 62vw); }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); font-weight: 800; line-height: 0.92; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.hero h1::before { content: ""; display: block; width: 64px; height: 4px; border-radius: 2px; margin-bottom: 12px;
  background: linear-gradient(90deg, var(--sf-accent), var(--sf-trim)); }
.hero .hmeta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 8px 0 16px; font-size: 1.12rem; color: var(--text); }
.hero .hmeta .sep { color: var(--dim); }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.stat { display: block; text-decoration: none; background: rgba(12, 10, 12, 0.8); border: 1px solid var(--sf-gold-line); border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-bevel);
  padding: 10px 14px 12px; text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); min-width: 0; }
a.stat:hover { border-color: var(--sf-gold-500); }
.stat small { display: block; font: 600 0.78rem/1 var(--head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.stat b { display: block; font: 800 2rem/1.1 var(--head); margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gold); }
.stat em { display: block; font-style: normal; font-size: 0.74rem; color: var(--dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat b.none { color: var(--dim); }
.page-hero { min-height: 210px; }
.page-hero .hero-main { padding-top: 64px; }

/* ---------- character switcher ---------- */
.switcher { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; align-items: center; }
.switcher .lbl { font: 600 0.78rem/1 var(--head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px 6px 10px; border-radius: var(--sf-radius-sm);
  text-decoration: none; background: var(--panel); border: 1px solid var(--line2); font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--c, var(--text)); }
.chip:hover { border-color: var(--sf-gold-line); }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--muted)); box-shadow: 0 0 8px var(--c, transparent); }
.chip[aria-current="true"] { border-color: var(--sf-trim); background: var(--sf-gold-bg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
.chip small { color: var(--muted); font-weight: 500; }
.chip.add, .chip svg { color: var(--muted); }
.chip.add { border-style: dashed; color: var(--muted); padding: 6px 10px; }
.chip svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .switcher { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 12px; padding: 2px 14px 4px; scrollbar-width: none; }
  .switcher::-webkit-scrollbar { display: none; }
  .switcher .lbl { display: none; }
}

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--sf-radius-xs); font: 700 0.8rem/1.2 var(--head);
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; --bc: var(--sf-text-muted);
  color: var(--bc); background: color-mix(in srgb, var(--bc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 42%, transparent); }
/* raid groups: solid pills */
.badge.fast_lane, .badge.on_ramp, .badge.open, .badge.guild_pug { border-radius: 999px; color: #fff; padding: 3px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.45); }
.badge.fast_lane { background: var(--sf-group-fast-lane); }
.badge.on_ramp { background: var(--sf-group-on-ramp); }
.badge.open, .badge.guild_pug { background: var(--sf-group-pug); }
.badge.ok { --bc: var(--green); }
.badge.warn, .badge.draft { --bc: var(--amber); }
.badge.bad { --bc: var(--red-text); }
.badge.info { --bc: var(--blue); }
.badge.gold { --bc: var(--gold); }
.badge.ghost { --bc: var(--sf-text-muted); background: transparent; }
.badge.cancelled { --bc: var(--dim); text-decoration: line-through; }
/* a raid night whose date and time aren't final */
.badge.tentative { --bc: var(--amber); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 60%, transparent); outline: 1px dashed color-mix(in srgb, var(--bc) 55%, transparent); outline-offset: 1px; }
/* class icons on raid rosters: coloured = locked in, grey = signed up but waiting (level, caps, tentative, bench) */
.cicon { width: 30px; height: 30px; flex: none; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--c, #888) 70%, transparent); box-shadow: 0 0 0 1px #000; }
.cicon.mono { display: grid; place-items: center; font: 800 1rem/1 var(--head); color: var(--c, #fff); background: #0b0a0d; text-transform: uppercase; }
.cicon.grey { filter: grayscale(1) brightness(0.7); opacity: 0.6; border-color: var(--line2); }
.who li.wait { border-left-color: var(--line2); } .who li.wait b { color: var(--muted); }
.lockin { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--sf-radius-xs); border: 1px solid color-mix(in srgb, var(--sf-trim) 55%, transparent); background: var(--sf-gold-bg); }
.lockin b { color: var(--sf-gold-500); } .lockin svg { width: 20px; height: 20px; flex: none; color: var(--sf-gold-500); }
/* a PvP night (crossed swords) and a night whose start time isn't set */
.badge.pvp { --bc: #ff7a6b; gap: 4px; margin-right: 4px; background: color-mix(in srgb, #8f1d1d 45%, transparent); }
.badge.pvp svg { width: 12px; height: 12px; flex: none; }
.badge.tbd { --bc: var(--sf-text-muted); background: transparent; box-shadow: none; outline: 1px dashed color-mix(in srgb, var(--bc) 70%, transparent); outline-offset: -1px; }
.raidcard .mid > .badge.tentative, .calrow .ci > .badge.tentative, .raidcard .mid > .badge.pvp, .calrow .ci > .badge.pvp { margin-left: 6px; vertical-align: 2px; font-size: 0.7rem; padding: 2px 7px; }
.who li .pref { color: #ffb3a8; } .who li .pref.veto { color: #ff7a6b; font-weight: 700; }
.pvpabout .f { display: flex; align-items: center; gap: 6px; color: #ff9d90; } .pvpabout .f svg { width: 16px; height: 16px; }
.tentnote { display: block; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--sf-radius-xs); border: 1px dashed color-mix(in srgb, var(--amber) 55%, transparent); color: #f6dcae; font-size: 0.9rem; }
.tentnote a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); display: inline-block; }
.pill.ok i { background: var(--green); } .pill.ok { color: #b9ecd2; }
.pill.warn i { background: var(--amber); } .pill.warn { color: #f6dcae; }
.pill.bad i { background: var(--red); }

/* ---------- grid + cards ---------- */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; }
.s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s9 { grid-column: span 9; } .s12 { grid-column: span 12; }
@media (max-width: 1280px) { .s3 { grid-column: span 6; } .s4, .s5 { grid-column: span 6; } .s7, .s8, .s9 { grid-column: span 12; } }
@media (max-width: 720px) { .grid > * { grid-column: span 12 !important; } .grid { gap: 12px; } }
/* Card: stone with a gold frame and corner brackets (theme.css .sf-card) */
.card { position: relative; background: linear-gradient(180deg, var(--sf-surface-2), var(--sf-surface) 60%); border-radius: var(--radius);
  box-shadow: var(--sf-frame), var(--sf-shadow-2); padding: 16px 18px 18px; min-width: 0; display: flex; flex-direction: column; }
.card::after { content: ""; position: absolute; inset: 3px; pointer-events: none; border-radius: calc(var(--radius) - 2px);
  --l: 14px; --t: 1.5px; --g: var(--sf-trim); opacity: 0.7;
  background:
    linear-gradient(var(--g) 0 0) top left / var(--l) var(--t), linear-gradient(var(--g) 0 0) top left / var(--t) var(--l),
    linear-gradient(var(--g) 0 0) top right / var(--l) var(--t), linear-gradient(var(--g) 0 0) top right / var(--t) var(--l),
    linear-gradient(var(--g) 0 0) bottom left / var(--l) var(--t), linear-gradient(var(--g) 0 0) bottom left / var(--t) var(--l),
    linear-gradient(var(--g) 0 0) bottom right / var(--l) var(--t), linear-gradient(var(--g) 0 0) bottom right / var(--t) var(--l);
  background-repeat: no-repeat; }
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-height: 26px; padding-bottom: 9px;
  border-bottom: 1px solid var(--sf-gold-hair); }
.card-h h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.07em; display: flex; align-items: center; gap: 9px; min-width: 0; }
.card-h h2::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--sf-ornament-diamond) center / contain no-repeat; }
.card-h .more { margin-left: auto; color: var(--link); text-decoration: none; font-size: 0.86rem; white-space: nowrap; display: inline-flex; gap: 4px;
  align-items: center; padding: 6px 0; }
.card-h .more:hover { color: #fff1c8; }
.card-h .more svg { width: 14px; height: 14px; }
.card-h .aside { margin-left: auto; color: var(--muted); font-size: 0.85rem; }
.card > .foot { margin-top: auto; padding-top: 12px; }
.card p { margin: 0 0 10px; }
.card .sub { color: var(--muted); font-size: 0.9rem; }
.card.flat { background: var(--panel); }
.card.flat::after { display: none; }
.rows { display: flex; flex-direction: column; }
.rows > * + * { border-top: 1px solid var(--line); }

/* empty states: a calm card body, never a broken table */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px;
  padding: 22px 12px; flex: 1; min-height: 150px; border: 1px dashed var(--sf-gold-line); border-radius: var(--sf-radius-md);
  background: radial-gradient(60% 80% at 50% 0%, var(--sf-gold-bg), transparent 70%); }
.empty svg { width: 32px; height: 32px; color: var(--sf-gold-500); opacity: 0.75; margin-bottom: 4px; }
.empty b { font: 700 1.05rem/1.2 var(--head); letter-spacing: 0.06em; text-transform: uppercase; }
.empty p { margin: 0; color: var(--muted); font-size: 0.9rem; max-width: 36ch; }
.empty .btn { margin-top: 8px; }
.empty.big { min-height: 260px; padding: 40px 20px; }
.empty.big svg { width: 44px; height: 44px; }
.empty.big b { font-size: 1.4rem; }
.empty.big p { max-width: 52ch; font-size: 0.98rem; }

/* ---------- buttons ---------- */
/* Buttons: bevelled; primary is Horde red with a gold edge (theme.css .sf-btn) */
.btn { --b: var(--sf-accent); --bh: var(--sf-accent-hover); --edge: color-mix(in srgb, var(--sf-trim) 70%, transparent);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 18px; border-radius: var(--sf-radius-sm);
  border: 1px solid var(--edge); color: #fff; text-decoration: none; cursor: pointer; line-height: 1.1; white-space: nowrap;
  font: 700 0.98rem/1.1 var(--head); letter-spacing: 0.08em; text-transform: uppercase;
  background: linear-gradient(180deg, color-mix(in srgb, var(--b) 100%, #fff 9%), var(--b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 0 rgba(0, 0, 0, 0.25), var(--sf-shadow-1);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s; -webkit-tap-highlight-color: transparent; }
.btn:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--bh) 100%, #fff 9%), var(--bh)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--sf-glow-red); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn.ghost { --b: var(--sf-raised); --bh: #2c2730; --edge: var(--sf-gold-line); color: var(--gold); }
.btn.ghost:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--sf-glow-gold); }
.btn.green { --b: #2f8a5b; --bh: #36a06a; --edge: rgba(92, 207, 134, 0.6); }
.btn.blue { --b: #2f5fb8; --bh: #3a6fd0; --edge: rgba(106, 166, 255, 0.55); }
.btn.danger { --b: var(--sf-red-900); --bh: var(--sf-red-800); --edge: var(--sf-red-500); color: #ffd6d2; }
.btn.danger:hover { box-shadow: var(--sf-glow-red); }
.btn.sm { min-height: 32px; padding: 5px 12px; font-size: 0.86rem; }
.btn.lg { min-height: 48px; padding: 12px 24px; font-size: 1.12rem; }
.btn.block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: 0.45; pointer-events: none; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; text-decoration: underline; font-size: inherit; text-underline-offset: 2px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { padding: 7px 12px 9px; color: var(--muted); text-decoration: none; font: 600 0.92rem/1 var(--head);
  letter-spacing: 0.08em; text-transform: uppercase; border: 0; background: none; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a, .tabs button { position: relative; }
.tabs a:hover, .tabs button:hover { color: #fff; }
.tabs [aria-selected="true"], .tabs [aria-current="page"] { color: var(--gold); border-bottom-color: transparent; }
.tabs [aria-selected="true"]::after, .tabs [aria-current="page"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sf-trim), transparent); }
.tabs { padding-bottom: 1px; border-bottom-color: var(--sf-gold-hair); }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--sf-radius-sm); padding: 3px; gap: 3px; background: var(--field); flex-wrap: wrap; }
.seg a, .seg button { padding: 7px 12px; border-radius: var(--sf-radius-xs); text-decoration: none; color: var(--muted); font: 700 0.86rem/1.1 var(--head);
  letter-spacing: 0.08em; text-transform: uppercase; background: none; border: 0; cursor: pointer; }
.seg a:hover, .seg button:hover { color: var(--text); }
.seg [aria-current="page"], .seg [aria-pressed="true"] { background: var(--sf-raised); color: var(--gold); box-shadow: inset 0 0 0 1px var(--sf-gold-line); }

/* ---------- lists ---------- */
.charrow { display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 0; text-decoration: none; position: relative; }
.charrow:hover { background: rgba(255, 236, 200, 0.03); }
.mono-av { width: 42px; height: 42px; flex: none; border-radius: 9px; display: grid; place-items: center;
  font: 800 1.35rem/1 var(--head); color: var(--c, #fff); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c, #888) 26%, #17131a), #0b0a0d 75%);
  border: 2px solid color-mix(in srgb, var(--c, #888) 70%, transparent); text-transform: uppercase;
  box-shadow: 0 0 0 1px #000, inset 0 0 8px rgba(0, 0, 0, 0.7); }
.mono-av.lg { width: 64px; height: 64px; font-size: 2rem; border-radius: 12px; }
.charrow .stripe { width: 3px; align-self: stretch; border-radius: 2px; background: var(--c, var(--line2)); }
.charrow .nm { min-width: 0; flex: 1; }
.charrow .nm b { display: block; color: var(--c, #fff); font: 700 1.12rem/1.15 var(--head); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.charrow .nm small { color: var(--muted); font-size: 0.86rem; }
.charrow .chev { width: 18px; height: 18px; color: var(--dim); flex: none; }
.charrow[aria-current="true"] { background: linear-gradient(90deg, var(--sf-gold-bg), transparent 90%); border-radius: var(--sf-radius-sm);
  box-shadow: inset 2px 0 0 var(--sf-trim); }
/* Role tags: tank shield blue, healer green, DPS red (theme.css --sf-role-*) */
.role-tag { --rc: var(--muted); display: inline-flex; align-items: center; gap: 4px; font: 700 0.76rem/1 var(--head); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rc); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
  background: color-mix(in srgb, var(--rc) 10%, transparent); border-radius: var(--sf-radius-xs); padding: 3px 6px; white-space: nowrap; }
.role-tag::before { content: ""; width: 10px; height: 10px; flex: none; background: currentColor; -webkit-mask: var(--ri) center / contain no-repeat; mask: var(--ri) center / contain no-repeat; }
.role-tag:not(.Tank):not(.Healer):not(.DPS)::before { display: none; }
.role-tag.Tank { --rc: var(--sf-role-tank); --ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z'/%3E%3C/svg%3E"); }
.role-tag.Healer { --rc: var(--sf-role-healer); --ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v6h6v6h-6v6H9v-6H3V9h6z'/%3E%3C/svg%3E"); }
.role-tag.DPS { --rc: var(--sf-role-dps); --ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2h2v2L9.5 16.5l1.8 1.8-1.4 1.4-1.8-1.8L5 21l-2-2 3.1-3.1-1.8-1.8 1.4-1.4 1.8 1.8L20 2z'/%3E%3C/svg%3E"); }
.bar { height: 8px; border-radius: 2px; background: var(--sf-sunken); overflow: hidden; flex: 1; min-width: 40px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--sf-gold-hair); }
.bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 2px;
  background: linear-gradient(180deg, #ef6b5f, var(--sf-red-500) 55%, #8f1a14); }
.bar.blue i { background: linear-gradient(180deg, #8fbcff, var(--sf-blue) 55%, #2f5fb8); }
.bar.green i { background: linear-gradient(180deg, #8ae6aa, var(--sf-green) 55%, #2f8a5b); }
.bar.gold i { background: linear-gradient(180deg, #f8dd94, var(--sf-gold-500) 55%, var(--sf-gold-700)); }

table.t { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.t th { text-align: left; font: 700 0.78rem/1 var(--head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-gold-500);
  padding: 6px 8px 8px; border-bottom: 1px solid var(--sf-gold-line); white-space: nowrap; }
table.t td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.r, table.t th.r { text-align: right; }
table.t tbody tr:nth-child(even) td { background: rgba(255, 236, 200, 0.018); }
table.t tr.me td { background: var(--sf-gold-bg); }
table.t a { text-decoration: none; }
table.t a:hover { text-decoration: underline; }
.tablewrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

/* raid date block */
.rdate { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; flex: none; text-align: center;
  border: 1px solid var(--sf-gold-line); border-radius: var(--sf-radius-sm); padding: 7px 0; background: var(--field); box-shadow: var(--sf-bevel); }
.rdate small { font: 600 0.74rem/1 var(--head); letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.rdate b { font: 800 1.6rem/1 var(--head); margin: 3px 0 2px; }
.rdate em { font-style: normal; font: 700 0.74rem/1 var(--head); letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; }
.upcoming { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.uraid { display: flex; flex-direction: column; gap: 6px; text-decoration: none; border: 1px solid var(--line2); border-radius: var(--sf-radius-md);
  padding: 12px; background: linear-gradient(180deg, var(--sf-surface-2), var(--sf-sunken)); text-align: center; align-items: center; box-shadow: var(--sf-bevel); }
.uraid:hover { border-color: var(--sf-gold-500); }
.uraid .d { font: 600 0.85rem/1 var(--head); letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.uraid .dd { font: 800 1.45rem/1 var(--head); text-transform: uppercase; color: var(--gold); }
.uraid .tm { font-size: 0.82rem; color: var(--muted); }
.uraid .inst { font-weight: 600; }

/* news: parchment notices with the brand emblem as the seal */
.news { display: flex; gap: 12px; padding: 12px 14px; margin: 0 0 10px; border-radius: var(--sf-radius-sm); color: var(--sf-ink);
  background: var(--sf-parchment-grain), radial-gradient(120% 90% at 50% 40%, var(--sf-parchment) 55%, var(--sf-parchment-2) 100%);
  box-shadow: 0 0 0 1px var(--sf-parchment-edge), inset 0 0 0 2px rgba(255, 248, 228, 0.3), inset 0 0 18px rgba(122, 84, 30, 0.3), var(--sf-shadow-1); }
.rows > .news + .news { border-top: 0; }
.news:last-child { margin-bottom: 0; }
.news .av { width: 40px; height: 40px; flex: none; background: var(--sf-emblem) center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(60, 30, 10, 0.4)); }
.news small { color: var(--sf-ink-muted); font-size: 0.8rem; }
.news b { display: block; line-height: 1.2; margin: 1px 0 3px; color: #3a0b08; font: 700 1.12rem/1.15 var(--head); letter-spacing: 0.02em; }
.news p { margin: 0; color: var(--sf-ink); font-size: 0.92rem; white-space: pre-line; }
.news a, .news .linkbtn { color: var(--sf-ink-link); font-weight: 600; }
.news summary { cursor: pointer; list-style: none; }
.news summary::-webkit-details-marker { display: none; }
.news .pin { color: var(--sf-red-700); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-left: 6px; }

/* downloads strip on dashboard */
.dlrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.dlrow .ic { width: 34px; height: 34px; border-radius: var(--sf-radius-sm); display: grid; place-items: center; background: var(--field); border: 1px solid var(--sf-gold-line); flex: none; }
.dlrow .ic svg { width: 18px; height: 18px; color: var(--gold); }
.dlrow .ic img { width: 26px; height: 26px; display: block; }
.dlrow .nm { flex: 1; min-width: 0; }
.dlrow .nm b { font-weight: 600; }
.dlrow .nm small { color: var(--muted); margin-left: 6px; }
.guide { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line2); border-radius: var(--sf-radius-md); text-decoration: none;
  background: var(--field); box-shadow: var(--sf-bevel); }
.guide:hover { border-color: var(--sf-gold-500); }
.guide .ic { width: 46px; height: 46px; border-radius: var(--sf-radius-sm); display: grid; place-items: center; background: radial-gradient(circle, #3a2a14, #1b1610);
  border: 1px solid var(--sf-gold-line); flex: none; }
.guide .ic svg { width: 24px; height: 24px; color: var(--sf-gold-500); }
.guide b { display: block; } .guide small { color: var(--muted); }
.guide .chev { margin-left: auto; width: 18px; color: var(--dim); flex: none; }
.guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }

/* loot score bars */
.scorebars { display: grid; grid-template-columns: auto minmax(0, 1fr) 34px; gap: 9px 12px; align-items: center; font-size: 0.92rem; }
.scorebars .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.scorebars .v.none { color: var(--dim); font-weight: 400; }
.bigpts { display: flex; align-items: baseline; gap: 14px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.bigpts small { display: block; font: 600 0.8rem/1 var(--head); letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.bigpts b { font: 800 2.2rem/1 var(--head); color: var(--gold); }
.bigpts .delta { color: var(--green); font-weight: 600; }
.bigpts .delta.neg { color: var(--red-text); }

/* items: our own rendering (tooltip.js enhances anything with data-item) */
.item { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
/* Item quality: --q frames icons (official colour), --qt colours the name (AA-safe on stone) */
.item .ii { width: 30px; height: 30px; border-radius: var(--sf-radius-sm); border: 2px solid var(--q, #5a5260); background: #0b0a0d center / cover;
  flex: none; display: grid; place-items: center; color: var(--dim); font-size: 0.7rem; box-shadow: 0 0 0 1px #000, inset 0 0 6px rgba(0, 0, 0, 0.7); }
.item .nm { color: var(--qt, var(--q, #d6cebf)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q0 { --q: var(--sf-q-poor); } .q1 { --q: var(--sf-q-common); } .q2 { --q: var(--sf-q-uncommon); }
.q3 { --q: var(--sf-q-rare); --qt: var(--sf-q-rare-text); } .q4 { --q: var(--sf-q-epic); --qt: var(--sf-q-epic-text); } .q5 { --q: var(--sf-q-legendary); }
.q6 { --q: var(--sf-q-artifact); }
.item.q1 .ii, .item.q0 .ii { border-color: #6b6470; }
.page-h h1.item-h { color: var(--qt, var(--q, var(--text))); text-shadow: 0 0 22px color-mix(in srgb, var(--q, transparent) 30%, transparent); }

/* character page: paper doll */
.doll { display: grid; grid-template-columns: 1fr minmax(0, 1.2fr) 1fr; gap: 10px; align-items: start; }
.doll .col { display: flex; flex-direction: column; gap: 8px; }
.slot { display: flex; align-items: center; gap: 10px; }
.slot .box { width: 50px; height: 50px; border-radius: var(--sf-radius-sm); border: 1px solid var(--sf-gold-hair); flex: none; display: grid; place-items: center;
  color: var(--dim); background: radial-gradient(circle at 50% 35%, #1d1820, #09080b 75%); box-shadow: 0 0 0 1px #000, inset 0 0 10px rgba(0, 0, 0, 0.8); }
.slot .box svg { width: 18px; height: 18px; }
.slot span { font-size: 0.86rem; color: var(--muted); }
.doll .col.r .slot { flex-direction: row-reverse; text-align: right; }
.doll .mid { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border-radius: 12px; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--c, #888) 18%, transparent), transparent 70%);
  padding: 16px; gap: 8px; min-height: 280px; }
.doll .mid p { color: var(--muted); margin: 0; font-size: 0.92rem; max-width: 26ch; }
.doll .weap { grid-column: 1 / -1; display: flex; justify-content: center; gap: 22px; }
.doll .weap .slot { flex-direction: column; gap: 4px; }
@media (max-width: 600px) {
  .doll { grid-template-columns: 1fr 1fr; }
  .doll .mid { grid-column: 1 / -1; order: -1; min-height: 0; padding: 10px; }
  .slot .box { width: 42px; height: 42px; }
}

/* toggles */
.toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 8px 0; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .sw { width: 44px; height: 26px; border-radius: 999px; background: var(--sf-sunken); position: relative; flex: none; transition: background 0.2s;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--sf-gold-line); }
.toggle .sw::after { content: ""; position: absolute; left: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; transition: transform 0.2s;
  background: linear-gradient(180deg, #cfc6b8, #8e8576); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.toggle input:checked + .sw { background: linear-gradient(180deg, var(--sf-red-500), var(--sf-red-700)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--sf-trim); }
.toggle input:checked + .sw::after { transform: translateX(18px); background: linear-gradient(180deg, #fff1c8, var(--sf-gold-500)); }
.toggle input:focus-visible + .sw { outline: 2px solid var(--sf-gold-300); outline-offset: 2px; }
.toggle .tl { flex: 1; }
.toggle .tl b { display: block; font-weight: 600; }
.toggle .tl small { color: var(--muted); }

/* forms */
.form label.f, .f { display: block; font-weight: 600; font-size: 0.9rem; margin: 0 0 6px; }
.f small { font-weight: 400; color: var(--muted); }
.in, .form input[type=text], .form input[type=number], .form input[type=date], .form input[type=search], .form select, .form textarea {
  width: 100%; min-height: 40px; padding: 9px 11px; border-radius: var(--sf-radius-sm); border: 1px solid rgba(224, 178, 78, 0.22); background: var(--field);
  color: var(--text); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); }
.form textarea { min-height: 84px; resize: vertical; }
.in:focus, .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--sf-gold-500); outline: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), var(--sf-glow-gold); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 16px; }
.fgrid .wide { grid-column: 1 / -1; }
.form .row { margin-bottom: 14px; }
.check { display: flex; gap: 9px; align-items: flex-start; font-weight: 400; font-size: 0.95rem; cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--sf-red-600); width: 16px; height: 16px; }
.hint { color: var(--muted); font-size: 0.85rem; margin: 4px 0 0; }
.err { color: var(--red-text); font-size: 0.88rem; }
.notice { border: 1px solid rgba(92, 207, 134, 0.45); border-left-width: 3px; background: var(--green-bg); color: #cff3dd; border-radius: var(--sf-radius-sm);
  padding: 10px 14px; margin: 0 0 14px; }
.notice.bad { border-color: rgba(214, 58, 47, 0.55); background: var(--red-bg); color: #ffd6d2; }
.notice.warn { border-color: rgba(242, 178, 76, 0.45); background: var(--amber-bg); color: #f8e2bf; }
.capgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.capgrid.cls { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.capgrid label { font-size: 0.85rem; font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
.capgrid label span { color: var(--c, var(--muted)); }
details.box { border: 1px solid var(--line2); border-radius: var(--sf-radius-md); padding: 10px 14px; background: var(--field); }
details.box summary { cursor: pointer; font-weight: 600; min-height: 28px; }
details.box summary::marker { color: var(--sf-gold-500); }
details.box[open] summary { margin-bottom: 10px; }

/* raids: sign-up and roster */
.raidhead { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.raidhead .rdate { width: 74px; }
.facts { display: flex; gap: 8px; flex-wrap: wrap; }
.fact { border: 1px solid var(--line2); border-radius: var(--sf-radius-sm); padding: 7px 12px; background: var(--field); font-size: 0.9rem; color: var(--muted); box-shadow: var(--sf-bevel); }
.fact b { color: var(--gold); font-weight: 700; font-family: var(--head); font-size: 1.1rem; margin-right: 4px; }
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cap { border: 1px solid var(--line2); border-radius: var(--sf-radius-sm); padding: 10px 12px; background: var(--field); box-shadow: var(--sf-bevel); }
.cap small { font: 600 0.8rem/1 var(--head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.cap b { font: 800 1.7rem/1.1 var(--head); display: block; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.cap b span { color: var(--dim); font-size: 1.15rem; font-weight: 600; }
.cap.full { border-color: rgba(214, 58, 47, 0.6); }
.cap.full small em { color: var(--red-text); font-style: normal; }
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.pick label { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line2); border-radius: var(--sf-radius-sm); padding: 8px 10px; cursor: pointer;
  background: var(--field); min-height: 52px; }
.pick label:hover { border-color: var(--sf-gold-line); }
.pick label:has(input:checked) { border-color: var(--sf-trim); background: var(--sf-gold-bg); box-shadow: inset 3px 0 0 var(--c, var(--sf-trim)); }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick label:has(input:focus-visible) { outline: 2px solid var(--sf-gold-300); outline-offset: 2px; }
.pick .nm b { display: block; color: var(--c); font: 700 1.05rem/1.1 var(--head); }
.pick .nm small { color: var(--muted); font-size: 0.8rem; }
.pick .mono-av { width: 34px; height: 34px; font-size: 1.1rem; border-radius: 7px; }
.statusbtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.statusbtns button { min-height: 46px; padding: 11px 8px; border-radius: var(--sf-radius-sm); border: 1px solid var(--line2); cursor: pointer;
  font: 700 0.95rem/1.1 var(--head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold);
  background: linear-gradient(180deg, #27222b, var(--sf-raised)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.25); }
.statusbtns button:hover { border-color: var(--sf-gold-500); }
.statusbtns .go { color: #fff; border-color: color-mix(in srgb, var(--sf-trim) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sf-accent) 100%, #fff 9%), var(--sf-accent)); }
.statusbtns .go:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--sf-accent-hover) 100%, #fff 9%), var(--sf-accent-hover)); box-shadow: var(--sf-glow-red); }
.mystatus { display: flex; gap: 12px; align-items: center; border-radius: var(--sf-radius-sm); padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--line2);
  border-left-width: 3px; }
.mystatus.signed { border-color: rgba(92, 207, 134, 0.55); background: var(--green-bg); }
.mystatus.signed svg { color: var(--green); }
.mystatus.bench, .mystatus.tentative { border-color: rgba(242, 178, 76, 0.5); background: var(--amber-bg); }
.mystatus.bench svg, .mystatus.tentative svg { color: var(--amber); }
.mystatus.declined { background: rgba(255, 236, 200, 0.03); }
.mystatus svg { width: 26px; height: 26px; flex: none; }
.mystatus b { display: block; }
.mystatus small { color: var(--muted); }
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .rgrid { grid-template-columns: minmax(0, 1fr); } .caps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .cap { padding: 8px; } .cap b { font-size: 1.35rem; } }
.rcol h3 { font-size: 1rem; letter-spacing: 0.12em; color: var(--sf-gold-500); display: flex; justify-content: space-between; margin-bottom: 6px;
  padding-bottom: 6px; border-bottom: 1px solid var(--sf-gold-hair); }
.who { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.who li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--sf-radius-xs); background: var(--field); border-left: 3px solid var(--c, var(--line2)); min-width: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
.who li b { color: var(--c); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who li small { color: var(--muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who li .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.who li.me { outline: 1px solid var(--sf-trim); background: var(--sf-gold-bg); }
.who li select { width: auto; padding: 3px 6px; font-size: 0.8rem; border-radius: var(--sf-radius-xs); background: var(--sf-sunken); border: 1px solid var(--line2); color: var(--text); }
.who li.emptyli { color: var(--dim); font-size: 0.85rem; border-left-color: transparent; background: none; padding-left: 2px; }
.raidlist { display: flex; flex-direction: column; gap: 10px; }
.raidcard { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line2); border-radius: var(--sf-radius-md);
  background: linear-gradient(180deg, var(--sf-surface-2), var(--sf-surface)); text-decoration: none; flex-wrap: wrap; box-shadow: var(--sf-bevel), var(--sf-shadow-1); }
.raidcard:hover { border-color: var(--sf-gold-500); }
.raidcard .mid { flex: 1; min-width: 180px; }
.raidcard .mid b { font: 700 1.35rem/1.1 var(--head); text-transform: uppercase; letter-spacing: 0.02em; }
.raidcard .mid small { display: block; color: var(--muted); }
.raidcard .counts { display: flex; gap: 14px; font-size: 0.88rem; color: var(--muted); flex-wrap: wrap; }
.raidcard .counts b { color: var(--text); font-variant-numeric: tabular-nums; }
.raidcard .counts .full b { color: var(--red-text); }
.raidcard .mine { min-width: 130px; text-align: right; }
@media (max-width: 600px) { .raidcard .mine { text-align: left; min-width: 0; width: 100%; } }

/* officer area */
.ohome { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.otile { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line2); border-radius: var(--sf-radius-md); text-decoration: none;
  background: linear-gradient(180deg, var(--sf-surface-2), var(--sf-surface)); box-shadow: var(--sf-bevel), var(--sf-shadow-1); }
.otile:hover { border-color: var(--sf-gold-500); }
.otile svg { width: 24px; height: 24px; color: var(--gold); }
.otile b { font: 700 1.2rem/1.1 var(--head); text-transform: uppercase; letter-spacing: 0.04em; }
.otile small { color: var(--muted); }
.otile .n { margin-top: auto; font-size: 0.85rem; color: var(--muted); }
.audit li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.audit { list-style: none; margin: 0; padding: 0; }
.audit li:first-child { border-top: 0; }
.audit time { color: var(--muted); font-size: 0.84rem; }
.audit b { font-weight: 600; }
.audit .area { font: 700 0.72rem/1 var(--head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-gold-500); margin-right: 6px; }
.audit details { margin-top: 4px; font-size: 0.82rem; color: var(--muted); }
.audit pre { white-space: pre-wrap; word-break: break-word; background: var(--field); padding: 8px; border-radius: var(--sf-radius-xs); margin: 4px 0 0; font-size: 0.78rem; }
@media (max-width: 600px) { .audit li { grid-template-columns: 1fr; gap: 2px; } }

/* question editor */
.qlist { display: flex; flex-direction: column; gap: 10px; }
.qcard { border: 1px solid var(--line2); border-radius: var(--sf-radius-md); background: linear-gradient(180deg, var(--sf-surface-2), var(--sf-surface)); box-shadow: var(--sf-bevel); }
.qcard.dragging { border-color: var(--sf-trim); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), var(--sf-glow-gold); }
.qcard.off { opacity: 0.6; }
.qtop { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; }
.qtop .grip { border: 0; background: none; color: var(--dim); cursor: grab; touch-action: none; padding: 2px 4px; font-size: 1.2rem; line-height: 1; border-radius: 6px; }
.qtop .grip { min-width: 32px; min-height: 32px; }
.qtop .grip:hover { color: #fff; background: rgba(255, 236, 200, 0.06); }
.qtop .qn { font: 800 1.2rem/1 var(--head); color: var(--gold); min-width: 1.6em; padding-top: 2px; }
.qtop .qt { flex: 1; min-width: 0; }
.qtop .qt b { font-weight: 600; display: block; }
.qtop .qt .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.qtop .acts { display: flex; gap: 6px; flex: none; }
.qopts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qopts span { font-size: 0.82rem; border: 1px solid var(--line2); border-radius: 999px; padding: 2px 10px; color: var(--muted); }
.qopts span.flag { border-color: rgba(214, 58, 47, 0.6); color: var(--red-text); }
.qedit { border-top: 1px solid var(--line); padding: 14px; }
.preview { border: 1px solid var(--line2); border-radius: var(--sf-radius-md); padding: 16px; background: var(--sf-sunken); }
.preview legend, .preview .pq { font-weight: 600; margin-bottom: 8px; display: block; }
.preview .po { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line2); border-radius: var(--sf-radius-sm); margin-bottom: 6px; background: rgba(5, 4, 6, 0.45); }
.preview .po.flag { border-color: rgba(214, 58, 47, 0.5); }
.preview .po em { margin-left: auto; color: var(--red-text); font-size: 0.78rem; font-style: normal; }

/* downloads page */
.dlgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.dl { display: flex; flex-direction: column; gap: 12px; }
.dl .top { display: flex; gap: 14px; align-items: center; }
.dl .logo { width: 70px; height: 70px; border-radius: var(--sf-radius-md); display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 50% 35%, #2b2018, #0b0a0d 80%); box-shadow: 0 0 0 1px var(--sf-gold-line), inset 0 0 12px rgba(0, 0, 0, 0.8); }
.dl .logo svg { width: 36px; height: 36px; color: var(--gold); }
.dl h2 { font-size: 1.45rem; }
.dl .ver { font: 500 0.88rem/1.3 var(--mono); color: var(--muted); }
.dl .meta { font-size: 0.82rem; color: var(--muted); text-align: center; }
.dl ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 0.9rem; }
.dl ul li::marker { color: var(--sf-gold-500); }
/* one product: Speeding Fines (with SF-Stats inside) is the big card, SF-Speed beside it */
@media (min-width: 900px) { .dlgrid-one { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
/* the app card: four dark feature boxes, each explained on hover / focus (in full on touch screens) */
.dl .dl-feats { list-style: none; margin: 0; padding: 0; color: var(--text); font-size: inherit; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dl-feat { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--sf-radius-sm);
  background: linear-gradient(180deg, #121014, #0b0a0d); box-shadow: inset 0 0 0 1px var(--sf-gold-hair), inset 0 1px 0 rgba(255, 236, 200, 0.04);
  cursor: help; transition: box-shadow 0.15s, background 0.15s; outline: none; }
.dl-feat:hover, .dl-feat:focus-visible { box-shadow: inset 0 0 0 1px var(--sf-gold-line), 0 0 0 1px rgba(0, 0, 0, 0.6); background: linear-gradient(180deg, #17131a, #0d0b0f); }
.dl-feat:focus-visible { box-shadow: inset 0 0 0 1px var(--sf-gold-300); }
.dl-feat .fi { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--sf-accent) 40%, #1a1418), #0d0b0e 75%); box-shadow: 0 0 0 1px var(--sf-gold-line); }
.dl-feat .fi svg { width: 17px; height: 17px; color: var(--sf-gold-300); }
.dl-feat .ft { min-width: 0; }
.dl-feat b { display: block; font-weight: 600; font-size: 0.9rem; line-height: 1.25; color: var(--text); }
.dl-feat small { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.35; margin-top: 2px; }
.dl-feat .tip { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); z-index: 20; padding: 8px 11px; border-radius: var(--sf-radius-sm);
  font-size: 0.83rem; line-height: 1.45; color: var(--text); background: #0b0a0e; box-shadow: 0 0 0 1px var(--sf-gold-line), var(--sf-shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s, visibility 0s 0.15s; pointer-events: none; }
.dl-feat:hover .tip, .dl-feat:focus-visible .tip { opacity: 1; visibility: visible; transform: none; transition: opacity 0.15s, transform 0.15s; }
@media (hover: none) {
  .dl-feat { cursor: default; flex-wrap: wrap; }
  .dl-feat .tip { position: static; opacity: 1; visibility: visible; transform: none; padding: 0; background: none; box-shadow: none;
    flex-basis: 100%; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
}
@media (max-width: 520px) { .dl .dl-feats { grid-template-columns: minmax(0, 1fr); } }
.dl sup.fn, .dl-fnote sup { font-size: 0.68em; line-height: 0; vertical-align: super; color: var(--sf-gold-300); font-weight: 700; margin-left: 1px; }
.dl-fnote { margin: 0; font-size: 0.76rem; color: var(--dim); }
/* SHA-256 under a download button: small, monospace, wraps on phones, one click selects it all for copying */
.dl-hash { margin: 4px 0 0; font-size: 0.72rem; color: var(--dim); text-align: center; overflow-wrap: anywhere; }
.dl-hash span { letter-spacing: 0.06em; font-weight: 700; color: var(--muted); }
.dl-hash code { font-size: 0.95em; user-select: all; cursor: text; color: var(--muted); background: none; padding: 0; }
.dl .logo:has(img.pic) { background: none; box-shadow: none; width: 76px; height: 76px; }
.dl .logo img.pic { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)); }
.dl .ver.vsub { font-size: 0.8rem; color: var(--dim); margin-top: 2px; }
/* SF-Speed: the card's header is the link to its page */
a.dl-head { color: inherit; text-decoration: none; margin: -8px; padding: 8px; border-radius: var(--sf-radius-md); transition: background 0.15s, box-shadow 0.15s; }
a.dl-head h2 { transition: color 0.15s; }
a.dl-head .go { margin-left: auto; align-self: center; color: var(--dim); transition: transform 0.15s, color 0.15s; }
a.dl-head .go svg { width: 20px; height: 20px; display: block; }
a.dl-head:hover, a.dl-head:focus-visible { background: rgba(255, 236, 200, 0.045); box-shadow: inset 0 0 0 1px var(--sf-gold-hair); }
a.dl-head:hover h2, a.dl-head:focus-visible h2 { color: var(--sf-gold-300); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a.dl-head:hover .go, a.dl-head:focus-visible .go { color: var(--sf-gold-300); transform: translateX(3px); }
.dl .dl-ok { pointer-events: none; color: var(--green); border-color: rgba(63, 178, 127, 0.45); }
.dl .dl-ok svg { color: var(--green); }
.dl .dl-miss { color: var(--amber); }
.dl-adv { border-top: 1px solid var(--line2); padding-top: 10px; }
.dl-adv summary { cursor: pointer; color: var(--muted); font-size: 0.86rem; }
.dl-adv p { margin: 8px 0; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.steps3 > div { display: flex; gap: 12px; align-items: flex-start; }
.steps3 .n { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--sf-trim); color: var(--gold); display: grid; place-items: center; font: 800 1.3rem/1 var(--head); flex: none;
  background: radial-gradient(circle, var(--sf-red-800), var(--sf-red-900)); box-shadow: 0 0 0 1px #000; }
.steps3 p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .steps3 { grid-template-columns: 1fr; } }

/* bank placeholder grid */
.bankgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.bankgrid i { aspect-ratio: 1; border-radius: var(--sf-radius-xs); border: 1px solid var(--sf-gold-hair); background: radial-gradient(circle at 50% 35%, #1d1820, #09080b 75%);
  box-shadow: 0 0 0 1px #000, inset 0 0 8px rgba(0, 0, 0, 0.8); }

/* prose (privacy) */
.prose { max-width: 74ch; }
.prose h2 { font-size: 1.4rem; margin: 26px 0 8px; display: flex; align-items: center; gap: 10px; }
.prose h2::before { content: ""; width: 11px; height: 11px; flex: none; background: var(--sf-ornament-diamond) center / contain no-repeat; }
.prose h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--sf-gold-line), transparent); }
.prose p, .prose li { color: #d8cfc1; }
.prose a { color: var(--link); text-underline-offset: 2px; }
.prose ul { padding-left: 20px; }
.prose b { color: #fff; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--sf-raised); border-left: 3px solid var(--green);
  color: #fff; padding: 11px 16px; border-radius: var(--sf-radius-md); box-shadow: 0 0 0 1px var(--sf-gold-hair), var(--sf-shadow-3); opacity: 0; transition: 0.25s;
  z-index: 90; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translateX(-50%); }
.toast.bad { border-left-color: var(--sf-red-500); }
@media (max-width: 900px) { .toast { bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* public pages (privacy for logged-out visitors) */
.solo { max-width: 860px; margin: 0 auto; padding: 28px 16px 60px; }
.solo .brand { padding: 0 0 24px; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); background-position: 30% 30%; background-size: cover; }
  .hero-main { grid-column: 1; padding: 120px 18px 18px; width: auto; }
  .hero::before { background: linear-gradient(0deg, rgba(5, 6, 8, 0.96) 18%, rgba(5, 6, 8, 0.5) 55%, rgba(5, 6, 8, 0.15) 100%); }
}
@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats .stat:last-child { grid-column: 1 / -1; }
  .stamp { font-size: 0.72rem; gap: 0 14px; top: 10px; left: 12px; }
  .hero-main { padding: 100px 14px 14px; }
  .hero h1 { font-size: 2.9rem; }
  .stat b { font-size: 1.65rem; }
  .card { padding: 14px 14px 16px; }
  .page-h h1 { font-size: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

dialog:not([open]) { display: none !important; }
dialog { border: 0; padding: 18px; background: linear-gradient(180deg, var(--sf-surface-2), var(--sf-surface)); color: var(--text);
  border-radius: var(--sf-radius-md); box-shadow: var(--sf-frame), var(--sf-shadow-3); max-width: min(640px, calc(100vw - 24px)); }
dialog::backdrop { background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(2px); }
.t.bis td { vertical-align: top; }
.alts { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 6px; font-size: 0.8rem; color: var(--dim); }
.alts .item .ii { width: 20px; height: 20px; border-width: 1px; border-radius: 4px; }
.alts .item .nm { font-weight: 500; }
.item[data-fill] { cursor: default; }
.item.era .nm::after { content: "*"; color: var(--dim); margin-left: 2px; }
.bisinfo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--sf-radius-sm); background: var(--field); border: 1px solid var(--line2); }
.bisinfo p { margin: 0; flex: 1; min-width: min(200px, 100%); color: var(--muted); font-size: 0.9rem; }
.bislist { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bislist li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--sf-radius-sm); background: var(--field); border: 1px solid var(--line2); }
.bislist li .grow { flex: 1; min-width: 0; }

.t.mvb { table-layout: fixed; }
.t.mvb td:first-child { overflow: hidden; }
.t.mvb td.slotc { width: 74px; white-space: nowrap; }
.t td .item { max-width: 100%; }
.nowrap { white-space: nowrap; }

.mvb .item { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; align-items: center; }
.mvb .item .ii { grid-row: span 2; }
.mvb .item .nm { line-height: 1.2; }
.mvb .item .sl { color: var(--dim); font-size: 0.78rem; line-height: 1.2; }
.ench-m { display: none; color: var(--green); font-size: 0.8rem; margin-top: 4px; }
@media (max-width: 640px) {
  .t.bis th:nth-child(3), .t.bis td:nth-child(3) { display: none; }
  .t.bis td:first-child { width: 62px !important; font-size: 0.82rem; }
  .ench-m { display: block; }
}
.qtop .grip svg, .grip svg { width: 18px; height: 18px; display: block; }
.otile .n b { font: inherit; text-transform: none; letter-spacing: 0; }
.card.top { align-self: start; }
.hint svg { width: 14px; height: 14px; vertical-align: -2px; }
@media (max-width: 640px) {
  .qtop { flex-wrap: wrap; }
  .qtop .qt { flex: 1 1 calc(100% - 70px); }
  .qtop .acts { width: 100%; justify-content: flex-end; }
  .t.members th:nth-child(3), .t.members td:nth-child(3), .t.members th:nth-child(5), .t.members td:nth-child(5),
  .t.members th:nth-child(6), .t.members td:nth-child(6) { display: none; }
  .t.members select { min-width: 0 !important; width: 116px; }
  .who li { flex-wrap: wrap; }
}

/* ---------- public shell: logged-out visitors and not-yet-members (guides, privacy) ---------- */
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 8px 12px; border-radius: var(--sf-radius-sm); background: var(--panel2); color: #fff;
  box-shadow: 0 0 0 1px var(--sf-gold-line); }
.skip:focus { top: 8px; }
.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 22px; padding-left: 12px; border-left: 1px solid var(--line); }
.nav-sub a { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 7px; text-decoration: none; color: var(--muted);
  font-size: 0.9rem; line-height: 1.3; position: relative; }
.nav-sub a:hover { color: #fff; background: rgba(255, 236, 200, 0.045); }
.nav-sub a[aria-current="page"], .nav-sub a.here { color: var(--gold); background: rgba(255, 236, 200, 0.06); }
.nav-sub a[aria-current="page"]::before { content: ""; position: absolute; left: -13px; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--sf-trim); }
.nav-sub small { margin-left: auto; color: var(--dim); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.nav-sub .nh { margin: 8px 10px 2px; font: 700 0.68rem/1 var(--head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.nav-sub .nh:first-child { margin-top: 4px; }
.nav-sub a.lv2 { margin-left: 12px; font-size: 0.86rem; padding-top: 4px; padding-bottom: 4px; }
.nav-sub a.lv2[aria-current="page"]::before { left: -25px; }
/* Guides menu: each section's glyph in its colour (theme.css --sf-sec-*; guides.js guideSubnav) */
.nav-sub a[data-sec] { --sec: var(--sf-trim); --sec-text: var(--sf-gold-300); }
.nav-sub a[data-sec="basics"] { --sec: var(--sf-sec-basics); --sec-text: var(--sf-sec-basics-text); }
.nav-sub a[data-sec="levelling"] { --sec: var(--sf-sec-levelling); --sec-text: var(--sf-sec-levelling-text); }
.nav-sub a[data-sec="professions"] { --sec: var(--sf-sec-professions); --sec-text: var(--sf-sec-professions-text); }
.nav-sub a[data-sec="endgame"] { --sec: var(--sf-sec-endgame); --sec-text: var(--sf-sec-endgame-text); }
.nav-sub a[data-sec="meta"] { --sec: var(--sf-sec-meta); --sec-text: var(--sf-sec-meta-text); }
.nav-sub a[data-sec="classes"] { --sec: var(--sf-sec-classes); --sec-text: var(--sf-sec-classes-text); }
.nav-sub .g-nic { width: 16px; height: 16px; flex: none; color: var(--sec, var(--dim)); opacity: 0.85; }
.nav-sub a[data-sec]:hover .g-nic { opacity: 1; }
.nav-sub a[data-sec][aria-current="page"], .nav-sub a[data-sec].here { color: var(--sec-text); }
.nav-sub a[data-sec][aria-current="page"] .g-nic, .nav-sub a[data-sec].here .g-nic { opacity: 1; }
.nav-sub a[data-sec][aria-current="page"]::before { background: var(--sec); }
.nav-sub a.lv2 .g-nic { width: 14px; height: 14px; color: var(--dim); }
.nav-sub i.cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.join-card { position: relative; padding: 12px; border-radius: var(--sf-radius-md); border: 1px solid var(--sf-gold-line);
  background: linear-gradient(160deg, rgba(179, 36, 27, 0.2), rgba(179, 36, 27, 0.03) 60%), var(--panel);
  box-shadow: var(--sf-bevel); display: flex; flex-direction: column; gap: 8px; }
.join-card > b { font: 800 1.15rem/1.1 var(--head); text-transform: uppercase; letter-spacing: 0.03em; color: var(--gold); }
.join-card p { margin: 0 0 2px; color: var(--muted); font-size: 0.84rem; line-height: 1.4; }
.join-card .me-card { padding: 0; }
.join-card .me-card:hover { background: none; }
.btn.discord { --b: #5865f2; --bh: #4752c4; --edge: rgba(255, 255, 255, 0.18); }
.btn.discord:hover { box-shadow: 0 0 14px rgba(88, 101, 242, 0.45); }
.btn.block svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .topbar .login { margin-left: auto; }
  .topbar .login svg { width: 16px; height: 16px; }
}

/* ---------- character page: the level box (levelling gear finder) ---------- */
.lvlform { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.lvlform label { font-size: 0.86rem; color: var(--muted); }
.lvlform .in { width: 5.2em; padding: 5px 8px; min-height: 0; }
.lg-hero .hint a { color: var(--link); }

/* ---------- WoW skin for the guide pages (guides.css and tierlists.css stay as written; ":root" makes these win
   whatever the stylesheet order) ---------- */
:root .gp { --bg2: var(--sf-sunken); --link: var(--sf-gold-300); }
:root :is(.gp-page, .gp-post, .gp-folder, .gp-class, .gp-sources, .gp-missing, .gp-classes) .g-main {
  border: 0; background: linear-gradient(180deg, var(--sf-surface-2), var(--sf-surface) 40%); box-shadow: var(--sf-frame), var(--sf-shadow-2); }
/* phones: guides.css runs the article edge to edge, so no frame there either */
@media (max-width: 720px) { :root :is(.gp-page, .gp-post, .gp-folder, .gp-class, .gp-sources, .gp-missing, .gp-classes) .g-main { background: none; box-shadow: none; } }
:root .g-crumbs [aria-current] { color: var(--text); }
:root .g-crumbs a:hover, :root .g-toc li a:hover, :root .g-rail-foot a:hover { color: var(--gold); }
:root .g-search input, :root .g-filter input { border-color: rgba(224, 178, 78, 0.22); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); }
:root .g-search input:focus, :root .g-filter input:focus { border-color: var(--sf-gold-500); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), var(--sf-glow-gold); }
:root .g-results { background: var(--sf-raised); border-color: var(--sf-gold-line); }
:root .g-results a:hover, :root .g-results a.on { background: var(--sf-gold-bg); }
:root .g-prose { color: #ddd4c6; }
:root .g-prose a:hover { color: #fff1c8; }
:root .g-prose h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
:root .g-prose h2::before { position: static; width: 11px; height: 11px; flex: none; border-radius: 0; background: var(--sf-ornament-diamond) center / contain no-repeat; }
:root .g-prose h2::after { content: ""; flex: 1 1 40px; height: 1px; background: linear-gradient(90deg, var(--sf-gold-line), transparent); }
:root .g-prose h3 { color: var(--sf-gold-300); }
/* TL;DR boxes read as parchment notices */
:root .tldr { color: var(--sf-ink); border: 0; border-radius: var(--sf-radius-sm); padding-top: 16px;
  background: var(--sf-parchment-grain), radial-gradient(120% 90% at 50% 40%, var(--sf-parchment) 55%, var(--sf-parchment-2) 100%);
  box-shadow: 0 0 0 1px var(--sf-parchment-edge), inset 0 0 0 2px rgba(255, 248, 228, 0.3), inset 0 0 22px rgba(122, 84, 30, 0.3), var(--sf-shadow-1); }
:root .tldr :is(li, p, strong, b) { color: var(--sf-ink); }
:root .tldr li::marker { color: var(--sf-red-700); }
:root .tldr a { color: var(--sf-ink-link); font-weight: 600; }
:root .tldr .tldr-k { color: var(--sf-red-800); }
:root .tldr .i-new { background: var(--sf-red-700); }
:root .tldr .g-item { text-shadow: none; }
:root .tldr .g-item.sft-q0 { color: var(--sf-q-poor-ink); } :root .tldr .g-item.sft-q1 { color: var(--sf-q-common-ink); }
:root .tldr .g-item.sft-q2 { color: var(--sf-q-uncommon-ink); } :root .tldr .g-item.sft-q3 { color: var(--sf-q-rare-ink); }
:root .tldr .g-item.sft-q4 { color: var(--sf-q-epic-ink); } :root .tldr .g-item.sft-q5 { color: var(--sf-q-legendary-ink); }
/* item names on stone: the AA-safe rare and epic */
:root .g-item.sft-q3 { color: var(--sf-q-rare-text); } :root .g-item.sft-q4 { color: var(--sf-q-epic-text); }
:root .tbl { border-color: var(--sf-gold-hair); }
:root .tbl th { color: var(--sf-gold-500); border-bottom-color: var(--sf-gold-line); background: var(--sf-sunken); }
:root .tbl tbody tr:hover td { background: var(--sf-gold-bg); }
:root .g-card, :root .g-pn a { border-radius: var(--sf-radius-md); box-shadow: var(--sf-bevel); }
:root .g-card:hover, :root .g-pn a:hover { border-color: var(--sf-gold-500); }
:root .g-card .lvl { background: var(--sf-raised); border-color: var(--sf-gold-line); color: var(--gold); border-radius: var(--sf-radius-sm); }
:root .g-tabs [aria-selected="true"]::after { display: none; }
:root .g-results mark { background: rgba(224, 178, 78, 0.32); }
:root .g-tip { background: var(--sf-raised); border-color: var(--sf-gold-line); }
:root .macro pre { background: var(--sf-sunken); border-color: var(--sf-gold-hair); }
:root .g-feature { border-color: var(--sf-gold-line);
  background: radial-gradient(520px 220px at 100% 100%, rgba(224, 178, 78, 0.1), transparent 70%), linear-gradient(140deg, rgba(179, 36, 27, 0.24), rgba(179, 36, 27, 0.04) 60%), var(--sf-surface); }
:root .g-feature .go { color: var(--gold); }
:root .g-class { border-radius: var(--sf-radius-md); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, var(--sf-surface-2)) 0%, var(--sf-surface) 60%); }
:root .g-class .go { color: var(--gold); }

/* ---------- WoW skin for the levelling gear finder (levelgear.css keeps its own names; these feed it the theme) ---------- */
:root .lg {
  --lg-bg: var(--sf-surface); --lg-panel: var(--sf-surface); --lg-panel2: var(--sf-surface-2); --lg-field: var(--sf-sunken);
  --lg-line: rgba(224, 178, 78, 0.13); --lg-line2: rgba(224, 178, 78, 0.24);
  --lg-text: var(--sf-text); --lg-muted: var(--sf-text-muted); --lg-dim: var(--sf-text-dim); --lg-red: var(--sf-red-500); --lg-red-bg: var(--sf-red-bg);
  --lg-green: var(--sf-green); --lg-amber: var(--sf-amber); --lg-blue: var(--sf-blue); --lg-purple: var(--sf-q-epic-text);
  --lg-head: var(--sf-font-display);
  --q0: var(--sf-q-poor); --q1: var(--sf-q-common); --q2: var(--sf-q-uncommon); --q3: var(--sf-q-rare-text); --q4: var(--sf-q-epic-text); --q5: var(--sf-q-legendary);
}
/* talent planner: the trees keep the in-game look; only the frame around them takes the theme */
:root :is(.sftal, .sfrot) { --tg-panel: var(--sf-sunken); --tg-line: rgba(224, 178, 78, 0.16); --tg-text: var(--sf-text); --tg-muted: var(--sf-text-muted); }

/* Members see more (src/locked.js, docs/VISIBILITY.md): the one locked card for every members-only part of a public
   page, and the label on a members block when a member reads it. */
.sf-locked { position: relative; margin: 18px 0; padding: 16px 18px 16px; border-radius: var(--sf-radius-sm); color: var(--sf-text);
  border: 1px solid var(--sf-gold-line); background: linear-gradient(180deg, color-mix(in srgb, var(--sf-gold-bg) 85%, transparent), rgba(12, 10, 12, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, 0.06), 0 0 0 1px #000; font-size: 0.95rem; line-height: 1.5; }
.sf-locked::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: var(--sf-radius-sm) 0 0 var(--sf-radius-sm); background: var(--sf-gold-500); }
.sf-locked-h { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; font: 700 0.78rem/1 var(--head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sf-gold-300); }
.sf-locked-h svg { width: 18px; height: 18px; flex: none; color: var(--sf-gold-500); }
.sf-locked-what { margin: 0 0 6px; font-weight: 600; color: var(--sf-text); }
.sf-locked-list { margin: 0 0 8px; padding-left: 20px; color: var(--sf-text-muted); }
.sf-locked-list li { margin: 2px 0; }
.sf-locked-why { margin: 0 0 12px; color: var(--sf-text-muted); font-size: 0.9rem; }
.sf-locked-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-locked.compact { padding: 10px 14px; }
.sf-locked.compact .sf-locked-why, .sf-locked.compact .sf-locked-list { display: none; }
.sf-locked.compact .sf-locked-what { margin-bottom: 8px; }
.sf-locked-page { max-width: 720px; }
.sf-locked-page h1 { margin: 6px 0 8px; }
.sf-members { margin: 16px 0; padding: 4px 0 2px 14px; border-left: 2px solid color-mix(in srgb, var(--sf-gold-500) 70%, transparent); }
.sf-members-k { display: flex; gap: 6px; align-items: center; margin: 0 0 8px !important; font-size: 0.8rem; color: var(--sf-text-muted); }
.sf-members-k span { font: 700 0.7rem/1 var(--head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-gold-300); }
.sf-members-k svg { width: 14px; height: 14px; color: var(--sf-gold-500); }
@media (max-width: 600px) { .sf-locked { padding: 14px; } .sf-locked-btns .btn { flex: 1 1 auto; justify-content: center; } }

/* /guild: the public showcase (src/guild.js) */
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.gd-classes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.gd-classes li { display: grid; grid-template-columns: 22px 6.5rem minmax(0, 1fr) 2.2rem; gap: 10px; align-items: center; }
.gd-classes img { border-radius: 4px; border: 1px solid var(--c); }
.gd-classes span:not(.gd-bar) { color: var(--c); font-weight: 600; }
.gd-classes b { text-align: right; font-variant-numeric: tabular-nums; }
.gd-bar { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.gd-bar i { display: block; height: 100%; background: var(--c); opacity: 0.85; }
.gd-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.gd-sched, .gd-kills { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.gd-sched li { display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--sf-radius-xs); background: rgba(12, 10, 12, 0.6); border: 1px solid var(--sf-gold-line); }
.gd-pvp { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--sf-radius-xs); background: rgba(12, 10, 12, 0.6); border: 1px solid color-mix(in srgb, #ff7a6b 40%, transparent); }
.gd-pvp svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #ff7a6b; } .gd-pvp > span { display: grid; gap: 2px; } .gd-pvp b { color: #ff9d90; }
.gd-kills li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.gd-kills svg { width: 18px; height: 18px; color: #5ccf86; }
@media (max-width: 700px) { .gd-classes li { grid-template-columns: 22px 5.5rem minmax(0, 1fr) 2rem; } }

/* ---------- sidebar: smoother states (nav.js does the Recent rows and the Calendar fold-out) ---------- */
.nav a, .nav-sub a, .logout, .me-card { transition: background-color 0.15s, color 0.15s; }
.nav-fold[open] > nav { animation: sf-nav-in 0.18s ease-out; }
@keyframes sf-nav-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.side :focus-visible { outline-offset: -2px; }

/* Recent rows: under Characters, Gear, Guides (and inside the guides menu) */
.hist { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 4px 22px; padding-left: 12px; border-left: 1px dashed var(--line2); }
.nav-sub .hist { margin: 0 0 3px 10px; padding-left: 8px; }
.nav-sub .hist-pages { margin-left: 30px; }
.hist-h { display: flex; align-items: center; gap: 6px; min-height: 22px; padding: 4px 4px 1px 10px; font: 700 0.62rem/1 var(--head); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim); }
.hist-row { position: relative; display: flex; align-items: center; border-radius: 7px; overflow: hidden; transition: height 0.16s ease, opacity 0.16s ease; }
.hist-row.leaving { height: 0 !important; opacity: 0; }
.side .hist .hist-a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 30px 4px 10px; text-decoration: none; color: var(--muted);
  font-size: 0.86rem; line-height: 1.3; border-radius: 7px; transition: background-color 0.15s, color 0.15s; }
.side .hist .hist-a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .hist .hist-a:hover { color: #fff; background: rgba(255, 236, 200, 0.045); }
.side .hist-row.on .hist-a { color: var(--gold); background: rgba(255, 236, 200, 0.06); }
.hist-x { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; border: 0;
  background: none; color: var(--dim); border-radius: 5px; cursor: pointer; opacity: 0; transition: opacity 0.12s, color 0.12s, background-color 0.12s; }
.hist-x svg { width: 12px; height: 12px; }
.hist-row:hover .hist-x, .hist-x:focus-visible { opacity: 1; }
.hist-x:hover { color: var(--red-text); background: var(--red-bg); }
.hist-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--c, var(--sec, var(--sf-trim))); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.hist-dot[data-sec="basics"] { --sec: var(--sf-sec-basics); } .hist-dot[data-sec="levelling"] { --sec: var(--sf-sec-levelling); }
.hist-dot[data-sec="professions"] { --sec: var(--sf-sec-professions); } .hist-dot[data-sec="endgame"] { --sec: var(--sf-sec-endgame); }
.hist-dot[data-sec="meta"] { --sec: var(--sf-sec-meta); } .hist-dot[data-sec="classes"] { --sec: var(--sf-sec-classes); }
.hist-ic { width: 18px; height: 18px; flex: none; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
.side .hist-characters .hist-a span, .side .hist-items .hist-a span, .side .hist-talents .hist-a span, .side .nav-own .cname { color: var(--c, inherit); }
.side .hist-characters .hist-a:hover span, .side .hist-items .hist-a:hover span { filter: brightness(1.15); }
.side .hist-row.kid .hist-a { padding-left: 20px; font-size: 0.82rem; }
.hist-step { width: 7px; height: 7px; flex: none; margin-top: -5px; border-left: 1px solid var(--dim); border-bottom: 1px solid var(--dim); border-bottom-left-radius: 2px; }
.side .hist-pages .hist-a { padding-left: 8px; font-size: 0.82rem; }
.nav-sub a.lv2.seen:not([aria-current])::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sf-gold-500); opacity: 0.55; margin-left: auto; flex: none; }
.nav-own a { font-size: 0.88rem; }
.side .nav-own .cname { font-weight: 600; }
.nav-own a[aria-current="page"] .cname { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c) 50%, transparent); text-underline-offset: 3px; }
.nav-own .more { color: var(--dim); font-size: 0.8rem; }
@media (hover: none) { .hist-x { opacity: 0.7; } }

.side .hist .hist-a[aria-current="page"] { color: var(--gold); background: rgba(255, 236, 200, 0.06); box-shadow: none; }
.side .hist .hist-a[aria-current="page"]::before { content: none; }
/* Calendar: above your card, and its fold-out */
.cal-btn { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 12px; margin: 0 0 8px; border-radius: var(--sf-radius-sm); text-decoration: none;
  color: #d4cbbd; font-weight: 500; border: 1px solid var(--line); background: rgba(255, 236, 200, 0.025); position: relative;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.cal-btn svg { width: 20px; height: 20px; flex: none; color: var(--dim); transition: color 0.15s, transform 0.18s; }
.cal-btn .chev { width: 14px; height: 14px; margin-left: auto; }
.cal-btn:hover { color: #fff; background: rgba(255, 236, 200, 0.05); border-color: var(--line2); }
.cal-btn:hover svg { color: var(--muted); }
.cal-btn[aria-current="page"] { color: #fff; border-color: color-mix(in srgb, var(--sf-trim) 30%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--sf-accent) 34%, transparent), transparent 88%); }
.cal-btn[aria-current="page"]::before { content: ""; position: absolute; left: -9px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%);
  background: var(--sf-ornament-diamond) center / contain no-repeat; }
.cal-btn[aria-current="page"] svg:first-child, .cal-btn[aria-expanded="true"] svg:first-child { color: var(--sf-gold-300); }
.cal-btn[aria-expanded="true"] { color: #fff; border-color: color-mix(in srgb, var(--sf-trim) 45%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--sf-accent) 26%, transparent), transparent 90%); }
.cal-btn[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--sf-gold-300); }

/* Bank/Inventory: your own characters */
.inv-chars { display: grid; gap: 8px; }
.inv-char > summary .muted { margin-left: 8px; font-weight: 400; }
.inv-h { margin: 10px 0 6px; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--muted); }
.inv-h small { color: var(--dim); margin-left: 4px; }
.inv-gold { margin: 8px 0 0; }
.rows.inv-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 16px; }
#inventory .hint svg { width: 14px; height: 14px; vertical-align: -2px; }

.tabbar [aria-expanded="true"] { color: var(--sf-gold-300); }
@media (max-width: 900px) {
  .side .hist .hist-a { min-height: 40px; padding-right: 44px; }
  .hist-x { width: 40px; height: 40px; }
  .hist-x svg { width: 14px; height: 14px; }
  .nav-sub a { min-height: 40px; }
  .cal-btn { min-height: 46px; }
  .cal-btn .chev { transform: rotate(-90deg); }
  .cal-btn[aria-expanded="true"] .chev { transform: rotate(90deg); }
}
/* a long hero title (Bank/Inventory): breaks after the slash, never mid-word */
.hero h1.fit { font-size: clamp(2.3rem, 4.4vw, 3.9rem); overflow-wrap: normal; }
@media (max-width: 720px) { .hero h1.fit { font-size: 2.4rem; } }
/* The foot (Calendar, your card, Log out) stays in reach when the menu is longer than the screen */
@media (min-width: 901px) { .side-foot { position: sticky; bottom: 0; z-index: 2; background: linear-gradient(180deg, rgba(12, 10, 13, 0.94), #0c0a0d 30%);
  box-shadow: inset -1px 0 0 var(--sf-gold-line), inset -2px 0 0 #000, 0 -10px 18px -8px rgba(0, 0, 0, 0.7); } }

/* ---------- the menu fits a 1080 screen (Bob 31 Oct: "on a 1080 monitor, the sidebar hardly fits") ----------
   Computers get a tighter rhythm; touch screens and phones keep 40px+ rows. The Guides menu puts the classes two to a
   row (.lv2-grid, guides.js); nav.js drops the Recent rows of the parts you're not in when a short screen still
   overflows. */
.nav-sub a.tool { color: var(--muted); }
.nav-sub a.tool .g-nic { color: var(--sf-gold-500); }
.nav-sub a span { min-width: 0; }
.side .hist .hist-a small { flex: 0 1 auto; min-width: 0; margin-left: auto; padding-left: 6px; color: var(--dim); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .hist .hist-a small + span, .side .hist .hist-a span:has(+ small) { flex: 0 0 auto; max-width: 62%; }
/* two to a row at the default width; one on a narrow menu, up to three on a wide one (the width slider) */
.lv2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(68px, 31%), 1fr)); column-gap: 2px; margin-left: 12px; }
.lv2-grid > a.lv2 { margin-left: 0; }
.lv2-grid > .hist { grid-column: 1 / -1; margin-left: 18px; }
.me-row { display: flex; align-items: center; gap: 2px; }
.me-row .me-card { flex: 1; min-width: 0; }
.me-row .logout { flex: none; margin: 0; padding: 10px; }
.me-row .logout span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {
  .me-row { display: block; }
  .me-row .logout { display: flex; padding: 9px 12px; margin-top: 2px; }
  .me-row .logout span { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  .lv2-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 901px) {
  .side > .brand { padding-top: 8px; padding-bottom: 6px; margin-bottom: 2px; }
  .side > .brand img { width: 38px; height: 38px; }
  .side > .brand b { font-size: 1.3rem; }
  .side-foot { padding: 8px 10px 8px; }
  .cal-btn { margin-bottom: 4px; }
  .me-card { padding: 4px 8px; }
  .me-card img { width: 32px; height: 32px; }
  .side-links { padding: 2px 12px 0; font-size: 0.74rem; }
  .side-links a { padding: 2px 0; }
  .join-card { padding: 10px; gap: 6px; }
  .join-card .btn { min-height: 0; padding-top: 7px; padding-bottom: 7px; }
  .nav-sub a[data-sec="home"] { display: none; }   /* the Guides link itself is the guides home */
  .nav-sub a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 901px) and (pointer: fine) {
  .nav { gap: 0; padding: 2px 10px; }
  .nav a { padding: 5px 12px; line-height: 1.25; }
  .nav a svg { width: 18px; height: 18px; }
  .nav > .nav-sub a { padding: 2px 10px; line-height: 1.25; }
  .nav-sub { margin: 0 0 2px 22px; }
  .nav-sub a { font-size: 0.86rem; }
  .nav > .nav-sub a.lv2 { padding-top: 2px; padding-bottom: 1px; font-size: 0.84rem; }
  .side .hist .hist-a { padding-top: 2px; padding-bottom: 2px; font-size: 0.82rem; line-height: 1.25; }
  .nav-sub .hist { margin: 0 0 2px 10px; }
  .hist { margin-bottom: 2px; }
  .hist-h { min-height: 16px; padding-top: 2px; }
  .nav-fold > summary { margin-top: 6px; padding-top: 4px; padding-bottom: 4px; }
  .cal-btn { padding: 6px 10px 6px 12px; }
  .cal-btn svg { width: 18px; height: 18px; }
  .me-row .logout { padding: 8px; }
}
/* short laptop screens: the join card's blurb goes, the brand shrinks a little more */
@media (min-width: 901px) and (max-height: 760px) {
  .join-card p { display: none; }
  .side > .brand { padding-top: 6px; padding-bottom: 4px; }
  .side > .brand img { width: 34px; height: 34px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .side > .brand b { font-size: 1.1rem; }
  .side > .brand img { width: 30px; height: 30px; }
  .side-links { padding-top: 0; }
}

/* The bin: clear all recent pages (nav.js bins()), over the right end of a main menu row, so nothing moves */
.nav-bin { position: absolute; right: 16px; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0;
  border-radius: 6px; background: none; color: var(--dim); cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s, background-color 0.15s; }
.nav-bin svg { width: 15px; height: 15px; }
.nav-bin.on, .nav > a:hover + .nav-bin, .nav-bin:hover, .nav-bin:focus-visible { opacity: 1; }
.nav-bin:hover, .nav-bin:focus-visible { color: var(--red-text); background: var(--red-bg); }
.nav > a.has-bin { padding-right: 40px; }
@media (hover: none) { .nav-bin:not(.on) { display: none; } .nav-bin { width: 40px; height: 40px; right: 12px; } .nav-bin svg { width: 18px; height: 18px; } }
.hist-toast { display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 9px 10px 9px 16px; border-left-color: var(--sf-gold-500); }
.hist-toast .dot { color: var(--dim); }
.hist-undo { border: 0; background: none; color: var(--link); font-weight: 700; padding: 4px 8px; border-radius: 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hist-undo:hover, .hist-undo:focus-visible { background: rgba(255, 236, 200, 0.08); }
/* mouse: the row's text runs to the edge; its x covers the end on hover (more room for "Dungeons  The Deadmines") */
@media (min-width: 901px) and (pointer: fine) {
  .side .hist .hist-a { padding-right: 8px; }
  .hist-x { background: #141013; box-shadow: -6px 0 6px #141013; }
  .hist-x:hover { background: #3a1512; }
}
.lv2-grid > a.lv2[aria-current="page"]::before { display: none; }   /* the box marks it; the side bar would land in the next column */

/* ---------- the Calendar fold-out: the whole /raids calendar in a window (Bob 31 Oct: "the COMPLETE calendar") ----------
   A computer: a large window sliding out from the sidebar, dragged by its title bar and resized from its corner (both
   remembered, nav.js). A phone: a full-screen sheet. The calendar inside is raidcal.css, exactly as on /raids. */
.calpop { position: fixed; z-index: 45; left: calc(var(--side-w) + 10px); top: 10px; width: min(1100px, calc(100vw - var(--side-w) - 24px));
  height: calc(100vh - 20px); min-width: 560px; min-height: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
  display: flex; flex-direction: column; overflow: hidden; resize: both; border-radius: 6px;
  background: radial-gradient(900px 400px at 30% -10%, rgba(120, 70, 30, 0.18), transparent 70%), #0b0a09;
  border: 2px solid #3d3324; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 209, 0, 0.08), 0 28px 70px rgba(0, 0, 0, 0.78);
  opacity: 0; transform: translateX(-28px); transform-origin: left center; transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.calpop.on { opacity: 1; transform: none; }
.calpop.instant, .calpop.dragging, .calpop.sizing { transition: none; }
.calpop.dragging { user-select: none; box-shadow: 0 0 0 1px #000, 0 32px 80px rgba(0, 0, 0, 0.85); }
.calpop-h { flex: none; display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 6px 0 10px; cursor: grab; touch-action: none;
  background: linear-gradient(180deg, #3b1c12, #1c0e0a 70%); border-bottom: 2px solid #5a4528; box-shadow: inset 0 1px 0 rgba(255, 209, 0, 0.16); }
.calpop.dragging .calpop-h { cursor: grabbing; }
.calpop-grip { display: grid; place-items: center; color: #8a7350; }
.calpop-grip svg { width: 14px; height: 14px; }
.calpop-h h2 { flex: 1; margin: 0; outline: none; font: 400 18px/1 "Friz Quadrata TT", "Friz Quadrata", Georgia, "Times New Roman", serif; color: #ffd100;
  text-shadow: 1px 1px 0 #000; text-transform: none; letter-spacing: 0.02em; }
.calpop-page { padding: 6px 10px; border-radius: 6px; color: #ffd100; font: 400 13px/1 Georgia, serif; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.calpop-page:hover, .calpop-page:focus-visible { color: #fff; background: rgba(255, 209, 0, 0.08); }
.calpop-b { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: #c9b48a; border-radius: 6px; cursor: pointer;
  transition: background-color 0.15s, color 0.15s; }
.calpop-b:hover, .calpop-b:focus-visible { color: #fff; background: rgba(255, 209, 0, 0.1); }
.calpop-b svg { width: 16px; height: 16px; }
.calpop-x:hover, .calpop-x:focus-visible { color: #fff; background: #7a1d14; }
.calpop-b[data-calpop-dock] svg { transform: rotate(180deg); }
.calpop-body { flex: 1; min-height: 0; overflow: auto; padding: 6px 16px 18px; overscroll-behavior: contain; scrollbar-color: #5a4528 transparent; }
.calpop-body .wcal { justify-content: center; margin-top: 10px; }
.calpop-body .wpanel { margin-top: 24px; }
.calpop-body > .notice { margin: 10px 0 0; }
.calpop-wait { color: var(--muted); font-size: 0.9rem; margin: 18px 6px; }
.calpop-wait a { color: var(--link); }
@media (max-width: 900px) {
  .calpop { left: 0; top: 0; width: 100%; height: 100%; max-width: none; max-height: none; min-width: 0; min-height: 0; resize: none; z-index: 70;
    border: 0; border-radius: 0; transform: translateY(24px); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .calpop-h { cursor: default; height: 52px; padding: 0 4px 0 14px; }
  .calpop-grip, .calpop-b[data-calpop-dock] { display: none; }
  .calpop-b { width: 44px; height: 44px; }
  .calpop-page { padding: 10px 8px; }
  .calpop-body { padding: 6px 8px 24px; }
  body.calpop-on { overflow: hidden; }
}

/* ---------- the menu's width (Bob 31 Oct: "a small slider above the calendar ... make the sidebar bigger or smaller") ----------
   A slim range above Calendar and a drag edge on the sidebar's right side; nav.js sets --side-w (the grid column, the
   Calendar window's left edge and the pinned foot all follow). A computer only. */
.side-size { display: flex; align-items: center; height: 14px; margin: -2px 2px 6px; }
.side-size input { flex: 1; width: 100%; height: 14px; margin: 0; padding: 0; background: none; cursor: ew-resize; -webkit-appearance: none; appearance: none; opacity: 0.55; transition: opacity 0.15s; }
.side-size input:hover, .side-size input:focus-visible, .side-size input:active { opacity: 1; }
.side-size input:focus-visible { outline: 2px solid var(--sf-gold-300); outline-offset: 2px; border-radius: 4px; }
.side-size input::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: #2c2420; box-shadow: inset 0 0 0 1px rgba(224, 178, 78, 0.18); }
.side-size input::-moz-range-track { height: 3px; border-radius: 2px; background: #2c2420; box-shadow: inset 0 0 0 1px rgba(224, 178, 78, 0.18); }
.side-size input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; border: 1px solid #000;
  background: radial-gradient(circle at 35% 30%, #fff1b8, var(--sf-gold-300) 45%, var(--sf-gold-500)); box-shadow: 0 0 0 1px rgba(224, 178, 78, 0.35); }
.side-size input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #000;
  background: radial-gradient(circle at 35% 30%, #fff1b8, var(--sf-gold-300) 45%, var(--sf-gold-500)); box-shadow: 0 0 0 1px rgba(224, 178, 78, 0.35); }
.side-edge { position: fixed; top: 0; bottom: 0; left: calc(var(--side-w) - 3px); width: 6px; z-index: 41; cursor: col-resize; }
.side-edge:hover, .side-resizing .side-edge { background: linear-gradient(90deg, transparent 2px, var(--sf-gold-500) 2px, var(--sf-gold-500) 4px, transparent 4px); }
.side-resizing, .side-resizing * { cursor: col-resize !important; user-select: none; }
.side-resizing .calpop { transition: none; }
@media (max-width: 900px), (hover: none) and (pointer: coarse) { .side-size, .side-edge { display: none; } }