/* Marketplace (web/templates/{public,app,admin}/market_*.html). */

/* Search: filters beside results on wide screens, stacked on narrow ones. */
.market-layout { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 860px) { .market-layout { grid-template-columns: 1fr; } }
.market-filters .field:last-of-type { margin-bottom: var(--sp-4); }
.market-results { min-width: 0; }

.market-grid { align-items: stretch; }
.market-result { display: flex; flex-direction: column; gap: var(--sp-2); }
.market-result > .card { flex: 1; }
.market-card-actions { justify-content: space-between; align-items: center; }
.market-card-actions form { margin: 0; }
.market-card-actions .checkline { margin: 0; }

.market-interpretation a { font-weight: 600; }
.market-save-search summary { cursor: pointer; font-weight: 600; }

/* Sponsored results sit in their own tinted band, so paid placement is never
   mistaken for an organic result even before the label is read. */
.market-sponsored { background: var(--gold-100); border: 1px dashed var(--gold-600); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-5); }

/* Profile. */
.market-profile-head .row-top { gap: var(--sp-4); }
.market-avatar { width: 72px; height: 72px; font-size: 1.4rem; flex: none; }
.market-profile-grid { display: grid; grid-template-columns: 1fr minmax(260px, 320px); gap: var(--sp-6); align-items: start; }
@media (max-width: 860px) { .market-profile-grid { grid-template-columns: 1fr; } }
.market-quote { margin: 0; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--teal-700); background: var(--surface-sunken); border-radius: var(--radius-sm); }
.market-quote p { margin-top: 0; }

/* Compare: facts only, so every column gets the same width and no cell is
   styled as better than another. */
.market-compare { table-layout: fixed; width: 100%; }
.market-compare th[scope="row"] { width: 22%; }
.market-compare td { vertical-align: top; overflow-wrap: anywhere; }

/* Moderation. */
.market-recommendation { border-left: 4px solid var(--gold-500); }
.market-content dd { overflow-wrap: anywhere; }
.market-action-help { margin-left: var(--sp-6); }
.market-actions { border: 0; padding: 0; margin: 0; }