div.content-shell {
    width: 92%;
    margin-left: 4%;
    margin-top: 1.5em;
}

body.embedded-detail {
    margin: 0;
    background: transparent;
}

body.embedded-detail div.content-shell {
    width: 100%;
    margin: 0;
}

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

body.embedded-detail div.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

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));
}

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

/* Same per-metric colours as the overview list badges. */
span.summary-stat-priority span.summary-value { color: #ffe06e; }
span.summary-stat-value span.summary-value { color: #b96be6; }
span.summary-stat-raids span.summary-value { color: #c3cad4; }

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


a.back-link {
    color: #8ebeff;
    text-decoration: none;
}

a.back-link:hover {
    text-decoration: underline;
}

span.title-divider {
    margin: 0 0.4em;
    color: gray;
}

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

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

table.loot-detail th,
table.loot-detail td {
    text-align: left;
    vertical-align: middle;
    padding: 0.38rem 0.7rem;
    /* global.css puts a grid of 1px #666 borders on every td. Each row here is
       already a rounded band, so the grid is redundant chrome; what little
       structure is worth keeping is drawn by the two rules further down. */
    border: none;
    background: transparent;
}

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

/* Two hairlines instead of a grid: one closing the week gutter, one separating
   the when-columns from the item itself. */
table.loot-detail td.week-cell,
table.loot-detail td.time-cell {
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

/* global.css paints its hover on the cells with !important. */
table.loot-detail tbody tr:hover td {
    background-color: rgba(120, 164, 232, 0.07) !important;
}

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

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

table.loot-detail th.week-column,
table.loot-detail td.week-cell {
    text-align: center;
    vertical-align: middle;
}

/* The when-columns are context, not content: small and quiet, so the item name
   gets the width. global.css sets td to an absolute 20px, hence the em values. */
table.loot-detail td.day-cell,
table.loot-detail td.date-cell,
table.loot-detail td.time-cell {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    font-size: 0.7em;
    color: #98a3b2;
    text-align: center;
    white-space: nowrap;
}

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

td.week-cell {
    width: 3rem;
    font-size: 1.2em;
    font-weight: bold;
    color: #dbe7ff;
}

td.event-id {
    font-family: "Lucida Console", monospace;
    font-size: 0.85em;
    color: #c6d9ff;
    white-space: nowrap;
}

/* The row reads as fixed slots then content: difficulty, category, then the
   icon-and-name taking whatever is left. Truncating the name rather than
   wrapping it keeps every row exactly one line tall. */
div.item-line {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-width: 0;
}

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

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

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.item-line span.item-multiplier {
    flex: 0 0 auto;
}

/* Wowhead's tooltips.js iconizes these links and recolors them by item quality,
   both with !important rules, so overriding it needs !important too. The icon
   arrives as a background-image on the anchor; items.js swaps in the larger
   source image, and the rules below scale it up from Wowhead's 15px. */
a.item-link {
    color: #b96be6 !important;
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

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;
}

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

table.loot-detail td.item-cell {
    width: 100%;
    white-space: normal;
    /* global.css sets td to an absolute 20px, which is oversized for a data row
       and was pushing the longest item names onto a second line. The Wowhead
       icon is sized in px, so it keeps its size. */
    font-size: 0.85em;
}

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);
}

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;
}

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

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

span.item-track.empty {
    border-color: transparent;
    background: transparent;
}

span.item-track.normal {
    border-color: #4a5361;
    background: transparent;
    color: #8d97a5;
}

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. */
span.item-category::before {
    margin-right: 0.4em;
    font-size: 1.05em;
}

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

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

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

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

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

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

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


/* [AbC] Loot the value table scores at 0. The member page has no "show loot worth 0"
   switch, so it renders as the overview's default: listed, dimmed, value shown. */
tr.trivial {
    opacity: 0.38;
    filter: grayscale(0.65);
}

tr.trivial span.item-multiplier {
    background: #333333;
    color: #8e8e8e;
    font-weight: normal;
}