/* Page styles — generated by build.rs. Do not edit. */

/* ===== pages/api_access/api_access.css ===== */
.api-key-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.85rem;
}
.api-key-display code {
    color: var(--dark-burgundy);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    overflow-wrap: anywhere;
}
.security-notice {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 6px;
    color: #854d0e;
    padding: 1rem;
}
.security-notice h3 { color: inherit; font-size: 1rem; margin-bottom: 0.25rem; }
.security-notice p { margin: 0; font-size: 0.9rem; }
.api-examples { display: flex; flex-direction: column; gap: 2rem; }
.api-examples h3 { font-size: 1rem; }
.api-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; }


/* ===== pages/auth/auth.css ===== */
.auth { display: flex; justify-content: center; padding: 3rem 1.25rem; }
.auth__card { background: var(--white); border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: var(--shadow); padding: 2rem; width: 100%; max-width: 448px; }
.auth-logo { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.auth-logo__icon { width: 48px; height: 48px; border-radius: 999px; background: var(--orange-red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.auth-logo__text { color: var(--dark-burgundy); font-size: 1.5rem; font-weight: 800; }
.auth-logo__text span { color: var(--orange-red); }
.auth__title { margin-bottom: 0.5rem; text-align: center; }
.auth__sub { margin-bottom: 2rem; text-align: center; }
.auth__alt { text-align: center; font-size: 0.9rem; margin: 0.75rem 0 0; }
.auth__error { background: var(--red-bg); color: var(--red); padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.9rem; }
.auth__hint { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; }
.remember-forgot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0.25rem 0 1.5rem; font-size: 0.9rem; }
.remember-forgot label { display: flex; align-items: center; gap: 0.4rem; color: #374151; }
.divider { height: 1px; background: #e5e7eb; margin: 1.5rem 0; }

@media (max-width: 520px) {
    .auth__card .row { flex-direction: column; gap: 0; }
}


/* ===== pages/dashboard/dashboard.css ===== */
.dashboard-chart { height: 280px; position: relative; padding: 0.5rem 0; }
.dashboard-chart canvas { width: 100% !important; height: 100% !important; }

.empty-inline {
    padding: 2rem;
    text-align: center;
}
.empty-inline__icon {
    color: #6b7280;
    font-size: 1.875rem;
    margin-bottom: 1rem;
}
.dashboard-chart__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--white); gap: 0.25rem; }
.dashboard-chart__empty[hidden] { display: none; }
.dashboard-chart__empty i { font-size: 2rem; color: #9ca3af; margin-bottom: 0.5rem; }
.dashboard-chart__empty p { margin: 0; }


/* ===== pages/emails/emails.css ===== */
.emails-tabs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}
.emails-tabs-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    flex-wrap: wrap;
}
.emails-tabs-actions form { margin: 0; }

.emails-table-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}
.emails-search {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.emails-search .search-field { max-width: 320px; }
.emails-per-page {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #4b5563;
    font-size: 0.9rem;
    white-space: nowrap;
}
.emails-bulk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.detail-stack { display: flex; flex-direction: column; gap: 1rem; }
.detail-item { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding-bottom: 0.75rem; border-bottom: 1px solid #f1f5f9; }
.detail-label { color: #6b7280; font-size: 0.9rem; font-weight: 600; }
.detail-value { color: #111827; font-size: 0.9rem; text-align: right; }
.detail-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1.25rem;
}
.detail-card h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.explanation-box {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    border-radius: 6px;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
    padding: 1rem;
}
.explanation-box--invalid { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.explanation-box i { font-size: 1.25rem; margin-top: 0.15rem; }
.explanation-box h3 { color: inherit; margin-bottom: 0.35rem; }
.explanation-box p { margin: 0; }
.result-warning { background: #fef3c7; color: #92400e; }
.result-unknown { background: #f3f4f6; color: #374151; }

.collapsible {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}
.collapsible-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border: 0;
    background: #fff;
    color: var(--dark-burgundy);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.collapsible.is-open .collapsible-header i { transform: rotate(180deg); }
.collapsible-header i { transition: transform 0.2s; }
.collapsible-content { border-top: 1px solid #e5e7eb; padding: 1.5rem; }
.raw-response {
    background: #111827;
    color: #e5e7eb;
    border-radius: 6px;
    overflow-x: auto;
}
.raw-response .code-block {
    margin: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

@media (min-width: 1080px) {
    .emails-table-header { flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (max-width: 700px) {
    .detail-grid { grid-template-columns: 1fr; }
    .detail-item { flex-direction: column; gap: 0.25rem; }
    .detail-value { text-align: left; }
    .emails-search .search-field { max-width: none; width: 100%; }
}
.explanation-box--valid { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.explanation-box--pending { border-color: #e5e7eb; background: #f9fafb; color: #374151; }
.explanation-box--warning { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.suggestion-note { display: flex; gap: 0.6rem; align-items: center; padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: 6px; background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* Download menu (native <details>: works without JS, closes on outside click via emails.js). */
.menu { position: relative; }
/* The flush card clips its overflow (rounded corners); let an open menu escape it. */
.card--flush:has(.menu[open]) { overflow: visible; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__caret { font-size: 0.7em; margin-left: 0.25rem; transition: transform 0.15s; }
.menu[open] .menu__caret { transform: rotate(180deg); }
.menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 20;
    min-width: 17rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.12);
    padding: 0.35rem;
}
.menu__item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    color: #111827;
    text-decoration: none;
}
.menu__item:hover, .menu__item:focus-visible { background: #faf8f6; color: var(--orange-red); text-decoration: none; outline: none; }
.menu__label { font-weight: 600; font-size: 0.9rem; }
.menu__hint { font-size: 0.78rem; color: #6b7280; }
.menu__sep { height: 1px; background: #e5e7eb; margin: 0.3rem 0.5rem; }


/* ===== pages/errors/errors.css ===== */
.error-page { padding: 5rem 1rem; }
.error-page__inner {
    max-width: 620px;
    text-align: center;
}
.error-page__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--yellow-bg);
    color: #b8860b;
    font-size: 1.6rem;
    margin-bottom: 1rem;
}
.error-page__status {
    color: var(--orange-red);
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}
.error-page h1 {
    font-size: 2rem;
}
.error-page__message {
    color: var(--muted);
    max-width: 460px;
    margin: 0 auto 1.5rem;
}
.error-page__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}


/* ===== pages/home/home.css ===== */
.home-cta { padding: 4rem 0; background: linear-gradient(160deg, var(--dark-burgundy), #6a2a42); color: #fff; }
.home-cta h2 { color: #fff; }
.home-cta .muted { color: #e0cdd4; margin-bottom: 1.5rem; }
/* The dark CTA is full-bleed: let the footer butt up against it (no beige band from its margin). */
body:has(main > .home-cta:last-child) .site-footer { margin-top: 0; }


/* ===== pages/knowledge_base/knowledge_base.css ===== */
.kb { padding: 3rem 0; }
.kb__cards { margin: 2rem 0; }
.kb__cards h3 i { color: var(--orange-red); margin-right: 0.4rem; }
.kb__faq { max-width: 720px; margin: 2rem auto 0; }
.kb__faq .card p { margin: 0.4rem 0 0; }
.kb-card__title { font-size: 1.15rem; }
.kb__tools { text-align: center; margin: 0 0 1.5rem; color: #4b5563; }


/* ===== pages/lists/lists.css ===== */
.icon-btn-danger { background: none; border: none; color: var(--red); cursor: pointer; font-size: 0.9rem; padding: 0; }
.icon-btn-danger:hover { filter: brightness(0.85); }
.icon-link { color: var(--dark-burgundy); }
.icon-link:hover { color: var(--orange-red); }
.form-card { max-width: 620px; }
.detail-list { list-style: none; padding: 0; margin: 0; }
.detail-list li { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.detail-list li:last-child { border-bottom: none; }
.detail-list span:first-child { color: var(--muted); }

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}
.empty-state-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 999px;
    background: #fbe6de;
    color: var(--orange-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
}
.empty-state h2 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.empty-state p { max-width: 42rem; margin-left: auto; margin-right: auto; margin-bottom: 2rem; }

.step-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow);
}
.step-card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 999px;
    background: #fbe6de;
    color: var(--orange-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; padding: 1.5rem; }
.benefit-card { display: flex; gap: 1rem; align-items: flex-start; }
.benefit-icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--orange-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex: 0 0 auto;
}
.benefit-card h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.benefit-card p { margin: 0; font-size: 0.9rem; }

.list-form-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 2rem; }
.form-panel { padding: 1.5rem; }
.info-box {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 6px;
    color: #92400e;
    padding: 1rem;
}
.mini-feature { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1rem; }
.mini-feature__icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #fbe6de;
    color: var(--orange-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex: 0 0 auto;
}
.list-detail-heading { display: flex; align-items: center; gap: 1rem; }
.list-detail-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.metadata-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; }
.metadata-grid dt { color: #6b7280; font-size: 0.9rem; font-weight: 600; }
.metadata-grid dd { margin: 0.25rem 0 0; font-size: 0.9rem; }
.recent-panel { border-top: 1px solid #e5e7eb; padding: 1.5rem; }
.recent-panel h3 { font-size: 0.95rem; margin-bottom: 0.75rem; }
.recent-email-list { display: flex; flex-direction: column; gap: 0.5rem; }
.recent-email { display: inline-flex; align-items: center; gap: 0.5rem; color: #4b5563; font-size: 0.9rem; }
.recent-email i { color: #9ca3af; }

@media (max-width: 900px) {
    .list-form-grid,
    .benefit-grid,
    .metadata-grid { grid-template-columns: 1fr; }
}


/* ===== pages/payments/payments.css ===== */
.billing-balance { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.billing-balance__amount { font-size: 1.8rem; font-weight: 800; color: var(--dark-burgundy); }
.payments-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
.current-balance { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #f9fafb; border-radius: 8px; padding: 1rem; }
.current-balance span { color: #374151; font-weight: 600; }
.current-balance strong { color: #111827; }
.success-card { max-width: 520px; margin: 2rem auto; text-align: center; }
.success-card__icon { font-size: 3rem; color: var(--green); margin-bottom: 1rem; }
@media (max-width: 760px) { .payments-grid { grid-template-columns: 1fr; } }


/* ===== pages/seo.css ===== */
.seo-hero {
    padding: 4rem 0 3rem;
    background: #fff;
    border-bottom: 1px solid var(--border);
}

.seo-hero__inner {
    max-width: 860px;
}

.seo-eyebrow {
    margin: 0 0 0.75rem;
    color: var(--orange-red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
}

.seo-hero h1 {
    font-size: 2.4rem;
    max-width: 760px;
}

.seo-hero__copy {
    max-width: 720px;
    color: #4b5563;
    font-size: 1.05rem;
}

.seo-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.seo-section {
    padding: 3rem 0;
}

.seo-section--tight {
    padding-top: 1rem;
}

.seo-section--alt {
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.seo-doc-grid {
    align-items: start;
}

.seo-faq h2 {
    text-align: center;
    margin-bottom: 1.25rem;
}

.seo-faq .card p {
    margin: 0.4rem 0 0;
}

@media (max-width: 560px) {
    .seo-hero {
        padding: 3rem 0 2rem;
    }

    .seo-hero h1 {
        font-size: 1.85rem;
    }
}

/* Status-code reference: long sentences wrap instead of forcing a horizontal scroll. */
table.data.status-codes { table-layout: fixed; width: 100%; min-width: 760px; }
table.data.status-codes th, table.data.status-codes td { white-space: normal; vertical-align: top; }
table.data.status-codes th:nth-child(1) { width: 13%; }
table.data.status-codes th:nth-child(2) { width: 30%; }
table.data.status-codes th:nth-child(3) { width: 19%; }


/* ===== pages/settings/settings.css ===== */
.setting-section {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}
.setting-section:last-child { border-bottom: 0; }
.setting-section > h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.preference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.preference-row span { display: flex; flex-direction: column; gap: 0.25rem; }
.preference-row small { color: #4b5563; }
.preference-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--orange-red); }
.danger-zone {
    border: 1px solid #fecaca;
    background: #fef2f2;
    border-radius: 6px;
    padding: 1rem;
}
.danger-zone h3 { color: #991b1b; }
.danger-zone p { color: #7f1d1d; }


/* ===== pages/tools/tools.css ===== */
/* Free tool + SEO landing pages (/disposable-email-checker, /email-list-cleaning). */
.checker { margin-top: 1.75rem; max-width: 680px; }
.checker__row { display: flex; gap: 0.6rem; }
.checker__input { flex: 1; min-width: 0; font-size: 1.05rem; padding: 0.8rem 1rem; }
.checker__examples { font-size: 0.85rem; margin: 0.6rem 0 0; }
@media (max-width: 560px) { .checker__row { flex-direction: column; } }

.checker-result { margin-top: 1.5rem; max-width: 680px; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); padding: 1.25rem 1.5rem; background: var(--white); box-shadow: var(--shadow); }
.checker-result--valid { border-left-color: var(--green); }
.checker-result--invalid { border-left-color: var(--red); }
.checker-result--warning { border-left-color: #d97706; }
.checker-result--unknown { border-left-color: #9ca3af; }
.checker-result__head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.checker-result__title { font-size: 1.15rem; margin: 0; overflow-wrap: anywhere; }
.checker-result__summary { margin: 0.75rem 0; }
.checker-result__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.5rem; margin: 0 0 0.75rem; }
.checker-result__facts div { border-top: 1px solid var(--border); padding-top: 0.5rem; }
.checker-result__facts dt { font-size: 0.8rem; color: var(--muted); }
.checker-result__facts dd { margin: 0.15rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.checker-result__note { font-size: 0.85rem; margin: 0; }
@media (max-width: 560px) { .checker-result__facts { grid-template-columns: 1fr; } }

.step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--orange-red); color: #fff; font-size: 0.85rem; margin-right: 0.35rem; }
.verdict-card p { margin: 0.6rem 0 0; color: #4b5563; }
.faq-q { font-size: 1rem; margin: 0 0 0.35rem; }

.hero-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; padding: 0; margin: 1.25rem 0 0; color: #374151; font-size: 0.92rem; }
.hero-facts i { color: var(--green); margin-right: 0.35rem; }
.steps { padding-left: 1.25rem; }
.steps li { margin-bottom: 1rem; line-height: 1.6; }
.checklist { padding-left: 1.2rem; color: #4b5563; }
.checklist li { margin-bottom: 0.4rem; }
table.data.price-table { min-width: 0; } /* must out-specify table.data { min-width: 720px } */
.seo-cta { background: var(--white); border-top: 1px solid var(--border); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container-text { max-width: 800px; margin: 0 auto; } /* comfortable reading width for long-form sections */
.provider-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 1rem 0; }
.provider-chips a { display: inline-block; padding: 0.35rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 0.9rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.provider-chips a:hover { border-color: var(--orange-red); color: var(--orange-red); text-decoration: none; }