/* ==========================================================================
   Northrend Progress Tracker – builds on ../assets/css/style.css
   ========================================================================== */

.tracker-hero {
  padding-bottom: 36px;
}

.tracker-hero .section-intro {
  max-width: 640px;
  margin-inline: auto;
}

/* ---------- Lookup form ---------------------------------------------------- */
.tracker-form {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  padding: 6px 8px 8px;
}

.tracker-form__field {
  display: grid;
  gap: 6px;
}

.tracker-form label {
  color: var(--c-gold-soft);
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tracker-form input,
.tracker-form select,
.t-search {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(140, 200, 255, 0.35);
  border-radius: 3px;
  background: rgba(2, 8, 14, 0.75);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  color: var(--c-white);
  font: inherit;
}

.tracker-form select {
  cursor: pointer;
}

.tracker-form input:focus,
.tracker-form select:focus,
.t-search:focus {
  border-color: var(--c-frost);
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(79, 195, 255, 0.35);
}

.tracker-form__submit {
  min-height: 46px;
}

.tracker-form__submit:disabled {
  cursor: progress;
  filter: grayscale(0.6) brightness(0.8);
}

.tracker-status {
  min-height: 1.6em;
  margin: 18px 0 0;
  color: var(--c-ink-dim);
  text-align: center;
}

.tracker-status.is-loading {
  color: var(--c-frost);
}

.tracker-status.is-error {
  color: #ffb266;
}

.tracker-note {
  margin: 40px auto 0;
  max-width: 720px;
  color: var(--c-ink-mute);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------- Progress bars (native <progress>, no inline styles needed) ------ */
.t-bar {
  /* Firefox keeps drawing its own inset/white track behind the border unless -moz-appearance is
     reset too (Chrome/Safari only need the unprefixed + -webkit- variants). */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 8px;
  border: 1px solid #000;
  border-radius: 2px;
  background: #0b141e;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.t-bar::-webkit-progress-bar {
  background: #0b141e;
  border-radius: 2px;
}

.t-bar::-webkit-progress-value {
  background: linear-gradient(180deg, #ffe27a, var(--c-gold) 45%, #a06c00);
  border-radius: 2px;
}

.t-bar::-moz-progress-bar {
  background: linear-gradient(180deg, #ffe27a, var(--c-gold) 45%, #a06c00);
  border-radius: 2px;
}

/* ---------- Character card ------------------------------------------------- */
.tracker-result {
  margin-top: 26px;
}

.tracker-char {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 24px;
  align-items: center;
  padding: 10px 14px;
}

/* The avatar spans the text block next to it, top to bottom (the margins cancel the leading above the first and
   below the last line, so the picture ends where the letters end). CSS cannot make a width follow a height that
   is itself set by the text, so the width is fixed to about that block's height; the height always follows the
   text and object-fit crops (never distorts) the picture when the block is a bit taller or shorter. */
.tracker-char__who {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.tracker-char__avatar {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 9.3rem;
  margin: 0.3rem 16px 0.4rem 0;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(2, 8, 14, 0.6);
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #4b5560;
  transition: box-shadow 0.2s ease;
}

.tracker-char__avatar:hover {
  box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--c-frost);
}

.tracker-char__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.tracker-char__head,
.tracker-char__details {
  grid-column: 2;
  min-width: 0;
}

.tracker-char__head {
  grid-row: 1;
}

.tracker-char__details {
  grid-row: 2;
}

.tracker-char__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.tracker-char__name {
  margin: 0;
  color: var(--c-white);
  font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem);
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(79, 195, 255, 0.35);
}

/* The name links to the Armory but keeps the headline look: white in every state, also once visited. */
.tracker-char__name a,
.tracker-char__name a:visited,
.tracker-char__name a:hover,
.tracker-char__name a:active {
  color: inherit;
  text-decoration: none;
}

.tracker-char__name a:hover,
.tracker-char__name a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--c-gold-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.tracker-char__refresh {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(230, 195, 117, 0.5);
  border-radius: 50%;
  background: rgba(2, 8, 14, 0.6);
  color: var(--c-gold-soft);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.tracker-char__refresh:hover:not(:disabled) {
  border-color: var(--c-frost);
  color: var(--c-white);
}

.tracker-char__refresh:disabled {
  cursor: progress;
  opacity: 0.6;
}

.tracker-char__refresh.is-loading {
  animation: tracker-spin 0.9s linear infinite;
}

.tracker-faction-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #4b5560;
}

.tracker-char__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
  color: var(--c-ink);
}

.tracker-char__login {
  margin: 6px 0 0;
  color: var(--c-ink-mute);
  font-size: 0.85rem;
}

.tracker-char__updated {
  margin: 2px 0 0;
  color: var(--c-ink-mute);
  font-size: 0.78rem;
}

.tracker-char__refresh-note {
  color: #ffb266;
}

@keyframes tracker-spin {
  to {
    transform: rotate(360deg);
  }
}

.tracker-char__overall {
  text-align: right;
}

.tracker-char__percent {
  margin: 0;
  color: var(--c-gold);
  font-family: var(--f-display);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 #000, 0 0 22px rgba(255, 209, 0, 0.25);
}

.tracker-char__count {
  margin: 6px 0 8px;
  color: var(--c-ink-dim);
  font-size: 0.85rem;
}

.tracker-char__actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 10px;
}

.t-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-frost);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-decoration-color: rgba(159, 220, 255, 0.4);
  text-underline-offset: 3px;
}

.t-link:hover {
  color: var(--c-white);
}

/* ---------- Category tiles ------------------------------------------------- */
.tracker-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
}

.tracker-tile {
  display: grid;
  gap: 4px;
  padding: 14px 14px 12px;
  border: 1px solid #000;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(20, 44, 70, 0.9), rgba(6, 14, 24, 0.9));
  box-shadow: inset 0 0 0 1px rgba(159, 220, 255, 0.14), 0 8px 18px rgba(0, 0, 0, 0.4);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tracker-tile:hover {
  color: inherit;
  box-shadow: inset 0 0 0 1px rgba(159, 220, 255, 0.4), 0 0 22px rgba(79, 195, 255, 0.22);
  transform: translateY(-2px);
}

.tracker-tile__title {
  color: var(--c-gold-soft);
  font-family: var(--f-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.tracker-tile__percent {
  color: var(--c-white);
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.tracker-tile__count {
  color: var(--c-ink-dim);
  font-size: 0.8rem;
}

.tracker-tile.is-unavailable {
  opacity: 0.6;
}

/* ---------- Toolbar -------------------------------------------------------- */
.tracker-toolbar {
  position: sticky;
  top: calc(var(--header-h) + 38px); /* below the icicles hanging from the header */
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-bottom: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(140, 200, 255, 0.2);
  border-radius: 3px;
  background: rgba(3, 8, 15, 0.94);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}

.t-seg {
  display: inline-flex;
  border: 1px solid rgba(230, 195, 117, 0.5);
  border-radius: 3px;
  overflow: hidden;
}

.t-seg__button {
  padding: 8px 16px;
  border: 0;
  background: transparent;
  color: var(--c-gold-soft);
  cursor: pointer;
  font-family: var(--f-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.t-seg__button + .t-seg__button {
  border-left: 1px solid rgba(230, 195, 117, 0.3);
}

.t-seg__button[aria-pressed="true"] {
  background: linear-gradient(180deg, #3e97e0 0%, #1d62ad 48%, #0f3f7a 52%, #154f93 100%);
  color: #fff;
}

.t-check {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--c-ink);
  cursor: pointer;
  font-size: 0.9rem;
}

.t-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--c-frost-strong);
}

.t-search {
  flex: 1 1 200px;
  min-height: 38px;
  max-width: 320px;
  margin-left: auto;
  padding: 6px 10px;
}

/* ---------- Sections and groups ------------------------------------------- */
.tracker-section {
  margin-top: 34px;
  scroll-margin-top: calc(var(--header-h) + 80px);
}

.tracker-section__head {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tracker-section__head .subsection-title {
  margin: 0;
}

.tracker-section__count {
  color: var(--c-ink-dim);
  font-family: var(--f-display);
  font-weight: 700;
}

.tracker-empty {
  color: var(--c-ink-mute);
  font-style: italic;
}

.tracker-group {
  margin-bottom: 10px;
  border: 1px solid #000;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(11, 27, 45, 0.85), rgba(4, 10, 18, 0.9));
  box-shadow: inset 0 0 0 1px rgba(159, 220, 255, 0.1);
}

.tracker-group__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(90px, 180px);
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.tracker-group__summary::-webkit-details-marker {
  display: none;
}

.tracker-group__title {
  color: var(--c-white);
  font-family: var(--f-display);
  font-weight: 700;
}

.tracker-group__title::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 12px 2px 2px;
  border-right: 2px solid var(--c-gold-soft);
  border-bottom: 2px solid var(--c-gold-soft);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.tracker-group[open] .tracker-group__title::before {
  transform: rotate(45deg);
}

.tracker-group__count {
  color: var(--c-ink-dim);
  font-size: 0.9rem;
}

.t-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
}

/* ---------- Entries -------------------------------------------------------- */
.t-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #2f3842;
  border-radius: 3px;
  background: linear-gradient(180deg, #1b2027 0%, #11151a 60%, #0b0e12 100%);
}

.t-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #4b5560;
  filter: grayscale(0.85) brightness(0.65);
}

.t-item__name {
  margin: 0;
  color: #c9d2db;
  font-weight: 700;
  line-height: 1.3;
}

.t-item__points {
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid rgba(230, 195, 117, 0.45);
  border-radius: 8px;
  color: var(--c-gold-soft);
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: 2px;
}

.t-item__meta,
.t-item__reward {
  margin: 2px 0 0;
  color: var(--c-ink-mute);
  font-size: 0.8rem;
  line-height: 1.4;
}

.t-item__reward {
  color: #b99a55;
}

.t-item__state {
  min-width: 28px;
  color: var(--c-frost);
  font-family: var(--f-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.t-item__state.is-muted {
  color: var(--c-ink-mute);
}

.t-item__state.is-done {
  color: var(--c-gold);
  font-size: 1.1rem;
  text-shadow: 0 0 10px rgba(255, 209, 0, 0.5);
}

.t-item__skip {
  padding: 3px 8px;
  border: 1px solid #4b5560;
  border-radius: 2px;
  background: transparent;
  color: var(--c-ink-dim);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.t-item__skip:hover {
  border-color: var(--c-frost);
  color: var(--c-white);
}

.t-item__skip[aria-pressed="true"] {
  border-color: rgba(255, 128, 0, 0.6);
  color: #ffb266;
}

.t-item.is-done {
  border-color: #8a6a2a;
  background:
    linear-gradient(90deg, rgba(255, 209, 0, 0.1), transparent 60%),
    linear-gradient(180deg, #3a2e17 0%, #211a0d 55%, #150f07 100%);
}

.t-item.is-done .t-item__icon {
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #c9a44c;
  filter: none;
}

.t-item.is-done .t-item__name {
  color: var(--c-gold);
}

.t-item.is-done .t-item__meta {
  color: #bfae88;
}

.t-item.is-skipped {
  opacity: 0.5;
}

.t-item.is-skipped .t-item__name {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 178, 102, 0.6);
}

/* ---------- Responsive ----------------------------------------------------- */
@media (max-width: 1100px) {
  .tracker-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .tracker-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .tracker-form__field--region {
    grid-column: 1 / -1;
  }

  .tracker-form__submit {
    grid-column: 1 / -1;
  }

  .tracker-char {
    grid-template-columns: minmax(0, 1fr);
  }

  .tracker-char__overall {
    text-align: left;
  }

  .tracker-char__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  /* Narrow screens: eyebrow and name keep the full width (a long name must not be squeezed by the picture);
     the avatar sits next to the three detail lines below them. */
  .tracker-char__head,
  .tracker-char__details {
    display: contents;
  }

  .tracker-char__who .eyebrow,
  .tracker-char__title {
    grid-column: 1 / -1;
  }

  .tracker-char__meta,
  .tracker-char__login,
  .tracker-char__updated {
    grid-column: 2;
  }

  .tracker-char__avatar {
    grid-row: 3 / span 3;
    width: 4rem;
    margin: 0.4rem 16px 0.4rem 0;
  }

  .tracker-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .tracker-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tracker-toolbar {
    position: static;
  }

  .t-search {
    max-width: none;
    margin-left: 0;
  }

  .tracker-group__summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .tracker-group__summary .t-bar {
    grid-column: 1 / -1;
  }

  .t-list {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 8px 8px;
  }

  .t-item {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .t-item__icon {
    width: 36px;
    height: 36px;
  }

  .t-item__skip {
    grid-column: 2 / -1;
    justify-self: start;
  }
}