/* Drop odds: calculator and mob drop tabs */
.tabs { margin: 8px 0 16px; max-width: 100%; overflow-x: auto; }
.tabs button { white-space: nowrap; flex: none; }
#tab-calc > *, #tab-mobs > .card, #tab-mobs > .table-wrap { margin-bottom: 14px; }

/* Inputs */
.odds-inputs, .mobs-controls { display: grid; gap: 14px; align-content: start; }
.odds-inputs h2 { margin: 0; }
.pair { display: grid; gap: 4px; }
.chips .chip { min-height: 40px; }
.chip.static { cursor: default; min-height: 30px; }
.chip.static:hover { border-color: var(--border); color: var(--text); }
.odds-label { margin: 0; padding: 8px 12px; background: var(--cell); border-radius: 3px; color: var(--ink); font: 600 .95rem var(--font-ui); }
.bad-input:empty { display: none; }
.bad-input { color: var(--warn); margin: 0; }

/* Results */
.stat small { display: block; margin-top: 2px; color: var(--faint); font-size: .8rem; }

/* Chart */
.odds-chart { position: relative; width: 100%; min-height: 220px; }
.odds-chart svg { display: block; touch-action: pan-y; }
.odds-chart .grid { stroke: var(--border); stroke-width: 1; }
.odds-chart .tick { fill: var(--dim); font: 11px var(--font-ui); }
.odds-chart .ref { stroke: var(--border2); stroke-dasharray: 4 4; }
.odds-chart .ref-label { fill: var(--dim); font: 600 11px var(--font-ui); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
.odds-chart .curve { fill: none; stroke-width: 2.5; }
.odds-chart .you { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 2 3; }
.odds-chart .you-dot { fill: var(--ink); stroke: var(--panel); stroke-width: 2; }
.odds-chart .hover-line { stroke: var(--dim); stroke-width: 1; }
.odds-chart .hover-dot { stroke: var(--panel); stroke-width: 2; }
.odds-chart .hit { fill: transparent; cursor: crosshair; }
.odds-chart .curve.s1 { stroke: var(--accent); } .odds-chart .hover-dot.s1 { fill: var(--accent); }
/* Copies are told apart by lightness, not hue (the group colours mean something else on the map) */
.odds-chart .curve.s2 { stroke: var(--ink); } .odds-chart .hover-dot.s2 { fill: var(--ink); }
.odds-chart .curve.s3 { stroke: var(--dim); } .odds-chart .hover-dot.s3 { fill: var(--dim); }
.odds-chart .curve.s3 { stroke-dasharray: 7 4; } .odds-chart .curve.s4 { stroke-dasharray: 2 4; }
.odds-chart .curve.s4 { stroke: var(--faint); } .odds-chart .hover-dot.s4 { fill: var(--faint); }
i.s1 { background: var(--accent); } i.s2 { background: var(--ink); } i.s3 { background: var(--dim); } i.s4 { background: var(--faint); }
i.you-key { background: var(--ink); }
.chart-tip { position: absolute; top: 0; pointer-events: none; background: var(--bg2); border: 1px solid var(--border2); border-radius: 3px; padding: 6px 10px; font-size: .82rem; color: var(--text); box-shadow: var(--shadow); display: grid; gap: 2px; white-space: nowrap; }
.chart-tip[hidden] { display: none; }
.chart-tip b { color: var(--ink); font-family: var(--font-ui); }
.chart-tip i, .chips.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.odds-legend { margin-top: 8px; }

/* Common rates table */
.linkish { background: none; border: 0; padding: 8px 0; min-height: 40px; color: var(--accent); cursor: pointer; font: 600 .9rem var(--font-ui); text-decoration: underline; text-underline-offset: 2px; }
.linkish:hover { color: var(--ink); }

/* Mob drops */
.mobs-note { margin: 0 0 14px; color: var(--dim); max-width: 75ch; }
.m-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.m-row .seg { max-width: 100%; }
.m-sort { min-width: 180px; }
.m-tiers .chip span { font-weight: 500; }
.m-table td, .m-mob-table td { vertical-align: middle; }
.m-table tbody tr, .m-mob-table tbody tr { cursor: pointer; }
.m-table td:first-child { white-space: nowrap; }
.m-table td:nth-child(2), .m-mob-table td:first-child { min-width: 180px; }
.m-go { min-height: 40px; padding: 4px 12px; }
.m-empty { text-align: center; padding: 24px; color: var(--dim); }
.m-more-wrap { text-align: center; }
.m-more-wrap[hidden] { display: none; }
.m-mob { display: grid; gap: 12px; }
.m-mob h2 { margin: 0; }
.m-mob-body { display: grid; gap: 10px; }
.tag { display: inline-block; font: 600 .7rem var(--font-ui); padding: 0 6px; border-radius: 4px; margin-left: 4px; background: var(--cell); border: 1px solid var(--border); color: var(--dim); white-space: nowrap; }
.tag.once { color: var(--ink); border-color: var(--border2); }
.badge.tier { margin-right: 2px; }
/* Tier colours follow the game's collection gems: Feeble green, Dire blue, Savage orange, Fell red, Ancient purple, Chaos rainbow */
:root { --tier-1: #3fbf5a; --tier-2: #2fa4e0; --tier-3: #e88a1a; --tier-4: #e2443a; --tier-5: #b24ee0; --tier-6: #e0c040; }
.t1 { --tier: var(--tier-1); } .t2 { --tier: var(--tier-2); } .t3 { --tier: var(--tier-3); } .t4 { --tier: var(--tier-4); } .t5 { --tier: var(--tier-5); } .t6 { --tier: var(--tier-6); }
.badge.tier { color: var(--tier); }
.gem { display: inline-block; width: 9px; height: 9px; margin: 0 8px 1px 2px; rotate: 45deg; border-radius: 2px; background: var(--tier); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); vertical-align: middle; }
.gem.t6 { background: conic-gradient(#e2443a, #e88a1a, #e0c040, #3fbf5a, #2fa4e0, #b24ee0, #e2443a); }
.have-h, .have { width: 70px; text-align: center; }
.have-h { white-space: normal; line-height: 1.2; }
td.have { padding: 0; }
.have label { display: flex; align-items: center; justify-content: center; min-height: 48px; cursor: pointer; }
.have label:hover { background: var(--hover); }
.have input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
tr.owned td:not(.have) { opacity: .5; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 600 .88rem var(--font-ui); color: var(--text); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.m-own .linkish { padding: 0; min-height: 0; }

/* Mob drop tables: mob list beside the chosen mob */
.mt { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.mt-list { position: sticky; top: 72px; display: grid; gap: 10px; padding: 12px; }
.mt-groups { position: relative; max-height: calc(100vh - 190px); overflow-y: auto; display: grid; align-content: start; scrollbar-gutter: stable; scrollbar-width: thin; padding-right: 6px; }
.mt-tier { margin: 14px 8px 6px; font: 600 .92rem var(--font-ui); color: var(--ink); }
.mt-tier:first-child { margin-top: 2px; }
.mt-tier span { font-weight: 500; font-size: .78rem; color: var(--faint); margin-left: 4px; }
.mt-mob { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 3px; color: var(--text); text-decoration: none; font-size: .9rem; }
.mt-mob:hover { background: var(--hover); }
.mt-mob[aria-current="true"] { background: var(--accent); color: var(--on-accent); }
.mt-mob[aria-current="true"] .dim { color: inherit; }
.mt-mob[aria-current="true"].done, .mt-mob[aria-current="true"].done .dim { color: var(--on-accent); }
.mt .mt-pick { display: none; }
.mt-main { display: grid; gap: 14px; min-width: 0; }
.mt-main > .card { margin: 0; }
.mt-head h2 { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; }
.mt-head p, .mt-main .m-own { margin: 0; }
.mt-body { display: grid; gap: 12px; }
.mt-body .note { margin: 0; }
@media (max-width: 860px) {
  .mt { grid-template-columns: 1fr; }
  .mt-list { position: static; }
  .mt-groups { max-height: 240px; }
}
@media (max-width: 760px) {
  .mt-list { display: none; }
  .mt .mt-pick { display: grid; }
}
.stat.luck.up b { color: var(--good); }
.stat.luck.down b { color: var(--warn); }
/* A mob whose whole collection log is ticked */
.mt-mob.done, .mt-mob.done .dim { color: var(--good); }
.mt-mob.done span:first-child::after { content: " ✓"; }
.stat.done b { color: var(--good); }