/* record_shell.css — shared "record shell" styling for the public lookup pages.
 *
 * Phase 1 of the master-stylesheet refactor (see TECH_DEBT.md). Holds only the
 * rules that are byte-identical between the grade lookup page and the cert
 * verify page: the hologram seal cluster, the info-strip dt/dd, the notes panel
 * base, the thumbnail images, and the Oswald/#1e8d20 typography they carry.
 *
 * Everything is scoped under `.tss-record` so it has the same specificity the
 * pages used inline (0,2,0) and beats `.tss-page-container p { font-size:16px }`
 * from styles.css. Add `class="tss-record"` to the page's content wrapper.
 *
 * Deliberately-divergent rules (info-strip flex vs grid, mobile caps, page
 * centering) stay inline per-page — see Phase 2 in TECH_DEBT.md.
 *
 * NOTE: this is a static .css file, so Django's {% static %} tag does NOT run
 * here. The seal image is referenced with a relative url() that ManifestStatic-
 * FilesStorage rewrites/hashes at collectstatic time.
 */

/* ── Hologram seal ──
 * The seal is a real <img> (.tss-lookup-seal-img), not a CSS background-image,
 * because print reliably drops background images. The inner content (the grade
 * score <h1> on lookup, the .cert-seal-check on verify) is lifted above it. */
.tss-record .tss-lookup-seal {
    position: relative;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4px;
}
.tss-record .tss-lookup-seal-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
}
.tss-record .tss-lookup-seal h1,
.tss-record .tss-lookup-seal .cert-seal-check {
    position: relative;
    z-index: 1;
}
.tss-record .tss-lookup-seal-label {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #1e8d20;
    text-align: center;
    margin: 0;
}
.tss-record .tss-lookup-holo-id {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    text-align: center;
    margin: 4px 0 0;
}

/* ── Info strip: label/value typography (the grid vs flex container stays per-page) ── */
.tss-record .tss-lookup-details dt {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #888;
    margin: 0;
}
.tss-record .tss-lookup-details dd {
    margin: 0;
    font-size: 14px;
    color: #333;
}

/* ── Notes / attestation panel (margin-bottom differs per page, kept inline) ── */
.tss-record .tss-lookup-notes {
    background: #f8f8f8;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 14px;
    color: #444;
    line-height: 1.5;
    white-space: pre-wrap;
}
.tss-record .tss-lookup-notes-label {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin: 0 0 4px;
}

/* ── Thumbnail images (the row's alignment stays per-page) ── */
.tss-record .tss-lookup-thumbs img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s;
}
.tss-record .tss-lookup-thumbs img:hover {
    border-color: #1e8d20;
}

/* ── Back-link under the page title (shared by the lookup + verify record pages).
 * Standalone class (not scoped to .tss-record) because lookup's back-link sits in
 * the outer .tss-page-container, not inside the .tss-record wrapper. ── */
.tss-record-backlink {
    text-align: center;
    margin: -8px auto 20px;
}
.tss-record-backlink a {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    text-decoration: none;
}

/* Green rule under the record-page title (screen only). Base is display:none so
 * it never prints (the print letterhead has its own rule); the visible styling
 * lives in the @media screen block below. Used by an explicit <hr> element
 * rather than a title-scoped selector because the two pages nest their H1
 * differently (verify's is inside .tss-record, lookup's is not). */
.tss-record-rule { display: none; }

/* ── Phase 2: record pages present as a centered "document" on screen.
 * Screen-scoped so neither page's print layout is affected, and the info-strip
 * converges on the centered grid both pages now use. Per-page exceptions (e.g.
 * lookup's grade score bars) are restored locally in each template. ── */
@media screen {
    .tss-record { text-align: center; }
    .tss-record .tss-lookup-details {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 28px;
    }
    .tss-record .tss-detail-item { min-width: 0; overflow-wrap: break-word; }
    .tss-record-rule {
        display: block;
        border: 0;
        border-top: 3px solid #1e8d20;
        width: 100%;
        max-width: 640px;
        margin: 8px auto 28px;
    }
}