/* ==========================================================================
   MAILOZA — COMPONENT LIBRARY STYLESHEET
   Phase: W1.4 — Reusable Component Library Foundation

   Consumes the design tokens defined in style.css (the SINGLE SOURCE OF TRUTH).
   This file NEVER redefines colours — it only references var(--…) custom
   properties. No raw hex / no magic numbers; spacing, radii, type, motion and
   colour all come from tokens so a future theme (e.g. dark mode) swaps
   underneath without touching a single component.

   Loaded AFTER style.css in app/includes/head.php (with ?v= cache-bust).
   Page-specific styling is intentionally OUT of scope here.

   Table of contents
     0.  Shared primitives (.eyebrow, .badge, .card, grids)
     1.  Hero               (hero/hero-basic)
     2.  Section header     (section-header/section-header)
     3.  CTA banner         (cta/cta-banner)
     4.  Cards              (cards/service-card, cards/feature-card)
     5.  FAQ                (faq/faq-list)
     6.  Stats              (stats/stat-grid)
     7.  Process            (process/process-steps)
     8.  Platform grid      (platform/platform-grid)
     9.  Pricing            (pricing/pricing-card)
     10. Testimonials       (testimonials/testimonial-card)
     11. Alerts             (alerts/alert-banner)
     12. Breadcrumbs        (breadcrumbs/breadcrumbs)
     13. EmailOps preview   (dashboard/emailops-preview)  ← shared, multi-page
   ========================================================================== */


/* ==========================================================================
   0. SHARED PRIMITIVES
   ========================================================================== */

/* Eyebrow / overline (docs/06 §6.6) — small, tracked, uppercase, teal. */
.eyebrow {
    display: inline-block;
    margin: 0 0 var(--space-2);
    font-size: var(--text-overline);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--teal-700);
}

/* Badge / chip (docs/06 §9.C.2) — neutral tint by default. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: var(--bg-surface-subtle);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1.4;
}

/* Card surface primitive (docs/06 §9.C.10) — every card variant extends this. */
.card {
    position: relative;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

/* Generic responsive card grid (docs/06 §8.2): single column on mobile,
   2-up at tablet, then 3-up / 4-up at desktop. The base .card-grid (no
   modifier) follows the 3-up cascade. */
.card-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
}

/* Tablet (>= 768px / --bp-md): multi-up grids open to two columns. */
@media (min-width: 768px) {
    .card-grid,
    .card-grid--2,
    .card-grid--3,
    .card-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop (>= 1024px / --bp-lg): 3-up and 4-up reach full width.
   .card-grid--2 intentionally stays two columns. */
@media (min-width: 1024px) {
    .card-grid,
    .card-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .card-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Shared inline-icon sizing (currentColor, set by the surrounding context). */
.mailoza-icon {
    width: var(--icon-lg, 24px);
    height: var(--icon-lg, 24px);
    flex-shrink: 0;
}


/* ==========================================================================
   1. HERO  (hero/hero-basic)
   ========================================================================== */
.hero {
    /* Top padding deliberately small so the hero sits close under the (now
       slimmer, body-aligned) header — the eyebrow lands ~48px below it rather
       than floating ~250px down. Bottom keeps a generous, intentional rhythm. */
    padding-block: var(--space-8) var(--space-10);
}

.hero__inner {
    max-width: var(--container-narrow);
}

.hero--center .hero__inner {
    margin-inline: auto;
    text-align: center;
}

.hero__eyebrow {
    margin-bottom: var(--space-3);
}

.hero__title {
    font-size: var(--fluid-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--text-primary);
}

.hero__lead {
    margin-top: var(--space-5);
    max-width: var(--measure);
    font-size: var(--fluid-lead);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
}

.hero--center .hero__lead {
    margin-inline: auto;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-7);
}

.hero--center .hero__actions {
    justify-content: center;
}

@media (min-width: 768px) {
    /* Keep the comfortable top gap (~64px) on larger screens; only the bottom
       grows for section rhythm. Was a symmetric --space-11 (120px top+bottom),
       which pushed the eyebrow far below the header. */
    .hero { padding-block: var(--space-9) var(--space-11); }
}


/* ==========================================================================
   2. SECTION HEADER  (section-header/section-header)
   ========================================================================== */
.section-header {
    max-width: var(--container-narrow);
    margin-bottom: var(--space-8);
}

.section-header--center {
    margin-inline: auto;
    text-align: center;
}

.section-header__title {
    color: var(--text-primary);
}

.section-header__intro {
    margin-top: var(--space-4);
    max-width: var(--measure);
    font-size: var(--fluid-lead);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
}

.section-header--center .section-header__intro {
    margin-inline: auto;
}


/* ==========================================================================
   3. CTA BANNER  (cta/cta-banner)
   ========================================================================== */
.cta-banner {
    padding-block: var(--space-10);
}

.cta-banner__inner {
    max-width: var(--container-narrow);
    margin-inline: auto;
    text-align: center;
    padding: var(--space-9) var(--space-6);
    border-radius: var(--radius-xl);
}

/* default — calm blue wash */
.cta-banner--default .cta-banner__inner {
    background-color: var(--blue-50);
    border: 1px solid var(--blue-100);
}

/* dark — inverse navy band */
.cta-banner--dark .cta-banner__inner {
    background-color: var(--bg-inverse);
    border: 1px solid transparent;
}
.cta-banner--dark .cta-banner__title { color: var(--text-on-inverse); }
.cta-banner--dark .cta-banner__text  { color: var(--neutral-300); }
/* Secondary button stays legible on the dark band. */
.cta-banner--dark .cta-banner__secondary {
    color: var(--text-on-inverse);
    border-color: var(--neutral-400);
}
.cta-banner--dark .cta-banner__secondary:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* emergency — restrained critical accent (calm, not alarmist — §5.8) */
.cta-banner--emergency .cta-banner__inner {
    background-color: var(--emergency-wash);
    border: 1.5px solid var(--emergency-border);
}
.cta-banner--emergency .cta-banner__title { color: var(--emergency-text); }

.cta-banner__title {
    color: var(--text-primary);
}

.cta-banner__text {
    margin-top: var(--space-4);
    margin-inline: auto;
    max-width: var(--measure);
    color: var(--text-body);
    font-size: var(--text-lg);
}

.cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-7);
}

@media (min-width: 768px) {
    .cta-banner__inner { padding: var(--space-10) var(--space-9); }
}


/* ==========================================================================
   4. CARDS  (cards/service-card, cards/feature-card)
   ========================================================================== */

/* --- Service card (routing, optionally whole-card clickable) --------------- */
.service-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard);
}

.service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-9);
    height: var(--space-9);
    margin-bottom: var(--space-2);
    border-radius: var(--radius-md);
    background-color: var(--teal-50);
    color: var(--teal-700);
}

.service-card__badge {
    align-self: flex-start;
}

.service-card__title {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.service-card__desc {
    color: var(--text-body);
    font-size: var(--text-base);
}

.service-card__arrow {
    margin-top: auto;
    color: var(--teal-700);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard);
}
.service-card__arrow .mailoza-icon { width: 20px; height: 20px; }

/* Whole-card link: the title link's ::after stretches over the card so the
   entire surface is clickable while remaining ONE tab stop and accessible. */
.service-card__link {
    color: inherit;
}
.service-card--linked .service-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.service-card--linked:hover {
    border-color: var(--teal-600);
    box-shadow: var(--elevation-2);
    transform: translateY(-2px);
}
.service-card--linked:hover .service-card__title { color: var(--teal-700); }
.service-card--linked:hover .service-card__arrow {
    opacity: 1;
    transform: translateX(0);
}
/* Move the focus ring to the whole card when the stretched link is focused. */
.service-card--linked:focus-within {
    border-color: var(--teal-600);
    box-shadow: var(--elevation-2);
}
.service-card__link:focus-visible {
    outline: none;
}
.service-card--linked:focus-within {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* --- Feature card (static) ------------------------------------------------- */
.feature-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    margin-bottom: var(--space-2);
    color: var(--blue-600);
}
.feature-card__icon .mailoza-icon { width: 28px; height: 28px; }

.feature-card__title {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.feature-card__desc {
    color: var(--text-body);
}


/* ==========================================================================
   5. FAQ  (faq/faq-list) — native <details>/<summary>, zero JS
   ========================================================================== */
.faq__title {
    margin-bottom: var(--space-6);
    color: var(--text-primary);
}

.faq__list {
    max-width: var(--container-narrow);
    margin-inline: auto;
    border-top: 1px solid var(--border-default);
}

.faq__item {
    border-bottom: 1px solid var(--border-default);
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-5);
    cursor: pointer;
    list-style: none;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}
/* Remove the default disclosure triangle across engines. */
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ""; }

.faq__question:hover { color: var(--blue-800); }

.faq__chevron {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: transform var(--duration-base) var(--ease-standard);
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); }

.faq__answer {
    padding-bottom: var(--space-5);
    color: var(--text-body);
}
.faq__answer p { max-width: var(--measure); }

/* Keyboard focus lands on the summary — show the ring on it. */
.faq__question:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}


/* ==========================================================================
   6. STATS  (stats/stat-grid)
   ========================================================================== */
.stat-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
}

.stat {
    text-align: left;
}

.stat__value {
    font-size: var(--text-h1);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.stat__label {
    margin-top: var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--text-body);
}

.stat__desc {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

@media (min-width: 480px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   7. PROCESS  (process/process-steps)
   ========================================================================== */
.process {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    counter-reset: none;
    padding: 0;
    list-style: none;
}

.process__step {
    position: relative;
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.process__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-pill);
    background-color: var(--blue-800);
    color: var(--text-on-inverse);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}

.process__step-title {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.process__step-desc {
    margin-top: var(--space-1);
    color: var(--text-body);
}

/* Timeline variant: vertical with a connector line down the number rail. */
.process--timeline .process__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--space-8) / 2);
    top: var(--space-8);
    bottom: calc(-1 * var(--gap-grid));
    width: 2px;
    transform: translateX(-1px);
    background-color: var(--border-default);
}

/* Numbered variant: horizontal cards on wider screens. */
@media (min-width: 768px) {
    .process--numbered { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .process--numbered {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
    .process--numbered .process__step {
        flex-direction: column;
    }
    /* Decorative connector between numbered steps (desktop). */
    .process--numbered .process__step:not(:last-child)::after {
        content: "";
        position: absolute;
        left: var(--space-8);
        right: calc(-1 * var(--gap-grid));
        top: calc(var(--space-8) / 2);
        height: 2px;
        transform: translateY(-1px);
        background-color: var(--border-default);
    }
}


/* ==========================================================================
   8. PLATFORM GRID  (platform/platform-grid)
   --------------------------------------------------------------------------
   A neat, uniform logo wall: each tile is ONE bordered card with the logo
   (or monogram) centred on top and the platform name centred directly below.
   Tiles are equal-height; the grid auto-fills even columns and stays tidy from
   mobile to desktop. Long names ("Linux Mail Servers") wrap cleanly, centred.
   ========================================================================== */
.platform-grid {
    display: grid;
    gap: var(--gap-grid-tight);
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Each <li> is a grid cell; make the card inside fill it for equal heights. */
.platform-tile {
    display: flex;
}

/* The card surface — applies whether the tile is a link or static span.
   .platform-tile__card is the static wrapper; .platform-tile__link is the
   anchor variant. Both share this look. */
.platform-tile > .platform-tile__link,
.platform-tile > .platform-tile__media {
    /* legacy hooks intentionally left empty; styling lives on the unified
       card selector below */
}

.platform-tile__link,
.platform-tile__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    min-height: calc(var(--space-9) + var(--space-7));
    padding: var(--space-5) var(--space-4);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    text-align: center;
    text-decoration: none;
    transition: transform var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}

/* Logo / monogram holder — uniform centred box on top of the card. */
.platform-tile__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
}

.platform-tile__logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Calm by default: a touch desaturated so the wall of marks reads as one
       quiet strip; full brand colour on hover/focus of a linked tile. */
    filter: grayscale(0.32);
    opacity: 0.92;
    transition: filter var(--duration-base) var(--ease-standard),
                opacity var(--duration-base) var(--ease-standard);
}

.platform-tile__link:hover .platform-tile__logo,
.platform-tile__link:focus-visible .platform-tile__logo {
    filter: grayscale(0);
    opacity: 1;
}

/* Monogram fallback (no logo file) — a tidy teal-tinted square. */
.platform-tile__placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    background-color: var(--blue-50);
    color: var(--blue-700);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    line-height: 1;
}

.platform-tile__name {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    color: var(--text-body);
    text-wrap: balance;
}

/* Linked tiles get a subtle interactive lift. */
.platform-tile__link:hover {
    transform: translateY(-2px);
    border-color: var(--blue-600);
    box-shadow: var(--elevation-card, 0 8px 24px rgba(15, 42, 82, 0.07));
}
.platform-tile__link:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}


/* ==========================================================================
   9. PRICING  (pricing/pricing-card) — value-framed, never a commodity grid
   ========================================================================== */
.pricing-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    align-items: start;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-7);
}

.pricing-card__flag {
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: var(--teal-100);
    color: var(--teal-700);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.pricing-card__name {
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.pricing-card__anchor {
    margin-top: var(--space-2);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    color: var(--teal-700);
    font-variant-numeric: tabular-nums;
}

.pricing-card__desc {
    margin-top: var(--space-2);
    color: var(--text-body);
}

.pricing-card__features {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
}

.pricing-card__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--text-body);
}

.pricing-card__check {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--success-600);
    margin-top: 2px;
}

.pricing-card__cta {
    margin-top: auto;
    padding-top: var(--space-2);
}
.pricing-card__cta .btn { width: 100%; }

/* Featured tier — accent border + subtle lift; emphasis is NOT colour-only
   (the visible "Most popular" flag carries it too). */
.pricing-card--featured {
    border-color: var(--teal-600);
    border-width: 2px;
    box-shadow: var(--elevation-2);
}

@media (min-width: 768px) {
    .pricing-grid { grid-template-columns: repeat(3, 1fr); }
    /* Lift the featured tier slightly above its neighbours on desktop. */
    .pricing-card--featured { transform: translateY(calc(-1 * var(--space-3))); }
}


/* ==========================================================================
   10. TESTIMONIALS  (testimonials/testimonial-card)
   ========================================================================== */
.testimonial {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-7);
    margin: 0;
}

.testimonial__quote {
    margin: 0;
}
.testimonial__quote p {
    max-width: none;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
}
/* Tasteful quotation mark without relying on it for meaning. */
.testimonial__quote::before {
    content: "\201C";
    display: block;
    font-size: var(--text-display);
    line-height: 0.6;
    color: var(--teal-400);
}

.testimonial__caption {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.testimonial__avatar {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-pill);
    object-fit: cover;
}

.testimonial__avatar--monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--blue-100);
    color: var(--blue-800);
    font-weight: var(--weight-bold);
}

.testimonial__attribution {
    display: flex;
    flex-direction: column;
}

.testimonial__author {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.testimonial__meta {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}


/* ==========================================================================
   11. ALERTS  (alerts/alert-banner) — status never colour-only
   ========================================================================== */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    border-left-width: 3px;
}

.alert + .alert { margin-top: var(--space-4); }

.alert__icon {
    flex-shrink: 0;
    display: inline-flex;
    margin-top: 1px;
}

.alert__body {
    flex: 1 1 auto;
    min-width: 0;
}

.alert__title {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.alert__message {
    max-width: var(--measure);
    color: var(--text-body);
}
.alert__title + .alert__message { margin-top: var(--space-1); }

.alert__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    margin: calc(-1 * var(--space-2));
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard);
}
.alert__close:hover {
    color: var(--text-primary);
    background-color: var(--bg-surface-subtle);
}

/* Type tints + status text + accent border (all from status tokens). */
.alert--info {
    background-color: var(--info-50);
    border-color: var(--info-600);
}
.alert--info .alert__icon { color: var(--info-700); }

.alert--success {
    background-color: var(--success-50);
    border-color: var(--success-600);
}
.alert--success .alert__icon { color: var(--success-700); }

.alert--warning {
    background-color: var(--warning-50);
    border-color: var(--warning-600);
}
.alert--warning .alert__icon { color: var(--warning-700); }

.alert--critical {
    background-color: var(--critical-50);
    border-color: var(--critical-600);
}
.alert--critical .alert__icon { color: var(--critical-700); }


/* ==========================================================================
   12. BREADCRUMBS  (breadcrumbs/breadcrumbs)
   ========================================================================== */
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: var(--text-sm);
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-secondary);
}

.breadcrumbs__link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}
.breadcrumbs__link:hover {
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.breadcrumbs__sep {
    display: inline-flex;
    color: var(--neutral-400);
}

.breadcrumbs__current {
    color: var(--text-primary);
    font-weight: var(--weight-medium);
}


/* ==========================================================================
   13. EMAILOPS PREVIEW  (dashboard/emailops-preview) — STATIC, illustrative

   The signature "Email Operations Center" dashboard preview. Shared by the
   homepage AND the Monitoring Platform page, so it lives here (component layer)
   rather than in any one page's stylesheet — both pages render it identically
   without depending on home.css. It consumes only design tokens; status is
   never colour-only (icon shape + text label + accent always travel together).
   ========================================================================== */
.emailops {
    padding-block: var(--space-9);
    background-color: var(--bg-inverse);
    color: var(--text-on-inverse);
}
@media (min-width: 768px) {
    .emailops { padding-block: var(--space-10); }
}

.emailops__head {
    max-width: var(--container-narrow);
    margin: 0 auto var(--space-8);
    text-align: center;
}
.emailops__head .eyebrow { color: var(--teal-400); }

.emailops__title {
    color: var(--white);
    font-size: var(--fluid-h2);
}

.emailops__intro {
    margin-top: var(--space-4);
    margin-inline: auto;
    max-width: var(--measure);
    font-size: var(--fluid-lead);
    line-height: var(--leading-relaxed);
    color: var(--neutral-300);
}

/* The dashboard frame ----------------------------------------------------- */
/* Panel surface: a slightly lifted shade above the inverse band. Built from
   the blue scale so it stays on-brand (no new colour token needed). */
.emailops__panel {
    position: relative;
    max-width: var(--container-wide);
    margin-inline: auto;
    background-color: var(--blue-900);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-3);
    overflow: hidden;
}

/* Honesty tag — always visible, top-right, amber so it reads "note/attention". */
.emailops__tag {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: var(--warning-100);
    color: var(--warning-700);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
}
.emailops__tag-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background-color: var(--warning-600);
    flex-shrink: 0;
}

/* Faux window chrome (decorative). */
.emailops__chrome {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.emailops__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    background-color: rgba(255, 255, 255, 0.25);
}
.emailops__chrome-title {
    margin-left: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.7);
}

.emailops__grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    padding: var(--space-6);
}

/* Health Score block ------------------------------------------------------ */
.emailops__score {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6);
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
}

.emailops__ring {
    position: relative;
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.emailops__ring-track {
    stroke: rgba(255, 255, 255, 0.12);
}
/* Default ring colour = healthy; band classes override below. */
.emailops__ring-value {
    stroke: var(--success-600);
}
.emailops__score--needs-attention .emailops__ring-value { stroke: var(--warning-600); }
.emailops__score--at-risk .emailops__ring-value { stroke: var(--critical-600); }

.emailops__ring-num {
    position: absolute;
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    color: var(--white);
    font-variant-numeric: tabular-nums;
}

.emailops__score-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.emailops__score-band {
    margin-top: var(--space-1);
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    color: var(--white);
}
.emailops__score-note {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
}

/* Status widgets ---------------------------------------------------------- */
.emailops__widgets {
    display: grid;
    gap: var(--gap-grid-tight);
    grid-template-columns: 1fr;
    padding: 0;
    margin: 0;
    list-style: none;
}

.emailops__widget {
    padding: var(--space-5);
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left-width: 3px;
    border-radius: var(--radius-md);
}
/* Status accent on the left edge — paired with chip icon + label (not colour-only). */
.emailops__widget--healthy   { border-left-color: var(--success-600); }
.emailops__widget--attention { border-left-color: var(--warning-600); }
.emailops__widget--critical  { border-left-color: var(--critical-600); }

.emailops__widget-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.emailops__widget-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.78);
}

.emailops__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}
.emailops__chip-icon { display: inline-flex; }
.emailops__chip-icon .mailoza-icon { width: var(--icon-sm); height: var(--icon-sm); }

/* Chip colour pairs (tint + text) come from status tokens — AA on the tint. */
.emailops__chip--healthy {
    background-color: var(--success-100);
    color: var(--success-700);
}
.emailops__chip--attention {
    background-color: var(--warning-100);
    color: var(--warning-700);
}
.emailops__chip--critical {
    background-color: var(--critical-100);
    color: var(--critical-700);
}

.emailops__widget-value {
    margin-top: var(--space-3);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    color: var(--white);
    font-variant-numeric: tabular-nums;
}
.emailops__widget-detail {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.55);
}

/* AI recommendations ------------------------------------------------------ */
.emailops__reco {
    padding: var(--space-5);
    background-color: rgba(43, 196, 180, 0.08); /* teal-400 wash, decorative */
    border: 1px solid rgba(43, 196, 180, 0.25);
    border-radius: var(--radius-md);
}
.emailops__reco-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--teal-400);
}
.emailops__reco-icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }

.emailops__reco-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: 0;
    list-style: none;
}
.emailops__reco-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, 0.85);
}
.emailops__reco-bullet {
    flex-shrink: 0;
    color: var(--teal-400);
    margin-top: 1px;
}
.emailops__reco-bullet .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }

/* Honest disclaimer under the panel. */
.emailops__disclaimer {
    max-width: var(--measure);
    margin: var(--space-6) auto 0;
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.6);
}

/* Small phones: stack the score ring above its meta so nothing feels cramped. */
@media (max-width: 479.98px) {
    .emailops__score {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
    }
}

/* Desktop layout: score spans full width, widgets 3-up, reco full width. */
@media (min-width: 768px) {
    .emailops__widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .emailops__grid { padding: var(--space-8); }
    .emailops__widgets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}