/* Mastery page. Tokens and components come from style.css (.panel, table.stack, .chip, .parts and .part). */

/* ---------- header ---------- */

/* Overall progress: mastered out of every item, with a bar under the figure */
.totals > .overall { min-width: 13rem; }
.overall .pct { margin-left: var(--sp-1); color: var(--gold-hi); font-size: var(--step-0); }
.overall .meter { display: block; width: 100%; height: 4px; margin-top: var(--sp-2); }

/* ---------- mastery rank ---------- */

/* Rank badge and XP to the next rank, then completion and XP by source in three boxes */
.summary.panel { display: grid; gap: var(--sp-4); padding: var(--sp-4); }
.mr { display: flex; align-items: center; gap: var(--sp-4); }
.mr-badge {
  display: grid; place-items: center; flex: none; width: 3.6rem; height: 3.6rem;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, var(--gold-hi), var(--gold) 55%, var(--lapis-950));
  font: 600 var(--step-1) var(--num); color: var(--lapis-950);
}
.mr-badge[data-tier="legendary"] { background: linear-gradient(160deg, #fff3cf, var(--void) 60%, var(--lapis-950)); }
.mr-badge[data-tier=""] { background: var(--lapis-950); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-soft); }
.mr-progress { display: grid; flex: 1; gap: var(--sp-1); min-width: 0; }
.mr-title { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: baseline; }
.mr-title strong { font: 400 var(--step-1) var(--display); color: var(--ivory); }
.mr-meter.meter { width: 100%; height: 6px; }
.mr-xp { margin: 0; font: 500 var(--step--1) var(--num); color: var(--muted); font-variant-numeric: tabular-nums; }
.mr-xp .pct, .source h3 .pct { color: var(--gold-hi); font-family: var(--num); }

.sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp-3) var(--sp-5); }
.source h3 { display: flex; justify-content: space-between; gap: var(--sp-2); margin: 0 0 var(--sp-1); font: 400 var(--step-0) var(--display); color: var(--ivory); }
.source-rows { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.source-rows th { padding: 0.15rem var(--sp-2) 0.15rem 0; color: var(--muted); font-weight: 400; text-align: left; }
.source-rows td { padding: 0.15rem 0 0.15rem var(--sp-2); font-family: var(--num); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------- level up ---------- */

.tools .modes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.tools .modes[hidden], .summary.panel[hidden] { display: none; }
.modes-label { font: 400 var(--step-0) var(--display); color: var(--ivory); }
table.plan th.num, table.plan td.num { width: 8rem; text-align: right; }
.gain { font: 600 var(--step--1) var(--num); color: var(--ok); }
.plan-pieces { display: grid; gap: var(--sp-1); }
.plan-pieces .chance, .plan-pieces .cost { font: 600 var(--step-0) var(--num); color: var(--ivory); }
.pieces { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; font-size: var(--step--2); }
.pieces li { display: flex; flex-wrap: wrap; gap: 0.1rem var(--sp-2); align-items: baseline; }
.pieces .pn { color: var(--ivory); }
.pieces .pc { font-family: var(--num); color: var(--gold-hi); }
.pieces .pr { display: flex; flex-wrap: wrap; gap: 0.1rem var(--sp-2); }

/* ---------- tools ---------- */

/* Search and sort on one line, then the filters in their box */
.tools { display: grid; gap: var(--sp-3); }
.tools .find { justify-content: space-between; }
.tools .filters { margin: 0; }

/* ---------- groups ---------- */

.groups { display: grid; gap: var(--sp-4); }
.group.panel { margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.group .panel-head h2 { display: flex; align-items: center; gap: var(--sp-2); }
.group .panel-head .chip { font-family: var(--num); }

table.mastery td { vertical-align: middle; }
table.mastery th:first-child { width: 32%; }
table.mastery.with-foundry th:last-child { width: 22%; }
table.mastery tbody tr:last-child td { border-bottom: 0; }

/* Promote to style.css (Arcanes has the same): name cell text, sub line and item link */
.cell-name > div { display: grid; min-width: 0; }
.cell-name .sub { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; margin-top: 0.1rem; font-size: var(--step--2); }
a.item { color: inherit; text-decoration: none; }
a.item:hover { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
/* The name opens the wiki; the market page is a quieter link on the sub line */
a.item .ext { color: var(--muted); font-size: var(--step--2); }
.cell-name a.market { color: var(--muted); }
.cell-name a.market:hover { color: var(--ivory); }

/* ---------- relics ---------- */

/* Prime items: the relics dropping the blueprint and each part, coloured by rarity like the inventory's rewards */
details.relics { margin-top: var(--sp-1); }
details.relics summary { display: flex; align-items: center; gap: var(--sp-2); }
.drops { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem var(--sp-3); margin: var(--sp-2) 0 0; }
.drops dt { color: var(--muted); }
.drops dd { display: flex; flex-wrap: wrap; gap: 0.2rem var(--sp-2); margin: 0; }
.drop { color: var(--rar, var(--ivory)); font-family: var(--num); white-space: nowrap; }
.drop.common { --rar: var(--intact); }
.drop.uncommon { --rar: var(--exceptional); }
.drop.rare { --rar: var(--flawless); }
.drop.vaulted { opacity: 0.6; text-decoration: line-through; text-decoration-color: var(--muted); }
.relics .legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-2) 0 0; font-size: var(--step--2); }

/* ---------- progress ---------- */

/* Promote to style.css: a bar filled to a share, notched into --steps pieces (ranks by ten, parts by one).
   .building fills void blue, .ready and .done green. */
.meter {
  --steps: 1;
  position: relative;
  display: inline-block;
  flex: none;
  width: 8rem;
  height: 6px;
  border-radius: 1px;
  background: var(--lapis-950);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  overflow: hidden;
  vertical-align: middle;
}
.meter > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  box-shadow: 0 0 8px var(--gold-soft);
  transition: width var(--mid) var(--ease);
}
.meter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--steps) - 2px), var(--lapis-950) calc(100% / var(--steps) - 2px) calc(100% / var(--steps)));
  pointer-events: none;
}
.meter.building > span { background: var(--void); box-shadow: 0 0 8px var(--void-soft); }
.meter.ready > span, .meter.done > span { background: var(--ok); box-shadow: none; }

/* Rank: bar, rank out of the maximum, then whether it is mastered, owned or sold */
.progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); font-family: var(--num); }
.rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.rank b { color: var(--ivory); font-weight: 600; font-size: var(--step-0); }

/* To craft: a bar of the pieces you have, then the blueprint and parts themselves */
.craft-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
.craft-head .count { font: 600 var(--step--1) var(--num); color: var(--ivory); font-variant-numeric: tabular-nums; }
table.mastery .parts { margin: var(--sp-2) 0 0; gap: 0.3rem; }
table.mastery .part { padding: 0.15rem 0.5rem; }

/* Part chips: done in grey, building in void blue, blueprint owned in gold, missing in red */
.part.building { border-left-color: var(--info); }
.part.building .pk { color: var(--info); }
.part.blueprint { border-left-color: var(--gold); }
.part.blueprint .pk { color: var(--gold-hi); font: 600 var(--step--2) var(--num); }
.part.missing { border-left-color: var(--danger); }
.part.missing .pn { color: var(--muted); font-weight: 400; }
.part.missing .pk { color: var(--danger); }

/* ---------- foundry ---------- */

.jobs { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.jobs li { display: flex; justify-content: space-between; gap: var(--sp-3); }
.jobs .jn { color: var(--ivory); }
.jobs .jt { font-family: var(--num); color: var(--info); white-space: nowrap; }
.jobs li.done .jt { color: var(--ok); font-weight: 600; }

/* ---------- states ---------- */

/* Loading: a heading bar, then rows the height of the table's */
#main > .skeleton span { height: 3.6rem; }
#main > .skeleton span:first-child { width: min(12rem, 50%); height: 1.6rem; }
.empty p { margin: var(--sp-4) 0 0; }

/* ---------- tablet and phone ---------- */

@media (max-width: 64rem) {
  table.mastery th:first-child { width: 38%; }
  .meter { width: 6rem; }
}

@media (max-width: 40rem) {
  .totals > .overall { flex-basis: 100%; }
  .summary.panel { padding: var(--sp-3); }
  .mr-badge { width: 3rem; height: 3rem; }
  table.plan td.num { width: auto; }
  table.mastery td.plan-cell { display: block; text-align: left; }
  .group.panel { padding: var(--sp-3); }
  .tools .find .sort { flex: 1 1 100%; }
  .tools .find .sort select { flex: 1; }
  /* Parts and foundry jobs take the card's full width, under their label */
  table.mastery td.craft-cell, table.mastery td.jobs-cell { display: block; text-align: left; }
  table.mastery td.craft-cell::before, table.mastery td.jobs-cell::before { display: block; margin-bottom: var(--sp-1); }
  table.mastery .progress { justify-content: flex-end; }
  .meter { width: 5rem; }
  .craft-cell .meter { flex: 1; }
  #main > .skeleton span { height: 7rem; }
}