/* archive.css — generator-owned overrides and additions that are not present in
   the original src/ stylesheets. Load order: after all src/ CSS via base.html.
   Add new sections here rather than creating separate per-feature files. */

/* Setting any background on html breaks body-background canvas propagation (CSS
   spec: body's background only propagates to the canvas when html has none).
   Since body has margin: 15px 0, those margin bands would show the html
   background rather than the paisley. Give html the same full background so
   the canvas is consistently covered and the Firefox scrollbar gutter matches. */
html {
    background: url(../img/paisley.jpg) #BCD897;
}

/* Rating bar
   Star images in the rating widget are purely decorative in the static archive
   (no interactivity), but keeping cursor:pointer avoids a jarring style change
   from the original live site. */
.ratingBar img {
    cursor: pointer;
}

/* Badge grid (profile_badges.html)
   The original site listed badges in a single-column friend-list layout.
   The static archive uses a flex grid instead for a more compact display. */
#badgeGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
}

.badgeCell {
    width: 100px;
    text-align: center;
    background: #EDF7D9;
    border: 1px solid #97BD78;
    padding: 6px 4px 8px 4px;
}

.badgeCell img {
    display: block;
    margin: 0 auto 5px auto;
    padding: 2px;
    background: #BCD897;
    border: 1px solid #000;
}

.badgeCellName {
    font: bold 74% verdana, arial, sans-serif;
    margin-bottom: 2px;
    line-height: 1.2;
}

.badgeCellName a {
    color: #000;
    text-decoration: none;
}

.badgeCellName a:hover {
    color: #A71224;
}

.badgeCellCount {
    font: italic 70% verdana, arial, sans-serif;
    color: #666;
}

/* Profile mixtapes section — strip the listList border and the per-item top border
   so the section reads as a clean list rather than a boxed friend-list widget. */
.mixtapesSection .listList {
    border: none;
}
.mixtapesSection #friendsList .listList .friend {
    border-top: none;
}
.mixtapesSection #friendsList .listList .friend #friendInfo {
    padding-top: 2px;
    text-align: left;
}
.mixtapesSection .friend .relationship {
    margin-top: 5px;
}
.mixtapesSection .friendSep {
    border: none;
    border-top: 1px solid #BCD897;
    margin: 15px 5px;
}

/* Lists page — two-column flex layout and table styles */

.listsColumns {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 4px;
}

.listsCol {
    flex: 1;
    min-width: 0;
}

/* Override #listTable centering/width when inside a flex column */
.listsCol #listTable {
    width: 100%;
    margin: 0;
}

/* Full-width variant for mixtapes and tracks */
#listTable.listsWide {
    width: 100%;
    margin: 0;
}

/* Cell padding and alignment for all lists-page tables */
.listsCol #listTable td,
#listTable.listsWide td {
    padding: 2px 4px;
    vertical-align: middle;
}

/* Avatar column: fixed narrow width, image caps at 24px tall */
.listsAvatarCol {
    width: 26px;
}

.listsAvatar {
    display: block;
    max-height: 24px;
    width: auto;
}

/* Cover thumbnail column for mixtapes */
.listsCoverCol {
    width: 36px;
}

.listsCover {
    display: block;
    max-height: 32px;
    width: auto;
}

/* Sub-label (artist / album name beside track or album title) */
.listsSubLabel {
    font-size: 9px;
    color: #555;
}

/* Space h3 section headers away from preceding content */
.bigBoxBorder > h3 {
    margin-top: 14px;
}

/* Shared A–Z section letter headers — mixtapes index + music index.
   Matches the bold track-number treatment from mixtape detail pages.
   Specificity (1,1,1) beats #centerColumn .bigBox h3 (1,1,1) via cascade order. */
#centerColumn h3.archiveLetterHead {
    font: bold 250% verdana, sans-serif;
    margin: 28px 0 10px 0;
    border-bottom: 1px dashed #97BD78;
    line-height: 1.1;
}

/* Profile photos grid — larger two-column tiles using the original thumbnails. */
#rightBox .miniBox #randomPhotos.photoGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    margin: 5px 0 15px;
    padding: 0 6px;
}

#rightBox .miniBox #randomPhotos.photoGrid a {
    display: block;
    overflow: hidden;
}

#rightBox .miniBox #randomPhotos.photoGrid img {
    display: block;
    width: 100%;
    box-sizing: border-box;
    aspect-ratio: 1;
    object-fit: cover;
    padding: 2px;
    border: #97BD78 1px solid;
    background: #EDF7D9;
}