/* plug-in sheet shared by honours (hn-), milestones (ms-) and predictions (pd-). Tokens come from league.css. */

/* ---- honours page ---- */
.hn-pick { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.hn-pick a { display: inline-flex; align-items: center; height: var(--ctl-s); padding: 0 var(--s3); border: 1px solid var(--line-2); border-radius: var(--r); color: var(--ink-2); font: 600 13px/1 var(--fd); letter-spacing: .08em; text-transform: uppercase; }
.hn-pick a:hover { border-color: var(--line-3); color: var(--ink); }
.hn-pick a.on { border-color: var(--gold); color: var(--gold-2); background: var(--gold-dim); }
.hn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s4); }
.hn-card { position: relative; display: flex; flex-direction: column; gap: var(--s3); min-height: 168px; padding: var(--s5); background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); border: 1px solid var(--line); border-radius: var(--rl); color: var(--ink); }
a.hn-card:hover { border-color: var(--gold); color: var(--ink); }
.hn-card.is-empty { opacity: .55; }
.hn-k { font: 800 20px/1 var(--fd); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); padding-right: 72px; }
.hn-card.is-team .hn-k { color: var(--gold-2); }
.hn-who { display: flex; align-items: center; gap: var(--s2); font-weight: 600; min-width: 0; }
.hn-who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-v { font: 500 13px var(--fm); color: var(--ink-2); }
.hn-b { font-size: 13px; color: var(--ink-3); margin-top: auto; }
.hn-tag { position: absolute; top: var(--s3); right: var(--s3); }

/* ---- home strip ---- */
.hn-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.hn-si { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--rl); color: var(--ink); min-width: 0; }
.hn-si:hover { border-color: var(--gold); color: var(--ink); }
.hn-si-k { font: 700 12px/1 var(--fd); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* ---- profile cards ---- */
.hn-card-p, .ms-card, .pd-card { margin-top: var(--s4); }
.hn-list, .ms-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.hn-list li, .ms-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.hn-list li:last-child, .ms-list li:last-child { border-bottom: 0; }
.hn-list li > .muted, .ms-list li > span:not(.mono) { color: var(--ink-3); }
.hn-list li > a, .ms-list li > a { margin-left: auto; font-size: 12px; }

/* ---- predictions ---- */
.pd-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); margin: var(--s3) 0; }
.pd-f { margin: 0; min-width: 0; }
.pd-b { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); width: 100%; min-width: 0; padding: var(--s3) var(--s4); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel-2); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .12s, background .12s; }
button.pd-b:hover { border-color: var(--line-3); background: var(--panel-3); }
.pd-b.is-static { cursor: default; }
.pd-b.on { border-color: var(--gold); background: var(--gold-dim); }
.pd-b.is-win { border-color: var(--gold); }
.pd-b-t { font: 600 14px/1.3 var(--ff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pd-b-n { color: var(--ink-3); }
.pd-bar { width: 100%; }
.pd-stats { grid-template-columns: repeat(3, 1fr); }
.pd-stats .stat b { font-size: 24px; }
.pd-tbl .pl { max-width: 320px; }

@media (max-width: 560px) {
  .hn-grid { grid-template-columns: 1fr; }
  .pd-stats { grid-template-columns: 1fr; }
}