/* The quest area of the account page: the quest board, the achievement wall,
   the mastery shelf, the emblem strip and the Look tab's mastery banners.
   Drawn by js/quest-area.js. Loaded after the other page sheets.

   The rules of this sheet, in short: structure is carried by words with a 2px
   ink line and by rows between hairlines, never by boxes or rows of chips.
   Orange appears only on something that can be claimed right now. Ink marks
   the chosen tab, the chosen set, a lit bar. A medal's ring is the one circle,
   because a medal is round, and its colour is its tier: bronze, silver,
   platinum, gold. Motion is transform and opacity only and is off under
   reduced motion and body.no-motion. */

/* ---- Shared bits --------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.qa-coin {
  color: var(--ink); font-size: 15px; font-weight: 650; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.qa-count, .qa-done {
  color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.qa-done { display: inline-flex; align-items: center; gap: 6px; }
.qa-done::before {
  content: ""; width: 9px; height: 5px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translateY(-2px);
}
/* A hairline: 2px, the track is the line colour, the fill is ink. */
.qa-bar { display: block; height: 2px; background: var(--line-2); overflow: hidden; }
.qa-bar i { display: block; height: 100%; background: var(--ink-2); }
.qa-bar.full i { background: var(--ink); }
/* One square per thing to finish (a chest counts the quests it covers). */
.qa-segs { display: flex; gap: 3px; }
.qa-segs i { flex: 1; max-width: 44px; height: 4px; background: var(--line-2); }
.qa-segs i.on { background: var(--ink); }
.qa-empty { margin: 0; padding: 28px 0; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 56ch; }
.qa-empty.slim { padding: 4px 0 0; font-size: 14px; }
.qa-none { margin: 0; color: var(--muted); font-size: 14px; }

/* A claim in flight: still focusable, but inert and dimmed until the repaint. */
.qa-claim[aria-disabled="true"], .claim-cta[aria-disabled="true"] { opacity: 0.55; pointer-events: none; cursor: default; }

/* ---- Account tabs: words, the ink line under the open one ----------------- */
#view-account .acct-tabs {
  display: flex; gap: 26px; width: auto; max-width: none;
  margin: 30px calc(-1 * var(--gutter)) 30px; padding: 0 var(--gutter);
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
#view-account .acct-tabs .acct-tab {
  position: relative; flex: none; min-height: 0; padding: 12px 0 14px;
  border: 0; border-radius: 0; background: none; box-shadow: none; animation: none;
  color: var(--muted); font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: color 0.15s ease;
}
#view-account .acct-tabs .acct-tab:hover { color: var(--ink); background: none; }
#view-account .acct-tabs .acct-tab.on { color: var(--ink); background: none; box-shadow: none; animation: none; }
#view-account .acct-tabs .acct-tab.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink);
}
#view-account .acct-tabs .acct-dot { margin-left: 8px; vertical-align: 1px; }

/* ---- Words: the category, era and motion pickers -------------------------- */
.qa-words {
  position: relative; display: flex; gap: 30px;
  margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.qa-words::-webkit-scrollbar { display: none; }
.qa-word {
  position: relative; flex: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-width: 0; min-height: 0; padding: 11px 0 13px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--muted); font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  scroll-snap-align: start; transition: color 0.15s ease;
}
.qa-word small { color: var(--muted); font-size: 12.5px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.qa-word:hover { color: var(--ink); }
.qa-word.on { color: var(--ink); }
.qa-word.on small { color: var(--ink-2); }
.qa-word.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink);
}
/* A square of ink beside a word that has something to claim right now. */
.qa-dot { position: absolute; top: 15px; right: -12px; width: 6px; height: 6px; background: var(--ink); }
/* Inside a section (the banner motion picker) the words do not bleed. */
.qa-words-inline { margin: 0 0 4px; padding: 0; }
.qa-words-inline .qa-word { padding: 8px 0 13px; }

/* ---- Quest board ----------------------------------------------------------- */
.qb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.qb-periods { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px 48px; align-items: start; }

.qb-streak {
  display: grid; gap: 16px 32px; align-items: end;
  padding: 0 0 22px; border-bottom: 1px solid var(--line);
}
.qb-streak-copy p { margin: 0; color: var(--ink-2); font-size: 15px; }
.qb-streak-copy p:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.qb-streak-copy b { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.qb-streak-copy span { color: var(--muted); font-size: 14px; }
.qb-streak-hint { margin-top: 4px !important; color: var(--muted) !important; font-size: 14px !important; }
.qb-days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; max-width: 480px; }
.qb-days li { display: grid; gap: 5px; justify-items: stretch; }
.qb-days i { display: block; aspect-ratio: 1; background: var(--surface-3); border-radius: 2px; }
.qb-days .on i { background: var(--ink); }
.qb-days .today i { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.qb-days .today.on i { box-shadow: none; }
.qb-days small { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1; text-align: center; }
.qb-days .today small { color: var(--ink-2); }

.qb-head { margin: 0 0 6px; }
.qb-head h2 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.qb-head p {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px;
  margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45;
}
.qb-head p span { font-variant-numeric: tabular-nums; }
.qb-rows { display: grid; margin: 0; padding: 0; list-style: none; }

/* A quest is a flat row between hairlines: name and coins, the note and the
   state, then a hairline bar. */
.qrow {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 3px 16px; padding: 15px 0 17px; border-top: 1px solid var(--line);
}
.qrow:first-child { border-top: 0; }
.qrow-name { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 16px; font-weight: 650; line-height: 1.25; }
.qrow-note { grid-column: 1; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.qrow .qa-coin { grid-column: 2; justify-self: end; }
.qrow-status { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; min-height: 28px; display: inline-flex; align-items: center; }
.qrow .qa-bar, .qrow .qa-segs { grid-column: 1 / -1; margin-top: 11px; }
.qrow .qa-claim { min-height: 38px; padding: 0 18px; }
.qrow.is-claimed .qrow-name, .qrow.is-claimed .qrow-note { color: var(--muted); }
.qrow.is-claimed .qa-coin { color: var(--muted); }
.qrow.is-claimed .qrow-name { font-weight: 550; }
.qrow.is-open .qrow-name { color: var(--ink); }
/* The chest is the finale: set apart by a stronger rule above it. */
.qrow-chest { margin-top: 4px; border-top: 1px solid var(--line-2); }
.qrow-chest.is-open .qrow-name, .qrow-chest.is-open .qa-coin { opacity: 0.62; }
.qa-chest { flex: none; }

/* ---- Achievement wall -------------------------------------------------------- */
.qa-wall, .qm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.qa-wall > *, .qm > * { min-width: 0; }
.qa-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  margin: 0 0 22px; padding: 0;
}
.qa-head .claim-cta { flex: none; }
/* One sentence of totals and a hairline bar, not a row of big numbers. */
.qa-summary { flex: 1 1 420px; min-width: 0; max-width: 680px; }
.qa-sumline { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.qa-sumline b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.qm > .qa-sumline { margin: 0 0 22px; }
.qa-summary .dex-bar { height: 2px; border-radius: 0; background: var(--line-2); overflow: hidden; }
.qa-summary .dex-bar span { display: block; height: 100%; background: var(--ink); animation: none; }

.qa-bar-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin: 18px 0 16px;
}
.qa-catnote { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
/* A square segmented control, the same one css/theme.css gives .seg. */
.qa-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent; }
.qa-seg > :first-child { border-radius: 5px 0 0 5px; }
.qa-seg > :last-child { border-radius: 0 5px 5px 0; }
.qa-seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border: 0; border-radius: 0; background: transparent;
  color: var(--ink-2); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.qa-seg button + button { border-left: 1px solid var(--line-2); }
.qa-seg button small { color: var(--muted); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.qa-seg button:hover { color: var(--ink); }
.qa-seg button.on { background: var(--ink); color: var(--black); box-shadow: none; }
.qa-seg button.on small { color: var(--print-2); }

.qa-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 44px; }
/* Big categories paint what is on screen: off-screen tiles skip layout and paint. */
.qa-grid.big .qa-tile { content-visibility: auto; contain-intrinsic-size: auto 96px; }
.qa-grid.preview .qa-tile { opacity: 0.78; }

/* Tier: the ring's colour. Bronze, silver, platinum, then gold. */
.qa-tile, .next-row, .qa-badge.t1 { --tone: #c58d63; }
.qa-tile.t2, .next-row.t2, .qa-badge.t2 { --tone: #b4bdc9; }
.qa-tile.t3, .next-row.t3, .qa-badge.t3 { --tone: #eef2f7; }
.qa-tile.t4, .next-row.t4, .qa-badge.t4 { --tone: var(--gold); }

/* A badge is a flat row between hairlines: the medal, the name and what it asks,
   the coins and the state, then a hairline bar. */
.qa-tile {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px;
  padding: 14px 0 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none;
}
.qa-copy { min-width: 0; }
.qa-copy b { display: block; font-size: 15px; font-weight: 650; line-height: 1.25; }
.qa-copy p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.qa-own { display: block; margin-top: 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.qa-side { display: grid; justify-items: end; align-content: center; gap: 6px; min-width: 64px; }
.qa-side .qa-claim { min-height: 36px; padding: 0 16px; }
.qa-tile > .qa-bar { grid-column: 1 / -1; margin-top: 8px; }
.qa-tile > .qa-bar i { background: var(--tone); }

.qa-tile.is-locked .qa-copy b { color: var(--ink-2); }
.qa-tile.is-claimed .qa-coin { color: var(--muted); }
.qa-tile.is-claimed .qa-copy b { color: var(--ink-2); font-weight: 550; }

/* The medal: a ring in the tier's colour around the mark or the set symbol. It is bright once
   the badge is within reach and dim while it is far off; the hairline bar carries the progress. */
.qa-badge {
  position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--tone, #c58d63);
}
.qa-tile.is-locked .qa-badge, .next-row .qa-badge { background: color-mix(in oklab, var(--tone, #c58d63) 45%, var(--line-2)); }
.qa-badge.sm { width: 46px; height: 46px; }
.qa-badge > span {
  position: absolute; inset: 3px; display: grid; place-items: center; border-radius: 50%;
  background: var(--well);
  color: var(--tone, #c58d63);
  font-family: var(--font); font-size: 15px; font-weight: 800; font-variation-settings: "opsz" 96;
  letter-spacing: -0.03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.qa-badge.long > span { font-size: 12.5px; }
.qa-badge > span img { display: block; width: 24px; height: 24px; object-fit: contain; }
.qa-tile.is-locked .qa-badge > span { color: color-mix(in oklab, var(--tone, #c58d63) 55%, var(--faint)); }
.qa-tile.is-locked .qa-badge > span img { opacity: 0.6; }
.qa-tile.is-ready .qa-badge > span { color: var(--ink); }

/* Secret rows: a closed row. No name, no note, no numbers. */
.qa-tile.is-secret .qa-badge { --tone: var(--faint); background: var(--line-2); }
.qa-tile.is-secret .qa-badge > span { color: var(--muted); font-size: 20px; }
.qa-tile.is-secret .qa-copy b { color: var(--muted); font-size: 16px; letter-spacing: 0.14em; }
.qa-tile.is-secret .qa-hint { color: var(--muted); font-size: 13px; line-height: 1.4; }
.qa-tile.is-secret .qa-hint::before { content: "\201C"; }
.qa-tile.is-secret .qa-hint::after { content: "\201D"; }
.qa-tile.is-secret .qa-coin { color: var(--muted); }
.qa-secret-mark {
  display: inline-block; margin-left: 9px; padding: 0 0 0 10px; position: relative;
  color: var(--ink-2); font-family: var(--font); font-size: 11.5px; font-style: normal; font-weight: 600; letter-spacing: 0;
}
.qa-secret-mark::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--ink-2); }

/* The claim moment: the tile settles and a ring of light leaves it. */
@keyframes qa-settle { 0% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes qa-ring { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes qa-reveal { 0% { opacity: 0; transform: translateY(4px) scale(0.985); } 100% { opacity: 1; transform: none; } }
.qa-tile.is-fresh, .qrow.is-fresh { animation: qa-settle 0.5s var(--ease-spring, cubic-bezier(0.2, 0.9, 0.3, 1.2)); }
.qa-tile.is-fresh .qa-badge::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--tone);
  pointer-events: none; animation: qa-ring 0.9s ease-out both;
}
.qa-tile.is-reveal .qa-copy, .qa-tile.is-reveal .qa-side { animation: qa-reveal 0.6s ease-out both; }
.qa-tile.is-reveal .qa-badge::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ink);
  pointer-events: none; animation: qa-ring 1.1s ease-out both;
}

.qm-detail .qa-own { display: none; }
.qm-detail-rows .qa-grid { gap: 0; }

/* ---- Emblem strip: a quiet row under the title -------------------------------- */
.mstrip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 14px 0 0; padding: 0;
  border: 0; border-radius: 0; background: none; color: var(--muted); text-align: left; font-size: 13px;
}
button.mstrip { min-height: 0; }
button.mstrip:hover small { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.mstrip-list { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.mstrip-list li { width: 28px; height: 28px; line-height: 0; }
.mstrip small { font-size: 13px; font-weight: 500; }


.qa-fold { margin-top: 14px; border-top: 1px solid var(--line); }
.qa-fold > summary {
  display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 12px 0; cursor: pointer; list-style: none;
  color: var(--ink-2); font-size: 15px; font-weight: 600;
}
.qa-fold > summary::-webkit-details-marker { display: none; }
.qa-fold > summary::after {
  content: ""; align-self: center; margin-left: auto; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s var(--ease-out, ease-out);
}
.qa-fold[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.qa-fold > summary small { color: var(--muted); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.qa-fold[open] > summary { color: var(--ink); }
.title-groups { display: grid; }
.qa-hidden-titles { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.title-groups .qa-fold:first-child { margin-top: 0; }
.title-groups .title-chip b { padding-right: 0; }
.title-groups .title-wall { max-height: none; overflow: visible; padding: 2px 0 16px; }
.qa-fold > .mb-grid { padding: 0 0 12px; }

/* ---- Reward flash: mastery brings the emblem ------------------------------------ */
.reward-flash { width: max-content; max-width: calc(100vw - 32px); }
.reward-flash.has-mastery { padding-top: 20px; }
.flash-emblems { display: flex; justify-content: center; gap: 8px; margin: 0 0 12px; }
.flash-emblems .mastery-emblem { display: block; }
.reward-flash i { display: block; margin-top: 3px; }

/* ---- Bigger screens ------------------------------------------------------------- */
@media (min-width: 540px) {
  .qb-days { grid-template-columns: repeat(14, 28px); gap: 6px; max-width: none; }
}
@media (min-width: 720px) {
  .qa-words { margin-inline: 0; padding-inline: 0; overflow: visible; flex-wrap: wrap; gap: 0 26px; }
  #view-account .acct-tabs { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .qa-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .qa-grid.one { grid-template-columns: minmax(0, 1fr); }
  .qb-streak { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
  .qb-days { justify-self: end; }
  .qb-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .qb-periods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qb-periods:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  /* 44px is the least a thumb needs. */
  .qa-seg button { min-height: 44px; }
  .qa-side .qa-claim, .qrow .qa-claim { min-height: 44px; min-width: 64px; }
  .qrow.is-ready .qrow-status { min-height: 44px; }
  .qa-words-inline .qa-word { min-height: 44px; min-width: 44px; padding: 10px 0 12px; }
  button.mstrip { min-height: 44px; }
  .qa-words, #view-account .acct-tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .qa-words-inline { -webkit-mask-image: none; mask-image: none; }
  .qa-head .claim-cta { width: 100%; justify-content: center; }
  .qa-seg { display: grid; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .qa-seg button { padding: 0 6px; min-width: 0; }
  .qa-bar-row { gap: 10px; }
}
@media (max-width: 380px) {
  .qa-tile { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 12px; }
  .qa-badge { width: 44px; height: 44px; }
  .qa-seg button small { display: none; }
}

/* ---- Motion off --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .qa-tile.is-fresh, .qrow.is-fresh, .qa-tile.is-reveal .qa-copy, .qa-tile.is-reveal .qa-side { animation: none; }
  .qa-tile.is-fresh .qa-badge::after, .qa-tile.is-reveal .qa-badge::after { animation: none; opacity: 0; }
  .qa-fold > summary::after { transition: none; }
}
body.no-motion .qa-tile.is-fresh, body.no-motion .qrow.is-fresh,
body.no-motion .qa-tile.is-reveal .qa-copy, body.no-motion .qa-tile.is-reveal .qa-side { animation: none; }
body.no-motion .qa-tile.is-fresh .qa-badge::after, body.no-motion .qa-tile.is-reveal .qa-badge::after { animation: none; opacity: 0; }
/* The gifts line under a claim: a real link to the gear page, inside a card that otherwise ignores the pointer. */
.reward-flash .flash-gear {
  display: inline-block; margin-top: 10px; padding: 6px 0 3px; pointer-events: auto;
  border-bottom: 1.5px solid var(--ink); color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.3; text-decoration: none;
}
.reward-flash .flash-gear:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
@media (max-width: 719px) {
  .reward-flash .flash-gear { min-height: 44px; display: inline-flex; align-items: center; margin-top: 4px; }
}