/* Speeding Fines design system ("WoW flavour", Bob's ruling A3). Linked from every page before app.css: app.css,
   guides.css, levelgear.css and talents.css read these tokens (docs/DESIGN.md). Everything is prefixed sf-. No images except tiny inline SVG data URIs (allowed by the site CSP: img-src data:).
   Fonts come from /fonts/fonts.css (Barlow, Barlow Condensed), already self-hosted.

   Brand swap: the brand options (art/brand/) share one palette. site/src/brand.js sets <html data-brand="a|b|c|mix">
   on every page; only the tokens in the data-brand blocks change (accent, trim, surface tint, emblem and crest files). */

/* ==========================================================================================================
   1. Tokens
   ========================================================================================================== */
:root {
  /* Stone and iron surfaces (dark, the site's base) */
  --sf-bg: #0d0c0f;
  --sf-bg-glow: rgba(179, 36, 27, 0.10);
  --sf-surface: #17151a;
  --sf-surface-2: #1d1a20;
  --sf-raised: #211e25;
  --sf-sunken: #0a090c;
  --sf-overlay: rgba(6, 5, 8, 0.72);

  /* Parchment (light cards: notices, guides, news, loot reasons) */
  --sf-parchment: #efe2c2;
  --sf-parchment-2: #e2cf9f;
  --sf-parchment-edge: #b99a5c;
  --sf-ink: #2a1d12;
  --sf-ink-muted: #5c4630;
  --sf-ink-link: #8f1a14;

  /* Text on stone. All pass WCAG AA (4.5:1) on --sf-raised and darker. */
  --sf-text: #efe7da;
  --sf-text-muted: #b5ab9b;
  --sf-text-dim: #8e8576;      /* 4.5:1 on --sf-raised: fine print only */
  --sf-text-on-accent: #ffffff;

  /* Horde red */
  --sf-red-900: #3a0b08;
  --sf-red-800: #5e120d;
  --sf-red-700: #8f1a14;
  --sf-red-600: #b3241b;       /* buttons: 6.6:1 with white */
  --sf-red-500: #d63a2f;       /* fills, bars, borders (not body text) */
  --sf-red-400: #f06a5d;       /* red TEXT on stone: 5.4:1 or better */
  --sf-red-bg: rgba(214, 58, 47, 0.14);

  /* Burnished gold */
  --sf-gold-800: #4a3814;
  --sf-gold-700: #8a6a2a;
  --sf-gold-500: #e0b24e;
  --sf-gold-300: #f3cf73;
  --sf-gold-bg: rgba(224, 178, 78, 0.12);
  --sf-gold-line: rgba(224, 178, 78, 0.34);
  --sf-gold-hair: rgba(224, 178, 78, 0.16);

  /* Status */
  --sf-green: #5ccf86;  --sf-green-bg: rgba(92, 207, 134, 0.13);
  --sf-amber: #f2b24c;  --sf-amber-bg: rgba(242, 178, 76, 0.13);
  --sf-blue: #6aa6ff;   --sf-blue-bg: rgba(106, 166, 255, 0.14);

  /* Accent: what buttons, active nav and focus use. Brands retune these. */
  --sf-accent: var(--sf-red-600);
  --sf-accent-hover: #c42d22;
  --sf-accent-text: var(--sf-red-400);
  --sf-trim: var(--sf-gold-500);

  /* Class colours: official in-game values. Use for bars, borders, dots, names on stone.
     Shaman blue is too dark for small text on stone, so text uses --sf-class-shaman-text. */
  --sf-class-druid: #ff7c0a;
  --sf-class-hunter: #aad372;
  --sf-class-mage: #3fc7eb;
  --sf-class-paladin: #f48cba;
  --sf-class-priest: #ffffff;
  --sf-class-rogue: #fff468;
  --sf-class-shaman: #0070dd;
  --sf-class-shaman-text: #3d95ff;
  --sf-class-warlock: #8788ee;
  --sf-class-warrior: #c69b6d;

  /* Item quality: official values, plus AA-safe text variants where the official one is too dark on stone,
     and dark variants for text on parchment. */
  --sf-q-poor: #9d9d9d;
  --sf-q-common: #ffffff;
  --sf-q-uncommon: #1eff00;
  --sf-q-rare: #0070dd;
  --sf-q-epic: #a335ee;
  --sf-q-legendary: #ff8000;
  --sf-q-artifact: #e6cc80;
  --sf-q-rare-text: #3d95ff;
  --sf-q-epic-text: #b862ff;
  --sf-q-poor-ink: #5f5f5f;
  --sf-q-common-ink: #2a1d12;
  --sf-q-uncommon-ink: #146b0e;
  --sf-q-rare-ink: #0a4f9e;
  --sf-q-epic-ink: #6a1fa0;
  --sf-q-legendary-ink: #8f4300;

  /* Raid roles and groups */
  --sf-role-tank: #6aa6ff;
  --sf-role-healer: #5ccf86;
  --sf-role-dps: #f06a5d;
  --sf-group-fast-lane: var(--sf-red-500);
  --sf-group-on-ramp: #3d7fe0;
  --sf-group-pug: #6d6670;

  /* Guide sections (guides home cards and panels, the Guides menu, a band on every guide page in the section).
     Fill = bands, diamonds, glyphs (3:1 or better on stone); -text = text, 7:1 or better on --sf-surface/--sf-raised. */
  --sf-sec-basics: #3b82e8;      --sf-sec-basics-text: #78aaff;
  --sf-sec-levelling: #e8c234;   --sf-sec-levelling-text: #f2d360;
  --sf-sec-professions: #3aa65a; --sf-sec-professions-text: #6fd08a;
  --sf-sec-endgame: #d6363c;     --sf-sec-endgame-text: #ff7b7f;
  --sf-sec-meta: #9157e0;        --sf-sec-meta-text: #bf98ff;
  --sf-sec-classes: var(--sf-gold-500); --sf-sec-classes-text: var(--sf-gold-300);

  /* Type */
  --sf-font-display: "Barlow Condensed", system-ui, sans-serif;
  --sf-font-brand: "New Rocker", "Barlow Condensed", serif;   /* the wordmark lettering (option B), brand "mix" */
  --sf-font-body: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sf-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sf-fs-xs: 0.75rem;   /* 12 */
  --sf-fs-sm: 0.8125rem; /* 13 */
  --sf-fs-md: 0.9375rem; /* 15, body */
  --sf-fs-lg: 1.0625rem; /* 17 */
  --sf-fs-xl: 1.25rem;   /* 20 */
  --sf-fs-2xl: 1.5rem;   /* 24 */
  --sf-fs-3xl: 1.875rem; /* 30 */
  --sf-fs-4xl: 2.375rem; /* 38 */
  --sf-fs-5xl: 3rem;     /* 48 */
  --sf-fs-6xl: 3.75rem;  /* 60 */
  --sf-lh-tight: 1.05;
  --sf-lh-body: 1.55;
  --sf-tracking-caps: 0.06em;
  --sf-tracking-label: 0.16em;

  /* Space (4 px steps) */
  --sf-space-1: 4px;  --sf-space-2: 8px;  --sf-space-3: 12px; --sf-space-4: 16px; --sf-space-5: 20px;
  --sf-space-6: 24px; --sf-space-7: 32px; --sf-space-8: 40px; --sf-space-9: 56px; --sf-space-10: 72px;

  /* Radii: squarer than the old 12 px look, closer to bevelled game frames */
  --sf-radius-xs: 3px;
  --sf-radius-sm: 5px;
  --sf-radius-md: 8px;
  --sf-radius-lg: 12px;
  --sf-radius-pill: 999px;

  /* Borders: a gold hairline plus an inset dark line reads as a bevelled metal frame without images */
  --sf-border: 1px solid var(--sf-gold-hair);
  --sf-border-strong: 1px solid var(--sf-gold-line);
  --sf-bevel: inset 0 1px 0 rgba(255, 236, 200, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.55);
  --sf-frame: 0 0 0 1px var(--sf-gold-line), inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 2px var(--sf-gold-hair);

  /* Shadows */
  --sf-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sf-shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.5);
  --sf-shadow-3: 0 18px 48px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5);
  --sf-glow-red: 0 0 14px rgba(214, 58, 47, 0.45);
  --sf-glow-gold: 0 0 12px rgba(224, 178, 78, 0.35);
  --sf-focus: 0 0 0 2px var(--sf-bg), 0 0 0 4px var(--sf-gold-300);

  /* Ornament: a small gold diamond and a filigree rule, as inline SVG */
  --sf-ornament-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='%23e0b24e'/%3E%3Cpath d='M5 2.6L7.4 5L5 7.4L2.6 5Z' fill='%238a6a2a'/%3E%3C/svg%3E");
  --sf-ornament-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6H46M74 6H120' stroke='%23e0b24e' stroke-opacity='.55'/%3E%3Cpath d='M60 1L65 6L60 11L55 6Z' fill='%23e0b24e'/%3E%3Cpath d='M50 6L53 3.5L56 6L53 8.5Z M64 6L67 3.5L70 6L67 8.5Z' fill='%23e0b24e' fill-opacity='.7'/%3E%3C/svg%3E");
  --sf-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  --sf-parchment-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");

  /* Brand assets (public/brand/<a|b|c>/, art/brand/tools/site_assets.py). Absolute URLs: a relative url() in a custom
     property resolves against this file. The default is brand A's so nothing is ever blank. */
  --sf-emblem: url("/brand/a/emblem-128.webp");
  --sf-crest: url("/brand/a/crest-64.png");

  /* Layout */
  --sf-side-w: 240px;
  --sf-content-max: 1500px;
  --sf-dur: 0.18s;
  color-scheme: dark;
}

/* Brand options: only accent, trim and surface tint move. Keep these blocks small. */
:root[data-brand="a"] {   /* War Crest: iron and blood red, heaviest gold */
  --sf-surface: #17151a; --sf-raised: #221e24;
  --sf-accent: #b3241b; --sf-accent-hover: #c42d22; --sf-trim: #e0b24e;
  --sf-bg-glow: rgba(179, 36, 27, 0.12);
  --sf-emblem: url("/brand/a/emblem-128.webp"); --sf-crest: url("/brand/a/crest-64.png");
}
:root[data-brand="b"] {   /* Infringement Seal: warmer brown stone, wax red, more parchment */
  --sf-bg: #0e0b0a; --sf-surface: #1a1513; --sf-surface-2: #201a17; --sf-raised: #251e1a;
  --sf-accent: #a8201a; --sf-accent-hover: #bd2a22; --sf-trim: #d9ab55;
  --sf-bg-glow: rgba(168, 32, 26, 0.10);
  --sf-emblem: url("/brand/b/emblem-128.webp"); --sf-crest: url("/brand/b/crest-64.png");
}
:root[data-brand="c"] {   /* No Limit Roundel: brighter red, cooler stone, flatter */
  --sf-bg: #0b0b0e; --sf-surface: #151419; --sf-raised: #1f1d24;
  --sf-accent: #c22a20; --sf-accent-hover: #d6362b; --sf-trim: #f0c75e;
  --sf-bg-glow: rgba(214, 58, 47, 0.14);
  --sf-bevel: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  --sf-emblem: url("/brand/c/emblem-128.webp"); --sf-crest: url("/brand/c/crest-64.png");
}

/* Mix: Bob's pick (2026-10-31). A's emblem and palette, B's lettering for the wordmark and page titles. */
:root[data-brand="mix"] {
  --sf-surface: #17151a; --sf-raised: #221e24;
  --sf-accent: #b3241b; --sf-accent-hover: #c42d22; --sf-trim: #e0b24e;
  --sf-bg-glow: rgba(179, 36, 27, 0.12);
  --sf-emblem: url("/brand/mix/emblem-128.webp"); --sf-crest: url("/brand/mix/crest-64.png");
}
/* New Rocker has one weight: never let the browser fake a bold. Page titles keep their own colours. */
:root[data-brand="mix"] :is(h1, .sf-h1) { font-family: var(--sf-font-brand); font-weight: 400; font-synthesis: none; letter-spacing: 0.01em; }
/* The wordmark (sidebar, top bar, homepage): burnished gold, dark ink edge, red stamp shadow, like B's wordmark. */
:root[data-brand="mix"] :is(.brand b, .sf-brand b, .sf-wordmark) {
  font-family: var(--sf-font-brand); font-weight: 400; font-synthesis: none; letter-spacing: 0.01em;
  color: var(--sf-gold-300); background: linear-gradient(180deg, #fff3c4 8%, #f3cf73 42%, #d6a042 66%, #9a6a26 96%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;
  filter: drop-shadow(0 1px 0 #220e08) drop-shadow(0 1.5px 0 #8f1a14) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)); }
:root[data-brand="mix"] :is(.side .brand b, .sf-brand b) { white-space: normal; font-size: 1.3rem; line-height: 0.98; }
@media (forced-colors: active) { :root[data-brand="mix"] :is(.brand b, .sf-brand b, .sf-wordmark) { -webkit-text-fill-color: currentColor; background: none; filter: none; } }

/* ==========================================================================================================
   2. Base (scoped to .sf so it never restyles a page that only loads this file for one component)
   ========================================================================================================== */
.sf {
  background: var(--sf-bg) radial-gradient(1200px 480px at 70% -160px, var(--sf-bg-glow), transparent 70%) no-repeat;
  color: var(--sf-text);
  font: 400 var(--sf-fs-md) / var(--sf-lh-body) var(--sf-font-body);
  -webkit-font-smoothing: antialiased;
}
.sf a { color: var(--sf-gold-300); text-underline-offset: 2px; }
.sf a:hover { color: #fff1c8; }
.sf :focus-visible { outline: none; box-shadow: var(--sf-focus); border-radius: var(--sf-radius-sm); }

.sf-h1, .sf-h2, .sf-h3, .sf-h4, .sf-label {
  font-family: var(--sf-font-display); text-transform: uppercase; letter-spacing: var(--sf-tracking-caps);
  line-height: var(--sf-lh-tight); margin: 0; font-weight: 700;
}
.sf-h1 { font-size: clamp(var(--sf-fs-3xl), 4vw, var(--sf-fs-5xl)); font-weight: 800; }
.sf-h2 { font-size: var(--sf-fs-2xl); }
.sf-h3 { font-size: var(--sf-fs-xl); }
.sf-h4 { font-size: var(--sf-fs-lg); }
.sf-label { font-size: var(--sf-fs-xs); letter-spacing: var(--sf-tracking-label); color: var(--sf-text-muted); }
.sf-kicker { font: 700 var(--sf-fs-sm) / 1 var(--sf-font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sf-trim); }
.sf-muted { color: var(--sf-text-muted); }
.sf-dim { color: var(--sf-text-dim); }
.sf-num { font-variant-numeric: tabular-nums; }
.sf-mono { font-family: var(--sf-font-mono); }

/* Page heading: red to gold bar above, ornamental rule optional */
.sf-page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sf-space-3) var(--sf-space-5); flex-wrap: wrap; margin: 0 0 var(--sf-space-5); }
.sf-page-h .sf-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)); }
.sf-page-h p { margin: 6px 0 0; color: var(--sf-text-muted); max-width: 62ch; }
.sf-rule { height: 12px; border: 0; margin: var(--sf-space-5) auto; max-width: 320px; background: var(--sf-ornament-rule) center / contain no-repeat; }

/* ==========================================================================================================
   3. Surfaces: panel (stone), card (stone with gold frame), parchment card
   ========================================================================================================== */
.sf-panel {
  background: var(--sf-surface); border: var(--sf-border); border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-bevel), var(--sf-shadow-1); padding: var(--sf-space-4);
}
.sf-card {
  position: relative; background: linear-gradient(180deg, var(--sf-surface-2), var(--sf-surface) 60%);
  border-radius: var(--sf-radius-md); box-shadow: var(--sf-frame), var(--sf-shadow-2); padding: var(--sf-space-4) var(--sf-space-5) var(--sf-space-5);
  min-width: 0;
}
/* Gold corner brackets: four L shapes drawn with gradients, no images */
.sf-card::before {
  content: ""; position: absolute; inset: 3px; pointer-events: none; border-radius: calc(var(--sf-radius-md) - 2px);
  --l: 14px; --t: 1.5px; --g: var(--sf-trim);
  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; opacity: 0.75;
}
.sf-card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-space-3); margin: 0 0 var(--sf-space-3);
  padding-bottom: var(--sf-space-2); border-bottom: 1px solid var(--sf-gold-hair); }
.sf-card-h h2, .sf-card-h h3 { font: 700 var(--sf-fs-lg) / 1 var(--sf-font-display); letter-spacing: 0.08em; text-transform: uppercase; margin: 0;
  display: flex; align-items: center; gap: 8px; }
.sf-card-h h2::before, .sf-card-h h3::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--sf-ornament-diamond) center / contain no-repeat; }
.sf-card-h a { font-size: var(--sf-fs-sm); text-decoration: none; }
.sf-card--accent { box-shadow: 0 0 0 1px var(--sf-accent), inset 0 0 0 1px rgba(0, 0, 0, 0.6), var(--sf-shadow-2), var(--sf-glow-red); }
.sf-card--plain::before { display: none; }

.sf-parchment {
  position: relative; color: var(--sf-ink); border-radius: var(--sf-radius-sm); padding: var(--sf-space-5) var(--sf-space-6);
  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 3px rgba(255, 248, 228, 0.35), inset 0 0 28px rgba(122, 84, 30, 0.35), var(--sf-shadow-2);
}
.sf-parchment a { color: var(--sf-ink-link); font-weight: 600; }
.sf-parchment a:hover { color: #5e120d; }
.sf-parchment .sf-muted, .sf-parchment .sf-label { color: var(--sf-ink-muted); }
.sf-parchment .sf-h2, .sf-parchment .sf-h3, .sf-parchment h2, .sf-parchment h3 { color: #3a0b08; }
.sf-parchment hr, .sf-parchment .sf-divider { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sf-parchment-edge), transparent); margin: var(--sf-space-4) 0; }
/* Wax seal accent for a parchment card (top right). Uses the brand emblem token. */
.sf-parchment--sealed::after { content: ""; position: absolute; top: -14px; right: 14px; width: 56px; height: 56px;
  background: var(--sf-emblem) center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }

/* Stat tile */
.sf-stat { background: var(--sf-sunken); border: var(--sf-border); border-radius: var(--sf-radius-md); padding: 10px 14px 12px; text-align: center;
  box-shadow: var(--sf-bevel); min-width: 0; text-decoration: none; color: inherit; display: block; }
.sf-stat small { display: block; font: 700 var(--sf-fs-xs) / 1 var(--sf-font-display); letter-spacing: var(--sf-tracking-label); text-transform: uppercase; color: var(--sf-text-muted); }
.sf-stat b { display: block; font: 800 var(--sf-fs-3xl) / 1.1 var(--sf-font-display); margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--sf-gold-300); }
a.sf-stat:hover { border-color: var(--sf-gold-line); }

/* ==========================================================================================================
   4. Buttons
   ========================================================================================================== */
.sf-btn {
  --b: var(--sf-raised); --bh: #2b2730; --fg: var(--sf-text); --edge: var(--sf-gold-line);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 18px;
  font: 700 var(--sf-fs-md) / 1 var(--sf-font-display); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--fg); background: linear-gradient(180deg, color-mix(in srgb, var(--b) 100%, #fff 8%), var(--b));
  border: 1px solid var(--edge); border-radius: var(--sf-radius-sm); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.25), var(--sf-shadow-1);
  transition: background var(--sf-dur), border-color var(--sf-dur), transform var(--sf-dur);
}
.sf-btn:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--bh) 100%, #fff 8%), var(--bh)); color: var(--fg); }
.sf-btn:active { transform: translateY(1px); }
.sf-btn:disabled, .sf-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.sf-btn svg { width: 18px; height: 18px; }
.sf-btn--primary { --b: var(--sf-accent); --bh: var(--sf-accent-hover); --fg: var(--sf-text-on-accent); --edge: var(--sf-trim); }
.sf-btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.25), var(--sf-glow-red); }
.sf-btn--secondary { --b: var(--sf-raised); --bh: #2b2730; --fg: var(--sf-gold-300); --edge: var(--sf-gold-line); }
.sf-btn--danger { --b: var(--sf-red-800); --bh: var(--sf-red-700); --fg: #fff; --edge: var(--sf-red-500); }
.sf-btn--ghost { --b: transparent; --bh: rgba(255, 255, 255, 0.05); --fg: var(--sf-text-muted); --edge: transparent; box-shadow: none; background: transparent; }
.sf-btn--sm { min-height: 30px; padding: 0 12px; font-size: var(--sf-fs-sm); }
.sf-btn--lg { min-height: 46px; padding: 0 24px; font-size: var(--sf-fs-lg); }
.sf-btn--block { width: 100%; }
.sf-btns { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); align-items: center; }

/* ==========================================================================================================
   5. Tabs (underline tabs and segmented tabs)
   ========================================================================================================== */
.sf-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--sf-gold-hair); overflow-x: auto; scrollbar-width: none; }
.sf-tab { position: relative; padding: 10px 14px; background: none; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 700 var(--sf-fs-md) / 1 var(--sf-font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-text-muted); }
.sf-tab:hover { color: var(--sf-text); }
.sf-tab[aria-selected="true"], .sf-tab[aria-current="page"] { color: var(--sf-gold-300); }
.sf-tab[aria-selected="true"]::after, .sf-tab[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sf-trim), transparent); }
.sf-tab[aria-selected="true"]::before, .sf-tab[aria-current="page"]::before { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px;
  transform: translateX(-50%); background: var(--sf-ornament-diamond) center / contain no-repeat; }
.sf-seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--sf-sunken); border: var(--sf-border); border-radius: var(--sf-radius-sm); }
.sf-seg button, .sf-seg a { padding: 6px 12px; border: 0; border-radius: var(--sf-radius-xs); background: none; color: var(--sf-text-muted); cursor: pointer;
  font: 700 var(--sf-fs-sm) / 1 var(--sf-font-display); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.sf-seg [aria-pressed="true"], .sf-seg [aria-current="true"] { background: var(--sf-raised); color: var(--sf-gold-300); box-shadow: inset 0 0 0 1px var(--sf-gold-line); }

/* ==========================================================================================================
   6. Badges: generic, role, class, quality, raid group
   ========================================================================================================== */
.sf-badge {
  --c: var(--sf-text-muted);
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--sf-radius-xs);
  font: 700 var(--sf-fs-xs) / 1 var(--sf-font-display); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent);
}
.sf-badge svg { width: 12px; height: 12px; }
.sf-badge--solid { color: #fff; background: var(--c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.sf-badge--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.sf-badge--gold { --c: var(--sf-gold-300); }
.sf-badge--ok { --c: var(--sf-green); }
.sf-badge--warn { --c: var(--sf-amber); }
.sf-badge--bad { --c: var(--sf-red-400); }
.sf-badge--info { --c: var(--sf-blue); }
/* roles */
.sf-role-tank { --c: var(--sf-role-tank); }
.sf-role-healer { --c: var(--sf-role-healer); }
.sf-role-dps { --c: var(--sf-role-dps); }
/* raid groups (solid pills) */
.sf-group { --c: var(--sf-group-pug); display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--sf-radius-pill);
  font: 800 var(--sf-fs-xs) / 1 var(--sf-font-display); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.4); white-space: nowrap; }
.sf-group--fast-lane { --c: var(--sf-group-fast-lane); }
.sf-group--on-ramp { --c: var(--sf-group-on-ramp); }
.sf-group--pug { --c: var(--sf-group-pug); }

/* Class colour hooks: set --c for any component, and colour names. */
.sf-class-druid { --c: var(--sf-class-druid); }
.sf-class-hunter { --c: var(--sf-class-hunter); }
.sf-class-mage { --c: var(--sf-class-mage); }
.sf-class-paladin { --c: var(--sf-class-paladin); }
.sf-class-priest { --c: var(--sf-class-priest); }
.sf-class-rogue { --c: var(--sf-class-rogue); }
.sf-class-shaman { --c: var(--sf-class-shaman-text); --c-fill: var(--sf-class-shaman); }
.sf-class-warlock { --c: var(--sf-class-warlock); }
.sf-class-warrior { --c: var(--sf-class-warrior); }
.sf-cname { color: var(--c, var(--sf-text)); font-weight: 600; }
.sf-classbar { border-left: 3px solid var(--c-fill, var(--c, var(--sf-text-dim))); padding-left: 10px; }

/* Item quality: text colour on stone, frame colour for icons, ink colour inside parchment. */
.sf-q-poor { --q: var(--sf-q-poor); --qt: var(--sf-q-poor); --qi: var(--sf-q-poor-ink); }
.sf-q-common { --q: var(--sf-q-common); --qt: var(--sf-q-common); --qi: var(--sf-q-common-ink); }
.sf-q-uncommon { --q: var(--sf-q-uncommon); --qt: var(--sf-q-uncommon); --qi: var(--sf-q-uncommon-ink); }
.sf-q-rare { --q: var(--sf-q-rare); --qt: var(--sf-q-rare-text); --qi: var(--sf-q-rare-ink); }
.sf-q-epic { --q: var(--sf-q-epic); --qt: var(--sf-q-epic-text); --qi: var(--sf-q-epic-ink); }
.sf-q-legendary { --q: var(--sf-q-legendary); --qt: var(--sf-q-legendary); --qi: var(--sf-q-legendary-ink); }
.sf-item { color: var(--qt, var(--sf-text)); font-weight: 600; text-decoration: none; }
.sf-parchment .sf-item { color: var(--qi, var(--sf-ink)); }
.sf-badge.sf-q-poor, .sf-badge.sf-q-common, .sf-badge.sf-q-uncommon, .sf-badge.sf-q-rare, .sf-badge.sf-q-epic, .sf-badge.sf-q-legendary { --c: var(--qt); }
/* Item icon frame: 36 or 56 px icons from /items/ */
.sf-icon { --s: 36px; position: relative; display: inline-block; width: var(--s); height: var(--s); flex: none; border-radius: var(--sf-radius-sm);
  background: #000 center / cover no-repeat; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--q, #4a4450), inset 0 0 6px rgba(0, 0, 0, 0.7); }
.sf-icon--lg { --s: 56px; }
.sf-icon img { width: 100%; height: 100%; border-radius: inherit; display: block; }
.sf-icon .n { position: absolute; right: 2px; bottom: 0; font: 700 var(--sf-fs-xs) / 1.2 var(--sf-font-body); color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }

/* ==========================================================================================================
   7. Tables
   ========================================================================================================== */
.sf-tablewrap { overflow-x: auto; border-radius: var(--sf-radius-md); border: var(--sf-border); background: var(--sf-surface); }
.sf-table { width: 100%; border-collapse: collapse; font-size: var(--sf-fs-md); }
.sf-table th { text-align: left; padding: 10px 12px; font: 700 var(--sf-fs-xs) / 1.2 var(--sf-font-display); letter-spacing: var(--sf-tracking-label);
  text-transform: uppercase; color: var(--sf-gold-500); background: var(--sf-sunken); border-bottom: 1px solid var(--sf-gold-line); white-space: nowrap; }
.sf-table td { padding: 9px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); vertical-align: middle; }
.sf-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.015); }
.sf-table tbody tr:hover td { background: var(--sf-gold-bg); }
.sf-table tbody tr:last-child td { border-bottom: 0; }
.sf-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.sf-table--compact td { padding: 6px 10px; }

/* ==========================================================================================================
   8. Tooltip: the in-game item tooltip look (dark navy glass, quality-coloured name)
   ========================================================================================================== */
.sf-tooltip {
  max-width: 320px; padding: 9px 11px; border-radius: var(--sf-radius-sm); color: #fff; font: 400 var(--sf-fs-sm) / 1.4 var(--sf-font-body);
  background: linear-gradient(180deg, rgba(10, 14, 32, 0.96), rgba(4, 6, 16, 0.97));
  box-shadow: 0 0 0 1px #6b6b78, inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 2px rgba(160, 160, 190, 0.25), var(--sf-shadow-3);
}
.sf-tooltip .name { display: block; font-size: var(--sf-fs-lg); font-weight: 600; color: var(--qt, #fff); margin-bottom: 2px; }
.sf-tooltip .row { display: flex; justify-content: space-between; gap: 16px; }
.sf-tooltip .y { color: #ffd200; }
.sf-tooltip .g { color: var(--sf-q-uncommon); }
.sf-tooltip .d { color: #9d9d9d; }
/* simple text tooltip for UI hints: wrap the trigger in .sf-tip with a data-tip attribute */
.sf-tip { position: relative; }
.sf-tip[data-tip]:hover::after, .sf-tip[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 50; width: max-content; max-width: 260px;
  padding: 6px 10px; border-radius: var(--sf-radius-sm); font: 500 var(--sf-fs-sm) / 1.35 var(--sf-font-body); color: var(--sf-text); text-transform: none; letter-spacing: 0;
  background: #0b0a0e; box-shadow: 0 0 0 1px var(--sf-gold-line), var(--sf-shadow-2); pointer-events: none;
}

/* ==========================================================================================================
   9. Toasts
   ========================================================================================================== */
.sf-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.sf-toast {
  --c: var(--sf-gold-500);
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--sf-radius-md); color: var(--sf-text);
  background: var(--sf-raised); box-shadow: 0 0 0 1px var(--sf-gold-hair), var(--sf-shadow-3); border-left: 3px solid var(--c);
  animation: sf-toast-in 0.22s ease-out;
}
.sf-toast b { display: block; font: 700 var(--sf-fs-md) / 1.2 var(--sf-font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.sf-toast p { margin: 2px 0 0; color: var(--sf-text-muted); font-size: var(--sf-fs-sm); }
.sf-toast--ok { --c: var(--sf-green); }
.sf-toast--warn { --c: var(--sf-amber); }
.sf-toast--bad { --c: var(--sf-red-500); }
@keyframes sf-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================================================
   10. Empty state
   ========================================================================================================== */
.sf-empty { text-align: center; padding: var(--sf-space-8) var(--sf-space-5); border-radius: var(--sf-radius-md); border: 1px dashed var(--sf-gold-line);
  background: radial-gradient(60% 80% at 50% 0%, var(--sf-gold-bg), transparent 70%); }
.sf-empty .art { width: 64px; height: 64px; margin: 0 auto var(--sf-space-3); background: var(--sf-crest) center / contain no-repeat; opacity: 0.85; }
.sf-empty h3 { font: 700 var(--sf-fs-xl) / 1.1 var(--sf-font-display); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 6px; }
.sf-empty p { margin: 0 auto var(--sf-space-4); color: var(--sf-text-muted); max-width: 44ch; }

/* ==========================================================================================================
   11. Progress bars: generic, class-coloured, quality-coloured, and the XP bar
   ========================================================================================================== */
.sf-progress { --v: 0%; --c: var(--sf-accent); position: relative; height: 10px; border-radius: var(--sf-radius-xs); overflow: hidden;
  background: var(--sf-sunken); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--sf-gold-hair); }
.sf-progress::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-fill, var(--c)) 100%, #fff 25%), var(--c-fill, var(--c)) 55%, color-mix(in srgb, var(--c-fill, var(--c)) 100%, #000 30%));
  transition: width 0.4s ease; }
.sf-progress--gold { --c: var(--sf-gold-500); }
.sf-progress--ok { --c: var(--sf-green); }
.sf-progress.sf-q-poor, .sf-progress.sf-q-common, .sf-progress.sf-q-uncommon, .sf-progress.sf-q-rare, .sf-progress.sf-q-epic, .sf-progress.sf-q-legendary { --c: var(--q); }
.sf-progress--lg { height: 16px; }
/* XP bar: purple fill with segment ticks, like the in-game bar */
.sf-xp { --v: 0%; position: relative; height: 14px; border-radius: 2px; overflow: hidden; background: #120d18;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--sf-gold-line); }
.sf-xp::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: linear-gradient(180deg, #b77ce8, #7a3fb5 60%, #4f2378); }
.sf-xp::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 1px), rgba(0, 0, 0, 0.55) calc(5% - 1px) 5%); }
.sf-meter { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: var(--sf-fs-sm); }

/* ==========================================================================================================
   12. Sidebar (layout B sidebar: brand top, nav, profile bottom left, log out under it)
   ========================================================================================================== */
.sf-app { display: grid; grid-template-columns: var(--sf-side-w) minmax(0, 1fr); min-height: 100vh; }
.sf-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto;
  background: linear-gradient(180deg, #120f12, #0b0a0d 55%), var(--sf-grain);
  box-shadow: inset -1px 0 0 var(--sf-gold-hair), inset -2px 0 0 rgba(0, 0, 0, 0.6); }
.sf-side::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--sf-gold-line) 20%, var(--sf-gold-line) 80%, transparent); }
.sf-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; text-decoration: none; color: var(--sf-text); }
.sf-brand .emb { width: 42px; height: 42px; flex: none; background: var(--sf-emblem) center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.sf-brand b { font: 800 1.4rem / 0.95 var(--sf-font-display); letter-spacing: 0.03em; text-transform: uppercase; }
.sf-brand small { display: block; font: 700 0.62rem / 1 var(--sf-font-display); letter-spacing: 0.24em; color: var(--sf-trim); margin-top: 4px; text-transform: uppercase; }
.sf-nav-h { margin: 18px 20px 6px; font: 700 var(--sf-fs-xs) / 1 var(--sf-font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sf-text-dim);
  display: flex; align-items: center; gap: 8px; }
.sf-nav-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--sf-gold-hair), transparent); }
.sf-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; }
.sf-nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--sf-radius-sm); text-decoration: none;
  color: #cfc6b8; font-weight: 500; }
.sf-nav a svg { width: 20px; height: 20px; flex: none; color: var(--sf-text-dim); }
.sf-nav a:hover { background: rgba(255, 236, 200, 0.04); color: #fff; }
.sf-nav a[aria-current="page"] { color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--sf-accent) 30%, transparent), transparent 85%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sf-trim) 22%, transparent); }
.sf-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%) translateX(5px);
  background: var(--sf-ornament-diamond) center / contain no-repeat; }
.sf-nav a[aria-current="page"] svg { color: var(--sf-gold-300); }
.sf-nav .count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: var(--sf-radius-pill); background: var(--sf-accent); color: #fff;
  font: 700 0.72rem / 18px var(--sf-font-body); text-align: center; box-shadow: 0 0 0 1px var(--sf-trim); }
.sf-side-foot { margin-top: auto; padding: 12px 10px 14px; border-top: 1px solid var(--sf-gold-hair); }
.sf-me { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--sf-radius-md); text-decoration: none; color: var(--sf-text); }
.sf-me:hover { background: rgba(255, 236, 200, 0.04); }
.sf-me img { width: 40px; height: 40px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--c, var(--sf-trim)), 0 0 0 3px #000; background: #222; }
.sf-me b { display: block; font-weight: 600; line-height: 1.2; color: var(--c, var(--sf-text)); }
.sf-me small { display: block; color: var(--sf-text-muted); font-size: 0.8rem; }
.sf-logout { display: flex; align-items: center; gap: 12px; padding: 8px 12px; color: var(--sf-text-muted); text-decoration: none; border-radius: var(--sf-radius-sm); }
.sf-logout:hover { color: #fff; background: rgba(255, 236, 200, 0.04); }
.sf-content { min-width: 0; padding: 22px 28px 48px; max-width: var(--sf-content-max); width: 100%; }
@media (max-width: 900px) {
  .sf-app { grid-template-columns: minmax(0, 1fr); }
  .sf-side { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); z-index: 40; transform: translateX(-102%); transition: transform 0.25s ease; }
  body.drawer .sf-side { transform: none; }
  .sf-content { padding: 14px 14px 96px; }
}

/* ==========================================================================================================
   13. Forms (inputs used by sign-ups, officer area, BiS editor)
   ========================================================================================================== */
.sf-field { display: grid; gap: 6px; }
.sf-field > span { font: 700 var(--sf-fs-xs) / 1 var(--sf-font-display); letter-spacing: var(--sf-tracking-label); text-transform: uppercase; color: var(--sf-text-muted); }
.sf-input, .sf-select, .sf-textarea { width: 100%; min-height: 38px; padding: 8px 12px; color: var(--sf-text); background: var(--sf-sunken);
  border: 1px solid rgba(224, 178, 78, 0.22); border-radius: var(--sf-radius-sm); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); font: inherit; }
.sf-input:focus, .sf-select:focus, .sf-textarea:focus { outline: none; border-color: var(--sf-gold-500); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), var(--sf-glow-gold); }
.sf-input::placeholder, .sf-textarea::placeholder { color: var(--sf-text-dim); }

/* ==========================================================================================================
   14. Layout helpers
   ========================================================================================================== */
.sf-grid { display: grid; gap: var(--sf-space-4); grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.sf-row { display: flex; gap: var(--sf-space-3); align-items: center; flex-wrap: wrap; }
.sf-stack > * + * { margin-top: var(--sf-space-3); }

@media (prefers-reduced-motion: reduce) {
  .sf-toast { animation: none; }
  .sf-progress::before, .sf-btn, .sf-side { transition: none; }
}
@media (forced-colors: active) {
  .sf-card::before { display: none; }
  .sf-btn, .sf-badge, .sf-group, .sf-card, .sf-panel { border: 1px solid CanvasText; }
}