/* MapleVerse Player Support — its own shell on top of style.css (which every site page loads first).
   Jagex's help-centre structure, MapleVerse's palette and fonts, mobile first. Everything is sup-/sx-.
   Player portraits (.mv-av) are never resized: pixel art is drawn 1:1 or not at all. */

:root {
  --ink: #221d3d;
  --ink-2: #4a4560;
  --muted: #77738a;
  --line: #e8e4f0;
  --line-2: #d9d3e6;
  --paper: #f7f4ee;
  --card: #fff;
  --navy: #2c2648;
  --navy-2: #3a3360;
  --brand: #f2711c;
  --brand-d: #d85a10;
  --brand-soft: #fff1e6;
  --sky: #2f9fe0;
  --sky-soft: #e9f5fd;
  --green: #3fae4a;
  --green-soft: #e8f7e6;
  --red: #d8432e;
  --amber: #f5a623;
  --r: 14px;
  --sh: 0 1px 2px rgba(34,29,61,.06), 0 4px 16px rgba(34,29,61,.06);
  --sh-hover: 0 2px 4px rgba(34,29,61,.08), 0 10px 26px rgba(34,29,61,.12);
  --font-ui: Fredoka, "Segoe UI", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Verdana, sans-serif;
}

/* ── Reset the site's boxed candy page into a full-width app shell ──────── */
*, *::before, *::after { box-sizing: border-box; }
body { background: var(--paper); background-image: none; color: var(--ink-2); font: 15px/1.6 var(--font-body); -webkit-text-size-adjust: 100%; }
#page { max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--paper); overflow: visible; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--brand-d); }
a:hover { color: var(--brand); }
:focus-visible { outline: 3px solid rgba(47,159,224,.55); outline-offset: 2px; }
.sx-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.sx-content { padding-top: 22px; padding-bottom: 40px; }
.sx-content.wide, .sx-staffbar .sx-wrap { max-width: 1280px; }
.sx-main { flex: 1; }

/* ── Header ───────────────────────────────────────────────────────────── */
.sx-top { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.sx-topin { display: flex; align-items: center; gap: 16px; min-height: 60px; position: relative; }
.sx-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none !important; flex: none; }
.sx-brand img { height: 40px; width: auto; display: block; }
.sx-brand span { font: 600 16px var(--font-ui); letter-spacing: .2px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.25); white-space: nowrap; }
.sx-brand:hover { color: #fff; }
.sx-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.sx-nav > a { color: #d9d4ee; font: 500 14px var(--font-ui); padding: 8px 12px; border-radius: 9px; text-decoration: none; white-space: nowrap; }
.sx-nav > a:hover { color: #fff; background: rgba(255,255,255,.08); }
.sx-nav > a.on { color: #fff; background: rgba(255,255,255,.14); }
.sx-nav .sx-out { color: #a9a3c6; font-size: 13px; }
.sx-nav > a.sx-signin { background: var(--brand); color: #fff; font-weight: 600; margin-left: 6px; }
.sx-nav > a.sx-signin:hover { background: var(--brand-d); }
.sx-me { position: relative; margin-left: 6px; }
.sx-me summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 999px; }
.sx-me summary::-webkit-details-marker { display: none; }
.sx-me summary:hover, .sx-me[open] summary { background: rgba(255,255,255,.1); }
.sx-mename { font: 500 14px var(--font-ui); color: #fff; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-menu { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border-radius: 12px; box-shadow: var(--sh-hover); min-width: 180px; padding: 6px; z-index: 60; }
.sx-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); font: 500 14px var(--font-ui); text-decoration: none; }
.sx-menu a:hover { background: var(--paper); color: var(--ink); }
.sx-burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; position: relative; padding: 0; }
.sx-burger span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px auto; border-radius: 2px; transition: transform .2s, opacity .2s; }
.sx-burger:hover { background: rgba(255,255,255,.08); }
.sx-pip { position: absolute; top: 9px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--navy); }
.sx-top.open .sx-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sx-top.open .sx-burger span:nth-child(2) { opacity: 0; }
.sx-top.open .sx-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sx-staffbar { background: var(--navy-2); border-top: 1px solid rgba(255,255,255,.08); }
.sx-staffbar .sx-wrap { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.sx-staffbar .sx-wrap::-webkit-scrollbar { display: none; }
.sx-staffbar a { color: #cbc5e6; font: 500 13px var(--font-ui); padding: 10px 12px; white-space: nowrap; text-decoration: none; border-bottom: 2px solid transparent; }
.sx-staffbar a:hover { color: #fff; }
.sx-staffbar a.on { color: #fff; border-bottom-color: var(--brand); }
.sx-role { margin-left: auto; color: #a9a3c6; font: 500 12px var(--font-ui); white-space: nowrap; padding-left: 12px; }

/* ── Notices (Jagex's coloured strips) ────────────────────────────────── */
.sup-notice { color: #fff; }
.sup-notice-alert { background: #e8761f; }
.sup-notice-info { background: #5a68c9; }
.sup-notice + .sup-notice { border-top: 1px solid rgba(255,255,255,.2); }
.sup-notice .sx-wrap { display: flex; align-items: center; gap: 8px; }
.sup-notice .sx-wrap > a, .sup-notice .sx-wrap > div { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 0; color: #fff; text-decoration: none; }
.sup-notice .sx-wrap > a:hover .sup-notice-text b { text-decoration: underline; }
.sup-notice-ico { flex: none; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--font-ui); }
.sup-notice-text { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-notice-text b { font: 600 14px var(--font-ui); }
.sup-notice-text span { opacity: .92; }
.sup-notice-x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.sup-notice-x:hover { background: rgba(255,255,255,.16); }

/* ── Hero (home) and page bands ───────────────────────────────────────── */
.sup-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #7cc8f2 0%, #a9dcf7 60%, #d6effb 100%); padding: 44px 0 190px; text-align: center; }
.sup-hero-sky { position: absolute; inset: 0; background: url("/assets/map/henesys-clouds.png") center 20% / 900px auto repeat-x; opacity: .7; pointer-events: none; }
.sup-hero-ground { position: absolute; left: 0; right: 0; bottom: -12px; height: 236px; background: url("/assets/map/amherst.png") center top / 960px auto repeat-x; pointer-events: none; }
.sup-hero-in { position: relative; z-index: 1; }
.sup-hero h1 { margin: 0 0 18px; color: #fff; font: 400 clamp(30px, 5vw, 44px)/1.1 Jua, var(--font-ui); text-shadow: 0 2px 0 rgba(34,29,61,.35), 0 6px 18px rgba(34,29,61,.25); }
.sup-quick { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sup-quick a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--ink); font: 500 14px var(--font-ui); text-decoration: none; box-shadow: var(--sh); }
.sup-quick a:hover { background: #fff; color: var(--brand-d); box-shadow: var(--sh-hover); }
.sup-quick .sup-ico { width: 22px; height: 22px; stroke: var(--brand); }

.sup-band-hero { background: linear-gradient(120deg, var(--navy) 0%, #3d3470 55%, #4b3f86 100%); color: #fff; padding: 28px 0 30px; position: relative; overflow: hidden; }
.sup-band-hero::after { content: ""; position: absolute; right: -40px; bottom: -30px; width: 360px; height: 160px; background: url("/assets/map/amherst.png") right top / 520px auto no-repeat; opacity: .16; pointer-events: none; }
.sup-band-hero .sx-wrap { position: relative; z-index: 1; }
.sup-band-hero h1 { margin: 0; font: 400 clamp(24px, 4vw, 32px)/1.2 Jua, var(--font-ui); color: #fff; }
.sup-band-hero p { margin: 6px 0 0; color: #d9d4ee; max-width: 680px; }
.sup-band-hero p a { color: #ffd2a8; }
.sup-band-thin { background: var(--navy); padding: 12px 0; }
.sup-rt { display: inline-block; margin-top: 6px; color: #fff; }

/* ── Search ───────────────────────────────────────────────────────────── */
.sup-search { position: relative; display: flex; align-items: center; max-width: 640px; margin: 0 auto; background: #fff; border-radius: 999px; box-shadow: 0 2px 4px rgba(34,29,61,.12), 0 10px 30px rgba(34,29,61,.14); padding: 5px 5px 5px 16px; text-align: left; }
.sup-band-hero .sup-search { margin: 16px 0 0; max-width: 560px; }
.sup-band-thin .sup-search { margin: 0; max-width: 520px; box-shadow: none; }
.sup-search > .sup-ico { width: 20px; height: 20px; stroke: var(--muted); flex: none; }
.sup-search input[type=search] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 10px; font: 16px var(--font-body); color: var(--ink); }
.sup-search.big input[type=search] { padding: 13px 12px; font-size: 17px; }
.sup-search button { flex: none; border: 0; border-radius: 999px; background: var(--brand); color: #fff; font: 600 15px var(--font-ui); padding: 10px 20px; cursor: pointer; }
.sup-search.big button { padding: 12px 24px; }
.sup-search button:hover { background: var(--brand-d); }
.sup-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; background: #fff; border-radius: 14px; box-shadow: var(--sh-hover); overflow: hidden; text-align: left; }
.sup-suggest-head { padding: 9px 16px; font: 600 12px var(--font-ui); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; background: var(--paper); }
.sup-suggest a { display: block; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.sup-suggest a:hover, .sup-suggest a:focus { background: var(--brand-soft); }
.sup-suggest a b { font: 500 15px var(--font-ui); }
.sup-suggest a span { display: block; color: var(--muted); font-size: 12px; }
.sup-suggest-inline { position: static; margin-top: 8px; box-shadow: none; border: 1px solid var(--line-2); }

/* ── Common bits ──────────────────────────────────────────────────────── */
.sup-card { background: var(--card); border-radius: var(--r); box-shadow: var(--sh); padding: 20px 22px; margin-bottom: 16px; border: 1px solid rgba(34,29,61,.04); }
.sup-card-flush { padding: 0; overflow: hidden; }
.sup-h2 { color: var(--ink); font: 600 20px var(--font-ui); margin: 30px 0 12px; }
.sup-h2:first-child { margin-top: 6px; }
.sup-h2-in { margin-top: 0; }
.sup-title { margin: 0; color: var(--ink); font: 600 26px/1.25 var(--font-ui); overflow-wrap: anywhere; }
.sup-title-sm { font-size: 19px; }
.sup-muted { color: var(--muted); }
.sup-small { font: 500 12px var(--font-ui); margin-left: 6px; }
.sup-req { color: var(--red); }
.sup-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; font: 500 13px var(--font-ui); color: var(--muted); }
.sup-crumbs a { color: var(--muted); text-decoration: none; }
.sup-crumbs a:hover { color: var(--brand-d); text-decoration: underline; }
.sup-crumbs b { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.sup-crumbs span { color: var(--line-2); }
.sup-crumb-sm { color: var(--muted); font-size: 12px; }
.sup-empty { text-align: center; padding: 34px 22px; }
.sup-empty .sup-ico { width: 46px; height: 46px; stroke: var(--line-2); }
.sup-empty h2 { font: 600 20px var(--font-ui); color: var(--ink); margin: 0 0 6px; }
.sup-empty-line { text-align: center; color: var(--muted); padding: 28px 8px; margin: 0; }
.sup-ico { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sup-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border: 0; border-radius: 12px; background: var(--brand); color: #fff !important; font: 600 15px var(--font-ui); text-decoration: none !important; cursor: pointer; box-shadow: 0 2px 0 var(--brand-d); white-space: nowrap; }
.sup-btn:hover { background: var(--brand-d); }
.sup-btn:active { transform: translateY(1px); box-shadow: none; }
.sup-btn-sm { min-height: 34px; padding: 6px 14px; font-size: 13px; border-radius: 10px; }
.sup-btn-ghost { background: var(--navy); box-shadow: 0 2px 0 #1a1630; }
.sup-btn-ghost:hover { background: var(--navy-2); }
.sup-headtools { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sup-export { display: block; width: 100%; min-height: 220px; margin: 0 0 16px; font: 12px/1.5 ui-monospace, Consolas, monospace; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; }
.sup-export[hidden] { display: none; }
.sup-claude { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #e9e4ff; color: #4b3aa8; font: 600 11px var(--font-ui); margin-left: 4px; }
.sup-claude.ask { background: #fff3d9; color: #9a6200; }
.sup-linkbtn { border: 0; background: none; padding: 0; cursor: pointer; color: var(--brand-d); font: 600 13px var(--font-ui); }
.sup-linkbtn:hover { text-decoration: underline; }
.sup-danger { color: var(--red) !important; }
.sup-inlineform { display: inline; margin-left: 10px; }
.sup-err, .sup-ok { border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-weight: 500; }
.sup-err { background: #fdeceb; color: #9a2516; border: 1px solid #f6c8c1; }
.sup-ok { background: var(--green-soft); color: #22621f; border: 1px solid #c7e9c2; }
.sup-callout { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: var(--sky-soft); border-left: 4px solid var(--sky); color: #24435a; }
.sup-callout.warn { background: #fff4e5; border-left-color: var(--amber); color: #6a3d00; }
.sup-draft, .sup-pop { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 600 11px var(--font-ui); vertical-align: 2px; }
.sup-draft { background: #fff1c7; color: #7a5a00; }
.sup-pop { background: var(--sky-soft); color: #1f6f9f; }
.sup-seeall { display: inline-block; margin-top: 10px; font: 500 14px var(--font-ui); }
.sup-pagehead { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.sup-pagehead p { margin: 4px 0 0; }
.sup-headrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

/* Links list (articles) */
.sup-links { list-style: none; margin: 0; padding: 0; }
.sup-links li + li { border-top: 1px solid var(--line); }
.sup-links a { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 13px 18px; color: var(--ink); text-decoration: none; font: 500 15px var(--font-ui); min-height: 48px; }
.sup-links a:hover { background: var(--brand-soft); color: var(--brand-d); }
.sup-links a .sup-ico { width: 18px; height: 18px; stroke: var(--line-2); }
.sup-links a:hover .sup-ico { stroke: var(--brand); }
.sup-links small { display: block; color: var(--muted); font: 13px var(--font-body); margin-top: 2px; }
.sup-links-2 { columns: 2; column-gap: 0; }
.sup-links-2 li { break-inside: avoid; border-top: 1px solid var(--line); }
.sup-section .sup-links a { padding: 10px 0; min-height: 44px; }
.sup-section .sup-links a:hover { background: none; }
.sup-li-empty { padding: 10px 0; }

/* Home */
.sup-alert { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r); background: var(--brand-soft); border: 1px solid #ffd3b0; color: var(--ink); text-decoration: none !important; margin: 0 0 8px; }
.sup-alert:hover { color: var(--ink); box-shadow: var(--sh); }
.sup-alert .sup-ico { stroke: var(--brand); }
.sup-alert span { flex: 1; }
.sup-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sup-tile { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--card); border-radius: var(--r); box-shadow: var(--sh); border: 1px solid rgba(34,29,61,.04); color: var(--ink-2); text-decoration: none !important; transition: box-shadow .15s, transform .15s; }
.sup-tile:hover { box-shadow: var(--sh-hover); transform: translateY(-2px); color: var(--ink-2); }
.sup-tile-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; }
.sup-tile-ico .sup-ico { width: 30px; height: 30px; stroke: var(--brand); }
.sup-tile:nth-child(3n+2) .sup-tile-ico { background: var(--sky-soft); }
.sup-tile:nth-child(3n+2) .sup-tile-ico .sup-ico { stroke: var(--sky); }
.sup-tile:nth-child(3n) .sup-tile-ico { background: var(--green-soft); }
.sup-tile:nth-child(3n) .sup-tile-ico .sup-ico { stroke: var(--green); }
.sup-tile-text b { display: block; color: var(--ink); font: 600 17px var(--font-ui); }
.sup-tile-text span { display: block; font-size: 14px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.sup-tile-n { margin-top: auto; font: 500 13px var(--font-ui); color: var(--brand-d); }

.sup-help { display: flex; align-items: center; gap: 18px; margin-top: 30px; padding: 20px 24px; background: var(--card); border-radius: var(--r); box-shadow: var(--sh); border: 1px solid rgba(34,29,61,.04); }
.sup-help-art { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--sky-soft); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.sup-help-art img { image-rendering: pixelated; max-height: 60px; }
.sup-help-text { flex: 1; min-width: 0; }
.sup-help h2 { margin: 0 0 2px; font: 600 19px var(--font-ui); color: var(--ink); }
.sup-help p { margin: 0; color: var(--muted); font-size: 14px; }
.sup-help b { color: var(--ink); }

/* Category + article */
.sup-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sup-sections .sup-card { margin: 0; }
.sup-section h2 { font: 600 18px var(--font-ui); color: var(--ink); margin: 0 0 6px; }
.sup-section h2 a { color: var(--ink); text-decoration: none; }
.sup-section h2 a:hover { color: var(--brand-d); }
.sup-artgrid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.sup-artgrid .sup-card { margin: 0; }
.sup-article { padding: 28px 32px; }
.sup-meta { color: var(--muted); font-size: 13px; margin: 6px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sup-body { font-size: 16px; line-height: 1.75; color: #3a3550; overflow-wrap: anywhere; }
.sup-body > :first-child { margin-top: 0; }
.sup-body h2 { font: 600 21px var(--font-ui); color: var(--ink); margin: 26px 0 8px; }
.sup-body h3 { font: 600 18px var(--font-ui); color: var(--ink); margin: 20px 0 6px; }
.sup-body p { margin: 0 0 14px; }
.sup-body ul, .sup-body ol { padding-left: 24px; margin: 0 0 16px; }
.sup-body li { margin: 6px 0; padding-left: 2px; }
.sup-body li::marker { color: var(--brand); font-weight: 600; }
.sup-body b { color: var(--ink); }
.sup-vote { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sup-vote > span { font: 500 15px var(--font-ui); color: var(--ink); }
.sup-vote form { display: flex; gap: 8px; }
.sup-vote-msg { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 14px; }
.sup-chipbtn { min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: 500 14px var(--font-ui); cursor: pointer; }
.sup-chipbtn:hover { border-color: var(--brand); color: var(--brand-d); }
.sup-chipbtn.on { background: var(--green); border-color: var(--green); color: #fff; }
.sup-chipbtn.bad.on { background: var(--red); border-color: var(--red); }
.sup-aside { position: sticky; top: 80px; padding: 18px; }
.sup-aside h2 { font: 600 13px var(--font-ui); color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: 0 0 8px; }
.sup-navlist { list-style: none; margin: 0; padding: 0; }
.sup-navlist a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); font-size: 14px; text-decoration: none; line-height: 1.35; }
.sup-navlist a:hover { background: var(--paper); color: var(--ink); }
.sup-navlist a.on { background: var(--brand-soft); color: var(--brand-d); font-weight: 600; }

.sup-count { color: var(--muted); margin: 0 0 12px; }
.sup-results { list-style: none; margin: 0; padding: 0; }
.sup-results li + li { border-top: 1px solid var(--line); }
.sup-results a { display: block; padding: 16px 20px; text-decoration: none; color: var(--ink-2); }
.sup-results a:hover { background: var(--brand-soft); }
.sup-results b { display: block; font: 600 17px var(--font-ui); color: var(--ink); }
.sup-results a:hover b { color: var(--brand-d); }
.sup-snip { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }

/* ── Contact ──────────────────────────────────────────────────────────── */
.sup-step { margin-bottom: 26px; scroll-margin-top: 80px; }
.sup-steph { display: flex; align-items: center; gap: 10px; font: 600 19px var(--font-ui); color: var(--ink); margin: 0 0 12px; }
.sup-steph span { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.sup-issues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sup-issue { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card); border-radius: 12px; border: 2px solid transparent; box-shadow: var(--sh); color: var(--ink); text-decoration: none !important; font: 500 15px/1.3 var(--font-ui); min-height: 64px; transition: border-color .15s, box-shadow .15s; }
.sup-issue:hover { box-shadow: var(--sh-hover); color: var(--ink); }
.sup-issue .sup-ico { width: 26px; height: 26px; stroke: var(--brand); }
.sup-issue.on { border-color: var(--brand); background: var(--brand-soft); }
.sup-change { display: none; margin-top: 10px; font: 500 14px var(--font-ui); }
.sup-gate { text-align: center; padding: 30px 22px; }
.sup-gate .sup-ico { width: 40px; height: 40px; stroke: var(--brand); }
.sup-gate h3 { font: 600 20px var(--font-ui); color: var(--ink); margin: 8px 0 4px; }
.sup-gate p { margin: 0 0 14px; }
.sup-intro { margin: 0 0 14px; color: var(--muted); }
.sup-form { padding: 24px; }
.sup-field { margin-bottom: 16px; }
.sup-field > label, .sup-lbl, .sup-form > label { display: block; font: 500 14px var(--font-ui); color: var(--ink); margin-bottom: 6px; }
.sup-form > label { margin-bottom: 14px; }
.sup-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.sup-form input[type=text], .sup-form input[type=number], .sup-form select, .sup-form textarea,
.sup-composer textarea, .sup-rate textarea, .sup-props select, .sup-props input[type=text], .sup-filter input, .sup-filter select, .sup-composer select {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; font: 16px var(--font-body); color: var(--ink); background: #fff;
  border: 1px solid var(--line-2); border-radius: 10px; transition: border-color .15s, box-shadow .15s; margin-top: 4px;
}
.sup-form textarea, .sup-composer textarea, .sup-rate textarea { min-height: 0; resize: vertical; line-height: 1.5; }
.sup-form input:focus, .sup-form select:focus, .sup-form textarea:focus, .sup-composer textarea:focus, .sup-rate textarea:focus,
.sup-props select:focus, .sup-props input:focus, .sup-filter input:focus, .sup-filter select:focus { outline: 0; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(47,159,224,.18); }
.sup-drop { display: flex !important; align-items: center; gap: 12px; padding: 14px 16px; border: 2px dashed var(--line-2); border-radius: 12px; cursor: pointer; background: #fcfbf8; position: relative; margin: 0 !important; }
.sup-drop:hover { border-color: var(--brand); background: var(--brand-soft); }
.sup-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.sup-drop .sup-ico { stroke: var(--brand); }
.sup-drop b { display: block; font: 500 15px var(--font-ui); color: var(--ink); }
.sup-drop small { display: block; color: var(--muted); font: 13px var(--font-body); }
.sup-drop.has { border-color: var(--green); border-style: solid; background: var(--green-soft); }
.sup-formfoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 6px; }
.sup-safe { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; flex: 1; min-width: 220px; }
.sup-safe .sup-ico { width: 20px; height: 20px; stroke: var(--green); }
.sup-check { display: inline-flex !important; align-items: center; gap: 8px; font: 14px var(--font-body) !important; color: var(--ink-2); cursor: pointer; min-height: 40px; }
.sup-check input { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; }
.sup-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 14px; }

/* ── My requests ──────────────────────────────────────────────────────── */
.sup-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.sup-seg { display: flex; gap: 4px; padding: 4px; background: #ece8e0; border-radius: 12px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.sup-seg::-webkit-scrollbar { display: none; }
.sup-seg a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; color: var(--ink-2); font: 500 14px var(--font-ui); text-decoration: none; white-space: nowrap; }
.sup-seg a b { font-weight: 500; font-size: 12px; color: var(--muted); background: rgba(34,29,61,.07); border-radius: 999px; padding: 0 7px; }
.sup-seg a:hover { color: var(--ink); }
.sup-seg a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(34,29,61,.12); }
.sup-minisearch { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 0 12px; }
.sup-minisearch .sup-ico { width: 18px; height: 18px; stroke: var(--muted); }
.sup-minisearch input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 11px 0; font: 16px var(--font-body); background: transparent; }
.sup-reqlist { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }
.sup-reqlist li + li { border-top: 1px solid var(--line); }
.sup-reqlist a { display: flex; align-items: center; gap: 14px; padding: 16px 20px; color: var(--ink-2); text-decoration: none; }
.sup-reqlist a:hover { background: #fbfaf7; }
.sup-reqmain { flex: 1; min-width: 0; }
.sup-reqmain b { display: block; color: var(--ink); font: 500 16px var(--font-ui); overflow-wrap: anywhere; }
.sup-reqlist a.unread b { font-weight: 700; }
.sup-reqmain small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.sup-newdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); margin-right: 8px; vertical-align: 2px; }
.sup-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font: 600 12px var(--font-ui); }

.sup-st, .sup-pri { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 600 12px var(--font-ui); white-space: nowrap; flex: none; }
.sup-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sup-st-new { background: #fff3d9; color: #9a6200; }
.sup-st-open { background: #fdeceb; color: #b3321f; }
.sup-st-pending { background: var(--sky-soft); color: #1b6fa3; }
.sup-st-on_hold { background: #ebe8f5; color: var(--navy); }
.sup-st-solved { background: var(--green-soft); color: #2a7a2f; }
.sup-st-closed { background: #efedf3; color: var(--muted); }
.sup-pri { background: #f2f0f6; color: var(--ink-2); font-weight: 500; }
.sup-pri-high { background: #fff1d6; color: #8a5300; }
.sup-pri-urgent { background: var(--red); color: #fff; }
.sup-pri-low { color: var(--muted); }

/* ── Conversation ─────────────────────────────────────────────────────── */
.sup-reqhead { align-items: flex-start; }
.sup-reqgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.sup-sidecol .sup-card { margin-bottom: 16px; }
.sup-chat { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sup-bubble { display: flex; gap: 10px; align-items: flex-start; max-width: 86%; }
.sup-bubble.me { align-self: flex-end; flex-direction: row-reverse; }
.sup-bwrap { min-width: 0; background: #fff; border-radius: 4px 16px 16px 16px; padding: 12px 16px; box-shadow: var(--sh); border: 1px solid rgba(34,29,61,.05); }
.sup-bubble.me .sup-bwrap { background: #fff4ea; border-radius: 16px 4px 16px 16px; border-color: #ffe0c7; }
.sup-bubble.team .sup-bwrap { border-left: 3px solid var(--sky); }
.sup-bubble.player .sup-bwrap { background: #fff4ea; border-color: #ffe0c7; }
.sup-bubble.note .sup-bwrap { background: #fff8d6; border: 1px dashed #e6c74a; border-left: 3px solid #e6b800; }
.sup-bhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 4px; }
.sup-bhead b { color: var(--ink); font: 600 14px var(--font-ui); }
.sup-bhead time { color: var(--muted); font-size: 12px; margin-left: auto; }
.sup-bbody { overflow-wrap: anywhere; color: #3a3550; }
.sup-teamtag, .sup-notetag, .sup-playertag { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 600 11px var(--font-ui); }
.sup-teamtag { background: var(--sky-soft); color: #1b6fa3; }
.sup-notetag { background: #ffe680; color: #5a4300; }
.sup-playertag { background: #ffe3cc; color: #9a4a10; }
.sup-sys { align-self: center; text-align: center; }
.sup-sys span { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #ece8e0; color: var(--muted); font-size: 12px; }
.sup-sys.ev span { background: transparent; font-style: italic; padding: 0 8px; }
.sup-init { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 15px var(--font-ui); color: #fff; background: hsl(var(--h, 20), 55%, 52%); }
.sup-init.team { background: var(--navy); }
.sx-me .sup-init { width: 32px; height: 32px; font-size: 14px; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.sup-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sup-files a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); }
.sup-files img { display: block; width: 140px; height: 96px; object-fit: cover; background: var(--paper); }
.sup-composer { padding: 16px; }
.sup-crow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
.sup-crow .sup-btn { margin-left: auto; }
.sup-attach { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--ink-2); font: 500 14px var(--font-ui); cursor: pointer; overflow: hidden; }
.sup-attach:hover { border-color: var(--brand); color: var(--brand-d); }
.sup-attach.has { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.sup-attach .sup-ico { width: 18px; height: 18px; }
.sup-attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.sup-card.sup-details { padding: 0; }
.sup-details summary { list-style: none; cursor: pointer; padding: 14px 18px; font: 600 15px var(--font-ui); color: var(--ink); display: flex; justify-content: space-between; align-items: center; }
.sup-details summary::-webkit-details-marker { display: none; }
.sup-details summary::after { content: "\25BE"; color: var(--muted); transition: transform .2s; }
.sup-details[open] summary::after { transform: rotate(180deg); }
.sup-details .sup-dl { padding: 0 18px 16px; }
.sup-dl { margin: 0; }
.sup-dl dt { font: 500 12px var(--font-ui); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 12px; }
.sup-dl dt:first-child { margin-top: 0; }
.sup-dl dd { margin: 2px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.sup-dl code { background: var(--paper); border-radius: 6px; padding: 1px 6px; font-size: 13px; }
.sup-rate b { display: block; font: 600 15px var(--font-ui); color: var(--ink); }
.sup-rate-btns { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.sup-rate-btns .sup-chipbtn { text-align: left; }

/* ── Staff ────────────────────────────────────────────────────────────── */
.sup-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
.sup-stats > div { background: var(--card); border-radius: 12px; padding: 12px 14px; box-shadow: var(--sh); }
.sup-stats b { display: block; color: var(--ink); font: 600 22px var(--font-ui); }
.sup-stats span { color: var(--muted); font-size: 12px; }
.sup-staffgrid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.sup-staffgrid > .sup-card { margin: 0; }
.sup-views { padding: 8px; position: sticky; top: 120px; }
.sup-views a { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 9px; color: var(--ink-2); font: 500 14px var(--font-ui); text-decoration: none; white-space: nowrap; }
.sup-views a b { color: var(--muted); font-weight: 500; }
.sup-views a:hover { background: var(--paper); color: var(--ink); }
.sup-views a.on { background: var(--navy); color: #fff; }
.sup-views a.on b { color: #cfc8ea; }
.sup-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sup-filter input, .sup-filter select { margin: 0; }
.sup-filter input[type=search] { flex: 2; min-width: 180px; }
.sup-filter select { flex: 1; min-width: 130px; width: auto; }
.sup-table { width: 100%; border-collapse: collapse; }
.sup-table th { text-align: left; color: var(--muted); font: 500 12px var(--font-ui); text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sup-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; font-size: 14px; }
.sup-table tbody tr:last-child td { border-bottom: 0; }
.sup-table tbody tr:hover td { background: #fbfaf7; }
.sup-table td > a, .sup-c-subj a { color: var(--ink); font: 500 15px var(--font-ui); text-decoration: none; }
.sup-table td > a:hover, .sup-c-subj a:hover { color: var(--brand-d); }
.sup-queue tbody tr[data-href] { cursor: pointer; }
.sup-c-id { width: 60px; color: var(--muted); font: 500 13px var(--font-ui); }
.sup-c-date { width: 110px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.sup-c-num { text-align: right; white-space: nowrap; color: var(--ink-2); }
.sup-c-act { text-align: right; white-space: nowrap; }
.sup-ball { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #fdeceb; color: #b3321f; font: 600 11px var(--font-ui); margin-left: 4px; }
.sup-tgrid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.sup-tgrid > .sup-card { margin: 0; }
.sup-tleft .sup-card { margin-bottom: 16px; padding: 18px; }
.sup-thread { padding: 20px; }
.sup-thread .sup-headrow { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.sup-props label { display: block; font: 500 13px var(--font-ui); color: var(--muted); margin: 0 0 12px; }
.sup-propval { display: block; color: var(--ink); font-size: 15px; }
.sup-props .sup-linkbtn { margin: -6px 0 12px; }
.sup-reqinfo h3 { font: 600 15px var(--font-ui); color: var(--ink); margin: 18px 0 6px; }
.sup-reqinfo .mv-av { display: flex; margin: 0 auto; }
.sup-reqtop { text-align: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.sup-reqtop b { display: block; color: var(--ink); font: 600 16px var(--font-ui); margin-top: 4px; }
.sup-chars, .sup-otherlist, .sup-log { list-style: none; margin: 0; padding: 0; }
.sup-chars li, .sup-otherlist li { padding: 7px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.sup-log li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sup-thread .sup-composer { margin-top: 6px; background: #f6fbff; border: 1px solid #d6e9f6; border-radius: 12px; }
.sup-thread .sup-composer.is-note { background: #fffbe6; border-color: #f0dc8a; }
.sup-ctabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.sup-ctabs label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; cursor: pointer; font: 500 14px var(--font-ui); color: var(--ink-2); }
.sup-ctabs label:has(input:checked) { background: #fff; box-shadow: 0 1px 3px rgba(34,29,61,.14); color: var(--ink); }
.sup-ctabs .sup-macro { margin: 0 0 0 auto; width: auto; min-width: 200px; }
.sup-submit { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.sup-submit select { width: auto; margin: 0; }
.sup-note-hint { font-size: 12px; margin: 8px 0 0; }
.sup-rating-good { color: var(--green); font-weight: 600; }
.sup-rating-bad { color: var(--red); font-weight: 600; }
.sup-macro-prev { color: var(--muted); font-size: 13px; margin-top: 2px; }
.sup-lvl { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.sup-lvl-alert { background: #e8761f; }
.sup-lvl-info { background: #5a68c9; }
.sup-kbcat { display: flex; align-items: center; gap: 10px; font: 600 19px var(--font-ui); color: var(--ink); margin: 26px 0 4px; }
.sup-kbcat .sup-ico { width: 26px; height: 26px; stroke: var(--brand); }
.sup-kbcat .sup-muted { font: 400 13px var(--font-body); }
.sup-kbsec { font: 500 14px var(--font-ui); color: var(--muted); margin: 14px 0 4px; }
.sup-kbcols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sup-mono { font-family: Consolas, "Courier New", monospace !important; font-size: 13px !important; }
.sup-preview { border: 1px dashed var(--line-2); border-radius: 10px; padding: 12px 16px; max-height: 520px; overflow: auto; background: #fff; font-size: 15px; }
.sup-cheat { margin: 10px 0; color: var(--muted); font-size: 13px; line-height: 2.1; }
.sup-cheat code { background: var(--paper); border-radius: 6px; padding: 2px 6px; }
.sup-card > details { margin: 6px 0; }
.sup-card > details > summary { font: 500 15px var(--font-ui); color: var(--ink); padding: 6px 0; cursor: pointer; }
.sup-form > .sup-btn { margin-top: 8px; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.sx-foot { background: #ece8e0; color: var(--muted); font-size: 12px; line-height: 1.6; padding: 24px 0 30px; margin-top: 20px; }
.sx-footnav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; }
.sx-footnav a { color: var(--ink-2); font: 500 14px var(--font-ui); text-decoration: none; }
.sx-footnav a:hover { color: var(--brand-d); }
.sx-foot p { margin: 0 0 6px; max-width: 900px; }

/* ── Tablet ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .sup-stats { grid-template-columns: repeat(3, 1fr); }
  .sup-tgrid { grid-template-columns: 230px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sx-burger { display: block; }
  .sx-nav { display: none; position: absolute; left: -20px; right: -20px; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
            background: var(--navy); padding: 8px 16px 16px; box-shadow: 0 12px 24px rgba(0,0,0,.25); }
  .sx-top.open .sx-nav { display: flex; }
  .sx-nav > a { padding: 13px 12px; font-size: 16px; border-radius: 10px; }
  .sx-nav > a.sx-signin { text-align: center; margin: 8px 0 0; }
  .sx-me { margin: 6px 0 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 8px; }
  .sx-me summary { padding: 8px; }
  .sx-me[open] summary { background: transparent; }
  .sx-menu { position: static; background: transparent; box-shadow: none; padding: 0 0 0 44px; }
  .sx-menu a { color: #d9d4ee; padding: 10px 12px; }
  .sx-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .sup-tiles, .sup-issues { grid-template-columns: 1fr 1fr; }
  .sup-artgrid, .sup-reqgrid, .sup-staffgrid, .sup-kbcols, .sup-tgrid { grid-template-columns: minmax(0, 1fr); }
  .sup-aside { position: static; }
  .sup-sections { grid-template-columns: 1fr; }
  .sup-views { position: static; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 6px; }
  .sup-views::-webkit-scrollbar { display: none; }
  .sup-views a { flex: none; }
  .sup-tleft { order: 2; }
  .sup-reqgrid .sup-sidecol { display: contents; }
  .sup-reqgrid .sup-details { order: -1; margin: 0; }
  .sup-reqgrid .sup-rate { order: 1; margin: 0; }
  .sup-reqgrid { gap: 16px; }
  .sup-hero { padding: 34px 0 170px; }
}

/* ── Phone ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .sx-wrap { padding: 0 14px; }
  .sx-nav { left: -14px; right: -14px; }
  .sx-content { padding-top: 16px; }
  .sx-brand img { height: 34px; }
  .sx-brand span { font-size: 15px; padding-left: 8px; }
  .sup-notice-text { white-space: normal; font-size: 13px; line-height: 1.35; }
  .sup-notice-text span { display: none; }
  .sup-hero { padding: 26px 0 150px; }
  .sup-hero-ground { height: 170px; background-size: 700px auto; }
  .sup-search { padding: 4px 4px 4px 12px; }
  .sup-search input[type=search], .sup-search.big input[type=search] { font-size: 16px; padding: 10px 6px; }
  .sup-search button, .sup-search.big button { padding: 10px 14px; font-size: 14px; }
  .sup-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sup-quick a { justify-content: flex-start; border-radius: 12px; padding: 10px 12px; font-size: 13px; }
  .sup-tiles { grid-template-columns: 1fr; gap: 10px; }
  .sup-tile { flex-direction: row; align-items: center; padding: 14px 16px; gap: 14px; }
  .sup-tile-ico { width: 46px; height: 46px; flex: none; }
  .sup-tile-text { flex: 1; min-width: 0; }
  .sup-tile-n { display: none; }
  .sup-links-2 { columns: 1; }
  .sup-h2 { font-size: 18px; margin-top: 24px; }
  .sup-title { font-size: 22px; }
  .sup-card { padding: 16px; border-radius: 12px; }
  .sup-card-flush { padding: 0; }
  .sup-article { padding: 20px 18px; }
  .sup-help { flex-direction: column; text-align: center; padding: 20px 16px; }
  .sup-help .sup-btn { width: 100%; }
  .sup-issues { grid-template-columns: 1fr; gap: 8px; }
  .sup-issue { min-height: 56px; padding: 12px 14px; }
  .sup-step.picked .sup-issue:not(.on) { display: none; }
  .sup-step.picked .sup-change { display: inline-block; }
  .sup-fgrid { grid-template-columns: 1fr; }
  .sup-form { padding: 16px; }
  .sup-formfoot .sup-btn, .sup-gate .sup-btn, .sup-pagehead .sup-btn { width: 100%; }
  .sup-reqlist a { padding: 14px 16px; align-items: flex-start; flex-direction: column; gap: 8px; }
  .sup-bubble { max-width: 100%; }
  .sup-init { width: 30px; height: 30px; font-size: 13px; }
  .sup-bwrap { padding: 10px 12px; }
  .sup-crow .sup-btn { width: 100%; margin-left: 0; }
  .sup-files img { width: 110px; height: 80px; }
  .sup-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sup-stats b { font-size: 19px; }
  /* Tables become stacked cards. */
  .sup-stack thead { display: none; }
  .sup-stack, .sup-stack tbody { display: block; width: 100%; }
  .sup-stack tr { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
  .sup-stack tr:last-child { border-bottom: 0; }
  .sup-stack td { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; font-size: 13px; }
  .sup-stack td[data-label]::before { content: attr(data-label); color: var(--muted); font: 500 11px var(--font-ui); text-transform: uppercase; letter-spacing: .4px; }
  .sup-stack td.sup-c-id { width: auto; order: -2; }
  .sup-stack td.sup-c-subj { order: -1; flex-basis: 100%; display: block; }
  .sup-stack tbody tr:hover td { background: none; }
  .sup-table:not(.sup-stack) { display: block; overflow-x: auto; }
  .sup-ctabs .sup-macro { margin-left: 0; width: 100%; min-width: 0; }
  .sup-submit { width: 100%; margin-left: 0; }
  .sup-submit select, .sup-submit .sup-btn { flex: 1; }
  .sup-filter select, .sup-filter input[type=search] { flex-basis: 100%; }
  .sx-role { display: none; }
}

/* Player lookup (staff) */
.sup-lkform input[type=search] { flex: 2 1 260px; }
.sup-lkform input[type=text] { flex: 1 1 200px; }
.sup-lk { font-size: 14px; margin-bottom: 14px; width: auto; min-width: min(100%, 560px); }
.sup-lk td { padding: 5px 10px; }
.sup-lkdl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.sup-lkdl dt, .sup-lkdl dd { margin: 0; }
.sup-lkjson { font-size: 12px; word-break: break-all; white-space: normal; }