/* icehockeyapi.com /support: the help centre as approved in the preview (hero search and results panel, the ways to an answer, every answer open, the ticket form beside how we answer). With site.css. */
.sp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(31, 138, 85, 0.15); animation: sp-pulse 2s infinite; }
@keyframes sp-pulse { 50% { box-shadow: 0 0 0 8px rgba(31, 138, 85, 0.05); } }
.sp-search { display: flex; align-items: center; gap: 10px; margin-top: 26px; height: 54px; padding: 0 8px 0 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 16px 40px -24px rgba(11, 31, 58, 0.35); max-width: 560px; }
.sp-search:focus-within { border-color: var(--blue); }
.sp-search input { flex: 1; border: 0; outline: 0; font: 15px Inter, sans-serif; color: var(--ink); background: none; min-width: 0; }
.sp-search .btn { height: 40px; min-width: 110px; }
.sp-popular { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); align-items: center; }
.sp-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--text); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.sp-chip:hover { border-color: var(--blue); color: var(--blue); }

/* the panel on the right */
.sp-desk { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 30px 70px -32px rgba(11, 31, 58, 0.45); overflow: hidden; }
.sp-desk-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); white-space: nowrap; }
.sp-strong { font-weight: 500; color: var(--ink); }
.sp-live { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 500; }
.sp-live i, .sp-svc i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }
.sp-figs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.sp-fig { padding: 16px 18px; border-right: 1px solid var(--line); }
.sp-fig:last-child { border-right: 0; }
.sp-n { font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sp-l { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sp-feed { list-style: none; padding: 0; height: 236px; overflow: hidden; }
.sp-feed li { display: grid; grid-template-columns: 104px 1fr 92px; align-items: center; gap: 12px; height: 59px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; animation: sp-slide 0.5s ease; }
@keyframes sp-slide { from { opacity: 0; transform: translateY(-12px); } }
.sp-ref { color: var(--blue); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-what small { display: block; color: var(--muted); font-size: 12px; }
.sp-state { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 10px; border-radius: var(--r); font-size: 12px; font-weight: 500; white-space: nowrap; }
.sp-s-ok { background: #E7F4EC; color: var(--green); }
.sp-s-with { background: #E8F0FA; color: var(--blue); }
.sp-s-closed { background: #EEF1F4; color: var(--muted); }
.sp-desk-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.sp-svc { background: #fff; padding: 12px 18px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.sp-svc .sp-strong { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.sp-svc:hover .sp-strong { color: var(--blue); }

/* the ways to an answer */
.sp-ways { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sp-way { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.sp-way:hover { border-color: var(--blue); }
.sp-way-ico { width: 40px; height: 40px; border-radius: var(--r); background: var(--ice); display: grid; place-items: center; color: var(--blue); }
.sp-way-ico svg { width: 20px; height: 20px; }
.sp-way h2 { font-size: 16px; font-weight: 500; margin-top: 14px; white-space: nowrap; }
.sp-way p { font-size: 13.5px; color: var(--text); margin-top: 6px; flex: 1; }
.sp-way .btn { margin-top: 16px; width: 100%; min-width: 0; height: 36px; font-size: 13.5px; }

/* every answer, open */
.sp-count { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.sp-faq { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.sp-groups { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 4px; }
.sp-groups a { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--r); font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; }
.sp-groups a span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sp-groups a:hover { color: var(--blue); }
.sp-groups a.on { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: inset 3px 0 0 var(--blue); }
.sp-qa-group { margin-bottom: 36px; }
.sp-qa-group h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 14px; }
.sp-qas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-qa { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; }
.sp-qa h4 { font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em; }
.sp-qa p { font-size: 14px; color: var(--text); margin-top: 8px; flex: 1; }
.sp-qa kbd { font: 500 12.5px "JetBrains Mono", monospace; background: var(--ice); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink); }
.sp-qa mark { background: #FFF3C4; color: inherit; border-radius: 3px; }
.sp-more { margin-top: 12px; font-size: 13.5px; color: var(--blue); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.sp-none { background: #fff; border: 1px dashed var(--line); border-radius: var(--r); padding: 28px; text-align: center; color: var(--text); }
.sp-none .btn { margin-top: 14px; }

/* the ticket */
.sp-ticket { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px; align-items: start; }
.sp-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.sp-kit-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.sp-kit-tabs a { display: flex; align-items: center; justify-content: center; height: 48px; border-right: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; }
.sp-kit-tabs a:last-child { border-right: 0; }
.sp-kit-tabs a:hover { color: var(--blue); }
.sp-kit-tabs a.on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--blue); }
.sp-kit-body { padding: 24px; }
.sp-side { display: flex; flex-direction: column; gap: 16px; }
.sp-side .sp-panel { padding: 22px; }
.sp-side h3 { font-size: 16px; font-weight: 500; }
.sp-times { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px; }
.sp-times td { padding: 9px 0; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--text); }
.sp-times td:last-child { text-align: right; color: var(--ink); }
.sp-checks { list-style: none; padding: 0; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--text); }
.sp-checks li { display: flex; gap: 10px; }
.sp-checks svg { color: var(--blue); margin-top: 3px; }
.sp-legend { display: grid; grid-template-columns: 136px 1fr; gap: 10px 12px; margin-top: 12px; font-size: 13.5px; color: var(--text); align-items: center; }
.sp-end { padding-top: 0; }

@media (max-width: 1100px) { .sp-ways { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .sp-faq, .sp-ticket { grid-template-columns: minmax(0, 1fr); }
  .sp-groups { position: static; flex-direction: row; flex-wrap: wrap; }
  .sp-qas { grid-template-columns: minmax(0, 1fr); }
  .sp-ways { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sp-ways, .sp-desk-foot { grid-template-columns: minmax(0, 1fr); }
  .sp-fig { padding: 12px; }
  .sp-n { font-size: 20px; }
  .sp-feed li { grid-template-columns: 76px 1fr 64px; }
  .sp-times td { display: block; }
  .sp-times td:first-child { border-bottom: 0; padding-bottom: 0; }
  .sp-times td:last-child { text-align: left; white-space: normal; }
}
.sp-qa[hidden], .sp-qa-group[hidden], .sp-none[hidden] { display: none; }