/* The tracked questline, readable from any tab. Deliberately small and out of
   the way: it is a glance, not a page. */
.quest-tracker {
  position: fixed;
  bottom: 14px;
  z-index: 70;
  width: 300px;
  /* Docked corners: the step you are on to the left, the whole line to the
     right, so the two never sit on top of one another. */
  max-height: min(58vh, 520px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--dusk) 90%, transparent);
  font-size: 12px;
}
.quest-tracker[hidden] { display: none; }

.tracker-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 8px;
  border-bottom: 1px solid var(--line);
}
.quest-tracker.is-collapsed .tracker-head { border-bottom: 0; }
.tracker-title { min-width: 0; display: grid; }
.tracker-title b { font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.tracker-title small { margin-top: 1px; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracker-toggle {
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.tracker-toggle:hover { color: var(--green); border-color: var(--green); }

.tracker-list { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 4px 4px 4px 8px; }
.tracker-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 3px 4px 3px 0;
}
.tracker-list li + li { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.tracker-list img { display: block; width: 20px; height: 20px; object-fit: contain; }
.tracker-noart { display: block; width: 20px; height: 1px; background: var(--line); }
.tracker-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracker-list li b { font-size: 12px; font-variant-numeric: tabular-nums; }
.tracker-list li.is-currency span, .tracker-list li.is-currency b { color: var(--muted); }
.tracker-done { color: var(--green); padding: 8px 0; }

.tracker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.tracker-foot button {
  padding: 3px 8px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.tracker-foot button:hover { color: var(--green); border-color: var(--green); }

@media (max-width: 620px) {
  .quest-tracker { right: 8px; bottom: 8px; width: calc(100vw - 16px); max-height: 46vh; }
}

/* Bigger, for reading both lists properly rather than glancing at them. */
.quest-tracker.is-next { left: 14px; }
.quest-tracker.is-whole { right: 14px; }

/* Big: the whole line, laid sideways across the page. Columns are as many as
   fit, so the list is read across rather than scrolled down. No width
   transition — the browser will not interpolate a px width to a min() value
   and the panel gets stuck at whichever size it started at. */
.quest-tracker.is-big {
  /* Covering the page means clearing the sticky masthead at z-index 80 —
     otherwise the site nav prints over the tracker's own close button. */
  z-index: 90;
  /* Sized to its contents, not to the screen. Stretched to full width every
     row had a hand's width of nothing between the item and its number. */
  /* It grows out of the right-hand dock, so it stays on that side. Centred, it
     jumped left the moment you opened it, away from the button you pressed. */
  left: auto;
  right: 14px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  /* A definite, modest width. max-content cannot resolve against a grid whose
     column count depends on its own height, and resolved to the full screen. */
  /* Starting size only — tracker.js measures and shrinks this onto the
     contents, so a short questline gets a small box, not an empty big one. */
  width: min(1020px, calc(100vw - 24px));
  /* A definite height, not just a maximum: the row track uses auto-fill, and
     with only a max-height the grid collapsed to a single row per column. */
  height: min(78vh, 820px);
  max-width: min(1020px, calc(100vw - 24px));
  max-height: none;
}
/* Denser when open. Two hundred rows at panel size is a wall; at this size the
   whole list can be taken in without feeling like one. */
.quest-tracker.is-big .tracker-list {
  display: grid;
  grid-auto-flow: column;
  /* Row count is set by tracker.js once it can measure the panel. */
  grid-template-rows: repeat(auto-fill, minmax(22px, max-content));
  /* Content-width columns: a stretched column puts the number a long way from
     the name it belongs to, which is the hardest version of this to read. */
  /* Columns hug their own contents and pack from the left. Stretched to equal
     widths, a short name left its number stranded at the far edge of the
     column while a long one sat right beside it — the same list looked
     differently aligned row to row. */
  grid-auto-columns: max-content;
  justify-content: start;
  gap: 0 32px;
  padding: 8px 16px 12px;
  overflow: auto;
  font-size: 12px;
}
.quest-tracker.is-big .tracker-list li {
  /* Art, then name, then the number: one straight line of pictures down the
     left of each column and one of numbers down its right. */
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 2px 0;
  border-top: 0;
}
/* The number sits just past the longest name in its own column, not at the
   far edge of the screen. */
.quest-tracker.is-big .tracker-list li b { min-width: 52px; }
.quest-tracker.is-big .tracker-list img { width: 22px; height: 22px; }
.quest-tracker.is-big .tracker-noart { width: 22px; }
.quest-tracker.is-big .tracker-list b { font-size: 12px; }

/* Narrowing 189 rows beats scanning them. */
.tracker-filter { padding: 8px 12px 4px; }
.tracker-filter input {
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  color: var(--text);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
}
.tracker-filter input:focus-visible { outline: 2px solid var(--lantern); outline-offset: 1px; }
.quest-tracker.is-big .tracker-list li + li { border-top: 0; }
/* The items the step you are on also needs, kept findable in a long list. */
.quest-tracker.is-big .tracker-list li.is-now { padding-left: 4px; border-left: 2px solid var(--green); }
.quest-tracker.is-big .tracker-list li.is-now span { color: var(--text); }
.quest-tracker.is-collapsed { width: 260px; }

/* Two panels cannot both take the full width, so on a narrow screen they
   stack: the step you are on stays on top, where it is most useful. */
@media (max-width: 820px) {
  .quest-tracker { width: calc(50vw - 20px); }
  .quest-tracker.is-collapsed { width: calc(50vw - 20px); }
  .quest-tracker.is-big .tracker-list { grid-auto-flow: row; grid-template-rows: none; }
}
/* One panel on a phone, anchored to the bottom, with a switch in its header
   for which list it shows. Two stacked panels took two thirds of the screen. */
@media (max-width: 620px) {
  .quest-tracker.is-next { left: 8px; right: 8px; width: auto; bottom: 8px; max-height: 42vh; }
  .quest-tracker.is-collapsed { width: auto; }
  .tracker-head { grid-template-columns: 24px minmax(0, 1fr) auto auto; }
  .tracker-toggle.is-scope { width: auto; padding: 0 8px; font-size: 12px; }
}

/* Rows open the item in the calculator, the same as every other list here. */
.tracker-list li.is-openable { cursor: pointer; }
.tracker-list li.is-openable:hover span { color: var(--green); }
.tracker-list li.is-openable:focus-visible { outline: 2px solid var(--lantern); outline-offset: -2px; }