/* ─── Products of a project (D-023) ──────────────────────────────────────────
   Loaded on its own after app.css, like every areas/*.css. Products reuse the
   project classes (prj-card, prj-key, prj-chips, prj-dl, prj-form…): a product
   reads like a project, only its badge colour comes from its type. What is
   here is the little a product has and a project does not.
   Only variables from vars.css / app.css — no hardcoded colours. */

/* "Part of <idea>" next to the type and status of a product. */
.prd-of {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-decoration: none;
}
.prd-of:hover,
.prd-of:focus-visible { text-decoration: underline; }

/* Settings page: the list of what a product of this type needs. The
   Credentials card above it (D-062) has its own stylesheet, vault.css. */
.prd-settings {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.prd-settings__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.prd-settings__icon {
    flex: 0 0 auto;
    margin-top: .125rem;
    color: var(--color-text-muted);
}

.prd-settings__text {
    flex: 1 1 auto;
    min-width: 0;
}

.prd-settings__title {
    margin: 0;
    font-weight: 600;
}

.prd-settings__desc {
    margin: .125rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Edit page: deleting a product is a soft delete, but it still deserves its
   own block at the bottom rather than a button next to "Save". */
.prd-danger__form { margin: var(--space-3) 0 0; }