/* ---------- THE STACKS ----------
   The room's frame only. House tokens and the house type scale.

   THE CARD IS NOT HERE ANY MORE. It moved to components.css on 2026-08-21,
   the day MY LIBRARY became its own room and a second screen needed to draw
   the same card: `.work-card` and `.work-grid` are the house's card now, and
   a component's look has one home. What is left below is what only this room
   has — its head, its section headings, and the link door. */
.market {
  max-width: 1080px; margin: 0 auto; padding: 22px 20px 48px;
  display: flex; flex-direction: column; gap: 30px; color: var(--ink);
}
.market-head { display: flex; flex-direction: column; gap: 5px; }
.market-title {
  margin: 0; font-size: var(--t-room); font-weight: var(--w-bold);
  letter-spacing: .04em; text-transform: uppercase;
}
.market-sub, .market-section-line {
  margin: 0; color: var(--muted); font-size: var(--t-body);
}
.market-section { display: flex; flex-direction: column; gap: 10px; }
.market-section-title {
  margin: 0; font-size: var(--t-head); text-transform: uppercase;
  display: flex; align-items: center; gap: var(--s4);
}
/* THE SHELF'S OWN CONTROL, at the right end of its heading (Mark, 2026-08-31).
   margin-left:auto rather than a second column, so a heading with no control on
   it is laid out exactly as it was and only the one shelf that has one changes.
   It is the banner chrome button's size and manner, wearing the muted ink of the
   line it sits on rather than the accent, because it opens a window rather than
   naming a state. */
.market-section-glass {
  margin-left: auto; flex: none; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--bd) solid var(--edge); border-radius: var(--r-sm);
  color: var(--muted); background: transparent;
  transition: color var(--mo-fast), border-color var(--mo-fast);
}
.market-section-glass:hover, .market-section-glass[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent-line);
}
.market-section-line { margin-top: -6px; }
.market-section-more{align-self:flex-start;margin-top:var(--s2);}

/* ---------- OPEN A LINK ----------
   The door for a book you found somewhere else. It wears the shelf's own
   parts: the same button, the same panel edge, the same type steps. */
.market-link-row { display: flex; gap: 10px; align-items: center; }
.market-link-input {
  flex: 1; min-width: 0; padding: 9px 12px; border: var(--bd) solid var(--edge);
  border-radius: var(--r-md); background: var(--inset); color: var(--ink);
  font: inherit; font-size: var(--t-body);
}
.market-link-input::placeholder { color: var(--muted); }
.market-link-input:focus { outline: none; border-color: var(--accent); }
.market-link-go { flex: none; width: auto; padding: 9px 18px; }

/* ---------- THE BUILDER'S BAR ----------
   Only ever drawn in Builder mode, above the shelf. It prints the count of
   unpainted cards, which IS the price of painting them, so the number is read
   before it is spent rather than discovered afterwards. */
.market-builder {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border: var(--bd) solid var(--accent-line);
  border-radius: var(--r-md); background: var(--inset);
}
.market-builder-line { flex: 1; min-width: 220px; color: var(--ink2); font-size: var(--t-small); }
.market-builder-go { flex: none; width: auto; padding: 8px 16px; }

/* ---------- THE PLAYLIST WORKBENCH (the Stacks' Tool Box) ----------
   Where a playlist is built (rooms/stacks-toolbox.js). It wears the panel's
   own parts: the inset rows, the pill buttons, the house type steps. The
   two-verb row on a music card (.work-actions) lives in components.css with
   the card it dresses. */
.plx-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border: var(--bd) solid var(--edge);
  border-radius: var(--r-md); background: var(--inset);
}
.plx-row.is-open { border-color: var(--accent-line); }
.plx-name {
  flex: 1; min-width: 0; border: 0; background: none; font: inherit;
  font-size: var(--t-small); font-weight: var(--w-semi); color: var(--ink);
  text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plx-meta { flex: none; color: var(--muted); font-size: var(--t-tiny); }
.plx-go {
  flex: none; border: var(--bd) solid var(--edge); border-radius: var(--r-pill);
  background: none; font: inherit; font-size: var(--t-tiny); font-weight: var(--w-semi);
  color: var(--accent); padding: 3px 10px; cursor: pointer;
}
.plx-go:hover { border-color: var(--accent); }
.plx-cross {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: var(--r-sm);
}
.plx-cross:hover { color: var(--ink); background: var(--inset); }
.plx-new { width: auto; align-self: flex-start; padding: 7px 14px; }
.plx-open { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.plx-input {
  padding: 8px 10px; border: var(--bd) solid var(--edge); border-radius: var(--r-md);
  background: var(--inset); color: var(--ink); font: inherit; font-size: var(--t-body);
}
.plx-input:focus { outline: none; border-color: var(--accent); }
.plx-total { color: var(--ink2); font-size: var(--t-tiny); }
.plx-track {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--r-sm); background: var(--inset);
}
.plx-track-name {
  flex: 1; min-width: 0; font-size: var(--t-small); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}