/* Items page — the game's whole catalogue, one page per item.
   A fixed index on the left, the item itself on the right, so you can run down
   the list without losing your place. */

.items-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: 24px;
  align-items: end;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.items-copy h1 { margin: 0 0 8px; }
.items-copy p { max-width: 60ch; margin: 0; color: var(--muted); }
.items-controls { display: grid; gap: 12px; }
.items-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.items-filter {
  padding: 4px 12px;
  min-height: 24px;
  color: var(--muted);
  font: 500 12px var(--ui), sans-serif;
  background: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.items-filter:hover { color: var(--text); border-color: var(--line-strong); }
.items-filter.on { color: var(--ink); background: var(--water); border-color: var(--water); }
.items-filter:focus-visible { outline: 2px solid var(--lantern); outline-offset: 2px; }

.items-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}
.items-count { padding: 8px 0; color: var(--muted); font: 500 12px var(--data), monospace; }
.items-results {
  display: grid;
  gap: 4px;
  max-height: 70vh;
  overflow: auto;
  padding-right: 4px;
  scrollbar-color: var(--line) var(--ink);
}
.items-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  color: var(--text);
  text-align: left;
  background: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.items-row:hover { border-color: var(--water); background: var(--ink3); }
.items-row:focus-visible { outline: 2px solid var(--lantern); outline-offset: 2px; }
.items-row.is-open { border-color: var(--water); background: var(--ink3); }
.items-row img { width: 32px; height: 32px; object-fit: contain; }
.items-row b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.items-row small { display: block; color: var(--muted); font-size: 12px; }
.items-none { color: var(--muted); }

.items-detail { display: grid; gap: 24px; align-content: start; min-width: 0; }
.items-empty { padding: 32px; text-align: center; border: 1px dashed var(--line); border-radius: 8px; }
.items-empty h2 { margin: 0 0 8px; }
.items-empty p { max-width: 54ch; margin: 0 auto 16px; color: var(--muted); }
.items-empty h3 { margin: 24px 0 8px; font-size: 13px; color: var(--muted); }

.items-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.items-head img { width: 64px; height: 64px; object-fit: contain; }
.items-head h2 { margin: 4px 0; font-size: 24px; overflow-wrap: anywhere; }
.items-kind {
  display: inline-block;
  color: var(--muted);
  font: 700 12px var(--ui), sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.items-desc { margin: 0; max-width: 62ch; }
.items-actions { display: grid; gap: 4px; justify-items: stretch; }
.items-actions .quiet-button, .items-actions .primary-action { text-align: center; text-decoration: none; }

.items-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.items-facts > div { padding: 12px 16px; background: var(--ink2); }
.items-facts span { display: block; color: var(--muted); font-size: 12px; }
.items-facts strong { display: block; margin: 4px 0 2px; font: 500 16px var(--data), monospace; }
.items-facts small { display: block; color: var(--muted); font-size: 12px; }

.items-block { display: grid; gap: 12px; }
.items-block h3 { margin: 0; padding-bottom: 8px; font-size: 16px; border-bottom: 1px solid var(--line); }
.items-block h3 small { color: var(--muted); font: 500 12px var(--data), monospace; }
.items-block h4 { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.items-recipe p { margin: 0; color: var(--muted); }
.items-note { margin: 0; color: var(--muted); font-size: 12px; }
.items-muted { color: var(--muted); }

.items-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.items-chip {
  display: grid;
  grid-template-columns: 26px auto;
  gap: 8px;
  align-items: center;
  min-height: 24px;
  padding: 4px 12px 4px 8px;
  color: var(--text);
  background: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.items-chip:hover { border-color: var(--water); background: var(--ink3); }
.items-chip:focus-visible { outline: 2px solid var(--lantern); outline-offset: 2px; }
.items-chip img { width: 26px; height: 26px; object-fit: contain; }
.items-chip b { font-size: 12px; font-weight: 600; }
.items-chip small { color: var(--muted); font: 500 12px var(--data), monospace; }

.items-places { display: grid; gap: 8px; }
.items-place { display: grid; gap: 4px; padding: 8px 12px; background: var(--ink2); border: 1px solid var(--line); border-radius: 4px; }
.items-place-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.items-place-head b { font-size: 13px; }
.items-place-head small { color: var(--muted); font-size: 12px; }
/* How good this place is for the item, against the best place for it. */
.items-place-bar { height: 4px; background: var(--ink); border-radius: 4px; overflow: hidden; }
.items-place-bar span { display: block; height: 100%; background: var(--sage); }
.items-place-rates { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font: 500 12px var(--data), monospace; }
.items-place-rates b { color: var(--text); }

.items-quest-top { display: flex; flex-wrap: wrap; gap: 32px; }
.items-quest-top span { display: block; color: var(--muted); font-size: 12px; }
.items-quest-top strong { display: block; margin: 4px 0 2px; font: 500 20px var(--data), monospace; }
.items-quest-top small { display: block; color: var(--muted); font-size: 12px; }
/* How much of the quest total you are already holding. */
.items-cover { height: 4px; background: var(--ink2); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.items-cover span { display: block; height: 100%; background: var(--sage); }

.items-quest-rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.items-quest-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 12px;
  background: var(--ink2);
}
.items-quest-row b { font: 500 13px var(--data), monospace; text-align: right; }
.items-quest-row small { display: block; color: var(--muted); font-size: 12px; }
.items-quest-row em { color: var(--lantern); font-style: normal; font-size: 12px; }
.items-quest-row.is-covered em { color: var(--sage); }

@media (max-width: 1080px) {
  .items-board { grid-template-columns: 1fr; align-items: start; }
  .items-layout { grid-template-columns: 1fr; }
  .items-results { max-height: 320px; }
}
@media (max-width: 620px) {
  .items-head { grid-template-columns: 48px minmax(0, 1fr); }
  .items-head img { width: 48px; height: 48px; }
  .items-actions { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; }
  .items-quest-row { grid-template-columns: 64px minmax(0, 1fr); }
  .items-quest-row em { grid-column: 2; }
}
@media (pointer: coarse) {
  .items-filter, .items-chip, .items-row { min-height: 44px; }
}

/* Tower masteries read like the Tower page: the floor, the tier it wants, and
   how much is left, because a Grand Mastery is 100,000 and not a million. */
.items-tower { display: grid; gap: 4px; padding: 8px 12px; background: var(--ink2); border: 1px solid var(--line); border-radius: 4px; }
.items-tower + .items-tower { margin-top: 8px; }
.items-tower-head { display: flex; align-items: baseline; gap: 8px; }
.items-tower-head b { font-size: 13px; }
.items-tower-head em { margin-left: auto; color: var(--text); font: 500 12px var(--data), monospace; font-style: normal; }
.items-tower.is-done .items-tower-head em { color: var(--muted); }
.items-tier { padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: 4px; font: 700 12px var(--data), monospace; }
.items-tier.is-gm { color: var(--water); border-color: color-mix(in srgb, var(--water) 45%, var(--line)); }
.items-tier.is-mm { color: var(--lantern); border-color: color-mix(in srgb, var(--lantern) 45%, var(--line)); }
.items-tower-numbers { display: flex; justify-content: space-between; color: var(--muted); font: 500 12px var(--data), monospace; }

/* A Tower requirement in the index reads like it does on the Tower page: the
   tier, the floor that wants it, how far the mastery has come, and what is
   left. With the Tower filter on, the nearest floor is first. */
.items-row-tower { display: grid; grid-template-columns: auto auto minmax(24px, 1fr) auto; gap: 8px; align-items: center; margin-top: 4px; }
.items-row-tower em { font-style: normal; font: 700 12px var(--data), monospace; }
.items-floor { color: var(--muted); font-weight: 500 !important; }
.items-left { color: var(--text); font-weight: 500 !important; white-space: nowrap; }
.items-rowbar { height: 4px; background: var(--ink); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.items-rowbar i { display: block; height: 100%; background: var(--sage); }
.items-row.is-done .items-left, .items-row.is-done .items-tier { color: var(--muted); border-color: var(--line); }
.items-row.is-done .items-rowbar i { background: var(--line-strong); }

/* Mega Masteries to a Tower floor. Built to be screenshotted: the percentage
   is the first thing you read, then how much is left. */
.mm-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mm-head h1 { margin: 0 0 8px; }
.mm-head p { max-width: 62ch; margin: 0; color: var(--muted); }
.mm-floor { display: grid; gap: 4px; }
.mm-floor span { color: var(--muted); font-size: 12px; }
.mm-floor input { width: 96px; }

.mm-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; margin-top: 24px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mm-summary > div { padding: 12px 16px; background: var(--ink2); }
.mm-summary span { display: block; color: var(--muted); font-size: 12px; }
.mm-summary strong { display: block; margin: 4px 0 2px; font: 500 20px var(--data), monospace; }
.mm-summary small { display: block; color: var(--muted); font-size: 12px; }

.mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 24px; }
.mm-card { display: grid; gap: 8px; padding: 12px; background: var(--ink2); border: 1px solid var(--line); border-radius: 8px; }
.mm-card header { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.mm-card img { width: 40px; height: 40px; object-fit: contain; }
.mm-noart { display: grid; place-items: center; width: 40px; height: 40px; color: var(--muted); background: var(--ink); border: 1px solid var(--line); border-radius: 4px; font: 700 16px var(--data), monospace; }
.mm-card b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.mm-card header small { display: block; color: var(--muted); font: 500 12px var(--data), monospace; }
.mm-card em { font: 700 20px var(--data), monospace; font-style: normal; color: var(--lantern); }
.mm-bar { height: 6px; background: var(--ink); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.mm-bar i { display: block; height: 100%; background: var(--sage); }
.mm-card footer { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font: 500 12px var(--data), monospace; }
.mm-card footer b { color: var(--text); white-space: nowrap; }
.mm-none { color: var(--muted); }

/* Questline plan: one block per place you go, so the page reads like a route. */
.plan-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.plan-controls select { min-width: 200px; }
.plan-controls .mm-floor { flex: 1 1 100%; }
.plan-body { display: grid; gap: 24px; margin-top: 24px; }
.plan-place { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.plan-place header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 12px 16px; background: var(--ink2); border-bottom: 1px solid var(--line); }
.plan-place h3 { margin: 0; font-size: 16px; }
.plan-place em { font: 700 16px var(--data), monospace; font-style: normal; color: var(--lantern); text-align: right; }
.plan-place header small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.plan-place table { width: 100%; border-collapse: collapse; }
.plan-place th { padding: 8px 16px; color: var(--muted); font: 500 12px var(--ui), sans-serif; text-align: left; border-bottom: 1px solid var(--line); }
.plan-place td { padding: 6px 16px; font: 500 13px var(--data), monospace; border-bottom: 1px solid var(--line); }
.plan-place tr:last-child td { border-bottom: 0; }
.plan-place td:first-child { display: flex; align-items: center; gap: 8px; font-family: var(--ui), sans-serif; }
.plan-place td:nth-child(2), .plan-place td:nth-child(3) { white-space: nowrap; }
.plan-place img { width: 26px; height: 26px; object-fit: contain; }
.plan-noart { display: inline-block; width: 26px; height: 26px; background: var(--ink); border: 1px solid var(--line); border-radius: 4px; }
.plan-open { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.plan-open b { font-weight: 600; }
.plan-open::after { content: ""; flex: none; margin-left: auto; width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .12s ease; }
.plan-open[aria-expanded="true"]::after { transform: rotate(90deg); }
.plan-open:hover b { color: var(--lantern); }
.plan-open:focus-visible { outline: 2px solid var(--lantern); outline-offset: 2px; border-radius: 4px; }
.plan-place .plan-detail td { display: table-cell; padding: 0; background: var(--ink2); }
.plan-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; padding: 12px 16px 14px; }
.plan-why.has-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-find { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.plan-find label { display: grid; gap: 4px; flex: 1 1 260px; }
.plan-find span { color: var(--muted); font: 500 12px var(--ui), sans-serif; }
.plan-find input { width: 100%; }
.plan-find strong { color: var(--lantern); font: 700 13px var(--data), monospace; }
.plan-all tbody tr[hidden] { display: none; }
.plan-why h4 { margin: 0 0 6px; color: var(--muted); font: 500 12px var(--ui), sans-serif; text-transform: none; }
.plan-why ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.plan-why li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 500 12px var(--data), monospace; }
.plan-why li span { font-family: var(--ui), sans-serif; color: var(--fg); }
.plan-jump, .plan-flat { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; }
.plan-jump { cursor: pointer; }
.plan-jump img, .plan-flat img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.plan-jump .plan-noart, .plan-flat .plan-noart { flex: none; }
.plan-jump:hover span { color: var(--lantern); text-decoration: underline; }
.plan-jump:focus-visible { outline: 2px solid var(--lantern); outline-offset: 2px; border-radius: 4px; }
.plan-why li b i { color: var(--muted); font-style: normal; margin-right: 6px; }
.plan-flash td { animation: plan-flash 1.4s ease; }
.plan-cover { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.plan-cover-btn { padding: 5px 10px; background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 500 12px var(--ui), sans-serif; cursor: pointer; }
.plan-cover-btn:hover { color: var(--fg); border-color: var(--muted); }
.plan-cover-btn.is-on { color: var(--lantern); border-color: color-mix(in srgb, var(--lantern) 45%, transparent); }
.plan-cover small { color: var(--muted); font: 500 12px var(--ui), sans-serif; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 16px; }
.plan-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; background: var(--ink); border: 1px solid var(--line); border-radius: 999px; color: var(--fg); font: 500 12px var(--ui), sans-serif; cursor: pointer; }
.plan-chip img { width: 20px; height: 20px; object-fit: contain; }
.plan-chip i { color: var(--muted); font-style: normal; font-size: 13px; line-height: 1; }
.plan-chip:hover { border-color: var(--muted); }
.plan-chip:hover i { color: var(--lantern); }
.plan-roots, .plan-kids { margin: 0; padding: 0; list-style: none; }
.plan-haul { padding: 12px 16px 14px; border-top: 1px solid var(--line); background: var(--ink2); }
.plan-haul h4 { margin: 0 0 8px; color: var(--muted); font: 500 12px var(--ui), sans-serif; }
.plan-haul ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.plan-haul li { display: flex; align-items: center; gap: 6px; min-width: 0; font: 500 12px var(--ui), sans-serif; }
.plan-haul li img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.plan-haul li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-haul li b { margin-left: auto; color: var(--lantern); font-family: var(--data), monospace; }
.plan-node-row { position: relative; display: grid; grid-template-columns: 14px 28px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 10px 16px; padding-left: calc(16px + var(--depth) * 22px); border-bottom: 1px solid var(--line); }
.plan-node:last-child > .plan-node-row { border-bottom: 0; }
.plan-node-row.has-kids { cursor: pointer; }
.plan-node-row:hover { background: var(--ink2); }
.plan-node-row:focus-visible { outline: 2px solid var(--lantern); outline-offset: -2px; }
.plan-node-mark { justify-self: center; width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .12s ease; }
.plan-node-row:not(.has-kids) .plan-node-mark { border-left-color: transparent; }
.plan-node-row[aria-expanded="true"] .plan-node-mark { transform: rotate(90deg); }
.plan-node-row img { width: 28px; height: 28px; object-fit: contain; justify-self: center; }
.plan-node-name { min-width: 0; display: grid; gap: 1px; }
.plan-node-name b { font: 600 15px var(--ui), sans-serif; overflow-wrap: anywhere; }
.plan-node-name small { color: var(--muted); font: 500 12px var(--ui), sans-serif; overflow-wrap: anywhere; }
.plan-node-row em { font: 700 15px var(--data), monospace; font-style: normal; color: var(--lantern); text-align: right; white-space: nowrap; }
.plan-kids .plan-node-row { padding-top: 7px; padding-bottom: 7px; }
.plan-kids .plan-node-row img { width: 22px; height: 22px; }
.plan-kids .plan-node-name b { font-size: 13px; font-weight: 500; }
.plan-kids .plan-node-row em { font-size: 13px; }
.plan-kids .plan-node-row::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(16px + (var(--depth) - 1) * 22px + 6px); width: 1px; background: var(--line); }
@media (max-width: 620px) {
  .plan-node-row { grid-template-columns: 14px 24px minmax(0, 1fr) auto; gap: 0 8px; padding-left: calc(12px + var(--depth) * 14px); }
  .plan-node-row img, .plan-kids .plan-node-row img { width: 24px; height: 24px; }
  .plan-node-name b { font-size: 14px; }
  .plan-node-row em { font-size: 14px; }
  .plan-kids .plan-node-row::before { left: calc(12px + (var(--depth) - 1) * 14px + 6px); }
}
}
@keyframes plan-flash { 0%, 55% { background: color-mix(in srgb, var(--lantern) 22%, transparent); } 100% { background: transparent; } }
.plan-why li b { color: var(--lantern); white-space: nowrap; }
.plan-why-more span, .plan-why-none { color: var(--muted); font-style: italic; }
.plan-why-none { margin: 0; padding: 12px 16px; font: 500 12px var(--ui), sans-serif; }
@media (max-width: 900px) { .plan-why.has-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .plan-place td, .plan-place th { padding: 6px 12px; } .plan-why, .plan-why.has-three { grid-template-columns: 1fr; } }