/* boxingapi.net: /support, the answers and the ticket desk (pages/support.php), on top of home.css and site.css. The ticket
   tabs are filled by Uni's support kit, which keeps its own .us-* styles. */
.sp-hero .in{grid-template-columns:1fr 520px;padding-top:64px;padding-bottom:60px}
.sp-hero .hero-title{font-size:48px}
.sp-search{position:relative;margin-top:28px;max-width:560px}
.sp-search svg{position:absolute;left:16px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--muted)}
.sp-search input{width:100%;height:52px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:0 120px 0 44px;font:inherit;font-size:15px;color:var(--ink);box-shadow:0 18px 40px -28px rgba(23,22,26,.35);outline:none;transition:border-color .15s,box-shadow .15s}
.sp-search input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.sp-search kbd{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 8px;background:var(--page)}
.sp-hint{font-size:12.5px;color:var(--muted);margin-top:10px;min-height:19px}
.sp-hint a{color:var(--accent);text-decoration:none}
.sp-pop{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px;max-width:560px}
.sp-pop button{height:34px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font:inherit;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px;cursor:pointer;transition:border-color .15s,background .15s}
.sp-pop button:hover{border-color:var(--accent);background:var(--accent-tint)}
.sp-facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;border-top:1px solid var(--line);max-width:560px}
.sp-facts div{padding-top:14px}
.sp-facts div+div{padding-left:18px;border-left:1px solid var(--line-2)}
.sp-facts span{display:block;font-weight:300;font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums}
.sp-facts small{font-size:12px;color:var(--muted)}
/* the help desk card */
.desk .lv-q{position:relative;padding:22px 20px 6px;min-height:84px}
.desk .lv-q small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8E8590}
.desk .lv-q p{font-size:19px;font-weight:300;margin-top:8px;color:#fff;min-height:28px}
.desk .lv-q p i{display:inline-block;width:2px;height:20px;background:#D45A6B;vertical-align:-3px;margin-left:2px;animation:pulse 1s infinite}
.desk .lv-a{position:relative;margin:6px 20px 18px;padding:14px 16px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.03);font-size:13px;line-height:1.55;color:#D9D0CB;min-height:96px;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.desk .lv-a.on{opacity:1;transform:none}
.desk .lv-a code{font-family:var(--mono);font-size:11.5px;color:#E7A3AE}
.desk .lv-a em{display:flex;align-items:center;gap:8px;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8E8590;margin-bottom:8px}
.desk .lv-a em i{width:6px;height:6px;border-radius:50%;background:#5FB287}
/* topics */
.sp-sec{padding:64px 0}
.sp-sec.w{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px}
.sp-head h2{font-size:28px;font-weight:300;letter-spacing:-.015em;color:var(--ink)}
.sp-head p{color:var(--muted);margin-top:6px;max-width:560px}
.sp-kw{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.topic{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;height:100%;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.topic:hover{border-color:#D9C9CB;transform:translateY(-2px);box-shadow:0 22px 40px -30px rgba(122,34,48,.45)}
.topic .ic{width:44px;height:44px;border-radius:var(--r);background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center}
.topic .ic svg{width:18px;height:18px}
.topic h3{font-size:15.5px;font-weight:400;color:var(--ink)}
.topic p{font-size:13px;color:var(--muted);margin-top:4px}
.topic .ct{display:flex;align-items:center;gap:6px;margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--accent)}
.topic .ct svg{width:12px;height:12px;transition:transform .2s}
.topic:hover .ct svg{transform:translateX(3px)}
/* the FAQ */
.faq{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start}
.rail{position:sticky;top:140px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:8px}
.rail button{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;width:100%;height:38px;padding:0 10px;border:0;border-radius:8px;background:none;font:inherit;font-size:13px;color:var(--text);text-align:left;cursor:pointer;white-space:nowrap}
.rail button svg{width:14px;height:14px;color:var(--muted)}
.rail button span{overflow:hidden;text-overflow:ellipsis}
.rail button small{font-family:var(--mono);font-size:10.5px;color:var(--muted);min-width:20px;text-align:right}
.rail button:hover{background:var(--line-2)}
.rail button.on{background:var(--accent-tint);color:var(--accent)}
.rail button.on svg,.rail button.on small{color:var(--accent)}
.rail .rail-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-top:1px solid var(--line-2);margin-top:8px;padding-top:8px}
.rail .rail-tools button{display:flex;justify-content:center;height:32px;border:1px solid var(--line);font-size:12px;color:var(--muted)}
.grp{scroll-margin-top:150px}
.grp+.grp{margin-top:40px}
.grp-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.grp-h .ic{width:34px;height:34px;border-radius:8px;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center}
.grp-h .ic svg{width:15px;height:15px}
.grp-h h3{font-size:19px;font-weight:300;color:var(--ink)}
.grp-h p{font-size:12.5px;color:var(--muted)}
.qa-list{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.qa-item+.qa-item{border-top:1px solid var(--line-2)}
.qa-item summary{display:grid;grid-template-columns:1fr 26px;gap:14px;align-items:center;padding:16px 20px;cursor:pointer;list-style:none;font-size:14.5px;color:var(--ink);transition:background .15s}
.qa-item summary::-webkit-details-marker{display:none}
.qa-item summary:hover{background:#FBFAF8}
.qa-item summary i{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:transform .25s,background .2s,color .2s,border-color .2s}
.qa-item summary i svg{width:11px;height:11px}
.qa-item[open] summary i{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:#fff}
.qa-body{padding:0 20px 18px;color:var(--text);font-size:14px;line-height:1.65;max-width:760px;animation:qa .25s ease}
@keyframes qa{from{opacity:0;transform:translateY(-4px)}}
.qa-body p+p,.qa-body pre+p,.qa-body p+pre,.qa-body p+table{margin-top:10px}
.qa-body a{color:var(--accent);text-decoration:none}
.qa-body a:hover{text-decoration:underline}
.qa-body code{font-family:var(--mono);font-size:12.5px;background:var(--line-2);border-radius:5px;padding:1px 5px;color:var(--ink)}
.qa-body pre{background:#111014;color:#EDE6E2;border-radius:var(--r);padding:14px 16px;white-space:pre-wrap;word-break:break-word}
.qa-body pre code{background:none;color:inherit;padding:0;font-size:12.5px}
.ft{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ft th{font-weight:400;text-align:left;color:var(--muted);background:var(--page);font-size:12px;padding:9px 12px;border-bottom:1px solid var(--line)}
.ft td{padding:9px 12px;border-bottom:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.ft tr:last-child td{border-bottom:0}
.ft td:nth-child(2),.ft td:nth-child(3),.ft th:nth-child(2),.ft th:nth-child(3){text-align:right}
.qa-item mark{background:#F6E3A8;color:inherit;border-radius:3px;padding:0 1px}
.no-hit{display:none;padding:28px;border:1px dashed var(--line);border-radius:var(--r);text-align:center;color:var(--muted)}
.no-hit a{color:var(--accent);text-decoration:none}
/* still stuck */
@keyframes ring{70%{box-shadow:0 0 0 7px rgba(47,122,85,0)}}
/* where Uni's kit sits */
@media (max-width:1100px){.sp-hero .in{grid-template-columns:1fr}.desk{display:none}.faq{grid-template-columns:1fr}.rail{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.rail .rail-tools{grid-column:1/-1}}
@media (max-width:700px){.sp-hero .hero-title{font-size:34px}.sp-pop{grid-template-columns:1fr 1fr}.topics{grid-template-columns:1fr}.rail{grid-template-columns:1fr 1fr}.sp-head{flex-direction:column;align-items:flex-start}.sp-search input{padding-right:16px}.sp-search kbd{display:none}}

.st-pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:12.5px;color:var(--ok);text-decoration:none;white-space:nowrap}
.st-pill i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:ring 2s infinite}
.st-pill span{color:var(--muted);border-left:1px solid var(--line);padding-left:8px}
.desk2{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;box-shadow:0 30px 60px -48px rgba(23,22,26,.4)}
.ptabbar{position:sticky;top:65px;z-index:4;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.ptab-in{display:flex;justify-content:space-between;align-items:center;gap:16px}
.ptabs{display:grid;grid-template-columns:repeat(4,190px)}
.ptabs a{text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;height:56px;border:0;background:none;font:inherit;font-size:14px;color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .15s,box-shadow .15s}
.ptabs a svg{width:15px;height:15px}
.ptabs a:hover{color:var(--ink)}
.ptabs a.on{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.cnt{font-family:var(--mono);font-size:10.5px;color:var(--muted);background:var(--line-2);border-radius:999px;padding:2px 7px}
.ptabs a.on .cnt{background:var(--accent-tint);color:var(--accent)}
.ask-more{display:grid;grid-template-columns:40px 1fr 200px;gap:18px;align-items:center;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.ask-more>svg{width:40px;height:40px;padding:10px;border-radius:var(--r);background:var(--accent);color:#fff}
.ask-more h3{font-size:16px;font-weight:400;color:var(--ink)}
.ask-more p{font-size:13px;color:var(--muted);margin-top:2px}
.tk-pane{padding:26px}
@media (max-width:1100px){.ptabs{grid-template-columns:repeat(4,auto)}.ptabs a{padding:0 14px}}
@media (max-width:700px){.ptabbar{top:64px}.ptab-in{padding:0}.ptab-in .st-pill{display:none}.ptabs{grid-template-columns:repeat(3,1fr);width:100%}.ptabs a{font-size:12.5px;height:50px;gap:6px}.ptabs a svg,.ptabs .cnt{display:none}.ptabs a.tv{display:none}.ptabs a.up{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}.ask-more{grid-template-columns:1fr}.ask-more>svg{display:none}}
/* a ticket tab: the hero shortened, so the desk is in view */
.sp-hero.compact .in{grid-template-columns:1fr;padding-top:40px;padding-bottom:32px}
.sp-hero.compact .hero-title{font-size:36px;margin-top:12px}
.sp-hero.compact .lead{margin-top:10px}
.desk2 .tk-pane{min-height:220px}
.sp-sec.tight{padding-top:36px}
@media (max-width:700px){.sp-hero.compact .hero-title{font-size:28px}}
.st-pill b{font-weight:400}
.st-pill:not(.on){color:var(--muted)}
.st-pill:not(.on) i{background:var(--fine);animation:none}
.st-pill.bad{color:var(--accent)}
.st-pill.bad i{background:var(--accent)}