/* DFY Projects — layout only. */

/* ---- Hub grid ---- */
.dslc-dfy-hub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
    gap: var(--dslc-sp-5);
    justify-content: start;
}
.dslc-dfy-hub .dslc-card {
    display: flex;
    flex-direction: column;
    gap: var(--dslc-sp-4);
    text-align: left;
    min-height: 220px;
}
.dslc-dfy-hub__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--dslc-sp-3);
}
.dslc-dfy-hub__mark {
    flex: 0 0 auto;
}
.dslc-dfy-hub__body {
    display: flex;
    flex-direction: column;
    gap: var(--dslc-sp-2);
    min-width: 0;
}

/* Letter placeholder for service types without an icon. */
.dslc-dfy-hub__initial {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dslc-radius-card);
    background: var(--dslc-orange-soft);
    color: var(--dslc-orange-hover);
    font-family: var(--dslc-font);
    font-size: var(--dslc-fs-h2);
    font-weight: var(--dslc-fw-display);
    letter-spacing: -0.02em;
}
.dslc-dfy-hub .dslc-card[data-dfy-state="locked"] .dslc-dfy-hub__initial {
    background: var(--dslc-bg-surface-alt);
    color: var(--dslc-text-muted);
}
.dslc-dfy-hub__icon { width: 64px; height: 64px; object-fit: contain; display: block; }
.dslc-dfy-hub__title {
    font-size: var(--dslc-fs-lg);
    font-weight: var(--dslc-fw-heading);
    margin: 0;
    color: var(--dslc-text-primary);
}
.dslc-dfy-hub__meta {
    font-size: var(--dslc-fs-xs);
    color: var(--dslc-text-muted);
    margin: 0;
}
.dslc-dfy-hub__action { margin-top: auto; }
.dslc-dfy-hub__progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dslc-sp-3);
    margin: 0;
    color: var(--dslc-text-muted);
    font-size: var(--dslc-fs-xs);
}
.dslc-dfy-hub__progress-meta strong {
    color: var(--dslc-text-primary);
    font-feature-settings: var(--dslc-num-font-feature);
}

/* ---- Intake form stepper ---- */
.dslc-dfy-form {
    max-width: 760px;
    margin: 0 auto;
}
.dslc-dfy-form__header {
    display: flex;
    flex-direction: column;
    gap: var(--dslc-sp-2);
    margin-bottom: var(--dslc-sp-6);
}
.dslc-dfy-form__header .dslc-h2 {
    margin-bottom: 0;
}
.dslc-dfy-form__intro {
    margin: calc(-1 * var(--dslc-sp-2)) 0 var(--dslc-sp-5);
    color: var(--dslc-text-secondary);
    font-size: var(--dslc-fs-sm);
}
.dslc-dfy-field-help {
    color: var(--dslc-text-secondary);
    font-size: var(--dslc-fs-sm);
    line-height: var(--dslc-lh-body);
}
.dslc-dfy-field-help p {
    margin: 0 0 var(--dslc-sp-2);
}
.dslc-dfy-field-help > :last-child {
    margin-bottom: 0;
}

.dslc-dfy-palette-picker {
    display: flex;
    flex-direction: column;
    gap: var(--dslc-sp-5);
}
.dslc-dfy-palette-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dslc-sp-4);
    padding: var(--dslc-sp-4);
    border: 1px solid var(--dslc-border);
    border-radius: var(--dslc-radius-card);
    background: var(--dslc-bg-surface);
}
.dslc-dfy-palette-preview__body {
    display: flex;
    flex-direction: column;
    gap: var(--dslc-sp-2);
    min-width: 0;
}
.dslc-dfy-palette-preview__eyebrow {
    color: var(--dslc-text-muted);
    font-size: var(--dslc-fs-xs);
    font-weight: var(--dslc-fw-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.dslc-dfy-palette-preview__name {
    color: var(--dslc-text-primary);
    font-size: var(--dslc-fs-lg);
}
.dslc-dfy-palette-preview__swatches,
.dslc-dfy-palette-recommendation__swatch {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid var(--dslc-border);
    border-radius: var(--dslc-radius-pill);
    background: var(--dslc-bg-surface);
}
.dslc-dfy-palette-preview__swatches {
    width: 72px;
    height: 28px;
}
.dslc-dfy-palette-preview__store {
    display: grid;
    gap: var(--dslc-sp-2);
    width: min(180px, 35%);
    padding: var(--dslc-sp-3);
    border: 1px solid var(--dslc-border);
    border-radius: var(--dslc-radius-control);
    background: var(--dslc-bg-surface-alt);
}
.dslc-dfy-palette-preview__bar,
.dslc-dfy-palette-preview__hero,
.dslc-dfy-palette-preview__button {
    display: block;
    border-radius: var(--dslc-radius-pill);
}
.dslc-dfy-palette-preview__bar { height: 10px; }
.dslc-dfy-palette-preview__hero { height: 34px; background: var(--dslc-bg-surface); }
.dslc-dfy-palette-preview__button { width: 58px; height: 14px; }
.dslc-dfy-palette-intents {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dslc-sp-2);
}
.dslc-dfy-palette-intent,
.dslc-dfy-palette-category,
.dslc-dfy-palette-recommendation {
    font-family: inherit;
    cursor: pointer;
}
.dslc-dfy-palette-intent {
    padding: var(--dslc-sp-2) var(--dslc-sp-3);
    border: 1px solid var(--dslc-border-strong);
    border-radius: var(--dslc-radius-pill);
    background: var(--dslc-bg-surface);
    color: var(--dslc-text-secondary);
    font-size: var(--dslc-fs-xs);
    font-weight: var(--dslc-fw-heading);
}
.dslc-dfy-palette-intent--active {
    border-color: var(--dslc-text-primary);
    color: var(--dslc-text-primary);
}
.dslc-dfy-palette-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--dslc-sp-3);
}
.dslc-dfy-palette-category {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dslc-sp-2);
    padding: var(--dslc-sp-4);
    border: 1px solid var(--dslc-border);
    border-radius: var(--dslc-radius-card);
    background: var(--dslc-bg-surface);
    color: var(--dslc-text-primary);
    text-align: left;
}
.dslc-dfy-palette-category--active,
.dslc-dfy-palette-category[aria-selected="true"] {
    border-color: var(--dslc-border-focus);
    box-shadow: var(--dslc-ring);
}
.dslc-dfy-palette-category__title {
    font-weight: var(--dslc-fw-heading);
}
.dslc-dfy-palette-category__meta,
.dslc-dfy-palette-category__count {
    color: var(--dslc-text-secondary);
    font-size: var(--dslc-fs-xs);
}
.dslc-dfy-palette-category__chips {
    display: flex;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--dslc-radius-pill);
}
.dslc-dfy-palette-category__chips span {
    width: 20px;
    height: 16px;
}
.dslc-dfy-palette-recommended {
    display: flex;
    flex-direction: column;
    gap: var(--dslc-sp-3);
}
.dslc-dfy-palette-recommended__title {
    margin: 0;
    color: var(--dslc-text-muted);
    font-size: var(--dslc-fs-xs);
    font-weight: var(--dslc-fw-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.dslc-dfy-palette-recommended__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--dslc-sp-3);
}
.dslc-dfy-palette-recommendation {
    display: flex;
    align-items: center;
    gap: var(--dslc-sp-3);
    padding: var(--dslc-sp-3);
    border: 1px solid var(--dslc-border);
    border-radius: var(--dslc-radius-control);
    background: var(--dslc-bg-surface);
    color: var(--dslc-text-primary);
    text-align: left;
}
.dslc-dfy-palette-recommendation--selected {
    border-color: var(--dslc-border-focus);
    box-shadow: var(--dslc-ring);
}
.dslc-dfy-palette-recommendation__swatch {
    width: 44px;
    height: 28px;
    flex: 0 0 44px;
}
.dslc-dfy-palette-recommendation__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dslc-dfy-palette-recommendation__body span {
    color: var(--dslc-text-secondary);
    font-size: var(--dslc-fs-xs);
}
.dslc-dfy-palette-groups {
    display: flex;
    flex-direction: column;
    gap: var(--dslc-sp-5);
}
.dslc-dfy-palette-group {
    display: flex;
    flex-direction: column;
    gap: var(--dslc-sp-3);
}
.dslc-dfy-palette-group__title {
    margin: 0;
    color: var(--dslc-text-muted);
    font-size: var(--dslc-fs-xs);
    font-weight: var(--dslc-fw-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.dslc-dfy-palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--dslc-sp-3);
}
.dslc-dfy-palette-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--dslc-sp-2);
    padding: var(--dslc-sp-3);
    border: 1px solid var(--dslc-border);
    border-radius: var(--dslc-radius-card);
    background: var(--dslc-bg-surface);
    cursor: pointer;
    transition: border-color var(--dslc-transition-fast), box-shadow var(--dslc-transition-fast);
}
.dslc-dfy-palette-card:hover {
    border-color: var(--dslc-border-strong);
}
.dslc-dfy-palette-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.dslc-dfy-palette-card:has(input:checked) {
    border-color: var(--dslc-orange);
    box-shadow: var(--dslc-ring);
}
.dslc-dfy-palette-card--selected {
    border-color: var(--dslc-orange);
    box-shadow: var(--dslc-ring);
}
.dslc-dfy-palette-card__swatch {
    display: grid;
    grid-template-columns: 2fr 1fr;
    overflow: hidden;
    min-height: var(--dslc-sp-10);
    border-radius: var(--dslc-radius-control);
    border: 1px solid var(--dslc-border);
}
.dslc-dfy-palette-card__name {
    color: var(--dslc-text-primary);
    font-size: var(--dslc-fs-sm);
    font-weight: var(--dslc-fw-heading);
}
.dslc-dfy-palette-card__badge {
    align-self: flex-start;
    padding: 2px var(--dslc-sp-2);
    border-radius: var(--dslc-radius-pill);
    background: var(--dslc-bg-surface-alt);
    color: var(--dslc-text-secondary);
    font-size: var(--dslc-fs-xs);
    font-weight: var(--dslc-fw-heading);
}
.dslc-dfy-palette-card__labels {
    display: grid;
    grid-template-columns: 2fr 1fr;
    color: var(--dslc-text-muted);
    font-size: var(--dslc-fs-xs);
}
.dslc-dfy-palette-card__preview {
    display: flex;
    align-items: center;
    gap: var(--dslc-sp-2);
}
.dslc-dfy-palette-card__preview-line {
    flex: 1;
    height: var(--dslc-sp-2);
    background: var(--dslc-bg-surface-alt);
    border-radius: var(--dslc-radius-pill);
}
.dslc-dfy-palette-card__preview-button {
    width: var(--dslc-sp-8);
    height: var(--dslc-sp-3);
    border-radius: var(--dslc-radius-pill);
}

.dslc-dfy-form__steps {
    display: flex;
    align-items: center;
    gap: var(--dslc-sp-2);
    margin: var(--dslc-sp-4) 0 var(--dslc-sp-6);
}
.dslc-dfy-form__step {
    display: flex;
    align-items: center;
    gap: var(--dslc-sp-2);
    color: var(--dslc-text-muted);
    font-size: var(--dslc-fs-xs);
    font-weight: var(--dslc-fw-medium);
}
.dslc-dfy-form__step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dslc-bg-surface-alt);
    border: 1px solid var(--dslc-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--dslc-fw-heading);
    color: var(--dslc-text-muted);
    transition: background var(--dslc-transition-fast), border-color var(--dslc-transition-fast), color var(--dslc-transition-fast);
    font-feature-settings: var(--dslc-num-font-feature);
}
.dslc-dfy-form__step--current .dslc-dfy-form__step-num {
    background: var(--dslc-orange);
    border-color: var(--dslc-orange);
    color: var(--dslc-text-inverse);
}
.dslc-dfy-form__step--current { color: var(--dslc-text-primary); }
.dslc-dfy-form__step--done .dslc-dfy-form__step-num {
    background: var(--dslc-success);
    border-color: var(--dslc-success);
    color: var(--dslc-text-inverse);
}
.dslc-dfy-form__step--done .dslc-dfy-form__step-num > span { display: none; }
.dslc-dfy-form__step-connector {
    flex: 0 0 24px;
    height: 2px;
    background: var(--dslc-border);
}
.dslc-dfy-form__step-connector--done { background: var(--dslc-success); }

.dslc-dfy-form__panel { display: none; animation: dslc-fade-in var(--dslc-transition); }
.dslc-dfy-form__panel--active { display: block; }

.dslc-dfy-form__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--dslc-sp-3);
    margin-top: var(--dslc-sp-6);
    padding-top: var(--dslc-sp-4);
    border-top: 1px solid var(--dslc-border);
}
.dslc-dfy-form__status {
    margin-top: var(--dslc-sp-3);
    font-size: var(--dslc-fs-sm);
    color: var(--dslc-text-secondary);
}
.dslc-dfy-form__status--error   { color: var(--dslc-error); }
.dslc-dfy-form__status--success { color: var(--dslc-success); }

@media (max-width: 640px) {
    .dslc-dfy-hub {
        grid-template-columns: 1fr;
    }
    .dslc-dfy-hub__head {
        flex-direction: column;
    }
    .dslc-dfy-form__steps {
        align-items: flex-start;
        overflow-x: auto;
        padding-bottom: var(--dslc-sp-2);
    }
    .dslc-dfy-form__nav {
        flex-wrap: wrap;
    }
    .dslc-dfy-form__step-indicator {
        order: 3;
        width: 100%;
        text-align: center;
    }
    .dslc-dfy-palette-preview {
        align-items: flex-start;
        flex-direction: column;
    }
    .dslc-dfy-palette-preview__store {
        width: 100%;
    }
}

/* ---- Member status list ---- */
.dslc-dfy-status { display: flex; flex-direction: column; gap: var(--dslc-sp-4); }
.dslc-dfy-status__project {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--dslc-sp-4);
    align-items: center;
}
.dslc-dfy-status__body { display: flex; flex-direction: column; gap: var(--dslc-sp-2); min-width: 0; }

/* ---- Admin project detail (submission, files, notes, timeline) ---- */
.dslc-dfy-detail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dslc-sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--dslc-sp-4);
}
.dslc-dfy-detail__title {
    display: flex;
    align-items: center;
    gap: var(--dslc-sp-3);
    margin: 0;
}

.dslc-dfy-submission {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--dslc-sp-3);
}
.dslc-dfy-submission__field {
    padding: var(--dslc-sp-3) var(--dslc-sp-4);
    background: var(--dslc-bg-surface-alt);
    border-radius: var(--dslc-radius-control);
}
.dslc-dfy-submission__label {
    font-size: var(--dslc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dslc-text-muted);
    font-weight: var(--dslc-fw-heading);
    margin-bottom: var(--dslc-sp-1);
}
.dslc-dfy-submission__value {
    font-size: var(--dslc-fs-sm);
    color: var(--dslc-text-primary);
    word-wrap: break-word;
}
.dslc-dfy-submission-palette {
    display: flex;
    align-items: center;
    gap: var(--dslc-sp-3);
}
.dslc-dfy-submission-palette__swatch {
    display: grid;
    grid-template-columns: 2fr 1fr;
    overflow: hidden;
    width: var(--dslc-sp-12);
    height: var(--dslc-sp-6);
    border-radius: var(--dslc-radius-control);
    border: 1px solid var(--dslc-border);
    flex: 0 0 auto;
}

.dslc-dfy-files { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--dslc-sp-2); }
.dslc-dfy-files li {
    display: flex;
    align-items: center;
    gap: var(--dslc-sp-3);
    padding: var(--dslc-sp-3) var(--dslc-sp-4);
    background: var(--dslc-bg-surface-alt);
    border-radius: var(--dslc-radius-control);
}
.dslc-dfy-files__name { flex: 1; font-weight: var(--dslc-fw-medium); }

.dslc-dfy-notes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--dslc-sp-3); }
.dslc-dfy-notes li {
    padding: var(--dslc-sp-4);
    background: var(--dslc-bg-surface-alt);
    border-radius: var(--dslc-radius-card);
    border-left: 3px solid var(--dslc-orange);
}
.dslc-dfy-notes__meta {
    display: flex;
    gap: var(--dslc-sp-2);
    align-items: center;
    font-size: var(--dslc-fs-xs);
    color: var(--dslc-text-muted);
    margin-bottom: var(--dslc-sp-2);
}
.dslc-dfy-notes__author { font-weight: var(--dslc-fw-heading); color: var(--dslc-text-primary); }

.dslc-dfy-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.dslc-dfy-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 11px;
    width: 2px;
    background: var(--dslc-border);
}
.dslc-dfy-timeline li {
    position: relative;
    padding: 0 0 var(--dslc-sp-4) var(--dslc-sp-8);
    font-size: var(--dslc-fs-sm);
}
.dslc-dfy-timeline li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--dslc-orange);
    border: 2px solid var(--dslc-bg-surface);
}
.dslc-dfy-timeline__when {
    font-size: var(--dslc-fs-xs);
    color: var(--dslc-text-muted);
}