/* Hearthmist module styles: qol */

/* ---------- minimap: a plate in the top right of the map ---------- */

.qol-mm {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s1);
  padding: 5px;
}
.qol-mm canvas {
  display: block;
  width: 150px;
  height: 150px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.qol-mm .btn.ghost {
  min-height: 24px;
  padding: 1px var(--s2);
  font-size: var(--fs-small);
}
.qol-mm.folded { padding: 3px; }

@media (max-width: 820px) {
  .qol-mm { display: none; }
}

/* ---------- overview under the idle Land tab ---------- */

/* These sections are clicked in place, over and over. They are kept out of the browser's scroll anchoring so
   a rebuild of the panel leaves them where they were (see holdScroll in qol.js). */
.qol-over, .qol-sec, .qol-list { overflow-anchor: none; }

/* The rows worth a glance belong to "Your settlement": no rule between them and the line above. */
.card + .qol-over { margin-top: var(--s2); padding-top: 0; border-top: 0; }

/* A row that leads somewhere: the figure is underlined like a link. */
.qol-go { cursor: pointer; }
.qol-go > b {
  text-decoration: underline dotted var(--line-2);
  text-underline-offset: 3px;
}
.qol-go:hover > span { color: var(--text); }
.qol-go:hover > b { text-decoration-color: currentColor; }
.qol-go[aria-disabled="true"] { cursor: default; }
.qol-go[aria-disabled="true"] > b { text-decoration: none; }
.qol-go[aria-disabled="true"]:hover > span { color: var(--muted); }

/* One building type a row. The line that names it shows the next one on the map; under it, the one thing
   to do with it. */
.qol-list .opt { padding: 9px 0 6px; }
.qol-show { cursor: pointer; border-radius: var(--r); }
.qol-show:hover > b { color: var(--gold); }
.qol-n {
  flex: none;
  color: var(--muted);
  font-size: var(--fs-small);
  white-space: nowrap;
  text-decoration: underline dotted var(--line-2);
  text-underline-offset: 3px;
}
.qol-show:hover > .qol-n { color: var(--text); text-decoration-color: currentColor; }
.qol-f {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: 3px;
}
.qol-f .btn {
  min-height: 28px;
  padding: 2px var(--s2);
  font-size: var(--fs-small);
}
/* The quiet action of the row. Ember while it can be paid for, like everything else that can be done now. */
.qol-f .qol-up {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2px 10px;
  min-width: 0;
  margin-left: calc(-1 * var(--s2));
  color: var(--ember);
  font-weight: 700;
}
.qol-f .qol-up:hover { color: var(--gold); }
.qol-f .qol-up:disabled,
.qol-f .qol-up:disabled:hover { border-color: transparent; color: var(--muted); font-weight: 500; }
.qol-f .chip .ic { width: 14px; height: 14px; }
.qol-done { color: var(--muted); font-size: var(--fs-small); }

@media (max-width: 820px) {
  /* a finger needs more to land on than a pointer does */
  .qol-f .btn { min-height: 36px; }
  .qol-f { margin-top: 0; }
  .qol-go { padding-block: 7px; }
  .qol-show { min-height: 34px; }
  .qol-list .opt { padding: 5px 0 2px; }
}