@layer components {
    .sl-document-details {
        @apply space-y-6;
    }

    .sl-document-details__hero {
        @apply grid gap-5 rounded-[24px] border border-[#dfe7f6] bg-[linear-gradient(135deg,rgba(77,128,208,0.12),rgba(255,255,255,0.92)_62%)] p-5 md:p-7 xl:grid-cols-[minmax(0,1fr)_280px];
    }

    .sl-document-details__hero-copy {
        @apply min-w-0;
    }

    .sl-document-details__eyebrow {
        @apply mb-2 text-[12px] font-extrabold uppercase tracking-[0.22em] text-[#4d80d0];
    }

    .sl-document-details__hero h1 {
        @apply m-0 text-[30px] font-black leading-[1.08] text-[#1f2c46] md:text-[40px];
    }

    .sl-document-details__lede {
        @apply mt-3 flex flex-wrap items-center gap-2 text-[14px] font-medium text-[#69758d];
    }

    .sl-document-details__hero-aside {
        @apply flex flex-col justify-between gap-4 rounded-[20px] border border-[rgba(255,255,255,0.8)] bg-white/80 p-4;
        box-shadow: 0 18px 34px rgba(83, 100, 136, 0.08);
    }

    .sl-document-details__badge-stack {
        @apply flex flex-wrap gap-2;
    }

    .sl-document-details__badge {
        @apply inline-flex items-center rounded-full px-3 py-1 text-[12px] font-bold;
    }

    .sl-document-details__badge.is-neutral {
        @apply bg-[#edf3ff] text-[#426daf];
    }

    .sl-document-details__badge.is-approved {
        @apply bg-[#e4f7eb] text-[#1f8a4d];
    }

    .sl-document-details__badge.is-progress {
        @apply bg-[#edf3ff] text-[#3569c9];
    }

    .sl-document-details__badge.is-rejected {
        @apply bg-[#fdeaea] text-[#b54545];
    }

    .sl-document-details__summary,
    .sl-document-details__summary-static {
        @apply mt-5 max-w-[780px] rounded-[18px] border border-[rgba(77,128,208,0.12)] bg-white/75 px-4 py-4 text-[15px] leading-7 text-[#42506a];
    }

    .sl-document-details__summary summary {
        @apply list-none cursor-pointer;
    }

    .sl-document-details__summary summary::-webkit-details-marker {
        display: none;
    }

    .sl-document-details__summary-toggle {
        @apply mt-3 inline-flex text-[13px] font-bold text-[#4d80d0];
    }

    .sl-document-details__summary-toggle .is-expanded {
        display: none;
    }

    .sl-document-details__summary[open] .sl-document-details__summary-toggle .is-collapsed {
        display: none;
    }

    .sl-document-details__summary[open] .sl-document-details__summary-toggle .is-expanded {
        display: inline;
    }

    .sl-document-details__summary-content {
        @apply mt-4 border-t border-[#e8eef8] pt-4;
    }

    .sl-document-details__metrics {
        @apply grid gap-3 md:grid-cols-2 xl:grid-cols-4;
    }

    .sl-document-metric {
        @apply rounded-[18px] border border-[#e7edf8] bg-white px-4 py-4;
        box-shadow: 0 12px 28px rgba(92, 111, 149, 0.07);
    }

    .sl-document-metric span {
        @apply block text-[12px] font-bold uppercase tracking-[0.16em] text-[#7a86a1];
    }

    .sl-document-metric strong {
        @apply mt-3 block text-[18px] font-extrabold leading-6 text-[#24324b];
    }

    .sl-document-details__grid {
        @apply grid gap-6 xl:grid-cols-[1.1fr_0.9fr];
    }

    .sl-document-details__grid.is-single {
        @apply xl:grid-cols-1;
    }

    .sl-document-details__grid.is-secondary {
        @apply xl:grid-cols-[1.05fr_0.95fr];
    }

    .sl-document-details__grid.is-secondary.is-single {
        @apply xl:grid-cols-1;
    }

    .sl-document-card {
        @apply h-full;
    }

    .sl-document-card__content {
        @apply space-y-6;
    }

    .sl-document-card__section {
        @apply space-y-3;
    }

    .sl-document-card__label {
        @apply block text-[12px] font-extrabold uppercase tracking-[0.16em] text-[#8190aa];
    }

    .sl-document-card__section p {
        @apply m-0 text-[15px] leading-7 text-[#44526b];
        overflow-wrap: anywhere;
    }

    .sl-document-card__details {
        @apply rounded-[16px] border border-[#e6edf8] bg-[#fcfdff] px-4 py-3;
    }

    .sl-document-card__details.is-compact {
        @apply mt-1 border-0 bg-transparent px-0 py-0;
    }

    .sl-document-card__details-summary {
        @apply list-none cursor-pointer text-[15px] leading-7 text-[#44526b];
    }

    .sl-document-card__details-summary::-webkit-details-marker {
        display: none;
    }

    .sl-document-card__details-toggle {
        @apply ml-2 inline-flex items-center rounded-full border border-[#d7e4fb] bg-[#eef4ff] px-3 py-1 text-[12px] font-bold text-[#4d80d0];
        letter-spacing: normal;
        vertical-align: middle;
    }

    .sl-document-card__details-toggle .is-expanded {
        display: none;
    }

    .sl-document-card__details[open] .sl-document-card__details-toggle .is-collapsed {
        display: none;
    }

    .sl-document-card__details[open] .sl-document-card__details-toggle .is-expanded {
        display: inline;
    }

    .sl-document-card__details-content {
        @apply mt-3 border-t border-[#e7edf8] pt-3 text-[15px] leading-7 text-[#44526b];
    }

    .sl-document-card__details.is-compact .sl-document-card__details-summary {
        @apply flex flex-col items-start gap-2 text-[14px] leading-6 text-[#6c7892];
    }

    .sl-document-card__details.is-compact .sl-document-card__details-toggle {
        @apply ml-0;
    }

    .sl-document-card__details.is-compact .sl-document-card__details-content {
        @apply mt-2 border-t-0 pt-0 text-[14px] leading-6 text-[#6c7892];
    }

    .sl-document-card__empty {
        @apply m-0 text-[14px] font-medium text-[#7f8aa2];
    }

    .sl-document-details__chips {
        @apply flex flex-wrap gap-2;
    }

    .sl-document-details__chip {
        @apply inline-flex items-center rounded-full bg-[#eef4ff] px-3 py-1.5 text-[13px] font-semibold text-[#3f68a8];
    }

    .sl-document-details__chip.is-soft {
        @apply bg-[#f5f7fb] text-[#5d6880];
    }

    .sl-document-files,
    .sl-document-meetings {
        @apply space-y-3;
    }

    .sl-document-file,
    .sl-document-meeting {
        @apply flex flex-col gap-4 rounded-[18px] border border-[#e5ecf8] bg-[#fbfcff] p-4;
    }

    .sl-document-file__icon {
        @apply flex h-12 w-12 items-center justify-center rounded-[16px] bg-[#eef4ff] text-[#4d80d0];
    }

    .sl-document-file__icon.is-primary {
        @apply bg-[#4d80d0] text-white;
    }

    .sl-document-file__icon svg {
        @apply h-6 w-6;
    }

    .sl-document-file {
        @apply md:grid md:grid-cols-[48px_minmax(0,1fr)_auto] md:items-center;
    }

    .sl-document-meeting {
        @apply block;
    }

    .sl-document-file__body,
    .sl-document-meeting__content {
        @apply min-w-0;
    }

    .sl-document-meeting__actions {
        @apply flex flex-wrap items-center gap-2 w-full pt-3;
        min-width: 0;
    }

    .sl-document-meeting__actions .sl-inline-action {
        @apply px-4 text-center;
        min-width: 136px;
        max-width: 100%;
        white-space: nowrap;
    }

    .sl-document-file__body strong,
    .sl-document-meeting__content strong {
        @apply block text-[16px] font-extrabold text-[#253550];
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .sl-document-file__body p,
    .sl-document-meeting__content p {
        @apply mt-1 mb-0 text-[14px] text-[#6c7892];
        overflow-wrap: anywhere;
    }

    .sl-document-file__body span,
    .sl-document-meeting__date {
        @apply mt-2 block text-[12px] font-semibold uppercase tracking-[0.14em] text-[#97a3bb];
        overflow-wrap: anywhere;
    }

    .sl-document-file .sl-inline-action {
        @apply shrink-0 self-start;
        min-width: 0;
        max-width: 100%;
    }

    .sl-document-timeline {
        @apply relative space-y-4;
    }

    .sl-document-timeline__item {
        @apply relative grid gap-3 pl-8;
    }

    .sl-document-timeline__item::before {
        content: "";
        position: absolute;
        left: 11px;
        top: 28px;
        bottom: -20px;
        width: 2px;
        background: linear-gradient(180deg, rgba(77, 128, 208, 0.22), rgba(77, 128, 208, 0));
    }

    .sl-document-timeline__item:last-child::before {
        display: none;
    }

    .sl-document-timeline__marker {
        @apply absolute left-0 top-1.5 h-6 w-6 rounded-full border-[5px] border-white bg-[#4d80d0];
        box-shadow: 0 0 0 1px rgba(77, 128, 208, 0.24);
    }

    .sl-document-timeline__body {
        @apply rounded-[18px] border border-[#e7edf8] bg-[#fbfcff] p-4;
    }

    .sl-document-timeline__topline {
        @apply flex flex-wrap items-center justify-between gap-3;
    }

    .sl-document-timeline__topline strong {
        @apply text-[16px] font-extrabold text-[#24324b];
    }

    .sl-document-timeline__topline span {
        @apply text-[12px] font-bold uppercase tracking-[0.12em] text-[#8a96ad];
    }

    .sl-document-timeline__body p {
        @apply mb-0 mt-3 text-[14px] font-semibold text-[#4f5f7c];
        overflow-wrap: anywhere;
    }

    .sl-document-timeline__body small {
        @apply mt-2 block text-[13px] font-semibold text-[#7f8aa2];
    }

    .sl-document-timeline__note {
        @apply mt-3 rounded-[14px] bg-white px-3 py-3 text-[14px] leading-6 text-[#55627a];
        overflow-wrap: anywhere;
    }

    @media (max-width: 767px) {
        .sl-document-details {
            @apply space-y-5;
        }

        .sl-document-details__hero {
            @apply rounded-[20px] p-4;
        }

        .sl-document-details__hero h1 {
            font-size: 28px;
        }

        .sl-document-details__summary,
        .sl-document-details__summary-static {
            @apply mt-4 px-3 py-3 text-[14px] leading-6;
        }

        .sl-document-metric strong {
            @apply text-[16px] leading-5;
        }

        .sl-document-file,
        .sl-document-meeting {
            @apply gap-3 p-3;
        }

        .sl-document-meeting__actions {
            @apply flex-col items-stretch pt-2;
        }

        .sl-document-meeting__actions .sl-inline-action {
            @apply w-full;
            min-width: 0;
            white-space: normal;
        }

        .sl-document-file__icon {
            @apply h-11 w-11 rounded-[14px];
        }

        .sl-document-file__body strong,
        .sl-document-meeting strong,
        .sl-document-timeline__topline strong {
            @apply text-[15px];
        }

        .sl-document-card__details {
            @apply px-3 py-3;
        }

        .sl-document-card__details-summary,
        .sl-document-card__details-content,
        .sl-document-timeline__body p,
        .sl-document-timeline__note {
            @apply text-[14px] leading-6;
        }

        .sl-document-timeline__item {
            @apply pl-7;
        }

        .sl-document-timeline__marker {
            @apply h-5 w-5 border-[4px];
        }

        .sl-document-timeline__item::before {
            left: 9px;
        }
    }
}