/* MineVault portal – components: badges, callouts, toasts, dialogs, tabs, tables, widgets. */

/* ---------- badges / chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 2px;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  background: rgb(var(--lite-rgb) / 0.1);
  box-shadow: var(--outline), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.14);
  color: var(--ink-2);
  white-space: nowrap;
  margin: 2px;
  border-radius: var(--radius-b);
}
.badge.dot::before { content: ""; width: 8px; height: 8px; background: currentColor; }
.badge.ok { color: var(--ok-fg, var(--c-on-ok)); background: var(--ok-bg, var(--grass-2)); box-shadow: var(--outline), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.4), inset var(--nbw) var(--nbw) 0 rgb(var(--shade-rgb) / 0.2); }
.badge.bad { color: var(--bad-fg, #fff); background: var(--bad-bg, var(--c-danger)); box-shadow: var(--outline), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.3), inset var(--nbw) var(--nbw) 0 rgb(var(--shade-rgb) / 0.3); }
.badge.warn { color: var(--warn-fg, var(--c-on-warn)); background: var(--warn-bg, var(--gold)); box-shadow: var(--outline), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.4), inset var(--nbw) var(--nbw) 0 rgb(var(--shade-rgb) / 0.2); }
.badge.info { color: var(--info-fg, #fff); background: var(--info-bg, var(--c-info-solid)); box-shadow: var(--outline), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.3), inset var(--nbw) var(--nbw) 0 rgb(var(--shade-rgb) / 0.3); }
.badge.gold { color: var(--gold-2); background: color-mix(in srgb, var(--gold) 16%, transparent); box-shadow: var(--outline), inset 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent); }
.badge.live::before { animation: pulse 1.6s steps(2) infinite; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgb(var(--shade-rgb) / 0.35); box-shadow: var(--outline), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.1); font-size: 0.85rem; color: var(--ink-2); margin: 2px; border-radius: var(--radius-b); }
.rank { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; font-size: 0.8rem; font-weight: 800; box-shadow: 0 0 0 2px currentColor; background: rgb(var(--shade-rgb) / 0.35); margin: 2px; border-radius: var(--radius-b); }

/* ---------- callouts ---------- */
.callout { display: flex; gap: 12px; padding: 14px 16px; background: rgb(var(--shade-rgb) / 0.38); box-shadow: var(--outline), inset 4px 0 0 var(--ink-3); color: var(--ink-2); border-radius: var(--radius-s); }
.callout > svg.icon { margin-top: 2px; }
.callout b { color: var(--ink); }
.callout.ok { box-shadow: var(--outline), inset 4px 0 0 var(--grass-2); }
.callout.ok > svg.icon { color: var(--ok); }
.callout.bad { box-shadow: var(--outline), inset 4px 0 0 var(--redstone); }
.callout.bad > svg.icon { color: var(--bad); }
.callout.warn { box-shadow: var(--outline), inset 4px 0 0 var(--gold); }
.callout.warn > svg.icon { color: var(--warn); }
.callout.info { box-shadow: var(--outline), inset 4px 0 0 var(--lapis); }
.callout.info > svg.icon { color: var(--info); }

/* ---------- toasts ---------- */
.toasts { position: fixed; z-index: 200; right: 18px; bottom: 18px; display: flex; flex-direction: column-reverse; gap: 12px; width: min(400px, calc(100vw - 36px)); pointer-events: none; }
.toast {
  position: relative; overflow: hidden; pointer-events: auto;
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
  padding: 14px 14px 18px 16px;
  background: var(--bg-2) var(--tile-dirt) 0 0 / 64px 64px;
  box-shadow: var(--outline), inset 6px 0 0 var(--info), var(--bevel), 0 6px 0 rgb(var(--shade-rgb) / 0.4);
  animation: toast-in 0.28s steps(5) both;
  border-radius: var(--radius);
}
.toast.out { animation: toast-out 0.2s steps(4) forwards; }
.toast .t-icon { margin-top: 1px; }
.toast .t-title { font-family: var(--pixel); font-size: 16px; line-height: 1.25; text-shadow: var(--text-shadow); }
.toast .t-body { color: var(--ink-2); font-size: 0.92rem; margin-top: 4px; overflow-wrap: anywhere; }
.toast .t-action { margin-top: 8px; }
.toast .t-close { margin: -6px -6px 0 0; width: 30px; height: 30px; }
.toast .t-bar { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; background: currentColor; transform-origin: left; animation: toast-bar var(--toast-ms, 5000ms) linear forwards; }
.toast:hover .t-bar { animation-play-state: paused; }
.toast.ok { box-shadow: var(--outline), inset 6px 0 0 var(--grass-2), var(--bevel), 0 6px 0 rgb(var(--shade-rgb) / 0.4); color: var(--grass-2); }
.toast.bad { box-shadow: var(--outline), inset 6px 0 0 var(--redstone), var(--bevel), 0 6px 0 rgb(var(--shade-rgb) / 0.4); color: var(--bad); }
.toast.warn { box-shadow: var(--outline), inset 6px 0 0 var(--gold), var(--bevel), 0 6px 0 rgb(var(--shade-rgb) / 0.4); color: var(--warn); }
.toast.info { color: var(--info); }
.toast .t-title { color: var(--ink); }
.toast .t-body { color: var(--ink-2); }
@keyframes toast-in { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(32px); } }
@keyframes toast-bar { to { transform: scaleX(0); } }
@media (max-width: 600px) { .toasts { right: 12px; left: 12px; bottom: 12px; width: auto; } }

/* ---------- dialogs and overlays ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background: rgb(var(--shade-rgb) / 0.72);
  animation: fade-in 0.18s ease both;
  overflow-y: auto;
}
/* 6.48: leaving – the dialog sinks and fades with the backdrop (it used to vanish at once, the backdrop was removed 10 ms
 * before its fade ended), and a leaving backdrop no longer takes clicks */
.backdrop.leaving { animation: fade-in var(--mv-dur-fast) var(--mv-ease-in) reverse forwards; pointer-events: none; }
.backdrop.leaving .dialog { animation: dialog-out var(--mv-dur-fast) var(--mv-ease-in) forwards; }
@keyframes dialog-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
.dialog {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px); overflow: auto;
  background: var(--bg-2) var(--tile-dirt) 0 0 / 64px 64px;
  box-shadow: var(--outline), inset 0 5px 0 var(--grass), var(--bevel), 0 12px 0 rgb(var(--shade-rgb) / 0.45);
  padding: 30px 26px 26px;
  animation: dialog-in 0.22s steps(5) both;
  border-radius: var(--radius);
}
.dialog.wide { width: min(760px, 100%); }
.dialog h2 { margin-bottom: 10px; font-size: 24px; }
.dialog .dialog-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }
.dialog .dialog-actions.center { justify-content: center; margin-top: 4px; }
.result-dialog { padding-top: 12px; }
.dialog .dialog-close { position: absolute; top: 12px; right: 12px; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* full-screen result overlay (appeal sent, errors that need attention) */
.result { text-align: center; padding: 38px 30px 30px; }
.result .badge-big { width: 92px; height: 92px; margin: 0 auto 22px; display: grid; place-items: center; box-shadow: var(--outline-l), var(--bevel-hi); animation: pop 0.5s steps(6) both; color: #fff; background: var(--grass); border-radius: var(--radius); }
.result.ok .badge-big { background: var(--grass); }
.result.bad .badge-big { background: var(--c-danger); }
.result.warn .badge-big { background: var(--c-warn-solid); }
.result .badge-big svg { width: 48px; height: 48px; stroke-width: 3; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 0.5s 0.25s steps(8) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.result h2 { font-size: 24px; }
.result .ref { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 14px; padding: 8px 14px; background: var(--field); box-shadow: var(--outline), var(--sunk); font-family: var(--mono); letter-spacing: 0.08em; border-radius: var(--radius-s); }
.result .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; text-align: left; }
.dl dt { color: var(--ink-3); font-size: 0.86rem; }
.dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .dl { grid-template-columns: 1fr; gap: 0; } .dl dt { margin-top: 10px; } }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 8px; background: rgb(var(--shade-rgb) / 0.4); box-shadow: var(--outline), var(--sunk); scrollbar-width: none; border-radius: var(--radius); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--pixel); font-size: 16px; line-height: 1; color: var(--ink); background: rgb(var(--lite-rgb) / 0.1); border: 0; padding: 11px 16px 10px; cursor: pointer; text-shadow: var(--text-shadow); box-shadow: var(--outline), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.16), inset var(--nbw) var(--nbw) 0 rgb(var(--shade-rgb) / 0.34); margin: 2px; border-radius: var(--radius-b); }
.tab:hover { background: rgb(var(--accent2-rgb) / 0.3); color: #fff; text-decoration: none; }
.tab[aria-selected="true"], .tab[aria-current="page"] { color: #fff; background: var(--grass); box-shadow: var(--outline), var(--bevel-hi); }
.tab .count { min-width: 22px; padding: 2px 6px 1px; background: rgb(var(--shade-rgb) / 0.4); color: var(--gold-2); font-family: var(--font); font-weight: 800; font-size: 0.74rem; line-height: 16px; text-align: center; text-shadow: none; }
.tab[aria-selected="true"] .count { background: rgb(var(--shade-rgb) / 0.35); color: #fff; }
.tab .count.alert { background: var(--redstone); color: #fff; }
a.tab { text-decoration: none; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; background: rgb(var(--shade-rgb) / 0.32); box-shadow: var(--outline), var(--sunk); border-radius: var(--radius-s); }
table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
th, td { padding: 11px 12px; text-align: left; vertical-align: top; border-bottom: 2px solid rgb(var(--shade-rgb) / 0.5); }
th { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-2); background: rgb(var(--shade-rgb) / 0.45); position: sticky; top: 0; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: rgb(var(--lite-rgb) / 0.025); }
tbody tr.click { cursor: pointer; }
/* 6.48: rows answer the pointer like the cards; a list that is loading (search, filter, page) dims – only after 250 ms,
 * so quick answers and automatic refreshes do not flicker */
tbody tr { transition: background var(--mv-dur-fast) var(--mv-ease-out); }
:has(> .table-wrap) { transition: opacity var(--mv-dur-fast) var(--mv-ease-out); }
[aria-busy="true"]:has(> .table-wrap) { opacity: .55; transition: opacity var(--mv-dur-base) var(--mv-ease-out) 250ms; }
tbody tr.click:hover, tbody tr:hover { background: rgb(var(--accent2-rgb) / 0.12); }
td.actions { text-align: right; white-space: nowrap; }
td time, td .badge, td .code-link { white-space: nowrap; }
td { vertical-align: middle; }

/* ---------- misc widgets ---------- */
.stat { padding: 16px 18px; background: rgb(var(--shade-rgb) / 0.38); box-shadow: var(--outline), inset 0 -4px 0 var(--stat-color, var(--grass)), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.08); border-radius: var(--radius-s); }
.stat .v { font-family: var(--pixel); font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; color: var(--stat-color, var(--grass-2)); text-shadow: var(--text-shadow); }
.stat .k { color: var(--ink-2); font-size: 0.8rem; margin-top: 6px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.stat.gold { --stat-color: var(--gold); }
.stat .sub { color: var(--ink-3); font-size: 0.82rem; margin-top: 6px; }
.grid > .stat:nth-child(4n+2), .count-row > .stat:nth-child(4n+2) { --stat-color: var(--diamond); }
.grid > .stat:nth-child(4n+3), .count-row > .stat:nth-child(4n+3) { --stat-color: var(--gold); }
.grid > .stat:nth-child(4n+4), .count-row > .stat:nth-child(4n+4) { --stat-color: var(--amethyst); }
.progress { height: 16px; background: var(--field); box-shadow: var(--outline), var(--sunk); overflow: hidden; border-radius: var(--radius-b); }
.progress > i { display: block; height: 100%; background: var(--grass-2); transition: width 0.3s steps(6); box-shadow: inset 0 3px 0 rgb(var(--lite-rgb) / 0.35), inset 0 -3px 0 rgb(var(--shade-rgb) / 0.25); background-image: repeating-linear-gradient(90deg, transparent 0 14px, rgb(var(--shade-rgb) / 0.22) 14px 16px); border-radius: var(--radius-b); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 4px; background: rgb(var(--shade-rgb) / 0.55); }
.timeline li { position: relative; padding: 0 0 18px 18px; }
.timeline li::before { content: ""; position: absolute; left: -18px; top: 4px; width: 14px; height: 14px; background: var(--gold); box-shadow: var(--outline); }
/* 7.26.0: the month lines of the player file */
.timeline li.tl-month { padding: 2px 0 12px 0; margin-left: -6px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.timeline li.tl-month::before { display: none; }
.timeline li.report::before { background: var(--lapis); }
.timeline li.revoke::before, .timeline li.ok::before { background: var(--grass-2); }
.timeline li.appeal::before { background: var(--amethyst); }
.timeline li.bad::before { background: var(--redstone); }
.timeline .when { font-size: 0.8rem; color: var(--ink-3); }
.timeline .what { font-weight: 700; }
.timeline .detail { color: var(--ink-2); font-size: 0.92rem; overflow-wrap: anywhere; }
.chat-log { font-family: var(--mono); font-size: 0.88rem; max-height: 340px; overflow: auto; padding: 10px 14px; background: var(--field); box-shadow: var(--outline), var(--sunk); border-radius: var(--radius-s); }
.chat-log div { padding: 3px 0; overflow-wrap: anywhere; }
.chat-log time { color: var(--ink-3); margin-right: 8px; }
.chat-log b { color: var(--gold-2); font-weight: 600; margin-right: 6px; }
.kbd { font-family: var(--mono); font-size: 0.82rem; padding: 2px 7px; background: rgb(var(--shade-rgb) / 0.45); box-shadow: var(--outline), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.14); border-radius: var(--radius-s); }
.copyline { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--field); box-shadow: var(--outline), var(--sunk); font-family: var(--mono); overflow-wrap: anywhere; border-radius: var(--radius-s); }
.copyline code { flex: 1; min-width: 0; }
.switch { position: relative; display: inline-block; width: 52px; height: 28px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; background: var(--field); box-shadow: var(--outline), var(--sunk); transition: background var(--mv-dur-fast) var(--mv-ease-out); border-radius: var(--radius-b); }
.switch i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; background: #b9b9b9; box-shadow: var(--outline), var(--bevel); transition: transform 0.15s steps(4); }
.switch input:checked + i { background: var(--grass-3); }
.switch input:checked + i::after { transform: translateX(24px); background: var(--grass-2); }
.switch input:focus-visible + i { outline: 3px solid var(--gold-2); outline-offset: 3px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--ink-2); font-size: 0.88rem; }
.steps { display: flex; gap: 8px; align-items: center; margin-bottom: 22px; }
.steps .s { flex: 1; height: 12px; background: var(--field); box-shadow: var(--outline), var(--sunk); transition: background var(--mv-dur-base) var(--mv-ease-out); border-radius: var(--radius-b); }
.steps .s.on { background: var(--grass-2); box-shadow: var(--outline), inset 0 3px 0 rgb(var(--lite-rgb) / 0.35); }

/* ranks from the shop (player area and team area) */
.rank-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 2px; font-size: 0.8rem; font-weight: 800; color: #fff; background: color-mix(in srgb, var(--lapis) 85%, #000); box-shadow: var(--outline), var(--bevel); margin: 2px; border-radius: var(--radius-b); }   /* 7.1.4: a touch darker – white on plain lapis was 4.05:1 */
.rank-chip.expired { background: var(--c-muted-solid); color: var(--ink-2); }

.rank-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- site-wide announcement ---------- */
.announce { color: #fff; background: #1d3a7a; border-bottom: 4px solid #000; box-shadow: inset 0 3px 0 rgb(var(--lite-rgb) / 0.18); }
.announce.warn { background: #7a5a08; }
.announce.bad { background: #8a1f18; }
.announce .container { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; font-weight: 700; overflow-wrap: anywhere; }
.announce svg { flex: none; width: 1.4em; height: 1.4em; }
.announce .announce-link { margin-left: auto; color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- design picker (header button → dialog) ---------- */
.picker-list { display: grid; gap: 10px; margin-top: 14px; }
.picker-opt { display: grid; grid-template-columns: 96px minmax(0, 1fr) 24px; gap: 14px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--ink); background: rgb(var(--lite-rgb) / 0.07); border: 0; padding: 10px 14px 10px 10px; cursor: pointer; box-shadow: var(--outline), var(--bevel); border-radius: var(--radius-s); }
.picker-opt:hover { background: rgb(var(--accent2-rgb) / 0.22); }
.picker-opt[aria-checked="true"] { box-shadow: var(--outline), 0 0 0 4px var(--grass); }
.picker-opt:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; }
.picker-strip { display: flex; height: 46px; overflow: hidden; box-shadow: var(--outline); border-radius: var(--radius-s); }
.picker-strip i { flex: 1; }
.picker-text b { display: block; }
.picker-text small { display: block; color: var(--ink-3); }
.picker-opt svg.icon { color: var(--link); }

/* ---------- phones: tables become cards (6.8.1) – every cell shows its column title ---------- */
@media (max-width: 640px) {
  table.rtable, table.rtable tbody, table.rtable tr, table.rtable td { display: block; width: 100%; }
  table.rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.rtable tr { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--radius-s); background: rgb(var(--lite-rgb) / 0.04); box-shadow: var(--outline); }
  table.rtable td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border: 0; text-align: right; min-height: 32px; }
  table.rtable td::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; font-size: 0.78rem; font-weight: 600; color: var(--ink-3); }
  table.rtable td:not([data-label])::before { content: none; }
  table.rtable td:empty { display: none; }
  .table-wrap:has(> table.rtable) { overflow: visible; }
}

/* ---------------------------------------------------------------- two-factor sign-in (6.13, optional again in 6.34) */
.tfa-setup { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.tfa-qr { flex: none; padding: 8px; background: #fff; border-radius: var(--radius-s); line-height: 0; }
.tfa-qr svg.qr { width: 196px; height: 196px; display: block; }
.tfa-secret { font-size: .95rem; letter-spacing: .06em; word-break: break-all; }
input.tfa-code { font-size: 1.35rem; letter-spacing: .25em; text-align: center; max-width: 12em; }
.tfa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 0; padding: 12px 12px 12px 36px; background: var(--glass-2); border: 1px solid var(--line-2); border-radius: var(--radius-s); font-size: 1.05rem; }
@media (max-width: 520px) { .tfa-qr svg.qr { width: 168px; height: 168px; } .tfa-codes { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- support tickets (6.13) */
.tk-card { padding: 0; overflow: hidden; }
.tk-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.tk-head:hover { background: var(--glass-2); }
.tk-card.pending { opacity: .75; }
.tk-card.open > .tk-head { border-bottom: 1px solid var(--line-2); }
.tk-card.open > :not(.tk-head) { padding: 0 16px; }
.tk-card.open > :last-child { padding-bottom: 16px; }
.tk-thread { display: grid; gap: 10px; padding-top: 14px !important; padding-bottom: 14px !important; }
.tk-msg { max-width: min(560px, 88%); padding: 10px 12px; border-radius: var(--radius-s); background: var(--glass-2); border: 1px solid var(--line-2); }
.tk-msg.me { justify-self: end; background: rgb(var(--accent2-rgb) / 0.14); }
.tk-msg.staff { justify-self: start; }
.tk-msg.pending { opacity: .65; border-style: dashed; }
.tk-meta { display: flex; gap: 8px; align-items: center; font-size: .85rem; margin-bottom: 4px; flex-wrap: wrap; }
.tk-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
/* 8.0.0: screenshots on tickets – a row of previews, large in a dialog */
.tki { display: grid; gap: 8px; padding-bottom: 14px !important; }
.tki-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tki-item { position: relative; margin: 0; }
.tki-thumb { display: block; width: 104px; height: 72px; padding: 0; border: 0; border-radius: var(--radius-s); overflow: hidden; cursor: zoom-in; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.tki-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--mv-dur-fast) var(--mv-ease-out); }
.tki-thumb:hover img, .tki-thumb:focus-visible img { transform: scale(1.05); }
.tki-thumb:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.tki-item.team .tki-thumb { box-shadow: inset 0 0 0 2px rgb(var(--accent2-rgb) / 0.55); }
.tki-remove { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: var(--bad, var(--c-danger)); box-shadow: 0 2px 6px rgb(0 0 0 / .4); }
.tki-remove .icon { width: 13px; height: 13px; }
.tki-large { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: var(--radius-s); background: #000; }
.tki-cap { text-align: center; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .tki-thumb img { transition: none; } }
@media (max-width: 560px) {
  .tki-thumb { width: 88px; height: 62px; }
  .tk-head { flex-wrap: wrap; gap: 6px 10px; }
  .tk-head > b.grow { flex: 1 1 calc(100% - 60px); order: 0; }
  .tk-head > .badge, .tk-head > .small { order: 1; }
}

/* chips (moved from team.css in 6.14: the community pages use them too) */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn { font: inherit; font-weight: 700; font-size: 0.86rem; color: var(--ink); background: rgb(var(--lite-rgb) / 0.09); border: 0; padding: 7px 13px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; box-shadow: var(--outline), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.14), inset var(--nbw) var(--nbw) 0 rgb(var(--shade-rgb) / 0.3); margin: 2px; border-radius: var(--radius-b); }
.chip-btn:hover { background: rgb(var(--accent2-rgb) / 0.3); color: #fff; }
.chip-btn[aria-pressed="true"] { color: #fff; background: var(--grass); box-shadow: var(--outline), var(--bevel-hi); }
.chip-btn .n { font-size: 0.76rem; opacity: 0.85; }

/* ---------------------------------------------------------------- shop goal (6.15) */
.sg-card { display: grid; gap: 10px; margin-bottom: 14px; }
.sg-pct { font-size: 1.4rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.sg-bar { height: 14px; border-radius: 999px; background: var(--glass-3); overflow: hidden; }
.sg-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-3), var(--gold)); transition: width .6s ease; }
.sg-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.sg-top, .sg-recent { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.sg-recent { list-style: none; padding-left: 0; }
/* categories (6.16) */
.badge.tk-cat, .badge.ev-type { background: rgb(var(--accent2-rgb) / 0.18); color: var(--ink); border-color: transparent; }
/* 6.22.1: the offer to switch notifications on (player area, team dashboard) */
.push-prompt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; margin-bottom: 18px; }
/* 7.3.0: the offer floats at the bottom of the screen – it is decided only after a few checks, and above the page it
   pushed everything down by its height when it came */
.push-prompt-slot:not(:empty) { position: fixed; z-index: 60; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); width: min(560px, calc(100% - 32px)); transform: translateX(-50%); }
.push-prompt-slot .push-prompt { margin: 0; box-shadow: var(--outline), 0 18px 40px -16px rgb(0 0 0 / .7); background: var(--bg-2); animation: push-in var(--mv-dur-slow) var(--mv-ease-out) both; }
@keyframes push-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .push-prompt-slot .push-prompt { animation: none; } }
@media (max-width: 600px) { .push-prompt { grid-template-columns: auto minmax(0, 1fr); } .push-prompt > :last-child { grid-column: 1 / -1; } }

/* ================================================================== 6.91: the 7.0 design system
   One set of tokens and building blocks for every page (public/assets/js/ui.js builds the markup). Everything is derived
   from the colours of the design in use (theme-shared.js), so all six designs – block family and Vault – follow along.
   Older classes (cm-hero, cm-tile, tp-tile …) keep working; new and redesigned pages use these. */
:root {
  --mv-space-1: 4px; --mv-space-2: 8px; --mv-space-3: 12px; --mv-space-4: 16px; --mv-space-5: 24px; --mv-space-6: 32px; --mv-space-7: 48px;
  --mv-accent: var(--grass-2);
  --mv-accent-2: var(--diamond);
  --mv-surface-1: var(--glass);
  --mv-surface-2: color-mix(in srgb, var(--bg-3) 70%, var(--bg-2));
  --mv-edge: rgb(var(--lite-rgb) / 0.08);
  --mv-glow: color-mix(in srgb, var(--mv-accent) 32%, transparent);
  --mv-page-max: 1240px;
}

/* page head: eyebrow, title, lead, actions – the same on every page */
.mv-head { display: grid; gap: var(--mv-space-3); margin: 0 0 var(--mv-space-6); }
.mv-head > .eyebrow { justify-self: start; margin: 0; }
.mv-head h1 { margin: 0; }
.mv-head .lead { margin: 0; }
.mv-head-actions { display: flex; flex-wrap: wrap; gap: var(--mv-space-2); margin-top: var(--mv-space-1); }
.mv-head.center { justify-items: center; text-align: center; }
.mv-head.center > .eyebrow { justify-self: center; }
.mv-head.hero { position: relative; isolation: isolate; padding: var(--mv-space-6) var(--mv-space-5); border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, var(--mv-glow), transparent 60%), var(--mv-surface-1); box-shadow: var(--outline), inset 0 0 0 1px var(--mv-edge); }

/* sections: a heading row (title + actions) above its content */
.mv-section { display: grid; gap: var(--mv-space-4); margin: 0 0 var(--mv-space-6); }
.mv-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mv-space-2) var(--mv-space-4); }
.mv-section > *, .mv-section-head > * { min-width: 0; max-width: 100%; }   /* a long chip row scrolls instead of widening the page */
.mv-section-head h2 { display: flex; align-items: center; gap: var(--mv-space-2); margin: 0; }
.mv-section-head h2 .icon { color: var(--mv-accent); }

/* grids of cards: as many columns as fit (--min sets the narrowest card) */
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 260px)), 1fr)); gap: var(--mv-space-4); }

/* number tiles */
.mv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--mv-space-3); margin: 0 0 var(--mv-space-5); }
.mv-tile { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px var(--mv-space-3); padding: var(--mv-space-3) var(--mv-space-4);
  border-radius: var(--radius); background: var(--mv-surface-1); box-shadow: var(--outline), inset 0 0 0 1px var(--mv-edge); }
.mv-tile > .icon { grid-row: span 2; width: 34px; height: 34px; padding: 7px; border-radius: var(--radius-s); color: var(--mv-tile, var(--mv-accent)); background: color-mix(in srgb, var(--mv-tile, var(--mv-accent)) 16%, transparent); }
.mv-tile .v { font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mv-tile .k { color: var(--ink-2); font-size: .9rem; font-weight: 600; }

/* filter chips that scroll sideways on phones */
.mv-chips { display: flex; gap: var(--mv-space-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.mv-chips .chip-btn { flex: none; }

@media (max-width: 600px) { .mv-head.hero { padding: var(--mv-space-5) var(--mv-space-4); } .mv-section, .mv-head { margin-bottom: var(--mv-space-5); } }
/* 6.93 (7.0): lists – sortable column titles, a check box per row and the bar for the chosen ones (team/common.js table) */
.th-sort { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.th-sort:hover { color: var(--ink); }
.th-sort:focus-visible { outline: 2px solid rgb(var(--accent2-rgb) / .8); outline-offset: 2px; }
.th-arrow { width: 0; height: 0; border: 4px solid transparent; opacity: .35; border-top-color: currentColor; transform: translateY(2px); }
th[aria-sort="ascending"] .th-arrow { opacity: 1; border-top-color: transparent; border-bottom-color: currentColor; transform: translateY(-2px); }
th[aria-sort="descending"] .th-arrow { opacity: 1; }
.rtable th.sel, .rtable td.sel { width: 36px; padding-right: 0; }
.rtable td.sel input, .rtable th.sel input { width: 18px; height: 18px; margin: 0; }
.bulk-bar { position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin: 0 0 10px; padding: 10px 14px; border-radius: var(--radius-s); background: color-mix(in srgb, var(--grass) 18%, var(--bg-2)); box-shadow: var(--outline), var(--shadow-s);
  animation: menu-in var(--mv-dur-base) var(--mv-ease-out) both; }
.bulk-bar[hidden] { display: none; }
@media (max-width: 700px) { .rtable td.sel { width: auto; } .rtable td.sel:empty { display: none; } }
@media (prefers-reduced-motion: reduce) { .bulk-bar { animation: none; } }
/* ================================================================== 7.0: readable everywhere (WCAG AA, measured) */
/* rank names: the ring in the rank colour, the text mixed with the text colour of the design */
.rank { color: color-mix(in oklab, var(--rank, var(--ink-3)) 45%, var(--ink)); box-shadow: 0 0 0 2px var(--rank, currentColor); }
/* 7.24.0: the LuckPerms prefix of a rank (GUIDE, MARSHAL …) – each letter in its colour, mixed with the text colour so it stays readable in every design */
.rank-prefix { letter-spacing: .03em; white-space: nowrap; }
.rank-prefix > span { color: color-mix(in oklab, var(--c, currentColor) 55%, var(--ink)); }
.rank-prefix > .b { font-weight: 800; }
/* unread counters: white on a red that reaches 4.5:1 (the redstone red gave 4.1) */
.count.alert, .tab .count.alert, .tm-chan .count.alert, .side-nav a .count, .pl-link .count.alert { background: var(--c-alert); color: #fff; }
/* 7.1: sorting on phones – the column titles are hidden there (cards), so a "Sort by" choice takes their place; the
   hidden title buttons leave the tab order (no invisible stops for the keyboard) */
.sort-pick { display: none; }
@media (max-width: 640px) {
  .sort-pick { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 10px; font-size: .85rem; color: var(--ink-2); }
  .sort-pick select { width: auto; min-width: 0; max-width: 70%; padding: 6px 10px; }
  table.rtable thead .th-sort { visibility: hidden; }
}
/* 7.8.6: tabs of pages that share one entry in the navigation (Inbox, Support, Rankings – shell.js pageTabs) */
.pg-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: var(--radius); background: rgb(var(--shade-rgb) / .3); box-shadow: var(--outline); }
.pg-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: var(--radius-s); color: var(--ink-2); font-weight: 700; text-decoration: none;
  transition: background var(--mv-dur-fast) var(--mv-ease-out), color var(--mv-dur-fast) var(--mv-ease-out); }
.pg-tabs a:hover { color: var(--ink); background: rgb(var(--accent2-rgb) / .14); text-decoration: none; }
.pg-tabs a[aria-current="page"] { color: #fff; background: var(--grass); box-shadow: 0 3px 0 var(--grass-3); }
.pg-tabs .icon { width: 18px; height: 18px; flex: none; }
#app > .pg-tabs + * { margin-top: 18px; }
@media (max-width: 600px) { .pg-tabs a { flex: 1 1 0; justify-content: center; padding: 8px 6px; } .pg-tabs a span { font-size: .86rem; } }
@media (prefers-reduced-motion: reduce) { .pg-tabs a { transition: none; } }
/* 8.6.0: a group of 4+ tabs is one compact choice on a phone (the community tabs are already above it) */
.pg-tabs-pick { display: none; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: var(--radius); background: rgb(var(--shade-rgb) / .3); box-shadow: var(--outline); }
.pg-tabs-pick-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.pg-tabs-pick-label .icon { width: 18px; height: 18px; }
.pg-tabs-pick-select { flex: 1 1 auto; min-width: 0; min-height: 40px; }
/* the .input background hid the arrow of base.css – put it back, so the field reads as a choice */
.pg-tabs-pick .pg-tabs-pick-select { background-image: linear-gradient(45deg, transparent 50%, var(--gold-2) 50%), linear-gradient(135deg, var(--gold-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
#app > .pg-tabs-wrap + * { margin-top: 18px; }
@media (max-width: 600px) { .pg-tabs-wrap .pg-tabs-wide { display: none; } .pg-tabs-wrap .pg-tabs-pick { display: flex; } }

/* the search box (6.16 team area, 7.24/7.25 every page – site-search.js) */
.pal-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgb(var(--shade-rgb) / 0.55); backdrop-filter: blur(3px); }
.pal { width: min(640px, 100%); display: grid; border-radius: 14px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgb(var(--shade-rgb) / 0.5); }
.pal-input { border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 16px 18px; font-size: 1.05rem; background: transparent; }
.pal-input:focus { outline: none; box-shadow: none; }
.pal-list { max-height: 50vh; overflow: auto; padding: 6px; display: grid; gap: 2px; }
.pal-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.pal-item.on, .pal-item:hover { background: rgb(var(--accent2-rgb) / 0.2); text-decoration: none; }
.pal-foot { padding: 8px 14px; border-top: 1px solid var(--line-2); }
.pal-group { padding: 8px 12px 2px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hd-search kbd { margin-left: 6px; padding: 1px 5px; border-radius: 4px; font: 700 .68rem/1.4 var(--font, system-ui); background: rgb(var(--lite-rgb) / .08); color: var(--ink-3); }
/* 7.28: rules referenced from reasons, tickets and appeals ("§12" links, "§12 No Griefing" beside a punishment) */
a.rule-ref { color: var(--link); font-weight: 700; text-decoration: none; white-space: nowrap; }
a.rule-ref:hover { text-decoration: underline; }
a.rule-chip { display: inline-flex; align-items: baseline; gap: 6px; width: fit-content; max-width: 100%; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line-2); color: var(--ink-2); font-size: .88rem; text-decoration: none; overflow-wrap: anywhere; }
a.rule-chip b { color: var(--gold); }
a.rule-chip:hover { border-color: var(--gold); color: var(--ink); }
/* 7.28: "?" – the keyboard shortcuts */
.kb-help { display: grid; gap: 14px; min-width: min(420px, 100%); }
.kb-group { margin: 0 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.kb-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; align-items: center; }
.kb-list dt { white-space: nowrap; }
.kb-list dd { margin: 0; color: var(--ink-2); }
/* 7.29: rating of a closed ticket – stars a player picks, the team's average */
.tk-card.open > .tk-rate { display: grid; gap: 8px; margin: 0 16px 14px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--glass-2); border: 1px solid var(--line-2); }
.tk-rate input { flex: 1 1 220px; min-width: 0; }
.tk-star-pick { display: inline-flex; gap: 2px; }
.tk-star { min-width: 40px; min-height: 40px; padding: 0 4px; background: none; border: 0; border-radius: var(--radius-s); color: var(--ink-3); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.tk-star.on { color: var(--gold); }
.tk-star:hover, .tk-star:focus-visible { background: var(--glass-3); }
.tk-stars { color: var(--gold); font-size: 1.15rem; letter-spacing: 1px; white-space: nowrap; }
.tk-rating-sum { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* 8.6.0: a sideways row fades at the side where more is hidden (classes set by shell.js from the scroll position) */
.edge-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.edge-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.edge-l.edge-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
/* 8.6.0: the technical ids of an account (UUID, LuckPerms group) fold away under "Details" on the profile */
.profile-details { margin-top: 12px; }
.profile-details > summary { cursor: pointer; color: var(--ink-2); font-weight: 700; width: fit-content; }
.profile-details > summary:hover { color: var(--ink); }
.profile-details[open] > summary { margin-bottom: 8px; }
/* 8.6.0: leaderboards without entries fold away at the end of /leaderboards */
.lb-empty > summary { cursor: pointer; color: var(--ink-2); font-weight: 700; width: fit-content; margin-top: 4px; }
.lb-empty > summary:hover { color: var(--ink); }
.lb-empty[open] > summary { margin-bottom: 12px; }