/* ==========================================================================
   immortalguardians.net — roster page styles
   Layered on UIkit 3 + DataTables 1.13 (both loaded first). Restores the
   Gen-3 roster identity: WoW class-colour names, dark DataTables chrome, and
   the greyscale-hover external tool-link icons (the salvaged .wowimglink).
   Class palette + .wowimglink + DataTables overrides are adapted from the
   recovered simpler-site-2024/custom.css.
   ========================================================================== */

/* --- WoW class colours (in-game palette) ---------------------------------
   Prefixed with the always-present `.uk-light` body context so the selectors
   are (0,3,0). That beats UIkit's `.uk-light a{color:#fff}` (0,1,1) at rest AND
   its `.uk-light a:hover{color:#fff}` / our accent-hover (both 0,2,1) — so a
   class-coloured *link* (roster names) keeps its class colour in EVERY state
   (rest/hover/focus/visited), not just at rest. The hover cue for those links
   is the class-coloured underline from a.ig-char-link:hover (text-decoration
   inherits currentColor). Every use carries both classes ("wow-class wow-X"),
   on spans, links and headings. */
.wow-class { font-weight: 500; }
.uk-light .wow-class.wow-warrior      { color: #C79C6E; }
.uk-light .wow-class.wow-paladin      { color: #F58CBA; }
.uk-light .wow-class.wow-hunter       { color: #ABD473; }
.uk-light .wow-class.wow-rogue        { color: #FFF569; }
.uk-light .wow-class.wow-priest       { color: #FFFFFF; }
.uk-light .wow-class.wow-death-knight { color: #C41F3B; }
.uk-light .wow-class.wow-shaman       { color: #0070DE; }
.uk-light .wow-class.wow-mage         { color: #69CCF0; }
.uk-light .wow-class.wow-warlock      { color: #9482C9; }
.uk-light .wow-class.wow-monk         { color: #00FF96; }
.uk-light .wow-class.wow-druid        { color: #FF7D0A; }
.uk-light .wow-class.wow-demon-hunter { color: #A330C9; }
.uk-light .wow-class.wow-evoker       { color: #33937F; }   /* post-dates the 1–12 palette */
.uk-light .wow-class.wow-unknown      { color: var(--ig-muted); font-weight: 300; }

/* --- Shared small bits --------------------------------------------------- */
.ig-muted { color: var(--ig-muted); }
.ig-ilvl-stale {
    color: var(--ig-muted);
    font-style: italic;
    cursor: help;
    border-bottom: 1px dotted var(--ig-muted);
}

/* --- Visually-hidden page heading (the visible header is the tabs bar) ---- */
.ig-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Section header bar: view tabs (left) + count/updated (right) ---------
   Tabs-as-header layout: the active nav already says "Roster", so there's no
   separate visible page title — the tabs are the header, with the meta line
   aligned to their right. The shared bottom border lives on the bar. */
.ig-roster-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.2em 1.2em;
    border-bottom: 1px solid var(--ig-border);
    margin: 0.4em 0 1.2em;
}
.ig-roster-meta {
    color: var(--ig-muted);
    font-size: 0.85rem;
    margin: 0 0 0.45em;
}
/* Inline icon (Font Awesome SVG) — tracks the surrounding text size/colour. */
.ig-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;   /* FA's baseline offset */
    margin-right: 0.4em;
    opacity: 0.85;
}

/* Class & spec icons (self-hosted game icons) + the secure-rank lock. */
.ig-class-icon,
.ig-spec-icon {
    border: 1px solid rgba(0, 0, 0, 0.45);
}
/* Class column is icon-only, so the icon carries the cell — make it prominent. */
.ig-class-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    vertical-align: middle;
}
.ig-spec-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    vertical-align: -0.35em;
    margin-right: 0.5em;
}
/* Centre every cell vertically so the larger class icon doesn't skew the row. */
table.dataTable tbody td { vertical-align: middle; }
.ig-col-rank { white-space: nowrap; }   /* keep "Member 🔒" on one line */
.ig-secure {
    color: var(--ig-accent);    /* drives the lock's currentColor */
    margin-left: 0.35em;
    white-space: nowrap;
}
.ig-secure .ig-icon {
    width: 0.8em; height: 0.8em;
    margin-right: 0;
    vertical-align: -0.02em;
    opacity: 0.9;
}
.ig-roster-foot { font-size: 0.8rem; margin-top: 1.5em; }

/* --- Section sub-nav (Characters / Mythic+ / Raids / …) ------------------ */
.ig-roster-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 1.6em;
}
.ig-tab {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ig-accent);
    text-decoration: none;
    padding: 0.4em 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms ease, border-color 120ms ease;
}
.ig-tab:hover { color: var(--ig-accent-hover); text-decoration: none; }
.ig-tab-active { color: var(--ig-fg); border-bottom-color: var(--ig-accent); }
.ig-tab-soon {
    color: var(--ig-muted);
    cursor: not-allowed;
}
.ig-tab-soon::after {
    content: "soon";
    font-size: 0.6em;
    vertical-align: super;
    margin-left: 0.3em;
    opacity: 0.7;
}

/* Character name links (roster table + alt lists) — keep the class colour,
   add a hover underline so they read as links. */
a.ig-char-link { text-decoration: none; }
a.ig-char-link:hover { text-decoration: underline; }

/* --- Filter chips — checkbox-style toggles -------------------------------
   Two groups under "Activity:" / "Level:" labels. Activity chips toggle one
   disjoint cohort each (Active / Midnight / Pre-Midnight / Aged) into the
   visible set (default: Active + Midnight); the Level chip ANDs a "max level
   only" filter on top. They read as checkboxes (box + tick) and multi-select.
   Each chip carries a tooltip explaining it. */
.ig-roster-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin: 1em 0 1.2em;
}
.ig-filter-icon {
    display: inline-flex;
    align-items: center;
    color: var(--ig-muted);
    margin-right: 0.1em;
}
.ig-filter-icon svg { display: block; fill: currentColor; }

/* Group label leading a set of chips ("Activity:", "Level:") in the filter row. */
.ig-filter-group-label {
    color: var(--ig-muted);
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}
.ig-chip + .ig-filter-group-label { margin-left: 0.7em; }   /* extra gap before a new group */

/* --- Mythic+ view --------------------------------------------------------- */
.ig-mplus-season { font-size: 0.88rem; margin: 0.2em 0 1.1em; }
th.ig-mplus-dcol, td.ig-mplus-dcol {
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 6px 5px;
    white-space: nowrap;
}
th.ig-mplus-dcol { cursor: help; }                 /* full dungeon name in the tooltip */
th.ig-mplus-score, td.ig-mplus-score { text-align: center; }
th.ig-mplus-rio, td.ig-mplus-rio { text-align: center; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
td.ig-mplus-rio .wowimglink img { margin: 0; }
/* Header icon (Option B): the Blizzard zone tile, centre-cropped to a square,
   with the abbreviation overlaid on a dark gradient at the bottom inside edge. */
.ig-mplus-ico {
    position: relative;
    display: inline-block;
    width: 36px; height: 36px;
    border-radius: 5px;
    overflow: hidden;
    vertical-align: middle;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.ig-mplus-abbr {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 7px 0 2px;
    text-align: center;
    /* match the other column headers: Oswald 400, same letter-spacing/colour */
    font-family: 'Oswald', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--ig-fg);
    text-shadow: 0 1px 3px #000, 0 0 2px #000;   /* keep legible over the tile art */
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.80));
}
table.dataTable thead th.ig-mplus-dcol { vertical-align: middle; }
/* DataTables ships `table.dataTable thead th { text-align:left }` (0,1,3),
   which out-specifies the plain rules above and left-aligns the headers while
   the cells centre — re-assert centre for the M+ numeric columns under the
   same scope so headers and cells line up. */
table.dataTable thead th.ig-mplus-dcol,
table.dataTable thead th.ig-mplus-score,
table.dataTable thead th.ig-num,
table.dataTable tbody td.ig-mplus-dcol,
table.dataTable tbody td.ig-mplus-score,
table.dataTable tbody td.ig-num { text-align: center; }
/* The DataTables sort arrow is absolutely positioned at the header's right edge
   (right:10px), so on a centred column it crowds the right of a short label and
   the label reads as pushed left vs the centred cell. Reserve a symmetric gutter
   so the arrow sits in the right padding, clear of the label, while equal left
   padding keeps the label truly centred over the column. (Reusable for any
   centred sortable column.) */
table.dataTable thead th.ig-mplus-score,
table.dataTable thead th.ig-num {
    padding-left: 1.6em;
    padding-right: 1.6em;
}
/* Dungeon columns: DataTables injects `padding-right:26px` on every sortable
   header (selector `table.dataTable thead>tr>th.sorting`, specificity (0,2,4)) to
   reserve space for its absolute sort arrow. That out-ranks a `table.dataTable
   thead th` rule, so a symmetric gutter set there is silently overridden on the
   right — leaving 0.9em left / 26px right and shoving the centred icon LEFT of the
   centred number cells. Scope with the table id (an ID beats DataTables' classes)
   to set a genuinely symmetric, tight gutter; the arrow (right:10px) still clears
   the 36px icon, and the icon re-centres over the numbers. */
#ig-roster thead th.ig-mplus-dcol {
    padding-left: 20px;
    padding-right: 20px;
}
/* Keep multi-word spec names (Beast Mastery, Restoration…) on one line. */
td.ig-col-spec, th.ig-col-spec { white-space: nowrap; }
td.ig-mplus-score {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--ig-accent);
}

/* Per-dungeon cell: key level prominent, score on a sub-line. The level's COLOUR
   is driven by the user Timing⇄Push toggle (data-mplus-colour on #ig-roster).
   The WoW rarity ramp + timed/depleted greens & reds are fixed game-palette
   values, deliberately NOT theme variables — they mean the same in every theme. */
#ig-roster[data-mplus-colour] {
    --mplus-timed:    #46c156;
    --mplus-depleted: #e0524d;
    --q-common:    #ffffff;   --q-uncommon:  #1eff00;
    --q-rare:      #3d8bff;   --q-epic:      #b860f0;
    --q-legendary: #ff8000;   --q-artifact:  #e6cc80;
}
td.ig-mplus-dcol .ig-mplus-lvl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
td.ig-mplus-dcol .ig-mplus-sub {
    display: block;
    font-size: 0.7rem;
    line-height: 1.1;
    color: var(--ig-muted);
    font-variant-numeric: tabular-nums;
}
/* Keystone upgrade dots — a vertical stack to the right of the key level (+2 =
   two dots, +3 = three; +1 shows none, just the green number). Dots inherit the
   level's colour via currentColor (green family when timed). Only meaningful in
   the Timed/Depleted scheme, so hidden in Key-level mode. */
td.ig-mplus-dcol .ig-mplus-up {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}
td.ig-mplus-dcol .ig-mplus-up i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}
#ig-roster[data-mplus-colour="rarity"] .ig-mplus-up { display: none; }
/* --- Timing mode (Scheme A, default): colour by timed status -------------- */
#ig-roster[data-mplus-colour="timing"] td.ig-mplus-timed    .ig-mplus-lvl { color: var(--mplus-timed); }
#ig-roster[data-mplus-colour="timing"] td.ig-mplus-depleted .ig-mplus-lvl { color: var(--mplus-depleted); }
/* --- Push mode (Scheme B): colour by key-level rarity --------------------- */
#ig-roster[data-mplus-colour="rarity"] td.ig-q-common    .ig-mplus-lvl { color: var(--q-common); }
#ig-roster[data-mplus-colour="rarity"] td.ig-q-uncommon  .ig-mplus-lvl { color: var(--q-uncommon); }
#ig-roster[data-mplus-colour="rarity"] td.ig-q-rare      .ig-mplus-lvl { color: var(--q-rare); }
#ig-roster[data-mplus-colour="rarity"] td.ig-q-epic      .ig-mplus-lvl { color: var(--q-epic); }
#ig-roster[data-mplus-colour="rarity"] td.ig-q-legendary .ig-mplus-lvl { color: var(--q-legendary); }
#ig-roster[data-mplus-colour="rarity"] td.ig-q-artifact  .ig-mplus-lvl { color: var(--q-artifact); }
/* In Push mode the colour channel encodes rarity, so depletion shows as a dim +
   a small red down-tick (▾) instead — matches the agreed mockup. */
#ig-roster[data-mplus-colour="rarity"] td.ig-mplus-depleted .ig-mplus-lvl { opacity: 0.5; }
#ig-roster[data-mplus-colour="rarity"] td.ig-mplus-depleted .ig-mplus-lvl::after {
    content: "\25BE";
    font-size: 0.6rem;
    color: var(--mplus-depleted);
    vertical-align: super;
    margin-left: 2px;
    opacity: 1;
}

/* --- Key-colour toggle (Timing ⇄ Push) — segmented control, chip-consistent - */
.ig-mplus-colourtoggle {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin: 0 0 1.1em;
}
.ig-ct-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ig-muted);
}
.ig-ct-btn {
    position: relative;
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ig-muted);
    background: var(--ig-bg-elevated);
    border: 1px solid var(--ig-border);
    padding: 0.4em 0.95em;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.ig-ct-btn:first-of-type { border-radius: 3px 0 0 3px; }
.ig-ct-btn:last-of-type  { border-radius: 0 3px 3px 0; }
/* Collapse the shared seam (overlap by 1px) rather than dropping a border, so the
   second button keeps its own left edge. Raise the hovered/active button so its
   full 4-sided border (incl. that seam edge) draws on top instead of being
   occluded by its neighbour. */
.ig-ct-btn + .ig-ct-btn { margin-left: -1px; }
.ig-ct-btn:hover,
.ig-ct-btn:focus-visible,
.ig-ct-btn[aria-pressed="true"] { z-index: 1; }
.ig-ct-btn:hover { color: var(--ig-accent); border-color: var(--ig-accent); }
.ig-ct-btn[aria-pressed="true"] {
    color: var(--ig-bg);
    background: var(--ig-accent);
    border-color: var(--ig-accent);
}

/* Controls row above the M+ table: Colour scheme (left) ↔ Season (right). */
.ig-mplus-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em 1.6em;
    margin: 0 0 1.1em;
}
.ig-mplus-controls .ig-mplus-colourtoggle { margin: 0; }
.ig-season-pick { display: inline-flex; align-items: center; gap: 0.6em; }
.ig-season-select {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--ig-fg);
    background: var(--ig-bg-elevated);
    border: 1px solid var(--ig-border);
    border-radius: 3px;
    padding: 0.4em 0.7em;
    cursor: pointer;
    transition: border-color 120ms ease;
}
.ig-season-select:focus { outline: none; border-color: var(--ig-accent); }
.ig-season-select option { color: var(--ig-fg); background: var(--ig-bg-elevated); }

/* Header chip for a dungeon with no zone-tile art yet (historical seasons until
   the tiles land in Stage 4) — same footprint as .ig-mplus-ico, abbr centred. */
.ig-mplus-ico-noart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ig-bg-elevated);
    box-shadow: inset 0 0 0 1px var(--ig-border);
}
.ig-mplus-ico-noart .ig-mplus-abbr {
    position: static;
    padding: 0;
    background: none;
    text-shadow: none;
    color: var(--ig-fg);
}

.ig-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ig-muted);
    background: var(--ig-bg-elevated);
    border: 1px solid var(--ig-border);
    border-radius: 3px;
    padding: 0.4em 0.85em;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}
.ig-chip:hover { color: var(--ig-accent); border-color: var(--ig-accent); }
.ig-chip[aria-pressed="true"] { color: var(--ig-fg); border-color: var(--ig-accent); }

/* the checkbox box + tick */
.ig-box {
    width: 13px; height: 13px; flex: none;
    border: 1.5px solid var(--ig-muted);
    border-radius: 2px;
    position: relative;
    transition: background 120ms ease, border-color 120ms ease;
}
.ig-chip:hover .ig-box { border-color: var(--ig-accent); }
.ig-chip[aria-pressed="true"] .ig-box {
    background: var(--ig-accent);
    border-color: var(--ig-accent);
}
.ig-chip[aria-pressed="true"] .ig-box::after {
    content: "";
    position: absolute;
    left: 3.5px; top: 0.5px;
    width: 4px; height: 7px;
    border: solid var(--ig-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ig-chip-count { opacity: 0.7; font-size: 0.85em; }

/* --- External tool-link icons (salvaged .wowimglink) --------------------- */
.ig-col-links { white-space: nowrap; }
.wowimglink img {
    width: 20px;
    height: 20px;
    margin: 0 2px;
    vertical-align: middle;
    border-radius: 50%;
    filter: grayscale(62%) brightness(0.92);   /* desaturated, not fully grey */
    cursor: pointer;
    transition: filter 120ms ease;
}
.wowimglink:hover img { filter: none; }
/* Raider.IO's circular mark reads smaller than Armory/WCL — nudge it up so the
   circle is a similar visual size. */
.wowimglink img[src*="raiderio"] { width: 24px; height: 24px; }
/* Tool-link tooltips sit in the right-hand column; anchor them to the right so
   the themed tooltip doesn't overflow the viewport edge (the [data-tip] base in
   site.css centres them, which is right for the left-aligned detail page). */
.ig-col-links [data-tip]:hover::after,
.ig-col-links [data-tip]:focus-visible::after { left: auto; right: 0; transform: none; }
.ig-col-links [data-tip]:hover::before,
.ig-col-links [data-tip]:focus-visible::before { left: auto; right: 8px; transform: none; }
/* Keep the bucket column out of view before DataTables hides it (no flash). */
.ig-col-bucket { display: none; }

/* --- DataTables dark theme (overrides the default light CSS) -------------- */
.dataTables_wrapper {
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.5em;
}
table.dataTable {
    border-collapse: collapse;
    width: 100% !important;
}
table.dataTable thead th {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--ig-fg);
    border-bottom: 2px solid var(--ig-border);
    padding: 8px 10px;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after { opacity: 0.4; }
table.dataTable tbody td {
    border-top: 1px solid var(--ig-border);
    padding: 6px 10px;
}
table.dataTable tbody tr { background-color: transparent; }
table.dataTable.uk-table-hover tbody tr:hover { background-color: var(--ig-bg-elevated); }

/* Controls around the table (filter box, length menu, pagination) share the
   segmented-control / chip look: Oswald, uppercase labels, bordered, accent on
   hover, accent-filled when current. The labels uppercase; typed/selected values
   stay normal case so search text and "25" read naturally. */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ig-muted);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ig-fg);
    background: var(--ig-bg-elevated);
    border: 1px solid var(--ig-border);
    border-radius: 3px;
    padding: 0.4em 0.7em;
    margin-left: 0.5em;
    transition: border-color 120ms ease;
}
.dataTables_wrapper .dataTables_length select { cursor: pointer; }
.dataTables_wrapper .dataTables_length select option { color: var(--ig-fg); background: var(--ig-bg-elevated); }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { outline: none; border-color: var(--ig-accent); }

/* Info line */
.dataTables_wrapper .dataTables_info {
    font-family: 'Oswald', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--ig-muted);
}

/* Pagination — bordered buttons matching the Colour-scheme / chip controls. */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ig-muted) !important;
    background: var(--ig-bg-elevated) !important;
    border: 1px solid var(--ig-border) !important;
    border-radius: 3px !important;
    padding: 0.35em 0.75em !important;
    margin: 0 2px !important;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--ig-accent) !important;
    border-color: var(--ig-accent) !important;
    background: var(--ig-bg-elevated) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--ig-bg) !important;
    background: var(--ig-accent) !important;
    border-color: var(--ig-accent) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--ig-muted) !important;
    background: var(--ig-bg-elevated) !important;
    border-color: var(--ig-border) !important;
    opacity: 0.5;
}

/* --- Player detail page -------------------------------------------------- */
.ig-char-back { margin: 0 0 0.3em; font-size: 0.85rem; }
.ig-char-head h1 {
    font-size: 2.1rem;
    margin: 0.1em 0 0.15em;
    font-variant: small-caps;
    letter-spacing: 0.02em;
    /* class-coloured (the .wow-* class supplies the colour); no fg override */
}
/* Identity row: prominent class icon + name/sub, with the divider full-width. */
.ig-char-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--ig-border);
    margin-bottom: 1.4em;
}
.ig-char-classicon {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.45);
}
.ig-char-namewrap { min-width: 0; }
.ig-char-sub {
    color: var(--ig-muted);
    font-size: 0.95rem;
    margin: 0;
}

.ig-char-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1em 1.4em;
    margin: 0 0 1.6em;
}
.ig-char-stats > div { margin: 0; }
.ig-char-stats dt {
    font-family: 'Oswald', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ig-muted);
    margin: 0 0 0.15em;
}
.ig-char-stats dd { margin: 0; font-size: 1.05rem; }

.ig-char-links { margin: 0 0 1.8em; }
.ig-char-links .wowimglink img { width: 26px; height: 26px; margin-right: 0.4em; }
.ig-char-links .wowimglink img[src*="raiderio"] { width: 31px; height: 31px; }

.ig-char-section { margin: 0 0 1.8em; }
.ig-char-section h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.15rem;
    font-variant: small-caps;
    letter-spacing: 0.03em;
    color: var(--ig-fg);
    padding-bottom: 0.2em;
    border-bottom: 1px solid var(--ig-border);
    margin: 0 0 0.8em;
}
.ig-char-note { font-size: 0.85rem; margin: 0 0 0.7em; }

.ig-alt-list { list-style: none; padding: 0; margin: 0; }
.ig-alt-list li {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35em 0;
}
.ig-alt-list .ig-class-icon { width: 26px; height: 26px; }
.ig-alt-list .ig-spec-icon { width: 18px; height: 18px; vertical-align: middle; margin-right: 0.35em; }
.ig-alt-meta { font-size: 0.9rem; }

/* Item-level sparkline (server-rendered inline SVG; themed via CSS) */
.ig-spark {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
}
.ig-spark-line { stroke: var(--ig-accent); stroke-width: 2; }
.ig-spark-dot  { fill: var(--ig-accent); }
.ig-spark-label {
    fill: var(--ig-muted);
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
    .ig-chip { font-size: 0.85rem; padding: 0.35em 0.7em; }
    table.dataTable thead th, table.dataTable tbody td { padding: 5px 6px; }
    .ig-roster-tabs { gap: 0.3em 1.1em; }
    .ig-tab { font-size: 0.9rem; }
}