/* The catalogue's item page (web/scripts/catalogue.mjs itemPage, web/landing/item.js): a skin's facts, the version tabs,
   the wear-range bar and a row per wear, the links of the chosen row, its Markets list and drop chance. Tokens only. */

/* facts: two columns, hairline rows */
/* The art no taller than the side column needs: the facts box made the side shorter than the old version switch. */
.ip .hero .big img { width: auto; max-width: 100%; max-height: 21rem; }
.i-facts { margin-top: 1.4rem; border-top: 1px solid var(--tf-line); }
.i-facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.25rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--tf-line); font-size: 0.9rem; }
.i-facts dt { color: var(--tf-faint); }
.i-facts dd { color: var(--tf-text); }
.i-facts a { color: var(--tf-text); text-underline-offset: 3px; text-decoration-color: var(--tf-line-strong); }
.i-facts a:hover { color: var(--tf-fg); }
.i-rc { color: var(--rc); font-weight: 600; }
.i-more { color: var(--tf-faint); }

/* the selection: tabs, bar and wear rows on the left, what follows the chosen row on the right */
.i-pick { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; margin-top: 1.5rem; }
.i-pick.i-one { grid-template-columns: minmax(0, 40rem); }
.i-tabs { display: flex; align-items: center; gap: 1.5rem; border-bottom: 1px solid var(--tf-line-strong); }
/* The tabs sit in their own tablist; the phase note beside it is not one of them. */
.i-tl { display: flex; align-items: center; gap: 1.5rem; }
.i-tab { margin-bottom: -1px; min-height: 2.75rem; padding: 0.6rem 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--tf-muted); font: inherit; font-size: 0.9375rem; cursor: pointer; }
.i-tab:hover { color: var(--tf-fg); }
.i-tab[aria-selected="true"] { color: var(--tf-fg); border-bottom-color: var(--tf-fg); }
.i-tab:focus-visible, .i-wo:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: -2px; }

/* the wear-range bar: the five wears in their usual colours, outside the skin's float range shaded, a tick at each end */
.i-bar { --fn: #1f9d55; --mw: #86c232; --ft: #d6c12b; --ww: #e8873a; --bs: #dc4141; margin-top: 1.25rem; }
.i-lab, .i-col { display: grid; grid-template-columns: 7fr 8fr 23fr 7fr 55fr; }
.i-lab > span { padding-bottom: 0.4rem; color: var(--tf-muted); font-size: 0.75rem; font-weight: 600; line-height: 1; text-align: center; }
.i-lab > span.off { color: var(--tf-faint); opacity: 0.45; font-weight: 400; }
.i-lab > span.on { color: var(--tf-fg); }
.i-trk { position: relative; height: 0.5rem; }
.i-col { position: absolute; inset: 0; overflow: hidden; border-radius: 999px; }
.i-col > i:nth-child(1) { background: var(--fn); }
.i-col > i:nth-child(2) { background: var(--mw); }
.i-col > i:nth-child(3) { background: var(--ft); }
.i-col > i:nth-child(4) { background: var(--ww); }
.i-col > i:nth-child(5) { background: var(--bs); }
.i-out { position: absolute; top: -1px; bottom: -1px; background: color-mix(in srgb, var(--tf-ink, #000) 78%, transparent); }
.i-out.i-x0 { border-radius: 999px 0 0 999px; }
.i-tk { position: absolute; top: -0.3rem; bottom: -0.3rem; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--tf-fg); text-decoration: none; }
.i-ends { position: relative; height: 1.25rem; margin-top: 0.45rem; color: var(--tf-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.i-lo, .i-hi { position: absolute; top: 0; white-space: nowrap; }
.i-lo.i-c { transform: translateX(-50%); }
.i-hi.i-c { transform: translateX(50%); }

/* a row per wear: a radio, its price block like every price on the catalogue */
.i-rows { margin-top: 0.75rem; border-top: 1px solid var(--tf-line-strong); }
.i-rows[hidden] { display: none; }
.i-wo { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 9.5rem; align-items: center; gap: 0.25rem 1rem; width: 100%; min-height: 3.25rem; padding: 0.5rem 0.75rem; border: 0; border-bottom: 1px solid var(--tf-line); background: none; color: var(--tf-muted); font: inherit; text-align: left; cursor: pointer; }
.i-wo:hover { background: var(--tf-ink-raised); }
.i-wo[aria-checked="true"] { background: var(--tf-ink-raised); box-shadow: inset 2px 0 0 var(--tf-fg); }
.i-wn { color: var(--tf-text); font-size: 0.9375rem; }
.i-wn b { margin-right: 0.35rem; color: var(--tf-fg); font-weight: 600; }
.i-nt { display: block; font-size: 0.75rem; font-style: normal; color: var(--tf-faint); }
.i-nt:empty { display: none; }
.i-wf { color: var(--tf-faint); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.i-wo .pt { text-align: right; font-variant-numeric: tabular-nums; }
.i-wo .pt b { font-size: 0.9375rem; }
.i-wo .pt small { font-size: 0.75rem; }

/* the links of the chosen row: CSFloat's button, then two quiet ones */
.i-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1.1rem; }
.i-ql { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--tf-muted); font-size: 0.9rem; text-decoration: none; }
.i-ql:hover { color: var(--tf-fg); text-decoration: underline; text-underline-offset: 3px; }
.i-ql[hidden] { display: none; }
.vl + .i-acts { margin-top: 0.6rem; }
.i-media { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.i-media .big { width: 100%; }
.i-ma { justify-content: center; margin-top: 0.25rem; }

/* Markets: a row per market with an ask, cheapest first */
.i-sel[hidden] { display: none; }
.i-mh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; min-height: 2.75rem; }
.ip .i-mh h2 { margin: 0; font-size: 1.125rem; }
.i-mh h2 span { color: var(--tf-faint); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; }
.i-now { color: var(--tf-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.i-ml { margin-top: 0.5rem; border-top: 1px solid var(--tf-line-strong); font-variant-numeric: tabular-nums; }
.i-ml li { display: grid; grid-template-columns: 4.5rem 5rem minmax(0, 1fr) 5rem 3.5rem; align-items: baseline; gap: 0.25rem 0.75rem; min-height: 2.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--tf-line); font-size: 0.9rem; }
.i-mn { color: var(--tf-text); }
.i-mp { color: var(--tf-fg); font-weight: 600; }
.i-mc, .i-ma { color: var(--tf-faint); font-size: 0.8125rem; }
.i-ma { text-align: right; }
.i-mv { color: var(--tf-accent-text); font-size: 0.8125rem; text-align: right; text-decoration: none; white-space: nowrap; }
.i-mv:hover { text-decoration: underline; text-underline-offset: 3px; }

/* drop chance: one line, the steps open */
.i-dc { margin-top: 1.5rem; border-top: 1px solid var(--tf-line-strong); border-bottom: 1px solid var(--tf-line); }
.i-dc summary { min-height: 2.75rem; padding: 0.65rem 0; color: var(--tf-muted); font-size: 0.9rem; cursor: pointer; }
.i-dc summary b { margin-left: 0.4rem; color: var(--tf-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.i-dc summary span { margin-left: 0.4rem; color: var(--tf-faint); }
.i-dc summary:hover { color: var(--tf-text); }
.i-dc ul { padding-bottom: 0.5rem; }
.i-dc li { padding: 0.6rem 0; border-top: 1px solid var(--tf-line); font-size: 0.875rem; }
.i-dc li > a { color: var(--tf-text); text-underline-offset: 3px; text-decoration-color: var(--tf-line-strong); }
.i-dc li > a:hover { color: var(--tf-fg); }
.i-st { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.4rem; color: var(--tf-faint); font-variant-numeric: tabular-nums; }
.i-st > span { padding: 0.1rem 0.5rem; border-radius: var(--tf-radius-sm); box-shadow: inset 0 0 0 1px var(--tf-line-strong); color: var(--tf-text); font-size: 0.8125rem; }
.i-es { display: block; margin-top: 0.3rem; color: var(--tf-faint); font-size: 0.75rem; }
.i-st b { color: var(--tf-fg); font-weight: 600; }

@media (max-width: 899px) {
  .i-pick { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .i-ig { display: none; }
  .i-facts > div { grid-template-columns: 6rem minmax(0, 1fr); }
  .i-wo { grid-template-columns: minmax(0, 1fr) auto; padding: 0.5rem; }
  .i-wf { grid-column: 1; grid-row: 2; }
  .i-wo .pt { grid-column: 2; grid-row: 1 / span 2; }
  .i-ml li { grid-template-columns: minmax(0, 1fr) auto auto; font-size: 0.9375rem; }
  .i-mc { grid-column: 1 / span 2; grid-row: 2; }
  .i-ma { grid-column: 3; grid-row: 2; }
  .i-lab > span, .i-ends, .i-now, .i-mc, .i-ma, .i-mv, .i-nt, .i-wf { font-size: 0.75rem; }
}

/* the bar's positions in whole percents (classes: the CSP has no style attributes) */
.i-x0 { left: 0%; }
.i-x1 { left: 1%; }
.i-x2 { left: 2%; }
.i-x3 { left: 3%; }
.i-x4 { left: 4%; }
.i-x5 { left: 5%; }
.i-x6 { left: 6%; }
.i-x7 { left: 7%; }
.i-x8 { left: 8%; }
.i-x9 { left: 9%; }
.i-x10 { left: 10%; }
.i-x11 { left: 11%; }
.i-x12 { left: 12%; }
.i-x13 { left: 13%; }
.i-x14 { left: 14%; }
.i-x15 { left: 15%; }
.i-x16 { left: 16%; }
.i-x17 { left: 17%; }
.i-x18 { left: 18%; }
.i-x19 { left: 19%; }
.i-x20 { left: 20%; }
.i-x21 { left: 21%; }
.i-x22 { left: 22%; }
.i-x23 { left: 23%; }
.i-x24 { left: 24%; }
.i-x25 { left: 25%; }
.i-x26 { left: 26%; }
.i-x27 { left: 27%; }
.i-x28 { left: 28%; }
.i-x29 { left: 29%; }
.i-x30 { left: 30%; }
.i-x31 { left: 31%; }
.i-x32 { left: 32%; }
.i-x33 { left: 33%; }
.i-x34 { left: 34%; }
.i-x35 { left: 35%; }
.i-x36 { left: 36%; }
.i-x37 { left: 37%; }
.i-x38 { left: 38%; }
.i-x39 { left: 39%; }
.i-x40 { left: 40%; }
.i-x41 { left: 41%; }
.i-x42 { left: 42%; }
.i-x43 { left: 43%; }
.i-x44 { left: 44%; }
.i-x45 { left: 45%; }
.i-x46 { left: 46%; }
.i-x47 { left: 47%; }
.i-x48 { left: 48%; }
.i-x49 { left: 49%; }
.i-x50 { left: 50%; }
.i-x51 { left: 51%; }
.i-x52 { left: 52%; }
.i-x53 { left: 53%; }
.i-x54 { left: 54%; }
.i-x55 { left: 55%; }
.i-x56 { left: 56%; }
.i-x57 { left: 57%; }
.i-x58 { left: 58%; }
.i-x59 { left: 59%; }
.i-x60 { left: 60%; }
.i-x61 { left: 61%; }
.i-x62 { left: 62%; }
.i-x63 { left: 63%; }
.i-x64 { left: 64%; }
.i-x65 { left: 65%; }
.i-x66 { left: 66%; }
.i-x67 { left: 67%; }
.i-x68 { left: 68%; }
.i-x69 { left: 69%; }
.i-x70 { left: 70%; }
.i-x71 { left: 71%; }
.i-x72 { left: 72%; }
.i-x73 { left: 73%; }
.i-x74 { left: 74%; }
.i-x75 { left: 75%; }
.i-x76 { left: 76%; }
.i-x77 { left: 77%; }
.i-x78 { left: 78%; }
.i-x79 { left: 79%; }
.i-x80 { left: 80%; }
.i-x81 { left: 81%; }
.i-x82 { left: 82%; }
.i-x83 { left: 83%; }
.i-x84 { left: 84%; }
.i-x85 { left: 85%; }
.i-x86 { left: 86%; }
.i-x87 { left: 87%; }
.i-x88 { left: 88%; }
.i-x89 { left: 89%; }
.i-x90 { left: 90%; }
.i-x91 { left: 91%; }
.i-x92 { left: 92%; }
.i-x93 { left: 93%; }
.i-x94 { left: 94%; }
.i-x95 { left: 95%; }
.i-x96 { left: 96%; }
.i-x97 { left: 97%; }
.i-x98 { left: 98%; }
.i-x99 { left: 99%; }
.i-x100 { left: 100%; }
.i-w1 { width: 1%; }
.i-w2 { width: 2%; }
.i-w3 { width: 3%; }
.i-w4 { width: 4%; }
.i-w5 { width: 5%; }
.i-w6 { width: 6%; }
.i-w7 { width: 7%; }
.i-w8 { width: 8%; }
.i-w9 { width: 9%; }
.i-w10 { width: 10%; }
.i-w11 { width: 11%; }
.i-w12 { width: 12%; }
.i-w13 { width: 13%; }
.i-w14 { width: 14%; }
.i-w15 { width: 15%; }
.i-w16 { width: 16%; }
.i-w17 { width: 17%; }
.i-w18 { width: 18%; }
.i-w19 { width: 19%; }
.i-w20 { width: 20%; }
.i-w21 { width: 21%; }
.i-w22 { width: 22%; }
.i-w23 { width: 23%; }
.i-w24 { width: 24%; }
.i-w25 { width: 25%; }
.i-w26 { width: 26%; }
.i-w27 { width: 27%; }
.i-w28 { width: 28%; }
.i-w29 { width: 29%; }
.i-w30 { width: 30%; }
.i-w31 { width: 31%; }
.i-w32 { width: 32%; }
.i-w33 { width: 33%; }
.i-w34 { width: 34%; }
.i-w35 { width: 35%; }
.i-w36 { width: 36%; }
.i-w37 { width: 37%; }
.i-w38 { width: 38%; }
.i-w39 { width: 39%; }
.i-w40 { width: 40%; }
.i-w41 { width: 41%; }
.i-w42 { width: 42%; }
.i-w43 { width: 43%; }
.i-w44 { width: 44%; }
.i-w45 { width: 45%; }
.i-w46 { width: 46%; }
.i-w47 { width: 47%; }
.i-w48 { width: 48%; }
.i-w49 { width: 49%; }
.i-w50 { width: 50%; }
.i-w51 { width: 51%; }
.i-w52 { width: 52%; }
.i-w53 { width: 53%; }
.i-w54 { width: 54%; }
.i-w55 { width: 55%; }
.i-w56 { width: 56%; }
.i-w57 { width: 57%; }
.i-w58 { width: 58%; }
.i-w59 { width: 59%; }
.i-w60 { width: 60%; }
.i-w61 { width: 61%; }
.i-w62 { width: 62%; }
.i-w63 { width: 63%; }
.i-w64 { width: 64%; }
.i-w65 { width: 65%; }
.i-w66 { width: 66%; }
.i-w67 { width: 67%; }
.i-w68 { width: 68%; }
.i-w69 { width: 69%; }
.i-w70 { width: 70%; }
.i-w71 { width: 71%; }
.i-w72 { width: 72%; }
.i-w73 { width: 73%; }
.i-w74 { width: 74%; }
.i-w75 { width: 75%; }
.i-w76 { width: 76%; }
.i-w77 { width: 77%; }
.i-w78 { width: 78%; }
.i-w79 { width: 79%; }
.i-w80 { width: 80%; }
.i-w81 { width: 81%; }
.i-w82 { width: 82%; }
.i-w83 { width: 83%; }
.i-w84 { width: 84%; }
.i-w85 { width: 85%; }
.i-w86 { width: 86%; }
.i-w87 { width: 87%; }
.i-w88 { width: 88%; }
.i-w89 { width: 89%; }
.i-w90 { width: 90%; }
.i-w91 { width: 91%; }
.i-w92 { width: 92%; }
.i-w93 { width: 93%; }
.i-w94 { width: 94%; }
.i-w95 { width: 95%; }
.i-w96 { width: 96%; }
.i-w97 { width: 97%; }
.i-w98 { width: 98%; }
.i-w99 { width: 99%; }
.i-w100 { width: 100%; }
.i-r0 { right: 0%; }
.i-r1 { right: 1%; }
.i-r2 { right: 2%; }
.i-r3 { right: 3%; }
.i-r4 { right: 4%; }
.i-r5 { right: 5%; }
.i-r6 { right: 6%; }
.i-r7 { right: 7%; }
.i-r8 { right: 8%; }
.i-r9 { right: 9%; }
.i-r10 { right: 10%; }
.i-r11 { right: 11%; }
.i-r12 { right: 12%; }
.i-r13 { right: 13%; }
.i-r14 { right: 14%; }
.i-r15 { right: 15%; }
.i-r16 { right: 16%; }
.i-r17 { right: 17%; }
.i-r18 { right: 18%; }
.i-r19 { right: 19%; }
.i-r20 { right: 20%; }
.i-r21 { right: 21%; }
.i-r22 { right: 22%; }
.i-r23 { right: 23%; }
.i-r24 { right: 24%; }
.i-r25 { right: 25%; }
.i-r26 { right: 26%; }
.i-r27 { right: 27%; }
.i-r28 { right: 28%; }
.i-r29 { right: 29%; }
.i-r30 { right: 30%; }
.i-r31 { right: 31%; }
.i-r32 { right: 32%; }
.i-r33 { right: 33%; }
.i-r34 { right: 34%; }
.i-r35 { right: 35%; }
.i-r36 { right: 36%; }
.i-r37 { right: 37%; }
.i-r38 { right: 38%; }
.i-r39 { right: 39%; }
.i-r40 { right: 40%; }
.i-r41 { right: 41%; }
.i-r42 { right: 42%; }
.i-r43 { right: 43%; }
.i-r44 { right: 44%; }
.i-r45 { right: 45%; }
.i-r46 { right: 46%; }
.i-r47 { right: 47%; }
.i-r48 { right: 48%; }
.i-r49 { right: 49%; }
.i-r50 { right: 50%; }
.i-r51 { right: 51%; }
.i-r52 { right: 52%; }
.i-r53 { right: 53%; }
.i-r54 { right: 54%; }
.i-r55 { right: 55%; }
.i-r56 { right: 56%; }
.i-r57 { right: 57%; }
.i-r58 { right: 58%; }
.i-r59 { right: 59%; }
.i-r60 { right: 60%; }
.i-r61 { right: 61%; }
.i-r62 { right: 62%; }
.i-r63 { right: 63%; }
.i-r64 { right: 64%; }
.i-r65 { right: 65%; }
.i-r66 { right: 66%; }
.i-r67 { right: 67%; }
.i-r68 { right: 68%; }
.i-r69 { right: 69%; }
.i-r70 { right: 70%; }
.i-r71 { right: 71%; }
.i-r72 { right: 72%; }
.i-r73 { right: 73%; }
.i-r74 { right: 74%; }
.i-r75 { right: 75%; }
.i-r76 { right: 76%; }
.i-r77 { right: 77%; }
.i-r78 { right: 78%; }
.i-r79 { right: 79%; }
.i-r80 { right: 80%; }
.i-r81 { right: 81%; }
.i-r82 { right: 82%; }
.i-r83 { right: 83%; }
.i-r84 { right: 84%; }
.i-r85 { right: 85%; }
.i-r86 { right: 86%; }
.i-r87 { right: 87%; }
.i-r88 { right: 88%; }
.i-r89 { right: 89%; }
.i-r90 { right: 90%; }
.i-r91 { right: 91%; }
.i-r92 { right: 92%; }
.i-r93 { right: 93%; }
.i-r94 { right: 94%; }
.i-r95 { right: 95%; }
.i-r96 { right: 96%; }
.i-r97 { right: 97%; }
.i-r98 { right: 98%; }
.i-r99 { right: 99%; }
.i-r100 { right: 100%; }