/* ==========================================================================
   HX Console — Phase 10 design layer
   Loaded after hx-phase8.css.

   The Report Center landing. Cards that state their own case, grouped by
   module, so choosing a report is reading rather than guessing.
   ========================================================================== */

.rep-landing { display: flex; flex-direction: column; gap: 26px; }
.rep-section .eyebrow { margin-bottom: 10px; }

.rep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.rep-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    padding: 16px 17px 15px;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.rep-card:hover { border-color: var(--brand); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.rep-card:focus-visible {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent);
}

.rep-group {
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--text-3);
}
.rep-name {
    font-size: var(--t-lg); font-weight: 700; color: var(--text);
    line-height: 1.25; letter-spacing: -.01em;
}
.rep-desc { font-size: var(--t-sm); color: var(--text-2); line-height: 1.5; }

/* What the report puts on the page, in its own register — quieter than the
   description, because it is reference rather than persuasion. */
.rep-shows {
    font-size: var(--t-xs);
    color: var(--text-3);
    line-height: 1.5;
    padding-top: 3px;
}
.rep-shows em {
    font-style: normal; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    margin-right: 5px;
}

.rep-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.rep-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-3);
    font-size: var(--t-xs); font-weight: 600; color: var(--text-2);
}
.rep-tag svg { width: 13px; height: 13px; fill: var(--text-3); flex: 0 0 auto; }
.rep-tag.is-quiet { color: var(--text-3); font-weight: 500; }

.rep-go {
    margin-top: 11px;
    font-size: var(--t-sm); font-weight: 700; color: var(--brand);
}
.rep-card:hover .rep-go { text-decoration: underline; }

.rep-back { flex: 0 0 auto; }
.rep-back svg { transform: rotate(90deg); width: 15px; height: 15px; }

@media (max-width: 860px) {
    .rep-grid { grid-template-columns: 1fr; gap: 10px; }
    .rep-card { padding: 14px 15px; }
    .rep-name { font-size: var(--t-base); }
    .rep-back { width: 100%; justify-content: center; }
}