/* ===== nms_top_rejected_html (HTML form) =====
   Loaded eagerly from anvil.yaml native_deps.head_html, which is also what
   styles the designer canvas.

   Three rules carry what the template may not hold as inline style
   attributes. The root
   rule stays a bare class so it outranks the scoped reset; the private names
   are scoped :where(.nms-rejected-card), which adds zero specificity, so no
   rule changes which one wins. [data-theme="dark"] sits on <html>, an ANCESTOR
   of this root, so it stays outside the :where() or the selector never matches.

   Two rules are deliberately written at (0,2,0) rather than scoped: they
   replace inline display:none, and a single class would tie with theme.css on
   specificity and be decided by head-link order, which is unverified. The
   element already carries both classes, so doubling costs nothing. */

.nms-rejected-card {
    /* Medal palette, screen-local. Text keeps 4.5:1 on its wash over a card and a hovered row. */
    --nms-gold-bg: rgba(234, 179, 8, 0.15);
    --nms-gold-text: #854d0e;
    --nms-silver-bg: rgba(148, 163, 184, 0.15);
    --nms-bronze-bg: rgba(180, 83, 9, 0.12);
    --nms-bronze-text: #92400e;
    background: var(--px-bg-card);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius);
    box-shadow: var(--px-shadow);
    overflow: hidden;
}

/* screen only, so printing while dark keeps the light medals on paper */
@media screen {
    [data-theme="dark"] .nms-rejected-card {
        --nms-gold-bg: rgba(250, 204, 21, 0.18);
        --nms-gold-text: #facc15;
        --nms-silver-bg: rgba(148, 163, 184, 0.18);
        --nms-bronze-bg: rgba(217, 119, 6, 0.16);
        --nms-bronze-text: #fdba74;
    }
}

:where(.nms-rejected-card) .nms-rejected-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--px-border);
    font-family: var(--px-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--px-text-primary);
}

:where(.nms-rejected-card) .nms-rejected-body {
    padding: 0;
}

:where(.nms-rejected-card) .nms-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-family: var(--px-mono);
    font-size: 0.7rem;
    font-weight: 700;
}

:where(.nms-rejected-card) .nms-rank-1 {
    background: var(--nms-gold-bg);
    color: var(--nms-gold-text);
}

:where(.nms-rejected-card) .nms-rank-2 {
    background: var(--nms-silver-bg);
    color: var(--px-text-secondary);
}

:where(.nms-rejected-card) .nms-rank-3 {
    background: var(--nms-bronze-bg);
    color: var(--nms-bronze-text);
}

:where(.nms-rejected-card) .nms-rank-default {
    background: var(--px-bg-elevated);
    color: var(--px-text-secondary);
}

/* ORDER TIE. theme.css declares .px-empty-state { display: flex } at (0,1,0).
   Doubling the class gives (0,2,0), so where theme.css sits relative to this
   head link cannot decide it. */
.px-empty-state.nms-rejected-empty {
    display: none;
}

/* theme.css's .px-table-wrap sets no display, so this would win anyway;
   doubled for one idiom with the rule above and immunity to a later edit. */
.px-table-wrap.nms-rejected-table-wrap {
    display: none;
}

:where(.nms-rejected-card) .nms-rejected-rank-col {
    width: 60px;
}