div.overview-layout {
    width: min(1200px, calc(100% - 4rem));
    margin: 1.4em auto 2em auto;
    display: grid;
    grid-template-columns: minmax(20rem, 25rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* The legend spans the full layout width rather than sitting in the narrow
   sidebar, so its three columns have room to sit side by side. */
div.legend-shell {
    width: min(1200px, calc(100% - 4rem));
    margin: 0 auto;
}

/* The header lays its sections out left to right; this pushes the tool's own
   slot (header_right_template) to the far right. */
div.header-section.header-extra {
    margin-left: auto;
}

button.legend-toggle {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 1px solid #4b5b74;
    border-radius: 50%;
    background: rgba(31, 35, 41, 0.94);
    color: #8ebeff;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

button.legend-toggle:hover {
    border-color: #8ebeff;
    background: rgba(56, 72, 94, 0.94);
}

button.legend-toggle.active {
    border-color: #8ebeff;
    background: #3f7fd0;
    color: #f2f7ff;
}

div.legend {
    margin-top: 1.4em;
    padding: 1em 1.2em;
    display: flex;
    gap: 1.6em;
    align-items: flex-start;
    border: 1px solid #363d47;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(31, 35, 41, 0.94), rgba(25, 27, 31, 0.94));
    color: #c3cad4;
    font-size: 0.92em;
}

div.legend.hidden {
    display: none;
}

ul.legend-metrics {
    flex: 1.3;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul.legend-metrics li {
    margin-bottom: 0.7em;
    line-height: 1.45;
}

/* The badges are the same elements the list uses, so they carry their own
   colour; they just need to sit on the text baseline here. */
ul.legend-metrics span.member-priority,
ul.legend-metrics span.member-value,
ul.legend-metrics span.member-raids {
    margin-right: 0.4em;
    vertical-align: middle;
}

div.legend-values {
    flex: 1;
    color: #93a0b1;
}

ul.legend-track {
    margin: 0.5em 0 0.9em 0;
    padding: 0;
    list-style-type: none;
    color: #c3cad4;
}

ul.legend-track li {
    margin-bottom: 0.25em;
}

li.legend-track-name {
    color: #93a0b1;
}

ul.legend.dotted {
    flex: 1.1;
    margin: 0;
    padding-left: 1.1em;
    list-style-type: disc;
    line-height: 1.5;
}

ul.legend.dotted li {
    margin-bottom: 0.35em;
}

/* The site's shared tab switcher, sized down to fit the sidebar. */
div.list-shell div.view-tabs {
    margin: 0 0 0.9em 0;
    padding: 0.2em 0.6em;
    gap: 1em;
}

div.list-shell div.view-tabs button.tab-button {
    font-size: 0.9em;
    padding: 0.4em 0;
}

div.group-list {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

div.group-heading {
    margin: 0.3em 0 0.5em 0.2em;
    color: #8ebeff;
    font-size: 0.72em;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

div.group-list + div.group-heading {
    margin-top: 1.2em;
}

div.group-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

span.group-name {
    color: #e6ebf2;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

span.group-sub {
    color: #7f8a99;
    font-size: 0.8em;
}

/* Journal portraits are wide close-ups of the boss's face; crop them square. */
img.boss-portrait {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid #3a4250;
    border-radius: 8px;
    object-fit: cover;
}

/* The boss view's banner: the journal portrait (600x600, the largest the API
   offers) cropped wide behind the title and summary. The gradient keeps the
   left side dark enough for the text and lets the face show on the right. */
div.detail-pane div.boss-hero {
    margin-bottom: 1em;
    padding: 1.2em 1.3em 0.2em 1.3em;
    min-height: 9rem;
    border: 1px solid #3a4250;
    border-radius: 14px;
    background-image:
        linear-gradient(90deg, rgba(20, 22, 26, 0.96) 0%, rgba(20, 22, 26, 0.82) 40%, rgba(20, 22, 26, 0.15) 100%),
        var(--boss-image);
    background-size: cover;
    background-position: center 30%;
}

div.detail-pane div.boss-hero span.group-title {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

span.group-count {
    flex-shrink: 0;
    color: #93a0b1;
    font-size: 0.8em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

input.loot-search {
    box-sizing: border-box;
    width: 100%;
    padding: 0.6em 0.8em;
    border: 1px solid #3a4250;
    border-radius: 10px;
    background: rgba(22, 25, 30, 0.8);
    color: #e6ebf2;
    font-size: 1em;
}

input.loot-search:focus {
    outline: none;
    border-color: #5674a1;
}

div.search-hint {
    margin-top: 0.6em;
    color: #7f8a99;
    font-size: 0.8em;
    line-height: 1.4;
}

div.detail-pane span.group-title {
    color: #dbe7ff;
    font-size: 1.45em;
    font-weight: bold;
}

div.detail-pane span.group-subtitle {
    margin-left: 0.6em;
    color: #93a0b1;
    font-size: 0.8em;
}

div.detail-pane span.summary-stat-count span.summary-value {
    color: #c3cad4;
}

/* Who received it, in the week, boss, and search lists. */
div.detail-pane td.player-cell {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.78em;
    white-space: nowrap;
}

div.detail-pane a.player-link {
    font-weight: bold;
    text-decoration: none;
}

div.detail-pane a.player-link:hover {
    text-decoration: underline;
}

div.content-shell,
div.detail-shell {
    padding: 1.1em 1.1em 0.9em 1.1em;
    background:
        radial-gradient(circle at top left, rgba(61, 90, 126, 0.22), transparent 38%),
        linear-gradient(180deg, #1d1f23 0%, #191919 100%);
    border: 1px solid #3c3c3c;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

div.list-shell {
    min-width: 0;
}

div.detail-shell {
    min-height: calc(100vh - 10rem);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 1rem;
}

/* The shared options bar is sized for a full-width page; in this sidebar it
   needs to sit flush and wrap to the column. */
div.list-shell div.options {
    width: 100%;
    margin: 0 0 0.5em 0;
    padding: 0;
    display: flex;
}

div.list-shell div.option-group {
    margin-right: 0;
}

div.list-shell span.option-text {
    color: #93a0b1;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

div.list-shell div.option-set {
    padding: 0.3em 0.35em;
    border-width: 1px;
    border-color: #3a4250;
}

div.list-shell button.option-button {
    padding: 0.25em 0.7em 0.3em 0.7em;
    font-size: 0.86em;
}

div.list-shell button.option-button:not(.active) {
    font-size: 0.78em;
}

div.member-list-head {
    display: flex;
    justify-content: flex-end;
    gap: 0.3em;
    padding: 0 1em 0.45em 1em;
}

/* The labels line up with the badges in each member row: both are fixed-width
   boxes of 2.6rem (see span.member-priority and friends). */
span.head-label {
    box-sizing: border-box;
    width: 2.6rem;
    color: #7f8a99;
    font-size: 0.62em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

div.member-list {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

a.member-card,
a.group-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0.95em 1em;
    border: 1px solid #343434;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(34, 34, 34, 0.98), rgba(29, 29, 29, 0.98));
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

a.member-card:hover,
a.group-card:hover {
    background: linear-gradient(180deg, rgba(38, 38, 38, 0.98), rgba(32, 32, 32, 0.98));
    border-color: #4a4a4a;
    transform: translateY(-1px);
}

a.member-card.selected,
a.group-card.selected {
    border-color: #5674a1;
    box-shadow: inset 0 0 0 1px rgba(120, 164, 232, 0.26);
}

div.member-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.55em;
}

span.member-seq {
    min-width: 1.3rem;
    color: #6c7480;
    font-size: 0.82em;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

span.member-name {
    font-size: 1.03em;
    font-weight: bold;
    /* Never let a long name push into the badges. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.member-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3em;
    flex-shrink: 0;
}

span.member-priority,
span.member-value,
span.member-raids {
    box-sizing: border-box;
    width: 2.6rem;
    padding: 0.3em 0 0.34em 0;
    border: 1px solid #3a3f48;
    border-radius: 8px;
    background: rgba(22, 25, 30, 0.7);
    font-size: 0.9em;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Each metric keeps one colour everywhere it appears - here and in the detail
   summary - so the badges are identifiable by hue alone. Badges sit in Priority,
   Value, Raids order to match the sort buttons. */
span.member-priority { color: #ffe06e; }
span.member-value { color: #b96be6; }
span.member-raids { color: #c3cad4; }

/* The column currently ordering the list is emphasised by weight rather than by
   hue, which is already carrying the metric's identity. */
div.member-list[data-sort="priority"] span.member-priority,
div.member-list[data-sort="value"] span.member-value,
div.member-list[data-sort="raids"] span.member-raids {
    border-color: #5c6472;
    background: rgba(255, 255, 255, 0.06);
    font-size: 1.05em;
    font-weight: bold;
}

body:not([data-debug="true"]) tr.debug-row {
    display: none;
}

tr.debug-row td {
    padding: 0.2em 0.7em 0.6em 0.7em !important;
    font-family: "Lucida Console", monospace;
    font-size: 0.78em;
    color: #9fb4d0;
    background: rgba(22, 25, 30, 0.6);
}

tr.debug-row dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.8em;
    row-gap: 0.12em;
}

tr.debug-row dt {
    color: #6d7a8a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.92em;
}

tr.debug-row dd {
    margin: 0;
    color: #d0dcec;
    word-break: break-all;
}

div.member-list span.member-priority.zero,
div.member-list span.member-value.zero,
div.member-list span.member-raids.zero {
    opacity: 0.3;
    border-color: #3a3f48;
    background: rgba(22, 25, 30, 0.5);
    color: #6e7480;
    font-size: 0.9em;
    font-weight: normal;
}

span.member-status {
    display: inline-block;
    padding: 0.18em 0.5em 0.22em 0.5em;
    border: 1px solid #4b515a;
    border-radius: 999px;
    color: #aeb6c1;
    background: #252a31;
    font-size: 0.72em;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

div.overview-total {
    margin-top: 0.95em;
    padding: 0.9em 1em 0.95em 1em;
    border: 1px solid #363d47;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(31, 35, 41, 0.94), rgba(25, 27, 31, 0.94));
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div.total-copy {
    display: flex;
    flex-direction: column;
    gap: 0.18em;
}

div.total-copy-center {
    align-items: center;
}

div.total-copy-right {
    align-items: flex-end;
}

span.total-label {
    color: #93a0b1;
    font-size: 0.76em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

span.total-count {
    color: #ffe06e;
    font-size: 1.4em;
    font-weight: bold;
}

div.detail-empty,
div.detail-pane {
    min-height: calc(100vh - 12rem);
}

div.detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    border: 1px dashed #47505c;
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(24, 28, 33, 0.82), rgba(19, 21, 25, 0.82));
    color: #bcc7d5;
    text-align: center;
}

div.detail-empty-title {
    color: white;
    font-size: 1.08em;
    font-weight: bold;
}

div.detail-empty-copy {
    color: #9ca8b6;
    font-size: 0.9em;
}

div.detail-pane {
    width: 100%;
}

div.detail-pane div.page-title {
    margin-bottom: 1em;
    font-size: 1.2em;
}

div.detail-pane span.player-name {
    font-weight: bold;
    font-size: 1.45em;
    line-height: 1.05;
    letter-spacing: 0.01em;
}

div.detail-pane div.detail-summary {
    display: flex;
    align-items: stretch;
    gap: 0.6em;
    margin-bottom: 1.1em;
}

div.detail-pane span.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
    min-width: 4.6rem;
    padding: 0.5em 0.8em 0.55em 0.8em;
    border: 1px solid #3a4250;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(33, 38, 46, 0.94), rgba(25, 28, 33, 0.94));
}

div.detail-pane span.summary-value {
    font-size: 1.35em;
    font-weight: bold;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

div.detail-pane span.summary-stat-priority span.summary-value { color: #ffe06e; }
div.detail-pane span.summary-stat-value span.summary-value { color: #b96be6; }
div.detail-pane span.summary-stat-raids span.summary-value { color: #c3cad4; }

div.detail-pane span.summary-label {
    color: #93a0b1;
    font-size: 0.68em;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}


div.detail-pane table.loot-detail {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.35rem;
}

/* See the notes on the same rules in detail.css. */
div.detail-pane table.loot-detail td {
    text-align: left;
    vertical-align: middle;
    padding: 0.38rem 0.7rem;
    border: none;
    background: transparent;
}

div.detail-pane table.loot-detail tbody tr {
    background: rgba(255, 255, 255, 0.03);
}

div.detail-pane table.loot-detail td.week-cell,
div.detail-pane table.loot-detail td.time-cell {
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

div.detail-pane table.loot-detail tbody tr:hover td {
    background-color: rgba(120, 164, 232, 0.07) !important;
}

/* Re-assert the debug backdrop over the transparent-cell rule above, so the dump
   still reads as a block attached to its row. */
div.detail-pane table.loot-detail tr.debug-row td {
    background: rgba(22, 25, 30, 0.6);
    border-right: none;
}

div.detail-pane table.loot-detail tbody td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

div.detail-pane table.loot-detail tbody td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

div.detail-pane td.item-cell {
    width: 100%;
    white-space: normal;
    /* See the note on the same rule in detail.css. */
    font-size: 0.85em;
}

div.detail-pane span.item-multiplier,
div.legend span.item-multiplier {
    display: inline-block;
    padding: 0.18em 0.45em 0.22em 0.45em;
    border-radius: 6px;
    background: #ffd24a;
    color: #2a2005;
    font-size: 0.76em;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 0 6px rgba(255, 210, 74, 0.3);
}

div.detail-pane td.week-cell {
    width: 3rem;
    font-size: 1.2em;
    font-weight: bold;
    color: #dbe7ff;
    text-align: center;
    vertical-align: middle;
}

div.detail-pane td.day-cell,
div.detail-pane td.date-cell,
div.detail-pane td.time-cell {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    font-size: 0.7em;
    color: #98a3b2;
    text-align: center;
    white-space: nowrap;
}

div.detail-pane td.time-cell {
    padding-right: 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* See the notes on the same rules in detail.css. */
div.detail-pane div.item-line {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-width: 0;
}

div.detail-pane div.item-line span.item-track {
    flex: 0 0 1.6rem;
}

div.detail-pane div.item-line span.item-category {
    flex: 0 0 5.4rem;
}

div.detail-pane div.item-line a.item-link {
    /* Shrink-but-never-grow, so the 2x badge stays next to the name it modifies
       instead of being pushed out to the right edge of the row. */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.detail-pane div.item-line span.item-multiplier {
    flex: 0 0 auto;
}

div.detail-pane a.item-link {
    color: #b96be6 !important;
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

div.detail-pane a.item-link[data-wh-icon-added] {
    padding-left: 28px !important;
    background-size: 22px 22px;
    background-position: 0 50%;
    background-repeat: no-repeat;
    line-height: 22px;
    min-height: 22px;
}

div.detail-pane a.item-link:hover {
    text-decoration: underline;
}

div.detail-pane span.item-track,
div.legend span.item-track {
    box-sizing: border-box;
    display: inline-block;
    padding: 0.18em 0 0.22em 0;
    text-align: center;
    border: 1px solid #4d5360;
    border-radius: 999px;
    font-size: 0.78em;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #d5d9e2;
    background: #232832;
    white-space: nowrap;
}

div.detail-pane span.item-track.mythic,
div.legend span.item-track.mythic {
    border-color: #ff8000;
    background: #ff8000;
    color: #1a1208;
    font-weight: bold;
}

div.detail-pane span.item-track.heroic,
div.legend span.item-track.heroic {
    border-color: #3f7fd0;
    background: #3f7fd0;
    color: #f2f7ff;
    font-weight: bold;
}

div.detail-pane span.item-track.empty,
div.legend span.item-track.empty {
    border-color: transparent;
    background: transparent;
}

div.detail-pane span.item-track.normal,
div.legend span.item-track.normal {
    border-color: #4a5361;
    background: transparent;
    color: #8d97a5;
}

div.detail-pane span.item-category {
    box-sizing: border-box;
    display: inline-block;
    padding: 0.2em 0.5em 0.24em 0.5em;
    text-align: left;
    border: 1px solid #4d5360;
    border-radius: 999px;
    font-size: 0.72em;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #d5d9e2;
    background: #232832;
    white-space: nowrap;
    overflow: hidden;
}

/* The glyph lives in CSS rather than the markup, so it stays keyed to the same
   class that carries the colour and neither template has to know about it.
   All are text-presentation symbols, not emoji, so they take the badge colour. */
div.detail-pane span.item-category::before {
    margin-right: 0.4em;
    font-size: 1.05em;
}

div.detail-pane span.item-category.weapon::before { content: "\2020"; }
div.detail-pane span.item-category.jewerly::before { content: "\25C8"; }
div.detail-pane span.item-category.trinket::before { content: "\2726"; }
div.detail-pane span.item-category.tier-token::before { content: "\25CE"; }
div.detail-pane span.item-category.armor::before { content: "\25A2"; }
div.detail-pane span.item-category.decor::before,
div.detail-pane span.item-category.recipe::before,
div.detail-pane span.item-category.bonus-roll::before,
div.detail-pane span.item-category.other::before,
div.detail-pane span.item-category.warbound::before { content: "\25C6"; }

div.detail-pane span.item-category.weapon {
    border-color: #7b6850;
    background: #332c22;
    color: #f0d7ae;
}

div.detail-pane span.item-category.jewerly,
div.detail-pane span.item-category.trinket {
    border-color: #5d5d7f;
    background: #29293c;
    color: #d8d4ff;
}

div.detail-pane span.item-category.tier-token {
    border-color: #516e5a;
    background: #223128;
    color: #c7e7d0;
}

div.detail-pane span.item-category.armor {
    border-color: #526777;
    background: #23303a;
    color: #c8dbea;
}

div.detail-pane span.item-category.decor,
div.detail-pane span.item-category.recipe,
div.detail-pane span.item-category.bonus-roll,
div.detail-pane span.item-category.other,
div.detail-pane span.item-category.warbound {
    border-color: #5d626d;
    background: #272a31;
    color: #c6cad3;
}

div.detail-pane div.empty-state {
    width: fit-content;
    padding: 0.8em 1em;
    border: 1px solid #666;
    border-radius: 8px;
    color: white;
    background: #222;
}

a.member-card.hidden,
div.detail-empty.hidden,
div.detail-pane.hidden {
    display: none;
}

a.former-member {
    color: #c9ced6;
}

a.former-member .former-member-link {
    color: #98a0ab;
}

@media (max-width: 900px) {
    div.overview-layout {
        width: calc(100% - 2rem);
        grid-template-columns: 1fr;
    }

    div.overview-total {
        padding-left: 0.85em;
        padding-right: 0.85em;
    }

    body[data-view="players"] div.detail-shell {
        display: none;
    }

    a.member-card {
        padding: 0.8em 0.85em;
    }

    span.member-name {
        font-size: 0.98em;
    }
}


/* [AbC] The "show loot worth 0" switch, and the rows it dims. Most loot scores 0 under
   the current value table, so those rows stay readable but plainly secondary. */
label.trivial-toggle {
    display: flex;
    align-items: center;
    gap: 0.5em;
    align-self: flex-end;
    margin: 0 0 0.6em 0;
    padding: 0.32em 0.7em 0.32em 0.6em;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #3c3c3c;
    border-radius: 999px;
    color: #c0c0c0;
    font-size: 0.86em;
    cursor: pointer;
    user-select: none;
}

label.trivial-toggle input {
    margin: 0;
    cursor: pointer;
    accent-color: #b96be6;
    /* Bigger than the browser default, which is easy to miss at this font size. */
    width: 1.25em;
    height: 1.25em;
}

label.trivial-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #595959;
    color: #e2e2e2;
}

/* Trivial loot is on the page as a matter of record, not for reading, so it recedes
   well behind the rest: faded, and drained of the colour the item links carry. */
div.detail-pane tr.trivial {
    opacity: 0.38;
    filter: grayscale(0.65);
}

/* The badge is a highlight everywhere else; here it is a plain annotation. */
div.detail-pane tr.trivial span.item-multiplier {
    background: #333333;
    color: #8e8e8e;
    font-weight: normal;
}