/*
 * Marketplace-specific blocks (epic 0004). Everything the marketplace can express with the shared
 * component vocabulary — panels, actions, metrics, states, rankings tables, filter bars — uses it
 * directly; this sheet only adds the blocks that genuinely have no equivalent:
 *
 *   cdl-mkt__thread      two-party quote conversation (buyer vs seller must never look alike)
 *   cdl-mkt__trustcard   the registry record shown beside a quote — the marketplace differentiator
 *   cdl-mkt__status      RFQ lifecycle badge (draft / live / shortlisting / closed at a glance)
 *   cdl-mkt__flag        inline qualifier badges, incl. the above-budget warning
 *   cdl-mkt__quote       the quote figure beside a response
 *   cdl-mkt__form-grid   responsive form rows that collapse to one column on phones
 *
 * Every value is a var(--cdl-*) token so both brands (CDL violet / Biznopedia navy) render correctly
 * with no per-brand rules here.
 */

/* ---------------------------------------------------------------- layout helpers */

.cdl-mkt__stack { display: grid; gap: var(--cdl-space-4); }
.cdl-mkt__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cdl-space-2);
    align-items: center;
}
.cdl-mkt__row--between { justify-content: space-between; }
.cdl-mkt__spacer { flex: 1 1 auto; }

/* Form rows: single column by default, multi-column only when there is room. This is the fix for
   the hard 3-up grids that were unusable on a phone. */
.cdl-mkt__form-grid { display: grid; gap: var(--cdl-space-3); grid-template-columns: 1fr; }

@media (min-width: 48rem) {
    .cdl-mkt__form-grid--budget { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); }
    .cdl-mkt__form-grid--where { grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 1.2fr); }
    .cdl-mkt__form-grid--quote { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- status + flags */

.cdl-mkt__status,
.cdl-mkt__flag {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--cdl-border);
    border-radius: var(--cdl-radius-pill);
    background: var(--cdl-surface-subtle);
    color: var(--cdl-ink);
    font-size: var(--cdl-text-12);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Lifecycle colours: live is the only "good" state; closed recedes; review is informational. */
.cdl-mkt__status--live {
    background: var(--cdl-positive-tint);
    border-color: color-mix(in srgb, var(--cdl-positive) 40%, var(--cdl-border));
    color: var(--cdl-positive);
}

.cdl-mkt__status--review {
    background: var(--cdl-information-tint);
    border-color: color-mix(in srgb, var(--cdl-information) 38%, var(--cdl-border));
    color: var(--cdl-information);
}

.cdl-mkt__status--shortlisting {
    background: var(--cdl-brand-tint);
    border-color: color-mix(in srgb, var(--cdl-brand) 38%, var(--cdl-border));
    color: var(--cdl-brand-deep);
}

.cdl-mkt__status--draft { color: var(--cdl-muted); }

.cdl-mkt__status--closed {
    background: var(--cdl-surface-subtle);
    color: var(--cdl-muted);
}

/* The above-budget warning must be impossible to miss beside a quote figure. */
.cdl-mkt__flag--warning {
    background: var(--cdl-warning-tint);
    border-color: color-mix(in srgb, var(--cdl-warning) 42%, var(--cdl-border));
    color: var(--cdl-warning);
}

.cdl-mkt__flag--muted { color: var(--cdl-muted); }

.cdl-mkt__flag--verified {
    background: var(--cdl-positive-tint);
    border-color: color-mix(in srgb, var(--cdl-positive) 40%, var(--cdl-border));
    color: var(--cdl-positive);
}

/* ---------------------------------------------------------------- quote figure */

.cdl-mkt__quote {
    display: grid;
    gap: 0.15rem;
    justify-items: end;
    text-align: right;
}

.cdl-mkt__quote-value {
    font-family: var(--cdl-font-display);
    font-size: var(--cdl-text-20);
    font-variant-numeric: tabular-nums;
    line-height: var(--cdl-leading-tight);
}

.cdl-mkt__quote-type { color: var(--cdl-muted); font-size: var(--cdl-text-12); }

/* ---------------------------------------------------------------- registry trust card */

.cdl-mkt__trustcard {
    display: grid;
    gap: var(--cdl-space-2);
    padding: var(--cdl-space-4);
    background: var(--cdl-surface-subtle);
    border: 1px solid var(--cdl-border);
    border-left: 3px solid var(--cdl-brand);
    border-radius: var(--cdl-radius-control);
}

/* An unlinked responder is a neutral state, never a warning — absence of a registry link is not
   evidence against a business. */
.cdl-mkt__trustcard--unlinked {
    border-left-color: var(--cdl-border-strong);
    background: var(--cdl-surface);
}

.cdl-mkt__trustcard-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cdl-space-2);
    align-items: baseline;
    justify-content: space-between;
}

.cdl-mkt__trustcard-name {
    margin: 0;
    font-size: var(--cdl-text-16);
    font-weight: 600;
}

.cdl-mkt__trustcard-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--cdl-muted);
    font-size: var(--cdl-text-14);
}

.cdl-mkt__trustcard-facts li { display: inline-flex; gap: 0.3rem; align-items: center; }
.cdl-mkt__trustcard-note { margin: 0; color: var(--cdl-muted); font-size: var(--cdl-text-12); }

/* ---------------------------------------------------------------- conversation thread */

.cdl-mkt__thread {
    display: grid;
    gap: var(--cdl-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cdl-mkt__msg {
    display: grid;
    gap: 0.25rem;
    max-width: min(100%, 34rem);
    padding: var(--cdl-space-3) var(--cdl-space-4);
    border: 1px solid var(--cdl-border);
    border-radius: var(--cdl-radius-panel);
    font-size: var(--cdl-text-14);
}

/* Sides are distinguished by alignment, fill AND corner — not colour alone. */
.cdl-mkt__msg--mine {
    justify-self: end;
    background: var(--cdl-brand-tint);
    border-color: color-mix(in srgb, var(--cdl-brand) 32%, var(--cdl-border));
    border-bottom-right-radius: var(--cdl-radius-control);
}

.cdl-mkt__msg--theirs {
    justify-self: start;
    background: var(--cdl-surface-subtle);
    border-bottom-left-radius: var(--cdl-radius-control);
}

.cdl-mkt__msg-meta {
    color: var(--cdl-muted);
    font-size: var(--cdl-text-12);
    letter-spacing: 0.03em;
}

.cdl-mkt__msg-body { margin: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- revealed contact */

.cdl-mkt__contact {
    display: grid;
    gap: var(--cdl-space-1);
    padding: var(--cdl-space-4);
    background: var(--cdl-positive-tint);
    border: 1px solid color-mix(in srgb, var(--cdl-positive) 36%, var(--cdl-border));
    border-radius: var(--cdl-radius-control);
}

.cdl-mkt__contact dt {
    color: var(--cdl-muted);
    font-size: var(--cdl-text-12);
    font-weight: 700;
}

.cdl-mkt__contact dd { margin: 0 0 var(--cdl-space-2); overflow-wrap: anywhere; }
.cdl-mkt__contact dd:last-of-type { margin-bottom: 0; }

/* ---------------------------------------------------------------- responsive tables
 * The marketplace tables carry 5-6 columns, which no phone can show. `.cdl-rankings__table-wrap`
 * already gives horizontal scroll; adding this modifier collapses each row into a labelled card
 * instead (the same pattern cdl-search / cdl-reports use), so nothing needs sideways scrolling.
 * Requires every <td> to carry data-label="…".
 */

@media (max-width: 47.99rem) {
    /* box-sizing matters here: a `tr` given width:100% AND padding would measure 100% + 32px and
       push the whole page sideways. Block children fill their container anyway, so width is left
       to the default and border-box is stated explicitly rather than assumed. */
    .cdl-mkt__table,
    .cdl-mkt__table tbody,
    .cdl-mkt__table tr,
    .cdl-mkt__table td {
        display: block;
        box-sizing: border-box;
        max-width: 100%;
    }

    /* The shared table keeps a 38rem min-width so it can scroll sideways; once stacked into cards
       that min-width would clip content inside the wrapper, so release it.
       The wrapper itself must also stop being a flex scroller: as a flex container it reserves
       ~44px of phantom scrollable width even though the stacked table measures exactly its client
       width, which reads as clipped content. A stacked table needs no sideways scrolling at all,
       so on mobile the wrapper becomes an ordinary block. */
    .cdl-mkt__table { min-width: 0; }

    .cdl-rankings__table-wrap:has(.cdl-mkt__table) {
        display: block;
        overflow-x: visible;
    }

    /* The visually hidden caption still drives the table's min-content width with its full sentence
       (~380px), which the flex wrapper then refuses to shrink below. Removed on mobile rather than
       hidden: the surrounding <section> carries the same information in its aria-label, and every
       cell renders its own label, so nothing is lost to assistive tech. */
    .cdl-mkt__table caption { display: none; }

    /* The header row is removed outright rather than visually hidden: an off-screen `thead` still
       lays out its uppercase nowrap cells and drags the page ~70px sideways. No information is
       lost — every cell renders its own label from data-label (below), and the table keeps its
       <caption> for assistive tech. */
    .cdl-mkt__table thead { display: none; }

    .cdl-mkt__table tr {
        margin-bottom: var(--cdl-space-3);
        padding: var(--cdl-space-4);
        background: var(--cdl-surface);
        border: 1px solid var(--cdl-border);
        border-radius: var(--cdl-radius-control);
    }

    .cdl-mkt__table tr:last-child { margin-bottom: 0; }

    .cdl-mkt__table td {
        display: grid;
        grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
        gap: var(--cdl-space-3);
        padding: var(--cdl-space-2) 0;
        border: 0;
        /* Long titles must wrap inside the value column rather than run under the card edge. */
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .cdl-mkt__table td > * { min-width: 0; }

    .cdl-mkt__table td::before {
        content: attr(data-label);
        color: var(--cdl-muted);
        font-size: var(--cdl-text-12);
        font-weight: 700;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    /* An actions cell with nothing in it must not leave an orphaned label. */
    .cdl-mkt__table td:empty { display: none; }
}

/* ---------------------------------------------------------------- quote cards (public hubs) */

.cdl-mkt__cards { display: grid; gap: var(--cdl-space-2); }

.cdl-mkt__card {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cdl-space-2) var(--cdl-space-4);
    align-items: baseline;
    padding: var(--cdl-space-3) var(--cdl-space-4);
    background: var(--cdl-surface);
    border: 1px solid var(--cdl-border);
    border-radius: var(--cdl-radius-control);
}

.cdl-mkt__card-when { color: var(--cdl-muted); font-size: var(--cdl-text-12); margin-left: auto; }