/* "Since your last check" card (check_history_ui.js), on userinfo.php and labelcheck.php.
   Same look as the follower tracker's card (.tracking-card in follow_tabs.css). */

.ch-card {
    margin: 0 0 24px;
    padding: 20px 22px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border-top: 5px solid #0a7afc;
    color: #26303f;
}

.ch-card[hidden] { display: none; }

.ch-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.ch-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eaf1fe;
    font-size: 20px;
}

.ch-head h3 { margin: 2px 0 4px; font-size: 18px; color: #26303f; }
.ch-head p { margin: 0; font-size: 14px; line-height: 1.55; color: #4a5568; }

.ch-rows {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ch-row {
    display: grid;
    grid-template-columns: minmax(110px, 200px) 1fr auto;
    gap: 4px 12px;
    align-items: baseline;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f6f8fc;
    border-left: 4px solid #c9d1dd;
    font-size: 14px;
}

.ch-good { border-left-color: #1f9d61; }
.ch-bad  { border-left-color: #d23b3b; }

.ch-label { font-weight: 700; color: #4a5568; }
.ch-text  { min-width: 0; overflow-wrap: anywhere; }
.ch-by    { color: #7a8496; font-size: 12px; }

.ch-delta {
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef0f3;
    color: #4a5568;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.ch-good .ch-delta { background: #e8f7ef; color: #1f7a4d; }
.ch-bad .ch-delta  { background: #fdeaea; color: #b42318; }

.ch-trend {
    margin-top: 14px;
    color: #2f6fd8;
}

.ch-trend svg { display: block; }

.ch-trend-caption {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #7a8496;
}

.ch-note {
    margin: 12px 0 0;
    font-size: 12px;
    color: #8a94a6;
}

.ch-note a { color: #2f5fd0; }

@media (max-width: 576px) {
    .ch-card { padding: 16px; }
    .ch-icon { flex-basis: 34px; width: 34px; height: 34px; font-size: 17px; }
    .ch-head h3 { font-size: 16px; }
    /* Label above, value and change side by side */
    .ch-row { grid-template-columns: 1fr auto; }
    .ch-label { grid-column: 1 / -1; font-size: 12px; }
}

/* Inside the Label Checker report, cards are spaced by the report's flex gap: the history
   card and the support card moved in there must not add their own margin. */
.lc-report > .ch-card,
.lc-report > .support-bar {
    margin: 0;
}

.ch-row[hidden] { display: none; }

.ch-more {
    margin: 8px 0 0;
    padding: 6px 14px;
    border: 1px solid #d5dce8;
    border-radius: 999px;
    background: #fff;
    color: #2f5fd0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ch-more:hover { background: #f2f6ff; }