/* ==========================================================================
   US People Search - email.css
   Reverse-email page only: Activity Status panel. Loads after common.css
   and depends on its tokens.

   Contract: .email-value elements are addressed by numeric index in
   email-lookup.js ([0] = Email ID, [1] = Validity); nothing here changes
   their count or order. Note the markup carries id="email" on BOTH the
   panel and its first row, so panel chrome is keyed off .email-status .email
   and only the loading state uses #email.
   ========================================================================== */

/* --- Activity Status panel ------------------------------------------------ */

.email-status .email {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0 var(--s-4);
    font-size: 18px;
    color: var(--navy);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 0;
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
    transition: border-color var(--t-base) ease, opacity var(--t-base) ease;
}

.email-status .email.warn {
    border-left-color: var(--red-mid);
}

.email-status .email.ie {
    opacity: 0.55;
    border-left-color: var(--line-strong);
}

.email-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    height: 44px;
    border-bottom: 1px solid var(--line);
}

.email-row:last-child {
    border-bottom: 0;
}

.email-label {
    flex: 0 0 auto;
    font-family: var(--font-bold);
    font-size: 18px;
    line-height: 24px;
    color: var(--navy);
    white-space: nowrap;
}

.email-value {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    font-family: var(--font-bold);
    font-size: 18px;
    line-height: 24px;
    color: var(--navy);
    text-align: right;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* rows still "Under Development" read as muted, not as data */
#activity .email-value,
#blacklist .email-value {
    font-family: var(--font);
    color: var(--muted);
}

.email-value.safe {
    color: var(--green);
}

.email-value.alert {
    color: var(--red-mid);
}

/* the skeleton bar should not stretch across the row */
#email.loading .email-value:not(.populated) {
    flex: 0 0 80px;
}

/* phone-number chips reuse the shared .value-container chip style; they are
   digits, so no capitalisation and a tabular feel */
.value.phone-number {
    text-transform: none;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 640px) {
    .email-status .email {
        padding: 0 var(--s-3);
        font-size: 17px;
    }

    .email-row {
        height: 42px;
    }

    .email-label,
    .email-value {
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    .email-label,
    .email-value {
        font-size: 16px;
    }
}

/* tuning pass 2026-09-26: bigger, tighter, weight pinned to the declared 600 */
.email-label, .email-value { font-family: var(--font-bold); font-weight: 600; font-size: 19px; line-height: 22px; }
.email-row { min-height: 42px; }

/* 2026-09-26: row density like the old table. */
.email-row { min-height: 0; padding: 4px var(--s-4); }
@media (max-width: 640px) { .email-row { padding: 4px var(--s-3); } }

/* 2026-09-26: match the .tcpa container padding on the email page */
/* container only: the FIRST ROW also carries id="email" (duplicate id in email.hbs), so an
   "#email" selector must never be used for panel padding - it stripped that row's side padding. */
.email.d-col { padding: var(--s-3) 0; }
#email.email-row, .email-row#email { padding: 4px var(--s-4); }
@media (max-width: 640px) { #email.email-row, .email-row#email { padding: 4px var(--s-3); } }

/* 2026-09-27: email.css sets an explicit height:44px on .email-row; release it so rows match the phone panel (31px). */
.email-row { height: auto; }