/* The bidding panel, laid out for a phone first. Every state is said in
   words; colour and the marks beside them only add to the words. */

.lot-bidding {
  margin: 1rem 0;
  padding: 1rem;
  border: 2px solid #261b23;
  border-radius: 6px;
}

.lot-bidding p {
  margin: 0 0 0.5rem;
}

.lot-standing-price strong {
  font-size: 1.75rem;
  line-height: 1.2;
}

.lot-countdown {
  font-size: 1.25rem;
}

.lot-own-position [data-own-position] {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border-left: 6px solid currentColor;
}

/* Dark green and dark red on white: both above 7 to 1. */
.lot-own-position [data-leading="true"] strong { color: #0b5a2b; }
.lot-own-position [data-leading="false"] strong { color: #8a1c1c; }

.standing-mark {
  margin-right: 0.35rem;
}

/* Controls big enough for a thumb, and text big enough that a phone does not zoom in. */
.lot-bid-form .form-input,
.bid-review .form-input {
  width: 100%;
  min-height: 3rem;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  font-size: 1.125rem;
}

.lot-bid-form .staff-button,
.bid-review .staff-button {
  display: block;
  width: 100%;
  min-height: 3rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.bid-review input[type="checkbox"],
.bid-review input[type="radio"] {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}

.bid-review label {
  display: inline-block;
  padding: 0.6rem 0;
}

/* A wide table scrolls inside itself, never the page. */
.lot-bid-history {
  overflow-x: auto;
}

.lot-bid-history table {
  width: 100%;
  border-collapse: collapse;
}

.lot-bid-history th,
.lot-bid-history td {
  padding: 0.4rem 0.5rem;
  text-align: left;
  white-space: nowrap;
}

.lot-photos img {
  max-width: 100%;
  height: auto;
}

.lot-photos ul {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
}

.lot-photos ul img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
}

.lot-description,
.terms-body {
  overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
  .staff-header {
    padding: 0.75rem 1rem;
  }

  .staff-main {
    max-width: none;
    padding: 1rem;
  }
}

/* Rows of lots on the watchlist and "my bids". */
.lot-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lot-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #ccc;
}

.lot-row p {
  margin: 0 0 0.25rem;
}

.lot-row-photo {
  flex: 0 0 4.5rem;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
}

.lot-row-body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lot-row-title a {
  display: inline-block;
  padding: 0.35rem 0;
  font-weight: 700;
}

.lot-row [data-leading="true"] strong { color: #0b5a2b; }
.lot-row [data-leading="false"] strong { color: #8a1c1c; }