/* =========================================
   PLATFORMA DOMAIN COCKPIT — premium-pass (S5.1b — 2026-04-26)
   -----------------------------------------
   Visual elevation af /TenantDomainSettings til top-brand niveau.
   Linear-inspireret depth + Stripe-warmth på celebration-moments +
   Platforma red brand-accent (V3-vision) + matte dark chrome hero-zones.

   Konsumerer V4-token-laget i platforma-tokens.css. Ingen magic numbers
   inde i denne fil — alle farver/spacing/timing via tokens.

   STRUKTUR:
   1.  Cockpit-shell wrapper (.dc-*)
   2.  Hero-zone (.dc-hero) — premium dark chrome surface
   3.  Next Best Action banner (.dc-nba)
   4.  State-specific hero-variants (Unset / Pending / Active / Failed / Locked)
   5.  Status chip (.dc-chip) — animated, state-aware
   6.  DNS record card (.dc-record) — premium with copy affordance
   7.  Diff-view (.dc-diff) — expected vs found with colour coding
   8.  Audit-timeline (.dc-timeline)
   9.  Send-to-IT modal (.dc-mailto-*)
   10. Motion (.dc-fadein, .dc-pulse, .dc-celebration)
   ========================================= */

/* ── 1. Cockpit shell ──────────────────────────────────────────── */

.dc-cockpit {
    --dc-section-gap: var(--platforma-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--dc-section-gap);
}

.dc-cockpit > * {
    animation: dc-fadein var(--platforma-duration-smooth) var(--platforma-ease-premium) both;
}
.dc-cockpit > *:nth-child(2) { animation-delay: 60ms; }
.dc-cockpit > *:nth-child(3) { animation-delay: 120ms; }
.dc-cockpit > *:nth-child(4) { animation-delay: 180ms; }

@keyframes dc-fadein {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── 2. Hero-zone (premium matte dark chrome) ──────────────────── */

.dc-hero {
    position: relative;
    padding: 2.5rem 2.5rem;
    background: var(--platforma-gradient-hero-dark);
    border-radius: var(--platforma-radius-xl);
    box-shadow: var(--platforma-shadow-hero);
    color: var(--platforma-text-on-dark);
    overflow: hidden;
    isolation: isolate;
}

/* Subtle noise-texture overlay for matte premium feel */
.dc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--platforma-noise-texture);
    opacity: 0.6;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}

.dc-hero > * { position: relative; z-index: 1; }

.dc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.7rem;
    background: var(--platforma-glass-light);
    border: 1px solid var(--platforma-glass-line);
    border-radius: var(--platforma-radius-pill);
    font-size: var(--platforma-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--platforma-text-on-dark-muted);
    margin-bottom: 1.25rem;
}

.dc-hero__title {
    font-size: var(--platforma-text-hero);
    line-height: var(--platforma-leading-tight);
    letter-spacing: var(--platforma-tracking-tight);
    color: var(--platforma-text-on-dark);
    margin: 0 0 0.75rem;
    font-weight: 600;
}

.dc-hero__subtitle {
    font-size: var(--platforma-text-lg);
    line-height: 1.5;
    color: var(--platforma-text-on-dark-muted);
    margin: 0 0 1.75rem;
    max-width: 60ch;
}

.dc-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--platforma-dark-line-soft);
    font-size: var(--platforma-text-sm);
    color: var(--platforma-text-on-dark-muted);
}

.dc-hero__meta strong { color: var(--platforma-text-on-dark); font-weight: 600; }

/* ── 3. Next Best Action banner (Senior UX Researcher) ─────────── */
/* Always visible at top of EVERY state. Singular CTA so non-technical
   tenants never wonder "what now?". Brand-accent left rail per V6.3. */

.dc-nba {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.75rem;
    background: var(--platforma-dark-chrome-2);
    border-radius: var(--platforma-radius-lg);
    box-shadow: var(--platforma-shadow-soft);
    color: var(--platforma-text-on-dark);
    position: relative;
    overflow: hidden;
}

/* Brand-red left rail — Platforma red used intentionally per V6.3 */
.dc-nba::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--platforma-gradient-brand-stripe);
}

.dc-nba__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--platforma-glass-light);
    border-radius: var(--platforma-radius);
    color: var(--platforma-brand-on-dark);
    flex-shrink: 0;
}

.dc-nba__copy { flex: 1; min-width: 0; }
.dc-nba__label {
    font-size: var(--platforma-text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--platforma-text-on-dark-muted);
    margin-bottom: 0.2rem;
}
.dc-nba__title {
    font-size: var(--platforma-text-base);
    font-weight: 600;
    color: var(--platforma-text-on-dark);
    margin: 0;
    line-height: 1.4;
}
.dc-nba__action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: var(--platforma-brand);
    color: #fff;
    border: none;
    border-radius: var(--platforma-radius);
    font-weight: 600;
    font-size: var(--platforma-text-sm);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--platforma-duration-quick) var(--platforma-ease-premium),
                box-shadow var(--platforma-duration-quick) var(--platforma-ease-premium),
                background var(--platforma-duration-quick);
    flex-shrink: 0;
}
.dc-nba__action:hover {
    background: var(--platforma-brand-pressed);
    transform: translateY(-1px);
    box-shadow: var(--platforma-shadow-glow-brand);
}
.dc-nba__action:active { transform: translateY(0); }
.dc-nba__action:focus-visible {
    outline: none;
    box-shadow: var(--platforma-shadow-glow-brand);
}
.dc-nba__action--ghost {
    background: var(--platforma-glass-light);
    color: var(--platforma-text-on-dark);
    border: 1px solid var(--platforma-glass-line);
}
.dc-nba__action--ghost:hover {
    background: var(--platforma-dark-chrome-3);
    border-color: var(--platforma-dark-line);
}

@media (max-width: 720px) {
    .dc-nba { flex-direction: column; align-items: flex-start; }
    .dc-nba__action { width: 100%; justify-content: center; }
}

/* ── 4. State-specific hero-variants ───────────────────────────── */

/* Unset — entry point, neutral */
.dc-hero--unset .dc-hero__eyebrow { color: var(--platforma-status-detected); }

/* Pending — warm amber pulse on eyebrow icon */
.dc-hero--pending .dc-hero__eyebrow-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--platforma-status-pending);
    box-shadow: 0 0 0 4px rgba(244, 185, 66, 0.20);
    animation: dc-pulse 2s var(--platforma-ease-premium) infinite;
}

/* Active — celebration gradient + brand-glow */
.dc-hero--active {
    background: var(--platforma-gradient-celebration);
    box-shadow: var(--platforma-shadow-celebration);
}
.dc-hero--active .dc-hero__eyebrow {
    color: var(--platforma-status-active);
}
.dc-hero--active .dc-hero__eyebrow-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--platforma-status-active);
    box-shadow: 0 0 0 4px var(--platforma-status-active-glow);
}

/* Failed — danger stripe */
.dc-hero--failed::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--platforma-status-failed);
    z-index: 2;
}
.dc-hero--failed .dc-hero__eyebrow { color: var(--platforma-status-failed); }

/* Locked (plan-gate) — restraint, no warmth */
.dc-hero--locked {
    background: linear-gradient(135deg, var(--platforma-gray-900) 0%, var(--platforma-gray-800) 100%);
}
.dc-hero--locked .dc-hero__eyebrow { color: var(--platforma-status-pending); }

@keyframes dc-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(244, 185, 66, 0.20); }
    50%      { box-shadow: 0 0 0 10px rgba(244, 185, 66, 0.06); }
}

/* ── 5. Status chip ────────────────────────────────────────────── */

.dc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: var(--platforma-radius-pill);
    font-size: var(--platforma-text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--platforma-status-pending-soft);
    color: var(--platforma-status-pending);
    border: 1px solid currentColor;
    transition: all var(--platforma-duration-smooth) var(--platforma-ease-premium);
}
.dc-chip__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.dc-chip.is-detected,
.dc-chip.is-active {
    background: var(--platforma-status-detected-soft);
    color: var(--platforma-status-detected);
}
.dc-chip.is-mismatch,
.dc-chip.is-failed {
    background: var(--platforma-status-failed-soft);
    color: var(--platforma-status-failed);
}
.dc-chip.is-pulsing .dc-chip__dot {
    animation: dc-chip-pulse 1.6s var(--platforma-ease-premium) infinite;
}
@keyframes dc-chip-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.4); }
}

/* ── 6. Premium card surface ──────────────────────────────────── */

.dc-card {
    background: var(--platforma-surface-card);
    border: 1px solid var(--platforma-surface-line);
    border-radius: var(--platforma-radius-lg);
    box-shadow: var(--platforma-shadow-card);
    padding: var(--platforma-space-6);
    transition: box-shadow var(--platforma-duration-smooth) var(--platforma-ease-premium);
}
.dc-card__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.dc-card__title {
    font-size: var(--platforma-text-lg);
    font-weight: 600;
    margin: 0;
    color: var(--platforma-ink-strong);
    letter-spacing: var(--platforma-tracking-tight);
}
.dc-card__lead {
    color: var(--platforma-ink-muted);
    line-height: 1.55;
    margin: 0 0 1.25rem;
    font-size: var(--platforma-text-sm);
}

/* ── 7. DNS record block ──────────────────────────────────────── */

.dc-record {
    background: var(--platforma-parchment-50);
    border: 1px solid var(--platforma-surface-line);
    border-radius: var(--platforma-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: border-color var(--platforma-duration-quick),
                box-shadow var(--platforma-duration-quick);
}
.dc-record:hover {
    border-color: var(--platforma-accent-border);
    box-shadow: var(--platforma-shadow-soft);
}

.dc-record__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.dc-record__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    background: var(--platforma-brand);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--platforma-radius-xs);
}
.dc-record__title {
    font-size: var(--platforma-text-base);
    font-weight: 600;
    margin: 0;
    color: var(--platforma-ink-strong);
}
.dc-record__title code {
    font-family: var(--platforma-font-mono);
    background: var(--platforma-parchment-200);
    padding: 1px 6px;
    border-radius: var(--platforma-radius-xs);
    font-size: 0.9em;
    font-weight: 500;
    color: var(--platforma-ink-strong);
}

.dc-record__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.dc-record__cell {
    background: var(--platforma-white);
    border: 1px solid var(--platforma-surface-line);
    border-radius: var(--platforma-radius-sm);
    padding: 0.6rem 0.85rem;
    transition: all var(--platforma-duration-quick);
}
.dc-record__cell:hover { border-color: var(--platforma-accent); }
.dc-record__cell--wide { grid-column: span 2; }
.dc-record__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--platforma-ink-subtle);
    margin-bottom: 0.25rem;
}
.dc-record__value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: var(--platforma-font-mono);
    font-size: var(--platforma-text-sm);
    word-break: break-all;
    color: var(--platforma-ink-strong);
}
.dc-record__copy {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--platforma-radius-xs);
    color: var(--platforma-ink-subtle);
    transition: all var(--platforma-duration-quick);
    flex-shrink: 0;
}
.dc-record__copy:hover {
    background: var(--platforma-parchment-100);
    color: var(--platforma-brand);
}
.dc-record__copy.is-copied {
    color: var(--platforma-status-active);
    background: var(--platforma-success-light);
}
.dc-record__tip {
    font-size: var(--platforma-text-xs);
    color: var(--platforma-ink-muted);
    margin: 0.85rem 0 0;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .dc-record__grid { grid-template-columns: 1fr; }
    .dc-record__cell--wide { grid-column: span 1; }
}

/* ── 8. Diff-view (expected vs found) — failed-state diagnostics ── */

.dc-diff {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    align-items: stretch;
    margin: 1rem 0;
}
.dc-diff__col {
    padding: 0.85rem 1rem;
    border-radius: var(--platforma-radius);
    border: 1px solid;
    font-family: var(--platforma-font-mono);
    font-size: var(--platforma-text-sm);
}
.dc-diff__col--expected {
    background: var(--platforma-status-detected-soft);
    border-color: rgba(74, 222, 128, 0.30);
    color: var(--platforma-text-on-dark);
}
.dc-diff__col--found {
    background: var(--platforma-status-failed-soft);
    border-color: rgba(248, 113, 113, 0.30);
    color: var(--platforma-text-on-dark);
}
.dc-diff__label {
    font-family: var(--platforma-font-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
    opacity: 0.75;
}
.dc-diff__arrow {
    align-self: center;
    color: var(--platforma-text-on-dark-muted);
    padding: 0 0.25rem;
}
.dc-diff__explain {
    margin-top: 0.85rem;
    padding: 0.75rem 1rem;
    background: var(--platforma-glass-light);
    border-left: 3px solid var(--platforma-status-failed);
    border-radius: var(--platforma-radius-sm);
    color: var(--platforma-text-on-dark-muted);
    font-size: var(--platforma-text-sm);
    line-height: 1.55;
}
.dc-diff__explain strong { color: var(--platforma-text-on-dark); }

@media (max-width: 720px) {
    .dc-diff { grid-template-columns: 1fr; }
    .dc-diff__arrow { transform: rotate(90deg); justify-self: center; }
}

/* ── 9. Audit timeline (premium dimensional version) ─────────── */

.dc-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.dc-timeline::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg,
        var(--platforma-surface-line) 0%,
        var(--platforma-surface-line) 80%,
        transparent 100%);
}
.dc-timeline__item {
    position: relative;
    padding-left: 2.25rem;
    padding-bottom: 1.25rem;
}
.dc-timeline__item:last-child { padding-bottom: 0; }
.dc-timeline__icon {
    position: absolute;
    left: 0; top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--platforma-white);
    border: 2px solid var(--platforma-surface-line);
    color: var(--platforma-ink-muted);
}
.dc-timeline__item--requested .dc-timeline__icon { color: var(--platforma-accent); border-color: currentColor; }
.dc-timeline__item--activated .dc-timeline__icon { color: var(--platforma-status-active); border-color: currentColor; }
.dc-timeline__item--deactivated .dc-timeline__icon { color: var(--platforma-ink-muted); }
.dc-timeline__item--failed .dc-timeline__icon { color: var(--platforma-status-failed); border-color: currentColor; }
.dc-timeline__item--detected .dc-timeline__icon { color: var(--platforma-info); border-color: currentColor; }
.dc-timeline__action {
    font-weight: 600;
    color: var(--platforma-ink-strong);
    font-size: var(--platforma-text-sm);
}
.dc-timeline__detail {
    font-family: var(--platforma-font-mono);
    font-size: var(--platforma-text-xs);
    color: var(--platforma-ink-muted);
    margin-top: 0.25rem;
}
.dc-timeline__time {
    display: block;
    font-size: 11px;
    color: var(--platforma-ink-subtle);
    margin-top: 0.3rem;
    letter-spacing: 0.02em;
}

/* ── 10. Send-to-IT modal trigger card ──────────────────────── */

.dc-mailto-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg,
        var(--platforma-parchment-50) 0%,
        var(--platforma-parchment-100) 100%);
    border: 1px dashed var(--platforma-accent-border);
    border-radius: var(--platforma-radius-lg);
    transition: all var(--platforma-duration-smooth) var(--platforma-ease-premium);
    cursor: pointer;
    width: 100%;
    text-align: left;
    color: inherit;
    font-family: inherit;
}
.dc-mailto-card:hover {
    border-color: var(--platforma-accent);
    border-style: solid;
    box-shadow: var(--platforma-shadow-soft);
    transform: translateY(-1px);
}
.dc-mailto-card__icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--platforma-accent-soft);
    color: var(--platforma-accent);
    border-radius: var(--platforma-radius);
    flex-shrink: 0;
}
.dc-mailto-card__title {
    font-size: var(--platforma-text-base);
    font-weight: 600;
    color: var(--platforma-ink-strong);
    margin: 0 0 0.15rem;
}
.dc-mailto-card__lead {
    font-size: var(--platforma-text-sm);
    color: var(--platforma-ink-muted);
    margin: 0;
}
.dc-mailto-card__chevron {
    color: var(--platforma-ink-subtle);
    transition: transform var(--platforma-duration-quick);
    margin-left: auto;
    flex-shrink: 0;
}
.dc-mailto-card:hover .dc-mailto-card__chevron {
    transform: translateX(3px);
    color: var(--platforma-brand);
}

/* Send-to-IT modal overlay + modal surface
   ─────────────────────────────────────────
   S5.1c-fix: layout-properties levede tidligere i inline style="..." på
   <div class="dc-mailto-overlay" hidden ...>. Inline display:flex vinder
   altid over hidden-attributtens implicit display:none, så modalen var
   permanent synlig og kunne ikke skjules via JS overlay.hidden=true.
   Løsning: layout her, [hidden] selector med high specificity tvinger
   none. */
.dc-mailto-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    animation: dc-mailto-fade var(--platforma-duration-smooth) var(--platforma-ease-premium);
}
.dc-mailto-overlay[hidden] {
    display: none !important;
}
@keyframes dc-mailto-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.dc-mailto-modal {
    background: var(--platforma-white);
    border-radius: var(--platforma-radius-xl);
    box-shadow: var(--platforma-shadow-xl);
    max-width: 640px;
    width: calc(100vw - 2rem);
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dc-mailto-modal__header {
    padding: 1.5rem 1.75rem 1rem;
    border-bottom: 1px solid var(--platforma-surface-line);
}
.dc-mailto-modal__title {
    font-size: var(--platforma-text-xl);
    font-weight: 600;
    color: var(--platforma-ink-strong);
    margin: 0 0 0.25rem;
    letter-spacing: var(--platforma-tracking-tight);
}
.dc-mailto-modal__body {
    padding: 1.5rem 1.75rem;
    flex: 1;
    overflow: auto;
}
.dc-mailto-modal__field { margin-bottom: 1rem; }
.dc-mailto-modal__field label {
    display: block;
    font-size: var(--platforma-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--platforma-ink-muted);
    margin-bottom: 0.4rem;
}
.dc-mailto-modal__preview {
    background: var(--platforma-parchment-100);
    border: 1px solid var(--platforma-surface-line);
    border-radius: var(--platforma-radius);
    padding: 1rem 1.25rem;
    font-family: var(--platforma-font-mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--platforma-ink-strong);
    white-space: pre-wrap;
    max-height: 280px;
    overflow: auto;
}
.dc-mailto-modal__footer {
    padding: 1.25rem 1.75rem;
    border-top: 1px solid var(--platforma-surface-line);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* ── 11. Active-state celebration accent (brand-stripe sweep) ── */

.dc-celebration-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--platforma-radius);
    color: var(--platforma-text-on-dark);
    font-family: var(--platforma-font-mono);
    font-size: var(--platforma-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--platforma-duration-smooth) var(--platforma-ease-premium);
    margin-top: 1.25rem;
}
.dc-celebration-link:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--platforma-status-active);
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px var(--platforma-status-active-glow);
}

/* ── 12. Failed state — common-causes list (premium variant) ── */

.dc-causes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}
.dc-causes__item {
    display: flex;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--platforma-glass-light);
    border-left: 3px solid var(--platforma-status-failed);
    border-radius: var(--platforma-radius-sm);
}
.dc-causes__num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: var(--platforma-status-failed-soft);
    color: var(--platforma-status-failed);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}
.dc-causes__title {
    font-weight: 600;
    color: var(--platforma-text-on-dark);
    font-size: var(--platforma-text-sm);
    margin: 0 0 0.2rem;
}
.dc-causes__body {
    color: var(--platforma-text-on-dark-muted);
    font-size: var(--platforma-text-sm);
    margin: 0;
    line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────────
   S5.2a — Website cockpit pill-tabs (Phase D)
   ──────────────────────────────────────────────────────────────────
   Senior Brand Director: pill-shape + matte dark active-fill +
   Platforma red brand-stripe top på ACTIVE tab. Inactive = ghost-pill
   med subtil border. Status-glyph farves via data-tone-attribut.

   Senior IA / Design Governance: ÉN visuel rytme på tværs af alle
   surfaces — counter altid efter label, glyph altid før, label altid
   ÉN linje (ingen wrap). Layout grid-aware så lange labels (DA: "Eget
   domæne") ikke knækker.
   ────────────────────────────────────────────────────────────────── */

.ws-cockpit-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.4rem;
    margin: 0 0 1.5rem;
    background: var(--platforma-parchment-50);
    border: 1px solid var(--platforma-surface-line);
    border-radius: var(--platforma-radius-pill);
    box-shadow: var(--platforma-shadow-soft);
    align-items: center;
}

.ws-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border-radius: var(--platforma-radius-pill);
    font-size: var(--platforma-text-sm);
    font-weight: 500;
    color: var(--platforma-ink-muted);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition:
        background var(--platforma-duration-quick) var(--platforma-ease-premium),
        color var(--platforma-duration-quick) var(--platforma-ease-premium),
        border-color var(--platforma-duration-quick) var(--platforma-ease-premium),
        transform var(--platforma-duration-quick) var(--platforma-ease-premium);
    white-space: nowrap;
    position: relative;
}
.ws-tab:hover {
    color: var(--platforma-ink-strong);
    background: var(--platforma-white);
    border-color: var(--platforma-surface-line);
}
.ws-tab:focus-visible {
    outline: none;
    box-shadow: var(--platforma-focus-ring);
}

/* ── Active tab — matte dark chrome + brand-stripe top ── */
.ws-tab.is-active {
    background: var(--platforma-dark-chrome);
    color: var(--platforma-text-on-dark);
    border-color: var(--platforma-dark-chrome);
    font-weight: 600;
    box-shadow: var(--platforma-shadow-card);
}
.ws-tab.is-active::before {
    content: "";
    position: absolute;
    left: 12px; right: 12px;
    top: 0;
    height: 2px;
    background: var(--platforma-gradient-brand-stripe);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    animation: dc-stripe-sweep 0.5s var(--platforma-ease-celebration) 0.1s forwards;
}

/* ── Status-glyph tone-coloring (data-tone drives color) ── */
.ws-tab__glyph {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--platforma-ink-subtle);
}
.ws-tab[data-tone="ok"] .ws-tab__glyph    { color: var(--platforma-status-active); }
.ws-tab[data-tone="attn"] .ws-tab__glyph  { color: var(--platforma-status-pending); }
.ws-tab[data-tone="warn"] .ws-tab__glyph  { color: var(--platforma-status-failed); }
.ws-tab[data-tone="muted"] .ws-tab__glyph { color: var(--platforma-ink-subtle); opacity: 0.55; }
.ws-tab[data-tone="neutral"] .ws-tab__glyph { color: var(--platforma-ink-subtle); }

/* Active tab keeps tone-color for glyph but on dark surface — invert
   neutral to text-on-dark-muted, keep semantic colors as-is. */
.ws-tab.is-active[data-tone="neutral"] .ws-tab__glyph,
.ws-tab.is-active[data-tone="muted"] .ws-tab__glyph {
    color: var(--platforma-text-on-dark-muted);
}

.ws-tab__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-tab__counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: var(--platforma-radius-pill);
    background: var(--platforma-parchment-200);
    color: var(--platforma-ink-strong);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.ws-tab__counter--warn {
    background: var(--platforma-status-failed-soft);
    color: var(--platforma-status-failed);
}
.ws-tab.is-active .ws-tab__counter {
    background: var(--platforma-glass-light);
    color: var(--platforma-text-on-dark);
    border: 1px solid var(--platforma-glass-line);
}
.ws-tab.is-active .ws-tab__counter--warn {
    background: var(--platforma-status-failed-soft);
    color: var(--platforma-status-failed);
    border-color: rgba(248, 113, 113, 0.3);
}

@media (max-width: 720px) {
    .ws-cockpit-nav { flex-direction: column; align-items: stretch; padding: 0.4rem; }
    .ws-tab { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .ws-tab.is-active::before { animation: none; transform: scaleX(1); }
    .ws-tab { transition: none; }
}

/* ──────────────────────────────────────────────────────────────────
   S5.2b — Website cockpit hub-landing (Phase C)
   ──────────────────────────────────────────────────────────────────
   Stripe/Linear-stil card grid. Hver card surface = ÉN cockpit-area.
   Click → drill ind. Card viser: ikon + titel + 2-3 KPI'er + "sidst
   ændret"-relativ tid + state-badge i top-højre hjørne.
   ────────────────────────────────────────────────────────────────── */

.ws-hub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--platforma-space-4);
}

.ws-hub__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.5rem;
    background: var(--platforma-surface-card);
    border: 1px solid var(--platforma-surface-line);
    border-radius: var(--platforma-radius-lg);
    box-shadow: var(--platforma-shadow-soft);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform var(--platforma-duration-smooth) var(--platforma-ease-premium),
        border-color var(--platforma-duration-smooth) var(--platforma-ease-premium),
        box-shadow var(--platforma-duration-smooth) var(--platforma-ease-premium);
    isolation: isolate;
}
.ws-hub__card:hover {
    transform: translateY(-3px);
    border-color: var(--platforma-accent-border);
    box-shadow: var(--platforma-shadow-float);
}
.ws-hub__card:focus-visible {
    outline: none;
    box-shadow: var(--platforma-shadow-glow-brand);
    border-color: var(--platforma-brand);
}

.ws-hub__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--platforma-radius);
    background: var(--platforma-accent-soft);
    color: var(--platforma-accent);
    flex-shrink: 0;
}
.ws-hub__card[data-tone="ok"] .ws-hub__icon {
    background: var(--platforma-success-soft);
    color: var(--platforma-status-active);
}
.ws-hub__card[data-tone="warn"] .ws-hub__icon {
    background: var(--platforma-status-failed-soft);
    color: var(--platforma-status-failed);
}
.ws-hub__card[data-tone="attn"] .ws-hub__icon {
    background: var(--platforma-warning-soft);
    color: var(--platforma-status-pending);
}
.ws-hub__card[data-tone="locked"] .ws-hub__icon {
    background: var(--platforma-parchment-200);
    color: var(--platforma-ink-subtle);
}

.ws-hub__title {
    font-size: var(--platforma-text-lg);
    font-weight: 600;
    color: var(--platforma-ink-strong);
    margin: 0;
    letter-spacing: var(--platforma-tracking-tight);
}

.ws-hub__kpi {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ws-hub__kpi-primary {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--platforma-ink-strong);
    letter-spacing: var(--platforma-tracking-tight);
    line-height: 1;
}
.ws-hub__kpi-primary--muted {
    color: var(--platforma-ink-subtle);
    font-weight: 500;
    font-size: var(--platforma-text-base);
}
.ws-hub__kpi-secondary {
    font-size: var(--platforma-text-sm);
    color: var(--platforma-ink-muted);
}

.ws-hub__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    font-size: var(--platforma-text-xs);
    color: var(--platforma-ink-subtle);
    padding-top: 0.6rem;
    border-top: 1px solid var(--platforma-surface-line);
}

/* State-badge i top-højre hjørne af hub-card */
.ws-hub__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--platforma-radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--platforma-parchment-100);
    color: var(--platforma-ink-muted);
}
.ws-hub__badge--ok {
    background: var(--platforma-success-soft);
    color: var(--platforma-status-active);
}
.ws-hub__badge--warn {
    background: var(--platforma-status-failed-soft);
    color: var(--platforma-status-failed);
}
.ws-hub__badge--attn {
    background: var(--platforma-warning-soft);
    color: var(--platforma-status-pending);
}
.ws-hub__badge--locked {
    background: var(--platforma-parchment-200);
    color: var(--platforma-ink-subtle);
}

@media (max-width: 480px) {
    .ws-hub { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────
   RB.3 — Recyclebin (uses ws-* + dc-* primitives + minimal additions)
   ────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────
   S5.5b — Recyclebin standard cockpit-design (2026-04-27)
   ──────────────────────────────────────────────────────────────────
   Erstatter S5.4b's ul/li-card-row pattern med tabel-baseret cockpit
   så vi:
     • Genbruger platforma-tables.js (data-sortable + data-cs-*) uden
       custom JS
     • Matcher WebsitePages-cockpit visuelt (samme rb-table-card-shell
       som wp-table-card)
     • Får "stigende/faldende"-sort-funktion på alle kolonner gratis
   ────────────────────────────────────────────────────────────────── */

/* ── Empty-state card (uændret fra S5.4b, omdøbt for klarhed) ── */
.rb-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 1rem;
    background: linear-gradient(135deg,
        var(--platforma-success-soft) 0%,
        var(--platforma-surface-card) 100%);
}
.rb-empty-card__icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 222, 128, 0.18);
    border-radius: 50%;
}
.rb-empty-card__title {
    margin: 0;
    font-size: var(--platforma-text-xl);
    font-weight: 600;
    color: var(--platforma-ink-strong);
    letter-spacing: var(--platforma-tracking-tight);
}
.rb-empty-card__lead {
    margin: 0;
    color: var(--platforma-ink-muted);
    max-width: 50ch;
    line-height: 1.55;
}

/* ── Table-card shell (matcher .wp-table-card) ── */
.rb-table-card {
    background: var(--platforma-surface-card);
    border: 1px solid var(--platforma-surface-line);
    border-radius: var(--platforma-radius-lg);
    box-shadow: var(--platforma-shadow-card);
    overflow: hidden;
}
.rb-table-card__head {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--platforma-surface-line);
}
.rb-table-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--platforma-ink-strong);
    letter-spacing: var(--platforma-tracking-tight);
}
.rb-table-card__subtitle {
    margin: .2rem 0 0;
    font-size: var(--platforma-text-sm);
    color: var(--platforma-ink-muted);
}

/* ── Search + kind-dropdown filter-bar ── */
.rb-controls {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .9rem 1.5rem .35rem;
}
.rb-search-wrap {
    position: relative;
    flex: 1;
    min-width: 240px;
}
.rb-search-icon {
    position: absolute;
    top: 50%;
    left: .75rem;
    transform: translateY(-50%);
    color: var(--platforma-ink-subtle);
    pointer-events: none;
}
.rb-search-input {
    width: 100%;
    padding: .55rem .9rem .55rem 2.2rem;
    background: var(--platforma-parchment-50);
    border: 1px solid var(--platforma-surface-line);
    border-radius: var(--platforma-radius);
    font-size: var(--platforma-text-sm);
    color: var(--platforma-ink-strong);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rb-search-input:focus {
    outline: none;
    border-color: var(--platforma-accent);
    box-shadow: var(--platforma-focus-ring);
}
.rb-kind-select {
    padding: .55rem .9rem;
    background: var(--platforma-parchment-50);
    border: 1px solid var(--platforma-surface-line);
    border-radius: var(--platforma-radius);
    font-size: var(--platforma-text-sm);
    color: var(--platforma-ink-strong);
    cursor: pointer;
    min-width: 180px;
}
.rb-kind-select:focus {
    outline: none;
    border-color: var(--platforma-accent);
    box-shadow: var(--platforma-focus-ring);
}

/* ── Filter-tabs (matcher wp-filter-tabs) ── */
.rb-filter-tabs {
    display: flex;
    gap: .35rem;
    padding: .35rem 1.5rem 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--platforma-surface-line);
}
.rb-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--platforma-radius-pill);
    color: var(--platforma-ink-muted);
    font-size: var(--platforma-text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: all .15s ease;
    cursor: pointer;
}
.rb-filter-tab:hover {
    color: var(--platforma-ink-strong);
    background: var(--platforma-parchment-50);
    border-color: var(--platforma-surface-line);
}
.rb-filter-tab.is-active {
    background: var(--platforma-dark-chrome);
    color: var(--platforma-text-on-dark);
    border-color: var(--platforma-dark-chrome);
    font-weight: 600;
}
.rb-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.2rem;
    padding: 0 .4rem;
    border-radius: var(--platforma-radius-pill);
    background: var(--platforma-parchment-200);
    color: var(--platforma-ink-strong);
    font-size: .7rem;
    font-weight: 700;
}
.rb-filter-tab.is-active .rb-filter-count {
    background: var(--platforma-glass-light);
    color: var(--platforma-text-on-dark);
    border: 1px solid var(--platforma-glass-line);
}

/* ── Premium table (matcher .wp-table) ── */
.rb-table-wrapper {
    overflow-x: auto;
}
.rb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--platforma-text-sm);
}
.rb-table thead th {
    padding: .8rem 1rem;
    background: var(--platforma-parchment-50);
    color: var(--platforma-ink-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    border-bottom: 1px solid var(--platforma-surface-line);
}
.rb-table thead th[data-sortable] {
    cursor: pointer;
    user-select: none;
    transition: color .15s ease;
}
.rb-table thead th[data-sortable]:hover { color: var(--platforma-ink-strong); }
.rb-table thead th[data-sortable]::after {
    content: '↕';
    margin-left: .35rem;
    opacity: .35;
    font-size: .8rem;
}
.rb-table thead th[data-sortable].is-sorted-asc::after  { content: '↑'; opacity: 1; color: var(--platforma-accent); }
.rb-table thead th[data-sortable].is-sorted-desc::after { content: '↓'; opacity: 1; color: var(--platforma-accent); }
.rb-table tbody td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--platforma-surface-line);
    color: var(--platforma-ink-strong);
    vertical-align: middle;
}
.rb-table tbody tr {
    transition: background .15s ease;
}
.rb-table tbody tr:hover {
    background: var(--platforma-parchment-50);
}
.rb-table tbody tr:last-child td { border-bottom: none; }

/* Imminent-purge row tone */
.rb-table tbody tr.rb-tr--imminent {
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.05) 0%, transparent 60%);
    border-left: 3px solid var(--platforma-status-failed);
}
.rb-table tbody tr.rb-tr--imminent:hover {
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.10) 0%, var(--platforma-parchment-50) 60%);
}
.rb-table tbody tr.rb-tr--imminent td:first-child { padding-left: calc(1rem - 3px); }

/* ── Cell components ── */
.rb-cell-main {
    display: flex;
    align-items: center;
    gap: .65rem;
}
.rb-cell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--platforma-parchment-100);
    color: var(--platforma-ink-muted);
    flex-shrink: 0;
}
.rb-tr--imminent .rb-cell-icon {
    background: var(--platforma-status-failed-soft);
    color: var(--platforma-status-failed);
}
.rb-cell-main__text { min-width: 0; display: flex; flex-direction: column; }
.rb-cell-title {
    font-weight: 600;
    color: var(--platforma-ink-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 30ch;
}
.rb-cell-subtitle {
    font-family: var(--platforma-font-mono);
    font-size: .72rem;
    color: var(--platforma-ink-subtle);
    background: transparent;
    padding: 0;
    margin-top: 2px;
}

.rb-kind-badge {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    background: var(--platforma-parchment-100);
    color: var(--platforma-ink-muted);
    border-radius: var(--platforma-radius-pill);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rb-actor--unknown {
    font-style: italic;
    color: var(--platforma-ink-subtle);
}

.rb-purge-badge {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border-radius: var(--platforma-radius-pill);
    background: var(--platforma-parchment-100);
    color: var(--platforma-ink-muted);
    font-size: .72rem;
    font-weight: 500;
    white-space: nowrap;
}
.rb-purge-badge--imminent {
    background: var(--platforma-status-failed-soft);
    color: var(--platforma-status-failed);
    font-weight: 600;
}

/* ── Actions column (right-aligned) ── */
.rb-table__actions-col { text-align: right; white-space: nowrap; }
.rb-inline-form { display: inline; }
.rb-btn-restore {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .8rem;
    background: transparent;
    border: 1px solid var(--platforma-accent-border);
    color: var(--platforma-accent);
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.rb-btn-restore:hover {
    background: var(--platforma-accent);
    color: #fff;
    border-color: var(--platforma-accent);
}

@media (max-width: 720px) {
    .rb-controls { padding: .9rem 1rem .35rem; }
    .rb-search-wrap, .rb-kind-select { min-width: 100%; }
    .rb-filter-tabs { padding: .35rem 1rem 1rem; }
    .rb-table thead { display: none; }
    .rb-table tbody td {
        display: block;
        padding: .35rem 1rem;
        border-bottom: none;
    }
    .rb-table tbody td:first-child { padding-top: 1rem; }
    .rb-table tbody td:last-child { padding-bottom: 1rem; border-bottom: 1px solid var(--platforma-surface-line); }
}

/* ──────────────────────────────────────────────────────────────────
   S5.1e — Motion polish-pass (vanilla, no dependencies)
   ──────────────────────────────────────────────────────────────────
   Senior Brand Director: motion er den sidste 5% af "føles dyrt".
   Senior WCAG Engineer: alle animationer respekterer prefers-reduced-motion
   via tokens i platforma-tokens.css (durations bliver 0ms i reduced).
   Senior UX Researcher: celebration-moments engineered til emotional
   payoff uden at være barnlig — Stripe/Linear-niveau, ikke confetti-spam.
   ────────────────────────────────────────────────────────────────── */

/* M1. Brand-stripe sweep over Active hero ─────────────────────────
       Tynd horisontal stripe der animerer fra venstre→højre på load.
       Klassisk "vi fejrer dig"-signal. Reduceret motion → ingen sweep. */
.dc-hero--active::after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    height: 3px;
    width: 100%;
    background: var(--platforma-gradient-brand-stripe);
    transform-origin: left center;
    transform: scaleX(0);
    animation: dc-stripe-sweep 0.8s var(--platforma-ease-celebration) forwards;
    animation-delay: 0.15s;
    z-index: 2;
}
@keyframes dc-stripe-sweep {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* M2. Card hover-lift — alle .dc-card surfaces ─────────────────────
       Subtil translateY + skygge-løft. Honors reduced-motion automatisk. */
.dc-card {
    transition:
        transform var(--platforma-duration-quick) var(--platforma-ease-premium),
        box-shadow var(--platforma-duration-quick) var(--platforma-ease-premium),
        border-color var(--platforma-duration-quick) var(--platforma-ease-premium);
}
.dc-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--platforma-shadow-float);
    border-color: var(--platforma-accent-border);
}

/* M3. DNS-record hover refinement ─────────────────────────────────
       Records er nested cards — let blå border + subtil løft på hover. */
.dc-record {
    will-change: transform;
}
.dc-record:hover {
    transform: translateY(-1px);
}

/* M4. Copy-button morph: copy-icon → checkmark ────────────────────
       Når .is-copied tilføjes, skalerer ikonet ned og fader, derefter
       skalerer checkmark op. JS swapper ikon mid-transition. */
.dc-record__copy svg {
    transition:
        transform var(--platforma-duration-quick) var(--platforma-ease-premium),
        opacity var(--platforma-duration-quick) var(--platforma-ease-premium);
}
.dc-record__copy.is-copied {
    background: var(--platforma-status-detected-soft);
    color: var(--platforma-status-detected);
    transform: scale(1.05);
}
.dc-record__copy.is-copied svg {
    animation: dc-copy-pop 0.4s var(--platforma-ease-celebration);
}
@keyframes dc-copy-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* M5. Modal slide-up entrance ─────────────────────────────────────
       Backdrop fader allerede via dc-mailto-fade (S5.1d); modal selv
       skyder op fra +20px med subtle scale. */
.dc-mailto-modal {
    animation: dc-modal-rise var(--platforma-duration-smooth) var(--platforma-ease-celebration);
    transform-origin: center bottom;
}
@keyframes dc-modal-rise {
    from { transform: translateY(24px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0)   scale(1);    opacity: 1; }
}

/* M6. Shimmer-skeleton for "loading" state on poll-status chip ─────
       Når auto-poll er midt i fetch og chip ikke har en stabil tilstand,
       viser vi en pulsende skeleton i stedet for spinner. */
.dc-chip.is-loading {
    background: linear-gradient(
        90deg,
        var(--platforma-glass-light) 0%,
        var(--platforma-glass-line) 50%,
        var(--platforma-glass-light) 100%);
    background-size: 200% 100%;
    animation: dc-shimmer 1.4s linear infinite;
    color: transparent !important;
    border-color: transparent;
    min-width: 140px;
}
.dc-chip.is-loading .dc-chip__dot { opacity: 0; }
@keyframes dc-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* M7. Confetti canvas — pinned overlay, auto-removed by JS ─────────
       Sikrer at canvas er over al UI men ikke fanger pointer-events. */
.dc-confetti-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10000;
}

/* M8. Live-link sweep on hover (Active state) ─────────────────────
       Premium feel når musen rør celebration-link. */
.dc-celebration-link {
    overflow: hidden;
    position: relative;
}
.dc-celebration-link::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -120%;
    width: 80%;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(244, 81, 108, 0.18) 50%,
        transparent 100%);
    transition: left 0.5s var(--platforma-ease-premium);
}
.dc-celebration-link:hover::before {
    left: 120%;
}

/* M9. Status-dot ripple (Active state pulse) ──────────────────────
       Den grønne dot i hero-eyebrow får en kontinuerlig ring-puls. */
.dc-hero--active .dc-hero__eyebrow-dot {
    position: relative;
}
.dc-hero--active .dc-hero__eyebrow-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--platforma-status-active);
    opacity: 0;
    animation: dc-ripple 2.4s var(--platforma-ease-celebration) infinite;
}
@keyframes dc-ripple {
    0%   { transform: scale(0.8); opacity: 0.55; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* M10. Reduced-motion override — explicit safety net ──────────────
        Even with token-based duration fallback, kill keyframes that
        run regardless of duration (sweep, ripple, shimmer). */
@media (prefers-reduced-motion: reduce) {
    .dc-hero--active::after,
    .dc-hero--active .dc-hero__eyebrow-dot::after,
    .dc-chip.is-loading,
    .dc-mailto-modal,
    .dc-record__copy.is-copied svg {
        animation: none !important;
    }
    .dc-card,
    .dc-record,
    .dc-celebration-link::before {
        transition: none !important;
    }
    .dc-card:hover,
    .dc-record:hover {
        transform: none;
    }
}

/* ── 13. Plan-gate (locked variant — restraint, no celebration) ── */

.dc-locked-benefits {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
.dc-locked-benefits li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--platforma-text-on-dark-muted);
    font-size: var(--platforma-text-sm);
}
.dc-locked-benefits svg {
    color: var(--platforma-status-detected);
    flex-shrink: 0;
}
.dc-locked-current {
    margin: 0;
    font-size: var(--platforma-text-xs);
    color: var(--platforma-text-on-dark-subtle);
    padding-top: 1.25rem;
    border-top: 1px solid var(--platforma-dark-line-soft);
}