/* Places page. Loads after mining.css and before quests.css. */

.places-controls {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  margin-bottom: var(--s4);
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.places-modes { display: flex; gap: var(--s1); }
.places-mode {
  font: inherit;
  font-family: var(--display);
  font-size: 14px;
  padding: 8px 16px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.places-mode:hover { color: var(--text); border-color: var(--on-dim); }
.places-mode.active {
  color: var(--text);
  background: var(--on-wash);
  border-color: var(--on);
  box-shadow: inset 0 -2px var(--water);
}

.places-pour {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: flex-end;
}
.places-field { display: grid; gap: 3px; min-width: 110px; }
.places-field.grow { flex: 1 1 220px; }
.places-field > span {
  font-size: 12px;
  color: var(--muted);
}
.places-field input,
.places-field select {
  font: inherit;
  font-family: var(--data);
  font-size: 14px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 8px;
  width: 100%;
}
.places-field input:focus-visible,
.places-field select:focus-visible { outline: 2px solid var(--lantern); outline-offset: 1px; }

.places-basis { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.places-basis-label { font-size: 12px; color: var(--muted); }
.places-chip {
  font: inherit;
  font-size: 13px;
  padding: 4px 12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.places-chip:hover:not(:disabled) { color: var(--text); }
.places-chip.active { color: var(--text); border-color: var(--on); background: var(--on-wash); }
.places-chip:disabled { opacity: .45; cursor: not-allowed; }
.places-basis-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 74ch;
}

/* ---- the list ---------------------------------------------------------- */
.places-list { display: grid; gap: var(--s2); }

.places-card {
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.places-card[open] { border-color: var(--on-dim); }
.places-card > summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  cursor: pointer;
  list-style: none;
}
.places-card > summary::-webkit-details-marker { display: none; }
.places-card > summary:hover { background: var(--tile2); }
.places-card > summary:focus-visible { outline: 2px solid var(--lantern); outline-offset: -2px; }

.places-art { flex: 0 0 auto; width: 52px; height: 52px; }
.places-art img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--r-sm); }

.places-headline { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.places-headline strong { font-family: var(--display); font-size: 16px; font-weight: 400; }
.places-preview {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.places-preview b { font-family: var(--data); color: var(--text); font-weight: 500; }
.places-preview.blocked { font-style: italic; }

.places-found {
  flex: 0 0 auto;
  font-family: var(--data);
  font-size: 13px;
  color: var(--text);
  background: var(--on-wash);
  border: 1px solid var(--on-dim);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  white-space: nowrap;
}
.places-found.none { color: var(--muted); background: transparent; border: 1px dashed var(--line); }

.places-cue { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.places-cue::after { content: "Open"; }
.places-card[open] > summary .places-cue::after { content: "Close"; }
.places-card[open] > summary .places-preview { white-space: normal; }

.places-detail {
  padding: 0 var(--s4) var(--s4);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--s3);
}

/* ---- your own effectiveness -------------------------------------------- */
.places-effort {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3);
  margin-top: var(--s3);
  background: var(--field);
  border-radius: var(--r-sm);
}
.places-effort label { display: grid; gap: 3px; flex: 0 0 auto; }
.places-effort label > span { font-size: 12px; color: var(--muted); }
.places-effort input {
  font-family: var(--data);
  font-size: 14px;
  color: var(--text);
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 8px;
  width: 96px;
}
.places-effort input:focus-visible { outline: 2px solid var(--lantern); outline-offset: 1px; }
.places-effort p {
  margin: 0;
  flex: 1 1 260px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  align-self: center;
}
.places-effort p b { color: var(--text); }

.places-actions { margin: 0; font-size: 13px; color: var(--muted); }
.places-actions b { font-family: var(--data); color: var(--text); font-weight: 500; }

/* ---- the yield table --------------------------------------------------- */
.places-scroll { overflow-x: auto; }
.places-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  /* style.css sets a bare `table { min-width: 1050px }` for the Calculate
     page's decision table. It applies to every table on the site, and it is
     what pushed this one three times past the card on a phone. */
  min-width: 0;
}
.places-table th {
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  padding: 0 var(--s2) 5px;
  border-bottom: 1px solid var(--line);
}
.places-table td {
  padding: 4px var(--s2);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  vertical-align: middle;
}
.places-table tr:last-child td { border-bottom: 0; }
.places-table .num { text-align: right; font-family: var(--data); white-space: nowrap; }
.places-table .num b { font-weight: 500; font-size: 14px; }
.places-table .rate { font-family: var(--data); font-size: 12px; color: var(--muted); white-space: nowrap; }
.places-table tr.covers .num b { color: var(--green); }

.places-item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font: inherit;
  color: var(--text);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  text-align: left;
}
.places-item:hover span { text-decoration: underline; }
.places-item img { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.places-noart {
  width: 24px; height: 24px; flex: 0 0 auto;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
}

.places-tag {
  display: inline-block;
  font-size: 12px;
  padding: 1px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.places-tag.quest { color: var(--text); border-color: var(--on-dim); background: var(--on-wash); }
.places-tag.tower { color: var(--text); border-color: color-mix(in srgb, var(--amber) 60%, var(--line)); }
.places-tag.quiet { border-color: transparent; }

.places-source { margin: 0; font-size: 12px; }
.places-source a { color: var(--muted); }
.places-none { margin: 0; font-size: 13px; color: var(--muted); }

@media (max-width: 620px) {
  .places-card > summary { padding: var(--s3); gap: var(--s2); }
  .places-art, .places-art img { width: 40px; height: 40px; }
  .places-cue { display: none; }
  .places-detail { padding: 0 var(--s3) var(--s3); }
  /* At 375px the yield table cannot hold five columns, and letting it push
     the page sideways is worse than losing two of them. The remaining three
     have to be told their widths: left to themselves, a nowrap tag and an
     unbreakable item name grew the table to three times the card. */
  .places-table .rate, .places-table .alt { display: none; }
  .places-table { table-layout: fixed; }
  .places-table th:first-child, .places-table td:first-child { width: 50%; }
  .places-table .num { width: 24%; }
  .places-table .tags { width: 26%; }
  .places-item span { overflow-wrap: anywhere; }
  /* A 999px radius on a box that has wrapped to three lines reads as an
     ellipse, not a tag. */
  .places-tag { white-space: normal; border-radius: var(--r-sm); }
  .places-table td, .places-table th { padding: 4px var(--s1); }
  .places-effort p { flex-basis: 100%; }
}


/* ---- what a chest holds ------------------------------------------------ */
.places-inchest {
  padding: var(--s3);
  background: var(--field);
  border-radius: var(--r-sm);
}
.places-inchest h2 {
  margin: 0 0 var(--s2);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
.places-inchest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: 3px 0;
}
.places-inchest-row strong {
  font-weight: 400;
  font-size: 12px;
  min-width: 128px;
}
.places-inchest-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.places-inchest-item img { width: 20px; height: 20px; object-fit: contain; }
.places-inchest-item b { font-family: var(--data); font-weight: 500; color: var(--text); }
.places-inchest p { margin: var(--s2) 0 0; font-size: 12px; color: var(--muted); }

.places-meals { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.places-effort p b { color: var(--text); font-family: var(--data); font-weight: 500; }
.places-inchest-item.wanted { color: var(--text); }
.places-inchest-need {
  font-style: normal;
  font-family: var(--data);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0 4px;
}
.places-effort-bill {
  flex-basis: 100%;
  margin: var(--s2) 0 0;
  font-size: 13px;
  color: var(--text);
}
.places-effort-bill b { font-family: var(--data); font-weight: 500; }
.places-applyall {
  font: inherit;
  font-size: 12px;
  align-self: flex-end;
  padding: 4px 12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.places-applyall:hover { color: var(--text); border-color: var(--on-dim); }

/* ---- Trips page -------------------------------------------------------- */
.trips-body { display: grid; gap: var(--s3, 16px); }
.trip-list { display: grid; gap: 10px; }
.trip-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: end;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.trip-row .trip-field { display: grid; gap: 3px; min-width: 110px; }
.trip-row .trip-field.grow { flex: 1 1 200px; }
.trip-row .trip-field > span { font-size: 12px; color: var(--muted); }
.trip-row .trip-field input,
.trip-row .trip-field select {
  font: inherit; font-family: var(--data); font-size: 14px; color: var(--text);
  background: var(--field); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px; width: 100%;
}
.trip-row .trip-field input:focus-visible,
.trip-row .trip-field select:focus-visible { outline: 2px solid var(--lantern); outline-offset: 1px; }
.trip-remove {
  font: inherit; color: var(--muted); background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 12px; cursor: pointer;
}
.trip-remove:hover { color: var(--text); }
.trip-sum { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); }
.trip-sum b { color: var(--text); }
.trip-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.trip-haul { display: grid; gap: 12px; }
.trip-filter { max-width: 360px; }
.trip-inside, .trip-cap { font-size: 12px; color: var(--muted); }
.trip-table tr.over td { color: var(--amber); }
.trip-from { font-size: 13px; color: var(--muted); }
@media (max-width: 620px) {
  .trip-row .trip-field { min-width: calc(50% - 10px); }
  .trip-row .trip-field.grow { flex-basis: 100%; }
}
.places-event { display: block; font-size: 12px; color: var(--amber); }