/* ============================================================
   DNS Lookup Tool — Styles
   Fonts: Space Grotesk (UI), JetBrains Mono (record values)
   ============================================================ */

/* --- Custom Properties ------------------------------------ */
:root {
    --bg:           #0d1117;
    --surface:      #161d27;
    --surface-2:    #1e2836;
    --border:       #2a3444;
    --border-hover: #3a4a5e;

    --accent:       #00C9A5;
    --accent-dim:   rgba(0, 201, 165, 0.12);
    --accent-border:rgba(0, 201, 165, 0.3);

    --text:         #e6edf3;
    --text-muted:   #8b949e;
    --text-mono:    #c9d1d9;

    --green:        #22c55e;
    --amber:        #f59e0b;
    --red:          #ef4444;

    --radius:       10px;
    --radius-sm:    6px;
    --font-ui:      'Space Grotesk', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
}

/* --- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Base ------------------------------------------------- */
html { font-size: 16px; }

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* --- Layout ----------------------------------------------- */
.page-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 24px;
}

.main {
    flex: 1;
    padding-bottom: 64px;
}

/* --- Header ----------------------------------------------- */
.site-header {
    padding: 28px 0 48px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}

.logo-mark {
    flex-shrink: 0;
}

.logo-wordmark {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.logo-wordmark em {
    font-style: normal;
    color: var(--accent);
}

/* --- Hero ------------------------------------------------- */
.hero {
    margin-bottom: 36px;
}

.hero-title {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: 1.05rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* --- Lookup Form ------------------------------------------ */
.lookup-form {
    margin-bottom: 48px;
}

.field-group {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.domain-input {
    flex: 1;
    height: 52px;
    padding: 0 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.domain-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.domain-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.lookup-btn {
    height: 52px;
    padding: 0 28px;
    background: var(--accent);
    color: #0d1117;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s, opacity 0.15s;
    min-width: 110px;
}

.lookup-btn:hover {
    background: #00ddb5;
}

.lookup-btn:active {
    background: #00b594;
}

.lookup-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Button loading state */
.btn-spinner {
    display: none;
    width: 17px;
    height: 17px;
    border: 2px solid rgba(13, 17, 23, 0.3);
    border-top-color: #0d1117;
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
}

.lookup-btn.is-loading .btn-label  { display: none; }
.lookup-btn.is-loading .btn-spinner { display: block; }

/* Error message below input */
.field-error {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--red);
    min-height: 20px;
}

/* --- Results ---------------------------------------------- */
.results-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.results-domain-name {
    color: var(--text);
    font-weight: 500;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

/* --- Cards ------------------------------------------------ */
.cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    animation: fadeSlideIn 0.3s ease both;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 26px;
    padding: 0 8px;
    background: var(--accent-dim);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.card-title-group {
    flex: 1;
}

.card-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

.card-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.card-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 10px;
    flex-shrink: 0;
}

.card-count.has-records {
    color: var(--accent);
    border-color: var(--accent-border);
    background: var(--accent-dim);
}

.card-body {
    padding: 6px 0;
}

/* --- Record Rows ------------------------------------------ */
.record-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 20px;
    border-bottom: 1px solid transparent;
    transition: background 0.1s;
}

.record-row:last-child {
    border-bottom: none;
}

.record-row:hover {
    background: var(--surface-2);
}

.record-value {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-mono);
    word-break: break-all;
}

.record-ttl {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
    flex-shrink: 0;
}

/* MX-specific: priority badge + provider label */
.mx-priority {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent);
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.provider-label {
    font-size: 0.72rem;
    font-family: var(--font-ui);
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* SOA: key-value table layout */
.soa-table {
    padding: 12px 20px;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px 16px;
    align-items: baseline;
}

.soa-key {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.soa-val {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-mono);
    word-break: break-all;
}

/* --- Empty State ------------------------------------------ */
.empty-state,
.error-state {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.error-state {
    color: var(--red);
}

/* --- Loading Skeleton ------------------------------------- */
.skeleton-body {
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-line {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--surface-2) 25%,
        rgba(255, 255, 255, 0.05) 50%,
        var(--surface-2) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}

.skeleton-line:nth-child(2) { width: 70%; }
.skeleton-line:nth-child(3) { width: 50%; }

/* --- Footer ----------------------------------------------- */
.site-footer {
    padding: 24px 0;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* --- Animations ------------------------------------------- */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Section Label ---------------------------------------- */
/* Divides the DNS record cards from the email health check cards */
.section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 4px 0 2px;
    animation: fadeSlideIn 0.3s ease both;
}

.section-label::before,
.section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* --- Health Badges ---------------------------------------- */
/* Coloured pill shown in the card header for DMARC / SPF status */
.health-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: var(--font-mono);
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.health-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.health-badge.pass {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--green);
}
.health-badge.pass .health-dot { background: var(--green); }

.health-badge.warn {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--amber);
}
.health-badge.warn .health-dot { background: var(--amber); }

.health-badge.fail {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--red);
}
.health-badge.fail .health-dot { background: var(--red); }

/* --- Issue List ------------------------------------------- */
/* Displays SPF warnings / errors inside the SPF card */
.issue-list {
    list-style: none;
    padding: 10px 20px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.issue-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.84rem;
    line-height: 1.45;
}

.issue-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.issue-item.warn { color: var(--amber); }
.issue-item.warn .issue-icon {
    background: rgba(245, 158, 11, 0.15);
    color: var(--amber);
}
.issue-item.warn .issue-icon::before { content: '!'; }

.issue-item.fail { color: var(--red); }
.issue-item.fail .issue-icon {
    background: rgba(239, 68, 68, 0.15);
    color: var(--red);
}
.issue-item.fail .issue-icon::before { content: '!'; }

/* --- DKIM Selector Grid ----------------------------------- */
.selector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px 16px;
}

.selector-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    border: 1px solid transparent;
}

.chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.selector-chip.found {
    background: var(--accent-dim);
    border-color: var(--accent-border);
    color: var(--accent);
}
.selector-chip.found .chip-dot { background: var(--accent); }

.selector-chip.not-found {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-muted);
}
.selector-chip.not-found .chip-dot { background: var(--border-hover); }

/* Inline monospace span used in "not found" empty-state messages */
.mono-inline {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--text-mono);
}