/* support.varops.net: extends home.css (the marketing site's look). */
.sup-brand{margin-left:10px;padding-left:10px;border-left:1px solid rgba(255,255,255,.25);font-weight:700;font-size:15px;color:#cfe0ff;letter-spacing:.02em}
.top .brand{display:inline-flex;align-items:center}
.sup-me{font-size:14px;opacity:.85}
.sup-hero{padding-bottom:28px}
.sup-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:6px 0 28px}
.sup-tile{display:grid;gap:6px;padding:18px 20px;border-radius:14px;border:1px solid rgba(148,163,184,.25);background:rgba(15,23,42,.55);color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.sup-tile:hover,.sup-tile:focus-visible{border-color:#60a5fa;transform:translateY(-1px)}.sup-tile b{font-size:17px}.sup-tile span{opacity:.8;line-height:1.5}
.sup-narrow{max-width:860px;padding-top:34px;padding-bottom:48px}
.sup-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.sup-head h1{margin:0}
.sup-card{margin:20px 0;padding:22px 24px;border-radius:14px;border:1px solid rgba(148,163,184,.25);background:rgba(15,23,42,.6)}.sup-card h2{margin-top:0}
.sup-form{display:grid;gap:16px}.sup-form label{display:grid;gap:7px;font-weight:600}.sup-form small{font-weight:400;opacity:.7}
.sup-form input,.sup-form select,.sup-form textarea{font:inherit;font-weight:400;padding:11px 13px;border-radius:9px;border:1px solid rgba(148,163,184,.4);background:#0b1220;color:#e8eef9;width:100%;box-sizing:border-box}
.sup-form textarea{resize:vertical}.sup-form input:focus-visible,.sup-form select:focus-visible,.sup-form textarea:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}
.sup-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.sup-error{margin:0;padding:10px 14px;border-radius:9px;background:rgba(220,38,38,.15);border:1px solid rgba(248,113,113,.5);color:#fecaca}
.sup-ok{padding:12px 16px;border-radius:10px;background:rgba(22,163,74,.15);border:1px solid rgba(74,222,128,.45);color:#bbf7d0}
.sup-list{list-style:none;margin:20px 0;padding:0;display:grid;gap:10px}
.sup-list a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px;border-radius:12px;border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.5);color:inherit;text-decoration:none}
.sup-list a:hover,.sup-list a:focus-visible{border-color:#60a5fa}.sup-subj{display:grid;gap:3px;min-width:0}.sup-subj b{overflow-wrap:anywhere}.sup-subj small{opacity:.7}
.sup-num{font-variant-numeric:tabular-nums;opacity:.65;font-weight:600}
.sup-status{white-space:nowrap;font-size:13px;font-weight:700;border-radius:999px;padding:4px 11px}.sup-status.open{background:#1d4ed8;color:#fff}.sup-status.answered{background:#f59e0b;color:#111}.sup-status.closed{background:rgba(148,163,184,.25);color:#e2e8f0}
.sup-thread{list-style:none;margin:22px 0;padding:0;display:grid;gap:14px}
.sup-thread li{padding:16px 18px;border-radius:12px;border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.45)}.sup-thread li.staff{border-left:4px solid #22c55e;background:rgba(22,163,74,.08)}.sup-thread li.mine{border-left:4px solid #3b82f6}
.sup-msg-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}.sup-msg-head time{opacity:.65;font-size:13px}.sup-msg{line-height:1.65;overflow-wrap:anywhere}
.sup-signin .btn{margin:6px 0 10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:700px){.sup-list a{grid-template-columns:minmax(0,1fr) auto}.sup-num{display:none}.sup-me{display:none}}
#main:focus{outline:none}
.top-actions .link-btn{background:none;border:0;padding:4px 6px;color:inherit;font:inherit;font-size:14px;cursor:pointer;opacity:.8;text-decoration:underline;text-underline-offset:3px}
.top-actions .link-btn:hover,.top-actions .link-btn:focus-visible{opacity:1}
.top-actions{display:flex;align-items:center;gap:12px}
