/* Demand by studio and area, Promote, and keep / change / drop (6 Oct). app.css tokens only,
   so both themes follow. */

/* the studio table: styles as short labelled shares */
.dm-styles { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.dm-style { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dm-style strong { font-weight: 600; }
.opp-table tr.dm-unknown td { color: var(--soft); background: var(--paper2); }

/* Promote: a card inside the Demand view */
.promo { border-color: var(--gold-line); scroll-margin-top: 90px; }
.promo h3 { margin: 0; font: 500 22px/1.15 var(--display); }
.promo-btns { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; }
.promo-block { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--rule); }
.promo-block .eyebrow { margin: 0; }
.promo-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.5; }
.promo-draft { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r); background: var(--paper2); border: 1px solid var(--rule); }
.promo-draft-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.promo-said { margin: 0; font-size: 13px; color: var(--ink2); font-style: italic; }
.promo-why { margin: 0; }
.opp-chip.promo-approve { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent); background: color-mix(in srgb, var(--info) 9%, var(--paper)); }

/* keep / change / drop under every view */
.fb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; padding: 10px 14px; border: 1px dashed var(--rule2); border-radius: var(--r-lg); background: var(--paper); }
.fb-row .eyebrow { margin: 0; }
.fb-btns { display: inline-flex; gap: 6px; }
.fb-note { flex: 1 1 220px; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--rule2); border-radius: var(--r); background: var(--paper2); color: var(--ink); font: 400 13px var(--text); }
.fb-note:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--gold-soft); }
.fb-last { flex-basis: 100%; }
.coach-people + .fb-row, #coach-week > .fb-row { margin-top: 12px; }

@media (max-width: 760px) {
  .fb-row { padding: 10px 12px; }
  .fb-btns { flex-wrap: wrap; }
}