.market__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);

  & thead th { padding: var(--space-2) var(--space-3); font-size: 0.8rem; color: var(--color-muted); text-align: left; }
  & thead th.num { text-align: right; }
  & tbody { border-top: 1px solid var(--color-border); }
  & th[scope="row"] { text-align: left; font-weight: bold; }
  & td, & th[scope="row"] { padding: var(--space-2) var(--space-3); }
}

.market__trade td { padding-top: 0; }

.trade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.trade__qty { width: 5rem; text-align: right; }
.trade__quick, .trade__go { display: flex; gap: var(--space-1); }
.trade__quick { align-items: center; }
.trade__col { display: flex; flex-direction: column; gap: var(--space-1); }
.trade__go { margin-left: auto; }

.journey__bar {
  width: 100%;
  height: 1.5rem;
  appearance: none;
  border: 1px solid var(--color-gold);
  border-radius: 1rem;
  background: var(--color-field);
  overflow: hidden;

  &::-webkit-progress-bar { background: var(--color-field); }
  &::-webkit-progress-value { background: linear-gradient(90deg, #a67c1e, var(--color-gold-bright)); border-radius: 1rem; }
  &::-moz-progress-bar { background: linear-gradient(90deg, #a67c1e, var(--color-gold-bright)); }
}

.journey__count { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-gold-bright); }

.debug { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

.cargo__list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;

  & li { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
}

.destinations { list-style: none; padding: 0; display: grid; gap: var(--space-3); }

.destination__head { display: flex; justify-content: space-between; align-items: baseline; }
.destination__steps { font-weight: bold; color: var(--color-gold); }
.destination__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); & form { display: contents; } }

.report {
  margin-bottom: var(--space-3);
  & summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; }
  & table { width: 100%; }
  & th { text-align: left; font-weight: normal; }
}

.auth { margin-top: var(--space-5); }

@media (min-width: 40rem) {
  .page { padding-top: var(--space-5); }
}

.market__row { cursor: pointer; }
.market__row:hover { background: var(--color-surface-raised); }

.market__toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: bold;
  cursor: pointer;

  &::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-left: var(--space-2);
    border: solid var(--color-gold);
    border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 120ms;
  }
}

.is-open .market__toggle::after { transform: translateY(2px) rotate(-135deg); }
.is-open .market__row { background: var(--color-surface-raised); }