/* variables.css komt binnen via de tamrank-variables-late dependency (zie register_common_styles). */

/* ========================================
   ROBOTS.TXT — statusregel
   ======================================== */

/* The healthy state is the state nobody has to act on, so it gets the least ink
   on the screen: one quiet line with a small green dot. No panel, no tinted
   background, no border - a green card shouts about the one situation that
   needs no attention at all. Everything below the line only renders when there
   IS something to act on, and even then it stays a strip, not a box. */

.tr-robots-status {
    margin-bottom: var(--tr-space-4);
}

.tr-robots-status__line {
    display: flex;
    align-items: flex-start;
    gap: var(--tr-space-2);
    margin: 0;
    font-size: var(--tr-text-sm);
    line-height: var(--tr-leading-normal);
    color: var(--tr-color-slate-600);
}

/* The dot is the whole status idiom: colour carries the verdict, size keeps it
   quiet. margin-top optically centres it on the first line of text. */
.tr-robots-status__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 0.4em;
    border-radius: var(--tr-radius-full);
    background: var(--tr-color-slate-400);
}

.tr-robots-status--ok .tr-robots-status__dot {
    background: var(--tr-color-success);
}

.tr-robots-status--attention .tr-robots-status__dot {
    background: var(--tr-color-warning);
}

/* Only the state that asks for something gets weight. */
.tr-robots-status--attention .tr-robots-status__text {
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
}

/* ─── Fact rows (attention only) ──────────────────────────────── */
/* Indented to sit under the line's text, not under its dot. */

.tr-robots-status__facts {
    list-style: none;
    margin: var(--tr-space-3) 0 0;
    padding: 0 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: var(--tr-space-3);
}

.tr-robots-status__fact {
    border-left: 2px solid var(--tr-color-warning);
    padding: 0 0 0 var(--tr-space-3);
}

.tr-robots-status__fact--info {
    border-left-color: var(--tr-color-info-hover);
}

.tr-robots-status__fact-head {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--tr-space-1) var(--tr-space-2);
}

.tr-robots-status__fact-label {
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tr-color-slate-500);
}

.tr-robots-status__fact-value {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
    word-break: break-word;
}

.tr-robots-status__fact-detail {
    margin: var(--tr-space-1) 0 0;
    font-size: var(--tr-text-sm);
    line-height: var(--tr-leading-relaxed);
    color: var(--tr-color-slate-600);
    max-width: 80ch;
}

.tr-robots-status__fact-action {
    margin-top: var(--tr-space-2);
}
