/* Hallmark · component: market bar · genre: editorial (atlas ledger) · theme: project tokens (obsidian + gold, css/tokens.css)
 * states: default · hover · focus · active · disabled · loading (chips render after markets/index.json) · error (stale chip) · success (aria-pressed/checked)
 * contrast: pass (text-muted >= 4.5:1 on the surfaces at 12px)
 *
 * css/modules/market-bar.css: styles for js/modules/market-bar.js. One scrolling row, exactly var(--bar-h) tall at every width,
 * sticky under the header (base.css .sub-bar). Only var(--token) values; motion = transform / opacity through --dur-fast; <= 500 lines.
 */

/* ---- host: exactly --bar-h tall including base.css's 1px border-bottom ---- */
.mbar-host { position: sticky; box-sizing: border-box; height: var(--bar-h); }
.mbar-host[data-overflow="1"] .mbar { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }

/* ---- the row ---- */
.mbar {
  display: flex; align-items: center; gap: var(--space-2);
  height: calc(var(--bar-h) - 1px);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  white-space: nowrap;
}
.mbar::-webkit-scrollbar { display: none; }
.mbar > * { flex: 0 0 auto; scroll-snap-align: start; margin: 0; }

/* Controls are 40px inside a 56px bar: the tap target is the full 40 + the row's 8px vertical slack */
.mbar .segmented > label, .mbar .chip-toggle, .mbar .stepper button, .mbar .mbar-market { min-height: 40px; }
.mbar .segmented > label { min-width: 0; padding-inline: var(--space-3); }
.mbar .segmented > label > input:disabled + span { opacity: 0.45; }

/* ---- market chip ---- */
.mbar-market {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3) 0 var(--space-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  background: var(--bg-surface); color: var(--text-primary); font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.mbar-market:hover { border-color: var(--color-gold-dim); background: var(--bg-surface-hover); }
.mbar-market:active { background: var(--bg-surface-active); }
.mbar-market[aria-expanded="true"] { border-color: var(--color-gold); }
.mbar-market-name { font-weight: 600; }
.mbar-market-sub { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.mbar-caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-out); }
.mbar-market[aria-expanded="true"] .mbar-caret { transform: translateY(2px) rotate(225deg); }

/* Faction dot: the market's colour, shared by the chip and the sheet rows */
.mbar-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pin-both); box-shadow: 0 0 0 1px var(--border-strong); flex: 0 0 auto; }
[data-faction="alliance"] .mbar-dot { background: var(--pin-alliance); }
[data-faction="horde"] .mbar-dot { background: var(--pin-horde); }
[data-faction="neutral"] .mbar-dot { background: var(--pin-both); }
[data-faction="all"] .mbar-dot { background: var(--color-midnight); }
.is-off .mbar-dot { background: transparent; box-shadow: 0 0 0 1px var(--border-strong); }

/* ---- professions ---- */
.mbar-profs { display: inline-flex; gap: var(--space-1); }
.mbar .chip-toggle:hover { color: var(--text-primary); border-color: var(--color-gold-dim); }
.mbar .chip-toggle[aria-pressed="true"]:hover { color: var(--text-inverted); background: var(--color-gold-hover); border-color: var(--color-gold-hover); }
.mbar .chip-toggle:active { transform: translateY(1px); }

/* ---- level stepper ---- */
.mbar-level { gap: 0; }
.mbar-level output { min-width: 4ch; font-size: var(--text-sm); color: var(--text-primary); }
.mbar-level button:disabled { color: var(--text-muted); opacity: 0.45; cursor: not-allowed; background: none; }
.mbar-any { font-family: var(--font-mono); font-size: var(--text-xs); padding-inline: var(--space-2); border-left: 1px solid var(--border-subtle); color: var(--text-muted); }
.mbar-any[aria-pressed="true"] { color: var(--color-gold); }
.mbar-any:hover { color: var(--text-primary); }

/* ---- stamp + launch line ---- */
.mbar-stamp { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); padding-left: var(--space-2); border-left: 1px solid var(--border-subtle); }
.mbar-stamp [data-stamp-text] { display: inline-block; }
/* On wide screens the stamp and the launch line give way (ellipsis) before the row scrolls */
.mbar > .mbar-stamp, .mbar > .mbar-launch { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mbar-stamp [data-stamp-text] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.mbar-stamp [data-stamp-text].is-in { animation: mbar-in var(--dur-fast) var(--ease-out) both; }
@keyframes mbar-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mbar-launch { font-size: var(--text-xs); color: var(--text-secondary); padding-left: var(--space-2); border-left: 1px solid var(--border-subtle); }
.mbar-launch[hidden], .mbar-stamp .chip[hidden], .mbar-sheet-note[hidden] { display: none; } /* base.css .chip sets display, so [hidden] needs restating */

/* ---- market sheet ---- */
.mbar-sheet {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 35;
  margin: 0 var(--gutter); padding: var(--space-2);
  background: var(--bg-surface-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  box-shadow: 0 16px 40px -16px var(--map-felt);
  max-height: calc(100vh - var(--header-h) - var(--bar-h) - var(--space-4)); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  white-space: normal;
}
.mbar-sheet[hidden] { display: none; }
.mbar-sheet.is-open { opacity: 1; transform: none; }
.mbar-group + .mbar-group { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.mbar-group-title { margin: 0 0 var(--space-1); padding: 0 var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.mbar-row {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-1) var(--space-3);
  width: 100%; min-height: var(--tap); padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control); text-align: left; color: var(--text-primary); font-size: var(--text-sm);
  transition: background var(--dur-fast) var(--ease-out);
}
button.mbar-row:hover { background: var(--bg-surface-hover); }
button.mbar-row:active { background: var(--bg-surface-active); }
button.mbar-row[aria-checked="true"] { background: var(--color-gold-bg); }
button.mbar-row[aria-checked="true"] .mbar-row-name { color: var(--color-gold); }
.mbar-row.is-off { color: var(--text-muted); cursor: default; grid-template-columns: minmax(0, 1fr) auto; }
.mbar-row-name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mbar-row-sub { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
.mbar-row-stamp { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.is-off .mbar-row-stamp { white-space: nowrap; }
.mbar-sheet-note { margin: var(--space-2) var(--space-2) 0; font-size: var(--text-xs); color: var(--text-muted); max-width: var(--measure); }

/* ---- wider screens: the sheet becomes a panel under the chip; the stamp drifts right ---- */
@media (min-width: 720px) {
  .mbar-sheet { right: auto; width: 440px; margin: var(--space-1) 0 0; }
}
@media (min-width: 1100px) {
  .mbar-stamp { margin-left: auto; }
}

/* ---- reduced motion: no slide, no caret turn; the tokens already zero the durations ---- */
@media (prefers-reduced-motion: reduce) {
  .mbar-stamp [data-stamp-text].is-in { animation: none; }
  .mbar-sheet { transform: none; transition: opacity var(--dur-fast) linear; }
}