/* /Components/Email/EmailRouteView.razor.rz.scp.css */
/* Kept scoped per the keep-rubric:
   - #3 `.route-rail__gutter::before` connector with :first-child/:last-child
        trimming — a pseudo-element line whose top/bottom depends on structural
        position; Tailwind before: variants cannot express the first/last trim.
   - #3 ancestor-state descendant combinators: `.route-transit--X .route-rail__plug`,
        `… .route-rail__box--link`, `… .route-rail__link-label` recolour children off
        the transport-state modifier on the <li>. Tailwind cannot reach a child off an
        ancestor modifier class.
   - #3 `.email-route-map-empty__grid` radial-gradient dot field + radial mask.
   - The ≥1200px two-column grid split (minmax/clamp track sizing + stretch) — a
        container-driven structural layout kept verbatim. */

/* Two-column layout: timeline on the left, map (or empty placeholder) on the right.
   Split only kicks in at ≥1200px so the map's 320px floor doesn't crush the
   timeline. The map column is wrapped in `minmax(0, …)` so it can shrink rather
   than overflow when the card's actual width is tight (sidebar / zoom / mobile-
   landscape edge cases). */
.email-route-geo-layout[b-qcxu1y1cwf] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 1200px) {
    .email-route-geo-layout[b-qcxu1y1cwf] {
        grid-template-columns: minmax(0, 1fr) minmax(0, clamp(380px, 46%, 920px));
        /* stretch (the grid default) makes the map column exactly as tall as the
           timeline/path, and it tracks live as raw-header rows expand/collapse. */
        align-items: stretch;
    }
    /* Drop the container floor so the column matches the path height. The empty
       placeholder then tracks it exactly; a real map still honours the
       .email-route-map 320px floor so it stays usable on a very short path. */
    .email-route-map-container[b-qcxu1y1cwf] {
        min-height: 0;
    }
}

/* Faint dotted grid that suggests "this is where a map would render", without
   pretending to be one. Centered radial mask fades the dots away at the edges
   so they don't visibly tile against the container border. */
.email-route-map-empty__grid[b-qcxu1y1cwf] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--muted-foreground) 18%, transparent) 1px, transparent 1.5px);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 100%);
    opacity: 0.55;
    z-index: 0;
    pointer-events: none;
}

/* One continuous rail line: each item (except the last) draws a segment from its
   marker centre down past the `gap` to the next marker. Markers carry a card-coloured
   ring so they punch through the line and read as sitting ON it. */
.route-rail__gutter[b-qcxu1y1cwf]::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 0;
    bottom: -10px;                 /* bridge the 10px flex gap to the next marker */
    width: 2px;
    background: color-mix(in srgb, var(--muted-foreground) 24%, transparent);
}
.route-rail__item:first-child .route-rail__gutter[b-qcxu1y1cwf]::before { top: 50%; }
.route-rail__item:last-child .route-rail__gutter[b-qcxu1y1cwf]::before { bottom: 50%; }

/* --- Link plug: a small lock on the connector, recoloured by transport state --- */
.route-transit--secure .route-rail__plug[b-qcxu1y1cwf] {
    background: color-mix(in srgb, var(--success) 18%, transparent);
    color: var(--success);
}
.route-transit--danger .route-rail__plug[b-qcxu1y1cwf] {
    background: color-mix(in srgb, var(--destructive) 18%, transparent);
    color: var(--destructive);
}
.route-transit--unknown .route-rail__plug[b-qcxu1y1cwf] {
    background: var(--muted);
    color: var(--muted-foreground);
}

/* Link box + label recoloured by transport state so it is unmistakably the
   connection, not a station. */
.route-transit--secure .route-rail__box--link[b-qcxu1y1cwf] {
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
    background: color-mix(in srgb, var(--success) 9%, transparent);
}
.route-transit--danger .route-rail__box--link[b-qcxu1y1cwf] {
    border-color: color-mix(in srgb, var(--destructive) 35%, transparent);
    background: color-mix(in srgb, var(--destructive) 9%, transparent);
}
.route-transit--unknown .route-rail__box--link[b-qcxu1y1cwf] {
    border-color: var(--border);
    background: var(--muted);
}

.route-transit--secure .route-rail__link-label[b-qcxu1y1cwf] { color: var(--success); }
.route-transit--danger .route-rail__link-label[b-qcxu1y1cwf] { color: var(--destructive); }
.route-transit--unknown .route-rail__link-label[b-qcxu1y1cwf] { color: var(--muted-foreground); }
/* /Components/MailServer/AddressCard.razor.rz.scp.css */
/* ::deep into BbButton child for copy-success recolor. */

.address-card[b-4i5n6daf0d]  .address-card__copy {
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.address-card[b-4i5n6daf0d]  .address-card__copy--copied,
.address-card[b-4i5n6daf0d]  .address-card__copy--copied:hover {
    background-color: var(--success) !important;
    color: var(--success-foreground, #0e1a13) !important;
    border-color: transparent !important;
}
/* /Components/MailServer/SmtpTranscript.razor.rz.scp.css */
/* Kept scoped per the keep-rubric:
   - #2 @keyframes blink cursor + its reduced-motion rule.
   - #3 per-line-kind ancestor-state descendant combinators recoloring the child
        prefix/body spans (`.smtp-line--X .smtp-line__prefix`). Tailwind cannot
        target a child's colour off an ancestor modifier class. */

.smtp-transcript__cursor[b-lxsn7upvmy] {
    animation: smtp-cursor-blink-b-lxsn7upvmy 1.1s steps(2, end) infinite;
}

@keyframes smtp-cursor-blink-b-lxsn7upvmy {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .smtp-transcript__cursor[b-lxsn7upvmy] { animation: none; opacity: 1; }
}

.smtp-line--command .smtp-line__prefix[b-lxsn7upvmy] { color: #6bbf8a; }
.smtp-line--reply   .smtp-line__prefix[b-lxsn7upvmy] { color: #6cb6e0; }
.smtp-line--data    .smtp-line__prefix[b-lxsn7upvmy] { color: var(--terminal-text-dim); }
.smtp-line--data    .smtp-line__body[b-lxsn7upvmy]   { color: var(--terminal-text-data); }
.smtp-line--meta    .smtp-line__prefix[b-lxsn7upvmy] { color: #b45309; }
.smtp-line--meta    .smtp-line__body[b-lxsn7upvmy]   { color: #b45309; font-style: italic; }