:root {
    --xlume-navy: #0b274c;
    --xlume-blue: #183f7d;
    --xlume-sky: #337fb4;
    --xlume-ink: #102c50;
    --xlume-muted: #60758e;
    --xlume-line: rgba(50, 126, 177, 0.25);
}

.xlume-branded-dpp {
    min-height: calc(100vh - 64px);
    height: auto;
    color: var(--xlume-ink);
    background: #f7fbff;
    font-family: Mulish, sans-serif;
}

.xlume-branded-dpp > dpp-background {
    top: 64px;
    height: calc(100vh - 64px);
    background:
        radial-gradient(circle at 90% 5%, rgba(51, 127, 180, 0.08), transparent 38%),
        radial-gradient(circle at 6% 88%, rgba(24, 63, 125, 0.05), transparent 36%),
        linear-gradient(145deg, #ffffff 0%, #f8fbfe 48%, #eef6fc 100%) !important;
}

.xlume-branded-dpp > dpp-header {
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 0;
    color: #fff;
    background: linear-gradient(105deg, var(--xlume-navy) 0%, #12366d 43%, var(--xlume-blue) 67%, var(--xlume-sky) 100%);
    box-shadow: 0 2px 10px rgba(8, 34, 70, 0.22);
}

.xlume-shared-header {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-sizing: border-box;
    padding: .5rem 2rem;
}

.xlume-shared-brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
}

.xlume-shared-mark { width: 48px; height: 48px; }
.xlume-shared-wordmark { width: 118px; height: auto; }

.xlume-shared-tagline {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: #fff;
    line-height: 1.08;
    white-space: nowrap;
}

.xlume-shared-tagline span { font-size: 1.25rem; font-weight: 750; }
.xlume-shared-tagline small { font-size: .78rem; font-weight: 600; opacity: .9; }

.xlume-branded-dpp dpp-card,
.xlume-branded-dpp dpp-main-menu {
    border: 1px solid rgba(255, 255, 255, .95);
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(234,244,251,.78));
    box-shadow: 0 10px 30px rgba(16,44,80,.09);
}

.xlume-branded-dpp dpp-card { border-radius: 1.25rem; }
.xlume-branded-dpp dpp-main-menu { border-radius: 2rem; }
.xlume-branded-dpp dpp-field-label { color: var(--xlume-muted); }
.xlume-branded-dpp dpp-field-value,
.xlume-branded-dpp dpp-card-title,
.xlume-branded-dpp dpp-main-title,
.xlume-branded-dpp dpp-main-subtitle,
.xlume-branded-dpp dpp-title { color: var(--xlume-ink); }

.xlume-branded-dpp dpp-title {
    display: block;
    padding-inline: .3em;
    overflow-wrap: anywhere;
}

.xlume-branded-dpp.theme-light dpp-tab-page-selected {
    color: #fff;
    background: linear-gradient(105deg, var(--xlume-blue), var(--xlume-sky));
    box-shadow: 0 5px 14px rgba(24,63,125,.22);
}

.xlume-branded-dpp.theme-light dpp-tab-page { color: var(--xlume-blue); }
.xlume-branded-dpp a { color: #236da3; }
.xlume-branded-dpp *,
.xlume-shared-header * { font-family: Mulish, sans-serif !important; }

/* The shared timeline used fixed pixel heights that were smaller than its
   wrapped desktop content. Let each event determine its own height and stretch
   the line segments to match, while retaining the existing mobile layout. */
@media (min-width: 601px) {
    .xlume-branded-dpp dpp-supplychainevents-list {
        width: 100%;
        display: block;
    }

    .xlume-branded-dpp dpp-supplychain-event-wrapper {
        width: 100%;
        min-height: 253px;
        height: auto;
        display: grid;
        grid-template-columns: 27px minmax(0, 1fr);
        align-items: stretch;
        gap: 1rem;
    }

    .xlume-branded-dpp dpp-supplychain-event-line-wrapper {
        width: 27px;
        height: auto;
        align-self: stretch;
        display: flex;
    }

    .xlume-branded-dpp dpp-supplychain-event-line-first-item-wrapper,
    .xlume-branded-dpp dpp-supplychain-event-line-last-item-wrapper,
    .xlume-branded-dpp dpp-supplychain-event-line-item-wrapper {
        width: 100%;
        height: auto;
        flex: 1;
        display: grid;
        grid-template-rows: minmax(0, 1fr) 24px minmax(0, 1fr);
        justify-items: center;
        align-items: stretch;
    }

    .xlume-branded-dpp dpp-supplychain-event-first-item-line-up,
    .xlume-branded-dpp dpp-supplychain-event-last-item-line-up,
    .xlume-branded-dpp dpp-supplychain-event-first-item-line-down,
    .xlume-branded-dpp dpp-supplychain-event-last-item-line-down,
    .xlume-branded-dpp dpp-supplychain-event-item-line-up,
    .xlume-branded-dpp dpp-supplychain-event-item-line-down {
        width: 2px;
        height: 100%;
        position: relative;
    }

    .xlume-branded-dpp dpp-supplychain-event-first-item-line-up > div,
    .xlume-branded-dpp dpp-supplychain-event-last-item-line-up > div,
    .xlume-branded-dpp dpp-supplychain-event-first-item-line-down > div,
    .xlume-branded-dpp dpp-supplychain-event-last-item-line-down > div,
    .xlume-branded-dpp dpp-supplychain-event-item-line-up > div,
    .xlume-branded-dpp dpp-supplychain-event-item-line-down > div {
        inset: 0;
        width: 2px;
        height: 100%;
    }

    .xlume-branded-dpp dpp-supplychain-event-data-wrapper {
        width: auto;
        min-width: 0;
        height: auto;
        padding: 1.5rem 0;
        display: block;
    }

    .xlume-branded-dpp dpp-supplychain-event-data-wrapper-inner {
        width: 100%;
        min-width: 0;
        display: flex;
    }

    .xlume-branded-dpp dpp-supplychain-event-data-title,
    .xlume-branded-dpp dpp-supplychain-event-data-item,
    .xlume-branded-dpp .eventDataItemTitle,
    .xlume-branded-dpp .eventDataItemValue {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 600px) {
    .xlume-branded-dpp > dpp-header,
    .xlume-shared-header { min-height: 58px; }
    .xlume-shared-header { gap: .55rem; padding: .45rem .65rem; }
    .xlume-shared-mark { width: 34px; height: 34px; }
    .xlume-shared-wordmark { width: clamp(76px, 24vw, 112px); }
    .xlume-shared-tagline {
        position: static;
        margin-left: auto;
        transform: none;
        text-align: right;
    }
    .xlume-shared-tagline span { font-size: clamp(.7rem, 3vw, .95rem); }
    .xlume-shared-tagline small { font-size: clamp(.55rem, 2.2vw, .7rem); }
}