.guide-field select { max-width: 28rem; }
.guide-field .filter-note { max-width: 52rem; }

.level-status { min-height: 1.55em; margin: 0 0 6px; }
.level-status .link-button { margin-left: 12px; }

.empty { max-width: 40rem; }
.empty p { margin: 0 0 16px; }

.level-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 32px;
}
@media (max-width: 1000px) {
  .level-layout { grid-template-columns: minmax(0, 1fr); }
}

.level-panel h2, .phase-panel h2, .quests h2, .skill-trees h2 { font-size: var(--step-2); }
.level-panel h3, .phase-panel h3 { font-size: var(--step-1); margin: 20px 0 8px; }

/* ---- Level and the level-up button ---- */

.level-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.level-now { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.level-label { font-family: var(--font-display); font-size: var(--step-1); color: var(--text-dim); }
.level-number {
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: 1;
  color: var(--q-unique);
  font-variant-numeric: lining-nums tabular-nums;
}

.level-owed { margin: 12px 0 0; color: var(--text-dim); }

/* ---- Advice ---- */

.advice {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--tooltip);
  border: 1px solid #3b3b3b;
}
.advice-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 4px 16px; margin-bottom: 10px; }
.advice-row p { margin: 0; }
.advice-kind { color: var(--q-red); font-family: var(--font-display); }
.advice-list { list-style: none; margin: 0; padding: 0; }
.advice-skill, .advice-stats { color: var(--q-magic); font-size: var(--step-1); }
.from-to { color: var(--text-dim); font-variant-numeric: lining-nums tabular-nums; }
.advice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.advice-actions .hint { margin: 0; }

.respec h2 { font-size: var(--step-1); color: var(--q-crafted); margin-bottom: 6px; }
.respec > p { margin: 0 0 10px; }
.respec-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 12px; margin-bottom: 12px; }
.respec-tabs h3 { font-size: var(--step-0); color: var(--text-dim); margin: 0 0 4px; }
.respec-tabs ul { list-style: none; margin: 0; padding: 0; }
.respec-tabs .points { color: var(--q-magic); }

.coming-up { margin-top: 24px; }
.coming-up h2 { font-size: var(--step-1); margin-bottom: 8px; }
.coming-up table { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.coming-up th { text-align: left; font-weight: 500; color: var(--text-dim); font-size: var(--step--1); padding: 0 12px 4px 0; }
.coming-up td { padding: 5px 12px 5px 0; border-top: 1px solid var(--line); vertical-align: top; }
.coming-up .num { width: 3.5rem; }
.coming-up .dim { color: var(--text-dim); }

/* ---- This stage ---- */

.phase-levels { margin: 0 0 2px; color: var(--text-dim); }
.look-list, .tips { margin: 0; padding: 0; list-style: none; }
.look-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.look-list li:first-child { border-top: 0; padding-top: 0; }
.look-name { font-weight: 500; }
a.look-name { text-decoration: none; }
a.look-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.look-in { color: var(--text-dim); }
.look-have { margin-left: 10px; font-size: var(--step--1); color: var(--q-red); white-space: nowrap; }
.look-have.ok { color: var(--q-set); }
.look-note { margin: 2px 0 0; font-size: var(--step--1); color: var(--text-dim); max-width: 38rem; }
.tips li { padding-left: 16px; text-indent: -16px; margin-bottom: 6px; }
.tips li::before { content: "•"; display: inline-block; width: 16px; text-indent: 0; color: var(--q-unique); }
.source { margin-top: 20px; }

/* ---- Skill trees: the game's 6 rows by 3 columns per tree ---- */

.skill-trees { margin-bottom: 32px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin-bottom: 12px; }
.section-head .hint { margin: 0; }
.tree-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) {
  .tree-tabs { grid-template-columns: minmax(0, 1fr); }
}
.tree { padding: 14px; background: var(--stone-raised); border: 1px solid var(--line); border-radius: var(--radius); }
.tree h3 { font-size: var(--step-0); color: var(--text-dim); margin-bottom: 10px; }
.tree-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 6px; }

.skill {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 3.6rem;
  padding: 6px 8px;
  font: inherit;
  font-size: var(--step--1);
  line-height: 1.2;
  text-align: left;
  color: var(--text);
  background: var(--stone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.skill:hover:not(:disabled) { border-color: var(--q-socketed); }
.skill:disabled { cursor: default; }
.skill-points {
  align-self: flex-end;
  font-size: var(--step-1);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--q-magic);
}
.skill.has .skill-name { color: var(--q-unique); }
.skill-bonus { margin-left: 4px; font-size: var(--step--1); color: var(--q-magic); }
.skill-points { color: var(--q-normal); }
.skill.locked { color: var(--text-dim); border-style: dashed; }
/* The guide's pick for your next point. */
.skill.suggested { border-color: var(--q-crafted); box-shadow: inset 0 0 0 1px var(--q-crafted); }

/* ---- Quests ---- */

.quest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 20px; margin-top: 12px; }
.quest-grid .field { margin-bottom: 12px; }

@media (max-width: 560px) {
  .advice-row { grid-template-columns: minmax(0, 1fr); }
  .tree-grid { gap: 4px; }
}